E1 – Das Internet

Im ersten Halbjahr der E-Phase befassen wir uns primär mit dem Internet: Was ist das? Wie funktioniert es? Wie kann ich eine eigene Website erstellen?

Software, Apps und Links

• Notepad++: Ein sehr guter Text-Editor für Windows.
• Koder: Ein Text-Editor für das iPad. Hiermit können Webseiten entwickelt werden.
• JavaApp-Web!: Ein weiterer Editor, mit dem Webseiten erstellt werden können.
• Web Inspector: Eine Erweiterung für Safari auf dem iPad, die Teile der Entwicklertools nutzbar macht.
• Glitch.com: Online-Editor zum Erstellen und Hosten eigener Webseiten.
• HexEd: Ein Online-Hex-Editor
• Wie funktioniert das Internet?: Sendung mit der Maus.

Lernvideos

1. Grundlagen der Informatik
   • 1.1: Was ist Informatik? (6 min)
   • 1.2: Turingmaschinen (11 min)
   • 1.3: Digitalcomputer und Digitalisierung (3 min)
   • 1.4: Bits und Bytes (3 min)
   • 1.5: Exkurs: Stellenwertsysteme (14 min)
   • 1.6: Binäre und hexadezimale Schreibweise für Bytes (8 min)
   • 1.7: Der ASCII-Code (7 min)
2. HTML
   • Bonus-Video: Webentwicklung auf dem iPad (8 min)
   • 2.1: Aufbau einer Website (11 min)
   • 2.2: Formatieren von Text (6 min)
   • 2.3: Tags mit Attributen (7 min)
   • 2.4: Listen und Aufzählungen (7 min)
   • 2.5: Tabellen (3 min)
   • 2.6: Bilder (7 min)
3. CSS
   • 3.1 CSS-Dateien verlinken (4 min)
   • 3.2 HTML-Elemente stylen (9 min)
   • 3.3 CSS-Klassen (5 min)
   • 3.4 Das Box-Modell (10 min)
   • 3.5 DIV- und SPAN-Elemente (5 min)
   • 3.6 Verschachtelte CSS-Selektoren (7 min)
   • 3.7 Anordnung mit CSS-Grid (16 min)
4. JavaScript (nur LK)
   • 4.1: Einstieg JavaScript (14 min)
   • 4.2: Verändern von HTML-Elementen (6 min)
   • 4.3: Grundbegriffe der Programmierung (10 min)
   • 4.4: Auslesen von HTML-Elementen (12 min)
   • 4.5: Verzweigungen und bedingte Anweisungen (11 min)
   • 4.6: Funktionen (12 min)
5. Internet-Protokolle (24 min)

---

Arbeitsblätter

• AB 1: Bits und Bytes
• AB 2: Abschluss Basics, Zusatz: Der ASCII-Code
• AB 3: Workshop HTML
  • Link zum ersten Bild: https://upload.wikimedia.org/wikipedia/commons/a/ab/Official_CSS_Logo.svg (das alte Bild gibt es leider nicht mehr)
  • Link zum zweiten Bild: https://upload.wikimedia.org/wikipedia/commons/b/b9/WorldWideWebAroundWikipedia.png (das alte Bild gibt es leider nicht mehr)
  • Link zum Video: www.w3schools.com/html/mov_bbb.mp4
  • Link zum Sound: www.w3schools.com/html/horse.mp3
• AB 4: Workshop CSS
• AB 5: HTML und CSS
  • Website Bonusaufgabe: Jenseits von Monopoly
• AB 6: Boxmodell und Gridlayout
  • Webseite Grid.html, Download als ZIP-Datei
• JavaScript (nur LK)
  • AB JS-1: Grundlagen von JavaScript
  • AB JS-2: Funktionen in JavaScript
  • AB JS-3: Algorithmik mit JavaScript
• AB 7: Internetprotokolle
• Zusätzliche Arbeitsblätter (nur LK)
  • Zusatz-AB 1: HTML, CSS und JavaScript
  • Zusatz-AB 2: Probeklausur