Reparando el logotipo
Bueno, a veces todo arreglo tiene sus daños colaterales, je je je, pero no pasa nada. Estas cosillas nos sirven muy bien para seguir aprendiendo y practicar con todo lo que voy enseñando así que, sigamos. Resulta que si ahora haces vista previa sobre cualquiera de las nuevas páginas creadas, como por ejemplo sobre historia.html te darás cuenta de que ahora no se ve el logotipo que teníamos, el de comocreartuweb de la parte superior. Además, ya no funciona su enlace y en lugar de llevarnos a index.html nos da un error. No es dificil adivinar porqué, pero te lo digo yo que soy más rápido, je je.
Resulta que ahora las rutas del archivo del logotipo.gif y la del enlace hacia el index no son correctas. Esto es por el mismo motivo que antes, porque son copia de la plantilla que antes no estaba dentro de ninguna carpeta y como ahora si lo está, tenemos que reparar las rutas, corregirlas.
Veamos rápidamente cuales son las rutas de logotipo.gif y la del enlace a index.html en la página historia.html. En el código Html de esa página vemos esto:
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270px" height="80px"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
Como ves, el navegador cuando visite esa página intentará buscar un archivo llamado logotipo.gif dentro de la carpeta objetos que hay dentro de la carpeta historia (pues es en esta carpeta donde está la página que está visitando, historia.html). Pero en realidad el logotipo.gif se encuentra en la carpeta objetos de la raiz de la web, fuera de la carpeta historia. Así que, la ruta correcta sería otra. Para llegar desde historia.html hasta el logotipo.gif es necesario, primero salir de la carpeta historia (eso se hacía con ../ ), luego entrar en la carpeta objetos (la antigua, en la que guardamos al principio los archivos del logotipo, etc), y finalmente abrir el logotipo.gif
Por otro lado, para llegar desde cualquier página que haya dentro de una de las carpetas de la web de ejemplo al index.html, es necesario salir de la carpeta. Así que la ruta correcta del enlace será "../index.html" y no "index.html" solamente.
Por tanto las rutas correctas serán:
<div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif" width="270px" height="80px"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
muy parecidas, solo cambia el añadirle los puntos y la contabarra.
Pero esto hay que cambiarlo en todas las páginas web que tenemos dentro de las carpetas de sección! Vaya tela, no? Menos mal que ahora sabemos manejar perfectamente el EditPad Lite y será coser y cantar! Vamos allá y lo recordamos? Esta vez te lo explico de un modo más rápido, no creo que necesites mucha ayuda otra vez, no?
Abrimos el EditPad Lite, abrimos desde él todas las páginas que tenemos dentro de carpetas (las mismas que la vez anterior). Escribimos en la ventana de arriba (la de Search) esto:
<div id="logotipo"><a href="index.html"><img src="objetos/logotipo.gif" width="270px" height="80px"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
y en la ventana de abajo esto otro:
<div id="logotipo"><a href="../index.html"><img src="../objetos/logotipo.gif" width="270px" height="80px"
alt="Haz clic aquí para volver a la página de inicio"></a></div>
<div id="publicidad">Bienvenidos a mi web</div>
</div>
Le damos al botón "Replace All", cerramos el EditPad Lite, le indicamos que guarde todos los archivos y... ya está. Todo reparado. Que gusto verdad? Je je je.
Lección 6:
