10/10/14
Les navigateurs connaissent quelques formats d'image, gif, png, jpeg, ..., mais pas tous, par exemple tiff. Pour mettre une image dans une page web il faut donc utiliser les formats connus des navigateurs.
Téléchargez sur le Web une image (jpeg par exemple). Nous voulons faire apparaître cette image sur notre page Web créée au cours précédent.
Faites une version de cette image au format tiff et vérifiez que le navigateur ne peut pas l'ouvrir dans ce format mais peut l'ouvrir au format jpeg.
Pour mettre une image dans une page HTML, il faut utiliser la balise html img. Cette balise n'a qu'une balise d'ouverture (<img>) mais nécessite un paramétrage : l'attribut SRC qui définit le fichier d'image à mettre dans la page web. On doit insérer cette balise dans le corps du document HTML.
On suppose que le fichier de l'image s'appelle photo.jpeg et soit placé au même niveau que notre fichier html dans un dossier appelé "monsite".
Saisissez dans le corps de votre document html la balise suivante : <img src="photo.jpeg"> Que donne le navigateur ?
Le mot src est un attribut
obligatoire de l'élément img. La balise
img indique qu'une image doit être insérée dans la page à l'endroit du
texte ou vous mettez la balise, l'attribut src indique où est le fichier
qui contient l'image à placer à cet endroit.
Créez un dossier "images" à coté de votre fichier "index.html" et déplacez dedans le fichier image; vous constatez en ouvrant index.html avec le navigateur que l'images ne s'affiche plus. Il faut corriger l'attribut src de la balise image : src="images/photo.jpeg".
Nous créons maintenant un dossier "pages" à l'intérieur du dossier "monsite" et faisons glisser "index.html" dans "pages". A nouveau le navigateur ne visualise plus correctement la page web ; il faut modifier l'attribut SRC: < img src="../images/photo.jpeg" >
Enlevez l'image "photo.jpeg" du dossier "images" et déposez là à coté de ce dossier, dans le dossier "monsite". Encore une fois il faut modifier l'attribut src : < img src="../photo.jpeg" >
Ces 4 cas permettent de comprendre la logique de l'attribut SRC : il indique le chemin relatif du fichier image par rapport au fichier HTML.