Webseiten programmieren und gestalten

# Was sonst noch wichtig ist

Ein Experte ist ein Mann, der hinterher genau sagen kann, warum seine Prognose nicht gestimmt hat.
– Winston Churchill, britischer Politiker

In diesem letzten Abschnitt zu HTML möchte ich Ihnen ein paar kleinere Dinge näher bringen, wie z. B. META-Tags und ActiveX-Controls, die nichtsdestotrotz eine wichtige Rolle spielen. Außerdem werden Sie noch einige Elemente kennen lernen, die nicht zum offiziellen HTML-Standard gehören, aber eigentlich von jedem Browser unterstützt werden.

# META-Tags

META-Tags werden weniger für die Gestaltung eines Dokuments als für die Beschreibung des Inhalts notiert. Sie enthalten alle wichtigen Informationen zu einem Dokument (wie den Autor, das Erstellungsdatum und rechtliche Hinweise) und werden auch von Suchmaschinen ausgelesen, um eine Seite als Treffer zu einem Suchwort zu erkennen.

Aufgrund ihrer Eigenschaft und Anwendung werden META-Tags bzw. die Elemente im Gültigkeitsbereich des head-Elements notiert, genauso wie das title-Element. Dabei gibt es mittlerweile zwei verschiedene Arten von META-Angaben.

Die einfache Variante basiert auf den Vorgaben des W3C zur Verwendung von META-Angaben. Jedoch beschreibt das W3C lediglich den grundsätzlichen Aufbau einer META-Angabe und nicht, welche es gibt. Die gängigsten Angaben beschränken sich auf eine Beschreibung, den Autor, Stichwörter und das Erstellungsdatum. Ein meta-Element wird ohne Ende-Tag notiert und ist immer gleich aufgebaut.

<meta name="Schlüsselwort" content="Inhalt">

Vier wichtige Schlüsselwörter möchte ich Ihnen kurz vorstellen:

Schlüsselwort Übersetzung Erklärung
description Beschreibung Wenn Sie dieses Schlüsselwort verwenden, können Sie im content-Attribut eine Beschreibung zu Ihrer Webseite bzw. zu dem HTML-Dokument notieren.
author Autor Mit diesem Schlüsselwort teilen Sie den Autor oder die Autoren des Dokuments mit.
keywords Stichwörter Notieren Sie Stichwörter zu Ihrer Webseite, damit META-Suchmaschinen Ihre Webseite als Treffer für einen oder mehrere Suchbegriffe erkennen. Aus diesem Grund sollten Sie möglichst viele Stichwörter angeben.
date Datum Geben Sie das Datum der Veröffentlichung des Dokuments nach UTC (engl. universal timecode, dt. universelle Zeitangabe) an. Die genaue Schreibweise lautet yyyy-mm-ddThh:mm:ss+hh:mm. Ein Beispiel für eine Datumsangabe nach UTC könnte 2002–07–20T15:45:32+01:00 lauten. Die letzte Angabe +01:00 steht für die Abweichung von der Greenwich Meantime (GMT). Für Deutschland ist dies plus eine Stunde. Möchten Sie nur ein Datum angeben, können Sie das große T und die Zeitangabe dahinter einfach entfallen lassen (z. B. 2002–07–20).

Tabelle 8.1: Die vier verbreitesten Schlüsselwörter für das meta-Element

Die andere Variante basiert auf dem System der Expertengruppe Dublin Core. Sie wird vom W3C akzeptiert und berücksichtigt alle wichtigen Angaben. Vor den Schlüsselwörtern wird lediglich die Zeichenfolge DC. notiert, damit diese spezielle Variante auch erkannt wird.

<meta name="DC.Schlüsselwort" content="Inhalt">

Folgende wichtige Schlüsselwörter stehen zur Verfügung:

Schlüsselwort Übersetzung Erklärung
DC.Creator Autor Geben Sie hier den Autor des Dokuments an.
DC.Date Datum Geben Sie das Datum der Veröffentlichung in der Form yyyy-mm-dd an.
DC.Description Beschreibung Eine kurze Beschreibung zum Dokument können Sie hier angeben.
DC.Language Sprache Die Sprache des Dokuments als Sprachenkürzel. Für Deutsch wird de angegeben. Eine Übersicht der Sprachenkürzel finden Sie im Anhang.
DC.Rights Rechte Angabe der rechtlichen Hinweise zu einem Dokument, etwa das Copyright.
DC.Subject Betreff Hier geben Sie das Thema des Dokuments an.
DC.Title Titel Hier können Sie einen Titel für das Dokument angeben.

Tabelle 8.2: Die wichtigsten Schlüsselwörter für meta-Elemente nach der DC-Methode

Optimale META-Angaben erhalten Sie, wenn Sie sowohl die normalen als auch die Dublin-Core-Angaben verwenden, da diese sich nicht gegenseitig beeinträchtigen.

Für Suchmaschinen gibt es außerdem ein paar META-Angaben, die helfen, Ihre Seite in einer Datenbank nach gewissen Regeln zu speichern. Als Parameter für das name-Attribut wird immer robots angegeben und für content einer der folgenden Parameter:

Parameter Erklärung
noindex Unterbindet das Speichern des Dokuments in der Datenbank.
index Damit erlauben Sie dem Suchprogramm explizit, dieses Dokument aufzunehmen.
nofollow Verhindert die weitergehende Suche anhand der im Dokument notierten Verweise.
follow Damit erlauben Sie dem Suchprogramm explizit, den im Dokument vorhandenen Verweisen zu folgen und diese ebenfalls zu indizieren.

Tabelle 8.3: Mögliche Parameter zur Regulierung des Verhaltens eines Suchroboters

# Automatische Weiterleitung

Es gibt eine META-Angabe, die im World Wide Web ziemlich verbreitet und beliebt ist, der das W3-Konsortium aber mehr als ablehnend gegenüber steht. Sie entspricht nicht dem Wesen von Hypertext-Dokumenten, d. h. dem Grundsatz, dass jedes Dokument lesbar sein sollte. Dessen ungeachtet, wird sie seit jeher von fast jedem Browser unterstützt:

<meta http-equiv="refresh" content="3; URL=http://www.galileo-press.de">

Eigentlich dient diese Angabe dazu, ein HTML-Dokument nach einer bestimmten Zeit neu zu laden. Häufig wird diese Funktion bei Chat-Systemen auf Script-Basis verwendet. Der Parameter refresh im http-equiv-Attribut weist den Browser an, dieses Dokument neu zu laden, und die Angabe content="3; steht für die Wartezeit in Sekunden, bis das Dokument aktualisiert wird. Die zusätzliche Angabe URL=http://www.galileo-press.de/" verweist auf ein anderes Dokument. Der Benutzer wird also weitergeleitet.

Verlassen Sie sich aber nicht darauf, dass diese Angabe funktioniert. Sie sollten im Dokument noch einen zusätzlichen Link notieren, damit der Benutzer manuell zu der anderen Seite wechseln kann.

# ActiveX-Controls

Leider funktionieren ActiveX-Controls nur unter einer Windows-Umgebung und mit dem Internet Explorer ab der Version 5. Das reduziert den Benutzerkreis enorm. Für UNIX/Linux- aber auch Mac-Anwender besteht bisher keine Möglichkeit, ActiveX-Controls darzustellen. Auch Anwender eines anderen Browsers gehören nicht zum ausgewählten Kreis. Da es aber viele verschiedene ActiveX-Controls gibt und diese auch teilweise sehr nützlich sind, möchte ich Ihnen hier einige vorstellen. Wenn Sie beispielsweise eine Webseite für ein Intranet entwickeln und davon ausgehen können, dass alle Benutzer Windows und den Internet Explorer verwenden, bieten sich Ihnen interessante Möglichkeiten zur Gestaltung.

Um den Windows MediaPlayer in einem HTML-Dokument zu referenzieren, mit dem Sie fast jedes Audio- und Videoformat wiedergeben können, verwenden Sie einfach das object-Element. Die ClassID für den MediaPlayer lautet: 05589FA1-C356–11CE-BF01–00AA0055595A. Die wiederzugebende Datenquelle wird mit dem param-Element und dem Parameter filename für das name-Attribut festgelegt. Pfad und Dateiname zur Datenquelle werden im value-Attribut übergeben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- WindowsMediaPlayer //-->
<html>
  <head>
    <title>Listing 8.1</title>
  </head>
  <body>
    <object width="300" height="70" classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A">
      <param name="filename" value="town.mid">
    </object>
  </body>
</html>

Listing 8.1: Einbinden des WindowsMediaPlayers in ein HTML-Dokument

Der Kalender ist mehr eine Spielerei als ein wirklich brauchbares ActiveX-Control. Mit dem Kalender können Sie monatsweise einen in der Größe veränderbaren Kalender darstellen. Die zu verwendende ClassID lautet 8E27C92B-1264–101C-8A2F-040224009C02 und wird im Attribut classid übergeben.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- Kalender //-->
<html>
  <head>
    <title>Listing 8.2</title>
  </head>
  <body>
    <object classid="CLSID:8E27C92B-1264-101C-8A2F-040224009C02" width="288" height="192">
      <param name="Year" value="2002">
      <param name="Month" value="7">
      <param name="Day" value="20">
    </object>
  </body>
</html>

Listing 8.2: Ein Kalender in HTML

Das aktive Datum können Sie über die Parameter Year (Jahr), Month (Monat) und Day (Tag) bestimmen.

# Trennlinien

Mit dem hr-Element (engl. horizontal ruler, dt. horizontales Lineal) ist es möglich, in einem Dokument eine horizontale Trennlinie zur optischen Abgrenzung unterschiedlicher Textblöcke zu verwenden. Das Aussehen dieser Trennlinie können Sie über verschiedene Attribute beeinflussen.

Attribut Übersetzung Erklärung
noshade Kein Schatten An dieses Attribut werden keine Parameter übergeben, und es verhindert die Darstellung eines Schattens für die Trennlinie.
width Breite Verändert die Breite der Trennlinie. Sowohl Prozent- als auch Pixelangaben sind erlaubt, z. B. 50  % oder 100 Pixel.
size Größe Gibt die Höhe der Trennlinie an. Je höher der Wert, desto höher ist auch die Linie.
align Ausrichtung Beeinflusst die Ausrichtung der Trennlinie. Mögliche Parameter sind left, center und right.
color Farbe Geben Sie eine Farbe als Farbwort oder Hex-Tripel-Wert für die Trennlinie an.

Tabelle 8.4: Attribute für das hr-Element

Ein paar Beispiele:

<hr>
  <!-- erzeugt eine einfache horizontale Linie -->
<hr noshade size="5">
  <!-- 5 Pixel hohe horizontale Linie ohne Schatten -->
<hr align="center" color="#FF0000" size="2" width="75%">
  <!-- zentr., rote, 2 Pixel hohe Linie mit 75% Breite -->

# Inoffizielles HTML

Viele Browser unterstützen Elemente und Attribute, die es im offiziellen HTML-Standard nicht gibt.

Das embed-Element wird normalerweise als Alternative für Netscape verwendet, um einen Flash-Film einzubinden. Wenn Sie es aber in einem HTML-Dokument innerhalb des body-Elements mit dem Attribut hidden (dt. versteckt) und dem Parameter true (dt. wahr) notieren, können Sie eine Audiodatei einbinden, die ohne sichtbare Eigenschaft im HTML-Dokument wiedergegeben wird.

<body>
  ...  
  <embed src="town.mid" hidden="true" autostart="true" loop="true" width="0" height="0">
  ...  
</body>

Die Attribute autostart und loop weisen den Browser an, die Datei town.mid automatisch wiederzugeben und in einer Schleife laufen zu lassen. Anstelle des Parameters true können Sie auch false (dt. falsch/unwahr) notieren und eine entsprechende Eigenschaft deaktivieren.

Für den Internet Explorer können Sie eine Hintergrundmusik einbinden, indem Sie im head-Element das Element bgsound einfügen. Auch hier übergeben Sie die wiederzugebende Audiodatei im Attribut src. Im Attribut loop können Sie entweder die Anzahl der Wiederholungen angeben oder den Parameter infinite (dt. unendlich).

<title>
  ...  
  <bgsound src="town.mid" loop="infinite">
  ...  
</title>

Auch wenn ich Ihnen eben gezeigt habe, wie Sie Hintergrundmusik in einem HTML-Dokument einbinden können, ohne dass dies für den Benutzer sichtbar wird, möchte ich Sie darauf hinweisen, dass Sie damit sehr bewusst und sparsam umgehen sollten. Bieten Sie dem Benutzer auf jeden Fall die Möglichkeit, die Seite auch ohne Musik zu betrachten. Oder würde es Ihnen gefallen, ein fünf Sekunden kurzes Stück immer und immer wieder zu hören?

Standardmäßig besitzt ein HTML-Dokument einen nicht sichtbaren Außenrand. Der Inhalt lässt sich also niemals ganz exakt am Fensterrand des Browsers platzieren, es sei denn, Sie ändern dies mit CSS (siehe Kapitel 15**,** CSS – Layout fürs Internet*)***.

Es gibt jedoch auch eine HTML-Variante. Für den Internet Explorer müssen Sie die Attribute topmargin und leftmargin im body-Start-Tag notieren. Der als Parameter übergebene Wert ist dann der Abstand zwischen Inhalt und Fensterrand.

Netscape verwendet dafür die Attribute marginwidth und marginheight. Auch diese Attribute werden im body-Start-Tag notiert, und der übergebene Wert definiert den Abstand zwischen Inhalt und Fensterrand.

# Goldene Regeln

Man kann dem Benutzer das Leben auf viele Arten und Weisen schwer machen, etwa indem man rote Schrift auf blauem Hintergrund verwendet oder eine Audiodatei im Hintergrund abspielen lässt, die mehrere Megabyte groß ist. Damit Sie Ihre Besucher nicht sofort vergraulen, möchte ich Ihnen nun ein paar Regeln nahe legen, die sich im Internet durchgesetzt haben und die aus Erfahrungen und auch aus Überlegungen von vielen verschiedenen Personen resultieren, die täglich und oft mit dem Thema Webdesign zu tun haben oder einfach nur im Internet surfen. Diese Regeln werden gemeinhin als Netiquette bezeichnet.

Die Anbindung an das Internet ist von User zu User unterschiedlich. Einige verwenden ein Analog-Modem, andere ISDN und manche DSL oder eine Standleitung. Die beiden letzten Zugangsarten sind jedoch noch sehr selten, und Sie sollten bei der Gestaltung einer Webseite auch immer an die Benutzer denken, die ein analoges Modem verwenden. Vermeiden Sie also, Ihre Webseite mit nutzlosen oder gar übergroßen Grafiken zu überladen. Die Größe eines HTML-Dokuments inklusive der Grafiken sollte 100 kB nicht überschreiten. Alles andere ist für Modem-Benutzer eine Zumutung.

Besonders wichtig ist es, dem Benutzer eine klare Struktur zu bieten, damit er schnell und einfach an die Informationen kommt, die er benötigt. Dies erreichen Sie durch eine klare Gestaltung und durch immer wiederkehrende Strukturelemente, etwa eine Navigationsleiste und Ähnliches.

Eine 1 MB große Bitmap in ein HTML-Dokument einzubinden und dann auf eine Darstellungsgröße von 100 x 100 Pixel einzustellen, gleicht schon beinahe einem Verbrechen. Auch wenn es für Sie mehr Arbeit bedeutet, diese Bitmap erst auf die richtige Größe zu bringen und anschließend auch noch in einem anderen Format zu speichern, der Benutzer wird es Ihnen danken.

Eine Zeit lang fanden sich auf unzähligen Webseiten schwarz-gelbe Baustellenschilder, die darauf hinwiesen, dass die Seite noch im Aufbau sei. Benutzen Sie solche Schilder bzw. Grafiken nicht, denn ein Großteil der Internetgemeinde weiß, dass Webseiten niemals fertig sind und immer verändert, aktualisiert oder vollständig neu gestaltet werden.

Es sollten nur Links unterstrichen werden, da viele Benutzer sonst denken, der unterstrichene Text sei ein Link, und vergeblich versuchen, ihn anzuklicken. Ebenfalls grausam sind blinkende Texte in unterschiedlichsten Farben oder gar Hintergründe, die ihre Farbe in regelmäßigen Abständen ändern. Das erregt zwar Aufmerksamkeit, lenkt aber auch vom Inhalt ab. Genauso kontraproduktiv ist der Einsatz eines auf jeder Seite anderen Designs. Legen Sie sich auf ein Design fest, ansonsten kommt bei dem Benutzer das Gefühl auf, er wäre auf einer völlig anderen Webseite gelandet.

Niemand ist unfehlbar, und Fehler bei der Rechtschreibung oder in der Grammatik können vorkommen. Wenn jedoch ein Text dadurch nicht mehr gelesen oder verstanden werden kann, ist dies kein Versehen mehr, sondern höchst unprofessionell.

Links zu nicht existierenden Seiten und fehlerhafte JavaScripts zeichnen eine schlechte Webseite aus. Auch HTML-Dokumente, die nur mit einem speziellen Browser vernünftig dargestellt werden können, sind alles andere als ansehnlich und werden mit Sicherheit nicht wieder besucht. Versuchen Sie also, Ihre Webseiten sauber zu programmieren, so dass sie zumindest auf den gängigsten Browsern funktionieren.

Wenn Sie mehr über die »Goldene Regeln« oder die Netiquette wissen möchten oder einfach Beispiele für schlechte Webseiten sehen möchten, werden Ihnen die folgenden Links sicherlich helfen.

Adresse Beschreibung
http://www.muellseite.de/ Jürgen Graf stellt auf seiner Webseite die schlechtesten Beispiele für Webdesign im Internet vor. Darunter sind einige Webseiten, die Sie das Fürchten lehren werden.
http://www.karzauninkat.com/ Goldhtml Goldene Regeln für schlechtes Webdesign. Eine ironisch angehauchte Seite, die Sie natürlich nicht ernst nehmen sollten.
http://www.killersites.com/ David Siegel, »Webdesign-Papst« aus den USA, bietet viele Anleitungen und Beispiele zu gutem Webdesign. Diese Seite sollten Sie auf jeden Fall einmal besuchen.
http://www.ideenreich.com/ Ideenreich, bietet viele Tipps zu Webdesign, Webgrafik und mehr. Außerdem finden Sie hier auch viele Ressourcen, wie Grafiken, Links zu unterschiedlichster Software und Tipps zu deren richtiger Verwendung.

Tabelle 8.5: Weiterführende Links

← CSS - Layout fürs Web →