TP 08 : Mise en page complète

Licence Humanités Numériques 1ère année

Jean-Marc Lecarpentier — Justine Reynaud

Enseignement des technologies du Web

 

Travail personnel

Notes de cours

Exercice 1 — Une page sur le chocolat #

Adapté d’un exercice de Françoise Lambert et Frédéric Jurie

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/1HU91-2024/TP08/ex1/chocolat.html
(en remplaçant LOGIN par votre identifiant numérique). 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="LOGIN" />
en remplaçant LOGIN par votre identifiant numérique. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre identifiant est lecarp213, vous mettez <meta name="author" content="lecarp213" /> dans le head de votre page. Pour cet exercice, il est interdit de travailler en binôme.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au Vendredi 9 février pour terminer l'exercice et le déposer sur votre serveur web.

Cette archive contient le texte et les images nécessaires à l'exercice. Conserver les 2 dossiers d'images de fond et d'images de contenu.

On veut réaliser la page ayant le rendu final suivant :

Capture d'écran de la page sur le chocolat
Capture d'écran de la page sur le chocolat

Découpage de la page

Déterminer les différentes zones de la page sur papier et définir les éléments à utiliser.

Code HTML

Écrire le code HTML de la page. Attention votre code HTML doit être validée par le validateur du W3C.

La page sans style devra être proche du résultat ci-dessous.

Attention votre code HTML doit être valide !

Capture d'écran de la page sans style
Capture d'écran de la page sans style

Code CSS

Créer une feuille de style externe pour réaliser la mise en forme de la page web.