MD.UnidadDidácticaGrupo(01)Pt.

dot

MÓDULO

PROGRAMAÇÃO WEB ‐ HTML / CSS

UNIDADE

TESTE E VALIDAÇÃO DE CÓDIGO HTML

UD009167_V(01)
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

ÍNDICE

OBJETIVOS ................................................................................................ 3  
INTRODUÇÃO............................................................................................. 4  
1. IMPORTÂNCIA DO TESTE E VALIDAÇÃO DE CÓDIGO HTML E CSS ...... 5 
2. VALIDAÇÃO COM W3C .......................................................................... 7  
3. PORQUÊ O TESTE E VALIDAÇÃO DE CÓDIGO ........................................ 9 
4. TESTE E VALIDAÇÃO DE CÓDIGO NAS PLATAFORMAS W3C ............. 11 
5. VALIDAÇÃO E CORREÇÃO DE CÓDIGO HTML ..................................... 19 
CONCLUSÃO ............................................................................................ 29 
AUTOAVALIAÇÃO .................................................................................... 31 
SOLUÇÕES ............................................................................................... 35 
PROPOSTAS DE DESENVOLVIMENTO DO ESTUDO................................. 36 
BIBLIOGRAFIA ......................................................................................... 37 

1
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

OBJETIVOS

Com esta unidade didática, pretende-se que desenvolva os seguintes objetivos

de aprendizagem:

 Compreender a importância do teste e validação do código HTML e

CSS.

 Familiarizar-se com as ferramentas de validação e teste disponibilizadas

pela W3C.

 Distinguir os diversos tipos de validação: validação por tipo URL, valida-

ção por tipo “File Upload” e validação por tipo “direct input”.

 Analisar e interpretar relatórios gerados pelas ferramentas de validação

e posterior correção dos erros e avisos.

3
TESTE E VALIDAÇÃO DE CÓDIGO HTML

INTRODUÇÃO

Apesar de, nos dias que correm, os navegadores já conseguirem interpretar

código HTML e CSS que contenha erros, os testes e validação são de extrema
importância, porque tornam os websites mais funcionais e com uma melhor
aparência, independentemente do navegador em que são carregados.

A W3C apresenta uma série de razões para a importância de ter um código lim-
po. Pode encontrar online uma variedade imensa de ferramentas para realizar
estas validações, sendo que o aconselhável será, sempre, recorrer às ferramen-
tas da W3C, uma vez que é ela que tem a responsabilidade de estabelecer os
padrões para a criação e interpretação de conteúdos para a web.

4
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

1. IMPORTÂNCIA DO TESTE E VALIDAÇÃO DE

CÓDIGO HTML E CSS

O teste e a validação de um website é uma tarefa extremamente importante

para assegurar a funcionalidade e aparência, independentemente do navegador
web ou plataforma que utiliza. Testar um website antes de o carregar na rede
web é uma das tarefas fundamentais no desenvolvimento e uma pequena falha
no seu código pode ser fatal para o bom funcionamento.

5
TESTE E VALIDAÇÃO DE CÓDIGO HTML

Como tal, devem ser realizados todos os testes necessários antes do seu upload,
para verificar eventuais erros nas linguagens padrão, nomeadamente, em HTML,
CSS, XML, acessibilidade, compatibilidade entre navegadores, entre outros.

Hoje em dia existem várias ferramentas online de teste e validação de websites.

Esta unidade irá incidir sobre o teste e validação de código HTML, recorrendo às
ferramentas disponibilizadas pela W3C. Para informação futura indicamos, tam-
bém, a ferramenta de validação de CSS.

 W3C Markup Validation Service: testa HTML e XHTML, entre outros, mas
não testa CSS.

https://validator.w3.org/

 W3C CSS Validation Service: testa CSS e documentos XHTML com folha
de estilo.

http://jigsaw.w3.org/css-validator/

6
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

2. VALIDAÇÃO COM W3C

Existem muitas formas de escrever código em HTML e CSS, e umas podem ser
mais corretas do que outras. Ao validar o código com o W3C, está a comparar o
código escrito com o código padrão estabelecido pela organização, garantindo
assim que o código do website será semelhante a este padrão. Consequente-
mente, fará com que a página web tenha uma aparência correta e que seja in-
terpretada da mesma forma por todos os navegadores, uma vez que a maioria
está a ser atualizada para compreender e estabelecer o padrão da W3C.

7
TESTE E VALIDAÇÃO DE CÓDIGO HTML

A linguagem de código utilizada depende do tipo de documento definido e, tal

como as regras de cada língua diferem, também as regras dos diferentes códi-
gos são distintas. O definir no documento o seu doctype, está a definir o tipo de
linguagem utilizada nele.

<!DOCTYPE html> 

8
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

3. PORQUÊ O TESTE E VALIDAÇÃO DE CÓDIGO

O teste e validação de código serve, em última análise, para ajudar o programa-

dor a escrever um código melhor e mais correto. Hoje em dia os navegadores
(browsers) já processam código inválido perfeitamente bem.

No entanto, a W3C especifica algumas razões pelas quais o código deve ser
testado e validado:

9
TESTE E VALIDAÇÃO DE CÓDIGO HTML

1. O teste e validação pode ser usada como uma ferramenta de depura-

ção, ou seja, ver se e onde existem erros. Se, por exemplo, a página
web não está a ser exibida como seria expetável, esta validação irá in-
formar onde está o erro.

2. O teste e validação previne que páginas web tenham um bom desem-

penho no futuro. Os browsers são construídos com padrões em mente
e páginas codificadas segundo estes padrões irão funcionar tanto no
presente como no futuro.

3. O teste e validação é uma ferramenta de aprendizagem, porque corrige

erros e ensina muito sobre o código de uma página web.

4. O teste e validação facilitam a manutenção de um website. As normas

são amplamente aceites pela comunidade de desenvolvimento. Se um
website usar código, qualquer developer não deverá ter problemas
com a manutenção do mesmo.

5. O teste e validação mostra profissionalismo.

A W3C, World Wide Web Consortium, é a principal

organização de padronização da World Wide Web.
Tem a finalidade de estabelecer padrões para a cria-
ção e interpretação de conteúdos para a web.

O teste e validação de um website não garante um melhor posicionamento nos

navegadores, mas é o primeiro passo para que o programador se posicione.

É altamente recomendável que, ao construir um website, se faça verificações

nos diferentes navegadores, porque browsers diferentes fazem interpretações
diferentes. Também deve ter em consideração os diferentes sistemas operati-
vos. Para isso, existem ferramentas online que permitem fazer este trabalho de
forma automática.

Uma boa ferramenta para isso é o Browser Shots (http://browsershots.org/).

10
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

4. TESTE E VALIDAÇÃO DE CÓDIGO NAS

PLATAFORMAS W3C

A W3C disponibiliza uma ferramenta gratuita para testar e validar código HTML
e CSS que após a validação irá gerar um relatório de erros e avisos sobre o có-
digo fonte.

Nos parágrafos seguintes iremos explicar o procedimento para validar um

documento HTML.

11
TESTE E VALIDAÇÃO DE CÓDIGO HTML

Entre em https://validator.w3.org/. O navegador irá mostrar um ecrã idêntico

ao da figura abaixo.

Ecrã do navegador com URL https://validator.w3.org/.

Como se pode observar, a ferramenta exibe três separadores com três hipóteses
de validação:

Validação “by URL”: neste separador pode inserir endereços URL, mas só
irá funcionar para endereços que estejam hospedados na Internet. Se fizer a
tentativa de colocar um URL para uma rota local, localhost (computador local), a
ferramenta irá exibir um erro que dirá que o documento não poderá ser verifi-
cado, pois não se encontra online.

12
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

Deve inserir o URL correto e suportado pela ferramenta no campo denominado

Address (endereço) e de seguida clicar no botão check (verificar). Será, assim,
gerado um relatório com erros e avisos.

Exemplo

Teste do site da Netflix Portugal. O relatório exibiu 167 mensagens de erros

e avisos.

Fragmento do relatório do teste e validação ao website da Netflix Portugal.

13
TESTE E VALIDAÇÃO DE CÓDIGO HTML

Validação “by File Upload”: o separador “Validate by File Upload” permite que
se faça o upload de um ficheiro.

O ficheiro deverá ser carregado no campo “File” e deverá escolher a pasta local
onde o ficheiro está localizado no botão “Choose File”. Por fim clique em “check”
e a ferramenta mostra o relatório de erros e avisos.

Exemplo

Teste de ficheiro local. O relatório exibiu uma lista de 6 erros.

14
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

Validação “Direct Input”: o separador “Validate by Direct Input” permite que

se escreva o código diretamente na ferramenta. Basta, para isso, escrever o
código na caixa “Enter the Markup to validate” e clicar em “check”. A ferramenta
irá gerar um relatório com todos os erros e avisos.

Exemplo

Teste de código escrito diretamente na ferramenta. O resultado do relatório foi

uma lista de seis erros.

15
TESTE E VALIDAÇÃO DE CÓDIGO HTML

Fragmento do relatório do exemplo de teste e validação “by Direct Input”.

Até ao momento falamos apenas de validação de código HTML, porque esta fer-
ramenta não permite a validação de CSS. De notar que a ferramenta dá essa in-
formação numa nota no final da página onde refere, entre outra informação, que
só irá verificar, entre outros, documentos HTML e caso o utilizador deseje validar
conteúdo especifico de, entre outros, CSS, deverá utilizar outras ferramentas.

16
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

Uma alternativa para testar e validar URL locais, ou seja, aqueles que não estão
hospedados na Internet, é a de usar um navegador que nos permita instalar um
plugin que fará uso da API W3C, que permitirá validar o código fonte de, por
exemplo, uma página em construção.

 Firefox: existe um plugin que poderá ser descarregado e instalado. De-

ve abrir a página especificada abaixo e de seguida adiciona-se o “add-
on” e a instalação começará.

https://addons.mozilla.org/pt-PT/firefox/addon/html-validator/

 Google Chrome: existem variadíssimas hipóteses de escolha de plu-

gins que, sem serem oficiais, utilizam a API W3C oficial. Teremos que
abrir a loja e procurar por W3C. Pode escolher qualquer um deles, ten-
do em conta a sua avaliação.

17
TESTE E VALIDAÇÃO DE CÓDIGO HTML

18
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

5. VALIDAÇÃO E CORREÇÃO DE CÓDIGO HTML

Neste ponto da unidade iremos analisar um código HTML, testá-lo, validá-lo e
corrigi-lo através da ferramenta disponibilizada pela W3C.

Exemplo

Código a inserir no separador “Validate by Direct Input”.

<!DOCTYPE html> <!‐‐ declaraçao do tipo de documento ‐‐> 
<html lang="pt"> <!‐‐ definição e idioma ‐‐> 
<head> 
<head> 
  <!‐‐ titulo da pagina ‐‐> 
  <title>Página pessoal do John Doe</title> 
<!‐‐ metatags ‐‐> 
  <meta charset="UTF‐8"> 
  <meta name="description" content="Página pessoal do John Doe"> 
  <meta name="author" content="John Doe"> 
  </head> 
</head> 
<body style="text‐align:center"> 
<h1 style="color:#5882FA;"> Página pessoal do John Doe </h1> 

19
TESTE E VALIDAÇÃO DE CÓDIGO HTML

<img src="JohnDoe_pic.jpg" width="200px" height="auto"> <br> 
<hr width="50%"> 
<p> <strong>"John Doe"</strong> é pseudónimo coletivo que é usado 
quando o nome verdadeiro de uma pessoa é desconhecido ou está 
sendo intencionalmente oculto. </p> 
<p> Em segundo lugar, esses nomes também são frequentemente usados 
para se referir a um hipotético everyman (homem comum) em outros 
contextos. </p> 
<a href="https://pt.wikipedia.org/wiki/John_e_Jane_Doe" 
target="_blank"> Mais sobre John Doe </a> 
<br> 
<a href="mailto:[email protected]"> Envie um e‐mail a John Doe </a> 
</body> 
</html> 

20
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

Relatório de erros e avisos:

21
TESTE E VALIDAÇÃO DE CÓDIGO HTML

Localização dos erros e avisos:

Análise e correção:

 Da linha 5 a 6:

Erro: A tag <head> foi escrita duas vezes.

Correção: retirar a linha 5 do código fonte.

22
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

 Da linha 17:

Erro: A tag </head> foi escrita duas vezes.

Correção: retirar a linha 17 do código fonte.

 Da linha 21:

Erro: O atributo “width” do elemento “img” não está bem definido. Deve
conter apenas números.

Correção: alterar o atributo “width” do elemento “img” da linha 21 para

“width=200”.

23
TESTE E VALIDAÇÃO DE CÓDIGO HTML

 Da linha 21:

Erro: O atributo “height” do elemento “img” não está bem definido. O

browser espera um número em vez de uma letra.

Correção: retirar o atributo “height” do elemento “img” da linha 21.

 Da linha 21:

Erro: É expetável que um elemento “img” tenha atribuído um valor para

o atributo “alt”’.

Correção: atribuir o valor “alt=”JohnDoe_portrait” ao elemento “img” da

linha 21.

24
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

 Da linha 22:

Erro: o atributo “widht” do elemento “hr” é obsoleto, ou seja, já não é

usado em linguagem HTML. Deverá ser usado CSS.

Correção: substituir a linha 22 por <hr style="width:50%">.

25
TESTE E VALIDAÇÃO DE CÓDIGO HTML

Código corrigido e resultado do novo teste e validação:

<!DOCTYPE html> <!‐‐ declaraçao do tipo de documento ‐‐> 

<html lang="pt"> <!‐‐ definiçap e idioma ‐‐> 

<head> 

  <!‐‐ titulo da pagina ‐‐> 

  <title>Página pessoal do John Doe</title> 

<!‐‐ metatags ‐‐> 

  <meta charset="UTF‐8"> 

  <meta name="description" content="Página pessoal do John Doe"> 

  <meta name="author" content="John Doe"> 

</head> 

<body style="text‐align:center"> 

<h1 style="color:#5882FA;"> Página pessoal do John Doe </h1> 

<img src="JohnDoe_pic.jpg" alt="JohnDoe_Portrait" width="200"> <br> 

<hr style="width:50%"> 

<p> <strong>"John Doe"</strong> é pseudónimo coletivo que é usado 
quando o nome verdadeiro de uma pessoa é desconhecido ou está sendo 
intencionalmente oculto. </p> 

<p> Em segundo lugar, esses nomes também são frequentemente usados 
para se referir a um hipotético everyman (homem comum) em outros 
contextos. </p> 

<a href="https://pt.wikipedia.org/wiki/John_e_Jane_Doe" 
target="_blank"> Mais sobre John Doe </a> 

<br> 

<a href="mailto:[email protected]"> Envie um e‐mail a John Doe </a> 

</body> 

</html> 

26
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

Como se pode observar, todos os erros e avisos foram corrigidos.

27
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

CONCLUSÃO

Esta unidade didática dedicou-se à explicação do motivo por que os testes e

validação do código HTML são tão importantes.

Explanou-se as razões apontadas pela organização W3C e como e onde realizar

estes testes.

Tendo em conta os tópicos lecionados, deverá ser capaz de analisar e corrigir

um código HTML, para que o mesmo seja mais limpo e permita que uma página
web esteja correta em termos de linguagem e aparência.

29
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

AUTOAVALIAÇÃO

1. A validação de código em ferramentas da W3C permite:

a) Comparar o código escrito com o código padrão da organização e assim

garantir que o código fonte está similar aos padrões.

b) Obter uma licença obrigatória para o seu posterior upload na Internet.

c) Não tem vantagem nenhuma porque os navegadores não reconhecem

código padrão.

d) Obter um certificado de qualidade.

2. Qual terá de ser a definição do documento, para que as ferramentas

de validação o testem tendo em conta a linguagem HTML:

a) O seu doctype terá de ser definido como .txt.

b) Não é necessário definir o doctype.

c) O seu doctype terá de ser definido como HTML.

d) Pode colocar qualquer definição pois a ferramenta fará a conversão para

HTML.

31
TESTE E VALIDAÇÃO DE CÓDIGO HTML

3. Uma das razões apontadas pela W3C, para justificar o porquê de a va-
lidação de código ser aconselhada é:

a) O teste e validação de código não tem importância alguma e não tem

qualquer vantagem.

b) O teste e validação ajuda o programador a escrever um código mais lim-

po, sem erros, e por isso é uma ferramenta de aprendizagem, além de
que mostra mais profissionalismo.

c) Os websites não funcionarão se este código não for corrigido na íntegra.

d) Sem um código correto a W3C não aprovará o código fonte.

4. A seguinte afirmação é verdadeira? “O teste e validação do código fon-

te de website é obrigatório porque garante um melhor posicionamen-
to nos navegadores.”

a) A afirmação é verdadeira.

b) A afirmação é falsa porque apesar de o teste e validação do código fonte

de website ser obrigatório, não garante um melhor posicionamento nos
navegadores.

c) A afirmação é falsa porque o teste e validação do código fonte de um

website são obrigatórios, mas não garantem um melhor posicionamento
nos navegadores.

d) A afirmação é falsa porque nem o teste e validação do código fonte de

um website são obrigatórios, nem garantem um melhor posicionamento
nos navegadores.

5. O que é necessário fazer para testar e validar código?

a) Tem de se verificar o código linha por linha.

b) Poderá utilizar-se um plugin ou site de validação W3C.

c) É impossível testá-lo e validá-lo totalmente.

d) O teste e validação de código são desaconselhados.

32
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

6. A ferramenta Validator disponibilizada pela W3C testa e valida código

HTML e CSS?

a) Não. Esta ferramenta testa e valida código HTML, entre outros, sendo
que o CSS está excluído, pelo que o utilizador deverá utilizar outras fer-
ramentas.

b) Sim. Esta ferramenta testa e valida código HTML e CSS, entre outros.

c) Sim, desde que o código CSS seja definido no doctype.

d) Não. Esta ferramenta testa e valida código CSS, mas não valida código
HTML.

7. Se pretender verificar um ficheiro .html, em qual dos separadores de-

vemos testar:

a) No separador “validate by URL”.

b) No separador “validate by File Upload”.

c) No separador “validate by direct input”.

d) Qualquer um dos separadores fará o teste e validação do ficheiro.

8. Se se utilizar, no Validator disponibilizado pela W3C, a tab “validate by

direct input”, o que é suposto ser feito?

a) Deve ser introduzido o URL da página web que se pretende testar e validar.

b) Deve ser carregado o ficheiro .html que se pretende testar e validar.

c) Devem ser carregados os ficheiros .html e .css que se pretendem testar

e validar.

d) Deve ser escrito diretamente o código html a testar e validar.

9. Na tab “validate by URL”, do Validator disponibilizado pela W3C, o que

deve ser introduzido para uma correta validação e teste?

a) Podem ser inseridos quaisquer endereços, desde que os mesmos este-

jam alojados em máquinas locais (localhost) ou na rede web.

b) Apenas valida e testa endereços de máquinas locais.

c) Apenas valida e testa endereços alojados na rede web.

d) Apenas valida e testa ficheiros .html carregados.

33
TESTE E VALIDAÇÃO DE CÓDIGO HTML

10. Considere o erro gerado pelo Validator e mostrado na figura abaixo.

De entre as hipóteses abaixo, qual seria a forma de corrigir este erro?

a) Teria de se atribuir um texto alternativo à imagem, através do atributo alt

atributo “alt”.

b) Teria de se alterar a largura da imagem para um valor diferente.

c) Teria de se alterar a altura da imagem para um valor diferente.

d) Teria de se mudar a “src” da imagem.

34
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

SOLUÇÕES

1. a 2. c 3. b 4. d 5. b

6. a 7. b 8. d 9. c 10. a

35
TESTE E VALIDAÇÃO DE CÓDIGO HTML

PROPOSTAS DE DESENVOLVIMENTO DO ESTUDO

Para que possa aprofundar os seus conhecimentos no tema abordado nesta

unidade didática, recomenda-se que pratique com vários exemplos, de entre as
três técnicas estudadas, utilizando para isso exemplos de URL, escrevendo có-
digo e utilizando ficheiros .html realizados por si.

Deverá para isso utilizar a ferramenta Validator da W3C.

Deverá ainda assistir ao vídeo disponibilizado e referente a esta unidade didáti-

ca, bem como realizar a sessão prática correspondente.

36
 TESTE E VALIDAÇÃO DE CÓDIGO HTML

BIBLIOGRAFIA

 Willard, Wendy (2009), HTML: A Beginner's Guide. California: McGraw Hill.

 W3C (2020), About W3C. Disponível em: https://www.w3.org/about. Con-

sultado a 10 de novembro de 2020.

 W3C (2020), Markup Validation Service. Disponível em:

https://validator.w3.org/. Consultado a 10 de novembro de 2020.

 Imagens provenientes de Shutterstock.

37