|
|
|
|
 Wegweiser:
Startseite >>
Übersicht HTML-Kurs
>>
Kapitel 4: Links (Verweise)
| HTML Kurs - Kapitel 4: Links (Verweise) |
Verweise (englisch: Links) sind im Internet von großer Bedeutung, da mit ihnen zu
anderen Webseiten Verknüpfungen erstellt werden können. Der einfache Klick auf den Link,
der zumeist vom Browser unterstrichen wird, genügt, um zu einer anderen Webseite zu "surfen".
Im Beispiel werden drei Links erstellt, die auf unterschiedliche Webseite verweisen.
Hierbei handelt es sich um absolute Links, die direkt auf eine andere Site verweisen.
Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body background="background.gif" >
<p>Ein erster Test</p>
<a href="http://www.suse.de">SuSE</a> Linux<br>
<a href="http://www.google.de">google</a> Suchmaschine<br>
<a href="http://www.ebay.de">ebay</a> Auktionen<br>
</body>
</html>
|
<< So sieht`s aus >>
Wohingegen es sich bei dem folgenden Link um einen relativen Link handelt.
Hier wird angenommen, dass sich die Datei im untergeordneten Verzeichniss befindet.
Beispiel:
<a href="../test.htm">Testseite</a>
|
Sie können das <a href> Tag auch verwenden, um es dem Gast auf Ihrer Seite zu ermöglichen, Ihnen
eine E-Mail Nachricht zu schreiben. Dabei öffnet der Browser ein Mail-Fenster.
Wenn Sie möchten, können Sie auch gleich ein Betreff definieren. Das bedeutet: Sie können zum Beispiel an
verschiedenen Stellen Ihrer Website E-Mail Links einbinden, wobei Sie dann genau zuordnen können,
woher die E-Mail kam.
Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body background="background.gif" >
<a href="mailto:webmaster@devchannel.net?subject=Mailtest">Mail</a> an devchannel
</body>
</html>
|
<< So sieht`s aus >>
Häufig finden Sie auf Webseiten Links in Form von Grafiken. Diese zu erzeugen ist ganz einfach.
Sie müssen nur daran denken, dass sich HTML Tags ineinander verschachteln lassen?
Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body background="background.gif" >
<p>Alles über Linux</p>
<a href="http://www.suse.de"><img src="geeko.gif"></a>
</body>
</html>
|
<< So sieht`s aus >>
Wie Sie sehen, müssen Sie nun einfach auf das Bild klicken und gelangen zu Ihrem Wunschlink.
Oft wird der Linkrahmen um die Grafik als störend empfunden und daher durch das Attribut border=0 versteckt:
Beispiel:
<html>
<head>
<title>Text des Titels</title>
</head>
<body background="background.gif" >
<p>Alles über Linux</p>
<a href="http://www.suse.de"><img src="geeko.gif" border=0></a>
</body>
</html>
|
<< So sieht`s aus >>
Wie Sie mit Sicherheit bereits festgestellt haben, werden Links standartmäßig in blauer Schrift
und unterstrichen dargestellt. Um dies zu ändern, ist am besten wenn man sog. Stylesheets (CSS) zu Hilfe
zieht. Die CSS Programmierung wird in dem Bereich Programmierung/CSS ausführlich erklärt.
Dieses Beispiel soll nur als Einstieg verstanden werden.
Beispiel:
<html>
<head>
<title>Text des Titels</title>
<style type="text/css">
a:link { text-decoration:none; font-family:Arial; color:blue; }
a:visited { text-decoration:none; font-family:Arial; color:blue; }
a:hover { text-decoration:underline; font-family:Arial; color:red;}
</style>
</head>
<body background="background.gif" >
<a href="http://www.suse.de">SuSE</a> Linux<br>
<a href="http://www.google.de">google</a> Suchmaschine<br>
<a href="http://www.ebay.de">ebay</a> Auktionen<br>
</body>
</html>
|
<< So sieht`s aus >>
Sie können bei einem Link jederzeit das Zielfenster festlegen in demsich die neue Seite öffnen soll.
Dazu müssen Sie in Ihren <a> Tag lediglich das Attribut target= einfügen.
Um einen Link im aktuellen Fenster zu öffnen setzten sie target=_self. Wollen Sie jedoch einen
Link in einem neuen Fenster öffnen so benutzen sie target=_blank.
Beispiel:
<html>
<head>
<title>Text des Titels</title>
<style type="text/css">
a:link { text-decoration:none; font-family:Arial; color:blue; }
a:visited { text-decoration:none; font-family:Arial; color:blue; }
a:hover { text-decoration:underline; font-family:Arial; color:red;}
</style>
</head>
<body background="background.gif" >
<a href="http://www.suse.de" target=_blank>SuSE Linux</a>
Link in neuem Fenster öffnen.<br>
<a href="http://www.google.de" target=_self>google</a>
Link im aktuellen Fenster öffnen.<br>
</body>
</html>
|
<< So sieht`s aus >>
Es gibt noch weitere Werte für das target Attribut, diese finden aber nur in Framesets Bedeuteung und werden
im entsprechenden Kapitel noch genauer beschrieben.
|
|
|
