I) L'insertion d'une image
a) Les types d'images
Les images représentent l'élément indispensable d'une présentation
atractive d'une page. Le contenu graphique d'un site personnalise le message
et attire le visiteur. Il existe trois formats de fichiers graphiques
disponibles en HTML :
|
GIF
|
JPG
|
PNG
|
| Transparence |
Qualité
photographique |
Qualité
photographique |
| Entrelacement |
Apparition
progressive |
Entrelacement-Transparence |
| Dimension
limitée du fichier |
Compression
avec + couleurs |
Dimension
fichier comparable à Gif |
| Peu
de couleurs |
16,7
millions de couleurs |
16,7
millions de couleurs |
| Animation |
|
Inaccessible
actuellement |
| Graphics
Interchange Format |
Joint
Photographic Experts Group |
Portable
Network Graphics |
|
 Remarques
:
PNG est un format de fichier qui à terme se substituera
au format GIF. Le format GIF conçu par Compuserve (maintenant possédé
par America On Line) utilise l'algorithme de compression LZW lui-même
breveté par la société Unisys en 1985. Au jour d'aujourd'hui (mois
de septembre 1999) cette société se "réveille" et tente
ni plus ni moins de faire payer (cher) aux sites Web l'utilisation en
ligne de toutes les images GIF !
Le format PNG, d'autre part, a été développé par un comité
Internet expressément pour être un brevet-libre.
|
b) L'insertion d'une image
La balise <IMG>. Elle n'a pas de balise fermante et possède
un attribut obligatoire : la source de l'image par SRC.
|
|
Exemple :
<IMG src="Image.jpg">
|
N'oubliez-pas que vous pouvez utiliser une image en fond de page par
l'attribut background de la balise <BODY>. Préférez dans ce cas une
petite image, le navigateur "remplissant" la page en répétant le
motif (plus de rapidité dans le chargement).
II) Les modifications de l'image
>a) Les attributs indispensables
- Les attributs height et width (hauteur et largeur en
pixels). En spécifiant ces attributs, l'affichage de l'image sera accéléré
car le navigateur se sert des ces paramètres lors du chargement de
celle-ci. Sans ces informations, le navigateur charge l'image dans son intégralité,
calcule ses dimensions, la place sur la page et passe ensuite au reste...
ce qui peut prendre un certain temps en cas de nombreuses images !
- L'attribut border. Il définit l'existence et l'épaisseur d'un cadre à
l'image.
- Les attributs hspace et vspace (en pixels). Ils déterminent
l'espace qui sera laissé autour de l'image.
|
|
Exemple :
<IMG src="ie_static.gif" height="123" width="112" border=1 >
|
b) Le placement du texte
Le placement du texte par rapport à l'image se détermine avec la balise
<IMG> et son attribut align (valeurs possibles : top, bottom,
middle, left, right). Il permet de choisir le type d'alignement de l'image
avec le texte qui l'accompagne (valeur par défaut align = bottom, texte aligné
avec le bas de l'image).
|
|
Exemple :
<IMG src="ie_static.gif" height="123" width="112" border=1 align=middle>
Texte placé au milieu de l'image
|
|