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.

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.

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 la 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ésumé

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!

Bloc de texte cité en HTML

Introduction

Ajoutez la structure HTML

Ajoutez la balise Blockquote

Ajoutez la mise en forme CSS

Résumé