STARTSEITE eidechse
grafik

Links definieren und Anker setzen

Webspace schon ab 0,79 Euro!Fast alle Seiten sind mit Hilfe von Links mit anderen verknüpft, sowohl für den Besucher, als auch für Suchmaschinenroboter sind Verweise wichtig. Wie Verweise definiert werden, und was für Unterschiede sie bereithalten erfahren Sie in diesem Artikel. Ein Link wird mit dem <a>-Tag definiert, er besitzt ein anfangs-und ein end-Tag. Zwingend notwendig ist das Attribut "href", wenn man auf ein anderes Dokument verweisen will.

01 <a href="http://www.html-einfach.de/">Link zu html-einfach</a>
02 
03 <a href="http://www.html-einfach.de/" target="_blank" >Link zu html-einfach.de.de</a>
04 
05 <a href="eidechse.html">Eidechsen</a>
06 
07 <a href="tiere/eidechse.html">Eidechsen</a>

Erklärung:
01 Externer Link zur Seite html-einfach
03 Externer Link zur Seite html-einfach, wird in einem neuen Fenster geöffnet
05 Interner Link zur Seite eidechse.html im selben Verzeichnis (Ordner)
07 Interner Link zur Seite eidechse im Unterordner tiere

Hinweis: Mit Hilfe von Stylesheets ist es möglich, das Unterstreichen von Links, oder das Umrahmen von Grafiken zu unterbinden.
01 *a {	text-decoration:underline;}
02 *a {	text-decoration:none;}
Erklärung:
01 Alle Links werden unterstrichen
02 Alle Links werden nicht unterstrichen

Anker setzen



Es ist möglich, mitten in einem HTML Dokument ein Anker zu setzen und mit einem Link direkt dorthin zu springen.
01 <a href="#anker">Zum Anker</a>
02 
03 <a name="anker">Hier wird hingesprungen</a> 
Erklärung:
01 Der Anker wird definiert (/andereseite.html#anker geht auch)
02 Der Zielpunkt wird definiert Anker nach oben

Grafik als Verweis

Grafiken als Verweise zu definieren ist oft nützlich, z.B. bei einem Button. Mit Hilfe der Schachtelung der beiden Tags (img-Tag + a-Tag) kann man eine Grafik zum Link machen. Normale Links werden standardmäßig unterstrichen, um Grafiken wird ein Rahmen gelegt. Um diesen zu vermeiden muss das Attribut border="0" in den img-Tag eingefügt werden.
01 <a href="http://www.html-einfach.de/"><img src="bild.jpg" alt="das ist ein bild"></a> 
zurück







nach oben