Creando hipervínculos

Los hipervínculos son elementos verdaderamente importantes. Son los que hacen que la web sea web. En este artículo aprenderemos la sintaxis necesaria para programar un vínculo y un catálogo de buenas prácticas para hacerlo.

Prerrequisitos: Estar familiarizado con HTML, véase Empezar con el  HTML. Aplicación de formato a textos en documentos HTML, según se expone en la sección Conceptos básicos de texto HTML.
Objetivos: Aprender a implementar un hipervínculo de forma efectiva y enlazar múltiples archivos.

¿Qué es un hipervínculo?

Los hipervínculos son una de las novedades más emocionantes que nos ofrece la web. De acuerdo que llevan formando parte de esta desde el principio, pero hacen que la web sea web: permiten enlazar nuestros documentos con cualquier otro documento (o recurso), hacer referencia a partes específicas de los mismos, podemos hacer las aplicaciones accesibles con una sencilla dirección web (al contrario de las apps nativas, que tiene que instalarse todo eso). Cualquier contenido web puede convertirse en un vínculo que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunte el enlace (URL.)

Nota: Una URL puede apuntar a ficheros HTML, ficheros de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que pueda mostrarse en la web. Si el navegador no sabe cómo manejar el archivo, nos preguntará si lo queremos abrir (en cuyo caso la tarea de abrirlo y manejarlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo queremos descargar (en cuyo caso podremos ocuparnos de él más tarde).

El sitio web de la BBC, por ejemplo, contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes zonas de su página web (funciones de navegación), zonas de acceso/registro (herramientas de usuario) y otras.

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

Anatomía de un enlace

Un enlace básico se crea incluyendo el texto (o cualquier otro contenido enlaces de bloque) que queramos convertir en un enlace en un elemento ancla <a>, dándole un atributo href (también conocido como target u objetivo) que contendrá la dirección web hacia dónde queremos que apunte el enlace.

<p>Creo un enlace a
<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
</p>

Este código producirá el siguiente resultado:

Creo un enlace a la página de inicio de Mozilla.

Añadir información de asistencia con el atributo title

Otro atributo que podemos añadir a los enlaces es el título (title); ha sido concebido para proporcionar información útil suplementaria sobre el destino, como el tipo de información que contiene la página o cuestiones que es necesario tener en cuenta sobre el mismo. Por ejemplo:

<p>Creo un enlace a
<a href="https://www.mozilla.org/es-ES/"
   title="El mejor lugar para encontrar información sobre la misión de Mozilla y el modo de contribuir">la página de inicio de Mozilla</a>.
</p>

Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):

Creo un enlace a la página de inicio de Mozilla.

Nota: El título de un enlace solo será visible al pasar el ratón por encima, lo que significa que los usuarios que naveguen usando los controles de sus teclados tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.

Aprendizaje activo: crea tu propio ejemplo de enlace

Es momento del aprendizaje activo: crea un documento HTML con tu editor de código (nuestra plantilla de aprendizaje te hará la tarea más llevadera).

  • En el cuerpo del HTML (body), añade uno o más párrafos o cualquier otro tipo de contenidos de los que ya conoces.
  • Convierte alguno de los contenidos en enlaces.
  • Incluye atributos de título (title).

Convertir bloques de contenido en enlaces

Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso elementos de tipo bloque de contenido. Si quieres convertir una imagen en un enlace, simplemente ánclala entre los elementos <a> y </a>.

<a href="https://www.mozilla.org/es-ES/">
  <img src="mozilla-image.png" alt="Logotipo de Mozilla que dirige a la página inicial de Mozilla">
</a>

Nota: Encontrarás mucho más sobre el manejo de imágenes en próximos artículos en esta web.

Un primer acercamiento a URL y referencias

Para comprender completamente dónde apuntan los enlaces, necesitas conocer las URL y las referencias. En esta sección encontrarás la información que necesitas sobre el tema.

Un localizador de recursos estandarizado (URL, de las iniciales en inglés Uniform Resource Locator) es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla en inglés está ubicada en https://www.mozilla.org/es-ES/.

Las URL utilizan las referencias para encontrar los archivos. Las referencias especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ver el directorio creating-hyperlinks.)

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

Al directorio raíz de esta estructura de directorios lo hemos llamado creating-hyperlinks. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo index.html y el archivo contacts.html. En una web real, index.html es el punto de entrada a la web, lo que se conoce como página de inicio.

Observamos también dos directorios dentro de nuestro directorio raíz que son: pdfs y projects. Estos además tienen un archivo en su interior: un archivo PDF (project-brief.pdf) y un archivo index.html, respectivamente. Observa que es posible tener dos archivos index.html en un proyecto sin problemas porque se encuentran alojados físicamente en ubicaciones diferentes de nuestra estructura de archivos. Muchos sitios web lo hacen. El segundo index.html será la página de inicio para la información relativa a los proyectos.

  • En el mismo directorio: Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html del nivel más alto) que apunte al archivo contacts.html, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo index.html desde donde lo queremos llamar. Por lo tanto, usamos la URL contacts.html. Veamos el código:

    <p>¿Quieres contactar con un miembro específico del personal?
    Encuentra los detalles en nuestra <a href="contacts.html">página de contactos</a>.</p>
  • Bajando en la estructura de subdirectorios: Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html de nivel más alto) que apunta a projects/index.html, debemos bajar hasta el directorio projects antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL projects/index.html:

    <p>Visita mi <a href="projects/index.html">página de inicio del proyecto</a>.</p>
  • Subiendo en nuestro sistema de directorios: Si ahora queremos incluir un hipervínculo dentro del archivo projects/index.html que apunta a pdfs/project-brief.pdf, hay que subir un nivel en nuestro sistema de directorios, para luego bajar dentro del directorio pdf. Para «Subir un nivel» utilizamos los dos puntos (..) por lo que usamos la URL ../pdfs/project-brief.pdf:

    <p>Un enlace a mi<a href="../pdfs/project-brief.pdf">resumen del proyecto</a>.</p>

Nota: Podemos combinar más de una instancia de estas características y generar URL más complejas, si es necesario, por ejemplo: ../../../complex/path/to/my/file.html.

Fragmentos de un documento

Es posible apuntar hacia una parte concreta de un documento HTML en vez a todo un documento. Para ello hay que asignar previamente un atributo id al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:

<h2 id="Dirección postal">Dirección postal</h2>

Posteriormente para hacer referencia a este id concreto, lo añadiremos al final de la URL precedido por una almohadilla. Veamos el ejemplo:

<p>¿Quieres mandarnos una letra? Aquí tienes nuestra <a href="contacts.html#Mailing_address">dirección postal</a>.</p>

También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra parte del mismo documento:

<p>La <a href="#Mailing_address">dirección postal de la empresa</a> se encuentra al final de esta página.</p>

URL absolutas y relativas

Dos nomenclaturas que nos encontramos en la web son URL absoluta y URL relativa:

URL absoluta: Hace referencia a una dirección definida por su ubicación absoluta en la web, que incluye el protocolo protocol y el nombre del dominio domain name. Por ejemplo, si se sube una página de inicio index.html a un directorio llamado projects que se encuentra dentro de la raíz de un servidor web, y el dominio del sitio web es http://www.example.com, se podrá acceder a la página desde http://www.example.com/projects/index.html (o simplemente http://www.example.com/projects/, ya que la mayoría de los servidores web solo buscan la página de inicio index.html para cargarla por defecto si no se les especifica otra en la URL.)

Una URL absoluta siempre apuntará a la misma dirección, sin importar desde dónde se utilice.

URL relativa: Hace referencia a una dirección que depende de la posición del archivo desde donde se utiliza. Son las que hemos visto en la sección anterior. Por ejemplo, si desde un archivo ubicado en http://www.example.com/projects/index.html queremos enlazar hacia un archivo PDF ubicado en el mismo directorio, la URL sería simplemente el nombre del archivo (por ejemplo: project-brief.pdf) no necesitamos más información para referenciarnos a él. Si el archivo PDF está situado en un subdirectorio dentro de projects llamado pdfs, la URL relativa es: pdfs/project-brief.pdf (la URL absoluta equivalente sería: http://www.example.com/projects/pdfs/project-brief.pdf).

Una URL relativa hará referencia a diferentes direcciones según dónde se encuentre el archivo desde el cual se utiliza. Por ejemplo, si movemos nuestro archivo index.html del directorio projects a la raíz del sitio web (el nivel más alto, no cualquiera de los otros directorios), la URL relativa pdfs/project-brief.pdf ahora hará referencia a http://www.example.com/pdfs/project-brief.pdf, en lugar de a http://www.example.com/projects/pdfs/project-brief.pdf.

Por supuesto, la ubicación del archivo pdfs/project-brief.pdf y del directorio pdfs no cambian de repente cuando mueves el archivo index.html; esto haría que tus enlaces apuntaran a un sitio equivocado y no funcionarían correctamente al hacer clic en ellos. Así que ¡hay que tener cuidado!

Buenas prácticas en el uso de los enlaces

Hay algunas buenas prácticas que debemos respetar cuando escribimos enlaces. Veamos cuáles son.

Claridad en las palabras

Es fácil rellenar de enlaces en una página sin más. Pero esto no basta. Hay que lograr que nuestros enlaces sean accesibles para todo tipo de lectores, sin importar el contexto o las herramientas que prefieran. Por ejemplo:

  • Los lectores automáticos saltan de enlace en enlace en la página y los leen todos de forma consecutiva.
  • Los motores de búsqueda utilizan los enlaces de texto para indizar los archivos buscados, por lo que es una buena idea incluir palabras clave al definir los enlaces de texto para describir de forma efectiva el sitio al que apuntan.
  • Los usuarios echan un vistazo rápido a la página y leen solo lo que les interesa, en lugar de leer todo el texto palabra por palabra, y sus miradas van directamente a las características destacadas de la página, como son los enlaces. Este tipo de usuarios encuentran útiles los textos descriptivos que estos contienen.

Veamos un ejemplo concreto:

Buen texto en un enlace: Descargar Firefox

<p><a href="https://firefox.com/">
  Descargar Firefox
</a></p>

Mal texto en un enlace: Pulsar aquí para descargar Firefox

<p><a href="https://firefox.com/">
  Pulsar aquí
</a>
para descargar Firefox</p>

Otras indicaciones:

  • No se debe repetir la URL como parte del texto. Las URL suenan horrible, y todavía suenan peor si el que las lee lo hace letra por letra.
  • No escribir «link» o «link a» o «enlace» o «enlace a» en el texto del enlace porque es redundante. Los lectores automáticos indican que hay un enlace al encontrarlo. Los usuarios también saben que hay un enlace, porque normalmente se suele cambiar el color del texto y se subraya (no hay que romper esta convención, porque los usuarios están acostumbrados a ella).
  • Redactar la etiqueta del enlace de la manera más breve y concisa posible. Los textos de enlace largos son especialmente molestos para los usuarios que utilizan lectores automáticos, porque tienen que escuchar todo el texto de la página.
  • Reducir las ocurrencias de copias exactas del mismo texto que apunten a lugares diferentes, porque los lectores automáticos los leen como una lista descontextualizada; varios enlaces etiquetados como «pulsa aquí», «pulsa aquí» y «pulsa aquí» pueden resultar confusos para los usuarios.

Utilizar referencias relativas siempre que sea posible

A partir de las indicaciones anteriores podemos llegar a pensar que es mejor utilizar referencias absolutas en todos los casos; después de todo, estas no se rompen cuando la página se traslada como ocurre con las referencias relativas. Sin embargo, hay que usar referencias relativas siempre que hacemos referencia a direcciones dentro de una misma página web (utilizaremos las referencias absolutas cuando hagamos referencia a páginas web externas):

  • Primero, porque la codificación es mucho más fácil leer. Las URL relativas suelen ser mucho más cortas que las absolutas, lo que hace que el código sea mucho más fácil de leer.
  • Segundo, resulta más eficiente utilizar URL relativas cuando es posible. Al utilizar una URL absoluta, el navegador comienza por la dirección real del servidor y hace un requerimiento al sistema de nombres de dominio DNS, a continuación se dirige a ese servidor y busca el archivo. En cambio, con una URL relativa, el navegador solo busca el fichero dentro del mismo servidor. Por lo tanto, si utilizamos URL absolutas en lugar de relativas, pedimos al navegador que haga constantemente trabajos extra, y el rendimiento es menos eficiente.

Indicación clara de los recursos no HTML

Cuando damos referencias a recursos para descargarlos (como documentos en formato PDF o Word) o para reproducidos (como archivos de audio o vídeo) o que tengan un efecto inesperado (una ventana emergente o una reproducción de Flash) hay que indicarlo para no confundir al usuario. Resulta bastante molesto, por ejemplo:

  • Si tienes una conexión con bajo ancho de banda, pulsas un enlace y comienza a descargarse un archivo pesado de forma inesperada.
  • Si no tienes instalado el reproductor Flash, pulsas un enlace y te conduce a una página que requiere Flash.

Veamos algunos ejemplos, para ver qué texto puede ser aconsejable en estos casos:

<p><a href="http://www.example.com/large-report.pdf">
  Descarga el informe de ventas (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Visiona el vídeo (el flujo de datos se abre en una pestaña independiente, calidad HD)
</a></p>

<p><a href="http://www.example.com/car-game">
  Juega al juego del automóvil (requiere Flash)
</a></p>

Utilizar el atributo de descarga (download) cuando se referencia una descarga

Si queremos hacer referencia a una descarga en lugar de a algo abierto por el navegador, disponemos del atributo download para proporcionar un nombre al archivo guardado. Veamos un ejemplo del enlace a la descarga de la versión para Windows de Firefox 39:

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Descárgate Firefox 39 para Windows
</a>

Aprendizaje activo: crear un menú de navegación

Para este ejercicio, deberás crear lo que se conoce como web multipágina: un menú de navegación con enlaces a distintas páginas. Esta una de la manera común de crear las páginas web. Usaremos la misma estructura de página en todas las páginas, incluida la que contiene el menú de navegación. Cuando los usuarios pulsen sobre los enlaces tendrán la sensación de que están en la misma página y que solo cambia el contenido que se muestra.

Tendrás que hacer copias locales, en el mismo directorio, de las cuatro páginas siguientes (comprueba el directorio navigation-menu-start para el listado completo):

A continuación:

  1. Añade una lista no numerada en el lugar adecuado de la página, que contenga los nombres de las páginas a las que enlazas. Un menú de navegación es normalmente una lista de enlaces (links), por lo que esto es correcto semánticamente.
  2. Convierte cada nombre en un enlace a su página.
  3. Copia el menú de navegación en cada una de las páginas.
  4. En cada página, elimina solo el enlace que hace referencia a sí misma (es confuso y no tiene sentido que una página se llame a sí misma, y la falta del enlace actúa como recordatorio de la página en la que se está en cada momento).

El ejercicio debería crear una página como la siguiente:

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

Nota: Si te encallas, o no estás seguro de haberlo logrado, comprueba el directorio navigation-menu-marked-up para ver la respuesta correcta.

Enlace a e-mail

Es posible crear enlaces o botones que, cuando se pulsan, abren un nuevo correo saliente en lugar de enlazar a un recurso o página. Esto se consigue con el elemento ancla <a> y el elemento mailto: seguido del esquema de la URL.

En su forma más básica, un enlace mailto: simplemente contiene la dirección de correo electrónico de los destinatarios. Por ejemplo:

<a href="mailto:nowhere@mozilla.org">Enviar correo electrónico a ninguna parte</a>

De hecho, incluso el atributo con la dirección de correo electrónico es opcional. Si lo quitamos (href y dejamos simplemente "mailto:", aparecerá una nueva ventana de correo saliente en el gestor de correo que no incluirá pre-escrita la dirección del destinatario. Esto es útil cuando queremos compartir enlaces que los usuarios puedan pulsar para enviar un correo electrónico y elegir un destinatario posteriormente.

Especificación de detalles

Además de la dirección de correo electrónico, se puede incluir otra información. De hecho, se puede incluir cualquier campo estándar contenido en el encabezado de cualquier mensaje en la URL mailto que se proporcione. Los más utilizados son el "subject" (asunto), "cc" (copia a) o "bcc" (copia oculta), y "body" (cuerpo del mensaje, que no es realmente un campo de cabecera, pero permite especificar un mensaje breve para el nuevo correo electrónico). Cada campo y su valor se especifican como un argumento del requerimiento.

Veamos un ejemplo que incluye estos campos:

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Enviar un correo electrónico cc, bcc, asunto y cuerpo
</a>

Nota: Los valores de cada campo deber tener codificación URL (es decir, sin caracteres no imprimibles, espacios o porcentajes percent-escaped). También observamos el uso del ampersand (&) para separar cada campo dentro del enlace mailto:. Esta notación es un estándar de los requerimientos URL.

A continuación otros ejemplos de utilización de enlaces mailto:

¡Pon a prueba tus habilidades!

Has llegado al final de este artículo, pero ¿puedes recordar la información más importante? Encuentra más ejercicios con los que comprobar que has retenido esta información antes de seguir adelante; consulta Pon a prueba tus habilidades: Prueba de conocimientos básicos de HTML.

Resumen

Eso es todo en cuanto a enlaces, ¡por ahora! Volveremos a ellos más tarde en este curso cuando comencemos a usar estilos. Lo siguiente en HTML, será aprender la semántica de texto para usar algunas características avanzadas/inusuales que nos serán utilidad. Formato de texto avanzado será la próxima parada.