TP 02 : Validation et Structuration

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

Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Ce second TP revient sur la validation du code HTML et introduit les balises HTML5 de structuration sémantique de la page.

Exercice 1 — Erreurs de validation #

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

Récupérer le fichier erreurs.html dans cette archive, et le placer sur votre serveur. Constater que la page s’affiche assez correctement dans le navigateur (mis à part les accents et une sous-liste) mais ne passe pas la validation du W3C.

Faire les corrections nécessaires pour que la page soit valide et que la sous-liste s’affiche correctement. Attention : pour l’instant nous ne pourrons pas centrer le titre et avoir une page valide, il est nécessaire pour cela d'utiliser du CSS. Vous pouvez donc laisser le titre s’afficher à gauche.

Exercice 2 — Éléments HTML5 et sémantique #

Lire les informations relatives aux éléments sémantiques de HTML5 puis répondre aux questions suivantes :

  1. Dans quel cas seulement peut-on utiliser la balise <article> ?
  2. Pourquoi ne peut-on pas dire si c'est <article> qui contient des <sections> ou bien c'est <section> qui contient des <article> ?
  3. Le code suivant est-il correct sémantiquement ?
    <p>Un <nav><a href="https://google.fr">lien vers Google</a></nav> dans du texte</p>
  4. L'élément <header> est-il forcément le haut de la page web ?
  5. L'élément <footer> est-il forcément le pied de page ?
  6. À quoi sert l'élément <figcaption> et dans quel élément doit-il être contenu ?
  7. À quels endroits dans <figure> l'élément <figcaption> doit-il se trouver ?
  8. Quels éléments sématiques de HTML5 utiliseriez-vous pour coder la page suivante réalisée en HTML4 ?
    Image provenant de http://html5doctor.com

Exercice 3 — Structure de page et HTML5 #

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, article, section, aside, figure, etc.).

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

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) !