| Des images sur sa page |
|
 |
Petit rappel utile à ceux qui
prennent ce manuel en route : les deux formats d'images à
utiliser sur le web sont
- le format JPEG
(dont l'extension est .jpg). Le JPEG est recommandé pour les images aux tons
dégradés, les photos et les illustrations.
- le format GIF de Compuserve
Le GIF sera préféré pour les images contenant des a-plats (larges zones
de couleurs uniformes), des traits, nécessitant de la précision.
Le GIF est par ailleurs doté d'une option "GIF entrelacé" qui permet de charger
ligne par ligne l'image lors de l'ouverture de la page.
C'est ce format qui permet de fabriquer des images transparentes
(c'est à dire sans fond) ou animées.
Hormis ces caractéristiques que ne possède pas le JPEG,
ces deux formats donnent des résultats assez équivalents à l'affichage.
Ils s'obtiennent par conversion, souvent à l'aide d'éditeurs graphiques.
Une attention toute particulière
doit être portée à la taille de vos images. Plus l'image sera grande
et/ou lourde, plus le temps de chargement de votre page sera long.
| |
Portraits d'images web |
|
La balise qui permet d'insérer une image au sein d'une page Web est la
balise <IMG>, qui est
une balise unique: il n'y a pas de balise de fermeture.
Cette balise ne s'utilise jamais sans
l'attribut SRC, qui permet d'indiquer quelle image insérer :
<IMG SRC=/old?u=http%3A%2F%2Fwww.club-internet.fr%2Fpagespersos%2Fmanuels%2F%26quot%3BAdresse&y=1999 de l'image">
L'adresse de l'image est exactement
de la même forme que l'adresse d'un lien, l'image se trouvant elle
aussi sur un serveur web.
Ainsi, cette adresse pourra être
- un «lien externe»
du type "http://serveur/repertoire/image.gif"
- mais aussi un
«lien local» simple: "image.gif" ou mixte : "images/image.gif"
si vos images se trouvent dans un répertoire nommé images.
La balise <IMG> possède par ailleurs
de nombreux autres attributs dont les attributs ALT, WIDTH et HEIGHT
qui, si ils sont facultatifs, n'en sont pas moins très recommandés :
- L'attribut ALT
permet d'indiquer
le nom de l'image, qui apparaît
dans le cadre délimitant cette dernière lors de son chargement.
Cet attribut est également utile pour les navigateurs où l'option
"charger les images" a été désactivée.
Syntaxe : <IMG SRC="Adresse de l'image" ALT="Nom de l'image">
- Les attributs WIDTH et HEIGHT
(attributs de taille) servent à
donner
la largeur et la hauteur
(en pixels) de l'image. Ces données
sont indispensables au navigateur pour calculer la place à réserver
à l'image au moment du chargement de la page, ce qui évite une
mise en page en différentes étapes.
Syntaxe : <IMG SRC="Adresse de l'image" WIDTH="largeur en pixel"
HEIGHT="hauteur en pixel">
- L'attribut BORDER
détermine
si l'image est encadrée ou non, et
le cas échéant
la taille du cadre. Si l'image ne doit
pas être encadrée, alors on entrera comme taille de cadre le chiffre 0.
Syntaxe : <IMG SRC="Adresse de l'image" BORDER="taille du cadre
en pixel">
- L'attribut ALIGN
est optionnel. Il indique
l'alignement de l'image
par rapport au texte qui l'entoure. Cinq possibilités : top, middle,
bottom, left ou right.
Syntaxe : <IMG SRC="Adresse de l'image" ALIGN="l'un des cinq qualificatifs">
Tout comme pour les autres balises
à attributs, les attributs de la balise IMG peuvent s'additionner au sein de
cette balise.
On peut ainsi tout à fait écrire :
<IMG SRC="Adresse de l'image" ALT="Nom
de l'image" BORDER="taille du cadre en pixel" WIDTH="largeur en
pixel" HEIGHT="hauteur en pixel">
soit par exemple :
<IMG SRC="/old?u=http%3A%2F%2Fwww.club-internet.fr%2Fpagespersos%2Fmanuels%2Fimage.jpg&y=1999" ALT="Hirondelle" BORDER="0" WIDTH="140" HEIGHT="65">
Enfin,
une image peut elle aussi être un lien hypertexte.
On la nomme alors souvent «Image cliquable». Il suffit pour cela d'agir avec la
balise <IMG> comme si elle était le titre du lien, et de l'encadrer
des balises de liens.
Syntaxe :
<A HREF="Adresse du lien"><IMG SRC=/old?u=http%3A%2F%2Fwww.club-internet.fr%2Fpagespersos%2Fmanuels%2F%26quot%3BAdresse&y=1999
de l'image"></A>
A savoir: les images cliquables sont
systématiquement entourées d'un cadre à la couleur du lien (bleue,
par défaut). Pour supprimer ce cadre, il suffit d'utiliser l'attribut
BORDER="0" dans la balise <IMG>
|
Retour : liens |
|
La suite : tableaux |
|
|
|
