Inicio / html / Rutas y archivos

Rutas y archivos

20 min

Principiante

¿Dónde está el archivo?

Un sitio con varias páginas suele organizarse en carpetas. Por ejemplo:

sitio/
├── index.html
├── contacto.html
└── paginas/
    └── cursos.html

Si index.html quiere enlazar a contacto.html, que está en la misma carpeta, alcanza con el nombre del archivo:

<a href="contacto.html">Contacto</a>

A esto se lo llama ruta relativa: describe dónde está el archivo respecto de la página actual, no una ubicación fija.

Entrar en una carpeta

Para enlazar desde index.html hacia paginas/cursos.html, hay que "entrar" a la carpeta paginas primero:

<a href="paginas/cursos.html">Cursos</a>

Y para volver, desde adentro de paginas/cursos.html hacia index.html (que está un nivel arriba), se usa ../ — "subí un nivel":

<a href="../index.html">Inicio</a>

Armá la ruta correcta

Responde estas preguntas para verificar tu comprensión.

Pregunta 1

Con esta estructura:

sitio/
├── index.html
├── contacto.html
└── paginas/
    └── cursos.html

Desde index.html, ¿cuál es la ruta correcta hacia cursos.html?

cursos.html paginas/cursos.html ../cursos.html sitio/paginas/cursos.html

Pregunta 2

Ahora al revés: desde paginas/cursos.html, ¿cuál es la ruta correcta de vuelta hacia index.html?

index.html paginas/index.html ../index.html ./index.html sin nada más

Pregunta 3

¿Cuál de estas dos rutas es una ruta relativa? A) paginas/cursos.html B) https://computacion.uy/cursos.html

A B Las dos

Por qué importa esto

Una ruta relativa mal escrita es uno de los errores más comunes al armar un sitio con varias páginas — y el navegador no "adivina": si la ruta no coincide exactamente con dónde está el archivo, el enlace (o la imagen) simplemente no funciona. En la Lección 14 vamos a practicar encontrar y corregir errores como este.