Einheit 01

Grundlagen Web, HTML und LLMs

In diesem Skriptum finden Sie alle Inhalte der ersten Einheit ausführlich erklärt. Lesen Sie es begleitend zur Lehrveranstaltung oder zum Nachschlagen. Codebeispiele können Sie direkt in Ihren Editor übernehmen und ausprobieren.

1. Das Web verstehen

1.1 Internet vs. Web

Bevor wir HTML-Code schreiben, müssen wir verstehen, wo dieser Code eigentlich „lebt“ und wie er zu den Nutzer:innen gelangt. Dazu müssen wir zwei Begriffe auseinanderhalten, die im Alltag oft synonym verwendet werden:

Das Internet ist ein weltweites Netzwerk von Computern. Es entstand in den 1960er-Jahren als Forschungsprojekt des US-Verteidigungsministeriums (ARPANET) und wuchs über die Jahrzehnte zu einem globalen Netzwerk. Das Internet ist die Infrastruktur — die physischen Kabel (auch Glasfaser-Seekabel unter den Ozeanen!), Router und Server, die Computer miteinander verbinden.

Das World Wide Web (WWW) ist ein Dienst, der auf dem Internet läuft. Es wurde 1989 von Tim Berners-Lee am CERN in Genf erfunden. Das Web basiert auf drei Säulen:

HTML — die Sprache, in der Webseiten geschrieben werden
HTTP — das Protokoll, über das Webseiten übertragen werden
URLs — die Adressen, mit denen man Webseiten findet

Tipp

Stellen Sie sich das Internet wie das Straßennetz vor: Es verbindet Orte miteinander. Das Web ist dann wie ein bestimmter Dienst, der dieses Straßennetz nutzt — zum Beispiel ein Paketdienst. Es gibt aber auch andere Dienste, die das Internet nutzen: E-Mail, Streaming, Messaging, Online-Gaming und vieles mehr.

1.2 Das Client-Server-Modell

Das Web funktioniert nach dem Client-Server-Modell. Das klingt technisch, ist aber im Grunde ganz einfach:

Client: Das ist Ihr Webbrowser (Chrome, Firefox, Safari, Edge…). Der Client ist das Programm, das Webseiten anfordert und anzeigt.
Server: Das ist ein Computer irgendwo im Internet, auf dem Webseiten gespeichert sind. Der Server wartet auf Anfragen und beantwortet sie.

Der Ablauf ist immer gleich:

Sie geben eine URL in den Browser ein (z.B. https://www.uni-graz.at)
Der Browser (Client) sendet eine Anfrage (Request) an den Server
Der Server sucht die angeforderte Datei
Der Server sendet eine Antwort (Response) zurück — z.B. eine HTML-Datei
Der Browser empfängt die Datei und zeigt sie an (Rendering)

Ihr Browser (Client)                          Server
     |                                          |
     |  --- HTTP Request (GET /index.html) ---> |
     |                                          |
     |  <-- HTTP Response (HTML-Datei) -------  |
     |                                          |
     | [Browser zeigt die Seite an]             |

Info

Wenn wir später mit VS Code und der Live-Server-Extension arbeiten, starten wir einen kleinen Server direkt auf unserem Computer. Der Browser verbindet sich dann nicht mit einem Server im Internet, sondern mit diesem lokalen Server. Das Prinzip ist aber genau dasselbe!

1.3 HTTP: Das Protokoll des Web

HTTP steht für HyperText Transfer Protocol. Es ist das Regelwerk, nach dem Browser und Server miteinander kommunizieren. Stellen Sie sich HTTP wie eine gemeinsame Sprache vor, die beide Seiten sprechen.

Ein HTTP-Request (Anfrage) sieht vereinfacht so aus:

GET /de/studieren/index.html HTTP/1.1
Host: www.uni-graz.at
Accept: text/html

Hier sagt der Browser: „Bitte gib mir (GET) die Datei /de/studieren/index.html vom Server www.uni-graz.at.“

Die HTTP-Response (Antwort) des Servers:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>Studieren an der Uni Graz</title>
  </head>
  <body>
    ...
  </body>
</html>

Die wichtigsten HTTP-Statuscodes:

200 OK — Alles in Ordnung, die Seite wird ausgeliefert
301 Moved Permanently — Die Seite ist umgezogen (Weiterleitung)
404 Not Found — Die Seite wurde nicht gefunden
500 Internal Server Error — Der Server hat ein Problem

Schlüsselkonzept: HTTPS

HTTPS ist die verschlüsselte Variante von HTTP. Das „S“ steht für „Secure“. Heute sollten alle Webseiten HTTPS verwenden. Sie erkennen es am Schloss-Symbol in der Browser-Adressleiste. HTTPS schützt die Übertragung vor dem Mitlesen durch Dritte.

1.4 URLs verstehen

Eine URL (Uniform Resource Locator) ist die eindeutige Adresse einer Ressource im Web. Jede Webseite, jedes Bild, jede Datei hat eine eigene URL.

https://www.uni-graz.at/de/studieren/index.html?fach=dh#bewerbung
|____| |______________| |_________________________| |______| |________|
  |          |                      |                  |         |
Protokoll  Domain                 Pfad              Query    Fragment

Protokoll (https://): Wie kommuniziert wird
Domain (www.uni-graz.at): Welcher Server angesprochen wird
Pfad (/de/studieren/index.html): Welche Datei auf dem Server
Query-Parameter (?fach=dh): Zusätzliche Informationen für den Server
Fragment (#bewerbung): Springt zu einem Abschnitt auf der Seite

Schlüsselkonzept: Absolute vs. relative URLs

Eine absolute URL beginnt mit dem Protokoll und enthält die komplette Adresse: https://www.uni-graz.at/de/index.html

Eine relative URL bezieht sich auf den aktuellen Standort: seite2.html oder ../bilder/foto.jpg

Relative URLs sind praktisch innerhalb eines Projekts. Zwei Punkte (..) bedeuten „ein Verzeichnis nach oben“.

Ausprobieren

Öffnen Sie Ihren Browser und gehen Sie auf eine beliebige Webseite. Schauen Sie sich die URL in der Adressleiste an. Können Sie die einzelnen Teile identifizieren? Protokoll? Domain? Pfad? Navigieren Sie auf der Seite und beobachten Sie, wie sich die URL verändert.

2. HTML-Grundlagen

2.1 Was ist HTML?

HTML steht für HyperText Markup Language. Es ist die Standardsprache für die Erstellung von Webseiten. Wichtig zu verstehen:

HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache (Markup Language). Der Unterschied: Eine Programmiersprache (wie Python oder JavaScript) kann Berechnungen durchführen, Entscheidungen treffen und Abläufe steuern. HTML dagegen beschreibt lediglich die Struktur und den Inhalt eines Dokuments.

HTML verwendet Tags (Auszeichnungen), um Text zu strukturieren. Ein Tag besteht aus einem Elementnamen in spitzen Klammern:

<tagname>Inhalt</tagname>

Beispiel:
<p>Das ist ein Absatz.</p>

<p> ist das öffnende Tag
</p> ist das schließende Tag (mit Schrägstrich)
Dazwischen steht der Inhalt

Manche Tags sind selbstschließend — sie haben keinen Inhalt:

<img src="foto.jpg" alt="Ein Foto">
<br>
<hr>

Tags können Attribute haben — zusätzliche Informationen in Name-Wert-Paaren:

<a href="https://www.uni-graz.at">Uni Graz</a>
   |___|   |________________________|
 Attribut-     Attribut-Wert
   Name

Tipp für DH-Studierende

Wenn Sie schon mit TEI-XML gearbeitet haben, kennen Sie das Prinzip bereits! TEI verwendet ebenfalls öffnende und schließende Tags, Attribute und eine hierarchische Struktur. HTML und TEI sind wie Geschwister — beide basieren auf der Idee, Text mit Bedeutung auszuzeichnen.

2.2 Die HTML-Grundstruktur

Jedes HTML-Dokument hat den gleichen Grundaufbau. Das ist sozusagen das „Gerüst“:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mein Seitentitel</title>
  </head>
  <body>
    <!-- Hier kommt der sichtbare Inhalt -->
    <h1>Willkommen!</h1>
    <p>Das ist meine erste Webseite.</p>
  </body>
</html>

Erklärung der einzelnen Teile:

<!DOCTYPE html> — Teilt dem Browser mit, dass es sich um ein HTML5-Dokument handelt. Muss immer in der ersten Zeile stehen.
<html lang="de"> — Das Wurzelelement. Alles andere steht darin. Das lang-Attribut gibt die Sprache an.
<head> — Enthält Metadaten: Informationen über die Seite, die nicht direkt angezeigt werden (Titel, Zeichensatz, etc.).
<meta charset="UTF-8"> — Legt den Zeichensatz fest. UTF-8 unterstützt alle Zeichen (Umlaute, Sonderzeichen, Emojis…).
<meta name="viewport"> — Macht die Seite auf Mobilgeräten korrekt darstellbar.
<title> — Der Titel der Seite, erscheint im Browser-Tab.
<body> — Enthält den sichtbaren Inhalt der Seite. Alles, was die Besucher:innen sehen, steht hier.
 — HTML-Kommentare sind für Entwickler:innen, werden im Browser nicht angezeigt.

Schlüsselkonzept: Verschachtelung

HTML-Elemente sind verschachtelt — wie russische Matrjoschka-Puppen. Das <html>-Element enthält <head> und <body>. Der <body> enthält Überschriften und Absätze. Diese Hierarchie muss immer korrekt sein: Was zuerst geöffnet wird, muss zuletzt geschlossen werden.

Ausprobieren

Erstellen Sie eine neue Datei in VS Code, nennen Sie sie test.html und tippen Sie den obigen Grundaufbau ab. Öffnen Sie die Datei mit Live Server. Ändern Sie den Text zwischen <h1> und </h1> und beobachten Sie, wie sich die Seite automatisch aktualisiert.

2.3 Überschriften und Absätze

Überschriften gliedern eine Seite — genau wie Kapitelüberschriften in einem Buch oder einer wissenschaftlichen Arbeit. HTML bietet sechs Ebenen:

<h1>Hauptüberschrift (Ebene 1)</h1>
<h2>Unterüberschrift (Ebene 2)</h2>
<h3>Abschnitt (Ebene 3)</h3>
<h4>Unter-Abschnitt (Ebene 4)</h4>
<h5>Detail (Ebene 5)</h5>
<h6>Feinste Ebene (Ebene 6)</h6>

Regeln für Überschriften:

Verwenden Sie nur ein <h1> pro Seite (den Haupttitel)
Überspringen Sie keine Ebenen: nach <h1> kommt <h2>, nicht <h3>
Überschriften sind nicht dazu da, Text groß zu machen — das ist Aufgabe von CSS

Absätze werden mit dem <p>-Tag erstellt:

<p>
  Hugo Schuchardt war ein österreichischer Sprachwissenschaftler,
  der von 1842 bis 1927 lebte. Er war Professor an der
  Universität Graz und gilt als einer der bedeutendsten
  Romanisten und Kreolistikforscher seiner Zeit.
</p>

<p>
  Schuchardt unterhielt eine umfangreiche Korrespondenz mit
  Gelehrten in ganz Europa. Diese Briefe sind heute digital
  zugänglich und ein wertvolles Forschungsmaterial.
</p>

Jeder Absatz bekommt ein eigenes <p>-Tag. Der Browser fügt automatisch Abstand zwischen Absätzen ein.

Hinweis: Zeilenumbrüche in HTML

In HTML werden Zeilenumbrüche im Quellcode ignoriert. Wenn Sie im Code eine neue Zeile beginnen, hat das keinen Effekt auf die Anzeige. Für einen Zeilenumbruch verwenden Sie das Tag <br>. Für einen neuen Absatz verwenden Sie ein neues <p>-Element.

2.4 Links und Bilder

Links sind das Herzstück des Web. Das „Hyper“ in HyperText bedeutet, dass Texte miteinander verknüpft sind. Links werden mit dem <a>-Tag erstellt:

<!-- Link zu einer externen Seite -->
<a href="https://www.uni-graz.at">Universität Graz</a>

<!-- Link zu einer lokalen Seite -->
<a href="seite2.html">Zur nächsten Seite</a>

<!-- Link zu einem Abschnitt auf derselben Seite -->
<a href="#kapitel2">Zum zweiten Kapitel springen</a>

<!-- Link, der in neuem Tab öffnet -->
<a href="https://www.uni-graz.at" target="_blank">
  Uni Graz (neuer Tab)
</a>

Das href-Attribut (Hypertext Reference) gibt an, wohin der Link führt.

Bilder werden mit dem <img>-Tag eingebunden. Es ist ein selbstschließendes Tag (kein Endtag):

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

<!-- Bild mit fester Breite -->
<img src="schuchardt.jpg"
     alt="Porträt von Hugo Schuchardt"
     width="400">

<!-- Bild aus dem Internet -->
<img src="https://example.com/bild.jpg"
     alt="Beschreibung des Bildes">

src (Source) — der Pfad zum Bild
alt (Alternative) — eine Textbeschreibung des Bildes

Barrierefreiheit: Das alt-Attribut

Das alt-Attribut ist nicht optional! Es wird von Screenreadern vorgelesen (für blinde oder sehbeeinträchtigte Nutzer:innen) und angezeigt, wenn ein Bild nicht laden kann. Beschreiben Sie den Inhalt des Bildes, nicht sein Aussehen. Statt „Bild“ schreiben Sie z.B. „Porträtfoto von Hugo Schuchardt, ca. 1900“.

2.5 Listen

HTML kennt zwei Arten von Listen:

Ungeordnete Listen (Aufzählungen mit Punkten):

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

Geordnete Listen (nummeriert):

<ol>
  <li>HTML-Grundstruktur erstellen</li>
  <li>Überschriften und Absätze hinzufügen</li>
  <li>Links und Bilder einfügen</li>
  <li>Im Browser testen</li>
</ol>

Listen können auch verschachtelt werden:

<ul>
  <li>Sprachwissenschaft
    <ul>
      <li>Romanistik</li>
      <li>Kreolistik</li>
    </ul>
  </li>
  <li>Andere Gebiete
    <ul>
      <li>Baskologie</li>
      <li>Ethnolinguistik</li>
    </ul>
  </li>
</ul>

Ausprobieren

Erstellen Sie eine HTML-Seite mit einer geordneten Liste Ihrer drei Lieblingsbücher und einer ungeordneten Liste Ihrer Hobbys. Öffnen Sie die Seite im Browser und schauen Sie sich den Unterschied an.

2.6 Weitere nützliche Elemente

Einige weitere HTML-Elemente, die Sie kennen sollten:

Textformatierung:

<strong>Fetter Text</strong> — wichtiger Inhalt
<em>Kursiver Text</em> — betonter Inhalt
<mark>Hervorgehobener Text</mark> — markiert
<code>Codebeispiel</code> — Inline-Code

Trennlinie und Zeilenumbruch:

<hr> — Horizontale Trennlinie
<br> — Zeilenumbruch (sparsam verwenden!)

Codeblöcke:

<pre><code>
  Vorformatierter Text
  Leerzeichen und Umbrüche
  werden beibehalten
</code></pre>

Zitate:

<blockquote>
  <p>Die Sprache ist kein Werk, sondern eine Tätigkeit.</p>
  <cite>Wilhelm von Humboldt</cite>
</blockquote>

LLM-Tipp

Wenn Sie nicht sicher sind, welches HTML-Element für einen bestimmten Zweck das richtige ist, fragen Sie ein LLM! Ein guter Prompt wäre: „Welches HTML-Element sollte ich verwenden, um ein längeres Zitat aus einem Buch auszuzeichnen? Erkläre den Unterschied zwischen blockquote und q.“

3. Semantisches HTML

3.1 Warum Semantik wichtig ist

Semantisch bedeutet „bedeutungstragend“. Semantisches HTML verwendet Tags, die nicht nur aussehen, sondern auch aussagen, was der Inhalt ist.

Vergleichen Sie diese zwei Varianten:

<!-- Nicht-semantisch: -->
<div>
  <div>Meine Website</div>
  <div>
    <div>Ein Artikel</div>
    <div>Hier steht Text...</div>
  </div>
  <div>&copy; 2026</div>
</div>

<!-- Semantisch: -->
<header>
  <h1>Meine Website</h1>
</header>
<main>
  <article>
    <h2>Ein Artikel</h2>
    <p>Hier steht Text...</p>
  </article>
</main>
<footer>
  <p>&copy; 2026</p>
</footer>

Beide Varianten sehen im Browser ähnlich aus, aber die semantische Version hat wichtige Vorteile:

Barrierefreiheit: Screenreader können die Seitenstruktur erkennen und Nutzer:innen direkt zum Hauptinhalt oder zur Navigation springen lassen
SEO: Suchmaschinen verstehen die Seite besser und können sie relevanter einordnen
Wartbarkeit: Andere Entwickler:innen (und Ihr zukünftiges Ich!) verstehen den Code schneller
Maschinenlesbarkeit: Automatisierte Systeme können die Struktur auswerten

Schlüsselkonzept: Bedeutung vor Aussehen

Wählen Sie HTML-Elemente nach ihrer Bedeutung, nicht nach ihrem Aussehen. Verwenden Sie <strong> nicht, weil Sie fetten Text wollen, sondern weil der Text wichtig ist. Das Aussehen bestimmen wir später mit CSS.

3.2 Die wichtigsten semantischen Elemente

<header> — Kopfbereich einer Seite oder eines Abschnitts. Enthält typischerweise Logo, Überschrift, Navigation.
<nav> — Navigationsmenü. Enthält Links zu anderen Seiten oder Abschnitten.
<main> — Der Hauptinhalt der Seite. Nur einmal pro Seite verwenden!
<article> — Ein eigenständiger, in sich abgeschlossener Inhalt: ein Blogartikel, ein Nachrichtenbeitrag, ein Forumsbeitrag.
<section> — Ein thematischer Abschnitt, typischerweise mit einer eigenen Überschrift.
<aside> — Ergänzender Inhalt: Seitenleiste, weiterführende Links, Randbemerkungen.
<footer> — Fußbereich einer Seite oder eines Abschnitts. Enthält typischerweise Copyright, Impressum, Kontakt.

3.3 Eine typische Seitenstruktur

<body>
  <header>
    <h1>Meine DH-Website</h1>
    <nav>
      <a href="index.html">Start</a>
      <a href="projekte.html">Projekte</a>
      <a href="kontakt.html">Kontakt</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Mein erstes Projekt</h2>
      <section>
        <h3>Einleitung</h3>
        <p>Dieses Projekt befasst sich mit...</p>
      </section>
      <section>
        <h3>Methodik</h3>
        <p>Wir verwenden...</p>
      </section>
    </article>
  </main>

  <aside>
    <h3>Weiterführende Links</h3>
    <ul>
      <li><a href="...">TEI Guidelines</a></li>
      <li><a href="...">W3C HTML Standard</a></li>
    </ul>
  </aside>

  <footer>
    <p>&copy; 2026 Mein Name | Universität Graz</p>
  </footer>
</body>

Ausprobieren

Erstellen Sie eine HTML-Seite mit der oben gezeigten Struktur. Füllen Sie die Abschnitte mit eigenem Inhalt. Schauen Sie sich die Seite im Browser an. Öffnen Sie die DevTools und inspizieren Sie die Elemente — sehen Sie die semantische Struktur?

4. HTML und die Digital Humanities

4.1 Was ist TEI?

Die Text Encoding Initiative (TEI) ist ein internationaler Standard für die digitale Repräsentation von Texten. TEI basiert auf XML (eXtensible Markup Language) und wird in den Geisteswissenschaften sehr häufig verwendet, besonders für:

Digitale Editionen historischer Texte
Briefeditionen (z.B. das Hugo Schuchardt Archiv in Graz)
Manuskriptbeschreibungen
Textkorpora für linguistische Analysen

TEI und HTML teilen ein fundamentales Prinzip: Beide sind Auszeichnungssprachen, die Text mit zusätzlicher Struktur und Bedeutung versehen. Der Unterschied liegt im Zweck:

HTML: Texte für die Anzeige im Webbrowser strukturieren
TEI: Texte für die wissenschaftliche Analyse und Langzeitarchivierung kodieren

4.2 HTML vs. TEI: Ein Vergleich

Schauen wir uns denselben Brief in HTML und TEI an:

In HTML:

<article>
  <header>
    <h1>Brief von Hugo Schuchardt an Karl Vossler</h1>
    <p>Graz, 3. Jänner 1904</p>
  </header>
  <p>Verehrter Herr Kollege!</p>
  <p>Empfangen Sie meinen herzlichsten Dank
     für Ihre freundliche Zusendung...</p>
  <footer>
    <p>Mit besten Grüßen</p>
    <p>Ihr Hugo Schuchardt</p>
  </footer>
</article>

In TEI-XML:

<TEI>
  <teiHeader>
    <fileDesc>
      <titleStmt>
        <title>Brief von Hugo Schuchardt
          an Karl Vossler</title>
      </titleStmt>
    </fileDesc>
    <correspDesc>
      <correspAction type="sent">
        <persName>Hugo Schuchardt</persName>
        <placeName>Graz</placeName>
        <date when="1904-01-03">3. Jänner 1904</date>
      </correspAction>
      <correspAction type="received">
        <persName>Karl Vossler</persName>
      </correspAction>
    </correspDesc>
  </teiHeader>
  <text>
    <body>
      <opener>
        <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>

Beachten Sie: TEI kodiert viel mehr semantische Details: Wer hat den Brief geschickt? An wen? Wann? Von wo? Diese Informationen sind maschinenlesbar und können automatisch ausgewertet werden. HTML hingegen konzentriert sich auf die Darstellung im Browser.

Warum ist das für uns relevant?

In dieser LV lernen Sie HTML für das Web. Aber das Grundprinzip — Text mit Tags auszeichnen, hierarchische Strukturen, Attribute — ist dasselbe wie in TEI. Wenn Sie später digitale Editionen oder DH-Projekte im Web präsentieren wollen, brauchen Sie beides: TEI für die Daten und HTML/CSS/JS für die Darstellung.

5. Agentic Coding: Einführung

5.1 Was ist ein Large Language Model?

Ein Large Language Model (LLM) ist ein KI-System, das auf riesigen Mengen von Text trainiert wurde. Um zu verstehen, wie es funktioniert, müssen wir einige Grundbegriffe klären:

Tokens:

LLMs verarbeiten Text nicht Buchstabe für Buchstabe oder Wort für Wort, sondern in sogenannten Tokens. Ein Token ist eine Einheit, die ein ganzes Wort, ein Teilwort oder ein Satzzeichen sein kann. Zum Beispiel:

Eingabe: "Der Sprachwissenschaftler arbeitete in Graz."
Tokens:  ["Der", " Sprach", "wissenschaft", "ler",
          " arbeitete", " in", " Graz", "."]

Die Tokenisierung variiert je nach Modell. Längere, häufige Wörter werden oft als ein Token behandelt, seltene Wörter werden in Teile zerlegt.

Training:

Ein LLM wird mit Milliarden von Textdokumenten trainiert: Bücher, Webseiten, wissenschaftliche Artikel, Programmcode und vieles mehr. Beim Training lernt das Modell statistische Muster: Welches Wort (Token) kommt wahrscheinlich als nächstes?

Prompts:

Ein Prompt ist Ihre Eingabe an das LLM — Ihre Frage oder Anweisung. Die Qualität des Ergebnisses hängt stark von der Qualität des Prompts ab. Das gezielte Formulieren von Prompts nennt man Prompt Engineering.

Schlüsselkonzept: LLMs „verstehen“ nicht

Ein LLM erkennt und reproduziert Muster. Es „versteht“ den Inhalt nicht so wie ein Mensch. Es kann überzeugende, aber falsche Antworten geben (sog. „Halluzinationen“). Deshalb ist das Prüfen der Ergebnisse so wichtig!

5.2 Der Agentic Coding Workflow

In dieser Lehrveranstaltung verwenden wir einen strukturierten Workflow für die Arbeit mit LLMs als Coding-Assistenten:

Beschreiben: Formulieren Sie einen klaren, spezifischen Prompt. Was soll erstellt werden? Welche Elemente? Welche Struktur?
Generieren: Senden Sie den Prompt an das LLM. Lesen Sie die Antwort aufmerksam durch. Versuchen Sie, den generierten Code zu verstehen.
Prüfen: Kopieren Sie den Code in Ihren Editor, speichern Sie die Datei und öffnen Sie sie im Browser. Funktioniert alles? Sieht es richtig aus? Prüfen Sie auch die DevTools auf Fehler.
Iterieren: Was muss geändert werden? Formulieren Sie einen neuen Prompt, der die Änderungen beschreibt. Wiederholen Sie den Zyklus.

Praxisbeispiel: Schritt für Schritt

Schritt 1 — Beschreiben:

Erstelle eine HTML5-Seite über den Linguisten Hugo Schuchardt.
Die Seite soll auf Deutsch sein und enthalten:
- Eine Überschrift mit seinem Namen
- Einen Absatz über sein Leben (1842-1927, Professor in Graz)
- Eine ungeordnete Liste mit drei Forschungsgebieten
- Einen Link zum Hugo Schuchardt Archiv
  (https://schuchardt.uni-graz.at)
Verwende semantische HTML-Elemente.

Schritt 2 — Generieren: Das LLM erstellt den Code. Sie lesen ihn durch.

Schritt 3 — Prüfen: Code in VS Code einfügen, speichern, mit Live Server öffnen. Sieht gut aus, aber das alt-Attribut fehlt beim Bild.

Schritt 4 — Iterieren:

Der Code ist gut, aber bitte füge noch ein Bild hinzu
mit einem passenden alt-Attribut. Außerdem fehlt der
viewport-Meta-Tag im head-Bereich.

5.3 Prompt-Techniken für Code

Gute Prompts sind der Schlüssel zu guten Ergebnissen. Hier sind bewährte Techniken:

1. Seien Sie spezifisch:

Schlecht: "Mach eine Webseite."
Besser:  "Erstelle eine HTML5-Seite mit einem header,
          einem main-Bereich mit zwei Absaetzen und
          einem footer mit Copyright-Hinweis."

2. Geben Sie Kontext:

Schlecht: "Füge eine Liste hinzu."
Besser:  "Füge nach dem zweiten Absatz eine ungeordnete
          Liste mit den vier Forschungsgebieten hinzu:
          Romanistik, Kreolistik, Baskologie und
          Allgemeine Sprachwissenschaft."

3. Definieren Sie das Format:

"Erstelle den Code als vollständiges HTML5-Dokument.
Verwende Einrückung mit 2 Leerzeichen.
Kommentiere die einzelnen Abschnitte."

4. Fragen Sie nach Erklärungen:

"Erkläre mir Zeile für Zeile, was der Code tut.
Besonders das meta-viewport-Tag verstehe ich nicht."

5. Iterieren Sie gezielt:

"Gut, der Code funktioniert. Bitte ändere folgendes:
1. Ersetze die div-Elemente durch semantische Tags
2. Füge eine Navigation mit drei Links hinzu
3. Setze die Sprache im html-Tag auf 'de'"

Goldene Regel

Je mehr Sie über HTML wissen, desto bessere Prompts können Sie schreiben und desto besser können Sie die Ergebnisse bewerten. Das ist der Kern von „Informed Vibe Coding“: Verstehen, was Sie einfordern, und prüfen, was Sie zurückbekommen.

6. Erste Schritte mit dem Code-Editor

6.1 VS Code installieren

Visual Studio Code (VS Code) ist ein kostenloser, quelloffener Code-Editor von Microsoft. Er ist der beliebteste Editor für Webentwicklung und bietet viele nützliche Funktionen.

Installation:

Gehen Sie zu https://code.visualstudio.com
Laden Sie die Version für Ihr Betriebssystem herunter (Windows, Mac, Linux)
Installieren Sie das Programm (Standard-Einstellungen sind in Ordnung)
Öffnen Sie VS Code

Wichtige Bereiche in VS Code:

Editor: Der Hauptbereich, in dem Sie Code schreiben
Explorer: Links — zeigt Ihre Dateien und Ordner
Terminal: Unten — eine Kommandozeile (brauchen wir später)
Extensions: Links — Erweiterungen installieren

Empfohlene Einstellungen:

Auto Save aktivieren: File > Auto Save
Word Wrap aktivieren: View > Word Wrap (damit langer Code nicht aus dem Bild scrollt)

Ausprobieren

Öffnen Sie VS Code. Erstellen Sie einen neuen Ordner auf Ihrem Desktop namens „webprojekt“. Öffnen Sie diesen Ordner in VS Code (File > Open Folder). Erstellen Sie darin eine neue Datei namens index.html. Tippen Sie ! und drücken Sie Tab — VS Code generiert automatisch eine HTML-Grundstruktur!

6.2 Live Server Extension

Die Live Server Extension startet einen lokalen Webserver und aktualisiert die Seite im Browser automatisch, wenn Sie den Code ändern. Das ist extrem praktisch beim Entwickeln!

Installation:

Klicken Sie in VS Code auf das Extensions-Icon in der linken Seitenleiste (das Symbol mit den vier Quadraten)
Suchen Sie nach „Live Server“ (von Ritwick Dey)
Klicken Sie auf „Install“

Verwendung:

Öffnen Sie eine HTML-Datei in VS Code
Rechtsklick im Editor → „Open with Live Server“
Oder: Klicken Sie auf „Go Live“ in der Statusleiste unten
Ihr Browser öffnet sich automatisch mit Ihrer Seite

Ab jetzt wird jede Änderung, die Sie speichern, sofort im Browser sichtbar. Sie müssen die Seite nicht manuell neu laden!

Tipp: Bildschirm teilen

Arbeiten Sie am besten mit geteiltem Bildschirm: VS Code auf der einen Hälfte, Browser auf der anderen. So sehen Sie sofort, wie sich Ihre Änderungen auswirken. Auf Windows: Ziehen Sie das VS-Code-Fenster an den linken Bildschirmrand und den Browser an den rechten.

6.3 Browser DevTools

Die Developer Tools (DevTools) sind in jedem modernen Browser eingebaut. Sie ermöglichen es, den HTML-Code, das CSS und JavaScript einer Seite zu inspizieren und zu testen.

Öffnen der DevTools:

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

Die wichtigsten Tabs:

Elements: Zeigt den HTML-Code der Seite als Baumstruktur. Sie können Elemente auswählen, ihre Eigenschaften sehen und sie live ändern.
Styles: Zeigt die CSS-Regeln für das ausgewählte Element. Sie können Werte ändern und das Ergebnis sofort sehen.
Console: Zeigt Fehlermeldungen an. Später werden wir hier auch JavaScript testen.
Network: Zeigt alle HTTP-Requests, die der Browser macht. Hier sehen Sie das Client-Server-Modell in Aktion!

Wichtig

Änderungen in den DevTools sind temporär! Wenn Sie die Seite neu laden, sind alle Änderungen weg. Das macht die DevTools perfekt zum Experimentieren: Sie können nichts kaputt machen. Wenn Ihnen eine Änderung gefällt, übernehmen Sie sie in Ihren Code in VS Code.

Ausprobieren

Öffnen Sie die Webseite der Uni Graz (www.uni-graz.at) und öffnen Sie die DevTools (F12). Klicken Sie auf das Element-Auswahl-Tool (oben links in den DevTools, ein Pfeil auf einem Rechteck) und bewegen Sie die Maus über die Webseite. Sie sehen, wie die HTML-Elemente hervorgehoben werden. Klicken Sie auf ein Element — im Elements-Tab sehen Sie den zugehörigen HTML-Code. Versuchen Sie, den Text eines Elements zu ändern!

Zusammenfassung

In dieser Einheit haben wir die Grundlagen gelegt:

Das Internet ist ein Netzwerk; das Web ist ein Dienst darauf
Browser (Client) und Server kommunizieren über HTTP
URLs sind die Adressen von Ressourcen im Web
HTML ist eine Auszeichnungssprache für Webseiten
Wichtige Tags: h1-h6, p, a, img, ul/ol/li
Semantische Elemente geben dem Inhalt Bedeutung
HTML und TEI-XML basieren auf demselben Grundprinzip
LLMs sind mächtige Coding-Assistenten, die wir gezielt einsetzen
VS Code mit Live Server und die Browser DevTools sind unsere Werkzeuge

In der nächsten Einheit lernen wir CSS kennen — die Sprache, mit der wir unsere HTML-Seiten gestalten und styled!