Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

Zitate kennzeichnen in HTML mit <blockquote>

Möchte man einen Text aus einer anderen Quelle zitieren, sollte man diesen unbedingt kenntlich machen, als Zitat. Zum Kennzeichnen eines Zitates gibt es den HTML-Befehl <blockquote>. Mit diesem Befehl wird der zitierte Text umschlossen.

Möchte man beispielsweise einen Textabschnitt aus dem Zauberlehrling von Wolfgang von Goethe zitieren, packen wir diesen zwischen <blockquote>

<p>Es folgt ein passendes Zitat:
<blockquote>
  „Herr, die Not ist groß!
  Die ich rief, die Geister
  werd ich nun nicht los.“
</blockquote>

Das Aussehen des zitierten Textes übernimmt der Browser. Der Text wird auf beiden Seiten eingerückt dargestellt:

Es folgt ein passendes Zitat:

„Herr, die Not ist groß! Die ich rief, die Geister werd ich nun nicht los.“

Es fällt sofort auf, dass unsere 3 zitierten Zeilen nun als eine Zeile ausgegeben werden. Das kennen wir vom Browserausgaben in HTML. Wir benötigen also die entsprechenden HTML-Befehle für Absätze und Umbrüche.

Innerhalb von dem HTML-Befehl <blockquote> können beliebige andere HTML-Befehle genutzt werden. Wir wollen für die Zauberlehrling-Ballade hinter jeder Zeile einen Umbruch. Daher bauen wir ein <br> ein und packen das Ganze noch in einen Absatz:

<p>Es folgt ein passendes Zitat:
<blockquote>
  <p>„Herr, die Not ist groß!<br>
  Die ich rief, die Geister<br>
  werd ich nun nicht los.“</p>
</blockquote>

Ergebnis

Es folgt ein passendes Zitat:

„Herr, die Not ist groß!
Die ich rief, die Geister
werd ich nun nicht los.“

Zitat mit Quellenangabe in HTML

Zum guten Stil gehört auch, die Quelle des Zitates aufzuführen. Dazu wird das Attribut cite= verwendet. Unser HTML-Befehl <blockquote> wird um das Attribut erweitert:

<blockquote cite="https://de.wikipedia.org/wiki/Der_Zauberlehrling">
  <p>„Herr, die Not ist groß!<br>
  …
</blockquote>

Bitte das Attribut cite nicht mit dem HTML-Befehl <cite> verwechseln.

Lässt man sich nun das Ganze im Browser anzeigen, sehen wir nichts von der Quelle. Wollen wir diese Angabe aber sichtbar machen, dann hilft hier uns CSS weiter. Der Vollständigkeitshalber hier der entsprechende CSS-Code. Die Erklärung der Funktion der CSS-Anweisungen gibt es unter https://www.html-seminar.de/css3-before-after.htm

blockquote[cite]::after{content: " (Quelle: " attr(cite) ")"; }

Als Ergebnis erhalten wir unser Zitat mit Quellenangabe angezeigt:

Es folgt ein passendes Zitat:

„Herr, die Not ist groß!
Die ich rief, die Geister
werd ich nun nicht los.“
(Quelle: https://de.wikipedia.org/wiki/Der_Zauberlehrling)

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details