Übersicht: Hyperlinks

Trennendes . . .

. . . und Verbindendes: Hyperlinks

Springen . . .


Trennendes . . .

Gut macht sich auch eine sogenannte Trennlinie wie diese hier:


Manchmal darfs auch etwas kürzer sein:
oh, die ist aber dick geworden, und eigentlich sollte sie ja rechts anfangen:
ach nein, was sage ich denn, links soll sie hin:
Der Quelltext dieser "Trennlinien-Sammlung":

<hr>
Manchmal darfs auch etwas kürzer sein:
<hr width=40% size=8 noshade>
oh, die ist aber dick geworden, und eigentlich sollte sie ja rechts anfangen:
<hr width=40% align="right">
ach nein, was sage ich denn, links soll sie hin:
<hr width=40% align="left">

Zu den Eigenschaften eine kleine Liste:

<<<

. . . und Verbindendes: Hyperlinks

Mit den Verweisen, zu neudeutsch Hyperlinks (oder noch kürzer: Links) kommen wir endlich, endlich zu des Pudels Kern, sprich: Was ist eigentlich ein Hypertext? Nun, da schon im Namen von HTML das Hypertext steckt, muss es wohl zur "Seele" von HTML gehören. Wir leben in einer vernetzen Welt (?!?), da will man natürlich auch seine Texte, Daten, Bilder u. s. w. vernetzen, also verlinken. Beispiel:

 
Schule am Ried

Im Original:

<a href="http://www.Schule-am-Ried.de/">Schule am Ried</a>

Du siehst: es gibt (mal wieder) ein neues Tag: Das Anker-Tag ("Anchor-Tag"), fängt mit einem a an, danach kommt ein href (href ist eine Abkürzung für Hypertext Reference, also ein Link in der Web-Seite zum Anklicken), hinter dem href steht eine (gültige!) Internet-Adresse in Anführungszeichen. Das Anker-Tag klammert auch etwas ein, nämlich (Aufgabe!):

_______________________________________________________ (Antwort)

Das Anker-Tag wird in drei Varianten benutzt:

  1. Springen in die weite Welt: wir haben eine Internet-Adresse, genauer: eine sogenannte URL (=Uniform Resource Locator), und wir wollen genau zu dieser Adresse verlinken/springen, Beispiel: Schule am Ried

  2. Springen im Verzeichnis: Wir haben mehrere HTML-Seiten, und wir wollen zwischen diesen Seiten hin und her springen. Beispiel: Klick mal hier!

  3. Springen innerhalb einer HTML-Seite: ja, du liest richtig, man kann auch innerhalb einer HTML-Datei hin und her springen! Beispiel: Zurück zur Übersicht

Beachte: In allen drei Fällen siehst du die Adresse, also unser Sprungziel unten in der Statuszeile des Browsers.

<<<

Springen in die weite Welt

Das ist der einfachste Fall, du musst nur ein paar Internet-Adressen kennen und schon kannst du verlinken! Beispiele:
SelfHTML (HTML-Einführung von S. Münz, sehr zu empfehlen!) oder Graphik(en) in HTML (guter Kurs!)
Im Original:

<a href="http://de.selfhtml.org/">SelfHTML</a> (HTML-Einführung von S. Münz,
sehr zu empfehlen!) oder
<a href="http://ourworld.compuserve.com/homepages/Birgit_Bachmann/1htmkurs.htm">Graphik(en)
in HTML</a> (guter Kurs!)

Manchmal will man die Internet-Seite in einem neuen Fenster öffnen, das geht so:

<a href="http://www.Schule-am-Ried.de/" target="_blank">Schule am Ried</a>

target steht für "Ziel" (& wird uns noch beim Thema Frames beschäftigen), dahinter gibt man das Ziel an: "_blank", und blank steht für ein neues Fenster, das war's.

<<<

Springen im Verzeichnis

Wenn du mehrere HTML-Seiten in deinem Verzeichnis auf deinem Ein Computer! hast, kannst du natürlich auch deine HTML-Seiten verlinken, das Beispiel oben im Original:

<a href="3w4_antwort.htm">Klick mal hier!</a>

Statt einer richtigen Internet-Adresse haben wir jetzt einfach eine HTML-Seite (3w4_antwort.htm ) in unserem Verzeichnis als Sprungziel angegeben. Wir gehen erst mal davon aus, dass unsere Seiten alle im gleichen Verzeichnis stehen (, sonst muss (!) man die Verzeichnisstruktur (?) kennen, sprich: welche Unterverzeichnisse gibt es, sind sie GROSS oder klein geschrieben, u. s. w.). Aber wer experimentieren will, kann ja mal folgendes Sprungziel untersuchen: Python-Kurs
Im Original:

<a href="../pykurs/pykurs.htm">Python-Kurs</a>

PS: Dieses Beispiel funktioniert nur, falls diese Seite nicht gespiegelt wurde! Warum? Ganz einfach: Das Beispiel setzt voraus, das es eine "Etage" höher ein Verzeichnis mit Namen pykurs gibt, welches gerade die Einführung in Python enthält . . .

<<<

Springen innerhalb einer HTML-Seite

. . . ist komischerweise am schwierigsten! Dazu brauchst du erstens einen Sprungbefehl und zweitens eine Sprungmarke. Hier ist ein Sprungbefehl:

Zurück zur Übersicht

und sein Ziel ist die Übersicht am Anfang dieser HTML-Seite. Im Quelltext sieht das so aus: Du vereinbarst irgendwo in deinem Text deinen Sprungbefehl:

<a href="#Anfang">Zurück zur Übersicht</a>

Und dann musst du noch die Stelle in deiner Seite markieren, wohin die Reise gehen soll, das heisst, du musst in deiner Seite eine Sprungmarke einfügen:

<a name="Anfang">Übersicht: Hyperlinks</a>

Das name im Anker-Tag gibt eine Sprungmarke an, und wer den Quelltext dieser Seiten untersucht, wird feststellen, dass sie nur so wimmeln von Srungmarken. Vom Markieren kommt der zweite Teil in HTML: Hypertext-Markup-Language. Das <a>-Tag kann also zweifach benutzt werden: einmal für den Sprungbefehl mit href, dann aber auch für die Sprungmarken mittels name, oder anders gesagt: Sprungbefehl href und Sprungmarke name sind einfach nur Parameter oder Eigenschaften, die an das <a>-Tag übergeben werden.

Beachte: Während in der Sprungmarke hinter name einfach nur der Name der Marke steht, hier also: "Anfang", musst du im Sprungbefehl beim Ziel hinter href ein # vor die Marke schreiben, also "#Anfang". Dies gilt nur beim Verlinken innerhalb einer HTML-Seite! Und noch ein

ACHTUNG: Die Sprungmarke ist case-sensitiv, soll heißen: hier wird zwischen GROSS- und kleinschreibung unterschieden!!! Dann sind also Anfang, ANFANG, anfang, AnfanG vier unterschiedliche Sprungmarken! Man sollte das im Hinterkopf behalten . . .

<<<
<<<
    W. Spiegel, E-Mail: walter [dot] spiegel [at] web [dot] de