Webdesign 4 - Text- & Schriftformatierung

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:

Code:

 <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	durchgestrichen
<sup> Text </sup>	hochgestellt (superscript)	n/a
<sub> Text </sub>	tiefgestellt (subscript)	n/a
<code> Text </code>	Quellcode, zur Darstellung von Codebeispielen	C o d e

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 Tag

Code:

<font> ...Text... </font>

allein hat keine Auswirkung auf die Schrift. 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

Code:

<font face="verdana"> ...Text... </font>

wird also ein Text in der Schriftart Verdana erzeugt.
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 - 7 zur Verfügung. 1 ist die kleinste, 7 die größte Schrift:

Code:

<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:

Code:

<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:

Code:

<font face="verdana" size="4" color=“purple"> ...Text... </font>

~~~
Teil 4 des Kurses ist geschafft, wir kommen gut vorran
Wer Fragen hat, kann die ganz enfach hier im Forum (einfach auf "antworten" klicken, auch als Gast) loswerden oder mir eine eMail schicken.
Nächste Woche geht es weiter mit Teil 5. Farben.

Um eure erworbenen Kenntnisse zu "testen" und zu festigen, könnt ihr die folgende Aufgabe lösen. Die fertige Datei könnt ihr mir dann per eMail (webmaster@otaku-welt.de) zuschicken - ich werfe einen Blick darauf und gebe euch ein Feedback.


Aufgabe zu diesem Kurs:

Gestalte den Text deiner HTML-Seite in Farben, Schrift und Größe wie es dir gefällt : )