 Der Link
Die Mutter aller Hypertext-Dokumente ist der Link. Ein Link ist eine Referenz auf ein anderes Objekt. Im Allgemeinen versteht man darunter eine Dateiverknüpfung.
Referenz (lat. referre) = sich auf etwas beziehen. HTML: Verweis auf ein Objekt.
Im Sprachgebrauch üblich ist auch der Begriff 'Verweis' / 'Verweis auf eine Datei'. Im Syntax von HTML-Tags für einen Verweis (<a>) taucht ein Therm auf, der sich auf 'Referenz' bezieht: 'href' für Hypertext-Referenz' (das als Merkhilfe).
Die Erklärung für den Therm "href": href = hyper reference = Hyper(text)-Referenz
<a href="Wert"> Text zum Anklicken </a>
Als Wert für das href-Attribut tragen sie die Adresse für das Verweisobjekt ein. In der Regel den Namen einer HTML-Datei.
<a href="dateiname.htm"> Text zum Anklicken </a>
Mutter des Hypertextes
In HTML-Dokumenten wird das <a>-Tag für die Referenzierung anderer Objekte
eingesetzt. Das 'a-Tag' macht also das eigentliche 'Hyper' dieser Textdokumente /
Textmarkierungssprache aus: (HTML = Hypertext Markup Language).
(das nur zwischendurch)
Zwischen dem einleitenden <a> und schließenden </a> steht entweder Text oder ein Image zum Anklicken. Ein Textlink ist standardmäßig unterstrichen.
Der übliche Textverweis sieht so aus: Ein einleitendes und ein schließendes <a>-Tag
<a> dazwischen steht ein Text zum Anklicken </a>
Dann kann man erforderliche und zusätzliche Eigenschaften (Attribute) eintragen:
href=" "
| Verweisziel | (erforderlich) |
<a href="datei.htm"> dazwischen steht ein Text zum Anklicken </a>
|
target=" "
| Fenster für die Anzeige | (zusätzlich) |
class=" "
| Stylesheet-Klasse / Zuordnung einer CSS-Klasse | (zusätzlich) |
style=" "
| CSS-Formatierungen | (zusätzlich) |
title=" "
| kommentierender Text | (zusätzlich) |
id=" "
| ID-Name / Bezeichnername | (zusätzlich) |
name=" "
| Name / Bezeichnername | (zusätzlich) |
Mit dem Attribut 'class' und 'target' könnte dann so aussehen:
<a href="verweisziel" target="anzeigeziel" class="css-klasse"> Text </a>
Arten der Links in HTML Dokumenten
Obwohl alle Links in der Grundstruktur gleich sind, wird oft je nach verlinktem Dateityp oder Zweck unterschieden:
| |
Link |
Notierung: href=" " |
| 01 |
auf HTML-Dateien |
|
| |
projektinterne, relative Links |
../ordner/datei.htm |
| |
als absolute Links |
http://www.domain.datei.htm |
| 02 |
auf einen Anker |
|
| |
dateiintern |
#ankername |
| |
projektintern |
datei.htm#ankername |
| |
absolut |
http://www.domain.datei.htm#ankername |
| 03 |
Email-Links |
mailto:email@domain.de |
| 04 |
Bilddateien |
dateiname.jpg | dateiname.gif |
| 05 |
auf andere Dateien ZIP, PDF ... |
dateiname.zip | dateiname.pdf |
| 06 |
auf Funktionen eines JavaScripts |
javascript:funktionsname() |
Info zu 04 - Bildverweise
 
|
 
|
| ohne target="_blank" |
mit target="_blank" |
Hier wird direkt auf eine Grafik / ein Foto verwiesen (JPG oder GIF-Datei). Beim Anklicken wird die Grafik angezeigt und ersetzt die zuvor zu sehende HTML-Seite. Eine einfache Methode mittels einer Mini-Vorschau ein größeres Bild einzubinden. Diese Art der Verlinkung sollte man meiner Meinung nach nur mit dem zusätzlichen Attribut target="_blank" verwenden, damit die Großansicht in einem neuen Fenster angezeigt wird.
<a target="_blank" href="gross01.jpg">
<img src="klein01.jpg" width="99" height="66" border="0" alt="">
</a>
Info zu 05
Beim Linktyp 05 ist es vom eingebundenen Programm abhängig, wo oder in welcher Form die verlinkte Datei angeboten wird. Oft wird das zum Speichern oder Lesen zuständige Programm geöffnet, die Datei anzuzeigen (Archivierungsprogramm, Reader).
Das bedeutet wen sie auf ein Archiv verweisen wird bei einem Besucher mit installiertem Archivprogramm (z.B. WinZip) dieses Programm geöffnet und die Programmoptionen werden angezeigt.
Haben sie auf eine PDF-Datei verwiesen verhält sich der Browser ähnlich: Ist ein PDF-Reader installiert, wir dieses Programm geöffnet.
Empfehlenswert ist die Anzeige in einem neuen Fenster (target="_blank") und das Angebot zum Download eines kostenlosen Readers.
Das Attribut "target"
Dieses Attribut ist nicht zwingend erforderlich. Ohne "Target"-Angaben wird die Seite genau dort angezeigt wo sie aufgerufen wurde: Im gleichen Fenster, also dort wo der referenzierende Verweis stand. Ausführliche info auf einer eigenen Seite. Siehe unten: Querverweise
Verweise mit CSS-Unterklassen gestalten (für fortgeschrittene CSS-Anwender) ist wichtig, wenn sie die Textlinks ihrem Design anpassen möchten.
Das hier im Beispiel notierte Attribut "class" ist nur notwendig, wenn sie z.B. zur Unterdrückung des Unterstrichs, ein StyleSheet mit eigener Klasse verwenden, das im Head-Bereich notiert wurde.
Notierung innerhalb des Head-Bereichs:
<style type="text/css">
<!--
a.blau {
font-family: Arial;
font-size: 12px;
text-decoration: none;
color: #0000FF;
}
-->
</style>
Der Link im Body mit dem Class-Attribut:
<a class="blau" href="dateiname.htm"> Textlink </a>
Auch dazu mehr auf einer eigenen Themenseite.
Informationen zur relativen Adressierung finden sie auf der Seite:
 relative Links in HTML-Dokumenten
Informationen zur absoluten Adressierung finden sie auf der Seite:
absolute Links in HTML-Dokumenten
Informationen zur Adressierung auf eine Sprungmarke (Anker) finden sie auf der Seite:
Verweise auf Anker in HTML-Dokumenten
Weitere Beispiele zu Pfadangaben finden sie auf der Seite:
Pfadangaben bei Verweisen
Zum Thema Angaben für das Anzeigeziel (Target) lesen sie die Informationen auf der Seite:
Targetangaben für Links
Links ohne Unterstrich, mit Rahmen oder Hintergrundgrafik? Mehr dazu auf der Seite:
Links ohne Unterstrich
|
Home
ZURÜCK 
