CycleTracker: Basis-HTML und -CSS
Um eine PWA, eine Progressive Web Application, 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 besteht darin, 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 Bereich der Seite ist ein Formular, in das der Benutzer die Start- und Enddaten jedes Zeitraums eingeben kann. Unten befindet sich eine Liste früherer Menstruationszyklen.
Wir erstellen eine HTML-Datei mit Metadaten im Kopfbereich und einer statischen Webseite, die ein Formular und einen Platzhalter enthält, um benutzereingegebene Daten anzuzeigen. Dann 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 Ihnen diese Grundlagen nicht vertraut sind, ist MDN die Heimat der Getting Started-Reihe, 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 in diesem Abschnitt erstellten statischen Inhalt in eine funktionale Webanwendung umzuwandeln. Sobald wir eine funktionierende App haben, haben wir etwas, das wir schrittweise zu einer PWA erweitern können, die installierbar ist und offline funktioniert.
Statischer Webinhalt
Unser HTML der statischen Seite mit Platzhaltern für <link> und <script> für noch zu erstellende externe 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 durchzulesen, bevor Sie einige temporär fest codierte 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 HTMLs ist eine DOCTYPE-Präambel, die sicherstellt, dass der Inhalt korrekt dargestellt wird.
<!doctype html>
Die Wurzel-<html>-Tags umschließen den gesamten Inhalt, wobei das lang-Attribut die Hauptsprache der Seite festlegt.
<!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 die Leser nicht sichtbar sind, außer dem <title>, das als Überschrift des Browser-Tabs angezeigt wird.
Der <head> umfasst alle Metadaten. Die ersten beiden Informationen in Ihrem <head> sollten immer die Zeichensatzdefinition sein, die die Zeichenkodierung festlegt, 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, werden die Inhalte des <title> gesehen! Der innerer 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 mit einem Lesezeichen versieht. Der Titel bietet auch einen zugänglichen Namen für Benutzer von Screenreadern, die darauf angewiesen sind, zu wissen, in welchem Tab sie sich gerade befinden.
Während der Titel "Menstruationszyklus-Tracking-Anwendung" sein könnte, haben wir uns für einen verkürzten Namen entschieden, der diskreter ist.
<title>Cycle Tracker</title>
Obwohl offiziell optional, sollten diese beiden <meta>-Tags und das <title> für ein besseres Benutzererlebnis als die drei erforderlichen Komponenten des <head> betrachtet werden, die Teil jedes HTML-Dokuments sein sollten.
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 verknüpft.
<link rel="stylesheet" href="style.css" />
Das HTML-Element <link> 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 weitere Werte, die in keiner Spezifikation enthalten sind. Der gebräuchlichste Wert, rel="stylesheet", importiert eine externe Ressource als Stylesheet.
Wir werden auf das <link>-Element und sein rel-Attribut in einem zukünftigen Abschnitt zurückkommen, wenn wir den Link zum Manifest hinzufügen.
Dokumentenkörper
Das <body>-Element enthält den gesamten Inhalt, den wir anzeigen möchten, wenn Benutzer die Seite im Internet besuchen.
Innerhalb des <body> fügen wir den Namen der App als Überschrift der Ebene 1 mit einem <h1> und einem <form> ein.
<body>
<h1>Period tracker</h1>
<form></form>
</body>
Das Formular wird Anweisungen, Steuerelemente, ein Label für jedes Steuerelement und eine Senden-Schaltfläche enthalten. In Bezug auf die Steuerelemente 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 einem <legend> ein, das den Zweck dieser Reihe von Formularfeldern kennzeichnet.
<form>
<fieldset>
<legend>Enter your period start and end date</legend>
</fieldset>
</form>
Die Datumsauswahlen sind <input>-Elemente vom Typ date. Wir fügen das required-Attribut hinzu, um Benutzerfehler zu reduzieren, indem wir verhindern, dass der Benutzer versehentlich ein unvollständiges Formular sendet.
Um ein <label> mit einem Steuerelement 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 />
Insgesamt fügen wir innerhalb des <fieldset> zwei Absätze (<p>-Elemente) ein, die jeweils eine Datumsauswahl für die Start- und Enddaten des derzeit eingegebenen Menstruationszyklus sowie die zugehörigen <label>s der Datumsauswahlen enthalten. Wir fügen auch ein <button>-Element hinzu, das das Formular sendet; wir beschriften es mit "Add period", indem wir diesen Text zwischen den öffnenden und schließenden Tags einschließen. 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 von zugänglichen Webformularen zu lernen.
Temporärer fest codierter Ergebnistext
Dann fügen wir einen leeren <section> hinzu. Dieser Container wird mit JavaScript gefüllt.
<section id="past-periods"></section>
Wenn der Benutzer das Formular sendet, verwenden wir JavaScript, um die Daten zu erfassen und eine Liste vergangener Perioden zusammen mit einem Header für den Abschnitt darzustellen.
Vorläufig codieren wir einige Inhalte innerhalb dieses <section> temporär fest, einschließlich eines <h2>-Headers 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 ist, abgesehen vom Container <section id="past-periods"></section>, temporär. Wir werden diese temporären Daten entfernen oder auskommentieren, sobald wir das CSS abschließen und mit dem Aussehen der App zufrieden sind.
JavaScript-Link
Bevor wir das </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 ausgeführt wird, nachdem das HTML-Dokument geparst wurde.
<script src="app.js" defer></script>
Die app.js-Datei wird alle Funktionsweisen unserer Anwendung enthalten, einschließlich der Ereignis-Handler für die <button>, das Speichern der gesendeten Daten im lokalen Speicher und das Anzeigen von Zyklen innerhalb des Inhalts des Körpers.
Die HTML-Datei für diesen Schritt ist jetzt fertig! Sie können die Datei zu diesem Zeitpunkt in Ihrem Browser öffnen, aber Ihnen wird auffallen, dass sie ziemlich schlicht ist. Wir werden das 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: #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 jede Zeile Ihnen vertraut ist, können Sie das oben stehende CSS kopieren oder Ihr eigenes CSS schreiben und die Datei als style.css speichern, und dann das statische HTML und CSS abschließen. Wenn irgendetwas in dem oben genannten CSS für Sie neu ist, lesen Sie weiter für eine Erklärung.
CSS erklärt
Wir verwenden die background-color-Eigenschaft, um im body eine hellgrüne (#eeffee) Hintergrundfarbe zu setzen. Dann verwenden wir auf der ungeordneten Liste, dem fieldset und der Legende eine weiße Hintergrundfarbe sowie eine dünne solide Linie, die mit der border-Eigenschaft hinzugefügt wird. Wir überschreiben die background-color für die Legende, sodass die Legende und die Listenelemente ein dunkleres Grün (#ccffcc) erhalten.
Wir verwenden die :nth-of-type(even) Pseudo-Klassen-Selektor, um jedes gerade Listenelement inherit die Hintergrundfarbe seines Elternteils erben zu lassen; in diesem Fall erbt es 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 die Listenelemente nicht wie eine Liste aussehen zu lassen, entfernen wir die Ausrichtung durch Einstellung von padding: 0 auf dem ul und entfernen die Listenmarkierungen, indem wir list-style-type: none auf den Listenelementen selbst setzen.
ul {
padding: 0;
}
li {
list-style-type: none;
}
Wir fügen ein wenig Leerraum hinzu, indem wir den body-margin mit vw und vh Viewport-Einheiten setzen und dadurch Leerraum außerhalb unserer App proportional zur Viewport-Größe machen. Wir fügen auch ein wenig Auffüllung 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 Ergebnisbereichs auf monospace, damit jede Glyphe die gleiche 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 zusammenfassen. Wir können sogar die Stile für die li und legend zusammenfassen; irrelevante Stile, wie die list-style-type-Deklaration in 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 eines der obigen CSS noch immer unbekannt vorkommt, können Sie die CSS-Eigenschaften und Selektoren nachschlagen oder das Modul CSS Styling-Grundlagen durcharbeiten.
Ob Sie das obige CSS wörtlich übernehmen, die obigen Stile nach Ihren Wünschen anpassen oder Ihr eigenes CSS von Grund auf neu schreiben, nehmen Sie all das CSS in eine neue Datei auf und speichern Sie es als style.css im selben Verzeichnis wie Ihre index.html-Datei.
Abschluss des statischen HTML und CSS für unsere PWA
Bevor Sie fortfahren, kommentieren oder löschen Sie die gefälschten alten Periodendaten und den Header:
<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 zu verwandeln und dann mit einer Manifestdatei und einem Service Worker in eine Progressive Web App zu erweitern, werden wir zunächst eine lokale Entwicklungsumgebung erstellen, um unseren Fortschritt zu sehen.
Bis dahin können Sie die statische CycleTracker-Hülle ansehen und den CycleTracker HTML und CSS Quellcode von GitHub herunterladen.