mmt webprogrammierung 1 im winter semester 2010

Web Programmierung 1

Ein Skriptum zu den gleichnamigen Lehrveranstaltungen

im 1. Semester von MultiMediaTechnolgy

Version für das Wintersemester 2010/11,

engültige Version vom 9.Dezember 2010

Überblick

1. Web Basics 6

2. CSS Basics 28

3. CSS für Layout und Interaktion + URLs 41

4. Formulare, erstes Javascript 67

5. Javascript und DOM 83

6. jQuery 94

7. Anhänge 102

MMT Webprogrammierung 1 2

Ziele

Diese Lehrveranstaltung hat mehrere unabhängige Ziele. Am Ende des 1.Semesters können Sie sa-

gen:

• Ich kann Webseiten erstellen, und habe auch schon eine kleine Web-Site vollständig umge-

setzt.

• Ich verstehe wie das Web funktioniert, kann HTML5, CSS3, Javascript und PHP Code lesen,

Fehler suchen und neue Entwicklungen einordnen. Ich kenne die Problemstellung der Brow-

serkompatiblität.

• Ich kenne die Arbeitsteilung in einem Web-Projekt und kann meinen (technischen) Teil bei-

tragen.

• Ich kann die Qualität einer Webseite beurteilen. Ich kenne verschiedene Qualitäts-Kriterien

und kann sie gegeneinander abwägen.

• In meiner Homepge zeige ich mehrere kleine Web-Projekte.

Diese Lehrveranstaltung führt im 2.Semester mehrere Themen, die im ersten Semester noch separat

behandelt wurden zusammen: Datenbanken, UNIX, Webprogrammierung mit HTML, CSS, Javascript

werden zusammen mit der Programmiersprachen PHP eingesetzt um Web-Applikationen zu bauen.

Am Ende des zweiten Semesters können Sie sagen:

• Ich kann Webapplikationen erstellen, und habe auch schon eine kleine Applikation inklusive

Datenbank vollständig umgesetzt.

• Ich kenne die Arbeitsteilung in einem Web-Projekt und kann meinen (technischen) Teil mit

Javascript, PHP und MySQL beitragen.

• Ich kann Qualitätsansprüche an eine Webapplikation: Ich kenne die REST-Prinzip, ich kenne

Sicherheitsprobleme und Lösungsansätze, ich kann AJAX einsetzen.

• In meinem Blog zeige ich mehrere Artikel über Aspekte einer Web-Applikation.


Inhaltsverzeichnis

1. Web Basics 6

1.2 Kurze Geschichte des World Wide Web 7

1.3 Drei Standards definieren das Web 11

1.3.2 URL 14

1.3.3 HTTP 14

1.4 HTML Basics 16

1.4.1 Sonderzeichen 16

1.4.2 HTML-Tags 17

1.4.3 Whitespace 17

1.4.4 Attribute 17

1.4.5 Kompatibilität 18

1.4.6 Text formatieren 19

1.4.7 Bilder 21

1.4.8 Links 22

1.4.9 Gesamt-Struktur einer Webseite 22

1.4.10 Listen 23

1.4.11 Tabellen 23

1.5 Upload und Tools 24

1.5.1 Validator 24

1.5.2 Upload 25

2. CSS Basics 28

2.1 Kurzvorstellung von Stylesheets 29

2.1.1 Schriftart 29

2.1.2 Schriftgröße 30

2.1.3 Absätze 30

2.1.4 CSS erforschen mit Firebug 30

2.2 Geschichte der Cascading Style Sheets 31

2.2.1 Stylesheet Syntax 32

2.2.2 Klassen, IDs, SPANs und DIVs 33

2.2.3 Maßeinheiten in Stylesheets 35

2.3 Graceful Degradation 38

3. CSS für Layout und Interaktion + URLs 41

3.2 Rahmenbedingungen für Layout 42

3.2.1 Auflösung 42

3.2.2 Brutto-Fläche vs. Netto-Fläche 43

3.2.3 Entwurf für mehrere Auflösungen 44

3.2.4 Bilder 47

3.2.5 Schriftgröße 49

3.3 CSS für Layout 50


3.3.1 Width und Auto 51

3.3.2 Float 52

3.3.3 Absolute Positionierung 53

3.4 Navigationsmenü mit CSS 54

3.4.1 Navigationsmenü wiederverwerten mit PHP 55

3.4.2 :hover und :focus 56

3.4.3 Dropdown Menü mit Hover 58

3.5 CSS Selektoren 59

3.6 URLs 62

3.6.1 Absolute und relative URLs 62

3.6.2 Konfiguration des Webservers und URLs 63

3.6.3 Pragmatische Tipps zu Dateienamen und URLs 66

4. Formulare, erstes Javascript 67

4.2 Formulare 67

4.2.1 Eingabefelder 68

4.2.2 Interaktionsmöglichkeiten 71

4.3 Daten absenden 72

4.3.1 Daten an E-Mail senden 72

4.3.2 Daten senden mit Methode GET 73

4.3.3 URL als Programm-Schnittstelle 74

4.4 Formular und PHP 75

4.5 Formular und Javascript 76

4.5.1 Javascript Einbetten 76

4.5.2 Popup-Fenster 77

4.5.3 Formulare 77

4.5.4 document.write 77

4.5.5 Ereignisse und Ereignisgesteuerte Programmierung 79

4.5.6 Formular prüfen 81

5. Javascript und DOM 83

5.2 Hintergründe 84

5.2.1 Javascript und Java 84

5.2.2 Geschichte von Javascript 85

5.2.3 Document Object Model 86

5.3 Basic Javascript 86

5.3.1 Einbindung von Javascript 87

5.3.2 Syntax von Javascript 89

5.3.3 DOM Beispiel 93

6. jQuery 94

6.2 Besondere Javascript-Schreibwesen in jQuery 96

6.2.1 Mein Name ist Dollar 96

6.2.2 Chaining – eine Kette von Methodenaufrufen 96


6.2.3 Funktionen als first-class citizens 97

6.2.4 Anonyme Funktionen 98

6.3 Selektieren und Manipulieren mit jQuery 98

6.4 Interaktion mit jQuery 99

6.5 Formulardaten Prüfen mit jQuery 100

7. Anhänge 102

7.1 Quellenverzeichnis 102

7.2 Stichwortverzeichnis 104


1. Web Basics

Der erste Termin der Lehrveranstaltung klärt organisatorische Fragen, handelt die Ursprünge des

Web, stellt wichtige Fachbegriffe vor und gibt einen Einstieg in HTML

Was Sie wissen sollten

• Wer das World Wide Web erfunden hat, wer die Standards des Webs definiert

• Wie die drei Standards HTTP, URL und HTML zusammenspielen und das Web definieren.

• Wie eine HTTP Anfrage funktioniert

• Wie ein Dokument im HTML 5 aufgebaut ist

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

• Welche Methoden des Uploads es gibt

Was Sie können sollten

• Ein einfaches Dokument im HTML 5 erstellen, einen vorgegebenen Text in HTML 5 umwan-

deln

• Die Korrektheit des HTML 5 Codes mit dem Validator des World Wide Web Consortium

überprüfen

• Fehler in einem HTML 5 Dokument ausbessern, bis es valide ist

• Dokumente auf einen Webserver hochladen

Tools die Sie in diesem Kapitel installieren und ausprobiert sollten

• Desktop Webbrowser:

− Firefox

− Microsoft Internet Explorer (msie)

− Opera

− Safari (nur auf Mac, iphone, ipad)

• „exotische“ Webbrowser:

− Lynx

− Opera Mobile (nur auf Handys)


− Webbrowser Ihres Handys, Ihrer Spielkonsole, …

• Firefox AddOn FireFTP

• Firefox AddOn Web Developers Toolbar

• Secure File Transfer Client

Weitere Informationsquellen

• Selfhtml. http://de.selfhtml.org/

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

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

1.2 Kurze Geschichte des World Wide Web

Viele moderne Erfindungen sind das Ergebnis von Teamarbeit und langen Planungsprozessen. Nicht

so das World Wide Web: es geht auf eine einzelne Person zurück. Tim Berners-Lee, gebürtiger Eng-

länder und studierter Physiker, hat es in den Jahren 1989, 1990, 1991 als EDV-Mitarbeiter am CERN

in der Schweiz entwickelt.

Zu dieser Zeit – Anfang der 90er Jahre – war das Internet ein rein akademisches Projekt mit sehr ge-

ringen Bandbreiten, wie folgendes „fact sheet“ aus der Zeit dokumentiert:

Date: Fri, 20 Mar 1992 13:50:09 From: [email protected] (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 USEnet Newsgroups – ähnlich den heutigen Diskussionsforen – als

wichtigste Form des Datenaustausches verwendet, meist im Textmodus ohne grafische Oberfläche.


Abbildung 1: Der erste grafische Webbrowser, Tim Berners-Lee, die erste Webseite des CERN im Line mode browser

Berners-Lee definierte als Eckpunkte die technischen Standards des Web (siehe nächstes Kapitel) und

programmierte – gemeinsam mit KollegInnen – die erste Software. In Abbildung 1 ist links Tim Ber-

ners-Lee mit dem ersten grafischen Webbrowser abgebildet. Dieser Browser ist gemeinsam mit dem

Betriebssystem NeXT verschwunden. Rechts ist ein Screenshot des Line Mode Browsers zu sehen, der

die damalige Homepage des CERN anzeigt. Der Line Mode Browser funktionierte auch ohne Grafik.

Links konnten mit Nummern aufgerufen werden.

In dieser Lehrveranstaltung werden wir uns hauptsächlich mit der Technik des Web beschäftigen.

Verlieren Sie dabei nicht aus den Augen, wie wichtig das Web ist, und wie sehr es unsere Gesellschaft

schon verändert hat. Das Web ist heute überall:

Abbildung 2: das Web ist überall: vom ältesten zum neusten Gerät1

1 Bildquellen (alle unter cc): links http://www.flickr.com/photos/larskflem/95757299, rechts http://www.flickr.com/photos/brettpatterson/4808671776/,


Abbildung 3: das Web ist überall: in Bildung und Arbeit, 3. und 1. Welt2

Und das Web ist noch nicht "fertig erfunden".

Die Erfindung der maschinellen Massen-Produktion von Büchern durch Johannes Gutenberg im

15.Jahrhundert war nur der Auslöser,schaffte nur die Voraussetzung für weitere Erfindungen und

große gesellschaftliche Veränderungen: Massenhafte Verbreitung der Bibel, Reformation, politisches

Pamphlet, Revolution, wissenschaftliche Publikation, ... .

Die Erfindung des Web um 1990 herum ist wahrscheinlich eine ähnlich fruchtbare Erfindung, die die

Voraussetzung für viele Folge-Erfindungen schafft. Die gesellschaftlichen Auswirkungen können wir

noch nicht absehen, wir sind mittendrin:

1993 2010

Die interaktive Landkarte war eine sehr frühe An–wendung des Web. Heute ist eine Reise ohne diese Karten kaum noch vorstell-bar. Was kommt nach Streetview?

2 Bildquellen (alle unter cc): inks http://www.flickr.com/photos/pieter-bidia/2925661885/, rechts http://www.flickr.com/photos/sheepguardingllama/2834764584/


1995 2010

Bücher über das Web zu verkaufen erscheint im Nach-hinein als ganz einfa-che Idee. Es hat den Buchmarkt weltweit verändert, und wird es weitet tun.

2002 2010

Im Jahr 2000 war eine Enzyklopädie noch das teuer Be-zahlte Werk von wenigen ExpertIn-nen. Die Erfindung der Wikipedia hat nicht nur den Markt für Enzyklopädien zerstört, sondern auch unsere Vorstel-lung wie Wissen gesammelt werden kann völlig verän-dert.

2004 2010

Dass ich am Web speichern kann wer meine FreundInnen sind, um dann mit diesen FreundInnen kurze "Status-meldungen" auszu-tausche - das wurde erst im 21.Jahrhundert er-funden. Wie geht es weiter?


1.3 Drei Standards definieren das Web

Für diese Lehrveranstaltung ist eine technische Sicht auf das World Wide Web die relevante. Das

World Wide Web ist also ein verteiltes (Client/Server) Informationssystem, das durch folgende drei

Standards in der jeweils aktuellen Form definiert wird:

• URL (Uniform Resource Locators)

nach RFC 1738 - http://www.w3.org/Addressing/rfc1738.txt

• HTTP (Hypertext Transfer Protocol)

nach RFC 2616 - http://www.w3.org/Protocols/rfc2616/rfc2616.html

• (X)HTML (Hypertext Markup Language)

Hier befinden wir uns gerade im Übergang von XHTML auf HTML 5. Noch gibt es keinen end-

gültigen Standard von HTML 5. http://www.w3.org/standards/techs/html

Die entsprechenden Dokumente finden Sie unter den oben angebenen URLs am Webserver des

World Wide Web Consortiums.

Rund um diese drei Standards ordnen sich weitere wichtige Begriffe an:

Client/Server

Das Client/Server Prinzip ist ein allgemeines Prinzip wie Dienste in einem Computernetzwerk aufge-

baut sein können: Ein Server ist ein Computer der einen bestimmten Dienst anbietet, ein Client ist

der „Kunde“, also der Computer der den Dienst in Anspruch nimmt.

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

Client Server

Web Webbrowser – lädt Webseiten vom Sever

und zeigt sie am Bildschirm an

Webserver – liefert auf Anfrage die gespei-

cherten Webseiten

E-Mail E-Mail Programm – lädt E-Mails vom Ser-ver, zeigt sie an, kann neue E-Mails an ei-

nen Server schicken der sie zustellt, …

Mailserver – speichert E-Mail in verschie-denen Postfächern, leitet E-Mail weiter (an

den Server der EmpfängerIn)

FTP FTP-Client – lädt Dateien von einem Server

runter oder auf einen Server rauf

FTP-Server – speichert Dateien

Eine Alternative zu Client/Server ist Peer-zu-Peer. Dabei sind alle beteiligten Computer gleichberech-

tigt, es gibt keine verschiedenen Rollen. Nach diesem Prinzip funktionieren Datei-Tauschbörsen.


Webbrowser

Ein Webbrowser, oder kurz Browser, ist ein Programm, das bei Eingabe einer URL über HTTP eine

HTML-Webseite laden und anzeigen kann, es ist also der Client zum World Wide Web.

Es gibt sehr viele verschiedene Webbrowser. Abbildung 4 zeigt drei davon: den Browser „Mosaic“,

der im Jahre 1993 als zweiter Webbrowser mit grafischer Oberflächen stark zur Verbreitung des

World Wide Web beigetragen hat, und die Browser Opera und Mozilla in den Versionen, die im Jah-

re 2004 verwendet wurden.

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

Alle eben erwähnten Browser haben gemeinsam, dass sie auf einem typischen „Büro-

Computer“ eingesetzt werden, einem Computer mit grafischer Oberfläche und einem Farb-Monitor.

Es gibt aber auch „exotischere“ Browser. Abbildung 5 zeigt den Browser lynx, der nur Text darstellt,

aber keine Bilder. Daneben sehen Sie eine „Braille Ausgabezeile“, ein Gerät, das eine Zeile Text in

eine Zeile Blindenschrift übersetzt. Mit diesem Webbrowser und diesem Ausgabegerät können Blin-

de im Web surfen.

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

Abbildung 6 zeigt Browser auf verschiedenen mobilen Geräten:


Abbildung 6: Browser auf mobilen Geräten: Handys und iPad, 2010

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

Abbildung 7: Ein Browser zeigt eine lange Webseite an

Website

Als Webseite wird also ein Dokument bezeichnet. Verwechseln Sie diesen Begriff nicht mit dem eng-

lischen Wort Website. Eine Website besteht aus mehreren Webseiten auf einer gemeinsamen Do-

main, die zusammen gehören und untereinander verlinkt sind. Achtung: es gibt kein Wort Webside.


1.3.2 URL

Eine URL ist die Adresse eines Dokuments am Web oder in einem anderen Online-Informations-

system. Ein Beispiel:

http://kurse.horus.at:8080/2006-ss/www-mm/index.html#literatur

Diese URL zerfällt in 4 Teile:

http Übertragungsprotokoll

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

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

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

Literatur Textmarke innerhalb des Dokuments – wird vom Browser interpretiert wenn das Dokument darge-

stellt wird

Im Zusammenhang mit Web-Formularen werden wir oft mit URLs zu tun haben die Parameter ent-

halten:

http://www.google.com/search?q=schokolade&ie=utf-8&oe=utf-8

Mit den Zeichen ? & = werden hier Parameter an die URL angefügt.

HTTP-URLs sind nicht die einzigen URLs, ein Beispiel mit einem anderen Übertragungsprotokoll:

mailto:[email protected]

1.3.3 HTTP

Das Hypertext Transfer Protocol ist ein relativ simples Protokoll, das immer TCP3-Verbindungen ver-

wendet. Alle Aktivität wird vom Client (=Browser)initiiert. In der einfachsten Form sieht HTTP so aus

(hier wieder am Beispiel der URL http://kurse.horus.at/2006-ss/www-mm/index.html#literatur):

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


1. Eine URL wird in den Browser eingetippt, oder ein Link wird im Browser angeklickt

2. Der Browser analysiert die URL und ermittelt daraus den Domain Namen des Webservers

(kurse.horus.at), löst diese über DNS zur IP-Adresse auf (193.80.109.212)

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

4. Er sendet eine http-Anfrage:

„GET /2006-ss/www-mm/index.html HTTP/1.0\n\n“

5. Der Webserver nimmt die Anfrage entgegen und analysiert sie. Meistens interpretiert er sie

als Aufforderung, eine bestimmte Datei von der Platte zu lesen

6. Der Webserver schickt die http-Antwort an den Browser, diese besteht aus einem Sta-

tuscode, z. B. „200 OK\n\n“, gefolgt vom Inhalt der Datei index.html.

7. Der Browser nimmt das Dokument in Empfang und stellt es geeignet dar

8. Der Browser scrollt das Dokument bis zur Textmarke literatur

9. Der Browser beendet die TCP-Verbindung

Die nächste Anfrage des Clients kann sich an einen anderen Server, oder wieder an denselben Server

richten. Die nächste Anfrage, die der Server beantwortet, kann vom selben Client kommen, oder von

einem anderen Client. Keiner der beiden (Client und Server) muß speichern mit wem er gerade Daten

ausgetauscht hat, um die nächste Anfrage durchführen/beantworten zu können. Das Protokoll ist

also stateless. Dadurch ist es sehr einfach einen Server zu programmieren.

Das ist nur die einfachste Version des Protokolls, mit Proxies, Caching und Keep-Alive wird es kompli-

zierter.


1.4 HTML Basics

In der Übung werden wir HTML 5 (und teilweise 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.

HTML hat sich in den ca. 20 Jahren seines Bestehens weit entwickelt. Die Version 5, die wir verwen-

den, ist noch nicht als Standard ausdefiniert, und noch nicht von allen Browsern umgesetzt. Aber es

ist weit genug entwickelt um es zu lernen, in einem Jahr werden Sie es sicher anwenden.

In den letzten 10 Jahren wurde auch XHTML neben HTML verwendet. Das X von XHTML steht für die

Kompatibilität mit XML. Die Dateien haben dabei weiterhin die Endung .htm oder .html haben, oder

.xhtm, .xhtml. Im Unterschied zu HTML ist XHTML strenger in der Schreibweise. Am Web finden Sie

sowohl Tutorials zu HTML als auch zu XHTML – lassen Sie sich davon nicht verwirren!

(X)HTML-Dateien (Hyper Text Markup Language) bestehen aus reinem Text, in unserem Falle entwe-

der aus Text im Format ISO 8859-1 (Latin-1)4 oder im Format utf-8. Abbildung 8 zeigt wie dieses

Format im Windows Notpad / Editor gesetzt wird: ISO 8859-1 wird hier als ANSI bezeichnet.

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

< <

> >

& &

Folgende Character Entities können Sie vermeiden, indem Sie das Zeichen selbst im Code verwenden:

4 Das ist der ASCII-Zeichensatz, ergänzt um die in westeuropäischen Sprachen nötigen Zeichen wie üöä ÜÖÄ ß é ñ


Gewünschtes Zeichen Character Entity

Ä Ä

Ä ä

ß ß

1.4.2 HTML-Tags

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

1. Tags sind zwischen spitzen Klammern eingeschlossen.

2. Zu (fast) jedem "Anfangs-Tag" gibt es einen "End-Tag", der sich nur durch den Schrägstrich

vom Anfangs-Tag unterscheidet.

Z. B. <p>hier der Absatz</p>.

3. (in XHTML) müssen "alleinstehende" Tags mit einem Schrägstrich am Ende geschrieben wer-

den: <br />

In XHTML werden Tags immer klein geschrieben, bei HTML ist die Groß- oder Kleinschreibung egal.

Die wichtigsten Tags werden weiter unten vorgestellt.

1.4.3 Whitespace

Sogenannter "whitespace" - das sind mehrere Leerzeichen, Tabulatoren und Zeilenumbrüche hinter-

einander – wird vom Browser völlig ignoriert. Ob Sie also in Ihrer HTML-Datei ein Leerzeichen oder 7

Leerzeilen einfügen macht keinen Unterschied. (gar kein Leerzeichen oder ein Leerzeichen macht

schon einen Unterschied) Die folgenden beiden Dokumente sind also äquivalent:

<p>Halli Hallo</p> <p>

Halli

Hallo

</p>

Nur die Tags beeinflussen die Darstellung der Webseite. Sie müssen den Tag <br /> verwenden um

einen Zeilenumbruch auf der Webseite zu erzeugen – dies ist aber nur selten sinnvoll, da der Browser

einen automatischen Zeilenumbruch durchführt.

1.4.4 Attribute

Manche Tags können Attribute enthalten. Ein Beispiel ist der Tag <img /> der ein Bild in die Seite

einfügt (Englisch: Image). Die wichtigsten Attribute von <img /> sind src (von Source = Quelle) und

alt (Alternative Darstellung).


<img src="neu.gif" alt="Das ist neu!" />

Es ist egal, in welcher Reihenfolge Sie die Attribute schreiben:

<img alt="Das ist neu!" src="neu.gif" />

oder

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

Das Attribut bli, welches nicht zu HTML gehört, also kein Browser kennt, wird wie andere unbekann-

te Attribute einfach ignoriert.

Der Wert eines Attributes muß in Anführungszeichen geschrieben werden. (in HTML gab es eine

Ausnahme für Werte die keine Leerzeichen enthalten (wie z. B. Zahlen), diese konnten auch ohne

Anführungszeichen geschrieben werden, bei XHTML ist das verboten)

<img alt="Das ist Neu!" src="neu.gif" width=50 height="15" />

ACHTUNG: ein häufiger Fehler ist es, das zweite Anführungszeichen zu vergessen:

<img alt="Das ist neu!" src="neu.gif />

1.4.5 Kompatibilität

Jeder Browser (egal ob Firefox, Microsoft Internet Explorer, Opera,. . . ) kann jedes HTML-Dokument

darstellen. Mit jedem Editor (egal ob Dreamweaver, Frontpage, GoLive,. . . ) kann jedes HTML-

Dokument bearbeitet werden. Neue Tags, die z. B. ein Browser nicht erkennt, sind zu ignorieren – es

gibt keine Fehlermeldungen!

Wenn das W3C in HTML Version 21 beispielsweise den neuen Tag <jump> (hüpfenden Text) einführen

würde, können Sie diesen Tag auf Ihrer Webseite verwenden. Der Text würde jedoch nur in den neu-

esten Versionen der Browser (die schon die Version 21 kennen) hüpfend dargestellt. In älteren Brow-

sern wird der Tag <jump> ignoriert:

Code Ein älterer Browser interpretiert das als:

<p>Dies ist meine erste

<jump>supercoole</jump> Webseite!!!!

</p>

<p>Dies ist meine erste supercoole Websei-

te!!!!</p>

Bevor Sie also einen neuen Tag einsetzen, sollten Sie sich darüber klar sein, welche Versionen der

Browser diesen Tag darstellen und wie viel Prozent Ihres Zielpublikums schon eine passende Brow-

ser-Version benutzen. Meist können Sie eine Seite so gestalten, dass auch mit älteren Browsern der

gesamte Inhalt lesbar ist.


Schlecht Besser:

<p>Zu den hüpfenden Terminen sind noch

Plätze im Kurs frei:

</p>

<ul>

<li><jump>Montag</jump>

<li>Dienstag

<ul>

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

mation verloren!

Auf allen Browsern ist erkennbar zu welchen Ter-

minen noch Plätze frei sind.

Diese Herangehensweise an Neuerungen nennt man „graceful degradation“ – davon werden Sie

noch viel hören.

Hinweis: Der <jump>–Tag ist ein Scherz, den gibt es nicht wirklich, und wird es hoffentlich nie geben.

1.4.6 Text formatieren

Wir unterscheiden zwischen HTML-Tags die Blöcke definieren, und solchen die das nicht tun. Block-

bildende Tags beanspruchen immer einen rechteckigen Bereich bei der Ausgabe, nicht blockbildende

Tags tun das nicht.

Abbildung 9: Darstellung von blockbildenden und nicht-blockbildenden Tags

Der em-Tag ist nicht-blockbildend und wird im zweiten Absatz auf zwei Zeilen umgebrochen.


Formate, die Text-Blöcke definieren:

Normaler Fließ-Text <p>Text text text, text text. Text text text,

text text. Text text text, text text. Text

und text text, text text. </p>

Zentrierter Text <p style="text-align:center;">Text text text,

text text. Text text text, text text. Text

text text, text text. Text und text text,

text text. </p>

Haupt-Überschrift (1. Ebene) <h1>Überschriftstext</h1>

Unter-Überschrift (2. Ebene) <h2>Überschriftstext</h2>

Unter-Überschrift (3. Ebene) <h3>Überschriftstext</h3>

Bereich mit Navigations-Menü, Links <nav>

<a href="index.html">Home</a>

....

</nav>

Weitere Tags zur Strukturierung der Seite <header> .... </header>

<footer> .... </footer>

<aside> .... </aside>

Block-Zitat (eingerückt) <blockquote>Alle meine Entchen schwimmen auf

dem See</blockquote>

Format für kleinere Text-Abschnitte

Diese müssen Sie innerhalb eines Blocks verwenden. Diese Formate werden unterschieden in logi-

sche und physische Elemente. Die logischen geben die genaue Darstellung nicht vor.

Sehr stark betonter Text (meist fett) Eine <strong>wichtige</strong> Sache

Betonter Text (meist kursiv) und eine <em>interessante</em> Sache

Physische Elemente geben die genaue Darstellung vor. Das sind eigentlich „altmodische Tags“, be-

sonders der font-Tag wurde durch Stylesheets vollständig ersetzt, und sollte möglichst nicht mehr

verwendet werden. (Sie werden ihn aber in „alten“ Dokumenten noch finden):

Fettgedruckter Text Eine <b>fette</b> Sache

Kursiver Text und eine <i>schräge</i> Sache

Text in einer bestimmten Schriftart <font face="Arial">Text</font>

Text in einer bestimmen Farbe <font color="red">rot</font>

Hier die moderne Schreibweise mit Stylesheets:

Text in einer bestimmten Schriftart <span style="font-family:Arial;">Text</span>

Text in einer bestimmen Farbe <span style="color:red;">rot</span>


1.4.7 Bilder

Bilder werden in separaten Dateien gespeichert, in der HTML-Datei erfolgt nur ein Verweis auf die

Bilddatei. Als Attribut src im img-Tag können Sie eine absolute oder relative URL angeben:

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

atl="Google" />

Bild (URL relativ) <img src="neu.gif" />

Bild mit Ersatztext <img src="neu.gif" alt="neu" />

Bild mit Größenangabe <img width=10 height=5 src="neu.gif" alt="neu" />

Bild nach links (Text fließt

rechts vorbei)

<img src="neu.gif" style="float:left;" alt="neu" />

Bild ohne Alternativtext

(nur Dekoration)

<img src="zierleiste.gif" alt="" />

Für Blinde, Suchmaschinen, Browser die keine Bilder darstellen können, u.s.w. gibt man für jedes Bild

einen Alternativtext (Attribut alt) an. Mit dem AddOn „Web Developer“ kann man testen wie die

Seite mit ALT statt Bildern aussieht. Abbildung 10 zeigt die Verwendung dieses Features am Beispiel

eines Wetterberichts.

Abbildung 10: Wetterbericht mit Bildern und ohne Bilder (nur ALT-Texte)

Als Datenformate für <img>-Bilder werden nur Pixel-Formate von vielen Browsern unterstützt:


gif Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). „animiertes Gif“ enthält meh-

rere Bilder, die der Reihe nach angezeigt werden (Daumenkino).

Besonders geeignet für Bilder mit klaren Kanten, einfärbigen Flächen, wenigen Farben, z.

B. Comics, Logos.

jpg Millionen von Farben, variable Kompression, keine Transparenz.

Besonders geeignet für Bilder mit Farbverläufen, z. B. Photos.

png Nachfolge-Format für gif, Alpha-Transparenz, diese wird aber von MSIE erst ab MSIE 7

unterstützt.

Tabelle 1: Bildformate im Vergleich

Es kann jedes Bild in allen drei Formaten gespeichert werden. Ideal wäre, das Format auszuwählen,

in dem das Bild nichts an Qualität verliert, und die Dateigröße möglichst gering ist.

Zwei weitere Arten Bilder einzubauen werden wir später genauer betrachten: Mit dem canvas-Tag

und Javascript kann man (Pixel-)Bilder zeichnen. Mit dem svg-Tag kann man Vektorbilder direkt in die

Seite einbetten.

1.4.8 Links

Als Attribut href des Linkskönnen Sie eine absolute oder relative URL angeben:

Link zu Webseite (absolute URL) <a href="http://cnn.com">zu CNN</a>

Link zu Webseite im selben Ordner

(relative URL)

<a href="seite2.htm">mehr</a>

Link zu E-Mail Adresse <a href="mailto:[email protected]">Mail</a>

Bild als Link <a href="seite2.htm"><img src="mehr.gif"

alt="zur Seite 2" /></a>

1.4.9 Gesamt-Struktur einer Webseite

Eine (X)HTML Seite hat ein Grundgerüst. aus DOCTYPE, html, head und body. Hier am Beispiel von

HTML5:


<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Eine Webseite</title> </head> <body> Hier die Tags, die Sie schon kennen </body> </html>

Bei XHTML ist der DOCTYPE sehr viel komplizierter. Der meta-Tag für die Auswahl des Charactersets

ist ebenfalls komplizierter.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://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>Eine Webseite</title> </head> <body> Hier die Tags, die Sie schon kennen. </body> </html>

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

outs sind noch auf älteren Webseiten zu finden. Moderne Webseiten werden mit CSS-Layouts gestal-

tet (Siehe Kapitel 3. ).

1.5 Upload und Tools

Der HTML-Code ist fertig, aber damit ist die Arbeit noch lange nicht vorbei.

1.5.1 Validator

Um Fehler im HTML-Code zu finden reicht ein Webbrowser nicht aus. Wie oben beschrieben sind

Webbrowser sehr tolerant, was kaputten Code betrifft. Eine strenge Prüfung des HTML-Codes macht

der Validator des W3C: . http://validator.w3.org/

Abbildung 11: Der HTML-Validator des World Wide Web Consortiums

Die Fehlermeldungen des Validators muss man sorgfältig lesen, von oben nach unten durcharbeiten

und reparieren. Mit etwas Glück repariert man das erste Problem und viele Folge-Fehler fallen damit

auch weg.


Abbildung 12: Fehlermeldung des Validators

Die Fehlermeldung in Abbildung 12 geht auf einen Tippfehler zurück: der schließende Tag wurde

falsch geschreiben.

1.5.2 Upload

Die fertige Webseite muss auf einem Webserver veröffentlicht werden. In der FH stehen Ihnen zwei

Webserver zur Verfügung: auf www.users.fh-salzburg.ac.at und multimediatechnology.at.

Um die Daten vom eigenen Computer auf den Webserver zu laden gibt es verschiedene Methoden,

die wichtigsten sind FTP, WebDAV, SFTP. Für die Webserver der FH kann nur SFTP verwendet werden.

Bei jeder Upload-Methode brauchen Sie folgende Informationen: den Namen des Servers, Userna-

men, Passwort, in welchen Ordner Sie die Daten speichern, unter welcher URL die Daten im Web

sichtbar sind.

Der Server www.users wird von allen Studiengängen verwendet:

Upload-Methode SFTP

Name des SFTP-Servers www.users.fh-salzburg.ac.at

Username + Passwort FH Username + Passwort

Ordner bei Upload htdocs/

URL http://www.users.fh-salzburg.ac.at/~fhs666/

Der Server multimediatechnology.at ist auch unter den Namen multimediaart.at und mediacube.at

bekannt. Er wird nur von MMA+MMT verwendet. Wenn Sie auf diesem Server Webspace haben

möchten müssen Sie zuerst entscheiden welche URL Sie haben möchten und den Webspace dann

Bestellen. Wählen Sie eine URL für die Sie sich auch in 2 Jahren nicht schämen. Wenn Ihr Spitzname

z.B. "Doofie" ist sollten Sie trotzdem nicht doofi.multimediatechnology.at bestellen. Das Bestellfor-

mular finden Sie unter https://multimediatechnology.at/home/wunschdomain.php

Upload-Methode SFTP

Name des SFTP-Servers multimediatechnology.at

Username + Passwort FH Username + Passwort

Ordner bei Upload public_html/

URL eigene Subdomain, z.B. http://ichbinich.multimediatechnology.at/

Folgende Programme zum Upload sind in den FH-Labors installiert, bzw. können Sie selbst installie-

ren:

• Secure File Transfer Client: nur für SFTP


• FireFox: AddOn von Firefox, freie Software, können Sie selbst installieren

• Dreamweaver: Upload ist nach der Definition einer „Site“ möglich

Achten Sie beim Upload darauf, dass die Ordnerstruktur und die relative Position der Dateien beibe-

halten wird; nur dann funktionieren die relativen Links!

Dreamweaver und FireFTP bieten Hilfe beim Erhalt der Struktur. In Abbildung 13 wurde recht (am

lokalen Computer) eine Datei ausgewählt und dann der Button „Datei bereitstellen“ gedrückt.

Dreamweaver beachtet, dass die Datei lokal im Ordner html-ue1 liegt, und lädt Sie in den entspre-

chenden Ordner am Webserver hoch.

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

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


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

TEN �� BEARBEITEN �� ERWEITERT �� REMOTE-INFORMATIONEN) die richtige Konfiguration eintragen,wie in

Abbildung 15 gezeigt.

Abbildung 15: Bearbeiten der FTP-Information in Dreamweaver

Die anderen erwähnten Programme funktionieren sehr ähnlich.


2. CSS Basics


• Wie HTML und CSS zusammen hängen. Wie CSS Selektoren aufgebaut sind. Welche Schreib-

weisen und Maßeinheiten es in CSS für Farben, URLs und Größenangaben gibt.

• Wie das CSS Box Model funktioniert, wie der Zusammenhang zwischen margin, border und

padding ist.

• Welche Möglichkeiten zur Darstellung von Schrift, Absatz, Rahmen, Hintergrundfarbe und

Hintergrundbilder CSS ungefähr bietet. Wie Sie die genaue Schreibweise der dafür notwendi-

gen CSS-Deklarationen nachschlagen können


• Ein einfaches Stylesheet für ein HTML-Dokument erstellen. Bei Vorgabe einer bestimmten vi-

suellen Darstellung und eines HTML-Dokuments ein geeignetes Stylesheet erstellen, das zu

dieser Darstellung führt

• Mit Hilfe von Firebug oder durch Lesen des Codes herausfinden welche CSS-Regeln zu einer

bestimmten Darstellung in einer (fremden) Webseite führen

• Die Korrektheit des CSS-Codes mit dem CSS-Validator des World Wide Web Consortium

überprüfen. Fehler in einem CSS-Dokument ausbessern bis es valide ist


• CSS Zen Garden. http://csszengarden.com/

• CEDERHOLM,Dan (2007): Bulletproof Webdesign. Addison-Wesley, München. ISBN

3827326230.

• MEYER,Eric A. (2006): Eric Meyer's CSS. Addison-Wesley, München. ISBN 3827324793.

• Überblick über CSS3 + Browser. http://www.findmebyip.com/litmus/

Tools

• Firefox AddOn ColorZilla


2.1 Kurzvorstellung von Stylesheets

Die einfachste Art die visuelle Darstellung einer Webseite zu definieren ist die Einbettung eines Styls-

heets. Das Stylesheet definiert für die einzelnen HTML-Tags wie sie dargestellt werden sollen. In Lis-

ting 1 werden Formatierungen für die Tags body, p, h1 und h2 vorgenommen, der gezeigte <style>-

Tag wird im Head des HTML-Dokument eingebunden:

1. <style type="text/css">

2. p {

3. font-family: Calibri, Helvetica, Arial, sans-serif;

4. font-size: 13px;

5. }

6. h1,h2 {

7. font-family: "Trebuchet MS", Verdana, Arial, sans-serif;

8. }

9. h1 { font-size: 24px; }

10. h2 { font-size: 20px; }

11. body { background-color: green; }

12. </style>

Listing 1: Hintergrundfarbe, Schriftfamilie, Schriftgröße mit CSS festlegen

An Hand dieses Beispieles werden nun die ersten Stylesheet-Befehle erklärt. Die Syntax von Styles-

heets ist völig anders als die von HTML.

2.1.1 Schriftart

Zuerst werden wir die Schriften im Dokument festlegen. Achtung: Welche Schriften auf dem Endge-

rät zur Verfügung stehen ist nicht bekannt, deswegen kann man mehrere Schriften angegeben. Diese

Liste wird vom Browser von links nach rechts abgearbeitet,die erste Schrift die er findet, verwendet

er. (Man kann Schritfen auch verlinke - aber das ist mehr ein Thema für MMA).

In Zeile 2 bis 5 werden zwei Anweisungen für Fließtext gegeben (HTML-Tag <p>): die Schriftfamilie in

Zeile 3 und die Schriftgröße in Zeile 4.

In Zeile 3 Vergleichen Sie Zeile 3 mit Zeile 7: Schriftnamen die ein Leerzeichen enthalten müssen in

Anführungszeichen gesetzt werden, wie "Trebuchet MS" in Zeile 6.

Das letzte Wort in Zeile 7 „sans-serif“ ist ein CSS-Kürzel für „irgendeine serifenlose Schrift“. Es emp-

fiehlt sich am Ende einer Schriftliste ein solches Kürzel als Standardwert „wenn alle Stricke rei-

ßen“ anzugeben, dabei sind folgende Werte möglich:

sans-serif serif cursive fantasy monospace.


2.1.2 Schriftgröße

Die Schriftgrößen-Angabe in Zeile 4 verwendet Pixel als Maßeinheit. Diese Maßeinheit macht bei der

Darstellung am Screen, besonders in Kombination mit Bildern Sinn.

2.1.3 Absätze

Wie immer in HTML erfolgt der Zeilenumbruch automatisch. Mit CSS können Sie verschiedene Aspek-

te des Absatz-Layoutes steuern, einige davon sind in Abbildung 16 gezeigt:

Abbildung 16: Absatz mit CSS Formatanweisungen: text-indent und line-height

Mit text-align können Sie die Ausrichtung des Texts im Absatz festlegen: left, right, center oder

justify (Blocksatz). Blocksatz wird aber am Web wenig verwendet,da die Browser keine Silbentren-

nung durchführen. Dadurch entstehen bei den meisten Texten häßliche Löcher im Blocksatz.

Die erste Zeile des Absatzes kann einen separaten Einzug haben, den Sie mit text-indent festlegen.

Die Zeilenhöhe wird mit line-height festgelegt. Hier ist es sinnvoll für längere Texte einen etwas

erhöhten Wert festzulegen (z. B. 1.5em – d.h.1,5 mal die Breite des Buchstaben M in dieser Schrift)

da die Standard-Darstellung der Browser etwas zu eng ist um gut lesbar zu sein.

2.1.4 CSS erforschen mit Firebug

Sie haben nun einen kurzen Einblick in die Schreibweise und die Möglichkeiten von Stylesheets. Ge-

nug um Stylesheets von Webseiten zu lesen um neue Möglichkeiten kennen zu lernen. Beim Lesen

und Verstehen von CSS hilft das Firefox Add-On „Firebug“.

Abbildung 17: Firefox Add-On Firebug

Rechtsklick + „Element untersuchen“

Zeigt HTML-Code des Ele-ments

Zeigt die für diesen HTML-Tag geltenden CSS-Anweisungen


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 „Helvetica 24pt“). Die Formatierungs-Information sollte in so-

genannten „Stylesheets“ gespeichert werden, das Format für die Stylesheets war aber noch nicht

definiert. Im Jahre 1993 sah eine typische Webseite so aus

<html><body> <h1>Das Studium</h1> <p>Studienziel ist es, breit gefächerte technische und kreative Kompetenzen... </body></html>

Da es keine Stylesheets gab „erfand“ Netscape ab 1994 zusätzliche HTML-Tags, die die Darstellung

der Webseite festlegen. Andere Browser übernahmen diese Tags von Netscape.

<html><body> <h1><font face="Arial" color="blue">Das Studium</font></h1> <p><font size="+1">S</font>tudienziel ist es, breit gefächerte technische und kreative Kom-petenzen...</p> <p><font size="+1">P</font>rojekte und Praxissemster stellen schon während des Studiums die Verbindung...</p> </body></html>

Durch das Hinzufügen der Tags für Formatierung wurde der HTML-Code komplizierter und unüber-

sichtlicher. Erst ab ab 1995 wurde endlich an den Standards für Stylesheets gearbeitet, seit den frü-

hen 2000ern ist die Unterstützung in den gängigen Browsern vorhanden. So sieht nun eine HTML-

Seite mit separatem Stylesheet aus:

Die html-Datei Die Datei fh. css

<html><head>

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

zen...

</body></html>

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

sonders das nachträgliche Verändern der Gestaltung wurde vereinfacht.

Wichtige Argumente für den Einsatz von Stylesheets sind:

• Zusätzliche Gestaltungsmöglichkeiten

• Einheitliche Gestaltung von mehreren Webseiten


• Arbeitsteilung zwischen DesignerInnen (die CSS erstellen) und RedakteuerInnen (die Inhalte

erstellen)

Aber Achtung: CSS ist nicht die Lösung jedes Problems:

• Mit Stylesheets können Sie nur Elemente verändern, die schon in der HTML-Datei vorhanden

sind. Es können keine neuen Elemente eingefügt werden.

• Um ein Stylesheet zu erstellen, muss die DesignerIn die HTML-Tags kennen, z. B. wissen, dass

h1, h2, h3 für die Überschriften stehen.

• Damit das Stylesheet wirkt, muss die RedakteurIn, die das HTML-Dokument erstellt, die rich-

tigen HTML-Tags verwenden, z. B. Überschriften wirklich mit h1, h2, h3 formatieren, und nicht

mit b, i, font.

2.2.1 Stylesheet Syntax

Beispiel

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

Eine Stylesheet-Regel („Rule“) besteht aus einem Selektor gefolgt von einer geschwungenen Klam-

mer die eine oder mehrere Deklarationen enthalten kann.

Der einfachste Selektor besteht aus dem Namen eines einzelnen HTML-Tags. Sie können auch meh-

rere Elemente durch ein Komma trennen. In diesem Falle werden für alle Elemente die selben Style -

Angaben definiert, (siehe h1,h2 in obigem Beispiel).

Sie können beliebig Zeilenumbrüche einfügen, diese werden ignoriert.

Style für mehrere Seiten

Die Seiten einer gesamten Website haben meist ein einheitliches Aussehen. Dies können Sie errei-

chen, wenn Sie für jede Webseite dieselbe CSS Datei verwenden. Dazu müssen Sie in jede HTML-

Datei die CSS Datei mittels folgender Anweisung einbinden:

Selektor

Deklaration

Deklaration

Rule


.wichtig { color: red; }

Diesen Klassen können Sie eigene Namen geben (hier „wichtig“), vor dem Klassennamen steht immer

ein Punkt. Jedem normalen HTML-Tag können Sie nun diese Klasse zuweisen. Dies geschieht mit dem

Attribut class.

<p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p> <p class="wichtig">Ein ganz wichtiger Absatz</p> <p>Ein ganz normaler Absatz</p>

Zur „normalen“ Wirkung des HTML-Tags kommt nun die Formatierung durch die Klasse hinzu: der

Text „ganz wichtige“ und „Ein ganz wichtiger Absatz“ ist in diesem Beispiel also rot. Eine Klasse kann

also mehrmals in einem Dokument verwendet werden. Ein Tag kann mehrere Klassen erhalten, diese

werden durch Leerzeichen getrennt im class-Attribut angeführt.

Zur eindeutigen Kennzeichnung von Tags wird das Attribut id verwendet:

<p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p> <p class="wichtig">Ein ganz wichtiger Absatz</p> <p id="impressum">Das einzige Impressum dieser Seite</p>

Auf diese eindeutigen IDs kann in CSS mit der Raute referenziert werden:

#impressum { background-color: #DDD; }

Sowohl Klassen als auch IDs können mit Tags kombiniert werden um einen komplexen Selektor zu

bilden, aber das macht nur bei Klassen wirklich Sinn:

.wichtig { font-size: 20px; } /* alle Tags mit der Klasse wichtig */ p.wichtig { color: red; } /* nur der Tag p mit der Klasse wichtig */ b.wichtig { color: yellow; } /* nur der Tag b mit der Klasse wichtig */ #impressum { background-color:#ddd; } /* nur der Tag mit der id #impressum */ p#impressum { background-color:#ddd; } /* == nur der p-Tag mit der id #impressum */ b#impressum { background-color:#ddd; } /* nix! */

Die Firefox-Erweiterung Firebug zeigt Tags, Klassen und IDs in dieser Schreibweise an:

Es wird öfter vorkommen, dass Sie einem Bereich eine bestimmte Klasse zuweisen möchten, ohne

dass ein passender Tag vorhanden ist. Hier können Sie die beiden Tags <span> und <div> verwenden,

die beide selber kaum Eigenschaft aufweisen. <span> eignet sich für die Verwendung in Fließtext,

<div> ist ein blockbildender Tag.

<p>Es gibt hier ganz <span class="wichtig">besonders interessante</span> Meldungen.</p>

Die Worte „besonders interessante“ erscheinen rot.


2.2.3 Maßeinheiten in Stylesheets

Für Längen- und Größen-Angaben gibt es mehrere Maßeinheiten: px (Pixel) , em (=Breite des Buchsta-

ben M) , ex (Höhe des Buchstaben X), % (Prozent), cm (Zentimeter), in (Inch). Einige davon sind rela-

tiv (em = relativ zur Schriftgröße, px = relativ zur Pixel-Größe am aktuellen Ausgabemedium), andere

absolut (Centimeter, Inch). Die absoluten Angaben kann man derzeit nur bei der Ausgabe auf Papier

sinnvoll verwenden.

Farbangaben können auf mehrer Arten erfolgen: mit einigen Farbwörtern (red, green,…) oder mit der

Angabe von rot-, grün- und blau-Anteil (jeweils werte von 0 bis 255) in verschiedenen Schreibweisen:

Dezimal rgb(16,0,255), hexadezimal #10F oder zweistellig hexadezimal #1000FF.

Tool-Tipp: Mit dem Firefox AddOn Colorzilla kann man die Farben einer Webseite auslesen und in

verschiedenen Schreibweisen kopieren:

Abbildung 18: Colorzilla Pipette zum auslesen einer Farbe und Colorzilla Menü zum kopieren des Codes

Wird in einem Stylesheet auf eine URL verwiesen (z.B. auf die URL eines Hintergrundbildes), dann

kommt die Schreibweise url(http://absolute.com/bild.gif) oder url(relativ/ bild.gif) zum

Einsatz. Achtung: die relative URL bezieht sich auf das Stylesheet (nicht die HTML-Datei in der es

verwendet wird).

Klassisches Box Model

Jeder blockbildende Tag (z. B. h1, h2, p, blockquote, div, …) hat einen Rahmen, Innen- und Außenab-

stand. Diese werden mit den Deklarationen border, padding und margin festgelegt. Ein Hintergrund-

bild und/oder eine Hintergrundfarbe des Tags reicht immer bis zum Rahmen, aber nicht darüber hin-

aus.


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

Die Ausdehnung von margin, padding und border kann man besonders gut mit der Firefox-

Erweiterung Firebug erforschen wie in Abbildung 20 gezeigt.

Abbildung 20: margin, border, padding in Firebug

Dabei wird direkt in der Webseite der Außenabstand (margin) gelb und der Innenabstand (padding)

dunkelviolett hinterlegt.

Die Standard-Darstellung von Absätzen erklärt sich über den margin-top und margin-bottom des <p>-

Tags:


Abbildung 21: 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 22 wurde ein Bild mit drei Zahnrädern als

Hintergrundbild verwendet, durch die Wiederholung werden sieben Zahnräder angezeigt.

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

Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch lesbar sein! Im Bei-

spiel in Abbildung 22 ist eine Linkfarbe zu hell bzw. das Hintergrundbild zu auffällig: Der Text „wurde

schon besucht“ in der letzten Zeile ist kaum noch lesbar.

Links formatieren

Der <a>-Tag wird in HTML für zwei sehr unterschiedliche Dinge verwendet: zum Setzen von Links und

zum Setzen von Textmarken (auch ‚Anker’ genannt):


<h1><a name="unis"></a>Universitäten</h1> <a href="http://www.uni-salzburg.at/">Uni Salzburg</a>

Textmarken sind normalerweise unsichtbar, Links sind normalerweise blau oder violett und unter-

strichen.

Um die Darstellung von Links zu verändern muss man in CSS :link oder :visited als Selektoren ver-

wenden. Der Browser unterscheidet dabei zwischen Links die schon einmal besucht wurden (visited)

und neuen Links.

a:link, a:visited { text-decoration: none; } a:link {color:blue} a:visited {color:#FF00FF }

Im folgenden Beispiel werden die Links mit einem Icon markiert:

a:link, a:visited { background-image: url(icon-link.gif); background-position: center right; background-repeat: no-repeat; padding-right: 9px; }

2.3 Graceful Degradation

Der englische Begriff ‚graceful degradation’ hat noch keine adequate deutsche Übersetzung, er be-

deutet ungefähr: „funktioniert auch ohne … gut. “

Das dahinter stehende Prinzip lautet: für die verschiedenen Ausgabemedien sollen nicht verschiede-

ne Versionen einer Webseite erstellt werden, sondern alle Ausgabemedien werden mit einem Do-

kument bedient.

Wenn der Browser Javascript, Flash, CSS unterstützt, dann soll die Website besonders schön, interak-

tiv, praktisch sein. Wenn der Browser etwas nicht unterstützt, dann soll die Website immer noch

lesbar und benutzbar bleiben.

Schlechtes Beispiel: Bild als Überschrift

Als Überschrift einer Seite soll nicht blos ein Text sondern eine komplexe Grafik angezeigt werden:


<img src="mmtlogo-400.png" />

Das sieht zwar wie eine Überschrift aus – wenn das Bild geladen wird – die Information ist aber für

eine Suchmaschine oder ein Braille-Ausgabegerät nicht lesbar. Für diese wäre folgender Code opti-

mal:

<h1>MultiMediaTechnology</h1>

Mit Image Replacement kann man die optimale Darstellung für Suchmaschinen und Braille Ausgabe-

geräte mit der optimalen Darstellung als Bild kombinieren.

Gutes Beispiel: Image Replacement

Der Text wird normal im HTML-Code eingegeben. Es wird aber auch ein Bild in der richtigen Schriftart

erstellt. Bei CSS-fähigen Browsern wird der Text versteckt und das Bild angezeigt. Browser ohne CSS

und Suchmaschinen verwenden einfach den Text:

<style> h1#bildStattText { /* schiebt den "echten text" extrem weit nach links */ text-indent:-10000px; overflow:hidden; background: url(mmtlogo-400.png); /* hoehe und breite der grafik angeben! */ height:140px; width:400px; } </style> <h1 id="bildStattText">MultiMediaTechnology</h1>

Das Bild kann ausgetauscht werden indem man das Stylesheet ändert, ohne Eingriff in den HTML-

Code.

Schlechtes Beispiel: Navigationsmenü mit Bildern

Ein Navigationsmenü wird mit Tabellen und Bildern aufgebaut:


<table cellspacing="1"> <tr> <td><a href="home.html"><img src="1.gif" /></a></td> <td><a href="news.html"><img src="2.gif" /></a></td> <td><a href="portfotdo.html"><img src="3.gif" /></a></td> <td><a href="contact.html"><img src="4.gif" /></a></td> </tr> </table>

Wieder gilt: die Information ist für eine Suchmaschine oder ein Braille Ausgabegerät nicht lesbar. Für

diese Ausgabemedien wären Links mit normalen Texten besser.

<ul> <li><a href="home.html">home</a></li> <li><a href="news.html">news</a></li> <li><a href="portfolio.html">portfolio</a></li> <li><a href="contact.html">contact</a></li> </ul>

Im nächsten Kapitel (Fehler! Verweisquelle konnte nicht gefunden werden. auf Seite Fehler!

Textmarke nicht definiert.) lernen Sie eine Methode kennen wie Sie aus dieser Liste ein Menü ma-

chen.


3. CSS für Layout und Interaktion + URLs


• Wie verschiedene Ausgabegeräte und verschiedene Bildschirmgrößen die Darstellung von

Webseiten beeinflussen und die Gestaltung von Webseiten schwierig machen.

• Wie absolute Positionierung, Float, und media queries funktionieren.

• Das PHP am Server ausgeführt wird, und im Browser der Quellcode nie sichtbar wird.

• Wie relative und absolute URLs funktionieren, welche Bedeutung index.html und index.php

meist am Webserver haben.


• An einem bestehen CSS-Layout Veränderungen vornehmen.

• Mittels CSS zwei oder drei Spalten nebeneinander positionieren.

• Mittels CSS aus einer Liste von Links ein Navigations-Menü oder ein Dropdown-Menü ma-

chen.

• Ein statisches Layout mit mediaqueries so erweitern, so dass bei wesentlich kleineren oder

größeren Ausgabegeräten noch sinnvoll dargestellt werden kann.

• Mit PHP includes ein Navigationsmenü in mehreren Webseiten verwenden.


• Browser-Untersützung für HTML5 und CSS: http://www.findmebyip.com/litmus

• MARCOTTE, Ethan (2010): Responsive Webdesign. In: A List Apart.

http://www.alistapart.com/articles/responsive-web-design/

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


3.2 Rahmenbedingungen für Layout

Wie in Kapitel 1 beschrieben gibt es viele verschiedene Ausgabegeräte für Webseiten. Für die Gestal-

tung des Layouts von Webseiten spielt dabei die Bildschirmgröße bzw. die Auflösung eine wichtige

Rolle.

3.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 Programmier-

sprache Javascript, mit der man die Größe des Browserfensters messen kann – das Ergebnis der Mes-

sung ist natürlich dadurch verfälscht, dass Browser ohne Javascript ganz aus der Messung herausfal-

len. Diese Beschränkung sollten Sie bei den folgenden Überlegungen immer beachten.

Abbildung 23 zeigt einige derzeit (2010) mögliche Bildschirm-Auflösungen.

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

Vergleichen Sie die höchsten hier dargestellte Auflösungen mit der geringsten Auflösungen. Da Breite

und Höhe (mehr als) verdreifacht sind, steht bei der höchsten Auflösung also (mehr als) die neunfa-

che Fläche zur Verfügung!


Achtung, diese Angaben sind in Pixel – die reale Größe des Ausgabegerätes (24“ Desktop, 13“ Laptop,

mobiles Endgerät) ist bei gleicher Pixel-Auflösung sehr unterschiedlich! Mobile Geräte haben eine

geringe Auflösung, aber eine höhere Pixeldichte:

Gerät Pixel Diagonale

Inch

Pixel per

Inch

Alter PC 1280 × 1024 19 in 86 ppi

Macbook Pro 1440 × 900 15.4 in 110 ppi

Sony PSP 480 × 272 4.3 in 128 ppi

Apple IPhone3 480 × 320 3.5 in 163 ppi

Apple IPhone4 960 × 640 3.5 in 326 ppi

Amazon Kindle 600 × 800 6 in 167 ppi

Android Nexus One 800 × 480 3.7 in 254 ppi

Abbildung 24 zeigt Statistiken über die Bildschirmauflösung von w3schools.org von 2000 bis 2010. In

diesem Zeitraum hat sich die Mehrheit langsam von 800x600 (bis 2003) auf 1024x768 (bis 2008) und

schließlich auf höhre Auflösungen verschoben. Achtung: Auf Grund des Messverfahrens werden hier

wahrscheinlich nur Desktops erfaßt, nicht mobile Geräte.

Abbildung 24: Statistik über die Bildschirmauflösung, http://www.w3schools.com/browsers/browsers_display.asp

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

dete Favoritenleisten abzuziehen, um den „netto“ verbleibenden Raum für die Gestaltung der Web-

seite zu erhalten. Abbildung 25 zeigt diese Problematik am Beispiel von Firefox.


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

Abbildung 26 zeigt eine Statistik über die „Netto-Größen“ von Browser-Fenstern aus dem Jahre 2006.

Laut dieser Statistik konnte eine Webseite mit Breite 950 Pixel auf ca. 70% der Browser vollständig

angezeigt werden. Bei 1050 Pixel Breite waren es nur noch 20%.

Abbildung 26: „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) Ein Entwurf der für mehrere Auflösungen funktioniert

4) Zwei oder drei Entwürfe, die den gleichen Inhalt für verschiedene Auflösungen unterschied-

lich darstellen.

Dazu ein strenges Urteil:

1) ist völlig inadäquat für das Medium Web. „best viewed“ ist eine Zumutung für alle LeserIn-

nen auf ‚unpassenden’ Ausgabegeräten. Stellen Sie sich vor, der Architekt der FH hätte eine

Treppe zum Eingang zum Foyer eingeplant, und dann ein Schild daneben gestellt „FH nur be-

nutzbar für Leute die Treppen steigen können“. Was würden sich wohl RollstuhlfahrerInnen

oder Leute mit Kinderwagen dazu denken?

Auflösung 1280 x 800

Fenstergröße 1280 x 780

Platz für die Webseite: 1264 x 595

Platz für die Webseite:

913 x 578


2) Zeigt schon ein Minimum an Wissen über das Web, ignoriert aber die gestalterische Heraus-

forderung des Mediums. Weil soch ein Entwurf auf einem Bildschirm mit hoher Auflösung

sehr klein auf einer großen leeren Fläche erscheint wird es spöttisch

out“ genannt.

3) + 4) Nur das verdient wirklich die Bezeichnung „Webdesign“.

Ein Beispiel für Variante 3 :

Darstellung der Seite bei einer Auflö-

sung von 800x600:

Navigation (linke Spalte) und Content

ist sichtbar.

Eine Spalte rechts mit untergeordne-

tem Content ist nur durch Scrollen

nach rechts erreichbar.


sung von 1024x768

Navigation, Content und Zusatz-

Content voll sichtbar.



sung von 1280 x 1024



Der „leere“ Teil der Webseite wird

durch das Hintergrundbild interessant

gestaltet.


sung von 1600x1200.



Der „leere“ Teil der Webseite wird

durch das Hintergrundbild interessant

gestaltet.

Das Hintergrundbild wiederholt sich

zwar vertikal, aber horizontal zeigt es

auch bei dieser Auflösung neue De-

tails.

Dieses Beispiel ist „linksbündig“. Die aktuelle Webseite der FH ist bei höheren Auflösungen zentriert:

Abbildung 27: Aktuelle Homepage der FH Salzburg (November 2009)

Dieser Effekt wird mit einer fixen Breite und einem Margin von „auto“ links und rechts erzielt:


div#wrap { width: 76em; margin: 0 auto; }

Variante 4) ist 2010 erst in einigen Browsern möglich. Dafür sind mediaqueries in CSS3 notwendig.

600 px Breite 800 px Breite 1280 px Breite

3.2.4 Bilder

Bilder waren lange Zeit ein Grund, warum das Layout von Webseiten nicht flexibel war: weil die Bil-

der nur für die Darstellung bei einer bestimmten Größe geeigenet waren. Das ist im Jahr 2010 anders.

Pixel

Als Bildformate für <img> Tags in Webseiten werden nur Pixel-Formate von vielen Browsern unter-

stützt (siehe auch Kapitel 2.1.2, Seite 21). Diese Formate (jpg, png, gif) sind eigentlich für die Darstel-

lung bei einer bestimmten Größe gedacht. Die Vergrößerte Darstellung von Pixel-Bildern liefert keine

guten Ergebnisse:

Abbildung 28: Ausschnitte aus einem Pixel Bild, vom Browser (Firefox) in 3 Stufen vergrößert dargestellt


Aktuelle Browser sind aber sehr gut bei der verkleinerten Darstellung von Pixel-Bildern.

Abbildung 29: Pixel Bild wird vom Browser (Firefox) in 3 Stufen verkleinert dargestellt

Vektor

Mit dem Format SVG steht auch ein vektor-basiertes Bildformat für das Web zur Verfügung. Es wird

im Herbst 2010 von allen Browsern ausser Internet Explorer untestützt. SVG-Bilder können in belie-

biger Größe verwendet werden. Die Einbindung erfolgt mit dem Object-Tag:

<object type="image/svg+xml" data="circle.svg"></object>

SVG-Dateien kann man im Code schreiben oder mit Inkscape, Adobe Illustrator oder anderen Vektor-

Programmen erstellen.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" baseProfile="full" width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 300 300"> <linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0); stop-opacity:1"/> <stop offset="100%" style="stop-color:rgb(255,0,0); stop-opacity:1"/> </linearGradient> <circle id="myCircle" cx="50%" cy="50%" r="100" fill="url(#orange_red)" /> </svg>

Das Attribut preserveAspectRatio6 im svg-Tag bestimmt wie das Bild auf verschiedenen Größen

dargestellt werden soll.

6 http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute#ExamplePreserveAspectRatio


Canvas

Der canvas-Tag bietet eine Leinwand, auf die mit Javascript in 2D oder 3D gezeichnet werden kann.

Ohne Javascript ist er nur eine leere Leinwand, und wird deswegen hier noch nicht behandelt.

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, wie in Abbildung 30 gezeigt.

Abbildung 30:Darstellung von Text bei verschiedenen Fensterbreiten und Schriftgrößen

Beim Vergrößern und Verkleinern der Schriftgröße verwenden die Browser zwei verschiedene Me-

thoden: entweder die Bilder werden mit der Schrift vergrößert und verkleinert, oder nur der Text

wird verändern, die Bilder aber bleiben gleich. Häufiger ist die erste Variante (Default-Einstellung der

meisten Browser). Abbildung 31 zeigt das entsprechnde Menü in Firefox. Der letzte Punkt des Menüs

„Nur Text zoomen“ kann aktiviert oder deaktiviert werden.


Abbildung 31: Menü zum Verändern der Schriftgröße in Firefox

Wenn die Textgröße unabhängig von der Bildgröße verändert wird, verändern sich damit die Propor-

tionen und das Layout der Seite. Dies ist eine besondere Herausforderung für das Design der Seite.

3.3 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 (wie in Kapitel 1.4.6 schon erläutert). In Abbildung 32 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 der nicht-blockbildender Tag em dabei auf mehrere Zeilen ver-

teilt werden und nimmt dann mehrere rechteckige Bereiche ein, der blockbildende Tag p wird immer

als ein Rechteck dargestellt:

Abbildung 32: 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 33 mitten in einen Absatz hinein setzen, ergibt das meist ein sehr

hässliches Layout.


Abbildung 33: Bild mitten im Absatz

Browser können keine Wörter trennen und umbrechen, ein langes „Wort“ kann die Breite eines Ele-

mets überschreiten. Verschiedene Browser verhalten sich hier unterschiedlich. In Abbildung 34 kön-

nen Sie sehen, dass Microsoft Internet Explorer 7.0 URLs nicht umbricht. Firefox 3.0 hingegen kann

URLs umbrechen.

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

3.3.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 35: width im Box-Model

Um einen Inhalt zu zentrieren kann margin mit Wert auto verwendet werden, der den zur Verfügung

stehenden Platz automatisch gleichmäßig verteilt.


div#main { width:500px; margin-left: auto; margin-right: auto; }

3.3.2 Float

Eine Möglichkeit aus der normalen Reihenfolge der Darstellung auszubrechen bietet die Deklaration

float mit den Werten left und right. Damit wird ein Element nach links bzw. rechts gesetzt, der

Rest des Inhalts „rutscht nach oben“ und wird neben das Element gesetzt („umfließt das Element“).

In Abbildung 4 sind drei Absätze zu sehen die jeweils als erstes ein Bild enthalten. Im ersten Absatz ist

die Darstellung ganz normal – das Bild wird wie ein Wort im Text behandelt. Im zweiten Absatz „floa-

ted“ das Bild nach rechts, der Text rutscht links davon nach oben. Im dritten Absatz „floated“ das Bild

nach links, der Text rutscht rechts davon nach oben.

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

Abbildung 37: Ein Absatz mit float

p { margin: 0px; }

#slim {

float:right;

width:33%;

}


Wenn viele Elemente mit float positioniert werden die die gleiche Höhe haben entsteht ein beson-

ders flexibles Layout: in Fehler! Verweisquelle konnte nicht gefunden werden. werden je nach zur

Verfügung stehendem Platz drei oder vier Bilder nebeneinander dargestellt:

Abbildung 38: Zwei Darstellungen der Bildergalerie mit float

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

Abbildung 39: Kombination von absoluter Positionierung und margin-left

Die Koordinaten (top und left) beziehen sich normalerweise auf die linke obere Ecke des Browser-

fenster. Man kann auch bottom und right) verwenden, dann wird der rechte Rand des Elements be-

margin-left

von Inhalt


züglich des Rechten Randes des Browserfensters positioniert, bzw. der utnere Rand mit dem unteren

Rand.

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

ser-Fensters positioniert.

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

}

3.4 Navigationsmenü mit CSS

Wenn man mit CSS ein Navigationsmenü gestaltet dann sollte man von einem HTML-Code ausgehen

der auch ohne CSS gut benutzbar bleibt ( „graceful degradation“).

Der Ausgangspunkt für ein Navigationsmenü ist eine Liste mit Links:

<div class="navi"> <h3 class="unsichtbar">Seitenauswahl</h3> <ul> <li><a href="index.html">home</a></li> <li><a href="ort.html">ort</a></li> <li><a href="typografie/">typografie</a></li> <li><a href="bestellung/">bestellung</a></li> </ul> </div>

Ohne CSS wird die Liste ganz normal dargestellt. Mit CSS kann man daraus ein vertikales Menü ma-

chen, dazu wird mit list-style-type:none der Listenpunkt zu einem normalen Tag.


.unsichtbar {display:none;} div.navi li { list-style-type:none; margin-bottom:1px; background:#6C6; width:6em; padding: 0.2em; } div.navi li a:link { text-decoration: none; font-weight: bold; color: black; }

Mit Hilfe von Float kann man das Menü auch horizontal darstellen, dazu muß nur ein float eingefügt

und der margin anders gesetzt werden:

div.navi li { float:left; list-style-type:none; margin-right:1px; background:#6C6; width:6em; padding: 0.2em; } div.navi li a:link { text-decoration: none; font-weight: bold; color: black; }

3.4.1 Navigationsmenü wiederverwerten mit PHP

Das Navigationsmenü sollte natürlich in allen Seiten der Site gleich vorhanden sein. Dazu könnte man

den Code in alle HTML-Dateien kopieren. Wenn man dann eine neue Seite einfügen will, muss man

wiederum alle Seiten editieren.

Deswegen bietet es sich an bei dieser Geleg enheit von einfachem HTML auf PHP umzusteigen. PHP

istg eine Programmiersprache am Webserver mit der wir uns im Sommersemester intensiv beschäfti-

gen werden.

Dazu müssen Alle HTML-Dateien die Endung .php erhalten, im Navigationsmenü sieht das dann so

aus:


<div id="navi"> <h3 class="unsichtbar">Seitenauswahl</h3> <ul> <li><a href="index.php">home</a></li> <li><a href="ort.php">ort</a></li> <li><a href="typografie/">typografie</a></li> <li><a href="bestellung/">bestellung</a></li> </ul> </div>

Links die auf Ordner verweisen sind hier besonders praktisch: Sie ersetzen die Datei index.html durch

index.php, der Link bleibt gleich.

Das Navigationsmenü wird nun in einer separaten Datei gespeichert, z.B. navi.php. In den einzelnen

Seiten wird das Menü dann mit include eingebunden:

<body> <?php include "navi.php" ?> <h1>News</h1>

Achtung: Das Einfügen der inkuldierten Datei erfolgt auf dem Server. Der Client erhält das vollständi-

ge HTML-Dokument inklusive Navigation, und merkt von der Inkludierung nichts. Mit ANSICHT �� SEI-

TENQUELLTEXT ANZEIGEN kann man den PHP-Code nicht sehen.

Abbildung 40: Original PHP-Datei am Server und Quelltext-Ansicht im Webbrowser

Damit ist nun das Einfügen einer neuen Seite ganz einfach: nur die Datei navi.php muss editiert wer-

den.

3.4.2 :hover und :focus

Mit dem Selektor :hover wird eine CSS-Regel nur angewandt wenn die Maus über dem Tag ist.

(:focus hat eine ähnliche Bedeutung bei der Steuerung mit der Tastatur.)


div { background-color: #ddd; } div:hover { background-color: red; }

Mit Hilfe von Hintergrundbildern kann man so zum Beispiel einen kitschigen 3d-Button darstellen,

der beim hovern „hineingedrückt“ wird.

div { background-image: url(button-up.png); } div:hover { background-image: url(button-down.png); }

Beim Laden des zweiten Hintergrundbildes kann es dabei zu einer Verzögerung kommen. Um das zu

verhindern kann man die beiden Hintergrundbilder in einer Bilddatei speichern und nur den Bildaus-

schnitt wechseln:

/* css */ div { height:115px; width:240px; background-image: url(pix/rolloverButton.gif); overflow:hidden; } div:hover { background-position: 0 -120px; }

Eine extreme Anwendung dieses Prinzips nennt man CSS-Sprites: dabei werden möglichst viele Bilder

in einer Bild-Datei zusammengefaßt. Falls viele kleine Icons verwendet werden, kann das die Darstel-

lung der Webseite erheblich beschleunigen.

Abbildung 41: CSS Sprites von Yahoo


So könnte der CSS Code aussehen7:

.icon{ display:block; padding:8px 0 9px 40px; background:url(http://us.i1.yimg.com/pa-icons2.gif) 5px 3px no-repeat; } #messenger .icon{ padding-left:31px; background-position:2px -497px; } #music .icon{ background-position:5px -197px; }

3.4.3 Dropdown Menü mit Hover

Das folgende Menü mit Subemenüs funktionert auf Touch-Geräten nicht. Für die wäre die verwen-

dung eines „Klicks“ statt des „Hovers“ notwenidg, das ist aber in CSS nicht umsetzbar.

Der HTML-Code besteht aus zwei ineinandergeschachtelten Listen:

<ul id="navmenu"> <li><a href="home.php">Home</a></li> <li><a href="news.php">News</a> <ul> <li><a href="news.php?page=1">Michel Jackson tot</a></li> <li><a href="news.php?page=2">Michel Jackson immer noch tot</a></li> <li><a href="news.php?page=3">Ist Michael Jackson wirklich tot?</a></li> <li><a href="news.php?page=4">Tot von Michael Jackson bestätigt</a></li> </ul> </li> ... </ul>

Die Darstellung ohne CSS ist also eine einfache Liste. Mit CSS soll ein Dropdown-Menü dargestellt

werden (Prinzip „Graceful Degradation“, siehe Kapitel 2.3 auf Seite 38)

Abbildung 42: Menü mit Submenü, ohne und mit CSS

7 von http://www.websiteoptimization.com/speed/tweak/css-sprites/


Die wichtigen neuen Bestandteile dieses Menüs:

Jeder li-Tag im Hauptmenü definiert ein neues Koordinatensystem

ul#navmenu > li { position: relative; }

Die Unter-Menüs werden dann absolut positioniert (immer unterhalb Ihres eltern-Tags):

ul#navmenu ul { position: absolute; top: 24px; left: -2px; z-index: 1000; /* display: none */ }

Damit sind die Unter-Menüs richtig positioniert und alle gleichzeitig sichtbar. Mit der zusätzlichen

Deklaration display:none werden die Unter-Menüs versteckt. Wenn die Maus über einen Haupt-

Menüpunkt bewegt wird soll das entsprechende Untermenü sichtbar werden:

ul#navmenu li:hover ul { display: block; }

Achtung: hier wird der descendant selector (siehe Kapitel 3.5 auf Seite 59) verwendet: ul wird selek-

tiert, falls es innerhalb eines li:hover ist, das innerhalb eines ul#navmenu ist.

3.5 CSS Selektoren

Das Document Object Model (DOM) ist ein allgemeines Modell wie ein Dokument (die Webseite

oder auch ein XML- Dokument) als Baum (im mathematische Sinne) angesehen werden kann. Mit

dieser Vorstellung ergeben sich neue Fachwörter:

Die Tags werden als Elemente bezeichnet. So ist in folgendem Beispiel das

erste li-Element innerhalb des ol-Elements. Das li Element enthält wiederum

ein a Element, und dieses einen Text „erster Link“.

<html> <body> <p>Navigation</p> <h1>Überschrift</h1> <div class="intro"> <h2>Dies und Das</h2> <ol> <li><a href="#bla">erster Link</a></li> <li><a href="#bla">zweiter Link</a></li> </ol> </div> ...

Elemente und Tags undwerden als Nodes oder Knoten bezeichnet. Für die

Beziehungen zwischen Nodes werden die Begriffe Eltern, Kind, Nachkommen,


Vorfahren verwedent: h1 ist ein Kind von body, „Überschrift“ ist das erste Kind von h1. „Über-

schrift“ ist damit ein Nachkomme von body.

Damit haben wir das Vokabular um auch kompliziertere CSS-Selektoren zu verstehen.

In Kapitel 2.2.2 haben Sie CSS Selektoren für Klassen und IDs kennen gelernt. In der CSS 2.1 Spezifika-

tion werden u.a. folgende Schreibweisen für Selektoren beschrieben8:

Name Muster Beschreibung

Universal selec-

tor * Stimmt mit jedem Element überein.

Type selectors E Stimmt mit jedem E-Element überein

Grouping E, F, G Stimmt mit jedem E-, sowie jedem F-, sowie jedem G-Element überein.

E, F und G könnten auch komplexere Selektoren sein!

Descendant

selectors E F

Stimmt mit jedem F-Element überein, das ein Nachfahre eines E-

Elements ist, also z.B. <E>bla <div> <F>hier</F> </div> </E>.

Child selectors E > F Stimmt mit allen F-Elementen überein, die Kindelemente eines Elements

E sind, also z.B. <E>bla <span>bla</span> <F>hier</F> </E>.

The link pseudo-

classes :link

:visited

Stimmt mit Links überein, deren Ziel noch nicht besucht wurde (:link),

oder deren Ziel bereits besucht wurde (:visited).

The dynamic

pseudo-classes

:active

:hover

:focus

Stimmt während bestimmter Benutzeraktionen überein.

Adjacent selec-

tors E + F

Stimmt mit jedem F-Element überein, dem unmittelbar ein Element E

vorausgeht, also <E>dies</E> <F>das</F>

Class selectors E.warning (Nur in HTML, nicht in XML) Stimmt mit jedem E-Element überein, des-

sen CLASS gleich „mwarning“ ist.

ID selectors E#myid Stimmt mit jedem E-Element überein, dessen ID gleich „myid“ ist.

Mit CSS3 kommen u.a. folgende Selektoren dazu:

Name Muster / Beispiel Beschreibung

Attribute Selector:

Begins with

E[attr^="string"]

a[href^="mailto:"] Stimmt mit jedem Element überein, bei dem der Wert

des Attributs mit dem geforderten String beginnt.

The Target

pseudo-class :target

Stimmt mit dem Element überein, dessen ID mit dem

Anker in der URL übereinstimmt. Z.B. bei URL

http://at.at/index.html#kontakt stimmt :target mit

<div id="kontakt"> überein

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


The UI element

states pseudo-

classes

:enabled

:disabled

:checked

Diese Selektoren beziehen sich auf mögliche Zustände

von Eingabefeldern – die werden aber erst im

nächsten Kapitel erklärt.

Root pseudo-class :root Stimmt mit der Wurzel des DOM überein, immer

<html>

:nth-child()

pseudo-class

:first-child :nth-child(13) :nth-child(odd) :nth-child(even) :nth-child(3n+1) :last-child

Zählt die Geschwister des Elements, stimmt mit dem

Element überein wenn die Zahl bestimmte

Bedingungen erfüllt: erstes Geschwister, 13.,

ungerade Zahl, gerade Zahl, ….(auch Moduleo 3, 4,

n)… letztes.

:nth-of-type()

pseudo-class

img:nth-of-type(odd) { float: right; } img:nth-of-type(even) { float: left; }

Zählt die Elemente dieses Typs, die bis zu dieser Stelle

in der DOM vorkamen, …. Im Beispiel also die geraden

/ ungeraden Bilder.

Empty pseudo-

class

:empty

Element ist ganz leer – enthält weder Kinder-Knoten

noch Text.

Pseudo-Element

E::first-letter E::first-line p::first-letter

Achtung: mit diesem Pseudo-Element kann man

etwas aus HTML herausholen, was nicht explizit

drinnen ist: Obwohl im Abstz der erste Buchstabe

nicht extra in einen Tag eingeschlossen ist kann man

ihn mit p::first-letter auswählen.


3.6 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.6.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.)

Nehmen wir an, in der Datei http://mediacube.at/pix/weg.html seien folgende drei URLs enthalten:

absolut

beginnt mit Protokoll

http://mediacube.at/pix/weg-zur-saline.jpg

relativ zum Webserver

beginnt mit /

/pix/weg-zur-saline.jpg

relativ zur Datei weg-zur-saline.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-saline.jpg =


und

http://mediacube.at/pix/weg.html + weg-zur-saline.jpg =


Mit einer anderen Ausgangs-URL ist das Ergebnis natürlich anders:

http://multimediatechnology.at/2008/09/22/weg.html

+ /pix/weg-zur-saline.jpg =

http://multimediatechnology.at/pix/weg-zur-saline.jpg

und:

http://multimediatechnology.at/2008/09/22/weg.html

+ weg-zur-saline.jpg =

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


Relativen URLs können selbst wieder Ordnernamen enthalten:

http://multimediatechnology.at/showcase-2008.html

+ 2008/07/31/mmt-auf-facebook.html =

http://multimediatechnology.at/2008/07/31/mmt-auf-facebook.html

Zwei Punkte als Ordnernamen bedeuten dabei: „raus aus dem aktuellen Ordner“:

http://multimediatechnology.at/2008/04/17/rattenscharfes-computergame.html

+ ../../mmt-auf-facebook.html =

http://multimediatechnology.at/2008/07/31/mmt-auf-facebook.html

Mit dieser Schreibweise kann man auch Unsinn machen:

http://multimediatechnology.at/2008/04/17/rattenscharfes-computergame.html

+ ../../05/../04/17/rattenscharfes-computergame.html =

http://multimediatechnology.at/2008/04/17/rattenscharfs-computergame.html

All diese Berechnungen finden im Webbrowser statt, und sind völlig unabhängig davon, wie der

Webserver die URL interpretiert. So könnte z.B die letzten URL „in Wirklichkeit“ gar nicht auf Ordner

mit Namen 2008, 04, 17 verweisen, sondern eine Datenbanksuche nach „2008-04-17“ nach sich

ziehen – das ist Sache des Servers.

3.6.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-saline.jpg

Dateisystem /var/www/virthosts/mediacube.at/pix/weg-zur-saline.jpg

Die Apache-Konfiguration dazu sieht so aus:

<VirtualHost mediacube.at>

DocumentRoot /var/www/virthosts/mediacube.at/

</VirtualHost>

Standard-Dokument

Endet eine URL auf einen Schrägstrich, dann verweist sie eigentlich auf einen ganzen Ordner, nicht

auf eine spezielle Datei. Für diesen Fall kann im Webserver ein Standard-Dokument definiert werden.

Auf allen Webservern der FH ist dies die Datei index.html. d.h. wenn eine URL auf einen Ordner

verweist, und in diesem Ordner eine Datei mit Namen index.html existiert, dann wird diese Datei

geliefert.

URL http://mediacube.at/

Dateisystem /var/www/virthosts/mediacube.at/index.html

URL http://mediacube.at/pix/

Dateisystem /var/www/virthosts/mediacube.at/pix/index.html

Die Apache-Konfigurationsanweisung dazu lautet

DirectoryIndex index.html

Achtung: die Konfiguration ist am Internet Information Server normalerweise anders, dort wir die

Datei default.htm verwendet!

Was passiert wenn keine Datei mit dem richtigen Namen vorhanden ist? Die zwei Möglichkeiten

sehen Sie in Abbildung 43: entweder eine Auflistung der Dateien im Ordner oder eine Fehlermeldung.


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

Die entsprechenden Apache-Konfigurationsanweisung dazu sind:

Options +Indexes Options -Indexes

Automatischer Webspace für Alle

Am Webserver www.users existiert für jeden Account automatisch ein Webspace. Dieser Webspace

befindet sich innerhalb des Home-Verzeichnisses des jeweiligen Accounts. Z.B. könnte eine Studentin

den Username fhs303030 habe und das Home-Verzeichnis /home/store/fhs303030/. Ihr Webspace ist

im Unter-Ordner htdocs:

URL http://www.users.fh-salzburg.ac.at/~fhs303030/test.html

Dateisystem /home/store/fhs303030/htdocs/test.html

URL http://www.users.fh-salzburg.ac.at/~fhs111111/test.html

Dateisystem /home/store/fhs111111/htdocs/test.html

Beachten Sie: für das Formulieren von relativen URLs sind nur die URLs relevant, nicht die Position

der Dokumente im Dateisystem! Der Ordnername htdocs wird also nie in einer URL vorkommen.

Der Link von einem User-Webspace zum nächsten funktioniert also so:

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

http://www.users.fh-salzburg.ac.at/~fhs111111/test

Oder relative zum Webserver:

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

http://www.users.fh-salzburg.ac.at/~fhs111111/test

Die Apache Konfigurationsanweisung lautet:

UserDir htdocs


3.6.3 Pragmatische Tipps zu Dateienamen und URLs

Groß- und Kleinschreibung

Hintergrund: Webserver läuft auf UNIX, dort sind Dateinamen case-sensitive.

Tipp: ich schreibe alle Ordner- und Dateinamen sowie alle URLs immer durchgängig klein.

Leerzeichen

Hintergrund: Leerzeichen in URLs müssen als %20 geschrieben werden.

Tipp: ich verwende keine Leerzeichen in Ordner- und Dateinamen meiner Web-Projekte.

Umlaute

Hintergrund: URLs sind global sichtbar. Eine URL, die ich erschaffe, muss vielleicht einmal auf einer

Tastatur eingetippt werden, die keine deutschen Umlaute hat.

Tipp: ich vermeide Umlaute in Ordner- und Dateinamen meiner Web-Projekte und beschränke mich

auf den englischen Zeichensatz.

Ordnerstruktur

Hintergrund: Nicht nur der Code meiner Webseiten ist für das Funktionieren der Seiten wichtig,

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 Webspaces sorgfältig. Wenn ich auf mehreren

Rechnern entwickle, dann baue ich auf jedem dieser Rechner die Ordnerstruktur wieder auf. Ich

nutze Dreamweaver für den Upload und Download, weil er die Ordnerstruktur „mitdenkt“.


4. Formulare, erstes Javascript


• Wie Web-Formulare mit URLs zusammen hängen

• Welche HTML-Tags ein Formular und seine Eingabeelemente definieren


• Ein Web-Formular erstellen

• Ein alternatives Web-Formular für ein bestehendes Formular / Programm definieren


• Formulare. In: Selfhtml. http://de.selfhtml.org/html/formulare/

• HTML Forms and Input. In: W3 Schools. http://www.w3schools.com/html/html_forms.asp

• Newhouse(2001): Practical CSS Layout Tips, Tricks, & Techniques. In: A List Apart.

http://www.alistapart.com/stories/practicalcss/

Vertiefungsmöglichkeiten

• Ein alternatives Web-Formular für ein bestehendes Formular / Programm definieren

4.2 Formulare

Mit Ihren bisherigen Kenntnissen können Sie schon Webseiten mit einfachen Interaktions-

Möglichkeiten gestalten: mit Links ermöglichen Sie der LeserIn die Navigation durch das Web.

Formulare ermöglichen mehr Interaktion – aber immer noch in einem sehr strengen, sehr

strukturierten Rahmen. Abbildung 44 zeigt zwei typische Anwendungsgebiete für Web-Formulare:

das Eingabeformular der Suchmaschine Google und ein Bestellformular.


Abbildung 44 Formulare in Webseiten

Mit den HTML-Tags <form>, <input />, <textarea>, <option>, <select> werden Formulare aufgebaut.

Hier ein einfaches Beispiel:

Der <form>-Tag ist „unsichtbar“ und dient nur dazu, die anderen Eingabefelder zu bündeln. Im

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 45: Darstellung eines Web-Formulars im Browser

4.2.1 Eingabefelder

Innerhalb des <form>-Tag bauen Sie das Formular aus verschiedenen Eingabeelementen und den

„normalen“ HTML-Tags auf. Tabelle 2 zeigt die verschiedenen Arten von Text-Eingabefeldern.


Textfeld:

<input type="text"

name="meintextfeld"

value="text eingeben">

Passwort-Feld:

<input type="password"

name="meinpasswort">

mehrzeiliges

Textfeld

<textarea name="zitat">

In a hole in the ground

there lived a Hobbit.

</textarea>

Tabelle 2: Text-Eingabefelder

Für einzelne Fragen die mit Ja oder Nein zu beantworten sind wird das Eingabe-Element

„checkbox“ verwendet, siehe Tabelle 3.

<input type="checkbox" name="rauch"> Raucher

Tabelle 3: Checkbox für Ja-/Nein-Fragen

Für Fragen, bei denen eine von mehreren vorgegebenen Antworten möglich sein soll gibt es

verschiedene Eingabeelemente, die in Tabelle 4 gezeigt werden.

Radiobuttons

<input type="radio" name="size" value="XL"> XL

<input type="radio" name="size" value="L"> L

<input type="radio" name="size" value="M"> M

<input type="radio" name="size" value="S" checked> S

Menü

<select name="size2">

<option>XL</option>

<option selected>L</option>

<option>M</option>

<option>S</option>

</select>

Menü mit „leer“- Auswahl

<select name="size3">

<option>---Bitte Auswählen---</option>

<option>XL</option>

<option>L</option>

<option>M</option>

<option>S</option>

</select>

Liste

<select name="html" size="4" multiple="multiple">

<option>im Code</option>

<option>Dreamweaver</option>

<option>GoLive</option>

<option>Frontpage</option>

</select>

Tabelle 4: Eingabeelemente für Fragen mit mehreren Antworten


Radiobuttons, die zu einer Frage gehören, müssen den selben Namen tragen. der Wert ist unter-

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 5 gezeigt.

Absende-Button

<input type="submit" value="drück mich!">

Tabelle 5: Eingabefelder Absenden und Zurücksetzen

Neben dem Absende-Button gibt es noch andere Methoden wie ein Formular „abgesendet“ werden

kann: Falls das Formular nur ein einziges Text-Eingabefeld hat, kann man in diesem Feld auf ENTER

drücken um das Formular zu senden. Wenn das Formular ein Bild-feld enthält (siehe unten)

veranlasst ein Klick auf das Bild das Einsenden.

Zurücksetzen? Nein Danke!

Zurücksetzen-Button

<input type="reset" value="Zurücksetzen">

Den Zurücksetzen Button sollten Sie nur sehr selten einsetzen. Warum? Denken Sie an Ihre eigene

Erfahrung mit Web-Formularen zurück: Wie oft haben Sie auf einen Zurücksetzen Button gedrückt

und dann gedacht „super, alles gelöscht, genau das wollte ich“, und wie oft haben Sie auf einen

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 6 zeigt noch mehr Eingabefelder, die eher selten gebraucht werden.

Unsichtbares = Verstecktes Feld

<input type="hidden" name="webseite" value="www.students">

Button ohne Auftrag, für Javascript-Programme

<input type="button" value="Extrafenster" onclick="...">

Bildfeld, liefert angeklickte x+y Koordinaten.

<input type="image" name="position" src="austria.gif">

Visuelle Zusammenfassung mehrer Felder: fieldset + legend

<fieldset>

<legend>Kreditkarte</legend> <input name="nr" /><br>

<input type="radio" name="kk" value="Master" /> Master

<input type="radio" name="kk"


value="Visa" /> Visa <br> </fieldset>

Datei-Upload, funktioniert nur wenn die Formular-Daten mit Methode POST und speziellem enctype

an den Webserver geschickt werden, siehe Kapitel Fehler! Verweisquelle konnte nicht gefunden

werden. auf Seite 6.

Wählen Sie ein Bild aus: <input type="file" name="bilddatei">

Tabelle 6: selten verwendete Eingabefelder

Aus diesen Eingabeelementen ist jedes Web-Formular aufgebaut. Die Problematik der Formulare

liegt nicht in der Kenntnis der Eingabefelder, sondern im Entwurf der Interaktionsmöglichkeiten.

4.2.2 Interaktionsmöglichkeiten

Bei der Verwendung von Checkboxen, Radiobuttons, Menüs und Listen geben Sie genau vor, welche

Möglichkeiten die LeserIn hat. Wenn Sie beim Entwurf des Formulars eine Möglichkeit vergessen,

kann die LeserIn nichts mehr daran ändern. Deswegen ist hier besondere Sorgfalt geboten. Eine

besonders häufige Auslassung zeigt Tabelle 7.

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

Der linke Entwurf in Tabelle 7 läßt keine Bestellung nur einer Sorte Bier zu. Die „Mindestbestellmen-

ge“ für jede Sorte ist jeweils eine Kiste. Durch das Einfügen einer „Leer“-Option in die Menüs wird

diese Einschränkung aufgehoben.

Im Folgenden sehen Sie eine Reihe von Entwürfen eines Reservierungs-Formulars für ein Hotel.

Version 1: Ein Menü ermöglicht die Auswahl aus

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 46 Entwürfe für ein Zimmer-Reservierungs-Formular

Achtung: wenn Sie zu viele Eingabemöglichkeiten bieten entsteht Redundanz ,dann können Sie die

Bedeutung der Eingabe nicht mehr eindeutig erkennen.

Abbildung 47: Redundanz im Formular

In Abbildung 47 im linken Formular wird die Anzahl der bestellten Pizzas auf zwei Arten festgelegt:

durch eine Checkbox und eine Text-Eingabe. In der obersten Zeile stimmen diese beiden

Eingabefelder in Ihrer Aussage überein: Ja, 1 Stück Carbonara. Aber es ist auch möglich eine in sich

Widersprüchliche Bestellung abzugeben: Ja, Null Stück Margaritha bzw. Neine, 1 Stück 4-Käse.

Im rechten Formular wird diese Redundanz vermieden.

4.3 Daten absenden

Was passiert, wenn Sie ein Formular ausfüllen und auf den Absende-Button drücken? Meist werden

Sie an den Webserver zur weiteren Verarbeitung geschickt. Diese action wird direkt im <form>-Tag

angegeben.

<form action="http://multimediatechnology.at/~fhs666/pizza/bestellung.php">

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:[email protected]" method="POST" enctype="text/plain">

Achtung: diese Art die Daten zu senden ist sehr fehleranfällig: hierfür muß am Client-Computer 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.

Abbildung 48: Formular per E-Mail oder über den Webserver senden

4.3.2 Daten senden mit Methode GET

Wird im Form-Tag als Action eine URL mit http angegeben dann werden die Daten an den Webserver

gesendet. Dabei gibt es zwei Methoden: GET und POST. GET ist die einfachere.

In Abbildung 49 sehen Sie ein (leicht vereinfachtes) Bestellformular für Flugzeuge das die Methode

GET verwendet.

Abbildung 49: 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 Abbil-

dung 50 gezeigt.


Abbildung 50: URL einer GET-Anfrage

Die komplette URL lautet im Beispiel:

http://localhost/php/test.php?anzahl=4&adresse=Jakob+Haringer+Str.1%0D%0A5020+Salzburg

action 1.Eingabe 2.Eingabe

Die URL wird zusammengestellt aus:

1. der Action (aus dem form-Tag)

2. ? (einem Fragezeichen )

3. für alle Eingabefelder, getrennt durch & (kaufmännisches Und):

a. Name des Eingabefeldes

b. = (Gleich Zeichen)

c. Eingegebener / angeklickter Wert

Falls dabei Sonderzeichen vorkommen (z.B. Leerzeichen, Zeilenumbrüche, Umlaute, Fragezeichen,

kaufmännisches Und) werden diese wie folgt encodiert: Statt Leerzeichen wird ein + oder %20

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

Formular von Google analysieren werden Sie herausfinden, dass die Anfrage mit dem Suchwort

„Schokolade“ so aussieht:

http://www.google.com/search?q=Schokolade

Sie können diese URL einfach direkt in den Browser eintippen, ohne das Eingabeformular von Google

zu verwenden. Sie können diese URL in den Lesezeichen/Favoriten Ihres Browsers speichern oder in

einem Link verwenden:


<a href="http://www.google.com/search?q=schokolade">Suche nach Schokolade</a>

Gerade bei Suchmaschinen wird diese Möglichkeit oft genutzt: z.B. durch die Suchfelder, die in den

Browsern eingebaut sind:

Abbildung 51: Suchfeld von Firefox

Wenn Sie eine Web-Applikation erstellen müssen Sie auch darauf gefasst sein, dass die UserInnen

nicht nur die Web-Formulare verwenden, sondern auch URLs konstruieren und aufrufen. Die URL

(und nicht das Formular) ist also eine öffentliche Schnittstelle zu Ihrem Programm!

Ein lehrreiches Beispiel aus der Frühzeit des Web: es gab einst Webshops, die den Preis der Waren

als verstecktes Eingabefeld im Formular speicherten:

Airbus Bestell-Formular <form action="order.php" method="GET"> Anzahl: <input name="anzahl"> <br> Adresse: <textarea name="adresse"></textarea><br> Preis: 1.000.000 DM <input type="hidden" name="preis" value="1000000"> <input type="submit" value="Bestellung absenden"> </form>

Das gibt der KundIn die Chance ein „Gegenangebot“ zu senden (als „pricing attack“ bekannt):

http://happyshop.com/order.php?anzahl=4&adresse=Urstein+Süd+.1&preis=10

Wenn nun das Programm order.php einfach den Preis aus der URL übernimmt und auf die Rechnung

schreibt, wird der Airbus recht günstig (für die KundIn) verkauft.

Merke: Alle Eingaben die eine Web-Applikation erhält sind mit extremer Skepsis zu betrachten!

4.4 Formular und PHP

Die Daten aus einem Web-Formular werden vom PHP-Interpreter verarbeitet, die URL-Codierung

aufgelöst und die Daten dann in mehreren superglobalen Arrays zur Verfügung gestellt:

$_GET Dieses Array enthält die Parameter einer GET-Anfrage.

Um die Bestellung aus dem Formular in Abbildung 49 (Seite 73) zu verarbeiten, könnte folgendes

Programm verwendet werden:


<?php $anzahl = $_GET['anzahl']; $adresse = $_GET['adresse']; echo("<p>Ihre Bestellung über $anzahl Flugzeuge ist eingelangt</p>"); echo("<p>Die Flugzeuge werden binnen 1 Monat an $adresse geliefert</p>"); ?>

Dabei wird aber die Eingabe noch gar nicht geprüft. In dieser minimalen Version des

Bestellprogramms senden wir die Daten einfach vom Server per E-Mail weiter:

mail( "[email protected]", // To: "Bestellung von $anzahl Flugzeugen", // Subject: "Lieferung von $anzahl Flugzeugen an Adresse $adresse" // Text der E-Mail );

Im Sommersemester lernen Sie mehr über PHP.

4.5 Formular und Javascript

Am Beispiel eines Formular werden wir nun einfaches Javascript kennen lernen. Die Details von

Javascript werden in den nächsten Kaptieln, hier geht es nur um ein erstes Kennenlernen.

4.5.1 Javascript Einbetten

Javascript kann innerhalb des <script>-Tags irgendwo in den HTML-Code eingefügt werden.

<h1>Hallo Welt</h1> <script> var pi,r,a; pi = 3.141; r = 2; a = r * r * pi; </script>

Ohne Output merkt man aber gar nichts davon, nur mit Firebug könnte man die Variablen auslesen

wie in Abbildung 52 gezeigt.

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


4.5.2 Popup-Fenster

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

<script type="text/javascript"> alert("peng, du bist tot!"); var ja_nein = confirm("sollen die daten nicht gelöscht werden?"); var antwort = prompt("welche Daten sollen gelöscht werden. Keine Angabe löscht alles"); </script>

Achtung: So können Sie zwar bei gutgläubigen Menschen Herzinfarkte auslösen, aber Sie können mit

Javascript nicht wirklich Dateien löschen.

4.5.3 Formulare

Mit der Konsole von Firebug können Sie auch Formulare genauer untersuchen:

<form name="test"> <input value="0" size="10" name="in" > <input value="0" size="10" name="out"> </form>

Abbildung 53: 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.5.4 document.write

Mit dem Befehl document.write() kann Text/Code in den HTML-Code eingefügt werden.


<h1>Hallo Welt</h1> <script> document.write("<p>Hallo Javscript</p>"); </script> <p>Hallo HTML</p>

Der Browser interpretiert das Javascript und fügt das Ergebnis zu einem HTML-Dokument zusammen.

Achtung: Dieses resultierende HTML-Dokument existiert nur im Haupt-Speicher des einen Computers

auf dem der Browser gerade läuft, es wird nie abgespeichert! Mit Firebug kann man es aber sehen:

<h1>Hallo Welt</h1> <p>Hallo Javscript</p> <p>Hallo HTML</p>

Ein sinnvolles Anwendungsbeispiel dieses Befehls: Ich will ein Dropdown-Menü mit vielen Einträen,

bin aber zu faul um alle <option>-Tags einzutippen.

<form> <select name="Anzahl" id="Anzahl"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select> <input type="submit"> </form>

Ich ersetze also die option-Tags durch eine Schleife in Javascript:

<form> <select name="Anzahl" id="Anzahl"> <script language="javascript"> var i=0; while(i <= 50) { document.write("<option>" + i + "</option>"); i++; } </script> </select> <input type="submit"> </form>

Mit Ansicht -> Quelltext sieht man den Javascript-Code, In Firebug sieht man das Ergebnis:


4.5.5 Ereignisse und Ereignisgesteuerte Programmierung

Javascript ist eine Programmiersprache für die Gestaltung von Benutzerschnittstellen. Für grafische

Benutzerschnittstellen hat sich ein besonderer Programmierstil entwickelt: die ereignisgesteuerte

Programmierung. Dieser Stil kommt auch in Actionscript (in Flash), in Visual Basic, u.s.w. zum Einsatz.

Dabei lösen Ereignis, die die BenutzerIn setzt bestimmte Programmteile aus.

Im Webbrowser sind solche Ereignisse z.B.:

• Klicken auf einen Link

• Eintippen in ein Textfeld

• Anklicken einer Checkbox

• Absenden eines Formulares

Ein Beispiel für ereignisgesteuerte Programmierung mit einem Web-Formular: Das Bestellformular

für Bücher in Abbildung 54 soll automatisch den Gesamtpreis berechnen.

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


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

Eine Liste von Events bzw. on-Attributen für HTML-Tags finden Sie z.B: in selfhtml9.

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>

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

aufgerufen.

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:

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

Achtung:

enthält noch

einen Bug!


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

Funktion nie eine Summe, sondern führt nur eine Aneinanderfügung der Zahlen als Text durch wie in

Abbildung 55 gezeigt: aus 100 + 200 + 0 + 0 + 0 + 0 wird 1002000000.

Abbildung 55: Falsche Berechnung in Javascript: Konkatenation statt Addition

Bei der Multiplikation mit * tritt dieses Problem nicht auf, da der Stern keine zweite Bedeutung hat.

Mit der Funktion parseInt() können Sie einen String in eine Integer-Zahl verwandeln bevor Sie die

Addition durchführen.

4.5.6 Formular prüfen

Mit Javascript kann man schon vor dem Absenden des Formulares prüfen ob wichtige Daten

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:

<script> function formularok() { var ok, fehler; ok = true; fehler = ""; if ( document.pizzaformular.liefername.value == "" ) { fehler += "Sie müssen den Empfänger angeben\n"; ok = false; } if ( document.pizzaformular.adresse.value == "" ) { fehler += "Sie müssen eine Lieferadresse angeben\n"; ok = false; } // weitere Überprüfungen if ( ok ) { return true; } else { alert("Das Formular ist nicht ok:\n" + fehler ); return false; } } </script> </head> <body> <form name = "pizzaformular" action = "http://webwelt.horus.at/html/form/echo.cgi" onsubmit = "wert=formularok(); return wert;"> Empfänger: <input type="text" name="liefername" id="liefername" /> <br /> Adresse: <input type="text" name="adresse" id="adresse" /> in 5020 Salzburg<br /> Telefon/Handy: <input type="text" name="tel" id="tel" /> in 5020 Salzburg<br /> <input name="" type="submit" /> </form>


5. Javascript und DOM


• Was der Unterschied zwischen Javascript und Java ist. Welche Sprache für eine bestimmte

Problemstellung passend ist.

• Dass Javascript eine Programmiersprache im Web-Browser ist. Dass Javascript

Kompatiblitätsprobleme hat, aber trotzdem die einzige Chance ist, Webseiten interaktiver zu

machen.


• Mit den DOM-Befehlen alle Elemente in eine Webseite manipulieren.


• Kapitel „Javascript Basics“ – Overview bis Functions in

MURPHEY, Rebecca(2010): jQuery Fundamentals. http://jqfundamentals.com/

• MORRISON,Michael (2008): Head First JavaScript (Head First). O'Reilly. ISBN 0596527748.

• FLANAGAN,David (2007): JavaScript: Das umfassende Referenzwerk. O'Reilly. ISBN

3897214911.

• CROCKFORD,Douglas (2008): JavaScript: The Good Parts. O'Reilly Media, . ISBN 0596517742.

• STEYER,Ralph (2003): JavaScript in 21 Tagen . Schritt für Schritt zum Programmierprofi..


5.2 Hintergründe

Javascript ist eine Programmiersprache die in HTML eingebettet und vom Browser interpretiert wird.

Im Browser ist der Wirkungsbereich von Javascript auf das Fenster und das aktuelle Dokument

beschränkt – es kann nicht die Festplatte löschen oder Excel starten.

Neben der Verwendung für kleine Effekte im Browser hat Javascript noch weitere wichtige

Anwendungsgebiete:

• Als „AJAX“ zum Nachladen von Daten macht das Web viel interaktiver und angenehmer in

der Benutzung.

• Mit Javascript können Webseiten auch „offline“ – also ohne Verbindung zum Internet und

dem Webserver – im Browser weiterarbieten.

• Der Server Node JS ist ein (Web)Server, den man mit Javascript programmieren kann. Er wird

besonders für realtime-applikationen im Web eingesetzt, z.B. für Spiele.

• Javascript wird in einigen Programmen als Makro-Sprache verwendet, z.B. seit 2003 in

Indesign und Illustrator.

• Die No-SQL Datenbank CouchDB verwendet Javascript als Abfragesprache.

• 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 Skriptsprache im

Browser „Javascript“.

Javascript Java

Wer hat’s erfunden? Netscape / Brendan Eich Sun / Gosling

Interpretiert Sprache Kompilierte Sprache

Typbindung Wenige Datentypen, Probleme

werden erst zur Laufzeit erkannt

Datentypen und Klassen werden

streng unterschieden und zur

Compilezeit geprüft

Verwendung Im Webbrowser, am Webserver, in

Flash, in Illustrator und Indesign

Überall (Chipkarten, am Server, im

Browser, im Handy)

Projekte Früher nur winzige Projekte (z.B: Animatis-Effekt), in den letzten

Alle, auch Großprojekte mit vielen


Jahren: JS als wichtiger Teil einer

Webappliaktion wie Facebook,

Gmail, etc.

„Mannjahren“

ProgrammiererInnen Auch Web-DesignerInnen Nur InformatikerInnen

Objektorientierung Objekte und Prototypen Objekte und Klassen

5.2.2 Geschichte von Javascript

Javascript wurde ursprünglich bei Netscape von Brendan Eich erfunden, und dann von verschiedenen

Herstellern weiterentwickelt. Es war eines der Schlachtfelder im Browser-War: Microsoft und

Netscape versuchten durch verschiedene Javascript-Implementierungen die Position des eigenen

Browsers zu verbessern und Webseiten im gegnerischen Browser unbrauchbar zu machen.

Erst nachträglich gab es (partielle) Einigung auf Standards. Mit dem ECMA-Standard 262 wurde die

Syntax fixiert. Mit dem „Document Object Model“ (DOM) wurde der Zugriff auf die Webseite

vereinheitlicht. Libraries wie Prototype oder jQuery ebenen die letzten Unterschide noch aus.

Lange Zeit waren kleine Javascript-Programme eine relative unabhängige Ergänzung für Web-

Applikationen. Ein Beispiel dafür wäre ein Javascript-Kalender der die Eingabe eines Datums in ein

Eingabefeld erleichtert.

Seit 2005 wir unter dem Schlagwort AJAX Javascript eng mit der serverseitigen Webapplikation

verzahnt: AJAX steht für asynchrones Nachladen von Teilen der Webseite über Javascript.

Seit ca. 2008 sind offline-fähige Javascript-Applikationen möglich: Der Browser speichert alle

notwendigen Teil der Website permanent ab, und kann die Applikation auch benutzen wenn keine

Internetverbindung (mehr) besteht. Dies Applikationen haben z.B: auf dem iPad eine große

Bedeutung.

Abbildung 56: Offline Applikation everytimezone.com

Keine Internetverbindung


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. Sie kennen diese Idee schon von CSS und den CSS-Selektoren.

In folgendem Beispiel ist 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)

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 später eine Javascript-Library namens jQuery verwendet. Mit dem <script>-

Tag im Head des Dokuments wird die externe Javascript-Datei eingebunden:

<script src="jquery.js" type="text/javascript"></script>

Wird der <script>-Tag auf diese Weise (mit dem Attribut src) verwendet, dann darf er keinen Inhalt

zwischen <script> und </script> enthalten. Achtung: die Schreibweise ohne Ende-Tag: <script

src=“jquery“ /> funktionert nicht!

Der <script>-Tag

Javascript-Programme können im HTML-Code mit dem <script>-Tag eingebettet werden. Das

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

ersetzt. Nur sehr wenige Leute müssen bei sehr wenigen Gelegenheiten noch document.write

verwenden - z.B. die AutorInnen der Javascript-Libaries wie John Resig von jQuery.

Javascript in einer URL

Als URL kann man auch ein kleines Javascript-Programm angeben, z. B. bei einem Link:

<a href="javascript:location='http://www.google.at/'">zu Google nur mit Javascript</a>

Die “Javascript-in-einer-URL”- Schreibweise ist in HTML-Seiten nicht sehr sinnvoll, da sie für Browser

ohne Javascript-Fähigkeit die Links unbrauchbar macht.

Hier eine Version die dem Prinzip der „graceful degradation“ entspricht. Sie funktioniert mit und

ohne Javascript sinnvoll:

<a href="http://www.google.at" onclick="ok=confirm('go?'); return ok;">google</a>

Ohne Javascript ist es ein ganz normaler Link zu google.

Mit Javascript erscheint ein Dialog, je nach Antwort wird der Link entweder aufgerufen oder nicht.

Das funktioniert gleich wie beim onsubmit-Attribut des form-Tags: Wenn der Event-Handler false

zurückgibt wird das Event unterbrochen.

Die onevent - Attribute

Meist werden Javascript-Programme so geschrieben, dass sie nicht gleich beim Laden der Seite

starten, sondern erst wenn gewisse Ereignisse (Events) eintreten (siehe Kapitel 4.5.5, Seite 79)

Ein paar typische Events mit ihren typischen HTML-Tags:

<body onload="..."> Das Programm wird ausgeführt, nachdem die ganze Seite

geladen + fertig dargestellt ist


<a href="..."

onmouseover="..."> Das Programm wird ausgeführt wenn die Maus über den

Link bewegt wird (auch: onmouseout). (Achtung:

funktioniert nicht auf Touch-Devices – so wie :hover)

<input type="button"

onclick="..."> Das Programm wird ausgeführt wenn auf den Button

geklickt wird. Das Programm muß true oder false

zurückgeben um anzuzeigen ob die normale Funktion des

Buttons wirklich ausgeführt werden soll.

<form onsubmit="..."> Das Programm wird ausgeführt wenn der Einsende-Knopf

des Formulars betätigt wird, aber bevor die Daten

wirklich gesendet werden. Falls der Javascript-Code false

zurückgibt werden die Daten aber nicht versandt!

<a href="..."

onclick="..."> Das Programm wird ausgeführt wenn der Link angeklickt

wird. Falls der Javascript-Code false zurückgibt wird der

Link aber nicht aktiviert!

<input onchange="..."> Das Programm wird ausgeführt wenn der Inhalt des

Eingabefeldes verändert wurde

Eine ausführliche Liste der Events, und eine ausführliche Auflistung welcher HTML-Tag mit welchem

Event kombiniert werden kann, finden Sie z.B. in selfhtml10.

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.

Javascript ist eine objektorientierte Programmiersprache. Was bedeutet objektorientierung? Die

Grundidee ist, dass ein Objekt nicht nur eine Variable ist, die Daten speichert, sondern zusätzlich

auch noch Funktionen existieren können, die zu diesem Objekt gehören.

Zum Beispiel das Objekt document ist in Javascript im Browser immer vorhanden. Es repräsentiert

die aktuell geladene Webseite. Dieses Dokument hat einige Eigenschaften (Variablen) und einige

Methoden (Funktionen):

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


// document.location // diese Eigenschaft speichert die aktuelle URL document.location = "http://io9.com"; // wenn man einen neuen Wert in location speichert surft der Browser hin document.alert("hi"); // die Methode alert zeigt ein Popup-Fenster an document.alert("meine URL ist " + document.location);

Es gibt in Javascript aber auch „normale“ Variablen und Funktionen, nicht nur Objekte, Eigenschaften

und Methoden. Folgendes Beispiel verwendet die Methode getElementById des document-Objekts um

ein bestimmtes DIV in der Webseite auszuwählen.

Abbildung 57: Javascript-Beispiel in FireBug auf der Website http://everytimezone.com/

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 die Deklaration nicht nötig. Wenn eine Variable zum ersten Mal im Programm erwähnt

wird, wird sie vom Interpreter angelegt.

Auch die folgenden Beispiele können Sie direkt in Firebug in der Console ausprobieren wie in Abbil-

dung 58 gezeigt: Wenn Sie einen Ausdruck eintippen wird er ausgewertet, mit dem Befehl conso-

le.log( … ) können Sie direkt auf die Console schreiben.

Abbildung 58: Javascript Console in Firebug

Variablen in Javascript können Zahlen, Strings, Arrays, Objekte enthalten – der Interpreter trennt

Variablen nicht nach verschiedenen Datentypen:


a = 10; // typeof(a) == "number" a = 3.141; // typeof(a) == "number" a = "ein text"; // typeof(a) == "string" a = true; // typeof(a) == "boolean" a = undefined; // typeof(a) == "undefined"

Arrays

Arrays in Javascript können wie in C mit eckigen Klammern und Integer-Index ausgelesen werden:

b[0], b[1], … Aber eigentlich sind Arrays schon Objekte.

Für das Erzeugen des Arrays gibt es zwei Schreibweisen

var b; b = ["eins", 2, 3.141, true]; // JSON-Schreibweise b = new Array("eins", 2, 3.141, true); // Objekt-Schreibweise // typeof(b) == "object"

Die Werte im Array können verschiedene Daten haben (String, Number, Boolean,...). Die Größe des

Arrays ist nicht beschränkt, die aktuelle Länge des Arrays kann aus der Eigenschaft .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 von 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 die sie nicht in anderen Programmiersprachen finden werden ist,

dass Eigenschaften eines Objekts nicht nur über die Punkt-Schreibweise, sondern auch über eckige

Klammern – also wie ein Array – angesprochen werden können:


alert("Das Shirt ist " + c.farbe ); alert("Das Shirt ist " + c["farbe"] );

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

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

Mit dieser Schreibweise und der for-Schleife kann man über alle Eigenschaften eines Objektes

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.

Hier eine Liste der wichtigen Objekte, Methoden, Eigenschaften für die DOM:

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

node.getElementById() node.getElementsByTagName() node.appendChild() node.cloneNode() node.getAttribute() node.setAttribute() node.hasChildNodes() node.insertBefore() node.removeAttribute() node.removeChild() node.replaceChild()

Was fehlt: es gib leider keine Methode getElementByClassName.

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;

oder – etwas kürzer – über die Eigenschaft textContent:

vn = document.getElementById("v_25").textContent;

textContent funktioniert auch bei Nodes die noch weitere verschachtelte Tags enthalten und

extrahiert immer den gesamten Text aus allen “Blättern” des DOM-Baums.


6. jQuery


• Was „unobstrusive Javascript“ / „graceful degradation“ / „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


• Mit jQuery Teile einer Webseite aus- und einblenden

• Mit jQuery dynamische Formulare gestalten


• http://jquery.com

Vertiefungsmöglichkeiten

Erforschen Sie die Dokumentation und die Tutorials von jquery. Für Fortgeschrittene Alternativ:

befassen Sie sich stattdessen mit einer der anderen Libraries:

o Prototype http://www.prototypejs.org/ + Scriptaculous http://script.aculo.us/

o Ext

o Mootools http://mootools.net/

o Dojo http://dojotoolkit.org/

o YUI (von Yahoo) http://developer.yahoo.com/yui/


Die Library jQuery unterstützt das Prinzip der „graceful degradation“ – auch ohne Javascript sind

Webseiten mit jQuery immer noch gut verwendbar. Dieses Prinzip wird auch „progressive

enhancement“ oder „unobstrusive javascript“ genannt, und bezieht sich nicht nur auf Javascript,

sondern auch auf andere „Zusatz-Technologien“ wie z.B. Flash.

Die Idee ist dabei immer die Gleich: man baut die Webseite zuerst ohne Javascript, und fügt dann

Javascript hinzu (ohne die Verwendbarkeit ohne Javscript zu zerstören). Der Inhalt (Content) der

Webseite bleibt auch ohne Javascript zugänglich.

Abbildung 59: Die Rolle von Content, Darstellung und Programmierung (Unobstrusive Javascript)

Von dieser Herangehensweise profitieren nicht nur Blinde, Menschen mit veralteten Browsern oder

exotischen Ausgabegeräte. Auch für Suchmaschinen wie Google oder andere Programme die die

Information aus den Webseiten weiter verarbeiten ist dieses Prinzip hilfreich.

Um zu testen, ob das wirkliche funktioniert kann man ganz einfach mit dem Firefox-AddOn QuickJava

testen. Wie in Abbildung 60 gezeigt kann Javascript mit einem Klick deaktiviert werden.

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


o1 = $('h1'); o2 = o1.addClass("gag"); o3 = o2.append(":");

Wenn man die “Zwischen-Objekte” o1, o2, o3 nicht wirklich noch einmal verwenden will, dann

braucht man sie auch nicht in einer Variable zu speichern. Eine alternative Schreibweise ist dann:

$('h1').addClass("gag").append(":");

Dabei kann man auch Zeilenumbrüche verwenden, folgender Code hat genau die gleiche Wirkung:

$('h1') .addClass("gag") .append(":");

6.2.3 Funktionen als first-class citizens11

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 kennen schon die Schreibweise für den Aufruf der Funktion: auch wenn die Funktion keine

Argumente hat werden auf jeden Fall die runden Klammern geschrieben:

gold1 = create_gold();

In Javascript gibt es eine zweite, ähnliche Scheibweise ohne die runden Klammern. Dabei wird die

Funktion nicht aufgerufen, sondern in der Variable f gespeichert:

f = create_gold;

Nun kann die Funktion auch unter dem neuen Namen f aufgerufen werden:

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


gold2 = f();

6.2.4 Anonyme Funktionen

Da Funktionen in Variablen gespeichert werden können, ist es nicht unbedingt nötig, dass Sie einen

normalen Funktionsnamen haben. Die folgende Funktion hat den Funktionsnamen hase:

function hase() { alert ("mein name ist hase"); }

Alternativ eine Schreibweise ohne Namen, die Funktion wird sofort in der Variable f gespeichert:

f = function() { alert("ich habe keinen namen"); };

Die beiden Funktionen können nur auf die gleiche Weise aufgerufen werden:

hase(); f();

Bei der Verwendung von jQuery werden oft Funktionen 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. Stattdessen

verwendet man eine anonyme Funktion:

$(document).ready( function(){ // Your code here });

Zur Beruhigung: auch wenn Sie die Schreibweise nicht ganz durchschauen können Sie jQuery

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 so ;-)

6.3 Selektieren und Manipulieren mit jQuery

jQuery verwendet die Schreibweise der CSS-Selektoren um Nodes des DOM auszuwählen:


$("a") /* alle A-Tags */ $("h1") /* alle Überschriften h1 */ $("p.extra") /* alle p-tags mit klasse extra */

jQuery definiert noch ein paar zusätzliche Selektoren12, die es in CSS (noch) nicht gibt:

$("tr:even") /* Alle geraden Zeilen der Tabelle */ $("p:contains('Warnung')") /* Absätze die die Zeichenkette Warnung enthalten */ $(":checkbox") /* Alle input-Tags vom typ checkbox */

Die Selektion allein verändert die Webseite noch nicht. Dafür bietet jQuery eine Reihe 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"); /* alle A-Tags erhalten die Klasse wichtig */ $("h1").append(":"); /* in Überschriften h1 wird ein Doppelpunkt angefügt */ $("h1").prepend("Titel:"); /* --||-- wird vorne ‚titel:’ eingefügt */ $("p.extra").hide(); /* alle p-tags mit klasse extra werden versteckt */

6.4 Interaktion mit jQuery

jQuery bietet für die verschiedenen Events eigene Methoden an, als Argument wird eine Funktion

übergeben, die aufgerufen werden soll wenn das Event feuert. Hier kommen meist anonyme

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:

12 http://docs.jquery.com/Selectors


<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, der zwishcen sichtbar und unsichtbar hin und

her schlatet (mit display:none)

6.5 Formulardaten Prüfen mit jQuery

In Kapitel 4.5.6 (Seite 81) haben Sie gelernt wie Sie mit Javascript die Daten eines Webformulars prü-

fen können bevor das Formular abgesendet wird. Mit jQuery können wir dieses Programm noch ver-

feinern: Jeweils beim betroffenen Eingabefeld wird direkt eine Fehlermeldung angezeigt:


7. Anhänge

7.1 Quellenverzeichnis

Web + HTTP

HTTP 1.1: RFC 2616 - http://www.w3.org/Protocols/rfc2616/rfc2616.html

HTML + CSS

Homepage des WWW-Consortiums. http://www.w3c.org/

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

Jellinek, Brigitte (2006): Handbuch Webdesign. Wikibook. http://de.wikibooks.org/wiki/Webdesign

Freeman, Elisabeth (2006): HTML mit CSS & XHTML von Kopf bis Fuß. O'Reilly. ISBN 978-3897214538

Shea, Dave/ Holzschlag, Molly: CSS Zen Garden. http://csszengarden.com/

Müller, Peter (2007): Little Boxes. Markt+Technik-Verlag. ISBN 978-3827242242

Münz, Stefan: Selfhtml. http://de.selfhtml.org

MÜNZ,Stefan / NEFZGER,Wolfgang (2005): HTML Handbuch. Studienausgabe. Franzis. ISBN

3772366546.

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

München. ISBN 3827327326.

CEDERHOLM,Dan (2007): Bulletproof Webdesign (2. Ausgabe): Absolut flexibel und für alles

gewappnet mit CSS und XHTML. Addison-Wesley, München. ISBN 382732629X.


PHP

PHP Homepage mit Dokumentation in verschiedenen Sprachen: http://php.net

Templating-System Smarty für PHP. http://smarty.php.net/

PEAR - PHP Extension and Application Repository. http://pear.php.net

KERSKEN,Sascha (2005): Praktischer Einstieg in MySQL mit PHP. O'Reilly Vlg GmbH & Co. ISBN

3897214032.

Lerdorf, Rasmus (2006): Programmieren mit PHP. O'Reilly; 2. Auflage. ISBN 978-3897214736

Schmidt, Stephan (2007): PHP Design Patterns. O'Reilly. ISBN 978-3897214422.

Welling, Luke (2004): MySQL-Tutorial. München: Addison-Wesley. ISBN 978-3827321695.

SHIFLETT,Chris (2005): Essential PHP Security. O'Reilly Media, . ISBN 059600656X.

Javascript + AJAX

MORRISON,Michael (2008): Head First JavaScript (Head First). O'Reilly Media, . ISBN 0596527748.

FLANAGAN,David (2007): JavaScript: Das umfassende Referenzwerk. O'Reilly. ISBN 3897214911.

CROCKFORD,Douglas (2008): JavaScript: The Good Parts. O'Reilly Media, . ISBN 0596517742.

STEYER,Ralph (2003): JavaScript in 21 Tagen . Schritt für Schritt zum Programmierprofi.

Markt+Technik. ISBN 3827265088.

POWERS,Shelley (2007): Adding Ajax. O'Reilly Media, . ISBN 0596529368.

jQuery Library. http://jquery.com/


7.2 Stichwortverzeichnis

$ 96

~ 65

+ 81

a 22, 37

Absatz 30

Absende-Button 70

absenden 72

absolut 35, 62

absolute 53

Absolute Positionierung 53

Abstand 35

action 72

Action 68

Addition 81

alert 77

alt 17, 21

Alternativtext 21

Anker 37

Anonyme Funktion 97

Apache 63

Array 91

Auflösung 42

Außenabstand 35

auto 51

background-color 29, 37

background-image 37

background-repeat 37

Bandbreite 7

Benutzerschnittstelle

Programmierung 79

Berners-Lee

Tim 7

Bestellformular 67

Bild 17, 21, 38, 39

Bildausschnitt 57

Bildfeld 70

Bildschirmgröße 42

body 22

border 35

bottom 53

Box Model 35

br 17

Braille 12

Browser 12

Line Mode 8

lynx 12

Mosaic 12

Mozilla 12

Opera 12

Button 70

Cascading Stylsheet 29

case-sensitive 63

CERN 7

character entities 16

Checkbox 69

class 34

Client 11

Code 24

Colorzilla 35

confirm 77

console 90

CSS 29

CSS Layout 50

CSS-Sprites 57

Datei-Upload 71

default.htm 64

Deklaration 32, 90

die externe Javascript-Datei 87

DirectoryIndex 64

div 34

Doctype 22

Document Object Model 85

Dollar 96

Dreamweaver 26

Dropdown-Liste 69

Eich 85

Eigenschaft

eine Javascript-Objekts 91


einfügen 86

Eingabefeld 68

Eingabeformular 67

em 35

E-Mail 11

Ereignis 79

Event 79

ex 35

Farb 35

Farbe 37

fieldset 70

Firebug 30, 34, 36, 76, 78, 90

Firefox AddOn

Colorzilla 35

Firebug 30, 34, 36, 76, 78, 90

FireFTP 26

QuickJava 95

FireFTP 26

first-class citizen 97

float 55

Float 52

font-family 29

font-size 29

for 92

form 68

Formular 67

Formulare

und Javascript 77

FTP 11, 25

Funktion 80

as first-class citizens 97

gekachelt 37

GET 73

gif 22

graceful degradation 19, 95

Graceful Degradation 38

head 22

Hintergrundbild 37

hover 56

href 22, 38

HTML 11

HTTP 11, 14

Hypertext Transfer Protocol 14

id 34

img 17

Inch 35

index.html 64

Initialisierung 90

Innenabstand 35

input 68

Instanziierung 91

Interaktion 67

javascript

unobstrusive 95

Javascript in einer URL 88

jpg 22

justify 30

Kachel 37

Klasse 33

Kompatibilität 18

Konkatenation 81

Koordinaten 53

Layout 42

mit CSS 50

mit Tabellen 24

Leerzeichen 65

left 53

legend 70

length 91

li 23

Line Mode Browsers 8

line-height 30

link 33

CSS-Selektor 38

Link 22

relativ 26

Liste 23

Liste (Eingabefeld) 69

list-style-type 54

log 90

lynx 12

margin 35


Maßeinheiten 35

Menü 69

Mosaic 12

Mozilla 12

name 38

Name

des Eingabefeldes 74

Navigation 39

Navigationsmenü 54

Node 93

Objekt 91

ol 23

onchange 79

onsubmit 82

Opera 12

option 68

Ordnerstruktur 26

padding 35

Parameter 14, 74

parseInt 81

Passwort-Feld 69

Peer-zu-Peer 11

PHP 55

Pixel 30

png 22

position 53

Positionierung

absolut 53

float 52

pricing attack 75

progressive enhancement 95

prompt 77

Prozent 35

Prüfung

Formulardaten 81

von HTML Code 24

Pulldown-Liste 69

QuickJava 95

Radiobutton 69, 70

Rahmen 35

Redundanz 72

rel 33

relativ 35, 62

relativer Link 26

repeat 37

right 53

Rule 32

Schleife 92

Schnittstelle 75

Schrift 29

Schriftgröße 30

script 87

Scrollen 13

Secure File Transfer Client 25

Security 75

Seite 13

select 68

Selektor 32, 60, 98

senden 72

serifenlos 29

Server 11

SFTP 25

Sicherheit 75

span 34

Sprites 57

src 17, 21

Standard-Dokument 64

stateless 15

String-Konkatenation 81

style

Attribut 33

Tag 33

Stylsheet 29

Tabelle 23

table 23

Tag 17

TCP 14

td 23

text-align 30

textarea 68

Textbereich 69

Textfeld 69


text-indent 30

Textmarke 37

th 23

this 99

toggle 100

top 53

tr 23

Trennung von Struktur und Darstellung 31

Überschrift 38

ul 23

Umlaut 66

unobstrusive javascript 95

unsichtbar 86

Unsichtbares Feld 70

Upload 25

url 35

URL 11, 14

Validator 24

value 77

Version

HTML 16

Verstecktes Feld 70

visited 38

Webbrowser Siehe Browser

WebDAV 25

Webseite 13

Webserver 11, 63

Website 13

whitespace 17

width 51

XHTML 11

XML 16

Zeilenumbruch 17

Zentimeter 35

zentrieren 51

Zurücksetzen-Button 70

zustandslos 15

mmt webprogrammierung 1 im winter semester 2010

Documents