Articles
Introduction à HTML
Balises liées aux médias

Balises liées aux médias

Cet article explique les balises liées aux médias.

Explique comment décrire des images, des vidéos, des audios, etc. en HTML, ainsi que les éléments repliables et les cadres en ligne.

YouTube Video

Balises liées aux médias

Balise <img>

Description of the image 
1<img src="/images/image.jpg" alt="Description of the image" width="200">
  • La balise <img> est utilisée pour intégrer des images. L'attribut src spécifie le chemin de l'image, et l'attribut alt fournit une description lorsque l'image ne peut pas être affichée.

Balises <figure> et <figcaption>

A beautiful scenery
A beautiful scenery
1<figure>
2    <img src="/images/image.jpg" alt="A beautiful scenery" width="200">
3    <figcaption>A beautiful scenery</figcaption>
4</figure>
  • La balise <figure> regroupe des contenus multimédias comme des images ou illustrations avec une légende en utilisant la balise <figcaption>.

Balise <picture>

Responsive image 
1<picture>
2    <source media="(min-width: 800px)" srcset="/images/large.jpg">
3    <source media="(min-width: 400px)" srcset="/images/medium.jpg">
4    <img src="/images/small.jpg" alt="Responsive image" width="200">
5</picture>

  • La balise <picture> est utilisée pour prendre en charge les images adaptatives, permettant de sélectionner l'image appropriée en fonction de différentes conditions d'affichage.

  • L'attribut media spécifie des conditions au même format que les requêtes media CSS.

    • Vous pouvez spécifier des conditions telles que la largeur minimale (min-width), la largeur maximale (max-width) ou l'orientation de l'écran (orientation).

  • Dans cet exemple, les images suivantes sont affichées en fonction de la largeur de l'écran.

    • Si la largeur de l'écran est de 800px ou plus, large.jpg est affiché.
    • Si la largeur de l'écran est de 400px ou plus mais inférieure à 800px, medium.jpg est affiché.
    • Si la largeur de l'écran est inférieure à 400px, small.jpg (l'image dans la balise <img>) est affiché.

Balise <canvas> 

1<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000;"></canvas>
2<script>
3    var canvas = document.getElementById('myCanvas');
4    var ctx = canvas.getContext('2d');
5    ctx.fillStyle = "#FF0000";
6    ctx.fillRect(10, 10, 150, 100);
7</script>
  • La balise <canvas> fournit une région où des graphiques dynamiques peuvent être dessinés en utilisant JavaScript.

Balise <map>

Example Map Area 1 
1<img src="/images/example.jpg" usemap="#example-map" alt="Example Map">
2<map name="example-map">
3    <area shape="rect" coords="34,44,270,350" alt="Area 1" href="https://codesparklab.com">
4</map>
  • La balise <map> est utilisée pour définir une carte d'image. Les zones cliquables dans la carte sont définies en utilisant la balise <area>. Cela permet à des parties spécifiques d'une image d'être cliquables, menant à un lien.
  • Spécifiez le nom de l'élément de carte associé (balise <map>) dans l'attribut usemap de la balise <img>, en le précédant du caractère #.
  • En spécifiant correctement l'attribut alt de la balise <area>, vous pouvez améliorer l'accessibilité pour les utilisateurs malvoyants.

Balise <embed> 

1<embed src="movie.mp4" width="300" height="200">
  • La balise <embed> est utilisée pour intégrer du contenu externe tel que des PDFs, des vidéos ou de l'audio.

Balise <video> 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • La balise <video> est utilisée pour intégrer du contenu vidéo. Vous pouvez spécifier plusieurs formats en utilisant la balise <source>.
1<video controls width="300" preload="none">
2    <source src="movie.mp4" type="video/mp4">
3    <source src="movie.ogg" type="video/ogg">
4    Your browser does not support the video tag.
5</video>
  • L'attribut preload permet de spécifier combien d'une vidéo doit être chargée par le navigateur avant le début de la lecture.
    • auto indique au navigateur de précharger l'intégralité du média. Cela peut réduire le délai au début de la lecture, mais des données peuvent être téléchargées même si l'utilisateur ne lit pas le média.
    • metadata charge uniquement les métadonnées du média (par exemple, durée, informations sur les pistes). Les données du média ne sont chargées que lorsque l'utilisateur commence la lecture. Cela convient lorsque vous avez besoin d'informations sommaires sur le média.
    • none ne précharge pas le fichier multimédia. Le fichier multimédia ne télécharge pas les ressources avant le début de la lecture. Cela convient lorsque vous souhaitez minimiser l'utilisation des données.

Balise <audio> 

1<audio controls>
2    <source src="sound.mp3" type="audio/mpeg">
3    <source src="sound.ogg" type="audio/ogg">
4    Your browser does not support the audio element.
5</audio>
  • La balise <audio> est utilisée pour intégrer du contenu audio. La balise <source> prend en charge plusieurs formats.
  • Comme pour la balise <video>, l'attribut preload peut être utilisé pour spécifier combien d'audio doit être chargé avant le début de la lecture.

Balise <track> 

1<video controls width="300">
2    <source src="movie.mp4" type="video/mp4">
3    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
4    <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
5    Your browser does not support the video tag.
6</video>
  • La balise <track> est utilisée pour spécifier des pistes de texte telles que les sous-titres et légendes. Elle peut être utilisée à l'intérieur des balises <audio> ou <video>.
  • L'attribut kind permet de spécifier l'objectif de la piste (par exemple, sous-titres, légendes, chapitres, etc.). Vous pouvez spécifier les valeurs suivantes.
    • subtitles fournit des sous-titres qui traduisent le contenu de la vidéo ou de l'audio, ou le rendent plus compréhensible pour les spectateurs. Son objectif principal est la traduction directe de l'audio.
    • captions fournissent des informations supplémentaires telles que la musique et les effets sonores pour les personnes sourdes ou malentendantes, en plus de l'audio.
    • descriptions sont des pistes qui décrivent le contenu visuel d'une vidéo, comme les actions et les paysages, pour les personnes malvoyantes.
    • chapters fournissent des marqueurs de chapitre (titres de chapitre) pour indiquer des points spécifiques dans la vidéo.
    • metadata fournit des informations supplémentaires pour l'analyse ou le traitement du média, mais elles ne sont pas affichées aux utilisateurs.

Balise <iframe> 

1<iframe src="https://codesparklab.com" width="300" height="200"></iframe>
  • La balise <iframe> est utilisée pour intégrer d'autres pages HTML ou du contenu externe (tel que des sites web, des vidéos ou des documents) dans la page actuelle. Elle est souvent utilisée pour intégrer des vidéos YouTube sur une page.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Balises relatives aux tableauxBalises liées aux formulaires