Primeros pasos con HTML – Lección 4 – Enlaces (hipervínculos)
Hemos llegado a los fundamentos más básicos de HTML, lo que originalmente dio origen a HTML, es decir, los hipervínculos (o simplemente enlaces). Los enlaces son una forma de organizar la conexión entre diferentes materiales. Supongamos que tienes 100,000 archivos de texto, si creas un índice para ellos, incluso si en cada índice tienes 200 descripciones de documentos de texto, necesitarás 500 categorías. Para ver todas esas 500 categorías y encontrar la información que necesitas, te tomaría mucho tiempo. ¿Cómo los enlaces hacen que nuestra vida sea más fácil?
Los enlaces conectan entre sí dos documentos HTML de forma que cada documento HTML tiene un nombre único. Así, desde un documento, podemos enlazar a diez otros documentos similares o populares, lo que aumenta nuestras posibilidades de encontrar la información necesaria.
Este mismo principio se aplica en los sitios web. Las páginas de un sitio tienen nombres únicos de URL (Uniform Resource Locator - Localizador uniforme de recursos). Para escribir un nombre único de página al que nos referiremos, se utiliza la etiqueta <a></a>. Generalmente se ve de la siguiente manera:
<a href="ruta_unica">texto del enlace</a>
En este código, href es el atributo de la etiqueta A. Ya hemos visto qué son los atributos en la lección anterior. Ahora, vamos a crear otro archivo en la misma carpeta que contiene index.html. Lo llamaremos file.html y pondremos el siguiente código en él:
<html>
<head>
<title>Mi segundo documento HTML</title>
</head>
<body>
<h1>Mi segundo documento HTML</h1>
</body>
</html>
Y en index.html escribimos este código:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<p>
<a href="file.html">Enlace al segundo documento</a>
</p>
</body>
</html>
Ahora, cuando accedemos a index.html a través del navegador, tenemos un enlace que nos lleva a file.html. Vamos a practicar escribiendo las rutas a los archivos. Cuando ambos archivos están en la misma carpeta, escribimos el nombre del archivo en el atributo href, y el navegador entiende que, dado que solo se ha dado el nombre del archivo, este se encuentra en la misma carpeta que el archivo fuente. Pero, ¿qué pasa si no queremos mantener los archivos en la misma carpeta? Ahí es cuando entran en juego las rutas relativas.
Rutas relativas
Las rutas relativas reciben ese nombre porque la ruta al archivo se encuentra en relación con el archivo fuente. Vamos a crear una carpeta files en la misma carpeta que index.html. Dentro de esta carpeta moveremos el archivo file.html. Ahora, si sigues el enlace en el archivo index.html, el navegador ya no podrá encontrar el archivo file.html porque hemos cambiado su ubicación en relación con el archivo index.html.
Ahora usaremos la ruta relativa desde index.html. Para indicar una carpeta, se usa la barra diagonal (slash). Por ejemplo:
/Program Files/MSOffice/
Para indicar el inicio de la ruta, usamos ./ (punto barra diagonal). Así, la ruta a la carpeta files desde index.html será:
./files/
Ahora solo tenemos que añadir el nombre del archivo al final de la ruta para indicar que lleva al archivo file.html:
./files/file.html
Ahora vamos a modificar la ruta del archivo en index.html:
<html>
<head>
<title>Mi primer documento HTML</title>
</head>
<body>
<h1>Mi primer documento HTML</h1>
<p>
<a href="./files/file.html">Enlace al segundo documento</a>
</p>
</body>
</html>
Ahora guarda el archivo index.html y actualiza la página del navegador (debe estar abierta la página index.html). Ahora el enlace a file.html vuelve a funcionar. Además, ten en cuenta que también puedes escribirlo así:
<a href="files/file.html">Enlace al segundo documento</a>
El navegador igualmente entenderá este enlace sin necesidad de usar ./. Sin embargo, si escribes:
<a href="/files/file.html">Enlace al segundo documento</a>
Este será un camino incorrecto porque la ruta está indicada de forma absoluta, no relativa al archivo index.html. Es decir, si deseas escribir una ruta relativa, usa ./ o simplemente empieza a escribir la ruta.
Ahora hagamos el enlace inverso, desde file.html a index.html. Empezamos indicando que la ruta es relativa:
./
Ahora necesitamos indicar que el archivo está un nivel arriba, es decir, necesitamos salir del directorio files, y allí encontraremos el archivo index.html. Para eso usamos ../ (dos puntos barra diagonal).
./../
Si dentro de la carpeta files hubiera otra carpeta y en ella un archivo .html, entonces la ruta del enlace comenzaría así ./../../, es decir, por cada carpeta escribimos ../.
Y ahora añadimos el nombre del archivo index.html al final de la ruta:
./../index.html
Ahora tenemos la ruta lista. Vamos a insertarla en file.html:
<html>
<head>
<title>Mi segundo documento HTML</title>
</head>
<body>
<h1>Mi segundo documento HTML</h1>
<p>
<a href="./../index.html">Enlace al primer documento</a>
</p>
</body>
</html>
Ahora puedes navegar de una página a otra y viceversa. Mira cómo cambian las URL en el navegador de una a otra.
Ahora volvamos al momento en que mencioné las rutas que comienzan con una barra sin un punto, estas son rutas absolutas.
Rutas absolutas
Las rutas absolutas se utilizan en los sitios web en Internet. Por ejemplo, en Drupal todas las páginas del sitio se cargan desde un solo archivo index.php, por lo que cuando escribimos /, estamos indicando la ruta desde el archivo index.php. Si indicamos una ruta absoluta en nuestro index.html en el ordenador, la ruta comenzará desde el directorio raíz de tu disco. También podemos utilizar enlaces relativos en un sitio, pero los enlaces absolutos son mucho más convenientes. La razón es que cuando movemos una carpeta o archivo, las rutas relativas se romperán. Por ejemplo, si mueves un archivo a otro directorio, todas las rutas tendrán que cambiar, agregando ../ a las rutas. En este caso, las rutas absolutas son más convenientes.
Las rutas absolutas comienzan con / o con el nombre del sitio, por ejemplo https://drupalbook.org/ru/. De cualquier manera, el navegador entenderá lo que queremos decir. Las rutas absolutas tienen este formato:
/index.html
/files/file.html
/files2/file2.html
Y si queremos crear un enlace de index.html y file.html a file2.html, se verán igual, sin importar que estén en carpetas diferentes:
<a href="/files2/file2.html">enlace</a>
Como mencioné antes, este código funcionará tanto en index.html como en file.html, e incluso en file2.html se puede escribir este enlace que apunta al mismo documento.
Atributo target
El atributo target es muy importante, es necesario cuando el enlace apunta a otro sitio web desde el tuyo. Este atributo permite definir cómo se abrirá el sitio vinculado desde tu enlace:
_blank - en una nueva ventana o pestaña;
_self - en la misma ventana donde se encuentra el enlace;
_parent - en el marco principal (el uso de marcos está obsoleto, ha sido reemplazado por AJAX);
_top - elimina todos los marcos y carga la página en la ventana completa del navegador. Si no hay marcos, este valor funciona como _self.
Probablemente solo necesitaremos el valor _blank