Création de texte barré en HTML

Introduction

En HTML, la balise <s> représente du texte barré ou du texte traversé d'une ligne. Elle peut être utilisée pour montrer du contenu de texte non pertinent ou plus exact. Il est important d'utiliser la balise <del> au lieu de la balise <s> à des fins d'édition de document. Dans ce laboratoire, vous allez apprendre à créer du texte barré en HTML à l'aide de la balise <s>.

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_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-70841{{"Texte barré en HTML"}} html/head_elems -.-> lab-70841{{"Texte barré en HTML"}} html/text_dir -.-> lab-70841{{"Texte barré en HTML"}} html/doc_flow -.-> lab-70841{{"Texte barré en HTML"}} html/inter_elems -.-> lab-70841{{"Texte barré en HTML"}} html/custom_attr -.-> lab-70841{{"Texte barré en HTML"}} end

Créez un fichier HTML de base

Créez un fichier HTML nommé index.html. Voici comment créer une structure HTML de base :

<!doctype html>
<html>
  <head>
    <title>Création de texte barré en HTML</title>
  </head>
  <body>
    <!-- Votre code HTML ira ici -->
  </body>
</html>

Ajoutez du texte barré

Dans la balise body de votre fichier HTML, ajoutez la balise <s> qui représente du texte barré. Voici comment écrire la syntaxe de base :

<s>Ce texte est barré.</s>

Vous verrez le texte ci-dessus traversé d'une ligne dans votre sortie HTML.

Ajoutez un attribut

Bien que la balise <s> n'ait pas d'attributs spécifiques, elle prend en charge à la fois les attributs globaux et les attributs d'événement. Voici comment ajouter un attribut d'événement à la balise <s> :

<s onclick="alert('Ceci est un texte barré.')">Cliquez sur moi!</s>

Dans le code ci-dessus, l'attribut d'événement onclick affichera un message d'alerte avec le texte lorsque vous cliquez sur le texte barré.

Ajoutez des styles CSS

Vous pouvez également ajouter des styles CSS personnalisés pour modifier l'apparence du texte barré. Voici comment ajouter des styles CSS à la balise <s> :

<style>
  s {
    text-decoration: line-through;
    color: red;
    font-size: 20px;
  }
</style>

Dans le code ci-dessus, la propriété text-decoration crée le trait de traversée, la propriété color change la couleur de la police en rouge et la propriété font-size définit la taille de la police à 20 pixels.

Récapitulatif

Dans ce laboratoire, vous avez appris à créer du texte barré en HTML en utilisant la balise <s>. Vous pouvez personnaliser l'apparence du texte en ajoutant des styles CSS ou des attributs d'événement. La balise <s> est parfaite pour indiquer du texte qui n'est plus exact ou pertinent et peut également être utile dans le cadre d'édition de documents.