Comentarios al ejercicio Recetas de cocina

Etiquetas utilizadas

Al quitar el estilo se puede observar que las únicas etiquetas de bloque utilizadas son <h1>, <h2>, <h3> y <p>.

Al poner el estilo se puede observar que la información sobre cada plato forma una ficha, por tanto hay divisiones agrupando cada nombre, ingredientes, preparación y fotos de cada plato. Una forma de hacerlo podría ser crear una división agrupando los ingredientes, una división agrupando la preparación y una división que agrupe el nombre y las dos divisiones anteriores:

Al quitar el estilo se puede observar que el párrafo con los enlaces lleva un <br />.

Al poner el estilo se puede observar que los nombres de los platos tienen un color de fondo, así que hay etiquetas <span>.

Clases utilizadas

El párrafo con los enlaces es distinto al resto de párrafos, por tanto necesita una clase.

Hay tres clases de fichas (con tonos azul, rosa y verde), por lo que se pueden crear tres clases de divisiones (primero, segundo y postre). Sólo hace falta dar clase a las divisiones grandes, ya que las divisiones de preparación e ingredientes se pueden definir utilizando un selector de descendientes, por ejemplo:

• div.primero div

Al haber imágenes a derecha e izquierda en la misma división, harán falta dos clases de imágenes (derecha e izquierda). Para conseguir que unas imágenes tengan un color de borde y otras otro, se puede utilizar un selector de descendientes, por ejemplo:

• div.primero img.izq
• h1 img.der

El primer selector haría referencia a las imágenes que van a ir a la izquierda contenidas en la divisón del primer plato . El segundo selector haría referencia a las imágenes que van a ir a la derecha contenidas en el título.

A los nombres de los platos no hace falta darles clases, ya que se pueden definir utilizando un selector de descendientes, por ejemplo:

• div.primero h2

Otros

Las imágenes tienen borde. Además se ve una franja de color entre la imagen y el borde. Esta franja se consigue definiendo un margen interior (padding) y un color de fondo (background-color) en la imagen.

Como las imágenes flotan, habrá que poner la propiedad clear a algún elemento para que no se amontonen las fichas.

Solución del ejercicio

El código XHTML del ejercicio puede consultarse abriendo la página web del ejercicio y eligiendo el menú Ver > Código fuente de la página en Firefox o Ver > Código fuente en Internet Explorer.

La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio.

Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir lo mismo, por lo que la solución no es nunca única.

Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.