HTMLWiki.de: Erste HTML-Seite
< HTMLWiki.de >
HTML lernen • Beispiele • Tutorials • KI
Menü

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

Deine erste HTML-Seite

vom von

In den nächsten zehn Minuten baust du eine Webseite. Eine echte, die in deinem Browser läuft. Sie wird nicht schön (dafür ist später CSS zuständig), aber sie gehört ganz dir. Los gehts.

Schritt 1: Einen Ordner und eine Datei anlegen

Leg irgendwo einen neuen Ordner an, nenn ihn zum Beispiel meine-homepage. Öffne dann einen Texteditor. Unter Windows tut es der vorinstallierte Editor (Notepad), auf dem Mac TextEdit (dort im Menü auf "Reinen Text" umstellen), unter Linux sowieso jeder. Wichtig ist nur: ein Texteditor, kein Word. Textverarbeitungen speichern Formatierungen mit ab und die haben in einer HTML-Datei nichts verloren.

Schritt 2: Das Grundgerüst eintippen

Tipp (oder kopiere) folgendes in die leere Datei:

index.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Meine erste Webseite</title>
</head>
<body>
    <h1>Hallo Welt!</h1>
    <p>Das ist meine erste eigene HTML-Seite.</p>
</body>
</html>

Was die einzelnen Zeilen bedeuten, erklärt die Seite zum HTML-Grundgerüst im Detail. Fürs Erste reicht: oben im head stehen Infos über die Seite, im body steht was angezeigt wird.

Schritt 3: Speichern, und zwar richtig

Speichere die Datei in deinem Ordner unter dem Namen index.html. Die Endung ist entscheidend: .html, nicht .txt. Falls dein Editor beim Speichern eine Kodierung anbietet wähle UTF-8, dann klappen auch die Umlaute. Der Name index.html ist übrigens Konvention: so heißt traditionell die Startdatei eines Webprojekts.

Schritt 4: Im Browser öffnen

Doppelklick auf die Datei, und dein Browser zeigt deine Seite an. Da steht jetzt "Hallo Welt!" in dickenn Buchstaben und darunter dein Absatz. Glückwunsch, du hast eine Webseite gebaut. Sie liegt zwar nur auf deinem Rechner und nicht im Internet, aber der Code ist exakt derselbe.

Schritt 5: Jetzt wird gebastelt

Der eigentliche Spaß beginnt beim Verändern. Bearbeite die Datei im Editor, speichere und drück im Browser auf Neu laden. Probier zum Beispiel:

  • Eine zweite Überschrift mit <h2> und noch einen Absatz. Wie die Ebenen funktionieren steht bei den Überschriften.
  • Ein Wort fett machen mit <strong>, eins betonen mit <em>, siehe Absätze und Text.
  • Einen Link zu deiner Lieblingsseite: <a href="https://www.htmlwiki.de/">Zum HTMLWiki</a>
  • Eine Liste deiner Hobbys mit <ul> und <li>.

Etwas kaputt? Wunderbar, dann lernst du gerade. Häufigste Ursachen: ein schließendes Tag vergessen oder Anführungszeichen nicht zugemacht. Im Zweifel wirf den Code in den Validator, der zeigt dir die Stelle.

Wie geht es weiter?

Zurück zur Tutorial-Übersicht, dort wartet als nächstes die Homepage in 15 Minuten. Oder du experimentierst erst noch ein bisschen in der Spielwiese, da kannst du HTML direkt im Browser verändern ohne Dateien anzufassen.