Qu'est-ce que les balises d'image HTML?
L'article suivant fournira un aperçu des balises d'image HTML. Je connais son cliché, mais permettez-moi de commencer par dire qu'une image vaut mille mots. Dans le cas des pages Web, c'est particulièrement vrai. Une image peut vendre le visiteur avec votre idée, impressionner quelqu'un pour acheter votre produit et peut aider une page Web à être bien meilleure. Dans ce guide, nous verrons comment ajouter IMG aux pages Web et les aligner correctement en y ajoutant des liens.
Ajout d'images aux pages Web
Vous pouvez ajouter IMG à une page HTML en utilisant le dans le document HTML, voici la syntaxe:
Ici, l'IMG indique au navigateur que la balise consiste à ajouter un IMG au document et que «src =» spécifie où télécharger l'image.
Exemple d'une page avec une image
Example HTML IMG Tag
alt = " Software development icon " height = " 150 " width = "140" />
Voici la sortie du code:
Un fait intéressant à propos de ces pages HTML est que lorsque vous utilisez la balise IMG, l'image n'est pas insérée dans ladite page Web, au lieu de cela, elle crée un espace d'attente où l'image est placée une fois qu'elle est téléchargée.
Prise en charge du navigateur et compatibilité avec les attributs
Comme vous pouvez vous y attendre, tous les navigateurs modernes prennent en charge les images et l'utilisation de balises IMG. Parfois, les navigateurs mobiles redimensionnent l'image pour l'adapter à l'écran si l'image n'est pas définie comme réactive.
En ce qui concerne la compatibilité des attributs avec HTML 4.01 et HTML5 plus récent, la plupart des balises fonctionneront, à l'exception de l'alignement, de la bordure, de hspace et de vspace qui ne sont tout simplement pas pris en charge dans ce dernier.
Images comme lien:
Il y aura des moments où vous voudrez qu'une image fonctionne comme lien vers une autre page. Vous pouvez le faire en ajoutant la balise IMG à l'intérieur de la balise.
Définition d'une image comme arrière-plan d'une page Web
Vous pouvez affecter une image comme image d'arrière-plan d'une page Web en utilisant la propriété CSS background-image dans l'élément Body de la page.
Image de fond
Définition d'une image flottante dans le navigateur
Nous pouvons utiliser la propriété CSS «float» pour définir une image à flotter à l'intérieur n'importe où dans la fenêtre du navigateur. Jetons un coup d'œil à un exemple qui vous aidera à comprendre.
Ici, l'image de la voiture flotte sur le côté droit du texte.
Ici, l'image de la voiture flotte sur le côté gauche du texte.
Attributs de l'étiquette d'image
Voici les attributs d'une balise d'image.
1) Aligner
Valeurs possibles: haut, bas, milieu, gauche ou droite.
L'attribut alight est utilisé pour spécifier l'alignement d'une image sur la page Web.
2) Alt
Type de valeur: texte
Alt est utilisé pour spécifier le texte alternatif d'une image d'une page Web. Dans les cas où l'affichage d'un IMG n'est pas possible, le navigateur affiche ce texte à l'utilisateur. Les moteurs de recherche tels que Google et Bing utilisent ce texte alternatif pour afficher les résultats dans la recherche d'images.
3) Frontière
Type de valeur: Pixels
Il est utilisé pour créer une bordure d'épaisseur définie par l'utilisateur autour de l'image. Cela ne fonctionne pas en HTML5.
4) Origine croisée
Type de valeur: identifiants d'utilisation anonymes
Cet attribut est utilisé lorsque nous voulons spécifier comment les photos d'origine croisée doivent être traitées. Ceci est principalement utilisé dans les cas où des éléments de canevas d'applications Web JavaScript sont utilisés.
5) Hauteur
Type de valeur: pourcentages ou pixels
Évidemment, celui-ci est utilisé pour indiquer la hauteur de l'image dans la page Web HTML.
6) hspace
Type de valeur: Pixels
Non pris en charge en HTML5, l'attribut hspace est utilisé pour spécifier en pixels la quantité d'espace blanc à ajouter à gauche et à droite de l'image insérée.
7) ismap
Type de valeur: URL d'une page
ismap, nous avons utilisé pour définir ladite image comme une carte d'image côté serveur. Lorsque l'utilisateur clique (ou touche) à l'intérieur de l'image, les navigateurs envoient les coordonnées du clic (ou tapotent) au serveur Web sous forme d'URL.
8) Longdesc
Type de valeur: URL
Longdesc est utilisé pour donner une description détaillée d'une image en utilisant une URL. L'URL utilisée dans l'attribut est utilisée comme description de l'image.
9) src
Type de valeur: URL
src signifie source et il est utilisé pour spécifier l'adresse à partir de laquelle le navigateur récupérera l'image, cette URL peut être appliquée à une image à l'intérieur d'un répertoire sur le même serveur et elle peut également stocker une image dans un serveur tiers avec un nom de domaine différent.
10) plan du site
Type de valeur: #mapname
L'attribut usemap est utilisé pour définir l'image d'une carte image côté client. Un plan d'utilisation est toujours utilisé avec des balises HTML de carte et de zone.
11) vspace
Type de valeur: Pixels
Non pris en charge en HTML5, l'attribut Vspace est utilisé pour définir le nombre de pixels à utiliser comme espaces blancs en haut et en bas de l'image sur la page Web.
12) Largeur
Type de valeur: Pixels
Comme son nom l'indique, l'attribut width est utilisé pour spécifier la largeur d'une image à l'intérieur de la page Web HTML.
Conclusion - Balises d'image HTML
Maintenant que nous avons regardé comment les images sont ajoutées dans les pages HTML et comment définir leurs attributs, nous pouvons créer des pages Web attrayantes dans un projet Web.
En plus de simplement ajouter une touche visuelle à une page Web, les images sont précieuses car elles aident également à l'optimisation des moteurs de recherche. L'ajout de balises alt et de descriptions appropriées aux images aide les moteurs de recherche à mieux comprendre le contenu d'une page Web et à améliorer le classement d'une page Web dans de nombreux cas.
Articles recommandés
Ceci est un guide des balises d'image HTML. Nous discutons ici des attributs de la balise image ainsi que de la prise en charge du navigateur et de la compatibilité avec les attributs. Vous pouvez également consulter les articles suivants pour en savoir plus -
- Un guide simple des commandes HTML
- Introduction à ce qu'est XHTML?
- Tutoriels sur les attributs HTML
- Applications et principales utilisations de HTML
- Différents styles de liste en HTML
- Cadres HTML
- Blocs HTML