El layout es la organización de nuestra página, es un elemento de diseño que nos indica dónde van a ir los diferentes elementos.
Aquí tenemos ejemplos de diferentes layouts:
https://designshack.net/articles/layouts/10-rock-solid-website-layout-examples/
https://websitesetup.org/website-layouts/
Para diseñar los layouts normalmente se utilizan herramientas de wireframing. Hay algunas online:
https://www.lancetalent.com/blog/top-5-herramientas-wireframes-ch/
O podemos hacerlo directamente en una libreta.
Para implementar nuestro layout usaremos las etiquetas div o las nuevas etiquetas semánticas:
Que nos permitirán crear nuestro layout:
https://www.w3schools.com/html/html_layout.asp
https://www.w3schools.com/css/css_website_layout.asp
Hoy hemos visto la manera más sencilla que es utilizando float:
https://www.w3schools.com/css/css_float.asp
Pero más adelante veremos otras maneras de hacerlo. Dentro de trifulcas podéis encontrar varios ejemplos:
https://trifulcas.com/layout-one-page/
https://trifulcas.com/layout-semantico-2/
Y una búsqueda por internet os mostrará miles de páginas que tratan el tema: