Logo HTML5

HTSTA - STATISCHE WEBSEITEN

Logo CSS3

Kapitel 01: Erste HTML Seite

Kursablauf:

Allgemeine Bemerkungen:

Die Reihenfolge des Kapitels wird NICHT eingehalten. Ziel ist es zuerst zu erlernen wie man eine Internetseite erstellt, testet und validiert. Theoretische Aspekte werden nur kurz behandelt mittels Fragen zum Text. Technische Aspekte (Client, Server, HTTP, ...) werden am Ende des Kurses behandelt (Kapitel 12).

Alle Aufgaben dieses Kapitels werden mit dem Programm Notepad erstellt! Mit dem Browser (vorzugsweise: Firefox oder Chrome) werden die Dateien über File-->Open geöffnet.

Die Verständnisaufgaben werden zuerst behandelt!

Vorbereitung "Programmieren lernen":
  • Variablen und Zuweisung, Eigenschaften die Objekte beschreiben: Attribute=Wert
  • Befehlsblock: Start- und Stop Tags
  • Verschachtelung von Instruktionen: Tag-Verschachtelung
Zu behandelnde Seiten:
S. 14-21
Lesen Hausaufgabe:
S. 2-7
Autonom erarbeiten in der Schule:
S. 2-7

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

Aufgaben:

  1. Führe das Hands-on Practice 1.1 durch.
  2. Führe das Hands-on Practice 1.1 in mehreren Varianten (XHTML 1.0 Transitional, XHTML 1.0 Strict und HTML5) durch. Es wird jeweils eine separate Datei erstellt.
  3. Führe eine lokale HTML-Validierung durch. Hierzu wird das Web Developer AddOn von Firefox installiert. Notiere dir die Vorgehensweise zur Installation und Benutzung dieses Tools. Installiere auch noch das Firebug AddOn.

    Ab diesem Moment muß jede Seite validiert werden. Nach einer erfolgreichen Validierung wird das HTML-Logo angezeigt.
    Benutze hierzu den vom Lehrer vorgegebenen Quellcode. Download unter folgendem Link: ValidierungsCode
  4. Kopiere eine der vorherigen Dateien und lösche alle Leerzeichen und Zeilenumbrüche welche sich zwischen den Tags befinden.
    1. Kann die Datei immer noch im Browser korrekt angezeigt werden?
    2. Wie kann man den HTML-Quellcode im Browser anzeigen?
    3. Was stellst du fest in Bezug auf die Dateigröße? Ist es sinnvoll die Leerzeichen zu löschen?
    4. Was versteht man unter dem Begriff Code-Indentierung und ist dies sinnvoll?

Verständisfragen:

  1. Wieso sollte man immer den Titel einer Seite (title tag) festlegen?
  2. Wieso spielt das Attribut lang beim Tag html eine wesentliche Rolle?
  3. Vergleiche die Ausgabe im Browser mit dem Quellcode (Firefox Right click-->View page source). Bette nun deinen kompletten Text in ein pre-TAG ein und vergleiche beide Ausgaben!
    <pre>Hier deine Antworten zu den Fragen mit Leerzeichen und Zeilenumbrüchen</pre>
  4. Beantworte die "Review questions" Seite 22.
  5. Beantworte die folgenden Fragen anhand des ersten Kapitels.
    1. Nenne die wesentlichen Etappen der Entstehung des Internets.
    2. Wie heißt der erste grafische Browser und von wem wurde dieser entwickelt?
    3. Wen kann man als den Urvater des WWW nennen?
    4. Was versteht man unter dem W3C und welche Aufgabe erfüllt dieses?
    5. Nenne 3 Kriterien welche die Wahrhaftigkeit einer Information im Internet etwas bestätigen können.
    6. In 4er Gruppen sollt Ihr euch die WCAG-Liste ansehen und 6 Elemente dieser Checkliste erklären und durch diskutieren. Wieso ist die WAI so wichtig?
    7. In 2-er Gruppen sollt Ihr 4 Handlungen suchen und erklären mit welchen man gegen den Schutz des geistigen Eigentums verstossen kann. (Achtung dies ist verboten!)