Curso HTML 6.2 Rutas absolutas, relativas y organización de recursos

Rutas Absolutas, Relativas y Organización de Recursos en HTML

En el desarrollo web es fundamental comprender cómo referenciar recursos (imágenes, hojas de estilo, scripts, fuentes, etc.) mediante rutas. Existen dos tipos principales:

• Rutas absolutas: señalan una dirección completa, normalmente con el protocolo y dominio.
• Rutas relativas: describen la localización de un recurso en relación con la ubicación del documento actual.

1. Rutas Absolutas

Las rutas absolutas apuntan a una ubicación fuera de la jerarquía de tu proyecto o a un dominio distinto. Se utilizan cuando quieres enlazar recursos de otros servidores o garantizar que, independientemente de dónde se incluya tu HTML, el recurso se cargue correctamente.

Ejemplo de inclusión de CSS y script desde un CDN:

<!-- Estilos desde un CDN de Bootstrap -->
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css'>

<!-- Script de Vue.js desde un CDN -->
<script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
  

2. Rutas Relativas

Las rutas relativas describen la localización de un recurso con respecto al documento que las invoca. Pueden ser:

• Ruta relativa simple: apunta a una carpeta o archivo dentro de la misma carpeta.
• Ruta hacia carpetas superiores: utiliza “..” para subir niveles en la jerarquía.
• Rutas anidadas: combinan niveles superiores e inferiores.

Ejemplo práctico de rutas relativas:

<!-- Supongamos que este archivo está en /proyecto/paginas/index.html -->

<!-- Hoja de estilos en /proyecto/css/site.css -->
<link rel='stylesheet' href='../css/site.css'>

<!-- Imagen en /proyecto/media/banner.jpg -->
<img src='../media/banner.jpg' alt='Banner principal'>

<!-- Script en /proyecto/js/app.js -->
<script src='../js/app.js'></script>
  

3. Organización de Recursos

Una estructura organizada facilita el mantenimiento. A continuación un ejemplo de arquitectura de proyecto:

• proyecto/
  • index.html
  • paginas/
    • about.html
    • contact.html
  • css/
    • reset.css
    • site.css
  • js/
    • app.js
    • plugins.js
  • img/
    • logo.svg
    • banner.png
  • fonts/
    • opensans.woff2

De esta forma, desde index.html usarás:

<link rel='stylesheet' href='css/site.css'>
<script src='js/app.js'></script>
<img src='img/logo.svg' alt='Logo'>
  

Y desde paginas/about.html:

<link rel='stylesheet' href='../css/site.css'>
<script src='../js/app.js'></script>
<img src='../img/banner.png' alt='Banner'>
  

4. Consejos y Buenas Prácticas

• Usa rutas absolutas (o URL) para recursos externos o CDNs.
• Emplea rutas relativas para tus propios recursos dentro del proyecto.
• Mantén coherencia en la estructura de carpetas y nombres en minúsculas.
• Evita espacios o caracteres especiales en los nombres de archivo.
• Si cambias la ubicación de un directorio, revisa todas las rutas relativas afectadas.
• Considera el uso de sistemas de construcción (Webpack, Gulp) para gestionar y versionar rutas en producción.

5. Resumen de Diferencias