O HTML (HyperText Markup Language ou Linguagem de Marcação de Hipertexto) é a linguagem de programação utilizada na diagramação de páginas web. Mesmo sites produzidos em linguagens mais complexas, como PHP e ASP, geram suas páginas em código HTML. É esse código que indica para o navegador onde ficarão os elementos que compõem a página. O navegador tem papel fundamental nesse processo, uma vez que se ele não compreender a linguagem do site, certas funcionalidades da página web podem deixar de funcionar.

A estrutura do HTML é muito simples. Ele é uma linguagem linear, comando a comando, que opera em camadas, no seguinte formato:

<comando> objeto do comando </comando>

As chaves (<>) demarcam o comando e a barra (/) apontam a conclusão do comando. Cada comando detém uma série de atributos que são definidos na apresentação do código, no seguinte formato:

<comando atributo1=valordoatributo atributo2=valordoatributo>objeto do comando</comando>

Note que não é necessário encerrar o atributo, só o comando.

Para que o navegador compreenda corretamente os comandos HTML é preciso que se respeite a ordem de apresentação destes. Toda página em HTML apresenta uma seqüência de comandos básicos, como no exemplo abaixo:

<HTML>
<HEAD> 
<TITLE> Meu documento HTML </TITLE> 
</HEAD> 
<BODY> Aqui você coloca os comandos em HTML. </BODY> 
</HTML> 

É importante manter o código organizado como forma de, além de garantir a correta leitura dele, também facilitar o trabalho de correção da página, quando necessário.

As tags HTML e BODY delimitam a extensão do documento. Todos os comandos do corpo da página deverão estar, obrigatoriamente, dentro dessas tags.

Couleur / Pixabay
A estrutura do HTML é como as camadas de uma cebola.

Há centenas de tags html para configurar cada elemento de uma página. Qualquer um pode consultar essas tags em sites de referência como o W3Schools. Mas é importante entender que a estrutura de qualquer documento HTML é sempre o das camadas de uma cebola. Uma tag dentro da outra.

<html>
<body>

<h1>Título</title>
<p>Esse é um texto de exemplo.</p>
<p><i>Esse é mais um texto de exemplo.</i></p>
<p><i>Este é o <b>último</b> texto de exemplo.</i></p>

</body>
</html>

Título

Esse é um texto de exemplo.

Esse é mais um texto de exemplo.

Este é o último texto de exemplo.

Note que as tags são abertas numa ordem e fechadas na ordem inversa. E que os efeitos da tag se limitam aos itens que estão entre a tag de abertura e a de fechamento. Por exemplo, o negrito (tag b) só é aplicado à palavra último e não às demais palavras da frase.

A relação entre os elementos HTML é sempre linear.

Com isso em mente você já consegue alterar ou mesmo criar suas primeiras páginas. Quer dar os próximos passos nesse caminho? Instale um bom editor de código como o Sublime Text. E confira nossos próximos posts.

Categories: educação web

Deixe uma resposta