Código fuente necesario

Aquí aparece el código de ejemplo para la primera página HTML. Tenga presente la inclusión de varias hojas de estilo. Al principio nops centramos en la hoja de estilos css/define.css, en el que definiremos las distintas áreas.
Se recomienda, crear la hoja css/extra.css igual que en el ejemplo, pero inicialmente sin instrucciones (simplemente dejar en blanco). Más adelante, ya introduciremos las instrucciones CSS correspondientes.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="de">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Testseite</title>

  <link rel="stylesheet" type="text/css" href="css/define.css" media="screen, projection">
  <link rel="stylesheet" type="text/css" href="css/extra.css" media="screen, projection">

 </head>
 <body>
 
  <div id="main">

   <div id="head">
    <p>El jefe de campo</p>
   </div>

   <div id="content">
    <p> área del contenido</p>
   </div>

   <div id="foot">
    <p>El pie de la página</p>
   </div>

  </div>

 </body>
</html>

La correspondiente hoja de estilos css/define.css contiene las siguientes instrucciones, para usarse en la definición de cada 'contenedor':

html, body {
margin: 0;
background: #ccc;
color: #000;
}

body {
padding: 1% 10%;
}

#main {
padding: 0;
background: #aaa;
border-right: 1px solid #369;
border-left: 1px solid #369;
}

#head {
background: #09c;
overflow: visible;
}

#content {
margin: 5px 0;
background: #e0e0e0;
padding: 20px;
}

#foot {
background: #09c;
overflow: visible;
}

#head, #content, #foot {
border-top: 1px solid #369;
border-bottom:1px solid #369;
}

Inicio de página

Índice Capítulo 4 | Contenido material adicional