Suivez-nous sur X
|
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z,
ALL
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
0,
A,
B,
C,
D,
E,
F,
G,
H,
I,
J,
K,
L,
M,
N,
O,
P,
Q,
R,
S,
T,
U,
V,
W,
X,
Y,
Z
|
|
A propos d'Obligement
|
|
David Brunet
|
|
|
|
En pratique : HTML - Position et taille des images
(Article écrit par Denis Bucher et Philippe Gauthier et extrait d'Amiga News - février 1998)
|
|
Si vous n'avez pas lu l'article du mois dernier, dépêchez-vous d'aller le lire ! Ce mois-ci,
nous approfondirons en effet certaines commandes mais nous verrons surtout comment ajouter des images...
Ce n'est pas parce que le mois dernier nous n'avons vu que des balises seules que vous ne pouvez pas spécifier des arguments ;
en effet, pour insérer une ligne de démarcation horizontale plus épaisse, il suffit de changer <HR> en <HR SIZE=4>.
Les images
Le HTML est un format de document multimédia, donc nous allons directement en profiter en ajoutant une image... C'est très simple :
il suffit d'ajouter la balise <IMG SRC="fichier" ...> à l'endroit désiré ! Comme vous le voyez cette balise
prend plusieurs arguments que nous allons étudier.
1. SRC="fichier". Indique l'emplacement de l'image. Le chemin s'indique de la même façon que pour <A HREF="fichier.html">,
à savoir :
- SRC="ANewsLogo.GIF" : le fichier se trouve dans le même répertoire que le fichier HTML.
- SRC="../ANewsLogo.GIF" : le fichier se trouve dans le répertoire parent.
- SRC="/ANewsLogo.GIF" : le fichier se trouve dans le répertoire racine (root).
- SRC="http://www.site.fr/ANewsLogo.GIF" : le fichier se trouve à un endroit précis.
2. WIDTH=nn, HEIGHT=nn : indique la taille désirée de l'image en pixels. Si vous ne mettez pas la vraie taille de l'image,
un redimensionnement aura lieu (si le navigateur le gère). Mettez toujours une taille, car certains navigateurs
affichent plus vite la page s'ils connaissent les tailles à l'avance...
3. ALT="Description" : vous devez toujours mettre cet argument pour deux types de personnes : d'une part, ceux qui ne chargent
pas les images pour gagner du temps, d'autre part - et c'est plus important - les aveugles et malvoyants qui utilisent des
navigateurs en mode texte. Si votre image est un bouton, décrivez sa fonction, sinon décrivez l'image. Si cette image ne contient
que du texte, ALT="" doit contenir le texte en question. Vous pouvez trouver des conseils plus poussés pour respecter les
aveugles ainsi que tous les autres handicapés sur le site
trace.wisc.edu/docs/html_guidelines/htmlgide.htm,
mais mettre cette balise est suffisant.
Copions maintenant une image dans le répertoire où se trouvent nos exemples HTML et créons un nouvel exemple que nous sauverons
sous "exemple10.html".
<HTML>
<HEAD>
<TITLE>
Un essai pour le cours HTML n°2
</TITLE>
</HEAD>
<BODY>
<IMG SRC="ANewsLogo.JPEG" WIDTH=194 HEIGHT=90 ALT="AmigaNEWS & Vidéo Numérique">
<H1>Le site de votre magazine préféré</H1>
</BODY>
</HTML>
|
Rien ne vous empêche d'ajouter les commandes que l'on a appris le mois dernier... Il n'y a pas grand-chose d'autre à savoir, mais,
en lisant la suite, vous éviterez pas mal d'erreurs de débutants :
- Testez toujours vos pages pour que les visiteurs de votre site n'aient pas de surprises, par exemple une image introuvable...
N'oubliez pas que sur Internet (sur Unix, en fait) les noms suivants représentent trois fichiers différents : "Fichier", "fichier",
"ficHiER". Les autres erreurs sont souvent dues à un mauvais chemin, une faute de frappe ou une image corrompue...
- Actuellement, les deux seuls formats utilisables dans vos pages (afin de garder une compatibilité avec tous les navigateurs)
sont le GIF et le JPEG. AWeb gérera le IFF-ILBM et Netscape certains formats PC, mais pas le contraire. Le PNG est un format
appelé à remplacer le GIF, mais c'est de la musique d'avenir...
- Dans le cas où vous voudriez rendre le chargement de vos pages interminable et ne pas en comprendre la raison, utilisez un
éditeur de pages HTML (pas un éditeur de texte), insérez une image de 500 ko et réduisez-la : l'image paraîtra plus petite, mais
le fichier restera aussi grand ! Alors, à moins d'être sûr de ce que vous faites, évitez d'indiquer une taille plus petite que
la taille réelle de l'image ; mieux vaut réduire sa taille originale afin de gagner quelques kilo-octets.
Surveiller la taille de vos images
La taille en ko de vos images est en effet très importante ; il s'agit sans doute d'une des choses les plus importantes à vérifier
au moment de la création ou du choix de vos images. Voici les maximas que je conseillerai pour les tailles de vos images :
- Petits boutons : 2 à 4 ko.
- Gros boutons contenant du texte ou "bannières" : 7 ko.
- Image de 20 à 40 ko : deux images par page.
- Image de plus de 40 ko : une par page.
- Toute image : 90 ko.
Il y a de nombreux moyens de réduire la taille des images sans perdre en qualité :
Le premier de ces moyens est la réduction de couleurs. En effet, lors de la création d'une image, on a tendance à utiliser trop de
couleurs : or, saviez-vous que vous pouvez réduire le nombre de couleurs réelles de l'image sans visuellement perdre des couleurs ?
En effet, grâce au tramage ou à Floyd-Steinberg (dans Personal Paint par exemple), les couleurs supprimées seront remplacées par un mélange
des couleurs restantes afin d'obtenir la même couleur que précédemment. Imaginez une image dans laquelle vous utiliseriez un
dégradé en 16 couleurs de rouge à blanc : trois ou quatre couleurs suffiraient pour ce dégradé, par exemple rouge, blanc, rose.
Dans beaucoup de cas, cela vous permet de gagner beaucoup de place donc de temps au téléchargement...
La seconde méthode est la taille en pixels. Pour afficher une grande image, peut-être que l'agrandissement (avec WIDTH et HEIGHT)
d'une version plus petite serait suffisant dans certains cas.
Enfin, il existe la compression (mais avec pertes) du JPEG. En tant qu'utilisateur Amiga, nous connaissons son désavantage principal
qui est le temps processeur consommé pour la décompression. De plus, le mythe du JPEG si bien compacté est faux, car l'avantage
du JPEG (toujours 16 millions de couleurs) contre le GIF (4 ou 16 couleurs possibles) est loin d'être systématique. Je ne
conseillerai donc le JPEG que pour des photographies.
Pour apprécier ces méthodes, admirez la figure 1, où la plupart de ces méthodes sont cumulées : comme c'est une photo, on passe
de GIF à JPEG avec 20% de pertes et on n'a pas réduit les couleurs mais les dimensions (de moitié). Le résultat est saisissant car
la différence visuelle est négligeable mais la taille du fichier a été divisée par 10 !
Autres arguments pour les images
Venons-en maintenant à quelques autres arguments gérés par la balise IMG qui sont moins importants et dont vous n'aurez pas
besoin dès le début :
4. ALIGN=type (par exemple <IMG SRC="file" ALIGN=TOP>). TOP : le haut de l'image s'aligne avec le haut de l'élément le
plus haut de la ligne de texte. MIDDLE : le milieu de l'image s'aligne avec la "base" du texte. BOTTOM : le bas de l'image
s'aligne avec la "base" du texte.
5. ALIGN-type (peut être présent en même temps que le précédent) signifie que l'image est une image "flottante" et que
le texte va se répartir autour. Le type indique sur quelle marge est fixée l'image LEFT ou RIGHT. Remarque : avec HSPACE=nn
et VSPACE=nn, vous pouvez définir des marges pour le texte autour de votre image flottante.
6. BORDER=nn. Si l'image est un lien hypertexte sur un autre document, alors cet argument indique l'épaisseur de cette
bordure. BORDER=0 pour ne pas en avoir. Voici un exemple frappant qui vous montre aussi comment créer un lien depuis une image :
<a href="http://www.amiganews.com/">
<IMG SRC="Bouton.gif" ALT="[*]" BORDER=10></a>
|
|
