HTML-Basiskurs – Deine erste eigene Webseite mit HTML5 erstellen

In diesem HTML-Basiskurs lernst du Schritt für Schritt, wie du deine erste eigene Webseite mit HTML5 erstellst – ganz ohne Vorkenntnisse. Du erfährst, wie Webseiten technisch funktionieren, wie HTML-Dokumente aufgebaut sind und wie du Inhalte korrekt strukturierst. Von den absoluten Grundlagen über erste HTML-Elemente bis hin zum Upload auf einen Webserver und der Indexierung bei Google begleitet dich dieser Kurs praxisnah auf dem Weg zur eigenen Homepage.

Inhalt des HTML-Basiskurs:

HTML-Basiskurs Kapitel 1: Grundlagen – wie funktioniert das Internet

Ganz einfach erklärt:
Das Internet ist ein weltweites Netzwerk aus miteinander verbundenen Geräten. Dazu gehören Computer, Smartphones, Tablets, Server sowie zahlreiche weitere internetfähige Geräte wie Smart-TVs, Spielekonsolen, Lautsprecher, WLAN-Lampen oder Set-Top-Boxen. Diese Geräte tauschen untereinander Daten aus – schnell, zuverlässig und rund um die Uhr.

Wie entsteht die Verbindung zum Internet?

Die Verbindung zum Internet kann auf verschiedenen Wegen erfolgen, zum Beispiel über:

  • Glasfaser
  • DSL / Telefonleitung
  • Kabelanschluss
  • Mobilfunk (LTE, 5G)
  • Satellit
  • WLAN oder Funkverbindungen

Jedes Gerät im Internet besitzt eine eindeutige Kennung, die sogenannte IP-Adresse (Internet Protocol Address). Sie funktioniert ähnlich wie eine Postadresse und sorgt dafür, dass Datenpakete korrekt gesendet und empfangen werden können.

Dein Gerät kann somit Daten senden (z. B. beim Aufrufen einer Webseite) und empfangen (z. B. beim Anzeigen von Texten, Bildern oder Videos).

Was passiert beim Aufruf einer Webseite?

Wenn du eine Internetadresse (URL) in deinem Browser eingibst – also in einem Programm wie Chrome, Firefox, Edge oder Safari – passiert folgendes:

  1. Dein Browser sendet eine Anfrage an einen Server im Internet.
  2. Diese Anfrage wird über zahlreiche Knotenpunkte und Server weitergeleitet.
  3. Der Zielserver verarbeitet die Anfrage und sendet die angeforderten Daten zurück.
  4. Dein Browser stellt die empfangenen Daten als Webseite, Video oder Audiodatei dar.

Dieser gesamte Vorgang dauert Millisekunden bis wenige Sekunden.

Geschichte des Internets

Das Internet entstand ursprünglich aus einem Forschungsprojekt des US-Militärs namens ARPANET. Ziel war es, ein ausfallsicheres Kommunikationsnetz zu entwickeln. Aus diesem Projekt entwickelte sich über Jahrzehnte das heutige globale Internet.

Eine ausführliche und gut verständliche Darstellung der Internetgeschichte findest du hier:
https://www.welt.de/geschichte/article254133284/Internet-Im-Auftrag-des-US-Militaers-ging-ARPANET-in-Betrieb-und-die-Vernetzung-der-Welt-begann.html

Internet und Intranet – wo liegt der Unterschied?

  • Internet:
    Das Internet ist ein öffentliches, weltweites Datennetz, auf das jeder mit einer Internetverbindung zugreifen kann.
  • Intranet:
    Ein Intranet funktioniert technisch ähnlich wie das Internet, ist jedoch auf einen begrenzten Bereich beschränkt, zum Beispiel auf ein Unternehmen, eine Behörde oder eine Organisation. Der Zugriff ist nur für berechtigte Nutzer möglich.

Was sind Domains?

Da sich Zahlenfolgen wie 217.160.0.191 nur schwer merken lassen, wurden Domainnamen eingeführt.

Beispiel:
Statt einer IP-Adresse gibst du einfach meine-erste-homepage.com in deinen Browser ein.

Wie funktioniert das technisch?
Computer verarbeiten Daten letztlich als binäre Signale. Deshalb übernimmt ein sogenannter DNS-Server (Domain Name System) die Übersetzung:

  • Domainname → IP-Adresse
  • Beispiel: meine-erste-homepage.com → 217.160.0.191

Erst danach kann dein Browser die gewünschte Webseite vom richtigen Server abrufen.

Zusammenfassung: Grundlagen – wie funktioniert das Internet

  • Das Internet ist ein weltweites Netzwerk aus Geräten
  • Daten werden über IP-Adressen eindeutig zugeordnet
  • Browser fordern Webseiten von Servern an
  • Domains machen Internetadressen für Menschen lesbar
  • DNS-Server übersetzen Domains in IP-Adressen

HTML-Basiskurs Kapitel 2: Inhalte einer Homepage festlegen

Inhalte einer Homepage festlegen – so planst Du Deine Website richtig

Bevor Du eine Homepage erstellst oder programmierst, solltest Du die Inhalte klar definieren. Eine gute Inhaltsplanung ist die Grundlage für eine erfolgreiche Website – sowohl für Besucher als auch für Suchmaschinen. Hier erhältst Du praxisnahe Tipps und eine Übersicht über typische Inhalte einer Homepage, abhängig vom jeweiligen Zweck.

Warum ist die Inhaltsplanung so wichtig?

Noch bevor Du mit dem Webdesign oder der technischen Umsetzung beginnst, solltest Du Dir Gedanken über den späteren Inhalt Deiner Website machen. Nimm Dir Zeit, Deine Ideen zu strukturieren – zum Beispiel auf Papier oder in einem digitalen Konzept. So stellst Du sicher, dass Deine Homepage logisch aufgebaut, übersichtlich und zielgerichtet ist.

Eine durchdachte Planung spart Zeit, vermeidet spätere Korrekturen und verbessert nachhaltig die Benutzerfreundlichkeit (Usability) sowie die Suchmaschinenoptimierung (SEO).

Typische Inhalte einer Homepage nach Verwendungszweck

Private Homepage – typische Inhalte

  • Persönliche Vorstellung und Kurzbiografie
  • Hobbys und Interessen
  • Blog oder Tagebuch
  • Fotoalben (Urlaub, Familie, Events)
  • Freunde und persönliche Netzwerke
  • Haustiere oder Fahrzeuge
  • Ahnenforschung
  • Gästebuch oder Kontaktformular
  • Links zu Lieblingsseiten oder Social-Media-Profilen

Vereinswebsite – typische Inhalte

  • Informationen über den Verein und dessen Ziele
  • Vorstand und Ansprechpartner
  • Online-Anmeldung oder Mitgliedsantrag
  • Geschützter Mitgliederbereich
  • Aktuelle Termine und Veranstaltungen
  • Newsletter-Anmeldung
  • Forum oder interne Kommunikation
  • Ergebnisse, Tabellen und Statistiken (z. B. bei Sportvereinen)
  • Berichte über Vereinsaktivitäten und Ausflüge

Themenseite (z. B. Windsurfen) – typische Inhalte

  • Einführung und Erklärung des Themas
  • Fachartikel, Tipps und Anleitungen
  • Fotos und Videos
  • Erfahrungsberichte oder Eventberichte
  • Verlinkungen zu themenrelevanten Websites
  • Einbindung von Community-Elementen
  • Empfehlungen zu Büchern, Shops oder Ausrüstung

Unternehmenswebsite (Firmenseite) – typische Inhalte

  • Vorstellung des Unternehmens und der Unternehmensphilosophie
  • Team- und Mitarbeiterseiten
  • Produkte und Dienstleistungen
  • Online-Shop oder Angebotsseiten
  • Kundenbereich mit Login
  • FAQ-Bereich und Support
  • Kontaktformular und Kontaktdaten
  • Anfahrtsbeschreibung mit Karte
  • Stellenangebote, Jobs und Ausbildungsplätze
  • Aktuelles / News / Blog
  • Social-Media-Verlinkungen
  • Rechtliche Seiten (Impressum, Datenschutz)

Fazit: Erst planen, dann umsetzen

Die Möglichkeiten bei der Gestaltung einer Homepage sind nahezu unbegrenzt. Umso wichtiger ist es, dass Du vorab festlegst, welche Ziele Deine Website verfolgt und welche Inhalte dafür notwendig sind. Erst danach solltest Du mit der technischen Umsetzung beginnen.

Auch wenn es zunächst nach zusätzlichem Aufwand aussieht, Deine Homepage vorab zu skizzieren: Diese Vorbereitung zahlt sich aus. Mit einem klaren Konzept kannst Du Dich später vollständig auf die Umsetzung der Inhalte konzentrieren und vermeidest unnötige Änderungen.

Tipp für professionelles Webdesign

Gerade im professionellen Webdesign ist diese Vorgehensweise essenziell. Kläre gemeinsam mit dem Kunden Wünsche, Ziele und Zielgruppen. Ein sauberes Konzept verhindert Fehlentwicklungen, spart Kosten und sorgt für bessere Ergebnisse – technisch, gestalterisch und aus SEO-Sicht.

HTML-Basiskurs Kapitel 3: Der Dokumenttyp (DOCTYPE) in HTML

In unserer Schritt-für-Schritt-Anleitung lernst du, wie du eine vollständige HTML-Datei von Grund auf erstellst. Der erste und wichtigste Schritt dabei ist die Definition des Dokumenttyps, auch DOCTYPE genannt.

DOCTYPE sorgt dafür, dass Browser im Standards-Modus rendern (HTML5-Doctype). Eine korrekte Angabe ist entscheidend für eine saubere Darstellung deiner Webseite in allen modernen Browsern.

Der empfohlene Dokumenttyp (HTML5)

Heute wird nahezu ausschließlich HTML5 verwendet. Deshalb solltest du für neue Webseiten folgenden Dokumenttyp einsetzen:

<!DOCTYPE html>

Diese eine Zeile steht immer ganz am Anfang deiner HTML-Datei – noch vor allen anderen HTML-Tags.

HTML-Datei anlegen und speichern

  1. Öffne einen einfachen Texteditor, zum Beispiel:
    • Windows: Editor
    • macOS: TextEdit (im Nur-Text-Modus)
    • Alternativ: VS Code, Notepad++ oder ein anderer Code-Editor
  2. Erstelle eine neue Datei und speichere sie in deinem Webverzeichnis, zum Beispiel unter dem Namen: index.html – der Dateiname index.html ist besonders wichtig, da Webserver diese Datei automatisch als Startseite eines Verzeichnisses laden.

Was musst du jetzt tun?

Kopiere den oben genannten DOCTYPE und füge ihn in die noch leere HTML-Datei ein. Danach speicherst du die Datei ab. Damit hast du das Grundgerüst deiner HTML-Seite korrekt begonnen.

Warum HTML5?

Früher gab es viele verschiedene Dokumenttypen, zum Beispiel HTML 4.01 oder XHTML. Diese sind heute jedoch veraltet und sollten für neue Projekte nicht mehr verwendet werden.

HTML5 bietet zahlreiche Vorteile:

  • bessere Unterstützung moderner Browser
  • klare und einfache Syntax
  • Unterstützung für Multimedia (Video, Audio)
  • bessere Strukturierung von Inhalten
  • optimale Grundlage für Suchmaschinenoptimierung (SEO)

Wichtig zu wissen

Der DOCTYPE bestimmt, wie der Browser deinen HTML-Code interpretiert. Achte daher immer darauf, dass dein HTML-Code zur verwendeten HTML-Version passt. Mit HTML5 bist du auf der sicheren Seite und arbeitest nach aktuellem Webstandard.

HTML-Basiskurs Kapitel 4: Der Quelltext einer Webseite

Was ist HTML? Aufbau einer einfachen HTML-Datei – deine erste Homepage

HTML ist die Grundlage jeder Webseite. In diesem Tutorial lernst du, was HTML ist, wie eine einfache HTML-Datei aufgebaut ist und wie du deine erste eigene Homepage erstellst.

Was bedeutet HTML?

HTML steht für Hypertext Markup Language. Es handelt sich dabei nicht um eine Programmiersprache, sondern um eine Auszeichnungssprache, mit der Inhalte wie Texte, Überschriften, Links oder Bilder strukturiert und im Browser dargestellt werden.

HTML-Dateien erkennst du an den Dateiendungen .html oder .htm. Sie können mit jedem modernen Webbrowser geöffnet werden, z. B. mit Chrome, Firefox, Edge oder Safari.

Ein großer Vorteil von HTML ist seine Systemunabhängigkeit: HTML funktioniert auf allen Betriebssystemen und Geräten – egal ob Windows, macOS, Linux oder Smartphone. Für deine eigene Homepage brauchst du daher lediglich eine HTML-Datei.

Links und Dateiformate

HTML ermöglicht das Verlinken anderer Inhalte. Beim Anklicken eines Links kann z. B. eine andere HTML-Seite oder auch eine Datei in einem anderen Format geöffnet werden, etwa PDF, Word oder Excel. Je nach Browser-Einstellung wird die Datei direkt angezeigt, heruntergeladen oder in einem externen Programm geöffnet.

Aufbau einer einfachen HTML-Datei

Eine sehr einfache HTML-Datei kann bereits aus wenigen Zeilen bestehen. In unserem Beispiel enthält die Seite nur den Text:

„Meine erste Homepage“

Zusätzlich vergeben wir einen Titel, der im Browser-Tab angezeigt wird.

Beispiel: Einfacher HTML-Quelltext

Der Quelltext enthält alle Informationen, die der Browser benötigt, um die Webseite korrekt darzustellen:

<!DOCTYPE html>
<html>
<head>
<title>Hier steht der Titel der Homepage</title>
</head>
<body>
Meine erste Homepage
</body>
</html>

Was solltest du über HTML-Tags wissen?

Die Zeichen < und > kennzeichnen sogenannte HTML-Tags. Tags sind Steueranweisungen für den Browser. Sie bestehen in der Regel aus einem öffnenden und einem schließenden Tag.

Beispiel:

  • <html> → Beginn
  • </html> → Ende

Bedeutung der verwendeten HTML-Tags

TagBedeutung
<!DOCTYPE html>Dokumenttyp (HTML5)
<html>Beginn der HTML-Datei
</html>Ende der HTML-Datei
<head>Kopfbereich der Webseite
</head>Ende des Kopfbereichs
<title>Titel der Webseite (Browser-Tab & SEO-relevant)
</title>Ende des Titels
<body>Sichtbarer Inhalt der Webseite
</body>Ende des Inhaltsbereichs

Head- und Body-Bereich erklärt

  • Head-Bereich
    Enthält Informationen für Browser und Suchmaschinen, z. B. den Seitentitel oder Meta-Angaben. Diese Inhalte werden nicht direkt auf der Seite angezeigt, sind aber extrem wichtig für SEO.
  • Body-Bereich
    Enthält alle sichtbaren Inhalte deiner Webseite, also Texte, Bilder, Links, Listen usw.

HTML-Datei erstellen und speichern

Zum Erstellen einer HTML-Datei benötigst du keinen speziellen Editor. Ein einfacher Texteditor reicht aus, z. B.:

  • Windows-Editor (Notepad)
  • Notepad++
  • VS Code (empfohlen für Fortgeschrittene)

Schritt-für-Schritt-Anleitung

  1. Öffne einen Texteditor
  2. Kopiere den oben gezeigten HTML-Quelltext
  3. Passe Titel und Inhalt nach Wunsch an
  4. Klicke auf Datei → Speichern unter
  5. Wähle einen Ordner für deine Webseite
  6. Vergib einen Dateinamen, z. B. index.html Wichtig: Achte darauf, dass die Datei wirklich die Endung .html hat und nicht .txt
  7. Öffne die gespeicherte Datei per Doppelklick im Browser

Fertig – das ist deine erste eigene HTML-Webseite.

Was hast du in dieser Lektion gelernt?

  • Was HTML ist und wofür es verwendet wird
  • Wie eine einfache HTML-Datei aufgebaut ist
  • Was HTML-Tags sind und wie sie funktionieren
  • Unterschied zwischen Head- und Body-Bereich
  • Wie du eine HTML-Datei erstellst, speicherst und im Browser testest

Damit hast du die Grundlage geschaffen, um deine eigene Homepage weiter auszubauen und HTML Schritt für Schritt zu lernen.

HTML-Basiskurs Kapitel 5: Der Head-Bereich einer HTML-Datei (HTML Head)

Der Head-Bereich einer HTML-Datei (HTML Head)

Der Head-Bereich einer HTML-Datei enthält wichtige Informationen über deine Webseite. Dazu gehören unter anderem der Seitentitel, Meta-Tags, Stylesheets, Favicons und weitere Angaben, die vor allem für Browser und Suchmaschinen relevant sind.

Bevor der sichtbare Inhalt der Webseite geladen wird, wertet der Browser zuerst den Head-Bereich aus. Eine saubere und moderne Struktur ist daher essenziell für SEO, Performance und Barrierefreiheit.

Grundstruktur eines HTML-Dokuments

Jede HTML-Datei beginnt mit der Definition des Dokumenttyps. Heute wird der moderne HTML5-Standard verwendet:

<!DOCTYPE html>

Das <html>-Tag

<html lang="de">

Dieses Tag markiert den Beginn eines HTML-Dokuments.
Alles, was zwischen <html> und </html> steht, gehört zur Webseite.

  • Tags bestehen aus einem öffnenden und meist einem schließenden Element
  • Inhalte außerhalb dieses Bereichs werden vom Browser ignoriert
  • Mit lang="de" gibst du direkt die Sprache der Webseite an (wichtig für SEO & Accessibility)

Der Head-Bereich (<head>)

<head>

Der <head>-Bereich enthält keine sichtbaren Inhalte, sondern technische und semantische Informationen.
Füge ihn direkt nach dem öffnenden <html>-Tag ein.

Der Seitentitel (<title>)

<title>Muster-Homepage – HTML Grundlagen einfach erklärt</title>

Der Title ist extrem wichtig:

  • erscheint im Browser-Tab
  • wird als Titel in Suchmaschinen verwendet
  • ist der Name der Seite in Lesezeichen

👉 SEO-Tipp:
Halte den Titel prägnant (max. ca. 60 Zeichen) und integriere relevante Keywords.

Meta-Tags – wichtig für SEO und Browser

Zeichencodierung (Pflichtangabe)

<meta charset="UTF-8">
  • UTF-8 ist heute der Standard
  • unterstützt alle Sonderzeichen und Sprachen
  • ersetzt veraltete ISO-8859-1-Angaben

Robots-Anweisung für Suchmaschinen

<meta name="robots" content="index, follow">
  • index → Seite darf indexiert werden
  • follow → Links dürfen verfolgt werden

Meta Description (sehr wichtig für SEO)

<meta name="description" content="Lerne den Head-Bereich einer HTML-Datei kennen. Verständliche Erklärung zu Title, Meta-Tags, SEO und modernen HTML5-Standards.">
  • wird häufig als Snippet in Google angezeigt
  • sollte ca. 150–160 Zeichen lang sein
  • motiviert zum Klicken

Keywords (optional)

<meta name="keywords" content="HTML Head, HTML5, Meta Tags, SEO Grundlagen, Webseite erstellen">

⚠️ Keywords haben heute nur noch geringe SEO-Relevanz, können aber optional verwendet werden.

Viewport (wichtig für Mobile SEO)

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • sorgt für optimale Darstellung auf Smartphones und Tablets
  • Pflicht für modernes Webdesign

Einbindung des Stylesheets

<link rel="stylesheet" href="stylesheet.css">
  • trennt Inhalt und Design
  • erleichtert Wartung und Erweiterung
  • modernes HTML benötigt kein type oder media mehr zwingend

Favicon einbinden

<link rel="icon" href="favicon.ico">

Das Favicon:

  • erscheint im Browser-Tab
  • erhöht den Wiedererkennungswert
  • wird auch in Lesezeichen angezeigt

Head-Bereich schließen

</head>

Damit ist der komplette Kopfbereich abgeschlossen.

Vollständiges Beispiel: Moderner HTML-Head (HTML5)

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Muster-Homepage – HTML Grundlagen einfach erklärt</title>
  <meta name="description" content="Lerne den Head-Bereich einer HTML-Datei kennen. Verständliche Erklärung zu Title, Meta-Tags, SEO und modernen HTML5-Standards.">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="HTML Head, HTML5, Meta Tags, SEO Grundlagen, Webseite erstellen">
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="icon" href="favicon.ico">
</head>

Fazit

Du hast jetzt einen vollständigen, modernen und suchmaschinenoptimierten Head-Bereich erstellt.
Damit legst du das Fundament für:

  • bessere Google-Rankings
  • saubere HTML5-Struktur
  • optimale Darstellung auf allen Endgeräten

👉 Als Nächstes kannst du mit dem Body-Bereich (<body>) deiner HTML-Datei weitermachen und die sichtbaren Inhalte erstellen.

HTML-Basiskurs Kapitel 6: Der Body-Bereich deiner Webseite (<body>)

Im Body-Bereich einer HTML-Datei befinden sich alle sichtbaren Inhalte deiner Webseite – also Texte, Bilder, Navigationen, Formulare und weitere Elemente, die Besucher im Browser sehen.

Öffnen des Body-Bereichs

Zuerst öffnest du den Body-Bereich mit dem <body>-Tag:

<body>

Dieser Tag wird direkt nach dem schließenden </head>-Tag eingefügt.

Moderne Trennung von Inhalt und Design

In dieser Lektion arbeitest du nach einem modernen Webstandard:

  • HTML → Struktur und Inhalte
  • CSS → Design und Layout
  • JavaScript → Interaktionen (optional)

Zusätzlich verwenden wir eine Container-Struktur, um die Seite logisch aufzubauen. Container kannst du dir wie unsichtbare Boxen vorstellen, die Inhalte gruppieren und später per CSS gestaltet werden.

Seitenlayout mit Containern (Grundstruktur)

Zwischen den öffnenden und schließenden <body>-Tags definierst du zunächst die äußere Struktur der Seite:

<div id="wrapper">

Der Wrapper (Rahmen) umschließt alle weiteren Bereiche der Webseite.

Semantische Seitenbereiche definieren

Statt rein technischer <div>-Container verwenden wir jetzt semantische HTML5-Elemente. Diese sind besser für SEO, Barrierefreiheit und Suchmaschinen.

<header></header>
<main></main>
<footer></footer>
  • <header> → Kopfbereich (Logo, Navigation)
  • <main> → Hauptinhalt der Seite
  • <footer> → Fußbereich (Copyright, Links)

Diese Elemente werden innerhalb des Wrappers eingefügt.

Der Header-Bereich: Logo und Navigation

Logo als Überschrift

Im Header platzierst du zuerst dein Logo – hier bewusst als Text. Das ist SEO-freundlich und barrierefrei:

<h1>Meine erste Homepage</h1>

👉 SEO-Tipp:
Pro Seite sollte es nur eine H1-Überschrift geben.

Navigation als Liste

Navigationen werden korrekt als ungeordnete Liste umgesetzt:

<nav>
  <ul>
    <li><a href="index.html">Startseite</a></li>
    <li><a href="fotos.html">Fotos</a></li>
    <li><a href="links.html">Links</a></li>
    <li><a href="gaestebuch.html">Gästebuch</a></li>
    <li><a href="impressum.html">Impressum &amp; Kontakt</a></li>
  </ul>
</nav>
  • <nav> kennzeichnet die Navigation semantisch
  • <a href="..."> definiert interne Verlinkungen
  • Klare Linktexte verbessern Usability und SEO

Der Hauptinhalt (<main>)

Im Hauptbereich befinden sich die eigentlichen Inhalte der Seite.

Überschrift und Text

<h2>Willkommen auf meiner Beispiel-Webseite</h2>

<p>
Dies ist ein Beispielinhalt für den Hauptbereich deiner Webseite.
Hier kannst du später deine eigenen Texte, Bilder oder weitere Inhalte einfügen.
Achte darauf, dass deine Texte klar strukturiert und gut lesbar sind.
</p>
  • <h2> → zweite Überschriftenebene
  • <p> → Textabsätze
  • Klare Struktur verbessert Lesbarkeit und Suchmaschinenranking

Der Footer-Bereich

Im Footer stehen rechtliche und ergänzende Informationen:

<footer>
  <p>&copy; 2026 Max Mustermann · Alle Rechte vorbehalten</p>
</footer>

👉 Best Practice:
Footer-Inhalte sind ideal für Copyright, Impressum, Datenschutz oder Zusatzlinks.

Body- und HTML-Tag schließen

Zum Abschluss schließt du den Body- und den HTML-Bereich:

</body>
</html>

Vollständiger, moderner HTML-Body (HTML5)

<body>

  <div id="wrapper">

    <header>
      <h1>Meine erste Homepage</h1>

      <nav>
        <ul>
          <li><a href="index.html">Startseite</a></li>
          <li><a href="fotos.html">Fotos</a></li>
          <li><a href="links.html">Links</a></li>
          <li><a href="gaestebuch.html">Gästebuch</a></li>
          <li><a href="impressum.html">Impressum &amp; Kontakt</a></li>
        </ul>
      </nav>
    </header>

    <main>
      <h2>Willkommen auf meiner Beispiel-Webseite</h2>
      <p>
        Dies ist ein Beispieltext für den Inhaltsbereich.
        Er dient als Platzhalter und kann jederzeit durch eigene Inhalte ersetzt werden.
      </p>
    </main>

    <footer>
      <p>&copy; 2026 Max Mustermann · Alle Rechte vorbehalten</p>
    </footer>

  </div>

</body>
</html>

Fazit

Du hast jetzt:

  • einen vollständig modernen Body-Bereich
  • eine saubere HTML5-Struktur
  • SEO-optimierte Inhalte
  • semantische Elemente für bessere Auffindbarkeit
  • eine solide Basis für CSS-Design und Responsive Layouts

👉 Nächster Schritt:
Im nächsten Kapitel kannst du das CSS-Stylesheet erstellen und deiner Webseite ein professionelles Design geben.

HTML-Basiskurs Kapitel 7: Externes Stylesheet erstellen (CSS)

Ein externes Stylesheet wird verwendet, um das Design und Layout deiner Webseite zentral zu steuern. Dadurch trennst du sauber Inhalt (HTML) von Gestaltung (CSS) – ein grundlegendes Prinzip moderner Webentwicklung.

Das Stylesheet hast du bereits im Head-Bereich deiner HTML-Datei eingebunden:

<link rel="stylesheet" href="stylesheet.css">

👉 Moderne HTML5-Seiten benötigen weder type="text/css" noch das media-Attribut, da diese Angaben heute Standard sind.

CSS-Datei anlegen

Du kannst ein Stylesheet mit jedem Texteditor erstellen, zum Beispiel:

  • Visual Studio Code
  • Notepad++
  • Windows Editor (Notepad)

Wichtig ist nur:

  • Die Datei muss die Endung .css haben
  • Der Dateiname lautet z. B. stylesheet.css
  • Die Datei liegt im gleichen Verzeichnis wie deine index.html

Wie funktioniert ein Stylesheet?

Ein CSS-Stylesheet besteht aus Selektoren und Deklarationen.

Grundaufbau einer CSS-Regel

selektor {
  eigenschaft: wert;
}

Beispiel:

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;
}

Erklärung:

  • body → HTML-Element (Selektor)
  • font-family → Schriftart der gesamten Seite
  • background-color → Hintergrundfarbe
  • #ffffff → Weiß im Hexadezimalformat

Vorteile eines externen Stylesheets

  • Einheitliches Design für alle Seiten
  • Änderungen nur an einer Stelle nötig
  • Schnellere Ladezeiten (Browser-Caching)
  • Bessere Wartbarkeit und Skalierbarkeit
  • Positiver Effekt auf SEO und Performance

Beispiel: Einfaches Stylesheet für die Muster-Webseite

Nachfolgend ein modernisiertes und bereinigtes CSS-Beispiel, das zu der zuvor erstellten HTML-Struktur passt:

/* Grundlayout */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ffffff;
  color: #333333;
}

/* Links */
a {
  color: #003399;
  font-weight: 600;
  text-decoration: none;
}

a:hover {
  color: #ffffff;
  background-color: #003399;
  padding: 2px 4px;
}

/* Seitenrahmen */
#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
  border: 1px solid #000000;
}

/* Header */
header {
  text-align: center;
  padding: 10px;
  border-bottom: 1px dotted #cccccc;
}

/* Navigation */
nav ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

nav li {
  display: inline-block;
  margin: 0 10px;
}

/* Hauptinhalt */
main {
  padding: 20px 0;
}

/* Footer */
footer {
  text-align: right;
  font-size: 0.85rem;
  color: #666666;
}

Wichtige CSS-Grundlagen

Klassen vs. IDs

  • ID (#) → eindeutig, nur einmal pro Seite
  • Klasse (.) → mehrfach verwendbar

Beispiel:

.highlight {
  background-color: yellow;
}


<p class="highlight">Dieser Text ist hervorgehoben.</p>

👉 Best Practice:
Für Layout-Strukturen eher Klassen als IDs verwenden.

Gestaltung testen und erweitern

Nachdem du das Stylesheet gespeichert hast, lade deine Webseite neu.
Du wirst sofort sehen, wie sich Layout, Farben und Typografie ändern.

Experimentiere ruhig mit:

  • Farben (color, background-color)
  • Abständen (margin, padding)
  • Schriftgrößen (font-size)
  • Layout (flexbox, grid – fortgeschritten)

Fazit

Du hast jetzt:

  • ein externes CSS-Stylesheet erstellt
  • modernes, sauberes CSS eingesetzt
  • die Grundlage für professionelles Webdesign gelegt
  • eine klare Trennung von Inhalt und Design umgesetzt

👉 Nächster Schritt:
Im nächsten Abschnitt erstellen wir ein Favicon für Deine Webseite

HTML-Basiskurs Kapitel 8: Ein Favicon erstellen

Ein Favicon ist ein kleines Symbol, das im Browser-Tab, in Lesezeichen (Bookmarks) und teilweise auch in Suchergebnissen angezeigt wird. Es trägt maßgeblich zur Wiedererkennung deiner Webseite bei und wirkt deutlich professioneller als ein Standard-Icon.

Ohne eigenes Favicon zeigen Browser oder Content-Management-Systeme wie WordPress häufig ein Standard-Symbol an. Ein individuelles Favicon ist daher ein wichtiger Bestandteil einer professionellen Webseite.

Warum ein Favicon wichtig ist

  • bessere Wiedererkennung deiner Marke
  • professioneller Gesamteindruck
  • visuelle Orientierung bei vielen offenen Tabs
  • Standardanforderung moderner Webseiten
  • relevant für Desktop- und Mobile-Browser

Favicon erstellen mit einem Online-Generator

Nachdem deine Webseite technisch fertig ist, erstellst du zum Abschluss ein Favicon. Dafür kannst du einen Online-Generator verwenden, zum Beispiel den kostenlosen Favicon-Generator von IONOS:

https://www.ionos.de/tools/favicon-generator

So funktioniert ein Favicon-Generator

Ein typischer Favicon-Generator bietet dir mehrere Möglichkeiten:

  • Grafik hochladen (PNG, JPG, SVG)
  • Buchstaben oder Text als Icon verwenden
  • Pixelweise Gestaltung über ein Raster
  • automatische Umwandlung in passende Größen

Der Generator erstellt anschließend alle benötigten Dateien, die du direkt herunterladen kannst.

Favicon-Dateien richtig speichern

Für einfache Webseiten reicht meist eine klassische Favicon-Datei:

favicon.ico

Wichtig:

  • Dateiname exakt: favicon.ico
  • Speicherort: Hauptverzeichnis deiner Webseite
  • Groß- und Kleinschreibung beachten

👉 Dadurch funktioniert die Verknüpfung automatisch mit dem im Head-Bereich gesetzten Pfad.

Favicon im HTML einbinden

Falls noch nicht geschehen, binde das Favicon im Head-Bereich deiner HTML-Datei ein:

<link rel="icon" href="favicon.ico">

Diese moderne Variante wird von allen gängigen Browsern unterstützt.

Ergebnis im Browser

Nach dem Speichern und Neuladen der Webseite wird dein Favicon:

  • links neben dem Seitentitel im Browser-Tab angezeigt
  • in den Lesezeichen sichtbar
  • bei vielen Browsern auch in der Adressleiste dargestellt

Falls das Icon nicht sofort erscheint, leere den Browser-Cache oder lade die Seite mit Strg + F5 neu.

Erweiterte Empfehlung (optional)

Für größere oder professionelle Projekte kannst du zusätzlich Favicons für verschiedene Geräte einbinden, z. B.:

  • Apple Touch Icon (iOS)
  • Android / PWA Icons
  • verschiedene Größen für High-DPI-Displays

Für den Einstieg reicht jedoch das klassische favicon.ico vollkommen aus.

Fazit

Du hast jetzt:

  • ein eigenes Favicon erstellt
  • deine Webseite visuell aufgewertet
  • einen wichtigen professionellen Feinschliff ergänzt
  • den letzten Schritt der Grundstruktur abgeschlossen

👉 Nächster Schritt:
Du kannst nun weitere Unterseiten erstellen und diese sauber miteinander verlinken. Wenn das erledigt ist, brauchst Du eine Domain und Webspace.

HTML-Basiskurs Kapitel 9: Domain und Webspace beschaffen

Um deine Webseite im Internet zu veröffentlichen, benötigst du zwei grundlegende Komponenten:

  • eine Domain (die Webadresse)
  • Webspace (den Speicherplatz auf einem Server)

Erst durch das Zusammenspiel beider Elemente ist deine Webseite weltweit erreichbar.

Was ist eine Domain?

Eine Domain ist die eindeutige Internetadresse deiner Webseite, zum Beispiel:

www.meine-erste-homepage.com

Sie dient als leicht merkbare Adresse für Besucher und verweist technisch auf den Server, auf dem deine Webseite gespeichert ist.

👉 SEO-Tipp:
Wähle eine Domain, die:

  • kurz und einprägsam ist
  • idealerweise dein Thema oder deine Marke widerspiegelt
  • keine Sonderzeichen oder unnötigen Bindestriche enthält

Was ist Webspace?

Webspace ist der Speicherplatz auf einem Webserver. Dort liegen:

  • deine HTML-Dateien
  • CSS-Stylesheets
  • Bilder, Videos und Downloads
  • ggf. Datenbanken oder Skripte

Wenn ein Besucher deine Domain aufruft, werden die Dateien vom Webspace geladen und im Browser angezeigt.

Wunschdomain prüfen und registrieren

Bevor du deine Webseite veröffentlichst, solltest du prüfen, ob deine gewünschte Domain noch verfügbar ist:

Link zum Domaincheck bei Alfahosting: https://alfahosting.de/?wmid=mehomepage

Die Domainprüfung kannst du direkt beim Hosting-Anbieter durchführen. Ist die Domain frei, kannst du sie sofort registrieren und passenden Webspace dazubuchen.

Alternative Webhoster

Natürlich bist du nicht an einen bestimmten Anbieter gebunden. Es gibt viele weitere Webhoster mit ähnlichen Leistungen. Achte bei der Auswahl insbesondere auf:

  • SSL-Zertifikate (HTTPS)
  • Serverstandort (idealerweise EU / Deutschland)
  • gute Ladezeiten
  • zuverlässigen Support
  • transparente Vertragsbedingungen

Fazit

Du hast jetzt:

  • verstanden, was Domain und Webspace sind
  • einen Hosting-Anbieter ausgewählt
  • deine Wunschdomain registriert
  • die Grundlage für die Veröffentlichung deiner Webseite geschaffen

👉 Nächster Schritt:
Im nächsten Abschnitt kannst du lernen, wie du deine Webseite per FTP hochlädst, HTTPS aktivierst und prüfst, ob deine Seite korrekt online erreichbar ist.

HTML-Basiskurs Kapitel 10: Homepage per FTP / SFTP auf den Webspace hochladen

Damit deine Homepage im Internet erreichbar ist, musst du alle Dateien deiner Webseite (HTML, CSS, Bilder, Icons usw.) auf deinen Webspace übertragen. Dieser Vorgang wird als Upload bezeichnet.

Welche Übertragungsarten gibt es?

FTP, FTPS und SFTP – kurz erklärt

  • FTP (File Transfer Protocol)
    Älteres Protokoll, nicht verschlüsselt → heute nur noch eingeschränkt empfohlen
  • FTPS (FTP Secure)
    FTP mit SSL/TLS-Verschlüsselung
  • SFTP (SSH File Transfer Protocol)
    Moderne, vollständig verschlüsselte Übertragung über SSH
    👉 Empfohlener Standard

Wenn möglich, solltest du immer SFTP verwenden.

Upload mit einem FTP-Client (empfohlen)

Am einfachsten funktioniert der Upload mit einem FTP-Programm. Ein bewährter, kostenloser Client ist FileZilla:

https://filezilla-project.org

Verbindung herstellen

Im FTP-Client trägst du folgende Zugangsdaten ein (erhältst du von deinem Webhoster):

  • Server / Hostname
  • Benutzername
  • Passwort
  • Port (meist 22 für SFTP)

Nach einem Klick auf Verbinden wird die Verbindung hergestellt.

Dateien auf den Webspace hochladen

Sobald die Verbindung steht:

  1. Öffne lokal den Ordner mit deiner Webseite
  2. Öffne auf dem Server das Hauptverzeichnis (z. B. htdocs, public_html oder /)
  3. Ziehe alle Dateien per Drag & Drop auf den Server

Typische Dateien:

  • index.html
  • stylesheet.css
  • Bilder (.jpg, .png, .svg)
  • favicon.ico

👉 Wichtig:
Die Startseite sollte index.html heißen. Diese Datei wird automatisch geladen, wenn jemand deine Domain aufruft.

Online-FTP über den Browser (Alternative)

Viele Hosting-Anbieter bieten ein Web-FTP direkt im Kundenmenü an. Alternativ kannst du einen externen Dienst nutzen, z. B.:

https://www.webftp.de oder https://www.filestash.app/de/ftp-online-client.html

Vorteil:

  • kein zusätzliches Programm nötig

Nachteil:

  • langsamer
  • weniger Komfort
  • meist eingeschränkte Funktionen

Für größere Projekte ist ein FTP-Client klar zu bevorzugen.

Upload direkt aus dem Webeditor

Viele Webeditoren besitzen einen integrierten FTP- oder SFTP-Client, zum Beispiel Adobe Dreamweaver.

Vorteile:

  • Bearbeiten und Hochladen in einem Schritt
  • ideal für kontinuierliche Updates

Nachteil:

  • oft komplexer in der Einrichtung
  • abhängig vom jeweiligen Editor

Nach dem Upload prüfen

Nachdem alle Dateien hochgeladen wurden:

  1. Rufe deine Domain im Browser auf
  2. Prüfe:
    • Wird die Startseite angezeigt?
    • Werden Styles und Bilder korrekt geladen?
    • Funktionieren alle Links?

Falls Änderungen nicht sofort sichtbar sind, lade die Seite mit Strg + F5 neu oder leere den Browser-Cache.

SEO-Hinweis

  • Verwende HTTPS (SSL aktivieren)
  • Stelle sicher, dass deine index.html im Hauptverzeichnis liegt
  • Vermeide doppelte Startseiten (index.html und index.htm)
  • Prüfe die Seite später in der Google Search Console

Fazit

Du hast jetzt:

  • deine Homepage erfolgreich auf den Webspace hochgeladen
  • eine sichere Übertragungsmethode kennengelernt
  • die Voraussetzung für eine weltweit erreichbare Webseite geschaffen

👉 Nächster Schritt:
Im nächsten Abschnitt kannst du deine Webseite bei Google anmelden

HTML-Basiskurs Kapitel 11: Homepage kostenlos bei Google anmelden

Damit deine Homepage in der Google-Suche gefunden werden kann, solltest du sie aktiv bei Google anmelden. Das ist kostenlos und ein zentraler Schritt für Suchmaschinenoptimierung (SEO) und Sichtbarkeit im Internet.

Webseite bei Google anmelden – so funktioniert es

Die Anmeldung erfolgt über die Google Search Console.
Dort teilst du Google mit, dass deine Webseite existiert, und erhältst gleichzeitig wertvolle Analyse- und Diagnosefunktionen.

🔗 https://search.google.com/search-console?hl=de

Voraussetzungen

  • ein Google-Konto (kann während der Anmeldung erstellt werden)
  • Zugriff auf deine Webseite (FTP oder Hosting-Zugang)

Wichtige Hinweise zur Indexierung

  • Du musst nicht jede einzelne Seite manuell anmelden
  • Google folgt automatisch allen internen Links
  • Neue Webseiten erscheinen meist nach einigen Tagen im Index
  • Verzögerungen sind normal – Geduld zahlt sich aus

Google indexiert Webseiten nicht, wenn z. B.:

  • illegale Inhalte vorliegen
  • technische Fehler den Googlebot blockieren
  • Seiten per noindex ausgeschlossen sind

XML-Sitemap einreichen (sehr empfohlen)

Für eine optimale Indexierung solltest du eine XML-Sitemap erstellen und in der Search Console hinterlegen.

Vorteile einer Sitemap:

  • bessere und schnellere Erfassung aller Seiten
  • klare Struktur für Suchmaschinen
  • besonders wichtig bei größeren Webseiten

Viele Content-Management-Systeme (z. B. WordPress) erstellen Sitemaps automatisch oder über Plugins.

Funktionen der Google Search Console

Im Dashboard der Google Search Console kannst du:

  • Indexierungsstatus deiner Seiten prüfen
  • Crawling- und Darstellungsfehler erkennen
  • mobile Optimierung analysieren
  • Core Web Vitals überwachen
  • Sicherheitsprobleme und manuelle Maßnahmen einsehen
  • E-Mail-Benachrichtigungen bei Problemen erhalten

👉 Die Search Console hilft dir dabei, technische SEO-Fehler frühzeitig zu erkennen und zu beheben.

Google Site Kit für WordPress

Wenn du mit WordPress arbeitest, kannst du das kostenlose Plugin Google Site Kit verwenden:

🔗 https://sitekit.withgoogle.com

Mit Google Site Kit:

  • verbindest du WordPress direkt mit Google
  • erhältst Statistiken zu Besuchern, Suchanfragen und Ladezeiten
  • siehst wichtige Google-Daten direkt im WordPress-Dashboard

Google Unternehmensprofil für Firmen (Local SEO)

Als Unternehmen solltest du zusätzlich ein Google Unternehmensprofil anlegen:

🔗 https://www.google.com/intl/de_de/business/

Damit:

  • erscheint dein Unternehmen in der Google-Suche
  • wirst du in Google Maps angezeigt
  • kannst du Öffnungszeiten, Bilder, Beiträge und Veranstaltungen veröffentlichen
  • verbesserst du deine lokale Sichtbarkeit (Local SEO)

SEO-Tipps zum Abschluss

  • Nutze HTTPS (SSL-Zertifikat)
  • Pflege aussagekräftige Seitentitel und Meta-Descriptions
  • Verlinke Unterseiten logisch miteinander
  • Erstelle regelmäßig hochwertige Inhalte
  • überprüfe deine Seite regelmäßig in der Search Console

Fazit

Du hast jetzt gelernt, wie du:

  • deine Homepage kostenlos bei Google anmeldest
  • die Google Search Console effektiv nutzt
  • deine Webseite technisch und inhaltlich für SEO optimierst
  • als Unternehmen lokal besser gefunden wirst

👉 Damit endet unser Schritt-für-Schritt-Tutorial zur Erstellung einer eigenen Homepage mit HTML & CSS.



Diese Unterseite / Rubrik wurde zuletzt aktualisiert am 2. Januar 2026

User online: