But de l'exercice
À la fin de cet exercice, vous devriez pouvoir formatter avec du CSS pour avoir une présentation sur deux colonnes. Il faudrait aussi que l'affichage soit adaptable en fonction de l'écran.
Étapes
- À l'aide d'Emacs, prendre une copie de ce fichier HTML et ce fichier CSS qui vous donnent une base de travail. Vous pouvez modifier ces fichiers HTML et CSS.
- Créer un répertoire
images
dans lequel vous pourrez copier ces deux images: EscalopesVeau.jpg et Ricardo.png. - Reproduire une page web HTML 5 valide qui reprend l'organisation de cette présentation de la recette si votre fenêtre a une largeur plus grande que 1024 pixels: Mais lorsque vous rapetissez votre fenêtre à une largeur inférieure à 1024 pixels, l'affichage devrait s'ajuster pour avoir cette apparence:
- 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
éventuel d'images.
- Les pastilles rouges sont des liens qui mènent directement aux sections du même nom dans la description de la recette.
- Le contenu principal est entouré d'une bordure orange.
- L'image doit être cadrée à droite
- La partie préparation devrait avoir un fonds grisé
- Le pied de page contient une image, avec un lien vers le site
http://www.ricardocuisine.com
, qui reste centré dans le bas de l'écran peu importe la hauteur de la fenêtre. Attention: pour centrer un bloc dans une page, il faut spécifier explicitement sa largeur.