HTML: Hiperenlaces 2

Puntos de fijación. Anclas

Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al apartado deseado, en lugar de ir al comienzo del documento.

Para ello se utilizan las anclas, o puntos de fijación, muy útiles a la hora de crear índices.

Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales.

Por ejemplo, para insertar un punto de fijación delante del siguiente texto:

Texto con ancla

Hay que escribir:

<a name="miancla1"></a>Texto con ancla

Como puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y que sin mirar el código no hay nada que indique que delante del texto haya un ancla.



Teniendo en cuenta que el documento actual se llama t_4_3.htm, y que el ancla anterior se llama miancla1, podríamos crear un enlace que nos llevara directamente a la línea de texto en la que se encuentra el ancla.

Por ejemplo:

Enlace al ancla

Hay que escribir:

<a href="t_4_3.htm#miancla1">Enlace al ancla</a>

Si pulsas sobre el enlace verás como se vuelve a cargar el documento actual, pero en lugar de cargarse desde el principio, la primera línea de texto será la línea en la que hemos insertado el ancla.

Cuando el ancla se encuentra en el mismo documento que el enlace, como ocurre en este caso, podemos prescindir de poner el nombre de la página en el atributo href.

En el ejemplo anterior podríamos haber escrito:

<a href="#miancla1">Enlace al ancla</a>

Otros tipos de enlaces

Existen otros tipos de enlaces que no conducen a otra página web, los veremos a continuación:

Correo electrónico: Abre la aplicación Outlook Express para escribir un correo electrónico, cuyo destinatario será el especificado en el enlace. Para ello la referencia del vínculo debe ser "mailto:direcciondecorreo".

Por ejemplo, para insertar un enlace que permita enviar un correo electrónico, tal como este:

envianos un email

Hay que escribir:

<a href="mailto:ejemplo@gmail.com"> envianos un email</a>

Después de hacer clic en el enlace se abrirá el Outlook Express (si el usuario lo tiene instalado) con la pantalla para redactar un nuevo mensaje y con el campo destinatario rellenado con la direcciondecorreo.

Podemos hacer que esté rellenado algún campo más como es el asunto. En este caso habría que escribir:

<a href="mailto: ejemplo@gmail.com?subject=el asunto del mensaje">e-mail</a>

Vínculo a ficheros para descarga: El valor del atributo href normalmente será una página web (con extensión htm, html, asp, php...) pero también puede ser un fichero comprimido, una hoja de Excel, un documento Word, un documento con extensión pdf.

Cuando el enlace no es a una página Web nos aparecerá el cuadro de diálogo que seguro habrás visto alguna vez en el que el navegador le pide al usuario permiso para descargar el fichero en su ordenador.

El navegador reconoce algunas extensiones como asociadas a un determinado programa (por ejemplo la extensión .doc está asociada al programa Word, .pdf al programa Acrobar Reader, .xls al programa Excel, etc.) en este caso en el cuadro de diálogo aparece una nueva opción, la de abrir el fichero sin descargarlo en el disco duro del usuario.

Para nombrar el fichero podemos utilizar según el caso, una referencia externa, una referencia relativa al sitio o una referencia relativa al documento.

Por ejemplo, en la carpeta donde se encuentra esta página tenemos el fichero Word carta.doc y queremos que nuestros visitantes puedan visualizar e incluso descargar el fichero en su disco duro, en este caso definiremos el enlace:

haz clic aquí para descargarte el fichero

De la siguiente forma:

<a href="carta.doc" tarjet=_blank >haz clic aqu&iacute; para descargarte el fichero</a>

En este caso hemos utilizado una referencia relativa al documento ya que la carta se encuentra en la misma carpeta que nuestra página.

Vínculo vacío: Al pulsar sobre un enlace vacío no se abre ninguna página ni archivo, pero el formato es el mismo que el de cualquier otro enlace. El vínculo debe ser el símbolo almohadilla "#".

Por ejemplo, para insertar el enlace vacío:

vinculo vacio

Habría que escribir:

<a href="#">vinculo vacio</a>

Este tipo de enlace resulta útil para trabajar con comportamientos javascript.