brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Hübsche Überschriften

von Thomas Salvador.

Konsistenz ist bei einer Website die halbe Miete. Überschriften fallen dem Besucher natürlich besonders ins Auge, da sie den Fließtext unterbrechen. 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.

Erste Möglichkeit

Mit

<font face = "fontnamen"><hX>Ü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. Der 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.

Zweite Möglichkeit

Sie greifen zu der aktuelleren Technik, die cascading style sheets (CSS) genannt wird. (Wenn Ihnen das nichts sagt, sollten Sie sich auch nicht ärgern, s.o.) und ordnen allen Überschriften (den Klassen h1,h2,h3,h4,h5,h6) die selbe 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>
 Wen betrifft es?        Was wird festgelegt?

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 z.B. so:

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

wobei href die Adresse der Datei enthält, die ihrerseits hier die Definition 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.

Nachteile sind leider auch vorhanden, die allerdings, bei diesem einfachen Beispiel nicht ganz so schlimm sind. CSS ist noch nicht so arg verbreitet, wie man sich das vielleicht wünschen würde. Auch bei CSS kochen einige ihr eigenes Süppchen. Es ist also bei weitem nicht so portabel, wie es sein sollte.


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zum Inhaltsverzeichnis der 1. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/3.html .