Comentarios al ejercicio Distribuciones
Primavera 2008Comentarios al ejercicio Distribuciones
Primavera 2008Al quitar el estilo se puede observar que las etiquetas de bloque utilizadas son <h1>, <h2>, <p>, <th>, <colgroup /> y <address>.
Al quitar el estilo se puede observar que las etiquetas en línea utilizadas son <a>, <img> y <strong>.
Al quitar y volver y poner el estilo se puede observar que en el <h1> hay un <br /> y varios <span>.
Al poner el estilo se puede observar que la descripción de cada distribución forma una ficha, por tanto hay divisiones agrupando cada apartado. También se puede observar que todos los apartados se muestran en una posición determinada (sin barra de desplazamiento, como se observa aumentando el tipo de letra), por tanto hay una división agrupando todos los apartados.
Las descripciones de cada distribución son destinos de los enlaces situados en la tabla (los logotipos de las distribuciones), así que hay que dar un id distinto a cada división de apartado.
Para dar tamaño a los apartados es necesario dar un id a la división que engloba todos los apartados. No se utiliza posicionamiento, puesto que las divisiones forman parte del flujo del texto, entre la tabla y el <address>.
El <span> del <h1> puede tener clase.
Para distinguir los dos tipos de <h2> hace falta al menos una clase (aunque también se puede hacer con dos clases).
El <h1> tiene posicionamiento flotante. El <span> del <h1> tiene posicionamiento relativo.
La tabla tiene tres grupos de columnas <colgroup />. Las imágenes en la tabla tienen posicionamiento flotante.
La división que engloba todas los apartados debe tener posicionamiento absoluto. Al modificar el ancho de la ventana se puede observar que la posición horizontal y el tamaño de esa división están definidos en porcentaje %, pero al modificar el tamaño de letra se puede observar que la posición vertical está definido en em.
No es necesario dar clase a las divisiones de los apartados para distinguirlas de la división que engloba a todos los apartados. Se puede utilizar el selector de descendientes div div para establecer su estilo.
El <h2> con los nombres de las distribuciones tiene posicionamiento flotante.
El código XHTML del ejercicio puede consultarse abriendo la página web del ejercicio y eligiendo el menú en Firefox o 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.
Autor: Bartolomé Sintes Marco