Petit rappel : une page WEB est générée par le browser (ou navigateur internet ) lorsque l'utilisateur en demande l'affichage. En fait le browser lit le code HTML, met en forme une page, récupère et insère les images éventuelles, les sons, etc. Les images sont stockées à part, en attente. Une page WEB est donc composée de plusieurs fichiers :
souvent un fichier portant l'extension .htm ( le code ) et des fichiers portant des extensions .gif ou .jpg ( les images ).

Ces formats d'images sont bien plus utilisés que le format .bmp car ils sont de petites tailles. En effet, une page WEB est souvent destinée à être publiée sur internet, il faut donc réduire au maximum la taille de l'ensemble des fichiers qui la composent car leur téléchargement du serveur vers le poste client sera d'autant plus court.

Pour insérer des images, il faudra donc utiliser un logiciel permettant le travail de fichiers images portant ces extensions. Sous Windows2000, le logiciel Paint le permet. Il s'obtient par Démarrer, Programmes, Accessoires, Paint.

De nombreux logiciels de dessins peuvent s'utiliser, certains sont gratuits, d'autres en shareware (ce qui signifie : essayer avant d'acheter ), d'autres encore sont commerciaux. Ma préférence va à Paint Shop Pro, un shareware très pratique.

a) Insérer une image.

i) Les répertoires.

Pour insérer une image, vous utiliserez le mot-clé : img.
La syntaxe d'utilisation est : < i m g = "nom du fichier" >.

Exemples :

• < i m g ="fleur.gif" >
• < i m g ="lapin.jpg" >

Très rapidement, le nombre de fichiers images nécessaires à l'élaboration d'une page WEB devient important. Il est pratique de stocker ces fichiers dans un répertoire à part.

Par exemple : vous avez une page dont le code HTML est le fichier index.htm. Ce code se trouve dans le répertoire c:\campagne. Dans votre page WEB, vous voulez insérer une image dont le fichier fleur.gif se trouve dans le sous-répertoire images comme ci-dessous :

Au lieu d'écrire tout le chemin depuis la "racine" c:\, on a écrit le chemin relatif au répertoire dans lequel se trouve le code : index.htm. Depuis le répertoire où se trouve index.htm, il suffit d'aller dans le sous-répertoire images.

Pourquoi une telle gymnastique ?

Deux réponses :

• la première : c'est moins long d'écrire images/fleur.gif que c:/campagne/images/fleur.gif
• la seconde : si un autre jour, vous deplacez votre répertoire campagne et tout son contenu vers la disquette a:, le code c:/campagne/images/fleur.gif n'est plus bon ! alors que images/fleur.gif est toujours bon !

Attention : le répertoire c:\campagne est noté c:/campagne en HTML. le \ devient le /.

Attention (bis) : décidez une fois pour toutes, si vous écrivez les noms de fichiers en majuscules ou en minuscules. Windows ne fait pas la différence mais Unix oui. Or vos pages seront sans doute un jour publiées sur le WEB et la plupart des gros systèmes stockant ces pages fonctionnent sous UNIX. Fleurs.gif et fleurs.gif sont pour lui deux noms distincts !! Je préfére tout écrire en minuscule, j'évite les accents, les ponctuations, les espaces et les noms dépassant les 8 caractères. Bref, je reste (presque toujours) compatible avec la règle DOS.

ii) Première image.

Vous avez créé un fichier index.htm, vous disposez du fichier d'une image nommée : fleur2.gif, placée dans le sous répertoire images, vous avez écrit : < img src="images/fleur2.gif"> à la suite d'un texte, comme dans l'exemple ci-dessous.

Vous devez voir apparaître ceci :

Ceci est une fleur :

Lorsque il se produit une erreur dans le code HTML à propos d'une image alors le navigateur remplace l'image par un . Ces causes d'erreurs sont multiples, les plus fréquentes sont :

• scr au lieu de src
• \ au lieu de /
• une mauvaise extentsion de fichier : gif eu lieu de jpg par exemple
• une erreur d'orthographe dans le nom
• une erreur d'orthographe dans le chemin
• un fichier image manquant !

b) Formats.

i) GIF/JPEG.

Une image au format GIF peut être une animation, ce qui permet de nombreuses possibilités. Un autre avantage du format GIF est la gestion de la transparence : la couleur du fond épouse les contours de la forme de l'image. Comparatif :

en GIF	en JPG

ii) La taille.

Il est possible de réduire/agrandir une image en utilisant les options height=nb de pixels et width=nb de pixels.

c) Alignement.

Pour placer plusieurs lignes de texte à côté d'une image, il faudra utiliser un tableau dont les bords pourront être invisibles. ( cf plus loin ) Exemple :

bords invisibles		bords visibles
Ceci est une longue phrase pour illustrer mon propos. A sa place, vous auriez pu trouver la définition de fleur dans le dictionnaire mais bon.		Ceci est une longue phrase pour illustrer mon propos. A sa place, vous auriez pu trouver la définition de fleur dans le dictionnaire mais bon.

La disposition du texte par rapport à l'image ne vous convient sans doute pas. Rassurez vous, il est possible de placer ce texte, en haut, en bas ou au milieu de l'image avec le mot align.

< img src="images/fleur2.gif" align="top" >	< img src="images/fleur2.gif" align="middle" >	< img src="images/fleur2.gif" align="bottom" >
Ceci est une belle fleur	Ceci est une belle fleur	Ceci est une belle fleur

Les images peuvent être entourées d'un cadre pour mieux les mettre en valeur. Exemple :

Ce cadre est disponible avec l'option border=nombre de pixels. L'image précédente est encadrée par 5 pixels. Le code correspondant est donc :
< img src="images/fleur2.gif" border=5 >

4°) Les liens hypertextes.

a) Insérer un lien.

i) Les mots-clés.

Un lien hypertexte est un morceau de texte ( ou éventuellement une image ) sur lequel on peut cliquer pour faire apparaître une autre page HTML ou un autre partie de la même page lorsque celle-ci est trop longue pour tenir sur un écran.

Les balises utilisées sont les < a > et < /a >. On écrit par exemple :

< a href="adresse de la page à visualiser">le texte cliquable< /a >

Le texte cliquable apparaître alors traditionnellement souligné. Le pointeur de la souris devient une main lorqu'elle survole ce texte.
Exemple : voici un lien

Il est ainsi possible de créer un lien ( on dit aussi pointer ) vers une autre partie de la même page, une autre page, une page d'un autre site, un document non htm ( un fichier pdf, un son wav ,...), un gestionnaire de messagerie électronique ( ouverture d'outlook automatique )... les possibilités sont nombreuses.

ii) Un lien dans la même page.

pour cela, il suffit de placer une ancre en écrivant le code < a name="votre identifiant">. Le lien que vous aller créer pointera vers cette ancre. Là où vous voulez créer un lien, vous écrivez < a href="#votre identifiant">nom du lien< /a >

Exemple :

Ces liens permettent de naviguer à l'intérieur d'une grande page sans utiliser les ascenseurs verticaux. De plus, on arrive directement à l'endroit désigné par le lien.

iii) Un lien vers une autre page.

Dans le même répertoire, vous avez deux pages page1.htm et page2.htm. Vous voulez créer un lien de page1 vers page2. Dans le code de page1, il suffit d'écrire : < a href="page2.htm" > vers page2 < /a >.
Bien souvent dans la page2, on écrira aussi < a href="page1.htm" > vers page1 < /a >. Ce qui permettra de passer d'une page à l'autre et vice versa.

Bien sûr, on peut combiner les notions vues précédemment. Si la page2 est longue et contient l'ancre chap4, on peut y accèder directement depuis la page1 en écrivant dans le code de la page1 : < a href="page2.htm#chap2" >vers le chap4 de la page2< /a>

Vous pouvez aussi pointer vers un fichier au format pdf par exemple. Si Acrobat reader est installé sur la machine de celui qui visualise vos pages, celui-ci s'ouvre automatiquement et charge la page pointée. Cela fonctionnement aussi avec des fichiers portant l'extension xls ou doc et permet d'ouvrir automatiquement des feuilles de calculs au format Excel ou des documents au format Word. Cette fonctionnalité est utilisée dans mon cours sur EXCEL. Une page WEB propose des liens vers les différents exercices qui eux sont des feuilles d calcul. Malheureusement, certains navigateurs rudimentaires ou trop anciens n'offrent par cette possibilité.

b) Un lien image.

Les liens au format texte, comme celui-ci : un lien sont souvent peu esthétique. Le HTML permet de créer des liens en utilisant des images. Il suffit de remplacer le texte du lien par un appel à une image.
Exemples : ou ou

Les idées ne manquet pas. Certains sites proposent des quantités virtigineuses d'images animées ou non au format gif. La plupart sont libres de droits. On peut donc les insérer dans ses propres pages. Pour trouver ces sites, il suffit de taper "gif gratuit" dans un moteur de recherche quelconque.

Il est possible de réaliser des images qui comportent plusieurs zones cliquables. Il est alors possible de placer comme on le souhaite les différents que composent une présentation puis de les associer à un lien. La page sommaire.htm, accessible depuis les différents du cours, est ainsi réalisée.

Il est alors pratique d'utiliser des logiciels qui créent automatiquement ce code assez indigeste. "mapedit" était un shaware fort pratique. On le trouve encore sur internet en shareware.