Juguemos a Diagramar en Html 5
El código html nos marca la estructura de un documento, y aunque esta estructura visualmente se puede modificar completamente con Hojas de Estilo, en la práctica se "transparenta" más o menos en el producto final.
Esta serie de prácticas o ejercicios tienen la función de que analicemos la semántica de diferentes modelos o layouts de páginas web de una manera sencilla y requiere su participación para enriquecernos todos.
Los invito a que juegen a colorear un poco su código para que de una manera muy simple comparemos la imagen con el código. (El número de abajo a la izquierda simplemente es un No. de referencia de ejercicio)
Pongo el primer ejemplo: 
Este diseño podría corresponder a la estructura básica:
<header>
<h1>Las Flores más bonitas</h1>
<nav>Menú</nav>
</header>
<section>
<p>Texto y texto</p>
<div>Fotos</div>
</section>
<footer>
<p>Tel.</p>
<aside>F T</aside>
</footer>
Tal vez sí, tal vez no... Pues bien, de eso se trata. ¡Así que comenzamos!
Ejercicio No. 1