Übungen — Einheit 03: Vertiefung HTML/CSS

Sammlungs-Grid

Erstellen Sie ein responsives CSS-Grid-Layout für Objekte aus dem Kriminalmuseum. Die HTML-Struktur mit 6 Karten ist bereits vorgegeben. Ihre Aufgabe: Schreiben Sie das CSS, um die Karten in einem 3-Spalten-Grid anzuordnen.

Anforderungen

Verwenden Sie display: grid auf dem Container .sammlung-grid
3 Spalten mit grid-template-columns (verwenden Sie repeat() und 1fr)
Abstand von 1.5rem zwischen den Karten (gap)
Karten mit Hintergrundfarbe #f9f9f4, Rahmen und abgerundeten Ecken
Optional: Hover-Effekt mit Schatten und leichter Verschiebung nach oben
Optional: Responsive Anpassung auf 1 Spalte bei Bildschirmbreite unter 768px

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sammlungs-Grid</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: Georgia, serif; padding: 2rem; background: #fffff8; }
    h1 { margin-bottom: 1.5rem; color: #1a5276; }

    /* === IHRE CSS-REGELN HIER === */

    .sammlung-grid {
      /* Aufgabe: display: grid aktivieren */
      /* Aufgabe: 3 Spalten mit repeat() und 1fr */
      /* Aufgabe: gap: 1.5rem */
    }

    .objekt-karte {
      /* Aufgabe: Hintergrund #f9f9f4 */
      /* Aufgabe: Rahmen 1px solid #ddd */
      /* Aufgabe: border-radius: 8px */
      /* Aufgabe: padding: 1.5rem */
    }

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

    .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;
    }

    /* Optional: Hover-Effekt */
    /* .objekt-karte:hover { ... } */

    /* Optional: Responsive Anpassung */
    /* @media (max-width: 768px) { ... } */
  </style>
</head>
<body>

  <h1>Kriminalmuseum: Sammlungsobjekte</h1>

  <div class="sammlung-grid">

    <article class="objekt-karte">
      <h3>Richtbeil</h3>
      <div class="jahr">1798</div>
      <p>Strafvollzug im 18. Jahrhundert. Dieses Beil wurde bei oeffentlichen Hinrichtungen in der Steiermark verwendet.</p>
    </article>

    <article class="objekt-karte">
      <h3>Schandmaske</h3>
      <div class="jahr">ca. 1650</div>
      <p>Ehrenstrafe fuer oeffentliche Vergehen. Die Maske wurde Verurteilten zur Demueigung aufgesetzt.</p>
    </article>

    <article class="objekt-karte">
      <h3>Folterzange</h3>
      <div class="jahr">um 1720</div>
      <p>Instrument der peinlichen Befragung. Wurde bei Gerichtsverfahren als Mittel der Wahrheitsfindung eingesetzt.</p>
    </article>

    <article class="objekt-karte">
      <h3>Halseisen</h3>
      <div class="jahr">17. Jahrhundert</div>
      <p>Vorrichtung zur oeffentlichen Zurschaustellung von Straftaetern am Pranger.</p>
    </article>

    <article class="objekt-karte">
      <h3>Gerichtsschwert</h3>
      <div class="jahr">1756</div>
      <p>Zeremoniales Schwert des Scharfrichters. Traegt die Inschrift des Grazer Kriminalgerichts.</p>
    </article>

    <article class="objekt-karte">
      <h3>Brandmarkeisen</h3>
      <div class="jahr">um 1680</div>
      <p>Instrument zur koerperlichen Kennzeichnung von Verbrechern. Wurde bis ins 18. Jahrhundert verwendet.</p>
    </article>

  </div>

</body>
</html>

Vorschau

Tipp

Beginnen Sie mit den drei wichtigsten Zeilen: display: grid, grid-template-columns: repeat(3, 1fr) und gap: 1.5rem. Danach stylen Sie die Karten und fügen optionale Effekte hinzu.

Metadaten-Tabelle

Erstellen Sie eine gestylte HTML-Tabelle aus den folgenden Korrespondenz-Metadaten. Die Rohdaten sind als HTML-Kommentare im Starter-Code enthalten. Ihre Aufgabe: Erstellen Sie die Tabellenstruktur (<table>, <thead>, <tbody>, etc.) und schreiben Sie das CSS für ein ansprechendes Erscheinungsbild.

Anforderungen

Verwenden Sie <caption>, <thead> und <tbody>
Spaltenüberschriften mit <th scope="col">
CSS: border-collapse: collapse
Gestreifte Zeilen mit :nth-child(even)
Hover-Effekt auf den Tabellenzeilen
Farbiger Tabellenkopf

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Metadaten-Tabelle</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, sans-serif; padding: 2rem; background: #fffff8; }
    h1 { margin-bottom: 1.5rem; color: #1a5276; font-family: Georgia, serif; }

    /* === IHRE CSS-REGELN HIER === */

    /* Tabelle: width 100%, border-collapse */

    /* Kopfzellen: Hintergrund #1a5276, weisse Schrift */

    /* Alle Zellen: padding, border-bottom */

    /* Gestreifte Zeilen: :nth-child(even) */

    /* Hover-Effekt auf tbody tr */

    /* Caption: Stil fuer die Tabellenbeschriftung */
  </style>
</head>
<body>

  <h1>Korrespondenz-Metadaten</h1>

  <!--
    ROHDATEN - Erstellen Sie daraus eine HTML-Tabelle:

    Spalten: Absender | Empfaenger | Datum | Ort | Thema

    Zeile 1: Hugo Schuchardt | Graziadio Ascoli | 15.01.1882 | Graz | Kreolische Sprachen
    Zeile 2: Gustav Meyer | Hugo Schuchardt | 03.05.1885 | Graz | Albanische Grammatik
    Zeile 3: Hugo Schuchardt | Jan Baudouin de Courtenay | 22.11.1890 | Graz | Sprachkontakt
    Zeile 4: Carolina Michaelis de Vasconcellos | Hugo Schuchardt | 07.03.1895 | Porto | Portugiesische Dialekte
    Zeile 5: Hugo Schuchardt | Adolf Mussafia | 14.09.1901 | Graz | Romanische Wortforschung
  -->

  <!-- Aufgabe: Erstellen Sie hier die Tabelle -->
  <!-- <table> ... </table> -->

</body>
</html>

Vorschau

Tipp

Beginnen Sie mit der HTML-Struktur: <table> mit <caption>, <thead> (eine <tr> mit 5 <th>) und <tbody> (5 <tr> mit je 5 <td>). Dann schreiben Sie das CSS.

Portfolio-Entwurf

Entwerfen Sie das Grundgerüst für Ihr DH-Portfolio. Die Basis-HTML-Struktur mit Header, Navigation, Main und Footer ist vorgegeben. Ihre Aufgaben:

Füllen Sie die Navigation mit sinnvollen Links (z.B. Startseite, Projekt, Über mich)
Gestalten Sie den Header mit Flexbox (Logo links, Navigation rechts)
Erstellen Sie einen Inhaltsbereich mit CSS Grid (z.B. Karten für Projekte)
Passen Sie Farben, Schriften und Abstände an Ihre Vorstellungen an

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mein DH-Portfolio</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, sans-serif;
      background: #fffff8;
      color: #222;
      line-height: 1.6;
    }

    /* === HEADER === */
    .site-header {
      /* Aufgabe: Flexbox Layout */
      /* Logo links, Navigation rechts */
      padding: 1rem 2rem;
      background: #1a5276;
      color: white;
    }

    .site-header a {
      color: white;
      text-decoration: none;
    }

    .logo {
      font-size: 1.25rem;
      font-weight: bold;
      font-family: Georgia, serif;
    }

    .nav-links {
      list-style: none;
      /* Aufgabe: Flexbox fuer die Links */
    }

    .nav-links a:hover {
      text-decoration: underline;
    }

    /* === HERO-BEREICH === */
    .hero {
      text-align: center;
      padding: 4rem 2rem;
    }

    .hero h1 {
      font-family: Georgia, serif;
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }

    .hero p {
      font-size: 1.2rem;
      color: #666;
      max-width: 50ch;
      margin: 0 auto;
    }

    /* === PROJEKT-KARTEN === */
    .projekte {
      max-width: 1100px;
      margin: 0 auto;
      padding: 2rem;
    }

    .projekte h2 {
      font-family: Georgia, serif;
      margin-bottom: 1.5rem;
    }

    .projekt-grid {
      /* Aufgabe: CSS Grid Layout */
      /* 3 Spalten, responsive */
    }

    .projekt-karte {
      /* Aufgabe: Karten-Styling */
      /* Hintergrund, Rahmen, Padding, border-radius */
    }

    .projekt-karte h3 {
      color: #1a5276;
      margin-bottom: 0.5rem;
    }

    /* === FOOTER === */
    .site-footer {
      text-align: center;
      padding: 2rem;
      border-top: 1px solid #ddd;
      margin-top: 3rem;
      color: #888;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>

  <header class="site-header">
    <a href="/" class="logo">Mein DH-Portfolio</a>
    <nav>
      <ul class="nav-links">
        <!-- Aufgabe: Navigation ergaenzen -->
        <li><a href="/">Startseite</a></li>
        <li><a href="/projekt">Projekt</a></li>
        <li><a href="/ueber-mich">Ueber mich</a></li>
      </ul>
    </nav>
  </header>

  <section class="hero">
    <h1>Willkommen zu meinem Portfolio</h1>
    <p>
      <!-- Aufgabe: Kurze Beschreibung ergaenzen -->
      Hier praesentiere ich meine Projekte aus dem Bereich Digital Humanities.
    </p>
  </section>

  <section class="projekte">
    <h2>Meine Projekte</h2>
    <div class="projekt-grid">

      <article class="projekt-karte">
        <h3>Projekt 1</h3>
        <p>Beschreibung des ersten Projekts. Aendern Sie diesen Text.</p>
      </article>

      <article class="projekt-karte">
        <h3>Projekt 2</h3>
        <p>Beschreibung des zweiten Projekts. Aendern Sie diesen Text.</p>
      </article>

      <article class="projekt-karte">
        <h3>Projekt 3</h3>
        <p>Beschreibung des dritten Projekts. Aendern Sie diesen Text.</p>
      </article>

    </div>
  </section>

  <footer class="site-footer">
    <p>© 2026 Mein DH-Portfolio — Universitaet Graz</p>
  </footer>

</body>
</html>

Vorschau

Agentic-Coding-Tipp

Versuchen Sie, zuerst Ihre Vorstellung zu beschreiben, bevor Sie mit dem Coden beginnen. Formulieren Sie einen Prompt wie: „Erstelle ein Portfolio-Layout mit Header (Flexbox: Logo links, 3 Nav-Links rechts), Hero-Bereich (zentriert) und einem 3-Spalten-Grid mit Projekt-Karten. Farbe: #1a5276.“

Pitch-Vorbereitung

Diese Übung ist keine Code-Übung, sondern eine strukturierte Textarbeit. Beantworten Sie die folgenden Fragen, um Ihren 3-Minuten-Pitch vorzubereiten. Schreiben Sie Ihre Antworten in ein Textdokument oder direkt in Ihr Notizbuch.

Pitch-Template

1. Projektidee

Was möchten Sie bauen? Beschreiben Sie Ihre Idee in 1–2 Sätzen.

Beispiel: „Ich möchte einen interaktiven Explorer für die Briefkorrespondenz von Hugo Schuchardt bauen, der es ermöglicht, Briefe nach Datum, Absender und Thema zu filtern.“

2. Datenquelle

Welche Daten verwenden Sie? In welchem Format liegen sie vor?

Beispiel: „TEI-XML-Dateien aus dem Hugo-Schuchardt-Archiv, die ich als JSON exportieren werde. Ca. 100 Briefe als Beispieldaten.“

3. Zielgruppe

Für wen ist Ihr Projekt gedacht?

Beispiel: „Sprachwissenschaftler:innen und Historiker:innen, die sich für Schuchardts akademisches Netzwerk interessieren.“

4. Kernfunktionen (2–3 Features)

Was soll Ihre Website können?

Beispiel: „1) Suchmaske mit Filtern (Absender, Datum, Thema). 2) Zeitleisten-Visualisierung. 3) Karte mit Versandorten.“

5. Technischer Ansatz

Welche Technologien planen Sie einzusetzen?

Beispiel: „HTML/CSS/JavaScript. CSS Grid für das Layout, Leaflet.js für die Karte, JSON-Daten mit fetch() laden.“

6. Offene Fragen

Welche Fragen oder Unsicherheiten haben Sie?

Beispiel: „Wie konvertiere ich TEI-XML nach JSON? Ist es realistisch, 14.000 Briefe im Browser zu laden?“

Tipp zur Vorbereitung

Ihr Pitch muss nicht perfekt sein! Es geht darum, eine erste Idee zu formulieren und Feedback von der Gruppe zu bekommen. Sie können Ihre Projektidee später noch ändern und verfeinern. Denken Sie an die DH-Datenbestände, die Sie kennen: Briefe, Sammlungen, Kataloge, Karten, Texte.

Übungen: Vertiefung HTML/CSS

Sammlungs-Grid

Anforderungen

Metadaten-Tabelle

Anforderungen

Portfolio-Entwurf

Pitch-Vorbereitung

1. Projektidee

2. Datenquelle

3. Zielgruppe

4. Kernfunktionen (2–3 Features)

5. Technischer Ansatz

6. Offene Fragen