superhtml
Tutorial

Homepage selber bauen

Von der ersten HTML-Datei bis zum fertigen Webauftritt – der Einsteiger-Leitfaden fuer Ihre eigene Website.

Einfuehrung

Warum HTML lernen – lohnt sich das noch?

Wer heute eine eigene Homepage erstellen moechte, steht vor der Wahl: Einen Homepage-Baukasten wie Wix oder Jimdo nutzen – oder die Website selbst mit HTML und CSS programmieren. Beide Wege haben ihre Berechtigung, und die richtige Entscheidung haengt von Ihren Zielen ab.

Homepage-Baukasten Selbst programmieren
Tempo Schneller Start per Drag & Drop Laengere Lernkurve, dafuer volles Verstaendnis
Kontrolle Eingeschraenkt durch Templates Volle Kontrolle ueber jedes Detail
Kosten Abo-Modell (10–20 €/Monat) Domain + Hosting (ab 3 €/Monat)
Lerneffekt Gering Hoch – uebertragbares Wissen
Flexibilitaet Template-gebunden Grenzenlos anpassbar

Wenn Sie volle Kontrolle ueber Ihre Website haben moechten, keine laufenden Abo-Kosten zahlen wollen und nebenbei eine gefragte Faehigkeit erlernen – dann ist dieses Tutorial genau das Richtige. In den folgenden Schritten bauen wir gemeinsam eine komplette Website mit HTML und CSS auf.

Vorbereitung

Was Sie fuer dieses Tutorial brauchen

Fuer den Einstieg brauchen Sie nicht viel. Drei Dinge genuegen:

  1. Einen HTML-Editor – Wir empfehlen Visual Studio Code (kostenlos, fuer Windows, Mac und Linux). Er bietet Syntax-Highlighting, automatische Vervollstaendigung und eine Live-Vorschau. Kostenlose HTML-Editoren zum Download finden Sie hier.
  2. Einen Webbrowser – Chrome, Firefox oder Edge – mindestens einer davon ist bereits auf Ihrem Computer installiert.
  3. Grundlegende PC-Kenntnisse – Sie sollten wissen, wie man Dateien anlegt, speichert und in einem Ordner findet.
Schritt 1

Was ist HTML?

HTML steht fuer Hypertext Markup Language und ist die Sprache, in der alle Webseiten geschrieben sind. Wenn Sie eine Website in Ihrem Browser oeffnen, laedt der Browser eine HTML-Datei und stellt deren Inhalt dar.

Wichtig zu verstehen: HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. Das bedeutet: Mit HTML beschreiben Sie die Struktur einer Seite – wo stehen Ueberschriften, wo Absaetze, wo Bilder und Links. Das Aussehen (Farben, Schriftarten, Abstaende) uebernimmt spaeter CSS.

Stellen Sie sich HTML als das Skelett einer Webseite vor: Es bestimmt den Aufbau, nicht die Optik.

HTML existiert seit 1991 und wird stetig weiterentwickelt. Der aktuelle Standard heisst HTML5 und wird vom W3C (World Wide Web Consortium) gepflegt. HTML5 brachte viele nuetzliche Neuerungen wie semantische Elemente (<header>, <nav>, <article>) und native Unterstuetzung fuer Audio und Video.

Im Kern besteht HTML aus sogenannten Tags – Markierungen, die den Inhalt umschliessen:

beispiel.html 
<h1>Das ist eine Ueberschrift</h1>
<p>Das ist ein Absatz mit Text.</p>

Der Browser liest diese Tags und weiss dadurch: „Der Text zwischen <h1> und </h1> ist eine Ueberschrift, der Text zwischen <p> und </p> ein Absatz.“

Schritt 2

Was ist CSS?

CSS steht fuer Cascading Style Sheets und ist die Sprache, die das Aussehen Ihrer Website steuert. Waehrend HTML die Struktur vorgibt, kuemmert sich CSS um Farben, Schriftarten, Abstaende, Hintergruende und das gesamte Layout.

Wenn HTML das Skelett einer Webseite ist, dann ist CSS die Kleidung: Es bestimmt, wie die Inhalte praesentiert werden.

Durch die Trennung von Inhalt (HTML) und Design (CSS) koennen Sie das Aussehen Ihrer gesamten Website an einer einzigen Stelle aendern – ohne jede HTML-Datei einzeln anfassen zu muessen. Ausserdem laesst sich mit CSS steuern, wie Ihre Seite auf verschiedenen Geraeten aussieht: auf einem grossen Desktop-Bildschirm anders als auf einem Smartphone.

In diesem Tutorial lernen Sie CSS ab Schritt 6 kennen. Zuerst konzentrieren wir uns auf das HTML-Grundgeruest.

Schritt 3

Die erste HTML-Datei anlegen

Jetzt geht es los. Oeffnen Sie Ihren HTML-Editor (z.B. Visual Studio Code) und erstellen Sie eine neue Datei. Speichern Sie sie unter dem Namen index.html in einem neuen Ordner – z.B. meine-website.

Tippen Sie folgenden Code in die Datei:

index.html 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine erste Website</title>
</head>
<body>

  <h1>Hallo Welt!</h1>
  <p>Das ist meine erste selbst gebaute Website.</p>

</body>
</html>

Speichern Sie die Datei und oeffnen Sie sie anschliessend in Ihrem Browser (Doppelklick auf die Datei oder per Drag & Drop ins Browser-Fenster). Sie sehen nun Ihre erste eigene Webseite.

Schauen wir uns die einzelnen Bestandteile genauer an:

  • <!DOCTYPE html> – Sagt dem Browser: „Dies ist ein HTML5-Dokument.“
  • <html lang="de"> – Das Wurzel-Element. Das Attribut lang="de" gibt an, dass die Seite auf Deutsch ist.
  • <head> – Der Kopfbereich. Hier stehen Meta-Informationen, die nicht direkt auf der Seite sichtbar sind.
  • <meta charset="UTF-8"> – Stellt sicher, dass Umlaute (ae, oe, ue) und Sonderzeichen korrekt angezeigt werden.
  • <meta name="viewport" ...> – Sorgt dafuer, dass die Seite auf Smartphones korrekt skaliert.
  • <title> – Der Seitentitel, der im Browser-Tab und in Google-Suchergebnissen erscheint.
  • <body> – Hier steht alles, was auf der Seite sichtbar ist.
Schritt 4

Die Seite mit Inhalten fuellen

Mit dem Grundgeruest aus Schritt 3 als Basis koennen Sie jetzt die wichtigsten HTML-Elemente kennenlernen. Alles Folgende wird zwischen <body> und </body> eingefuegt.

Ueberschriften

HTML kennt sechs Ueberschriften-Stufen, von <h1> (wichtigste) bis <h6> (unwichtigste). Verwenden Sie <h1> nur einmal pro Seite – das ist der Haupttitel.

index.html 
<h1>Mein Portfolio</h1>
<h2>Ueber mich</h2>
<h3>Meine Erfahrung</h3>

Absaetze und Textformatierung

Fliesstext schreiben Sie in <p>-Tags. Fuer Hervorhebungen gibt es <strong> (fett) und <em> (betont).

index.html 
<p>Willkommen auf meiner Website! Hier stelle ich
meine <strong>Projekte</strong> und <em>Erfahrungen</em> vor.</p>

Listen

Fuer Aufzaehlungen verwenden Sie <ul> (ungeordnete Liste mit Aufzaehlungszeichen) oder <ol> (nummerierte Liste). Jeder Listenpunkt steht in einem <li>-Tag.

index.html 
<h2>Meine Faehigkeiten</h2>
<ul>
  <li>HTML & CSS</li>
  <li>Webdesign</li>
  <li>Fotografie</li>
</ul>

Probieren Sie die Elemente gleich in Ihrer index.html aus. Speichern Sie die Datei und laden Sie den Browser neu (F5 oder Strg+R), um die Aenderungen zu sehen.

Schritt 5

Links und Bilder einbauen

Hyperlinks

Links sind das Herztueck des Webs – das „Hypertext“ in HTML. Mit dem <a>-Tag erstellen Sie Verlinkungen:

index.html 
<!-- Link zu einer anderen Seite im selben Ordner -->
<a href="ueber-mich.html">Ueber mich</a>

<!-- Link zu einer externen Website -->
<a href="https://example.com" target="_blank">Beispiel-Website</a>

Das Attribut href gibt das Linkziel an. Bei externen Links oeffnet target="_blank" die Seite in einem neuen Tab.

Bilder

Bilder fuegen Sie mit dem <img>-Tag ein. Dieses Tag ist eines der wenigen ohne schliessendes Tag:

index.html 
<img src="bilder/foto.jpg" alt="Mein Profilbild">
  • src – Der Pfad zur Bilddatei. Legen Sie einen Ordner bilder in Ihrem Projektordner an und speichern Sie Bilder dort.
  • alt – Ein Alternativtext, der das Bild beschreibt. Wichtig fuer Barrierefreiheit (Screenreader) und SEO.

Unterstuetzte Bildformate sind JPEG (fuer Fotos), PNG (fuer Grafiken mit Transparenz), WebP (modernes Format, kleine Dateigroesse) und SVG (fuer Vektorgrafiken wie Logos).

Schritt 6

Design mit CSS gestalten

Bisher sieht Ihre Website noch recht kahl aus – schwarzer Text auf weissem Hintergrund, Standard-Schriftart. Zeit fuer CSS.

CSS-Datei anlegen

Erstellen Sie im Projektordner eine neue Datei namens style.css. Verknuepfen Sie sie im <head> Ihrer HTML-Datei:

index.html – im <head> 
<link rel="stylesheet" href="style.css">

Grundlegende CSS-Eigenschaften

In der style.css koennen Sie nun das Aussehen Ihrer Seite bestimmen:

style.css 
/* Allgemeine Einstellungen */
body {
  font-family: Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: #333333;
  background-color: #f5f5f5;
  margin: 0;
  padding: 20px;
}

/* Ueberschriften */
h1 {
  color: #1a1a2e;
  font-size: 2rem;
}

/* Links */
a {
  color: #5B21B6;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

CSS-Selektoren verstehen

CSS-Regeln bestehen aus einem Selektor (was gestaltet wird) und Eigenschaften (wie es gestaltet wird). Es gibt drei Grundtypen:

  • Element-Selektor – Zielt auf alle Elemente dieses Typs: h1 { ... }
  • Klassen-Selektor – Zielt auf Elemente mit einer bestimmten Klasse: .highlight { ... } (im HTML: <p class="highlight">)
  • ID-Selektor – Zielt auf ein einzelnes Element: #navigation { ... } (im HTML: <nav id="navigation">)

Klassen sind am flexibelsten, weil Sie sie beliebig oft wiederverwenden koennen. IDs sollten pro Seite nur einmal vorkommen.

Schritt 7

Mehrere Seiten verknuepfen

Eine richtige Website besteht meist aus mehreren Seiten. So koennte Ihr Projektordner aussehen:

Ordnerstruktur 
meine-website/
  index.html
  ueber-mich.html
  kontakt.html
  style.css
  bilder/
    foto.jpg
    logo.png

Damit Besucher zwischen den Seiten navigieren koennen, bauen Sie eine Navigation ein. Dafuer nutzen wir die HTML5-Elemente <nav> und eine ungeordnete Liste:

index.html – Navigation 
<nav>
  <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="ueber-mich.html">Ueber mich</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>
</nav>

Fuegen Sie diese Navigation in jede Ihrer HTML-Dateien ein – am besten direkt nach dem oeffnenden <body>-Tag. Verlinken Sie in allen Dateien dieselbe style.css, damit das Design ueberall einheitlich ist.

Schritt 8

Responsive Design fuer Smartphones

Mehr als die Haelfte aller Website-Besuche kommt heute von Smartphones. Ihre Website muss daher auf kleinen Bildschirmen genauso gut funktionieren wie auf dem Desktop.

Die gute Nachricht: Wenn Sie das <meta name="viewport" ...>-Tag aus Schritt 3 verwenden, haben Sie die Grundlage bereits gelegt. Damit weiss der mobile Browser, dass er die Seite nicht verkleinern soll.

Media Queries

Fuer gezielte Anpassungen auf verschiedenen Bildschirmgroessen nutzen Sie Media Queries in Ihrer CSS-Datei:

style.css – Responsive 
/* Grundlayout fuer alle Geraete */
body {
  padding: 16px;
  font-size: 16px;
}

nav ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Ab 600px Bildschirmbreite (Tablet/Desktop) */
@media (min-width: 600px) {
  body {
    padding: 40px;
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto;
  }

  nav ul {
    flex-direction: row;
  }
}

Der Ansatz heisst Mobile First: Sie gestalten zuerst fuer kleine Bildschirme und erweitern dann per @media (min-width: ...) fuer groessere.

Schritt 9

Website veroeffentlichen

Ihre Website existiert bisher nur lokal auf Ihrem Computer. Um sie fuer andere sichtbar zu machen, brauchen Sie zwei Dinge:

1. Eine Domain

Die Domain ist die Adresse Ihrer Website (z.B. mein-name.de). Sie registrieren eine Domain bei einem Hosting-Anbieter – typische Kosten liegen bei 1–2 € pro Monat fuer eine .de-Domain.

2. Webhosting

Webhosting ist der Speicherplatz im Internet, auf dem Ihre Dateien liegen. Fuer einfache HTML-Seiten reicht guenstiges Shared Hosting ab 2–3 € pro Monat voellig aus. Viele Anbieter (Strato, IONOS, All-Inkl.) bieten Einsteiger-Pakete, die Domain und Hosting kombinieren.

3. Dateien hochladen

Nachdem Sie Domain und Hosting eingerichtet haben, laden Sie Ihre HTML-, CSS- und Bilddateien auf den Server hoch. Das geht entweder per FTP-Programm (z.B. FileZilla – kostenlos) oder ueber den Dateimanager in der Verwaltungsoberflaeche Ihres Hosters.

Ausblick

Wie geht es weiter?

Herzlichen Glueckwunsch – Sie haben die Grundlagen geschafft! Mit HTML und CSS koennen Sie bereits komplette, ansprechende Websites erstellen. Hier einige Ideen fuer Ihre naechsten Schritte:

  • CSS vertiefen – Lernen Sie Flexbox und CSS Grid fuer komplexere Layouts. Damit koennen Sie mehrspaltige Designs und flexible Raster erstellen.
  • JavaScript-Grundlagen – Mit JavaScript machen Sie Ihre Website interaktiv: Menue-Animationen, Formulare validieren oder Inhalte dynamisch nachladen.
  • Weitere Editoren ausprobieren – Je nach Arbeitsweise passt vielleicht ein anderer Editor besser. Vergleichen Sie die besten HTML-Editoren in unserer Bestenliste.
  • Frameworks kennenlernen – Wenn die Grundlagen sitzen, lohnt sich ein Blick auf Frameworks wie Bootstrap oder Tailwind CSS, die Ihnen vorgefertigte Komponenten liefern.

Auf unserer Ressourcen-Seite finden Sie weiterfuehrende Links, Dokumentationen und nuetzliche Tools fuer Webentwickler.

Haeufige Fragen

Kann man eine Homepage wirklich selber bauen?

Ja, mit HTML und CSS koennen Sie eine eigene Homepage komplett selbst erstellen. Die Grundlagen lernen Sie in wenigen Stunden – wie dieses Tutorial zeigt. Sie brauchen lediglich einen kostenlosen HTML-Editor wie Visual Studio Code, einen Webbrowser und etwas Geduld. Fuer einfache Websites (Portfolio, Vereinsseite, persoenlicher Blog) reichen HTML und CSS voellig aus.

Muss man HTML lernen, um eine Website zu erstellen?

Nicht unbedingt. Mit Homepage-Baukaesten wie Wix, Jimdo oder Squarespace koennen Sie auch ohne Programmierkenntnisse eine Website erstellen. Allerdings sind Sie dabei an Templates und die Funktionen des Baukastens gebunden. Wer volle Kontrolle ueber Design und Funktionalitaet haben moechte, kommt an HTML und CSS nicht vorbei. Ausserdem helfen HTML-Kenntnisse beim Arbeiten mit Content-Management-Systemen wie WordPress.

Wie lange dauert es, HTML zu lernen?

Die absoluten Grundlagen (HTML-Grundgeruest, Texte, Bilder, Links) lassen sich in wenigen Stunden erlernen. Fuer ein solides Verstaendnis inklusive CSS-Styling sollten Sie einige Wochen einplanen, wenn Sie regelmaessig ueben. Professionelles Webdesign mit responsiven Layouts, Animationen und fortgeschrittenen Techniken erfordert mehrere Monate Praxis.

Was kostet es, eine eigene Homepage zu erstellen?

Wenn Sie HTML und CSS selbst schreiben, sind die Kosten minimal: Ein HTML-Editor wie Visual Studio Code ist kostenlos. Fuer die Veroeffentlichung brauchen Sie eine Domain (ab ca. 1 €/Monat) und Webhosting (ab ca. 2–3 €/Monat). Insgesamt also 3–5 € pro Monat – deutlich guenstiger als ein Homepage-Baukasten-Abo, das schnell 10–20 € pro Monat kosten kann. Kostenlose Editoren finden Sie hier.

Welchen HTML-Editor soll ich als Anfaenger verwenden?

Fuer Einsteiger empfehlen wir Visual Studio Code: Er ist kostenlos, laeuft auf Windows, Mac und Linux, hat eine riesige Community und bietet nuetzliche Funktionen wie Syntax-Highlighting, automatische Vervollstaendigung und ein integriertes Terminal. Alternativen sind Notepad++ (leichtgewichtig, Windows) oder Sublime Text (ultraschnell, kostenpflichtig). Alle Editoren im Vergleich finden Sie in unserer Bestenliste.

Was ist besser: Homepage-Baukasten oder selber programmieren?

Das haengt von Ihren Zielen ab. Ein Baukasten ist ideal, wenn Sie schnell eine einfache Seite brauchen und kein technisches Interesse haben. Selber programmieren lohnt sich, wenn Sie volle Kontrolle, keine laufenden Abo-Kosten und ein tiefes Verstaendnis fuer Webtechnologien wollen. Einen detaillierten Vergleich finden Sie am Anfang dieses Tutorials.

Braucht man 2026 noch einen HTML-Editor?

Ja, auf jeden Fall. Auch mit KI-Tools und modernen Frameworks bleibt HTML die Grundlage jeder Website. Ein guter HTML-Editor mit Syntax-Highlighting, automatischer Vervollstaendigung und Live-Vorschau macht das Arbeiten deutlich produktiver – egal ob Sie Anfaenger oder Profi sind. Die besten HTML-Editoren im Vergleich.

Ist HTML eine Programmiersprache?

Nein, HTML (Hypertext Markup Language) ist eine Auszeichnungssprache. Sie beschreibt die Struktur einer Webseite – also wo Ueberschriften, Absaetze, Bilder und Links stehen. Programmiersprachen wie JavaScript koennen hingegen Logik ausfuehren, Berechnungen durchfuehren und auf Nutzereingaben reagieren. HTML und JavaScript arbeiten im Web zusammen, sind aber grundlegend verschieden.