1. La balise d'insertion d'images <img>

Afin d'embellir nos pages web, nous devons impérativement utiliser des images! A cet effet, nous utilisons la balise <IMG /> qui indique au browser qu'il faut charger et afficher l'image spécifiée dans l'attribut SRC (source url). L'adresse url spécifiée dans l'attribut SRC aura le même format qu'une adresse <a href=""... et pourra donc être soit relative, soit fixe. En principe, l'image résidera toujours sur le même serveur que celui du document HTML, mais il est possible d'appeler et charger une image depuis un autre serveur, pour autant que celui-ci soit accessible. Notons quand même que cette balise ne possède pas d'équivalent de fin. Nous n'aurons donc jamais de balise </img> et on dit qu'il s'agit d'une balise orpheline.

Syntaxe

Exemple

pour afficher l'image située à l'adresse : https://www.tresfacile.net/images/android.png on doit insérer le code :

Ce qui donne:

2. Les attributs de la balise <img>

Si on souhaite présenter des pages web agréables, on doit alors bien penser aux paramètres des images insérées: alignement, dimensions width & height, encadrement de l'image, texte de remplacement lorsque l'image est supprimée ou déplacée... A cet effet nous utiliser les attributs de la balise IMG:

1. align: définit l'alignement de l'image: bottom|center|left|middle|top|right
2. alt: définit le texte de remplacement si l'image est introuvable
3. border: définit l'epaisseur de bordure (par défaut aucune bordure)
4. hspace: nombre de pixels d'ajustement horizontale entre l'image et le texte adjacent
5. src: spécifie la source de l'image
6. width: largeur de l'image
7. height: hauteur de l'image
8. title: texte de l'infobulle quand on pointe avec la souris sur l'image
9. vspace: nombre de pixels d'ajustement verticale entre l'image et le texte

3. Exemples d'usage des attributs de la balise IMG

3.1 Les attributs width et height

Les attributs width et height permettent de redimensionner l'image à une taille spécifiée par exemple si on veut redimensionner l'image de façon quelle soit affichée à une taille de 100 x 100 pixels on doit donc utiliser le code suivant :

Ce qui va donner à l'écran:

3.2 L'attribut align

L'attribut align permet d'aligner l'image à droite, à gauche, bottom, top... par exemple si on souhaite que l'image soit alignée à droite et redimensionnée à 64 x 64 pixels on doit utiliser le code suivant :

Ce qui vas donner à l'écran:

3.3 L'attribut border

L'attribut border permet de spécifier les bordures de l'image si on veut par exemple que l'image soit entourée d'une bordure on utilise le code suivant en donnant à la variable border une valeur numérique 1, 2, 3, ... ou 0 si on ne souhaite attribuer aucune bordure!

Exemple (border=1)

ce qui donne:

3.4 L'attribut alt

L'attribut alt permet d'afficher un texte de remplacement lorsque l'image est introuvable, nous allons donc l'essayer avec une image non existante par exemple au lieu d'utiliser l'image qui se trouve dans ce chemin: "https://www.tresfacile.net/images/android.png" avec l'extension .png, nous allons utiliser le même chemin avec l'extension gif: "https://www.tresfacile.net/images/android.gif". Nous allons donc utiliser le code suivant:

Ce qui donne:

3.5 L'attribut vspace

L'attribut vspace définit le nombre de pixels d'ajustement verticale entre l'image et le texte. Pour bien apprecier le fonctionnement de ce dernier nous allons le voir sur deux exemples l'un en utilisant l'attribut vspace et l'autre sans l'utiliser:

Exemple sans vspce

Ce qui affiche:

Exemple avec vspace

Ce qui donne:

Younes Derfoufi
CRMEF OUJDA