IFT1005 - Automne 2017 - Exercice 4
But de l'exercice
À la fin de cet exercice, vous devriez pouvoir formatter avec du CSS une page XHTML5 valide qui décrit une recette de cuisine
Cet exercice vaut 2 points, pour les obtenir il vous faut compléter tous les exercices et
déposer votre résultat sur Studium.
Étapes
- À l'aide d'oXygen, prenez une copie de une variante de la solution à l'exercice de la semaine dernière.
Ce fichier HTML ne doit pas être modifié.
- Créez un fichier CSS vide et nommez le
recette.css
.
- Reproduisez une page web XHTML valide qui reprend cette présentation de la recette.
Pour une raison évidente, ce fichier en est la version PDF.
- Voici les caractéristiques à reproduire:
- Les titres sont en police
cursive
et de couleur purple
;
- Tout le reste du texte est en police
sans-serif
;
- La source de la recette est en italique cadré à droite dans la page;
- Les ingrédients sont en bleu;
- Les opérations sont en vert, mais pas en italique;
- Les unités en format métrique sont en italique;
- Le
checkbox
et son label
ne sont pas affichés;
- Les unités en format impérial ne sont pas affichées;
- La liste d'ingrédients et d'instructions numérotées sont entourées d'une bordure rouge;
- Les étapes numérotées sont un peu espacées pour mieux les faire ressortir;
- Les sous-étapes sont numérotées avec des lettres minuscules.
- Les ingrédients et la préparation sont séparées par une ligne horizontale épaisse.
- Déposez votre fichier CSS sur Studium.
Défi supplémentaire (non noté):
Sans utiliser javascript, en ne changeant que le CSS sans modifier le HTML, faites afficher le checkbox
et faites en sorte que lorsqu'on
coche la case, ce sont plutôt les unités impériales qui sont affichées (indice: pensez à utiliser la pseudo-classe :checked
)