1

Tengo el siguiente problema: alguna vez me ha pasado que, al trasladar un conjunto de documentos (html+css+js), el html no es capaz de encontrar la ubicación de los otros archivos a los que referencia.

¿Cómo puedo hacer esto y que la ubicación se mantenga sin tener que cambiar el código cuando esté en la nueva ubicación?

Gracias por adelantado.


    <head>
        <meta charset="UTF-8"/>
        <title>Document</title>

        <style>
            @import "estilo.css";
        </style>
        <script src="codigo.js"></script>
    </head>
9
  • 1
    Usando enlaces relativos. Dime como tienes puestos tus enlaces ahora o muestra algo de código de uno de los html que te dan problemas, a ciegas es dificil indicartelo bien para que lo entiendas. Necesito darte un ejemplo de tu propio código.
    – masterguru
    Commented el 13 ene. 2022 a las 7:03
  • Buenas @masterguru. He añadido un fragmento de código para que se pueda ver lo que comentaba. Gracias por el comentario
    – dancareli
    Commented el 13 ene. 2022 a las 7:12
  • 1
    En tu codigo representa que tienes al archivo estilo.css y al archivo codigo.js en el mismo directorio que tu html. En este caso debes ubicarlos siempre juntos. Si lo que haces es cambiarlos de directorios entonces debes cambiar los enlaces de forma relativa acorde a ello. Ahora mismo ya son relativos, pero quizas los estas moviendo mal. Es decir, los tienes que mover los tres de igual forma en lugar de cambiarlos individualmente a otros directorios y esperar que eso funcione.
    – masterguru
    Commented el 13 ene. 2022 a las 7:16
  • Entiendo lo que me comentas. Entonces, mientras no cambie la ubicación de cada documento, de esta manera no debería de haber un problema, ¿no?
    – dancareli
    Commented el 13 ene. 2022 a las 7:19
  • 1
    En este caso, todos tienen que estar en el mismo directorio, este donde este. Si eso te da problemas será porque quizas 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.
    – masterguru
    Commented el 13 ene. 2022 a las 7:21

2 respuestas 2

4

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.

1

Hola @dancareli entiendo que cuando modificas la ubicacion de los html no te encuentra los css y los js mirate que en las rutas cuando lo cargas que sea /css/file.css o /js/file.js de esta manera con la /

Asi le estas diciendo al HTML que mire desde la raiz del dominio, no puedo decirte mas ya que no veo como cargas los archivos en un html.

2
  • Buenas @Jordi. He añadido un fragmento de código para que puedas ver a lo que me refiero. Gracias por la aportación.
    – dancareli
    Commented el 13 ene. 2022 a las 7:13
  • Como te digo poniendo una / delaten de todo lo que haces es que la ruta sea absolute, por lo tanto siempre buscara desde la raiz del dominio, lo que te aconsejo es crear una carpeta css y otra js i alli pones los archivos css y js. Despues en las rutas que vas cargando pones /css/estilo.css en vez de estilo.css Con los Js realizar lo mismo, lo tendras mas ordenado que no todo en la raiz. Commented el 13 ene. 2022 a las 8:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.