[Indice]


Creación de enlaces (links)

El siguiente es sin duda el elemento más importante del HTML, ya que permite realmente "navegar" por uno o varios documentos, que pueden residir en cualquier parte, pareciéndonos que siempre estamos en el mismo; a esto se le llama hipertexto ya que con esta posibilidad, en realidad, nuestro documento puede ser infinito... En efecto, para la persona que está leyendo sobre un determinado tema, no hay diferencias ostensibles que le hagan notar dónde está el documento que lee. Para el lector, todo parece un mismo documento, cuando en realidad, probablemente el conjunto de lo que lee está repartido por medio mundo, o en un plano más modesto, el documento leído puede estar compuesto en realidad por varios cientos de páginas que "saltan" de unas a otras sin notarlo.

Todo esto lo consigue el elemento <A> (por Anchor, en inglés = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o sinplemente link (en inglés link=eslabón o enlace).

Pero seguramente te preguntarás qué es eso de un "link". Pues un link es un área de la pantalla, que puede contener una o varias palabras o una imagen, que es "sensible" al puntero del ratón, y al ponerlo sobre ella y pulsar el botón izquierdo el visualizador llamará a la página que tiene asignada el link. Habitualmente por defecto los visualizadores señalan un área linkada subrayándola, si es texto, o poniéndole un borde si es una imagen, ambas cosas en color azul. Por supuesto, eso se puede cambiar en las configuraciones de visualizador. Si no se desea que aparezca el subrayado para mejorar la estética, se puede parametrizar con una instrucción de estilo. Si decides eliminar el subrayado por defecto de los links, puede ser buena idea cambiarlo por otro tipo de efecto o indicación que facilite al lector el saber qué texto contiene un link, de lo contrario, posiblemente, no llegue a utilizarlos nunca. Generalmente, el visitante no se dedicará a "pasear" el ratón por toda la página buscando enlaces ocultos.

Se escribirá:

<A HREF="http://www.miservidor.es/mifichero.htm"> Link de prueba  </A>.

Y se vería así: Link de prueba

Si lo que se desea es que aparezca sin subrayado o de otro color, o ambas cosas, se puede recurrir a una instrucción de estilo. Así:

<A HREF="http://www.miservidor.es/mifichero.htm"
             style="color:red; text-decoration:none";> Link de prueba  </A>.
Y se vería así:   Link de prueba    (Esto puede que no funcione en algunos navegadores antiguos)

El elemento <A> tiene dos atributos: HREF y NAME.

En el ejemplo de arriba al atributo HREF se le asigna el valor que aparece entre comillas: "http://www.miservidor.es/mifichero.htm". El texto sobre el que se monta el enlace es Link de prueba y realiza un link con el fichero mifichero.htm que está en el servidor www.miservidor.es.

Esta forma de escribir la ruta del link de forma completa, se utiliza cuando hay que saltar de una máquina a otra, si el enlace es para otra página de nuestro propio servidor es suficiente escribir la ruta virtual corta: /mifichero.htm o bien: /otro_directorio/mifichero.htm según proceda.

Como has visto, el punto de enlace se realiza en el texto escrito antes del cierre del elemento </A>, pero también puede hacerse con una imagen cualquiera, que iría en lugar del texto, incluso puedes poner el texto junto con una imagen. Por ejemplo para hacer un link que nos lleve al índice desde una bola roja, se escribe:

    Ir al índice <A HREF="indice.htm"> <img src="bolaroja.gif"> </A>.
Y este sería el resultado:

Ir al índice

Al igual que el texto aparece subrayado en azul cuando forma parte de un enlace, los gráficos reciben un borde azul alrededor de toda la imagen, lo que a veces puede resultar poco estético. Esto también tiene solución, pero aquí se hace en la instrucción de la imagen:

    Ir al índice <A HREF="indice.htm"> <img src="bolaroja.gif" border=0>  </A>.
Y este sería el resultado:

Ir al índice

El valor de los atributos hay que escribirlos EXACTAMENTE como se deba. En el ejemplo anterior no funcionaría el link si escribiéramos www.miservidor.es en mayúsculas o con alguna otra diferencia, eso es un nombre de máquina y sería interpretado como OTRA máquina. Esto es aplicable a todos los parámetros: servicio (http://) servidor (www.miservidor.es) y fichero (mifichero.htm).
Estas precauciones son ineludibles en el caso de servidores montados en máquinas con sistema operativo UNIX. En el caso de que el servidor resida en una máquina con Windows NT o Windows 95/98, es indiferente. Si no se sabe el sistema que tiene la máquina, es mejor atenerse a la forma UNIX.

Dentro de los parámetros pasados a HREF, podrás ver que al principio pone http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios :

ServicioDescripciónEjemploEfecto
http://Servicios WWW<A HREF="http://www.uv.es/"> WWW</A>WWW
ftp://Servicios FTP<A HREF="ftp://ftp.uv.es/">FTP</A>FTP
news://Servicios NEWS<A HREF="news://news.uv.es/">NEWS</A>NEWS
mailto://Servicios E-mail<A HREF="mailto:jac@uv.es/">E-mail</A>E-mail
file:///C|Fichero local<A HREF="indice.htm/">Fichero</A>Fichero

Además de HREF, el elemento <A> puede tener otro atributo: TARGET. Se utiliza para ordenar la apertura de otra ventana del visualizador con la página que se desee. Se escribirá:

     <A HREF="indice.htm" TARGET="Ventana-2"> </A>
Esta instrucción mostrará la página indice.htm pero con otra ventana del visualizador, es decir tendremos lanzado el visualizador 2 veces.

Del mismo modo, el atributo TARGET puede utilizarse para salir de una pantalla compuesta de frames. En efecto, si estamos en una pantalla con, por ejemplo, dos frames, cualquier link invocado desde cualquiera de ellos, hace que la página llamada aparezca en ese mismo frame. Para volver a una pantalla "normal" sin frames, se puede escribir un link con la sintaxis siguiente:

     <A HREF="indice.htm" TARGET="_parent"> </A>
Existen otros valores para TARGET:

TARGET="_blank": Para que el enlace se muestre en una nueva ventana vacía. También puede darse un nombre cualquiera con el mismo efecto.
TARGET="_self": Para mostrar el enlace en la misma ventana o frame que lo referencia (valor por defecto).
TARGET="_top": El documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior, si existe.

Como se acaba de ver, el atributo HREF sirve para enlazar con otro documento, que puede estar en un servidor o ser un fichero local, pero que siempre se nos presentará desde la primera línea del mismo.
El atributo NAME se utiliza para definir algo así como "un punto de aterrizaje" en cualquier línea del documento de destino, de forma que nos aparecerá en pantalla desde la línea deseada y no desde el principio. Esto es muy útil cuando se trata de documentos largos divididos en secciones.

Se escribirá así:

En el documento activo:

<A HREF="http://www.miservidor.es/mifichero.htm#punto1"> Ir al punto 1</A>
En el documento destino:
<A NAME="punto1"></A> 
NAME también puede utilizarse para saltar de una línea a otra dentro de un mismo documento. Se escribirá así:

Dentro del documento activo En la línea de partida:

<A HREF="#punto1">Ir al punto 1</A> 
En la línea de destino
<A NAME="punto1"></A> 
Por ejemplo, si haces "clik" aquí con el ratón, saltarás al principio de esta página.

Como habrás visto en el cuadro de arriba, es posible enviar un e-mail desde un link con la instrucción: <A HREF="mailto:jac@uv.es">Enviar e-mail</A>. Con esta sintaxis se invoca al cliente de correo predeterminado para que abra una ventana con la dirección deseada ya escrita. Si además quieres que dicha ventana se abra con el asunto (subject) y el texto (body) ya escritos se puede conseguir así:

<A HREF="mailto:jac@uv.es?&subject=Asunto de prueba&body=Texto de prueba">Enviar e-mail</A>

De forma similar, se puede escribir un enlace para que invoque a una función de JavaScript. Esto es muy útil cuando se diseñan menús o contenidos dinámicos.
Por ejemplo, si escribes:

<a href="javascript:document.write('Prueba de JavaScript')">Prueba </A>

Se obtiene:   Prueba


Con los links, al igual que con los formularios, es posible moverse usando la tecla de tabulación, para conseguir que el enfoque salte de un link a otro en un cierto orden. Para ello se utiliza el atributo tabindex. Por ejemplo, pulsa la tecla "Tab":

Tablas   Imágenes   Body

Como puedes ver, los saltos en esta línea se han producido siguiendo la numeración indicada por los disintos tabindex, al resto de links se llega por orden de escritura. Se escribe:

<A HREF="tablas.htm" tabindex="2">Tablas</A>
<A HREF="imagen1.htm" tabindex="3">Imágenes</A>
<A HREF="body.htm" tabindex="1">Body</A>

Esto solamente funciona con versiones recientes de navegadores. Otro atributo reciente de los links es title que permite escribir una descripción del link sin necesidad de pulsar en él, simplemente poniendo encima el puntero del ratón. Por ejemplo:

<A HREF="tablas.htm" title="Saltar a la sección de tablas">Tablas</A>

Se obtiene: Tablas


Debes saber que...


[Indice]