¡Juguemos a Diagramar!

[Rafael]

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

[Rafael]

¡Pues vámonos tendidos como bandidos!

Ejercicio No. 2

Y reitero que participen y comenten su versión del código. La mejor manera de aprender es echando a perder, y qué mejor que echar a perder donde un cliente no se enoje Así que ¡a proponer!

[Rafael]

Una discusión sobre el uso y estructura de los menús, a ver que podemos aprender...

Ejercicio 3, Encuesta

[eazyduiz]

que excelente post! tengo ya mucho tiempo de no ver por Internet un post tan bueno y útil como este!
Solo para cada uno de los ejercicios solo hace falta que se postee el código css, eso de seguro ayudaría a muchos novatos como yo!