viernes, 14 de marzo de 2025

EL NAVBAR Y SUS USOS VARIOS

 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>
Html

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; /* Elimina el margen predeterminado del body */
      font-family: sans-serif;
    }

    nav {
      background-color: #333;
      color: white;
      padding: 10px 0; /* Espacio arriba y abajo */
    }

    .navbar {
      display: flex;          /* Usa flexbox para alinear los elementos */
      justify-content: space-between; /* Espacia logo y menú */
      align-items: center;     /* Centra verticalmente */
      max-width: 1200px;       /* Ancho máximo para el contenido */
      margin: 0 auto;         /* Centra horizontalmente */
      padding: 0 20px;         /* Espacio a los lados */
    }

    .logo a {
      color: white;
      text-decoration: none; /* Quita el subrayado */
      font-size: 1.5em;       /* Tamaño de la fuente */
      font-weight: bold;      /* Texto en negrita */
    }

    .menu {
      list-style: none;       /* Quita los puntos de la lista */
      margin: 0;
      padding: 0;
      display: flex;          /* Usa flexbox para alinear los elementos */
    }

    .menu li {
      margin: 0 15px;        /* Espacio entre los elementos del menú */
    }

    .menu li a {
      color: white;
      text-decoration: none;
    }

    .menu li a:hover {
      text-decoration: underline; /* Subraya al pasar el ratón */
    }

  </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

EJERCICIO CREACION DE TABS EN HTML

 EJERCICIO CREACION DE TABS EN HTML Abra VSCode y a partir de los siguientes codigos muestre en pantalla el resultado Codigo : tabs.html ...