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

Print Friendly, PDF & Email
Como navegar por el árbol de una página web mediante enlaces html
5 (100%) 2 votos

¿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

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!

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.