Cuando programas tu primer proyecto web, entender cómo se conectan los archivos entre sí es lo que separa un código desordenado de uno profesional. Las rutas relativas y absolutas son la manera en que tu navegador encuentra los archivos HTML, JavaScript e imágenes que componen tu página. Saber usarlas te permite separar lenguajes, mantener tu proyecto limpio y escalar sin romper nada.

Qué es el sistema de archivos y por qué importa en programación

Toda computadora, incluido tu teléfono, tiene un sistema de archivos. En Windows lo identificas con la famosa C:, que es la raíz del disco duro. Esa letra viene de cuando existían los disquetes: la A y la B se usaban para ellos, y al disco duro le tocó la C.

Dentro de esa raíz se arma un árbol de carpetas parecido al de HTML. Tienes Users, luego una carpeta con tu nombre de usuario, dentro Documentos, y ahí tu carpeta del curso con archivos como codigo.html o imagen.jpg.

¿Por qué debo escribir nombres de carpetas en minúscula? Porque en Windows da igual mayúscula o minúscula, pero en Linux y en servidores web Documents y documents son cosas distintas. Mantén todo en minúscula siempre y evitarás errores difíciles de detectar.

En Linux, la raíz es / y no apunta al disco duro sino al sistema operativo. Dentro está home, y ahí viven tus archivos personales. En internet pasa lo mismo: la raíz es el dominio, por ejemplo platzi.com, y luego vienen carpetas como /cursos/fundamentos.

Cómo funcionan las rutas absolutas y las rutas relativas

Una ruta absoluta describe la ubicación completa desde la raíz. Si quieres llegar a codigo.html le indicas: en C:, en usuarios, en freddy, en documentos, en curso, está ese archivo. Es exacta, pero larga y poco portable.

Una ruta relativa, en cambio, parte de la posición actual del archivo que estás escribiendo. Si tu juego.html está dentro de la carpeta programar, y al mismo nivel tienes carpetas js e imagenes, no necesitas escribir todo el camino desde C:.

¿Qué diferencia hay entre ruta absoluta y relativa? La absoluta empieza desde la raíz del disco o dominio y siempre es la misma. La relativa empieza desde donde está tu archivo actual y cambia según dónde lo muevas.

Cómo escribo una ruta relativa correctamente

Desde juego.html, para llegar a un archivo dentro de la carpeta js haces algo así:

• Escribes el nombre de la carpeta sin barra al inicio: js.
• Agregas la barra separadora: /.
• Pones el nombre del archivo: codigo.js.

El resultado es js/codigo.js. Para una imagen sería imagenes/foto.jpg. Sin barras al principio, porque estás partiendo del nivel donde vive tu HTML.

Cómo separar JavaScript de HTML usando el atributo src

Mezclar JavaScript dentro de tu HTML funciona, pero no es la forma correcta. Separar lenguajes hace que tu código sea más fácil de leer, mantener y compartir. Vamos a hacerlo paso a paso con el juego de piedra, papel o tijera.

Primero, creas un nuevo archivo y lo guardas dentro de la carpeta js de tu proyecto. Le pones de nombre codigo.js. Asegúrate de elegir el tipo de archivo .js al guardarlo, porque la extensión tiene que ser exacta.

Después cortas todo el contenido que está dentro de la etiqueta <script> de tu HTML, no la etiqueta misma, solo el JavaScript. Lo pegas en codigo.js y guardas con Ctrl + S o Command + S si estás en Mac.

Qué hace el atributo src en la etiqueta script

De vuelta en tu HTML, la etiqueta <script> queda vacía. Ahora le agregas un parámetro llamado src, que le dice al navegador dónde buscar el archivo:

html

<script src="js/codigo.js"></script>

Ese js/codigo.js es una ruta relativa. Como tu HTML está al mismo nivel que la carpeta js, no necesitas escribir toda la ruta desde C:. El navegador entiende que debe buscar a partir de donde está el archivo HTML.

¿Qué es el atributo src en HTML? Es el parámetro que indica la ubicación de un recurso externo, como un archivo JavaScript o una imagen. Funciona con rutas relativas o absolutas y le dice al navegador dónde ir a buscarlo.

Al recargar la página en el navegador, el juego funciona exactamente igual que antes. La diferencia es que ahora tu HTML solo contiene estructura, y tu JavaScript vive en su propio archivo. Esa separación es la base para empezar a agregar botones, imágenes y todo lo que quieras construir encima.

Si al cargar la página no ves cambios, revisa dos cosas: que hayas guardado ambos archivos y que la ruta dentro de src coincida exactamente con la ubicación real de codigo.js. Un nombre mal escrito o una carpeta en mayúscula es suficiente para romperlo todo.

¿Ya organizaste tu primer proyecto con esta estructura? Cuéntame en los comentarios cómo te fue separando el JavaScript de tu HTML.