La etiqueta «div»

Los “div” es la base para crear cualquier pagina web, ya que con ellos creamos la estructura de la web.

Para entender que es o para que sirve un «div» hemos de pensar en el como si fuera una caja, y en ella podemos introducir objetos (etiquetas y contenidos) i/o otras cajas (mas divs). Estas cajas, podemos personalizarlas al igual que su contenido, es decir, cambiar el color, el tamaño, la alineación…

A través de los «div» crearemos la estructura de nuestra pagina web, para ello veremos un pequeño ejemplo: (Es posible que no entendáis las sentencias CSS, las he creado para que podáis diferenciar los «div» y próximamente haré un curso de CSS en el que aprenderéis a usar estas sentencias)

<html>
<head>

<style type=»text/css»>
.d1 {background-color: Blue; height: 100px; color:white;}
.d2 {background-color: green; height: 100px;color:white;}
.d3 {background-color: red; height: 50px; margin: 20px;color:white;}
</style>

</head>
<body>

 <div class=»d1″ >
CAJA 1
</div>
<div class=»d2″>
CAJA 2

<div class=»d3″>
CAJA 3 DENTRO DE CAJA 2
</div>

</div>

</body>
</html>

Como se puede apreciar en el ejemplo que creado 3 Div el 1 y el 2 independientes y el 3 dentro del segundo, el código del «Head» es el CSS que he usado para que se aprecie la diferencia entre los «Div». El resultado de este ejemplo:

div diferenciado-min

Ahora que ya sabéis que es un «div» todo lo demás es aprender CSS para que os queden como los requiráis (tamaño, color,etc.). Y probéis de montar una web desde 0, ya que asi es como mas aprenderéis a darles uso.

Deja un comentario