Html-Tags - Dateien speichern, Links und Linkziele definieren

Beim Speichern der Dateien für eine Website muß besonders acht gegeben werden. Nicht selten passiert es, dass Bilder nicht angezeigt werden, weil der Speicherort nicht mit der Angabe in der jeweiligen Webseite übereinstimmt. Die Verknüpfung der Dateien untereinander mit relativen Pfadangaben erfordert am Anfang etwas Übung.

Vor allen Dingen muß auf Groß- und Kleinschreibung der Dateinamen geachtet werden. Auf einem Windowssystem spielt die Groß- und Kleinschreibung keine Rolle. Eine Webseite wird dort auch angezeigt wenn der Dateiname in der aufrufenden Webseite beispielsweise am Anfang groß geschrieben ist im html-Quelltext der Webseite aber alles klein geschrieben wurde. Die wenigsten Webserver laufen unter Windows sondern unter Unix und dort spielt dann die Groß- und Kleinschreibung eine Rolle. Gerade Anfänger im Webdesign finden diese Fehler erst nach langem Suchen, weil auf dem heimischen PC alles bestens funktioniert. Wir empfehlen deshalb alle Dateinamen komplett klein zu schreiben.

Html-Befehl Bedeutung
Relative Pfadangabe innerhalb einer website
<a href="../zu-verlinkende-datei.htm"> Linkziel </a > Die zu verlinkende Datei befindet sich eine Ebene höher als die Datei in der sich dieser Link befindet.
<a href="../../zu-verlinkende-datei.htm"> Linkziel </a > Die zu verlinkende Datei befindet sich zwei Ebenen höher.
lokale Anker - Sprungziele innerhalb einer Webseite
<a name="top" > nach oben</a > Sprungziel oben
wenn innerhalb der Unterseite weit nach unten gescrollt werden muß, empfiehlt es sich einen oder mehrere "nach oben" Links einzubauen

Das ist der, die Textmarke aufrufende, Link

<a href="#Punkt 1" >Hier ist der Link zu Punkt 1</a >
Hier ist der Link zu Punkt 1
Auf diese Art können Sprungziele innerhalb der gleichen Unterseite gezielt definiert und aufgerufen werden. Beim anklicken des Links erscheint das Sprungziel (Textmarke) an der Oberkannte des Browserfensters, vorausgesetzt es befindet sich noch genügend Text darunter.

Das ist die aufgerufene Textmarke

<a name="Punkt 1" ><h3 >Punkt 1</h3 ></a >

Punkt 1

das ist die Textmarke in der gleichen Webseite.

Im Gegensatz zu normalen Links, bei denen einfach an den Anfang der aufgerufenen Datei gesprungen wird, müssen Textmarken, die angesprungen werden sollen über das Attribut "name" im a-Tag der Textmarke direkt definiert werden, wie in der linken Spalte angegeben.

Der im a-Tag vergebene name der Textmarke wird mit einer vorangestellten Raute in den aufrufenden a-tag geschrieben. Siehe in der Zeile darüber.
Der name der Textmarke muß dabei nicht mit dem Linktext übereinstimmen. Name der Textmarke und der Zusatz im aufrufenden Link nach der Raute müssen aber identisch sein.

<a href="#Punkt 1" target="_blank" >hier ist der Link zu Punkt 1 in einem neuen Fenster</a > hier ist der Link zu Punkt 1 in einem neuen Fenster
öffnet diese Webseite in einem neuen Fenster und springt direkt zur definierten Textmarke "Punkt 1"
<a href="#top" >nach oben</a > nach oben
Ankerpunkt in einer anderen Webseite - die Zieldatei

Die Funktionsweise ist die gleiche wie die mit Punkt 1 beschriebene, nur wird als Ziel vor den Namen der anvisierten Textmarke, der Dateiname geschrieben, in dem sich die Textmarke befindet.

<a name="Ankerpunkt in einer anderen Datei" > Das ist der Ankerpunkt </a >

Das ist der Ankerpunkt

<a href="Dateiname.Extension#Name des Ankerpunktes in der anderen Datei (z.B. Überschrift)" >zur Datei </a > zur Datei
Linkliste
<ul >
<li >
<a href="punkt_1.htm">Punkt 1 ohne Srpungziel</a >
</li >
</ul >
Linkliste Listen aller Art lassen sich sehr gut als Linklisten, beispielsweise für Navigationen einsetzen.
<a href="file:///c/eigene_dateien/Dateineme" >absoluter Link von eigenem PC - für normale Homepage nicht einsetzbar</a > absoluter Link von eigenem PC - für normale Homepage nicht einsetzbar
Imagelink - Button

<a href="Dateiname" ><img src="relative Pfadangabe" border="0" alt="Linktext=Bildbeschreibung"></a >
Imagelink ohne Rand

<a href="Dateiname" ><img src="relative Pfadangabe" alt="Linktext=Bildbeschreibung"></a >
Imagelink mit Rand

Linktext=Bildbeschreibung
Imagelink ohne Rand

Linktext=Bildbeschreibung
Imagelink mit Rand

Bei Verwendung von Bildern für grafische Button ist darauf zu achten, dass das alt-Attribut ausgefüllt wird, da es von den Suchmaschinen als Linktext erkannt wird.

im img -Tag Border auf "0" setzen dann erhält der Imagelink keinen Rand
<a href="Dateiname" tabindex="4" >zum Testen die tabulator.htm aufrufen</a > zum Testen die tabulator.htm aufrufen
sinnvoller Einsatz des tabindex bei der Gestaltung eines barrierefreien Webdesign
<a href="mailto:name@domain.de" >meine E-Mail</a > meine E-Mail

das auf dem Computer installierte E-Mail-Programm startet, wobei die Empfängeradresse schon eingetragen ist.

<img src="Speicherpfad des Bildes relativ zum Dokument angeben" alt="Bild Schmetterling einfügen" > Bild Schmetterling einfügen
Bild in ein Dokument einfügen
./ bei <a href >Link</a > in den untergeordneten Ordner gehen (eine Ebene tiefer)
<img src="../../"> in den zweiten übergeordneten Ordner gehen um das Bild anzugeigen
\ Backslash
/ Slash
<body alink="red" vlink="black" link="green" > Linkfarben bitte nicht mehr so anwenden, weil veraltet, sondern css-Formatierung benutzen