¿Alguna vez has buscado algo en la página principal de un sitio web sin poder encontrarlo? ¿En alguna ocasión consideraste adquirir un producto en un e-commerce, pero no encontraste las políticas de devolución? La frustración que provoca no encontrar «algo» hace que algunos usuarios abandonen el sitio y busquen otro más transparente o intuitivo. Aquí es donde entra en juego el footer en HTML y CSS. En este artículo, te explicaremos cómo hacer un footer en HTML y CSS para que puedas mejorar la experiencia del usuario en tu sitio web.
¿Qué es un footer?
El footer o pie de página es la sección de contenido que se encuentra en la parte inferior de una página web. Generalmente, contiene información básica sobre la empresa, como un aviso de derechos de autor, un enlace a la política de privacidad, un mapa del sitio, un logotipo, información de contacto, iconos de redes sociales y un formulario de registro por correo electrónico.
Un footer en HTML y CSS funciona como una red de seguridad para los usuarios que no han podido encontrar la información que necesitan en otras secciones de tu página web. Por ejemplo, al proporcionar un enlace a tu política de devoluciones o un formulario de contacto, puedes evitar que algunos visitantes abandonen tu ecommerce y nunca regresen.
¿Cómo hacer un footer en HTML?
A continuación, te explicaremos paso a paso cómo hacer un footer en HTML y CSS. Para este tutorial, asumimos que ya tienes conocimientos básicos de HTML y CSS.
Paso 1: Estructura básica en HTML
Primero, debemos crear la estructura básica del footer en HTML. Abre tu archivo HTML y agrega la siguiente estructura:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer en HTML y CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Contenido de la página -->
<footer>
<p>© 2024 TuEmpresa. Todos los derechos reservados.</p>
<nav>
<ul>
<li><a href="#privacidad">Política de privacidad</a></li>
<li><a href="#contacto">Contacto</a></li>
<li><a href="#mapa">Mapa del sitio</a></li>
</ul>
</nav>
<div class="redes-sociales">
<a href="https://facebook.com" target="_blank">Facebook</a>
<a href="https://twitter.com" target="_blank">Twitter</a>
<a href="https://instagram.com" target="_blank">Instagram</a>
</div>
</footer>
</body>
</html>Paso 2: Estilos en CSS
Ahora que tenemos la estructura HTML, es momento de agregar los estilos CSS para darle diseño al footer. Crea un archivo llamado styles.css y agrega el siguiente código:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
footer {
background-color: #333;
color: white;
padding: 20px 0;
text-align: center;
}
footer p {
margin: 0;
padding: 0;
}
footer nav ul {
list-style: none;
padding: 0;
margin: 10px 0;
}
footer nav ul li {
display: inline;
margin: 0 10px;
}
footer nav ul li a {
color: white;
text-decoration: none;
}
footer .redes-sociales a {
margin: 0 10px;
color: white;
text-decoration: none;
}Paso 3: Personalizar el footer
Puedes personalizar el footer en HTML y CSS según las necesidades de tu sitio web. Aquí hay algunas sugerencias:
- Agregar logotipo: Puedes incluir una imagen de tu logotipo dentro del footer para reforzar la identidad de tu marca.
- Incluir un formulario de registro: Añade un formulario para que los usuarios puedan suscribirse a tu boletín informativo.
- Estilos adicionales: Utiliza CSS para añadir efectos hover, cambiar colores y hacer que el footer sea más atractivo visualmente.
Ejemplo completo de un footer en HTML y CSS
Aquí tienes un ejemplo completo de cómo podría lucir un footer en HTML y CSS con todas las personalizaciones mencionadas:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer en HTML y CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Contenido de la página -->
<footer>
<img src="logo.png" alt="Logo de la empresa" width="100">
<p>© 2024 TuEmpresa. Todos los derechos reservados.</p>
<nav>
<ul>
<li><a href="#privacidad">Política de privacidad</a></li>
<li><a href="#contacto">Contacto</a></li>
<li><a href="#mapa">Mapa del sitio</a></li>
</ul>
</nav>
<div class="redes-sociales">
<a href="https://facebook.com" target="_blank">Facebook</a>
<a href="https://twitter.com" target="_blank">Twitter</a>
<a href="https://instagram.com" target="_blank">Instagram</a>
</div>
<form>
<label for="email">Suscríbete a nuestro boletín:</label>
<input type="email" id="email" name="email" placeholder="Ingresa tu correo electrónico">
<button type="submit">Suscribirse</button>
</form>
</footer>
</body>
</html>body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
footer {
background-color: #333;
color: white;
padding: 20px 0;
text-align: center;
}
footer img {
margin-bottom: 10px;
}
footer p {
margin: 0;
padding: 0;
}
footer nav ul {
list-style: none;
padding: 0;
margin: 10px 0;
}
footer nav ul li {
display: inline;
margin: 0 10px;
}
footer nav ul li a {
color: white;
text-decoration: none;
}
footer .redes-sociales a {
margin: 0 10px;
color: white;
text-decoration: none;
}
footer form {
margin-top: 20px;
}
footer form input {
padding: 5px;
margin-right: 10px;
border: none;
border-radius: 5px;
}
footer form button {
padding: 5px 10px;
border: none;
border-radius: 5px;
background-color: #ff9800;
color: white;
cursor: pointer;
}El resultado sería algo más o menos así:
Crear un footer en HTML y CSS es esencial para mejorar la experiencia del usuario en tu sitio web. Un footer bien diseñado no solo proporciona información crucial a tus visitantes, sino que también puede ayudar a retenerlos y guiarlos hacia las acciones que deseas que tomen. Si deseas aprender más sobre cómo mejorar tu sitio web y dominar HTML y CSS, considera inscribirte en el Bootcamp Desarrollo Web de KeepCoding. Este programa intensivo te brindará las habilidades necesarias para transformar tu carrera y entrar en el sector IT en poco tiempo. ¡No te pierdas esta oportunidad de cambiar tu vida!
