Tutorial HTML -Enlaces-

[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]

Tutorial HTML
3. Enlaces

Los enlaces son las funciones principales de las páginas WWW. Un enlace es una conexión con un recurso ajeno o propio. Analizamos a continuación los enlaces a recursos externos y los enlaces a partes de una página (índices).

3.1. Enlaces a recursos externos [T][I]

Los recursos externos básicos que pueden visualizarse son:

Páginas HTML (http://...)
Gopher (gopher://...)
Servidores FTP (ftp://...)
News (news:...)
Imágenes (...)

Todos ellos requieren la orden general <A HREF=".......">Texto en el que hay que picar con el ratón para acceder al recurso</A>. En la zona de puntos ha de situarse la dirección del recurso. Aquí van algunos ejemplos:

Pique <A HREF="http://www.um.es">aquí</A> para acceder a la Universidad de Murcia.

Pique aquí para acceder a la Universidad de Murcia.

Puede acceder también al <A HREF="gopher://gopher.um.es">Gopher de la Universidad de Murcia</A>. En él encontrará información sobre su organización y estructura.

Puede acceder también al Gopher de la Universidad de Murcia. En él encontrará información sobre su organización y estructura.

En el servidor <A HREF="ftp://ftp.um.es">FTP de la Universidad de Murcia</A> tiene a su disposición programas que le pueden resultar de interés (pique el subdirectorio PUB).

En el servidor FTP de la Universidad de Murcia tiene a su disposición programas que le pueden resultar de interés (pique el subdirectorio PUB).

Consulte el buzón de noticias <A HREF="news:soc.culture.spain">SOC.CULTURE.SPAIN</A>.

Consulte el buzón de noticias SOC.CULTURE.SPAIN.

Pique <A HREF="campus.gif">aquí</A> para visualizar el plano del Campus de Espinardo de la Universidad de Murcia.

Pique aquí para visualizar el plano del Campus de Espinardo de la Universidad de Murcia.

Los enlaces pueden efectuarse también a través de imágenes. Esto es, una imagen sirve de referencia para enlazar con el recurso, en vez del texto que hemos utilizado en los ejemplos anteriores.

Código HTML

Realice sus consultas en español con <A HREF="http://www.ole.es"><IMG SRC="ole.gif"></A>

Visualización

Realice sus consultas en español con

En el ejemplo anterior, entre <A HREF=....> y </A>, que son los delimitadores entre los que se sitúa la referencia del enlace, se ha introducido una imagen. Esta imagen accederá al recurso cuando se pique sobre ella. Como observarás, esta rodeada de un marco, que indica que es un enlace. Dicho marco puede omitirse, modificando la orden anterior de la siguiente forma: <A HREF="http://www.ole.es"><IMG SRC="ole.gif" border=0></A>, donde border=0 indica que la imagen aparecerá sin borde.

3.2. Enlace a partes de un documento [T][I]

Para establecer un enlace con una parte de la página visualizada, se utiliza la expresión:

<A HREF="#referencia">Texto de enlace</A>

en la que referencia indica la marca hacia la que hay que enlazar, y texto de enlace el texto sobre el que se picará para establecer dicho enlace.

Para que la orden se ejecute correctamente, deberá existir en alguna parte del documento la expresión <A NAME="referencia">..texto opcional..</A>, que será el destino del enlace. Por ejemplo, podemos situar al inicio de una página HTML el siguiente código:

<A NAME="m0">INDICE</A>
<UL>
<LI><A HREF="#m1">Introducción</A>
<LI><A HREF="#m2">Referencias históricas</A>
<LI><A HREF="#m3">Aspectos de interés</A>
</UL>

y después desarrollar cada uno de los aparatados:

<A NAME="m1>Introducción</A><BR> ....texto de la introducción....
<A NAME="m2">Referencias históricas</A>
....texto de las referencias históricas....
<A NAME="m3">Aspectos de interés</A>
....texto de los aspectos de interés....
<A HREF="#m0">Indice de contenidos</A>

Cada vez que se pique con el ratón el texto de la referencia (HREF), se enlazará con la sección correspondiente (NAME).

El enlace se puede realizar también hacia una parte de un documento particular. Así, la expresión:

<A HREF="main.htm#m5">...texto a picar...</A>

permite enlazar con sección m5 de la página main.htm.

[Página Principal|Conceptos básicos] [Imágenes][Enlaces] [Tablas] [Funciones Especiales][Recomendaciones]