Gestion du texte en HTML

Nous savons déjà qu'à l'époque des premiers sites chargés sur Internet, le texte était l'élément essentiel (voire, tout au début, le seul) de toutes les pages. Il n'est donc pas étonnant que les créateurs du HTML aient défini une balise dont l'unique objectif consiste à organiser et à gérer son affichage correct et, en plus, agréable.

La balise <FONT>

La balise <FONT> fait partie des premiers marqueurs qui ont été inventés, et on peut dire que, pendant de longues années, elle était un des éléments les plus importants du HTML. De nos jours, toutefois, sa réputation est devenue en quelque sorte "douteuse". C'est que l'envie de disposer d'une mise en page plus intéressante a commencé à faire disparaître l'ère du HTML "pur" pour laisser la place à un usage "mixed" du HTML et des CSS. Ainsi, certaines balises - surtout celles qui étaient responsables de la présentation du texte - ont été remplacées par des éléments de feuilles de style.
 
La balise <FONT> est un de ces marqueurs dont l'emploi est toujours toléré, mais "mal vu" par les membres du W3C. Ils conseillent d'y renoncer autant que possible en faveur des éléments issus de la technique des feuilles de style. Toutefois, un programmeur qui, pour une raison ou une autre, refuse (ou ne maîtrise pas) les CSS, dépend entièrement du HTML et, par conséquent, ne peut pas se passer de <FONT>.
 
Tant que nous travaillons en version Transitional, la génération actuelle des navigateurs - et, très probablement, aussi celles de l'avenir plus ou moins proche - l'accepte toujours à cent pour cent et gère correctement ses attributs et valeurs. Seule la version Strict du HTML refuse sa validation.

Une balise "faible"

Au début de sa formation HTML, le futur Webmaster a appris qu'il y a des balises "fortes" et "faibles". Nous savons que leur différence principale consiste dans leur "force" de prendre seules la responsabilité de l'affichage d'un élément - par exemple d'un texte ou d'une image - ou, alternativement, dans leur "faiblesse" qui les oblige de demander du "soutien" à un autre marqueur. Avec son partenaire finale, une balise forte forme un champ dans lequel elle n'accepte généralement pas la présence d'un autre marqueur fort. Quelques exceptions très rares à part, elle ne supporte pas non plus d'être encerclée par d'autres balises, peu importe leur "force" ou leur "faiblesse".
 
Par conséquent, un marqueur fort comme <P>, la série des <H...>, <BASEFONT>, <DIV> ou <TABLE> représente généralement le premier et - tant qu'il dispose d'un partenaire final - le dernier élément d'une suite logique de code, c'est-à-dire d'un titre, d'un paragraphe, d'un tableau etc.
 
Les marqueurs faibles, par contre, du genre <FONT>, <I>, <B> ou <SPAN> ne peuvent jamais être placés au début ou à la fin d'une série logique de code. Ils ont toujours besoin de se "réfugier" à l'intérieur d'un champ formé par un couple de balises fortes. Ainsi, notre balise <FONT> figure toujours après un élément fort du style <H1> ou <P>. Son partenaire final, par conséquent, trouve sa place avant celui de la balise forte. Nous l'employons alors suivant le principe

Bien à "l'abri" à l'intérieur d'un champ de balises fortes, les marqueurs faibles, par contre, ne se dérangent pas entre eux. Nous les pouvons donc toujours imbriquer, évidemment suivant la règle - familière à tout Webmaster débutant - selon laquelle le premier marqueur ouvert doit être fermé le dernier :

Nous l'avons compris - la balise <FONT> a toujours besoin de la présence de son partenaire final </FONT>. Toutefois, tant que le couple reste seul, il ne nous sert à rien. Pour influer sur la présentation d'un texte, nous avons également besoin de ses attributs et valeurs.

Les attributs et valeurs de la balise <FONT>

Nous l'avons déjà dit : les services les plus essentiels rendus par <FONT> basent sur ses capacités de modifier l'aspect d'un texte, c'est-à-dire de faire en sorte qu'il s'affiche dans la taille et la couleur prévue par le Webmaster. Il y a en plus quelques missions mineures que la balise sait remplir comme, par exemple, la gestion de la langue dans laquelle un texte est rédigé. Toutefois, ces capacités n'ont rien à voir avec la gestion des polices qui, rappelons-le, représente notre sujet actuel.
 
Mais avant de s'occuper des détails du genre taille ou couleur de texte, parlons de la tâche la plus importante de la balise <FONT> : l'appel de la police.

L'attribut face

En théorie, cet attribut est très facile à manier. Il suffit de lui ajouter le nom d'une police pour qu'elle soit affichée sur les écrans des internautes. Ainsi, théoriquement, nous pouvons rédiger un code du style

et notre texte sera présenté en "georgia".
 
Or, tu as remarqué que nous avons insisté sur le terme "théoriquement" : il est vrai qu'en théorie, nous sommes en mesure d'employer toutes les polices de notre choix - mais juste en théorie.
 
Les polices installées dans notre ordinateur représentent déjà le premier problème. Si la police appelée par notre code n'en fait pas partie, nous n'avons pas la possibilité de visualiser notre travail correctement. On pourrait peut-être dire qu'un Webmaster n'attache pas beaucoup d'importance à ce qui se passe sur son propre écran - que ce qui compte est la présentation de ses pages chez l'internaute...
 
Mais là, nos chances de tomber sur la "bonne" police diminuent encore plus. Nous ne pouvons pas partir du principe que tous les ordinateurs disposent des mêmes polices. Si, par conséquent, nous utilisons une police qui n'est installée que chez quelques internautes, nous courons le risque que, chez tous les autres, la mise en page de notre site n'a plus beaucoup en commun avec celle que nous avons prévue lors de sa création.
 
Que se passe-t-il si notre police n'est pas installée dans l'ordinateur de notre visiteur ? - La réponse est simple : le texte s'affiche dans une autre police, c'est-à-dire dans une police choisie par le navigateur censé afficher la page. Lorsque le navigateur constate que la police indiquée dans le code ne se trouve pas dans "son" ordinateur, il fouille dans le stock de celles qui sont à sa disposition. Finalement, il opte pour une police qui, selon lui, ressemble le plus à celle du code - ce qui, en réalité, n'est pas très fiable. Car comment un navigateur pourrait-il savoir, quel style se cachent derrière le nom d'une police qu'il n'a jamais "vue" ?
 
Bref, si nous avons la malchance d'avoir choisi une police qui n'est pas installée dans l'ordinateur du visiteur de notre site, nous courrons le risque que nos pages soient affichées "n'importe comment", sur la base d'une police "quelconque" qui, peut-être, est beaucoup trop grande ou trop petite, illisible ou dont le type contredit tout simplement au style de nos pages.
 
Si nos problèmes consistaient exclusivement dans la question, quel internaute installe quelle police, la vie d'un Webmaster serait facile. Mais l'internaute n'est pas seul à installer des polices dans sa machine. - Au contraire, beaucoup de surfers n'installent jamais des polices, mais se contentent de celles qui leur sont installées automatiquement. C'est que chaque système d'exploitation "apporte" ses propres polices, les navigateurs ajoutent les leurs et, finalement, on peut dire qu'il n'y a pas deux ordinateurs qui disposent des mêmes polices : Windows utilise d'autres polices que Mac, Netscape ou Mozilla ont d'autres préférences qu'Internet Explorer et des logiciels comme Photoshop ou Word n'hésitent pas non plus de nous offrir leurs propres polices. De cette manière, tous les ordinateurs disposent d'une foule de polices différentes, mais on ne peut jamais prévoir, desquelles.
 
Tout serait plus facile si, au moins, les différentes polices seraient compatibles entre elles. Mais la plupart de celles qui sont installées par Windows ne ressemblent pas - ou très peu - à celles de Mac. Si le Webmaster, las de tous ces problèmes, allait jusqu'à ignorer les utilisateurs de "l'autre" système d'exploitation, il aurait toujours à lutter contre les différences entre les versions : un ordinateur avec, par exemple, Windows 95 ou 98 dispose rarement des mêmes polices qu'une machine qui tourne sous Windows XP.
 
Un Webmaster expérimenté évite de se perdre dans ce chaos de polices. Pour avoir la garantie que ses pages s'affichent correctement sur tous les écrans, il renonce à toute expérience avec la diversité des polices et n'utilise que celles qui sont installées dans pratiquement tous les ordinateurs. Ces polices - c'est-à-dire les plus courantes qui existent - présentent encore un autre avantage : elles sont très facilement lisibles. Ensuite, pour remédier à "l'individualisme" des différents systèmes d'exploitation, le pro indique plusieurs polices en même temps, c'est-à-dire au moins une pour chaque système. De cette manière, tous les navigateurs disposent d'un certain choix de polices sans avoir besoin de "fouiller" à l'intérieur de leur machine.
 
Le nombre de ces polices courantes n'est pas très élevé - il n'y en a que trois qui sont installées partout : arial, times new roman et courier new pour les diverses versions de Windows et helvetica, times et courier pour Mac. Nous pouvons partir du principe que arial et helvetica, times new roman et times ainsi que courier new et courier sont relativement proches. Si, par conséquent, nous créons une page autour de la police arial pour Windows, il serait logique de choisir helvetica pour l'affichage sous Mac. Si, par contre, nous préférons times new roman pour Windows, nous devrions opter pour times sous Mac.
 
Ainsi, nous composons des "couples" de polices Windows-Mac qui se ressemblent le plus parfaitement possible, ce qui indique qu'elles sont issues de la même "famille". Nous verrons que toutes les polices appartiennent à des "familles génériques" dont les membres ont plus ou moins la même taille et le même style. Chaque famille contient au moins une police par système d'exploitation.
 
Revenons à notre attribut face qui présente un atout très important : il nous offre la possibilité de nommer plusieurs polices entre lesquelles les navigateurs peuvent choisir. Ainsi, nous indiquons toujours d'abord une police dont nous savons qu'elle est installée dans toutes les machines qui tournent sous Windows. Ensuite, nous continuons avec une police pour Mac.
 
Finalement, nous pensons aux amateurs de Linux et UNIX. Ici, la situation devient encore plus compliquée : il n'y a pas une seule police dont nous pouvons être sûrs qu'elle soit installée partout. Ainsi, nous nous contentons d'indiquer le nom de la famille à laquelle appartient le couple Windows-Mac que nous avons choisi.
 
En pratique, notre choix de polices est alors très restreint. Nous pouvons nous servir de la famille sans-serif, ce qui mène au code:

de la famille serif :

de la famille monospace :

ou, pour les "effets spéciaux", nous choisissons la famille fantasy :

De cette manière, notre première police est toujours réservée aux ordinateurs qui tournent sous Windows, la deuxième appartient aux Mac et la troisième, c'est-à-dire le nom de la famille, est destinée aux machines sous Linux et UNIX. Or, attention, nous avons le droit de choisir la famille que nous souhaitons utiliser, mais les règles du Webdesign interdisent strictement que nous mélangions les membres des différentes familles : une balise <FONT> ne contient jamais que les membres d'une seule famille à la fois.

L'attribut color

Après avoir fixé le type de police que nous souhaitons utiliser, nous indiquons sa couleur. Théoriquement, nous disposons d'un nombre presque illimité de couleurs parmi lesquelles nous pouvons choisir. - Mais, de nouveau, ce choix fantastique n'existe qu'en théorie.
 
Cette fois-ci, ce sont les navigateurs qui posent problème. Malheureusement, leurs créateurs ne se sont jamais mis d'accord sur l'affichage des couleurs : ainsi, chaque navigateur a ses propres préférences, et un "rouge pale" dans Internet Explorer ne correspond pas forcément au "rouge pale" de Mozilla ou Opera. Finalement, il n'y a que 216 couleurs que nous pouvons appeler "sûres", ce qui signifie qu'elles apparaissent sur tous les écrans. Cette liste de browser safe colors (couleurs sûres dans tous les navigateurs) a été établie par l'équipe de Netscape. Mais cela n'est qu'un détail historique. Car peu importe si un Webmaster fait partie des accros de Netscape Navigator, de Mozilla, d'Internet Explorer, d'Opera ou s'il préfère un des navigateurs plus "exotiques", il est toujours obligé de choisir parmi ces 216 couleurs browser safe - les seules, répétons-le, qui protègent les internautes contre un "chaos" de couleurs qui, avec un peu de malchance, peut être affreux et gâcher l'aspect agréable de nos pages.
 
L'attribut color nous laisse le choix entre l'indication du nom de la couleur (évidemment toujours en anglais) du genre "red", "green" ou "blue" et l'indication hexadécimale, comme "#ff0000", "#66ff00" ou "#0000ff". Un Webmaster expérimenté préfère généralement l'indication hexadécimale qui garantit l'affichage de la "bonne" nuance. Ainsi, nous rédigeons un code du style

Nous savons évidemment que nous n'avons pas besoin de doubler la police <FONT> au moment où nous lui ajoutons un deuxième (ou troisième) attribut. Une seule balise peut supporter plusieurs attributs, et peu importe le nombre des attributs, nous la fermons toujours avec un seul marqueur final.
 
Il est également superflu d'insister à ce qu'une couleur hexadécimale exige toujours la présence du caractère # comme, par exemple, dans "#ccffff".

L'attribut color et sa valeur par défaut

Comme beaucoup d'attributs du HTML, aussi color dispose d'une valeur par défaut. Cette valeur par défaut est imposée par le navigateur - il s'agit toujours de noir.
 
Mais nous avons aussi la possibilité de modifier la couleur par défaut d'une page HTML : il suffit de la définir dans la balise <BODY> ou, alternativement, dans la balise <BASEFONT>. Une telle définition a la priorité sur la valeur par défaut des navigateurs. Une page, par contre, qui ne dispose d'indication de couleur ni dans la balise <BODY> ni dans le marqueur <BASEFONT> est automatiquement soumise à la couleur par défaut définie par les navigateurs, donc noir.
 
Nous savons qu'en HTML, on ne rédige jamais les valeurs par défaut : si, par conséquent, la couleur que nous attribuons à un texte est identique à celle qui a été indiquée à l'intérieur de la balise <BODY> - ou du marqueur <BASEFONT> -, nous ne faisons pas la faute de la répéter.
 
Si, alternativement, nous n'avons défini de couleur par défaut ni en <BODY> ni en <BASEFONT>, mais notre texte doit s'afficher en noir, nous renonçons également à l'emploi de l'attribut color : dans ce cas, il serait devenu superflu.
 
Mais, attention, il est clair que cette indication ne compte que pour les codes en HTML. Celui qui se sert des CSS sait que les feuilles de style sont soumises aux lois de l'héritage qui imposent leurs propres valeurs par défaut. Ces valeurs "héritées" n'ont généralement rien en commun avec celles qui ont été définies par les créateurs des navigateurs.

L'attribut size

Il est clair qu'il ne suffit pas de définir le type d'une police et sa couleur - notre texte a également besoin de l'indication d'une taille.
 
L'attribut size dispose de sept tailles différentes : la plus grande reçoit la valeur "7", la plus petite la valeur "1". Si nous avons envie d'un texte plus grand ou si nous aimerions utiliser une valeur intermédiaire, il n'y a rien à faire - tant que nous nous servons exclusivement du HTML. Dans ce point, les programmeurs en CSS sont vraiment privilégiés : ils disposent de pratiquement toutes les tailles. En théorie, ils peuvent aller jusqu'à programmer des tailles plus grandes qu'un écran.
 
Nous rédigeons alors un code du style

Les tailles "relatives"

Ceux qui ont pris l'habitude douteuse de ne pas rédiger leur propre code mais de le "faire" rédiger par un éditeur HTML ont remarqué que certains logiciels se servent des valeurs "relatives". Cela signifie qu'au lieu d'utiliser, par exemple, la taille "5" en forme de <FONT size="5">, il génèrent un code du style <FONT size="+2">.
 
Ces logiciels se basent sur la taille par défaut "3" qu'ils considèrent toujours comme leur valeur de base "zéro". Si, par conséquent, ils veulent exprimer la taille "5", ils calculent que
"5" moins "3" (la taille par défaut) égale "+2"
Par conséquent, ils rédigent le code <FONT size="+2">
ou, s'ils ciblent la taille "2", ils constatent que
"2" moins "3" (la taille par défaut) égale "-1"
ce qui donne le résultat <FONT size="-1">
 
Or, cette manière d'exprimer la taille de police est assez mal vue. Un Webmaster qui, en tant que véritable pro, rédige son code sans l'aide d'un logiciel renonce à ce genre de détour qui, finalement, ne sert à rien sauf à prolonger le code : <FONT size="4"> est évidemment moins long que <FONT size="+1">. Un programmeur HTML sait que tout caractère superflu ralentit l'affichage de son document dans les navigateurs - pourquoi, par conséquent, introduire des caractères supplémentaires qui, finalement, ne servent à strictement rien ?

L'attribut size et sa valeur par défaut

Comme l'attribut color, aussi size dispose d'une valeur par défaut prédéfinie. On a constaté que la taille la plus courante est exprimée par <FONT size="3">. Ainsi, tant que nous souhaitons nous servir de cette taille, nous renonçons à l'emploi de l'attribut size.
 
Mais la définition d'une valeur par défaut pour la taille des polices n'a pas seulement l'avantage de nous épargner la rédaction de quelques codes. Elle nous sert aussi comme "conseiller". C'est que l'expérience nous a montré qu'un débutant a souvent la tendance d'employer une taille trop petite - il a envie que sa page soit bien remplie ou, parfois, il trouve qu'un texte se présente plus agréable en caractères petits. Or, n'oublions pas que, sur le Net, il y a beaucoup de gens qui n'ont pas notre vue excellente : n'auraient-ils pas le droit de pouvoir déchiffrer nos textes eux aussi ?
 
Un Webmaster a le devoir de tenir compte des problèmes des plus "faibles" parmi les internautes. Par conséquent, il n'a pas le "droit" d'utiliser une taille de police trop petite pour que tout le monde puisse la lire aisément. Mais quelle est la taille qui correspond le mieux à un maximum de gens ? Car si nous employons une taille trop petite, nous posons des problèmes aux internautes malvoyants. Mais si nous choisissons une taille trop grande, la qualité de notre mise en page en souffre.
 
La réponse est simple : la taille généralement considérée comme "idéale" est celle qui a été définie comme valeur par défaut, donc <FONT size="3">. Si nous appliquons cette valeur à un paragraphe de texte "moyen", nous pouvons partir du principe qu'elle cadre avec la plupart des mises en page et qu'elle paraît agréable à la plupart des internautes.

La taille d'un titre

Tant que nous avons parlé de la police ou de la couleur d'un texte, nous n'avons pas eu besoin de distinguer entre le texte d'un paragraphe et celui d'un titre. Au moment où nous indiquons une taille, par contre, nous ne pouvons pas nous servir des mêmes éléments.
 
Ainsi, l'attribut size ne peut être appliqué qu'aux textes d'un paragraphe. Un titre, nous le savons, n'est jamais géré par le marqueur <P> mais obligatoirement entouré par des balises de la série <H...>. Or, ces balises contiennent automatiquement la définition d'une taille. Ainsi, l'emploi de <FONT size=""> après <H...> serait illogique. Par conséquent, le W3C l'a tout simplement interdit.
 
Nous n'oublions donc jamais : en HTML, seule la taille d'un paragraphe est indiquée par <FONT size="">. Une balise de la série <H...>, par contre, n'est jamais suivie par <FONT size=""> - sauf dans un cas évidemment très rare où le style d'une mise en page sort de "l'ordinaire". Ce qui prouve que, comme si souvent, l'exception peut confirmer la règle...

Avec l'autorisation de webuniversum.net