TP 02 : Validation et Structuration

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

Jean-Marc Lecarpentier — Antoine Widlocher

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 #

Voici une image d'une version simplifiée de la page Wikipedia de Robert Cailliau :

Une version simplifiée d'une page Wikipédia
Une version simplifiée d'une page Wikipédia

Vous ne pourrez pas reproduire cette image sans utiliser CSS, mais vous pouvez quand même vous « inspirer » de l'image pour écrire le HTML qui lui correspond.

L'objectif de l'exercice est 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.). Cherchez leur signification, dans le cours ou sur le web (en prenant garde aux sources de mauvaise qualité).

On vous donne dans cette archive le texte à utiliser (un peu différent de l'image de référence, ça n'a pas d'importance) et les images.

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