Recordando el código que llevamos hasta el momento

Si te has fijado, si no sigues al pie de la letra las explicaciones y se te ocurre crear alguna capa más, alguna capa menos, otros textos, otros párrafos etc distintos a lo que aqui te comento lo único que conseguirás es perderte, pues cuando más adelante te diga "en el párrafo donde pone Bienvenido haz esto y lo otro" no sabrás a qué me refiero.

Es por eso que debes seguir todo esto al pie de la letra, sin improvisar nada, sin cambiar nada de nada de nada.

Claro que por el camino se te van a ocurrir ideas propias e incluso vas a querer ir remodelando lo que yo te explico para que el ejemplo se vaya pareciendo a tu idea de web, pero eso es algo que puedes hacer a la par, pero en otra carpeta distinta, de modo que la del ejemplo de estas explicaciones quede tal cual la explico, oki? En otra carpeta puedes hacerlo a tu manera y de hecho, es lo que deberías estar haciendo ya para ir asentando lo que aprendes y para ir ensayando etc.

Por si acaso te has columpiado ya (seguro que sí, je je) te dejo ahora los códigos de los archivos plantilla.html y estilo-general.css para que verifiques que son iguales a los tuyos, oki?

A veces puede que te diga... "en la línea 15 de la hoja de estilo cambia tal por cual". Así que, procura que sean exactamente iguales para no perderte. No solo es por eso claro, es porque tanto en Html como en CSS el orden que tomen las líneas tiene gran importancia. En CSS colocar cierta línea al principio o al final puede cambiarlo todo (si no te lo crees prueba a colocar la lína del asterisco al final y verás como todo cambia...).

Código Html de la plantilla.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>Page title</title>
    <link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
  </head>
  <body>
    <div id="global">
      <div id="curva-superior"></div>
      <div id="cabecera">
       <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>
    <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>
  <div id="contenido">
    <div id="menu">
      <h1>Título de Sección 1</h1>
        <ul><li><a href="#">Enlace 1</a></li><li><a href="#">Enlace 2</a></li><li>
<a href="#">Enlace 3</a></li><li><a href="#">Enlace 4</a></li></ul>
      </div>
  <h1>Esta será la zona principal de la web</h1>
<p>Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo
pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo.</h2>
<p>En pocas lecciones aprenderé a darle margenes para
separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea,
que queda mucho mejor.</p>
<p>Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos
alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>
      </div>
      <div id="pie">Este es el pié de página</div>
      <div id="curva-inferior"></div>
    </div>
  </body>
</html>

Código CSS de estilo-general.css

* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ;
text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ;
text-align: center}
body {text-align: center }
#global {width:800px ; margin:4px auto }

#curva-superior { background-image: url(objetos/curva-superior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
#cabecera {background-color: white ; border-left: black 1px solid ;
border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left }
#publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { margin-left: 180px }
#contenido {background-color: orange ; border-left: black 1px solid ;
border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
#menu {width: 150px ; float:left ;
text-align:left ; margin: 3px 10px 3px 3px ;
background-image: url(objetos/menu-parte-inferior.gif);
background-position: bottom ;
padding-bottom:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;
background-image: url(objetos/menu-parte-superior.gif) }
#pie { background-color: white ;
border-left: black 1px solid ;
border-right: black 1px solid;
border-top: black 1px solid }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ;
background-repeat: no-repeat ;
width: 800px ;
height:12px ;
overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}

Bien. Y este es el aspecto que ha de tener esa plantilla. Vamos ahora a la siguiente lección? Venga, vamos! Pero antes os dejo una chorrada, vale? je je je. Esto es para ver la progresión que hemos logrado. Os gusta? je je je, tonterias que se me ocurren! ja ja ja.