Como validar seu HTML de acordo com a W3C – Parte 3
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.
- Favoritar :
- Digg
- diHITT
- del.icio.us
- Stumbleupon
- Redit it
Comentários
Deixe um comentário
Notícias por email
cara to com um projeto da facu, preciso validar meu site, vc pode me ajudar urgente?
o erro são somente dois cara, preciso zero isto!
ai vai o erro!!!!!
Line 1, Column 23: name start character invalid: only minimum literal and parameter separators are allowed
depois que vi o seu blog tentei de tudo mais não deu certo não. da pra dar uma força, por favor!
Line 1, Column 23: name start character invalid: only minimum literal and parameter separators are allowed
Line 1, Column 23: name start character invalid: only minimum literal and parameter separators are allowed
!DOCTYPE html PUBLIC XHTML 1.0 Transitional
Parabéns pelos post’s, realmente muito didático e proveitoso, uma vez que o mesmo auxilia e muito na hora de validar um código HTML.
MUITO BOM!!