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

Deja un comentario