CycleTracker: Grundlegendes 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 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 Teil der Seite ist ein Formular für den Benutzer, um die Start- und Enddaten jedes Zyklus einzugeben. Der untere Teil ist eine Liste der vorherigen Menstruationszyklen.
Wir erstellen eine HTML-Datei mit Metadaten im Kopfbereich und einer statischen Webseite, die ein Formular und einen Platzhalter zur Anzeige von Benutzereingaben enthält. 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 Grundverständnis von HTML, CSS und JavaScript zu haben. Wenn Sie mit diesen nicht vertraut sind, ist MDN die Heimat von Getting Started, 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äten hinzufügen, um die in diesem Abschnitt erstellten statischen Inhalte in eine funktionale Webanwendung zu verwandeln. Sobald wir eine funktionierende App haben, können wir diese schrittweise in eine PWA umwandeln, die installiert werden kann und offline funktioniert.
Statische Webinhalte
Unser statisches Site-HTML mit Platzhaltern für <link> und <script>-Elementen für noch zu erstellende externe CSS- und JavaScript-Dateien sieht wie folgt aus:
<!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 bekannt vorkommt, empfehlen wir, diesen Abschnitt zu lesen, bevor Sie einige temporäre festkodierte Daten hinzufügen, CSS in ein externes Stylesheet style.css integrieren und app.js erstellen, das JavaScript der Anwendung, das diese Webseite funktionsfähig macht.
Die erste Zeile des HTMLs ist ein Doctype Präludium, das sicherstellt, dass die Inhalte korrekt funktionieren.
<!doctype html>
Die übergeordneten <html>-Tags umfassen 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>
Dokumentkopf
Der <head> enthält maschinenlesbare Informationen über die Webanwendung, die für Leser außer dem <title>, das als Überschrift des Browser-Tabs angezeigt wird, nicht sichtbar sind.
Der <head> enthält alle Metadaten. Die ersten beiden Informationen im <head> sollten immer die Zeichensatzdefinition, die die Zeichenkodierung definiert, und das Viewport <meta>-Tag sein, das sicherstellt, dass die Seite in der Breite des Viewports dargestellt 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 mit dem <title>-Element auf "Cycle Tracker". Während der Inhalt des <head> nicht auf der Seite angezeigt wird, ist der Inhalt 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-Benutzer, die darauf angewiesen sind zu wissen, auf welchem Tab sie sich aktuell befinden.
Obwohl der Titel "Menstruationszyklus-Tracker-Anwendung" sein könnte, haben wir uns für einen kürzeren, diskreteren Namen entschieden.
<title>Cycle Tracker</title>
Obwohl offiziell optional, sollten für eine bessere Benutzererfahrung diese beiden <meta>-Tags und das <title> die drei Komponenten des <head> sein, die als erforderlich für jedes HTML-Dokument 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 schreibendes Stylesheet, mit unserem HTML verbindet.
<link rel="stylesheet" href="style.css" />
Das HTML-Element <link> wird verwendet, um eine Beziehung zwischen dem aktuellen Dokument und einer externen Ressource festzulegen. Es gibt mehr als 25 definierte Werte für das rel-Attribut — und viele weitere 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 behandeln, wenn wir den Link zur Manifestdatei einfügen.
Dokumentenkörper
Das <body>-Element enthält alle Inhalte, die wir anzeigen möchten, wenn Benutzer die Seite im Internet besuchen.
Im <body> fügen wir den Namen der App als Überschrift der Stufe 1 unter Verwendung eines <h1> und eines <form> hinzu.
<body>
<h1>Period tracker</h1>
<form></form>
</body>
Das Formular wird Anweisungen, Formularelemente, ein Label für jedes Formularelement und eine Schaltfläche zum Absenden enthalten. Hinsichtlich der Formularelemente benötigen wir, dass der Benutzer sowohl ein Startdatum als auch ein Enddatum für jeden eingereichten Menstruationszyklus eingibt.
Im <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 Datumsauswähler sind <input>-Elemente vom Typ date. Wir fügen das required-Attribut hinzu, um Benutzerfehler zu verringern, indem verhindert wird, dass der Benutzer versehentlich ein unvollständiges Formular absendet.
Um ein <label> mit einem Formularelement 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 />
Zusammengefasst, innerhalb des <fieldset>, fügen wir zwei Absätze (<p>-Elemente) ein, jeweils mit einem Datumsauswähler für die Start- und Enddaten des aktuell eingegebenen Menstruationszyklus, zusammen mit den zugehörigen <label>s der Datumsauswähler. Wir fügen auch ein <button>-Element hinzu, das das Formular absendet; wir beschriften es mit "Add period", indem wir diesen Text zwischen den öffnenden und schließenden Tags einfügen. Das 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 die Erstellung zugänglicher Webformulare zu erfahren.
Temporäre festkodierte Textdaten
Wir fügen dann einen leeren <section> ein. Dieser Container wird über JavaScript befüllt.
<section id="past-periods"></section>
Wenn der Benutzer das Formular absendet, verwenden wir JavaScript, um die Daten zu erfassen und eine Liste vergangener Perioden zusammen mit einer Überschrift für den Abschnitt zu präsentieren.
Vorläufig kodieren wir einige Inhalte innerhalb dieses <section>, einschließlich einer <h2>-Überschrift und einiger vergangener Perioden, um etwas zu haben, das wir beim Schreiben des CSS der Seite 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>
Dieser Inhalt, mit Ausnahme des Containers <section id="past-periods"></section>, ist vorübergehend. Wir werden diese temporären Daten entfernen oder kommentieren, sobald wir mit dem CSS abgeschlossen 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 JavaScript-Datei app.js ein. 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 Funktionalitäten unserer Anwendung enthalten, einschließlich der Ereignishandler für den <button>, Speichern der übermittelten Daten im lokalem Speicher und Anzeige der Zyklen im Inhalt des Bodys.
Die HTML-Datei für diesen Schritt ist jetzt fertig! Sie können die Datei nun in Ihrem Browser öffnen, aber Sie werden bemerken, dass sie ziemlich schlicht ist. Wir werden das im nächsten Abschnitt beheben.
CSS-Inhalt
Wir können nun das statische HTML mit CSS gestalten. 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 Ihnen jede Zeile bekannt vorkommt, können Sie das obige CSS kopieren oder Ihr eigenes CSS schreiben und die Datei als style.css speichern, dann beenden Sie das statische HTML und CSS. Wenn Ihnen etwas im obigen CSS neu ist, lesen Sie weiter für eine Erklärung.
Erklärtes CSS
Wir verwenden die background-color-Eigenschaft, um eine hellgrüne (#eeffee) Hintergrundfarbe auf dem body zu setzen. 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 wurde. Wir überschreiben die background-color für die Legende und setzen die Legende und die Listenelemente auf ein dunkleres Grün (#ccffcc).
Wir verwenden die :nth-of-type(even) Pseudo-Class Selector, um jedes gerade Listenelement auf inherit die Hintergrundfarbe von seinem Elternteil zu setzen; in diesem Fall, erben der weißen 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 das Padding, indem wir padding: 0 auf das 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 freien Raum hinzu, indem wir das margin des body mit den Viewport-Einheiten vw und vh setzen, wodurch der Freiraum außerhalb unserer App proportional zur Größe des Viewports wird. Wir fügen auch ein wenig Padding zum li und legend hinzu. Schließlich, um die Ausrichtung der Vergangene-Zeiten-Daten zu verbessern, aber nicht zu korrigieren, setzen wir die font-family des ul-Ergebnisabschnitts auf monospace, wodurch jeder Buchstabe 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 Selector-Deklarationsblock setzen. Wir können sogar die Stile für das 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 CSS Styling Basics durcharbeiten.
Unabhängig davon, ob Sie das oben genannte CSS wörtlich verwenden, die obigen Stile nach Ihren Wünschen 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 fortfahren, kommentieren Sie die gefälschten Daten der vergangenen 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 Web-App zu konvertieren und sie dann mit einer Manifestdatei und einem Service Worker zu einer progressiven Webanwendung zu verbessern, werden wir eine lokale Entwicklungsumgebung einrichten, um unseren Fortschritt zu überprüfen.
Bis dahin können Sie die statische CycleTracker-Shell anzeigen. Sie können auch den CycleTracker HTML- und CSS-Quellcode in seiner aktuellen, nicht-funktionalen Form von GitHub herunterladen, bevor Sie zu den nächsten Schritten übergehen.