Eine kleine Seite bauen

Eine vollständige einseitige Website für eine Bäckerei im Viertel passt in etwa 50 Zeilen HTML, und jedes Element darin stammt aus den letzten neun Einheiten.

Erst planen, dann tippen

Bevor du HTML schreibst, notier in einfachen Worten und in der richtigen Reihenfolge, was die Seite sagen soll. Für eine kleine Bäckerei könnte das sein: der Name, ein kurzes Menü aus Links, was heute gebacken wird, die Öffnungszeiten, ein Bild vom Brot, eine Möglichkeit, Neuigkeiten zu abonnieren, und die Adresse. Jeder Punkt legt dann ein Element nahe: Der Name ist ein <h1> in einem <header>, die Links kommen in ein <nav>, die Öffnungszeiten sind eine Tabelle, die Brotliste ist eine <ul>, die Anmeldung ist ein Formular, und die Adresse gehört in den <footer>. Erst den Inhalt zu planen, machen auch professionelle Teams so. Das HTML ergibt sich daraus.

Die fertige Struktur

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Corner Bakery</title>
</head>
<body>
  <header>
    <h1>Corner Bakery</h1>
    <nav>
      <ul>
        <li><a href="#today">Today</a></li>
        <li><a href="#hours">Hours</a></li>
        <li><a href="#news">News</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section id="today">
      <h2>Baked today</h2>
      <ul>...</ul>
    </section>
    <section id="hours">
      <h2>Opening hours</h2>
      <table>...</table>
    </section>
    <section id="news">
      <h2>Get our news</h2>
      <form>...</form>
    </section>
  </main>
  <footer>
    <p>12 Mill Street, Springfield</p>
  </footer>
</body>
</html>

Zwei Zeilen im head sind neu. <meta name="viewport" content="width=device-width, initial-scale=1"> sagt Handys, dass sie die echte Bildschirmbreite verwenden sollen, statt einen Desktop-Bildschirm vorzutäuschen und die Seite zu verkleinern. Der CSS-Kurs erklärt das in der Einheit über responsives Design. Das Menü ist eine Liste von Links in <nav>, die Screenreader als „Navigation, Liste, 3 Einträge“ ansagen. Jeder Menülink zeigt auf die id eines Abschnitts, sodass die Seite als ein einziges scrollendes Dokument funktioniert.

Prüf sie wie ein Gutachter

Wenn die Seite geschrieben ist, geh sie so durch, wie es ein sorgfältiger Gutachter tun würde. Lies nur die Überschriften: Erzählen sie die Geschichte der Seite? Drück von oben an Tab: Erreichst du jeden Link und jedes Formularfeld in sinnvoller Reihenfolge, und siehst du, wo der Fokus ist? Schau dir jedes Bild an: Sagt sein Alternativtext, was ohne es verloren ginge, oder ist er leer, weil das Bild Schmuck ist? Klick jedes Label an: Setzt es den Fokus in sein Feld? Füg die Seite zum Schluss in den W3C Markup Validation Service unter validator.w3.org ein. Er listet Fehler wie nicht geschlossene Elemente oder doppelte ids auf.

Die Seite wird schlicht aussehen: schwarzer Text auf Weiß, blaue Links, die Standardschriften des Browsers. Das ist in Ordnung und sogar nützlich. Eine Seite mit gutem HTML ist schon auf jedem Gerät lesbar, funktioniert mit Tastatur und Screenreader und lässt sich drucken. Der CSS-Kurs beginnt mit genau so einer Seite und fügt Farbe, Abstände und Layout hinzu, ohne eine Zeile des HTML zu ändern.

In kleinen Schritten bauen

Schreib die Seite in kleinen Schritten und schau dir nach jedem das Ergebnis an: zuerst das Grundgerüst, dann Kopfbereich und Menü, dann einen Abschnitt nach dem anderen. Sieht etwas falsch aus, musst du nur ein paar neue Zeilen prüfen. Auf deinem eigenen Computer speicherst du die Datei als index.html und öffnest sie per Doppelklick. Der Browser zeigt sie direkt von der Festplatte an. Zum Veröffentlichen lädst du dieselbe Datei zu einem Webhoster hoch, und der Server schickt sie an jeden, der die Adresse aufruft, genau wie es in der ersten Einheit begann.