Balise HTML Blockquote : Amélioration des citations de page web

Introduction

En HTML, nous utilisons la balise <blockquote> pour afficher des citations sur une page web avec le nom de l'auteur ou la source. La balise est utilisée comme un élément de niveau de bloc et est affichée comme un paragraphe séparé. Dans ce laboratoire, vous allez apprendre à créer une citation en utilisant la balise HTML <blockquote>.

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/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/quotes("Quotations") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70714{{"Bloc de texte cité en HTML"}} html/text_head -.-> lab-70714{{"Bloc de texte cité en HTML"}} html/quotes -.-> lab-70714{{"Bloc de texte cité en HTML"}} html/doc_flow -.-> lab-70714{{"Bloc de texte cité en HTML"}} html/inter_elems -.-> lab-70714{{"Bloc de texte cité en HTML"}} end

Ajoutez la structure HTML

Créez un fichier HTML nommé index.html et ouvrez-le dans un éditeur de code.

Ajoutez la structure HTML comme suit :

<!doctype html>
<html>
  <head>
    <title>Balise HTML Blockquote</title>
  </head>
  <body>
    <h1>Balise HTML Blockquote</h1>

    <!-- Ajoutez la citation -->
  </body>
</html>

Ajoutez la balise Blockquote

Ajoutez la balise blockquote à votre code HTML en utilisant la syntaxe suivante :

<blockquote>
  Votre citation ici...
  <cite>- Nom de l'auteur</cite>
</blockquote>

Note : La balise cite est ajoutée à l'intérieur de la balise blockquote pour indiquer le nom de l'auteur ou la source de la citation.

Ajoutez une mise en forme CSS

Ajoutez une mise en forme CSS à la balise blockquote en utilisant le extrait de code suivant :

<style>
  blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    font-style: italic;
    color: #555;
    padding: 5px 20px;
    border-left: 5px solid #ccc;
  }
</style>

Note : Ce code définit une mise en forme de base pour la balise blockquote. La propriété border-left ajoute une bordure gauche à la balise blockquote.

Ajoutez la citation que vous voulez afficher dans la page web en remplaçant Votre citation ici....

Enregistrez le fichier HTML et ouvrez-le dans un navigateur web pour voir la citation affichée sur la page web.

Récapitulatif

Dans ce laboratoire, vous avez appris à utiliser la balise <blockquote> pour afficher une citation dans un bloc séparé sur une page web. Vous avez également appris les attributs qui peuvent être utilisés avec la balise et la manière de la styliser à l'aide de CSS. Avec la balise blockquote, vous pouvez afficher facilement des citations sur votre page web!