Include y links

Clase 12 de 36 • Curso de Flask

Clase anteriorSiguiente clase

Resumen

¿Cómo crear una barra de navegación con HTML?

Crear una barra de navegación puede parecer complicado, pero cuando dominas los conceptos básicos de HTML y el uso de funciones o teclas de inclusión, se vuelve sencillo. En este apartado, exploraremos cómo se puede utilizar la funcionalidad de inclusión dentro de HTML para integrar una barra de navegación que además es reutilizable en múltiples páginas. Descubriremos cómo crear un archivo HTML que, al integrarse en nuestro archivo base, nos permitirá dirigirnos de manera fácil a distintas secciones.

¿Qué es una barra de navegación?

Una barra de navegación es un elemento esencial en la mayoría de sitios web. Es la guía del usuario para desplazarse a través de diferentes secciones o páginas con facilidad y sin complicaciones. Usualmente, consiste en una serie de enlaces que redirigen a otras partes del sitio o a sitios externos, mejorando así la estructura y la usabilidad del sitio.

¿Cómo se construye la barra de navegación en HTML?

Para construir nuestra barra, creamos un nuevo archivo llamado navbar.html. Este archivo será el contenedor de nuestra lista de enlaces de navegación. Aquí tienes un ejemplo del código que iría dentro del archivo:

<nav>
  <ul>
    <li><a href="{{ url_for('index') }}">Ir a inicio</a></li>
    <li><a href="https://platzi.com" target="_blank">Ir a Platzi</a></li>
  </ul>
</nav>
  • El elemento <nav> denota el contenedor de la barra de navegación.
  • Dentro del <ul>, que es una lista no ordenada, creamos <li> (elementos de lista) que contienen <a> (enlaces ancla).
  • Utilizamos href para especificar la URL de destino.
  • Para enlaces externos, como el de Platzi, el atributo target="_blank" nos asegura que se abrirá en una nueva pestaña.

¿Cómo incluir la barra de navegación en el archivo base HTML?

Una vez que hemos creado nuestra barra de navegación, necesitamos integrarla en nuestro archivo base HTML. Este archivo actúa como la plantilla principal que otras páginas del sitio heredan. Para ello, utilizamos la función de inclusión, la cual nos permite incorporar fragmentos de código HTML desde archivos externos, como navbar.html.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página</title>
</head>
<body>
    <header>
        {% include 'navbar.html' %}
    </header>

    <main>
        <!-- Contenido principal aquí -->
    </main>
</body>
</html>
  • Dentro del <header>, usamos {% include 'navbar.html' %} para integrar el contenido de nuestra barra de navegación.
  • Resulta en una estructura HTML modular, lo que facilita el mantenimiento y actualización del sitio.

Consejos prácticos al crear una barra de navegación

  1. Simplicidad ante todo: Utiliza términos claros y concisos para los enlaces, facilitando la navegación del usuario.
  2. Consistencia: Asegúrate de que la barra de navegación sea uniforme en todas las páginas del sitio.
  3. Enlaces funcionales: Prueba cada enlace para garantizar que se dirijan correctamente a las páginas esperadas.
  4. Accesibilidad: Considera la accesibilidad, utilizando descripciones adecuadas y asegurando que la barra funcione en dispositivos móviles.

Crear una barra de navegación reutilizable no solo optimiza el tiempo de desarrollo, sino que ofrece al usuario una experiencia de navegación fluida. ¡Te animamos a seguir explorando y mejorando tus habilidades!