Phase 1 — Les fondamentaux HTML
#3 Éléments média
img, video, audio, figure
Les images
La balise <img> intègre des images dans votre page. C'est une balise auto-fermante avec deux attributs obligatoires :
Image de base
<img src="photo.jpg" alt="Un beau paysage">
<!-- Avec dimensions explicites -->
<img src="photo.jpg" alt="Un paysage" width="800" height="600">
<!-- Image responsive avec srcset -->
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
alt="Un paysage responsive"
>Incluez toujours l'attribut alt — il décrit l'image pour les lecteurs d'écran et s'affiche si l'image ne charge pas.
Vidéo et audio
Vidéo
<video controls width="640" poster="miniature.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Votre navigateur ne supporte pas la balise vidéo.
</video>Audio
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
<source src="podcast.ogg" type="audio/ogg">
Votre navigateur ne supporte pas l'audio.
</audio>Figure et figcaption
Figure avec légende
<figure>
<img src="graphique.png" alt="Graphique des ventes">
<figcaption>Figure 1 : Données de ventes T4 2024</figcaption>
</figure>Intégrer du contenu externe
iframe
<!-- Intégrer une vidéo YouTube -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Titre de la vidéo"
allow="accelerometer; autoplay; clipboard-write"
allowfullscreen
></iframe>À vous de jouer
Essayez les commandes ci-dessous :
terminal — browser