Um website é feito, essencialmente, de documentos HTML. Para pôr em prática os conhecimentos que vimos na lição anterior, iremos criar uma página básica HTML com os elementos essenciais.
Criando o documento
Para começar, abra o seu editor de texto de sua preferência e crie um novo arquivo. Documentos HTML nada mais são que arquivos de texto simples com a extensão ".html" ao invés da extensão ".txt". Salve esse novo arquivo de texto como "index.html".
Um ponto positivo das linguagens HTML e CSS é que podemos ver imediatamente o resultado do nosso código. Basta abrir o novo arquivo "index.html" no seu navegador para acompanhar o progresso. Após cada atualização de código no editor de texto, recarregue a página (com a tecla F5 ou Ctrl+R ou equivalente do seu sistema operacional) para ver as modificações.
Estruturando o documento
Com o HTML5, muito ficou simplificado na hora de iniciar uma nova página. Iremos ver aqui as tags essenciais recomendadas para um novo documento HTML.
Eis as tags que iremos incluir no documento:
doctype, especificando o tipo do documento;htmlcom o atributolang, para identificar a língua na qual o conteúdo do documento será escrito;head, com as informações de cabeçalho não visíveis da página;metaespecificando a codificação da página (charset);titlecom o título da página;body, que conterá o conteúdo da página.
Vamos começar com o doctype:
|
1
|
<!doctype html> |
Essa tag especial, muito simplificada no HTML5, especifica que o documento é HTML e que ele deve ser renderizado conforme o modo padrões web do navegador. A presença dessa tag "liga" o modo de padrões (standards mode) dos navegadores, dando-nos mais consistência no funcionamento em diferentes programas e dispositivos. A ausência dessa tag pode causar o chamado modo de "bizarrices" (quirks mode) de um navegador e só complica as coisas. Portanto, não esqueça do doctype nos seus documentos HTML.
Em seguida, abrimos a tag html:
|
1
|
<html lang="pt-BR"> |
Perceba o atributo lang, identificando a língua na qual o conteúdo da página será escrito. Dentro da tag html colocaremos todas as outras tags do site. Enquanto isso, a tag doctype fica fora, antes da tag html.
Em seguida, a tag head:
|
1
|
<head> |
A tag head contém, em geral, informações sobre a página (como título e metadados), além de chamadas para outros arquivos, como documentos CSS e JavaScript.
Dentro da tag head, colocaremos primeiro a tag meta especificando a codificação (também consideravelmente mais simples com HTML5):
|
1
|
<meta charset="UTF-8"> |
A tag meta é uma tag vazia e que na qual trabalhamos apenas com seus atributos. Essa tag serve para definirmos diversos metadados (informações referentes à página) como, neste caso, a sua codificação. Recomendo utilizar a codificação UTF-8, que é uma das mais abrangentes. Dessa forma, evitamos problemas com caracteres especiais (como acentos e outros).
Na sequência, inserimos a tag title:
|
1
|
<title>Uma Página HTML5 Básica</title> |
A tag title é uma tag simples, com abertura, fechamento e conteúdo no seu interior. Este texto é o que irá aparecer no título da janela ou da aba do seu navegador. O que será escrito também é de importância para buscadores como o Google. Portanto, costuma-se escrever um título de página que seja conciso, descreva bem o seu conteúdo e que contenha as palavras-chave desejadas para indexação.
Com isso, fechamos a tag head e abrimos a tag body, que conterá o conteúdo da página:
|
1
2
3
4
|
</head><body><!-- conteúdo da página --></body> |
A tag body é justamente o "corpo" da página, onde iremos colocar toda a estrutura e o conteúdo de texto e imagens da página.
A outra tag que você vê, começando com <!-- e terminando com --> é um comentário HTML. Comentários são elementos neutros dentro de uma página e que não influem em nada. São apenas anotações que são úteis para nós, desenvolvedores.
Abaixo, temos o código completo da nossa página básica HTML:
|
1
2
3
4
5
6
7
8
9
10
|
<!doctype html><html lang="pt-BR"><head> <meta charset="UTF-8"> <title>Uma Página HTML5 Básica</title></head><body><!-- conteúdo da página --></body></html> |
