Les insertions d'images
Les images pouvant être affichées sur les pages web sont les images au format de fichier .gif, .jpg, .bmp, et .png.
Les images jpeg sont plus adaptées pour les photos (elles permettent l'affichage de beaucoup plus de couleurs que les gifs).
Les .gifs et .png sont mieux adaptées pour les dessins, les boutons et les petites icônes. Elles sont beaucoup moins lourdes en taille de fichier et permettent l'affichage d'images animées.
On prendra soin de placer au préalable toutes les images du site dans un dossier spécifique (lui-même placé dans le même dossier que les pages HTML). Par exemple le dossier 'images'.
La balise <img> et l'attribut src :
En HTML, les images sont insérées avec le tag <img>. Ce tag est vide, ce qui signifie qu'il n'est pas fermé et qu'il contient uniquement des attributs.
Pour afficher une image sur une page, vous devez utiliser l'attribut src qui veut dire source.
La valeur de l'attribut src correspond à l'adresse (= le chemin d'accès) de l'image souhaitée. L'image sera ainsi placée sur la page à l'endroit où vous insérez le tag.
-------------------------------------------------------------------------------------------------------------------------------
A. Une image sans attribut particulier :
Les images jpeg sont plus adaptées pour les photos (elles permettent l'affichage de beaucoup plus de couleurs que les gifs).
Les .gifs et .png sont mieux adaptées pour les dessins, les boutons et les petites icônes. Elles sont beaucoup moins lourdes en taille de fichier et permettent l'affichage d'images animées.
On prendra soin de placer au préalable toutes les images du site dans un dossier spécifique (lui-même placé dans le même dossier que les pages HTML). Par exemple le dossier 'images'.
La balise <img> et l'attribut src :
En HTML, les images sont insérées avec le tag <img>. Ce tag est vide, ce qui signifie qu'il n'est pas fermé et qu'il contient uniquement des attributs.
Pour afficher une image sur une page, vous devez utiliser l'attribut src qui veut dire source.
La valeur de l'attribut src correspond à l'adresse (= le chemin d'accès) de l'image souhaitée. L'image sera ainsi placée sur la page à l'endroit où vous insérez le tag.
-------------------------------------------------------------------------------------------------------------------------------
A. Une image sans attribut particulier :
Code source : <IMG src="images/image.jpg">
--------------------------------------------------------------------------------------------------------------------------------
B. Une image centrée avec un bord de taille 3 :
--------------------------------------------------------------------------------------------------------------------------------
B. Une image centrée avec un bord de taille 3 :
Code source :<CENTER><IMG src="images/image.jpg" border=3></CENTER>
--------------------------------------------------------------------------------------------------------------------------------
C. Modification de la taille d'une image :
Dans ce cas, l'image centrée sera réduite en un carré de 70 pixels de côtés avec un bord de 1 pixel :
--------------------------------------------------------------------------------------------------------------------------------
C. Modification de la taille d'une image :
Dans ce cas, l'image centrée sera réduite en un carré de 70 pixels de côtés avec un bord de 1 pixel :
Code source : <CENTER><IMG src="images/image.jpg" border=1 width=70 height=70></CENTER>
--------------------------------------------------------------------------------------------------------------------------------
D. L'attribut ALT :
Cet attribut est utilisé pour afficher un texte descriptif de l'image qui apparaît lors du survol de celle-ci par la souris (style " info-bulle ").
La valeur de cet attribut est donc un texte que vous pouvez choisir librement.
Exemple de code source : <CENTER><IMG src="images/image.jpg" border=0 width=40 height=40 alt="Le langage HTML"></CENTER>
--------------------------------------------------------------------------------------------------------------------------------
D. L'attribut ALT :
Cet attribut est utilisé pour afficher un texte descriptif de l'image qui apparaît lors du survol de celle-ci par la souris (style " info-bulle ").
La valeur de cet attribut est donc un texte que vous pouvez choisir librement.
Exemple de code source : <CENTER><IMG src="images/image.jpg" border=0 width=40 height=40 alt="Le langage HTML"></CENTER>
--------------------------------------------------------------------------------------------------------------------------------E. Une image en arrière plan de la page html :
Exemple :
<html>
<body background="images/fond.jpg">
</body>
</html>
Nb : Pour l'arrière plan on utilisera uniquement des images au format GIF (.gif) ou JPEG (.jpg)
Si l'image utilisée est plus petite que votre page, elle sera répétée pour couvrir entièrement la page. Il est possible de fixer le fond d'écran afin d'éviter cette répétition en hauteur lorsque la page html s'allonge.
Il s'agit d'un autre attribut de la balise <BODY> : BGPROPERTIES=fixed
Exemple :
<body background="images/fond.jpg" bgproperties="fixed">
fond.jpg étant l'image de fond choisie, dans le dossier 'images'.
--------------------------------------------------------------------------------------------------------------------------------
F. L'alignement vertical des images dans le texte :
Exemple de code source :
<p>1. Une image <img src ="images/image1.jpg" align="bottom"> dans un texte</p>
<p><b>Pour aligner l'image verticalement :</b><br><br>
<p>2. au centre <img src="images/image1.jpg" align="middle"> dans le texte</p>
<p>3. en haut <img src ="images/image1.jpg" align="top"> dans le texte</p>
<p><b>L'alignement vertical par défaut<br> de l'image est en bas</b></p>
<p>4. Alignement par défaut <img src ="images/image1.jpg"></p>
<p>5. <img src ="images/image1.jpg">Une image avant un texte</p>
<p>6. Une image après un texte <img src ="images/image1.jpg"></p>
Résultat :
Exemple :
<html>
<body background="images/fond.jpg">
</body>
</html>
Nb : Pour l'arrière plan on utilisera uniquement des images au format GIF (.gif) ou JPEG (.jpg)
Si l'image utilisée est plus petite que votre page, elle sera répétée pour couvrir entièrement la page. Il est possible de fixer le fond d'écran afin d'éviter cette répétition en hauteur lorsque la page html s'allonge.
Il s'agit d'un autre attribut de la balise <BODY> : BGPROPERTIES=fixed
Exemple :
<body background="images/fond.jpg" bgproperties="fixed">
fond.jpg étant l'image de fond choisie, dans le dossier 'images'.
--------------------------------------------------------------------------------------------------------------------------------
F. L'alignement vertical des images dans le texte :
Exemple de code source :
<p>1. Une image <img src ="images/image1.jpg" align="bottom"> dans un texte</p>
<p><b>Pour aligner l'image verticalement :</b><br><br>
<p>2. au centre <img src="images/image1.jpg" align="middle"> dans le texte</p>
<p>3. en haut <img src ="images/image1.jpg" align="top"> dans le texte</p>
<p><b>L'alignement vertical par défaut<br> de l'image est en bas</b></p>
<p>4. Alignement par défaut <img src ="images/image1.jpg"></p>
<p>5. <img src ="images/image1.jpg">Une image avant un texte</p>
<p>6. Une image après un texte <img src ="images/image1.jpg"></p>
Résultat :
1. Une image dans un texte
Pour aligner l'image verticalement :
2. au centre dans le texte
3. en haut dans le texte
L'alignement vertical par défaut
de l'image est en bas
4. Alignement par défaut
5. Une image avant un texte
6. Une image après un texte
--------------------------------------------------------------------------------------------------------------------------------
G. L'alignement horizontal des images dans le texte :
Exemple de code source :
<p><img src ="images/image1.jpg" align ="left">
Si l'attribut align a pour valeur "left", l'image sera placée à gauche du texte.</p>
<p><img src ="images/image1.jpg" align ="right">
Si l'attribut align a pour valeur "right", l'image sera placée à droite du texte.</p>
Résultat :
G. L'alignement horizontal des images dans le texte :
Exemple de code source :
<p><img src ="images/image1.jpg" align ="left">
Si l'attribut align a pour valeur "left", l'image sera placée à gauche du texte.</p>
<p><img src ="images/image1.jpg" align ="right">
Si l'attribut align a pour valeur "right", l'image sera placée à droite du texte.</p>
Résultat :
Les alignements horizontaux d'une image dans un texte :
Si l'attribut align a pour valeur "left", l'image sera placée à gauche du texte.
Si l'attribut align a pour valeur "right", l'image sera placée à droite du texte.
--------------------------------------------------------------------------------------------------------------------------------
H. Les marges autour des images :
HSPACE et VSPACE permettent de définir une marge autours des images. Le paramètre ALIGN précise l'alignement vertical de l'image avec le texte qui l'entoure : "middle" indique que c'est le milieu de l'image qui sera aligné avec la base du texte "top" indique que le haut de l'image sera aligné avec la base du texte"bottom" indique que le bas de l'image sera aligné avec la base de la ligne du texte.
Exemple :
<img src="images/marge.jpg" width="100" height="100" hspace="10" vspace="15" align="left">
Résultat dans le navigateur :
H. Les marges autour des images :
HSPACE et VSPACE permettent de définir une marge autours des images. Le paramètre ALIGN précise l'alignement vertical de l'image avec le texte qui l'entoure : "middle" indique que c'est le milieu de l'image qui sera aligné avec la base du texte "top" indique que le haut de l'image sera aligné avec la base du texte"bottom" indique que le bas de l'image sera aligné avec la base de la ligne du texte.
Exemple :
<img src="images/marge.jpg" width="100" height="100" hspace="10" vspace="15" align="left">
Résultat dans le navigateur :
--------------------------------------------------------------------------------------------------------------------------------
I. Créer un lien hypertext sur une image :
Un lien peut être de plusieurs nature, du texte, de l'image, un bouton, une partie d'une image voire même le document tout entier...
La balise d'un lien :
<A HREF="xxx">image ou texte</A>
Tout ce qui se trouve entre les deux balises est considéré comme zone sensible, et un clic sur les objets situé entre ces deux bornes provoque l'action contenue dans "xxx" (ou la lecture du fichier "xxx" comme nouvelle page).
Un lien peut mener vers une autre page du site, vers une page ou un fichier externe au document, vers un repère interne (ancre) au document ou encore vers une adresse e-mail.
Exemple :
Cette image contient un lien vers la page d'accueil :
<a href="index.html"><img border="1" src="images/image1.jpg"></a>
Résultat :
Cliquez sur cette image pour vous diriger vers la page d'accueil :
I. Créer un lien hypertext sur une image :
Un lien peut être de plusieurs nature, du texte, de l'image, un bouton, une partie d'une image voire même le document tout entier...
La balise d'un lien :
<A HREF="xxx">image ou texte</A>
Tout ce qui se trouve entre les deux balises est considéré comme zone sensible, et un clic sur les objets situé entre ces deux bornes provoque l'action contenue dans "xxx" (ou la lecture du fichier "xxx" comme nouvelle page).
Un lien peut mener vers une autre page du site, vers une page ou un fichier externe au document, vers un repère interne (ancre) au document ou encore vers une adresse e-mail.
Exemple :
Cette image contient un lien vers la page d'accueil :
<a href="index.html"><img border="1" src="images/image1.jpg"></a>
Résultat :
Cliquez sur cette image pour vous diriger vers la page d'accueil :
--------------------------------------------------------------------------------------------------------------------------------
J. Les cartes cliquables :
On appelle "carte cliquable" une image dans laquelle sont définies des zones associées à des liens. Selon l'endroit où l'on clique sur la carte, un lien différent est activé.
La balise :
Tout d'abord, il y a la balise <MAP>...</MAP>. Dans cette balise, il faut indiquer un nom dans l'attribut NAME.
Il faut que ce soit le même que celui donné dans le USEMAP (dit au navigateur que l'image est mappée) de votre image.
Ensuite, il y a les balises <AREA>, une pour chaque zone sur votre image.
- l'attribut SHAPE
Il définit la forme de votre zone : rect (rectangle), circle (cercle), polygon (polygone irrégulier).
- l'attribut HREF
Il définit l'adresse vers laquelle va pointer votre zone.
- l'attribut COORDS
Il indique les coordonnées de la zone en pixels. Elles varient selon la forme géométrique que vous avez choisie.
L'attribut ALT :
Il est facultatif et permet d'afficher un commentaire (style 'info-bulle') quand la souris survole la zone de lien.
Le code Map peut être inséré n'importe où dans la page, mais le mieux est le mettre tout de suite derrière l'image.
Faites aussi attention de ne pas recouvrir un même endroit avec deux zones de lien différentes.
Au mieux, il ne se passera rien; au pire, il y aura un message d'erreur du navigateur...
Exemple de code de 'mapage' d'image :
<b>Cette image contient 3 liens ! Retrouvez-les en cliquant l'image...</b><br><br>
<MAP NAME=map1>
<AREA SHAPE=rect COORDS="90,90,199,142" HREF="http://www.guycuvelier.net" ALT="Lien vers la page de l'auteur">
<AREA SHAPE=rect COORDS="45,43,142,90" HREF="http://formation-html.weebly.com" ALT="Lien vers la page d'accueil">
<AREA SHAPE=rect COORDS="0,1,90,43" HREF="http://www.google.be" ALT="Lien vers Google">
</MAP><IMG USEMAP="#map1" SRC="http://users.skynet.be/guy.cuvelier/html/images/image.jpg" WIDTH=200 HEIGHT=143 BORDER=2 ALIGN=bottom>
Résultat :
J. Les cartes cliquables :
On appelle "carte cliquable" une image dans laquelle sont définies des zones associées à des liens. Selon l'endroit où l'on clique sur la carte, un lien différent est activé.
La balise :
Tout d'abord, il y a la balise <MAP>...</MAP>. Dans cette balise, il faut indiquer un nom dans l'attribut NAME.
Il faut que ce soit le même que celui donné dans le USEMAP (dit au navigateur que l'image est mappée) de votre image.
Ensuite, il y a les balises <AREA>, une pour chaque zone sur votre image.
- l'attribut SHAPE
Il définit la forme de votre zone : rect (rectangle), circle (cercle), polygon (polygone irrégulier).
- l'attribut HREF
Il définit l'adresse vers laquelle va pointer votre zone.
- l'attribut COORDS
Il indique les coordonnées de la zone en pixels. Elles varient selon la forme géométrique que vous avez choisie.
L'attribut ALT :
Il est facultatif et permet d'afficher un commentaire (style 'info-bulle') quand la souris survole la zone de lien.
Le code Map peut être inséré n'importe où dans la page, mais le mieux est le mettre tout de suite derrière l'image.
Faites aussi attention de ne pas recouvrir un même endroit avec deux zones de lien différentes.
Au mieux, il ne se passera rien; au pire, il y aura un message d'erreur du navigateur...
Exemple de code de 'mapage' d'image :
<b>Cette image contient 3 liens ! Retrouvez-les en cliquant l'image...</b><br><br>
<MAP NAME=map1>
<AREA SHAPE=rect COORDS="90,90,199,142" HREF="http://www.guycuvelier.net" ALT="Lien vers la page de l'auteur">
<AREA SHAPE=rect COORDS="45,43,142,90" HREF="http://formation-html.weebly.com" ALT="Lien vers la page d'accueil">
<AREA SHAPE=rect COORDS="0,1,90,43" HREF="http://www.google.be" ALT="Lien vers Google">
</MAP><IMG USEMAP="#map1" SRC="http://users.skynet.be/guy.cuvelier/html/images/image.jpg" WIDTH=200 HEIGHT=143 BORDER=2 ALIGN=bottom>
Résultat :
Cette image contient 3 liens ! Retrouvez-les en cliquant sur l'image...