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.

Task Navigation 

Modifica la posición de tus elementos


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:
 

Para hacer esto, primero necesitamos conocer algunos conceptos nuevos:
 
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 funciona cada una.
 
Tres maneras de desplegar elementos
 
Todos los elementos en HTML se despliegan en alguna de estas tres maneras:
  • En Bloque (display: block;)
    El elemento ocupa todo el ancho de la página. Algunos elementos que se despliegan como bloque de manera predeterminada son:  <p>, <div>, <h1> … <h6>, <ul>, <ol>, y <li>.
     
  • En línea (display: inline;)
    El elemento ocupa solo el ancho necesario para su contenido. Algunos elementos que se despliegan en línea de manera predeterminada son: <a>, <img />, <span> y <em>.
     
  • No se despliega (display: none;)
    El elemento no se muestra en la página. Algunos elementos que no se despliegan de manera predeterminada son: <meta /> y <style>
     

Al igual que hicimos arriba, la manera más fácil de comprender el elemento "display" es viéndolo en un ejemplo. Copia este código en un archivo HTML y ábrelo con tu navegador:

<html>
<head>
  <title>Block vs Inline</title>
  <meta charset="utf-8" />
  <style type="text/css">
    p {
      display: block;
      background: #E5FFD9;
    }

    span {
      display: inline;
      background: #FFEFDA;
      border: 1px solid #FF6122;
    }

    .asinline {
      display: inline;
    }

    .invisible {
      display: none;
    }
  </style>
</head>

<body>

  <p>Los elementos &lt;p&gt; se despliegan como bloque de manera predeterminada.</p>

  <p>Si agregamos varios &lt;p&gt;, aparecerán uno abajo del otro.</p>

  <span>Los elementos &lt;span&gt; se despliegan en línea.</span>

  <span>Si agregamos varios &lt;span&gt;, aparecerán uno alado del otro.</span>

  <p>Podemos insertar <span>elementos &lt;span&gt;</span> dentro de elementos &lt;p&gt;.</p>

  <p class="asinline">Mediante CSS, podemos hacer que los elementos &lt;p&gt;</p> 

  <p class="asinline">se desplieguen en línea.</p>

  <p class="invisible">O inclusive, que no se muestren en absoluto.</p>

  <p>Modifica los valores de "display" en el CSS para que veas cómo funciona esta propiedad.</p>

</body>

</html>
 
Ahora, ve modificando los valores de la propiedad "display" para que veas qué efecto tiene cada una de las tres opciones.
 
Position y Float
 
Las propiedades "position" y "float" son las más importantes para crear layouts complejos. Te recomendamos visitar la página "Aprende Posicionamiento con CSS en 10 Pasos", donde aprenderás mediante ejemplos cómo funcionan estas propiedades.
 
Antes de pasar a la siguiente tarea, tómate un par de minutos para poner a prueba lo que has aprendido. Trata de crear layouts diferentes utilizando las propiedades CSS que vimos en esta tarea.

Task Discussion