Criar Seção de Cabeçalho em HTML - Guia Passo a Passo

Introdução

Neste laboratório, aprenderemos como criar a seção de cabeçalho de uma página HTML usando a tag <header>. A seção de cabeçalho de uma página web normalmente contém o logotipo do site, o menu de navegação, a barra de pesquisa, etc. A tag <header> é um elemento de nível de bloco usado para agrupar outros elementos HTML para criar a seção de cabeçalho de uma página web.

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 iniciante com uma taxa de conclusão de 86%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Configurando o Documento HTML

Começaremos criando um novo arquivo HTML chamado index.html. Em index.html, adicionaremos a estrutura básica do documento HTML usando o seguinte código:

<!doctype html>
<html>
  <head>
    <title>HTML Header Tutorial</title>
  </head>
  <body></body>
</html>

Criando a Seção de Cabeçalho

Criaremos a seção de cabeçalho da página HTML usando a tag <header>. Dentro da tag <body>, adicione o seguinte código:

<header>
  <h1>Bem-vindo ao Meu Site</h1>
  <nav>
    <ul>
      <li><a href="#">Início</a></li>
      <li><a href="#">Sobre</a></li>
      <li><a href="#">Contato</a></li>
    </ul>
  </nav>
</header>

No código acima, adicionamos uma tag <h1> para definir o título da seção de cabeçalho e uma tag <nav> para definir o menu de navegação. Dentro da tag <nav>, adicionamos uma lista não ordenada <ul> e três itens de lista <li> com as tags de âncora <a> correspondentes para criar o menu de navegação.

Adicionando Estilos à Seção de Cabeçalho

Para adicionar estilos à seção de cabeçalho, criaremos um arquivo CSS chamado style.css. Em style.css, escreveremos o seguinte código:

header {
  background-color: #333;
  color: #fff;
  padding: 1rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #fff;
  display: block;
  padding: 0.5em;
  text-decoration: none;
}

No código acima, adicionamos estilos à tag <header> para definir a cor de fundo, a cor do texto e o preenchimento (padding). Também adicionamos estilos à tag <nav> e seus elementos filhos para definir os estilos do menu de navegação.

Vinculando o arquivo CSS

Para vincular o arquivo CSS ao arquivo HTML, adicione o seguinte código dentro da tag <head>:

<link rel="stylesheet" href="style.css" />

Salve as alterações em index.html e abra-o em um navegador web. Você deverá ver a seguinte saída:

HTML Header Example

Resumo

Parabéns! Você criou com sucesso uma seção de cabeçalho HTML básica usando a tag <header>. Neste laboratório, você aprendeu como criar a seção de cabeçalho de uma página HTML, adicionar estilos a ela e vincular um arquivo CSS ao documento HTML. A seção de cabeçalho é uma parte essencial de qualquer página web, pois fornece o conteúdo introdutório e o menu de navegação aos visitantes.

Cabeçalho da Seção HTML