Eine Website mit HTML erstellen klingt nach Programmierprofi – ist aber ein überraschend einfacher Einstieg ins Web. Du brauchst nur einen Texteditor, einen Browser und ein Webhosting-Paket. In dieser Anleitung baust du eine kleine, saubere Website aus HTML und CSS, testest sie auf deinem Rechner und stellst sie anschließend bei checkdomain online. Und weil du dir heute viel Tipparbeit sparen kannst, zeigen wir dir auch, wie du dir die Seite mit KI erstellen lässt – und worauf du dabei achten musst.
Kurz zusammengefasst: Lege einen Ordner an, erstelle darin eine index.html und eine style.css, teste die Seite im Browser und lade alles per SFTP in das Verzeichnis /htdocs deines checkdomain Webhostings. SSL aktivieren, fertig.
Inhaltsverzeichnis
- Was du brauchst
- Schritt 1: Projektordner anlegen
- Schritt 2: Das HTML-Grundgerüst
- Schritt 3: Inhalte mit semantischem HTML
- Schritt 4: Design mit CSS
- Schritt 5: Unterseiten, Impressum und Datenschutz
- Schritt 6: Website lokal testen
- Schritt 7: Website bei checkdomain hochladen
- Schritt 8: SSL aktivieren und auf HTTPS umleiten
- Website mit KI erstellen
- Häufige Fehler und Lösungen
- HTML, Baukasten oder WordPress?
- FAQ
- Fazit: Deine eigene Website in einem Nachmittag
- KI-Domain-Generator von checkdomain nutzen um deinen Domain Namen zu finden.
Schnelles und zuverlässiges Webhosting für deine Projekte
Blitzschnelle Ladezeiten, 99,9% Verfügbarkeit und deutscher Support. Deine Website läuft perfekt!
Was du brauchst
- Einen Code-Editor: Grundsätzlich reicht jeder Texteditor. Komfortabler ist ein kostenloser Code-Editor wie Visual Studio Code, der deinen Code farbig hervorhebt und Tags automatisch schließt. Word oder Pages eignen sich nicht – sie speichern unsichtbare Formatierungen mit.
- Einen aktuellen Browser wie Firefox, Chrome, Edge oder Safari zum Testen.
- Eine Domain und ein Webhosting-Paket, damit deine Seite unter einer eigenen Adresse erreichbar ist.
- Ein FTP-Programm wie FileZilla (Windows, macOS, Linux) oder Cyberduck (macOS), um die Dateien auf den Server zu übertragen.
Programmierkenntnisse brauchst du nicht. HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache: Du sagst dem Browser damit nur, was eine Überschrift, ein Absatz oder ein Bild ist.
Schritt 1: Projektordner anlegen
Lege auf deinem Rechner einen Ordner an, zum Beispiel meine-website. Alles, was später online gehen soll, landet hier. Eine übersichtliche Struktur sieht so aus:
meine-website/
├── index.html ← Startseite
├── kontakt.html
├── impressum.html
├── datenschutz.html
├── css/
│ └── style.css
└── img/
└── portrait.jpgDrei Regeln ersparen dir später viel Ärger: nur Kleinbuchstaben, keine Leerzeichen und keine Umlaute in Datei- und Ordnernamen. Der Webserver unterscheidet zwischen Bild.jpg und bild.jpg – dein Rechner oft nicht.
Schritt 2: Das HTML-Grundgerüst
Öffne den Ordner in deinem Editor und erstelle die Datei index.html. Der Name ist wichtig: Der Webserver zeigt diese Datei automatisch an, wenn jemand deine Domain aufruft. Füge dieses Grundgerüst ein:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Anna Beispiel – Fotografie aus Dortmund</title>
<meta name="description" content="Portrait- und Hochzeitsfotografie aus Dortmund. Jetzt Termin anfragen.">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
</html>Was die Zeilen bedeuten:
- <!DOCTYPE html> sagt dem Browser, dass es sich um ein modernes HTML5-Dokument handelt.
- lang="de" legt die Sprache fest – wichtig für Screenreader und Suchmaschinen.
- charset="UTF-8" sorgt dafür, dass Umlaute wie ä, ö und ü korrekt angezeigt werden.
- Die viewport-Angabe lässt deine Seite auf dem Smartphone richtig skalieren.
- <title> und description erscheinen im Browser-Tab und in den Google-Suchergebnissen.
- <link> bindet die CSS-Datei ein, die du in Schritt 4 anlegst.
Alles Sichtbare kommt zwischen <body> und </body>.
Schritt 3: Inhalte mit semantischem HTML
Statt alles in neutrale <div>-Container zu packen, nutzt du sogenannte semantische Elemente. Sie beschreiben, welche Rolle ein Bereich hat – das hilft Suchmaschinen und Menschen mit Screenreadern gleichermaßen. Ersetze den leeren <body> durch:
<body>
<header>
<a href="index.html" class="logo">Anna Beispiel</a>
<nav>
<ul>
<li><a href="index.html">Start</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h1>Fotografie, die bleibt</h1>
<p>Portraits und Hochzeitsreportagen aus Dortmund und dem Ruhrgebiet.</p>
<a href="kontakt.html" class="button">Termin anfragen</a>
</section>
<section>
<h2>Über mich</h2>
<img src="img/portrait.jpg" alt="Anna Beispiel mit Kamera im Studio" width="600" height="400">
<p>Seit zehn Jahren halte ich besondere Momente fest – natürlich und ungestellt.</p>
</section>
<section>
<h2>Leistungen</h2>
<ul>
<li>Portrait-Shootings</li>
<li>Hochzeitsreportagen</li>
<li>Business-Fotos</li>
</ul>
</section>
</main>
<footer>
<p>© 2026 Anna Beispiel</p>
<a href="impressum.html">Impressum</a>
<a href="datenschutz.html">Datenschutz</a>
</footer>
</body>Die wichtigsten Elemente im Überblick:
| Element | Wofür |
|---|---|
| <header> | Kopfbereich mit Logo und Navigation |
| <nav> | Hauptnavigation |
| <main> | Der eigentliche Inhalt – nur einmal pro Seite |
| <section> | Thematischer Abschnitt, meist mit eigener Überschrift |
| <h1> bis <h6> | Überschriften; pro Seite genau eine <h1> |
| <img> | Bild – immer mit aussagekräftigem alt-Text |
| <footer> | Fußbereich mit Impressum und Datenschutz |
Schritt 4: Design mit CSS
HTML liefert die Struktur, CSS das Aussehen. Erstelle im Ordner css die Datei style.css:
:root {
--farbe-akzent: #0b6e4f;
--farbe-text: #1d1d1f;
--farbe-hintergrund: #fafafa;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
line-height: 1.6;
color: var(--farbe-text);
background: var(--farbe-hintergrund);
}
header, main, footer {
max-width: 960px;
margin: 0 auto;
padding: 1rem;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
display: flex;
gap: 1.5rem;
list-style: none;
margin: 0;
padding: 0;
}
a { color: var(--farbe-akzent); }
.hero { padding: 4rem 0; }
.button {
display: inline-block;
padding: 0.75rem 1.5rem;
background: var(--farbe-akzent);
color: #fff;
text-decoration: none;
border-radius: 6px;
}
img { max-width: 100%; height: auto; }
@media (max-width: 600px) {
header { flex-direction: column; gap: 0.5rem; }
}Zwei Details sind bewusst gewählt: Die Farben stehen als Variablen oben in :root, sodass du dein Farbschema an einer einzigen Stelle änderst. Und die Schrift system-ui nutzt die Systemschrift des Geräts – so musst du keine Schriften von externen Servern laden, was auch aus Datenschutzsicht die sicherere Wahl ist.
Schritt 5: Unterseiten, Impressum und Datenschutz
Für jede weitere Seite kopierst du die index.html, benennst die Kopie um (etwa kontakt.html) und tauschst nur den Inhalt in <main> aus. Header und Footer bleiben gleich, damit die Navigation überall funktioniert.
Wichtig für Websites aus Deutschland: Sobald deine Seite nicht rein privat ist, brauchst du ein Impressum nach § 5 Digitale-Dienste-Gesetz (DDG) und eine Datenschutzerklärung nach DSGVO. Beide müssen von jeder Seite aus mit einem Klick erreichbar sein – deshalb stehen die Links im Footer. Für die Texte helfen Generatoren von Rechtsanwaltskanzleien; bei Unsicherheit lohnt sich eine rechtliche Beratung.
Schritt 6: Website lokal testen
Öffne die index.html per Doppelklick – sie erscheint in deinem Browser. Nach jeder Änderung speicherst du die Datei und lädst die Seite im Browser neu (F5 bzw. Cmd + R).
So prüfst du die Smartphone-Ansicht: Öffne die Entwicklertools mit F12 (Mac: Cmd + Option + I) und schalte die Geräteansicht ein. Klick dich außerdem durch alle Links und kontrolliere, ob jedes Bild lädt.
Tipp: Mit der Erweiterung „Live Server“ in Visual Studio Code aktualisiert sich der Browser bei jedem Speichern automatisch.
Schnelles und zuverlässiges Webhosting für deine Projekte
Blitzschnelle Ladezeiten, 99,9% Verfügbarkeit und deutscher Support. Deine Website läuft perfekt!
Schritt 7: Website bei checkdomain hochladen
Jetzt kommt deine Seite ins Netz. Voraussetzung ist ein Webhosting-Paket bei checkdomain, dem deine Domain zugeordnet ist.
FTP-Zugangsdaten im Kundenbereich finden
- 1. Melde dich im checkdomain Kundenbereich an.
- 2. Öffne Webhosting → FTP- & SSH-Zugänge.
- 3. Dort findest du Servername, Benutzername, Ports und die möglichen Verbindungsarten. Das Passwort wird aus Sicherheitsgründen nicht angezeigt – falls du es nicht mehr kennst, vergibst du hier einfach ein neues.
Mit FileZilla verbinden
- Installiere FileZilla und öffne über Datei → Servermanager eine neue Verbindung.
- Wähle als Protokoll SFTP. Es überträgt deine Daten verschlüsselt und ist unverschlüsseltem FTP immer vorzuziehen.
- Trage Server, Benutzername und Passwort ein. Den Port kannst du leer lassen, wenn du den Standard nutzt (22 für SFTP).
- licke auf Verbinden.
Eine ausführliche Anleitung mit allen Einstellungen findest du in unserem Artikel FileZilla einrichten.
Dateien in /htdocs hochladen
FileZilla zeigt links deinen Rechner und rechts deinen Webspace. Öffne rechts das Verzeichnis /htdocs und ziehe den Inhalt deines Ordners meine-website per Drag-and-drop hinüber – also index.html, css, img und so weiter, nicht den Ordner selbst. Sonst liegt deine Startseite unter /htdocs/meine-website/index.html und die Domain zeigt sie nicht an.
Ruf danach deine Domain im Browser auf. Siehst du deine Seite: Glückwunsch, du bist online.
Mehrere Domains, mehrere Websites? Im Kundenbereich unter Webhosting → Paketdomains legst du fest, in welches Verzeichnis eine Domain zeigt. So kann jede Domain ihre eigene Website aus einem separaten Ordner laden. Die Dateien müssen dann in genau diesen Ordner. Hilfe findest du hier: Wie ändere ich das Verzeichnis einer Domain
Schritt 8: SSL aktivieren und auf HTTPS umleiten
Ohne SSL-Zertifikat markieren Browser deine Seite als „nicht sicher“. Bei checkdomain ist ein kostenloses SSL-Zertifikat im Webhosting enthalten. Du aktivierst es im Kundenbereich unter SSL-Zertifikate. Sobald du die Bestätigungs-E-Mail erhalten hast, dass das Zertifikat installiert ist, leitest du alle Aufrufe auf HTTPS um. Mehr zur SSL-Einrichtung hier: SSL aktivieren
Dafür legst du in /htdocs eine Datei namens .htaccess an (mit Punkt am Anfang, ohne Endung):
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]Ab jetzt landet jeder Besucher automatisch auf der verschlüsselten Version deiner Seite.
Website mit KI erstellen
Du willst nicht jede Zeile selbst tippen? KI-Assistenten wie Claude, ChatGPT oder Gemini schreiben dir auf Zuruf vollständigen HTML- und CSS-Code. Das Ergebnis lädst du genauso hoch wie oben beschrieben – für den Webserver macht es keinen Unterschied, ob der Code von dir oder von einer KI stammt.
So gehst du vor
Beschreibe deine Website so konkret wie möglich. Je genauer dein Prompt, desto besser das Ergebnis. Zum Beispiel:
Erstelle eine einseitige Website für meine Fotografin-Selbstständigkeit
„Anna Beispiel“ aus Dortmund.
Anforderungen:
- Eine index.html und eine separate css/style.css, kein JavaScript
- Semantisches HTML5 (header, nav, main, section, footer), Sprache Deutsch
- Abschnitte: Hero mit Button „Termin anfragen“, Über mich, Leistungen
(Portrait, Hochzeit, Business), Kontakt mit E-Mail-Link
- Footer mit Links zu impressum.html und datenschutz.html
- Responsiv für Smartphone, ruhiges Design, Akzentfarbe Dunkelgrün
- Keine externen Schriften, Skripte oder Bilder von fremden Servern
- Bildpfade als Platzhalter unter img/, mit sinnvollen alt-Texten
- Kommentiere im Code, welcher Abschnitt was ist- Code übernehmen. Kopiere den Code in die passenden Dateien in deinem Projektordner. Viele KI-Tools zeigen dir die Seite auch direkt als Vorschau oder bieten die Dateien zum Download an.
- 3. Im Dialog verfeinern. Statt neu anzufangen, beschreibe Änderungen: „Mach die Navigation auf dem Smartphone zu einem Hamburger-Menü“ oder „Füge einen Bereich mit drei Kundenstimmen hinzu“.
- 4. Testen und hochladen – wie in Schritt 6 und Schritt 7.
Darauf solltest du bei KI-Code achten
- Externe Ressourcen prüfen: KI-Tools binden gern Schriften, Icons oder Bibliotheken von fremden Servern ein, etwa Google Fonts. Dabei wird die IP-Adresse deiner Besucher übertragen – ohne Einwilligung ist das datenschutzrechtlich heikel. Suche im Code nach https:// in <link>- und <script>-Tags und frag im Zweifel nach einer Variante ohne externe Einbindungen.
- Platzhalter ersetzen: KI erfindet gern Beispieltexte, Telefonnummern oder Kundenstimmen. Nichts davon darf live gehen.
- Rechtstexte nicht von der KI schreiben lassen: Impressum und Datenschutzerklärung müssen zu deinem konkreten Fall passen. Ein generierter Text ersetzt keinen geprüften Generator oder anwaltlichen Rat.
- Code verstehen wollen: Lass dir unklare Stellen erklären („Was macht dieser CSS-Block?“). So kannst du später selbst Kleinigkeiten ändern, ohne jedes Mal die KI zu fragen.
- Nichts Vertrauliches eingeben: Passwörter und FTP-Zugangsdaten gehören nicht in einen KI-Chat.
Häufige Fehler und Lösungen
| Problem | Ursache | Lösung |
|---|---|---|
| Domain zeigt eine leere Seite oder einen Fehler | Dateien liegen im falschen Ordner | Inhalt direkt nach /htdocs (bzw. in den der Domain zugewiesenen Ordner) laden |
| Startseite wird nicht gefunden | Datei heißt Index.html oder start.html | In index.html umbenennen, alles kleingeschrieben |
| Umlaute werden als Sonderzeichen angezeigt | Zeichenkodierung fehlt oder falsch | <meta charset="UTF-8"> einfügen und Datei als UTF-8 speichern |
| Bilder fehlen online, lokal aber nicht | Groß-/Kleinschreibung im Pfad weicht ab | Pfad und Dateiname exakt angleichen |
| Änderungen sind nicht sichtbar | Browser zeigt die alte Version aus dem Cache | Hart neu laden mit Strg + F5 (Mac: Cmd + Shift + R) |
| CSS wird nicht geladen | Pfad im <link>-Tag stimmt nicht | Ordnerstruktur prüfen, z. B. css/style.css |
HTML, Baukasten oder WordPress?
| Reines HTML/CSS | Homepage-Baukasten | WordPress | |
|---|---|---|---|
| Einstieg | Etwas Einarbeitung, mit KI deutlich schneller | Sehr einfach | Mittel |
| Ladezeit | Sehr schnell | Gut | Abhängig von Theme und Plugins |
| Pflegeaufwand | Keine Updates nötig | Keine | Regelmäßige Updates |
| Inhalte ändern | Im Code | Per Klick im Editor | Per Klick im Editor |
| Ideal für | Visitenkarten-Seiten, Portfolios, Landingpages | Einsteiger ohne Technik-Interesse | Blogs, größere Seiten, Shops |
Eine HTML-Website ist ideal, wenn deine Seite überschaubar bleibt und sich selten ändert. Planst du einen Blog oder willst du Inhalte regelmäßig ohne Code bearbeiten, ist WordPress die bessere Wahl.
Schnelles und zuverlässiges Webhosting für deine Projekte
Blitzschnelle Ladezeiten, 99,9% Verfügbarkeit und deutscher Support. Deine Website läuft perfekt!
FAQ
Brauche ich Programmierkenntnisse, um eine Website mit HTML zu erstellen?
Nein. HTML ist eine Auszeichnungssprache mit überschaubar vielen Elementen. Mit dieser Anleitung kommst du ohne Vorkenntnisse zu einer ersten Seite. Mit KI geht es noch schneller – ein Grundverständnis hilft dir aber, den Code zu prüfen und selbst anzupassen.
Kann ich eine mit KI erstellte Website bei checkdomain hosten?
Ja. KI-Tools erzeugen normalen HTML-, CSS- und bei Bedarf JavaScript-Code. Diese Dateien lädst du wie jede andere Website per SFTP in dein Webhosting.
Welches Webhosting-Paket brauche ich für eine HTML-Website?
Eine statische HTML-Website braucht kaum Ressourcen. Für die meisten Visitenkarten- und Portfolio-Seiten reicht ein Einsteigerpaket völlig aus. Achte darauf, dass FTP-/SFTP-Zugang und ein kostenloses SSL-Zertifikat enthalten sind.
Wie lange dauert es, bis meine Website online ist?
Sobald die Dateien hochgeladen sind, ist die Seite sofort unter deiner Domain erreichbar. Hast du die Domain gerade erst registriert oder umgezogen, kann es einige Stunden dauern, bis sie weltweit richtig aufgelöst wird.
Brauche ich für meine Website ein Impressum?
In Deutschland brauchst du ein Impressum, sobald deine Website geschäftsmäßig ist – das gilt schon bei Selbstständigen, Vereinen oder Seiten mit Werbung. Nur rein private Seiten für Familie und Freunde sind ausgenommen. Eine Datenschutzerklärung ist fast immer nötig, weil beim Aufruf jeder Website Daten wie die IP-Adresse verarbeitet werden.
Kann ich meine HTML-Website später auf WordPress umziehen?
Ja. Deine Texte und Bilder übernimmst du in WordPress, das Design setzt du mit einem Theme um. Die Domain und das Webhosting bleiben dabei gleich.
Fazit: Deine eigene Website in einem Nachmittag
Eine HTML-Website ist der direkteste Weg ins Netz: keine Updates, kein Datenbank-Ballast, volle Kontrolle über jede Zeile. Mit Grundgerüst, semantischem HTML und einer schlanken CSS-Datei hast du in wenigen Stunden eine schnelle, mobiltaugliche Seite. KI nimmt dir dabei die Tipparbeit ab – das Prüfen bleibt deine Aufgabe.
Du hast noch kein Zuhause für deine Website? Sichere dir deine Wunschdomain und das passende Webhosting bei checkdomain.
KI-Domain-Generator von checkdomain nutzen um deinen Domain Namen zu finden.
Gib einfach in das Suchfeld ein, worum es bei Deinem Business geht – zum Beispiel: „Onlineshop für handgemachte Seifen“ oder „Personal Trainer in Hamburg“. Unsere smarte KI analysiert Deine Beschreibung und schlägt Dir bis zu 10 kreative, passende und vor allem verfügbare Domains vor.
E-Mail-Login, IP-Check & mehr: Unsere meistgesuchten Ratgeber
Millionen Nutzer greifen täglich auf ihr E-Mail-Postfach zu – und nicht immer klappt der Login auf Anhieb. In unseren ausführlichen Anleitungen zeigen wir dir, wie du dich problemlos bei Web.de einloggst, den Hotmail-Login meisterst oder schnell auf dein GMX.de-Postfach zugreifst – inklusive Hilfe bei Störungen und vergessenen Zugangsdaten. Ebenso häufig gefragt: „Wie ist meine IP?" Unser Ratgeber erklärt dir, wie du deine IP-Adresse in Sekunden herausfindest und was sie über deinen Internetanschluss verrät. Du möchtest eine neue E-Mail-Adresse erstellen? Wir erklären dir Schritt für Schritt, wie du ein professionelles Postfach einrichtest – ob privat oder geschäftlich. Und wer schnell etwas übersetzen muss, findet in unserem Guide zum Google Übersetzer die wichtigsten Tipps und Tricks. Ist Dein Facbook Konto gehackt? In unserem Artikel findest du alles, was du dazu wissen musst.
WhatsApp
