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.htmle 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.
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.
