Création d'une sortie d'échantillonnage avec la balise HTML

Introduction

HTML est la base de tout site web, et il est essentiel de bien comprendre les différents éléments disponibles pour créer des pages web. Un tel élément est la balise <samp> sur laquelle nous allons nous concentrer dans ce laboratoire. La balise <samp> est utilisée pour afficher un exemple ou une sortie de code informatique.

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.

Création d'une page HTML de base

Créez un nouveau fichier appelé index.html.

Dans cette étape, nous allons créer une page HTML de base et configurer la structure requise pour la balise <samp>.

<!DOCTYPE html>
<html>
    <head>
        <title>Création d'une sortie d'échantillonnage avec la balise HTML</title>
    </head>
    <body>
        <h1>Utilisation de la balise <samp></h1>
    </body>
</html>

Dans le code ci-dessus, nous avons ajouté la structure de base d'une page HTML. Nous avons également ajouté une balise <h1> qui contiendra le titre de la page.

Ajout de l'élément

Dans cette étape, nous allons ajouter la balise <samp> à la page pour créer une sortie d'échantillonnage d'un programme informatique.

<!DOCTYPE html>
<html>
    <head>
        <title>Création d'une sortie d'échantillonnage avec la balise HTML</title>
    </head>
    <body>
        <h1>Utilisation de la balise <samp></h1>
        <p>Voici un exemple d'utilisation de la balise <samp>:</p>
        <samp>Sample Text</samp>
    </body>
</html>

Dans le code ci-dessus, nous avons ajouté une balise de paragraphe qui explique le but de la balise <samp>. Ensuite, la balise <samp> est ajoutée avec le texte d'échantillonnage, "Sample Text", à l'intérieur.

Utilisation de CSS pour styliser l'élément

CSS peut être utilisé pour modifier le style de la balise <samp>. Dans cette étape, nous allons apporter quelques modifications de base à la balise <samp>.

<!DOCTYPE html>
<html>
    <head>
        <title>Création d'une sortie d'échantillonnage avec la balise HTML</title>
        <style>
            samp {
                background-color: #f1f1f1;
                padding: 1em;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <h1>Utilisation de la balise <samp></h1>
        <p>Voici un exemple d'utilisation de la balise <samp>:</p>
        <samp>Sample Text</samp>
    </body>
</html>

Dans le code ci-dessus, nous avons ajouté une balise de style à la page. À l'intérieur de la balise de style, nous avons défini les propriétés de couleur d'arrière-plan, de remplissage et de rayon de bordure pour la balise <samp>.

Ajout de la sortie de code

Dans cette étape, nous allons montrer comment utiliser la balise <samp> pour afficher la sortie d'un code informatique.

<!doctype html>
<html>
  <head>
    <title>Création d'une sortie d'échantillonnage avec la balise HTML</title>
    <style>
      samp {
        background-color: #f1f1f1;
        padding: 1em;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Sortie d'un code informatique :</h1>
    <samp>
      <code> print("Hello World"); </code>
    </samp>
  </body>
</html>

Dans le code ci-dessus, nous avons ajouté un bloc de code à l'intérieur de la balise <samp> pour montrer la sortie d'un code informatique.

Résumé

Dans ce laboratoire, nous avons appris à propos de la balise HTML <samp> qui est utilisée pour créer des sorties d'échantillonnage de code informatique dans les pages web. Nous avons également vu comment il peut être stylisé à l'aide de CSS et comment l'utiliser avec le bloc de code.

Sortie d'échantillonnage HTML