Leccion 4: ENLACES (LINKS)

La principal característica de internet -y tal vez la que brinda mayores posibilidades y la hace más atractiva- es la forma en que están entrelazadas las distintas páginas y webs. En esta lección veremos todos los tipos de enlaces que podemos crear. Es importante que nuestras páginas tengan links bien distribuidos a fin de permitir una buena navegación.
El tag para los links es <A> que siempre va acompañado del parámetro HREF y el tag de cierre es </A> de modo que todo lo que esté entre estas dos etiquetas será un enlace hacia otra página, otra parte del mismo documento o a un email.

LINKS A WEBS FUERA DE NUESTRO SITIO

Para enlazar un texto con otra web fuera de la que estamos creando hay que poner la URL (Uniform Resource Locator) o direccion completa, sin olvidar incluir http://
Por ejemplo voy a crear un enlace desde la palabra YAHOO, al famoso buscador, para eso escribo:

<A HREF="http://www.yahoo.com"> YAHOO </A> El resultado en pantalla será:

YAHOO

Si queremos que el link se abra en una pantalla nueva, podemos agregar el parámetro TARGET, y asignarle el valor _BLANK. El tag quedaría entonces así:

<A HREF="http://www.yahoo.com" TARGET="_BLANK"> YAHOO </A>

Si quiero que el enlace sea desde una imágen, sigo el mismo procedimiento, usemos por ejemplo la imágen del perro de la lección anterior:

<A HREF="http://www.yahoo.com"> <IMG SRC="dog.jpg" ALT="perro" WIDTH="82" HEIGHT="76"></A>

El resultado en pantalla será:

Si no queremos que aparezca el reborde de color que indica que la imágen es un link, debemos agregar en el tag de la imágen, el parámetro BORDER y asignarle un valor 0. Quedaría así:

<A HREF="http://www.yahoo.com"> <IMG SRC="dog.jpg" ALT="perro" WIDTH="82" HEIGHT="76" BORDER="0"></A>

Y el resultado en pantalla será:

LINKS A UNA PAGINA DE NUESTRO WEB

El tag es el mismo, solo que no hay que escribir la dirección de internet completa, sino solamente el nombre del documento, por ejemplo, supongamos que estamos en la pagina principal y queremos crear un enlace a otra pagina llamada fotos. El tag sería:

<A HREF="fotos.html">FOTOS</A>

LINKS A UNA DIRECCION DE EMAIL

En este caso tenemos que escribir MAILTO: por ejemplo:

<A HREF="MAILTO:pepe@yahoo.com">pepe@yahoo.com</A>

Esto dará como resultado que al pulsar sobre el link se abra el programa de correo predeterminado de la persona. Ojo, esto solo funciona cuando la persona utiliza un cliente de correo como Outlook, Eudora, Pegaso, etc. No funciona cuando utilizan un correo de web como yahoo, hotmail, etc. Por eso siempre es conveniente que aunque creemos el link desde un grafico o desde la palabra EMAIL por ejemplo, que siempre aparezca visible la dirección para aquellos que no tienen configurado un programa de correo como los antes mencionados.

LINKS DENTRO DE LA MISMA PAGINA

Aunque no es aconsejable hacer páginas excesivamente largas, a veces es necesario, en estos caso se pueden crear por ejemplo en el encabezado enlaces que lleven a otro punto de la página, o al pie de la misma un enlace para volver al principio. Veremos como lograr esto.

Primero vamos al lugar de destino del enlace, es decir, donde queremos que salte la pagina al presionar el enlace. (Un titulo por ejemplo) Alli ponemos la siguiente etiqueta:

<A NAME="marca"> Texto de destino del enlace </A>

(La palabra marca puede ser sustituida por cualquiera que querramos)

Luego vamos donde queremos crear el link y escribimos:

<A HREF="#marca"> Ir al texto de destino </A>

Ejemplo practico:

Voy a crear un salto dentro de esta misma página que nos lleve al principio de la misma. Para eso voy a marcar el titulo Leccion 4

<A NAME="principio> Leccion 4 </A>

Luego creo el enlace:

<A HREF="#principio> Ir al principio </A>

El resultado es este (compruebalo pulsando sobre el link):

Ir al principio

IR A LECCION 5