Hasta aquí, hemos podido ver que una página web es un archivo HTML en el que podemos incluir, entre otras cosas, textos formateados a nuestro gusto e imágenes (las veremos con detalle enseguida). Del mismo modo, un sitio web podrá ser considerado como el conjunto de archivos, principalmente páginas HTML e imágenes, que constituyen el contenido al que el navegante tiene acceso.

Sin embargo, no podríamos hablar de navegante o de navegación si estos archivos HTML no estuviesen debidamente conectados entre ellos y con el exterior de nuestro sitio por medio de enlaces hipertexto. En efecto, el atractivo original del HTML radica en la posible puesta en relación de los contenidos de los archivos introduciendo referencias bajo forma de enlaces que permitan un acceso rápido a la información deseada. De poco serviría en la red tener páginas aisladas a las que la gente no puede acceder y desde las que la gente no puede saltar a otras.

Un enlace puede ser fácilmente detectado por el usuario en una página. Basta con deslizar el puntero del ratón sobre las imágenes o el texto y ver como cambia de su forma original transformándose por regla general en una mano con un dedo señalador. Adicionalmente, estos enlaces suelen ir, en el caso de los textos, coloreados y subrayados para que el usuario no tenga dificultad en reconocerlos.

Sintaxis de un enlace

Para colocar un enlace, nos serviremos de las etiquetas A y su cierre. Dentro de la etiqueta de apertura deberemos especificar asimismo el destino del enlace. Este destino será introducido bajo forma de atributo, el cual lleva por nombre "href".

La sintaxis general de un enlace es por tanto de la forma:

<a href="destino">contenido</a>

Siendo el "contenido" un texto o una imagen. Es la parte de la página que se colocará activa y donde deberemos pulsar para acceder al enlace. Por su parte, "destino" será una página, un correo electrónico o un archivo.

Por ejemplo, un enlace a la home de DesarrolloWeb, tendría esta manera

<a href="http://www.desarrolloweb.com/">Home de Desarrolloweb.com</a>

Ahora, si queremos que el contenido del enlace sea una imagen y no un texto, podremos colocar la correspondiente etiqueta IMG dentro de la etiqueta A.

<a href="http://www.escuela.it"><img src="logo.jpg"></a>

El aspecto de los enlaces

Nosotros mediante el HTML, y las hojas de estilo CSS, podemos definir el aspecto que tendrán los enlaces en una página. Sin embargo, ya de manera predeterminada el navegador los destaca para que los podamos distinguir. Generalmente encontraremos a los enlaces subrayados y coloreados en azul, aunque esta regla depende del navegador del usuario y de sus estilos definidos como predeterminados.

En el caso de las imágenes que sirvan de enlace, tradicionalmente aparecían encuadradas en un marco azul por defecto. Aunque ese estilo predeterminado también cambiará dependiendo del navegador y de hecho, en 2016, la mayoría de navegadores ya no ponen ese marco azul, así que tenemos un ejemplo de cómo los estilos predeterminados pueden cambiar con el tiempo y con versiones de navegador.

Por ese incierto estilo predeterminado siempre es interesante marcar por nosotros mismos el estilo que los enlaces deben tener en nuestra página. Ese estilo lo correcto es colocarlo en el código de CSS, pero también se puede definir en la etiqueta BODY. Eso es algo que se explicó en el artículo Atributos generales de la página.

Tipos de enlaces

Para estudiar en profundidad los enlaces tenemos que clasificarlos por su tipo, porque dependiendo ese tipo algunas cosas cambiarán a la hora de construirlos.

En función del destino los enlaces son clásicamente agrupados del siguiente modo:

• Enlaces internos: los que se dirigen a otras partes dentro de la misma página.
• Enlaces locales: los que se dirigen a otras páginas del mismo sitio web.
• Enlaces remotos: los dirigidos hacia páginas de otros sitios web.
• Enlaces con direcciones de correo: para crear un mensaje de correo dirigido a una dirección.
• Enlaces con archivos: para que los usuarios puedan hacer download de ficheros.

Todos estos tipos de enlaces los iremos repasando en los próximos artículos del Manual de HTML.