23 abril, 2009 por Wesley Oliveira Categorias :
Padrões
Tutoriais Tags: , , , , ,

Como validar seu HTML de acordo com a W3C – Parte 2

No post anterior, fizemos a validação de um HTML para HTML 4.01 Transitional: Como validar seu HTML de acordo com a W3C

Aconselho você que antes de ler esse post leia o anterior. Afinal, é uma continuação, e algumas coisas poderão ficar mais claras seguindo essa idéia. ;)

Código Validado e finalizado no post anterior.

[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Página de Teste – Sr Web</title>
</head>
<body>
<h1>Página Principal</h1>
<br><br>
<img src="arroba.png" alt="logotipo">
<br><br>
<table border=’1′>
<tr>
<td>
Cabeçalho Coluna 1
</td>
<td>
Cabeçalho Coluna 2
</td>
</tr><br />
<tr><br />
<td>
Linha 01 a
</td>
<td>
Linha 01 b
</td>
</tr><br />
<tr><br />
<td>
Linha 02 a
</td>
<td>
Linha 02 b
</td>
<tr>
<td>
Linha 03 a
<td>
Linha 03 b
</tr>
</table></p>
<p> <br><br>
Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.
<br><br>
<a href="arroba.png">Clique aqui para ver nosso logotipo</a></p>
<p></body>
</html>
[/html]

Faremos agora a validação daquele código final, conforme acima, para validá-lo agora com o HTML 4.01 Strict, nossa idéia é ir incrementando aos poucos até chegar no último nível que é o XHTML 1.0 Strict.

Maõs a obra! Vamos já alterar o tipo do documento para HTML 4.01 Strict e passar no validador da w3c http://validator.w3.org

Altere o DOCTYPE do HMTL, deixe-o conforme abaixo:

[html toolbar="false" tabsize="4"]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
[/html]

Vemos agora que temos 11 erros para arrumar e 1 warning (Incrível! Mas aquele nosso código parecia ser tão legal, até tinha validado…)

O que acontece é que cada DOCTYPE funciona como uma lente e ao olharmos a mesma coisa com lentes diferentes e teremos resultados diferentes, como somos persistentes e não desistimos no primeiro obstáculo, vamos imediatamente corrigir essas diferenças e fazer um HTML 4.01 Strict digno de ser validado pela W3C.

1º Ajuste: É um ajuste bem conceitual e importante. A regra dele é simples: todo elemento de linha deve estar dentro de um elemento de bloco.

Há duas formas básicas de diferenciar elementos bloco (e.g., p, h1, form, table) de elementos de linha (e.g., em, span, input):

  • * Conteúdo – elementos de bloco podem conter outros elementos de bloco e elementos de linha. Já os elementos de linha somente podem conter outros elementos de linha;
  • * Formatação – elementos de bloco começam em novas linhas, o que não acontece com elementos de linha.”

fonte: http://warau.nied.unicamp.br/?id=t33

Sendo assim temos algumas coisas “voando pela página” como os br . Indo mais a fundo no conceito, é realmente necessário esse monte de br em nossas páginas? De qualquer maneira vamos deixá-los para estudos e usá-los somente quando necessário, pois no nosso caso eles servem apenas para separar conteúdo que facilmente organizaremos colocando-os dentro de tags p (parágrafos).

correção – Coloque então todos os br dentro de p conforme abaixo:

[html toolbar="false"]
<p>
<br><br>
</p>
[/html]

Ao ajustar isso nosso número de erros já diminui bastante (3 erros e 2 warnings), vamos em frente corrigir os demais erros.

2º Ajuste:  Colocar o img dentro de um elemento de bloco. Visto que img é um elemento de linha e não pode ser apresentado sem um elemento de bloco envolvendo-o.

correção – coloque o img dentro de um elemento de parágrafo p

[html toolbar="false"]
<p>
<img src="arroba.png" alt="logotipo">
</p>
[/html]

3º Ajuste: Igualmente ao item anterior, a parte que contém nosso texto/conteúdo também deve estar dentro de um elemento de bloco.

correção – Coloque o texto dentro de uma tag p conforme código abaixo

[html toolbar="false"]
<p>
Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.
</p>
[/html]

4º Ajuste: Idem aos dois anteriores temos que ajustar o link a dentro de um elemento de bloco, também pelos mesmos motivos já citados.

correção – Coloque o link dentro de uma tag p conforme código abaixo:

[html toolbar="false"]
<p>
<a href="arroba.png">Clique aqui para ver nosso logotipo</a>
</p>
[/html]

Pronto: Agora temos um código HTML 4.01 Strict válidado. Parabéns.

Aprendemos com isso um conceito muito importante que são os elementos de bloco e elementos de linha, no começo pode parecer confuso distinguir uns de outros, mas uma dica interessante é saber se esse elemento utilizado num contexto inicia-se em outro parágrafo, se sim, então ele certamente é um elemento de bloco e o contrário disso é um elemento de linha.

Para dar um toque de classe ao nosso código vamos então deixar as coisas devidamente em seus parágrafos. Teremos 3 parágrafos e não usaremos todos os br.

Abaixo temos o código já revisado e validado – HTML 4.01 Strict:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Página de Teste – Sr Web</title>
</head>
<body>
<h1>Página Principal</h1>
<p>
<br><br>
<img src="arroba.png" alt="logotipo">
</p>
<table border=’1′>
<tr>
<td>
Cabeçalho Coluna 1
</td>
<td>
Cabeçalho Coluna 2
</td>
</tr>
<tr>
<td>
Linha 01 a
</td>
<td>
Linha 01 b
</td>
</tr>
<tr>
<td>
Linha 02 a
</td>
<td>
Linha 02 b
</td>
<tr>
<td>
Linha 03 a
<td>
Linha 03 b
</tr>
</table>
<p>Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.</p>
<p><a href="arroba.png">Clique aqui para ver nosso logotipo</a></p>
</body>
</html>
[/html]

É isso, você está a cada dia mais conceituado em HTML e espero que você possa melhorar ainda mais.

Bons estudos e não deixe de comentar.

Até mais.

Trackbacks & Pingbacks


Comentários

Emerson Almeida 18 de março de 2011

Vlw Muito Bom

Deixe um comentário