Como recordarás (eso espero...

) los enlaces tenian esta forma:

<a href="ruta/archivo.html">Texto del Enlace</a>
así que vamos a poner ese código dentro de cada elemento li de la lista del
menú. Si ponemos una ruta falsa nos dará algún problema, asi que en lugar de
poner nada en la ruta le vamos a colocar una almohadilla (#) que sirve para que
haga el efecto de enlace pero sin enviarnos a ningún lado por ahora. Cuando
tengamos más páginas en la web pondremos las rutas de aquellas páginas que
queremos enlazar desde el menú, vale?
<a href="#">Enlace 1</a>
Como no vamos a querer que se abran esos enlaces en páginas distintas sino
en la misma, no es necesario ponerle el target al código del enlace
(el target="_blank" se pone para que el enlace se abra en una página distinta,
lo recuerdas?).
Pues adelante, abre tu Html-Kit, abre la plantilla.html y coloca un enlace en
cada uno de los tres elementos de lista que tenemos. Para diferenciarlos,
puedes escribir Enlace 1, Enlace 2 y Enlace 3.
Así que el código del menú completo se tiene que quedar así:

Eso es todo lo que tenemos que hacer en la plantilla.html porque lo demás,

el "aspecto", como siempre se lo daremos con la Hoja de Estilo ahora mismo.

Veamos realmente como funciona esta estructura que hemos hecho. Vamos a
insertar más texto en la parte principal de la página web para ver como se
comporta el menú lateral en el caso de que haya mucho más texto en la parte
derecha. Abre el Html-Kit y abre tu plantilla.html
Elementos que no son nada ¿?
Ya sabemos que gracias a la Hoja de Estilos podemos cambiar el tamaño de
la letra de toda la web, podemos variar los aspectos de los enlaces, los fondos
de ciertos elementos, etc, etc sin más que poner la propiedad correspondiente.
Pero para eso todas las partes del contenido de la página web deben "ser algo".
Si son enlaces modificaremos la etiqueta "a", si son párrafos la etiqueta "p",
pero, qué etiqueta hemos de modificar para cambiar las propiedades del texto
de la parte principal de nuestra plantilla? Aquella en la que pone "Esta será la
zona principal de la web"?
Va a ser dificil, pues no está encerrada entre ningúna etiqueta concreta,
luego ni es un párrafo, ni un enlace, ni ná de ná. Nosotros pretendemos que sea
un párrafo, verdad? Pues vamos a indicárselo poniéndole a esa frase la
etiqueta <p> al incio y como no, la etiqueta </p> de cierre al final. Ale, dale al
teclado! Ha de quedar así:
 Más contenidos
Tras esta aclaración, vamos a incluir un par de párrafos más a continuación
de ese. Ya sabes, has de poner <p> y </p> al principio y al final de cada uno
para que el navegador sepa donde empieza y termina ese párrafo. Escribe un
par de párrafos que tengan bastante texto, al menos lo suficiente como para
sobrepasar lo que ocupa el menú de la izquierda.
Si escribes lo suficiente en cantidad, conseguirás ver este aspecto en tu
plantilla.html
Justificar los párrafos de la página web
Ups, los párrafos se ven centrados y eso parece una poesia más que una web,
je je je. Eso es por que le pusimos align:center a body en la Hoja de Estilo.
Pero no pasa nada, lo arreglamos rápido definiendo un estilo justificado para
todos los párrafos de la web. Si más tarde nos interesa alguno con otra
alineación, lo crearemos en su momento.
Por ahora, abre tu Hoja de Estilo e incluye esta nueva línea, por ejemplo al
final de su contenido:
p {text-align:justify;}
Con esto los textos quedan justificados. Esto significa que se reparten para
que empiecen justo en la parte izquierda y terminen todas las líneas justo en
el margen derecho, sin huecos. A mi me gusta así, pero si lo prefieres, en tus
páginas puedes definirlo como text-align: left o text-align:right o text-
align:center, como quieras. En el ejemplo lo dejamos con Justify.
Los márgenes de los párrafos de la página web
La cosa va mejorando pero ahora vemos como los textos se pegan demasiado
tanto al menú lateral como a los extremos de la página. Eso no queda muy bien,
así que vamos a arreglarlo.
Tienes dos opciones, una es definirle el margen concreto a cada uno de los
párrafos de todas tus páginas web, o algo un poco más sencillo, poner un par
de palabras en la Hoja de Estilo y listo. Qué prefieres? je je je.
Abre la Hoja de Estilos de la plantilla.html (estilo-general.css) y vamos a
reparar esos márgenes. Como los textos que vemos sin margen pertenecen a la
capa de fondo naranja (orange) y en la Hoja de Estilos solo pone "orange" en la
capa "#contenido", ya sabemos a qué capa incluirle la
propiedad padding (el padding es parecido al margin, ya veremos la
diferencia), verdad? Por eso le pusimos esos colores tan feos, para encontrar
cada capa rápidamente, je je je. Pero solo queremos por ahora poner margen
a sus párrafos, es decir, queremos márgenes para los párrafos de dentro de la
capa #contenido, así que, si recuerdas bien lo que hicimos la otra vez, esto se
pone así:
#contenido p {padding:5px 10px 5px 10px;}
Resumiendo, escribimos primero la capa y luego el elemento de dentro de
esa capa al que queremos definir cosas y luego, entre paréntesis, las
propiedades. Le hemos puesto 10px en los dos lados y solo 5 por arriba y abajo,
para ver como queda e ir variando cada uno hasta que quede a nuestro gusto si
fuera necesario.
Escribe esa línea justo después de la definición en la Hoja de Estilo de la
capa #contenido. Guarda la Hoja de Estilo, haz vista previa de
la plantilla.html y vemos los resultados por si queremos variar alguna de esas
dimensiones.

(Margen entre menú lateral y textos principales)

Vaya... los márgenes no están mal del todo, pero vemos que los dos primeros
párrafos no parece que hayan tomado el margen izquierdo para separarse del
menú principal. Esto es por que se cuenta el margen desde la parte izquierda
de la capa #contenido, mientras que en esos dos párrafos debería contarse
desde la derecha del menú, verdad? Vamos a ver como solucionamos esto.
Para eso tendríamos que poner un margen por la derecha para el menú, y
como pertenece a la capa #menu tocaría retocar esa línea en estilo-
general.css añadiéndole esto último que he subrayado:
#menu {background-color:yellow; width:150px; float:left; text-align:left; margin-
right:10px;}
Ahora si que lo hemos conseguido, mira el resultado del ejemplo.
Lección 2:
 La Plantilla
 Las Capas o Divs
 Creando más capas
 Un Ancho Fijo
 El menú de la web
 Enlaces del Menú
 Estilos para Enlaces
 Estilos para Listas
 Formatear a Cero
 Márgenes del Menú
 Enlaces Cambiantes
 Enlaces con Fondo
 Margen en párrafos
 Indentar Párrafos
 Margin y Padding
 Separar el menú
 Los Títulos
 Posicionamiento


 Haciendo funcionar los enlaces del

menú horizontal
 Ya estamos en condiciones de hacer funcionar el menú horizontal de
arriba, también llamado barra de navegación. Para ello abre una página
cualquiera de las que tenemos hechas, por ejemplo historia.html
 Si te fijas en su código Html, en la capa navegacion teniamos puesto
esto:
 <div id="navegacion">
<ul>
<li><a href="#">Sección 1</a></li>
<li><a href="#">Sección 2</a></li>
<li><a href="#">Sección 3</a></li>
</ul>
</div>


 Ese código tenemos que transformarlo para que aparezcan enlaces a
todas las secciones, incluida la portada. Para ello basta con añadir 4
líneas más como las que ya hay, quedando una para cada uno de los
enlaces que necesitamos. Y ya que estamos, en lugar de Sección 1,
Sección 2, etc, escribiremos el texto que queremos que aparezca en el
menú, es decir, Portada, Historia, Discografía, Conciertos, Descargas,
Foro y Souvenirs:
 <div id="navegacion">
<ul>
 <li><a href="#">Portada</a></li>
<li><a href="#">Historia</a></li>
<li><a href="#">Discografía</a></li>
<li><a href="#">Conciertos</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Foro</a></li>
<li><a href="#">Souvenirs</a></li>
</ul>
</div>

 Va tomando forma, bien bien. Ahora solo falta colocarle la ruta en lugar
de la almohadilla (#). Cuál crees que será la ruta de estos archivos? Pues,
esté el navegador en la página que sea, siempre tendrá que, primero
salir de esa carpeta ( ../ ), después entrar en la carpeta de la sección
correspondiente ( nombre de la carpeta) y finalmente abrir el archivo de
la página (nombredelapagina.html). Es decir, así:
 <div id="navegacion">
<ul>
<li><a href="#">Portada</a></li>
<li><a href="../historia/historia.html">Historia</a></li>
<li><a href="../discografia/discografia.html">Discografía</a></li>
<li><a href="../conciertos/conciertos.html">Conciertos</a></li>
<li><a href="../descargas/descargas.html">Descargas</a></li>
<li><a href="../foro/foro.html">Foro</a></li>
<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>

 Como verás, la ruta de la portada no la he puesto aún. Esa ruta será

diferente, pues para llegar desde la página de cualquier sección a la
portada (que como digimos iba a ser la index.html) la ruta a seguir es
simplemente ../ (para salir de la carpeta de sección en la que se esté)
seguido de index.html quedando todo ese código así:
 <div id="navegacion">
<ul>
<li><a href="../index.html">Portada</a></li>
<li><a href="../historia/historia.html">Historia</a></li>
<li><a href="../discografia/discografia.html">Discografía</a></li>
<li><a href="../conciertos/conciertos.html">Conciertos</a></li>
<li><a href="../descargas/descargas.html">Descargas</a></li>
<li><a href="../foro/foro.html">Foro</a></li>
<li><a href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>
 Estás de acuerdo conmigo en estos códigos? Si, verdad? Je je je je, ves?
Ya hablamos de códigos Html de tú a tú! Estás hecho todo un
Webmaster!!!
 Bueno, para ser correctos del todo, deberías recordar aquél error que
comentamos una vez que surge en el Internet Explorer si ponemos las
líneas de código Html de ese modo. La norma era que todo el código
Html de una lista ha de estar todo seguido, por tanto antes de reemplazar
ese código vamos a ponerlo en una sola línea. Para ello, pones el cursor
al final de cada línea y das a la tecla "Supr" hasta que la siguiente quede
pegada a la anterior. Y así con todas. Debe quedar más o menos así:
 <div id="navegacion">
<ul><li><a href="../index.html">Portada</a></li><li><a
href="../historia/historia.html">Historia</a>
</li><li><a
href="../discografia/discografia.html">Discografía</a></li><li><a
href="../conciertos/
conciertos.html">Conciertos</a></li><li><a
href="../descargas/descargas.html">Descargas</a></li><li>
<a href="../foro/foro.html">Foro</a></li><li><a
href="../souvenirs/souvenirs.html">Souvenirs</a></li>
</ul>
</div>
 Ahora solo nos queda usar el buscar y reemplazar del EditPad Lite para
de un plumazo actualizar los códigos de los menús horizontales de todas
las páginas de