fplanque: blog geek

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.

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).

Les formulaires apportent la vraie interactivité, celle qui donne vie au Web! Aussi sophistiquées qu'elles soient, sans formulaires vos pages HTML sont en lecture seule. Les formulaires permettent à l'utilisateur de vous renvoyer un commentaire sur vos pages, de spécifier un critère de recherche dans une base de données ou encore d'effectuer un choix complexe parmi plusieurs alternatives.

Vous trouverez ci-dessous les différents types de champs que vous pouvez combiner dans un formulaire. Ces champs doivent être définis à l'intérieur d'une section formulaire délimitée par <FORM> et</FORM>.

Note: Ce document explique comment réaliser des pages HTML contenant un formulaire, mais pas comment vous pouvez récupérer et traiter les données que l'utilisateur a entrées dans ledit formulaire. Nous verrons comment effectuer ce traitement lorsque nous aborderons la Common Gateway Interface.

<INPUT NAME="Nom">

<INPUT NAME="e-mail" VALUE="Joe.Sixpack@supermarket.com" SIZE=40>

<INPUT NAME="CP" SIZE=5 MAXLENGTH=5>

<INPUT TYPE=PASSWORD NAME="Pass">

<INPUT NAME="Client" TYPE=CHECKBOX>
<INPUT NAME="Brochure" TYPE=CHECKBOX CHECKED>

<INPUT NAME="Sexe" VALUE="H" TYPE=RADIO CHECKED>
<INPUT NAME="Sexe" VALUE="F" TYPE=RADIO>

<TEXTAREA NAME="Commentaire" ROWS=8 COLS=55>
Bonjour,
j'ai un problème et je vais vous l'expliquer:
</TEXTAREA>

<SELECT NAME="Action">
 <OPTION> Emettre un avis
 <OPTION> Réclamer
 <OPTION SELECTED> Raler
 <OPTION> Crier votre haine
</SELECT>

<SELECT NAME="simple" SIZE=3>
 <OPTION> Emettre un avis
 <OPTION> Réclamer
 <OPTION SELECTED> Raler
 <OPTION> Crier votre haine
</SELECT>

<SELECT NAME="multi" MULTIPLE>
 <OPTION> Anchois
 <OPTION SELECTED> Trois Fromages
 <OPTION> Epices
 <OPTION SELECTED> Ananas
 <OPTION> Olives
</SELECT>

<INPUT TYPE=HIDDEN NAME="Cache" VALUE="Demo">

<INPUT TYPE=SUBMIT VALUE="Envoyer">

<INPUT TYPE=RESET VALUE="Effacer">

Transmission des données

Le marqueur FORM accèpte plusieurs attributs permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.

ACTION="url" permet d'indiquer l'URL de la page, ou plutôt du programme CGI à appeler lorsque l'on clique sur le bouton de validation. L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le formulaire. Il y en a deux:

• La méthode GET est la méthode par défaut. Elle consiste à concatèner les données du formulaire à l'URL, après avoir inséré un point d'intérrogation. On obtient alors une URL du typehttp://www.dom.org/chemin/prog.html?données.
• La méthode POST consiste à envoyer les données au serveur dans le corps de la requête plutôt qu'en tant que partie de l'URL.

Il est recommandé d'utiliser la méthode POST.

L'attribut ENCTYPE permet de spécifier la manière dont doivent être encodées les données envoyées par la méthode POST. Seule la méthode par défaut peut être utilisée pour l'instant: application/x-www-form-urlencoded.

HTML 3.0 permet de mettre en forme des tableaux. Cette fonction est également supportée dans une version réduite par Netscape Navigator depuis la version 1.1 et d'autres browsers actuels.

Les marqueurs à utiliser sont les suivants:

• <TABLE> et </TABLE> encadrent l'ensemble de la définition du tableau. Par defaut les cellules du tableau ne sont pas encadrées. En spécifiant l'attribut BORDER votre tableau aura un aspectquadrillé. 
  Pour définir le contenu du tableau vous utiliserez les marqueurs suivants:

  • <CAPTION> permet de définir le titre du tableau. Par défaut, ce titre apparaît au dessus du tableau. Si vous voulez le faire apparaitre en dessous, utilisez l'attribut ALIGN=BOTTOM.

  • <TR> permet de définir une ligne du tableau. Il doit y avoir autant de <TR> que de lignes dans le tableau. En théorie, chaque ligne doit se terminer par </TR> mais ceci est optionnel. 
    Pour définir le contenu de chaque ligne, vous utiliserez les marqueurs suivants:

    • <TD> permet de définir une cellule de données. Vous pouvez définir des cellules vides.
    • <TH> permet de définir une cellule de titre. Le contenu d'une telle cellule apparait généralement en gras par rapport à une cellule de données. Ce type de cellule est normalement utilisé pour donner un titre à chaque ligne et à chaque colonne.

Le texte à l'intérieur des cellules peut être aligné grâce aux attributs suivants de TD et TH: (Si ils sont utilises comme attributs de TR, ils s'appliquent à une ligne complète)

• ALIGN= qui peut prendre les valeurs LEFT, CENTER ou RIGHT.
• VALIGN= qui peut prendre les valeurs TOP, MIDDLE, BOTTOM ou BASELINE.

Vous trouverez ci-dessous un exemple de tableau contenant un titre, des cellules de titre, des cellules de données et des cellules absentes/vides.

Ceci a été obtenu grâce au code source suivant:

<TABLE BORDER>
<CAPTION ALIGN=BOTTOM> Melange de couleurs </CAPTION>
  <TR><TH> Couleurs </TH><TH> Rouge   </TH><TH> Vert  </TH><TH> Bleu    </TH></TR>
  <TR><TH> Rouge    </TH><TD>         </TD><TD> Jaune </TD><TD> Magenta </TD></TR>
  <TR><TH> Vert     </TH><TD> Jaune   </TD><TD>       </TD><TD> Cyan    </TD></TR>
  <TR><TH> Bleu     </TH><TD> Magenta </TD><TD> Cyan  </TD><TD>         </TD></TR>
</TABLE>

Il est également possible de fusionner plusieurs cellules, soit horizontalement, soit verticalement, grâce aux attributs suivants de TD:

• COLSPAN=x ou x est le nombre de colonnes standard que doit couvrir cette cellule large.
• ROWSPAN=y ou y est le nombre de lignes standard que doit couvrir cette cellule haute.

Voici un exemple:

Ceci a été obtenu grace au code source suivant:

<TABLE BORDER>
<caption> On rigole</caption>
  <tr> <td COLSPAN=3> A </td> <td ROWSPAN=3> 3 </td> </tr>
  <tr> <td COLSPAN=2> B </td> <td ROWSPAN=2> 2 </td> </tr>
  <tr> <th> Coin! </th> <td> 1 </td> </tr>
</TABLE>

Voici un dernier exemple sans bordure:

<TABLE>
<TR><TH>Article</TH><TH>Prix</TH>
<TR><TD ALIGN=RIGHT>Papier</TD><TD ALIGN=RIGHT>44.99</TD>
<TR><TD ALIGN=RIGHT>Encre</TD><TD ALIGN=RIGHT>178.55</TD>
</TABLE>

Motif de fond

HTML 3.0 permet de définir un motif de fond pour vos pages. Cette fonction est également supportée par Netscape Navigator depuis la version 1.1, en tant qu'extension de la norme HTML 2.0.

Ceci est obtenu par l'adjonction de l'attribut BACKGROUND au marqueur BODY de votre document, comme ceci:

<BODY BACKGROUND="image_de_fond.gif">
  Votre document...
</BODY>

Note: Cette méthode est aujourd'hui totalement obsolète. Tournez vous plutôt vers CSS.

Couleurs

L'inconvénient avec certains motifs de fond, c'est que bien souvent, ils rendent impossible la lecture du texte qui s'affiche, par défaut, en noir. Pour remédier a ce probleme, Netscape a integré des attributs supplémentaires au marqueur BODY. Ces attributs ne font pas partie de la norme HTML.

• TEXT permet de fixer la couleur du texte du document. Par défaut, le texte est généralement noir, sur cette page il est blanc.
• LINK permet de fixer la couleur des liens du document. Par défaut, les liens sont généralement bleu, sur cette page ils sont vert clair.
• VLINK permet de fixer la couleur des liens une fois qu'ils ont ete visites. Par défaut, ils sont généralement violets, sur cette page ils sonts vert foncé.
• ALINK permet de fixer la couleur des liens actifs, c'est a dire la couleur qu'ont les liens au moment ou vous cliquez dessus. Par défaut, ils sont alors généralement rouges, sur cette page, ils sont jaunes.
• BGCOLOR permet de fixer la couleur du fond du document. Cette couleur sera utilisée a la place du gris ou du blanc habituel si vous n'avez pas indiqué d'image de fond avec l'attribut BACKGROUNDou si cette image n'a pas pu etre chargée pour une raison quelconque.

Pour cette page, nous avons utilisé la définition suivante:

<BODY BGCOLOR="#000000" 
         TEXT="#FFFFFF"
         LINK="#00FF00"
         VLINK="#00A000" 
         ALINK="#FFFF00"
         BACKGROUND="image_de_fond.gif">
  Votre document...
</BODY>

Les codes de couleur doivent être interprétés de la manière suivante: derrière le dièse, on trouve six caractères qu'il convient de grouper deux par deux. Ces groupes de deux caractères représentent l'intensité des couleurs de base rouge, vert et bleu (dans l'ordre) sous forne d'un nombre hexadécimal compris entre 00 et FF.