{ "$schema": "../../schemas/code-crispies-module-schema.json", "id": "html-elements", "title": "HTML Block & Inline", "description": "Verstehe den grundlegenden Unterschied zwischen Container- (Block-) und Inline-Elementen", "mode": "html", "difficulty": "beginner", "lessons": [ { "id": "block-vs-inline-intro", "title": "Block- vs Inline-Elemente", "description": "HTML-Elemente fallen in zwei Hauptkategorien:

Block-Elemente (Container) beginnen in einer neuen Zeile und nehmen die volle Breite ein. Beispiele: <div>, <p>, <h1>, <section>

Inline-Elemente fließen innerhalb des Textes und nehmen nur die benötigte Breite ein. Beispiele: <span>, <a>, <strong>, <em>", "task": "Umschließe das Wort wichtigen mit <strong>-Tags, um es fett zu machen. Beachte, wie der Absatz (Block) die volle Breite einnimmt, während strong (Inline) mit dem Text fließt.", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 20px; } p { background: #e3f2fd; padding: 10px; } strong { background: #ffecb3; }", "sandboxCSS": "", "initialCode": "

Dies ist ein Absatz mit einem wichtigen Wort.

", "solution": "

Dies ist ein Absatz mit einem wichtigen Wort.

", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "p", "message": "Füge ein <p> Absatz-Element hinzu" }, { "type": "parent_child", "value": { "parent": "p", "child": "strong" }, "message": "Umschließe das Wort 'wichtigen' mit <strong>-Tags" } ] }, { "id": "semantic-containers", "title": "Semantische Container-Elemente", "description": "Modernes HTML verwendet semantische Container, die ihren Inhalt beschreiben:

<header> - Kopfbereich der Seite oder eines Abschnitts
<nav> - Navigationslinks
<main> - Hauptinhalt
<section> - Thematische Gruppierung
<article> - Eigenständiger Inhalt
<footer> - Fußbereich der Seite oder eines Abschnitts", "task": "Erstelle eine einfache Seitenstruktur:
1. Füge ein <header> mit einem <h1> hinzu, das den Text Meine Webseite enthält
2. Füge ein <main>-Element mit einem Absatz hinzu, der Willkommen auf meiner Seite! sagt
3. Füge ein <footer> mit einem Absatz hinzu, der Copyright 2025 sagt", "previewHTML": "", "previewBaseCSS": "body { font-family: system-ui; margin: 0; } header { background: #1976d2; color: white; padding: 15px; } main { padding: 20px; min-height: 100px; } footer { background: #424242; color: white; padding: 10px; text-align: center; }", "sandboxCSS": "", "initialCode": "", "solution": "
\n

Meine Webseite

\n
\n
\n

Willkommen auf meiner Seite!

\n
\n", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "header", "message": "Füge ein <header>-Element hinzu" }, { "type": "element_exists", "value": "main", "message": "Füge ein <main>-Element hinzu" }, { "type": "element_exists", "value": "footer", "message": "Füge ein <footer>-Element hinzu" }, { "type": "parent_child", "value": { "parent": "header", "child": "h1" }, "message": "Füge eine <h1>-Überschrift in deinem Header hinzu" } ] }, { "id": "div-vs-span", "title": "Generische Container: div und span", "description": "Wenn du einen Container ohne semantische Bedeutung benötigst:

<div> - Generischer Block-Container (für Layout/Gruppierung)
<span> - Generischer Inline-Container (zum Stylen von Textteilen)

Verwende semantische Elemente wenn möglich, div/span wenn kein semantisches Element passt.", "task": "Umschließe das Wort 'hervorgehoben' mit einem <span>, um es anders zu gestalten. Umschließe das gesamte Zitat mit einem <div>.", "previewHTML": "", "previewBaseCSS": "body { font-family: Georgia, serif; padding: 20px; } div { background: #f5f5f5; padding: 15px; border-left: 4px solid #1976d2; } span { background: #fff59d; padding: 2px 4px; }", "sandboxCSS": "", "initialCode": "Der hervorgehoben Moment war unvergesslich.", "solution": "
Der hervorgehoben Moment war unvergesslich.
", "previewContainer": "preview-area", "validations": [ { "type": "element_exists", "value": "div", "message": "Umschließe alles mit einem <div>-Element" }, { "type": "element_exists", "value": "span", "message": "Füge ein <span> um das Wort 'hervorgehoben' hinzu" }, { "type": "element_text", "value": { "selector": "span", "text": "hervorgehoben" }, "message": "Das <span> sollte das Wort 'hervorgehoben' enthalten" } ] } ] }