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.

 

Sergi Torres Martí

Sergi Torres Martí

Soy un joven emprendedor y he decidido crear este blog para darme a conocer.Mi interes es dotar de contenidos que pueda compartir y que sean de utilidad para la comunidad de programadores y aficionados a la tecnología

Deja un comentario

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, ACEPTAR

Aviso de cookies