Sie sind auf Seite 1von 100

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:

sondern wurde im August 2006 als Wikibook publiziert: http://de.wikibooks.org/wiki/Handbuch_Webdesign Diese letzte

http://de.wikibooks.org/wiki/Handbuch_Webdesign

Diese letzte Word/PDF-Version enthält alle Illustrationen, bleibt aber auf dem Status August 2006.

Inhaltsverzeichnis

1 DAS WORLD WIDE WEB

4

4.3

Links und Anker

60

1.1 Technische Grundlagen

4

4.4

Bilder und Rollovers

61

1.2 Die gestalterische Herausforderung 13

4.5

Unsichtbare Elemente

62

2 XHTML

25

4.6

Navigation in Tabellen

63

2.1

Characterset

25

5 ADVANCED WEBDESIGN

71

2.2

Sonderzeichen

27

5.1

Formulare

71

2.3

HTML-Tags

28

5.2

Ebenen

80

2.4

Whitespace

28

5.3

Frames

82

2.5

Kompatibilität

30

5.4

Layout im Vergleich

85

2.6

Text formatieren

30

5.5

Multimedia

86

2.7

Bilder

32

5.6

Java-Applets verwenden

88

2.8

Links + Anker

35

6 EIN EINBLICK IN JAVASCRIPT

91

2.9

Gesamt-Struktur einer Webseite

38

6.1

Der <script>-Tag im Body

91

2.10

Tags für den Head

38

6.2

die onEvent - Attribute

91

2.11

Tabellen

40

6.3

Der <script>-Tag im Head

92

2.12

Farben und Hintergrundbilder

41

6.4

Was kann ein Javascript-Programm 92

3

CSS – CASCADING STYLE SHEETS

45

6.5

Probleme mit Javascript

93

3.1

Syntax von Stylesheets im Detail

46

6.6

Die Standardisierung von Javascript 94

3.2

Texte und Farben mit Stylesheets

47

7 ANHÄNGE

97

3.3

Klassen und IDs

50

7.1

Glossar

97

3.4

Layout mit Stylesheets - FEHLT

51

7.2

Quellen und Referenzen

98

3.5

Einsatz von Stylesheets

52

7.3

Tabellenverzeichnis

98

4

DREAMWEAVER

55

7.4

Abbildungsverzeichnis

98

4.1 Dreamweaver GUI

56

4.2 Text formatieren mit Dreamweaver 60

Achtung: Dieses Skriptum erhebt nicht den Anspruch auf Vollständigkeit.

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 Menüs und Standard- Dialogen ist daher nicht Inhalt dieses Skriptums.

Die wichtigsten Prinzipien, und die wichtigsten HTML-Tags (für Links, Bilder, Tabellen, Formulare) werden hier kurz vorgestellt. Alle Details können 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

Intro zum Kapitel „Das World Wide Web

Die Lehrveranstaltung „Programmierung 1“ behandelt das Erstellen von Webseiten für das World Wide Web. Aber was ist das WWW eigentlich? In diesem ersten Kapitel werden wichtige technische Grundbegriffe vorgestellt, am Ende des Kapitels können Sie die Frage „Was ist das World Wide Web“ beantworten.

Seite 4

Das World Wide Web

Mögliche Definitionen des World Wide Web

1 Das World Wide Web

Man könnte das World Wide Web von vielen Seiten betrachten. Ein paar mögliche Definitionen wären:

Das Web ist die Gesamtheit aller Webseiten. Das sind über eine Milliarde Seiten (wenn man den Angaben von Google, Stand Frühjahr 2005, glaubt)

Das Web ist ein soziales Phänomen: 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 Phänomen: 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 größte Akkumulation, vernetzter Information die es in der Geschichte der Menschheit gegeben hat.

Das Web ist der größte Sauhaufen, die größte Daten-Müllhalde, 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.

technische Definition des World Wide Web

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 müssen wir zuerst ein paar Grundlagen klären.

1.1 Technische Grundlagen

Internet

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.

Wem gehört das Internet?

Die Besitzverhältnisse sind kompliziert: die Leitungen und Computer gehören verschiedenen Firmen, Universitäten, Schulen, Vereinen, Privatpersonen.

Das World Wide Web

Seite 5

Das World Wide Web Seite 5 Abbildung 1: Zwei Computer die über das Internet Daten austauschen

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 Tauschbörse 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 Königin von England vorgestellt werden – nur, das die Protokolle für Computer noch wesentlich genauer festlegen wer was wann in welcher Reihenfolge tun darf).

Internet Dienst

was wann in welcher Reihenfolge tun darf). Internet Dienst Abbildung 2: Verschiedene Dienste benutzen eine gemeinsame

Abbildung 2: Verschiedene Dienste benutzen eine gemeinsame Infrastruktur

Das Internet ist die Infrastruktur für die verschiedenen Internet-Dienste. So wie das Straßennetz die Infrastruktur ist für LWKs, PWKs, Fahrräder, und so weiter, siehe Abbildung 2.

Bei Internet-Diensten unterscheidet man zwei verschiedene Architekturen:

Client/Server und Peer zu Peer:

Seite 6

Das World Wide Web

Client / Server

Peer zu Peer

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 läuft der ständig im Betrieb und mit dem Internet verbunden ist. Im Fall von E-Mail steht der Mail-Server der für Ihre FH E-Mail zuständig ist in einem Computerraum im 1. Stock der FH. Dort wird die E-Mail gespeichert bis Sie sie lesen und löschen.

Die Alternative zur Client/Server Architektur ist eine Peer 3 zu Peer Architektur. Ein Beispiel dafür 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 zurückdenken 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 Hälft des Satzes verstehen. Nun wenden wir uns einigen Grundbegriffen des World Wide Web zu.

Browser

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 für grafische Oberfläche stark zur Verbreitung des World Wide Web beigetragen hat, und die Browser Opera und Mozilla die im Jahre 2004 verwendet werden.

Opera und Mozilla die im Jahre 2004 verwendet werden. Abbildung 3: Webbrowser: Mosaic (1993), Opera und

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“

Das World Wide Web

Seite 7

Alle eben erwähnten Browser haben gemeinsam, dass sie auf einem typischen „Büro-Computer“ eingesetzt werden, einem Computer mit grafischer Oberfläche und einem Farb-Monitor.

Es gibt aber auch „exotischere“ Browser. Abbildung 4 zeigt den Browser lynx, der nur Text darstellt, aber keine Bilder. Daneben sehen Sie eine „Braille Ausgabezeile“, ein Gerät, das eine Zeile Text in eine Zeile Blindenschrift übersetzt. Mit diesem Webbrowser und diesem Ausgabegerät können Blinde im Web surfen.

Andere Browser

Ausgabegerät können Blinde im Web surfen. Andere Browser Abbildung 4: Text-Only Browser lynx und Braille
Ausgabegerät können Blinde im Web surfen. Andere Browser Abbildung 4: Text-Only Browser lynx und Braille

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

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 für das Browser-Fenster, dann erscheint ein Scrollbalken mit dem man den Rest der Seite erreichen kann, wie in Abbildung 5 gezeigt.

Webseite

Rest der Seite erreichen kann, wie in Abbildung 5 gezeigt. Webseite Abbildung 5: Eine Browser zeigt

Abbildung 5: Eine Browser zeigt eine lange Webseite an

Seite 8

Das World Wide Web

Website

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 gehören, und untereinander verlinkt sind.

Browser, Webseite, Website sind wichtige Begriffe im World Wide Web. Es sind die Teile, die für die LeserInnen am einfachsten „greifbar“ sind. In unserer Definition kommen aber ganz andere Begriffe vor:

„Das World Wide Web ist ein Internet-Dienst mit Client-Server Architektur, der durch die Standards URL, HTTP und HTML definiert wird.“

 

Es fehlt immer noch die Erklärung zu diesen drei Abkürzungen. Dazu werden wir nun genauer betrachten was passiert, wenn eine Webseite angezeigt wird.

URL

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 gezeigt. Die URL ist die Adresse einer Webseite. Abbildung 6: Eine URL wird in

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.

HTTP

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 zurück (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.

HTML

Der Browser nimmt diese Daten entgegen. Meistens handelt es sich um Daten im HTML-Format, das heißt 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 für HTML-Code aussieht, und wie ein Browser diesen HTML-Code dann darstellt.

Das World Wide Web

Seite 9

Das World Wide Web Seite 9 Abbildung 7: HTML-Code und Darstellung dieses Codes im Browser Diese

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 nächste 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:

„Das World Wide Web ist ein Internet-Dienst mit Client-Server

Architektur, der durch die Standards URL, HTTP und HTML

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 für „Uniform Resource Locator“ – zu

Deutsch also etwa „einheitliches Lokalisierungs-Schema für 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 beschäftigen. 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

Seite 10

Das World Wide Web

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 für einen

Webserver.

Beim Festlegen von Datei- und Ordnernamen für Webseiten müssen 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 für eine Webseite festlegen, dürfen Sie diese

Zeichen nicht verwenden.

Keine Leerzeichen

Eine URL kann keine Leerzeichen enthalten, deswegen sollten Sie auch keine

Leerzeichen in den Datei- oder Ordnernamen von Webseiten verwenden. Es

gäbe zwar die Möglichkeit 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 für „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.

Das World Wide Web

Seite 11

Das World Wide Web Seite 11 Abbildung 8: Diagramm zur Funktionsweise von HTTP 1) eine URL

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) können gleichzeitig ausgeführt werden – während 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 Ausführung auf jeden Fall eines merken: jede

Datei am Web hat eine eigene URL und wird einzeln geladen.

Seite 12

Das World Wide Web

1.1.3 HTML

Die Abkürzung HTML steht für „HyperText Markup Language“. HTML wird vom

World Wide Web Consortium standardisiert.

Auzeichnungssprache

vs. Programmier-

sprache

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 wächst eigentlich gerne im Sumpf- oder Moor-Gebiet. Diese Birke w&auml;chst vor meinem Fenster, zwischen Haus und </p>

Abbildung 9: Beispiel für HTML-Code

Abbildung 9 zeigt ein Beispiel, wie ein Teil eines HTML-Dokumentes aussehen

kann. Das Dokument enthält den Text, der auf der Webseite zu lesen sein soll.

Zusätzlich enthält es die so genannten „HTML-Tags“. („Tag“ ist hier ein

englisches Wort für „Etikett“ oder „Anhängsel“, nicht das deutsche Wort Tag).

Ein Tag beginnt jeweils mit dem mathematischen Kleiner Zeichen und endet mit

dem Größer Zeichen, zum Beispiel <P>.

endet mit dem Größer Zeichen, zum Beispiel <P>. Abbildung 10: Erstellen einer HTML-Datei mit Notepad/Editor
endet mit dem Größer Zeichen, zum Beispiel <P>. Abbildung 10: Erstellen einer HTML-Datei mit Notepad/Editor

Abbildung 10: Erstellen einer HTML-Datei mit Notepad/Editor oder SimleText

Sie können 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.

Das World Wide Web

Seite 13

Das World Wide Web Seite 13 Abbildung 11: HTML-Datei wird im Browser dargestellt Eine Alternative zur

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 für „what you see is what you get“, und bedeutet hier, dass Sie im Editor während der Erstellung des Dokuments nicht den HTML-Code sehen, sondern schon eine Darstellung wie im Browser. Abbildung 12 zeigt den Editor Dreamweaver.

wie im Browser. Abbildung 12 zeigt den Editor Dreamweaver. Abbildung 12: Bearbeitung einer HTML-Datei in 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, müssen Sie sich mit den Eigenschaften und spezifischen Bedingungen des Mediums Web auseinandersetzen.

1)

Verschiedene Ausgabegeräte

Seite 14

Das World Wide Web

3)

Verschiedene Bildschirmgrößen / Auflösungen

4)

Beschränkung der Schriftarten

5)

Nicht kontrollierbare Schriftgrößen

6)

Unbekannte Lesereihenfolge

7)

Verschiedene Zusatzprogramme und Plugins

1.2.1 Verschiedene Ausgabegeräte

Wie auf Seite 7 in Abbildung 2 gezeigt, gibt es neben dem Büro-Computer in seinen verschiedenen Varianten auch noch andere Ausgabegeräte, mit denen Webseiten dargestellt werden können, in Abbildung 2 war es eine Braille- Ausgabezeile für Blinde. Weitere Beispiele wären Handys und Palmtops, also sehr kleine „Taschencomputer“, die Webseiten auch grafisch, aber auf einem sehr kleinen Display darstellen können.

1.2.2 Verschiedene Browser

Verschiedene Browser und Browser-Versionen stellen den gleichen HTML- Code oft leicht unterschiedlich dar. Dies war besonders in der „heißen Entwicklungsphase“ des Web zwischen 1995 und 2000 ein großes Problem. Aber auch heute (2006/2007) müssen Sie darauf gefasst sein, dass Firefox, Opera, Safari und Internet Explorer Ihre Webseite jeweils leicht unterschiedlich darstellen. Ja, sogar zwischen Internet Explorer für Windows und Internet Explorer für Mac gibt es oft Darstellungs-Unterschiede.

Explorer für Mac gibt es oft Darstellungs-Unterschiede. An dieser Stelle sei auf die Webseite „selfhtml“ von

An dieser Stelle sei auf die Webseite „selfhtml“ von Stefan Münz hingewiesen. Dort können sie die Details zu den einzelnen HTML-Tags nachschlagen. Falls der Tag nicht in jedem Browser funktioniert, wird das durch Icons angezeigt:

z.B.

Browser funktioniert, wird das durch Icons angezeigt: z.B. „funktioniert im Internet Explorer erst ab Version 5“.

„funktioniert im Internet Explorer erst ab Version 5“.

1.2.3 Bildschirmgrößen und Auflösungen

Wie messen?

Das

behandeln.

Thema

der

Bildschirmgrößen

und

Auflösungen

wollen

wir

genauer

Zuerst stellt sich die Frage: woher weiß ich, wie hoch die Auflösung am Computer meiner Leserin/meines Lesers ist? Die Antwort lautet: ich weiß es nicht, und es gibt keine zuverlässige Methode, mit der man diese Information in jedem Fall herausfinden kann. Es gibt eine Messmethode mit Hilfe der Programmiersprache Javascript, mit der man die Größe des Browserfensters messen kann – das Ergebnis der Messung ist natürlich dadurch verfälscht, dass Browser ohne Javascript ganz aus der Messung herausfallen. Diese Beschränkung sollten Sie bei den folgenden Überlegungen immer beachten.

Das World Wide Web

Seite 15

Abbildung 13 zeigt die derzeit (2006/2007) gängigen Bildschirm-Auflösungen von PCs.

800 px 1024 px 1200 px 1600 px
800 px
1024 px
1200 px
1600 px

Abbildung 13: gängige Bildschirmauflösungen 2006

Vergleichen Sie die höchste hier dargestellte Auflösung (1600x1200 Pixel) mit der geringsten Auflösung (800x600). Da Breite und Höhe verdoppelt sind, steht bei der höchsten Auflösung also die vierfache Fläche zur Verfügung!

Abbildung 14 zeigt eine Statistik über die Bildschirmauflösung von thecounter.com. Circa ein Sechstel der LeserInnen verwenden demnach die

geringste hier dargestellte Auflösung (800x600), und ca. die Hälfte die nächst höhere (1024x768). Es bleiben also nur ca. ein Viertel, die eine höhere Auflösung als 1024x768 verwenden.

Viertel, die eine höhere Auflösung als 1024x768 verwenden. Abbildung 14: Statistik über die Bildschirmauflösung, Juni

Abbildung 14: Statistik über die Bildschirmauflösung, Juni 2006, Quelle: thecounter.com

Brutto vs. Netto

Von diesen „Brutto-Angaben“ über die Größe der zur Verfügung

stehenden Fläche, sind nun noch der Platz für den Fensterrahmen des Browsers, für Scrollbalken, Symbolleisten, und eventuell eingeblendete

Seite 16

Das World Wide Web

Favoritenleisten“ abzuziehen, um zum „netto“ verbleibenden Raum für die Gestaltung zu kommen. Abbildung 15 zeigt diese Problematik an Hand einer Webseite.

Abbildung 15 zeigt diese Problematik an Hand einer Webseite. Abbildung 15: Platzbedarf von Browser-Elementen an zwei
Abbildung 15 zeigt diese Problematik an Hand einer Webseite. Abbildung 15: Platzbedarf von Browser-Elementen an zwei

Abbildung 15: Platzbedarf von Browser-Elementen an zwei Beispielen

Beide Browser zeigen dieselbe Webseite, beide Browser wurden auf einem Computer mit einer Bildschirm-Auflösung von 1024x768 Pixel verwendet.

Links in der Abbildung sehen sie den Browser Firefox. Nach Abzug von Symbolleisten oben, Statusleiste unten, Scrollbalken rechts und dem (sehr dünnen) Fensterrahmen links bleiben 1003x615 Pixel für die Webseite. Rechts in der Abbildung sehen Sie dieselbe Seite in Internet Explorer. Zusätzlich zu den üblichen Symbolleisten ist hier auch die „Favoriten-Leiste“ am linken Rand des Browser sichtbar. Es bleiben 743x562 Pixel für die Darstellung der Webseite.

Wie Sie sehen können ist die Seite so gestaltet, dass das Foto, das in Firefox in der rechten oberen Ecke der Webseite sichtbar ist, in Internet Explorer nicht mehr sichtbar ist.

Abbildung 16 zeigt eine Statistik über die „Netto-Grössen“ von Browser- Fenstern. Laut dieser Statistik kann eine Webseite mit Breite 950 Pixel auf ca. 70% der Browser vollständig angezeigt werden. Bei 1050 Pixel Breite sind es nur noch 20%.

werden. Bei 1050 Pixel Breite sind es nur noch 20%. Abbildung 16: „Netto“-Breite von Browser-Fenstern,

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 Auflösung – das ist für

Das World Wide Web

Seite 17

DesignerInnen typisch. Werden Sie beim Entwurf Ihrer Webseiten auf die Mehrheit der LeserInnen vergessen, und die Seite so gestalten, dass sie nur mit hoher Auflösung 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 für die LeserInnen gewohnter (und mit Scrollrad an der Maus auch einfacher) als nach rechts zu scrollen.

Es gibt aber sicher Umstände, unter denen Sie diese Faustregeln ignorieren können. Z.B. wenn Sie eine Webseite für einen Kiosk gestalten, und wissen, dass das Ausgabegerät immer ein Touchscreen mit einer Auflösung von 1200x600 Pixel ist. Oder wenn Sie eine Webseite mit künstlerischem Anspruch absichtlich so gestalten, dass die Lese-Gewohnheiten des Web durchbrochen werden.

1.2.4 Beschränkung der Schriftarten

Auf den verschiedenen Ausgabe-Geräten für Webseiten stehen nicht überall die selben Schriftarten zur Verfügung.

Welche Schriftarten das sind hängt 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 Größenunterschiede: Alle Schriftarten sind in der Größe 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 Verfügung stehen.

will sie seit vielen Jahren zur Verfügung stehen. Abbildung 17: Standard- Schriftarten, ca, 1996 Abbildung 18

Abbildung 17:

Standard-

Schriftarten, ca, 1996

Abbildung 18 zeigt eine aktuellere Statistik für die 800 Browser getestet wurden.

Seite 18

Das World Wide Web

 

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%

Microsoft Sans Serif

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%
0%
20%
40%
60%
80%
100%

Abbildung 18: Statistik über die Verbreitung von Fonts, Quelle www.visibone.com/font/

Aus dieser Statistik können 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 häufiger 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,

zeigt drei Beispiele für solche Listen.

Abbildung 19

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 können. 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

(hauptsächlich Überschriften) durch Bilder mit Hilfe von Stylesheets.

Siehe auch: http://www.stichpunkt.de/css/css-tipps.html#schrift

Das World Wide Web

Seite 19

1.2.5 Nicht kontrollierbare Schriftgrößen

Jede LeserIn kann die Schriftgröße im Webbrowser selbst beeinflussen, z.B. in MSIE unter Ansicht Schriftgrad. Das ist auch gut so: Leute mit Sehschwäche können so die Schrift permanent größer stellen, und so erst die Webseiten lesen.

permanent größer stellen, und so erst die Webseiten lesen. Als WebdesignerIn werden Sie nicht dafür bezahlt,

Als WebdesignerIn werden Sie nicht dafür bezahlt, den Zeilenumbruch zu erledigen. Das ist die Aufgabe des Browsers. Je nach Schriftgröße und zur Verfügung stehendem Platz im Browser-Fenster wird der Browser die Absätze geeignet in Zeilen umbrechen, wie in Abbildung 20 gezeigt.

geeignet in Zeilen umbrechen, wie in Abbildung 20 gezeigt. Abbildung 20: Zeilenumbruch im Browser 1.2.6 Unbekannte

Abbildung 20: Zeilenumbruch im Browser

1.2.6 Unbekannte Lesereihenfolge

Wenn Ihre Website aus mehreren Webseiten besteht, haben Sie keine Kontrolle darüber, 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 „Eingangstüre“ – also über die von Ihnen definierte Hauptseite. In Abbildung 21 sehen Sie ein Beispiel.

Keine eindeutiger Eingang

Seite 20

Das World Wide Web

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

Abbildung 21: Navigationsstruktur und Reales Navigationsverhalten

Links und

Die dicken Pfeile symbolisieren die Links, die zwischen den Seiten existieren.

Lesereihenfolge

Die dünnen 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 verlässt sie die Site wieder – vielleicht, indem Sie dreimal auf den „Zurück“-Button drückt um wieder zu ihren Suchergebnissen bei Google zu kommen, oder indem sie das Browserfenster schließt, 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.

Zusatzprogramme

Alle anderen Formate (Word, CAD-Pläne, Audio und Video-Dateien, Flash, PDF,

) können aber trotzdem im Web eingebunden werden. Der Browser kann

Zusatzprogramme starten, um diese Formate darzustellen. Das ist technisch immer möglich, 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 können Makro-Viren enthalten. Deswegen

a.

können

verbreiten

Sie

Probleme

bekommen

wenn

Sie

einen

Virus

Das World Wide Web

Seite 21

b.

sind die Leute vielleicht nicht gewillt Office-Dokumente von Fremden entgegenzunehmen.

3. Office-Dokumente sind meist sehr groß, jedenfalls größer als ein entsprechendes HTML-Dokument. Die längere Download-Zeit könnte Leute abschrecken.

4. Office gibt es in vielen verschiedenen Versionen. Um möglichst 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.

Für

darstellen:

verschiedene

LeserInnen

wird

die

Handhabung

sich

unterschiedlich

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 ungefähren Inhalt: "Achtung, das könnte gefährlich sein". Wenn er trotzdem weitermacht, wird Excel gestartet und die Datei geöffnet.

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 für 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.

Plugins

das Flash-Plugin zur Darstellung von swf- Dateien. Plugins Abbildung 22: Plugin im Webbrowser und das Kontextmenü

Abbildung 22: Plugin im Webbrowser und das Kontextmenü (beim Rechtsklick)

In Abbildung 22 wird das Rechteck am rechten Rand der Webseite nicht vom

Für die LeserIn ist

das nicht erkennbar. Erst wenn sie/er die mit der rechten Maustaste in diesen

Webbrowser selbst, sondern vom Flash-Plugin dargestellt.

Seite 22

Das World Wide Web

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 widersprüchliche Zahlen.

Es bleibt also bei jedem Projekt einzeln abzuwägen, ob Plugins für das Zielpublikum der Site sinnvoll sind oder nicht.

für das Zielpublikum der Site sinnvoll sind oder nicht. Abbildung 23: Statistik über Browser-Plugins, Quelle:

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

23: Statistik über Browser-Plugins, Quelle: Macromedia Abbildung 24: Statistik über Browser-Plugins, Quellen:

Abbildung 24: Statistik über Browser-Plugins, Quellen: sunniforum.com, goodcounter.com

Das World Wide Web

Seite 23

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 können, und dass dieses Ausgabemedium sehr vielfältig ist – genau so vielfältig wie die Menschen, die diese Programme benutzen.

Ein paar mögliche 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-mögliche Internetanbindung haben, immer die neueste Software benutzen.

Firmen-User, die mit dem Computer vorlieb nehmen müssen, den Ihnen die EDV-Abteilung zur Verfügung stellt. Das heißt selbst im Jahre 2006 vielleicht noch 1024x768 Auflösung, Windows XP, ein veralteter Browser und keine „Spass-Plugins“ wie Flash.

BesucherInnen von Internet-Cafés irgendwo auf diesem Globus, die weder Software noch Hardware kontrollieren, sondern verwenden müssen, 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.

Ausgabezeile im Web surfen, wie oben in Abbildung 4 gezeigt. ∑ Menschen mit Rot-Grün Blindheit, die

Menschen mit Rot-Grün Blindheit, die zwar den Text und die Bilder sehen, aber nicht zwischen bestimmten Farben unterscheiden können.

Menschen mit eingeschränkter Feinmotorik, die nur schwer mit einem Maus umgehen können.

und so weiter.

Seite 24

Das World Wide Web

Intro

Der HTML-Code ist für Sie als DesignerIn wahrscheinlich die größte Herausforderung am Webdesign.

Das nächste 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, heißt, durch ihn hindurch die lebendige Webseite sehen zu können, (so wie im Film „die Matrix“).

Vielleicht erlernen Sie mit HTML zum ersten Mal so etwas Ähnliches wie eine Programmiersprache. Dazu gehört auch der Erwerb des Fachvokabulars: Tags, Attribute, Whitespace, Character Entities – diese Fachbegriffe müssen Sie verstehen und selbst korrekt verwenden können.

XHTML

Seite 25

2

XHTML

Die Abkürzung HTML steht für „HyperText Markup Language“. HTML wird vom World Wide Web Consortium standardisiert. 4.01 ist die letzte/höchste 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 (für Links, Bilder, Tabellen, Formulare) werden hier kurz vorgestellt. Alle Details können 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 können den HTML-Code mit jedem Text-Editor erstellen. Die HTML-Datei sollten Sie – auch während Sie die Datei noch erstellen und verändern – immer wieder in einem Browser betrachten, und überprüfen 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 zurück 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 führen:

4 http://selfhtml.teamone.de

Wordpad vs. Notepad

Seite 26

XHTML

Seite 26 XHTML Abbildung 25: Fehler: HTML-Code wurde als rtf gespeichert Hier wurde der Text nicht

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 größer / fett, im Browser sieht er dafür nicht mehr richtig aus.

Westeuropäisch

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, ergänzt um die in westeuropäischen Sprachen nötigen Zeichen wie die Umlaute üöä ÜÖÄ sowie ß é ñ. 5

Unter Windows und Linux wird dieses Format standardmäßig verwendet, nur am Mac müssen Sie beim Speichern im TextEdit darauf achten das richtige Format, nämlich „Westeuropäisch (Windows Latin 1)“ einzustellen.

5 .Um ganz genau zu sein wird seit Einführung des Euros und des €-Zeichens ISO 8859- 15 (Latin-15). Verwendet – das ist Latin-1 ergänzt um das Euro-Zeichen und ein paar Ligaturen für Französisch.

XHTML

Seite 27

XHTML Seite 27 Abbildung 26: Speichern einer HTML-Datei im Mac-Programm TextEdit Eine Alternative zu Latin-1 ist

Abbildung 26: Speichern einer HTML-Datei im Mac-Programm TextEdit

Eine Alternative zu Latin-1 ist Unicode in der Variante utf-8. Das hätte den

Vorteil, dass Sie die Sonderzeichen verschiedener Sprachen in einem Dokument

mischen können. Falls Sie Ihre HTML-Datei als utf8 speichern, müssen Sie das

im Head der HTML-Datei angeben, siehe Seite 38.

2.2

Sonderzeichen

Unicode =

International

Sonderzeichen nennt man in HTML „charachter entities“. Der Code zur

Darstellung eines Sonderzeichens hat immer die From &entityname;

Folgende Character Entities müssen Sie verwenden:

Gewünschtes

Character Entity

Sonderzeichen

<

&lt;

>

&gt;

&

&amp;

kleiner, größer,

kaufmännisches und

Folgende Character Entities müssen Sie nicht verwenden, Sie können 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 können (z.b. auf einer englischen Tastatur).

Gewünschtes Zeichen

Character Entity

Ä

&Auml;

ä

&auml;

ß

&szlig;

&euro;

Seite 28

XHTML

©

&copy;

Die Umlaute ü, Ü, ö und Ö funktionieren nach dem gleichen Prinzip wie ä und Ä.

2.3 HTML-Tags

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

1)

Tags sind zwischen spitzen Klammern („kleiner“ und „größer“-Zeichen) eingeschlossen.

2) Zu (fast) jedem „Anfangs-Tag“ gibt es einen „End-Tag“, der sich nur durch einen Schrägstrich vom Anfangs-Tag unterscheidet. Z.B. <p>hier

3)

der Absatz</p>.

„alleinstehende“ Tags müssen in XHTML mit einem Schrägstrich am Ende geschrieben werden: <br /> (früher, 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 können nicht einfach einen neuen Tag erfinden.

2.4 Whitespace

Sogenannter „whitespace“ - das sind mehrere Leerzeichen, Tabulatoren und Zeilenumbrüche hintereinander – wird vom Browser völlig ignoriert. Ob Sie also in Ihrer HTML-Datei ein Leerzeichen oder 7 Leerzeilen einfügen macht keinen Unterschied. 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 müssen den Tag <br> verwenden, um einen Zeilenumbruch auf der Webseite zu erzeugen – dies

ist aber nur selten sinnvoll, da der Browser einen automatischen Zeilenumbruch durchführt.

2.4.1 Attribute

Manche Tags können Attribute enthalten. Ein Beispiel ist der Tag <img>, der ein

Bild in die Webseite einfügt (Englisch: Image). Die wichtigsten Attribute von <img> sind src (von Source = Quelle) und alt (Alternative Darstellung). (Ein

häufiger 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

Zeilenumbrüche, 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 Anführungszeichen geschrieben, auch Zahlen

(das war in HTML noch nicht verpflichtend):

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

ACHTUNG: ein häufiger Fehler ist

vergessen:

es, das zweite

Anführungszeichen zu

<img alt="Das ist neu!"

src="neu.gif><p>Text nach dem Bild, der "zufällig" auch

Anführungszeichen enthält – aber das kommt nicht immer

<p>Und noch mehr Text</p>

vor.

.</p>

Abbildung 28: Fehler im HTML-Code: Anführungszeichen vergessen

Wenn Sie, wie in Abbildung 28 gezeigt, das zweite Anführungszeichen

vergessen, hat das enorme Auswirkungen auf die Darstellung der Webseite: der

Browser sucht konsequent nach dem zweiten Anführungszeichen, wenn es sein

muss bis zum Schluss des Dokuments. In diesem Beispiel findet er schon in der

nächsten Zeile ein Anführungszeichen. Damit ist der Wert des Attributs beendet.

Nun sucht der Browser noch nach der schließenden spitzen Klammer des img-

Tags. Das Ergebnis ist, dass der Text gar nicht im Browser angezeigt wird.

<img alt="Das ist neu!"

<img alt="Das ist neu!" src="neu.gif><p>Text nach dem Bild, der "zufällig" auch

src="neu.gif><p>Text nach dem Bild, der "zufällig" auch

Anführungszeichen enthält – aber das kommt nicht immer

vor.

<p>Und noch mehr Text</p>

.</p>

Seite 30

XHTML

2.5 Kompatibilität

Neue Tags, die z.B. ein Browser nicht erkennt, sind zu ignorieren – es gibt keine

Fehlermeldungen. Wenn das W3C in einer zukünftigen XHTML-Version 21

beispielsweise den neuen Tag <jump> (hüpfenden Text) einführt, können Sie

diesen Tag auf Ihrer Webseite verwenden. Der Text wird jedoch nur in den

neuesten Versionen der Browser (die schon XHTML 21 kennen) hüpfend

dargestellt. In Netscape 6 oder MSIE 5 wird der Tag <jump> ignoriert:

Code

Ein älterer Browser interpretiert das als:

<p>Dies

ist

meine

erste

<p>Dies ist meine erste supercoole Webseite!!!!</p>

<JUMP>supercoole</JUMP> Webseite!!!! </p>

Abbildung 29: Neue HTML-Tags und Kompatibilität mit alten Browsern

Bevor Sie also einen neuen Tag einsetzen, sollten Sie sich darüber im Klaren

sein, welche Versionen der Browser diesen Tag darstellen und wie viel Prozent

Ihres Zielpublikums schon eine passende Browser-Version benutzen. Meist

können Sie eine Seite so gestalten, dass auch mit älteren Browsern der gesamte

Inhalt lesbar ist.

Schlecht

Besser:

<p>Zu den hüpfenden Terminen sind noch Plätze im Kurs frei:

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

</p>

<ul>

<li><jump>Montag</jump>

<li>Dienstag

<ul>

 

In älteren Browsern geht die

Durch das Einfügen des * ist auf allen

wichtigste Information verloren!

Browsern erkennbar zu welchen

Terminen noch Plätze frei sind.

Abbildung 30: Vorsichtiger Einsatz von „neuen“ HTML-Tags

Das war eine Überlegung zur Kompatibilität der Browser. Noch einmal eine

Erinnerung an die Kompatibilität der Menschen: wie viel % aller Männer sind

rot/grün blind – verwenden sie also nicht den Farbunterschied zwischen rot

und grün, um wichtige Information anzuzeigen.

2.6 Text formatieren

Folgende Tags nennt man „blockbildende Tags“ weil sie im Browser immer als

rechteckige Fläche 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

<h1>Überschriftstext</h1>

(1. Ebene)

Unter-Überschrift

<h2>Überschriftstext</h2>

(2. Ebene)

Unter-Überschrift

<h3>Überschriftstext</h3>

(3. Ebene)

Block-Zitat (eingerückt)

<blockquote>Alle meine Entchen schwimmen auf dem See</blockquote>

Tabelle 1: Blockbildende Tags

Da diese Tags nicht ineinander verschachtelt werden können ist der folgende

Code nicht korrekt:

<h1><p>Absatz in der Überschrift</p></h1>

Es gibt keinen Absatz in der Überschrift. Entweder ein Stück 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 verändert, bzw. auf Null gesetzt werden.

Im Browser Firefox kann man als zusätzliches Hilfsmittel die „Web Developers

Toolbar“ installieren. Mit dieser Toolbar können Sie sich unter anderem die

„Blocks“ der blockbildenden Elemente anzeigen lassen wie in Abbildung 31.

blockbildenden Elemente anzeigen lassen wie in Abbildung 31. Abbildung 31 Blockbildende Elemente im Browser Firefox

Abbildung 31 Blockbildende Elemente im Browser Firefox angezeigt

Format für kleinere Text-Abschnitte müssen 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>schräge</i> Sache

Unterstrichener Text

Dafür 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

statt <font>

Der <font>-Tag ist ein „altmodischer Tag“, der durch Stylesheets ersetzt wurde,

Stylesheets

und den Sie in neuen Dokumenten möglichst nicht verwenden sollten. Um „alte“

Dokumente zu bearbeiten, müssen Sie diesen Tag aber kennen

Diese inline-Tags können 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. Enthält eine Webseite z.B. vier Bilder, dann besteht

das „Gesamtkunstwerk“ aus fünf Dateien: einer HTML-Datei, und vier Bild-

Dateien.

aus fünf Dateien: einer HTML-Datei, und vier Bild- Dateien. Abbildung 32: Eine Webseite und die Dateien
aus fünf Dateien: einer HTML-Datei, und vier Bild- Dateien. Abbildung 32: Eine Webseite und die Dateien

Abbildung 32: Eine Webseite und die Dateien aus denen sie besteht

Wenn Sie die gesamte Webseite auf USB-Stick speichern und mitnehmen wollen,

müssen Sie alle fünf 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 (für Blinde, oder für

<img alt="neu" src="neu.gif">

XHTML

Seite 33

den Fall, dass das Bild nicht angezeigt werden kann)

 

Bild mit Größenangabe (beschleunigt in manchen Browsern das Layout der restlichen Seite)

<img width="10" height="5" src="neu.gif">

Bild-Dimension

Tabelle 3: Varianten des img-Tags

Noch ein Wort zur Größe von Bildern:

Angaben (width und height) sollten Sie immer die echte Größe des

Bei den Breiten- und Höhen-

Bildes (gemessen in Pixel) angeben. Wieso? Betrachten wir die zwei möglichen

Fälle:

1)

2)

Bild ist in Wirklichkeit kleiner, width- und height-Angaben sind zu groß

Bild ist in Wirklichkeit größer, 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.

Größer dargestellt

jpeg-Artefakte rund um die Nase. Größer dargestellt Abbildung 33: Ein Pixel-Bild wird auf 4-fache Breite und
jpeg-Artefakte rund um die Nase. Größer dargestellt Abbildung 33: Ein Pixel-Bild wird auf 4-fache Breite und

Abbildung 33: Ein Pixel-Bild wird auf 4-fache Breite und Höhe vergrößert

Im zweiten Fall (verkleinerte Darstellung) gibt es keine Probleme mit der

Bildqualität, sondern mit der Übertragungszeit.

Das Bild in Abbildung 34 ist im Original 450x450 Pixel groß, und hat eine

Dateigröße von 115KB. Diese 115KB müssen übertragen werden, auch wenn

das Bild dann im Browser kleiner (z.B. 225x225 Pixel groß) dargestellt wird.

Die Alternative wäre, das Bild im Grafikprogramm auf 225x225 Pixel zu

verkleinern. Dabei wird auch die Dateigröße kleiner, in diesem konkreten

Beispiel 35KB. Das ist ein Faktor 3 in der Dateigröße, 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

Kleiner dargestellt

richtige Dimension und Format bringen Kleiner dargestellt Abbildung 34: Beispiel-Bild mit Dimensionen 450 x 450,

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 einfügen.

Das Bild wird wie ein Wort im Text behandelt, und kann nicht

frei auf der Webseite positioniert werden. Später 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 hässliches Layout.

Bilder und Layout

das meist ein sehr hässliches Layout. Bilder und Layout Abbildung 35: Bild mitten im Absatz Besser

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

verwendet werden:

Bildformate

für

Webseiten

zentrieren: Als verwendet werden: Bildformate für Webseiten können nur Pixel-Formate Bildformate gif Palette von 255

können

nur

Pixel-Formate

Bildformate

gif

Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). „animiertes Gif“ enthält mehrere Bilder, die der Reihe nach angezeigt werden (Daumenkino).

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

jpg

Millionen von Farben, variable Kompression, keine Transparenz.

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

png

Nachfolge-Format für gif, Alpha-Transparenz, wird noch nicht von allen Browsern unterstützt.

Tabelle 4: Bildformate im Vergleich

XHTML

Seite 35

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

Format auszuwählen, in dem das Bild nichts an Qualität verliert, und die

Dateigröße möglichst gering ist.

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

Auflösung

+

Dateigröße,

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, Dateigröße möglichst klein

(=web-tauglich).

 

4)

Fertiges Bild in den Web-Ordner kopieren

 

5)

<img>-Tag in das HTML-Dokument einfügen

Das Ergebnis ist ein web-taugliches Bild im richtigen Ordner.

2.8 Links + Anker

Das Web heißt Web, weil es wie ein Spinnennetz ist – die Stränge dieses

metaphorischen Netzes sind die Hyperlinks.

Links im Web sind unidirektional, sie funktionieren nur in eine Richtung. Sie

können von Ihrer Seite zur ORF-Seite einen Link machen, Sie können nicht von

der ORF-Seite zu Ihrer Seite einen Link machen.

nicht von der ORF-Seite zu Ihrer Seite einen Link machen. Abbildung 36: Link zu Alta Vista

Abbildung 36: Link zu Alta Vista

Bevor Sie einen Link setzen, müssen Sie sich über zwei Dinge klar werden:

1)

Welcher Text auf Ihrer Webseite soll anklickbar sein?

2)

Wohin soll der Link führen (URL)?

Alle Links auf einer Seite sind gleich gestaltet, normalerweise sind sie alle blau

und unterstrichen. Mit Stylesheets können Sie diese Gestaltung ändern.

Link zu einer Seite draußen 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 für 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

vollständige, „absolute“ URL für den Link zu berechnen, wie in Abbildung 37

gezeigt.

Relative URLs

URL des HTML- Dokuments

relative URL in diesem Dokument

berechnete absolute URL

http://www.meinefirma.at/index.htm

seite2.htm

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 können auch Ordnernamen

enthalten, und den speziellen Ordnernamen

für den übergeordneten Ordner.

URL des HTML- Dokuments

relative URL in diesem Dokument

berechnete absolute URL

http://www.meinefirma.at/prod/tee.htm

/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

relative URL in diesem Dokument

berechnete absolute URL

http://www.neuefirma.de/prod/tee.htm

/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="zurück zur Homepage" /> </a>

<a href="home.htm"> <img src="home.gif" alt="zurück zur Homepage" /> </a>

Bild als Link

<img src="home.gif" alt="zurück zur Homepage" /> </a> Bild als Link

Abbildung 40 zeigt den dazu notwendigen Code.

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 ermöglichen, falls das Bild nicht angezeigt werden kann, wie in Abbildung 41 gezeigt.

nicht angezeigt werden kann, wie in Abbildung 41 gezeigt. Abbildung 41: Bild das zur Navigation dient,

Abbildung 41: Bild das zur Navigation dient, Darstellung des Ersatztextes (alt) für 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 für den Link.

Deep 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 schmälern damit wiederum ihren PageRank bei Google, und die Chance gefunden zu werden.

Frames verhindern Deep Links

2.8.1 Anker

Sie können innerhalb der Webseite sogenannte „Anker“ setzen, die dann gezielt angesprungen werden können. Das ist besonders bei längeren Webseiten sinnvoll.

Die „Anker“ heißen auf englisch „Anchor“ – daher kommt auch der html-tag <a>. In

deutschsprachigen Programmen wurden sie sehr unterschiedlich übersetzt – z.B. heißen 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>

Bild1 Bild2
Bild1
Bild2

Seite 38

XHTML

Wenn Sie wissen, dass in einer Seite draußen am Web ein Anker vorkommt,

dann können 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 können Sie Webseiten erstellen, die von

den meisten Browsern angezeigt werden. Diese Webseiten entsprechen aber

noch nicht dem HTML-Standard. Eine korrekte HTML Seite enthält zusätzlich

noch folgendes Grundgerüst.

<!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> enthält

Informationen über die Seite, aber keine direkt sichtbaren Elemente (siehe auch

Kapitel 2.10). Der <body> enthält den eigentlichen Inhalt der Webseite. Alle

bisher vorgestellten Tags sind nur innerhalb des <body> zu verwenden.

Titel

2.10 Tags für 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?

in einer Suchmaschine. Woher kommt der Text, der hier angezeigt wird? Titel der Seite B e

Titel der Seite

in einer Suchmaschine. Woher kommt der Text, der hier angezeigt wird? Titel der Seite B e

Beschreibung

XHTML

Seite 39

XHTML Seite 39 Abbildung 43: Anzeige einer gefundenen Webseite in einer Suchmaschine Die Suchmaschine liest den

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, März

1999</title>

<meta name="description" content="Projektarbeiten Aus dem Kurs Internet Seitengestaltung am Wifi Salzburg im März 1999."> <meta name="keywords" content="HTML, Kurs, Webdesign, Webdesigner, Salzburg">

Da die Meta-Keyword Tags sehr stark missbraucht wurden (irreführende

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 für Favoriten/Lesezeichen

verwendet. Der Titel muß also auch

ohne die Seite verständlich 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 für Sie

verständlich? Welche

nicht?

Beispiele aus einer Bookmark- Sammlung: welche Titel sind für Sie verständlich? Welche nicht?

Der <meta>-Tag hat noch verschiedene andere Anwendungsgebiete. So wird der

<meta>-Tag dafür 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 wäre Unicode in der Variante utf8:

<meta http-equiv="Content-Type" content="text/html; charset=utf8">

Die Angabe muss natürlich mit dem wirklich verwendeten Characterset (siehe

Kapitel 2.1) übereinstimmen.

Unicode/utf8 müssen Sie immer dann verwenden, wenn Sie Sprachen mit

verschiedenen Zeichensätzen mischen, also z.B. auf ein und derselben Webseite

Seite 40

XHTML

sowohl Deutsch (westeuropäisch) als auch Polnisch (osteuropäisch) als auch

Russisch (kyrillisch) verwenden. Wenn Sie nur westeuropäische 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 müssen Sie die Tags <table>, <tr> und <td>

richtig ineinander verschachteln.

und <td> richtig ineinander verschachteln. <table border="1"> <tr>

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

Zellen verbinden

Abbildung 44: HTML-Code für eine Tabelle

Normalerweise hat eine Tabelle ein ganz regelmäßiges rechteckiges Gitternetz .

Man kann auch nebeneinander liegende Zellen verbinden. Dies erreicht man mit

dem Attribut colspan bzw. rowspan des <td>-Tags.

 

Obst

Gemüse

 

Äpfel

Birnen

Lauch

Kohl

Q1

10

3

3

30

Q2

8

2

0

30

Q3

9

1

30

HTML-Tabellen wurden früher in Webseiten auch für das Layout der Seite

verwendet, diese Funktion wurde zum Teil durch Stylesheets abgelöst.

XHTML

Seite 41

2.12 Farben und Hintergrundbilder

(Nicht

mehr wie in HTML mit Attributen des body-Tags oder dem <font>-Tag.). Mehr

über Stylesheets erfahren Sie im Kapitel 3.

Farben und Hintergrundbilder werden in XHTML mit Stylesheet gesetzt.

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 für den aktiven Link (während 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 für ein Stück Text

<span style="color:red;">rot</span>

Tabelle 6: Farben und Hintergrundbilder im Stylesheets

In Webseiten erfolgte die Farb-Angaben früher mit einem Hexadezimalen r,g,b-

Code. Dabei wird die Intensität von rot, grün und blau in hexadezimaler

Schreibweise zwischen 00 (minimum) und FF (maximum) angegeben. (z.B.

#000000 für schwarz, #FFFFFF für Weiss, #FF0000 für reines Rot, #00FF00 für

reines Grün, #0000FF für reines Blau).

Farben als Code

In Stylesheets kann man statt dessen auch die Schreibweise rgb(10,2,120)

verweden, um 10 Teile rot, 2 Teile grün und 120 Teile blau zu mischen. Jeder

der drei Zahlen kann zwischen 0 und 255 sein.

Für einige Farben kann man die englischen Farbwörter wie red, blue, black

verwenden.

In einem Webeditor wie Dreamweaver wäre die Farbauswahl etwas einfacher,

wie in Abbildung 45 gezeigt.

Farbauswahl etwas einfacher, wie in Abbildung 45 gezeigt. Abbildung 45: Auswahl von Farbe (und Farbcode) mit

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

Seite 42

XHTML

wird horizontal und vertikal so oft wiederholt, bis es die ganze Seite ausfüllt. In Abbildung 46 wurde ein Bild mit drei Zahnrädern als Hintergrundbild verwendet, durch die Wiederholung werden sieben Zahnräder angezeigt.

durch die Wiederholung werden sieben Zahnräder angezeigt. Abbildung 46: Beispiel für ein Hintergrundbild in einer

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

Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch lesbar sein! Im Beispiel in Abbildung 46 ist eine Linkfarbe zu hell bzw. das Hintergrundbild zu auffällig: Der Text „wurde schon besucht“ in der letzten Zeile ist kaum noch lesbar.

Seite 44

XHTML

Intro

Das Thema HTML kann für 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 Gestaltungsmöglichkeiten.

Mit Stylesheets (auch „Formatvorlagen“, oder CSS genannt) können Sie nun Ihre Gestaltungsmöglichkeiten wesentlich erweitern. Aber: Um CSS verwenden zu können müssen Sie den HTML-Code Ihrer Webseite verstehen.

Stylesheets sind ein unerlässliches Werkzeug für Projekte mit mehreren Dokumenten, um diese einheitlich zu gestalten. Das Prinzip ist nicht ganz einfach verständlich, aber mit der praktischen Erfahrung lernt man Stylesheets und die zusätzlichen gestalterischen Möglichkeiten die sie bieten sowie die Arbeitserleichterung die sie bringen wirklich zu schätzen.

CSS – Cascading Style Sheets

Seite 45

3 CSS – Cascading Style Sheets

Von Anfang an sollte eine HTML-Datei keine Information darüber enthalten, wie

der Text dargestellt werden soll - keine Schriftart oder Schriftgröße. HTML sollte

nur strukturelle Information enthalten („das ist eine Überschrift“, aber nicht

„Arial 24pt“). Die Formatierungs-Information sollte in sogenannten „Stylesheets“

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

definiert. Im Jahre 1993 sah eine typische Webseite so aus

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

Da es keine Stylesheets gab „erfand“ die Firma Netscape ab 1994 zusätzliche

HTML-Tags:

<html><body> <h1><font face="Arial" color="blue">Das Studium</font></h1> <p><font size="+1">S</font>tudienziel ist es, breit gefächerte technische und wirtschaftliche Kompetenzen </body></html>

Ab 1995 wurde endlich an den Standards für Stylesheets gearbeitet. In den

Browsern war die Unterstützung für 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>

h1 {

<link rel="stylesheet"

font-family: Arial;

type="text/css"

color: blue;

href="fh.css">

}

</head><body>

p:first-letter {

<h1>Das Studium</h1>

font-size: large;

<p>Studienziel ist es, breit gefächerte technische und wirtschaftliche Kompetenzen

}

</body></html>

Abbildung 47: HTML-Datei und dazugehöriges Stylesheet

Wozu der ganze Aufwand? Stellen Sie sich vor, sie betreuen 1000 Webseiten mit

je 20 Absätzen 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) unterstützen 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 unterstützte 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 für 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

Außerdem soll die Schrift in

hellblauer Farbe dargestellt werden.

vorhanden ist mit irgendeiner serifenlosen Schrift.

Zweiter Absatz: Die gesamte Seite (<body>) soll links um 150 Pixel eingerückt

werden, die Hintergrundfarbe der Seite ist weiß.

Dritter Absatz: Normale Text-Absätze sind im Blocksatz darzustellen.

Allgemein gesagt funktionieren Stylsheets so: Am Anfang steht immer ein HTML-

Tag, allerdings ohne spitze Klammern <>. Sie können auch mehrere Tags durch

Kommas trennen. In diesem Fall wird für 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 können (wie in

HTML) beliebig Zeilenumbrüche einfügen, diese werden ignoriert.

Welche Formatierungsanweisungen es gibt können Sie in selfhtml nachschlagen;

im Folgenden werden wir die wichtigsten behandeln.

6 nach http://www.upsdell.com/BrowserNews/stat.htm

CSS – Cascading Style Sheets

Seite 47

Die Seiten einer Website haben meist ein einheitliches Aussehen. Dies können

Sie erreichen, indem Sie für jede Webseite dieselbe Style Sheet Datei

verwenden. Dazu müssen Sie in jede HTML-Datei die Style Sheet Datei mittels

des <link>-Tags einbinden:

Verbindung zw. HTML

und CSS

<link rel="stylesheet" src="mystyle.css">

Diese Zeile muss innerhalb des head-Bereiches der HTML-Datei stehen. Die

Datei MYSYLE.CSS könnte etwa so aussehen wie oben in Abbildung 48.

Wenn Sie einen Style nur auf einer einzeigen Webseite verwenden, können 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 können auch direkt zu einem bestimmten Tag innerhalb des body

geschrieben werden. In diesem Fall gilt die Angabe nur für diesen ganz

speziellen Tag: dazu müssen Sie innerhalb des Tags das Attribut style

verwenden. Die einzelnen Formatanweisung folgen dann als Wert dieses

Attributes. Sie können 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

würden.

<h1 style="color:red; text-align:center;">Rote, zentrierte Überschrift </h1>

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

Anwendungsbeispiele verstehen.

diesem

Einblick

in

die

Syntax

von

CSS

können

wir

nun

erste

3.2 Texte und Farben mit Stylesheets

In diesem Kapitel lernen Sie die wichtigsten Formatierungs-Anweisungen von

CSS für Schriftarten, Absätze, Links, Farben kennen. Dabei wird immer wieder

das Selbe HTML-Dokument verwendet, der Code ist in abgebildet.

Seite 48

CSS – Cascading Style Sheets

<html> <head> <link rel="stylesheet">

Schriftfamilie,

Schriftgröße

Listing 1: HTML-Dokument für weitere CSS-Beispiele

Zuerst wollen wir die Schriften im Dokument festlegen: Eine serifenlose Schrift

für Überschriften, eine mit Serifen für den Fließtext.

1. {

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

p

Listing 2: Schriftfamilie, Schriftgröße mit CSS festlegen

In Zeile 1 bis 4 von Listing 2 werden zwei Anweisungen für Fließtext gegeben

(HTML-Tag <p>): die Schriftfamilie in Zeile 2 und die Schriftgröße in Zeile 3.

Bei Schriftfamilien gilt es, wie in Kapitel 1.2.4 beschrieben, die Einschränkungen

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 müssen in Anführungszeichen gesetzt werden, so wie

„Trebuchet MS“ in Zeile 6.

sans-serif,

serif,

cursive,

fantasy,

monospace

Das letzte Wort in Zeile 2 „sans-serif“ ist ein CSS-Kürzel für „irgendeine

serifenlose Schrift“. Es empfiehlt sich am Ende einer Schriftliste ein solches

Kürzel als Standardwert „wenn alle Stricke reißen“ anzugeben, links sehen Sie

eine Liste der in CSS1 angebotenen Kürzel.

Die Schriftgrößen-Angabe in Zeile 3 verwendet Pixel als Maßeinheit. Alternativ

wäreauch eine Angabe in Punkt (pt), Pica (pc), Inch (in), Millimeter (mm),

Zentimeter (cm), Em-Breite der aktuellen Schrift (em), iX-Höhe der aktuellen

Schrift (ex), Prozent (%).

Ausserdem gibt es für Schriftgrößen sieben Standardgrößen: xx-small, x-

small, small, medium, large, x-large, xx-large und die relativen Angaben

smaller und larger.

Zum Thema Schriftgrößen gibt es verschiedene Ansichten:

Pixelorientiert

Da Webseiten hauptsächlich auf Bildschirmen gelesen werden kann man

argumentieren, dass das Pixel die natürliche Maßeinheit auf Webseiten ist.

Wenn Sie gif, jpg oder png-Bilder in Ihrer Webseite verwenden ist die Breite und

CSS – Cascading Style Sheets

Seite 49

Höhe der Bilder in Pixel fix. Pixel auch als Größe für Schrift macht es einfach die Größenverhältnisse von Bild und Schrift zu fixieren.

Eine andere Position lautet: Bildschirme und Displays sind sehr unterschiedlich groß; Leserinnen und Leser haben sehr unterschiedliche Sehstärken und – schwächen. Deswegen muss das Verändern der Schriftgröße in der Hand der LeserIn bleiben. In einem Browser wie Firefox geht das ja auch bequem mit einem Tastendruck.

Wenn nun die LeserIn die Schriftgröße ändert, sollte diese Veränderung alle Schriften auf der Webseite betreffen: Fließtest, Überschrifen, Aufzählungen, etc. Dabei könnte das Layout und die Bilder auf der Seite entweder fix bleiben oder sich ebenfalls vergößern oder verkleinern:

Fluides Layout

sich ebenfalls vergößern oder verkleinern: Fluides Layout Abbildung 49: Bild und Spalte mit fixer (links) vs.

Abbildung 49: Bild und Spalte mit fixer (links) vs. relativer Größe (rechts)

In der linken Hälfte von Abbildung 49 sehen Sie die Auswirkung einer fixen Größenangabe für Spaltenbreite und Bildgröße in Pixel. In der rechten Hälfte wurde Spaltenbreite und Bildgröße in Abhängigkeit von der Schriftgröße in Em angegeben.

Seite 50

CSS – Cascading Style Sheets

Fixe Größen in Pixel haben den Vorteil, dass die Seite auch bei großer

Schriftgröße noch ins Fenster passt. Relative Größenangaben in Em haben den

Vorteil, dass das Layout, dass sie Größenverhältnisse erhalten bleiben.

Absätze

Betrachten wir als nächstes den Absatz. Wie immer in HTML erfolgt der

Zeilenumbruch automatisch. Mit CSS können Sie verschiedene Aspekte des

Absatz-Layoutes steuern, einige davon sind in Abbildung 50 gezeigt:

steuern, einige davon sind in Abbildung 50 gezeigt: In 1989 one of the main objectives of

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 können 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 möchten Sie aber vielleicht nur eine spezielle Art

von Absatz anders formatieren als die anderen Absätze. Zu diesem Zweck

können Sie sich im Stylesheet noch weitere Formatvorlagen - sogenannte

"Klassen" - definieren:

.wichtig { color: red; }

Diesen Klassen können Sie eigene Namen geben. Um Klassennamen von HTML-

Tags zu unterscheiden muss vor dem Namen einer Klasse ein Punkt stehen.

Jedem normale HTML-Tag können Sie nun diese Klasse zuweisen. Dies geschieht

mit dem Attribut class und dem Namen der speziellen Klasse.

CSS – Cascading Style Sheets

Seite 51

<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

möchten, aber kein passender HTML-Tag vorhanden ist, können Sie die beiden

Tags <span> und <div> verwenden, die beide selber kaum Eigenschaften

aufweisen. <span> eignet sich für die Verwendung in Fließtext, <div> ist ein

blockbildender Tag, erzwingt also einen Zeilenumbruch.

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

Die Worte „besonders interessante“ erscheinen rot.

3.4 Layout mit Stylesheets - FEHLT

Seite 52

CSS – Cascading Style Sheets

3.5 Einsatz von Stylesheets

Wichtige Argumente für den Einsatz von Stylesheets sind:

Zusätzliche Gestaltungsmöglichkeiten

Einheitliche Gestaltung von mehreren Webseiten

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

Aber Achtung: CSS ist nicht die Lösung jedes Problems. Was CSS nicht leisten kann ist z.b:

Mit Stylesheets können Sie nur Objekte verändern, die schon in der HTML-Datei vorhanden sind. Es können keine neuen Objekte eingefügt werden.

Um ein Stylesheet zu erstellen, muss die DesignerIn die HTML-Tags kennen, z.B. wissen, dass h1, h2, h3 für die Überschriften stehen.

Damit das Stylesheet wirkt, muss die RedakteurIn, die das HTML- Dokument erstellt, die richtigen HTML-Tags verwenden, z.B. Überschriften wirklich mit h1, h2, h3 formatieren, und nicht mit b, i, font.

Seite 54

CSS – Cascading Style Sheets

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 könnte man das gleiche Ergebnis erzielen.

„wysiwyg“ ist eine englische Abkürzung für „what you see is what you get“, die Abkürzung wird ungefähr „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: während DTP-Programme die nach dem wysiwyg-Prinzip arbeiten dieses Versprechen auch erfüllen können, ist das bei Web-Editoren nicht möglich. 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 Verfügung stehenden Schriftarten, u.s.w. Es müsste also heissen „Was du siehst ist ungefähr was du bekommen könntest“.

wysiwyg

funktioniert nicht

was du bekommen könntest“. wysiwyg funktioniert nicht Abbildung 51: Dreamweaver für Mac Dreamweaver ist ein

Abbildung 51: Dreamweaver für 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 uneingeschränkt. Die Unterschiede zwischen den Versionen sind für die nun folgenden Betrachtungen nicht relevant, sie betreffen z.B. die Unterstützung von PHP oder Datenbanken, also fortgeschrittenere Themen.

7 In diesem Skript werden meist Screenshot von Dreamweaver für Windows verwendet, manchmal auch Screenshots von Dreamweaver für Mac.

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 für zukünftige 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 ungefähr der Darstellung der Webseite im Browser entspricht. Sie können 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.

eine gemischte Ansicht. Letztere sehen Sie in Abbildung 52. Abbildung 52: Gemischte Ansicht in Dreamweaver Die

Abbildung 52: Gemischte Ansicht in Dreamweaver

Die gemischte Ansicht eignet sich besonders gut zum Erlernen von neuem HTML-Code: Sie können in der Entwurfs-Ansicht einen Bereich markieren, im Code-Ansicht wird der entsprechende Code ebenfalls markiert. So können Sie erforschen, welcher HTML-Code zu welchem Element der Seite gehört.

Ansicht wechseln

Die schnellste Art zwischen den Ansichten hin und her zu wechseln ist die Tastenkombination Strg-Tabulator. Dabei bleibt die Markierung erhalten.

Ein Qualitätskriterium bei Web-Editoren, und der Grund warum ich Dreamweaver empfehle, ist die Qualität des erzeugten HTML-Codes, und die „Durchlässigkeit“ zwischen Entwurfs- und Code-Ansicht. Dreamweaver erzeugt kurzen, gut lesbaren HTML-Code und fördert das Erlernen des Codes durch das gute Zusammenspiel der Ansichten.

Dreamweaver

Seite 57

4.1.2 Überblick über die GUI von Dreamweaver

Die Oberfläche von Dreamweaver besteht aus einer Vielzahl von Fenstern und

Elementen. Für den Einstieg in die Arbeit mit Dreamweaver sind die in Abbildung

53 gezeigten Elemente wichtig:

sind die in Abbildung 53 gezeigten Elemente wichtig: Abbildung 53: Fenster von Dreamweaver im Überblick Das

Abbildung 53: Fenster von Dreamweaver im Überblick

Das Dokument wird zentral angezeigt. Sie können 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.

wo Sie weitere wichtige Informationen zum Dokument finden. Umschalten zw. Ansichten Symbolleiste Dokument: Titel des

Umschalten zw.

Ansichten

Symbolleiste Dokument:

finden. Umschalten zw. Ansichten Symbolleiste Dokument: Titel des Dokuments (entspricht dem <title>-Tag),

Titel des Dokuments (entspricht dem <title>-Tag), editierbar.

Titelleiste des Programmes (ganz oben):

editierbar. Titelleiste des Programmes (ganz oben): Name des Programmes, Titel des Dokuments (entspricht dem
Name des Programmes, Titel des Dokuments (entspricht dem <title>-Tag), Ordner und Dateiname des Dokuments,
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 Höhe des Fensters, in dem das Dokument derzeit dargestellt wird
Gesamt-Größe der Webseite in Kilobyte (Summe aus HTML-Dokument und
allen Bildern) / Geschätzte Übertragungszeit für die Webseite
Bildern) / Geschätzte Übertragungszeit für die Webseite Oberer Rand des Dokuments: Auswahl welches der geöffneten

Oberer Rand des Dokuments:

Auswahl welches der geöffneten Dokumente gerade bearbeitet wird, Stern markiert Dokumente die verändert wurden und gespeichert werden sollten.

Seite 58

Dreamweaver

Seite 58 Dreamweaver Linke untere Ecke des Dokuments: Anzeige der HTML-Tags. Entspricht jeweils der Position des

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.

benutzt werden: Wenn Sie auf <TR> klicken wird die entsprechende Zeile der Tabelle markiert.

Diese HTML-Leiste kann auch zur Navigation

Abbildung 54: Details der Dreamweaver GUI

Alle weiteren Fenster in Dreamweaver sind mit Ihrem Namen beschriftet.

Einfügen

Das Fenster Einfügen ermöglicht das Einfügen von Elementen in das Dokument.

Das Fenster ist oberhalb des Dokumentes platziert, die Handhabung ist damit

ähnlich wie in den meisten Windows-Programmen.

Eigenschaften

Das Fenster Eigenschaften ist unterhalb des Dokumentes platziert, und

widerspricht damit den Windows-Konventionen. Dieses Fenster ist für die Arbeit

mit Dreamweaver zentral. Der Inhalt des Fensters verändert 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)

wenn ein Bild im Dokument markiert ist (siehe Abbildung 55) Abbildung 55:Verschiedene Zustände des Eigenschaften

Abbildung 55:Verschiedene Zustände des Eigenschaften Fensters

Das Eigenschaften Fenster dient sowohl zur Anzeige der Eigenschaften, als auch

zur Bearbeitung. So können Sie z.B. in Abbildung 55 die Breite und Höhe des

Bildes ablesen, aber auch neue Werte in diese Felder eingeben, und damit die

Darstellung des Bildes verändern.

Es gibt dabei einen engen Zusammenhang zwischen Eigenschaften Fenster und

dem HTML-Code. In Abbildung 56 können Sie nachvollziehen, wie jedes

Eingabe-Element im Eigenschafts-Fenster einem Attribut des HTML-Tags

entspricht.

einem Attribut des HTML-Tags entspricht. <img width="157" height="190"

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