HTMLWiki.de: Homepage in 15 Minuten
< HTMLWiki.de >
HTML lernen • Beispiele • Tutorials • KI
Menü

[ START ] [ TUTORIAL ] [ HTML ] [ CSS ] [ KI ] [ SPIELWIESE ] [ SITEMAP ]

Homepage in 15 Minuten

vom von

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.