IFT1005 - Automne 2017 - Exercice 5
But de l'exercice
À la fin de cet exercice, vous devriez pouvoir formatter avec du CSS et ajouter une image à 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 votre solution de l'exercice 4 ou une copie de ce fichier HTML et
ce fichier CSS qui sont une solution acceptable de l'exercice de la semaine dernière.
Vous pouvez modifier ces fichiers HTML et CSS.
- Reproduisez une page web HTML 5 valide qui reprend l'organisation de cette
présentation de la recette.
Vous pouvez changer les images si vous voulez.
Pour une raison évidente, ce fichier en est la version PDF.
- Créez un répertoire
images
dans lequel vous téléchargez deux images (de bon goût!) que vous pouvez trouver sur internet:
une pour le résultat de la recette, une autre pour les ingrédients et une autre pour la préparation.
- Voici les caractéristiques à reproduire en prenant bien soin que toute la mise en page est dans le
CSS et non le HTML sauf pour l'ajout d'images:
- Immédiatement après le titre, centrez un paragraphe accompagné d'une image décrivant le résultat de la recette.
Cette image devrait être cliquable et son lien correspondre vers la recette originale de Ricardo.
- Ajoutez une ligne horizontale après cette image et avant les ingrédients.
- Faites apparaître à droite la case à cocher pour le choix des mesures. En cochant cette case, les unités
des ingrédients devraient être affichées en mesures impériales.
- Les deux listes d'ingrédients devraient apparaître côte à côte, cadrées à gauche.
Ne pas utiliser de tableau pour cette présentation.
- Ajoutez un fond légèrement grisé pour la partie préparation avec une image illustrant la notion de
joie de la préparation centrée à droite de cette section.
Les instructions pour les deux sections sont présentées de façon similaire à celle de l'exercice 4:
- Les opérations sont en vert, mais pas en italique;
- 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.
- Créez une archive zip contenant vos fichiers HTML et CSS ainsi que votre répertoire
images
.
- Déposez votre archive sur Studium.