HTML. Enlaces de hipertexto

Enlaces

En el código fuente HTML los enlaces se identifican mediante la etiqueta <a> y su atributo href, que contiene el URI del destino al que conduce el enlace. Los URI del destino pueden ser absolutos (http://www....) o relativos (con respecto al directorio actual).

Los enlaces de texto se muestran en los navegadores de color azul y subrayados.

<p>Enlace a la <a href="https://www.cdlibre.org/">página principal de cdlibre</a>.</p>

Enlace a la página principal de cdlibre.

<p>Logotipo de cdlibre: <a href="https://www.cdlibre.org/"><img src="../img/cdlibre-logo.png" alt="Logotipo de cdlibre" title="Logotipo de cdlibre" width="118" height="70"></a></p>

Logotipo de cdlibre:

Si en el atributo href se escribe simplemente el carácter almohadilla (#), casi todos los navegadores se desplazan al principio de la página (aunque creo que este comportamiento no está definido en ninguna recomendación).

<p>Este es un <a href="#">enlace al principio de esta página</a>.</p>

Destinos

Con relación a los destinos de los enlaces, podemos distinguir tres tipos de destinos:

• archivos (página web, imagen o cualquier otro tipo de archivo)
• directorios
• elementos dentro de una página web

En cada caso, la situación es ligeramente distinta:

• Si el destino es un archivo, es suficiente con conocer la dirección (URL) del archivo. Si el navegador puede mostrar el archivo, el archivo se mostrará en el navegador. Los navegadores pueden mostrar ciertos archivos directamente (por ejemplo, páginas web o imágenes) o mediante plug-ins (por ejemplo, archivos flash, pdf, etc.). Si el navegador no puede mostrar el archivo, el navegador preguntará al usuario qué quiere hacer con el archivo (guardarlo, elegir el programa con el que abrir el archivo, etc.)

  <p>Enlace a la <a href="https://www.cdlibre.org/otros/novedades.html"> página de novedades de cdlibre</a>.</p>
  

  Enlace a la página de novedades de cdlibre.

  

  <p>Enlace al <a href="https://www.cdlibre.org/img/cdlibre_logo.png">logotipo de cdlibre</a>.</p>
  

  Enlace al logotipo de cdlibre.

  

  <p>Enlace al <a href="../ejercicios/s3/s3-plantillas.zip">archivo .zip de un ejercicio</a> de estos apuntes</p>
  

  Enlace al archivo .zip de un ejercicio de estos apuntes

  
• Si el destino es un directorio, el servidor puede estar configurado para mostrar un archivo determinado (index.html, home.html, index.php, etc.), para mostrar el contenido del directorio, o incluso para rechazar la petición.

  <p>Enlace a la <a href="https://www.cdlibre.org/">página principal de cdlibre</a>.</p>
  

  Enlace a la página principal de cdlibre.

  

  <p>Enlace al <a href="https://www.cdlibre.org/consultar/catalogo/">catálogo de software de cdlibre</a>.</p>
  

  Enlace al catálogo de software de cdlibre.

  

  <p>Enlace al <a href="https://www.mclibre.org/consultar/htmlcss/html/">directorio de lecciones de html de estos apuntes</a>.</p>
  

  Enlace al directorio de lecciones de html de estos apuntes.

  
• Si el destino es un elemento de una página web (por ejemplo, un párrafo en el interior de una página web), es necesario identificar de forma única el punto de destino mediante el atributo id.

  En este caso, el atributo href contiene la dirección de la página, el carácter almohadilla (#) y el atributo id del destino. En caso de ser un enlace dentro de la misma página sólo se necesita el carácter almohadilla (#) y el atributo id del destino.

  <p>Enlace a <a href="https://www.cdlibre.org/otros/faq.html#descargado">una pregunta de la FAQ de cdlibre</a>.</p>
  

  Enlace a una pregunta de la FAQ de cdlibre.

  

  <p>Enlace al <a href="#ejemplo">párrafo siguiente</a>.</p>
  
  <p id="ejemplo">Este párrafo es el destino del enlace anterior.</p>
  

  Enlace al párrafo siguiente.

  Este párrafo es el destino del enlace anterior.

  

  ---

  En HTML 3.2 y anteriores los destinos se identificaban mediante la etiqueta <a> y el atributo name. En HTML 4.X y XHTML 1.0, los destinos se podían seguir identificando así, pero se recomendaba utilizar el entonces nuevo atributo id. En XHTML 1.1 se eliminó el atributo name de la etiqueta <a> y sólo se podía utilizar el atributo id para identificar los destinos. En HTML 5 también se eliminó el atributo name de la etiqueta <a> y sólo se podía utilizar el atributo id para identificar los destinos.

Enlaces no HTTP

Los navegadores son capaces de gestionar algunos tipos de enlaces no HTTP, aunque normalmente lo que hacen es redirigir la petición a otra aplicación del sistema operativo, por lo que se necesita configurar el navegador.

Un enlace con el atributo href con el valor mailto:dirección_de_correo_electrónico abre automáticamente el cliente de correo electrónico (Outlook, Thunderbird, Evolution, etc.) con un correo dirigido a la dirección indicada. El uso cada vez más extendido del correo web hace que esta opción sea un engorro más que una ayuda.

<p>Haciendo clic en este enlace se abrirá el cliente de correo para <a href="mailto:fulanito@example.org">enviar un correo a fulanito@example.org</a> (dirección ficticia).</p>

Haciendo clic en este enlace se abrirá el cliente de correo para enviar un correo a fulanito@example.org (dirección ficticia).

Contexto de navegación: Atributo target

El atributo target permite especificar el contexto en el que se resuelve el enlace. Los valores posibles son:

• _blank: el enlace se abre en una nueva pestaña
• _self: el enlace se abre en el mismo elemento que contiene el enlace (puede ser la ventana completa o un elemento contenedor como <object> o <iframe>). Por motivos de seguridad, si el elemento incrustado pertenece a un dominio distinto, sólo se mostrará si el servidor de dicho dominio lo autoriza (aclaración en ayuda de Firefox)
• _parent: el enlace se abre en el elemento de nivel inmediatamente superior al que contiene el enlace
• _top: el enlace se abre en el elemento del nivel más alto (es decir, la ventana del navegador)

<p>Esta página contiene un <a href="https://mclibre.org/" target="_blank">enlace a mclibre.org</a> que se abre en una nueva pestaña.</p>

<p>Esta página contiene un <a href="https://www.w3.org/" target="_self">enlace a w3.org</a> que se abre en el elemento que contiene esta página.</p>
<p>Como el sitio web w3.org está configurado para poderse abrir en este tipo de elementos, la página web SÍ que se mostrará.</p>

<p>Esta página contiene un <a href="https://mclibre.org/" target="_self">enlace a mclibre.org</a> que se abre en el elemento que contiene esta página.</p>
  <p>Como se trata del mismo dominio, aunque el sitio web mclibre.org NO está configurado para poderse abrir en este tipo de elementos, la página web SÍ que se mostrará.</p>

<p>Esta página contiene un <a href="https://www.cdlibre.org/" target="_self">enlace a cdlibre.org</a> que se abre en el elemento que contiene esta página.</p>
  <p>Como se trata de otro dominio y el sitio web cdlibre.org NO está configurado para poderse abrir en este tipo de elementos, la página web NO se mostrará.</p>

<p>Esta página contiene un <a href="https://www.w3.org/" target="_parent">enlace a w3.org</a> que se abre en el elemento que contiene el elemento que contiene esta página.</p>
<p>Como el sitio web w3.org está configurado para poderse abrir en este tipo de elementos, la página web SÍ que se mostrará.</p>

<p>Esta página contiene un <a href="https://www.w3.org/" target="_top">enlace a w3.org</a> que se abre en el elemento de nivel más alto al elemento que contiene esta página.</p>
<p>Como el sitio web w3.org está configurado para poderse abrir en este tipo de elementos, la página web SÍ que se mostrará.</p>