Introduction

Info

L'image que nous allons utiliser, s'appelle "imagecour.gif".
Pour plus d'information sur la balise <IMG> allez dans le glossaire HTML.

Insertion d'une image

Info

Pour insérer une image, il faut utiliser la balise HTML <IMG>.

Taper le code <img src="imagecour.gif"> et visualisez.
Si vous connaissez la taille de l'image définissez la.
J'ai lu que cela facilitait l'affichage de l'image...?

La taille d'"imagecour" est de 100 pixels de longueur et 66 pixels de hauteur.
Nous taperons :

Il n'est pas nécessaire de mettre "px", car la taille est toujours en pixel par défaut.

Les bordures d'une image

Info

Il est possible de créer un contour. Cela me semble, pas très intéressant.
J'aborde le problème du contour car quand vous créez un lien sur l'image, le navigateur vous crée un contour qui n'est pas forcément le bienvenue.
Il me semble donc nécessaire de connaître l'attribut BORDER.

Exercice

L'exercice suivant consiste à introduire une image avec une bordure de 3 (toujours en Px par défaut), puis une image avec lien et une image avec lien mais sans bordure.
Tapez :

Si vous ne savez pas ce qu'est un lien, ce n'est pas grave, taper bêtement le texte. Je vous expliquerais dans le chapitre suivant.

Alignement d'une image par rapport au texte

Info

Tout d'abord voyons comment s'aligne l'image par défaut.
Taper :
<IMG src="imagecour.gif"> puis copiez et collez du texte.
Voici du texte.

Maintenant nous allons aligner le bas du texte avec le bas de l'image.
Tapez :
<IMG src="imagecour.gif" align="absbottom"> puis copiez et collez du texte.

Pour plus d'information sur les valeur de l'attribut align de la balise HTML IMG utilisez le glossaire HTML.

Créer un espace entre l'image et le texte

Info

Le texte collé à l'image n'est pas très beau.

Nous allons étudier l'espacement horizontal qui permet de décaler le texte horizontalement par rapport à l'image.
Pour cela mettez dans la balise <IMG> l'attribut HSPACE, donnez lui une valeur.

Tapez par exemple :

puis copiez et collez du texte.
Voici du texte.

Nous allons étudier l'espacement vertical qui permet de décaler le texte verticalement par rapport à l'image.
Pour cela mettez dans la balise <IMG> l'attribut VSPACE, donnez lui une valeur.
Tapez par exemple :

puis copiez et collez deux fois du texte.

Insertion d'une image de fond

Info

Vous pouvez insérer une image de fond.
Cette caractéristique se détermine dans la balise HTML <BODY> grâce à l'attribut BACKGROUND="url".
Sachez que une image placé en fond se répète jusqu'a ce qu'elle remplisse tout le document HTML.
Vous verrez qu'une image n'ayant pas de bons raccords fait de votre fond, un fond très laid.

Pour voir nous allons mettre en fond une image.
Tapez dans la balise <BODY> :

Internet Explorer offre d'autres possibilités que vous pourrez voir dans le Glossaire HTML à la balise HTML <BODY>.

Les images réactives

Info

Il faut savoir qu'il est possible de déterminer de zones réactives sur une image. Il est très difficile de déterminer ces zones si vous ne possédez pas de logiciel de dessin ou logiciel comme Dreamweaver ou Frontpage...
Pour plus d'information voir les balises <IMG>, <MAP> et <AREA>.

La seul chose que je puisse faire c'est de vous montrez une image ayant les trois types de zone possible.
Voici le code a recopier.
Pour plus d'information sur les zones réactives voir le Glossaire HTML Balise AREA.

Révision des balises

Exercice

Voici un petit exercice qui consiste à recréer une page HTML.
Pour cet exercice, il faut avoir été consulté le glossaire.
La page à recréer.
Pas très belle.
Voici les références :
- image de fond "poisson1.gif"
- carre rouge "rouge.gif" taille 50 X 50.