Blog da Sr. Web » Wesley Oliveira 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 Como validar seu HTML de acordo com a W3C – Parte 2 http://blog.srweb.com.br/como-validar-seu-html-de-acordo-com-a-w3c-parte-2/ http://blog.srweb.com.br/como-validar-seu-html-de-acordo-com-a-w3c-parte-2/#comments Thu, 23 Apr 2009 23:18:16 +0000 Wesley Oliveira http://blog.srweb.com.br/?p=63 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.

]]> http://blog.srweb.com.br/como-validar-seu-html-de-acordo-com-a-w3c-parte-2/feed/ 1 Como validar seu HTML de acordo com a W3C http://blog.srweb.com.br/como-validar-seu-html-de-acordo-com-a-w3c/ http://blog.srweb.com.br/como-validar-seu-html-de-acordo-com-a-w3c/#comments Tue, 21 Apr 2009 16:48:33 +0000 Wesley Oliveira http://blog.srweb.com.br/?p=31 valid-html401Um site deve ser bonito por dentro e por fora, ou seja, precisa ser apresentável de forma que seu usuário possa navegar nele com facilidade, a apresentabilidade deve estar presente também em seu código interno pois facilitará manutenções, ganhará agilidade e poderá focar nos negócios, assim trocar “A” por “B” no conteúdo de seu site será muito simples e rápido.

Para auxiliar nessa tarefa e garantir que nosso site seja bonito por dentro e por fora usaremos a ferramenta de validação de HMTL fornecido pela W3C que é o orgão regulamentador do HTML no mundo. Seu site é http://validator.w3.org.

Seguindo esses padrões teremos algumas vantagens imediatas:

  • Código mais limpo para manutenções
  • Uniformidade de apresentação entre browsers
  • Carregamento mais rápido.
  • Fácil indexação pelas ferramentas de busca (google, yahoo)


Preparamos aqui um código HMTL para estudos, não se engane esse código abaixo é muito traiçoeiro e o 1º desafio é você saber a quantidade de erros/warnings que esse código produzirá.

Código:

[html smarttabs="true" tabsize="4"]
<html>
<head>
<title>Página de Teste – Sr Web</>
</head>
<body>
<h1>Página Principal</h1>
<br><br>
<img src="arroba.png"/>
<br><br>
<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>
<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>
</body>
</html>
[/html]

Iremos agora acessar o site http://validator.w3.org e colar o código acima na aba “Validate by direct Input”, temos outras duas opções que poderemos usar em casos diferentes. Uma delas é a “Validate by URI” que possibilita passarmos a URL da página (obrigatoriamente ele precisa estar hospedado em algum servidor. Pois a página de validação não tem acesso local. Ex: localhost).E a outra aba refere-se a inserção de código via upload de arquivo.

No nosso caso podemos simplesmente copiar o código acima, colar na aba “Validate by direct Input” e clicar no botão “Check”‘.

Validador

Para nossa surpresa são apresentados 2 erros e 6 warnings!!!!

Erros

Obviamente que a primeira reação de um bom programador é pedir pra ele validar novamente clicando no botão “Revalidate” (Como se realmente tivesse alguma chance de mudar esse status, heheheh).

Seguindo então o 1º mandamento dos programadores “Não discuta com o compilador/intepretador”. Resolveremos agora cada um desses erros e ensinaremos para esse validador quem que manda por aqui, ou por lá, depende do ponto de vista.

Nossa estratégia agora é arrumar primeiro os erros e na seqüência os warnings.

1º Ajuste: Arrumar o tipo de documento que ele já acusou no primeiro warning. Escolheremos aqui por questões didáticas o HTML 4.01 Transitional.

correção – colocar na 1ª linha do HTML o seguinte código:
[html toolbar="false"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[/html]

2º Ajuste: Incluir a propriedade “ALT” na tag img. Ela é utilizada pelos browsers quando por qualquer motivo a imagem não puder ser exibida.

correção – troque o código da linha 8 pelo código abaixo:
[html toolbar="false" firstline="7" highlight="8"]
<br><br>
<img src="arroba.png" alt="logotipo" />
<br><br>
[/html]

Pronto caso você queira conhecer a famosa “barra verde do sucesso”, citada pelo livro “HTML – Use a Cabeça“, ela está aí. Temos ainda alguns warnings para corrigir e já faremos na seqüência.

3º Ajuste: Colocar corretamente o final da tag title, pois, cuidadosamente colocamos apenas o no final causando esse erro.

correção – trocar o código da linha 3 pelo código abaixo:
[html toolbar="false" firstline="2" highlight="3"]
<head>
<title>Página de Teste – Sr Web</title>
</head>
[/html]

4º Ajuste: Tirar o “/” do final da tag IMG. O HTML Transitional não aceita short tags por padrão.

correção – trocar o código da linha 8 pelo código abaixo:
[html toolbar="false" firstline="7" highlight="8"]
<br><br>
<img src="arroba.png" alt="logotipo">
<br><br>
[/html]

5º Ajuste: Indicar qual codificação, encoding, utilizaremos em nossa página. Usaremos aqui o utf-8.

correção – incluir dentro da tag head o seguinte:
[html toolbar="false" firstline="2" highlight="3"]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Página de Teste – Sr Web</title>
</head>
[/html]

O último warning que aparece é porque estamos entrando com o código diretamente na página do validador. Caso tivessemos uma página hospedada com esse conteúdo e validássemos pela url esse warning não apareceria.

Pronto! Seguindo todos esses passos, você tem agora um código HTML Transitional válido.

Válido

Código HTML 4.01 Transitional Válido:
[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>
<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>
<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>
</body>
</html>
[/html]

Parabéns você agora está se tornando uma pessoa muito conceituada em HTML.

No próximo post vamos partir desse código já validado com HTML 4.01 Transitional para convertê-lo para HTML 4.01 Strict e o tão sonhado XHTML 1.0 Strict.

Arquivos do tutorial de hoje:

Tutorial HTML 4.01 Transitional

Até mais.

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