9. Dale Estilo a tu Página Web

This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Modifica la posición de tus elementos [Jan. 17, 2012, 11:17 a.m.]


Por ahora, todas las páginas que hemos armado han sido de una sola columna. En esta tarea vamos a aprender cómo crear layouts variados, tales como estos:

El Modelo de Caja (Box Model)

Cuando vayamos a armar nuestra página, debemos pensar en cada elemento HTML como si fuera una caja. Las cajas pueden estar una arriba de otra, o una dentro de otra. Individualmente, cada caja tiene los siguientes componentes:

La manera más sencilla de comprenderlo es viendo un ejemplo. Copia este código en un archivo HTML y ábrelo con tu navegador.

<html>
<head>
  <title>El Modelo de Cajas</title>
  <meta charset="utf-8" />
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      background: #FFFFDE;
    }
    

    .div1 {
      margin-top: 5px;
      margin-right: 0;      
      margin-bottom: 5px;
      margin-left: 40px;
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 0;
      padding-left: 0;
      border: 2px solid #0000FF;
      width: 960px;
      background: #DDF7F7;
    }
  

    .div2 {
      margin-top: 0;
      margin-right: 0;      
      margin-bottom: 10px;
      margin-left: 0;
      padding-top: 10px;
      padding-right: 30px;
      padding-bottom: 0;
      padding-left: 15px;
      width: 500px;
      border: 0;
      background: #E0FFC5;
    }

  </style>
</head>
<body>
  El elemento &lt;body&gt; es la caja "exterior" que contiene a todas las otras cajas. En este caso, le pusimos fondo color amarillo. 
  
  <div class="div1">
    Esta es la caja del primer &lt;div&gt;. Le pusimos fondo color celeste y un borde color azul.
  </div>

  <div class="div2">
    Esta es la caja del segundo elemento &lt;div&gt;. Le pusimos fondo color verde, sin borde.
  </div>

  Intenta modificar las propiedades margin, padding y width para que veas cómo funciona cada una.

</body>
</html>
Ahora, ve modificando las propiedades margin, padding y width para que veas cómo funcionan.
 

Tres maneras para desplegar elementos

Todos los elementos en HTML se despliegan en alguna de estas tres maneras:

  • En Bloque
    El elemento ocupa todo el ancho de la página (display: block;). Algunos elementos que se despliegan como bloque por defecto son:  <p>, <div>, <h1> … <h6>, <ul>, <ol>, y <li>.
     
  • En línea
    El elemento ocupa solo el ancho necesario para su contenido (display: inline;). Algunos elementos que se despliegan en línea por defecto son: <a>, <img />, <span> y <em>.
     
  • No se despliega
    El elemento no se muestra en la página (display: none;). Algunos elementos que no se despliegan por defecto son: <meta /> y <style>