Ediciones ENI Editorial | líder en informática
Los enlaces
Inserción de enlaces para unir páginas
Por su propia esencia, la Web está formada por enlaces de hipertexto: las páginas se relacionan por medio de este tipo de enlaces. Y el HTML contiene la palabra hipertexto en su abreviatura, que se corresponde con la H de HyperText Markup Language.
Puede unir las páginas entre ellas, de un sitio web a otro, así como dentro de una misma página de su sitio web. Puede insertar enlaces a direcciones de correo, a recursos sociales y para descargar archivos, por ejemplo.
Para terminar, observe que los enlaces son elementos de tipo en línea (inline).
La estructura de los enlaces
La inserción de un enlace se hace con el elemento <a> (apor anchor en inglés). Este elemento tiene varios atributos:
-
href es indispensable y permite indicar la URL de destino.
-
hreflang puede especificar el idioma del destino. Los valores pueden ser por ejemplo en, it, es, etc.
-
rel permite indicar el tipo de relación del enlace que se establece.
-
target da el contexto de apertura del enlace en el navegador.
Como mínimo, tenemos esta estructura:
<a href="inscripcion.html">Inscríbase </a> Tenemos:
-
La etiqueta de apertura <a>.
-
La referencia del enlace, href; aquí es una página del mismo sitio web, inscripcion.html.
-
El contenido del enlace es Inscríbase. Esto se corresponde con el texto en el que los visitantes deberán pulsar para activar el enlace.
-
La etiqueta de cierre </a>.
Los enlaces a las páginas
Los enlaces que va a insertar tendrán varios destinos posibles. Pueden apuntar a una página de su sitio web o a una página de otro sitio web. En el primer caso, la URL podrá ser relativa y, en el segundo, la URL deberá ser absoluta.
Una URL relativa se crea respecto a la página que contiene el enlace. A continuación se muestran algunos ejemplos:
-
La página de destino se encuentra en el mismo directorio que la página que contiene el enlace: <a href=inscripcion.html">Inscríbase</a>.
-
La página de destino está en un subdirectorio respecto a la página que contiene el enlace: <a href="usuarios/inscripcion.html">Inscríbase</a>.
-
La página de destino está en un directorio padre respecto a la página que contiene el enlace: <a href="../inscripcion.html">Inscríbase</a>.
Se crea una URL absoluta indicando la dirección completa de la página:
-
<a href="http://www.el-sitio.es/viajes/ venecia.html">Venecia</a>.
Los enlaces internos
Cuando tiene un documento largo, puede ser muy útil para los visitantes crear enlaces internos a la página, de modo que puedan desplazarse fácil y rápidamente por esta misma página.
La primera etapa consiste en identificar, con el atributo id, los elementos HTML que deberán ser destinos de los enlaces.
Imaginemos un largo documento con tres partes: Introducción, Resultados y Conclusión. Los títulos de estas tres partes se situarán en un elemento <h2>. Por lo tanto, tendremos esta estructura:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web</title>
</head>
<body>
<h1>Informe</h1>
<h2 id="introduccion">Introducción</h2>
<p>Sed ut perspiciatis unde omnis iste natus error...</p>
<h2 id="resultados">Resultados</h2>
<p>Sed ut perspiciatis unde omnis iste natus error...</p>
<h2 id="conclusion">Conclusión</h2>
<p>Integer posuere erat a ante venenatis...</p>
</body>
</html>...El contexto de apertura del enlace
Cuando crea un enlace, puede especificar el contexto de apertura del destino con el atributo target. Este atributo acepta cuatro valores:
-
_blank: el destino se abre en una nueva ventana o una nueva pestaña.
-
_padre: el destino se abre en el elemento padre del destino. Esto es útil cuando gestiona capas de pantalla con el elemento <iframe>.
-
_self: el destino se abre en la misma ventana que el enlace. Por lo tanto, no hay cambio de contexto, es el contexto por defecto.
-
_top: el destino se abre en el padre superior en la jerarquía de las ventanas.
Las relaciones de los enlaces
El atributo rel permite especificar el tipo de relación del enlace. Observe que encontramos este atributo en el elemento <link>, que hemos visto anteriormente. El W3C ofrece un determinado número de valores posibles para el atributo rel, pero deja la opción a los desarrolladores de utilizar sus propios valores. Por lo tanto, es un sistema abierto.
A continuación se muestran los valores que se pueden utilizar:
-
alternate indica que el enlace apunta a una versión alternativa del documento.
-
archives especifica que el documento de destino es un archivo.
-
author permite indicar el nombre del autor del documento.
-
first señala que el documento de destino es el primero de una serie.
-
last indica que el documento de destino es el último de una serie.
-
prev señala que el documento de destino es el documento anterior al documento actual.
-
next permite indicar que el documento de destino es el documento siguiente al documento actual.
-
nofollow especifica que el enlace no está aprobado por el autor. Este valor creado por Google indica, en principio, que la indexación no debe tener en cuenta los enlaces presentes en esta página de destino.
Los enlaces al correo electrónico
Es muy habitual utilizar un enlace a una dirección de correo para establecer un contacto entre el visitante y los responsables de un sitio web. Cuando el visitante pulsa el enlace, su aplicación de correo se abre con la dirección de correo ya cumplimentada.
Para esto, es suficiente con indicar en el atributo href el prefijo mailto: seguido de la dirección de correo deseada. A continuación se muestra esta sintaxis:
<p><a href="mailto:juan@perez.org">Póngase en contacto conmigo</a></p> En la era de la predominancia de las redes sociales, es posible crear enlaces a sus cuentas en estas plataformas.
La sintaxis es muy similar a la que hemos visto anteriormente:
-
Enlace a Twitter: <a href="https://twitter.com/mi-cuenta">.
-
Enlace a Facebook: <a href="https://facebook.com/mi-cuenta">.
-
Enlace a LinkedIn: <a href="https://es.linkedin.com/in/mi-cuenta">.
Los enlaces de descarga
A pesar de la creciente importancia de los sitios web para compartir de archivos, los famosos box, puede perfectamente ofrecer a sus visitantes descargar un archivo por medio de un enlace.
Para hacer esto, indique simplemente el nombre completo del archivo en el atributo href, sin omitir su extensión. A continuación se muestra un ejemplo:
<p>Descargue el archivo <a href="programa.pdf">PDF del programa</a>.</p> En este ejemplo, se trata de un archivo PDF. Si el ordenador del visitante tiene un software para abrir este tipo de documento, se abrirá. Si no hay disponible ningún software, el navegador ofrecerá la descarga del archivo.
Enlaces en imágenes
En todos los ejemplos que hemos estudiado anteriormente, los enlaces eran textuales. Es decir, los visitantes tenían que pulsar el texto presentado como contenido del elemento <a>. Pero perfectamente puede utilizar imágenes.
A continuación se muestra un ejemplo de la utilización de una imagen para crear un enlace:
<p><a href="ayuda.html"><img src="ayuda.png"></a></p> La estructura es muy sencilla:
-
El enlace <a> utiliza el atributo href para indicar la URL de destino.
-
El contenido del enlace <a> es una imagen <img> que tiene su atributo src para indicar el origen de la imagen.
