La estructuración con Capas o Divs?
El darle forma a una web se le suele llamar estructurarla, o enmaquetarla. Es darle una estructura concreta para colocar luego el menú aquí, el contenido allá, etc. Para estructurar una web podemos usar simples saltos de línea, o avanzar un poco más y usar tablas, que dividen el espacio en celdas, celdas en las que podemos colocar más comodamente los elementos que queramos. También se puede estructurar una web partiéndola en frames o marcos.
Pero el método más profesional, límpio y cómodo es sin duda el uso de Capas o Divs (es lo mismo decir capa que div).
Qué es una Capa o un DIV?
No es más que un elemento rectangular dentro del cual podemos incluir lo que queramos, palabras, párrafos, enlaces, imágenes, varias de estas cosas a la vez o incluso otras capas o también tablas. Es un simple hueco. Lo bueno que tiene es que luego, desde la Hoja de Estilos, podemos darle a todo su contenido propiedades como color de fondo, tamaño de letra, dimensiones de ese recuadro, margenes, bordes, etc, etc.
Al principio quizás te de un poco de pánico todo esto, pero te prometo que no es nada dificil, ya verás. Fíjate, esto de abajo es el código Html de un Div sencillo.
A que no te ha dolido? je je. Como puedes ver, igual que ocurría con los elementos que vimos atrás, empieza con una etiqueta y termina con otra de cierre, igual pero con la contrabarra delante. Entre ambas etiquetas se coloca su contenido.
Escribe esa línea de código en el archivo plantilla.html, por supuesto, entre <body> y </body> pues se trata de algo que debe "verse". Ahora haz vista previa "Preview" y observa qué aparece. Nada asombroso, ya lo se.
Dando estilos a un Div
Ese Div no tiene ningún atractivo, claro. Para adornarlo lo que hacemos es definir un tipo de estilo en la Hoja de Estilos y aplicarselo a ese DIV.
Para empezar a jugar, abre el archivo estilo-general.css que se abrirá vacio, pon esto dentro y luego guárdalo:
Nota: Cada vez que hagas un cambio en la Hoja de Estilos, tienes que guardarla para poder ver sus efectos en la vista previa de la página web.
Clases de Estilo y Estilos Únicos
Existen dos formas de definir estilos. Una es crear una clase de estilo, que es un tipo de estilo que podemos asignar luego a uno o a varios elementos. Por otro lado están los estilos únicos, que solo se deben aplicar a un elemento por página web.
Las clases de estilo, que se pueden usar sobre varios elementos (varios párrafos, varias celdas, enlaces, etc) se definen en la Hoja de Estilo como vimos al crear la clase de estilo ".centrado", es decir, con un punto delante del nombre y luego colocando las propiedades entre los corchetes. Luego, en el código Html se asigna esa clase de estilo a un elemento colocando dentro de su etiqueta de inicio esto, class="nombredelaclasedeestilo".
En cambio los estilos únicos se definen en la Hoja de Estilo con una almohadilla como esta "#" (se escribe pulsando a la vez la tecla Alt Gr, que está a la derecha del espacio y la tecla del número 3 de tu teclado) en lugar de con un punto, y en el código Html se asigna este tipo de estilo único escribiendo dentro de la etiqueta del elemento esto otro id="nombredelestilounico" en lugar de con el class, que es para clases (estilos que se pueden asignar a varios elementos).
Si te he hecho la picha un lio, leelo despacito. Es importante entenderlo.
Como puedes ver, el estilo de antes #cabecera {background-color: pink } es un Estilo Único y por lo tanto se asigna este tipo a un solo elemento, y se hace en el Html así:
Abre ahora el archivo plantilla.html y pon esa línea de código. Ha de quedar así:
<html>
<head>
<title>Page title</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
</head>
<body>
<div id="cabecera">Bienvenidos a mi Web</div>
</body>
</html>
Si has guardado antes la Hoja de Estilo y haces vista previa en la plantilla, verás como ahora la frase "Bienvenido a mi Web" aparece diferente. Con un fondo rosa (pink). Es la magia del CSS aplicado a los Divs, pero no te creas que esto queda así, verás lo asombroso que es todo esto más adelante.
Lección 2:
