Devoir de contrôle n°1 STI : page HTML5, formulaire, transitions et animations CSS3

Exercice 1 : une page HTML5 bien structurée (7 pts)

On veut la page d'accueil index.html du club « Robotique Carthage » :

• un en-tête avec le titre de niveau 1 « Robotique Carthage » et un menu de navigation de trois liens (Accueil, Projets, Contact) ;
• un contenu principal avec un article « Notre robot suiveur » qui contient un paragraphe et l'image robot.jpg accompagnée de sa légende « Le robot à la compétition régionale de Sousse » ;
• une question fréquente qui s'ouvre au clic : « Qui peut s'inscrire ? », réponse « Tous les élèves du lycée. » ;
• un encadré à côté du contenu avec les horaires, et un pied de page avec l'adresse du lycée.

• 1) Écrire le code HTML5 de la page index.html en utilisant les balises de structure adaptées (header, nav, main, article, figure, figcaption, details, summary, aside, footer, address) (4 pts).
• 2) Expliquer l'intérêt de ces balises par rapport à des <div> (1 pt).
• 3) Les horaires de l'encadré sont présentés dans un tableau. Choisir la balise de chaque partie du tableau : une ligne, une cellule d'en-tête, une cellule de données, le titre du tableau (2 pts).

Exercice 2 : formulaire HTML5 (7 pts)

Le club veut une page inscription.html avec un formulaire. Chaque champ a l'identifiant donné et une étiquette <label> qui lui est reliée :

• un e-mail obligatoire (email) ;
• un téléphone (tel) ;
• une date de naissance (naiss) ;
• un mot de passe d'au moins 8 caractères (mdp) ;
• un curseur « Niveau en programmation » de 1 à 5, sur 3 au départ (niveau) ;
• un bouton d'envoi « S'inscrire ».

• 1) Écrire la page inscription.html avec les types d'input HTML5 et les attributs adaptés (4 pts).
• 2) Pour chaque besoin, choisir le type d'input ou l'attribut : un seul choix parmi plusieurs, plusieurs cases à cocher, un champ qui ne peut pas rester vide, un texte d'aide grisé dans le champ vide (3 pts).

Exercice 3 : transitions et animations CSS3 (6 pts)

La page suivante est donnée. Elle est reliée à la feuille de style style.css, à écrire :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Inscriptions</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Inscriptions au club</h1>
  <p class="alerte">Plus que 3 jours pour s'inscrire !</p>
  <input type="button" class="btn" value="S'inscrire">
  <input type="button" class="btn" value="Voir les projets">
</body>
</html>

Écrire la feuille de style style.css qui :

• a) donne aux boutons de classe btn un fond bleu et un texte blanc ; au survol, le fond devient orange et le bouton grossit de 10 % ; le changement dure 0,3 seconde (2 pts) ;
• b) définit une animation @keyframes nommée clignote qui fait passer l'opacité de 1 à 0,2 puis de nouveau à 1, appliquée en boucle (durée 1 s) aux éléments de classe alerte (2 pts) ;
• c) centre le titre h1 et l'écrit en Arial, de couleur #1a5276 (2 pts).