HTML-Tag <blockquote>…</blockquote> – Langes Zitat
Der HTML-Tag <blockquote> setzt einen Textblock vom Rest des Texts ab. Die genaue Darstellung wird durch den Browser bestimmt. In der Regel wird der Text rechts und links eingerückt und kursiv dargestellt. Vor und nach dem <blockquote>-Element gibt es einen Zeilenumbruch. Innerhalb eines <blockquote>-Tags können beliebige andere HTML-Tags stehen. Auf jeden Fall aber muss der Text innerhalb des blockquote-Elements in ein Blockelement wie <p> oder <div> gesetzt werden.
Um ein Blockquote-Zitat vom Fließtext abzuheben, haben Sie die Möglichkeit, dieses mit CSS zu formatieren und so speziell darzustellen. Sehen Sie dazu nachstehendes Beispiel:
Mein Musterbeispiel ansehen
Erläuterungen zum Quellcode und zur CSS-Formatierung
Der HTML-Tag <blockquote> besteht im vorliegenden Beispiel aus 3 verschiedenen Blockelementen. Der gesamte Text liegt innerhalb des Blockelementes <p>, die Anfangs- und Endpfeile befinden sich in einem <span>-Tag, das Wort ‘VERZÜCKT’ befindet sich innerhalb des HTML-Elementes <em>.
HTML-Quellcode:
<blockquote> <span>»</span>Die Art, wie er das Spielgerät liebkoste, <em>verzückte</em> seine Anhänger<span>«</span></blockquote>
Das gesamte blockquote-Element wird mittels CSS-Befehl float: right; rechts im zweiten Absatz eingestellt. Die Seitenabstände werden mit margin: .3em 0.7em .5em festgelegt; zusätzlich erhält der Text eine kursive Schrift (font: italix 2em/1.2 Georgia, serif;) und wird mittig (text-align: center;) ausgerichtet.
Durch die CSS-Befehle blockquote em und blockquote span erhalten die Klammern und der extra auszeichnete Textbereich eine besondere Formatierung.
CSS-Code:
blockquote { color: #927B6B; font: italic 2em/1.2 georgia, serif; float: right; margin: .3em 0 .7em .5em; text-align: center; width: 250px; } blockquote p { margin: 0; } blockquote em { color: #87420F; } blockquote span { color: #BAB9B3; font-size: 1.1em; font-weight: bold; line-height: 1.0; padding: 0 .2em; }
Mein Musterbeispiel ansehen
Ähnliche Artikel:
HTML-Entities (Maskierungen für Sonderzeichen) auf EntityCode.com
CSS Tricks mit Inner Border Images (Rahmen um Grafiken) von Chris Coyier
Schöner “Scrolling – Trick” mit CSS-Eigenschaft “background-attachment: fixed”
Multiple Remote Linking: Anleitung und 2 Beispiele
Tags: Blockelemente, blockquote, Einrück-Effekt, HTML-Code, langes Zitat, Textauszeichnung, Zitate darstellen
