Criar um Rodapé Básico com HTML

Introdução

A tag <footer> pode ser usada para criar o rodapé de uma página web/website. Neste laboratório, você aprenderá como criar um rodapé básico usando a tag HTML footer.

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 93%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Configurar a estrutura básica da página web

Crie um novo arquivo com a extensão .html e nomeie-o como index.html. É aqui que adicionaremos o código HTML para criar um rodapé.

Nesta etapa, criaremos a estrutura básica da página web. Aqui está o código:

<!doctype html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <!-- Header will be here -->
    <main>
      <!-- Main content will be here -->
    </main>
    <!-- Footer will be here -->
  </body>
</html>

Adicionar o código do rodapé

Adicione o seguinte código após a tag main para criar um rodapé básico:

<footer>
  <p>Copyright © 2021 My Webpage. All Rights Reserved.</p>
</footer>

Neste exemplo, adicionamos uma tag de parágrafo simples ao rodapé com algum texto. Você pode personalizar o rodapé para adicionar links, informações de autoria, mapa do site e outros conteúdos.

Salve o arquivo index.html e abra-o em seu navegador web. Você deve ver uma página web básica com um rodapé na parte inferior.

Personalizando o Rodapé

Nesta etapa, personalizaremos o rodapé adicionando mais algumas informações. Aqui está um exemplo:

<footer>
  <p>Contact us:</p>
  <ul>
    <li>Email: info@example.com</li>
    <li>Phone: 123-456-7890</li>
  </ul>
  <p>Follow us:</p>
  <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
  </ul>
</footer>

Neste exemplo, adicionamos dois parágrafos e duas listas não ordenadas. A primeira lista contém informações de contato para o site, e a segunda contém links para perfis de mídia social.

Salve o arquivo index.html e abra-o em seu navegador web. Você deve ver seu rodapé personalizado na parte inferior da página web.

Resumo

Neste laboratório, aprendemos como criar um rodapé básico usando a tag HTML footer. A tag footer é usada para definir o rodapé da página web e pode ser usada para conter várias informações, como links e dados de direitos autorais relacionados à página web. Também aprendemos como personalizar o rodapé para incluir informações de contato e links de mídia social.

Documento HTML/Seção de Rodapé

Introdução

Configurar a estrutura básica da página web

Adicionar o código do rodapé

Personalizando o Rodapé

Resumo