Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Texte pré-formaté avec la balise <pre>

Texte pré-formaté avec la balise <pre>

Introduction à la balise <pre> (texte pré-formaté)

La balise <pre> permet de restituer le texte dans le code source de la même manière qu'il a été tapé : les espaces multiples, tabulations et sauts de ligne avec la touche Entrée seront préservés. Avec les autres balises comme paragraphe, citation, listes, en-têtes :

  • Seule une espace qui est reconnu, pour ajouter d'autres espaces (2ème, 3ème etc.) vous devez utiliser l'entité html (&nbsp;).

    Sous Dreamweaver appuyez simultanément sur "CTRL + Shift + espace" (dans le panneau code ou création ça revient au même) pour insérer  l'entité html (&nbsp;).

    Sous FrontPage : En mode création la touche espace permet d'insérer une espace, mais après le premier espace saisi FrontPage commence à insérer l'entité html (&nbsp;). En mode code il insère toujours une espace.

  • Le retour à la ligne doit être exprimé par la balise <br /> (break). Les retours à la ligne dans le code xhtml ne sont pas reconnus.
  • La touche tabulation n'a pas d'effet dans le code xhtml, il faut introduire une série d'entité html (&nbsp;).

La balise <pre> et une balise de type bloc (block), donc elle ne doit pas être imbriquée dans un élément de type en-ligne (inline) remplacé ou non remplacé. Le tag <pre> permet d'insérer un texte pré-formaté (text preformatted) représenté par une police non proportionnelle (police courrier).

L'élément <pre> interprète parfaitement les balises xhtml, ce qui permettra d'insérer d'autres éléments dans la balise <pre> (liens, éléments de formulaire etc.).

Les balises qui peuvent englober l'élément <pre> : blockquote, body, button, dd, del, div, fieldset, form, ins, li, map, noscript, object, td et th.
L'élément <pre> peut contenir les éléments en-ligne (inline) remplacés et non remplacés suivants : a, abbr, acronym, b, bdo, br, button, cite, code, dfn, em, i, input, kbd, label, map, q, samp, script, select, span, strong, textarea, tt, var.

Autrement dit la balise <pre> peut contenir du texte (PCDATA) et tous les autres éléments à part les éléments bloc et les balises de type en-ligne suivantes : img, object, big, small, sub et sup. Voici un commentaire extrait du DTD strict à propos de la balise <pre> :

<!-- content is %Inline; excluding "img|object|big|small|sub|sup" -->

(Consultez : éléments enfants interdits à PRE en xhtml 1.0)

Le saut de ligne inséré immédiatement après la balise d'ouverture ou avant celle de fermeture n'est pas reconnu, par conséquent les quatre notations suivantes sont sensées apporter le même effet :

  • <pre>bla bla</pre> ;
  • <pre>bla bla
    <pre> ;
  • <pre>
    bla bla</pre> ;
  • <pre>
    bla bla
    <pre>.

L'utilisation de la balise <pre> (texte pré-formaté)

La balise <pre> peut être utilisée dans le cas où vous aurez besoin de plusieurs espaces et sauts de ligne. Grâce à la balise <pre> on pourra éviter de retaper l'entité html (&nbsp;) et la balise <br />, par exemple pour taper un langage informatique (xhtml, java, PHP) bien indenté et bien aligné, ou pour éviter la mise en page par les tableaux et le positionnement par les css avec les propriétés 'position', 'top', 'left', 'bottom' et 'right', si cela exige un effort supplémentaire.

Exemple d'un code css bien indenté avec la balise <pre>

Code xhtml de la balise <pre>

<pre>
.important {          /* pour les remarques importantes */
  font-weight: bold;
  color: #FF0000;
  text-decoration: underline;
}
.centrer   {          /* pour centrer le texte du paragraphe */
  text-align: center;
}
</pre>

Rendu visuel du texte pré-formaté

.important {          /* pour les remarques importantes */
	font-weight: bold; 
	color: #FF0000;
	text-decoration: underline;
}
.centrer   {          /* pour centrer le texte du paragraphe */
    text-align: center;
}

Autres exemples avec la balise <pre>

Une liste sans les balises ul, ol et li

* élément 1
        - sous-élément 1
        - sous-élément 2
* élément 2
        A - sous-élément 1
        B - sous-élément 2

Un gentil dessin-animé


  ooooooo 
  |||||||     ______________
  _______    /              \
 |       |  |                | 
 | -   - |  |      Cool      | 
 | 0   0 |  |________________| 
  |  ^  |         0  
  |  _  |        0
   ||_||  0000000
    ---
    | |

Un tableau sans les balises table, tr et td ;-)

 
 ______________________________________________________________
|                    |                     |                   |
|       pre          |         p           |        br         |
|____________________|_____________________|___________________|
|                    |                     |                   |
| Texte pré-formaté  |      Paragraphe     | Retour à la ligne |
|____________________|_____________________|___________________|

Je vous laisse l'occasion de remuer vos méninges pre-texte-préformaté

Chapitre suivant : Insérer une citation en XHTML (balises : blockquote, cite et q).

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau