1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Creando un layout sin tablasimagen 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í:

web de starbucks peru

Pero si vemos el código nos daremos cuenta que en realidad está dividido de la siguiente manera:

marcado con tablas

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.

marcado con divs

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?

marcado con divs y uls

Aquí he reemplazado 2 <div> por <ul> ya que al final son listas de links (sin ningún orden en particular) y la mejor forma de marcar una lista así es el elemento <ul>. El siguiente paso para hacer el layout es darle un atributo id a cada sección lógica de la siguiente manera.

agregando ids

¿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:

Comentarios

deja un comentario

  1. Avatar de Mauricio Mauricio

    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

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910