Scribd
Importer
34 vues3 pages

Insérer et optimiser des images HTML

Transféré par

rida.net.ninja
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd
34 vues3 pages

Insérer et optimiser des images HTML

Transféré par

rida.net.ninja
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats DOCX, PDF, TXT ou lisez en ligne sur Scribd

Images

Maintenant que vous savez gérer les textes, nous allons voir
comment insérer des images dans notre contenu.

LA BALISE IMAGE
La balise image est une balise autofermée de type inline. Voilà à quoi elle ressemble :

<img />
Pour y insérer une image, il nous faudra utiliser l'attribut src et y mettre le lien vers notre
fichier :
<img src="images/mon_image.jpg" />
Voilà mon image affichée :

Notez que mon image est placée dans le dossier images. C'est pourquoi le lien vers celle-ci
est : images/mon_image.jpg.
Il est possible d'insérer différents types de fichiers dans la balise <img />. Voilà les plus
utilisés :
 .jpg
 .png
 .gif
 .svg

LES ATTRIBUTS EXISTANTS POUR LA


BALISE IMAGE
En plus de l'attribut src, il est possible d'ajouter à notre balise plusieurs autres :

L'ATTRIBUT ALT
Cet attribut sert de texte de remplacement si, pour une raison X ou Y, l'image ne peut pas
s'afficher.
Elle est aussi utile aux moteurs de recherche pour indexer les images.
Enfin, les liseuses de site (pour les mal-voyant) lisent cet attibut pour remplacer les images.

<img src="images/mon_image.jpg" alt="Nicolas AUNE debout sur une dune dans le


désert du Sahara" />

L'ATTRIBUT HEIGHT ET WIDTH


Cet attribut permet de définir une taille (largeur et longueur) à notre image :

<img src="images/mon_image.jpg" width="425" height="283" alt="Nicolas AUNE debout


sur une dune dans le désert du Sahara" />
Voilà notre image avec une taille définie par nos attributs :
Il existe d'autres attributs qui rendent nos images responsives. Elles seront vues dans le
cours Les balises images de la section Responsive.

Vous aimerez peut-être aussi