Einstiegs-E-Learning 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>

KI-Aufgabe – Merksätze mit Fehlern (Struktur)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Erstelle 6 Merksätze zu <h1>–<h6>, <p> und <div>. Baue in 3 Merksätzen kleine Fehler ein, die ich selbst korrigiere. Stelle mir die Merksätze nacheinander. Arbeite nur mit meinen Stichworten/Notizen – kein Webzugriff nötig. Frage mich ggf. nach Beispielen.“

Codelab · Grundstruktur

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

Übungen · Grundstruktur

Erstelle eine Mini-Seite: genau eine <h1> und zwei Unterkapitel (<h2>), jeweils mit mindestens einem <p>.
Packe jedes Unterkapitel in einen eigenen <div>-Bereich (als gedankliche Gruppierung).
Beschreibe in 2–3 Sätzen, warum eine klare Überschriften-Hierarchie wichtig ist.

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>

KI-Aufgabe – Wahr/Falsch (class & id)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Erstelle 10 kurze Wahr/Falsch-Aussagen zu HTML-class und id (je 1–2 Sätze). Stelle sie mir nacheinander. Erkläre nach jeder Antwort kurz die Lösung mit einem einfachen HTML-Beispiel. Nutze nur mein Vorwissen/Beispielcode, kein Webzugriff nötig.“

Codelab · Klassen & IDs

Probiere Klassen/IDs live aus. Schreibe nur HTML.

Übungen · Klassen & IDs

Gib der Hauptüberschrift deiner Seite die ID site-title.
Erzeuge zwei Absätze mit der Klasse note.
Baue einen internen Link „Nach oben“ mit <a href="#site-title">.
Erzeuge zusätzlich einen externen Link (z. B. zu Wikipedia). (Hinweis: Öffnen in neuem Tab behandeln wir gleich bei Links.)

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).

KI-Aufgabe – Merksätze mit Fehlern (Anker & Links)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Ich lerne HTML-Links und Sprunganker. Formuliere vier Merksätze zu <a>, internen Ankern (href='#id'), sinnvollen Linktexten und rel='noopener noreferrer'. Drei Merksätze sollen kleine Fehler enthalten, die ich korrigiere. Arbeite nur mit meinem Vorwissen/Beispielen – kein Webzugriff.“

Übungen: Links & Anker

Inspektion: Öffne diese Seite, zeige den Quelltext (Strg/Cmd+U) und notiere alle dir bekannten HTML-Tags.
Sprunganker: Erkläre kurz, wie „Herunterspringen“ zu einem Kapitel und der „Zurück-nach-oben“-Anker funktionieren (id und href="#…").
Externe Links: Beschreibe, wie ein Wikipedia-Link aufgebaut ist. Wann verwendest du target="_blank" und rel="noopener noreferrer"?

KI-Aufgabe – „Wer wird Millionär?“-Quiz (Links)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Stelle mir nacheinander fünf Multiple-Choice-Fragen zu HTML-Links (relative/absolute URLs), internen Ankern (id), target/rel. Agiere als Showmaster und erkläre richtige Lösungen kurz. Nutze nur mein Vorwissen/Beispielcode – kein Webzugriff.“

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“).

KI-Aufgabe – Wahr/Falsch ×10 (Links, vertieft)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Erzeuge 10 Wahr/Falsch-Aussagen zu: sinnvolle Linktexte, interne vs. externe Links, rel-Sicherheit, relative/absolute Pfade. Stelle mir die Aussagen nacheinander; korrigiere und erkläre bei Fehlern kurz. Arbeite nur mit meinen Stichworten/Code-Beispielen, kein Webzugriff nötig.“

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>

KI-Aufgabe – Debugging-Coach (Bilder & alt)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Ich habe Bilder ohne sinnvolle alt-Texte. Gib mir 5 Checkpunkte (Dateipfad, Dateiname, alt-Text, Bildzweck, Bild verlinken ja/nein). Prüfe meinen Beispielcode Schritt für Schritt. Arbeite nur mit meinem Code – kein Webzugriff.“

Übungen · Bilder

Füge ein Bild mit sinnvollem alt-Text ein.
Erkläre in 1–2 Sätzen, warum alt wichtig ist.
Optional: Verlinke ein kleines Vorschaubild auf eine (theoretisch) große Version.

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>

KI-Aufgabe – „Wer wird Millionär?“-Quiz (Head)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Stelle mir 5 Quizfragen im Stil von ‘Wer wird Millionär?’ zu Head-Elementen (title, meta charset/viewport, link rel='icon'). Frage nacheinander, erkläre falsche Antworten kurz. Kein Webzugriff – nutze nur mein Vorwissen.“

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>

KI-Aufgabe – „Wer wird Millionär?“-Quiz (Listen)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Stelle mir 5 ‘Wer wird Millionär?’-Fragen zu HTML-Listen (ol/ul/li, Verschachtelung, Navigationen). Stelle sie nacheinander und erkläre nach jeder Antwort kurz. Kein Webzugriff erforderlich.“

Codelab · Listen

Übungen · Listen

Erstelle eine einfache Navigation als Liste (mind. 3 Einträge, die auf IDs deiner Seite zeigen dürfen).
Baue eine nummerierte Schritt-für-Schritt-Anleitung (<ol>, 4–5 Schritte, kurze Sätze).
Verschachtle eine Liste: Ein Eintrag enthält eine Unterliste mit 2 Punkten.

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>

KI-Aufgabe – Debugging-Coach (Tabellen)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Ich habe eine HTML-Tabelle. Stelle mir 5 Checkpunkte (Caption, Thead/Tbody, passende Überschriftenzellen, sinnvolle Inhalte, einfache Struktur) und prüfe meinen Beispielcode Schritt für Schritt. Kein Webzugriff, arbeite nur mit meinem Code.“

Codelab · Tabelle

Notenspiegel
Name	Punkte
Ali	12
Mia	10

Übungen · Tabellen

Erstelle eine Tabelle mit Überschriftenzeile und zwei Datenzeilen.
Füge eine <caption> hinzu (Titel der Tabelle).
Bonus: Ergänze eine Spalte „Ø“ (Durchschnitt) – du kannst einfach einen Beispielwert eintragen.

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>

KI-Aufgabe – Schritt-Coach (iFrame)
Aufgabe: Öffne ein kostenloses KI-Sprachmodell (ChatGPT Free oder Google Gemini Free) und tippe:
„Hilf mir, ein <iframe> sinnvoll einzubetten: 1) gutes title, 2) passende Größe, 3) Beispiel-Quelle. Gib mir eine kurze Schritt-Checkliste und kontrolliere meinen HTML-Code. Arbeite ohne Webzugriff – nur mit meinem Code.“

Codelab · iFrame

HTML-Glossar

Vervollständige die Lücken – nutze bei Bedarf deine Notizen:

<h1>…<h6>: ____________________________ in verschiedenen Ebenen (1 = wichtigste).
<p>…</p>: ____________________________ für laufenden Text.
<div>…</div>: ____________________________ zur Gruppierung von Inhalten.
<a>…</a>: ____________________________ (extern oder mit #id intern).
<img>: ____________________________ einfügen (mit alt).
id="…": ____________________________ Kennung; Sprungziel für href="#…".
class="…": ____________________________ Bezeichnung; darf mehrfach vorkommen.
<head>: ____________________________ der Seite (z. B. Titel, Meta).
<ul>/<ol>/<li>: ____________________________.
<table>…: ____________________________ für Daten in Zeilen/Spalten.
<iframe>: ____________________________ fremder Inhalte.

Weiterlesen & Tools

MDN: Einführung in HTML
MDN: HTML-Element-Referenz
W3C Nu HTML Checker – HTML prüfen
Playgrounds (optional): CodePen, JSFiddle

Lösungs-Modul (interaktiv)

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

Grundstruktur

Überschriften, Absätze, Bereiche.

Klassen & IDs

Benennung & Sprungziele.

Links & Anker

Interne/Externe Links, Sicherheit.

Bilder

img + alt, optional verlinkt.

Head-Infos

Titel, Meta, Favicon.

Listen

ul/ol/li, Verschachtelung.

Tabellen

caption/thead/tbody.

iFrames

src + title.

HTML-Glossar

Vervollständigte Lücken.

Feedbackmodul

Beantworte die Fragen und sende deine Antworten im Schulportal mit dem Betreff:
„E HNR Feedback E-Learning: HTML – Struktur, Links & Medien“.

Lade deine aktualisierte Website-Datei in den mit mir geteilten Ordner hoch und versioniere sie. Was ist Versionieren? Klick hier!

Freitext: Welche Kapitel hast du bearbeitet (Grundstruktur, Klassen/IDs, Links/Anker, Bilder, Head, Listen, Tabellen, iFrames)?
Freitext: Formuliere zwei eigene Merksätze: einen zu Überschriften-Hierarchien und einen zu internen Ankern.
Multiple-Choice: Welche Hilfen hast du genutzt?
☐ Quelltext ansehen/DevTools ☐ MDN-Dokumentation ☐ HTML-Validator ☐ Online-Playground (CodePen/JSFiddle) ☐ KI-Unterstützung
Single-Choice: Wie schwierig war das Modul für dich insgesamt?
○ sehr einfach ○ einfach ○ mittel ○ schwierig ○ sehr schwierig
Skalafrage (1–5): Wie zufrieden bist du mit diesem Modul?
1 (sehr unzufrieden) … 5 (sehr zufrieden)
Ja/Nein: Hast du mindestens eine KI-Aufgabe und ein Codelab abgeschlossen?
○ Ja ○ Nein
Likert + Zusatz:
„Ich kann jetzt allein HTML-Überschriften/Absätze schreiben und interne/externe Links korrekt setzen.“
1 … 5; falls unsicher: Wobei genau? ______________________
Zeitangabe: Geschätzte Arbeitszeit: ______ Minuten
Selbsteinschätzung (1–5): Wie sicher fühlst du dich jetzt im Umgang mit HTML-Grundelementen?
1 (sehr unsicher) … 5 (sehr sicher)
Freitext: Was hat dir am meisten geholfen (Tool/Quelle/Strategie)?
Offene Frage: Verbesserungsvorschläge?

← Zum vorherigen Modul Zum nächsten E-Learning-Modul (bald)

Inhalte

Grundstruktur: Überschriften, Absätze & Bereiche

Codelab · Grundstruktur

Meine Themenübersicht

Kapitel A

Kapitel B

Übungen · Grundstruktur

Klassen (class) & IDs (id)

Codelab · Klassen & IDs

Meine Seite

Übungen · Klassen & IDs

Links & Sprunganker

Übungen: Links & Anker

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

Bilder einbinden

Übungen · Bilder

Head-Informationen (Titel, Meta, Favicon)

Codelab · Head-Infos

Head-Demo

Listen (ul/ol/li)

Codelab · Listen

Navigation

Schritte

Übungen · Listen

Tabellen

Codelab · Tabelle

Übungen · Tabellen

iFrames

Codelab · iFrame

iFrame-Test

HTML-Glossar

Weiterlesen & Tools

Lösungs-Modul (interaktiv)

Grundstruktur

Klassen & IDs

Links & Anker

Bilder

Head-Infos

Listen

Tabellen

iFrames

HTML-Glossar

Feedbackmodul

Klassen (`class`) & IDs (`id`)