Aufgaben: Syntax, Semantik und Dokumentenbeschreibungssprachen

Erkläre den Unterschied zwischen Syntax und Semantik einer Programmiersprache und gib je ein Beispiel.

Gegeben ist der HTML-Code:

<h1>Willkommen</h1>

<p>Dies ist ein Absatz.</p>

1. a) Welche Tags werden verwendet und was bedeuten sie?
2. b) Was zeigt der Browser an?

Schreibe HTML-Code für eine Seite mit der Überschrift „Meine Schule“ und einer ungeordneten Liste mit den Einträgen „Mathe“, „Informatik“ und „Sport“.

Finde die syntaktischen Fehler im folgenden Code und korrigiere sie:

<html>

<body>

<h1>Titel<h1>

<p>Text mit <b>fettem Wort</p></b>

</body>

Gegeben ist:

<style>

p { color: blue; font-size: 14px }

h1 { color: red; }

</style>

1. a) Was bewirken diese CSS-Anweisungen für Absätze und für Überschriften der ersten Ebene (h1)?
2. 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.

Schreibe den HTML-Code für eine Seite mit einer Tabelle mit zwei Spalten (Name, Note) und zwei Datenzeilen (Lena, 1; Murat, 2) und einem Link auf die Seite „https://www.schule.de“ mit dem Linktext „Zur Schule“.

Ein Python-Programm besteht aus der Zeile ergebnis = 5 +* 3.

1. a) Entscheide, ob der Fehler ein Syntax- oder ein Semantikfehler ist, und begründe.
2. b) Gib ein Beispiel für eine syntaktisch korrekte, aber semantisch falsche Anweisung, wenn der Mittelwert zweier Zahlen a und b berechnet werden soll.
3. c) Erkläre, warum ein Browser bei fehlerhaftem HTML oft trotzdem etwas anzeigt, ein Compiler bei Syntaxfehlern aber abbricht.

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>

1. a) Welche Strukturelemente enthält die Seite und wie sind sie geschachtelt?
2. 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.)
3. c) Ändere das CSS so, dass der Rahmen 2 Pixel dick und grau ist.

Entwirf eine Webseite für einen Schulverein mit Kopfbereich (Überschrift), Navigation mit drei Links, einem Textabschnitt und einer Fußzeile.

1. a) Schreibe den vollständigen HTML-Code mit korrekter Schachtelung.
2. b) Ergänze CSS, das den Hintergrund der Navigation hellgrau macht und die Links nebeneinander anordnet.
3. c) Erkläre, warum die Trennung von Inhalt (HTML) und Darstellung (CSS) sinnvoll ist.