La balise HTML img est utilisée pour afficher l’image sur la page Web. La balise HTML img est une balise vide ne contenant que des attributs. Les balises de fermeture ne sont pas utilisées dans l’élément image HTML.
Voyons un exemple d’image HTML.
<h2>Exemple d’image HTML</h2> <img src="bonjour.jpg" alt="Bonjour tout le monde"/>
Résultat :
Exemple d’image HTML
Attributs de la balise img
Les attributs src et alt sont des attributs importants de la balise HTML img. Tous les attributs de balise d’image HTML sont donnés ci-dessous.
1) src
C’est un attribut nécessaire qui décrit la source ou le chemin de l’image. Il indique au navigateur où chercher l’image sur le serveur.
L’emplacement de l’image peut se trouver sur le même répertoire ou sur un autre serveur.
2) alt
L’attribut alt définit un autre texte pour l’image, s’il ne peut pas être affiché. La valeur de l’attribut alt décrit l’image en mots. L’attribut alt est considéré comme bon pour le référencement potentiel.
3) width
C’est un attribut facultatif utilisé pour spécifier la largeur d’affichage de l’image. Ce n’est pas recommandé maintenant. Vous devez appliquer CSS à la place de l’attribut width.
4) height
C’est h3 la hauteur de l’image. L’attribut HTML height prend également en charge les éléments iframe, image et object. Ce n’est pas recommandé maintenant. Vous devez appliquer CSS à la place de l’attribut height.
Utilisation de l’attribut height et width avec la balise img
Vous avez appris à insérer une image dans votre page Web. Désormais, si nous voulons donner une hauteur et une largeur à l’affichage de l’image en fonction de nos besoins, nous pouvons le définir avec les attributs hauteur et largeur de l’image.
Exemple:
<img src="animal.jpg" height="180" width="300" alt="animal image">
Résultat :
Utilisation de l’attribut alt
Nous pouvons utiliser l’attribut alt avec la balise. Il affichera un texte alternatif au cas où l’image ne pourrait pas être affichée sur le navigateur. Voici l’exemple d’attribut alt:
<img src="animal.png" height="180" width="300" alt="animal image">
Résultat :
Comment obtenir une image d’un autre répertoire / dossier ?
Pour insérer une image dans votre site Web, cette image doit être présente dans le même dossier que celui dans lequel vous avez placé le fichier HTML. Mais si dans certains cas, l’image est disponible dans un autre répertoire, vous pouvez accéder à l’image comme ceci:
<img src="E:/images/animal.png" height="180" width="300" alt="animal image">
Dans la déclaration ci-dessus, nous avons placé l’image sur le disque local E ——> dossier images ——> animal.png.
Utiliser une image comme un lien hypertexte
Nous pouvons également lier une image à une autre page ou utiliser une image en tant que lien. Pour ce faire, insérez la balise <img> dans la balise <a>.
Exemple:
<a href="https://w3tutoriels.com/la-robotique"><img src="robot.jpg" height="100" width="100"></a>