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;
}