MMT Webprogrammierung 1 Im Winter Semester 2009

Web Programmierung 1
Ein Skriptum zu den gleichnamigen Lehrveranstaltungen

im 1. Studienjahr des Studiengangs MultiMediaTechnolgy
an der Fachhochschule Salzburg
DI Brigitte Jellinek
Version für das Studienjahr 2009/10,
Stand vom 21.01.2010
Überblick
1. Web Basics 6
2. CSS Basics 24
3. CSS für Layout und Interaktion 37
4. Formulare, URLs, erstes Javascript 61
5. Javascript und DOM 78
6. jQuery 88
7. AJAX 95
8. Anhänge 101
Webprogrammierung 1 2
Ziele
Diese Lehrveranstaltung hat mehrere unabhängige Ziele. Am Ende des 1.Semesters können Sie sa-
gen:
• Ich kann Webseiten erstellen, und habe auch schon eine kleine Web-Site vollständig umge-
setzt.
• Ich verstehe wie das Web funktioniert, kann HTML, CSS, Javascript und PHP Code lesen, Feh-
ler suchen und neue Entwicklungen einordnen. Ich kenne die Problemstellung der Browser-
kompatiblität.
• Ich kenne die Arbeitsteilung in einem Web-Projekt und kann meinen (technischen) Teil mit
HTML, CSS und Javascript/jQuery beitragen.
• Ich kann die Qualität einer Webseite beurteilen. Ich kenne verschiedene Qualitäts-Kriterien
und kann sie gegeneinander abwägen.
• In meinem Blog zeige ich mehrere kleine Web-Projekte.
Ausblick:
Diese Lehrveranstaltung führt im 2.Semester mehrere Themen, die im ersten Semester noch separat
behandelt wurden zusammen: Datenbanken, UNIX, Webprogrammierung mit HTML, CSS, Javascript
werden zusammen mit der Programmiersprachen PHP eingesetzt um Web-Applikationen zu bauen.
Am Ende des zweiten Semesters können Sie sagen:
• Ich kann Webapplikationen erstellen, und habe auch schon eine kleine Applikation inklusive
Datenbank vollständig umgesetzt.
• Ich kenne die Arbeitsteilung in einem Web-Projekt und kann meinen (technischen) Teil mit
Javascript, PHP und MySQL beitragen.
• Ich kann Qualitätsansprüche an eine Webapplikation: Ich kenne die REST-Prinzip, ich kenne
Sicherheitsprobleme und Lösungsansätze, ich kann AJAX einsetzen.
• In meinem Blog zeige ich mehrere Artikel über Aspekte einer Web-Applikation.
Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

Inhaltsverzeichnis
1. Web Basics 6
1.2 Kurze Geschichte des World Wide Web 7
1.3 Drei Standards definieren das Web 8
1.3.2 URL 11
1.3.3 HTTP 12
1.4 HTML Basics 13
1.4.1 Sonderzeichen 13
1.4.2 HTML-Tags 14
1.4.3 Whitespace 14
1.4.4 Attribute 15
1.4.5 Kompatibilität 15
1.4.6 Text formatieren 16
1.4.7 Bilder 17
1.4.8 Links 19
1.4.9 Gesamt-Struktur einer Webseite 19
1.4.10 Listen 20
1.4.11 Tabellen 20
1.5 Upload und Tools 20
1.5.1 Validator 20
1.5.2 Upload 21
2. CSS Basics 24
2.1 Kurzvorstellung von Stylesheets 25
2.1.1 Schriftart 25
2.1.2 Schriftgröße 26
2.1.3 Absätze 26
2.1.4 CSS erforschen mit Firebug 26
2.2 Geschichte der Cascading Style Sheets 27
2.2.1 Stylesheet Syntax 28
2.2.2 Klassen, IDs, SPANs und DIVs 29
2.2.3 Maßeinheiten in Stylesheets 31
2.3 Graceful Degradation 34
3. CSS für Layout und Interaktion 37
3.2 URLs 38
3.2.1 Absolute und relative URLs 38
3.2.2 Konfiguration des Webservers und URLs 39
3.2.3 Pragmatische Tipps zu Dateienamen und URLs 42
3.3 Rahmenbedingungen für Layout 42
3.3.1 Auflösung 42

3.3.2 Brutto-Fläche vs. Netto-Fläche 44

3.3.3 Entwurf für mehrere Auflösungen 45
3.3.4 Firefox AddOn MeasureIt 47
3.3.5 Bilder und Größe 48
3.3.6 Schriftgröße 48
3.4 CSS Selektoren 50
3.5 CSS für Layout 52
3.5.1 Width und Auto 53
3.5.2 Float 53
3.5.3 Absolute Positionierung 55
3.6 Navigationsmenü mit CSS 56
3.6.1 Navigationsmenü wiederverwerten mit PHP 57
3.6.2 :hover und :focus 58
3.6.3 Dropdown Menü 59
4. Formulare, URLs, erstes Javascript 61
4.2 Formulare 61
4.2.1 Eingabefelder 62
4.2.2 Interaktionsmöglichkeiten 65
4.3 Daten absenden 66
4.3.1 Daten an E-Mail senden 66
4.3.2 Daten senden mit Methode GET 67
4.3.3 URL als Programm-Schnittstelle 68
4.4 Formular und PHP 69
4.5 Formular und Javascript 70
4.5.1 Javascript Einbetten 70
4.5.2 Popup-Fenster 71
4.5.3 Formulare 71
4.5.4 document.write 71
4.5.5 Ereignisse und Ereignisgesteuerte Programmierung 73
4.5.6 Formular prüfen 76
5. Javascript und DOM 78
5.2 Hintergründe 79
5.2.1 Javascript und Java 79
5.2.2 Geschichte von Javascript 79
5.2.3 Document Object Model 80
5.3 Basic Javascript 81
5.3.1 Einbindung von Javascript 81
5.3.2 Syntax von Javascript 83
5.3.3 DOM Beispiel 86
6. jQuery 88
6.2 Besondere Javascript-Schreibwesen in jQuery 90

6.2.1 Mein Name ist Dollar 90

6.2.2 Funktionen als first-class citizens 91
6.2.3 Anonyme Funktionen 91
6.3 Selektieren und Manipulieren mit jQuery 92
6.4 Interaktion mit jQuery 92
6.5 Formulardaten Prüfen mit jQuery 93
7. AJAX 95
7.2 Was ist AJAX? 96
7.3 Simples AJAX Beispiel mit jQuery 97
7.4 jQuery Beispiel mit Callback-Funktion 98
8. Anhänge 101
8.1 Quellenverzeichnis 101
8.2 Stichwortverzeichnis 103

1. Web Basics
Der erste Termin der Lehrveranstaltung klärt organisatorische Fragen, handelt die Ursprünge des
Web, stellt wichtige Fachbegriffe vor und gibt einen Einstieg in HTML
Was Sie wissen sollten
• Wer das World Wide Web erfunden hat, wer die Standards des Webs definiert
• Wie die drei Standards HTTP, URL und HTML zusammenspielen und das Web definieren.
• Wie eine HTTP Anfrage funktioniert
• Wie ein Dokument im HTML und XHTML-Format aufgebaut ist
• Die HTML-Tags für Überschriften, Absätze, Links, Bilder
• Welche Methoden des Uploads es gibt
Was Sie können sollten
• Ein einfaches Dokument im XHTML-Format erstellen, einen vorgegebenen Text in XHTML

umwandeln
• Die Korrektheit des XHTML-Codes mit dem Validator des World Wide Web Consortium über-
prüfen
• Fehler in einem XHTML Dokument ausbessern, bis es valide ist
• Dokumente auf einen Webserver hochladen
Tools die Sie in diesem Kapitel installieren und ausprobiert sollten
• Desktop Webbrowser:
− Firefox
− Microsoft Internet Explorer (msie)
− Opera
− Safari (nur auf Mac)
• „exotische“ Webbrowser:
− Lynx
− Opera Mobile (nur auf Handys)

− Webbrowser Ihres Handys, Ihrer Spielkonsole, …
• Firefox AddOn FireFTP
• Firefox AddOn Web Developers Toolbar
• Secure File Transfer Client
Weitere Informationsquellen
• Selfhtml. http://de.selfhtml.org/
• Website des WWW-Consortiums. http://www.w3c.org/
• HTML Validator des WWW-Consortiums. http://validator.w3.org/
• Plain Old Semantic HTML (POSH). http://microformats.org/wiki/POSH
1.2 Kurze Geschichte des World Wide Web
Viele moderne Erfindungen sind das Ergebnis von Teamarbeit und langen Planungsprozessen. Nicht
so das World Wide Web: es geht auf eine einzelne Person zurück. Tim Berners-Lee, gebürtiger Eng-
länder und studierter Physiker, hat es in den Jahren 1989, 1990, 1991 als EDV-Mitarbeiter am CERN
in der Schweiz entwickelt.
Zu dieser Zeit – Anfang der 90er Jahre – war das Internet ein rein akademisches Projekt mit sehr ge-
ringen Bandbreiten, wie folgendes „fact sheet“ aus der Zeit dokumentiert:
Date: Fri, 20 Mar 1992 13:50:09

From: dekker@rare.nl (Marieke G. Dekker)
Subject: ebone fact sheet, for your information
....
Ebone will operate a core backbone between London, Stockholm,
Amsterdam, Geneva, and France (Montpellier).
Stockholm E
\ /
256 Kbps / \ 512 Kbps
/ \
/ \
London E E Amsterdam
| |
| 512 Kbps |
| |
| |
| 256 Kbps |
| |
France (Montpellier) E-----------------E CERN
256 Kbps
Intercontinental links to the United States are provided from London,
Stockholm and Geneva. The European links operate initially at speeds
between 256 and 512 kilobits per second.
Neben E-Mail und FTP wurden Newsgroups – ähnlich den heutigen Diskussionsforen – als wichtigste
Form des Datenaustausches verwendet, meist im Textmodus, ohne grafische Oberfläche.

Abbildung 1: Der erste grafische Webbrowser, Tim Berners-Lee, die erste Webseite des CERN im Line mode browser
Berners-Lee definierte als Eckpunkte die technischen Standards des Web (siehe nächstes Kapitel) und
programmierte – gemeinsam mit KollegInnen – die erste Software. In Abbildung 1 ist links Tim Ber-
ners-Lee mit dem ersten grafischen Webbrowser abgebildet. Dieser Browser ist gemeinsam mit dem
Betriebssystem NeXT verschwunden. Rechts ist ein Screenshot des Line Mode Browsers zu sehen, der
die damalige Homepage des CERN anzeigt. Der Line Mode Browser funktionierte auch ohne Grafik.
Links konnten mit Nummern aufgerufen werden.
1.3 Drei Standards definieren das Web
Für diese Lehrveranstaltung ist eine technische Sicht auf das World Wide Web die relevante. Das
World Wide Web ist also ein verteiltes (Client/Server) Informationssystem, das durch folgende drei
Standards in der jeweils aktuellen Form definiert wird:
• URL (Uniform Resource Locators)

nach RFC 1738 - http://www. w3. org/Addressing/rfc1738. txt
• HTTP (Hypertext Transfer Protocol)

nach RFC 2616 - http://www. w3. org/Protocols/rfc2616/rfc2616. html
• (X)HTML (Hypertext Markup Language)

in der Version XHTML 1. 0 transitional
Die entsprechenden Dokumente finden Sie unter den oben angebenen URLs am Webserver des
World Wide Web Consortiums.
Rund um diese drei Standards ordnen sich weitere wichtige Begriffe an:

Client/Server
Das Client/Server Prinzip ist ein allgemeines Prinzip wie Dienste in einem Computernetzwerk aufge-
baut sein können: Ein Server ist ein Computer der einen bestimmten Dienst anbietet, ein Client ist
der „Kunde“, also der Computer der den Dienst in Anspruch nimmt.
Nach diesem Prinzip funktionieren Web, E-Mail, FTP:
Client Server
Web Webbrowser – lädt Webseiten vom Sever Webserver – liefert auf Anfrage die gespei-
und zeigt sie am Bildschirm an cherten Webseiten
E-Mail E-Mail Programm – lädt E-Mails vom Ser- Mailserver – speichert E-Mail in verschie-
ver, zeigt sie an, kann neue E-Mails an ei- denen Postfächern
nen Server schicken der sie zustellt, …
FTP FTP-Client – lädt Dateien von einem Server FTP-Server – speichert Dateien
runter oder auf einen Server rauf
Das Gegenstück zu Client/Server ist Peer-zu-Peer. Dabei sind alle beteiligten Computer gleichberech-
tigt, es gibt keine verschiedenen Rollen. Nach diesem Prinzip funktionieren Datei-Tauschbörsen.
Webbrowser
Ein Webbrowser, oder kurz Browser, ist ein Programm, das bei Eingabe einer URL über http eine
HTML-Webseite laden und anzeigen kann, es ist also der Client zum World Wide Web.
Es gibt sehr viele verschiedene Webbrowser. Abbildung 2 zeigt drei davon: den Browser „Mosaic“,
der im Jahre 1993 als zweiter Webbrowser mit grafischer Oberflächen stark zur Verbreitung des
World Wide Web beigetragen hat, und die Browser Opera und Mozilla in den Versionen, die im Jah-
re 2004 verwendet wurden.
Abbildung 2: Webbrowser: Mosaic (1993), Opera(2004) und Mozilla(2004)

Alle eben erwähnten Browser haben gemeinsam, dass sie auf einem typischen „Büro-
Computer“ eingesetzt werden, einem Computer mit grafischer Oberfläche und einem Farb-Monitor.
Es gibt aber auch „exotischere“ Browser. Abbildung 3 zeigt den Browser lynx, der nur Text darstellt,
aber keine Bilder. Daneben sehen Sie eine „Braille Ausgabezeile“, ein Gerät, das eine Zeile Text in
eine Zeile Blindenschrift übersetzt. Mit diesem Webbrowser und diesem Ausgabegerät können Blin-
de im Web surfen.
Abbildung 3: Text-Only Browser lynx und Braille Ausgabegerät
Webseite
Die Dokumente, die im Webbrowser dargestellt werden nennt man Webseiten. Eine Webseite ist –
technisch gesehen – ein Dokument im HTML-Format.
Eine Webseite kann – im Gegensatz zu einer Seite in einem Buch – beliebig lang sein. Ist die Seite zu
groß / zu lang für das Browser-Fenster, dann erscheint ein Scrollbalken mit dem man den Rest der
Seite erreichen kann, wie in Abbildung 4 gezeigt.
Abbildung 4: Ein Browser zeigt eine lange Webseite an

Website
Als Webseite wird also ein Dokument bezeichnet. Verwechseln Sie diesen Begriff nicht mit dem eng-
lischen Wort Website. Eine Website besteht aus mehreren Webseiten auf einer gemeinsamen Do-
main, die zusammen gehören und untereinander verlinkt sind. Achtung: es gibt kein Wort Webside.
1.3.2 URL
Eine URL ist die Adresse eines Dokuments am Web oder in einem anderen Online-Informations-
system. Ein Beispiel:
http://kurse.horus.at:8080/2006-ss/www-mm/index.html#literatur
Diese URL zerfällt in 4 Teile:
http Übertragungsprotokoll
kurse.horus.at Domain Name (oder IP-Adresse) des Webservers
8080 Port am Server. Wenn keiner angegeben ist: Port 80
/2006-ss/www-mm/index.html Wird vom Webserver interpretiert, meist eine Pfad-Angabe
Literatur Textmarke innerhalb des Dokuments –

wird vom Browser interpretiert wenn das Dokument darge-
stellt wird
Im Zusammenhang mit Web-Formularen werden wir oft mit URLs zu tun haben, die Parameter ent-
halten:
http://www.google.com/search?q=schokolade&ie=utf-8&oe=utf-8
Mit den Zeichen ? & = werden hier Parameter an die URL angefügt.
HTTP-URLs sind nicht die einzigen URLs, ein Beispiel mit einem anderen Übertragungsprotokoll:
mailto:brigitte.jellinek@fh-salzburg.ac.at

1.3.3 HTTP
Das Hypertext Transfer Protocol ist ein relativ simples Protokoll, das immer TCP1-Verbindungen ver-
wendet. Alle Aktivität wird vom Client (=Browser) initiiert. In der einfachsten Form sieht HTTP so aus
(hier wieder am Beispiel der URL http://kurse.horus.at/2006-ss/www-mm/index.html#literatur):
1. Eine URL wird in den Browser eingetippt, oder ein Link wird im Browser angeklickt
2. Der Browser analysiert die URL und ermittelt daraus den Domain Namen des Webservers
(kurse.horus.at), löst diese über DNS zur IP-Adresse auf (193.80.109.212)
3. Der Browser baut eine TCP-Verbindung zu 193.80.109.212, Port 80 auf
4. Er sendet eine http-Anfrage:

„GET /2006-ss/www-mm/index.html HTTP/1.0\n\n“
5. Der Webserver nimmt die Anfrage entgegen und analysiert sie. Meistens interpretiert er sie
als Aufforderung, eine bestimmte Datei von der Platte zu lesen
6. Der Webserver schickt die http-Antwort an den Browser, diese besteht aus einem Statusco-
de, z. B. „200 OK\n\n“, gefolgt vom Inhalt der Datei index.html.
7. Der Browser nimmt das Dokument in Empfang und stellt es geeignet dar
8. Der Browser scrollt das Dokument bis zur Textmarke literatur
9. Der Browser beendet die TCP-Verbindung
Die nächste Anfrage des Clients kann sich an einen anderen Server, oder wieder an denselben Server
richten. Die nächste Anfrage, die der Server beantwortet, kann vom selben Client kommen, oder von
einem anderen Client. Keiner der beiden (Client und Server) muß speichern mit wem er gerade Daten
1
Mehr über TCP lernen Sie in der Lehrveranstaltung „Multimedia-Netzwerke“ im 3.Semester

ausgetauscht hat, um die nächste Anfrage durchführen/beantworten zu können. Das Protokoll ist
also stateless. Dadurch ist es sehr einfach einen Server zu programmieren.
Das ist nur die einfachste Version des Protokolls, mit Proxies, Caching und Keep-Alive wird es kompli-
zierter.
1.4 HTML Basics
In der Übung werden wir XHTML Version 1. 0 transitional verwendet. Die wichtigsten HTML-Tags
(Links, Bilder, Tabellen, Formulare) werden Sie bald auswendig können. Alle Details können Sie am
HTML-Schwindlzettl oder bei selfhtml nachschlagen.
Das X von XHTML steht für die Kompatibilität mit XML. Die Dateien könne weiterhin die Endung .htm
oder .html haben, oder .xhtm, .xhtml. Im Unterschied zu HTML ist XHTML strenger in der Schreib-
weise. Am Web finden Sie sowohl Tutorials zu HTML als auch zu XHTML – lassen Sie sich davon nicht
verwirren!
HTML-Dateien (Hyper Text Markup Language) bestehen aus reinem Text, in unserem Falle entweder
aus Text im Format ISO 8859-1 (Latin-1)2 oder im Format utf-8. Abbildung 5 zeigt wie dieses Format
im Windows Notpad / Editor gesetzt wird: ISO 8859-1 wird hier als ANSI bezeichnet.
Abbildung 5: Auswahl des Charactersets beim Speichern mit dem Windows Notepad / Editor
1.4.1 Sonderzeichen
Sonderzeichen in HTML nennt man „character entities“. Sie haben die From &entityname;
Folgende Character Entities müssen Sie verwenden:
2
Das ist der ASCII-Zeichensatz, ergänzt um die in westeuropäischen Sprachen nötigen Zeichen wie
üöä ÜÖÄ ß é ñ

Gewünschtes Zeichen Character Entity

< <
> >
& &
Folgende Character Entities können Sie vermeiden, indem Sie das Zeichen selbst im Code verwenden:
Gewünschtes Zeichen Character Entity

Ä Ä
Ä ä
ß ß
1.4.2 HTML-Tags
Die gewünschte Formatierung des Textes wird mit HTML-Tags angegeben
1. Tags sind zwischen spitzen Klammern eingeschlossen.
2. Zu (fast) jedem "Anfangs-Tag" gibt es einen "End-Tag", der sich nur durch den Schrägstrich
vom Anfangs-Tag unterscheidet.
Z. B. <p>hier der Absatz</p>.
3. (in XHTML) müssen "alleinstehende" Tags mit einem Schrägstrich am Ende geschrieben wer-
den: <br />
In XHTML werden Tags immer klein geschrieben (bei HTML war die Groß- oder Kleinschreibung egal).
Die wichtigsten Tags werden weiter unten vorgestellt.
1.4.3 Whitespace
Sogenannter "whitespace" - das sind mehrere Leerzeichen, Tabulatoren und Zeilenumbrüche hinter-
einander – wird vom Browser völlig ignoriert. Ob Sie also in Ihrer HTML-Datei ein Leerzeichen oder 7
Leerzeilen einfügen macht keinen Unterschied. (gar kein Leerzeichen oder ein Leerzeichen macht
schon einen Unterschied) Die folgenden beiden Dokumente sind also äquivalent:
<p>Halli Hallo</p> <p>

Halli
Hallo
</p>
Nur die Tags beeinflussen die Darstellung der Webseite. Sie müssen den Tag <br /> verwenden um
einen Zeilenumbruch auf der Webseite zu erzeugen – dies ist aber nur selten sinnvoll, da der Browser
einen automatischen Zeilenumbruch durchführt.

1.4.4 Attribute
Manche Tags können Attribute enthalten. Ein Beispiel ist der Tag <img /> der ein Bild in die Seite
einfügt (Englisch: Image). Die wichtigsten Attribute von <img /> sind src (von Source = Quelle) und
alt (Alternative Darstellung).
<img src="neu.gif" alt="Das ist neu!" />
In XHTML werden Tags immer klein geschrieben bei HTML war die Groß- oder Kleinschreibung egal.
Es ist egal, in welcher Reihenfolge Sie die Attribute schreiben:
<img alt="Das ist neu!" src="neu.gif" />
oder
<img alt="Das ist Neu!"

src="neu.gif"
bli="bla, blo"
/>
Das Attribut bli, welches HTML nicht kennt, wird wie andere unbekannte Attribute einfach ignoriert.
Der Wert eines Attributes muß in Anführungszeichen geschrieben werden. (in HTML gab es eine
Ausnahme für Werte die keine Leerzeichen enthalten (wie z. B. Zahlen), diese konnten auch ohne
Anführungszeichen geschrieben werden, bei XHTML ist das verboten)
<img alt="Das ist Neu!" src="neu.gif"

width=50 height="15" />
ACHTUNG: ein häufiger Fehler ist es, das zweite Anführungszeichen zu vergessen:
<img alt="Das ist neu!" src="neu.gif />
1.4.5 Kompatibilität
Jeder Browser (egal ob Firefox, Microsoft Internet Explorer, Opera,. . . ) kann jedes HTML-Dokument
darstellen. Mit jedem Editor (egal ob Dreamweaver, Frontpage, GoLive,. . . ) kann jedes HTML-
Dokument bearbeitet werden. Neue Tags, die z. B. ein Browser nicht erkennt, sind zu ignorieren – es
gibt keine Fehlermeldungen!
Wenn das W3C in HTML Version 21 beispielsweise den neuen Tag <jump> (hüpfenden Text) einführen
würde, können Sie diesen Tag auf Ihrer Webseite verwenden. Der Text würde jedoch nur in den neu-
esten Versionen der Browser (die schon die Version 21 kennen) hüpfend dargestellt. In älteren Brow-
sern wird der Tag <jump> ignoriert:

Code Ein älterer Browser interpretiert das als:

<p>Dies ist meine erste <p>Dies ist meine erste supercoole Websei-
<jump>supercoole</jump> Webseite!!!! te!!!!</p>
</p>
Bevor Sie also einen neuen Tag einsetzen, sollten Sie sich darüber klar sein, welche Versionen der
Browser diesen Tag darstellen und wie viel Prozent Ihres Zielpublikums schon eine passende Brow-
ser-Version benutzen. Meist können Sie eine Seite so gestalten, dass auch mit älteren Browsern der
gesamte Inhalt lesbar ist.
Schlecht Besser:
<p>Zu den hüpfenden Terminen sind noch <p>Zu den markierten Terminen sind noch
Plätze im Kurs frei: Plätze im Kurs frei</p>
</p> <ul>
<ul> <li><jump>Montag *</jump>
<li><jump>Montag</jump> <li>Dienstag
<li>Dienstag <li>
<ul>
Auf älteren Browsern geht die wichtigste Infor- Auf allen Browsern ist erkennbar zu welchen Ter-
mation verloren! minen noch Plätze frei sind.
Diese Herangehensweise an Neuerungen nennt man „graceful degradation“ – davon werden Sie
noch viel hören.
Hinweis: Der <jump>–Tag ist ein Scherz, den gibt es nicht wirklich, und wird es hoffentlich nie geben.
1.4.6 Text formatieren
Wir unterscheiden zwischen HTML-Tags die Blöcke definieren, und solchen die das nicht tun. Block-
bildende Tags beanspruchen immer einen rechteckigen Bereich bei der Ausgabe, nicht blockbildende
Tags tun das nicht.
Abbildung 6: Darstellung von blockbildenden und nicht-blockbildenden Tags
Der em-Tag ist nicht-blockbildend und wird im zweiten Absatz auf zwei Zeilen umgebrochen.

Formate, die Text-Blöcke definieren:

Normaler Fließ-Text <p>Text text text, text text. Text text text,
text text. Text text text, text text. Text
und text text, text text. </p>
Zentrierter Text <p style="text-align:center;">Text text text,

text text. Text text text, text text. Text
text text, text text. Text und text text,
text text. </p>
Haupt-Überschrift (1. Ebene) <h1>Überschriftstext</h1>
Unter-Überschrift (2. Ebene) <h2>Überschriftstext</h2>
Unter-Überschrift (3. Ebene) <h3>Überschriftstext</h3>
Block-Zitat (eingerückt) <blockquote>Alle meine Entchen schwimmen auf

dem See</blockquote>
Format für kleinere Text-Abschnitte
Diese müssen Sie innerhalb eines Blocks verwenden. Diese Formate werden unterschieden in logi-
sche und physische Elemente. Die logischen geben die genaue Darstellung nicht vor.
Sehr stark betonter Text (meist fett) Eine <strong>wichtige</strong> Sache
Betonter Text (meist kursiv) und eine <em>interessante</em> Sache
Physische Elemente geben die genaue Darstellung vor. Das sind eigentlich „altmodische Tags“, be-
sonders der font-Tag wurde durch Stylesheets vollständig ersetzt, und sollte möglichst nicht mehr
verwendet werden. (Sie werden ihn aber in „alten“ Dokumenten noch finden):
Fettgedruckter Text Eine <b>fette</b> Sache
Kursiver Text und eine <i>schräge</i> Sache
Text in einer bestimmten Schriftart <font face="Arial">Text</font>
Text in einer bestimmen Farbe <font color="red">rot</font>
Hier die moderne Schreibweise mit Stylesheets:
Text in einer bestimmten Schriftart <span style="font-face:Arial;">Text</span>
Text in einer bestimmen Farbe <span style="color:red;">rot</span>
1.4.7 Bilder
Bilder werden in separaten Dateien gespeichert, in der HTML-Datei erfolgt nur ein Verweis auf die
Bilddatei. Als Attribut src im img-Tag können Sie eine absolute oder relative URL angeben:

Bild (URL absolut) <img src="http://www.google.at/intl/de_at/images/logo.gif"

atl="Google" />
Bild (URL relativ) <img src="neu.gif" alt="neu" />
Bild mit Ersatztext <img alt="neu" src="neu.gif" alt="neu" />
Bild mit Größenangabe <img width=10 height=5 src="neu.gif" alt="neu" />
Bild nach links (Text fließt <img src="neu.gif" style="float:left;" alt="neu" />
rechts vorbei)
Bild ohne Alternativtext <img src="zierleiste.gif" alt="" />
(nur Dekoration)
Für Blinde, Suchmaschinen, Browser die keine Bilder darstellen können, u.s.w. gibt man für jedes Bild
einen Alternativtext (Attribut alt) an. Mit dem AddOn „Web Developer“ kann man testen wie die
Seite mit ALT statt Bildern aussieht. Abbildung 7 zeigt die Verwendung dieses Features am Beispiel
eines Wetterberichts.
Abbildung 7: Wetterbericht mit Bildern und ohne Bilder (nur ALT-Texte)
Als Datenformate für Bilder inWebseiten werden nur Pixel-Formate von vielen Browsern unterstützt:
gif Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). „animiertes Gif“ enthält meh-
rere Bilder, die der Reihe nach angezeigt werden (Daumenkino).
Besonders geeignet für Bilder mit klaren Kanten, einfärbigen Flächen, wenigen Farben, z.
B. Comics, Logos.
jpg Millionen von Farben, variable Kompression, keine Transparenz.
Besonders geeignet für Bilder mit Farbverläufen, z. B. Photos.
png Nachfolge-Format für gif, Alpha-Transparenz, diese wird aber von MSIE erst ab MSIE 7
unterstützt.
Tabelle 1: Bildformate im Vergleich
Es kann jedes Bild in allen drei Formaten gespeichert werden. Ideal wäre, das Format auszuwählen,
in dem das Bild nichts an Qualität verliert, und die Dateigröße möglichst gering ist.

Mit dem canvas-Tag und Javascript kann man Bilder zeichnen. Der canvas-Tag ist Teil von HTML 5,
wird aber (im September 2009) von Firefox, Opera, Safari und Chrome unterstützt.
1.4.8 Links
Als Attribut href des Linkskönnen Sie eine absolute oder relative URL angeben:
Link zu Webseite (absolute URL) <a href="http://cnn.com">zu CNN</a>
Link zu Webseite im selben Ordner <a href="seite2.htm">mehr</a>

(relative URL)
Link zu E-Mail Adresse <a href="mailto:aa@bb.cc">Mail</a>
Bild als Link <a href="seite2.htm"><img src="mehr.gif"

alt="zur Seite 2" /></a>
1.4.9 Gesamt-Struktur einer Webseite
Eine XHTML Seite hat ein Grundgerüst. aus DOCTYPE, html, head und body.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTDhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel der Seite</title>
</head>
<body>
Hier die Tags, die Sie schon kennen.
</body>
</html>
Achtung: es kann nur einen head und einen body geben, keine Wiederholungen!
DOCTYPE gibt die verwendete HTML-Version an. Mit (X)HTML 5 wird der DOCTYPE und die Angabe des
Charactersets vereinfacht werden:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title> Titel der Seite </title>
</head>
<body>
Hier die Tags, die Sie schon kennen.
</body>
</html>
Achtung: HTML5 ist noch in Entwicklung und kann sich noch verändern. Es ist also zu früh um auf
HTML5 umzusteigen.

1.4.10 Listen
Listen werden mit zwei verschachtelten Tags gebaut: der li-Tag für den einzelnen Listen-Punkt, und
der ol- oder ul-Tag für die gesamte Liste.
<ul> <ol>
<li>punkti</li> <li>eins</li>
<li>punkti</li> <li>zwei</li>
</ul> <li>drei</li>
</ol>
1.4.11 Tabellen
Um eine Tabelle zu erzeugen müssen Sie die Tags <table>, <tr> und <td> richtig ineinander
verschachteln.
<table border="1">
<tr>
<td>Freitag</td>
<td>Samstag</td>
<td>Sonntag</td>
</tr>
<tr>
<td>lernen</td>
<td>lernen</td>
<td>lange schlafen</td>
</tr>
</table>
HTML-Tabellen wurden früher in Webseiten für das Layout der Seite verwendet, diese Tabellenlay-
outs sind noch auf vielen älteren Webseiten zu finden. Moderne Webseiten werden mit CSS-Layouts
gestaltet (Siehe Kapitel 3. ).
1.5 Upload und Tools
Der HTML-Code ist fertig, aber damit ist die Arbeit noch lange nicht vorbei.
1.5.1 Validator
Um Fehler im HTML-Code zu finden reicht ein Webbrowser nicht aus. Wie oben beschrieben sind
Webbrowser sehr tolerant, was kaputten Code betrifft. Eine strenge Prüfung des HTML-Codes macht
der Validator des W3C: . http://validator.w3.org/

Abbildung 8: Der HTML-Validator des World Wide Web Consortiums
Die Fehlermeldungen des Validators muss man sorgfältig lesen, von oben nach unten durcharbeiten
und reparieren. Mit etwas Glück repariert man das erste Problem und viele Folge-Fehler fallen damit
auch weg.
Abbildung 9: Fehlermeldung des Validators
Die Fehlermeldung in Abbildung 9 geht auf einen Tippfehler zurück: der schließende Tag wurde falsch
geschreiben.
1.5.2 Upload
Die fertige Webseite muss auf einem Webserver veröffentlicht werden. In der FH stehen Ihnen zwei
Webserver zur Verfügung: auf www.users.fh-salzburg.ac.at und auf multimediatechnology.at.
Um die Daten vom eigenen Computer auf den Webserver zu laden gibt es verschiedene Methoden,
die wichtigsten sind FTP, WebDAV, SFTP. Für die Webserver der FH kann nur SFTP verwendet werden.
Bei jeder Upload-Methode brauchen Sie folgende Informationen: den Namen des Servers, Userna-
men, Passwort, in welchen Ordner Sie die Daten speichern, unter welcher URL die Daten im Web
sichtbar sind.
Der Server www.users wird von allen Studiengängen verwendet:
Upload-Methode SFTP
Name des SFTP-Servers www.users.fh-salzburg.ac.at
Username + Passwort fhs666 – gleich wie bei FH-Mail
Ordner bei Upload htdocs/
URL http://www.users.fh-salzburg.ac.at/~fhs666/

Der Server multimediatechnology.at ist auch unter dem Namen multimediaart.at bekannt, und wird
nur von MMA+MMT verwendet:
Upload-Methode SFTP
Name des SFTP-Servers multimediatechnology.at
Username + Passwort fhs666 – gleich wie bei FH-Mail
Ordner bei Upload public_html/
URL http://multimediatechnology.at/~fhs666/
oder eigene Subdomain, z.B.
http://ichbinich.multimediatechnology.at/
Folgende Programme zum Upload sind in den FH-Labors installiert, bzw. können Sie selbst installie-
ren:
• Secure File Transfer Client: nur für SFTP
• FireFox: AddOn von Firefox, freie Software, können Sie selbst installieren
• Dreamweaver: Upload ist nach der Definition einer „Site“ möglich
Achten Sie beim Upload darauf, dass die Ordnerstruktur und die relative Position der Dateien beibe-
halten wird; nur dann funktionieren die relativen Links!
Dreamweaver und FireFTP bieten Hilfe beim Erhalt der Struktur. In Abbildung 10 wurde recht (am
lokalen Computer) eine Datei ausgewählt und dann der Button „Datei bereitstellen“ gedrückt.
Dreamweaver beachtet, dass die Datei lokal im Ordner html-ue1 liegt, und lädt Sie in den entspre-
chenden Ordner am Webserver hoch.
Abbildung 10: Site-Fenster von Dreamweaver – Upload einer Datei automatisch in den richtigen Ordner
Abbildung 11 zeigt, was Sie nicht tun sollten: die Datei mit Drag-and-Drop in den falschen Ordner am
Webserver hinaufladen. Dann funktionieren die relativen Links nicht mehr.

Abbildung 11: Upload mit Dreamweaver in den falschen Ordner
Bevor Sie FTP im Dreamweaver Site-Fenster benutzen können müssen Sie (Unter SITE SITES VERWAL-
TEN BEARBEITEN ERWEITERT REMOTE-INFORMATIONEN) die richtige Konfiguration eintragen,wie in
Abbildung 12 gezeigt.
Abbildung 12: Bearbeiten der FTP-Information in Dreamweaver
Die anderen erwähnten Programme funktionieren sehr ähnlich.

2. CSS Basics
• Wie HTML und CSS zusammen hängen. Wie CSS Selektoren aufgebaut sind. Welche Schreib-
weisen und Maßeinheiten es in CSS für Farben, URLs und Größenangaben gibt.
• Wie das CSS Box Model funktioniert, wie der Zusammenhang zwischen margin, border und
padding ist.
• Welche Möglichkeiten zur Darstellung von Schrift, Absatz, Rahmen, Hintergrundfarbe und
Hintergrundbilder CSS ungefähr bietet. Wie Sie die genaue Schreibweise der dafür notwendi-
gen CSS-Deklarationen nachschlagen können
• Ein einfaches Stylesheet für ein XHTML-Dokument erstellen. Bei Vorgabe einer bestimmten
visuellen Darstellung und eines XHTML-Dokuments ein geeignetes Stylesheet erstellen, das
zu dieser Darstellung führt
• Mit Hilfe von Firebug oder durch Lesen des Codes herausfinden welche CSS-Regeln zu einer
bestimmten Darstellung in einer (fremden) Webseite führen
• Die Korrektheit des CSS-Codes mit dem CSS-Validator des World Wide Web Consortium
überprüfen. Fehler in einem CSS-Dokument ausbessern bis es valide ist
• CSS Zen Garden. http://csszengarden.com/
• CEDERHOLM,Dan (2007): Bulletproof Webdesign. Addison-Wesley, München. ISBN

3827326230.
• MEYER,Eric A. (2006): Eric Meyer's CSS. Addison-Wesley, München. ISBN 3827324793.
• Web Standards Project. http://www. webstandards.org/
Tools
• Firefox AddOn ColorZilla

2.1 Kurzvorstellung von Stylesheets
Die einfachste Art die visuelle Darstellung einer Webseite zu definieren ist die Einbettung eines Styls-
heets. Das Stylesheet definiert für die einzelnen HTML-Tags wie sie dargestellt werden sollen. In Lis-
ting 1 werden Formatierungen für die Tags body, p, h1 und h2 vorgenommen, der gezeigte <style>-
Tag wird im Head des HTML-Dokument eingebunden:
1. <style type="text/css">
2. p {
3. font-family: Calibri, Helvetica, Arial, sans-serif;
4. font-size: 13px;
5. }
6. h1,h2 {
7. font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
8. }
9. h1 { font-size: 24px; }
10. h2 { font-size: 20px; }
11. body { background-color: green; }
12. </style>
Listing 1: Hintergrundfarbe, Schriftfamilie, Schriftgröße mit CSS festlegen
An Hand dieses Beispieles werden nun die ersten Stylesheet-Befehle erklärt. Die Syntax von Styles-
heets ist völig anders als die von HTML.
2.1.1 Schriftart
Zuerst werden wir die Schriften im Dokument festlegen. Dabei gilt es die Einschränkungen des Web
zu beachten: welche Schriften auf dem Endgerät zur Verfügung stehen ist nicht bekannt, deswegen
werden mehrere Schriften angegeben, diese Liste wird vom Browser von links nach rechts abgearbei-
tet, die erste Schrift die er findet verwendet er.
In Zeile 2 bis 5 werden zwei Anweisungen für Fließtext gegeben (HTML-Tag <p>): die Schriftfamilie in
Zeile 3 und die Schriftgröße in Zeile 4.
In Zeile 3 Vergleichen Sie Zeile 3 mit Zeile 7: Schriftnamen die ein Leerzeichen enthalten müssen in
Anführungszeichen gesetzt werden, wie "Trebuchet MS" in Zeile 6.
Das letzte Wort in Zeile 7 „sans-serif“ ist ein CSS-Kürzel für „irgendeine serifenlose Schrift“. Es emp-
fiehlt sich am Ende einer Schriftliste ein solches Kürzel als Standardwert „wenn alle Stricke rei-
ßen“ anzugeben, dabei sind folgende Werte möglich:
sans-serif serif cursive fantasy monospace.

2.1.2 Schriftgröße
Die Schriftgrößen-Angabe in Zeile 4 verwendet Pixel als Maßeinheit. Diese Maßeinheit macht bei der
Darstellung am Screen, besonders in Kombination mit Bildern Sinn.
2.1.3 Absätze
Wie immer in HTML erfolgt der Zeilenumbruch automatisch. Mit CSS können Sie verschiedene Aspek-
te des Absatz-Layoutes steuern, einige davon sind in Abbildung 13 gezeigt:
Abbildung 13: Absatz mit CSS Formatanweisungen: text-indent und line-height
Mit text-align können Sie die Ausrichtung des Texts im Absatz festlegen: left, right, center oder
justify (Blocksatz). Blocksatz wird aber am Web wenig verwendet, da die Browser keine Silbentren-
nung durchführen. Dadurch entstehen bei den meisten Texten häßliche Löcher im Blocksatz.
Die erste Zeile des Absatzes kann einen separaten Einzug haben, den Sie mit text-indent festlegen.
Die Zeilenhöhe wird mit line-height festgelegt. Hier ist es sinnvoll für längere Texte einen etwas
erhöhten Wert festzulegen (z. B. 1.5em – d.h. 1,5 mal die Breite des Buchstaben M in dieser Schrift)
da die Standard-Darstellung der Browser etwas zu eng ist um gut lesbar zu sein.
2.1.4 CSS erforschen mit Firebug
Sie haben nun einen kurzen Einblick in die Schreibweise und die Möglichkeiten von Stylesheets. Ge-
nug um Stylesheets von Webseiten zu lesen um neue Möglichkeiten kennen zu lernen. Beim Lesen
und Verstehen von CSS hilft das Firefox Add-On „Firebug“.
Rechtsklick +
„Element
untersuchen“
Zeigt die für

diesen HTML-
Tag geltenden
Zeigt HTML- CSS-
Code des Ele- Anweisungen
ments
Abbildung 14: Firefox Add-On Firebug

2.2 Geschichte der Cascading Style Sheets
Von Anfang an sollte eine HTML-Datei keine Information darüber enthalten, wie der Text dargestellt
werden soll - keine Schriftart oder Schriftgröße. HTML sollte nur strukturelle Information enthalten
(„das ist eine Überschrift“ aber nicht „Arial 24pt“). Die Formatierungs-Information sollte in sogenann-
ten „Stylesheets“ gespeichert werden, das Format für die Stylesheets war aber noch nicht definiert.
Im Jahre 1993 sah eine typische Webseite so aus
<html><body>
<h1>Das Studium</h1>
<p>Studienziel ist es, breit gefächerte technische und kreative Kompetenzen...
</body></html>
Da es keine Stylesheets gab „erfand“ Netscape ab 1994 zusätzliche HTML-Tags, die die Darstellung
der Webseite festlegen. Andere Browser übernahmen diese Tags von Netscape.
<html><body>
<h1><font face="Arial" color="blue">Das Studium</font></h1>
<p><font size="+1">S</font>tudienziel ist es, breit gefächerte technische und kreative Kom-
petenzen...</p>
<p><font size="+1">P</font>rojekte und Praxissemster stellen schon während des Studiums die
Verbindung...</p>
</body></html>
Durch das Hinzufügen der Tags für Formatierung wurde der HTML-Code komplizierter und unüber-
sichtlicher. Erst ab ab 1995 wurde endlich an den Standards für Stylesheets gearbeitet, seit den frü-
hen 2000ern ist die Unterstützung in den gängigen Browsern vorhanden. So sieht nun eine HTML-
Seite mit separatem Stylesheet aus:
Die html-Datei Die Datei fh. css

<html><head> h1 {
<link rel="stylesheet" font-family: Arial;
type="text/css" color: blue;
href="fh.css"> }
</head><body> p:first-letter {
<h1>Das Studium</h1> font-size: large;
<p>Studienziel ist es, breit gefächerte }
technische und wirtschaftliche Kompeten-
zen...
</body></html>
Mit der Trennung von Stylesheet und HTML wurde HTML wieder einfacher und übersichtlicher. Be-
sonders das nachträgliche Verändern der Gestaltung wurde vereinfacht.
Wichtige Argumente für den Einsatz von Stylesheets sind:
• Zusätzliche Gestaltungsmöglichkeiten
• Einheitliche Gestaltung von mehreren Webseiten

• Arbeitsteilung zwischen DesignerInnen (die CSS erstellen) und RedakteuerInnen (die Inhalte
erstellen)
Aber Achtung: CSS ist nicht die Lösung jedes Problems:
• Mit Stylesheets können Sie nur Elemente verändern, die schon in der HTML-Datei vorhanden
sind. Es können keine neuen Elemente eingefügt werden.
• Um ein Stylesheet zu erstellen, muss die DesignerIn die HTML-Tags kennen, z. B. wissen, dass
h1, h2, h3 für die Überschriften stehen.
• Damit das Stylesheet wirkt, muss die RedakteurIn, die das HTML-Dokument erstellt, die rich-
tigen HTML-Tags verwenden, z. B. Überschriften wirklich mit h1, h2, h3 formatieren, und nicht
mit b, i, font.
2.2.1 Stylesheet Syntax
Beispiel
h1,h2 {
font-family: Arial, Helvetica, sans-serif;
color: lightblue;
} Rule
Selektor
body { Deklaration
margin-left: 150px;
background-color: white;
} Deklaration
p {
text-align: justify;
}
Eine Stylesheet-Regel („Rule“) besteht aus einem Selektor gefolgt von einer geschwungenen Klam-
mer die eine oder mehrere Deklarationen enthalten kann.
Der einfachste Selektor besteht aus dem Namen eines einzelnen HTML-Tags. Sie können auch meh-
rere Elemente durch ein Komma trennen. In diesem Falle werden für alle Elemente die selben Style -
Angaben definiert, (siehe h1,h2 in obigem Beispiel).
Sie können beliebig Zeilenumbrüche einfügen, diese werden ignoriert.
Style für mehrere Seiten
Die Seiten einer gesamten Website haben meist ein einheitliches Aussehen. Dies können Sie errei-
chen, wenn Sie für jede Webseite dieselbe CSS Datei verwenden. Dazu müssen Sie in jede HTML-
Datei die CSS Datei mittels folgender Anweisung einbinden:
<link rel="stylesheet" href="mystyle.css" />
Diese Zeile sollte innerhalb des head Bereiches der HTML-Datei stehen (da sonst die Darstellung der
Seite verzögert werden kann3). mysyle.css könnte etwa so aussehen wie im vorigen Beispiel.
Style für eine Seite
Wenn Sie einen Style nur auf einer einzigen Webseite verwenden, können Sie die Style-Angaben
direkt in die HTML-Datei schreiben, und zwar innerhalb des head Bereiches.
<style>
h1,h2 {
font-family: Arial, Helvetica, sans-serif;
color: lightblue
}
</style>
Style für einen Tag
Style Angaben können auch direkt in einen einzelnen HTML-Tag geschrieben werden. In diesem Fall
gilt die Angabe nur für diesen ganz speziellen Tag.
Um einen style für einen einzelnen Tag zu definieren, müssen Sie innerhalb des Tags das Attribut
style verwenden.
<h1 style="color:red; text-align:center;">Rote, zentrierte Überschrift</h1>
Gültigkeitsbereich einer Style Angabe
Sie können innerhalb einer HTML-Datei sowohl eine externe Style Sheet Datei verwenden (einge-
bunden durch eine entsprechende Anweisung im head Bereich), als auch eine lokale Definition im
head Bereich angeben, als auch spezielle Angaben für einzelne Tags erstellen.
Was passiert nun, wenn die verschiedenen Style-Deklarationen sich widersprechen? Die Angaben bei
einem einzelnen Tag haben immer Vorrang. danach folgen die lokalen Angabe im head Bereich und
erst zum Schluß die externe Datei. „Je näher beim Tag, desto stärker wirkt es.“
2.2.2 Klassen, IDs, SPANs und DIVs
Wenn Sie mit den Style-Angaben den p-Tag umformatieren, betrifft das alle p-Tags in der Webseite.
Oft möchten Sie aber ein oder zwei Absätze anders formatieren als die anderen Absätze. Zu diesem
3
Siehe Souders, Steve (2007) High Performance Web Sites. O'Reilly. ISBN 9780596529307

Zweck können Sie sich im Stylesheet noch weitere Formatvorlagen - sogenannte "Klassen" - definie-
ren:
.wichtig { color: red; }
Diesen Klassen können Sie eigene Namen geben (hier „wichtig“), vor dem Klassennamen steht immer
ein Punkt. Jedem normalen HTML-Tag können Sie nun diese Klasse zuweisen. Dies geschieht mit dem
Attribut class.
<p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p>

<p class="wichtig">Ein ganz wichtiger Absatz</p>
<p>Ein ganz normaler Absatz</p>
Zur „normalen“ Wirkung des HTML-Tags kommt nun die Formatierung durch die Klasse hinzu: der
Text „ganz wichtige“ und „Ein ganz wichtiger Absatz“ ist in diesem Beispiel also rot. Eine Klasse kann
also mehrmals in einem Dokument verwendet werden. Ein Tag kann mehrere Klassen erhalten, diese
werden durch Leerzeichen getrennt im class-Attribut angeführt.
Zur eindeutigen Kennzeichnung von Tags wird das Attribut id verwendet:
<p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p>

<p class="wichtig">Ein ganz wichtiger Absatz</p>
<p id="impressum">Das einzige Impressum dieser Seite</p>
Auf diese eindeutigen IDs kann in CSS mit der Raute referenziert werden:
#impressum { background-color: #DDD; }
Sowohl Klassen als auch IDs können mit Tags kombiniert werden um einen komplexen Selektor zu
bilden, aber das macht nur bei Klassen wirklich Sinn:
.wichtig { font-size: 20px; } /* alle Tags mit der Klasse wichtig */

p.wichtig { color: red; } /* nur der Tag p mit der Klasse wichtig */
b.wichtig { color: yellow; } /* nur der Tag b mit der Klasse wichtig */
#impressum { background-color:#ddd; } /* nur der Tag mit der id #impressum */
p#impressum { background-color:#ddd; } /* == nur der p-Tag mit der id #impressum */
b#impressum { background-color:#ddd; } /* nix! */
Die Firefox-Erweiterung Firebug zeigt Tags, Klassen und IDs in dieser Schreibweise an:
Es wird öfter vorkommen, dass Sie einem Bereich eine bestimmte Klasse zuweisen möchten, ohne
dass ein passender Tag vorhanden ist. Hier können Sie die beiden Tags <span> und <div> verwenden,
die beide selber kaum Eigenschaft aufweisen. <span> eignet sich für die Verwendung in Fließtext,
<div> ist ein blockbildender Tag.
<p>Es gibt hier ganz <span class="wichtig">besonders interessante</span> Meldungen.</p>
Die Worte „besonders interessante“ erscheinen rot.

2.2.3 Maßeinheiten in Stylesheets
Für Längen- und Größen-Angaben gibt es mehrere Maßeinheiten: px (Pixel) , em (=Breite des Buchsta-
ben M) , ex (Höhe des Buchstaben X), % (Prozent), cm (Zentimeter), in (Inch). Einige davon sind rela-
tiv (em = relativ zur Schriftgröße, px = relativ zur Pixel-Größe am aktuellen Ausgabemedium), andere
absolut (Centimeter, Inch). Die absoluten Angaben kann man derzeit nur bei der Ausgabe auf Papier
sinnvoll verwenden.
Farbangaben können auf mehrer Arten erfolgen: mit einigen Farbwörtern (red, green,…) oder mit der
Angabe von rot-, grün- und blau-Anteil (jeweils werte von 0 bis 255) in verschiedenen Schreibweisen:
Dezimal rgb(16,0,255), hexadezimal #10F oder zweistellig hexadezimal #1000FF.
Tool-Tipp: Mit dem Firefox AddOn Colorzilla kann man die Farben einer Webseite auslesen und in
verschiedenen Schreibweisen kopieren:
Abbildung 15: Colorzilla Pipette zum auslesen einer Farbe und Colorzilla Menü zum kopieren des Codes
Wird in einem Stylesheet auf eine URL verwiesen (z.B. auf die URL eines Hintergrundbildes), dann
kommt die Schreibweise url(http://absolute.com/bild.gif) oder url(relativ/ bild.gif) zum
Einsatz. Achtung: die relative URL bezieht sich auf das Stylesheet (nicht die HTML-Datei in der es
verwendet wird).
Box Model
Jeder blockbildende Tag (z. B. h1, h2, p, blockquote, div, …) hat einen Rahmen, Innen- und Außenab-
stand. Diese werden mit den Deklarationen border, padding und margin festgelegt. Ein Hintergrund-
bild und/oder eine Hintergrundfarbe des Tags reicht immer bis zum Rahmen, aber nicht darüber hin-
aus.

Abbildung 16: Darstellung des Box Models von hicksdesign.co.uk
Die Ausdehnung von margin, padding und border kann man besonders gut mit der Firefox-
Erweiterung Firebug erforschen wie in Abbildung 17 gezeigt.
Abbildung 17: margin, border, padding in Firebug
Dabei wird direkt in der Webseite der Außenabstand (margin) gelb und der Innenabstand (padding)
dunkelviolett hinterlegt.
Die Standard-Darstellung von Absätzen erklärt sich über den margin-top und margin-bottom des <p>-
Tags:

Abbildung 18: Standard-Darstellung von Absätzen (<p>) im Browser
Farben, Hintergrundfarben, Hintergrundbilder
Die Farbe des Textes wird mit color, die Hintergrundfarbe mit background-color gesetzt.
Jeder Tag kann mittels CSS ein Hintergrundbild erhalten (background-image). Als „Hintergrundbild“ in
einer Webseite kann jedes Bild in einem Web-geeigneten Dateiformat (gif, jpg, png) dienen. Das Bild
wird einfach dargestellt oder „gekachelt“ –horizontal und vertikal so oft wiederholt, bis es die ganze
Fläche des Tags ausfüllt (background-repeat). Abbildung 19 wurde ein Bild mit drei Zahnrädern als
Hintergrundbild verwendet, durch die Wiederholung werden sieben Zahnräder angezeigt.
Abbildung 19: Beispiel für ein Hintergrundbild in einer Webseite
Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch lesbar sein! Im Bei-
spiel in Abbildung 19 ist eine Linkfarbe zu hell bzw. das Hintergrundbild zu auffällig: Der Text „wurde
schon besucht“ in der letzten Zeile ist kaum noch lesbar.
Links formatieren
Der <a>-Tag wird in HTML für zwei sehr unterschiedliche Dinge verwendet: zum Setzen von Links und
zum Setzen von Textmarken (auch ‚Anker’ genannt):

<h1><a name="unis"></a>Universitäten</h1>
<a href="http://www.uni-salzburg.at/">Uni Salzburg</a>
Textmarken sind normalerweise unsichtbar, Links sind normalerweise blau oder violett und unter-
strichen.
Um die Darstellung von Links zu verändern muss man in CSS :link oder :visited als Selektoren ver-
wenden. Der Browser unterscheidet dabei zwischen Links die schon einmal besucht wurden (visited)
und neuen Links.
a:link, a:visited { text-decoration: none; }

a:link {color:blue}
a:visited {color:#FF00FF }
Im folgenden Beispiel werden die Links mit einem Icon markiert:
a:link, a:visited {
background-image: url(icon-link.gif);
background-position: center right;
background-repeat: no-repeat;
padding-right: 9px;
}
2.3 Graceful Degradation
Der englische Begriff ‚graceful degradation’ hat noch keine adequate deutsche Übersetzung, er be-
deutet ungefähr: „funktioniert auch ohne … gut. “
Das dahinter stehende Prinzip lautet: für die verschiedenen Ausgabemedien sollen nicht verschiede-
ne Versionen einer Webseite erstellt werden, sondern alle Ausgabemedien werden mit einem Do-
kument bedient.
Wenn der Browser Javascript, Flash, CSS unterstützt, dann soll die Website besonders schön, interak-
tiv, praktisch sein. Wenn der Browser etwas nicht unterstützt, dann soll die Website immer noch
lesbar und benutzbar bleiben.
Schlechtes Beispiel: Bild als Überschrift
Um eine bestimmte Schriftart in der Überschrift der Seite zu garantieren wird ein Bild verwendet:

<img src="Salzburger Nockerl" />
Das sieht zwar wie eine Überschrift aus – wenn das Bild geladen wird – die Information ist aber für
eine Suchmaschine oder ein Braille-Ausgabegerät nicht lesbar. Für diese wäre folgender Code opti-
mal:
<h1>Salzbuerger Nockerl</h1>
Mit Image Replacement kann man die optimale Darstellung für Suchmaschinen und Braille Ausgabe-
geräte mit der optimalen Darstellung als Bild kombinieren.
Gutes Beispiel: Image Replacement
Der Text wird normal im HTML-Code eingegeben, es wird aber auch ein Bild in der richtigen Schriftart
erstellt. Bei CSS-fähigen Browsern wird der Text versteckt und das Bild angezeigt. Browser ohne CSS
und Suchmaschinen verwenden einfach den Text:
<style>
h1#bildStattText {
/* schiebt den "echten text" extrem weit nach links */
text-indent:-10000px;
overflow:hidden;
background: url(pix/nockerln_schriftzug.gif);
/* hoehe und breite der grafik angeben! */
height:150px;
width:500px;
}
</style>
<h1 id="bildStattText">Salzburger Nockerln</h1>
Schlechtes Beispiel: Navigationsmenü mit Bildern
Ein Navigationsmenü wird mit Tabellen und Bildern aufgebaut:

<table cellspacing="1">
<tr>
<td><a href="home.html"><img src="1.gif" /></a></td>
<td><a href="news.html"><img src="2.gif" /></a></td>
<td><a href="portfotdo.html"><img src="3.gif" /></a></td>
<td><a href="contact.html"><img src="4.gif" /></a></td>
</tr>
</table>
Wieder gilt: die Information ist für eine Suchmaschine oder ein Braille Ausgabegerät nicht lesbar. Für
diese Ausgabemedien wären Links mit normalen Texten besser.
<ul>
<li><a href="home.html">home</a></li>
<li><a href="news.html">news</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
Im nächsten Kapitel (3.6 auf Seite 56) lernen Sie eine Methode kennen wie Sie aus dieser Liste ein
Menü machen.

3. CSS für Layout und Interaktion
• Wie relative und absolute URLs funktionieren, wie URLs und Pfadangaben im Dateisystem
zusammen hängen.
• Einige Konfigurationsmöglichkeiten der Apache-Webservers: DocumentRoot, Options Inde-

xes, DirectoryIndex.
• Wie verschiedene Ausgabegeräte und verschiedene Bildschirmgrößen die Darstellung von

Webseiten beeinflussen und die Gestaltung von Webseiten schwierig machen.
• Wie CSS Selektoren funktionieren
• Absolute und relative URLs verwenden. Fehler die durch falsche URLs verursacht werden fin-
den und korrigieren.
• An einem bestehen CSS-Layout Veränderungen vornehmen.
• Mittels CSS zwei oder drei Spalten nebeneinander positionieren.
• Mittels CSS aus einer Liste von Links ein Navigations-Menü machen, ein Dropdown-Menü
machen.
Tools
• Firefox AddOn MeasureIt
• CSS Zen Garden. http://csszengarden.com/
• CEDERHOLM,Dan (2007): Bulletproof Webdesign. Addison-Wesley, München. ISBN

3827326230.
• MEYER,Eric A. (2006): Eric Meyer's CSS. Addison-Wesley, München. ISBN 3827324793.
• Web Standards Project. http://www. webstandards. org/
• Plain Old Semantic HTML (POSH). http://microformats. org/wiki/POSH

3.2 URLs
In Kapitel 1.3.2 wurden URLs und Ihre Bestandteile kurz vorgestellt. Nun geht es um die Handhabung
von URLs innerhalb von HTML und CSS.
3.2.1 Absolute und relative URLs
URLs werden in CSS und HTML an vielen Stellen verwendet: bei Links und Bilder, beim Verweis auf
externe Stylesheets, externe Javascript-Dateien, etc. An all diesen Stellen können Sie URLs in den
hier beschriebenen Schreibweisen verwenden.
(Die „absolute“ und „relative“ Schreibweise wurde von den Pfadangaben im UNIX-Dateisystem über-
nommen; auch die Pfadangaben von DOS/Windows und von CD-ROMs funktionieren ähnlich.)
Nehmen wir an, in der Datei http://mediacube.at/pix/weg.html seien folgende drei URLs enthalten:
absolut http://mediacube.at/pix/weg-zur-saline.jpg
beginnt mit Protokoll
relativ zum Webserver /pix/weg-zur-saline.jpg
beginnt mit /
relativ zur Datei weg-zur-saline.jpg
Bei den relativen URLs muss man die URL des enthaltenden Dokuments und die relative URLs zu-
sammen—addieren, um zu einer absoluten URL zu kommen.
http://mediacube.at/pix/weg.html + /pix/weg-zur-saline.jpg =
http://mediacube.at/pix/weg-zur-saline.jpg
und
http://mediacube.at/pix/weg.html + weg-zur-saline.jpg =
http://mediacube.at/pix/weg-zur-saline.jpg
Mit einer anderen Ausgangs-URL ist das Ergebnis natürlich anders:
http://multimediatechnology.at/2008/09/22/weg.html
+ /pix/weg-zur-saline.jpg =
http://multimediatechnology.at/pix/weg-zur-saline.jpg
und:
http://multimediatechnology.at/2008/09/22/weg.html
+ weg-zur-saline.jpg =
http://multimediatechnology.at/2008/09/22/weg-zur-saline.jpg

Relativen URLs können selbst wieder Ordnernamen enthalten:
http://multimediatechnology.at/showcase-2008.html
+ 2008/07/31/mmt-auf-facebook.html =
http://multimediatechnology.at/2008/07/31/mmt-auf-facebook.html
Zwei Punkte als Ordnernamen bedeuten dabei: „raus aus dem aktuellen Ordner“:
http://multimediatechnology.at/2008/04/17/rattenscharfes-computergame.html
+ ../../mmt-auf-facebook.html =
http://multimediatechnology.at/2008/07/31/mmt-auf-facebook.html
Mit dieser Schreibweise kann man auch Unsinn machen:
http://multimediatechnology.at/2008/04/17/rattenscharfes-computergame.html
+ ../../05/../04/17/rattenscharfes-computergame.html =
http://multimediatechnology.at/2008/04/17/rattenscharfs-computergame.html
All diese Berechnungen finden im Webbrowser statt, und sind völlig unabhängig davon, wie der
Webserver die URL interpretiert. So könnte z.B die letzten URL „in Wirklichkeit“ gar nicht auf Ordner
mit Namen 2008, 04, 17 verweisen, sondern eine Datenbanksuche nach „2008-04-17“ nach sich
ziehen – das ist Sache des Servers.
3.2.2 Konfiguration des Webservers und URLs
Die Konfiguration des Webservers wird hier am Beispiel von Apache gezeigt.
Andere Webserver (z.B: Internet Information Server von Microsoft) verfügen
auch über diese Fähigkeiten, werden aber anders konfiguriert.
Die Apache-Konfiguration müssen Sie noch nicht anwenden können, sie ist hier nur zur Information
angeführt. Eventuell können Sie im Fach „Operations & IT“ diese Information in diesem Semester
anwenden, auf jeden Fall im nächsten Semester in „Webprogrammierung 2“.
Betriebssystem des Webservers
Die Webserver der FH sind ausnahmslos UNIX-Server. Die UNIX-Dateisysteme unterscheiden bei Da-
tei- und Ordnernamen zwischen Groß- und Kleinschreibung, sind also „case-sensitive“. Der Rechner
auf dem Sie die Webseiten erstellen läuft wahrscheinlich unter Windows oder MacOS; dort sind die
Dateisysteme „case-insensitive“.
Ein Link auf die Datei bild.JPG funktioniert unter Windows oder MacOS auch, wenn er bild.jpg
geschreiben wird.
Liegt die Datei aber dann am (UNIX-)Webserver, so funktioniert der Link nicht mehr! bild.jpg und
bild.JPG sind zwei unterschiedliche Dateien!

Webspace und Ordner
Im einfachsten Fall wird im Webserver ein Ordner spezifiziert, der als Ausgangspunkt für den
Webspace dient. Für den Webserver mediacube.at ist dies der Ordner
/var/www/virthosts/mediacube.at/
URL http://mediacube.at/pix/weg-zur-saline.jpg
Dateisystem /var/www/virthosts/mediacube.at/pix/weg-zur-saline.jpg
Die Apache-Konfiguration dazu sieht so aus:
<VirtualHost mediacube.at>
DocumentRoot /var/www/virthosts/mediacube.at/
</VirtualHost>
Standard-Dokument
Endet eine URL auf einen Schrägstrich, dann verweist sie eigentlich auf einen ganzen Ordner, nicht
auf eine spezielle Datei. Für diesen Fall kann im Webserver ein Standard-Dokument definiert werden.
Auf allen Webservern der FH ist dies die Datei index.html. d.h. wenn eine URL auf einen Ordner
verweist, und in diesem Ordner eine Datei mit Namen index.html existiert, dann wird diese Datei
geliefert.
URL http://mediacube.at/
Dateisystem /var/www/virthosts/mediacube.at/index.html
URL http://mediacube.at/pix/
Dateisystem /var/www/virthosts/mediacube.at/pix/index.html
Die Apache-Konfigurationsanweisung dazu lautet
DirectoryIndex index.html
Achtung: die Konfiguration ist am Internet Information Server normalerweise anders, dort wir die
Datei default.htm verwendet!
Was passiert wenn keine Datei mit dem richtigen Namen vorhanden ist? Die zwei Möglichkeiten se-
hen Sie in Abbildung 20: entweder eine Auflistung der Dateien im Ordner oder eine Fehlermeldung.

Abbildung 20: Zugriff auf einen Ordner ohne Standard-Dokument (index.html): Auflistung oder Fehlermeldung
Die entsprechenden Apache-Konfigurationsanweisung dazu sind:
Options +Indexes Options -Indexes
Automatischer Webspace für Alle
Am Webserver www.users existiert für jeden Account automatisch ein Webspace. Dieser Webspace
befindet sich innerhalb des Home-Verzeichnisses des jeweiligen Accounts. Z.B. könnte eine Studentin
den Username fhs303030 habe und das Home-Verzeichnis /home/store/fhs303030/. Ihr Webspace ist
im Unter-Ordner htdocs:
URL http://www.users.fh-salzburg.ac.at/~fhs303030/test.html
Dateisystem /home/store/fhs303030/htdocs/test.html
URL http://www.users.fh-salzburg.ac.at/~fhs111111/test.html
Dateisystem /home/store/fhs111111/htdocs/test.html
Beachten Sie: für das Formulieren von relativen URLs sind nur die URLs relevant, nicht die Position
der Dokumente im Dateisystem! Der Ordnername htdocs wird also nie in einer URL vorkommen.
Der Link von einem User-Webspace zum nächsten funktioniert also so:
http://www.users.fh-salzburg.ac.at/~fhs303030/test.html + ../~fhs111111/test =
http://www.users.fh-salzburg.ac.at/~fhs111111/test
Oder relative zum Webserver:
http://www.users.fh-salzburg.ac.at/~fhs303030/test.html + /~fhs111111/test =
http://www.users.fh-salzburg.ac.at/~fhs111111/test
Die Apache Konfigurationsanweisung lautet:
UserDir htdocs

3.2.3 Pragmatische Tipps zu Dateienamen und URLs
Groß- und Kleinschreibung
Hintergrund: Webserver läuft auf UNIX, dort sind Dateinamen case-sensitive.
Tipp: ich schreibe alle Ordner- und Dateinamen sowie alle URLs immer durchgängig klein.
Leerzeichen
Hintergrund: Leerzeichen in URLs müssen als %20 geschrieben werden.
Tipp: ich verwende keine Leerzeichen in Ordner- und Dateinamen meiner Web-Projekte.
Umlaute
Hintergrund: URLs sind global sichtbar. Eine URL, die ich erschaffe, muss vielleicht einmal auf einer
Tastatur eingetippt werden, die keine deutschen Umlaute hat.
Tipp: ich vermeide Umlaute in Ordner- und Dateinamen meiner Web-Projekte und beschränke mich
auf den englischen Zeichensatz.
Ordnerstruktur
Hintergrund: Nicht nur der Code meiner Webseiten ist für das Funktionieren der Seiten wichtig, son-
dern auch die Dateinamen und Ordnernamen, bzw. die Ordnerstruktur. Liegt eine Datei im falschen
Ordner wird sie nicht mehr gefunden.
Tipp: ich überlege mir die Ordnerstruktur meines Webspaces sorgfältig. Wenn ich auf mehreren
Rechnern entwickle, dann baue ich auf jedem dieser Rechner die Ordnerstruktur wieder auf. Ich
nutze Dreamweaver für den Upload und Download, weil er die Ordnerstruktur „mitdenkt“.
3.3 Rahmenbedingungen für Layout
Wie in Kapitel 1 beschrieben gibt es viele verschiedene Ausgabegeräte für Webseiten. Für die Gestal-
tung des Layouts von Webseiten spielt dabei die Bildschirmgröße bzw. die Auflösung eine wichtige
Rolle.
3.3.1 Auflösung
Zuerst stellt sich die Frage: woher weiß ich, wie hoch die Auflösung am Computer meiner LeserIn ist?
Woher weiß ich, wie viel Platz im Browserfenster zur Verfügung steht?

Die Antwort lautet: ich weiß es nicht, und es gibt keine zuverlässige Methode, mit der man diese
Information in jedem Fall herausfinden kann. Es gibt eine Meßmethode mit Hilfe der Programmier-
sprache Javascript, mit der man die Größe des Browserfensters messen kann – das Ergebnis der Mes-
sung ist natürlich dadurch verfälscht, dass Browser ohne Javascript ganz aus der Messung herausfal-
len. Diese Beschränkung sollten Sie bei den folgenden Überlegungen immer beachten.
Abbildung 21 zeigt einige derzeit (2008) mögliche Bildschirm-Auflösungen.
Abbildung 21: einige mögliche Bildschirmauflösungen und Seitenverhältnisse 2009,

basierend auf http://en.wikipedia.org/wiki/Image:Vector_Video_Standards2.svg
Vergleichen Sie die höchsten hier dargestellte Auflösungen mit der geringsten Auflösungen. Da Breite
und Höhe (mehr als) verdreifacht sind, steht bei der höchsten Auflösung also (mehr als) die neunfa-
che Fläche zur Verfügung!
Achtung, diese Angaben sind in Pixel – die reale größe des Ausgabegerätes (24“ Desktop, 13“ Laptop,
Mobiles Endgerät) ist bei gleicher Pixel-Auflösung sehr unterschiedlich! Mobile Geräte haben eine
geringe Auflösung, aber eine hohe Pixeldichte:
Gerät Pixel Diagonale Pixel per Inch

(inch)
Alter PC 1280 x 19 in 86 ppi
1024
Macbook 1440 x 15.4 in 110 ppi
Pro 900
Sony PSP 480 × 272 4.3 in 128 ppi
Apple 480 × 320 3.5 in 163
IPhone http://en.wikipedia.org/wiki/Pixels_per_inchppi
Amazon 600 × 800 6 in 167 ppi
Kindle
Android HTC 320 x 480 3.2 in 180

Dream http://en.wikipedia.org/wiki/Pixels_per_inchppi
Abbildung 22 zeigt Statistiken über die Bildschirmauflösung von w3schools.org von 2000 bis 2009. In
diesem Zeitraum hat sich die Mehrheit langsam von 800x600 (bis 2003) auf 1024x768 (bis 2008) und
schließlich auf höhre Auflösungen verschoben.
Abbildung 22: Statistik über die Bildschirmauflösung,

http://www.w3schools.com/browsers/browsers_display.asp
3.3.2 Brutto-Fläche vs. Netto-Fläche
Von diesen „Brutto-Angaben“ über die Größe der zur Verfügung stehenden Fläche sind nun noch der
Platz für den Fensterrahmen des Browsers, für Scrollbalken, Symbolleisten, und eventuell eingeblen-
dete Favoritenleisten abzuziehen, um den „netto“ verbleibenden Raum für die Gestaltung der Web-
seite zu erhalten. Abbildung 23 zeigt diese Problematik am Beispiel von Firefox.
Auflösung 1280 x 800
Fenstergröße 1280 x 780 Platz für die Webseite:
Platz für die Webseite: 1264 x 595 913 x 578
Abbildung 23: Platzbedarf von Browser-Elementen: firefox ohne Sidebar, Internet Explorer mit Favoriten
. Abbildung 24 zeigt eine Statistik über die „Netto-Größen“ von Browser-Fenstern aus dem Jahre
2006. Laut dieser Statistik kann eine Webseite mit Breite 950 Pixel auf ca. 70% der Browser vollstän-
dig angezeigt werden. Bei 1050 Pixel Breite sind es nur noch 20%.

Abbildung 24: „Netto“-Breite von Browser-Fenstern, 2005-2006, Quelle: webwelt.horus.at
3.3.3 Entwurf für mehrere Auflösungen
Wie gehen WebdesignerInnen mit den verschiedenen Auflösungen um? Ein paar Varianten:
1) Ignorieren und für die eigene Bildschirmauflösung entwerfen. Manchmal in Kombination mit
der Beschriftung „best viewed at 1600x1200“
2) Ignorieren dass es viele Bildschirmauflösungen gibt, und für das Minimum entwerfen.
3) Entwurf der für mehrere Auflösungen funktioniert
Dazu ein strenges Urteil:
1) ist völlig inadäquat für das Medium Web. „best viewed“ ist eine Zumutung für alle LeserIn-
nen auf ‚unpassenden’ Ausgabegeräten. Stellen Sie sich vor, der Architekt der FH hätte eine
Treppe zum Eingang zum Foyer eingeplant, und dann ein Schild daneben gestellt „FH nur be-
nutzbar für Leute die Treppen steigen können“. Was würden sich wohl RollstuhlfahrerInnen
oder Leute mit Kinderwagen dazu denken?
2) Zeigt schon ein Minimum an Wissen über das Web, ignoriert aber die gestalterische Heraus-
forderung des Mediums. Weil soch ein Entwurf auf einem Bildschirm mit hoher Auflösung
sehr klein auf einer großen leeren Fläche erscheint wird es spöttisch
„Briefmarkenlayout“ genannt.
3) Nur das verdient wirklich die Bezeichnung „Webdesign“.
Ein Beispiel für Variante 3 :

Darstellung der Seite bei einer Auflö-

sung von 800x600:
Navigation (linke Spalte) und Content

ist sichtbar.
Eine Spalte rechts mit untergeordne-

tem Content ist nur durch Scrollen
nach rechts erreichbar.

sung von 1024x768
Navigation, Content und Zusatz-

Content voll sichtbar.

sung von 1280 x 1024

Der „leere“ Teil der Webseite wird

durch das Hintergrundbild interessant
gestaltet.


sung von 1600x1200.

Der „leere“ Teil der Webseite wird

durch das Hintergrundbild interessant
gestaltet.
Das Hintergrundbild wiederholt sich

zwar vertikal, aber horizontal zeigt es
auch bei dieser Auflösung neue De-
tails.
Dieses Beispiel ist „linksbündig“. Die aktuelle Webseite der FH ist bei höheren Auflösungen zentriert:
Abbildung 25: Aktuelle Homepage der FH Salzburg (November 2009)
Dieser Effekt wird mit einer fixen Breite und einem Margin von „auto“ links und rechts erzielt, siehe
Kapitel 3.5.1.
div#wrap {
width: 76em;
margin: 0 auto;
}
3.3.4 Firefox AddOn MeasureIt
Mit dem Firefox AddOn MeasureIt können Sie in einer Webseite Messungen vornehmen:

Abbildung 26: Höhe und Breite eines Teils der Webseite werden mit dem Firefox AddOn MeasureIt gemessen
3.3.5 Bilder und Größe
Als Bildformate für Webseiten werden nur Pixel-Formate von vielen Browsern unterstützt (siehe
auch Kapitel 2.1.2, Seite 17). Damit sind Bilder nicht gut skalierbar! Die aktuellen Browser tun es
aber doch: wenn z.B. die UserIn in Firefox 3.5 mit STRG + die Seite vergrößert werden auch die Bilder
mit vergrößert.
3.3.6 Schriftgröße
Auch die Schriftgröße im Browser unterliegt nur bedingte der Kontrolle durch HTML und CSS Code.
Das „letzte Wort“ hat hier die LeserIn, die die Schrift größer oder kleiner stellen kann., z.B. in MSIE
unter Ansicht Schriftgrad, in Firefox mit der Tastenkombination STRG + oder STRG –
Je nach Schriftgröße und zur Verfügung stehendem Platz im Browser-Fenster wird der Browser die
Absätze geeignet in Zeilen umbrechen, wie in Abbildung 27 gezeigt.
Abbildung 27:Darstellung von Text bei verschiedenen Fensterbreiten und Schriftgrößen

Beim Vergrößern und Verkleiner der Schriftgröße verwenden die Browser zwei verschiedene Metho-
den: entweder die Bilder werden mit der Schrift vergrößert und verkleinert, oder nur der Text wird
verändern, die Bilder aber bleiben gleich. Abbildung 28 zeigt das entsprechnde Menü in Firefox. Der
letzte Punkt des Menüs „Nur Text zoomen“ kann aktiviert oder deaktiviert werden.
Abbildung 28: Menü zum Verändern der Schriftgröße in Firefox
Wenn die Textgröße unabhängig von der Bildgröße verändert wird, verändern sich damit die Propor-
tionen und das Layout der Seite. Dies ist eine Herausforderung für das Design der Seite.

3.4 CSS Selektoren
Das Document Object Model (DOM) ist ein allgemeines Modell wie ein Dokument (die Webseite
oder auch ein XML- Dokument) als Baum (im mathematische Sinne) angesehen werden kann. Mit
dieser Vorstellung ergeben sich neue Fachwörter:
Die Tags werden als Elemente bezeichnet. So ist in folgendem Beispiel das erste li-Element inner-
halb des ol-Elements. Das li Element enthält wiederum ein a Element, und dieses einen Text „erster
Link“.
<html>
<body>
<p>Navigation</p>
<h1>Überschrift</h1>
<div class="intro">
<h2>Dies und Das</h2>
<ol>
<li><a href="#bla">erster Link</a></li>
<li><a href="#bla">zweiter Link</a></li>
</ol>
</div> ...
Elemente und Tags undwerden als Nodes oder Knoten bezeichnet. Für die Be-
ziehungen zwischen Nodes werden die Begriffe Eltern, Kind, Nachkommen,
Vorfahren verwedent: h1 ist ein Kind von body, „Überschrift“ ist das erste Kind
von h1. „Überschrift“ ist damit ein Nachkomme von body.
Damit haben wir das Vokabular um auch kompliziertere CSS-Selektoren zu ver-

stehen.
In Kapitel 2.2.2 haben Sie CSS Selektoren für Klassen und IDs kennen gelernt. In der CSS 2.1 Spezifika-
tion werden u.a. folgende Schreibweisen für Selektoren beschrieben4:
Name Muster Beschreibung
Universal selec-
* Stimmt mit jedem Element überein.
tor
Type selectors E Stimmt mit jedem E-Element überein
Stimmt mit jedem E-, sowie jedem F-, sowie jedem G-Element überein.
Grouping E, F, G
E, F und G könnten auch komplexere Selektoren sein!
Descendant E F Stimmt mit jedem F-Element überein, das ein Nachfahre eines E-
4
Gekürzt! Originaltext siehe auch http://www.w3.org/TR/CSS2/selector.html#q1, Beschreibung
zitiert nach der Übersetzung http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html,

selectors Elements ist, also z.B. <E>bla <div> <F>hier</F> </div> </E>.
Stimmt mit allen F-Elementen überein, die Kindelemente eines Elements

Child selectors E > F
E sind, also z.B. <E>bla <span>bla</span> <F>hier</F> </E>.
The :first-child Stimmt mit Element E überein, wenn E das erste Kindelement des über-
E:first-child
pseudo-class geordneten Elements ist. <E><F>hier</F> bla bla </E>.
Stimmt mit dem Element E überein, wenn E der Quellanker eines Hyper-
The link pseudo- E:link
links ist, dessen Ziel noch nicht besucht wurde (:link), oder dessen Ziel
classes E:visited
bereits besucht wurde (:visited).
E:active
The dynamic
E:hover Stimmt während bestimmter Benutzeraktionen mit E überein.
pseudo-classes
E:focus
Adjacent selec- Stimmt mit jedem F-Element überein, dem unmittelbar ein Element E
E + F
tors vorausgeht, also <E>dies</E> <F>das</F>
(Nur in HTML, nicht in XML) Stimmt mit jedem E-Element überein, des-
Class selectors E.warning
sen CLASS gleich „mwarning“ ist.
ID selectors E#myid Stimmt mit jedem E-Element überein, dessen ID gleich „myid“ ist.

3.5 CSS für Layout
Die Darstellung einer HTML-Seite durch den Browser erfolgt von oben nach unten, je nach Sprache
von links nach rechts oder von rechts nach links. Dabei wird zwischen blockbildenden Tags und nicht-
blockbildenden Tags unterschieden. In Abbildung 29 wurden <p> und <em>-Tags verwendet und mit
folgendem Stylesheet formatiert:
p { background-color:#CCCCCC; }
em { background-color:#FFFF66; }
Bei der Darstellung im Browser kann ein nicht-blockbildender Tag dabei auf mehrere Zeilen verteilt
werden, und nimmt dann mehrere Rechteckige Bereiche ein:
Abbildung 29: Darstellung von blockbildenden und nicht-blockbildenden Tags
Ein Bild wird dabei wie ein Wort im Text behandelt, und nicht etwa frei auf der Webseite positioniert.
Wenn Sie das Bild wie in Abbildung 30 mitten in einen Absatz hinein setzen, ergibt das meist ein sehr
hässliches Layout.
Abbildung 30: Bild mitten im Absatz
Browser können keine Wörter trennen und umbrechen, ein langes „Wort“ kann die Breite eines Ele-
mets überschreiten. Verschiedene Browser verhalten sich hier unterschiedlich. In Abbildung 31 kön-
nen Sie sehen, dass Microsoft Internet Explorer 7.0 URLs nicht umbricht. Firefox 3.0 hingegen kann
URLs umbrechen.

Abbildung 31: Darstellung eines Absatzes mit Rahmen und fixer Breite, der lange Wörter enthält, in MSIE 7.0
3.5.1 Width und Auto
Normalerweise nimmt ein Block die maximal zur Verfügung stehende Breite ein. Mit width kann eine
Andere Breite eines Blocks definiert werden:
div#main { width:500px; }
Die Werte von padding, border, margin müssen Sie dazu addieren um den Gesamt-Platzbedarf zu
errechnen:
{
width: 200px;
padding: 10px;
border-width: 10px;
margin: 32px 0px
}
Gesamtbreite = 0px + 10px + 10px + 200px + 10px + 10px + 0px = 240px
Abbildung 32: width im Box-Model
Um einen Inhalt zu zentrieren kann margin mit Wert auto verwendet werden.
div#main {
width:500px;
margin-left: auto;
margin-right: auto;
}
3.5.2 Float
Eine Möglichkeit aus der normalen Reihenfolge der Darstellung auszubrechen bietet die Deklaration
float mit den Werten left und right. Damit wird ein Element nach links bzw. rechts gesetzt, der
Rest des Inhalts „rutscht nach oben“ und wird neben das Element gesetzt („umfließt das Element“).
In Abbildung 2 sind drei Absätze zu sehen die jeweils als erstes ein Bild enthalten. Im ersten Absatz ist
die Darstellung ganz normal – das Bild wird wie ein Wort im Text behandelt. Im zweiten Absatz „floa-
ted“ das Bild nach rechts, der Text rutscht links davon nach oben. Im dritten Absatz „floated“ das Bild
nach links, der Text rutscht rechts davon nach oben.

Abbildung 33: Bilder mit float
Bei Bildern funktioniert float besonders einfach, weil das Bild schon eine fixe Breite hat. Wird ein
anderer HTML-Tag mit float versehen muß man auch die Breite des Tags setzen um einen sichtbaren
Effekt zu erzielen. In Abbildung 34 soll der zweite Absatz nach rechts gehen. Er hat die ID edvard.
p { margin: 0px; }
#edvard {
float:right;
width:33%;
}
Abbildung 34: Ein Absatz mit float
Wenn viele Elemente mit float positioniert werden die die gleiche Höhe haben entsteht ein beson-
ders flexibles Layout: in Abbildung 35 werden je nach zur Verfügung stehendem Platz drei oder vier
Bilder nebeneinander dargestellt:
Abbildung 35: Zwei Darstellungen der Bildergalerie mit float

3.5.3 Absolute Positionierung
Mit der Deklaration position:absolute wird ein Tag aus der normalen Darstellung herausgenommen
und über dem restlichen Inhalt der Seite platziert. Mit top und left kann die linke obere Ecke des
Elements positioniert werden.
#navi {
position: absolute;
width: 80px;
top: 0px;
left: 0px;
}
In Kombination mit einem Inhalt mit margin-left ergibt das folgendes Layout:
margin-left
von Inhalt
Abbildung 36: Kombination von absoluter Positionierung und margin-left
Die Koordinaten (top und left) beziehen sich normalerweise auf die linke obere Ecke des Browser-
fenster. Ein Tag mit position:absolute oder position:relative bildet für seine untergeordneten Tags
ein neues Koordinationsystem. In folgendem Code definiert das main-div ein neues Koordinatensys-
tem, das navi-div ist also in der linken oberen Ecke des main-div und nicht in der linken oberen Ecke
des Browser-Fensters positioniert.

<div id="main"> #main {

border: 1px red solid;
<div id="content">
position:relative;
<h1>Inhalt</h1>
width: 700px;
<p>Hier ist der Inhalt[. . . ]</p>
margin: 0px auto;
</div>
}
<div id="navi">
#content {
[. . . ]
margin-left: 120px;
</div>
background-color: #ddd;
</div> }
#navi {
position: absolute;
width: 80px;
top:0px;
left:0px;
}
3.6 Navigationsmenü mit CSS
Wenn man mit CSS ein Navigationsmenü gestaltet dann sollte man von einem HTML-Code ausgehen
der auch ohne CSS gut benutzbar bleibt ( „graceful degradation“).
Der Ausgangspunkt für ein Navigationsmenü ist eine Liste mit Links:
<div id="navi">
<h3 class="unsichtbar">Seitenauswahl</h3>
<ul>
<li><a href="home.html">home</a></li>
<li><a href="news.html">news</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
Ohne CSS wird die Liste ganz normal dargestellt. Mit CSS kann man daraus ein vertikales Menü ma-
chen, dazu wird mit list-style-type:none der Listenpunkt zu einem normalen Tag.
.unsichtbar {display:none;}
div#navi li {
list-style-type:none;
margin-bottom:1px;
background:#6C6;
width:6em;
padding: 0.2em;
}
div#navi li a:link {
text-decoration: none;
font-weight: bold;
color: black;
}
Mit Hilfe von Float kann man das Menü auch horizontal darstellen, dazu muß nur ein float eingefügt
und der margin anders gesetzt werden:

div#navi li {
float:left;
list-style-type:none;
margin-right:1px;
background:#6C6;
width:6em;
padding: 0.2em;
}
div#navi li a:link {
text-decoration: none;
font-weight: bold;
color: black;
}
3.6.1 Navigationsmenü wiederverwerten mit PHP
Das Navigationsmenü sollte natürlich in allen Seiten der Site gleich vorhanden sein. Dazu könnte man
den Code in alle HTML-Dateien kopieren. Wenn man dann eine neue Seite einfügen will, muss man
wiederum alle Seiten editieren.
Deswegen bietet es sich an bei dieser Geleg enheit von einfachem HTML auf PHP umzusteigen. PHP
istg eine Programmiersprache am Webserver mit der wir uns im Sommersemester intensiv beschäfti-
gen werden.
Dazu müssen Alle HTML-Dateien die Endung .php erhalten, im Navigationsmenü sieht das dann so
aus:
<div id="navi">
<h3 class="unsichtbar">Seitenauswahl</h3>
<ul>
<li><a href="home.php">home</a></li>
<li><a href="news.php">news</a></li>
<li><a href="portfolio.php">portfolio</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</div>
Das Navigationsmenü wird nun in einer separaten Datei gespeichert, z.B. navi.php.
In den einzelnen Seiten wird das Menü dann mit include eingebunden:
<body>
<?php include "navi.php" ?>
<h1>News</h1>
Achtung: Das Einfügen der inkuldierten Datei erfolgt auf dem Server. Der Client erhält das vollständi-
ge HTML-Dokument inklusive Navigation, und merkt von der Inkludierung nichts. Mit ANSICHT SEI-
TENQUELLTEXT ANZEIGEN kann man den PHP-Code nicht sehen.

Abbildung 37: Original PHP-Datei am Server und Quelltext-Ansicht im Webbrowser
Damit ist nun das Einfügen einer neuen Seite ganz einfach: nur die Datei navi.php muss editiert wer-
den.
3.6.2 :hover und :focus
Mit dem Selektor :hover wird eine CSS-Regel nur angewandt wenn die Maus über dem Tag ist.
(:focus hat eine ähnliche Bedeutung bei der Steuerung mit der Tastatur.)
div { background-color: #ddd; }

div:hover { background-color: red; }
Mit Hilfe von Hintergrundbildern kann man so zum Beispiel einen kitschigen 3d-Button darstellen.
div { background-image: url(button-up.png); }

div:hover { background-image: url(button-down.png); }
Beim Laden des zweiten Hintergrundbildes kann es dabei zu einer Verzögerung kommen. Um das zu
verhindern kann man die beiden Hintergrundbilder in einer Bilddatei speichern und nur den Bildaus-
schnitt wechseln:
/* css */
div {
height:115px;
width:240px;
background-image: url(pix/rolloverButton.gif);
overflow:hidden;
}
div:hover {
background-position: 0 -120px;
}

Eine extreme Anwendung dieses Prinzips nennt man CSS-Sprites: dabei werden möglichst viele Bilder
in einer Bild-Datei zusammengefaßt. Falls viele kleine Icons verwendet werden kann das die Darstel-
lung der Webseite erheblich beschleunigen.
Abbildung 38: CSS Sprites von Yahoo
So könnte der CSS Code aussehen5:
.icon{
display:block;
padding:8px 0 9px 40px;
background:url(http://us.i1.yimg.com/pa-icons2.gif) 5px 3px no-repeat;
}
#messenger .icon{
padding-left:31px;
background-position:2px -497px;
}
#music .icon{
background-position:5px -197px;
}
3.6.3 Dropdown Menü
Nun wollen wir ein Menü mit einem Submenü gestalten. Der HTML-Code besteht aus zwei ineinan-
dergeschachtelten Listen:
5
von http://www.websiteoptimization.com/speed/tweak/css-sprites/

<ul id="navmenu">
<li><a href="home.php">Home</a></li>
<li><a href="news.php">News</a>
<ul>
<li><a href="news.php?page=1">Michel Jackson tot</a></li>
<li><a href="news.php?page=2">Michel Jackson immer noch tot</a></li>
<li><a href="news.php?page=3">Ist Michael Jackson wirklich tot?</a></li>
<li><a href="news.php?page=4">Tot von Michael Jackson bestätigt</a></li>
</ul>
</li>
...
</ul>
Die Darstellung ohne CSS ist also eine einfache Liste. Mit CSS soll ein Dropdown-Menü dargestellt
werden (Prinzip „Graceful Degradation“, siehe Kapitel 2.3 auf Seite 34)
Abbildung 39: Menü mit Submenü, ohne und mit CSS
Die wichtigen neuen Bestandteile dieses Menüs:
Jeder li-Tag im Hauptmenü definiert ein neues Koordinatensystem
ul#navmenu > li { position: relative; }
Die Unter-Menüs werden dann absolut positioniert (immer unterhalb Ihres eltern-Tags):
ul#navmenu ul {
position: absolute;
top: 24px;
left: -2px;
z-index: 1000;
/* display: none */
}
Damit sind die Unter-Menüs richtig positioniert und alle gleichzeitig sichtbar. Mit der zusätzlichen
Deklaration display:none werden die Unter-Menüs versteckt. Wenn die Maus über einen Haupt-
Menüpunkt bewegt wird soll das entsprechende Untermenü sichtbar werden:
ul#navmenu li:hover ul {
display: block;
}
Achtung: hier wird der descendant selector (siehe Kapitel 3.4 auf Seite 50) verwendet: ul wird selek-
tiert, falls es innerhalb eines li:hover ist, das innerhalb eines ul#navmenu ist.

4. Formulare, URLs, erstes Javascript
• Wie Web-Formulare mit URLs zusammen hängen
• Welche HTML-Tags ein Formular und seine Eingabeelemente definieren
• Ein Web-Formular erstellen
• Ein alternatives Web-Formular für ein bestehendes Formular / Programm definieren
• Formulare. In: Selfhtml. http://de.selfhtml.org/html/formulare/
• HTML Forms and Input. In: W3 Schools. http://www.w3schools.com/html/html_forms.asp
• Newhouse(2001): Practical CSS Layout Tips, Tricks, & Techniques. In: A List Apart.
http://www.alistapart.com/stories/practicalcss/
Vertiefungsmöglichkeiten
• Ein alternatives Web-Formular für ein bestehendes Formular / Programm definieren
4.2 Formulare
Mit Ihren bisherigen Kenntnissen können Sie schon Webseiten mit einfachen Interaktions-
Möglichkeiten gestalten: mit Links ermöglichen Sie der LeserIn die Navigation durch das Web. Formu-
lare ermöglichen mehr Interaktion – aber immer noch in einem sehr strengen, sehr strukturierten
Rahmen. Abbildung 40 zeigt zwei typische Anwendungsgebiete für Web-Formulare: das Eingabefor-
mular der Suchmaschine Google und ein Bestellformular.

Abbildung 40 Formulare in Webseiten
Mit den HTML-Tags <form>, <input />, <textarea>, <option>, <select> werden Formulare aufgebaut.
Hier ein einfaches Beispiel:
Der <form>-Tag ist „unsichtbar“ und dient nur dazu, die anderen Eingabefelder zu bündeln. Im ac-
tion-Attribut des <form>-tag wird angegeben, an welche URL die Daten zur Verarbeitung geschickt
werden.
Im Browser sieht das oben gezeigte Formular so aus:
Abbildung 41: Darstellung eines Web-Formulars im Browser
4.2.1 Eingabefelder
Innerhalb des <form>-Tag bauen Sie das Formular aus verschiedenen Eingabeelementen und den
„normalen“ HTML-Tags auf. Tabelle 2 zeigt die verschiedenen Arten von Text-Eingabefeldern.

Textfeld: <input type="text"

name="meintextfeld"
value="text eingeben" />
Passwort-Feld: <input type="password"
name="meinpasswort" />
mehrzeiliges Text- <textarea name="zitat">

feld In a hole in the ground
there lived a Hobbit.
</textarea>
Tabelle 2: Text-Eingabefelder
Für einzelne Fragen die mit Ja oder Nein zu beantworten sind wird das Eingabe-Element „check-
box“ verwendet, siehe Tabelle 3.
<input type="checkbox" name="rauch" /> Raucher
Tabelle 3: Checkbox für Ja-/Nein-Fragen
Für Fragen, bei denen eine von mehreren vorgegebenen Antworten möglich sein soll gibt es ver-
schiedene Eingabeelemente, die in Tabelle 4 gezeigt werden.
Radiobuttons
<input type="radio" name="size" value="XL" /> XL
<input type="radio" name="size" value="L" /> L
<input type="radio" name="size" value="M" /> M
<input type="radio" name="size" value="S"
checked="checked" /> S
Menü
<select name="size2">
<option>XL</option>
<option selected>L</option>
<option>M</option>
<option>S</option>
</select>
Menü mit „leer“- Auswahl
<select name="size3">
<option>---Bitte Auswählen---</option>
<option>XL</option>
<option>L</option>
<option>M</option>
<option>S</option>
</select>
Liste
<select name="html" size="4" multiple="multiple">
<option>im Code</option>
<option>Dreamweaver</option>
<option>GoLive</option>
<option>Frontpage</option>
</select>
Tabelle 4: Eingabeelemente für Fragen mit mehreren Antworten

Radiobuttons, die zu einer Frage gehören, müssen den selben Namen tragen. der Wert ist unter-
schiedlich (im Code: Attribut name ist gleich, value unterschiedlich). Nur bei einer Liste besteht die
Möglichkeit mehrere Antworten auszuwählen. Für alle Eingabefelder gibt: falls auch "keine Antwort"
möglich sein soll müssen Sie dafür eine eigene Option einbauen.
Jedes Formular braucht einen Absende-Button wie in Tabelle 5 gezeigt.
Absende-Button
<input type="submit" value="drück mich!" />
Tabelle 5: Eingabefelder Absenden und Zurücksetzen
Ohne Absende-Button können die Daten nicht zur weiteren Verarbeitung übermittelt werden.
Zurücksetzen? Nein Danke!

Zurücksetzen-Button
<input type="reset" value="Zurücksetzen" />
Den Zurücksetzen Button sollten Sie nur sehr selten einsetzen. Warum? Denken Sie an Ihre eigene
Erfahrung mit Web-Formularen zurück: Wie oft haben Sie auf einen Zurücksetzen Button gedrückt
und dann gedacht „super, alles gelöscht, genau das wollte ich“, und wie oft haben Sie auf einen Zu-
rücksetzen Button gedrückt und dann gedacht „Mist, das war ja gar nicht der Einsende-Button, jetzt
muss ich alles noch mal tippen.“
Tabelle 6 zeigt noch mehr Eingabefelder, die eher selten gebraucht werden.
Unsichtbares = Verstecktes Feld

<input type="hidden" name="webseite"
value="www.students" />
Button ohne Auftrag, für Javascript-Programme
<input type="button"
value="Extrafenster"
onClick="..Javascript hier.." />
Bildfeld, liefert angeklickte x+y Koordinaten.
<input type="image"
border="0"
name="position"
src="austria.gif"
width="150" height="64" />
Visuelle Zusammenfassung mehrer Felder: fieldset + legend
<fieldset>
<legend>Kreditkarte</legend>
<input name="nr" /><br>
<input type="radio" name="kk"
value="Master" /> Master
<input type="radio" name="kk"
value="Visa" /> Visa <br>
</fieldset>

Datei-Upload, funktioniert nur wenn die Formular-Daten mit Methode POST und speziellem enctype
an den Webserver geschickt werden, siehe Kapitel Fehler! Verweisquelle konnte nicht gefunden
werden. auf Seite 6.
Wählen Sie ein Bild aus:
<input type="file" name="bilddatei">
Tabelle 6: selten verwendete Eingabefelder
Aus diesen Eingabeelementen ist jedes Web-Formular aufgebaut. Die Problematik der Formulare
liegt nicht in der Kenntnis der Eingabefelder, sondern im Entwurf der Interaktionsmöglichkeiten.
4.2.2 Interaktionsmöglichkeiten
Bei der Verwendung von Checkboxen, Radiobuttons, Menüs und Listen geben Sie genau vor, welche
Möglichkeiten die LeserIn hat. Wenn Sie beim Entwurf des Formulars eine Möglichkeit vergessen,
kann die LeserIn nichts mehr daran ändern. Deswegen ist hier besondere Sorgfalt geboten. Eine be-
sonders häufige Auslassung zeigt Tabelle 7.
Tabelle 7: Entwürfe für ein Getränke-Bestell-Formular
Der linke Entwurf in Tabelle 7 läßt keine Bestellung nur einer Sorte Bier zu. Die „Mindestbestellmen-
ge“ für jede Sorte ist jeweils eine Kiste. Durch das Einfügen einer „Leer“-Option in die Menüs wird
diese Einschränkung aufgehoben.
Im Folgenden sehen Sie eine Reihe von Entwürfen eines Reservierungs-Formulars für ein Hotel.
Version 1: Ein Menü ermöglicht die Auswahl aus vorgegebe-

nen Elementen.
Mit diesem Formular kann man nur ein, nicht aber zwei oder
mehr Zimmer reservieren.
Version 2: Ein Text-Eingabefeld ermöglicht hier die Eingabe

der Anzahl der Zimmer.
Es ist aber nicht möglich ein Einzel- plus ein Doppel-Zimmer zu
reservieren.

Version 3: Diese Version ermöglicht die Reservierung von

beliebigen vielen Zimmern in allen Kombinationen.
Version 4: Durch ein zusätzliches Textfeld können alle weite-

ren Probleme abgefangen werden
Abbildung 42 Entwürfe für ein Zimmer-Reservierungs-Formular
Achtung: wenn Sie zu viele Eingabemöglichkeiten bieten entsteht Redundanz ,dann können Sie die
Bedeutung der Eingabe nicht mehr eindeutig erkennen.
Abbildung 43: Redundanz im Formular
In Abbildung 43 im linken Formular wird die Anzahl der bestellten Pizzas auf zwei Arten festgelegt:
durch eine Checkbox und eine Text-Eingabe. In der obersten Zeile stimmen diese beiden Eingabefel-
der in Ihrer Aussage überein: Ja, 1 Stück Carbonara. Aber es ist auch möglich eine in sich Wider-
sprüchliche Bestellung abzugeben: Ja, Null Stück Margaritha bzw. Neine, 1 Stück 4-Käse.
Im rechten Formular wird diese Redundanz vermieden.
4.3 Daten absenden
Was passiert, wenn Sie ein Formular ausfüllen und auf den Absende-Button drücken? Meist werden
Sie an den Webserver zur weiteren Verarbeitung geschickt. Diese action wird direkt im <form>-Tag
angegeben.
<form action="http://multimediatechnology.at/html/form/echo.cgi">
4.3.1 Daten an E-Mail senden
Wenn Sie kein Möglichkeit haben, am Webserver zu programmieren, bleibt als Alternative, die Daten
direkt per E-Mail zu senden. So sieht der entsprechende HTML-Code des Formulars aus:

<form action="mailto:ich@uni-salzburg.at"
method="POST"
enctype="text/plain">
Achtung: diese Art die Daten zu senden ist sehr fehleranfällig: hierfür muß nicht nur der Browser
funktionieren, sondern auch das E-Mail Programm. Das E-Mail Programm muß richtig konfiguriert
sein. Das ist auf vielen Computern am Internet nicht der Fall, oft werden die Daten also nicht erfolg-
reich versandt sondern gehen verloren.
Abbildung 44: Formular per E-Mail oder über den Webserver senden
4.3.2 Daten senden mit Methode GET
Wird im Form-Tag als Action eine URL mit http angegeben dann werden die Daten an den Webserver
gesendet. Dabei gibt es zwei Methoden: GET und POST. GET ist die einfachere.
In Abbildung 45 sehen Sie ein (leicht vereinfachtes) Bestellformular für Flugzeuge das die Methode
GET verwendet.
Abbildung 45: Formular mit Methode GET
Wenn die UserIn auf „Bestellung absenden“ drückt, baut der Browser aus der action und den Namen
und Werten der einzelnen Eingabefelder eine URL zusammen, die dann aufgerufen wird wie in
Abbildung 46 gezeigt.

Abbildung 46: URL einer GET-Anfrage
Die komplette URL lautet im Beispiel:
http://localhost/php/test.php?anzahl=4&adresse=Jakob+Haringer+Str.1%0D%0A5020+Salzburg
action 1.Eingabe 2.Eingabe
Die URL wird zusammengestellt aus:
1. der Action (aus dem form-Tag)
2. ? (einem Fragezeichen )
3. für alle Eingabefelder, getrennt durch & (kaufmännisches Und):
a. Name des Eingabefeldes
b. = (Gleich Zeichen)
c. Eingegebener / angeklickter Wert
Falls dabei Sonderzeichen vorkommen (z.B. Leerzeichen, Zeilenumbrüche, Umlaute, Fragezeichen,

kaufmännisches Und) werden diese wie folgt encodiert: Statt Leerzeichen wird ein + oder %20 ge-
setzt, bei allen anderen Zeichen wird ein % gefolgt von der Hexadezimaldarstellung des ASCII-Code
gesetzt (siehe rfc 2396). Diese Codierung nennt man URL-Encoding.
4.3.3 URL als Programm-Schnittstelle
Das Webformular ist nicht notwendig, um eine GET-Anfrage zu erzeugen. Wenn Sie z.B. das Eingabe-
Formular von Google analysieren werden Sie herausfinden, dass die Anfrage mit dem Suchwort
„Schokolade“ so aussieht:
http://www.google.com/search?q=Schokolade
Sie können diese URL einfach direkt in den Browser eintippen, ohne das Eingabeformular von Google
zu verwenden. Sie können diese URL in den Lesezeichen/Favoriten Ihres Browsers speichern oder in
einem Link verwenden:

<a href="http://www.google.com/search?q=schokolade">Suche nach Schokolade</a>
Gerade bei Suchmaschinen wird diese Möglichkeit oft genutzt: z.B. durch die Suchfelder, die in den
Browsern eingebaut sind:
Abbildung 47: Suchfeld von Firefox
Wenn Sie eine Web-Applikation erstellen müssen Sie auch darauf gefasst sein, dass die UserInnen
nicht nur die Web-Formulare verwenden, sondern auch URLs konstruieren und aufrufen. Die URL
(und nicht das Formular) ist also eine öffentliche Schnittstelle zu Ihrem Programm!
Ein lehrreiches Beispiel aus der Frühzeit des Web: es gab einst Webshops, die den Preis der Waren
als verstecktes Eingabefeld im Formular speicherten:
Airbus Bestell-Formular
<form action="order.php" method="GET">
Anzahl: <input name="anzahl" /> <br />
Adresse: <textarea name="adresse"></textarea><br />
Preis: 1.000.000 DM
<input type="hidden" name="preis" value="1000000" />
<input type="submit" value="Bestellung absenden" />
</form>
Das gibt der KundIn die Chance ein „Gegenangebot“ zu senden (als „pricing attack“ bekannt):
http://happyshop.com/order.php?anzahl=4&adresse=Urstein+Süd+.1&preis=10
Wenn nun das Programm order.php einfach den Preis aus der URL übernimmt und auf die Rechnung
schreibt, wird der Airbus recht günstig (für die KundIn) verkauft.
Merke: Alle Eingaben die eine Web-Applikation erhält sind mit extremer Skepsis zu betrachten!
4.4 Formular und PHP
Die Daten aus einem Web-Formular werden vom PHP-Interpreter verarbeitet, die URL-Codierung
aufgelöst und die Daten dann in mehreren superglobalen Arrays zur Verfügung gestellt:
$_GET Dieses Array enthält die Parameter einer GET-Anfrage.
Um die Bestellung aus dem Formular in Abbildung 45 (Seite 67) zu verarbeiten, könnte folgendes
Programm verwendet werden:

<?php
$anzahl = $_GET['anzahl'];
$adresse = $_GET['adresse'];
echo("<p>Ihre Bestellung über $anzahl Flugzeuge ist eingelangt</p>");

echo("<p>Die Flugzeuge werden binnen 1 Monat an $adresse geliefert</p>");
?>
Dabei wird aber die Eingabe noch gar nicht geprüft. In dieser minimalen Version des Bestellpro-
gramms senden wir die Daten einfach vom Server per E-Mail weiter:
mail(
"ich@fh-salzburg.ac.at", // To:
"Bestellung von $anzahl Flugzeugen", // Subject:
"Lieferung von $anzahl Flugzeugen an Adresse $adresse" // Text der E-Mail
);
Im Sommersemester lernen Sie mehr über PHP.
4.5 Formular und Javascript
Am Beispiel eines Formular werden wir nun einfaches Javascript kennen lernen. Die Details von Ja-
vascript werden in den nächsten Kaptieln, hier geht es nur um ein erstes Kennenlernen.
4.5.1 Javascript Einbetten
Javascript kann innerhalb des <script>-Tags irgendwo in den HTML-Code eingefügt werden.
<h1>Hallo Welt</h1>
<script>
var pi,r,a;
pi = 3.141;
r = 2;
a = r * r * pi;
</script>
Ohne Output merkt man aber gar nichts davon, nur mit Firebug könnte man die Variablen auslesen
wie in Abbildung 48 gezeigt.
Abbildung 48: Mit firebug den Wert einzelnen Javascript-Variablen auslesen

4.5.2 Popup-Fenster
Mit den Befehlen alert, confirm und prompt können Sie kleine Popup-Fenster öffnen:
<script type="text/javascript">
alert("peng, du bist tot!");
var ja_nein = confirm("sollen die daten nicht gelöscht werden?");
var antwort = prompt("welche Daten sollen gelöscht werden. Keine Angabe löscht alles");
</script>
Achtung: So können Sie zwar bei gutgläubigen Menschen Herzinfarkte auslösen, aber Sie können mit
Javascript nicht wirklich Dateien löschen.
4.5.3 Formulare
Mit der Konsole von Firebug können Sie auch Formulare genauer untersuchen:
<form name="test">
<input value="0" size="10" name="in" />
<input value="0" size="10" name="out" />
</form>
Abbildung 49: Mit Firebug Formulare und Eingabefelder auslesen
Mit document.test kann man also das gesamte Formular (mit dem Namen „test“ ) ansprechen, wenn
man noch den Namen eines Eingabefeldes anfügt kann man das Eingabefeld innerhalb des Formula-
res ansprechen (z.B. document.test.in).
Jedes eingabefeld bietet mit value den aktuell eingegeben Wert (als String) an, hier z.B. docu-
ment.test.in.value. Die letzten beiden Zeilen in der Konsole zeigen, dass es auch umgekehrt funkti-
oniert: man kann auch Werte ins Eingabefeld hineinschreiben, der neue Werte wird sofort im Brow-
ser angezeigt.
4.5.4 document.write
Mit dem Befehl document.write() kann Text/Code in den HTML-Code eingefügt werden.

<h1>Hallo Welt</h1>
<script>
document.write("<p>Hallo Javscript</p>");
</script>
<p>Hallo HTML</p>
Der Browser interpretiert das Javascript und fügt das Ergebnis zu einem HTML-Dokument zusammen.
Achtung: Dieses resultierende HTML-Dokument existiert nur im Haupt-Speicher des einen Computers
auf dem der Browser gerade läuft, es wird nie abgespeichert! Mit Firebug kann man es aber sehen:
<h1>Hallo Welt</h1>
<p>Hallo Javscript</p>
<p>Hallo HTML</p>
Ein sinnvolles Anwendungsbeispiel dieses Befehls: Ich will ein Dropdown-Menü mit vielen Einträen,
bin aber zu faul um alle <option>-Tags einzutippen.
<form>
<select name="Anzahl" id="Anzahl">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
<input type="submit">
</form>
Ich ersetze also die option-Tags durch eine Schleife in Javascript:
<form>
<select name="Anzahl" id="Anzahl">
<script language="javascript">
var i=0;
while(i <= 50) {
document.write("<option>" + i + "</option>");
i++;
}
</script>
</select>
<input type="submit">
</form>
Mit Ansicht -> Quelltext sieht man den Javascript-Code, In Firebug sieht man das Ergebnis:

4.5.5 Ereignisse und Ereignisgesteuerte Programmierung
Javascript ist eine Programmiersprache für die Gestaltung von Benutzerschnittstellen. Für grafische
Benutzerschnittstellen hat sich ein besonderer Programmierstil entwickelt: die ereignisgesteuerte
Programmierung. Dieser Stil kommt auch in Actionscript (in Flash), in Visual Basic, u.s.w. zum Einsatz.
Dabei lösen Ereignis, die die BenutzerIn setzt bestimmte Programmteile aus.
Im Webbrowser sind solche Ereignisse z.B.:
• Klicken auf einen Link
• Eintippen in ein Textfeld
• Anklicken einer Checkbox
• Absenden eines Formulares
Ein Beispiel für ereignisgesteuerte Programmierung mit einem Web-Formular: Das Bestellformular
für Bücher in Abbildung 50 soll automatisch den Gesamtpreis berechnen.
Abbildung 50: Bestellformular für Bücher mit Berechnung

Wenn in ein Anzahl-Feld ein neuer Wert eingegeben wird soll dieser mit dem Preis multipliziert wer-
den und in das entsprechende Feld geschrieben werden. Betrachten wir zuerst diesen Schritt alleine
an einem vereinfachten Formular mit einem Eingabe- und einem Ausgabe-Feld:
<form name="test">
<input value="0" size="10" name="in" />
</form>
Für die Formulierung „Wenn in das Feld in ein neuer Wert eingegeben wird, dann...“ gibt es ein pas-
sendes Event in HTML/Javascript: onchange. Die wird als Attribut in den HTML-Code des Eingabefel-
des geschrieben:
<form name="test">
<input value="0" size="10" name="in" onchange="hier Javascript" />
</form>
Eine Liste von Events bzw. on-Attributen für HTML-Tags finden Sie z.B: in selfhtml6.
In das Attribut kann nun Javascript-Code eingefügt werden der die richtige Berechnung vornimmt
und das Ergebnis in das richtige Element schreibt:
<form name="test">
<input value="0" size="10" name="in"
onchange="document.test.out.value = document.test.in.value * 100;" />
</form>
Nun wäre es natürlich unpraktisch in das onchange-Attribut ein längeres Javascript-Programm zu

schreiben. Dafür kann man in Javascript Funktionen definieren, die dann nur noch aufgerufen wer-
den. Z.B. um die Gesamtsumme im Bestellformular zu berechnen ist eine Funktion praktisch:
6
http://de.selfhtml.org/javascript/sprache/eventhandler.htm

<head>
<script language="javascript">
function gesamt()
// Addiert die Preise der einzelnen Bücher zur einer Gesamtout,
// schreibt das Ergebnis ins Feld „gesamtout“
{
document.test.gesamtout.value =
document.test.out1.value +
document.test.out5.value + Achtung:
document.test.out6.value;
} enthält noch einen Bug!
</script> weiterlesen!
</head>
<body>
Bei den einzelnen Berechnungen für die einzelnen Bücher wird jeweils zum Schluss gesamt() aufgeru-
fen:
Das Programm enthält noch einen – ganz typischen – Javascript-Bug.
In Javascript werden die Datentypen int, float, char, zwar unterschieden, aber nicht deklariert. Es
kann in einer Variable einmal ein String und einmal eine Zahl gespeichert sein:
var a,b,c;
a = 10;
document.write("<br />wie viel ist 10 plus 20? ");
document.write(a + 20);
a = "zehn";
a = "10";
Hier der Output des Programms:

wie viel ist 10 plus 20? 30

wie viel ist 10 plus 20? zehn20
wie viel ist 10 plus 20? 1020
Der + Operator verhält sich also je nach Datentype des ersten Arguments verschieden: steht links des
Plus-Zeichens eine Zahl, dann erfolgt eine Addition. Steht links des Plus-Zeichens ein String, dann
erfolgt eine String-Konkatenation; ein Aneinanderfügen von Text.
Eingabefelder in Web-Formularen liefern immer einen String. Deswegen berechnet die gesamt-
Funktion nie eine Summe, sondern führt nur eine Aneinanderfügung der Zahlen als Text durch wie in
Abbildung 51 gezeigt: aus 100 + 200 + 0 + 0 + 0 + 0 wird 1002000000.
Abbildung 51: Falsche Berechnung in Javascript: Konkatenation statt Addition
Bei der Multiplikation mit * tritt dieses Problem nicht auf, da der Stern keine zweite Bedeutung hat.
Mit der Funktion parseInt() können Sie einen String in eine Integer-Zahl verwandeln bevor Sie die
Addition durchführen.
4.5.6 Formular prüfen
Mit Javascript kann man schon vor dem Absenden des Formulares prüfen ob wichtige Daten einge-
geben wurden, und das Einsenden des Formulares verhindern falls dem nicht so ist.
Dafür gibt es das Event „onsubmit“ im form-Tag.
<form name="pizzaformular"
action="http://webwelt.horus.at/html/form/echo.cgi"
onsubmit= "wert=formularok(); return wert;">
Die Besonderheit dieses Events: wenn am Ende des Events ein falscher-Wert zurückgegeben wird
verhindert der Browser das Senden der Formulardaten. Entsprechend kann man eine Funktion
schreiben:

<script>
function formularok() {
var ok, fehler;
ok = true;
fehler = "";
if ( document.pizzaformular.liefername.value == "" ) {
fehler += "Sie müssen den Empfänger angeben\n";
ok = false;
}
if ( document.pizzaformular.adresse.value == "" ) {
fehler += "Sie müssen eine Lieferadresse angeben\n";
ok = false;
}
// weitere Überprüfungen
if ( ok ) {
return true;
} else {
alert("Das Formular ist nicht ok:\n" + fehler );
return false;
}
}
</script>
</head>
<body>
<form name = "pizzaformular"

action = "http://webwelt.horus.at/html/form/echo.cgi"
onsubmit = "wert=formularok(); return wert;">
Empfänger: <input type="text" name="liefername" id="liefername" /> <br />

Adresse: <input type="text" name="adresse" id="adresse" /> in 5020 Salzburg<br />
Telefon/Handy: <input type="text" name="tel" id="tel" /> in 5020 Salzburg<br />
<input name="" type="submit" />

</form>

5. Javascript und DOM
• Was der Unterschied zwischen Javascript und Java ist. Welche Sprache für eine bestimmte
Problemstellung passend ist.
• Dass Javascript eine Programmiersprache im Web-Browser ist. Dass Javascript Kompatibli-

tätsprobleme hat, aber trotzdem die einzige Chance ist, Webseiten interaktiver zu machen.
• Mit den DOM-Befehlen alle Elemente in eine Webseite manipulieren.
• MORRISON,Michael (2008): Head First JavaScript (Head First). O'Reilly. ISBN 0596527748.
• FLANAGAN,David (2007): JavaScript: Das umfassende Referenzwerk. O'Reilly. ISBN

3897214911.
• CROCKFORD,Douglas (2008): JavaScript: The Good Parts. O'Reilly Media, . ISBN 0596517742.
• STEYER,Ralph (2003): JavaScript in 21 Tagen . Schritt für Schritt zum Programmierprofi..

5.2 Hintergründe
Javascript ist eine Programmiersprache die in HTML eingebettet und vom Browser interpretiert wird.
Der Wirkungsbereich von Javascript ist auf das Browserfenster und das aktuelle Dokument be-
schränkt — Sie können mit Javascript nicht die Festplatte löschen oder Excel starten. Unter dem Na-
men Actionscript wird eine Variante von Javascript in Flash verwendet.
5.2.1 Javascript und Java
Es gibt noch eine zweite Programmiersprache mit sehr ähnlichem Namen: Java. Die beiden zu ver-
wechseln ist recht peinlich. Die Verwechslung ist übrigens beabsichtigt: Im Jahr 1995 gab es einen
großen Hype rund um Java, Netscape wollte davon profitieren und nannte die neue Skriptsprache im
Browser „Javascript“.
Javascript Java
Wer hat’s erfunden? Netscape / Brendan Eich Sun
Interpretiert Sprache Kompilierte Sprache
Typbindung Wenige Datentypen, Probleme wer- Datentypen und Klassen werden

den erst zur Laufzeit erkannt streng unterschieden und zur Compi-
lezeit geprüft
Verwendung Im Webbrowser, in Flash, in Illustra- Überall (Chipkarten, am Server, im

tor und Indesign Browser, im Handy)
Projekte Meist kurzfristige Projekt mit weni- Alle, auch Großprojekte mit vielen
gen Personen „Mannjahren“
ProgrammiererInnen Auch Web-DesignerInnen Nur InformatikerInnen
Objektorientierung Objekte und Prototypen Objekte und Klassen
5.2.2 Geschichte von Javascript
Javascript wurde ursprünglich bei Netscape von Brendan Eich erfunden, und dann von verschiedenen
Herstellern weiterentwickelt. Es war eines der Schlachtfelder im Browser-War: Microsoft und Net-
scape versuchten durch verschiedene Javascript-Implementierungen die Position des eigenen Brow-
sers zu verbessern und Webseiten im gegnerischen Browser unbrauchbar zu machen.

Ein Beispiel: um die Breite des Browser-Fensters auszumessen gibt es mehrere Varianten:
funktioniert in Netscape und Mozilla x = window.innerWidth;
funktioniert in Internet Explorer x = document.body.clientWidth;
Erst nachträglich gab es (partielle) Einigung auf Standards. Mit dem „Document Object Mo-
del“ (DOM) und Libraries wie Prototype oder jQuery hat Javascript nun einen Zustand erreicht, der
die Programmierung wieder erträglich macht.
Lange Zeit waren kleine Javascript-Programme eine relative unabhängige Ergänzung für Web-
Applikationen. Ein Beispiel dafür wäre ein Javascript-Kalender der die Eingabe eines Datums in ein
Eingabefeld erleichtert.
Seit 2005 wir unter dem Schlagwort AJAX Javascript noch enger mit der serverseitigen Webapplikati-
on verzahnt: AJAX steht für asynchrones Nachladen von Teilen der Webseite über Javascript.
5.2.3 Document Object Model
Das Document Object Model (DOM) ist ein allgemeines Modell wie ein Dokument (die Webseite
oder auch ein XML- Dokument) von einer objektorientierten Skriptsprache aus manipuliert werden
kann. Am 1. Oktober 1998 wurde das DOM eine offizielle W3-Empfehlung (recommendation) in der
Version 1. 0.
Das DOM einer Webseite kann man sich als Baum vorstellen, ähnlich der Ordnerstruktur im Dateisys-
tem. So ist in folgendem Beispiel der markierte <li>-Tag innerhalb des <ol>-Tags, der <li>-Tag ent-
hält wiederum einen <a>-Tag.
<html>
<body>
<p>Navigation</p>
<h1>Überschrift</h1>
<div class="intro">
<h2>Dies und Das</h2>
<ol>
<li><a href="#bla">erster Link</a></li>
<li><a href="#bla">zweiter Link</a></li>
</ol>
</div> ...
Wenn man mit Javascript irgendeinen Teil der Webseite verändern will verän-
dert man diesen Baum. Mögliche Veränderungen wären:
• Mache ein beliebiges Element des DOM unsichtbar

(z. B. die ganze Liste)
• Ändere den Style eines beliebigen Elements

(z. B. die Schriftart der Überschrift)

• Füge neue Elemente ein (z. B. drei zusätzliche Listenpunkte)
5.3 Basic Javascript
Ein vollständiges Beispiel für eine Webseite mit Javascript-Programm:
<head>
<script>
function setcolor( c ) {
b = document.getElementById('farbfeld');
b.style.backgroundColor = c
}
</script>
<body id="farbfeld">
<h1>Farbwahl</h1>
<form>
<input type="button" value="Rot" onclick="setcolor('red')" />
<input type="button" value="Grün" onclick="setcolor('#0F0')" />
<input type="button" value="Blau" onclick="setcolor('blue')" />
</form>
</body>
In dieser Webseite ist an den vier markierten Stellen Javascript zu finden. Wie Sie sehen ist Javascript
sehr eng mit HTML und CSS verzahnt. Wenn Sie also eine bestehende Website warten oder verän-
dern sollen, müssen Sie mindestens den bestehenden Javascript-Code erkennen können, um ihn
nicht zu beschädigen — auch wenn Sie selbst nicht programmieren wollen.
Deswegen klären wir erst einmal wie Javascript eingebunden wird.
5.3.1 Einbindung von Javascript
Externe Javascript-Datei
Man kann Javascript-Programme in eigenen Dateien speichern, diese haben traditionell die En-
dung .js. Wir werden eine Javascript-Library namens jQuery verwendet. Mit dem <script>-Tag im
Head des Dokuments wird die externe Javascript-Datei eingebunden:
<script src="jquery.js" type="text/javascript"></script>
Wird der <script>-Tag auf diese Weise (mit dem Attribut src) verwendet, dann darf er keinen Inhalt
zwischen <script> und </script> enthalten. Achtung: die Schreibweise ohne Ende-Tag: <script
src=“jquery“ /> funktionert nicht!

Der <script>-Tag
Javascript-Programme können im HTML-Code mit dem <script>-Tag eingebettet werden. Das Pro-
gramm wird dann beim Aufbau der Seite ausgeführt:
<h1>Selbstzerstörung</h1>
<script>
i=10;
while (i>0) {
document.write("<br>in " + i + " Millisekunden");
i--;
}
</script>
<p><strong>Peng!</strong>
Dieses Programm ist übrigens ein gutes Beispiel für ein veraltetes Javascript-Programm. Der Befehl
document.write(), der hier für die Ausgabe verwendet wird, wurde durch das DOM größteteils er-
setzt.
Javascript in einer URL
Als URL kann man auch ein kleines Javascript-Programm angeben, z. B. bei einem Link:
<a href="javascript:alert('linkt nicht sondern poppt');">js</a>
Die “Javascript-in-einer-URL”- Schreibweise ist in HTML-Seiten nicht sehr sinnvoll, da sie für Browser
ohne Javascript-Fähigkeit die Links unbrauchbar macht.
Hier eine Version, die mit und ohne Javascript sinnvoll funktioniert:
<a href="http://www.google.at" onclick="ok = confirm('go?'); return ok;">google</a>
Ohne Javascript ist es ein ganz normaler Link zu google.
Mit Javascript erscheint ein Dialog, je nach Antwort wird der Link entweder aufgerufen oder nicht.
Das funktioniert gleich wie beim onsubmit-Attribut des form-Tags: wenn der Event-Handler false
zurückgibt wird das Event unterbrochen.
Die onevent - Attribute
Meist werden Javascript-Programme so geschrieben, dass sie nicht gleich beim Laden der Seite star-
ten, sondern erst wenn gewisse Ereignisse (Events) eintreten (siehe Kapitel 4.5.5, Seite 73)
Ein paar typische Events mit ihren typischen HTML-Tags:

<body onload=". . . ">

Das Programm wird ausgeführt, nachdem die ganze Seite
geladen + fertig dargestellt ist
<a href=". . . "

Das Programm wird ausgeführt wenn die Maus über den Link
onmouseover=". . .
bewegt wird (auch: onmouseout)
">
<input type="button"
Das Programm wird ausgeführt wenn auf den Button geklickt
onclick=". . ">
wird. Das Programm muß true oder false zurückgeben um
anzuzeigen ob der Link wirklich geöffnet werden soll.
<form onsubmit=". . .">

Das Programm wird ausgeführt wenn der Einsende-Knopf des
Formulars betätigt wird, aber bevor die Daten wirklich gesen-
det werden. Falls der Javascript-Code false zurückgibt wer-
den die Daten aber nicht versandt!
<a href=". . . "

Das Programm wird ausgeführt wenn der Link angeklickt wird.
onclick=". . . ">
Falls der Javascript-Code false zurückgibt wird der Link aber
nicht aktiviert!
<input onchange=". . ">

Das Programm wird ausgeführt wenn der Inhalt des Eingabe-
feldes verändert wurde
Eine ausführliche Liste der Events, und eine ausführliche Auflistung welcher HTML-Tag mit welchem
Event kombiniert werden kann, finden Sie in selfhtml7.
5.3.2 Syntax von Javascript
Javascript hat eine ähnliche Schreibweise wie die Sprachen aus der C-Familie (C, C++, Java, Perl, PHP):
Anweisung wird mit einem Strichpunkt (Semikolon) getrennt, Blöcke werden mit geschwungenen
Klammern gebildet. Im Beispiel sehen Sie eine Funktions-Definition mit zwei Anweisungen:
function setcolor( c ) {
b = document.getElementById('farbfeld');
b.style.backgroundColor = c
}
In diesem Beispiel sehen Sie auch die objektorientierte Schreibweise für Methoden und Eigenschaf-
ten:
7
http://de.selfhtml.org/javascript/sprache/eventhandler.htm

Eine Methode ist eine Funktion die zu einem Objekt gehört, wie z.B. die Funktion getElementById() ,
die zum document-Objekt gehört. Die Methode wird als objekt.methodenname() aufgerufen.
Eine Eigenschaft ist eine Variable die zu einem Objekt gehört, wie z.B. die style (eine Eigenschaft von
b) oder backgroundColor (eine Eigenschaft von style).
In andere Programmiersprachen müssen Variablen deklariert werden (ein Datentyp für die Variable
wird festgelegt) und initialisiert werden (ein erster Wert wird in die Variable gespeichert). In Javasc-
ript ist das nicht nötig. Wenn eine Variable zum ersten Mal im Programm erwähnt wird, wird sie vom
Interpreter angelegt und mit dem Wert undefined belegt.
Die folgenden Beispiele können Sie direkt in Firebug in der Console ausprobieren wie in Abbildung 52
gezeigt: Wenn Sie einen Ausdruck eintippen wird er ausgewertet, mit dem Befehl console.log( … )
können Sie direkt auf die Console schreiben.
Abbildung 52: Javascript Console in Firebug
Variablen in Javascript können Zahlen, Strings, Arrays, Objekte enthalten – der Interpreter trennt
Variablen nicht nach verschiedenen Datentypen:
a = 10; // Integer
a = 3.141; // Float
a = "ein text"; // String
a = true; // Boolean
Arrays
Arrays in Javascript können wie in C mit eckigen Klammern und Integer-Index ausgelesen werden:
b[0], b[1], …
Für das Erzeugen des Arrays gibt es zwei Schreibweisen
var b;
b = ["eins", 2, 3.141, true]; // JSON-Schreibweise
b = new Array("eins", 2, 3.141, true); // Objekt-Schreibweise
Die Werte im Array können verschiedene Daten haben (String, Integer, Float, Boolean). Die Größe
des Arrays ist nicht beschränkt, die aktuelle Länge des Arrays kann aus der Eigenschaft .length aus-
gelesen werden.

var i,t;
i = 0;
t = "Das Array:\n";
while( i < b.length ) {
t += "Index = " + i + ", Wert = " + b[i] + "\n";
i++;
}
alert(t);
Objekte
Für das Erzeugen des Objekten gibt es zwei Schreibweisen: die JSON-Schreibweise mit geschwunge-
nen Klammern eignet sich gut für einmalige Objekte. Will man mehrere Objekte mit denselben Ei-
genschaften erzeugen, dann ist eine Instanziierungs-Funktion besser geeignet.
var c;
c = {"farbe" : "rot", "beschriftung": "int pi == 3", "verkauft": true};
function Shirt( f, b, v ) {
this.farbe = f;
this.beschriftung = b;
this.verkauft = v;
}
c = new Shirt("rot", "int pi == 3", true);
alert("Das Shirt ist " + c.farbe ); // gibt “Das Shirt ist rot”
Eine Besonderheit von Javascript die sie nicht in anderen Programmiersprachen finden werden ist,
dass Eigenschaften eines Objekts nicht nur über die Punkt-Schreibweise, sondern auch über eckige
Klammern angesprochen werden können:
alert("Das Shirt ist " + c.farbe );

alert("Das Shirt ist " + c["farbe"] );
In den eckigen Klammern steht nun ein String. Dieser könnte auch in einer Variable gespeichert sein:
e = "beschriftung";
alert("Die Beschriftung lautet " + c[e] );
Mit dieser Schreibweise und der for-Schleife kann man über alle Eigenschaften eines Objektes iterie-
ren:
var i,t;
t = "Das Array:\n";
for( i in c ) {
t += "Eigenschaft = " + i + ", Wert = " + c[i] + "\n";
i++;
}
alert(t);

5.3.3 DOM Beispiel
Die wichstigsten Befehle zur Manipulation des DOM finden Sie in selfhtml unter „document“ und
„node“. Ein Node ist ein Knoten DOM-Baum, entspricht also einem HTML-Tag oder einem Stück Text.
Die Attribute des HTML-Tags sind über getAttribute / setAttribute / … zugänglich und manipulier-
bar.
Hier eine Liste der wichtigen Objekte, Methoden, Eigenschaften für die DOM:
document.getElementById() node.getElementById()
document.getElementsByTagName() node.getElementsByTagName()
document.createElement()
node.appendChild()
node.parentNode (liefert 1 Node) node.cloneNode()
node.childNodes (liefert Array von Nodes) node.getAttribute()
node.firstChild node.setAttribute()
node.lastChild node.hasChildNodes()
node.previousSibling node.insertBefore()
node.nextSibling node.removeAttribute()
node.data node.removeChild()
node.attributes node.replaceChild()
Ein simples Beispiel: ein bestimmter Tag wird über die ID ausgewählt und sein Style-Attribut gesetzt:
d = document.getElementById("person_25“);
d.setAttribute("style", "display:none");
Diese beiden Zeilen könnten auch zu einer kombiniert werden:
document.getElementById("person_25“).setAttribute("style", "display:none");
Achtung: Falls der Tag schon ein Style-Attribute hatte wurde dieses überschrieben. Der Wert des
Attributes ist ein einfacher String.
Den eigentlichen Text der HTML-Seite kann man als data eines Text-Nodes auslesen.
<span id="v_25" class="vorname">Benjamin</span>
Das erste und einzige Kind des Span ist ein Text-Node:
vn = document.getElementById("v_25").firstChild.data;
Ein Beispiel eines Spiels in Javascript: Die Webseite enthält 41 div’s mit den StudentInnen von MMT
2009. Hier ein Beispiel für so ein div:

<div class="person m mmt" id="person_7">

<label class="photo" for="photo_7"><img src="photos/mmt-b2009-07.jpg" />
<input type="checkbox" onchange="check_photo(this)" name="photo_7" id="photo_7" />
</label>
<label class="data" for="name_7">
<span class="vorname">Alexander</span>
<span class="nachname">Cerny</span>
<span class="stg">2009</span>
<input type="checkbox" onchange="check_name(this)" name="name_7" id="name_7" />
</label>
</div>
Abbildung 53 zeigt das DOM dieses HTML-Dokuments:
<html>
<body>
<div> <div>
nextSibling
<label> <label>
<img> <input> <span> <span> <span> <input>
„Alexander“ „Cerny“
Abbildung 53: Document Object Model des HTML-Dokuments des Spiels
Den vollständigen Code des Spieles finden Sie von den Übungen aus verlinkt.

6. jQuery
• Was „unobstrusive Javascript“ / „graceful degradation“ / „progressive enhancement“ bedeu-

tet, warum man es anstrebt, wie man es erreicht
• Dass Javascript-Funktionen in Variablen gespeichert werden können, was der Unterschied ist
zwischen
f = c();
f = c;
• Dass Javascript-Funktionen ohne Namen definiert werden können, wie man so eine anonyme
Funktion definiert und verwendet
• Mit jQuery Teile einer Webseite aus- und einblenden
• Mit jQuery dynamische Formulare gestalten
• http://jquery.com
Vertiefungsmöglichkeiten
Erforschen Sie die Dokumentation und die Tutorials von jquery. Alternativ: befassen Sie sich stattdes-
sen mit einer der anderen Libraries:
o Prototype http://www.prototypejs.org/ + Scriptaculous http://script.aculo.us/
o Ext
o Mootools http://mootools.net/
o Dojo http://dojotoolkit.org/
o YUI (von Yahoo) http://developer.yahoo.com/yui/

Die Library jQuery unterstützt das Prinzip der „graceful degradation“ – auch ohne Javascript sind
Webseiten mit jQuery immer noch gut verwendbar. Dieses Prinzip wird auch „progressive enhance-
ment“ oder „unobstrusive javascript“ genannt.
Die Idee ist dabei immer die Gleich: man baut die Webseite zuerst ohne Javascript, und fügt dann
Javascript hinzu ohne die Verwendbarkeit ohne Javscript zu zerstören. Der Inhalt (Content) der Web-
seite bleibt auch ohne Javascript zugänglich.
Abbildung 54: Die Rolle von Content, Darstellung und Programmierung (Unobstrusive Javascript)
Von dieser Herangehensweise profitieren nicht nur Blinde, Menschen mit veralteten Browsern oder
exotischen Ausgabegeräte. Auch für Suchmaschinen wie Google oder andere Programme die die
Information aus den Webseiten weiter verarbeiten ist dieses Prinzip hilfreich.
Um zu testen, ob das wirkliche funktioniert kann man ganz einfach mit dem Firefox-AddOn QuickJava
testen. Wie in Abbildung 55 gezeigt kann Javascript mit einem Klick deaktiviert werden.
Abbildung 55: Javascript deaktivieren mit QuickJava in Firefox
Bei der Verwendung von jQuery bleibt der HTML-Code „javascript-frei“: jQuery wird nur an einer
Stelle, im Head des Dokuments eingebaut:

<script type="text/javscript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){
// Javascript code here
});
</script>
</head>
<body>

</body>
Die URL http://code.jquery.com/jquery-latest.js kann man für alle Webseiten die online sind ver-
wenden: hinter code.jquery.com steht nicht nur ein Server, sondern der Amazon Simple Storage Ser-
vices (s3). Nur wenn man offline Entwickeln will muss man die Library wirklich herunterladen.
6.2 Besondere Javascript-Schreibwesen in jQuery
jQuery Code ist auf den ersten Blick nicht einfach lesbar. Wenn man ein paar Grundprinzipien ver-
standen hat profitiert man aber von den ungewohnten Schreibweisen: der Code bleibt relativ kurz.
6.2.1 Mein Name ist Dollar
In Javascript kann das Dollar-Zeichen in Bezeichnen (Variablennamen, Funktionsnamen) verwendet

werden. jQuery nutzt diese Besondernheit von Javascript aus und definiert eine Funktion und ein
Objekt mit dem Dollarzeichen als Namen. Der jQuery-Code ist dadurch anfangs schwer zu lesen:
Eine Funktion mit dem Namen $ wird mit einem Argument aufgerufen, das Argument ist ein String:
$("a")
Eine Funktion mit dem Namen $ wird mit einem Argument aufgerufen, das Argument ist das docu-
ment-Objekt:
$(document)
Das Objekt mit dem Namen $ hat eine Methode get. Diese wird mit zwei Argumenten aufgerufen:
$.get("backend.php", callback)

6.2.2 Funktionen als first-class citizens8
In Javascript können Funktionen zur Laufzeit erzeugt werden, in Variablen gespeichert werden, ha-
ben eine Identität auch wenn sie keinen Namen haben. Betrachten wir eine ganz normale Funktion:
function create_gold() {
// Details nicht so wichtig
return gold;
}
Sie kennen schon die Schreibweise für den Aufruf der Funktion: auch wenn die Funktion keine Argu-
mente hat werden auf jeden Fall die runden Klammern geschrieben:
g = create_gold();
In Javascript gibt es eine zweite, ähnliche Scheibweise ohne die runden Klammern. Dabei wird die
Funktion nicht aufgerufen, sondern in der Variable f gespeichert:
f = create_gold;
Nun kann die Funktion auch unter dem neuen Namen f aufgerufen werden:
g2 = f();
6.2.3 Anonyme Funktionen
Da Funktionen in Variablen gespeichert werden können, ist es nicht unbedingt nötig, dass Sie einen
normalen Funktionsnamen haben. Die folgende Funktion hat den Funktionsnamen hase:
function hase() {
alert ("mein name ist hase")
}
Alternativ eine Schreibweise ohne Namen, die Funktion wird sofort in der Variable f gespeichert:
f = function() {
alert("ich habe keinen namen");
};
Die beiden Funktionen können nur auf die gleiche Weise aufgerufen werden:
hase();
f();
Bei der Verwendung von jQuery werden oft Funktionen ganz ohne Namen verwendet. Ein Beispiel ist
die ready-Funktion: Die Funktion ready() von jQuery verlangt ein Argument: eine Funktion, die aufge-
rufen werden soll wenn die Webseite vollständig geladen ist:
8
http://en.wikipedia.org/wiki/First-class_citizen

function nach_dem_laden () {
// Your code here
}
$(document).ready(nach_dem_laden);
Da der Name „nach_dem_laden“ nur einmal verwendet wird, ist er eigentlich nicht nötig. Stattdessen
verwendet man eine anonyme Funktion:
$(document).ready( function(){
// Your code here
});
Zur Beruhigung: auch wenn Sie die Schreibweise nicht ganz durchschauen können Sie jQuery erfolg-
reich verwenden. Sie können die drei Zeilen einfach mit copy-und-paste in eine Webseite übertragen
und Ihren eigenen Code dann einfügen. (Wahrscheinlich arbeiten die meisten jQuery-Developer so ;-)
6.3 Selektieren und Manipulieren mit jQuery
jQuery verwendet die Schreibweise der CSS-Selektoren um Nodes des DOM auszuwählen:
$("a") /* alle A-Tags */

$("h1") /* alle Überschriften h1 */
$("p.extra") /* alle p-tags mit klasse extra */
jQuery definiert noch ein paar zusätzliche Selektoren9, die es in CSS (noch) nicht gibt:
$("tr:even") /* Alle geraden Zeilen der Tabelle */

$("p:contains('Warnung')") /* alle Absätze die die Zeichenkette Warnung enthalten */
$(":checkbox") /* Alle input-Tags vom typ checkbox */
Die Selektion allein verändert die Webseite noch nicht. Dafür bietet jQuery eine Reiche von Manipu-
lations-Funktionen an. Diese können direkt an die Selektions-Funktion geschreiben werden: die Se-
lektions-Funktion gibt ein Objekt mit entsprechenden Methoden zurück:
$("a").addClass("wichtig"); /* alle A-Tags erhalten die Klasse wichtig */

$("h1").append(":"); /* in Überschriften h1 wird ein Doppelpunkt angefügt */
$("h1").prepend("Titel:"); /* --||-- wird vorne ‚titel:’ eingefügt */
$("p.extra").hide(); /* alle p-tags mit klasse extra werden versteckt */
6.4 Interaktion mit jQuery
jQuery bietet für die verschiedenen Events eigene Methoden an, als Argument wird eine Funktion
übergeben, die aufgerufen werden soll wenn das Event feuert. Hier kommen meist anonyme Funkti-
onen zum Einsatz:
9
http://docs.jquery.com/Selectors

$("h1").click(function() {
alert("ein h1 wurde geklickt");
});
Innerhalb der Funktion steht die Variable this zu Verfügung um den angeklickten Tag zu erhalten:
$("h1").click(function() {
$(this).hide(); /* versteckt den angeklickten h1 tag */
});
Dazu ein vollständiges Beispiel: zu mehreren Überschriften gibt es Text, der bei Klick auf die Über-
schrift versteckt bzw. angezeigt werden soll:
<h2 class="more">Vertiefendes Studium</h2>

<div class="extra">
<p>Das Schwerpunktstudium Vertiefung ermöglicht den Erwerb hoch spezialisierter Qualifika-
tionen in einer gestalterischen Fachdisziplin. </p></div>
<h2 class="more">Steuerung</h2>
<div class="extra">
<p>Das Schwerpunktstudium Steuerung zielt auf die Ausbildung von Führungskräften der Krea-
tivwirtschaft.</p>
</div>
Dazu das vollständige Javascript-Programm mit jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(".extra").hide();
$(".more").click(function(){
$(this).next(".extra").toggle();
});
});
</script>
this ist innerhalb der Funktion der angeklickte Tag. Mit dem jQuery-Befehl next() wird nach dem
nächsten Tag im HTML-Code gesucht, hier nach dem nächsten Tag mit der Klasse extra. Auf den ge-
fundenen Tag wird der befehl toggle() angewandt.
6.5 Formulardaten Prüfen mit jQuery
In Kapitel 4.5.6 (Seite 76) haben Sie gelernt wie Sie mit Javascript die Daten eines Webformulars prü-
fen können bevor das Formular abgesendet wird. Mit jQuery können wir dieses Programm noch ver-
feinern: Jeweils beim betroffenen Eingabefeld wird direkt eine Fehlermeldung angezeigt:

<script src="jquery-1.2.3.min.js"></script>
<script>
$("form").submit(function(){
var ok = true;
var i = null;
$("span.error").remove();
i = $("input[name=liefername]");
if(i.val() == "") {
i.after('<span class="error">Sie müssen den Empfänger angeben</span>');
ok = false;
}
i = $("input[name=adresse]");
if(i.val() == "") {
i.after('<span class="error">Lieferadresse angeben</span>');
ok = false;
}
return ok;
});
});
</script>
</head>
<body>
<form action = "bestell.php">
Empfänger: <input type="text" name="liefername" /> <br />

Adresse: <input type="text" name="adresse" /> <br />
Telefon/Handy: <input type="text" name="tel" /> <br />
<input name="" type="submit" />

</form>

7. AJAX
• Was AJAX bedeutet (jenseits von Putzmittel und Fußball)
• Was asynchron in der Netzwerk-Programmierung bedeutet
• Mit jQuery einen Teil der Webseite mit AJAX (nach-)laden
• http://de.wikibooks.org/wiki/AJAX

7.2 Was ist AJAX?

AJAX ist die englische Abkürzung für „Asynchrones Javascript und XML“. In diesem Kapitel lernen Sie
was das genau bedeutet, und dass sich hinter dem X zum Schluss auch andere Format verbergen
können
Der Begriff AJAX wurde von Jesse James Garrett zuerst verwendet10. Es steht für eine besondere
Verwendung von Javascript und einer serverseitigen Programmiersprache.
Ein Beispiel für die Verwendung von AJAX ist das in Abbildung 56 gezeigte Eingabefeld: schon wäh-
rend des Eintippens eines Suchwortes wird eine Anfrage an den Webserver geschickt. Dieser ant-
wortet mit einer Liste von vorgeschlagenen Namen. Diese Liste wird mit Javascript (unter Verwen-
dung der DOM) in einer <div> unterhalb des Eingabefelds angezeigt:
Abbildung 56: Vorschläge für die Eingabe werden über AJAX geladen
Mit AJAX wird hier eine HTTP-

Anfrage gesendet. Der Unterschied
zu einer „normalen“ HTTP-Anfrage:
Bei einer „normalen“ HTTP-Anfrage
schaltet der Browser auf „Warten“,
eine neue vollständige Webseite
wird geladen und angezeigt.
Asynchron heisst: der Request wird

abgesetzt, das Javascript-Programm
läuft sofort weiter, die UserIn kann
weiterhin mit der Webseite inter-
agieren. Erst wenn die Antwort des Servers vorliegt wird die normale Darstellung der Seite kurz un-
terbrochen und ein Javascript-Programm fügt die Daten in die Seite ein.
10
http://www.adaptivepath.com/publications/essays/archives/000385.php

Auf der Ebende des Programm-Codes sieht der unterschied zwischen synchron und asynchron so
aus:
Befehl1();
Befehl2();
Antwort = synchron_laden(url); // dauert ewig
Befehl3(); // viel später
Befehl4();
Bevor Befehl3 ausgeführt werden kann muss erst die Antwort des Servers vorliegen – hier kann also
eine Wartezeit von mehreren Sekunden entstehen.
function handle_data(Antwort) {
...
}
Befehl1();
Befehl2();
asynchron_laden(url, handle_data); // dauert kurz
Befehl3(); // kurz darauf
Befehl4();
Befehl3 kann sofort ausgeführt werden, egal ob und wie schnell der Server antwortet. Wenn die
Daten vom Server schließlich einlangen wird die Funktion handle_data aufgerufen und die Daten zu
verarbeiten. Das kann z.B. gleichzeitig mit Befehl4 erfolgen.
Das X am Ende von AJAX steht für XML – das stimmt aber nicht: die Daten vom Server können im
XML-Format gesendet werden, aber genauso auch als HTML oder reiner Text oder JSON. Man könnte
das X in AJAX auch als „X-beliebiges Format“ deuten.
Das wichtigste Javascript-Konstrukt für AJAX ist das XMLHTTPRequestObject. Leider gibt es auch bei
diesem Objekt Unterschiede zwischen den Browsern. Um diese Unannehmlichkeiten zu vermeiden,
sollte man fertige Libraries verwenden, die die Browser-Unterschiede verbergen.
7.3 Simples AJAX Beispiel mit jQuery
Im ersten AJAX Beispiel wird der Output eines PHP-Counters in eine HTML-Seite eingebunden. Das
gibt noch keine besonderen Effekte für die LeserIn, sondern macht nur den Einbau des Counters in
eine bestehende Webseite einfacher.

<html>
<head>
<title>AJAX counter</title>
<script src="jquery.js"></script>
<script>
$("p#counter_zeile").show();
$("#counter_zahl").load("counter_ajax.php");
});
</script>
<style>
p#counter_zeile { display: none; }
</style>
</head>
<body>
<h1>Das ist eine statische Webseite</h1>
<p>hier ist total viel Inhalt</p>
<p id="counter_zeile">Counter: <span id="counter_zahl">?</span></p>

</body>
</html>
Die ganze Arbeit macht hier jQuery in der Zeile
$("#counter_zahl").load("counter_ajax.php");
Das Element mit der Id counter_zahl wird ausgewählt. Mit dem Load-Befehl wird eine http-Anfrage
an die angegebene URL abgesetzt. Wenn der Output des PHP-Programm beim Browser ankommt,
wird er in das ausgewählte Element eingefügt. Der Output sollte also reiner Text oder HTML sein.
7.4 jQuery Beispiel mit Callback-Funktion
In diesem Beispiel warden die Daten des Yahoo-Wetterberichts auf mehrere Arten in einer Webseite
angezeigt. Achtung: Dieses Beispiel benutzt zwar öffentlich zugänglich Daten von der Yahoo-
Webseite, diese können aber nicht direkt in Javascript geladen werden! Wenn man es doch versucht
erhält man in Firebug die Fehlermeldung „Access to restricted URI denied“:
Man braucht am eigenen Server ein PHP-Programm das die Daten lädt und wiedergibt:

<?php
// Datei getweather.php
header ("content-type: text/xml");
$p = $_GET['p'];
$u = $_GET['u'];
$url = "http://weather.yahooapis.com/forecastrss?p=$p&u=$u";
$xml=file_get_contents( $url );
if ( $xml == false ) {
echo "<error>Could not read weather data from yahoo</error>";
} else {
echo "$xml";
}
?>
Der Aufruf der lokalen url getweather.php liefert jetzt die gleichen Daten wie die Yahoo Wetterseite.
Es handelt sich um Daten im XML-Format, hier ein Auszug:
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"
xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#">
<channel>
<description>Yahoo! Weather for San Francisco, CA</description>
<geo:lat>37.77</geo:lat>
<geo:long>-122.42</geo:long>
<pubDate>Mon, 19 Jan 2009 12:56 pm PST</pubDate>
<yweather:condition text="Fair" code="34" temp="17" />
</rss>
Im Tag <yweater:condition> ist die Temperatur gespeichert und ein Code der die Wetterlage angibt.
Unter diesem Code kann man bei Yahoo auch ein Bild zur Wetterlage erhalten, z.B: zu den Codes 27.
33, 32 (mostly cloudy at night, fair at night, sunny) die URLs
http://l.yimg.com/a/i/us/we/52/27.gif
und die Bilder
In der Webseite werden die Daten per AJAX geladen, dabei wird eine callback-funktion angegeben:
$.get("getweather.php", handle_the_weather);
function handle_the_weather(data){
...
}
Die Callback-Funktion erhält die geladenen Daten als Argument. Wenn die Daten im XML oder HTML-
Format sind kann man sie wieder mit jQuery behandeln: den Tag <yweather:condition> auswählen
und aus dem Tag die Attribute temp und code auslesen:

cond = $("yweather\\:condition", data);

temp = cond.attr("temp");
code = cond.attr("code");
Der Code wird zum Anzeigen des Bildes von Yahoo verwendet:
$("#dasbild").attr("src", "http://l.yimg.com/a/i/us/we/52/" + code + ".gif");
Die Temperatur wird doppelt verwendet: einmal wird sie einfach angezeigt:
$("#temp").text( temp + "°" );
Und zweitens wird je nach Temperatur die Hintergrundfarbe der Webseite passend gesetzt:
if( temp < 0 ) {

color="blue";
} else if ( temp < 10 ) {
color="green";
color="yellow";
color="orange";
} else {
color="red";
}
$("body").css("background-color",color);
Hier der vollständige Code:
$.get("getweather.php", handle_the_weather);
function handle_the_weather(data){
var cond, temp, code, color;
var cond = $("yweather\\:condition", data);
temp = cond.attr("temp");
code = cond.attr("code");
$("#dasbild").attr("src", "http://l.yimg.com/a/i/us/we/52/" + code + ".gif");
$("#temp").text( temp + "°" );
if( temp < 0 ) {
color="blue";
color="green";
color="yellow";
color="orange";
} else {
color="red";
}
$("body").css("background-color",color);
}

8. Anhänge
8.1 Quellenverzeichnis
Web + HTTP
HTTP 1.1: RFC 2616 - http://www.w3.org/Protocols/rfc2616/rfc2616.html
HTML + CSS
Homepage des WWW-Consortiums. http://www.w3c.org/
HTML Validator des WWW-Consortiums. http://validator.w3.org/
Jellinek, Brigitte (2006): Handbuch Webdesign. Wikibook. http://de.wikibooks.org/wiki/Webdesign
Freeman, Elisabeth (2006): HTML mit CSS & XHTML von Kopf bis Fuß. O'Reilly. ISBN 978-3897214538
Shea, Dave/ Holzschlag, Molly: CSS Zen Garden. http://csszengarden.com/
Müller, Peter (2007): Little Boxes. Markt+Technik-Verlag. ISBN 978-3827242242
Münz, Stefan: Selfhtml. http://de.selfhtml.org
MÜNZ,Stefan / NEFZGER,Wolfgang (2005): HTML Handbuch. Studienausgabe. Franzis. ISBN

3772366546.
ZELDMAN,Jeffrey (2008): Webdesign mit Webstandards: Grenzenlos kompatibel. Addison-Wesley,

München. ISBN 3827327326.
CEDERHOLM,Dan (2007): Bulletproof Webdesign (2. Ausgabe): Absolut flexibel und für alles gewapp-
net mit CSS und XHTML. Addison-Wesley, München. ISBN 382732629X.

Javascript + AJAX
MORRISON,Michael (2008): Head First JavaScript (Head First). O'Reilly Media, . ISBN 0596527748.
FLANAGAN,David (2007): JavaScript: Das umfassende Referenzwerk. O'Reilly. ISBN 3897214911.
CROCKFORD,Douglas (2008): JavaScript: The Good Parts. O'Reilly Media, . ISBN 0596517742.
STEYER,Ralph (2003): JavaScript in 21 Tagen . Schritt für Schritt zum Programmierprofi.

Markt+Technik. ISBN 3827265088.
POWERS,Shelley (2007): Adding Ajax. O'Reilly Media, . ISBN 0596529368.
jQuery Library. http://jquery.com/

8.2 Stichwortverzeichnis
$ 89 Bildschirmgröße 42
~ 41 body 19
+ 74 border 31
a 19, 33 bottom 54
Absatz 26 Box Model 31
Absende-Button 63 br 14
absenden 65 Braille 10
absolut 31, 38 Browser 9
absolute 54 Line Mode 8
Absolute Positionierung 54 lynx 10
Abstand 31 Mosaic 9
Access 97 Mozilla 9
action 65 Opera 9
Action 61 Button 63
Addition 74 Cascading Stylsheet 25
AJAX 95 case-sensitive 39
alert 70 CERN 7
alt 15, 18 character entities 13
Alternativtext 18 Checkbox 62
Anker 33 class 30
Anonyme Funktion 90 Client 9
Apache 39 clientWidth 79
Array 83 Code 20
asynchron 96 Colorzilla 31
Auflösung 42 confirm 70
Außenabstand 31 console 83
auto 52 CSS 25
background-color 25, 33 CSS Layout 51
background-image 33 CSS-Sprites 58
background-repeat 33 Datei-Upload 64
Bandbreite 7 default.htm 40
Benutzerschnittstelle Deklaration 28, 83
Programmierung 72 die externe Javascript-Datei 80
Berners-Lee DirectoryIndex 40
Tim 7 div 30
Bestellformular 60 Doctype 19
Bild 15, 17, 34, 35 Document Object Model 79
Bildausschnitt 57 Dollar 89
Bildfeld 63 Dreamweaver 22

Dropdown-Liste 62 head 19
Eich 78 Hintergrundbild 33
Eigenschaft 83 hover 57
eine Javascript-Objekts 84 href 19, 34
einfügen 80 HTML 8
Eingabefeld 61 HTTP 8, 12
Eingabeformular 60 Hypertext Transfer Protocol 12
em 31 id 30
E-Mail 9 img 15
Ereignis 72 Inch 31
Event 72 index.html 40
ex 31 Initialisierung 83
Farb 31 Innenabstand 31
Farbe 33 innerWidth 79
fieldset 63 input 61
Firebug 26, 30, 32, 69, 71, 83 Instanziierung 84
Firefox AddOn Interaktion 60
Colorzilla 31 javascript
Firebug 26, 30, 32, 69, 71, 83 unobstrusive 88
FireFTP 22 Javascript in einer URL 81
MeasureIt 47 jpg 18
QuickJava 88 justify 26
FireFTP 22 Kachel 33
first-class citizen 89 Klasse 30
float 55 Kompatibilität 15
Float 52 Konkatenation 74
font-family 25 Koordinaten 54
font-size 25 Layout 42
for 84 mit CSS 51
form 61 mit Tabellen 20
Formular 60 Leerzeichen 42
Formulare left 54
und Javascript 70 legend 63
FTP 9, 21 length 83
Funktion 73, 83 li 20
as first-class citizens 89 Line Mode Browsers 8
gekachelt 33 line-height 26
GET 66 link 29
gif 18 CSS-Selektor 34
graceful degradation 16, 88 Link 19
Graceful Degradation 34 relativ 22

Liste 20 prompt 70
Liste (Eingabefeld) 62 Prozent 31
list-style-type 55 Prüfung
load 97 Formulardaten 75
log 83 von HTML Code 20
lynx 10 Pulldown-Liste 62
margin 31 QuickJava 88
Maßeinheiten 31 Radiobutton 62, 63
MeasureIt 47 Rahmen 31
Menü 62 Redundanz 65
Methode 83 rel 29
Mosaic 9 relativ 31, 38
Mozilla 9 relativer Link 22
name 34 repeat 33
Name right 54
des Eingabefeldes 67 Rule 28
Navigation 35 Schleife 84
Navigationsmenü 55 Schnittstelle 68
Node 85 Schrif 34
Objekt 83, 84 Schrift 25
objektorientiert 82 Schriftgröße 26
ol 20 script 80
onchange 72 Scrollen 10
onsubmit 75 Secure File Transfer Client 22
Opera 9 Security 68
option 61 Seite 10
Ordnerstruktur 22 select 61
padding 31 Selektor 28, 49, 91
Parameter 11, 67 senden 65
parseInt 75 serifenlos 25
Passwort-Feld 62 Server 9
Peer-zu-Peer 9 SFTP 21
PHP 56 Sicherheit 68
Pixel 26 span 30
png 18 Sprites 58
position 54 src 15, 17
Positionierung Standard-Dokument 40
absolut 54 stateless 13
float 52 String-Konkatenation 74
pricing attack 68 style
progressive enhancement 88 Attribut 29

Tag 29 Upload 21
Stylsheet 25 url 31
Tabelle 20 URL 8, 11
table 20 Validator 20
Tag 14 value 70
TCP 12 Variable 83
td 20 Version
text-align 26 HTML 8, 13
textarea 61 Verstecktes Feld 63
Textbereich 62 visited 34
Textfeld 62 Webbrowser Siehe Browser
text-indent 26 WebDAV 21
Textmarke 33 Webseite 10
th 20 Webserver 9, 39
this 91 Website 11
toggle 92 whitespace 14
top 54 width 52
tr 20 XHTML 8
Trennung von Struktur und Darstellung 27 XML 13
Überschrift 34 Zeilenumbruch 14
ul 20 Zentimeter 31
Umlaut 42 zentrieren 52
unobstrusive javascript 88 Zurücksetzen-Button 63
unsichtbar 79 zustandslos 13
Unsichtbares Feld 63

MMT Webprogrammierung 1 Im Winter Semester 2009

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

MMT Webprogrammierung 1 Im Winter Semester 2009

Transféré par

Droits d'auteur :

Formats disponibles

Web Programmierung 1

Ein Skriptum zu den gleichnamigen Lehrveranstaltungen

Version für das Studienjahr 2009/10,

Stand vom 21.01.2010

• In meinem Blog zeige ich mehrere kleine Web-Projekte.

Am Ende des zweiten Semesters können Sie sagen:

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

3.3.2 Brutto-Fläche vs. Netto-Fläche 44

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

6.2.1 Mein Name ist Dollar 90

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

Was Sie wissen sollten

• Wie eine HTTP Anfrage funktioniert

• Wie ein Dokument im HTML und XHTML-Format aufgebaut ist

• Die HTML-Tags für Überschriften, Absätze, Links, Bilder

• Welche Methoden des Uploads es gibt

Was Sie können sollten

• Ein einfaches Dokument im XHTML-Format erstellen, einen vorgegebenen Text in XHTML

• Fehler in einem XHTML Dokument ausbessern, bis es valide ist

• Dokumente auf einen Webserver hochladen

Tools die Sie in diesem Kapitel installieren und ausprobiert sollten

− Microsoft Internet Explorer (msie)

− Safari (nur auf Mac)

− Opera Mobile (nur auf Handys)

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

− Webbrowser Ihres Handys, Ihrer Spielkonsole, …

• Firefox AddOn FireFTP

• Firefox AddOn Web Developers Toolbar

• Secure File Transfer Client

• Website des WWW-Consortiums. http://www.w3c.org/

• HTML Validator des WWW-Consortiums. http://validator.w3.org/

• Plain Old Semantic HTML (POSH). http://microformats.org/wiki/POSH

1.2 Kurze Geschichte des World Wide Web

Date: Fri, 20 Mar 1992 13:50:09

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

1.3 Drei Standards definieren das Web

• URL (Uniform Resource Locators)

• HTTP (Hypertext Transfer Protocol)

• (X)HTML (Hypertext Markup Language)

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

Nach diesem Prinzip funktionieren Web, E-Mail, FTP:

Abbildung 2: Webbrowser: Mosaic (1993), Opera(2004) und Mozilla(2004)

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

Abbildung 3: Text-Only Browser lynx und Braille Ausgabegerät

Abbildung 4: Ein Browser zeigt eine lange Webseite an

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

Diese URL zerfällt in 4 Teile:

kurse.horus.at Domain Name (oder IP-Adresse) des Webservers

8080 Port am Server. Wenn keiner angegeben ist: Port 80

/2006-ss/www-mm/index.html Wird vom Webserver interpretiert, meist eine Pfad-Angabe

Literatur Textmarke innerhalb des Dokuments –

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

3. Der Browser baut eine TCP-Verbindung zu 193.80.109.212, Port 80 auf

4. Er sendet eine http-Anfrage:

8. Der Browser scrollt das Dokument bis zur Textmarke literatur

9. Der Browser beendet die TCP-Verbindung

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

1.4 HTML Basics

Folgende Character Entities müssen Sie verwenden:

Lehrveranstatlung im Studiengang MultiMediaTechnology (cc) BY-NC-SA DI Brigitte Jellinek

Gewünschtes Zeichen Character Entity

Gewünschtes Zeichen Character Entity

Die gewünschte Formatierung des Textes wird mit HTML-Tags angegeben