Handbuch Webdesign: AllInOne

Ein Lehrbuch für künftige WebdesignerInnen.

Druckversion des Buches Handbuch Webdesign

Dieses Buch umfasst derzeit etwa 70 DIN-A4-Seiten einschließlich Bilder (Stand: 6. Juni 2011).
Wenn Sie dieses Buch drucken oder die Druckvorschau Ihres Browsers verwenden, ist diese Notiz nicht sichtbar.
Zum Drucken klicken Sie in der linken Menüleiste im Abschnitt „Drucken/exportieren“ auf Als PDF herunterladen.
Mehr Informationen über Druckversionen siehe Hilfe:Fertigstellen/ PDF-Versionen.
Hinweise:
- Für einen reinen Text-Ausdruck kann man die Bilder-Darstellung im Browser deaktivieren:
  - Internet-Explorer: Extras > Internetoptionen > Erweitert > Bilder anzeigen (Häkchen entfernen und mit OK bestätigen)
  - Mozilla Firefox: Extras > Einstellungen > Inhalt > Grafiken laden (Häkchen entfernen und mit OK bestätigen)
  - Opera: Ansicht > Bilder > Keine Bilder
- Texte, die in Klappboxen stehen, werden nicht immer ausgedruckt (abhängig von der Definition). Auf jeden Fall müssen sie ausgeklappt sein, wenn sie gedruckt werden sollen.
- Die Funktion „Als PDF herunterladen“ kann zu Darstellungsfehlern führen.

Dieser Text ist sowohl unter der „Creative Commons Attribution/Share-Alike“-Lizenz 3.0 als auch GFDL lizenziert.

Eine deutschsprachige Beschreibung für Autoren und Weiternutzer findet man in den Nutzungsbedingungen der Wikimedia Foundation.

(Dies ist die Druckversion, mit allen Inhalten auf einer Webseite. Für das Lesen Online ist die Version in einzelnen Seiten besser geeignet.)

Das Medium Web verhält sich ganz anders als beispielsweise Papier oder Film. Es funktioniert rahmenlos, es passt sich an. Es ist im Prinzip auf jedem Gerät und in jedem Betriebssystem verfügbar. Es ist neutral, will nichts, gibt nichts vor. Die Struktur, die Sie Ihrer Website und Ihrem Code geben müssen, ist nur für die Darstellungssoftware, den Browser, gedacht. Der Browser ist auf allen Geräten und Systemen mittlerweile die wichtigste und am meisten verwendete Software überhaupt geworden. Aus diesem Grund bietet er seinem Benutzer auch eine Unzahl an Erweiterungsmodulen, die alle in der Lage sind, die Darstellung Ihrer Website an die Bedürfnisse des Nutzers anzupassen. Das Web ist ein äußerst flexibles Medium.

Wer das Web findet, findet auch

verschiedenartige Ausgabegeräte
verschiedene Browser mit verschiedener Darstellung der gleichen Websites
verschiedene Bildschirmgrößen und Auflösungen
schwer kontrollierbare Schriftgröße
verschiedene Zusatzprogramme und Plugins

Verschiedenartige Ausgabegeräte

Ausgabegerät für das Web ist jedes Gerät, welches über einen Internetanschluss verfügt. Das sind nicht mehr nur Computer und Notebooks, sondern auch Smartphones, Tablets und sogar Fernseher und Spielkonsolen. Für jedes dieser Geräte funktioniert ein und die gleiche Website. Da der Anteil der mobilen Geräte bei den Abrufzahlen für Websites ganz allgemein stetig ansteigt, liegt heute der Fokus auf Responsive Design, eine Form des Webdesigns, das sich an das Gerät der Nutzer anpasst.

Verschiedene Browser

Verschiedene Browser und Versionen stellen die gleiche Webseite oft leicht unterschiedlich dar. Denn diese Browser werden von unterschiedlichen Programmiererteams geschrieben. Die meisten Browser sind heute Open Source und werden von einer großen Community entwickelt. So genannte Bug Bountys, die Kopfgeldjagd nach Programmfehlern, die von namhaften und großen Unternehmen wie Google gesponsert wird, machen die Browser für den Endbenutzer sicherer. Nicht besonders beliebt ist der Internet Explorer, der auch in seiner neuesten Version geflissentlich Standards ignoriert und jedem Webdesigner ein Dorn im Auge ist. Während alle beliebten Browser für jedes populäre Betriebssystem zur Verfügung stehen, gibt es den Internet Explorer bis heute nur für Windows. Es gibt nicht viele Nutzer, die das bedauern, aber für Webdesigner bedeutet das, dass sie zum Testen einer Website an eine Windows-Lizenz oder an einen PC mit Windows gelangen müssen.

Bildschirmgrößen und Auflösungen

Unterschiedliche Geräte bieten unterschiedliche Auflösungen

Messen von Bildschirmgrößen

Dem Webdesigner sind die Bildschirmgrößen, mit denen die Nutzer die Seite besuchen werden, für gewöhnlich nicht bekannt. Durch das so genannte Device Tracking, der diskreten Rückverfolgung, kann er herausfinden, mit welchen Geräten die Benutzer die Seite besucht haben. Da die Bildschirmgrößen stark variieren, ist heute Responsive Design für Webseiten populär, die eine Breite an Computern und Smartphones gleichzeitig unterstützen. Die Messung eines Bildschirms kann mit CSS Media Queries, oder seltener mit JavaScript erfolgen.

Abbildung 13: Verbreitete Bildschirmauflösungen auf dem Desktop

In Abbildung 13 sehen Sie die verbreiteten Bildschirmauflösungen des Internets im Jahr 2014. Responsive Design kann für ein und die gleiche Website die meisten dieser Auflösungen abdecken.

Von diesen als Bruttoauflösung zu betrachtenden Angaben über die Auflösung und der Größe der zur Verfügung stehenden Fläche, sind nun noch der Platz für den Fensterrahmen des Browsers, für Scrollbalken, Symbolleisten, und eventuell eingeblendete Favoritenleisten abzuziehen, um zum verbleibenden Raum für die Gestaltung zu kommen. Moderne Browser reduzieren die von ihnen benötigte Flächen zunehmend, um mehr Platz für Websites zu haben. Doch demgegenüber stehen Erweiterungen der Browser, die den geschaffenen Raum wieder einnehmen können.

Schriftarten

Auf den verschiedenen Geräten stehen nicht überall die selben Schriftarten zur Verfügung. Die Schriftarten hängen 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 im buchstäblichen Sinne ganz untypischen Computer. Die meisten anderen Benutzer haben nur Standard-Schriften auf ihrem Computer.

Wenn Sie DejaVu Sans Serif als Schriftart vorgeben, und dann Ihre Seite auf einem Computer betrachten, auf dem es diese Schriftart nicht gibt, wird stattdessen die Schrift verwendet, die Entwickler und Benutzer als Standardschriftart für den Browser definiert haben. Unter Windows ist es traditionell die Serifenschrift Times, auf Linux und in exotischen Browsern sind standardmäßig eventuell andere Schriften eingestellt.

Es ist deswegen sinnvoll, nicht eine bestimmte Schriftart zu verlangen, sondern eine Liste von Schriftarten vorzugeben: wenn die erste Schriftart auf der Liste nicht installiert ist wird die zweite verwendet, dann die dritte, … Abbildung 19 zeigt drei typische Beispiele für solche Listen.

 Verdana, Tahoma, Arial, Helvetica, sans-serif;
 "Times New Roman", Georgia, Times, serif;
 "Courier New", Courier, monospace;

Abbildung 19: Beispiele für Schriftarten-Listen

Es gibt jedoch Methoden, um eigene Schriftarten in Webseiten zu verwenden, auch wenn der Benutzer sie nicht installiert hat. Um eine Schriftart in dieser Weise zu verwenden, brauchen Sie eine, gelegentlich kostenpflichtige, Lizenz, denn Schriftarten sind urheberrechtlich geschützt. Das ist kein Scherz - auch wenn es nur das Alphabet ist, ist es dennoch auf eine bestimmte, ansprechende Weise von einem Grafiker gestaltet worden. Schriftgestalter, oder in der Sprache des Internets Font Designer, verbringen viele Stunden voller Kleinarbeit an der Gestaltung einer Schriftart, denn Fehler in der Gestaltung sind im Schriftbild zu sehen. Die Preise für eine Schriftart reichen von kostenlos bis an die 10.000 €. Kostenlose Fonts finden Sie zum Beispiel auf Fontsquirrel.com oder in den Google Web Fonts, wo Sie die Fonts ausprobieren und auch gleich erfahren, wie Sie diese auf Ihrer Website verwenden können.

Schriftgrößen und Zeilenumbruch

Auch wenn Sie durch CSS die Größen und Verhältnisse von Schriften und anderen Elementen bestimmen können, entscheidet letztendlich der Nutzer, wie groß die Darstellung der Website ausfällt. Personen mit Sehschwäche können die Schriftart größer stellen, oder die Website heranzoomen, um die Website betrachten zu können. Den Zeilenumbruch überlassen Sie aus diesem Grund besser dem Browser. Je nach Schriftgröße und zur Verfügung stehendem Platz im Browser-Fenster wird der Browser die Absätze geeignet in Zeilen umbrechen, wie Abbildung 20 zeigt.

Datei:Handbuch Webdesign-Zeilenumbruch im Browser.jpg

Abbildung 20: Der Browser erledigt den Zeilenumbruch

Unbekannte Lesereihenfolge

Wenn Ihre Website aus mehreren Webseiten besteht, haben Sie keine Kontrolle darüber, in welcher Reihenfolge diese Seiten gelesen werden. Nur die wenigsten Websites können dem Leser die Richtung vorgeben. Durch Hyperlinks und Benutzer, die ihnen folgen, wird dieser Fluss ohnehin unterbrochen. Die Verknüpfungen von Websites untereinander unterscheiden das Web von Büchern und sind Teil des Erfolgs.

Keine eindeutiger Eintrittspunkt

Die LeserInnen "betreten" Ihre Seite auch nicht durch die von Ihnen definierte Hauptseite. In Abbildung 21 sehen Sie ein Beispiel.

Abbildung 21: Navigationsstruktur und Reales Navigationsverhalten

Links und Lesereihenfolge

Die großen Pfeile zeigen die Verlinkungen, die zwischen den Seiten existieren. Die dünnen Pfeile sind das eigentliche Nutzerverhalten. Diesen Weg kann man aus dem Logfile des Servers rekonstruieren: Der Benutzer kommt von Google, wo er die "Seite 1" gefunden hat. Von dort navigiert er zur "Hauptseite", und von dort weiter zu "Seite 5". Hier verlässt er die Site wieder. Die Hauptseite ist jedoch in der Regel der erste Eindruck, den ein Benutzer bekommt, wenn er Ihre Domain eingibt. Die beliebte "Intro-Seite", möglicherweise noch mit einer Adobe Flash-Präsentation braucht eine Website hingegen nicht. Langweilen Sie Ihre Benutzer nicht mit PowerPoint-Imitationen und Daumenkinos.

Zusatzprogramme, Fremdformate und Plugins

Jeder Browser kann HTML und „reinen Text“ darstellen. Falls der Browser Bilder darstellen kann, dann Bilder in den Formaten GIF und JPEG, einige auch PNG. Der HTML5-Standard erlaubt außerdem die Anzeige von SVG, einem Vektorgrafik-Format. SVG ist ein Beispiel für ein Dateiformat, für das ursprünglich ein Plugin geladen werden musste, um es darzustellen. Mit der Zeit haben alle populären Browser eine SVG-Unterstützung bekommen und das Plugin wurde obsolet.

Andere Formate (Microsoft Word, OpenOffice, CAD, 3D-Grafiken, Audio und Video-Dateien, Flash, PDF, ...) können auch in eine Webseite eingebunden werden. Der Browser kann Zusatzprogramme starten, um diese Formate darzustellen oder hat die Unterstützung dieser Formate schon integriert. Das ist technisch möglich, wenngleich es viele Argumente gegen die Einbettung von Dateien gibt.

Für die Darstellung von Dateiformaten, die der Browser selbst nicht unterstützt, muss eine Software auf dem Computer installiert sein, die das Format verarbeiten kann. Eventuell muss diese Software ein Plugin für den Browser installiert haben. Beides liefert eine Website für gewöhnlich nicht aus. OpenOffice ist beispielsweise über 200 MB groß, was auch bei Breitband-DSL eine Menge ist und in keinem Verhältnis zur Darstellung eines Dokuments steht. Außerdem sind Plugins dafür berüchtigt, Sicherheitslücken zu haben, die zusammen mit einer manipulierten Datei von böswilligen Betreibern angeboten werden. Mittlerweile verlieren Plugins für das Internet an Bedeutung. Google hat die Schnittstelle Netscape Plugin API, die für den Betrieb von Plugins im Browser Chrome verwendet wird, vor einiger Zeit aus dem Browser entfernt. Eine schwerwiegende Sicherheitslücke, die es erlaubt, die Kontrolle über den Computer des Nutzers zu übernehmen, hat Adobe in ihrem Plugin Adobe Flash erst nach einigen Wochen geschlossen. Für Smartphones und Mobilgeräte wird das populärste aller Plugins gar nicht mehr unterstützt.

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. Ist Excel installiert, wird dem Nutzer unter Umständen angeboten, die Datei zu öffnen. Ansonsten unterscheidet sich das, was passieren wird, nicht von einem einfachen Download.

Plugins

Ein Spezialfall von Zusatzprogrammen für Webbrowser sind Plugins. Diese übernehmen die Darstellung eines rechteckigen Bereiches innerhalb einer Webseite. Das populärste Beispiel ist das oben erwähnte Adobe Flash.

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

In Abbildung 22 wird das Rechteck am rechten Rand der Webseite nicht vom Webbrowser selbst, sondern vom Flash-Plugin dargestellt. Für den Besucher ist der Unterschied nicht zu merken. Welche Verbreitung die verschiedenen Plugins haben, war häufig Gegenstand zahlreicher Statistiken. Als Macromedia noch Flash entwickelte, publizierte das Unternehmen auf seiner Website eine Statistik laut der 97% aller Browser das Flash-Plugin benutzen. Mittlerweile ist dieser Anteil stark gesunken, da die Möglichkeiten, für die Flash früher einzigartig war, mittlerweile Teil des Browsers geworden sind. Das betrifft Animationen sowie Audio- und Video-Dateien. Mit WebGL kommt die Darstellung von 3D-Inhalten hinzu, darüber hinaus hat sich die Unterstützung von JavaScript als Programmiersprache des Webs enorm verbessert.

Zusammenfassung

Das Ausgabemedium für eine Website kann nicht verallgemeinert, fixiert oder kontrolliert werden. Ein paar mögliche Szenarien:

Privatnutzer in der Ersten Welt, die viel Geld haben und sich aus Spaß am Computer immer die neueste Hardware leisten, immer die bestmögliche Internetanbindung haben, immer die neueste Software benutzen.
Trendbewusste Großstadtbewohner, die mit Notebooks und Smartphones unterwegs sind und surfen.
Heimkinobesitzer mit einem Smart-TV, der mit einer Fernbedienung oder dem Finger bedient wird.
Firmennutzer, die mit dem vorlieb nehmen müssen, was ihnen die IT-Abteilung nach Firewalls und Sicherheitsbeschränkungen übrig lässt.
Kunden von Internet-Cafés irgendwo auf dieser Erde, denen weder Software noch Hardware gehört. Was sie vorfinden, ist vielleicht ein sieben Jahre alter Computer mit ebenso alter Software und einem Röhrenbildschirm.
Blinde, die mit einem Text-zu-Sprache-Programm oder einer Braille-Ausgabezeile im Web surfen.
Menschen mit Rot-Grün-Sehschwäche, 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 einer Maus umgehen können oder Menschen, die allgemein die Vorzüge von Tastatur und Shortcuts zu schätzen wissen.

Als Webdesigner kann nicht auf jede Gruppe Rücksicht genommen werden. Wohl aber ist es die Pflicht eines Webdesigners, sich mit der technologischen Basis der Zielgruppe vertraut zu machen.

Wenn Sie eine neue Webseite erstellen, stehen am Anfang einige Fragen:

Zielgruppe: an wen richtet sich die Seite?
Technik: welche Basis soll für die Seite genutzt werden?
Inhalte: was soll den Besuchern präsentiert werden?
Pflege: wer soll die Seite pflegen? Und wie oft?

Mit „Inhalt und Pflege“ beschäftigen wir uns in den nächsten Kapiteln.

Die Zielgruppe

Jede Webseite hat eine potentielle Zielgruppe. Diese reicht von einer oder wenigen Personen bis zu einem internationalen Publikum.

Beispiele für mögliche Seiten, Inhalte und Zielgruppen:

persönliche Seite: oft Passwort-geschützt, bspw. eine Zusammenstellung von Links für den Eigengebrauch. Zielgruppe ist hier die eigene Person.
Selbstdarstellung: die Zurschaustellung der eigenen Person mit Lebenslauf, Publikationsliste, Arbeitsproben usw. Zielgruppe: Kunden/Personalchefs.
Vereinsseite: Termine, Bilder, Infos für Neumitglieder, Neuigkeiten, oft auch ein interner Mitgliederbereich. Zielgruppe sind Vereinsmitglieder und Interesseten, evtl. die örtliche Presse.
Firmendarstellung: Produkte und Bestellmöglichkeiten, Firmengeschichte, Mitarbeiter/Anspechpartner, Kontaktmöglichkeiten, Stellenangebote, ... Zielgruppe: Kunden, Bewerber, ...

Es lassen sich noch unzählige weitere Beispiele finden.

Bevor Sie weiterlesen, stellen und beantworten Sie die Frage: Wer ist meine Zielgruppe?

Wenn Sie eine bereits bestehende Seite übernehmen, sollten Sie einen Blick in die Zugriffs-Logs werfen und schauen, ob ein oder mehrere Tools im Einsatz sind, die Ihnen Statistiken über Zugriffszahlen, geographische Verteilung usf. liefern können. Bietet die Seite den Besuchern Möglichkeiten zur Kommunikation wie Gästebücher, Forum oder ähnlich? Schauen Sie sich an, was bereits über die Seite gesagt wurde. Was wird gelobt? Was wird kritisiert? Was muss dringend verbessert werden? Haben Sie einen Auftraggeber sind dessen Wünsche natürlich auch zu erfragen und zu berücksichtigen. Führen Sie zudem eine Suche mit dem Namen der Seite/der Firma/des Sportvereins/… durch. Welche Dokumente finden Sie? Enthalten diese positive oder negative Aussagen über die Firma?

In jedem Fall sollten Sie schauen, ob es Referenz-Seiten gibt. Fragen Sie ein paar Bekannte, welche Seite ihnen zu dem Thema Ihrer Seite als erstes einfällt. Bspw. hat sich Google in Deutschland als Suchmaschinen-Standard etabliert. Schauen Sie sich diese Seiten an. Welche Inhalte sind auf diesen Seiten vorhanden? Wie werden diese Seiten rezipiert? Denken Sie daran, dass Sie Besucher durch die Qualität Ihrer Seite erreichen wollen. D.h. es ist Ihr Ziel, besser als oder zumindest gleichwertig zu den Referenz-Seiten zu sein. Schreiben Sie also eine Liste, was Sie für Ihre Seiten brauchen und was Ihre Seite vor allen anderen auszeichnen könnte. Selbst wenn sie nicht in direkter Konkurrenz zu anderen Seiten stehen (als Beispiel sei wieder der lokale Sportverein angeführt) sollten Sie trotzdem schauen, was ähnliche Seiten auszeichnet. Vergessen Sie aber nie, dass Sie nicht einfach kopieren können. Zum einen bekommen Sie schnell Probleme mit dem Urheberrecht, zum anderen gibt es für Besucher keinen Grund, die Kopie an Stelle des Originals zu besuchen.

Technik

Wurden Webseiten in den Anfangsjahren des World Wide Web (WWW) per Hand geschrieben, werden heute fast nur noch Content-Management-Systeme (wörtl. „Inhalt-Verwaltung-Systeme“, CMS) verwendet. Ein CMS besteht oft aus zwei Teilen,

dem Frontend, die Seite, die Ihre Besucher sehen
und dem "Backend", mit dessen Hilfe die Seite bearbeitet werden kann

Es gibt unterschiedliche Arten von CMS, jede mit unterschiedlichen Anwendungsarten:

Typo3 und Joomla als Beispiele für die „Alleskönner“, die mit Hilfe von Erweiterungen
Mediawiki als Beispiel für Wikis, die als „Zettelkasten“ mit flachen Hierarchien und offen für Alle angelegt sind
Wordpress als Beispiel für Blogs, darauf angelegt, Artikel in zeitlicher Reihenfolge darzustellen
Foren, um Nutzern die Möglichkeit zur Diskussion zu geben
…

Die Entscheidung für ein CMS kann von mehreren Faktoren abhängig gemacht werden:

Kosten: es gibt sowohl kostenlose als auch kostenpflichtige CMS
Einsatzzweck: braucht die Firmenhomepage ein Forum? Der Sportverein ein Wiki? Ihre persönliche Seite ein Blog?
Vertrautheit: müssen Sie sich in die Software einarbeiten oder kennen Sie sie in- und auswendig
Pflege: wird die Software gut (oder überhaupt) gepflegt, d.h. werden Updates für Sicherheitslücken bereitgestellt?
Anforderungen: braucht das CMS spezielle Software, um zu funktionieren? Falls ja, können Sie diese Software installieren (und warten)?

Nachdem Sie sich Gedanken um das Ziel und die Zielgruppe sowie die Technik gemacht haben, geht es nun um die Inhalte. Folgende Fragen stehen dabei im Mittelpunkt:

welche Inhalte braucht die Seite?
welche Inhalte sind vorhanden, welche müssen überarbeitet oder neu erstellt werden?
wie werden die Inhalte für die Seite unterteilt?

Inhalte umfasst dabei nicht nur Texte, sondern auch Fotos, Videos, Audio, …

Notwendige Inhalte

Sie wollen mit Hilfe Ihrer Zielgruppe ein Ziel erreichen. Dabei ist es egal, ob Sie Ihren Besuchern etwas verkaufen, sie informieren oder unterhalten wollen. Dieses Ziel erreichen Sie mit Hilfe von Inhalten, die Sie auf Ihrer Seite präsentieren. Dabei brauchen Sie mindestens

eine Erklärung worum es bei der Seite geht
bei deutschsprachigen Seiten ein Impressum

Die anderen Dinge richten sich nach Ihrer Zielsetzung:

wenn Sie Dienstleistungen oder Produkte anbieten, müssen Sie diese vorstellen
geht es z.B. um die Organisation eines Vereins sollten Sie Termine oder Zeiten bekannt geben
wenn Sie eine Software vorstellen, sollte diese evtl. heruntergeladen werden können
ein z.B. freischaffender Künstler wird Arbeitsproben seiner Kunst vorstellen wollen

Der erste Schritt besteht demnach darin, eine Liste der mindestens benötigten Inhalte anzufertigen. Sollten Sie die Seite für jemand Anderen anfertigen, hat diese Person evtl. schon eine Liste, meist aber (mehr oder weniger) genaue Vorstellungen, was „auf die Seite gehört“.

Zusätzliche Inhalte

Mit den notwendigen Inhalten erreichen Sie nur das selbe Niveau wie alle anderen Seiten im Netz zum selben Thema. Die Chance, sich qualitativ und quantitativ davon abzusetzen, bieten Ihnen zusätzliche Inhalte, die

Ihren Besuchern helfen, ein Problem zu lösen oder ihre Fragen beantworten
möglichst nur auf Ihrer Seite vorhanden sind

Im nächsten Schritt geht es darum, sich einen Überblick zu verschaffen, welche Inhalte bereits vorhanden sind - und welche noch geschaffen werden müssen.

Vorhandene Inhalte

Ein Teil der Inhalte wird oft schon vorhanden sein. Hier gilt es zu klären:

liegen die Inhalte in der Form vor, in der sie im Netz präsentiert werden sollen?
passt die Qualität der Inhalte zu der Seite?
sind die Rechte an den Inhalten geklärt?

Wird eine der Fragen verneint, so muss Abhilfe geschaffen werden, bevor die Inhalte verwendet werden können.

Neue Inhalte

Inhalte strukturieren

In den vergangenen Kapiteln haben Sie gelernt, die Inhalte für eine Webseite auszuwählen. Sie haben sie auf die einzelnen Seiten verteilt und die Navigation ausgearbeitet. In diesem Kapitel lernen Sie nun, den Inhalten eine Struktur zu geben und damit ein Gerüst für die fertigen Seiten zu schaffen. An dieses Gerüst werden später das Aussehen (mit Hilfe von CSS) und alle interaktiven Dinge (wie Formulare, Gästebücher, Suchen-Felder usw.) „angehängt“.

Die Sprache, in der Sie den Webbrowsern ihre Struktur mitteilen, heißt HyperText Markup Language, kurz HTML. HTML ist eine Auszeichnungssprache, d.h. HTML-Dokumente werden geschrieben - und nicht programmiert Grundlage der Sprache sind HTML-Tags.

Da Content-Management-Systeme und Editoren einen großen Teil der Arbeit für Sie übernehmen können, werden in diesem Buch nur wichtige Konzepte der Sprache vorgestellt, und nicht jeder Befehl bis ins Detail erläutert. Wenn Sie tiefer in die Materie einsteigen wollen, werfen Sie einen Blick auf das

Wikibook: Websiteentwicklung: XHTML

^[1] und die beste deutschsprachige Webseite zum Thema: selfhtml^[2].

Geschichte und Standards

Die erste Version von HTML entstand schon 1992/1993 und damit zeitgleich zum World Wide Web (WWW)^[3], dass heute zumeist mit dem Internet gleich gesetzt wird. Während der letzten zwanzig Jahre haben sich sowohl HTML als auch das WWW stark weiterentwickelt. Dabei sind für Webdesigner vor allem zwei Dinge entscheidend:

die Konkurrenz zwischen verschiedenen Webbrowsern um Marktanteile, umgangssprachlich auch als „ Browserkrieg“^[4] bezeichnet,
sowie die Arbeitsweise des World Wide Web Consortiums (W3C) als „Hüter“ des HTML-Standards.

Probleme

Der erste Faktor, die Browserkonkurrenz, führte dazu, dass nahezu jeder Browser versucht, jede Internetseite irgendwie darzustellen, solange sie irgendwie vage als HTML-Dokument geschrieben ist. Daher liegt die Zahl der eigentlich ungültigen, d.h. nicht standard-konformen Webseiten sehr hoch, möglicherweise höher als diejenige der gültigen.

Zum zweiten arbeitet das W3C wesentlich langsamer, als sich die Möglichkeiten des WWW erweiterten. Daher gingen die Browser-Hersteller dazu über, HTML auf eigene Faust zu ergänzen. Dieses führte (und führt), je nach Browser-Hersteller, zu unterschiedlichen Lösungen für die selbe Ergänzung. Hatten genügend Browser eine Ergänzung eingeführt, so wurde eine Lösung in den nächsten HTML-Standard aufgenommen. Gleichzeitig wurde und wird nicht jeder HTML-Standard von jedem Browser vollständig unterstützt.

Als Webdesigner müssen sie daher den Markt beobachten und festlegen, welche Browser, und welche ihrer Versionen sie unterstützen wollen, damit möglichst viele ihrer Besucher die Seite ohne Probleme betrachten können. Zu beachten ist, dass sich Anteile in ihrer Zielgruppe beträchtlich von denen der Allgemeinheit unterscheiden können.

XHTML

Bei XHTML handelt es sich um eine Portierung von HTML in XML-kompatible Syntax, daher das X am Anfang.

Die aktuellen Browser stellen sowohl HTML als auch XHTML dar. Die Beispiele in diesem Kapitel verwenden (derzeit) noch XHTML, bezeichnen es aber einfach als HTML .

Weiterführende Informationen zu HTML und XHTML finden Sie in der Wikipedia.

Die Standards Anfang 2013

Anfang 2013 lassen sich drei HTML-Standards unterscheiden:

HMTL 4.01 von 1999. Über zehn Jahre alt, entspricht dieser Standard zwar nicht mehr den heutigen Anforderungen, ist aber so etwas wie der kleinste gemeinsame Nenner, es sei denn Sie nutzen
XTHML 1.0. (…)
HTML 5 ist zur Zeit noch kein festgelegter Standard, die Weiterentwicklung findet in den beiden konkurrierenden Gruppen HTML 5 und HTML Living Standard statt.

Konzepte

Auch wenn es verschiedene Standards gibt, haben sie doch einige Konzepte gemein. Diese müssen Sie kennen, bevor es um den Aufbau der Seite geht.

Attribute

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

   <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 es, das zweite Anführungszeichen zu vergessen:

    <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 vor. .</p>
   <p>Und noch mehr Text</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.

Zeichenreferenzen

Damit ein Browser nicht bei jedem '<' oder '>' einen Tag vermutet - z.B. wenn Sie Ausdrücke wie x < 1 darstellen wollen - müssen diese Zeichen im Dokument maskiert werden. Dazu nutzen Sie Zeichenreferenzen (engl.: character entities). Eine Zeichenreferenz besteht aus der Form &+Name+;. Für die häufigsten Zeichen ist der Name wiederum die Abkürzung des englischen Wortes:

Gewünschtes Zeichen	engl. Name	Zeichenreferenz
<	lesser than	<
>	greater than	>

Folgende Zeichenreferenzen müssen Sie nicht verwenden, Sie können das Zeichen auch direkt im HTML-Code eingeben. Die Schreibweise als Zeichenreferenz ist vielleicht praktisch, wenn Sie das Zeichen nicht auf Ihrer Tastatur finden können (z.b. auf einer englischen Tastatur).

Gewünschtes Zeichen	Zeichenreferenz
Ä	Ä
ä	ä
ß	ß
€	€
©	©

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

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

Kompatibilität

Tags, die ein Browser nicht kennt, werden ignoriert - es gibt keine Fehlermeldungen. Wenn das W3C in einer zukünftigen Version 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 hüpfend dargestellt und in älteren ignoriert.

Code	Ein älterer Browser interpretiert das als:
<p>Dies ist meine erste <jump>supercoole</jump> Webseite!!!! </p>	<p>Dies ist meine erste supercoole Webseite!!!!</p>

Abbildung 29: Neue HTML-Tags und 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> <ul> <li><jump>Montag</jump> <li>Dienstag <ul>	<p>Zu den markierten Terminen sind noch Plätze im Kurs frei</p> <ul> <li><jump>Montag *</jump> <li>Dienstag <li>
In älteren Browsern geht die wichtigste Information verloren!	Durch das Einfügen des * ist auf allen Browsern erkennbar zu welchen Terminen noch Plätze frei sind.

Abbildung 30: Vorsichtiger Einsatz von neuen HTML-Tags

Kommentare

Es ist möglich, in HTML-Dateien Kommentare einzufügen. Diese werden im Browser nicht angezeigt. Sie stehen aber im Quelltext der Seite. In Kommentaren sollte also nur Dinge stehen, die auch öffentlich seien dürfen - für Login-Informationen sind Kommentare definitiv der falsche Platz.

<!-- Dieses ist ein Kommentar-Beispiel. Bitte die Zeichen beachten, in die diese Sätze eingeschlossen sind -->

Kommentare werden oft dazu genutzt, um zu Testzwecken bestimmte Teile eines Dokuments ausblenden zu können, ohne sie aus der Datei löschen zu müssen.

Struktur

Ein HTML-Dokument besteht aus drei Teilen:

der Deklaration des Dokumententyps (engl. "doctype“)
dem Kopf der Seite mit den Metadaten über die Seite selbst (engl. "head“)
dem Körper der Seite mit dem Inhalt (engl. "body“)

Die letzten beiden Teile, "head" und "body", werden von einem <html>-Tag umschlossen. Keiner der Teile darf sich wiederholen oder weggelassen werden.

Beispiel:

 <!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" lang="de">
 <head>
 <title>Titel der Seite</title>
 </head>
 <body>
 Hier steht der Inhalt.
 </body>
 </html>

Abbildung 42: Grundstruktur eines HTML-Dokuments

Doctype

Der <!DOCTYPE>-Tag steht am Anfang und gibt die Dokumenttypdefinition (DTD) an.

Je nach verwendeter Version von HTML oder XHTML ist ein anderer <!DOCTYPE> zu verwenden:

Version (Variante)	DOCTYPE
HTML 5	<!DOCTYPE HTML>
HTML 4.01 (strict)	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 (strict)	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Abbildung 42a: Einige neuere <!DOCTYPE>

In der Praxis kümmert sich das Content-Management-System oder der WYSIWYG-Editor um diese Angabe. Sollten Sie eine Webseite per Hand schreiben, sollten Sie sich für eine Version entscheiden und den <!DOCTYPE> per copy&paste einzufügen. Weitere Informationen und ältere <!DOCTYPE> finden sich in der Wikipedia^[5] und bei selfhtml^[6].

Metadaten

Der Kopf ("head") einer HTML-Datei beinhaltet die Metadaten, also die Daten über das Dokument und den Inhalt selbst. Die meisten dieser Informationen werden dem Betrachter der Seite nicht angezeigt.

<head>
 <title>Handbuch Webdesign: Eine Beispielseite</title>
 <meta name="description"
       content="Dient zur Verdeutlichung, wie Metadaten in eine HTML-Datei eingebunden werden." />
 <meta name="keywords" 
       content="HTML, Kurs, Webdesign, Webdesigner" />
</head>

Für eine valide HTML-Datei muss ein <title>-Tag vorhanden sein. Der Browser zeigt ihn im Fenster oder Tab und in den Favoriten/Lesezeichen an, Suchmaschinen in ihrer Ergebnisliste. Der Titel muß also ohne die Seite verständlich sein. 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.

Da die "meta-keywords" sehr stark missbraucht wurden (irreführende keywords, z.B. Namen der Konkurrenzfirmen), werden sie seit Jahren von den meisten Suchmaschinen ignoriert.

Der <meta>-Tag hat noch verschiedene andere Anwendungsgebiete. So wird er dafür verwendet, das Characterset des Dokuments bekannt zu geben:

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

Unicode/utf8 ist das Standard-Charset im heutigen WWW, weil es erlaubt, verschiedene Zeichensätze, also z.B. Deutsch (westeuropäisch), Polnisch (osteuropäisch) und Russisch (kyrillisch) auf ein und derselben Webseite verwenden. Bei älteren Webseiten stößt man noch auf die früher verwendeten Zeichensätze wie 'iso-8859-1, bei der Erstellung von neuen Webseiten sollten Sie nur utf8 nutzen.

Inhalt

Der <body> enthält den eigentlichen Inhalt der Webseite.

Folgende Tags nennt man blockbildende Tags weil sie im Browser immer als rechteckige Fläche angezeigt werden, als "Block". Beispiele:

Normaler Textabsatz	<p>Text text text, text text. Text text text, text text. Text text text, text text. Text und text text, text text.</p>
Haupt-Überschrift (1. Ebene)	<h1>Überschrift</h1>
Unter-Überschrift (2. Ebene)	<h2>Überschrift</h2>
Unter-Überschrift (3. Ebene)	<h3>Überschriftstext</h3>
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>~~

Der Browser stellt zwischen den blockbildenden Tags jeweils einen Abstand dar. Dieser kann per CSS verändert oder abgeschafft werden.

Die „typische“ Struktur

Auch wenn Webseiten noch so unterschiedlich aussehen, lässt sich ein typisches Grundgerüst zeigen:

oben stehen Name und Logo der Seite
für die Navigation sind eine oder mehrere Listen vorhanden, oft unterhalb des Logos oder an einer der beiden Seiten
auf der anderen Seite findet sich oft ein vermischter Bereich mit Links zu anderen Seiten usw.
in der Mitte der Seite steht der eigentliche Inhalt
am unteren Ende finden sich notwendige, aber nebensächliche Links auf Impressum, Datenschutz und anderes

Die Inhalte

Text auszeichnen

Format für kleinere Text-Abschnitte müssen Sie innerhalb eines Blocks verwenden, sie werden auch als inline-Tags bezeichnet:

betonter Text	Eine <em>wichtige</em> Sache
besonders betonter Text	und eine <strong>besonders wichtige</strong> Sache
Unterstrichener Text	Dafür gibt es zwar einen Tag, Sie sollten ihn aber nicht verwenden, denn unterstrichener Text wird zu leicht mit einem Link verwechselt.

Tabelle 2: Inline-Tags

Diese inline-Tags können ineinander verschachtelt werden:

   <p>Absatz mit 
   <strong>fett und <em>fett-kursiv</em></strong> ist in Ordnung </p>

Den Tag, den man zuletzt geöffnet hat, schließt man zuerst.

Bilder

Wenn in einer Webseite Bilder verwendet werden, so sind diese jeweils als eigene Datei gespeichert und werden im Dokument nur eingebunden. Wenn Sie eine gesamte Webseite speichern wollen, müssen Sie aufpassen, ob die Bilder mit abgespeichert wurden! 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 den Fall, dass das Bild nicht angezeigt werden kann)	<img alt="neu" src="neu.gif">
Bild mit Größenangabe (beschleunigt in manchen Browsern das Layout der restlichen Seite)	<img width="10" height="5" src="neu.gif">

Tabelle 3: Varianten des img-Tags

Bild-Dimension

Noch ein Wort zur Größe von Bildern: Bei den Breiten- und Höhen-Angaben (width und height) sollten Sie immer die echte Größe des Bildes (gemessen in Pixel) angeben. Wieso? Betrachten wir die zwei möglichen Fälle:

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
Größer dargestellt

Im ersten Fall wird das Bild im Browser nicht gut aussehen: in einem Bild, das zu groß dargestellt wird, werden die einzelnen Pixel sichtbar. Kompressions-Artefakte ? das sind Bildfehler, die durch die Kompression entstehen ? werden besser sichtbar. In Abbildung 33 sehen Sie typische jpeg-Artefakte rund um die Nase.

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

Kleiner dargestellt

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:

Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
?Beste? Version des Bildes archivieren
Bild im Grafikprogramm auf die richtige Dimension und Format bringen
Fertiges Bild in den Web-Ordner kopieren
<img>-Tag in das HTML-Dokument einfügen.

Bilder und Layout

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.

Abbildung 35: Bild mitten im Absatz

Besser ist es, das Bild in einen eigenen Absatz zu setzen, und den Absatz dann z.B. zu zentrieren:

Bildformate

Als Bildformate für Webseiten können nur Pixel-Formate verwendet werden:

gif	Palette von 255 Farben + 1 Transparenz-Farbe (kein Alpha). Ein 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

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

Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
Das Ergebnis, ein Bild mit hoher Auflösung + Dateigröße,
Format z.B. tiff oder jpg mit geringer Kompression archivieren
Bild im Grafikprogramm auf die richtige Dimension und Format bringen;
Ergebnis: Bild im Format gif, jpg, png, Dateigröße möglichst klein (=web-tauglich).
Fertiges Bild in den Web-Ordner kopieren
<img>-Tag in das HTML-Dokument einfügen

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

Links

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 Wikibooks-Seite einen Link setzen, Sie können aber nicht von der Wikibooks-Seite zu Ihrer Seite einen Link setzen. Bevor Sie einen Link setzen, müssen Sie sich über zwei Dinge klar werden:

Welcher Text auf Ihrer Webseite soll anklickbar sein?
Wohin soll der Link führen?

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	Suchmaschine <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" alt="Home" /></a>

Tabelle 5: der a-Tag für Hyperlinks

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

Relative URLs

Das zweite Beispiel in Tabelle 5 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.

URL des HTML-Dokuments	http://www.meinefirma.at/index.htm
relative URL in diesem Dokument	seite2.htm
berechnete absolute URL	http://www.meinefirma.at/seite2.htm

Abbildung 37: Umrechnung einer relativen URL in eine absolute URL

Das Prinzip hinter relativen und absoluten URLs kennen Sie vielleicht schon von relativen und absoluten Pfadangaben. Relative URLs können auch Ordnernamen enthalten, und den speziellen Ordnernamen .. für den übergeordneten Ordner.

URL des HTML-Dokuments	http://www.meinefirma.at/prod/tee.htm
relative URL in diesem Dokument	../kontakt/mail.htm
berechnete absolute URL	http://www.meinefirma.at/kontakt/mail.htm

Abbildung 38: Umrechnung einer relativen URL mit ".." in eine absolute URL

Die Verwendung von relativen URLs bringt folgenden Vorteil mit sich: Wenn die Website auf eine neue Adresse übersiedelt wird, funktionieren alle Links ohne Änderung weiterhin, wie Abbildung 39 zeigt.

URL des HTML-Dokuments	http://www.neuefirma.de/prod/tee.htm
relative URL in diesem Dokument	../kontakt/mail.htm
berechnete absolute URL	http://www.neuefirma.de/kontakt/mail.htm

Abbildung 39: relativer Link nach der Übersiedelung auf eine neue Adresse

Bild als Link

Statt des Textes kann bei einem Link auch ein Bild stehen, Abbildung 40 zeigt den dazu notwendigen Code.

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

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.

Deep Link

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.

Frames verhindern Deep Links

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.

Anker

Sie können innerhalb der Webseite sogenannte Anker (engl. anchor, <a>) setzen, die dann gezielt angesprungen werden können. Das ist besonders bei längeren Webseiten sinnvoll.

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>

Wenn Sie wissen, dass in einer Seite draußen am Web ein Anker vorkommt, dann können Sie gezielt einen Link auf diesen Anker setzen.

Tabellen

Um eine Tabelle zu erzeugen müssen Sie die Tags <table>, <tr> und <td> richtig ineinander verschachteln.

<table border="1">
    <tr>    
      <td>Freitag</td>    
      <td>Samstag</td>    
      <td>Sonntag</td>
    </tr>
    <tr>    
      <td>lernen</td>   
      <td>lernen</td>    
      <td>lange schlafen</td>
    </tr>
</table>

Abbildung 44: HTML-Code für eine Tabelle

Zellen verbinden

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	30

HTML-Tabellen wurden früher in Webseiten auch für das Layout der Seite verwendet, heute verwenden Sie dafür CSS.

Kein HTML

Farben und Hintergrundbilder gehören zum Aussehen einer Seite und werden daher im CSS definiert,
ebenso die Positionierung (absolut, relativ) der Elemente,
und Dinge wie Schriftgröße, -art usw.

Veraltete Tags

In den verschiedenen Versionen von HTML wurden Tags nicht nur hinzugefügt, sondern auch als veraltet (engl. "deprecated") gekennzeichnet. Hier die wichtigsten, die Ihnen begegnen können. Sie selbst sollten diese Tags nicht nutzen!

<i> Kursiver Text (engl. "italic"), ersetzt durch: hervorgehobenen Text (engl. "emphasized", <em>)
<b> Fetter Text (engl. "bold"), ersetzt durch: besonders hervorgehobenen Text (engl. "strong", <strong>)
<font> Schriftart -farbe, -größe usw., ersetzt durch: CSS

Zusammenfassung

Sie sollen in diesem Kapitel gelernt haben:

was für eine Art Sprache HTML ist und wofür sie eingesetzt wird.
wie sich HTML von XHTML unterscheidet.
was Tags sind und in welche beiden Gruppen sie eingeteilt werden können.
wie ein HTML-Dokument aufgebaut ist.
wie eine Webseite für gewöhnlich strukturiert wird
wie sich einzelne Elemente eines Dokumentes sinnvoll auszeichnen lassen
was Sie nicht mit HTML sondern durch CSS erreichen sollten

In den vorherigen Kapiteln haben Sie gelernt, eine Webseite zu planen, die Inhalte auszuwählen und ihnen mit Hilfe von HTML Struktur zu verschaffen. Bevor Sie sich dem Aussehen widmen, sollten Sie sich zunächst über Farben und ihre Wirkung im Klaren sein.

Das WWW und Farben

Monochrom-Bildschirme wie der des IBM portable PC können nur eine Farbe darstellen.

Seitdem der Mensch den Farbbildschirm erfunden hat, und den Computer nicht mehr über braune oder grüne Monochrom-Bildschirme bedienen muss, ist Farbe für die Gestaltung von Benutzerschnittstellen sehr viel wichtiger geworden. Seitdem der Mensch das Internet erfunden hat, und das dazugehörige World Wide Web, wurde Farbe auch Bestandteil des Webdesigns. Zunächst waren die Möglichkeiten durch die geringen Fähigkeiten der ersten Browser und durch die sehr niedrige Bandbreite beschränkt. Seriöse oder technische Angebote, die auf den schnellen Informationsaustausch angewiesen sind, verzichteten auf die damals sehr innovativen Möglichkeiten der Browser, Text in verschiedenen Farben auszugeben, ein Hintergrundbild zu laden oder eine GIF-Animation, weil diese Meta-Informationen für den Browser sich den gleichen Raum in der Übertragung geteilt haben wie die richtigen Informationen für den Benutzer. Und mit einem Modem von 28 Baud oder 56kb/s Leistung konnte man das durchaus spüren.

Dass heute schnelles Internet fast in allen Großstädten und Ballungsräumen zur Verfügung steht und Bandbreiten bis zu 25.000 kb/s, 400-mal so schnell wie ein Modem der späten 90er, kein Thema mehr sind, hat die Gestaltungsfreiheit des Internets enorm erweitert. In dem unendlichen Feld der Möglichkeiten, seine Website zu gestalten, ist es im Interesse der Benutzer und damit auch des Betreibers wichtig, dass in diesen Möglichkeiten Ordnung geschaffen wird.

Die digitale Farbe

Die Weiterentwicklung von Bildschirmen, Betriebssystemen und Grafikkarten hat einige "magische Zahlen" hervorgebracht, die Sie kennen sollten.

Ein Bildschirm läuft heute im so genannten „True Color“-Modus und kann über 16 Millionen verschiedene Farben und Farbstufen darstellen.
Viel mehr als „True Color“, Farben in 32 bit, kann das menschliche Auge nicht wahrnehmen, daher der Name.
Auf dem Monitor werden die gleichen drei Farben verwendet wie für das Licht an sich: rot, grün und blau. Der Anteil dieser drei Grundfarben bestimmt die Ausprägung der eigentlichen Farbe.
Der Anteil eines der drei Farben kann auf dem Computer von 0 bis 255 reichen.
Die Wertigkeit von 0 bis 255 kann in 8-bit bzw. in einem Byte dargestellt werden. Ein Farbwert belegt also mit rot, grün und blau insgesamt drei Byte. 3 x 8 = 24. Ein Bit hat zwei Zustände, 2²⁴ = 16.777.216 verschiedene Farben.

Diese Fakten geben einen nützlichen Überblick und ein Verständnis von Farbe in digitalen Systemen. Sie sehen, um ein bisschen Arithmetik kommen Sie nicht herum. Um die Verwendung einer Farbpalette werden Sie auch nicht herumkommen, denn die exakte Berechnung einer Farbe aus dem binären Anteil von drei anderen Farben übersteigt die Möglichkeiten menschlicher Fantasie. Anhand des Farbkreises können Sie aber eine Farbe auf der Palette ungefähr verorten. Und eine Grundregel können Sie sich dennoch merken: Wenn der Anteil aller drei Farben genau gleich ist, ergibt dies einen Grauton, deren Helligkeit von der Höhe dieser drei gleichen Zahlen abhängt.

Darstellung von Farben im Webdesign

Hexadezimal

Die am häufigsten zu findende Darstellung einer Farbe im Web ist die Hexadezimal-Darstellung der drei Farbanteile. Das Attribut color in HTML oder die gleichnamige Eigenschaft in CSS kündigt eine solche Darstellung an. Eingeleitet wird sie durch ein Doppelkreuz # gefolgt von neun Hexadezimalziffern.

Beispiel

#FFFFFF

Dieser Farbwert, der für die Farbe Weiß steht, besteht aus drei zweisteligen Hexadezimalzahlen. Hexadezimal sind Zahlen zur Basis 16. Da wir aber nur 10 Dezimalziffern kennen, schreibt man die 6 Zahlen mit dem Dezimalwert 10 bis 15 in Hexadezimalzahlen mit den Buchstaben A bis F.

Hexadezimalzahlen und ihre dezimale Entsprechung
Hexadezimal	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F
Dezimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15

Von den drei zweistelligen Hexadezimalzahlen steht die erste zweistellige Hexadezimalzahl für den roten, die zweite für den grünen und die dritte für den blauen Farbanteil der Gesamtfarbe. Das hexadezimale F steht also für den Dezimalwert 15, und die zweistellige Hexadezimalzahl FF entspricht dezimal (15 x 16) + 15 = 255, dem Maximum für einen Farbanteil. Alle drei Farbanteile haben den Wert 255, also ist die dargestellte Farbe weiß.

rgb(r, g, b);

Wenn Ihnen die Hexadezimaldarstellung zu kompliziert und zu abstrakt erscheint, können Sie in CSS auch eine Prozedur aufrufen, die drei dezimalen Farbwerte für Rot, Grün und Blau in dieser Reihenfolge akzeptiert. Diese Prozedur heißt rgb();.

color: rgb(255, 255, 255);

Außerdem versteht die Prozedur Prozentangaben, beispielsweise rgb(100%, 100%, 100%);.

hsl(h, s, l);

Ein anderes Modell zur Farbdarstellung bietet Hue, Saturation, Lightness, also Spektrum, Sättigung, Helligkeit. Das Spektrum ist eine Zahl von 0 bis 360, wobei 0 bzw. 360 ein Rot ergeben, 120 ein Grün, und 240 ein Blau. Zwischen diesen Schlüsselwerten finden Sie die Farben des gesamten Spektrums. Die Sättigung bestimmt sich durch einen Wert zwischen 0%, der vollkommenen Blässe, und 100%, der stärksten Sättigung. Ebenso befindet sich die Helligkeit auf einer Skala von 0%, das absolute Schwarz, und 100%, das absolute Weiß. Wie so oft finden sich die Farben in den grauen Zwischentönen.

color: hsl(360, 0, 0); /* schwarz */

rgba und hsla

Mit einem vierten Wert geben Sie der Farbe eine Deckkraft. 0% für vollständige Transparenz, dann ist die Farbe gar nicht zu sehen. 100% für vollständige Deckung, dann können Sie aber auch rgb(); oder hsl(); verwenden.

Eine Farbauswahl treffen

Die Auswahl der Farben wird Ihnen abgenommen, wenn ein Unternehmen relativ strenge Vorgaben macht, welche zum Corporate Design gehören. Dann brauchen Sie sich um die Auswahl keine Gedanken mehr zu machen. Manchmal jedoch ist aus irgendeinem Grund die Weiterentwicklung des Farbschemas notwendig, weil zum Beispiel die Richtlinien keine Bestimmungen für eine Website enthalten, oder weil eben diese Richtlinien eine Erweiterung wünschen.

Dazu gibt es eine Reihe von Software, die Ihnen das Zusammenstellen einer Palette nach Grundsätzen der Farbenlehre erleichtert. Sie müssen also nicht erst Goethes Farbenlehre studieren, um zu einem harmonischen Ergebnis zu kommen.

Wichtig bei der Auswahl von Farben: Sie müssen zueinander passen. Hart gegeneinander geschnittene Farben, wie Rot-Blau, Schwarz-Weiß, oder Grün-Rot, sind doch nur im Interesse der Deutlichkeit zu verwenden (z.B. schwarzer Text auf weißem Hintergrund) und ansonsten wegen der Anstrengung, die sie für die Augen bedeuten, eher zu vermeiden. Seit etwa 2005 hat übrigens kein Webdesigner mehr monochrome Farbgebung für eine Website verwendet. Seit 2011 treten Farben auf Webseiten in den Hintergrund zugunsten einer klaren Kommunikation, da Webseiten auf Mobilgeräten vor allem mit Funktionen und Informationen auf sich aufmerksam machen.

Software zur Farbauswahl

Color Scheme Generator 2
Color Scheme Generator 3
ColorSchemer (kostenpflichtige Software)
ColourLovers - Experimentieren Sie mit Farben, Paletten und Mustern.

Seriosität und Professionalität

Weiß (#FFFFFF)	Blau (#0000FF)
Hellblau (#1E90FF)	Grau (#E0E0E0)

Seriosität und Professionalität gehen einher mit einer gewissen Distanz und Mäßigung. Grundsätzlich stehen Ihre seriösen Dienste jedem Kunden offen. Diese Farben drücken dies am deutlichsten aus, darum wählten die nachfolgend genannten Beispiele diese Farben am häufigsten.

Beispiele

Deutsche Bank

Ausschließlich Fotos und Grafiken brechen aus dem Farbschema der Deutschen Bank aus. Ihre Qualität jedoch unterstreicht den seriösen Charakter des Dienstleisters.

Microsoft

Eines der größten Softwareunternehmen verlässt sich auf cyan und weiß. Doch auch hier gestalten Grafiken und Fotos das Nutzererlebnis lebendiger, z.B. bei Windows Live.

Fedora Project

Das Linux-Projekt Fedora ist das Betriebssystem, dass sich vornehmlich an erfahrene Anwender und Serverbetreiber richtet.

Die Farbgebung ist subtil, im Vordergrund steht eine sachliche und nüchterne Struktur, die allein durch professionelle Fotos in Agenturqualität oder einzelne farbige Spots lebendig wird.

Energie und Dynamik, Auffälligkeit

Starkes Blau	Goldorange
Rot	Schwarz
Weiß	Knallgelb

Unternehmen, die auf starke Aufmerksamkeit setzen und ihre Kunden farblich geradezu „anschreien“ wollen, setzen auf hart geschnittene Farben, die zumeist auch noch komplementär zueinander sind. Das heißt, die Farben liegen sich im Farbkreis gegenüber. Gebräuchlich sind diese Farben vor allem im mittelgroßen Einzelhandel, der sich mit seiner Werbung an den Konsumenten richtet und sich Aufmerksamkeit verschaffen will.

Beispiele

Die Saturn und Media Markt Gruppe

Auch wenn die MediaMarkt Saturn GmbH alles versucht, es nicht öffentlich werden zu lassen: Media Markt und Saturn gehören zum gleichen Unternehmen. Beide Geschäftsketten verwenden gegeneinander geschnittene Farben. Blau und das komplementäre Orange werden zusammen mit dem edlen Schwarz von Saturn verwendet, während Media Markt sich auf rot, schwarz und weiß verlässt.

Penny Markt und Kaisers bzw. Tengelmann

Rot, goldorange und Blautöne sind hier die Farben der Wahl, um Aufmerksamkeit zu erzielen. Doch Produkte und Verbraucherinformation stehen hier im Vordergrund.

Bei Aldi Süd, eines der beiden Aldi-Handelsunternehmen, verlässt man sich seit Jahren auf blau und orange als Farben des Corporate Designs, auch wenn sie hier sehr dezent eingesetzt werden.

Variierende Farbgebung

Wird durch die Farbgebung eine weitere Information transportiert, kann sich die Farbe des Logos und auch der gesamten Website ändern. Allerdings wird hiermit das Markenbild verwaschen.

Beispiel

Sat.1

Der Sender des Konzerns ProSieben.Sat1 Media GmbH verwendet verschiedene Farben, um die verschiedenen Rubriken ihres Fernsehprogramms zu kennzeichnen. Die Metapher des bunten Sat.1-Balls hat man hier weiterentwickelt. Auch die BBC verwendet für ihre verschiedenen Rubriken verschiedene Farben, doch das Logo ändert sich dabei nicht. Einen Mehrwert bieten solche Farbwechsel nur bei großen Informationsangeboten und Portalen mit mehreren Rubriken zur Orientierung.

CSS

Einleitung

Stylesheets sind vielleicht das wichtigste Werkzeug für Webdesigner. Mit Stylesheets (auch Formatvorlagen, oder CSS genannt) können Sie Ihre Gestaltungsmöglichkeiten von Webseiten wesentlich erweitern. Aber: Um CSS verwenden zu können, müssen Sie den HTML-Code Ihrer Webseite verstehen.

Wenn Sie an größeren Websites mit vielen einzelnen Seiten arbeiten, bieten Ihnen Stylesheets die Möglichkeit, die Seiten einheitlich zu gestalten und die Gestaltung von der Inhaltlichen Redaktion zu trennen. Das Stylesheet wird dabei von der DesignerIn erstellt, die HTML-Seiten von den ProgrammiererInnen oder RedakteurInnen.

Wenn dies Ihre erste Begegnung mit Stylesheets ist, können Sie die Kapitel Klassen, IDs und Layout mit Stylesheets überspringen, und diese Details später lernen.

Geschichte

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> <link rel="stylesheet" type="text/css" href="fh.css"/> <title>Titel: Das Studium</title> </head><body> <h1>Das Studium</h1> <p>Studienziel ist es, breit gefächerte technische und wirtschaftliche Kompetenzen... </body></html>	h1 { font-family: Arial; color: blue; } p:first-letter { font-size: large; }

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 ernste Probleme machte, war 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),^[7] kann also heute getrost ignoriert werden.

Unsere erste CSS-Anweisung

Noch sieht alles schwarz-weiß aus. Aber das kann sich ändern. Nun sagen wir dem Browser, dass der Text im Absatz fett und blau sein soll:

html

<p>Hallo Welt!</p>

css-Anweisung

p {color: blue; font-weight: bold;}

Das sieht dann so aus:

Hallo Welt!

Syntax von Stylesheets im Detail

CSS-Anweisungen setzen sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt), und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:

/* einzeilig */
selektor {eigenschaft: wert;}

/* mehrzeilig */
selektor {
  eigenschaft_1: wert;
  eigenschaft_2: wert;
  eigenschaft_3: wert;
  …
  eigenschaft_x: wert;
}

Beispiele dazu:

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

Was bedeuten diese Stylesheet-Anweisungen?

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

Zweiter Absatz: Die Tags <h1> und <h2> aus dem HTML-Dokument sollen mit der Schriftart Arial dargestellt werden, wenn diese Schriftart nicht vorhanden ist, mit Helvetica, wenn die nicht vorhanden ist, mit irgendeiner serifenlosen Schrift. Außerdem soll die Schrift in hellblauer Farbe dargestellt werden.

Dritter Absatz: Die gesamte Seite (<body>) soll links um 150 Pixel eingerückt werden, die Hintergrundfarbe der Seite ist weiß.

Was kann man stylen?

Man kann jeden HTML-Tag (html, body, div, p, h3, table, ul …) via Stylesheet beeinflussen. Will man noch genauer arbeiten, muß man Klassen oder IDs definieren

Welche Formatierungsanweisungen es gibt, können Sie in selfhtml nachschlagen; im Folgenden werden wir die wichtigsten behandeln.

CSS-Kommentare

Bei umfangreicheren Stylesheets ist es durchaus vorteilhaft, Kommentare einzufügen. Damit fällt es später leichter, nachzuvollziehen, was man mit der jeweiligen Anweisung beabsichtigt hat. Kommentare können außerhalb und innerhalb der geschweiften Klammer stehen:

body {
 // einzeiliger Kommentar
 background-color:white;
 color:black;
}

body {
 background-color: /* einzeiliger Kommentar, der auch mitten in der Zeile stehen kann */ white;
 color:black;
}

/*
ein Kommentar, der über
mehrere Zeilen geht und
natürlich auch sehr 
interessant ist
*/

Sehr praktisch kann man Kommentare auch dazu verwenden, bestimmte Anweisungen innerhalb eines Stylesheets auszukommentieren! So können kurzfristig Stylesheet-Anweisungen deaktiviert werden:

body {
 background:white;
 color:black;
 /* border:1px solid red; */
}

Verbindung zwischen HTML und CSS

Es gibt drei unterschiedliche Arten, CSS-Informationen in (x)HTML-Dateien einzubinden:

externe Stylesheets

Will man, dass mehrere HTML-Seiten gleich aussehen, sollte man ein externes Stylesheet verwenden. Ändert man in diesem Stylesheet etwas, hat dies unmittelbar Einfluß auf alle damit verknüpften HTML-Dateien. Die Datei muß mit der Datei-Endung .css (demostyle.css) gespeichert werden, damit sie von den Browsern als Stylesheet erkannt wird. Sie wird im <head>-bereich der jeweiligen HTML-datei folgendermaßen eingebunden:

<head>
 ...
   <link rel="stylesheet" type="text/css" href="pfadZumStyle/mystyle.css" media="all"/>
 ...
</head>

interne Stylesheets

Interne Stylesheet haben 2 wichtige Anwendungsgebiete:

die Stylesheet-Informationen beziehen sich nur auf ein HTML-Dokument
das HTML-Dokument nutzt Informationen des externen Stylesheets, man möchte jedoch für dieses spezielle Dokument andere CSS-Einstellungen verwenden als für die restlichen Dokumente
1. beispielsweise könnten auf einer Website alle Dokumente mit weißem Hintergrund dargestellt werden - nur ein Dokument soll einen roten Hintergrund erhalten; dies könnte man gut mit einem internen Stylesheet erreichen, in dem nur für die Hintergrundfarbe ein neuer Wert angegeben ist…

interne Stylesheets werden folgendermaßen im <head>-bereich der jeweiligen HTML-datei eingebunden:

<head>
 ...
   <style type="text/css" media="all">
     body {color:#000;background:#fff;font:0.8em/1.4 "Lucida Grande",Verdana,Sans-Serif;}
     ...
   </style>
 ...
</head>

Inline-Stylesheets

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>

Vorsicht! Diese Art, CSS direkt in einen bestimmten Tag einzubinden, sollte nur ganz selten gemacht werden! Sie widerspricht der Forderung, Inhalt und Aussehen möglichst voneinander zu trennen und somit die HTML-Seiten einfach pflegbar zu machen. Stellen Sie sich vor, Sie haben in 100 Dokumenten innerhalb diverser Tags eine Farbangabe gemacht; jetzt wollen Sie die Farbe ändern und sind deswegen gezwungen alle Dokumente zu öffnen und zu durchsuchen – keine angenehme Art, sich die Zeit zu vertreiben!

Die Cascade

Wie gerade gesehen, können Sie also auf drei Arten Style-Anweisungen in eine HTML-Datei einbinden. Was passiert nun, wenn sich die verschiedenen Style Angeben widersprechen?

Dann tritt das ein, was den Cascading Stylesheets ihren Namen gegeben hat: Die Cascade, die festlegt, welcher CSS-Befehl Vorrang vor einem anderen hat:

Die Angaben in einem einzelnen Tag haben immer Vorrang.
Danach folgen die lokalen Angaben im head-Bereich
und erst zum Schluss die externe Datei.

Nach diesem Einblick in die Syntax von CSS können wir nun erste Anwendungsbeispiele verstehen.

Vererbung

Wie ein Kind von seinen Eltern bestimmte Eigenschaften erben kann, können auch HTML-Elemente Eigenschaften von übergeordneten Elementen übernehmen. Dazu ein Beispiel:

CSS-Angabe:

body {
 font-family:Georgia;
 font-size:1em;
 color:red;
}

HTML-Code (Ausschnitt):

<body>
 <h3>eine überschrift</h3>
 <p>ein ganz normaler Paragraph</p>
 <ol>
   <li>Listeneintrag</li>
   <li>Listeneintrag</li>
 </ol>
 <table border="1">
   <tr>
     <td>Typ</td>
     <td>Jahrgang</td>
     <td>Datum</td>
   </tr>
   <tr>
     <td>Brompton</td>
     <td>1997</td>
     <td>20.3.2007</td>
   </tr>
 </table>
 </body>

So schaut es aus:

eine überschrift

ein ganz normaler Paragraph

Listeneintrag
Listeneintrag

Typ	Jahrgang	Datum
Brompton	1997	20.3.2007

Die Angaben zu Schrift (Georgia), Schriftgröße (1em) und Farben (red) wurden nur bei body gemacht! Weil aber alle (sichtbaren) Elemente einer HTML-Datei innerhalb des <body>-Tags stehen müssen, erben diese folglich die CSS-Eigenschaften, die man bei body angegeben hat... Will man aber z.B. der Überschrift eine andere Farbe geben, muß man dies explizit machen:

h3 {color:blue;}

Tip: Das Vererben kann man sehr gut dazu nutzen, Abstände und Rahmen zu eliminieren, deren Default-Einstellungen bei jedem Browser unterschiedlich sind! Dadurch wird das Aussehen in verschiedenen Browsern einheitlich(er)…

* {margin:0;padding:0;border:none;}

Der Stern (*) bedeutet, dass dies für alle Elemente gilt. Will man bei bestimmten Elementen wieder Margins, Paddings oder Rahmen haben, muss man diese explizit setzen!

Ich setze diese Anweisung ganz am Anfang meiner CSS-Anweisungen - und habe damit eine "Tabula Rasa" zum Designen…

Texte und Farben mit Stylesheets

In diesem Kapitel lernen Sie die wichtigsten Formatierungs-Anweisungen von CSS für Schriftarten, Absätze, Links und Farben kennen. Dabei wird immer wieder das selbe HTML-Dokument verwendet, der Code ist hier abgebildet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
 <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
 <title>Titel der Seite</title>
</head>
<body>
 <p>dieser Paragraph wird via CSS geändert!</p>
</body>
</html>

Schriftfamilie, Schriftgröße

Zuerst wollen wir die Schriften im Dokument festlegen: Eine mit Serifen für den Fließtext und eine serifenlose Schrift für Überschriften:

1. body {
2.   font-family: Georgia,Times,serif;
3.   font-size: 0.9em;
4. }
5. h1,h2 {
6.   font-family:"Trebuchet MS",Verdana,Arial;
7. }
8. h1 { font-size: 180%; }
9. h2 { font-size: 150%; }

In Zeile 1 bis 4 von Listing 2 werden zwei Anweisungen für alle Elemente innerhalb des <body>-Tags gegeben: 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 serif ist ein CSS-Kürzel für irgendeine Serifen-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 Ems als Maßeinheit. Alternativ wäre auch eine Angabe in Punkt (pt), Pica (pc), Inch (in), Millimeter (mm), Zentimeter (cm), Pixel (px), iX-Höhe der aktuellen Schrift (ex), Prozent (%).

Viele dieser Maßangaben kommen aus dem Druck-Bereich und machen eigentlich am Bildschirm keinen Sinn… sinnvolle Maßangaben sind: px (dazu mehr etwas weiter unten), em (vielleicht die beste Maßeinheit) und %;

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:

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

Gibt man die Schriftgrößen in Pixel (px) an, hat dies den großen Nachteil, dass Benutzer, die mit dem Internet Explorer 5 oder 6 die Website betrachten, die Schriftgröße nicht ändern können! – aus diesem Grund sollte man diese Maßeinheit so lange nicht verwenden, bis der Internet Explorer 7 auf der Mehrzahl von Windows-Rechnern installiert ist (oder man die Leute davon überzeugt hat, dass es viele sehr viel bessere Browser gibt ;-))

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 vergrößern oder verkleinern (falls deren Breite und Höhe ebenfalls in Ems oder Prozent angegeben sind!)

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:

p {text-align:right;}

text-align verändert die Ausrichtung des Texts im Absatz: left, right, center oder justify (Blocksatz).

Farbangaben

Text – aber auch Rahmenkanten – können via CSS eingefärbt werden. Dazu gibt es gleich mehrere Möglichkeiten:

reservierte Farbnamen

Es gibt eine lange Liste mit Farbnamen, die (angeblich) die meisten Browser erkennen. Dies ist jedoch nicht sehr zuverlässig! Will man genau einen bestimmten Farbton angeben, sollte man diesen in RGB-Werten oder Hexadezimal-Werten angeben.

Um jedoch schnell mal etwas farbig zu machen, sind diese Angaben sehr praktisch:

 h2 {color:red;background:green;}
 p.wichtig {color:blue;border-bottom:1px solid red;}
 h1 {color:maron;background:lime;}

RGB-Werte

RGB-Werte können in Prozent (%) oder in Werten von 0 bis 255 angegeben werden:

 h3 {color:rgb(40%,50%,90%)}
 div#zitat {color:rgb(0,255,40)}

Hexadecimal-Werte

Hexadezimal-Werte benutzen eine 6-stellige "Zahlenreihe" (#RRGGBB) um einen Farbwert wiederzugeben; häufig ist es etwas einfacher, einen Farbwert z.b. aus Photoshop zu kopieren als die etwas mühsamer RGB-Schreibweise… Modernen Browsern ist es egal, ob Sie die Farbangabe hexadezimal oder als RGB-Wert machen!

 h4 {color:#dcdcdc}
 p#zitat strong {background-color:#EE99BF;}

Klassen und IDs

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 - Klassen oder IDs - definieren:

Klassen

So sieht die Anweisung im Stylesheet aus:

.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 normalen HTML-Tag können Sie nun diese Klasse zuweisen. Dies geschieht mit dem Attribut class und dem Namen der speziellen Klasse.

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

IDs

Ids bewirken auf den ersten Blick das gleiche wie Klassen:

 #wichtig { color: red; }

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

auch hier erscheinen die Worte besonders interessante rot;

Ids dürfen jedoch pro HTML-Dokument nur einmal vorkommen! Sie sind vergleichbar mit einem Personalausweis - auch dieser wird nur für eine Person ausgestellt… (hat man mehrere HTML-Dokumente, kann natürlich in jedem dieser Dokumente einmal die gleiche ID vorkommen!)

Die aktuellen Browser sind (noch) relativ tolerant, wenn man innerhalb eines Dokumentes mehrmals die gleiche ID verwendet – fatal wird es, wenn man versucht, via Javascript genau ein Element anzusprechen (getElementByID()) – dann funktioniert wahrscheinlich überhaupt nichts!

Verschachtelte Elemente

Verschachtelte Elemente (descendant selectors) ermöglichen es, nicht nur Elemente mit bestimmten Klassen oder IDs via CSS zu "stylen", sondern auch Elemente, die sich innerhalb von den Eltern-Elementen befinden. Hier ein einfaches Beispiel dazu:

 <div class="marginale">hier ein einfacher Text, der die <strong>Beziehung</strong> verdeutlichen soll</div>

Will man dem Wort Beziehung, das im gezeigten Beispiel durch den Tag "<strong>" ausgezeichnet ist, via CSS ein besonderes Aussehen geben, braucht man in der CSS-Anweisung nur folgendes schreiben

 .marginale strong {background:blue;color:white;}

Diese CSS-Anweisung veranlaßt den Browser, jedes <strong>-Element innerhalb des divs mit der Klasse "marginale" mit einem blauen Hintergrund darzustellen;

hier ein einfacher Text, der die Beziehung verdeutlichen soll

Dies kann man natürlich beliebig weitertreiben:

 .marginale li li strong {border:1px solid red;}

Diese CSS-Anweisung zwingt den Browser, <strong>-Elemente, die innerhalb einer Liste einer Liste, innerhalb der divs mit der Klasse "marginale" vorkommen mit einem 1px starken, roten Rahmen darzustellen…

Die Möglichkeit von CSS auch verschachtelte Elemente anzusprechen ist extrem praktisch! Man muss nicht jedes Element explizit kennzeichnen – manchmal ist dies auch gar nicht möglich (z.b. bei Content Management Systemen oder Wikis!)

Feinjustierung

Man kann die Auswahl der verschachtelten Elemente noch genauer einstellen:

der liebe Internet Explorer – zumindest bis zur Version 6 – erkennt diese Formatierungen leider nicht!

direktes Kind

damit kann man Elemente "stylen", die die direkten Kinder eines Elementes sind:

div.marginale > strong {background:blue;color:white;}

Hier wird das Wort Beziehung blau hinterlegt, weil der Tag <strong> ein direktes "Kind" von ".marginale" ist!

<div class="marginale">hier ein einfacher Text, der die <strong>Beziehung</strong> verdeutlichen soll</div>

hier ein einfacher Text, der die Beziehung verdeutlichen soll

Hier wird das Wort Beziehung NICHT blau hinterlegt, weil der Tag <strong> kein direktes "Kind" von ".marginale" ist!

<div class="marginale">hier ein einfacher Text,  der <em> die <strong>Beziehung</strong> verdeutlichen </em> soll</div>

hier ein einfacher Text, der die Beziehung verdeutlichen soll

benachbarte Kinder

zum "Stylen" eines Elementes, das direkt einem vorhergehenden folgt:

p + p {margin:0;text-indent:2em;}

die Anweisung bewirkt folgendes: Treten 2 Paragraphen direkt hintereinander auf, wird der 2. Paragraph ohne Abstand zum ersten dargestellt; gleichzeitig wird in der 1. Zeile des 2. Paragraphen der Text um 2em eingezogen

Lorem ipsum sea ad nisl vidit facete, mea tota laoreet ad, est no prompta salutatus. Vis et doctus habemus postulant, usu suscipit assueverit in, an mel iriure omittam adversarium. Vel et labore nemore referrentur, mazim vivendo consetetur vim id. No vix repudiandae suscipiantur necessitatibus. Brute aliquid laoreet an pri.

Epicurei percipit evertitur id vel, at vim elit invidunt. Ad sea tantas disputando. Laudem lobortis splendide an quo. Sed no timeam sapientem. Inani suscipiantur mei ea, cu movet interpretaris mel. Ea vim velit zzril dissentias, nec brute iudicabit eu, volumus perpetua intellegebat an pro.

CSS Box

CSS geht davon aus, das jedes sichtbare Element einer HTML-Datei eine Element Box erzeugt. Darin befindet sich der eigentliche Inhalt (z.b. ein Wort oder ein Bild); dieser Inhalt kann durch paddings, border oder margins von den umgebenden Elementen abgegrenzt werden:

innere Abstände (padding)

Durch padding erzwingt man einen Abstand vom Inhalt zum Rand der Element Box:

<div id="demo">der Innenabstand</div>

div#demo {
  width:6em;
  padding-top:1.5em;
  padding-right:0.5em;
  padding-bottom:1.5em;
  padding-left:0.5em;
}

/* oder in kurzform */

div#demo {
  width:6em;
  padding:1.5em 0.5em; /* 1. wert = oben + unten; 2. wert = rechts + links
}

der Innenabstand

Äußere Abstände (margin)

Durch margin erzwingt man einen Abstand von einer Element Box zu einer anderen:

<div id="box_1">1. Element</div>
<div id="box_2">2. Element</div>

div#box_1, div#box_2 {
  width:5em;
  border:1px solid black;
  margin-bottom: 30px;
}

1. Element

2. Element

Rahmen (border)

Eine Element Box kann mit einem rechteckigen Rahmen versehen werden:

<div class="mitRahmen">Element</div>

div.mitRahmen {
  padding:6px; /* abstand rundherum */
  border-color:red;
  border-width:1px;
  border-style:solid;
}

Element

damit kann man auch richtig schräge Sachen machen:

div.mitRahmen {
  padding:6px; /* abstand rundherum */
  width:8em;
  height:8em;
  border-color:lime blue red gold;
  border-width:20px 10px 4px 8px;
  border-style:solid dashed dotted groove;
}

Element

Layout mit Stylesheets

Kaum etwas hat den Aufbau von Website so fundamental verändert wie der Einsatz von Stylesheets zum Layouten der einzelnen Seiten.

Kurzer geschichtlicher Ausflug

Bevor die Browser dazu fähig wurden, Stylesheet-Positionierungen zuverlässig darzustellen, "mißbrauchten" Webdesigner HTML-Tabellen, um Screenelemente auf der Seite zu positionieren. Mit Hilfe von komplizierten Tabellen-Strukturen und unsichtbaren Gifs, die die einzelnen Tabellen-Zellen aufspannten, war es möglich, visuell ansprechende Seite zu gestalten. Die Websites verloren dabei jedoch einen ihrer größten Vorteile: Inhalt und Präsentation waren nicht mehr voneinander getrennt:

Website-Besucher wurden gezwungen, die neuesten Browser zu verwenden
die Browser benötigten eine hohe Rechenleistung, um die komplizierten Tabellen richtig darzustellen
die Ladezeiten verlängerten sich
Screenreader (Lesehilfen für Blinde und Sehbehinderte) konnten keine sinnvollen Zusammenhänge mehr erkennen

Auch heute noch wird ein Großteil der Websites nach diesem veralteten Schema aufgebaut. Dies liegt hauptsächlich an WYSIWYG-Editoren (Frontpage, Go live, Dreamweaver usw.) oder an veralteten Content Management Systemen

Wie gut, dass Sie diesen komplizierten, veralterten Weg des Web-Layoutens nicht mehr lernen müssen!

Normaler Seitenaufbau

Ohne Beeinflussung einer HTML-Datei via CSS wird der Inhalt einfach von oben nach unten abgearbeitet. Was also oben steht, wird auch im Browser oben dargestellt…

Dies sollte man nie vergessen: alle Leute, die die Website mit einem Browser besuchen, der kein CSS versteht, werden Ihre Seite so sehen, wie Sie diese in HTML aufgebaut haben! Nehmen Sie sich beim Umsetzen Ihrer Website ab und zu die Zeit und deaktivieren Sie das CSS:

Ist die Seite auch so verständlich?
Was kommt zuerst? Das Menü oder der Inhalt?
Kann man Zusammenhänge auch so verstehen?

Minimale Beeinflussung des Layouts via CSS

Durch das Verwenden von Margins, Borders und Paddings können Sie Abstände zwischen verschiedenen Elementen schaffen, Beziehungen verdeutlichen und visuelle Spannungen aufbauen – ohne die Reihenfolge der Elemente zu verändern!

Floaten

Beim Floaten wird das im HTML-Code oben liegende Element links oder rechts nach unten neben das im HTML-Code unten liegende Element gesetzt...

Verwirrt? Anhand eines Beispiels wird die Sache verständlicher:

<h2 id="einleser">Floating ist sehr praktisch!</h2>
<p>Lorem ipsum no verterem phaedrum (…)</p>

   h2#einleser {
1.   background:gold;
2.   padding:2em;
3.   font-size:2em;
4.   font-weight:normal;
5.   float:left;
6.   margin:0 10px 10px 0;
   }

Floating ist sehr praktisch!

Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum. Cu per alii hinc, ei elitr fastidii accumsan eum, pro dicit tritani urbanitas ea. Tempor constituam per et. In modus dicunt suscipit qui, ex alterum percipit vix.Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum.

Haben Sie gesehen, wie die <h2>-Überschrift nach links unten in den nachfolgenden Paragraph (<p>) rutscht? Würde man in Zeile 5 des Stylesheet statt float:left; float:right; eingeben, würde die Überschrift nach rechts unten rutschen…

   h2#einleser {
1.   background:gold;
2.   padding:2em;
3.   font-size:2em;
4.   font-weight:normal;
5.   float:right;
6.   margin:0 0 10px 10px;
   }

Floating ist sehr praktisch!

Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum. Cu per alii hinc, ei elitr fastidii accumsan eum, pro dicit tritani urbanitas ea. Tempor constituam per et. In modus dicunt suscipit qui, ex alterum percipit vix.Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum.

Clearen

Clear ist das Gegenstück zum Float; es bewirkt, dass das Floaten ab dieser Stelle aufhört. Auch dafür ein einfaches Beispiel:

<h2 id="einleser">Floating ist sehr praktisch, sollte aber nicht endlos weiterlaufen</h2>
<p>Lorem ipsum no verterem phaedrum (…)</p>
<p class="clearLeft">Dieser Absatz sollte unterhalb der gefloateten Überschrift stehen</p>

.clearLeft {clear:left;}

Floating ist sehr praktisch, sollte aber nicht endlos weiterlaufen

Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei.

Dieser Absatz sollte unterhalb der gefloateten Überschrift stehen

Es gibt die Aufrufe clear:left, clear:right und clear:both;

Positionieren

Positionieren ist der radikalste Eingriff in die von HTML vorgegebene Struktur einer Website; es ist damit möglich, Elemente, die im HTML-Code ganz unten stehen, am obersten Rand des Browser zu plazieren und umgekehrt.

Bitte fragen Sie sich dabei immer: Ist dies Umsortieren wirklich notwendig - oder könnte es nicht einfacher sein, den HTML-Code entsprechend umzustellen?

Absolutes Positionieren

Absolut positionierte Elemente fallen komplett aus dem normalen "Fluß" einer HTML-Datei heraus; man könnte sich vorstellen, dass sich diese Elemente auf einer eigenen Ebene befinden und somit weder andere Elemente beeinflussen können noch von anderen Elementen beeinflußt werden können;

Absolut positioniert relativ zum Browserfenster

Für den Anfänger verwirrend ist die Beziehung zwischen dem absolut positionierten Element und seinem "Elternelement": erklärt man ein Element einfach absolut und gibt ihm dann Positionsangaben, beziehen sich diese direkt auf das Browserfenster:

<body>
 <p>hier eine Menge Text…</p>
 <div id="wichtig">dieser Text ist absolut positoniert</div>
</body>

div#wichtig {
  text-align:center;
  background:red;
  color:white;
  border:1px solid white;
  position:absolute;
  width:9em;
  top:30px;
  left:30px;
}

Die graue Fläche stellt das gesamte Browserfenster dar!

hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird. hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird. Hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird. hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird. Hier eine Menge Text, der ganz einfach nur auf der Seite dargestellt wird und nicht via CSS beeinflußt wird

dieser Text ist absolut positoniert

Wichtig: um ein Element absolut zu positionieren, müssen mindestens folgende Angaben gemacht werden:

position:absolute;
width: eine breitenangabe
top und/oder left (alternativ ist auch bottom und right möglich!)

Absolut positioniert relativ zu einem übergeordneten Element

Will man ein HTML-Element innerhalb eines anderen Html-Elementes absolut positionieren, muß man bei den CSS-Angaben des äußeren Elementes zumindestens die Angabe position:relative; machen. Hier das Beispiel:

<div id="aussen">
   <div id="innen">innen div</div>
</div>

/* im css-bereich */
div#aussen {position:relative;background:yellow;
width:100px;height:100px;}

div#innen {position:absolute;width:70px;
left:20px;top:20px;background:blue;color:#fff;}

innen div

Relativ Positionieren

relatives Positionieren verschiebt die Position eines HTML-Elements relativ zur normalen Position. Die Lücke, in der das Element normalerweise stehen würde, bleibt erhalten.

<p>dies ist normaler fliesstext</p>
<h2 id="rausrueck">hier eine relativ gesetzte zwischenüberschrift</h2>
<p>hier wieder normaler fliesstext</p>

/* im css-bereich */
h2#rausrueck {position:relative;left:6em;top:-1.4em;background:#ccc;}

dies ist normaler fliesstext

hier eine relativ gesetzte zwischenüberschrift

hier wieder normaler fliesstext

Navigationsmenü

Praktisch alle modernen Navigationsmenüs sind als ungeordnete HTML-Listen erstellt und via CSS dem Look & Feel der jeweiligen Seite angepaßt. Diese Listen haben den großen Vorteil, dass sie auch bei deaktivierten CSS als zusammengehörige Navigations-Elemente erkannt werden.

Der HTML-Code ist sehr einfach:

<ul>
 <li><a href="/home/" title="our homepage">home</a></li>
 <li><a href="/products/" title="a selection of products">products</a></li>
 <li><a href="/news/" title="latest news">news</a></li>
 <li><a href="/clients/" title="our clients">clients</a></li>
</ul>

mit Hilfe von CSS kann man das Aussehen der Liste verändern:

Bullets entfernen: ul {list-style:none;}

Zusammenfassung und 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.

Einleitung

In Kapitel 1 haben Sie sich schon einmal mit der Problemstellung beschäftigt, Dateien mit einem anderen Format als HTML in eine Website einzubinden. Dazu reicht ein einfacher Link. Diese Methode finden Sie hier noch einmal unter dem Stichwort „Download“.

Weiters werden Streaming Audio, Eingebettete Multimedia-Objekt, Flash und Java-Applet behandelt. Am Ende des Kapitels wissen Sie, welche Technik Sie für welche Aufgabenstellung verwenden können.

Download

 <img src="pdf.gif" alt="PDF-Dokument">
 Folien zu Dateisystemen, 450 KB pdf 
 <a href="docs/dateisysteme-sw.pdf">sw</a>
 oder <a href="docs/dateisysteme.pdf">farbe</a>

Beispiel: PDF (oder Audio) zum Download anbieten: ganz normaler Link. Achtung: Als Gestalterin der Seite kann ich nicht festlegen, ob die PDF-Datei gespeichert werden soll oder ob sie gleich im Browser (mittel Plug-in) angezeigt werden soll.

JavaScript

Wikipedia hat einen Artikel zum Thema:

JavaScript

Wikibooks hat das Lehrbuch:

Websiteentwicklung: JavaScript

Wikibooks hat das Lehrbuch:

Websiteentwicklung: AJAX

Javascript ist eine Skriptsprache im Web-Browser, mit der man Webseiten interaktiver gestalten kann. Außer dem ähnlichen Namen hat JavaScript aber nichts mit der Programmiersprache Java zu tun! Obwohl JavaScript „nur“ eine Skriptsprache ist, bietet sie viele Möglichkeiten einer ausgereiften Programmiersprache wie Variablen, Schleifen und Verzweigungen. Von daher ist sie etwas schwerer zu erlernen als HTML oder CSS. Glücklicherweise kann man schon mit wenigen Zeilen JavaScript gute Effekte erzielen. Außerdem kann man relativ einfach erlernen, fertige, frei verfügbare JavaScript in die eigenen Webseite einzubauen.

Was kann Javascript?

Ein JavaScript-Skript kann nur Elemente der Webseite und des Webbrowser kontrollieren, aber kein anderes Programm auf dem Computer. Wäre dies so, würde ein einfacher Besuch einer Webseite genügen, den Computer mit Viren zu infizieren oder Dateien auf dem Rechner zu löschen. Typische Anwendungsmöglichkeiten von JavaScript sind:

Rollover-Bilder – Wenn die Maus über ein Bild bewegt wird, wird dieses Bild durch ein neues Bild ersetzt.
Verändern von Inhalten einer Webseite nachdem diese geladen wurde.
Nachladen von Inhalten von einem Webserver ohne die ganze Seite neu zu laden (siehe auch: Ajax (Programmierung))
Öffnen von neuen Browserfenstern mit definierter Größe und Position am Bildschirm (Pop-up)
Automatisches Ausfüllen von Web-Formularen (z.B. könnte bei Eingabe einer Stückzahl der Gesamtpreis automatisch berechnet und angezeigt werden)
Prüfen ob ein Formulareintrag (z.B. Webadresse) plausibel ist
Setzen von Cookies um vorhergehen Werte wie die zuletzt besuchte Seite, den Benutzernahmen für eine Anmeldung oder den Inhalt eines Warenkorbes für den nächsten Besuch der Webseite zu merken.
Prüfung, welche Plugins im Browser installiert sind
(Neu-)Positionierung von Inhalten (z.B. könnte so ein Hilfefenster, welches immer neben der Maus ist, realisiert werden)
Erstellen von Grafiken im Browser (im Verbindung mit dem HTML5 Canvas-Element oder mit skalierbaren Vektorgrafiken (SVG))
Realisierung von ganzen Browsergames
und vieles mehr

Einbindung von Javascript

im Body

JavaScript-Skripte können direkt in die Webseite mit dem <script>-Tag eingebettet werden. Das Programm wird dann beim Aufbau der Seite ausgeführt:

 <h1>Guten Tag!</h1>
<script language="JavaScript">
    var Datum = new Date();
    var Tag   = Datum.getDate();
    var Monat = Datum.getMonth() + 1;
    var Jahr  = Datum.getFullYear();
    document.write("Heute ist der " + Tag + "." + Monat + "." + Jahr);
</script>

Es gibt ein vordefiniertes Datumsobjekt Date() das an die Variable Datum das augenblickliche Datum mit Uhrzeit übergibt. Allerdings ist die Formatierung nicht besonders leserlich. Tue May 17 2011 18:06:03 GMT+0200 Die Methode .getDate() und die folgenden Metoden speichern in die Variablen Tag, Monat und Jahr die entsprechenden Zahlen. Die Methode document.write() setzt einzelne Texte und die Werte der einzelnen Variablen zu einem Text zusammen, und gibt dieses an Ort und Stelle aus.

innerhalb eines Links

<p><a href="javascript:history.back();">zurück</a></p>

Führt zur zuletzt aufgerufenen Seite zurück.

im Head

Es ist üblich, im Head-Bereich des Dokuments Funktionen (das sind kleine, wieder verwertbare Proramm-Teile) zu definieren, die später verwendet werden:

<html> 
 <head>
  <script language="javascript">
   function zeige(text) {
    text = "!!!" + text + "!!!";
    alert(text);
   }
  </script>
 </head>
 <body>
  <h1>Willkommen</h1>
  <form><input type="button" value="Hallo" onClick="zeige('Hallo Welt!')"></form>
 </body>
</html>

Die Funktion zeige() wird im <head> definiert, aber noch nicht ausgeführt. Erst beim Klicken auf den Button wird die Funktion aufgerufen.

in einer externen js-Datei

Bei größeren Skripten ist es der Übersicht halber oft sinnvoll, JavaScripte in externe Dateien auszulagern. Diese Dateien werden daraufhin wie folgt in die Webseite eingebunden:

 <script type="text/javascript" src="skriptname.js"></script>

Einbettung von Multimediaelementen

Einbettung von Plug-ins

Falls im Browser ein geeignetes Plug-in für diesen Dateityp installiert ist, wird er das Plug-in als Teil der Webseite anzeigen, und das Plug-in tut dann, was es tut. Es gibt viele verschiedene Plug-ins für ein und denselben Datentyp.

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

Für eingebettetes Audio bieten sich noch die Attribute hidden="true" und loop="true" an. Nachteil dieser Methode: beim Erstellen der Seite kann ich nicht kontrollieren, welches der vielen verschiedene Plug-ins verwendet wird. Je nach Plug-in sieht das Ganze dann verschieden aus.

Einbettung von HTML5-Elementen

ACHTUNG: Diese Technik wird noch nicht von allen Browsern unterstützt! Die Verwendung dieser Technik wird daher nur empfohlen, wenn zusätzlich ein Fallback (z.B. via Flash) vorhanden ist.

Mit HTML5 kann man Videos und Audio-Dateien in Zukunft direkt ohne Plug-in einbinden. Das Video oder die Audio-Datei wird in diesem Fall direkt vom Browser abgespielt.

Einbindung von Videos

 <video  width="640" height="480" autoplay controls>
  <source src="Videodatei.mp4" type="video/mp4" />
  <source src="Videodatei.ogv" type="video/ogg" /> 
  Ihr Browser unterstützt das Abspielen von <video>-Element leider nicht.
 </video>

Einbindung von Audio-Dateien

 <audio src="AudioDatei.ogg" autoplay controls>  
  Ihr Browser unterstützt das Abspielen von <audio>-Element leider nicht.  
 </audio>

autoplay gibt hierbei an, dass das Video bzw. die Audio-Datei automatisch starten soll.

controls gibt an, dass Steuerelemente eingeblendet werden (Play/Pause, Lautstärke u. a.).

Flash

Mit Flash können Sie sich einen Media-Player selbst bauen und bis ins Detail selbst gestalten.

To-Do:

Einbettung von swf-Dateien beschreiben

Java-Applets

Achtung: Die Programmiersprache Java hat nichts mit der Skriptsprache Javascript zu tun. (Um genau zu sein: Java gibt es schon länger als Javascript, Javascript wurde zu einer Zeit erfunden, als Java „mega-in“ war. Deswegen wurde der Name Javascript in Anlehnung an Java gewählt. Ein Marketing-Gag, keine inhaltliche Ähnlichkeit.)

Java-Applets sind kleine Java-Programme, die man in einer Webseite verwenden kann, um gewisse Effekte zu erzielen. Ursprünglich konnte man nur mit Java-Applets nur Rollover-Effekte erzeugen oder komplexe interaktive Animationen darstellen. Jedoch ist es möglich, alle dieser Funktionalitäten auch mit Flash oder mit modernen Webtechnologien wie HTML5 Canvas zu realisieren. Es sind also relativ wenige Anwendungsmöglichkeiten für Java-Applets geblieben.

In Dreamweaver ist das Symbol für Java-Applet eine dampfende Tasse Kaffee. (Java ist in Kalifornien der Name einer bestimmten Kaffee-Sorte, nach dieser Kaffee-Sorte wurde die Programmiersprache benannt. Ein gutes Beispiel für ein Icon, das nicht international funktioniert.)

Weitere Informationen über Java finden sich in Wikipedia: w:Java_(Programmiersprache)

Zusammenfassung

So viele verschiedene Techniken, bloß um ein bisschen Audio und Video und Interaktion in der Webseite unterzubringen? Ja, sobald man die einfachen Medien Text und Standbild hinter sich lässt, wird das Erstellen von Webseiten wesentlich komplizierter.

Flash ist für Sie als Designer ein interessantes Thema, welches aber (wie auch Java) den Umfang dieses Buches sprengt.

Viele Unternehmen sind sich über die Bedeutung ihres Logos nicht wirklich bewusst. Geschäftsführer kommen bei der Gründung ihres Unternehmens auf den Gedanken, dass sie eine Wortbildmarke brauchen, um in der Werbung und als Firma wiedererkannt zu werden. Daraufhin machen sie sich meistens selbst an die Gestaltung eines Logos oder beauftragen einen Freund oder Verwandten damit. Wenn man nun Geschäftsführer einer klein- oder mittelständischen Elektrowerkstatt ist, wird man von ihnen meist so etwas wie gemalte Steckdosen, Glühbirnen, Neonröhren, Kabel, Blitze, Antennen oder Kabelwalzen bekommen, die in irgendeiner Weise mit dem eigenen Namensschriftzug umgeben werden. Dieser ist in einer Schriftart verfasst, die es zwar in jedem Textverarbeitungsprogramm gibt, aber nicht Times New Roman heißt, weil diese Schriftart jeder zuerst sehen würde, der so ein Programm startet. Es muss etwas besonderes sein - Comic Sans vielleicht?

Wenn einer Ihrer Verwandten mit einem Office-Programm herumspielt, könnte das Ergebnis so aussehen.

Wenn ein professioneller Designer ein Logo für Sie gestaltet, liefert er Ihnen meistens eine Version, die in jeder Größe verwendet werden kann.

Solche Logos werden von Amateuren zu einem geringen Preis und einem noch geringeren Aufwand hergestellt. Die üblicherweise verwendeten Programme sind nicht selten in der Software von gewöhnlichen Office Suites enthalten und die Kompetenz, so ein Logo zu gestalten, wird ersetzt durch die Freude und dem Selbstlob über das Werk, so als ob ein Kind gerade Lust gehabt hatte, etwas zu malen. Wenn aber jeder Inhaber einer Elektrowerkstatt auf diese Weise sein Logo gestaltet, Comic Sans für seinen Namensschriftzug und Cliparts für eine Glühbirne, eine Neonröhre oder eine Kabelwalze verwendet, verliert es sehr schnell seine Einzigartigkeit. Obendrein wird noch der Zweck des Logos verfehlt: so ein Logo stiftet Ihrem Unternehmen keine Identität und hebt es nicht von der Konkurrenz ab. Zweifellos werden andere Unternehmen in Ihrer Branche ihr Logo ganz genauso gestaltet haben, wodurch sich der Vorrat an Schriftarten und Cliparts, die Office mitbringt, nicht nur aus Mangel an Kreativität bald erschöpft hat. Genauso gut hätten Sie dann auch auf ein Logo verzichten können.

Dieses Kapitel zeigt Ihnen, wie Sie eigene Logos gestalten, die an die Qualität großer Marken sehr nahe herankommen. Die Software, die Sie dazu benötigen werden, stelle ich auch kurz vor - aber erst, wenn sie zum Einsatz kommt. Vorher bleibt der Computer ausgeschaltet und es werden Bleistift, Filzstift und Papier benutzt!

Was kostet ein Logo?

Hier wird Ihnen freilich kein Ersatz für ein Studium des Designs geboten. Auch einen Fachmann, der sich auf Kommunikation spezialisiert hat, kann dieser Abschnitt nicht wirklich ersetzen. Wenn Sie durch die Zeitung in Erfahrung bringen, ein Unternehmen hätte für ein Logo 22 Millionen Euro ausgegeben, muss das nicht zwangsweise richtig sein. Heute entwickeln Agenturen selten nur ein Logo. Meistens entwickeln sie auch Gestaltungs- und Einsatzvorschriften für Websites, für Print-Produkte und für so genannte Motion Graphics, computergenerierte Logo- und Bildelemente dazu. Diese Vorschriften sind als Corporate Design Guideline das Ergebnis langer Recherchen über die Identität eines Unternehmens und Diskussionen zwischen Künstlern in einer Agentur.

Der Preis eines Logos richtet sich üblicherweise nach dem Marktwert der Marke, die durch dieses Logo dargestellt werden soll. Ein neues Logo für die Coca Cola Company als Weltkonzern wäre heute zweifellos unbezahlbar. Doch ein kleines oder mittelständisches Unternehmen erhält ein gutes Logo von einer professionellen Agentur zu einem im Nutzenverhältnis günstigen Preis. Online-Marktplätze für Logo Design, auf welchen Ausschreibungen für individuell erstellt Logos platziert werden können, lassen oft den Auftraggeber sein Budget selbst bestimmen.^[8] Dies funktioniert natürlich nur solange der Preis nicht zu niedrig angesetzt wird und grundsätzlich bedacht wird wie viel Arbeit ein solches Projekt beinhaltet.

Neben diesen Marktplätzen für individuelle Logo Designs gibt es im Internet auch Logos von der Stange. Dabei handelt es sich um Vorlagen mit verschiedenen Piktogrammen. Beim Kauf eines solchen Logos verplichten Sie den Designer, Ihnen eine angepasste Version dieses Logos zukommen zu lassen. Er darf das Logo dann nicht weiter verkaufen. Auch wenn dies eine preisgünstige Möglichkeit ist, an eine Marke zu kommen, zeigt die Erfahrung, dass ein Logo von der Stange viel häufiger ausgetauscht wird, als ein Logo, dass speziell für Sie gestaltet wurde.

Der Grund liegt darin, dass ein Logo nicht von allein eine Identität stiftet. Es ist die Kommunikation, die mit diesem Logo vermittelt wird und der Marke ihr Eigenleben gibt. Wenn ein Designer ein Logo nur für Sie gestaltet, erklärt er Ihnen meistens nach der Schöpfung, was dieses Logo kommuniziert, damit Sie das Logo verstehen. Wenn Sie das Logo verstanden haben, setzen Sie es fast von selbst im richtigen Maße zur Kommunikation ein - die Marke erhält ihr Eigenleben durch Ihr Handeln. Kunden, die Ihre Dienstleistungen in Anspruch nehmen, werden mit diesem Logo konfrontiert. Je nachdem, welche Identität Sie mit diesem Logo Ihrem Unternehmen vermitteln wollen, verbinden auch Ihre Kunden dieses Logo mit dieser von Ihnen geschaffenen Identität. Wenn sich Qualitätsbewusstsein in der Wahl des Logos ausdrückt, dann machen sich auch die Betrachter die Qualität Ihrer Dienstleistungen durch dieses Logo bewusst.

Aus diesem Grund rechtfertigt jedes Logo seinen Preis.

No-Go's beim Logo-Design

Wollen Sie ein gutes Logo gestalten, verzichten Sie besser auf einige Dinge.

Verwenden Sie keine Grafikprogramme wie GIMP, Paint oder Photoshop. Welche Grafikprogramme Sie benutzen, erfahren Sie, wenn es so weit ist.
Verwenden Sie keine Office-Programme wie OpenOffice Draw oder Powerpoint.
Verwenden Sie keine Clip Arts und keine kleinteiligen Grafiken. Ein Logo muss einfach wieder zu erkennen sein.
Stehlen Sie nicht! Kopieren Sie nicht und lassen Sie sich auch nicht "inspirieren"! Das Logo sollte frei von den Rechten Dritter sein, sonst kann es ernsthafte Schwierigkeiten für Sie geben! Glauben Sie nicht, es würde niemand erfahren. Ihre Website ist im Internet; jeder erfährt es, der Ihre Internetadresse eingibt. Des weiteren existieren Suchmaschinen, welche ähnliche Bilder im Vergleich zu einem Original suchen können! Also: lassen Sie die Finger von fremden Logos und seien Sie kreativer!

Bevor Sie überhaupt mit der Gestaltung von Logos anfangen, sollten Sie sich diese Regeln einprägen, damit Sie nicht auf falsche Gedanken kommen.

Was vor der Gestaltung passieren muss

Nachdem ein Kunde ein Logo bei Ihnen in Auftrag gegeben hat, wissen Sie erst einmal nicht viel. Nachdem Sie wissen, dass Sie nicht stehlen dürfen, wollen Sie auch nicht nach einem Logo zur Branche des Kunden googeln. Ihnen geht es jetzt, wie jedem anderen Designer und Künstler: am Anfang ist ein weißes Blatt Papier. Es wartet auf Ihre Schöpfung!

Recherchieren

An das Skizzieren oder gar die Fertigung sollten Sie noch gar nicht denken. Sammeln Sie stattdessen Informationen über den Kunden und seine Branche oder über das Produkt. Wir nennen das Logo, was wir für ein Unternehmen oder ein Produkt herstellen wollen, Marke.

Ist die Marke traditionell ausgerichtet? Die gegenteilige Frage ist natürlich, ob die Marke als hipp, dynamisch und jung verstanden werden soll. Das Logo sollte diese Einstellung ausdrücken.
In welchem Markt soll die Marke platziert werden? Ein Logo muss zwar nicht immer die Branche ausdrücken, aber es sollte die Vorzüge eines klassischen Unternehmens oder eines Produktes in diesem Bereich ausdrücken. Beispielsweise sollte ein Logo für Lebensmittel auch Frische, Geschmack, Tradition oder Energie kommunizieren.
Sammeln Sie Stichworte, die Ihnen zum Markt der zu platzierenden Marke einfallen und lassen Sie Ideen aus diesem Brainstorming in die Gestaltung einfließen.

Das Logo ist Teil einer Identität, vergessen Sie das nicht. Dementsprechend müssen Sie die Hintergründe dieser Identität in Erfahrung bringen, damit sie dieser Identität ein Gesicht geben können.

Bei mittelständischen und großen Unternehmen muss sehr oft eine zusätzliche Marktanalyse getätigt werden.

Welche Erfahrungen haben Kunden mit der Marke gemacht und wie nehmen sie die Marke wahr? (Bei bekannten Marken.)
Was erwarten Kunden von solch einer Marke?

Es muss auf jeden Fall darauf geachtet werden, dass der Auftrag für eine Website für gewöhnlich nicht die Definierung einer Marke enthält. Sie sollen keine neuen Richtlinien für das Corporate Design entwerfen (außer für die Website). Sollte der Kunde das von Ihnen erwarten, müssen Sie noch einmal in Ihren Vertrag schauen, ob Sie das wirklich unterschrieben haben. Lassen Sie sich aber nicht erklären, das gehöre dazu. Die Definition eines Corporate Designs bestimmt das grundsätzliche kommunikative Auftreten des Unternehmens und ist schon an sich ein Auftrag in der gleichen Wertordnung wie eine Website.

Im Idealfall hat Ihnen schon jemand all diese Arbeit abgenommen und in einer Richtlinie zum Corporate Design festgehalten.

Brainstorming

In einer Sitzung des Brainstormings lassen Sie alle Ideen noch einmal zusammenfließen und notieren Stichpunkte und Worte, die Ihnen zur Marke einfallen. Auch Einfälle der befragten Kunden können Sie einfließen lassen. Wir benutzen hierfür Stift und Papier und lassen den Computer ausgeschaltet.

Sie sollten die Ideen vielleicht nicht einfach nur auf viele Zettel schreiben, sondern eventuell auch in einer Mind Map festhalten. Das heißt, sie schreiben einen Begriff auf, malen einen Kreis um diesen Begriff und schreiben einen zweiten Begriff im Kontext des ersten Begriffes auf. Dann ziehen Sie eine Linie zwischen dem ersten und den zweiten Begriff. Dies führen Sie in beliebiger Verästelung fort. Passen Sie aber auf, dass Sie den Themenbereich nicht verlassen.

Markieren Sie Begriffe, die Sie zu einem Einfall inspiriert haben. Immer, wenn Sie einen detaillierten Einfall haben, schreiben Sie ihn sofort auf! Warten Sie nicht und verlassen Sie sich nicht auf Ihr Erinnerungsvermögen! Schreiben Sie Ihre Ideen direkt auf!

Skizzierung

Der Computer ist immer noch aus! Wir bleiben weiterhin bei Stift und Papier.

Nachdem Sie Begriffe gesichtet und eine Mindmap erstellt, Ihre Ideen aufgeschrieben und Ihr Gehirn dem Sturm ausgesetzt haben, ist es jetzt an der Zeit, Ihre Ideen auszuprobieren. Dazu fertigen Sie Skizzen. Skizzen können in jeder Detailstufe gefertigt werden, je nachdem, wie viele Einfälle Sie gerade zum Entwurf haben. Passen Sie aber auch hier auf, dass Sie Ihre Kreativität nicht in gelangweilter Krakelei an einem mittelmäßigen Entwurf ertränken. Wenn Sie an einem Entwurf sitzen und merken, dass Ihnen nichts mehr einfallen mag und sie eigentlich nur noch sinnlos den Stift bewegen, sollten Sie eine Pause machen und für einen Moment Abstand von dem Projekt nehmen. Wenn Sie Raucher sind, frönen Sie Ihrer Sucht, wenn die Nachrichten laufen, schalten Sie sie ein. Am besten ist immer noch Musik und eine Tasse Tee, vielleicht auch das Beantworten von Briefen. Danach setzen Sie sich wieder an den Schreibtisch.

Sie fertigen in dieser Phase mehrere Skizzen und legen sich am besten nicht vorher schon auf eine bestimmte Gestaltung fest. Probieren Sie verschiedenste Ideen aus. Wenn Sie sich am Ende für eine Idee entschieden haben, können Sie die anderen ausgereiften Ideen für andere Kunden wieder verwenden. Hier empfiehlt sich, ein Ideen-Archiv in Form eines Hefters, eines Ordners oder einer Mappe anzulegen, das über die Jahre wächst und das man in die Recherchen für Kunden mit einbezieht.

Die Grundelemente von Logos

Bestimmte Grundelemente tauchen bei Logos oft auf und haben verschiedene Wirkungen auf den Betrachter.

Dreiecke

Ein Dreieck empfindet man als spitz oder hart. Mit ihm lassen sich auf einfache Art und Weise Dächer, Berge oder Ähnliches darstellen. Es reichen z. B. 3 bis 4 Dreiecke aus, um eine kleine Berggruppe darzustellen.

Quadrat oder Rechtecke

Mit diesem Symbol kann etwas Neutrales dargestellt werden. Ein Quadrat oder Rechteck wirkt immer geschlossen, kompakt oder stabil. Hier kann man vielleicht Betriebe aus der Bauwirtschaft als Beispiel nehmen. Oftmals wird ein Quadrat mit einem Schriftzug des Unternehmens genommen.

Kreise

Mit Kreisen kann man etwas in sich Geschlossenes symbolisieren.

Linien

Mit Linien hat man verschiedene Möglichkeiten. Man kann etwas unterstreichen, leicht umrahmen oder Elemente voneinander trennen.

Buchstaben

Auch Buchstaben oder Worte werden in Logos benutzt. Es gibt Logos, die einfach nur aus einem Wort mit einer ganz besonderen Schrift bestehen. Oft sind es Worte, die sich einfach nur leicht einprägen lassen und manchmal eigentlich auch keine Bedeutung haben. Google ist dafür ein gutes Beispiel. Leicht einprägsam ist das Wort, und jetzt wird dem Wort "googeln" auch eine Bedeutung beigemessen.

Vorgehensweise beim Entwurf eines Logos

Grundlegendes

Am Anfang ist es wichtig, sich Gedanken über Grundlegendes zu machen. Man sollte sich in etwa z. B. Fragen stellen:

Welche Zielgruppe habe ich?
Was willst du mit deinem Logo erreichen?
Erstelle ich das Logo für das Internet oder für Unterlagen, die in Papierform ausgedruckt werden?

Ideen

Als zweiter logischer Schritt kommt die Ideenfindung. Man kann sich z. B. Anregungen von anderen ähnlichen Anbietern holen, sollte da aber allerdings darauf achten, dass man die Ideen nicht einfach kopiert.

Skizzieren

Hat man Schritt 1 und 2 abgeschlossen, sollte man nicht sofort an den Computer gehen und dort entwerfen. Es empfiehlt sich eher, einfach nur einen Bleistift und Papier zu nehmen und dort seine Entwürfe zu machen. Hat man eine genügende Anzahl von Entwürfen gemacht und sieht einige Entwürfe, die schon ins Auge fallen, ist es Zeit, langsam mit dem Skizzieren zum Schluss zu kommen. Irgendwann kommt man einfach an den Punkt, wo alle Ideen ausgeschöpft sind.

Die Arbeit am Computer

Nach erfolgreichem Skizzieren sollte man 3 bis 4 gute Entwürfe auswählen und diese am Computer nachzeichnen. Will man ein wirklich professionelles Logo haben, nimmt man dazu am besten ein Vektor-Bearbeitungsprogramm. Das hat den Vorteil, dass man die Logos hinterher in allen möglichen Größen ohne Qualitätsverlust skalieren kann.

Einzelnachweise

↑ Wikibook: Websiteentwicklung XHTML: http://de.wikibooks.org/wiki/Websiteentwicklung:_XHTML
↑ HTML-Referenz selfhtml: http://de.selfhtml.org/
↑ Wikipedia zum World Wide Web (WWW): http://de.wikipedia.org/wiki/World_Wide_Web
↑ Wikipedia zum Thema Browserkrieg: http://de.wikipedia.org/wiki/Browserkrieg
↑ HTML
↑ http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp
↑ http://www.upsdell.com/BrowserNews/stat.htm
↑ Wie funktioniert Brandsupply? - Online Marktplatz für Grafikdesign FAQ // abgerufen am 10.05.13

Barrierefreiheit ist der Versuch, Web-Angebote so zu gestalten, dass keine Barrieren aufgebaut werden. Sprich, kein Nutzer grundsätzlich ausgeschlossen wird. Wir wollen unsere Angebote zum Beispiel auch für eingeschränkte Menschen optimieren. Einschränkungen sind schon durch PDAs oder eine leichte Sehschwäche vorhanden. Barrierefreiheit versucht also, jedem das Web-Angebot zugänglich zu machen. Wir können natürlich nicht alle Barrieren der Webseite entfernen, es werden sich immer automatisch welche ergeben. Wir können sie aber barrierearm gestalten, also so wenig Barrieren wie möglich.

Methoden

Um barrierearme Webseiten zu gestalten, bedarf es gewisser Techniken, die im Allgemeinen recht wenig verbreitet sind. Diese beinhalten unter Anderem qualitative Techniken, die wir nur durch die Struktur, Semantik oder Formatierung erreichen können. Es gibt aber auch Möglichkeiten, die durch Markup umgesetzt werden können.^[1]

Trennung von Inhalt und Struktur

Um Barrieren abzubauen, sollten Elemente im Markup niemals dem Layout dienen. Das gesamte Aussehen sollte über einen externen Stylesheet geregelt werden – und auch nur dort.

Erreichbarkeit von Inhalten

Tab-Index

Mit dem Attribut Tab-Index kann die Reihenfolge der zu fokussierenden Hyperlinks festgelegt werden, was mit der „Tab-Taste“ möglich ist. So können wir zum Beispiel den Skiplink, die Navigation und andere wichtige Hyperlinks direkt anspringen lassen, und unwichtige Links überspringen wie zum Beispiel Werbelinks und Ähnliches.

Skiplinks

Ein sogenannter Skiplink (Übersprungslink) ist ein Hyperlink, der dokumentintern auf den Inhalt verweist. So können zum Beispiel, sollte ein Screen-Reader verwendet werden, unwichtige Elemente wie Kopfzeile oder Navigation übersprungen werden, und werden nicht wiederholt vorgelesen.

Accesskeys – Zugangsschlüssel

Zugangsschlüssel sind zum Beispiel belegte Zahltasten(1,2,3..), die Operationen ausführen, die normalerweise per Maus erledigt werden. So können wir zum Beispiel der Navigation den Accesskey 1 zuweisen:

<ul accesskey="1">
    <li>Startseite</li>
    <li>Dokumente</li>
</ul>

Wenn jetzt die „1“ gedrückt wird, wird zur Navigation navigiert.

Sprachattribute

In Texten kommen oft Wörter in anderen Sprachen, zum Beispiel Englisch vor. Von Screen-Readern werden diese dann in der eingestellten Sprache vorgelesen. Wenn nun ein englisches Wort vorkommt, wird dieses dann mit deutschem Sprachlaut vorgelesen. Um das zu vermeiden, können wir dieses Wort in ein <span>-Tag einschließen, und diesem die Sprache Englisch zuweisen, so dass dieses auch englisch vorgelesen wird.

<p>Zurück zu <span lang="en">Home</span>.</p>

Interaktive Inhalte

Interaktive Inhalte wie Scripts oder eingebundene Objekte sollten immer nur ein Zusatz sein, niemals Voraussetzung für den Inhalt sein. Man sollte sie, wenn gewünscht nutzen können. Da man Nutzer aussperren würde wenn man sie zur Voraussetzung erklärt, ist das der barrierearmen Webseite nicht dienlich.

Negative Beispiele

Flash-Inhalte und Flashwebseiten
JavaScript Navigationen
Bilder, die dem Inhalt dienen und per Script eingebunden werden
Bilder, die nicht erklärt werden

Logische Struktur

Das Dokument sollte eine logische Struktur verfolgen. So sollten Elemente und Inhalte an erwarteten Stellen platziert werden. Der Nutzer sollte alle Elemente leicht finden. Zwischen ihnen sollten Assoziationen erstellt werden, damit man der Struktur leichter folgen kann. Des Weiteren sollten Überschriften hierarchisch verwendet werden, um die Verzweigung eines Elementes verständlicher zu machen.

Aria Auszeichnungen

Da HTML nur sehr wenige Widgets bereit stellt, müssen manchmal Widgets als Grafik o.ä. eingebunden werden. Um das ganze Zugänglich zu gestalten müssen wir ihnen Rollen zuweisen. Das funktioniert mit dem „role“ Attribut. Für das „role“ Attribut sind diverse Standard-Werte vorgesehen. Ferner gibt es noch ARIA-Zustände, die bestimmte Daten wiedergeben können. Beispiel:

<img src="regler.png" alt="Schieberegler" role="slider" aria-valuemin="0" aria-valuemax="10" aria-valuenow="2" aria-valuetext="2 von 10 Punkten">

Dem Bild wird die Rolle Schieberegler (Slider) zugewiesen. Des Weiteren ist die Skala von 0 bis 10 zu verstellen. Der aktuelle Wert beträgt 2 von 10 Punkten.

Für weitere Informationen:^[2]^[3]

Weiterführende Links

Diese Kapitel stellt verschiedene Methoden zum Aufteilen Webseite vor: Frames, Ebenen und CSS media-queries.

Frames

Sinvolles Beispiel: [SELFHTML Suchleiste] WARNUNG: Frames machen Probleme: Ohne Frames hat jede Webseite eine eindeutige URL. Mit Frames gilt das nicht mehr. Daraus folgen unvermeidbare Probleme: In der Suchmaschine wird immer nur ein einzelner Frame gefunden, nicht das "Gesamtkunstwerk"

Von anderen Websites können keine gezielten Links mehr gesetzt werden, nur Links auf die "Einstiegskonstellation" des Framesets, oder auf einzelne Frames
Beim Drucken muss man extra angeben welcher Frame / ob alle Frames gedruckt werden sollen. Das misslingt meistens.

Zusätzlich machen Frames noch Probleme, die durch geeignete Programmierung vermeidbar sind, aber trotzdem oft auftreten:

Innerhalb von Frames ist es schwieriger einen Links richtig zu setzen
Mit Frames kann man leicht den Bildschirmplatz verschwenden
Man kann die Bildlaufleisten abschalten, auch wenn sie zum benützen der Seite notwendig wären

Was im Browser wie "eine" Webseite aussieht, kann aus mehreren Frames, und damit aus mehreren HTML-Datei bestehen. Die wichtigste Datei enthält neue HTML-Tags: <frameset> und <frame>. Alle anderen Dateien enthalten ganz normales HTML wie Sie es schon kennen.

Navi
ga
tion

Inhalt Inhalt Inhalt

 <frameset cols="60,*"> 
 <frame name="linksframe" src="links.html"> 
 <frame name="inhaltframe" src="inhalt.html"> 
 </frameset>

Damit die Seite funktioniert müssen 3 Dateien vorhanden sein: index.html, links.html, inhalt.html So könnte die Datei links.html aussehen:

<p><b>Navigation<b></p>
<p>
<a href="inhalt.html" target="inhaltframe">Home</a><br>
<a  href="zwei.html" target="inhaltframe">Seite 2</a><br>
<a href="drei.html" target="inhaltframe">Seite 3</a><br>
<a href="vier.html" target="inhaltframe">Seite 4</a><br>
</p>

Die Dateien inhalt.html, zwei.html, drei.html,und vier.html sind ganz normale html-Dokumente.

Ebenen

Ebenen werden mit dem <div>-Tag erzeugt. Sie können absolut positioniert werden, und sind unabhängig vom "normalen" Inhalt der Webseite. Sie werden manchmal für Layout, und oft für Effekte verwendet.

Sie kennen den HTML-Tag <div> schon als allgemeinen Container ohne eigene Bedeutung, den man verwenden kann um einen Style anzuwenden:

<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<div style="border: 1px black solid; 
               background-color: yellow ">
<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<p>drei Absatz Text</p>
</div>

Mit der Stylesheet-Anweisung position: absolute; wird aus dem Container-Tag eine Ebene. Der Inhalt der Ebene verhält sich, als ob er auf einer Folie über der normalen Webseite "schwebt".

<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<div style="position:absolute; 
        left:43px; top:9px; width:104px; height:173px; 
        z-index:1; background-color:yellow;
        border: 1px black solid"> 
<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<p>drei Absatz Text</p>
</div>

ACHTUNG: Im Gegensatz zu Tabellen-Zellen reagieren Ebenen nicht auf die Größe ihres Inhalts. Wenn der Text zu groß ist &quote;läuft die Ebene über&quote;, wie in Abbildung 92 gezeigt.

Datei:Handbuch Webdesign-Ebenen 2.jpg

Abbildung 92: Absolut positionierte Ebene bei verschiedenen Schriftgrößen

Tipps für die Verwendung von Fixen Ebenen

Fix positionierte Ebenen sind nur beschränkt für das Layout der Seite geeignet. Wie oben beschreiben reagiert eine Ebene nicht darauf, dass der Inhalt zu groß wird. Hier sind die in Kapitel 3.4 beschriebenen Methoden mit CSS zum empfehlen, die immer garantieren, dass der gesamte Inhalt lesbar bleibt Wenn man doch absolut positionierte Ebenen für das Layout verwenden will, muss man den gesamten Inhalt der Seite in Ebenen unterbringen, sonst hat man folgendes Problem:

Die Ebenen sind immer absolut, oder besser gesagt: relativ zur linken oberen Ecke des Browser-Fensters positioniert
Der "normale" Inhalt der Webseite kann auch anders positioniert sein, z.B. zentriert im Browser-Fenster

Bei einer Änderung der Fenstergröße oder der Schriftgröße "verrutschen" also normaler Inhalt und Ebenen gegeneinander.

Datei:Handbuch Webdesign-Ebenen 6.jpg

Abbildung 94a: Absolut positionierte Ebene und zentrierte Überschrift

Layout im Vergleich

Mit Ihren bisherigen Kenntnissen können Sie schon Webseiten mit einfachen Interaktions-Möglichkeiten gestalten: mit Links und Hotspots ermöglichen Sie der LeserIn die Navigation durch das Web. Wenn Sie aber wollen, dass ihre Besucher mit ihnen interagieren, also bspw. Waren in einem Online-Shop bestellen, einen Beitrag kommentieren oder über etwas abzustimmen, dann brauchen Sie Formulare.

Formulare in HTML

Mit den HTML-Tags <form>, <input>, <textarea>, <option>, <select> werden Formulare gebaut. Ein einfaches Beispiel:

  <form method="get" action="newsletter-bestellung.cgi">
 Bitte schicken Sie den Newsletter an die
 <label>E-Mail <input type="text" name="email" /></label>
 <br />
 <input type="submit" value="Ok" />
 </form>

Der <form>-Tag ist für den Betrachter unsichtbar und dient nur dazu die anderen Eingabefelder zu bündeln. Im Action-Attribut des <form>-Tags wird angegeben, an welches Programm die Daten zur Verarbeitung geschickt werden.

Eingabefelder

Innerhalb des <form>-Tag bauen Sie das Formular aus verschiedenen Eingabeelementen und den &quote;normalen&quote; HTML-Tags auf. Tabelle 8 zeigt die verschiedene Arten von Text-Eingabefeldern.

Textfeld:
	<input type="text" name="meintextfeld" value="text eingeben" />
Passwort-Feld:
	<input type="password" name="meinpasswort" />
mehrzeiliges Textfeld = Textbereich
	<textarea name="zitat"> In a hole in the ground there lived a Hobbit. </textarea>

Tabelle 8: Text-Eingabefelder

Für Ja-oder-Nein-Fragen wird das Eingabe-Element &quote;checkbox&quote; verwendet, siehe Tabelle 9.

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

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

Für Frage, bei denen (eine von) mehreren vorgegebenen Antwort möglich sein soll gibt es verschiedene Eingabeelemente, die in Tabelle 10 gezeigt werden.

Radiobuttons
	<input type="radio" name="size" value="XL" /> XL <input type="radio" name="size" value="L" /> L <input type="radio" name="size" value="M" /> M <input type="radio" name="size" value="S" checked /> S
Menü
	<select name="size2"> <option>XL</option> <option selected>L</option> <option>M</option> <option>S</option> </select>
Menü mit "leer"- Auswahl
	<select name="size3"> <option>---Bitte Auswählen---</option> <option>XL</option> <option>L</option> <option>M</option> <option>S</option> </select>
Liste
	<select name="html" size="4" multiple> <option>im Code</option> <option>Dreamweaver</option> <option>GoLive</option> <option>Frontpage</option> </select>

Tabelle 10: Eingabeelemente für Fragen mit mehreren Antworten

Radiobuttons die zu einer Frage gehören müssen den selben Namen tragen. der Wert ist unterschiedlich (im Code: name ist gleich, value unterschiedlich). Nur bei einer Liste besteht die Möglichkeit mehrere Antworten auszuwählen. Für alle Eingabefelder gibt: falls auch "keine Antwort" möglich sein soll müssen Sie dafür eine eigene Option einbauen. Jedes Formular braucht einen Absende-Button wie in Tabelle 11 gezeigt.

Absende-Button
	<input type="submit" value="drück mich!" />
Zurücksetzen-Button
	<input type="reset" value="Zurücksetzen" />

Tabelle 10: Eingabeelemente für Fragen mit mehreren Antworten

Tabelle 11: Eingabefelder Absenden und Zurücksetzen Ohne Absende-Button können die Daten nicht zur weiteren Verarbeitung übermittelt werden.

Zurücksetzen?
Nein Danke!

Den Zurücksetzen-Button sollten Sie nur sehr selten einsetzen. Wie oft haben Sie auf einen "Zurücksetzen"-Button gedrückt und dann gedacht "super, alles gelöscht, genau das wollte ich", und wie oft haben Sie auf einen Zurücksetzen-Button gedrückt und dann gedacht "Mist, das war ja gar nicht der Einsende-Button, jetzt muss ich alles nochmal tippen."?

Tabelle 12 zeigt noch mehr Eingabefelder, die eher selten gebraucht werden.

Unsichtbares = Verstecktes Feld
	<input type="hidden" name="webseite" value="www.students" />
Button ohne Auftrag, für Javascript-Programme
	<input type="button" value="Extrafenster" onClick="..Javascript hier..">
Bildfeld, liefert Koordinaten.
	<input type="image" border="0" name="position" src="austria.gif" width="150" height="64">
Visuelle Zusammenfassung mehrerer Felder: fieldset + legend
	<fieldset> <legend>Kreditkarte</legend> <input name="nr"><br> <input type="radio" name="kk" value="Master"> Master <input type="radio" name="kk" value="Visa"> Visa <br> </fieldset>
Datei-Upload, funktioniert nur wenn die Formular-Daten an den Webserver geschickt werden, nicht aber bei Versand per E-Mail
	Wählen Sie ein Bild aus: <input type="file" name="bilddatei">

Tabelle 12: selten verwendete Eingabefelder

Sinnvoller Einsatz der Eingabefelder

Aus diesen Eingabeelementen ist jedes Web-Formular aufgebaut. Die Problematik der Formulare liegt nicht in der Kenntnis der Eingabefelder, sondern im Entwurf der Interaktionsmöglichkeiten. Im Folgenden sehen Sie eine Reihe von Entwürfen eines Reservierungs-Formulars für ein Hotel.

	Version 1: Ein Menü ermöglicht die Auswahl aus vorgegebenen Elementen. Mit diesem Formular kann man nur ein, nicht aber zwei oder mehr Zimmer reservieren.
	Version 2: Ein Text-Eingabefeld ermöglicht hier die Eingabe der Anzahl der Zimmer. Es ist aber nicht möglich ein Einzel- plus ein Doppel-Zimmer zu reservieren.
	Version 3: Diese Version ermöglicht die Reservierung von beliebigen vielen Zimmern in allen Kombinationen.
	Version 4: Durch ein zusätzliches Textfeld können alle weiteren Probleme abgefangen werden

Abbildung 81: Entwürfe für ein Zimmer-Reservierungs-Formular

Bei der Verwendung von Checkboxen, Radiobuttons, Menüs und Listen geben Sie genau vor, welche Möglichkeiten die LeserIn hat. Wenn Sie beim Entwurf des Formulars eine Möglichkeit vergessen kann die LeserIn nichts mehr daran ändern. Deswegen ist hier besondere Sorgfalt geboten. Eine besonders häufige Auslassung zeigt Tabelle 13.

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

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

Formulardaten absenden

Was passiert, wenn Sie ein Formular ausfüllen und auf den Absende-Button drücken? Die Namen der Eingabefelder und die Daten die eingegeben wurden, werden zur weiteren Verarbeitung versendet. Abbildung 86 zeigt ein Formular, und die Daten die von diesem Formular versendet werden (in einer Darstellung die die Web-Developers-Toolbar des Browsers Firefox liefert).

Abbildung 86: Formular und gesendete Daten – Standard-Namen

Beachten Sie dabei: Der restliche Inhalt der Webseite, also z.B. der erklärende Text, der neben den Eingabefeldern steht, wird nicht gesendet. In diesem Beispiel also "Lieferadresse", "Strasse", "PLZ" und "Ort". Die Benennung der Eingabefelder ist in diesem Beispiel nicht gut gelungen, Abbildung 87 zeigt eine verbesserte Version.

Abbildung 87: Formular und gesendete Daten – sprechende Namen für Eingabefelder

Wohin wen werden die Daten gesendet? Die URL (des Programmes) wird im action-Attribut des <form>-Tags angegeben.

Der Server muss die Daten verarbeiten und als Ergebnis eine neue Webseite liefern, die wieder vom Browser angezeigt wird. Das Diagramm in soll diesen Ablauf verdeutlichen.

Datei:Handbuch Webdesign-Formulare 30.gif

Abbildung 89: Formulardaten werden über HTTP an ein Programm am Webserver versandt

Die Daten werden vom Browser an den Webserver übermittelt. Der Webserver startet in diesem Fall ein weiteres Programm, z.B. ein CGI-Skript, und übergibt die Daten an dieses Programm. Das Programm verarbeitet die Daten und liefert als Ergebnis, als Output, ein HTML-Dokument, an das Webserver-Programm zurück. Das Webserver-Programm übermittelt das HTML-Dokument an den Browser, der es darstellt.

Formulare per E-Mail

Wenn Sie nicht über ein geeignetes Programm am Webserver verfügen (weder ein fertiges Programm, noch die Möglichkeit es selbst zu programmireren) dann können Sie als Alternative die Daten per E-Mail verschicken. So sieht der entsprechende HTML-Code des Formulars aus:

  <form action="mailto:formular@example.com" 
           method="post" 
           enctype="text/plain">

Bei dieser Vorgehensweise werden die Daten vom Browser an ein (ebenfalls am Client) installiertes E-Mail Programm übergeben. Dieses E-Mail Programm übernimmt das versenden der daten an die Ziel-Adresse.

Datei:Handbuch Webdesign-Formulare 31.gif

Abbildung 90: Formulardaten werden per E-Mail versandt

Achtung: Das Versenden der Daten per E-Mail kann aus verschiedensten Gründen schief gehen. Zum Beispiel weil ein Browser, aber kein E-Mail Programm installiert ist. Oder weil das E-Mail Programm zwar installiert, aber das Zusammenspiel zwischen Webbrowser und E-Mail Programm nicht korrekt konfiguriert ist.

Zusammenfassung und Ausblick

Der nächste logische Schritt ist die Erstellung eines Programms am Webserver, das Formulardaten verarbeiten kann. Dafür gibt es verschiedene Programmiersprachen und Schnittstellen, die bekanntesten wären die Sprache Perl über die Programmierschnittstelle CGI. Eine Alternative wäre die Sprache PHP. Mit der Programmiersprache Javascript können die Formulardaten vor dem Versendenden aus dem Browser geprüft werden (Außer Javascript ist deaktiviert – dann entfällt die Prüfung).

Quellen

[1] Wikibook: Websiteentwicklung XHTML: http://de.wikibooks.org/wiki/Websiteentwicklung:_XHTML

[2] HTML-Referenz selfhtml: http://de.selfhtml.org/

[3] Wikipedia zum World Wide Web (WWW): http://de.wikipedia.org/wiki/World_Wide_Web

[4] Wikipedia zum Thema Browserkrieg: http://de.wikipedia.org/wiki/Browserkrieg

[5] HTML

[6] ttp://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp

[7] ttp://www.upsdell.com/BrowserNews/stat.htm

[8] Wie funktioniert Brandsupply? - Online Marktplatz für Grafikdesign FAQ // abgerufen am 10.05.13

[9] ttp://pool.urz.uni-halle.de/kurse/barrierefrei/index.html

[10] ttp://www.hessendscher.de/wai-aria/

[11] ttp://www.w3.org/TR/wai-aria/

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[1]

[2]

[3]