Formatierungs-Elemente 2
Mit dem Element „<ins>...</ins>“ kann Text unterstrichen werden. Die Zeichenfolge „ins“ ist die Abkürzung für „inserted“ und heißt auf deutsch „eingefügt“. Das Element wird im Rahmen der Änderungsverfolgung verwendet, um nachträglich eingefügten Text zu markieren.
Beispiel 7
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Hier ist jedes zweite Wort unterstrichen!
Dieser gesamte Text ist unterstrichen!
Ergebnis im Browser:
Mit dem Element „<del>...</del>“ kann Text durchgestrichen werden. Die Zeichenfolge „del“ ist die Abkürzung für „deleted“ und heißt auf deutsch „gelöscht“. Das Element wird ebenso für die Änderungsverfolgung verwendet, in diesem Falle, um gelöschten Text zu markieren.
Beispiel 8
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Hier ist jedes zweite Wort durchgestrichen!
Dieser gesamte Text ist durchgestrichen!
Ergebnis im Browser:
Mit dem Element „<blockquote>...</blockquote>“ kann Text eingerückt werden. Der Name des Elements setzt sich aus den englischen Wörtern „block“ und „quote“ zusammen, was auf deutsch „Block“ und „Zitat“ heißt. Der Name bezeichnet zum einen die Art des Elements (Blockelement) und zum anderen die hauptsächliche Verwendung, d. h. für Zitate.
Beispiel 9
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Das ist ein eingerückter Absatz!
Dieser Absatz ist wieder normal formatiert!
Ergebnis im Browser:
Mit dem Element „<abbr>...</abbr>“ können Abkürzungen mit einem Tooltip versehen werden. Ein Tooltip dient dazu zusätzliche Informationen zu einem Objekt anzuzeigen. So kann ein definierbarer Text im Tooltip angezeigt werden, wenn der Anwender den Mauszeiger über die Abkürzung bewegt. Die Zeichenfolge „abbr“ ist die Abkürzung für „abbreviation“ und heißt auf deutsch „Abkürzung“.
Mit dem Attribut „title“ im Start-Tag kann der Text im Tooltip definiert werden:
<abbr title=“Tooltip-Text“>...</abbr>
Beispiel 10
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
HTML ist eine sog. Auszeichungssprache!
Bewege den Mauszeiger über "HTML" oder über "sog.", um die Abkürzung im Tooltip ausgeschrieben anzuzeigen!
Ergebnis im Browser:
Mit dem Element „<q>...</q>“ kann Text in Anführungsstriche gesetzt werden. Das „q“ ist die Abkürzung für das englische Wort „quote“, das auf deutsch „Zitat“ heißt. D. h. mit diesem Element sollen Zitate markierte werden. Der Vorteil gegenüber selbst gesetzten Anführungsstrichen ist, dass der Browser an der Stelle die landesüblichen Zitat-Markierungen verwendet, was nicht zwangsläufig Anführungsstriche sein müssen.
Beispiel 11
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Hier ist
jedes zweite
Wort als
Zitat markiert
!
Dieser gesamte Text ist als Zitat markiert!
Ergebnis im Browser:
Mit dem Element „<pre>...</pre>“ kann Text so dargestellt werden, wie er im Editor eingegeben wird, d. h. auch mit mehreren Leerzeichen und Zeilenumbrüchen. Das „pre“ ist die Abkürzung für das englische Wort „preformatted“ und heißt auf deutsch „vorformatiert“.
Beispiel 12
HTML-Datei:
Ergebnis:
Hier stehen fünf Leerzeichen " " und hier zwei Zeilenumbrüche " " zwischen den Anführungszeichen!
Hier stehen fünf Leerzeichen " " und hier zwei Zeilenumbrüche " " zwischen den Anführungszeichen!
Ergebnis im Browser:
Abschlussübung
Erweitere die Abschlussübung aus Kapitel 6 und achte bei der Formatierung zusätzlich auf folgende Details:
- UNIX ist fett und unterstrichen
- Das erste WWW hat einen Tooltip mit dem Text „World Wide Web“
- Erstelle die Anführungsstriche von Mosaic mit dem Element „<q>...</q>“
- Verwendet für die Meilensteine eine Texteinrückung
Nachdem du die Seite erstellt hast, kannst du dir zur Kontrolle die Lösung mit folgendem Link herunterladen:
