TD 01 (Introduction à HTML)

Rappels : i) comme tous les TDs de ce cours, celui-ci est à préparer chez soi (cf. grille d'évaluation des TDs),
ii) le TD contiendra des QCMs (via Moodle) vérifiant que vous avez effectué ce travail.

0.  Personnalisation du modèle HTML pour ce TD

Afin de créer votre fichier HTML pour ce TD 01 :

  1. Sauvez ce modèle sur votre machine en utilisant l'extension ".txt" pour votre fichier
    (cela évite que ce navigateur reformatte légèrement le contenu lors de la sauvegarde).
  2. Renommez ce fichier : le nom doit commencer par le nom de famille de son auteur (votre nom ;
    rappel : il s'agit d'un travail individuel) en majuscules (sans espace ni accent),
    suivi de '_' (sans les quotes), suivi de son prénom (sans espace ni accent), suivi de '_',
    suivi de son numéro d'étudiant, suivi de "_TD01.html".
    E.g. : "NOM_PrenomSansAccent_123456789_templateHTML.html".
  3. Adaptez le contenu de ce fichier aux endroits prévus pour cela.

Sauf durant le QCM, affichez ce fichier avec votre navigateur durant toute la séance de TD ;
en effet, pour rappel (cf. BPs générales), à part durant le QCM, vous devez avoir 2 fenêtres ouvertes
(et seulement deux) : celle-ci et celle de votre éditeur de texte.

1.  QCM de compréhension (et/ou rapidité de recherche) de balises HTML d'un site Web

Voici quelques questions d'entraînement, pour le site Web de notre université (www.univ-reunion.fr) :

  1. Quel est l'encodage utilisé (e.g. "ISO-8859-1") ?
  2. Quelle est la nature (le type) de l'élément possédant l'attribut id="menu-1" ?
  3. La page possède-t-elle un élément de type "header" ? Quel est son contenu ?
    (note : pour mieux voir/trouver cet élément, vous pouvez par exemple
  4. La page contient-elle une liste ordonnée ?
    Si oui, après quel élément (donnez son type et son id ou sa classe) apparaît-elle sur le site ?
  5. La page possède-t-elle un footer ?
    Si oui, quels sont les deux 1er mots qu'il affiche (ceux les plus en haut à gauche) ?
  6. De quel type est l'élément de contenu "Agenda (EDT)" ?

Solutions aux questions ci-dessus, pour www.univ-reunion.fr.

Durant le QCM, effectuez un copier-coller (dans votre fichier HTML pour ce TD 01)
de chaque question et de la solution que vous y avez apportée.

2.  Structuration de données en HTML (sans CSS)

Dans votre fichier HTML pour ce TD 01, structurez

Exemple de solution pour le 2nd point (donc sans la section pour le 1er point ; la destination de ce lien n'est
pas accessible aux étudiants : il est seulement utilisé durant le CM1 pour montrer très rapidement un exemple de solution).
Contrairement à cet exemple de solution, vous numéroterez vos sections et sous-sections
(manuellement puisque vous n'avez pas le droit d'utiliser CSS dans ce TD).

3.  Écriture d'une page HTML (sans utiliser de CSS) pour structurer ses données

Le validateur lancé via le bouton "BP check" de votre fichier HTML pour ce TD 01
vérifie que vous utilisez au moins une fois chaque élément HTML de la liste suivante :
"h1", "p", "ul", "ol", "li", "dl", "dt", "dd",    "table", "tbody", "th", "tr", "td",
"strong", "b", "em", "i", "mark", "small", "sub", "sup",
"blockquote", "q", "abbr", "address", "cite", "a", "img",
"header", "nav", "main", "article", "section", "aside", "footer",    "div" et "span".
Dans une/la 3ème section de type "h2" de ce fichier, vous illustrerez donc l'utilisation des
autres éléments de cette liste qui n'ont pas déjà été utilisés précédemment dans ce fichier.



Au plus tôt lors de votre séance de TD 01, et avant sa fin,  (cf. grille d'évaluation)

  1. faites évaluer votre travail par l'enseignant responsable de votre (groupe de) TD ;
    pour cela, la fenêtre de votre navigateur doit contenir au moins 3 onglets (côte à côte) :
    1. celui présentant le contenu de votre fichier HTML (→ son rendu, pas le source lui-même) ;
    2. celui affichant le résultat de la validation de votre source HTML par
      https://validator.w3.org/#validate_by_upload+with_options ;
      préparez cette page AVANT de venir au bureau de votre responsable de TD pour vous faire évaluer
      (vu le nombre d'étudiants par groupe, chaque évaluation doit être courte) ;
      n'essayez pas de montrer une évaluation par un validateur sur votre machine ou un
      validateur à une autre adresse que celle ci-dessus, vous perdrez au moins 1 point si vous le faites ;
    3. le Google Sheet temporaire ici pointé ;  lorsque votre responsable de TD vous le demandera,
      vous y copierez (dans la 1ère case libre) les deux dernières lignes du
      rapport qui s'affiche dans la console de votre navigateur
      lorsque vous aurez appuyé sur le bouton "BP check" (dans le 1er onglet cité ci-dessus) ;
      ces deux dernières lignes sont précédées de "Summary for a copy/paste into the evaluation grid:" ;
  2. lorsque ne souhaitez/pouvez plus être ré-évalué durant ce TD
    (→ lorsque vous avez effectué votre dernière évaluation ; avant la fin du TD),
    soumettez (le fichier HTML que vous avez fait évaluer) via Moodle ;
    pour cela, recherchez votre groupe dans la section "TD 01" ;
    attention, vous ne pourrez pas re-soumettre votre travail ultérieurement.
    Note : inutile de soumettre si vous n'êtes pas venu au bureau de votre responsable de TD
        et qu'il y a eu durant ce TD un moment durant lequel ce responsable de TD n'avait personne
        à évaluer     : vous avez 0/20 (vous avez alors 0/20 et il est donc inutile de soumettre).
        Toutefois, si vous n'avez pu être évalués parce que, durant ce TD, le responsable de TD a
        toujours eu une personne à évaluer qui était prioritaire par rapport à vous     (ceux qui
        repassent pour être ré-évalués ne sont pas prioritaires), signalez-le à votre responsable de TD,
        puis, si celui-ci confirme ce que vous signalez, soumettez    .