vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 6

Fortgeschrittenes und dynamisches HTML

Heute werden wir uns einige fortgeschrittene HTML-Techniken anschauen und dabei auch schon die ersten Gehversuche in Richtung dynamisches HTML unternehmen. (Aber bitte, nicht zuviel Dynamik erwarten. Schließlich fehlen uns für echtes dynamisches HTML ja noch die Kenntnisse in der clientseitigen Skriptprogrammierung.)

Die Themen heute:

6.1 Multimediale Objekte einfügen

Traditionell war HTML rein textorientiert - mit der einzigen Ausnahme, dass mit Hilfe des <img>-Tags Grafiken und Bilder eingefügt werden konnten. 1993 entwickelte die Firma Sun die Internet-Programmiersprache Java, mit der man auch Programme zur clientseitigen Unterstützung von Webseiten schreiben konnte. Also wurde der HTML- Standard um ein neues Tag, <applet> zur Einbindung von Java-Applets erweitert. Damit war aber noch lange nicht Schluss: Microsoft bestand auf Unterstützung für seine ActiveX- Elemente (Microsofts plattformabhängige Java-Applet-Alternative) und Webdesigner weltweit forderten Unterstützung für mehr und mehr multimediale Inhalte.

Die Folge war, dass Netscape das <embed>-Tag einführte, mit dem Webautoren beliebige multimediale Inhalte (Sound, Videos, etc.) in eine Webseite einfügen können, die auf der Clientseite mit Hilfe von Plug-Ins oder speziellen auf den Rechnern der Anwender installierten Programmen abgespielt werden. Microsoft übernahm das <embed>-Tag und führte zusätzlich ein <object>-Tag ein, mit dem MS Windows-verliebte Webautoren ActiveX-Steuerelemente in ihre Seiten einbauen konnten.

Um das Chaos zu komplettieren, entschloss sich das W3-Konsortium, seinen HTML 4- Standard um ein neues, generisches Multimedia-Tag zu bereichern, mit dem man beliebige Objekte in Webseiten aufnehmen kann, und nannte dieses Tag <object>-Tag.

Das <object>-Tag - es könnte alles so schön sein

Um es vorwegzunehmen: Die Unterstützung des <object>-Tags durch die großen Browser ist bestenfalls als mäßig einzustufen. Da aber zu hoffen bleibt, dass das <object>-Tag in Zukunft mehr Unterstützung erfahren und an Bedeutung gewinnen wird, werde ich Ihnen jetzt etwas darüber erzählen, wie das W3-Konsortium seinen Einsatz sieht.

Zur Einstimmung greifen wir auf Bekanntes zurück und schauen uns an, wie man mit Hilfe des <object>-Tags Bilddateien einbinden kann. Zur Erinnerung: Mit Hilfe des <img>- Tag, das wir nach wie vor verwenden dürfen, werden Bilddaten wie folgt eingebunden:

<img src="kiefer.gif" alt="Kiefer, chinesische Tuschezeichnung"
width="200" height="300" />

Mit dem <object>-Tag würde dies wie folgt aussehen:

<object data="kiefer.gif" type="image/gif" 
width="200" height="300">
Kiefer, chinesische Tuschezeichnung
</object>

Der URL zur Bilddatei wird über das Attribut data angegeben. Da das <object>-Tag zur Einbindung der verschiedensten Multimedia-Dateien genutzt werden kann, müssen wir den Medientyp explizit angeben: type="image/gif" (siehe ftp://ftp.isi.edu/in-notes/iana/ assignments/media-types/media-types für eine Liste der erlaubten Medientypen). Schließlich wollen wir noch den Text angeben, der angezeigt werden soll, wenn die Bilddatei nicht ausgewertet und dargestellt werden kann. Hier gibt es eine besonders erfreuliche Neuerung: Der alternative Text wird nicht mehr als Wert des alt-Attributs angegeben, sondern steht als HTML-Code zwischen den <object>-Tags. Das heißt, wir können nun auch komplexere und formatierte HTML-Inhalte als Alternative angeben, ja man kann sogar eine Art Prioritätenliste erzeugen:

<object data="kiefer.gif" type="image/gif" width="200" height="300">
<object data="kiefer.png" type="image/png" width="200" height="300">
Kiefer, chinesische Tuschezeichnung
</object>
</object>

Hier wird zuerst versucht, ein GIF-Bild anzuzeigen. Nur wenn dies fehlschlägt, soll der Browser den Inhalt zwischen den <object>-Tags verarbeiten - in diesem Fall also das PNG-Bild laden. Misslingt auch dies, wird ein alternativer Text ausgegeben.

Bevor wir sich jedoch allzu sehr in diese Syntax verlieben, sollten Sie sich einmal anschauen, wie Ihr(e) Browser diesen Code umgeht, denn zwischen den Vorstellungen des HTML 4-Standards und der Umsetzung durch die Browser klafft hier immer noch ein ziemlicher Abgrund.

<embed> - Die Realität

Laut Standard darf und soll das <img>-Tag zur Einbindung von Grafiken weiter neben dem <object>-Tag verwendet, zur Einbindung von Java-Applets soll das <object>-Tag verwendet werden (das <applet>-Tag wurde als »deprecated« eingestuft) und zur Einbindung von Multimedia-Inhalten muss das <object>-Tags verwendet werden, weil der HTML-Standard das <embed>-Tag der großen Browser offiziell nie anerkannt hat.

Die Realität sieht derzeit aber noch so aus, dass wir

Das <embed>-Tag

Um eine Mediendatei mit Hilfe des <embed>-Tags in eine Webseite einzubinden, brauchen Sie nur den URL der Datei im Attribut src anzugeben:

<embed src="hintergrundsound.wav" />

Zum Abspielen der Mediendatei greift der Browser auf ein passendes Programm oder Plug- In zu. Welches Programm das richtige ist, erkennt der Browser an der Dateiextension.

Wenn Sie möchten, dass die Bedienfläche des Abspielprogramms angezeigt werden soll, setzen Sie das Attribut hidden auf false.

Wenn die Bedienoberfläche nicht gewünscht wird, beispielsweise beim Abspielen eines Hintergrundsounds, setzen Sie hidden auf true. Wenn es aber keine Bedienoberfläche gibt, wie kann dann das Abspielen der Mediendatei gestartet werden? Nun, zum einem mit Hilfe eines JavaScripts, zum anderem indem man das autostart-Attribut auf true setzt:

<embed src="hintergrundsound.wav" hidden="true" autostart="true" />

Soll die Datei mehrfach hintereinander abgespielt werden, weist man die Anzahl der gewünschten Wiederholungen dem Attribut loop zu (loop="true" führt zur endlosen Wiederholung).

<embed src="hintergrundsound.wav" hidden="true" autostart="true" 
loop="true" />

Schließlich kann man noch über width und height die Größe der Anzeigefläche im Browser angeben, was für Videos oder bei eingeblendetem Bedienfeld interessant ist.

Sounddateien einbinden

Als Beispiel und Testseite zur Verwendung von <object> und <embed> habe ich Ihnen folgende HTML-Seite zusammengestellt:

Listing 6.1: sound.html

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


<body>
<embed src="hintergrundsound.wav" autostart="true" hidden="true"
loop="true" />

<h1>Play it again</h1>
<p><em>Diese Seite verfügt über einen Hintergrundsound, der endlos abgespielt wird</em></p>

<hr />
<h2>Sounddateien über Hyperlinks aufrufen</h2>
<a href="bing.wav">Klick mich!</a>

<hr />
<h2>Sounddateien über object-Tag aufrufen</h2>
<object data="bing.wav" type="audio/wav" width="300" height="100">
Objekt kann nicht ausgeführt werden!
</object>


</body>
</html>

Abbildung 6.1:  Sound-Testseite

Als Format für die beiden auf dieser Webseite verwendeten Sounddateien habe ich mich für WAV entschieden, da dieses Format plattform- und browserübergreifend gut unterstützt wird und Windows 9x/2000/Me standardmäßig mit einem Programm zur Bearbeitung von WAV-Dateien ausgeliefert wird (Audiorecorder).

Extension

Sound-Format

wav

WAV-Dateien. Zum Abspielen von WAV-Dateien steht für Windows/Internet Explorer der Windows Media Player und für Netscape das LiveAudio-Plug-In zur Verfügung. Unter Windows kann man WAV-Dateien mit dem Audiorecorder bearbeiten.

rm, ram

RealAudio-Dateien. Zum Abspielen von RealAudio-Dateien muss auf Seiten des Clients ein passendes Plug-In oder Abspielprogramm installiert sein. Den RealPlayer zum Abspielen von RealAudio-Dateien gibt es für alle gängigen Plattformen. Websurfer können ihn kostenlos von der Website http://www.realnetworks.com herunterladen. Webautoren können sich von der gleichen Website Aufnahmegeräte zur Erstellung von RealAudio-Dateien herunterladen (eine Basisversion gibt es kostenfrei).

mp3

MPEG-Audiodateien. Auch zum Abspielen von MPEG2-Audiodateien gibt es praktisch für jede wichtige Plattform kostenfreie Abspielprogramme (siehe beispielsweise unter www.winamp.com). Als kostengünstiges Aufnahmeprogramm kann man sich das Shareware-Tool Mp3Wizard herunterladen (beispielsweise von www.c3sys.demon.co.uk).

Tabelle 6.1: Gängige Sound-Formate

Der Hintergrundsound wurde mit Hilfe des <embed>-Tags eingefügt:

<embed src="hintergrundsound.wav" autostart="true" hidden="true"
loop="true">

Der zweite Sound, ein einfacher »Bing«-Ton wird mit dem <object>-Tag eingefügt. Der Internet Explorer spielt die Datei nach dem Laden sofort ab. Der Netscape Navigator wartet bis der Besucher der Website den Play-Schalter der Konsole drückt.

<object data="bing.wav" type="audio/wav" width="300" height="100">
Objekt kann nicht ausgeführt werden!
</object>

Als letzte (und meist beste) Option enthält die Webseite einen Link zur bing.wav-Datei. Wenn der Leser dem Link nachfolgt, wird das Abspielprogramm zu der Mediendatei in einem eigenen Fenster aufgerufen.

<a href="bing.wav">Klick mich!</a>

Wenn Sie die Webseite auf Ihrem System ausführen und ein Abspielprogramm für WAV- Dateien installiert ist, sollten Sie zumindest den Hintergrundsound hören und dem Hyperlink folgen können.

Lauschen Sie ein wenig dem Hintergrundsound dieser Webseite. Gefällt er Ihnen? Lauschen Sie noch ein wenig. Spätestens nach einer halben Stunde dürften Sie überzeugt sein, dass das Einbetten von Hintergrundklängen in Webseiten (selbst wenn sie nicht endlos wiederholt werden, sondern nur bei jedem neuen Aufrufen der Seite gestartet werden) meist keine gute Idee ist. Wenn Sie den Besuchern Ihrer Webseite Soundproben anbieten wollen, tun Sie dies über Hyperlinks.

Videos

Für Videos (AVI, MPEG, Flash) gilt grundsätzlich das Gleiche wie für Sounddateien (siehe auch Kapitel 16 zur Einbindung von Flash-Animationen).

6.2 Quickinfos

Quickinfos sind kurze kontextsensitive Hilfetexte, die man bislang eher von Programmoberflächen als von Webseiten her kennt. Dort werden sie zum Beispiel als Hilfetexte zu den Schaltflächen aus den Symbolleisten eingesetzt. Verweilt der Anwender einen Moment mit der Maus über einer Schaltfläche, wird der Hilfetext zu der Schaltfläche neben der Maus eingeblendet.

Abbildung 6.2:  Quickinfos in Word

Die Möglichkeit zum Einblenden von Quickinfos gibt es mittlerweile auch in HTML. Sie brauchen lediglich das HTML-Element, für das Sie eine Quckinfo-Beschreibung anbieten wollen, um das title-Attribut zu erweitern und diesem als Wert den anzuzeigenden Text zuzuweisen:

<img border="0" src="jupiter.gif" width="102" height="100"
title="Sein berühmter rote Fleck ist ein atmosphärischer Wirbel,
der ca. 8 km über den Gasschichten des Jupiters liegt.">

Rücken Sie den Text für die Kurzbeschreibung nicht im HTML-Code ein (also nicht so machen, wie Sie es in obigem Quellcode-Fragment sehen). Da es sich um anzuzeigenden Text handelt, bleiben die aufeinanderfolgenden Leerzeichen erhalten. Geben Sie den Text am besten in einem Fluss ohne manuellen Zeilenumbruch ein.

Abbildung 6.3:  Kurzinformationen im Browserfenster

Quickinfos sollten aus zwei Gründen keine wichtigen Informationen enthalten:

Nehmen wir zum Beispiel die Webseite aus Abbildung 6.3. Die Planetensymbole sollen als grafische Hyperlinks zu den einzelnen Planeten-Webseiten führen, wo der Besucher der Website detaillierte Informationen über die Planeten findet. Man könnte nun auf die Idee kommen, sich die »störenden« Untertitel zu den Planeten zu sparen und die Planetennamen stattdessen als Quickinfos vorsehen. Leser, die sich nicht sicher sind, welches Planetensymbol für welchen Planeten steht, brauchen dann nur die Quickinfos abzurufen. Dieser Ansatz hat aber seine Haken und Ösen. Zum einen gibt es derzeit viel zu viele Websurfer, die diese für die Navigation wichtige Information mangels Browserunterstützung überhaupt nicht abrufen können, zum anderen dauert das Abrufen der Quickinfos viel zu lange - insbesondere dann, wenn man den gewünschten Planeten erst beim n-ten Male findet. Besser ist es meist, wie im Beispiel demonstriert, die für die Navigation relevanten Informationen gut sichtbar anzuzeigen und als Quickinfo weniger wichtige Zusatzinformationen zu liefern - etwa wie im vorliegenden Beispiel kleine Informations-Appetithappen, die den Websurfer animieren, sich die betreffende Seite doch einmal anzusehen.

6.3 Metainformationen und Header-Tags

Erinnern Sie sich noch an den Anfang des zweiten Tages, als wir Sie mit den Formalitäten des HTML-Grundgerüsts und an den Browser gerichteten Informationen wie <!DOCTYPE> oder <title> geplagt haben, während Sie ungeduldig darauf warteten, dass wir unser HTML-Dokument mit sichtbarem Inhalt füllen? Seitdem haben wir uns fast nur noch mit dem <body>-Bereich und der Darstellung der anzuzeigenden HTML-Inhalte beschäftigt. Jetzt, am Ende unseres Streifzugs durch die HTML-Elemente, wenden wir uns noch einmal dem Header-Abschnitt zu. Und mit der Abgeklärtheit und Gelassenheit des (mittlerweile) erfahrenen Webdesigners, der weiß, wie er seine gestalterischen Mittel nutzen und einsetzen kann, wollen wir uns anschauen, was uns der Header-Abschnitt zu bieten hat.

Um es gleich vorweg klarzustellen: Was im Header-Bereich des HTML-Dokuments steht, gehört nicht zum eigentlichen Inhalt des HTML-Dokuments und wird vom Browser folglich nicht im Anzeigebereich des Browser-Fensters dargestellt! Das heißt nun nicht, dass die im Header-Bereich stehenden Informationen gar nichts mit der Darstellung im Browser-Fenster zu tun haben müssen, denn auch wenn sie selbst nicht als Teil der Webseite angezeigt werden, können sie doch auf die Darstellung im Browser rückwirken oder in anderer Form angezeigt werden (man denke nur an die Einbindung von Stylesheets mit <style> oder an das <title>-Tag).

Aber auch die Header-Informationen, die nichts mit der Darstellung der Webseite im Browser zu tun haben, können für den Webdesignern interessant sein. Ihnen wird in diesem Abschnitt sogar unser Hauptaugenmerk gelten.

Die HTML-Tags für den Header-Bereich

Tabelle 6.2 bietet einen Überblick über die HTML-Tags des Header-Bereichs, von denen Sie einige bereits kennen gelernt haben.

Mit Ausnahme von <title> sind alle HTML-Tags des Header-Bereichs optional.

Tag

Beschreibung

<title>

Titel des HTML-Dokuments, der üblicherweise in der Titelleiste der Browser angezeigt wird (siehe Kapitel 2.2.2).

<base>

Basisadresse des HTML-Dokuments, das zur Vervollständigung relativer URLs verwendet wird (siehe unten).

<meta>

Tag zur Aufnahme optionaler Metainformationen. Dieses Tag ist sehr vielseitig einsetzbar, siehe Abschnitt 6.3.4.

<script>

Tag zur Definition von Skripten (siehe Kapitel 8).

<style>

Tag zur Definition von Stylesheets (siehe Kapitel 4).

<link>

Tag zur Einbindung externen Informationen (siehe unten).

<object>

Tag zur Einbindung globaler Objekte in Frameseiten.

Tabelle 6.2: HTML-Tags des Header-Bereichs

<base> - Die Basisadresse

Wenn Sie auf einer Webseite einen URL als Link zu einer Webressource angeben, haben Sie die Wahl zwischen

Ein absoluter URL ist eine vollständige Webadresse, wie zum Beispiel:

http://www.meinedomaene.de/unterverzeichnis/webseite.html

Er besteht aus

Man kann URLs auf Webseiten aber auch als relative URLs angeben. Statt der vollständigen Webadresse gibt man dabei nur den Pfad an, der vom Verzeichnis des aktuellen Webdokuments zu der gewünschten Ressource führt. Oder man gibt im Header- Bereich mit Hilfe des <base>-Tags eine Basisadresse an, auf die sich alle relativen URLs der aktuellen Webseite beziehen sollen (siehe auch Kapitel 2.6).

<head>
<title>Hallo</title>
<base href="www.einServer.de/verz" />
</head>

Relative versus absolute URLs

Grundsätzlich sollte man alle URLs, die auf Webseiten und Ressourcen verweisen, die im Verzeichnissystem des eigenen Webs stehen, als relative URLs angeben und absolute URLs nur für solche URLs verwenden, die auf Webseiten oder Ressourcen außerhalb des eigenen Webs verweisen.

Warum? Weil Webs mit relativen URLs bequem zu verschieben sind! Schauen wir uns einmal folgende Webseite an:

Listing 6.2: kiefer.html - Webseite mit relativen und absoluten URLs

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


<body style="background-image: url('./images/kiefer.gif');
¬background-repeat: no-repeat;
¬margin-left: 200; margin-top: 210">

<h1>Die Kiefer in der chinesischen Malerei</h1>

<p>In der traditionellen chinesischen Malerei gehört die Kiefer zu den am häufigsten dargestellten Bäumen überhaupt. Diese Vorrangstellung hat sie ihrer Genügsamkeit und ihren immergrünen Nadeln zu verdanken, die sie in der chinesischen Vorstellung zu einem Symbol für langes Leben und Beständigkeit werden ließen. So gehört die Kiefer auch zu den <em>drei Freunden im Winter</em> &#150; den langes Leben symbolisierenden Pflanzen Kiefer,
<a href="http://localhost/demoweb/bambus.html">Bambus</a> und
<a href="pflaume.html">Pflaume</a>. ...</p>

<p style="text-align:right">Besuchen Sie auch unseren
<a href="www.chinsponsor.com">chinesischen Sponsor.</a></p>
</body>
</html>

Diese Webseite, die Sie im Übrigen als Teil eines kleinen Testwebs, namens DemoWeb, auf der Buch-CD finden, enthält zwei relative und zwei absolute URLs (sicherlich haben Sie keine Mühe, diese vier URLs auszumachen und zuzuordnen). Zu dieser Webseite gehört die Webstruktur aus Abbildung 6.4.

Abbildung 6.4:  Webverzeichnissystem zu DemoWeb

Unter der Voraussetzung, dass der Webservername localhost mit dem Verzeichnis c:\httpd\htdocs verbunden ist, kann man die Webseite kiefer.html über http://localhost/ demoweb/kiefer.html aufrufen.

Gehen wir nun den einzelnen URLs der Webseite kiefer.html nach.

<body style="background-image: url('./images/kiefer.gif');

Dieser relative URL lädt das Hintergrundbild kiefer.gif der Webseite. Der URL gibt an, dass die Bilddatei kiefer.gif im Verzeichnis images zu suchen ist, das ein direktes Unterverzeichnis des Verzeichnisses ist, in dem die aktuelle Webseite abgespeichert ist.

Die Verzeichnisangabe ./ steht immer für das aktuelle Verzeichnis. Die Angabe ../ bezieht sich auf das übergeordnete Verzeichnis und kann aneinandergereiht werden, um im Verzeichnispfad beliebig hoch zu wandern (../../../gibt_es_dieses_verzeichnis_noch.html).

<a href="http://localhost/demoweb/bambus.html">Bambus</a>

Dies ist ein absoluter URL (statt der Domänenangabe steht hier der Name des lokalen Webservers), der auf eine Webseite namens bambus.html verweist, die im gleichen Verzeichnis wie die aktuelle Webseite kiefer.html steht. Dies ist statthaft, hat allerdings auch Nachteile, wie wir gleich sehen werden.

<a href="pflaume.html">Pflaume</a>

Dies ist ein relativer URL, der auf eine Webseite namens pflaume.html verweist, die im gleichen Verzeichnis wie die aktuelle Webseite kiefer.html steht.

<p>Besuchen Sie auch unseren <a href="www.chinsponsor.com">chinesischen Sponsor.</a></p>

Dies ist ein absoluter URL, der auf eine Webseite außerhalb unseres eigenen Webs verweist.

So weit, so gut. Wenn Sie die Webseite laden, wird das Hintergrundbild wie gewünscht aus dem Unterverzeichnis images geladen und per Klick kann man den Links zu den anderen Webseiten nachgehen.

Problematisch wird es, wenn das Webverzeichnis verschoben oder umbenannt wird - also wenn Sie das Verzeichnis C:\httpd\htdocs\demoweb in C:\httpd\htdocs\chinmalerei umbenennen oder von Ihrem lokalen Webserver (localhost) auf einen Internetrechner hochladen. Während der absolute URL auf die externe Website und die relativen URLs auch nach einer solchen Änderung weiterhin korrekt sind (sofern Sie nicht auch noch Namen und Lage der Unterverzeichnisse ändern), stimmt der absolute URL auf die webinterne Webseite bambus.html nicht mehr. Daher die Faustregel, auf Ressourcen, die in der Verzeichnisstruktur des eigenen Webs liegen, grundsätzlich über relative URLs zu verweisen.

Wenn Sie zur Probe das Verzeichnis demoweb in demoweb2 umbenennen und beim Laden in den Webbrowser feststellen sollten, dass Sie die Datei bambus.html nach wie vor über den Link <a href="http://localhost/demoweb/bambus.html">Bambus</a> ansteuern können, liegt dies daran, dass Sie dem Link schon einmal gefolgt sind und Ihr Browser die Datei noch im Cache hat. Lassen Sie die Anzeige dann aktualisieren und drücken Sie gleichzeitig je nach Browser die Taste (Strg) oder (Shift).

Relative Links sind auch wichtig, wenn Sie die Dateien eines Webs als ZIP-Datei zum Herunterladen anbieten. Wenn Sie absolute URLs zum Verbinden der Webseiten verwenden, hat der Leser Ihrer Webseiten das Problem, dass er zwar alle Webseiten auf seiner Festplatte vorliegen hat (und die Dateien bei richtiger Komprimierung und Entpackung auch in den korrekten Unterverzeichnissen liegen), dass er aber die Dateien nur über den Datei/Öffnen-Befehl seines Browsers laden kann, weil die Links zwischen den Dateien auf die Dateien im Internet verweisen.

Wann gibt man eine Basisadresse vor?

Die Vorteile der relativen Links gehen verloren, wenn man eine Basisadresse vorgibt, weil sich die relativen Links danach nicht mehr auf das Verzeichnis des aktuellen Dokuments, sondern auf die Basisadresse beziehen. Um bei unserem Beispiel von oben zu bleiben:

Wenn Sie Listing 6.2 um die Angabe einer Basisadresse erweitern, die auf das Verzeichnis des Beispielwebs verweist:

<head>
<title>Die Kiefer</title>
<base href="http://localhost/demoweb/" />
</head>

bleibt zunächst alles beim alten (da die Basisadresse dem Verzeichnis der Datei kiefer.html entspricht). Wenn Sie das Webverzeichnis aber umbenennen oder auf einen anderen Webserver portieren, stimmt kein relativer Pfad mehr.

Wozu also überhaupt eine Basisadresse vorgeben?

Die Angabe einer Basisadresse lohnt sich immer dann, wenn alle (oder zumindest ein großer Teil) der Links einer Webseite auf Ressourcen außerhalb der aktuellen Website liegen.

Nehmen wir an, Sie haben eine private Website auf dem Webserver eines Freundes veröffentlicht. Nun bietet sich Ihnen die Möglichkeit, Ihre Website auch auf dem Webserver eines anderen Internet-Providers zu veröffentlichen. Aber vielleicht können Sie auf dessen Rechner keine Unterverzeichnisse anlegen oder keine CGI-Programme installieren oder es steht Ihnen einfach nicht genügend Festplattenspeicher zur Verfügung. In so einem Fall könnten Sie es so machen, dass Sie lediglich die zentrale Homepage Ihres Webs auf den anderen Webserver kopieren und in der kopierten Homepage als Basisadresse den URL Ihrer Website auf dem Webserver Ihres Freundes angeben. Webbesucher finden Ihre Website dann auch auf dem Webservers des anderen Internet- Providers, und Zugriffe von der Homepage auf die anderen Seiten des Webs werden automatisch zu Ihrem Hauptwebserver umgeleitet.1

Eine andere Möglichkeit wäre, dass Sie von einer Webseite verstärkt auf Ressourcen (beispielsweise Bilder oder Sounddateien) zugreifen, die von einem anderen Webserver stammen. In so einem Fall könnte man sich das Eintippen der absoluten URLs zu den externen Ressourcen dadurch erleichtern, dass man den URL des externen Webservers als Basisadresse festlegt.

Schließlich kann man für das <base>-Tag wie für das Anker-Tag <a> ein target-Attribut festlegen. Auf diese Weise kann man mit einem Schlag für alle Link-Elemente einer Webseite (<a>, <link>, <area>, <form>), für die kein eigenes target-Attribut angegeben wird, einen Zielbereich (Target) festlegen - eine Option, die vor allem für Webseiten, die in Frames angezeigt werden, interessant ist (siehe Kapitel 3.2).

Wenn Sie mit dem <base>-Tag eine Basisadresse vorgeben, muss das <base>-Tag vor allen HTML-Elementen aufgeführt werden, die auf externe Quellen verweisen - also beispielsweise vor irgendwelchen <link>-Tags.

<link> - Beziehungen zwischen Dokumenten

Das <link>-Tag des <head>-Bereichs hat nichts mit dem <a>-Tag aus dem <body>-Bereich zu tun.

In Kapitel 4.4 sind wir schon einmal über das <link>-Tag des Header-Bereichs gestolpert. Dort ging es darum, wie man externe Stylesheets, die in eigenen Dateien stehen, mit einem Webdokument verbinden kann:

<link href="meinstyle.css" rel="stylesheet" type="text/css" />

Hier sehen wir bereits die beiden wichtigsten Attribute des <link>-Tags:

Das ist in groben Zügen schon alles, worum es beim <link>-Tag geht. Man gibt den URL zu einem anderen Dokument an, beschreibt über das rel-Attribut die Art der Beziehung, die zwischen dem aktuellen HTML-Dokument und dem LINK-Dokument besteht, und hofft, dass der Browser (oder irgendein anderes Programm, das das HTML-Dokument liest) dem Link folgt und weiß, was er (es) mit dem zugeordneten Dokument anfangen soll.

Leider ist aber gerade letzteres oft genug nicht der Fall, und so beschränken wir uns darauf, kurz anzuschneiden, welche Form von Unterstützung sich der HTML-Standard für sein <link>-Tag wünschen würde. Entscheidend ist dabei stets der Wert des rel-Attributs, für das in der HTML-Spezifikation eine Reihe von möglichen Werten vordefiniert sind. Einige dieser Werte werden wir uns jetzt anschauen.

Alternative Webseiten

Mit Hilfe der rel-Beziehung »alternate« kann man auf alternative Darstellungen für die aktuelle Webseite hinweisen. So könnte eine spanische Suchmaschine darauf hinweisen, dass es die gleiche Webseite auch in Spanisch gibt (hreflang="es"), oder einen Browser für Blinde zum Link einer Webseite mit Audiounterstützung führen (media="braille").

<link title="El pino" type="text/html"
rel="alternate" hreflang="es"
href="http://webserver.com/meinweb/spanisch.html" />

Die wichtigsten Sprachcodes sind en (Englisch), en-US (Amerikanisch), fr (Französisch), de (Deutsch), it (Italienisch), nl (Holländisch), el (Griechisch), es (Spanisch), pt (Portugiesisch), ar (Arabisch), he (Hebräisch), ru (Russisch), zh (Chinesisch), ja (Japanisch), hi (Hindi), ur (Urdu) und sa (Sanskrit).

Die wichtigsten Medientypen sind screen (normaler Grafik-Bildschirm), tty (Terminal), tv (TV-Bildschirm), projection (Projektor), handheld (kleine Bildschirme wie bei PalmPilots), print (Drucker), braille (für Blinde), aural (mit Sprachengenerator) und all (Alle).

Navigation und Dokumentenhierarchie

Verschiedene rel-Beziehungen dienen dazu, Informationen über den hierarchischen Aufbau eines Webs zu liefern.

rel-Beziehung

Intention

start

Ist dazu gedacht, das Startdokument (Home) eines Webs anzuzeigen.

next

Verweist auf das »nächste« Dokument (beispielsweise die Webseite mit dem nächsten Kapitel, wenn das Web wie ein Buch organisiert ist).

prev (oder previous)

Verweist auf das »vorangehende« Dokument (beispielsweise die Webseite mit dem vorangehenden Kapitel, wenn das Web wie ein Buch organisiert ist).

contents ( oder toc)

Verweist auf das Inhaltsverzeichnis

index

Verweist auf den Index

glossary

Verweist auf den Glossar

appendix

Verweist auf den Anhang

help

Verweist auf die Hilfe

Tabelle 6.3: rel-Beziehungen

Ursprünglich ging man wohl davon aus, dass die Browser aus diesen <link>-Tags automatisch eine Navigationsleiste aufbauen. Daraus ist leider nichts geworden. So definiert selbst die HTML-Spezifikation neben den entsprechenden <link>-Tags eine eigene Navigationsleiste:

...
<head>
<title>The global structure of an HTML document</title>
<link rel="previous" href="../types.html" />
<link rel="next" href="dirlang.html" />
<link rel="contents" href="../cover.html#toc" />
...
</head>

<body>
<div class="navbar" align="center">&nbsp;
<a href="../types.html">previous</a> &nbsp;
<a href="dirlang.html">next</a> &nbsp;
<a href="../cover.html#minitoc">contents</a> &nbsp;
<a href="../index/elements.html">elements</a> &nbsp;
<a href="../index/attributes.html">attributes</a> &nbsp;
<a href= "../index/list.html">index</a>
...

Eine weitere interessante Möglichkeit, die meines Wissens kaum (wenn überhaupt) Unterstützung fand, ist die Vorgabe einer bevorzugten Navigationsreihenfolge mit Hilfe der Wert start, next und prev. Ein Browser könnte die next- und prev-Links beispielsweise dazu nutzen, die betreffenden Seiten im Hintergrund zu laden und dadurch die eigentliche Navigation zu beschleunigen. Beim Drucken könnten die Seiten eines Webs beginnend mit dem start-Dokument Seite für Seite automatisch ausgegeben werden, indem der Browser den next-Links folgt und die aufgerufenen Seiten nacheinander an den Drucker schickt.

Schließlich können die Informationen aus den <link>-Tags von Suchmaschinen genutzt werden, um die Startseite eines Webs oder eine anderssprachige Version einer Webseite ausfindig zu machen.

Mit Hilfe eines »Profils« können Sie eigene Beziehungen (rel-Werte) definieren. Wer mehr darüber wissen möchte, sei auf die HTML-Spezifikation, Stichwort profile verwiesen.

Metainformationen

Mit das interessanteste HTML-Tag für den Header-Bereich ist das <meta>-Tag. Mit seiner Hilfe kann der Autor einer Webseite die verschiedensten Daten und Informationen zu einer Webseite in der Webseite selbst ablegen. Alle Informationen werden dabei als Name/ Wert-Paare verpackt. Der »Name« gibt an, um welche Information es sich handelt und wird mit Hilfe des name-Attributs spezifiziert. Der »Wert« ist die eigentliche Information und wird über das content-Attribut angegeben.

Wenn Sie also sich selbst als Autor einer Webseite in deren Header-Bereich verewigen wollten, würden Sie schreiben:

<meta name="author" content="ihr name">

Interessant ist, dass der HTML-Standard keine Liste von verbindlichen Namen vorgibt. Es gibt allerdings eine Reihe von weit verbreiteten Namen mit mehr oder weniger fester Bedeutung.

META-Tag

Bedeutung

<meta name="author" content="..." />

Autor der Webseite

<meta name="copyrights" content="..." />

Hinweis auf Urheberrechte

<meta name="generator" content="..." />

Software, mit der die Webseite generiert wurde.

<meta name="description" content="..." />

Kurze Beschreibung der Seite und ihres Inhalts. Suchmaschinen zeigen diesen Text üblicherweise auf den generierten Trefferseiten neben oder unter dem URL der Webseite an.

<meta name="keywords" content="..." />

Stichwörter, unter denen Ihre Webseite von den diversen Suchmaschinen gefunden werden soll. Die einzelnen Stichwörter werden durch Kommata getrennt.

<meta name="rating" content="..." />

FSK1 für Webseiten. Als Wert für content stehen zur Auswahl:

general (ohne Altersbeschränkung)

safe for kids (für Kinder geeignet)

14 years (ab 14 Jahren)

restricted (mit Einschränkungen)

matured (nur für Erwachsene)

Tabelle 6.4: Name/Content-Paare für META-Tags Beziehungen

1

    Freiwillige Selbstkontrolle

Simulierte HTTP-Header

Name/Wert-Paare können aber nicht nur mit dem name-Attribut spezifiziert werden. Alternativ kann man den Namen als Wert des http-equiv-Attributs angeben. Dies hat den besonderen Nebeneffekt, dass der Webserver, auf dem die Webseite steht, aus den Angaben im <meta>-Tag ein HTTP-Headerfeld erzeugt und diesen als Teil des HTTP- Antwortheaders an den Browser schickt.

HTTP-Antwortheader

Webdokumente werden gemäß dem HTTP-Protokoll über das Internet geschickt. Dieses Protokoll sieht vor, dass jedem verschickten Datenpaket ein Header vorangeht. Als Websurfer oder Webautor merken wir üblicherweise nur wenig von diesen HTTP-Headern (nicht zu verwechseln mit dem <head>-Abschnitt unserer Webseiten), da sie automatisch vom Webserver erzeugt und vom Webbrowser verarbeitet werden. Wenn Sie beispielsweise auf einen Hyperlink zu einer Webseite klicken, ermittelt der Webbrowser den Webserver, auf dem die Webseite abgelegt sein soll und schickt diesem eine Anfrage (mit vorangehendem HTTP-Anfrageheader). Der Webserver sucht in seiner Verzeichnisstruktur nach der Webseite. Kann er sie finden, stellt er ihr einen passenden HTTP-Antwortheader voran und sendet sie samt Header an den Browser. Ein typischer Antwortheader könnte wie folgt aussehen:

HTTP/1.0 200 OK
Date: Sun, 03 Dec 2000 11:34:52 GMT
Server: Apache/1.3.14
Content-type: text/html
Content-length: 1284
Last-modified: Tue, 05 Dec 2000 00:45:46 GMT

Wie kann man sich dieses Mechanismus zunutze machen?

Nun, zum einem können Sie echte HTTP-Headerfelder simulieren, ja sogar HTTP- Headerfelder, die vom Webserver gesendet werden, überschreiben - was allerdings bedeutet, dass man auf diese Weise auch großen Schaden anrichten kann.

Hüten Sie sich den content-type- oder content-length-Headerfelder zu überschreiben.

Caching

Viele Firmen stellen Proxy-Server zwischen ihre Rechner und das Internet, um den Zugriff auf Webseiten effizienter zu gestalten. Der Proxy fungiert dabei als Cache, in dem Webseiten zwischengespeichert werden. Fordert ein Webbrowser eine Webseite an, die sich im Cache des Proxy befindet, braucht die Anfrage nicht ins Internet weitergeleitet zu werden, sondern kann direkt vom Proxy beantwortet werden. So spart man Zeit und Netzwerkkapazitäten, nimmt aber dafür in Kauf, dass die gelieferten Webseiten unter Umständen nicht mehr aktuell sind. Das HTTP-Protokoll sieht verschiedene Wege vor, wie man sicherstellen kann, dass das Caching möglichst effizient abläuft, ohne allzu sehr auf Kosten der Aktualität der Webseiten zu gehen. In diese Mechanismen können wir eingreifen.

Eine Möglichkeit ist, dass Caching einer Webseite gänzlich zu unterbinden. Dazu setzt man das HTTP-Headerfeld Cache-control auf no-cache:

<meta http-equiv="Cache-control" content="no-cache" />

Das Headerfeld Cache-control ist erst sei HTTP 1.1 definiert. In HTTP 1.0 setzt man stattdessen das Headerfeld pragma auf no-cache.

Eine andere Möglichkeit besteht darin, ein Ablaufdatum anzugeben.

<meta http-equiv="expires" content="Sat, 30 Nov 2001 10:55:21 GMT" />

In diesem Fall wird sichergestellt, dass der Browser sich nach Ablauf des angegebenen Datums bemüht, eine aktuelle Version des Dokuments zu bekommen.2 (Was im Übrigen nicht bedeutet, dass das Dokument danach unbedingt vom Webserver geladen werden muss. Oft genügt es, wenn der Browser (oder der Proxy) beim Webserver nachfragen, ob es eine aktuellere Version des Dokuments gibt. Falls nein, braucht der Webserver statt des Dokuments nur eine Bestätigung zu schicken, dass weiterhin das gecachte Dokument verwendet werden kann.

Will man erreichen, dass eine Webseite gecacht, aber trotzdem stets auf Aktualität geprüft wird, stattet man sie mit eine Ablaufdatum aus, das in der Vergangenheit liegt oder setzt das folgende Headerfeld:

<meta http-equiv="Cache-control" content="must-revalidate" />

Verwechseln Sie das Caching nicht mit der Liste der zuletzt angezeigten Webseiten. Wenn Sie sich in der Liste der zuletzt angezeigten Webseiten zurückbewegen, rekonstruiert der Browser die Webseiten üblicherweise so, wie Sie sie zuvor gesehen haben. Sinn dieser History-Liste ist es gemeinhin, bereits gesehene Inhalte identisch wiederherzustellen und nicht, bereits besuchte Webseiten neu abzurufen.

Client-Side Pull

Zum anderen können Sie mit Hilfe des http-equiv-Attributs Headerfelder an den Browser senden, die der Webserver gar nicht kennt (weil sie nicht zur HTTP-Spezifikation gehören), die von den Browsern aber wohl verstanden werden.

Der wohl meist eingesetzte und am breitesten unterstützte unter diesen Headerfeldern ist der von Netscape eingeführte CGI-Antwortheaderfeld Refresh, mit dem man vom Browser aus (Client-Seite) Webseiten vom Server herunterziehen (Pull) kann. Nun werden Sie einwenden, dass dies nichts Besonderes, sondern genau das ist, was beim Anklicken eines Hyperlinks passiert. Das Besondere am Client-Side Pull ist, dass hierzu keine Benutzerinteraktion erforderlich ist, das heißt, der Browser fordert ganz automatisch die gewünschte Seite vom Webserver an.

Das zugehörige META-Tag gibt es in zwei Formen:

<meta http-equiv="refresh" content="10" />
<meta http-equiv="refresh"
content="10; url=http://www.server.de/meinweb/start.html" />

Im einfachsten Fall besteht der Inhalt des Refresh-Headerfelds aus einem einzelnen Zahlenwert, der angibt, nach wie vielen Sekunden die aktuelle Seite (das heißt die Seite, die das META-Tag enthält) vom Webserver neu geladen werden soll.

Will man nach Ablauf der vorgegebenen Frist nicht die aktuelle, sondern irgendeine andere Webseite herunterladen, gibt man zusätzlich den URL dieser Webseite an.

Automatische Aktualisierung

Die automatische Aktualisierung wird immer dann eingesetzt, wenn eine Webseite Informationen enthält, die ständigen Veränderungen unterworfen sind. Ein typisches Beispiel sind Webseiten mit Aktienkursen.

Abbildung 6.5:  Yahoo-Seite mit aktuellen Börsenkursen

So werden die Yahoo-Finanzseiten zu den Börsenkursen alle 15 Minuten (900 Sekunden) aktualisiert:

<html>
<head>
<title>Yahoo! Finanzen</title>
<meta http-equiv=Refresh content=900 />
</head>
...

Die Yahoo-Seiten sind schon etwas älter und folglich etwas laxer im Umgang mit den neueren HTML-Empfehlungen. Stören Sie sich also nicht daran, dass keine HTML-Version deklariert ist und die Attributwerte nicht in Anführungszeichen stehen.

Die automatische Aktualisierung einer Webseite (die nicht in allzu kurzen Intervallen erfolgen sollte, sonst legt man Browser und Server lahm) macht natürlich nur dann einen Sinn, wenn auch die Inhalte der Webseite in regelmäßigen Abständen aktualisiert werden. Da man als Webadministrator seine Zeit aber nicht unbedingt damit verbringen möchte, ständig die eigenen Webseiten auf dem Server zu aktualisieren, muss man auch diesen Prozess irgendwie automatisieren. Hierfür bieten sich Server-Side Includes (siehe Kapitel 14) oder CGI-Programme (siehe Kapitel 17) an.

Automatische Weiterschaltung

Beim Surfen durchs Web stößt man immer wieder auf Seiten, die den Websurfer höflich darauf hinweisen, dass er hier falsch ist, und ihn kurzerhand zu einer anderen Website führen. Diese automatische Weiterschaltung kann ebenfalls mit dem Refresh-Headerfeld einrichten. Man muss lediglich neben der Ablauffrist noch den anzusteuernden URL angeben:

<meta http-equiv="refresh" 
content="10; url=http://www.server.de/meinweb/start.html" />

Moderne Webs, die vor der eigentlichen Startseite (Homepage) eine Eingangsseite (Portal) stehen haben, können das Refresh-Headerfeld dazu benutzen, den Webbesucher automatisch von der Eingangsseite zur Startseite des Webs zu führen - obwohl ein gut sichtbarer Link hier meist die bessere Alternative ist.

Schließlich kann man mit Hilfe des Refresh-Headerfelds eine Art Diashow einrichten. Sie brauchen dazu nur die einzelnen Webseiten mit Ihren Photos aufzusetzen und jede Seite mit einem Refresh-Headerfeld zu versehen, der zur nächsten Seite in der Diashow weiterleitet.

Neben dem Refresh-Headerfeld kann man auch JavaScript zur automatischen Weiterleitung verwenden (siehe Kapitel 7).

Seitenübergangseffekte (Internet Explorer)

Natürlich gibt es auch Headerfelder, die von dem einen oder anderen Browser definiert und unterstützt werden, während sich alle anderen Browser weigern, diese Headerfelder anzuerkennen (oder in der Implementierung einfach etwas hinterher hinken). Hierzu gehören beispielsweise die Seitenübergangseffekte des Internet Explorers.

Was geschieht üblicherweise, wenn der Anwender auf einen Hyperlink klickt, der zu einer anderen Webseite führt? Der Browser löscht die aktuelle Webseite aus seinem Fenster und baut dann nach und nach die neue Webseite auf.

Ein Seitenübergang ist dagegen ein Überblendeffekt, der festlegt, wie die aktuelle Webseite Schritt für Schritt durch die neue Webseite zu ersetzen ist.

Da Seitenübergänge als simulierte HTTP-Headerfelder realisiert werden, werden sie von Browsern, die mit diesen Headerfeldern nichts anfangen können, einfach ignoriert. Sie können also ruhig für alle Freunde des Internet Explorers Seitenübergänge einbauen, ohne befürchten zu müssen, dass Navigator-Fans beim Anschauen Ihrer Webseiten mit Fehlermeldungen überschüttet werden.

Seitenübergänge werden in drei Schritten erstellt:

  1. Zuerst legt man fest, bei welchem Ereignis der Überblendeffekt ausgeführt werden soll. Den Namen des Ereignisses geben Sie als Wert für das http-equiv-Attribut an.
    <meta http-equiv="page-exit" 

Attribut-Wert

Beschreibung

page-enter

Die Webseite wird betreten.

Unserer Erfahrung nach tritt der Effekt nur ein, wenn man die Webseite über den Zurück-Schalter des Browsers ansteuert.

page-exit

Die Webseite wird verlassen.

site-enter

Die Website wird betreten.

Unserer Erfahrung nach tritt der Effekt nur ein, wenn man die Webseite über den Zurück-Schalter des Browsers ansteuert.

Hinweis: Um den Effekt auszuprobieren, laden Sie die Webseite über ihren URL von localhost, rufen Sie dann eine Webseite einer andere Internet-Website oder eine Datei auf Ihrer Festplatte auf, und kehren Sie dann wieder zurück.

site-exit

Die Website wird verlassen.

  1. Danach rufen Sie die Übergangsfunktion auf und legen fest, wie lange der Übergang dauern soll.
  1. Für revealTrans müssen Sie als zweiten Parameter noch einen Zahlencode für den gewünschten Effekt angeben:
    <meta http-equiv="page-exit" 
    content="revealTrans(Duration=2.0,Transition=2)" />

Code

Effekt

0

Von außen einblenden

Die alte Webseite verschwindet in einem immer kleiner werdenden Rechteck.

1

Von innen einblenden

Die neue Webseite erscheint in einem immer größer werdenden Rechteck.

2

Spirale nach innen

Die alte Webseite verschwindet in einem immer kleiner werdenden Kreis.

3

Spirale nach außen

Die neue Webseite erscheint in einem immer größer werdenden Kreis.

4

Von unten rollen

Die neue Webseite wird zeilenweise von unten aufgebaut. Der Effekt sieht ungefähr so aus, als würde ein Vorhang hochgezogen.

Für den zeilenweisen Aufbau von oben, links und rechts gibt es die Effekte 5, 6 und 7.

8

Vertikale Jalousie

Ein Effekt, der an das Schließen (oder Öffnen) einer Jalousie mit senkrechten Lamellen erinnert. Die Codenummern 9, 10 und 11 stehen für weitere Jalousie-Effekte.

12

Auflösen

Einer der besten Effekte! Die Webseite löst sich pixelweise auf.

13

Vertikal schließen

Gleicht den Rolleffekten, nur dass die Webseite von beiden Seiten ausgeblendet wird.

14

Horizontal schließen

Die Webseite wird von oben und unten ausgeblendet.

17

Diagonaler Rolleffekt, bei dem die alte Webseite von rechts oben nach links untern verschwindet.

Die Codenummern 18, 19 und 20 stehen für weitere diagonale Rolleffekte.

21

Horizontale Linien

Die neue Webseite wird Zeile für Zeile eingeblendet. Die Zeilen werden aber nicht von oben nach unten, sondern in zufälliger Reihenfolge eingeblendet.

22

Vertikale Linien

Die neue Webseite wird Zeile für Zeile eingeblendet. Die Zeilen werden aber nicht von links nach rechts, sondern in zufälliger Reihenfolge eingeblendet.

23

Zufallsgenerator

Der Überblendeffekt wird erst bei Eintritt des Ereignisses ausgewählt.

Tabelle 6.5: Seitenübergangseffekte des Internet Explorers

Auf der Buch-CD finden Sie zwei Webseiten seite_a.html und seite_b.html mit denen Sie die Effekte ausprobieren können. Mit dem file-Link auf der Webseite seite_a.html können Sie das Verlassen der Website testen. Die Pfadangabe des Links müssen Sie gegebenenfalls anpassen.

Grundsätzlich sollten Sie Seitenübergänge nur sparsam einsetzen und nicht zu lange andauern lassen, sonst werden die Websurfer Ihre Seiten irgendwann enerviert meiden. Lassen Sie die Effekte aber auch nicht zu schnell ablaufen, sonst verlieren Sie unter Umständen ihre Wirkung. Hier ist Fingerspitzengefühl und viel Testarbeit gefragt.

6.4 Suchmaschinen unterstützen

Zu guter Letzt müssen Sie Ihre Website im World Wide Web bekannt machen, denn was nützt die schönste Website, wenn sie von niemandem gefunden wird. Schauen wir uns also an, wie Sie Ihre Webseite in vier Schritten vor einem Dornröschenschlaf bewahren können.

Unterstützen Sie Suchmaschinen und Web Crawlers

Stellen Sie sich vor, Sie hätten ein Web mit Gedichten ins Internet gestellt. Neben eigenen Werken finden sich in der Sammlung auch Werke von Rilke, Longfellow und einigen chinesischen Dichtern, die Sie besonders mögen, und Sie möchten nun dafür sorgen, dass Websurfer, die mit Hilfe gängiger Suchmaschinen (Lycos, Fireball, Yahoo, etc.) nach Gedichten oder den Namen der betreffenden Dichter suchen, auch auf Ihre Webseiten aufmerksam werden.

Üblicherweise bestehen die großen Suchmaschinen aus drei Teilen:

Suchmaschinen

Suchmaschinenbetreiber sind kommerzielle Unternehmen. Sie leben nicht von den Leuten, die ihre Suchmaschine verwenden, sondern von den Werbeeinnahmen, die sie kassieren, wenn viele Internetnutzer gerade ihre Suchmaschine auswählen.

Die Betreiber haben sich deshalb ein Rankingsystem ausgedacht, wie sie die in Ihrer Datenbank abgelegten Informationen einer HTML-Seite interpretieren, um sie für die Benutzer attraktiv zu halten. Der Nutzer des Suchdienstes möchte ja genau die Information finden, die er erwartet, und nicht auf Seiten geführt werden, die mit seinem Suchbegriff nichts zu tun haben, nur weil ein findiger Programmierer das Rankingsystem des Betreibers ausgetrickst hat (weshalb die Suchmaschinenbetreiber Ihre Strategie auch des öfteren ändern). Neben dem Domainenname werden das TITLE-Tag und die Schlüsselworte im META-Tag (siehe unten) in die Bewertung einbezogen (mit unterschiedlicher Gewichtung). Es wird aber auch geprüft, ob diese Stichworte als Text in der Seite wieder vorkommen. Daraus resultiert dann eine höhere Wertigkeit und ein höherer Stellenwert bei der Anzeige der Suchergebnisse. Die neuesten Gewichtungsfunktionen beziehen sogar die Publizität einer Seite mit in die Wertung ein. Dabei wird nachgeschaut, wie oft Links von anderen Webseiten auf die gesuchte Webseite verweisen, denn dann muss die gesuchte Seite ja eine gewisse Attraktivität haben.

Mit Hilfe einiger simpler Tricks können Sie Webcrawlern, die auf Ihre Seiten stoßen, bei der Auswertung und Katalogisierung behilflich sein.

Versuchen Sie nicht, mehr Besucher auf Ihre Website zu ziehen, indem Sie Schlüsselwörter angeben, die sehr attraktiv sind (beispielsweise »Geld«), aber nichts mit dem Inhalt Ihrer Webseiten zu tun haben. Erstens prüfen die meisten Webcrawler mittlerweile, ob sich die genannten Schlüsselwörter auch im Text der Seiten wiederfinden, zweitens kommen solche Mogeleien bei den Websurfern nicht gut an und drittens ist der Erfolg solcher Tricks fraglich, wenn die eigene Webseite dann als 1054-ter Eintrag zum Stichwort »Geld« aufgeführt wird.

Die wichtigsten Sprachcodes sind en (Englisch), en-US (Amerikanisch), fr (Französisch), de (Deutsch), it (Italienisch), nl (Holländisch), el (Griechisch), es (Spanisch), pt (Portugiesisch), ar (Arabisch), he (Hebräisch), ru (Russisch), zh (Chinesisch), ja (Japanisch), hi (Hindi), ur (Urdu) und sa (Sanskrit).

Das lang-Attribut im link-Tag bezieht sich eigentlich nur auf die Sprache, in der der Wert des title-Attributs verfasst ist (wichtig, wenn in diesem Sonderzeichen wie Umlaute oder Buchstaben mit Akzenten auftauchen), es kann aber nicht schaden, es zu setzen.

Schließlich gibt es auch die Möglichkeit, eine Webseite von der Indexierung durch Webcrawler auszuschließen. Der beste Weg hierfür besteht darin, im Website-Verzeichnis eine Datei robots.txt aufzusetzen und in dieser die auszuschließenden Webseiten aufzuführen (siehe beispielsweise http://www.w3.org/robots.txt). Die Datei robots.txt wird allerdings nur im obersten Verzeichnis einer Website (Webdomäne) beachtet, nicht in den Unterverzeichnissen der Webs (wenn die Webs mehrerer Mitglieder unter einer Domäne abgelegt sind). Wenn Sie Ihr Web also beispielsweise in einem eigenen Unterverzeichnis ablegen, müssen Sie sich zur Anpassung von robots.txt an Ihren Internet-Provider wenden. Alternativ können Sie Ihre Webseiten um ein <meta>-Element mit dem Namen robots erweitern und als content einen der folgenden Werte angeben: noindex (nicht indexieren), nofollow (nicht den enthaltenen Links folgen), index (indexieren und in die Suchmaschine aufnehmen), all (indexieren und Links folgen).

Melden Sie sich bei verschiedenen Suchmaschinen an

Bei manchen Suchmaschinen kann (muss) man sich direkt anmelden, um in den Katalog aufgenommen zu werden.

http://www.yellow.com

http://www.yahoo.com

http://www.submit-it.com

Bei manchen Suchmaschinen ist der direkte Eintrag in den Katalog mit einer Gebühr verbunden.

Verschicken Sie E-Mails.

Schicken Sie E-Mails an Ihre Freunde, Bekannte und Kollegen und werben Sie für Ihre Website.

Setzen Sie sich mit anderen Webautoren zusammen

Setzen Sie sich mit anderen Webautoren in Verbindung, die über die gleichen Interessengebiete publizieren und fragen Sie an, ob diese Links auf Ihre Homepage einrichten möchten.

6.5 Zusammenfassung

Am heutigen Tag haben wir drei Themengebiete behandelt: die Einbindung von Multimedia-Dateien, die Anzeige von Quickinfos und die Tags für den <head>-Abschnitt.

Traditionell werden Multimedia-Dateien mit Hilfe des <embed>-Tags in Webseiten integriert (alternativ kann man Hyperlinks auf die Dateien anbieten). Das <embed>-Tag wurde allerdings nie in den HTML-Standard aufgenommen. Dieser spezifiziert stattdessen das <object>-Tag, mit dem man neben Multimedia-Dateien auch Programmobjekte (beispielsweise Applets oder ActiveX-Steuerelemente) einbetten kann. Leider wird das <object>-Tag von den gängigen Browsern in ganz unterschiedlicher Art und Weise unterstützt und eignet sich derzeit eigentlich vornehmlich für die Integration von Programmobjekten (siehe Kapitel 15 und 16).

Relativ einfach gestaltet sich die Einrichtung von Quickinfos - kleine (Hilfe-)Texte zu HTML-Elementen die eingeblendet werden, wenn die Maus über dem zugehörigen Element verweilt. Für Quickinfos muss man nur das title-Attribut setzen (und hoffen, dass die Browser der Webbesucher Quickinfos anzeigen).

Schließlich haben wir uns die Tags für den <head>-Abschnitt angeschaut: <base>, <link> und <meta>, wobei wir uns besonders ausführlich mit den Seitenübergängen des Internet Explorers und der - browserunabhängigen - Unterstützung von Suchmaschinen beschäftigt haben.

6.6 Fragen und Antworten

Frage:
Warum wird das <object>-Tag derzeit so unvollständig unterstützt?

Antwort:
Zum einem weil die Webdesigner seit Jahren das <embed>-Tag zur Einbindung von Multimedia-Inhalten verwenden (folglich sind die Browser-Hersteller quasi gezwungen das <embed>-Tag weiter zu unterstützen. Zum anderen weil Microsoft schon vor dem HTML-Standard ein <object>-Tag definiert hat, dass allerdings lediglich zur Einbindung von Programmobjekten (insbesondere ActiveX- Steuerelementen) vorgesehen war.

Frage:
Wozu soll ich Seitenübergänge einrichten, die man nur im Internet Explorer sieht?

Antwort:
Seitenübergänge können, sparsam eingesetzt, ganz nett sein, und der Internet Explorer wird derzeit immerhin von rund 60% aller Websurfer benutzt. Außerdem entsteht kein Schaden, wenn Websurfer Browser verwenden, die die Seitenübergänge nicht unterstützen.

Frage:
Es gibt so viele META-Tags. Muss ich diese Tags alle verwenden?

Antwort:
Nein, alle META-Tags sind optional. Es empfiehlt sich allerdings, von den META-Tags zur Angabe der Medieninhalte (welcher Stylesheet-Typ), zur Unterstützung der Suchroboter und zur Angabe des Autors eifrig Gebrauch zu machen (es ist ja schließlich nur ein wenig Tipparbeit).

Frage:
Ich habe von Diensten gehört, die anbieten, mich im Suchmaschinenranking an die vorderen Positionen zu bringen. Ist das seriös?

Antwort:
Je nach Wichtigkeit einer Seite kann es sinnvoll sein, das Ranking einer Seite genauestens zu verfolgen und gegebenenfalls zu fördern. Dafür gibt es Dienste, die aber nur funktionieren können, wenn sie entsprechend teuer sind, damit sich nicht jeder diesen Service leisten kann. Es kann ja immer nur ein Eintrag an erster Stelle in der Suchmaschine erscheinen.

Frage:
Freunde empfehlen mir darüber hinaus, möglichst viele Schlüsselwörter anzugeben, um mich an die Spitze der Suchergebnisse zu bringen. Was ist davon zu halten?

Antwort:
Die Suchmaschinen beschränken die Anzahl der Suchbegriffe, indem Sie die maximale Zahl von Zeichen für alle Suchbegriffe einer Webseite auf 512 bis 1024 Buchstaben festlegen. Mehr Zeichen werden nicht eingelesen, so dass eine endlose Aneinanderreihung von Suchbegriffen sinnlos ist. Die Begriffe sollten natürlich auch etwas mit der auf Ihren Seiten zu findenden Informationen zu tun haben, sonst verlässt ein Internetsurfer ihre Seite genervt sehr schnell wieder.

6.7 Workshop

Der Workshop enthält Quizfragen, die Ihnen helfen sollen, Ihr Wissen zu festigen, und Übungen, die Sie anregen sollen, das eben Gelernte umzusetzen und eigene Erfahrungen zu sammeln. Versuchen Sie, das Quiz und die Übungen zu beantworten und zu verstehen, bevor Sie zur Lektion des nächsten Tages übergehen.

Quiz

  1. Wie kann man auf einer Webseite Sounddateien zum Abspielen anbieten?
  2. Warum sollten Quickinfos keine wichtigen Informationen enthalten?
  3. Eine Webseite spezifiziert folgende Basisadresse: http://www.meinServer.de/Verz. welche absoluten URLs erzeugt der Browser dann für folgende relativen URLs?
  1. Was ist ein Webcrawler oder Suchroboter?
  2. Welche beiden META-Tags sollte man mindestens zur Unterstützung von Suchrobotern aufsetzen?

Übungen

  1. Setzen Sie eine Webseite mit Hyperlinks zum Abspielen von verschiedenen WAV- Dateien auf.
  2. Erstellen Sie eine Eingangsseite zu einem Web (farbiger Hintergrund, kurzer Willkommenstext, Hyperlink zur Hauptseite des Webs). Versehen Sie die Webseite mit META-Tags zur Unterstützung von Webcrawlern und richten Sie einen unsichtbaren Textabschnitt ein, in dem Sie den Inhalt des Webs noch einmal beschreiben und alle Schlüsselwörter aus dem Header-Abschnitt verwenden.3


vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


123

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH