LOS HIPERVINCULOS O LINKS

                                             LOS HIPERVINCULOS O LINKS

Teoría de los Enlaces (Hipervínculos) en HTML

1. ¿Qué es un Hipervínculo?

   • Un hipervínculo, o simplemente "enlace" (link), es un elemento fundamental de la World Wide Web. Permite a los usuarios navegar de un recurso web a otro con un simple clic.

   • Estos recursos pueden ser otras páginas web, secciones específicas dentro de la misma página, imágenes, archivos (como PDFs), direcciones de correo electrónico, etc.

2. La Etiqueta Clave: 

   • En HTML, los enlaces se crean principalmente con la etiqueta <a>.

   • La etiqueta <a> necesita (casi siempre) un atributo fundamental: href.

   • El contenido dentro de la etiqueta <a> (entre <a ...> y </a>) es lo que el usuario ve y puede hacer clic (puede ser texto, una imagen, o incluso otros elementos HTML).

3. El Atributo 

   • Este atributo es crucial. Especifica la URL (Uniform Resource Locator) o la ubicación a la que el enlace apunta.

   • El valor de href determina si el enlace es externo o interno.

4. Tipos de Enlaces Según el Destino (

   • a) Enlaces Externos:

     • Concepto: Llevan al usuario a un recurso que se encuentra en un sitio web diferente (otro dominio).

     • Sintaxis  Se utiliza la URL completa (absoluta) del recurso. Debe incluir el protocolo (http:// o https://), el nombre de dominio (ej: www.wikipedia.org) y, opcionalmente, la ruta específica a una página o archivo dentro de ese dominio (ej: /wiki/Canis_familiaris).

     • Ejemplo: href="https://www.google.com"

   • b) Enlaces Internos (Anclas o Identificadores de Fragmento):

     • Concepto: Llevan al usuario a una sección específica dentro de la misma página HTML en la que se encuentra. Son muy útiles para páginas largas o para crear índices y menús de navegación rápidos.

     • Cómo funcionan:

       1. Primero, necesitas marcar el destino dentro de tu página. Esto se hace añadiendo un atributo id único al elemento HTML al que quieres saltar (por ejemplo, un título <h2>, una <section>, un <p>, etc.). El valor del id debe ser único en toda la página.

          • Ejemplo de destino: <section id="seccion-gatos"> ... </section>

       2. Luego, en la etiqueta <a> del enlace, el atributo href debe comenzar con el símbolo de almohadilla (#) seguido exactamente por el valor del id del elemento destino.

          • Ejemplo de enlace interno: <a href="#seccion-gatos">Ir a la sección de Gatos</a>

     • Ejemplo: href="#inicio" (lleva al elemento con id="inicio" en la misma página).

5. Controlando Cómo se Abre el Enlace: El Atributo 

   • Este atributo es opcional. Determina dónde se abrirá el recurso enlazado cuando el usuario haga clic.

   • Los valores más comunes son:

     •  (Valor Predeterminado):

       • Concepto: Abre el enlace en la misma ventana o pestaña del navegador donde el usuario hizo clic. Reemplaza el contenido actual.

       • Cuándo usarlo: Generalmente para enlaces internos dentro de tu propio sitio web, para mantener al usuario en la misma "ventana" de navegación. Si omites el atributo target, este es el comportamiento que ocurre por defecto.

       • Ejemplo: <a href="pagina2.html" target="_self">Ir a Página 2</a> (o simplemente <a href="pagina2.html">Ir a Página 2</a>)

     • :

       • Concepto: Abre el enlace en una nueva ventana o pestaña del navegador (la decisión exacta depende de la configuración del navegador del usuario). La página original permanece abierta en su pestaña/ventana.

       • Cuándo usarlo: Muy común para enlaces externos, ya que permite al usuario visitar el otro sitio sin perder tu página. También útil para enlazar a documentos (como PDFs) que podrían interrumpir la navegación si se abren en la misma ventana.

       • Ejemplo: <a href="https://www.ejemploexterno.com" target="_blank">Visitar Ejemplo Externo</a>

       • Nota de seguridad/rendimiento: Por razones de seguridad (evitar phishing) y rendimiento, a menudo se recomienda añadir rel="noopener noreferrer" cuando se usa target="_blank", aunque para empezar, entender _blank es lo principal: <a href="..." target="_blank" rel="noopener noreferrer">...</a>.

6. Contenido del Enlace: Lo que el Usuario Clickea

   • a) Texto como Enlace:

     • Concepto: La forma más común. Simplemente colocas texto descriptivo entre las etiquetas <a> y </a>. El navegador generalmente mostrará este texto subrayado y/o en un color diferente (definido por el CSS) para indicar que es clickeable.

     • Ejemplo: <a href="#perros">Más sobre perros</a>

   • b) Imagen como Enlace:

     • Concepto: Puedes hacer que una imagen completa funcione como un enlace. Para ello, colocas una etiqueta <img> completa dentro de las etiquetas <a> y </a>.

     • Importante: La etiqueta <img> sigue necesitando sus atributos src (la fuente de la imagen) y alt (texto alternativo, crucial para accesibilidad)