Notes 8
Sie können diese Seite ausdrucken oder mit einem PDF-Drucker in ein PDF umwandeln, um Ihre eigenen Notizen hinzuzufügen.
Willkommen!
- In den vergangenen Wochen haben wir Ihnen Python vorgestellt, eine Programmiersprache auf hohem Niveau, die die gleichen Bausteine verwendet, die wir in C gelernt haben. Heute werden wir diese Bausteine in HTML, CSS und JavaScript weiter ausbauen.
Das Internet
- Das Internet ist eine Technologie, die wir alle nutzen.
- Mit unseren Kenntnissen aus den vergangenen Wochen können wir unsere eigenen Webseiten und Anwendungen erstellen.
HTTPS
-
HTTP oder Hypertext Transfer Protocol ist ein Protokoll auf Anwendungsebene, das Entwickler verwenden, um leistungsstarke und nützliche Dinge durch die Übertragung von Daten von einem Ort zum anderen zu erstellen. HTTPS ist eine sichere Version dieses Protokolls.
-
Wenn Sie eine Adresse wie
https://www.example.comsehen, besuchen Sie implizit diese Adresse mit einem/am Ende der Adresse. -
Solche Adressen werden auch URLs genannt, kurz für Uniform Resource Locator.
-
Der Pfad ist das, was hinter dem Schrägstrich steht. Ein Beispiel:
https://www.example.com/folder/file.htmlbesuchtexample.comund wechselt in das Verzeichnisfolder, um dann die Dateifile.htmlabzurufen. -
Das
.comwird als Top-Level-Domain bezeichnet, die verwendet wird, um den Standort oder die Art der mit dieser Adresse verbundenen Organisation zu bezeichnen. -
“https” in dieser Adresse ist das Protokoll, das für die Verbindung zu dieser Webadresse verwendet wird. Mit Protokoll ist gemeint, dass HTTP
GEToderPOSTrequests verwendet, um Informationen von einem Server anzufordern. Sie können z. B. Google Chrome starten, mit der rechten Maustaste klicken und dann auf “Inspect” klicken. Wenn Sie die “Entwicklertools” öffnen und “Netzwerk” aufrufen und “Preserve Log” auswählen, sehen Sie “Request Headers”. Sie sehen dann hier dieGET-Anfragen. Dies ist auch in anderen Browsern möglich, wobei etwas andere Methoden verwendet werden. -
Wenn Sie zum Beispiel eine GET-Anfrage stellen, könnte Ihr Rechner beispielsweise Folgendes an einen Server senden
GET / HTTP/2 Host: www.harvard.eduBeachten Sie, dass der Inhalt, der auf www.harvard.edu bereitgestellt wird, über HTTP angefordert wird.
-
Im Allgemeinen erhalten Sie nach einer Anfrage an einen Server die folgenden “Response-Header”:
HTTP/2 200 Content-Type: text/html -
Sie können die Arbeit des HTTP-Protokolls in ihrem Codespace oder in Ihrem Dev Container analysieren. Geben Sie zum Beispiel Folgendes in Ihr Terminalfenster ein:
curl -I https://www.harvard.edu/Beachten Sie, dass die Ausgabe dieses Befehls alle Header-Werte der Antworten des Servers zurückgibt.
-
Mit den Entwicklertools in Ihrem Webbrowser können Sie alle HTTP-Anfragen sehen, wenn Sie die oben genannte Website besuchen.
-
Führen Sie außerdem den folgenden Befehl in Ihrem Terminalfenster aus:
curl -I https://harvard.eduBeachten Sie, dass Sie eine “301”-Antwort erhalten, die dem Browser einen Hinweis darauf gibt, wo er die richtige Website finden kann.
-
Führen Sie den folgenden Befehl in Ihrem Terminalfenster aus:
curl -I http://www.harvard.edu/Beachten Sie, dass das “s” in “https” entfernt wurde. Die Antwort des Servers lautet “301”, was bedeutet, dass die Website dauerhaft umgezogen ist.
-
Es gibt noch mehr HTTP-Status-Codes. Ein Code von
404bedeutet , dass eine bestimmte URL nicht gefunden wurde. Es gibt zahlreiche weitere Antwortcodes (die Sie natürlich nicht alle auswendig wissen müssen):200 OK 301 Moved Permanently 302 Found 304 Not Modified 304 Temporary Redirect 401 Unauthorized 403 Forbidden 404 Not Found 418 I'm a Teapot 500 Internal Server Error 503 Service Unavailable
HTML
-
HTML, also die Hypertext Markup Language, besteht aus Tags, von denen jedes einige Attribute haben kann, die ein Tag näher beschreiben.
-
Geben Sie in Ihrem Terminal
code hello0.htmlein und schreiben Sie den folgenden Code:<!DOCTYPE html> <!-- Demonstriert HTML --> <html lang="de"> <head> <title>Hallo, Titel</title> </head> <body> hallo, body </body> </html>Beachten Sie, dass der
html-Tag diese Datei sowohl eröffnet und abschließt. Beachten Sie auch das Attributlang, das das Verhalten deshtml-Tags ändert. Beachten Sie auch, dass es sowohl einen “head”-Tag als auch ein “body”-Tag (und jeweils ein schließendes Tag dazu) gibt. Eine Einrückung ist nicht erforderlich, deutet aber auf eine Hierarchie hin. -
Sie können Ihre Webseite durch Eingabe von
http-serverim Codespace oder Dev Container bereitstellen. Wenn Sie die angezeigte URL anklicken, können Sie die von Ihrem eigenen Code erzeugte Website besuchen. -
Wenn Sie diese URL besuchen, sehen Sie, dass der Dateiname
hello.htmlam Ende dieser URL erscheint. Außerdem können Sie anhand der URL erkennen, dass der Server über den Port 8080 erreichbar ist. -
Die Hierarchie der Tags kann wie folgt dargestellt werden:
DOM -
Das Wissen über diese Hierarchie wird später beim Erlernen von JavaScript nützlich sein.
-
Der Browser liest Ihre HTML-Datei von oben nach unten und von links nach rechts.
-
Es wird empfohlen, im
head-Bereich den Zeichensatz anzugeben; mehr dazu im Short-Video zu HTML.<!DOCTYPE html> <!-- Demonstriert HTML --> <html lang="de"> <head> <meta charset="UTF-8"> <title>Hallo, Titel</title> </head> <body> hallo, body </body> </html>Aus Gründen der Übersichtlichkeit lassen wir das Charset in den Beispielen in der Vorlesung weg.
Paragraphen
-
Da Leerraum und Einrückung in HTML ignoriert werden, müssen Sie die Absatz-Tags
<p>verwenden, um einen Absatz zu öffnen und zu schließen. Betrachten Sie das Folgende (paragraph.html):<!DOCTYPE html> <!-- Demonstriert Absätze --> <html lang="de"> <head> <title>Absätze</title> </head> <body> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat. </p> <p> Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh. </p> <p> Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt. </p> <p> Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris. </p> <p> Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque. </p> <p> Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien. </p> </body> </html>Beachten Sie, dass Absätze mit einem
<p>-Tag beginnen und mit einem</p>-Tag enden.
Überschriften
-
HTML ermöglicht die Darstellung von Überschriften:
<!DOCTYPE html> <!-- Zeigt Überschriften (für Kapitel, Abschnitte, Unterabschnitte, usw.) --> <html lang="de"> <head> <title>Überschriften</title> </head> <body> <h1>Eins</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis scelerisque quam, vel hendrerit lectus viverra eu. Praesent posuere eget lectus ut faucibus. Etiam eu velit laoreet, gravida lorem in, viverra est. Cras ut purus neque. In porttitor non lorem id lobortis. Mauris gravida metus libero, quis maximus dui porta at. Donec lacinia felis consectetur venenatis scelerisque. Nulla eu nisl sollicitudin, varius velit sit amet, vehicula erat. Curabitur sollicitudin felis sit amet orci mattis, a tempus nulla pulvinar. Aliquam erat volutpat. </p> <h2>Zwei</h2> <p> Mauris ut dui in eros semper hendrerit. Morbi vel elit mi. Sed sit amet ex non quam dignissim dignissim et vel arcu. Pellentesque eget elementum orci. Morbi ac cursus ex. Pellentesque quis turpis blandit orci dapibus semper sed non nunc. Nulla et dolor nec lacus finibus volutpat. Sed non lorem diam. Donec feugiat interdum interdum. Vivamus et justo in enim blandit fermentum vel at elit. Phasellus eu ante vitae ligula varius aliquet. Etiam id posuere nibh. </p> <h3>Drei</h3> <p> Aenean venenatis convallis ante a rhoncus. Nullam in metus vel diam vehicula tincidunt. Donec lacinia metus sem, sit amet egestas elit blandit sit amet. Nunc egestas sem quis nisl mattis semper. Pellentesque ut magna congue lorem eleifend sodales. Donec tortor tortor, aliquam vitae mollis sed, interdum ut lectus. Mauris non purus quis ipsum lacinia tincidunt. </p> <h4>Vier</h4> <p> Integer at justo lacinia libero blandit aliquam ut ut dui. Quisque tincidunt facilisis venenatis. Nullam dictum odio quis lorem luctus, vel malesuada dolor luctus. Aenean placerat faucibus enim a facilisis. Maecenas eleifend quis massa sed eleifend. Ut ultricies, dui ac vulputate hendrerit, ex metus iaculis diam, vitae fermentum libero dui et ante. Phasellus suscipit, arcu ut consequat sagittis, massa urna accumsan massa, eu aliquet nulla lorem vitae arcu. Pellentesque rutrum felis et metus porta semper. Nam ac consectetur mauris. </p> <h5>Fünf</h5> <p> Suspendisse rutrum vestibulum odio, sed venenatis purus condimentum sed. Morbi ornare tincidunt augue eu auctor. Vivamus sagittis ac lectus at aliquet. Nulla urna mauris, interdum non nibh in, vehicula porta enim. Donec et posuere sapien. Pellentesque ultrices scelerisque ipsum, vel fermentum nibh tincidunt et. Proin gravida porta ipsum nec scelerisque. Vestibulum fringilla erat at turpis laoreet, nec hendrerit nisi scelerisque. </p> <h6>Sechs</h6> <p> Sed quis malesuada mi. Nam id purus quis augue sagittis pharetra. Nulla facilisi. Maecenas vel fringilla ante. Cras tristique, arcu sit amet blandit auctor, urna elit ultricies lacus, a malesuada eros dui id massa. Aliquam sem odio, pretium vel cursus eget, scelerisque at urna. Vestibulum posuere a turpis consectetur consectetur. Cras consequat, risus quis tempor egestas, nulla ipsum ornare erat, nec accumsan nibh lorem nec risus. Integer at iaculis lacus. Integer congue nunc massa, quis molestie felis pellentesque vestibulum. Nulla odio tortor, aliquam nec quam in, ornare aliquet sapien. </p> </body> </html>Beachten Sie, dass
<h1>,<h2>und<h3>verschiedene Ebenen von Überschriften bezeichnen.
Semantisches Tags
- HTML bietet semantische Tags, die die Bedeutung des Inhalts beschreiben:
<nav>für Navigationsbereiche<main>für den Hauptinhalt<article>für eigenständige Inhalte<section>für thematisch gruppierte Inhalte<aside>für Nebenbemerkungen
- Die Nutzung semantischer Tags hat Vorteile hinsichtlich (1) der Zugänglichkeit für Screenreader, (2) der Auffindbarkeit durch Suchmaschinen und (3) der Wartbarkeit des Codes.
Listen
-
Wir können auch ungeordnete Listen in HTML erstellen:
<!DOCTYPE html> <!-- Demonstriert (geordnete) Listen --> <html lang="de"> <head> <title>Liste</title> </head> <body> <ul> <li>foo</li> <li>bar</li> <li>baz</li> </ul> </body> </html>Beachten Sie, dass der
<ul>-Tag eine ungeordnete Liste mit drei Elementen erstellt. -
Wir können auch geordnete Listen in HTML erstellen:
<!DOCTYPE html> <!-- Demonstriert (geordnete) Listen --> <html lang="de"> <head> <title>Liste</title> </head> <body> <ol> <li>foo</li> <li>bar</li> <li>baz</li> </ol> </body> </html>Beachten Sie, dass der Tag
<ol>eine geordnete Liste mit drei Elementen erstellt.
Tabellen
-
Wir können auch eine Tabelle in HTML erstellen:
<!DOCTYPE html> <!-- Demonstriert Tabelle --> <html lang="de"> <head> <title>Tabelle</title> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>*</td> <td>0</td> <td>#</td> </tr> </table> </body> </html>Tabellen haben auch Tags, die jedes Element darin öffnen und schließen. Beachten Sie auch die Syntax für Kommentare in HTML.
Bilder
-
Bilder können auch in HTML verwendet werden (
image.html):<!DOCTYPE html> <!-- Demonstriert Bild --> <html lang="de"> <head> <title>Bild</title> </head> <body> <img alt="Foto der Brücke" src="bridge.png"> </body> </html>Beachten Sie, dass
src="bridge.png"den Pfad angibt, in dem sich die Bilddatei befinden kann.
Videos
-
Videos können auch in HTML eingebunden werden (nicht in der Vorlesung gezeigt):
<!DOCTYPE html> <!-- Demonstriert Video --> <html lang="de"> <head> <title>Video</title> </head> <body> <video controls muted> <source src="video.mp4" type="video/mp4"> </video> </body> </html>Beachten Sie, dass das Attribut “type” angibt, dass es sich um ein Video des Typs “mp4” handelt. Beachten Sie auch, dass “controls” und “muted” an “video” übergeben werden. Diese Attribute haben nur einen Namen, aber keinen Wert. Sie führen dazu, dass das Video stummgeschaltet abgespielt wird und dass Bedienelemente zur Steuerung des Videos angezeigt werden.
Links
-
Sie können auch Links zwischen verschiedenen Webseiten herstellen:
<!DOCTYPE html> <!-- Demonstriert Link --> <html lang="de"> <head> <title>Link</title> </head> <body> Besuchen Sie <a href="https://www.harvard.edu">Harvard</a>. </body> </html>Beachten Sie, dass der
<a>oder anchor Tag verwendet wird, umHarvardzu einem verlinkbaren Text zu machen. -
Wir haben gesehen, dass das Ziel des Links mit dem angezeigten Link nichts zu tun haben muss.
- An dieser Stelle haben wir uns auch View Page Source (statisch, wie heruntergeladen) und die Inspect-Funktion des Browsers (zeigt aktuellen Zustand des DOMs mit Möglichkeit Änderungen live durchzuführen) angesehen. Wir haben gesehen, wie leicht es ist, die lokale Kopie einer Webseite zu verändern.
Formulare
-
Sie können auch Formulare erstellen, die an die Google-Suche erinnern (
search0.html):<!DOCTYPE html> <!-- Demonstriert Form --> <html lang="de"> <head> <title>Suche</title> </head> <body> <form action="https://www.google.com/search" method="get"> <input name="q" type="search"> <input type="submit" value="Google Suche"> </form> </body> </html>Beachten Sie, dass wir einem
form-Tag mit dem Attributactionverwenden. Das Feldinputmuss den Namen “q” haben. Wenn es vom Typ “search” ist, zeigt es einxzum Löschen des Inhalts an. -
Wir können diese Suche wie folgt verbessern (
search1.html):<!DOCTYPE html> <!-- Demonstriert zusätzliche Formularattribute --> <html lang="de"> <head> <title>Suche</title> </head> <body> <form action="https://www.google.com/search" method="get"> <input autocomplete="off" autofocus name="q" placeholder="Query" type="search"> <button>Google Suche</button> </form> </body> </html>Beachten Sie, dass “Autocomplete” nun ausgeschaltet ist. “Autofokus” ist aktiviert.
-
Wir haben nur einige der vielen HTML-Elemente gesehen, die Sie Ihrer Website hinzufügen können. Es gibt zahlreiche Referenzen und Tutorials (z.B. SelfHTML); Sie können aber auch cs50.ai verwenden, um weitere HTML-Funktionen zu entdecken.
Reguläre Ausdrücke
-
Regelmäßige Ausdrücke (Regular Expressions, RegEx) sind ein Mechanismus, mit dem Muster in Zeichenketten gesucht werden können. Dies verwenden wir hier, um sicherzustellen, dass die vom Benutzer bereitgestellten Daten einem bestimmten Format entsprechen.
-
Wir können unsere eigene Registrierungsseite, die Regexe verwendet, wie folgt implementieren (
register0.html):<!DOCTYPE html> <!-- Demonstriert type="email" --> <html lang="de"> <head> <title>Register</title> </head> <body> <form> <input autocomplete="off" autofocus name="email" placeholder="Email" type="email"> <button>Registrieren</button> </form> </body> </html>Beachten Sie, dass der “input”-Tag Attribute enthält, die angeben, dass es sich um den Typ “E-Mail” handelt. Der Browser weiß, dass er überprüfen muss, ob es sich bei der Eingabe um eine E-Mail-Adresse handelt.
-
Während der Browser diese eingebauten Attribute verwendet, um nach einer E-Mail-Adresse zu suchen, können wir ein
pattern-Attribut hinzufügen, um sicherzustellen, dass nur bestimmte Daten in der E-Mail-Adresse landen:<!DOCTYPE html> <!-- Demonstriert Musterattribut --> <html lang="de"> <head> <title>Register</title> </head> <body> <form> <input autocomplete="off" autofocus name="email" pattern=".+@.+\.uni-bamberg\.de" placeholder="Email" type="email"> <button>Registrieren</button> </form> </body> </html>Beachten Sie, dass das Attribut
patternein regulärer Ausdruck ist, der besagt, dass die E-Mail-Adresse ein “@"-Symbol enthalten muss, danach muss mindestens ein Zeichen komen und danach muss die Endung.uni-bamberg.dekommen. Die Adresse dominikherrmann@uni-bamberg.de erfüllt diese Anforderung zum Beispiel nicht, dominikherrmann@psi.uni-bamberg.de hingegen schon. -
Mehr über reguläre Ausdrücke finden Sie in Mozillas Dokumentation oder bei cs50.ai.
-
Wichtig: Verlassen Sie sich nicht auf Reguläre Ausdrücke, die in HTML hinterlegt sind. Benutzerinnen und Benutzer können die Webseite lokal editieren (über Inspect) und das Pattern aus dem Formular entfernen. Die Validierung von Eingaben muss daher immer (zusätzlich) auf der Serverseite implementiert werden – das können wir momentan aber noch nicht.
CSS
-
CSS, oder Cascading Style Sheets, ist eine Auszeichnungssprache, mit der Sie die Ästhetik Ihrer HTML-Dateien fein abstimmen können.
-
CSS nutzt Eigenschaften, die Schlüssel-Wert-Paare enthalten.
-
Geben Sie in Ihrem Terminal
code home.htmlein und schreiben Sie den folgenden Code (nicht gezeigt):<!DOCTYPE html> <!-- Demonstriert Inline-CSS mit P-Tags --> <html lang="de"> <head> <title>css</title> </head> <body> <p style="font-size: large; text-align: center;"> John Harvard </p> <p style="font-size: medium; text-align: center;"> Willkommen auf meiner Homepage! </p> <p style="font-size: small; text-align: center;"> Copyright © John Harvard </p> </body> </html>Beachten Sie, dass einige “style”-Attribute für die
<p>-Tags vorgesehen sind. Diefont-sizewird auflarge,mediumodersmallgesetzt. Dann wirdtext-alignauf center gesetzt. -
Das ist zwar richtig, aber nicht gut durchdacht. Wir können die Redundanz beseitigen, indem wir unseren Code wie folgt abändern (nicht gezeigt):
<!DOCTYPE html> <!-- Entfernt äußeres DIV --> <html lang="de"> <head> <title>css</title> </head> <body style="text-align: center"> <div style="font-size: large"> John Harvard </div> <div style="font-size: medium"> Willkommen auf meiner Homepage! </div> <div style="font-size: small"> Copyright © John Harvard </div> </body> </html>Beachten Sie, dass
<div>-Tags verwendet werden, um diese HTML-Datei in bestimmte Bereiche zu unterteilen. Das Attribut “text-align: center” wird auf den gesamten HTML-Körper angewandt. Da alles innerhalb von “body” ein Kind von “body” ist, wird das Attribut “center” auf diese Kinder übertragen. -
Wir können die semantischen Tags von HTML benutzen, indem wir unseren Code wie folgt ändern (
home4.html):<!DOCTYPE html> <!-- Verwendet semantische Tags anstelle von DIVs --> <html lang="de"> <head> <title>css</title> </head> <body style="text-align: center"> <header style="font-size: large"> John Harvard </header> <main style="font-size: medium"> Willkommen auf meiner Homepage! </main> <footer style="font-size: small"> Copyright © John Harvard </footer> </body> </html>Beachten Sie, dass dem Header und dem Footer unterschiedliche Styles zugewiesen sind.
-
Die Praxis, die Styles und die Inhalte alle am selben Ort zu platzieren, ist kein guter Stil. Wir könnten die Styles wie folgt an den Anfang der Datei verschieben:
<!-- Demonstrates class selectors --> <html lang="en"> <head> <style> .centered { text-align: center; } .large { font-size: large; } .medium { font-size: medium; } .small { font-size: small; } </style> <title>css</title> </head> <body class="centered"> <header class="large"> John Harvard </header> <main class="medium"> Welcome to my home page! </main> <footer class="small"> Copyright © John Harvard </footer> </body> </html>Beachten Sie, dass alle Style-Tags oben im
headimstyleTag-Wrapper platziert sind. Beachten Sie auch, dass wir unseren Elementen Klassen zugewiesen haben, diecentered,large,mediumundsmallheißen, und dass wir diese Klassen auswählen, indem wir einen Punkt vor den Namen setzen, wie in.centered -
Es hat sich herausgestellt, dass wir unseren gesamten Style-Code in eine spezielle Datei namens CSS-Datei verschieben können. Wir können eine Datei namens
style.csserstellen und unsere Klassen dort einfügen:.centered { text-align: center; } .large { font-size: large; } .medium { font-size: medium; } .small { font-size: small; }Beachten Sie, dass dies wortwörtlich das ist, was in unserer HTML-Datei steht.
-
So können wir dem Browser mitteilen, wo das CSS für diese HTML-Datei zu finden ist:
<!DOCTYPE html> <!-- Demonstrates external stylesheets --> <html lang="en"> <head> <link href="style.css" rel="stylesheet"> <title>css</title> </head> <body class="centered"> <header class="large"> John Harvard </header> <main class="medium"> Welcome to my home page! </main> <footer class="small"> Copyright © John Harvard </footer> </body> </html>Beachten Sie, dass die Datei “style.css” mit dieser HTML-Datei als Stylesheet verknüpft ist und dem Browser mitteilt, wo er die von uns erstellten Styles finden kann.
Spezifizität der Regeln
-
CSS verwendet ein System namens “Spezifität”, um zu bestimmen, welche Styles Vorrang haben:
- Inline-Styles (style=”…") haben die höchste Spezifität
- IDs (#element) haben eine höhere Spezifität als Klassen
- Klassen (.element) haben eine höhere Spezifität als Tags
- Tag-Selektoren (wie p, div) haben die niedrigste Spezifität
- Bei gleicher Spezifität gilt die Regel, die zuletzt im Code steht:
-
Schauen wir uns folgendes Beispiel an, um den Einfluss der Spezifizität zu sehen:
<!DOCTYPE html> <html lang="en"> <head> <title>css</title> <style> a { color: green; } #bamberg { color: blue; } .firsttwo { text-decoration: none; } .bold { font-weight: bold; } </style> </head> <body class="centered"> <p> Welcome to my home page! <a class="firsttwo bold" id="bamberg" href="https://www.uni-bamberg.de/">Bamberg</a> und <a class="firsttwo" href="https://www.harvard.edu/">Harvard</a>. </p> <p> <a href="https://www.uni-bamberg.de/">Bamberg</a> und <a href="https://www.harvard.edu/">Harvard</a> </p> </body> </html>
Frameworks
-
Ähnlich wie Bibliotheken von Drittanbietern, die wir in Python nutzen können, gibt es auch für CSS Bibliotheken von Drittanbietern, die Frameworks genannt werden und die wir mit unseren HTML-Dateien verwenden können.
-
Bootstrap ist eines dieser Frameworks, mit dem wir unser HTML verschönern und Design-Elemente leicht perfektionieren können, so dass unsere Seiten besser lesbar sind.
-
Bootstrap kann verwendet werden, indem man den folgenden “link”-Tag in den “head” der HTML-Datei einfügt:
<head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <title>bootstrap</title> </head>
-
Betrachten Sie den folgenden HTML-Code (
phonebook0.html):<!DOCTYPE html> <!-- Demonstriert Tabelle --> <html lang="de"> <head> <title>Telefonbuch</title> </head> <body> <table> <thead> <tr> <th>Name</th> <th>Nummer</th> </tr> </thead> <tbody> <tr> <td>Carter</td> <td>+1-617-495-1000</td> </tr> <tr> <td>David</td> <td>+1-617-495-1000</td> </tr> <tr> <td>John</td> <td>+1-949-468-2750</td> </tr> </tbody> </table> </body> </html>Beachten Sie, dass diese Seite bisher recht schlicht ist.
-
Betrachten Sie nun das folgende HTML, das die Verwendung von Bootstrap implementiert (
phonebook1.html):<!DOCTYPE html> <!-- Demonstriert Tabelle mit Bootstrap --> <html lang="de"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Telefonbuch</title> </head> <body> <table class="table"> <thead> <tr> <th scope="col">Name</th> <th scope="col">Nummer</th> </tr> </thead> <tbody> <tr> <td>Carter</td> <td>+1-617-495-1000</td> </tr> <tr> <td>David</td> <td>+1-949-468-2750</td> </tr> </tbody> </table> </body> </html>Beachten Sie, wie viel hübscher die Website jetzt ist.
-
Ähnlich verhält es sich mit der folgenden Erweiterung unserer zuvor erstellten Suchseite (nicht gezeigt):
<!DOCTYPE html> <!-- Demonstriert Layout mit Bootstrap --> <html lang="de"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> <title>Suche</title> </head> <body> <div class="container-fluid"> <ul class="m-3 nav"> <li class="nav-item"> <a class="nav-link text-dark" href="https://about.google/">Über uns</a> </li> <li class="nav-item"> <a class="nav-link text-dark" href="https://store.google.com/">Laden</a> </li> <li class="nav-item ms-auto"> <a class="nav-link text-dark" href="https://www.google.com/gmail/">Gmail</a> </li> <li class="nav-item"> <a class="nav-link text-dark" href="https://www.google.com/imghp">Bilder</a> </li> <li class="nav-item"> <a class="nav-link text-dark" href="https://www.google.com/intl/en/about/products"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grid-3x3-gap-fill" viewBox="0 0 16 16"> <path d="M1 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V2zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V2zM1 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm5 0a1 1 0 0 1 1-1h2a1 1 0 0 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1V7zM1 12a1 1 0 0 1 1-1h2a1 1 0 0 1 1v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1-1h2a1 1 0 0 1 1v2a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1v-2zm5 0a1 1 0 0 1-1h2a1 1 0 0 0 1 1v2a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-2z"/> </svg> </a> </li> <li class="nav-item"> <a class="btn btn-primary" href="https://accounts.google.com/ServiceLogin" role="button">Anmelden</a> </li> </ul> <div class="text-center"> <!-- https://knowyourmeme.com/memes/happy-cat --> <img alt="Happy Cat" class="img-fluid w-25" src="cat.gif"> <form action="https://www.google.com/search" class="mt-4" method="get"> <input autocomplete="off" autofocus class="form-control form-control-lg mb-4 mx-auto w-50" name="q" placeholder="Query" type="search"> <button class="btn btn-light">Google Suche</button> <button class="btn btn-light" name="btnI">I'm Feeling Lucky</button> </form> </div> </div> </body> </html>Diese Version der Seite ist dank Bootstrap deutlich ästhetischer.
-
Bootstrap macht es deutlich leichter, Webseiten zu erstellen, die den Grundlagen des Responsive Design folgen. Das bedeutet, dass sich Webseiten automatisch an verschiedene Bildschirmgrößen anpassen:
- Layouts ändern sich je nach Bildschirmgröße
- Bilder skalieren automatisch
- Text bleibt lesbar
-
Bootstrap verwendet ein 12-Spalten-Grid-System für responsive Layouts, mit dem sich ein Mobile-First-Ansatz bei der Webentwicklung umsetzen lässt.
-
Mobile First bedeutet, dass wir zuerst das mobile Design entwickeln und dann um Varianten für größere Bildschirme erweitern.
-
Weitere Informationen hierzu finden Sie in der Bootstrap-Dokumentation.
JavaScript
-
JavaScript ist eine weitere Programmiersprache, die die Interaktivität von Webseiten ermöglicht.
-
Betrachten Sie die folgende Implementierung:
<!DOCTYPE html> <html lang="de"> <head> <title>Hallo</title> </head> <body> <form> <input autocomplete="off" autofocus id="name" placeholder="Name" type="text"> <input type="submit"> </form> </body> </html> -
Betrachten Sie die folgende Implementierung von
hello1.html, die sowohl JavaScript als auch HTML enthält:<!DOCTYPE html> <!-- Demonstriert onsubmit --> <html lang="de"> <head> <script> function greet() { let name = document.querySelector('#name').value; alert('hallo, ' + name); } </script> <title>Hallo</title> </head> <body> <form onsubmit="greet(); return false;"> <input autocomplete="off" autofocus id="name" placeholder="Name" type="text"> <input type="submit"> </form> </body> </html>Beachten Sie, dass dieses Formular ein Attribut onsubmit verwendet, um eine Funktion auszuführen, die sich am Anfang der Datei befindet. Das Skript verwendet
alert, um ein Warn-Pop-up zu erstellen.document.querySelector('#name').valuegeht zu dem Textfeld auf der Seite und erhält den vom Benutzer eingegebenen Wert. Beachten Sie, dass das Formular nicht abgeschickt wird, da wir im Event-Handler false zurückgeben. -
Im Allgemeinen wird es als schlechtes Design angesehen, onsubmit und JavaScript zu vermischen. In diesem Teil werden wir Schritt für Schritt besseres Design verwenden. Dazu verschieben wir unser Skript vorerst unter das Formular (was wir später wieder rückgängig machen werden):
<!DOCTYPE html> <html lang="de"> <head> <title>Hallo</title> </head> <body> <form> <input autocomplete="off" autofocus id="name" placeholder="Name" type="text"> <input type="submit"> </form> <script> function greet(event) { let name = document.querySelector('#name').value; alert('hallo, ' + name); event.preventDefault(); } let form = document.querySelector('form'); form.addEventListener('submit', greet); }); </script> </body> </html>Beachten Sie, dass diese Version des Codes einen
addEventListenererstellt, der auf das Auslösen des Formularssubmithört. Beachten Sie, wie die Funktiongreetals Parameter an den Event-Listener übergeben wird. Das geht, weil Funktionen in JavaScript so genannte first-class citizens sind, so wie in Python (eine Erklärung dieses Konzepts gibt es im Python-Short zur Datenverarbeitung). -
Wir können die Redundanz im Code durch die Verwendung einer anonymen Funktion an Ort und Stelle ersetzen:
<!DOCTYPE html> <html lang="de"> <head> <title>Hallo</title> </head> <body> <form> <input autocomplete="off" autofocus id="name" placeholder="Name" type="text"> <input type="submit"> </form> <script> document.querySelector('form').addEventListener('submit', function(event) { alert('hallo, ' + document.querySelector('#name').value); event.preventDefault(); }); </script> </body> </html> -
Wenn wir nun versuchen, das Skript in den Kopfbereich zu verschieben, passiert … nichts, wenn wir auf die Schaltfläche klicken. Warum?
-
In der JavaScript-Konsole (erreichbar über Developer-Tools) können wir einen TypeError (Cannot read properties of null) sehen. Der Grund dafür ist, dass das Skript im HEAD ausgeführt wird, bevor das Formular im DOM erstellt wurde.
-
Um dieses Problem in den Griff zu bekommen, müssen wir unseren Code wie folgt anpassen (typische Vorgehensweise):
<!DOCTYPE html> <!-- Demonstriert DOMContentLoaded --> <html lang="de"> <head> <script> document.addEventListener('DOMContentLoaded', function() { document.querySelector('form').addEventListener('submit', function(e) { alert('hallo, ' + document.querySelector('#name').value); e.preventDefault(); }); }); </script> <title>Hallo</title> </head> <body> <form> <input autocomplete="off" autofocus id="name" placeholder="Name" type="text"> <input type="submit"> </form> </body> </html>Der Event-Listener für DOMContentLoaded aktiviert unsere Funktion erst, wenn die gesamte Seite geladen wird.
-
Wir können diesen Code wie folgt weiterentwickeln (
hello5.html):<!DOCTYPE html> <!-- Demonstration von Keyup- und Template-Literalen --> <html lang="de"> <head> <script> document.addEventListener('DOMContentLoaded', function() { let input = document.querySelector('input'); input.addEventListener('keyup', function(event) { let name = document.querySelector('p'); if (input.value) { name.innerHTML = `Hallo, ${input.value}`; } else { name.innerHTML = 'hallo, du'; } }); }); </script> <title>Hallo</title> </head> <body> <form> <input autocomplete="off" autofocus placeholder="Name" type="text"> </form> <p></p> </body> </html>Beachten Sie, dass das DOM dynamisch im Speicher aktualisiert wird, wenn der Benutzer einen Namen eingibt. Wenn ein Wert in
inputenthalten ist, wird das DOM beim Drücken einer Taste auf der Tastatur aktualisiert. Andernfalls wird ein Standardtext angezeigt. Beachten Sie auch, dass wir hier sogenannte Template Literals verwenden, um mit Variablen innerhalb von Strings zu arbeiten (wir haben so etwas ähnliches auch in Python gesehen). -
Mit JavaScript können Sie das in den Speicher geladene HTML-Dokument dynamisch auslesen und ändern, so dass der Benutzer bei Änderungen nicht jedes Mal die Seite neu laden muss.
-
Betrachten Sie das folgende HTML-Dokument (
background.html):<!DOCTYPE html> <!-- Demonstriert programmatische Änderungen an Styles --> <html lang="de"> <head> <title>Hintergrund</title> </head> <body> <button id="rot">R</button> <button id="grün">G</button> <button id="blau">B</button> <script> let body = document.querySelector('body'); document.querySelector('#rot').addEventListener('click', function() { body.style.backgroundColor = 'red'; }); document.querySelector('#grün').addEventListener('click', function() { body.style.backgroundColor = 'green'; }); document.querySelector('#blau').addEventListener('click', function() { body.style.backgroundColor = 'blue'; }); </script> </body> </html>Beachten Sie, dass JavaScript darauf wartet, wann eine bestimmte Schaltfläche angeklickt wird. Bei einem solchen Klick werden bestimmte Style-Attribute auf der Seite geändert.
bodykennen wir schon: Das ist das Tag, das den gesamten Seiteninhalt umschließt. Dann wartet ein Event-Listener auf das Anklicken einer der Schaltflächen. Dann wirdbody.style.backgroundColorgeändert. Beachten Sie, dass es eine feste Zuordnung zwischen den CSS-Eigenschaften (mit Bindestrichen) und den über JavaScript verfügbaren Eigenschaften (camelCase) gibt. -
Ähnlich verhält es sich mit dem folgenden Beispiel (nicht gezeigt):
<!DOCTYPE html> <html lang="de"> <head> <script> // Schaltet die Sichtbarkeit der Begrüßung um function blink() { let body = document.querySelector('body'); if (body.style.visibility == 'hidden') { body.style.visibility = 'visible'; } else { body.style.visibility = 'hidden'; } } // Blinken alle 500ms window.setInterval(blink, 500); </script> <title>blink</title> </head> <body> hallo, Welt </body> </html>In diesem Beispiel blinkt ein Text in einem bestimmten Intervall. Beachten Sie, dass
window.setIntervalzwei Argumente entgegennimmt: Eine Funktion, die aufgerufen werden soll, und eine Wartezeit (in Millisekunden) zwischen den Funktionsaufrufen. -
Betrachten Sie schließlich die folgende Implementierung von JavaScript, die Text automatisch vervollständigt (
autocomplete.html):<!DOCTYPE html> <html lang="en"> <head> <title>Autocomplete</title> </head> <body> <input autocomplete="off" autofocus placeholder="Query" type="text"> <ul></ul> <script src="large.js"></script> <script> let input = document.querySelector('input'); input.addEventListener('keyup', function(event) { let html = ''; if (input.value) { for (word of WORDS) { if (word.startsWith(input.value)) { html += `<li>${word}</li>`; } } } document.querySelector('ul').innerHTML = html; }); </script> </body> </html>Dies ist eine JavaScript-Implementierung von Autocomplete. Die Seite lädt eine Datei namens
large.jsnach, die ein JavaScript-Array mit vielen Wörtern aus dem Wörterbuch enthält:let WORDS = [ "a", "aaa", "aaas", "aachen", "aalborg", "aalesund", // … ] -
Die Möglichkeiten von JavaScript sind vielfältig und können in der JavaScript-Dokumentation nachgelesen werden.
Zusammenfassend
In dieser Lektion haben Sie gelernt, wie Sie Ihre eigenen HTML-Dateien erstellen, sie gestalten, Frameworks von Drittanbietern nutzen und JavaScript einsetzen können. Insbesondere haben wir besprochen…
- HTML
- Reguläre Ausdrücke.
- CSS
- Bootstrap
- JavaScript