Anda di halaman 1dari 7

26/2/2019 Enlaces

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.

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>

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

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>

Enlace

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>

Esto es un ejemplo de un párrafo con funciones de


enlace.

http://serbal.pntic.mec.es/apan/enlaces.htm 2/7
26/2/2019 Enlaces

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>

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.

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>

http://serbal.pntic.mec.es/apan/enlaces.htm 3/7
26/2/2019 Enlaces

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

<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.

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.

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.

<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 :
http://serbal.pntic.mec.es/apan/enlaces.htm 5/7
26/2/2019 Enlaces

<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>

http://serbal.pntic.mec.es/apan/enlaces.htm 6/7
26/2/2019 Enlaces

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"

http://serbal.pntic.mec.es/apan/enlaces.htm 7/7

Anda mungkin juga menyukai