Leçon 4 : Les images

Comme celles-ci ;) (désolée, je suis fan de Calvin & Hobbes...)

Avant tout, voici le corrigé de la leçon 3

L'attribut utilisé avec la balise lien de la leçon 3 était target. Deux valeurs ont été employées:
* <A HREF="toto.htm" TARGET="_top">Toto</A> : ouvre le lien dans dans la même fenêtre que celle de l'appel.
* <A HREF="toto.htm" TARGET="_blank">Toto</A> : ouvre le lien dans une nouvelle fenêtre du navigateur.

Fonctionnement du lien surprise: on peut faire pointer un lien vers une section particulière d'une page en utilisant la syntaxe suivante: <A HREF="toto.htm#section1">Toto</A> : la page toto.htm s'affichera à hauteur de la section 1.
Attention à bien mettre la balise <A NAME="section1"></A> là où c'est nécessaire dans la page toto :).

En ce qui concerne les liens courriel, voici la liste des petits "bonus" et leur effet:
* lien mail simple :

Introduction

Objectif : Insérer une ou des images dans une page web

Tout, ou presque, pour créer une belle page, haute en couleurs et avec des images... mais aussi comment faire un lien de cette image.

La réduction des données étant la règle sur le web, deux formats de fichiers images sont pris en charge, GIF et JPG (ou JPEG) qui sont des formats hautement comprimés.
* Le format GIF (Graphics Interchange Format) présente l'inconvénient d'être limité à 256 couleurs, mais dipose de trois points forts :
1 - Ces fichiers se composent par couches et non par lignes ce qui permet au surfeur de voir rapidement l'image en chargeant une page web, même si cette image est floue au départ, sa quelité s'améliore avec l'arrivée de chaque nouveau paquet de données.
2 - On peut rendre transparent un fichier GIF.
3 - On peut en faire des animations (GIF animés).
* Le format JPEG : c'est le format adapté aux photos puisqu'il permet de représenter jusqu'à 16.7 millions de couleurs.

Si tu souhaites utiliser une image qui n'est ni au format GIF ni au format JPG, il suffit de l'ouvrir dans un logiciel de dessin type Paint Shop Pro (non je n'ai pas d'actions...) et de l'enregistrer au format GIF ou JPG suivant sa nature.

Insérer une image

La balise d'insertion

<IMG SRC="calv01.gif"> (pas de contre balise, ce qui est logique puisqu'il ne s'agit pas ici de formater du texte mais d'insérer un objet) permet d'afficher l'image calv01.gif :
.

N.B. : Lorsque l'image se trouve dans le même dossier que le fichier qui charge l'image, pas de problème, il suffit d'indiquer son nom. Si ce n'est pas le cas, comme on l'a vu pour les liens, il faudra indiquer au navigateur l'adresse relative ou absolue du fichier.

Les attributs

Indication de taille d'une image

<IMG SRC="calv01.gif" HEIGHT=60 WIDTH=47> affiche
* HEIGHT indique la hauteur en pixels de l'image.
* WIDTH indique la largeur en pixels de l'image.
J'ai utilisé ces attributs pour redimensionner l'image à 50% de sa taille originale. On peut utiliser ces attributs ensemble (attention au respect des proportions pour ne pas déformer l'image) ou séparément:
<IMG SRC="calv01.gif" HEIGHT=100 WIDTH=47> affiche
<IMG SRC="calv01.gif" HEIGHT=60> affiche
<IMG SRC="calv01.gif" WIDTH=47> affiche

Alignement d'une image

Tu peux utiliser la balise <CENTER></CENTER> pour centrer l'image. Mais il existe un attribut qui permet d'aligner mais aussi de définir la position de l'image par rapport au texte : ALIGN (pas vraiment une surprise...). En voici quelques exemples :

<IMG SRC="calv01.gif" HEIGHT=30 ALIGN="left"> affiche :


<IMG SRC="calv01.gif" HEIGHT=30 ALIGN="right"> affiche :



<IMG SRC="calv01.gif" HEIGHT=60 ALIGN="absbottom"> Calvin est créé par Bill Waterson affiche
Calvin est créé par Bill Waterson

<IMG SRC="calv01.gif" HEIGHT=60 ALIGN="absmiddle"> Calvin est créé par Bill Waterson affiche
Calvin est créé par Bill Waterson

<IMG SRC="calv01.gif" HEIGHT=60 ALIGN="baseline"> Calvin est créé par Bill Waterson affiche
Calvin est créé par Bill Waterson

<IMG SRC="calv01.gif" HEIGHT=60 ALIGN="bottom"> Calvin est créé par Bill Waterson affiche
Calvin est créé par Bill Waterson

<IMG SRC="calv01.gif" HEIGHT=60 ALIGN="texttop"> Calvin est créé par Bill Waterson affiche
Calvin est créé par Bill Waterson

Espacement par rapport à l'environnement et bordure

On peut ajouter l'attribut BORDER pour entourer l'image d'un cadre; la syntaxe sera la suivante : BORDER=valeur.
Pour éviter qu'un texte ne touche l'image, ce qui n'est pas vraiment esthétique, on peut définir une distance minimale à l'aide des deux attributs HSPACE=valeur (distance entre l'image et le texte à côté - H comme horizontal...) et VSPACE=valeur (distance entre l'image et le texte du dessus et du dessous - V comme vertical...).
N.B. Pour ces trois attributs, les valeurs sont exprimées en pixels.

Utiliser une image comme lien

C'est tout simple, il suffit de combiner ce que tu as appris dans la leçon précédente et dans celle-ci :
<A HREF="mailto:truc@machin.bidule"><IMG SRC="truc.gif"></A>.
Par exemple, le code source <A HREF="mailto:smz@libertysurf.fr"><IMG SRC="mail.gif"></A> produit le lien suivant : .

N.B. : On peut copier une image en cliquant dessus avec le bouton droit de la souris.
N.B. 2 : Pour transmettre plusieurs fichiers facilement, on peut par exemple les compresser avec WinZip.

Regarde attentivement le code source (comme d'habitude ;p) !) et trouve les attributs utilisés pour la balise <HR> : par des essais successifs avec différentes valeurs, essaie de bien en comprendre le fonctionnement. Trouve aussi comment j'ai affiché ces jolis nuages en fond de page et l'attribut utilisé mais non cité de la balise d'insertion d'image.

Phoebe 29/03/2001
www.ASP-PHP.net