Accueil › Devoirs › 3ème SI

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

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

• un en-tête avec le titre de niveau 1 du club et un menu de navigation (Accueil, Projets, Contact) ;
• un contenu principal avec un article « Notre robot suiveur » qui contient un paragraphe et une 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 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) Écrire la fonction JavaScript figure(src, legende) qui renvoie le code HTML d'une image avec sa légende, par exemple figure("robot.jpg", "Notre robot") renvoie <figure><img src="robot.jpg" alt="Notre robot"><figcaption>Notre robot</figcaption></figure> (2 pts).

Exercice 2 : formulaire HTML5 et événements (7 pts)

Le club veut un formulaire d'inscription avec : un e-mail, un téléphone, une date de naissance, un mot de passe et un curseur « Niveau en programmation » de 1 à 5 dont la valeur s'affiche à côté pendant qu'on le déplace.

• 1) Écrire le formulaire avec les types d'input HTML5 adaptés ; la valeur du curseur s'affiche dans une balise <output> mise à jour par l'événement oninput (3 pts).
• 2) Écrire la fonction forceMdp(mdp) qui renvoie « faible » si le mot de passe a moins de 8 caractères ; sinon « fort » s'il contient au moins un chiffre et au moins une majuscule, et « moyen » dans les autres cas (3 pts).
• 3) Quand le champ mot de passe perd le focus (événement onblur), la force s'affiche dans un paragraphe. Écrire l'attribut et la fonction appelée (1 pt).

Exemples : forceMdp("abc") donne faible, forceMdp("carthage") donne moyen, forceMdp("Carthage2026") donne fort.

Exercice 3 : transitions et animations CSS3 (6 pts)

• 1) Écrire une règle pour les boutons de classe btn : fond bleu, texte blanc ; au survol, le fond devient orange et le bouton grossit de 10 % ; le changement dure 0,3 seconde (2 pts).
• 2) Écrire une animation @keyframes nommée clignote qui fait passer l'opacité d'un élément de 1 à 0,2 puis de nouveau à 1, et l'appliquer en boucle (durée 1 s) aux éléments de classe alerte (2 pts).
• 3) La page affiche un compte à rebours avant la fin des inscriptions. Écrire la fonction JavaScript formatDuree(s) qui transforme un nombre de secondes en texte « mm:ss » (minutes et secondes sur deux chiffres) (2 pts).

Exemples : formatDuree(75) donne 01:15 et formatDuree(600) donne 10:00.

Correction détaillée

Sujet original écrit pour Mission Carthage, dans le style des devoirs de STI (systèmes et technologies de l'informatique) de 3ème Sciences de l'informatique.

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