Rutas, Directorios y Archivos HTML

Rutas, Directorios y Archivos HTML

Diseño de Páginas Web

by: Ing. Nestor Rivas

Empezar

Qué es un directorio?

• Los directorios también conocidos como carpetas son los que contienen archivos y también contienen dentro otras carpetas o directorios.

Qué es un archivo?

• Los archivos son los que contienen la información ya sea texto, audio, etc. Estos archivos se caracterizan por tener nombre y extensión, la extensión indica que tipo de archivo es, ya que los archivos tienen muchos formatos.

Lista de algunas extensiones de archivos que indica el formato

• .pdf – formato de documento portátil
• .txt – archivo de texto plano
• .html – archivo usado para creación de páginas web
• .png – archivo de formato gráfico
• .mp4 – archivo de formato audiovisual

Lista de algunas extensiones de archivos que indica el formato

se expande a la ruta actualse usa para indicar que se inicia desde la raízse usa para que se autocomplete con la ruta actualindica que está a una carpeta atrás

Entonces los archivos contienen información y las carpetas contienen archivos y también otras carpetas.

.//../

Supongamos que tienes una estructura de carpetas como esta

En el siguiente enlace se encuentra más información de los elementos para generar rutas:

Para acceder a "index.html", "pagina1.html" y "pagina2.html" directamente desde el navegador usando rutas en la URL, podemos hacer lo siguiente:

Rutas.

• Las rutas relativas y absolutas son conceptos importantes cuando trabajas con documentos y archivos en la web o en sistemas de archivos.
• Una ruta es la que indica el lugar específico donde se encuentra el archivo o carpeta que buscamos.
• La ruta puede estar compuesta por la barra inversa ‘\’ en Window o la barra diagonal ‘/’ en el sistema operativo de Linux.

Ejemplo de ruta absoluta en un sistema de archivos: Sistema Operativo Windows: C:\Usuarios\Usuario\Documentos\archivo.txt Sistema Operativo Unix/Linux: /home/usuario/documentos/archivo.txtEjemplo de URL absoluta en la web: https://www.ejemplo.com/carpeta/archivo.html

Rutas absolutas.

Una ruta absoluta especifica la ubicación completa de un archivo o directorio desde la raíz del sistema de archivos. En la web, esto puede referirse a la URL completa.

Ejemplo de ruta relativa en un sistema de archivos:Supongamos que tienes la siguiente estructura de carpetas:

Rutas relativas.

Una ruta relativa especifica la ubicación de un archivo o directorio en relación con el directorio actual. Esto significa que la ruta depende del directorio en el que te encuentras actualmente.

En general, las rutas relativas son preferibles en el desarrollo web, ya que facilitan la portabilidad y el traslado del código y los recursos a diferentes ubicaciones sin tener que cambiar las rutas en todos los lugares.

Diferencias Clave.

Absolutas: Especifican la ruta completa desde la raíz del sistema de archivos o la URL completa desde el dominio. Relativas: Especifican la ruta en relación con el directorio actual. Son más flexibles y portátiles, ya que no dependen de una ubicación específica.

Practicandocon ejercicios

A continuación se muestran ejemplos que deberemos realizarlos en vscode para su mejor comprensión

Rutas relativas en HTML

A continuación, veremos unos ejemplos de rutas relativas aplicado al lenguaje html.

También funciona si lo escribimos de la siguiente manera, ya que a la ruta actual se le añade el archivo.

Si yo tengo un archivo, supongamos `index.html` y dentro tiene una ruta o enlace a una imagen y además la imagen se encuentra en la misma carpeta o directorio entonces la ruta se deberá escribir así:

Rutas relativas en HTML

Segundo ejemplo

Si la imagen `duck.png` se encuentra dentro de la carpeta `user` la ruta que escribiremos en el archivo `index.html` será:

Realiza el siguiente ejercicio por tu propia cuenta, y guarda en una carpeta los tres ejemplos vistos en esta clase, para ser entregados dentro de la carpeta comprimida en el campus virtual.

¡Desafío para ti!

Rutas relativas en HTML

Tercer ejemplo

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 cómo organizarlas, pero recuerda la recomendación que te menciono sobre usar las rutas relativas.

¡Gracias por su atención!

La ruta absoluta nos indica todas las carpetas que hay hasta llegar al archivo que queremos.

en otras palabras...

Este método solo funciona localmente y podría no ser adecuado para distribuir tu aplicación o sitio web. Para compartir tu proyecto de manera más amplia, sería mejor configurar un servidor web local, como por ejemplo "Live Server" en la extensión de vsc (visual studio code).

¡A tomar en cuenta!

Desde el archivo `index.html`, la ruta relativa para acceder a `imagen.jpg` sería `img/imagen.jpg`Desde el directorio `/proyecto`, la ruta relativa para acceder a `imagen.jpg` sería `archivos/img/imagen.jpg`.

La ruta relativa, es una ruta más corta debido a que no necesita la ubicación completa para acceder al archivo.

en otras palabras...

Ejemplo de URL relativa en la web:Supongamos que tu página HTML está en https://www.ejemplo.com/carpeta/index.html, y tienes una imagen en https://www.ejemplo.com/carpeta/img/imagen.jpgEn la página index.html, la ruta relativa para acceder a imagen.jpg sería img/imagen.jpg.