Crear hipervínculos y navegación con etiquetas HTML a

Introducción

En este laboratorio, los participantes aprenderán cómo crear hipervínculos y navegación utilizando etiquetas HTML A, centrándose en la construcción de una estructura de página web integral y la implementación de diversas técnicas de enlace. El laboratorio guía a los estudiantes a través de la configuración de una página HTML básica, la creación de enlaces de navegación de página a página, la implementación de enlaces de contacto, el desarrollo de marcadores de documento y la exploración del comportamiento de los enlaces con atributos de destino.

Los participantes comenzarán estableciendo una estructura de documento HTML5 fundamental y luego mejorarán progresivamente sus habilidades agregando diferentes tipos de hipervínculos, incluyendo navegación interna de página, enlaces de contacto por correo electrónico y teléfono y referencias entre páginas. Al final del laboratorio, los estudiantes tendrán una comprensión sólida de cómo utilizar eficazmente las etiquetas de anclaje para crear páginas web interactivas y bien estructuradas.

Configurar la estructura básica de una página HTML

En este paso, aprenderás cómo crear una estructura básica de página HTML que servirá como base para agregar hipervínculos y navegación. HTML (HyperText Markup Language, Lenguaje de Marcado de Hipertexto) es el lenguaje de marcado estándar para crear páginas web.

Primero, abre el WebIDE y navega hasta el directorio ~/project. Crea un nuevo archivo llamado index.html haciendo clic derecho en el explorador de archivos y seleccionando "Nuevo archivo".

Vamos a crear un simple documento HTML5 con la estructura esencial:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>
      This is a basic HTML page structure that we'll use to create hyperlinks.
    </p>
  </body>
</html>

Desglosemos los componentes clave de esta estructura HTML:

<!DOCTYPE html> declara que este es un documento HTML5
<html> es el elemento raíz de la página HTML
<head> contiene información meta sobre el documento
<meta charset="UTF-8"> especifica la codificación de caracteres
<meta name="viewport"> asegura una representación adecuada en dispositivos móviles
<title> establece el título de la página que se muestra en la pestaña del navegador
<body> contiene el contenido visible de la página

Notas: Aprende más sobre Cómo previsualizar archivos HTML en el WebIDE.

Ejemplo de salida cuando abres este archivo en un navegador:

Crear enlaces de navegación de página a página

Las etiquetas <a> se utilizan para crear hipervínculos en HTML. La sintaxis básica para crear un hipervínculo es <a href="URL">Texto del enlace</a>.

En este paso, aprenderás cómo crear enlaces de navegación entre diferentes páginas utilizando etiquetas de anclaje HTML (<a>). Primero, creemos archivos HTML adicionales para demostrar la navegación de página a página.

Crea dos nuevos archivos en el directorio ~/project: about.html y contact.html.

Actualiza el archivo index.html para incluir enlaces de navegación:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Website</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Welcome to My Website</h1>
    <p>This is the home page with navigation links.</p>
  </body>
</html>

Crea el archivo about.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>About Us</h1>
    <p>Learn more about our website and mission.</p>
  </body>
</html>

Crea el archivo contact.html:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Contact Us</h1>
    <p>Get in touch with our team.</p>
  </body>
</html>

Puntos clave sobre la navegación de página a página:

El atributo <a href="..."> especifica la página de destino
Utiliza rutas de archivos relativas cuando enlaces entre páginas en el mismo directorio
Cada página incluye un menú de navegación consistente

Ejemplo de salida en un navegador web:

Navegador mostrando enlaces de navegación

Implementar enlaces de contacto por correo electrónico y teléfono

En este paso, aprenderás cómo crear enlaces clicables para correos electrónicos y números de teléfono utilizando etiquetas de anclaje HTML. Abre el archivo contact.html y actualízalo con tipos de enlaces especiales.

Actualiza el archivo contact.html con el siguiente contenido:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Contact Page</title>
  </head>
  <body>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="contact.html">Contact</a>
    </nav>
    <h1>Contact Information</h1>

    <h2>Get in Touch</h2>

    <h3>Email Links</h3>
    <p>
      Contact us at:
      <a href="mailto:support@example.com">support@example.com</a>
    </p>

    <h3>Phone Links</h3>
    <p>
      Call us at:
      <a href="tel:+1-555-123-4567">+1 (555) 123-4567</a>
    </p>

    <h3>Multiple Contact Options</h3>
    <p>
      Email: <a href="mailto:info@example.com">info@example.com</a><br />
      Phone: <a href="tel:+1-800-555-0199">1-800-CONTACT</a>
    </p>
  </body>
</html>

Puntos clave sobre los enlaces de correo electrónico y teléfono:

El prefijo mailto: crea un enlace de correo electrónico que abre el cliente de correo electrónico predeterminado
El prefijo tel: crea un enlace de número de teléfono que funciona en dispositivos móviles
Estos enlaces facilitan a los usuarios contactar contigo con un solo clic

Ejemplo de salida en un navegador web:

Crear marcadores de documento dentro de una sola página

En este paso, aprenderás cómo crear marcadores de página internos utilizando etiquetas de anclaje HTML. Crea un nuevo archivo llamado long-document.html en el directorio ~/project con el siguiente contenido:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document with Bookmarks</title>
    <style>
      body {
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.6;
      }
      section {
        height: 500px;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Table of Contents</h1>
    <nav>
      <a href="#section1">Section 1</a> | <a href="#section2">Section 2</a> |
      <a href="#section3">Section 3</a>
    </nav>

    <section id="section1">
      <h2>Section 1: Introduction</h2>
      <p>
        This is the first section of our long document. Click the links above to
        navigate quickly.
      </p>
    </section>

    <section id="section2">
      <h2>Section 2: Main Content</h2>
      <p>This is the second section with more detailed information.</p>
    </section>

    <section id="section3">
      <h2>Section 3: Conclusion</h2>
      <p>This is the final section of the document.</p>
    </section>

    <a href="#" style="position: fixed; bottom: 20px; right: 20px;"
      >Back to Top</a
    >
  </body>
</html>

Puntos clave sobre los marcadores de documento:

El bloque <style> agrega CSS para dar estilo al documento, incluyendo la altura y los márgenes de las secciones. No te preocupes por el CSS por ahora, lo cubriremos en laboratorios posteriores.
- max-width: 600px; establece el ancho máximo del documento
- margin: 0 auto; centra el documento horizontalmente
- line-height: 1.6; establece la altura de línea para una mejor legibilidad
- section { height: 500px; margin-bottom: 20px; } establece la altura y el margen de cada sección
Utiliza atributos id para crear destinos de marcadores.
Crea enlaces con href="#elementId" para saltar a secciones específicas.
El símbolo # seguido del id crea un enlace de página interno.

Agrega el archivo long-document.html al final de los enlaces de navegación para poder previsualizar el documento.

Ejemplo de salida en un navegador web:

Vista previa en el navegador del documento con marcadores

Utilizar atributos de destino para el comportamiento de los enlaces

En este paso, aprenderás sobre los atributos de destino de los enlaces HTML que controlan cómo se abren los enlaces. Crea un nuevo archivo llamado link-targets.html en el directorio ~/project:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link Target Attributes</title>
  </head>
  <body>
    <h1>Link Target Demonstration</h1>

    <h2>Default Link Behavior</h2>
    <p>
      <a href="https://www.example.com">Normal Link</a>
      (Se abre en la misma ventana)
    </p>

    <h2>Target Attribute Examples</h2>
    <p>
      <a href="https://www.example.com" target="_blank">New Tab Link</a>
      (Se abre en una nueva pestaña)
    </p>

    <h2>Multiple Target Demonstrations</h2>
    <p>
      <a href="https://www.example.com" target="_self">Misma ventana</a> |
      <a href="https://www.example.com" target="_blank">Nueva pestaña</a> |
      <a href="https://www.example.com" target="_parent">Marco padre</a> |
      <a href="https://www.example.com" target="_top"
        >Ventana completa del navegador</a
      >
    </p>

    <h2>Named Window Target</h2>
    <p>
      <a href="https://www.example.com" target="myWindow"
        >Abrir en ventana con nombre</a
      >
    </p>
  </body>
</html>

Puntos clave sobre los atributos de destino de los enlaces:

_blank: Abre el enlace en una nueva pestaña o ventana
_self: Comportamiento predeterminado, se abre en la misma ventana
_parent: Se abre en el marco padre
_top: Se abre en la ventana completa del navegador
Los destinos con nombre personalizados pueden crear comportamientos específicos de ventana

Copia la URL del servidor web y agrega /link-targets.html al final de la URL para ver la página (en una nueva pestaña).

Demostración de atributos de destino de enlaces

Ejemplo de salida en un navegador web:

Resumen

En este laboratorio, los participantes aprendieron cómo crear páginas web HTML completas e implementar diversas técnicas de hipervínculos. El laboratorio comenzó estableciendo una estructura básica de página HTML5, demostrando elementos esenciales como el DOCTYPE, las etiquetas meta y la organización básica del contenido. Los participantes exploraron la creación de enlaces de navegación entre múltiples páginas, utilizando etiquetas de anclaje HTML para conectar diferentes secciones de un sitio web.

El laboratorio se expandió aún más en las capacidades de hipervínculo al introducir técnicas avanzadas, como la implementación de enlaces de contacto por correo electrónico y teléfono, la creación de marcadores de documento dentro de una sola página y la comprensión del comportamiento de los enlaces a través de atributos de destino. Estos ejercicios prácticos proporcionaron experiencia práctica en la construcción de páginas web interactivas y bien estructuradas utilizando los mecanismos de enlace de HTML.