Struktur und Navigation

Die Seite hat alles, was ein Besucher braucht, und wir haben die Adresse des Katzenheims an ihr Ende gesetzt. Aber ihr Code sagt nichts darüber aus, was jeder Teil der Seite ist, und auf einem Handy muss ein Besucher an allen Katzen vorbeiscrollen, um zu den Besuchszeiten zu kommen. Beides beheben wir jetzt.

Gib der Seite zuerst ihre Struktur, so wie du es mit der Katzenseite in der Lektion über weiterführende HTML-Elemente gemacht hast. Die Überschrift und die Einleitung bilden den Kopfbereich der Seite. Der Hauptinhalt hat zwei Abschnitte, Unsere Katzen und Besuchszeiten, jeweils mit allem, was dazugehört, und die Adresse kommt in den Fußbereich.

Füge dann oben auf der Seite eine Navigation hinzu: zwei Links, die den Besucher direkt zu den Abschnitten bringen. Probiere die Links danach in der Vorschau aus.

Das ist die ganze Seite. Die Seite des Katzenheims hat jetzt Bilder, die sich in voller Größe öffnen, eine Tabelle mit den Besuchszeiten und Navigationslinks, und Browser, Screenreader und Suchmaschinen erkennen, was jeder Teil von ihr ist. In der nächsten Lektion lernst du, Formulare zu bauen, damit die Seite des Katzenheims eines für Leute bekommen könnte, die eine Katze adoptieren möchten.