Hübsche Überschriften

Es sollte daher selbstverständlich sein, dass Sie alle Überschriften in der selben Schrift setzen, es sei denn, Sie beabsichtigten etwas Spezielles. Nun macht HTML es eh so, da alles in der selben Schrift gesetzt wird.

Wenn Ihnen Überschriften im Defaultzeichensatz nicht zusagen, und Sie z.B. lieber eine bestimmte Schrift vorschlagen möchten, haben Sie generell zwei Möglichkeiten, HTML und CSS.

Konsistenz mit HTML

Mit

<font face="fontnamen"><hX>&Uuml;berschrift</hX></font>

weisen Sie den eingeschlossenen Elementen einen Zeichensatz zu. Wenn Sie HTML noch nicht kennen, stören Sie sich bitte nicht an allen Details.

Diese werden Sie im HTML Kurs noch genauer kennenlernen. Es geht hier nur um das Prinzip. X ist die Hierarchiestufe von 1 bis 6 der Überschrift ist und fontnamen eine durch Kommata getrennte Liste von Namen, wie "Arial".

Ordnen Sie die Liste gemäß Ihrer Priorität. Die erste verfügbare Schrift wird genutzt. Achten Sie bitte unbedingt darauf, dass die Liste in Anführungsstriche eingeschlossen ist.

Dies wird bei vielen, wenn auch nicht bei allen Browsern funktionieren.

Konsistenz mit CSS

Sie greifen zu der aktuelleren Technik, die cascading style sheets (CSS) genannt wird, und ordnen allen Überschriften (den Tags h1, h2, h3, h4, h5, h6) die gleiche font-family zu.

Wie Sie vielleicht wissen, ist CSS klassenbasiert, daher ist das ein Klacks und erheblich einfacher als die erste Möglichkeit. Im head-Bereich ihrer Seite fügen Sie z.B. hinzu:

<style type="text/css"><!--vor alten Browsern verstecken
h1, h2, h3, h4, h5, h6: { font-family: arial, helvetica, sans-serif; }
//--></style>

Vor dem Doppelpunkt steht, wen es betrifft (so genannte Selektoren), in den Klammern dann die Formatierungsanweisung(en).

Das Auskommentieren machte man – ähnlich wie bei JavaScripten – anfänglich, um eine direkte Ausgabe der Styles in Browsern zu verhindern, die es noch nicht unterstützt haben, und so den Tag selbst ignorieren/nicht kennen.

Heute verkürzt es sich zu:

<style>
h1, h2, h3, h4, h5, h6: { font-family: arial, helvetica, sans-serif; }
</style>

da auch type="text/css" die Voreinstellung ist.

Der Vorteil der letzten Methode ist, dass man diese Style Definitionen (und das ist der eigentliche Sinn) in eine eigene Datei auslagert) und diese in jede page einbindet, d.h., diese Festlegungen sind siteweit.

Die Beschreibung der Darstellung wird also von der Beschreibung des Inhaltes getrennt.

Dies geschieht mit einem link der Beziehung/Art "stylesheet" im Kopf (head) der HTML-Datei:

<link rel="stylesheet" href="/style.css" type="text/css" />

Auch hier könnte muss type nur angegeben werden, wenn es nicht text/css ist.

Dabei trägt href den URL/die Adresse der Datei, die Definitionen/Formatierungen enthält:

h1, h2, h3, h4, h5, h6: {
  font-family: arial, helvetica, sans-serif;
}

Etwaige Änderungen sind sehr lokal durchführbar, da sie nur in der style-Datei durchzuführen sind und automatisch alle nutzenden betrifft.

Bei der ersten Methode sind bei Änderungen dann umfangreichere Search-and-Relace-Arbeiten-notwendig, wodurch sich auch mehrere Dateien ändern, die upgeloaded werden müssen.

Und natürlich wird es meist nicht nur die eine Formatierung sein. Es könnten auch Farben und sehr sicher unterschiedliche Größen sein.

CSS macht es also deutlich einfacher (und bietet zudem auch mehr Möglichkeiten).

Schriftart

Welche Schriftart nehmen wir?

Das ist natürlich Geschmackssache. Sagen wir einfach: Ich mag "Arial", also sage ich folgerichtig:

<font face="arial"><h2>Eine h&uuml;bsche &Uuml;berschrift</h2></font>

Falsch!

Nunja, es ist nicht ganz falsch. Obiges sieht wie erwartet aus auf vielleicht Ihrem und meinem Windows-Rechner.

Nur besteht die Welt nicht nur aus Windows-Maschinen und zum Beispiel der Mac oder eine Sun kennen kein "Helvetica".

Dort heißt eine ähnliche Schrift "Helvetica". Und obwohl diese beiden nun wahrlich weit verbreitet sind, wollen wir doch auf Nummer sicher gehen und sagen noch "sans-serif", was "irgendeine serifenlose Schrift" bedeutet.

Das sollte nun gut sein. Nur wenn alle Stricke reißen, sieht der Benutzer eine Voreinstellung des Browsers.

Möchten Sie also etwas Serifenloses haben, sagt man mindestens

<font face="arial, helvetica, sans-serif"><h2>Eine h&uuml;bsche &Uuml;berschrift</h2></font>

Sie können vor "sans-serif" noch beliebige andere Schriften angeben, die Sie auch akzeptieren würden. Achten Sie lediglich darauf, dass die Liste mit "sans-serif" endet.

Übrigens gibt es analog zu "sans-serif" auch "serif" bzw. "monotype" für "irgendeine Serifen-Schrift" bzw. "irgendeine Gleichweitenschrift", wenn Sie sich mit den Details nicht auseinandersetzen möchten.

<font face="courier new, courier, monotype"><h2>Noch eine h&uuml;bsche &Uuml;berschrift</h2></font>

Es lohnt sich also, wenn Sie Ihre Wunschliste mit einem der Platzhalter abschließen, um zumindest etwas in der Art zu bekommen.