Homepage in 15 Minuten
Du hast deine erste Seite gebaut? Dann legen wir jetzt eine Schippe drauf: eine kleine, komplette Homepage mit Vorstellung, Bild, Linkliste und einem Hauch Farbe. Stell die Eieruhr, es geht los.
Minute 1 bis 5: Die Struktur
index.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kims Homepage</title>
</head>
<body>
<header>
<h1>Willkommen auf Kims Homepage</h1>
</header>
<main>
<h2>Über mich</h2>
<p>Hallo! Ich bin Kim, sammle alte Computer und
lerne gerade HTML. Offensichtlich mit Erfolg.</p>
<h2>Meine Lieblingsseiten</h2>
<ul>
<li><a href="https://www.htmlwiki.de/">HTMLWiki</a></li>
<li><a href="https://validator.w3.org/">Der Validator</a></li>
</ul>
</main>
<footer>
<p>Handgetippt mit einem Texteditor.</p>
</footer>
</body>
</html>Neu gegenüber Teil 1: Wir gliedern mit header, main und footer, benutzen eine Linkliste und zwei h2-Ebenen. Speichern, im Browser öffnen, es steht schonmal alles da.
Minute 6 bis 8: Ein Bild dazu
Leg ein Foto oder eine Grafik in denselben Ordner (zum Beispiel ich.jpg) und ergänze unter "Über mich":
<img src="ich.jpg" alt="Kim vor einem Stapel alter Computer"
width="300" height="200">Die Regeln dazu kennst du von der img-Seite: alt beschreibt das Bild, width und height verhindern Springen beim Ladenn.
Minute 9 bis 14: Farbe ins Spiel
Jetzt kommt CSS dazu, für den Anfang direkt im head als style-Block:
<style>
body {
font-family: Georgia, serif;
max-width: 700px;
margin: 0 auto;
padding: 0 16px;
line-height: 1.6;
}
header { border-bottom: 3px solid #008080; }
h1, h2 { color: #008080; }
footer {
margin-top: 32px;
border-top: 1px solid #C0C0C0;
font-size: 0.9em;
color: #555;
}
</style>Fünf Regeln, großer Effekt: Die Inhaltsspalte zentriert sich per margin: 0 auto (der Trick aus dem Kapitel Abstände), Überschriften bekommen Farbe, der Footer rückt dezent in den Hintergrund. Farbe nicht dein Teal? Auf der Farben-Seite steht wie du jeden beliebigen Wert findest.
Minute 15: Kontrolle
Wirf den Code in den Validator und zieh das Browserfenster mal ganz schmal. Läuft? Glückwunsch, das ist eine echte Homepage. Im nächsten Teil bekommt sie mehrere Unterseiten und ein richtiges Menü: Navigation erstellen.
Die drei häufigsten Stolpersteine in Teil 2
- Das Bild erscheint nicht: In neun von zehn Fällen stimmt der Pfad nicht oder die Groß-/Kleinschreibung weicht ab, ich.jpg ist nicht Ich.JPG. Rechtsklick auf das kaputte Bildsymbol, "in neuem Tab öffnen", und die Fehlermeldung verrät welchen Pfad der Browser wirklich versucht hatt.
- Die Umlaute sind Zeichensalat: Die Datei wurde nicht als UTF-8 gespeichert. Im Editor beim Speichern die Kodierung prüfen, das meta charset allein repariert eine falsch gespeicherte Datei nicht.
- Das CSS wirkt nicht: Der style-Block muss im head stehen und style heißen, nicht css. Und nach jeder Regel gehört ein Semikolon, ein einziges vergessenes kann alle folgenden Regeln lahmlegn.
Aufgabe zum Weiterbauen
Bevor du zu Teil 3 gehst, eine Fingerübung: Ergänze eine zweite h2-Sektion "Meine Projekte" mit einer nummerierten Liste (ol statt ul) und gib den Links in der Linkliste per CSS eine andere Farbe im :hover-Zustand. Beides sind Zweizeiler, beides festigt genau die Handgriffe die gleich beim Menübau gebraucht werden. Musterlösung gibt es keine, der Browser sagt dir ja ob es klapptt.