Le langage HTML | Chapitre 3 – Les images et les médias

Insérer une image dans une page HTML

Pour ajouter une image sur une page HTML, vous devez utiliser la balise <img>. Cette balise est un élément vide, ce qui signifie qu’elle n’a pas de balise de fermeture. Voici un exemple simple :

<img src="chemin/vers/image.jpg" alt="Description de l'image">

Dans cet exemple, src indique le chemin vers l’image que vous souhaitez afficher, tandis que alt fournit une description de l’image pour les personnes qui ne peuvent pas la voir.

Vous pouvez également ajouter des attributs pour définir la taille de l’image. Voici un exemple :

<img src="chemin/vers/image.jpg" alt="Description" width="300" height="200">

Avec width et height, vous pouvez spécifier la largeur et la hauteur de l’image en pixels.

Attributs d’image (taille, légende, etc.)

Il est courant d’ajouter des attributs supplémentaires à la balise <img>. Par exemple, vous pouvez centrer votre image en utilisant CSS. Voici comment vous pourriez le faire :

<div style="text-align:center;"><img src="chemin/vers/image.jpg" alt="Description"></div>

Utiliser une légende pour vos images peut aussi être très utile. Pour ajouter une légende, il est courant d’utiliser la balise <figure> et <figcaption> :

<figure><img src="chemin/vers/image.jpg" alt="Description"><figcaption>Légende de l'image</figcaption></figure>

Intégration de vidéos et d’audio

Pour intégrer des vidéos et de l’audio dans votre page HTML, vous allez utiliser respectivement les balises <video> et <audio>. Voici comment vous pouvez le faire :

<video controls><source src="chemin/vers/video.mp4" type="video/mp4">Votre navigateur ne prend pas en charge la vidéo.</video>

Dans cet exemple, controls ajoute des contrôles pour que l’utilisateur puisse lire, mettre sur pause ou régler le volume de la vidéo. Vous pouvez également ajouter plusieurs sources pour la vidéo :

<video controls><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg">Votre navigateur ne prend pas en charge la vidéo.</video>

Pour l’intégration de l’audio, voici un exemple :

<audio controls><source src="chemin/vers/audio.mp3" type="audio/mpeg">Votre navigateur ne prend pas en charge l'audio.</audio>

Pareillement, vous avec l’attribut controls pour ajouter des contrôles à l’audio. N’hésitez pas à explorer ces balises pour enrichir vos pages web avec des médias interactifs.