Los enlaces son quizás la funcionalidad más interesante de la web, ya que permiten navegar entre el contenido, saltando de una sección a otra del sitio.
Para introducir enlaces en nuestro contenido empleamos las etiquetas <a> y </a> encerrando el contenido que deseamos convertir en enlace, que puede ser una palabra, una frase o una imagen, y para especificar a donde ira el usuario una vez que haya hecho clic sobre nuestro enlace se emplea el atributo href.
Sintaxis básica para enlaces:
<a href="destino del enlace">Texto del enlace</a>Enlazando recursos locales
Cuando necesitamos enlazar contenido que se encuentra en el mismo directorio que nuestra página web, basta con poner el nombre del archivo como destino del enlace.
Por ejemplo vamos a crear dos archivos HTML que se enlazaran entre sí, estos archivos tendrán los nombres pagina-uno.html y pagina-dos.html y el siguiente contenido:
pagina-uno.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Página Uno</title>
</head>
<body>
<h1>Página Uno </h1>
<p>Clic en el siguiente enlace para ir a la página siguiente.</p>
<p><a href="pagina-dos.html">Página dos</a></p>
</body>
</html>pagina-dos.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Página Dos</title>
</head>
<body>
<h1>Página Dos</h1>
<p>Clic en el siguiente enlace para ir a la página principal.</p>
<p><a href="pagina-uno.html">Página uno</a></p>
</body>
</html>Para que el ejemplo funcione ambos archivos deben estar en el mismo directorio.
Archivos dentro de otros directorios
Si deseamos apuntar a archivos locales dentro del mismo servidor pero en otros directorios tenemos que indicar la ruta desde nuestra página web hacia el archivo al que deseamos enlazar.
Supongamos que tenemos la siguiente estructura de archivos y directorios:
/proyecto
index.html
/categoria
pagina-uno.html
/subcategoria
otra-pagina.html
Para crear un enlace desde la página index.html al archivo pagina-uno.html y otro enlace al archivo otra-pagina.html debemos construir cada ruta indicando el nombre del directorio donde se encuentran los archivos, de manera que nuestros enlaces quedara de la siguiente forma:
Enlaces dentro de index.html
<a href="categoria/pagina-uno.html">Ir al archivo /categoria/pagina-uno.html</a>
<a href="categoria/subcategoria/otra-pagina.html">Ir al archivo /categoria/subcategoria/otra-pagina.html</a>Para poder enlazar un archivo en un directorio superior debemos construir la ruta al archivo usando ../ por cada directorio superior seguido del nombre del archivo.
Para crear un enlace en el archivo pagina-uno.html hacia el archivo index.html este debe quedar de la siguiente forma:
Enlace dentro de pagina-uno.html
<a href="../index.html">Regresar al archivo index.html</a>Y para crear un enlace desde el archivo otro-tema.html hacia el archivo index.html este debe quedar de la siguiente forma:
Enlace dentro de otro-tema.html
<a href="../../index.html">Regresar al archivo index.html</a>