Teoría
Teoría

Direcciones relativas

Trabajamos en el blog principalmente desde nuestra computadora, es decir, de forma local. Un enlace a otra entrada debe abrir un archivo de nuestra computadora. Para eso podemos usar una dirección como esta:

<a href="day-2.html">Segunda entrada del blog</a>

Esta dirección se llama relativa. A diferencia de las direcciones completas, no incluye el nombre del sitio. Para interpretarla, el navegador toma como referencia la ubicación de la página actual. Por ejemplo, tenemos dos archivos en la carpeta c:/blog:

c:/blog/
      |-index.html // esta página está abierta en el navegador
      |-inner.html

La página abierta es c:/blog/index.html y contiene un enlace con la dirección relativa inner.html. Para abrirlo, el navegador sustituye la última parte de la dirección actual:

c:/blog/index.html + inner.html // sustituimos la última parte
c:/blog/inner.html              // abrimos este archivo

Las direcciones relativas también funcionan en internet. Si publicamos los dos archivos del ejemplo sin cambiar su ubicación entre sí, el enlace seguirá funcionando. En la página https://example.com/blog/index.html, la dirección inner.html se interpreta así:

https://example.com/blog/index.html + inner.html // sustituimos la última parte
https://example.com/blog/inner.html              // abrimos esta dirección

Añadamos algunos enlaces relativos más a la página principal del blog.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Sitio de un principiante en desarrollo web</h1> </header> <main> <nav> <h2>Entradas del blog</h2> <ul> <li><a href="day-1.html">Día uno. Cómo olvidé darle de comer al gato</a></li>  <li>Día dos. Quiero crear páginas web</li> <li>Día tres. Mi gato se enojó conmigo</li> <li>Día cuatro. Casi me enfermo</li> <li>Día cinco. Un descanso</li> <li>Día seis. No entendí nada</li> <li>Día siete. Cupcake me dio una tarea</li> <li>Día ocho. Un asunto muy serio</li> <li>Día nueve. O más bien, noche</li> <li>Día diez. Un repaso</li> <li>Día once. Sin exagerar</li> </ul> </nav> <section> <p>¡Hola! Te doy la bienvenida a mi primer sitio web. Hasta hace poco no tenía idea de cómo se creaba una página web, pero ahora encontré ejercicios interactivos de HTML y CSS y me propuse aprender a crearlas. Hasta tengo un instructor: Cupcake, que no me dejará bajar la guardia y estará pendiente de mis avances.</p> <p>Mi primera tarea es llevar un diario y contar con sinceridad todo lo que vaya logrando.</p> </section> <section> Sección de habilidades </section> </main> <footer> Pie de página </footer> </body> </html>

CSS

body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 36px; line-height: normal; } h2 { font-size: 20px; line-height: normal; } a { color: #0099ef; text-decoration: underline; } ul { list-style: none; padding-left: 0; } footer { margin-top: 30px; }

ObjetivosRealizado

Sigue el ejemplo del primer elemento y añade otros tres enlaces a la lista de entradas del blog.

Añade al segundo elemento un enlace con la dirección relativa day-2.html.
Añade al tercer elemento un enlace con la dirección relativa day-3.html.
Añade al cuarto elemento un enlace con la dirección relativa day-4.html.