realwebmaster.net - die Homepage Hilfe mit Webmaster Forum
Homepage » Homepage erstellen » Eine einfache Homepage mit XHTML und CSS
Eine einfache Homepage mit XHTML und CSS
Homepage mit XHTML und CSS erstellen
Hier erfährst du, wie du eine einfache Homepage mit (X)HTML und CSS erstellst. Solltest du noch nie eine Homepage mit HTML erstellt haben, schaue dir am besten zuerst das HTML-Tutorial an. XHTML (Extensible Hypertext Markup Language) unterscheidet sich zwar ein wenig von HTML, jedoch reicht es, wenn du schon einmal HTML verwendet hast. Wenn du es genauer wissen willst, schaue z.B. bei Wikipedia vorbei.
In diesem Tutorial nutzen wir CSS um zu bestimmen, wie die Seite aussehen soll. Nähere Informationen zu CSS (Cascading Style Sheets) erhältst du auch bei Wikipedia.
Du solltest für dieses Tutorial einen aktuellen Browser verwenden, da manche CSS-Eigenschaften wie "position:fixed" beim Internet Explorer 6 und älter nicht funktionieren.
Die fertige Seite kannst du dir hier als ZIP-Datei herunterladen, um schon einmal zu sehen, wie es später aussehen sollte.
Erstelle als erstes die benötigten Dateien. Das ist die index.html und style.css, dann kann es losgehen. Öffne nun die index.html.
HTML
Nun öffne die index.html in einem Editor deiner Wahl und erstelle darin das HTML Grundgerüst
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>Eine einfache Homepage mit HTML und CSS</title>
</head>
<body>
</body>
</html>
Den Titel habe ich bereits mit "Eine einfache Homepage mit HTML und CSS" festgelegt, diesen kannst du natürlich gerne anpassen.
Jetzt teilen wir die Homepage mit DIV-Containern in verschiedene Teile ein, die später über die externe CSS-Datei gesteuert werden.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>Eine einfache Homepage mit HTML und CSS</title>
</head>
<body>
<div id="kopf">
</div>
<div id="navigation">
</div>
<div id="inhalt">
</div>
<div id="fuss">
</div>
</body>
</html>
Ich habe für jeden DIV-Container eine eigene ID festgelegt, um sie getrennt zu steuern.
Jetzt kommt der Inhalt dazu
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" >
<head>
<title>Eine einfache Homepage mit HTML und CSS</title>
</head>
<body>
<div id="kopf">
<h1>Mein Seitenname</h1>
</div>
<div id="navigation">
Navigation: Startseite - Seite 1 - Seite 2
</div>
<div id="inhalt">
<h2>Meine Überschrift</h2>
<p>
Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text,
Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text,
Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text.
</p>
<p>
Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text,
Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text,
Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text, Mein Beispiel-Text,
Mein Beispiel-Text.
</p>
</div>
<div id="fuss">
<p>Copyright by <a href="http://www.realwebmaster.net">realwebmaster.net</a></p>
</div>
</body>
</html>
Jetzt binden wir die bisher noch leere CSS-Datei im Head ein:
<head>
<title>Eine einfache Homepage mit HTML und CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Du kannst die index.html jetzt schon einmal im Browser betrachten. Auch empfiehlt es sich gelegentlich während man an der CSS-Datei arbeitet, einmal einen Blick auf das Ergebnis zu werfen.
CSS
Öffne nun die style.css.
Auf die verschiedenen IDs kann man mit der Raute folgendermaßen zugreifen:
#idname {
}
Das legen wir nun für alle IDs in der Datei style.css an:
#kopf {
}
#navigation {
}
#inhalt {
}
#fuss {
}
Jetzt legen wir zuerst fest wie der Kopf der Seite aussehen soll, die Erklärung findest du immer in den Kommentaren zwischen /* */
dahinter:
#kopf {
position:absolute; /* Die Postion des Containers bestimmen wir "absolute" */
top:10px; /* Der Container soll 10 Pixel von oben entfernt sein */
left:30px; /* 30 Pixel von links */
right:30px; /* und 30 Pixel von rechts */
height:100px; /* Höhe des Containers 100px */
padding:10px; /* Der Text im Container hat einen Abstand zum Containerrand von 10 Pixel */
background-color:black; /* Legt die Farbe schwarz für den Hintergrund fest */
color:#CC9900; /* Die Schriftfarbe im Kopf soll weiß sein */
}
Da mir die Überschrift nicht gefällt wird diese direkt darunter angepasst:
/* Ueberschreiben der Formatierung von <h1> */
#kopf h1 {
font-family:Verdana, Geneva, sans-serif; /* Aendern der Schriftart */
margin:0; /* Platz ueber und unter h1 entfernen */
}
Du siehst, wir können das aussehen der Überschrift per CSS anpassen. Genau das geht auch mit Links, Tabellen, Listen und vielen weiteren Dingen.
Hier legen wir fest wie die Navigation aussehen soll:
#navigation {
position:absolute; /* Die Postion des Containers bestimmen wir "absolute" */
top:130px; /* Hier muss man etwas rechnen, damit es direkt unter dem Kopf ist: Also 10 von Top + 100 von height + 2x 10 von padding */
left:30px; /* 30 Pixel von links */
right:30px; /* und 30 Pixel von rechts */
height:20px; /* Höhe des Containers 100px */
padding:10px; /* Der Text im Container hat einen Abstand zum Containerrand von 10 Pixel */
background-color:#CC9900; /* Legt die Farbe schwarz für den Hintergrund fest */
border-left:1px solid black; /* Erstellt auf der linken Seiten einen 1 Pixel breiten Rand */
border-right:1px solid black; /* Das gleiche auch fuer rechts*/
}
Jetzt zum Container für den eigentlichen Inhalt der Seite:
#inhalt {
position:absolute; /* Die Postion des Containers bestimmen wir "absolute" */
top:170px; /* und wieder muss gerechnet werden: 130 von #kopf + 20 von height + 2x 10 von padding*/
left:30px; /* 30 Pixel von links */
right:30px; /* und 30 Pixel von rechts */
padding:10px; /* Der Text im Container hat einen Abstand zum Containerrand von 10 Pixel */
border-left:1px solid black; /* Erstellt auf der linken Seiten einen 1 Pixel breiten Rand */
border-right:1px solid black; /* Das gleiche auch fuer rechts*/
border-bottom:1px solid black; /* Und fuer unten */
}
So, nun kleben wir unser Copyright noch an den unteren Bildschirmrand:
#fuss {
position:fixed; /* Dieses Mal soll sich der Container nicht beim scrollen mitbewegen, sondern immer an der gleichen Stelle bleiben */
left:0; /* Ohne Abstand links */
right:0; /* Auch rechts keinen */
bottom:0; /* Und unten auch nicht*/
height:25px; /* Höhe 25 Pixel */
background-color:#CC9900; /* Hintergrundfarbe festlegen */
text-align:center; /* Textausrichtung zentriert */
border-top:1px solid #CC9900; /* oben drauf noch ein duenner Rand*/
font-family:Verdana, Geneva, sans-serif; /* Aendern der Schriftart */
font-size:8px; /* Dann noch ein bisschen verkleinern */
}
Wenn du die Höhe des Browser-Fensters ziemlich verkleinerst, dass du auf der Seite scrollen kannst, wirst du sehen, dass sich der Balken am unteren Bildschirmrand nicht mitbewegt.
Und fertig ist die erste Seite. Möchtest du nun auch Unterseiten erstellen, kopierst du einfach deine index.html und gibst ihr einen neuen Namen. Dann den Titel, Überschrift und Text anpassen und in der Navigation verlinken.
Solltest du Fehler im Tutorial finden, kannst du mir gerne eine Mail schreiben.