Conectar documentos con otros documentos mediante enlaces es lo que hace posible la Web. Como mencionamos anteriormente, un enlace es contenido asociado a una URL que indica la ubicación de un recurso. Cuando el usuario hace clic en el contenido (texto o imagen), el navegador descarga el recurso. HTML incluye el siguiente elemento para crear enlaces.
<a>—Este elemento crea un enlace. El texto o la imagen que representa el enlace se incluye entre las etiquetas de apertura y cierre. El elemento incluye el atributo href para especificar la URL del enlace.
Los enlaces se pueden crear para conectar el documento actual con otros documentos en el mismo sitio web o en otros sitios. Por ejemplo, podemos enlazar las opciones en el menú de nuestra página web a otros documentos en nuestro servidor.
El elemento <nav> en el Listado incluye cuatro elementos <a> por cada opción del menú. Los elementos incluyen el atributo href para indicar al navegador el documento que tiene que abrir cuando el usuario hace clic en el enlace. Por defecto, los enlaces se muestran subrayados y en color azul (o violeta si el usuario ya ha hecho clic en ellos).
Cuando el usuario hace clic en cualquiera de estos enlaces, el navegador descarga el documento indicado por el atributo href y muestra su contenido en pantalla.
Por ejemplo, si hacemos clic en el enlace creado para la opción Contacto en el código del Listado, el navegador descarga el archivo contacto.html y muestra su contenido en la pantalla (este ejemplo asume que hemos creado un archivo llamado contacto.html).
Los documentos enlazados en el menú del Listado pertenecen al mismo sitio web y esa es la razón por la que usamos URL relativas para especificar su ubicación, pero si lo que necesitamos es crear enlaces a documentos que no están almacenados en nuestro servidor, tenemos que usar URL absolutas, como en el siguiente ejemplo.
El código en el Listado agrega un enlace al pie de página de nuestro ejemplo que apunta al sitio web www.jdgauchat.com. El enlace trabaja como cualquier otro, pero ahora el navegador tiene la URL completa para acceder al documento (en este caso, el archivo index del sitio web con el domino www.jdgauchat.com).
El elemento <a> puede incluir el atributo target para especificar el destino en el cual el documento será abierto. El valor _self se asigna por defecto, lo que significa que el documento se abre en la misma ubicación que el documento actual (el mismo recuadro o ventana). Otros valores son _blank (el documento se abre en una nueva ventana), _parent (el documento se abre en el recuadro padre), y _top (el documento se abre en la ventana actual).
Como veremos más adelante, los documentos se pueden abrir en recuadros insertados dentro de otros documentos. El valor del atributo target considera esta jerarquía de recuadros, pero debido a que los recuadros no se usan de forma frecuente en sitios web modernos, los dos valores más comunes son _self, para abrir el documento en la misma ventana, y _blank, para abrir el documento en una nueva ventana. El siguiente ejemplo implementa el último valor para acceder al dominio www.jdgauchat.com desde una nueva ventana, de modo que el usuario nunca abandona nuestro sitio web.
Además de conectar un documento con otro, los enlaces también se pueden crear hacia otros elementos dentro del mismo documento. Esto es particularmente útil cuando el documento genera una página extensa que el usuario debe desplazar para poder ver todo su contenido. Aprovechando esta característica, podemos crear enlaces hacia diferentes partes de una página. Cuando el usuario quiere ver algo que no es visible al momento, puede hacer clic en estos enlaces y el navegador desplaza la página hasta que el elemento apuntado por el enlace aparece en la pantalla. El elemento que queremos enlazar tiene que ser identificado con el atributo id. Para crear un enlace a un elemento, debemos incluir el valor asignado a este atributo precedido por el carácter #, igual que ilustra el siguiente ejemplo.
En el documento del Listado, usamos el atributo id con el valor «titulo» para identificar el elemento <header>. Usando este valor y el carácter #, creamos un enlace al final del contenido que lleva al usuario hacia la parte superior de la página. Cuando el usuario hace clic en el enlace, en lugar de abrir un documento, el navegador desplaza la página hasta que el contenido del elemento <header> se vuelve visible.
El elemento <a> también se puede usar para crear enlaces a aplicaciones. HTML ofrece las palabras clave mailto y tel para especificar una cuenta de correo o un número de teléfono. Cuando se hace clic en un enlace de estas características, el sistema abre el programa encargado de responder a este tipo de solicitudes (enviar un correo o hacer una llamada telefónica) y le envía los datos especificados en el enlace. El siguiente ejemplo implementa la palabra clave mailto para enviar un correo electrónico.
Los documentos a los que se accede a través de un enlace creado por el elemento <a> son descargados por el navegador y mostrados en pantalla, pero a veces los usuarios no necesitan
que el navegador abra el documento, sino que el archivo se almacene en sus discos duros para usarlo más adelante. HTML ofrece dos atributos para este propósito:
download—Este es un atributo booleano que, cuando se incluye, indica que en lugar de leer el archivo el navegador debería descargarlo.
ping—Este atributo declara la ruta del archivo que se debe abrir en el servidor cuando el usuario hace clic en el enlace. El valor puede ser una o más URL separadas por un espacio.
Cuando el atributo download se encuentra presente dentro de un elemento <a>, el archivo especificado por el atributo href se descarga y almacena en el disco duro del usuario. Por otro lado, el archivo que indica el atributo ping no se descarga, sino que se ejecuta en el servidor. Este archivo se puede usar para ejecutar código que almacena información en el servidor cada vez que el archivo principal se descarga o para llevar un control de las veces que esta acción ocurre. En el siguiente ejemplo, implementamos ambos atributos para permitir al usuario descargar un archivo PDF.
En el ejemplo del Listado, agregamos un pie de página al artículo de ejemplos anteriores con un enlace a un archivo PDF. En circunstancias normales, un navegador moderno mostraría el contenido del archivo en pantalla, pero en este caso el atributo download obliga al navegador a descargar el archivo y almacenarlo en el disco duro.
Este ejemplo incluye un atributo ping que apunta a un archivo llamado control.php. Como resultado, cada vez que el usuario hace clic en el enlace, se descarga el archivo PDF y el código PHP se ejecuta en el servidor, lo que permite al desarrollador hacer un seguimiento de las veces que esta acción ocurre (almacenando información acerca del usuario en una base de datos, por ejemplo).
