Conexiones de hipertexto o enlaces

Además de los muchos estilos y capacidades de presentación de texto que nos ofrece HTML para estructurar el documento en sí, disponemos de la etiqueta <A> que nos permite definir relaciones entre diferentes objetos y estructurar todo un conjunto de documentos para crear una unidad lógica. La facilidad para definir este tipo de enlaces es una de las razones de la potencia y versatilidad de HTML.

Los enlaces en HTML se expresan rodeando con la etiqueta <A>...</A> el objeto, que puede ser una palabra, frase o imagen, la cual nos enlaza con otra sección del mismo documento, otro documento HTML, mostrar una texto plano (TXT), una imagen (GIF o JPG), un sonido (AU o WAV), un video (AVI), o cualquier otro objeto que pueda ser manejado desde nuestro Windows. Además se puede enviar mensajes de corre y transferir archivos empaquetados (ZIP).

No importa que tan cerca o lejos esté el enlace, siempre sera igual de sencillo ir a él. Si queremos referirnos a otro lugar del mismo documento solo hay que poner HREF=#top o el nombre de un destino predefinido con el atributo ID= introducido en cualquier etiquetas. Si se trata de otro documento en el mismo directorio usaremos HREF=archivo.htm, si se trata de otro directorio o servidor solo hay que incluir la dirección completa URL incluyendo el protocolo.

Después de hacer clic en un enlace, el color del mismo permanece modificado durante 24 horas, para recordarte que el enlace ha sido visitado.

1. Anclas <A>...</A>

Este es un etiqueta usado para establecer una conexión de hypertexto o enlace. Acepta muchos parámetros opcionales, pero solo es obligatorio el HREF= o NAME= según el caso.

1.1. Ancla destino - NAME

Si está presente permite a esta ancla ser destino de una conexión de hypertexto, al cual debe ser referido con la cadena especificada, que debe ser única en el documento (no debes repetir el nombre).

Sintáxis:

<A NAME=nombre>titulo</A>

Obsoleto !!!
Debes usar ahora el atributo <P ID=nombre>.

1.2. Ancla de salida - HREF

Si este parámetro está presente, el texto entre <A>... </A> es un enlace y cuando es seleccionado desde el visualizador, mueve el puntero hacia otro documento u otra parte del mismo documento, cuya localización está especificada con una dirección URL.

Puedes especificar direcciones URL relativas, es decir las que están referidas al directorio en uso por el documento actual, en cuyo caso no es necesario especificar protocolo. También se puede especificar URL absolutas, es decir dando el protocolo, nombre del servidor y luego ruta completa de ubicación y nombre del documento.

Ejemplo 1:

<A HREF=#top>Arriba</A>

En este ejemplo un clic en Arriba nos lleva a la parte superior de este mismo documento.

Ejemplo 2:

<A HREF=h0.htm>Referencias</A>

En este ejemplo un clic en Referencias nos presentará el documento "H0.HTM" que se encuentra en el mismo directorio.

Ejemplo 3:

<A HREF=../peru/lima.htm>Lima-Perú</A>

Aquí mostramos una dirección relativa, un clic en Lima-Perú nos presentará el documento "LIMA.HTM" que se encontraría en otro directorio.

Ejemplo 4:

Consulta <A HREF=file:///c|/wc/bbs.htm>ATJ</A>
para más información.

Aquí mostramos una dirección URL absoluta, un clic en el objeto definido como ATJ, te lleva al documento "bbs.htm" localizado en la ruta "c:\wc" localmente en la PC del cliente.

Ejemplo 5:

<A HREF=temas.htm#Mas>M</A>

En este ejemplo nos referimos a una posición específica sobre el documento "Temas.htm" que contiene por ejemplo una serie de definiciones y un clic en el objeto "Mas" te lleva a la etiqueta que tenga el parametro id=Mas.

Pero hay muchas maneras de hacer referencia incluso a otros objetos, ej:

HREF=file:///...
Hace una conexión con otro documento localizado en la PC cliente.
HREF=http://...
Hace una conexión con otro documento localizado en el mismo servidor.
HREF=ftp://...
Hace una conexión "anonymous" con un sitio FTP.
HREF=gopher://...
Hace una conexión a un servidor gopher.
HREF=telnet://...
Hace una conexión vía telnet a un servidor para correr una aplicación externa.
HREF=mailto:...
Permite dejar un mensaje a una dirección de correo.
Ejemplo 6:
<A HREF=mailto:kike.glr@gmail.com>Busón de sugerencias</A>

En este ejemplo activamos la opción de correo.

TITLE Este atributo es solo informativo, si está presente nos informa sobre el título del documento cuya dirección está definida por el atributo HREF, pero esta cadena debe ser única en el documento.

Una razon para esto es que el visor deberá mostrar el título del documento antes de jalarlo cuando tú apuntas una determinada ancla (es el rectangulito de texto que normalmente se le conoce como help sensitivo) y el otro motivo es para que el usuario sepa que no se trata de un texto, sino de un gráfico o menú gopher.

Sintáxis:

<A HREF=H0.htm TITLE>Aquí</A>

REL o REV Estos parámetros dan la relación entre el hipertexto y el ancla destino y viceversa.

Ejemplo: REL=X REV=X

URN Si está presente especificará el nombre de la fuente para el doc destino.

METHODS Este parámetro da información sobre la función que el usuario obtendrá con este objeto. Por ejemplo para especificar que es un ícono.

TARGET Los navegadores modernos pueden manejar más de una página HTML a la vez, cada una en una ventana, con este atributos consultas si la respectiva ventana está abierta, si no es así la abre en ese momento.

Puedes usar:

ValorDescripcion
_blankAbrir documento en una nueva ventana
_selfAbrir documento en la misma ventana (x defecto)
_parentAbrir documento en frame padre
_topAbrir documento en en body de esta ventana
framenameAbrir documento en un frame
Ejemplo:
<A HREF="url.htm" TARGET="_blank">Click aquí para abrir una nueva ventana</A>

2. Enlaces con otros objetos

Se puede hacer enlace con cualquier otro objeto soportado por el navegador, es decir imágenes, sonido, video...

Ejemplo 1:

<A HREF=h0.txt>Ver el archivo texto plano</A>

Un clic en ver archivo texto plano me mostrará el contenido del archivo texto. Muy poco usado porque comparado al HTML es muy poco atractivo.

Ejemplo 2:

<A HREF=action.gif>Acción</A>

En este ejemplo cuando haces clic en la palabra Acción se mostrará "Action.gif"

Ejemplo 3:

<A HREF=grande.jpg><IMG SRC=chico.gif></A>

Se muestra la imagen "chica.gif" y cuando hagas clic se mostrará la imagen "grande.jpg", un buen método para dejar al usuario la decisión de ver o no una imagen más detallada que demorará en cargar. Es normal en este caso la sea en realidad la misma imagen en dos resoluciones o tamaños distintos.

Ejemplo 4:

<A HREF=start.wav;>Toca</A>

Un clic en la palabra Toca sonará el archivo "Start.wav".

Ejemplo 5:

<A HREF=welcome2.avi>Win</A>

En este ejemplo cuando haces clic en la palabra Win verás el video "Stone.avi".

Ejemplo 6:

<A HREF=demo.zip>DEMO de HTML</A>.

En este ejemplo cuando haces clic en DEMO de HTML bajarás este archivo demo.