Einbinden von Links
Links werden mit dem <a href> ... </a>- Tag eingebunden.
Beispiel:Gehe zurück zu <a href="../index.html"> flexdax.org .</a>Oder besuch doch mal <a href="http://www.sbb.ch"> die Schweizerischen Bundesbahnen .</a> ergibt:Gehe zurück zu flexdax.org .Oder besuch doch mal die Schweizerischen Bundesbahnen . |
Erläuterungen:
"a href" bedeutet 'anchor to hypertext reference' (anchor= engl. Anker).Im einleitenden Tag wird die Adresse entweder absolut oder relativ eingebunden (Einbinden von Dateien).
Anker
Oftmals soll nicht nur ein bestimmtes HTML - Dokument verlinkt werden, sondern eine spezifische Stelle innerhalb dieses HTML - Dokuments. Bei einem solchen Link ist in der Status- sowie der Adressleiste die normale Adresse des Dokuments zu sehen, gefolgt vom einem Gatterzeichen ( # ) und einer zusätzlichen Bezeichnung, also z.B.: http://http://www.flexdax.org/htmlkurs/links.html#4
Um einen bestimmten Absatz zu verlinken, müssen zwei <a> - Tags plaziert werden, eines mit href- Attribut, das andere mit name- Attribut-
Als erstes wird die Stelle definiert, an welche gesprungen werden soll:
<a name="255"><h3>Titel 255</h3></a>
Der Name ist frei wählbar.
Nun wird irgendwo der Link zu diesem sog. Anker definiert.
Falls im gleichen Dokument gesprungen werden soll, genügt " #[Name des Sprungzieles] ":
<a href="#255">Springe zum Titel 255</a>
Falls eine bestimmte Stelle innerhalb eines anderen Dokuments verlinkt wird, muss noch die Adresse vorangestellt werden:
<a href="links.html#255">Springe zum Titel 255 [ innerhalb von 'links.html' ]</a>
Beispiel:<a name="anfang"><h5>HTML- Anker</h5></a>( ... ) <a href="#anfang">Hier klicken, um zum Anfang bzw. zum obigen Titel zu gelangen.</a> ergibt:HTML - Anker(...) Hier klicken, um zum Anfang bzw. zum obigen Titel zu gelangen. (Hier wurden noch extra Zeilenumbrüche eingefügt, um die Wirkung sichtbarer zu machen.) |
Das 'target' - Attribut
Normalerweise werden Links im selben Fenster geöffnet.Mit Hilfe des target- Attributs lassen sich jedoch auch andere Fenster festlegen:
Beispiel:<a href="../index.html" target="2">Dieser Link öffnet in Fenster 2 .</a>a href="bilder.html" target="2"> Dieser Link öffnet im gleichen Fenster .</a> ( gleiches Ziel ) und <a href="farben.html" target="3">dieser Link</a> öffnet wieder in einem anderen Fenster . ergibt :Dieser Link öffnet in Fenster 2.Dieser Link öffnet im gleichen Fenster . ( gleiches Ziel ) und dieser Link öffnet wieder in einem anderen Fenster . |
_blank :
Link wird in einem neuem Fenster geöffnet.
_top :
Link wird im gesamten Anzeigefenster geöffnet. Bei Frames sinnvoll, um ihnen zu 'entkommen'.
_self :
Link wird in gleichem Fenster (& Frame!) geöffnet. Nur sinnvoll, wo im head ein base target definiert wurde (siehe nächster Abschnitt).
_parent :
Das Anzeigefenster nimmt den Wert an , welchen es bevor Aufrufen der Seite inne hatte.
'base target'
Angenommen , ihr habt ein Linkliste mit 60 Links. Jeder Link soll in einem neuem Fenster geöffnet werden. Anstatt nun jedem <a href> - Tag das Attribut target mit dem Wert "_blank" zuzuweisen, kann eine einzige Anweisung innerhalb des <head> ... </head>- Tags notiert werden:
<base target="_blank">
Alle Links des betreffenden Dokuments öffnen sich nun automatisch in einem neuen Fenster. Links , die in einem anderen Fenster geöffnet werden sollen, müssen individuell mit dem target - Attribut versehen werden.
Anwendungen von target & base target im Kapitel über Frames.
Grafiken / andere Objekte
Anstelle von Text können auch andere Objekte als Links eingebunden werden. Am üblichsten ist das Einbinden einer Grafik:
Beispiel :<a href="xild01.jpg"><img src="xild01.jpg" width="200" height="133"></a>ergibt :
|
Anmerkungen :
- Hier wurde ausnahmsweise das -gelinkte ;) - grosse Bild per 'width' und 'height' verkleinert, anstatt eine separate, kleinere Version ( Thumbnail ) zu erstellen und diese im Dokument einzubinden & mit der grösseren Version zu verlinken.
- Per Voreinstellung erhalten als Links eingebundene Grafiken immer einen Rahmen. Mit dem Attribut border=0 verschwindet dieser.
- Zusätzlich könnte noch ein Alternativtext angezeigt werden:
Beispiel :<a href="xild01.jpg"><img src="xild01.jpg" width="200" height="133" border=0 alt="[erloschener] isländischer vulkan - elðborg"></a>ergibt :
|
Beispiel :<a href="xild01.jpg"><hr size=5 width="80%"></a>ergibt : |
Image - Maps
Mit Hilfe von Image- Maps können einzelne Flächen einer Grafik definiert und anschliessend z.B. verschieden verlinkt werden.
Beispiel einer Image - Map ( Die ersten zwei Bilder können angeklickt werden ):
Es können grundsätzlich drei verschiedene Arten von Flächen definiert werden:
| Art der Fläche | Voraussetzungen für eine einwandfreie Definition |
| Rechteck | x,y - Koordinaten der Ecken links oben und rechts unten |
| Kreis | x,y - Koordinaten des Mittelpunktes und Durchmesser |
| Vieleck ( Polygon ) . | x,y - Koordinaten der Eckpunkte |
Das ganze sieht dann z.B. so aus :
|
<map name="imp"> <area shape=rect coords="5,5,75,55"> <area shape=circle coords="100,85,42"> </map> <img src="xild97.jpg" width="230" height="231" usemap="#imp" border="0"> |
Anmerkungen:
- die gesamte Definition der Image - Map kommt innerhalb des <map> ... </map> - Tags zu stehen . Der Image - Map wird ausserdem ein Name vergeben . Der Name ist frei wählbar , im obigen Beispiel wurde "imp" gewählt .
- mit der Anweisung shape=rect wird ein Rechteck als Art der Fläche definiert . Weitere Möglichkeiten sind circle (Kreis) oder polygon ( Vieleck ) . Anschliessend folgen mit der Anweisung coords="5,5,75,55" die x,y - Koordinaten der Punkte in den Ecken links oben und rechts unten .
- Das Bild , bei welchem die Image - Map eingesetzt wird , wird ganz normal eingebunden , Allerdings mit dem zusätzlichen Attribut usemap="#[name]" . Damit wird das Bild angewiesen , auf die vorher erstellte Image - Map mit dem gleichen Namen zuzugreifen .
- Die Koordinaten lassen sich in den meisten Grafikprogrammen beim Drüberfahren mit dem Mauszeiger in der Statuszeile des Programms ablesen . In den meisten HTML-Editoren ist allerdings auch eine Funktion zum automatischen Einfügen der Koordinaten oder zum Erstellen von Image - Maps vorhanden .
Flächen zu definieren macht aber alleine noch keinen Sinn .
Interessant wird es erst , wenn man das <area> - Tag noch mit einem ( oder mehreren ) Attribut ( en ) versieht . Meistens sind dies :
- das href="" - Attribut . Damit wird die Fläche mit einer bestimmten Datei verlinkt .
- das title="" - Attribut . ( Dieses wird allerdings von Netscape 4.x nicht interpretiert.) Die Anwendung dieses Attributs wird im entsprechenden Abschnitt über Grafiken erklärt .
Beispiel :<map name="imp"><area shape=rect coords="5,5,75,55" href="xild01.jpg" title="icelandic volcano"> <area shape=rect coords="80,5,150,55" href="xild02.jpg"> <area shape=rect coords="155,5,225,55"> <area shape=rect coords="5,60,75,110"> <area shape=rect coords="80,60,150,110" title="me on the hill in iceland ..."> <area shape=rect coords="155,60,225,110" title="it was a wonderful day , and a wonderful road to cycle ." > <area shape=rect coords="5,115,75,165" title="still pingvellir" > <area shape=rect coords="80,115,150,165" title="in selfoss , on the coast . " > </map> <img src="xild97.jpg" width="230" height="231" usemap="#imp" border="0"> ergibt :
|
Zusätzliche Bemerkungen :
Wie Farben für Links festgelegt werden , wird im entsprechenden Abschnitt im Kapitel Farben erklärt : Farben für Hintergrund , Text , Links
Im Prinzip kann jede Datei als Link eingebunden werden . Es hängt dann vom Browser ab , ob und wie er diese interpretiert . HTML - Dokumente , Text - ( *.txt ) oder Bilddateien ( relevant : .jpg und .gif ) werden z.B. direkt im Browserfenster dargestellt . Bei anderen Dateitypen wird die Datei in dem dafür zugewiesenen Programm geöffnet (z.B. RealPlayer - Files ) , wieder andere ( z.B. *.css - Dateien ) werden nicht erkannnt , der Anwender wird dann u.U. gefragt , was damit geschehen soll ( " Datei öffnen mit ... " ) .