Crear enlaces hipertexto

Una vez visto como introducir distintos tipos de texto y párrafos así como insertar imágenes en una página, lo único que queda por aprender para ser capaces de crear una página Web bastante completa son los enlaces hipertexto. Con ellos se pueden activar frases o palabras de la página para que al pulsar sobre ellas se salte a cualquier otra página de Internet que decidamos.

Estos enlaces hipertexto (en inglés links) no son más que unas zonas (habitualmente palabras o frases) especiales de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas. El concepto del hipertexto no es nuevo, la mayoría de los lectores lo habrán usado ya en la ayuda de Windows™ o en otros muchos sistemas, lo realmente novedoso que ofrecen estos enlaces en el WWW es la posibilidad de pulsar y navegar hasta páginas que se encuentren en el otro extremo de la tierra. El navegante puede moverse de España a Japón con una única pulsación sobre el texto adecuado. En seguida se verá lo sencillo que es incluir esta impresionante tecnología en una página web.

Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos:

1. Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web (web site). Todas estas páginas estarán (generalmente) en el mismo servidor WWW, y por tanto estarán también en el mismo ordenador. Por esta razón sólo será necesario indicar en nuestro código el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentra. Un ejemplo dirección de un enlace interno es:

Los enlaces externos permiten saltar desde una página hasta otra puede estar en cualquier otro lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la dirección completa de Internet (la URL) de la página que queremos enlazar. Por ejemplo:

Por último, cabe resaltar que aunque la mayoría de las veces los links se usan para enlazar una páginas con otras también pueden usarse con imágenes, sonido, vídeo y prácticamente cualquier tipo de fichero.

La etiqueta <a>… </a>

Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas enlaces hipertexto. Su atributo ‘href’ permite indicar cual es la página a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él. La estructura de un link es:

Los navegadores gráficos como Netscape Navigator y Microsoft Internet Explorer resaltan este texto mostrándolo de un color diferente y subrayándolo, además el cursor cambiará al situarlo sobre el texto. Los navegadores que funcionan en modo texto como Lynx resaltan los enlaces hipertexto cambiando el color del texto y de su fondo.

Veamos un ejemplo sencillo del uso de enlaces. Se ha creado un sitio web personal con 2 páginas. La página principal se encuentra en el archivo index.html y se quiere que en ella haya un enlace a otra página donde se han escrito sobre los hobbies del creador del sitio web y que se encuentra en el archivo hobbies.html. El enlace podría ser algo así:

El resultado es el que puede apreciarse en la figura 2.10 donde la palabra hobbies aparece resaltada.

Figura 2.10. Al pulsar sobre un enlace hipertexto saltaremos a otra página de Internet. Los navegadores resaltan estos enlaces para que sea fácil identificarlos.

Si no funciona un link conviene comprobar la sintaxis del código HTML. Un error común es no cerrar las comillas que tras poner la dirección de la página enlazada. Si se comete este error, además de no funcionar el enlace, es posible que desaparezcan otros elementos de la página al visualizarla.

Páginas en otros directorios

Si la página a la que queremos crear el enlace no se encuentra en el mismo directorio que la actual es necesario indicar el directorio (o ruta de directorios, path) donde está. Si en el ejemplo anterior la páginahobbies.html estuviese en el directorio varios el ejemplo anterior debería sustituirse por:

Enlaces externos

La verdadera fuerza de Internet estriba en la posibilidad de navegar con una sola pulsación por información que se encuentre en cualquier lugar del mundo. Para convertir esto en realidad existen los enlaces externos.

Algunos diseñadores web recomiendan que no se creen enlaces externos desde la página principal o home page de nuestro sitio Web para no incitar al visitante a que se vaya de la página.

La creación de uno de estos enlaces es muy similar a la creación de los enlaces locales. El único cambio radica en que el valor dado al atributo ‘href’ es la dirección completa de Internet, sea otra página web, una imagen o cualquier otro archivo. Por ejemplo, para incluir un enlace desde cualquier página a la de DMOZ (Open Directory Project) . Para ello puede emplearse:

Así de fácil. Para referirse a un archivo específico del servidor de DMOZ hay que especificar la ruta de directorios y el nombre del archivo. Un ejemplo de uso podría consistir en construir un enlace a la sección sobre Internet de este buscador. Para ello hay que incluir el siguiente link:

Un aspecto destacable de este ejemplo es que se ha especificado la ruta de directorios pero no el nombre del archivo. Con ello se consigue acceder al archivo por defecto de ese directorio. Todos los servidores web tienen un archivo por defecto de manera que si no se introduce el nombre ninguno ese archivo será el mostrado. En la mayoría de servidores el nombre elegido es index.html por lo que la dirección usada antes sería equivalente a:

Si un sitio Web consta de varias páginas es usual incluir todos los enlaces externos en una página especial dedicada a ellos como la que se muestra en la figura 2.11.

Figura 2.11. Página que agrupa todos los enlaces de un sitio web

Copyright Jorge Ferrer, Rodrigo Garcia y Victor García, licencia Documentación Libre GNU, Versión 1.1