Das HTML-Grundgerüst: von der E-Mail zur ersten Seite

Worum es geht

Aylin ist im ersten Lehrjahr als Informatikerin Applikationsentwicklung bei der Codehaus Biel AG. Ihre Berufsbildnerin gibt ihr das erste eigene Kundenprojekt: Das Café am See in Nidau, ein kleines Bäckerei-Café mit sechs Tischen und Terrasse, hat bisher nur eine Facebook-Seite. Die Inhaberin Rita Gerber möchte eine eigene Website mit Angebot, Öffnungszeiten, Catering-Anfrage und Kontakt.

Am Montagmorgen liegt eine E-Mail in Aylins Postfach. Darin stehen die Texte, ein paar Fotos und der Satz: «Schön wäre etwas Warmes, Gemütliches, so wie bei uns im Café.» Die Versuchung ist gross, sofort mit Farben und Schriften loszulegen. Aylin macht es anders und beginnt mit dem, was jede Website trägt: einem sauberen HTML-Gerüst.

Warum zuerst die Struktur? Weil alles andere darauf aufbaut. Das Design kommt später per CSS dazu, Suchmaschinen lesen die Struktur, Screenreader lesen sie blinden Menschen vor, und auch Frameworks wie React oder Vue erzeugen am Ende nichts anderes als HTML. Wer HTML sauber beherrscht, versteht später jedes Frontend schneller.

Nach dieser Lektion kannst du eine HTML-Datei mit korrektem Grundgerüst anlegen, Inhalte mit den wichtigsten Elementen auszeichnen, Seiten über relative Pfade verlinken und Dateinamen so wählen, dass sie auf jedem Server funktionieren. Und du schreibst dein erstes Code-Labor, das HTML erzeugt.

Wie eine Webseite in den Browser kommt

Wenn du https://cafe-am-see.ch eintippst, passiert in Sekundenbruchteilen Folgendes:

Der Browser holt zuerst die HTML-Datei. Beim Lesen findet er Verweise auf weitere Dateien (Stylesheet, Bilder, Schriften) und holt diese nach. Eine Website ist also nichts Magisches, sondern eine Sammlung von Textdateien und Bildern in Ordnern.

Drei Sprachen teilen sich die Arbeit. Ein Vergleich mit einem Haus hilft:

In diesem Modul arbeitest du fast nur mit HTML und CSS. JavaScript nutzt du hier vor allem in den Code-Laboren, um Web-Logik zu üben.

Elemente, Tags und Attribute

HTML besteht aus Elementen. Ein Element hat meistens einen Start-Tag, einen Inhalt und einen End-Tag:

<a href="angebot.html" title="Unser Angebot">Angebot ansehen</a>

Einige Elemente haben keinen Inhalt und darum auch keinen End-Tag. Man nennt sie leere Elemente (void elements). Die wichtigsten sind img, br, hr, input, meta und link:

<img src="bilder/zopf.webp" alt="Frisch gebackener Butterzopf auf einem Holzbrett">

Elemente lassen sich verschachteln wie Schachteln: Was du zuletzt geöffnet hast, schliesst du zuerst. <p><strong>Frisch</strong> aus dem Ofen</p> ist korrekt. <p><strong>Frisch</p></strong> ist falsch, weil sich die Schachteln überkreuzen.

Die Elemente, die du in den ersten Stunden am häufigsten brauchst:

Das Grundgerüst jeder Seite

Jede HTML-Seite hat dasselbe Gerüst. Lerne es auswendig, du schreibst es hundertmal:

<!DOCTYPE html>
<html lang="de-CH">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Café am See, Nidau: Bäckerei und Café am Bielersee</title>
  <meta name="description" content="Frische Gipfeli, Zopf und Kuchen, Frühstück am See und Catering für Firmen und Feste in Nidau.">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <!-- Alles Sichtbare steht hier -->
</body>
</html>

Zeile für Zeile:

• <!DOCTYPE html> sagt dem Browser: Das ist modernes HTML. Ohne diese Zeile schaltet er in einen Kompatibilitätsmodus mit alten Regeln.
• <html lang="de-CH"> umschliesst alles und nennt die Sprache. Screenreader wählen damit die richtige Aussprache, Browser die richtige Silbentrennung.
• Im head stehen Informationen über die Seite, die nicht direkt im Inhalt erscheinen.
• <meta charset="utf-8"> legt die Zeichenkodierung fest. Ohne sie werden aus «Café» und «Öffnungszeiten» schnell kryptische Zeichen.
• <meta name="viewport" ...> braucht es für Smartphones. Was er genau bewirkt, lernst du in Lektion 5.
• <title> erscheint im Browser-Tab, in Lesezeichen und als blauer Titel in den Suchergebnissen.
• <meta name="description"> ist der kurze Text, den Suchmaschinen oft unter dem Titel anzeigen.
• <link rel="stylesheet"> bindet die CSS-Datei ein.
• Im body steht alles, was die Besucherin sieht.

Block- und Inline-Elemente, Links und Pfade

Elemente verhalten sich im Fluss der Seite unterschiedlich. Blockelemente wie p, h1, ul oder section beginnen auf einer neuen Zeile und nehmen die volle verfügbare Breite ein, wie Ziegelsteine, die man aufeinanderstapelt. Inline-Elemente wie a, strong, em, span oder img fliessen mitten im Text mit, wie farbige Wörter in einem Satz. Ein Link in einem Absatz bricht die Zeile also nicht um.

Links verbinden die Seiten. Für Seiten und Dateien deiner eigenen Website verwendest du relative Pfade. Sie beschreiben den Weg von der aktuellen Datei zur Zieldatei. Nimm diese Ordnerstruktur:

cafe-am-see/
  index.html
  angebot.html
  catering.html
  kontakt.html
  css/
    style.css
  bilder/
    zopf.webp
    logo.svg
  rechtliches/
    impressum.html

../ heisst «einen Ordner nach oben». Ein Pfad mit führendem Schrägstrich wie /css/style.css beginnt dagegen beim Wurzelverzeichnis der Domain. Das klingt praktisch, funktioniert aber nicht, wenn du die Datei lokal per Doppelklick öffnest, und auch nicht auf einer GitHub-Pages-Projektseite, die unter einem Unterordner liegt. Bleib darum bei relativen Pfaden.

cafe-am-see/
  index.html
  css/
    style.css
  rechtliches/
    impressum.html

Zwei Link-Arten sind für ein Café besonders nützlich: <a href="tel:+41323651234">032 365 12 34</a> öffnet auf dem Handy direkt die Telefon-App, <a href="mailto:info@cafe-am-see.ch"> das Mailprogramm.

Schritt für Schritt: Die Startseite des Café am See

Aylin baut die Startseite aus Rita Gerbers E-Mail. Noch ohne eine Zeile CSS.

Schritt 1: Ordner anlegen. In Visual Studio Code öffnet sie einen neuen Ordner cafe-am-see und legt die Struktur von oben an. Die Fotos benennt sie sofort um: aus IMG_4711 Zopf.JPG wird zopf.jpg (in WebP umgewandelt wird später, in Lektion 7).

Schritt 2: Grundgerüst schreiben. In index.html tippt sie das Gerüst von oben. In VS Code geht das auch mit ! und Tab, aber Aylin ergänzt danach von Hand lang="de-CH", den Titel und die Beschreibung.

Schritt 3: Bereiche festlegen. Der Inhalt bekommt drei grosse Bereiche: header mit Logo und Navigation, main mit dem eigentlichen Inhalt, footer mit Adresse und Telefon.

Schritt 4: Inhalte auszeichnen. Sie überlegt bei jedem Textstück: Was ist das? Der Name des Cafés ist die wichtigste Überschrift (h1), «Heute frisch» ist eine Unterüberschrift (h2), die Produkte sind eine Aufzählung (ul).

Schritt 5: Ergebnis.

<!DOCTYPE html>
<html lang="de-CH">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Café am See, Nidau: Bäckerei und Café am Bielersee</title>
  <meta name="description" content="Frische Gipfeli, Zopf und Kuchen, Frühstück am See und Catering in Nidau.">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <a href="index.html"><img src="bilder/logo.svg" alt="Café am See, zur Startseite"></a>
    <nav>
      <ul>
        <li><a href="angebot.html">Angebot</a></li>
        <li><a href="catering.html">Catering</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <h1>Café am See: Bäckerei und Café in Nidau</h1>
    <p>Seit 1998 backen wir jeden Morgen ab vier Uhr. Mit Blick auf den Bielersee.</p>

    <h2>Heute frisch</h2>
    <ul>
      <li>Buttergipfeli</li>
      <li>Butterzopf, 500 g</li>
      <li>Aprikosenwähe</li>
    </ul>
    <img src="bilder/zopf.jpg" alt="Frisch gebackener Butterzopf auf einem Holzbrett">

    <h2>Catering für Ihr Fest</h2>
    <p>Apéro, Brunch oder Firmenanlass ab 10 Personen. <a href="catering.html">Jetzt anfragen</a></p>
  </main>

  <footer>
    <p>Café am See, Seestrasse 12, 2560 Nidau</p>
    <p>Telefon <a href="tel:+41323651234">032 365 12 34</a></p>
  </footer>
</body>
</html>

Schritt 6: Im Browser prüfen. Aylin öffnet die Datei per Doppelklick. Die Seite sieht schlicht aus: schwarze Schrift, blaue Links, Aufzählungspunkte. Genau so soll es sein. Sie liest die Seite von oben nach unten und fragt sich: Verstehe ich alles, auch ohne Design? Ja. Die Struktur trägt.

Schritt 7: Quelltext kontrollieren. Mit Rechtsklick und «Untersuchen» öffnet sie die DevTools und klappt im Tab «Elements» die Bereiche auf. Jedes Element sitzt in der richtigen Schachtel.

Typische Fehler

1. Sofort gestalten. Wer schon in der ersten Stunde Farben setzt, vermischt Struktur und Design und wählt Elemente nach Aussehen. Erst den Inhalt komplett in HTML, dann CSS.
2. Überkreuzte Tags. <p><em>Hallo</p></em> ist ungültig. Was zuletzt geöffnet wurde, wird zuerst geschlossen. VS Code hilft mit farbigen Klammern und automatischem Schliessen.
3. Fehlendes alt-Attribut. Jedes img braucht alt. Ohne Text erfährt eine blinde Person nicht, was zu sehen ist. Mehr dazu in Lektion 7.
4. Absolute Pfade zur eigenen Festplatte. src="C:\Users\aylin\Desktop\zopf.jpg" funktioniert nur auf Aylins Laptop. Auf dem Server existiert dieser Ordner nicht. Immer relative Pfade.
5. Leerzeichen und Grossbuchstaben in Dateinamen. Über uns.html führt auf dem Server zu kaputten Links. Besser: ueber-uns.html.

Zusammenfassung

• Eine Website besteht aus Dateien: HTML für Inhalt und Struktur, CSS für das Aussehen, Bilder und allenfalls JavaScript.
• Ein Element besteht aus Start-Tag, Inhalt und End-Tag. Attribute stehen im Start-Tag. Leere Elemente wie img und meta haben keinen End-Tag.
• Das Grundgerüst: <!DOCTYPE html>, html mit lang, head mit charset, viewport, title, description und Stylesheet, dann body.
• Blockelemente stapeln sich, Inline-Elemente fliessen im Text.
• Für eigene Dateien immer relative Pfade, ../ geht einen Ordner nach oben.
• Dateinamen: klein, ohne Leerzeichen und Umlaute, mit Bindestrichen.