Enlaces de navegación HTML: Dominando la navegación de sitios web

Introducción

La etiqueta HTML <nav> es un elemento importante para crear enlaces de navegación en un sitio web. En este laboratorio, aprenderás a usar la etiqueta <nav> para crear un menú de navegación en tu sitio web.

Nota: Puedes practicar la codificación en index.html y aprender Cómo escribir HTML en Visual Studio Code. Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Creando una página HTML básica

Primero, creemos una nueva página HTML llamada index.html y agreguemos la estructura básica de HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>
  </head>
  <body></body>
</html>

Agregando enlaces de navegación usando la etiqueta

Ahora, creemos un menú de navegación con la ayuda de la etiqueta HTML <nav>. Cree un elemento <nav> dentro de la etiqueta <body>.

<body>
  <nav></nav>
</body>

Agregando enlaces de navegación usando la etiqueta

A continuación, agregue algunos enlaces de navegación dentro de la etiqueta <nav> usando la etiqueta HTML <a>.

<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact Us</a>
  </nav>
</body>

Dar estilo al menú de navegación

Para que el menú de navegación sea más atractivo visualmente, agreguemos un poco de CSS a él. Agregue los siguientes estilos a su HTML:

<head>
  <meta charset="UTF-8" />
  <title>My Website</title>

  <style>
    nav {
      background-color: #333;
      overflow: hidden;
    }

    a {
      float: left;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    a:hover {
      background-color: #ddd;
      color: black;
    }
  </style>
</head>

Página final

Su página final index.html debería verse más o menos así:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Website</title>

    <style>
      nav {
        background-color: #333;
        overflow: hidden;
      }

      a {
        float: left;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
      }

      a:hover {
        background-color: #ddd;
        color: black;
      }
    </style>
  </head>
  <body>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Contact Us</a>
    </nav>
  </body>
</html>

Resumen

En este laboratorio, aprendiste cómo usar la etiqueta HTML <nav> para crear un menú de navegación en tu sitio web. Crear menús de navegación usando la etiqueta <nav> y estilarlos con CSS puede ayudar a los usuarios a navegar fácilmente por tu sitio web y hacerlo más atractivo visualmente.