Devoir pratique STI n°2 : le site de la 3SI1, un tableau HTML (emploi du temps) et le style des tableaux du site

Exercice 1 : l'emploi du temps (8 pts)

On veut la page emploi.html du site de la classe, reliée à la feuille de style style.css du site (elle est écrite à l'exercice 2), qui affiche une partie de l'emploi du temps de la 3SI1 dans un tableau :

• le titre du tableau est « Emploi du temps de la 3SI1 » ;
• la première ligne est faite de cellules d'en-tête : Heure, Lundi, Mardi, Mercredi ;
• la ligne suivante commence par la cellule d'en-tête « 8h - 10h », puis les cellules Algorithmique, Mathématiques et STI ;
• la dernière ligne commence par la cellule d'en-tête « 10h - 12h », puis la cellule Physique, puis une seule cellule « Sport » qui occupe les colonnes du mardi et du mercredi ;
• sous le tableau, un lien « Nos notes » vers la page notes.html du site.

• 1) Écrire la page emploi.html (6 pts).
• 2) Choisir l'attribut de chaque besoin : une cellule sur deux colonnes, une cellule sur deux lignes (2 pts).

Exercice 2 : le style des tableaux du site (12 pts)

La page notes.html du site est donnée. Comme emploi.html (exercice 1), elle est reliée à la feuille de style style.css :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Notes de la 3SI1</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <table id="notes">
    <thead>
      <tr><th>Élève</th><th>Algorithmique</th><th>STI</th></tr>
    </thead>
    <tbody>
      <tr><td>Sami</td><td>15</td><td>17</td></tr>
      <tr class="pair"><td>Rim</td><td>18</td><td>16</td></tr>
      <tr><td>Omar</td><td>12</td><td>14</td></tr>
      <tr class="pair"><td>Lina</td><td>16</td><td>19</td></tr>
    </tbody>
  </table>
  <p><a href="emploi.html">Emploi du temps</a></p>
</body>
</html>

• 1) Écrire la feuille de style style.css, commune aux deux pages du site, qui donne : a) au tableau d'identifiant notes des bordures fusionnées et une largeur de 400px ; b) aux cellules (th et td) une bordure pleine de 1px de couleur #555555 et une marge intérieure de 6px ; c) aux cellules d'en-tête un fond #1f618d et un texte blanc ; d) aux cellules de données un texte centré ; e) aux lignes de classe pair du corps du tableau un fond #eaf2f8 ; f) aux cellules d'en-tête un texte en majuscules (9 pts).
• 2) Choisir la propriété CSS de chaque besoin : fusionner les bordures d'un tableau, l'espace entre le texte et la bordure d'une cellule, l'espace à l'extérieur de la bordure (3 pts).