Lektion 4.2

Sprachen: Syntax, Semantik und Auszeichnungssprachen

20 min Lesezeit

In einem Chat schreibst du „Ich habe Hunger“, und alle verstehen dich, auch wenn du dich verschreibst. Schreibst du in einer Webseite ein einziges Zeichen falsch, kann die ganze Seite kaputt aussehen. Ein Browser, ein Programm oder eine Suchfunktion verstehen nur Texte, die streng nach festen Regeln gebaut sind.

Du lernst, wie man solche Regeln beschreibt: mit Syntaxdiagrammen und regulären Ausdrücken. Dann siehst du, wie HTML und CSS eine Webseite aus Text beschreiben, wie eine URL aufgebaut ist und wie man in einer logischen Programmiersprache Fakten und Regeln aufschreibt.

Definition

Natürliche und künstliche Sprachen, Syntax und Semantik

Natürliche Sprachen wie Deutsch sind gewachsen. Sie haben Ausnahmen, und Sätze können mehrdeutig sein: „Ich sehe den Mann mit dem Fernglas“ kann heißen, dass ich das Fernglas habe oder dass der Mann es hat. Künstliche Sprachen wie Programmiersprachen, HTML oder die Notenschrift werden festgelegt. Ihre Regeln sind genau definiert, und jeder Satz hat eine eindeutige Bedeutung.

Jede Sprache hat ein Alphabet, den Vorrat an Zeichen. Ein Wort ist eine Folge von Zeichen aus dem Alphabet, die Sprache ist die Menge der erlaubten Wörter. Zwei Fragen musst du trennen: Die Syntax legt fest, wie ein Satz aufgebaut sein muss, damit er zur Sprache gehört. Die Semantik legt fest, was er bedeutet. Die Syntax einer künstlichen Sprache kann ein Programm automatisch prüfen.

Beispiel

Syntax und Semantik trennen

Beurteile jedes Beispiel nach Syntax und Semantik: a) Die grüne Idee schläft wütend. b) x = 3 +\texttt{x = 3 +} in Python. c) x = 3 / 0\texttt{x = 3 / 0} in Python.

a) Der Satz ist nach den Regeln des Deutschen gebaut, die Syntax stimmt. Die Bedeutung ist unsinnig, denn Ideen schlafen nicht.

b) Die Anweisung bricht nach dem Plus ab. Die Syntax ist verletzt, Python meldet einen Syntaxfehler, bevor etwas läuft.

c) Die Syntax stimmt. Die Bedeutung lässt sich aber nicht erfüllen, denn man kann nicht durch 0 teilen. Python meldet den Fehler erst beim Ausführen.

Definition

Syntaxdiagramme

Ein Syntaxdiagramm zeigt grafisch, wie ein Teil einer Sprache aufgebaut ist. Du folgst den Pfeilen vom Eingang links bis zum Ausgang rechts und schreibst auf, was auf dem Weg liegt. Ein runder Kasten ist ein Zeichen, das genau so dastehen muss. Ein eckiger Kasten verweist auf ein anderes Diagramm. Verzweigt sich der Weg, hast du eine Wahl. Führt ein Pfeil zurück, darfst du wiederholen. Ein Wort gehört zur Sprache, wenn es einen Weg durch das Diagramm gibt. Hier beschreiben wir Diagramme in Worten.

Diagramm Zahl: Eingang, eckiger Kasten „Ziffer“, danach zwei Wege: zurück vor den Kasten oder zum Ausgang. Es erzeugt 7, 042 und 2026.

Diagramm Preis: Eingang, Kasten „Zahl“, danach zwei Wege: direkt zum Ausgang oder über den runden Kasten „,“ und zweimal den Kasten „Ziffer“ zum Ausgang.

Definition

Reguläre Ausdrücke und reguläre Sprachen

Ein regulärer Ausdruck beschreibt eine Menge von Wörtern in einer Zeile. Er besteht aus diesen Bausteinen:

  • Ein Zeichen steht für sich. ab\texttt{ab} passt nur auf ab.
  • Ein senkrechter Strich heißt „oder“. a|b\texttt{a|b} passt auf a und auf b.
  • Ein Stern wiederholt das Zeichen davor beliebig oft, auch gar nicht. ab*\texttt{ab*} passt auf a, ab, abb und so weiter.
  • Ein Plus wiederholt mindestens einmal. ab+\texttt{ab+} passt auf ab, abb und so weiter.
  • Ein Fragezeichen macht das Zeichen davor optional. ab?\texttt{ab?} passt auf a und ab.
  • Eckige Klammern wählen ein Zeichen aus einem Bereich. [0-9]\texttt{[0-9]} passt auf jede Ziffer.
  • Runde Klammern fassen zusammen. (ab)+\texttt{(ab)+} passt auf ab, abab und so weiter.

Eine Sprache, die ein regulärer Ausdruck beschreibt, heißt regulär. Dieselben Sprachen erkennt ein Automat mit endlich vielen Zuständen, wie du ihn aus Klasse 5-6 kennst. Man nutzt reguläre Ausdrücke zum Suchen in Texten und zum Prüfen von Eingaben. Es gibt Grenzen: Ob zu jeder öffnenden Klammer eine schließende gehört, wenn Klammern beliebig tief ineinander stehen, kann kein regulärer Ausdruck beschreiben.

Beispiel

Reguläre Ausdrücke lesen und bauen

a) Welche Wörter passen auf (a|b)c+\texttt{(a|b)c+}? b) Schreibe einen Ausdruck für eine Postleitzahl aus genau fünf Ziffern.

a) Zuerst kommt a oder b, danach mindestens ein c. Es passen ac, bc, acc, bcc, accc und so weiter. Es passen nicht c, ab und a.

b) Fünf Ziffern hintereinander: [0-9][0-9][0-9][0-9][0-9]\texttt{[0-9][0-9][0-9][0-9][0-9]}. Ein Stern oder Plus wäre falsch, denn sie erlauben beliebig viele Ziffern.

Definition

Auszeichnungssprachen: HTML

Eine Auszeichnungssprache beschreibt mit Marken im Text, welche Rolle die Teile eines Dokuments haben. In HTML sind die Marken Tags in spitzen Klammern. Ein Element besteht aus Anfangs-Tag, Inhalt und End-Tag, etwa <p>Hallo</p>\texttt{<p>Hallo</p>}. Das Anfangs-Tag kann Attribute tragen, die das Element näher bestimmen. Elemente liegen ineinander und bilden einen Baum, wie Ordner in Ordnern. Eine ganze Seite steckt im Element html\texttt{html} mit dem Teil head\texttt{head} für den Titel und dem Teil body\texttt{body} für den sichtbaren Inhalt.

Strukturelemente sagen, was etwas ist: Überschrift (h1\texttt{h1}), Absatz (p\texttt{p}), Liste (ul\texttt{ul} mit Einträgen li\texttt{li}), Tabelle (table\texttt{table}). Verweise setzt man mit dem Element a\texttt{a}. Sein Attribut href\texttt{href} nennt das Ziel.

ZeileEinrückungAnweisung
10<h1>Mein Verein</h1>\texttt{<h1>Mein Verein</h1>}
20<p>Wir trainieren dienstags.</p>\texttt{<p>Wir trainieren dienstags.</p>}
30<ul>\texttt{<ul>}
41<li>Training</li>\texttt{<li>Training</li>}
51<li><a href="plan.html">Spielplan</a></li>\texttt{<li><a href="plan.html">Spielplan</a></li>}
60</ul>\texttt{</ul>}
Definition

CSS und Ausgabeformate

HTML sagt, was ein Inhalt ist. CSS (Cascading Style Sheets) sagt, wie er aussieht. Das ist die Trennung von Inhalt und Formatierung, die du von den Formatvorlagen kennst. Eine CSS-Regel besteht aus einem Selektor, der Elemente auswählt, und Eigenschaften mit Werten in geschweiften Klammern:

ZeileEinrückungAnweisung
10h1 {\texttt{h1 \{}
21color: blue;\texttt{color: blue;}
31font-size: 24px;\texttt{font-size: 24px;}
40}\texttt{\}}

Die Regel färbt alle Überschriften h1\texttt{h1} blau und setzt ihre Schrift auf 24 Pixel. Dasselbe HTML erscheint mit anderem CSS anders: auf dem Bildschirm, auf dem Handy-Display oder auf dem Ausdruck. So entstehen mehrere Ausgabeformate aus einer Quelle.

Definition

Aufbau einer URL

Aus Klasse 7-8 kennst du Protokoll, Domainname und Pfad. Eine URL kann mehr enthalten, zum Beispiel https://www.example.org:8080/schule/plan.html?klasse=9b&tag=mo#stunde3

TeilIm BeispielBedeutung
ProtokollhttpsRegeln der Kommunikation
Domainnamewww.example.orgName des Servers
Port8080Nummer des Programms auf dem Server. Fehlt sie, gilt der Standard des Protokolls (bei https 443).
Pfad/schule/plan.htmlOrt der Datei auf dem Server
Anfrageklasse=9b&tag=moAngaben für den Server nach dem Fragezeichen, als Paare name=wert, getrennt durch &
Fragmentstunde3Stelle innerhalb der Seite, nach dem Zeichen #
Definition

Logische Programmiersprache: Fakten, Regeln, Anfragen

In einer logischen Programmiersprache wie Prolog schreibst du nicht auf, wie etwas berechnet wird, sondern was gilt. Ein Programm besteht aus Fakten und Regeln. Du stellst Anfragen, und das System sucht Antworten durch Schlussfolgern. Namen mit kleinem Anfangsbuchstaben sind feste Dinge, Namen mit großem Anfangsbuchstaben sind Variablen. Jede Zeile endet mit einem Punkt. Das Zeichen :-\texttt{:-} liest man „wenn“, das Komma „und“. Wir legen fest: eltern(a, b)\texttt{eltern(a, b)} heißt „a ist Elternteil von b“.

ZeileEinrückungAnweisung
10eltern(anna, ben).\texttt{eltern(anna, ben).}
20eltern(ben, clara).\texttt{eltern(ben, clara).}
30grosseltern(X, Z) :- eltern(X, Y), eltern(Y, Z).\texttt{grosseltern(X, Z) :- eltern(X, Y), eltern(Y, Z).}

Zeile 1 und 2 sind Fakten. Zeile 3 ist eine Regel: X ist Großelternteil von Z, wenn X Elternteil von einem Y ist und Y Elternteil von Z.

Beispiel

Eine Anfrage beantworten

Zu den Zeilen 1 bis 3 wird die Anfrage ?- grosseltern(X, clara).\texttt{?- grosseltern(X, clara).} gestellt. Welche Antwort findet das System?

Das System sucht ein X, für das es ein Y gibt mit eltern(X, Y)\texttt{eltern(X, Y)} und eltern(Y, clara)\texttt{eltern(Y, clara)}. Der Fakt eltern(ben, clara)\texttt{eltern(ben, clara)} liefert Y = ben. Dann muss eltern(X, ben)\texttt{eltern(X, ben)} gelten, und der Fakt eltern(anna, ben)\texttt{eltern(anna, ben)} liefert X = anna. Die Antwort lautet X = anna.

Häufige Fehler

Keine Fehlermeldung heißt: alles richtig

„Das Programm läuft ohne Fehlermeldung, also tut es das Richtige.“

Richtig ist

Keine Meldung heißt nur, dass die Syntax stimmt. Ob das Programm das Gewünschte tut, ist eine Frage der Semantik. Das findest du nur durch Nachdenken und Testen heraus.

Häufige Fehler

h1 bedeutet große Schrift

„Ich nehme h1, weil eine Überschrift groß und fett sein soll.“

Richtig ist

h1 bedeutet „Überschrift der obersten Ebene“, nicht „große Schrift“. Wie sie aussieht, bestimmt CSS.

Zusammenfassung

  • Natürliche Sprachen sind gewachsen und mehrdeutig, künstliche genau festgelegt. Die Syntax regelt den Aufbau, die Semantik die Bedeutung.

  • Ein Syntaxdiagramm beschreibt eine Sprache mit Zeichen, Verweisen, Verzweigungen und Schleifen. Ein Wort gehört dazu, wenn es einen Weg durch das Diagramm gibt.

  • Reguläre Ausdrücke beschreiben Wörter mit Oder, Stern, Plus, Fragezeichen, Bereichen und Klammern. Sie beschreiben die regulären Sprachen.

  • HTML zeichnet Struktur aus: Elemente mit Tags und Attributen, Überschriften, Listen, Tabellen und Verweise. CSS legt das Aussehen fest, so entstehen mehrere Ausgabeformate aus einer Quelle.

  • Eine URL besteht aus Protokoll, Domainname, Port, Pfad, Anfrage und Fragment.

  • In einer logischen Programmiersprache beschreibt man Fakten und Regeln und stellt Anfragen. Das System findet die Antworten durch Schlussfolgern.

Übungen

Aufgabe 1Multiple Choice

Das Diagramm Preis besteht aus einer Zahl (mindestens eine Ziffer), danach entweder dem Ausgang oder einem Komma mit genau zwei Ziffern. Welches Wort gehört zur Sprache?

Aufgabe 2Numerisch

Wie viele verschiedene Wörter beschreibt der reguläre Ausdruck (a|b)(c|d)e? ? Das Fragezeichen macht das e optional.

Aufgabe 3Multiple Choice

Welcher Teil der URL https://www.example.org/spiel/start.html?level=3#regeln ist der Pfad?

Aufgabe 4Multiple Choice

Gegeben sind die Fakten eltern(anna, ben). und eltern(ben, clara). Dabei heißt eltern(a, b): a ist Elternteil von b. Welche Anfrage fragt nach den Kindern von Ben?

Aufgabe 5Freitext

Erkläre, warum man für eine Überschrift in HTML das Element h1 benutzt, statt den Text von Hand groß zu machen, und welche Aufgabe CSS dabei hat.