Enlaces con html
 |
Enlaces |
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
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: abercian@pntic.mec.es"> abercian@pntic.mec.es </A>
que se ve como abercian@pntic.mec.es 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