Das Internet

Materialien, Links, Videos

• Thimble: Online-Editor zum Erstellen und Hosten eigener Webseiten von Mozilla.
• Wie das Internet funktioniert: Informationsbroschüre der Digitalen Gesellschaft.
• Wie funktioniert das Internet?: Sendung mit der Maus.
• Notepad++: Ein sehr guter Text-Editor für Windows.

Beispiele zum Nachbauen

1. HTML
   1. Basics, Textstrukturierung: Überblick über die Einführungsphase: em, strong, h1, h2, p
   2. Dasselbe mit Links: a
   3. Aufzählungen: ol, ul, li
      1. Einfache Liste
      2. Verschachtelte Listen
      3. Mehrfach verschachtelte Listen
   4. Tabellen: table, tr, td, th
      1. Einfache Tabelle
      2. Tabelle mit TH-Elementen
   5. Medien:img,video,audio
      1. Bilder
      2. Audio und Video
2. HTML+CSS
   1. Schriftart, Farben, Ausrichtung:
      • einfache Selektoren
      • Schriftart ohne Serifen im gesamten Dokument (font-family, sans-serif)
      • Hintergrundfarbe hellblau (background-color)
      • unterer Rahmen bei Überschriften (border-bottom), dicker bei der Hauptüberschrift
      • Schriftfarbe rot bei hervorgehobenen Wörtern (color)
      • Inhalt der Tabelle zentriert (text-align)
   2. Aufzählungszeichen, Verschachtelung
      • Aufzählungszeichen ändern (list-style-type)
      • Verschachtelte Selektoren: Elemente in Elementen auswählen
   3. Tabellen formatieren
      • Rahmen (border)
      • Zentrieren (margin: auto)
      • Zellen kollabieren (border-collapse: collapse)
   4. Fließende Objekte
      • float: right
   5. CSS-Klassen
      • class-Attribut
      • Klassen-Selektoren
3. Komplette Websites
   1. Jenseits von Monopoly
      • Mehrere Unterseiten werden miteinander über ein gemeinsames Navigationsmenü verlinkt.
      • Die aktuelle Seite wird im Navigationsmenü hervorgehoben.
      • CSS-Klassen werden eingesetzt, um bestimmte Begriffe hervorzuheben.