|
Je n'irai pas jusqu'à dire que les images sont essentielles mais elles garantissent un minimum de convivialité et permettent souvent d'ajouter un plus pour la compréhension du texte qui en est proche (je pense notamment à des screens de jeux vidéo pour les sites de solutions de jeux vidéo).
Attention toutefois de ne pas tomber dans l'excès car trop d'images peut rendre votre site lourd et surtout il sera long à se charger, et beaucoup d'internautes n'aiment pas ça.
Beaucoup de formats d'images peuvent être affichés mais pour aller dans le sens de ce cours (qui ne se limite pas à l'HTML), il est préférable de prendre l'habitude de n'utiliser que les formats approuvés par le W3C (dont nous parlerons plus tard).
Il s'agit des formats suivants :
- JPEG (.jpg) : des images ayant un grand nombre de couleurs et bien compressées, c'est-à-dire qu'elles prendront moins de place, donc nécessiteront un temps de chargement moindre
- PNG (.png) : leur taille est faible dans le cas d'images avec peu de couleurs avec des tons uniformes, ce format permet en outre d'avoir des images entrelacées (qui s'affichent progressivement) et des images dont on définit une couleur comme transparente.
- GIF (.gif) : elles possèdent les mêmes atouts que les images PNG, si ce n'est que le format GIF est limité à 256 couleurs maximum et que ce format n'est pas totalement libre.
On insère une image à l'aide de la balise <img>.
| Attributs de img |
| Attribut |
Fonction |
| align |
bottom, center, left, middle, top, right (position par rapport au texte) |
| alt |
Texte dans l'infobulle de l'image |
| border |
Taille de la bordure de l'image |
| height |
Hauteur de l'image |
| border |
Taille de la bordure de l'image |
| name |
Nom de l'image (pour le JScript dont ne parle pas ce cours) |
| src |
Chemin vers l'image |
| width |
Longueur de l'image |
Exemples :
<img src="images/fleche-verte.gif" alt="Image">
<img src="images/fleche-verte.gif" alt="Image" width=50 height=20>
<img src="images/fleche-verte.gif" alt="Image" align=top> Noter l'alignement du texte plus haut que l'image dans align=top. Noter également l'absence de doubles quotes ( " ). Ceci est une particularité de HTML : les doubles quotes ou les quotes simples ( ' ) ne sont pas obligatoires. |
![[Valid RSS]](images/valid-rss.png "Validate my RSS feed")
