Explication détaillée de l'utilisation de base de la balise d'image img dans la production de pages HTML/XHTML_HTML/Xhtml_Web

La balise image permet d'afficher une image sur une page web.
Balise d'image HTML/XHTML
En XHTML, la balise est une balise non appariée.

Syntaxe de base :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <img src="url" />

La balise

détermine la source de l'image via l'attribut src, et l'url est une adresse d'image relative ou absolue.

Attributs de la balise d'image :
src : source de l'image, obligatoire. Spécifiez l'adresse source de l'image affichée, qui peut être une adresse relative ou une adresse absolue.
alt : texte alternatif, peut être omis. Il est utilisé pour remplacer le texte affiché lorsque l'image ne peut pas être affichée ou que le navigateur bloque l'image.
titre : texte d'invite de l'image, peut être omis. Lorsque la souris survole l'image, le texte pertinent s'affichera.
width : La largeur de l’affichage de l’image peut être omise. Les unités sont des pixels.
hauteur : La hauteur de l'affichage de l'image, qui peut être omise. Les unités sont des pixels.

Attribut de remplacement de texte (alt)
Attribut de remplacement de texte de la balise d'image alt Bien qu'il ne s'agisse pas d'un attribut obligatoire, c'est un attribut très important. Lorsque le navigateur ne parvient pas à lire l'image pour une raison quelconque, ce texte alternatif s'affichera pour remplacer l'image d'origine afin de fournir les informations pertinentes perdues sur l'image. Cet attribut aide également les utilisateurs utilisant des navigateurs texte uniquement à comprendre le contenu de la page.
Par conséquent, c'est une bonne pratique d'ajouter un attribut de remplacement de texte alternatif significatif à chaque image.

Pratique d'utilisation des balises
Créez un dossier images sous le dossier e:html pour stocker les fichiers image. Cliquez avec le bouton droit sur l'image ci-dessous et sélectionnez "Enregistrer l'image sous" pour enregistrer l'image dans le dossier images pour une utilisation ultérieure.

Modifiez notre petit exemple XHTML 1.html et apportez les modifications suivantes dans la balise div avec id="main-content" :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <h3>Titre de l'articleh3 >
2. <p>Contenu détaillé de l'article p>
3. <p><img src="images/flower_1.jpg" alt= "Fleurs" />p>

De cette façon, nous affichons une image sur la page Web.

Spécifiez la taille d'affichage de l'image
Vous pouvez ajouter des attributs de largeur ou de hauteur à la balise pour spécifier manuellement la taille d'affichage de l'image :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <img src="images/flower_1.jpg " alt="fleur" largeur= "350" hauteur="270" />

Conseils
Dans des circonstances normales, l'attribut de taille de l'image sera ignoré et la taille de l'image originale sera affichée par défaut ou le navigateur adaptera l'affichage de la taille. La spécification d’une taille d’affichage d’image inappropriée peut entraîner une distorsion de l’image.
Comme le chargement des images prend un certain temps, vous devez essayer de réduire la taille de l'image tout en garantissant la qualité de l'image pour obtenir une bonne expérience d'accès utilisateur.

Lecture étendue
Pixel : nous pouvons clairement considérer un pixel comme le plus petit point qu'un ordinateur peut afficher. Par exemple, la résolution d'écran que nous disons souvent est de 1024*768. l'écran comporte 1024 points (pixels) horizontalement et 768 points (pixels) verticalement. Lorsqu'il est utilisé comme unité, il est généralement écrit par défaut sous la forme pix.