CycleTracker: Basis-HTML und CSS
Um eine PWA, eine Progressive Web App, zu erstellen, müssen wir eine vollständig funktionierende Webanwendung kreieren. In diesem Abschnitt werden wir das HTML für eine statische Webseite markieren und das Erscheinungsbild mit CSS verbessern.
Unser Projekt ist es, CycleTracker zu erstellen, einen Menstruationszyklus-Tracker. Der erste Schritt in diesem einführenden PWA-Tutorial besteht darin, das HTML und CSS zu schreiben. Der obere Bereich der Seite ist ein Formular, in dem der Benutzer die Start- und Enddaten jedes Zyklus eingibt. Der untere Bereich ist eine Liste vorheriger Menstruationszyklen.
Wir erstellen eine HTML-Datei mit Metadaten im Kopfbereich und einer statischen Webseite, die ein Formular und einen Platzhalter für die Anzeige der vom Benutzer eingegebenen Daten enthält. Danach 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 damit nicht vertraut sind, ist MDN die Heimat des Einstieg in die Webentwicklung, einer Einführung in die Webentwicklung.
In den nächsten Abschnitten werden wir eine lokale Entwicklungsumgebung einrichten und unseren Fortschritt betrachten, bevor wir JavaScript-Funktionalität hinzufügen, um den statischen Inhalt, der in diesem Abschnitt erstellt wurde, in eine funktionsfähige Webanwendung umzuwandeln. Sobald wir eine funktionsfähige App haben, können wir sie schrittweise zu einer PWA erweitern, die installierbar ist und offline funktioniert.
Statische Webinhalte
Unser statisches HTML der Webseite mit Platzhaltern für die noch zu erstellenden externen CSS- und JavaScript-Dateien 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 Ihnen das HTML in index.html vertraut ist, empfehlen wir, diesen Abschnitt zu lesen, bevor Sie einige temporäre, fest codierte Daten hinzufügen, CSS zu einem externen Stylesheet style.css hinzufügen und app.js, das JavaScript der Anwendung erstellen, das diese Webseite funktional macht.
Die erste Zeile des HTML ist ein Doctype-Präambel, das sicherstellt, dass der Inhalt korrekt verarbeitet wird.
<!doctype html>
Die Wurzel-<html>-Tags umfassen den gesamten Inhalt mit dem lang-Attribut, das 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 Titel des Browser-Tabs angezeigt wird.
Der <head> enthält alle Metadaten. Die ersten beiden Informationen in Ihrem <head> sollten immer die Zeichensatzdefinition sein, die die Zeichenkodierung definiert, und das Viewport <meta>-Tag, das sicherstellt, dass die Seite in der Breite des Viewports gerendert wird und nicht verkleinert wird, wenn sie auf sehr kleinen Bildschirmen 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 der Inhalt des <head> nicht auf der Seite angezeigt wird, wird der Inhalt des <title> gesehen! 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 bookmarkt. Der Titel bietet auch einen zugänglichen Namen für Bildschirmlesegeräte, die darauf angewiesen sind, um zu wissen, auf welchem Tab sie sich gerade befinden.
Obwohl der Titel "Menstruationszyklus-Tracking-Anwendung" lauten könnte, haben wir uns für einen verkürzten Namen entschieden, der diskreter ist.
<title>Cycle Tracker</title>
Obwohl offiziell optional, sollten diese zwei <meta>-Tags und das <title> aus Gründen einer besseren Benutzererfahrung als erforderliche Komponenten eines HTML-Dokuments betrachtet werden.
Für den Moment ist die letzte Komponente, die wir im <head> einfügen, ein <link>-Element, das style.css, unser noch zu erstellendes Stylesheet, mit unserem HTML verknüpft.
<link rel="stylesheet" href="style.css" />
Das HTML-<link>-Element wird verwendet, um eine Beziehung zwischen dem aktuellen Dokument und einer externen Ressource zu spezifizieren. Es gibt mehr als 25 definierte Werte für das rel-Attribut — und viele weitere Werte, die in keiner Spezifikation 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 Manifest-Datei einschließen.
Dokumentenkörper
Das <body>-Element enthält den gesamten Inhalt, den wir anzeigen wollen, wenn Benutzer die Seite im Internet besuchen.
Innerhalb des <body> fügen wir den Namen der App als Überschrift der Ebene 1 unter Verwendung eines <h1> und eines <form> ein.
<body>
<h1>Period tracker</h1>
<form></form>
</body>
Das Formular wird Anweisungen, Formularelemente, ein Label für jedes Formularelement und einen Sendebutton enthalten. Was die Formularelemente betrifft, benötigen wir, dass der Benutzer sowohl ein Startdatum als auch ein Enddatum für jeden eingereichten Menstruationszyklus eingibt.
Innerhalb des <form> fügen wir ein <fieldset> mit einer <legend> ein, das den Zweck dieser Gruppe von Formularelementen bezeichnet.
<form>
<fieldset>
<legend>Enter your period start and end date</legend>
</fieldset>
</form>
Die Datumswahlelemente sind <input>-Elemente vom Typ date. Wir fügen das required-Attribut hinzu, um Benutzerfehler zu reduzieren, indem verhindert wird, dass der Benutzer versehentlich ein unvollständiges Formular absendet.
Um ein <label> einem Formularelement zuzuordnen, hat jedes <input> ein id-Attribut, das dem for-Attribut des zugehörigen <label> entspricht. Das zugeordnete Label bietet jedem <input> einen zugänglichen Namen.
<label for="start-date">Start date</label>
<input type="date" id="start-date" required />
Insgesamt fügen wir innerhalb des <fieldset> zwei Absätze (<p>-Elemente) ein, die jeweils einen Datumswähler für die Start- und Enddaten des aktuell eingegebenen Menstruationszyklus enthalten, zusammen mit den zugehörigen <label>s der Datumswähler. Wir fügen auch ein <button>-Element ein, das das Formular absendet; wir bezeichnen es als "Add period", indem wir diesen Text zwischen den öffnenden und schließenden Tags einfügen. 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 ermutigen Sie, mehr über das Erstellen zugänglicher Webformulare zu lernen.
Temporär fest codierter Ergebnistext
Wir fügen dann einen leeren <section>-Container ein. Dieser Container wird mit JavaScript gefüllt.
<section id="past-periods"></section>
Wenn der Benutzer das Formular absendet, werden wir JavaScript verwenden, um die Daten zu erfassen und eine Liste vergangener Perioden zusammen mit einem Header für den Abschnitt zu präsentieren.
Für den Moment kodieren wir zeitweilig etwas Inhalt innerhalb dieses <section> fest, einschließlich eines <h2>-Headers und ein paar vergangenen Perioden, um etwas zum Stylen zu haben, wenn 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 von dem Container <section id="past-periods"></section>, ist temporär. Wir werden diese temporären Daten entfernen oder auskommentieren, sobald wir das CSS abschließen und mit dem Erscheinungsbild der App zufrieden sind.
JavaScript-Link
Bevor wir das </body> schließen, fügen wir einen Link zur noch zu erstellenden app.js-JavaScript-Datei ein. Wir fügen das defer-Attribut hinzu, um das Laden dieses Skripts zu verzögern und sicherzustellen, dass das JavaScript ausgeführt wird, nachdem das HTML-Dokument geparst wurde.
<script src="app.js" defer></script>
Die Datei app.js wird alle Funktionsweisen unserer Anwendung enthalten, einschließlich der Ereignishandler für den <button>, Speicherung der eingereichten Daten im lokalen Speicher und Anzeige der Zyklen im Inhalt des Bodys.
Die HTML-Datei für diesen Schritt ist jetzt vollständig! Sie können die Datei zu diesem Zeitpunkt in Ihrem Browser öffnen, aber Sie werden feststellen, dass sie ziemlich einfach aussieht. Das werden wir im nächsten Abschnitt beheben.
CSS-Inhalt
Wir können nun das statische HTML mit CSS stylen. Unser endgültiges CSS ist:
body {
margin: 1vh 1vw;
background-color: #efe;
}
ul,
fieldset,
legend {
border: 1px solid;
background-color: #fff;
}
ul {
padding: 0;
font-family: monospace;
}
li,
legend {
list-style-type: none;
padding: 0.2em 0.5em;
background-color: #cfc;
}
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 das statische HTML und CSS fertigstellen. Wenn Ihnen etwas im obigen CSS neu ist, lesen Sie weiter für eine Erklärung.
Erklärung des CSS
Wir verwenden die Eigenschaft background-color um eine helle grüne (#efe) Hintergrundfarbe auf den body zu setzen. Dann verwenden wir auf der ungeordneten Liste, dem Fieldset und der Legende eine weiße (#fff) Hintergrundfarbe, zusammen mit einem dünnen soliden Rand, der mit der Eigenschaft border hinzugefügt wird. Wir überschreiben die background-color für die Legende, um die Legende und die Listenelemente dunkler grün (#cfc) zu machen.
Wir verwenden die :nth-of-type(even) Pseudo-Klasse Selektor, um jedes gerade nummerierte Listenelement zu inherit der Hintergrundfarbe von seinem Elternteil zu erben; in diesem Fall erbt es die #fff Hintergrundfarbe von der ungeordneten Liste.
body {
background-color: #efe;
}
ul,
fieldset,
legend {
border: 1px solid;
background-color: #fff;
}
li,
legend {
background-color: #cfc;
}
li:nth-of-type(even) {
background-color: inherit;
}
Um die ungeordnete Liste und die Listenelemente nicht wie eine Liste aussehen zu lassen, entfernen wir den Abstand, indem wir padding: 0 auf dem ul setzen und die Listenmarkierungen entfernen, indem wir list-style-type: none auf die Listenelemente selbst setzen.
ul {
padding: 0;
}
li {
list-style-type: none;
}
Wir fügen ein wenig weißen Raum hinzu, indem wir den margin der body-Elemente mit den vw und vh Viewport-Einheiten setzen, wodurch der weiße Raum außerhalb unserer App proportional zur Größe des Viewports ist. Wir fügen auch ein wenig Padding zu den li und legend hinzu. Schließlich, um die Ausrichtung der vergangenen Periodendaten zu verbessern, aber nicht zu beheben, setzen wir die font-family des ul-Ergebnisabschnitts auf monospace, wodurch jedes Glyphensymbol die gleiche feste Breite hat.
body {
margin: 1vh 1vw;
}
ul {
font-family: monospace;
}
li,
legend {
padding: 0.2em 0.5em;
}
Wir können das oben zusammenfassen, indem wir mehrere Eigenschaften in jedem Selektor-Deklarationsblock setzen. Wir können sogar die Stile für die li und legend zusammenführen; irrelevante Stile, wie die list-style-type-Deklaration auf legend, werden ignoriert.
body {
margin: 1vh 1vw;
background-color: #efe;
}
ul,
fieldset,
legend {
border: 1px solid;
background-color: #fff;
}
ul {
padding: 0;
font-family: monospace;
}
li,
legend {
list-style-type: none;
padding: 0.2em 0.5em;
background-color: #cfc;
}
li:nth-of-type(even) {
background-color: inherit;
}
Wenn Ihnen eines der oben genannten CSS immer noch unbekannt vorkommt, können Sie die CSS-Eigenschaften und Selektoren nachschlagen oder das CSS-Styling-Grundlagen-Modul durcharbeiten.
Ob Sie das obige CSS wörtlich verwenden, die obigen Stile zu Ihrem Geschmack bearbeiten oder Ihr eigenes CSS von Grund auf neu schreiben, fügen Sie das gesamte CSS in eine neue Datei ein und speichern Sie es als style.css im selben Verzeichnis wie Ihre index.html Datei.
Abschließen des statischen HTML und CSS für unsere PWA
Bevor Sie weitermachen, kommentieren Sie die gefälschten vergangenen Periodendaten und den Header 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 Web-App umzuwandeln und sie dann in eine progressive Web-App mit einer Manifestdatei und einem Service Worker zu erweitern, werden wir eine lokale Entwicklungsumgebung erstellen, um unseren Fortschritt zu betrachten.
Bis dahin können Sie die statische CycleTracker-Oberfläche betrachten und den CycleTracker HTML und CSS Quellcode von GitHub herunterladen.