Études supérieures - Les enseignements - Plateforme Temps Réel - Atelier Hypermédia - HTML / CSS -

web#06 { HTmL : images ; }

Dans le cours précédent sur les balises, nous avons expliqué que la plupart des balises sont orientées vers le texte. Cette observation est importante, parce qu’elle signifie que les élements textuels seront privilégiés sur le plan sémantique : les moteurs de recherche et les aggrégateurs de contenus sauront mieux interpreter, classifier et représenter les contenus textuels de vos pages. Bien sûr, il n’existe pas de balises pour tous les cas de figure concernant le texte ; par exemple, il n’y a pas de balises qui explique au World Wide Web que ceci est de la poésie, ou que cela est une réplique dans une pièce de théâtre ; la richesse des divers formes textuelles n’est pas totalement représenté dans le HTmL. Il n’empêche que le texte est bien mieux formalisé dans le HTmL que tous les autres média. Il n’y a pas de possibilité à décrire les différentes parties d’une image, comme on peut identifier un titre par rapport à un paragraphe ou une citation dans le texte. On aurait pu imaginer au moins la possibilité d’identifier les différentes couches d’une image, comme dans le logiciel Photoshop, ce qui nous permettrait au moins de mettre le visage sur un plan et le fond sur un autre, et expliquer dans notre hyperdocument que la première couche contient le visage de « Bill Gates », et alors que la deuxième couche contient celui de « Steve Jobs ». Et on aurait au moins pu imaginer un système de mots-clés normés, sans qu’on ait besoin d’une service comme Flickr.

mais nous n’avions rien de tout cela. Tout ce que nous pouvons faire, c’est d’importer l’image dans notre document et (heureusement) lui attribuer un descriptif.

<img src />

Une balise image n’est pas comme les autres balises. La balise image n’entoure pas un contenu avec une balise d’ouverture et une balise de fermeture. Elle contient elle-même le contenu, elle sera donc toujours unique. Pour cette raison, on dit qu’elle s’auto-termine, ou qu’elle s’auto-ferme. Au lieu d’écrire <img src="">l'image va ici</img>, on écrit :

<img src="nomfichier" />

Le signe « / », appellé en anglais « slash », s’écrit donc à l’intérieur de la balise, pour indiquer qu’il n’y aura pas de balise de fermeture. L’image contient sa propre poupée russe, elle intègre en elle-même les données et n’a besoin de rien entrourer.

Voici un exemple de balise, qui intègre dans une page une image venant des commons de wikimedia :


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTmL 1.0 Strict//EN"
  "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

 <head>
   <title>Images</title>
 </head>

<body>

 <h1>Exemple d'image externe</h1>

 <p><img src="http://upload.wikimedia.org/wikipedia/commons/5/53/Weingartner.jpg" /></p>

</body>
</html>

Ce qui donne comme résultat :

Notez que nous avons placé l’image à l’intérieur d’un nouveau <p>paragraphe</p>, et ne l’ont pas placée toute seule sur la page, ce qui aurait donné une érreur dans le Validator.

mais qu’est-ce qui se passe si on essaie de valider cette page ? On a vu que l’image s’affiche dans le navigateur, mais est-ce qu’il s’agit pour autant d’une page valide ?

Comme on peut voir dans l’illustration, la réponse est non. Le Validator nous dit qu’on n’a pas donné d’option « alt » à notre image. Il demande une explication du contenu de l’image. Ce qui est logique, car dans la politique d’ouverture, voire d’universalité, on accepte qu’il existera toujours certaines personnes qui ne pourront jamais voir notre image et il faudrait au moins marquer quelque chose dans son absence. Il s’agit, également, d’une tentative de rectifier un problème structurel que nous avons évoqué plus haut : qu’il n’existe pas pour l’instant de déscription en détails des composantes de l’image. La solution est loin d’être aussi bien adapté que pour le texte, mais c’est un départ.

alt=« alternative »

Nous allons ajouter donc une alternative à l’image. Si on ajoute alt="image de..." dans notre balise, ceux qui ne peuvent pas voir d’images pourront au moins lire son descriptif :

<img src="http://upload.wikimedia.org/wikipedia/commons/5/53/Weingartner.jpg" alt="Weingartner, Anneaux, Jeux olympiques 1896" />

Cette image maintenant se validera dans le Validator. En plus (bonus !) cette étiquette alt permettra de classifier cette image dans un aggrégateur de contenus, comme Google. Et dans les navigateurs, lorsque l’utilisateur trainera sa souris sur l’image, il verra même ce titre apparaître par dessus l’image temporairement (jusqu’à ce qu’il bouge de nouveau sa souris) :

width=’400’ height=’300’

Nous avons donc l’addresse du lien, une option d’affichage alternative pour ceux qui ne peuvent pas voir l’image, et un titre de l’image pour les aggrégateurs de contenus. Et alors pour la taille de l’image ? Comment faire si on veut que l’image soit plus petite ?

- Attendons une minute, le prof nous a dit qu’il faut séparer la couche de présentation de la couche des contenus.
- Et alors ?
- Eh bien, la taille d’une image ne concerne pas son contenu, sa concerne sa présentation. On nous martèle avec ça en plus. Alors ça va
- Ah ! Je vois ce que tu veux dire. Hmm...
- Alors ?
- ...comment dire...
- J’écoute
- La réponse est oui et non. Dans un sens oui, effectivement, la taille concerne la présentation de l’image. mais dans un autre sens, une image est profondément une forme visuelle dans son contenu, et en tant que telle elle a un format, défini par sa taille en pixels. Ce format fait partie de son contenu.

On peut le dire dans d’autres termes : le cadre fait partie du contenu de l’image. En plus, comme nous le verrons, les feuilles de styles graphiques décrivent des règles de mise en page des contenus indépendamment de tel ou tel contenu. Les feuilles de styles définissent des « cas » de présentation, elles ne disent pas « telle ou telle élement va là ou là ». Bien sûr, les feuilles de styles peuvent, si l’on veut, définir des tailles et des emplacements d’élements spécifiques (ne vous inquiétez pas). mais ce serait génant, voire contre-productif, de devoir créer une entrée dans la feuille de style pour chaque taille de chaque image dans chacune de nos pages. Cela nous ramènerait à 1999. Normalement une feuille de style graphique bien fait marchera pour toutes les pages, quelque soit leur contenus. Attribuer différentes tailles selon le contenu des images dans les feuilles de style, ce serait même d’aller à l’encontre de la séparation entre le fichier contenu et le fichier présentation.

On attribue donc la taille de l’image directemment dans la balise image, puisqu’il fait partie de son contenu, ce sont ses caractèristiques de base :

<img src="http://upload.wikimedia.org/wikipedia/commons/5/53/Weingartner.jpg" width='145' height='215' alt="Weingartner, Anneaux, Jeux olympiques 1896" />

Notre image est maintenant plus petite :

Relatif ou absolu

Non, il ne s’agit pas de la partie du cours sur la métaphysique. Il s’agit plutôt des deux différentes façons de déterminer se trouve l’image : comme pour les liens, un fichier image peut se trouver sur son propre serveur ou sur un serveur autre. Par exemple, si on veut afficher une image qui se trouve dans le même dossier que le html lui-même, il faut juste taper le nom de ce fichier : src="Weingartner.jpg". Si, par contre, ce fichier image se trouve sur un site extérieur (plus rare), il faut taper l’ensemble de l’addresse du fichier : src="http://upload.wikimedia.org/wikipedia/commons/5/53/Weingartner.jpg".

Souvent, on crée un sous-dossier appelé images dans le dossier où se trouvent les fichiers HTmL. On met dans ce dossier toutes les images, et on les ajoutent dans sa page en écrivant, par exemple : src="images/Weingartner.jpg". Le fait de mettre le mot « images », sans précédent, suivi d’un slash (/), veut dire qu’on trouvera notre image dans un sous-dossier.

Formats

Il y a plusieurs « formats » d’images qui sont utilisés pour les images sur le Web. Il y a des formats d’images fixes, et des images en mouvement. On ne traitera pas les images en mouvement ici (Flash, Processing, Shockwave, Quicktime, etc.), car il s’agit pour le HTmL ce qu’on considère des <object>, à savoir des media divers. Par contre, côté image fixe, nous pouvons déjà lister des formats standards :

- JPEG (souvent écrit JPG)
- GIF
- PNG

Quoi ?’ Vous dites. PNG ? Il n’y a même pas de voyelle, c’est un mot africain ?

Sans entrer dans tous les détails, sachez qu’il existe ces trois standards, chacun représentant un « format » de compression conçu par différents organismes. Par exemple, le format JPEG a été conçu par le Joint Photographic Experts Group, d’où le terme JPEG. Pour vous confondre encore plus, on a l’habitude de n’utiliser que trois lettres pour décrire un format, qu’on attache à la fin d’un nom de fichier (on l’appelle l’extension) comme celui-ci :

Si vous utilisez Gimp ou Photoshop pour préparer vos images, vous avez déjà rencontré ce choix du format d’image lors de la sauvegarde :

Comme on voit dans l’illustration, Photoshop propose plusieurs format, dont le sien. Attention, vous ne pouvez pas mettre une image au format Photoshop (image.psd), déjà parce que la plupart des utilisateurs n’ont pas Photoshop sur leur machine pour les lire, et les navigateurs ne sauraient pas l’afficher. mais on voit dans l’illustration qu’il y a les deux autres format que nous venons de lister comme compatibles avec le web : le gif et le png.

Notez également que Photoshop s’occupe à vous donner la bonne extension pour votre fichier, même quand il s’agit du format JPEG :

Un dernier point pour vous perdre encore plus dans le jungle des formats : en réalité un des ces trois formats peut s’animer : le format GIF. Ce format est assez ancien ; du coup il existe plusieurs logiciels de création d’images GIF animées. Nous utilisons, par exemple, le logiciel Gif Builder pour animer nos images fixes.

Image, suite

Il existe de multiples attributs qu’on peut paramètrer par la suite dans la balise <img> pour changer son apparence, mais vous avez probablement déjà deviné ce que nous dirons de ces attributs : on laissera les feuilles de styles s’en occuper. Par exemple, on peut écrire dans les balises HTmL des instructions pour aligner l’image à gauche de la page ou de placer une bordure autour : tout ces espacements, alignements et décorations doivent être déclarés plutôt dans les feuilles de style graphiques.

Nous parlerons également plus tard dans les cours sur la relation entre le texte et l’image, par exemple des possibilités d’entourer l’image avec du texte. Vous pouvez l’expérimenter déjà vous-même, le but de ce cours était simplement de présenter les base de la balise <img src />, une des plus importantes dans le HTmL.


ESAAix - École supérieure d’art d’Aix-en-Provence - http://www.ecole-art-aix.fr