28/9/12

Insertion d’images

En plus du texte, une page web peut afficher des éléments multimédias : images, ... Il faut donc les indiquer dans le code html.

Nous allons insérer une image sur la page exemple.htm. 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.

Dans une page web, l’insertion d’une image se fait à l’aide d’une balise spécifique : la balise <img>. L’adresse où se trouve l’image est indiquée par un attribut appelé src de la balise img (même principe que href pour la balise <a>). Ainsi, pour insérer le logo de l’UPV, vous pouvez utiliser la balise :

<img src="http://www.univ-montp3.fr/miap/ens/Logoupvc.gif">

Recopiez ce code source et insérez-le dans votre page exemple.htm (là où l’université est mentionnée, par exemple).

Sauvegardez le fichier exemple.htm et visualisez le résultat.

Remarque : l’attribut alt

Il est recommandé (et nécessaire pour avoir un document valide) de mettre un attribut alt sur toute balise image ; cet attribut a pour valeur un texte descriptif de l’image ; par exemple ici : alt="Logo de l’université Montpellier 3"

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).

Images et liens relatifs

L’adresse apparaissant dans la balise <img> de l’exemple ci-dessus est un lien absolu. 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.

L’habitude est d’avoir un dossier local, appelé "dossier racine du site", qui contient tous les fichiers nécessaires (fichiers html, images, ...). le dossier "Web" que vous avez créé en fera office.

Exercice

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 ...") :

Ajoutez dans exemple.htm une balise où l’adresse de l’image est donnée par un lien relatif qui indique que l’image se trouve dans le dossier Images, lui-même voisin de la page exemple.htm :

<img src="Images/Logoupv.gif" alt="Logo de l’université 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 ?

Exercice

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

Associez ces images à chacun des loisirs énumérés sur votre page loisirs.htm.