webkids

Materialen für eine "Internet und Website" Schul-AG.

View project on GitHub

Lehrplan

Kennenlernen

  • Welche Vorkenntnisse gibt es?
  • Wie stellt ihr euch programmieren vor?
  • Was interessiert die Schüler?
  • Ideen vorstellen: Kinderbereich der Website und Digitale Schülerzeitung, Protokoll/Blog
  • Sind die Logins für die Computer vorhanden?

Erste Schritte

  • Wie funktioniert das Internet?
  • Was ist ein Browser?
  • Was ist ein Webserver?
  • Wie kommunizieren Browser und Webserver?
  • Webadressen
  • Programmiersprachen für Webseiten
    • HTML: Inhalt
    • CSS: Gestaltung
    • JavaScript: Verhalten
  • Setup
    • Editor
    • Browser

HTML 1

  • Tags:
    • p, h1, h2, br
    • öffnend / schließend / selbstschließend
    • Verschachtelung: ul / li

HTML 2

  • Attribute
  • Tags:
    • img: src, alt
  • Referenzen und URLs: Bild verlinken (lokal und remote)
  • Bildname und Formate (JPG, PNG, GIF)
  • style-Attribut

CSS 1

  • Selektoren und Properties
  • Stylesheet Dateien (vs. style-Attribut)
  • Eigenschaften und Werte:
    • color
    • background-color
    • font-size
    • font-family
    • margin / border / padding
  • Einheiten: px, em, rem, %

CSS + HTML

  • Klassen und IDs
  • Mehrere Klassen
  • Layout: Struktur

CSS 2

  • Layout: Styling
  • Neu: Grid / Flexbox
  • Alt: Tabellen / Floats (nur als Referenz erwähnen)

HTML 3

  • Seitenaufbau generell: DOCTYPE, html, head, body
  • Links
  • Formulare: Inputs und Buttons
  • Tabellen

JavaScript

  • Variablen
  • Bedingungen: if / else
  • Schleifen
  • Funktionen
  • DOM
  • Passwort-Zugriff als Beispiel

Weiterführendes

  • Dateiupload per FTP
  • Semantik und A11y