Bearbeitungszeit: bis Dienstag, 3. Februar 2004, 17:00 Uhr
Erzeugen Sie in Ihrem Webverzeichnis public_html ein Unterverzeichnis
woche1 und verschieben Sie alle Dateien, die Sie in der
letzten Woche erzeugt haben, dorthin.
Testen Sie dann mit Ihrem Browser, ob alles noch funktioniert (natürlich
mit den neuen URLs). Falls es nicht funktioniert, sind möglicherweise
die Zugriffsrechte auf den neuen Ordner zu streng gesetzt. Klicken Sie in diesem
Fall mit der rechten Maustaste auf den neuen Ordner und wählen Sie "Informationen".
Es öffnet sich ein Fenster, in dem Sie auf "Eigentümer & Zugriffsrechte" klicken können.
Damit nicht nur Sie, sondern auch der Web-Server das Recht hat, in Ihren Ordner
zu schauen, müssen sie die Leserechte für diesen Ordner auch der Gruppe und an Andere gewähren,
und diese Rechte auch auf alle Unterobjekte übertragen.
Erzeugen Sie dann mit PageSpinner eine Datei public_html/index.html,
in der Sie auf woche1/index.html verweisen.
Erzeugen Sie im Ordner public_html einen weiteren Unterordner namens woche2.
Legen Sie die Lösungen aller weiteren Aufgaben, die Sie diese
Woche bearbeiten, in diesem Verzeichnis ab!
Informieren Sie sich über die Definition von Überschriften, Absätzen, Zeilenumbrüchen, logischen Textgestaltungsbefehlen und Trennlinien. Da Selfhtml in erster Linie eine HTML-Anleitung ist, müssen Sie die Unterschiede berücksichtigen, die sich aus der Verwendung von XHTML ergeben. Die wesentlichsten Unterschiede sind:
<body>...</body>-Teil darf nicht einfach Text enthalten sein.
Text muss in weitere Tags eingeschlossen sein, z.B. Überschriften oder Absätze.<br> oder <hr> müssen mit einem Schrägstrich abgeschlossen
werden (z.B. <br /> oder <hr />). Das Leerzeichen vor dem
Schrägstrich ist zwar nicht vorgeschrieben, sichert aber die Kompatibiliät mit älteren Browsern.Weitere Informationen über die Unterschiede zwischen HTML und XHTML finden Sie im entsprechenden Abschnitt der Selfhtml-Anleitung.
Verwandeln Sie nun diesen unformatierten Text in ein sauberes W3-kompatibles XHTML-1.0-Transitional-Dokument mit Überschriften und Abschnitten. Verzichten Sie dabei allerdings auf weitere Formatierungen wie Zeichensatz, Textfarbe, Bündigkeit usw. Solche Dinge sollte man mit Style-Sheets (CSS) definieren, die Sie erst in der nächsten Aufgabe kennenlernen!
HTML bietet einerseits die Möglichkeit, Textabschnitte logisch zu kennzeichen (als Überschrift, Absatz, hervorgehobenen Text usw.), andererseits ist es auch möglich, physische Formatierungen zu definieren (Vorder- und Hintergrundfarbe, Schriftgrösse, Zeichensatz usw.). Jede Formatierung muss jedesmal wiederholt werden, wenn sie benutzt werden soll. Bei grossen Projekten, die aus vielen HTML-Seiten zusammengesetzt sind, ist dies sehr umständlich, insbesondere, wenn man eine einheitliche Formatierung aller Seiten wünscht, die auch nach Bedarf mit wenig Aufwand abgeändert werden kann.
Aus diesem Grund wurde mit den Cascading Style Sheets (CSS) eine neue Sprache erfunden, in der jeder logischen Formatierung eine physische Formatierung zugeordnet werden kann. Diese Zuordnungen können in einer eigenen Datei gespeichert werden, die von allen Dateien eines Projekts importiert werden kann.
Mit CSS können heute ausnahmslos alle physischen HTML-Formatierungsanweisungen ersetzt werden. Darüber hinaus bieten die CSS unzählige Formatierungsmöglichkeiten, die mit HTML alleine nicht durchführbar sind. Der Trend geht dahin, für ein und dasselbe Dokument CSS-Anweisungen für unterschiedliche Ausgabegeräte definieren zu können (Bildschirm, Drucker, sogar Audioausgabe). Weitere Informationen finden Sie in der SELFHTML-Anleitung im Abschnitt CSS Stylesheets und HTML. Welche Möglichkeiten es im Detail gibt, ist im Abschnitt CSS-Eigenschaften nachzulesen.
XHTML-1.0-Transitional ist die letzte HTML-Version, die die Benutzung physischer Formatierungen überhaupt noch erlaubt. XHTML-1.1 und XHTML-1.0-Strict verlegen die physische Formatierung ausschliesslich in Style-Sheets.
Beginnend mit dieser Aufgabe verzichten wir auch in diesem Kurs auf physische Formatierungen mit HTML-Tags und schreiben daher alle Dokumente in XHTML-1.1. Benutzen Sie daher für Ihre Dateien die bei der Notengebung angegebene Schablone.
Erzeugen Sie nun ihrem Webverzeichnis ein Unterverzeichnis
namens css und dort eine Datei namens default.css. Fügen Sie
in diese Datei die folgenden Zeilen ein:
body { font-family:Times New Roman,Serif;
font-size: 12pt;
color: black;
background-color: white }
a { color: blue }
h1 { text-align: center }
Importieren Sie nun diese Datei in das Dokument von Aufgabe 2, indem Sie in den Kopfbereich
(gekennzeichnet mit <head> ... </head>) die Zeile
<link rel="stylesheet" href="/login/css/default.css" type="text/css" />
einfügen (login müssen Sie durch Ihren login ersetzen).
Sehen Sie sich das Ergebnis an und verändern Sie dann die CSS-Datei nach Ihren persönlichen Vorlieben. Fügen Sie für weitere logische Formatierungen CSS-Definitionen hinzu. Importieren Sie dann Ihre CSS-Definitionen auch in die Dokumente von Woche 1, um ein einheitliches Aussehen Ihrer Seiten zu erreichen.
Es ist nicht praktisch, jede physische Formatierung in einer speziellen Datei abzulegen, insbesondere wenn nur ein einzelnes Element formatiert werden soll. Lesen Sie daher in der SELFHTML-Anleitung im Abschnitt Formate innerhalb eines HTML-Elements definieren. Was Sie dort kennen lernen, können Sie in der nächsten Aufgabe praktisch anwenden.
Schreiben Sie ein kleines HTML-Dokument, in dem Sie Ihre Gründe auflisten, warum Sie sich für diesen Wahlkurs entschieden haben. Die Liste kann numeriert sein oder aus Aufzählungspunkten bestehen. Besonders hübsch ist es, wenn Sie nicht den Standard-Numerierungs- oder -Aufzählungstyp wählen, sondern z.B. römische Ziffern für eine Numerierung oder Quadrate als Zeichen für eine Aufzählung benutzen. Verwenden Sie dafür aber keinenfalls HTML-Befehle, sondern unbedingt die CSS-Listenbefehle.
Sollten Ihnen gar keine Gründe einfallen, können Sie schlimmstenfalls auch irgend etwas anderes auflisten...
Schaffen Sie mit den Aufgaben von heute nochmals auf die gleiche Art Ordnung, wie Sie es mit den Aufgaben aus Woche 1 schon in Aufgabe 1 gemacht haben.
Vergessen Sie nicht, Ihre Seiten auf XHTML-1.1 und CSS-Fehler zu überprüfen!