Hipervínculos o enlaces

El elemento más importante que tiene una página web es el hipervínculo. Estos permiten enlazar el documento actual con otra página para que el usuario pueda moverse entre los distintos apartados de un sitio web.

Esto es lo que hace diferente la página de un libro con la página de un sitio web. Normalmente un libro lo recorremos en forma secuencial, es decir, una detrás de otra de forma ordenada; pero en un sitio web podemos disponer los enlaces que deseemos en las páginas que deseemos, generando así distintas formas o caminos de poder acceder a los contenidos.

Normalmente, el navegador, al encontrar la etiqueta de hipervínculo, muestra un texto subrayado, y al hacer clic con el ratón sobre éste, se cargará el destino indicado en dicho hipervínculo.

La etiqueta de hipervínculo es <a> y tiene cláusula de apertura y de cierre.

Hipervínculo a otra página del mismo sitio

Un hipervínculo a otra página del mismo sitio tiene la siguiente sintaxis:

<a href="pagina2.html">Noticias</a>

Lo que se encuentra entre la apertura y el cierre es el texto que aparece visible al usuario en la página y lo llamamos texto ancla o anchor text.En el ejemplo, la palabra Noticias.

Uso de atributos en HTML

Lo nuevo que aparece en este elemento es un atributo. Los atributos se incorporan dentro de la cláusula de apertura y tienen un valor que se asigna con el signo = y se expresa normalmente entre comillas.

En el ejemplo anterior, el atributo es href y su valor es pagina2.html.

El atributo href sirve para especificar el destino del enlace, es decir, la página que se abrirá tras hacer clic en el mismo.

Enlace de correo electrónico

Un enlace de correo electrónico es aquel cuyo destino es una dirección de email. Cuando el usuario hace clic sobre un enlace de este tipo, se abrirá el gestor de correo electrónico predeterminado en el dispositivo, por ejemplo, Outlook o Thunderbird.

Para crear un enlace de correo agregamos la palabra reservada mailto: delante de la dirección de destino en el atributo href:

<h2>Buzón de sugerencias</h2> <a href=”mailto:bigboss@diegocmartin.com”>Enviar email</a>

Adicionalmente podemos agregar otros campos al mismo enlace para que, por ejemplo, aparezca pre cargado el asunto. Esto se hace agregando ? al final de la dirección de correo y & para separar cada uno de los parámetros:

<a href="mailto:diego1@gmail.com?
subject=aquí el asunto&cc=diego2@gmail.com&
bcc=diego3@gmail.com">Enviar mail.</a>

Con el parámetro subject aportamos el asunto y con los parámetros cc y bcc a otros destinatarios en copia y en copia oculta respectivamente.

Enlaces dentro de la página

Otra posibilidad que nos brinda el HTML es disponer una referencia dentro de la página para poder posteriormente crear un hipervínculo a dicha referencia.

Es una práctica común cuando queremos desplazarnos dentro de una página muy larga. Actualmente están muy de moda, por ejemplo, para eventos puntuales, los sitios web llamados “one page” que sólo tienen una página y el menú principal nos lleva a los diversos apartados de la misma.

En versiones anteriores de HTML, la sintaxis para definir un ancla era:

<a name="nombreancla"></a> 

En HTML5 esta técnica está en desuso, recurriendo al uso del atributo id.

El tributo id sirve para declarar un identificador único al elemento dónde lo coloquemos y le podemos asignar como valor el nombre que queramos. Así, un id en un h2 quedaría:

<h2 id="introduccion">Introducción</h2>

No debemos confundir un id con un hipervínculo, un identificador id, se define en una parte de la página a la que queremos acceder a partir de un hipervínculo.

La sintaxis para ir a un ancla desde un hipervínculo es la siguiente:

<a href="#nombreid">Texto del enlace</a>

Vemos que en la propiedad href indicamos el nombre del id precedido de #.

Para escribir el símbolo del numeral o almohadilla con un teclado español, pulsamos la tecla Alt Gr + el número 3 encima de la letra E.

Sería genial leer tus experiencias y consejos sobre esto. Comenta y suscríbete a los comentarios para mantenerse al día en la conversación.

Por favor, si te ha gustado, ¡comparte!. Me será de gran ayuda. ¡¡Gracias!!