CycleTracker: Basis-HTML und -CSS
Um eine PWA, eine progressive Webanwendung, zu erstellen, müssen wir eine voll funktionsfähige Webanwendung erstellen. In diesem Abschnitt werden wir das HTML für eine statische Webseite markieren und das Erscheinungsbild mit CSS verbessern.
Unser Projekt besteht darin, 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 Abschnitt der Seite ist ein Formular für den Benutzer, um die Start- und Enddaten jedes Zeitraums einzugeben. Unten befindet sich eine Liste der früheren Menstruationszyklen.
Wir erstellen eine HTML-Datei mit Meta-Daten im Kopfbereich und einer statischen Webseite, die ein Formular und einen Platzhalter zur Anzeige benutzereingegebener Daten 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 grundlegendes Verständnis von HTML, CSS und JavaScript zu haben. Wenn Sie mit diesen nicht vertraut sind, ist MDN die Heimat des Einstieg in die Webentwicklung, einer Einführung in die Webentwicklung-Serie.
In den nächsten Abschnitten werden wir eine lokale Entwicklungsumgebung einrichten und einen Blick auf unseren Fortschritt werfen, bevor wir JavaScript-Funktionalität hinzufügen, um den in diesem Abschnitt erstellten statischen Inhalt in eine funktionale Webanwendung zu verwandeln. Sobald wir eine funktionierende App haben, werden wir etwas haben, das wir schrittweise in eine PWA umwandeln können, die installierbar ist und offline funktioniert.
Statischer Webinhalt
Unser statisches HTML der Seite, mit Platzhalter für <link> und <script>-Elemente 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
Selbst wenn Ihnen das HTML in index.html bekannt ist, empfehlen wir, diesen Abschnitt durchzulesen, bevor Sie einige temporäre hartcodierte Daten hinzufügen, CSS zu einem externen Stylesheet namens style.css hinzufügen und app.js, das JavaScript der Anwendung erstellen, das diese Webseite funktionsfähig macht.
Die erste Zeile des HTML ist ein DOCTYPE-Prolog, der sicherstellt, dass der Inhalt korrekt dargestellt wird.
<!doctype html>
Die root <html>-Tags umschließen 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>
Dokumentkopf
Der <head> enthält maschinenlesbare Informationen über die Webanwendung, die für Leser nicht sichtbar sind, mit Ausnahme des <title>, der 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 definiert, und das Viewport <meta>-Tag, das sicherstellt, dass die Seite in der Breite des Ansichtsfensters 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 mit dem <title>-Element auf "Cycle Tracker". 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 ist, 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 Bildschirmleser-Benutzer, die darauf angewiesen sind, zu wissen, welchen Tab sie derzeit geöffnet haben.
Obwohl der Titel "Menstrual cycle tracking application" sein könnte, haben wir uns für einen verkürzten Namen entschieden, der diskreter ist.
<title>Cycle Tracker</title>
Auch wenn offiziell optional, für eine bessere Benutzererfahrung, sollten diese beiden <meta>-Tags und das <title> die drei Komponenten des <head> sein, die als erforderliche Komponenten eines jeden HTML-Dokuments betrachtet werden 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-<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 weitere Werte, die in keiner Spezifikation stehen. 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 nochmals aufgreifen, wenn wir den Link zur Manifestdatei einschließen.
Dokumentkö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 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 einen Absenden-Button enthalten. In Bezug auf die Formularelemente 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> hinzu, die den Zweck dieser Gruppe von Formularelementen beschreibt.
<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 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 />
Alles zusammengefügt, innerhalb des <fieldset> fügen wir zwei Absätze (<p>-Elemente) ein, jeweils mit einem Datumsfeld für die Start- und Enddaten des derzeit eingegebenen Menstruationszyklus, zusammen mit den zugehörigen <label>s der Datumsauswahlen. Wir fügen auch ein <button>-Element hinzu, das das Formular absendet, und kennzeichnen es mit "Add period", indem wir diesen Text zwischen den öffnenden und schließenden Tags hinzufü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 die Erstellung von zugänglichen Webformularen zu lernen.
Temporärer hartcodierter Ergebnistext
Dann fügen wir ein leeres <section> ein. Dieser Container wird mithilfe von 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 früherer Perioden zusammen mit einer Überschrift für den Abschnitt darzustellen.
Vorerst kodieren wir einige Inhalte innerhalb dieses <section> temporär hart, einschließlich einer <h2>-Überschrift und ein paar früherer Perioden, um etwas zu haben, das wir stylen können, 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 fertig gestellt haben und mit dem Erscheinungsbild der App zufrieden sind.
JavaScript-Link
Bevor wir den </body>-Tag 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 verschieben und sicherzustellen, dass das JavaScript erst nach dem Parsen des HTML-Dokuments ausgeführt wird.
<script src="app.js" defer></script>
Die Datei app.js wird alle Funktionsweisen unserer Anwendung enthalten, einschließlich der Ereignis-Handler für den <button>, der Speicherung der übermittelten Daten im lokalen Speicher und der Anzeige der Zyklen im Inhalt des Bodies.
Die HTML-Datei für diesen Schritt ist nun komplett! Sie können die Datei zu diesem Zeitpunkt 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 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 und dann das statische HTML und CSS fertigstellen. Wenn Ihnen irgendetwas an dem obenstehenden CSS neu erscheint, lesen Sie weiter für eine Erklärung.
CSS erklärt
Wir verwenden die background-color-Eigenschaft, um dem body eine hellgrüne (#efe) Hintergrundfarbe zu verleihen. Dann verwenden wir bei der ungeordneten Liste, dem Fieldset und der Legende eine weiße (#fff) Hintergrundfarbe, zusammen mit einem dünnen, soliden Rahmen, der mit der border-Eigenschaft hinzugefügt wird. Wir überschreiben die background-color für die Legende, wodurch die Legende und die Listenelemente ein dunkleres Grün (#cfc) erhalten.
Wir verwenden die :nth-of-type(even)-Pseudo-Klasse Selector, um jedes geradzahlige Listenelement dazu zu bringen, inherit die Hintergrundfarbe von seinem Elternteil zu erben; in diesem Fall, um die #fff Hintergrundfarbe von der ungeordneten Liste zu erben.
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 das Padding durch Setzen von padding: 0 auf der ul und entfernen die Listenmarkierungen durch Setzen von list-style-type: none auf den Listenelementen selbst.
ul {
padding: 0;
}
li {
list-style-type: none;
}
Wir fügen ein wenig Freiraum ein, indem wir den margin des body mit den vw und vh Viewport-Einheiten setzen, wodurch der Freiraum 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 das Ausrichten der vergangenen Periodendaten zu verbessern, aber nicht zu beheben, setzen wir die font-family des ul Ergebnisses Abschnitts auf monospace, wodurch jedes Zeichen die gleiche feste Breite hat.
body {
margin: 1vh 1vw;
}
ul {
font-family: monospace;
}
li,
legend {
padding: 0.2em 0.5em;
}
Wir können die obigen Elemente kombinieren und mehrere Eigenschaften in jedem Selector-Deklarationsblock zusammenfassen. Wir können sogar die Styles für li und legend zusammenfassen; irrelevante Styles, wie die list-style-type-Deklaration bei 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 das oben angegebene CSS immer noch unbekannt erscheint, können Sie die CSS-Eigenschaften und Selektor nachschlagen oder das Modul CSS Styling basics durcharbeiten.
Ob Sie das obige CSS wörtlich verwenden, die obigen Styles 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 wir weitermachen, kommentieren Sie die gefälschten Daten und Überschriften aus oder löschen 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 dann in eine Progressive Web App mit einer Manifest-Datei und einem Service Worker zu erweitern, werden wir eine lokale Entwicklungsumgebung erstellen, um unseren Fortschritt zu sehen.
Bis dahin können Sie die statische CycleTracker-Shell ansehen und den CycleTracker HTML und CSS Quellcode von GitHub herunterladen.