En la cabecera <head> de la página hay que:
La hoja de estilo de la fuente Weather Icons presupone que la hoja de estilo weather-icons.css se encuentra en una carpeta css y la fuente weathericons-regular-webfont.woff en la carpeta fonts.
En el ejercicio resuelto se han conservado esas carpetas y la hoja de estilo de la página se ha guardado en la carpeta css y la fuente se ha guardado en la carpeta fonts.
La página web debe enlazar a las dos hojas de estilo.
Al desactivar la hoja de estilo se puede identificar las siguientes etiquetas:
En la vista con estilo se reconocen que cada día forma un bloque, con un borde común. En este ejercicio cada día es una etiqueta <div> (se podría haber utilizado otra etiqueta).
Los dibujos desaparecen al quitar el estilo, lo que indica que se tratan de fuentes de iconos, por lo que se utilizará la etiqueta <i> (se podría hacer con cualquier otra etiqueta de texto en línea). Los dibujos se han obtenido de la fuente Weather icons, que se incluye en el fichero descargado.
Hay siete clases de párrafos <p>:
Las clases bajo, medio y alto se deben combinar con las clases maximo y minimo para obtener todas las combinaciones de temperatura máxima y mínima.
Además se utilizan clases para insertar los iconos, que se comentan a continuación.
En este ejercicio se utiliza la fuente de Google Fonts Righteous y la fuente Weather icons.
Weather icons: Los dibujos utilizados corresponden a las clases de la fuente Weather icons.
Al restablecer el estilo se pueden identificar las propiedades utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio Previsión del tiempo y abriendo el código fuente (Ctrl+U).
La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio Previsión del tiempo.
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.