Deine erste Website: Domain, Hosting und Code

Schreibe zuerst den Satz, den Besucher verstehen sollen.

Notiere: „Ich helfe dieser Zielgruppe bei diesem Problem mit dieser Leistung.“ Ergänze einen einzigen nächsten Schritt: anrufen, eine Anfrage senden oder einen Termin vereinbaren. Eine erste Seite braucht keine fünf gleich wichtigen Aufforderungen. Prüfe deinen Satz mit einer Person, die dein Geschäft nicht kennt. Kann sie das Angebot in eigenen Worten wiedergeben?

Lege danach drei Abschnitte fest: das Problem und dein Angebot, der konkrete Nutzen, der Weg zur Kontaktaufnahme. Verwende nur belegbare Referenzen und eigene oder ausreichend lizenzierte Bilder. Ein professioneller Eindruck entsteht nicht durch erfundene Erfolgszahlen, sondern durch klare Informationen und passende Beispiele.

Adresse, Ablage und Inhalt sind drei verschiedene Dinge.

Die Domain ist die Adresse deiner Website. Das Hosting stellt die Seite im Internet bereit. HTML beschreibt die Inhalte, CSS das Aussehen, JavaScript bei Bedarf das Verhalten. Ein Quellcode-Repository verwaltet Dateien und Änderungen. Es ist nicht automatisch schon die laufende Website; dafür braucht es eine Veröffentlichungsfunktion oder einen angeschlossenen Hoster.

Diese Bausteine können bei einem Anbieter liegen, müssen es aber nicht. Ein Baukasten bündelt vieles, während eigener Code mehr Gestaltungsfreiheit mit eigenen Betriebsaufgaben verbindet. Eine reine Informationsseite benötigt nicht automatisch eine Datenbank. Benutzerkonten, gespeicherte Anfragen oder Bestellungen verändern die Anforderungen deutlich.

Zum Nachlesen: MDN: Grundlagen der Website-Veröffentlichung

Baue die erste Version ohne laufende Kosten.

Lege einen neuen Ordner an. Speichere den folgenden Inhalt darin mit einem einfachen Texteditor als index.html in UTF-8. Öffne die Datei per Doppelklick. Der Link springt nur zum Kontaktabschnitt; es werden keine Anfragen übertragen. Passe danach Überschrift, Nutzen und Beschreibung an. Lass den sichtbaren Entwurfshinweis stehen, bis du die Seite fachlich geprüft hast.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Mein Angebot – lokaler Entwurf</title>
  <style>
    body { font:18px/1.7 system-ui; color:#10123f; margin:40px auto;
      padding:0 20px; max-width:780px; }
    h1 { line-height:1.15; font-size:clamp(32px,6vw,54px); }
    section { margin:36px 0; }
    a { color:inherit; text-underline-offset:4px; }
    a:focus-visible { outline:3px solid #10123f; outline-offset:5px; }
  </style>
</head>
<body>
  <header><p>Lokaler Entwurf · Fiktives Beispiel</p>
    <h1>Weniger Papierarbeit. Mehr Zeit für deinen Betrieb.</h1>
    <p>Hier beschreibst du dein Angebot in einem klaren Satz.</p>
    <a href="#kontakt">So geht es weiter</a>
  </header>
  <main>
    <section aria-labelledby="nutzen"><h2 id="nutzen">Dein Nutzen</h2>
      <ul><li>Informationen schneller finden.</li>
      <li>Wiederkehrende Schritte vereinfachen.</li></ul>
    </section>
    <section aria-labelledby="kontakt"><h2 id="kontakt">Kontakt</h2>
      <p>Hier ergänzt du später deinen geprüften Kontaktweg.</p>
      <p>Dieser Entwurf versendet keine Daten.</p>
    </section>
  </main>
  <footer><p>Nicht zur geschäftlichen Veröffentlichung freigegeben.</p></footer>
</body>
</html>

Prüfe das Ergebnis, bevor du Technik dazukaufst.

1. Öffne die Datei erneut nach einer Änderung. Wird der neue Text angezeigt? Falls nicht, prüfe Dateiendung, Speicherort und Browseraktualisierung.
2. Verkleinere das Browserfenster. Der Text soll umbrechen, ohne horizontal über die Seite hinauszulaufen. Teste zusätzlich eine vergrößerte Schrift beziehungsweise Browser-Zoom.
3. Bediene den Link nur mit Tabulator und Enter. Der Fokus muss erkennbar sein und der Sprung zum Kontaktabschnitt funktionieren.
4. Lass eine andere Person Angebot und nächsten Schritt erklären. Unverständliche Formulierungen überarbeitest du vor dekorativen Effekten.
5. Erstelle eine Veröffentlichungsliste: freigegebene Inhalte, passende Domain, Hosting, HTTPS, tatsächlicher Kontaktweg und die für deinen Auftritt geklärten rechtlichen Informationen.

Vom Entwurf zur erreichbaren Website.

Für den nächsten Schritt veröffentlichst du zunächst eine rein fiktive Testseite beim passenden Hoster. Danach verbindest du eine eigene Adresse. So prüfst du Inhalt, Hosting und Domain nacheinander und suchst bei Problemen nicht gleichzeitig an drei Stellen.

Halte Domain und wichtige Konten unter deiner Kontrolle. Dokumentiere, wer die Seite ändern darf, wo der vollständige Quellstand liegt und wie eine funktionierende Version wiederhergestellt wird. Eine schöne Übergabe ohne diese Informationen macht spätere Änderungen unnötig abhängig.