Maîtriser le texte préformaté HTML

Introduction

En HTML, la balise <pre> est utilisée pour afficher du texte préformaté. Il est exactement présent sur la page web tel qu'il est présent dans un fichier HTML. Les espaces blancs utilisés à l'intérieur de cette balise sont affichés tels qu'ils sont écrits. Le texte écrit entre les balises <pre> est affiché dans une police de caractères à largeur fixe. Il est recommandé d'utiliser la balise <pre> en cas de formatage inhabituel ou si vous voulez écrire un morceau de code informatique.

Dans ce laboratoire, vous allez apprendre à utiliser la balise <pre> pour afficher du texte préformaté dans une page web.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70817{{"Texte préformaté HTML"}} html/head_elems -.-> lab-70817{{"Texte préformaté HTML"}} html/text_head -.-> lab-70817{{"Texte préformaté HTML"}} html/text_dir -.-> lab-70817{{"Texte préformaté HTML"}} html/doc_flow -.-> lab-70817{{"Texte préformaté HTML"}} html/inter_elems -.-> lab-70817{{"Texte préformaté HTML"}} html/custom_attr -.-> lab-70817{{"Texte préformaté HTML"}} end

Création du fichier HTML

Créez un fichier index.html dans un éditeur de texte de votre choix et ajoutez le code HTML de base suivant.

<!doctype html>
<html>
  <head>
    <title>Utilisation de la balise HTML Pre</title>
  </head>
  <body>
    <h1>Utilisation de la balise HTML Pre</h1>
  </body>
</html>

Ajout de contenu à la page web

Ajoutez le code suivant entre les balises <body> pour créer un bloc de texte préformaté à l'aide de la balise <pre>.

<pre>
Ce texte
sera
affiché
dans une
police de caractères à largeur fixe
</pre>

Utilisation de l'attribut cols

Ajoutez le code suivant entre les balises <pre> pour définir le nombre préféré de caractères qu'une ligne devrait avoir dans le bloc de texte préformaté à l'aide de l'attribut cols.

<pre cols="20">
Ce texte sera
affiché dans une
police de caractères à largeur fixe
</pre>

Utilisation de l'attribut width

Ajoutez le code suivant entre les balises <pre> pour définir le nombre préféré de caractères qu'une ligne devrait avoir dans le bloc de texte préformaté à l'aide de l'attribut width.

<pre width="20">
Ce texte sera
affiché dans une
police de caractères à largeur fixe
</pre>

Utilisation de l'attribut wrap

Ajoutez le code suivant entre les balises <pre> pour indiquer que le texte devrait passer à la ligne suivante à l'aide de l'attribut wrap.

<pre wrap="hard">
Ce texte passera à la ligne suivante dans le
bloc de texte préformaté
</pre>

Ajout de code informatique à la page web

Ajoutez le code suivant entre les balises <pre> pour afficher un fragment de code informatique dans le bloc de texte préformaté.

<pre>
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Utilisation de la balise HTML Pre&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Utilisation de la balise HTML Pre&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>

Mise en forme du bloc de texte préformaté

Ajoutez le code CSS suivant entre les balises <head> pour styler le bloc de texte préformaté.

<style>
  pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0;
    border: 1px solid black;
    padding: 10px;
  }
</style>

Enregistrez les modifications apportées au fichier index.html et ouvrez-le dans un navigateur web pour prévisualiser les résultats.

Sommaire

Félicitations, vous avez réussi à compléter le laboratoire et avez appris à utiliser la balise <pre> pour afficher du texte préformaté dans une page web. Vous avez appris à définir le nombre préféré de caractères qu'une ligne devrait avoir dans le bloc de texte préformaté à l'aide des attributs cols et width, et à indiquer que le texte devrait passer à la ligne suivante à l'aide de l'attribut wrap. Vous avez également appris à ajouter un fragment de code informatique au bloc de texte préformaté, et à styler le bloc de texte préformaté à l'aide de CSS.