Enlaces HTML: Crea Hipervínculos Externos e Internos

Introducción

¡Bienvenido al laboratorio de enlaces HTML! Los hipervínculos son la base de la World Wide Web, permitiendo a los usuarios navegar entre páginas y recursos. En HTML, los enlaces se crean utilizando la etiqueta <a> (ancla).

En este laboratorio, aprenderás las habilidades esenciales para crear y gestionar enlaces. Comenzarás creando un enlace externo básico, luego aprenderás a hacer que se abra en una nueva pestaña del navegador. Después de eso, crearás un enlace interno que salta a otra sección de la misma página. Finalmente, añadirás una tooltip (información sobre el texto) a un enlace para mejorar la experiencia del usuario.

Trabajarás con un archivo index.html en el WebIDE. Puedes ver tus cambios en vivo cambiando a la pestaña "Web 8080" en la interfaz de LabEx.

¡Empecemos!

Este es un Guided Lab, que proporciona instrucciones paso a paso para ayudarte a aprender y practicar. Sigue las instrucciones cuidadosamente para completar cada paso y obtener experiencia práctica. Los datos históricos muestran que este es un laboratorio de nivel principiante con una tasa de finalización del 92%. Ha recibido una tasa de reseñas positivas del 100% por parte de los estudiantes.

Añade una etiqueta con el atributo href para un enlace externo

En este paso, crearás tu primer hipervínculo. La etiqueta <a>, que significa "ancla" (anchor), se utiliza para definir un hipervínculo. El atributo más importante del elemento <a> es href, que especifica la URL de destino del enlace.

Vamos a añadir un enlace al sitio web de LabEx.

Primero, abre el archivo index.html desde el explorador de archivos en el lado izquierdo del WebIDE.

Ahora, busca el elemento <h2>Section 1</h2> y añade la siguiente etiqueta <a> dentro de la etiqueta <p> justo después de él.

<a href="https://labex.io">Visit LabEx</a>

El cuerpo de tu archivo index.html debería verse ahora así. Observa el nuevo enlace dentro de la primera sección.

<body>
  <h1>Welcome to the HTML Links Lab</h1>
  <p>
    This page will be used to practice creating different kinds of HTML links.
  </p>

  <nav>
    <!-- Navigation links will be added here -->
  </nav>

  <div class="section">
    <h2>Section 1</h2>
    <p>
      <a href="https://labex.io">Visit LabEx</a>
    </p>
  </div>

  <div class="section">
    <h2>Section 2</h2>
    <p>
      This is the section we will link to from the top of the page. It is placed
      far down to demonstrate the page jump effect.
    </p>
  </div>
</body>

Después de añadir el código, guarda el archivo (Ctrl+S o Cmd+S). Luego, cambia a la pestaña "Web 8080" para ver tu nuevo enlace. Al hacer clic en él, serás dirigido a la página principal de LabEx.

Establece el atributo target a _blank para abrir en una nueva pestaña

En este paso, aprenderás cómo hacer que un enlace se abra en una nueva pestaña del navegador. Por defecto, los enlaces se abren en la misma pestaña. Para cambiar este comportamiento, usamos el atributo target.

Establecer target="_blank" instruye al navegador a abrir el documento enlazado en una nueva pestaña o ventana. Esta es una práctica común para enlaces externos, ya que mantiene al usuario en tu sitio web mientras le permite visitar el recurso externo.

Vamos a modificar el enlace que creaste en el paso anterior. Añade el atributo target="_blank" a la etiqueta <a>.

<a href="https://labex.io" target="_blank">Visit LabEx</a>

La primera sección de tu archivo index.html actualizado debería contener ahora este enlace modificado:

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank">Visit LabEx</a>
  </p>
</div>

Guarda el archivo y cambia a la pestaña "Web 8080". Ahora, cuando hagas clic en el enlace "Visit LabEx", debería abrirse en una nueva pestaña del navegador, dejando abierta la pestaña de tu entorno de laboratorio.

Crea un enlace interno con href a un ancla de id

En este paso, crearemos un enlace interno, también conocido como "ancla de página" o "enlace de salto". Estos enlaces permiten a los usuarios saltar a una parte específica de la misma página, lo cual es muy útil para documentos largos.

Para crear un enlace interno, estableces el atributo href a un símbolo de almohadilla (#) seguido del id del elemento al que quieres enlazar. Por ejemplo, href="#section-name".

Vamos a añadir un enlace dentro del elemento <nav> en la parte superior de nuestra página que saltará a la "Sección 2".

Añade la siguiente línea dentro de la etiqueta <nav>:

<a href="#section2">Jump to Section 2</a>

El área de navegación de tu archivo index.html debería verse ahora así:

<nav>
  <!-- Navigation links will be added here -->
  <a href="#section2">Jump to Section 2</a>
</nav>

Guarda el archivo y revisa la pestaña "Web 8080". Verás el nuevo enlace en la parte superior. Si haces clic en él ahora, no sucederá nada porque aún no hemos definido el ancla de destino. Lo haremos en el siguiente paso.

Añade el atributo id al elemento para anclar

En el paso anterior, creaste un enlace que apunta a #section2. Ahora, necesitas crear el destino para ese enlace. Esto se hace utilizando el atributo id.

El atributo id proporciona un identificador único para un elemento HTML en una página. El valor del id debe ser único dentro del documento HTML. Nuestro enlace interno href="#section2" buscará un elemento con id="section2".

Vamos a añadir este id a la etiqueta <h2> de la Sección 2. Busca la siguiente línea:

<h2>Section 2</h2>

Y modifícala para incluir el atributo id:

<h2 id="section2">Section 2</h2>

La segunda sección de tu archivo index.html actualizado debería verse ahora así:

<div class="section">
  <h2 id="section2">Section 2</h2>
  <p>
    This is the section we will link to from the top of the page. It is placed
    far down to demonstrate the page jump effect.
  </p>
</div>

Guarda el archivo y vuelve a la pestaña "Web 8080". Haz clic en el enlace "Jump to Section 2" en la parte superior de la página. El navegador ahora debería desplazarse suavemente hasta el encabezado "Section 2".

Usa el atributo title para la información sobre el enlace

En este paso final, aprenderás a añadir una información sobre herramientas (tooltip) a un enlace. Una información sobre herramientas proporciona información adicional, no esencial, y normalmente aparece cuando un usuario pasa el ratón sobre un elemento. Esto puede mejorar la accesibilidad y la experiencia del usuario.

Podemos añadir una información sobre herramientas a cualquier elemento, incluido un enlace, utilizando el atributo global title.

Vamos a añadir un título descriptivo a nuestro enlace externo a LabEx. Busca el enlace que creaste en los dos primeros pasos y añádele un atributo title.

<a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
  >Visit LabEx</a
>

Tu archivo index.html final debería contener ahora todos los elementos que hemos añadido a lo largo de este laboratorio. La primera sección se verá así:

<div class="section">
  <h2>Section 1</h2>
  <p>
    <a href="https://labex.io" target="_blank" title="Go to the LabEx homepage"
      >Visit LabEx</a
    >
  </p>
</div>

Guarda el archivo por última vez. Ve a la pestaña "Web 8080" y pasa el ratón sobre el enlace "Visit LabEx". Debería aparecer un pequeño cuadro con el texto "Go to the LabEx homepage".

Resumen

¡Felicidades por completar el laboratorio! Has aprendido los fundamentos de la creación y personalización de enlaces en HTML.

En este laboratorio, practicaste cómo:

Usar la etiqueta <a> con el atributo href para crear enlaces externos.
Usar el atributo target="_blank" para abrir enlaces en una nueva pestaña.
Crear anclas de página internas usando href="#id" para la navegación dentro de una sola página.
Usar el atributo id para definir el destino de un enlace interno.
Añadir informativas informaciones sobre herramientas (tooltips) a tus enlaces con el atributo title para una mejor experiencia de usuario.

Estas habilidades son esenciales para construir sitios web navegables y fáciles de usar. ¡Sigue practicando para ser más competente en HTML!