Historique des conversations
Chargement...
Chapitre 8 : Images, audio et vidéo en HTML
Chapitre 8 : Insertion d’images, audio et vidéo en HTML
Insérer une image
On utilise la balise <img> pour afficher une image :
<img src="image.jpg" alt="Description de l'image" width="300">Insérer un fichier audio
Utilisez la balise <audio> avec l’attribut controls :
<audio controls>
<source src="musique.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'audio HTML5.
</audio>Insérer une vidéo
Utilisez la balise <video> avec les attributs controls, width et poster (image de couverture) :
<video width="400" controls poster="image-couverture.jpg">
<source src="video.mp4" type="video/mp4">
Votre navigateur ne supporte pas la vidéo HTML5.
</video>Formats supportés
- Images :
.jpg,.png,.gif,.webp,.svg - Audio :
.mp3,.ogg,.wav - Vidéo :
.mp4,.webm,.ogg
Évaluation des acquis
Correction immédiate
Quiz du chapitre 8
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Image simple
Atelier #1Affiche une image 'chat.jpg' avec une description alternative 'Mon chat'.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<img src="chat.jpg" alt="Mon chat">
#2 — Image redimensionnée
Atelier #2Affiche une image avec une largeur de 300 pixels.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<img src="photo.jpg" alt="Photo" width="300">
#3 — Audio
Atelier #3Intègre un fichier audio 'son.mp3' avec des contrôles de lecture.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<audio controls>
<source src="son.mp3" type="audio/mpeg">
Votre navigateur ne supporte pas l'audio.
</audio>
#4 — Vidéo
Atelier #4Intègre une vidéo 'film.mp4' avec contrôles, largeur 400px.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<video width="400" controls>
<source src="film.mp4" type="video/mp4">
Votre navigateur ne supporte pas la vidéo.
</video>
#5 — Figure et Figcaption
Atelier #5Associe une légende 'Schéma 1' à une image en utilisant figure.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
<figure>
<img src="schema.png" alt="Schéma">
<figcaption>Schéma 1</figcaption>
</figure>