Aufgaben vom 18.1.2008 (Woche 1)

Bearbeitungszeit: bis Freitag, 25. Januar, 17:00 Uhr

1. Mac Desktop einrichten

Öffnen Sie die Macintosh HD und klicken Sie auf "Programme" oben in der Schaltleiste. Ziehen Sie die Programme "Firefox", "Safari" und "X11" in das Dock. Öffnen Sie den Ordner "PageSpinner" und ziehen Sie das Programmicon aus diesem Ordner ebenfalls ins Dock.

2. Ein erstes Webdokument erstellen

Starten Sie den PageSpinner. Wählen Sie im Menu "PageSpinner" den Punkt "Preferences". Klicken Sie auf "Default Editor Options" und wählen Sie den XHTML Mode. Klicken Sie auf "OK" und öffnen Sie ein leeres Dokument. Ändern Sie den Titel nach Ihrem Geschmack ab und fügen Sie in den Leerraum zwischen <body> und </body> folgendes ein

<p>
Ich bin so glücklich!
</p>

Speichern Sie die Datei im Ordner Documents/public_html unter dem Namen meinersteshtml.html auf dem Server ab. Klicken Sie dazu im Abspeicherungsfenster zunächst links auf "Documents". Mit einem Webbrowser sollten Sie nun in der Lage sein, die Datei unter http://www.gymmuenchenstein.ch/[ihr Accountname]/meinersteshtml.html zu sehen.

Die gleiche Übung wiederholen Sie nun mit einer weiteren Datei (nennen Sie sie javascript.html), in die Sie zwischen dem <meta>- und dem </head>-Tag folgendes einfügen:

<script type="text/javascript">
<!--
alert("Hier kommt JavaScript!");
//-->
</script>

Zuletzt machen Sie das gleiche noch mit einer Datei, die PHP-Code enthält und die ersterversuch.php heissen soll (wie immer im Verzeichnis Documents/public_html). Fügen Sie in den Body ein:

<?php
for($i = 0; $i < 20; $i++)
  echo "Mit PHP macht's erst richtig Spass!<br>\n"
?>

3. Quellcode ansehen

Wenn Sie sich den Quelltext Ihrer PHP-Datei vom Browser aus ansehen (rechte Maustaste!), stellen Sie fest, dass dieser Text gar kein PHP mehr enthält. Das liegt daran, dass bereits der Server die PHP-Befehle verarbeitet (in diesem Fall: 20mal den gleichen Text schreiben) und nur das Ergebnis über das Netz geschickt wird.

Der Server "kann aber auch anders". Dateien, die auf .phps enden, werden vom Server einfach so umgewandelt, dass das Ergebnis auf dem Browser aussieht wie der Quellcode. Noch besser: PHP-Programme werden dabei sogar in Farbe dargestellt.

Wir könnten nun eine Kopie der PHP-Datei erstellen und ihr einen neuen Namen geben. Besser ist es aber, nur einen Link (keinen Web-, sondern einen Unix-Link, vergleichbar mit einem Verweis in Windows oder einem Alias auf dem Mac) zu erstellen, weil Sie sonst zwei Dateien mit dem gleichen Inhalt haben (und Sie wären dafür verantwortlich, dass in beiden immer das selbe steht!). Ein Unix-Link lässt sich allerdings nur mit dem Terminal direkt am Server erledigen.

Öffnen Sie daher via Einfachklick auf das Dock das Programm X11. Geben Sie ein (mit Return abschliessen):
cd public_html
Geben Sie ein:
ln -s ersterversuch.php ersterversuch.phps
Genau so erzeugen Sie Verweise auf die Dateien meinersteshtml.html und javascript.html (Endung jeweils .phps statt .html). Sehen Sie sich die .phps-Dateien im Browser an!

4. Hintergrundfarbe

Unser Hauptnachschlagewerk für alle Fragen rund um HTML, XHTML, CSS und JavaScript ist die Online-Anleitung Selfhtml. In dieser Aufgabe lesen Sie nach, wie man die Hintergrundfarbe einstellt. Erzeugen Sie eine Datei namens hintergrund.html, geben Sie dieser eine schöne oder schräge Hintergrundfarbe und beschreiben Sie im Textkörper der Datei gleich noch, wie eine Farbcodierung wie z.B. #FF004A zu verstehen ist.

5. Etwas verlinken

In dieser Aufgabe brauchen Sie die Selfhtml-Anleitung, um herauszufinden, wie man einen Link erzeugt. Erzeugen Sie dann eine Datei index.html, in der Sie Links auf alle anderen Dateien und Unix-Links einfügen, die Sie heute erzeugt haben.

6. W3C-Test

Stellen Sie sicher, dass Ihre Dokumente den Standardanforderungen des W3-Konsortiums entsprechen. Dazu geben Sie die URL ihrer Dokumente ins Eingabefeld des W3C-Testdienstes ein. Falls Fehler angezeigt werden, korrigieren Sie diese. Andernfalls folgen Sie den Anweisungen, die gegeben werden, um Ihre Seiten mit dem W3C-Qualitätslabel zu versehen. Dieses Label sollte wie auf dieser Seite aussehen (fast, denn Sie arbeiten zumindest vorläufig mit XHTML 1.0 Transitional, während diese Seite in XHTML 1.1 geschrieben ist) und beim Anklicken gerade einen Test durchführen.

Diese Aufgabe gibt selbst keine Punkte, Sie erhalten jedoch für die anderen Aufgaben nicht die volle Punktzahl, wenn Sie diese Aufgabe nicht erledigen.

Valid XHTML 1.1! Valid CSS!