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

3ème année Sciences de l'informatique, 1er trimestre. Durée : 1 heure. Sur 20 points.

Écris tes programmes en Python ou en algorithme et vérifie-les tout de suite, puis ouvre la correction exercice par exercice.

Le travail se fait sur ordinateur : chaque page s'ouvre dans un navigateur et chaque fichier est enregistré sous le nom donné, dans le même dossier. Les deux exercices construisent le petit site de la classe 3SI1 : la page emploi.html, la page notes.html et la feuille de style style.css qu'elles partagent. Barème sur 20 points.

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).

Correction détaillée

La correction de ce devoir est réservée aux abonnés. Elle donne l'analyse, l'algorithme en notation tunisienne, le programme Python vérifié et les erreurs fréquentes de chaque exercice. Avec un compte gratuit, tu peux ouvrir 3 corrections de ton choix.

Toutes les corrections jusqu'au devoir de synthèse3 mois pour 20 TND, offre jusqu'au 30 novembre 2026 Envoyer à un parent pour qu'il paie

Sujet original écrit pour Mission Carthage, dans le format d'un devoir pratique d'informatique (3ème Sciences de l'informatique, technologies du web). Ce n'est pas un sujet officiel.

Tout le programme : 3ème année Sciences de l'informatique · Revoir le cours · Tous les devoirs