Hypertext

Die bekannteste und am weitesten verbreitete hypermediale Form ist der Hypertext. Der überwiegende Teil des Inhalts des World Wide Web wird durch HTML, die Hypertext Markup Language, beschrieben. Wenn auch Erweiterungen wie Cascading Style Sheets (CSS) oder der Einsatz von programmierbaren Elementen mit Hilfe von JavaScript oder anderen Programmiersprachen eine Dynamisierung der Inhalte zumindest zum Teil erlauben und ermöglichen, so übernimmt der Inhalt doch vor allem die Verhaltenscharakteristika des Mediums Text, der wiedreum statisch ist.

In einem Hypertext können Teile des gesamten Textes wie Kapitel, Absätze, Sätze oder Worte als Start- und Zielanker zur Verlinkung definiert werden. Die Verbindung von HTML und CSS strebt die Trennung von Inhalt und Gestalt an. So soll die Strukturierung des Inhaltes durch die Nutzung von Gliederungsebenen innerhalb des HTML-Dokumentes erfolgen, so wie es auch in der (elektronischen) Textverarbeitung üblich ist. Zu jeder Gliederungsebene sollen die jeweiligen Inhalte eingefügt sein. Wie die Gliederungsstruktur und die Inhalte aussehen, soll idealerweise innerhalb des HTML-Dokuments nicht beeinflusst werden. Diese Informationen werden in einer separaten CSS-Datei vorgehalten. In dieser kann sowohl Einfluss auf die visuelle Gestaltung der Inhaltselemente als auch auf deren Anordnung genommen werden. Diese Trennung von Inhalt und Gestalt hat in mehrfacher Weise Vorteile:

• So kann mit wenig Aufwand eine komplette Umgestaltung der Präsentation erfolgen, ohne die Inhalte und deren Struktur verändern zu müssen.
• Der aktuelle Stand der Technik und Standardisierung ermöglicht eine teilweise Dynamisierung der Inhalte. So lassen sich beispielsweise Teile des Inhaltes verbergen, wenn ihre Darstellung nicht explizit vom Benutzer angefordert wird, obwohl sie Teil des HTML-Dokumentes sind.
• Die Auslagerung aller Gestaltungselemente erleichtert es Hilfsprogrammen wie zum Beispiel Screenreadern, die relevanten Inhalte barrierefrei zu präsentieren. Die in älteren Versionen von HTML übliche Vorgehensweise, dass Elemente wie Tabellen, die teilweise verschachtelt wurden, oder Frames und iFrames zur Gruppierung oder Anordnung missbraucht wurden, ist somit mittlerweile überflüssig.

Das folgende Beispiel soll die die veraltete Verschmelzung von Inhalt und Gestalt durch die Nutzung von HTML mit integriertem CSS bzw. mit integrierten Stilangaben darstellen:

Darstellung im Browser

Im Gegensatz zur obigen "Spaghetti-Form", sähe dasselbe Beispiel in "sauberer" Codierung dagegen wie unten dargestellt aus.

Dort wird das Prinzip der Trennung von Inhalt und Gestalt verfolgt, wie es auch später im Abschnitt "CHact – Mehrfache Link-Aktionen" noch einmal aufgegriffen werden soll. In diesem aktuellen Abschnitt hier erfolgt allerdings eine Beschränkung auf die Nutzung von HTML und CSS, die wie üblich in separaten Dateien gehalten werden sollen. Die Darstellung im Browser unterscheidet sich dabei nicht von der, die Abbildung 26 zeigt.

Die HTML-Datei für den Inhalt kann sich dabei so oder ähnlich darstellen:

Die CSS-Datei für die Gestaltung bzw. für die Darstellung könnte dann so (oder so ähnlich) aussehen:

Ein Aspekt fällt bei beiden oben aufgeführten Wegen der Beschreibung und Gestaltung eines Hypertextdokumentes unter den Tisch. Dies ist die Integration der für die Vernetzung der Inhalte notwendigen Links.

Ein Prinzip sei an dieser Stelle deutlich erwähnt: bei allen in diesem Buch gezeigten Source-Code-Beispielen gilt TIMTOWDI – there is more than one way to do it. Das Aussehen von Source-Code hängt von vielen Faktoren ab. Einer ist der Programmierer und dessen Vorlieben und Arbeitsweisen selbst. Sicherlich kann der (erfahrene) Programmierer alle Ziele auch mit weniger Zeilen oder auf anderen Wegen erreichen. Die gegebenen Beispiele sollen daher stets nur die zugrunde liegenden Prinzipien zeigen.

Unabhängig davon, ob Gestaltungsangaben unmittelbar durch die Integration von CSS-Angaben in die HTML-Datei oder mittelbar durch die Trennung in separate Dateien in den textuellen Inhalt eingebracht werden, so müssen die Angaben zu den Links doch stets in den Inhalt selbst eingebracht werden, was dem aktuellen Standard folgend so aussieht:

Der gesamte Eintrag zwischen <a ...> und </a> ist laut der Definition im Abschnitt "Hyper ..." der Anker für den Beginn der Kante des Links. Der Zielanker wird danach durch die darin enthaltene Angabe href = “ip-sum.html“ beschrieben. Die Position des Startankers ist somit stets fester Bestandteil des Inhaltes des Hypertextdokuments und wird durch eine Umgestaltung von dessen Präsentation nicht berührt. Da sich der Inhalt, egal wie lange er auf der Präsentationsfläche dargestellt wird, zu keinem Zeitpunkt ändert, ändert sich auch die Position des Ankers relativ zum umgebenden Text nicht. Verändert sich die Position des Textes zum Beispiel durch das Scrollen des Benutzers, so wandert der Anker mit dem Text mit. Die Darstellung dieses Ankers obliegt dem vom Benutzer verwendeten Browser. Dieser kann dazu auf Standardeinstellungen zurückgreifen, zum Beispiel die Verwendung einer blauen Schriftfarbe und die Unterstreichung des Textes. Soweit der Autor es nicht explizit durch einen Eingriff in die Gestaltungsdefinition vorsieht, wird jeder Link also hervorgehoben und ist für den Benutzer ohne Schwierigkeiten erkennbar. Auch diese Hervorhebung kann innerhalb der HTML-Datei, also verschmolzen mit dem textuellen Inhalt, oder in der separaten CSS-Datei beeinflusst werden:

Die aktuellen Standards unterstützen dabei auch ein gewisses dynamisches Verhalten bei der Darstellung des Startankers des Links durch den Browser. So können schon genutzte Links anders dargestellt werden als solche, denen der Benutzer noch nicht folgte oder sie können besonders hervorgehoben werden, wenn zum Beispiel der Mauszeiger über dem Anker positioniert wird.