Curso de HTML desde cero [completo]Logo de Github
Ver el curso en GitHub
¬ŅQuieres el libro del curso?
Artículos relacionados:

Las 5 Formas de Crear LAYOUTS en HTML

Logo de Cuarzo.dev
Cuarzo.dev

Recibe cada lunes y jueves un correo para ayudarte a impulsar tus habilidades de programaci√≥n. Ofreci√©ndote consejos, tutoriales, recursos gratuitos, noticias relevantes y una comunidad comprometida. Tambi√©n tenemos memes ūüėŹ

Suscríbete Gratis

Si tienes alguna duda con el curso o te quedas en alg√ļn punto donde no sepas avanzar te puedes unir gratis a nuestra comunidad de discord y preguntar tus dudas, que la comunidad estar√° encantada de ayudarte.

√önete al discord

Layouts

El layout es como se va a visualizar o distribuir el contenido de una web.

See the Pen HTML | 1.28 - Layouts - 1 by Francisco Palomares Barrios (@kikopalomares) on CodePen.

Elementos HTML para Layouts

HTML nos ofrece varias etiquetas sem√°nticas que definen diferentes partes de una web:

  • <header> Define el encabezado del documento o de una secci√≥n
  • <nav> Define un contenedor para enlaces de navegaci√≥n
  • <section> Define una secci√≥n del documento
  • <article> Define un art√≠culo
  • <aside> Define contenido al lado del contenido
  • <footer> Define el pie de p√°gina del documento
  • <details> Define detalles adicionales
  • <summary> Define un encabezado para el <details>

Métodos de Layouts

Hay cinco maneras de crear un sistema de layout, cada una tiene sus ventajas y desventajas:

  • Tablas HTML (no recomendado)
  • CSS float
  • CSS flexbox
  • CSS framework
  • CSS grid

Tablas HTML

El elemento <table> no se creó para utilizarlo para crear layouts. Así que no deberíamos de usar este método.

CSS Frameworks

Es la forma m√°s r√°pida de crear un layout, usar alg√ļn frameworks como lo es Bootstrap.

CSS Floats

Es una forma muy com√ļn de maquetar toda la web usando la propiedad de CSS float. Es f√°cil de aprender, pero en algunos casos puede que no sea todo lo flexible que necesitamos.

CSS Flexbox

Flexbox CSS es un nuevo sistema de layout desde CSS3. Se va ajustando a las diferentes resoluciones de pantalla. Pero no funciona con IE10.

CSS Grid Layout

CSS Grid Layout nos ofrece un layout basado en una rejilla con columnas y filas. Es f√°cil posicionar los elementos. Pero no funciona en IE y en Edge 15 o inferiores.

Al suscribirte estás aceptando los términos de uso y la política de privacidad. Puedes darte de baja en cualquier momento.

Libro No todo es programar de Kiko Palomares
Koding Beats