|
|
|
HTML - Les images
|
Autre langage disponible pour cet article : 
Rubrique : HTML
lundi 25 mars 2002 18:38
|
Voir les commentaires pour HTML - Les images
|
- Les attributs
- Une info-bulle (ALT)
- Les dimensions (HEIGHT et WIDTH)
- L'alignement (ALIGN)
- Une bordure (BORDER)
- Les marges (HSPACE et VSPACE)
Le principal attrait d'un site (pas le mien en tout cas!) réside dans les images. Certaines
pages en accumule même au point de faire exploser votre modem lors du chargement de la page,
à coup de kilo-octets et même de méga-octets dans les cas les plus extrèmes.
Il n'en reste pas moins que pour afficher une image sur une page, il faut utiliser la balise
de type marqueur <IMG> (il existe un autre moyen que nous verrons plus tard).
Vu que cette balise ne va pas créer l'image comme ça, il va falloir lui préciser son emplacement
via une URL finement placée dans la valeur de l'attribut src :
<IMG src="http://www.cybwarrior.com/langages/images/pirate.gif">
Ce qui donne :
Il existe deux standards de formats d'images utilisés sur la toile : le GIF et le JPEG. En fait,
le principe réside sur le fait de compresser au maximum le fichier, tout en conservant son caractère
esthétique.
Pour résumer de façon imagée (décidemment, on est dedans !) la compression, voilà ce qu'on pourrait
dire : imaginez que vous partez en vacance. Evidemment, la copine à encore prévu plus que le
minimum vital et la valise ne ferme pas (c'est pas du vécu ?). Il y a alors deux choses à faire :
- Avec votre force herculéenne, vous réussissez au prix d'un effort collosal et surhumain
à tasser, tasser, tasser toutes ses affaires et à boucler la valise. Ce type de compression
sans perte d'information est celle utilisé par les GIF.
- Où alors, vous regardez les friches qui décidemment ne sont pas mettables et que vous (et
elle ?) acceptent de laisser at home. Tant pis si il n'y a pas tout. C'est la compression
utilisée par l'autre type d'images, les JPEG : on gagne de la place, mais on contre partie,
on perd des informations, au detriment de la qualité de l'image.
De plus, les GIF permettent de créer des petites animations, tel que vous pouvez les voir en
bas ce cette page (joli, n'est ce pas ?), et en plus, elles peuvent avoir un fond transparent,
comme celui d'une icone. Par contre, on ne peut pas utiliser plus de 256 couleurs.
Pour les photos, ce format est donc mal adapté.
Le format JPEG est celui utilisé pour stocker les photos (et mon guerrier). On peut utiliser des
"vrais" couleurs, puisque il supporte le 24 bits. Par contre, si vous voulez réduire votre temps de chargement
par respect de vos visiteurs, il vous faudra compresser l'image et accepter de perdre certains
détails. C'est ce qui est arrivé à mon guerrier qui était beaucoup mieux avant.
Les attributs
Une info-bulle (ALT)
L'attribut alt permet de faire apparaitre une info-bulle lorsque le lecteur laisse sa
souris un certain temps au dessus de l'image.
Mais cette attribut permet également d'écrire un texte à la place de l'image, lorsque celle-ci
n'a pas été chargé à cause du sur-traffic ou bien parce que le visiteur les a tout simplement
désactivées.
Je vous conseille fortement l'emploi de cet attribut, car certains moteurs de recherche ou annuaires,
comme Lycos, refusent de référencer une page dont les images n'ont pas leur attribut alt
rempli.
L'emploi est simple :
<IMG src="mauvaislien" alt="El pirato">
Ce qui donne :
Les dimensions (HEIGHT et WIDTH)
Lorqu'une image est trop grande pour rentrer dans l'emplacement qui lui était alloué au départ,
on peut modifier son format, soit en l'agrandissant, soit en la réduisant, par le biais des attributs
height et width.
Pour ceux qui ne connaissent pas l'english, height correspond à la hauteur, et
width à la largeur.
La valeur de ces deux attributs peut être de deux types :
- En pixels : no comment, les dimensions sont représentées en pixels.
- En pourcentages : ici, l'image est redimensionnée en fonction du calcul d'un pourcentage.
Ainsi, pour afficher mon guerrier sur cette page et le faire rentrer je peut écire :
<IMG src="http://www.cybwarrior.com/langages/images/bromelfe.jpg" height="100"
width="100">
Ou bien en spécifiant un pourcentage :
<IMG src="http://www.cybwarrior.com/langages/images/bromelfe.jpg" width="25%">
L'intêret d'utiliser un pourcentage n'est pas des moindres. En effet, ce pourcentage est calculé
en fonction du conteneur de l'image (la page, la cellule du tableau...). Ce qui fait que quel
que soit la configuration de l'écran de votre visiteur, l'image pourra en thérorie être affichée.
L'alignement (ALIGN)
L'attribut align permet d'aligner une image soit horizontalement, soit verticalement.
À l'horizontal, on ne peut la positionner que à gauche ou à droite. Pour la centrer, il faudra
utiliser autre chose que cet attribut.
- Pour l'aligner à gauche, la valeur à employer sera
left
- Pour la droite, se sera
right
Ainsi :
<IMG src="http://www.cybwarrior.com/langages/images/pirate.gif" align="right">
L'alignement vertical ne permet pas de définir son emplacement dans la page, mais sur la ligne.
On utilisera une des valeur suivantes :
toppour un alignement en hautmiddle pour le milieu- et
bottom pour le bas
Voici les différents effets produits :
align="top"
align="middle"
align="bottom"
Une bordure (BORDER)
On peut au choix, faire apparaître une bordure autour de l'image avec l'attribut border.
Cependant, la couleur ne pas être défine, du moins pas par ces moyens. La valeur est exprimée
en pixels :
<IMG src="http://www.cybwarrior.com/langages/images/pirate.gif" border="1">
Résultat :
Les marges (HSPACE et VSPACE)
On peut définir les espaces verticaux et horizontaux à laisser entre l'image et le reste du document.
On utilise pour cela l'attribut hspace pour l'espace Horizontal et l'attribut
vspace pour l'espace Vertical. Là aussi, la valeur à spécifier est en pixels.
Ceci est une phrase au dessus de l'image
<IMG src="http://www.cybwarrior.com/langages/images/pirate.gif" hspace="20"
vspace="20">
Ceci est une phrase au dessus de l'image
|
Voir les commentaires pour HTML - Les images
|
|
|
|
Accueil
Membres
Forum
Articles
Download
Sondages
Outils
Scriptland
ProgBoards
La Paix rationnaliste
