Les Feuilles de Style

Les Feuilles de Style

[NDA: Article écrit en Janvier 1997, publié dans le magazine Planète INTERNET]

Les feuilles de style sont la réponse "propre" à tous ceux qui ont imaginé faire de la mise en page avec le langage HTML. Elles permettent non seulement de redéfinir l'aspect des différents éléments du langage HTML mais également de créer une multitude de styles supplémentaires afin d'assouvir les exigences les plus extrêmes des "maquettistes du Web".

Contexte

A son origine, le langage HTML avait été créé pour permettre de donner une structure sémantique aux documents du WWW. Cependant, les derniers 18 mois ont vu l'arrivée massive d'extensions destinées au formatage physique de ces mêmes documents, au point de dénaturer complètement le langage. L'une des principales raisons d'être des feuilles de style (style sheets en anglais), est de stopper la prolifération de ces nouveaux marqueurs HTML tels que <FONT> ou d'attributs tels que BGCOLOR ou PADDING...

Mais les feuilles de style permettent d'aller encore plus loin. Elles vous permettent de définir une "maquette" pour l'ensemble de votre site web et de l'appliquer automatiquement à toutes vos pages. Il suffit pour cela de définir votre feuille de style dans un fichier portant l'extension .css (Cascading Style Sheet) et d'y faire référence depuis toutes vos pages HTML. Ces styles peuvent ensuite être combinés pour modifier légèrement le look d'une page donnée par rapport à la norme. La norme prévoit également de donner le choix à l'utilisateur, des feuilles de styles qu'il désire appliquer à un document.

Néanmoins, à ce jour, seul Microsoft a implémenté un sous ensemble des feuilles de style dans son Internet Explorer version 3.0. Mais Netscape travaille activement à les intégrer dans Navigator 4 dont une première bêta vient de sortir. Spyglass a également annoncé qu'il supporterait les feuilles de style dans son prochain browser.

Principe de fonctionnement

Les feuilles de styles vous permettent de redéfinir complètement la manière dont s'affichent les différents éléments structurels d'une page HTML. Ainsi, vous pouvez redéfinir de quelle manière s'affiche un paragraphe standard, un titre de niveau 2 ou encore une liste numérotée. Mais les feuilles de style vous permettent également de définir de nouveaux styles, comme dans notre exemple où nous définissons la classe "chapo" pour les paragraphes d'introduction de notre document.

Pour définir la feuille de style, nous disposons de plusieurs méthodes: soit nous définissons les styles à la volée lorsque nous utilisons un marqueur, soit nous faisons référence à une feuille de style externe, soit nous incluons le style dans la section HEAD de notre page. Cette dernière méthode est celle que nous utilisons dans nos exemples.

Un exemple

Parmi les illustrations de cet article, vous pouvez apercevoir trois captures d'une même page HTML sur laquelle on a appliqué des feuilles de style différentes. La copie d'écran la plus austère est du HTML brut, sans aucun style appliqué.

Vous trouverez ci dessous le code source de l'une de ces pages:

<HTML>
     <HEAD>
     <TITLE>Page avec feuille de style</TITLE>
     <STYLE TYPE="text/css">
     <!--
     BODY { background: white }
     H1, H2, H3 { font-family: Playbill, fancy }
     H1 { color: brown; font-size: 72; text-align: center; text-decoration: underline }
     H2 { color: maroon; font-size: 48 }
     P { font-family: serif; margin-left: 12% }
     P.chapo { font-size: large }
     -->
     </STYLE>
     </HEAD>
     <BODY>
     <H1>Les feuilles de style</H1>
     <H2>De la PAO sur le Web!</H2>
	 
     <P class="chapo">Les feuilles de style sont la réponse "propre" à tous ceux qui
     ont imaginé faire de la mise en page avec le langage HTML. Elles permettent non
     seulement de redéfinir l'aspect des différents éléments du langage HTML 
     mais également de créer une multitude de styles supplémentaires afin
     d'assouvir les exigences les plus extrêmes des "maquettistes du Web".</P>
	 
     <H2>Contexte</H2>
	 
     <P>A son origine, le langage HTML avait été créé pour permettre de donner une 
     structure sémantique aux documents du WWW. Cependant, les derniers 18 mois 
     ont vu l'arrivée massive d'extensions destinés au formatage physique de ces 
     mêmes documents, au point de dénaturer complètement le langage. L'une des
     principales raisons d'être des feuilles de style (style sheets en anglais),      
     est de stopper la prolifération de ces nouveaux marqueurs HTML tels que
     &lt;FONT&gt; ou d'attributs tels que BGCOLOR ou PADDING...</P>
	 
     </BODY>
</HTML>

Vous pouvez découvrir la définition de la feuille de style entre les marqueurs <STYLE> et </STYLE>. Cette définition est incluse dans un commentaire HTML (<!-- ... -->) afin qu'un browser n'ayant pas connaissance des feuilles de style n'affiche pas de texte indésirable.

Vous pouvez constater qu'on redéfinit le style d'affichage des éléments <BODY><H1><H2><H3> et <P>. On définit également une nouvelle classe pour l'élément <P> que l'on nomme "chapo". Les styles redéfinis sont pris en compte automatiquement pour toute la page. Par contre, pour utiliser la classe chapo, nous sommes obligé de préciserCLASS="chapo" dans le marqueur <P> commençant le paragraphe concerné. La classe "chapo" s'applique alors jusqu'au marqueur </P> qui suit.

Si vous voulez appliquer une classe à une zone plus étendue, il vous suffit de délimiter cette zone au moyen des marqueurs suivants:

<DIV class="chapo">
   vos paragraphes....
</DIV>

Comme nous l'avons évoqué plus haut vous pouvez également définir un style "à la volée" comme ceci:

<DIV STYLE="font-size: large">
     vos paragraphes....
</DIV>

Parmi les attributs que nous avons redéfini on trouve la couleur des caractères (color: <code couleur>), la couleur de fond (background: <code couleur>), la taille des caractères (font-size: <taille>), l'alignement du texte (text-align: [left | right | center]) ou encore la police de caractères à utiliser (font-family: <liste de noms>).

On retombe ici dans l'éternel problème de nommage des polices de caractères. Vous pouvez donc préciser une liste de noms séparés par des virgules en espérant tomber sur un nom de police installée sur le poste du client. Néanmoins, il est recommandé de terminer la liste par un nom générique qui sera reconnu par tous les clients. Ces noms génériques sont:serif (avec empattement), sans-serif (sans empattement), cursivefantasy, et monospace (type courrier).

Un autre exemple

Vous trouverez ci dessous la définition de l'autre feuille de style utilisée dans nos exemples:

 <STYLE TYPE="text/css">
 <!--
     BODY { background: #FFFFE0 }
     H1, H2, H3 { font-family: monospace, font-style: italic }
     H1 { color: red; text-align: center }
     H2 { color: #FFFFE0; background: red; text-align: right }
     P { font-family: sans-serif; margin-left: 12%; margin-right: 12%; text-align: right }
     P.chapo { color: gray; font-weight: bold }
 -->
 </STYLE>

Comme vous pouvez le constater, il suffit de faire quelques modifications au niveau du style pour changer complètement l'aspect du document affiché.

Images de fond

Autre avantage des style sheets: le désormais [NDA: tristement] traditionnel attribut BACKGROUND du marqueur<BODY> est remplacé par une syntaxe bien plus riche en possibilités. En effet: non seulement, vous pouvez appliquer l'attribut background à virtuellement n'importe quel élément HTML, mais de plus, si vous choisissez d'afficher une image de fond, vous pouvez contrôler précisément de quelle manière celle-ci doit être répétée.

Pour indiquer une couleur de fond, la syntaxe est triviale:

 {background: red}
 {background: #6633FF}

Par contre, pour une image, c'est un tout petit peu plus complexe:

 {background: url(http://www.domaine/image.gif)}

Faut-il utiliser les feuilles de style ou non?

Après ces quelques exemples d'application des feuilles de style, il est encore possible d'hésiter à les utiliser par rapport aux diverses extensions HTML qui sont déjà bien implantées. On peut même être tenté de mélanger les deux afin de profiter du maximum de possibilités offertes.

Néanmoins, d'ici quelques mois, vous reviendrez probablement naturellement à un code HTML plus pur et vous en exclurez tout ce qui ne concerne pas la structure même du document alors que les feuilles de styles vous offriront des possibilités inégalées en termes de mise en page et de contrôle de l'affichage.

[NDA: A ce jour, en 2002, la question ne se pose absolument plus: OUI il FAUT utiliser les feuilles de style, et RIEN QUE CA!]

Post complet »

STUT ONE 3 - Le code source

[NDA: Article écrit en Juin 1996, publié dans ST Magazine n° ? en ?]

STUT ONE est un logiciel vous permettant de réaliser un serveur Minitel avec un simple ATARI STF connecté à un Minitel. Nous vous avons parlé de ce logiciel à plusieurs reprises dans ST Magazine, et en particulier dans les numéros 72 et 105 où nous vous avions fourni, respectivement, les versions 2.6 et 3.0 du logiciel. Nous arrivons aujourd'hui au terme de cette longue aventure en levant le voile sur le code source de la version 3. Vous le trouverez sur la disquette accompagnant le magazine.

DEBALLAGE

En décompactant le fichier STUT_SRC.ZIP se trouvant sur la disquette [attaché à cette page web] vous obtiendrez une collection de modules C (*.C) avec leurs headers (*.H) ainsi que quelques fichiers ressource (.RSC) et le fichier liant tout ceci en un seul et même projet: STUT_3.PRJ.

Tout ceci totalise 1,5 Mega-octets de code source! C'est un chiffre relativement important, surtout si on le compare aux 500 Kilo-octets de code source de la version 2.6... Toujours est-il: prévoyez quelques 5 ou 6 Mega-octets de place libre sur votre disque dur si vous voulez pouvoir décompacter puis recompiler le logiciel...

RESSOURCES NECESSAIRES

Alors justement: de quoi avez vous besoin pour recompiler le logiciel? D'un disque dur avec de la place libre, bien sûr, mais aussi d'un compilateur C. Sachez que STUT ONE 3 a été développé avec Pure C version 1.1 (du 20 Mars 1993). L'utilisation de ce même compilateur pour recompiler le logiciel sera bien évidemment préférable à toute autre solution.

Ceci dit, si vous avez un minimum d'expérience avec le portage d'applications en langage C d'une plate-forme à une autre, ou encore d'un compilateur C à un autre, vous pourrez vous en sortir avec tout compilateur C/ATARI digne de ce nom, moyennant quelques retouches mineures du code source, de manière à l'adapter aux bibliothèques (*.LIB) fournies avec votre compilateur.

STUT ONE 3 étant une application d'assez grande taille (comparativement aux applications ATARI courantes), une machine équipée de 4 Mo de RAM est préférable pour le développement et la compilation. L'exploitation peut se faire sur une machine de 1 Mo de RAM si l'on s'en tient à un serveur Minitel d'envergure limitée.

Concernant la taille de l'écran, le minimum confortable est le monochrome 640 * 400 pixels. STUT ONE 3 peut néanmoins supporter une utilisation en mode "moyenne résolution ST", c'est à dire 640 * 200 pixels. Vous découvrirez que des fichiers de ressources spécifiques à ce mode sont inclus dans la distribution de code source. En tout état de cause, si vous avez la possibilité de faire fonctionner le logiciel en mode VGA (640*400, 16 couleurs), ne vous privez surtout pas!

Au niveau disque dur, si quelques Mega-octets sont indispensables à la compilation, il est envisageable de faire tourner un petit serveur sur une machine équipée uniquement de lecteurs de disquettes.

Finalement, STUT ONE 3 est un logiciel serveur Minitel, son utilisation nécessite donc l'emploi d'un ou de plusieurs Minitels. Vous avez besoin d'un Minitel pour vérifier votre travail et pour vous connecter à distance. Mais vous avez également besoin d'un ou de plusieurs Minitels (selon le nombre d'appels simultanés que votre serveur aura à traiter) pour recevoir les appels entrants. Le nombre de Minitels que vous pouvez brancher dépend du nombre de ports série dont dispose votre ordinateur. Néanmoins, maintenant que vous disposez du code source, vous pouvez envisager d'interfacer STUT ONE avec le port MIDI ou encore une carte multi-séries. L'utilisation de modems à la place des Minitels est également envisageable.

COMPILATION

La compilation du logiciel sous Pure C exige que vous chargiez le fichier projet (STUT_3.PRJ) d'une part, et que vous fixiez précisément certaines options de compilation d'autre part.

Mais avant même de parler des options de compilation, parlons d'un petit détail qui a son importance: les tabulations. En effet, comme tout programme écrit dans les règles de l'art les plus évidentes, le code source de STUT ONE fait un fort usage d'indentations et d'alignements dans les tableaux ou les listes d'arguments. Ceux-ci sont souvent obtenus au moyens de tabulations. Ce que vous devez savoir c'est que la taille de ces tabulations est censée être de 3 caractères. Si vous ne visualisez pas le source en ayant fixé la taille des tabulations à 3, vous risquez de vous retrouver avec un code source ressemblant plus à une salade de mots-clef qu'à un programme structuré. Dans Pure C, la taille des tabulations se règle dans le menu Options/Shell:tabsize.

Au niveau de la compilation (menu Options/Compiler) maintenant, deux options doivent absolument être cochées: "Default char is unsigned" (-K) et "Use absolute calls" (-P).

Au niveau de l'édition des liens (menu Options/Linker), il n'y a pas d'indications particulières, si ce n'est de réserver au moins 4096 octets à la pile (Stack).

Une fois ces quelques options correctement paramétrées, vous pouvez tout simplement lancer un "make" pour compiler et linker tous les modules. Ce processus peut être assez long. A titre d'exemple, sur mon Mega STE à 16 Mhz avec 4 Mo de RAM, il a fallu 9 minutes 30 pour tout compiler. C'est en partie pour cette raison que le logiciel est découpé en de multiples modules de petite taille. En effet, par la suite, si vous modifiez un module, un "make" ne recompilera que le module en question et le "linkera" avec les autres modules déjà compilés (sous forme de fichier *.O) auparavant.

La fichier compilé aura une taille approximative de 170 Ko... si vous n'avez pas inclus d'informations de debug ni de table des symboles, etc. L'inclusion de toutes ces options vous sera néanmoins fort utile si vous décidez de modifier le code source et que vous avez besoin de le debugguer au moyen d'un debugger (tel que Pure Debug par exemple).

UN MOT SUR LA LICENCE

Tout comme la version 2, STUT ONE 3 est soumis aux termes de la GNU General Public License (GPL version 2). Cela implique que vous êtes libre d'utiliser le logiciel, de le modifier et même de le revendre, tout ceci à la condition expresse que vous diffusiez également le code source intégral correspondant à toute version compilée que vous diffuseriez par quelque moyen que ce soit.

Contrairement aux licences d'utilisation classiques des logiciels, la GPL est une licence destinée à protéger les utilisateurs, plutôt que les vendeurs de logiciels. Le texte complet de la licence est fourni dans le fichier LICENCE.TXT.

LE CODE SOURCE

Comme nous l'avons déjà évoqué plus haut, le code source est décomposé en une multitude de modules plus ou moins importants. Chacun de ces modules remplit (en théorie) un ensemble de fonctions corrélées. Les modules les plus soignés ressemblent même à des objets et sont plus ou moins inspirés de la terminologie objet du C++. Prenons un exemple...

Au hasard: SERIAL.C. Si vous ouvrez ce fichier, vous devriez comprendre très vite qu'il s'agit d'une sorte de "classe" permettant de gérer les ports série de l'ordinateur (c'est écrit dans les commentaires au début du fichier :-).

Ce fichier contient par exemple la définition de la "méthode" (une fonction C) Serial_WaitTXEmpty( n_device ), dont la fonction est d'attendre que le buffer de transmission (TX par opposition à réception/RX) du port n_device soit vide. Cette méthode pourra par exemple être appelée depuis un autre module qui désirerait s'assurer que toutes les informations ont bien été envoyées avant de faire autre chose.

Cette méthode est publique, c'est à dire, qu'elle peut être appelée depuis un autre module. Néanmoins, afin que l'autre module puisse appeler la méthode, il faut lui déclarer. C'est à cet effet que l'interface publique du module SERIAL.C a été regroupée dans le fichier SRIAL_PU.H. Tout module désirant faire appel à une méthode publique du module SERIAL.C peut dès lors le faire en ayant simplement inclus le fichier de déclarations de la manière suivante:

#include "SRIAL_PU.H"

SERIAL.C contient également des méthodes privées, à usage exclusivement interne. C'est le cas par exemple de get_iorec() qui permet à des fonctions de gestion des ports séries d'accomplir leur tâche en obtenant des informations du système d'exploitation. Cette "fonction privée" est déclarée "static" de manière à ne pouvoir être référencée qu'à l'intérieur du module SERIAL.C et sa déclaration ne figure bien sûr pas dans l'interface publique (SRIAL_PU.H).

Voilà pour le principe d'organisation générale. La liste complète des modules se trouve dans STUT_3.PRJ avec une brève description. Vous pouvez obtenir plus d'informations en ouvrant chacun des modules séparément. Vous constaterez en effet que ceux-ci sont en général abondamment commentés.

L'AVENIR ?

Voilà, vous avez entre les mains le fruit de plusieurs années de travail et de recherche en matière de télématique conviviale (vous trouvez que j'exagère? :-) et vous avez le champ libre quant aux possibilités d'évolution: gestion de modems, transformation en serveur BBS, en serveur vocal ou même en logiciel de création multimédia! (Si on y réfléchit, le moteur d'arborescence à la base du logiciel peut être appliqué à un grand nombre de tâches diverses...)

Quant à moi, je vais aller m'occuper d'une autre vision de la télématique que l'on nomme l'Internet...

François PLANQUE
Ingénieur système chez Planete.net

Juin 1996

NDA: Le code source de STUT ONE 3 fait appel aux routines de débogage des mallocs expliquées dans un autre article.

Questions HTML

Voici quelques questions fréquemment posées à propos de HTML:

Pourquoi ne peut-on pas formater un texte sous HTML avec la même richesse de fonctions que dans un traitement de textes? (Par exemple la justification à doite et à gauche, les tabulations...)

Il faut bien comprendre l'objectif de HTML, à savoir structurer l'information. HTML n'est pas un langage de présentation ou de description de page (comme PostScript). HTML n'est pas une application WYSIWYG! Il n'est pas fait pour garantir que ce que vous voyez sur votre écran lorsque vous écrivez votre texte sera ce qui sera vu sur l'écran d'un utilisateur lorsqu'il lira ce texte.

Néanmoins, les diverses extensions à HTML et même HTML 3 permettent de donner des indications de plus en plus précises sur la manière dont un texte, paragraphe, phrase ou mot doit être affiché sur l'écran de l'utilisateur. Certes, il ne s'agit là que d'indications, mais on peut prévoir que ce genre de fonctionnalités va se généraliser dans un futur proche...

D'un autre côté, on observe le succès grandissant de formats de fichiers tel que Adobe Acrobat (.PDF) permettant de stocker sous une forme compacte un document multimédia et sa mise en page précise.


Comment peut-on placer des boutons et des animations sur une page HTML? (Comme avec un logiciel multimédia...)

Il faut bien comprendre l'objectif de HTML, à savoir structurer l'information. HTML n'a pas été inventé pour réaliser des applications multimédia interactives et pilotables à la souris.

Néanmoins, les souhaits des utilisateurs allant dans ce sens, HTML est en passe de se voir dôté d'extensions ou plutôt de collègues permettant d'assurer des fonctions plus multimédia. On note en particulier:

  • Java. Un langage permettant d'intégrer des objets intelligents dans les pages HTML. Java ouvre la voie aux animations, aux jeux, et toute sorte d'application où le traitement s'effectue du côté client plutôt que par requêtes au serveur.
  • VRML. Virtual Reality Modeling Language. Il permet de décrire un scène en trois dimensions. Cette scène peut être transférée sur le Web comme le serait une image, mais elle serait ensuite affichée par le logiciel client et l'utilisateur pourrait alors se promener à l'intérieur de cette scène.

Qu'est ce que HTML 3?

HTML 3 est actuellement à l'étude pour succéder à l'actuel HTML 2. Néanmoins, très peu de browsers implémentent pleinement le HTML 3 à ce jour (l'un des rares étant Athena).

La lenteur d'évolution de la norme à conduit des acteurs tels que Netscape ou Microsoft à implémenter leurs propres extensions à HTML 2 dans leurs browsers respectifs.

Les améliorations proposées par HTML 3 sont les suivantes:

  • Tableaux
  • Texte s'arrangeant autour des illustrations
  • Notations mathématiques
  • Listes personnalisées
  • Tabulations horizontales
  • Bandeau de navigation fixe
  • Style Sheets

A part la présence de nouveaux marqueurs, les fichiers HTML3 peuvent être identifiés grâce aux caractéristiques suivantes:

  • MIME content type: text/html; version=3.0
  • Extensions de fichiers: .html3 ou .ht3 sous DOS.

Editeurs HTML

Même lorsque l'on connaît parfaitement les différents marqueurs HTML, il devient rapidement fastidieux de taper de longues pages "à mains nues"... surtout si vous devez le faire toute la journée.

Pour vous simplifier la tâche, il existe divers outils logiciels vous permettant de créer plus facilement vos pages HTML. Ces outils remplissent une ou plusieurs des fonctions suivantes:

  • Conversion d'un fichier issu d'un traitement de texte (.DOC.RTF, etc.) en fichier HTML.
  • Insertion des tags HTML par simple clic sur un bouton ou par raccourci clavier.
  • Insertion aisée de caractères accentués ou caractères spéciaux, conversion automatique.
  • Insertion d'images et liens vers tous types de fichiers au moyen d'un sélecteur de fichiers.
  • Vérification de la syntaxe.
  • D'autres petits gadgets qui simplifient la vie...

Vous choisirez vos outils en fonction de vos préférences, mais aussi en fonction de la machine sur laquelle vous travaillez.

N'oubliez pas que vous pouvez très bien éditer vos pages HTML sur un PC ou un Macintosh et ne les transférer sur le serveur HTTP (sous UNIX par exemple) que lorsqu'elles sont terminées.

Cette méthode présente néanmoins certains inconvénients. L'un d'eux est le fait que beaucoup d'éditeurs sur PC utilisent encore exclusivement les noms de fichier au format 8.3. Par conséquents ils génèrent souvent des références vers des fichiers portant l'extension .htm alors que sur la machine serveur, les fichiers doivent impérativement porter l'extension .html. Dans ce cas, il faudra ajouter des 'l' à la main aux endroits concernés...

HTML: Imagemaps

Qu'est-ce que c'est exactement?

Un Imagemap est une image incluse dans une page HTML qui, lorsque vous cliquez dessus, vous renvoie vers une autre URL. Jusque là, rien de bien étonnant... si ce n'est le fait que l'URL sur laquelle vous allez être renvoyé dépend de l'endroit précis de l'Imagemap sur lequel vous avez cliqué.

Voici une petite démonstration dans laquelle vous serez renvoyé vers une page HTML différente selon que vous cliquiez sur le rectangle, le cercle ou le fond de l'image:

 

  (cet exemple ne peut pas fonctionner sur ce serveur, désolé.)

Bien sûr, cet exemple n'est pas d'une grande utilité en soi. Quelques applications pratiques de l'Imagemap sont:

  • Barre d'icônes permettant d'accéder à différentes fonctions
  • Plan de bâtiment permettant d'accéder aux différents salles
  • Photo permettant d'obtenir des informations sur tel ou tel détail

Comment ca marche?

Il existe plusieurs méthodes pour gérer un Imagemap:

  • Lorsque vous cliquez sur l'image, le client envoie les coordonnées exactes (en pixels) de l'endroit sur lequel vous avez cliqué à un petit programme CGI (exécuté sur le serveur) qui se charge ensuite de vous rediriger vers l'URL associée à la zone dans laquelle vous avez cliqué.

    Cette méthode fonctionne avec la quasi totalité des serveurs HTTP et il vous suffit de disposer de l'utilitaire imagemap dans le dossier cgi-bin

  • Les serveurs HTTP les plus récents tels que NCSA HTTPd version 1.5 intègrent directement la gestion des Imagemap et il n'est plus nécessaire de passer par un quelconque module CGI.

    Cette méthode est beaucoup plus efficace que la précédente et nous vous recommandons vivement de l'utiliser si votre serveur la supporte.

  • Les clients les plus récents tels que Netscape Navigator 2 offrent la possibilité de gérer ce que l'on appelle des Client-Side Imagemaps. Dans ce cas, c'est le client qui s'occupe de déterminer dans quelle zone vous avez cliqué et qui fait directement la requête vers l'URL correspondante.

    C'est de loin la méthode la plus efficace en termes de performances. Ceci dit, très peu d'utilisateurs disposent à ce jour d'un client compatible avec cette méthode!

ATTENTION: Dans ce qui suit, nous expliquons comment mettre en oeuvre la première méthode (universelle): utilisation d'un script CGI.


Méthode à suivre

1-Installation du module CGI imagemap

Le module CGI imagemap est généralement fourni avec votre serveur HTTP. Il doit se trouver dans le répertoire cgi-bin.

Si le répertoire cgi-bin de votre serveur ne contient pas ce module, vous avez deux solutions:

  • Si vous avez accès en écriture au répertoire cgi-bin, vous pouvez vous procurer le module et l'installer vous même.
  • Sinon, demandez à l'administrateur de votre serveur de s'en charger...

2-Créer l'Imagemap

Votre Imagemap sera en fait constitué de deux parties:

  • L'image en elle même, telle qu'elle apparaîtra à l'écran. Elle doit être au format GIF.
  • Le fichier décrivant les différentes régions de l'image et leur URL associée. Il s'agit d'un fichier texte auquel on donnera en général l'extension .MAP.

L'image GIF sera créée avec vos outils de dessin favoris. Quant au fichier .MAP, vous pourrez soit utiliser un utilitaire adapté tel que mapedit , soit l'écrire à la main...

ATTENTION: Dans ce qui suit, nous expliquons la syntaxe de .MAP de NCSA, par opposition à la syntaxe CERN.

Le fichier .MAP utilisé pour l'exemple donné plus haut est le suivant:

default /~fplanque/Publier/imapdef.html
#rectangle
rect    /~fplanque/Publier/imapbox.html 11,12 52,47 
#cercle
circle  /~fplanque/Publier/imapcir.html 73,68 81,91 

Les lignes commençant par un # sont des commentaires. Les autres lignes définissent des zones. Chaque ligne consiste en une indication de la forme de la zone, suivie de l'URL associée, suivie d'un certain nombre de coordonnées x,y en pixels, relatives au coin supérieur gauche de l'image et définissant la zone en question.

Les différentes formes disponibles sont les suivantes:

default
Définit l'URL par défaut. 
Coordonnées: aucune
rect
Définit un rectangle. 
Coordonnées: haut-gauche bas-droit
circle
Définit un cercle (un disque pour être précis). 
Coordonnées: centre un_point_du_périmetre
poly
Définit un polygone de 100 sommets au plus. 
Coordonnées: coordonnées de tous les sommets
point
Définit un point, l'URL retenu sera alors celle du point le plus proche de l'endroit ou l'utilisateur a clique. 
Coordonnées: le_point

3-Intégrer l'Imagemap dans une page HTML

L'Imagemap de l'exemple donné plus haut a été inclus dans cette page HTML de la manière suivante:

<A HREF="http://www.dom.org/cgi-bin/imagemap/~fplanque/Publier/imap.map">
  <IMG SRC="imap.gif" ISMAP>
</A>

Vous devez donc commencer par intégrer l'image GIF dans votre page HTML au moyen du marqueur IMG. Notez la présence de l'attribut ISMAP. C'est grâce à la présence de cet attribut que le client saura qu'il faut envoyer les coordonnées précises du point de l'image sur lequel on a cliqué.

Vous devez ensuite inclure cette image dans un lien au moyen du marqueur <A>. Vous ferez référence au module CGI qui traite les imagemaps (ici http://www.dom.org/cgi-bin/imagemap) et vous ajouterez derrière le chemin d'accès au fichier .MAP (ici /~fplanque/Publier/imap.map). Ce chemin d'accès (extra PATH_INFO) sera transmis au module CGI imagemap qui saura ainsi où trouver le fichier .MAP.


Autres sources d'informations

  • mapedit, un petit utilitaire permettant de générer graphiquement les fichiers .MAP (existe sur différentes plates-formes).