Cómo navegar por el árbol de una página web mediante enlaces html

¿Estás familiarizado con la etiqueta enlace?  ¿Es posible que incluso hayas visto ya la utilidad de las anclas?

En este caso esta entrada es para ti.

Cuando empezamos a aprender html típicamente solemos usar una única hoja llamada index.html, tablas.html, mapaImagen.html… o demás.

En el nivel más principiante suele ser suficiente escribir todo en una única hoja.

¿Pero y cuando aprendemos más?

A medida que avanzamos en conocimientos empezamos a plantearnos como llamar imágenes, hojas de estilos, scripts externos… Es entonces cuando se nos plantea la necesidad de ser capaces de llamar archivos que que se encuentren en otras carpetas.

Por ejemplo una carpeta que almacena todas las imágenes juntas, otras que almacena todos los estilos,… tantas como más compleja sea la web.

Nos estamos refiriendo al concepto de árbol de arquitectura web.

Llega un momento que dado un punto de referencia, cobra sentido la expresión ir para arriba, aguas arriba, subir un nivel o para abajo, aguas abajo, bajar un nivel en el árbol que representa a nuestro proyecto web.

Conceptos básicos

• La navegación entre archivos toma como punto de referencia el documento concreto en el que estemos escribiendo en un momento determinado.
• Si escribimos / indicamos que debemos situarnos justo en el inicio de la raíz del árbol. Esta es una estrategia que no recomiendo porqué suele dar problemas.
• Si escribimos ../ subimos al nivel inmediatamente superior.
• si escribimos nombrearchivo.html es porqué este archivo esta directamente en el mismo nivel que el punto de referencia.
• si escribimos nombreCarpeta/archivo.html es porqué en el mismo nivel que nuestra referencia hay una carpeta. Entramos dentro de esta carpeta y dentro de la carpeta se debe encontrar el archivo.html.

Veamos algunos ejemplos típicos dado el siguiente árbol web que mostraremos desplegado horizontalmente y verticalmente.

Acceder a un documento situado en un nivel superior

El archivo index.html señalado en azul en la imagen se encuentra directamente dentro de la carpeta servicios. (la imagen engaña un poco, no es el que queda dentro de la carpeta docencia)

Tomando este punto de referencia, si por ejemplo quisiéramos acceder al index.html que se encuentra en el nivel superior escribiríamos

<a href="../index.html">Ir a inicio de la web</a>

Acceder a un documento situado dos o más niveles superiores

El archivo index.html señalado en azul en la imagen se encuentra directamente dentro de la carpeta tutorial-js.

Tomando este punto de referencia, si por ejemplo quisiéramos acceder al index.html que se encuentra en el nivel superior escribiríamos

<a href="../../../index.html">Ir a inicio</a>
<!--Otra alternativa sería escribir -->
<a href="/index.html">Ir a inicio</a>
<!--Pero la segunda solución suele dar problemas porqué a menudo desconocemos dónde está realmente la raíz de la web para el servidor-->

Tomando este punto de referencia marcado en la imagen, si por ejemplo quisiéramos acceder al index.html que se encuentra dentro de la carpeta marketing entonces escribiríamos.

<a href="../../marketing/index.html">Ir a marketing</a>

Acceder a un documento situado en un nivel inferior

El archivo index.html señalado en azul en la imagen se encuentra directamente dentro de la carpeta servicios. La imagen engaña un poco, no es el que queda dentro de la carpeta docencia aunque lo parece.

Si por ejemplo quisiéramos acceder al index.html que se encuentra en la carpeta tutorial-html entonces escribiríamos:

<a href="docencia/tutorial-html/index.html">Ir al tutorial-html</a>

Si por ejemplo quisiéramos acceder al index.html que se encuentra en la carpeta copywriting entonces escribiríamos:

<a href="copywriting/index.html">Ir a copywriting</a>

Errores típicos

Los errores típicos son:

• subir un nivel de más
• bajar un nivel de menos
• poner la barra «/» justo delante de la dirección del enlace y no darse cuenta que con esto te estás referenciando en la raíz del proyecto web.
• al usar «../» para subir un nivel equivocarse y poner el nombre de la carpeta superior cuando no se debe hacer.