Le Lenguaje de marcado HTML 5 cuentan con muchas herramientas y utilidades que nos permiten realizar muchas funcionalidades, las rutas de archivos son elementos importantes que permiten cargar diferentes tipos de archivos en un sitio web como una imagen, un video, un PDF, etc. y debemos conocer los tipos de rutas de archivos que tenemos a disposición en HTML 5, en este Post te explicaré cuales son y como funcionan.
Antes de continuar con este Post, te invito a leer los siguientes artículos:
- Notificaciones Desktop con HTML5
- Hacer nuestro contenido Editable con HTML5
- Aprende los Códigos de Errores al hacer peticiones HTTP al servidor
- 5 Atributos Globales de HTML5 que nos pueden ser Útiles
- Manipular una Lista Ordenada con el Atributo Type en HTML
- Que es el Atributo Aria-* en HTML, como funciona y otros detalles
- Como habilitar el Dibujado con el mouse sobre un canvas HTML 5 (Desktop)
- Como Crear Notaciones Matemáticas en HTML 5
- Puedes leer más en la categoría HTML 5
Asimismo te invito a escuchar el Podcast: “Donde buscar ayuda sobre Programación”:
| Spotify | SoundCloud |
 |
 |
Si quieres aprender o conoces sobre algún amigo o amiga que quiere aprender HTML 5 desde 0, puedes visitar el curso con más de 45 videos totalmente gratis, el Lema de Nube Colectiva es “el conocimiento en la Nube es Colectivo”:
Bien ahora continuemos con el Post: Los Tipos de Rutas de Archivos que existen en HTML 5.
En HTML 5 los tipos de rutas de archivos, especifican la ubicación de un archivo en un proyecto como un sitio web, una aplicación web o similares, las rutas de archivos pueden ser de las siguientes maneras.
| Ruta del Archivo | Descripción |
|---|---|
| <img src=”gelatinadefresa.png”> | El archivo “gelatinadefresa.png” se encuentra en la misma carpeta que la página HTML actual. |
| <a href=”pdf/receta.pdf”>Descargar Receta</a | El archivo “receta.pdf” se encuentra en la carpeta de pdf. |
| <img src=”/img/gelatinadefresa.png”> | El archivo “gelatinadefresa.png” se encuentra en la carpeta img en la raíz de la web actual |
| <img src=”../img/gelatinadefresa.png”> | El archivo “gelatinadefresa.png” se encuentra en la carpeta img un nivel arriba de la carpeta actual. |
| <source src=”../../../video.mp4″ type=”video/mp4″> | El archivo “video.mp4” se encuentra en la carpeta 3 niveles arriba de la carpeta actual. |
En la tabla anterior, puedes ver los diferentes casos de como se presentan las rutas de archivos en un proyecto, las rutas de archivos nos permiten insertar imágenes, PDFs, audios, videos, hojas de estilos CSS, archivos JavaScript, archivos PHP, etc.
HTML 5 cuenta con 2 tipos de Rutas para los archivos, estas son relativas y absolutas, veamos a continuación cada una de ellas.
Rutas de archivos relativas
Este tipo de rutas especifican la ruta de un archivo en su ubicación actual en el servidor o directorio del proyecto, por ejemplo un archivo PDF puede estar apuntando al directorio archivos pero en 3 niveles arriba de la ubicación actual del archivo index.html
|
1 2 3 4 |
<!-- Ruta relativa al archivo curso.pdf --> <a href="../../../archivos/curso.pdf" alt="Curso"> Descargar PDF </a> |
También podemos tener el archivo en el directorio archivos que este en el mismo directorio en donde se encuentre el archivo index.html
|
1 2 3 4 |
<!-- Ruta relativa al archivo curso.pdf --> <a href="archivos/curso.pdf" alt="Curso"> Descargar PDF </a> |
Como puedes ver, las rutas relativas, especifican los directorios y sus nombres para cargar un archivo
Pero tiene una inconveniente, si por error se borran los directorios o cambian el nombre de estos, el archivo dejará de mostrarse, porque la ruta cambiaría.
Rutas de archivos absolutas
Este tipo de rutas especifican la dirección directa al archivo alojado en un servidor (hosting), se debe de escribir la URL completa del archivo, por ejemplo si tenemos el archivo curso.pdf alojado en el servidor, escribimos su URL absoluta o completa.
|
1 2 3 4 |
<!-- Ruta absoluta al archivo curso.pdf --> <a href="https://www.mipaginaweb.com/archivos/curso.pdf" alt="Curso"> Descargar PDF </a> |
Una de las ventajas de este tipo de rutas es que al copiar y pegar la URL no hay errores, porque estamos usando una ruta que ya existe en el servidor y no hay que averiguar algo mas, salvo casos específicos.
¿ Que tipo de Rutas de archivos es recomendable usar ?
Es recomendable usar las rutas de archivos relativas en lo posible, ya que si usas una ruta absoluta, puede que en el futuro no este disponible, si se mueve o modifica el nombre del directorio o la ubicación del directorio en donde se encuentra el archivo y situaciones similares.
En el siguiente video, el cual es parte del Curso Gratis de HTML 5 que se encuentra en nuestro canal de YouTube junto con otros cursos, explico a detalle sobre las rutas de archivos.
Conclusión
Hemos aprendido sobre las rutas de archivos que podemos usar en un proyecto web creado con HTML 5, recuerda que el uso puede variar dependiendo de la estructura de tu proyecto, tu eres en que decide como organizarlas, pero recuerda la recomendación que te menciono sobre usar las rutas relativas.
Nota (s)
- No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.