Einheit: HTML und CSS im Webdesign

Einheit: HTML und CSS im Webdesign

Gymnasium | Mittlere Schulformen

Informatik & Medienbildung

11. | 12. | 13. Klasse

4 - 5 Unterrichtsstunden

Beschreibung

Jeder von uns nutzt das Internet täglich mehrere Stunden lang, um zu arbeiten oder zum Zeitvertreib. Beim Browsen besuchen wir über diesen Zeitraum unzählige Websites zu den unterschiedlichsten Themen und mit unterschiedlicher Funktionalität. Doch was genau spielt sich im Hintergrund ab? Wie werden komplexe Seiten erstellt und Daten so aufbereitet, dass die Nutzenden ein schönes, leicht zu bedienendes Endprodukt auf dem Bildschirm haben? Die Gepflogenheiten in Webdesign und Usability haben sich über die Jahre verändert, die dahinterstehende Logik bzw. Codierungssprache ist jedoch seit über 30 Jahren dieselbe, näm-lich HTML (Hyper Text Markup Language) in Verbindung mit Formatierungen von CSS (Casca-ding Style Sheets). Anfang der 1990er-Jahre vom Engländer Tim Berners-Lee während seiner Forschungszeit am CERN erdacht, bildet es nach wie vor die Grundlage für sämtliche Websites unseres täglichen Gebrauchs.
Leseprobe ansehen
# HTML
# CSS
# CMS
# Content-Management
# Webdesign
# Internet
# Usability

Kompetenzen

Klassenstufe:11/12/13
Dauer:5 Unterrichtsstunden (Minimalplan: 4)
Lernziele:Die Lernenden können … 1. die Grundstruktur einer Webseite erklären, 2. Grundfunktionen von HTML und CSS anwenden, 3. die Usability-Richtlinien für Online-Auftritte anwenden, 4. in einem Content-Management-System redaktionell arbeiten.
Thematische Bereiche:HTML, CSS, Content-Management-Systeme, Webdesign, Online-Publishing, Internet, Usability
Medienkompetenzen:Modellieren, Implementieren, Darstellen und Interpretieren

Inhaltsangabe

Einstieg

Thema:Grundlagen von HTML und CSS
M 1HTML_CSS_Grundlagen.pptx
Benötigt:
  • Beamer/Whiteboard
  • PowerPoint-Präsentation aus den Zusatzmaterialien

Erarbeitung

Thema:Festigung der Theorie zu HTML und CSS
M 2Wortsuchrätsel zu zentralen HTML-Begriffen
Benötigt:
  • ggf. Laptop/mobiles Endgerät zur digitalen Aufgabenbearbeitung
  • ggf. LearningApps:
    • einfach: https://raabe.click/htmlcss_M2_einfach
    • schwer: https://raabe.click/htmlcss_M2_schwer
M 3Digitales Memo-Spiel zu elementaren HTML-Tags
Benötigt:
  • Laptop/PC
  • LearningApps:
    • einfach: https://raabe.click/htmlcss_M3_einfach
    • schwer: https://raabe.click/htmlcss_M3_schwer

Übung

Thema:Praxisbeispiel zu HTML und CSS
M 4Praxisbeispiel
Benötigt:
  • Laptop/PC
  • HTML-Editor (z. B. Notepad ++)
  • Vorlagedateien aus dem Ordner „CSS-Festigung“
M 5Lückentext in digitaler bzw. analoger Variante zur Funktionalität des Internets
Benötigt:
  • ggf. Laptop/mobiles Endgerät zur digitalen Aufgabenbearbeitung
  • ggf. LearningApps:
    • einfach: https://raabe.click/htmlcss_M5_einfach
    • schwer: https://raabe.click/htmlcss_M5_schwer
M 6Praxisbeispiel zu Content-Management-Systemen
Benötigt:
  • Laptop/PC
  • Internetzugang
  • Aktiver E-Mail-Account zur Erstellung des Wordpress Kontos

0,00 €

So funktioniert RAAbits

Eine riesige Materialauswahl und viele nützliche Funktionen für Ihren Unterricht. Entdecken Sie jetzt, was Ihnen unser digitales Abo bietet.