Images
Tutoriaux, Sommaire
Html
Les images les plus couramment employées sur le Net sont les
Jpg et les Gif, exemple cornet.gif ou LogoG.jpg, (le logo
ci-dessus). Ces deux formats sont comprimés donc occupent moins d'espace disque
que l'image brute.
 |
Format Gif, nombre de couleurs
256, la compression respecte les détails de l'image originale. Une
couleur peut être déclarée transparente, exemple cornet.gif |
En déclarant la couleur blanche comme transparente, (à la
sauvegarde dans un logiciel de dessin),
 |
Format JPG, nombre de couleurs 16
millions, compression variable, (à la sauvegarde dans un logiciel de
dessin), modification des détails de l'image originale. Généralement la
taille des images est inférieure à celle en gif, on doit trouver un
compromis entre la compression et le respect des détails. Il n'y a pas de
possibilité de rendre une couleur transparente, exemple Bouee.jpg |
Pour l'image ci-dessus, cornet.gif, nous
aurons 7 Koctets, en donnée brute, (bmp), 3 Koctets en gif et 2 Koctets en jpg.
Un autre format est PNG, qui conjugue les avantages des deux
formats précédents, pour l'instant, (2001), tous les logiciels de dessin ne
traitent pas parfaitement ce format.
Pour insérer une image dans une page
html, la syntaxe est,
<img
src="images/Bouee.jpg">
Dans ce tutorial, les images sont rangées dans un sous
répertoire nommé, (avec un à propos qui confine au génie), images. si les
images avaient été dans le même répertoire, on aurait écrit
src="Bouee.jpg".
| Nous voyons sur la figure ci-contre le
contenu du répertoire HtmlTutor tel qu'on pourrait le voir sur
l'explorateur de Windows. |
 |
Cette implantation de répertoire est
recommandée car plus facile à modifier.
Exercice, afficher la forme ci-dessous, vérifiez que l'image
Bouee apparait.
Dans la syntaxe affichée, <img
src="images/Bouee.jpg">, on ne précise pas les dimensions de
l'image, dans ce cas le navigateur ajuste automatiquement les dimensions.
Cependant il est recommandé de préciser les dimensions de l'image, l'affichage
étant plus rapide. Pour Bouee.jpg nous avons largeur 100 pixels, hauteur 72
pixels. Le pixel étant la plus petite unité de
définition possible sur un moniteur donné, c'est l'unité généralement
employé pour les images. Beaucoup de moniteur ont une définition de 800 x 600
pixels, certains de 1024 x 800.
Nous écrirons donc <img
src="images/Bouee.jpg" width="100"
height="72">
Corrigé, vous
pouvez vérifier que cela ne change rien à l'affichage.
Mais cela permet de changer la taille de l'image à
l'affichage, dans la forme précédente, recopier trois fois la ligne
définissant l'image en séparant les images par un <br>.
Changer les dimensions des trois images,
en divisant par deux les dimensions,
50, 36
en multipliant par deux, 200, 144
en modifiant le rapport
largeur/hauteur, 200, 36
Corrigé.
De temps en temps une image
ne peut s'afficher, soit à cause d'un disfonctionnement de la transmission,
plus souvent parce qu'elle est absente ou qu'elle est mal orthographiée. Il est
aussi possible de supprimer l'affichage des images sur les navigateurs.
Attention, les serveurs internet sont sensibles à
la capitalisation, Bouee.jpg est pour eux différent de bouee.jpg ou Bouee.JPG.
Dans ce cas le navigateur affiche une image standard de
taille réduite
Exercice, remplacer dans la forme ci-dessous le nom Bouee par
Bouee2; (Qui n'existe pas). Corrigé.
Il est utile de faire apparaître une information remplaçant
l'image, on peut faire apparaître un texte en écrivant,
<img
src="images/Bouee2.jpg" width="100"
height="72" alt="Bouée">
Exercice, rajouter ce texte alternatif au tag image. Corrigé.
Dans le cas où l'image s'affiche normalement ce texte apparaît
quand la souris passe au dessus de l'image.
Exercice, modifier le nom de l'image pour celle existante,
Bouee et le texte alternatif en Au secours! Corrigé
Vous pouvez vérifier que dans la fenêtre volante, ce
texte s'affiche au passage de la souris.
Cette instruction, (alt), est particulièrement utile pour
rajouter des instructions, du genre "Cliquez moi".
Vous pouvez ajouter une bordure à l'image en incorporant
l'instruction border=n au tag image, où n est un 
entier positif.
Exemple,
<img border=5
src="images/Bouee.jpg" width="100"
height="72" alt="Au secours!">
Corrigé
Vous pouvez vous en servir comme cadre, mais on utilise
surtout cette instruction pour les links, (liens), comme nous le verrons plus
tard.
Plaçons une image à l'intérieur d'un
texte, comme dans la forme ci-dessous, en affichant la page, vous voyez que le
résultat n'est pas très heureux.
Insérer dans le tag image, l'instruction align=left, calage
de l'image à gauche et observez le résultat. Corrigé
. Insérer dans le tag image, l'instruction align=center,
calage de l'image au centre et observez le résultat. Corrigé
Insérer dans le tag image, l'instruction align=right,
calage de l'image à droite et observez le résultat. Corrigé
Cette page comporte une image de fond, qui
donne cet aspect de papier. Cet image apparaît ci-dessous, sur un fond bleu, on
voit qu'elle est de relativement petite dimension, 90 x 90 pixels, répétée
autant de fois qu'il le faut pour couvrir la page.
Vous trouverez sur internet de nombreux sites
qui proposent des images de fond, en jpg ou en gif. J'en ai commis quelques un
que je vous propose, dans le sous répertoire Textures.
L'instruction se place dans le tag body comme dans
l'exemple suivant,
<body background="Textures/margerit.jpg">
Exercice, changer l'image de fond, margerit.jpg en
grainbleu.jpg, changer la couleur du texte en white, (blanc). Corrigé
