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.htmlet 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.
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!
