Leçon 9 : Les images
Est-ce qu'il ne serait pas formidable d'avoir une photo de l'acteur et légende musicale David Hasselhoff en plein milieu de la page ?
Ça sonne comme un défi ...
Peut-être, mais en réalité c'est très facile à faire. Il vous faut seulement un élément :
Exemple 1 :
<img src="david.jpg" alt="David" />
Ce qui donne dans le navigateur :
Tout ce dont vous avez besoin est d'abord de dire au navigateur que vous voulez insérer une image (img) puis
de lui dire où elle se trouve (src, abréviation de « source »). Vous voyez ?
Remarquez que l'élément img est ouvert et fermé avec la même balise. Comme la balise <br />,
il n'est pas associé à un morceau de texte.
Le nom « david.jpg » est celui du fichier d'image à insérer dans la page, et « .jpg » est le type de fichier de l'image. Tout comme l'extension « .htm » indique qu'il s'agit d'un document HTML, « .jpg » indique au navigateur que ce fichier est une image. Il existe trois sortes de types de fichier d'image que vous pouvez insérer dans vos pages :
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Les images GIF conviennent habituellement mieux pour les graphiques et les dessins, et les images JPEG pour les photographies. Deux raisons à cela : premièrement les images GIF se composent seulement de 256 couleurs, tandis que les images JPEG en contiennent des millions, et deuxièmement, le format GIF est mieux adapté pour comprimer des images simples que le format JPEG optimisé pour des images plus complexes. Meilleure la compression, plus petit le poids du fichier d'image, et plus rapide le chargement de la page. Comme l'expérience vous l'a sans doute montré, les pages inutilement « lourdes » peuvent être très gênantes pour l'utilisateur.
Traditionnellement, les formats GIF et JPEG ont été les deux types d'images dominants, mais récemment, le format PNG est devenu de plus en plus populaire (principalement aux dépends du format GIF). Le format PNG représente de beaucoup de points de vue le meilleur des deux formats JPEG et GIF : des millions de couleurs et une compression efficace.
Où trouver des images ?
Pour fabriquer vos propres images, il vous faut un programme d'édition d'images. Un programme de création d'image est l'un des outils essentiels pour créer de jolis sites Web.
Malheureusement, aucun bon programme d'édition d'images n'est fourni avec Windows ou d'autres systèmes d'exploitation. Il faudrait donc envisager d'investir dans l'un des trois meilleurs logiciels d'édition d'images actuellement sur le marché, à savoir « Paint Shop Pro », « PhotoShop » ou « Macromedia Fireworks ».
Quoi qu'il en soit, comme annoncé précédemment, il ne sera pas nécessaire d'acheter des logiciels coûteux pour finir ce tutoriel. Pour l'instant, vous pouvez télécharger l'excellent logiciel d'édition d'images « Irfan View », un gratuiciel (N.d.T. freeware) qui ne coûte donc rien.
Ou vous pouvez juste emprunter des images à d'autres sites en les téléchargeant. Mais faites attention à ce que le téléchargement des images n'enfreigne pas de droits d'auteur. Par contre, il est toujours utile de savoir télécharger des images, et voici comment :
- Cliquez sur le bouton de droite après avoir placé le pointeur sur une image, quelle que soit l'image sur Internet ;
- Sélectionnez « Sauvegarder l'image sous ... » dans le menu qui apparaît ;
- Sélectionnez un emplacement sur votre ordinateur pour l'image et appuyez « Sauvegarder ».
Faites-le avec l'image suivante et sauvegardez-la sur votre ordinateur au même emplacement que vos documents HTML. (Remarquez que le logo est sauvegardé comme fichier PNG : logo.png) :
Vous pouvez maintenant insérer l'image dans l'une de vos pages. Essayez vous-même.
C'est tout ce que je dois savoir pour les images ?
Il y a d'autres choses à connaître concernant les images.
D'abord vous pouvez aisément insérer des images situées dans d'autres dossiers, ou même situées sur d'autres sites Web :
Exemple 2 :
<img src="images/logo.png">
Exemple 3 :
<img src="http://www.html.net/logo.png">
Deuxièmement, les images peuvent être des liens :
Exemple 4 :
<a href="http://www.html.net">
<img src="logo.png"></a>
Ce qui donnera dans le navigateur (cliquez sur l'image) :
Y a t-il d'autres attributs à connaître ?
Vous aurez toujours besoin d'utiliser l'attribut src, qui indique au navigateur où l'image se trouve. Hormis cela,
beaucoup d'autres attributs peuvent être utiles pour insérer des images.
L'attribut alt sert à fournir une description de remplacement de l'image si, pour une raison ou pour une autre,
l'image n'était pas affichée à l'utilisateur. C'est particulièrement important pour les utilisateurs aveugles, ou si la page
se charge très lentement. Donc, toujours utiliser l'attribut alt :
Exemple 5 :
<img src="logo.gif" alt="Le logo de HTML.net">
Certains navigateurs affichent le texte de l'attribut alt sous forme d'un petit dialogue contextuel lorsque l'utilisateur
place le curseur sur l'image. Veuillez noter que l'utilisation de l'attribut alt vise à offrir une description de remplacement
pour l'image. L'attribut alt ne devrait pas servir à créer des messages contextuels spéciaux pour les utilisateurs car
les utilisateurs aveugles entendront le message sans savoir ce que l'image représente.
L'attribut title peut servir pour décrire brièvement l'image :
Exemple 6 :
<img src="logo.gif" title="Apprenez HTML avec HTML.net">
Ce qui donne dans le navigateur :
Si vous placez le curseur sur l'image sans cliquer, vous verrez apparaître le texte « Apprenez HTML avec HTML.net » comme message contextuel.
Deux autres attributs importants sont width et height :
Exemple 7 :
<img src="logo.png" width="141" height="32">
Ce qui donne dans le navigateur :
On peut utiliser les attributs width et height pour fixer la largeur et la hauteur d'une image.
Les valeurs utilisées pour fixer ces dimensions sont en pixels. Le pixel est l'unité de mesure de la résolution des écrans.
(Les résolutions d'écrans les plus courantes sont de 800 x 600 et 1024 x 768 pixels). Au contraire des centimètres, les pixels sont
des unités de mesure relatives qui dépendent de la résolution de l'écran. Pour une résolution d'écran élevée, 25 pixels peuvent
correspondre à l'écran à 1 centimètre, tandis que sur un écran de basse résolution à 1,5 cm.
Si on ne fixe pas sa largeur et sa hauteur, l'image sera insérée dans sa dimension réelle. Mais on peut manipuler ses dimensions
avec width et height :
Exemple 8 :
<img src="logo.gif" width="32" height="32">
Ce qui donne dans le navigateur :
Par contre, il vaut mieux garder à l'esprit que le poids réel en kilo-octets du fichier d'image reste le même, et qu'il faudra
autant de temps pour charger l'image, quoiqu'elle apparaisse plus petite à l'écran. Ainsi vous ne devriez jamais réduire la dimension
de l'image avec les attributs width et height. Il faudrait plutôt toujours redimensionner les images avec
un logiciel d'édition d'images afin de rendre ses pages plus légères et plus rapides.
Ceci dit, c'est toujours une bonne idée d'utiliser les attributs width et height car le navigateur pourra
déterminer l'occupation de l'image dans la page avant son chargement complet. Cela permet au navigateur une mise en page harmonieuse
et plus rapide.
Il suffit ici avec David Hasselhoff et les images.