16/02/2021

4. La gestion des images dans un document HTML

Les images ne sont pas explicitement présentes dans les documents HTML. Il n’y a, dans un document HTML, qu’un lien vers le fichier contenant l’image. Les documents HTML sont donc de taille assez petite puisqu’ils ne stockent que des caractères.
L’inconvénient est que l’utilisateur doit être sûr que le fichier contenant l’image est présent à l’endroit où pointe le lien.

Remarque : au contraire, en général, dans les documents comme les fichiers Open XML (.doc ou .docx) ou Open Document (.odt) l’image est explicitement présente dans le document et il n’est pas nécessaire de posséder par ailleurs un fichier contenant l’image.

4.1. Affichage de l'image dans notre exemple

Vous avez déjà observé que, dans notre exemple, une balise est prévue pour l'insertion de l'image mais qu'un texte s'affiche à la place de l'image. Ce comportement est du à 2 raisons :

L'image n'a pas été téléchargée sur votre machine et le navigateur ne la trouve donc pas.
Le navigateur prend alors en compte et affiche le texte défini dans l'attribut alt de la balise img. Cet attribut est facultatif mais fortement conseillé pour des raisons d'accessibilité du document : cet attribut est utile aux déficients visuels utilisant des outils adaptés pour mieux comprendre le contenu de la page.

Dans le code source, supprimez le texte alt="Image d'un père Noël" et observez l'icône qui apparaît qui indique que l'image n'est pas trouvée.

Dans le navigateur, ré-affichez la page exemple.html disponible sur notre serveur et téléchargez l’image du père Noël.
Enregistrez-la dans le même dossier que celui où vous avez enregistrer le fichier TDB4-NOM-exemple.html en début de séance : gardez le nom PereNoel.jpg.
Observez que l'image apparaît bien dans l'affichage du fichier dans le navigateur.

4.2. Au sujet de la récupération d'un fichier `HTML`

Notez que pour télécharger un fichier au format HTML, vous n’êtes pas obligé·e d’utiliser la technique habituelle (bouton droit sur l'hyperlien de la page permettant d'accéder au fichier, enregistrer la cible du lien sous, …). Vous pouvez enregistrer directement la page affichée par le navigateur avec le menu Fichier>Enregistrer sous…

Dans ce cas vous avez plusieurs possibilités pour le choix du type d’enregistrement (nous utilisons ci-après la terminologie de Firefox) :

page Web, complète ;
page Web, HTML uniquement.

Créez 2 répertoires Test1 et Test2 dans NOM_PRENOM_TDB4 pour tester les 2 cas précédents. Un cas est équivalent à la méthode de téléchargement habituelle (celle utilisée précédemment). Lequel ? Que fait l’autre cas ?

Les navigateurs proposent également d’autres types d’enregistrement. Testez-les.

4.3. Insertion d'une nouvelle image

Récupérez sur le web une image de votre choix et téléchargez-la sur votre ordinateur. Attention, vous devez enregistrer l’image dans le même dossier que TDB4-NOM-exemple.html.
Insérez cette image dans le fichier TDB4-NOM-exemple.html en vous inspirant de l’insertion de l’image PereNoel.jpg.
Enregistrez les modifications et observez votre nouveau document.

Accessibilité

Avez-vous défini l'attribut alt de la balise img ?

Au delà d'être le texte qui s'affiche à la place de l'image si le fichier image disparaissait, ce texte alternatif est pris en compte par des outils pour les mal voyants. La norme HTML 5 impose que l'attribut soit défini pour toute image. Cette règle est imposée afin de rendre le texte le plus accessible possible (évitez les textes alternatifs du genre une image car cela n'aidera pas la personne qui n'a pas la capacité de percevoir l'image).

À noter que dans un document texte classique au format odt ou docx, on devrait également aussi mettre ce texte alternatif. Cela est possible avec les logiciels LibreOffice Writer, Apache OpenOffice Writer, Microsoft Word.

4.4. Remarque sur le copier-coller

Voici une image image du père Noël insérée dans du texte.

Copiez la ligne de texte ci-dessus (de Voici à texte.).
Collez-la dans un nouveau document au format Open Document que vous aurez créé avec Apache OpenOffice (avec d'autres logiciels, le phénomène que nous voulons vous montrer n'apparaîtra pas nécessairement ; en particulier, il n'apparaît pas avec les versions récentes de LibreOffice). Si vous n'avez pas Apache OpenOffice, regardez si le phénomène décrit ci-après se produit.
Enregistrez votre document. Observez que la taille du document est inférieure à la taille de l'image qu'il contient. Comment est-ce possible ?

Explications. Un fichier au format Open Document est comme un fichier au format HTML écrit à la base dans un langage à balises et les balises du langage HTML sont comprises dans ce langage. Ici, nous avons copié le code source et Apache OpenOffice va donc, comme un navigateur web, chercher l'image sur le disque avant de l'afficher.

Prudence. Le phénomène montré ci-avant peut vous être source de problèmes. Imaginez que vous rendiez un devoir avec des images à un enseignant qui corrige dans un lieu sans internet. Si vous avez copié-collé du texte avec images (en citant vos sources bien sûr), il est possible que l'image ne soit pas dans votre fichier et votre devoir sera donc dévalué. Il est donc conseillé, avant toute insertion dans un document d'une image, de ranger l'image sur son disque (et de conserver les informations nécessaires pour la citer).

Crédit image : Par Jacob Windham from Mobile, USA — Flickr.com – image description page, CC BY 2.0, Lien