Informatik@GRG11

Appearance

🌐 HTML & CSS ​

In diesem Bereich geht es darum, wie Webseiten aufgebaut, gestaltet, untersucht und veröffentlicht werden können.

Du lernst zuerst die Grundlagen von HTML und CSS kennen. Danach untersuchst du Webseiten mit den Entwicklertools des Browsers, verstehst den Weg vom lokalen Projekt zur veröffentlichten Website und setzt dich abschließend mit der Rolle von KI in der Webentwicklung auseinander.

Kompetenzen: Ich kann … ​

  • Ich kann erklären, wie HTML Inhalte einer Webseite strukturiert.
  • Ich kann einfache HTML-Dateien erstellen, speichern und im Browser öffnen.
  • Ich kann wichtige HTML-Tags für Überschriften, Absätze, Listen, Links, Bilder, Tabellen und Bereiche verwenden.
  • Ich kann Webseiten mit CSS gestalten und einfache Designentscheidungen begründen.
  • Ich kann CSS direkt im Element, im <style>-Bereich und in einer eigenen CSS-Datei einsetzen.
  • Ich kann mit den Entwicklertools des Browsers HTML und CSS untersuchen.
  • Ich kann erklären, wie lokale Dateien über Webspace, Domain und DNS als Website erreichbar werden.
  • Ich kann KI-generierten HTML- und CSS-Code prüfen, anpassen und sinnvoll weiterverwenden.
  • Ich kann eigene Webprojekte planen, testen, verbessern und verständlich erklären.

Kapitel ​

Überblick ​

1. HTML-Grundlagen und wichtige Tags ​

Du lernst, wie HTML Inhalte strukturiert, wie eine HTML-Datei aufgebaut ist und welche Tags für Überschriften, Absätze, Listen, Links, Bilder, Tabellen und Bereiche wichtig sind.

2. CSS-Gestaltung ​

Du gestaltest Webseiten mit CSS: zuerst direkt im HTML-Element, danach im <style>-Bereich und schließlich mit einer eigenen style.css.

3. Browser untersuchen ​

Du verwendest die Entwicklertools des Browsers, um HTML, CSS, geladene Dateien, externe Dienste und mögliche Datenflüsse sichtbar zu machen.

4. Vom lokalen Projekt zur Website ​

Du verstehst, wie aus lokalen Dateien eine veröffentlichte Website wird: Webspace, Domain, Subdomain, DNS, FTP, Kosten und Verantwortung.

5. KI und Webentwicklung ​

Du reflektierst, wie KI Webdesign verändert, welche Kompetenzen trotzdem wichtig bleiben und planst ein HTML-Text-Adventure mit KI-Unterstützung.

Arbeitsweise ​

In den HTML-&-CSS-Einheiten arbeitest du an eigenen Dateien und kleinen Webprojekten, die du Schritt für Schritt erweiterst. Achte daher besonders auf eine saubere Ordnerstruktur und nachvollziehbare Dateinamen.

Hilfreich sind:

  • klare Ordnerstruktur mit index.html, style.css und einem Bilderordner
  • sinnvolle Dateinamen ohne Leerzeichen und Sonderzeichen
  • regelmäßiges Speichern und Testen im Browser
  • saubere Einrückungen im HTML- und CSS-Code
  • bewusste Trennung von Struktur und Gestaltung
  • Prüfung mit Validator und Entwicklertools
  • kritisches Prüfen von KI-generiertem Code

Beispiel:

text
html-einstieg/
├─ index.html
├─ style.css
└─ images/
   └─ bild.png

Merksatz

HTML beschreibt die Struktur. CSS gestaltet die Darstellung.

Wichtig

Teste Änderungen regelmäßig im Browser. Wenn etwas nicht funktioniert, prüfe zuerst Dateiname, Speicherort, Pfad und Schreibweise.