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 Sie Python kennengelernt – Variablen, Schleifen, Funktionen. Diese Konzepte begegnen uns heute wieder, diesmal in drei neuen Sprachen: HTML für die Struktur, CSS für das Design, und JavaScript für die Interaktivität von Webseiten.

Was ist eine Webseite?

Schauen wir uns zunächst an, was eine Webseite eigentlich ist. Hier haben wir eine einfache Datei namens example.html. Wenn wir sie im Browser öffnen, sehen wir eine Webseite.
Eine Webseite ist im Kern eine Textdatei – geschrieben in einer Sprache namens HTML. Die Details von HTML schauen wir uns gleich an.
Diese Datei liegt gerade auf unserem eigenen Rechner. Aber normalerweise liegen Webseiten nicht bei uns, sondern irgendwo im Internet – auf Webservern.

Wie holt der Browser Webseiten aus dem Internet?

Wenn Sie eine Adresse wie https://www.example.com in den Browser eingeben, passiert Folgendes: Der Browser schickt eine Anfrage an einen Server, und der Server schickt die HTML-Datei zurück.
Damit Browser und Server sich verstehen, brauchen sie eine gemeinsame Sprache. Diese Sprache heißt HTTP – kurz für Hypertext Transfer Protocol. (HTTPS ist die verschlüsselte, sichere Version davon.)
HTTP ist erstaunlich einfach aufgebaut. Der Browser sagt im Wesentlichen: “Gib mir diese Datei” – und der Server antwortet mit der Datei (oder einer Fehlermeldung).

URLs – Adressen im Web

Die Adressen, die wir in den Browser eingeben, heißen URLs (Uniform Resource Locator). Eine URL wie https://www.example.com/folder/file.html besteht aus mehreren Teilen:
- https – das Protokoll (die “Sprache”)
- www.example.com – der Servername (wo die Datei liegt)
- /folder/file.html – der Pfad (welche Datei auf dem Server)
Das .com am Ende ist die Top-Level-Domain, die die Art der Organisation bezeichnet (.de für Deutschland, .edu für Bildungseinrichtungen, etc.). #todo : was ist .com - TLDs sind komplizierter aber wir sollten hier nicht zu viel Komplexität reinbringen.
Wenn Sie nur https://www.example.com eingeben (ohne Pfad), fragt der Browser implizit nach / – also der Startseite.

HTTP-Anfragen und -Antworten

HTTP kennt verschiedene Arten von Anfragen. Die wichtigsten sind:
- GET – “Gib mir diese Datei” (wenn Sie eine Seite aufrufen)
- POST – “Hier sind Daten für dich” (wenn Sie ein Formular abschicken)
Sie können HTTP-Anfragen in den Entwicklertools Ihres Browsers beobachten: Rechtsklick → “Untersuchen” oder “Inspect” (oder F12) → Tab “Netzwerk” → “Preserve Log” aktivieren. Dort sehen Sie alle Anfragen, die der Browser stellt.
So sieht eine HTTP-Anfrage aus, wenn der Browser die Startseite von www.uni-bamberg.de abruft:
```
GET / HTTP/1.1
Host: www.uni-bamberg.de
```
Das bedeutet: “Gib mir (GET) die Startseite (/) von www.uni-bamberg.de.”
Der Server antwortet mit einem Status-Code und unter anderen folgenden Zeilen:
```
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8

<!DOCTYPE html>
<html>...
```
Die 200 bedeutet “OK, hier ist die Datei”. Der Content-Type sagt dem Browser, dass es sich um HTML handelt.

HTTP mit curl untersuchen

Mit dem Kommandozeilen-Tool curl können wir HTTP-Anfragen manuell stellen und die Antworten des Servers sehen:
```
curl -I https://www.uni-bamberg.de/
```
Die Option -I zeigt nur die Header (Metadaten) der Antwort, nicht den eigentlichen Inhalt.
Probieren Sie auch:
```
curl -I https://uni-bamberg.de
```
Hier fehlt das www. – der Server antwortet mit 301 Moved Permanently und sagt dem Browser: “Die Seite ist woanders, geh zu www.uni-bamberg.de.”
Und was passiert ohne das s in https?
```
curl -I http://www.uni-bamberg.de/
```
Wieder ein 301 – der Server leitet auf die sichere HTTPS-Version um.

HTTP-Status-Codes

Der Status-Code in der Antwort sagt dem Browser, ob alles geklappt hat. Die wichtigsten:

200 OK
301 Moved Permanently
302 Found
304 Not Modified
307 Temporary Redirect
401 Unauthorized
403 Forbidden
404 Not Found
418 I'm a Teapot
500 Internal Server Error
503 Service Unavailable

Sie müssen sich diese Codes nicht alle merken – wichtig sind vor allem 200 (alles OK), 301/302 (Weiterleitung), 404 (nicht gefunden) und 500 (Serverfehler).

Ausblick: Wie kommt das Paket eigentlich an?

Wir haben gesehen, dass der Browser HTTP-Requests an Server schickt. Aber wie findet das Paket eigentlich den Weg durch das Internet? Wie weiß es, wo example.com ist? Was passiert, wenn Ihre IP-Adresse im WLAN 10.0.0.5 ist – in einem anderen WLAN aber auch jemand diese IP-Adresse hat? Das schauen wir uns später an.

HTML

Jetzt wissen wir, wie der Browser Dateien vom Server holt. Aber was steht eigentlich in diesen Dateien? Zeit, uns HTML genauer anzuschauen.

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.html ein und schreiben Sie den folgenden Code:
```
<!DOCTYPE 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 Attribut lang, das das Verhalten des html-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 lokal bereitstellen, indem Sie im Terminal http-server eingeben. Der Befehl startet einen kleinen Webserver, der Ihre HTML-Dateien ausliefert. 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.html am Ende dieser URL erscheint. Außerdem können Sie anhand der URL erkennen, dass der Server über den Port 8080 erreichbar ist. Ein Port ist wie eine Türnummer an einer Adresse – der Computer (die Adresse) kann viele Dienste gleichzeitig anbieten, und jeder Dienst “lauscht” an einem anderen Port. Webserver nutzen standardmäßig Port 80 (HTTP) oder 443 (HTTPS), aber für lokale Entwicklung weichen wir auf 8080 aus.
Die Hierarchie der Tags kann wie folgt dargestellt werden:
DOM

Diese Baumstruktur nennt man das Document Object Model (DOM) – eine Repräsentation der HTML-Struktur im Speicher des Browsers. Jedes HTML-Element wird zu einem “Knoten” im Baum. Das DOM ist wichtig, weil JavaScript später genau diese Struktur lesen und verändern kann.
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 (Paragraph) 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.
        </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.
        </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>
    </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.
        </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.
        </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.
        </p>

        <h4>Vier</h4>
        <p>…</p>

    </body>

</html>

Beachten Sie, dass <h1>, <h2>, <h3> usw. 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 ungeordnete 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>

<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, um Harvard zu 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 Attribut action verwenden. Das Feld input muss den Namen “q” haben. Wenn es vom Typ “search” ist, zeigt es ein x zum 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

Reguläre Ausdrücke (Regular Expressions, RegEx oder 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>

<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 pattern ein 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.de kommen. Die Adresse dominikherrmann@uni-bamberg.de erfüllt diese Anforderung zum Beispiel nicht, dominikherrmann@psi.uni-bamberg.de hingegen schon.

Die Zeichen im regulären Ausdruck haben folgende Bedeutung:

Zeichen	Bedeutung	Beispiel
`.`	Ein beliebiges Zeichen	`a`, `@`, `5`
`+`	Das vorherige Zeichen mindestens einmal	`.+` = mindestens ein Zeichen
`\`	Das nächste Zeichen ist literal gemeint	`\.` = ein Punkt
`@`	Literal: das @-Zeichen

Also: .+@.+\.uni-bamberg\.de bedeutet: “mindestens ein Zeichen, dann @, dann mindestens ein Zeichen, dann .uni-bamberg.de”
Tatsächlich ist das zuverlässige Validieren von E-Mail-Adressen schwieriger als das Beispiel vermuten lässt. Es gibt zahlreiche Sonderfälle. In der Praxis werden deutlich komplizierte Regexe verwendet.
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.html ein 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 &#169; John Harvard
        </p>
    </body>
</html>

Beachten Sie, dass einige “style”-Attribute für die <p>-Tags vorgesehen sind. Die font-size wird auf large, medium oder small gesetzt. Dann wird text-align auf 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 &#169; 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 &#169; 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:

<!-- Demonstriert Klassen-Selektoren -->
<html lang="de">
    <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">
            Willkommen auf meiner Homepage!
        </main>
        <footer class="small">
            Copyright &#169; John Harvard
        </footer>
    </body>
</html>

Beachten Sie, dass alle Style-Tags oben im head im style Tag-Wrapper platziert sind. Beachten Sie auch, dass wir unseren Elementen Klassen zugewiesen haben, die centered, large, medium und small heiß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 CSS-Datei verschieben können. Wir können eine Datei namens style.css erstellen und unsere Klassen dort einfügen (home7.css):
```
.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 stand.

So können wir dem Browser mitteilen, wo das CSS für diese HTML-Datei zu finden ist (home7.html):

<!DOCTYPE html>
<!-- Demonstriert externe Stylesheets -->
<html lang="de">
    <head>
        <link href="style.css" rel="stylesheet">
        <title>css</title>
    </head>
    <body class="centered">
        <header class="large">
            John Harvard
        </header>
        <main class="medium">
            Willkommen auf meiner Homepage!
        </main>
        <footer class="small">
            Copyright &#169; 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="de">
    <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.

Eine bestimmte Version von Bootstrap kann verwendet werden, indem man den folgenden “link”-Tag in den “head” der HTML-Datei einfügt; die brnötigten URLs erhält man auf der Webseite https://getbootstrap.com:

<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 (hello0.html):

<!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').value geht 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 der Webentwicklung ist es wichtig, HTML (Struktur), CSS (Design) und JavaScript (Verhalten) zu trennen (haben wir schon einmal in Block 7 bei größeren Python-Anwendungen gesehen: Separation of Concerns). Das macht den Code wartbarer und verständlicher.

Die nächsten Schritte zeigen, wie wir das JavaScript sauber vom HTML trennen. 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 addEventListener erstellt, der auf das Auslösen des Formulars submit hört. Die Methode event.preventDefault() verhindert das Standardverhalten des Browsers – ohne diese Zeile würde das Formular abgeschickt und die Seite neu geladen werden, bevor unser JavaScript-Code etwas anzeigen könnte. Beachten Sie auch, wie die Funktion greet als Parameter an den Event-Listener übergeben wird. Das geht, weil Funktionen in JavaScript so genannte first-class citizens sind – sie können wie normale Werte behandelt werden: in Variablen gespeichert, als Parameter übergeben, oder von Funktionen zurückgegeben. Das kennen Sie bereits aus Python.

Wir können die Redundanz im Code durch die Verwendung einer anonymen Funktion (ähnlich wie lambda-Funktionen in Python) 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 input enthalten 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: Erinnern Sie sich an f-Strings?

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. body kennen 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 wird body.style.backgroundColor geä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.setInterval zwei 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="de">
<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.js nach, 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…

TCP/IP und HTTP – wie Browser und Server kommunizieren
URLs – Adressen im Web
HTML – die Struktur von Webseiten
CSS – das Aussehen von Webseiten
Reguläre Ausdrücke – Muster in Eingaben prüfen
Bootstrap – ein CSS-Framework für schnelles Design
JavaScript – Interaktivität im Browser

8.1 HTML