Maison >interface Web >tutoriel HTML >Balises d'images HTML
Balises d'images HTML
- WBOYoriginal
- 2024-09-04 16:20:161344parcourir
HTML est un document en texte brut qui permet à plusieurs formats de langages de programmation d'implémenter des applications Web, qui utilisent des balises pour décrire les fonctionnalités des pages Web. L'une de ces balises essentielles est la balise d'image qui permet aux développeurs d'incorporer des fichiers image dans le code pour afficher les images respectives sur la page Web. Cette syntaxe est , où 'image' est le nom de la balise et 'src=' doit se voir attribuer l'URL de l'image requise. Dans cette rubrique, nous allons découvrir les balises d'image HTML.
Ajout d'images aux pages Web
Vous pouvez ajouter un IMG à une page HTML en utilisant le bouton balise dans le document HTML ; voici la syntaxe :
<img src= enter the IMG URL here >
Ici, l'IMG indique au navigateur que la balise concerne l'ajout d'un IMG au document, et le « src= » précise où télécharger l'image.
Exemple de page avec une image
Code :
<!DOCTYPE html> <html> <head> <title> Example HTML IMG Tag </title> </head> <body> <img src = " https://cdn.educba.com/academy/wp-content/uploads/2019/02/Software-Dev.jpg" alt = " Software development icon " height = " 150 " width = "140" /> </body> </html>
Sortie :
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, il crée un espace de stockage où l'image est placée une fois 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.
Concernant 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 l'hspace et de l'espace, qui ne sont tout simplement pas pris en charge dans cette dernière.
Images en lien :
Parfois, vous souhaiterez qu'une image fonctionne comme un lien vers une autre page. Vous pouvez le faire en ajoutant la balise IMG à l'intérieur du champ étiquette.
Définir une image comme arrière-plan d'une page Web
En utilisant la propriété CSS background-image dans l'élément Body de la page, vous pouvez attribuer une image comme image d'arrière-plan d'une page Web.
<body style="background-image:url(‘car.jpg');"> <h1>Background Image </h1> </body>
Définir une image pour qu'elle flotte dans le navigateur
Nous pouvons utiliser la propriété CSS « float » pour définir une image qui flotte à l'intérieur n'importe où dans la fenêtre du navigateur. Regardons un exemple qui vous aidera à comprendre.
<p> <img src="car.png" alt="Ferrari Car " style="float: right; width:40px; height: 40px;">
Ici, l'image de la voiture flottera à droite du texte.
<p><img src=" car.png " alt=" Ferrari Car " style="float: left; width: 40px; height: 40px;">
Ici, l'image de la voiture flottera sur le côté gauche du texte.
Attributs de la balise 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 de page Web. Dans les cas où l'affichage d'un IMG est impossible, 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 :Utilisation anonyme-Credentials
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
Celui-ci est utilisé pour désigner 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 image cliquable côté serveur. Lorsque l'utilisateur clique (ou appuie) à l'intérieur de l'image, les navigateurs envoient les coordonnées du clic (ou de l'appui) au serveur Web sous forme d'URL.
8) Longuedesc
Type de valeur : URL
Longdesc donne une description détaillée d'une image à l'aide d'une URL. L'URL dans l'attribut est utilisée comme description de l'image.
9)src
Type de valeur : URL
src signifie source. Il permet de préciser l'adresse à partir de laquelle le navigateur récupérera l'image ; cette URL peut être appliquée à une image dans un répertoire sur le même serveur. Il peut également stocker une image sur un serveur tiers avec un nom de domaine différent.
10) utiliser la carte
Type de valeur : #mapname
L'attribut usemap définit l'image pour une image cliquable côté client. Un usemap est toujours utilisé avec les 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 utilisés comme espaces 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 vu comment les images sont ajoutées aux pages HTML et comment définir leurs attributs, nous pouvons créer des pages Web attrayantes dans un projet Web.
En plus d'ajouter simplement une touche visuelle à une page Web, les images sont précieuses car elles contribuent à 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.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!