0511 62668500 info@onma.de
Erstgespräch
Jetzt anrufen Erstgespräch buchen
ONMA Ratgeber

Website programmieren: Tutorial vom leeren Ordner bis zur Live-Seite

Ein Beispielprojekt von der ersten Datei bis zur hochgeladenen Seite: vollständige HTML- und CSS-Blöcke, Dateistruktur und typische Fehlerbilder.

Dieses Tutorial führt Sie durch die Programmierung einer vollständigen Website. Wir bauen ein konkretes Beispielprojekt: eine Startseite für ein fiktives Fahrradcafé. Wir nutzen HTML und CSS ohne Frameworks. Sie lernen, wie Sie vom leeren Ordner über die Struktur und das Layout mit Flexbox und Grid bis hin zur mobilen Optimierung gelangen. Am Ende laden wir die Seite hoch, sodass sie unter einer echten Adresse erreichbar ist. Jede Station enthält das typische Fehlerbild, damit Sie Probleme sofort erkennen und beheben können.

Schritt 1: Ordner und Dateistruktur anlegen

Erstellen Sie in Ihrem Benutzerverzeichnis einen leeren Ordner mit dem Namen fahrradcafe. Darin legen Sie folgende Struktur an:

fahrradcafe/
├── index.html
├── style.css
└── bilder/
    └── theke.jpg

Die Startdatei heißt zwingend index.html. Das ist kein Zufall: Webserver liefern beim Aufruf eines Verzeichnisses standardmäßig eine Indexdatei aus. Beim Apache HTTP Server ist index.html der voreingestellte DirectoryIndex. Wenn Sie die Datei anders benennen, zum Beispiel start.html, müssten Besucher später immer den exakten Dateinamen in die Adresszeile eingeben.

Fehlerbild: Windows blendet bekannte Dateiendungen oft aus. Aus index.html wird dann unbemerkt index.html.txt. Der Browser zeigt dann Ihren Quellcode als einfachen Text an, statt die Seite zu rendern. Aktivieren Sie im Explorer die Anzeige der Dateinamenerweiterungen, bevor Sie starten.

Schritt 2: Den Editor einrichten

Nutzen Sie kein Textverarbeitungsprogramm wie Word, sondern einen Code-Editor. Visual Studio Code ist eine weit verbreitete und kostenlos nutzbare Option. Der Quellcode steht unter der MIT-Lizenz im Repository microsoft/vscode zur Verfügung.

Öffnen Sie in Visual Studio Code über “Datei” und “Ordner öffnen” den gesamten Ordner fahrradcafe und nicht nur die einzelne Datei. Nur so erkennt der Editor die Verknüpfungen zwischen den Dateien und kann Pfade korrekt vervollständigen.

Wer die Bedienung des Editors parallel vertiefen möchte, kann das kostenlose deutschsprachige Modul “Erste Schritte mit der Webentwicklung mit Visual Studio Code” von Microsoft Learn nutzen.

Schritt 3: Das HTML-Grundgerüst schreiben

Öffnen Sie die Datei index.html und geben Sie folgenden Code ein. HTML wird von der WHATWG als Living Standard gepflegt und laufend fortgeschrieben. Nummerierte Versionen wie “HTML5” werden daher nicht mehr eigenständig weiterentwickelt. Die Deklaration <!DOCTYPE html> ist das Signal an den Browser, die Seite im Standardmodus zu rendern.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Fahrradcafé Nordwind</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="kopf">
    <a class="logo" href="/">Nordwind</a>
    <nav class="menue">
      <a href="#angebot">Angebot</a>
      <a href="#werkstatt">Werkstatt</a>
      <a href="#kontakt">Kontakt</a>
    </nav>
  </header>
  <main>
    <section class="buehne">
      <h1>Kaffee trinken, während das Rad repariert wird</h1>
      <p>Werkstatt und Café unter einem Dach, täglich von 8 bis 19 Uhr.</p>
    </section>
  </main>
  <footer>
    <p>Fahrradcafé Nordwind, Musterstraße 1</p>
  </footer>
</body>
</html>

Die Meta-Tags im Head sind essenziell. charset="utf-8" stellt sicher, dass Umlaute korrekt dargestellt werden. Das Viewport-Tag ist die Voraussetzung für die mobile Ansicht: Ohne <meta name="viewport" content="width=device-width, initial-scale=1"> rendern mobile Browser die Seite in einem breiten virtuellen Viewport und skalieren sie herunter. In diesem Fall greifen die späteren CSS-Media-Queries nicht wie erwartet.

Speichern Sie die Datei und öffnen Sie diese per Doppelklick im Browser. Sie sehen nun unformatierten schwarzen Text auf weißem Grund. Das ist der korrekte Zwischenstand.

Fehlerbild: Statt der Überschrift erscheinen Kästchen oder Zeichen wie “é”. Dann fehlt die charset-Zeile oder der Editor hat die Datei nicht im UTF-8 Format gespeichert.

Schritt 4: Inhalt und Bild ergänzen

Erweitern Sie den Bereich main um eine Sektion für die Angebote und binden Sie ein Bild ein.

<section id="angebot" class="karten">
  <article class="karte">
    <h2>Café</h2>
    <p>Filterkaffee, Kuchen und ein Platz an der Fensterbank.</p>
  </article>
  <article class="karte">
    <h2>Werkstatt</h2>
    <p>Schlauchwechsel und Bremseinstellung ohne Termin.</p>
  </article>
  <article class="karte">
    <h2>Verleih</h2>
    <p>Sechs Stadträder, stundenweise ausleihbar.</p>
  </article>
</section>
<img src="bilder/theke.jpg" alt="Theke mit Espressomaschine und Werkzeugwand">

Das alt-Attribut ist laut HTML-Spezifikation für Bilder mit Inhaltsbedeutung erforderlich. Es liefert den Ersatztext für Screenreader und für den Fall, dass das Bild nicht geladen werden kann. Beschreiben Sie präzise, was zu sehen ist.

Fehlerbild: Ein zerbrochenes Bildsymbol wird angezeigt. Meist stimmt der Pfad nicht. src="bilder/theke.jpg" sucht relativ zur HTML-Datei. Ein führender Schrägstrich (src="/bilder/theke.jpg") sucht ab der Serverwurzel und funktioniert lokal oft nicht. Beachten Sie zudem die Groß- und Kleinschreibung: Theke.JPG ist ein anderer Name als theke.jpg.

Schritt 5: style.css anlegen und verknüpfen

Erstellen Sie die Datei style.css im selben Ordner wie die index.html. Die Verknüpfung wurde bereits im HTML-Head definiert. Starten Sie mit den Grundwerten:

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #1c1c1c;
  background: #fdfcf9;
}

.buehne { padding: 4rem 1.5rem; max-width: 60rem; margin: 0 auto; }
h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin-bottom: 1rem; }

Die Anweisung box-sizing: border-box sorgt dafür, dass Innenabstände (Padding) und Rahmen in die angegebene Breite eingerechnet werden. Ohne diese Zeile würde ein Element mit width: 100% und einem Padding breiter als sein Container werden, was zu einem unerwünschten waagerechten Scrollbalken führt.

Fehlerbild: Das Design ändert sich nicht. Prüfen Sie, ob die Datei exakt style.css heißt, im richtigen Ordner liegt und beide Dateien gespeichert wurden. Laden Sie die Seite im Browser mit Strg+F5 neu, um den Cache zu umgehen.

Schritt 6: Kopfzeile mit Flexbox, Karten mit Grid

Für die Anordnung von Elementen auf einer Achse nutzen wir Flexbox. Für mehrspaltige Layouts nutzen wir CSS Grid.

.kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e3ded2;
}

.menue { display: flex; gap: 1.5rem; }
.menue a { text-decoration: none; color: inherit; }

.karten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

.karte { background: #fff; border: 1px solid #e3ded2; padding: 1.5rem; }

repeat(3, 1fr) erzeugt drei gleich breite Spalten, wobei 1fr für einen Anteil des verfügbaren Platzes steht. CSS Grid Layout Level 1 wird von allen aktuellen Major-Browsern wie Chrome, Edge, Firefox und Safari unterstützt.

Fehlerbild: Die Karten stehen untereinander statt nebeneinander. Meist wurde display: grid auf das falsche Element angewendet. Flex und Grid werden immer beim Eltern-Element (Container) definiert, nicht beim Kind-Element.

Schritt 7: Media Queries für kleine Bildschirme

Drei Spalten sind auf einem Smartphone unlesbar. Eine Media Query passt das Layout an, wenn die Bildschirmbreite sinkt.

@media (max-width: 48rem) {
  .karten { grid-template-columns: 1fr; }
  .kopf { flex-direction: column; gap: 0.75rem; }
  .buehne { padding: 2.5rem 1.25rem; }
}

Testen Sie dies, indem Sie das Browserfenster schmaler ziehen. Unterhalb von 48rem (ca. 768 Pixeln) springen die Karten in eine einzige Spalte.

Fehlerbild: Am Desktop funktioniert der Umbruch, auf dem Handy sieht die Seite jedoch winzig aus. In diesem Fall fehlt das Viewport-Meta-Tag aus Schritt 3.

Schritt 8: Prüfen mit Entwicklertools und Validator

Nutzen Sie die Entwicklertools des Browsers. Diese öffnen Sie unter Windows und Linux mit F12 oder Strg+Umschalt+I, unter macOS mit Cmd+Option+I. Im Bereich “Elements” oder “Inspektor” können Sie einzelne Elemente anklicken und rechts sehen, welche CSS-Regeln aktiv sind. Durchgestrichene Regeln wurden durch andere überschrieben.

Prüfen Sie anschließend Ihr HTML mit dem W3C Markup Validation Service. Dieser prüft Dokumente per URL oder Datei-Upload gegen den Standard und meldet Fehler zeilengenau. Häufige Fehler sind nicht geschlossene Tags oder doppelt vergebene IDs.

Schritt 9: Hochladen und live prüfen

Da die Seite aus statischen Dateien besteht, genügt ein Hosting für statische Inhalte. GitHub Pages veröffentlicht HTML, CSS und JavaScript direkt aus einem Repository und ist für öffentliche Repositories in allen Plänen enthalten.

Der Ablauf ist simpel: Repository anlegen, den Inhalt des Ordners fahrradcafe hochladen (die index.html muss in der obersten Ebene liegen) und in den Einstellungen unter “Pages” den Branch als Quelle wählen.

Prüfen Sie die Live-Seite auf drei Punkte:

  1. Lädt die Seite ohne Dateinamen in der Adresse?
  2. Wird das Bild korrekt angezeigt?
  3. Funktioniert die Media Query auf einem echten Smartphone?

Nutzen Sie im Netzwerk-Reiter der Entwicklertools den Statuscode. Ein 404 Fehler bei der style.css bedeutet, dass die Datei nicht gefunden wurde.

Fehlerbild: Lokal sieht alles gut aus, online fehlen Styles und Bilder. Die Ursache ist oft die Groß- und Kleinschreibung oder ein Unterordner zu viel, weil der Projektordner selbst statt seines Inhalts hochgeladen wurde.

Zusammenfassung und Ausblick

Sie haben eine vollständige Website programmiert. Sie besteht aus einer validen HTML-Datei, einem eigenen Stylesheet, einem responsiven Layout mit Flexbox und Grid sowie einer erreichbaren Adresse.

Für weitere Erweiterungen nutzen Sie denselben Zyklus: Datei ändern, speichern, im Browser prüfen, in den Entwicklertools analysieren und hochladen. Der nächste logische Schritt wäre JavaScript, um interaktive Elemente wie ein mobiles Menü zu bauen. Bei einer geschäftlichen Nutzung ist zudem eine Seite mit rechtlichen Pflichtangaben erforderlich. Beides sind separate Themen, die über diesen Bauweg hinausgehen.