Unidad III
Enlaces
Definición: La clave de la facilidad de uso de los documentos HTML, reside fundamentalmente en los enlaces. Los enlaces (o links) proporciona al que visita las páginas un mecanismo muy sencillo para moverse entre distintos documentos, permitiéndole moverse en aquellos aspectos que considere más importantes, mientras que desde el punto de vista del que crea las páginas permite distribuir de forma transparente al visitante el lugar o lugares en los que se van a almacenar los distintos documentos.
Para definir enlaces hipertexto se utiliza la marca <A> de la manera siguiente:
<A HREF="dirección">Texto del enlace</A>
Donde:
- dirección: Es el destino del enlace.
- Texto del enlace: Es el texto indicativo del enlace que aparece en la pantalla normalmente con color especial y subrayado.
<A> requiere de la marca de fin.
Vamos a distinguir tres tipos de enlaces:
- Enlaces a otras zonas de la misma página.
- Enlaces a otras páginas.
- Enlaces a otras zonas de otras páginas.
Enlaces a otras zonas de la misma página
A veces, en el caso de documentos (o páginas) muy extensos, nos puede interesar dar un salto desde una posición a otra determinada.
Así es posible hacer enlaces que lleven al usuario de una parte del documento a otra dentro del mismo documento con solo hacer click. A este tipo de enlaces los llamaremos enlaces locales.
Estos enlaces consta de dos objetos:
- El enlace:
Correspondiente a la zona en la cual el usuario hará click, para viajar a otra parte del documento.
Esta zona aparece subrayada en el documento. Un enlace local se crea delimitando la zona con el comando <A href="#nombre">...</A>, en que nombre es la etiqueta que se está referenciando.
- El nombre enlazado o referenciadoCorresponde a la zona del documento a la cual el usuario llegará al hacer click en la referencia correspondiente. Un nombre local se crea delimitando la zona con el comando <A NAME="nombre">...</A>, en que nombre es la etiqueta que asignamos a esta zona.
Veamos el ejemplo:
Ejemplo práctico nº 3, enlaces locales
<HTML>
<HEAD>
<TITLE>Ejemplo 3 - Enlaces locales</TITLE>
</HEAD>
<BODY>
<H2>Enlaces locales</H2>
<H3><A NAME="indice">Indice</A></H3>
<UL>
<LI><A HREF="#uno">Sección uno</A>
<LI><A HREF="#dos">Sección dos</A>
<LI><A HREF="#tres">Sección tres</A>
<LI><A HREF="#cuatro">Sección cuatro</A>
<LI><A HREF="#cinco">Sección cinco</A>
<LI><A HREF="#seis">Sección seis</A>
<LI><A HREF="#siete">Sección siete</A>
<LI><A HREF="#ocho">Sección ocho</A>
</UL>
<H3><A NAME="uno">Sección uno</A></H3>
<P>Esta es la sección 1 de la página de enlaces locales</P>
<P>Click aquí para <A href="#indice">Volver al índice</P>
<H3><A NAME="dos">Sección dos</A></H3>
<P>Esta es la sección 2 de la página de enlaces locales</P>
<P>Click aquí para <A href="#indice">Volver al índice</P>
<H3><A NAME="tres">Sección tres</A></H3>
<P>Esta es la sección 3 de la página de enlaces locales</P>
<P>Click aquí para <A href="#indice">Volver al índice</P>
<H3><A NAME="cuatro">Sección cuatro</A></H3>
<P>Esta es la sección 4 de la página de enlaces locales</P>
<P>Click aquí para <A href="#indice">Volver al índice</P>
<H3><A NAME="cinco">Sección cinco</A></H3>
<P>Esta es la sección 5 de la página de enlaces locales</P>
<P>Click aquí para <A href="#indice">Volver al índice</P>
<H3><A NAME="seis">Sección seis</A></H3>
<P>Esta es la sección 6 de la página de enlaces locales</P>
<P>Click aquí para <A href="#indice">Volver al índice</P>
<H3><A NAME="siete">Sección siete</A></H3>
<P>Esta es la sección 7 de la página de enlaces locales</P>
<P>Click aquí para <A href="#indice">Volver al índice</P>
<H3><A NAME="ocho">Sección ocho</A></H3>
<P>Esta es la sección 8 de la página de enlaces locales</P>
<P>Click aquí para <A href="#indice">Volver al índice</P>
</BODY>
</HTML>
Guardamos el fichero de texto con el nombre ejemplo3.html y lo abrimos con el navegador, y debe aparecer la siguiente pantalla:
Enlaces locales
Indice
- Sección uno
- Sección dos
- Sección tres
- Sección cuatro
- Sección cinco
- Sección seis
- Sección siete
- Sección ocho
Sección uno
Esta es la sección 1 de la página de enlaces locales
Click aquí para volver al índice
Sección dos
Esta es la sección 2 de la página de enlaces locales
Click aquí para volver al índice
Sección tres
Esta es la sección 3 de la página de enlaces locales
Click aquí para volver al índice
Sección cuatro
Esta es la sección 4 de la página de enlaces locales
Click aquí para volver al índice
Sección cinco
Esta es la sección 5 de la página de enlaces locales
Click aquí para volver al índice
Sección seis
Esta es la sección 6 de la página de enlaces locales
Click aquí para volver al índice
Sección siete
Esta es la sección 7 de la página de enlaces locales
Click aquí para volver al índice
Sección ocho
Esta es la sección 8 de la página de enlaces locales
Click aquí para volver al índice
Como vemos, las referencias locales son muy útiles para crear índices al comienzo del documento.
Enlaces a otras páginas
Para enlazar a otro documento, es necesario conocer la ubicación exacta del documento que se referenciará. Una ubicación, puede ser referenciada en forma relativa o absoluta.
- Ubicación relativa:
Se indica especificando la posición del documento en la estructura de subdirectorios a partir de la ubicación del documento actual, Sólo se puede usar para documentos ubicados en el mismo ordenador.
Una referencia relativa a otro documento se hace usando el comando:<A href="ubicación">...</A> - Ubicación absoluta:Se indica especificando el URL (Uniform Resurce Locator) de la página que se está referenciando.
Los URL son una manera universal de especificar una dirección. La forma mas básica de referenciar en hypertexto es usar el comando:<A href="http://ordenador/directorio/archivo">...</A>
El ordenador indica la máquina donde se encuentra el documento, El directorio y archivo indican su posición dentro de ese ordenador. Los URL tienen muchas formas distintas para referenciar distintos objetos.
<HTML>
<HEAD>
<TITLE>Ejemplo 4 - Enlaces a otras páginas</TITLE>
</HEAD>
<BODY>
<H1>Enlaces a otras páginas</H1>
<H2>Referencias relativas</H2>
<P>Se puede referenciar, por ejemplo, a un archivo localizado en el mismo directorio, como por ejemplo, al <A href="ejemplo1.html">ejemplo número 1</A></P>
<H2>Referencias absolutas</H2>
<H3>Algunos servicios W.W.W. en Bolivia</H3>
<P>La página de anuncios <A HREF="http://www.tumomo.com/">www.tumomo.com</A>
que permite ver anuncios de compra y venta en Bolivia.
<H3>Algunos servicios en el extranjero</H3>
<P>Para informarse de la actualidad mundial, se puede acceder al servicio <A HREF="http://www.cnn.com/">CNN</A>. Para los amantes de la música se encuentra el servidor oficial de la <A HREF="http://mtv.com/">MTV</A> y para localizar distintos tipos de información está <A HREF="http://www.yahoo.com/">Yahoo!</A>.
</BODY>
</HTML>
Guardamos el fichero de texto con el nombre ejemplo4.html y lo abrimos en el navegador, y debe aparecer la siguiente pantalla:
Enlaces a otras páginas
Referencias relativas
Se puede referenciar, por ejemplo, a un archivo localizado en el mismo directorio, como por ejemplo, al ejemplo número 1.
Referencias absolutas
Algunos servidores W.W.W. en Bolivia
La página de anuncios www.tumomo.com que permite ver anuncios de compra y venta en Bolivia.
Algunos servidores en el extranjero
Para informarse de la actualidad mundial, se puede acceder al servicio CNN. Para los amantes de la música se encuentra el servidor oficial de la MTV y para localizar distintos tipos de información está Yahoo!.
Enlaces a una zona de otra página
Para este tipo de enlace se utiliza una mezcla de las dos mezclas anteriores. Se indica el URL de la página a referenciar, luego un signo # y luego el nombre de la zona a referenciar.
Ejemplo práctico nº 5, enlaces a una zona de otra página
<HTML>
<HEAD>
<TITLE>Ejemplo 5 - Enlaces a zonas de otras páginas</TITLE>
</HEAD>
<BODY>
<H1>Enlaces a zonas de otras páginas</H1>
<P>Enlazamos a la<A HREF="ejemplo3.html#uno">la sección 1 del ejemplo 3</A>.</P>
<P>Enlazamos a la<A HREF="ejemplo3.html#cinco">la sección 5 del ejemplo 3</A>.</P>
</BODY>
</HTML>
Guardamos el fichero de texto con el nombre ejemplo5.html y lo abriremos en el navegador, y debe aparecer la siguiente pantalla:
Enlaces a zonas de otras páginas
Enlazamos a la la sección 1 del ejemplo 3.
Enlazamos a la la sección 5 del ejemplo 3.
Bueno amigos, eso es todo por hoy, les recomiendo que practiquen el tema, hasta luego a todos, atentos a la próxima unidad estará más interesante, ¡Éxito a todos!.
No hay comentarios:
Publicar un comentario