Vertiefung: 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 <img src=... ><a href=... >...</a>
<h1>, <h2> usw. ein.
(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; mehr zu ihnen lernst du in einem eigenen Kapitel.
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.
