Ejercicio sencillo de HTML

Puedes ver el ejercicio resuelto en este enlace.

Para descargar las fotografías utilizadas en la realización de este ejercicio de HTML, pulsa en este enlace.

¿Qué aprenderemos con este ejercicio de HTML?

En este ejercicio trabajaremos varios aspectos de maquetación. Usaremos float:left para que el texto envuelva a una foto. También usaremos display:inline-block para poner capas en horizontal. Por último habrá que entender como funciona el display block con margin:auto para centrar un único componente horizontalmente.

Puedes consultar este otro ejercicio para el coloreado de fuentes, bordes, párrafos, etc.

Si quieres comprender las diferencias entre display:block, display: inline-block y display:inline, así como entender como puedes poner objetos en horizontal usando float left, que problemas puede implicar y como solucionarlos, te recomiendo este tutorial.

Por otra parte, la página tiene tres artículos bien diferenciados, y cada uno se maqueta de un forma diferente. Te encontrarás maquetaciones similares a cada uno de estos artículos constantemente: capas en vertical, en horizontal y textos envolviendo a fotos, es siempre los mismo…

¿Por qué es útil que aprendas a hacer este ejercicio de HTML?

En general, cuando hacemos una página web todos los objetos de la página se alinean de acuerdo a una cuadrícula o a una regilla. Si eres capaz de ver una web con un poco de perspectiva, verás que todo son rectángulos. Hay rectángulos que se alinean horizontalmente y otros verticalmente, pero en cualquier caso, los rectángulos (cuya etiqueta “div”, fundamentalmente) están por todas partes

En los ejercicios previos a este ejercicio ibamos apilando los rectángulos verticalmente. Esta es la forma en que se comportan los rectángulos de forma natural. A partir de este ejercicio, ya vamos a mezclar; tendremos rectangulos en vertical, pero también en horizontal.

Y una última cosa: tu no sabes hacer el ejercicio hasta que no eres capaz de terminarlo sin necesitar ayuda. Terminar un ejercicio no implica saber hacerlo. Terminar un ejercicio que no sabes hacer es algo inutil y poco divertido. La úniva ventaja que tiene es que requiere poco esfuerzo. Si quieres hacer páginas web, debes empezar y terminar los ejercicios sin ayuda. Así que si has necesitado ayuda, sigue intentándolo hasta que tengas autonomía o no te sorprendas de terminar el curso sin tener autonomía para hacer webs.