Clase 02 · Ruta de navegación
Estos apuntes siguen, diapositiva a diapositiva, la segunda clase de Edición Web I: cómo construir la ruta —la dirección— que le indica al navegador dónde encontrar un archivo, ya sea una imagen guardada dentro de nuestras propias carpetas o una página completa de otro sitio web. Veremos cómo avanzar y retroceder entre carpetas, cómo enlazar con <a> a una ruta absoluta (una URL completa) y cómo navegar entre las páginas de un mismo proyecto.
Estructura de carpetas
Antes de escribir una ruta necesitamos ver cómo están organizadas las carpetas de nuestro proyecto. Vamos a partir de esta estructura de ejemplo:
-
Ejercicios
-
practica-html
-
recursos
-
img
- nuevas
-
img
-
recursos
-
practica-html
Construyendo la ruta
La ruta es el camino que hay que recorrer, carpeta a carpeta, desde el archivo donde estamos (nuestro Index.html) hasta el archivo al que queremos llegar. Para avanzar dentro de una carpeta escribimos su nombre seguido de una barra «/».
-
Ejercicios
- Index.html Aquí estamos
-
practica-html
-
recursos
-
img
-
nuevas
- imagen1.jpg
- imagen2.jpg
-
nuevas
-
img
-
recursos
Así se va construyendo la ruta, añadiendo una carpeta y una barra «/» cada vez que entramos en una nueva:
- practica-html/recursos/img/nueva
- practica-html/recursos/img/nueva
- practica-html/recursos/img/nueva
- practica-html/recursos/img/nueva
Ruta hasta la imagen
Cuando llegamos hasta la carpeta que contiene el archivo, añadimos también su nombre al final de la ruta — ya no hace falta la barra «/» final.
-
Ejercicios
- Index.html Aquí estamos
-
practica-html
-
recursos
-
img
-
nuevas
- imagen1.jpg Destino
- imagen2.jpg
-
nuevas
-
img
-
recursos
La ruta completa hasta la imagen queda así:
practica-html/recursos/img/nueva/imagen1.jpg
<img src="practica-html/recursos/img/nueva/imagen1.pg">«imagen1.pg» es una errata tal cual aparece en la diapositiva original (sería «imagen1.jpg»); se ha dejado igual para no cambiar el código mostrado en clase. Al copiar una ruta, revisa siempre que la extensión del archivo esté bien escrita.
Avanzar y retroceder directorios
Avanzar directorio
/nombre-carpeta
Retroceder directorio
Cada vez que queramos retroceder un directorio o carpeta usaremos:
../
Ejemplo 2 · retrocediendo directorios
Ahora nuestro archivo HTML está dentro de una carpeta y la imagen que necesitamos está un nivel por encima. Para subir un nivel escribimos «../» delante del nombre del archivo.
-
img
- imagen1.jpg Destino
-
practica-html
- Index.html Aquí estamos
-
recursos
-
img
- nuevas
-
img
La ruta desde Index.html hasta la imagen queda así:
../imagen1.jpg
Retrocediendo dos niveles
Si necesitamos subir más de un nivel, repetimos «../» tantas veces como carpetas tengamos que retroceder, una detrás de otra.
-
img
- imagen1.jpg Destino
-
Ejercicios
-
practica-html
- Index.html Aquí estamos
-
recursos
- nuevas
-
practica-html
La ruta desde Index.html hasta la imagen queda así:
../../imagen1.jpg
<img src="../../imagen1.pg">De nuevo, «imagen1.pg» reproduce tal cual la errata de la diapositiva original (sería «imagen1.jpg»).
Ruta absoluta (URL completa)
Hasta ahora hemos usado rutas relativas: apuntan a un archivo desde la ubicación de nuestro propio proyecto. Pero un enlace también puede apuntar a una ruta absoluta: la dirección completa de una página en internet, empezando por «https://».
Igual que con las carpetas, la URL se va construyendo añadiendo un tramo nuevo cada vez que entramos más adentro del sitio web:
- https://barreira.edu.es/
- https://barreira.edu.es/estudiar-diseno-grafico/
- https://barreira.edu.es/estudiar-diseno-grafico/grado-medio-diseno-grafico-interactivo/
<a>
Igual que con las imágenes, el atributo href de la etiqueta <a> puede llevar la ruta completa a la página con la que queremos enlazar.
<a href="https://barreira.edu.es/estudiar-diseno-grafico/grado-medio-diseno-grafico-interactivo/">Ver toda la información</a>Atributo target
<a href="ruta de la imagen" target="destino donde carga la página">Target
- _self: carga la página sobre nuestra página actual, es la opción por defecto.
- _blank: abre una pestaña nueva.
Navegación páginas
La ruta para navegar entre páginas funciona igual que con las imágenes: tenemos que apuntar al archivo que queremos desde la ubicación de nuestro archivo actual.
- Index.html Aquí estamos
-
1
- num-1.jpg
- 1.html
-
2
- num-2.jpg
- 2.html
-
3
- num-3.jpg
- 3.html Destino
-
4
- num-4.jpg
- 4.html
Desde Index.html, la ruta hasta 3.html va avanzando carpeta a carpeta:
1/2/3/3.html
<a href="1/2/3/3.html">Navegación páginas — hacia atrás
La misma lógica sirve para retroceder: si estamos dentro de 3.html y queremos volver a 1.html, subimos un nivel por cada «../» hasta llegar a la carpeta donde está.
- Index.html
-
1
- num-1.jpg
- 1.html Destino
-
2
- num-2.jpg
- 2.html
-
3
- num-3.jpg
- 3.html Aquí estamos
Desde 3.html, la ruta hasta 1.html retrocede dos niveles:
../../1.html
<a href="../../1.html">