Erste Webseite mit HTML und CSS: Editor, Struktur und Veröffentlichung

Eine eigene Webseite zu bauen ist leichter, als viele denken. HTML und CSS sind Textdateien, die du mit jedem Editor schreiben und im Browser testen kannst.

Hier erfährst du Schritt für Schritt, wie du die erste Seite erstellst, gestaltest und veröffentlichst.

Was HTML und CSS leisten

Jede Webseite besteht aus drei Teilen: HTML liefert die Struktur und den Inhalt, CSS bestimmt das Aussehen und JavaScript sorgt für Interaktion. Für eine erste einfache Seite brauchst du nur HTML und CSS, beides sind Textdateien, die du mit jedem Editor schreiben kannst. Du brauchst weder Server noch Vorkenntnisse. Wer die Grundlagen versteht, kann Baukästen besser nutzen, Fehler auf der eigenen Seite finden und Anpassungen selbst machen. Der Einstieg dauert einen Nachmittag und lohnt sich für jeden, der online etwas veröffentlichen möchte.

• Dieser Beitrag führt dich durch den Editor, das erste HTML-Dokument, die Gestaltung mit CSS, mehrere Seiten, Bilder, Mobilansicht und die Veröffentlichung.

Wenn du neu bist, dann starte mit einer Seite und einer CSS-Datei. Wenn sie läuft, dann baue weitere Seiten.

Der richtige Editor

Für den Anfang genügt der Windows-Editor, bequemer ist ein Code-Editor mit Farbhervorhebung und Autovervollständigung. Es gibt kostenlose Programme dafür. Lade sie nur von der Seite des Herstellers, wie in Programme sicher herunterladen beschrieben. Stelle die Dateiendungen im Explorer sichtbar, damit aus index.html nicht versehentlich index.html.txt wird, die Einstellung erklärt Dateiendungen in Windows 11 anzeigen. Speichere immer im Format UTF-8, damit Umlaute richtig erscheinen.

• Code-Editor nutzen
• Dateiendungen anzeigen
• UTF-8 speichern
• Offizielle Quelle

Wenn Umlaute falsch erscheinen, dann speichere als UTF-8. Wenn es bleibt, dann prüfe die Meta-Angabe im Kopf.

Das erste HTML-Dokument

Lege auf dem Desktop einen Ordner "meineseite" an und darin eine Datei mit dem Namen index.html. Öffne sie im Editor und füge folgenden Inhalt ein:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Meine erste Seite</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header><h1>Meine erste Seite</h1></header>
  <main>
    <p>Hallo Welt, das ist mein Anfang.</p>
    <p><a href="kontakt.html">Zur Kontaktseite</a></p>
  </main>
</body>
</html>

Jeder Teil hat eine Aufgabe. Die erste Zeile sagt dem Browser, dass es sich um HTML handelt. Das Attribut lang gibt die Sprache an, was für Screenreader und Suchmaschinen wichtig ist. Im Kopfbereich (head) stehen Zeichensatz, Anpassung an Handys, der Titel im Browser-Tab und der Verweis auf das Stylesheet. Im Körper (body) steht der sichtbare Inhalt. Mit h1 markierst du die Hauptüberschrift, mit p einen Absatz und mit a einen Link. Speichere die Datei und öffne sie per Doppelklick im Browser.

Wichtig: Dateinamen schreibst du klein, ohne Leerzeichen und Umlaute, damit sie später auf jedem Server funktionieren. Die Startseite einer Website heißt immer index.html.

Wenn das Design nicht greift, dann prüfe den Pfad der CSS-Datei. Wenn er stimmt, dann leere den Browser-Cache.

Gestaltung mit CSS

Mit CSS bestimmst du Schrift, Farben und Abstände. Lege im selben Ordner eine zweite Datei style.css an:

body {
  font-family: system-ui, sans-serif;
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
  line-height: 1.6;
  color: #222;
}

h1 {
  color: #0b5cad;
}

a {
  color: #0b5cad;
}

Jede Regel besteht aus einem Auswahlbereich, hier body, h1 und a, und Angaben in geschweiften Klammern. Die Angabe max-width begrenzt die Textbreite auf eine gut lesbare Zeilenlänge, margin zentriert den Inhalt und line-height sorgt für Luft zwischen den Zeilen. Lade die Seite im Browser neu, um das Ergebnis zu sehen. Ändere einzelne Werte und beobachte, was passiert. So lernst du am schnellsten.

Wenn du veröffentlichen willst, dann brauchst du Webspace. Wenn die Seite öffentlich ist, dann ergänze Impressum und Datenschutz.

Mehrere Seiten und Navigation

Eine Website besteht meist aus mehreren Dateien, etwa index.html, ueber-mich.html und kontakt.html. Verlinke sie untereinander mit relativen Pfaden wie href="kontakt.html". Ein Menü besteht schlicht aus einer Liste von Links, die du mit CSS nebeneinander anordnest. Halte die Namen kurz und beschreibend, denn sie erscheinen in der Adresse. Lege für Bilder einen Ordner bilder an und verlinke Dateien relativ, damit alles auch nach dem Hochladen auf den Server funktioniert.

• Relative Pfade
• Einfaches Menü
• Kurze Dateinamen
• Ordner für Bilder

Wenn du mehr willst, dann lerne Layout mit Flexbox. Wenn du Interaktion brauchst, dann folgt JavaScript.

Bilder einbinden

Bilder bereitest du in passender Größe vor, siehe JPG, PNG, WebP, HEIC, AVIF. Jedes Bild braucht einen Alternativtext, der den Inhalt beschreibt. Verkleinere große Fotos, damit die Seite schnell lädt.

• Passende Größe
• Alternativtext
• Dateigröße klein
• Format wählen

Mobile Ansicht

Der Viewport-Eintrag im Kopf sorgt dafür, dass die Seite auf dem Handy richtig skaliert. Teste die Seite in den Entwicklerwerkzeugen mit der Geräteansicht und lass Inhalte untereinander laufen, statt sie nebeneinander zu quetschen.

• Viewport setzen
• Geräteansicht testen
• Einspaltig starten
• Schrift lesbar

Seite veröffentlichen

Zum Veröffentlichen brauchst du Webspace und eine Adresse, wie in Eigene Website erstellen beschrieben. Lade die Dateien per FTP in das Verzeichnis, das der Anbieter nennt. Prüfe danach jede Seite im Browser und den Pfad der Bilder.

• Webspace wählen
• Per FTP hochladen
• Seiten prüfen
• Adresse testen

Pflichtseiten nicht vergessen

Sobald die Seite öffentlich ist und nicht rein privat, brauchst du je nach Zweck Impressum und Datenschutzerklärung. Informiere dich vor der Veröffentlichung und lege die Seiten gleich mit an.

• Impressum prüfen
• Datenschutz klären
• Kontakt angeben
• Texte aktuell halten

Dateien sichern

Deine Seite besteht aus wenigen Dateien, die du leicht sichern kannst. Lege Kopien nach der Backup-Strategie aus Backup-Strategie für den PC ab und führe bei Änderungen Versionen mit Datum.

• Ordner kopieren
• Versionen führen
• Zweiter Speicherort
• Vor Änderungen sichern

Saubere Struktur wählen

Verwende Überschriften in sinnvoller Reihenfolge, Listen für Aufzählungen und Absätze für Fließtext. Eine saubere Struktur hilft Screenreadern, Suchmaschinen und dir selbst bei der Pflege.

• Eine h1 je Seite
• Überschriften ordnen
• Listen nutzen
• Links beschreiben

Fehler finden

Die Entwicklerwerkzeuge zeigen Fehler in Dateien und Pfaden. Ein fehlendes Bild oder eine nicht geladene CSS-Datei fällt dort sofort auf. Prüfe außerdem Groß- und Kleinschreibung in Dateinamen.

• F12 nutzen
• Pfade prüfen
• Schreibweise beachten
• Cache leeren

Wie es weitergeht

Wenn die Grundlagen sitzen, lohnen Flexbox und Grid für Layouts, danach etwas JavaScript. Baue kleine Projekte nach, etwa eine Visitenkarte oder eine Vereinsseite.

• Flexbox lernen
• Grid lernen
• JavaScript später
• Projekte bauen

Barrierefreiheit von Anfang an

Achte auf ausreichenden Kontrast, Alternativtexte und eine Bedienung per Tastatur. Das kostet kaum Aufwand und hilft allen Besuchern.

• Kontrast prüfen
• Alternativtexte
• Tastatur testen
• Klare Sprache

Was dieser Einstieg nicht leistet

• Dieser Beitrag ersetzt keinen vollständigen Kurs.
• Er behandelt kein JavaScript im Detail.
• Er zeigt keine Frameworks oder Baukästen.
• Er nimmt keine rechtliche Beratung vor.

Wenn es nicht klappt: typische Stolperfallen

Die Seite zeigt nur Text ohne Gestaltung

Das siehst du: Der Browser zeigt den Inhalt ohne Farben und Schriften.

Mögliche Ursache: Die CSS-Datei wird nicht geladen, der Pfad ist falsch oder der Dateiname weicht ab.

So löst du es: Prüfe den Dateinamen und den Pfad im link-Element, achte auf Groß- und Kleinschreibung, lege beide Dateien im selben Ordner ab und lade die Seite mit Strg und F5 neu, um den Cache zu umgehen.

Umlaute werden falsch dargestellt

Das siehst du: Statt Ä, Ö und Ü erscheinen seltsame Zeichen.

Mögliche Ursache: Die Datei ist nicht als UTF-8 gespeichert oder die Zeichensatz-Angabe fehlt.

So löst du es: Speichere die Datei im Editor als UTF-8, ergänze im Kopf die Angabe meta charset utf-8 und lade die Seite neu. Prüfe außerdem, ob der Server den Zeichensatz überschreibt.

Der Link führt ins Leere

Das siehst du: Ein Klick auf den Link zeigt eine Fehlerseite.

Mögliche Ursache: Der Dateiname im Link stimmt nicht oder der Pfad ist falsch.

So löst du es: Vergleiche Schreibweise und Ordner, nutze relative Pfade, achte auf Groß- und Kleinschreibung, denn Server unterscheiden sie, und teste alle Links nach dem Hochladen noch einmal.

Das Bild erscheint nicht

Das siehst du: Statt des Bildes ist ein leeres Feld oder das Alternativtext-Symbol zu sehen.

Mögliche Ursache: Der Pfad zum Bild ist falsch oder die Datei wurde nicht hochgeladen.

So löst du es: Prüfe Ordner und Dateiendung, achte auf Groß- und Kleinschreibung, lade das Bild ebenfalls auf den Server und teste den Pfad in den Entwicklerwerkzeugen unter Netzwerk.

Auf dem Handy ist alles winzig

Das siehst du: Die Seite wirkt auf dem Smartphone wie eine verkleinerte Desktop-Seite.

Mögliche Ursache: Der Viewport-Eintrag fehlt oder Breiten sind fest in Pixeln vorgegeben.

So löst du es: Ergänze die Viewport-Angabe im Kopf, nutze relative Einheiten und eine maximale Breite statt fester Werte und teste die Seite in der Geräteansicht der Entwicklerwerkzeuge.

Häufige Fragen

Brauche ich Vorkenntnisse?

Nein, für eine einfache Seite genügen ein Editor und ein Browser.

Welcher Editor ist gut?

Ein Code-Editor mit Farbhervorhebung. Notepad reicht für den Anfang.

Was ist der Unterschied zwischen HTML und CSS?

HTML liefert den Inhalt, CSS das Aussehen.

Wie veröffentliche ich die Seite?

Mit Webspace und FTP oder über den Upload deines Anbieters.

Brauche ich ein Impressum?

Bei nicht rein privaten Seiten in der Regel ja. Informiere dich vorher.