Links
Mit Links werden Verknüpfungen zu anderen Dateien erstellt. Das Prinzip des Verlinkens ist das, was eigentlich das word wide web ausmacht. Niemand springt aber irgendwo hin, sonder nach einem Klick auf einen Link lade ich eine Datei von einem Server zur Darstellung in meinen Browser. Hier beschreibe ich: wie erstelle ich einen Link, was ist ein Pfad, was ist ein Anker und was ist ein Link-Target, wie übermittle ich Variablen an eine andere Seite und wie erstelle ich einen E-Mail-Link.
Das Netz knüpfen
<a href="..."></a>
-
Im
<a>Opentag nennt man die Zieladresse, die URL (Uniform Resource Locator = einheitlicher Quellen-Ortanzeiger). Die Adresse besteht aus der Pfadangabe also den Ordnernamen und dem Dateinamen. -
Das Attribut zur Adressangabe ist
href="...", das heisst hypertext reference. Die Adresse wird in 'einfache' oder "doppelte" Anführungszeichen gesetzt (wie alle Attribut-Werte). -
Zwischen dem <a>
Opentag und dem</a> Endtag steht der anklickbare Text, über dem der Mauszeiger zum Händchen wechselt und welcher als Linktext blau und unterstrichen hervorgehoben wird. Dies sind Default-Einstellungen, also ohne Einsatz von CSS. Die Farbe verändert sich zudem in Viollet, wenn ich den Link bereits benutzt habe (wenn in der Browserhistory die Adresse bekannt ist). - Die URL selbst wird, weil sie im Tag steckt, an dieser Stelle nicht angezeigt, es sei denn man wiederholt sie auch zwischen den beiden Tags. Zur Kontrolle taucht sie in der Statuszeile auf (im Rahmen des Browsers ganz unten links).
So wurde der untenstehende Übungslink geschrieben (Gross-/Kleinschreibung bei Dateinamen und Ordnernamen beachten):
<a href="links_test.html" title="Zur Test Seite">Teste diesen Link</a>
Teste diesen Link
Als kleines Schmankerl wurde noch das Attribut title="Titeltext" gesetzt, es erzeugt eine Blase mit einem beliebigen Text beim Kontakt mit der Maus. Die Farbe, Rand und ob Schattenwurf ist Systembedingt, das title-Attribut kann in fast jeden Tag.
Statt Text, kann auch ein kleines Bild als Link dienen und man kann dem a Tag auch zusätzliche Anweisungen beifügen (siehe weiter unten).
Pfade
Relativer Pfad
Relative Pfadnahmen kann man problemlos mit ihrem übergeordneten Ordner verschieben.
Ein Slash bedeutet Ordner. Wird in den Anführungszeichen kein Slash angegeben "datei.html", so nimt der Browser an,
die Ziel-Datei befinde sich im gleichen Ordner wie die aktuelle Seite von der man ausgeht.
Man kann auch eine Datei in einem weiteren Ordner angeben, der sich im gleichen Ordner befindet,
wie die aktuelle Seite; ein ordner_name wird mit einem Forwärts-Slash (nach dem Namen) abgetrennt:
ordner/datei.html.
Ein Ordner, welcher sich über dem Ordner mit der aktuellen Datei befindet, erreicht man relativ zum Ausgangsordner mit 2 Punkten (Sprung aus dem Ordner):
../ordner/datei.html (je Ordner zwei Punkte und ein Slash)
Und ./datei.html bedeutet wieder im selben Ordner (die Angabe ./ ist also überflüssig).
Absolute Pfadnamen
Absolute Pfadangaben erzeugen 'broken Links' wenn sie verschoben werden.
Beginnt ein Link mit einem Forwärts-Slash, steht dieser für den obersten
zugewiesenen Ordner eines Internetservices (der Root Ordner - das Wurzelverzeichnis).
Ab da muss der ganze Ordner-Pfad angegeben werden bis hinunter zur Datei:
/ordner/ordner/ordner/ordner/datei.html
Zwei slashes meinen die aktuelle Festplatte: //ordner/datei.html
Zugriff nach ausserhalb
Verlinke ich eine Seite auf einem anderen Server, muss das Protokoll (http://) und der Host (www.site_name.land) noch vor den URL gestellt werden:
http://www.site_name.land/url/ , oder http://localhost/lehrling/html/links.php
statt www für den lokalen Test-Server. Das www kann inzwischen weggelassen werden, da die Server entsprechende Aliasse bilden.
Endet die URL mit einem Forwärtsslash, wird die für diesen Ordner serverseitig voreingestellte Startseite,
meisst index.html, default.html oder auch index.php gesucht.
Falls keine solche Datei im Ordner existiert, wird ein Index (Inhaltsverzeichnis)
als Liste gezeigt (ein Verhalten, welches durch serverseitige Einstellung auch unterbunden werden kann).
Mehr über URL auf der Seite Server
Anker
Das a im <a> Tag kommt von Anker.
Wird nichts besonderes angegeben, wird die durch <a>verlinkte Datei am Anfang geöffnet. Das Setzen eines Ankers irgendwo innerhalb einer Seite, ermöglicht, diesen Anker als Ziel anzusprechen.
Anker auf der selben Seite
Gibe ich als href= nur den "#anker_namen" an, (ohne den "datei_namen.html" voranzustellen),
so nimmt der Brauser an, der Anker befinde sich in der Selben Datei wie der Ausgangspunkt.
Der Link unten wurde so geschrieben:
<a href="#anchor_down">Bring mich zum Anker</a> (das # steht für suchedenortwodername=)
Bring mich zum Anker
Anker auf einer anderen Seite
Befindet sich der Anker in einer anderen Datei des selben Ordners, sieht der Link so aus:
<a href="links_test.html#anchor_remote">Zum Anker in einer anderen Datei</a>
Zum Anker in einer anderen Datei
Anker werfen
Den Anker selber muss man jetzt noch in der Zieldatei setzen.
Der Anker ist auch ein <a Link-Tag, den benenne ich einfach mit
dem Attribut name='Ankername' - ohne dass ein href-Attribut gesetzt wird.
Der Text zwischen den beiden Tags wird vom Browser nicht besonders hervorgehoben,
sondern wird nach dem Sprung am oberen Seitenrand stehen (falls der Anker nicht am Dateiende steht);
eine Überschrift wäre gerade richtig:
<a name="anchor_down"></a>Hier ist der Anker
Target Window
Fenster Namen
Normalerweise ersetzt ein Link die dargestellte Datei im aktuellen Brauser-Fenster durch die neue Datei.
Diesen Link können wir aber auch so aufbauen, dass für die neue Datei ein eigenes Fenster geöffnet wird mit dem Attribut target=.
Ein Link wird nur in einem neuen Browser-Fenster geöffnet, wenn target="irgendeinname" auf kein schon geöffnetes Fenster
(oder Frame) namens "irgendeinname" verweist; wenn schon ein Fenster (oder ein Frame) offen ist, welches "irgendeinname" heist, wird dessen Inhalt ersetzt.
<a href="links_test.html" target="neues_fenster"> Linktest
als eigenes Fenster</a> öffnet die Seite links_test.html in einem eigenen Fenster.
Linktest als eigenes Fenster
_Magic Targets
target= "_blank" Das gleiche, ein neues, eigenes Fenster zu eröffnen,
erreicht einer auch, mit dem Attribut: <a href="links_test.html" target="_blank">
target= "_selfe" hingegen ersetzt wieder den Inhalt des Fensters, in dem sich der Link selbst befand (als würde man kein Target angeben).
target= "_parent" wiederum ersetzt dasjenige FRAMESET des Frames in dem sich der Link befand.
target= "_top" schliesslich ersetzt den ganzen Window-Inhalt (das oberste Frameset, falls vorhanden). Zu den
Frames kommen wir noch später.
'main' Fenster
Das Original-Browser-Fenster heisst "main". Man braucht es nicht speziell zu benennen, es hat diesen Namen by default. Will man von einem anderen, neugeöffneten Fenster her eine Seite im Originalfenter öffnen, gibt man als target="main" an.
Base Target
<base>
Schreibt man den Tag <base target="irgend_ein_fenster" /> zwischen die <head>...</head> Tags,
so zielen alle Links dieses Dokuments auf jenes Fenster (bzw. auf jenen Frame)
namens "irgend_ein_fenster" und werden dessen Inhalt ersetzen.
Mehr über Dinge, welche im Head des HTML Dokuments zu stehen kommen.
Variablen an Dateien senden
Mit dem Fragezeichen ? lassen sich auch Variablen und deren Werte an die Adresse anhängen.
Jedes weitere Variablen-Wert-Paar wird mit dem & angehängt,
der Versand erfolgt via Adresszeile an eine PHP-Seite
und wird dort durch _GET wieder ausgelesen.
<a href="variablen_empfaenger.php?var1=EinString&var2=EinzweiterString">Variable
absenden</a> und zu jener PHP Seite wechseln, welche die Variable auswertet.
E-Mail Link
<a href="mailto:...">
Mehrere Empfängeradressen werden durch Kommas (oder Leerschläge oder Semikolons) getrennt aneinander gehängt.
Um eine E-Mail Adresse anzuwählen, an die eine Nachricht versendet wird, gibt es den speziellen mailto: Link.
Es es wird dabei kein spezifisch gestaltetes Formular verwendet, sondern eventuell öffnet sich das normale E-Mail-Programm des Users.
Es wird also nichts im Hintergrund verschickt, was der User nicht noch anschauen könnte und schlussendlich muss er das E-Mail noch absenden.
<a href="mailto:test@biefer.com">>> Antworten per E-Mail</a>
Der Adresse kann einiges zusätzlich mitgegeben werden.
Wie bei den Variablen) wird das erste Anhängsel mit einem ?, und jedes weitere Anhängsel
mit einem & angehängt:
- Die Empfänger-Adresse für einen Durchschlag (cc heisst carbon copy ),
- die Adresse für einen versteckten Durchschlag (bcc heisst black carbon copy), die anderen Empfänger sehen nicht, dass eine Kopie an diese Adresse ging,
- sowie subject und body (das sind beides Schlüsselworte).
<a href="mailto:test@biefer.com?cc=maria@magdalena.nri&subject=Irgend%20ein%20Betreff&body=Irgend ein Inhalt">>> Antwort schreiben</a>
>> Antwort schreiben
Ich muss das & durch & und Leerschläge durch %20 maskieren.
Auch andere Sonderzeichen sollten, um gültigen Code zu schreiben, maskiert werden:
Neue Zeile= %OA, Wagenrücklauf= %OD, Leerzeichen= %20,
!= %21, #= %23, %= %25, *= %2A, /= %2F, <= %3C, >= %3E, ?= %3F,
Ä= %C4, Ö= %D6, Ü= %DC, ä= %E4, ö= %F6, ü=%FC
Achtung Spam Spider
Es ist leider zu beachten, dass es Adressen sammelnde Spider gibt (Harvester),
die so leicht zu gültigen E-Mail Adressen kommen, die sie in ihre Spam Kartei aufnehemen um sie zu verhökern.
Es wäre besser, die E-Mailadresse würde vollständig maskiert, also in Unicode umgewandelt.
Die Adresse mailto:test@biefer.com sieht dann so aus:
<a href="mailto:test@biefer.com">Antworten</a>
Und weiter gibt es noch CSS Lösungen wie a) ändern der Schreibrichtung und b) unterteilen mit Span display:none;:
a) CSS: span.codedirection { unicode-bidi:bidi-override; direction: rtl; }
<span class="codedirection">moc.refeib@tset</span>
b) CSS: p span.displaynone { display:none; }
test@<span class="displaynone">null</span>biefer.com
c) Und man kann Adressteile in Javascript Variablen verpacken und diese
wieder per Javascript zusammenbauen, das ist auch eine Menge Code, welcher die Adresse zergliedert.
Einfacher ist es auf das @ und den Punkt zu verzichten, dadurch muss der User die
Adresse lesen und von Hand eingeben, aber die Spider finden das @ auch nicht und die amerikanischen kennen das ä nicht:
Schreibe an: test(ät)biefer(Punkt)com
Oder man nutzt eine rein grafische Variante, die Abbildung der E-Mailadresse
als Bild, welches von Auge ja problemlos erkannt wird aber nicht von Blinden und deren Lesehilfen und Harvestern.
Es bleibt also festzustellen, dass Programmierer von Harvestern die Maskierung und andere Bemühungen in Ihr Ding ein bauen. Und zuguter Letzt der Spam Filter auf dem Server eingeschaltet werden muss, welcher den Inhalt der Mails beurteilt.
Adresszeile des Browsers
Seiten lokal oder im Internet können natürlich auch direkt angesteuert werden,
durch die direkte Eingabe der URL in die Adresszeile (Sonderzeichen müssen auch hier maskiert werden).
Check den Code.