Maîtriser la mise en forme du code HTML

Introduction

En développement web, nous avons parfois besoin d'afficher du contenu lié à la programmation ou à l'informatique sur nos pages web. Lorsque nous voulons montrer des termes spécifiques comme le nom de certaines fonctions ou n'importe quel nom de variable, nous pouvons utiliser la balise <code> pour les envelopper. Cette balise change la famille de polices pour le texte enveloppé en une police à espacement fixe telle que courier.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez 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.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Ajoutez la balise code

Tout d'abord, créez un fichier index.html sur votre système local et ouvrez-le à l'aide d'un éditeur de code de votre choix.

Ensuite, ajoutons la balise <code> à votre fichier HTML. La syntaxe de cette balise est simple. Elle possède une balise d'ouverture et une balise de fermeture entourant le texte que vous voulez afficher.

<body>
  <!-- Ajoutez la balise code -->
  <p>Voici un exemple d'utilisation de la balise <code>code</code> en HTML.</p>
</body>

Dans le bloc de code ci-dessus, nous avons entouré le terme code à l'intérieur de la balise <code>. Cela fait apparaître le texte entouré dans une police à espacement fixe.

Ajoutez la balise Pre pour afficher le code sur plusieurs lignes

Si vous avez besoin d'afficher du code de programmation sur plusieurs lignes, utilisez la balise <pre> avec la balise <code>. Voyons comment cela fonctionne en ajoutant le code suivant à votre fichier index.html.

<body>
  <!-- Utilisation de la balise <pre> avec la balise <code> -->
  <pre>
      <code>
         function multiply(a, b) {
            return a * b;
         }
         // Appelez la fonction
         multiply(2, 3);
      </code>
   </pre>
</body>

Dans ce bloc de code, nous utilisons la balise <pre> pour indiquer que nous voulons afficher le code au format de bloc. À l'intérieur de la balise <pre>, nous ajoutons la balise <code> pour indiquer que nous enveloppons du code de programmation.

Utilisez les attributs globaux et les attributs d'événement

Vous pouvez utiliser les attributs globaux et les attributs d'événement avec la balise <code>.

<body>
  <!-- Utilisation d'attributs globaux avec la balise code -->
  <p>
    <code class="highlight" style="color: red" title="This is a title"
      >Some code</code
    >
  </p>
</body>

Dans le bloc de code ci-dessus, nous utilisons les attributs class, style et title avec la balise <code>.

Ajoutez le style CSS par défaut

Si vous ne spécifiez pas de style pour la balise <code>, elle utilisera les paramètres CSS par défaut. La plupart des navigateurs utilisent monospace comme famille de polices par défaut pour la balise <code>.

<body>
  <!-- Style CSS par défaut pour la balise code HTML -->
  <p>
    <code>Default CSS style</code>
  </p>
</body>

Résumé

La balise <code> est utilisée pour envelopper du contenu lié à la programmation ou à l'informatique. En utilisant cette balise, vous pouvez afficher le texte enveloppé dans une police à espacement fixe telle que courier. Vous pouvez également utiliser la balise <pre> avec la balise <code> pour afficher du code de programmation sur plusieurs lignes. La balise <code> prend en charge les attributs globaux et les attributs d'événement. Si vous ne spécifiez pas de style pour la balise <code>, elle utilisera les paramètres CSS par défaut avec monospace comme famille de polices par défaut.

Code informatique HTML