Concepts de programmation HTML touchant les images et la couleur

Insertion d'images
GIF
JPEG
Alignement du texte et des images
Option pour fureteurs WWW aveugles
Spécification des grandeurs d'images
Agrandissements et réductions
Pourcentages d'agrandissement et de réductions
Option basse et haute résolution

Pointeurs-Liens hypertextes
Références URL
Bordures invisibles

Couleur
Texte
Font color
Liens
Fond d'écran
Motifs

Cartes et images cliquables
ismap
cgi-bin/imagemap
imagemap.conf
Carte client usemap

Insertion d'images

Pour insérer une image dans une page HTML la commande de base est:

<img src="dossier/image.gif"> où

img src est l'attache (tag) qui indique que l'on désire faire afficher une image, dossier étant le nom du dossier où se trouve l'image et image le nom du fichier image.

Il faut toujours faire suivre le nom de l'image par le nom de son type de fichier précédé d'un point.

Gif

Dans le cas d'un fichier GIF inscrire .gif à la suite du nom de l'image.

JPEG

Dans le cas d'un fichier JPEG inscrire .jpeg ou .jpg à la suite du nom de l'image.

Alignement du texte et des images

Normalement, si on inclus la formule <img src="dossier/image.gif">
l'image apparait comme dans cette ligne.

<img align=bottom src="dossier/image.gif">
L'image apparait comme dans cette ligne.

align=bottom aligne l'image sur sa base.

align=baseline fait exactement la même chose que align=bottom

align=absbottom aligne bas de l'image avec le bas de la ligne courante.

align=top aligne l'image avec le haut du plus haut objet dans la ligne.

L'image apparait comme dans cette ligne.

align=top aligne l'image avec le haut du plus haut objet dans la ligne.

align=texttop aligne l'image avec le haut du plus haut texte dans la ligne, ce qui est généralement (mais pas toujours) le cas avec l'option align=top .

align=middle aligne l'image avec la ligne de base du texte.

L'image apparait comme dans cette ligne.

align=absmiddle même effet que align=middle

align=bottom et align=right alignent l'image à gauche ou à droite. Dans ces cas l'image s'aligne à gauche ou à droite et tout texte subséquent s'aligne à son côté.

Il existe une extension à la commande de changement de ligne <br> qui permet de gérer plus efficacement la position relative des images et du texte.

Il s'agit de la commande <br clear> .

<br clear=bottom> brise la ligne de texte, déplace celui-ci vers le bas jusqu'à ce qu'il rencontre une marge de gauche libre (pas d'images), <br clear=right> fait la même chose avec la marge de droite et <br clear=all> déplace le texte vers le bas jusqu'à ce que les deux marges soient libres.

Enfin la commande hspace=valeur permet de définir un espace libre entre l'image et les objets subséquents. Ex.: <img src="dossier/image2.gif" hspace=20>

Dans le cas des trois images précédentes une commande hspace=20 permet d'espacer celles-ci. L'espace en question (valeur) est toujours défini en pixels ou points, donc 72= un pouce, 36= un demi pouce, etc.

Il existe aussi une commande qui permet de controler l'espacement vertical: vspace=valeur .

Option pour fureteurs WWW aveugles

Certains fureteurs WWW ne permettent pas l'affichage des images. On peut, si on le désire, fournir un commentaire texte qui s'affichera à la place des images.

La commande à insérer est la suivante:

<img src="dossier/image.gif" alt="description">

alt="description" est la commande qui permet de faire afficher un texte alternatif à la place de l'image. L'usager verra donc le mot description à la place de l'image et sera ainsi moins pénalisé.

Spécification des grandeurs d'images

Le fureteur Netscape permet de transmettre les informations sur la largeur et la hauteur d'une image, améliorant ainsi significativement la vitesse d'affichage de la mise en page d'une page WEB.

Si on ne spécifie pas largeur et hauteur, le fureteur doit faire une pause à chaque image, pour aller sur le réseau vérifier ces informations, avant de continuer à mettre en page le reste de la page (une boite image de dimensions exactes doit être préparée pour toute image de façon à assurer une mise en page correcte du document une fois que l'image sera téléchargée).

Sur un réseau cela peut se traduire par une baisse significative de la vitesse de transmission des éléments d'une page.

En transmettant les informations relatives à la largeur et à la hauteur directement avec le code de l'image, Netscape peut instantanément créer une boite image pour celle-ci sans avoir besoin de l'examiner pour déterminer ses dimensions. Les fureteurs qui ne peuvent traduire ces codes les ignoreront tout simplement.

Il est donc possible de spécifier largeur et hauteur avec les attributs img de l'image. Largeur et hauteur sont normalement spécifiés en pixels. Par exemple si on transmet une image qui mesure 100 pixels de large par 200 pixels de haut le code sera le suivant:

<img src="dossier/image.gif" width=100 height=200>

Agrandissements et réductions

Un petit truc permet d'agrandir ou de réduire une image

Il suffit d'indiquer dans width et height des valeurs qui diff&egraverent des valeurs réelles de l'image, pour agrandir celle-ci à ces valeurs.

Cette image est au format réel et mesure 64 x 64 pixels.

Cette image est agrandie au format 128 x 128 pixels en utilisant la formule suivante:

<img src="dossier/image.gif" width=128 height=128>

On peut donc utiliser la même image à des agrandissements différents; il est à noter que si l'on agrandi l'image celle ci se pixelise: les pixels sont agrandis et deviennent visibles.

Les fureteurs WWW qui ne comprennent pas cette commande l'ignoreront complètement.

Pourcentages d'agrandissement ou de réduction

Au lieu de spécifier les valeurs d'agrandissement ou de réduction en pixels il est possible d'indiquer des valeurs relatives en indiquant des pourcentages dans les codes width et height . Par exemple on peut spécifier une valeur de width de 50% et une valeur de height de 64 pixels, comme pour cette image:

Le code à inscrire est alors le suivant :

<img src="dossier/image.gif" width="50%" height=64>

A noter que le pourcentage en question n'est pas un pourcentage de l'image originale, mais un pourcentage de l'espace disponible dans la fenêtre du fureteur WWW. Ainsi si l'on spécifie <width="50%"> l'image occupera 50% de la largeur de l'espace fenêtre total disponible, autrement dit, si l'on agrandi la fenêtre d'affichage du fureteur l'image s'agrandie proportionnellement.

Si l'on spécifie uniquement une des deux dimensions comme un pourcentage, et qu'on ne spécifie rien pour l'autre dimension, le ratio largeur/hauteur original de l'image sera maintenu.

Option basse et haute résolution

Dans Netscape il est possible de spécifier pour une image donnée, une paire basse résolution-haute résolution. Le fureteur WWW affiche alors les images en deux temps: dans un premier temps toutes les images basse résolution du document sont affichées, ce qui permet au lecteur d'avoir rapidement une idée du contenu des images, dans un deuxième temps le texte s'affiche ainsi que le deuxi&egraveme jeu d'images à haute résolution.

Le code à inscrire est le suivant:

<img src="hauterésolution.gif" lowsrc="basserésolution.gif">

En inscrivant les dimensions width et height pour la deuxième image haute résolution il est même possible d'utiliser pour l'image basse résolution une version plus petite en hauteur et largeur. Elle sera alors agrandie (voir paragraphe précédent) au format spécifié pour l'image haute résolution qui contient le code src .

Le code à inscrire est le suivant:

<img src="hauterésolution.gif" lowsrc="basserésolution.gif" width=100 height=100>

Si on ne spécifie aucune dimension pour la deuxième image, celle-ci adopte alors automatiquement les dimensions de la premi&egravere.

On peut, indiféremment mélanger format GIF et format JPEG, c'est-à-dire que la première image basse résolution peut être un JPEG, et que la deuxième image haute résolution peut être un GIF, entrelacé ou pas, et vice versa.

Comme précédemment les fureteurs WWW qui ne supportent pas ces options ignoreront totalement les attributs lowsrc .

Pointeurs-Liens hypertextes

Une image peut devenir un pointeur hypertexte vers une référence URL (Uniform Ressource Locator).

Références URL

Le code a inscrire est le suivant dans le cas ou le pointeur renvoie à une adresse sur le WWW:

<a href="http://adresse/dossier/page.html">
<img src="dossier/image.gif"></a>

Dans le cas ou le fichier HTML est situé sur le même serveur ou système hôte, et au même niveau hiérarchique, on inscrira tout simplement comme référence le nom du fichier HTML, comme dans l'exemple suivant:

<a href="dossier/page.html"><img src="dossier/image.gif"></a>

On peut évidemment utiliser des pointeurs qui font références à des sites GOPHER, FTP, USENET, etc., en indiquant les références appropriées.

À noter que l'image s'entoure d'une bordure de couleur qui indique au lecteur qu'il est en présence d'un lien hypertexte.

Bordures invisibles

Dans certains cas l'infographiste / programmeur peut décider de vouloir rendre invisible la bordure de couleur qui s'affiche normalement autour des images-pointeurs. Par exemple dans ces pages mêmes, les boutons de navigation situés dans le haut et le bas de chaque page HTML ne sont pas affichés avec la bordure de couleur habituelle.

Pour obtenir cet effet il faut inclure la commande suivante à l'intérieur du code principal du pointeur:

border=0 ce qui donne: <a href="dossier/page.html" border=0>
<img src="dossier/image.gif"></a>

L'image pointeur s'affiche alors sans bordure comme dans l'exemple suivant:

à noter que l'on peut aussi choisir l'effet inverse et vouloir augmenter la bordure autour de l'image, on inscrira alors border=10 par exemple, comme dans l'exemple suivant:

Couleur

Il est maintenant possible dans Netscape de donner des couleurs spécifiques à des éléments. Pour toutes les références sur la couleur consulter le chapitre Couleurs et motifs, en particulier la table de conversion de valeurs RGB décimales en valeurs hexadécimales, qui va vous permettre de trouver les codes hexadécimaux à inscrire dans les commandes qui suivent.

Les commandes pour spécifier la couleur du texte à afficher ainsi que celles pour la couleurs des liens, du fond d'écran ou l'utilisation d'un motif, doivent s'inscrire à l'intérieur de la commande body .

Texte

Pour spécifier la couleur du texte, apr&egraves avoir trouvé les équivalents hexadécimaux à la couleur choisie, on se servira de la commande text="xxxxxx" ou text= indique que l'on veut changer la couleur du texte, et où "xxxxxx" indique le code hexadécimal de la couleur. Par exemple la commande suivante permet de définir une page HTML à l'intérieur de laquelle le texte s'afichera en blanc:

<body text="ffffff"> ou "ffffff" est le code hexadécimal pour le blanc.

Font color

Netscape 2.0 permet de spécifier des couleurs pour des sections de texte. Voici les commandes:

<font color=xxxxxx>section de texte </font>

Liens

On peut de la même façon spécifier la couleur des liens hypertextes visités, non visités, et actifs c'est-à-dire la couleur qui s'affiche au moment ou le lecteur clique sur un pointeur.

Pour spécifier la couleur des liens non visités, après avoir trouvé les équivalents hexadécimaux à la couleur choisie, on se servira de la commande link="xxxxxx" ou link= indique que l'on veut changer la couleur des liens non visités, et où "xxxxxx" indique le code hexadécimal de la couleur. Pour les liens déjà visités on inscrira vlink="xxxxxx" et pour les liens actifs alink="xxxxxx" .

Par exemple voici la copie des commande utilisées dans cette page, ou la couleur du texte est noire, la couleur des liens non visités violet, les liens déjà visités rouge, et celle des liens actifs blanc:

<body text="000000" link="423278" vlink="940f26" alink="ffffff">

À noter qu'il n'est pas nécessaire de spécifier la couleur noire pour le texte car il s'agit de la couleur par défaut des fureteurs WWW.

Fond d'écran

Pour spécifier la couleur du fond d'écran la commande est la suivante:

<body bgcolor="#xxxxxx">

où body bgcolor= indique que l'on veut changer la couleur du fond d'écran, et où "#xxxxxx" réf&egravere à l'équivalent hexadécimal de la couleur choisie. L'exemple suivant permet la création d'une page HTML qui s'affichera avec un fond noir:

<body bgcolor="#000000">

Motifs

Lorsque l'on veut utiliser un motif comme fond d'écran il faut faire référence au fichier image qui constitue la tuile de base. On utilise la commande suivante:

<body background="dossier/motif.gif">

Où body background= indique que l'on veut utiliser un motif de fond d'écran et où "dossier/motif.gif" est la référence au fichier image qui servira de motif.

Cartes et images cliquables

Ismap

Il faut inscrire ismap dans la section img de l'image pour la déclarer comme élément graphique actif ou carte cliquable.

Voici un exemple de commande compl&egravete pour une carte appelée: carte.gif

<a href="http://www.compagnie.com/cgi- bin/imagemap/nomdelacarte">
<img src=carte.gif>
</a>

L'attribut ismap déclare l'image active; lorsque l'on clique avec la souris, le fureteur WWW envoie au serveur les coordonnées des pixels où se situe la souris par rapport à l'origine de l'image.

cgi/image map

Le code cgi-bin/imagemap doit obligatoirement être inclus dans la commande. Cette commande permet de créer un lien hypertexte entre l'image et le programme cgi-bin/imagemap qui réside sur le serveur. Ce programme est destiné à gérer les données ismap retournées par le fureteur, et à activer la ressource (URL) appropriée en comparant les coordonnées de la souris par rapport aux informations de la base de donnée imagemap. On doit indiquer à ce script imagemap quelle banque de données utiliser. On se sert alors de la référence symbolique nomdelacarte , qui peut-être n'importe quel mot faisant référence à l'image.

imagemap.conf

Le fichier imagemap.conf est un fichier qui réside sur le serveur et qui ressemble à ceci:

code1: /home/ftp/pub/www/compagnie/client/maps/plan.map
code2: /home/ftp/pub/www/compagnie/client/maps/image.map

On devra fournir à l'administrateur du serveur hôte les données pour qu'il modifie le fichier imagemap.conf, afin que le programme cgi-bin/imagemap du serveur sache quel fichier .map correspond au nomdelacarte indiqué dans notre programmation.

Il faut indiquer à l'administrateur le nom du fichier .map correspondant à notre image, et où il se situe dans la hiérarchie des fichiers (arborescence). Celui-ci rajoutera alors une ligne de code au fichier imagemap.conf pour lui indiquer à quoi correspond la ressource symbolique nomdelacarte :

nomdelacarte:
/home/ftp/pub/www/compagnie/client/maps/nomdelacarte.map

Le fichier nomdelacarte.map est un fichier texte qui est créé par l'application qui permet de créer les zones cliquables dans l'image.

Ce fichier, créé automatiquement par les programmes de création de cartes cliquables indique finalement au serveur quelle ressource (URL) ouvrir en fonction des zones cliquées dans l'image.

Carte client usemap

Cette option est disponible depuis la version 2.0 de Netscape. Voici la suite des commandes pour créer une image ou carte cliquable côté client:
(les coordonnées sont données pour un rectangle, un polygone et un cercle).

<img src="dossier/image.gif" usemap="#nnnn">

<map name="nnnn">

<area shape="rect"
href="pagex.html"
coords="140,20,280,60">

<area shape="poly"
href="pagex.html"
coords="100,100,180,80,200,140">

<area shape="circle"
href="pagex.html"
coords="80,100,80,180">

</map>

ou usemap="#nnnn" définie l'image comme cliquable et réfère au nom symbolique qui contiendra les coordonnées des zones cliquables.
pagex.html sont les documents HTML associés aux différentes zones. nnnn est un nom symbolique associé au fichier image.

Pour trouver les coordonnées numériques, on peut se servir d'un logiciel de création de cartes cliquables, dessiner les zones, exporter le fichier texte correspondant, l'ouvrir dans un traitement de texte, et retranscrire les coordonnées dans le code HTML.