HTML: Grundlagen und Erstellen eigener Websites

HTML: Grundlagen und Erstellen eigener Websites

Gymnasium | Mittlere Schulformen

Informatik & Medienbildung

8. | 9. | 10. Klasse

8 - 9 Unterrichtsstunden

Beschreibung

Das Internet spricht eine Sprache: HyperText Markup Language (kurz: HTML). In dieser Unterrichtseinheit lernen Ihre Schülerinnen und Schüler diese Auszeichnungssprache zur Struktur und Gestaltung von Dokumenten kennen. Die Bestandteile, die Befehle, die Syntax und der Aufbau dieser Markiersprache werden entdeckt und angewandt. Außerdem werden die Unterschiede zwischen einer Markiersprache und einer Programmiersprache klar. Das alles führt hin zur eigenen Erstellung einer Website mithilfe von HTML und CSS.
Leseprobe ansehen
# internet
# markierungssprache
# markiersprache
# auszeichnungssprache
# html
# css
# webdesign
# struktur und gestaltung von webinhalten
# struktur und gestaltung von dokumenten

Kompetenzen

Klassenstufe:8/9
Dauer:8–9 Unterrichtsstunden
Lernziele:Die Lernenden … 1. erkennen die Bestandteile von HTML und CSS, definieren diese und wenden sie an, 2. erläutern den Unterschied zwischen Programmiersprache und Markiersprache, 3. verbessern fehlerhafte Websites, 4. erstellen eigene Websites mithilfe von HTML und CSS.
Thematische Bereiche:Internet, Markierungssprachen, HTML, CSS, Webdesign, eigene Gestaltung von Webinhalten
Kompetenzbereiche:Implementieren, Darstellen und Interpretieren, Produzieren und Präsentieren, Analysieren und Reflektieren

Inhaltsangabe

  • PC/Laptop/mobiles Endgerät
  • Stifte/Notizzettel

Einstieg

Thema:Darstellung von Inhalten im Internet
M 1HTML – Die Sprache des World Wide Webs
M 2HTML – Ist das „Programmieren“?
Benötigt:
  • HTML_Tags.html

Erarbeitung: HTML-Grundlagen

Thema:HTML-Einführung
M 3HTML-Tags – Von head zu body
Benötigt:
  • HTML_Tags.html
M 4Arten und Regeln von Tags – Get tagged!
M 4aTippkarte zu HTML-Tags
Benötigt:
  • ggf.LearningApp : https://raabe.click/LA-HTML-Tags
Thema:CSS-Einführung
M 5Gestaltung einer Webseite mit CSS
M 5aTippkarte zur Gestaltung einer Webseite mit CSS
Benötigt:
  • fliesstext.html & flliess_style.css
  • LearningApp:https://raabe.click/LA-CSS-Stile
M 6Strukturierung einer Webseite mit Boxen
Benötigt:
  • bunte Stifte & Notizblätter

Festigung: Webdesign

Thema:Webseiten gestalten
M 7Umgestaltung einer Webseite nach Kundenanforderungen
M 7aInfokarte – Grundgerüst einer Webseite mit CSS gestalten
Benötigt:
  • anpassen.png
  • anpassen.html & anpassen_style.css
  • Lösung: anpassen_e.html & anpassen_style_e.css
M 8Auf Fehlersuche als Webdesignerinnen und Webdesigner
Benötigt:
  • fehler.png
  • fehler.html & fehler_style.css
  • Lösung: fehlerfrei.html & fehlerfrei_style.css

Projekt

Thema:Eigene Webseite erstellen und gestalten
M 9Gestalte deine eigene Webseite!
M 9aTippkarte zur Gestaltung einer eigenen Webseite

Benötigte Dateien

  • HTML_Tags.html (zuM 2undM 3)
  • fliesstext.html (zuM 5)
  • fliess_style.css (zuM 5)
  • anpassen.png (zuM 7)
  • anpassen.html anpassen_e.html und Lösungsdatei(zuM 7)
  • anpassen_style.css anpassen_style_e.css und Lösungsdatei(zuM 7)
  • fehler.png (zuM 8)
  • fehler.html fehler_markiert.html & fehlerfrei.html und Lösungsdateien(zuM 8)
  • fehler_style.css fehler_markiert_style.css & fehlerfrei_style.css und Lösungsdateien(zuM 8)

Erklärung zu den Symbolen

0,00 €

Für Schulen & Fachschaften

Egal ob einzelne Fachschaft oder komplette Schule: Mit unseren flexiblen Abo-Modellen finden wir den richtigen Weg, um den Unterricht von Ihnen und Ihres Kollegiums einfach zu gestalten.

Jetzt informieren