Una ruta de archivo especifica la ubicación de un archivo dentro de una estructura de carpetas web. Es como una dirección de un archivo que ayuda al navegador web a acceder a los archivos. Las rutas de archivo se utilizan para vincular recursos externos, como imágenes, videos, hojas de estilo, JavaScript, mostrar otras páginas web, etc.
Para insertar un archivo en una página web, se debe conocer su fuente. Por ejemplo, la sintaxis (<img src=” ” alt=” “>) se usa para insertar un archivo de imagen, donde la ruta del archivo se menciona en la fuente (src).
Las rutas de archivo son de dos tipos:
- Rutas de archivo absolutas
- Rutas de archivo relativas
Rutas de archivo absolutas: describe la dirección completa (URL) para acceder a un archivo de Internet.
<img src=”https://media.geeksforgeeks.org/wp-content/uploads/geek.png” alt=”Mi imagen”>
Ejemplo:
html
<!DOCTYPE html> <html> <head> <title>Absolute file path</title> </head> <body> <img src="https://media.geeksforgeeks.org/wp-content/uploads/geek.png" alt="My Image" style="width:400px"> </body> </html>
Producción:
Ruta de archivo relativa: describe la ruta del archivo en relación con la ubicación del archivo de la página web actual.
Ejemplo 1: Muestra la ruta del archivo presente en la misma carpeta del archivo de la página web actual.
html
<!DOCTYPE html> <html> <head> <title>Relative file path</title> </head> <body> <h2>File present in the same folder</h2> <img src="images/geeks.jpg" alt="My Image" style="width:400px"> </body> </html>
Producción:
Ejemplo 2: Muestra la ruta del archivo presente en una carpeta encima de la carpeta del archivo de la página web actual. El archivo de imagen presente en una carpeta llamada imágenes y el archivo de la página web actual existe dentro de una subcarpeta, entonces el código será el siguiente:
html
<!DOCTYPE html> <html> <head> <title>Relative file path</title> </head> <body> <h2>File present in a folder above the current folder</h2> <img src="../images/geeks.jpg" alt="My Image" style="width:400px"> </body> </html>
Producción:
Ejemplo 3: Muestra la ruta del archivo presente en una carpeta que se encuentra en la raíz de los subdirectorios actuales.
html
<!DOCTYPE html> <html> <head> <title>Relative file path</title> </head> <body> <h2>File present in a folder which is located at<br> the root of the current subdirectories</h2> <img src="/images/picture.jpg" alt="My Image" style="width:400px"> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- Borde de Microsoft
- Firefox
- Ópera
- Safari
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .