4.1 HTML- und CSS-Grundlagen

In diesem Unterkapitel möchte ich Ihnen die Grundlagen von HTML und CSS näher bringen, damit Sie nachfolgend ein generelles Verständnis für die Umsetzung dieser Webseite haben.

HTML-Grundlagen

Erstellen Sie sich zuerst eine neue Datei mit der Endung .html. Diese Datei können Sie mit jedem beliebigen Texteditor (siehe Kapitel 1.3) öffnen.

Kopieren Sie zunächst Quellcode 1 in Ihre Datei und betrachten Sie das Ergebnis indem Sie die HTML-Datei in einem Browser Ihrer Wahl öffnen. Dabei handelt es sich um eine minimale HTML-Datei, das heißt alle darin vorkommenden Elemente sind für die korrekte Darstellung einer Webseite unerlässlich. Korrekt deshalb, weil die Webseite unter Umständen dennoch richtig dargestellt wird, was aber dann aber der Fehlertoleranz des entsprechenden Browsers zu verdanken ist.

In Zeile 1 und 2 befindet sich der Doctype der HTML-Datei. Dieser entspricht einer Sprachangabe, in der die Datei verfasst wurde. In meinem Beispiel sage ich dem Browser, dass die Datei in XHTML 1.0 geschrieben wurde. Sollten Sie diese Angabe weglassen, so wird die Webseite unter Umständen dennoch korrekt dargestellt, aber Sie haben keinerlei Garantie für ein einheitliches Aussehen der Webseite in allen Browsern. Sie sollten daher auf gar keinen Fall auf diese Angabe verzichten. Für die Beispiele verwende ich allesamt XHTML 1.0 Transitional in englischer Sprache (EN), was sich auf die Elemente und nicht auf die Sprache des Inhaltes Ihrer Webseite bezieht.

In Zeile 3 beginnt das eigentliche HTML-Dokument mit dem gleichnamigen HTML-Tag. Ein Tag ist das, was dort in den eckigen Klammern notiert ist. Dieses wird in Zeile 11 mit einem vorangehenden Slash geschlossen. In HTML gibt es demnach Blockelemente, die andere Elemente umschließen. Zudem werden alle Elemente stehts klein geschrieben.
Ebenso verhält es sich mit dem head-Tag in Zeile 4, in dem Metainformationen zum Dokument angegeben werden können. In diesem Fall ist es der Titel der Webseite, der für die Bezeichnung des Browserfensters sorgt.

In Zeile 7 beginnt der body. Dabei handelt es sich um den eigentlichen Inhalt, der auf Ihrer Webseite dargestellt werden soll. Ich habe hier etwas Text eingefügt und wenn Sie sich das Beispiel im Browser anschauen werden Sie bemerken, dass Sie im Dokument einen Zeilenumbruch haben, in der finalen Ansicht jedoch nicht. HTML ist eine Auszeichnungssprache, das heißt wenn Sie einen Zeilenumbruch haben wollen, können Sie diesen etwa mit dem break-Tag (<br />) erzeugen. Setzen Sie dieses Tag hinter das Wort Hallo um den gewünschten Umbruch zu erhalten.

Alle weiteren Elemente und Tricks zeige ich Ihnen im Verlauf dieses Tutorials, so dass Sie HTML direkt am konkreten Beispiel üben können. Wichtig dabei ist, dass Sie gerne auch ein paar Elemente austauschen, hinzufügen oder entfernen können um die daraus resultierenden Effekte zu beobachten. Dies hilft meines Erachtens zu Beginn sehr.

CSS-Grundlagen

CSS sollten Sie meines Erachtens wie bereits in den Grundlagen erwähnt unbedingt parallel zu HTML erlernen. Daher möchte ich Ihnen an dieser Stelle auch lediglich das nötigste Basiswissen vermitteln um anschließend in der Umsetzung dieser Webseite näher auf bestimmte Kniffe und Tricks einzugehen. Auch hier gilt, dass das Experimentieren mit den Eigenschaften und Werten sehr zum Verständnis beiträgt.

CSS-Style-Angaben

Um CSS einzubinden gibt es mehrere Möglichkeiten. Im ersten Schritt möchte ich Ihnen die einfachste und schnellste Variante zeigen. Schauen Sie sich dazu bitte Quellcode 2 an.

Das bold-Tag (<b>) sorgt in HTML dafür, dass der darin befindliche Text fett dargestellt wird. Diesem Element können Sie nun mit dem style-Attribut CSS-Eigenschaften zuweisen. In diesem Fall sage ich dem Element, dass der Text zwischen den Tags eine rote Textfarbe erhält und 15 Pixel groß ist.
Wie Sie sehen kann diese Methode schnell unübersichtlich werden, da Sie dem HTML-Tag eventuell wesentlich mehr Eigenschaften zuweisen wollen. Daher gibt es einen weiteren Weg, mit dem sich dieser Umstand vermeiden lässt.

CSS-Klassen

Die Alternative zu Style-Angaben stellen CSS-Klassen dar. Deren Einsatz zeigen Quellcode 3 und Quellcode 4.

Ich habe das HTML-Beispiel in Zeile 6 um die Angabe einer CSS-Datei erweitert. Diese Datei habe ich style.css genannt und im gleichen Ordner wie die HTML-Datei abgespeichert. Die in Quellcode 4 definierte CSS-Klasse myFirstClass, die mit einem vorangehenden Punkt als solche definiert wird, habe ich in Zeile 9 verlinkt. Das bold-Tag erhält daher alle in der Klasse definierten Eigenschaften. In diesem Fall erhält der Text die Schriftart Arial (falls diese auf dem Endgerät nicht vorhanden ist wird Verdana verwendet usw.), eine Schriftgröße von 13 Pixeln und eine dunkelgraue Farbe, die als Hexadezimal-Wert angegeben werden kann.
Der große Vorteil daran: Diese Klasse ist wiederverwendbar. Wenn Sie die gleichen Eigenschaften auf ein anderes Element anwenden wollen, so können Sie dies durch einen erneuten Verweis auf diese Klasse tun.

Zusammenfassung

Direkte Style-Angaben sollten Sie meiner Meinung nach so sparsam wie möglich einsetzen, da Sie CSS direkt im HTML-Code einbinden. Eine saubere Trennung bietet entgegen dieser Methode eine bessere Lesbarkeit des Quellcodes und zudem werden CSS-Dateien vom Browser gecached. Das heißt, dass diese nicht bei jedem Seitenaufruf durch den Nutzer neu geladen werden müssen, was vor allem bei größeren Seiten für vorteilhaftere Ladezeiten sorgt.