Hast du schon einmal eine Webseite enttäuscht verlassen, weil sie dir 3 Wochen alte Fußballergebnisse angezeigt hat, unter aktuelle Neuigkeiten altes Zeugs stand oder auf andere Weise veraltet schien? Fast schon selbstverständlich schüttelt man da nur den Kopf und kritisiert gedanklich den Autor. Aber Halt! Vielleicht wird dir ja gar nicht die aktuelle Version der Webseite angezeigt, vielleicht hat sich die Webseite ja geändert, nur du hast es nicht mitbekommen! Wie geht so etwas?

Rufst du eine Webseite zum allerersten Mal auf, sind die Ladezeiten deutlich länger als beim zweiten Mal. Der Grund liegt darin, dass Dein Internet-Browser die Webseite oder zumindest Teile daraus im Browser-Cache auf Deinem Rechner ablegt. Lädst du eine Webseite innerhalb eines kurzen Zeitraumes ein zweites Mal, so holt der Browser die Seite bzw. Teile daraus nicht über das Internet sondern von Deiner Festplatte. So kann es vorkommen, dass auf Deinem Rechner noch eine alte Version einer Webseite abgespeichert ist und diese angezeigt wird, obwohl der Webmaster bereits die Seite überarbeitet hat.

Den eigenen Browser-Cache kann man selbst leeren, so dass dieses Problem gelöst scheint. Schwieriger wird es jedoch, wenn der Internet-Provider wie T-Online oder AOL einen eigenen Proxy-Cache verwendet, was gewöhnlich der Fall ist. Wozu dient ein solcher Proxy-Cache? Ein solcher Speicher erledigt im Prinzip die gleiche Aufgabe wie der Browser-Cache auf Deinem Rechner, nur eben für eine ganze Surfer-Gemeinde zusammen. Die Startseite meiner Homepage www.patrickwagner.de/index.html wird z.B. täglich mindesten 50 Mal von einem T-Online Surfer aufgerufen. Da spart sich T-Online die Mühe, jedes Mal diese Seite von meinem Server herunterzuladen. Die Seite wird einmal von meinem Server geholt, im T-Online Proxy-Cache gespeichert und von dort aus direkt an T-Online Surfer weitergeschickt.

Ein solcher Proxy-Cache erhöht die Ladezeiten einer Webseite und schont Netzressourcen. Bei Seiten, die sich nur selten ändern, bringt ein solcher Proxy-Cache nur Vorteile mit sich. Bei Seiten, die sich jedoch wöchentlich oder gar täglich ändern, führt ein solcher Proxy-Cache zu veralteten Anzeigen. Als Surfer kann man dagegen nichts machen, hier ist der Webmaster gefragt. Mit Hilfe des expires Meta-Tags kann man den Browser veranlassen, nach einer gewissen Zeit die Seite von der Originaladresse herunterzuladen und nicht mehr vom Browser-Cache oder Proxy-Cache.

<head>
  <meta http-equiv="expires" content="0">
</head>

Das expires Meta-Tag bestimmt, nach welcher Zeit die Seite veraltet ist, d.h. ein Neuladen von der Originaladresse notwendig wird. Hinter content gibt man die Zeit in Sekunden an. content="0" bedeutet also, dass die Seite nach 0 Sekunden bereits veraltet ist und vom Original-Server neu geladen werden muss. Auf diese Weise zwingt man den Browser, die Seite immer vom Original-Server zu holen und Cache-Speicher zu umgehen. Mit content="86400" bestimmt man, dass die Seite immer genau einen Tag (24x60x60 Sekunden) gültig ist.

Es liegt also nahe, dieses Meta-Tag in den Header einer jeden Webseite zu setzen, damit ein Besucher immer die aktuelle Seite angezeigt bekommt. Die Anwendung dieses Meta-Tags hat jedoch auch Nachteile: Jeder Surfer holt die Informationen von Deinem Surfer; dies kostet Ressourcen und bei bestimmten Providern auch Übertragungsgebühren. Außerdem wird die Seite dadurch langsamer und nichts stört Surfer bekanntlich mehr als lange Ladezeiten.

Das Meta-Tag expires sollte man also nur gezielt bei denjenigen Webseiten einsetzen, die sich tatsächlich wöchentlich oder gar täglich ändern. Für Webseiten, die sich nur einmal im Monat oder gar überhaupt nicht mehr ändern, ist dieses Tag nicht nur überflüssig sondern sogar störend.

Automatische Weiterleitung

Wie kann es geschehen, dass du in deinem Browser die Adresse www.meineseite.de eingibst und auf der Seite www.patrickwagner.de landest? Es gibt ein Meta-Tag, welches eine automatische Weiterleitung (engl. forwarding) bewirkt. Wozu benötigt man eine automatische Weiterleitung, wann sollte sie eingesetzt werden?

Viele Webseiten-Besitzer machen ihre Anfäge mit einer kostenlosen Sub-Domain http://mitglied.lycos.de/patwag und kaufen sich erst nach ein paar Jahren, wenn sie am Homepage-Basteln wirklich Gefallen gefunden haben, eine sogenannte echte Domain wie www.patrickwagner.de. Bis zu diesem Zeitpunkt haben schon einige Besucher die alte Adresse als Favorit gespeichert und auch Suchmaschinen finden Inhalte der alten Seite. Um solche Besucher nun nicht ins Leere zu führen, lässt man die alte Domain aktiv, leitet die Besucher jedoch gleich zur neuen Adresse weiter.
Wenn eine Webseite immer größer wird, baut man hin und wieder die Verzeichnisstruktur um oder ändert Dateinamen. Veröffentliche ich z.B. meine Tipps zum Thema Geldanlage nicht mehr in der Datei Geld_Anlegen.html sondern in der Datei Finanzen/index.htmll so lösche ich keineswegs die alte Datei, da sie ja immer noch von Besuchern aufgesucht wird. Ich leiter Besucher der alten Datei einfach weiter auf die aktuelle und lösche die alte Datei erst, wenn ich sicher bin, dass sie nicht mehr besucht werden will.
Professionelle Webseiten verwenden die automatische Weiterleitung auch, um Besucher, die eine falsche Adresse im Browser eingeben, auf die richtige weiterzuleiten. In meinem Fall www.patrickwagner.de könnte z.B. einer meiner Bekannten nicht wissen, wie man meinen Vornamen (Patrick, Patrik, Patric) schreibt. Um sicher zu gehen, dass jeder meine Webseite findet, würde ich also zusätzlich die Domains www.patrikwagner.de und www.patricwagner.de reservieren und die Besucher auf meine richtige Domain www.patrickwagner.de weiterleiten.

Eine automatische Weiterleitung erreicht man mit einer einzigen Zeile im Header einer HTML-Datei. Das notwendige Meta-Tag hat die folgende Gestalt:

<head>
  <meta http-equiv="refresh" content="3; URL=https://www.meineseite.info">
</head>

Die Syntax, insbesondere die Anführungszeichen, wirkt etwas ungewöhnlich. Die einzelnen Elemente haben folgende Bedeutung: Die Zahl 3 hinter content= bedeutet, dass die Weiterleitung erst nach 3 Sekunden erfolgt. Steht hier eine Null, so wird die aufgerufene Seite überhaupt nicht angezeigt, sondern der Browser macht gleich die Weiterleitung. Die Adresse hinter URL= gibt das Ziel der Weiterleitung an. Dies kann wie hier eine Domain oder auch eine einzelne HTML-Datei sein.

Im folgeden Beispiel wird eine veraltete Seite geöffnet, die nur noch eine kleine Information für den Surfer enthält. Nach 5 Sekunden wird der Besucher automatisch zur aktuellen Seite weitergeleitet.

Wichtig: Die automatische Weiterleitung funktioniert zwar in allen gängigen Browsern, jedoch gehört sie nicht zum offiziellen HTML-Standard. Es kann also sein, dass sie auf einem speziellen Betriebssystem mit einem ungewöhnlichen Browser nicht funktioniert. Deshalb empfiehlt es sich immer, wie im obigen Beispiel einen Link anzugeben, der einen durch Anklicken auf die richtige Seite führt.

Link in neuem Fenster öffnen

Wenn ich dir auf meiner Seite einen Link wie diesen anbiete, dann öffnet sich die Seite immer in einem neuen Fenster. Schließlich will ich ja nicht, dass du meine Webseite ganz verlässt. Wie öffnet man eine Datei in einem neuen Fenster? Das folgende Beispiel zeigt den HTML-Code für den vorigen Link.

<a href="http://www.patrickwagner.de" target="_blank">Link wie diesen</a>

Mit dem Attribut target kann ich jedem Link ein Zielfenster angeben. Wer seine Webseite mit Frames aufbaut, übergibt damit normalerweise den Namen des Frames. In diesem Fall bedeutet der Wert _blank, dass die Seite www.patrickwagner.de in einem neuen Browser-Fenster geöffnet wird.

Bilder auf Webseiten sehr schnell laden

Das Laden eines Bildes auf einer Webseite kann je nach Internetverbindung eine beträchtliche Zeit in Anspruch nehmen. Die Ladezeit des Bildes lässt sich zwar nicht reduzieren, aber in bestimmten Situationen lässt sich der Zeitpunkt des Ladens bestimmen. Bietet man auf einer Webseite eine Bilderserie an, z.B. ein Foto-Album oder eine Cartoon-Serie, so kann man dem Besucher eine Menge Wartezeit ersparen, indem man die Bilder zeitversetzt in den Browser-Cache lädt.

Normalerweise werden die Bilder auf einer Webseite zuerst geladen und dann angezeigt. Klickt der Besucher auf Weiter zum nächsten Bild, so wird wieder zuerst ein neues Bild geladen, ehe dies angezeigt wird. Es gibt nun eine Möglichkeit, dass das folgende Bild immer dann geladen wird, während der Besucher noch das erste Bild anschaut, indem man auf die aktuelle Seite ein Einpixelbild des folgenden Bildes lädt, also z.B.:

<img src="nextPicture.img" alt="" width="1" height="1">

Während der Besucher also eine Seite in Ruhe anschaut wird das nächste Bild bereits geladen und als 1-Pixel-Minibild versteckt angezeigt. Klickt der Besucher dann auf nächstes Bild, so befindet sich das nächste Bild bereits im Browser-Cache und kann direkt in der gewünschten Größe angezeigt werden. Die Wartezeit für das Laden entfällt auf diese Weise praktisch ganz.

Fehlermeldung bzw. Umleitung beim Laden einer nicht existierenden Webseite

Jedem Surfer ist es schon einmal passiert, dass man die URL einer Webseite in den Browser eingegeben hat und eine Fehlermeldung 404 zurück kam. Dies liegt entweder daran, dass man sich vertippt hat oder dass eine einst existierende Webseite gelöscht wurde. Eine solche Fehlermeldung wird automatisch vom Server des Webhosters generiert. Man kann jedoch auch selbst eine Seite mit einer entsprechenden Fehlermeldung generieren oder den Besucher gleich auf eine andere Webseite umleiten.

Im Root-Verzeichnis des Web-Servers befindet sich eine Datei namens .htaccess bzw. man kann eine solche Datei erstellen. In diese Datei trägt man nun folgenden Text ein:

ErrorDocument 404 http://www.PatrickWagner.de/Fehlerseite.html

Ruft ein Surver eine nicht existierende Webseite auf, erhält er nicht einfach die Fehlermeldung 404 angezeigt, sondern genau die eigens erstellte HTML-Datei Fehlerseite.html. Auf dieser Seite kann man dem Besucher Hinweise gegeben, dass sich etwas geändert hat oder dass er die eingegebene URL nochmals überprüfen soll.

Natürlich muss der Besucher nicht auf eine spezielle Fehlerseite umgeleitet werden; man kann ihn auch einfach auf die Startseite umleiten, also:

ErrorDocument 404 http://www.PatrickWagner.de/index.html

Auch andere Fehler wie die 403 oder die 500 kann man auf diese Weise abfangen.

Änderungsdatum einer Webseite ermitteln

Findet man im Internet nach zum Teil langer Suche endlich eine interessante Seite mit nützlichen Informationen, so stellt sich sofort die Frage, wie alt die gefundenen Seiteninhalte eigentlich sind, ob sie nicht längst veraltet sind. Da hilft es auch nichts, wenn der Webmaster das Datum der letzten Änderung angibt; er könnte ja beim letzten Update vergessen haben, dieses Datum zu aktualisieren, oder mittels eines Scripts ständig das aktuelle Datum einblenden, um so den Eindruck zu erwecken, die Seite wäre stets top-aktuell.

Mit einem kleinen Trick kann man zumindest das letzte Änderungsdatum der entsprechenden Datei, die die Webseite beinhaltet, herausfinden. Dies sagt natürlich nichts über die Aktualität der Inhalte aus, nur über das Alter der Datei. Man surft also wie gewohnt zu einer Webseite, deren Alter man herausfinden möchte. Dann tippt man in das Adress-Feld des Browser das folgende kleine Java-Script ein:

javascript:alert(document.lastModified)

Ein Alert-Fenster öffnet sich, welches das Datum der letzten Änderung der aktuellen Webseite wiedergibt. Dieses Script hat die Einschränkung, dass es nur auf reinen Internet-Seiten funktioniert. Befindet sich die dargestellte Seite in einem Frame, so wird das Alter des Frame-Sets zurückgegeben.

Automatische Aufnahme in die Favoriten

Wenn mir eine Webseite gefällt und ich sie immer wieder besuchen möchte, füge ich sie meinen Favoriten hinzu. Dieser manuelle Vorgang lässt sich auch automatisieren bzw. bequemer machen, indem ein kleines JavaScript direkt auf der Webseite eingebunden wird. Dieses JavaScript kann automatisch beim Seitenaufruf (ist sehr nervig, wenn ich die Seite öfters aufrufe, also bitte nicht so machen) oder durch Anklicken eines Links gestartet werden. Der notwendige Script-Befehl ist sehr kurz:

<a href="JavaScript:window.external.AddFavorite(
'http://www.patrickwagner.de','Tipps und Tricks');">zur Favoritenliste</a>

Der Befehl AddFavorite() verlangt als erstes Argument die Internet-Adresse, die der Favoritenliste hinzugefügt werden soll, im Beispiel also http://www.patrickwagner.de, als zweites Argument die Bezeichnung des Favoriteneintrages, im Beispiel also Tipps und Tricks. Wenn du jetzt also meine Seite zur Favoritenliste hinzufügen willst, brauchst du nur den Link anklicken.

Erweiterte e-mail Links

Man kann jeden beliebigen Link so gestalten, dass man beim Anklicken eine e-mail verschicken kann. Der zugehörige HTML-Code ist sehr einfach:

<a href="mailto:mail@web.de">e-mail</a>

Beim Anklicken startet automatisch das Mail-Programm, erstellt eine neue e-mail und schreibt die Adresse in das An-Feld. Noch ziemlich unbekannt ist die Möglichkeit, in weitere Felder der neuen e-mail Eintragungen zu machen, zum Beispiel in die Betreffzeile wie in dieser e-mail.

<a href="mailto:mail@web.de?subject=Feedback">e-mail</a>

Eintragungen in die Betreffzeile macht man also ganz einfach, indem man hinter die e-mail Adresse ?subject= und den entsprechenden Text anhängt. Man kann auch direkt in den Textkörper Eintragungen machen, indem man ?body= und den entsprechenden Text anhängt, wie bei dieser e-mail:

<a href="mailto:mail@web.de?body=Hallo Patrick,">e-mail</a>

Auch mehrzeilige Texte wie in dieser e-mail können vorgegeben werden, indem man Zeilenumbrüche mit %0A (das erste Zeichen ist eine Null) festlegt:

<a href="mailto:mail@web.de?body=Hallo Patrick,%0Aich habe
eine Frage zu deiner Homepage.">e-mail</a>

Will man sowohl einen Text in der Betreffzeile als auch im Textkörper vorgeben, trennt man die beiden Vorgaben durch das & -Zeichen wie bei der folgenden e-mail.

<a href="mailto:mail@web.de?subject=Feedback&body=Hallo Patrick">
e-mail</a>

Auch die Felder cc und bcc lassen sich vorab mit Inhalten füllen, und man kann auch mehrere durch Strichpunkt getrennte e-mail Adressen in einer Zeile vordefinieren. Die folgende, abschließende e-mail vereint alle Möglichkeiten, feste Vorgaben zu machen.

<a href="mailto:mail@web.de;michael@firemail.de?
cc=karin@web.de;fritz@yahoo.de&bcc=hans@hotmail.com&subject=Feedback&
body=Hallo allerseits,%0Aich habe einen Vorschlag...">e-mail</a>

Zeilenumbruch erzwingen und verhindern

Ein mit HTML ausgezeichneter Text wird am Zeilenende automatisch umgebrochen, wenn der Seitenrand erreicht ist. Je nach Browser-Fenstergröße erfolgt der Zeilenumbruch an unterschiedlichen Stellen. Bei normalem Text ist es nicht sinnvoll, Zeilenumbrüche zu erzwingen oder zu verhindern. Es gibt jedoch Fälle, in denen man ohne solche Eingriffe in die Seitendarstellung zu keinem vernünftigen Ergebnis kommt.

Ein Zeilenumbruch innerhalb eines Absatzes wird mit dem <br> Tag (break) erzwungen. Das nachfolgende Beispiel zeigt eine Anwendung:

Patrick Wagner
Maximilianstraße 1
80000 München

Natürlich könnte man auch jede Zeile der Adresse (ist übrigens nicht meine) mittels <p> Tags in einen eigenen Absatz packen, doch dann hätte man große Zwischenräume zwischen den 3 Zeilen.

Es gibt auch Fälle, in denen es sinnvoll ist, einen Zeilenumbruch zu verhindern. Das beste Beispiel sind Maßangaben wie 250 km oder Geldbeträge wie 75 €, wo man nicht möchte, dass die Zahl am Ende einer Zeile und die Währung oder die Maßeinheit am Beginn der nächsten Zeile steht.

Um einen Zeilenumbruch zwischen zwei Wörtern oder Buchstaben zu unterdrücken wird anstatt eines normalen Leerzeichen ein sogenanntes non breakable space, also ein nicht umbrechbares Leerzeichen gesetzt. Dieses fügt man im HTML-Code mit der Zeichenfolge   ein, also z.B. 75 €. Ein eventuell notwendiger Zeilenumbruch wird dann entweder vor der Zahl 75 oder nach dem Euro-Zeichen gesetzt.

Leerzeichen und Leerzeilen

Ein Text, der mittels HTML in einem Browser angezeigt wird, kennt eigentlich keine Leerzeilen und Leerzeichen nur zwischen Wörtern. Jeder weiß, dass in einem HTML-Code wie dieser die Leerzeichen nicht beachtet werden, dass man also im Browser den ganz normalen Text ohne Leerzeichen wie dieser sieht. Gleiches gilt natürlich auch für Leerzeilen zwischen Absätzen oder Überschriften.

Mit den Style-Sheet Angaben margin-top: 1cm oder margin-bottom: 10px kann man zwar einen vertikalen Abstand zwischen Absätzen vorgeben, jedoch gibt es auch einen schnelleren, unsaubereren Weg: Mit dem <br> Tag kann man eine Leerzeile erzwingen. Im folgenden Beispiel wird die Auswirkung des <br> Tags demonstriert.

Wie erzwingt man Leerzeichen zwischen einzelnen Wörtern? Natürlich könnte man dies elegant mit einem span Bereich und einer Style-Sheet-Angabe margin-right=1cm erreichen. Aber wer hat schon Lust wegen ein paar Leerzeichen eine Zeile Code zu schreiben? Im vorigen Unterkapitel haben wir gesehen, dass man mit einem nicht umbrechbaren Leerzeichen einen Zeilenumbruch verhindern kann. Mit genau diesem Leerzeichen kann man auch ein künstliches Leerzeichen in beliebiger Anzahl hintereinander setzen. In unserem Beispiel wird auch dies gezeigt.

Deaktivierung der Grafik Smart-Tags im Internet Explorer 6

In der Version 6 des Internet Explorers hat Microsoft ein wunderbares Feature eingebaut: Überfährt man mit der Maus ein Bild oder eine Grafik, erscheint eine kleine Symbol-Leiste, die es einem auf die Schnelle ermöglicht, das Bild zu speichern, zu drucken oder gar per e-mail weiter zu versenden. Soll das eine Anstoßung von Microsoft sein, im Internet gnadenlos auf Urheberrechte und Copyrights zu pfeifen und Bilder und Inhalte zu kopieren, was nur geht?

Wenngleich die Smart-Tag Leiste für den einen oder anderen Fall sehr nützlich ist, so stört sie auch das Erscheinungsbild einer perfekt gestylten Webseite. Setzt man zum Beispiel eine selbst erzeugte Textfahne ein, die beim Überfahren eines Bildes mit dem Mauszeiger aktiv wird, so stört die zusätzliche Smart-Tag Leiste. Zum Glück kann man als Webmaster diese Leiste abschalten.

Erweitert man das <img>-Tag um das Attribut galleryimg="no", also zum Beispiel

<img src="Bild.jpg" galleryimg="no">

so wird beim jeweiligen Bild die Grafik-Menüleiste ausgeblendet. Will man gleich für eine ganze Webseite diese Menüleiste auf sämtlichen Bildern daktivieren, so hilft ein Meta-Tag, welches man in den Header der jeweiligen HTML-Seite einbaut:

<meta http-equiv="imagetoolbar" content="no">

Zurück zum Inhaltsverzeichnis Webdesign