HTML Tutorial

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]

Links sind die Grundlage des Internets
Hyperlinks oder kurz: Links sind Grundlage für das Bestehen des Internet. Sie sind die Verweise zwischen Web-Dokumenten und Teilen darin. Sie können zwischen einzelnen Internetseiten desselben Websites, aber auch zu ganz anderen URL's (Web-Adressen) führen.

<html>

<head>

<title>Mustermanns Blumenladen</title>

<!--

body { background-color:#33EE00; color:#002000; font-family:Times; }

.zentriert { text-align:center; }

.hervorgehoben { font-family:Arial; font-size:200%; color:navy; }

-->

</style>

</head>

<body>

Willkommen

in Mustermanns Blumenladen

kommen Sie zu unseren Blumentips!

</body>
</html>

Und so sieht's im Browser aus ...

Links werden mit dem <a>-Element (Anker oder anchor) gesetzt, das den zu verlinkenden Text umschlie&zzlig;t. Obligatorisches Attribut ist href, dessen Wert der URL (URL = uniform resource locator) der Zieladresse ist. Wie im Quellcode links zu sehen, leiten Sie mit dem <a href="Zieladresse"> den Link ein. Danach schreiben Sie den Text, der als Link im Browser dargestellt werden soll. Am Ende schließen Sie das a href=".." Tag wieder. Nun erscheint der vom a href=".." Tag umschlossene Tag als Link. Klickt ein Besucher auf diesen Link wird er automatisch zur angegebenen Seite weitergeleitet.
Hyperlinks auf Webdokumente auf demselben Webserver kann man durch die "relative Zieladresse" setzen, im Beispiel:
<a href="./mustermanns-Blumentips.html"

"./" bedeutet, dass das Dokument im selben Verzeichnis wie das aktuelle Dokument liegt. "../" verweist auf eine Verzeichnisebene höher.
Hyperlinks auf andere Webserver setzt man mit "absoluten Zieladressen":
<a href="http://www.mfh.de/verzeichnis1/index.html">fremdes Dokument</a>
Sie haben auch die Möglichkeit, eine eingebundene Grafik als Link auszuzeichnen. Bsp.:

<a href="./mustermann-Blumentips.html"> <img src="logo.gif" width="100" border="0" alt="Zu unseren Blumentips"></a> Da nun eine Grafik und nicht ein Text vom a href=".." Tag umschlossen ist, ist diese eine Verweisgrafik. Klickt ein Besucher auf die Gafik, wird er ebenfalls zur entsprechenden Seite weitergeleitet. Verweisgrafiken bieten einige kleine Besonderheiten an. Eigentlich wird eine Verweisgrafik von einem kleinen durchgehenden Rahmen gekennzeichnet, dieses können Sie mit dem Attribut border="0" ausschalten. Auch das Attribut alt=".." spielt wieder eine Rolle, denn dadurch haben Sie die Möglichkeit, eine Beschreibung des Links anzuzeigen, sobald sich der Mauszeiger über der Verweisgrafik befindet.
Links werden standardmäßich unterstrichen dargestellt. Zusätzlich werden sie farbig ausgezeichnet. Diese Farben und die Unterstreichung können Sie als CSS-Anweisungen jedoch verändern, z.B. wie folgt:
a:link { color:#000099; text-decoration:none } a:visited { color:#000099; text-decoration:none} a:hover { color:#000099; text-decoration:underline} a:active { color:#009900; font-weight:bold; }
Eine weitere Anwendungsmöglichkeit des Ankerelements ist die mailto-Funktion.
<a href="mailto:info@online-tutorial.de">Kontakt</a>
Klickt der Besucher auf den Link Kontakt, öffnet sich das e-mail Programm des benutzten Systems, wobei die e-mail Adresse bereits gesetzt ist. (Ein erfolgreiches Versenden ist jedoch nur möglich, wenn dieses e-mail Programm auch entsprechend konfiguriert ist.)

[ Inhaltsverzeichnis ]
[ 1.1 ] [ 1.2 ] [ 1.3 ] [ 1.4 ] [ 1.5 ] [ 1.6 ] [ 1.7 ] [ 2.0 ] [ 2.1] [ 2.2 ] [ 2.3 ] [ 2.4 ] [ 2.5 ] [ 2.6 ] [ 2.7 ] [ 2.8 ] [ 2.9 ] [ 3.0 ] [ 3.1 ] [ 3.2 ] [ 3.3 ]