Einheit 01

Grundlagen Web, HTML und LLMs

Webentwicklung & Agentic Coding
Sommersemester 2026

Begrüßung der Studierenden. Kurze Vorstellungsrunde falls erste Einheit. Hinweis auf die Kurswebsite und alle Materialien, die dort verfügbar sind.

Willkommen zur Lehrveranstaltung!

Was lernen wir dieses Semester?

Webentwicklung von Grund auf: HTML, CSS, JavaScript
Moderne Werkzeuge: VS Code, Git, Browser-DevTools
Agentic Coding: LLMs als intelligente Coding-Assistenten nutzen
Projekte mit Bezug zu den Digital Humanities umsetzen

Unser Ansatz: „Informed Vibe Coding“

Sie müssen kein Programmiergenie werden — aber Sie lernen, Code zu verstehen, LLMs gezielt einzusetzen und Ergebnisse kritisch zu bewerten.

Wichtig: Den Studierenden die Angst nehmen. Betonen, dass keine Vorkenntnisse nötig sind. Erklären, was "Informed Vibe Coding" bedeutet: Man muss verstehen, was man tut, auch wenn der Code von einem LLM generiert wird.

Was ist das Internet?

Ein weltweites Netzwerk von Computern, die miteinander verbunden sind
Entstanden in den 1960er-Jahren als Forschungsprojekt (ARPANET)
Computer kommunizieren über Protokolle — gemeinsame Regeln für den Datenaustausch
Das Internet ist die Infrastruktur (Kabel, Router, Server)
Darauf laufen verschiedene Dienste: E-Mail, Web, Streaming, Messaging…

Merke: Das Internet ist nicht dasselbe wie das Web!
Das Internet ist das Netzwerk. Das Web ist ein Dienst, der darauf läuft.

Analogie verwenden: Das Internet ist wie das Straßennetz, das Web ist wie der Lieferdienst, der darauf fährt. Kurz auf die Geschichte eingehen: ARPANET, Tim Berners-Lee.

Was ist das Web? Das Client-Server-Modell

Das World Wide Web (WWW) wurde 1989 von Tim Berners-Lee am CERN erfunden.

So funktioniert es:

Client (Browser): Sie öffnen einen Browser (Chrome, Firefox, Safari…)
Anfrage: Der Browser sendet eine Anfrage an einen Server
Server: Ein Computer im Internet, der Webseiten gespeichert hat
Antwort: Der Server schickt die angeforderte Seite zurück
Darstellung: Der Browser zeigt die Seite an

Client (Browser)  ----Anfrage---->  Server
                  <---Antwort-----  (HTML, CSS, JS, Bilder)

Dieses Modell ist fundamental. Immer wenn wir eine Webseite aufrufen, passiert genau dieser Ablauf. Später werden wir sehen, dass wir lokal einen eigenen kleinen Server starten können (Live Server in VS Code).

HTTP: Die Sprache des Web

HTTP = HyperText Transfer Protocol

Das Protokoll, mit dem Browser und Server kommunizieren.

Request (Anfrage):

GET /index.html HTTP/1.1
Host: www.uni-graz.at

Response (Antwort):

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>...</html>

Wichtige Status-Codes: 200 = OK, 404 = Nicht gefunden, 500 = Serverfehler

Nicht zu technisch werden. Wichtig ist: Der Browser fragt, der Server antwortet. 404 kennen die meisten Studierenden schon. Das ist ein guter Anknüpfungspunkt. HTTPS ist die verschlüsselte Variante — kurz erwähnen.

Die Anatomie einer URL

URL = Uniform Resource Locator — die Adresse einer Ressource im Web

https://www.uni-graz.at/de/studieren/index.html
|____| |______________| |_____________________|
  |          |                     |
Protokoll  Domain                Pfad

Protokoll: https:// — wie kommuniziert wird (verschlüsselt)
Domain: www.uni-graz.at — welcher Server angesprochen wird
Pfad: /de/studieren/index.html — welche Datei auf dem Server

Zusätzlich möglich: Port (:8080), Query-Parameter (?suche=html), Fragment (#kapitel2)

Gemeinsam eine URL im Browser analysieren. Zeigen, wie sich der Pfad ändert, wenn man auf der Uni-Website navigiert. Fragments erwähnen — die werden wir später selbst verwenden.

Was ist HTML?

HTML = HyperText Markup Language

HTML ist eine Auszeichnungssprache (Markup Language), keine Programmiersprache!
HTML beschreibt die Struktur und den Inhalt einer Webseite
HTML sagt dem Browser: „Das hier ist eine Überschrift, das ist ein Absatz, das ist ein Link“
HTML kümmert sich nicht um das Aussehen — dafür gibt es CSS

Vergleich: HTML ist wie das Skelett eines Körpers — es gibt Struktur.
CSS ist die Haut und Kleidung — es bestimmt das Aussehen.

Ganz wichtig: HTML ist KEINE Programmiersprache. Diesen Unterschied betonen. Markup = Auszeichnung. Wir "zeichnen" Text aus, genau wie in TEI-XML. Für DH-Studierende: TEI-XML ist auch eine Auszeichnungssprache!

HTML-Grundstruktur

Jede HTML-Seite hat diesen Grundaufbau:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <h1>Hallo Welt!</h1>
    <p>Das ist meine erste Webseite.</p>
  </body>
</html>

<!DOCTYPE html> — sagt dem Browser: „Das ist HTML5“
<html> — das Wurzelelement, enthält alles
<head> — Metadaten (Titel, Zeichensatz, etc.) — nicht sichtbar
<body> — der sichtbare Inhalt der Seite

Diesen Code gemeinsam durchgehen. Jede Zeile erklären. Analogie zum Brief: DOCTYPE = Briefkopf, head = Umschlag mit Metadaten, body = der eigentliche Briefinhalt.

Überschriften und Absätze

HTML hat sechs Ebenen von Überschriften:

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<h3>Abschnittsüberschrift</h3>
<h4>Unter-Abschnitt</h4>
<h5>Detail-Ebene</h5>
<h6>Feinste Gliederung</h6>

<p>Das ist ein Absatz. Absätze werden
mit dem p-Tag (paragraph) erstellt.</p>

<p>Jeder neue Absatz bekommt ein eigenes
p-Tag. Der Browser fügt automatisch
Abstand ein.</p>

Regel: Nur ein <h1> pro Seite. Überschriften nicht überspringen (h1 → h2 → h3).

Hierarchie betonen — wie in einer wissenschaftlichen Arbeit: Kapitel, Unterkapitel, Abschnitt. h1 = Titel der Arbeit, h2 = Kapitel, h3 = Unterkapitel. Das kennen die Studierenden aus ihren Seminararbeiten.

Links und Bilder

Links — das „Hyper“ in HyperText:

<a href="https://www.uni-graz.at">Uni Graz</a>

<a href="seite2.html">Zur nächsten Seite</a>

<a href="#kapitel2">Zum Kapitel 2 springen</a>

Bilder — ein selbstschließendes Tag:

<img src="foto.jpg" alt="Beschreibung des Bildes">

href = wohin der Link führt (Hypertext Reference)
src = Quelle des Bildes (Source)
alt = Alternativtext für Barrierefreiheit (immer angeben!)

Links sind das Herzstück des Web — sie verbinden Seiten miteinander. Unterschied zwischen absoluten und relativen URLs erklären. alt-Attribut: Wichtig für Screenreader und wenn Bilder nicht laden.

Listen

Ungeordnete Liste (Aufzählung mit Punkten):

<ul>
  <li>HTML lernen</li>
  <li>CSS lernen</li>
  <li>JavaScript lernen</li>
</ul>

Geordnete Liste (nummeriert):

<ol>
  <li>Zuerst HTML</li>
  <li>Dann CSS</li>
  <li>Schließlich JavaScript</li>
</ol>

<ul> = unordered list (ungeordnet)
<ol> = ordered list (geordnet)
<li> = list item (Listeneintrag)

Listen werden sehr häufig verwendet — nicht nur für Aufzählungen, sondern auch für Navigationsmenüs. Listen können auch verschachtelt werden (Liste in einer Liste).

Semantische HTML-Elemente

Semantische Elemente sagen, was der Inhalt bedeutet:

<header>  — Kopfbereich der Seite
<nav>     — Navigation / Menü
<main>    — Hauptinhalt der Seite
<article> — Eigenständiger Inhalt (Artikel, Blogpost)
<section> — Thematischer Abschnitt
<aside>   — Seitenleiste, ergänzende Infos
<footer>  — Fußbereich der Seite

Warum semantisches HTML?

Barrierefreiheit: Screenreader verstehen die Seitenstruktur
SEO: Suchmaschinen bewerten die Seite besser
Wartbarkeit: Code ist leichter zu lesen und zu pflegen

Früher wurde alles mit div-Elementen gemacht. Semantische Elemente geben dem Inhalt Bedeutung. Parallele zu TEI: Dort zeichnen wir auch aus, WAS etwas ist (ein Personenname, ein Ort, ein Datum).

HTML vs. TEI-XML: Parallelen

Beides sind Auszeichnungssprachen (Markup Languages)!

Konzept	HTML	TEI-XML
Überschrift	`<h1>`	`<head>`
Absatz	`<p>`	`<p>`
Liste	`<ul><li>`	`<list><item>`
Hervorhebung	`<em>`	`<hi>`
Link	`<a href="">`	`<ref target="">`
Metadaten	`<head>`	`<teiHeader>`

Wenn Sie TEI verstehen, verstehen Sie schon das Grundprinzip von HTML!

Diese Parallele ist ein großer Vorteil für DH-Studierende. Sie haben bereits ein Verständnis für Auszeichnungssprachen. HTML ist in vieler Hinsicht einfacher als TEI. Beide verwenden öffnende und schließende Tags, Attribute, hierarchische Struktur.

Was ist TEI?

TEI = Text Encoding Initiative

Ein XML-basierter Standard für die digitale Repräsentation von Texten
Weit verbreitet in den Geisteswissenschaften: Editionen, Briefe, Manuskripte
Ermöglicht die strukturierte Kodierung von Bedeutung: Personen, Orte, Daten
Beispiele in Graz: Hugo Schuchardt Archiv, Briefeditionen am ZIM

Grundstruktur eines TEI-Dokuments:

<TEI xmlns="http://www.tei-c.org/ns/1.0">
  <teiHeader>
    <!-- Metadaten über den Text -->
  </teiHeader>
  <text>
    <body>
      <!-- Der eigentliche Text -->
    </body>
  </text>
</TEI>

Viele Studierende werden TEI aus anderen LVen kennen. Falls nicht, kurz erklären. Der Punkt ist: Sie haben schon Erfahrung mit Auszeichnungssprachen, auch wenn Sie es nicht "Programmieren" nennen. Hugo Schuchardt ist ein guter lokaler Bezugspunkt für die Uni Graz.

Ein Brief in TEI: Schuchardt-Beispiel

<TEI>
  <teiHeader>
    <fileDesc>
      <titleStmt>
        <title>Brief von Hugo Schuchardt an
          Karl Vossler</title>
      </titleStmt>
    </fileDesc>
  </teiHeader>
  <text>
    <body>
      <opener>
        <dateline>Graz, 3. Jänner 1904</dateline>
        <salute>Verehrter Herr Kollege!</salute>
      </opener>
      <p>Empfangen Sie meinen herzlichsten
        Dank für Ihre freundliche Zusendung...</p>
      <closer>
        <salute>Mit besten Grüßen</salute>
        <signed>Ihr Hugo Schuchardt</signed>
      </closer>
    </body>
  </text>
</TEI>

Jedes Element hat eine Bedeutung: opener, dateline, salute, closer…

Konkretes Beispiel zeigen. Die Studierenden sollen sehen: Markup-Sprachen strukturieren Texte. In HTML machen wir dasselbe — nur mit einem anderen Vokabular und einem anderen Ziel (Anzeige im Browser vs. wissenschaftliche Edition).

Was ist ein Large Language Model?

Ein LLM (Large Language Model) ist ein KI-System, das auf riesigen Textmengen trainiert wurde.

Training: Das Modell lernt Muster in Milliarden von Texten (Bücher, Webseiten, Code…)
Funktionsweise: Es sagt das wahrscheinlichste nächste Wort voraus — wieder und wieder
Ergebnis: Es kann Texte, Code, Übersetzungen und Erklärungen generieren
Wichtig: Es „versteht“ nicht wirklich — es erkennt und reproduziert Muster

Bekannte LLMs:

Claude (Anthropic) — unser Haupt-Werkzeug in dieser LV
ChatGPT (OpenAI) — weit verbreitet
Gemini (Google) — in Google-Produkte integriert

Einfach erklären, ohne zu tief in die Technik einzusteigen. Analogie: Ein LLM ist wie ein sehr belesener Assistent, der alles gelesen hat, aber nicht wirklich "denkt". Es ist ein Werkzeug, kein Ersatz für eigenes Denken.

LLMs als Coding-Assistenten

LLMs können Code schreiben, erklären und debuggen:

Claude — stark bei Erklärungen und strukturiertem Code
ChatGPT — vielseitig, große Community
GitHub Copilot — direkt in VS Code integriert

Was können sie gut?

HTML, CSS und JavaScript generieren
Fehler in Code finden und beheben
Code erklären und kommentieren
Boilerplate-Code schnell erstellen

Was können sie nicht?

Immer korrekten Code liefern — man muss prüfen!
Den Kontext Ihres Projekts vollständig verstehen
Kreative Design-Entscheidungen für Sie treffen

Wichtig: LLMs sind Werkzeuge, nicht Wundermaschinen. Sie machen Fehler. Deshalb ist "Informed" in "Informed Vibe Coding" so wichtig — man muss verstehen, was der Code tut.

Der Agentic Coding Workflow

Unser 4-Schritte-Zyklus für die Arbeit mit LLMs:

Beschreiben:
Formulieren Sie klar, was Sie wollen. Je präziser der Prompt, desto besser das Ergebnis.
Generieren:
Das LLM erstellt den Code. Lesen Sie die Ausgabe aufmerksam durch.
Prüfen:
Testen Sie den Code im Browser. Funktioniert er? Sieht er richtig aus? Gibt es Fehler?
Iterieren:
Verfeinern Sie Ihren Prompt. Beschreiben Sie, was geändert werden soll. Wiederholen Sie den Zyklus.

Beschreiben → Generieren → Prüfen → Iterieren

Dieser Workflow ist der rote Faden der gesamten LV. Immer wieder darauf zurückkommen. Der Zyklus ist iterativ — man macht selten beim ersten Versuch alles richtig. Vergleich: Wie wissenschaftliches Arbeiten — Entwurf, Feedback, Überarbeitung.

Live-Demo: Unser erster Prompt

Wir probieren es gemeinsam aus! Prompt an Claude:

Erstelle eine einfache HTML-Seite über den
Sprachwissenschaftler Hugo Schuchardt.

Die Seite soll enthalten:
- Einen Titel mit seinem Namen
- Einen kurzen Absatz über sein Leben
  (geboren 1842, gestorben 1927, wirkte in Graz)
- Eine Liste seiner wichtigsten Forschungsgebiete
- Einen Link zum Hugo Schuchardt Archiv

Verwende korrektes HTML5 mit semantischen
Elementen. Die Sprache soll Deutsch sein.

Beobachten Sie: Wie detailliert ist die Antwort? Was hat das LLM gut gemacht? Was fehlt?

LIVE DEMO: Claude öffnen und diesen Prompt eingeben. Ergebnis gemeinsam analysieren. Zeigen, wie man das Ergebnis in VS Code einfügt und mit Live Server anschaut. Typische Beobachtungen: Das LLM fügt oft zusätzliche Elemente hinzu, die man nicht verlangt hat.

Prompt-Techniken für Code

1. Sei spezifisch:

Schlecht: "Mach eine Webseite"
Gut: "Erstelle eine HTML5-Seite mit einer
     Überschrift, drei Absätzen und einem Bild"

2. Gib Kontext:

Schlecht: "Füge eine Liste hinzu"
Gut: "Füge eine ungeordnete Liste mit den drei
     Forschungsgebieten von Schuchardt hinzu"

3. Iteriere:

"Der Code funktioniert, aber die Überschrift
soll h2 statt h3 sein. Außerdem fehlt ein
alt-Attribut beim Bild."

4. Frage nach Erklärungen:

"Erkläre mir Zeile für Zeile, was dieser
HTML-Code macht."

Prompt Engineering ist eine Kernkompetenz für Agentic Coding. Weitere Tipps: Sprache angeben, Beispielstruktur vorgeben, Format der Antwort bestimmen. Übung: Studierende sollen selbst Prompts formulieren und vergleichen.

Informed Vibe Coding: Unser Leitgedanke

„Vibe Coding“ = Code generieren lassen, ohne ihn wirklich zu verstehen

„Informed Vibe Coding“ = Code generieren lassen, aber:

Verstehen, was der Code tut (Grundkonzepte kennen)
Erkennen, ob der Code korrekt ist (kritisch prüfen)
Wissen, wie man Fehler beschreibt (gezielt iterieren)
Über das Vokabular verfügen, um mit LLMs effektiv zu kommunizieren

Ziel dieser LV: Sie werden keine Expert:innen-Programmierer:innen — aber Sie werden kompetente Auftraggeber:innen, die wissen, was möglich ist und wie man es einfordert.

Das ist der zentrale Gedanke der LV. Studierende sollen die Angst vor Code verlieren, aber gleichzeitig ein Verständnis dafür entwickeln, was sie tun. Vergleich: Man muss kein Automechaniker sein, aber man sollte wissen, wann etwas nicht stimmt.

Setup: VS Code & Live Server

Visual Studio Code (VS Code) — unser Code-Editor:

Download: https://code.visualstudio.com
Installieren und öffnen
Extension installieren: Live Server (von Ritwick Dey)
- Klick auf das Extensions-Icon (linke Seitenleiste, vier Quadrate)
- Suche nach „Live Server“
- „Install“ klicken
HTML-Datei öffnen → Rechtsklick → „Open with Live Server“

Live Server startet einen lokalen Webserver und aktualisiert die Seite automatisch, wenn Sie den Code ändern!

Gemeinsam Schritt für Schritt durchführen. Sicherstellen, dass alle Studierenden VS Code installiert haben. Falls Probleme: Alternative ist, HTML-Dateien direkt im Browser zu öffnen (Doppelklick). Weitere nützliche Extensions erwähnen: Prettier, HTML CSS Support.

Browser DevTools: HTML inspizieren

Öffnen der DevTools:

Windows/Linux: F12 oder Strg + Umschalt + I
Mac: Cmd + Option + I
Oder: Rechtsklick auf ein Element → „Untersuchen“ / „Inspect“

Was kann man damit tun?

Elements-Tab: HTML-Struktur der Seite ansehen und live ändern
Styles-Tab: CSS-Regeln ansehen und ausprobieren
Console-Tab: Fehlermeldungen sehen (später für JavaScript)

Tipp: Änderungen in den DevTools sind temporär — nach einem Neuladen sind sie weg. Das ist perfekt zum Experimentieren!

LIVE DEMO: Eine beliebige Webseite öffnen und die DevTools zeigen. Ein Element inspizieren, den HTML-Code zeigen, vielleicht einen Text live ändern. Das beeindruckt die Studierenden immer und motiviert sie.

Zusammenfassung

Was haben wir heute gelernt?

Das Internet ist ein Netzwerk von Computern; das Web ist ein Dienst darauf
HTTP ist das Protokoll, mit dem Browser und Server kommunizieren
HTML ist eine Auszeichnungssprache für die Struktur von Webseiten
Wichtige Tags: <h1>-<h6>, <p>, <a>, <img>, <ul>, <ol>, <li>
Semantische Elemente wie <header>, <main>, <footer> geben Bedeutung
HTML und TEI-XML sind verwandt — beides sind Markup Languages
LLMs können Code generieren — wir müssen ihn verstehen und prüfen
VS Code + Live Server sind unsere Werkzeuge

Zusammenfassung zügig durchgehen. Fragen? Offene Punkte klären. Auf das Skriptum hinweisen für vertiefendes Nachlesen.

Vorschau & Assignment 1

Assignment 1: „Meine erste Webseite“

Erstellen Sie eine HTML-Seite über ein Thema aus Ihrem Studium
Nutzen Sie ein LLM als Assistenten — dokumentieren Sie Ihre Prompts
Die Seite muss enthalten: Überschriften, Absätze, eine Liste, einen Link und ein Bild
Abgabe: HTML-Datei + kurzer Reflexionsbericht (½ Seite)

Nächste Einheit: CSS-Grundlagen

Wie man HTML-Seiten gestaltet und styled
Farben, Schriften, Layouts
Das Box-Modell verstehen

Fragen? Dann bis nächste Woche!

Assignment genau erklären. Abgabetermin nennen. Bewertungskriterien erwähnen. Ermutigen: Es muss nicht perfekt sein! Es geht um den Lernprozess. Hinweis: Kommen Sie in die Sprechstunde, wenn Sie Probleme haben.