Texte en superposition : Améliorez votre contenu HTML

Introduction

La balise HTML sup vous permet d'afficher du texte au format superposé sur une page web. Dans ce laboratoire, nous allons démontrer comment utiliser la balise sup pour créer du texte superposé.

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.

Configuration du fichier HTML

Créez un fichier HTML nommé index.html et configurez la structure HTML de base.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body></body>
</html>

Ajout de texte en superposition

Ajoutez la balise sup au fichier HTML. Entre les balises d'ouverture et de fermeture de l'élément sup, ajoutez le texte que vous souhaitez afficher en superposition.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
  </head>
  <body>
    <p>Mon adresse e-mail est : user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

Mise en forme du texte en superposition

Vous pouvez styliser la balise sup à l'aide de CSS pour ajuster sa taille de police et son alignement vertical. Ajoutez le code CSS suivant à votre fichier HTML :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>Mon adresse e-mail est : user123<sup>@</sup>example<sup>.</sup>com</p>
  </body>
</html>

Ajout de notations mathématiques

Le texte en superposition est un composant important des notations mathématiques. Vous pouvez utiliser la balise sup pour représenter les exposants et les puissances. Par exemple, ajoutez le code suivant à votre fichier HTML :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Superscript Text</title>
    <style>
      sup {
        font-size: smaller;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <p>La valeur de 2<sup>3</sup> est 8.</p>
  </body>
</html>

Résumé

Dans ce laboratoire, nous avons appris à connaître la balise sup en HTML. Nous avons vu comment créer du texte en superposition et l'utiliser pour représenter des exposants et des puissances. Nous avons également appris à styliser la balise sup à l'aide de CSS. Avec les compétences acquises dans ce laboratoire, vous pouvez désormais facilement ajouter du texte en superposition à vos pages HTML.

Texte en superposition en HTML