Gut, dann klären wir zunächst erstmal die Grundbegriffe (HTML / CSS).
HTML (= Hypertext Markup Language)
Mit HTML baut man das "Gerüst" einer Seite. Eines der einfachsten HTML Gerüste ist
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
Seiteninhalt
</body>
</html>
Dies würde wie folgt aussehen:
Derzeit gibt es für den Seiteninhalt nur einen Bereich, welcher durch "<body>" definiert ist.
Im folgenden ist der Bereich den der <body>-Tag derzeit einnimmt rot umrandet:
Wenn ich nun den Inhalt meiner Seite in einen linken und rechten Bereich unterteilen will, müsste ich dazu mein Gerüst um zwei neue Bereiche erweitern.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Titel der Seite</title>
</head>
<body>
<div>
Linker Bereich
</div>
<div>
Rechter Bereich
</div>
</body>
</html>
Der <div>-Tag hat dabei die Eigenschaft imGegensatz zu Tags wie <a> (Link), <b> (Fett), <u> (Unterstrichen), <img> (Bild), ... keine vordefinierten Eigenschaften zu haben, d.h. wir können damit Bereich erzeugen, ohne dass diese für den Browser eine spezielle Bedeutung hätten, welche wir ggf. nicht wollen.
Wenn man sich dies einmal anschaut, sieht es nun wie folgt aus (der Bereich des <body>-Tags ist wieder Rot umrandet, die der jeweiligen <div>-Tags sind Grün umrandet):
Wie man sieht haben wir nun zwar zwei Bereiche geschaffen, aber ie sind nicht wie erhofft links / Rechts angeordnet. Um nun die Darstellung dieser Bereiche zu beeinflussen kommen wir zu CSS.
CSS (= Cascading Style Sheets)
Mit Hilfe von CSS kann man die Darstellung bestehender HTML Bereiche beeinflussen.
Damit dies vom Browser erkannt wird muss man den CSS Quelltext mit dem HTML Quelltext verbinden. Wir werden dazu den HTML Tag <style> verwenden (weitere Möglichkeiten gibt es hier:
http://de.selfhtml.org/css/formate/einbinden.htm).
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Titel der Seite</title>
<style type="text/css">
// Hier kann man nun CSS verwenden
</style>
</head>
<body>
<div>
Linker Bereich
</div>
<div>
Rechter Bereich
</div>
</body>
</html>
Nun wollen wir dazu kommen unsere Bereiche in einen linken / rechten Bereich aufzuteilen.
Damit ein Bereich einen anderen Bereich umfließen kann gibt es in CSS den Befehl float;
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Titel der Seite</title>
<style type="text/css">
.links
{
float: left;
}
</style>
</head>
<body>
<div class="links">
Linker Bereich
</div>
<div>
Rechter Bereich
</div>
</body>
</html>
Da wir jedoch zwischen den Bereichen unterschieden müssen haben ich einem class="links" gegeben, wodurch die CSS-Definition unter ".links" nur den Bereich dieses <div>-Tags betrifft.
Die Ausgabe sieht wie folgt aus (mit Ränder um die Bereiche):
Nun könnten wir z.b. die Bereite des Linken Bereiches vergrößern, die Hintergrundfarbe ändern, usw.
Dies läuft jedoch vollkommen über CSS.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Titel der Seite</title>
<style type="text/css">
.links
{
float: left;
width: 50%;
background: green;
height: 50px;
padding: 10px;
}
.rechts
{
background: blue;
color: red;
height: 100px;
}
</style>
</head>
<body>
<div class="links">
Linker Bereich
</div>
<div class="rechts">
Rechter Bereich
</div>
</body>
</html>
Dies würde dann wie folgt aussehen (diesmal ohne Ränder):
Ich hoffe dieser Crash-Kurs hat das Zusammenspiel / den Aufgabenbereich von HTML / CSS nochmal in Erinnerung gerufen.
Ansonsten würde ich ebenso
http://de.selfhtml.org/index.htm empfehlen und von "Clicky-Bunty"-Internetseiten massiv abraten.
Der Grund dafür ist, das fehlerhafter Quelltext, welcher oft von diesen Seiten erzeugt wird, nur dazu führt, dass er auf vers. Browsern nicht korrekt dargestellt werden kann und dies mit der Zeit auch nicht besser wird.
Man lernt HTML / CSS sicherlich nicht in 30min geschweige denn innerhalb eines Tages, wenn man dies ganz neu lernt, aber je nachdem wieviel Zeit man hat kann man dies schon nach 2-3 Tagen weitesgehend verinnerlicht haben und kennt sich damit dann auch sehr gut mit HTML / CSS aus.
