Einheit 01

Übungen: HTML-Grundlagen

In diesen Übungen wenden Sie die HTML-Grundlagen praktisch an. Sie arbeiten mit einem interaktiven Code-Editor direkt im Browser. Schreiben Sie den Code in das linke Feld und sehen Sie das Ergebnis sofort in der Vorschau rechts.

Übung 1

Mein erster Brief

Aufgabe: Unten sehen Sie den Text eines historischen Briefes von Hugo Schuchardt. Der Text ist noch nicht mit HTML ausgezeichnet. Ihre Aufgabe ist es, den Brief mit den passenden HTML-Tags zu strukturieren.

Verwenden Sie folgende Elemente:

  • <h1> für den Titel des Briefes
  • <p> für Absätze
  • <strong> für den Absender und Empfänger
  • <em> für das Datum

Hinweise:

  • Denken Sie an die HTML-Grundstruktur: <!DOCTYPE html>, <html>, <head>, <body>
  • Setzen Sie einen passenden <title> im <head>
  • Jeder Absatz des Briefes bekommt ein eigenes <p>-Tag
  • Die Anrede und der Gruß können ebenfalls in <p>-Tags stehen
brief.html
Vorschau
Lösung anzeigen 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Brief von Hugo Schuchardt</title>
</head>
<body>

  <h1>Brief von Hugo Schuchardt an Karl Vossler</h1>

  <p><strong>Von: Hugo Schuchardt</strong><br>
  <em>Graz, 3. Jänner 1904</em></p>

  <p>Verehrter Herr Kollege!</p>

  <p>Empfangen Sie meinen herzlichsten Dank für Ihre
  freundliche Zusendung. Ich habe Ihre Abhandlung
  über die Sprachphilosophie mit größtem Interesse
  gelesen.</p>

  <p>Besonders anregend fand ich Ihre Ausführungen zur
  Frage der Sprachmischung. Dies ist ein Thema, das
  mich seit vielen Jahren beschäftigt und zu dem ich
  selbst einige Beobachtungen beitragen konnte.</p>

  <p>Ich würde mich freuen, diese Fragen bei Gelegenheit
  mündlich mit Ihnen erörtern zu können.</p>

  <p>Mit besten Grüßen<br>
  <strong>Ihr Hugo Schuchardt</strong></p>

</body>
</html>
Übung 2

HTML-Detektiv

Aufgabe: Der folgende HTML-Code enthält 7 Fehler. Finden und beheben Sie alle Fehler, damit die Seite korrekt angezeigt wird.

Typische HTML-Fehler:

  • Fehlende oder falsch geschriebene schließende Tags
  • Fehlende Pflichtattribute (z.B. alt bei Bildern)
  • Falsche Verschachtelung von Elementen
  • Fehlende Anführungszeichen bei Attributwerten
  • Tippfehler in Tag-Namen

Tipp: Schauen Sie sich die Vorschau an. Vergleichen Sie, was Sie sehen, mit dem, was der Code beabsichtigt. Arbeiten Sie den Code Zeile für Zeile durch.

fehlerhaft.html
Vorschau
Lösung anzeigen (alle 7 Fehler)

Fehler 1: Zeile mit <h2> wird mit </h3> geschlossen. Korrektur: <h2>...</h2>

Fehler 2: Bei <strong> und </p> ist die Verschachtelung falsch. </p></strong> muss </strong></p> sein (was zuerst geöffnet wird, wird zuletzt geschlossen).

Fehler 3: Beim zweiten <li> (Kreolistik) fehlt das schließende </li>. Korrektur: <li>Kreolistik</li>

Fehler 4: Beim <a>-Tag fehlen die Anführungszeichen um den href-Wert. Korrektur: href="https://schuchardt.uni-graz.at"

Fehler 5: Beim <img>-Tag fehlt das Pflichtattribut alt. Korrektur: <img src="schuchardt-portraet.jpg" alt="Porträt von Hugo Schuchardt">

Fehler 6: Das schließende <em>-Tag hat keinen Schrägstrich. <em> statt </em>. Korrektur: </em>

Fehler 7: Das schließende <footer>-Tag hat einen Tippfehler: </foooter> (drei o). Korrektur: </footer>

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>Hugo Schuchardt - Sprachwissenschaftler</title>
</head>
<body>

  <header>
    <h1>Hugo Schuchardt</h1>
    <nav>
      <a href="index.html">Start</a>
      <a href="leben.html">Leben</a>
      <a href="werke.html">Werke</a>
    </nav>
  </header>

  <main>
    <h2>Über Hugo Schuchardt</h2>

    <p>Hugo Schuchardt (1842-1927) war ein österreichischer
    <strong>Sprachwissenschaftler</strong>, der an der Universität
    Graz wirkte.</p>

    <p>Seine wichtigsten Forschungsgebiete waren:</p>

    <ul>
      <li>Romanistik</li>
      <li>Kreolistik</li>
      <li>Baskologie</li>
      <li>Allgemeine Sprachwissenschaft</li>
    </ul>

    <h3>Weiterführende Links</h3>

    <p>Besuchen Sie das
    <a href="https://schuchardt.uni-graz.at">Hugo Schuchardt Archiv</a>
    für weitere Informationen.</p>

    <img src="schuchardt-portraet.jpg" alt="Porträt von Hugo Schuchardt">

    <p>Schuchardt unterhielt eine umfangreiche
    <em>Korrespondenz</em> mit Gelehrten in ganz Europa.
    Seine Briefe sind heute digital zugänglich.</p>
  </main>

  <footer>
    <p>&copy; 2026 Universität Graz</p>
  </footer>

</body>
</html>
Übung 3

LLM-Erstversuch: Ihre erste Seite mit KI

Aufgabe: Nutzen Sie ein Large Language Model (Claude, ChatGPT oder ein anderes), um eine HTML-Seite über ein Thema aus Ihrem Studium oder Forschungsinteresse zu generieren. Folgen Sie dabei dem Agentic-Coding-Workflow.

Schritt 1: Prompt formulieren

Formulieren Sie einen Prompt, der folgende Informationen enthält:

  • Was für eine Seite soll erstellt werden?
  • Welches Thema soll behandelt werden?
  • Welche HTML-Elemente sollen verwendet werden? (z.B. Überschriften, Absätze, Listen, Links)
  • In welcher Sprache soll die Seite sein?
  • Sollen semantische Elemente (<header>, <main>, <footer>) verwendet werden?

Beispiel-Prompt

Hier ist ein Beispiel-Prompt, den Sie als Vorlage verwenden können:

Erstelle eine vollstaendige HTML5-Seite auf Deutsch ueber
das Thema "Digitale Edition mittelalterlicher Handschriften".

Die Seite soll enthalten:
- Einen aussagekraeftigen Titel (h1)
- Drei Absaetze, die das Thema erklaeren
- Eine ungeordnete Liste mit vier wichtigen Aspekten
  digitaler Editionen
- Eine geordnete Liste mit den Arbeitsschritten bei
  einer digitalen Edition
- Einen Link zu einer relevanten Website
- Semantische HTML-Elemente (header, main, footer)

Verwende korrektes HTML5 mit UTF-8-Encoding und
einem viewport-Meta-Tag. Setze die Sprache auf Deutsch.
Kommentiere die wichtigsten Abschnitte im Code.

Schritt 2: Code generieren lassen

Geben Sie Ihren Prompt in ein LLM ein. Lesen Sie die Antwort aufmerksam durch. Versuchen Sie, den generierten Code zu verstehen. Welche Tags erkennen Sie?

Schritt 3: Testen und prüfen

  1. Kopieren Sie den generierten Code
  2. Erstellen Sie in VS Code eine neue Datei (z.B. mein-thema.html)
  3. Fügen Sie den Code ein und speichern Sie
  4. Öffnen Sie die Datei mit Live Server
  5. Prüfen Sie:
    • Wird die Seite korrekt angezeigt?
    • Sind alle geforderten Elemente vorhanden?
    • Ist der HTML-Code valide? (Öffnen Sie die DevTools und schauen Sie auf Fehlermeldungen)
    • Hat das LLM etwas hinzugefügt, das Sie nicht verlangt haben?

Schritt 4: Iterieren

Formulieren Sie einen Folgeprompt, um den Code zu verbessern. Zum Beispiel:

  • „Füge ein Bild mit passendem alt-Attribut hinzu“
  • „Ersetze die div-Elemente durch semantische Tags“
  • „Erkläre mir, was das meta-viewport-Tag macht“
  • „Füge eine Navigationsleiste mit drei Links hinzu“

Schritt 5: Reflektieren

Beantworten Sie für sich folgende Fragen:

  • Wie spezifisch musste Ihr Prompt sein, damit das Ergebnis brauchbar war?
  • Was hat das LLM gut gemacht?
  • Was mussten Sie korrigieren oder anpassen?
  • Wie viele Iterationen waren nötig, bis das Ergebnis zufriedenstellend war?
  • Hätten Sie die Fehler im Code erkannt, wenn Sie die HTML-Grundlagen nicht kennen würden?

Tipp

Speichern Sie Ihre Prompts und die Antworten des LLM! Für Assignment 1 müssen Sie einen kurzen Reflexionsbericht schreiben, in dem Sie Ihren Agentic-Coding-Prozess dokumentieren.