Hypertexte selber schreiben

Jeder, der Zugang zu einem WWW Browser (wie z.B. Mosaic) hat, kann selbst Hypertextdokumente für den eigenen Bedarf schreiben.

Hypertexte werden als HTML-Dokumente geschrieben. Ein HTML-Dokument ist eine normale Textdatei, in die spezielle Kommandos (z.B. für Überschriften oder Hypertextlinks) eingefügt sind. Mosaic (und andere WWW-Browser) werten die Kommandos aus und stellen den Text dann entsprechend dar.

TIP:: Mit dem Befehl View | Document Source... (unter Netscape) können Sie jederzeit das einer angezeigten Seite zugrundeliegende HTML-Dokument ansehen. So kann man feststellen wie ein bestimmter Effekt erreicht wird.

Im folgenden werden Sie schrittweise in das Schreiben von HTML-Dokumenten eingeführt.

Übersicht:

Das erste HTML-Dokument
Weitere Möglichkeiten der Textformatierung
Hypertext-Links und eingebundene Bilder

1. Das erste HTML-Dokument

Öffnen Sie dazu ein neues Fenster des WWW-Browsers und einen Texteditor (unter X Windows z.B. xedit).
Kopieren Sie die nachfolgende Vorlage mit der Maus in den Texteditor

  <HTML>
  <TITLE>
  HTML-Dokument, Nr. 1
  </TITLE>

  <H1>Mein erstes HTML-Dokument</H1>

  Hier kommt normaler Text.<p>
  Dieser Text steht in einem neuen Absatz.

Speichern Sie den Text unter dem Namen test1.html ab.

Wir wollen nun das HTML-Dokument mit Mosaic darstellen. Wählen Sie dazu aus dem File-Menü den Punkt Open Local.... In der erscheinenden Dialog-Box wählen Sie die Datei test1.html aus.

Sie sehen, daß der Text, der in Mosaic hinter Document Title steht, im HTML-Dokument von <TITLE> und </TITLE> eingerahmt ist.

Die große Überschrift ist von <H1> und </H1> umgeben.

HTML-Kommands sind immer von < > begrenzt und erscheinen fast immer paarweise. Das schließende Kommando beginnt dabei mit </. Es spielt übrigens keine Rolle, ob Groß- oder Kleinschreibung verwendet wird.

Weitere Möglichkeiten der Textformatierung

Wie Sie an dieser Einführung sehen können, gibt es mit HTML eine Fülle von Gestaltungsmöglichkeiten.

Als nächstes wollen wir ein HTML-Dokument erzeugen, daß nachher so aussieht:

Hier steht das Beispiel

Und so werden die einzelnen Effekte erzeugt:

die horizontale Linie mit <hr>
die kleinere Überschrift mit <h2> und </h2>
die Umlaute werden entweder
- auf einer entsprechenden Tastatur direkt eingegeben
- oder folgendermaßen erzeugt: ü mit ü, der erste Buchstabe nach dem & ist der zu erzeugende Umlaut. (Ö erzeugt also ein Ö). Das ß wird durch ß dargestellt. Hier eine Liste der erzeugbaren Sonderzeichen.
Text kann fett gedruckt werden mit <strong> und </strong>
und kursiv mit <em> und </em> (für emphasize)
Die Listen:
- Der gesamte, einzurückende Bereich wird von <ul> und </ul> umgeben (für unnumbered list)
- jeder Listenpunkt wird mit <li> begonnen (für list item). Dieses Kommando ist NICHT paarig.
- Wird innerhalb einer Liste eine weitere begonnen, so wird das Listensymbol automatisch gewechselt.
- Soll die Liste nummeriert sein, so wird statt ul ol verwendet.
- Hinweis: Für glossarartige Listen steht eine besondere Kombination zur Verfügung: <dl> </dl> umrahmt die definition list. Der definition term wird mit <dt>, die definition description mit <dd> eingeleitet. Verwendet wird dieser Effekt z.B. im Glossar.

Hypertext-Links und eingebundene Bilder

Zu einem Hypertext wird ein Text erst, wenn man er Querverweise auf andere Texte oder besser Objekte enthält. Solche Objekte können z.B. sein:

ein weiterer Hypertext
ein Directory
eine Bild-, Film- oder Sounddatei
eine Newsgroup
eine telnet-Sitzung
eine ftp-Verbindung
das Ergebnis einer Suche

Um eine solche Vielfalt verschiedener Objekte bezeichnen zu können, wurde das Konzept der Uniform Resource Locators (URL) eingeführt. Ein Hypertext-Link enthält als wichtigsten Bestandteil eine solche URL.

Eine URL besteht aus zwei durch einen Doppelpunkt getrennten Teilen. Der erste Teil gibt den Typ an, der zweite ist typenabhängig.

Hier einige Beispiele für URLs:

http://www.informatik.hu-berlin.de/topics/www/selfmade2.html
Die URL dieses Textes.

news:alt.hypertext
Die URL der Newsgroup alt.hypertext des lokalen News-Servers

gopher://gopher.zrz.tu-berlin.de/1
Die URL des Gophers des zentralen Rechenzentrums der TU Berlin

Im Allgemeinen wird ein Maschinenname durch zwei einleitende //, ein Pfad durch ein ein einleitendes / gekennzeichnet. Wird der Maschinenname weggelassen, so wird der aktuelle Server angenommen. Genauso muß beim Verweis auf einen Text im gleichen Verzeichnis nicht der komplette Pfad angegeben werden. So führen alle folgenden Links zum Beispiel aus Kapitel 2:

http://www.informatik.hu-berlin.de/topics/www/test2.html http:/topics/www/test2.html http:test2.html

Ein Link sieht damit folgendermaßen aus:

<a href="Eine URL">Der Text des Links</a>.

Ein Beispiel:
<a href="http:/topics/www/test2.html">Das Beispiel</a> Man kann auch an eine bestimmte Stelle in einem Dokument verweisen (davon wird z.B. beim Überblick am Anfang dieser Einführung Gebrauch gemacht). Dazu wird die Stelle mit einer Marke versehen:
<a name=Sprungmarke>
Im selben Text kann auf diese Stelle mit
<a href=#Sprungmarke>Zur Sprungmarke</a> verwiesen werden.

Und so werden Bilder eingebunden:
<img align=top src="URL des Bildes">

Hinweis: align kann ganz weggelassen werden. Statt top sind auch middle und bottom gültige Werte. Bei top schließt die Oberkante des Bildes bündig mit dem oberen Rand des Rests der Zeile, in der das Bild steht, ab; bei bottom schließt die Unterkante des Bildes bündig mit dem unteren Rand des Rests der Zeile ab. middle zentriert das Bild vertikal in der Zeile.

Erstellt am 02-06-94, zuletzt geändert am 18-07-97