HTML und XHTML

Hyperlinks

absolute Links

Wir haben nun (hoffentlich) schon ein wenig Übung mit Hyperlinks und relativen Pfaden. Und damit haben wir das Schwierigste auch schon hinter uns. Was nun kommt, sind einige Erweiterungen davon.

Wir werden zunächst mal zu Stellen linken, die sich ausserhalb unserer Site befinden. Sowas nennt man oft absolute Links.

Das beginnt zunächst mal ganz einfach, denn die wichtigsten Dinge bleiben gleich: Wir verwenden auch hier das Anker-Element (<a>) und auch das href-Attribut ist vorhanden. Es ist lediglich sein Inhalt oder Wert, der sich ändert: während er bisher eine relative Adresse enthielt, ist es nun eine absolute.

Was ist der Unterschied?
Relative Adressen beschreiben den Weg, der von der Seite aus zu nehmen ist, die den Link enthält.
Das bringt es mit sich, dass die relative Adresse für ein und dieselbe Seite unterschiedlich ausfallen kann, je nachdem, auf welcher Seite sie sich befindet. Du musstest die selbe Seite in der vorangehenden Übung z.B. mit oder ohne ../ angeben, je nach Lage innerhalb der Site.
Nicht so bei der absoluten Adresse: Sie sieht immer gleich aus, egal, wo sie gerade steht.

Sehen wir uns eine solche absolute Adresse etwas näher an:

Abbildung 8: eine absolute Adresse unter der Lupe

Eine solche Adresse wird übrigens URL (Uniform Resource Locator) genannt. Du hast sowas sicher schon oft gesehen; aber wir wollen es hier kurz etwas detaillierter betrachten.

Der Anfang, http://, ist technischer Natur und beschreibt das Protokoll, das verwendet werden soll, um die Seite abzuholen. HTTP ist das Hypertext Transfer Protocol. Du brauchst das nicht auswendig zu lernen; so lange wir mit einem Browser arbeiten, ist es in mehr als 90% aller Fälle das Protokoll unserer Wahl. Die meisten Browser wissen das und ergänzen diesen Teil der URL im Adressfeld selbständig. Die Angabe ist eigentlich nur nötig, weil's eben auch ein paar Fälle gibt, in denen ein anderes Protokoll zum Zuge kommt, FTP zum Beispiel. Und wenn du eine Web-Seite, die sich auf deiner Harddisk befindet, im Browser öffnest (was gerade im Laufe dieses Kurses oft der Fall sein kann), dann wirst du vermutlich nochmals ein anderes Protokoll erblicken.
Der nächste Teil der Adresse nennt den Computer, auf dem sich die Seite befindet. Dies ist sehr undifferenziert formuliert; der korrekte Ausdruck ist, dass hier der Server und die Domain genannt werden. Die Unterschiede zwischen den beiden sind subtil und technisch, und sollen uns hier nicht weiter kümmern. Erwähnenswert ist hingegen, dass der Domain-Name von rechts her nochmals aufgeschlüsselt werden kann. So ist z.B. der letzte Teil (.com in unserem Beispiel) eine sogenannte Top-Level-Domain. Die Top-Level-Domains sind international normiert; du kannst keine eigenen erfinden. Anders beim links davon stehenden Teil (vegweb im Beispiel). Das ist eine Second-Level-Domain und die kannst du erfinden und musst sie dann registrieren lassen, damit sie für dich und deine Site reserviert bleibt.
Der dritte Teil, das, was nach dem ersten Schrägstrich kommt, erscheint dir hoffentlich bekannt. Es ist nämlich der relative Pfad der Seite. Als Ausgangspunkt wird dabei das Root-Verzeichnis verwendet, also das Verzeichnis auf deinem Server, das zum Zuge kommt, wenn man nur gerade den Domain-Namen angibt.

Übung 14

Installiere nun gleich mal einen solchen Link zu amazon.de auf unserer Homepage. Du findest den Hinweis auf Amazon.com am Ende des ersten Abschnitts - mach einen Link daraus.

Das müsste nun ungefähr so aussehen:

Über unsere Partnerschaft mit <a href="http://amazon.de">Amazon.com</a>
 können Sie Rezeptbücher direkt übers Internet bestellen.

Übung 15

Und weil's so schön war, machst du das auf der Seite index.html im Verzeichnis buecher gleich auch noch.

Wichtig zu wissen ist, dass der letzte Teil der URL, die relative Adresse, eben wieder empfindlich auf Gross/Kleinschreibung reagiert. Du musst diesen Pfad so schreiben, wie er auf dem Server benannt wurde. Weichst du von der exakten Schreibweise ab, so gibt's den berüchtigten Fehler 404, der aussagt, dass eine Seite nicht gefunden wurde. Ausnahmen gibt's nur, wenn der Server unter einem Betriebssystem läuft, das zwischen Gross- und Kleinschreibung nicht unterscheidet, wie z.B. Windows NT. Aber erstens weiss man das nicht, zweitens ist das eher selten und drittens kanns jederzeit ändern. Also achte auf die Schreibweise.

Übung 16

Etwas Praxis im Erstellen von absoluten Links.

Die Datei index.html im Verzeichnis rezepte deiner Übungsdateien enthält schon einige HTML-Tags. Aber die Links in der Rezeptsammlung, die sich ungefähr in der Mitte der Seite befinden, wirst du selber zum Funktionieren bringen müssen. Die URLs findest du immer gleich unter dem Text, so dass du sie ausschneiden und einfügen kannst.

Das sieht dann ungefähr so aus:

<h3>Afrika</h3>
<p><a href="https://migusto.migros.ch/de/rezept-uebersicht/afrika">Afrika-Rezepte ...</a></p>
<p><a href="https://www.chefkoch.de/rs/s0g101/Afrikanische-Rezepte.html">Afrika-Rezepte ...</a></p>
<p><a href="https://www.pinterest.de/pin/564005553320892507/">Südafrikanische ...</a></p>
<p><a href="https://www.gutekueche.ch/afrika-rezepte">Afrikanische ...</a></p>

<h3>Indien</h3>
<p><a href="https://migusto.migros.ch/de/rezept-uebersicht/indien">Indische Rezepte ...</a></p>
<p><a href="https://www.kitchenstories.com/de/stories/10-einfache-indische-rezepte-fur-zu-hause">Indische ...</a></p>
<p><a href="https://karai.de/blog-rezepte/alle-rezepte">Indische ...</a></p>
<p><a href="https://www.gutekueche.ch/indien-rezepte">Indische ...</a></p>

<h3>Thailand</h3>
<p><a href="https://www.thaikitchen.ch/de-ch/rezepte">Thailand-Rezepte ...</a></p>
<p><a href="https://www.gutekueche.ch/thailand-rezepte">Thailand-Rezepte ...</a></p>
<p><a href="https://migusto.migros.ch/de/rezept-uebersicht/thailand">Thailand-Rezepte ...</a></p>

Homepapa
März 2004

Vorheriger Abschnitt:
weitere Links

Nächster Abschnitt:
interne Links