TP 01 : Premières pages, validation

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

Jean-Marc Lecarpentier — Antoine Widlocher

Enseignement des technologies du Web

 

Travail personnel

Notes de cours

Exercice 1 — Première page HTML #

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

On vous fournit une image d'une page web, avec les styles de base du navigateur.

Capture d'écran de la page
Capture d'écran de la page (cliquer pour ouvrir l'image)

L'objectif est d'écrire en HTML5 valide le code permettant d'obtenir cette page.

NB : l'apparence (polices, tailles, détails…) d'une page en pur HTML peut varier fortement suivant le navigateur et le système d'exploitation. L'image fournie représente le rendu de Firefox sur une machine Ubuntu du département.

Instructions :

  • Vous pouvez utiliser l'éditeur de votre choix, mais assurez-vous que la coloration syntaxique soit bien activée (selon les éditeurs il peut être nécessaire d'enregistrer avant que ça ne s'active)
  • Indentez votre page au fur et à mesure, et écrivez les commentaires éventuels au fur et à mesure
  • Gardez quelque part (par exemple dans les marque-pages de votre navigateur) un lien vers cette page, qui liste tous les éléments HTML5 avec de bonnes explications sur leur sémantique. Vous en aurez besoin pour toute l’année.
  • Attention aux problèmes d’accents ; assurez-vous que tous les symboles s’affichent correctement (en cas de problème, vérifiez l'encodage utilisé par l’éditeur).
  • Ouvrez votre page avec plusieurs navigateurs et comparez les résultats obtenus. Sont-ils identiques ? Vous pouvez essayer avec le navigateur en ligne de commande lynx : lynx 'https://dev-NUMETU.users.info.unicaen.fr/HU91/TP01/premiere-page.html' ; il vous demandera peut-être votre etupass. (Pour quitter, appuyez sur q puis sur y pour confirmer.)
  • Validez impérativement votre page en utilisant le validateur en ligne du W3C ou son clone sur le serveur de l'université (qui supporte plus de charge). Votre page doit être validée sans erreur (les warning sont parfois pertinents, mais sont moins graves).

Exercice 2 — 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.