Les images :
Les navigateurs Html reconnaissent trois formats d'images : les images gif, jpg et png.
Comment insérer une image sur votre page :
L'insertion d'image se fait par la balise suivante :
<img src="nom de votre image.jpg/gif">
le "img src " caractérise l'affichage de l'image stockée dans un fichier dont l'adresse est donnée par le chemin entre guillemets .
Exemple : <img src="image.gif"> ou <img src="image.jpg">
Le paramètre ALIGN de <img src…>
La balise d'insertion d'image, doit être précisée par l'ajout des paramètres suivants :
<img src= "image.gif" align=TOP|BUTTOM|MIDDLE|LEFT|RIGHT>
- Les valeurs TOP|BUTTOM|MIDDLE sont utilisées lorsqu'on veut adapter des images à un court texte (légende de l'image).
- Les valeurs LEFT|RIGHT permettent de border l'image avec un texte explicatif:
- Pour mettre le texte en dessous de l'image, il suffit d'utiliser un paramètre spécial <BR CLEAR ="ALL">
Exemple: <img src= "image.gif" align=left><BR CLEAR ="ALL">
Réglage des dimensions de l'image
Deux paramètres permettent de modifier ou définir la taille des images en pixel.
Ø width = 100
Cet attribut définit la longueur de l'image
Exemple: <IMG SRC = "image.gif" width=100>
Ø height = 50
Cet attribut définit la hauteur de l'image
Exemple: <IMG SRC = "image.gif" height=100>
Autre paramètres de <IMG SRC…>
Ø hspace = 10
Cet attribut définit l'espacement horizontal avant l'image, c'est à dire que plus ce nombre sera élevé, plus l'image se décalera sur la droite de l'écran;
Exemple : <IMG SRC = "image.gif" hspace=10>
Ø vspace = 10
Cet attribut définit l'espacement vertical avant l’image, c'est à dire la distance au texte dans le sens vertical, en bas et en haut de l'image.
Exemple : <IMG SRC = "image.gif" vspace=10>
Ø ALT = "texte"
Cette balise permet d'afficher du texte à la place de l'image ou avant que celle-ci apparaisse.
Exemple : <IMG SRC = "image.gif" ALT="Briques">
Compléments : Motif de fond
Pour utiliser une image comme motif de fond d'une page Html, on insère le paramètre Background, dans la balise Body.
Exemple : <Body Background = "image.gif" >