Logo HTML5

HTSTA - STATISCHE WEBSEITEN

Logo CSS3

Kapitel 09: Table Basics

Kursablauf:

Allgemeine Bemerkungen:
  • Einheit 1: Vorbereitung lesen Seiten 218-225. Lehrerdemo zu allen Themen des Kapitels (veraltete Attribute werden ignoriert!)
  • Einheit 2-4: HOPs, HOE, Case Study
Vorbereitung "Programmieren lernen":
Zu behandelnde Seiten:
S. 218-231
Lesen Hausaufgabe:
S.
Autonom erarbeiten in der Schule:
S. 218-225

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

Aufgaben:

  1. Führe die Hands-On Practices durch.
  2. Führe die Hands-On Exercises 1-7 durch.
  3. Führe den Case Study durch.
  4. Adaptiere deine Quickref-Dateien mit den neuen Table-Tags.

Verständnisfragen:

  1. Review questions

Test (100 Minuten):

  1. Erstelle in deinem H:-Laufwerk ein Verzeichnis namens T0IF1_Vorname_Nachname mit DEINEM Vornamen und Nachnamen.
  2. Erstelle folgende Webseite.
  3. Verwende diese Dateien.
  4. Das gesamte Styling findet in den 3 EXTERNEN CSS-Dateien statt.
  5. Das Styling von mySection und myFrame bleibt unverändert.
  6. Es dürfen keine div-Tags sondern nur semantisch korrekte Tags verwendet werden.
  7. Der bestehende Inhalt der vorgegebenen Dateien darf nicht verändert sondern nur ergänzt werden.
  8. Binde die CSS Dateien in die entsprechenden HTML-Dateien ein.
  9. Die gesamte Website verwendet das Foto a_cow_peers_over_a_hedgerow.jpg als Hintergrund. Das Foto darf nicht wiederholt dargestellt werden, auch nicht wenn man das Fenster schmaler macht.
  10. Die Hintergrundfarbe ist grün.
  11. Der gesamte Text verwendet die Zeichensatzfamilie Lucida Handwriting.
  12. Erstelle den Kopf der Seite:
    1. Er nimmt die ganze Breite des Fensters in Anspruch und bewegt sich nicht beim Scrollen.
    2. Die Schriftgröße beträgt das Vierfache der normalen Größe.
    3. Der Text ist zentriert und unterstrichen.
    4. Der Text hat einen weißen Schatten 3 Pixel nach rechts und unten mit einem Blurradius von 3 Pixeln.
  13. Erstelle die Navigationsleiste:
    1. Sie bewegt sich nicht beim Scrollen und befindet sich am linken Rand und 100 Pixel vom oberen Rand.
    2. Der Text hat einen schwarzen Schatten 2 Pixel nach rechts und unten mit einem Blurradius von 2 Pixeln.
    3. Die Links sind nicht unterstrichen und haben ein Padding von 10 Pixeln.
    4. Die Schriftfarbe ist blau.
    5. Wenn der Mauszeiger sich über einem Link befindet ist die Hintergrundfarbe lightskyblue und die Schriftfarbe weiß.
    6. Ein besuchter Link hat die gleiche Farbe wie ein unbesuchter.
    7. Nimm alle anderen Stylingmaßnahmen vor die nötig sind.
  14. Erstelle die Fußzeile:
    1. Sie bewegt sich nicht beim Scrollen, nimmt die gesamte Breite ein und befindet sich direkt am unteren Rand.
    2. Der Text wird zentriert mit einem weißen Schatten 1 Pixel nach rechts und unten mit einem Blurradius von 1 Pixel dargestellt.
  15. Style die Home-Seite:
    1. Die Zeilen sind doppelt so hoch wie normal.
    2. Die Schriftgröße beträgt das Dreifache der normalen Größe.
    3. Die Schriftfarbe ist weiß.
    4. Der Text hat einen schwarzen Schatten 3 Pixel nach rechts und unten mit einem Blurradius von 3 Pixeln.
    5. Die Wörter 125 Jahren verwenden eine goldene Schrift.
  16. Erstelle die Speisekarte:
    1. Die Schriftfarbe ist weiß mit einem Schatten von 1 Pixel nach rechts und unten, 3 Pixel Blurradius und schwarzer Farbe.
    2. Die erste Tabelle besteht aus einem Haupt- und einem Fußteil. Verwende die entsprechenden Tags.
    3. Die zweite Tabelle besteht aus einem Kopf-, einem Haupt- und einem Fußteil. Verwende die entsprechenden Tags. Die Schrift im Kopfteil ist goldfarben.
    4. Für beide Tabellen gilt:
      1. Sie haben eine Überschrift in doppelter Schriftgröße.
      2. Sie haben einen schwarzen Rahmen mit einer Breite von 1 Pixel.
      3. Die Hintergrundfarbe ist grün.
      4. Die geraden Zeilen haben die Schriftfarbe hellgrün.
      5. Der Fußteil hat die Schriftfarbe darkgoldenrod.
    5. Der Abstand zwischen den beiden Tabellen beträgt 30 Pixel.
    6. Positioniere die beiden Tabellen und das Bild korrekt.
  17. Die Seite muss fehlerfrei validiert sein.