|
|
<Afficher une="Image">
1. Quel format ?
La balise <img> est la pour afficher une image dans une page HTML, elle s'utilise très librement et peu comprendre beaucoup d'attributs.
Pour les testes je vais utiliser cette image
(Vous pouvez telecharger cette oeuvre d'art pour vos testes)
Tout d'abord tant que votre image est standard elle est affichable (quand je dis standard je ne parle pas d'un .xpm ou d'un .pcx).
A vous de faire votre choix de format :
|
|
gif
|
png
|
jpeg
|
bmp
|
|
Animation | Possible | Non | Non | Non
|
|
Transparence | Partiel | Total | Non | Non
|
|
Poids | Leger | Nombre de couleurs | Variable | Taille de l'image
|
|
Compression | 256 couleurs | Excellente | Tres Moyenne | 24 bit (lourd)
|
Personnellement je deconseille le Bmp car il est trop lourd, et je conseille le png qui est tres pratique (bien que sous Internet Explorer, sa transparence n'est geré que depuis la version 7, alors qu'elle est native sous Firefox), mais chaque format a son lots de points forts.
2. Affichage
Bien, pour la suite l'attribut a utiliser pour chercher notre image est src ( sou rce).
il prend tout betement l'adresse de votre image par rapport a votre page web, j'explique plus en detaille :
Cas n°1
|
Votre page se nomme "index.html" et vous voulez afficher l'image nommée "image1.png", on voit bien que ces deux fichier sont dans le meme dossier, donc rien de plus simple, il suffit de nommer le fichier directement :
<img src="image1.png">
En revanche si vous disirez afficher l'image "dragon3.png" il faut definire par quel(s) dossier(s) on doit passer a partir de votre page web (index.html pour ce cas) pour atteindre l'image, ainsi le code est :
<img src="dragon/dragon3.png">
|
Cas n°2
|
Dans l'autre sens il faut savoir comment reccuperer une image qui est dans le dossier supperieur, c'est on ne peut plus simple, "../" represente le dossier racine (celui du dessus) ainsi :
<img src="../dragon1.png">
Et si l'image etait encore dans un dossier plus haut :
<img src="../../wallpaper.png">
et ainsi de suite.
|
Cas n°3
|
L'adresse de cette image est http://bddy.free.fr/dl_m/q4ss_m.png, pour l'integrer a votre page sans avoir a la copier dans vos dossier, il faut simplement declarer sa source avec cette adresse donc :
<img src="http://bddy.free.fr/dl_m/q4ss_m.png">
et voila le travaille.
|
3. Attributs de l'image
Comme je l'ai dit plus haut, <img> peut prendre beaucoups d'attributs, je vais donc presenter les plus important :
|
Code :
|
Resultat :
|
width et height sont deux attributs qui vont modifier la taille de l'image, leur valeur peu etre en pixel ou en pourcent :
Si un seul des deux attributs est modifié, le second s'appliquera proportionnellement.
|
|
<img src="img/images/image.gif" width="95%" height="100">
|
|
alt et title n'ont pas le meme role, alt affiche un message alternatif, si l'image viens a manquer, sous IE, ce texte est affiché tel un titre au passage de la souris, pas sous Firefox, puisque l'affichage du texte est normalement attribué a title.
Posez les deux attributs en meme temps est tout a fait possible, voir recommandé dans certain cas.
|
<img src="img/images/image.gif" alt="Texte">
<img src="img/images/image.gif" title="Texte">
|
|
4. Mise en Page
C'est bien jolie tout ca mais on peut aller plus loin, une image peut etre mise en arriere plan, qu'elle soit animé (gif animé) ou non, qu'elle soit transparente ou non, qu'elle soit moche ou non.
Pour ce faire il n'y a rien de plus difficile (rahh ce que c'est simple le HTML), l'attribut a utiliser est background, ce qui veut dire arriere plan :p.
Cet attribut est utilisable un peu partout, par exemple dans le <body> d'une page web, comme dans une cellule <td> d'une table.
Donc <body background= "img/images/image.gif"> appliquera "image.gif" a tout l'arriere plan de ma page comme dans cet exemple
Pour finir je vais parler des alignements des images vis a vis du reste. exemple tout bete :
|
Code :
|
Resultat :
|
|
<img src="img/images/image.gif">Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure.
|
Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure
|
|
<img src="img/images/image.gif" align="left">Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure.
|
Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure
|
|
<img src="img/images/image.gif" align="right">Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure.
|
Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure.
|
|
<img src="img/images/image.gif" align="center">Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure.
|
Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure
|
|
<img src="img/images/image.gif" align="left"><img src="img/images/image.gif" align="right">Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure
|
Texte d'exemple pour comprendre l'importance de l'alignement d'une image par rapport a ce qu'il l'entoure
|
Ajoutons des ressources a votre site grace aux liens
|
|
