Rutas de archivos HTML

Autor: | Última modificación: 30 de noviembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

El día a día de un desarrollador web requiere mucho más que escribir líneas de código en un lenguaje determinado. Además, un proyecto necesita organización y comunicación entre archivos para funcionar. En este post, te enseñaremos qué son y cómo funcionan las rutas de archivos HTML, fundamentales para enlazar archivos dentro de proyectos web.

¿Qué son las rutas de archivos HTML?

Las rutas de archivos HTML son un estándar de acceso a archivos dentro del directorio de un proyecto web, basado en puntos y barras oblicuas. Estas rutas son las que insertamos en los distintos métodos para insertar medios en un proyecto web. Es decir, en la propiedad src de las etiquetas de medios como img y script.

Entender cómo funcionan las rutas de archivos HTML es fundamental para organizar archivos de un proyecto frontend. Ten esto presente cuando vayas a reorganizar tus archivos o a la hora de empezar un nuevo proyecto web.

De manera general, las rutas de archivos HTML funcionan en relación al archivo en que el que estamos importando. Es decir, las rutas señalan el camino que se debe tomar desde el archivo actual hasta el archivo que queremos importar. A continuación, te explicamos esto más a fondo.

¿Cómo funcionan las rutas de archivos HTML?

Las rutas de archivos HTML funcionan como mapas del camino que hay que recorrer entre los directorios de nuestro proyecto. De manera general, estas definen las rutas de carpetas y archivos dentro del mismo directorio separándolas por barras oblicuas. Para acceder a otros niveles del directorio, usamos los puntos. A continuación, te ponemos algunos ejemplos para que aclaremos esta idea.

Acceder a un archivo dentro del mismo directorio

Para acceder a un archivo dentro del mismo directorio, que no forma parte de otra carpeta, simplemente usamos el nombre del archivo para declarar su ruta. Es decir, si estamos accediendo a un archivo hermano del actual, simplemente insertamos lo siguiente:

nombreArchivo.formato.

Para acceder a un archivo dentro del mismo directorio, pero que se encuentra en una carpeta distinta, deberemos usar las barras oblicuas. En este caso, el archivo actual y la carpeta serían hermanos. Este tipo de rutas de archivos HTML se declaran de la siguiente manera:

nombreCarpeta/nombreArchivo.formato.

La estructura anterior también se utiliza cuando estamos manejando una referencia a un subdirectorio del archivo actual:

subdirectorio/nombreArchivo.formato

Acceder a un archivo arriba del archivo actual

Ya hemos visto cómo acceder a un archivo inferior al actual. Ahora, para acceder a un archivo encima o superior al archivo actual, deberemos usar dos puntos seguidos. Es decir, de la siguiente manera:

../nombreArchivo.formato

Ten presente que puedes combinar estas opciones para lograr dirigirte al archivo que desees. Es decir, puedes acceder a un archivo superior que, a la vez, se encuentre en una subcarpeta del directorio superior.

Esperamos que en este post hayas comprendido la importancia de la organización de archivos a la hora de desarrollar para la web. Si quieres conocer más sobre este ejercicio, te invitamos a leer el artículo sobre el manejo de archivos en Mozilla Developer Network.

¿Qué sigue?

Ahora que sabes cómo funcionan las rutas de archivos HTML, ¡te invitamos a utilizarlas en tus propios proyectos web! Si quieres seguir aprendiendo sobre la creación y desarrollo de este tipo de proyectos, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio donde aprenderás los conceptos, lenguajes y herramientas fundamentales para este ejercicio. ¡Pide información y transforma tu futuro!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!