Web Programmierung 1

Ein Skriptum zu den gleichnamigen Lehrveranstaltungen im 1. Semester von MultiMediaTechnolgy

Überblick
1. 2. 3. 4. 5. 6. 7. Web Basics CSS Basics CSS für Layout und Interaktion Formulare, URLs, erstes Javascript Javascript und DOM jQuery AJAX und Ausblick 6 23 35 55 71 81 86 93 94

Quellenverzeichnis Stichwortverzeichnis

MMT Webprogrammierung 1

2

Ziele
Diese Lehrveranstaltung hat mehrere unabhängige Ziele. Am Ende des Semesters können Sie sagen: • Ich kann Webseiten erstellen, und habe auch schon eine kleine Web-Site vollständig umgesetzt. • Ich verstehe wie das Web funktioniert, kann Fehler suchen und neue Entwicklungen einordnen. Ich kenne wichtige Problemfelder wie Browserkompatiblität, Internationalisierung, Security, Barrierefreiheit, Auffindbarkeit. • Ich kenne die Arbeitsteilung in einem Web-Projekt und kann meinen (technischen) Teil 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.

MMT Webprogrammierung 1

3

Inhaltsverzeichnis
1. 1.2 1.3 1.3.2 1.3.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.4.6 1.4.7 1.4.8 1.4.9 Web Basics Kurze Geschichte des World Wide Web Drei Standards definieren das Web URL HTTP HTML Basics Sonderzeichen HTML-Tags Whitespace Attribute Kompatibilität Text formatieren Bilder Links Gesamt-Struktur einer Webseite 6 7 8 10 11 12 13 13 14 14 15 16 17 17 17 18 18 18 19 19 23 24 24 25 25 25 26 27 28 29 32 35 36 36 37 39 41 41 42

1.4.10 Listen 1.4.11 Tabellen 1.5 1.5.1 1.5.2 2. 2.1 2.1.1 2.1.2 2.1.3 2.1.4 2.2 2.2.1 2.2.2 2.2.3 2.3 3. 3.1 3.1.1 3.1.2 3.1.3 3.2 3.2.1 3.2.2 Upload und Tools Validator Upload CSS Basics Kurzvorstellung von Stylesheets Schriftart Schriftgröße Absätze CSS erforschen mit Firebug. Geschichte der Cascading Style Sheets Stylesheet Syntax Klassen, IDs, SPANs und DIVs Maßeinheiten in Stylesheets Graceful Degradability CSS für Layout und Interaktion URLs Absolute und relative URLs Konfiguration des Webservers und URLs Pragmatische Tipps zu Dateienamen und URLs Rahmenbedingungen für Layout Auflösung Brutto-Fläche vs. Netto-Fläche

MMT Webprogrammierung 1 3.2.3 3.2.4 3.2.5 3.3 3.4 3.4.1 3.4.2 3.4.3 3.5 3.5.1 4. 4.2 4.2.1 4.2.2 4.3 4.3.1 4.3.2 4.3.3 4.4 4.4.1 4.4.2 4.4.3 4.4.4 4.4.5 4.4.6 5. 5.2 5.2.1 5.2.2 5.2.3 5.3 5.3.1 5.3.2 5.3.3 6. 6.2 6.2.1 6.2.2 6.2.3 6.3 6.4 7. Entwurf für mehrere Auflösungen Bilder im Web Schriftgröße CSS Selektoren CSS für Layout Width und Auto Float Absolute Positionierung Navigationsmenü mit CSS :hover Formulare, URLs, erstes Javascript Formulare Eingabefelder Interaktionsmöglichkeiten Daten absenden Daten an E-Mail senden Daten senden mit Methode GET URL als Programm-Schnittstelle Formular und Javascript Javascript Einbetten Popup-Fenster Formulare document.write Ereignisse und Ereignisgesteuerte Programmierung Formular prüfen Javascript und DOM Hintergründe Javascript und Java Geschichte von Javascript Document Object Model Basic Javascript Einbindung von Javascript Syntax von Javascript DOM Beispiel jQuery Besondere Javascript-Schreibwesen in jQuery Mein Name ist Dollar Funktionen als first-class citizens Anonyme Funktionen Selektieren und Manipulieren mit jQuery Interaktion mit jQuery Ausblick

4 43 45 46 47 48 49 49 51 52 53 55 55 56 59 60 60 61 62 63 63 63 64 64 65 69 71 72 72 72 73 74 74 77 79 81 82 82 83 83 84 85 92

MMT Webprogrammierung 1 Quellenverzeichnis Stichwortverzeichnis

5 93 94

MMT Webprogrammierung 1

6

1.

Web Basics

Der erste Termin der Lehrveranstaltung klärt organisatorische Fragen, klärt 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 XHTML-Format aufgebaut ist Die HTML-Tags für Überschriften, Absätze, Links, Bilder Welche Methoden des Uploads esgibt

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 überprüfen • • Fehler in einem XHTML Dokument ausbessern, bis es valide ist Dokumente auf einen Webserver hochladen

Weitere Informationsquellen
• • • • • Selfhtml. http://de.selfhtml.org/ Website des WWW-Consortiums. http://www.w3c.org/ HTML Validator des WWW-Consortiums. http://validator.w3.org/ Bildformate am Web. http://webwelt.horus.at/html/img/bildformate.html Plain Old Semantic HTML (POSH). http://microformats.org/wiki/POSH

Tools
• • • Desktop Webbrowser: Firefox, MSIE, Opera, Safari „exotische“ Webbrowser: Lynx, Opera Mobile, … FireFTP, Secure File Transfer Client

MMT Webprogrammierung 1

7

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 Englä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 geringen 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 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 die Eckpunkte der technischen Standards (siehe nächstes Kapitel) und programmierte – gemeinsam mit KollegInnen – die erste Software. In Abbildung 1 ist links Tim BernersLee 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

MMT Webprogrammierung 1 die damalige Homepage des CERN anzeigt. Der Line Mode Browser funktionierte auch ohne Grafik. Links konnten mit Nummern aufgerufen werden.

8

1.3 Drei Standards definieren das Web
Für diese Veranstaltung 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 aufgebaut 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 Web Webbrowser – lädt Webseiten vom Sever und zeigt sie am Bildschirm an E-Mail Programm – lädt E-Mails vom Server, zeigt sie an, kann neue E-Mails an einen Server schicken der sie zustellt, … FTP-Client – lädt Dateien von einem Server runter oder auf einen Server rauf Server Webserver – liefert auf Anfrage die gespeicherten Webseiten Mailserver – speichert E-Mail in verschiedenen Postfächern

E-Mail

FTP

FTP-Server – speichert Dateien

MMT Webprogrammierung 1

9

Das Gegenstück zu Client/Server ist Peer-zu-Peer. Dabei sind alle beteiligten Computer gleichberechtigt, 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 für grafische Oberflächen stark zur Verbreitung des World Wide Web beigetragen hat, und die Browser Opera und Mozilla in den Versionen, die im Jahre 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üroComputer“ 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 Blinde im Web surfen.

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

MMT Webprogrammierung 1

10

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 englischen Wort Website. Eine Website besteht aus mehreren Webseiten auf einer gemeinsamen Domain, die zusammen gehören und untereinander verlinkt sind.

1.3.2

URL

Eine URL ist die Adresse eines Dokuments am Web oder in einem anderen Online-Informationssystem. Ein Beispiel:
http://kurse.horus.at:8080/2006-ss/www-mm/index.html#literatur

Diese URL zerfällt in 4 Teile:

MMT Webprogrammierung 1

11

http

Übertragungsprotokoll Domain Name (oder IP-Adresse) des Webservers Port am Server. Wenn keiner angegeben ist: Port 80 Wird vom Webserver interpretiert, meist eine Pfad-Angabe Textmarke innerhalb des Dokuments (wird vom Browser interpretiert)

kurse.horus.at

8080

/2006-ss/www-mm/index.html

Literatur

Im Zusammenhang mit Web-Formularen werden wir oft mit URLs zu tun haben, die Parameter enthalten:
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 verwendet. 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

1

Mehr über TCP lernen Sie in der Lehrveranstaltung „Multimedia-Netzwerke“ im 3.Semester

MMT Webprogrammierung 1 2.

12

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. 4.

Der Browser baut eine TCP-Verbindung zu 193.80.109.212, Port 80 auf 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 Statuscode, z. B. „200 OK\n\n“, gefolgt vom Inhalt der Datei index.html.

7. 8. 9.

Der Browser nimmt das Dokument in Empfang und stellt es geeignet dar Der Browser scrollt das Dokument bis zur Textmarke literatur 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 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 komplizierter.

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 haben aber weiterhin die Endung
.htm oder .html, ohne x. Im Unterschied zu HTML ist XHTML ein bisschen strenger in der Schreibwei-

se. Am Web finden Sie noch viele HTML-Dokumente und Tutorials zu HTML – lassen Sie sich davon nicht verwirren!

MMT Webprogrammierung 1

13

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:
Gewünschtes Zeichen < > & Character Entity
&lt; &gt; &amp;

Folgende Character Entities können Sie vermeiden, indem Sie das Zeichen selbst im Code verwenden:
Gewünschtes Zeichen Ä Ä ß Character Entity
&Auml; &auml; &szlig;

1.4.2

HTML-Tags

Die gewünschte Formatierung des Textes wird mit HTML-Tags angegeben 1. Tags sind zwischen spitzen Klammern eingeschlossen.

2

Das ist der ASCII-Zeichensatz, ergänzt um die in westeuropäischen Sprachen nötigen Zeichen wie

üöä ÜÖÄ ß é ñ

MMT Webprogrammierung 1 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.

14

(in XHTML) müssen "alleinstehende" Tags mit einem Schrägstrich am Ende geschrieben werden: <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 hintereinander – 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 Reihenfolgen Sie die Attribute schreiben:
<img alt="Das ist neu!" src="neu.gif" />

oder
<img src="neu.gif" bli="bla, blo" /> alt="Das ist Neu!"

Das Attribut bli, welches HTML nicht kennt, wird wie andere unbekannte Attribute einfach ignoriert.

MMT Webprogrammierung 1

15

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 HTMLDokument bearbeitet werden. Neue Tags, die z. B. ein Browser nicht erkennt, sind zu ignorieren – es gibt keine Fehlermeldungen! Wenn das W3C in XHTML 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 neuesten Versionen der Browser (die schon die Version 21 kennen) hüpfend dargestellt. In älteren Browsern wird der Tag <jump> ignoriert:
Code
<p>Dies ist meine erste <jump>supercoole</jump> Webseite!!!! </p>

Ein älterer Browser interpretiert das als:
<p>Dies ist meine erste supercoole Webseite!!!!</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 Browser-Version benutzen. Meist können Sie eine Seite so gestalten, dass auch mit älteren Browsern der gesamte Inhalt lesbar ist.
Schlecht
<p>Zu den hüpfenden Terminen sind noch Plätze im Kurs frei: </p> <ul> <li><jump>Montag</jump> <li>Dienstag <ul>

Besser:
<p>Zu den markierten Terminen sind noch Plätze im Kurs frei</p> <ul> <li><jump>Montag *</jump> <li>Dienstag <li>

Auf älteren Browsern geht die wichtigste Information verloren!

Auf allen Browsern ist erkennbar zu welchen Terminen noch Plätze frei sind.

Diese Herangehensweise an Neuerungen nennt man „graceful degradation“ – davon werden Sie im Zusammenhang mit Javascript noch mehr hören. Hinweis: Der <jump>–Tag ist ein Scherz, den gibt es nicht wirklich, und wird es hoffentlich nie geben.

MMT Webprogrammierung 1

16

1.4.6

Text formatieren

Wir unterscheiden zwischen HTML-Tags die Blöcke definieren, und solchen die das nicht tun. Blockbildende Tags beanspruchen immer einen rechteckigen Bereich bei der Ausgabe, nicht blockbildende Tags tun das nicht-

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> <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> <h1>Überschriftstext</h1> <h2>Überschriftstext</h2> <h3>Überschriftstext</h3> <blockquote>Alle meine Entchen schwimmen auf dem See</blockquote>

Zentrierter Text

Haupt-Überschrift (1. Ebene) Unter-Überschrift (2. Ebene) Unter-Überschrift (3. Ebene) Block-Zitat (eingerückt)

Format für kleinere Text-Abschnitte
Diese müssen Sie innerhalb eines Blocks verwenden. Diese Formate werden unterschieden in logische und physische Elemente. Die logischen geben die genaue Darstellung nicht vor.
Sehr stark betonter Text (meist fett) Betonter Text (meist kursiv)
Eine <strong>wichtige</strong> Sache und eine <em>interessante</em> Sache

Physische Elemente geben die genaue Darstellung vor und sind eigentlich „altmodische Tags“, die durch Stylesheets ersetzt wurden, und die Sie möglichst nicht mehr verwenden sollten:
Fettgedruckter Text Kursiver Text Text in einer bestimmten Schriftart Text in einer bestimmen Farbe
Eine <b>fette</b> Sache und eine <i>schräge</i> Sache <font face="Arial">Text</font> <font color="red">rot</font>

Hier die moderne Schreibweise mit Stylesheets:
Text in einer bestimmten Schriftart Text in einer bestimmen Farbe
<span style="font-face:Arial;">Text</span> <span style="color:red;">rot</span>

MMT Webprogrammierung 1

17

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) Bild (URL relativ) Bild mit Ersatztext Bild mit Größenangabe Bild nach links (Text fließt rechts vorbei)
<img src="http://www.google.at/intl/de_at/images/logo.gif" /> <img src="neu.gif" /> <img alt="neu" src="neu.gif" /> <img width=10 height=5 src="neu.gif" /> <img src="neu.gif" style="float:left;" />

Als Bildformate für Webseiten werden nur Pixel-Formate von vielen Browsern unterstützt:
gif

Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). „animiertes Gif“ enthält mehrere 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.

1.4.8

Links

Als Attribut href können Sie eine absolute oder relative URL angeben:
Link zu Webseite (absolute URL) Link zu Webseite im selben Ordner (relative URL) Link zu E-Mail Adresse Bild als Link
<a href="http://cnn.com">zu CNN</a> <a href="seite2.htm">mehr</a>

<a href="mailto:aa@bb.cc">Mail</a> <a href="seite2.htm"><img src="mehr.gif" alt="zur Seite 2" /></a>

1.4.9

Gesamt-Struktur einer Webseite

Eine HTML Seite besteht aus einem vordefinierten Grundgerüst.

MMT Webprogrammierung 1
<!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>

18

Achtung: es kann nur einen head und einen body geben, keine Wiederholungen!

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> <li>punkti</li> <li>punkti</li> </ul> <ol> <li>eins</li> <li>zwei</li> <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 Tabellenlayouts 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.

MMT Webprogrammierung 1

19

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 6: Der HTML-Validator des World Wide Web Consortiums

Die Fehlermeldungen des Validators muss man sorgfältig lesen, und 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 7: Fehlermeldung des Validators

Die Fehlermeldung in Abbildung 7 geht auf einen Tippfehler zurück: der schließende Tag wurde falsch geschreiben. Eine

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-

MMT Webprogrammierung 1 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 Name des SFTP-Servers Username + Passwort Ordner bei Upload URL SFTP
www.users.fh-salzburg.ac.at

20

fhs666 – gleich wie bei FH-Mail
htdocs/ 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 Name des SFTP-Servers Username + Passwort Ordner bei Upload URL SFTP
multimediatechnology.at

fhs666 – gleich wie bei FH-Mail
public_html/ 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 installieren: • • • Dreamweaver: Upload ist nach der Definition einer „Site“ möglich Secure File Transfer Client: nur für SFTP FireFox: AddOn von Firefox, freie Software, können Sie selbst installieren

Achten Sie beim Upload darauf, dass die Ordnerstruktur und die relative Position der Dateien beibehalten wird; nur dann funktionieren die relativen Links! Dreamweaver und FireFTP bieten Hilfe beim Erhalt der Struktur. In Abbildung 8 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 entsprechenden Ordner am Webserver hoch.

MMT Webprogrammierung 1

21

Abbildung 8: Site-Fenster von Dreamweaver – Upload einer Datei automatisch in den richtigen Ordner

Abbildung 9 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 9: Upload mit Dreamweaver in den falschen Ordner

Bevor Sie FTP im Dreamweaver Site-Fenster benutzen können müssen Sie (Unter SITE
TEN

SITES VERWAL-

BEARBEITEN

ERWEITERT

REMOTE-INFORMATIONEN) die richtige Konfiguration eintragen,wie in

Abbildung 10 gezeigt.

MMT Webprogrammierung 1

22

Abbildung 10: Bearbeiten der FTP-Information in Dreamweaver

Die anderen erwähnten Programme funktionieren sehr ähnlich.

MMT Webprogrammierung 1

23

2.

CSS Basics

Der zweite Termin stellt die Grundzüge von Cascading Style Sheets vor

Was Sie wissen sollten
• Wie HTML und CSS zusammen hängen. Wie CSS Selektoren aufgebaut sind. Welche Schreibweisen 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 notwendigen CSS-Deklarationen nachschlagen können

Was Sie können sollten
• 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

Weitere Informationsquellen
• • 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
• • • Desktop Webbrowser: Firefox, MSIE, Opera, Safari „exotische“ Webbrowser: Lynx, Opera Mobile, … Die Firefox Erweiterungen ColorZilla, MeasureIt, Web Developer, FireFTP

MMT Webprogrammierung 1

24

2.1 Kurzvorstellung von Stylesheets
Die einfachste Art die visuelle Darstellung einer Webseite zu definieren ist die Einbettung eines Stylsheets. Das Stylesheet definiert für die einzelnen HTML-Tags wie sie dargestellt werden sollen. In Listing 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. 4. 5. } 6. h1,h2 { 7. 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 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; font-family: Calibri, Helvetica, Arial, sans-serif; font-size: 13px;

An Hand dieses Beispieles werden nun die ersten Stylesheet-Befehle erklärt. Die Syntax von Stylesheets 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 abgearbeitet, die erste Schrift die er findet verwendet er. In Zeile 2 bis 5 von Fehler! Verweisquelle konnte nicht gefunden werden. 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 empfiehlt 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.

MMT Webprogrammierung 1

25

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 Aspekte des Absatz-Layoutes steuern, einige davon sind in Abbildung 11 gezeigt:

Abbildung 11: Absatz mit CSS Formatanweisungen

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. Genug 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 HTMLTag geltenden CSSAnweisungen

Zeigt HTMLCode des Elements

Abbildung 12: Firefox Add-On Firebug

MMT Webprogrammierung 1

26

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 sogenannten „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 Kompetenzen...</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übersichtlicher. 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 HTMLSeite mit separatem Stylesheet aus:
Die html-Datei
<html><head> <link rel="stylesheet" type="text/css" href="fh.css"> </head><body> <h1>Das Studium</h1> <p>Studienziel ist es, breit gefächerte technische und wirtschaftliche Kompetenzen... </body></html>

Die Datei fh. css
h1 { font-family: Arial; color: blue; } p:first-letter { font-size: large; }

Mit der Trennung von Stylesheet und HTML wurde HTML wieder einfacher und übersichtlicher. Besonders 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

MMT Webprogrammierung 1 •

27

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 richtigen HTML-Tags verwenden, z. B. Überschriften wirklich mit h1, h2, h3 formatieren, und nicht mit b, i, font.

2.2.1
Beispiel
h1,h2 {

Stylesheet Syntax

font-family: Arial, Helvetica, sans-serif; color: lightblue; } body { margin-left: 150px; background-color: white; } p { text-align: justify; }

Selektor

Rule Deklaration Deklaration

Eine Stylesheet-Regel („Rule“) besteht aus einem Selektor gefolgt von einer geschwungenen Klammer die eine oder mehrere Deklarationen enthalten kann. Der einfachste Selektor besteht aus dem Namen eines einzelnen HTML-Tags. Sie können auch mehrere 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 erreichen, wenn Sie für jede Webseite dieselbe CSS Datei verwenden. Dazu müssen Sie in jede HTMLDatei die CSS Datei mittels folgender Anweisung einbinden:

MMT Webprogrammierung 1
<link rel="stylesheet" src="mystyle.css" />

28

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 (eingebunden 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 Zweck können Sie sich im Stylesheet noch weitere Formatvorlagen - sogenannte "Klassen" - definieren:

3

Siehe Souders, Steve (2007) High Performance Web Sites. O'Reilly. ISBN 9780596529307

MMT Webprogrammierung 1
.wichtig { color: red; }

29

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. 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 (gleich) */ 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, erzwingt also einen Zeilenumbruch. <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 Buchstaben M) , ex (Höhe des Buchstaben X), % (Prozent), cm (Zentimeter), in (Inch). Einige davon sind relativ (em = relativ zur Schriftgröße, px = relativ zur Pixel-Größe am aktuellen Ausgabemedium), andere

MMT Webprogrammierung 1

30

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. 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ßenabstand. Diese werden mit den Deklarationen border, padding und margin festgelegt. Ein Hintergrundbild und/oder eine Hintergrundfarbe des Tags reicht immer bis zum Rahmen, aber nicht darüber hinaus.

Abbildung 13: Darstellung des Box Models von hicksdesign.co.uk

Die Ausdehnung von margin, padding und border kann man besonders gut mit der FirefoxErweiterung Firebug erforschen wie in Abbildung 14 gezeigt.

MMT Webprogrammierung 1

31

Abbildung 14: margin, border, padding in FireBug

Dabei wird direkt in der Webseite der Aussenabstand (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 15: 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 16 wurde ein Bild mit drei Zahnrädern als Hintergrundbild verwendet, durch die Wiederholung werden sieben Zahnräder angezeigt.

MMT Webprogrammierung 1

32

Abbildung 16: Beispiel für ein Hintergrundbild in einer Webseite

Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch lesbar sein! Im Beispiel in Abbildung 16 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 unterstrichen. Um die Darstellung von Links zu verändern muss man in CSS :link oder :visited als Selektoren verwenden. 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: background-position: background-repeat: padding-right: } url(icon-link.gif); center right; no-repeat; 9px;

2.3

Graceful Degradability

Der englische Begriff ‚graceful degradability’ hat noch keine adequate deutsche Übersetzung, er bedeutet ungefähr: „funktioniert auch ohne … gut. “

MMT Webprogrammierung 1

33

Das dahinter stehende Prinzip lautet: für die verschiedenen Ausgabemedien sollen nicht verschiedene Versionen einer Webseite erstellt werden, sondern alle Ausgabemedien werden mit einem Dokument bedient. Wenn der Browser Javascript, Flash, CSS unterstützt, dann soll die Website besonders schön, interaktiv, 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 optimal:
<h1>Salzbuerger Nockerl</h1>

Mit Image Replacement kann man die optimale Darstellung für Suchmaschinen und Braille Ausgabegerä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:

MMT Webprogrammierung 1
<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>

34

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 <li><a <li><a <li><a </ul> href="home.html">home</a></li> href="news.html">news</a></li> href="portfolio.html">portfolio</a></li> href="contact.html">contact</a></li>

Im nächsten Kapitel lernen Sie eine Methode kennen wie Sie aus dieser Liste ein Menü machen.

MMT Webprogrammierung 1

35

3.

CSS für Layout und Interaktion

Was Sie wissen sollten
• Wie relative und absolute URLs funktionieren, wie URLs und Pfadangaben im Dateisystem zusammen hängen • Welche Bildformate im Web verwendet werden können. Welches Bildformat für ein gegebenes Bild geeignet ist (auf Grund von Anforderungen wie: Anzahl der Farben, Transparenz, Alpha-Transparenz, Animation) • Wie verschiedene Ausgabegeräte und verschiedene Bildschirmgrößen die Darstellung von Webseiten beeinflussen und die Gestaltung von Webseiten schwierig machen. • Welchen Zusammenhang es zwischen den Begriffen ‚graceful degradability’, Barrierefreiheit und Suchmaschinen-Tauglichkeit von Webseiten gibt. • Welche Vor- und Nachteile fixe, fluide und elastische Layouts von Webseiten haben.

Was Sie können sollten
• Absolute und relative URLs verwenden. Fehler die durch falsche URLs verursacht werden finden und korrigieren. • • • • • Ein Bild das digital vorliegt in ein geeignetes Format für das Web konvertieren. Ein Bild (auf verschiedene Arten) auf einer Webeite positionieren. Mittels CSS zwei oder drei Spalten nebeneinander positionieren. Mittels CSS aus einer Liste von Links ein Navigations-Menü machen. An einem bestehen CSS-Layout Veränderungen vornehmen.

Weitere Informationsquellen
• • 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

MMT Webprogrammierung 1

36

3.1 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.1.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 übernommen; auch die Pfadangaben von DOS/Windows und von CD-ROMs funktionieren ähnlich. ) Neben wir an in der Datei http://mediacube.at/pix/weg.html seien folgende drei URLs enthalten:
absolut beginnt mit Protokoll relativ zum beginnt mit / relativ zur Datei Webserver
http://mediacube.at/pix/weg-zur-alten-schmiede.jpg

/pix/weg-zur-alten-schmiede.jpg

weg-zur-alten-schmiede.jpg

Bei den relativen URLs muss man die URL des enthaltenden dokuments und die relative URLs zusammen—addieren, um zu einer absoluten URL zu kommen.
http://mediacube.at/pix/weg.html + /pix/weg-zur-alten-schmiede.jpg =

http://mediacube.at/pix/weg-zur-alten-schmiede.jpg

und
http://mediacube.at/pix/weg.html + weg-zur-alten-schmiede.jpg =

http://mediacube.at/pix/weg-zur-alten-schmiede.jpg

Mit einer anderen Ausgangs-URL ist das Ergebnis natürlich anders:
http://multimediatechnology.at/2008/09/22/weg.html + /pix/weg-zur-alten-schmiede.jpg =

http://multimediatechnology.at/pix/weg-zur-alten-schmiede.jpg

und:
http://multimediatechnology.at/2008/09/22/weg.html + /pix/weg-zur-alten-schmiede.jpg =

http://multimediatechnology.at/2008/09/22/weg-zur-alten-schmiede.jpg

Relativen URLs können selbst wieder (mehrere) 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

MMT Webprogrammierung 1 Zwei Punkte als Ordnernamen bedeuten dabei: „raus aus dem aktuellen Ordner“:
http://multimediatechnology.at/2008/04/17/rattenscharfes-computergame.html + ../../mmt-auf-facebook.html =

37

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.1.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 Datei- 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-alten-schmiede.jpg

MMT Webprogrammierung 1
Dateisystem
/var/www/virthosts/mediacube.at/pix/weg-zur-alten-schmiede.jpg

38

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 Dateisystem URL Dateisystem
http://mediacube.at/ /var/www/virthosts/mediacube.at/index.html http://mediacube.at/pix/ /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 sehen Sie in Abbildung 17: entweder eine Auflistung der Dateien im Ordner oder eine Fehlermeldung.

Abbildung 17: Zugriff auf einen Ordner ohne Standard-Dokument (index.html): Auflistung oder Fehlermeldung

Die entsprechenden Apache-Konfigurationsanweisung dazu sind:
Options +Indexes Options -Indexes

MMT Webprogrammierung 1

39

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/urstein/stud/03/fhs303030/. Ihr Webspace ist im Unter-Ordner htdocs:
URL Dateisystem URL Dateisystem
http://www.users.fh-salzburg.ac.at/~fhs303030/test.html /home/urstein/stud/03/fhs303030/htdocs/test.html http://www.users.fh-salzburg.ac.at/~fhs111111/test.html /home/urstein/stud/01/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 http://www.users.fh-salzburg.ac.at/~fhs111111/test + ../~fhs111111/test =

Oder relative zum Webserver:
http://www.users.fh-salzburg.ac.at/~fhs303030/test.html http://www.users.fh-salzburg.ac.at/~fhs111111/test + /~fhs111111/test =

Die Apache Konfigurationsanweisung lautet:
UserDir htdocs

3.1.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.

MMT Webprogrammierung 1

40

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, sondern 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 Webspace sorgfältig. Wenn ich auf meheren 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“.

MMT Webprogrammierung 1

41

3.2

Rahmenbedingungen für Layout

Wie in Kapitel 1 beschrieben gibt es viele verschiedene Ausgabegeräte für Webseiten. Für die Gestaltung des Layouts von Webseiten spielt dabei die Bildschirmgröße bzw. die Auflösung eine wichtige Rolle.

3.2.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 Programmiersprache Javascript, mit der man die Größe des Browserfensters messen kann – das Ergebnis der Messung ist natürlich dadurch verfälscht, dass Browser ohne Javascript ganz aus der Messung herausfallen. Diese Beschränkung sollten Sie bei den folgenden Überlegungen immer beachten. Abbildung 18 zeigt einige derzeit (2008) mögliche Bildschirm-Auflösungen.

Abbildung 18: einige mögliche Bildschirmauflösungen und Seitenverhältnisse 2008, basierend auf http://en.wikipedia.org/wiki/Image:Vector_Video_Standards2.svg

MMT Webprogrammierung 1

42

Vergleichen Sie die höchsten hier dargestellte Auflösungen mit der geringsten Auflösungen. Da Breite und Höhe (mehr als) verdoppelt sind, steht bei der höchsten Auflösung also (mehr als) die vierfache Fläche zur Verfügung! Abbildung 19 zeigt zwei Statistiken über die Bildschirmauflösung von thecounter.com von 2006 und 2008. In diesem Zeitraum ist der Anteil der geringsten hier dargestellte Auflösung (800x600) von 17% auf 7% gefallen. Die meistverwendete Auflösung bleibt 1024x768.

Abbildung 19: Statistik über die Bildschirmauflösung, Juni 2006 und April 2008, Quelle: thecounter.com

3.2.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 eingeblendete Favoritenleisten abzuziehen, um den „netto“ verbleibenden Raum für die Gestaltung der Webseite zu erhalten. Abbildung 20 zeigt diese Problematik an Hand einer Webseite.

Abbildung 20: Platzbedarf von Browser-Elementen: firefox ohne Sidebar, Internet Explorer mit Favoriten

MMT Webprogrammierung 1

43

Beide Browser zeigen dieselbe Webseite, beide Browser wurden auf einem Computer mit einer Bildschirm-Auflösung von 1024x768 Pixel verwendet. Links in der Abbildung sehen sie den Browser Firefox. Nach Abzug von Symbolleisten oben, Statusleiste unten, Scrollbalken rechts und dem (sehr dünnen) Fensterrahmen links bleiben 1003x615 Pixel für die Webseite. Rechts in der Abbildung sehen Sie dieselbe Seite in Internet Explorer. Zusätzlich zu den üblichen Symbolleisten ist hier auch die „Favoriten-Leiste“ am linken Rand des Browser sichtbar. Es bleiben 743x562 Pixel für die Darstellung der Webseite. Wie Sie sehen können ist die Seite so gestaltet, dass das Foto, das in Firefox in der rechten oberen Ecke der Webseite sichtbar ist, in Internet Explorer nicht mehr sichtbar ist. Abbildung 21 zeigt eine Statistik über die „Netto-Größen“ von Browser-Fenstern. Laut dieser Statistik kann eine Webseite mit Breite 950 Pixel auf ca. 70% der Browser vollständig angezeigt werden. Bei 1050 Pixel Breite sind es nur noch 20%.

Abbildung 21: „Netto“-Breite von Browser-Fenstern, 2005-2006, Quelle: webwelt.horus.at

3.2.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 inadequat für das Medium Web. „best viewed“ ist eine Zumutung für alle LeserInnen 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 benutzbar 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 Herausforderung des Mediums. Weil soch ein Entwurf auf einem Bildschirm mit hoher auflösung

MMT Webprogrammierung 1 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 :

44

Darstellung der Seite bei einer Auflösung von 800x600: Navigation (linke Spalte) und Content ist sichtbar. Eine Spalte rechts mit untergeordnetem Content ist nur durch Scrollen nach rechts erreichbar.

Darstellung der Seite bei einer Auflösung von 1024x768 Navigation, Content und ZusatzContent voll sichtbar.

MMT Webprogrammierung 1

45

Darstellung der Seite bei einer Auflösung von 1280 x 1024 Navigation, Content Content voll sichtbar. und Zusatz-

Der „leere“ Teil der Webseite wird durch das Hintergrundbild interessant gestaltet.

Darstellung der Seite bei einer Auflösung von 1600x1200. Navigation, Content Content voll sichtbar. und Zusatz-

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 Details.

3.2.4 Bilder im Web
Als Bildformate für Webseiten werden nur Pixel-Formate von vielen Browsern unterstützt.

MMT Webprogrammierung 1

46

gif

Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). „animiertes Gif“ enthält mehrere 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 2: 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.

3.2.5 Schriftgröße
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:

MMT Webprogrammierung 1

47

3.3

CSS Selektoren

In Kapitel 2.2.2 haben Sie CSS Selektoren für Klassen und IDs kennen gelernt. In der CSS 2.1 Spezifikation werden u.a. folgende Schreibweisen für Selektoren beschrieben4:
Name Muster Beschreibung Stimmt mit jedem Element überein. Stimmt mit jedem E-Element überein (d.h. ein Element des Typs E). Stimmt mit jedem E-, sowie jedem F-, sowie jedem G-Element überein. E, F und G könnten auch komplexere Selektoren sein! Stimmt mit jedem F-Element überein, das ein Nachfahre eines EElements ist. Stimmt mit allen F-Elementen überein, die Kindelemente eines Elements E sind. Stimmt mit Element E überein, wenn E das erste Kindelement des übergeordneten Elements ist. Stimmt mit dem Element E überein, wenn E der Quellanker eines Hyperlinks ist, dessen Ziel noch nicht besucht wurde (:link), oder dessen Ziel bereits besucht wurde (:visited).

Universal selec* tor Type selectors Grouping Descendant selectors Child selectors The :first-child pseudo-class
E E, F, G

E F

E > F

E:first-child

The link pseudo- E:link E:visited classes
E:active E:hover E:focus E + F

The dynamic pseudo-classes Adjacent selectors Class selectors ID selectors

Stimmt während bestimmter Benutzeraktionen mit E überein.

Stimmt mit jedem F-Element überein, dem unmittelbar ein Element E vorausgeht. Nur HTML. Stimmt mit jedem E-Element überein, dessen CLASS gleich „mwarning“ ist. Stimmt mit jedem E-Element überein, dessen ID gleich „myid“ ist.

E.warning E#myid

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,

MMT Webprogrammierung 1

48

3.4

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. Innerhalb eines Blocks wird Text vom Browser gesetzt und umgebrochen, jeder Block nimmt genau einen rechteckigen Bereich des Browserfensters in der vollen Breite ein. In Abbildung 22 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 22: 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 23 mitten in einen Absatz hinein setzen, ergibt das meist ein sehr hässliches Layout.

Abbildung 23: Bild mitten im Absatz

Browser können keine Wörter trennen und umbrechen, ein langes „Wort“ kann die Breite eines Elemets überschreiten. Verschiedene Browser verhalten sich hier unterschiedlich. In Abbildung 24 können Sie sehen, dass Microsoft Internet Explorer 7.0 URLs nicht umbricht. Firefox 3.0 hingegen kann URLs umbrechen.

MMT Webprogrammierung 1

49

Abbildung 24: Darstellung eines Absatzes mit Rahmen und fixer Breite, der lange Wörter enthält, in MSIE 7.0

3.4.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 25: 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.4.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. 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 „floated“ 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.

MMT Webprogrammierung 1

50

Abbildung 26: 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 27 soll der zweite Absatz nach rechts gehen. Er hat die ID edvard.

p { margin: 0px; } #edvard { float:right; width:33%; } Abbildung 27: Ein Absatz mit float

Wenn viele Elemente mit float positioniert werden die die gleiche Höhe haben entsteht ein besonders flexibles Layout: in Abbildung 28 werden je nach zur Verfügung stehendem Platz drei oder vier Bilder nebeneinander dargestellt:

Abbildung 28: Zwei Darstellungen der Bildergalerie mit float

MMT Webprogrammierung 1

51

3.4.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

Abbildung 29: Kombination von absoluter Positionierung und margin-left

Die Koordinaten (top und left) beziehen sich normalerweise auf die linke obere Ecke des Browserfenster. 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 Koordinatensystem, das navi-div ist also in der linken oberen Ecke des main-div und nicht in der linken oberen Ecke des Browser-Fensters positioniert.

MMT Webprogrammierung 1
<div id="main"> <div id="content"> <h1>Inhalt</h1> <p>Hier ist der Inhalt[. . . ]</p> </div> <div id="navi"> [. . . ] </div> </div> #main { border: 1px red solid; position:relative; width: 700px; margin: 0px auto; } #content { margin-left: 120px; background-color: #ddd; } #navi { position: absolute; width: 80px; top:0px; left:0px; }

52

3.5 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. Dieser Ansatz ist auf englisch als „graceful degradablility“ bekannt. 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ü machen, 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:

MMT Webprogrammierung 1
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; }

53

3.5.1

:hover

Mit dem Selektor :hover wird eine CSS-Regel nur angewandt wenn die Maus über dem Tag ist.
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 Bildausschnitt 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 Darstellung der Webseite erheblich beschleunigen.

MMT Webprogrammierung 1

54

Abbildung 30: CSS Sprites von Yahoo

MMT Webprogrammierung 1

55

4.

Formulare, URLs, erstes Javascript

Zum vierten Termin der Lehrveranstaltungen lernen Sie Formulare und Ihre Funktionsweise kennen.

Was Sie wissen sollten
• • Wie Web-Formulare mit URLs zusammen hängen Welche HTML-Tags ein Formular und seine Eingabeelemente definieren

Was Sie können sollten
• • Ein Web-Formular erstellen Ein alternatives Web-Formular für ein bestehendes Formular / Programm definieren

Weitere Informationsquellen
• • • 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 InteraktionsMöglichkeiten gestalten: mit Links ermöglichen Sie der LeserIn die Navigation durch das Web. Formularen ermöglichen mehr Interaktion – aber immer noch in einem sehr strengen, sehr strukturierten Rahmen. Abbildung 31 zeigt zwei typische Anwendungsgebiete für Web-Formulare: das Eingabeformular der Suchmaschine Google und ein Bestellformular.

MMT Webprogrammierung 1

56

Abbildung 31 Formulare in Webseiten

Mit den HTML-Tags <form>, <input />, <textarea>, <option>, <select> werden Formulare gebaut. Hier ein einfaches Beispiel, (in der Code-Ansicht von Dreamweaver 4):

Der <form>-Tag ist „unsichtbar“ und dient nur dazu, die anderen Eingabefelder zu bündeln. Im Action-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 32: 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 3 zeigt die verschiedenen Arten von Text-Eingabefeldern.
Textfeld:

MMT Webprogrammierung 1
<input type="text" name="meintextfeld" value="text eingeben" />

57

Passwort-Feld:
<input type="password" name="meinpasswort" />

mehrzeiliges Textfeld = Textbereich
<textarea name="zitat"> In a hole in the ground there lived a Hobbit. </textarea> Tabelle 3: Text-Eingabefelder

Für einzelne Fragen die mit Ja oder Nein zu beantworten sind wird das Eingabe-Element „checkbox“ verwendet, siehe Tabelle 4.
<input type="checkbox" name="rauch" /> Raucher Tabelle 4: Checkbox für Ja-/Nein-Fragen

Für Fragen, bei denen eine von mehreren vorgegebenen Antworten möglich sein soll gibt es verschiedene Eingabeelemente, die in Tabelle 5 gezeigt werden.
Radiobuttons
<input <input <input <input type="radio" type="radio" type="radio" type="radio" name="size" value="XL" name="size" value="L" name="size" value="M" name="size" value="S" checked="checked" /> XL /> L /> M /> 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>

MMT Webprogrammierung 1
Tabelle 5: Eingabeelemente für Fragen mit mehreren Antworten

58

Radiobuttons, die zu einer Frage gehören, müssen den selben Namen tragen. der Wert ist unterschiedlich (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 6 gezeigt.
Absende-Button
<input type="submit" value="dr&uuml;ck mich!" /> Tabelle 6: 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&uuml;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 Zurücksetzen Button gedrückt und dann gedacht „Mist, das war ja gar nicht der Einsende-Button, jetzt muss ich alles noch mal tippen.“ Tabelle 7 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"

MMT Webprogrammierung 1
value="Visa" /> Visa <br> </fieldset>

59

Datei-Upload, funktioniert nur wenn die Formular-Daten mit Methode POST und speziellem enctype an den Webserver geschickt werden
Wählen Sie ein Bild aus: <input type="file" name="bilddatei"> Tabelle 7: 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
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 vorgegebenen 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 weiteren Probleme abgefangen werden

Abbildung 33 Entwürfe für ein Zimmer-Reservierungs-Formular

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 besonders häufige Auslassung zeigt Tabelle 8.

MMT Webprogrammierung 1

60

Tabelle 8: Entwürfe für ein Getränke-Bestell-Formular

Der linke Entwurf in Tabelle 8 läßt keine Bestellung nur einer Sorte Bier zu. Die „Mindestbestellmenge“ für jede Sorte ist jeweils eine Kiste. Durch das Einfügen einer „Leer“-Option in die Menüs wird diese Einschränkung aufgehoben.

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 erfolgreich versandt sondern gehen verloren.

MMT Webprogrammierung 1

61

Abbildung 34: Formular per E-Mail oder an 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 35 sehen Sie ein (leicht vereinfachtes) Bestellformular für Flugzeuge das die Methode GET verwendet.

Abbildung 35: 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 36 gezeigt.

Abbildung 36: 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

MMT Webprogrammierung 1 action 1.Eingabe 2.Eingabe

62

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 gesetzt, 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 EingabeFormular 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 37: 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. Ein lehrreiches Beispiel aus der Frühzeit des Web: es gab einst Webshops, die den Preis der Waren als verstecktes Eingabefeld im Formular speicherten:

MMT Webprogrammierung 1
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>

63

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 sind mit Skepsis zu betrachten!

4.4 Formular und Javascript
Am Beispiel eines Formular werden wir nun einfaches Javascript kennen lernen. Die Details von Javascript werden an den restlichen Lehrveranstaltungs-Terminen behandelt, hier geht es nur um ein erstes Kennenlernen.

4.4.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 38 gezeigt.

Abbildung 38: Mit firebug den Wert einzelnen Javascript-Variablen auslesen

4.4.2 Popup-Fenster
Mit den Befehlen alert, confirm und prompt können Sie kleine Popup-Fenster öffnen:

MMT Webprogrammierung 1
<script type="text/javascript"> window.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>

64

Achtung: So können Sie zwar bei gutgläubigen Menschen Herzinfarkte auslösen, aber Sie können mit Javascript nicht wirklich Daten löschen.

4.4.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 39: 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 Formulares ansprechen (z.B. document.test.in). Jedes eingabefeld bietet mit .value den aktuell eingegeben Wert (als String) an, hier z.B. document.test.in.value.

Die letzten beiden Zeilen in der Konsole zeigen, dass es auch umgekehrt

funktioniert: man kann auch Werte ins Eingabefeld hineinschreiben, der neue Werte wird sofort im Browser angezeigt.

4.4.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:

MMT Webprogrammierung 1
<h1>Hallo Welt</h1> <p>Hallo Javscript</p> <p>Hallo HTML</p>

65

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 Firefox sieht man das Ergebnis:

4.4.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.

MMT Webprogrammierung 1 Im Webbrowser sind solche Ereignisse z.B.: • • • • Klicken auf einen Link Eintippen in ein Textfeld Anklicken einer Checkbox Absenden eines Formulares

66

Ein Beispiel für ereignisgesteuerte Programmierung mit einem Web-Formular: Das Bestellformular für Bücher in Abbildung 40 soll automatisch den Gesamtpreis berechnen.

Abbildung 40: Bestellformular für Bücher mit Berechnung

Wenn in ein Anzahl-Feld ein neuer Wert eingegeben wird soll dieser mit dem Preis multipliziert werden 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" /> <input value="0" size="10" name="out" /> </form>

Für die Formulierung „Wenn in das Feld in ein neuer Wert eingegeben wird, dann...“ gibt es ein passendes Event in HTML/Javascript: onchange. Die wird als Attribut in den HTML-Code des Eingabefeldes geschrieben:

MMT Webprogrammierung 1
<form name="test"> <input value="0" size="10" name="in" onchange="hier Javascript" /> <input value="0" size="10" name="out" /> </form>

67

Eine Liste von Events bzw. on-Attributen für HTML-Tags finden Sie z.B: in selfhtml5. 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;" /> <input value="0" size="10" name="out" /> </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 werden. Z.B. um die Gesamtsumme im Bestellformular zu berechnen ist eine Funktion praktisch:
<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.out2.value + document.test.out3.value + document.test.out4.value + document.test.out5.value + document.test.out6.value; } </script> </head> <body>

Achtung: enthält noch einen Bug! weiterlesen!

Bei den einzelnen Berechnungen für die einzelnen Bücher wird jeweils zum Schluss gesamt() aufgerufen:

5

http://de.selfhtml.org/javascript/sprache/eventhandler.htm

MMT Webprogrammierung 1

68

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"; document.write("<br />wie viel ist 10 plus 20? "); document.write(a + 20); a = "10"; document.write("<br />wie viel ist 10 plus 20? "); document.write(a + 20);

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 gesamtFunktion nie eine Summe, sondern führt nur eine Aneinanderfügung der Zahlen als Text durch wie in Abbildung 41 gezeigt: aus 100 + 200 + 0 + 0 + 0 + 0 wird 1002000000.

MMT Webprogrammierung 1

69

Abbildung 41: 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.4.6 Formular prüfen
Mit Javascript kann man schon vor dem Absenden des Formulares prüfen ob wichtige Daten eingegeben 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:

MMT Webprogrammierung 1
<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

70

if ( ok ) { return true; } else { alert("Das Formular ist nicht ok:\n" return false; } } </script> </head> <body>

+ fehler );

<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>

MMT Webprogrammierung 1

71

5.

Javascript und DOM

Javascript und das Document Object Model (DOM) wird vorgestellt.

Was Sie wissen sollten
• • Wie man FireBug als Javascript-Console und für die Fehlersuche nutzen kann. 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 Kompatiblitätsprobleme hat, aber trotzdem die einzige Chance ist, Webseiten interaktiver zu machen.

Was Sie können sollten
• Mit den DOM-Befehlen alle Elemente in eine Webseite manipulieren.

Weitere Informationsquellen
• • 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..

MMT Webprogrammierung 1

72

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 beschränkt — Sie können mit Javascript nicht die Festplatte löschen oder Excel starten. Unter dem Namen 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 verwechseln 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 Sprache „Javascript“. Javascript Wer hat’s erfunden? Netscape Interpretiert Sprache Typbindung Java Sun Kompilierte Sprache

Wenige Datentypen, Probleme wer- Datentypen und Klassen werden streng unterschieden und zur Compiden erst zur Laufzeit erkannt lezeit geprüft Im Webbrowser, in Flash, in Illustra- Überall (Chipkarten, am Server, im tor und Indesign Browser, im Handy) Meist kurzfristige Projekt mit weni- Alle, auch Großprojekte mit vielen gen Personen „Mannjahren“ Nur InformatikerInnen Objekte und Klassen

Verwendung

Projekte

ProgrammiererInnen Auch Web-DesignerInnen Objektorientierung Objekte und Prototypen

5.2.2

Geschichte von Javascript

Javascript wurde ursprünglich von Netscape erfunden, und dann von verschiedenen Herstellern weiterentwickelt. Es war eines der Schlachtfelder im Browser-War: Microsoft und Netscape versuchten durch verschiedene Javascript-Implementierungen die Position des eigenen Browsers zu verbessern und Webseiten im gegnerischen Browser unbrauchbar zu machen. Ein Beispiel: um die Breite des Browser-Fensters auszumessen gibt es mehrere Varianten:

MMT Webprogrammierung 1 funktioniert in Netscape und Mozilla funktioniert in Internet Explorer
x = window. innerWidth; x = document. body. clientWidth;

73

Erst nachträglich gab es (partielle) Einigung auf Standards. Mit dem „Document Object Model“ (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 WebApplikationen. 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 Webapplikation 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 Dateisystem. So ist in folgendem Beispiel der markierte <li>-Tag innerhalb des <ol>-Tags, der <li>-Tag enthä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ändert 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)

MMT Webprogrammierung 1

74

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ändern 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 Endung .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!

MMT Webprogrammierung 1

75

Der <script>-Tag
Javascript-Programme können im HTML-Code mit dem <script>-Tag eingebettet werden. Das Programm 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. Aber Sie werden diese Methode vielleicht noch von Flash aus verwenden.

Die onEvent - Attribute
Meist werden Javascript-Programme so geschrieben, dass sie nicht gleich beim Laden der Seite starten, sondern erst wenn gewisse Ereignisse (Events) eintreten. Die Begriffe Ereignis und Event sind Fachbegriffe in der Programmierung von Benutzerschnittstellen: Ein Event ist etwas was die UserIn tut, und was das Programm wahrnehmen kann. z. B. die UserIn klickt auf einen Button oder bewegt die Maus über einen bestimmten Bereich der Webseite. Wenn man eine grafische Oberfläche programmiert (egal ob in HTML+Javascript oder in Flash+Actionscript oder in Java) spricht man von ereignisgesteuerter Programmierung. In HTML+Javascript funktioniert das so: Bei manchen HTML-Tags gibt es Attribute die mit on beginnen (onclick, onsubmit, onload,. . . ), als Wert enthalten diese Attribute das Javascript-Programm das ausgeführt werden soll.

MMT Webprogrammierung 1
<h1>Überraschung</h1> <form> <input type="button" value="Start" onClick="alert('Ihre Festplatte wurde gelöscht')"> </form>

76

Ein Button wird angezeigt. Erst wenn der Button gedrückt wird, wird das Event onClick ausgelöst, und damit das Javascript-Programm gestartet. Es erzeugt ein Popup-Fenster mit dem Text „Ihre Festplatte wurde gelöscht“ (aber es löscht nicht wirklich die Festplatte!). Das Popup-Fenster muss erst mit einem Klick auf den OK-Button geschlossen werden, bevor weitere Arbeit mit dem Browser möglich ist.

Abbildung 42: Button mit onClick-Event

Ein paar typische Events mit ihren typischen HTML-Tags:
<body onload=". . . ">

Das Programm wird ausgeführt, nachdem die ganze Seite geladen + fertig dargestellt ist Das Programm wird ausgeführt wenn die Maus über den Link bewegt wird (auch: onmouseout) Das Programm wird ausgeführt wenn auf den Button geklickt wird. Das Programm muß true oder false zurückgeben um anzuzeigen ob der Link wirklich geöffnet werden soll. Das Programm wird ausgeführt wenn der Einsende-Knopf des Formulars betätigt wird, aber bevor die Daten wirklich gesendet werden. Das Programm muß true oder false zurückgeben um anzuzeigen ob das Formular wirklich abgesendet werden soll. Das Programm wird ausgeführt wenn der Inhalt des Eingabefeldes verändert wurde

<a href=". . . " onmouseover=". . . "> <input type="button" onclick=". . ">

<form onsubmit=". . .">

<input onchange=". . ">

MMT Webprogrammierung 1

77

Eine ausführliche Liste der Events, und eine ausführliche Auflistung welcher HTML-Tag mit welchem Event kombiniert werden kann, finden Sie in selfhtml6.

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 Eigenschaften: 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 bachgroundColor (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 Javascript 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 43 gezeigt: Wenn Sie einen Ausdruck eintippen wird er ausgewertet, mit dem Befehl console.log( … ) können Sie direkt auf die Console schreiben.

Abbildung 43: Javascript Console in FireBug

6

http://de.selfhtml.org/javascript/sprache/eventhandler.htm

MMT Webprogrammierung 1 Variablen in Javascript können Zahlen, Strings, Arrays, Objekte enthalten – der Interpreter trennt Variablen nicht nach verschiedenen Datentypen:
a a a a = = = = 10; 3.141; "ein text"; true; // Integer // Float // String // Boolean

78

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]; b = new Array("eins", 2, 3.141, true); // JSON-Schreibweise // 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 mit .length ausgelesen 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 geschwungenen Klammern eignet sich gut für einmalige Objekte. Will man mehrere Objekte mit denselben Eigenschaften 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: Eigenschaften eines Objekts können nicht nur über die PunktSchreibweise, sondern auch über eckige Klammern angesprochen werden:
alert("Das Shirt ist " + c["farbe"] );

In den eckigen Klammern steht nun ein String. Dieser könnte auch in einer Variable gespeichert sein:

MMT Webprogrammierung 1
e = "beschriftung"; alert("Die Beschriftung lautet " + c[e] );

79

Mit dieser Schreibweise und der for-Schleife kann man über alle Eigenschaften eines Objektes iterieren:
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 manipulierbar.
document.getElementById() document.getElementsByTagName() document.createElement() node.getElementById() node.getElementsByTagName() node.appendChild() node.cloneNode() node.getAttribute() node.setAttribute() node.hasChildNodes() node.insertBefore() node.removeAttribute() node.removeChild() node.replaceChild()

(liefert 1 Node) node.parentNode (liefert Array von Nodes) node.childNodes node.firstChild node.lastChild node.previousSibling node.nextSibling node.data node.attributes

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;

MMT Webprogrammierung 1

80

Ein Beispiel eines Spiels in Javascript: Die Webseite enthält 97 div’s mit den StudentInnen von MMA und MMT. Hier ein Beispiel für so ein div:
<div class="m mma" id="person_25"> <label class="photo" for="photo_25"> <img src="photos/mma2008-25.jpg" /> <input type="checkbox" onchange="check_photo(this)" id="photo_25" /> </label> <label class="data" for="name_25"> <span class="vorname">Benjamin</span> <span class="nachname">Hinteregger</span> <span>mma2008</span> <input type="checkbox" onchange="check_name(this)" id="name_25" /> </label> </div>

Abbildung 44 zeigt das DOM dieses HTML-Dokuments:

<html> <body> <div>

<div> nextSibling

<label>

<label>

<img>

<input>

<span>

<span>

<span>

<input>

„Benjamin“

„Hinteregger“

Abbildung 44: Document Object Model des HTML-Dokuments des Spiels

Den vollständigen Code des Spieles finden Sie im E-Learning-Kurs.

MMT Webprogrammierung 1

81

6.

jQuery

Was Sie wissen sollten
• Was „unobstrusive Javascript“ / „graceful degradability“ / „progressive enhancement“ bedeutet, 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

Was Sie können sollten
• Mit jQuery Teile einer Webseite aus- und einblenden und damit dynamische Formulare gestalten

Weitere Informationsquellen
• http://jquery.com

Vertiefungsmöglichkeiten
Erforschen Sie die Dokumentation und die Tutorials von jquery. Alternativ: befassen Sie sich statt dessen mit einer der anderen Libraries: o o o o o Prototype http://www.prototypejs.org/ Scriptaculous http://script.aculo.us/ Mootools http://mootools.net/ Dojo http://dojotoolkit.org/ YUI (von Yahoo) http://developer.yahoo.com/yui/

MMT Webprogrammierung 1 Die Library jQuery unterstützt das Prinzip der „graceful degradability“ – auch ohne Javascript sind

82

Webseiten mit jQuery immer noch gut verwendbar. Dieses Prinzip wird auch „progressive enhancement“ 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. Um zu testen, ob das wirkliche funktioniert kann man ganz einfach mit dem Firefox-AddOn QuickJava testen. Wie in Abbildung 45 gezeigt kann Javascript mit einem Klick deaktiviert werden.

Abbildung 45: 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> <!-- plain html here, no onclick or onload or ... --> </body>

Die URL http://code.jquery.com/jquery-latest.js kann man für alle Webseiten die online sind verwenden: hinter code.jquery.com steht nicht nur ein Server, sondern der Amazon Simple Storage Services (s3). Nur wenn man offline Entwickeln will muss man die Library wirklich herunterladen.

6.2 Besondere Javascript-Schreibwesen in jQuery
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")

MMT Webprogrammierung 1 Eine Funktion mit dem Namen $ wird mit einem Argument aufgerufen, das Argument ist das document-Objekt: $(document) Das Objekt mit dem Namen $ hat eine Methode get. Diese wird mit zwei Argumenten aufgerufen: $.get("backend.php", callback)

83

6.2.2 Funktionen als first-class citizens7
In Javascript können Funktionen zur Laufzeit erzeugt werden, in Variablen gespeichert werden, haben 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 kenne schon die Schreibweise für den Aufruf der Funktion: auch wenn die Funktion keine Argumente 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 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") }

7

http://en.wikipedia.org/wiki/First-class_citizen

MMT Webprogrammierung 1 Alternativ eine Schreibweise ohne Namen, die Funktion wird sofort in der Variable f gespeichert:
f = function() { alert("ich habe keinen namen"); };

84

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 aufgerufen werden soll wenn die Webseite vollständig geladen ist:
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. Statt dessen 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 erfolgreich 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-User so ;-)

6.3 Selektieren und Manipulieren mit jQuery
jQuery verwendet die Schreibweise der CSS-Selektoren um Nodes des DOM auszuwählen:
$("a") $("h1") $("p.extra") /* alle A-Tags */ /* alle Überschriften h1 */ /* alle p-tags mit klasse extra */

jQuery definiert noch ein paar zusätzliche Selektoren8, die es in CSS (noch) nicht gibt:
$("tr:even") $("p:contains('Warnung')") $(":checkbox") /* Alle geraden Zeilen der Tabelle */ /* alle Absätze die die Zeichenkette Warnung enthalten */ /* Alle input-Tags vom typ checkbox */

8

http://docs.jquery.com/Selectors

MMT Webprogrammierung 1

85

Die Selektion allein verändert die Webseite noch nicht. Dafür bietet jQuery eine Reiche von Manipulations-Funktionen an. Diese können direkt an die Selektions-Funktion geschreiben werden: die Selektions-Funktion gibt ein Objekt mit entsprechenden Methoden zurück:
$("a").addClass("wichtig"); $("h1").append(":"); $("h1").prepend("Titel:"); $("p.extra").hide(); /* alle A-Tags erhalten die Klasse wichtig */ /* in Überschriften h1 wird ein Doppelpunkt angefügt */ /* --||-- wird vorne ‚titel:’ eingefügt */ /* alle p-tags mit klasse extra werden versteckt */

6.4 Interaktion mit jQuery
jQuery bietet für die verschiedenen Events eigene Methoden an, das erste Argument ist dabei immer die Funktion, die aufgerufen werden soll. Hier kommen meist anonyme Funktionen zum Einsatz:
$("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 Überschrift versteckt bzw. angezeigt werden soll:
<h2 class="more">Vertiefendes Studium</h2> <div class="extra"> <p>Das Schwerpunktstudium Vertiefung ermöglicht den Erwerb hoch spezialisierter Qualifikationen 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 Kreativwirtschaft.</p> </div>

Dazu das vollständige Javascript-Programm mit jQuery:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $(".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 gefundenen Tag wird der befehl toggle() angewandt.

MMT Webprogrammierung 1

86

7.

AJAX und Ausblick

Was Sie wissen sollten
• • Was AJAX bedeutet (jenseits von Putzmittel und Fußball) Was asynchron in der Netzwerk-Programmierung bedeutet

Was Sie können sollten
• Mit jQuery einen Teil der Webseite mit AJAX (nach-)laden

Weitere Informationsquellen
• http://de.wikibooks.org/wiki/AJAX

MMT Webprogrammierung 1

87

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 verwendet9. 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 46 gezeigte Eingabefeld: schon während des Eintippens eines Suchwortes wird eine Anfrage an den Webserver geschickt. Dieser antwortet mit einer Liste von vorgeschlagenen Namen. Diese Liste wird mit Javascript (unter Verwendung der DOM) in einer <div> unterhalb des Eingabefelds angezeigt:

Abbildung 46: Vorschläge für die Eingabe werden über AJAX geladen

Mit AJAX wird hier eine HTTPAnfrage 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, aber die UserIn kann weiterhin mit der Webseite interagieren. Erst wenn die Antwort des Servers vorliegt wird die normale Darstellung der Seite kurz unterbrochen und ein JavascriptProgramm fügt die Daten in die Seite ein.

9

http://www.adaptivepath.com/publications/essays/archives/000385.php

MMT Webprogrammierung 1 Auf der Ebende des Programm-Codes sieht der unterschied zwischen synchron und asynchron so aus:
Befehl1(); Befehl2(); Antwort = asynchron_laden(url); Befehl3(); Befehl4();

88

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); Befehl3(); 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.2.1

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.

MMT Webprogrammierung 1
<html> <head> <title>AJAX counter</title> <script src="jquery.js"></script> <script> $(document).ready(function(){ $("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>

89

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.3 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 YahooWebseite, 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:

MMT Webprogrammierung 1
<?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 weather.yahooapis.com.</error>"; } else { echo "$xml"; } ?>

90

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><!-- api3.weather.ac4.yahoo.com uncompressed Mon Jan 19 13:23:31 PST 2009 -->

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 http://l.yimg.com/a/i/us/we/52/33.gif http://l.yimg.com/a/i/us/we/52/34.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 HTMLFormat sind kann man sie wieder mit jQuery behandeln: den Tag <yweather:condition> auswählen und aus dem Tag die Attribute temp und code auslesen:

MMT Webprogrammierung 1
cond = $("yweather\\:condition", data); temp = cond.attr("temp"); code = cond.attr("code");

91

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"; } else if ( temp < 20 ) { color="yellow"; } else if ( temp < 30 ) { 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"; } else if ( temp < 10 ) { color="green"; } else if ( temp < 20 ) { color="yellow"; } else if ( temp < 30 ) { color="orange"; } else { color="red"; } $("body").css("background-color",color); }

MMT Webprogrammierung 1

92

7.4 Ausblick
Sie haben den Umgang mit HTML, CSS und Javascript erlernt. Wenn Sie die Übungsbeispiele selbstständig gelöst haben und hin und wieder eine eigene Variante programmiert haben, dann sollten Sie jetzt genug Übung haben um den client-seitigen Teil einer Web-Applikation selbstständig zu planen und umzusetzen. Wie kann es nun weiter gehen? Was können sie als nächstes lernen? 1. Übung, Übung, Übung. Je mehr sie programmieren, desto besser werden Sie. Sie werden schneller Lösungswege finden, Sie werden kürzere, übersichtlichere Programme schreiben, Sie werden Programme schreiben die sich leichter adaptieren und erweitern lassen. 2. Programmieren am Server. Wie Sie an den AJAX-Beispiele in diesem Kapitel gesehen haben stoßen Sie bald an die Grenzen der Webprogrammierung wenn Sie nicht auch eine Sprache am Webserver beherrschen. PHP bietet sich als einfachste und am weitesten verbreitete Sprache am Server an. 3. Andere Technologien beobachten. Verlieren Sie nicht die Alternativen zu HTML+Javascript aus den Augen! Flash / Actionscript / Flex von Adobe sind eine Alternative, Silverlight von Microsoft ist noch nicht sehr funktionstüchtig, könnte sich aber entwickeln. Diese Alternativen sollten Sie auf jeden Fall im Auge behalten!

MMT Webprogrammierung 1

93

Quellenverzeichnis

FREEMAN, Elisabeth(2006): HTML mit CSS & XHTML von Kopf bis Fuß. O'Reilly. ISBN 3897214539. 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 gewappnet mit CSS und XHTML. Addison-Wesley, München. ISBN 382732629X.

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.

MMT Webprogrammierung 1

94

Stichwortverzeichnis
Absende-Button Bildfeld Button Checkbox Datei-Upload fieldset legend Liste (Eingabefeld) Menü 58 58 58 57 59 59 59 57 57 Passwort-Feld Radiobutton Radiobuttons Textbereich Textfeld Unsichtbares Feld URL Verstecktes Feld Zurücksetzen-Button 57 57 58 57 56 58 8 58 58

Master your semester with Scribd & The New York Times

Special offer for students: Only $4.99/month.

Master your semester with Scribd & The New York Times

Cancel anytime.