images html
Les images peuvent améliorer la conception et l’apparence d’une page Web. Si nous voulons utiliser des images dans nos fichiers html, nous pouvons simplement le faire en utilisant la <img>
balise.
L’attribut src
L’attribut src
requis spécifie le chemin d’accès (URL) à l’image.
- Le premier attribut de la balise
<img>
est appelé attributsrc
ousource
.- Si vous comparez à la fois la balise
<img>
et la balise anchor<a>
, l’attribut src agit comme l’attributhref
que nous avons utilisé dans les liens.- L’attribut src est l’endroit où nous spécifions le fichier image.
- Pour cette section, les fichiers se trouvent dans le dossier appelé
images
.- Le fichier image peut être chargé à l’aide de chemins relatifs et absolus, tout comme les balises d’ancrage
insérer une image en html
<img src="./two.png" />
Il s’agit d’un chemin relatif, car nous disons au navigateur de trouver l’image avec le nom ./two.png
../
signifie que nous disons au navigateur de regarder dans le même répertoire/dossier ou dans le même répertoire/dossier actuel.
L’attribut alt
- L’attribut
alt
requis fournit un texte alternatif pour une image - Un autre attribut important pour les images est appelé
alt
qui signifie texte alternatif. - Ce texte sera utilisé pour décrire de quoi parle l’image que nous utilisons.
- Lorsque le navigateur ne peut pas charger l’image, le texte alternatif apparaîtra sur le navigateur.
<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" title="Some Wonderful Title for Image" />
L’attribut de titre de l’image
Vous pouvez également ajouter des attributs de titre aux images, pour fournir des informations supplémentaires si nécessaire.
<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
Taille de l’image – width et height
Vous pouvez utiliser l’attribut style pour spécifier la width
et la height
d’une image.
<img src="./img/2.png" alt="Some Alternative Text" style="width:300px;height:300px;" /> />
image d’insertion html
Vous pouvez utiliser les attributs width
et height
.
<img src="./img/2.png" width="300" height="300" alt="Some Alternative Text" />
note: Il définit toujours la largeur et la hauteur de l’image en pixels.
Utiliser une image comme lien
Pour utiliser une image comme lien, il suffit de mettre la <img>
balise à l’intérieur de la <a>
balise.
<a href="url"> <img src="/2.png" alt="CJ" /> </a>
Quelques formats d’image couramment utilisés
Abréviation | Format de fichier | Extension De Fichier |
---|---|---|
APNG | Animated Portable Network Graphics | .apng |
GIF | Graphics Interchange Format | .gif |
ICO | Microsoft Icon | .ico, .cur |
JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
PNG | Portable Network Graphics | .png |
SVG | Scalable Vector Graphics | .svg |
Avertissement : La plupart des images sont protégées par le droit d’auteur. N’affichez pas d’image sur votre page Web, sauf si
- Vous êtes propriétaire de l’image.
- Vous avez l’autorisation du propriétaire de l’image.