Formatierungs-Elemente 1
Mit Hilfe von Formatierungs-Elementen kann der Text auf einer Webseite bedingt formatiert werden. Diese Möglichkeit war vor allem in der Anfangszeit von HTML wichtig, als es CSS (Cascading Style Sheets) noch nicht gab oder zumindest CSS noch nicht so ausgereift war wie heute. Heutzutage sollten aber alle Formatierungen nur noch mit Hilfe von CSS vorgenommen werden.
Die hier nun vorgestellten Formatierungs-Elemente dienen der Vollständigkeit und geben dem Anwender die Möglichkeit schon passable eigene Webseiten zu erstellen, auch ohne vorher das CSS-Tutorial durchgearbeitet zu haben
Mit dem Fettdruck-Element („<b>...</b>“) kann Text fett dargestellt werden. Das „b“ steht für „bold“ und heißt auf deutsch „fett“.
Beispiel 1
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Hier ist jedes zweite Wort in Fettdruck!
Dieser Text ist komplett in Fettdruck!
Ergebnis im Browser:
Mit dem Kursivschrift-Element („<i>...</i>“) kann Text kursiv dargestellt werden. Das „i“ steht für „italic“ und heißt auf deutsch „kursiv“.
Beispiel 2
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Hier ist jedes zweite Wort kursiv dargestellt!
Dieser Text ist komplett kursiv!
Ergebnis im Browser:
Mit dem Element „<big>...</big>“ kann Text größer dargestellt werden.
Beispiel 3
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Hier ist jedes zweite Wort größer!
Dieser gesamte Text wird größer dargestellt!
Ergebnis im Browser:
Hinweis: Das Element „<big>...</big>“ wird offiziell nicht mehr in HTML5 unterstützt. Auch wenn es derzeit noch von allen gängigen Browser richtig dargestellt wird, sollte die Größe von Text ausschließlich mit CSS formatiert werden!
Mit dem Element „<small>...</small>“ kann Text kleiner dargestellt werden.
Beispiel 4
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Hier ist jedes zweite Wort kleiner!
Dieser gesamte Text wird kleiner dargestellt!
Ergebnis im Browser:
Mit dem Element „<sub>...</sub>“ kann Text tiefer gestellt werden. Die Zeichenfolge „sub“ ist die Abkürzung für das englische Wort „subscirpt“ und heißt auf deutsch „tiefgestellt“.
Beispiel 5
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Hier ist jedes zweite Wort tiefer gestellt!
Dieser gesamte Text ist tiefer gestellt!
Ergebnis im Browser:
Mit dem Element „<sup>...</sup>“ kann Text höher gestellt werden. Die Zeichenfolge „sup“ ist die Abkürzung für das englische Wort „superscirpt“ und heißt auf deutsch „hochgestellt“.
Beispiel 6
HTML-Datei:
Ergebnis:
Das ist ganz normal formatierter Text!
Hier ist jedes zweite Wort höher gestellt!
Dieser gesamte Text ist höher gestellt!
Ergebnis im Browser:
Abschlussübung
Als Abschlussübung für dieses Kapitel, soll folgende Webseite erstellt werden:
Achte dabei auf folgende Formatierungen:
- Fettdruck und Kursiv
- Das (R) bei UNIX ist hochgestellt und zusätzlich kleiner
Nachdem du die Seite erstellt hast, kannst du dir zur Kontrolle die Lösung mit folgendem Link herunterladen:
