ENLACES
|Cabeceras y
|Introducción| |Head| |Body| |Formato| |Fuentes| |Líneas| |Listas| |Imágenes| |Enlaces| |Marquesina|
Párrafos|
|Sonido y |Mapas |Capas y |Caracteres
|Tablas| |Marcos| |Formularios| |Estilos|
Vídeo| Gráficos| Applets| 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.
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í).
<BODY>
<A HREF="http://www.google.es"> Enlace </A>
</BODY>
Enlace
http://serbal.pntic.mec.es/apan/enlaces.htm 1/7
26/2/2019 Enlaces
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>
Enlace
<BODY>
<A HREF="http://www.google.es" TARGET=_blank TITLE=Enlacito>
Enlace </A>
</BODY>
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>
<BODY>
<A HREF="http://www.google.es">
<P>
Esto es un ejemplo de un párrafo con funciones de enlace.
</A>
</BODY>
http://serbal.pntic.mec.es/apan/enlaces.htm 2/7
26/2/2019 Enlaces
<BODY>
<UL>
<LI> <A HREF="http://www.google.es"> Enlace </A>
<LI> No enlace
</UL>
</BODY>
Enlace
No enlace
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.
<BODY>
<A HREF="http://www.google.es">
<IMG SRC="util.gif" WIDTH=68 HEIGHT=57 BORDER=4>
</A>
</BODY>
http://serbal.pntic.mec.es/apan/enlaces.htm 3/7
26/2/2019 Enlaces
<BODY>
<A HREF="ftp://ftp.um.es">
Enlace ftp Enlace ftp
</A>
</BODY>
<BODY>
<A HREF="ftp://ftp.um.es">
Enlace news 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.
<BODY>
Enlace que se va a la página <A HREF="body.htm"> Body </A>
</BODY>
http://serbal.pntic.mec.es/apan/enlaces.htm 4/7
26/2/2019 Enlaces
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.
Ahora sólo queda hacer el enlace, pero un poco modificado, ya que hemos de mandarle a
"inicio" y sería:
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.
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.
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).
<BODY>
Mandamé un <A HREF="mailto:migu23@roble.cnice.mecd.es"> mensajito </A>
</BODY>
Mandamé un mensajito
<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
<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>
http://serbal.pntic.mec.es/apan/enlaces.htm 6/7
26/2/2019 Enlaces
Pueden estar en formato comprimido (zip, arj, rar,...), en exe, pdf, doc, etc.
<BODY>
Pulsa para ver la <A HREF="grande.jpg" TARGET=_blank> imagen del castañar
</A>
</BODY>
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.
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"
http://serbal.pntic.mec.es/apan/enlaces.htm 7/7