Einführung in HTML – Struktur, Links, Anker & Medien

Arbeitsauftrag: Dieses Modul knüpft an die HTML-Einführung an. Du lernst die Grundstruktur (Überschriften, Absätze, Bereiche), dann Klassen & IDs, anschließend Links & Anker sowie Bilder und weitere HTML-Elemente (Head-Infos, Listen, Tabellen, iFrames). Bearbeite die Abschnitte der Reihe nach. Pro Kapitel: mindestens eine Übung und die KI-Aufgabe. Nutze die interaktiven Codelabs, um deinen HTML-Code direkt zu testen (du brauchst dafür kein CSS/kein JavaScript). Plane insgesamt ca. 180–220 Minuten inkl. Nacharbeit & Feedback.
Nutze das Begleitmaterial: Begleitmaterial (PDF).

Inhalte

• Grundstruktur: Überschriften, Absätze & Bereiche
• Klassen und IDs
• Links & Sprunganker
• Bilder einbinden
• Head-Informationen (Titel, Meta, Favicon)
• Listen (ul/ol/li)
• Tabellen
• iFrames
• HTML-Glossar
• Weiterlesen & Tools
• Lösungs-Modul
• Feedbackmodul

Disclaimer: In diesem Modul kommen freiwillige KI-Aufgaben vor. Wenn du KI nicht nutzen möchtest oder darfst, überspringe sie. Kläre das ggf. vorab mit Erziehungsberechtigten und beachte Datenschutzerklärungen/AGB der Dienste.

Grundstruktur: Überschriften, Absätze & Bereiche

Drei zentrale HTML-Elemente bilden die Basis jeder Seite:

• <h1> … <h6>: Überschriften. h1 ist die wichtigste Überschrift einer Seite (normalerweise gibt es nur eine h1), darunter folgen h2, h3 usw.
• <p>: Absatz für laufenden Text.
• <div>: Bereich/Container, um Inhalte logisch zu gruppieren. (Später kann man Bereiche gestalten – das brauchst du jetzt noch nicht.)

<h1>Mein Seitentitel</h1>
<div>
  <h2>Kapitel 1</h2>
  <p>Ein erklärender Absatz.</p>
</div>

<div>
  <h2>Kapitel 2</h2>
  <p>Noch ein Absatz mit Inhalt.</p>
</div>

Codelab · Grundstruktur

Schreibe nur HTML. Klicke auf In Vorschau ausführen, um das Ergebnis zu sehen.

Klassen (class) & IDs (id)

Mit Klassen und IDs kannst du Elemente benennen:

• class: darf es mehrmals geben (z. B. mehrere Absätze gehören zur „note“-Gruppe).
• id: soll eindeutig sein und pro Seite nur einmal vorkommen (z. B. id="start").

IDs eignen sich auch als Sprungziel für interne Links.

<h1 id="start">Willkommen</h1>
<p class="note">Ein wichtiger Hinweis.</p>

<a href="#start">Nach oben</a>

Codelab · Klassen & IDs

Probiere Klassen/IDs live aus. Schreibe nur HTML.

Links & Sprunganker

Ein Link entsteht mit <a>. Er kann auf eine externe Seite zeigen oder innerhalb derselben Seite zu einer ID springen (Sprunganker).

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Externer Link</a>

<h2 id="ziel">Abschnitt</h2>
<a href="#ziel">Zum Abschnitt springen</a>

• # zeigt auf eine ID derselben Seite (z. B. href="#ziel").
• Sprechende Linktexte (z. B. „Weitere Infos zu Ankern“) sind verständlicher als „hier“.
• Bei externen Links: target="_blank" (neues Tab) + rel="noopener noreferrer" (Sicherheit/Performance).

Interaktive Code-Übung (Codelab – Links & Anker)

Schreibe nur HTML, klicke auf Ausführen und sieh das Ergebnis rechts. Mit Check prüfst du Mindestanforderungen (interne Anker/IDs, externer Link, „Nach oben“).

Bilder einbinden

Bilder fügst du mit <img> ein. Wichtig ist der alt-Text: Er beschreibt das Bild (für Screenreader/als Fallback, wenn das Bild nicht geladen wird).

<img src="bild.jpg" alt="Kurze Beschreibung des Bildinhalts">

Ein Bild kann auch verlinkt werden (z. B. zum Öffnen einer größeren Version):

<a href="bild_gross.jpg">
  <img src="bild_klein.jpg" alt="Beschreibung des Vorschaubildes">
</a>

Head-Informationen (Titel, Meta, Favicon)

Der <head> enthält Metadaten: Zeichensatz, Seite für Mobilgeräte, Titel im Tab und z. B. ein kleines Icon.

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meine Seite</title>
  <link rel="icon" href="/favicon.ico">
  <meta name="description" content="Kurze, treffende Seitenbeschreibung.">
</head>

Codelab · Head-Infos

Listen (ul/ol/li)

Listen ordnen Inhalte: <ul> (aufgezählt, ohne Reihenfolge), <ol> (nummeriert). Einträge stehen in <li>.

<ul>
  <li>Begriff A</li>
  <li>Begriff B</li>
</ul>

<ol>
  <li>Schritt 1</li>
  <li>Schritt 2</li>
</ol>

Codelab · Listen

Tabellen

Tabellen strukturieren Daten rasterförmig. Wichtige Elemente: <table>, <caption>, <thead>, <tbody>, <tr>, <th> (Kopfzellen) und <td> (Datenzellen).

<table>
  <caption>Notenspiegel</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Punkte</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Ali</td><td>12</td></tr>
    <tr><td>Mia</td><td>10</td></tr>
  </tbody>
</table>

Codelab · Tabelle

iFrames

Mit <iframe> bettest du fremde Seiten/Videos ein. Wichtige Attribute: src (Adresse) und title (kurzer Zweck, wichtig für Screenreader).

<iframe 
  src="https://example.org"
  title="Beispiel-Seite"></iframe>

Codelab · iFrame

Lösungs-Modul (interaktiv)

Hier kannst du Musterlösungen einblenden. Nutze sie erst nach eigener Bearbeitung als Vergleich oder zur Selbstkontrolle.