Prog-Info > (X)HTML/CSS > Cours de HTML 4 > Les graphiques.

Les graphiques

Note : Un certain nombre de balises (font, basefont, center, s, u, b, i, ...) et propriétés (align, width & height (associées à certaines balises), size, color, border, background, bgcolor, face, name, target, ...) sont dépréciées. Il est fortement recommandé de ne pas les utiliser car elles pourraient devenir obsolètes dans un futur proche. En fait, ils ne sont plus pris en charge par les normes actuelles du langage HTML (W3C) donc plus sous garantie. L'objectif des Standards est de séparer le contenu de la mise en forme dans les sites Web en utilisant les feuilles de style CSS. Il est donc recommandé de les utiliser au maximum.

Comprendre les problèmes

- Les fichiers graphiques sont longs à charger lorsque l'on a un modem 56K ou inférieur. Il faut donc faire attention aux poids des images.
- Les moteurs de recherche ne peuvent pas indexer les images. Cela veut dire qu'une page ne doit pas être constituée de trop d'images.
- Un certain nombre d'internautes n'affichent pas les fichiers graphiques : on peut désactiver l'ouverture des images sous son navigateur... (ou un navigateur sous Unix)
- Les images peuvent prêter à des significations différentes en fonction des cultures.
- Le nombre de couleurs d'une image n'est pas la même chez tous les utilisateurs. (32 bits, 16 bits, ...)
Les droits d'auteurs : Ils s'appliquent aussi bien sur les images que l'on trouve un peu partout qu'aux images électroniques. Si vous utilisez une image qui a été déposée, l'auteur peut vous poursuivre.

Le format graphique des pages web

Il existe un très grand nombre de format de fichiers graphiques. Lorsque vous créez une image pour un fichier html, il vaut mieux choisir les formats compris par les navigateurs : GIF et JPEG. Chaque format possède ses avantages et ses inconvénients : précision, poids, couleurs, netteté, lisibilité, ...
Le GIF supporte 256 couleurs et le JPEG 16.7 millions.
En général, le GIF compresse sans perdre de détails (mais peu de couleurs) et le JPEG, lui, fait perdre davantage de détails à votre image.
Note : La technologie flash permet de réaliser des images et des animations avec un très bon rapport qualité/poids(vitesse de chargement). Mais l'internaute a besoin d'un plug-in (une petite application qui permet d'augmenter les capacités d'un logiciel) pour visualiser ces fichiers.

Ajouter une image

Pour mettre une image dans une page HTML, il faut utiliser la balise <img> avec l'attribut src qui lui est associé : <img src="NomDuFichier">.
Attention, si l'image n'est pas dans le même répertoire que votre page, il faudra indiquer le chemin.

Exemple :

Source	Résultat
`<img src="../Images/imagetest.gif"> Ce texte suit l'image.`	Ce texte suit l'image.

Remarque : la commande " ../ " permet de revenir d'un répertoire en arrière par rapport à votre document html en cours.

Aligner le texte par rapport à une image

Par défaut, le texte est aligné en bas de l'image. L'attribut align va vous permettre de changer cet alignement : top, aligne le texte en haut de l'image; middle, au milieu de l'image; bottom, en bas de l'image.

Exemple :

Source	Résultat
`<img src="../Images/imagetest.gif" align="top"> Ce texte est aligné avec le haut de l'image... <br> <br> <img src="../Images/imagetest.gif" align="middle"> Ce texte est aligné avec le milieu de l'image...`	Ce texte est aligné avec le haut de l'image... Ce texte est aligné avec le milieu de l'image...

Remarque : Il n'y a pas d'erreur dans l'exemple : à la fin de la ligne, le texte qui suit est bien au-dessous de l'image. Nous expliquerons par la suite comment corriger cela.

Positionner une image

Le texte n'encadre pas une image, par défaut. Il faut encore utiliser l'attribut align pour remédier à cela. La valeur left vous permettra d'avoir l'image à gauche et le texte autour tandis que la valeur right permet d'avoir l'image à droite.

Exemple :

Source Résultat

<img src="../Images/imagetest.gif" align="left"> Ce texte va se répandre à droite et sous 
            l'image. Ce texte va se répandre à droite et sous l'image. Ce texte va se 
            répandre à droite et sous l'image. Ce texte va se répandre 
            à droite et sous l'image.

            <p>&nbsp;</p>

            <img src="../Images/imagetest.gif" align="right"> Ce texte va se répandre à gauche et sous 
            l'image. Ce texte va se répandre à gauche et sous l'image. Ce texte va se 
            répandre à gauche et sous l'image. Ce texte va se répandre 
            à gauche et sous l'image.

Image de Test Ce texte va se répandre à droite et sous l'image. Ce texte va se répandre à droite et sous l'image. Ce texte va se répandre à droite et sous l'image. Ce texte va se répandre à droite et sous l'image. Ce texte va se répandre à droite et sous l'image.

Image de Test Ce texte va se répandre à gauche et sous l'image. Ce texte va se répandre à gauche et sous l'image. Ce texte va se répandre à gauche et sous l'image. Ce texte va se répandre à gauche et sous l'image. Ce texte va se répandre à gauche et sous l'image.

Préciser la taille de l'image

C'est définir la hauteur et la largeur de l'image dans la balise <img> pour le navigateur. Deux avantages :
- cela aide ceux qui ont désactivé le chargement d'images car la mise en page de votre document ne sera pas perturbée.
- cela permet un chargement plus rapide de la page web. Le navigateur peut afficher le reste du document pendant qu'il télécharge l'image.
Pour préciser au navigateur la taille d'une image, vous devez utiliser les attributs height (hauteur) et width (largeur) en leur attribuant des valeurs en pixels.

Exemple :

Source	Résultat
`<img src="../Images/imagetest.gif"> <br><br> <img src="../Images/imagetest.gif" height="100" width="100">`

Modifier la taille d'une image

Vous pouvez aussi rétrécir ou agrandir une image. Le navigateur changera automatiquement la taille de l'image en fonction de ce que vous lui avez précisé dans les attributs width et height. Vous pouvez exprimer ces valeurs en pixels. Par contre, plus une image sera agrandie, plus on verra les pixels sur celle-ci.

Exemple :

Source	Résultat
`<img src="../Images/imagetest.gif" width="50" height="50"> <br><br> <img src="../Images/imagetest.gif" height="100" width="290">`

Donner un texte de rechange

Vous pouvez insérer un texte de rechange pour ceux qui n'affichent pas d'image pour qu'ils aient au moins une petite description de l'image. Pour cela, il suffit d'insérer l'attribut alt et sa valeur entre guillemets dans la balise <img>. En général (IE4+, Netscape4+), pour ceux qui affichent les images, s'ils laissent leur souris 1 ou 2 secondes sur l'image, une infobulle apparaît avec le descriptif de cette image. (contenu de l'attribut alt)

Exemple :

Source	Résultat
`<img src="../Images/imagetest.gif" alt="Image de Test">      <img src="../Images/imagetest.gif" alt="Image de Test">`

Encadrer une image

Par défaut, le navigateur n'affiche pas de bordure autour d'une image. L'attribut border de la balise <img> vous permet d'ajouter une bordure. La valeur que vous définissez doit être en pixels. L'attribut bordercolor permet de définir la couleur de la bordure. (par défaut, c'est la couleur noire)

Exemple :

Source	Résultat
`<img src="../Images/imagetest.gif" border="0">      <img src="../Images/imagetest.gif" border="5" bordercolor="#FF0000">`

Donner de l'espace à une image

Si vous trouvez que le texte entoure l'image de trop près, vous pouvez utiliser les attributs hspace et vspace pour ajouter de l'espace horizontalement et verticalement. La valeur est en pixels.

Exemple :

Source	Résultat
`<img src="../images/utiles/imagetest.gif" align="left" hspace="20" vspace="20"> Ce texte est autour de l'image mais un espace de 20 pixels autour de celle-ci est respecté. Ce texte est autour de l'image mais un espace de 20 pixels autour de celle-ci est respecté. Ce texte est autour de l'image mais un espace de 20 pixels autour de celle-ci est respecté.`	Ce texte est autour de l'image mais un espace de 20 pixels autour de celle-ci est respecté. Ce texte est autour de l'image mais un espace de 20 pixels autour de celle-ci est respecté. Ce texte est autour de l'image mais un espace de 20 pixels autour de celle-ci est respecté.