Como navegar por el árbol de una página web mediante enlaces html

Como navegar por el árbol de una página web mediante enlaces html

5
(2)

¿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.

Ejemplo de árbol web desplegado horizontal

Acceder a un documento situado en un nivel superior

Ejemplo de árbol web

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

Como navegar por el árbol de una página web mediante enlaces html 1

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

Ejemplo de árbol web

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.

¡Hola!

Querido lector,

Este es un tema muy importante. Sería interesante que practicaras haciendo un simulacro de proyecto web y tratando de acceder desde distintos puntos a distintos archivos a modo de prueba.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media 5 / 5. Votos: 2

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.