Blog da Sr. Web » xhtml http://blog.srweb.com.br Só mais um blog do WordPress Wed, 27 May 2009 18:50:14 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Como validar seu HTML de acordo com a W3C – Parte 3 http://blog.srweb.com.br/como-validar-seu-html-de-acordo-com-a-w3c-parte-3/ http://blog.srweb.com.br/como-validar-seu-html-de-acordo-com-a-w3c-parte-3/#comments Sun, 26 Apr 2009 14:45:18 +0000 Wesley Oliveira http://blog.srweb.com.br/?p=126 Continuando nossa série de posts que tratam da Validação de HTML:
Como validar seu HTML de acordo com a W3C
Como validar seu HTML de acordo com a W3C – Parte 2

Hoje evoluiremos ainda mais nosso conceito sobre HTML, e dessa vez com a validação do nosso mesmo código, agora com outro DOCTYPE para o XHTML 1.0 Transitional.

Não pense que nosso trabalho está perto do fim, temos surpresas reservadas para esse simples código, ingênuo, mas como dissemos anteriormente bastante traiçoeiro.

Nosso código de partida conforme post anterior está conforme abaixo:

[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]

Então mais do que nunca vamos ao código:

O DOCTYPE do XHTML 1.0 Transitional está abaixo, substitua a primeira linha do código:

[html toolbar="false"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[/html]

Vamos submeter ao validador da W3C http://validator.w3.org e ver os resultados.

Advinhem o que aconteceu?!?!?!? 23 erros e 1 warning que não consideraremos pois é devido usarmos o input diretamente do código.

Como já é um costume nosso, vamos ao que importa: arrumar esse código.

Um detalhe importante na validação do código HMTL é a ordem que você segue para arrumar o código, é importantíssimo que seja de cima para baixo pois tem erros decorrentes dos erros de cima e, com isso arrumar um erro pode diminuir vários erros da validação.

erro: Line 2, Column 1: Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtml

1º Ajuste: Incluir dentro da tag html nossas informações de xmlns e dados de linguagem. No XHTML isso sempre é solicitado, diferentemente dos anteriores que fizemos.

correção – Substitua a tag html pela abaixo:

[html toolbar="false"]
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR" lang="pt-BR">
[/html]

erro: Line 4, Column 68: end tag for “meta” omitted, but OMITTAG NO was specified

2º Ajuste: Temos agora um problema conceitual que é o seguinte: no XHTML todas as tags devem ter ou seu fim com <tag></tag> ou <tag /> Nesse caso o problema foi com a tag meta.

correção: escrever corretamente o final da tag meta conforme abaixo

[html toolbar="false"]

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

[/html]

erro: Line 10, Column 6: end tag for “br” omitted, but OMITTAG NO was specified
3º Ajuste: Igualmente já comentamos temos erro na tag br por não ter fechado a tag.
correção – Fechar as duas tags br corretamente conforme código abaixo:
[html toolbar="false"]
<br /> <br />
[/html]

erro: Line 11, Column 39: end tag for “img” omitted, but OMITTAG NO was specified
4º Ajuste: Igualmente erro com a falta da “/” no final da tag.
correção – Fechar a tag img conforme abaixo:
[html toolbar="false"]
<img src="arroba.png" alt="logotipo" />
[/html]

erro: Line 37, Column 6: document type does not allow element “tr” here
5º Ajuste: Temos agora um problema bem interessante aqui. Trata-se de um problema com um escopo maior pois temos um tr sem finalizar e o validador deu o erro no tr abaixo. O mais interessante é que só agora o validador mostrou esse erro tão grave!
correção – incluir a tag de fechamento para o devido tr conforme abaixo:
[html highlight="8"]
<tr>
<td>
Linha 02 a
</td>
<td>
Linha 02 b
</td>
</tr>
[/html]

erro: Line 41, Column 7: document type does not allow element “td” here
6º Ajuste: Igualmente ao erro anterior temos um td agora sem fechamento adequado e dando erro td no posterior.
correção – incluir a tag de fechamento para os dois td conforme abaixo:
[html highlight="4,7"]
<tr>
<td>
Linha 03 a
</td>
<td>
Linha 03 b
</td>
</tr>
[/html]

Parabéns. Agora você tem seu código totalmente validado XHTML 1.0 Transitional.

Deixamos aqui uma surpresa para você, prometemos que íamos validar o código com XHTML 1.0 Strict. Como fomos disciplinados e logicamente nosso código não tem nada que fere a especificação XHTML 1.0 Strict podemos simplesmente mudar o DOCTYPE do nosso HTML e sermos vencedores mais uma vez.

Temos também o código totalmente validado XHTML 1.0 Strict.

O código final deve ter ficado como abaixo:
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR" lang="pt-BR">
<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>
<tr>
<td>
Linha 03 a
</td>
<td>
Linha 03 b
</td>
</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 aí pessoal, fizemos alguns exercícios com HTML, validadores e espero que vocês tenham aproveitado essa série de Posts sobre Validadores HTML.

Qualquer dúvida coloquem nos comentários que em breve esclareceremos mais coisas.

Até a próxima.

]]> http://blog.srweb.com.br/como-validar-seu-html-de-acordo-com-a-w3c-parte-3/feed/ 0