Obligement - L'Amiga au maximum

Lundi 11 décembre 2017 - 18:01  

Translate

En De Nl Nl
Es Pt It Nl


Rubriques

 · Accueil
 · A Propos
 · Articles
 · Galeries
 · Glossaire
 · Hit Parade
 · Liens
 · Liste jeux Amiga
 · Quizz
 · Téléchargements
 · Trucs et astuces


Articles

 · Actualité (récente)
 · Actualité (archive)
 · Comparatifs
 · Dossiers
 · Entrevues
 · Matériel (tests)
 · Matériel (bidouilles)
 · Points de vue
 · En pratique
 · Programmation
 · Reportages
 · Tests de jeux
 · Tests de logiciels
 · Tests de compilations
 · Articles divers

 · Articles in english
 · Articles in other languages


Twitter

Suivez-nous sur Twitter




Liens

 · Sites de téléchargements
 · Associations
 · Pages Personnelles
 · Moteurs de recherche
 · Pages de liens
 · Constructeurs matériels
 · Matériel
 · Autres sites de matériel
 · Réparateurs
 · Revendeurs
 · Presse et médias
 · Programmation
 · Développeurs logiciels
 · Logiciels
 · Développeurs de jeux
 · Jeux
 · Autres sites de jeux
 · Scène démo
 · Divers
 · Informatique générale


Jeux Amiga

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


Trucs et astuces

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


Glossaire

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


Partenaires

Annuaire Amiga

Amedia Computer

Relec

Hit Parade


Contact

David Brunet

Courriel

 


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 !

HTML

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>


[Retour en haut] / [Retour aux articles] [Article précédent]