CycleTracker: Basis-HTML und CSS
Um eine PWA, eine progressive Webanwendung, zu erstellen, müssen wir eine voll funktionsfähige Webanwendung entwickeln. In diesem Abschnitt werden wir das HTML für eine statische Webseite auszeichnen und das Erscheinungsbild mit CSS verbessern.
Unser Projekt ist es, CycleTracker, einen Menstruationszyklus-Tracker, zu erstellen. Der erste Schritt in diesem einführenden PWA-Tutorial besteht darin, das HTML und CSS zu schreiben. Der obere Abschnitt der Seite ist ein Formular, in das der Benutzer die Start- und Enddaten jeder Periode eingeben kann. Unten befindet sich eine Liste früherer Menstruationszyklen.
Wir erstellen eine HTML-Datei mit Metadaten im Kopfbereich und eine statische Webseite, die ein Formular und einen Platzhalter zum Anzeigen der vom Benutzer eingegebenen Daten enthält. Anschließend fügen wir ein externes CSS-Stylesheet hinzu, um das Erscheinungsbild der Seite zu verbessern.
Um dieses Tutorial abzuschließen, ist es hilfreich, ein grundlegendes Verständnis von HTML, CSS und JavaScript zu haben. Wenn Sie mit diesen nicht vertraut sind, ist MDN die Heimat des Einstiegs, einer Einführung in die Webentwicklung.
In den nächsten Abschnitten werden wir eine lokale Entwicklungsumgebung einrichten und unseren Fortschritt überprüfen, bevor wir JavaScript-Funktionalität hinzufügen, um den statischen Inhalt, der in diesem Abschnitt erstellt wurde, in eine funktionelle Webanwendung zu verwandeln. Sobald wir eine funktionierende App haben, können wir sie schrittweise zu einer PWA weiterentwickeln, die installierbar ist und offline funktioniert.
Statischer Webinhalt
Unser statisches HTML der Seite, mit Platzhaltern für <link> und <script>, die für noch zu erstellende externe CSS- und JavaScript-Dateien gedacht sind, ist:
<!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 das HTML in index.html Ihnen bekannt ist, empfehlen wir, diesen Abschnitt zu lesen, bevor Sie einige temporär hartcodierte Daten hinzufügen, CSS zu einem externen Stylesheet style.css hinzufügen und app.js erstellen, das JavaScript der Anwendung, das diese Webseite funktionsfähig macht.
Die erste Zeile des HTML ist ein doctype Präambel, das sicherstellt, dass der Inhalt korrekt funktioniert.
<!doctype html>
Die Wurzel-<html>-Tags umschließen den gesamten Inhalt, wobei das lang-Attribut die Hauptsprache der Seite definiert.
<!doctype html>
<html lang="en-US">
<!-- the <head> and <body> will go here -->
</html>
Dokumentenkopf
Der <head> enthält maschinenlesbare Informationen über die Webanwendung, die für Leser nicht sichtbar sind, außer dem <title>, das als Überschrift des Browser-Tabs angezeigt wird.
Das <head> enthält alle die Metadaten. Die ersten beiden Informationen im <head> sollten immer die Zeichensatzdefinition sein, die die Zeichenkodierung definiert, und das Ansichtsfenster <meta>-Tag, das sicherstellt, dass die Seite in der Breite des Ansichtsfensters gerendert wird und bei sehr kleinen Bildschirmen nicht verkleinert geladen wird.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
Wir setzen den Titel der Seite auf "Cycle Tracker" mit dem <title>-Element. Während die Inhalte des <head> nicht innerhalb der Seite angezeigt werden, sind die Inhalte des <title> sichtbar! Der innere Text des <title>-Elements erscheint im Browser-Tab, wenn die Seite geladen wird, in Suchmaschinenergebnissen und ist der Standardtitel, der verwendet wird, wenn ein Benutzer eine Webseite als Lesezeichen speichert. Der Titel bietet auch einen zugänglichen Namen für Bildschirmleser, die darauf angewiesen sind, um zu wissen, auf welchem Tab sie sich derzeit befinden.
Während der Titel "Anwendung zur Nachverfolgung des Menstruationszyklus" lauten könnte, haben wir uns für einen verkürzten Namen entschieden, der diskreter ist.
<title>Cycle Tracker</title>
Obwohl dies offiziell optional ist, sollten diese beiden <meta>-Tags und das <title>-Element für eine bessere Benutzererfahrung als erforderliche Bestandteile jedes HTML-Dokuments betrachtet werden.
Für den Moment ist die letzte Komponente, die wir im <head> aufnehmen, ein <link>-Element, das style.css, unser noch zu schreibendes Stylesheet, mit unserem HTML verbindet.
<link rel="stylesheet" href="style.css" />
Das HTML-<link>-Element wird verwendet, um eine Beziehung zwischen dem aktuellen Dokument und einer externen Ressource anzugeben. Es gibt mehr als 25 definierte Werte für das rel-Attribut — und viele Werte, die in keiner Spezifikation enthalten sind. Der häufigste Wert, rel="stylesheet", importiert eine externe Ressource als Stylesheet.
Wir werden das <link>-Element und sein rel-Attribut in einem zukünftigen Abschnitt erneut betrachten, wenn wir den Link zur Manifestdatei einfügen.
Dokumentenkörper
Das <body>-Element enthält den gesamten Inhalt, den wir darstellen möchten, wenn Benutzer die Seite im Internet besuchen.
Im <body> fügen wir den Namen der App als Überschrift der Ebene 1 mit einem <h1> und einem <form> hinzu.
<body>
<h1>Period tracker</h1>
<form></form>
</body>
Das Formular wird Anweisungen, Formularsteuerungen, ein Label für jede Formularsteuerung und einen Absenden-Button enthalten. In Bezug auf die Formularsteuerungen müssen die Benutzer sowohl das Startdatum als auch das Enddatum für jeden eingereichten Menstruationszyklus eingeben.
Innerhalb des <form> fügen wir ein <fieldset> mit einem <legend> hinzu, das den Zweck dieser Gruppe von Formularfeldern beschreibt.
<form>
<fieldset>
<legend>Enter your period start and end date</legend>
</fieldset>
</form>
Die Datumsauswahlfelder sind <input>-Elemente des Typs date. Wir fügen das required-Attribut hinzu, um Benutzerfehler zu reduzieren, indem der Benutzer daran gehindert wird, versehentlich ein unvollständiges Formular abzusenden.
Um ein <label> mit einer Formularsteuerung zu verknüpfen, hat jedes <input> ein id-Attribut, das mit dem for-Attribut des zugehörigen <label> übereinstimmt. Das zugehörige Label bietet jedem <input> einen zugänglichen Namen.
<label for="start-date">Start date</label>
<input type="date" id="start-date" required />
Zusammengenommen fügen wir innerhalb des <fieldset> zwei Absätze (<p>-Elemente) ein, jeweils mit einem Datumsauswahlfeld für die Start- und Enddaten des aktuell eingegebenen Menstruationszyklus, zusammen mit den zugehörigen <label>s der Datumsauswahlfelder. Wir fügen auch ein <button>-Element hinzu, das das Formular absendet; wir labeln es "Add period" indem wir diesen Text zwischen den öffnenden und schließenden Tags platzieren. Der 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, mehr darüber zu lernen, wie man barrierefreie Webformulare erstellt.
Temporärer hartcodierter Ergebnistext
Dann fügen wir einen leeren <section> ein. Dieser Container wird mit JavaScript gefüllt.
<section id="past-periods"></section>
Wenn der Benutzer das Formular übermittelt, verwenden wir JavaScript, um die Daten zu erfassen und eine Liste vergangener Perioden zusammen mit einer Überschrift für den Abschnitt anzuzeigen.
Fürs Erste codieren wir einige Inhalte innerhalb dieses <section> hart, einschließlich einer <h2>-Überschrift und einiger vergangener Perioden, um etwas zum Stylen zu haben, während wir das CSS der Seite schreiben.
<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>
Dieser Inhalt, abgesehen vom Container <section id="past-periods"></section>, ist temporär. Wir werden diese temporären Daten entfernen oder auskommentieren, sobald wir das CSS abgeschlossen haben und mit dem Erscheinungsbild der App zufrieden sind.
JavaScript-Link
Bevor wir den </body> schließen, fügen wir einen Link zur noch zu schreibenden app.js JavaScript-Datei hinzu. Wir fügen das defer-Attribut hinzu, um das Laden dieses Skripts zu verzögern und sicherzustellen, dass das JavaScript nach dem Parsen des HTML-Dokuments ausgeführt wird.
<script src="app.js" defer></script>
Die app.js-Datei wird alle Funktionen unserer Anwendung enthalten, einschließlich der Ereignishandler für das <button>, das Speichern der gesendeten Daten im lokalen Speicher und das Anzeigen der Zyklen im Inhalt des Körpers.
Die HTML-Datei für diesen Schritt ist jetzt komplett! Sie können die Datei an diesem Punkt in Ihrem Browser öffnen, aber Sie werden feststellen, dass sie ziemlich schlicht ist. Das werden wir im nächsten Abschnitt beheben.
CSS-Inhalt
Wir können den statischen HTML-Code jetzt mit CSS gestalten. Unser endgültiges 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 Ihr eigenes CSS schreiben und die Datei als style.css speichern, dann den statischen HTML- und CSS-Code abschließen. Wenn Ihnen etwas im obigen CSS neu ist, lesen Sie weiter für eine Erklärung.
CSS erklärt
Wir verwenden die background-color-Eigenschaft, um eine hellgrüne (#eeffee) Hintergrundfarbe für den body festzulegen. Dann verwenden wir auf der ungeordneten Liste, dem Fieldset und der Legende eine weiße Hintergrundfarbe, zusammen mit einem dünnen, festen Rahmen, der mit der border-Eigenschaft hinzugefügt wird. Wir überschreiben die background-color für die Legende, indem wir die Legende und die Listenelemente zu einem dunkleren Grün (#ccffcc) machen.
Wir verwenden die :nth-of-type(even) Pseudoklassen-Wähler, um jedes gerade nummerierte Listenelement auf inherit die Hintergrundfarbe seines Elternteils zu setzen; in diesem Fall erben sie die white-Hintergrundfarbe 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;
}
Um die ungeordnete Liste und Listenelemente nicht wie eine Liste aussehen zu lassen, entfernen wir den Innenabstand, indem wir padding: 0 auf der ul setzen und die Listenmarkierungen entfernen, indem wir list-style-type: none auf den Listenelementen selbst setzen.
ul {
padding: 0;
}
li {
list-style-type: none;
}
Wir fügen etwas weißen Raum hinzu, indem wir den body-margin mit den vw- und vh Ansichtseinheitsgrößen setzen, sodass weißer Raum außerhalb unserer App proportional zur Größe des Ansichtsportals ist. Wir fügen auch ein wenig Puffer zum li und legend hinzu. Schließlich, um die Ausrichtung der past-periods-Daten zu verbessern, aber nicht zu beheben, setzen wir den font-family des ul-Ergebnisabschnitts auf monospace, sodass jedes Symbol dieselbe feste Breite hat.
body {
margin: 1vh 1vw;
}
ul {
font-family: monospace;
}
li,
legend {
padding: 0.2em 0.5em;
}
Wir können das Obige kombinieren, indem wir mehrere Eigenschaften in jedem Selektor-Deklarationsblock angeben. Wir können sogar die Stile für die li und legend zusammenfassen; irrelevante Stile, wie die list-style-type-Deklaration auf 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;
}
Wenn Ihnen immer noch etwas am obigen CSS unbekannt vorkommt, können Sie die CSS-Eigenschaften und Selektoren nachschlagen oder das Modul Basiswissen über CSS-Styling durcharbeiten.
Ob Sie das obenstehende CSS wörtlich verwenden, die obigen Stile zu Ihrer Präferenz anpassen oder Ihr eigenes CSS von Grund auf schreiben, fügen Sie sämtliches CSS in eine neue Datei ein und speichern Sie sie als style.css im gleichen Verzeichnis wie Ihre index.html-Datei.
Den statischen HTML- und CSS-Code für unsere PWA abschließen
Bevor Sie fortfahren, kommentieren Sie die gefälschten Daten für vergangene Perioden 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>
Als Nächstes
Bevor wir die JavaScript-Funktionalität hinzufügen, um diesen statischen Inhalt in eine Webanwendung zu konvertieren und diese dann mit einer Manifestdatei und einem Serviceworker zu einer progressiven Webanwendung erweitern, werden wir eine lokale Entwicklungsumgebung erstellen, um unseren Fortschritt anzuzeigen.
Bis dahin können Sie die statische CycleTracker-Hülle ansehen und den CycleTracker-HTML- und CSS-Quellcode von GitHub herunterladen.