faculdades integradas santa cruz curso básico de html professor: julio eduardo martins
TRANSCRIPT
![Page 1: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/1.jpg)
Faculdades Integradas Santa Cruz
Curso Básico de HTMLProfessor: Julio Eduardo Martins
![Page 2: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/2.jpg)
Introdução
O que é uma página WEB?• É um documento composto por texto e
códigos especiais chamados tags;
• Pode conter também sons, imagens, links para outros documentos e códigos de programação;
• As páginas podem ser codificadas em um editor de texto comum.
![Page 3: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/3.jpg)
Introdução (2)
As páginas são “interpretadas” pelo Browser e apresentadas;
O código HTML é independente de plataforma, sistema operacional ou hardware.
![Page 4: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/4.jpg)
HTML
HTML não é uma linguagem em si; Trata-se apenas de comandos
específicos para formatação e apresentação de componentes gráficos.
HTML - Hypertext Markup Language
![Page 5: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/5.jpg)
HTML (2)
Todo o HTML é estruturado em tags. Uma tag tem o seguinte formato:
• <nome_da_tag>Conteudo_da_tag</nome_da_tag>
A grande maioria das tags ocorre em pares e pode ser utilizada de maneira aninhada.
![Page 6: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/6.jpg)
Estrutura Básica de uma Página
<html>
<head>
<title> Titulo da Página </title>
</head>
<body>
<p> Parágrafo 1 </p>
</body>
</html>
![Page 7: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/7.jpg)
Cabeçalhos
Tags de cabeçalho servem para definir tópicos em um documento HTML.
Os tipos de cabeçalhos podem ser:• <h1> Cabeçalho nível 1 </h1>
• <h2> Cabeçalho nível 2 </h2>
• <h3> Cabeçalho nível 3 </h3>
• <h4> Cabeçalho nível 4 </h4>
• <h5> Cabeçalho nível 5 </h5>
• <h6> Cabeçalho nível 6 </h6>
![Page 8: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/8.jpg)
Espaços
Espaços em branco não tem sentido em HTML. O browser substitui qualquer seqüência de espaços por um único espaço simples.
Se quisermos forçar uma sequencia de espaços em branco, devemos substituir o espaço em branco por  
![Page 9: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/9.jpg)
Quebras de Linha
Para produzir uma quebra de linha em HTML não basta apenas dar <enter> no código.
É preciso utilizar um caractere especial:
<br/>
![Page 10: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/10.jpg)
Parágrafos
Uma forma mais simples e correta de produzir um parágrafo em um documento HTML (melhor do que colocar uma sequencia de quatro  ) é utilizar a tag:
<p> Conteúdo_do_Parágrafo</p>
![Page 11: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/11.jpg)
Formatação de Caractere
<b> Texto_em_negrito </b> <i> Texto_em_itálico </i> <u> Texto_sublinhado </u> <sup> Texto_sobrescrito </sup> <sub> Texto_subscrito </sub> <blink> Texto_piscante </blink>
![Page 12: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/12.jpg)
Formatação de Caractere (2)
<em> Texto_com_ênfase </em> <strong> Texto_mais_enfático </strong> <big> Tamanho_grande </big> <small> Tamanho_pequeno </small>
![Page 13: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/13.jpg)
Texto sem formatação
Algumas vezes se faz necessária a apresentação de texto sem qualquer formatação adicional realizada pelo browser. Para isto, temos a tag:
<pre> Texto_sem_formatação </pre>
![Page 14: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/14.jpg)
Formatação de Fonte
Para formatar a fonte dos carteres a tag é:
<font size=n face=nome color=cor>
Onde:
n : Tamanho da fonte;
face: Nome da fonte;
color: cor da fonte em RGB ou nome.
![Page 15: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/15.jpg)
Listas
Existem alguns tipos de listas. São elas:• Listas Ordenadas: <ol>
• Listas Não Ordenadas: <ul>
![Page 16: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/16.jpg)
Listas (2)
Exemplos:• Listas Ordenadas:
<ol>
<li> Item 1 </li>
<li> Item 2 </li>
</ol>
![Page 17: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/17.jpg)
Listas (3)
Exemplos (2):• Listas não ordenadas:
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
</ul>
![Page 18: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/18.jpg)
Links
Links em uma mesma página:• É possível criar links direcionados para uma
mesma página. Para tal, primeiramente é necessário criar uma âncora (ponto de referência para onde o link irá apontar)
<a name=“#Nome da âncora”>Texto em destaque</a>
![Page 19: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/19.jpg)
Links (2)
Links em uma mesma página (2):• Para criar um link que aponte para a âncora
previamente estabelecida a sintaxe é:
<a href=“#Nome da âncora”>Texto usado como hipertexto</a>
![Page 20: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/20.jpg)
Links (3)
Links para outras páginas:• Para direcionar um link para uma outra página basta
usar a sintaxe:
<a href=“intro.htm”>Introdução</a><a href=“conceitos.htm#parte2”>Conceitos Básicos</a>
<a href=“biblio/refer.htm”>Referências</a>
<a href=“www.juliomartins.net/index.htm”>Legal</a>
![Page 21: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/21.jpg)
Imagens
Geralmente GIF, JPG ou PNG Sintaxe:
<IMG SRC=“arquivo.gif”>
<IMG ALiGN=“top/middle/BOTTOM” SRC=“paisagem.jpg”>
<IMG SRC=“arquivo.gif” HEIGHT=100 WIDTH=165>
<A HREF=“livro-bd.htm”> <IMG SRC=“korth.gif”> </A>
![Page 22: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/22.jpg)
Cores e Fundos
Você pode alterar as cores e alguns padrões alterando atributos da tag <body>:
<body bgcolor=#000000 text=#EEEEBB link=#33CCFF vlink=#CC0000>
<BODY BACKGROUND=“marmore.gif”>
![Page 23: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/23.jpg)
Endereço e Rodapé de Página
Para dar informações adicionais sobre a data de criação e o autor da página usamos a tag:
<address> Informações </address>
![Page 24: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/24.jpg)
Tabelas
As tabelas servem para a apresentação de informação de forma tabular, porém são também um poderoso recurso para a definição do layout de uma página HTML.
![Page 25: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/25.jpg)
Tabelas (2)
Tags: <table> : Indica o início de uma tabela <caption>: Cria uma legenda para a tabela <tr> : (table row) – Cria uma linha na tabela <td> : (table data) : Define os dados de uma
celula <th> : (table header) : Faz o mesmo que o
<td> porém com a formatação diferenciada
![Page 26: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/26.jpg)
Tabelas (3)
Atributos importantes:• align : Define o alinhamento horizontal da célula
• valign: Define o alinhamento vertical da célula
• colspan: Indica quantas colunas da tabela a célula deve ocupar
• rowspan: Indica quantas linhas da tabela a célula deve ocupar
• border: Define a espessura da borda da tabela
• width: Define a largura da tabela (em % ou absoluta)
![Page 27: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/27.jpg)
Frames
Os frames (molduras) permitem apresentar mais de uma página HTML na tela, simultaneamente.
É necessário, inicialmente, criar um documento especial que contém as definições de todas as janelas.
![Page 28: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/28.jpg)
Frames (2)
<frameset cols=tamanho frameborder=1/0 framespacing=espaçamento
rows=tamanho> <frame name=nome scrolling=yes/no
noresize src=endereço>. . .</frameset>
![Page 29: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/29.jpg)
Frames (3)
Exemplo
<html>
<frameset cols=30%, * >
<frame name=“menu” SRC=“indice.htm”>
<frame name=“texto”>
</frameset>
</html>
![Page 30: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/30.jpg)
Frames (4)
<html>
<head><title>Menu Principal</title>
<base target=“texto”>
</head>
<body>
. . .
</body>
</html>
![Page 31: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/31.jpg)
Dúvidas
![Page 32: Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins](https://reader034.vdocuments.site/reader034/viewer/2022051400/552fc0f9497959413d8b6656/html5/thumbnails/32.jpg)
Faculdades Integradas Santa Cruz
Curso Avançado de HTMLProfessor: Julio Eduardo Martins