Aufgaben vom 4.2.2004 (Wochen 3 und 4)

Bearbeitungszeit: Aufgabe 1 bis Dienstag, 10. Februar 2004, 17:00 Uhr, Aufgabe 2 bis Dienstag, 17. Februar 2004, 17:00 Uhr

1. Tabellen in HTML und CSS

Suchen Sie sich im Statistischen Jahrbuch der Schweiz 2002 eine Excel-Tabelle heraus, die nicht allzu lang, aber auch nicht ganz banal ist. Drucken Sie diese Tabelle aus. Achtung: Das Statistische Jahrbuch darf natürlich nicht einfach so auf dem Internet publiziert werden. Deswegen ist dieser Link nur innerhalb der Schule erreichbar!

Ihre Aufgabe besteht darin, die Tabelle möglichst originalgetreu in XHTML-1.1 und CSS wiederzugeben. Lesen Sie dazu im Abschnitt Tabellen von SELFHTML nach, wie Tabellen erzeugt werden und wie man kompliziertere Strukturen (Spalten, die sich über mehrere Zeilen erstrecken und umgekehrt) erzeugt. Es ist von Vorteil, wenn Sie mit diesem Wissen die Tabelle einmal erzeugen und sich noch keine Gedanken über Ränder, Abschnitte, Schriftarten, Schriftstile, Hintergrundfarben usw. machen. Die Formatierungen der Tabelle können Sie hinterher durch die Angabe entsprechender CSS-Anweisungen einstellen. Die wichtigsten CSS-Abschnitte dazu finden Sie unter Tabellen mit CSS gestalten aufgelistet.

Viele Tabellen enthalten Fussnoten. Diese können Sie mit <sup>...</sup> erzeugen1.

Vergessen Sie die XHTML-1.1 und die CSS-Validierung nicht!

2. Frames verwenden

Bislang enthält in Ihrer Dateistruktur die Datei public_html/index.html Verweise auf die Dateien public_html/woche1/index.html und public_html/woche2/index.html, welche wiederum Verweise auf die einzelnen Aufgaben der jeweiligen Woche enthalten.

Verändern Sie Ihren "Internet-Auftritt" nun dahingehend, dass Sie den Hauptindex in einem Frame darstellen, und gleichzeitig einen Unterindex in einem zweiten Frame darstellen. Das dritte Frame zeigt dann die eigentliche Aufgabe an.

Die SELFHTML-Anleitung beschäftigt sich im Kapitel Frames mit dem Thema. Um Frames mit speziellen Eigenschaften (Fensterrahmen, Scrollbalken usw.) zu definieren, sollten Sie auch den Abschnitt Eigenschaften von Frames lesen. Ein praktischer Hinweis ist auch im Abschnitt Zielfensterbasis zu finden.

Zumindest den Inhalt ersten zwei Abschnitte dieses Kapitels müssen Sie verstehen, um die Aufgabe zu lösen. Ihr Editor PageSpinner unterstützt Sie dann noch zusätzlich bei der Definition eines Framesets und erledigt Ihnen insbesondere die (einigermassen, s.u.) XHTML-konforme Definition eines Frameset-Dokuments. Der Dokumententyp eines XHTML-Framesets ist

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Rund um Framesets gibt es ein Ärgernis und eine Schwierigkeit. Das Ärgernis dreht sich um die Attribute von Framesets und ist in der SELFHTML-Anleitung unter Rahmendicke (im Zusammenhang mit Frames) beschrieben. Ignorieren Sie die Tatsache, dass Sie mit framespacing="0" und border="0" zwei nicht W3C-kompatible Attribute benutzen und übernehmen Sie das Frameset so, wie es Ihnen vom PageSpinner angeboten wird (die Breite der einzelnen Fenster können Sie natürlich verändern).

Die Schwierigkeit mit Framesets betrifft das Attribut target des <a>-Tags, mit dem es möglich ist, einen Link in einem anderen Frame (oder sogar in einem anderen Fenster) zu öffnen. Dieses Attribut ist in den Versionen 1.0-Strict und 1.1 von XHTML nicht mehr enthalten. In XHTML-1.0-Strict kann das Attribut gar nicht mehr verwendet werden, in XHTML-1.1 ist seine Verwendung nur möglich, wenn zusätzlich zur XHTML-1.1-DTD (DTD = Document Type Definition = Dokumententypdefinition) noch das Modul xhtml-target-1.mod geladen wird.

Grundsätzlich ist es möglich, das target-Attribut vollständig durch JavaScript zu ersetzen. Benutzer, die auf ihrem Browser JavaScript einschränken (z.B. um Popup-Fenster zu unterdrücken), werden dann allerdings Probleme mit der Seite bekommen, weil sich z.B. Links in neuen Fenstern nicht öffnen. Das Einbinden des target-Moduls ist daher vorzuziehen. Leider ist das Einbinden eines Moduls nicht so einfach wie in vielen anderen Programmiersprachen. Das Modul kann nicht einfach zusätzlich zur Dokumententypdefinition in die HTML-Dateien eingebunden werden, sondern es muss eine eigene DTD hergestellt werden, welche sowohl das standardmässige XHTML-1.1 wie auch das target-Modul einbindet, und diese DTD muss an Stelle des offiziellen XHTML-1.1 angegeben werden. Eine solche DTD ist auf unserem Webserver unter http://www.gymmuenchenstein.ch/dtd/xhtml11-target.dtd abgelegt. Wenn Sie also ein XHTML-1.1-konformes Dokument schreiben wollen, das zusätzlich das target-Attribut benutzt, müssen Sie folgenden Dokumententyp angeben:

<!DOCTYPE html PUBLIC "XHTML 1.1 with Target Module included" 
    "http://www.gymmuenchenstein.ch/dtd/xhtml11-target.dtd">

Abgesehen davon bleibt alles gleich. Sie können (und sollen!) Ihre Dokumente auch mit dieser DTD W3C-validieren lassen; mit Hilfe der Adresse lädt der Validator die DTD und überprüft das Dokument entsprechend. Sie dürfen auch (obwohl die DTD auf einem "nicht-offiziellen" Server liegt) weiterhin mit Recht behaupten, dass Ihre Dokumente XHTML-1.1-konform sind, denn die Möglichkeit zur Verwendung von Modulen ist gerade das Neue an XHTML 1.1. Zudem verwenden Sie ja nur offizielle W3C-Module.


1Wenn Sie wissen wollen, wie man Links an bestimmte Stellen in einem Dokument realisert, lesen Sie entweder den Quelltext dieses Dokuments oder den Abschnitt Anker für Verweise definieren. Es ist natürlich hübsch, wenn Sie die Fussnoten in Ihrer Tabelle auch durch Links darstellen. Beachten Sie jedoch, dass Sie in XHTML das name-Attribut durch das id-Attribut ersetzen müssen!

Valid XHTML 1.1! Valid CSS!