Apuntes html

Lección: Rutas y Paths en la Web

Cuando comienzas a crear páginas web, uno de los conceptos más complicados es el de las rutas o paths: las direcciones que indican dónde están los archivos, como imágenes o páginas vinculadas. Todos hemos visto una imagen que no carga (¡esa molesta cruz roja!) o un enlace que funciona en nuestro ordenador pero falla al subir la página a un servidor.
En esta lección aprenderás cómo funcionan las rutas, por qué fallan, y cómo usarlas correctamente para que tus imágenes y otros recursos se muestren sin problemas. También veremos cómo enlazar recursos externos, siempre respetando los derechos de autor.

¿Qué es una ruta?

Una página web es un archivo de texto (HTML) que actúa como un mapa: no contiene imágenes, estilos, ni otras páginas, sino que apunta a esos recursos mediante rutas. Cuando un navegador carga tu página, lee el archivo HTML y busca los recursos en las direcciones indicadas. Por ejemplo:

<img src="images/apple.png" alt="postre favorito" width="168" height="180">

Aquí, src="images/apple.png" es una ruta que le dice al navegador dónde encontrar la imagen. Si la ruta es incorrecta, la imagen no aparece. (ojo, son ejemplos, buscate tu propia manzana para probar)

¿Por qué fallan las rutas?

Los problemas comunes incluyen:

Funciona localmente, pero no en el servidor: Un enlace o imagen carga en tu ordenador, pero al subir la página a un servidor web, aparece una cruz roja o un enlace roto.
Rutas locales: Usas rutas como /home/user/documents/apple.png (o c:\mis documentos\apple.png en Windows), que no son accesibles en internet.
Errores de escritura: Nombres de archivo con mayúsculas/minúsculas incorrectas, espacios, o caracteres especiales.
Archivos no subidos: Olvidas subir la imagen al servidor junto con el HTML.

La razón principal es que la estructura de tu ordenador es diferente a la de internet. Tu disco duro no es accesible desde la web, y los servidores usan una organización distinta.

Subiendo tu página al servidor

Tu archivo HTML (por ejemplo, index.html) es el corazón de tu página. Localmente, puedes abrirlo escribiendo una ruta como /home/user/documents/index.html en el navegador, pero nadie más puede verlo porque tu ordenador no está en internet.

Para que tu página sea accesible, debes subirla a un servidor web, un ordenador conectado a internet. Este proceso, llamado coloquialmente "subir el archivo", implica transferir el HTML y todos los recursos (imágenes, CSS, etc.) al servidor, usando herramientas como FileZilla,SFTP, o Git.

Una vez subido, la página tiene una dirección web, como:

http://www.example.com/personal/excursion/excursion.html

Esto significa:

http://: Protocolo para cargar la página.
www.example.com: Dominio del servidor.
/personal/excursion/: Carpetas en el servidor.
excursion.html: Archivo HTML.

Cuando el navegador lee excursion.html y encuentra la etiqueta <img src="images/apple.png">, hace una nueva petición al servidor para buscar la imagen en la ruta indicada. Si la ruta es incorrecta o la imagen no está en el servidor, no se muestra.

Rutas absolutas

Una ruta absoluta especifica la dirección completa de un recurso, incluyendo el dominio. Por ejemplo:

<img src="http://www.example.com/images/apple.png" alt="fruta favorita">

Esto le dice al navegador que busque apple.png en el servidor www.example.com, en la carpeta /images/ que debe estar en la raiz. Las rutas absolutas son útiles para:

Recursos en servidores externos (por ejemplo, una imagen de otro sitio).
Evitar ambigüedades en sitios complejos.

Ejemplo con recurso externo:

<img src="https://cdn.example.com/public/apple.png" alt="Fruta ajena">

Esto cargaría una imagen desde otro servidor (si fuese un ejemplo real).

Nota: : Asegúrate de tener permiso para usar recursos externos, respetando los derechos de autor. Usa imágenes propias, de dominio público, o con licencias como Creative Commons.

Rutas relativas

Una ruta relativa indica la ubicación del recurso respecto al archivo HTML actual, sin incluir el dominio. El navegador asume que el recurso está en el mismo servidor. Hay tres casos principales:

Misma carpeta: Si el recurso está en la misma carpeta que el HTML, solo indica el nombre del archivo
Subcarpeta: Si el recurso está en una subcarpeta, indica la ruta a la carpeta
Carpeta superior o transversal: Usa ../ para retroceder un nivel en el árbol de directorios.

Así, si la imagen está en la misma carpeta que el archivo HTML, usa:

<img src="apple.png" alt="fruta favorita">

Si excursion.html está en /personal/excursion/ y apple.png también, el navegador busca en http://www.example.com/personal/excursion/apple.png.

Si la imagen está en una subcarpeta, como /images/, usa:

<img src="images/apple.png" alt="fruta favorita">

Para subcarpetas anidadas:

<img src="images/vacaciones/apple.png" alt="postre favorito">

Aqui la imagen se busca en una subcarpeta de la carpeta /images/.

Carpeta superior o transversal: Usa ../ para retroceder un nivel en el árbol de directorios. Por ejemplo:

<img src="../../images/apple.png" alt="postre favorito">

Esto significa: retrocede dos carpetas (dos ../) y luego entra en images/.

Ejemplo de estructura:

/ (raíz)
├── index.html
├── images/
│   └── apple.png
├── personal/
│   └── excursion/
│       └── excursion.html

Desde excursion.html a apple.png:
<img src="../../images/apple.png">
- ../ retrocede a /personal/.
- ../ retrocede a la raíz /.
- images/ entra en la carpeta images/.
Desde index.html a apple.png:
<img src="images/apple.png">
Desde excursion.html a index.html:
<a href="../../index.html">Inicio</a>

Rutas relativas vs. absolutas

Relativas: Más rápidas, porque el navegador ya conoce el servidor. Ideales para recursos en tu propio sitio. Cambiar el dominio no afecta las rutas.
Absolutas: Necesarias para recursos externos o en sitios con estructuras complejas. Más lentas, porque requieren resolver el dominio (DNS).

Usa rutas relativas siempre que puedas, pero verifica que los archivos estén en el servidor.

Respetando los derechos de autor

Puedes enlazar recursos externos (imágenes, videos, etc.) desde otros sitios, pero siempre respeta los derechos de autor. Por ejemplo:

<img src="https://creativecommons.org/images/example.png" alt="Imagen con licencia Creative Commons">

Antes de usar un recurso externo:

Verifica que sea de dominio público o tenga una licencia abierta (por ejemplo, Creative Commons).
Cita la fuente si es necesario.
Evita enlazar directamente imágenes de sitios privados sin permiso, ya que puede ser ilegal o consumir ancho de banda del propietario (hotlinking).

Prefiere usar imágenes propias o de bancos gratuitos como Unsplash, Pexels, o Pixabay, que ofrecen licencias claras.

Ejemplo completo

Aquí tienes una página que usa rutas relativas y absolutas:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi excursión</title>
</head>
<body>
  <!-- Título principal -->
  <h1>Mi excursión del domingo</h1>

  <p>Bienvenidos a mi página sobre mi última excursión. Aquí hay algunas fotos:</p>

  <!-- Ruta relativa: misma carpeta -->
  <img src="excursion.jpg" alt="Foto de la excursión" width="300" height="200">

  <!-- Ruta relativa: subcarpeta -->
  <img src="images/apple.png" alt="Personaje favorito" width="168" height="180">

  <!-- Ruta absoluta: recurso externo -->
  <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e" alt="Playa (Unsplash, dominio público)">

  <h2>Actividades</h2>
  <ul>
    <li>Caminata por el bosque</li>
    <li>Picnic en la playa</li>
    <li>Fotos al atardecer</li>
  </ul>

  <!-- Ruta relativa: página en carpeta superior -->
  <p>Volver a la <a href="../../index.html">página principal</a>.</p>

</body>
</html>

Estructura de carpetas:

example.com/
├── index.html
├── images/
│   └── apple.png
├── personal/
│   └── excursion/
│       └── excursion.html
│       └── excursion.jpg

Guarda este código como excursion.html en la carpeta /personal/excursion/. Asegúrate de tener excursion.jpg en la misma carpeta, apple.png en /images/, e index.html en la raíz. La imagen externa (de Unsplash) se carga desde internet, con una licencia de dominio público.

Observa cómo:

<img src="excursion.jpg"> usa una ruta relativa en la misma carpeta.
<img src="images/apple.png"> apunta a una subcarpeta.
<img src="https://..."> usa una ruta absoluta externa.
<a href="../../index.html"> retrocede dos carpetas para enlazar index.html.
La lista <ul> y los títulos <h1>, <h2> conectan con lecciones anteriores.

Consejos para evitar problemas

Si tus imágenes o enlaces no funcionan, revisa:

Ruta correcta:
- Usa rutas relativas (images/apple.png) para recursos locales.
- Verifica que los archivos estén subidos al servidor con herramientas como FileZilla o SFTP.
Nombres de archivo:
- Usa minúsculas y guiones (mi-imagen.jpg, no Mi Imagen.JPG).
- Evita espacios, acentos, o caracteres especiales (á, ñ).
- imagen.jpg y Imagen.jpg son diferentes en muchos servidores.
Subida correcta:
- Sube imágenes en modo binario (no texto) con tu herramienta de transferencia.
- Asegúrate de que el archivo está en la carpeta indicada.
Rutas locales:
- Evita rutas como /home/user/apple.png o c:\documents\apple.png, que no funcionan en internet.
Formatos válidos:
- Usa JPG, PNG, GIF, WebP, o SVG para imágenes. Evita formatos como BMP o TIFF.
Recarga la página:
- Si todo parece correcto, recarga el navegador (Ctrl+F5) para descartar caché o fallos temporales del servidor.
Sintaxis Unix:
- Usa barras / (por ejemplo, images/apple.png), no \ como en Windows. Los navegadores normalizan esto, pero los servidores pueden ser sensibles.

Recapitulación

En esta lección hemos visto:

Qué son las rutas y por qué son esenciales para cargar recursos como imágenes.
La diferencia entre rutas absolutas (dirección completa) y relativas (respecto al archivo HTML).
Cómo usar ../ para retroceder en directorios y navegar a subcarpetas.
La importancia de subir todos los archivos al servidor y evitar rutas locales.
Cómo enlazar recursos externos, respetando los derechos de autor.
Solucionar problemas comunes (nombres de archivo, formatos, subidas).

En el próximo tema, exploraremos más elementos HTML, como enlaces (<a>), que también usan rutas.