Insérez Des Images

17/03/2024 21:25 Insérez des images - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms
LM
Accueil > Cours > Créez votre site web avec HTML5 et CSS3 > Insérez des images
Créez votre site web avec HTML5 et CSS3
15 heures  Facile
Mis à jour le 22/02/2024
 
Insérez des images
05:54
Insérez une image avec la balise orpheline <img>


La balise qui permet d'insérer une image est une balise orpheline : <img>
Pour fonctionner correctement, la balise <img> doit être accompagnée de deux attributs :
1. src : cet attribut permet d'indiquer la source de l'image.
https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3/8061269-inserez-des-images 1/8
2. alt : cet attribut permet de donner à l'image une description alternative.
Ajoutez l'attribut src pour indiquer la source de l'image
La source de l'image est précisée avec l'attribut src pour indiquer au navigateur comment récupérer
l'image que l'on veut insérer. De la même manière qu'un lien hypertexte, on peut indiquer la source d'une
image :
…avec un chemin absolu si l'image vient d'internet
On utilise un chemin absolu pour indiquer la source d'une image lorsque celle-ci est en ligne, sur un site,
ou qu'elle est hébergée sur le web. On copie colle donc simplement l'URL de l'image.
Regardez ce que ça donne dans le CodePen P1C6.
Lorsque vous utilisez cette technique, faites attention à ce que l'URL corresponde bien à l'image
uniquement, et pas à une page web qui contient une image. Pour vous en assurer, vous pouvez
faire un clic droit sur l'image de votre choix, et choisir "Copier l'adresse de l'image".
…ou avec un chemin relatif si l'image est en local sur votre ordinateur
C'est ce que l'on fait si l'image est sur notre ordinateur : on utilise alors le nom et l'arborescence du
fichier de l'image en local pour indiquer sa source.
Si l'image est dans un sous-dossier nommé images , on précise : src="images/logo.png"
Évitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de dossiers.
Par exemple, voici un chemin qui va poser problème :
Images du site/Image toute bête.jpg
Il faut idéalement :
supprimer les espaces (ou les remplacer par le symbole _ ) et les accents ;
tout mettre en minuscules, comme ceci : images_du_site/image_toute_bete.jpg .
Si votre image ne s'affiche pas, c'est très certainement parce que le chemin est incorrect ! Simplifiez au
maximum vos noms de fichiers et de dossiers, et tout ira bien.
Voici un exemple d'insertion d'image :
html
1 
2 Voici une très belle photo que j'ai trouvée sur Unsplash : 
3 <img src="images/paysage.jpg" alt="Photo de plage vue du dessus" />
4 
Ah tiens c'est quoi ce alt là ?
Voilà qui nous fait une belle transition vers la suite de ce chapitre !
Ajoutez l'attribut alt pour donner à l'image une description alternative
Donner une decription alternative à une image est une bonne pratique !
C'est-à-dire ? Je ne comprends pas ce que c'est une description alternative.
Une description alternative est un court texte qui décrit ce que contient l'image. Ce texte alternatif sera :
inscrit à la place de l'image si elle ne peut pas être affichée au moment du chargement de la page
web (cela arrive) ;
audio-décrit par les navigateurs de personnes présentant un handicap (trouble de la vue, non-
voyants).
Cela contribue donc à améliorer ce que l'on appelle l'accessibilité d'un site web. En plus, cela aide les
robots des moteurs de recherche pour trouver des images.
D'ailleurs, j'en profite pour faire une petite parenthèse sur les formats d'image !
Choisissez le bon format d'image

Voici quel format adopter en fonction de l'image que vous avez : 
Une photo : utilisez un JPEG.
N'importe quelle image avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits, ou
éventuellement un GIF.
N'importe quelle image avec beaucoup de couleurs : utilisez un PNG 24 bits.
Une image animée : utilisez un GIF animé.
Un logo vectoriel : utilisez un SVG (vous pouvez en apprendre davantage sur le SVG dans le cours
"Codez un site web accessible avec HTML et CSS").
Prenez l'habitude d'enregistrer vos fichiers avec des noms en minuscules, sans espace ni accent.
C’est une bonne pratique à mettre en place dès le début. Vous pouvez remplacer les espaces par
le caractère underscore _ . Par exemple : mon_image.png
Ajoutez une infobulle avec l'attribut title

Afin d'afficher une bulle d'aide sur vos images, vous pouvez utiliser l'attribut title ; (à ne pas
confondre avec la balise title qui permet d'indiquer au navigateur le titre d'une page web).
L'attribut title est facultatif, contrairement à alt .
Voici ce que cela peut donner :

html
1 <img src="montagnes.png" title="Alors, envie de vous balader n'est-ce pas ?" alt="Chemin de
randonnée au milieu des montagnes">
Le visiteur du site, n'aura qu'à survoler la photo avec la souris pour voir l'infobulle "Alors, envie de vous
balader n'est-ce pas ?" apparaître par dessus l'image.
Créez une miniature cliquable

Si votre image est très grosse, il est conseillé d'en afficher la miniature cliquable sur votre site. De cette
manière vos pages web mettront moins de temps à s'afficher. Si vos visiteurs souhaitent voir vos images
en taille originale, ils n'auront qu'à cliquer dessus.
Pour ce faire, il faut disposer de deux versions d’une photo : l'image d'origine, et une version de cette
image moins lourde (donc plus petite).
Voyons voir comment faire en sorte que la miniature soit cliquable :
1. placez vos deux images dans un dossier appelé par exemple images .
2. Faites afficher la version montagne_mini.jpg sur une page,
3. et faites un lien vers la version montagne.jpg .
L'image agrandie s'affiche alors lorsqu'on clique sur la miniature.
Voici le code HTML qu’on peut utiliser pour cela :

html
1 Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus ! 
2 <a href="images/montagne.jpg"><img src="images/montagne_mini.jpg" alt="Chemin de randonnée
au milieu des montagnes" title="Cliquez pour agrandir" ></a>
3 
Parfois, certains navigateurs choisissent d'afficher un cadre bleu (ou violet) pas très esthétique
autour de votre image cliquable. Nous pourrons retirer ce cadre dans peu de temps grâce au
CSS.
À vous de jouer

Vous allez maintenant pouvoir enrichir le portfolio de Robbie Lens. Pour cela, vous devrez :
remplacer les liens Twitter et Instagram en bas des pages "À propos" et "Accueil" par les icônes
correspondantes ;
insérer l'image de Robbie Lens sur la page d'accueil (le fichier s'appelle robbie-lens.png );
afficher tout en haut et tout en bas de la page le logo qui renvoie sur la page d'accueil grâce à un
lien.
Vous trouverez toutes les images nécessaires pour cet exercice directement dans la base de code, dans
le dossier /images .
Comme pour les chapitres précédents, vous trouverez la base de code pour démarrer l'exercice
sur la branche P1C6-exercice, et la solution sur la branche P1C6-solution par ici !
En résumé

Il existe plusieurs formats d'images adaptés au Web : PNG, JPG…
On insère une image avec la balise <img> .
<img> doit obligatoirement comporter au moins ces deux attributs : src (source de l'image)
et alt (courte description de l'image).
Il est possible d'afficher une autre version d'une image grâce à un lien qui entoure l’image.
Et voilà, vous avez maintenant terminé la première partie de ce cours : un grand bravo à vous ! Vous avez
hâte de vous attaquer au CSS ? J’en suis sûr ! Mais avant de plonger dans le monde merveilleux de la
mise en forme, passez le quiz !
Indiquer que ce chapitre n'est pas terminé
Et si vous obteniez un diplôme OpenClassrooms ?
Formations jusqu’à 100 % financées
Date de début flexible

Insérez Des Images - Créez Votre Site Web Avec HTML5 Et CSS3 - OpenClassrooms

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Insérez Des Images - Créez Votre Site Web Avec HTML5 Et CSS3 - OpenClassrooms

Transféré par

Droits d'auteur :

Formats disponibles

17/03/2024 21:25 Insérez des images - Créez votre site web avec HTML5 et CSS3 - OpenClassrooms

Créez votre site web avec HTML5 et CSS3

Mis à jour le 22/02/2024

Insérez une image avec la balise orpheline <img>

1. src : cet attribut permet d'indiquer la source de l'image.

2. alt : cet attribut permet de donner à l'image une description alternative.

Ajoutez l'attribut src pour indiquer la source de l'image

…avec un chemin absolu si l'image vient d'internet

Regardez ce que ça donne dans le CodePen P1C6.

Si l'image est dans un sous-dossier nommé images , on précise : src="images/logo.png"

Voici un exemple d'insertion d'image :

Ah tiens c'est quoi ce alt là ?

Ajoutez l'attribut alt pour donner à l'image une description alternative

C'est-à-dire ? Je ne comprends pas ce que c'est une description alternative.

Choisissez le bon format d'image

Ajoutez une infobulle avec l'attribut title

L'attribut title est facultatif, contrairement à alt .

Voici ce que cela peut donner :

Créez une miniature cliquable

Voyons voir comment faire en sorte que la miniature soit cliquable :

2. Faites afficher la version montagne_mini.jpg sur une page,

3. et faites un lien vers la version montagne.jpg .

L'image agrandie s'affiche alors lorsqu'on clique sur la miniature.

Voici le code HTML qu’on peut utiliser pour cela :

On insère une image avec la balise <img> .

et alt (courte description de l'image).

Indiquer que ce chapitre n'est pas terminé

Et si vous obteniez un diplôme OpenClassrooms ?

Formations jusqu’à 100 % financées

Date de début flexible

Vous aimerez peut-être aussi