La característica que más ha influido en el espectacular éxito del web ha sido, además de su capacidad multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo mediante enlaces hipertexto (o hiperenlaces). Los navegadores destacan los elementos identificados como enlaces con colores o con subrayados.
La única etiqueta HTML relacionada con el hipertexto es <A> (que proviene de «ancla»). Para incluir un ancla en un documento hay que seguir los siguientes pasos:
<A HREF="ew_100.htm">Sumario</A> |
aparecería de este modo:
|
Esta entrada convierte la palabra «Sumario» en un enlace al documento ew_100.htm, que está en el mismo directorio que el documento actual.
Rutas relativas y rutas absolutas
Es posible enlazar a otros documentos situados en otros directorios especificando la ruta relativa desde el documento actual. Por ejemplo, un enlace a un documento hipotético llamado ew_a-f.html ubicado en el subdirectorio Glosario sería así:
<A HREF="Glosario/ew_a-f.htm">Glosario HTML: A-F</A> |
Estos enlaces se llaman enlaces relativos porque en ellos se especifica la ruta al documento enlazado relativa al documento actual. También pueden usarse las rutas absolutas (la dirección URL completa) del documento, pero los enlaces relativos son más eficientes durante el acceso al servidor. Las rutas utilizan la sintaxis UNIX. La sintaxis para acceder al directorio superior (el directorio que contiene el subdirectorio actual) es .. (punto punto).
Si, por ejemplo, estabas en el documento hipotético ew_a-f.htm, en el subdirectorio Glosario, y quisieras volver a este documento, tu enlace debería ser como este:
<A HREF="../ew_15.htm">Manual de edición en HTML: Enlaces</A> |
Generalmente, deberías utilizar enlaces relativos por tres motivos:
URLs
Un URL (Localizador Uniforme de Recursos) especifica la localización de ficheros de otros servidores, incluyendo el tipo de recurso a que se accede, la dirección del servidor y la ubicación del fichero. La sintaxis es:
esquema://servidor.dominio[:puerto]/ruta/fichero?argumento |
Los esquemas más comunes son los siguientes:
|
Por ejemplo, para incluir un enlace a este manual, deberías escribir:
<A HREF="http://www.geocities.com/Eureka/9412/ew_100.htm">Manual de edición en HTML</A> |
Secciones
Las anclas puedes usarse para trasladar al lector a una sección particular de un documento. Este manual es un buen ejemplo del uso de anclas en un documento, pues desde el sumario se puede acceder a secciones concretas y dentro de los temas es posible ir a otras secciones relacionadas.
Enlaces a secciones de otros documentos
Una sección que necesita ser enlazada debe estar marcada con un ancla. El ancla se crea como se puede ver en el siguiente ejemplo:
<A NAME="02"><H3>Mi primer documento HTML</H3></A> |
Para enlazar a una sección concreta de otra página sólo hay que crear un enlace a esa página añadiendo el carácter # y el nombre del ancla.
El siguiente ejemplo:
<A HREF="ew_102.htm#02">Mi primer documento HTML</A> |
llevaría a la sección Mi primer documento HTML, situada en el capítulo 1 de este manual. La primera línea en la ventana del navegador debería ser el título de la sección.
Enlaces a secciones del mismo documento
Se emplea la misma técnica, pero excluyendo el nombre del fichero. Por ejemplo, para ir a la sección Rutas relativas y rutas absolutas de esta misma página, hay que escribir:
<A HREF="#01">Rutas relativas y rutas absolutas</A> |
Asegúrate de incluir la etiqueta <A NAME="nombre_del_ancla"> allí a donde quieres que salte el enlace.
Mailto
Puedes facilitar al lector el envío de mensajes electrónicos incluyendo el atributo mailto en un enlace. El formato es:
<A HREF="mailto:identificador@servidor">Nombre</A> |
Si quieres que la ventana de correo electrónico se abra con el campo Asunto rellenado con un texto por defecto puedes incluir el argumento subject como aparece en el siguiente ejemplo:
<A HREF="mailto:jorgeff@mailexcite.com?subject='Comentario'">Jorge Franganillo</A> |
<A HREF="http://www.rtve.es" onMouseOver="window.status='Radio Televisión Española'; return true" onMouseOut="window.status=''; return true">RTVE</A> |
la barra de estado del navegador mostraría un texto alternativo, como se puede comprobar a continuación:
|