In Teil 10 von „Wie erstelle ich eine Homepage“ haben wir das Grundgerüst angelegt; nun geht es mit CSS weiter.
Bevor wir das Layout weiter bearbeiten, wenden wir eine andere Art von CSS-Zuweisung an. Bisher sind die CSS-Anweisungen direkt an den HTML-Befehl geschrieben:

<div style="border:1px solid black; width:800px; margin:auto;">

div => HTML
style => CSS

Das funktioniert zwar, ist in der Praxis aber sehr unübersichtlich. Daher schreibt man nun die CSS-Befehle in den HEAD-Bereich der Webseite (später dann sogar in eine eigene CSS-Datei).

Hier der Code vor dem Auslagern in den HEAD:

<!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>
</head>
<body style="background-color:grey;">
<div style="border:1px solid black; width:800px; margin:auto;">
<div style="border:1px solid red; padding:5px;background-color:red;"> Logo </div>
<div style="border:1px solid blue; padding:5px; width:150px;float:left;background-color:blue;"> Navigation </div>
<div style="border:1px solid green; padding:5px; height:350px;background-color:green;"> Inhalt </div>
</div>
</body>
</html>

Hier nach den Änderungen

<!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:grey;}
#container {border:1px solid black; width:800px; margin:auto;}
#logo {border:1px solid red; padding:5px;background-color:red;}
#navigation {border:1px solid blue; padding:5px; width:150px;float:left;background-color:blue;}
#inhalt {border:1px solid green; padding:5px; height:350px;background-color:green;}
</style>
</head>
<body>
<div id="container">
<div id="logo"> Logo </div>
<div id="navigation"> Navigation </div>
<div id="inhalt"> Inhalt </div>
</div>
</body>
</html>

Die Auslagerung in den HEAD-Bereich der Seite geschieht über den HTML-Befehl <style>. Die einzelnen CSS-Befelhe werden dort gesammelt. Wie schon in Teil 4 erklärt werden hier Selektoren angewendet.

  • body {..} bedeutet, dass alles in geschweiften Klammern sich auf den Rumpf/Body auswirkt. Also das, was vorher direkt am body stand (<body style=“background-color:grey;“>) Dies ist ein HTML-Selektor
  • #container ist ein ID-Selektor. Der Name container ist frei wählbar und soll unser Div mit dem Container adressieren. Dafür weist man im body diesem div den Befehl „id“ zu =>
    <div id=“container“>
  • dies machen wir für die anderen div-Elemente genauso
  • Achten Sie auf die Schreibweise und benutzen keine Leerzeichen, Sonderzeichen wie Umlaute und dergleichen (auch Zahlen am Anfang eines Selektors sind verboten)
    #container2 ist gestattet #2container nicht
  • Speichern Sie das Dokument als index2.html und überprüfen, ob alles noch so aussieht wie in index.html aus der vorigen Übung
Erstes Layout mit CSS im Head

Erstes Layout mit CSS im Head

Wunderbar, nun haben Sie eine übersichtliche Datei – die Stilanweisungen sind im Head und die Inhalte und die Struktur im Body der Seite!

Übrigens: Beim Speichern von Dokumenten für das Internet insbesondere für Webseiten benutzen Sie bitte keine Leerzeichen, Sonderzeichen usw., sonst gibt es später Probleme auf dem Live-Server:

  • meineSeite.html statt meine Seite.html
  • uebersicht.html statt übersicht.html
  • meinBild.jpg statt mein Bild.jpg
  • Sie können statt Leerzeichen einen Trenn- oder Unterstrich benutzen; allerdings führt auch dieser in seltenen Fällen zu Fehlern

In Teil 12 von „wie erstelle ich eine Homepage“ geht es dann wie versprochen um das Verfeinern des Layouts.