HTML-Einführung von Hubert Partl, März 1996

Layout und Spezialeffekte

Schönes Layout mit HTML - wie geht das?

Logisches Markup und Layout-Hinweise

Wie im Abschnitt "Inhalt und Form" erläutert, wird im HTML-File am WWW-Server nur die logische Bedeutung der Text-Teile festgelegt, und sie werden von den Web-Browsern der Benutzer auf deren Client-Bildschirmen jeweils so dargestellt, wie es für diesen Benutzer und diesen Client am besten ist.

Man kann aber im HTML-File Hinweise angeben, wie und in welchem Layout die Elemente am Client nach Maßgabe der technischen Möglichkeiten und der persönlichen Einstellungen des Benutzers dargestellt werden sollen. Damit kann das Layout zwar nicht zwingend vorgeschrieben, aber weitgehend beeinflußt werden. Die verschiedenen Web-Browser befolgen diese Hinweise jeweils so gut wie möglich. Besonders interessant ist in diesem Zusammenhang die in HTML 3 vorgesehene Möglichkeit von "Style-Sheets".

In Spezialfällen, bei denen das genaue Layout wichtig ist, kann es sinnvoll sein, die Information als PostScript- oder PDF- oder RTF-File oder als Bild oder "Image-Map" verfügbar zu machen.

Wenn die Glocken locken...

Es ist niemals günstig, spezielle Layout-Effekte dadurch zu erreichen, daß man HTML-Befehle für etwas anderes als deren logische Bedeutung einsetzt.

Es mag zum Beispiel lustig aussehen, in einem Text alle Anfangsbuchstaben mit fetten Buchstaben darzustellen. Aber in einer Konstruktion wie

<strong>F</strong>rohe <strong>F</strong>eier 
mit <strong>G</strong>locken und <strong>F</strong>l&ouml;ten
 

würden manche Suchhilfen nicht die Stichwörter frohe, Feier, Glocken und Flöten finden sondern die Stichwörter rohe, Eier, locken und löten, und auch im Falle einer Sprachausgabe oder bei einer automatischen Übersetzung in eine andere Sprache würden dieselben Mißverständnisse auftreten.

Solche Spezialeffekte kann man besser mit Hilfe von Klassen und Style-Sheets erreichen.

Norm oder nicht Norm, das ist hier die Frage

Sie als Autor haben die Wahl:

Bitte beachten Sie in diesem Zusammenhang auch die Warnung vor Firmenabhängigkeiten.

Diese Grundsätze gelten nicht nur für die HTML-Files sondern für alle Files, die für den Zugriff durch viele Benutzer gedacht sind. Wenn Sie zum Beispiel einen Text im Binär-Format von "MS-Word 6.0 für Windows" abspeichern, kann er von Benutzern anderer PC-Programme oder von Macintosh-Benutzern nicht verwendet werden. Günstiger wäre es in diesem Fall, den Text im "Rich Text Format" (RTF) abzuspeichern, das von allen Textverarbeitungsprogrammen verstanden wird, oder als PostScript-File oder noch besser als normgerechtes HTML-File.

Schrift

Schriftarten

In Spezialfällen kann man die Schriftart mit folgenden Befehlen festlegen:
<b> und </b> für fette Schrift (boldface),
<i> und </i> für kursive Schrift (italic),
<u> und </u> für Unterstreichungen (underline),
<tt> und </tt> für nicht proportionale Schrift (teletype),
<code> und </code> für Computer-Schrift,
<big> und </big> für größere Schrift,
<small> und </small> für kleinere Schrift.

Diese Befehle sollten Sie nur dann verwenden, wenn eine bestimmte Schriftart per Konvention vorgeschrieben ist (z.B. Fettdruck für Vektoren und Kursivdruck für skalare Variable in der Mathematik, Computer-Schrift für Programmbeispiele, Kursivdruck für lateinische Pflanzen- und Tiernamen und dergleichen).

Wenn es jedoch darum geht, Wörter oder Textteile mit einer bestimmten Bedeutung vom normalen Text abzuheben, sollten Sie nicht diese Befehle verwenden sondern die Markierung mit <em> oder <strong>.

Unterstreichungen sollten Sie überhaupt vermeiden, weil sie Verwechslungen mit Hypertext-Links bewirken würden.

Manche Schriftarten können von manchen Clients nicht dargestellt werden, sie werden dann durch eine andere geeignete Schriftart ersetzt.

Schriftgrößen

Die Schriftgröße wird vom Benutzer auf seinem Client so eingestellt, wie es für seine Bildschirm-Auflösung und seine Augen am besten ist.

Viele, aber nicht alle Web-Browser stellen Überschriften der Ebenen 1 bis 3 durch fette und große Schrift dar, manche stellen Überschriften der Ebenen 5 und 6 durch kleinere Schrift dar. Die entsprechenden Befehle <hx> sollten aber wirklich nur für Überschriften der jeweiligen Ebene verwendet werden und nicht für andere Zwecke, denn das hätte unerwünschte Nebeneffekte auf eine eventuelle Einrückung der nachfolgenden Texte sowie auf Suchhilfen und automatisch erstellte Inhaltsverzeichnisse.

In HTML 3 kann die Schriftgröße mit den Befehlen
<big> und </big> für größere Schrift und
<small> und </small> für kleinere Schrift
beeinflußt werden.

Außerdem ist in HTML 3 die Möglichkeit vorgesehen, die Schriftgröße und andere Eigenschaften durch die Angabe von Klassen wie z.B. <em class="gross"> oder <p class="wichtig"> in Verbindung mit Style-Sheets zu beeinflussen. Diese Class-Hinweise werden von manchen Web-Browsern befolgt und von anderen ignoriert.

Manche Web-Browser unterstützen nicht genormte Font-Befehle, die nur bei der Verwendung von ganz bestimmten Clients funktionieren und auch dann nur, wenn ganz bestimmte Fonts installiert sind. Diese Befehle sollten deshalb nicht verwendet werden.

Farben <em> <strong> <body> <font> class <style>

Im allgemeinen ist es günstiger, wenn Sie dem Leser überlassen, welche Schrift- und Hintergrundfarben er auf seinem Client-Rechner verwendet - in Abhängigkeit von den technischen Möglichkeiten seines Bildschirms und Druckers, den Lichtverhältnissen in seinem Zimmer, der Sehschärfe seiner Augen, seinen Gewohnheiten, dem Zusammenspiel mit anderen Bildschirmfenstern - kurz, so wie es für ihn am angenehmsten ist.

Wenn Sie als Autor trotzdem auf Ihren Web-Pages bestimmte Farben für bestimmte Zwecke einsetzen wollen, dann müssen Sie die folgenden Punkte beachten:

In HTML 2 gibt es keine Befehle für die Spezifikation von Farben, sondern nur allgemein für Hervorhebungen mit <em> und <strong>. In HTML 3 ist die Möglichkeit vorgesehen, Farben und andere graphische Effekte mit Klassen und Style-Sheets zu vereinbaren. Manche Web-Browser unterstützen andere, nicht genormte Befehle und Parameter zum Festlegen von Farben innerhalb von HTML-Files, z.B. mit <font> und <body>. Im folgenden wird angegeben, wie Sie diese verschiedenen Möglichkeit so kombinieren sollen, daß Sie den gewünschten Effekt auf möglichst vielen Web-Browsern erreichen.

Die Farben werden in diesen Befehlen meist in der Form #rrggbb spezifiziert, wobei rr, gg und bb hexadezimale Zahlenangaben zwischen 00 (0) und FF (255) für den Rot-, Grün- und Blauanteil sind. Damit können theoretisch ca. 16 Millionen verschiedene Farben spezifiziert werden, praktisch sollten Sie sich jedoch auf die 216 Farben beschränken, die aus Kombinationen von 00, 33, 66, 99, CC und FF zusammengesetzt sind, oder überhaupt nur auf die aus 00 und FF zusammengesetzten Grundfarben. Beispiele (wobei die Sternchen je nach dem verwendeten Browser in den jeweiligen Farben erscheinen oder nicht):

#FFFFFF = weiß *****
#000000 = schwarz *****
#FF0000 = rot *****
#00FF00 = grün *****
#0000FF = blau *****
#FFFF00 = gelb *****
#FF00FF = magenta (lila) *****
#00FFFF = cyan (blaugrün) *****
#999999 = grau *****
#000066 = dunkelblau *****
#9999FF = hellblau *****
#660000 = dunkelrot *****
#FF9999 = rosa *****

In manchen Fällen können Farben auch durch bestimmte englische Wörter spezifiziert werden, z.B. white, black, red, blue, green.

Beispiel: Sie wollen erreichen, daß der Name Ihrer Firma immer in blauer Farbe und/oder fetter oder stark hervorgehobener Schrift erscheint. Als Kontrast dazu wählen Sie weiß für den Hintergrund, schwarz für den normalen Text und verschiedene Rottöne für Hypertext-Links.

In Ihrem HTML-File "blue.html" geben Sie zu diesem Zweck die folgende Kombination von Befehlen an:

<html>
<head>
<title>Big Blue</title>
<link rev=made href="webmaster@www.bigblue.com">
<link rel=stylesheet href="blue.css" type="text/css">
</head>
<body text="#000000" bgcolor="#FFFFFF" 
      link="#990000" vlink="#660000" alink="#FF0000" >
<h1 class=blue><font color="#0000FF">Big Blue</font></h1>
<p>
Die Firma
<strong class=blue><font color="#0000FF">Big Blue</font></strong>
ist die beste ...
</body>
</html>
 

und im Style-Sheet-File "blue.css" die folgenden Spezifikationen: 

 BODY { color: black; background: white }
 A:link    { color: #990000 }
 A:visited { color: #660000 }
 A:active  { color: #FF0000 }
 .blue { color: #0000FF; font-weight: bold }
 

Anmerkung: Theoretisch könnten Sie diese Style-Angaben direkt im HTML-File angeben, zwischen <style type="text/css"> und </style> innerhalb von <head>, anstelle des Style-Sheet-Link, aber manche nicht normgerechte Browser würden die Style-Angaben dann als Text am Bildschirm anzeigen statt sie zu interpretieren oder zu ignorieren.

Hier noch ein Beispiel dafür, wie Sie es nicht machen sollten:

- - - Die Eingabe von 

<font color="#999999">Grau</font> 
ist in Goethes "Faust" die Theorie, doch
<font color="#00FF00">gr&uuml;n</font> 
des Lebens 
<font color="#FF9900">goldner</font> 
Baum, und was man 
<font color="#000000">schwarz</font> 
auf 
<font color="#FFFFFF">wei&szlig;</font> 
besitzt, kann man getrost nach Hause tragen.
 

- - - bewirkt die Ausgabe von

Grau ist in Goethes "Faust" die Theorie, doch grün des Lebens goldner Baum, und was man schwarz auf weiß besitzt, kann man getrost nach Hause tragen.

und je nachdem, welchen Web-Browser Sie verwenden, sehen Sie hier entweder überhaupt keine Hervorhebung der Farbennamen, oder ein Teil dieser Wörter hebt sich nicht gut genug von der Hintergrundfarbe ab.

- - -

 

Anordnung (align)

Linksbündig, rechtsbündig, zentriert

Die Anordnung und Ausrichtung von Texten und Bildern in Absätzen, Überschriften und Tabellen kann mit Align-Hinweisen in den HTML-Befehlen <p>, <h1>, <td> usw. beeinflußt werden.

Beispiele:

- - - Die Eingabe von 

<p align=left>
Linksb&uuml;ndig ist die normale Ausrichtung von Abs&auml;tzen.
<p align=right>
Hoffentlich geht das
<br>
mit rechten Dingen zu.
<p align=center>
Im Reich der<br>Mitte
<p>
 

- - - bewirkt eine Darstellung wie

Linksbündig ist die normale Ausrichtung von Absätzen.

Hoffentlich geht das
mit rechten Dingen zu.

Im Reich der
Mitte

- - -

Die Align-Hinweise werden von manchen Web-Browsern befolgt und von anderen ignoriert.

Vorsicht!

Zentrierte und linksbündige Layouts sollen niemals vermischt werden:

In linksbündigen Layouts sucht das Auge des Lesers entlang des linken Randes nach allen wichtigen Elementen (Überschriften, Aufzählungen, Numerierungen u.dgl.).

In zentrierten Layouts sucht der Leser in der Mitte des Bildschirms nach den wichtigen Elementen.

Wenn zentrierte und linksbündige Überschriften oder Listen abwechseln, funktioniert das rasche Auffinden der wichtigen Elemente nicht mehr, der Überblick geht verloren, und das Layout wird als unübersichtlich empfunden.

Beispiel:

. . . . . Chaos

ist schlecht lesbar.

Harmonie

ist gut lesbar.

- - -

Deshalb: entweder alle Überschriften zentriert, oder (besser) alle Überschriften linksbündig.

Umgekehrt ist es aber üblich und empfehlenswert, bestimmte "fremde Elemente" wie Titelseiten, Bilder, Tabellen oder mathematische Formeln durch Zentrierung deutlich vom laufenden Text abzuheben und damit die Übersichtlichkeit und Lesbarkeit des laufenden Textes zu vergrößern.

Beispiel:

- - - Die Eingabe von 

<p align=center>
<img src="austria.gif" alt="Oesterreich">
 

- - - bewirkt eine Darstellung wie

Oesterreich

- - -

Nicht <center> sondern <p align=center>

Manche Web-Browser erlauben als Alternative zu den genormten Befehlen <p align=center> und <p> auch das nicht genormte Befehlspaar <center> und </center>. Dieses Befehlspaar sollen Sie aber nicht verwenden, weil dabei die logische Struktur des Textes völlig unklar wird: Manche Web-Browser beginnen nämlich bei <center> und </center> einen neuen Absatz, viele andere aber nicht!

Beispiel (frei nach Otto Schenk in der "Fledermaus"):

- - - Die Eingabe von 

Ich sagte: 
<center>nichts</center>w&uuml;rdiger Herr Direktor!
 

- - - bewirkt auf manchen Browsern eine Darstellung wie

Ich sagte:

nichts

würdiger Herr Direktor!

- - - aber auf anderen Browsern eine Darstellung wie

Ich sagte: nichtswürdiger Herr Direktor!

- - -

 

Unten, oben, neben Bildern

Bei Inline-Bildern kann mit Align-Hinweisen im Befehl <img> bzw. <insert> bestimmt werden, wie der Text neben dem Bild positioniert werden soll:
align="top" für oben,
align="bottom" für unten,
align="middle" für auf der halben Höhe.

Beispiele:

- - - Die Eingabe von 

Luft . . . 
<img src="small.jpg" alt="[ Bild ]" align="top"> 
 . . . Köpfe
 

- - - bewirkt eine Darstellung wie

Luft . . . [ Bild ] . . . Köpfe

- - - Die Eingabe von 

Wasser . . . 
<img src="small.jpg" alt="[ Bild ]" align="middle"> 
 . . . Arme
 

- - - bewirkt eine Darstellung wie

Wasser . . . [ Bild ] . . . Arme

- - - Die Eingabe von 

Erde . . . 
<img src="small.jpg" alt="[ Bild ]" align="bottom"> 
 . . . Beine
 

- - - bewirkt eine Darstellung wie

Erde . . . [ Bild ] . . . Beine

- - -

Die Align-Hinweise werden von manchen Web-Browsern befolgt und von anderen ignoriert.

Abstände

Horizontale Abstände

Wenn man bestimmte Abstände zwischen Wörtern oder eine bestimmte Ausrichtung von Wörtern untereinander erreichen will, empfiehlt sich die Verwendung von <pre> oder von <table>. In HTML 3 gibt es auch einen Tabulator-Befehl <tab>, der wird jedoch nicht von allen Web-Browsern unterstützt.

Bei manchen Browsern kann man größere Wortabstände auch mit der Entity &nbsp; oder mit unsichtbaren ("transparenten") Inline-Bildern erreichen, dies führt aber bei anderen Browsern zu völlig unbrauchbaren Ergebnissen und sollte deshalb nicht verwendet werden.

In manchen Fällen kann man anstelle von größeren Wortabständen auch einfache andere Mittel einsetzen wie . . . Punkte oder - - - Gedankenstriche.

Einrückungen

Viele Web-Browser stellen Definition-Listen und Blockquotes und Notes durch eingerückte Absätze dar, andere aber nicht.

Trotzdem sollte man immer, wenn ein untergeordneter Text zu einem übergeordneten Text "dazugehört", eine Definition-Liste verwenden, egal ob der Browser dafür Einrückungen oder eine andere, für den Client besser geeignete Darstellung verwendet.

Ebenso sollte man für Absätze, die sich vom normalen Text abheben sollen, immer Blockquotes oder Notes verwenden, egal ob der Browser dafür Einrückungen oder eine andere, für den Client besser geeignete Darstellung verwendet.

In anderen Fällen kann man Einrückungen mit <pre> erreichen. In HTML 3 gibt es auch einen Tabulator-Befehl <tab>, der wird jedoch nicht von allen Web-Browsern unterstützt.

Vertikale Abstände

Manche Browser erzeugen bei mehrfachen <p>- oder <br>-Befehlen zusätzliche Leerzeilen, bei anderen Browsern werden aber leere Zeilen und leere Absätze ignoriert und alle Absätze und Zeilen mit einheitlichen Abständen dargestellt.

Da auf Bildschirmen meist wesentlich weniger Zeilen sichtbar sind als auf einer Papierseite, würden größere vertikale Abstände die Übersichtlichkeit nicht (wie auf dem Papier) erhöhen sondern verringern. Für die Trennung von Text-Abschnitten sollten deshalb nicht zusätzliche Leerzeilen sondern Trennlinien oder andere Elemente wie z.B.

<p align=center> * * * <p>
 

verwendet werden.

Trennlinien (horizontal rule) <hr>

Mit <hr> kann man eine waagrechte Trennlinie in den Text einfügen. Vor und nach der Linie erfolgt ein Zeilenwechsel oder neuer Absatz.

Klassen (class) und Style-Sheets <style>

HTML 3 sieht eine Möglichkeit vor, vom Autor definierte Markups ("Klassen") für spezielle Elemente zu verwenden und in eigenen "Style-Sheets" anzugeben, in welchem Layout die Elemente von den Web-Browsern nach Maßgabe der technischen Möglichkeiten dargestellt werden sollen.

Diese Style-Sheets sind ein sehr mächtiges Instrument. Sie bieten dem Autor vielfältige Möglichkeiten, sehr schöne und wirkungsvolle, aber auch sehr häßliche oder verwirrende Layouts zu erzeugen. Deshalb ist ein gutes Konzept und die Hilfe von professionellen Layout-Designern oder von guter Fachliteratur zu diesem Thema empfehlenswert.

Beispiele:

Ein Autor kann besonders wichtige Hinweise zwischen <note class="wichtig"> und </note> einschließen und im Style-Sheet angeben, daß alle mit class="wichtig" markierten Notes eingerückt und in einer großen, fetten Schrift geschrieben werden sollen.

Ein Autor kann das sogenannte "Kleingedruckte" in einem Vertragstext mit <p class="unwichtig"> markieren und im Style-Sheet angeben, daß alle mit class="unwichtig" markierten Texte in einer kleineren Schrift auf hellblauem Hintergrund geschrieben werden sollen.

Eine Firma kann mit Hilfe eines Style-Sheet für alle ihre Web-Pages ein besonderes, einheitliches, für die Firma typisches Layout festlegen ("Corporate Identity"): die Schriftart, die Farben von Text und Hintergrund, die Abstände und Einrückungen von Absätzen und Listen, die Größe und Farbe der Überschriften, und so weiter.

Ein Autor kann für Gruppen von Web-Pages, die für verschiedene Zwecke dienen (z.B. Marketing oder technische Details) oder die sich an verschiedene Zielgruppen wenden (z.B. an Kinder oder Erwachsene) jeweils verschiedene, dafür geeignete Layouts einsetzen.

- - -

Wenn der Web-Browser keine Style-Sheets unterstützt, werden die Class-Hinweise ignoriert. Wenn ein Client bestimmte im Style-Sheet geforderte Elemente nicht darstellen kann (z.B. keine Farben), werden diese Style-Angaben ignoriert oder durch andere Effekte ersetzt. Klassen und Style-Sheets geben dem Autor also die Möglichkeit, das zum logischen Markup gehörende Layout so zu spezifizieren, daß das Aussehen am Client so genau wie möglich seinen Wünschen und Vorstellungen entspricht, die Information aber trotzdem auf allen verschiedenen Clients dargestellt werden kann.

Die "Style-Sheets" werden am besten als separate Files gespeichert, die von mehreren HTML-Files verwendet werden können. Dieses Style-File wird jeweils im Head des HTML-Files mit einem Link-Befehl der Form
<link rel=stylesheet href="URL" type="text/css">
angegeben. Einzelne Style-Angaben können auch innerhalb des HTML-Files angegeben werden, und zwar zwischen <style> und </style> ebenfalls innerhalb des Head.

Der Inhalt der Style-Sheets wird in einer Sprache wie CSS (Cascading Style Sheets) oder DSSSL (Document Style and Semantics Specification Language) festgelegt. Für die Spezifikationen und für Hinweise und Beispiele zu ihrer Verwendung wird auf die Referenzen verwiesen.

Leider ist die Normung der Style-Sheets noch nicht abgeschlossen, und leider werden Style-Sheets von den meisten Web-Browsern noch nicht unterstützt.

Hier ein Beispiel dafür, wie so etwas theoretisch aussehen könnte: eine Skizze für eine bunte Seite, auf der der normale Text schwarz auf weiß erscheinen soll, wichtiger Text rot auf weiß in fetter Schrift, die Bezeichnung "BOKU" grün in der jeweiligen Schriftart, und Hinweise (notes) eingerückt werden: 

<html>
<head>
<title>Die bunte Studentenseite der BOKU</title>
 
<style type="text/css">
BODY { color: black; background: white; font-family: times serif }
A:link, A:visited { color: dark-red; text-decoration: underline }
A:active { color: dark-red; background: yellow }
.boku { color: dark-green }
.wichtig { color: red; font-style: normal; font-weight: bold }
EM { font-style: normal; font-weight: demi-bold }
NOTE { margin-left: 3em; margin-right: 3em }
</style>
 
</head>
<body>
<h1>PCs f&uuml;r <em class="boku">BOKU</em>-Studenten</h1>
<p>
Der <em>Zentrale Informatikdienst</em> der
<em class="boku">Universit&auml;t f&uuml;r Bodenkultur</em>
stellt den 
<em class="boku">BOKU</em>-Studenten 
PCs in den Benutzerr&auml;umen zur Verf&uuml;gung.
<p><note class="wichtig">
Achtung!
Diese PCs d&uuml;rfen nur f&uuml;r die Lehre und Forschung der 
<em class="boku">BOKU</em>
verwendet werden und nicht f&uuml;r andere Zwecke!
</note><p>
Genauere Informationen ...
</body>
</html>
 

- - -

Praktisch sollten Sie aber die Style-Angaben nicht zwischen <style> und </style> innerhalb des HTML-Files angeben (weil das manche Browser verwirren könnte) sondern in einem separaten Style-File, das mit <link> angegeben wird, und Sie sollten die Style- und Klassen-Angaben mit den von verschiedenen Web-Browsern unterstützten anderen HTML-Tags wie z.B. <em>, <strong>, <body>, <font> etc. so kombinieren, daß Sie den gewünschten Effekt auf möglichst vielen Web-Browsern erreichen.

Ein dementsprechend erweitertes Beispiel finden Sie in den folgenden drei Files, die Sie separat ansehen und ausprobieren bzw. ausdrucken können:

Interaktion mit dem Benutzer

Mehr Leben ins World Wide Web!

Hier finden Sie nur kurze Hinweise auf diese Möglichkeiten für "Fortgeschrittene". Genauere Informationen müssen Sie der Dokumentation des jeweiligen WWW-Servers und den Referenzen entnehmen.

 

CGI-Prozeduren (Common Gateway Interface)

Eine CGI-Prozedur ist ein Programm, das auf dem WWW-Server läuft und die Ausgabe wie ein HTML-File an den Client sendet.

Im Gegensatz zu HTML-Files, die einen fixen Inhalt haben, kann man damit Informationen verteilen, die sich laufend ändern oder die von Benutzer-Eingaben abhängen.

Der Aufruf der CGI-Prozedur erfolgt in einem Hypertext-Link oder einem Formular mit einem URL der Form
http://hostname/cgi-directory/filename

Beispiel:

Eine einfache Unix-Shell-Prozedur, die Datum und Uhrzeit anzeigt:

#!/bin/sh
echo "Content-Type: text/html"
echo ""
echo "<head><title>Datum</title></head>"
echo "<body><p>Heute ist "
date 
echo "</body>"
exit
 

- - -

Eine etwas ausführlichere Version einer solchen Datumsanzeige finden Sie an der BOKU Wien.

CGI-Prozeduren können in verschiedenen Sprachen geschrieben werden (Shell-Scripts, Perl-Scripts, C-Programme u.a.). Die Detail-Informationen dazu finden Sie in der Dokumentation des jeweiligen WWW-Servers und in den Referenzen.

 

Zugriffe zählen

Sie als Autor möchten wahrscheinlich wissen, wie oft Ihre Informationen von Interessenten in aller Welt gelesen werden.

Relativ leicht können Sie erfahren, wie oft auf Ihr HTML-File am WWW-Server zugegriffen wurde. Die meisten WWW-Server führen ein "Log-File", in dem alle Zugriffe protokolliert werden, und Sie können mit einem einfachen Unix-Shell-Script zählen, wie oft Ihr Filename darin vorkommt. Beispiel:

#!/bin/sh
url="$1"
logfile=/a/cern/www.log
n=`grep -i "$url" $logfile | wc -l`
echo "$n Zugriffe auf $url"
exit
 

Außerdem finden Sie im Log-File auch die Information, von welchen Client-Rechnern auf Ihr File zugegriffen wurde (aber im allgemeinen nicht, von welchen Personen).

Damit zählen Sie aber nur die Anzahl der File-Übertragungen und nicht, wie oft die Information tatsächlich gelesen wurde. Schuld daran sind die sehr nützlichen sogenannten Cache-Speicher, die zur Entlastung der Netzverbindungen notwendig sind:

Die meisten Web-Browser haben einen lokalen Cache-Speicher. Wenn z.B. ein Benutzer in Berlin zehn mal die in Wien gespeicherte HTML-Einführung liest, wird sie nur beim ersten Mal von Wien nach Berlin übertragen und, solange der Platz ausreicht, in seinem Cache-Speicher abgelegt. Bei allen weiteren Zugriffen wird das File nicht nochmals von Wien nach Berlin übertragen, sondern viel einfacher und schneller aus dem lokalen Cache geholt (außer der File-Inhalt wurde inzwischen erneuert).

Viele Institutionen verwenden auch globale Cache-Server ("Proxy"), die dann für alle Zugriffe aus diesem Bereich wirken. Wenn z.B. tausend Benutzer in Berlin die in Wien gespeicherte HTML-Einführung lesen, wird sie nur beim ersten Mal von Wien nach Berlin übertragen und eine Kopie am Berliner Cache-Server abgelegt (solange der Speicherplatz ausreicht). Bei allen weiteren Zugriffen wird das File nicht nochmals von Wien nach Berlin übertragen, sondern viel schneller aus dem Berliner Cache-Server geholt (außer der File-Inhalt wurde inzwischen erneuert).

Die Zahl, wie oft Ihr File tatsächlich gelesen wurde, ist im allgemeinen also wesentlich höher als die am WWW-Server gezählte Zahl der File-Übertragungen.

Manche Autoren wollen die Zahl der Zugriffe auch innerhalb des HTML-Files speichern. Dies ist zwar technisch möglich (z.B. mit Hilfe einer CGI-Prozedur), aber nicht empfehlenswert, denn dann würde sich der File-Inhalt bei jedem Zugriff ändern, die oben beschriebene Cache-Methode nicht mehr wirken und der Zugriff auf das File für die Benutzer um Größenordnungen langsamer und teurer werden. Außerdem ist die Anzahl der File-Übertragungen meist nur für den Autor der Information und den Verwalter des WWW-Servers, aber nicht für die Leser interessant.

Formulare <form>

Der Inhalt von HTML-Files wird jeweils vom WWW-Server zum Benutzer am Client gesendet. Mit Hilfe von Formularen, die in HTML-Files stehen, können in der Gegenrichtung die Benutzer bestimmte Informationen am Client eingeben und an den WWW-Server senden. Diese Daten werden meistens von einer auf diesem Server laufenden CGI-Prozedur oder einem Mail-Programm verarbeitet.

Beispiel:

- - - Die Eingabe von 

<form method="get" 
action="http://www.boku.ac.at/cgi-bin/hein-get">
<b>Anmeldung</b> zur Geburtstagsfeier am 8. M&auml;rz 
<p>
<input type="radio" name="kommt" value="ja" checked> 
Ich komme.
<br>
<input type="radio" name="kommt" value="nein"> 
Ich komme nicht.
<p>
Name: 
<input name="wer" size="40" maxlength="512">
<p>
Telefonnummer: 
<input name="tel" size="20" maxlength="512">
<p>
<input type="submit" value="Anmeldung absenden">
</form>
 

- - - bewirkt eine Darstellung wie

Anmeldung zur Geburtstagsfeier am 8. März

Ich komme.
Ich komme nicht.

Name:

Telefonnummer:

- - -

Anmerkung: Die in diesem Beispiel verwendete CGI-Prozedur dient nur für Tests durch die Leser dieser Einführung. Wenn Sie dieses Formular ausfüllen und absenden, bekommen Sie eine kurze Test-Antwort, aber (leider) keine wirkliche Einladung zum "Heurigen".

Bei der Gestaltung von Formularen müssen die Normen und Konventionen für Benutzerschnittstellen und die Gewohnheiten und Erwartungen der Benutzer berücksichtigt werden.

Für genauere Informationen über die vom Server unterstützten Übertragungs-Methoden ("get" oder "post") und die Übergabe der Eingabedaten an die CGI-Prozedur wird auf die Dokumentation des jeweiligen WWW-Servers und auf die Referenzen verwiesen. Die CGI-Prozeduren müssen so geschrieben werden, daß Ihre Ausführung kein Sicherheitsrisiko für den Server-Computer darstellen kann, egal was für eventuell seltsame Eingaben von den Benutzern kommen.

Hier folgt als Beispiel die CGI-Prozedur, mit der die Antwort auf das obige Formular erzeugt wird. Sie verwendet die Methode "get" und den CERN httpd Server mit dem Hilfsprogramm "cgiparse" auf einem Unix-Rechner.

Die vom Formular an den Server gesendete Eingabe hat hier einen Aufbau der Form
name1=value1&name2=value2&name3=value3
und muß erst mit "cgiparse" (oder einem anderen geeigneten Hilfsprogramm) in die einzelnen Felder aufgeteilt werden.

#!/bin/sh
name="`/usr/local/bin/cgiparse -value wer`"
kommt="`/usr/local/bin/cgiparse -value kommt`"
echo "Content-Type: text/html"
echo ""
echo "<head><title>CGI-Test Geburtstag</title></head><body>"
echo "<h1>CGI-Test Geburtstag</h1>"
echo "<p>Hallo, $name !<p>"
if [ "$kommt" = "ja" ]
   then echo "Es freut mich, da&szlig; Du "
   else echo "Es tut mir leid, da&szlig; Du nicht "
fi
echo "zu meiner Geburtstagsfeier kommen willst. "
echo "<p>(Nein, nicht wirklich, aber "
echo "<b>Danke fuer den Test.</b>)"
echo "<p></body>"
exit
 

Bei komplexeren Anwendungen werden oft die Methode "post" und die Programmiersprache Perl verwendet, und es gibt jeweils verschiedene Hilfsprogramme für das Herausholen der einzelnen Felder aus dem an den Server gesendeten Eingabe-String.

Eine "echte" Anmeldungs-Prozedur würde die Zu- und Absagen mit Name und Telefonnummer in einer Datenbank speichern und dann die Bestätigung an den Client senden.

Das Senden einer solchen Antwort ist immer notwendig, denn der Benutzer muß auf seinem Bildschirm erkennen können, daß das "Anklicken" des Submit-Knopfes funktioniert hat ("Feedback"). Im einfachsten Fall genügt eine kurze Meldung, daß die Eingabe verarbeitet wird, und eventuell ein Hinweis, daß der Benutzer mit der Back-Taste oder dem Back-Befehl seines Browsers zur vorherigen Information zurückkehren und weiterarbeiten kann.

 

Index-Suche <isindex>

Fast alle Web-Browser haben eine eingebaute Funktion für "Index-Suche", die dem Benutzer die Eingabe eines "Suchbegriffs" ermöglicht - so ähnlich wie ein Formular, das nur aus einem einzigen Eingabe-Feld besteht.

Die Ausgabe der Aufforderung zur Eingabe des Suchbefehls, die Verarbeitung der Benutzereingabe und die Ausgabe der Suchergebnisse müssen durch eine auf dem WWW-Server laufende CGI-Prozedur erfolgen.

Die Angabe des HTML-Befehls <isindex> im <head> aktiviert diese Funktion am Web-Browser. Der Benutzer kann dann den entsprechenden Browser-Befehl eingeben (bzw. das entsprechende Feld am Bildschirm auswählen) und den Suchbegriff eingeben.

Beispiel:

Eine einfache CGI-Prozedur für die Suche in einem Telefonverzeichnis:

#!/bin/sh
echo "Content-Type: text/html"
echo ""
echo "<head><title>Telefonverzeichnis</title>"
if [ $# -eq 0 ]
then : # <isindex> Such-Maske
     echo "<isindex></head><body>"
     echo "<h1>Suche im Telefonverzeichnis</h1>"
     echo "Geben Sie den Befehl f&uuml;r Index-Suche "
     echo "und einen Suchbegriff ein.</body>"
else : # Suche durchfuehren
     echo "</head><body>"
     echo "<h1>Such-Ergebnis f&uuml;r $1</h1>"
     echo "<pre>"
     grep -i "$1" /usr/lib/telefon.liste
     echo "</pre></body>"
fi
exit
 

- - -

Eine etwas ausführlichere Version einer solchen Suche finden Sie an der BOKU Wien.

Image-Maps (ismap <map> usemap)

Image-Maps (Bild-Karten) erlauben die Verzweigung zu bestimmten Informationen durch die Auswahl ("Anklicken") von bestimmten Regionen innerhalb eines Inline-Bildes.

Dafür gibt es zwei verschiedene Verfahren:

Server-seitige Image-Maps (ismap)

Bei Server-seitigen Image-Maps muß die Verarbeitung durch eine auf dem WWW-Server laufende CGI-Prozedur erfolgen. Diese Möglichkeit ist in HTML 2 vorgesehen und wird von den meisten graphikfähigen Web-Browsern unterstützt.

Im HTML-File ist eine Kombination aus einem <a href>-Befehl für die CGI-Prozedur und einem <img>-Befehl für das Bild mit der Angabe "ismap" anzugeben.

Beispiel:

- - - Die Eingabe von 

<a href="http://www.boku.ac.at/cgi-bin/hein-map">
<img src="austria.gif" ismap></a>
 

- - - bewirkt eine Darstellung wie

und je nachdem, wo in diesem Bild Sie "klicken", bekommen Sie eine entsprechende Antwort.

Die zugehörige CGI-Prozedur hat folgenden Aufbau:

#!/bin/sh
echo "Content-Type: text/html"
echo ""
echo "<head><title>CGI-Test Image-Map</title></head><body>"
echo "<h1>CGI-Test Image-Map</h1><p>"
x=`echo $1 | sed -e 's/,.*$//'`
y=`echo $1 | sed -e 's/^.*,//'`
echo "x = $x (von links nach rechts)<p>"
echo "y = $y (von oben nach unten)<p>"
if [ "$y" -lt 16 -o "$y" -gt 31 ]
then echo "Farbe = rot<p>"
else echo "Farbe = weiß<p>"
fi
echo "<p></body>"
exit
 

- - -

Ein etwas sinnvolleres Beispiel finden Sie an der Universität Wien, wo Sie durch Anklicken der Städte in einer Österreich-Karte Informationen über die jeweilige Stadt erhalten.

Da nicht alle Web-Browser Inline-Bilder und Image-Maps unterstützen und da manche Benutzer mit langsamen oder teuren Netzverbindungen die Darstellung von Bildern in ihren persönlichen Einstellungen ausgeschaltet haben, sollte man bei einer Image-Map immer zusätzlich auch eine gewöhnliche Liste zur Auswahl von Hypertext-Links in Text-Form anbieten, damit alle Benutzer die betreffenden Informationen erreichen können.

Für genauere Informationen über das Zusammenspiel zwischen Bild und CGI-Prozedur und über Hilfsprogramme zu deren Erstellung wird auf die Referenzen verwiesen.

Client-seitige Image-Maps <map> usemap

Bei Client-seitigen Image-Maps erfolgt die Verarbeitung durch den Web-Browser auf Grund von entsprechenden Angaben im HTML-File, und es ist keine CGI-Prozedur notwendig. Diese Möglichkeit ist in HTML 3 vorgesehen und wird bereits von ein paar neueren Web-Browsern unterstützt.

Die Spezifikation, welche Teile des Bildes den Sprung zu welchem Hypertext-Link bewirken sollen, erfolgt mit Hilfe von <map> entweder im selben HTML-File wie die Verwendung des Bildes oder in einem separaten File, das gemeinsam mit dem Bild abgespeichert ist.

Im <img> oder <insert>-Befehl des Bildes wird dann mit "usemap" auf diese Map-Spezifikation verwiesen.

Da nicht alle Web-Browser solche Image-Maps unterstützen und da manche Benutzer die Darstellung von Bildern in ihren persönlichen Einstellungen ausgeschaltet haben, muß man bei einer solchen Image-Map zusätzlich ein "normales" Link mit <a href> angeben, das zu einer Liste von Hypertext-Links in einfacher Textform führt. Damit wird sichergestellt, daß alle Benutzer die betreffenden Informationen erreichen können.

Beispiel:

- - - Die Eingabe von 

<map name="map3">
<area shape=rect coords="0,0,89,15"  href="#oben">
<area shape=rect coords="0,16,89,31" href="#mitte">
<area shape=rect coords="0,32,89,47" href="#unten">
</map>
<p>Klicken Sie auf eines der drei Felder der Fahne 
<a href="#ohnemap"> 
<img src="austria.gif" alt="oder hier!" usemap="#map3"></a>
 

- - - bewirkt die Ausgabe von

Klicken Sie auf eines der drei Felder der Fahne oder hier!

Je nachdem, wo Sie in diesem Bild "klicken", gelangen Sie zu einer der folgenden vier Stellen:

  1. Sie haben das obere rote Feld ausgewählt.
  2. Sie haben das mittlere weiße Feld ausgewählt.
  3. Sie haben das untere rote Feld ausgewählt.
  4. Ihr Browser unterstützt Client-seitige Image-Maps nicht. Sie sind deshalb hier bei der Alternative "ohne Map" gelandet und können die drei Möglichkeiten nun mit normalen Hypertext-Links auswählen:

Die Eingabe für die im vierten Punkt beschriebene Alternative hat einen Aufbau der folgenden Form:

<a name="ohnemap">Ihr Browser ... </a> 
Sie ... k&ouml;nnen ... nun ... ausw&auml;hlen:
<ul>
<li><a href="#oben">Informationen zum oberen Bereich</a>
<li><a href="#mitte">Informationen zum mittleren Bereich</a>
<li><a href="#unten">Informationen zum unteren Bereich</a>
</ul>
 

- - -

 

Electronic Mail (mailto)

Die Angabe eines mailto-URL in einem <a href>-Befehl gibt dem Leser die Möglichkeit, von seinem Client aus eine kurze Nachricht per E-Mail an eine bestimmte Mail-Adresse zu senden, z.B. an den Autor der Web-Page.

Der Benutzer muß das Subject, den Text der Nachricht und seine Absender-Adresse am Client eintippen, und er muß die Erlaubnis zum Absenden von Mail haben.

Mailto-URLs werden nicht von allen Web-Browsern unterstützt. "Richtige" Mail-Programme sind für das Versenden von Electronic Mail im allgemeinen besser geeignet, insbesondere für wichtige oder längere Mail-Texte und für das Lesen von Antworten.

Deshalb ist es empfehlenswert, die Mail-Adresse nicht nur "versteckt" im URL sondern auch sichtbar im Text anzugeben.

Beispiel:

- - - Die Eingabe von 

Wenn Ihnen meine HTML-Einf&uuml;hrung gef&auml;llt, 
sagen Sie es bitte Ihren Kollegen. <br>
Wenn Sie darin Fehler finden, sagen Sie es bitte 
<a href="mailto:partl@mail.boku.ac.at">mir</a>. <br>
Meine Mail-Adresse ist 
<a href="mailto:partl@mail.boku.ac.at">partl@mail.boku.ac.at</a>. 
 

- - - bewirkt eine Darstellung wie

Wenn Ihnen meine HTML-Einführung gefällt, sagen Sie es bitte Ihren Kollegen.
Wenn Sie darin Fehler finden, sagen Sie es bitte mir.
Meine Mail-Adresse ist partl@mail.boku.ac.at.

- - -

 

Vorwort . Wegweiser . Inhaltsverzeichnis . Wörterbuch . Referenzen . Copyright
© Hubert Partl, BOKU Wien