El tema de los enlaces relativos es algo que siempre requiere un poco mas de concentracion para digerir asi que no te preocupes.
Para practicar lo mejor es crearse una estructura de carpetas y archivos y poner enlaces e intentar enlazar todos los archivos unos con otros.
1. Crea primero una carpeta que sera la carpeta contenedora de toda la web.
2. En esta carpeta añade un par de archivos html, por ejemplo index.html y pagina1.html.
3. index.html es por defecto la pagina principal, si en el archivo index.html pones un enlace a pagina1.html el archivo relativo seria asi; <a href="pagina1.html"> enlace </a>, y si desde pagina1.html pones un enlace a index.html seria asi <a href="index.html"> enlace </a>.
Eso ocurre porque ambos archivos estan al mismo nivel en lo que se llama el directorio raiz (tu carpeta contenedora).
4. Ahora crea dentro de la carpeta contenedora que creaste al principio otra carpeta llamada carpeta2 . Dentro de la nueva carpeta crea un nuevo archivo llamado pagina2.html
5.Esa nueva carpeta que acabas de crear esta al mismo "nivel" (dentro de la carpeta contenedora) que index.html y pagina1.html, pero el archivo que esta dentro (pagina2.html)
esta en nuevo nivel (ya que tendrias que abrir la carpeta para verlo).
6. Si pones un enlace desde index.html o pagina1.html a pagina2.html la ruta seria esta; <a href="carpeta2/pagina2.html"> enlace </a>
7. Si por el contrario quieres poner un enlace desde la pagina2 a index.html o pagina1.html
Te situas mentalmente en la posicion actual que estas (carpeta2/pagina2.html) y haces el recorrido inverso.
8. Como estas dentro de la carpeta2 tienes que "saltar hacia atras " a la carpeta anterior que es la carpeta contenedora. Ese "salto" hacia atras se representa como "../"
Por lo tanto desde pagina2.html un enlace a index.html o pagina1.html seria;
<a href="../index.html"> enlace </a>
9. Segun tu estructura de carpetas y su profundidad puede que en muchas ocasiones tengas que dar varios "saltos hacia atras".
Cada salto que des añade otros dos puntos ".. "
10. Por ejemplo pongamos que creas una nueva carpeta dentro de carpeta2 llamada carpeta3 y creas un nuevo archivo llamado pagina3, un enlace desde pagina3 a index.html o pagina1.html seria <a href="../../index.html"> enlace </a>.
Pero en cambio desde la pagina3.html a la pagina2.html solo tendrias que dar un "salto hacia atras" por lo tanto seria <a href="../pagina2.html"> enlace </a>
11. Por ultimo si desde index.html o pagina1.html querrias ir al ultimo archivo creado (pagina3), tendrias que "saltar hacia adelante" con el mismo sistema que hemos usado al principio, en este caso se especifica concretamente los nombres de las capetas por donde pasas; <a href="carpeta2/carpeta3/pagina3.html"> enlace </a>
Lo mejor de todo es practicar y ver si los enlaces que vas creando funcionan, puedes hacer la estructura de carpertas y archivos tan grande como quieras. Piensa en ella como si fuera una estructura jerarquica en arbol donde la copa es la carpeta contenedora de la web, vete situandote mentalmente en cada pagina y pensando donde te encuentras en la estructura general y a partir de ahi si necesitas dar "saltos hacia delante" o "hacia atras" o los archivos estan en el mismo nivel y con solo indicar su nombre es suficiente.
Con un poco de orden no tendras ningun problema, pero aun asi, como ultima instacia los programas de creacion web como dreamweaver etc, hacen esas rutas relativas automaticamente por ti.
