inf-schule | Ziele und Voraussetzungen

HTML-Grundlagen

HTML als Sprache des Webs

Webseiten erstellt man in der Sprache HTML. Dies gilt auch für dynamische Webseiten, die mit Hilfe von z.B. Elm oder Javascript programmiert werden. Du musst deshalb Grundkenntnisse in HTML haben. Im Folgenden sind die hier wesentlichen Konzepte kurz zusammengefasst.

Lies dir die folgenden Abschnitte genau durch. Wahrscheinlich enthalten sie einzelne Aspekte, die neu für dich sind. Wenn du das alles verstehst, bist du bereit für das Elm-Projekt. Ansonsten musst du noch genau so viele Grundlagen zu HTML lernen, bis du die folgenden Abschnitte nachvollziehen kannst.

Aufbau eines HTML-Dokuments

Ein einfaches HTML-Dokument hat z.B. folgende Struktur.

<html>
    <head>
        ...
    </head>

    <body>
        <div id="uebersicht">
            <ol>
                <li>Über mich</li>
                <li>Meine Schule</li>
            </ol>
        </div>
        <div id="person">
            <h1>Mika</h1>
            <p>
                Ich bin Mika und liebe 
                <a href="https://www.handball.de">Handball</a>.
                Hier sieht man mich beim Spielen mit meiner 
                besten Freundin Klara:
            </p>
            <img src="tor.jpg" alt="Mika beim Torwurf">
        </div>
        <div id="inhalt">
            <h2>Meine Schule</h2>
            ...
        </div>
    </body>
</html>

Der Head-Bereich enthält Metadaten über das Dokument, wie den Titel der Webseite und den Zeichensatz. Für unsere Zwecke ist der Head-Bereich nicht relevant. Der Body-Bereich enthält den sichtbaren Inhalt der Webseite, wie Überschriften, Absätze, Bilder und Links.

Ein Tag, das du vielleicht noch nicht kennst, ist das <div>...</div> Tag. Es wird benutzt, um Bereiche eines Dokuments zusammenzufassen. Oft benutzt man in diesem Zusammenhang das id- Attribut. Dieses kann man z.B. nutzen, um mit Hilfe von CSS den Bereich mit der ID "uebersicht" mit einer anderen Hintergrundfarbe darzustellen. Dazu würde man z.B. in einer CSS-Datei den Selektor #uebersicht benutzen. Möchte man z.B. nur die Liste innerhalb dieses Bereichs formatieren, könnte man den Selektor #uebersicht ol verwenden. Um diesen Bereich mit einem grauen Hintergrund darzustellen, kann man z.B. folgenden CSS-Code verwenden:

#uebersicht ol {
    background-color: lightgrey;
}

Aufgabe 1

(a) Beschreibe Teile des HTML-Dokuments unter Verwendung der rot markierten Begriffe.

(b) Experimentiere mit der HTML- und CSS-Vorlage.

Document Object Model

Wenn ein Webbrowser eine HTML-Seite lädt, analysiert er den HTML-Code und erstellt daraus eine interne Darstellung des Dokuments, die als DOM (Document Object Model) bezeichnet wird. Das DOM repräsentiert die Struktur des HTML-Dokuments als Baum, in dem jedes HTML-Element als Knoten dargestellt wird.

Der Browser erstellt Knoten für jedes HTML-Tag (Elementknoten), Attribute (Attributknoten) und den Textinhalt innerhalb von Tags (Textknoten). Diese Knoten im DOM können dann von Programmiersprachen verändert werden, indem Elemente verändert, gelöscht oder neue hinzuzufügt werden.

Ein vereinfachter Ausschnitt des DOMs für die obige Seite lässt sich folgendermaßen visualisieren:

Aufgabe 2

Beschreibe die Bedeutung der unterschiedlichen Farben in der Grafik.

Dynamische Webseiten

Das Grundprinzip dynamischer Webseiten ist, dass der DOM-Baum durch Programmiersprachen wie Javascript oder Elm verändert wird. Wenn man z.B. auf einen Button auf einer Webseite klickt, wird vom Browser ein Ereignis (engl.: event) ausgelöst, das in diesem Fall onclick heißt. Beim button-Tag wird festgelegt, dass bei Eintreten des onclick-Ereignisses die Javascript-Funktion loeschen ausgeführt werden soll.

Hier siehst du ein konkretes Beispiel. Es ist interaktiv, so dass du selbst damit experimentieren kannst. Vermutlich kannst du kein Javascript. Du musst deshalb natürlich nicht jedes Detail verstehen, aber die grundsätzliche Idee sollte dir klar werden.

Aufgabe 3

Experimentiere mit dem HTML-Beispiel, indem du z.B.

... der Liste im HTML-Code weitere Elemente hinzufügst, die durch den Button entfernt werden.
... den Eintrag firstElementChild durch lastElementChild ersetzt.
... den Eintrag removeChild(liste.firstElementChild) durch remove() ersetzt.
... (optional) einen zweiten Button ergänzt, der Elemente in der Liste hinzufügt. Dazu musst du recherchieren, wie man mit Hilfe von Javascript Elemente im DOM hinzufügt.