Cours

Accédez à nos cours concernant des domaines et thématiques différentes. Vous pouvez aussi contribuer en rédigeant des articles.

Consulter les cours

Écoles

Parcourez notre annuaire d’écoles, instituts et universités du monde. Si votre école n’est pas listée, vous pouvez l’ajouter très facilement.

Consulter les écoles

Tchat

Accédez à notre messagerie instantanée pour échanger avec d’autres membres inscrits et aussi les invités. Aucune inscription n’est obligatoire.

Accéder au tchat

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 :

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 :

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).

Aidez la Communauté des Étudiants !