imagen de GamiKun
Creando un layout sin tablas (parte 1)
He escrito varios posts sobre por que NO se deben usar tablas para hacer el layout de una página web (y hay mucho que decir al respecto), lo que no había hecho hasta ahora era explicar la manera de hacer un layout sin tablas.
Este tema es amplio, así que no podría ponerlo todo en un sólo post, de lo que voy a hablar aquí es del HTML necesario para hacer un layout sin tablas.
Este es el primer paso que se debe seguir para para poder lograrlo.
Para hacer un layout sin tablas hay una cosa que no puede faltar, un buen HTML.
La base del diseño sin tablas es un HTML bien estructurado.
Por ejemplo, tomemos un sitio web cualquiera, digamos la web Starbucks Perú http://www.starbucks.com.pe
El sitio se ve así:
Pero si vemos el código nos daremos cuenta que en realidad está dividido de la siguiente manera:
Eso es un layout hecho con tablas y eso está mal.
Tratemos ahora de convertirlo a uno sin tablas!
Lo primero que hay que hacer es definir secciones lógicas del sitio y marcarlas con un buen HTML.
Aquí he usado elementos <div> para marcar las secciones principales del sitio.
Pero aún no me parece suficiente, llenar una página de <div>s no es la solución más elegante, porque los divs solos no tienen ningún significado, además hay elementos HTML mucho más descriptivos que podemos usar.
¿Que les parece esta solución?
¿Qué es un atributo id?
El atributo id es un identificador, con eso le estamos dando un nombre único a cada elemento.
Como es un nombre único no puedes usar el mismo id para dos elementos diferentes.
¿Para que sirve un atributo?
Los atributos sirven para poder dar información adicional acerca de un elemento, en este caso el id.
¿Para que es necesario el id?
El id es necesario porque cuando veamos CSS, lo que haremos será aplicar estilos específicos a cada elemento y eso es imposible sin el atributo id.
Ya está listo el HTML necesario para crear un layout sin tablas, mañana veremos el CSS que se puede usar para crear este layout.
Aquí está la segunda parte.
Etiquetas:
si te gustó esta entrada, tal vez quieras suscribirte via RSS
Hola, soy
Comentarios
deja un comentario
Muy bueno el blog, German! soy desarrollador (más bien programador) y maqueto todos mis sitios con css y capas pero por lo que vi vos preferis "quitar" los div laterales y dejar solo los ul.
¿Porque haces eso?¿Que ganas evitando esos div...?Porque quizás sea fácil cuando estas haciendo tu sitio a "mano" o con programación pero cuando usas algún cms creo que se complica un poco porque tenes que seguir ciertas convenciones...
Salu2
Deja un comentario