Tutorials – Webdesign
4. Text- & Schriftformatierung
Innerhalb einer Seite kann man Zeichen, Wörter oder Absätze besonders formatieren oder hervorheben. Dies funktioniert mit sogenannten "Strukturtags" oder "Layouttags".
Die Tags können beliebig ineinander verschaltet werden, solange man die richtige Reihenfolge beachtet: das Tag, das zuletzt geöffnet wurde, wird auch zuerst geschlossen. So kann man zum Beispiel einen Text fett und unterstrichen setzen:
<b><u>... Text ... </u></b>
Folgende Tags stehen zur Zeichenformatierung zur Verfügung:
| Tag | Beschreibung | Beispiel |
| <strong> Text </strong> | fett | fett |
| <em> Text </em> | kursiv | kursiv |
| <b> Text </b> | fett (bold), veraltet: heute wird <strong> benutzt | fett |
| <i> Text </i> | kursiv (italic), veraltet: heute wird <em> benutzt | kursiv |
| <u> Text </u> | unterstrichen | unterstrichen |
| <strike> Text </strike > | durchgestrichen | |
| <sup> Text </sup> | hochgestellt (superscript) | hochgestellt |
| <sub> Text </sub> | tiefgestellt (subscript) | tiefgestellt |
| <code> Text </code> | Quellcode, zur Darstellung von Codebeispielen | Code |
Mit HTML kann man natürlich auch die Erscheinung der Schrift im Browser beeinflussen. Es kann eine Schriftart, -größe sowie -farbe zugefiesen werden. Diese Schriftattribute werden innerhalb des <font>-Tags eingesetzt. Die optimale Weise um Schrift zu formatieren erlernt ihr in einem späteren Kapitel, wenn es um CSS geht.
Der folgende Tag allein hat keine Auswirkung auf die Schrift.
<font> ...Text... </font>
Erst, wenn man ihn mit Attributen versieht regelt er die Erscheinung der Texte. Folgende Attribute stehen zur Verfügung: face, family, size und color.
Die Schriftart wird mit dem Attribut "face" oder "family" angegeben. Es gibt nur wenige Schriften, die auf allen Rechnersystemen installiert sind und die man damit im Web verwenden kann:
Verdana
Arial
Trebuchet MS
Georgia
Times New Roman
Courier New
Mit folgendem Code wird also ein Text in der Schriftart Verdana erzeugt:
<font face="verdana"> ...Text... </font>
Ich demonstriere das mal anhand der HTML-Datei aus den letzten Teilen:
In der überschrift füge ich das <font>-Tag mit dem Attribut "face" ein und weise ihm den Wert "Verdana" zu. Im Browser wird das ausgegeben wie auf diesem Screenshot:
die überschrift "Hallo" wird in der Schrift Verdana dargestellt.
Es können auch mehrere Schriften angegeben werden, welche mit Komma und Leerzeichen getrennt werden. Der Browser wird, sollte die erste Schriftart nicht auf dem Rechner vorhanden sein, die zweite aufrufen usw.
Wer eine andere ungewöhnliche Schrift, z.B. für überschriften, benutzen will, muss diese als Bilder vorbereiten
und in die Webseite einbinden.
Mit dem Attribut "size" kann die Schriftgröße angegeben werden. Hier stehen in HTML die Zahlen 1 bis 7 zur Verfügung. 1 ist die kleinste, 7 die größte Schrift:
<font size="4"> ...Text... </font>
Wird die Schriftgröße nicht angegeben, so wird der Text in Größe 3 angegeben.
Im folgenden Beispiel habe ich meiner überschrift eine Größe von 4 zugewiesen:
Natürlich kann man auch die Farbe der Schrift beeinflussen. Dies funktioniert mit dem Attribut color:
<font color="purple"> ...Text... </font>
Als Farbwerte stehen euch folgende Standardnamen zur Verfügung:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, yellow. Desweiteren könnt ihr eine schier unendlich große Farbpalette nutzen (16,7 Millionen) – die Hexadezimalfarben. Diese werden wir im nächsten Kapitel genauer beleuchten.
Selbstverständlich können alle genannten font-Attribute "face", "size" und "color" in ein font-Tag geschrieben werden. Sie werden einfach mit einem Leerzeichen getrennt. Das sieht dann zum Beispiel so aus:
<font face="verdana" size="4" color="purple"> ...Text... </font>
© since 2002 by Otaku-Welt.de