CycleTracker: Grundlegendes HTML und CSS

Statische Webinhalte

Das HTML unserer statischen Website enthält als Platzhalter <link>- und <script>-Elemente für die noch zu erstellenden externen CSS- und JavaScript-Dateien:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Cycle Tracker</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Period tracker</h1>
    <form>
      <fieldset>
        <legend>Enter your period start and end date</legend>
        <p>
          <label for="start-date">Start date</label>
          <input type="date" id="start-date" required />
        </p>
        <p>
          <label for="end-date">End date</label>
          <input type="date" id="end-date" required />
        </p>
      </fieldset>
      <p>
        <button type="submit">Add Period</button>
      </p>
    </form>
    <section id="past-periods"></section>
    <script src="app.js" defer></script>
  </body>
</html>

Kopieren Sie dieses HTML und speichern Sie es in einer Datei namens index.html.

HTML-Inhalt

Auch wenn Ihnen das HTML in index.html vertraut ist, empfehlen wir, diesen Abschnitt zu lesen, bevor Sie vorübergehend fest codierte Daten hinzufügen, CSS in ein externes Stylesheet namens style.css schreiben und app.js erstellen – das JavaScript der Anwendung, das diese Webseite funktionsfähig macht.

Die erste Zeile des HTML ist eine Doctype-Deklaration, die dafür sorgt, dass sich der Inhalt korrekt verhält.

<!doctype html>

Die <html>-Tags umschließen den gesamten Inhalt. Das Attribut lang legt die Hauptsprache der Seite fest.

<!doctype html>
<html lang="en-US">
  <!-- the <head> and <body> will go here -->
</html>

Dokumentkopf

Das <head>-Element enthält maschinenlesbare Informationen über die Webanwendung, die für Leserinnen und Leser nicht sichtbar sind. Eine Ausnahme ist der <title>, der als Titel des Browser-Tabs angezeigt wird.

Der <head> enthält sämtliche Metadaten. Die ersten beiden Angaben in Ihrem <head> sollten immer die Zeichensatzdefinition, die die Zeichenkodierung festlegt, und das Viewport-<meta>-Tag sein. Letzteres sorgt dafür, dass die Seite in der Breite des Viewports dargestellt und beim Laden auf sehr kleinen Bildschirmen nicht verkleinert wird.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
</head>

Mit dem <title>-Element legen wir „Cycle Tracker“ als Seitentitel fest. Der Inhalt des <head> wird zwar nicht auf der Seite angezeigt, der Inhalt des <title> ist jedoch sichtbar: Sein Text erscheint nach dem Laden der Seite im Browser-Tab und in Suchmaschinenergebnissen. Er wird außerdem standardmäßig als Titel verwendet, wenn jemand ein Lesezeichen für die Webseite anlegt. Für Personen, die Screenreader verwenden, stellt der Titel zudem einen zugänglichen Namen bereit, anhand dessen sie erkennen können, auf welchem Tab sie sich gerade befinden.

Wir hätten den Titel auch „Anwendung zur Erfassung von Menstruationszyklen“ nennen können, haben uns aber für einen kürzeren, unauffälligeren Namen entschieden.

<title>Cycle Tracker</title>

Obwohl sie formal optional sind, sollten diese beiden <meta>-Tags und der <title> im Interesse einer besseren Benutzererfahrung als unverzichtbare Bestandteile jedes HTML-Dokuments betrachtet werden.

Als letztes Element fügen wir dem <head> vorerst ein <link>-Element hinzu. Es verknüpft style.css, unser noch zu schreibendes Stylesheet, mit dem HTML-Dokument.

<link rel="stylesheet" href="style.css" />

Mit dem HTML-Element <link> wird eine Beziehung zwischen dem aktuellen Dokument und einer externen Ressource angegeben. Für das Attribut rel gibt es mehr als 25 definierte Werte – und viele weitere, die in keiner Spezifikation stehen. Der häufigste Wert, rel="stylesheet", bindet eine externe Ressource als Stylesheet ein.

Auf das <link>-Element und sein Attribut rel kommen wir in einem späteren Abschnitt zurück, wenn wir den Link zur Manifestdatei hinzufügen.

Dokumentkörper

Das <body>-Element enthält alle Inhalte, die beim Besuch der Website angezeigt werden sollen.

Innerhalb des <body> fügen wir den Namen der Anwendung als Überschrift erster Ebene mit einem <h1> sowie ein <form> ein.

<body>
  <h1>Period tracker</h1>
  <form></form>
</body>

Das Formular enthält Anweisungen, Formularsteuerelemente, eine Beschriftung für jedes Steuerelement und eine Schaltfläche zum Absenden. Die Benutzerin muss für jeden erfassten Menstruationszyklus sowohl ein Anfangs- als auch ein Enddatum eingeben können.

Innerhalb des <form> fügen wir ein <fieldset> mit einem <legend> ein, das den Zweck dieser Gruppe von Formularfeldern beschreibt.

<form>
  <fieldset>
    <legend>Enter your period start and end date</legend>
  </fieldset>
</form>

Die Steuerelemente zur Datumsauswahl sind <input>-Elemente vom Typ date. Wir fügen das Attribut required hinzu, um Eingabefehler zu vermeiden: So kann ein unvollständiges Formular nicht versehentlich abgesendet werden.

Um ein <label> einem Formularsteuerelement zuzuordnen, besitzt jedes <input> ein Attribut id, dessen Wert mit dem Attribut for des zugehörigen <label> übereinstimmt. Durch dieses Label erhält jedes <input> einen zugänglichen Namen.

<label for="start-date">Start date</label>
<input type="date" id="start-date" required />

Zusammengefasst fügen wir innerhalb des <fieldset> zwei Absätze (<p>-Elemente) ein. Jeder enthält ein Steuerelement zur Auswahl des Anfangs- beziehungsweise Enddatums des gerade eingegebenen Menstruationszyklus und das zugehörige <label>. Außerdem fügen wir ein <button>-Element zum Absenden des Formulars hinzu. Seine Beschriftung „Add period“ steht zwischen dem öffnenden und dem schließenden Tag. type="submit" ist optional, da submit der Standardtyp für <button> ist.

<form>
  <fieldset>
    <legend>Enter your period start and end date</legend>
    <p>
      <label for="start-date">Start date</label>
      <input type="date" id="start-date" required />
    </p>
    <p>
      <label for="end-date">End date</label>
      <input type="date" id="end-date" required />
    </p>
  </fieldset>
  <p>
    <button type="submit">Add Period</button>
  </p>
</form>

Wir empfehlen Ihnen, sich näher mit der Erstellung zugänglicher Webformulare zu beschäftigen.

Vorübergehend fest codierter Ergebnistext

Als Nächstes fügen wir ein leeres <section>-Element ein. Dieser Container wird später mit JavaScript befüllt.

<section id="past-periods"></section>

Wenn das Formular abgesendet wird, erfassen wir die Daten mit JavaScript und zeigen eine Liste früherer Menstruationen zusammen mit einer Überschrift für den Abschnitt an.

Vorerst schreiben wir einige Inhalte fest in dieses <section>-Element: eine <h2>-Überschrift und einige frühere Menstruationen. So haben wir beim Schreiben des CSS Inhalte, deren Darstellung wir gestalten können.

<section id="past-periods">
  <h2>Past periods</h2>
  <ul>
    <li>From 01/01/2024 to 01/06/2024</li>
    <li>From 01/29/2024 to 02/04/2024</li>
  </ul>
</section>

Mit Ausnahme des Containers <section id="past-periods"></section> sind diese Inhalte nur vorübergehend. Sobald wir das CSS fertiggestellt haben und mit dem Erscheinungsbild der Anwendung zufrieden sind, entfernen oder kommentieren wir die vorübergehenden Daten aus.

JavaScript-Verknüpfung

Vor dem schließenden </body> fügen wir einen Verweis auf die noch zu schreibende JavaScript-Datei app.js ein. Mit dem Attribut defer verschieben wir die Ausführung des Skripts, sodass das JavaScript erst ausgeführt wird, nachdem das HTML des Dokuments geparst wurde.

<script src="app.js" defer></script>

Die Datei app.js wird die gesamte Anwendungslogik enthalten, darunter die Event-Handler für den <button>, das Speichern der übermittelten Daten im lokalen Speicher und die Anzeige der Zyklen im Inhalt des Dokumentkörpers.

Die HTML-Datei für diesen Schritt ist nun fertig! Sie können die Datei jetzt in Ihrem Browser öffnen, werden aber feststellen, dass sie noch recht schlicht aussieht. Das ändern wir im nächsten Abschnitt.

CSS-Inhalt

Nun können wir das statische HTML mit CSS gestalten. Unser fertiges CSS lautet:

body {
  margin: 1vh 1vw;
  background-color: #eeffee;
}
ul,
fieldset,
legend {
  border: 1px solid;
  background-color: white;
}
ul {
  padding: 0;
  font-family: monospace;
}
li,
legend {
  list-style-type: none;
  padding: 0.2em 0.5em;
  background-color: #ccffcc;
}
li:nth-of-type(even) {
  background-color: inherit;
}

Wenn Ihnen jede Zeile vertraut ist, können Sie das obige CSS kopieren oder eigenes CSS schreiben und die Datei als style.css speichern. Anschließend können Sie das statische HTML und CSS fertigstellen. Falls Ihnen etwas am obigen CSS neu ist, lesen Sie für eine Erklärung weiter.

CSS erklärt

Mit der Eigenschaft background-color geben wir dem body eine hellgrüne Hintergrundfarbe (#eeffee). Für die ungeordnete Liste, das Fieldset und die Legende verwenden wir einen weißen Hintergrund und fügen mit der Eigenschaft border einen dünnen, durchgezogenen Rahmen hinzu. Für die Legende überschreiben wir background-color, sodass sie ebenso wie die Listeneinträge ein dunkleres Grün (#ccffcc) erhält.

Mit dem Pseudoklassen-Selektor :nth-of-type(even) legen wir fest, dass jeder Listeneintrag mit gerader Nummer die Hintergrundfarbe seines Elternelements mit inherit übernimmt. In diesem Fall erbt er die Hintergrundfarbe white von der ungeordneten Liste.

body {
  background-color: #eeffee;
}
ul,
fieldset,
legend {
  border: 1px solid;
  background-color: white;
}
li,
legend {
  background-color: #ccffcc;
}
li:nth-of-type(even) {
  background-color: inherit;
}

Damit die ungeordnete Liste und ihre Einträge nicht wie eine Liste aussehen, entfernen wir den Innenabstand des ul mit padding: 0 und die Listenmarkierungen der Einträge mit list-style-type: none.

ul {
  padding: 0;
}
li {
  list-style-type: none;
}

Für etwas Abstand legen wir den margin des body mit den Viewport-Einheiten vw und vh fest. Dadurch passt sich der freie Raum um unsere Anwendung an die Größe des Viewports an. Außerdem geben wir li und legend etwas Innenabstand. Um die Ausrichtung der Daten zu früheren Menstruationen zu verbessern – wenn auch nicht vollständig zu korrigieren –, setzen wir die font-family des Ergebnisbereichs ul auf monospace. Dadurch hat jedes Zeichen dieselbe feste Breite.

body {
  margin: 1vh 1vw;
}
ul {
  font-family: monospace;
}
li,
legend {
  padding: 0.2em 0.5em;
}

Wir können diese Regeln zusammenfassen und in jedem Deklarationsblock eines Selektors mehrere Eigenschaften angeben. Die Stile für li und legend können wir sogar gemeinsam definieren: Nicht zutreffende Stile, etwa die Deklaration list-style-type für legend, werden ignoriert.

body {
  margin: 1vh 1vw;
  background-color: #eeffee;
}
ul,
fieldset,
legend {
  border: 1px solid;
  background-color: white;
}
ul {
  padding: 0;
  font-family: monospace;
}
li,
legend {
  list-style-type: none;
  padding: 0.2em 0.5em;
  background-color: #ccffcc;
}
li:nth-of-type(even) {
  background-color: inherit;
}

Falls Ihnen Teile des obigen CSS noch unvertraut sind, können Sie die CSS-Eigenschaften und Selektoren nachschlagen oder das Modul Grundlagen der CSS-Gestaltung durcharbeiten.

Ganz gleich, ob Sie das obige CSS unverändert übernehmen, die Stile nach Ihren Vorstellungen anpassen oder eigenes CSS von Grund auf schreiben: Speichern Sie das gesamte CSS in einer neuen Datei namens style.css im selben Verzeichnis wie Ihre Datei index.html.

Das statische HTML und CSS für unsere PWA fertigstellen

Bevor Sie fortfahren, kommentieren Sie die Beispieldaten zu früheren Menstruationen und die Überschrift aus oder löschen Sie sie:

<section id="past-periods">
  <!--
  <h2>Past periods</h2>
  <ul>
    <li>From 01/01/2024 to 01/06/2024</li>
    <li>From 01/29/2024 to 02/04/2024</li>
  </ul>
  -->
</section>

Nächste Schritte

Bevor wir JavaScript-Funktionalität hinzufügen, um aus diesen statischen Inhalten eine Webanwendung zu machen und sie anschließend mit einer Manifestdatei und einem Service Worker zu einer Progressive Web App zu erweitern, richten wir eine lokale Entwicklungsumgebung ein. Dort können wir uns unseren Fortschritt ansehen.

Bis dahin können Sie sich das statische Grundgerüst von CycleTracker ansehen. Sie können auch den HTML- und CSS-Quellcode von CycleTracker in seinem derzeitigen, noch nicht funktionsfähigen Zustand von GitHub herunterladen, bevor Sie mit den nächsten Schritten fortfahren.

• Zurück
• Übersicht: CycleTracker PWA-Tutorial
• Weiter