Aufbau von HTML-Seiten

Grundsätzlich kann ein Browser beliebige Dateien von einem Web-Server anfordern - Grafik (typischerweise .jpg oder .gif), ausführbare Programme (Endung .exe in der Windows-Welt) oder komprimierte Dateien (meist .zip). Für typische Web-Seiten mit Hyperlinks (d.h. anklickbaren Text-Teilen und Bildern, die zu anderen Inhalten führen) wird aber nahezu ausschließlich die Hyper-Text Markup Language, kurz HTML, benutzt.

Die Themen
dieses Abschnitts:
Dateistruktur
Tabellen
Formulare
Frames
Meta-Tags
Style Sheets
Die Datei robots.txt
Die Datei favicon.ico
Die Datei .htaccess
Dateitypen
Design-Tips
Barrierefreie Seiten
Impressum (TDG)
Browser-Bugs

Struktur einer HTML-Datei

HTML-Seiten kann man als Extremist mit jedem gewöhnlichen Texteditor schreiben, wenngleich das ziemlich mühsam sein kann, insbesondere beim Erstellen von Tabellen. Spezielle WYSIWYG-Editoren (what you see is what you get) wie Microsoft-Frontpage, der in Windows 98 enthaltene kleine Bruder Frontpage Express oder der Netscape-Composer sind deutlich komfortabler, ändern allerdings auch oft den Code nach eigenem Gutdünken.

Es gibt im Internet und auch in Buchform eine ganze Menge Literatur über HTML, so daß hier auf eine ausführliche Auflistung aller HTML-Tags verzichtet wird. Bedenken sollte man auch, daß die Zahl der interpretierten Tags sehr stark vom jeweiligen Browser und seiner Versionsnummer abhängt. Eine besonders empfehlenswerte HTML-Referenz in deutscher Sprache ist Selfhtml von Stefan Münz; sie beinhaltet auch Kapitel über Javascript und Perl.

Eine HTML-Datei kann im einfachsten Fall so aussehen, wobei nur der fett gedruckte Text wirklich im Browser-Fenster angezeigt wird:

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<title>Testseite</title>
</head>
<body>
<!-- Beispiel -->
<h2>Test</h2>
<p><img src="bild.jpg"></p>
<hr>
<p>Ein Textabsatz<br>
mit zwei Zeilen</p>
<p><a href="/">Zur Startseite</a></p>
</body>
</html>
Deklariert den folgenden Text als HTML
Hier beginnt der HTML-Header
Die Datei enthält HTML-Text und ist mit
dem Zeichencode ISO-8859-1 codiert
Erscheint in der Browser-Titelleiste
Ende des HTML-Headers
Beginn der eigentlichen Nutzdaten
So kann man Kommentare einfügen
Überschrift der Größe 2 (1=am größten)
Ein Absatz mit einem JPG-Bild
Eine horizontale Linie wird eingefügt
Textabsätze werden automatisch umbro-
chen, aber br erzwingt eine neue Zeile
Ein Link zur Indexseite der Web-Site
Ende der HTML-Nutzdaten
Ende der HTML-Datei

Die meisten HTML-Anweisungen (sog. "tags") werden einmal vor dem betroffenen Textteil verwendet, und dann ein zweites Mal mit einem vorangestellten Schrägstrich hinter ihm, wie etwa <p> und </p>. Nur einige wenige wie <hr> oder <br> kommen einzeln vor. Return-Zeichen (Zeilenumbrüche) im Quelltext werden wie Leerräume behandelt und aufeinanderfolgende Leerräume wie ein einzelner, deshalb muß der Text vollständig und konsequent mit HTML-Tags formatiert werden. (Lediglich Text, den man zwischen <pre> und </pre> einschließt, wird wie eine gewöhnliche ASCII-Datei behandelt, so daß alle Zeilenumbrüche und Mehrfach-Leerräume erhalten bleiben.)

Da die Zeichen < und > für HTML-Anweisungen benutzt werden, dürfen sie im normalen Text so nicht vorkommen. Sie werden deshalb speziell codiert, nämlich als &lt; (less than) und &gt; (greater than). Wenn Sie in diesem Text etwa "<p>" lesen, steht in der Datei in Wirklichkeit "&lt;p&gt;". Dadurch muß natürlich auch das Ampersand-Zeichen & umcodiert werden; es wird in der HTML-Datei zu "&amp;". Manchmal werden auch deutsche Umlaute umcodiert, etwa "ä" zu "&auml;", aber eigentlich war das nur bei den früheren 7-Bit-Übertragungsstrecken wirklich nötig. Wenn man im HTML-Header den Zeichensatz eindeutig angibt (typisch ISO 8859-1), darf man Umlaute unverändert in den Text schreiben.

Standardisierungsbemühungen führten dazu, daß es heute zum guten Ton gehört, noch vor das einleitende <html> einer Webseite eine Typdeklaration zu schreiben, damit ein Browser weiß, nach welchen Regeln er den HTML-Code zu decodieren hat. Falls ganz auf Style Sheets und Frames verzichtet wird, kann das Dokument als HTML-3.2-konform deklarieren (veraltet!):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Dabei steht EN für eine englischsprachige Definition (trifft bei HTML immer zu). Die folgende Variante ist - wie der Name "loose" schon suggeriert - noch relativ großzügig hinsichtlich der Kompatibilität mit älteren Browsern und erlaubt sowohl ältere Elemente wie FONT oder ALIGN als auch neuere wie Frames und Style Sheets (CSS). Außer dem Typ selbst wird oft auch angegeben, wo im Web die Typdefinition zu finden ist:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Wegen der großen Verbreitung des MS-IE6 sei erwähnt, daß dieser Browser einige Bugs zeigt, wenn die Deklaration wie hier angegeben mit der optionalen Adresse "http..." erfolgt, deshalb sollte man diesen Teil besser weglassen. - Für Framesets wird folende Variante verwendet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Nur wer keine veralteten HTML-Elemente wie FONT oder ALIGN mehr benutzt und statt dessen entsprechend HTML 4.01 voll auf Style Sheets setzt, kann die "Strict"-Variante verwenden:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Tabellen

Eines der wichtigsten Elemente in übersichtlich gestalteten Web-Seiten sind Tabellen. Sie können sichtbare Begrenzungslinien zwischen den einzelnen Zeilen und Spalten enthalten, oder auch unsichtbare (sog. blinde Tabellen). Die Dicke des Außenrahmens wird im table-Tag mit border angegeben, die der Gitterlinien mit cellspacing und der Textabstand zum Zellenrand mit cellpadding.

<table border="2" cellpadding="4" cellspacing="6" bgcolor="red">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
Tabellenbeginn
1. Zeile, 3 Spalten
2. Zeile, 3 Spalten
Tabellenende
Und so sieht diese Tabelle dann im Browser aus:
1 2 3
4 5 6

Übrigens ist es guter Stil (und bei XML/WML sogar zwingend erforderlich), Werte hinter HTML-Tags immer in Anführungszeichen zu schreiben, in diesem Beispiel also etwa border="2" statt border=2.

Formulare

Als Formular, englisch Form, bezeichnet man einen Bereich innerhalb einer HTML-Datei, der ausfüllbare Felder enthält. Diese können dann beispielsweise mit einem Javascript-Programm vom Browser auf Plausibilität überprüft werden, bevor sie mit einem Absende-Button zum Server geschickt und dort z.B. mit einem Perl-CGl-Programm ausgewertet werden. Jede Form beginnt mit <form> und endet mit </form>, und dazwischen können unterschiedliche Feldtypen stehen. Mit name wie z.B. in <input type="text" name="Mail"> kann man den Feldern für die spätere Unterscheidung im CGI-Programm Namen geben.

Feldtyp: So sieht das Feld aus: HTML-Tags:
Einzeiliges Textfeld Name <input type="text">
Optionsfelder Frau Herr Firma <input type="radio">
Kontrollkästchen Mein erster Besuch hier <input type="checkbox">
Drop-Down-Menü Hauptinteresse <select><option>...
</option></select>
Mehrzeiliger
Textbereich
<textarea></textarea>
Datei-Auswahl <input type="file">
Javascript-Button <input type="button">
Rücksetz-Button <input type="reset">
Absende-Button <input type="submit">

Bei einem mit <form method="get" action="http://..."> eingeleiteten Formular übergibt der Browser die Feldnamen und -inhalte einem CGI-Programm durch Anhängen der Daten an den Programmnamen hinter einem Fragezeichen, und zwischen den einzelnen Feldern wird das Trennzeichen & eingefügt. Einige reservierte Zeichen werden dabei hexadezimal codiert, z.B. & als %26, + als %2B oder % als %25, und Leerzeichen werden als "+" übergeben. Ein Beispiel mit zwei Feldern:
/cgi-bin/mail.pl?Mail=info@mh.de&Name=Meier+%26+Huber
Mit method="post" werden die Daten dem CGI-Programm dagegen über das STDIN-Handle übergeben; diese Methode ist insbesondere für längere Daten wie etwa mehrzeilige Texte besser geeignet.

Nur der Vollständigkeit halber sei die Möglichkeit erwähnt, mit <form action="mailto: ..."> ein Formular mit Hilfe des Mail-Programms des Benutzers als E-Mail zu versenden. Dies funktioniert nur dann, wenn Browser und Mail-Programm eine monolithische Einheit bilden (z.B. MS-IE und Outlook, oder Netscape-Browser und -Messenger). Da viele Benutzer mit anderen Kombinationen arbeiten, ist diese Lösung viel zu unzuverlässig und deshalb zumindest für kommerzielle Aufgaben völlig unbrauchbar.

Frames

Man kann den Browser-Bildschirm in mehrere Teilfester unterteilen, so wie das auch bei diesem Dokument der Fall ist: Am unteren Rand sehen Sie eine blaue Navigationsleiste, und darüber den eigentlichen Text, der sich unabhängig von der unteren Leiste rollen läßt.

<html>
<head><title>Frames-Testseite</title></head>
<frameset cols="250,*" frameborder="0" framespacing="0" border="0">
<frame src="file1.htm">
<frame src="file2.htm">
</frameset>
<body>
Dieser Text erscheint nur bei einem nicht framefähigen Browser!
</body></html>

Die Angabe cols="250,*" bedeutet hier, daß eine spaltenweise Frame-Darstellung gewünscht wird; der linke Teil mit der Datei file1.htm soll immer genau 250 Pixel breit sein, und der rechte mit file2.htm nimmt den Rest der Bildschirmbreite ein. Der Abstand zwischen den Frame-Teilen wird auf Null gesetzt.

Ein innerhalb eines Frame-Teils stehender Link zu einer fremden Seite muß z.B. so aussehen:
<a href="http://www.xyz.de/" target="_top">
Ohne "_top" würde die fremde Seite innerhalb Ihres Frames erscheinen und so den falschen Eindruck erwecken, zu Ihrem Angebot zu gehören - das Urheberrecht verbietet das.

Auf ein kleines Problem bei Frames sei hingewiesen: Suchmaschinen indizieren meist alle Seiten, also auch die Teilseiten einer Frame-Struktur. Wenn man keine besonderen Tricks anwendet (z.B. Nachladen der Frames mit Javascript), wird der Besucher der Seite deren Schönheit nur teilweise genießen können.

Meta-Tags

Insbesondere für das Zusammenspiel mit Suchmaschinen sind einige Angaben im HTML-Header von Bedeutung. Ein entsprechend optimierter Header sollte zumindest Angaben wie Title, Description und Keywords beinhalten, die ein normaler Browser zwar ignoriert (daher der Name Meta-Tags), die aber von den meisten Suchmaschinen ausgewertet werden. Ein kleines Beispiel einer HTML-Datei mit Meta-Tags:

<html><head>
<title>Relativitätstheorie</title>
<meta http-equiv="Language" content="de">
<meta name="Description" content="Die ganze Theorie in einem Satz">
<meta name="Keywords" content="Geschwindigkeit,Masse,Licht">
<meta name="Author" content="A. Einstein, L. Infeld">
<meta name="Copyright" content="Albert Einstein"></head>
<body><p>Wer rast, wird schwerer und kürzer, und niemand
schafft mehr als 300.000 km/s.</p></body></html>

Die Angabe "de" bei "Language" hilft internationalen Suchmaschinen bei der Einordnung der Seite zur passenden Landessprache. Der Titel hinter <title> sollte unbedingt da sein. Wenn "Description" fehlt, nimmt die Suchmaschine als Kurzbeschreibung die ersten Worte im Text, was meist nicht besonders aussagekräftig ist. Meist werden bei der Suchmaschinen-Ausgabe auch Autor und Copyright angezeigt, deshalb sollten diese Angaben nicht fehlen. Die "Keywords" dienen in erster Linie dazu, Synonyme von Begriffen anzugeben, die zum Thema gehören, aber so im übrigen Text möglicherweise nicht vorkommen. (Groß- und Kleinschreibung ist bei den Meta-Tag-Namen egal.)

In manchen Fällen möchte man, daß eine Suchmaschine eine bestimmte Seite nicht in ihren Index aufnimmt. Dazu kann man in den HTML-Header folgende Zeile schreiben:
<meta name="robots" content="noindex,nofollow">
Dabei bedeutet noindex, daß die Suchmaschine diese Seite nicht indizieren soll, und nofollow, daß sie auch keinen Links folgen soll, die auf dieser Seite stehen.

Außer Meta-Tags haben allerdings auch andere Parameter wesentlichen Einfluß darauf, ob ein Besucher Ihre Seite über eine Suchmaschine findet bzw. an wievielter Stelle Ihre Seite beim Suchen nach bestimmten Begriffen erscheint (Ranking). Da Suchmaschinen mit unterschiedlichen Bewertungskriterien arbeiten, haben natürlich nicht alle Maßnahmen bei allen Maschinen dieselbe Wirkung. Dennoch ein paar Tips hierzu:

Dienste, bei denen man eine Seite kostenlos oder gegen Gebühr bei hunderten Suchmaschinen anmelden kann, sind oft völlig ineffizient, und eine Erfolgskontrolle ist nahezu unmöglich. Da in der Praxis einige wenige Suchmaschinen einen Großteil des Verkehrs bringen, ist eine manuelle Einzel-Anmeldung nicht allzu aufwendig: Allein Google bringt nach der Statistik des Shamrock-Servers mehr als die Hälfte der referenzierten Seiten, alle anderen Suchmaschinen liegen einzeln jeweils unter fünf Prozent (Stand September 2002).

Bis eine Seite nach der Anmeldung tatsächlich im Index erscheint, dauert bei den einzelnen Suchmaschinen sehr unterschiedlich lang - von ein bis zwei Tagen (Fireball) über ein paar Wochen (Google) bis zu einigen Monaten (Yahoo). Eine Neuindizierung geänderter Seiten erfolgt durch die Suchmaschinen in der Regel automatisch im Abstand einiger Wochen oder Monate.

Schriftarten und Style Sheets

Man kann Schriftart-Anweisungen überall im HTML-Text unterbringen, z.B. so:

<b> oder <strong>: Der folgende Text ist fett (Ende mit </b> oder </strong>)
<i> oder <em>: Der folgende Text ist kursiv (Ende mit </i> oder </em>
<font color="red">: Der folgende Text ist rot (Ende mit </font>)
<font size="-1">Der folgende Text ist eine Stufe kleiner (Ende mit </font>)

Wenn man bestimmte Schriftarten und sonstige stilistische Eigenheiten auf einer Web-Site immer wieder benutzen möchte, kann die immer wiederkehrende Definition allerdings recht aufwendig werden. Deshalb gibt es sogenannte Cascading Style Sheets (CSS). Man kann sie auf unterschiedliche Arten benutzen:

  1. Definition der Schriftart für einen HTML-Abschnitt, etwa für einen Absatz:
    <p align="center" style="font-family:Helvetica,Arial;font-size:8pt">
  2. Definition im Header der Datei für alle Vorkommnisse eines Elements, z.B. für alle Absätze:
    <style type="text/css"><!--
    p {font-size:12pt;line-height:14pt;font-family:Helvetica,Arial}
    // --></style>

    Damit ältere Browser keine Probleme bereiten, werden die Style-Sheet-Angaben hier in HTML-Kommentare eingeschlossen, so daß sie von Nicht-CSS-fähigen Browsern überlesen werden.
  3. Definition gemeinsamer Formate für mehrere HTML-Dateien als getrennte CSS-Datei mit beispielsweise folgendem Inhalt:
    p {font-size:12pt;line-height:14pt;font-family:Helvetica,Arial}
    In den einzelnen HTML-Dateien muß dann im Header nur folgende Zeile stehen:
    <link rel=stylesheet type="text/css" href="formate.css">

Außer für die vorgegebenen HTML-Elemente wie etwa p (Textabsatz), h1...h6 (Überschriften) oder td (Tabellenzelle) kann man auch einen eigenen Namen definieren, z.B. "bg" für einen Textteil mit Hintergrundfarbe. Dazu schreibt man in den HTML-Header:
<style type="text/css"><!--
.bg { background:#FFF8C8; }
// --></style>
Im HTML-Body, also im eigentlichen Seitentext, kann man den Stil dann wie folgt einsetzen:
Dies ist ein Text mit <span class="bg">Hintergrundfarbe</span>.

Style Sheets werden von Microsoft- und Netscape-Browsern seit Version 4.0 unterstützt. Da frühere Versionen kaum noch im Einsatz sind, kann man dieses Formatierungs-Verfahren guten Gewissens einsetzen.

Die Datei robots.txt

Außer mit Meta-Tags kann man auch mit einer Datei robots.txt im Hauptverzeichnis des Servers verhindern, daß Suchmaschinen bestimmte Dateien und Verzeichnisse indizieren. Die folgende Beispieldatei vermeidet, daß Suchmaschinen Dateien im Verzeichnis cgi-bin indizieren:

# Beispiel für robots.txt
User-agent: *
Disallow: /cgi-bin/

Dabei bedeutet die Zeile "User-agent: *", daß das für alle Suchmaschinen gelten soll. Wenn mehrere Verzeichnisse oder Dateien gesperrt werden sollen, kann man mehrere Disallow-Zeilen angeben. Hinter der Raute # dürfen Kommentare stehen.

Die Datei favicon.ico

Der Microsoft Internet Explorer ab Version 5.0 sucht im aktuellen Verzeichnis des Web-Servers nach einer Datei favicon.ico, wenn Sie eine Seite in die Favoriten-Liste aufnehmen. Dabei handelt es sich um eine Grafikdatei in dem bei Windows-Applikationen üblichen Icon-Format, die der Explorer sich in der versteckten Datei ShellIconCache merkt. Um sie zu erstellen, benötigt man einen Icon-Editor, wie er auch bei den meisten Entwicklungs-Umgebungen für Windows enthalten ist.

Wenn keine solche Datei auf dem Web-Server existiert, wird man im Server-Log regelmäßig den Fehler 404 (Datei nicht vorhanden) bemerken, wenn jemand versucht, mit dem MS-IE ab 5.0 eine Seite in die Favoriten aufzunehmen. Das klappt zwar trotzdem, aber natürlich erscheint in der Favoriten-Liste dann keine Grafik.

Die Datei .htaccess

Apache- und dazu kompatible Web-Server erlauben das Erstellen einer Datei .htaccess mit speziellen Server-Optionen (bitte beachten Sie den führenden Punkt und die Kleinschreibung!). Die Angaben in .htaccess wirken auf das Server-Verzeichnis, in dem sich diese Datei selbst befindet, sowie auf alle darunterliegenden. Die Datei .htaccess muß im ASCII-Modus (nicht binär) per FTP zum Server übertragen werden.

Eigene Error-Seiten

Eine typische Verwendungsmöglichkeit ist die Angabe einer Error-Seite, die bei bestimmten Server-Fehlercodes aufgerufen werden soll. Wenn Sie beispielsweise möchten, daß beim Fehler 404 (not found) das Dokument error404.htm angezeigt wird und beim Fehler 401 (unauthorized) die Seite error401.htm, erstellen Sie eine Datei .htaccess mit folgender Zeile:

ErrorDocument 404 /error404.htm
ErrorDocument 401 /error401.htm

Es ist wichtig, in den Kopfdaten der Error-Dateien mit <meta name="robots" content="noindex"> zu verhindern, daß Suchmaschinen die fehlerhafte Adressen indizieren.

Geschützte Unterverzeichnisse

Eine weitere Möglichkeit ist das Schützen von Unterverzeichnissen, so daß diese nur nach Eingabe von Benutzername und Passwort zugänglich sind. Dazu muß im jeweiligen Unterverzeichnis (z.B. "privat") eine Datei .htaccess mit folgendem Inhalt angelegt werden:

AuthType Basic
AuthName "Restricted Directory"
AuthUserFile /homepages/htdocs/privat/.htpasswd
require valid-user

Zusätzlich ist dafür eine Datei .htpasswd im selben Verzeichnis nötig, die einen oder mehrere Benutzernamen und zugehörige Passworte enthält. Ihr Pfad wird in .htaccess als absoluter Server-Pfad angegeben. Die Passworte sind dabei verschlüsselt. Beispiel für .htpasswd:

schmitz:kw8U4x3

Sie können den Code für ein Passwort mit dem folgenden Formular ermitteln. Da der Algorithmus einen Zufallswert als Ausgangsbasis für die Verschlüsselung benutzt, sind für ein Passwort unterschiedliche Codes für .htpasswd möglich.

Passwort:

Bitte achten Sie beim Transfer von .htaccess und .htpasswd zu einem Unix-Webserver darauf, daß Sie im FTP-Programm den ASCII-, nicht den Binär-Modus benutzen, da andernfalls ein Server-Error gemeldet wird. Bei manchen Internet-Providern ist das Hochladen einer Datei .htaccess allerdings gesperrt.

Virtuelle Dateien

Mit einer einfachen Umleitung kann eine beliebige andere Datei aufgerufen werden, wenn im Browser eine (typischerweise nicht wirklich existente) Datei angefordert wird. Im folgenden Beispiel wird bei Auruf des Dateinamens datei.htm in Wirklichkeit ein CGI-Skript prog.pl gestartet, ohne daß das in der Adressenzeile des Browsers sichtbar wird. Das Zeichen ^ wird hier zur Kennzeichnung des Anfangs und $ für das Ende der angeforderten URL benutzt; ggf. könnten auch mehrere RewriteRule-Zeilen für weitere Umleitungen angegeben werden:

RewriteEngine on
RewriteRule ^datei.htm$ /cgi-bin/prog.pl

Fremde Links sperren

Oft ist es unerwünscht, daß Download-Dateien oder Bilder von fremden Servern "gelinkt" werden. Um das zu verhindern, kann man eine Datei .htaccess mit folgendem Inhalt in das entsprechende Unterverzeichnis kopieren:

RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://IhreFirma.de.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.IhreFirma.de.*$ [NC]
RewriteRule /* http://www.IhreFirma.de/error.htm [R,L]

Voraussetzung ist natürlich, daß sich alle vor fremden Links zu schützenden Dateien zusammen mit .htaccess in einem eigenen Unterverzeichnis befinden, da sonst auch externe Links zu Ihren normalen HTML-Seiten nicht mehr möglich wären. Im obigen Beispiel sind Downloads nur als Links von den Domains IhreFirma.de und www.IhreFirma.de erlaubt. Bei fremden Links erfolgt mit "RewriteRule" eine Umleitung zur Seite error.htm des Servers IhreFirma.de. (Diese Seite sollte im Header mit <meta name="robots" content="noindex"> verhindern, daß sie von Suchmaschinen indiziert wird.)

Die erste ReWriteCond-Anweisung sorgt dafür, daß es keine Probleme gibt, wenn der Browser oder Proxy die Adresse der vorherigen Seite (Referer) nicht meldet. Die Angabe [NC] bedeutet "No Case", Groß- und Kleinschreibung wird also ignoriert. Das R in [R,L] bedeutet Redirection (Umleitung), das L beendet die Umleitungs-Regeln.

Spambots und Sauger blockieren

Mit der folgenden .htaccess-Datei ist es möglich, bekannte Spambots auszusperren; das sind Suchroboter, die Webseiten nach E-Mail-Adressen durchsuchen, um dann Werbe-Mails zu versenden. Ferner wird das Saugprogramm Wget ausgesperrt, das ganze Websites anhand der enthaltenen Links ausliest. In beiden Fällen liefert der Webserver dann den Status 403 = Forbidden zurück.

ErrorDocument 403 /error403.htm
ErrorDocument 404 /error404.htm
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} (Email|Crescent|^wget|^$) [NC]
RewriteRule !error - [F]

Die ersten beiden Zeilen definieren für die Fehler 403 (forbidden) und 404 (file not found) zwei passende HTML-Dateien, die dann angezeigt werden. Die folgenden Zeilen sorgen dafür, daß Browser bzw. Robots, in deren Identifikation irgendwo die Worte Email oder Crescent vorkommen, deren Identifikation mit wget beginnt (^=String-Anfang) oder die sich überhaupt nicht identifizieren (^$ = Leerstring), den Status Forbidden erhalten, der zur Anzeige der Datei error403.htm führt. Damit diese Fehlerdatei selbst aber angezeigt werden kann, werden Dateien, die die Zeichenfolge "error" enthalten, vom Forbidden-Status ausgenommen.

Dateitypen

Außer Text können Web-Seiten auch Bilder, Download-Dateien und Multimedia-Elemente enthalten. Im Web-Server wird bestimmten Dateiendungen jeweils ein MIME-Inhaltstyp zugewiesen (Multipurpose Internet Mail Extensions), der im HTTP-Header übertragen wird, so daß der Browser weiß, was er mit den folgenden Daten anfangen soll, selbst dann, wenn er die Dateiendung selbst nicht kennt. Die folgende Übersicht nennt ein paar häufige Dateitypen, ohne einen Anspruch auf Vollständigkeit zu erheben.

Endung MIME-Typ Kompression Verwendung
asp
avi
cdf
gif
htm, html
ico
jpe, jpg, jpeg
js
m3u, mp3url
mid
mov, qt
mp3
mpe,mpeg,mpg
png
ra
ram, rm
shtml, shtm, sht
swf
txt
viv, vivo
wav
wml
zip
Sonstige
application/x-asap
video/x-msvideo
application/x-netcdf
image/gif
text/html
image/ico
image/jpeg
application/x-javascript
audio/x-mpegurl
audio/x-midi
video/quicktime
audio/x-mpeg
video/mpeg
image/png
audio/x-realaudio
audio/x-pn-realaudio
text/html
application/x-shockwave-flash
text/plain
video/vivo
audio/x-wav
text/vnd.wap.wml
application/x-zip-compressed
application/octet-stream
keine
verlustbehaftet
keine
verlustfrei
keine
keine
verlustbehaftet
keine
keine
keine
verlustbehaftet
verlustbehaftet
verlustbehaftet
verlustfrei
verlustbehaftet
verlustbehaftet
keine
keine
keine
verlustbehaftet
keine
keine
verlustfrei
je nach Typ
Active Server Pages
Videosequenzen
Channel Definition File
Bilder bis 256 Farben
HTML-Text
Grafik-Icon
Bilder (typ. Fotos)
Javascript-Dateien
Link-Datei zu MP3-File
Synthesizer-Musik
Apple-Quicktime-Video
Audio (typ. Musik)
Videosequenzen
Weiterentwickl.von GIF
Echtzeit-Audio
Echtzeit-Video/Audio
HTML mit SSI
Shockwave-Flash
Reiner ASCII-Text
Vivo-Video
Wave-Audio
WAP-WML-Seiten
Download-Dateien
Beliebige andere

Die Spalte "Kompression" gibt an, ob die Information in den Dateien in komprimierter Form vorliegt, und ob die Kompression verlustbehaftet ist oder nicht. Verlustbehaftete Verfahren wie JPG oder MP3 nehmen im Interesse einer geringeren Dateigröße bewußt in Kauf, daß die ursprüngliche Information nicht in der vollen Qualität des Originals wiedergewonnen kann, und nutzen dabei Schwächen der menschlichen Sinnesorgane aus. Bei Bildern sind folgende Formate üblich:

Damit sich Seitenteile nicht während des Ladens von Bildern dauernd verschieben, ist es sinnvoll, die Bildgröße mit anzugeben (Attribute width und height im img-Tag). Beispiel:

<a href="neu.htm"><img src="pic/neu.gif" alt="Neu!" border="0" width="40" height="30"></a>

Der Browser kann dann auf der Seite von vornherein den nötigen Platz für das Bild reservieren. Ferner kann man mit alt="..." einen Text angeben, der nicht nur angezeigt wird, wenn das Bild aus irgend einem Grund nicht geladen wird, sondern auch auch beim Überfahren des Bildes mit der Maus. Die Angabe border="0" verhindert einen Rahmen um das Bild, wenn es gleichzeitig als Link dient.

Design-Tips

Wer im Web surft, stößt immer wieder auf Seiten, die nicht korrekt angezeigt werden, die unglaublich langsam sind, bei denen Links nicht funktionieren oder die Script-Fehlermeldungen produzieren. Damit Sie selbst solche Fehler vermeiden, hier ein paar Web-Design-Tips.

Es ist natürlich zeitaufwendig, alle Seiten manuell auf fehlerhafte Links, falsche Pfadangaben, DOS-Umlaute und ähnliche Probleme zu überprüfen. Ein Tool wie die Freeware TopSite von Shamrock Software findet solche typischen Fehler per Knopfdruck.

Mit Seiten, die spezielle Plugins erfordern, sollte man sehr sparsam umgehen. Ein Beispiel dafür ist Flash von Macromedia, das animierte Grafiken und Texte erlaubt. Die Nachteile dieser Technologie gegenüber echtem HTML:

Deshalb sollte Flash bestenfalls auf Unterseiten eingesetzt werden, bei denen eine Animation zur Verdeutlichung von Inhalten erforderlich ist, aber keinesfalls zur Navigation auf der Homepage.

Barrierefreie Seiten

Das Behindertengleichstellungsgesetz vom 27. April 2002 (BGBl. I S. 1467) fordert in § 11 Abs. 1, daß die Webseiten deutscher Behörden auch für Behinderte (zum Beispiel Blinde) uneingeschränkt zugänglich, also barrierefrei sein müssen. § 11 Abs. 2 sieht ausdrücklich vor, daß das zumindest auf freiwilliger Basis auch für andere, nicht von Behörden erstellte Webseiten gelten sollte.

Die Verordnung hat nicht das Ziel, Sonderlösungen (z.B. Spezialseiten) für Behinderte zu fordern, sondern die für nicht behinderte Menschen konzipierten Webseiten so zu verbessern, daß auch Behinderte damit klarkommen. Bedenken Sie, daß Behinderte sich in ihren kognitiven und mechanischen Fähigkeiten stark von anderen Menschen unterscheiden:

Bei Computern mit Sprachausgabe wird der Text einer Seite stückweise ausgegeben. Springt man z.B. mit der Tab-Taste von einem Link zum nächsten, wird der Link-Text gesprochen, und man kann mit der Enter-Taste zum Link-Ziel springen. Bei Bildern wird der ALT-Text als Sprache ausgegeben. Javascript-Navigationselemente können meist nicht benutzt werden.

Daraus resultiert eine Reihe von Anforderungen an Webseiten, die teilweise bereits auch bei den Design-Tips erwähnt wurden, weil sie keineswegs nur für Behinderte sinnvoll sind. Die wichtigsten sind:

Generell läßt sich sagen: Je stolzer ein Web-Designer auf seine glanzvolle Programmier- und Gestaltungs-Leistung ist, desto ungeeigneter ist die Seite für Behinderte. Nach wie vor sind die Seiten selbst großer Firmen für Sehbehinderte und Blinde, die z.B. als Kunden sehr wohl zur Zielgruppe gehören, völlig unbrauchbar.

Impressum laut Teledienstegesetz (TDG)

Firmen müssen bei ihrem Web-Auftritt laut dem deutschen Teledienstegesetz (TDG) mindestens folgende Angaben bereitstellen:

  1. den Namen und die Anschrift, unter der sie niedergelassen sind, bei juristischen Personen zusätzlich den Vertretungsberechtigten (z.B. GmbH-Geschäftsführer),
  2. Angaben, die eine schnelle elektronische Kontaktaufnahme und unmittelbare Kommunikation mit ihnen ermöglichen, einschließlich der Adresse der elektronischen Post (siehe unten),
  3. soweit der Teledienst im Rahmen einer Tätigkeit angeboten oder erbracht wird, die der behördlichen Zulassung bedarf, Angaben zur zuständigen Aufsichtsbehörde,
  4. das Handelsregister, Vereinsregister, Partnerschaftsregister oder Genossenschaftsregister, in das sie eingetragen sind, und die entsprechende Registernummer,
  5. soweit der Teledienst in Ausübung eines Berufs ... (mit gesetzlicher Erfordernis einer mindestens dreijährigen Ausbildung) angeboten oder erbracht wird, Angaben über
    a) die Kammer, welcher die Diensteanbieter angehören,
    b) die gesetzliche Berufsbezeichnung und den Staat, in dem die Berufsbezeichnung verliehen worden ist,
    c) die Bezeichnung der berufsrechtlichen Regelungen und dazu, wie diese zugänglich sind,
  6. in Fällen, in denen sie eine Umsatzsteuer-Identifikationsnummer nach § 27a des Umsatzsteuergesetzes besitzen, die Angabe dieser Nummer.

Die Formulierung "...einschließlich der Adresse der elektronischen Post" bedeutet übrigens nicht zwangsweise, daß man einen von Spam-Robots (Spambots) auffindbaren mailto:-Link benötigt, der dann dazu führt, daß man mit unerwünschten Werbe-Mails überschüttet wird. Zu einer Mail-Adresse im Klartext gibt es beispielsweise folgende Alternativen:

  1. eine mit Hilfe Javascript mit document.write aus mehreren Strings zusammengebastelte Mail-Adresse, die ein Spam-Robot nicht findet;
  2. ein Mail-Formular ohne sichtbare Mail-Adresse, wobei die "Adresse der elektronischen Post" in diesem Fall die http-Adresse dieses Formulars ist;
  3. eine Mail-Adresse als Grafik (z.B. GIF-Bild, natürlich wieder ohne mailto:-Link).

Browser-Bugs

Die meisten Besucher dieser Seiten benutzen laut Server-Statistik derzeit einen Microsoft Internet Explorer (MSIE) mit einer Version ab 4.0. Ansonsten besitzt nur noch Netscape 4.x einen relevanten Anteil. Ältere Browser wie IE 3.0 und Netscape 3 mit ihrer eingeschränkten Javascript- und CSS-Funktionalität sind weitgehend verschwunden, Netscape 6 konnte sich wegen zahlreicher neuer Bugs (noch?) nicht recht durchsetzen. Andere Browser wie Arachne (der einzige halbwegs brauchbare Browser für MS-DOS), Opera oder Amaya spielen nach wie vor so gut wie keine Rolle. Es ist deshalb sinnvoll, Web-Seiten in erster Linie so zu gestalten, daß sie zumindest mit dem MS-IE ab Version 4.0 und mit Netscape 4.7 korrekt dargestellt werden.

Bugs im Internet-Explorer ab Version 4.0

Bugs im Netscape-Communicator 4.0-4.7

Hinweise zu Netscape 6.0

Die Netscape-Version 6.0 wurde in weiten Teilen neu entwickelt. Zwar enthält sie eine neue Rendering Engine (das ist der Programmteil, der HTML-Seiten grafisch auf den Bildschirm bringt), insgesamt wurde der Browser aber nicht nur extrem speicherhungrig, sondern selbst auf modernen, schnellen PCs wird er auch ziemlich langsam geladen. Die von Netscape 4.x bekannten Layer zum dynamischen Positionieren von Seitenteilen werden nicht mehr unterstützt; statt dessen wurde eine neue DHTML-Syntax eingeführt (Dynamic HTML), die zwar entfernt der des MS-IE ähnelt, jedoch mit dieser leider nicht kompatibel ist. Wer auf einer Seite DHTML einsetzt und den Netscape 6 trotz seiner relativ geringen Akzeptanz von kaum 1 % der Internet-Benutzer berücksichtigen möchte, muß deshalb drei unterschiedliche Verfahren unterstützen:

Hinweise zu Opera 6.04

Hinweise zu Arachne 1.70 (DOS-Browser)


Inhaltsverzeichnis/Copyright - © Shamrock Software GmbH - Das Kopieren des Inhalts auf andere Websites ist nicht gestattet.