Ferramentas gratuitas para validar html e marcação css

Video: Curso de CSS - Aula 12 (Validação e Web Standards)

Vários fantásticas on-line ferramentas de validação de código de website gratuitos estão à sua disposição. O W3C fornece várias ferramentas que estejam em conformidade com e validar contra mais recentes padrões recomendados pelo W3C para CSS, HTML, XHTML, HTML5, e 508 acessibilidade.

O que essas ferramentas de teste

A maioria dos validadores gratuitos permitem que você teste em até três maneiras diferentes, dependendo da localização dos arquivos que estão sendo testados e o validador particular que está sendo usado:

  • Validar por URL: Para testar pela URL, você deve carregar a página que você está testando a um servidor ao vivo, funcionando antes que você pode usar essa URL no validador. Isto significa que você pode fazer o upload dos arquivos para um servidor de teste ou um diretório oculto no servidor real que será a anfitriã do site, como http: //meu website.com / test, e validar por URL de lá.

  • Validar por Upload: Este método permite que você navegue para (em um computador local ou em algum destino remoto), selecionar e fazer upload de um único arquivo HTML para validação.

  • Validar por entrada direta: Para testar o código em uma única página da web antes que arquivo foi enviado para um servidor host, copiar todo o documento - de DTD para fechar tag - e colá-lo na Entrada Directa ou outra área de texto de teste apropriado na página de validação online desejado .

Embora a maioria dessas ferramentas são livres, realizando a validação em todas as páginas pode demorar um pouco, porque você pode validar apenas uma única página de cada vez.

Como usar o validador de marcação W3C

Todos os validadores online grátis são muito fáceis de usar. Para ilustrar, siga estes passos para validar uma página web usando o validador do W3C Markup:

  1. Aponte seu navegador para página validador.

    Esta é a página principal Markup Validação do W3C.

  2. No Validar por URL campo Endereço, digite o caminho completo da página de teste seguinte:



    https://luckychair.com/webaio/validation.html

    As etapas restantes usar esse arquivo de exemplo para ilustrar questões específicas de validação de código. Quando você tiver concluído este exercício, fique à vontade para repetir o processo usando uma das suas próprias páginas web.

  3. Clique no botão Verificar para validar a página.

    O servidor W3C processa a validação e retorna resultados na mesma janela do navegador.

    Os resultados exibir uma grande barra vermelha na parte superior que lê Erros encontrados durante a verificação este documento como XHTML 1.0 Transitório! Abaixo da barra de vermelho, você vê detalhes de dois erros encontrados nas linhas 44 e 46 em relação à omissão de alt atributos de texto em dois dos gráficos da página:

    Linha 44 Coluna 84: exigido atributo "alt" não especificado.... " largura ="100" altura ="30" id ="dell" / Gt; linha 46, coluna 84: necessária atributo "alt" não especificado.... " largura ="100" altura ="30" id ="sony" / Gt;

    O validador W3C retorna números de linha nas descrições de erro. Para ver quais números de linha reais o validador está testando contra em relação ao seu código, você precisa reenviar a página de teste. No topo da página de validação falhou, você deve ver uma área Opções rotulados. Dentro desta área, ative a opção Mostrar Fonte e clique no botão Revalidar.

    Quando os resultados são retornados, você vê uma nova área Listing Fonte abaixo os resultados que contém os números de linha no código.

  4. Em uma nova janela do browser, aponte seu navegador para luckychair.com e guardar uma cópia desta página para o seu computador local usando menu Arquivo do browser.

    A opção Salvar no seu browser é tipicamente algo como Arquivo → Salvar página como ou Arquivo → Salvar página.

    Você está indo agora para corrigir os erros e testar novamente a página.

  5. Abra o baixado validation.html página no seu editor HTML favorito e adicione o alt atributo de texto para cada uma das imagens conforme indicado no W3C falhou resultados de validação.

    Insira descritivo alt atributos de texto para o código da seguinte forma:

    alt ="dell" / Gt;Macalt =""sony" / Gt;
  6. Voltar para o principal página validador e clique no Validar por separador Entrada Directa no topo da página.

    Nesta área, você pode validar o código de entrada direta sem a necessidade de carregar um arquivo de teste para um servidor host de trabalho.

  7. Salve as alterações para o seu atualizados validation.html Arquivo. Em seguida, selecionar e copiar todo o código na página (a partir de DTD para fechamento tag), colá-lo no Validar por Campo de entrada direta, e clique no botão Verificar.

    Colando o código HTML a partir de uma cópia local de um arquivo pode às vezes ser mais rápido que o Validar por URL e Validar por métodos upload de arquivos.

    Quando os resultados aparecem, você verá uma barra verde na parte superior da página de resultados que lê Este documento foi verificada com sucesso como XHTML 1.0 Transitório!.

Esta ferramenta, como a maioria dos outros, pode verificar apenas uma página de cada vez. Felizmente, validadores de uma única página pode muitas vezes identificar problemas de codificação site inteiro, que podem ser rapidamente corrigidos em todas as páginas de um site.

Por exemplo, se o validador encontra um tag ausente, você poderia usar um processo automatizado como Find do Dreamweaver e substituir ferramenta para encontrar o código problemático e substituí-lo com o código corrigido em todas as páginas de um gerenciado instaladas.

O que um validador não vai pegar os exemplos de uso de código que, embora válido, não são compatíveis com padrões. Tomar o código nos passos anteriores, por exemplo, que tem capotamento gráficos incorporados dentro de células da tabela. Em toda a probabilidade, a tabela, gráficos e rollovers javascript poderia ser todos substituídos com tags e alguns estilos CSS.


Publicações relacionadas