Los Hiperenlaces (I)

Las anclas o hiperenlaces son una característica que nos va a permitir relacionar páginas entre sí, de tal modo que podemos organizar la información en diferentes pa´ginas HTML enlazadas que permiten al usuario seleccionar la opción que mas le interese en ese momento.

Los hiperenlaces pueden ser de diversos tipos y en este capítulo vamos a verlos. El hiperenlace puede hacer referencia aun punto determinado de la página (marcador) que lo contiene, a otra página HTML o a un punto determinado de otra página HTML. En estos dos últimos casos además, la página de destino puede estar o no en el mismo servidor que contiene el ancla o en otro distinto. Así, podemos decir que tenemos hiperenlaces a un mismo documento, a otros documentos y tambien hiperenlaces relativos a una base y enlaces a contenidos especiales.

Como ya comentamos, los hiperenlaces suelen aparecer subrayados y con un color diferente al texto. La etiqueta que define un hiperenlace es <a> y disponemos de la etiqueta <base> para definir la localización de las páginas a las que se haga referencia a través de un hiperenlace relativo. Todo aquello que aparece entre las etiquetas <a> y </a> en una página HTML es considerado un enlace. Los hiperenlaces mas frecuentes y usuales son textos o imágenes.

Hiperenlaces a un mismo documento

Si lo habeís observado cuando hayaís navegado por la Red, la inmensa mayoría de hiperenlaces se han utilizado para hacer referencia a una página distinta de la que le contiene. Es lo usual. Nosotros ahora vamos a utilizar el hiperenlace para hacer referencia a un determinado punto dentro del mismo documento. Algo así como que si pinchas en el texto del final de la frase verás el efecto que produce: PINCHA AQUI. Lo que ha ocurrido es que hemos creado dos hiperenlaces en el mismo documento HTML (el que nos ha desplazado al final de la página y el que nos ha hecho regresar al punto de partida). Además de los dos hiperenlaces he tenido que crear dos destinos, que llamamos "marcadores", es decir, he seleccionado un determinado punto de la página al que le puesto un nombre para que el hiperenlace cuando sea pinchado sepa adónde debe ir.

El hiperenlace hace alusión a un marcador o nombre de destino, cuando es seleccionado ese hiperenlace el navegador obtiene el nombre, lo busca en el resto del documento y una vez hallado el destino identificado con ese nombre muestra la página a partir de éste como hemos comprobado en nuestro ejemplo anterior. La manera de definir esto, el hipernenlace a un mismo documento, es como sigue:

Para la referencia: <a href="#nombre del marcador">texto del enlace</a>

Para el destino (marcador): <a name="nombre">texto del destino</a>

En ambos elementos hemos utilizado la etiqueta <a>. Como podeís ver en la definición de ambos elementos, en el caso de la referencia el nombre al que hace alusión siempre va precedido del símbolo (#) almohadilla mientras que el de destino no. Os hago constar que no tenemos limitación de incluir cuántas referencias a un mismo documento queramos, salvo los que la lógica os indique. La utilidad de este tipo de enlaces es, entre otras, para cuando utilizamos documentos muy extensos que hacen referencias a distintos apartados o capitulos del mismo lo que permite al usuario hacer una navegación mas rápida y eficaz. Tambien podemos incluir varias referencias al mismo marcador (marca destino). Hacer el siguiente ejercicio y veremos aun mas claramente como actúa el hiperenlace en un mismo documento y todo lo que hemos explicado.

El resultado de este ejercicio lo vereís mejor en vuestro navegador. En las imágenes inferiores vereís que la primera (la de la izquierda) corresponde a la parte superior del documento. En la segunda, la continuación del documento, vemos el resultado tras haber pinchado en "Photoshop" en la primer imagen. el documento es el mismo, pero el navegador nos ha desplazado al marcador que el hiperenlace tiene en "photoshop". Tambien podemos volver al inicio del documento desde cualquiera de los apartados pues para eso hemos puesto un marcador ("volver al temario del curso") y un hiperenlace al mismo en varios lugares del documento.

Hiperenlaces a otro(s) documento(s)

Los hiperenlaces a otros documentos es el modo mas habitual. A diferencia del anterior, este permite estructurar la información en diversas páginas (y no solo en una, con el consiguiente problema de carga en el navegador y de trabajo arduo) lo que facilita la navegación al usuario y un mejor ordenamiento a nosotros. La etiqueta a utilizar es la misma <a>. La variación con respecto al anterior ancla o hiperenlace es como sigue:

<a href=destino>texto de enlace</a>

Analicemos esto. El atributo href (abreviatura de hypertext reference=referencia hipertexto) es siempre ABSOLUTAMENTE NECESARIO en la definición de un hiperenlace. Si no lo utilizamos, los navegadores no entenderán la etiqueta <a> como un hiperenlace y darán error. El valor que se le da a este atributo es lo que permite a los navegadores identificar la página que debe cargar si el usuario pincha en el texto de enlace. El valor que se puede poner puede ser una dirección ABSOLUTA, RELATIVA o alguna de las dos seguida de #nombre.

Comenzaremos por las direcciones absolutas. Llamamos dirección absoluta a aquella que está formada por el nombre del servidor web que mantiene la página destino más el nombre de la página destino.

Para ver esto vamos, en el ejercicio siguiente, a crear cinco páginas estructurando la información del ejemplo anterior. Todos los hiperenlaces que haremos contienen direcciones absolutas. Se supone que el servidor Web que mantiene estas páginas es "www.miservidor.org" y que los ficheros que contienen esas páginas están en el directorio "lecciones_curso_html/Temarios". Vamos a crear primero las páginas y luego veremos los resultados.

Página 1: portada.html

Página 2: lenguaje.html

Página 3: dream.html

Página 4: photo.html

Página 5: draw.html

El resultado de todas éstas páginas será el de la organización de la información de un temario de un curso en varias páginas HTML relacionadas entre sí a través de hiperenlaces. Veamos como quedarían:

Al acceder a una página mediante un hiperenlace, los navegadores nos mostrarán la página desde el principio. Si lo que queremos es que se acceda a una determinada parte de la página destino el valor que se asignará al atributo href será como sigue:

que si hubieramos utilizado en nuestro ejercicio de ejemplo volveríamos, desde cualquier página, a la página de portada a un marcador al que hubieramos llamado "#nombre". Quedaría así:

La dirección de la página puede ser absoluta o relativa y "#nombre" identificará el punto de la página destino al que queremos que acceda. Obviamente, en la página destino deberemos antes haber puesto el marcador de destino tal y como hemos hecho para los enlaces locales (<a name="nombre">texto del destino</a>). Así lograremos que cuando se pinche con el ratón en el hiperenlace, el navegador solicitará la página de destino (que la identificará en la dirección de página) y una vez encontrada buscará en ella el marcador (identificado como "#nombre"). Cuando lo encuentra no smuestra la página destino a partir de ese punto.