Robótica Trinitaria 202X: 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>

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>

Robótica Trinitaria 202X

viernes, 14 de marzo de 2025

EL NAVBAR Y SUS USOS VARIOS

No hay comentarios:

Publicar un comentario

SIMULACRO EVALUACION DOCENTE

Denunciar abuso

Etiquetas