Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

18. Perfectionner le Texte

Vous pouvez non seulement colorier le fond d'écran mais aussi changer la couleur, la TAILLE et même la police de caractères de parties spécifiques de texte ! Combien êtes-vous prêt à payer ?

ATTENDEZ ! Vous pouvez également écrire les indices et les exposants de choses très marrantes comme la chimie ou les maths :

CO₂ + SO₄^-2
3x² - 2y^-1/2 = 4z

Objectifs

Après cette leçon, vous pourrez :

• Changer la taille de portions spécifiques de texte dans une page web
• Changer la couleur de parties de texte dans une page web
• Créer du texte en exposant et en indice dans une page web
• Spécifier une fonte précise dans des sections d'une page web

Leçon

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.

Avec le HTML présenté par Netscape et le HTML 3.2, il existe d'autres options pour mettre en page votre texte. Vous pouvez par exemple créer différentes tailles et différentes couleurs de texte. Utilisé avec intelligence, le formatage de texte peut améliorer la présentation d'une page web. Utilisé sans distinction, cela peut créer des pages web plus qu'illisibles.

Vous pouvez également créer du texte en exposant ou en indice utilisé dans les expressions mathématiques, les formules chimiques ou les notes de bas de page.

Dans cette leçon, nous allons vous apprendre ces fonctionnalités que vous appliquerez pour modifier vos pages Web Volcan. Vous pouvez tout d'abord essayer de vous référer à la page de test des polices pour déterminer si votre navigateur web supporte les balises utilisées dans cette leçon.

Taille de Police

Le tag <font>..</font> présenté par Netscape peut être utilisé pour définir la taille de la fonte de 1 (plus petite) à 7 (plus grande), une taille de 3 étant la taille normale du texte :

Taille de Police = 1 Taille de Police = 2 Taille de Police = 3 -- texte de taille normale Taille de Police = 4 Taille de Police = 5 Taille de Police = 6 Taille de Police = 7

Souvenez-vous que la taille réelle du texte dépend des polices système que l'utilisateur a sélectionné pour son navigateur web -- vous ajustez la taille par rapport à la police par défaut choisie.

Le format du tag de taille de fonte est :

    <font size=N>bla bla bla</font>

où N=1 à 7. La balise peut être utilisée en conjonction avec d'autres tags de style (leçon 5) ou à l'intérieur des entêtes (leçon 3).

L'autre méthode pour utiliser le tag font est de préciser une modification relative de la taille :

    <font size=+1>bla bla bla</font>
    <font size=-2>bla bla bla</font>

où les valeurs +N ou -N sont des itérations par rapport à la taille de police en cours. Ceci est utilisé avec une autre balise :

    <basefont size=5>

qui change la taille de base de police de la valeur par défaut 3 en une autre valeur. Vous utiliseriez cela dans une page web ayant du texte d'une taille plus grande ou plus petite que la taille standard. De cette manière, si vous devez ajuster des petites parties de texte dans la page, vous pouvez utiliser les tags de taille de fonte relative décrits ci-dessus.

L'intérêt d'utiliser des tags de taille relative (e.g. size=+2) par rapport à des tags de taille absolue (e.g. size=5) réside dans le fait qu'on peut facilement modifier la taille de TOUT le texte de la page en changeant la valeur de la balise <basefont>.

Note : Le tag <basefont> n'a pas de tag de fin -- il s'applique jusqu'à la rencontre d'un autre tag <basefont>.

Si un navigateur web ne supporte pas les balises <font>, vous pouvez essayer les tags de HTML 3.0 :

  <BIG>...</BIG> (grand)
  <SMALL>...</SMALL> (petit)

qui vous donnent moins de possibilités mais qui peuvent quand même être utiles pour ces navigateurs.

Voici le tag BIG Ceci est la taille normale Voici le tag SMALL

Nous allons d'abord utiliser le tag <font size=X> pour modifier le titre de notre page d'accueil :

1. Ouvrez le fichier index.html dans votre éditeur de texte
2. Précédemment, nous avions utilisé le tag d'entête <h1>..</h1> pour formater le titre de notre page. Nous allons maintenant utiliser les tags de taille de police pour créer une titre avec des tailles mélangées.


Changez la ligne :

  <h1>Web Volcan</h1>

en :

  <p>
  <B><font size=+4>W</font><font size=+3>EB VOLCAN</font></B>

Regardez attentivement ce que nous avons fait -- le premier W est maintenant plus grand de 4 tailles par rapport à la taille de base, et les autres lettres (maintenant en majuscules) sont agrandies de 3 unités par rapport à la taille de base. Ceci nous permet d'écrire en style PETITES CAPITALES. Remarquez également que nous avons ajouté une balise <b>...</b> pour mettre le titre en gras. Et enfin, du fait que nous n'utilisons plus le tag d'entête qui fournit un retour à la ligne par défaut, nous devons ajouter un tag <p> au-dessus du titre pour forcer le passage à la ligne (nous n'en avons pas besoin après car le HTML suivant est un <BLOCKQUOTE> qui intègre son propre retour à la ligne -- voir la leçon 13).
3. Ensuite, nous voudrions mettre un peu plus en avant la citation de Pline, nous allons donc augmenter la taille de la police d'une unité :

     <B><I><font size=+1>"La Nature se dÈchaine sauvagement, 
     menaÁant la Terre"</font></I></B><br>

4. Sauvegardez et Ouvrez dans votre navigateur web

Avant de continuer, nous allons utiliser les tags de taille de police pour modifier deux autres pages web de notre espace de travail : la page des Endroits Volcaniques aux USA (fichier usa.html) et le Projet de Recherche (fichier proj.html). Les deux utilisent des tags <h2>...</h2> pour les titres principaux et des tags <h3>...</h3> pour les titres de sous-sections. Allez dans votre éditeur de texte et changez chaque occurrence de tag :

  <h3>bla bla bla</h3>

par :

  <p>
  <font size=+1><B>bla bla bla</B></font><br>

Notez que le tag <p> force à sauter une ligne avant le texte et que le tag <br> force un passage à la ligne (pas de saut de ligne) pour le texte subséquent.

Voyez-vous la différence entre les tags <font> et les tags <hN> pour les titres de section ? Les différences de mise en page sont subtiles, mais cela vous permet, auteur HTML, des alternatives pour la conception de vos pages web. Rappelez-vous simplement que, si le navigateur d'un de vos lecteurs ne supporte pas les tags de taille de police, il verra TOUT le texte à la taille standard.

Deux Méthodes pour Créer des Titres
<h3>...</h3>	<p><b><font size=+1> ...</font></b><br>
...avant l'innovation capitale suivante qui secoua le monde du lait caillé. Histoire du Fromage Longhorn Le Fromage Longhorn fut découvert par Alister Longhorn en 1754 quand il...	...avant l'innovation capitale suivante qui secoua le monde du lait caillé. Histoire du Fromage Longhorn Le fromage Longhorn fut découvert par Alister Longhorn en 1754 quand il...

Couleur de Police

Dans la leçon 16, nous avons présenté les balises pour colorier le texte d'une page web entière ainsi que le bon format pour la représentation des valeurs de couleurs en HTML. Vous pouvez aussi ajouter un attribut au tag <font> pour colorier une portion de texte en utilisant les codes hexadécimaux ou les 16 couleurs désignées par leurs noms :

Nous n'allons pas devenir fous avec les tags de couleur mais, pour un exemple, nous allons changer la couleur du texte WEB VOLCAN sur lequel nous avons travaillé précédemment dans la page d'accueil. Si vous vous souvenez, nous avons défini une couleur de texte jaune pour cette page et nous allons changer cette couleur juste pour le titre :

1. Ouvrez le fichier index.html dans votre éditeur de texte.
2. Editez la ligne contenant le texte WEB VOLCAN pour afficher :

  <B><font size=+4 color=#FF66FF>W</font>
  <font size=+3 color=#DD0055>EB VOLCAN</font></B>

3. Sauvegardez et Rechargez dans votre navigateur web

NOTE : Les attributs de taille et couleur peuvent être présents simultanément dans une balise <font>. Ici, l'effet rendra le "W" en violet et dans une taille supérieure d'une unité par rapport aux autres lettres.

Exposants et Indices

Avant le HTML 3.0, vous n'aviez pas de chance si vous vouliez écrire des expressions mathématiques, des formules chimiques ou d'autres expressions avec des exposants et/ou des indices. Ces nouveaux tags élèvent/abaissent le texte choisi d'une demi-ligne et réduisent sa taille d'une unité.

Le format HTML de ces balises est :

Nous allons maintenant utiliser ces tags pour notre page Introduction :

1. Ouvrez le fichier intro.html dans votre éditeur de texte.
2. Tout d'abord, nous allons utiliser les indices pour écrire des formules chimiques. Après la dernière phrase du paragraphe 2 ("Comparez l'histoire des Ítres humains...'), ajoutez cette phrase utilisant des indices :

    Les Volcans furent d'importants contributeurs à 
     l'atmosphère primitive de la Terre en dégageant des 
     gaz comme l'Azote (N<sub>2</sub>), 
     le Gaz Carbonique (CO<sub>2</sub>) et 
     l'Ammoniaque (NH<sub>4</sub>).

3. Maintenant, nous allons utiliser les exposants pour écrire un volume cubique. Sous le tableau que nous avons créé avec les tags <pre>...</pre>, ajoutez cette phrase :

     Notez que les éruptions volcaniques 
     préhistoriques étaient sans commune mesure 
     (plus de 1000 km<sup>3</sup> 
     en volume) avec celles observées par les 
     humains.

4. Si vous avez remarqué la troisième colonne de notre tableau, la première fois que nous l'avons écrite, nous avions dû utiliser "km^3" pour indiquer "km³". Bien que ce texte soit à l'intérieur d'un tag preformat, nous pouvons quand même utiliser la balise d'exposant. Pour cela, changez :

     Volume en km^3

   en

     Volume en km<sup>3</sup>

Type de Police

Les standards du HTML 3.2 avaient inclus le tag <font> pour spécifier une police particulière pour l'affichage du texte. Cela peut ne pas marcher dans certains navigateurs web ; vous voudrez peut-être tout d'abord essayer le test de police.

Le code HTML pour spécifier une police de caractères est :

   <font FACE="font1,font2">texte

Si le navigateur web d'un lecteur supporte l'attribut font FACE et qu'une des fontes précisées est installée sur son ordinateur, le texte sera affiché avec la police spécifiée. Autrement, le navigateur utilisera la même fonte que pour le reste de la page web.

Si vous choisissez d'utiliser une police particulière, sélectionnez une fonte standard ou assurez-vous que les ordinateurs concernés ont des fontes "exotiques" installées.

Nous allons maintenant modifier le tag <font> de notre page de titre afin que les mots "Web Volcan" apparaissent dans une police différente :

1. Ouvrez le fichier index.html dans votre éditeur de texte.
2. Editez la ligne contenant le texte WEB VOLCAN pour afficher :

     <B><font face="Arial,Helvetica" size=+4 color=#FF66FF>W</font>
     <font face="Arial,Helvetica" size=+3 color=#DD0055>EB VOLCAN</font></B>

3. Sauvegardez et Rechargez dans votre navigateur web

NOTE : Nous avons précisé au navigateur de choisir une police Arial pour Windows et Helvetica pour Macintosh et/ou les ordinateurs n'ayant pas installé la police Arial.

Utilisez ce HTML avec discernement ! Il y a l'art d'user sans abuser des styles de police !

Vérifiez Votre Travail

Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.

Révision

1. Comment changer la taille et la couleur d'une portion de texte dans une page web ?
2. Quel code HTML pouvez-vous utiliser si votre navigateur ne supporte pas les tags <font>...</font> ?
3. Comment créer des indices en HTML ?
4. Comment créer un bloc de texte à afficher avec une police particulière ?

Informations Supplémentaires

Voici deux autres styles disponibles en HTML 3.2 qui marcheront peut-être avec votre navigateur web.

<u>Ce texte est Souligné...</u>

<strike>Ce texte est Biffé...</strike>

Et enfin, voici une subtilité à propos de la couleur de texte qui pourra vous être utile un jour. Dans la leçon 16, nous avons appris comment utiliser le tag <body> pour colorier l'arrière-plan, le texte et les couleurs de liens. Si nous devions colorier un bloc de texte avec la balise <font>, ca n'affecterait que le texte de la partie body mais pas les liens hypertexte -- ceux-ci gardent leurs couleurs, soit le bleu par défaut ou ce qui est décrit dans le tag <body>.

<font color=red>
Ce fut longtemps après la triste mort de
<A HREF="http://www.longhorn.org/sir/">
Sir Longhorn</A> 
que quelqu'un fut capable de recréer 
sa formule.

<font color=red>
Ce fut longtemps aprËs la triste mort de
<A HREF="http://www.longhorn.org/sir/">
<font color=#228800>Sir Longhorn</font></A> 
que quelqu'un fut capable de recrÈer 
sa formule.

Travail Indépendant

Essayez d'expérimenter les tags <font>...</font> dans vos propres pages web. Voyez comment ils peuvent également fonctionner à l'intérieur des tags <hN>...</hN>. Essayez d'utiliser des fontes différentes, même les plus insolites !

Cherchez les endroits où vous pourriez utiliser les exposants ou les indices. Un exemple peut être utilisé pour les notes de bas de page -- vous pouvez les numéroter ou leur affecter un caractère ; ensuite, chaque marque de note peut se comporter comme un lien hypertexte vers une note de bas de page (ou pointer vers une page séparée pour des notes de fin de document) :

... et après l'étude de Linberger et Gordon de 1963 12 sur les effets de la température sur la maturation du fromage, Gange et Walters (1964)13, ainsi que Colby (1969)14, arrivèrent à la même conclusion.     bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 12.Les expériences de Linberger et Gordon furent controversées à cause de leur technique radicale de contrôle de la température. 13.Gange et Walters ne sont pas réellement arrivés à la même conclusion tant que leurs résultats n'avaient pas été vérifiés par J.D. Smith. Pour plus d'information, consultez l'Abrégé du Fromage 1964, pp.234-239 14.Colby n'obtint jamais la reconnaissance méritée pour ses travaux de pionnière dans le domaine du fromage, et mourut ruinée.

A Suivre....

des Règles Enormes ? des Règles Solides ? des Règles Pratiques ? Options supplémentaires pour <hr>

ALLER A.... | Index des Leçons | précédent : "Ne Clignotez pas, Ne Défilez pas" | suivant : "Simples Règles Horizontales" |

Ecrire le HTML : Leçon 18 : Perfectionner le Texte
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut18.html