Top im Web BASIC - eine Webpublishing-Einführung
Kurs der Universität Bern

Teil 7

Wir hatten das schon mal, allzu unbekannt wird euch das also nicht vorkommen. Man muss zuerst unterscheiden zwischen Verweisen (Hyperlinks, Links) innerhalb der gleichen Seite, solchen auf andere Seiten einer Website und solchen auf ganz andere Seiten ausserhalb der eigenen Site. 

Als Grundlage noch das Aussehen von verlinkten Worten im HTML-Quelltext: 

Blabla <a href="seite.htm">Verlinkte Wörter</a> undsoweiter 

...logischerweise ist der Abschnitt "Verlinkte Wörter" unterstrichen, und wenn man mit der Maus drüber fährt, erscheint das bekannte Händchen. Im Composer sind Links weitaus einfacher einzufügen. 

Links innerhalb einer Seite 

Wenn Ihr z.B. einen Link auf einen Abschnitt zuunterst auf dieser Seite machen wollt, müsst Ihr dort zuerst ein Ziel definieren - indem ihr an der Stelle, wo der Link hinführen soll, einen "Anker" oder ein "Target" ("Ziel") legt - mittels "Insert / Named Anchor" (Einfügen / Benannter Ankerpunkt"). Man muss dem Ding einen Namen geben, am besten einen kurzen, mit kleinbuchstaben. Nun steht an dieser Stelle ein solches 

Zeichen, das jedoch nur im Composer sichtbar ist! Wenn man die Seite speichert, das zu verlinkende Wort oder die zu verlinkende Grafik markiert und auf "Link" ("Verknüpfung") klickt, erscheinen nun die Targets auf der gleichen Seite bereits in der Liste, wo man sie auswählen kann - hier "sadf" (das #-Zeichen davor ist die Standard-HTML-Einleitung für Verweise innerhalb der gleichen Seite):

Das hab ich auf dieser Seite hier auch gemacht. Wenn Du nun also hier klickst, gelangst Du zum Target, das ich ganz unter "down" genannt habe. Im Quelltext ist diese Art Links folgendermassen definiert: 

<a href="#down">Testwort</a> 

Vor dem Target-Namen steht folglich immer ein "Gartenhag"-Zeichen (ohne Leerschlag!).

Links innerhalb einer Website 

Für einen Link auf eine beliebige Seite Eurer eigenen Website müsst Ihr einfach "Link" wählen und bei "Link Location" den Dateinamen eingeben, z.B. "weiter.htm" - oder diesen mittels "Choose File" ("Datei wählen") wählen. Im Quelltext ist diese Art Links folgendermassen definiert: 

<a href="weiter.htm">Testwort</a> 

Hier fehlt der Gartenhag - er dient nur dazu, innerhalb der Seite Targets zu definieren! Natürlich kann man die beiden genannten Möglichkeiten kombinieren und auf eine bestimmte, vorher definierte Stelle im Zieldokument hinweisen: 

<a href="weiter.htm#down">Testwort</a> 

Links auf eine ganz andere Page 

Für einen Link auf eine beliebige Internetseite ist das vorgehen genau gleich, ausser dass man nun den gesamten Pfad angeben muss, inklusive dem Übertragungsprotokoll (in 99.8% der Fälle http): 
 
Im Quelltext ist diese Art Links folgendermassen definiert: 

<a href="http://www.beispiel.com">Testwort</a> 

Mail-Links

Auf einen Link klicken - und es erscheint sofort das Mailprogramm mit der korrekten Adresse? Kein Problem; schreibt einfach statt "http://www....." oder einem Dateinamen "mailto:abc@123.com" hin, also "mailto:" plus die eigentliche Mailadresse ohne Leerschläge.

Im Quelltext ist diese Art Links folgendermassen definiert: 

<a href="mailto:beispiel@server.com">Testwort</a>

Achtung: Ist auf einem Computer kein Standardmailprogramm installiert, klappt das nicht...

Heisser Tip: Sobald eine Mailadresse (in einem Text oder Link) auf einer offen abrufbaren Website liegt, ist sie ein gefundenes Fressen für Spammer - deren Roboter durchkämmen das Netz nach brauchbaren Mailadressen für ihr Schrottmails. Das heisst: Benützt keine Mailadressen Dritter in einem mailto:-Link, und wenn ihr eure eigene benutzt, nehmt eine Adresse, die ihr sonst für Newsletter, in Foren usw. verwendet - und bei der es eucht nichts ausmacht, dass das Spam-Aufkommen steigen könnte.

Für Leute, die sich sehr sicher fühlen damit: Es gibt auch die Möglichkeit, die Adressen gegen Spambots zu schützen, mit einer bestimmten Codierung, die dann in den Quellcode eingepflanzt werden muss, siehe hier.

Ziele definieren 

Es gibt noch eine Verfeinerung bei Links - wenn man im Link-Fenster des Composers auf "Advanced Edit" ("Fortgschrittene Bearbeitung") klickt, kann man z.B. angeben, dass der Link in einem neuen Fenster geöffnet werden soll: Attribute > Target / Value = "_blank" (Attribut > Target / Wert =" _blank") -- ohne "_blank" aber ohne Anführungszeichen eingeben! Diese Ziele werden verwirrenderweise ebenfalls Targets genannt.

Vor der Angabe der Target-Arten steht ein "underscore" (Unterstrich, _ ). Als Target kommt vorerst nur _blank in Frage (in einem neuen Fenster öffnen).

Im Quelltext ist diese Art Links folgendermassen definiert: 

<a href="http://www.beispiel.com" taget="_blank">Testwort</a> 

Und wenn man dann alles zusammen nimmt... 

<a href="http://www.beispiel.com/test.htm#ziel" taget="_blank">Testwort</a>  

Anmerkung: Kleine Repetition des Unterschieds zwischen Arbeiten im HTML-Code-Modus (Quellcode) und Arbeiten im Grafik-Modus des Composers (WYSIWYG): Im Composer muss man die Tag-Klammern natürlich nicht angeben, nur die Datei (also z.B. seite.htm) oder unter "Advanced Edit" ("Fortgschrittene Bearbeitung") bloss target=_blank und sonst nichts! Der Composer baut alle anderen nötigen Tags selbst rundherum. 

Weiter geht's 

Und nun ab zum A und O des Webdesigns auf unserer Stufe - wie man mit Tabellen einigermassen einfach ansprechende Inhalte darstellen kann... 
 
 
 

Jawolle, Du hast richtig geklickt! Hier kommst Du zurück nach oben (wo ich natürlich auch wiederum ein Target verstecken musste - findest du raus, wie es heisst?)

Zur Hauptseite zurück gehts hier.