Devoir de contrôle n°3 : pages web en HTML et CSS

Exercice 1 : la page des villes (7 pts)

On veut créer la page « villes.html » :

• le titre de l'onglet est « Villes de Tunisie » ;
• un titre de niveau 1 « Mes villes préférées » ;
• un paragraphe d'introduction contenant le mot « Carthage » surligné ;
• une liste à puces des villes Tunis, Sfax et Bizerte ;
• un lien « En savoir plus » vers la page « infos.html ».

• 1) Écrire le code HTML de la page (3 pts).
• 2) Écrire la règle CSS qui met le titre en bleu foncé et centré, et le texte des paragraphes en taille 18 pixels (1 pt).
• 3) Partie programmation : écrire une fonction liste_html(villes) qui reçoit une liste de noms et retourne le code HTML de la liste à puces. Le programme lit n puis n noms, et affiche ce code (3 pts).

Pour deux villes Tunis et Sfax, le programme affiche :

<ul>
  <li>Tunis</li>
  <li>Sfax</li>
</ul>

Exercice 2 : le tableau des notes (6 pts)

Un enseignant veut afficher les notes de sa classe dans un tableau HTML à deux colonnes, « Nom » et « Note », avec une ligne d'en-tête.

• 1) Écrire le code HTML d'un tableau avec la ligne d'en-tête et deux élèves : Amira (16) et Sami (14) (2 pts).
• 2) Écrire la règle CSS qui donne une bordure grise de 1 pixel à chaque cellule, un espace intérieur de 6 pixels, et un fond jaune clair aux cellules d'en-tête (1 pt).
• 3) Partie programmation : écrire un programme qui lit n puis n couples (nom, note) et affiche le code HTML du tableau (3 pts).

Pour un seul élève Lina avec 18 :

<table>
  <tr><th>Nom</th><th>Note</th></tr>
  <tr><td>Lina</td><td>18</td></tr>
</table>

Exercice 3 : le formulaire d'inscription (7 pts)

Un site propose un formulaire d'inscription avec un identifiant, un mot de passe et un bouton d'envoi.

• 1) Écrire le code HTML du formulaire : un champ de texte « identifiant », un champ de texte « mot de passe », un bouton « Envoyer » et un bouton qui vide les champs (3 pts).
• 2) Écrire en CSS une classe « erreur » qui met un texte en rouge et en gras, puis montrer comment l'appliquer à un paragraphe (1 pt).
• 3) Partie programmation : écrire une fonction verifier(login, mdp) qui retourne un message : « Login trop court » si login a moins de 3 caractères, « Login invalide » s'il contient autre chose que des lettres et des chiffres, « Mot de passe trop court » si mdp a moins de 6 caractères, « Mot de passe sans chiffre » s'il ne contient aucun chiffre, sinon « Formulaire valide ». Les tests se font dans cet ordre. Le programme lit login et mdp et affiche le message (3 pts).