2571cb8847
- Dynamic Sidebar mit window.COURSES_MANIFEST für 13 Kurse (216 Kapitel) - Kurswechsler Dropdown mit Direktnavigation - Fortschrittsanzeige mit Solved-Checkmarks (✓) aus localStorage - Responsive Off-Canvas Drawer mit Floating Action Button (☰ Kapitel) & Backdrop auf Mobile/Tablets - Web-IDE Topbar Drawer-Button (☰ Kapitel) für unterbrechungsfreien Vollbild-Editor - Saubere Bereinigung redundanter statischer Legacy-Sidebars |
||
|---|---|---|
| .. | ||
| aufgabe.html | ||
| index.html | ||
| musterloesung.html | ||
| README.md | ||
| test_aufgabe.js | ||
HTML 01: Semantisches HTML & Dokumentenstruktur 🌱
Willkommen im Modul 01 des HTML5 & CSS3 Meisterkurses!
In diesem Modul lernst du, wie ein sauberes, valides HTML5-Dokument strukturiert wird und warum semantische Tags das Fundament moderner Webentwicklung, Barrierefreiheit (Accessibility) und Suchmaschinenoptimierung (SEO) bilden.
💡 1. Das Wichtigste in Kürze
Grundgerüst eines HTML5-Dokuments
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein Portal</title>
</head>
<body>
<!-- Sichtbarer Inhalt -->
</body>
</html>
Semantische Landmark-Tags im Überblick
<header>: Einleitender Bereich der Webseite (Logo, Webseitentitel, Slogan) oder eines Artikels.<nav>: Navigationsbereich mit Links (meist als<ul>mit<li>und<a>).<main>: Repräsentiert den zentralen Hauptinhalt. Darf genau einmal pro HTML-Dokument vorkommen.<article>: Eigenständiger, thematisch abgeschlossener Beitrag (z.B. Blogpost, News-Meldung, Produktkarte).<section>: Thematisch zusammenhängender Abschnitt, typischerweise mit einer eigenen Überschrift (<h2>bis<h6>).<aside>: Beistell-Inhalte, Sidebar, Autoren-Biografie, thematisch verwandte Linklisten.<footer>: Fußzeile mit Copyright-Vermerk, rechtlichen Hinweisen, Kontaktlinks.
🎯 Teilziele in aufgabe.html
- Doctype & Head: Richte
<!DOCTYPE html>,<html lang="de">,<meta charset="UTF-8">,<meta name="viewport">und<title>ein. - Kopfbereich & Navigation: Baue einen
<header>mit<h1>und ein<nav>-Menü mit mindestens 3 Navigationslinks. - Hauptinhalt & Artikel: Erstelle ein
<main>-Element mit einem<article>, der eine<h2>-Überschrift und Fließtext enthält. - Sektion & Sidebar: Ergänze innerhalb des Hauptbereichs eine
<section>mit<h3>und eine<aside>für Zusatzinformationen. - Fußzeile: Erstelle ein
<footer>-Element mit Copyright-Angabe (©).