HTML-Grundlagen: Layout und CSS
Um HTML-Seiten ein anspruchsvolles Layout zu verpassen, brauchen Sie Container-Elemente und Style-Definitionen. Der Einstieg ist super einfach!
- Anna Kalinowsky
In Teil 1 des HTML-Tutorials haben Sie gesehen, wie das Gerüst einer HTML-Seite aussieht und wie sich Links, Listen, Bilder und so weiter erstellen lassen. Um daraus eine ansehnliche Webseite zu machen, fehlt noch das Layout. Wir zeigen, wie Sie Elemente anordnen und Farben und Schriften definieren.
Design mit CSS
Um eine HTML-Seite ordentlich zu designen und zu layouten, brauchen Sie zwei weitere Techniken: Den HTML-Typen DIV, um Bereiche zu definieren und die Cascading Style Sheets (CSS), um Bereiche und deren Inhalte zu gestalten. Zunächst sehen Sie, wie CSS funktioniert, dann wie DIV eingesetzt wird und anschließend, wie Layout mit DIV und CSS im Zusammenspiel funktioniert.
CSS ist eine ziemlich einfache Möglichkeit, bestimmte Inhalte auf einer HTML-Seite global zu gestalten. Das einfachste Beispiel wäre farbige Schrift: Wenn Sie einen Text in roter Schrift haben wollen, können Sie einfach den HTML-Font-Tag "<font>" verwenden: "<font color="red">". Wenn nun aber viele Absätze rote Schrift haben sollen und vielleicht noch weitere Attribute, gibt es zwei Probleme: Zum einen müssten Sie das Ganze an jedem Absatz tippen. Zum anderen wird es wieder aufwändig, wenn später all diese Absätze grüne Schrift bekommen sollen. Also lagert man diese Design-Definitionen aus.
Mit CSS definieren Sie im HEAD-Bereich der HTML-Seite Styles für vorhandene HTML-Elemente oder eigene Kreationen. Im BODY-Bereich, also zum Beispiel an den einzelnen Absätzen, fügen Sie dann lediglich eine Referenz zu einem Ihrer Styles hinzu. Ein ganz simples Beispiel:
HEAD-Bereich:
<style>
p { background-color : red }
</style>
BODY-Bereich:
<p>
Ein Absatz mit rotem Hintergrund.
</p>
Hier wird für das Paragraphen-Tag ganz allgemein bestimmt, dass der Hintergrund rot sein soll. Daher muss im BODY-Bereich auch keine explizite Referenz angegeben werden. Hier spricht man von einem Typen-Selektor, weil die Definition eben für einen ganzen HTML-Typen gilt. Interssanter ist es aber, wenn Sie einzelne Inhalte umgestalten:
<style>
.hervorhebung { color : red; }
#seitentitel { background-color : yellow; text-align: center;}
</style>
Hier kommen zwei neue Selektoren hinzu: Mit einem "." beginnen so genannte "Klassen", mit "#" die IDs. IDs sind für Dinge gedacht, die nur einmal auf der Seite vorkommen, beispielsweise eine Navigationsleiste. Klassen eignen sich für die Dinge, die häufiger vorkommen, etwa Hervorhebungen. In die Definitionen in den geschweiften Klammern können Sie etliche Werte schreiben, hier hilft nur ein Blick in die CSS-Referenz. Für das Beispiel genügt für die Klasse "hervorhebung" die Definition "Schriftfarbe = Rot" und bei der ID "seitentitel" werden Hintergrund und Textausrichtung definiert. Der Aufruf im BODY-Bereich erfolgt dann so:
<h1 id="seitentitel">Der Seitentitel-Bereich</h1>
<p>Ein roter Text.</p>
Hier wird also zunächst eine Überschrift H1 in roter Schrift geschrieben (die sonstigen H1-Vorgaben bleiben bestehen), anschließend ein Absatz mit gelbem Hintergrund und mittig ausgerichteter Schrift. Und wenn später alle 20 hervorgehobenen Absätze nicht gelb, sondern grün hinterlegt sein sollen, müssen Sie es nur einmal im HEAD-Bereich ändern.
Wenn die Webseite aus vielen HTML-Seiten besteht, müssten Sie solche Änderungen immer noch in jedem Dokument durchführen - also lässt sich der ganze CSS-Code auch noch selbst auslagern. Stattdessen kommt er in eine eigene Datei, namens beispielsweise "stylesheet.css", auf die im HEAD-Bereich der HTML-Datei verwiesen wird:
<link rel="stylesheet" href="stylesheet.css">
In diesem Fall müsste die CSS-Datei im selben Ordner wie die HTML-Datei liegen, ansonsten müsste in der href-Eigenschaft der komplette Pfad stehen. Mit diesem Konstrukt können Sie nun Hunderte HTML-Seiten mit Tausenden Elementen mit einer einzigen Änderung in der zentralen CSS-Definition umgestalten.
Bereiche mit DIV-Tags
Bislang stehen alle Elemente einfach nur der Reihe nach untereinander – das geht natürlich gar nicht. Also benötigen Sie den HTML-Tag "<DIV>". Mit dem DIV-Typen können Sie eine Seite in Bereiche einteilen, beispielsweise links eine Navigationsleiste, rechts einen Bereich für den Inhalt und darüber eine Kopfleiste – also ein typisches Layout.
Ein DIV-Tag bedeutet schlicht und ergreifend, dass alles, was darin steht, zu diesem einen DIV gehört, angefangen in einer neuen Zeile. Ohne weitere Angaben, würden also alle Texte, Tabellen, Bilder oder sonstige Elemente einfach der Reihe nach dargestellt – ganz so, als hätte man das DIV einfach weggelassen. Ohne CSS-Styles sind die Dinger also ziemlich nutzlos.
Ein Layout-Beispiel
Folgendes soll entstehen: Das Navigations-DIV links, auf 20 Prozent der Seitenbreite, rot unterlegt; der Inhaltsbereich rechts beginnend bei 25 Prozent der Seitenbreite und ausgedehnt auf 85 Prozent, Hintergrund ist hellgrün; Kopfleiste in Schwarz mit weißer, zentrierter Schrift auf 85 Prozent der Seitenbreite.
Zunächst die Definition:
<style>
#navigationsbereich {
float:left;
width:20%;
background-color: red;
}
#inhaltsbereich {
margin-left: 25%;
width:60%;
background-color: lightgreen;
}
#kopfleiste {
background-color: black;
width: 85%;
color: white;
text-align: center;
}
</style>
DIVs beginnen immer in einer neuen Zeile, also muss ein Kniff her, um zwei DIVs nebeneinander anzuzeigen – und der hört auf das Attribut "float". Über float wird ein Element, hier der Navigations-DIV, links oder rechts platziert und von weiteren Inhalten umflossen. Und eben dieses Umfließen ermöglicht es dem Inhalts-DIV, in derselben Zeile zu beginnen.
Die anderen Attribute sollten selbsterklärend sein, einzig die 85 Prozent sind noch zu erörtern: Der Inhaltsbereich hat einen Seitenabstand von 25 Prozent der Seitenbreite nach links (margin-left), um einen gewissen Abstand zwischen Navigation und Inhalt zu lassen. Und er dehnt sich über weitere 60 Prozent des Bildschirms aus – macht zusammen 85 Prozent Gesamtbreite.
Und nun der eigentliche HTML-Aufbau im BODY-Bereich:
<div id="kopfleiste">Hier könnten zum Beispiel Breadcrumbs stehen.</div>
<div id="navigationsbereich">
<ul>
<li>Navigation: Seite 1</li>
<li>Navigation: Seite 2</li>
<li>Navigation: Impressum</li>
</ul>
</div>
<div id="inhaltsbereich" >
Irgendein beliebiger Text.
</div>
Hier sind nun wieder alle Elemente bekannt: Den DIV-Tags werden schlicht und ergreifend wieder IDs übergeben und inhaltlich dürfen Sie das komplette HTML-Arsenal innerhalb der Tags nutzen.
Wenn das jetzt eher kompliziert klingt: Füg den Code einfach in den bereits im ersten Teil erwähnten Online-Editor von w2schools.org und Sie werden die Auswirkungen sofort verstehen. Am besten deaktivieren Sie einzelne Zeilen und gucken, was passiert – das ist sehr erhellend! Zudem können Sie mit der Seitenbreite spielen: Zieh einfach die Begrenzung zwischen Code- und Vorschaubereich mit der Maus hin und her, schon sehen Sie, wie sich der Inhalt dynamisch anpasst.
Das Ganze ist nur ein winziger Auszug der Möglichkeiten von HTML und CSS. Es gibt etliche Attribute, komplizierte Verschachtelungen von DIVs, Styles und sonstigen Elementen sowie viele weitere HTML-Bausteine. Aber: Aufbau und Aufruf von CSS und DIV-Bereichen folgt immer demselben Muster. Sie müssen also kaum noch etwas Neues dazulernen, Referenzen für HTML- und CSS-Elemente zum Nachschlagen genügen bereits. Alles andere ist eine Frage der Kreativität.
Ein letzter Tipp zum Schluss: In der Praxis ist es meist viel einfacher, einen WYSIWYG-Editor wie Kompozer zu verwenden. Für das Feintuning können Sie freilich auch dort direkt auf den Code zugreifen.
(anka)
