HTML-Kurs / Eine kleine Website mit mehreren Seiten erstellen

Eine kleine mehrseitige Website kombiniert die Dokumentstruktur, semantische Bereiche, Links und Formulare. In diesem Projekt erstellen Sie die Seiten Startseite, Über uns und Kontakt in demselben Ordner, navigieren zwischen ihnen und überprüfen das Ergebnis. HTML allein kann keine Kontaktnachrichten empfangen oder speichern, daher ist das Formular hier eine Eingabedemonstration und kein funktionierender Kontaktservice.

Bereiten Sie die Dateien vor

Erstellen Sie einen neuen Ordner und speichern Sie diese drei einfachen UTF-8-Textdateien darin. Ihre Dateinamen müssen genau den Werten von href im Menü entsprechen. Vergleichen Sie zunächst, wie sich die relativen Pfade von den Speicherorten der Dateien in Links: Pfade, Seitenfragmente und E-Mail auflösen.

small-site/

  index.html

  about.html

  contact.html

Stellen Sie sicher, dass der Editor keine andere Erweiterung hinzugefügt hat, wie zum Beispiel .txt. Das Zusammenhalten der drei Dateien ermöglicht es href="about.html", die Seite „Über uns“ mithilfe eines relativen Pfads zu finden. Wenn Sie später eine Datei in einen anderen Ordner verschieben, aktualisieren Sie die entsprechenden Links. Beenden Sie zuerst die rein textbasierte Version; dann können Sie die Bilder hinzufügen, deren Verwendung Ihnen erlaubt ist, mit einem entsprechenden Alternativtext.

Erstellen Sie die Startseite

Speichern Sie das folgende vollständige Dokument unter dem Namen index.html. Verwenden Sie auf jeder Seite dieselben drei Menüziele. Die Rollen von header, nav und main folgen dem semantischen Layout in Eine Seite mit semantischen Elementen strukturieren.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Startseite | Kleiner Garten</title>
  <meta name="description" content="Startseite der Übungsseite Kleiner Garten, mit Links zur Vorstellung und einer Kontaktformularübung.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Hauptnavigation">
      <a href="index.html" aria-current="page">Startseite</a>
      <a href="about.html">Über uns</a>
      <a href="contact.html">Kontakt</a>
    </nav>
  </header>
  <main>
    <h1>Kleiner Garten</h1>
    <p>Ein kleiner Leitfaden für Personen, die beginnen, Pflanzen anzubauen.</p>
  </main>
  <footer><p>Übungsseite Kleiner Garten</p></footer>
</body>
</html>

Das Öffnen von index.html sollte ein Menü und den Titel „Kleiner Garten“ anzeigen. Die Links Über uns und Kontakt funktionieren erst, nachdem Sie deren Dateien im selben Ordner erstellt haben. Das hier gezeigte h1 gehört zur Beispielseite, nicht zu diesem Tutorial.

Erstellen Sie die Seiten Über uns und Kontakt

Speichern Sie das folgende vollständige Dokument unter dem Namen about.html. Es behält die gleichen Zielseiten des Menüs bei, während für Über uns ein eigener Titel, eine Beschreibung und der aktuelle Menüstatus vergeben wird. Die Unterscheidung zwischen dem Prüfen der GET-Werte und dem Empfangen der Nachrichten folgt der Erklärung der Anfrage in Formularstruktur und GET vs. POST.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Über uns | Kleiner Garten</title>
  <meta name="description" content="Vorstellung der Übungsseite Kleiner Garten, gedacht für Personen, die beginnen, Pflanzen anzubauen.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Hauptnavigation">
      <a href="index.html">Startseite</a>
      <a href="about.html" aria-current="page">Über uns</a>
      <a href="contact.html">Kontakt</a>
    </nav>
  </header>
  <main>
    <h1>Über uns</h1>
    <p>Kleiner Garten ist eine Übungsseite für Personen, die anfangen, Pflanzen zu züchten.</p>
  </main>
  <footer><p>Übungsseite Kleiner Garten</p></footer>
</body>
</html>

Speichern Sie das folgende vollständige Dokument unter dem Namen contact.html. Das Übungsformular übermittelt die Eingaben mit GET an die URL des aktuellen Dokuments und sendet keine echte Nachricht.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kontakt | Kleiner Garten</title>
  <meta name="description" content="Üben Sie, einen Namen und eine Testnachricht einzugeben und zu bestätigen, ohne eine echte Kontaktanfrage zu senden.">
  <style>
    body { margin: 1rem; font-family: sans-serif; line-height: 1.6; }
    nav a { display: inline-block; margin: 0 .5rem .5rem 0; }
    nav a[aria-current="page"] { font-weight: bold; }
    textarea, input { max-width: 100%; box-sizing: border-box; font: inherit; }
    textarea { width: 24rem; }
    :focus-visible { outline: 3px solid #005fcc; outline-offset: 3px; }
  </style>
</head>
<body>
  <header>
    <nav aria-label="Hauptnavigation">
      <a href="index.html">Startseite</a>
      <a href="about.html">Über uns</a>
      <a href="contact.html" aria-current="page">Kontakt</a>
    </nav>
  </header>
  <main>
    <h1>Übung zum Kontaktformular</h1>
    <p>Dieses Beispiel sendet keine Nachrichten. Verwenden Sie nur Testtexte.</p>
    <form method="get">
      <p><label for="visitor-name">Name</label>
        <input id="visitor-name" name="name" required></p>
      <p><label for="message">Nachricht</label>
        <textarea id="message" name="message" rows="4" required></textarea></p>
      <button type="submit">Eingegebene Werte überprüfen</button>
    </form>
  </main>
  <footer><p>Übungsseite Kleiner Garten</p></footer>
</body>
</html>

Jeder Block ist ein vollständiges Dokument, daher speichern Sie ihn als ganze Datei, anstatt ein weiteres html- oder main-Element innerhalb einer vorhandenen Kopie zu platzieren. Behalten Sie dieselben Menüziele bei, aber setzen Sie aria-current="page" nur auf den Link, der dieses Dokument darstellt.

„Eingegebene Werte überprüfen“ sendet keine Nachricht an irgendjemanden. Der Browser überprüft die Pflichtfelder und übermittelt die Eingaben mithilfe von GET an die URL des aktuellen Dokuments. Testen Sie nur mit Platzhaltertext, da die übermittelten Werte in der URL erscheinen können. Ein echter Kontaktservice erfordert einen serverseitigen Handler, Datenschutzmaßnahmen, Anti-Spam-Kontrollen und eine klare Erfolgs- oder Fehlerinformation.

Verwenden Sie diese Tabelle, um die fertigen Bildschirme zu vergleichen. Der aktuelle Link wird fett angezeigt, während aria-current seinen Status unabhängig von dieser visuellen Behandlung übermittelt.

Prüfen Sie die Erfolgskriterien und erweitern Sie die Website schrittweise

Vervollständigen Sie die Grundversion, bevor Sie jeweils eine Erweiterung hinzufügen: eine nützliche Liste im Bereich „Über uns“, ein Bild mit geeignetem Alternativtext oder optionale Informationen in einem details-Element. Wiederholen Sie die Überprüfungen von Navigation, Syntax und Tastatur nach jeder Ergänzung, damit ein neues Problem nur einer einzigen Änderung zugeordnet werden kann.

Beim Aktualisieren eines gemeinsamen Menüs aktualisieren Sie alle drei Kopien, setzen Sie jedoch aria-current auf den entsprechenden Link in jeder von ihnen. Testen Sie die relativen Pfade nach der Bereitstellung erneut: Die Groß- und Kleinschreibung des Dateinamens und das Bereitstellungsverzeichnis können von der lokalen Umgebung abweichen.

Überprüfen Sie die fertige Website

1. Öffnen Sie index.html und bestätigen Sie, dass jeder Menülink die richtige Datei öffnet.
2. Navigieren Sie von „Über uns“ und „Kontakt“ auch zu den beiden anderen Seiten; testen Sie nicht nur das Startseitenmenü.
3. Stellen Sie sicher, dass jeder sichtbare Tab-Titel und h1 diese Seite beschreibt.
4. Verwenden Sie Tab, um jeden Link und jedes Kontaktfeld-Steuerelement zu erreichen.
5. Versuchen Sie, leere Felder einzureichen, und geben Sie dann Testwerte ein, während Sie die URL beobachten.
6. Überprüfen Sie jede Datei mit dem Nu HTML Checker, korrigieren Sie die Fehler und überprüfen Sie erneut.

Wenn ein Link fehlschlägt, überprüfen Sie zuerst den Dateinamen und den relativen Pfad. Wenn Sie ein gemeinsames Menü ändern, aktualisieren Sie die drei Kopien. Wenn eine Website wächst, wird es wichtig, wiederholte Markups konsistent zu pflegen. In dieser Übung wird ein Formular erwartet, das keine tatsächliche Nachricht sendet; das Ziel ist es, die HTML-Schnittstelle zu erstellen und zu überprüfen. Trennen Sie die Ergebnisse des Validators vom tatsächlichen Verhalten, indem Sie die Anweisungen von Fehler finden und ein HTML-Dokument validieren verwenden.