Etiqueta: HTML

Validar o HTML eficientemente

O HTML adere à norma WHATWG. Como é uma linguagem de marcação, um erro em HTML não faz com que a página web deixe de funcionar, mas o navegador apresenta-a o melhor que pode.

Ter erros em HTML é problemático, pois pode produzir falhas inesperadas e difíceis de reproduzir, especialmente quando estas ocorrem apenas num navegador. É portanto vital escrever HTML válido.

No entanto, é muito fácil cometer erros e ignorá-los. É por isso que é aconselhável validar o código HTML, ou seja, encontrar os erros e corrigi-los. Para este fim, existem validadores, que normalmente simplesmente exibem os erros. O mais actualizado e recomendado é The Nu Html Checker. O W3C mantém uma instância deste validador que nos permite validar documentos HTML a partir do navegador, quer introduzindo um URL, carregando um ficheiro ou introduzindo o código HTML num formulário. Como este validador é livre, podes instalá-lo facilmente no teu computador.

Validação em linha do sítio web do GNU https://gnu.org/.

O validador em linha funciona bem se precisar de validar apenas algumas páginas web de vez em quando, mas não é adequado para validar um sítio web inteiro. Para isso recomendo a utilização da versão terminal do Nu Html Checker. Isto pode ser encontrado no ficheiro vnu.jar (Java deve ser instalado).

No meu caso, utilizo o pacote html5validator, uma vez que trabalho principalmente com Python e não requer qualquer dependência adicional. Para instalar este pacote numa distribuição GNU/Linux baseada em Debian, só precisas de correr...

sudo apt install default-jre
sudo pip3 install html5validator

Quando a instalação estiver concluída, temos um programa chamado html5validator que podemos executar a partir do terminal:

html5validator index.html

Um argumento super útil é --root, que nos permite validar todos os ficheiros de um directório, e o directório dentro do directório..., até ter validado tudo. Utilizo-o especificando o directório raiz do meu sítio web, validando todo o sítio web em poucos segundos.

html5validator --root sítio-web/

Idealmente, deverás utilizar algum tipo de integração contínua para que não tenhas de executar manualmente o comando acima sempre que mudar alguma coisa na página web. Eu utilizo o GitLab CI para isto. Desta forma, mantenho este sítio web e muitos outros livres de erros HTML, e quando quebro algo, o descubro cedo.

Este teste GitLab CI mostra que o website foi gerado com sucesso e sem erros HTML.

Estrutura de árvore com CSS e HTML

Às vezes é conveniente representar dados em uma estrutura de árbore como a produzida pelo programa tree. O programa tree cria uma saída de árvore de diretórios como esta:


✔ /var/www/html/Repos/Freak-Spot/freak-theme [master|✔] $ tree
.
├── static
│   ├── css
│   │   └── style.css
│   ├── genericons
│   │   ├── COPYING.txt
│   │   ├── genericons.css
│   │   ├── Genericons.eot
│   │   ├── Genericons.svg
│   │   ├── Genericons.ttf
│   │   ├── Genericons.woff
│   │   ├── LICENSE.txt
│   │   └── README.md
│   ├── images
│   │   ├── creativecommons_public-domain_80x15.png
│   │   ├── gnu-head-mini.png
│   │   └── questioncopyright-favicon.png
│   └── js
│       ├── functions.js
│       └── jquery-3.1.1.js
└── templates
    ├── archives.html
    ├── article.html
    ├── article_info.html
    ├── author.html
    ├── authors.html
    ├── base.html
    ├── category.html
    ├── index.html
    ├── page.html
    ├── pagination.html
    ├── period_archives.html
    ├── tag.html
    ├── taglist.html
    └── tags.html

6 directories, 28 files

Para representar a instrução tal como aparece num terminal utilizei as etiquetas HTML <samp> e <pre> (<pre><samp>saído do tree</samp></pre>). Mas e se eu quiser incluir uma ligação ou utilizar outros elementos HTML, ou CSS? Então teremos de usar CSS para mostrar o aspecto de ramos.

Continúa leyendo Estrutura de árvore com CSS e HTML