Vertiefung HTML/CSS

In dieser Einheit vertiefen wir unsere HTML- und CSS-Kenntnisse mit fortgeschrittenen Layout-Techniken. Sie lernen Flexbox und CSS Grid als die beiden zentralen Layout-Systeme moderner Webentwicklung kennen, arbeiten mit HTML-Tabellen und Formularen und erfahren, wie Sie Anforderungen für Agentic Coding präzise formulieren.

1. Flexbox

Flexbox (Flexible Box Layout) ist ein CSS-Layout-Modell, das speziell dafür entwickelt wurde, Elemente in einer Dimension anzuordnen — entweder als Zeile (horizontal) oder als Spalte (vertikal). Es löst viele Probleme, die früher mit Floats und Positionierung mühsam umgesetzt werden mussten.

Flexbox aktivieren

Um Flexbox zu verwenden, setzen Sie display: flex auf das Elternelement (den Container). Alle direkten Kindelemente werden automatisch zu Flex-Items.

.container {
  display: flex;
}

Container-Eigenschaften

Die folgenden Eigenschaften werden auf den Flex-Container angewendet:

flex-direction bestimmt die Richtung der Hauptachse:

flex-direction: row;            /* Standard: horizontal */
flex-direction: row-reverse;    /* horizontal, umgekehrt */
flex-direction: column;         /* vertikal */
flex-direction: column-reverse; /* vertikal, umgekehrt */

justify-content verteilt den Platz entlang der Hauptachse:

justify-content: flex-start;    /* Alle am Anfang (Standard) */
justify-content: flex-end;      /* Alle am Ende */
justify-content: center;        /* Zentriert */
justify-content: space-between; /* Gleichmaessig, kein Rand aussen */
justify-content: space-around;  /* Gleichmaessig, halber Rand aussen */
justify-content: space-evenly;  /* Gleichmaessig, gleicher Rand ueberall */

align-items richtet Items entlang der Querachse aus:

align-items: stretch;     /* Items fuellen die volle Hoehe (Standard) */
align-items: flex-start;  /* Am oberen Rand */
align-items: flex-end;    /* Am unteren Rand */
align-items: center;      /* Vertikal zentriert */
align-items: baseline;    /* An der Textlinie ausgerichtet */

flex-wrap bestimmt, ob Items in neue Zeilen umbrechen dürfen:

flex-wrap: nowrap;   /* Kein Umbruch (Standard) */
flex-wrap: wrap;     /* Umbruch in neue Zeilen */
flex-wrap: wrap-reverse; /* Umbruch nach oben */

gap definiert den Abstand zwischen den Items:

gap: 1rem;           /* Gleicher Abstand ueberall */
row-gap: 2rem;       /* Nur Zeilenabstand */
column-gap: 1rem;    /* Nur Spaltenabstand */

Item-Eigenschaften

Die folgenden Eigenschaften werden auf einzelne Flex-Items angewendet:

/* Wie viel soll das Item wachsen? */
flex-grow: 0;    /* Nicht wachsen (Standard) */
flex-grow: 1;    /* Verfuegbaren Platz einnehmen */
flex-grow: 2;    /* Doppelt so viel Platz wie flex-grow: 1 */

/* Darf das Item schrumpfen? */
flex-shrink: 1;  /* Ja (Standard) */
flex-shrink: 0;  /* Nein, feste Groesse behalten */

/* Basisgroesse vor dem Verteilen */
flex-basis: auto;   /* Inhalt bestimmt Groesse (Standard) */
flex-basis: 200px;  /* Feste Basisgroesse */
flex-basis: 30%;    /* Prozentuale Basisgroesse */

/* Kurzschreibweise: grow, shrink, basis */
flex: 1;            /* flex: 1 1 0% */
flex: 0 0 200px;    /* Feste Breite, kein Wachsen/Schrumpfen */

/* Einzelnes Item anders ausrichten */
align-self: center;

/* Reihenfolge aendern (nur visuell!) */
order: -1;   /* Vor den anderen */
order: 2;    /* Nach den anderen */

Praktisches Beispiel: Navigationsleiste

<nav class="hauptnav">
  <a href="/" class="hauptnav__logo">DH-Archiv</a>
  <ul class="hauptnav__links">
    <li><a href="/sammlung">Sammlung</a></li>
    <li><a href="/briefe">Briefe</a></li>
    <li><a href="/suche">Suche</a></li>
    <li><a href="/kontakt">Kontakt</a></li>
  </ul>
</nav>

.hauptnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #1a5276;
}

.hauptnav__logo {
  color: white;
  font-size: 1.25rem;
  font-weight: bold;
  text-decoration: none;
}

.hauptnav__links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.hauptnav__links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background 0.2s;
}

.hauptnav__links a:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

In diesem Beispiel verwenden wir justify-content: space-between, um das Logo links und die Navigation rechts zu platzieren. Die Navigationslinks selbst sind ebenfalls ein Flex-Container mit gap: 1.5rem für gleichmäßige Abstände.

2. CSS Grid

CSS Grid ist ein zweidimensionales Layout-System. Im Gegensatz zu Flexbox können Sie mit Grid Elemente gleichzeitig in Zeilen und Spalten positionieren. Es eignet sich besonders für komplexe Seitenlayouts und Raster-Anordnungen.

Grid-Template-Columns

Mit grid-template-columns definieren Sie die Anzahl und Breite der Spalten:

/* 3 feste Spalten */
grid-template-columns: 200px 400px 200px;

/* 3 gleich breite Spalten mit der fr-Einheit */
grid-template-columns: 1fr 1fr 1fr;

/* Kurzform mit repeat() */
grid-template-columns: repeat(3, 1fr);

/* Mischung: feste Sidebar + flexible Spalten */
grid-template-columns: 250px 1fr 1fr;

Die fr-Einheit

Die Einheit fr (fraction) verteilt den verfügbaren Platz anteilig. 1fr 2fr 1fr bedeutet: Die mittlere Spalte bekommt doppelt so viel Platz wie die äußeren.

/* Mittlere Spalte doppelt so breit */
grid-template-columns: 1fr 2fr 1fr;

/* Sidebar (fest) + Hauptinhalt (flexibel) */
grid-template-columns: 250px 1fr;

Responsive Grid mit auto-fill und auto-fit

Für ein wirklich responsives Grid ohne Media Queries verwenden Sie auto-fill oder auto-fit zusammen mit minmax():

/* So viele Spalten wie reinpassen, min. 280px breit */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

/* auto-fit: Wie auto-fill, aber leere Spalten kollabieren */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

Gap, Rows und Spanning

/* Abstand zwischen Zellen */
gap: 1.5rem;
row-gap: 2rem;
column-gap: 1rem;

/* Zeilen definieren */
grid-template-rows: auto 1fr auto;   /* Header, Content, Footer */

/* Items ueber mehrere Spalten/Zeilen */
.breites-item {
  grid-column: span 2;  /* 2 Spalten breit */
}

.hohes-item {
  grid-row: span 3;     /* 3 Zeilen hoch */
}

/* Exakte Positionierung mit Grid-Lines */
.sidebar {
  grid-column: 1 / 2;   /* Spalte 1 */
  grid-row: 1 / 3;      /* Zeile 1 bis 3 */
}

Praktisches Beispiel: Sammlungs-Galerie

.sammlung-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

.objekt-karte {
  background: #f9f9f4;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.5rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.objekt-karte:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.objekt-karte h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #1a5276;
}

.objekt-karte .jahr {
  font-size: 0.85rem;
  color: #888;
  margin-bottom: 0.75rem;
}

.objekt-karte p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
}

3. Flexbox vs. Grid: Wann was verwenden?

Flexbox und Grid sind keine Konkurrenten — sie ergänzen sich. Die Faustregel:

4. HTML-Tabellen

HTML-Tabellen dienen zur Darstellung tabellarischer Daten — also Informationen, die logisch in Zeilen und Spalten organisiert sind. In den Digital Humanities begegnen uns Tabellen häufig: Metadaten-Listen, Korrespondenz-Übersichten, Katalogdaten, Konkordanzen.

Grundstruktur

<table>
  <caption>Beschreibung der Tabelle</caption>
  <thead>
    <tr>
      <th scope="col">Spalte 1</th>
      <th scope="col">Spalte 2</th>
      <th scope="col">Spalte 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Daten 1</td>
      <td>Daten 2</td>
      <td>Daten 3</td>
    </tr>
  </tbody>
</table>

Tabellen-Elemente im Detail

• <table> — Der Tabellen-Container
• <caption> — Beschriftung/Titel der Tabelle (für Barrierefreiheit wichtig)
• <thead> — Tabellenkopf mit Spaltenüberschriften
• <tbody> — Tabellenkörper mit den Datenzeilen
• <tfoot> — Tabellenfuß (für Summen, Zusammenfassungen)
• <tr> — Tabellenzeile (Table Row)
• <th> — Kopfzelle (Table Header) — fett und zentriert
• <td> — Datenzelle (Table Data)

Barrierefreiheit mit scope

Das scope-Attribut auf <th> teilt Screenreadern mit, ob eine Kopfzelle für eine Spalte (scope="col") oder eine Zeile (scope="row") gilt:

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Rolle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Hugo Schuchardt</th>
      <td>Absender</td>
    </tr>
    <tr>
      <th scope="row">Wilhelm Meyer-Lübke</th>
      <td>Empfänger</td>
    </tr>
  </tbody>
</table>

Praktisches Beispiel: Korrespondenz-Metadaten

<table class="metadaten-tabelle">
  <caption>Ausgewählte Briefe der Schuchardt-Korrespondenz</caption>
  <thead>
    <tr>
      <th scope="col">Nr.</th>
      <th scope="col">Datum</th>
      <th scope="col">Absender</th>
      <th scope="col">Empfänger</th>
      <th scope="col">Ort</th>
      <th scope="col">Thema</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>15.01.1882</td>
      <td>Hugo Schuchardt</td>
      <td>Graziadio Ascoli</td>
      <td>Graz</td>
      <td>Kreolische Sprachen</td>
    </tr>
    <tr>
      <td>002</td>
      <td>03.05.1885</td>
      <td>Gustav Meyer</td>
      <td>Hugo Schuchardt</td>
      <td>Graz</td>
      <td>Albanische Grammatik</td>
    </tr>
    <tr>
      <td>003</td>
      <td>22.11.1890</td>
      <td>Hugo Schuchardt</td>
      <td>Jan Baudouin de Courtenay</td>
      <td>Graz</td>
      <td>Sprachkontakt</td>
    </tr>
    <tr>
      <td>004</td>
      <td>07.03.1895</td>
      <td>Carolina Michaëlis de Vasconcellos</td>
      <td>Hugo Schuchardt</td>
      <td>Porto</td>
      <td>Portugiesische Dialekte</td>
    </tr>
    <tr>
      <td>005</td>
      <td>14.09.1901</td>
      <td>Hugo Schuchardt</td>
      <td>Adolf Mussafia</td>
      <td>Graz</td>
      <td>Romanische Wortforschung</td>
    </tr>
  </tbody>
</table>

5. Tabellen-Styling

Ohne CSS sehen HTML-Tabellen sehr schlicht aus. Mit wenigen Zeilen CSS können Sie sie deutlich lesbarer und ansprechender gestalten.

Grundlegendes Styling

/* Raender zusammenfassen statt doppelter Linien */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

/* Innenabstand und untere Linie */
th, td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

/* Kopfzeile hervorheben */
thead th {
  background: #1a5276;
  color: white;
  font-weight: 600;
  position: sticky;
  top: 0;
}

Gestreifte Zeilen (Zebra-Muster)

Alternierend eingefärbte Zeilen verbessern die Lesbarkeit bei langen Tabellen:

tbody tr:nth-child(even) {
  background: #f5f5f0;
}

Hover-Effekt

tbody tr:hover {
  background: #eaf2f8;
}

Responsive Tabellen

Breite Tabellen können auf schmalen Bildschirmen problematisch sein. Eine einfache Lösung ist horizontales Scrollen:

.tabellen-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* In HTML: */
<div class="tabellen-container">
  <table>...</table>
</div>

Tabellenbeschriftung

caption {
  caption-side: top;
  font-weight: bold;
  font-size: 1rem;
  text-align: left;
  margin-bottom: 0.75rem;
  color: #666;
}

6. HTML-Formulare

Formulare sind die wichtigste Möglichkeit für Benutzer:innen, Daten an eine Website zu übermitteln. In DH-Projekten kommen Formulare z.B. als Suchmasken, Metadaten-Eingabeformulare oder Kontaktformulare zum Einsatz.

Das <form>-Element

<form action="/api/suche" method="GET">
  <!-- Formularelemente hier -->
</form>

action gibt an, wohin die Daten geschickt werden. method bestimmt die HTTP-Methode (GET für Abfragen, POST für Datenübermittlung).

Input-Typen

<!-- Textfeld -->
<input type="text" name="titel" placeholder="Titel eingeben">

<!-- E-Mail (mit eingebauter Validierung) -->
<input type="email" name="email" placeholder="name@beispiel.at">

<!-- Zahl -->
<input type="number" name="jahr" min="1400" max="2026" step="1">

<!-- Datum -->
<input type="date" name="datum">

<!-- Passwort (verdeckte Eingabe) -->
<input type="password" name="passwort">

<!-- Suchfeld -->
<input type="search" name="suche" placeholder="Suchen...">

<!-- URL -->
<input type="url" name="website" placeholder="https://...">

<!-- Farbe -->
<input type="color" name="farbe" value="#1a5276">

<!-- Verstecktes Feld (fuer technische Daten) -->
<input type="hidden" name="sammlung_id" value="42">

Labels — unverzichtbar für Barrierefreiheit

Jedes Eingabefeld braucht ein <label>. Es gibt zwei Möglichkeiten:

<!-- Variante 1: Explizite Verknüpfung mit for/id -->
<label for="titel">Titel:</label>
<input type="text" id="titel" name="titel">

<!-- Variante 2: Implizit (Label umschliesst Input) -->
<label>
  Titel:
  <input type="text" name="titel">
</label>

Select, Textarea und Button

<!-- Dropdown-Auswahl -->
<label for="sprache">Sprache:</label>
<select id="sprache" name="sprache">
  <option value="">-- Bitte wählen --</option>
  <option value="de">Deutsch</option>
  <option value="fr">Französisch</option>
  <option value="la">Latein</option>
  <option value="it">Italienisch</option>
</select>

<!-- Mehrzeiliges Textfeld -->
<label for="beschreibung">Beschreibung:</label>
<textarea id="beschreibung" name="beschreibung"
          rows="5" cols="40"
          placeholder="Beschreiben Sie das Objekt..."></textarea>

<!-- Buttons -->
<button type="submit">Absenden</button>
<button type="reset">Zurücksetzen</button>
<button type="button">Vorschau</button>

Fieldset und Legend — Gruppierung

Mit <fieldset> und <legend> fassen Sie zusammengehörige Felder optisch und semantisch zusammen:

<form>
  <fieldset>
    <legend>Absender</legend>
    <label for="abs-name">Name:</label>
    <input type="text" id="abs-name" name="absender_name">

    <label for="abs-ort">Ort:</label>
    <input type="text" id="abs-ort" name="absender_ort">
  </fieldset>

  <fieldset>
    <legend>Empfänger</legend>
    <label for="emp-name">Name:</label>
    <input type="text" id="emp-name" name="empfaenger_name">

    <label for="emp-ort">Ort:</label>
    <input type="text" id="emp-ort" name="empfaenger_ort">
  </fieldset>

  <button type="submit">Speichern</button>
</form>

Praktisches Beispiel: Manuskript-Suchformular

<form class="suchformular" action="/suche" method="GET">
  <fieldset>
    <legend>Manuskript-Suche</legend>

    <div class="formular-grid">
      <div class="feld">
        <label for="signatur">Signatur:</label>
        <input type="text" id="signatur" name="signatur"
               placeholder="z.B. HS-0312">
      </div>

      <div class="feld">
        <label for="titel">Titel:</label>
        <input type="text" id="titel" name="titel"
               placeholder="z.B. Kreolische Studien">
      </div>

      <div class="feld">
        <label for="autor">Autor/Absender:</label>
        <input type="text" id="autor" name="autor">
      </div>

      <div class="feld">
        <label for="datum-von">Datum von:</label>
        <input type="date" id="datum-von" name="datum_von">
      </div>

      <div class="feld">
        <label for="datum-bis">Datum bis:</label>
        <input type="date" id="datum-bis" name="datum_bis">
      </div>

      <div class="feld">
        <label for="sprache">Sprache:</label>
        <select id="sprache" name="sprache">
          <option value="">Alle Sprachen</option>
          <option value="de">Deutsch</option>
          <option value="fr">Französisch</option>
          <option value="la">Latein</option>
        </select>
      </div>
    </div>

    <button type="submit">Suchen</button>
    <button type="reset">Zurücksetzen</button>
  </fieldset>
</form>

.formular-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.feld label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.95rem;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: #1a5276;
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 82, 118, 0.15);
}

button[type="submit"] {
  background: #1a5276;
  color: white;
  border: none;
  padding: 0.6rem 1.5rem;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
}

button[type="submit"]:hover {
  background: #2980b9;
}

7. Formular-Validierung mit HTML

HTML5 bietet eingebaute Validierung — ganz ohne JavaScript. Der Browser prüft die Eingaben automatisch und zeigt bei Fehlern verständliche Meldungen an.

Pflichtfelder

<!-- Pflichtfeld: Formular kann nicht ohne Eingabe abgeschickt werden -->
<input type="text" name="titel" required>

Eingabeformat prüfen

<!-- E-Mail-Format wird automatisch validiert -->
<input type="email" name="email" required>

<!-- URL-Format wird automatisch validiert -->
<input type="url" name="website">

<!-- Zahlenwert mit Grenzen -->
<input type="number" name="jahr" min="1400" max="2026">

<!-- Datum-Bereich -->
<input type="date" name="datum" min="1800-01-01" max="1920-12-31">

Muster mit pattern

Für benutzerdefinierte Formate verwenden Sie pattern mit einem regulären Ausdruck. Das title-Attribut beschreibt das erwartete Format:

<!-- Signatur-Format: Zwei Grossbuchstaben, Bindestrich, vier Ziffern -->
<input type="text" name="signatur"
       pattern="[A-Z]{2}-[0-9]{4}"
       title="Format: XX-0000 (z.B. HS-0312)">

<!-- Telefonnummer: +43 gefolgt von Ziffern -->
<input type="tel" name="telefon"
       pattern="\+43[0-9]{6,12}"
       title="Format: +43 gefolgt von 6-12 Ziffern">

Textlänge begrenzen

<!-- Mindest- und Maximallaenge -->
<input type="text" name="schlagwort"
       minlength="2" maxlength="50">

<!-- Textarea mit Maximallaenge -->
<textarea name="notizen" maxlength="500"></textarea>

Validierungs-Feedback stylen

Mit den CSS-Pseudoklassen :valid, :invalid und :required können Sie das Aussehen validierter Felder steuern:

/* Gueltiges Feld: gruener Rand */
input:valid {
  border-color: #27ae60;
}

/* Ungueltiges Feld: roter Rand */
input:invalid {
  border-color: #e74c3c;
}

/* Nur nach Interaktion anzeigen */
input:not(:placeholder-shown):invalid {
  border-color: #e74c3c;
  background: #fdedec;
}

input:not(:placeholder-shown):valid {
  border-color: #27ae60;
  background: #eafaf1;
}

8. Requirement Engineering für Agentic Coding

Beim Agentic Coding beschreiben Sie Ihre Anforderungen in natürlicher Sprache, und ein LLM generiert den Code. Die Qualität des Ergebnisses hängt direkt von der Qualität Ihrer Beschreibung ab. Deshalb ist Requirement Engineering (RE) — die Fähigkeit, Anforderungen präzise zu formulieren — eine Kernkompetenz.

Von der Skizze zum Prompt

Ein bewährter Workflow für Agentic Coding:

Gute vs. schlechte Anforderungen

Prompt-Beispiele