RUTAS EN HTMLDamián Huerta GarcíaFebrero de 2008

Cada vez que insertamos en una de nuestras páginas un elemento externo a ellas (una imagen, un sonido, un enlace...) tenemos que definir claramente dónde se encuentra (Ubicación o ruta) este, para que el navegador pueda encontrarlo e insertarlo.Ruta: es la ubicación física del recurso a insertar, ejemplo:F:/tareas/html/mi_fondo.gif

¿Que son las rutas?

¿Por que son importantes las rutas? Las rutas son una de las causas más

frecuentes de errores para las personas que comienzan a crear páginas web. Por ello es importante saber manipular las rutas relativas y absolutas para que en la publicación del sitio no existan problemas.

Tipo de rutas

Rutas Absolutas. Las rutas absolutas son el camino que ha de

seguir el navegador para encontrar el archivo, definidas desde el principio, como por ejemplo:

En el dispositivo de almancenamiento: D: :\Conalep\6to semestre\paginas web\

EJEMPLOS En la publicación del sitio:

http://www.midominio.com/carpeta/archivo.ext D

¿ Porque no usarlas? Si guardamos en nuestro disco duro al

quemarlas en cd o pasarlas a usb la unidad cambia de c: a d: o f.

Al publicar el sitio en internet, en nuestro servidor también cambia la ubicación de los recursos.

Rutas Relativas. Las rutas relativas son el camino a

seguir DESDE la página HASTA el archivo. En este caso no hay que escribir http://www.midominio...., sino solo indicar los pasos que hay que dar para llegar desde la página en cuestión, hasta el archivo correspondiente.

La pagina y la imagen en la misma carpeta

Imagen dentro de carpeta

Pagina en carpeta e imagen en otra

Ejemplo con dominios ruta absoluta

Supongamos que queremos insertar la foto del perro en la página index.html. La ruta absoluta de esa foto, es la misma siempre, sea cual sea la página donde vayamos a insertarla, es decir:

http://www.comocreartuweb.com/imagenes/mi-perro-newton.gif

Ejemplo con dominios de Ruta Relativa

En cambio, la ruta relativa de la foto, con respecto a index.html sería esta otra: imagenes/mi-perro-newton.gif¿Por qué? Porque para ir desde index.html hasta la foto, hemos de entrar primero en la carpeta imagenes y dentro de ésta, buscar la imagen mi-perro-newton.gif.

hay tambien una carpeta llamada historias, y que dentro de ésta hay una página llamada historias-de-mi-perro.html. Si quisieramos insertar la imagen mi-perro-newton-gif en ella, la ruta absoluta sería la misma que antes (recuerda que las rutas absolutas no dependen de la página donde se vaya a insertar el elemento), pero la ruta relativa ahora es esta otra:

../imagenes/mi-perro-newton.gif

Conclusión Las rutas absolutas siempre son las

mismas, sin importar donde insertemos los recursos.

Las relativas cambian de acuerdo a donde las queremos insertar y se utilizan lo siguiente: Los dos puntos y la barra ( ../ ) significan un

paso atrás, es decir, salir de una carpeta. La diagonal indica entrar a la carpeta

/carpeta

Ubicación de los recursos

Una carpeta para códigos Una carpeta para imágenes Una carpeta para música Y una carpeta para videos La página de inicio se llamara index.html

Bibliografía de apoyo http://www.comocreartuweb.com/

herramientas-utiles/enciclopedia-r-rutas.html