Devoir de synthèse n°3 (série B) : page du club de robotique, formulaire de contact, table de multiplication

Exercice 1 : la page du club de robotique (7 pts)

On veut créer la page « robotique.html » du club de robotique du lycée :

• le titre de l'onglet est « Club robotique » ;
• un titre de niveau 1 « Club de robotique » suivi d'un paragraphe « Rejoins-nous chaque mercredi à 14h. », où le mot mercredi est surligné ;
• un titre de niveau 2 « Nos projets » suivi d'une liste à puces : Robot suiveur de ligne, Bras articulé, Voiture télécommandée ;
• une image « robot.png » de 300 pixels de large, avec un texte alternatif ;
• un lien « Inscription » qui ouvre la page « inscription.html ».

• 1) Écrire le code HTML de la page (3 pts).
• 2) Écrire le CSS : fond de la page gris très clair (#f2f2f2), titre de niveau 1 centré et de couleur bleu marine (navy), éléments de la liste en police de 18 pixels (2 pts).
• 3) Partie programmation : écrire une fonction menu(textes, pages, n) qui retourne le code HTML d'une liste à puces de liens, le i-ème lien ayant le texte textes[i] et l'adresse pages[i]. Le programme lit n puis n couples (texte, page) et affiche le code (2 pts).

Pour les deux liens Accueil (index.html) et Projets (projets.html) :

<ul>
  <li><a href="index.html">Accueil</a></li>
  <li><a href="projets.html">Projets</a></li>
</ul>

Exercice 2 : le formulaire de contact (6 pts)

On veut ajouter à la page un formulaire de contact qui contient :

• une zone de texte pour le nom et une zone de texte pour l'adresse e-mail ;
• une liste déroulante « Classe » avec les choix 1ère, 2ème TI et 3ème SI ;
• une zone de texte de plusieurs lignes pour le message ;
• un bouton Envoyer.

• 1) Écrire le code HTML du formulaire, chaque zone ayant son étiquette (3 pts).
• 2) Écrire le CSS qui donne aux zones de saisie (input, select, textarea) une largeur de 250 pixels et une marge de 5 pixels (1 pt).
• 3) Partie programmation : écrire une fonction liste_deroulante(nom, choix, n) qui retourne le code HTML d'une liste déroulante, puis le programme qui lit le nom de la liste, n et les n choix, et affiche le code (2 pts).

Pour le nom classe et les choix 1ère et 2ème TI :

<select name="classe">
  <option>1ère</option>
  <option>2ème TI</option>
</select>

Exercice 3 : la table de multiplication en HTML (7 pts)

On veut un programme qui fabrique le code HTML de la table de multiplication d'un entier n (1 ≤ n ≤ 10, saisie contrôlée), de 1 à 10, dans un tableau à deux colonnes.

• 1) Écrire la fonction ligne(n, i) qui retourne la ligne HTML de l'opération n × i, par exemple <tr><td>7 x 3</td><td>21</td></tr> (2 pts).
• 2) Écrire le programme qui affiche la balise d'ouverture du tableau avec l'identifiant table, la ligne d'en-tête Opération / Résultat, les dix lignes, puis la balise de fermeture (3 pts).
• 3) Écrire le CSS qui donne une bordure noire de 1 pixel aux cellules du tableau, une marge intérieure de 4 pixels en haut et en bas et de 10 pixels à gauche et à droite, et un fond jaune clair (lightyellow) aux cellules d'en-tête (2 pts).

Pour n = 7, le programme affiche (seules les premières et la dernière ligne sont montrées) :

<table id="table">
<tr><th>Opération</th><th>Résultat</th></tr>
<tr><td>7 x 1</td><td>7</td></tr>
<tr><td>7 x 2</td><td>14</td></tr>
...
<tr><td>7 x 10</td><td>70</td></tr>
</table>