Mise en forme des citations HTML avec la balise `<cite>`

Introduction

Ce laboratoire vous présentera la balise HTML <cite>, qui est utilisée pour afficher une citation dans un format différent du texte normal. Dans ce laboratoire, vous allez apprendre à utiliser la balise <cite> avec la balise <blockquote> pour citer l'auteur d'une citation dans votre document HTML.

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

Inclure l'élément <cite>

Pour utiliser l'élément <cite>, il doit être inclus dans votre document HTML. La syntaxe nécessaire est donnée ci-dessous :

<cite>... </cite>

Ajouter du contenu à l'intérieur de l'élément <cite>

Pour afficher une citation, le contenu à citer est intégré à l'intérieur de la balise <cite>.

<cite>The text to be cited</cite>

Utiliser les éléments <blockquote> et <cite> ensemble

Pour citer l'auteur d'une citation, on utilise la balise <blockquote> avec la balise <cite>.

<blockquote>
  "Le texte à citer."
  <cite>Nom de l'auteur</cite>
</blockquote>

Note : Le texte cité est entouré de guillemets et le nom de l'auteur est entouré de la balise <cite>.

Appliquer du CSS à la balise <cite>

Par défaut, le texte à l'intérieur de la balise <cite> est en italique. Nous pouvons également appliquer des styles CSS supplémentaires à la balise <cite> pour modifier l'apparence de la citation. Voici un exemple :

<style>
  cite {
    color: blue;
    font-size: 1.2em;
  }
</style>

<blockquote>
  "Le texte à citer."
  <cite>Nom de l'auteur</cite>
</blockquote>

Récapitulatif

Dans ce laboratoire, nous avons appris à utiliser la balise HTML <cite> pour afficher une citation dans un format différent du texte normal. Nous avons également appris à utiliser la balise <cite> avec la balise <blockquote> pour citer l'auteur d'une citation dans notre document HTML. Enfin, nous avons discuté de la manière d'appliquer des styles CSS à la balise <cite> pour modifier l'apparence de la citation.