Estrutura HTML - básico

•

FATEC-BS

Renata Alberti

29/04/2015

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Teoria
MENU
TAGS DE TÍTULO
As TAGs H1, H2, H3, H4, H5 e H6 muitas vezes passam despercebidas, mas são essenciais na estratégia de otimização também, pois elas são indicações da importância de uma determinada informação no site, sendo H1 a mais importante e H6 a menos importante. É um padrão definido pela W3C e é altamente recomendável que sejam utilizadas, pois o Google utiliza estas tags como critério de posicionamento.
 Exemplos: Clique aqui!
MENU
Elementos que vão dentro do <body> </body>. 
Definição de conteúdo (h1, h2, h3, h4, h5, h6, em, strong, p)
Tabela (table, caption, thead, tbody, tr, th, td);
Listas (ul, li, ol);
Imagens (img src=“” alt=“”)
Links (a href=“” title=“”, a href=“#topo”)
Formulários (form , p, label, input, fieldset, legend)
Outros (div, span, br)
MENU
TEORIA: CLIQUE AQUI!
EXEMPLOS: CLIQUE AQUI!
MENU
TAGS DE TÍTULO
...
<body>
 <h1> ESTE É O ELEMENTO H1 </h1> <br>
 <h2> ESTE É O ELEMENTO H2 </h2> <br>
 <h3> ESTE É O ELEMENTO H3 </h3> <br>
 <h4> ESTE É O ELEMENTO H4 </h4> <br>
 <h5> ESTE É O ELEMENTO H5 </h5> <br>
 <h6> ESTE É O ELEMENTO H6 </h6> <br>
</body>
...
Teoria: Clique aqui!
MENU
ÊNFASE
...
<body>
 <p>
 <em> Texto com ênfase </em>, texto sem ênfase
 </p>
</body>
...
MENU
ESTRUTURA DA TABELA
<table> INICIO DA TABELA
 <caption>AQUI VAI A LEGENDA DA TABELA </caption> PARA DEFICIENTES VISUAIS
 <thead> CABEÇALHO DA TABELA
	<tr> INICIO LINHA DE CABEÇALHO DA TABELA
	 <th> TITULO DA CÉLULA
 CABEÇALHO 1 
 </th> 
	 <th> TITULO DA CÉLULA
 CABEÇALHO 2
 </th>
	</tr> 
 </thead>
 <tbody> CORPO DA TABELA
	<tr> INICIO SEGUNDA LINHA DA TABELA
	 <td> PRIMEIRA CÉLULA
 CORPO 1
 </td> 
	 <td> SEGUNDA CÉLULA
 CORPO 2
 </td>
	</tr> 
 </tbody>
</table> FINAL DA TABELA
tr: cria uma nova linha na tabela.
th: usado para células de cabeçalho.
td: utilizado para células comuns.
MENU
14
LISTA ORDENADA
...
<body>
	<ol>
	 <li> 10/03 á 15/03: Aplicação da avaliação 1 - (P1) </li>
	 <li> 12/05 á 17/05: Aplicação da avaliação 2 - (P2) </li>
	 <li> 26/05 á 31/05 Aplicação da avaliação 3 - (Substitutiva) </li>
	</ol>
</body>
...
MENU
LISTA NÃO ORDENADA
...
<body>
	<ul>
	 <li> 10/03 á 15/03: Aplicação da avaliação 1 - (P1) </li>
	 <li> 12/05 á 17/05: Aplicação da avaliação 2 - (P2) </li>
	 <li> 26/05 á 31/05 Aplicação da avaliação 3 - (Substitutiva) </li>
	</ul>
</body>
...
MENU