Travail personnel
Objectifs
Le premier exercice vous fait reproduire un modèle avec un accent spécifique sur les aspects mise en page. Le second vous demande de construire une page incrémentalement, avec des applications de divers aspects vus jusqu'ici.
Exercice 1 — Reproduction d’un modèle simple #
Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :
https://dev-LOGIN.users.info.unicaen.fr/TW1-2024/TP08/ex1/helbak.html(en remplaçant LOGIN par votre nom de login). Pensez à vérifier la validité W3C de votre page !
D'autre part,
l'élément head doit contenir le code suivant :
<meta name="author" content="LOGINS" />en remplaçant LOGINS par les noms de login des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser
name="author" tel quel, par contre !) Par exemple, si dupont210 et durand212 ont travaillé ensemble, ils mettent
<meta name="author" content="dupont210,durand212" />
dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui. Attention, le travail en binôme est réservé aux cas où il n'y a pas assez de machines disponibles.
Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.
Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.
Cet exercice consiste à reproduire l'apparence d'une version (très) simplifiée de la page d'accueil d'un site de vente de céramiques. Reproduire un site web existant est une des manières les plus efficaces de progresser.
On vous fournit le HTML, les images, et une feuille de style (presque) vide
dans cette archive.
À vous de la compléter pour obtenir un rendu le plus proche possible du modèle, sans modifier le HTML (sauf pour ajouter vos logins dans la balise meta) !
Les tailles (hauteurs, textes) n'ont pas d'importance, faites au mieux.
Les trois fonds gris en haut à droite sont #F9F9F9, #F4F4F4, et #EDEDED.
Les couleurs de fond des blocs colorés sont #DBEAD8 (vert), #C2D4D8 (bleu), et #B0ABC3 (violet).
La couleur de fond de la partie « About Helbak » est #222.
NB : de façon générale, la mise en page est à faire avec les grilles CSS, mais ce n'est pas forcément la méthode la plus appropriée pour tous les détails. En particulier, dans la partie « About Helbak », il est interdit d'utiliser grid (c'est pour vous forcer à employer d'autres techniques, qui ici sont a priori plus pertinentes). Pour le pied de page, pas de consigne particulière, mais notez que l'utilisation de inline-block semble toute indiquée.