HTML & CSS

Support de cours élaboré par : Youssef CHAFAI

Date : 18 mai 2025 | Version : 1.0

Exercices HTML – Section 5 : Médias

Exercice 1 – Insérer une image simple

Insérez une image en utilisant la balise <img>. N'oubliez pas l'attribut alt.

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Simple</title>
</head>
<body>
  <img src="https://placehold.co/300x200/0077cc/white?text=Image+Exemple" alt="Une image d'exemple avec du texte">
</body>
</html>

Exercice 2 – Image responsive avec srcset

Utilisez l'attribut srcset pour proposer différentes tailles d'une image en fonction de la largeur de la fenêtre.

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Responsive</title>
</head>
<body>
  <img src="https://placehold.co/480x320/0077cc/white?text=Petit"
       srcset="https://placehold.co/1024x682/0077cc/white?text=Grand 1024w,
               https://placehold.co/480x320/0077cc/white?text=Petit 480w"
       alt="Image responsive montrant différentes tailles">
</body>
<html>

Exercice 3 – Insérer un fichier audio

Ajoutez un lecteur audio à la page en utilisant la balise <audio> et l'attribut controls.

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio</title>
</head>
<body>
  <audio controls>
    <source src="placeholder-audio.mp3" type="audio/mpeg">
    <source src="placeholder-audio.ogg" type="audio/ogg">
    Votre navigateur ne supporte pas la balise audio.
  </audio>
</body>
<html>

Exercice 4 – Insérer une vidéo

Ajoutez un lecteur vidéo à la page en utilisant la balise <video>, les attributs width, height, controls, et plusieurs sources.

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vidéo</title>
</head>
<body>
  <video width="640" height="360" controls>
    <source src="placeholder-video.mp4" type="video/mp4">
    <source src="placeholder-video.webm" type="video/webm">
    Votre navigateur ne supporte pas la balise vidéo.
  </video>
</body>
<html>

Exercice 5 – Vidéo avec sous-titres

Reprenez la vidéo de l'exercice précédent et ajoutez une piste de sous-titres en français en utilisant la balise <track>.

<!-- Votre code ici -->

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vidéo avec Sous-titres</title>
</head>
<body>
  <video width="640" height="360" controls>
    <source src="placeholder-video.mp4" type="video/mp4">
    <source src="placeholder-video.webm" type="video/webm">
    <track src="placeholder-subtitles-fr.vtt" kind="subtitles" srclang="fr" label="Français">
    Votre navigateur ne supporte pas la balise vidéo.
  </video>
</body>
<html>
```
↑ Sommaire