5.7 - Hiperenlaces

Hiperenlaces

     Es la utilidad básica del hipertexto, permite indicar zonas de texto o imágenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual.

     Para definir un hiperenlace podemos utilizar cualquier elemento HTML, no debe ser texto necesariamente, podemos usar, cabeceras (<Hn>), cualquiera de los estilos, una imagen, etc .... Un hiperenlace igualmente podrá definirse dentro de cualquier elemento HTML: listas, párrafos de texto, tablas, formularios.

     El texto del hiperenlace aparece normalmente resaltado sobre el texto normal, en azul y subrayado, en el caso de las imágenes, si tienen definido un borde este aparecerá resaltado en color azul. La mayoría de los navegadores cuando la zona por la que pasa el cursor es sensible, este cambia de aspecto indicándolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona. Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces.

     El texto que define el hiperenlace debe ser clarificador sobre el documento al que referenciamos, debemos evitar referencias especificas que hagan al texto poco legible. Igualmente deberá concordar con el texto del párrafo donde se englobe, se debe evitar el uso de pulse aquí.

     Por ejemplo:

Puede encontrar mas información sobre vacas pulsando aquí

      se podría sustituir por:

Disponible más información sobre vacas.

     El usuario que lea el texto ya sabrá al verlo resaltado que puede pulsar ahí.

<A HREF=...> Hiperenlace

     Son los enlaces con documentos externos al actual. En este caso se indicará una URL que definirá el documento al que se accede si se sigue el enlace. La forma de indicarlo será:

<A HREF="URL a la que se accede">Texto del Hiperenlace</A>

     El texto indicado entre las etiquetas de comienzo y de fin se presentará de forma resaltada y en el caso de seleccionar este texto el documento actual cambiará por el especificado en la URL.

     Igualmente se puede indicar una imagen como enlace, en este caso entre las etiquetas del hiperenlace indicamos la inclusión de la imagen, también dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace. Un ejemplo sería:

<A HREF="URL a la que se accede"><IMG SRC="Imagen"> y también texto</A>

     En este caso aparecerá la imagen con el borde resaltado para indicar que es un hiperenlace.

     Ademas de enlaces con el servicio http podremos utilizar cualquiera de los servicios de internet que se puede expresar en una URL. Es posible por tanto indicar enlaces a servidores FTP, servidores GOPHER o de NEWS, indicando como URL aquella que identifica al servidor que queremos acceder.

     Es importante indicar el nombre completo de la maquina a la que se accede, es decir el nombre y el dominio. Si se indica www, las maquinas de la red local si podrán localizarlo, pero para maquinas externas la referencia podría ser a otra maquina. Por tanto se debe indicar www2.uca.es para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente.

     Utilizaremos los hiperenlaces para dividir de forma conveniente la información. Hay que evitar los documentos excesivamente largos, estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces, a partir de un índice.

URL absolutas y relativas

     Para definir la URL podemos utilizar direcciones absolutas o relativas. Por direcciones absolutas entenderemos la URL completa, es decir, http://maquina.dominio/camino/fichero.html. En el caso de las relativas todo lo que no pongamos de la URL se tomará de la URL del documento que contiene el hiperenlace, por ejemplo si no indicamos el servidor, se considerará el actual y si solo indicamos un fichero html se considerará que se encuentra en el servidor y directorio del documento que lo referencia.

     Una URL relativa comenzará siempre por un nombre de directorio o por un fichero, ya que en este caso se asume que el servicio y el servidor - (http://maquina.dominio) - es el mismo del documento actual.

     Puede comenzar de alguna de las siguientes formas:

Algunos ejemplos serían:

Ejemplos
Nos encontramos en el documento http://www.uca.es/visita/cadiz.html y en este se encuentran los siguientes hiperenlaces.
URL
rela
tiva
<A HREF="../internet/internet.html"> ..
URL
que se
activa
http://www.uca.es/internet/internet.html
Explica
ción
En este caso se indica la URL completa, por tanto no es relativa y no se podrá utilizar ningún dato de la posición actual.
URL
rela
tiva
<A HREF="/internet/internet.html"> ..
URL
que se
activa
http://www.uca.es/internet/internet.html
Explica
ción
En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace: www.uca.es y al comenzar la directorio por / se indica que este se toma desde la raíz del servidor, no siendo valido en este caso ningún dato del directorio actual.
URL
rela
tiva
<A HREF="bahia/cadiz.html"> ...
URL
que se
activa
http://www.uca.es/visita/bahia/cadiz.html
Explica
ción
En este caso el directorio se toma desde el directorio actual al no comenzar con la barra "/". Como comienza con un directorio, se considera que este se encuentra a partir del directorio donde está el documento actual
URL
rela
tiva
<A HREF="bahia.html"> ...
URL
que se
activa
http://www.uca.es/visita/bahia.html
Explica
ción
En este caso solo se indica un fichero HTML, por tanto se considera que este fichero se encuentra en el mismo directorio del documento que los referencia. Considerando por tanto el mismo servidor y el mismo camino, pero distinto directorio.

     Es una buena costumbre utilizar direcciones relativas, además de ahorrar escritura, permite que la página pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces, haciendo por tanto al documento más portable.

     Como se vio en el capitulo dedicado a la cabecera de un documento HTML, la etiqueta BASE indica la dirección por defecto en los enlaces, esto tendrá efecto en las URL relativas, caso de indicarse se considerará esta como dirección base y no la actual del documento.

<A NAME=...> Elemento Ancla

     Sirve para indicar puntos de un documento que son accesibles directamente. Marcará las distintas zonas de un documento. La forma de indicarlo es:

<A NAME="Id. del ancla">Texto del ancla</A>

     A cada ancla se le dará un nombre distinto que será el que se utilice luego para referenciarlo. El texto que define a la etiqueta no tendrá ningún tipo de resalte, y solo se utiliza como punto de destino del hiperenlace.

     La forma de especificar un enlace que acceda a un punto determinado del mismo documento es:

<A HREF="#Id. del ancla">Texto del enlace al ancla</A>

     Será un enlace a la zona del documento actual que se había marcado con la etiqueta indicada. También es posible acceder a un ancla de un documento externo de la forma:

<A HREF="Dirección URL#Id. del ancla">Texto del enlace al ancla</A>

     De esta forma se podrá acceder a puntos determinados o secciones de un documento de forma directa.

     La utilidad principal es la creación de índices en documentos largos, al comienzo del documento se especifica el índice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define.