HTML mit CSS formatieren{0}

Auf modernen Websites trifft man normalerweise keine Frames mehr an. Stattdessen findet man häufig Seiten, die mit CSS formatiert wurden. Ich möchte in diesem Tutorial deshalb erläutern, wie man das einfach realisieren kann. Dabei sollten schon Grundkenntnisse in HTML und CSS vorhanden sein.

Um eine Seitenstruktur zu erreichen, arbeiten wir mit div Containern. Diese Container kann man dann mit CSS an die bedürfnisse anpassen. Also erstellen wir zunächst eine neue Datei namens index.html. Dort fügen wir zuerst den Header ein.

<!DOCTYPE html PUBLIC "-//DTD//W3C XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>HTML mit CSS formatieren</title>
<link type="text/css" name="stylesheet" href="style.css" />
</head>

Die Zeile über dem </head> bewirkt, dass eine externe CSS Datei mit dem Namen style.css in das Dokument eingebunden wird. Als nächstes kommen wir nun zu den entscheidenden Containern.

<body>
<div id="all">
<div id="header"></div>
<div id="sidebar"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>

Nun haben wir die Container erstellt, die wir mit CSS ansprechen können und in die später der jeweilige Inhalt kommt. Nun sind wir schon mit der index.html fertig und fangen mit der style.css an.

#all{
width:600px;
height:800px;
}
#header{
width:600px;
height:150px;
background-color:#005B9A;
}
#sidebar{
width:100px;
height:600px;
float:left;
background-color:#0191C8;
}
#content{
width:500px;
height:600px;
float:right;
background-color:#74C2E1;
}
#footer{
width:600px;
height:50px;
clear:both;
background-color:#8C8984;
}

Damit wäre die style.css fertig und man kann einmal die index.html öffnen, um sich das Ergebniss anzuschauen. Durch die verschiedenen Farben sehen wir, wo sich die jeweiligen Container befinden. Mit float:right bewirken wir, dass sich der Container rechts befindet. Mit clear:both, dass dieser Container unter den anderen platziert wird. Jetzt ist man mit der Grundformatierung fertig.

Ich hoffe ihr habt die Funktionsweise verstanden und seit nun in der Lage, simple Websites mit CSS zu formatieren.

By Fredi Category: Tutorials Tags: , , ,