hide random home http://medweb.uni-muenster.de/project/hypertext.html (Einblicke ins Internet, 10/1995)
Projekt MedWeb

Umgang mit HTML-Hypertext

Inhalt

1.   Einleitung
2.   Über HTML
2.1. Grundlagen
2.2. Textformatierung
2.3. Listen
2.4. Verweise
2.5. Multimedia
2.6. Formulare
2.7. Sonstiges
3.   Empfehlungen für "sauberen" Hypertext
4.   Hilfsmittel
5.   Weiterführende Literatur

Hinweis:

Dieser Text ist leider nicht mehr ganz auf dem neuesten Stand. Insbesondere die neuen HTML-Tags, die mit HTML+ und Netscape eingeführt worden sind, waren noch nicht vorhanden, als dieser Text geschrieben wurde. Dennoch treffen die Informationen über die vorgestellten HTML-Tags weiterhin zu; meiner Meinung nach reicht ihre Kenntnis auch für den Anfang sicher aus. Sobald ich Zeit finde, wird dieser Text an die neuen Entwicklungen angepaßt.

[Muenster] [MedWeb] [Index] [Legende] [Feedback]
Maintainer: Thomas Ganslandt (ganslan@uni-muenster.de) 07.07.95

1. Einleitung

Um die besonderen Möglichkeiten des World Wide Web wie abgesetzte Überschriften, Verweise auf andere Texte und Multimedia auszunützen, müssen die Informationen in ein spezielles Format gebracht werden: Hypertext. Für das WWW heißt der verwendete Hypertext-Dialekt HTML - eine Abkürzung, die für HyperText Markup Language steht. HTML ist eine Teilgruppe der SGML (Standardized General Markup Language).
HTML bietet über einen Satz von Befehlen, die in den Text eingestreut werden, verschiedene Möglichkeiten, Text zu formatieren, hervorzuheben oder auch Verweise und multimediale Elemente einzubringen. Der Umgang mit HTML mag am Anfang durch die Menge an Akronymen und Befehlen, die nur aus wenigen Buchstaben bestehen, ungewohnt und mühselig erscheinen; dennoch gestaltet sich der Einstieg in HTML denkbar einfach, da man zunächst mit wenigen Elementen auskommt - je mehr Möglichkeiten man in seine Hypertext-Dokumente einbauen möchte, desto mehr Elemente wird man benutzen und lernen wollen. Somit wachsen die HTML-Kenntnisse mit den eigenen Bedürfnissen mit.
Dieser Text soll den Einstieg in HTML erleichtern, indem er die HTML-Befehle in der Reihenfolge ihrer Wichtigkeit für den alltäglichen Gebrauch darstellt (Kapitel 2). In Kapitel 3 sollen einige Richtlinien für die Erstellung von "sauberem" und lesbaren HTML-Hypertext dargestellt werden. In Kapitel 4 werden kurz einige Hilfsprogramme und Editoren für HTML vorgestellt. Kapitel 5 schließlich enthält Verweise auf andere Texte, die sich mit HTML und dem World Wide Web auseinandersetzen.

Die gängigen WWW-Anzeigeprogramme bieten alle die Möglichkeit, sich den "Quelltext" einer HTML-Seite anzeigen zu lassen (in Mosaic geht es mit der Taste "d", in Lynx mit "/"). Somit hat man jederzeit Beispiele zur Verfügung, die den korrekten Umgang mit den Befehlen verdeutlichen.

2. Über HTML
2.1. Grundlagen

Zeichensatz
Ein HTML-Hypertext ist zunächst einmal ein ganz normaler ASCII-Text, der keine besonderen Steuerzeichen enthät (ASCII steht dabei für American Standard Code For Information Interchange). Dies bedeutet, das HTML-Text für alle Rechner weltweit genormt ist. Dadurch, daß keine Sonderzeichen verwendet werden dürfen, ist sichergestellt, daß keine Probleme mit Umlauten entstehen - dies wird dadurch umgangen, daß alle Sonderzeichen (also auch die deutschen Umlaute) als Zeichen des genormten ISO-Latin-1- Zeichensatzes ausgedrückt werden. Das klingt zunächst sehr kompliziert, ist aber im Endeffekt sehr einfach:
Hier die Codes der gebräuchlichsten Sonderzeichen:
- Umlaute: Die Umlaute werden über den Grundbuchstaben gefolgt von "uml" codiert 
Ä = Ä

ä = ä

Ö = Ö

ö = ö

Ü = Ü

ü = ü



- Ligaturen: Eine Ligatur wird durch die ligierten Buchstaben 
gefolgt von "lig" codiert

ß = ß



- Akzente: Grundbuchstabe plus Abkürzung des Akzents

à = à

á = á

ñ = ñ



- Sonstige: Einige Befehlszeichen müssen wie folgt codiert werden

& = &

< = &lt;

> = &gt;


(amp steht für Ampersand, lt für less than
und gt für greater than)






HTML-Befehlssyntax

Alle HTML-Befehle haben folgenden Aufbau:

<befehl>

(Also kleiner-Zeichen gefolgt vom Befehlswort gefolgt vom 
größer-Zeichen).
HTML-Befehle beziehen sich fast immer auf Textbereiche - daher
bestehen sie meist aus einem Anfangs- und einem Abschluß-
Teil. Die Befehlsworte sind dabei gleich - der Abschlußbefehl
wird nur durch einen vorangehenden Schrägstrich (/)
gekennzeichnet. Einige Befehle beziehen sich nicht auf einen Textbereich,
sondern auf einen einzelnen Punkt des Textes - für sie existieren
also auch keine Abschlußbefehle.




Aufbau eines HTML-Textes

Ein HTML-Text besteht aus zwei Teilen: dem Kopfteil (head) und
dem Textkörper (body). Der Kopfteil enthät dabei
Informationen über die verwendete Hypertext-Sprache und den
Titel des Dokumentes - allesamt Informationen, die nicht direkt im
angezeigten Text erscheinen werden. Der für die Anzeige gedachte
Text wird in den Textkörper geschrieben - dort sollte also auch
der Titel des Textes ein weiteres mal (hier z.B. als Überschrift) 
stehen.


Befehle:


Das Grundgerüst für einen HTML-Text sieht also 
folgendermaßen aus:

    <html><head>
    <title>Titel des Textes</title>
    </head><body>
    Inhalt des Textes
    </body></html>







2.2 Textformatierung


HTML bietet verschiedene Befehlsgruppen, mit deren Hilfe das Aussehen
des Textes beeinflußt werden kann. Diese beziehen sich auf
Überschriften, 
Zeichensatz und 
Textfluß.
Wichtig zu wissen ist, daß der Zeilenumbruch des Textes 
ausschließlich durch das Anzeigeprogramm (z.B. Mosaic) 
durchgeführt wird - Leerzeichen und harte Zeilenumbrüche
werden dabei ignoriert (Eine Ausnahme stellt der besonders
gekennzeichnete preformatted Text dar). 




Überschriften

HTML stellt sechs verschieden große Zeichensätze für
Überschriften zur Verfügung. Die tatsächliche 
Größe auf dem Bildschirm hängt vom Anzeigeprogramm und
dem verwendeten Rechner ab. Eine Überschrift steht automatisch
in einer Zeile für sich und hat Leerzeilen zwischen den vorangehenden
und nachfolgenden Textzeilen. HTML-Befehle, die für die 
Überschrift oder Teile von ihr gelten sollen, müssen
innerhalb der Anfangs- und Endbefehle der Überschrift
stehen.


Befehle:


Beispiele:

    <h1>Große Überschrift</h1>
    <h2>Kleine Überschrift</h2>







Zeichensatz

Neben Überschriften gibt es noch verschiedene Zeichensätze, mit denen
Teile eines Textes hervorgehoben werden können. Neben den üblichen
Schriftarten Kursiv und Fett gibt es noch einen unproportionalen
Zeichensatz, der insbesondere für Tabellen und Programmbeispiele
geeignet ist. Für einige Schriften existieren mehrere Befehle, die sich z.Zt.
noch nicht unterscheiden, in Zukunft jedoch zur Unterscheidung verschiedener
Textarten (z.B. Variablen, Zitate, Programmcode) dienen sollen.


Befehle:






Textfluß

Wie bereits oben erwähnt wird die Formatierung des Textes komplett vom
Anzeigeprogramm übernommen - harte Zeilenumbrüche und Einrückungen
werden dabei ignoriert. Um dennoch Absätze, Einrückungen und Tabellen
darstellen zu können, gibt es einige Befehle für, mit denen der Textfluß
beeinflußt werden kann. Da sich die meisten dieser Befehle nicht auf einen Textbereich,
sondern nur auf eine Textstelle beziehen, sind sie nicht paarig, d.h. es gibt dann keinen
Abschlußbefehl.


Befehle:







2.3 Listen 


HTML bietet die Möglichkeit, Listen und Gliederungen automatisch
zu formatieren. Dabei wird zwischen nummerierten, unnummerierten und
deskriptiven Listen unterschieden. Eine Liste wird von einem Start- und
Endbefehl umfaßt, wobei jeder einzelne Listeneintrag mit einem speziellen
Befehl beginnt (aber keinen Endbefehl hat). Listen können verschachtelt werden.



Nummerierte Listen

Solche Listen werden automatisch durchnummeriert, wobei hinter der Zahl ein Punkt
erscheint.


Befehle:



Unnummerierte Listen

Bei diesen Listen wird vor jeden Eintrag ein Aufzählungszeichen gesetzt, 
das sich bei verschachtelten Listen ändert.


Befehle:



Deskriptive Listen

Bei diesen Listen wird zwischen Titeleinträgen und dazugehörigen 
Textblöcken unterschieden. Ein Titel steht dabei ohne Nummer oder 
Aufzählungszeichen direkt links; Textblöcke erscheinen eingerückt
in separaten Zeilen.


Befehle:



Beispiel für eine verschachtelte Liste: (Befehle bitte im Quelltext
nachschauen)

    

  1. Hypertext

      

    • HTML

      

      Textformatierung

      Zeichensatz

      Textfluß

      

    • SGML

    

  2. Multimedia

      

    1. Grafik

    2. Video

    3. Sound

    







2.4 Verweise 


Die eigentliche Stärke von Hypertext ist es, Verweise auf andere Textpassagen
oder sogar auf komplett andere Hypertext-Dokumente zu ermöglichen. Passagen
innerhalb eines Textes werden dabei durch Anker markiert. Separate
Dokumente werden über ihre URL (Uniform Resource Locator) angesprochen.
Die URLs ermöglichen es, eine Vielzahl von Informationsdiensten auf den Rechnern
des Internet zu erreichen. Sie sind folgendermaßen aufgebaut:

Dienst://Rechner/Dokument#Anker

Die wichtigsten Dienste sind:

Für Rechner wird die Internet-Adresse des Informationsanbieters
eingetragen. Dokument entspricht dem Pfad des Dokuments auf dem Informationsserver
(entsprechend einem Unix-Pfad mit Verzeichnissen und Unterverzeichnissen).

Die URL zu dieser Seite würde zum Beispiel so aussehen:

http://medsun06.uni-muenster.de/project/hypertext.html

Es wird also ein WWW-Dokument vom Rechner medsun06.uni-muenster.de
abgerufen, das den Namen hypertext.html trägt und im Verzeichnis
project steht.

Der letzte Teil (#Anker) kann auch weggelassen werden - mit ihm kann man direkt in eine
vorgegebene Passage eines HTML-Textes springen.




Relative Adressierung:

Innerhalb eines HTML-Textes kann man eine verkürzte Schreibweise für
URLs verwenden, wenn man sich auf Dokumente im gleichen Verzeichnis oder auf dem
gleichen Server bezieht. So reicht für Texte auf dem selben Server die Angabe
des Pfades aus (der Teil "Dienst://Rechnername" kann weggelassen werden).
Für Texte im gleichen Verzeichnis reicht die einfache Angabe des Dateinamens
aus. Man kann auch (wie von DOS oder Unix gewohnt) mit relativen Verzeichnissen
arbeiten: Für das darüberliegende Verzeichnis kann ".." 
angegeben werden, für darunterliegende Unterverzeichnisse einfach deren Name.
Wenn man innerhalb eines Textes eine bestimmte Textpassage anspringen möchte,
reicht die Angabe von "#Anker".



Legen von Ankern für Textpassagen

Ein Anker kann mit folgendem Befehl  werden:


Zu beachten ist, daß beim Legen des Ankers kein Doppelkreuz (#)
angegeben werden darf. Dies ist nur beim Aufruf des Ankers notwendig.



Legen eines Verweises auf andere Textpassagen oder Dokumente

Ein Verweis kann folgendermaßen gesetzt werden:


Die Bezeichnung steht dabei für im Text erscheinenden, blau markierten
Verweis.


Beispiel: Aufruf auf diesen Text

    <a href="http://web.archive.org/web/199510/http://medsun06.uni-muenster.de/project/hypertext.html">diesen Text</a>









2.5 Multimedia


HTML bietet die Möglichkeit, Daten verschiedener Medien (Text, Grafik, Video und
Sound) in ein Dokument zu integrieren. Grafiken nehmen dabei eine Sonderstellung ein,
da sie als inline-images direkt in den Text einfließen können. Alle
anderen Medien werden über normale Verweise angesprochen. Welche Formate 
unterstützt werden, hängt stark vom Anzeigeprogramm und der Ausstattung des
Rechners, auf dem es betrieben wird, ab. Folgende Formate werden im Allgemeinen
unterstützt:


Inline-Images

Bilder können direkt im Text untergebracht werden; Vorraussetzung dafür ist,
daß sie entweder im XBM- oder GIF-Format vorliegen - andere Formate werden
derzeit nicht unterstützt. Allerdings ist es kein Problem, mit Hilfsprogrammen
(z.B. xv) Grafiken in diese Formate umzuwandeln.


Befehl:



URL steht für die Quelle des Bildes - alle Adressierungsmöglichkeiten
(auch relativ) sind wie oben beschrieben erlaubt. 
Text steht für einen Alternativtext, der statt der Grafik angezeigt wird,
wenn der verwendete WWW-Browser keine Grafiken unterstützt (z.B. Lynx).
Die Ausrichtung legt fest, wie die Grafik zum Text steht. Mögliche Werte
sind middle, Top und Bottom.

Es ist zu beachten, daß Inline-Images verhältnismäßig viel
Netzbelastung verursachen. Sie sollten also nur in einem vernünftigen Rahmen
(z.B. nicht zu groß) verwendet werden. Manche WWW-Browser verarbeiten nur eine
begrenzte Anzahl von Bildern pro Dokument. Alle Bilder einer Seite teilen sich eine
gemeinsame Farbpalette - daher sollte man Bilder benutzen, die entweder ähnliche
Farben beinhalten oder nur eine kleine Palette belegen.


Beispiel:

    <img src="/view-einblicke_n/http://medweb.uni-muenster.de/icons/legende.gif" alt="oben" align="top"> oben
    <img src="/view-einblicke_n/http://medweb.uni-muenster.de/icons/legende.gif" alt="mitte" align="center"> mitte
    <img src="/view-einblicke_n/http://medweb.uni-muenster.de/icons/legende.gif" alt="unten" align="bottom"> unten


oben oben 
mitte mitte 
unten unten 



Bild-Verweise

Inline-Images können auch als Verweis dienen (z.B. auf andere Texte oder auch
eine größere Version des Bildes). Dazu ersetzt man einfach das Feld
Bezeichnung des Verweis-Aufrufes durch ein Inline-Image.


Beispiel

    <a href="/view-einblicke/http://medweb.uni-muenster.de/legende.html"><img src="/view-einblicke_n/http://medweb.uni-muenster.de/icons/legende.gif"></a>
    








2.6 Formulare


Formulare ermöglichen es, Rückmeldungen der Benutzer einzuholen,
interaktive Abfragen durchzuführen oder sogar Lernprogramme aufzubauen.
Formulare werden nicht von allen WWW-Browsern unterstützt - die beiden
wichtigsten (Mosaic und Lynx) bieten jedoch vollen Forms-Support.

Die Verarbeitung der Daten, die über ein solches Formular an den WWW-Server
geschickt werden, erfordert Kenntnisse in einer Unix-Scriptsprache (z.B. Perl).
Ein Text über die sogenannte "CGI"-Schnittstelle, die für diese 
Datenübertragung notwendig ist, wird noch erstellt werden. Solange bitte ich
Sie, sich im Formular-Info der NCSA (s.u.) über das Forms-Interface zu
informieren.







2.7 Sonstiges


Befehle:






3. Empfehlungen für "sauberen" Hypertext


Wie in jeder Programmiersprache ist es sinnvoll, den "Quelltext" so zu strukturieren,
daß er lesbar und übersichtlich bleibt. An dieser Stelle sollen einige
Tips und Richtlinien gegeben werden, die natürlich für sich allein noch
keine Garantie für lupenreinen Hypertext darstellen; dennoch sollten sie
gerade für den Anfang eine Richtschnur darstellen.



Textskelett

Wie bereits oben unter den HTML-Grundlagen beschrieben, gibt es einige Elemente,
die den Hypertext zwar strukturieren (Kopfteil, Textkörper), aber nicht
auf dem Bildschirm erscheinen. Oftmals werden diese Elemente dann einfach
weggelassen, was z.Zt. auch keine Probleme macht, da die gängigen
WWW-Browser über ihr Fehlen hinwegsehen. Dennoch sollte man diesen Fehler
nicht begehen - in Zukunft werden die WWW-Browser sich enger an die HTML-Spezifikation
halten und konsequenterweise an diesen Stellen Fehlermeldungen ausgeben.
Ein HTML-Hypertext sollte also unbedingt mit folgender Schablone als
"Textskelett" beginnen:

    <html><head>
    <title>Titel des Dokuments</title>
    </head><body>
    Inhalt des Dokuments
    </body></html>



Programmierstil

Der Stil, in dem man seine HTML-Texte schreibt, hängt letztendlich doch
vom individuellen Geschmack ab; dennoch möchte ich hier ein paar unverbindliche
Hinweise geben, die das Erstellen übersichtlichen Quellcodes erleichtern
können.

Es sind im Netz einige zum Teil recht skurrile Konzepte verbreitet worden, die
beispielsweise die Übersichtlichkeit eines HTML-Textes dadurch erhöhen
wollen, daß sie alle Befehle nach links und den dazugehörigen Text jeweils
um eine halbe Bildschirmseite tabuliert einsetzen. Meine Meinung ist, daß ein
so formatierter Hypertext eher verwirrt, da fortlaufende Textblöcke in jeder
Zeile unterbrochen werden. Daher schlage ich vor, den Text nach seinem Sinnzusammenhang
zu strukturieren:

Hyperlinks
Es gibt einige Regeln, die Hypertext "portabel" machen, d.h. er kann
leicht von einem Rechner auf den anderen übertragen werden, oder
auch auf dem selben Rechner seinen Platz wechseln, ohne daß alle
Hyperlinks geändert werden müssen:






4. Hilfsmittel


Es gibt eine Reihe von Programmen für verschiedene Rechner, die den
Umgang mit HTML erleichtern. Zum Teil handelt es sich um eigenständige
Programme, teilweise sind es auch Pakete mit Erweiterungen und Makros für
gänige Textprogramme. Bei Konvertern, die aus gängigen Textformaten
HTML erstellen, sollte der Text unbedingt noch einmal von Hand nachkorrigiert 
werden, da oftmals fehlerhafte Formatierungen erzeugt werden.








5. Weiterführende Literatur


Im Internet gibt es eine Reihe von Dokumenten, die sich ausführlicher, als es
hier möglich ist, mit HTML und WWW auseinandersetzen. Sie sind alle über
das WWW erreichbar: