Créer des documents HTML sous OS/2

Ce document traite d'HTML. Il décrit ce que c'est, rappelle comment consulter ce type de documents, explique comment en réaliser, et même ce qu'il faut utiliser pour monter son propre serveur HTTP (à condition d'avoir un accès à Internet).

Dans la mesure du possible, les explications données sont accompagnées de commentaires et de conseils, parfois évidents, mais toujours bon à rappeler...

Contenu


Qu'est-ce qu'HTML ?

L'HyperText Markup Language (HTML) est un format de donnée simple utilisé pour créer des documents hypertexte portables d'une plateforme à une autre. Les documents HTML sont des documents SGML avec des sémantiques génériques qui sont appropriées pour représenter des informations d'un large ensemble de domaines.

HTML a été utilisé par l'initiative d'information globale World Wide Web (WWW) à partir de 1990.

HTML est une application du standard ISO 8879:1986 Information Processing Text and Office Systems; Standard Generalized Markup Language (SGML).


Consultation de documents HTML

Avec OS/2 Warp, le moyen le plus simple et le plus naturel pour consulter des documents HTML est d'utiliser Netscape Navigator, disponible librement. Cependant, vous pouvez si vous le souhaitez utiliser un autre client HTML, comme par exemple WebExplorer (ou tout autre client sous OS/2, DOS ou Windows). Netscape Navigator présente l'avantage d'être gratuit, rapide et bien intégré à OS/2 Warp (glisser-lâcher, unités d'exécution multiples, ...). WebExplorer ayant pour lui le fait d'être moins gourmand en ressources, mais il ne supporte pas les extensions non standard de HTML, très répandues sur les serveurs.
Si vous souhaitez accéder rapidement aux documents, et si ceux-ci contiennent essentiellement du texte, vous pouvez utiliser Lynx v2.6, qui est un client HTML en mode texte. Il n'affiche bien sûr pas les images, mais est très rapide.

Utilisation d'un client HTML

Dans les paragraphes qui suivent, on supposera sauf indication contraire l'utilisation de WebExplorer.

Pour pouvoir consulter un document, il faut en connaître l'adresse (URL, « Uniform Resource Locator ») :

Si le document que vous voulez consulter se trouve sur votre disque dur, ou dans un répertoire accessible via votre réseau local, vous pouvez également faire glisser l'icône de ce document sur une fenêtre WebExplorer ouverte, ou entrer l'URL du document sous la forme : file:///x:/toto/titi.html ou plus simplement x:/toto/titi.html.

Pour conserver l'URL d'un document qui vous intéresse, vous pouvez :

Les formes d'URL les plus fréquemment rencontrées sont les suivantes (ce qui est entre crochet est optionnel) :

Pour plus d'information sur l'utilisation de votre client HTML, consultez sa documentation.


Comment créer des documents HTML ?

Préliminaires

Avant toute chose, il faut déterminer l'audience à laquelle vous destinez les documents que vous souhaitez réaliser.

Audience « restreinte »

Si l'audience, c'est vous (ou les autres utilisateurs de votre ordinateur) ou des utilisateurs connectés sur le même réseau local que vous, alors il vous suffit d'utiliser un répertoire (accessible aux autres utilisateurs en lecture si vous êtes sur un réseau local).

Audience « large »

Si votre audience est plus large (et en particulier, si vous souhaitez rendre vos documents accessibles via Internet), alors il vous faut disposer d'un espace disque sur un serveur HTTP connecté à Internet.

Si vous êtes dans une entreprise ou une école connectée à Internet, contactez votre administrateur système, si nécessaire, pour obtenir l'accès à ce serveur. (Votre entreprise ou école peut imposer des restrictions quant à ce que vous pouvez rendre accessible à partir du serveur.)

Si votre entreprise ou école est connectée à Internet, mais ne dispose pas d'un serveur HTTP, voyez avec votre administrateur système s'il est possible de créer un tel serveur --- un ordinateur avec OS/2 Warp peut parfaitement tenir ce rôle.

Si votre entreprise ou école n'est pas connectée à Internet (ou elle ne peut/veut ouvrir un serveur HTTP), ou si vous êtes un particulier « ordinaire » (J'aime bien l'expression « particulier ordinaire » :-) ), il vous faut alors trouver quelqu'un pour vous prêter ou louer un accès à un serveur HTTP. Ce « quelqu'un » peut être un(e) ami(e) (dans le cas d'un particulier), ou une autre entreprise/école, ou un prestataire proposant un accès Internet.

De nombreux prestataires proposent leurs services pour héberger vos documents si vous ne disposez pas d'un accès permanent à Internet. Certains sont même gratuits pour des utilisations non commerciales (GeoCities, Mygale, etc.).

Quelques remarques

Les remarques suivantes sont données sous la forme de remarques suivies d'un commentaire, explicitant (je l'espère) la dite remarque.

La première remarque est qu'il faut savoir ne pas toujours tenir compte des remarques ci-dessous.

Autrement dit, ces remarques sont générales, et c'est à vous de décider si le document que vous êtes en train de composer justifie ou non une exception.

Pensez au fait que tout le monde n'a pas la même configuration matérielle que vous (e.g., certains utilisent des écrans monochrome, voir même des terminaux alphanumériques --- i.e., ne pouvant représenter les images, ...).

Ce qui signifie que vous faire en sorte que votre document soit compréhensible quelque soit la configuration utilisée pour le consulter. Il ne doit donc pas dépendre d'une résolution ou d'un nombre de couleurs donnée, et être lisible même si les images n'apparaissent pas. (Cibler 256 couleurs et une résolution horizontale de 600 pixels est une approche raisonnable aujourd'hui.)

Pensez au fait que certaines personnes paieront pour consulter vos documents, ou qu'elles utiliseront un accès à débit faible ou modéré (14400 ou 28800 Bps), ou encore que les performances du réseau ne sont pas toujours excellentes, surtout aux heures de pointes.

Ce qui signifie qu'une image 1024x1024 en 16 millions de couleurs, c'est très beau, mais s'il faut attendre 20 minutes pour qu'elle apparaisse, c'est un peu ennuyeux --- surtout si elle est indispensable à la compréhension du document.

Pensez au fait que tout le monde n'utilise pas nécessairement le même client HTML que vous. Évitez d'utiliser des spécificités propres à tel ou tel client.

En d'autres termes, essayez de vous cantonner à un minimum supporté par le plus grand nombre de clients HTML. Par exemple, essayez de respecter la définition d'HTML 3.2, et n'employez pas de caractéristiques propres à HTML+. Autre exemple, WebExplorer supporte les images au format OS/2 .BMP, mais, si vous incluez de telles images dans vos documents, les personnes qui utilisent Netscape ou Mosaïc ne pourront pas les voir (dans le cas précis des images, essayez de n'utiliser que les formats GIF et JPEG).

Bon, je vais pour le moment arrêter là mes remarques, sinon vous allez finir par vous faire des idées sur moi :-)

Utiliser un générateur de documents HTML

Un générateur de documents HTML est un logiciel qui peut ressembler à un traitement de texte classique, tout en gérant certaines spécificités propres à HTML (formulaires, liens vers d'autres serveurs/documents, etc.). Il existe de nombreux produits de ce type (HyperWise (IBM), EHTML v0.9 [71k], HTML Wizard v1.61 [1,1M], HomePage Publisher vb01.a [2,4M], QadHTML v0.35 [484k], WebWriter/2 v1.1 [919k], HTMLGen v1.20 [165k], HTML Studio [1,4M] (Panacea Software), Page v1.1, Picardy 3 HTML Editor v0.61 [232k], HTML-Ed v0.96b [183k], etc. Consulter ce serveur pour obtenir une liste plus complète).

Je n'ai personnellement testé qu'HTMLGen v1.10 (et je le déconseille) et HyperWise 2.0 (qui lui n'est pas mal du tout). Si vous en avez essayé un (ou plusieurs), je suis intéressé par votre avis...

Il existe aussi des convertisseurs, qui transforme des fichiers d'un format donné vers HTML (par exemple, INF_hTML [290k], P_2_HTML [655k], HTMLutil [16k] et Rtf2Html v2.7.5 [314k] transforment respectivement un fichier .INF, Pascal, .IPF ou .RTF en un ensemble de fichiers HTML équivalent, ...), ce qui vous permet d'utiliser votre traitement de texte habituel, s'il peut créer des fichiers en l'un de ces formats (la plupart des traitement de texte peuvent produire des fichiers .RTF). Ces convertisseurs ne vous dispensent cependant pas de devoir modifier le code HTML généré si vous voulez tirer partie de certaines spécificités HTML, comme par exemple mettre des liens vers d'autres serveurs. Ces outils sont toutefois très utiles lorsque vous avez à convertir un large ensemble de documents.

[...en cours...]

Composer ses documents en HTML

Si vous souhaitez composer directement vos documents en HTML, ce n'est pas si sorcier que cela, surtout si vous avez déjà l'habitude des langages de description de documents « taggés » (comme BookMaster, IPF, ou TeX/LaTeX). Il suffit alors d'utiliser un éditeur de texte un peu évolué, disposant d'un mode d'édition adapté, comme par exemple l'Éditeur plus (EPM) ou EMACS (avec le mode adéquat --- EBOOKIE dans le cas d'EPM, html-mode.el dans le cas d'EMACS).

Je ne vais pas [re]commencer ici une guerre de religion sur les éditeurs de texte, et je n'ai cité les éditeurs précédants que parce que ce sont ceux que je connais le mieux. +(:-) [Le smiley, c'est moi commençant une guerre de religion :-) ]

Si vous utilisez EBOOKIE, vous pouvez charger les fichiers de définition pour HTML, contenus dans HTMLutil [16k]. (Si vous utilisez une page de code autre que 850 ou 437, adaptez le fichier HTMLTAGS.850 (ou 437) en conséquence.)

Suivant l'éditeur de texte auquel vous êtes habitué, vous pouvez utiliser d'autres extensions, comme par exemple HTML extensions for EPM v0.98 [33k], Free HTML plug-in for EPM [32k], Smalled HTML extensions [139k]. (Cette liste n'est pas exhaustive.)

[...en cours...]


Quelques rudiments sur HTML

Un document HTML est un texte ASCII simple, additionné de « tags », qui structurent le contenu.

Le texte complet de la spécification HTML 2.0 est disponible sur le serveur du World Wide Web Consortium (W3C).

Structure d'un document HTML

Considérons l'exemple suivant (la première colonne ne fait pas partie du document, elle n'est là que pour faciliter les commentaires) :

 1 <!doctype html public "-//IETF//DTD HTML 2.0//EN">
 2 <HTML>
 3 <HEAD>
 4 <TITLE>Mon premier document</TITLE>
 5 </HEAD>
 6 <BODY>
 7 <H1>Un grand titre</H1>
 8 <P>Un bref paragraphe : bla bla bla</P>
 9 <H2>Un sous titre</H2>
10 <P>Un second paragraphe, contenant plein de propos intelligents.</P>
11 <P>Un dernier paragraphe : blablabla</P>
12 </BODY>
13 </HTML>

La première ligne indique qu'il s'agit d'un document au standard HTML 2.0. Elle est facultative, mais donne une indication utile au serveur.

Les lignes suivantes (2 à 13) contiennent le document à proprement parler, qui a la structure suivante :

     HTML
      |
      |-- HEAD
      |    |
      |    \-- TITLE
      |          |
      |          \-- "Mon premier document"
      \-- BODY
           |
           |-- H1
           |   |
           |   \-- "Un grand titre"
           |
           |-- P
           |   |
           |   \-- "Un bref paragraphe : bla bla bla"
           |
           |-- H2
           |   |
           |   \-- "Un sous titre"
           |
           |-- P
           |   |
           |   \-- "Un second paragraphe contenant plein de propos
           |        intelligents."
           \-- P
               |
               \-- "Un dernier paragraphe : blablabla"

Un document HTML est donc composé d'une structure <HTML>...</HTML>, qui contient elle même deux structures (<HEAD>...</HEAD> et <BODY>...</BODY>).

En HTML, les structures sont composées d'une marque (« tag ») de début, notée entre crochets, et d'une marque de fin, reprenant le nom de la structure, précédée d'une barre oblique, et toujours entre crochets.

Identification d'un document HTML

La structure HEAD (lignes 3 à 5) peut ne pas contenir qu'une structure TITLE (ligne 4), qui spécifie le titre du document (ce qui apparaîtra dans la barre de titre de la fenêtre).

Cependant, en plus du titre du document, cette structure peut contenir des éléments qui précisent l'identité du document (son ou ses auteurs, sa date de création, etc.).

En dehors de la structure TITLE (qui est obligatoire), les éléments les plus souvent rencontrés sont :

<LINK REV=MADE HREF="url">
url est l'URL complète de l'auteur (par exemple, mailto:lafaix@ibm.net) ;
<LINK REL="stylesheet" HREF="url" TYPE="text/css">
url est l'URL de la feuille de style à employer pour présenter le document (si le client HTML en tient compte) ;
<META NAME="owner" CONTENT="propriétaire">
propriétaire est l'adresse de la personne qui « possède » le document (par exemple, lafaix@ibm.net) ;
<META NAME="review" CONTENT="date">
date est la date de dernière modification du document (si possible sous forme ISO, i.e., aaaammjj --- par exemple, 19950520 pour le 20 mai 1995) ;
<META NAME="language" CONTENT="langage">
langage est le langage dans lequel est écrit le document, en utilisant les abréviations ISO (par exemple, fr ou en.us ou en.uk) ;
<META NAME="keywords" CONTENT="liste">
liste est une liste de mots clés séparés par des espaces.
Les mots clés facilitent le travail des outils de recherche tels Altavista, Yahoo ou Lycos. Il n'existe pas vraiment de règles pour déterminer les mots clés, mais essayez de n'employer que des mots au singulier --- et évitez l'emploi des caractères accentués et des symboles (par exemple, préférez os2 à OS/2), certains de ces symboles pouvant avoir une signification particulière pour les moteurs de recherche...

Corps d'un document HTML

La structure BODY (ligne 6 à 12) contient le corps du document, qui est constitué d'un ensemble de structures HTML (des titres de sections, comme <H1>, des paragraphes, etc.).

Les lignes 7 et 9 contiennent des titres de sections. La ligne 7 contient un titre de section principale, la ligne 9 un titre de sous-section. (Il y a 7 niveaux de sections possibles, de <H1> à <H7>). Veillez à respecter la séquence des sections/sous-sections (i.e., un <Hn> peut suivre un <Hn+...> ou un <Hn-1>, mais pas un <Hn-2> ...) --- autrement dit, utilisez les titres de sections pour délimiter des sections, et pas pour faire joli...

Les lignes restantes, 8, 10 et 11, contiennent des paragraphes. Un paragraphe peut s'étendre sur plusieurs lignes, et la marque de fin (</P>) n'est pas obligatoire (un paragraphe se termine juste avant le début de la structure qui le suit --- autre paragraphe, titre de section, etc.).

Dans le corps des documents HTML, les espaces et les lignes vides ne sont pas significatifs (ou, pour être plus précis, sont interprétés comme étant un unique espace). Les deux paragraphes suivants sont donc identiques :

<P>Un texte compact.
<P>Un         texte


compact.

Il y a une exception à cette règle, c'est la structure <PRE>...</PRE>, dans laquelle les espaces et les lignes vides sont préservés, et qui sert entre autre à réaliser l'exemple qui précède.

[...en cours...]

Les caractères accentués et les symboles

Tout serait trop beau et trop simple s'il n'y avait pas un petit, euh, détail qui pimentait le tout. Ce détail, ce sont les symboles et les caractères diacritiques (les lettres accentuées, entre autre).

En effet, les caractères des documents HTML sont transmis sur 7 bits, et les accents doivent donc êtres codés différemment, sur plus d'un caractère. Ainsi, si vous regardez le code HTML correspondant au début de ce document (Ctrl+V si vous utilisez WebExplorer, View/Source code avec NetScape), vous verrez quelque chose comme:

<!doctype html public "-//IETF//DTD HTML 2.0//EN">
<HTML>
<HEAD>
<TITLE>Cr&eacute;er des documents HTML sous OS/2</TITLE>
</HEAD>
<BODY>
...

[Notez le « Cr&eacute;er », qui apparaît pourtant correctement dans la barre de titre.]

C'est la raison pour laquelle il peut être fastidieux d'écrire des documents HTML en français si vous ne disposez pas d'un éditeur évolué ou d'un logiciel qui génère des documents HTML pour s'occuper de ce « détail »... (avec de tels outils, vous tapez votre texte normalement, et c'est l'outil qui se charge de transformer vos accents en code).

Certains outils créés par des anglo-saxons « omettent » de traiter ce point de détail, ce qui les rends quasiment inutilisables pour produire des documents en français...

Si vous ne disposez pas d'un outil assurant pour vous la conversion, vous pouvez vous reporter à la table suivante, qui contient les accents usuels :

_____________________________________________________________________

á &aacute;  Á &Aacute;  à &agrave;  À &Agrave;  â &acirc;  Â &Acirc;
ä &auml;    Ä &Auml;    å &aring;   Å &Aring;   ã &atilde; Ã &Atilde;
æ &aelig;   Æ &AElig;
ç &ccedil;  Ç &Ccedil;
ð &eth;     Ð &ETH;
é &eacute;  É &Eacute;  è &egrave;  È &Egrave;  ê &ecirc;  Ê &Ecirc;
ë &euml;    Ë &Euml;
í &iacute;  Í &Iacute;  ì &igrave;  Ì &Igrave;  î &icirc;  Î &Icirc;
ï &iuml;    Ï &Imul;
ñ &ntilde;  Ñ &Ntilde;
ó &oacute;  Ó &Oacute;  ò &ograve;  Ò &Ograve;  ô &ocirc;  Ô &Ocirc;
ö &ouml;    Ö &Ouml;    ø &oslash;  Ø &Oslash;  õ &otilde; Õ &Otilde;
ß &szlig;
ú &uacute;  Ú &Uacute;  ù &ugrave;  Ù &Ugrave;  û &ucirc;  Û &Ucirc;
ü &uuml;    Ü &Uuml;
ý &yacute;  Ý &Yacute;  ÿ &yuml;
_____________________________________________________________________

Non, ne cherchez pas le OE collé, il n'y est pas (la légende veut que le représentant Français au comité ISO chargé de l'élaboration de la page de code ISO-Latin 1 ne se soit pas présenté à la scéance finale, et que le OE collé ait été remplacé à cette dernière minute par des symboles mathématiques...)

Les symboles (et donc les caractères diacritiques) sont notés sous la forme d'un « Et commercial » (&), suivi du nom du symbole et d'un point-virgule (;). Si le nom du symbole est erronné, il sera affiché un '&', suivi du nom et d'un point virgule (comme dans ź). Les symboles suivants peuvent être utiles (attention, certains symboles, bien que définis dans la norme HTML 2.0, ne sont pas reconnus par NetScape ou Mosaïc) :

  & &amp;
  < &lt;
  > &gt;
    &nbsp;       --- espace insécable;
  © &copy;
  ® &reg;
  « &laquo;
  » &raquo;
  ¼ &frac14;
  ½ &frac12;
  ¾ &frac34;
  ¹ &sup1;
  ² &sup2;
  ³ &sup3;
  ¡ &iexcl;
  ¿ &iquest;

[Une autre représentation utilisable pour les symboles est la forme &#nn ;, où nn est le code numérique du symbole (par exemple, &#60; == &lt; == < ) --- mais le code HTML ainsi représenté est peu lisible.]

Les liens (ancres)

Les documents que nous savons créer pour le moment correspondent à ce que nous pouvions déjà faire avec un traitement de texte, sans plus. Nous allons aborder dans cette section les liens (aussi appelés ancres), afin de composer des documents hypertexte (i.e., interactifs).

Un lien est une entité qui lorsqu'elle est sélectée par l'utilisateur entraine une action. Par exemple, si le lien réfère un autre document HTML, celui-ci sera chargé et affiché.

Créer des liens vers d'autres documents/ressources

Pour placer des liens dans vos documents, incluez la portion de texte (ou l'image) que vous souhaitez utiliser comme lien dans une structure <A HREF=...>...</A>.

Le paramètre de l'attribut HREF est l'URL souhaitée (i.e., l'action à déclancher lorsque le lien est sélecté). Ainsi, si vous voulez créer un lien autour du mot document, vous devez entrer quelque chose comme :

  [...] autour du mot <A HREF="document.html">document</A>, vous [...] 

Maintenant, lorsque vous sélecterez ce lien, le document document.html sera chargé et affiché (s'il existe, sinon une erreur sera retournée).

En fait, dans l'exemple qui précède, nous avons employé une forme abrégée de l'URL en ne spécifiant que le nom du fichier. Cette forme abrégée est interprétée comme ayant le même début que l'URL du document en cours de visualisation, autrement dit comme HTTP://www.mygale.org/~lafaix/os2/document.html. Cette forme simplifiée facilite la portabilité des documents : en effet, si le serveur change d'adresse, ou est dupliqué ou ..., il n'est pas nécessaire de modifier les documents, les liens entre les documents du serveur resteront valides (un peu comme avec l'utilisation des références relatives dans les formules d'une feuille de calcul).

Un lien ne réfère pas nécessairement un autre document. Il peut accéder à un site FTP, à un newsgroup ou d'autres choses encore... Pour cela, il suffit d'utiliser l'URL correspondant à la ressource souhaitée.

Rendre accessible des parties précises d'un document

Parfois, vous souhaiteriez pouvoir accéder à telle ou telle partie d'un document, sans avoir à faire défiler son contenu. Pour cela, vous pouvez placer des points de références, auquels vous pourrez ensuite accéder via des liens.

Un point de référence est englobé dans une structure <A NAME=...>...</A>, comme par exemple :

  <H2><A NAME=section325>La culture des fraises en basse loire</A></H2>

Maintenant, pour accéder directement à cette section, il suffira d'utiliser :

  <A HREF="#section325">...</A>
si le lien est dans le même document que le point de référence, ou
  <A HREF="basse_loire.html#section325">...</A>
s'il est dans un autre document du même serveur (ou encore une URL complète, si le document est sur un autre serveur).

Les listes et les énumérations

Il arrive souvent dans un document que l'on souhaite présenter un ensemble de points ou de définitions (par exemple des ingrédients ou des étapes à suivre, etc.). Une solution est bien sûr d'utiliser un paragraphe pour représenter chaque élément, mais cela peut être fastidieux si l'on veut insérer un élément au milieu d'une liste énumérée, par exemple, et, surtout, la structure du document n'est pas représentée (il n'y a aucun moyen de détecter s'il s'agit d'une liste ou non).

HTML offre trois structures principales pour représenter les listes : les listes non ordonnées, les listes ordonnées et les listes de définitions.

Les listes ordonnées et non ordonnées

Les listes simples sont basées sur un même principe : une marque de début de liste (<OL> ou <UL>), un ou plusieurs éléments (commençant par <LI>) et une marque de fin de liste (</OL> ou </UL>). OL est l'acronyme de « Ordered List », UL de « Unordered List » et LI de « List Item ».

Par exemple, une liste d'ingrédients pourra être représentée ainsi :

  <UL>
  <LI>Pâte à pain : 500 grammes
  <LI>Beurre doux : 250 grammes
  <LI>Sucre cristallisé : 250 grammes
  </UL>

et les différentes étapes de la recette comme ceci :

  <OL>
  <LI>Faire préchauffer le four thermostat 8.
  <LI>Abaisser la pâte à une épaisseur d'environ 5 millimètres.
  <LI>Recouvrir avec le beurre, en prenant soins de laisser une
      bordure d'environ 1 cm.
  <LI>Étaler le sucre sur le beurre.
  <LI>Replier la pâte sur elle-même, et l'abaisser à nouveau.
      Répeter cette étape 2 ou 3 fois.  Un peu comme lorsqu'on 
      veut faire une pâte feuilletée.
  <LI>Mettre dans un plat, et faire cuire 45 minutes environ.
  <P>En cours de cuisson, reverser le beurre qui a fondu sur la
      préparation.
  </OL>

Chaque élément peut contenir plusieurs paragraphes, des liens ou d'autres listes. Ils ne peuvent cependant pas contenir de sections (<Hn>), ce qui de toute façon n'aurait guère de sens.

Vous n'avez pas à vous préoccuper du rendu de votre document : le client HTML se charge d'indenter les éléments, de les numéroter si besoin ou de les précéder de « puces ».

Les listes de définitions

Lorsque les éléments que vous souhaitez énumérer sont de la forme libellé/explication (par exemple un glossaire, ou une liste d'ouvrages accompagnés d'un résumé), vous pouvez utiliser une liste de définitions.

Cette liste se présente sous la forme d'une marque de début de liste (<DL>), d'un ou plusieurs couples <DT>/<DD> (un par élément) et d'une marque de fin de liste (</DL>). DL est l'acronyme de « Definition List », DT de « Definition Term » et DD de « Definition Definition » (sic).

Par exemple, pour définir deux verbes :

  <DL>
  <DT>sélectionner
  <DD>v. tr. (1899)  Sélectionner des élèves
  pour un concours (syn. CHOISIR).  Sélectionner des 
  joueurs de football pour un match international. 
  Sélectionner des graines pour la semence.
  <DT>sélecter
  <DD>v. tr. Effectuer une opération de sélection 
  sur une machine à cartes perforées.
  </DL>
Comme précédemment, vous n'avez pas à vous préoccuper du rendu de votre document : le client HTML se charge de présenter correctement les éléments.

Les attributs de mise en forme

Nous avons vu jusqu'à présent comment structurer nos documents. Cependant, ces structures sont assez générales, et nous ne savons pas encore caractériser un élément d'un paragraphe (comme un titre d'ouvrage, ou ...).

HTML permet deux types de caractérisation : celles qui portent un sens (un titre d'ouvrage, une portion de code, etc.) --- éléments idiomatiques, si vous souhaitez briller en société :-), et celles qui sont juste typographiques (italique, soulignement, etc.).

Il est préférable d'utiliser chaque fois que c'est possible des éléments de la première catégorie, car (1) ils apportent un plus (vous pouvez par exemple automatiquement extraire les ouvrages cités dans un document) et (2) le client HTML peut adapter la représentation employée aux souhaits de l'utilisateur ou aux conventions du pays (par exemple, dans les pays anglo-saxons, les titres d'ouvrages sont rendus en italique, alors qu'en France, ils devraient être soulignés).

  <EM>mise en évidence</EM>
  <STRONG>renforcement</STRONG>
  <CITE>titre d'ouvrage</CITE>
  <CODE>portion de code</CODE>

  <B>gras</B>
  <I>italique</I>
  <TT>machine à écrire</TT>
  <U>soulignement</U>

Les figures, les images et les tables

Pour clore cette introduction à HTML, voyons maintenant comment ajouter des figures, des images ou des tables dans un document HTML.

Les figures

Une figure, c'est une portion de texte dans laquelle l'indentation est préservée. C'est à dire comme dans tous les exemples de ce document.

Une figure est incluse dans une structure <PRE>...</PRE>. Les espaces et les lignes vides seront conservés. Vous pouvez toujours utiliser les attributs de mise en forme et les symboles diacritiques, mais vous ne pouvez pas y inclure des paragraphes ou des listes ou ... (ce qui n'aurait de toute façon pas de sens).

  <PRE>
  Une figure
      avec des espaces en début de ligne ainsi

  que des lignes vides
  </PRE>

Les figures sont représentées à l'aide d'une police de caractères non proportionnelle (ce qui permet d'obtenir une indentation prévisible).

Les images

Contrairement à tout ce que nous avons vu jusqu'à présent, les images ne sont pas spécifiées par une structure, mais par une simple marque <IMG SRC=...>.

Ainsi, pour inclure l'image « mon chef d'oeuvre.gif » dans un document, il suffit d'ajouter :

  [...] <IMG SRC="mon chef d'oeuvre.gif"> [...]

SRC n'est pas le seul paramètre possible (mais il est obligatoire). Le paramètre ALT permet par exemple de spécifier un texte qui apparaîtra à la place de l'image si le client HTML ne permet pas la représentation des images, ou si l'utilisateur en a décidé ainsi. Un autre paramètre utile est ALIGN, qui permet d'aligner le bas (ALIGN=BOTTOM), le milieu (ALIGN=MIDDLE) ou le haut (ALIGN=TOP) de l'image avec le texte qui l'entoure.

À partir d'HTML v3.0, il est également possible de spécifier la taille de l'image (en pixel) à l'aide des paramètres WIDTH= et HEIGHT=, ce qui peut aider le client HTML. De même, le texte peut s'enrouler autour d'une image, si vous spécifiez ALIGN=LEFT ou ALIGN=RIGHT.

  [...] <IMG SRC="dessin.gif" ALT="mon dessin" WIDTH=64 HEIGHT=64> [...]
Une remarque importante à propos des images : essayez dans la mesure du possible de n'utiliser que des images au format GIF ou JPEG. Ces formats sont en effet ceux qui ont le plus de chance d'être reconnus par les clients HTML. Si vos images sont au format .BMP d'OS/2, vous pouvez utiliser bmpgif2 [11k] pour les convertir, et éventuellement giftool [80k] pour spécifier un fond transparent ou un affichage entrelacé.

Les tables

Les tables, introduites avec HTML 3.0, sont les structures les plus complexes que nous verrons ici. Elles permettent de représenter des données sous forme de tableau.

Une table est constituée d'une structure <TABLE>..</TABLE>, qui contient elle-même une suite de structures <TR>..</TR> décrivant les lignes. Ces structures <TR>..</TR> contiennent elles-mêmes des structures décrivant chaque cellule (<TH>..</TH> pour les entêtes ou <TD>..</TD> pour les cellules « normales »).

Ainsi, pour décrire une table de trois lignes et deux colonnes, nous pouvons utiliser :

  <TABLE>
  <TR>
    <TH>Entête haut gauche</TH>
    <TH>Entête haut droit</TH>
  </TR>
  <TR>
    <TD>Donnée milieu gauche</TD>
    <TD>Donnée milieu droite</TD>
  </TR>
  <TR>
    <TD>Donnée bas gauche</TD>
    <TD>Donnée bas droite</TD>
  </TR>
  </TABLE>

Chaque cellule d'une table peut contenir n'importe quels éléments, à l'exception des titres de sections (<Hn>). Une cellule peut donc contenir une autre table, une liste, ou ...

Si vous souhaitez dessiner un cadre autour des cellules de la table, spécifiez le paramètre BORDER, comme ceci :

  <TABLE BORDER>
  ...
  </TABLE>
Attention : les documents qui contiennent des tables sont difficilement lisibles si le client HTML utilisé de les reconnaît pas.
WebExplorer ne respecte pas la norme HTML 3.0 en ce sens que le contenu des cellules est centré verticalement par défaut, alors qu'il ne le devrait pas. Pour remédier à ce défaut, et pour faire en sorte que vos documents aient la même allure quelque soit le client HTML employé, ajoutez l'argument VALIGN=TOP à chaque marque <TR> (i.e., utilisez <TR VALIGN=TOP>).

En guise de conclusion

Quelques rappels pour conclure :

  1. Essayez dans la mesure du possible de créer des documents qui respectent le standard HTML 2.0 ou 3.0. Si vous avez des doutes quant à la conformité d'un document, vous pouvez utiliser un service de validation ;
  2. Si le contenu d'un document vous intrigue, n'hésitez pas, regardez le code source (Ctrl+V avec WebExplorer) ;
  3. Préoccupez vous de la structure de vos documents, pas de leur représentation ;

    ...


Comment créer un serveur HTTP ?

[...en cours...] CERN HTTPD 3, OS2WWW v1.7, NCSA HTTPd v1.5, HTTPD 1.0a1.

GoServ est un serveur HTTP simple et peu gourmand, mais n'offre pas toute la panoplie des fonctions des serveurs HTTPs plus classiques. (Il gère cependant les formulaires.) Il est disponible gratuitement (c'est un EWS, disponible via l'offre DEVCON ou par ftp [329k]).

Internet Connection Server est un serveur HTTP complet, disponible aussi bien en anglais qu'en français. vous pouvez l'obtenir gratuitement par ftp (auquel cas aucun support n'est assuré) ou vous pouvez l'acheter (auquel cas un support technique et une documentation papier sont prévus).

Vous pouvez bien sûr écrire vos scripts en Rexx. Cependant, si vous souhaitez utiliser toutes les fonctionalités CGI, sans devoir lancer les outils CGI classiques (cgiparse, cgiutils, etc.), vous pouvez vous procurer la bibliothèque de fonctions Rexx Common Gateway Interface (RGI). Pour plus de renseignements sur ce produit, consultez son serveur WWW.


[Document d'accueil OS/2 |Trucs et Astuces |FTP |Développement |Team OS/2 |(c)]

ML