Devoir pratique STI n°4 : le site du festival, une page HTML5 avec vidéo et iframe, le menu du site en flexbox et une animation

Exercice 1 : la page du festival (8 pts)

Le festival des lycées veut, sur son site, la page festival.html reliée à la feuille de style style.css du site (elle est écrite à l'exercice 2) :

• un en-tête avec le titre de niveau 1 « Festival des lycées » et un menu de navigation : une liste de trois liens, Programme (programme.html), Billets (billets.html) et Contact (contact.html) ;
• un contenu principal avec une section d'identifiant video qui affiche la vidéo bande-annonce.mp4 avec ses boutons de lecture, large de 480 pixels ;
• une section d'identifiant carte qui affiche la page carte.html dans un cadre (iframe) de titre « Plan d'accès », de 480 pixels sur 300 ;
• un pied de page « © 2026 Festival des lycées ».

• 1) Écrire la page festival.html (6 pts).
• 2) Choisir l'attribut de la balise <video> qui fait chaque chose : la vidéo démarre seule, la vidéo recommence à la fin, les boutons de lecture s'affichent (2 pts).

Exercice 2 : le menu et la bannière en CSS3 (12 pts)

La page d'accueil index.html du site est donnée. Comme festival.html (exercice 1), elle est reliée à la feuille de style style.css :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Festival des lycées</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="festival.html">Le festival</a></li>
      <li><a href="programme.html">Programme</a></li>
      <li><a href="billets.html">Billets</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
  <div class="banniere">
    <p class="nouveau">Nouveau</p>
    <h1>Festival des lycées 2026</h1>
  </div>
</body>
</html>

• 1) Écrire la feuille de style style.css, commune aux deux pages du site, qui donne : a) à la liste du menu (nav ul) un affichage en flexbox, sans puces, sur un fond #17202a ; b) aux liens du menu (sélecteur nav a) un texte blanc, une marge intérieure de 10px et une transition du fond de 0,5 s ; au survol (nav a:hover), un fond #e67e22 ; c) à la bannière (classe banniere) une position relative et une hauteur de 120px ; d) au paragraphe de classe nouveau une position absolue, à 10px du haut et 10px de la droite de la bannière ; e) une animation @keyframes nommée pulse qui grossit l'élément à 1,2 fois sa taille puis le ramène à sa taille (scale), appliquée en boucle, en 2 s, au paragraphe nouveau (9 pts).
• 2) Choisir la valeur de position de chaque élément : placé par rapport à son parent positionné, qui reste au même endroit de l'écran quand on fait défiler la page, décalé par rapport à sa place normale (3 pts).

Correction détaillée

Sujet original écrit pour Mission Carthage, dans le format d'un devoir pratique d'informatique (3ème Sciences de l'informatique, technologies du web). Ce n'est pas un sujet officiel.

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