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
durchlastElementChild
ersetzt. - ... den Eintrag
removeChild(liste.firstElementChild)
durchremove()
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.