Maîtriser le barré en HTML

Introduction

La balise HTML del est utilisée pour indiquer un texte supprimé dans un document. En utilisant la balise del, nous pouvons afficher le texte supprimé avec une barre de traversée. Ce laboratoire vous guidera sur la manière d'utiliser la balise HTML del pour créer un texte barré.

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.

Création d'un texte barré

Avant de commencer, créez un fichier HTML nommé index.html. Dans ce fichier, nous allons créer un texte barré en utilisant la balise HTML del.

Pour créer un texte barré, suivez ces étapes :

Ouvrez le fichier index.html dans votre éditeur de code
Ajoutez la balise HTML del (<del>) au texte que vous voulez barrer
```
<p>The <del>quick</del> brown fox jumps over the lazy dog.</p>
```
Dans l'exemple ci-dessus, le mot quick sera affiché barré.
Enregistrez le fichier index.html et ouvrez-le dans le navigateur.

Utilisation des attributs de la balise HTML del

La balise HTML del possède deux attributs importants : cite et datetime. Dans cette étape, nous allons voir comment utiliser ces attributs.

Ajout de l'attribut cite - Utilisez l'attribut cite pour indiquer l'URL d'un document décrivant le texte supprimé.

<p>
  <del cite="http://www.example.com/reason-for-deletion.html"
    >The quick brown fox jumps over the lazy dog.</del
  >
</p>

Ajout de l'attribut datetime - Utilisez l'attribut datetime pour indiquer l'heure à laquelle le texte a été supprimé.
```
<p>
  <del datetime="2022-09-03T17:12:02Z"
    >The quick brown fox jumps over the lazy dog.</del
  >
</p>
```

Création d'un texte barré avec du texte inséré

Souvent, lorsqu'on supprime du texte d'une page web, on peut vouloir insérer un autre texte à la place. Dans cette étape, nous allons voir comment utiliser la balise ins pour afficher un texte inséré.

Ouvrez le fichier index.html dans votre éditeur de code
Ajoutez la balise HTML ins au texte inséré qui remplace le texte supprimé.
```
<p>The <del>quick</del> <ins>brown</ins> fox jumps over the lazy dog.</p>
```
Dans l'exemple ci-dessus, le mot « quick » sera affiché barré, et le mot « brown » sera affiché comme un texte inséré.

Ajout de styles CSS à la balise HTML del

Le style CSS par défaut de la balise HTML del est une barre de traversée. Vous pouvez modifier le style CSS selon vos besoins.

Ajoutez le code CSS suivant à votre fichier HTML pour modifier le style par défaut de la balise del.
```
<style>
  del {
    color: red;
    text-decoration: line-through;
  }
</style>
```

Dans l'exemple ci-dessus, la couleur de la balise del a été changée en rouge.

Résumé

Créer un texte barré en utilisant la balise HTML del est facile. Dans ce laboratoire, vous avez appris à utiliser la balise HTML del pour créer un texte barré, ajouter des attributs à la balise del, utiliser la balise ins pour l'insertion et modifier le style CSS de la balise del.

Texte supprimé en HTML