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

9. Texte Préformaté

Comment

      afficher  
          du texte 
       où        les espaces, 		les TABULATIONS   et   les caractères
                  Retour Chariot     comptent?

Objectifs

Après cette leçon, vous pourrez :

• Créer une table avec du texte aligné
• Contrôler le placement du texte dans une page où les tabulations et les espaces sont importants.

Leçon

Note : Si vous n'avez pas le document de la leçon précédente, téléchargez une copie maintenant.

Dans les leçons précédentes, nous avons appris qu'un navigateur web ignorait les caractères espaces, tabulations et retours chariot supplémentaires dans vos fichiers HTML. Pourtant, il peut parfois s'avérer important de conserver une mise en page particulière. Dans cette leçon, l'exercice consistera à insérer une table de texte avec des colonnes alignées.

Le tag preformat indique au navigateur web d'afficher le texte exactement de la manière dont il est tapé dans le document HTML, en conservant les espaces, les tabulations et les retours chariot. Un navigateur affiche généralement un tel texte en type

signifiant une fonte dans laquelle chaque caractère a la même largeur. Voici un exemple de ce que le tag preformat fait :

<pre> Nous avons indenté ce texte avec 5 caractères espace. Et utilisé le retour chariot pour aller à la ligne. Ici, nous utilisons des espaces pour créer une table de texte. </pre>

Sans les tags <pre> et </pre>, le même HTML produit :

Nous avons indenté ce texte avec 5 caractères espace. Et utilisé le retour chariot pour aller à la ligne. Ici, nous utilisons des espaces pour créer une table de texte.

Avec le tag preformat, votre travail sera facilité si votre éditeur de texte peut afficher les fontes monospace (comme "Courier" ou "Monaco") ; sinon, vous aurez à compter les espaces quand vous alignerez le texte en colonnes (et vous marmonnerez de vilains mots dans votre barbe).

Pour notre leçon Volcan, nous voulons ajouter une table sous la section Introduction, listant plusieurs volcans célèbres, pendant leurs éruptions, et le volume de matière éjectée. Pour cela :

1. Ouvrez le second fichier HTML, index.html dans votre éditeur de texte.
2. Sous la dernière partie de la section Introduction, placez un titre de niveau 4 (<h4>) avec le texte Volumes de Quelques Eruptions Volcaniques Célèbres (si vous ne vous souvenez pas comment créer les titres, consultez la leçon 3).
3. Sous ce titre, tapez le texte suivant exactement de la manière dont il apparaît ici (c'est le moment ou jamais de couper et coller depuis cette page web !) :

   
   <pre>
     Eruption                       Date           Volume en km^3
     --------                       ----           --------------
     Paricutin, Mexique             1943                 1.3
     Vésuve, Italie                79 A.D.                3
     Mont St. Helens, Washington    1980                  4
     Krakatoa, Indonésie            1883                 18
     Long Valley, Californie    préhistorique         500 - 600
     Yellowstone, Wyoming       préhistorique           2400
   </pre>
   

   Dans cet exemple, nous utilisons des caractères espace pour justifier la première colonne de gauche et centrer les 2 autres colonnes. les tirets servent à souligner les titres de colonnes.

4. Sauvegardez et Rechargez dans votre navigateur web.

Vérifiez Votre Travail

Comparez votre page web avec un exemple du document-type. Si votre page web est différente de l'exemple, vérifiez le texte que vous avez tapé dans l'éditeur de texte. Si les colonnes ne sont pas alignées, vous avez sûrement trop ou pas assez de caractères espace.

Révision

Revoyons les grandes lignes de cette leçon :

1. Comment le tag preformat change-t-il la manière dont un navigateur web interprète le HTML ?
2. Dans quelles autres situations pourriez-vous utiliser ce tag ?

Informations Supplémentaires

Vous pouvez bien entendu utiliser les autres tags HTML à l'intérieur du texte entre les tags preformat. Par exemple, nous pouvons ajouter un lien hypertexte et quelques tags de style dans les tags <pre>...</pre> :

HTML	Résultat
<pre> Ce didacticiel est déposé 1995, 1996 <B>N'oubliez pas d'en parler à tous vos amis !</B> <i>Nous Attendons Vos Remarques</i> Avec impatience, <A HREF= "http://www.mcli.dist.maricopa.edu/"> mcli</A> </pre>	Ce didacticiel est déposé 1995, 1996 N'oubliez pas d'en parler à tous vos amis ! Nous Attendons Vos Remarques Avec impatience, mcli
Notez bien que les tags HTML ne comptent pas comme des espaces ; ils sont ignorés à l'intérieur de la région préformat. Certains développeurs utilisent les tags <pre>...</pre> avec des retours chariot à l'intérieur pour ajouter des blancs entre du texte ou des images dans leurs pages web -- particulièrement si ils veulent ajouter plus d'espace que prévu par le tag <p>. Par exemple :
HTML	Résultat
Le fromage était aboli depuis longtemps en Orient. <pre> </pre> ... avant que Sir Longhorn n'arrive avec la grande Croisade du Fromage de 1167.	Le fromage était aboli depuis longtemps en Orient. ... avant que Sir Longhorn n'arrive avec la grande Croisade du Fromage de 1167.

Travail Indépendant

Ajoutez une table ou un tableau à votre document HTML en utilisant le tag preformat.

A Suivre....

Utilisez des ensembles de caractères spéciaux pour donner de l' âccèñt à vos pages web.

ALLER A.... | Index des Leçons | précédent : "HyperGraphiques" | suivant : "Caractères Spéciaux" |

Ecrire le HTML : Leçon 9 : Texte Préformatté
©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/tut9.html