Enlaces

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.

<nav>
<a href="index.html">Principal</a> |
<a href="fotos.html">Fotos</a> |
<a href="videos.html">Videos</a> |
<a href="contacto.html">Contacto</a>
</nav>

Listado 2-25: Enlazando el documento a otros documentos con el elemento <a>

El elemento <nav> en el Listado 2-25 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).

Figura 2-12: Hipervínculos

40 | P á g i n a HTML
 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 2-25, el
navegador descarga el archivo contacto.html y muestra su contenido en la pantalla, como
ilustra la Figura 2-13 (este ejemplo asume que hemos creado un archivo llamado
contacto.html).

Figura 2-13: Navegando entre documentos

Hágalo usted mismo: cree un nuevo archivo llamado contacto.html. Copie el

código HTML del archivo index.html en el archivo contacto.html. Reemplace
el elemento <nav> en ambos archivos con el código del Listado 2-25.
Cambie el título en el elemento <header> del archivo contacto.html por el
texto «Enviar un Mensaje». Abra el archivo index.html en su navegador y
haga clic en la opción Contacto. El navegador debería abrir el archivo
contacto.html y mostrarlo en pantalla, según ilustra la Figura 2-13.

Los documentos enlazados en el menú del Listado 2-25 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.

<footer>
<address>Toronto, Canada</address>
<small>&copy; 2016 <a href="http://www.jdgauchat.com">J.D
Gauchat</a></small>
</footer>

Listado 2-26: Enlazando el documento a documentos en otros sitios web con el elemento <a>

El código en el Listado 2-26 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).

Figura 2-14: Enlace a un documento externo

HTML 41 | P á g i n a
 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.

<footer>
<address>Toronto, Canada</address>
<small>&copy; 2016 <a href="http://www.jdgauchat.com"
target="_blank">J.D Gauchat</a></small>
</footer>

Listado 2-27: Abriendo un enlace en una nueva ventana

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.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="misestilos.css">
</head>
<body>
<header id="titulo">
Este es el título
</header>
<nav>
Principal | Fotos | Videos | Contacto
</nav>
<main>
<section>
<p>Artículo 1</p>

42 | P á g i n a HTML
 <p>Artículo 2</p>
<p>Artículo 3</p>
<p>Artículo 4</p>
<p><a href="#titulo">Volver</a></p>
</section>
</main>
<footer>
&copy; Derechos Reservados 2016
</footer>
</body>
</html>

Listado 2-28: Creando enlaces a elementos en el mismo documento

En el documento del Listado 2-28, 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.

Hágalo usted mismo: actualice el código en su archivo index.html con el

código del Listado 2-28. Agregue más párrafos con elementos <p> para
generar más contenido dentro del elemento <section>. Abra el
documento en su navegador, desplace la página hacia abajo, y haga clic en el
enlace Volver. Si la cabecera no es visible, el navegador desplazará la página
hacia arriba para mostrarla en pantalla.

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.

<footer>
<address>Toronto, Canada</address>
<small>&copy; 2016 <a href="mailto:[email protected]">J.D
Gauchat</a></small>
</footer>

Listado 2-29: Enviando un correo electrónico

Hágalo usted mismo: reemplace el elemento <footer> en su archivo

index.html con el código del Listado 2-29. Abra el documento en su
navegador y haga clic en el enlace. El sistema debería abrir su programa de
correo para enviar un mensaje a la cuenta [email protected].

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

HTML 43 | P á g i n a
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.

<article>
<p>La muerte es una quimera: porque mientras yo existo, no existe la
muerte;<br>y cuando existe la muerte, ya no existo yo.<br>Epicuro de
Samos</p>
<footer>
<a href="http://www.formasterminds.com/content/miarchivo.pdf"
ping="http://www.formasterminds.com/control.php" download>Clic aquí
para descargar</a>
</footer>
</article>

Listado 2-30: Aplicando los atributos ping y download

En el ejemplo del Listado 2-30, 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).

Hágalo usted mismo: reemplace el elemento <article> en su archivo

index.html por el código del Listado 2-30 y abra el documento en su
navegador. Cuando haga clic en el enlace, el navegador debería descargar el
archivo PDF. Elimine el atributo download para comparar el
comportamiento del navegador.

IMPORTANTE: el propósito del atributo ping es ejecutar código en el

servidor. En el ejemplo hemos usado un archivo con código PHP, pero podría
hacer lo mismo con cualquier otro lenguaje de programación que funcione
en el servidor, como Python o Ruby. El modo de programar el archivo

44 | P á g i n a HTML
 asignado al atributo ping depende del lenguaje que usemos y lo que
queramos lograr. El tema va más allá del propósito de este libro. Para
obtener más información sobre PHP, visite nuestro sitio web y siga los
enlaces de este capítulo.

Imágenes
Las imágenes pueden se pueden considerar el segundo medio más importante en la Web.
HTML incluye los siguientes elementos para introducir imágenes en nuestros documentos.

<img>—Este elemento inserta una imagen en el documento. El elemento requiere del

atributo src para especificar la URL del archivo con la imagen que queremos incorporar.
<picture>—Este elemento inserta una imagen en el documento. Trabaja junto con el
elemento <source> para ofrecer múltiples imágenes en diferentes resoluciones. Es útil
para crear sitios web adaptables, como veremos en el Capítulo 5.
<figure>—Este elemento representa contenido asociado con el contenido principal, pero
que se puede eliminar sin que se vea afectado, como fotos, vídeos, etc.
<figcaption>—Este elemento introduce un título para el elemento <figure>.

Para incluir una imagen en el documento, solo necesitamos declarar el elemento <img> y
asignar la URL del archivo al atributo src.

<article>
<p>La muerte es una quimera: porque mientras yo existo, no existe la
muerte;<br>y cuando existe la muerte, ya no existo yo.<br>Epicuro de
Samos</p>
<img src="miimagen.jpg">
</article>

Listado 2-31: Incluyendo una imagen en el documento

El código del Listado 2-31 carga la imagen del archivo miimagen.jpg y la muestra en
pantalla en su tamaño original, como lo ilustra la Figura 2-15.

Figura 2-15: Imagen en el documento

HTML 45 | P á g i n a
 La imagen se representa en su tamaño original, pero podemos definir un tamaño
personalizado y algunos parámetros de configuración usando el resto de los atributos
disponibles para el elemento <img>.

width—Este atributo declara el ancho de la imagen.

height—Este atributo declara la altura de la imagen.
alt—Este atributo especifica el texto que se muestra cuando la imagen no se puede cargar.
srcset—Este atributo nos permite especificar una lista de imágenes de diferentes
resoluciones que el navegador puede cargar para el mismo elemento.
sizes—Este atributo especifica una lista de media queries (consulta de medios) junto con
distintos tamaños de imágenes para que el navegador decida qué mostrar según la resolución
de la pantalla. Estudiaremos media queries y diseño web adaptable en el Capítulo 5.
crossorigin—Este atributo establece las credenciales para imágenes de origen cruzado
(múltiples orígenes). Los valores posible son anonymous (sin credenciales) y use-
credentials (requiere credenciales). Estudiaremos la tecnología CORS y cómo trabajar
con imágenes procedentes de diferentes orígenes en el Capítulo 11.

Los atributos width y height determinan las dimensiones de la imagen, pero no tienen
en cuenta la relación. Si declaramos ambos valores sin considerar la proporción original de la
imagen, el navegador deberá estirar o achatar la imagen para adaptarla a las dimensiones
definidas. Para reducir la imagen sin cambiar la proporción original, podemos especificar uno
solo de los atributos y dejar que el navegador calcule el otro.

<article>
<p>La muerte es una quimera: porque mientras yo existo, no existe la
muerte;<br>y cuando existe la muerte, ya no existo yo.<br>Epicuro de
Samos</p>
<img src="miimagen.jpg" width="150" alt="Arboles en mi patio">
</article>

Listado 2-32: Reduciendo el tamaño de la imagen

El código en el Listado 2-32 agrega el atributo width con el valor 150 al elemento <img>
introducido en el ejemplo anterior. Esto reduce el ancho de la imagen a 150 píxeles, pero
como el atributo height no se ha declarado, la altura de la imagen se calcula
automáticamente considerando las proporciones originales de la imagen. El resultado se
muestra en la Figura 2-16.

Figura 2-16: Imagen con un tamaño personalizado

46 | P á g i n a HTML
 Hágalo usted mismo: descargue la imagen miimagen.jpg desde nuestro sitio
web. Reemplace el elemento <article> en su archivo index.html por el
código del Listado 2-31 y abra el documento en su navegador. Debería ver
algo similar a la Figura 2-15. Repita el proceso con el código del Listado 2-32.
Ahora debería ver la imagen reducida, según se ilustra en la Figura 2-16. El
elemento <img> en el código del Listado 2-32 también incluye el atributo
alt. Para probar este atributo, borre el archivo miimagen.jpg y actualice el
documento en su navegador. Como el navegador ya no puede encontrar el
archivo de la imagen, mostrará el texto asignado al atributo alt en su lugar.

Algunas imágenes, como los iconos, son importantes porque otorgan un significado al
resto del contenido, pero otras, como la imagen de estos ejemplos, actúan como
complemento y se pueden eliminar sin que afecten al flujo de información. Cuando esta clase
de información se encuentra presente, se puede utilizar el elemento <figure> para
identificarla. Este elemento se suele implementar junto con el elemento <figcaption> para
incluir texto descriptivo. En el siguiente ejemplo usamos estos dos elementos para identificar
nuestra imagen y mostrar su título al usuario.

<article>
<p>La muerte es una quimera: porque mientras yo existo, no existe la
muerte;<br>y cuando existe la muerte, ya no existo yo.<br>Epicuro de
Samos</p>
<figure>
<img src="miimagen.jpg" width="150" alt="Arboles en mi patio">
<figcaption>Arboles en mi patio<figcaption>
</figure>
</article>

Listado 2-33: Identificando la imagen con el elemento <figure>

Por defecto, los navegadores asignan márgenes laterales al elemento <figure>. El

resultado se muestra en la Figura 2-17.

Figura 2-17: Imagen junto a su título

HTML 47 | P á g i n a