Webdesign-Workshop
|
WolfdesignLinks und Anker |
|
Inhalt |
Was sind Links?
Aussehen Links als Text Links aus Bild und Text Links innerhalb einer Seite interne Links externe Links Sprungziel Link-Validatoren Zusammenfassung Quellen |
|
Was sind Links? |
Links, insbesonder Hyperlinks, sind das wichtigste an HTML. Links sind Querverweise auf Folgeseiten.
Die Leistungsfähigkeit von Hypertext kommt dadurch zustande, dass man nicht schreiben muss: "siehe Seite soundso", sondern dass der Leser mit einem Mausklick dort hin und auch wieder zurück (!) springen kann. Die Verbindungen zu anderen Textstellen und vor allem auch anderen Dokumenten heißen Links. Hypertext wird vor allem, aber nicht nur, im WWW genutzt. Ein Link wird prinzipiell mit dem HTML-Tag <a href="..."> eingeleitet und mit </a> abgeschlossen.
|
|
| zum Anfang | ||
Aussehen |
Normalerweise erkennt man einen Link daran, dass der Mauszeiger im Browser zu einer mit dem Finger zeigenden Hand wird. Die Stellen auf dem Bildschirm sind üblicherweise leicht zu erkennen.
Im Text ist meist das Wort oder der Textteil andersfarbig und unterstrichen dargestellt. Da sich viele Anwender darauf verlassen, sollte man deshalb bei der Textformatierung auf das Unterstreichen verzichten, wenn dort kein Link vorgesehen ist.
|
|
| zum Anfang | ||
Links als Text |
Folgender Textteil ist ein Hyperlink zu einer Datei im selben Ordner: Grundlagen
Der Quelltext dazu sieht so aus: <a href="grund.htm">Grundlagen</a>
Zwischen den beiden Teilen des a-Tags steht steht der Textteil, der als Link wirken soll. Mit dem Attribut href=" " wird die anzuzeigende Datei angegeben.
Liegt die Datei nicht im selben Ordner, dann muss der richtige Pfad angegeben werden. Eine Ordnerebene zurück kommt man mit ../. Hier ein Beispiel: Zusammenfassung
Der Quelltext dazu sieht dann so aus: <a href="../checks/lk-check.htm">Zusammenfassung</a>
|
|
| zum Anfang | ||
Links aus Bild und Text |
Als Link muss man nicht immer nur Textteile benutzen. Man kann auch eine Grafik zwischen den beiden Teilen des a-Tags aufrufen:
Der Quelltext dazu sieht so aus: <a href="lk-check.htm"><img src="../beispiele/formate/rostock.jpg" border="0" width="200" height="150" alt="Link als Grafik" /><br />Auch das Bild ist ein Link.</a>
Wenn man im Quelltext zwischen dem img-Tag und dem folgenden Text oder auch nur vor dem </a> einen Zeilenumbruch einfügt, kann es zu einem hässlichen unvermittelten Strich neben der Grafik kommen. Das Attribut border="0" sorgt dafür, dass kein farbiger Rand erscheint, der möglicherweise nicht zu der Grafik passt.
|
|
| zum Anfang | ||
Links innerhalb einer Seite |
Man kann in eine Seite Anker mit dem a-Tag einfügen. Hier wirkt z. B der Anker <a name="Anker"> </a>
Nun kann man genau hier hin springen und nicht nur an den Anfang der Datei. Dazu ergänzt man hinter dem Dateinamen nach einer Raute den Namen des Ankers (wenn es nicht sogar wie in folgendem Beispiel um die selbe Datei geht): Springe zum Anker namens Anker! Springe zum Anker namens Bild in dieser Datei! Der Quelltext dazu sieht so aus: <a href="link.htm#Anker">Springe zum Anker namens Anker!</a>
|
|
| zum Anfang | ||
interne Links |
Ich empfehle, dass man alle Dateien, die zu einer WebSite gehören - auch die Grafiken -, gemeinsam auf einem Datenträger speichert. Dann funktionieren alle Links in gleicher Weise, auch wenn man die Site auf die Festplatte, auf eine CD oder auf den Internet-Server gelegt hat.
Um das zu garantieren, sollte man alle Links nur mit relativen Pfadangaben versehen, also keinesfalls Laufwerksnamen und ähnliches benutzen. |
|
| zum Anfang | ||
externe Links |
Für externe Links gibt man die Dateipfade absolut an. Hinzu kommt noch, dass auch das Protokoll genannt werden muss, mit dem der Link funktionieren soll.
Link zu einer Quelle auf einer Festplatte: <a href="file///C:/websites/beispiel/link.htm">Hyperlink</a>
Link zu einer Quelle im Internet: <a href="http//:www.bergt.de">Hyperlink</a>
Link für einen e-Mail-Aufruf: <a href="mailto:bergt-seminar@gmx.de">Hyperlink</a>
|
|
| zum Anfang | ||
Sprungziel |
Mit dem Attribut target="Sprungziel" wird das Sprungziel genannt. Das ist z. B. unbedingt notwendig, wenn das Fenster in Frames unterteilt ist und die HTML-Seite nicht in dem selben Frame erscheinen soll.
Mit dem Attribut target="_blank" wird die Seite in einem neuen Fenster geöffnet, so dass der Besucher nicht ganz von unserer Seite weg geführt wird.
Mit dem Attribut target="extern" wird die Seite auch in einem neuen Fenster geöffnet, allerdings alle externen Seiten in dem selben, so dass nicht immer jeweils ein weiteres neues Fenster geöffnet wird.
|
|
| zum Anfang | ||
Link-Validatoren |
Tote Links sind kein Ruhmesblatt für den Autor. Natürlich kann man Tippfehler machen, so dass der Link nicht funktioniert. Dann ist man selbst schuld. Aber man kann auch nicht garantieren, dass alle externen Links, die beim Erstellen der Seite noch in Ordnung waren, auch später noch aktiv sind.
Mit Hilfe von Link-Validatoren, die man kostenlos im Internet findet, kann man die Links überprüfen lassen. |
|
| zum Anfang | ||
Zusammenfassung |
Link-Checkliste
|
|
| zum Anfang | ||
Quellen |
|
|
| zum Seitenanfang | zum Workshop-Anfang | zur Inhaltsübersicht |
