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 :
- Sauvez (le source HTML de) ce modèle
sur votre machine en utilisant temporairement l'extension ".txt"
pour votre fichier (cela évite que votre navigateur reformate
légèrement son contenu lors de la sauvegarde).
- Renommez ce fichier ; pour cela, suivez les spécifications de nommage données dans le
(source HTML du) modèle (juste avant la balise "title").
- Adaptez le contenu de ce fichier aux endroits prévus pour cela
(le modèle reprend ou précise les spécifications à suivre).
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
(ci-dessous, les solutions sont données pour le
site Web de
notre université (www.univ-reunion.fr)
; durant le TD, le QCM noté utilisera un autre site Web) :
- Quel est l'encodage utilisé (e.g. "ISO-8859-1") ?
- Quelle est la nature (le type) de l'élément possédant l'attribut
id="menu-1" ?
- 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
- 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 ?
- 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) ?
- De quel type est l'élément de contenu "Agenda (EDT)" ?
Solutions aux questions ci-dessus pour le site 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
- dans la 1ère section de type "h2", la liste ordonnée de chaque question de votre QCM
avec la réponse que vous y avez apportée ; utilisez les balises "dl", "dt' et "dd" pour
associer chaque question avec chaque réponse ;
- dans la 2nde section de type "h2", les données de
ce fichier texte
(travail pouvant facilement être effectué en moins de 30 minutes).
Utilisez en particulier les éléments HTML pour les titres de sections (sauf "h1" et "h2"),
les paragraphes, les listes et, finalement, les tables.
Vous noterez que la fonte du fichier texte n'est pas celle du fichier modèle cité plus haut
et donc, probablement, de votre fichier HTML pour ce TD 01 (→ les caractères accentués
provenant du fichier texte ne sont probablement pas affichés correctement). Vous devez
résoudre ce léger problème. L'une des manières possibles est de remplacer (e.g., via des
"search&replace" dans votre éditeur de texte) ces caractères
accentués par des entités HTML.
Similairement (cf. 1ère note ci-dessous), pour le drapeau de chaque pays cité, vous ne devez
pas utiliser une image mais un caractère Unicode (qui est en fait une séquence de 2 caractères
correspondant à l'abréviation du nom du pays). Notes :
- Pour qu'il y ait une chance que ce drapeau soit correctement affiché par tous les navigateurs,
sur toutes les plateformes, vous ne devez bien-sûr pas utiliser des caractères non-Ascii :
vous devez utiliser la représentation en HTML de chacun des deux caractères de la séquence, i.e.,
la représentation qui commence par "&#" et qui termine par ';' (SANS espace entre les
deux caractères de la séquence). E.g., pour le drapeau australien : 🇦🇺
- Toutefois, même en utilisant cette représentation en HTML des caractères Unicode, certains
navigateurs (dont certains navigateurs Chrome/Chromium sur Windows) n'affichent pas le drapeau :
ils affichent les 2 caractères correspondant à l'abréviation du nom du pays.
Pour pallier à cela, au moins durant le TD lors de votre évaluation, si vous pouvez,
utilisez Firefox.
Exemple de solution (en version PDF) pour cette 2nd partie
(donc sans la section pour la 1ère partie).
Vous numéroterez vos sections et sous-sections comme dans cet exemple de solution
(manuellement puisque vous n'avez pas le droit d'utiliser CSS dans ce TD).
Notez que
- chaque "numéro" (e.g. "2.2.1.") finit par un '.' et est suivi de deux espaces
(l'oubli du '.' final ou d'un des deux espaces sera pénalisé ; lisez
cette page sur les "entités HTML"
pour
savoir – entre autres – comment faire afficher plusieurs
espaces consécutifs sans utiliser CSS) ;
- par rapport à l'exemple référé ci-dessus, vous devrez légèrement changer les numéros
– et en ajouter –
puisque vous avez la numérotation de la première partie
(et de la 3ème partie) à prendre en compte.
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 listé ci-dessous :
- "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", "img",
- header", "nav", "main", "article", "section", "aside", "footer",
"div", "span",
object"
[1]
- "a" ; vous fournirez en fait 3 liens :
Dans la 3ème section de type "h2" de votre fichier, vous illustrerez donc
l'utilisation des
éléments de cette liste qui n'ont pas déjà été utilisés
précédemment dans votre fichier.
Au plus tôt lors de votre séance de TD 01, et avant sa fin
(cf. grille d'évaluation)
- 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 2 onglets (côte à côte) :
- celui présentant le contenu de votre fichier HTML (→ son rendu, pas le source lui-même) ;
- 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.
- 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 (en effet, dans ce cas, vous avez 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.