3. Syntax, Semantik & Werkzeuge

Syntax und Semantik

Zielsetzung

Du hast bereits erste Erfahrungen damit gesammelt, wie man Webseiten mit HTML erstellen kann. Eventuell hast du sogar betrachtet, wie man mit CSS eine Webseite formatiert. Auf dieser Seite geht es darum, die Erfahrungen mit HTML etwas zu ordnen.

HTML als Sprache

HTML steht für „Hypertext Markup Language“ – es handelt sich also um eine Sprache (englisch: „language“). Wie jede andere Sprache (Deutsch, Latein, ...) gibt es Regeln, die die Sprache beachten muss. Gleichzeitig haben die verschiedenen Elemente der Sprache eine klare Bedeutung.

Zur einfacheren Beschreibung nutze diesen Fachbegriff: Die „Klammerausdrücke“ (<h1>...</h1> oder <p>...</p>) nennt man Tags (englisch für Etikett). In manchen Tags gibt man weitere Informationen an; das nennt man Attribut. So legt man z. B. im img-Tag mit dem Attribut src den Speicherort eines Bildes an:

<img src="img/volleyball.png" >

Aufgabe 1: HTML-Syntax

Die Grammatik-Regeln einer Sprache bezeichnet man auch als Syntax der Sprache. Die Syntax legt fest, wie Sätze in der Sprache aufgebaut sind und wo beispielsweise Kommas stehen müssen.

(a) ✏️️ Sammle Syntax-Regeln von HTML.

(b) Probiere auf einer der vorherigen Seiten aus, was geschieht, wenn du gegen Syntax-Regeln verstößt.

Aufgabe 2: HTML-Semantik

Alternative Vorgehensweise

In dieser Aufgabe wird die Semantik vorgegebener Tags herausgefunden. Alternativ können auch erst mögliche Auszeichnungen (Überschrift, Link, Aufzählung) im Unterrichtsgespräch gesammelt werden. In Gruppen sollen dann die zugehörigen Tags mit einem Musterbeispiel (aus den bestehenden Beispiel-Seiten) herausgesucht werden. Sobald alles zusammengetragen ist, hat die Lerngruppe eine gemeinsame Lernhilfe, die bei Bedarf immer weiter ergänzt werden kann.

Die Semantik einer Sprache gibt – im Gegensatz zur Syntax – die Bedeutung an.

(a) ✏️️ Beschreibe die Bedeutung (Semantik) der folgenden Tags:

  • <p>...</p>
  • <ol>...</ol>
  • <li>...</li>
  • <h1>...</h1>
  • Gehe auch auf den Unterschied zwischen <h1>, <h2> usw. ein.
  • <img src=... >
  • <a href=... >...</a>

(b) Ordne zu Syntax oder Semantik zu.

Quelle: LearningApps

CSS als Sprache

CSS steht für „Cascading Style Sheets“. Es handelt sich ebenfalls um eine Sprache mit Syntax und Semantik. Ein CSS-Dokument ist aus mehreren CSS-Regeln, die so aufgebaut sind:

h2
{
    color: green;
}
 

Jede Regel wird durch den Namen von einem oder mehreren HTML-Elementen eingeleitet (hier h2); das nennt man den Selektor der CSS-Regel. Innerhalb der Regeln stehen Anweisungen. Diese bestehen immer aus einer Eigenschaft und einem Wert.

Aufgabe 3: Syntax und Semantik von CSS

(a) ✏️️ Sammle Syntax-Regeln von CSS: Beschreibe dafür den Aufbau eines gesamten CSS-Dokuments, einer CSS-Regel und einer einzelnen Anweisung.

(b) ✏️️ Beschreibe die Semantik einer CSS-Regel und einer CSS-Anweisung.

(c) Für Expert:innen: Probiere aus, ob die Reihenfolge der CSS-Regeln eine Rolle spielt. Tausche dafür auf der vorherigen Seite die Reihenfolgen der Regel mit dem Selektor h1, h2 und der Regel mit dem Selektor h1. Kannst du das Verhalten erklären?

(d) Für Expert:innen: Man kann als Selektor z.B. li, a oder aber li a verwenden. Das hat eine unterschiedliche Semantik. Probiere das aus und versuche, das unterschiedliche Verhalten zu erklären.

Formale Sprachen

Wie du auf dieser Seite gesehen hast, sind HTML und CSS Sprachen. Im Gegensatz zu natürlichen Sprachen (deutsch, englisch, ...) dienen sie aber nicht der zwischenmenschlichen Verständigung, sondern zur computergerechten Darstellung von Information und zur Ermöglichung automatisierter Verarbeitung von Daten. Solche Sprachen nennt man Formale Sprachen.

Zum Nachschlagen

Du beherrschst nun einige – aber noch längst nicht alle – HTML- und CSS-Elemente, die es gibt. Aber das ist gar kein Problem – es gibt viele Nachschlagewerke. Suche selbst oder schau zum Beispiel bei selfhtml, wenn du eine bestimmte Sache suchst.

Mehr zu SELFTHTML

Seiten wie SELFTHTML, auf denen man die Details zu Programmen oder Programmiersprachen (hier HTML) nachschlagen kann, nennt man eine Dokumentation. Mit solchen Dokumentationen zu arbeiten, ist das „täglich Brot“ von Informatikerinnen und Informatikern. Niemand lernt alle Befehle einer Sprache auswendig. Die Grundlagen – hier z.B. Überschriften, Paragraphen und Links – sollte man beherrschen. Alles, was man seltener nutzt, kann man auch nachschlagen. Wird man in der Dokumentation nicht fündig, hilft oft eine Suche mit einer Suchmaschine. Es gibt zahlreiche Foren, in denen viele Fragen schon gestellt und beantwortet wurden.

SELFHTML bietet neben einer Dokumentation auch einsteigerfreundliche Kurse an, weswegen wir die Seite für HTML-Einsteiger:innen empfehlen.

Browser und Texteditor

Bisher haben wir ein Tool zur Erstellung und Betrachtung von Webseiten genutzt. Doch natürlich kann man Webseiten auch ohne das Tool von inf-schule erstellen und betrachten. Auf dieser Seite lösen wir uns davon.

HTML mit einem Text-Editor

Bisher hast du das HTML-Tool von inf-schule genutzt, um Webseiten zu erstellen und zu betrachten. Für größere Projekte mit mehreren Unterseiten, die miteinander verlinkt sind, ist das ungeeignet. Deshalb wirst du nun zu einer anderen Vorgehensweise wechseln.

Aufgabe 1: Der Browser zeigt HTML an

Dein Browser zeigt HTML-Dokumente an. Davon kann man sich auch selbst überzeugen. In vielen Browsern kannst du mit der Tastenkombination „Strg.“ und „U“ (gleichzeitig drücken) von der Vorder- zur Rückseite wechseln. Achtung: Es folgt ein – ggf. riesiger – Quelltext. Versuche nicht, alles zu verstehen, sondern schau, ob du das ein oder andere Tag, das wir oben kennengelernt haben, wiederfindest.

Aufgabe 2: Webseiten im Editor erstellen

In der vorherigen Aufgabe hast du gesehen, dass die Rückseite einer Webseite tatsächlich aus ganz normalem Text besteht – dem HTML-Quelltext. Entsprechend kannst du diesen Quelltext auch ohne das HTML-Tool von inf-schule erstellen und mit einem Browser anzeigen.

(a) Lade dir das folgende zip-Archiv herunter und entpacke es an einen beliebigen Ordner auf deinem Computer. Verschaffe dir einen kurzen Überblick, welche Dateien enthalten sind. Wo befinden sich die ganzen Bilder?

(b) Öffne nun die Datei sport.html in einem Editor (z.B. Notepad++). Verschaffe dir einen Überblick über den HTML-Quelltext (die Rückseite).

(c) Öffne nun dieselbe Datei mit einem Browser. Nun siehst du die Vorderseite. Es ist ein Hyperlink eingebaut. Finde ihn und teste seine Funktionsweise.

(d) Baue in die HTML-Datei Hyperlinks zu den anderen Abteilungen ein. Abteilung 4 fehlt aktuell auch noch. Wenn du die drei zustzlichen Links erstellt hast, dann betrachte die Dateien noch einmal im Browser und teste die Website aus.

Aufgabe 3: CSS einbinden

Das Layout (Farben, Schriftart, ...) einer Website wird durch einen CSS-Quelltext beschrieben.

(a) Lade dir das folgende zip-Archiv herunter und entpacke es an einen beliebigen Ordner auf deinem Computer. Verschaffe dir einen kurzen Überblick, welche Dateien enthalten sind. Wo befinden sich die CSS-Dateien?

(b) Öffne eine beliebige der enthaltenen HTML-Dateien in einem Editor und verschaffe dir einen Überblick über den Quelltext. Was hat sich im Vergleich zu den vorherigen Aufgaben geändert? An welcher Stelle des HTML-Quelltextes wird festgelegt, welche CSS-Datei verwendet werden soll?

(c) Es ist eine zweite CSS-Datei enthalten. Ändere den HTML-Quelltext einer Datei so ab, dass nun diese andere CSS-Datei genutzt wird. Überprüfe die Auswirkungen davon, indem du die HTML-Datei von einem Browser anzeigen lässt.

(d) Ändere bei allen enthaltenen Webseiten die Hintergrundfarbe zu grün.

Aufgabe 4: Trennung von Inhalt/Struktur und Design

(a) 💬 Begründe mithilfe von Aufgabe 3, dass es sinnvoll ist, die Layout/Design-Informationen für eine Website in einer separaten Datei zu speichern, statt in jeder einzelnen HTML-Datei das Layout festzulegen. Man spricht dabei von der Trennung von Inhalt/Struktur und Design.

(b) ✏️️ Notiere dir die eben kennengelernte Trennung von Inhalt/Struktur (mit HTML) und Design (mit CSS in einer eigenen Datei) als ein wesentliches Prinzip bei der Erstellung von Webseiten. Halte eine Begründung fest, warum das sinnvoll ist.