arbre

<IMG>

La balise pour introduire une image dans une page HTML est <img>. Ses principaux attributs sont :

src

src détermine le chemin du fichier image. ce chemin peut être indiqué en partant du répertoire du document, il se présentera alors sous la forme "../../images/fichier.gif". Il peut également être indiqué en partant de la racine principale du site. Il aura alors la forme : "/exemple/images/fichier.gif". Il commencera toujours par /.
La balise minimale pour une image se présente ainsi :

<img src="/images/valid-html401.gif">

height, width

Lorsque vous introduisez plusieurs images sur votre page, vous verrez que lors de l' affichage, elle se met à danser. C' est très desagréable.Cela vient du fait que la taille de l' image n' est pas définie.En plus, cela ralentit l' affichage de la page.
height et width indiquent au navigateur la hauteur et la largeur de l' image (en pixel) qui va être affichée:

<img src="/images/valid-html401.gif" width="88" height="31">

Pour ajuster une image à une dimension précise tout en conservant les proportions, il suffit de préciser soit la hauteur, soit la largeur et automatiquement l' une ou l' autre des dimensions s' alignera sur celle que vous aurez spécifiée.


<img src="/images/valid-html401.gif" width="160" >

alt

Cet attribut permet l' affichage dans une bulle de texte. Lorsque l' affichage de l' image ne se déroule pas correctement, ce même texte apparaîtraà la place de l' image Comme le net devient très fréquenté par les non-voyants, il est important d' utiliser cet attribut pour expliquer l' image Passez la souris sur la première image pour voir s' afficher la bulle. L' image du second exemple est volontairement inexistante pour montrer la manière dont cet attribut s' affiche.

exemple <img src="/images/valid-html401.gif" width="88" height="31" alt="exemple">
exemple <img src="/images/valid-html4011.gif" width="88" height="31" alt="exemple">

longdesc

Cet attribut définit l' adresse d' un document décrivant l' image Pour le moment, je n' ai jamais trouvé d' exemple permettant de comprendre cet attribut.

<img src="/images/valid-html401.gif" width="88" height="31" longdesc="description.txt">

lowsrc

Cet attribut définit l' adresse d' une image à basse résolution.

<img src="/images/valid-html401.gif" width="88" height="31" lowsrc="/images/valid-html401.gif">

name

Cet attribut permet de un nom à votre image. Elle est surtout employée lorsque vous voulez travailler avec du javascript

exemple <img src="/images/valid-html401.gif" alt="exemple" name="Exemple" width="88" height="31" id="Exemple">

border

Cet attribut permet de définir (en pixel) une bordure à votre image.

exemple <img src="/images/valid-html401.gif" alt="exemple" width="88" height="31" border="5">

Elle est assez peu employée sous cette forme.
Lorsque vous utilisez une image comme lien, le navigateur affiche automatiquement une bordure.

exemple <a href="#"><img src="/images/valid-html401.gif" alt="exemple" width="88" height="31"></a>

La définition d' une bordure à 0 pixels permet d' éviter ce cadre disgracieux.

exemple <a href="#"><img src="/images/valid-html401.gif" alt="exemple" width="88" height="31" border="0"></a>

align

La position de l' image dans votre page est déterminé par cet attribut. Deux positions sont fréquemment utilisées seule: gauche ou droite.

exempleessais
<img src="/images/valid-html401.gif" alt="exemple" width="88" height="31" align="left">
exemple
<img src="/images/valid-html401.gif" alt="exemple" width="88" height="31" align="right">

Cet attribut prend vraiment toute son importance lorsque l' image est accompagnée de texte.

Exemple d' alignement

par défaut
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

Ligne de base : align="baseline"
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

En haut : align="top"
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

Au milieu : align="middle"
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

En bas : align="bottom"
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

En haut du texte : align="texttop"
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

Milieu absolu : align="absmiddle"
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

Bas absolu : align="absbottom"
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

Gauche : align="left"
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

Droite : align="right"
exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.

hspace, vspace

Ces deux attributs permettent de définir (en pixels) une marge entre l' image et le reste du contenu. La lisibilité du document en est fortement amélioré.

<p align="justify"><img src="/images/valid-html401.gif" alt="exemple" width="88" height="31" hspace="10" vspace="10" border="0" align="left">Lor si blan ...

exempleLor si blan ulput augiam dolortionsequi blaortionsequis alit wisit velit vero od dipsummy nonulputet praessim augue min ute feu feu feugiam eros nis delendrem num quatue dunt luptat luptat nos euguerat.
Lor aliquis eum iuscillutpat. Ut lore dolor se magniscidunt lobortie tet, suscin volore euis ad eugait wisi tio od modolum zzriustie mincip eugait acinit nim dolortisisl ex endipsusc llaortinit non ut ulla feu feugait wismodolobor iure tetuercil utat. Ut ad dionsequat ut nos nulla feugiam ad magnis ad tatuerit inis ad do consequatue euip erciliquamcon utpate modoloborperat aut alisit adiam eugait, sequamexemple quisl et dit illa at utet exerostio et lore commy nonsequat, velis nummy nulla feuipit non ullam, sit, consenisi eu feumsandre faci bla corpercil ulla feuguero odipis nim iusci ea consequipit wis adit ut acillumsa dreetuerit laore dolore facilit venis etumsan esed tem alis nonsequat dunt aut la conulputem zzril ut adiam ad min vercin hendreetum nostrud tionullum in veraessequip ea acin enim zzrit ea ad tin vel dolestie vel dolorperillut lum niscil dignim atum venibh eugiate te magna facilis acilluptat.

Populassite.com : moteur de recherche faisant augmenter votre trafic !
Toutes les heures, le serveur contrôle que votre site est en ligne. En cas de problème, un mail vous est envoyé.
Vous avez l'habitude d'oublier les dates importantes? Oubli vous prévient gratuitement par email !

Page modifiée le 09/01/2007 CCBot/1.0 (+http://www.commoncrawl.org/bot.html)4830 visiteur(s) aujourd'hui
Comment créer son site

IMG... Images dans votre pages