TP 03 : Structure HTML

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 — Structure de page et HTML5 #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/1HU91/TP03/ex1/cailliau.html
(en remplaçant NUMETU par le numéro correspondant). 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="NUMETU" />
en remplaçant NUMETU par votre numéro étudiant. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si votre numéro est 21012343, vous mettez <meta name="author" content="21012343" /> 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 mercredi 27 janvier pour terminer l'exercice et le déposer sur votre serveur web.

Le but de l'exercice est de réaliser une version simplifiée (ci-dessous) de la page Wikipedia de Robert Cailliau :

Version simplifiée à réaliser
Une version simplifiée d'une page Wikipédia
Page Wikipédia réelle
Page Wikipédia sur Robert Caillau

La page originale de Wikipedia a été simplifiée et le style CSS a été enlevé, on ne peut donc pas encore reproduire exactement la page originale mais l'objectif est d'analyser les différentes parties constitutives de la page afin de proposer une structure HTML cohérente avec les balises sémantiques de HTML5.

L'objectif de l'exercice est donc de recréer le HTML correspondant à la page de référence en utilisant notamment des éléments HTML5 de structuration (main, nav, header, footer, section, aside, figure, etc.).

Première partie : étude de la structure, choix de découpage et des élements HTML

Attention, encore une fois, l'image de la page Wikipédia sert de référence pour identifier la structure de la page, mais on ne cherche pas à en reproduire l'apparence telle quelle (impossible sans CSS de toute façon) !

Collectivement, discuter de la structure de la page et du découpage HTMl qui sera choisi pour coder celle-ci.

Une fois ces choix effectués, le résultat est disponible sur ecampus.

Deuxième partie : Codage de la page

On vous donne dans cette archive le texte et les images à utiliser.

En utilisant le document disponible sur ecampus pour la structure HTML, coder le HTML de la page.

Attention veiller à la validité HTML du code HTML avec le validateur HTML du W3C.

Pour les liens internes à la page, vous aurez besoin d'utiliser les fragments.

Troisième partie : Tester une feuille de style

Créer un fichier style.css et y copier-coller le contenu de cette feuille de style.

Ajouter la balise link dans l'en-tête de votre fichier HTML (exemples).