HTML – Hiperenlaces titulados

Objetivo: recomendar el uso del atributo title para facilitar información útil en un hiperenlace.

Todo comenzó con el elemento <img>. Esta etiqueta HTML siempre ha dispuesto, tradicionalmente, de un atributo, alt, en el que indicábamos información adicional que los navegadores mostraban en el caso de que, por la razón que fuera, no se llegara a cargar la imagen.

Este tipo de funcionalidad extra se ha demostrado muy útil en muchos más elementos, además de en <img>, hasta el punto de que un buen número de ellos dispone hoy día de un atributo, denominado title, para titular escuetamente la función del elemento. El texto que facilitemos a ese atributo podrá ser empleado por los navegadores a la hora de visualizar (o incluso escuchar) la página. Además, title suele gustar bastante a los robots que se dedican a escudriñar las páginas por la red, por lo que un uso adecuado puede ayudarte a mejorar el posicionamiento de tu página en un buscador.

El propio elemento <img> dispone también de un atributo title, pese a contar ya con alt. La diferencia entre ambos suele prestarse a confusión.

Nuestros potentes hiperenlaces con <a> no podían ser menos, de modo que en su colección de atributos permitidos incluyen también title.

Observa el siguiente código HTML:

Este es el <a href="http://elclubdelautodidacta.es/wp/indice-html/" title="Índice completo de la categoría HTML">índice completo</a> de artículos sobre HTML.

Este es su efecto:

Este es el índice completo de artículos sobre HTML.

Ahora, sin hacer clic sobre el enlace, posiciona simplemente el ratón sobre él. Verás que te aparece un texto emergente, junto al puntero, que reza Índice completo de la categoría HTML.

Interesante, ¿verdad? Ahora ya sabemos qué podemos esperarnos al otro lado antes de hacer clic en el enlace, algo que no siempre resulta obvio. Por ejemplo, fíjate en esto otro:

Para acceder al índice sobre HTML pulsa aquí.

Ignorando el texto previo, la palabra hiperenlazada (“aquí”) no guarda relación semántica con el destino del hiperenlace. Naturalmente, en la barra de estado nos aparecerá, normalmente la dirección a la que apunta, pero aún así puede no ser perfectamente explicativa. El atributo title identifica claramente el destino, como puedes comprobar dejando el ratón sobre el enlace.

De todos modos, procura evitar un uso como el anterior. Intenta, en la medida de lo posible, que el texto disparador del hiperenlace, el que aparece subrayado, que es el que colocamos entre las etiquetas <a> ... </a> guarde relación semántica con el destino, tal como hicimos en el primer ejemplo.

Y, por supuesto, utiliza title siempre.

Javier Montero Gabarró


HTML – Hiperenlaces titulados


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta


Índice completo de artículos relacionados con HTML.

HTML – Hiperimágenes saltarinas

Objetivo: aprender el código HTML necesario para crear un hiperenlace a partir de una imagen.

Eh Hipertexto saltarín vimos el secreto de la magia de la web que permitía tejer una red de contenidos enlazados. El elemento <a> era el responsable de esa magia.

Hagamos un breve resumen: entre las etiquetas de apertura y cierre, <a> ... </a> facilitábamos el texto que activaría el salto cuando el usuario hiciera clic sobre él (que suele visualizarse subrayado). El atributo href contenía la dirección a la que se saltaría. Por ejemplo, una línea como la siguiente:

Este es el índice de artículos relacionados con HTML.

se generaría del siguiente modo:

Este es el <a href="http://elclubdelautodidacta.es/wp/indice-html/">índice</a> de artículos relacionados con HTML..

Quiero plantear hoy la siguiente cuestión: ¿y si, en vez de una palabra o frase, queremos que el activador del salto sea una imagen?

Por ejemplo, fíjate en la oveja experta en HTML que aparece a continuación, pillada en el momento en el que se disponía a darse un homenaje en forma de patatas bravas. Si haces clic sobre ella se te abrirá una página con el índice de artículos relacionados con HTML.

¿Cómo se hace eso en HTML?

La respuesta ya la sabes, aunque no lo creas:

1) Sabes cómo referenciar imágenes.

2) Sabes que lo que esté entre las etiquetas <a> ... </a> será el activador del hiperenlace.

Por lo tanto, si quieres que el activador sea una imagen, coloca el código que la referencia entre las etiquetas <a> ... </a>.

Este es el código que mostraría la imagen:

<img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" />

Para que actúe de hiperenlace, la situamos entre <a> ... </a>:

<a><img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" /></a>

Finalmente, introducimos la dirección de destino (el índice con todos los artículos de HTML) como valor del atributo href dentro de la etiqueta de apertura <a>:

<a href="http://elclubdelautodidacta.es/wp/indice-html/">
<img src="http://elclubdelautodidacta.es/wp/wp-content/uploads/2012/06/ECDA-HTML-2.jpg" />
</a>

Así de sencillo…

Javier Montero Gabarró


HTML – Hiperimágenes saltarinas


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta

HTML – Hipertexto saltarín

Imágenes en HTML - El títuloPuede que ahora, con páginas webs tan elaboradas e interactivas, no te des cuenta… Pero, sin lugar a dudas, el elemento distintivo de una página web siempre ha sido esa capacidad de enlazar contenidos a través de los hiperenlaces.

Si quieres aprender a generar esos textos subrayados que te hacen saltar a otra página cuando haces clic sobre ellos, sigue leyendo…

Para crear un hiperenlace, necesitamos presentar a un nuevo elemento. Apréndetelo bien, pues con él saltaremos al hiperespacio:

<a> ... </a>

Supongamos que queremos escribir un párrafo como el siguiente:

“Este es un ejemplo de lista con múltiples niveles de anidación en HTML.”

El primer paso consiste en escribir entre ambas etiquetas el texto que queremos que aparezca subrayado, que será el que nos invitará a hacer clic sobre él para transportarnos. En nuestro caso:

<a>lista con múltiples niveles</a>

A continuación debemos indicar a dónde saltaremos. Para ello, el elemento <a> dispone del atributo href (de hypertext reference), al que facilitaremos, entre comillas, la URL de destino.

Búscalo dentro de la etiqueta <a> de apertura y observa el texto desde el que se activará entre ambas.

<a href="http://dl.dropbox.com/u/4631191/blog/html/listas-anidadas-2b.html">listas con múltiples niveles</a>

En este ejemplo, hemos indicado la URL absolutamente, pero también podríamos haberlo hecho relativamente a la página actual:

href="python.html"

Enlazaría a la página python.html existente en el mismo directorio en el que se halla la página actual.

href="programacion/python.html"

Enlazaría a la página python.html que existe dentro de la carpeta programacion que hay en el mismo directorio en el que se encuentra la página actual.

href="../programacion/python.html"

Como lo anterior, pero en este caso la carpeta programacion existe no en el directorio actual, sino en el que está por encima. Los dos puntos .. representan al directorio padre.

Y eso es todo, de momento. En sucesivas entregas iremos sacándole más punta al elemento <a>. Ahora permíteme que practique lo aprendido poniendo un hiperenlace en la firma…

Javier Montero Gabarró


HTML – Hipertexto saltarín


El texto de este artículo se encuentra sometido a una licencia Creative Commons del tipo CC-BY-NC-ND (reconocimiento, no comercial, sin obra derivada, 3.0 unported)


El Club del Autodidacta