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 JurieRé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 :
- Dans quel cas seulement peut-on utiliser la balise
<article>
? - Pourquoi ne peut-on pas dire si c'est
<article>
qui contient des<sections>
ou bien c'est<section>
qui contient des<article>
? - 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>
- L'élément <header> est-il forcément le haut de la page web ?
- L'élément <footer> est-il forcément le pied de page ?
- À quoi sert l'élément <figcaption> et dans quel élément doit-il être contenu ?
- À quels endroits dans <figure> l'élément <figcaption> doit-il se trouver ?
- Quels éléments sématiques de HTML5 utiliseriez-vous pour coder la page suivante réalisée en HTML4 ?
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 :
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) !