Grundlagen Web, HTML und LLMs
In dieser ersten Einheit lernen Sie die Grundlagen des Internets und des World Wide Web kennen. Sie erfahren, was HTML ist und wie es funktioniert, ziehen Parallelen zu TEI-XML aus den Digital Humanities und machen Ihre ersten Schritte mit Large Language Models als Coding-Assistenten.
Lernziele
Nach Abschluss dieser Einheit können Sie:
- Das Web erklären: Sie verstehen das Client-Server-Modell, HTTP-Requests und die Anatomie einer URL.
- HTML-Grundlagen anwenden: Sie können eine einfache HTML-Seite mit Überschriften, Absätzen, Links, Bildern und Listen erstellen.
-
Semantisches HTML verwenden: Sie kennen die wichtigsten semantischen
Elemente wie
<header>,<main>,<footer>,<article>und<section>. - Parallelen zu TEI-XML erkennen: Sie sehen die Gemeinsamkeiten zwischen HTML und TEI-XML als Auszeichnungssprachen.
- LLMs als Coding-Assistenten nutzen: Sie verstehen, was ein Large Language Model ist und können erste Prompts formulieren, um HTML-Code zu generieren.
- Ihre Entwicklungsumgebung einrichten: Sie haben VS Code installiert, die Live-Server-Extension aktiviert und können die Browser-DevTools öffnen.
Überblick: Was erwartet Sie?
Das Web verstehen
Bevor wir Code schreiben, müssen wir verstehen, wie das Internet und das World Wide Web funktionieren. Was passiert eigentlich, wenn Sie eine URL in den Browser eingeben? Wir schauen uns das Client-Server-Modell, HTTP und URLs an.
HTML-Grundlagen
HTML (HyperText Markup Language) ist die Sprache, in der Webseiten geschrieben werden. Sie lernen die Grundstruktur eines HTML-Dokuments, die wichtigsten Tags und wie man Texte, Links, Bilder und Listen erstellt.
HTML & Digital Humanities
Als Studierende der Digital Humanities kennen Sie vielleicht schon TEI-XML. Wir ziehen Parallelen zwischen HTML und TEI und zeigen, dass beides Auszeichnungssprachen (Markup Languages) sind.
Agentic Coding mit LLMs
Der Kern dieser Lehrveranstaltung: Sie lernen, Large Language Models wie Claude oder ChatGPT als Coding-Assistenten zu nutzen. Wir starten mit dem Workflow „Beschreiben → Generieren → Prüfen → Iterieren“.
Setup & Werkzeuge
Wir richten gemeinsam VS Code als Code-Editor ein, installieren die Live-Server-Extension und lernen die Browser-DevTools kennen, mit denen Sie HTML-Code direkt im Browser inspizieren können.