04/11/2020

6. Images

En plus du texte, une page web peut afficher des éléments multimédias comme des images. Voyons comment indiquer ces affichages dans le code HTML.

6.1. Une première insertion

Exercice 6.1.1

Copiez la balise suivante dans le corps de votre fichier exemple.html (là où cela vous semble le plus approprié).

<img src="https://www.univ-montp3.fr/miap/ens/info/PerfPix/TD7/images/logo-upvm_4.jpg" alt="Logo de l’Université Paul-Valéry Montpellier 3">

L'attribut src contient l'adresse de l'image à insérer.
L'atribut alt fournit un descriptif de l'image. Cet attribut a deux fonctions :
- permettre l’affichage d’un texte aternatif en cas d’absence du fichier de l’image ;
- respecter la loi sur l’égalité des droits et des chances pour les personnes handicapées (un lecteur automatique de pages web lira le texte alternatif).

Les deux attributs sont obligatoires

Remarque.Pour qu’une image soit utilisable dans une page web, elle doit être dans un des formats autorisés : jpeg, gif, png sont les plus courants.

6.2. Images et liens relatifs

L’adresse apparaissant dans la balise <img> de l’exemple ci-dessus est une adresse absolue. On a indiqué l’adresse où se trouve l’image du logo de l’université sur le serveur de l’université. Le navigateur se connectera à la machine distante pour en obtenir une copie et l’insèrera dans la page à afficher à l’écran.

Or les sites web utilisent très souvent des images, et parfois la même image d’une page à l’autre (comme par exemple un logo d’une université ou d’une société). Il est donc habituel de stocker ces images dans un répertoire local voisin des pages html qui les utilisent.

À noter qu'insérer dans une page une image provenant d'un autre site web que le sien peut entraîner des défauts d'affichage si l'image du site disparaît. Par ailleurs, cette pratique peut être problématique vis-à-vis du droit à l'image. Il faut penser à citer les sources de l'image (pour le logo utilisé précédemment, il s'agit du logo de notre université sauvegardé en novembre 2020) mais même citer ses sources peut ne pas être suffisant car vous n'avez pas, a priori, le droit d'afficher cette image. Si vous voulez renvoyer vos lecteurs vers cette page, il est préférable de renvoyer vers la page du site qui la contient.

Exercice 6.2.1

Créez dans le dossier "Web" un sous-dossier nommé Images.
Téléchargez l’image ci-dessous et placez-la dans le dossier Images (Clic-droit sur l’image puis "Télécharger sur le disque ..." ou "Enregistrer l’image sous ...") :
Dans votre fichier exemple.html, insérez, à côté de l'autre image déjà insérée, l'image téléchargée en utilisant une adresse relative qui indique que l’image se trouve dans le dossier Images, lui-même voisin de la page exemple.html. Votre code devrait être :

<img src="Images/logo-upvm_4.jpg" alt="Logo de l’Université Paul-Valéry Montpellier 3">

Vous avez donc 2 fois l’image dans cette page, superbe !

Remarque : vous voyez ici un deuxième exemple de lien relatif, l’image n’est pas à côté du fichier html, mais à l’intérieur d’un dossier à côté de ce fichier, la valeur de l’attribut src indique cette position.

Question : quelle aurait du être la valeur de l’attribut src si le fichier image avait été à côté du fichier html ? Réponse en survolant ici

Exercice 6.2.2

Téléchargez depuis le web une image en rapport avec un de vos loisirs (utilisez l’option "Recherche d’images" de Google, par exemple).

Insérez cette image dans votre page loisirs.html.

Faites de même pour d'autres loisirs, si vous le souhaitez.

6.3. Images cliquables

Sur certains sites, on peut cliquer sur des images pour passer, par hyperlien, à une autre page ou un autre site.

Quand on maîtrise les balises <a> et <img>, il n'y a pas de difficultés à réaliser cela. Il suffit de remplacer le texte d'un hyperlien par le code d'insertion d'une image. Cela donnera un code du genre : <a href="…"><img src="…" alt="…"></a>

Exercice 6.3.1

Insérez un hyperlien sur une des images de logo que vous avez insérées dans votre fichier exemple.html