Verweise und Protokolle in HTML

von Thomas Salvador.

  1. Tags, Attribute, Plattformunabhängigkeit
  2. Grundstruktur von HTML-Dateien
  3. Text in HTML
  4. Grundlegende Gestaltungselemente in HTML
  5. Blockorientierte Elemente in HTML
  6. Listen und Glossare in HTML
  7. Verweise und Protokolle in HTML
  8. Grafik in HTML
  9. Farben in HTML
springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]

Verweise, sog. HyperLinks oder Links, sind ein wesentlicher Bestandteil von HyperText-Dokumenten und somit auch von HTML-Dokumenten. In diesem Kapitel betrachten wir sie daher sehr ausführlich.

Zunächst wird geklärt, was genau unter einem Link verstanden wird und wie Netzadressen (URLs) aufgebaut sind.

Dann schauen wir uns an, wie man einzelne Stellen in Dateien als mögliche Ziele für Verweise erklärt.

Danach kommen wir zu den möglichen Arten von Verweisen in und zwischen HTML-Dateien und zu anderen Diensten. Dies ist sehr ausführlich geschehen, damit Sie sich einen Überblick verschaffen können.

Die Ausführungen werden mit der Betrachtung von anonymen Verweisen abgeschlossen.

Was sind Links? Was ist ein URL?

Links sind erstmal nicht mehr als normale Verweise, wie Sie sie auch aus Büchern (z.B. siehe Seite X) kennen. Sie sind nur erheblich leistungsfähiger.

Die Referenz auf eine Seite lässt sich in einigen Schritten verallgemeinern:

siehe Seite X (z.B. im Fließtext)
Sie suchen die Seite X im Dokument, schlagen diese auf und lokalisieren die genaue, gemeinte Stelle
siehe Buch "Das A vor dem U" von A.U.Tor (z.B. in Literaturhinweisen)
Sie beschaffen sich das Buch (aus dem Buchladen, aus der Bibliothek) und lesen es.
siehe Buch "Das A vor dem U" von A.U.Tor; Seite Y
Sie beschaffen sich das Buch (aus dem Buchladen, aus der Bibliothek), schlagen die Seite Y auf und lesen sie.
siehe Buch "Das U nach dem A" (Bibliothek Z)
Sie beschaffen sich das Buch aus der Bibliothek ...
siehe Dokumentarfilm "Das Z"
Sie beschaffen sich den Film ...

Diese Verweise sind von unterschiedlicher Präzision, lassen sich jedoch auf eine allgemeine Form bringen:

Beschaffungsstelle - Ort - Name und Art - Stelle im Objekt

dabei ist die Beschaffungsstelle etwa der Name eines Händlers oder Bibliothek, über die das Dokument beschafft werden kann.

Der Ort ist die genaue Position, etwa Regal X Fach Y.

Name und Art identifizieren das Dokument eindeutig: etwa Titel, Bestellnummer oder Signatur und den Typ, etwa Buch oder Video.

Die Stelle ist schließlich die Position im Buch oder Video.

Soweit ist das nichts Umgewöhnliches, auch wenn das Beispiel zugegebenermaßen etwas seltsam ist.

URL

Im WWW funktioniert das genauso, der Verweis ist die (genaue) Adresse des Dokumentes:

Beschaffungsstelle - Ort - Name und Art - Stelle im Objekt

In der entsprechenden Terminologie ausgedrückt

InternetDienst - Rechnername und VerzName - Name und Art - StelleImObj

Dies müssen wir nur noch syntaktisch anpassen

Internetdienst://Rechnername/Verzeichnisname/Name.Art#Stelle im Objekt

So etwas nennt man den Uniform Resource Locator (URL) des Dokumentes. Mit ihm lässt sich jedes Dokument, jedes Bild, jeder Text, jedes Irgendetwas im Netz Verfügbare eindeutig identifizieren. Im Falle von Texten bis auf das einzelne Zeichen genau. Und das Ganze weltweit. Und nur einen Mausklick entfernt.

Nicht unbeeindruckend, nicht wahr? Nicht umsonst heißt es, dass Internet würde die Welt zum Dorf machen. Genauer macht es sie sogar zur Streichholzschachtel. Raum (und Zeit) sind (hier) nicht mehr relevant.

Die Beschaffung des Dokumentes erledigt der Internetdienst für Sie, das Heraussuchen und Anzeigen der Stelle bzw. allgemeiner die Verarbeitung Ihr Browser.

Wichtig: Bei Verzeichnissen wird immer der Schrägstrich "/" benutzt, auch wenn sich die HTML-Dateien z.B. auf DOS- und Windows-Rechnern befinden, wo normalerweise der Backslash "\" verwendet wird.

Namen in HTML-Dokumenten

In HTML werden mögliche Ziele durch den a name-Tag gekapselt (genauer: Tag a Attribut name).

Beispiel: "Name"

<a name="body">Bodyinformation</a>

Vereinfachend kann man auch

<a name="body"></a>Bodyinformation
<a name="body">Bodyinformation

schreiben, d.h. der Endtag ist hier optional.

Der Autor zieht die (aller-)erste Form vor, gibt also praktisch einem Wort oder auch einer Überschrift einen Namen. Beachten Sie bitte, dass der eingeschlossene Text in keiner Form hervorgehoben wird. Diese Vorgehensweise ist also sicher.

Dies ist auch im Hinblick auf XML dringend zu empfehlen. Gewöhnen Sie es sich gleich richtig an, dann brauchen Sie sich nicht umgewöhnen. Auch ist es im Source sehr übersichtlich.

Der eigentliche Name (hier: body) sollte in Anführungsstriche eingeschlossen werden.

Alternativ zu name können Sie auch id nutzen. Dieses so genannte Universalattribut, hat zudem den Vorteil, dass id universell und in allen Tags verwendet werden kann.

<h2><a name="kapitel-7">Kapitel 7</a></h2>

vereinfacht sich so zu

<h2 id="kapitel-7">Kapitel 7</h2>

Verweise auf HTML-Dokumente

Die Verweise werden durch den a href-Tag gekapselt (genauer: Tag a Attribut href). Die allgemeine Form ist

<a href="URL">Verweistext</a>

Dabei ist "Verweistext" der Text, der als Link hervorgehoben wird, meist unterstrichen und in einer anderen Farbe.

Der Text ist beliebig, sollte freilich sinnvoll sein. Im Kapitel Grafik werden wir sehen, dass anstelle von Text auch Grafik verwendet werden kann.

Allgemeiner kann jedes beliebige HTML-Element benutzt werden, auch wenn z.B.Listen o.ä. etwas seltsam aussehen dürften.

Wir unterscheiden nun mehrere Verweistypen, abhängig davon, auf was verwiesen wird:

Verweis auf eine Stelle in der gleichen HTML-Datei

Hier besteht der URL nur aus dem Gatter "#" gefolgt von dem Namen der Stelle.

<a href="#kapitel-7">zu Kapitel 7</a>

Verweis auf eine andere HTML-Datei

Der hierfür zuständige Dienst ist das HyperText Transfer Protocol (http). Das HTTP ist in der Version 1.0 definiert in RFC 1945.

Wenn überhaupt noch 1er, dann wird heute das modernere HTTP/1.1 genutzt, welches in RFC 2616 beschrieben ist.

Allerdings wird die sichere Variante HTTPS/1.1 bevorzugt, die in RFC 2660 spezifiziert wurde. Man erkennt es am s.

Neuere Standards, wie HTTP/2 (RFC 7540) und HTTP/3 (RFC 9114) sind grundsätzlich auf sichere Verbindung ausgelegt, und deutlich schneller. Sie nutzen das gleiche Protokoll https://, so dass Server und Browser die beste verfügbare Variante selbst wählen.

<a href="https://brauchbar.de/artikel/html/html-fuer-einsteiger.html">HTML f&uuml;r Einsteiger</a>

Dabei ist

  • https:// das Protokoll - HTTPS/1.1 oder HTTP/2 oder HTTP/3
  • brauchbar.de der (Domain-)Name des Rechners. Historisch wird oft auch ein Präfix (Sub-Domain) www verwendet, also www.brauchbar.de. Der Autor bevorzugt die Variante ohne.
  • /artikel/html/ ist der Verzeichnis- und
  • html-fuer-einsteiger.html ist der Dateiname.

Befindet sich das Dokument auf dem gleichen Rechner wie die verweisende Datei, so wird der Protokollname und der Rechnername nicht benötigt.

<a href="/artikel/html/html-fuer-einsteiger.html">HTML f&uuml;r Einsteiger</a>

Befindet sich das Dokument auch noch im gleichen Verzeichnis, so kann auch dieser Name fortgelassen werden.

<a href="html-fuer-einsteiger.html">HTML f&uuml;r Einsteiger</a>

Alle Referenzen beziehen sich immer auf das Verzeichnis, in dem sich die verweisende Datei befindet, d.h. wird wie eben verwiesen, so funktioniert der Verweis auch dann, wenn die Dateien in ein anderes Verzeichnis verschoben werden.

Daher empfiehlt es sich bei Dokumenten, die aus mehreren Dateien bestehen, auf die anderen Dateien wie zuletzt gezeigt zu verweisen. (Da dann a) das Verschieben des gesamten Dokuments einfacher wird und b) Benutzer die Möglichkeit haben, das Dokument lokal zu speichern und lokal zu benutzen.)

Relative Pfade können angegeben werden:

<a href="../index.html">Homepage</a>

Dabei heißt ".." wie üblich das Verzeichnis der nächst höheren Hierarchiestufe, also das Verzeichnis, welches das aktuelle als Unterverzeichnis enthält.

Dies wird vor allem dann günstig, wenn man für Dokumente eigene Unterverzeichnisse einrichtet, um etwa den Überblick zu behalten, oder Überschreibungen durch gleiche (Datei-)Namen zu vermeiden; halt genau aus denselben Gründen, aus denen jeder irgendwelche Verzeichnisse auf seinem Rechner eingerichtet hat. Die Verknüpfung ist dann immer noch sehr einfach.

Aus index.html z.B.:

...
<a href="artikel/html/html-fuer-einsteiger.html">HTML f&uuml;r Einsteiger</a>
...

Aus html-fuer-einsteiger.html folglich:

...
<a href="../../index.html">Homepage</a>
...

Dies hat insbesondere den Vorteil, dass auch die ganze Hierarchie, d.h. die Homepage und alle platzierten Dokumente ohne Mühe verschoben werden kann, dennoch die Verwaltung der Homepage oder das Anbinden/Entfernen von Dokumenten sehr einfach und übersichtlich ist.

Es eignet sich noch die Kombination:

Aus index.html z.B.:

...
<a href="artikel/html/html-fuer-einsteiger.html">HTML f&uuml;r Einsteiger</a>
...

Aus html-fuer-einsteiger.html folglich:

...
<a href="https://brauchbar.de">Homepage</a>
...

Dadurch ermöglichen Sie dem Benutzer, die Dokumente lokal zu speichern und zu benutzen, erhält aber die Gültigkeit der Verweise zu anderen Dokumenten aufrecht.

Damit ist alles Wichtige hierzu gesagt. Wie Sie im Endeffekt verfahren, welche Methoden Sie einsetzen, müssen Sie schon irgendwo selbst entscheiden.

Ziel der Ausführungen ist hier nur, einen Überblick zu verschaffen und Ihnen die Möglichkeiten zu nennen, aus denen Sie sich das von Ihnen Gewünschte, das für Ihre Projekte Geeignete heraussuchen können.

Sie müssen sich das natürlich nicht jetzt alles merken. Das schleift sich mit der Zeit ein.

Verweis auf eine Stelle in einer anderen HTML-Datei

Dies ist naheliegenderweise eine Kombination der bereits betrachteten Fälle:

<a href="../tipps/thema.html#musik">eigentlicher Inhalt</a>
<a href="https://www.irgendwo.erde/irgendeineDatei.html#stelle">beliebig</a>
A

Alles, was zu Verweisen auf andere HTML-Dateien gesagt wurde, gilt freilich auch hier.

Damit ist auch klar, dass das Gatter # notwendig ist, um die Stelle #stelle von der Datei stelle zu unterscheiden. stelle ist ein gültiger Dateiname, wie wir bei den anonymen Verweisen sehen werden.

Verweise auf andere Dienste

Neben den Verweisen auf HTML-Dokumente, wofür der Dienst // bzw. https:// zuständig ist, kann man auch zu allen anderen Diensten des Internet verweisen.

ftp

Die durch den Verweis angezeigte Datei wird auf den Rechner übertragen, auf dem der Browser läuft. Also genauso, als wenn man einen ftp-client benutzen würde.

<a href="ftp://ftp.irgendwo.erde/verzeichnis/datei.taz">Download</a>

Üblicherweise wird es als nett empfunden, wenn der HTML-Autor die (ungefähre) Größe der Datei angibt.

Das FTP (File Transfer Protocol) ist in RFC 959 spezifiziert.

gopher

Völlig analog kann man auf gopher-Seiten verweisen.

<a href="gopher://gopher.irgendwo.erde/verzeichnis/name">gopher</a>

Das gropher-Protokoll ist in RFC 1436 spezifiziert.

telnet

Ebenso kann man eine telnet-Verbindung zu einem Rechner aufbauen lassen:

<a href="telnet://rechner.irgendwo.erde">Verbindung aufbauen</a>

Das telnet-Protokoll ist in RFC 854 spezifiziert.

news

Man kann aus HTML-Dokumenten auch eine Verbindung zu News-Gruppen des Usenet aufbauen lassen:

<a href="news:news.answers">FAQs bis zum Abwinken</a>

Beachten Sie bitte, dass es hier tatsächlich nur news: und nicht news:// heißen muss. Es wird auch kein Rechner benannt. Die angegebene Form ist so schon vollständig. Lediglich wenn ein spezieller Newsserver verwendet werden soll oder muss, ist dieser anzugeben, wo es dann auch news:// heißt.

<a href="news://news.provider.xx/news.answers">Gruppe bei provider.xx</a>

Das news-Protokoll selbst ist in RFC 977 beschrieben.

mail

Und natürlich noch EMail. Der Nutzer kann an die genannte Adresse eine EMail schreiben.

<a href="mailto:thomas.salvador@gmx.net">Feedback</a>

Auch hier heißt es nur mailto: und nicht mailto://.

mailto selbst ist in RFC 2368 beschrieben.

Anonyme Verweise

Unter einem anonymen Verweis wollen wir einen Verweis verstehen, der in der Referenz nicht das Protokoll angibt. In diesem Sinn ist

<a href="index.html">Homepage des Autors</a>

ein anonymer Verweis.

Über solche Verweise kann jede beliebige Datei angesprochen werden. Der Browser erkennt den Dateityp (oder auch nicht) an der Extension (auch: Suffix, hier: html) oder an den empfangenen Daten, und verfährt so, wie er für diesen Typ eingestellt wurde.

  • HTML-Dateien, reine Textdateien, Grafikdateien, bzw. allgemeiner alles, was der Browser direkt unterstützt wird üblicherweise direkt im Browser angezeigt. (Brauchbare) Browser lassen sich allerdings konfigurieren.
  • Für nicht direkt unterstützte Typen wird entweder eine externe Applikation gestartet und dieser die Datei zur Verarbeitung übergeben, oder die Datei wird auf dem lokalen Rechner abgespeichert.
  • Gänzlich unbekannte Typen werden (normalerweise nach einer Rückfrage) abgespeichert.

Soweit dürfte Ihnen als Browser-Benutzer das klar sein.

Wenn Sie solche (nicht HTML-Dateien) anbieten möchten, so geschieht dies über einen solchen anonymen Verweis. Mehr brauchen Sie dafür nicht zu machen.

<a href="datei.ext">beliebiger Text</a>

Die Verarbeitung erfolgt dann so, wie beschrieben, bzw. so wie es der Benutzer für Dateien mit Extension ext vorgesehen hat.

Der enorme Vorteil anonymer Verweise ist, dass Sie Ihre Dateien (z.B. Programmarchive) nicht extra auf einem ftp-Server unterbringen müssen, sondern sie direkt zur Verfügung stellen können.

springe zu Kapitel: [ Titel | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | F ]