ENLACES

|Introducción| |Head| |Body| |Formato| |Cabeceras y Párrafos| |Fuentes| |Líneas| |Listas| |Imágenes| |Enlaces| |Marquesina|
|Sonido y Vídeo| |Mapas Gráficos| |Tablas| |Marcos| |Formularios| |Estilos| |Capas y Applets| |Caracteres especiales|

Los enlaces definen todo este tinglado ya que son ellos los que hacen que un texto sea "hipertexto" (que palabro más bonito) y que, al pulsar sobre él (o sobre una imagen) nos mande a cualquier página de la Red, a otra página de mi sitio web (como en este tutorial), a otra parte de esta misma página (mira la flecha del final de los capítulos), a una dirección e-mail, a un archivo determinado que queremos descargarnos o a una imagen.

Sólo se necesita algo que pulsar y un lugar donde mandar al navegador.

Los enlaces, de forma predeterminada (ya lo vimos en el capítulo BODY), tienen color azul y están subrayados, al pulsar serán rojos y despues de visitados violeta (todos subrayados).

Además cuando pasamos el cursor sobre un enlace, éste cambia y se convierte en una mano.

En este tutorial los enlaces eran azules y al pasar el ratón, sin pulsar, tornaban a rojo; además, estaban sin subrayar. Eso estaba hecho con hojas de estilo, que ya veremos más adelante. De todas formas, en este capítulo los dejaré como los vais a ver vosotros.

La etiqueta es <A> (anchors) que tiene que llevar, al menos, el atributo HREF (hiperlink reference) donde irá, entrecomillada, la dirección de la página donde queremos ir o la dirección de correo,... Tiene su cierre </A> y entre medias tendremos que poner el texto (o gráfico) que se va a usar como enlace.

Todos los enlaces, como casi todos los elementos, pueden llevar TITLE para la etiquetilla (obsérvalo en ese de ahí).

La pinta es <A HREF="....." TITLE=bla> Enlace </A> y se ve: Enlace

A cualquier página de la Red

Son lo que llamamos enlaces externos. Lo que tenemos que poner es una dirección que nos sepamos, por ejemplo, la del buscador Google (http://www.google.es). Tenemos que incluir el protocolo "http", que es "hypertext transfer protocol" (protocolo de transferencia de hipertexto) porque existen otros como el "ftp" que es "file transfer protocol" (protocolo de transferencia de ficheros) o el gopher o las news.

<BODY>
<A HREF="http://www.google.es"> Enlace </A>
</BODY>

Si pulsáis os manda a Google, que aparecerá en la misma ventana en la que estamos, con lo que para volver al tutorial deberemos pulsar la flecha atrás del navegador (arriba a la izquierda).

Si queremos que se abra en una ventana independiente (con lo que tendríamos dos, la de este tutorial y la del Google), debemos añadir un atributo llamado TARGET con el valor _blank (tiene más pero los veremos cuando lleguemos a los MARCOS). Comprobémoslo.

<BODY>
<A HREF="http://www.google.es" TARGET=_blank> Enlace </A>
</BODY>

Todos los enlaces de este tutorial llevan ese complemento.

Otro atributo es TITLE, que ya hemos visto.

<BODY>
<A HREF="http://www.google.es" TARGET=_blank TITLE=Enlacito> Enlace </A>
</BODY>

La mayoría de estos valores funcionan igual entrecomillados o no.

Podemos poner texto largo en un enlace:

<BODY>
Esto es un ejemplo de <A HREF="http://www.google.es" TARGET=_blank > un enlace más largo </A> y entre texto normal
</BODY>

Esto es un ejemplo de un enlace más largo y entre texto normal

Podemos, incluso, tomar todo un párrafo como enlace.

<BODY>
<A HREF="http://www.google.es">
<P>
Esto es un ejemplo de un párrafo con funciones de enlace.
</A>
</BODY>

O una tabla, una listilla (o elemento de ésta),...

<BODY>
<UL>
<LI> <A HREF="http://www.google.es"> Enlace </A>
<LI> No enlace
</UL>
</BODY>

Lo que sí es habitual es usar una imagen. Para ello sólo debemos meter entre <A....> y </A> la etiqueta de imagen con todos sus atributos:

<BODY>
<A HREF="http://www.google.es">
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57>
</A>
</BODY>

Para quitar el borde, que aparece para que sepamos que es una imagen que funciona como un enlace, ponemos BORDER=0.

<BODY>
<A HREF="http://www.google.es">
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57 BORDER=0>
</A>
</BODY>

Sabemos que es un enlace sólo si pasamos por encima y comprobamos que el cursor cambia. Si lo pasáramos sobre una imagen sin enlace no cambiaría. Compruébalo en la de la derecha.

O puede que seamos muy horteras y nos guste un borde grandote:

<BODY>
<A HREF="http://www.google.es">
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57 BORDER=4>
</A>
</BODY>

Como ya dije antes, existen otros protocolos en la red:

<BODY>
<A HREF="ftp://ftp.um.es">
Enlace ftp
</A>
</BODY>

<BODY>
<A HREF="ftp://ftp.um.es">
Enlace news
</A>
</BODY>

Las News son servidores de noticias que sirven para contactar con gente con tus mismas inquietudes y donde puedes plantear y resolver preguntas sobre diversos temas.

El Ftp (ya se vió al principio) es el lugar donde ponemos nuestra página pero, además, es un lugar desde donde pueden descargarse cosas.

A otra página de mi Sitio Web

Una página lleva la estructura nombre.htm (o html). Tenemos que tener en cuenta en que posición está la página con respecto a la página desde donde se la llama (ya vimos algo de esto en IMÁGENES). De modo que si no ponemos nada estará en el mismo directorio (como he hecho yo con esto que estás leyendo). Se llaman enlaces internos.

<BODY>
Enlace que se va a la página <A HREF="body.htm"> Body </A>
</BODY>

Enlace que se va a la página Body

Recuerda: <A HREF="imagenes/body.htm"> o <A HREF="../imagenes/body.htm">

A otra parte de esta página

También son enlaces internos. Consisten en moverse por el propio documento. Ya sabemos como hacer un enlace pero, en este caso, también debemos saber como se crea el lugar, en mi página, donde irá al pulsar el enlace.

Para crear el marcador (así se llama) necesitamos un lugar concreto (lo escogemos nosotros, claro) y la etiqueta <A> con el atributo NAME cuyo valor se escribe entre comillas y es meramente descriptivo. Suele cerrarse para evitar problemas con las hojas de estilo (yo lo aconsejo). No se verá, es sólo una marca interna.

<A NAME="inicio"> </A>

Ahora sólo queda hacer el enlace, pero un poco modificado, ya que hemos de mandarle a "inicio" y sería:

<A HREF="#inicio"> Sube para arriba </A>

En el ejemplo sólo figura el enlace ya que el marcador lo hemos puesto arriba en el documento, con lo que salta arriba. Observa la necesidad de #.

Si lo quieres ver en acción presiona la flecha del final de esta página y lo verás.

<BODY>
<A NAME="inicio"> </A>
.........
.........
Aquí ponemos nuestro <A HREF="#inicio"> Enlace </A>
</BODY>

Mezclando los dos apartados anteriores podemos hacer un enlace que vaya a otra página pero no al principio (irá al principio por defecto), sino a un marcador, es decir, podemos situar un marcador en una página distinta a la que lo llama.

Sólo tendríamos que poner en ésta:

<A HREF="formato.htm#marca" TARGET="_blank"> Enlace </A>

Y en la página "formato.htm", donde yo quiera: <A NAME="marca"> </A>. Pincha aquí y nos iremos para allá, en otra ventana.

Podemos, además, hacer que el marcador sea un enlace. Entonces se verá y podremos pulsarlo como a cualquier otro. Es decir, es a la vez destino y enlace.

Para ello pondremos.

<A HREF="prueba9.htm#marcaenlace" TARGET="_blank"> Enlace </A>

Esto no ha variado, lo que cambia es esto:

<A NAME="marcaenlace" HREF="prueba2.htm"> marcaenlace </A>

Pulsa aquí y en la página verás el marcador "marcaenlace" que se puede pulsar y te manda de nuevo aquí, pero arriba (por defecto).

A una dirección E-mail:

Para crear un enlace que conecte directamente con el programa de correo que tenemos pondremos mailto (mail to pero todo junto seguido de la dirección) como valor de HREF :

<BODY>
Mandamé un <A HREF="mailto:migu23@roble.cnice.mecd.es"> mensajito </A>
</BODY>

Mandamé un mensajito

Lógicamente podemos sustituir el texto por una imagen.

<BODY>
Mandamé un <A HREF="mailto:migu23@roble.cnice.mecd.es"> <IMG SRC="sobre.gif" BORDER=0>
</A>
</BODY>

Mandamé un

En el caso de que queramos que el título del mensaje sea fijo (por ejemplo, "mensaje desde la web"), pondremos la expresión ?subject.

<BODY>
Mandamé un <A HREF="mailto:migu23@roble.cnice.mecd.es?SUBJECT=Mensaje..."> mensaje
</A>
</BODY>

Mandamé un mensaje

Y también podemos poner algo en el cuerpo (body=) en el cc y en el bcc (cc= y bcc=) uniéndolos con &.

<BODY>
Mandamé un <A HREF="mailto:migu23@roble.cnice.mecd.es?SUBJECT=Mensaje...&BODY=Hola chicos"> mensaje
</A>
</BODY>

Mandamé un mensaje

A archivos

Para que el usuario se baje algún archivo, programa o lo que sea (pero nuestro, no de la Red) tendremos que subirlo al sitio (lógico) y hacer una llamada en forma de enlace.

<BODY>
Bajaté este <A HREF="prueba.zip" TARGET=_blank> documento </A>
</BODY>

Bajaté este documento

Pueden estar en formato comprimido (zip, arj, rar,...), en exe, pdf, doc, etc.

También una imagen puede ser un destino.

<BODY>
Pulsa para ver la <A HREF="grande.jpg" TARGET=_blank> imagen del castañar </A>
</BODY>

Pulsa para ver la imagen del castañar

Si ponemos una imagen para ir a otra (en vez de un texto) y el enlace es la misma imagen en pequeño tenemos un THUMBNAIL. Las ofrecemos a los visitantes y conectan con su versión más grande si el usuario quiere (ya ha visto más o menos lo que es y así puede elegir si la ve o no). Para ello sólo tenemos que reducirlas (con un programa de dibujo) y enlazar luego las pequeñas con las grandes.

<A HREF="grande.jpg" TARGET=_blank> <IMG SRC="pequena.jpg" WIDTH=80 HEIGHT=55 BORDER=0> </A>

Pulsa en la pequeñuela:

Si queremos que todos los enlaces de nuestra página se refieran a una dirección concreta (aunque yo lo veo bastante inútil), tendremos que usar una nueva etiqueta, <BASE>:

<BASE HREF="www.yomismo.net">

Todos los enlaces que se usen en páginas con esa etiqueta irán a esa dirección y, desde ella, se moverán. Por ejemplo, si en un enlace yo os mando a "imagenes/grafica.gif", el navegador irá a buscar esa imagen a la dirección "www.yomismo.net/imagenes/grafica.gif"