Geek Penguin

Ya sabemos lo básico del HTML: el texto, los enlaces, los atributos, el formato y los elementos básicos. Pero si aplicamos todo lo que sabemos puede que se nos dé el texto en una sola columna y sin estilo aparente. Una web “plana”, por decirlo de una manera. Hoy aprenderemos la estructura.

La estructura se lleva generalmente de dos formas: en tablas o en divisiones. No recomiendo el uso de tablas para la estructura de una página web, ya que generalmente lleva mucho trabajo hacer posbile que se vean igual en todos los navegadores. Aún así las tablas se pueden usar para organizar datos, cosa que es imprescindible para las pequeñas pilas de información, pero repito, no para la estructura completa.

Las divisiones se usan con la etiqueta <div> y son generalmente aceptadas por todos los navegadores, incluyendo el feo Internet Explorer 6, que con su pobre soporte en CSS (el lenguaje del diseño) hace que aparezcan mal, en el lugar que no es, con el tamaño incorrecto…

La etiqueta <div> se usa como cualquier otra etiqueta: encerrando entre la etiqueta inicial y la final la porción de código que queremos que use. Así, en el caso de Geek Penguin, todos los posts van en una <div>, la cabecera con el pinguino y los pescados, la barra lateral va en otra <div>, y así, todas las secciones que faltan.

Si pones <div> y </div> alrededor de un texto no habrán cambios, y se preguntarán, ¿para qué rayos quiero dividir mi información en divisiones? Lo voy a plantear de esta manera:

Tienes un grupo de 100 personas en un parque de diversiones, y lo divides en grupos. Siguen siendo 100 personas, pero ya clasificados en grupos con elementos comunes. Así, si quieren evitar problemas respecto a la atracción a la que quieren ir, es sólo darle la orden a cada grupo de ir a la atracción que sea de interés común para cada grupo.

Ahora piensa que el parque de diversiones es la página web, los grupos son las pequeñas cantidades de contenido que quieres ordenar, y las órdenes que les das a los grupos son los lugares o las formas en las que mostrarás el contenido.

Bien, si la etiqueta <div> sola no hace nada, con atributos y un poco de CSS si hará lo que debe hacer: ordenar el contenido. Y esto lo aprenderemos en el siguiente tutorial , porque voy ahora por las tablas.

Las tablas básicas usan las etiquetas <table> (tabla, que obvio), <tr> (table row, fila de tabla), <th> (table header, o título de tabla) y <td> (table data, o celda de tabla). Así haremos que un

<table>
<tr>
<th>División</th>
<th>Lugar</th>
</tr>
<tr>
<td>Cabecera con pinguinos</td>
<td>En la parte de arriba de la página</td>
</tr>
</table>

Mostrará un

División	Lugar
Cabecera con pinguinos	En la parte de arriba de la página

Y así logramos hacer una tabla. Esta es una etiqueta compleja, y puede abarcar unas 10 minietiquetas mas.

Esto es todo por hoy… ¡hasta una próxima ocasión!