MÉTHODE RAISONNÉE POUR ÉCRIRE AVEC UN ORDINATEUR

IV LE FORMAT HTML

L’hyper text markup language est le format le plus universel qu’il soit. Il est lisible sur tout ordinateur, et même sur certains téléphones.

À la base, le html est assez simple, mais comme toute chose simple, il peut se compliquer sérieusement. Nous allons d’abord le voir comme quelque chose de simple.


HTML et texte brut

Lorsqu’il fut conçu, le HTML servait seulement à présenter du texte sans souci particulier de mise en page.

Sous sa forme la plus simple, le HTML sert à présenter du texte brut indépendamment du codage particulier des caractères spéciaux propres aux différents systèmes. Tous ces systèmes disposant d’applications spécifiques pour le lire : les navigateurs.

On peut aussi se servir du HTML pour faire des présentations très exigeantes. C’est là qu’apparaissent les complications, nous les ignorerons pour l’instant.


Les éditeurs HTML

De même qu’au texte brut correspondent les éditeurs de texte, et au texte enrichi, des traitements de texte, le HTML se traite avec un éditeur HTML. Il en est de deux sortes. Les plus faciles à utiliser pour le néophyte ressemblent à des traitements de texte, et l’on y voit la page telle qu’elle devra apparaître dans un navigateur. On les appelle « wysiwyg » (what you see is what you get).

Ils sont un peu plus limités que les traitements de texte, permettant l’alignement à gauche, au centre et à droite, mais pas justifié, offrant un moindre choix de tailles des caractères, moins de style, etc.

Dans la mesure où nous ne nous préoccupons pas pour l’instant de mise en forme, quiconque sait tapoter sur un traitement de texte saura à plus forte raison utiliser un éditeur HTML wysiwyg.

Les autres éditeurs HTML permettent de travailler directement sur le code. Ils disposent en principe des mêmes menus que les premiers, mais ils affichent le code sur l’écran, plutôt que ses effets. Pourquoi se casser la tête avec le code, se demandera-t-on, si l’on peut laisser l’application s’en charger ? Justement, parce qu’on ne peut pas, si l’on est un tant soit peu soucieux de la typographie française, ou seulement d’une présentation élégante et lisible.



Comment on écrit du texte en HTML

Il y a trois façon de procéder possible :

1. La plus évidente consiste à écrire directement sur un éditeur HTML. Il est préférable alors qu’il soit wysiwyg. Ce n’est pas la plus adaptée pour un texte qui, généralement, est déjà écrit et saisi par ailleurs.

2. On peut aussi coller ou importer le texte à partir de son traitement de texte. C’est la méthode la plus périlleuse. La conversion des caractères spéciaux, ne serait-ce que des accents, risque d’être catastrophique.

Il est très important de vérifier alors comment l’éditeur que l’on utilise s’acquitte de cette tâche. Il est recommandé de ne pas le vérifier seulement à partir d’un seul navigateur ni d’un seul système.

3. On peut enfin convertir son texte en HTML à partir de son traitement de texte. Pour cela, il suffit d’ouvrir le menu « Enregistrer sous » ou « Exporter » et de choisir le format « html ». Il est alors recommandé de choisir un nom pour son fichier qui ne comporte ni espace, ni majuscule, ni caractère spéciaux, accentués ou autre, et de lui rajouter le suffixe ‘.html’ (Ne pas oublier le point.)

Exemple : "mapage.html", ou "ma.page.html", ou "ma_page.html"

Les traitements de texte ont des façons très diverses de convertir en HTML. C’est encore un critère important pour choisir son traitement de texte. Word fait un code très lourd, et peu compatible avec les anciens navigateurs. AppleWorks en fait un bien meilleur, très facile à modifier après coup.

En général, le menu « préférences » permet de paramétrer plus ou moins précisément la conversion. Certains traitements de texte ont même des modules qui permettent de les utiliser comme des éditeurs wysiwyg : Nisus, CorelWordPerfect, Zwrite, Jedit.



À quoi ressemble le code d’une page HTML basique

Une page HTML se divise en deux parties. Le « head » et le « body ». La première contient des indications qui ne concernent que le navigateur ; la seconde, le contenu de la page qu’il affichera.

Voici un exemple basique de page HTML :

Il est temps de passer ici à la pratique. Voici un petit exercice instructif :

1. Ouvrir un éditeur de texte. (Tous les systèmes en ont un.) Saisir, ou mieux copier et coller les lignes ci-dessus.

Enregistrer la page sous le nom « exemple1.html ».

Puis l’ouvrir dans un navigateur.

2. Ouvrir son traitement de texte et saisir ou copier et coller la phrase :

"Voici un exemple basique de page HTML."

Puis l’enregistrer ou l’exporter au format HTML sous le titre « exemple2.html ».

Enfin, l’ouvrir dans une nouvelle fenêtre du même navigateur. Comparer.

Le plus simple ici est d’afficher les deux pages simultanément en déplaçant et redimensionnant les fenêtres de manière à ce qu’elles soient côte à côte.

Afficher le code source des deux pages (généralement dans le menu « Édition »), et comparer les deux codes.

Cela donne une idée de la façon dont son traitement de texte gère le HTML.



Les balises HTML

Comme mon exemple le montre, tout dans une page HTML est inscrit entre deux balises, l’une ouvrante, l’autre fermante, à commencer par la page elle-même, toute entière inscrite entre <html> et </html>. (ne tenons pas compte pour l’instant de

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">.)

Une balise ouvrante s’écrit donc ainsi : <…>, et une balise fermante ainsi : </…>.

Entre le jeu de balises <head> et </head> s’écrit ce qui intéresse le navigateur ; entre <body> et </body> ce qui s’affiche dans sa fenêtre.

Entre <title> et </title> on trouve le titre de la page, qui doit s’afficher au-dessus de la barre de navigation. Entre <p> et </p> s’inscrit un paragraphe.

Notons que la case (minuscule ou majuscule) est indifférente pour le code HTML.


Les variables des balises

Le texte au milieu des chevrons est le sélecteur, c’est à dire de quoi il est question. « p », par exemple, signifie paragraphe. Le jeu de balises ouvrante et fermante indique donc un début et une fin de paragraphe.

La balise peut aussi contenir des attributs et des variables.

Les balises <p></p> aligneront par défaut le paragraphe à gauche. Si l’on ajoute : <p align="center"> à la balise ouvrante, elle l’alignera au centre. La balise fermante </p>, elle, ne change pas.

Si l’on avait écrit « right » au lieu de « center », il l’aurait affiché à droite.

Cela, tout logiciel sait le faire sans qu'on ait à se soucier du code contenu dans les balises, mais aucun logiciel wysiwyg ne sait justifier du texte HTML. Si nous écrivons « justify » à la place de « right », le paragraphe sera justifié dans presque tous les navigateurs. (Icab ignore la justification, et Opéra justifie mal).

Voilà déjà une chose qu’il m’est impossible de faire sans manipuler du code. Un texte justifié nous rapproche déjà des conventions du texte imprimé, comme nous pouvons le composer avec un traitement de texte.

HTML et caractères spéciaux

N’oublions pas que le principal intérêt du HTML est de gérer les caractères spéciaux indépendamment de la façon dont ils sont codés dans les différents systèmes.

L’exemple que j’ai choisi n’en contenait pas. Si nous avions écrit à la place :

« L’œuvre de Laetitia a été écrite à la main » dit-elle.

Le résultat eût été moins satisfaisant. Le même exercice que précédemment peut être répété avec cette phrase.

On peut alors comparer comment le traitement de texte convertit les « œ », « æ », « é », « à », les espaces insécables et les guillemets à la française. Si l’on n’est pas satisfait de la façon dont son traitement de texte convertit ces caractères, il existe de nombreuses petites applications qui ne font que ça et le font bien. On doit cependant y regarder de près. Les guillemets à la française, notamment, sont souvent rendus par des doubles chevrons assez peu élégants.