HTML e CSS na Prática

Compre o curso completo por apenas R$ 29,90!
Clique aqui para ter acesso.
Unidade 1 – Introdução – Lição 3

Uma Página HTML Básica

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;
  • html com o atributo lang, 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;
  • meta especificando a codificação da página (charset);
  • title com o título da página;
  • body, que conterá o conteúdo da página.

Vamos começar com o doctype:

<!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:

<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:

<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):

<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:

<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:

</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:

<!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>

Visualizar Exemplo

Compre o curso completo por apenas R$ 29,90!
Clique aqui para ter acesso.