Enlaces

P a t r o c i n a d o    p o r :

Probablemente la característica que más ha influido, junto con las imágenes, en el espectacular desarrollo de la Web hayan sido los enlaces (links). Un enlace aparece generalmente como un texto azul subrayado y cuando situamos el cursor sobre él se transforma en una mano con el dedo índice extendido. Si pulsamos sobre el enlace saltamos a otra parte del documento, a otro documento situado en cualquier lugar, o incluso se abre el programa de correo para enviar un mensaje a la dirección indicada.

En general los enlaces tienen la siguiente estructura

<A HREF="URL"> Texto del enlace</A>

El texto del enlace es lo que se visualizará en el navegador. La URL es la dirección donde apunta el enlace y puede ser de estos tipos:

Enlace a otro lugar del mismo documento

En este caso la URL se sustituye por un marcador en la misma página. El marcador puede ser texto colocado en el lugar al que queremos saltar. No importa lo que sea ya que no se verá.
Veamos un ejemplo para saltar al inicio de esta página. Escribiríamos en el lugar desde el que queremos saltar:

<A HREF="#inicio"> Ir al Inicio</A>

Y en el sitio exacto adonde queremos saltar, debemos poner la siguiente etiqueta:

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

Una vez escrito esto y guardada la página veríamos al abrirla con el Navegador

Ir al Inicio

Al pulsar sobre ella nos llevaría al principio de la página ya que fue allí donde coloqué el marcador

Enlace a otra página local

En este caso la URL se dará de forma relativa (igual que para poner un fondo a la página). Por ejemplo si tenemos dos páginas en el mismo directorio pagina1.htm y pagina2.htm y queremos poner un enlace desde la pagina1.htm a la pagina2.htm debemos escribir

<a href="pagina2.htm">Ir a pagina2</a>

Con esto es suficiente, no hay que crear ningún marcador a no ser que quieras ir a un sitio concreto de la pagina2.htm. En ese caso tendrías que poner en el sitio adonde quieres llegar de la pagina2.htm
<a name="sitio"></a>
y en la pagina1.htm
<a href="pagina2.htm#sitio>Ir a sitio de la página 2</a>

Las palabras forma relativa, al principio de esta sección, constituyen un enlace de este último tipo

Enlace a una dirección de Internet

Ahora la URL debe darse de forma absoluta, tal como la ves en la ventana de dirección del navegador, es decir:

<A HREF="http://centros4.pntic.mec.es/ies.de.cistierna">IES Cistierna</A>

te llevaría a la página de entrada del IES Cistierna

 

Enlaces usando imágenes

Con frecuencia se emplean imágenes como enlaces. A veces son enlaces a las mismas imágenes con más resolución, como en el caso de fotos. Otras veces nos llevan a una localización cualquiera.
Para que una imagen sea un enlace hay que colocarla en el lugar del texto del enlace, si además queremos que vaya a otra imagen, ésta la debemos poner en el lugar de la URL.
Veamos unos ejemplos Supongamos para ello, que la estructura de nuestras páginas es la indicada en la imagen. Si escribo en la página actual localizada en Aprendiendo Html

<A HREF=" #inicio"><img src="gifs/imagen.gif"></A>
obtengo una imagen que al pulsarla me lleva al inicio de esta página, exactamente como esta:

Para que una imagen sea un enlace a otra imagen se debe escribir:

<a href="gifs/sky.jpg"><img src="gifs/ojo.gif" ></a>

que da como resultado

 

Enlace con una dirección de correo

Este es un enlace un poco diferente, veamos un ejemplo

<A HREF="mailto: [email protected]"> [email protected] </A>

que se ve como [email protected] y que si lo pulsas se abre el programa de correo que tengas configurado, con la dirección en el campo correspondiente

Enlace con un grupo de noticias

Como antes la sintaxis es un poco diferente

<A HREF="news://news.pntic.mec.es/"> Mira en las noticias del MEC para encontrar profesores colgados</A>

que se vería

Mira en las noticias del MEC para encontrar profesores colgados

Enlace para descargar un fichero

En la URL se poner la ruta donde está el fichero. Por ejemplo, para descargar un fichero de nombre guiahtml.zip se debe poner

<A HREF="../zip/guiahtml.zip">guiahtml.zip</A>

que se vería así guiahtml.zip. Si pulsas sobre él se abrirá una ventana avisándote de una descarga de archivos y preguntándote qué deseas hacer

Enlace que se abre en una nueva ventana

Si quieres que la página que enlazas aparezca en una nueva ventana del navegador, solamente tienes que poner target="nombre" como atributo del enlace, es decir:

<a href="index.htm" target="nueva">Indice</a>

que se verá como Indice

Aún hay más tipos de enlaces, pero éstos son los más importantes