Una de las partes fundamentales de una página Web, son los enlaces, que permiten al usuario desplazarse dentro de nuestro sitio o vincularse con otros sitios de interés, a esto le llamamos navegación, para que esto sea posible de una manera agradable y util para el usuario, es necesario prestar atención a la creación de enlaces que permitan que el visitante de nuestro sitio tenga fácil acceso a toda la información contenida en este, y también la posibilidad de obtener información relacionada fuera de el.

Por ejemplo, si ofrecemos abrir un documento en PDF o cualquier otro programa, debemos ofrecer la posibilidad al usuario de descargarse dicho programa, (en caso de no tenerlo), a traves de un vinculo.

Cuanto mayores posibilidades de navegacion ofrezcamos al usuario, mayor será la posibilidad de que se quede en nuetro sitio o que regrese en otra ocasión.

ETIQUETA <A> </A> : A traves de las propiedades de esta etiqueta desarrollaremos la creación del enlace.

ATRUBUTO HREF: En el lugar de origen de nuestro enlace, a traves este atributo especificaremos el destino, que como habiamos dicho antes pude ser, una URL fuera de nuestro sitio , puede ser un documento dentro de nuestro sitio o un lugar dentro del mismo documento en el que se encuentra el enlace.

EL CONTENIDO: Este será una palabra o una imagen que pondremos dentro de la etiqueta, sobre la cual el usuario clickeará, para ser conducido al destino que hemos especificado en HREF.

En el caso de ser una palabra, está cambiará de color y aparecera subrayada y si fuese una imágen aparecen delimitadas dentro de un marco azul; también vemos como el puntero del raton cambia a forma de mano cuando esté pasa sobre el enlace ,este es el comportamiento por defecto del navegador.

De acuerdo con lo explicado, diremos que la estructura basica de un enlace sería la siguiente:

<A HREF="DESTINO"> ---CONTENIDO--- </A>

(si haces clik en la palabra contenido del primer ejemplo o en la imágen del segundo, este enlace te conducirá a una pág. de prueva, recordemos que el contenido puede ser texto o imágen)

A continuación veremos las diferentes clases de enlaces y la manera de localizar los archivos:

ENLACES INTERNOS (ATRIBUTO NAME) : O también llamados anclas, estos son los que dirigen a otras partes dentro del mismo documento, por ejemplo las flechas que te conducen arriba o abajo dentro del mismo documento. En este caso precediendo el destino del enlace debemos adicionar el caracter almohadilla ( # ) Esta le india al navegador, que se trata de un enlace interno.

Luego debemos asignar un nombre al destino, que luego servirá para que el navegador lo localize a traves del ancla que debemos crear con este fin en la parte del documento que queremos enlazar, en la que utilizaremos el ATRIBUTO NAME, la etiqueta sería así:

EJEMPLO:

<A HREF ="#ARRIBA ">--CONTENIDO-- </A>

Y en la parte del documento que queremos mostrar pondremos la siguiente etiqueta:

( si haces click en la palabra contenido, este enlace te conducirá a la parte superior de este mismo documento )

Cabe destacar que el nombre, que, en este caso he asignado al ejemplo se puede sustituír por cualquier otro termino, sin embargo se recomienda que sea algo facil de identificar, de manera que siempre tengamos control sobre el documento.

ENLACES LOCALES: Los que se dirigen a otras páginas dentro del mismo sitio Web, para crear este tipo de enlaces debemos rcordar el protocolo utilizado en MS DOS.

Esquema de archivos

Teniendo en cuenta el esquema anterior veamos los siguientes ejemplos :

EJEMPLO-1: Para hacer un enlace desde INDEX.HTML hacia YYY.HTML:

<A HREF= "SECCION 1/PAGINAS/YYY.HTML"> --CONTENIDO-- </A>

En este ejemplo hemos especificado el destino, desde INDEX, que se encuentra dentro de la carperta principal, avanzando por las carpetas que le suceden, separandolas con "barra ( / )" buscando la carpeta que contiene el documento YYY.HTML y por ultimo citamos el documento que queremos enlazar (YYY.HTML)

EJEMPLO-2: Para hacer un enlace desde XXX.HTML hacia YYY.HTML:

<A HREF = "../SECCION 1/PAGINAS/YYY.HTML">--CONTENIDO--</A>

En este ejemplo vemos como el documento XXX.HTML que queremos enlazar con YYY.HTML, se encuentra en una subcarpeta y para buscar la ruta hasta YYY.HTML es necesario retroceder un nivel, para ello utilizamos, dos puntos y luego barra ( ../ ), a partir de ahí avanzamos igual que en ejemplo anterior, separando con barras ( / )las carpetas hasta llegar el archivo que queremos enlazar

EJEMPLO-3: Para hacer un enlace desde YYY.HTML hacia XXX.HTML :

<A HREF ="../../SECCION 2/XXX.HTML">--CONTENIDO--</A>

En este ejemplo vemos un caso parecido al del ejemplo anterior, en el que es necesario retroceder, es este caso dos niveles, para ello hacemos exactamente lo mismo que habiamos expuesto anteriormente; dos puntos para retroceder un nivel, luego barra para separar ( ../ ), nuevamente dos puntos para retroceder el otro nivel y nuevamente barra para separar, una vez en este punto, avanzamos hacia el archivo que queremos enlazar, nombrando la carpeta que lo contiene siempre separando con barra cada archivo y por ultimo el nombre del documento.

ENLACES REMOTOS: Los dirigidos a otras páginas (URL) fuera de nuestro sitio web, para ello utilizaremos la misma mecanica expuesta anteriormente, solo que en este caso el destino será la dirección exacta de la página que queremos enlazar con la nuestra, para que el enlace sea efectivo es necesario escribirla exactamente como la visualizamos en la barra del navegador.

EJEMPLO:

<A HREF ="http://www.youtube.com/watch?v=8FXW0zlg4NA" > -- CONTENIDO -- </A>

ENLACES CON DIR. DE CORREO: Estos enlaces permiten al usuario envíar un mensaje a una dirección de correo preestablecida dentro del documento, este enlace abre el programa Outlook Express, si el usuario lo tiene instalado, vale la pena recalcar que este tipo de enlace solo funciona en caso de que el usuario tenga una cuenta de correo predeterminada en su ordenador, un consejo útil sería escribir como contenido la dirección de correo a la que queremos ser contactados, de manera que el usuario en caso de tener problemas, pueda copiar la cuenta a otro ordenador o un sistema web-mail.

EJEMPLO:

<A HREF = "MAILTO: free797@hotmail.com">--free797@hotmail.com--</A>

También podemos especificar el campo de asunto añadiendo la propiedad ?SUBJECT, así:

<A HERF="MAILTO:free797@hotmail.com?SUBJECT=ASUNTO MENSAJE" >--free797@homail.com--</A>

ENLACES CON ARCHIVOS: Estos enlaces permiten al usuario descargar ficheros en su ordenador, estos pueden ser comprimidos, como ZIP o RAR ( lo cual se recomienda en caso de ficheros de gran volumen, sin embargo presentan el inconveniente para el usuario inexperto del hecho de descomprimirlos) o simplemente ejecutables por el ordenador del usuario en este caso sería PDF, Word, o un documento en Exel.

Al usuario en su navegador, le aparecerá el siguiente cuadro de dialogo preguntandole que desa hacer con el archivo

cuadro

En cualquier caso, la mecanica es la misma que venimos estudiando anteriormente:

<A HERF ="escribir en internet.doc"> ESCRIBIR EN LA WEB </A>

ATRIBUTO TARGET: Este atributo podemos especificar de que manera queremos que abra el enlace, y tiene los siguientes propiedades _BLANK, _SELF,, _TOP y _PARENT.

_BLANK: Con esta propiedad el enlace abrirá el documento en una ventana nueva del navegador

EJEMPLO:

<A HERF="EJEMPLOS.HTML" TARGET= _BLANK>--EJEMPLO--</A>

_SELFT: Con esta propiedad, es la de por defecto del navegador, el enlace abrirá el documento en la misma ventana.

_TOP: El enlace se cargará a pantalla completa.

_PARENT: El documento se cargará en la ventana del documento padre o documento de origen.

ENLACE VACIO: Este es un tipo de enlace que será util en Java Scrpt. lleva la misma mecanica anteriormente explicada, pero en lugar de una ubicación de destino, utilizamos la almohadilla, y el contenido lo dejamos vacio, la etiqueta sería de la siguiente manera:

LOS COLORES DE LOS ENLACES: Se especifican a traves de la etiqueta BODY, cuando definimos las especificaciones de la página, con las siguientes propiedades:

LINK: Enlace no visitado

ALINK: Enlace activo

VALINK: Enlace ya visitado.

TUTORIAL HTML

ENLACES

(Hipertex markup language)