032.1 Lição 1
Certificação: |
Web Development Essentials |
---|---|
Versão: |
1.0 |
Tópico: |
032 Marcação de documentos HTML |
Objetivo: |
032.1 A anatomia do documento HTML |
Lição: |
1 de 1 |
Introdução
O HTML (HyperText Markup Language) é uma linguagem de marcação que informa aos navegadores como estruturar e exibir as páginas web. A versão atual é a 5.0, lançada em 2012. A sintaxe HTML é definida pelo World Wide Web Consortium (W3C).
O HTML é uma habilidade fundamental para o desenvolvimento web, pois é a linguagem que define a estrutura e boa parte da aparência de um website. Se você deseja seguir uma carreira em desenvolvimento web, o HTML é um excelente ponto de partida.
Anatomia de um documento HTML
Uma página HTML básica tem a seguinte estrutura:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Page</title>
<!-- This is the Document Header -->
</head>
<body>
<!-- This is the Document Body -->
</body>
</html>
Vamos analisá-la em detalhes.
Tags HTML
O HTML usa elementos e tags para descrever e formatar o conteúdo. As tags consistem em parênteses angulares ao redor do nome da tag, por exemplo <title>
. O nome da tag não faz distinção entre maiúsculas e minúsculas, embora o World Wide Web Consortium (W3C) recomende o uso de minúsculas nas versões atuais do HTML. Essas tags HTML são usadas para construir elementos HTML. A tag <title>
é um exemplo de tag de abertura de um elemento HTML que define o título de um documento HTML. No entanto, um elemento possui dois outros componentes. Um elemento <title>
completo seria parecido com este:
<title>My HTML Page</title>
Aqui, My HTML Page
representa o conteúdo do elemento, ao passo que </title>
é a tag de fechamento que declara que este elemento está completo.
Note
|
Nem todos os elementos HTML precisam ser fechados; nesses casos, falamos de elementos vazios, elementos de auto-fechamento ou elementos nulos. |
Aqui estão os outros elementos HTML do exemplo anterior:
<html>
-
Abrange todo o documento HTML. Contém todas as tags que compõem a página. Também indica que o conteúdo deste arquivo está em linguagem HTML. A tag de fechamento correspondente é
</html>
. <head>
-
Um receptáculo para todas as metainformações relacionadas à página. A tag de fechamento correspondente a este elemento é
</head>
. <body>
-
Um receptáculo para o conteúdo da página e sua representação estrutural. A tag de fechamento correspondente é
</body>
.
As tags <html>
, <head>
, <body>
e <title>
são as chamadas tags estruturais, que fornecem o esqueleto básico de um documento HTML. Em particular, elas informam o navegador web de que ele está lendo uma página HTML.
Note
|
Dentre esses elementos HTML, o único que é necessário para um documento HTML ser validado é a tag |
Como se vê, cada página HTML é um documento bem estruturado que poderia ser comparado a uma árvore, na qual o elemento <html>
representa a raiz e os elementos <head>
e <body>
são os primeiros galhos. O exemplo mostra que é possível aninhar elementos. Assim, o elemento <title>
é aninhado dentro de <head>
, que por sua vez é aninhado dentro de <html>
.
Para garantir que seu código HTML possa ser lido e mantido, todos os elementos HTML devem estar fechados corretamente e em ordem. Os navegadores web ainda serão capazes de exibir seu site conforme o esperado, mas o aninhamento incorreto de elementos e suas tags é uma prática que pode causar erros.
Finalmente, uma menção especial à declaração doctype que aparece no alto da estrutura do documento de nosso exemplo. <!DOCTYPE>
não é uma tag HTML, mas uma instrução para o navegador web que especifica a versão do HTML usada no documento. Na estrutura básica do documento HTML vista anteriormente, usamos <!DOCTYPE html>
, especificando que o HTML5 foi usado no documento.
Comentários em HTML
Ao criar uma página HTML, é recomendável inserir comentários no código para melhorar sua legibilidade e descrever a finalidade dos blocos de código maiores. As tags <!--
e -->
indicam os comentários, como mostrado no exemplo a seguir:
<!-- This is a comment. -->
<!--
This is a
multiline
comment.
-->
O exemplo demonstra que os comentários, no HTML, podem ser postos em uma única linha, mas também podem se estender por várias linhas. De qualquer maneira, o resultado é que o texto entre <!--
e -->
é ignorado pelo navegador web e, portanto, não é exibido na página HTML. Com base nessas considerações, podemos deduzir que a página HTML básica mostrada no parágrafo “Anatomia de um documento HTML” não exibe nenhum texto, porque as linhas <!-- This is the Document Header -->
e <!-- This is the Document Body -->
são apenas dois comentários.
Warning
|
Os comentários não podem ser aninhados. |
Atributos HTML
As tags HTML podem incluir um ou mais atributos para especificar detalhes do elemento HTML. Uma tag simples com dois atributos tem o seguinte formato:
<tag attribute-a="value-a" attribute-b="value-b">
Os atributos devem sempre ser definidos na tag de abertura.
Um atributo consiste em um nome, que indica a propriedade a ser definida, um sinal de igual, mais o valor desejado entre aspas. As aspas podem ser simples ou duplas, mas recomenda-se manter o uso de aspas simples ou duplas de forma consistente em todo o projeto. É importante não misturar aspas simples e duplas em um mesmo valor de atributo, pois o navegador web não reconhecerá aspas mistas como uma unidade.
Note
|
É possível incluir um tipo de aspas dentro do outro tipo sem problemas. Por exemplo, se for preciso usar |
Os atributos podem ser categorizados em atributos genéricos e atributos específicos, conforme explicado nas seções a seguir.
Atributos genéricos
Os atributos genéricos podem ser usados em qualquer elemento HTML. Dentre eles podemos citar:
title
-
Descreve o conteúdo do elemento. Seu valor é geralmente exibido como como uma dica de contexto quando o usuário passa o cursor sobre o elemento.
id
-
Associa um identificador único a um elemento. Esse identificador deve ser único dentro do documento; este não será validado se vários elementos compartilharem o mesmo
id
. style
-
Atribui propriedades gráficas (estilos CSS) ao elemento.
class
-
Especifica uma ou várias classes para o elemento em uma lista de nomes de classes separados por espaços. Essas classes podem ser referenciadas em folhas de estilo CSS.
lang
-
Especifica o idioma do conteúdo do elemento usando códigos de idioma de dois caracteres no padrão ISO-639.
Note
|
O desenvolvedor pode armazenar informações personalizadas sobre um elemento definindo um atributo |
Atributos específicos
Outros atributos são específicos a cada elemento HTML. Por exemplo, o atributo src
de um elemento HTML <img>
especifica a URL de uma imagem. Existem muitos outros atributos específicos, que serão abordados nas próximas lições.
Cabeçalho do documento
O cabeçalho do documento define as metainformações sobre a página e é descrito pelo elemento <head>
. Por padrão, as informações no cabeçalho do documento não são processadas pelo navegador web. Embora seja possível incluir, dentro do elemento <head>
, elementos HTML que podem ser exibidos na página, a prática não é recomendada.
Título
O título do documento é especificado com o elemento <title>
. O título definido entre as tags aparece na barra de título do navegador e é o nome sugerido quando a página é salva nos Favoritos. Ele também é exibido como título da página nos resultados do mecanismo de busca.
Eis um exemplo do uso desse elemento:
<title>My test page</title>
A tag <title>
é obrigatória em todos os documentos HTML e deve aparecer somente uma vez por documento.
Note
|
Não confunda o título do documento com o cabeçalho da página, que é definido no corpo. |
Metadados
O elemento <meta>
é usado para especificar metainformações, de maneira a descrever melhor o conteúdo de um documento HTML. Trata-se de um elemento de auto-fechamento, ou seja, ele não tem uma tag de fechamento. Além dos atributos genéricos, que são válidos para todos os elementos HTML, o elemento <meta>
também usa os seguintes atributos:
name
-
Define quais metadados serão descritos neste elemento. Pode ser definido para qualquer valor personalizado, mas os valores comumente usados são
author
,description
ekeywords
. http-equiv
-
Fornece um cabeçalho HTTP para o valor do atributo
content
. Um valor comum érefresh
, que será explicado mais tarde. Se este atributo for definido, o atributoname
não deve ser definido. content
-
Fornece o valor associado ao atributo
name
ouhttp-equiv
. charset
-
Especifica a codificação de caracteres para o documento HTML, por exemplo
utf-8
para configurá-lo para o Unicode Transformation Format — 8-bit.
Adicionar um autor, descrição e palavras-chave
Usando a tag <meta>
, podemos incluir informações adicionais sobre o autor da página HTML e descrever o conteúdo da página, desta forma:
<meta name="author" content="Name Surname">
<meta name="description" content="A short summary of the page content.">
Procure incluir uma série de palavras-chave relacionadas ao conteúdo da página na descrição. Essa descrição costuma ser a primeira coisa que um usuário vê ao navegar com um mecanismo de busca.
Se quiser incluir palavras-chave adicionais relacionadas à página para os mecanismos de busca, adicione o seguinte elemento:
<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">
Note
|
No passado, os spammers inseriam centenas de palavras-chave e descrições que não tinham nada a ver com o conteúdo real da página, de forma que elas também apareciam em pesquisas não relacionadas aos termos que as pessoas procuravam. Hoje em dia, as tags |
Redirecionar uma página HTML e definir um intervalo de tempo para que o documento se atualize
Usando a tag <meta>
, é possível atualizar automaticamente uma página HTML depois de um período determinado (por exemplo, após 30 segundos), desta forma:
<meta http-equiv="refresh" content="30">
Outra alternativa é redirecionar uma página web para outra página web após o mesmo período de tempo com o seguinte código:
<meta http-equiv="refresh" content="30; url=http://www.lpi.org">
Neste exemplo, o usuário é redirecionado da página atual para http://www.lpi.org
após 30 segundos. Os valores podem ser os que você preferir. Se especificarmos, por exemplo, content="0; url=http://www.lpi.org"
, a página será redirecionada imediatamente.
Especificar a codificação de caracteres
O atributo charset
especifica a codificação de caracteres para o documento HTML. Um exemplo comum é:
<meta charset="utf-8">
Este elemento especifica que a codificação de caracteres do documento é utf-8
, um conjunto de caracteres universal que inclui praticamente qualquer caractere de qualquer idioma humano. Portanto, ao usá-lo, você evita problemas de exibição que poderiam surgir se escolhesse outros conjuntos de caracteres, como o ISO-8859-1 (o alfabeto latino).
Outros exemplos úteis
Eis duas outras aplicações úteis da tag <meta>
:
-
Configurar cookies para rastrear um visitante do site.
-
Assumir o controle da janela de visualização (a área visível de uma página web dentro de uma janela do navegador), que depende do tamanho da tela do dispositivo do usuário (por exemplo, um telefone celular ou um computador).
No entanto, esses dois exemplos estão além do escopo do exame e são citados aqui como mera curiosidade.
Exercícios Guiados
-
Para cada uma das seguintes tags, indique a tag de fechamento correspondente:
<body>
<head>
<html>
<meta>
<title>
-
Qual é a diferença entre uma tag e um elemento? Use esta entrada como referência:
<title>HTML Page Title</title>
-
Quais são as tags que indicam um comentário?
-
Explique o que é um atributo e dê alguns exemplos para a tag
<meta>
.
Exercícios Exploratórios
-
Crie um documento simples em HTML versão 5 com o título
My first HTML document
e um único parágrafo no corpo, contendo o textoHello World
. Use a tag de parágrafo<p>
no corpo da página. -
Adicione o autor (
Kevin Author
) e a descrição (This is my first HTML page.
) ao documento HTML. -
Adicione as seguintes palavras-chave relacionadas ao documento HTML:
HTML
,Example
,Test
eMetadata
. -
Adicione o elemento
<meta charset="ISO-8859-1">
ao cabeçalho do documento e mude o texto deHello World
para japonês (こんにちは世界
). O que acontece? Como seria possível resolver o problema? -
Depois de alterar o texto do parágrafo de volta para
Hello World
, redirecione a página HTML parahttps://www.google.com
após 30 segundos e inclua um comentário explicando essa operação no cabeçalho do documento.
Resumo
Nesta lição, você aprendeu:
-
O papel do HTML
-
A estrutura do HTML
-
A sintaxe do HTML (tags, atributos, comentários)
-
O cabeçalho do HTML
-
As meta tags
-
Como criar um documento HTML simples
Os seguintes termos foram discutidos nesta lição:
<!DOCTYPE html>
-
A tag de declaração.
<html>
-
O envoltório de todas as tags que constituem a página HTML.
<head>
-
O envoltório de todos os elementos do cabeçalho.
<body>
-
O envoltório de todos os elementos do corpo da página.
<meta>
-
A tag dos metadados, usada para especificar informações adicionais sobre a página HTML (como o autor, a descrição e a codificação dos caracteres).
Respostas aos Exercícios Guiados
-
Para cada uma das seguintes tags, indique a tag de fechamento correspondente:
<body>
</body>
<head>
</head>
<html>
</html>
<meta>
None
<title>
</title>
-
Qual é a diferença entre uma tag e um elemento? Use esta entrada como referência:
<title>Título da página HTML</title>
.Um elemento HTML consiste em uma tag de abertura, uma tag de fechamento e tudo o que está entre elas. As tags HTML são usadas para demarcar o início ou o fim de um elemento. Portanto,
<title>Título da página HTML</title>
é um elemento HTML, ao passo que<title>
e</title>
são, respectivamente, as tags de abertura e fechamento. -
Quais são as tags que indicam um comentário?
Os comentários são inseridos entre as tags
<!--
e-->
e podem estar em uma única linha ou estender-se por múltiplas linhas. -
Explique o que é um atributo e dê alguns exemplos para a tag
<meta>
.Os atributos são usados para especificar mais precisamente um elemento HTML. Por exemplo, a tag
<meta>
emprega o par de atributosname
econtent
para informar o autor e a descrição de uma página HTML. Já o atributocharset
permite especificar a codificação de caracteres para o documento HTML.
Respostas aos Exercícios Exploratórios
-
Crie um documento simples em HTML versão 5 com o título
My first HTML document
e um único parágrafo no corpo, contendo o textoHello World
. Use a tag de parágrafo<p>
no corpo da página.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> </head> <body> <p>Hello World</p> </body> </html>
-
Adicione o autor (
Kevin Author
) e a descrição (This is my first HTML page.
) ao documento HTML.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> </head> <body> <p>Hello World</p> </body> </html>
-
Adicione as seguintes palavras-chave relacionadas ao documento HTML:
HTML
,Example
,Test
eMetadata
.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> <meta name="keywords" content="HTML, Example, Test, Metadata"> </head> <body> <p>Hello World</p> </body> </html>
-
Adicione o elemento
<meta charset="ISO-8859-1">
ao cabeçalho do documento e mude o texto deHello World
para japonês (こんにちは世界
). O que acontece? Como seria possível resolver o problema?Se o exemplo for executado conforme descrito, o texto em japonês não será exibido corretamente. Isso ocorre porque ISO-8859-1 representa a codificação de caracteres para o alfabeto latino. Para visualizar o texto, é necessário alterar a codificação de caracteres, usando, por exemplo, UTF-8 (
<meta charset="utf-8">
). -
Depois de alterar o texto do parágrafo de volta para
Hello World
, redirecione a página HTML parahttps://www.google.com
após 30 segundos e inclua um comentário explicando essa operação no cabeçalho do documento.<!DOCTYPE html> <html> <head> <title>My first HTML document</title> <meta name="author" content="Kevin Author"> <meta name="description" content="This is my first HTML page."> <meta name="keywords" content="HTML, Example, Test, Metadata"> <meta charset="utf-8"> <!-- The page is redirected to Google after 30 seconds --> <meta http-equiv="refresh" content="30; url=https://www.google.com"> </head> <body> <p>Hello World</p> </body> </html>