====== 11.1.1) HTML und CSS und Scripts ======

===== Das Schichtenmodell: Trennungen - Struktur, Präsentation, Verhalten =====

Teile und herrsche - diese Devise gilt auch Im Webdesign. Anders gesagt, beim Erstellen einer Webseile genügt uns eine einzige Formulierungsmögkeit nicht, um alle anfallenden Aufgaben abdecken zu können. Vielmehr greifen wir für unterschiedliche Teilbereiche auf entsprechend spezialisierte Sprachen zurück, die uns das jeweils geeignete Werkzeug an die Hand geben.

Lassen Sie uns diese Teilbereiche kurz umreißen. Es sind dies (meist auch in dieser Reihenfolge genannt) im Einzelnen:

==== Beschreibung der Struktur - HTML====
Die Beschreibung der Struktur wird durch eine Sprache übernommen, die hierarchisch geordnete Informationen möglichst semantisch (ihrer Bedeutung entsprechend} darzustellen in der Lage ist, Im Webdesign geschieht dies durch HTML oder XHTML. Im Volksmund werden HTML und XHTML oft als "Programmiersprachen" bezeichnet, was allerdings nicht zutrifft. Bei beiden handelt es sich vielmehr um Auszeichnungs- oder Markup-Sprachen. 

  * **Zuständig für:** Aufbau und **semantische Gliederung** der Inhalte
  * **Technik:** HTML (HyperText Markup Language)
  * **Beispiele:** Überschriften, Absätze, Listen, Links, Bilder
  * **Ziel:** Inhalte logisch strukturieren – unabhängig vom Aussehen

Beispiel:
<code html>
<h1>Willkommen</h1>
<p>Dies ist ein Einführungstext.</p>
</code>


==== Beschreibung der Präsentation - CSS ====
Die in HTML beschriebene Struktur muss optisch präsentiert werden, wobei die Darstellung gemäß des User Agents (Browser, Mobilgerät, Drucker) unterschiedlich erfolgen muss (eben darum darf die Definition der Darstellung nicht Teil de] Struktur sein). Für dieses Gebiet ist CSS die Sprache der Wahl.

Auch CSS ist keine Programmiersprache. Hier wird lediglich beschreibend festgelegt, welche Elemente aufweiche Weise dargestellt werden und in welchem Kontext welche der definierten Darsteilungsanweisungen einzusetzen ist. Man bezeichnet CSS daher auch ab Präsentationssprache. Da kein Prozess, sondern ein Ergebnis beschrieben wird, nennt man dies auch deklarative Sprache.

  * **Zuständig für:** Darstellung und Design der Webseite
  * **Technik:** CSS (Cascading Style Sheets)
  * **Beispiele:** Farben, Schriftarten, Layout, Abstände
  * **Ziel:** Design vom Inhalt trennen, einfaches Umgestalten

Beispiel:
<code css>
p {
  color: darkblue;
  font-size: 18px;
}
</code>

==== Beschreibung des Verhaltens - JavaScript ====
Interessant wird es, sobald eine Interaktion mit dem dargestellten Dokument möglich wird. Hier kommt JavaScript ins Spiel, mit dessen Hilfe Useraktionen erkannt und auf sie reagiert werden kann.

Bei JavaScript handelt es sich tatsächlich um eine ausgewachsene Programmiersprache. Mit seiner Hilfe kann man die eigentlich statischen Struktur- und Präsen-tationsaspekte dynamisch machen, also (auch nachträglich) sowohl das Aussehen als auch die Inhalte eines Dokuments verändern.  Ein JavaScript Framework  wie jQuery hilft Ihnen bei den dabei anfallenden, komplexen Programmieraufgaben.

  * **Zuständig für:** Interaktivität und dynamisches Verhalten
  * **Technik:** JavaScript
  * **Beispiele:** Buttons mit Funktionen, Formulare prüfen, Inhalte nachladen
  * **Ziel:** Benutzerinteraktion ermöglichen, dynamische Reaktionen

Beispiel:
<code javascript>
document.getElementById("klick").addEventListener("click", function() {
  alert("Button wurde geklickt!");
});
</code>

----

Da diese drei Aspekte aufeinander aufbauen (mit der Struktur als Basis), kann man sie auch als Schichtenmodell betrachten (siehe Abbildung). Hier wird deutlich, dass die HTML-Struktur die Basis bildet, auf der die darüberliegenden Schichten aufsetzen.

Tatsächlich liest der Browser auch zunächst diese Struktur ein, die er anschließend gemäß den CSS-Anweisungen »dekoriert;' und schließlich mit dem in Javascript beschriebenen Verhalten ausstattet. Setzen wir uns kurz mit den Grundlagen von HTML auseinander.

{{:inf:inf8bi_201819_matura:11:11_01:pasted:20190522-182650.png}}

{{:inf:grundlagen_in_html:jq-a1.jpg|}}\\ 
Die drei Ebenen - Struktur, Präsentation und Verhalten