Créer un style de texte en ligne avec les balises span en HTML

Introduction

Dans ce laboratoire (lab), vous apprendrez à utiliser les balises HTML  pour créer un style de texte en ligne et améliorer la présentation visuelle du contenu web. Le laboratoire se concentre sur la compréhension de l'objectif des balises span, la création d'une structure de document HTML de base et l'application de styles en ligne personnalisés à des segments de texte spécifiques.

À travers un exemple pratique évolutif, vous explorerez comment les balises span peuvent être utilisées pour cibler et styliser de petites parties de texte sans perturber le flux du document. À la fin de ce laboratoire, vous serez en mesure d'appliquer des couleurs de texte personnalisées, des arrière - plans et d'autres techniques de style en ligne à l'aide d'éléments HTML span, offrant ainsi un formatage de texte plus dynamique et visuellement attrayant dans vos pages web. Nous allons nous appuyer sur un seul fichier HTML tout au long de ce laboratoire, en ajoutant progressivement plus de fonctionnalités et de styles.

Comprendre le but des balises span

Dans cette étape, vous allez apprendre l'objectif et la fonctionnalité des balises  en HTML. Les balises  sont des éléments de niveau en ligne (inline-level elements). Cela signifie qu'elles sont conçues pour fonctionner dans le flux d'un texte, contrairement aux éléments de niveau bloc (block-level elements) comme  ou <div> qui créent des sauts de ligne avant et après eux. Les balises  vous permettent d'appliquer un style spécifique ou d'ajouter une signification sémantique à une petite partie de texte à l'intérieur d'un bloc de contenu plus large.

Imaginez cela comme si vous mettiez en évidence un mot spécifique dans une phrase avec un marqueur. La balise  agit comme ce marqueur, vous permettant de cibler ce mot spécifique pour le styliser.

Elles sont particulièrement utiles pour :

Appliquer des styles en ligne : Changer l'apparence de mots ou de phrases spécifiques.
Ajouter un formatage personnalisé : Mettre en gras, en italique, colorer des parties du texte, etc.
Mettre en évidence un texte spécifique : Attirer l'attention sur les parties importantes de votre contenu.
Cibler de petits segments de texte pour une manipulation en JavaScript ou CSS : Vous donner un contrôle précis sur chaque morceau de texte.

Créons un simple fichier HTML pour démontrer l'utilisation des balises . Ouvrez le WebIDE et créez un nouveau fichier appelé styling-example.html dans le répertoire ~/project. Ce fichier sera notre toile pour le reste du laboratoire.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>This line contains a <span>special</span> word.</p>
  </body>
</html>

Dans cet exemple, la balise  entoure le mot "special". Pour l'instant, elle ne change pas l'apparence, mais elle marque ce mot comme quelque chose que nous pouvons styliser plus tard.

Notes : Apprenez-en plus sur Comment prévisualiser des fichiers HTML dans le WebIDE. Prenez un moment pour prévisualiser le fichier styling-example.html dans le WebIDE. Vous verrez les deux paragraphes affichés normalement. La balise , en elle-même, ne change pas l'apparence du texte.

Aperçu d'un exemple de balise HTML span

Application d'un style de base en ligne

Maintenant, faisons ressortir le mot "special". Dans cette étape, vous apprendrez à appliquer un style en ligne directement à l'élément  en utilisant l'attribut style. Le style en ligne consiste à ajouter des propriétés CSS directement à l'intérieur de la balise HTML.

Ouvrez le fichier styling-example.html dans le WebIDE et modifiez la balise  comme ceci :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>
      This line contains a <span style="font-weight: bold;">special</span> word.
    </p>
  </body>
</html>

Nous avons ajouté l'attribut style à la balise . À l'intérieur de l'attribut style, nous avons écrit font-weight: bold;. Il s'agit d'une propriété CSS de base qui met le texte en gras.

Voici un détail :

style="... " : Il s'agit de l'attribut HTML qui vous permet d'appliquer directement des règles CSS à cet élément.
font-weight: bold; : Il s'agit d'une déclaration CSS.
- font-weight : C'est la propriété CSS qui contrôle le degré de gras du texte.
- bold : C'est la valeur que nous assignons à la propriété font-weight.
- ; : Le point - virgule est important! Il sépare les différentes déclarations CSS à l'intérieur de l'attribut style. Si vous souhaitez ajouter plus de styles plus tard, vous devrez les séparer par des points - virgules.

Aperçu du fichier styling-example.html dans le WebIDE à nouveau. Vous devriez maintenant voir le mot "special" en gras. Cela démontre comment les balises  vous permettent de cibler un texte spécifique pour le styliser.

Exemple de texte en gras avec la balise HTML span

Ajout de styles en ligne supplémentaires

Rendons le style plus intéressant. Vous pouvez appliquer plusieurs styles en ligne à une seule balise . Dans cette étape, nous allons ajouter des caractères italiques et une soulignement à notre mot "special".

Ouvrez le fichier styling-example.html dans le WebIDE et modifiez la balise  pour inclure plus de styles :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>
      This line contains a
      <span
        style="font-weight: bold; font-style: italic; text-decoration: underline;"
        >special</span
      >
      word.
    </p>
  </body>
</html>

Nous avons ajouté deux autres déclarations CSS à l'intérieur de l'attribut style, séparées par des points - virgules :

font-style: italic; : Cela met le texte en italique.
text-decoration: underline; : Cela ajoute un soulignement au texte.

N'oubliez pas le point - virgule après chaque déclaration! C'est crucial pour que le navigateur comprenne où se termine un style et où commence le suivant.

Aperçu du fichier styling-example.html. Le mot "special" devrait maintenant être en gras, en italique et souligné. Cela montre le pouvoir de combiner plusieurs styles en ligne avec la balise .

Balise HTML span avec des styles gras, italique et souligné

Personnalisation de la couleur du texte et de l'arrière-plan

Maintenant, changeons les couleurs du texte et de son arrière - plan. Dans cette étape, vous apprendrez à utiliser les propriétés CSS color et background - color à l'intérieur de l'attribut style de la balise .

Ouvrez le fichier styling - example.html et modifiez à nouveau la balise  :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <p>This is a normal line of text.</p>
    <p>
      This line contains a
      <span
        style="font-weight: bold; font-style: italic; text-decoration: underline; color: blue; background-color: lightyellow;"
        >special</span
      >
      word.
    </p>
  </body>
</html>

Nous avons ajouté deux nouvelles déclarations CSS :

color: blue; : Cela définit la couleur du texte en bleu. Vous pouvez utiliser différents noms de couleurs (comme red, green, black, etc.) ou des codes de couleur hexadécimaux (comme #FF0000 pour le rouge).
background - color: lightyellow; : Cela définit l'arrière - plan de l'élément span en jaune clair. Tout comme pour la propriété color, vous pouvez utiliser des noms de couleurs ou des codes hexadécimaux.

Aperçu du fichier styling - example.html. Le mot "special" devrait maintenant être en gras, en italique, souligné, de couleur bleue et avoir un arrière - plan jaune clair. Cela démontre comment vous pouvez modifier considérablement l'apparence d'un texte spécifique en utilisant les balises  et les styles en ligne.

Texte stylisé de couleur bleue avec un arrière - plan jaune clair

Un exemple plus pratique

Voyons comment vous pourriez utiliser les balises  dans un scénario plus réaliste. Imaginez que vous créez une description de produit. Vous pourriez vouloir mettre en évidence certaines fonctionnalités ou le prix.

Ouvrez le fichier styling-example.html et remplacez son contenu par le suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Span Tag Styling</title>
  </head>
  <body>
    <h1>Product Description</h1>
    <p>
      Introducing our new
      <span style="font-weight: bold;">Super Gizmo 3000</span>!
    </p>
    <p>Key Features:</p>
    <ul>
      <li><span style="color: green;">Ultra-fast processing</span></li>
      <li>
        Long-lasting <span style="font-style: italic;">battery life</span>
      </li>
      <li>Available in <span style="color: blue;">multiple colors</span></li>
    </ul>
    <p>Price: <span style="font-size: 1.2em; color: red;">$99.99</span></p>
    <p>
      Limited time offer:
      <span style="background-color: yellow; font-weight: bold; padding: 2px;"
        >Free Shipping!</span
      >
    </p>
  </body>
</html>

Dans cet exemple :

Nous avons utilisé  pour mettre en gras le nom du produit.
Nous avons utilisé  pour colorer les fonctionnalités clés.
Nous avons utilisé  pour rendre le prix plus grand et de couleur rouge. Remarquez la propriété font-size ici, cela montre que vous pouvez également contrôler la taille du texte! L'unité em est une unité relative, ce qui rend la taille du texte relative à la taille de la police de l'élément parent.
Nous avons utilisé  pour mettre en évidence une offre spéciale avec une couleur d'arrière - plan et un espacement intérieur (padding). Le padding ajoute de l'espace autour du texte à l'intérieur de la couleur d'arrière - plan.

Aperçu du fichier styling-example.html. Vous verrez comment les balises  peuvent être utilisées pour ajouter un accent visuel et une structure à votre contenu, le rendant plus attrayant et plus facile à lire.

Exemple de style avec la balise HTML span

Résumé

Dans ce laboratoire, vous avez appris le but et la mise en œuvre des balises HTML , en vous concentrant sur leur rôle dans l'application de styles de texte en ligne. Vous avez vu comment les balises , en tant qu'éléments de niveau en ligne, vous permettent de cibler et de styliser des parties spécifiques de texte sans perturber le flux global de votre document.

Vous avez pratiqué la création d'un document HTML de base et avez progressivement ajouté des styles en ligne en utilisant l'attribut style à l'intérieur des balises . Vous avez exploré diverses propriétés CSS telles que font-weight, font-style, text-decoration, color et background-color, en apprenant à les combiner pour obtenir différents effets visuels. Enfin, vous avez appliqué vos connaissances pour créer un exemple de description de produit plus pratique, démontrant comment les balises  peuvent améliorer la présentation et la lisibilité de votre contenu web. Vous êtes maintenant en mesure d'utiliser efficacement les balises  pour ajouter une mise en forme de texte dynamique et visuellement attrayante à vos pages web.