Lo último que aprendimos en este cuerso básico de HTML, fue a dividir nuestra página. Estas divisiones las conocemos como contenedores o DIV`s, muy utiles para darle una imagen más bonita a nuestra página.
Comenzamos como siempre añadiendo las etiquetas básicas (<html> </html>). Lo primero que hay que tener en cuenta es que estos DIV`s o contenedores dividen tu página como tu quieras y además, como suele pasar en HTML y hemos comprobado, los podemos modificar a nuestra manera.
La etiqueta para añadir un div es; <div> </div>. Para añadirle las características que queramos utilizamos el atributo de CSS style, añadiéndolo despues de la etiqueta <div> de la siguiente forma:
<div style="..."> Contenido que queramos que aparezca </div>
Los valores que podemos modificar son los siguientes:
Hay que tener en cuenta que es lo que queremos crear y como debemos hacerlo. Recomiendo jugar con los valores Position y top/bottom/right/left porque podemos dividir nuestra página web en diferentes columnas y franjas que nos van a ser muy útiles.
Un ejemplo de como podemos usar estos DIV`s:
<html>
<head>
<title> Contenedores </title>
</head>
<body>
<div style="border:3px dashed rgb(171,16,16); position: absolute; top:10%; left:20%; right:20%; height: 200px;text-align: center; font-size:30px; background-image:url(IMG/IMG_01.jpg);" >
Guzmán Fernández - Prueba página
</div>
<div style="border:3px solid rgb(248,188,59); position: absolute; top:40%; left:20%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >
Contenedor 1
</div>
<div style="border:3px solid #3A15E0; position: absolute; top:40%; left:45%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >
Contenedor 2
</div>
<div style="border:3px solid #95E015; position: absolute; top:40%; left:65,5%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >
Contenedor 3
</div>
<div style="border:3px double #000000; position: absolute; top:60%; left:30%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >
Contenedor 4
</div>
<div style="border:3px double #B700FF; position: absolute; top:60%; left:55%; right:20%; height: 100px; width: 200px; text-align: center; font-size:20px;" >
Contenedor 5
</div>
<div style="border:3px dotted #00FFDA; position: absolute; top:80%; left:20%; right:20%; height:30px; width:860px; text-align: center; font-size:20px;" >
Contenedor Largo 1
</div>
<div style="border:3px solid #F2FF78; position: absolute; top:85%; left:20%; right:20%; height:30px; width:860px; text-align: center; font-size:20px;" >
Contenedor Largo 2
</div>
<div style="border:3px double #000000; position: absolute; top:90%; left:20%; right:20%; height:30px; width:430px; text-align: center; font-size:20px;" >
Contenedor Largo 3
</div>
<div style="border:3px double #000000; position: absolute; top:90%; left:54%; right:20%; height:30px; width:430px; text-align: center; font-size:20px;" >
Contenedor Largo 4
</div>
</body>
</html>
El resultado sería el siguiente:
