HTML - Element: <a>
Mit dem <a>-Tag (a = Anker) definieren Sie einen Verweis (Link) zu einer anderen Seite.
Der <a>-Tag benötigt noch das Attribut href="" in diesem wird das Ziel (Pfad) des Verweises angegeben.
Optional können Sie noch das Attribut: target="_blank" einfügen, das das Ziel in einem neuen Fenster oder
Tab öffnet (je nach Browser-Einstellung).
Mit HTML5 darf ein a-Tag um ein oder mehrere Block-Elemente gelegt werden.
<!DOCTYPE html> <html> <head> <title>Externe Verweise mit absoluter Pfadangabe</title> </head> <body> <h1>Externe Verweise mit absoluter Pfadangabe</h1> <p> <a href="https://werner-zenk.de">werner-zenk.de</a> <br> <a href="https://werner-zenk.de" target="_blank">werner-zenk.de</a> (Neues Fenster oder Tab) </p> </body> </html>
Verweise mit relativer Pfadangabe
➤ Die Beispiele für die Pfadangabe gelten nicht nur für Link-Verweise, sondern auch für Bilder und andere Dateien.
Um von einer Datei zu einer anderen Datei zu gelangen geben Sie nur den Dateinamen an:
<a href="seite2.htm">Die zweite Seite</a>
Um von einer Datei zu einer anderen Datei die in einem übergeordneten Verzeichnis liegt zu gelangen, geben Sie "../" und den Dateinamen an:
<a href="../seite2.htm">Die zweite Seite</a>
Um von einer Datei zu einer anderen Datei die in einem untergeordneten Verzeichnis liegt zu gelangen,
geben Sie den Verzeichnisnamen "beispiel/" und den Dateinamen an:
<a href="beispiel/seite3.htm">Die dritte Seite</a>
Das folgende Beispiel geht zwei Verzeichnisse nach oben "../../" und dann ins Verzeichnis
beispiel/ zur Datei: seite4.htm.
<a href="../../beispiel/seite4.htm">Die vierte Seite</a>
Das folgende Beispiel geht zwei Verzeichnisse nach unten "beispiel/test/" und
dann zur Datei: seite5.htm.
<a href="beispiel/test/seite5.htm">Die fünfte Seite</a>
➤ Sämtliche Pfadangaben müssen zu einer existierenden Datei führen.
Verweise innerhalb der Datei
Um Verweise innerhalb der Datei zu erstellen, fügen Sie im Attribut href="" eine Raute (#)
und irgend einen Namen hinzu:
<a href="#ende">Zum Ende springen</a>Am Ziel des Verweises fügen Sie einen Anker ein:
<a id="ende">ENDE</a>
<!DOCTYPE html> <html> <head> <title>Interner Verweis innerhalb der Datei</title> </head> <body> <h1>Interner Verweis innerhalb der Datei</h1> <h2>Das Blindtextchen</h2> <p> <a href="#ende">Zum Ende springen</a> </p> <p> Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien. Es ist ein paradiesmatisches Land, in dem einem gebratene Satzteile in den Mund fliegen... (Viel Text!) <a id="ende">ENDE</a> </p> </body> </html>
Attribute
target - Zieladresse
Zieladresse des <a>-Elements in einem neuen Fenster, Tab oder Frame laden.
Mögliche Werte sind:
| _self | Lädt die Seite in das gleiche Tab, Browser-Fenster, iframe. |
| _blank | Lädt die Seite in ein neues Tab, Browser-Fenster. |
| _parent | Lädt die Seite in ein übergeordneten Browser-Fenster. |
| _top | Lädt die Seite in die oberste Ebene des Browser-Fensters |
| Fenster | Lädt die Seite in ein <iframe> mit dem Namen Fenster. |
<a href="beispiel/test/seite5.htm" target="_blank">Die fünfte Seite</a>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<code> Logische Auszeichnung
CSS - Nur gefüllte Tabellenzellen hervorheben
PHP - Prüfen ob ein Array leer ist