Quobit

Cultura Digital, Tutoriales, tecnología y gadgets

Programación HTML: Enlaces

Enlaces HTML

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=”direccion”>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:
1. Enlaces a otras zonas de la misma página
2. Enlaces a otras páginas.
3. 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 constan de dos objetos:

• El enlace:
Corresponde 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 referenciado
Corresponde 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.

Ejemplo práctico de enlaces locales

<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>
</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</A>
<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</A></p>

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 más básica de referenciar un hypertexto es usar el comando:

<A href=»http://ordenador/directorio/archivo»> …

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.

Ejemplo práctico

<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>. También a un archivo localizado en otro directorio, por ejemplo, esta <A HREF=»../guiahtml.html»>guia HTML</a></P>

<H2>Referencias absolutas</H2>

<A HREF=»https://www.quobit.mx»>blog de Carlos Navarro</A> 

Enlaces a una zona de otra página

Para este tipo de enlaces se utiliza una mezcla de las dos formas anteriores. Se indica el URL de la página a referenciar, luego un signo # y luego el nombre de la zona a referenciar.

<H1>Enlaces a zonas de otras páginas</H1>

<A HREF=»https://www.quobit.mxl#nav-below»>Este link te lleva a la paginación del blog de carlosnuel</A>