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:
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.
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.