Aller au contenu

Exercice 2 : Comparaison de produits

Objectif

Maîtriser la fusion de cellules dans les tableaux HTML (rowspan et colspan) et appliquer des styles CSS avancés (zebra stripes, mise en forme conditionnelle).

Création du dossier de l'exercice

Avant de commencer cet exercice : créer le dossier de l'exercice.

1
2
# sous Git bash
mkdir -p exercice-2

Avec VS Code :

  • Ctrl+Shift+P > Create Folder
  • Ou sélectionnez le dossier parent dans l'explorateur de fichiers puis entrez le nom du nouveau dossier : exercice-2
  • Ou faites un clic droit sur le dossier parent > New Folder > entrez le nom : exercice-2
  • Ou File > New Folder > entrez le nom : exercice-2

1. Créer le tableau HTML

  • Créez un fichier index.html dans le dossier exercice-2.
  • Comparer 4 ordinateurs portables avec les caractéristiques suivantes: Modèle, Processeur, RAM, Stockage, Prix, et Note globale.
  • Fusionner les cellules pour les caractéristiques qui sont les mêmes pour certains modèles (utiliser rowspan ou colspan).
  • Ajouter une cellule fusionnée pour le titre "Caractéristiques des Produits" qui s'étend sur toutes les colonnes.

2. Styliser le tableau avec CSS

  • Créez un fichier styles.css dans le dossier exercice-2.
  • Créer une bordure extérieure pour tout le tableau et des bordures fines pour chaque cellule.
  • Alterner la couleur des lignes pour faciliter la lecture (zebra stripes).
  • Ajouter une mise en forme conditionnelle pour les notes globales : utiliser des couleurs pour indiquer la qualité (vert pour les meilleures notes, rouge pour les pires).
  • Centrer le texte dans les cellules et ajuster la taille des colonnes.

3. Livraison de l'exercice

Checklist avant de soumettre

  • Fichiers : exercice-2/index.html et exercice-2/styles.css
  • 4 ordinateurs portables comparés
  • Cellules fusionnées (rowspan/colspan) utilisées
  • Zebra stripes implémentées
  • Mise en forme conditionnelle des notes (couleurs)

Ouvrez le terminal intégré Ctrl+'

1
2
3
4
5
git status
git add .
git commit -m "feat(exercice-2): tableau comparatif avec fusion cellules"
# git commit -m "style(exercice-2): zebra stripes et couleurs conditionnelles"
git push

Dans VS Code, utilisez l'interface graphique pour ajouter, committer et pousser vos changements:

  1. Cliquez sur l'icône "Source Control" dans la barre latérale
  2. Ajoutez vos changements en cliquant sur le signe "+"
  3. Commitez vos changements en saisissant un message de commit
  4. Poussez vos changements en cliquant sur l'icône "Push"

Ajout de captures d'écran dans la PR Feedback

  1. Allez sur GitHub dans votre dépôt
  2. Cliquez sur "Pull requests" > Ouvrir une pull request "Feedback"

  3. Ajoutez un commentaire dans la PR avec le texte suivant :

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
    ## Exercice 2 : Comparaison de produits

### Ce qui a été réalisé

- [x] Création du fichier `exercice-2/index.html`
- [x] Création du fichier `exercice-2/styles.css`
- [x] Tableau HTML avec 4 ordinateurs portables
- [x] Colonnes : Modèle, Processeur, RAM, Stockage, Prix, Note globale
- [x] Cellule fusionnée pour le titre "Caractéristiques des Produits" (colspan)
- [x] Fusion de cellules pour caractéristiques identiques (rowspan/colspan)
- [x] Bordure extérieure et bordures fines pour cellules
- [x] Zebra stripes (alternance de couleurs des lignes)
- [x] Mise en forme conditionnelle des notes (vert/rouge)
- [x] Texte centré et colonnes ajustées

### Captures d'écran

#### Vue complète du tableau

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Tableau comparatif complet](URL_de_votre_capture)

#### Détail des cellules fusionnées

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Fusion de cellules](URL_de_votre_capture)

#### Mise en forme conditionnelle des notes

<!-- Remplacez `URL_de_votre_capture` par le lien vers votre capture d'écran -->
![Couleurs conditionnelles](URL_de_votre_capture)

### Points techniques

- HTML : `colspan`, `rowspan` pour la fusion de cellules
- CSS : `nth-child()` pour zebra stripes, classes pour couleurs conditionnelles
- Attention portée à la structure du tableau avec cellules fusionnées

### Questions pour l'enseignant

- (optionnel) Listez vos questions ici

  4. Ajoutez vos captures d'écran en glissant-déposant les images dans le champ de description

  5. Cliquez sur "Create pull request"
  6. N'oubliez pas : Ne cliquez PAS sur "Merge pull request" !

Captures d'écran à inclure dans votre PR

  • Vue complète du tableau avec les 4 produits
  • Zoom sur les cellules fusionnées
  • Détail de la mise en forme conditionnelle des notes

13. Evaluation

Pour lancer l'évaluation automatique, créez une "tag" sur votre branche main avec le nom exercice2 et poussez-la sur GitHub.

1
git tag exercice2 && git push origin exercice2

Voir Classroom50

Vous trouverez un exemple de commande pour créer la "tag" dans la page du devoir du TP (Assignment) sur Classroom50.