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).