Crea un pie de página básico con HTML

Introducción

La etiqueta <footer> se puede utilizar para crear el pie de página de una página web/sitio web. En este laboratorio, aprenderá a crear un pie de página básico utilizando la etiqueta HTML footer.

Nota: Puede practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 93%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Configura la estructura básica de la página web

Crea un nuevo archivo con la extensión .html y dile index.html. Aquí es donde agregaremos el código HTML para crear un pie de página.

En este paso, crearemos la estructura básica de la página web. Aquí está el código:

<!doctype html>
<html>
  <head>
    <title>Mi página web</title>
  </head>
  <body>
    <!-- El encabezado estará aquí -->
    <main>
      <!-- El contenido principal estará aquí -->
    </main>
    <!-- El pie de página estará aquí -->
  </body>
</html>

Agrega el código del pie de página

Agrega el siguiente código después de la etiqueta main para crear un pie de página básico:

<footer>
  <p>Copyright © 2021 Mi página web. Todos los derechos reservados.</p>
</footer>

En este ejemplo, hemos agregado una simple etiqueta de párrafo al pie de página con un poco de texto. Puedes personalizar el pie de página para agregar enlaces, información de autoría, mapa del sitio y otros contenidos.

Guarda el archivo index.html y dile a tu navegador web que lo abra. Deberías ver una página web básica con un pie de página en la parte inferior.

Personalizar el pie de página

En este paso, personalizaremos el pie de página agregando más información. Aquí está un ejemplo:

<footer>
  <p>Contáctenos:</p>
  <ul>
    <li>Email: info@example.com</li>
    <li>Teléfono: 123-456-7890</li>
  </ul>
  <p>Síguenos:</p>
  <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
  </ul>
</footer>

En este ejemplo, hemos agregado dos párrafos y dos listas no ordenadas. La primera lista contiene información de contacto para el sitio web, y la segunda contiene enlaces a los perfiles de redes sociales.

Guarda el archivo index.html y dile a tu navegador web que lo abra. Deberías ver tu pie de página personalizado en la parte inferior de la página web.

Resumen

En este laboratorio, aprendimos cómo crear un pie de página básico utilizando la etiqueta HTML footer. La etiqueta footer se utiliza para definir el pie de página de la página web y se puede utilizar para contener información variada, como enlaces y datos de derechos de autor relacionados con la página web. También aprendimos cómo personalizar el pie de página para incluir información de contacto y enlaces a redes sociales.

Documento HTML/Sección de pie de página

Introducción

Configura la estructura básica de la página web

Agrega el código del pie de página

Personalizar el pie de página

Resumen