Teil 1: Teil 2: Teil 3: Optik in HTML: mit CSS

HTML-Seiten mit Text und Bild ist ja jetzt kein Problem mehr.
Aber es sollte halt nach was aussehen. Und dazu ist die folgende kurze Vorgeschichte sinnvoll zu wissen.

Ursprünglich war die Optik gar nicht wichtig, denn HyperText Markup Language war als "Sprache" entwickelt worden, um Text mit Formatierungen (fett, kursiv, groß, klein..), Struktur (Überschriften, Absätze, Listen, Tabellen) und Verweisen (sowohl nach innerhalb als auch außerhalb des Textes) schnell über das frischgeborene, noch langsame Internet zu schicken und darstellen zu können. Insofern ist HTML auch eher ein Textformat als eine Sprache. Aber mit der Ausbreitung und Verallgemeinerung des Internets und seiner Verschnellerung wuchsen die Wünsche hinsichtlich der optischen Darstellung der Inhalte, z.B. für Firmen-Web-Präsenzen.
Dann begann das Gefrickel mit den vorhandenen Befehlen etwas auf die Beine zu stellen, später kam noch das wesentlich kompliziertere JavaScript hinzu, mit dem man beispielsweise Mouseover-Effekte erzeugen konnte, und der Browserkrieg (IE-Netscape) bescherte echtes Chaos. Als Ausweg erwies sich "CSS", sozusagen der Darstellungsbruder zum HTML-Inhalt. Dies gelang aber erst, als sich CSS-fähige Browser durchsetzten.

Aber jetzt kann fast jeder Browser weitgehend CSS. Und da dieses CSS sowohl tauglich, als auch weitgehend durchgesetzt ist und auch nicht sonderlich schwer ist, will ich gar nicht erst die Optische Gestaltung in HTML erläutern, sondern jetzt über CSS schreiben, denn so wird es auch eine zeitlang Standard bleiben:
HTML ist für den möglichst strukturierten Inhalt und CSS für seine Darstellung da.

CSS heißt Cascading Style Sheets.

Cascading bedeutet soviel wie verschachtelbar und wird gleich noch erläutert.
Der Style der Website wird mittels Sheets, also Vorgaben verwirklicht und zwar in Bezug auf die HTML-Elemente (tags, "spitze Klammern").
CSS gibt also dem Browser vor, wie die einzelnen (Struktur-) Elemente auszusehen haben. Dazu weist er diesen Elementen die gewünschten Darstellungseigenschaften zu, z.B.:

• Die ganze Website soll als Hintergrundfarbe gelb haben.
• Aller Text ist in Arial, in der Schriftgröße 14 Pixel und der Farbe dunkelgrau zu halten.
• Außer Überschriften, die sollen in Georgia geschrieben sein, schwarz auf weißem Untergrund und 18 Pixel groß sein. (Dieses war bereits die erste Verschachtelung!)
• Jeder Absatz soll mit einem doppelt-großen Buchstaben beginnen.

Nun wird es interessant:

• Alle Links sollen grau hinterlegt sein, sollen die Farbe Rot haben,
• wenn man mit der Maus darüberfährt gelb auf grün werden und
• beim Klicken dann blau auf weiß erscheinen.

Und man kann alles nach belieben Positionieren!
Dazu muß man aber auch Alles in ein Element reingeschrieben haben, damit man dieses Element dann positionieren kann. Im Allgemeinen bietet sich Absatz <p> und - das hatten wir noch nicht: - <div> an. Das steht für englisch: division also Abschnitt o.ä.

Und damit man sich grafisch ordentlich austoben kann, kann man den Elementen (z.B. Abschnitten) auch Namen (id) geben oder Kategorien (class) einführen.
Damit kann man nun beliebig viele Elemente gestalten und positionieren. Und ineinanderverschachteln, bei Bedarf.

Sinnvoll ist es also sich Gedanken über die Struktur der geplanten Website zu machen. Im Groben könnte sich anbieten:

• Eine Hauptüberschrift mit Namen und Slogan darunter
• Bereich für die Navigation zwischen den Seiten
• Der Inhalt, bei Bedarf mit Zwischenüberschriften

Wie wird das nun umgesetzt?

Ausgangspunkt bleibt die HTML-Site.
In dieser wird nun der Style entweder

• direkt in die jeweiligen Elemente hineingeschrieben (gilt dann nur für dieses eine Element) oder
• in den Head-Bereich vorneweg geschrieben (gilt dann für die entsprechenden Elemente in dieser Site) oder auf eine
• externe zweite Datei verwiesen, das geschieht auch im Headbereich (Das gilt dann für die Elemente aller Websites, die auf diese CSS-Datei verweisen.

Das kann man auch kombinieren und das ist dann wieder verschachtelbar möglich. Wobei die speziellere Angabe die allgemeinere verdrängt. Die erste Angabe oben ist die speziellste, die dritte ist die allgemeinste.


Nach soviel Arbeit einfach mal ein Beispiel - in der Variante "CSS vorneweg im Head-Bereich", mit oben genannten Features. Zwischen <style type="text/css"> und </style> sind die Elemente genannt und deren gewünschte Eigenschaften folgen in geschweiften Klammern, jeweils durch einen Strichpunkt voneinander getrennt.

Also jetzt sozusagen: Learning by Looking

Naja, falls ihr diese Datei mal im Browser angeschaut habt: am Design könnte man noch etwas arbeiten.

Hier steht alles zu CSS:

Im Teil 4 werde ich wieder konkreter: