Syntax, Semantik und Dokumentenbeschreibungssprachen
Lena baut für ihre Klasse in Köln eine kleine Webseite. Im Browser sieht alles gut aus, aber bei Murat erscheint der Text plötzlich komplett fett. Woran liegt das? Und warum zeigt ein Browser trotz eines Fehlers oft noch etwas an, während ein Programm einfach abbricht? Am Ende der Seite kannst du beides erklären.
Syntax und Semantik
Jede Sprache hat Regeln. Bei Programmier- und Beschreibungssprachen unterscheiden wir zwei Arten von Regeln.
Ein Vergleich aus dem Deutschen: „Der Hund bellt laut“ ist korrekt. „Hund der laut bellt“ verletzt die Syntax. „Der Tisch bellt laut“ ist syntaktisch richtig, aber semantisch unsinnig.
Bei Programmen ist es genauso:
| Zeile | Syntax | Semantik |
|---|---|---|
ergebnis = 5 + 3 |
korrekt | Ergebnis ist 8 |
ergebnis = 5 +* 3 |
falsch (zwei Operatoren hintereinander) | keine Bedeutung, wird gar nicht erst ausgeführt |
mittel = a + b / 2 |
korrekt | berechnet $a + \frac{b}{2}$, nicht den Mittelwert |
Die dritte Zeile ist der gefährlichste Fall: Der Computer beschwert sich nicht, aber das Ergebnis ist falsch. Solche Semantikfehler (logische Fehler) findest du nur durch Testen. Richtig wäre mittel = (a + b) / 2.
Erkläre den Unterschied zwischen Syntax und Semantik einer Programmiersprache und gib je ein Beispiel.
Erkläre den Unterschied zwischen Syntax und Semantik einer Programmiersprache und gib je ein Beispiel.
Ein Python-Programm besteht aus der Zeile ergebnis = 5 +* 3. a) Entscheide, ob der Fehler ein Syntax- oder ein Semantikfehler ist, und begründe. b) Gib ein Beispiel für…
Ein Python-Programm besteht aus der Zeile ergebnis = 5 +* 3.
- a) Entscheide, ob der Fehler ein Syntax- oder ein Semantikfehler ist, und begründe.
- b) Gib ein Beispiel für eine syntaktisch korrekte, aber semantisch falsche Anweisung, wenn der Mittelwert zweier Zahlen a und b berechnet werden soll.
- c) Erkläre, warum ein Browser bei fehlerhaftem HTML oft trotzdem etwas anzeigt, ein Compiler bei Syntaxfehlern aber abbricht.
Syntaxfehler in HTML finden
Ein HTML-Dokument ist syntaktisch korrekt, wenn
-
jedes geöffnete Element wieder geschlossen wird,
-
die Elemente richtig geschachtelt sind (nicht überkreuzt),
-
End-Tags einen Schrägstrich haben.
Ein vergessenes </b> erklärt Murats Problem vom Anfang: Das End-Tag fehlt, also wendet der Browser <b> bis zum Ende des Dokuments an. Der ganze folgende Text erscheint fett.
Finde die syntaktischen Fehler im folgenden Code und korrigiere sie:
Finde die syntaktischen Fehler im folgenden Code und korrigiere sie:
<html>
<body>
<h1>Titel<h1>
<p>Text mit <b>fettem Wort</p></b>
</body>
CSS: Das Aussehen festlegen
HTML beschreibt die Struktur. Für das Aussehen (Farbe, Größe, Rahmen) verwendet man CSS (Cascading Style Sheets). Eine CSS-Regel besteht aus einem Selektor und Eigenschaften in geschweiften Klammern:
p { color: blue; font-size: 14px; }
Das bedeutet: Alle Absätze erscheinen blau mit 14 Pixel Schriftgröße. Jede Eigenschaft hat die Form eigenschaft: wert;.
Mit einer Klasse gestaltest du nur ausgewählte Elemente. In HTML steht class="wichtig", in CSS ein Punkt vor dem Namen:
<p class="wichtig">Klassenarbeit am Freitag!</p>
.wichtig { font-weight: bold; }
CSS steht im Kopf der Seite zwischen <style> und </style> oder in einer eigenen Datei.
| Eigenschaft | Wirkung |
|---|---|
color |
Schriftfarbe |
background-color |
Hintergrundfarbe |
font-size |
Schriftgröße |
font-weight: bold |
fett |
border: 2px solid gray |
Rahmen: Dicke, Art, Farbe |
padding |
Innenabstand |
Warum trennt man HTML und CSS? Der Inhalt bleibt übersichtlich, und eine einzige Stilregel gilt für viele Seiten. Willst du die Schulfarbe ändern, änderst du eine Zeile statt hundert Tags. Außerdem kann dieselbe Seite für Handy und Bildschirm unterschiedlich aussehen.
Gegeben ist: a) Was bewirken diese CSS-Anweisungen für Absätze und für Überschriften der ersten Ebene (h1)? b) Schreibe eine Regel, die alle Absätze der Klasse „wichtig“…
Gegeben ist:
<style>
p { color: blue; font-size: 14px }
h1 { color: red; }
</style>
- a) Was bewirken diese CSS-Anweisungen für Absätze und für Überschriften der ersten Ebene (
h1)? - b) Schreibe eine Regel, die alle Absätze der Klasse „wichtig“ fett darstellt, und zeige, wie ein Absatz mit dieser Klasse in HTML notiert wird.
Analysiere folgenden Code: a) Welche Strukturelemente enthält die Seite und wie sind sie geschachtelt? b) Bei einem Listenelement fehlt das schließende Tag. Finde die…
Analysiere folgenden Code:
<div class="box">
<h2>Preise</h2>
<ul>
<li>Kaffee: 2,50 €
<li>Tee: 2,00 €</li>
</ul>
</div>
<style>
.box { border: 1px solid black; padding: 10px; }
</style>
- a) Welche Strukturelemente enthält die Seite und wie sind sie geschachtelt?
- b) Bei einem Listenelement fehlt das schließende Tag. Finde die Stelle und ergänze es. (Browser tolerieren das zwar, sauberes HTML schließt aber jedes Element.)
- c) Ändere das CSS so, dass der Rahmen 2 Pixel dick und grau ist.
Eine ganze Seite entwerfen
Eine Seite für einen Schulverein hat meist Kopf, Navigation, Inhalt und Fuß. Dafür gibt es Gruppierungen:
<div class="kopf"><h1>Schulverein</h1></div>
<div class="nav">
<a href="start.html">Start</a>
<a href="termine.html">Termine</a>
<a href="kontakt.html">Kontakt</a>
</div>
<div class="inhalt"><p>Wir unterstützen unsere Schule.</p></div>
<div class="fuss"><p>Kontakt: info@schulverein.de</p></div>
Dazu passt CSS:
.nav { background-color: lightgray; }
.nav a { display: inline-block; padding: 5px; }
inline-block sorgt dafür, dass die Links nebeneinander stehen.
Plane so: erst die Struktur auf Papier skizzieren, dann HTML schreiben, dann CSS ergänzen, am Ende im Browser testen und Fehler korrigieren.
Achtung: Die Links gehören in das <div class="nav">, das ein eigenes Element neben .kopf ist.
Zurück zum Anfang: Murats Seite war komplett fett, weil ein </b> fehlte (Syntaxfehler, den der Browser stillschweigend hinnahm).
Entwirf eine Webseite für einen Schulverein mit Kopfbereich (Überschrift), Navigation mit drei Links, einem Textabschnitt und einer Fußzeile. a) Schreibe den…
Entwirf eine Webseite für einen Schulverein mit Kopfbereich (Überschrift), Navigation mit drei Links, einem Textabschnitt und einer Fußzeile.
- a) Schreibe den vollständigen HTML-Code mit korrekter Schachtelung.
- b) Ergänze CSS, das den Hintergrund der Navigation hellgrau macht und die Links nebeneinander anordnet.
- c) Erkläre, warum die Trennung von Inhalt (HTML) und Darstellung (CSS) sinnvoll ist.