Hand Buch Web Design Mi Tillu

Programmierung 1: Skript
Programmierung 1:
XHTML, CSS,
Dreamweaver
und
Javascript

Studiengang MMA, 1. Semester, Wintersemester 2006/07
DI Brigitte Jellinek
Version 3.0

Dieses Skriptum wird in dieser Form nicht weiter entwickelt,
sondern wurde im August 2006 als Wikibook publiziert:

http://de.wikibooks.org/wiki/Handbuch_Webdesign
Diese letzte Word/PDF-Version enthlt alle Illustrationen, bleibt aber auf dem Status August 2006.

Inhaltsverzeichnis

1 DAS WORLD WIDE WEB 4
1.1 Technische Grundlagen 4
1.2 Die gestalterische Herausforderung 13
2 XHTML 25
2.1 Characterset 25
2.2 Sonderzeichen 27
2.3 HTML-Tags 28
2.4 Whitespace 28
2.5 Kompatibilitt 30
2.6 Text formatieren 30
2.7 Bilder 32
2.8 Links + Anker 35
2.9 Gesamt-Struktur einer Webseite 38
2.10 Tags fr den Head 38
2.11 Tabellen 40
2.12 Farben und Hintergrundbilder 41
3 CSS CASCADING STYLE SHEETS 45
3.1 Syntax von Stylesheets im Detail 46
3.2 Texte und Farben mit Stylesheets 47
3.3 Klassen und IDs 50
3.4 Layout mit Stylesheets - FEHLT 51
3.5 Einsatz von Stylesheets 52
4 DREAMWEAVER 55
4.1 Dreamweaver GUI 56
4.2 Text formatieren mit Dreamweaver 60
4.3 Links und Anker 60
4.4 Bilder und Rollovers 61
4.5 Unsichtbare Elemente 62
4.6 Navigation in Tabellen 63
5 ADVANCED WEBDESIGN 71
5.1 Formulare 71
5.2 Ebenen 80
5.3 Frames 82
5.4 Layout im Vergleich 85
5.5 Multimedia 86
5.6 Java-Applets verwenden 88
6 EIN EINBLICK IN JAVASCRIPT 91
6.1 Der <script>-Tag im Body 91
6.2 die onEvent - Attribute 91
6.3 Der <script>-Tag im Head 92
6.4 Was kann ein Javascript-Programm 92
6.5 Probleme mit Javascript 93
6.6 Die Standardisierung von Javascript 94
7 ANHNGE 97
7.1 Glossar 97
7.2 Quellen und Referenzen 98
7.3 Tabellenverzeichnis 98
7.4 Abbildungsverzeichnis 98

Achtung: Dieses Skriptum erhebt nicht den Anspruch auf Vollstndigkeit.
Dieses Skriptum setzt die professionelle Anwendung des Betriebssystems
Windows bzw. MacOS, insbesondere die Handhabung von Dateien und Ordnern
voraus. Die Handhabung von Maus und Tastatur, von Mens und Standard-
Dialogen ist daher nicht Inhalt dieses Skriptums.
Die wichtigsten Prinzipien, und die wichtigsten HTML-Tags (fr Links, Bilder,
Tabellen, Formulare) werden hier kurz vorgestellt. Alle Details knnen und sollen
Sie bei selfhtml1 oder in einem hnlichen Referenzwerk nachschlagen. Sie
sollten wie bei allen Themen parallel auch andere Quellen zu HTML
konsultieren, und die Aussagen in diesem Skript kritisch hinterfragen!
Fehler! Formatvorlage nicht definiert. Multimedia-Programmierung 1

1
http://de.selfhtml.org
Intro zum Kapitel Das World Wide Web
Die Lehrveranstaltung Programmierung 1 behandelt das Erstellen von
Webseiten fr das World Wide Web. Aber was ist das WWW eigentlich? In
diesem ersten Kapitel werden wichtige technische Grundbegriffe vorgestellt, am
Ende des Kapitels knnen Sie die Frage Was ist das World Wide Web
beantworten.
Seite 4 Das World Wide Web
1 Das World Wide Web
Man knnte das World Wide Web von vielen Seiten betrachten. Ein paar
mgliche Definitionen wren:
Das Web ist die Gesamtheit aller Webseiten. Das sind ber eine Milliarde
Seiten (wenn man den Angaben von Google, Stand Frhjahr 2005, glaubt)
Das Web ist ein soziales Phnomen: es gibt Leute die Webpages gestalten,
Leute die im Web surfen um Webseiten zu lesen. Manchmal nehmen diese
Leute ber E-Mail Kontakt miteinander auf, und treffen sich vielleicht auch
in der realen Welt, meist aber nicht.
Das Web ist ein konomisches Phnomen: Leute kaufen und verkaufen
ber das Web, die einen leben davon, Webseiten zu gestalten, die
anderen leben davon, Suchmaschinen zu betreiben, und viele sind bei
dem Versuch mit dem Web etwas zu verdienen in Konkurs gegangen.
Das Web ist die grte Akkumulation, vernetzter Information die es in
der Geschichte der Menschheit gegeben hat.
Das Web ist der grte Sauhaufen, die grte Daten-Mllhalde, die es in
der Geschichte der Menschheit gegeben hat. Die Daten am Web sind weit
davon entfernt Information oder Wissen zu sein.
Als naive Computer-Userin benutze ich einen Webbrowser (z.B. Internet
Explorer oder Mozilla Firefox oder Opera). Ich lese damit einzelne
Webseiten. Aber ich wei vielleicht nicht, was das Web ist.
Die technische Antwort ist: Das World Wide Web ist ein Internet-Dienst
mit Client-Server Architektur, der durch die Standards URL, HTTP und
HTML definiert wird. Die aktuelle Version dieser Standards finden Sie am
Webserver des World Wide Web Consortiums.
Diese letzte, technische Antwort sollten Sie verstehen. aber dazu mssen wir
zuerst ein paar Grundlagen klren.
1.1 Technische Grundlagen
Das Internet ist ein weltweites Computernetzwerk. Es sind verschiedene
Computer daran angeschlossen: PCs mit Betriebssystem Windows oder Linux,
Macs, UNIX-Workstations, und noch viele mehr.
Die Leitungen zwischen den Computern sind sehr unterschiedlich: Kupfer-
leitungen, Glasfaserleitungen, Satelliten-Verbindungen, Funkstrecken.
Die Besitzverhltnisse sind kompliziert: die Leitungen und Computer gehren
verschiedenen Firmen, Universitten, Schulen, Vereinen, Privatpersonen.
Mgliche Definitionen
des World Wide Web
technische Definition
des World Wide Web
Internet
Wem gehrt das
Internet?
Das World Wide Web Seite 5

Abbildung 1: Zwei Computer die ber das Internet Daten austauschen
Was kann das Internet? Daten von einem Computer zum anderen bertragen.
In Diagrammen wird das Internet oft als Wolke dargestellt da es zu kompliziert
ist, um ein korrektes Bild davon zu zeigen. Gezeigt werden nur die beiden
Computer die ber das Netz Daten austauschen, und dazwischen die Internet-
Wolke wie in Abbildung 1.
Internet-Dienste sind zum Beispiel: das World Wide Web, die E-Mail, das
Chat-System ICQ, die Tauschbrse Napster. Nehmen wir das Beispiel E-Mail: es
gibt viele verschiedene E-Mail Programme. Aber mit all den verschiedenen
Programmen funktioniert E-Mail doch immer gleich. Wie die Programme genau
ihre Daten austauschen ist durch ein so genanntes Protokoll festgelegt. (So wie
durch ein Protokoll festgelegt ist, wie Sie sich verhalten wenn Sie der Knigin
von England vorgestellt werden nur, das die Protokolle fr Computer noch
wesentlich genauer festlegen wer was wann in welcher Reihenfolge tun darf).

Abbildung 2: Verschiedene Dienste benutzen eine gemeinsame Infrastruktur
Das Internet ist die Infrastruktur fr die verschiedenen Internet-Dienste.
So wie das Straennetz die Infrastruktur ist fr LWKs, PWKs, Fahrrder, und so
weiter, siehe Abbildung 2.
Bei Internet-Diensten unterscheidet man zwei verschiedene Architekturen:
Client/Server und Peer zu Peer:
Internet Dienst
Viele Internet-Dienste unterscheiden zwischen Client
2
und Server. Der Client
ist das Programm, das von einem Menschen direkt benutzt wird im Fall von
E-Mail also zum Beispiel das Mail-Programm Outlook. Der Server ist ein
Programm das meist auf einem Computer luft der stndig im Betrieb und mit
dem Internet verbunden ist. Im Fall von E-Mail steht der Mail-Server der fr
Ihre FH E-Mail zustndig ist in einem Computerraum im 1. Stock der FH. Dort
wird die E-Mail gespeichert bis Sie sie lesen und lschen.
Die Alternative zur Client/Server Architektur ist eine Peer
3
zu Peer
Architektur. Ein Beispiel dafr ist die Tausch-Netzwerk Gnutella: Das Gnutella-
Programm auf meinem Computer (z.B. Kazaa) nimmt Verbindung auf zum
Gnutella-Programm auf einem anderen Computer (z.B. Limewire) und tauscht
direkt Daten aus, ohne dass ein Server beteiligt sein muss.
Wenn Sie nun zurckdenken zur technischen Definition des World Wide Web:
Das World Wide Web ist ein Internet-Dienst mit Client-Server
Architektur, der durch die Standards URL, HTTP und HTML
definiert wird.
Sie sollten nun die erste Hlft des Satzes verstehen. Nun wenden wir uns einigen
Grundbegriffen des World Wide Web zu.
Ein Webbrowser, oder kurz Browser, ist ein Programm, das Webseiten
anzeigen kann, es ist also der Client zum World Wide Web. Es gibt sehr viele
verschiedene Webbrowser. Abbildung 3 zeigt drei davon: den Browser Mosaic,
der im Jahre 1993 als zweiter Webbrowser fr grafische Oberflche stark zur
Verbreitung des World Wide Web beigetragen hat, und die Browser Opera und
Mozilla die im Jahre 2004 verwendet werden.

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

2
Cient: englisch: KlientIn, KundIn / Server: englisch: KellnerIn
3
Peer: englisch: GleichgestelltEr, oft in der Bedeutung von gleich alt
Client / Server
Peer zu Peer
Browser
Alle eben erwhnten Browser haben gemeinsam, dass sie auf einem typischen
Bro-Computer eingesetzt werden, einem Computer mit grafischer Oberflche
und einem Farb-Monitor.
Es gibt aber auch exotischere Browser. Abbildung 4 zeigt den Browser lynx,
der nur Text darstellt, aber keine Bilder. Daneben sehen Sie eine Braille
Ausgabezeile, ein Gert, das eine Zeile Text in eine Zeile Blindenschrift
bersetzt. Mit diesem Webbrowser und diesem Ausgabegert knnen Blinde im
Web surfen.

Abbildung 4: Text-Only Browser lynx und Braille Ausgabegert
Die Dokumente, die im Webbrowser dargestellt werden nennt man Webseiten.
Eine Webseite kann im Gegensatz zu einer Seite in einem Buch beliebig lang
sein. Ist die Seite zu gro / zu lang fr das Browser-Fenster, dann erscheint ein
Scrollbalken mit dem man den Rest der Seite erreichen kann, wie in Abbildung 5
gezeigt.

Abbildung 5: Eine Browser zeigt eine lange Webseite an
Andere Browser
Webseite
Als Webseite wird also ein Dokument bezeichnet. Verwechseln Sie diesen
Begriff nicht mit dem englischen Wort Website. Eine Website besteht aus
mehreren Webseiten die zusammen gehren, und untereinander verlinkt sind.
Browser, Webseite, Website sind wichtige Begriffe im World Wide Web. Es sind
die Teile, die fr die LeserInnen am einfachsten greifbar sind. In unserer
Definition kommen aber ganz andere Begriffe vor:
definiert wird.
Es fehlt immer noch die Erklrung zu diesen drei Abkrzungen. Dazu werden wir
nun genauer betrachten was passiert, wenn eine Webseite angezeigt wird.
Es beginnt damit, dass eine URL in einen Browser eingetippt wird, wie in
Abbildung 6 gezeigt. Die URL ist die Adresse einer Webseite.

Abbildung 6: Eine URL wird in einen Browser eingetippt
Der Webbrowser analysiert die URL, und zerlegt sie in folgende Teile:
www.irgendwo.at ist der Name eines bestimmten Computers am Internet.
Der Webbrowser stellt eine Verbindung zu diesem Computer her. ber diese
Daten-Verbindung schickt er eine Anfrage an den Computer: GET /datei.html
dabei wird der 2. Teil der URL verwendet. Am Computer www.irgendwo.at wird
diese Anfrage von einem Programm entgegengenommen, das man Webserver
nennt. Der Webserver schickt als Antwort Daten zurck (die er wahrscheinlich
aus einer Datei namens datei.html liest aber das ist seine Sache). Wie die
Anfrage genau gestellt wird, wie die Antwort genau aussieht das wird vom
Hyper Text Transfer Protocol (http) beschreiben.
Der Browser nimmt diese Daten entgegen. Meistens handelt es sich um Daten
im HTML-Format, das heit die Daten enthalten Text und HTML-Befehle, die
beschreiben wie der Text zu formatieren ist. Der Browser befolgt diese Befehle
und stellt den Text entsprechend dar. In Abbildung 7 sehen Sie ein Beispiel fr
HTML-Code aussieht, und wie ein Browser diesen HTML-Code dann darstellt.
Website
URL
HTTP
HTML

Abbildung 7: HTML-Code und Darstellung dieses Codes im Browser
Diese lange, komplizierte Prozedur ist notwendig, um eine einzige Webseite zu
laden. Falls in dieser Webseite ein Bild dargestellt werden soll wiederholt sich
die ganze Prozedur, um das Bild zu laden. Das Bild wird dann als Teil der
Webseite dargestellt.
Klickt die LeserIn auf einen Link in der Webseite wiederholt sich die Prozedur um
die nchste Webseite zu laden.
Nun haben Sie einen berblick ber das Zusammenwirken von URL, HTTP und
HTML. Damit sollte Ihnen die Definition des World Wide Web schon sehr viel
sagen:
definiert wird.
1.1.1 URL Uniform Resource Locator
Eine URL ist die Adresse eines Dokuments am Web oder in einem anderen
Online-Informationssystem. URL steht fr Uniform Resource Locator zu
Deutsch also etwa einheitliches Lokalisierungs-Schema fr Ressourcen. Das
World Wide Web Consortium legt fest, was eine URL ist, und zwar im Dokument
rfc 1738. Dieses Dokument finden Sie unter anderem am Webserver des World
Wide Web Consortiums. Wir werden uns hier vorerst nur mit Web-URLs und
mailto-URLs beschftigen. Ein Beispiel:
http://kurse.horus.at/2004-ws/mmprog/index.html#literatur
Diese URL kann man in 4 Teile zerlegen:
http
bertragungsprotokoll
kurse.horus.at
Domain Name (oder IP-Adresse)
des Webservers das ist der Name
eines bestimmten Computers am
Internet
/2003-ws/tks-webprog/index.html
Wird vom Webserver interpretiert,
meist eine Pfad-Angabe
literatur
Wird vom Browser interpretiert,
Textmarke innerhalb des HTML-
Dokuments
Im Zusammenhang mit Web-Formularen werden wir auch mit URLs zu tun
haben, die Parameter enthalten, in diesem Beispiel sind es die Parameter
a und b:
http://webwelt.horus.at/html/form/echo.cgi?a=10&b=20#copy
http
bertragungsprotokoll
webwelt.horus.at
Domain Name (oder IP-Adresse) des Webservers
das ist der Name eines bestimmten Computers am
Internet
/html/form/echo.cgi
Wird vom Webserver interpretiert. In diesem Fall
wahrscheinlich nicht der Pfad zu einem HTML-
Dokuments, sondern der Pfad zu einem Programm,
das als Ausgabe HTML erzeugt.
a=10&b=20
Diese Parameter werden an das Programm
bergeben.
copy
Wird vom Browser interpretiert, Textmarke innerhalb
des fertigen HTML-Dokuments
HTTP-URLs sind nicht die einzigen URLs, ein Beispiel mit einem anderen ber-
tragungsprotokoll:
mailto:bjelli@horus.at
Wie werden Sie mit URLs zu tun haben? Wenn Sie Webseiten erstellen,
erschaffen Sie dabei URLs: Sie erstellen Ordner und legen Dateinamen fest.
Eventuell entscheiden Sie auch ber die Auswahl des Domain-Namens fr einen
Webserver.
Beim Festlegen von Datei- und Ordnernamen fr Webseiten mssen Sie
folgendes beachten: Die Zeichen : / # ? & = haben eine besondere Bedeutung
in URLs, sie teilen die URL in ihre verschiedenen Bestandteile. Wenn Sie also
einen Datei- oder Ordnernamen fr eine Webseite festlegen, drfen Sie diese
Zeichen nicht verwenden.
Eine URL kann keine Leerzeichen enthalten, deswegen sollten Sie auch keine
Leerzeichen in den Datei- oder Ordnernamen von Webseiten verwenden. Es
gbe zwar die Mglichkeit statt des Leerzeichens die Zeichenfolge %20 in der
URL zu verwenden aber wollen Sie das wirklich? Da ist es doch besser,
Leerzeichen ganz zu vermeiden.
1.1.2 HTTP
HTTP ist das Protokoll mit dem der Webbrowser mit dem Webserver
kommuniziert. http steht fr Hypertext Transfer Protocol. Auch HTTP wird vom
World Wide Web Consortium standardisiert, siehe rfc 2616.
Einen groben berblick ber HTTP haben Sie schon auf Seite 8 gelesen.
In der einfachsten Form sieht HTTP so aus wie in Abbildung 8 am Beispiel der
URL http://kurse.horus.at/2004-ws/mmprog/index.html#literatur gezeigt.
Keine Leerzeichen

Abbildung 8: Diagramm zur Funktionsweise von HTTP
1) eine URL wird in den Browser eingetippt, oder ein Link wird im Browser
angeklickt
2) Der Browser analysiert die URL, und ermittelt die Adresse des
Webservers (kurse.horus.at)
3) Der Browser baut eine Verbindung zum Webserver auf
4) Er sendet eine http-Anfrage:
GET /2004-ws/mmprog/index.html HTTP/1.0\n\n
5) Der Server nimmt die Anfrage entgegen und analysiert sie. Meistens
interpretiert er sie als Aufforderung, eine bestimmte Datei von der
Festplatte zu lesen
6) Der Server schickt die http-Antwort an den Browser, diese besteht aus
einem Statuscode, z.B. 200 OK, gefolgt von einigen Zeilen mit
Information ber das Dokument, gefolgt von einer leeren Zeile, gefolgt
vom Inhalt der Datei
7) Der Browser nimmt das Dokument in Empfang und beendet die
Verbindung
8) Der Browser stellt das Dokument dar. Er zeigt den Text an, und
positioniert dann die Webseite so im Browser-Fenster, dass die
Textmarke literatur links oben im Fenster ist.
7) und 8) knnen gleichzeitig ausgefhrt werden whrend das Ende der Seite
noch ber das Netz geladen wird, wird der Anfang der Seite schon dargestellt.
Mit HTTP werden Sie beim Erstellen und Publizieren von Webseiten wenig zu tun
haben. Sie sollten sich von diesen Ausfhrung auf jeden Fall eines merken: jede
Datei am Web hat eine eigene URL und wird einzeln geladen.
1.1.3 HTML
Die Abkrzung HTML steht fr HyperText Markup Language. HTML wird vom
World Wide Web Consortium standardisiert.
Eine Markup Language zu Deutsch Auszeichnungssprache ist nicht das
gleiche wie eine Programmiersprache. Eine Auszeichnungssprache dient
dazu, in einem Text Formatierungs-Anweisungen zu codieren. Eine
Programmiersprache kann noch viel mehr: Variablen, Verzweigungen, Schleifen
gibt es nur in Programmiersprachen, aber nicht in Auszeichnungssprachen.
<h1>Mein Lieblingsbaum</h1>
<p><img src="baum.gif" alt="Bild eines Baumes"
width="93" height="84"></p>
<p>Die Birke wchst eigentlich gerne im Sumpf- oder Moor-Gebiet.
Diese Birke wächst vor meinem Fenster, zwischen Haus und
Strasse. ...</p>
Abbildung 9: Beispiel fr HTML-Code
Abbildung 9 zeigt ein Beispiel, wie ein Teil eines HTML-Dokumentes aussehen
kann. Das Dokument enthlt den Text, der auf der Webseite zu lesen sein soll.
Zustzlich enthlt es die so genannten HTML-Tags. (Tag ist hier ein
englisches Wort fr Etikett oder Anhngsel, nicht das deutsche Wort Tag).
Ein Tag beginnt jeweils mit dem mathematischen Kleiner Zeichen und endet mit
dem Grer Zeichen, zum Beispiel <P>.

Abbildung 10: Erstellen einer HTML-Datei mit Notepad/Editor oder SimleText
Sie knnen HTML mit jedem Text-Editor erstellen z.B. wie in Abbildung 10
gezeigt mit dem Programm Notepad/Editor auf Windows oder SimpleText auf
Mac OS X. Das fertige HTML-Dokument speichern Sie in einer Datei mit der
Endung .htm oder .html.
Das Ergebnis Ihrer Arbeit sehen Sie erst, wenn Sie die erstellte Datei in einem
Browser betrachten, wie in Abbildung 11 gezeigt.
Auzeichnungssprache
vs. Programmier-
sprache

Abbildung 11: HTML-Datei wird im Browser dargestellt
Eine Alternative zur Erstellung des HTML-Dokuments im Code ist die
Verwendung eines so genannten WYSIWYG-Editors. WYSIWYG steht fr what
you see is what you get, und bedeutet hier, dass Sie im Editor whrend der
Erstellung des Dokuments nicht den HTML-Code sehen, sondern schon eine
Darstellung wie im Browser. Abbildung 12 zeigt den Editor Dreamweaver.

Abbildung 12: Bearbeitung einer HTML-Datei in Dreamweaver
Im 2. Kapitel erfahren Sie mehr ber HTML.
1.2 Die gestalterische Herausforderung
Wenn Sie eine einzelne Webseite oder eine ganze Website gestalten, mssen Sie
sich mit den Eigenschaften und spezifischen Bedingungen des Mediums Web
auseinandersetzen.
1) Verschiedene Ausgabegerte
2) Verschiedene Browser
3) Verschiedene Bildschirmgren / Auflsungen
4) Beschrnkung der Schriftarten
5) Nicht kontrollierbare Schriftgren
6) Unbekannte Lesereihenfolge
7) Verschiedene Zusatzprogramme und Plugins
1.2.1 Verschiedene Ausgabegerte
Wie auf Seite 7 in Abbildung 2 gezeigt, gibt es neben dem Bro-Computer in
seinen verschiedenen Varianten auch noch andere Ausgabegerte, mit denen
Webseiten dargestellt werden knnen, in Abbildung 2 war es eine Braille-
Ausgabezeile fr Blinde. Weitere Beispiele wren Handys und Palmtops, also
sehr kleine Taschencomputer, die Webseiten auch grafisch, aber auf einem
sehr kleinen Display darstellen knnen.
1.2.2 Verschiedene Browser
Verschiedene Browser und Browser-Versionen stellen den gleichen HTML-
Code oft leicht unterschiedlich dar. Dies war besonders in der heien
Entwicklungsphase des Web zwischen 1995 und 2000 ein groes Problem.
Aber auch heute (2006/2007) mssen Sie darauf gefasst sein, dass Firefox,
Opera, Safari und Internet Explorer Ihre Webseite jeweils leicht unterschiedlich
darstellen. Ja, sogar zwischen Internet Explorer fr Windows und Internet
Explorer fr Mac gibt es oft Darstellungs-Unterschiede.
An dieser Stelle sei auf die Webseite selfhtml von Stefan Mnz hingewiesen.
Dort knnen sie die Details zu den einzelnen HTML-Tags nachschlagen. Falls der
Tag nicht in jedem Browser funktioniert, wird das durch Icons angezeigt:
z.B. funktioniert im Internet Explorer erst ab Version 5.
1.2.3 Bildschirmgren und Auflsungen
Das Thema der Bildschirmgren und Auflsungen wollen wir genauer
behandeln.
Zuerst stellt sich die Frage: woher wei ich, wie hoch die Auflsung am
Computer meiner Leserin/meines Lesers ist? Die Antwort lautet: ich wei es
nicht, und es gibt keine zuverlssige Methode, mit der man diese Information in
jedem Fall herausfinden kann. Es gibt eine Messmethode mit Hilfe der
Programmiersprache Javascript, mit der man die Gre des Browserfensters
messen kann das Ergebnis der Messung ist natrlich dadurch verflscht, dass
Browser ohne Javascript ganz aus der Messung herausfallen. Diese
Beschrnkung sollten Sie bei den folgenden berlegungen immer beachten.

Wie messen?
Abbildung 13 zeigt die derzeit (2006/2007) gngigen Bildschirm-Auflsungen
von PCs.
800 px 1024 px 1200 px 1600 px

Abbildung 13: gngige Bildschirmauflsungen 2006
Vergleichen Sie die hchste hier dargestellte Auflsung (1600x1200 Pixel) mit
der geringsten Auflsung (800x600). Da Breite und Hhe verdoppelt sind, steht
bei der hchsten Auflsung also die vierfache Flche zur Verfgung!
Abbildung 14 zeigt eine Statistik ber die Bildschirmauflsung von
thecounter.com. Circa ein Sechstel der LeserInnen verwenden demnach die
geringste hier dargestellte Auflsung (800x600), und ca. die Hlfte die nchst
hhere (1024x768). Es bleiben also nur ca. ein Viertel, die eine hhere
Auflsung als 1024x768 verwenden.

Abbildung 14: Statistik ber die Bildschirmauflsung, Juni 2006, Quelle: thecounter.com
Von diesen Brutto-Angaben ber die Gre der zur Verfgung
stehenden Flche, sind nun noch der Platz fr den Fensterrahmen des
Browsers, fr Scrollbalken, Symbolleisten, und eventuell eingeblendete
Brutto vs. Netto
Favoritenleisten abzuziehen, um zum netto verbleibenden Raum fr die
Gestaltung zu kommen. Abbildung 15 zeigt diese Problematik an Hand einer
Webseite.

Abbildung 15: Platzbedarf von Browser-Elementen an zwei Beispielen
Beide Browser zeigen dieselbe Webseite, beide Browser wurden auf einem
Computer mit einer Bildschirm-Auflsung von 1024x768 Pixel verwendet.
Links in der Abbildung sehen sie den Browser Firefox. Nach Abzug von
Symbolleisten oben, Statusleiste unten, Scrollbalken rechts und dem (sehr
dnnen) Fensterrahmen links bleiben 1003x615 Pixel fr die Webseite. Rechts
in der Abbildung sehen Sie dieselbe Seite in Internet Explorer. Zustzlich zu
den blichen Symbolleisten ist hier auch die Favoriten-Leiste am linken Rand
des Browser sichtbar. Es bleiben 743x562 Pixel fr die Darstellung der
Webseite.
Wie Sie sehen knnen ist die Seite so gestaltet, dass das Foto, das in Firefox in
der rechten oberen Ecke der Webseite sichtbar ist, in Internet Explorer nicht
mehr sichtbar ist.
Abbildung 16 zeigt eine Statistik ber die Netto-Grssen von Browser-
Fenstern. Laut dieser Statistik kann eine Webseite mit Breite 950 Pixel auf ca.
70% der Browser vollstndig angezeigt werden. Bei 1050 Pixel Breite sind es
nur noch 20%.

Abbildung 16: Netto-Breite von Browser-Fenstern, 2005-2006, Quelle: webwelt.horus.at
Wie werden Sie als DesignerIn einer Webseite mit diesem Wissen umgehen? Ihr
eigener Computer hat wahrscheinlich eine hohe Auflsung das ist fr
DesignerInnen typisch. Werden Sie beim Entwurf Ihrer Webseiten auf die
Mehrheit der LeserInnen vergessen, und die Seite so gestalten, dass sie nur mit
hoher Auflsung verwendbar ist?
Zwei gute Faustregeln sind:
die wichtigsten Inhalte Ihrer Webseite sollten im linken, oberen Bereich
der Webseite platziert sein, innerhalb eines Bereiches von 750x500
Pixel.
Nach unten zu scrollen ist fr die LeserInnen gewohnter (und mit
Scrollrad an der Maus auch einfacher) als nach rechts zu scrollen.
Es gibt aber sicher Umstnde, unter denen Sie diese Faustregeln ignorieren
knnen. Z.B. wenn Sie eine Webseite fr einen Kiosk gestalten, und wissen, dass
das Ausgabegert immer ein Touchscreen mit einer Auflsung von 1200x600
Pixel ist. Oder wenn Sie eine Webseite mit knstlerischem Anspruch absichtlich
so gestalten, dass die Lese-Gewohnheiten des Web durchbrochen werden.
1.2.4 Beschrnkung der Schriftarten
Auf den verschiedenen Ausgabe-Gerten fr Webseiten stehen nicht berall die
selben Schriftarten zur Verfgung.
Welche Schriftarten das sind hngt einerseits vom Betriebssystem (Windows,
Apple, Linux,), andererseits von den installierten Programmen ab. Als
DesignerIn haben Sie vielleicht noch extra Schriftpakete installiert. Falls ja,
dann haben Sie einen ganz untypischen Computer. Die meisten anderen User
haben nur die Standard-Schriften auf ihrem Computer.
Wenn Sie im HTML-Code c00lfont2u als Schriftart vorgeben, und dann Ihre
Seite auf einem Computer betrachten auf dem es keine Schriftart namens
c00lfont2u gibt, dann wird statt dessen die Standardschriftart (Times) ver-
wendet.

Abbildung 17 zeigt die Standard-Schriftarten, die auf den Betriebssystemen
Windows 95 und Mac OS 9 sicher installiert waren. Beachten Sie auch die
Grenunterschiede: Alle Schriftarten sind in der Gre 12 Punkt abgebildet,
erscheinen aber verschieden gro.
Diese Schriftarten sind also seit vielen Jahren im Web bekannt und gerne
verwendet, will sie seit vielen Jahren zur Verfgung stehen.
Abbildung 18 zeigt eine aktuellere Statistik fr die 800 Browser getestet wurden.

Abbildung 17:
Standard-
Schriftarten, ca, 1996
Abbildung 18: Statistik ber die Verbreitung von Fonts, Quelle www.visibone.com/font/
Aus dieser Statistik knnen Sie z.B. herauslesen, dass die Schrift
Haettenschweiler auf 63% aller Computer installiert ist. Wenn man nur die
Apple-Computern betrachtet sind es nur 13%, bei Linux-Rechnern nur 14%.
(Auf Windows-Rechnern ist sie entsprechend hufiger um auf den Durchschnitt
von 63% zu kommen).
Es ist deswegen sinnvoll, nicht eine bestimmte Schriftart zu verlangen, sondern
eine Liste von Schriftarten vorzugeben: wenn die erste Schriftart auf der Liste
nicht installiert ist wird die zweite verwendet, dann die dritte,..... Abbildung 19
zeigt drei Beispiele fr solche Listen.
Verdana, Tahoma, Arial, Helvetica, sans-serif;
"Times New Roman", Georgia, Times, serif;
"Courier New", Courier, monospace;
Abbildung 19: Schriftarten-Liste
Es gibt zwei unterschiedliche Methoden, Schriftarten in Webseiten einzubetten,
so dass sie bei Bedarf herunter geladen und verwendet werden knnen. Um eine
Schriftart in dieser Weise zu verwenden, brauchen Sie eine (meist
kostenpflichtige) Lizenz.
Ein Trick um den Einsatz von Fonts zu vermeiden ist das Ersetzen von Text
(hauptschlich berschriften) durch Bilder mit Hilfe von Stylesheets.
Siehe auch: http://www.stichpunkt.de/css/css-tipps.html#schrift
Alle Apple Linux
Arial 99% 99% 82%
Times New Roman 99% 98% 82%
Arial Black 98% 97% 45%
Courier New 98% 96% 82%
Verdana 98% 99% 45%
Comic Sans MS 97% 96% 45%
Courier 97% 99% 100%
monospace 97% 100% 95%
sans-serif 97% 100% 93%
serif 97% 100% 93%
Trebuchet MS
96% 96% 45%
Georgia 95% 96% 45%
Impact 95% 84% 45%
Arial Narrow 88% 84% 9%
Helvetica 88% 99% 91%
Tahoma 88% 55% 18%
Times 87% 99% 91%
Century Gothic 79% 59% 0%
MS Sans Serif 78% 20% 0%
Lucida Console 76% 0% 18%
Garamond 75% 24% 23%
Lucida Sans Unicodei 74% 0% 18%
Bookman Old Style
72% 19% 9%
Book Antiqua 71% 19% 9%
MicrosoftSansSerif 69% 0% 14%
Palatino Linotype 69% 0% 14%
Monotype Corsiva 64% 15% 9%
Terminal 64% 0% 86%
Haettenschweiler 63% 13% 14%
Modern 53% 0% 0%
0% 20% 40% 60% 80% 100%
1.2.5 Nicht kontrollierbare Schriftgren
Jede LeserIn kann die Schriftgre im Webbrowser selbst beeinflussen, z.B. in
MSIE unter Ansicht Schriftgrad. Das ist auch gut so: Leute mit Sehschwche
knnen so die Schrift permanent grer stellen, und so erst die Webseiten lesen.
Als WebdesignerIn werden Sie nicht dafr bezahlt, den Zeilenumbruch zu
erledigen. Das ist die Aufgabe des Browsers. Je nach Schriftgre und zur
Verfgung stehendem Platz im Browser-Fenster wird der Browser die Abstze
geeignet in Zeilen umbrechen, wie in Abbildung 20 gezeigt.

Abbildung 20: Zeilenumbruch im Browser
1.2.6 Unbekannte Lesereihenfolge
Wenn Ihre Website aus mehreren Webseiten besteht, haben Sie keine Kontrolle
darber, in welcher Reihenfolge diese Seiten gelesen werden. Ganz im
Gegenteil: Web-LeserInnen gehen sehr selektiv vor, und navigieren sehr lange,
bevor sie sich zum Lesen niederlassen.
Die LeserInnen betreten Ihre Site auch nicht durch die Eingangstre also
ber die von Ihnen definierte Hauptseite. In Abbildung 21 sehen Sie ein Beispiel.
Keine eindeutiger
Eingang

Seite 3
Seite 2
Seite 1
Google
Seite 4
Seite 5
Hauptseite

Abbildung 21: Navigationsstruktur und Reales Navigationsverhalten
Die dicken Pfeile symbolisieren die Links, die zwischen den Seiten existieren.
Die dnnen Pfeile symbolisieren den Weg, den eine bestimmte Leserin durch die
Seite nimmt. Diesen Weg kann man aus dem Logfile des Servers rekonstruieren:
Sie kommt von Google, wo Sie die Seite 1 gefunden hat. Von dort navigiert
sie zur Hauptseite, und von dort weiter zu Seite 5. Hier verlsst sie die Site
wieder vielleicht, indem Sie dreimal auf den Zurck-Button drckt um wieder
zu ihren Suchergebnissen bei Google zu kommen, oder indem sie das
Browserfenster schliet, oder indem sie eine neue URL eintippt, Im Logfile
der Website ist das nicht mehr erkennbar.
Die Hauptseite ist ein neuralgischer Punkt jeder Website die zentrale
Navigationsstelle. Die Gestaltung der Hauptseite ist also sehr wichtig.
Ein Deckblatt, oder eine Intro-Seite braucht eine Website hingegen nicht.
Das ist eine Idee aus der Print-Welt, die am Web keinen Sinn macht.
1.2.7 Verschiedene Zusatzprogramme und Plugins
Jeder Browser kann HTML und reinen Text darstellen. Falls der Browser Bilder
darstellen kann, dann in den Formaten gif und jpg, eventuell auch png.
Alle anderen Formate (Word, CAD-Plne, Audio und Video-Dateien, Flash, PDF,
...) knnen aber trotzdem im Web eingebunden werden. Der Browser kann
Zusatzprogramme starten, um diese Formate darzustellen. Das ist technisch
immer mglich, ob es sinnvoll ist, ist eine andere Frage.
Spielen wir die Sinnfrage am Beispiel von Office-Dokumenten (Word, Excel,
Access) durch.
1. Nicht jede LeserIn hat Excel, Word und/oder Access auf ihrem
Computer. z.B. Apple, z.B. Palm Pilot, z.B. Linux
2. Office-Dokumente knnen Makro-Viren enthalten. Deswegen
a. knnen Sie Probleme bekommen wenn Sie einen Virus
verbreiten
Links und
Lesereihenfolge
Zusatzprogramme
b. sind die Leute vielleicht nicht gewillt Office-Dokumente von
Fremden entgegenzunehmen.
3. Office-Dokumente sind meist sehr gro, jedenfalls grer als ein
entsprechendes HTML-Dokument. Die lngere Download-Zeit knnte
Leute abschrecken.
4. Office gibt es in vielen verschiedenen Versionen. Um mglichst viele
Leute zu erreichen, muss man eine leicht veraltete Version (z.B. das
Word-Format von Office 2003) anbieten.
Wenn Sie das alles bedenken, und dann zu dem Schluss kommen, dass es im
konkreten Fall sinnvoll ist, z.B. ein Excel-Dokument in Ihre Website einzubauen,
dann ist das technisch ganz einfach: Sie setzen einen Link zur Excel-Datei.
Fr verschiedene LeserInnen wird die Handhabung sich unterschiedlich
darstellen:
1. Beispiel: Billy G. benutzt einen Windows-Rechner mit der neuesten
Office-Version, um Ihre Seite anzusehen. Wenn er auf den Link klickt bekommt
er eine Warnung mit dem ungefhren Inhalt: "Achtung, das knnte gefhrlich
sein". Wenn er trotzdem weitermacht, wird Excel gestartet und die Datei
geffnet.
2. Beispiel: Alyssa P. Hacker benutzt einen Linux-Rechner, dort gibt es kein
Excel. Wenn Sie auf den Link klickt, erscheint ein Fenster Unbekannte Datei,
wollen Sie die Datei speichern. Sie kann die Datei so herunterladen und mit
OpenOffice ffnen, oder auf Diskette zu einem Windows-Rechner tragen.
Ein Spezialfall von Zusatzprogrammen fr Webbrowser sind Plugins. Diese
bernehmen die Darstellung eines rechteckigen Bereiches innerhalb einer
Webseite. Ein bekanntes Beispiel ist das Flash-Plugin zur Darstellung von swf-
Dateien.

Abbildung 22: Plugin im Webbrowser und das Kontextmen (beim Rechtsklick)
In Abbildung 22 wird das Rechteck am rechten Rand der Webseite nicht vom
Webbrowser selbst, sondern vom Flash-Plugin dargestellt. Fr die LeserIn ist
das nicht erkennbar. Erst wenn sie/er die mit der rechten Maustaste in diesen
Plugins
Bereich klickt erscheint ein Flash-spezifisches Kontext-Men, wie in der
Abbildung rechts neben der Webseite gezeigt.
Welche Verbreitung die verschiedenen Plugins haben, ist schwer zu sagen.
Macromedia, die Firma die Flash herstellt, publiziert auf Ihrer Website eine
Statistik laut der 97% aller Browser das Flash-Plugin benutzen (siehe Abbildung
23).
Wenn man nach anderen Statistiken im Web sucht, kommt man aber zu ganz
anderen Ergebnissen. Verschiedene Sites bieten Statistiken ber die jeweils
eigenen Zugriffe. Hier bilden sich die Vorlieben des jeweiligen Zielpublikums ab.
Abbildung 24 zeigt zwei Statisiken von einer Forum-Site (sunniforum.com) im
arabischen Raum, und einem Webcounter-Anbieter. Mit 51% bzw. 89% Anteil
des Flash-Plugins findet man hier ganz andere, und widersprchliche Zahlen.
Es bleibt also bei jedem Projekt einzeln abzuwgen, ob Plugins fr das
Zielpublikum der Site sinnvoll sind oder nicht.

Abbildung 23: Statistik ber Browser-Plugins, Quelle: Macromedia

Abbildung 24: Statistik ber Browser-Plugins, Quellen: sunniforum.com, goodcounter.com
1.2.8 Zusammenfassung
Wenn Sie in dieser Lehrveranstaltung lernen, wie man Webseiten erstellt, sollten
Sie dabei nie vergessen, dass Sie ihr Ausgabemedium, den Browser in dem Ihre
Webseite schlussendlich dargestellt wird, nicht kontrollieren knnen, und dass
dieses Ausgabemedium sehr vielfltig ist genau so vielfltig wie die Menschen,
die diese Programme benutzen.
Ein paar mgliche Szenarien:
Home-User in der 1.Welt, die viel Geld haben und sich aus Spa am
Computer immer die neueste Hardware leisten, immer die best-mgliche
Internetanbindung haben, immer die neueste Software benutzen.
Firmen-User, die mit dem Computer vorlieb nehmen mssen, den Ihnen die
EDV-Abteilung zur Verfgung stellt. Das heit selbst im Jahre 2006
vielleicht noch 1024x768 Auflsung, Windows XP, ein veralteter Browser
und keine Spass-Plugins wie Flash.
BesucherInnen von Internet-Cafs irgendwo auf diesem Globus, die weder
Software noch Hardware kontrollieren, sondern verwenden mssen, was
da ist. Und das ist vielleicht ein sieben Jahre alter PC mit ebenso alter
Software.
Blinde, die mit einem Text-To-Speech Programm oder einer Braille-
Ausgabezeile im Web surfen, wie oben in Abbildung 4 gezeigt.
Menschen mit Rot-Grn Blindheit, die zwar den Text und die Bilder sehen,
aber nicht zwischen bestimmten Farben unterscheiden knnen.
Menschen mit eingeschrnkter Feinmotorik, die nur schwer mit einem Maus
umgehen knnen.
und so weiter.

Intro
Der HTML-Code ist fr Sie als DesignerIn wahrscheinlich die grte
Herausforderung am Webdesign.
Das nchste Kapitel ist sehr trocken geschrieben, es handelt nur vom HTML-
Code, und den genauen Vorschriften wie dieser Code zu schreiben ist. Verlieren
Sie dabei nie aus dem Auge: es geht um die Gestaltung von Webseiten. Das
Ergebnis der trockenen Arbeit mit dem Code ist immer eine Webseite.
Hoffentlich eine lesbare, bunte, interessante Webseite auch wenn der Code
selbst ihnen unleserlich, trist und uninteressant erscheinen mag. Den Code
beherrschen, heit, durch ihn hindurch die lebendige Webseite sehen zu knnen,
(so wie im Film die Matrix).
Vielleicht erlernen Sie mit HTML zum ersten Mal so etwas hnliches wie eine
Programmiersprache. Dazu gehrt auch der Erwerb des Fachvokabulars: Tags,
Attribute, Whitespace, Character Entities diese Fachbegriffe mssen Sie
verstehen und selbst korrekt verwenden knnen.

XHTML Seite 25
2 XHTML
Die Abkrzung HTML steht fr HyperText Markup Language. HTML wird vom
World Wide Web Consortium standardisiert. 4.01 ist die letzte/hchste Version
von HTML, nach dieser Version wurde von HTML auf XHTML umgestellt. XHTML
ist zu XML kompatibel, deswegen das X am Anfang. Es ist etwas schwieriger,
korrektes XHTML zu schreiben als korrektes HTML, da die Schreibweise in HTML
weniger genau geregelt ist. Die aktuellen Browser stellen sowohl HTML als auch
XHTML. Wir werden XHTML verwenden, aber einfach HTML dazu sagen.
Die wichtigsten Prinzipien, und die wichtigsten HTML-Tags (fr Links, Bilder,
Tabellen, Formulare) werden hier kurz vorgestellt. Alle Details knnen und sollen
Sie bei selfhtml
4
oder in einem hnlichen Referenzwerk nachschlagen. Sie
sollten wie bei allen Themen parallel auch andere Quellen zu HTML
konsultieren, und die Aussagen in diesem Skript kritisch hinterfragen!
In diesem Kapitel wird nur der HTML-Code beschreiben, nicht das Erstellen von
HTML-Dateien mit einem Programm, das nach dem what you see is what you
get Prinzip funktioniert.
Sie knnen den HTML-Code mit jedem Text-Editor erstellen. Die HTML-Datei
sollten Sie auch whrend Sie die Datei noch erstellen und verndern immer
wieder in einem Browser betrachten, und berprfen ob das Ergebnis Ihren
Vorstellungen entspricht. Der Arbeitsablauf ist immer:
1) Code im Editor ndern
2) Datei im Editor abspeichern
3) in den Browser wechseln
4) Die Anzeige im Browser aktualisieren / neu laden
Und wieder zurck zu Punkt 1. So lange wiederholen, bis die Webseite fertig ist.
2.1 Characterset
HTML-Dateien bestehen aus reinem Text, auch ASCII-Text genannt so wie
Dateien mit der Endung .txt.
Achtung: erstellen Sie Ihren HTML-Code nicht mit dem Programm Wordpad
unter Windows. Dieses Programm kann zwar ASCII-Text erzeugen, aber auch
Dokumente im rtf-Format. Das kann zu dem im Abbildung 25 gezeigten Fehler
fhren:

4
http://selfhtml.teamone.de
Wordpad vs. Notepad
Seite 26 XHTML

Abbildung 25: Fehler: HTML-Code wurde als rtf gespeichert
Hier wurde der Text nicht (nur) mit HTML-Tags formatiert, sondern auch mit der
von WordPad angebotenen Formatierungs-Leiste. Verwendet man diese, dann
erscheint der Text zwar im Programm Wordpad grer / fett, im Browser sieht
er dafr nicht mehr richtig aus.
Die korrekte Art, HTML zu speichern ist entweder ANSI, auch bekannt als
Format ISO 8859-1 (Latin-1). Das ist der traditionelle Computer-Zeichensatz
ASCII, ergnzt um die in westeuropischen Sprachen ntigen Zeichen wie die
Umlaute sowie .
5

Unter Windows und Linux wird dieses Format standardmig verwendet, nur am
Mac mssen Sie beim Speichern im TextEdit darauf achten das richtige Format,
nmlich Westeuropisch (Windows Latin 1) einzustellen.

5
.Um ganz genau zu sein wird seit Einfhrung des Euros und des -Zeichens ISO 8859-
15 (Latin-15). Verwendet das ist Latin-1 ergnzt um das Euro-Zeichen und ein paar
Ligaturen fr Franzsisch.
Westeuropisch
XHTML Seite 27

Abbildung 26: Speichern einer HTML-Datei im Mac-Programm TextEdit
Eine Alternative zu Latin-1 ist Unicode in der Variante utf-8. Das htte den
Vorteil, dass Sie die Sonderzeichen verschiedener Sprachen in einem Dokument
mischen knnen. Falls Sie Ihre HTML-Datei als utf8 speichern, mssen Sie das
im Head der HTML-Datei angeben, siehe Seite 38.
2.2 Sonderzeichen
Sonderzeichen nennt man in HTML charachter entities. Der Code zur
Darstellung eines Sonderzeichens hat immer die From &entityname;
Folgende Character Entities mssen Sie verwenden:
Gewnschtes
Sonderzeichen
Character Entity
<
<
>
>
&
&
Folgende Character Entities mssen Sie nicht verwenden, Sie knnen das
Sonderzeichen auch direkt im HTML-Code eingeben. Die Schreibweise als
Character Entity ist vielleicht praktisch, wenn Sie das Sonderzeichen nicht auf
Ihrer Tastatur finden knnen (z.b. auf einer englischen Tastatur).
Gewnschtes Zeichen Character Entity

Ä

ä

ß

€
Unicode =
International
kleiner, grer,
kaufmnnisches und
Seite 28 XHTML

©
Die Umlaute , , und funktionieren nach dem gleichen Prinzip wie und .
2.3 HTML-Tags
Die gewnschte Formatierung des Textes wird mit HTML-Tags angegeben.
1) Tags sind zwischen spitzen Klammern (kleiner und grer-Zeichen)
eingeschlossen.
2) Zu (fast) jedem Anfangs-Tag gibt es einen End-Tag, der sich nur
durch einen Schrgstrich vom Anfangs-Tag unterscheidet. Z.B. <p>hier
der Absatz</p>.
3) alleinstehende Tags mssen in XHTML mit einem Schrgstrich am Ende
geschrieben werden: <br /> (frher, in HTML, ging auch <br>)
Die wichtigsten Tags werden weiter unten noch vorgestellt. Welche Tags es gibt
und was sie jeweils bewirken, ist im HTML-Standard festgelegt. Sie knnen
nicht einfach einen neuen Tag erfinden.
2.4 Whitespace
Sogenannter whitespace - das sind mehrere Leerzeichen, Tabulatoren und
Zeilenumbrche hintereinander wird vom Browser vllig ignoriert. Ob Sie also
in Ihrer HTML-Datei ein Leerzeichen oder 7 Leerzeilen einfgen macht keinen
Unterschied. Die beiden Dokumente werden vom Browser gleich dargestellt:
<p>Halli Hallo</p> <p>
Halli
Hallo
</p>
Abbildung 27: Zwei HTML-Dokumente die gleich dargestellt werden
Nur die Tags beeinflussen die Darstellung der Webseite. Sie mssen den Tag
<br> verwenden, um einen Zeilenumbruch auf der Webseite zu erzeugen dies
ist aber nur selten sinnvoll, da der Browser einen automatischen Zeilenumbruch
durchfhrt.
2.4.1 Attribute
Manche Tags knnen Attribute enthalten. Ein Beispiel ist der Tag <img>, der ein
Bild in die Webseite einfgt (Englisch: Image). Die wichtigsten Attribute von
<img> sind src (von Source = Quelle) und alt (Alternative Darstellung). (Ein
hufiger Fehler ist es, scr statt src zu schreiben)
XHTML Seite 29
<img src="neu.gif" alt="Das ist neu!" />
Es ist egal, in welcher Reihenfolge Sie die Attribute schreiben. Ebenso sind
Zeilenumbrche, Tabulatoren, Leerzeichen auch hier, innerhalb eines Tag ohne
Auswirkung auf die Darstellung im Browser:
<img alt="Das ist neu!" src="neu.gif" />
<img
alt="Das ist Neu!"
src="neu.gif"
bli="bla, blu"
/>
Das Attribut bli, welches HTML nicht kennt, wird wie andere unbekannte
Attribute vom Browser einfach ignoriert.
Der Wert eines Attributes wird in Anfhrungszeichen geschrieben, auch Zahlen
(das war in HTML noch nicht verpflichtend):
<img alt="Das ist Neu!" src="neu.gif"
width="50" height="15" />
ACHTUNG: ein hufiger Fehler ist es, das zweite Anfhrungszeichen zu
vergessen:
<img alt="Das ist neu!"
src="neu.gif><p>Text nach dem Bild, der "zufllig" auch
Anfhrungszeichen enthlt aber das kommt nicht immer vor. .</p>
<p>Und noch mehr Text</p>
Abbildung 28: Fehler im HTML-Code: Anfhrungszeichen vergessen
Wenn Sie, wie in Abbildung 28 gezeigt, das zweite Anfhrungszeichen
vergessen, hat das enorme Auswirkungen auf die Darstellung der Webseite: der
Browser sucht konsequent nach dem zweiten Anfhrungszeichen, wenn es sein
muss bis zum Schluss des Dokuments. In diesem Beispiel findet er schon in der
nchsten Zeile ein Anfhrungszeichen. Damit ist der Wert des Attributs beendet.
Nun sucht der Browser noch nach der schlieenden spitzen Klammer des img-
Tags. Das Ergebnis ist, dass der Text gar nicht im Browser angezeigt wird.
<img alt="Das ist neu!"
src="neu.gif><p>Text nach dem Bild, der "zufllig" auch
Anfhrungszeichen enthlt aber das kommt nicht immer vor. .</p>
<p>Und noch mehr Text</p>
Seite 30 XHTML
2.5 Kompatibilitt
Neue Tags, die z.B. ein Browser nicht erkennt, sind zu ignorieren es gibt keine
Fehlermeldungen. Wenn das W3C in einer zuknftigen XHTML-Version 21
beispielsweise den neuen Tag <jump> (hpfenden Text) einfhrt, knnen Sie
diesen Tag auf Ihrer Webseite verwenden. Der Text wird jedoch nur in den
neuesten Versionen der Browser (die schon XHTML 21 kennen) hpfend
dargestellt. In Netscape 6 oder MSIE 5 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
Webseite!!!!</p>
Abbildung 29: Neue HTML-Tags und Kompatibilitt mit alten Browsern
Bevor Sie also einen neuen Tag einsetzen, sollten Sie sich darber im Klaren
sein, welche Versionen der Browser diesen Tag darstellen und wie viel Prozent
Ihres Zielpublikums schon eine passende Browser-Version benutzen. Meist
knnen Sie eine Seite so gestalten, dass auch mit lteren Browsern der gesamte
Inhalt lesbar ist.
Schlecht Besser:
<p>Zu den hpfenden Terminen
sind noch Pltze im Kurs frei:
</p>
<ul>
<li><jump>Montag</jump>
<li>Dienstag
<ul>
<p>Zu den markierten Terminen sind
noch Pltze im Kurs frei</p>
<ul>
<li><jump>Montag *</jump>
<li>Dienstag
<li>
In lteren Browsern geht die
wichtigste Information verloren!
Durch das Einfgen des * ist auf allen
Browsern erkennbar zu welchen
Terminen noch Pltze frei sind.
Abbildung 30: Vorsichtiger Einsatz von neuen HTML-Tags
Das war eine berlegung zur Kompatibilitt der Browser. Noch einmal eine
Erinnerung an die Kompatibilitt der Menschen: wie viel % aller Mnner sind
rot/grn blind verwenden sie also nicht den Farbunterschied zwischen rot
und grn, um wichtige Information anzuzeigen.
2.6 Text formatieren
Folgende Tags nennt man blockbildende Tags weil sie im Browser immer als
rechteckige Flche angezeigt werden, als Block:
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>
XHTML Seite 31
Zentrierter Text
<p 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)
Unter-berschrift
(3. Ebene)
Block-Zitat (eingerckt)
<blockquote>Alle meine Entchen schwimmen
auf dem See</blockquote>
Tabelle 1: Blockbildende Tags
Da diese Tags nicht ineinander verschachtelt werden knnen ist der folgende
Code nicht korrekt:
<h1><p>Absatz in der berschrift</p></h1>
Es gibt keinen Absatz in der berschrift. Entweder ein Stck Text ist ein Absatz,
oder es ist eine berschrift:
<h1>berschrift</h1>
<p>Absatz</p>
<p>noch ein Absatz</p>
Der Browser stellt zwischen den blockbildenden Tags jeweils einen Abstand dar.
Dieser kann mit Stylesheets verndert, bzw. auf Null gesetzt werden.
Im Browser Firefox kann man als zustzliches Hilfsmittel die Web Developers
Toolbar installieren. Mit dieser Toolbar knnen Sie sich unter anderem die
Blocks der blockbildenden Elemente anzeigen lassen wie in Abbildung 31.

Abbildung 31 Blockbildende Elemente im Browser Firefox angezeigt
Format fr kleinere Text-Abschnitte mssen Sie innerhalb eines Blocks
verwenden, sie werden auch als inline-Tags bezeichnet:
Seite 32 XHTML
Fettgedruckter Text
Eine <b>fette</b> Sache
Kursiver Text
und eine <i>schrge</i> Sache
Unterstrichener Text Dafr gibt es zwar einen Tag, Sie sollten ihn aber
nicht verwenden unterstrichener Text wird zu leicht
mit einem Link verwechselt.
Text in einer
bestimmten Schriftart
<font face="Arial,Helvetica">Text</font>
Text in einer
bestimmen Farbe
<font color="red">rot</font>
Tabelle 2: inline-Tags
Der <font>-Tag ist ein altmodischer Tag, der durch Stylesheets ersetzt wurde,
und den Sie in neuen Dokumenten mglichst nicht verwenden sollten. Um alte
Dokumente zu bearbeiten, mssen Sie diesen Tag aber kennen
Diese inline-Tags knnen ineinander verschachtelt werden:
<p>Absatz mit
<b>fett und <i>fett-kursiv</i></b> ist in Ordnung </p>
Beim Verschachteln muss die Reihenfolge passen:
<p>Absatz mit
<b>fett und <i>fett-kursiv</b></i> ist in Ordnung </p>
2.7 Bilder
Wenn in einer Webseite Bilder verwendet werden, so sind diese jeweils als
eigene Datei gespeichert. Enthlt eine Webseite z.B. vier Bilder, dann besteht
das Gesamtkunstwerk aus fnf Dateien: einer HTML-Datei, und vier Bild-
Dateien.

Abbildung 32: Eine Webseite und die Dateien aus denen sie besteht
Wenn Sie die gesamte Webseite auf USB-Stick speichern und mitnehmen wollen,
mssen Sie alle fnf Dateien mitnehmen! Falls die Bilder in einem Unter-Ordner
gespeichert waren, muss auch diese Ordnerstruktur erhalten bleiben.
Bild
<img src="neu.gif">
Bild mit Ersatztext (fr Blinde, oder fr
<img alt="neu" src="neu.gif">
statt <font>
Stylesheets
XHTML Seite 33
den Fall, dass das Bild nicht angezeigt
werden kann)
Bild mit Grenangabe (beschleunigt in
manchen Browsern das Layout der
restlichen Seite)
<img width="10" height="5"
src="neu.gif">
Tabelle 3: Varianten des img-Tags
Noch ein Wort zur Gre von Bildern: Bei den Breiten- und Hhen-
Angaben (width und height) sollten Sie immer die echte Gre des
Bildes (gemessen in Pixel) angeben. Wieso? Betrachten wir die zwei mglichen
Flle:
1) Bild ist in Wirklichkeit kleiner, width- und height-Angaben sind zu gro
2) Bild ist in Wirklichkeit grer, width - und height-Angaben sind zu klein
Im ersten Fall wird das Bild im Browser nicht gut aussehen: in einem Bild, das
zu gro dargestellt wird, werden die einzelnen Pixel sichtbar. Kompressions-
Artefakte das sind Bildfehler, die durch die Kompression entstehen werden
besser sichtbar. In Abbildung 33 sehen Sie typische jpeg-Artefakte rund um die
Nase.

Abbildung 33: Ein Pixel-Bild wird auf 4-fache Breite und Hhe vergrert
Im zweiten Fall (verkleinerte Darstellung) gibt es keine Probleme mit der
Bildqualitt, sondern mit der bertragungszeit.
Das Bild in Abbildung 34 ist im Original 450x450 Pixel gro, und hat eine
Dateigre von 115KB. Diese 115KB mssen bertragen werden, auch wenn
das Bild dann im Browser kleiner (z.B. 225x225 Pixel gro) dargestellt wird.
Die Alternative wre, das Bild im Grafikprogramm auf 225x225 Pixel zu
verkleinern. Dabei wird auch die Dateigre kleiner, in diesem konkreten
Beispiel 35KB. Das ist ein Faktor 3 in der Dateigre, und damit auch in der
Download-Zeit.
Der typische Arbeitsablauf ist also:
1) Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
2) Beste Version des Bildes archivieren
3) Bild im Grafikprogramm auf die richtige Dimension und Format bringen
Bild-Dimension
Grer dargestellt
Kleiner dargestellt

Abbildung 34:
Beispiel-Bild mit
Dimensionen 450 x
450, 16.000
verschiedene Farben.
Seite 34 XHTML
4) Fertiges Bild in den Web-Ordner kopieren
5) <img>-Tag in das HTML-Dokument einfgen.

Das Bild wird wie ein Wort im Text behandelt, und kann nicht
frei auf der Webseite positioniert werden. Spter lernen Sie
verschiedene Methoden kennen, wie man Text und Bild mittels Tabellen oder
Ebenen doch noch positionieren kann. Bis dahin gilt: Wenn Sie das Bild wie in
Abbildung 35 mitten in einen Absatz hinein setzen, ergibt das meist ein sehr
hssliches Layout.

Abbildung 35: Bild mitten im Absatz
Besser ist es, das Bild in einen eigenen Absatz zu setzten, und den Absatz dann
z.B. zu zentrieren:

Als Bildformate fr Webseiten knnen nur Pixel-Formate
verwendet werden:
gif
Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha).
animiertes Gif enthlt mehrere Bilder, die der Reihe nach
angezeigt werden (Daumenkino).
Besonders geeignet fr Bilder mit klaren Kanten, einfrbigen
Flchen, wenigen Farben, z.B. Comics, Logos.
jpg
Millionen von Farben, variable Kompression, keine Transparenz.
Besonders geeignet fr Bilder mit Farbverlufen, z.B. Photos.
png
Nachfolge-Format fr gif, Alpha-Transparenz, wird noch nicht von
allen Browsern untersttzt.
Tabelle 4: Bildformate im Vergleich
Bilder und Layout
Bildformate
XHTML Seite 35
Es kann jedes Bild in allen drei Formaten gespeichert werden. Ideal wre, das
Format auszuwhlen, in dem das Bild nichts an Qualitt verliert, und die
Dateigre mglichst gering ist.
Der vorher beschriebene Arbeitsablauf kann also weiter verfeinert werden
1) Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
2) Das Ergebnis, ein Bild mit hoher Auflsung + Dateigre,
Format z.B. tiff oder jpg mit geringer Kompression archivieren
3) Bild im Grafikprogramm auf die richtige Dimension und Format bringen;
Ergebnis: Bild im Format gif, jpg, png, Dateigre mglichst klein
(=web-tauglich).
4) Fertiges Bild in den Web-Ordner kopieren
5) <img>-Tag in das HTML-Dokument einfgen
Das Ergebnis ist ein web-taugliches Bild im richtigen Ordner.
2.8 Links + Anker
Das Web heit Web, weil es wie ein Spinnennetz ist die Strnge dieses
metaphorischen Netzes sind die Hyperlinks.
Links im Web sind unidirektional, sie funktionieren nur in eine Richtung. Sie
knnen von Ihrer Seite zur ORF-Seite einen Link machen, Sie knnen nicht von
der ORF-Seite zu Ihrer Seite einen Link machen.

Abbildung 36: Link zu Alta Vista
Bevor Sie einen Link setzen, mssen Sie sich ber zwei Dinge klar werden:
1) Welcher Text auf Ihrer Webseite soll anklickbar sein?
2) Wohin soll der Link fhren (URL)?
Alle Links auf einer Seite sind gleich gestaltet, normalerweise sind sie alle blau
und unterstrichen. Mit Stylesheets knnen Sie diese Gestaltung ndern.
Link zu einer Seite
drauen am Web
Suchmaschiene
<a href="http://www.altavista.com">Alta
Vista</a>
Link zu Webseite im
selben Ordner
<a href="seite2.htm">mehr</a>
Link zu E-Mail Adresse
<a href="mailto:aa@bb.cc">Mail</a>
Bild statt Linktext
<a href="home.htm"><img src="home.gif"></a>
Tabelle 5: der a-Tag fr Hyperlinks
Seite 36 XHTML
Stilistischer Tipp: Vermeiden Sie Formulierungen wie Klicken Sie hier, um zu
Yahoo zu gelangen. Die LeserInnen Ihrer Seite wissen, wie ein Link zu bedienen
ist. Schreiben Sie einfach zuerst einen ganz normalen Satz, und verwandeln Sie
dann ein geeignetes Wort in einen Link. Z.B. Ich empfehle Yahoo als Internet-
Verzeichnis.
Das zweite Beispiel in Tabelle 1 zeigt eine sogenannte relative
URL. Sie beginnt nicht mit http:// oder mailto:. Der Browser
verwendet die URL des Dokuments, in dem sich der Link befindet, um die
vollstndige, absolute URL fr den Link zu berechnen, wie in Abbildung 37
gezeigt.
URL des HTML-
Dokuments
http://www.meinefirma.at/index.htm
relative URL in diesem
Dokument
seite2.htm
berechnete absolute URL
http://www.meinefirma.at/seite2.htm
Abbildung 37: Umrechnung einer relativen URL in eine absolute URL
Das Prinzip hinter relativen und absoluten URLs kennen Sie vielleicht schon von
relativen und absoluten Pfadangaben. Relative URLs knnen auch Ordnernamen
enthalten, und den speziellen Ordnernamen .. fr den bergeordneten Ordner.
URL des HTML-
Dokuments
http://www.meinefirma.at/prod/tee.htm
Dokument
../kontakt/mail.htm
http://www.meinefirma.at/kontakt/mail.htm
Abbildung 38: Umrechnung einer relativen URL mit .. in eine absolute URL
Die Verwendung von relativen URLs bringt folgenden Vorteil mit sich: Wenn die
Website auf eine neue Adresse bersiedelt wird, funktionieren alle Links ohne
nderung weiterhin, wie Abbildung 39 zeigt.
URL des HTML-
Dokuments
http://www.neuefirma.de/prod/tee.htm
Dokument
../kontakt/mail.htm
http://www.neuefirma.de/kontakt/mail.htm
Abbildung 39: relativer Link nach der bersiedelung auf eine neue Adresse
Statt des Textes kann bei einem Link auch ein Bild
stehen, <a href="home.htm">
<img src="home.gif" alt="zurck zur Homepage" />
</a>
Abbildung 40 zeigt den dazu notwendigen Code.
<a href="home.htm">
<img src="home.gif" alt="zurck zur Homepage" />
</a>
Relative URLs
Bild als Link
XHTML Seite 37
Abbildung 40: Bild als Link
Bei der Verwendung von Bildern als Link ist das alt-Attribut des Bildes
besonders wichtig, um das Navigieren zu ermglichen, falls das Bild nicht
angezeigt werden kann, wie in Abbildung 41 gezeigt.

Abbildung 41: Bild das zur Navigation dient, Darstellung des Ersatztextes (alt) fr das Bild
Noch ein stilistischer Tipp: Wenn Sie einen Link setzen, dann nutzen Sie die
Chance, wirklich genau zu dem Dokument zu linken, das Sie referenzieren
wollen. Ein Beispiel soll dies verdeutlichen: Wenn Sie zu einem bestimmten
Artikel im Sport-Teil der Salzburger Nachrichten vom 1. April 2005 linken wollen,
dann suchen Sie genau diesen Artikel aus der Website der Salzburger
Nachrichten heraus, und verwenden Sie die URL dieses Dokuments fr den Link.
Nur bei wenigen besonders schlecht gestalteten Webseiten geht das nicht
weil Frames verwendet werden und das einzelne Dokument keine eigene URL
hat. Websites die mit Frames gestaltet sind vergeben so also die Chance verlinkt
zu werden und schmlern damit wiederum ihren PageRank bei Google, und die
Chance gefunden zu werden.
2.8.1 Anker
Sie knnen innerhalb der Webseite
sogenannte Anker setzen, die dann
gezielt angesprungen werden knnen. Das
ist besonders bei lngeren Webseiten
sinnvoll.
Die Anker heien auf englisch Anchor
daher kommt auch der html-tag <a>. In
deutschsprachigen Programmen wurden sie
sehr unterschiedlich bersetzt z.B. heien
sie im deutschen Frontpage Textmarken.
So sieht ein Link zu einem Anker aus:
<a href="#Bild1">das erste Bild</a>
So sieht der entsprechende Anker aus:
<a name="Bild1"></a>
Deep Link
Frames verhindern
Deep Links
Bild1
Bild2
Seite 38 XHTML
Wenn Sie wissen, dass in einer Seite drauen am Web ein Anker vorkommt,
dann knnen Sie gezielt einen Link zu diesem Anker hin setzten:
z.B. in der Seite http://webwelt.horus.at/html/forms/home.html gibt es
einen Anker namens Beispiele. Die URL, die zum Anker zeigt ist:
http://webwelt.horus.at/html/forms/home.html#Beispiele
2.9 Gesamt-Struktur einer Webseite
Mit den bisher gezeigten HTML-Tags knnen Sie Webseiten erstellen, die von
den meisten Browsern angezeigt werden. Diese Webseiten entsprechen aber
noch nicht dem HTML-Standard. Eine korrekte HTML Seite enthlt zustzlich
noch folgendes Grundgerst.
<!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= iso-
8859-1" />
<title>Titel der Seite</title>
</head>
<body>
Hier die Tags die Sie schon kennen
</body>
</html>
Abbildung 42: Grundstruktur eines XHTML-Dokuments mit Head und Body
Der <!DOCTYPE>-Tag muss ganz am Anfang stehen. Er gibt die Versionsnummer
des verwendeten HTML-Standards an in diesem Fall XHTML 1.0.
Der Rest des Dokuments befindet sich innerhalb des <html>-Tags.
Innerhalb des <html>-Tags befindet sich genau ein <head> und genau ein
<body>, es sind keine Wiederholungen erlaubt. Der <head> enthlt
Informationen ber die Seite, aber keine direkt sichtbaren Elemente (siehe auch
Kapitel 2.10). Der <body> enthlt den eigentlichen Inhalt der Webseite. Alle
bisher vorgestellten Tags sind nur innerhalb des <body> zu verwenden.
2.10 Tags fr den Head
Der <title>-Tag ist der wichtigste Tag im Head.
Abbildung 43 zeigt das Ergebnis einer Abfrage in einer Suchmaschine. Woher
kommt der Text, der hier angezeigt wird?

Titel
Titel der Seite
Beschreibung
= Description
XHTML Seite 39

Abbildung 43: Anzeige einer gefundenen Webseite in einer Suchmaschine
Die Suchmaschine liest den Titel und die Beschreibung aus der HTML-Seite aus:
<title>Kurs Internet Seitengestaltung Wifi Salzburg, Mrz
1999</title>
<meta
name="description"
content="Projektarbeiten Aus dem Kurs Internet Seitengestaltung
am Wifi Salzburg im Mrz 1999.">
<meta name="keywords"
content="HTML, Kurs, Webdesign, Webdesigner, Salzburg">
Da die Meta-Keyword Tags sehr stark missbraucht wurden (irrefhrende
keywords, z.B. Namen der Konkurrenzfirmen), werden sie seit dem Jahr 2002
von den meisten Suchmaschinen ignoriert. quelle
Der Titel (<title>-Tag) einer
Webseite ist weiterhin wichtig. Er wird
auch fr Favoriten/Lesezeichen
verwendet. Der Titel mu also auch
ohne die Seite verstndlich sein.
Achtung: Jede Seite sollte einen
anderen Titel haben! Oft findet eine
Suchmaschine mehrere Seiten einer
Site, wenn alle denselben Titel haben
kann man sie nicht unterscheiden.
Beispiele aus einer Bookmark-
Sammlung: welche Titel sind fr Sie
verstndlich? Welche
nicht?

Der <meta>-Tag hat noch verschiedene andere Anwendungsgebiete. So wird der
<meta>-Tag dafr verwendet, das Characterset des Dokuments bekannt zu
geben:
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
Eine Alternative zu iso-8859-1 wre Unicode in der Variante utf8:
<meta http-equiv="Content-Type"
content="text/html; charset=utf8">
Die Angabe muss natrlich mit dem wirklich verwendeten Characterset (siehe
Kapitel 2.1) bereinstimmen.
Unicode/utf8 mssen Sie immer dann verwenden, wenn Sie Sprachen mit
verschiedenen Zeichenstzen mischen, also z.B. auf ein und derselben Webseite
Seite 40 XHTML
sowohl Deutsch (westeuropisch) als auch Polnisch (osteuropisch) als auch
Russisch (kyrillisch) verwenden. Wenn Sie nur westeuropische Sprachen und
Namen verwenden ist iso-9959-1 zu empfehlen, das spart ein paar Byte an
Daten.
2.11 Tabellen
Um eine Tabelle zu erzeugen mssen 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>
Abbildung 44: HTML-Code fr eine Tabelle
Normalerweise hat eine Tabelle ein ganz regelmiges rechteckiges Gitternetz .
Man kann auch nebeneinander liegende Zellen verbinden. Dies erreicht man mit
dem Attribut colspan bzw. rowspan des <td>-Tags.
Obst Gemse
pfel Birnen Lauch Kohl
Q1 10 3 3 30
Q2 8 2 30
Q3 9 1
0
30

HTML-Tabellen wurden frher in Webseiten auch fr das Layout der Seite
verwendet, diese Funktion wurde zum Teil durch Stylesheets abgelst.
Zellen verbinden
XHTML Seite 41
2.12 Farben und Hintergrundbilder
Farben und Hintergrundbilder werden in XHTML mit Stylesheet gesetzt. (Nicht
mehr wie in HTML mit Attributen des body-Tags oder dem <font>-Tag.). Mehr
ber Stylesheets erfahren Sie im Kapitel 3.

Hintergrundfarbe der Seite
<body style="background-color:#FFFFFF;">
Textfarbe
<body style="color:black;">
Linkfarbe: es wird
unterschieden zwischen
neuen Links, Links, die mit
diesem Browser schon
einmal besucht wurden und
fr den aktiven Link
(whrend des Klicks)
<style>
a:link {color:blue}
a:visited {color:#FF00FF }
a:active {color:rgb(0,0,0)}
</style>
Hintergrundbild (als
Kachel)
<body
style="background-image:url(kachel.jpg);">
Farbe fr ein Stck Text
<span style="color:red;">rot</span>
Tabelle 6: Farben und Hintergrundbilder im Stylesheets
In Webseiten erfolgte die Farb-Angaben frher mit einem Hexadezimalen r,g,b-
Code. Dabei wird die Intensitt von rot, grn und blau in hexadezimaler
Schreibweise zwischen 00 (minimum) und FF (maximum) angegeben. (z.B.
#000000 fr schwarz, #FFFFFF fr Weiss, #FF0000 fr reines Rot, #00FF00 fr
reines Grn, #0000FF fr reines Blau).
In Stylesheets kann man statt dessen auch die Schreibweise rgb(10,2,120)
verweden, um 10 Teile rot, 2 Teile grn und 120 Teile blau zu mischen. Jeder
der drei Zahlen kann zwischen 0 und 255 sein.
Fr einige Farben kann man die englischen Farbwrter wie red, blue, black
verwenden.
In einem Webeditor wie Dreamweaver wre die Farbauswahl etwas einfacher,
wie in Abbildung 45 gezeigt.

Abbildung 45: Auswahl von Farbe (und Farbcode) mit Dreamweaver
Als Hintergrundbild in einer Webseite kann jedes Bild in einem Web-
geeigneten Dateiformat (gif, jpg, png) dienen. Das Bild wird gekachelt es
Farben als Code
Seite 42 XHTML
wird horizontal und vertikal so oft wiederholt, bis es die ganze Seite ausfllt. In
Abbildung 46 wurde ein Bild mit drei Zahnrdern als Hintergrundbild verwendet,
durch die Wiederholung werden sieben Zahnrder angezeigt.

Abbildung 46: Beispiel fr ein Hintergrundbild in einer Webseite
Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch
lesbar sein! Im Beispiel in Abbildung 46 ist eine Linkfarbe zu hell bzw. das
Hintergrundbild zu auffllig: Der Text wurde schon besucht in der letzten Zeile
ist kaum noch lesbar.
Seite 44 XHTML
Intro
Das Thema HTML kann fr eine DesignerIn sehr frustrierend sein: das geht
nicht, das geht auch nicht, Wie im ersten Kapitel beschrieben ist die
Gestaltung von Webseiten eine komplexe Aufgabenstellung. HTML bietet dazu
noch sehr wenig Gestaltungsmglichkeiten.
Mit Stylesheets (auch Formatvorlagen, oder CSS genannt) knnen Sie nun Ihre
Gestaltungsmglichkeiten wesentlich erweitern. Aber: Um CSS verwenden zu
knnen mssen Sie den HTML-Code Ihrer Webseite verstehen.
Stylesheets sind ein unerlssliches Werkzeug fr Projekte mit mehreren
Dokumenten, um diese einheitlich zu gestalten. Das Prinzip ist nicht ganz
einfach verstndlich, aber mit der praktischen Erfahrung lernt man Stylesheets
und die zustzlichen gestalterischen Mglichkeiten die sie bieten sowie die
Arbeitserleichterung die sie bringen wirklich zu schtzen.

CSS Cascading Style Sheets Seite 45
3 CSS Cascading Style Sheets
Von Anfang an sollte eine HTML-Datei keine Information darber enthalten, wie
der Text dargestellt werden soll - keine Schriftart oder Schriftgre. HTML sollte
nur strukturelle Information enthalten (das ist eine berschrift, aber nicht
Arial 24pt). Die Formatierungs-Information sollte in sogenannten Stylesheets
gespeichert werden, das Format fr 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 gefcherte technische und
wirtschaftliche Kompetenzen...
</body></html>
Da es keine Stylesheets gab erfand die Firma Netscape ab 1994 zustzliche
HTML-Tags:
<html><body>
<h1><font face="Arial" color="blue">Das Studium</font></h1>
<p><font size="+1">S</font>tudienziel ist es, breit gefcherte
technische und wirtschaftliche Kompetenzen...
</body></html>
Ab 1995 wurde endlich an den Standards fr Stylesheets gearbeitet. In den
Browsern war die Untersttzung fr Stylesheets ab den Versionen Internet
Explorer 3.0 (Juli 1996), Netscape 4.0 (Feb 1997), und Opera 3.5 (Juli 98) zu
finden. Eine Webseite mit CSS (Cascading Style Sheets) zeigt Abbildung 47.
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
gefcherte technische und
wirtschaftliche Kompetenzen...
</body></html>
h1 {
font-family: Arial;
color: blue;
}
p:first-letter {
font-size: large;
}
Abbildung 47: HTML-Datei und dazugehriges Stylesheet
Wozu der ganze Aufwand? Stellen Sie sich vor, sie betreuen 1000 Webseiten mit
je 20 Abstzen und erhalten den Auftrag: ndern Sie die Schriftart der
Webseiten. Ohne Stylesheets bedeutet das: in 1000 html-Dateien alle <font>-
Tags suchen, und dort die Schriftart ersetzen. Mit Stylesheets bedeutet es: in
einer Datei, der Stylesheet-Datei, eine Zeile ersetzen.
Stand der Technik: Die neueren Browser-Versionen (ab Internet Explorer 5.5,
Mozilla 1.7, Netscape 6.0) untersttzen CSS1.0 und einen Teil von CSS2.0. Der
letzte Browser, der noch verwendet wurde und ernste Probleme machte, war
Seite 46 CSS Cascading Style Sheets
Netscape 4.7. Er untersttzte Teile von CSS1.0, stellte sie aber teilweise falsch
dar. Netscape 4.7 ist aber ca. 2004 vom Markt verschwunden (hatte damals
weniger als 3 % Marktanteil
6
) kann also heute getrost ignoriert werden.
3.1 Syntax von Stylesheets im Detail
Abbildung 48 zeigt ein Beispiel fr ein Stylesheet:
h1,h2 {
font-family: Arial, Helvetica, sans-serif;
color: lightblue;
}
body {
margin-left: 150px;
background-color: white;
}
p {
text-align: justify;
}
Abbildung 48: Stylesheet-Code
Was bedeuten diese Stylsheet-Anweisungen? Der erste Absatz: Die Tags <h1>
und <h2> aus dem HTML-Document sollen mit der Schriftart Arial dargestellt
werden, wenn diese Schriftart nicht vorhanden ist, mit Helvetica, wenn die nicht
vorhanden ist mit irgendeiner serifenlosen Schrift. Auerdem soll die Schrift in
hellblauer Farbe dargestellt werden.
Zweiter Absatz: Die gesamte Seite (<body>) soll links um 150 Pixel eingerckt
werden, die Hintergrundfarbe der Seite ist wei.
Dritter Absatz: Normale Text-Abstze sind im Blocksatz darzustellen.
Allgemein gesagt funktionieren Stylsheets so: Am Anfang steht immer ein HTML-
Tag, allerdings ohne spitze Klammern <>. Sie knnen auch mehrere Tags durch
Kommas trennen. In diesem Fall wird fr diese Elemente die selbe Formatierung
definiert, (siehe h1,h2 in obigem Beispiel). Nach den Tags folgen eine
geschwungene Klammer und dann die einzelnen Formatierungsanweisungen, die
durch einen Strichpunkt getrennt sind. Eine einzelne Formatierungsanweisungen
hat die Form Attribut: Wert; z.B: margin-left: 150px;. Sie knnen (wie in
HTML) beliebig Zeilenumbrche einfgen, diese werden ignoriert.
Welche Formatierungsanweisungen es gibt knnen Sie in selfhtml nachschlagen;
im Folgenden werden wir die wichtigsten behandeln.

6
nach http://www.upsdell.com/BrowserNews/stat.htm
Die Seiten einer Website haben meist ein einheitliches Aussehen. Dies knnen
Sie erreichen, indem Sie fr jede Webseite dieselbe Style Sheet Datei
verwenden. Dazu mssen Sie in jede HTML-Datei die Style Sheet Datei mittels
des <link>-Tags einbinden:
<link rel="stylesheet" src="mystyle.css">
Diese Zeile muss innerhalb des head-Bereiches der HTML-Datei stehen. Die
Datei MYSYLE.CSS knnte etwa so aussehen wie oben in Abbildung 48.
Wenn Sie einen Style nur auf einer einzeigen Webseite verwenden, knnen Sie
die Style-Angaben direkt in die HTML-Datei schreiben, und zwar innerhalb des
head-Bereiches.
<style type="text/css">
h1,h2 {
font-family: Arial, Helvetica, sans-serif;
color: lightblue
}
</style>
Style Angaben knnen auch direkt zu einem bestimmten Tag innerhalb des body
geschrieben werden. In diesem Fall gilt die Angabe nur fr diesen ganz
speziellen Tag: dazu mssen Sie innerhalb des Tags das Attribut style
verwenden. Die einzelnen Formatanweisung folgen dann als Wert dieses
Attributes. Sie knnen beliebig viele Formatanweisung angeben. Diese Werte
werden in derselben Form geschrieben, wie Sie es auch in einer Datei oder im
head-Bereich der Datei innerhalb der geschwungenen Klammer angeben
wrden.
<h1 style="color:red; text-align:center;">Rote, zentrierte
berschrift </h1>
Sie knnen also auf drei Arten Style-Anweisungen in eine HTML-Datei einbinden.
Was passiert nun, wenn sich die verschiedenen Style Angeben widersprechen?
Die Angaben in einem einzelnen Tag haben immer Vorrang. Danach folgen die
lokalen Angaben im head-Bereich und erst zum Schluss die externe Datei.
Nach diesem Einblick in die Syntax von CSS knnen wir nun erste
Anwendungsbeispiele verstehen.
3.2 Texte und Farben mit Stylesheets
In diesem Kapitel lernen Sie die wichtigsten Formatierungs-Anweisungen von
CSS fr Schriftarten, Abstze, Links, Farben kennen. Dabei wird immer wieder
das Selbe HTML-Dokument verwendet, der Code ist in abgebildet.
Verbindung zw. HTML
und CSS
<html>
<head>
<link rel="stylesheet">

Listing 1: HTML-Dokument fr weitere CSS-Beispiele
Zuerst wollen wir die Schriften im Dokument festlegen: Eine serifenlose Schrift
fr berschriften, eine mit Serifen fr den Flietext.
1. p {
2. font-family: Arial, Helvetica, sans-serif;
3. font-size: 13px;
4. }
5. h1,h2 {
6. font-family: "Trebuchet MS", Verdana, Arial;
7. }
8. h1 { font-size: 24px; }
9. h2 { font-size: 20px; }
Listing 2: Schriftfamilie, Schriftgre mit CSS festlegen
In Zeile 1 bis 4 von Listing 2 werden zwei Anweisungen fr Flietext gegeben
(HTML-Tag <p>): die Schriftfamilie in Zeile 2 und die Schriftgre in Zeile 3.
Bei Schriftfamilien gilt es, wie in Kapitel 1.2.4 beschrieben, die Einschrnkungen
des Web zu beachten. In Zeile 2 werden mehrere Schriften angegeben, diese
Liste wird vom Browser von links nach rechts abgearbeitet, die erste Schrift die
er findet verwendet er. Vergleichen Sie Zeile 2 mit Zeile 6: Schriftnamen die ein
Leerzeichen enthalten mssen in Anfhrungszeichen gesetzt werden, so wie
Trebuchet MS in Zeile 6.
Das letzte Wort in Zeile 2 sans-serif ist ein CSS-Krzel fr irgendeine
serifenlose Schrift. Es empfiehlt sich am Ende einer Schriftliste ein solches
Krzel als Standardwert wenn alle Stricke reien anzugeben, links sehen Sie
eine Liste der in CSS1 angebotenen Krzel.
Die Schriftgren-Angabe in Zeile 3 verwendet Pixel als Maeinheit. Alternativ
wreauch eine Angabe in Punkt (pt), Pica (pc), Inch (in), Millimeter (mm),
Zentimeter (cm), Em-Breite der aktuellen Schrift (em), iX-Hhe der aktuellen
Schrift (ex), Prozent (%).
Ausserdem gibt es fr Schriftgren sieben Standardgren: xx-small, x-
small, small, medium, large, x-large, xx-large und die relativen Angaben
smaller und larger.
Zum Thema Schriftgren gibt es verschiedene Ansichten:
Da Webseiten hauptschlich auf Bildschirmen gelesen werden kann man
argumentieren, dass das Pixel die natrliche Maeinheit auf Webseiten ist.
Wenn Sie gif, jpg oder png-Bilder in Ihrer Webseite verwenden ist die Breite und
Schriftfamilie,
Schriftgre
sans-serif,
serif,
cursive,
fantasy,
monospace
Pixelorientiert
Hhe der Bilder in Pixel fix. Pixel auch als Gre fr Schrift macht es einfach die
Grenverhltnisse von Bild und Schrift zu fixieren.
Eine andere Position lautet: Bildschirme und Displays sind sehr unterschiedlich
gro; Leserinnen und Leser haben sehr unterschiedliche Sehstrken und
schwchen. Deswegen muss das Verndern der Schriftgre in der Hand der
LeserIn bleiben. In einem Browser wie Firefox geht das ja auch bequem mit
einem Tastendruck.
Wenn nun die LeserIn die Schriftgre ndert, sollte diese Vernderung alle
Schriften auf der Webseite betreffen: Flietest, berschrifen, Aufzhlungen, etc.
Dabei knnte das Layout und die Bilder auf der Seite entweder fix bleiben oder
sich ebenfalls vergern oder verkleinern:

Abbildung 49: Bild und Spalte mit fixer (links) vs. relativer Gre (rechts)
In der linken Hlfte von Abbildung 49 sehen Sie die Auswirkung einer fixen
Grenangabe fr Spaltenbreite und Bildgre in Pixel. In der rechten Hlfte
wurde Spaltenbreite und Bildgre in Abhngigkeit von der Schriftgre in Em
angegeben.
Fluides Layout
Fixe Gren in Pixel haben den Vorteil, dass die Seite auch bei groer
Schriftgre noch ins Fenster passt. Relative Grenangaben in Em haben den
Vorteil, dass das Layout, dass sie Grenverhltnisse erhalten bleiben.
Betrachten wir als nchstes den Absatz. Wie immer in HTML erfolgt der
Zeilenumbruch automatisch. Mit CSS knnen Sie verschiedene Aspekte des
Absatz-Layoutes steuern, einige davon sind in Abbildung 50 gezeigt:
In 1989 one of the main objectives of the WWW was to be a space
for sharing information. It seemed evident that it should be a space in
which anyone could be creative, to which anyone could contribute. The
first browser was actually a browser/editor, which allowed one to edit
any page, and save it back to the web if one had access rights.

Abbildung 50: Absatz mit CSS Formatanweisungen
Mit text-align knnen Sie die Ausrichtung des Texts im Absatz festlegen:
left, right, center oder justify (Blocksatz).
Die erste Zeile des Absatzes kann einen separaten Einzug haben, den Sie mit
text-indent festlegen.

3.3 Klassen und IDs
Achtung: das ist ein fortgeschrittenes Thema, Sie sollten sich erst an dieses
Thema wagen, wenn Sie mit Stylesheets schon einige Erfahrung haben.
Wenn Sie mit den Style-Angaben den <p>-Tag umformatieren, betrifft das alle
<p>-Tags in der Webseite. Oft mchten Sie aber vielleicht nur eine spezielle Art
von Absatz anders formatieren als die anderen Abstze. Zu diesem Zweck
knnen Sie sich im Stylesheet noch weitere Formatvorlagen - sogenannte
"Klassen" - definieren:
.wichtig { color: red; }
Diesen Klassen knnen Sie eigene Namen geben. Um Klassennamen von HTML-
Tags zu unterscheiden muss vor dem Namen einer Klasse ein Punkt stehen.
Jedem normale HTML-Tag knnen Sie nun diese Klasse zuweisen. Dies geschieht
mit dem Attribut class und dem Namen der speziellen Klasse.
Abstze
<p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p>
<p class="wichtig">Eine 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 ist in diesem Beispiel also rot.
Wenn Sie einem Bereich ihres HTML-Codes eine bestimmte Klasse zuweisen
mchten, aber kein passender HTML-Tag vorhanden ist, knnen Sie die beiden
Tags <span> und <div> verwenden, die beide selber kaum Eigenschaften
aufweisen. <span> eignet sich fr die Verwendung in Flietext, <div> ist ein
blockbildender Tag, erzwingt also einen Zeilenumbruch.
<p>Es gibt hier ganz <span class="wichtig">besonders
interessante</span> Meldungen. </p>
Die Worte besonders interessante erscheinen rot.
3.4 Layout mit Stylesheets - FEHLT
3.5 Einsatz von Stylesheets
Wichtige Argumente fr den Einsatz von Stylesheets sind:
Zustzliche Gestaltungsmglichkeiten
Einheitliche Gestaltung von mehreren Webseiten
Arbeitsteilung zwischen DesignerInnen (die CSS erstellen) und
RedakteuerInnen (die Inhalte erstellen)
Aber Achtung: CSS ist nicht die Lsung jedes Problems. Was CSS nicht leisten
kann ist z.b:
Mit Stylesheets knnen Sie nur Objekte verndern, die schon in der
HTML-Datei vorhanden sind. Es knnen keine neuen Objekte eingefgt
werden.
Um ein Stylesheet zu erstellen, muss die DesignerIn die HTML-Tags
kennen, z.B. wissen, dass h1, h2, h3 fr die berschriften stehen.
Damit das Stylesheet wirkt, muss die RedakteurIn, die das HTML-
Dokument erstellt, die richtigen HTML-Tags verwenden, z.B.
berschriften wirklich mit h1, h2, h3 formatieren, und nicht mit b, i,
font.
Intro
Damit haben Sie die schweren Kapitel mit HTML-Code und CSS-Code hinter
sich. Was Sie hier gelernt haben werden sie aber auch bei der Arbeit mit einem
wysiwyg-Editor wie Dreamweaver immer wieder brauchen.

Dreamweaver Seite 55
4 Dreamweaver
Ein wysiwyg Web-Editor wie Dreamweaver macht das Erzeugen von HTML-
Dateien einfacher. Das Ergebnis ist aber immer eine ganz normale HTML-Datei;
mit genug Flei und einem Text-Editor knnte man das gleiche Ergebnis
erzielen.
wysiwyg ist eine englische Abkrzung fr what you see is what you get, die
Abkrzung wird ungefhr wie-sie-wieg ausgesprochen. Das Prinzip was du
siehst ist was du bekommst bedeutet in diesem Fall: Man sieht im Editor nicht
den HTML-Code, sondern man sieht, wie die fertige Webseite im Browser
aussehen wird.
Aber Achtung: whrend DTP-Programme die nach dem wysiwyg-Prinzip arbeiten
dieses Versprechen auch erfllen knnen, ist das bei Web-Editoren nicht
mglich. Bei einem DTP-Programm kenne ich mein Ausgabemedium z.B. A4.
Bei einer Webseite kann ich viele Eigenschaften meines Ausgabemediums gar
nicht kennen (siehe die Diskussion im ersten Kapitel), z.B. die Breite des
Browserfensters, die zur Verfgung stehenden Schriftarten, u.s.w. Es msste
also heissen Was du siehst ist ungefhr was du bekommen knntest.

Abbildung 51: Dreamweaver fr Mac
Dreamweaver ist ein Produkt der Firma Macromedia. Die aktuelle Version ist im
Herbst 2006 die Version Dreamweaver 8. Es gibt eine Windows- und eine Mac-
Version (siehe Abbildung 51) des Programms
7
.
Seit Dreamweaver 3 empfehle ich das Programm uneingeschrnkt. Die
Unterschiede zwischen den Versionen sind fr die nun folgenden Betrachtungen
nicht relevant, sie betreffen z.B. die Untersttzung von PHP oder Datenbanken,
also fortgeschrittenere Themen.

7
In diesem Skript werden meist Screenshot von Dreamweaver fr Windows verwendet,
manchmal auch Screenshots von Dreamweaver fr Mac.
wysiwyg
funktioniert nicht
Seite 56 Dreamweaver
Konkurrenzprodukte zu Macromedia Dreamweaver sind unter anderem Microsoft
Frontpage und Adobe GoLive.
4.1 Dreamweaver GUI
Es folgt nun eine sehr detaillierte Beschreibung der Dreamweaver GUI, die fr
zuknftige ExptertInnen gedacht ist, die ihr Werkzeug bis ins Detail
beherrschen.
4.1.1 Entwurfsansicht, Codeansicht, Gemischte Ansicht
Dreamweaver funktioniert wie einleitend beschreiben nach dem wysiwyg-Prinzip
Sie sehen bei der Arbeit also eine Darstellung die ungefhr der Darstellung der
Webseite im Browser entspricht. Sie knnen aber jederzeit auch den darunter
liegenden HTML-Code ansehen und bearbeiten. Dreamweaver unterscheidet
drei Ansichten: Die Entwurfsansicht, die (HTML-)Codeansicht, und eine
gemischte Ansicht. Letztere sehen Sie in Abbildung 52.

Abbildung 52: Gemischte Ansicht in Dreamweaver
Die gemischte Ansicht eignet sich besonders gut zum Erlernen von neuem
HTML-Code: Sie knnen in der Entwurfs-Ansicht einen Bereich markieren, im
Code-Ansicht wird der entsprechende Code ebenfalls markiert. So knnen Sie
erforschen, welcher HTML-Code zu welchem Element der Seite gehrt.
Die schnellste Art zwischen den Ansichten hin und her zu wechseln ist die
Tastenkombination Strg-Tabulator. Dabei bleibt die Markierung erhalten.
Ein Qualittskriterium bei Web-Editoren, und der Grund warum ich
Dreamweaver empfehle, ist die Qualitt des erzeugten HTML-Codes, und die
Durchlssigkeit zwischen Entwurfs- und Code-Ansicht. Dreamweaver erzeugt
kurzen, gut lesbaren HTML-Code und frdert das Erlernen des Codes durch das
gute Zusammenspiel der Ansichten.
Ansicht wechseln
4.1.2 berblick ber die GUI von Dreamweaver
Die Oberflche von Dreamweaver besteht aus einer Vielzahl von Fenstern und
Elementen. Fr den Einstieg in die Arbeit mit Dreamweaver sind die in Abbildung
53 gezeigten Elemente wichtig:

Abbildung 53: Fenster von Dreamweaver im berblick
Das Dokument wird zentral angezeigt. Sie knnen wie oben beschreiben das
Dokument in der Code-Ansicht oder der Entwurfs-Ansicht betrachten und
bearbeiten, das Umschalten erfolgt in der Symbolleiste Dokument (in Abbildung
53 mit einem Pfeil markiert). Tabelle zeigt wo Sie weitere wichtige
Informationen zum Dokument finden.
Symbolleiste Dokument:

Titel des Dokuments (entspricht dem <title>-Tag), editierbar.
Titelleiste des Programmes (ganz oben):

Name des Programmes,
Titel des Dokuments (entspricht dem <title>-Tag),
Ordner und Dateiname des Dokuments,
Format (HTML oder XHTML)
Stern * zeigt an, dass das Dokument editiert wurde
und gespeichert werden sollte
Rechte untere Ecke des Dokuments:
von Rechts nach Links:
Auswahl-Werkzeug (=Normalzustand)
Hand-Werkzeug (zum Verschieben der Seite im Fenster)
Zoom-Werkzeug
Zoom-Faktor
Breite und Hhe des Fensters, in dem das Dokument derzeit dargestellt wird
Gesamt-Gre der Webseite in Kilobyte (Summe aus HTML-Dokument und
allen Bildern) / Geschtzte bertragungszeit fr die Webseite
Oberer Rand des Dokuments:
Auswahl welches der geffneten Dokumente gerade bearbeitet wird,
Stern markiert Dokumente die verndert wurden und gespeichert werden
sollten.

Umschalten zw.
Ansichten
Linke untere Ecke des Dokuments:
Anzeige der HTML-Tags. Entspricht jeweils der Position des Cursors im
Dokument, derzeit steht er z.B. in einem Link innerhalb einer Tabellen-Zelle. Die
Tabellen-Zelle ist markiert. Diese HTML-Leiste kann auch zur Navigation
benutzt werden: Wenn Sie auf <TR> klicken wird die entsprechende Zeile der
Tabelle markiert.
Abbildung 54: Details der Dreamweaver GUI
Alle weiteren Fenster in Dreamweaver sind mit Ihrem Namen beschriftet.
Das Fenster Einfgen ermglicht das Einfgen von Elementen in das Dokument.
Das Fenster ist oberhalb des Dokumentes platziert, die Handhabung ist damit
hnlich wie in den meisten Windows-Programmen.
Das Fenster Eigenschaften ist unterhalb des Dokumentes platziert, und
widerspricht damit den Windows-Konventionen. Dieses Fenster ist fr die Arbeit
mit Dreamweaver zentral. Der Inhalt des Fensters verndert sich mit der
jeweiligen Markierung im Dokument. Ist z.B. eine Tabellen-Zelle im Dokument
markiert sieht das Eigenschaften Fenster anders aus, als wenn ein Bild im
Dokument markiert ist (siehe Abbildung 55)

Abbildung 55:Verschiedene Zustnde des Eigenschaften Fensters
Das Eigenschaften Fenster dient sowohl zur Anzeige der Eigenschaften, als auch
zur Bearbeitung. So knnen Sie z.B. in Abbildung 55 die Breite und Hhe des
Bildes ablesen, aber auch neue Werte in diese Felder eingeben, und damit die
Darstellung des Bildes verndern.
Es gibt dabei einen engen Zusammenhang zwischen Eigenschaften Fenster und
dem HTML-Code. In Abbildung 56 knnen Sie nachvollziehen, wie jedes
Eingabe-Element im Eigenschafts-Fenster einem Attribut des HTML-Tags
entspricht.

<img width="157" height="190"
src="mma/brigitte-jellinek.jpg"
alt="Portrait von Brigitte"
name="b1" id="b1" />
Abbildung 56: Zusammenhang zw. Eigenschaften und HTML-Attributen am Beispiel <img>
Einfgen
Eigenschaften
Das der Eingabefelder wird in zwei HTML-Attribute bertragen: in name und id.
Der Grund dafr ist eine Vernderung in der Bedeutung der Attribute: id wird
heute dort verwendet, wo frher name verwendet wurde. Dreamweaver setzt die
Beiden gleich, und vermeidet damit Kompatiblittsprobleme. Abbildung 57 zeigt
ein komplexeres Beispiel.

Abbildung 57: Zusammenhang zw. Eigenschaften und HTML-Attributen am Beispiel Link
Ein Link (<a>-Tag) ist markiert. Das Eigenschafts-Fenster zeigt (unter anderem)
das href-Attribut an, mit der Beschriftung HYPERLINK. Das Eigenschafts-Fenster
zeigt gleichzeitig aber noch ein paar andere Dinge: FORMAT bezieht sich auf den
bergeordneten <p>-Tag. Wenn Sie hier statt Absatz berschrift 1
auswhlen, wird der HTML-Code wie in Abbildung 58 gezeigt verndert.
<p>Ich empfehle <a href="...">Google</a> fr die Suche im
Internet</p>
<h1>Ich empfehle <a href="...">Google</a> fr die Suche im
Internet</h1>
Abbildung 58: Vernderung im Code bei nderung des Formats
Wenn Sie das Symbol UNGEORDNETE LISTE drcken verndert Dreamweaver den
Code noch strker, wie in Abbildung 59 gezeigt:
<p>Ich empfehle <a href="...">Google</a> fr die Suche im
Internet</p>
<ul>
<li>Ich empfehle <a href="...">Google</a> ...Internet</li>
</ul>
Abbildung 59: Vernderung im Code bei Formatierung als Liste
Wenn Sie das Eigenschaftsfenster nicht bentigen knnen Sie es
zusammenklappen wie rechts gezeigt.
Am rechten Rand des Dreamweaver-Fensters ist Platz fr weitere
Fenster. Diese knnen ber das Men Fenster ein- und
ausgeblendet werden. Mit der Maus knnen Sie auch diese Fenster
zusammenklappen, in Gruppen anordnen, aus dem Fensterrahmen
lsen und in schwebende Fenster verwandeln.

UNGEORDNETE LISTE

Fenster
zusammenklappen
Welche Fenster Sie fr die Arbeit bentigen wird sich immer wieder verndern,
sie knnen Dreamweaver hier an Ihre eigenen Bedrfnisse anpassen.
4.2 Text formatieren mit Dreamweaver
Wie im vorherigen Abschnitt beschrieben knnen Sie mit dem Eigenschafst-
Fenster Text formatieren. Fr die wichtigsten HTML-Tags gibt es in
Dreamweaver zustzlich Tastatur-Krzel:
HTML-Tag

Tastatur-Krzel in Dreamweaver
h1
berschrift 1 Strg-1
h2
berschrift 2 Strg-2
p
Absatz Shift-Strg-P
br
Zeilenumbruch Shift-Enter
b
Fettdruck Strg-B
i
Kursiv Strg-I

Formatierung entfernen: Strg-0 (Null)
Tabelle 7: Dreamweaver Tastaturkrzel fr die Formatierung von Text
Durch die Verwendung dieser Tastaturkrzel knne Sie Ihre Arbeit wesentlich
beschleunigen.
4.3 Links und Anker
Tippen Sie zuerst den Link-Text ein, der im Browser angezeigt werden soll.
Markieren Sie dann einen Teil des Textes mit der Maus. Tippen Sie die URL in
das Feld HYPERLINK des Eigenschafts-Fensters ein. Sobald Sie das Eingabefeld
verlassen wird die nderung aktiv, der Link erscheint blau und unterstrichen.
ACHTUNG! Sie knnen den Link in Dreamweaver nicht anklicken um ihn zu
testen! Das funktioniert nur im Browser.
Nachdem Sie in Dreamweaver eine Site definiert haben (siehe Seite fehlt)
funktioniert auch folgendes: Wenn Sie zu einer lokalen Datei linken wollen, also
innerhalb Ihrer Site, dann mit knnen Sie dem gelben Ordern-Symbol neben
dem Eingabefeld HYPERLINK eine Datei auswhlen, oder mit dem Dateizeiger-
Symbol zu der Datei zeigen.


Abbildung 60: Mit Dreamweaver einen Link zu einer lokale Datei setzen
Anker (HTML-Tag <a name="ankername">) kann man mit Dreamweaver wie in
Abbildung 61 gezeigt setzen und verlinken:
1) Zuerst den Anker setzen: EINFGEN BENANNTER ANKERPUNKT. Sie
werden nach einem Namen gefragt (in diesem Beispiel Aufgabe)
2) Dann einen Link dorthin machen: Sie knnen entweder das Zeichen #
und den Namen des Ankers in das Feld HYPERLINK eintippen (hier also
#Aufgabe oder Sie verwenden das Dateizeiger-Symbol, und ziehen es
mit der Maus zum Anker.

Abbildung 61: Anker setzen und verlinken mit Dreamweaver
4.4 Bilder und Rollovers
Um ein Bild in die Webseite einzufgen verwenden Sie das Bild-Symbol im
Fenster EINFGEN.
Der Effekt, dass sich ein Bild in ein anderes verwandelt, wenn Sie den
Mauszeiger darber bewegen heit Rollover-Effekt oder OnMouseOver-Effekt.
In Abbildung 62 werden zwei Bilder gezeigt, die fr so einen Rollover-Effekt
geeignet wren. Zuerst mssen Sie die beiden Bilder erzeugen und in einem
geeigneten Ordner ablegen zum Beispiel im selben Ordner in dem auch die
HTML-Datei liegt.
Anker setzen:
Strg+Alt+A

Bild einfgen

Abbildung 62: Zwei Bilder fr einen Rollover-Effekt
Der Code hinter dem Effekt ist eine Kombination aus einem <img>-Tag, einem
Link und ein bisschen Javascript-Code. Mit Dreamweaver kann dieser Effekt ganz
einfach mit dem Symbol Rollover-Bild im Fenster EINFGEN erzeugt werden.

Abbildung 63: Dreamweaver-Fenster Rollover-Bild einfgen
Den Bildnamen knnen Sie frei whlen. Bei Originalbild und Rollover-Bild geben
Sie die Dateinamen (oder den relativen Pfad) der beiden Bilder ein.
Jedes Rollover-Bild ist gleichzeitig ein Link. Wenn Sie bei Wenn angeklickt,
gehe zu URL nur das Zeichen # eingeben ist es ein Link zur selben Seite. Sie
knne aber auch den Dateinamen einer anderen HTML-Datei oder eine URL
eingeben.
4.5 Unsichtbare Elemente
Manche Dinge die bei der Darstellung der Webseite im Browser unsichtbar sind
werden in der Entwurfsansicht von Dreamweaver dargestellt, z.B. wie in
Abbildung 64 gezeigt der <br>-Tag der einen Zeilenumbruch erzwingt.

Abbildung 64: Darstellung des <br>-Tags in Dreamweaver

Rollover-Bild
einfgen
Bei Web-Formular wird in der Entwurfsansicht von Dreamweaver der <form> -
Tag als rote, strichlierte Linie dargestellt. zeigt die Darstellung in Dreamweaver
und im Browser:

Abbildung 65: Darstellung von des <form> - Tags von Webformularen in Dreamweaver
4.6 Navigation in Tabellen
Der Tag-Selektor am unteren Rand des Dokumentenfensters zeigt an, innerhalb
welcher HTML-Tags sich der Cursor im Dokumentenfenster gerade befindet. Im
Beispiel rechts: der Curser befindet sich auf einem Link <a>, der befindet sich
innerhalb eines Absatzes <p>, der wiederum ist innerhalb des <body>-Tags.
Beim Bearbeiten von Tabellen knnen Sie den Tag-Selector besonders gut
gebrauchen: Ein Klick auf <td> im Tag-Selektor, und die Zelle wird markiert.
Gleichzeitig zeigt das Eigenschaftsfenster die Eigenschaften dieser Zelle an, wie
in Abbildung 66 gezeigt.

Abbildung 66: Markieren und Bearbeiten einer Tabellen-Zelle
Ein Klick auf <tr> im Tag-Selektor, und die Zeile wird markiert. Gleichzeitig
zeigt das Eigenschaftsfenster die Eigenschaften dieser Zeile an, wie in gezeigt.


Abbildung 67: Markieren und Bearbeiten einer Tabellen-Zeile
Ein Klick auf <table> im Tag-Selektor, und die gesamte Tabelle wird markiert.
Gleichzeitig zeigt das Eigenschaftsfenster die Eigenschaften der Tabelle an, wie
in Abbildung 68 gezeigt.

Abbildung 68: Markieren und Bearbeiten einer Tabelle
Das funktioniert auch wenn Tabellen in von Tabellen geschachtelt werden, wie in
Abbildung 69 gezeigt. Sie knnen immer ganz gezielt das richtige Objekt
auswhlen und verndern.

Abbildung 69: Tag-Selector zeigt eine Tabelle in der Tabelle
Mit Dreamweaver wird das Erstellen und Verndern von
Tabellen sehr viel einfacher als mit notepad. Mit wenigen Klicks
knnen Sie sehr komplizierte Tabellen-Konstruktionen
erzeugen. Achten Sie trotzdem darauf immer die einfachste
mgliche Tabelle zu verwenden!
Trotzdem:
so einfach wie
mglich
4.6.1 Site Verwalten
Eine Ansammlung von Webseiten die zusammen gehren nennt man eine
Website oder Site. Die einzelnen Dateien einer Site mssen in einem
gemeinsamen Ordner liegen. Eine Site entspricht also einem Projekt. Wenn Sie
gleichzeitig fr mehrer KundInnen Sites erstellen werden Sie die Daten in
getrennten Ordnern aufbewahren.
Dreamweaver hat ein eigenes Fenster, mit dem Sie die Dateien einer Site
verwalten knnen. Das Site-Fenster sieht beispielsweise wie links gezeigt aus.
Mit dem Symbol Wiederherstellen/Minimieren knnen Sie die groe Variante
des Site-Fensters (bildschirmfllend) einblenden.

Abbildung 70: Site-Fenster von Dreamweaver bildschirmfllend, SiteMap-Ansicht
In diesem Fall gehren alle Dateien in c:\data\webmirror\kurse zu einer Site
mit dem Titel Kurse. Bei der ersten Verwendung dieses Fensters mssen Sie
zuerst die Site definieren d.h., Sie mssen Dreamweaver mitteilen, in welchem
Ordner die Site liegt, wie in Abbildung 71 gezeigt.

Abbildung 71: Bearbeiten der Site-Information in Dreamweaver

4.6.2 FTP-Upload
Wenn Sie Webspace mieten erhalten Sie einen Usernamen und ein Passwort -
mit diesen beiden haben Sie die Berechtigung Seiten auf den Webserver
hinaufzuladen. Dazu bentigen Sie ein FTP-Programm.
Das Site-Fenster von Dreamweaver ist so ein FTP
8
-Programm. Im Sitefenster
sieht man rechts die Dateien am eigenen Computer, und links die Dateien am
Webserver drauen im Internet, wie in Abbildung 72 gezeigt.

Abbildung 72: Site-Fenster von Dreamweaver FTP-Ansicht
Im Gegensatz zu anderen FTP-Programmen untersttzt Sie Dreamweaver dabei,
Ihre Dateien im richtigen Ordner abzulegen. Wenn Sie wie in Abbildung 72
gezeigt auf Datei bereitstellen drcken wird die ausgewhlte Datei in den
richtigen Ordner (html-ue1) auf dem Webserver geladen. Die Ordnerstruktur
bleibt erhalten, und damit auch die Funktionstchtigkeit der relativen Links
(vergleiche Seite 36)
Abbildung 73 zeigt, was Sie nicht tun sollten: die Datei in einen anderen Ordner
am Webserver hinauf laden. Dann funktionieren alle relativen Links nicht mehr.

8
Genau: ein FTP- und SFTP-Programm. An der FH verwenden wir SFTP. Das S stehe fr
secure, weil die bertragung des Passworts verschlsselt erfolgt.

Abbildung 73: FTP-Upload in den falschen Ordner
Bevor Sie FTP im Dreamweaver Site-Fenster benutzen knnen mssen Sie
(Unter SITE SITE BEARBEITEN BEARBEITEN WEBSERVER INFOS) die Angaben
fr FTP eintragen: Der Name des Servers, Username und Passwort.

Abbildung 74: Bearbeiten der FTP-Information in Dreamweaver
Neben FTP bietet Dreamweaver auch noch den Upload mit dem WebDAV-
Protokoll an, das aber nur von wenigen Webservern untersttzt wird. Ein Upload
mit scp oder sftp, wie er an verschiedenen Hochschulen verwendet wird, ist mit
Dreamweaver nicht mglich.
4.6.3 Imagemaps
Mit Imagemaps (auch Hotspots genannt) knnen Sie einzelne Bereiche auf
einem Bild markieren, die einen besonderen Link erhalten sollen. Das Werkzeug
zum Einfgen der Hotspots erscheint nur, wenn Sie ein Bild markiert haben:

Abbildung 75: Eigenschafts-Fenster von Dreamwaver zur Erstellung von Imagemaps
Zu jedem Hotspot knnen Sie eine eigene URL angeben:

Abbildung 76: Erstellung und Bearbeitung eines Hotspots mit Dreamweaver
Der HTML-Code dazu sieht etwas unbersichtlich aus, weil er die Koordinaten
der einzelnen Hotspots enthlt. Die Koordinaten werden von der linken oberen
Ecke des Bildes gemessen, und zwar in Pixel.

<img
src="karte.gif" width="379"
height="309" usemap="#Map"
border="0">
<map name="Map">
<area shape="circle"
coords="196,285,37"
href="#">
<area shape="rect"
coords="238,220,351,293"
href="#">
<area shape="poly"
coords="197,222,184,"
href="#">
</map>
Abbildung 77: Imagemap Darstellung in Dreamweaver und im Code

Intro
Mit Kenntnissen ber HTML und Dreamweaver knnen Sie nun fortgeschrittene
Aspekte des Webdesign erlernen.

Advanced Webdesign Seite 71
5 Advanced Webdesign
5.1 Formulare
Mit Ihren bisherigen Kenntnissen knnen Sie schon Webseiten mit einfachen
Interaktions-Mglichkeiten gestalten: mit Links und Hotspots ermglichen Sie
der LeserIn die Navigation durch das Web. Formularen ermglichen mehr
Interaktion aber immer noch in einem sehr strengen, sehr strukturierten
Rahmen. Abbildung 78 zeigt zwei typische Anwendungsgebiete fr Web-
Formulare: das Eingabeformular der Suchmaschine Google und ein Bestell-
formular.

Abbildung 78 Formulare in Webseiten
Mit den HTML-Tags <form>, <input>, <textarea>, <option>, <select> werden
Formulare gebaut. Ein einfaches Beispiel zeigt Abbildung 79

Abbildung 79: HTML-Code eines Formulares
Der <form>-Tag ist unsichtbar und dient nur dazu die anderen Eingabefelder
zu bndeln. Im Action-Attribut des <form>-Tags wird angegeben, an welches
Programm die Daten zur Verarbeitung geschickt werden.
Abbildung 80 zeigt wie Formular dessen Code das in Abbildung 79 gezeigt wurde
im Browser dargestellt wird.
Seite 72 Advanced Webdesign

Abbildung 80: Darstellung eines Webformulars im Browser
5.1.1 Eingabefelder
Innerhalb des <form>-Tag bauen Sie das Formular aus verschiedenen
Eingabeelementen und den normalen HTML-Tags auf. Tabelle 8 zeigt die
verschiedene Arten von Text-Eingabefeldern.
Textfeld:

<input type="text"
name="meintextfeld"
value="text eingeben" />
Passwort-Feld:

<input type="password"
name="meinpasswort" />
mehrzeiliges Textfeld = Textbereich

<textarea name="zitat">
In a hole in the ground
there lived a Hobbit.
</textarea>
Tabelle 8: Text-Eingabefelder
Fr einzelne Fragen die mit Ja oder Nein zu beantworten sind wird das Eingabe-
Element checkbox verwendet, siehe Tabelle 9.

<input
type="checkbox"
name="rauch" /> Raucher
Tabelle 9: Checkbox fr Ja-/Nein-Fragen
Fr Frage, bei denen (eine von) mehreren vorgegebenen Antwort mglich sein
soll gibt es verschiedene Eingabeelemente, die in Tabelle 10 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 Auswhlen---</option>
<option>XL</option>
<option>L</option>
<option>M</option>
<option>S</option>
</select>
Liste

<select name="html" size="4" multiple>
<option>im Code</option>
<option>Dreamweaver</option>
<option>GoLive</option>
<option>Frontpage</option>
</select>
Tabelle 10: Eingabeelemente fr Fragen mit mehreren Antworten
Radiobuttons die zu einer Frage gehren mssen den selben Namen tragen.
der Wert ist unterschiedlich (im Code: name ist gleich, value unterschiedlich).
Nur bei einer Liste besteht die Mglichkeit mehrere Antworten auszuwhlen. Fr
alle Eingabefelder gibt: falls auch "keine Antwort" mglich sein soll mssen Sie
dafr eine eigene Option einbauen.
Jedes Formular braucht einen Absende-Button wie in Tabelle 11 gezeigt.
Absende-Button

<input type="submit"
value="drück mich!" />
Zurcksetzen-Button

<input type="reset"
value="Zurücksetzen" />
Tabelle 11: Eingabefelder Absenden und Zurcksetzen
Ohne Absende-Button knnen die Daten nicht zur weiteren Verarbeitung
bermittelt werden.
Den Zurcksetzen-Button sollten Sie nur sehr selten einsetzen. Warum?
Denken Sie an Ihre eigene Erfahrung mit Web-Formularen zurck: Wie oft haben
Sie auf einen Zurcksetzen-Button gedrckt und dann gedacht super, alles
gelscht, genau das wollte ich, und wie oft haben Sie auf einen Zurcksetzen-
Button gedrckt und dann gedacht Mist, das war ja gar nicht der Einsende-
Button, jetzt muss ich alles nochmal tippen.
Zurcksetzen?
Nein Danke!
Tabelle 12 zeigt noch mehr Eingabefelder, die eher selten gebraucht werden.
Unsichtbares = Verstecktes Feld

<input type="hidden"
name="webseite"
value="www.students" />
Button ohne Auftrag, fr Javascript-Programme

<input type="button"
value="Extrafenster"
onClick="..Javascript hier..">
Bildfeld, liefert Koordinaten.

<input type="image"
border="0"
name="position"
src="austria.gif"
width="150" height="64">
Visuelle Zusammenfassung mehrer Felder: fieldset + legend

<fieldset>
<legend>Kreditkarte</legend>
<input name="nr"><br>
<input type="radio" name="kk"
value="Master"> Master
<input type="radio" name="kk"
value="Visa"> Visa <br>
</fieldset>
Datei-Upload, funktioniert nur wenn die Formular-Daten an dne Webserver
geschickt werden, nicht aber bei Versand per E-Mail

Whlen Sie ein Bild aus:
<input type="file" name="bilddatei">
Tabelle 12: 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 Interaktionsmglichkeiten.
Im Folgenden sehen Sie eine Reihe von Entwrfen eines Reservierungs-
Formulars fr ein Hotel.

Version 1: Ein Men ermglicht die
Auswahl aus vorgegebenen
Elementen.
Mit diesem Formular kann man nur
ein, nicht aber zwei oder mehr
Zimmer reservieren.

Version 2: Ein Text-Eingabefeld
ermglicht hier die Eingabe der Anzahl
der Zimmer.
Es ist aber nicht mglich ein Einzel-
plus ein Doppel-Zimmer zu
reservieren.

Version 3: Diese Version ermglicht
die Reservierung von beliebigen vielen
Zimmern in allen Kombinationen.

Version 4: Durch ein zustzliches
Textfeld knnen alle weiteren
Probleme abgefangen werden
Abbildung 81 Entwrfe fr ein Zimmer-Reservierungs-Formular
Bei der Verwendung von Checkboxen, Radiobuttons, Mens und Listen geben Sie
genau vor, welche Mglichkeiten die LeserIn hat. Wenn Sie beim Entwurf des
Formulars eine Mglichkeit vergessen kann die LeserIn nichts mehr daran
ndern. Deswegen ist hier besondere Sorgfalt geboten. Eine besonders hufige
Auslassung zeigt Tabelle 13.

Tabelle 13: Entwrfe fr ein Getrnke-Bestell-Formular
Der linke Entwurf in Tabelle 13 lsst keine Bestellung nur einer Sorte Bier zu.
Die Mindestbestellmenge fr jede Sorte ist jeweils eine Kiste. Durch das
Einfgen einer Leer-Option in die Mens wird diese Einschrnkung aufgehoben.
5.1.2 Formulare erstellen mit Dreamweaver
Dreamweaver zeigt in der Entwurfsansich den <form> - Tag eines Formulars als
rote, strichlierte Linie. Abbildung 82 zeigt die Darstellung in Dreamweaver und
im Browser:

Abbildung 82: Darstellung von des <form> - Tags von Webformularen in Dreamweaver
Achten Sie auf die strichlierte Linie, dann knnen Sie einen der hufigsten
Fehler beim Erstellen von Formularen vermeiden: mehrere <form>-Tags fr ein
und dasselbe Formular, wie in Abbildung 83 gezeigt.

Abbildung 83: Hufiger Fehler: mehrere <form> - Tags fr ein Formular
Welche Auswirkung hat der in Abbildung 83 gezeigt Fehler? Wenn der Absende-
Button bettigt wir, werden nur die Daten aus dem <form>-Tag gesendet, in
dem sich der Absende-Button selbst befindet. Die Daten aus dem Text-
Eingabefeld und von den Radio-Buttons werden in diesem Fall nicht gesendet.
Im Fenster Einfgen gibt es eine eigene Abteilung fr Formulare, wie in
Abbildung 84 gezeigt.

Abbildung 84: Formular-Elemente einfgen mit Dreamweaver
Das 9. (in der Abbildung hervorgehobene) Symbol fgt nicht nur ein
Formularfeld ein, sondern ein ganzes Sprungmen das ist ein Kombination
aus Formular, Men als Eingabeelement und einem Javascript-Programm. Wenn
die LeserIn aus dem Men einen Eintrag auswhlt wechselt der Browser auf eine
andere Webseite. Es handelt sich also um ein Navigationselement, das nicht
innerhalb von anderen Formularen verwendet werden sollte!
Jedes Eingabefeld erhlt einen Namen. Der Name wird ber das Eigenschafts-
Fenster von Dreamweaver eingegeben, wie in Abbildung 85 gezeigt.
Nur ein Formular!
Eingabefelder
einfgen
Vorsicht Sprungmen!
Eingabefelder
benennen

Abbildung 85 Namen fr Formularfelder angeben in Dreamweaver
5.1.3 Formulardaten absenden
Was passiert, wenn Sie ein Formular ausfllen und auf den Absende-Button
drcken? Die Namen der Eingabefelder und die Daten die eingegeben wurden,
werden zur weiteren Verarbeitung versendet. Abbildung 86 zeigt ein Formular,
und die Daten die von diesem Formular versendet werden (in einer Darstellung
die die Web-Developers-Toolbar des Browsers Firefox liefert).

Abbildung 86: Formular und gesendete Daten Standard-Namen
Beachten Sie dabei: Der restliche Inhalt der Webseite, also z.B. der erklrende
Text, der neben den Eingabefeldern steht, wird nicht gesendet. In diesem
Beispiel also Lieferadresse, Strasse, PLZ und Ort. Die Benennung der
Eingabefelder ist in diesem Beispiel nicht gut gelungen, Abbildung 87 zeigt eine
verbesserte Version.

Abbildung 87: Formular und gesendete Daten sprechende Namen fr Eingabefelder
Wohin / an wen werden die Daten aus dem Webformular gesendet? Um das zu
erklren mssen wir noch einmal kurz die Begriffe Client und Server
wiederholen:
Als Client wird ein Programm bezeichnet, das einen Internet-Dienst in
Anspruch nimmt. Beim Internet-Dienst World Wide Web ist der Client also der
Web-Browser. Manchmal wird auch der ganze Computer, auf dem das
Programm luft, als Client bezeichnet.
Client + Server +
HTTP
Als Server wird ein Programm bezeichnet, das einen Internet-Dienst anbietet.
Ein Webserver liefert also auf Anfrage Webseiten. Manchmal wird auch der
ganze Computer, auf dem der Webserver luft, als Server bezeichnet.
HTTP ist das Protokoll, die Vorschrift, wie Web-Browser und Webserver
miteinander kommunizieren. Das Diagramm in Abbildung 88 zeigt den normale
Ablauf von HTTP: Der Browser stellt eine Anfrage an den Webserver, der
Webserver liefert als Antwort ein HTML-Dokument, der Browser stellt das
Dokument dar.
Web-
Server

Abbildung 88: Webbrowser und Webserver
Mit Webformularen wird dieser Ablauf etwas komplizierter: Nun kann der
Webbrowser nicht nur eine Anfrage nach einem Dokument stellten, er kann
dabei auch Daten mitschicken nmlich die Daten, die ins Formular eingegeben
wurden.
Wohin / an wen werden die Daten gesendet? Die URL (des Programmes) wird im
action-Attribut des <form>-Tags angegeben, und endet meist mit der Endung
.cgi oder .php.
<form action="http://webwelt.horus.at/html/form/echo.cgi">
Das Programm am Webserver verarbeitet die Daten, und liefert als Ergebnis
eine Webseite, die wieder vom Browser angezeigt wird. Das Diagramm in soll
diesen Ablauf verdeutlichen.
Web-
Server
CGI
Web-
Server
CGI CGI

Abbildung 89: Formulardaten werden ber HTTP an ein Programm am Webserver
versandt
Die Daten werden vom Browser an den Webserver bermittelt. Der Webserver
startet in diesem Fall ein weiteres Programm, z.B. ein CGI-Skript, und bergibt
Wohin mit den Daten?
HTTP +
Programm am Server
die Daten an dieses Programm. Das Programm verarbeitet die Daten und liefert
als Ergebnis, als Output, ein HTML-Dokument, an das Webserver-Programm
zurck. Das Webserver-Programm bermittelt das HTML-Dokument an den
Browser, der es darstellt.
Wenn Sie nicht ber ein geeignetes Programm am Webserver verfgen (weder
ein fertiges Programm, noch die Mglichkeit es selbst zu programmireren) dann
knnne Sie als Alternative die Daten per E-Mail verschicken. So sieht der
entsprechende HTML-Code des Formulars aus:
<form action="mailto:ich@fh-sbg.ac.at"
method="post"
enctype="text/plain">
Bei dieser Vorgehensweise werden die Daten vom Browser an ein (ebenfalls am
Client) installiertes E-Mail Programm bergeben. Dieses E-Mail Programm
bernimmt das versenden der daten an die Ziel-Adresse.
bjelli@horus.at

Abbildung 90: Formulardaten werden per E-Mail versandt
In Dreamweaver geben Sie diese Attribute des form-Tags wie in Abbildung 91
gezeigt ber das Eigenschafts-Fenster ein. In lteren Versionen von
Dreamweaver gibt es kein Eingabefeld fr das Attribut enctype.

Abbildung 91: Formular direkt per E-Mail versenden mit Dreamweaver
Achtung: Das Versenden der Daten per E-Mail kann aus
verschiedensten Grnden schief gehen. Zum Beispiel weil ein
Browser, aber kein E-Mail Programm installiert ist. Oder weil das E-Mail
Programm zwar installiert, aber das Zusammenspiel zwischen Webbrowser und
E-Mail Programm nicht korrekt konfiguriert ist. Das Versenden der Daten per
HTTP an den Webserver, und das Verarbeiten der Daten mit einem Programm
am Server ist also die zuverlssigere Methode.
Das Thema Webformulare ist damit ausfhrlich behandelt.
Der nchste logische Schritt ist die Erstellung eines Programms am Webserver,
das Formulardaten verarbeiten kann. Dafr gibt es verschiedene Programmier-
Wohin mit den Daten?
Mail
HTTP oder E-Mail?
Ausblick
sprachen und Schnittstellen, die bekanntesten wren die Sprache Perl ber die
Programmierschnittstelle CGI. Eine Alternative wre die Sprache PHP.
Mit der Programmiersprache Javascript knnen die Formulardaten vor dem
Versendenden aus dem Browser geprft werden (Auer Javascript ist
deaktiviert dann entfllt die Prfung).
5.2 Ebenen
Ebenen werden mit dem <div>-Tag erzeugt. Sie knnen absolut positioniert
werden, und sind unabhngig vom normalen Inhalt der Webseite. Sie werden
manchmal fr Layout, und oft fr Effekte verwendet. Mit Dreamweaver sind sie
wesentlich praktischer zu erstellen als im HTML-Code.
5.2.1 Ebenen in HTML
Sie kennen den HTML-Tag <div> schon als allgemeinen Container ohne eigene
Bedeutung, den man verwenden kann um einen Style anzuwenden:
<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<div style="border: 1px black solid;
background-color: yellow ">
<p>drei Absatz Text</p>
</div>
Mit der Stylesheet-Anweisung position: absolute; wird aus dem Container-
Tag eine Ebene. Der Inhalt der Ebene verhlt sich, als ob er auf einer Folie ber
der normalen Webseite "schwebt".
<div style="position:absolute;
left:43px; top:9px; width:104px; height:173px;
z-index:1; background-color:yellow;
border: 1px black solid">
<p>drei Absatz Text</p>
</div>
ACHTUNG: Im Gegensatz zu Tabellen-Zellen reagieren Ebenen nicht auf die
Gre ihres Inhalts. Wenn der Text zu gro ist luft die Ebene ber, wie in
Abbildung 92 gezeigt.

Abbildung 92: Absolut positionierte Ebene bei verschiedenen Schriftgren
5.2.2 Ebenen in Dreamweaver

Ebenen kann man in Dreamweaver ganz einfach mit dem entsprechenden
Werkzeug zeichnen. Abbildung 93 zeigt die Darstellung von Ebenen in
Dreamweaver. Die Position des HTML-Tags <div> in der Seite durch ein gelbes
Symbol das den Buchstaben C enthlt dargestellt, die Ebene selbst wird an der
definierten Position durch ein Rechteck dargestellt. Das gelbe [C] kann man in
der Seite beliebig verschieben, es ist bei der Darstellung im Browser unsichtbar.
Die Ebene kann man an dem Rechteck in der linken oberen Ecke nehmen und
verschieben.

Abbildung 93: Darstellung von absolut positionierten Ebenen in Dreamweaver
Die Attribute des <div>-Tags knnen wie in Abbildung 94 gezeigt mit dem
Eigenschaften-Fenster verndert werden.

Abbildung 94: Eigenschaften von absolut positionierten Ebenen in Dreamweaver
Eigenschaften der Ebene:
1. Name: wie immer ganz links am Eigenschaftsfenster
2. Position und Grsse: nicht hier eintippen, sondern die Ebene mit der
Maus positionieren
3. Z-Index: gibt an welche Ebene ber welcher Ebene liegt
4. Sichtbarkeit: eine Ebene kann versteckt oder sichtbar sein.
5. Hintergrundfarbe + Hintergrundbild
6. berlauf: soll eine Scrollbar erscheinen wenn der Inhalt zu gro fr die
Ebene ist?
5.2.3 Tipps fr die Verwendung von Fixen Ebenen
Fix positionierte Ebenen sind nur beschrnkt fr das Layout der
Seite geeignet. Wie oben beschreiben reagiert eine Ebene nicht
darauf, dass der Inhalt zu gro wird. Hier sind die in Kapitel 3.4
beschriebenen Methoden mit CSS zum empfehlen, die immer
garantieren, dass der gesamte Inhalt lesbar bleibt
Wenn man doch absolut positionierte Ebenen fr das Layout
verwenden will, muss man den gesamten Inhalt der Seite in
Ebenen unterbringen, sonst hat man folgendes Problem:
1. Die Ebenen sind immer absolut, oder besser
gesagt: relativ zur linken oberen Ecke des
Browser-Fensters positioniert
2. Der "normale" Inhalt der Webseite kann auch
anders positioniert sein, z.B. zentriert im
Browser-Fenster
Bei einer nderung der Fenstergre oder der
Schriftgre "verrutschen" also normaler Inhalt
und Ebenen gegeneinander.
5.3 Frames
WARNUNG: Frames machen Probleme:
Ohne Frames hat jede Webseite eine eindeutige URL. Mit Frames gilt das nicht
mehr. Daraus folgen unvermeidbare Probleme:
In der Suchmaschine wird immer nur ein einzelner Frame gefunden, nicht das
"Gesamtkunstwerk"
Von anderen Websites knnen keine gezielten Links mehr gesetzt werden,
nur Links auf die "Einstiegskonstellation" des Framesets, oder auf einzelne
Frames
Beim Drucken muss man extra angeben welcher Frame / ob alle Frames
gedruckt werden sollen. Das misslingt meistens.
Zustzlich machen Frames noch Probleme, die durch geeignete Programmierung
vermeidbar sind, aber trotzdem oft auftreten:
Innerhalb von Frames ist es schwieriger einen Links richtig zu setzen
Mit Frames kann man leicht den Bildschirmplatz verschwenden
Man kann die Bildlaufleisten abschalten, auch wenn sie zum bentzen der
Seite notwendig wren
Was im Browser wie "eine" Webseite aussieht, kann aus mehreren Frames, und
damit aus mehreren HTML-Datei bestehen. Die wichtigste Datei enthlt neue
HTML-Tags: <frameset> und <frame>. Alle anderen Dateien enthalten ganz
normales HTML wie Sie es schon kennen.
Navi
ga
tion
Inhalt
Inhalt
Inhalt
<frameset cols="60,*">
<frame name="linksframe" src="links.html">
<frame name="inhaltframe" src="inhalt.html">
</frameset>
Damit die Seite funktioniert mssen 3 Dateien vorhanden sein:
index.html, links.html, inhalt.html
So knnte die Datei links.html aussehen:
<p><b>Navigation<b></p>
<p>
<a href="inhalt.html" target="inhaltframe">Home</a><br>
<a href="zwei.html" target="inhaltframe">Seite 2</a><br>
<a href="drei.html" target="inhaltframe">Seite 3</a><br>
<a href="vier.html" target="inhaltframe">Seite 4</a><br>
</p>
Die Dateien inhalt.html, zwei.html, drei.html,und vier.html sind ganz
normale html-Dokumente.
5.3.1 Frames in Dreamweaver
Achtung: es ist sehr einfach in Dreamweaver mit ein paar Mausklicks eine
komplizierte Webseite mit 100 Frames zu erzeugen. Am Ende hat man keine
Ahnung wie die beteiligten Dateien heien. Das ist schlecht! Zuerst denken +
planen, dann erst Frames anlegen!
Um im Dreamweaver mit Frame zu arbeiten mssen Sie als erstes die Anzeige
des Frame-Rahmens aktivieren: Anzeige Frame-Rahmen. Damit wird im
Dreamweaver um jeden Frame ein zustzlicher Rahmen angezeigt, mit dem Sie
diesen Frame dan manipulieren knnen.
Frame erzeugen: Bei gedrckter ALT-Taste den Frame-Rahmen ins Dokument
ziehen
Frame auswhlen: Bei gedckter ALT-Taste den Framerahmen anklicken.
Im Dreamweaver knnen Sie mit Alt-Klick oder mit dem Tag-Selector jeden
Frame und jedes Frameset auswhlen und mit dem Eigenschaftesfenster
manipulieren, wie in Abbildung 95 gezeigt.
Abbildung 95: Eigenschaften von Frames in Dreamweaver
Das uere Frameset ist in zwei Zeilen
unterteilt. Hier ist die obere Zeile markiert.
Die Hhe der Zeile ist auf 50 Pixel
eingestellt.

Das innere Frameset unterteilt die untere
Zeile in zwei Spalten. Die linke Spalte ist
auf 60 Pixel eingestellt. Die rechte Spalte ist
auf relativ eingestellt, d.h. die nimmt den
Rest des Platzes ein.

Das Attribut src des Frames (Qu. wie
Quelle) gibt an, welche HTML-Datei als
erstes in diesen Frame geladen wird. Mit
Links knnen dann aber andere HTML-
Seiten geladen werden.

5.4 Layout im Vergleich
5.4.1 mit Tabellen
Kopfzeile
Na
vi
ga
tion
Inhalt
Inhalt
Inhalt
Inhalt
Eine Seite mit diesem Aufbau besteht aus zwei
ineinander verschachtelten Framesets, die insgesamt
drei Frames enthalten. In jeden Frame kann eine
andere HTML-Seite eingeblendet werden:
<table border="0">
<tr>
<td colspan="2">Kopfzeile</td>
</tr>
<tr valign="top">
<td width="100">Na<br>vi<br>ga<br>tion</td>
<td width="300">Inhalt</td>
</tr>
</table>

Trick um Mindestbreiten sicher zu stellen:
<tr height="1">
<td><img height="1" width="186" src="spacer.gif"></td>
<td><img height="1" width="455" src="spacer.gif"></td>
</tr>
5.4.2 mit Frames
Kopfzeile
Na
vi
ga
tion
Inhalt
Inhalt
Inhalt
Inhalt
Eine Seite mit diesem Aufbau besteht aus zwei
ineinander verschachtelten Framesets, die insgesamt
drei Frames enthalten. In jeden Frame kann eine
andere HTML-Seite eingeblendet werden:
<frameset rows="50,*">
<frame name="kopfframe" src="kopf.html">
<frameset cols="60,*">
<frame name="linksframe" src="links.html">
<frame name="inhaltframe"
src="inhalt.html">
</frameset>
</frameset>
5.4.3 mit absolut positionierten Ebenen
Kopfzeile
Na
vi
ga
tion
Inhalt
Inhalt
Inhalt
Inhalt
<div style="position:absolute; left:8px; top:9px;
width:601px; height:71px; z-
index:1">Kopfzeile</div>

<div style="position:absolute; left:8px; top:83px;
width:172px; height:238px; z-
index:2">Na<br>vi<br>ga<br>tion </div>

<div id="Layer3" style="position:absolute;
left:183px; top:82px; width:426px; height:240px; z-
index:3">Inhalt</div>
Was passiert bei einer nderung der Fenstergrsse oder der Schriftgrsse mit
den drei Versionen?
Tabellen: Layout kann "zerfleddern", aber Inhalt bleibt lesbar
Frames: Falls man die Scrollbalken abgeschalten hat kann Inhalt
unzugnglich werden. Falls das Fenster zu klein wird, knnen Frames die
keinen Platz mehr haben ganz verschwinden
Ebenen: Falls der Inhalt zu gro wird, wird er entweder abgeschnitten
(clipping) oder er "luft aus"
5.4.4 mit CSS + float FEHLT
5.5 Multimedia
In Kapitel 1.2.7 haben Sie schon gelernt, wie man Dateien mit einem anderen
Format als HTML mittels eines einfachen Links in eine Website einbindet. Diese
Methode finden Sie hier noch einmal, unter dem Stichwort Download.
5.5.1 Download
Beispiel: PDF (oder Audio) zum Download anbieten: ganz normaler Link.
Achtung: Als Gestalterin der Seite kann ich nicht festlegen, ob die PDF-Datei
gespeichert werden soll, oder ob sie gleich im Browser (mittel PlugIn) angezeigt
werden soll.

Folien zu Dateisystemen, 450 KB pdf
<a href="docs/dateisysteme-sw.pdf">sw</a>
oder <a href="docs/dateisysteme.pdf">farbe</a>

5.5.2 Streaming: Real Audio fr Arme

Mit dem (gratis-) Progamm "Real Producer Basic" konvertiere ich meine Audio-
Dateien ins rm-Format. Beim Konvertieren muss ich die Qualitt auswhlen, z.B
"fr schechtes Modem", oder "fr ISDN-Leitung", oder "Fr ADS-Anschluss".
Mit dem Text-Editor erstelle ich eine Datei mit gleichem Namen, und der Endung
ram. In diese Datei schreibe ich die URL, unter der die rm-Datei erreichbar sein
wird.
http://webwelt.horus.at/multimedia/28-hamsterdance.rm
In der Webseite mach ich einen ganz normalen Link zur ram-Datei.
Musik fr <a href="28-hamsterdance.ram">28-er Modem</a>

5.5.3 Einbetten
Falls im Browser ein geeignetes Plugin fr diesen Dateityp installiert ist, wird er
das Plugin als Teil der Webseite anzeigen, und das Plugin tut dann was es tut. Es
gibt viele verschiedene Plugins fr ein und denselben Datentyp.

<embed src="B5.mov"
width="160"
height="140"
align="left"
autostart="false">
</embed>

Fr Eingebettetes Audio bieten sich noch die Attribute hidden="true" und
loop="true" an.
Nachteil dieser Methode: beim Erstellen der Seite kann ich nicht kontrollieren,
welches der vielen verschiedene Plugins verwendet wird. Je nach Plugin sieht
das ganze dann verschieden aus.
5.5.4 Flash - FEHLT
Mit Flash knnen Sie sich einen Media-Player selbst bauen, und bis ins Detail
selbst gestalten.
5.6 Java-Applets verwenden
Achtung: die Programmiersprache Java hat nichts mit der Programmiersprache
Javascript zu tun
9
.
Java-Applets sind kleine Java-Programme, die man in einer Webseite verwenden
kann um gewisse Effekte zu erziehlen. Ursprnglich konnte man nur mit Java-
Applets Animationen zeigen (aber dafr gibts jetzt ja animierte gifs), Rollover-
Effekte machen (aber dafr gibts ja jetzt Javascript), oder komplexe interaktive
Animationen darstellen (aber dafr gibts jetzt ja Flash). Es sind also relative
wenige Anwendungsbeispiele fr Java-Applets brig geblieben. Hier Eines:

Wenn man mit der Maus
ber das Bild fhrt
kruselt ein Wasser-Effekt
das Bild.
Der dazugehrige HTML-Code (etwas gekrzt):
<applet archive="AnWater.jar"
code="AnWater.class"
width="350" height="70">
<param name="credits"
value="Applet by Fabio Ciucci (www.anfyjava.com)">
<param name="res" value="1">
<param name="image" value="aphome.jpg">
<param name="light" value="YES">
<param name="minlight" value="0">
<param name="maxlight" value="100">
<param name="autodesign" value="NO">
<param name="density" value="4">
Sorry, your browser doesn't support Java.
</applet>
Die dazugehrigen Dateien:
index.htm
Die HTML-Datei
AnWater.jar
Das Java-Programm als Archiv (hnlich wie zip)
AnWater.class
Das Java-Programm in Einzelteilen: AnWater
anfy.class
Das Java-Programm in Einzelteilen: anfy
aphome.jpg
Das Bild, auf das der Effekt angewandt werden soll

9
Um genau zu sein: Java gibt es schon lnger als Javascript, Javascript wurde zu einer
Zeit erfunden als Java mega-in war. Deswegen wurde der Name Javascript in Anlehnung
an Java gewhlt. Ein Marketing-Gag, keine inhaltliche hnlichkeit.
Dieser Effekt entstammt der Applet-Sammlung anfy
(http://www.anfyteam.de/). Das Windows-Programm von Anfy
hilft beim Schreiben des HTML-Codes und beim Kopieren der ntigen
Dateien in den Web-Ordner.
In Dreamweaver ist das Symbol fr Java-Applet eine dampfende
Tasse Kaffee. (Java ist in Kalifornien der Name einer bestimmten
Kaffee-Sorte, nach dieser Kaffee-Sorte wurde die
Programmiersprache benannt. Ein gutes Beispiel fr ein Icon, das
nicht international funktioniert)

Abbildung 96: Darstellung eines Java-Applets in Dreamweaver

Das Schreiben von Javascript-Programmen ist nicht Stoff dieser
Vorlesung+bung. Sie mssen aber wissen wofr Javascript verwendet wird,
und wie Javascript in HTML eingebunden wird, so dass Sie javascript-Code
erkennen wenn Sie ihm begegnen.

Ein Einblick in Javascript Seite 91
6 Ein Einblick in Javascript
JavaScript ist eine Sprache, die 1995 bei Netscape erfunden und in den
Browser Netcape 2.0 eingebaut wurde. Andere Browserhersteller haben sich
angeschlossen, heute (2004/05) funktioniert Javascript u.a. in Mozilla, Netscape,
Firefox, Internet Explorer, Opera,
Mit Javascript kann man einer HTML-Seite interaktive Elemente hinzufgen, und
den Browser auf verschiedene Art steuern.
6.1 Der <script>-Tag im Body
Javascript-Programme knnen direkt in die Webseite mit dem <script>-Tag
eingebettet werden. Das Programm wird dann beim Aufbau der Seite
ausgefhrt:
<h1>Selbstzerstrung</h1>
<script>
for (i=10; i > 0; i--) {
document.write("<br>in " + i + " Millisekunden");
}
</script>
<p><strong>Peng!</strong>
Erklrung: Nach der berschrift "Selbstzerstrung" werden vom Javascript-
Programm 10 Zeilen HTML-Code erzeugt, die vom Browser wie ganz normaler
HTML-Code dargestellt wird. Danach wird der Absatz mit Peng! angezeigt.
6.2 die onEvent - Attribute
Meist werden Javascript-Programme aber so geschrieben, dass sie nicht gleich
beim Laden der Seite starten, sondern erst wenn gewisse Ereignisse (Events)
eintreten. Bei manchen HTML-Tags gibt es Attribute die mit on beginnen
(onClick, onSubmit, onLoad,...), als Wert enthalten diese Attribute das
Javascript-Programm das ausgefhrt werden soll.
<form>
<input type="button" value="Selbstzerstrung"
onClick="alert('peng')">
</form>
Ein ganz normales Formular mit einem Knopf wird angezeigt. Erst wenn der
Knopf gedrckt wird, wird das Event "onClick" ausgelst, und damit das
Javasprogramm gestartet. Das Javaprogramm erzeugt ein Popup-Fenster mit
dem Text "peng"

Seite 92 Ein Einblick in Javascript

Ein paar typische Events mit Ihren HTML-Tags:
<body onLoad="...">
Das Programm wird ausgefhrt, nachdem die
ganze Seite geladen + fertig dargestellt ist
<form onSubmit="...">
Das Programm wird ausgefhrt wenn der
Einsende-Knopf des Formulars bettigt wird, aber
bevor die Daten wirklich gesendet werden das
Programm kann die Daten prfen, und dann
entscheiden ob sie gesendet werdne.
<input onChange="..">
Das Programm wird ausgefhrt wenn der Inhalt
des Eingabefeldes verndert wurde
<a href="..."
onMouseOver="...">
Das Programm wird ausgefhrt wenn die Maus
ber den Link bewegt wird (gegenteil:
onMouseOut)
6.3 Der <script>-Tag im Head
Es ist blich, im Head-Bereich des Dokuments Funktionen (das sind kleine,
wieder verwertbare Proramm-Teile) zu definieren, die spter verwendet werden:
<head>
<script language="javascript">
function zeige(t) {
t = "!!!" + t + "!!!";
alert(t);
}
</script>
</head>
<body>

<form>
<input type="button" value="Selbstzerstrung"
onClick="zeige('peng')">
</form>
Die Funktion zeige wird duch das Javascript-Programm im <head> definiert,
aber noch nicht ausgefhrt. Erst durch den Aufruf der Funktion im onClick-
Event des Buttons wird die Funktion gestartet.
6.4 Was kann ein Javascript-Programm
Ein Javascript-Programm kann nur Elemente der Webseite und des
Webbrowser kontrollieren, sonst nichts. Typische Anwendungen sind:
Rollover-Bilder Wenn die Maus ber ein Bild bewegt wird, wird dieses
Bild durch ein Neues ersetzt.
Anzeige (und scrollen) von Text in der Statusleiste des Browsers

ffnen von neuen Browserfenstern mit definierter Gre und Position am
Bildschirm
Automatisches Ausfllen von Web-Formularen, z.B. bei Eingabe der
Stckzahl wird der Gesamtpreis (= Preis mal Stckzahl) automatisch
berechnet und angezeigt.
Ebene (<div> mit absoluter Position) unsichtbar oder sichtbar machen.
Prfen auf Plugin, falls das Plugin vorhanden ist wird auf eine neue
Webseite weitergeleitet.
Bei Frame-Seiten: Austausch der Dokumente in mehreren Frames (z.B.
Inhalt und Navigation mit nur einem Click austauschen)
6.5 Probleme mit Javascript
Das Programmieren von Javascript ist sehr schwierig. Nicht weil die
Programmiersprache schwierig wre, sondern weil die verschiedenen
Browserhersteller absichtlich unterschiedliche Javascript-Varianten in Ihre
Browser einbauen. Ein Beispiel: um die Breite des Browser-Fensters
auszumessen gibt es mehrere Varianten:
funktioniert in Netscape und Mozilla
x = window.innerWidth;
funktioniert in Internet Explorer
x = document.body.clientWidth;
In diversen Foren und auf verschiedenen Webseiten werden fertige Javascript-
Programme angeboten. Dabei findet man immer wieder veraltete Javascript-
Programme, die in den neuesten Browser-Versionen nicht mehr funktionieren.
Deswegen ist es wichtig auf das Erstellungsdatum zu achten.
6.6 Die Standardisierung von Javascript
Die Syntax, also die allgemeine Schreibweise der Sprache,
wurde als ECMASkript
10
von der European Computer
Manufacturers Association standardisiert. Das allein reichte aber nicht aus, um
die Unterschiede zwischen den Browsern zu beseitigen.
Schlielich befasste sich das World Wide Web Konsortium mit dem Problem. Die
Lsung des Konsortiums ist das Document Object Model (DOM), ein
allgemeines Modell wie die Webseite (das 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.
Dabei wird ein HTML- (oder XML-)Dokument als Baum interpretiert. Fr das
Dokument in Listing 3 ergibt das einen Baum wie links gezeigt.
Das DOM einer Webseite kann man sich als Baum vorstellen, so hnlich wie die
Ordnerstruktur im Dateisystem. So sind in Beispiel der markierte <li>-Tag
innerhalb des <ol>-Tags, der <li>-Tag enthlt wiederum einen <a>-Tag.
<html>
<body>
<p>Navigation</p>
<h1>berschrift</h1>
<div class="intro">
<h2>Dies und Das</h2>
<ol>
<li><a id="erster" href="#bla">erster Link</a></li>
<li><a href="#bla">zweiter Link</a></li>
<li><a href="#bla">dritter Link</a></li>
<li><a href="#bla">vierter Link</a></li>
. . .
</ol>
</div> . . .
Listing 3: HTML-Dokument
Mit diesem Modell kann man nun in einem Javascript-Programm die Webseite
viel tief greifender manipulieren als mit "klassischem" Javascript. Mgliche
Befehle wren:
Mache ein beliebiges Element des DOM unsichtbar (z.B. die ganze Liste)
ndere den Style eines beliebigen Elements (z.B. die Schriftart der
berschrift)

10
Fehler! Verweisquelle konnte nicht gefunden werden.
Syntax
Fge neue Elemente ein (z.B. drei zustzliche Listenpunkte nach dem ersten
Listenpunkte einfgen)
Mit dem DOM wurden diverse Zugriffs-Methoden definiert, zum Beispiel
document.getElementById() zum Auswhlen eines HTML-Tags mit einer
Bestimmten ID. Listing 4 zeigt ein Fragment eines Javascript-Programmes, das
das Dokument aus Listing 3 modifiziert.
document.getElementById("erster").href = "http://multimediaart.at";
Listing 4: Beispiel einer DOM-Methode
Doch selbst bei Verwendung des DOM gibt es immer noch kleine Unterschiede
zwischen den Browsern. Eine gute Informationsquelle dazu ist
quirksmode.org von Peter-Paul. Er hat auf dieser Site eine Liste von Beispiel-
Skripts verffentlicht, und dazu jeweils die Kompatibilitt von 6 verschiedenen
Browsern getestet. Abbildung 97 Zeigt ein Beispiel.

Abbildung 97: Browser-Kompatibilitt eines DOM-Skripts, Quelle: quirksmode.org
Durch die Einfhrung des DOM hat sich die Situation langsam verbessert. Als
genug von den alten Browsern ausgetauscht waren konnte man den neuen
Standard auch benutzen.
Fr Javascript+DOM war ca. 2005 dieser kritische Level an Verbreitung erreicht.
Seitdem gibt es mmer mehr Webapplikationen die Javascript und die DOM
konsequent einsetzten. In Kombination mit dem XMLHTTPRequestObject, das
das asynchrone Nachladen von Daten ermglicht, konnte so eine neue Qualitt
von Interaktion erreicht werden. Ein Beispiel fr diese Art von Interaktivitt ist
das in Abbildung 98 gezeigt Autocomplete-Eingabefeld.

Abbildung 98: Autocomplete Eingabefeld mit script.aculo.us
Methoden fr das
DOM
AJAX
In diesem Beispiel hat die Leserin erst einen Buchstaben in das Eingabefeld
eingetippt: a. Diese Eingabe wurde ber das XMLHTTRequestObject an ein
serverseitiges Skript gesandt, dass eine Datenbankabfrage durchfhrt. Das
serverseitige Skript liefert als Output ein kleines HTML-Fragment mit einer Liste
von Namen:
<ul>
<li>ameier</li>
<li>amller</li>
<li>ahuber</li>
<li>achovski-grauhuber</li>
</ul>
Dieses HTML-Fragment wird vom Javascript-Programm im Client mittels DOM in
die Webseite eingefgt. Durch ein Stylesheet erscheint die HTML-Liste nicht als
Liste sondern wie in der Abbildung gezeigt.
Im Februar 2005 verwendete Jesse James Garrett fr diese Kombination zum
ersten Mal die Abkrzung AJAX
11
. Seither entstanden eine Reihe von Javascript-
Libraries, die das Entwickeln von AJAX-Applikationen wesentlich beschleunigen.
Fr alle serverseitigen Programiersprachen (Perl, Java, PHP, Ruby) gibt es
ebenfalls Frameworks, Klassen, Libraries, die das serverseitige Erzeugen von
Javascript untersttzen.
Ob sich hier ein Framework durchsetzt, oder ob die Vielzahl von Angeboten auf
Dauer im Einsatz bleibt ist derzeit (Herbst 2006) noch nicht absehbar.
Wenn die Situation so unangenehm bis unbersichtlich ist, warum wird
Javascript und AJAX dann berhaupt verwendet? Die Antwort ist ganz einfach:
weil es keine Alternative gibt. Javascript ist die einzige clientseitige
Programmiersprache, die in den meisten Browsern eingebettet ist. Keine andere
Sprache hat eine so weite Verbreitung.
Bevor Sie aber ein Programm mit Javascript/AJAX schreiben, sollten Sie immer
erst recherchieren, ob es nicht fr Ihre Problemstellung bereits eine fertige
Lsung oder ein gutes Framework gibt. Ein funktionierendes, bereits getestetes
Javascriptprogramm an Ihre Bedrfnisse anzupassen oder auf mit einem
umfangreichen Framework ein Problem zu lsen ist immer weniger Arbeit (und
braucht weniger Nerven) als von Grund auf zu programmieren egal wie gut
Sie programmieren knnen.

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

Warum Javascript und
AJAX verwenden?
Anhnge Seite 97
7 Anhnge
7.1 Glossar
Absende-Button 73
Action 71
AJAX 96
ALT-Attribut 37
Anker 37
ANSI 26
ASCII 25
Attribute 28
Auflsung 14
Ausgabegerte 14
Ausrichtung 50
Auszeichnungssprache 12
Autocomplete 95
Bild 9, 32
Bildfeld 74
Bildformate 34
Bildschirmgre 14
blockbildende Tags 30
Body 38
Braille Ausgabegert 7
Browser 6
Browser-Versionen 14
Button 74
charachter entities 27
Checkbox 72
Client 6
Client/Server 5
copy 28
Datei-Upload 74
Eigenschaften Fenster 58
Eingabefelder 71
Einzug 50
euro 27
Farben 41
fieldset 74
font-Tag 32
Formulare 71
Funktionen 92
GET 8
gif 34
Head 38
Hotspot 67
HTML 8, 12, 25
http 8
Hyperlink 35
Imagemap 67
img 28
inline-Tag 31
Internet 4
Internet-Dienst 5
ISO 8859-1 26
ISO 8859-15 26
jpg 34
Klasse 50
Kompatiblitt
von HTML 30
Latin-1 26
Latin-15 26
legend 74
Link 9
relativer 36
linksbndig 50
Liste (Eingabefeld) 73
lynx 7
Markup Language 12, 25
Medium Web 13
Men 72
Mosaic 6
Mozilla 6
Opera 6
Passwort-Feld 72
Peer zu Peer 6
png 34
Programmiersprache 12
Protokoll 5
Radiobutton 72
Radiobuttons 73
rechtsbndig 50
reiner Text 25
relative URL 36
rtf 25
Schriftart 17
Schriftgre 19
Sehschwche 19
Server 6
Site definieren 60
Sonderzeichen 27
Standard-Schriftarten 17
Stylesheets 44
Tag 12
Text 25
text-align 50
Textbereich 72
Textfeld 72
text-indent 50
Titel 39
Umlaut 27
Umlaute 26
Unicode 27
Unsichtbares Feld 74
URL 8, 9
relative 36
utf8 27
Verstecktes Feld 74
Web Developers Toolbar 31
Webbrowser 6
Webseite 7, 8
Webserver 8
Webspace 66
Seite 98 Anhnge
whitespace 28
World Wide Web 4
XHTML 25
XMLHTTPRequestObject 95
Zeilenumbruch 19
zentriert
Absatz 50
Zurcksetzen-Button 73

7.2 Quellen und Referenzen
[Mnz2005] HTML-Handbuch, Stefan Mnz, Wolfgang Nefzger, Fanzis, Oktober 2005, ISBN
3772366546
[Steyer2004] JavaScript in 21 Tagen, Ralph Steyer, Markt und Technik, Februar 2004, ISBN
3827267684
[Lie2005] Cascading Style Sheets, Hakon W. Lie, Bert Bos, Addison Wesley Mai 2005, ISBN
0321193121
7.3 Tabellenverzeichnis
Tabelle 1: Blockbildende Tags.......................................................................................................31
Tabelle 2: inline-Tags ..................................................................................................................32
Tabelle 3: Varianten des img-Tags ................................................................................................33
Tabelle 4: Bildformate im Vergleich...............................................................................................34
Tabelle 5: der a-Tag fr Hyperlinks ...............................................................................................35
Tabelle 6: Farben und Hintergrundbilder im Stylesheets...................................................................41
Tabelle 7: Dreamweaver Tastaturkrzel fr die Formatierung von Text ..............................................60
Tabelle 8: Text-Eingabefelder .......................................................................................................72
Tabelle 9: Checkbox fr Ja-/Nein-Fragen........................................................................................72
Tabelle 10: Eingabeelemente fr Fragen mit mehreren Antworten.....................................................73
Tabelle 11: Eingabefelder Absenden und Zurcksetzen ....................................................................73
Tabelle 12: selten verwendete Eingabefelder ..................................................................................74
Tabelle 13: Entwrfe fr ein Getrnke-Bestell-Formular ...................................................................75

7.4 Abbildungsverzeichnis
Alle Abbildungen sind von der Autorin angefertigte Diagramme und Screenshots.
Abbildung 1: Zwei Computer die ber das Internet Daten austauschen............................................... 5
Abbildung 2: Verschiedene Dienste benutzen eine gemeinsame Infrastruktur ...................................... 5
Abbildung 3: Webbrowser: Mosaic (1993), Opera und Mozilla (2004) ................................................. 6
Abbildung 4: Text-Only Browser lynx und Braille Ausgabegert.......................................................... 7
Abbildung 5: Eine Browser zeigt eine lange Webseite an ................................................................... 7
Abbildung 6: Eine URL wird in einen Browser eingetippt.................................................................... 8
Abbildung 7: HTML-Code und Darstellung dieses Codes im Browser.................................................... 9
Abbildung 8: Diagramm zur Funktionsweise von HTTP .....................................................................11
Abbildung 9: Beispiel fr HTML-Code.............................................................................................12
Abbildung 10: Erstellen einer HTML-Datei mit Notepad/Editor oder SimleText ....................................12
Abbildung 11: HTML-Datei wird im Browser dargestellt ....................................................................13
Abbildung 12: Bearbeitung einer HTML-Datei in Dreamweaver..........................................................13
Abbildung 13: gngige Bildschirmauflsungen 2006 ........................................................................15
Abbildung 14: Statistik ber die Bildschirmauflsung, Juni 2006, Quelle: thecounter.com....................15
Abbildung 15: Platzbedarf von Browser-Elementen an zwei Beispielen ...............................................16
Abbildung 16: Netto-Breite von Browser-Fenstern, 2005-2006, Quelle: webwelt.horus.at..................16
Anhnge Seite 99
Abbildung 17: Standard-Schriftarten, ca, 1996 .............................................................................. 17
Abbildung 18: Statistik ber die Verbreitung von Fonts, Quelle www.visibone.com/font/ ..................... 18
Abbildung 19: Schriftarten-Liste................................................................................................... 18
Abbildung 20: Zeilenumbruch im Browser ..................................................................................... 19
Abbildung 21: Navigationsstruktur und Reales Navigationsverhalten................................................. 20
Abbildung 22: Plugin im Webbrowser und das Kontextmen (beim Rechtsklick) ................................. 21
Abbildung 23: Statistik ber Browser-Plugins, Quelle: Macromedia................................................... 22
Abbildung 24: Statistik ber Browser-Plugins, Quellen: sunniforum.com, goodcounter.com................. 22
Abbildung 25: Fehler: HTML-Code wurde als rtf gespeichert ............................................................ 26
Abbildung 26: Speichern einer HTML-Datei im Mac-Programm TextEdit............................................. 27
Abbildung 27: Zwei HTML-Dokumente die gleich dargestellt werden ................................................. 28
Abbildung 28: Fehler im HTML-Code: Anfhrungszeichen vergessen ................................................. 29
Abbildung 29: Neue HTML-Tags und Kompatibilitt mit alten Browsern ............................................. 30
Abbildung 30: Vorsichtiger Einsatz von neuen HTML-Tags............................................................. 30
Abbildung 31 Blockbildende Elemente im Browser Firefox angezeigt ................................................. 31
Abbildung 32: Eine Webseite und die Dateien aus denen sie besteht................................................. 32
Abbildung 33: Ein Pixel-Bild wird auf 4-fache Breite und Hhe vergrert.......................................... 33
Abbildung 34: Beispiel-Bild mit Dimensionen 450 x 450, 16.000 verschiedene Farben. ....................... 33
Abbildung 35: Bild mitten im Absatz ............................................................................................. 34
Abbildung 36: Link zu Alta Vista................................................................................................... 35
Abbildung 37: Umrechnung einer relativen URL in eine absolute URL ................................................ 36
Abbildung 38: Umrechnung einer relativen URL mit .. in eine absolute URL..................................... 36
Abbildung 39: relativer Link nach der bersiedelung auf eine neue Adresse....................................... 36
Abbildung 40: Bild als Link .......................................................................................................... 37
Abbildung 41: Bild das zur Navigation dient, Darstellung des Ersatztextes (alt) fr das Bild................. 37
Abbildung 42: Grundstruktur eines XHTML-Dokuments mit Head und Body........................................ 38
Abbildung 43: Anzeige einer gefundenen Webseite in einer Suchmaschine ........................................ 39
Abbildung 44: HTML-Code fr eine Tabelle .................................................................................... 40
Abbildung 45: Auswahl von Farbe (und Farbcode) mit Dreamweaver ................................................ 41
Abbildung 46: Beispiel fr ein Hintergrundbild in einer Webseite ...................................................... 42
Abbildung 47: HTML-Datei und dazugehriges Stylesheet................................................................ 45
Abbildung 48: Stylesheet-Code.................................................................................................... 46
Abbildung 49: Bild und Spalte mit fixer (links) vs. relativer Gre (rechts) ........................................ 49
Abbildung 50: Absatz mit CSS Formatanweisungen ........................................................................ 50
Abbildung 51: Dreamweaver fr Mac ............................................................................................ 55
Abbildung 52: Gemischte Ansicht in Dreamweaver ......................................................................... 56
Abbildung 53: Fenster von Dreamweaver im berblick.................................................................... 57
Abbildung 54: Details der Dreamweaver GUI ................................................................................. 58
Abbildung 55:Verschiedene Zustnde des Eigenschaften Fensters .................................................... 58
Abbildung 56: Zusammenhang zw. Eigenschaften und HTML-Attributen am Beispiel <img>.................. 58
Abbildung 57: Zusammenhang zw. Eigenschaften und HTML-Attributen am Beispiel Link..................... 59
Abbildung 58: Vernderung im Code bei nderung des Formats....................................................... 59
Abbildung 59: Vernderung im Code bei Formatierung als Liste ....................................................... 59
Abbildung 60: Mit Dreamweaver einen Link zu einer lokale Datei setzen ........................................... 61
Abbildung 61: Anker setzen und verlinken mit Dreamweaver ........................................................... 61
Abbildung 62: Zwei Bilder fr einen Rollover-Effekt...................................................................... 62
Abbildung 63: Dreamweaver-Fenster Rollover-Bild einfgen.......................................................... 62
Abbildung 64: Darstellung des <br>-Tags in Dreamweaver ............................................................. 62
Abbildung 65: Darstellung von des <form> - Tags von Webformularen in Dreamweaver ...................... 63
Abbildung 66: Markieren und Bearbeiten einer Tabellen-Zelle .......................................................... 63
Abbildung 67: Markieren und Bearbeiten einer Tabellen-Zeile .......................................................... 64
Abbildung 68: Markieren und Bearbeiten einer Tabelle.................................................................... 64
Abbildung 69: Tag-Selector zeigt eine Tabelle in der Tabelle............................................................ 64
Abbildung 70: Site-Fenster von Dreamweaver bildschirmfllend, SiteMap-Ansicht ........................... 65
Abbildung 71: Bearbeiten der Site-Information in Dreamweaver ...................................................... 65
Abbildung 72: Site-Fenster von Dreamweaver FTP-Ansicht ........................................................... 66
Abbildung 73: FTP-Upload in den falschen Ordner .......................................................................... 67
Abbildung 74: Bearbeiten der FTP-Information in Dreamweaver....................................................... 67
Abbildung 75: Eigenschafts-Fenster von Dreamwaver zur Erstellung von Imagemaps ......................... 68
Abbildung 76: Erstellung und Bearbeitung eines Hotspots mit Dreamweaver ..................................... 68
Abbildung 77: Imagemap Darstellung in Dreamweaver und im Code ................................................ 68
Abbildung 78 Formulare in Webseiten........................................................................................... 71
Abbildung 79: HTML-Code eines Formulares .................................................................................. 71
Abbildung 80: Darstellung eines Webformulars im Browser.............................................................. 72
Abbildung 81 Entwrfe fr ein Zimmer-Reservierungs-Formular ....................................................... 75
Seite 100 Anhnge
Abbildung 82: Darstellung von des <form> - Tags von Webformularen in Dreamweaver.......................75
Abbildung 83: Hufiger Fehler: mehrere <form> - Tags fr ein Formular ............................................76
Abbildung 84: Formular-Elemente einfgen mit Dreamweaver ..........................................................76
Abbildung 85 Namen fr Formularfelder angeben in Dreamweaver .................................................77
Abbildung 86: Formular und gesendete Daten Standard-Namen.....................................................77
Abbildung 87: Formular und gesendete Daten sprechende Namen fr Eingabefelder.........................77
Abbildung 88: Webbrowser und Webserver ....................................................................................78
Abbildung 89: Formulardaten werden ber HTTP an ein Programm am Webserver versandt .................78
Abbildung 90: Formulardaten werden per E-Mail versandt................................................................79
Abbildung 91: Formular direkt per E-Mail versenden mit Dreamweaver..............................................79
Abbildung 92: Absolut positionierte Ebene bei verschiedenen Schriftgren .......................................81
Abbildung 93: Darstellung von absolut positionierten Ebenen in Dreamweaver ...................................81
Abbildung 94: Eigenschaften von absolut positionierten Ebenen in Dreamweaver................................81
Abbildung 95: Eigenschaften von Frames in Dreamweaver ...............................................................84
Abbildung 96: Darstellung eines Java-Applets in Dreamweaver.........................................................89
Abbildung 97: Browser-Kompatibilitt eines DOM-Skripts, Quelle: quirksmode.org..............................95
Abbildung 98: Autocomplete Eingabefeld mit script.aculo.us.............................................................95

Hand Buch Web Design Mi Tillu

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Hand Buch Web Design Mi Tillu

Cargado por

Copyright:

Formatos disponibles

Programmierung 1: Skript

También podría gustarte