Einführung
In HTML verwenden wir das <blockquote>-Tag, um Zitate auf einer Webseite mit dem Namen des Autors oder der Quelle anzuzeigen. Das Tag wird als block-level-Element verwendet und wird als separate Absatz angezeigt. In diesem Lab lernst du, wie du einen Blockzitat mit dem HTML <blockquote>-Tag erstellst.
Hinweis: Du kannst im
index.htmlprogrammieren und lernen, wie du HTML in Visual Studio Code schreibst. Klicke bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend kannst du die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.
Füge die HTML-Struktur hinzu
Erstelle eine HTML-Datei namens index.html und öffne sie in einem Code-Editor.
Füge die HTML-Struktur wie folgt hinzu:
<!doctype html>
<html>
<head>
<title>HTML Blockquote Tag</title>
</head>
<body>
<h1>HTML Blockquote Tag</h1>
<!-- Füge das Blockzitat hinzu -->
</body>
</html>
Füge das Blockquote-Tag hinzu
Füge das Blockquote-Tag zu deinem HTML-Code hinzu, indem du die folgende Syntax verwendest:
<blockquote>
Dein Zitat kommt hier...
<cite>- Autorennamen</cite>
</blockquote>
Hinweis: Das cite-Tag wird innerhalb des blockquote-Tags hinzugefügt, um den Namen des Autors oder die Quelle des Zitats anzugeben.
Füge CSS-Stil hinzu
Füge CSS-Stil zum Blockquote-Tag hinzu, indem du den folgenden Codeausschnitt verwendest:
<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>
Hinweis: Dieser Code setzt einige grundlegende Stile für das Blockquote-Tag. Die border-left-Eigenschaft fügt einen linken Rand zum Blockquote-Tag hinzu.
Füge den Zitattext hinzu, den du auf der Webseite anzeigen möchtest, und ersetze dabei Your quote comes here....
Speichere die HTML-Datei und öffne sie in einem Webbrowser, um das Blockquote auf der Webseite anzuzeigen.
Zusammenfassung
In diesem Lab hast du gelernt, wie du das <blockquote>-Tag verwendest, um ein Zitat in einem separaten Block auf einer Webseite anzuzeigen. Du hast auch über die Attribute gelernt, die mit dem Tag verwendet werden können, und wie du es mit CSS stylen kannst. Mit dem Blockquote-Tag kannst du Zitate auf deiner Webseite leicht anzeigen!
