Dominando Metadados de Documentos HTML: SEO e Otimização

Introdução

Neste laboratório, você aprenderá como criar um documento HTML usando a tag HTML <head>. A tag <head> é usada para fornecer metadados e outras informações sobre a página web que não são visíveis ao usuário. Vamos percorrer os passos necessários para criar uma tag <head> para o seu documento HTML.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível intermediário com uma taxa de conclusão de 78%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Criar um Documento HTML

Primeiramente, vamos criar um documento HTML em um arquivo chamado index.html:

<!doctype html>
<html>
  <head> </head>
  <body></body>
</html>

Adicionar um Título ao seu Documento HTML

A tag <title> é usada para definir o título da página web. Ela deve ser colocada dentro da tag <head>. Adicione a tag <title> ao seu documento HTML:

<!doctype html>
<html>
  <head>
    <title>Minha Página Web Incrível</title>
  </head>
  <body>
    <h1>Olá, Mundo!</h1>
  </body>
</html>

Modificar o Título do seu Documento HTML

Vamos modificar o título do documento HTML, alterando o texto "My Awesome Webpage" para outra coisa. Substitua o texto "My Awesome Webpage" pelo título desejado:

<!doctype html>
<html>
  <head>
    <title>Meu Site Incrível</title>
  </head>
  <body>
    <h1>Olá, Mundo!</h1>
  </body>
</html>

Adicionar a Codificação de Caracteres

A codificação de caracteres (character encoding) é usada para definir como os caracteres são exibidos no navegador. Podemos definir a codificação de caracteres usando a tag <meta>. Adicione a seguinte tag <meta> dentro da tag <head>:

<!doctype html>
<html>
  <head>
    <title>Meu Site Incrível</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Olá, Mundo!</h1>
  </body>
</html>

Adicionar Estilo CSS ao seu Documento HTML

Você pode usar a tag <style> dentro da tag <head> para fornecer estilo CSS para a página web. Adicione a seguinte tag <style> dentro da tag <head>:

<!doctype html>
<html>
  <head>
    <title>Meu Site Incrível</title>
    <meta charset="UTF-8" />
    <style>
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>Olá, Mundo!</h1>
  </body>
</html>

Adicionar Links para Folhas de Estilo Externas

Você também pode vincular folhas de estilo CSS externas ao seu documento HTML usando a tag <link>. Crie um novo arquivo chamado styles.css e adicione os seguintes estilos CSS:

h1 {
  color: red;
}

Em seguida, vincule esta folha de estilo ao seu documento HTML usando a seguinte tag <link> dentro da tag <head>:

<!doctype html>
<html>
  <head>
    <title>Meu Site Incrível</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Olá, Mundo!</h1>
  </body>
</html>

Adicionar uma URL Base

A tag <base> é usada para fornecer uma URL base para todas as URLs relativas usadas no documento HTML. Adicione a tag <base> dentro da tag <head>:

<!doctype html>
<html>
  <head>
    <title>Meu Site Incrível</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <base href="https://example.com" />
  </head>
  <body>
    <h1>Olá, Mundo!</h1>
  </body>
</html>

Resumo

Neste laboratório, você aprendeu como usar a tag <head> do HTML para fornecer metadados e outras informações sobre a página web. Você pode usar a tag <title> para definir o título do documento HTML, a tag <meta> para definir a codificação de caracteres e outras informações meta, a tag <style> para fornecer estilos CSS, a tag <link> para vincular folhas de estilo externas e a tag <base> para fornecer uma URL base para todas as URLs relativas.