Cómo entender las rutas de URL relativas en HTML

Xanina · 18 Mar 2014

hola quisiera saber qué tipo de ruta es esta? por más que he hecho pruebas nunca consigo que me cargue "logo.png"

el fichero index.html lo tengo en una carpeta que se llama \proyecto, es decir, su ruta es: c:\proyecto\index.html

el logotipo lo tengo en la siguiente ruta c:\proyecto\main\images\logo.png

si en el index.html pongo "... src='/main/images/logo.png' ..." ¡¡no me lo encuentra!!

sí, ya sé que poniendo "... src='main/images/logo.png' ..." me lo encontrará... pero es que quiero entender pq he visto ese código por ahí y funciona y a mí no

aprovecho para preguntar otra cosa similar que he visto por ahí. Sé lo que significa ../xx/blabla.jpg, sé que estoy saliendo un nivel hacia atrás y luego entrando en xx y llamando a blabla.jpg, pero ¿qué significa ./xx/blabla.jpg? por las pruebas que he echo, es igual que poner "src='./xx/blabla.jpg" ¿es ésto correcto? he visto que funciona, pero ¿es código correcto?

agradeceria un montón la ayuda, pq llevo más de una hora haciendo pruebas para entenderlo y no lo consigo :grumpy:

simpleweb · 18 Mar 2014

Porque no pruebaa a ponerlo así <img src="main/images/logo.png"> y usar las comillas dobles en vez de simples?

Xanina · 19 Mar 2014

Xanina dijo:
sí, ya sé que poniendo "... src='main/images/logo.png' ..." me lo encontrará... pero es que quiero entender pq he visto ese código por ahí y funciona y a mí no:

como ya he puesto en mi mensaje, sé hacerlo, lo que quiero saber es ¿qué significa esa ruta? ¿dónde tendría que poner el logo para que me lo encuentre? pq no lo consigo y me gustaría entenderlo... sólo es eso

simpleweb · 19 Mar 2014

pues en la carpeta imagenes, ahí tendrías que poner el logo.png

Koletta · 19 Mar 2014

Ponelo con comillas dobles no simples.

HTML:

<img src="/main/images/logo.png" />

Galbatorix · 19 Mar 2014

Xanina dijo:
hola quisiera saber qué tipo de ruta es esta? por más que he hecho pruebas nunca consigo que me cargue "logo.png"

el fichero index.html lo tengo en una carpeta que se llama \proyecto, es decir, su ruta es: c:\proyecto\index.html

el logotipo lo tengo en la siguiente ruta c:\proyecto\main\images\logo.png

si en el index.html pongo "... src='/main/images/logo.png' ..." ¡¡no me lo encuentra!!

sí, ya sé que poniendo "... src='main/images/logo.png' ..." me lo encontrará... pero es que quiero entender pq he visto ese código por ahí y funciona y a mí no

aprovecho para preguntar otra cosa similar que he visto por ahí. Sé lo que significa ../xx/blabla.jpg, sé que estoy saliendo un nivel hacia atrás y luego entrando en xx y llamando a blabla.jpg, pero ¿qué significa ./xx/blabla.jpg? por las pruebas que he echo, es igual que poner "src='./xx/blabla.jpg" ¿es ésto correcto? he visto que funciona, pero ¿es código correcto?

agradeceria un montón la ayuda, pq llevo más de una hora haciendo pruebas para entenderlo y no lo consigo :grumpy:

1. No importa que tipo de comillas uses. Dobles (") o simples('). Es lo mismo. No está ahí tu problema. No hagas caso a los que te dicen que cambies de comillas. Aunque bienintencionados, no tienen ni idea.

Existen dos tipos de rutas, relativas y absolutas. Las rutas son relativas al archivo actual. Las absolutas son iguales para cualquiera.

Observa entonces que tienes un archivo index.html, el directorio es c:\proyecto\. La ruta completa del archivo es c:\proyecto\index.html. Ok?

Si te refieres al logo como <img src="logo.png"> entonces dices: en el directorio actual busca el archivo logo.png, o sea c:\proyecto\logo.png.
Si dices <img src='main/images/logo.png'> dices: en el directorio actual busca el directorio main, dentro el directorio images, dentro el archivo logo.png. El directorio actual es c:\proyecto, recuerdas? entonces tenemos c:\proyecto\main\images\logo.png

Y si el directorio actual fuera c:\proyecto\main\, como encuentras el logo?

Insertar CODE, HTML o PHP:

[/COLOR]         Aqui estoy
             |
             |
c:\proyecto\main\images\logo.png
                |------------>
                |
     A partir de aqui empiezo
[COLOR=#000000]

La ruta relativa es apartir del directorio actual, entonces la ruta es <img src="images/logo.png">

Si estuvieras en c:\proyecto\main\images\, entonces la ruta relativa a partir de donde te encuentras es <img src='logo.png'>

Las rutas absolutas son con respecto a la raiz de tu servidor. Pero los servidores web simulan una raiz, la forman a partir de otra ruta. En tu caso, es decir cuando llamas a un archivo desde tu administrador de archivos, la ruta absoluta es a partir de tu unidad actual.

c:\proyecto\main\images\logo.png

No importa desde donde llames a tu logo, si usas una ruta absoluta (y es visible, por supuesto) verás el archivo. Esto es muy obvio en sistemas tipo *nix (linux, unix, mac), pero no es tan intuitivo en windows, donde la raíz es una unidad de disco y no un directorio.

<img src='/proyecto/main/images/logo.png'> esa es la ruta absoluta...

Para terminar... el punto significa 'aqui'. El directorio actual. .. significa el directorio anterior. Imagina que tienes un directorio c:/proyecto/main/otro/ y ahi tienes un archivo desde donde llamas a logo.

Si usas una ruta absoluta, llama a logo asi: <img src='/proyecto/main/images/logo.png'>
Si usas una ruta relativa, llama a logo asi: <img src="../images/logo.png">, es decir: de donde estoy ve al directorio anterior (c:\proyecto\main) y de ahí a images (c:\proyecto\main\images\) y ahí busca logo.png.

Usa un servidor web como xampp o web matrix para que trabajes en un entorno real, porque en el mundo del desarollo web no se usan las unidades tipo c: y la barra \ tiene otros usos.

colobaggins · 19 Mar 2014

No entiendo cual es tu duda porque las dos dierecciones que pones son iguales creo...
Si está en el índex, y sobre este "nivel" tenes una carpeta y queres acceder a su contenido lo pones así:
Src="main/images/loco.png"
Ahí accedes a la carpeta main, luego a la carpeta images y por último al archivo.
De esta forma es porque la carpeta main se encuentra al lado del índex, que es donde vos pones la ruta, están en el mismo nivel. Si tenes que buscar carpetas un nivel arriba, ósea que tengas esta estructura:
Proyecto/files/índex.html y también tengas dentro de proyecto:
Proyecto/imágenes/logo.png
En ese caso para llegar al logo desde el índex tenes que subir un nivel para llegar a la carpeta imágenes dentro de la carpeta imágenes.
Src="../imágenes/logo.png
Ojalá te haya ayudado, saludos !

Enviado desde mi iPhone con Tapatalk

Xanina · 21 Mar 2014

gracias a todos por vuestra colaboración!!

la verdad es con la explicación de Galbatorix es imposible tener dudas :encouragement:

ya está todo claro como el agua