EL NAVBAR Y SUS USOS VARIOS
¿Qué es un Navbar?
Un navbar es una sección destacada en la parte superior (o a veces lateral) de un sitio web que contiene enlaces importantes para la navegación. Normalmente incluye:
El logo o nombre del sitio web.
Enlaces a las secciones principales del sitio (Inicio, Acerca de, Servicios, Contacto, etc.).
Un buscador (opcional).
Enlaces a perfiles de usuario (login, registro, etc.) si el sitio lo requiere.
Un menú desplegable (hamburguesa) para dispositivos móviles.
Estructura HTML Básica
La estructura HTML básica de un navbar suele incluir los siguientes elementos:
<nav>
<div class="navbar">
<div class="logo">
<a href="#">Mi Sitio</a>
</div>
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca De</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</nav>
Explicación:
<nav>: El elemento HTML5 que define la sección de navegación. Es semánticamente correcto y ayuda a los motores de búsqueda y lectores de pantalla a entender la estructura de tu página.
<div> class="navbar": Un contenedor principal para la barra de navegación. Es útil para aplicar estilos y controlar el diseño general. El nombre de la clase es solo una convención, puedes usar otro si prefieres.
<div> class="logo": Contiene el logo (imagen o texto) de tu sitio web. Normalmente, se enlaza a la página principal.
<ul class="menu">: Una lista no ordenada que contiene los enlaces de navegación. Usar una lista <ul> es una práctica común porque representa una lista de elementos relacionados.
<li>: Cada elemento de la lista representa un enlace.
<a href="#">: El elemento de enlace. El atributo href especifica la URL a la que se dirige el enlace. Usa # como marcador de posición y reemplázalo con la URL real de cada página.
Ejemplo con Estilos CSS (Básico)
Aquí tienes un ejemplo con CSS básico para darle estilo al navbar:
CREAR EN EL BLOC DE NOTAS EL SIGUIENTE ARCHIVO .HTML (menu.html)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navbar Ejemplo</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
nav {
background-color: #333;
color: white;
padding: 10px 0;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.logo a {
color: white;
text-decoration: none;
font-size: 1.5em;
font-weight: bold;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.menu li {
margin: 0 15px;
}
.menu li a {
color: white;
text-decoration: none;
}
.menu li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<div class="navbar">
<div class="logo">
<a href="#">Mi Sitio</a>
</div>
<ul class="menu">
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca De</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</nav>
<main>
<p>Contenido principal del sitio web.</p>
</main>
</body>
</html>
No hay comentarios:
Publicar un comentario