“Una de Código” inicia un nuevo curso de HTML/CSS.El objetivo de este curso es aprender y dominar la maquetación web sin tablas
Periódicamente se irán publicando nuevos capÃtulos, que serán lo más sencillos posible, de manera que podréis seguirlos perfectamente cualquiera que sea vuestro nivel.
Para los que no estéis familiarizados, o queráis repasar conocimientos, aquà os dejo los enlaces a las especificaciones oficiales de XHTML y CSS.
CAPÃTULO 1
Estructuración XHTML y CSS
En este primer capÃtulo vamos a estructurar de forma correcta los ficheros CSS y XHTML.
La estructura básica de la página, a la que nos referiremos a partir de ahora como plantilla 1, es la siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="estructura.css" />
<link rel="stylesheet" type="text/css" href="decoracion.css" />
<title>Plantilla 1</title>
</head>
<body>
</body>
</html>
En ella véis que se enlazan dos hojas de estilo (estructura.css y decoracion.css). Esto es, para separar lo referente al posicionamiento de los contenidos de la página y lo referente a los colores, bordes, etc. Hablaremos de esto en detalle en breve.
Ahora ya podemos comenzar a colocar algo de contenido en la página.
Empezaremos con una estructura básica: página centrada en el navegador, con cabecera, cuerpo y pie de página.
El contenido podrÃa quedar de la siguiente manera:
<div id="pagina">
<div id="cabecera">
<h1>Esta es la cabecera de la pgina</h2>
</div>
<div id="contenido">
<h2>Este es el contenido de la pgina</h2>
<p>Aqu colocaremos la informacin principal de cada seccin</p>
</div>
<div id="pie">
pie de pgina.
</div>
</div>
Es la parte que introduciremos en la plantilla 1, entre las etiquetas <body> y </body>
Nota: Como podéis observar, utilizamos etiquetas div con identificadores en lugar de clases. Esto es porque la cabecera, cuerpo o pie de página sólo aparecen una vez por página (los id no se pueden repetir).
La parte de estructuración acaba aquÃ. A partir de este momento nos centramos en el posicionamiento.
En el mismo directorio donde hemos guardado plantilla1.html, creamos los ficheros estructura.css y decoracion.css.
Muestro aquà el código para posicionar los elementos y darles un toque de color.
estructura.css
body {
padding: 20px;
}
h1 {
margin: 0;
}
#pagina {
margin: 0 auto;
width: 780px;
}
#cabecera {
padding: 10px;
}
#pie {
padding: 5px;
text-align: center;
}
#contenido {
padding: 20px;
}
decoracion.css
#cabecera,
#pie {
background-color: #dedede;
}
#cabecera {
color: #d10003;
}
#contenido {
background-color: #f3f3f3;
color: black;
}
#pagina {
border: 1px solid #aaa;
}
La clave, es ese “margin: 0 auto;” y esos paddings, que distribuyen los contenidos adecuadamente.
Este es el resultado final:
Que buena introdución al css espero haya mas info