1.1 Élément <img>
Le multimédia en HTML joue un rôle important dans l'amélioration de la perception visuelle des pages web. L'insertion d'images est l'un des aspects clés du multimédia en HTML. Le plus souvent, l'élément <img> est utilisé pour cela. Regardons-le de plus près :
L'élément <img> est conçu pour insérer des images dans une page web. C'est un élément vide : il n'a pas de balise de fermeture et comprend uniquement des attributs.
Syntaxe
<img src="URL_de_l_image" alt="Description" width="Largeur" height="Hauteur">
<img src="images/photo.jpg" alt="Description de l'image" width="500" height="300">
Examinons les attributs de l'élément <img> un peu plus en détail
1.2 Attribut src
Le nom complet de l'attribut src est source (source).
L'attribut src spécifie le chemin du fichier image qui doit être affiché sur la page. Cela peut être un chemin absolu ou relatif.
Exemples :
URL Absolue :
<img src="https://example.com/images/photo.jpg">
Chemin relatif :
<img src="images/photo.jpg">
Une URL absolue contient l'adresse complète de l'image, y compris le protocole (http ou https), le domaine et le chemin. Un chemin relatif indique l'emplacement du fichier par rapport au document actuel, ce qui est pratique lorsque vous travaillez avec des fichiers locaux.
1.3 Attribut alt
Nom complet : alternative text (texte alternatif)
L'attribut alt fournit une description textuelle de l'image. Ce texte est affiché si l'image ne peut pas être chargée, et est utilisé pour améliorer l'accessibilité, car les lecteurs d'écran l'utilisent pour décrire l'image aux utilisateurs malvoyants.
Exemples :
<img src="images/sunset.jpg" alt="Photo d'un beau coucher de soleil">
Un texte alternatif bien rédigé aide les utilisateurs à comprendre le contenu de l'image si elle n'est pas disponible, et contribue à améliorer le SEO (optimisation pour les moteurs de recherche) de la page.
1.4. Attribut width
L'attribut width définit la largeur de l'image en pixels. Si l'attribut height n'est pas spécifié, l'image conserve ses proportions lors du changement de largeur.
Exemples :
<img src="images/photo.jpg" width="500">
L'utilisation d'une largeur fixe peut être utile pour contrôler la taille de l'image, mais il est important de tenir compte de la réactivité du design.
1.5 Attribut height
L'attribut height définit la hauteur de l'image en pixels. Si l'attribut width n'est pas spécifié, l'image conserve ses proportions lors du changement de hauteur.
Exemples :
<img src="images/photo.jpg" height="300">
De la même manière que l'attribut width, l'utilisation d'une hauteur fixe peut être utile, mais il est nécessaire de tenir compte de la réactivité.
Exemple d'utilisation des attributs ensemble
<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e" src="https://cdn.codegym.cc/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg" alt="sunset">
<img src="images/sunset.jpg" alt="Photo d'un beau coucher de soleil" width="500" height="300">
Dans cet exemple, l'image sera chargée à partir du fichier images/sunset.jpg, affichée avec une largeur de 500 pixels et une hauteur de 300 pixels, et au cas où l'image ne se charge pas, le texte "Photo d'un beau coucher de soleil" sera affiché.
GO TO FULL VERSION