Logo HTML5

HTSTA - STATISCHE WEBSEITEN

Logo CSS3

Kapitel 06: Web Graphics Styling Basics

Kursablauf:

Allgemeine Bemerkungen:
Lehrerdemo: img-Tag. Danach Experten-Rallye (Infos: Experten-Rallye) um die einzelnen Themen des Kapitels durchzuarbeiten.
Vorbereitung "Programmieren lernen":
keine neuen Konzepte
Zu behandelnde Seiten:
S.126-139, 142-145
Lesen Hausaufgabe:
S.
Autonom erarbeiten in der Schule:
S.

Denke daran die unbekannten Wörter und Ausdrücke aufzuschreiben und nachzuschlagen!

Aufgaben:

  1. Experten-Rallye: Expertengruppen (Schüleranweisungen)
    1. Bildformate und Bildbearbeitung für das Internet (S. 126-127, 130-131)
    2. Bildverweise und Favorites Icon (S.132-133, 142-143)
    3. Hintergrundbilder (S. 134-139)
    4. Listensymbole (S. 144-145)
  2. Führe die Hands-On Practices 6.1-6.4 & 6.6-6.7 durch.
  3. Führe die Hands-On Exercises 1-5 durch.
  4. Führe den Case Study durch.
  5. Erstelle die Webseite welche im Bild abgebildet ist. Die Texte kannst du aus dem PDF entnehmen. Die benötigten Bilder sind hier.

Verständnisfragen:

  1. Review questions

Test (50 Minuten):

  1. Erstelle in deinem H:-Laufwerk ein Verzeichnis namens T0IF1_Vorname_Nachname mit DEINEM Vornamen und Nachnamen.
  2. Erstelle folgende Webseite.
  3. Das gesamte Styling findet in einer externen CSS-Datei statt.
  4. Der kleine Teufel hinter dem Text "Get the devil here" verweist auf die Seite http://www.iconfinder.com/icondetails/59006/512/andreas_guldmann_devil_robot_icon und öffnet diese in einem neuen Tab/Fenster.
  5. Die kleinen Teufel werden aus dem großen Teufel erzeugt und haben eine Größe von 32 x 32 Pixeln.
  6. Die Seite hat ein teuflisches Favicon.
  7. Die Hintergrundfarbe ist gold.
  8. HTML5 und CSS3 müssen validiert sein.