🧱 Baue das Web – mit HTML & CSS

Dein Fundament für jede Website – strukturiert, gestaltet, verständlich.

🌐 Was ist Webentwicklung?

Webentwicklung ist der Prozess, digitale Inhalte so zu gestalten und aufzubauen, dass sie im Web – also in Browsern wie Chrome, Firefox oder Safari – dargestellt werden können. Dabei unterscheidet man grob zwischen Frontend (sichtbare Oberfläche) und Backend (unsichtbare Logik, Datenbanken). In der **1. Klasse Medientechnik** beschäftigen wir uns mit dem **Frontend** – dem sichtbaren Teil einer Website.

🧱 Die drei Säulen des Webs

Jede Website basiert auf drei Technologien, die eng zusammenarbeiten:

HTML (HyperText Markup Language) – der Inhalt
HTML strukturiert den Inhalt: Überschriften, Absätze, Bilder, Links. Es sagt: „Das ist ein Titel“, „Das ist eine Liste“.
CSS (Cascading Style Sheets) – das Design
CSS gestaltet das Aussehen: Farben, Abstände, Schriftgrößen, Layout. Es sagt: „Der Titel ist grün und zentriert.“
JavaScript – das Verhalten
JavaScript macht Seiten interaktiv: Menüs öffnen sich, Formulare prüfen Eingaben, Inhalte laden nach. (Wird später behandelt!)

📌 Merke: Ohne HTML gibt es keinen Inhalt – ohne CSS sieht alles wie roher Text aus – ohne JavaScript bleibt alles statisch.

🔄 Statische vs. dynamische Websites

Statische Websites bestehen aus festen HTML-Dateien. Jede Seite ist eine eigene Datei – wie ein digitales Buch. Sie ändern sich **nicht**, es sei denn, jemand bearbeitet den Code.

Dynamische Websites (z. B. Facebook, Wikipedia) erzeugen Inhalte **on-the-fly** – basierend auf Benutzerdaten, Datenbanken oder Eingaben. Dafür braucht es Backend-Technologien wie PHP, Python oder Node.js.

✅ In diesem Tutorial erstellen wir **statische Websites** – das ist der perfekte Einstieg, um die Grundlagen zu verstehen. Später kannst du dynamische Funktionen mit JavaScript hinzufügen!

🧠 1. Was sind HTML & CSS?

HTML (HyperText Markup Language) definiert die Struktur einer Webseite – wie Überschriften, Absätze, Listen oder Bilder. CSS (Cascading Style Sheets) legt das Design fest – Farben, Abstände, Layouts.

Gemeinsam bilden sie das Gerüst und das Gesicht des Webs – bevor JavaScript für Interaktion sorgt.

🧩 2. Wozu braucht man HTML & CSS?

Eine persönliche Seite über dich, dein Hobby oder dein Lieblingsthema erstellen
Eine Präsentation für die Schule mit Bildern, Tabellen und klarem Layout bauen
Barrierearme, gut strukturierte Webseiten für alle zugänglich machen
Das Fundament legen, um später mit JavaScript interaktive Apps zu entwickeln

↔️ 3. Statisch vs. Dynamisch

HTML/CSS-Seiten sind statisch – ihr Inhalt ändert sich nicht automatisch. Das ist absichtlich: Es erlaubt dir, Struktur und Gestaltung **ohne Ablenkung** zu meistern.

⚠️ Achtung: Viele denken, „statisch“ bedeutet „langweilig“ – aber ohne solides HTML/CSS-Grundgerüst funktioniert später kein JavaScript!

🪞 4. KI als Denkspiegel – nicht als Copy-Paste-Maschine

Viele nutzen KI, um „fertigen Code“ zu bekommen – doch ohne Verständnis bleibt das Lernen aus.

💡 Merke: Wer klar denkt, bekommt klare Antworten.
Stelle präzise Fragen – z. B.:
„Zeig mir ein semantisches HTML-Grundgerüst für eine Künstlerseite mit Header, Galerie und Footer.“

So wird die KI zum Denkpartner – und du baust echtes Verständnis auf.

🎯 5. Was du am Ende beherrschst

Eine mehrseitige, responsive Website mit externem CSS erstellen
Eine klare Ordnerstruktur organisieren (mit Bildern, PDFs, CSS)
Navigationssysteme mit Dropdown-Menü bauen (rein mit HTML/CSS)
Medien (Bilder, Video), Tabellen und Formulare korrekt einbinden
Und: mit KI so arbeiten, dass du deine eigenen Denkfähigkeiten stärkst

🚀 Bereit zum Start?

Beginne mit Modul 00 – Willkommen oder wähle ein Thema aus dem Menü oben. Lies, probiere aus, denke nach – und gestalte deine erste Website mit Absicht!