Como hacer layouts con HTML y CSS

Si es la primera vez que usar CSS puede resultarte un poco confuso manejar la estructuración de una página web, pero empezando con lo básico aprenderás rápido.

Vamos a empezar estudiando el modelo de caja, con conceptos muy sencillos como “padding”, “border” y “margin”, que te ayudarán a comprender mejor la base del lenguaje.

Modelo de cajas de CSS

En este modelo tendremos siempre el contenido como elemento central, este estará rodeado por el “padding”, el cual a su vez es rodeado por el “borde” y finalmente el “margen”.

Este modelo será aplicable para cualquier elemento de la página, desde párrafos hasta links, listas, imágenes, etc.

Altura y anchura

Dos propiedades básicas de cualquier elemento son su altura y anchura, estás son representadas por las palabras “width” y “height”, y desde tiempos de la prehistoria han sido parte de la síntaxis para configurar lo que mostramos en la página web.

En base a esto, si por ejemplo quisiéramos establecer un ancho de 50px a una caja, y ya tenemos un padding de 2px, un borde de 5 px y un margen de 10px, el ancho total de la caja será de 89px, ya que sumaremos 50px del contenido más 2px del padding derecho, 2px del padding izquierdo, 5px del borde derecho, 5px del izquierdo, y 20px por los dos márgenes laterales.

Existen también una variación de estas propiedades, las cuales permiten establecer limitantes, nos referimos a “min-width”, “min-height”, “max-width” y “max-height”. Dichas propiedades nos permiten establecer máximos y mínimos, y de esta manera asegurar que la caja no se reducirá o crecerá tanto que la estructura se vea afectada.

Padding

El padding es el espacio que existe entre el contenido y el borde de la caja, su configuración se hace a través de las propiedades “padding-top”, “padding-right”, “padding-bottom” y “padding-left”, en caso de que te quieras ahorrar escribir las cuatro propiedades puedes usar únicamente la propiedad “padding” con cuatro valores distintos, o uno sólo si quieres dar el mismo padding a todos los lados.

#encabezado { padding-bottom: 5px; }
#articulo { padding: 3px 5px; }

Bordes

Los bordes son un aspecto un poco más configurable que los padding, debido a que son un elemento más visual podemos cambiar su color y forma para adaptarlos mejor a la imagen del sitio.

Al igual que el resto de los elementos tienen una anchura la cual podemos establecer mediante píxeles.

Son varias las propiedades específicas para esta función:

• Si únicamente queremos cambiar el ancho del borde podemos usar “border-width“. Si queremos ser más específicos y definir cada lado entonces podemos usar “border-top-width”, “border-right-width”, “border-bottom-width” y “border-left-width”.
• Para definir la forma del borde tenemos la propiedad “border-style“, si no la especificamos el borde no será visible y por lo tanto la propiedad “border-width” no servirá de nada. Los valores para esta propiedad son “solid” el cual es el clásico con una sola línea, “dotted” que establece una línea punteada, “dashed” que hace lo suyo con pequeños guiones, y después de esto vienen algunos estilos muy poco usados como “groove”, “inset” y “outset”.
• Al igual que el ancho, la forma (border-style) también se puede aplicar de manera específica, mediante las propiedades “border-top-style”, “border-right-style”, “border-bottom-style” y “border-left-style”.
• Las propiedades de color del borde, border-color, son”border-top-color”, “border-right-color”, “border-bottom-color” y “border-left-color”. Pueden ser usadas para cambiar el color de nuestros bordes. Si deseas la versión simple únicamente utiliza la propiedad “border-color”, en caso de que no especifiquemos ningún color tomará a la propiedad “color” de la caja como referente.

#elemento {
   border-style: solid;
   border-width: 1px;
   border-color: #000000;
}

Por otro lado si no queremos ser tan específicos podemos simplemente usar la propiedad “border” estableciendo todos los valores dentro de ella. Por ejemplo si quisiéramos establecer un border de 1 pixel de ancho, de tipo sólido y de color negro entonces haremos una declaración como esta:

#elemento { border: 1px solid #000000; }

Márgenes

Los márgenes son otro elemento cuya funcionalidad únicamente es establecer un espacio de distancia, aunque en esta ocasión será entre el borde y el resto del contenido de la página.

Al igual que con el resto de las propiedades tiene su manera específica de establecerse y su manera general, la decisión está entre usar “margin-top”, “margin-right”, “margin-bottom” y “margin-left”, o simplemente “margin”.

#elemento1 {
   margin-top: 5px;
   margin-bottom: 5px;
}
#elemento2 {
   margin: 3px;
}

Propiedades de CSS útiles para hacer un layout

La propiedad “position”

Las cajas pueden se posicionadas en una página en diferentes partes y de distintas maneras, podemos utilizar un posicionamiento estático, relativo, absoluto o incluso una posición arreglada, todo a través de la propiedad “position” de CSS.

• Posición estática: sigue el flujo normal de la página y el lugar que tomen en el código será el mismo donde se presentarán en la interfaz.
• Posición relativa: es aquella que permite a la caja moverse en base a su posición inicial, dejando un espacio vacío en su posición original.
• Posición absoluta: coloca una caja en base a la posición de su bloque contenedor. Dicho contenedor generalmente es la misma página, al menos de que la caja se encuentre dentro de otro bloque relativo o absoluto, lo que haría que la distancia se calcule a partir de la posición de su contenedor.
• Posición fija: son similares a las de posición absoluta, con la diferencia de que estás se encuentran fijadas a la vista. Es decir, una caja con posición “fixed” no se moverá con el resto de la interfaz y quedará fija en la ventana del navegador.

Propiedad overflow de CSS

Cuando existe un contenido que sobrepasa el largo o ancho de una caja y por lo tanto no encaja con lo especificado, entonces tenemos un caso de desbordamiento, el comúnmente llamado overflow.

Dicha propiedad puede ser establecida a uno de los cuatro distintos valores aceptables:

• “visible” el valor por default muestra el contenido y el desbordamiento sobre la caja.
• “hidden” se encarga de cortar el contenido sobrante.
• “scroll” despliega siempre un conjunto de barras desplazadoras permitiendo al usuario su uso para ver el contenido.
• “auto” despliega las barras de scroll únicamente si son necesarias.

Propiedad float de CSS

El uso de la propiedad “float” es otro método para poder lograr posicionar cajas y manipularlas a lo largo de la interfaz.

Una caja flotante básicamente es aquella que se coloca en el extremo izquierdo o derecho de la página y/o su contenedor, haciendo que el contenido la rodee en vez de que fluya por debajo de ella.

En caso de que desees que algún contenido que siga a la caja flotante se muestre debajo de esta y no a su alrededor, entonces debes de utilizar la propiedad “clear”, si le damos el valor de “left” entonces despejará las cajas flotantes a la izquierda de tal manera que el contenido se pueda mostrar, mientras que el valor “right” hará lo mismo con las cajas flotantes a la derecha. “both” despejará ambos lados.

Crear un layout sencillo paso a paso

Para poner en práctica los conceptos que hemos estudiado hasta ahora podemos empezar a crear una estructura sencilla.

En primer lugar tenemos que tener un documento bien estructurado:

<div id="menuNav">
   <!--Contenido para la navegación-->
</div>
<div id=”contenido”>
   <!--Contenido de la página (texto, impagenes, etc.)-->
</div>

Creación de columnas con CSS y HTML

Una vez organizada nuestra estructura, supongamos que queremos que la columna de navegación sea menos ancha que la de contenido, entonces necesitaríamos emplear la propiedad “width” para ello.

Si queremos alinear y mover dicha columna a la izquierda tenemos que flotar dicha columna, lo que nos da una declaración como la siguiente:

#menuNav {
   float: left;
   width: 20%;
}
#contenido {
   float: right;
   width: 80%;
}

Una vez posicionado el menú de navegación la estructura empieza a tomar forma. Ahora para establecer un margen entre el contenido y la navegación, sería:

#contenido {
   margin-left: 25px;
}

Para resaltar más la diferencia entre las dos columnas se pueden utilizar bordes y colores de fondo mediante las propiedades “border” y “background”.

Crear el encabezado y pie de página del layout

Para dar un toque final a la estructura podemos agregar una sección de encabezado y un pie de página, comúnmente conocidos como “header” y “footer”.

Para esto necesitaremos dos nuevas cajas, pero la principal edición se realizará sobre las columnas ya existentes.

Al agregar un footer, necesitamos establecer una propiedad “clear” para asegurar que ninguna capa se superpondrá. Lo más recomendable, es envolver la navegación y el contenido en un div con la clase “clearfix“, que es una técnica CSS para evitar problemas con elementos flotados.

<div id="encabezado">
   <!--Contenido del encabezado-->
</div>
<div id="clearfix">
   <div id="menuNav">
      <!--Contenido para la navegación-->
   </div>
   <div id=”contenido”>
      <!--Contenido de la página (texto, impagenes, etc.)-->
   </div>
</div>
<div id="pie">
   <!--Contenido del pie de página-->
</div>

Y el código CSS necesario sería:

.clearfix:after {
   content: "";
   display: table;
   clear: both;
}
#encabezado {
   /* tus estilos para el encabezado */}
#pie {
   /* tus estilos para el pie */}

Uso de capas con CSS y XHTML / HTML

La maquetación de una página web es el orden en que se colocan los elementos que la componen, de forma que tenga una estructura visual determinada.

Así por ejemplo, los logotipos suelen colocarse en la parte superior izquierda de la página, los menús de navegación debajo del encabezado o en la columna izquierda de la página (o en ambos lados en caso de sitios complejos) y los contenidos principales en una columna ancha ubicada en el centro o levemente volcada a uno de los lados de la página.

Las primeras páginas web tenían un diseño muy sencillo, generalmente con una única columna donde se colocaba todo el contenido. La mejora de los lenguajes trajo aparejada la mejora de la distribución de los contenidos.

Las primeras maquetaciones, antes de la aparición de las hojas de estilo en cascada, se hacían a través del empleo de un truco, que consistía en el empleo de tablas para distribuir los contenidos por la página. Y se trata de un truco, debido a que las tablas no fueron pensadas con la finalidad de ser una herramienta de maquetación, sino como forma de colocar los elementos que requerían tabulación.

Atributos de las capas

De acuerdo a los valores que se den a los atributos de las capas, éstas se mostrarán y se comportarán de una forma determinada.

Los atributos y sus valores, son definidos en las hojas de estilo en cascadas (CSS).

Cuando la capa es definida como un elemento único (id), se le identifica en forma individual en la hoja de estilos y en el documento HTML. Mientras que las capas que conforman un grupo de elementos con atributos iguales, se les identifica como pertenecientes a una clase (class), definiéndose el conjunto en la hoja de estilos y marcando cuales son las capas que pertenecen a esa clase en el documento HTML.

Para tener una idea más clara de estos conceptos, haremos una pequeña prueba. En primer lugar, abriremos dos documentos de un editor de texto. Al primero lo guardaremos como “index.html” y al segundo como “estilo.css”.

En estos documentos colocaremos los siguientes códigos.

En index.html:

<html>
   <head>
      <link href="estilo.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
      <div class="capaComun">Hola</div>
      <div id="capaUnica">Mundo</div>
      <div class="capaComun">lawebera.es</div>
   </body>
</html>

• En el encabezado del documento (todo lo que se encuentra entre las etiquetas <head> y </head>), nos encontramos con un link que vincula al archivo que contiene el código CSS con el documento HTML.
• Luego se encuentra el cuerpo del documento (todo lo que está dentro de las etiquetas <body> y </body>) donde habremos colocado tres capas, una llamada “capaUnica” y dos pertenecientes a la clase “capaComun”, cada una con una palabra a modo de contenido.

Si a continuación abrimos esta página en un navegador, nos encontraremos con que la misma se limita a las tres palabras, tal como puede apreciarse en la siguiente imagen:

Siguiendo con la prueba, colocaremos el siguiente código en el archivo CSS:

/* Aquí definimos la capa que llamaremos "capaUnica" */#capaUnica {
   width: 300px;
   height: 50px;
   background-color: #ff8800;
}
/* Ahora definiremos al grupo de capas que denominaremos clase "capaComun" */.capaComun {
   width: 300px;
   height: 50px;
   background-color: #0088ff;
}

Guardamos los cambios realizados. El resultado podemos verlo haciendo click en el botón refrescar del navegador, obteniendo el siguiente resultado:

En el código CSS que hemos colocado, nos encontramos con algunos de los atributos que pueden modificarse en una capa.

Los dos primeros, “width” y “height”, corresponden al ancho y la altura del elemento.

En caso de que el ancho no se defina, la capa se extenderá por todo el ancho de la página o de la capa que la contenga o hasta el límite de una capa contigua.

En caso de que la altura no quede definida, la capa se extenderá hasta donde llegue el contenido de la misma, y en caso de que no tenga contenido, simplemente su altura será cero.

Estos dos atributos pueden ser definidos en tres modos diferentes:

• Valor fijo: Se establece una medida precisa (en el ejemplo pixeles cuya abreviatura es px).
• Porcentaje: Se establece un valor en porcentaje, tras lo cual la capa tendrá diferentes dimensiones, de acuerdo a como y donde se encuentre ubicada, tal como veremos más adelante.
• Automático: Se establece escribiendo la palabra auto. Su comportamiento en este caso, también es variable..

Otro atributo que encontramos en el código CSS es “background-color”, que define el color de fondo de la capa.

Tiene dos modos, que son un color sólido o transparente. Cuando se desea que la capa sea transparente, el valor que se debe introducir es “transparent”, mientras que para definir un color sólido existen varias formas de hacerlo. La que empleamos en el ejemplo es la de un código de seis dígitos hexadecimales divididos en pares, cada uno de los cuales define un color (Rojo, verde y azul, en ese orden) y que se encuentran precedidos por el símbolo #.