Revenons maintenant au code HTML pour découvrir comment placer des images dans nos pages web !
Insertion d'une image
Quelle est la fameuse balise qui va nous permettre d'insérer une image ? Il s'agit de…
<img /> !
C'est une balise de type orpheline (comme
<br />). Cela veut dire qu'on n'a pas besoin de l'écrire en deux exemplaires comme la plupart des autres balises que nous avons vues jusqu'ici. En effet, nous n'avons pas besoin de délimiter une portion de texte, nous voulons juste insérer une image à un endroit précis.
La balise doit être accompagnée de deux attributs obligatoires :
src: il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin absolu (ex. :http://www.site.com/fleur.png), soit mettre le chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossierimages, vous devrez taper :src="images/fleur.png"alt: cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (cela arrive), ou dans les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas « voir » l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Pour la fleur, on mettrait par exemple :alt="Une fleur".
Les images doivent se trouver obligatoirement à l'intérieur d'un paragraphe (
<p></p>). Voici un exemple d'insertion d'image :
1
2
3
4
| <p> Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br /> <img src="images/montagne.jpg" alt="Photo de montagne" /></p> |
Bref, l'insertion d'image est quelque chose de très facile pour peu qu'on sache indiquer où se trouve l'image, comme on avait appris à le faire avec les liens.
La plus grosse « difficulté » (si on peut appeler cela une difficulté) consiste à choisir le bon format d'image. Ici, c'est une photo donc c'est évidemment le format JPEG qu'on utilise.
La plus grosse « difficulté » (si on peut appeler cela une difficulté) consiste à choisir le bon format d'image. Ici, c'est une photo donc c'est évidemment le format JPEG qu'on utilise.
Ajouter une infobulle
L'attribut permettant d'afficher une bulle d'aide est le même que pour les liens : il s'agit de
title. Cet attribut est facultatif (contrairement à alt).
Voici ce que cela peut donner :
1
2
3
4
| <p> Voici une photo que j'ai prise lors de mes dernières vacances à la montagne :<br /> <img src="images/montagne.jpg" alt="Photo de montagne" title="C'est beau les Alpes quand même !" /></p> |
Survolez la photo avec la souris pour voir l'infobulle apparaître.
Miniature cliquable
Si votre image est très grosse, il est conseillé d'en afficher la miniature sur votre site. Ajoutez ensuite un lien sur cette miniature pour que vos visiteurs puissent afficher l'image en taille originale.
Il existe des millions de logiciels permettant de créer des miniatures d'images. J'utilise personnellement Easy Thumbnails. Je vais ainsi disposer de deux versions de ma photo, comme à la figure suivante) : la miniature et l'image d'origine.
Je les place toutes les deux dans un dossier appelé par exemple
img. J'affiche la versionmontagne_mini.jpg sur ma page et je fais un lien vers montagne.jpg pour que l'image agrandie s'affiche lorsqu'on clique sur la miniature.
Voici le code HTML que je vais utiliser pour cela :
1
2
3
4
| <p> Vous souhaitez voir l'image dans sa taille d'origine ? Cliquez dessus !<br /> <a href="img/montagne.jpg"><img src="img/montagne_mini.jpg" alt="Photo de montagne" title="Cliquez pour agrandir" /></a></p> |
0 commentaires:
Enregistrer un commentaire