Aller au contenu

Exercice 1 : Tableau de notes d'élèves

Objectif

Créer un tableau HTML structuré avec des données d'élèves et leurs notes, puis le styliser avec CSS en appliquant des bordures, des couleurs d'arrière-plan et des effets interactifs au survol.

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-1

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-1
  • Ou faites un clic droit sur le dossier parent > New Folder > entrez le nom : exercice-1
  • Ou File > New Folder > entrez le nom : exercice-1

1. Créer le tableau HTML

  • Créez un fichier index.html dans le dossier exercice-1.
  • Le tableau doit comporter les colonnes suivantes: Nom de l'élève, Mathématiques, Physique, Informatique, Moyenne générale.
  • Il doit y avoir 10 élèves avec des notes différentes.
  • Calculez et affichez la moyenne générale de chaque élève (en ajoutant une colonne dédiée).

2. Styliser le tableau avec CSS

  • Créez un fichier styles.css dans le dossier exercice-1.
  • Ajouter des bordures à chaque cellule du tableau.
  • Surligner l'en-tête du tableau avec une couleur de fond différente.
  • Ajouter un effet de survol (hover) sur les lignes du tableau pour changer la couleur de fond de la ligne survolée.
  • Centrer le texte dans les cellules et ajuster la largeur des colonnes.

3. Livraison de l'exercice

Checklist avant de soumettre

  • Créez vos fichiers : exercice-1/index.html et exercice-1/styles.css
  • Testez le tableau dans votre navigateur
  • Vérifiez que l'effet hover fonctionne correctement
  • Faites des commits réguliers avec des messages clairs

Ouvrez le terminal intégré Ctrl+'

1
2
3
4
git status
git add .
git commit -m "feat(exercice-1): création tableau HTML avec 10 élèves"
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
    ## Exercice 1 : Tableau de notes d'élèves

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

- [x] Création du fichier `exercice-1/index.html`
- [x] Création du fichier `exercice-1/styles.css`
- [x] Tableau HTML avec 10 élèves
- [x] Colonnes : Nom, Mathématiques, Physique, Informatique, Moyenne générale
- [x] Calcul des moyennes générales pour chaque élève
- [x] Bordures sur toutes les cellules
- [x] En-tête du tableau avec couleur de fond différente
- [x] Effet hover sur les lignes du tableau
- [x] Texte centré dans les cellules
- [x] Largeurs de colonnes ajustées

### Captures d'écran

#### Vue normale du tableau

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

#### Vue avec effet hover

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

#### Vue responsive (optionnel)

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

### Points techniques

- Structure HTML : `<table>`, `<tr>`, `<th>`, `<td>`
- CSS : bordures, background-color, :hover, text-align, width

### 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 normale du tableau
  • Vue avec l'effet hover sur une ligne
  • Vue responsive sur mobile (optionnel)

13. Evaluation

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

1
git tag exercice1 && git push origin exercice1

Voir Classroom50

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