Devoir de contrôle n°3 (série B) : HTML, CSS et programmes qui fabriquent des pages

Exercice 1 : la recette de la chakchouka (7 pts)

On veut créer la page « recette.html ».

• le titre de l'onglet est « Chakchouka » ;
• un titre de niveau 1 « Ma recette » et un titre de niveau 2 « Les ingrédients » ;
• une liste à puces de trois ingrédients : tomates, poivrons, œufs ;
• un titre de niveau 2 « Les étapes » suivi d'une liste numérotée de deux étapes : « Couper les légumes » et « Cuire à feu doux » ;
• une image « plat.jpg » avec un texte alternatif, puis un lien « Retour à l'accueil » vers « index.html ».

• 1) Écrire le code HTML de la page (3 pts).
• 2) Écrire le CSS qui met tous les titres de niveau 2 en orange, qui donne à l'image une bordure noire de 2 pixels et qui écrit les liens en vert (2 pts).
• 3) Partie programmation : écrire une fonction liste_numerotee(etapes) qui reçoit une liste de textes et retourne le code HTML de la liste numérotée, avec une ligne par étape. Le programme lit n puis n étapes et affiche le code (2 pts).

Pour les deux étapes Couper et Cuire :

<ol>
  <li>Couper</li>
  <li>Cuire</li>
</ol>

Exercice 2 : l'emploi du temps (7 pts)

On veut afficher l'emploi du temps d'une journée dans un tableau HTML. Chaque ligne a deux cellules : l'heure et la matière.

• 1) Écrire le code HTML d'un tableau avec une ligne d'en-tête (Heure, Matière) et deux lignes : 8h Informatique, 9h Maths (2 pts).
• 2) Écrire le CSS qui donne aux cellules d'en-tête un fond bleu clair, et qui centre le texte de toutes les cellules (1 pt).
• 3) Écrire une fonction ligne(heure, matiere) qui retourne la ligne HTML d'une matière, puis un programme qui lit n puis n couples (heure, matière) et affiche le tableau complet avec son en-tête (4 pts).

Pour un seul cours, 8h et Informatique :

<table>
  <tr><th>Heure</th><th>Matière</th></tr>
  <tr><td>8h</td><td>Informatique</td></tr>
</table>

Exercice 3 : de la note à la couleur (6 pts)

Une page affiche des notes. Selon la note, la cellule reçoit une classe CSS : « bien » si la note est supérieure ou égale à 14, « moyen » si elle est supérieure ou égale à 10 (et inférieure à 14), « faible » sinon.

• 1) Écrire le CSS des trois classes : bien en vert, moyen en orange, faible en rouge (le texte de la cellule) (1 pt).
• 2) Écrire une fonction classe_note(note) qui retourne le nom de la classe (3 pts).
• 3) Écrire le programme qui lit une note et affiche la cellule HTML correspondante (2 pts).

Pour la note 15 :

<td class="bien">15</td>