Mit HTML Links einfügen

Ob die Links zu Webseiten oder zu Dateien führen, spielt im Grunde keine große Rolle. Zum Einfügen eines Links verwendet man den A-Tag, der von Anchor (Anker) abgeleitet wurde. Innerhalb des A-Tags muss außerdem angegeben werden, wohin der Link führen soll, z.B. zu einer Internetadresse oder Datei. Außerdem benötigt man ein Element, der als Schaltfläche dient, z.B. Text oder Bild. Nachfolgend ein Beispielcode, um mit HTML Links einzufügen.

Mit dem Befehl a wird angegeben, dass hier ein Verweis eingefügt werden soll. Innerhalb des A-Tags wird mit href="" innerhalb der Anführungszeichen angegeben, wohin der Link führen soll (Linkziel). Das Element, das als Schaltfläche dienen soll (worauf geklickt wird), in diesem Beispiel ist das der Text "Webseite", wird vom A-Tag über den Start- und End-Tag umschlossen. Der Text, worauf geklickt wird, nennt man auch Linktext. In diesem Beispiel wurde eine absoluter Link bzw. ein Link mit einer absoluten Zieladresse erzeugt, indem man diese komplett (beginnend mit http...) angegeben hat. Die Angabe der absoluten Zieladresse ist vor allem bei Hyperlinks auf fremde Webseiten notwendig.

Hyperlinks können nicht nur auf fremde Seiten, sondern auf Seiten innerhalb der eigenen Internetpräsenz gesetzt werden. In solchen Fällen muss die komplette Zieladresse in der Regel nicht angegeben werden. Es reicht aus, wenn man lediglich den Pfad zu der Datei, Webseite etc. angibt. Wenn man z.B. auf eine eigene Webseite mit dem Namen meine-andere-seite.html verlinken möchte, dann kann der Pfad auch relativ angegeben werden. Der HTML-Code kann dann wie folgt angegeben werden.

Beim Setzen von relativen Zieladressen muss man jedoch beachten, dass die Datei, Webseite etc. innerhalb des Speicherplatzes auf dem Server erreichbar sein muss und evtl. vorhandene Ordner berücksichtigt werden müssen. Wenn sich die Webseite z.B. in einem anderen Ordner befindet, dann muss der Ordnername relativ zur aktuellen Webseite entsprechend angegeben werden. Wenn man z.B. auf die Seite meine-andere-seite.html verlinken möchte, die sich relativ von der aktuellen Seite aus im Unterordner anderer-ordner befindet, dann sähe der HTML-Code wie folgt aus.

Beim Setzen von Links auf E-Mailadressen wird die Zieladresse innerhalb von href="..." über mailto..., gefolgt von einem Doppelpunkt und der E-Mailadresse, angegeben. Der übrige Code ist wie beim Setzen von absoluten Links. Ein Beispiel:

Beim Setzen von Hyperlinks auf Dateien verfährt man im Grunde genauso wie beim Setzen von Links auf Webseiten. Man gibt innerhalb von href="..." die absolute oder relative Zieladresse zu der Datei an, auf die verlinkt werden soll. Als Element, worauf geklickt wird, kann man ebenfalls Texte oder Bilder verwenden. Auf Dateien wird häufig verlinkt, wenn z.B. PDF-Dokumente bereitgestellt werden. Wenn die Benutzer einen Dateilink öffnen, dann wird die Datei automatisch mit dem Programm geöffnet, das beim Benutzer als Standard für das Dateiformat eingestellt ist.

Als Element, worauf geklickt wird, kann nicht nur Text verwendet werden, sondern auch Bilder, die in solchen Fällen als grafische Schaltflächen dienen. Der HTML-Code wird in solchen Fällen dahingehend geändert, dass statt des Linktextes das Bild über den IMG-Tag eingebunden wird. Auch hierbei muss bei der relativen Pfadangabe auf die korrekte Adresse des Bildes geachtet werden. Wenn z.B. als grafische Schaltfläche das Bild button.jpg verwendet werden soll, das sich relativ von der aktuellen Seite gesehen im Unterordner bilder befindet, dann sähe der HTML-Code wie folgt aus.

Wie eigentlich bei allen Bildern, die man auf Webseiten einfügt, sollte man auch bei der Verwendung als Schaltfläche darauf achten, als Attribut einen Alternativtext im IMG-Tag über alt="..." einzufügen. Hierfür wird der IMG-Tag wie folgt erweitert.

Weitere Bildattribute wie z.B. Höhe oder Breite des Bildes können und sollten natürlich ebenfalls eingefügt werden.

Neben diesen kann man außerdem interne Links einfügen. Hierbei hat man die Möglichkeit, die Links nicht nur auf eine Webseite zu setzen, sondern auf eine bestimmte Stelle innerhalb einer Seite. Das ist vor allem bei sehr langen Webseiten sinnvoll.