Im vorigen Abschnitt haben wir die Textfarbe mit dem CSS-Befehl „color“ und das Hintergrundmuster mit dem Befehl „background-image“ erstellt. Heute werden wir in der Webseite den Text formatieren bzw. Überschriften, Absätze und Listen anlegen. Anschliessend verändern wir nach die Innenabstände und erweitern den Logo-Bereich.

Text formatieren (Überschrift, Absatz, Listen)

Um dem Text zu formatieren, müssen wir die Textteile bestimmten Zwecken zuweisen. Der erste Satz zum Beispiel als Überschrift erster Ordnung, den Text als Absatz-Text, Aufzählungen als Liste und womöglich noch Zwischenüberschriften in zweiter und dritter Ordnung. Wie in Teil 4 schon erklärt gibt es dafür jeweils HTML-Befehle auch HTML-tags genannt.

Legen wir also erstmal eine Überschrift erster Ordnung (<h1>) an und formatieren den Text als Absatz (<p>):

<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> Navigation und noch mehr Text </div>
<div id="inhalt"> 
<h1>Willkommen im feinen Yoga-Studio!</h1>
<p>Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
</p>    
</div>
</div>
</body>

Übrigens: Man kann den Quellcode auch komplett in einer Zeile schreiben – HTML wird vom Browser nacheinander interpretiert. Wenn ein Zeilensprung kommt, wird es im Browser trotzdem hintereinander geschrieben. Wenn Sie wirklich einen Zeilensprung im Text haben wollen müssen Sie ein Break einfügen: <br>.


Wie man im Screenshot sieht, wirkt sich die Zuweisung von h1 und p direkt auf die Darstellung aus. Die Überschrift ist größer und der zum Absatztext ist etwas Zwischenabstand entstanden:

Layout mit h1 und p

Layout mit h1 und p

Nun kommt noch eine Liste hinzu. Diese soll allerdings im Navigationsteil stehen, da wir diese später als Links benutzen wollen. Heutzutage werden übrigens alle Navigationen über HTML-Listen definiert. Das mögen die Suchmaschinen und alle gängigen CM-Systeme arbeiten so.

Eine Liste wird mit ul oder ol eingeleitet (unsortiert oder sortiert) und mit li (Listenpunkten) gefüttert:

<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> 
<ul>
    <li>Punkt 1 </li>
    <li>Punkt 2 </li>
    <li>Punkt 3 </li>
</ul>
</div>
<div id="inhalt"> 
<h1>Willkommen im feinen Yoga-Studio!</h1>
<p>Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
</p>    
</div>
</div>

Und hier das Ergebnis – später werden die Listenpunkte anklickbar sein und optisch wie Buttons aussehen, also ohne die Aufzähungszeichen- alles mit CSS!

Layout mit Liste als spätere Navigation

Layout mit Liste als spätere Navigation

Anpassungen mit CSS

Die heutigen Arbeitsschritte bestanden bisher nur aus dem Hinzufügen von HTML-Befehlen, nun wollen wir diese mit CSS optisch aufbessern.

Zuerst stellen wir die Schriftgröße der Überschrift und vom Text ein mit dem CSS-Befehl font-size. Diese kann in verschiedenen Einheiten erfolgen:

  • px
  • pt
  • %
  • em
  • und andere

Px und pt sind statische Einheiten, die sich direkt am Monitor bzw. Betriebssystem orientieren. 10px können also abhängig vom Monitor unterschiedlich groß erscheinen. Pt wird eher im Print/Druck benötigt und kann für die Druckansicht einer Webseite herangezogen werden.

% und em sind hingegen relative Größen. 100 % sind in etwa das gleiche wie 1 em. Diese Größen sind ergonomisch besser, weil sie besser vergrößerbar sind und sich dem Umfeld anpassen (Px kann das allerdings auch bzw. die heutigen Browser können auch px vergrößern).
Problematisch wird das ganze aber im Zusammenhang mit dem Entwurf. Spalten- und Containerbreiten sollten dann auch in relativen Größen angegeben werden, weil sonst wird nur die Schrift größer, aber die Box nicht.
Außerdem kann es passieren, dass Schriftgrößen sich weitervererben: Die Größe 100% ist sehr groß, daher arbeitet man zum Beispiel mit 80% für den Absatz-Text. Ist innerhalb des Textes noch eine Formatierung mit 80% definiert, wird dieser Teil nicht mit 80% Größe dargestellt, sondern mit 80×80= 64% – also erheblich kleiner!

Deshalb rate ich dazu, am Anfang nur mit festen Einheiten wie px zu arbeiten. Das ist einfacher.

Wir benutzen daher folgende Angaben: h1 in 18px und p in 12px.

<style>
body {background-color:#CCCCCC; color:#011C26; background-image: URL(496.png)}
#container {border:1px solid black; width:800px; margin:auto; box-shadow:8px 8px 8px #000000;}
#logo {padding:5px;background-color:#A6242F;}
#navigation {padding:5px; width:150px;height:350px;float:left;background-color:#C0B18F;}
#inhalt {padding:5px; height:350px;background-color:#D9CEAD;}
h1 {font-size:18px;}
p {font-size:12px;}
</style>

Genauso wie beim body, wird die Formatierung über einen HTML-Selektor erreicht.

Nun wird noch unserer Liste das Aufzählungszeichen weg genommen und der Innen-Abstand der Inhaltsbox nach links erhöht:

body {background-color:#CCCCCC; color:#011C26; background-image: URL(496.png)}
#container {border:1px solid black; width:800px; margin:auto; box-shadow:8px 8px 8px #000000;}
#logo {padding:5px;background-color:#A6242F;}
#navigation {padding:5px; width:150px;height:350px;float:left;background-color:#C0B18F;}
#inhalt {padding:5px 5px 5px 170px; height:350px;background-color:#D9CEAD;}
h1 {font-size:18px;}
p {font-size:12px;}
ul {list-style-type:none;}

Hier lernen wir einige neue Sachen:

  1. über „list-style-type“ kann man die Art des Zeichens definieren
  2. padding gefolgt von 4 Werten legen die Abstände für oben, rechts, unten und links fest (also im Uhrzeigersinn)
  3. padding für links hat 170px, weil hier noch die Breite der Navigation hinzugezählt werden muss
  4. die Breite der Navigation ist nicht nur 150px, sonder 160px, weil der Innenabstand (padding) von jeweils 5px für links und rechts hinzugezählt wird!

Als letztes wird noch die Höhe des Logo-Bereiches vergrößert, indem wir die Innen-Abstände erhöhen. Nach oben und unten haben wir jeweils 25px, dazu kommt die Höhe unseres Logos und schon haben wir die Höhe erweitert (in einem normalen Entwurf, würde die Höhe natürlich exakt vorgegeben sein – hier haben wir viel künstlerischen Spielraum) :

#logo {padding:25px 0 25px 10px;background-color:#A6242F;}

Unser Ergebnis für heute:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Meine erste Seite</title>
<style>
body {background-color:#CCCCCC; color:#011C26; background-image: URL(496.png)}
#container {border:1px solid black; width:800px; margin:auto; box-shadow:8px 8px 8px #000000;}
#logo {padding:25px 0 25px 10px;background-color:#A6242F;}
#navigation {padding:5px; width:150px;height:350px;float:left;background-color:#C0B18F;}
#inhalt {padding:5px 5px 5px 170px; height:350px;background-color:#D9CEAD;}
h1 {font-size:18px;}
p {font-size:12px;}
ul {list-style-type:none;}
</style>
</head>
<body>
<div id="container">
<div id="logo"> <img src="yoga.png" alt="Logo vom Yoga-Studio - feines Yoga" /></div>
<div id="navigation"> 
<ul>
    <li>Punkt 1 </li>
    <li>Punkt 2 </li>
    <li>Punkt 3 </li>
</ul>
</div>
<div id="inhalt"> 
<h1>Willkommen im feinen Yoga-Studio!</h1>
<p>Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
Inhalt und noch mehr Text. Inhalt und noch mehr Text. 
</p>    
</div>
</div>
</body>
</html>

Und optisch:

fertiges Layout

fertiges Layout

In Teil 15 von „wie erstelle ich eine Homepage“ werden wir uns dann mit den verschiedenen Arten von Hyperlinks beschäftigen.