**Respuesta a tu pregunta** En este caso, todos tienen que estar en el mismo directorio, esté donde esté. Si eso te da problemas será porque quizás dentro de cada uno de ellos se invoca a otros archivos de forma **absoluta** en lugar de **relativa**. Si ves que no funciona del todo por ese motivo investiga a ver cual te da problemas y le cambias el enlace problematico por uno relativo. Explicación ampliada --------------------------- Para que, al mover estructuras completas de archivos _HTML_, _CSS_ y _Javascript_, estos no pierdan las referencias se utilizan los llamados **enlaces relativos**. ¿Qué es un enlace relativo? --------------------------- Es un tipo de enlace que no depende de una estructura predeterminada, sino que a partir del mismo archivo desde el cual es invocado toma la referencia. Es relativo a la propia ubicación del archivo en si, y no dependiente de la raíz del dominio actual. ¿Qué es un enlace absoluto? --------------------------- En este tipo de enlaces se hace referencia a un lugar concreto de la estructura de archivos, ya sea la raíz de su espacio web, o bien algún directorio (carpeta) o ruta de subdirectorios, siempre empezando por la raíz del dominio (ya sea con la barra `/` o bien usando el nombre de dominio completo, por ejemplo, `http://dominio.com/`). Cómo usar los enlaces relativos ------------------------------- Antes de nada hay que saber como va a ser la estructura de directorios de nuestro proyecto completo, así como la posición del archivo que va a usar el enlace relativo dentro de esa estructura. **Ejemplo práctico:** --------------------- ---------- La estructura ------------- Imaginemos que tenemos una estructura típica de árbol de directorios de archivos similar a esta: / /css /js /img /paginas donde: - `/` es el directorio donde vamos a colocar los archivos html principales, también llamada comúnmente **raíz** - `/css` es el directorio donde vamos a colocar los archivos de estilos CSS - `/js` idem para los archivos de javascript - `/img` idem para los archivos de imagen - `/paginas` idem para páginas adicionales _html_ (es un ejemplo, podría ser cualquier cosa que no quisiéramos ubicar en la raíz) Los archivos ------------ Ahora imaginemos que dentro de esta estructura tenemos los siguientes archivos: /index.html /sitemap.html /js/script.js /css/estilos.css /img/logo.jpg /paginas/pagina1.html /paginas/pagina2.html Las referencias absolutas ------------------------- Como se puede ver, tenemos un archivo llamado **index.html** ubicado en la raíz de esta estructura, de este modo: /index.html que dentro de su código invoca a un archivo _css_, otro _js_, a una _imagen_ y a otro archivo _html_ de este modo (no pongo el codigo entero, solo la parte donde se invocan): <link src="/css/estilos.css"> <script src="/js/script.js"> <img src="/img/logo.jpg"> <a href="/sitemap.html"> <a href="/paginas/pagina1.html"> <a href="/paginas/pagina2.html"> Este tipo de referencia, cuando empieza por `/`, es uno de los casos de **referencia absoluta**. Es decir, tiene una base bien predefinida de partida para encontrar el resto de archivos, y _en este caso parte de la raíz_ donde el servidor web está sirviendo ese dominio, normalmente, en Apache, estipulado bajo la directiva _DocumentRoot_. Esta directiva puede estar, por ejemplo, apuntando a `/home/micuenta/public_html/`, pero cuando se está sirviendo desde el servidor web queda representado por `/` (la raíz del documento), y no debe usarse la ruta real (`/home/micuenta/public_html/`) en los enlaces pues el servidor web no la reconoce, pero gracias a la directiva _DocumentRoot_ accede a ella como `/`. Otro caso de **referencia absoluta** seria poniendo los enlaces de este modo: <link src="//dominio.com/css/estilos.css"> <script src="//dominio.com/js/script.js"> <img src="//dominio.com/img/logo.jpg"> <a href="//dominio.com/sitemap.html"> <a href="//dominio.com/paginas/pagina1.html"> <a href="//dominio.com/paginas/pagina2.html"> Donde `dominio.com` es nuestro propio dominio. Aquí estamos en lo mismo, solo que en este caso nuestra **referencia absoluta** empieza en el nombre de `dominio.com`. Si intentamos mover toda la estructura de directorios a otro dominio, por ejemplo, `otrodominio.com` los enlaces seguirán apuntando al primer dominio `dominio.com`. Para solucionarlo deberemos realizar una búsqueda de `dominio.com` y sustituirlo por `otrodominio.com`, lo cual siempre es trabajo extra que nos podríamos ahorrar con **referencias relativas**. **Nota:** He puesto las dos barras inclinadas de forma expresa `//` aunque lo común es encontrarnos con este formato en su lugar: `http://` o bien `https://`. Si dejamos tan solo las dos barras se cumplen ambos casos a la vez, es decir, no dará errores tanto si el dominio no está con certificado (el caso de `http://`) como si lo está (el caso de `https://`). Las referencias relativas ------------------------- Y ahora por fin vamos a usar las **referencias relativas** en los enlaces anteriores para que cuando necesitemos copiarlo todo a otra parte no sean dependientes ni de su raíz ni de su dominio. Los **enlaces relativos**, en este ejemplo, podrían quedar así: <link src="./css/estilos.css"> <script src="./js/script.js"> <img src="./img/logo.jpg"> <a href="./sitemap.html"> <a href="./paginas/pagina1.html"> <a href="./paginas/pagina2.html"> donde la expresión `./` representa el directorio actual, esté donde esté, que es el tomado por referencia para buscar el resto de archivos enlazados. Si no usamos `./` y lo ponemos así: <link src="css/estilos.css"> <script src="js/script.js"> <img src="img/logo.jpg"> <a href="sitemap.html"> <a href="paginas/pagina1.html"> <a href="paginas/pagina2.html"> también nos va a funcionar. Daros cuenta de que ya no hay ni la barra inicial `/` que nos condicionaba que la ruta partiera de la raíz, ni tampoco las dos barras con el nombre de dominio `//dominio.com` que indicarían lo mismo pero vinculándolo además a un dominio concreto. Un último caso a tener en cuenta sería el siguiente ejemplo, donde desde `paginas/página1.html` se quisiera llamar relativamente a cualquier otro archivo de la estructura situado más atrás o en otro directorio. Por ejemplo, de forma absoluta podríamos encontrarnos con esto dentro de **paginas/pagina1.html**: <link src="/css/estilos.css"> <script src="/js/script.js"> <img src="/img/logo.jpg"> <a href="/sitemap.html"> <a href="/index.html"> <a href="/paginas/pagina2.html"> Y seguramente funcionaria bien, pero **no** podríamos mover toda la estructura a otro lugar porque nos daría problemas en esa página. En este caso la solución vuelven a ser **enlaces relativos**, que quedarían de este modo: <link src="../css/estilos.css"> <script src="../js/script.js"> <img src="../img/logo.jpg"> <a href="../sitemap.html"> <a href="../index.html"> <a href="pagina2.html"> Analicemos los cambios: 1) Se han agregado dos puntos seguidos y una barra `../` que indican **ir atrás** en la ruta de directorios (a diferencia de `./` que indica ir adelante desde el directorio actual). Se puede usar tantas veces como sea necesario, por ejemplo, si tuviéramos que ir dos directorios atrás seria así: `../../index.html`, etc. 2) En el enlace absoluto anterior habíamos usado `<a href="/paginas/pagina2.html">` pero ahora usamos `<a href="pagina2.html">` porque tanto `pagina1.html` como `pagina2.html` se encuentran en el mismo directorio, por lo tanto no hace falta ponerles rutas, se encuentran en el mismo nivel. De nuevo, podríamos haber puesto el enlace relativo de este modo: `<a href="./pagina2.html">` (yo prefiero el otro, pues ambos funcionan igual). De este modo es seguro mover toda una estructura de directorios de un lugar a otro sin que nuestras páginas sufran de enlaces rotos. **Nota adicional**: En este caso, al tratarse solo de archivos _html_, _css_, _javascript_ y de _imagen_, también pueden ser abiertos desde un sistema de archivos directamente, y gracias a las referencias relativas, funcionar correctamente. La URL en estos casos empieza por `file://`. Eso si, en el caso de archivos PHP )u otros que necesitaran de su intérprete) estos dejarían de funcionar porque el sistema de archivos no es un servidor web con su intérprete de PHP, y los veríais mal igualmente con o sin referencias relativas.