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.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/TextContentandFormattingGroup -.-> html/text_dir("Text Direction") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70851{{"Texte en superposition en HTML"}} html/head_elems -.-> lab-70851{{"Texte en superposition en HTML"}} html/lang_decl -.-> lab-70851{{"Texte en superposition en HTML"}} html/text_dir -.-> lab-70851{{"Texte en superposition en HTML"}} html/inter_elems -.-> lab-70851{{"Texte en superposition en HTML"}} end

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>

Stylisation 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écapitulatif

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.