Web I — Exercice formatif

Exercice "Mousquetaires"

1. Le but de l'exercice est d'ajouter des liens et des images.
2. Regarder la démo du prof.
3. Récupérer le dossier de travail 📁.
4. Il y a 3 fichiers HTML à modifier.
5. Dans chaque page, il y a un paragraphe (toujours le même) dans lequel on doit rendre cliquables les mots "Athos", "Porthos" et "Aramis" pour permettre à l'usager de se rendre à la page correspondante.
6. Il y a en tout 6 images de flèches numérotées à ajouter en se fiant au schéma parcours.png qui se trouve dans le dossier de travail.
7. Chaque image est cliquable et pointe vers l'emplacement de la flèche suivante (donc, 6 liens)
8. Il est interdit de modifier l'emplacement des fichiers.
9. Note: Il va sans dire que les toutes les adresses doivent être relatives.

Par étape

Faire chaque partie au complet avant de passer à la suivante.

A. Les liens simples

1. Ajouter les liens sur les mots "Athos", "Porthos" et "Aramis" dans toutes les pages (9 liens en tout).
2. Ces liens doivent mener vers la page correspondante.

B. Les flèches

1. Ajouter les 6 images de flèches.
2. Les flèches 1 et 5 vont dans athos.html
3. Les flèches 2 et 3 vont dans porthos.html
4. Les flèches 4 et 6 vont dans aramis.html
5. Plus précisément, les flèches 1, 2 et 4 se placent tout juste après l'élément h1 et les flèches 3, 5 et 6 se placent tout juste après la ligne «Qui vive?».

C. Les liens sur les images

1. Envelopper les images de balises <a> (6 liens en tout). Ces liens doivent mener vers la bonne PAGE. Ne pas se soucier de l'ancre pour l'instant.
2. Dans les liens des flèches 3, 5 et 6, ajouter un attribut id avec une valeur significative. Le id doit suivre les standards de nomenclature, notamment ne pas commencer par un chiffre.
3. Dans les liens des flèches 2 et 4, ajouter, à la fin de l'attribut href, un dièze (#) suivi du id de la flèche correspondante.
4. Dans le lien de la flèche 2, comme celui-ci pointe dans vers la page courante, on peut (doit) enlever le nom du fichier (porthos.html).

D. Et le «Bravo!»

1. Au bas de la page aramis.html, ajouter un <span> ayant l'attribut id avec la valeur "fin".
2. Faire en sorte que la flèche 6 pointe vers celui-ci.

Remise

• Travail individuel.
• Durée : une semaine. À remettre avant le cours une semaine après la réception.
• Compte pour 5% de la note finale.
• Renommer le dossier NOMP0123456_tableau AVANT de le zipper pour le remettre dans le projet correspondant sur remise.cstj.qc.ca.