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 : le nom doit comporter les éléments suivants, dans cet ordre,
séparés par '_' (sans les quotes), sans caractère accentué :
- le numéro d'étudiant de chaque auteur de ce fichier (les binômes sont autorisés ;
s'il y a 2 numéros d'étudiant, leur séparateur est '_', comme pour les autres éléments) ;
- en cas de binôme, les noms de famille en majuscules des auteurs, séparés par '_' ;
sinon, le nom de famille de l'auteur en majuscules puis de son prénom principal
(écrit normalement, donc sans majuscule à part pour l'initiale, sauf en cas de prénom composé) ;
- "TD01.html"
E.g.: "12345_NOM_Prenom_TD01.html" et "12345_67890_NOM-1_NOM-2_TD01.html".
- Adaptez le contenu de ce fichier aux endroits prévus pour cela
(le modèle reprend ou précise les spécifications à suivre).
Note ajoutée après le "pré-dépôt pour le TD 01" et lue durant le CM 2 :
pour le nom de votre fichier HTML, la spécification donnée pour le pré-TD01
(→ jusqu'à la veille du CM2 : cf. paragraphe ci-dessous) était
(comme l'année dernière, comme l'année prochaine) incompatible avec la spécification
donnée dans le modèle à suivre (notez la place du ou des numéros d'étudiant dans la liste) ;
or (comme l'année dernière), aucun étudiant ne m'a alerté ni demandé d'éclaircissement à
ce sujet ; ce qui veut dire que chaque étudiant
- soit n'a pas suivi les spécifications du modèle et/ou remarqué l'incompatibilité,
- soit n'a volontairement pas effectué de retour, ce qui est contraire à la fois aux
rôles/devoirs de l'étudiant
et aux "bonnes pratiques (BPs) de codage" générales (la moindre des choses pour un
développeur qui détecte un problème dans les spécifications établies par le client ou
le chef de projet, c'est de lui indiquer et de demander ce qu'il faut effectuer,
pas de choisir à la place du client ou du chef de projet).
Ceci sera donc être pris en compte dans l'évaluation de votre pre-TD01, laquelle sera prise
en compte dans l'évaluation de votre TD01.
/* Contenu du point 2 ci-dessus jusqu'à la veille du CM2 :
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_TD01.html". */
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 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 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 : 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.