interne und externe Verlinkungen
Grundlegend unterscheidet man bei Links nach internen und externen Links, wobei externe Links auch gern als Hyperlinks bezeichnet werden.
Der interne Link wird dabei nur mit dem Seitenname (zum Beispiel index.html) angegeben und bei externen Links muss die komplette URL, zum Beispiel für diese Seite http://lutz.dohmaer.de/webseitentipps/verlinkungen.php angegeben werden.
So würde also der interne Link als Quelltext erstellt aussehen:
<a href="index.html">Startseite</a>
wobei a für die Eröffnung des Links steht und in href die Zielseite sich befindet. Wenn sich zwischen <a> und </a> nichts befindet würde dieser Link nicht anklickbar sein, also muss man zu mindestens einen Text einfügen. Natürlich kannst Du dafür auch ein Bild verwenden.
Der externe Link (Hyperlink) würde für eine Startseite (index) würde so aussehen:
<a href="http://www.meine_erste_homepage.de/index.html">Startseite</a>
Der Nachteil für einen Hyperlink auf die eigene Homepage ist, dass Du diese Seite nur im Internet aufrufen kannst! Solltest Du also Deine Seite noch nicht im Internet (auf einem Webspace) haben, dann verwende nur interne Links.
Formatieren kannst Du Links auch wieder mit der CSS-Datei, was wie folgt aussehen könnte:
a:visited { color: #dd0000; text-decoration: none; }
a:active { color: #dd0000; text-decoration: underline; }
a:hover { color: #dd0000; text-decoration: underline; }
Dabei steht
a:link für den Link, wenn er weder mit der Maus überfahren wurde, noch angeklickt wurde und auch noch nicht besucht wurde,
a:visited steht für den bereits besuchten Link,
a:hover steht für den Link, wenn er mit der Maus überfahren wird und
a:active steht für den Link, wenn er angeklickt wurde.
Um Deine Links noch weiter zu formatieren kannst Du alle Angaben wie bei Texten verwenden - auch weitere Klassen bei Links kannst Du erstellen, was dann so aussehen könnte:
a.blau:visited { color: #0000dd; text-decoration: none; }
a.blau:active { color: #0000dd; text-decoration: underline; }
a.blau:hover { color: #0000dd; text-decoration: underline; }
So müsstest Du dann diesen interne Link im Quelltext aufrufen:
<a class="blau" href="index.html">Startseite</a>
Als alternative Angaben im Link gibt es noch den titel und das angegebene Zielfenster.
<a class="blau" title="Der Titel zum Seitenaufruf" href="index.html" target="_blank">Startseite</a>
Der Titel (title) wird dabei beim überfahren mit der Maus in einem kleinen Fenster geöffnet und angezeigt und die Zielfensterbasis (target=_blank) öffnet diese Seite in einem neuen Fenster - wenn Du das nicht wünschst, dann lasse diese Anweisung einfach weg.
Verlinkungen mit Bildern erstellen:
Nicht nur Texte, auch Bilder kannst Du für die Erstellung eines Links einsetzen, wobei es egal ist, ob der Link auf eine Seite führt oder ob einfach ein kleines Bild ein Größeres öffnet oder einfach zu einem Download führt, was für jeden Link gilt.
Und so sieht der Quelltext mit der Verwendung eines Bildes aus:
<a title="Beschreibung des Links" href="privates/bilder/startseite/startseite01_gr.jpg" target="_blank"><img src="privates/bilder/startseite/startseite01_kl.jpg" border="0" width="100" height="75" alt="Beschreibung des Links oder des Bildes"></a>
welcher das große Bild zum Kleinen in einem neuen Fenster öffnen würde.
Ebenfalls möglich wäre:
<a title="Beschreibung des Links" href="privates/bilder/startseite/startseite01_gr.jpg" target="_blank"><div class="bild01"></div></a>
was auch das große Bild zum Kleinen in einem neuen Fenster öffnen würde, nur dass der Quelltext wesentlich kleiner ist.
Du siehst - für Links gibt es viele Möglichkeiten, diese anzulegen, dies sind aber noch nicht alle.
Als nächstes kann man mit einem Link auch Anker anlegen.
Diese benötigt man sehr oft um zum Beispiel wieder an den Seitenanfang zu gelangen, außerdem kann man sie auch nutzen, um auf einer anderen Seite gleich zum passenden Abschnitt geführt zu werden.
Ein solcher Anker würde für das zurück führen auf den Seitenanfang gleich nach <body> und noch vor dem weiteren Seiteninhalt mit folgendem Quelltext wie folgt angelegt werden:
<a name="Seitenanfang"></a>
Am Seitenende musst dann der passende Link zum Seitenanfang für Deine Starseite so aussehen:
<a href="#Seitenanfang">Zurück zum Seitenanfang</a>
Soll der Anker für das bequeme Erreichen des Abschnittes auf einer andere Seite dienen, dann kann man das auch so lösen:
Du legst auf der Seite über den betreffenden Abschnitt einen Anker mit passendem Namen an, was unter anderem so auch aussehen könnte:
<a name="Meine_Adresse"></a>
was zum Beispiel auf der Kontaktseite (kontakt.html oder kontakt.php) der Fall sein müsste.
Auf einer anderen Seite machst Du aufmerksam mit einem Text, worauf Du zum Beispiel folgendes angibst:
Zitat aus einem dafür möglichen Quelltext:
"Du möchtes mehr über mich erfahren, <a href="kontakt.html#Meine_Adresse">hier findest Du meine Adresse</a>."
Sollte jetzt ein Besucher auf den Textlink ("hier findest Du meine Adresse") klicken, so wird er nicht nur auf die Seite "kontakt.html" geführt, sondern hier auch gleich zum Abschnitt der Adresse, wobei es egal ist, ob diese oben oder sehr weit unten steht - sie ist sofort sichtbar.
Sehr gut lassen sich solche Anker auch bei der Verwendung von Listen und Gesetzen verwenden (Namen für Anker wären dann: Punkt01, Punkt02, Punkt03, ... oder Paragraph01, Paragraph02, ...).
Eine weitere Form für einen Link ist, ihn in einer bestimmten Fenstergröße aufgehen zu lassen.
Dies kannst Du mit folgendem Quelltext erledigen:
Als erstes setzt Du einen Anker zu diesem Link damit die Seite nicht an den Seitenanfang springt:
<a name="Mehr_Infos"></a>
Danach setzt Du folgenden Link:
<a title="Linkbeschreibung" href="#Mehr_Infos" onClick="javascript:window.open('privates/bilder/startseite/startseite01.html','xxx','top=10,left=10,width=600,height=575, scrollbars=no')">Mehr Infos</a>
Für den Text "Mehr Infos" ist natürlich auch wieder die Verwendung eines Bildes möglich wie zum Beispiel <div class="bild01"></div>.
Erläuterungen zum Link:
Das zu öffnende Fenster hat die Ziel-URL "privates/bilder/startseite/startseite01.html",
den Fensternamen "xxx",
und wird mit den Abständen
von oben (top=10) und von links (left=10)
im Browser über der bereits geöffneten Seite angezeigt und hat eine Fenstergröße von
width=600 (600 Pixel Breite) und height:575 (575 Pixel Höhe) und
besitzt keinen Scrollbalken (scrollbars=no - alternativ ist auto für bei Bedarf und yes für generell Scrollbalken)
Die Werte selbst kannst Du nach Bedarf anpassen, also Ziel-URL, Abstände (top/left), Breite, Höhe, Fenstername, ...
- Vorbereitete Seite für die Linkmöglichkeiten -
Angebote zum Download,
kannst Du genauso gestalten wie einen normalen Link - das Download-Kontrollkästchen wird automatisch gestartet, wenn der Browser die Datei selbst nicht öffnen kann (was zum Beispiel mit .mpg Dateien der Fall ist).
Wenn Du jetzt den Link zum Download-Angebot folgender Maßen anlegst
<a title="Beschreibung des Download-Angebotes" href="privates/downloads/mein_Video.mpg" target="_blank">Mein privates Video dazu</a>
Sollte jetzt der Besucher auf "Mein privates Video dazu" klicken, so wird das Download-Fenster geöffnet, voraus gesetzt, diese Datei (mein_Video.mpg) existiert im Ordner "downloads" welcher sich wiederum im Ordner "privates" befinden muss nach der obigen Anweisung (href).
Link als Email-Verweis:
Falls Du einen Link zu Deiner E-Mail Adresse anlegen möchtest und selbst kein Formular hast, dann kannst Du einen E-Mail-Link wie folgt anlegen:
<a href="mailto:Deine@email.adresse">Deine@email.adresse</a>
Wenn der Besucher jetzt auf den Textlink "Deine@email.adresse" klickt, so wird das Standart-Programm des Users für E-Mails geöffnet.