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.
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 dass hier auf eine ausführliche Auflistung aller HTML-Tags verzichtet wird. Bedenken sollte man auch, dass 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> Deklariert den folgenden Text als HTML
<head> Hier beginnt der HTML-Header
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
Zeichencode-Deklaration
<title>Testseite</title> Erscheint in der Browser-Titelleiste
</head> Ende des HTML-Headers
<body> Beginn der eigentlichen Nutzdaten
<!-- Beispiel --> So kann man Kommentare einfügen
<h2>Test</h2> Überschrift der Größe 2 (1=am
größten)
<p><img src="bild.jpg" alt="Test"></p> Ein Absatz mit einem
JPG-Bild, alternativer Text
<hr>: Eine horizontale Linie wird eingefügt
<p>Ein Textabsatz<br>mit zwei Zeilen</p>
Textabsätze werden automatisch umbrochen, <br> erzwingt eine neue Zeile
<p><a href="/">Zur Startseite</a></p> Ein Link
zur Indexseite der Web-Site
</body> Ende der HTML-Nutzdaten
</html> 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 muss 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 dass 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 als sog. Entities codiert, nämlich als < (less than) und > (greater than). Wenn Sie in diesem Text etwa "<p>" lesen, steht in der Datei in Wirklichkeit "<p>". Dadurch muss natürlich auch das Ampersand-Zeichen & umcodiert werden; es wird in der HTML-Datei zu "&". Manchmal werden auch deutsche Umlaute umcodiert, etwa "ä" zu "ä", aber eigentlich war das nur bei den früheren 7-Bit-Übertragungsstrecken wirklich nötig. Wenn man im HTML-Header den Zeichensatz eindeutig angibt (z.B. ISO 8859-15), darf man Umlaute unverändert in den Text schreiben.
Das Euro-Zeichen ¤ weist eine besondere Problematik auf. Im Zeichencode ISO-8859-1 existiert es streng genommen nicht; Dokumente, die es verwenden, müssen entweder in ISO-8849-15 oder in UTF-8 codiert sein. Allerdings fügen in beiden Varianten viele Quelltext-Editoren den Windows-Zeichencode für ¤ ein, der im Browser dann falsch erscheint. Umgekehrt erscheint ein im Browser mit ISO-8859-15 korrekt angezeigtes Euro-Symbol im Quelltext-Editor oft fälschlich als Währungssymbol ¤ und kann dort auch so zum Einfügen des Euro-Symboles verwendet werden.
Standardisierungsbemühungen führten dazu, dass 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">
Oft wird man aber HTML 4.01 verwenden:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Dabei steht EN für eine englischsprachige Typdefinition (trifft bei HTML immer zu; es ist nicht die Dokument-Sprache gemeint!). DOCTYPE muss immer groß geschrieben werden! Wie "Transitional" und "loose" schon suggerieren, ist diese Variante noch relativ großzügig hinsichtlich der Kompatibilität mit älteren Browsern und erlaubt sowohl ältere Elemente wie FONT, ALIGN, FRAME und IFRAME (was bei "strict" nicht mhr erlaubt ist, siehe unten) als auch gegenüber HTML 3.2 neuere wie etwa Style Sheets (CSS). Außer dem Typ selbst ist auch angegeben, wo im Web die Typdefinition zu finden ist. Wenn man auf diese Angabe verzichtet, sieht es so aus:
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Die Folge davon ist, dass (ähnlich wie beim vollständigen Fehlen des DOCTYPE) die gängigen Browser dann den sogenannten Quirks-Modus benutzen, der absichtlich eine Reihe von Darstellungsfehlern früherer Browser-Generationen simuliert. Dazu gehört beispielsweise, dass in Tabellen die Formatangaben des HTML-Body nicht übernommen werden (z.B. Zentrierung und Schriftgröße) oder dass hinter Pixelangaben in Stylesheets kein "px" nötig ist.
Für Framesets wird folgende Variante verwendet (das Wort Transitional ist hier überflüssig, da es bei der Strict-Variante ohnehin keine Frames gibt):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
Wer keine HTML-Elemente wie FONT, ALIGN, CENTER, FRAME und IFRAME mehr benutzt, auf das Link-Attribut TARGET verzichtet und und zur Formatierung 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">
Die neueste Version ist HTML5, eine Obermenge von HTML 4.01; hier sieht das gan einfach aus:
<!DOCTYPE html>
Tabellen sind ein häufig verwendetes Element zur Gestaltung einer Webseite, auch als blinde Tabellen (d.h. ohne sichtbare Rahmen) zur Positionierung von Text, Bildern und Eingabefeldern. 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>
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. - Zur Positionierung von Elementen stehen alternativ auch CSS-Methoden zur Verfügung.
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.
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@example.com&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.
Bei einem Textfeld kann man mit <textarea wrap="hard"> erzwingen, dass Zeilenumbrüche genau so übertragen werden, wie sie bei der Eingabe sichtbar sind. Mit <textarea wrap="soft"> werden sie dagegen nur dort übertragen, wo man wirklich die Enter-Taste gedrückt hat. Das dafür benutzte wrap-Attribut ist im HTML-Standard zwar nicht vorgesehen, wird aber von fast allen Browsern verstanden und häufig benutzt, da es bisher keine Alternative dafür gibt.
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.
Man kann den Browser-Bildschirm in mehrere Teilfester unterteilen, in denen unterschiedliche Dokumente bzw. Dateien dargestellt werden. Beispiel:
<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, dass 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 muss
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.
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, dass 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, dass die Suchmaschine diese Seite nicht indizieren
soll, und nofollow, dass sie auch keinen Links folgen soll, die auf dieser
Seite stehen.
Außer Meta-Tags haben allerdings auch andere Parameter wesentlichen Einfluss 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 Tipps 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.
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:
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.
Außer mit Meta-Tags kann man auch mit einer Datei robots.txt im Hauptverzeichnis des Servers verhindern, dass Suchmaschinen bestimmte Dateien und Verzeichnisse indizieren. Die folgende Beispieldatei vermeidet, dass Suchmaschinen Dateien im Verzeichnis cgi-bin indizieren:
# Beispiel für robots.txt
User-agent: *
Disallow: /cgi-bin/
Dabei bedeutet die Zeile "User-agent: *", dass 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.
Leider halten sich allerdings nicht alle Suchmaschinen an die Vorgaben in robots.txt, z.B. wurde dies bei Yandex und Baidu beobachtet.
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.
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 muss im ASCII-Modus (nicht binär) per FTP zum Server übertragen werden.
Eine typische Verwendungsmöglichkeit ist die Angabe einer Error-Seite, die bei bestimmten Server-Fehlercodes aufgerufen werden soll. Wenn Sie beispielsweise möchten, dass 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, dass Suchmaschinen die fehlerhafte Adressen indizieren.
Eine weitere Möglichkeit ist das Schützen von Unterverzeichnissen, so dass diese nur nach Eingabe von Benutzername und Passwort zugänglich sind. Dazu muss 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.
Bitte achten Sie beim Transfer von .htaccess und .htpasswd zu einem Unix-Webserver darauf, dass 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.
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 dass 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
Oft ist es unerwünscht, dass 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, dass 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, dass sie von Suchmaschinen indiziert wird.)
Die erste ReWriteCond-Anweisung sorgt dafür, dass 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.
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, dass 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.
Unternehmen, die Kreditkarten-Zahlungen auf Webseiten akzeptieren, sind zur Einhaltung von Mindeststandards bei der Verschlüsselung der Bestellseite und des zugehörigen Formular-Scripts verpflichtet. Mit der folgenden Zeile in .htaccess wird die veraltete SSL-Version 2 mit dem Fehlercode 403 = Forbidden abgelehnt, und es werden nur SSL-Verbindungen mit mindestens 128 Bit Schlüssellänge akzeptiert:
SSLRequire %{SSL_PROTOCOL}!="SSLv2" && %{SSL_CIPHER_USEKEYSIZE}>=128
Selbstverständlich muss aber auch die gesamte weitere Bearbeitung der Kreditkartendaten gesichert erfolgen. - Erwähnenswert ist, dass die beiden hier verwendeten SSL-Environment-Variablen zwar in .htaccess, nicht aber in einem CGI-Script zur Verfügung stehen.
| Endung | MIME-Typ |
| 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 htm, xml o.ä. 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 xml+xhtml application/x-zip-compressed application/octet-stream |
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 dass 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.
Dateitypen mit verlustbehafteten Kompressionsverfahren wie JPG oder MP3 nehmen im Interesse einer geringeren Dateigröße bewusst in Kauf, dass 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.
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-Tipps.
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.
Das Behindertengleichstellungsgesetz vom 27. April 2002 (BGBl. I S. 1467) fordert in § 11 Abs. 1, dass 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, dass 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, dass auch Behinderte damit klarkommen. Bedenken Sie, dass 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-Tipps erwähnt wurden, weil sie keineswegs nur für Behinderte sinnvoll sind. Die wichtigsten sind:
Generell lässt 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.
Firmen müssen bei ihrem Web-Auftritt laut dem deutschen Telemediengesetz (TMG, früher Teledienstegesetz = TDG) mindestens folgende Angaben bereitstellen:
Die Formulierung "...einschließlich der Adresse der elektronischen Post" bedeutet übrigens nicht zwangsweise, dass man einen von Spam-Robots (Spambots) auffindbaren mailto:-Link benötigt, der dann dazu führt, dass man mit unerwünschten Werbe-Mails überschüttet wird. Zu einer Mail-Adresse im Klartext gibt es einige Alternativen:
Nach einer Entscheidung des Landgerichts Essen vom 19.09.2007 (Az. 44 O 79/07) ist ein Kontaktformular als Ersatz für eine Mail-Adresse nicht ausreichend.
Wer fremde Webseiten besucht, stellt fest, dass die Autoren von Webseiten offenbar immer wieder dieselben Fehler machen. Man möchte sie fast als Anfängerfehler bezeichnen, aber diejenigen, die sie begehen, bezeichnen sich merkwürdigerweise selbst nur selten als Anfänger. Ohne grundlegende Kenntnise von Grafik, Typographie, Rechtschreibung, HTML und CSS lassen sich aber keine professionellen Webseiten gestalten.
Viele Inhalte werden nicht als HTML-, sondern als PDF-Dateien eingebunden.
PDF-Dateien sind nur sinnvoll, wenn es darum geht, Inhalte formatgetreu auf
einen Drucker auszugeben. Das Web basiert aber auf HTML, nicht auf PDF. Browser
können meist selbst keine PDF-Dateien darstellen, sondern benötigen dafür ein
Plug-In. Wegen der regelmäßig bekannt werdenden Sicherheitsprobleme etwa des
Adobe-Readers scheuen sich viele Benutzer generell (und mit Recht) davor,
PDF-Dateien zu öffnen. Dasselbe gilt übrigens ebenso für Flash-Inhalte sowie
natürlich für Dokumente, die als Bilddateien aus einem Scanner vorliegen.
Die Title- und Description-Angaben im HTML-Header fehlen oder sind
nichtssagend.
Die Folge ist, dass man den Ergebnissen von Suchmaschinen oft nicht ansieht,
worum es auf der Seite überhaupt geht, wie etwa "Meine Homepage" als Titel. Die
Keyword-Angaben sind dagegen praktisch irrelevant, sie werden von allen
gängigen Suchmaschinen ignoriert.
Große Bilder werden nur per Width und Height im HTML-Code verkleinert.
Die Bilddatei selbst ist z.B. 1920 x 1024 Pixel groß und wird in der HTML-Seite
künstlich auf z.B. 480 x 256 Pixel verkleinert dargestellt. Die Dateigröße des
Bildes bleibt somit unnötig groß, was die Ladezeit insbesondere bei langsameren
Internet-Zugängen oder mobiler Benutzung in die Höhe schnellen lässt. Die
Bilddatei sollte selbst immer nur die tatsächlich erforderlichen Abmessungen
haben, ohne dass im Browser eine Skalierung erfolgen muss, die oft auch zu
hässlichen Artefakten führt.
Die Seiten sind für eine zu große Mindest-Fensterbreite konzipiert.
Man konnte lange davon ausgehen, dass praktisch alle PCs 1024 x 600 Pixel oder
mehr anzeigen können - das ist die typische Netbook-Auflösung. Inzwischen sind
aber auch Tablets und Smartphones mit einer geringeren Auflösung weit
verbreitet. Ein dynamisches, "flüssiges" Layout, das sich von selbst an die
verfügbare Fensterbreite anpasst, ist in jedem Fall besser und erleichtert auch
das Ansehen auf mobilen Geräten wie Smartphones und Tablets. Seiten, die eine
Bildschirmbreite von mehr als 1024 Pixeln voraussetzen und andernfalls ein
horizontales Scrollen erfordern, waren nie und sind auch heute nicht brauchbar.
Der Browser-Cache wird nicht benutzt.
Der Server sollte mit einer HTTP-Header-Zeile (damit ist nicht der Header der
HTML-Datei gemeint!) wie z.B. "Cache-Control: max-age=57600" dem Browser
mitteilen, wie lange die Datei ungeprüft aus dem Cache genommen werden darf,
nachdem sie das erste Mal geladen wurde. Ferner muss der Server eine Zeile
"Last-modified: ..." Datum und Uhrzeit der letzten Änderung mitgeben, damit der
Browser später mit "If-modified-since: ..." die Datei nur dann neu erhält, wenn
sie sich seitdem geändert hat. Insbesondere bei Content-Management-Systemen
funktioniert dieser Mechanismus leider oft nicht ohne weiteres korrekt, was zu
einem unnötig langsamen Laden von Seiten führt.
Der HTML-Code ist nicht valide und funktioniert nicht mit allen üblichen
Browsern.
Es genügt nicht, eine HTML-Seite nur mit dem Browser zu testen, den man gerade
selber installiert hat. Es ist unbedingt zweckmäßig, den HTML- und CSS-Code mit
dem W3C-Validator
zu überprüfen. Bei validen Seiten ist zu erwarten, dass sie mit allen Browsern
funktionieren. Es ist geradezu peinlich, wie viele Fehler der Validator sogar
bei Webseiten von vermeintlich professionellen Webdesign-Agenturen ausspuckt!
Und: Eine Bemerkung wie "Optimiert für Firefox 5.0" ist völlig sinnlos, da man
keinen Benutzer zwingen kann, einen bestimmten, womöglich zum Zeitpunkt des
Lesens schon veralteten Browser zu installieren, nur um diese eine Seite
korrekt anzuzeigen.
Javascript-Funktionen sind browser-spezifisch.
Viele Seiten nutzen bestimmte Javascript-Funktionen, die nur mit einem
bestimmten Browser (z.B. Microsoft-IE) oder sogar nur mit einer bestimmten
Version funktionieren. Da es keinen Javascript-Validator gibt, muss man selbst
Tests mit unterschiedlichen Browsern durchführen, wenn man auf Javascript nicht
verzichten will. Andernfalls macht z.B. ein Javascript-basiertes Menüsystem die
ganze Website unbenutzbar, wenn man den "falschen" Browser verwendet. Generell
sollte aber jede Seite ohnehin auch bei abgeschaltetem Javascript noch
bedienbar sein.
Links führen ins Leere.
Wenn Sie externe Links verwenden, müssen Sie selbst regelmäßig alle daraufhin
überprüfen, ob sie noch funktionieren. Es liegt in der Natur des Internets,
dass sich Web-Adressen häufig ändern; ganz besonders gilt das für "deep links",
also solche, die nicht zur Startseite einer Domain, sondern zu einer Unterseite
führen.
Links sind nicht als solche erkenntlich.
Links sollten klar als Links erkennbar sein, z.B. durch einheitliche farbliche
Kennzeichnung, typischerweise auch durch Unterstreichung. Umgekehrt heißt das
auch, dass Worte, die keine Links sind, nicht unterstrichen werden sollten, da
die meisten Besucher Unterstreichungen gewohnheitsmäßig für Links halten.
Bei Termin-Angaben fehlt das Jahr.
Oft überdauern Webseiten mehrere Jahre, werden aber nicht unbedingt dauerhaft
gepflegt. In solchen Fällen ist eine Angabe wie "Betriebsfest am 11. August"
geradezu mutwillig irreführend, insbesondere dann, wenn auf der Seite nicht
klar ersichtlich ist, wann sie zum letzten Mal bearbeitet wurde. Auf die
Nennung des Jahres kann nur verzichtet werden, wenn es die Seite so im nächsten
Jahr garantiert nicht mehr geben wird.
Das Lesezeichen-Symbol fehlt.
Die Datei favicon.ico wird von den meisten Browsern
dazu benutzt, in Lesezeichen und manchmal auch neben der URL-Anzeige ein Symbol
einzublenden. Wenn sie auf dem Webserver fehlt, erscheint entweder gar kein
Symbol oder das dem Browser zugeordnete Icon.
Zu viele Rechtschreibfehler.
Wer in der Rechtschreibung nicht ganz sicher ist, sollte seine Texte unbedingt
von jemandem gegenlesen lassen, der sich damit besser auskennt, um sich im Web
nicht öffentlich zu blamieren. Leider findet die automatische
Rechtschreibprüfung etwa in Frontpage oder anderen HTML-Editor-Programmen die
allzu häufig vorkommende Verwechslung von "das" und "dass" nicht. Ebenso lässt
sie einen bei seit/seid oder tot/Tod im Stich und natürlich erst recht bei
Komma-Fehlern. Lediglich Worte, die es so überhaupt nicht gibt, wie etwa das
beliebte "Standart", findet sie zuverlässig.
Inhaltsverzeichnis/Copyright - © Shamrock Software GmbH - Das Kopieren des Inhalts auf andere Websites ist nicht gestattet.