Hierarchie und Style

Meine Meinung

Eine Web-Seite kann heute beinahe wie eine Prospekt-Seite auf Papier gestaltet werden. Web-Designer und Layouter sind begeistert über die Entwicklung im Internet. Zusehens verschwinden die klassisch geschriebenen Text-Seiten, denen ab und an ein Bild oder eine Grafik, zur Veranschaulichung einer Sache, eingefügt wurde. Manche Seiten bestehen fast nur noch aus Grafik; der Inhalt, so könnte man meinen, folgt erst im zweiten Rang, als notwendiges Übel. Sogar die wenigen Worte müssen noch gestylt sein.
Da steht es, schwarz auf weiss. Wenn dem nur so wäre, so könnte man den Text auch lesen. Das Styling erlaubt eben auch weiss auf weiss oder schwarz auf schwarz, was in jedem Fall zu einem unbefriedigenden Ergebnis führt.
HTML bedeutet Hyper Text Markup Language.
Zum Schreiben von HTML genügt ein einfacher Texteditor. Aber das sagte ich ja schon früher. Da stellt sich die Frage, wie man denn die Titel darstellen kann, oder die farbigen HyperLinks. Wie macht man Listen, wie schreibt man fett?
In der HTML-Sprache werden die Textelemente als das ausgezeichnet, was sie sind. Wie das gemacht wird, sehen Sie weiter unten.

Sein und Schein

Eine tolle Idee!
Jeder Mensch auf dieser Welt schreibt auf, was er weiss und stellt dieses Wissen im Internet zur Verfügung. So entsteht ein grosses Archiv, in dem das ganze Wissen dieser Welt vorhanden ist. Damit das funktioniert, müssen die Texte ein einheitliches Format haben; eine Sprache, die einfach zu schreiben ist, und eine Sprache, die trotzdem effizient ist. So wurde HTML entwickelt: Die HTML-Sprache ist sowohl einfach wie auch genial.
Ein Titel ist nicht einfach ein gross geschriebener Text und auch nicht ein rot oder fett geschriebenes Wort.
In der HTML-Sprache sind sechs verschiedene Titel mit verschiedener Gewichtung vorgesehen: h1, h2, h3, h4, h5 und h6, wobei h1 die grösste und h6 die kleinste Relevanz hat. Die Gewichtung kommt auch im Aussehen zur Geltung, es ist vorerst gar nicht notwendig, der Schrift einen bestimmten Style zuzuweisen. HTML hat bereits einen vordefinierten Style für Sie bereit gestellt.
Das Auszeichnungsschema von HTML geht von einer hierarchischen Gliederung aus.

Wozu eine Hierarchie

Bestimmt haben Sie auch schon im Internet nach einem bestimmten Begriff gesucht. Eine Suchmaschine kann nach verschiedenen Kriterien suchen. Wie merkt aber ein Roboter, was wichtig sein könnte und was nicht?
Ein Beispiel: Sie suchen nach Informationen über das Bundeshaus in Bern, CH. Sie geben das Wort Bundeshaus ins Suchfeld ein und lassen suchen. Fragmente dieses Wortes werden in tausenden von Seiten vorkommen; sowohl "bund" wie auch "haus" sind so oft vorhanden, dass eine Auflistung dieser Resultate vermutlich nicht das Gewünschte anzeigen wird. Etwas wertvoller ist bereits das ganze Wort an einem Stück. Würde das Wort "Bundeshaus" als Überschrift gefunden, so wäre das schon viel besser. Falls sogar eine Seite mit dem Titel "Bundeshaus" vorhanden ist, so ist wohl das am ehesten das Gesuchte. Eventuell heisst sogar die Domaine "Bundeshaus.ch" .com .net etc. - und so würde vermutlich diese Seite zu oberst als gefundenes Ergebnis aufgelistet.
Die Hierarchie hat also durchaus einen Sinn, wenn es darum geht, in Millionen von Daten etwas Bestimmtes zu finden.

Web-Seite hierarchisch
aufbauen.

<html>

<head>

<title>Sehenswürdigkeiten</title>

</head>

<body>

<h1>Europa</h1>

<h2>Städte</h2>

<h3>Sehenswürdigkeiten</h3>

<h4>Bauwerke</h4>

<hr>

<h5>Bern</h5>

<p>Bern liegt an der Aare</p>

<h6>Zytglogge Turm</h6>

<h6>Bundeshaus</h6>

<hr>

<h5>London</h5>

<p>London liegt an der Themse</p>

<h6>Big Ben</h6>

<h6>Tower Bridge</h6>

<hr>

<h5>Paris</h5>

<p>Paris liegt an der Seine</p>

<h6>Tour Eiffel </h6>

<h6>L'Arc de Triomphe</h6>

</body>

</html>

So sieht es aus:

Europa

Städte

Sehenswürdigkeiten

Bauwerke

Bern

Bern liegt an der Aare

Zytglogge Turm

Bundeshaus

London

London liegt an der Themse

Big Ben

Tower Bridge

Paris

Paris liegt an der Seine

Tour Eiffel

L'Arc de Triomphe

Sinnvolle Styles

Achten Sie darauf, die Auszeichnungen nur für die entsprechende Bestimmung zu verwenden. Die Auszeichnung Überschrift soll wirklich nur für Überschriften verwendet werden. Wenn Sie einen einfachen Text gross schreiben wollen, verwenden Sie dafür einen Style. Styles, richtig angewendet, sind eine sehr nützliche Einrichtung. Selbst unter den Styles herrscht eine Hierarchie.

Definition an Ort und Stelle auf der Seite
Im Seitenkopf der Seite
Im Style-Sheet

Falls Sie also für ein und die selbe Sache an allen drei Orten einen bestimmten Style festgelegt haben, so hat die Nummer 1 den Vorrang, gefolgt von 2 und 3.
Bis dahin gebrauchte ich einen einzigen Style, nämlich für die Darstellung der Code-Beispiele. In einem Style-Sheet habe ich die Schrift und die Farbe für die Codes festgelegt. Im Seitenkopf jeder Seite steht der Verweis auf das Style-Sheet. Es ist diese Zeile:
<link rel="stylesheet" type="text/css" href="src/beispiel.css">
Im Style-Sheet "beispiel.css" steht die folgende Definition:
code { font-family:Courier New,Courier; color:#008000; }
Sollte ich nun einmal den Wunsch haben, die Code-Beispiele anders darzustellen, so müsste ich nur an einem einzigen Ort (im Style-Sheet) die Änderung vornehmen, was sich dann auf alle Seiten auswirken würde.

Zurück zur Startseite