Wie setze ich interne und externe Links
mit Text, Bildern oder anderen Elementen?

Inhalte mit <a> verknüpfen
HTML <a>

HTMLBedeutung
<a>Anker Element zum Verknüpfen von Inhalten. Das Verknüpfen geschieht über das Attribut href="..." (Hypertext-Referenz). Das Element was mit <a>ELEMENT</a> getagt wurde fungiert dann als Link. Als Link können praktisch alle Elemente dienen.

Attribute für <a>

AttributBedeutung
alt=""Alternativ Text der den Inhalt beschreibt, z.B. für einen Blinden-Screenreader oder als Fallback-Text, wenn ein Medium nicht geladen werden kann.
title=""Mouseover Information mit Angaben zu dem Inhalt. Dies spielt auch bei Suchmaschinen eine Rolle. Wobei die Suchmaschine den Verbund aus Dateiname, TITLE, ALT und umgebenden Text interpretiert.
class=""CSS-Klassen für die Gestaltung mit CSS Eigenschaften. Klassen können mehrfach im Dokument verwendet werden. Ein Element kann außerdem mehrere Klassen haben. Alle Eigenschaften der auf ein Element angewendeten Klassen werden addiert. Es gilt dann immer die letzte Eigenschaft, sollten sich Eigenschaften überschreiben. Ein modularer Aufbau der Klassen und konsequente sowie verständliche Namensgebung ist empfohlen.
id=""ID für die eindeutige Identifizierung des Element. Mit ID sollten Funktionen wie z.B. Verlinkung oder Skripte gesteuert werden. Für das Styling sind CSS-Klassen empfohlen.
href=""Link (Hypertextreferenz) mit einem absoluten oder relativen Pfad zu einer URL (Domain, Internetadresse), Datei (.CSS, .JPG, .PDF etc,) oder mit einer ID gekennzeichneten Inhaltspunkt in dem HTML Dokument (Siehe Inhaltsverzeichnis bei Wikipedia.). Absolute Pfade sind vom Standort des eigenen Dokument unabhängig. Relative Pfade sind abhängig. Relative Pfade wie z. B. "css/mobile.css" sind oftmals flexibler (gehe in den Ordner css und lade dort mobile.css). Letztlich werden beide Pfadkonzepte benötigt. Das Protokoll der Pfade kann neben HTTP z.B. auch FTP://, MAILTO:// oder HTTPS:// sein.
target=""target="_blank" öffnet den Link in einem neuen Browser-Fenster. Das Attribut "_self" öffnet den Link im gleichen Browser-Fenster.

CSS :pseudoklassen für Links

CSSBedeutung
:activeAktiver Link, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist UND der Link geklickt wird, also währen die Maustaste gedrückt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}
:hoverVeränderung bei Kontakt mit dem Mauszeiger. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}. :HOVER kann im Gegensatz zu :LINK :VISITED und :ACTIVE auf jedes sichtbare Element angewendet werden. :HOVER spielt eine wichtige Rolle in der Benutzerfreundlichkeit. Mit :HOVER wird dem Nutzer eine Möglichkeit für Interaktion signalisiert.
:linkUnbesuchte Links, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.
:targetWählt alle diese Elemente, wenn Sie mittels eines Links auf ihre ID verlinkt und angeklickt sind. Klicke ich auf einen Link der auf eine ID verweist, dann erscheint diese ID als Anhang mit # in der Internetadresse oben im Browserfenster. Dieses so gewählte Element kann mit :TARGET gestaltet werden.
:visitedWählt besuchte Links aus, kann nur auf <a> angewendet werden. :VISITED wird erst aktiv, wenn auf <a> das Attribut HREF angewendet ist und der Link geklickt wurde. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.

Bilder als Link
HTML <a>

HTMLBedeutung
<a>Anker Element zum Verknüpfen von Inhalten. Das Verknüpfen geschieht über das Attribut href="..." (Hypertext-Referenz). Das Element was mit <a>ELEMENT</a> getagt wurde fungiert dann als Link. Als Link können praktisch alle Elemente dienen.

Attribute für <a>

AttributBedeutung
alt=""Alternativ Text der den Inhalt beschreibt, z.B. für einen Blinden-Screenreader oder als Fallback-Text, wenn ein Medium nicht geladen werden kann.
title=""Mouseover Information mit Angaben zu dem Inhalt. Dies spielt auch bei Suchmaschinen eine Rolle. Wobei die Suchmaschine den Verbund aus Dateiname, TITLE, ALT und umgebenden Text interpretiert.
class=""CSS-Klassen für die Gestaltung mit CSS Eigenschaften. Klassen können mehrfach im Dokument verwendet werden. Ein Element kann außerdem mehrere Klassen haben. Alle Eigenschaften der auf ein Element angewendeten Klassen werden addiert. Es gilt dann immer die letzte Eigenschaft, sollten sich Eigenschaften überschreiben. Ein modularer Aufbau der Klassen und konsequente sowie verständliche Namensgebung ist empfohlen.
id=""ID für die eindeutige Identifizierung des Element. Mit ID sollten Funktionen wie z.B. Verlinkung oder Skripte gesteuert werden. Für das Styling sind CSS-Klassen empfohlen.
href=""Link (Hypertextreferenz) mit einem absoluten oder relativen Pfad zu einer URL (Domain, Internetadresse), Datei (.CSS, .JPG, .PDF etc,) oder mit einer ID gekennzeichneten Inhaltspunkt in dem HTML Dokument (Siehe Inhaltsverzeichnis bei Wikipedia.). Absolute Pfade sind vom Standort des eigenen Dokument unabhängig. Relative Pfade sind abhängig. Relative Pfade wie z. B. "css/mobile.css" sind oftmals flexibler (gehe in den Ordner css und lade dort mobile.css). Letztlich werden beide Pfadkonzepte benötigt. Das Protokoll der Pfade kann neben HTTP z.B. auch FTP://, MAILTO:// oder HTTPS:// sein.
target=""target="_blank" öffnet den Link in einem neuen Browser-Fenster. Das Attribut "_self" öffnet den Link im gleichen Browser-Fenster.

CSS :pseudoklassen für Links

CSSBedeutung
:activeAktiver Link, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist UND der Link geklickt wird, also währen die Maustaste gedrückt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}
:hoverVeränderung bei Kontakt mit dem Mauszeiger. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}. :HOVER kann im Gegensatz zu :LINK :VISITED und :ACTIVE auf jedes sichtbare Element angewendet werden. :HOVER spielt eine wichtige Rolle in der Benutzerfreundlichkeit. Mit :HOVER wird dem Nutzer eine Möglichkeit für Interaktion signalisiert.
:linkUnbesuchte Links, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.
:targetWählt alle diese Elemente, wenn Sie mittels eines Links auf ihre ID verlinkt und angeklickt sind. Klicke ich auf einen Link der auf eine ID verweist, dann erscheint diese ID als Anhang mit # in der Internetadresse oben im Browserfenster. Dieses so gewählte Element kann mit :TARGET gestaltet werden.
:visitedWählt besuchte Links aus, kann nur auf <a> angewendet werden. :VISITED wird erst aktiv, wenn auf <a> das Attribut HREF angewendet ist und der Link geklickt wurde. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.

<a> geschickt selektieren
CSS :pseudoklassen für Links

CSSBedeutung
:activeAktiver Link, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist UND der Link geklickt wird, also währen die Maustaste gedrückt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}
:hoverVeränderung bei Kontakt mit dem Mauszeiger. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}. :HOVER kann im Gegensatz zu :LINK :VISITED und :ACTIVE auf jedes sichtbare Element angewendet werden. :HOVER spielt eine wichtige Rolle in der Benutzerfreundlichkeit. Mit :HOVER wird dem Nutzer eine Möglichkeit für Interaktion signalisiert.
:linkUnbesuchte Links, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.
:targetWählt alle diese Elemente, wenn Sie mittels eines Links auf ihre ID verlinkt und angeklickt sind. Klicke ich auf einen Link der auf eine ID verweist, dann erscheint diese ID als Anhang mit # in der Internetadresse oben im Browserfenster. Dieses so gewählte Element kann mit :TARGET gestaltet werden.
:visitedWählt besuchte Links aus, kann nur auf <a> angewendet werden. :VISITED wird erst aktiv, wenn auf <a> das Attribut HREF angewendet ist und der Link geklickt wurde. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.

HTML <a> Attribute selektieren

CSSBedeutung
[...] [title]Wählt alle Elemente mit diesem Atrribut aus. Z.B. alle Elemente mit title.
[...=...]Wählt alle Elemente mit diesem Atrribut und exakt diesem Wert aus. Z.B. alle Elemente mit title=Arnold: [title=Arnold].
[...~=...]Die tilde (~) wählt alle Elemente mit diesem Atrribut aus, wenn sie im Titel den Wert haben. Dabei müssen die Wörter durch Leerraum getrennt sein. Z.B. alle Elemente bei denen im Titel das Wort Arnold vorkommt: [title~=Arnold]. Praktisch bei CSS-Klassen.
[...|=...]Wählt alle Elemente aus die mit einem bestimmten Attribut und Wert beginnen. Der Wert kann außedem mit Bindestrich (-) weitere Inhalte haben. Z.B. mit dem titel Arnold-: [title|=Arnold]. Praktisch bei CSS-Klassen.
[...^=...]Wählt alle Elemente aus die mit einem bestimmten Attribut beginnen. Z.B. mit der ID "Table-": [id^="Table-"]. Praktisch bei CSS-Klassen.
[...$=...]Wählt alle Elemente aus, die auf ein bestimmtes Attribut enden. Z.B. hier alle CSS Klassen die auf retina enden: [class$=retina]. Praktisch bei CSS-Klassen.
[...*=...]Wählt alle Elemente aus die einen bestimmten Wert enthalten. Z.B. alle Mail-Links die auf @absks.de verweisen: a [href*= "@absks."].

Mit <a> eine interne ID verknüpfen
HTML <a>

HTMLBedeutung
<a>Anker Element zum Verknüpfen von Inhalten. Das Verknüpfen geschieht über das Attribut href="..." (Hypertext-Referenz). Das Element was mit <a>ELEMENT</a> getagt wurde fungiert dann als Link. Als Link können praktisch alle Elemente dienen.

Attribute für <a>

AttributBedeutung
alt=""Alternativ Text der den Inhalt beschreibt, z.B. für einen Blinden-Screenreader oder als Fallback-Text, wenn ein Medium nicht geladen werden kann.
title=""Mouseover Information mit Angaben zu dem Inhalt. Dies spielt auch bei Suchmaschinen eine Rolle. Wobei die Suchmaschine den Verbund aus Dateiname, TITLE, ALT und umgebenden Text interpretiert.
class=""CSS-Klassen für die Gestaltung mit CSS Eigenschaften. Klassen können mehrfach im Dokument verwendet werden. Ein Element kann außerdem mehrere Klassen haben. Alle Eigenschaften der auf ein Element angewendeten Klassen werden addiert. Es gilt dann immer die letzte Eigenschaft, sollten sich Eigenschaften überschreiben. Ein modularer Aufbau der Klassen und konsequente sowie verständliche Namensgebung ist empfohlen.
id=""ID für die eindeutige Identifizierung des Element. Mit ID sollten Funktionen wie z.B. Verlinkung oder Skripte gesteuert werden. Für das Styling sind CSS-Klassen empfohlen.
href=""Link (Hypertextreferenz) mit einem absoluten oder relativen Pfad zu einer URL (Domain, Internetadresse), Datei (.CSS, .JPG, .PDF etc,) oder mit einer ID gekennzeichneten Inhaltspunkt in dem HTML Dokument (Siehe Inhaltsverzeichnis bei Wikipedia.). Absolute Pfade sind vom Standort des eigenen Dokument unabhängig. Relative Pfade sind abhängig. Relative Pfade wie z. B. "css/mobile.css" sind oftmals flexibler (gehe in den Ordner css und lade dort mobile.css). Letztlich werden beide Pfadkonzepte benötigt. Das Protokoll der Pfade kann neben HTTP z.B. auch FTP://, MAILTO:// oder HTTPS:// sein.
target=""target="_blank" öffnet den Link in einem neuen Browser-Fenster. Das Attribut "_self" öffnet den Link im gleichen Browser-Fenster.

CSS :pseudoklassen für Links

CSSBedeutung
:activeAktiver Link, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist UND der Link geklickt wird, also währen die Maustaste gedrückt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}
:hoverVeränderung bei Kontakt mit dem Mauszeiger. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}. :HOVER kann im Gegensatz zu :LINK :VISITED und :ACTIVE auf jedes sichtbare Element angewendet werden. :HOVER spielt eine wichtige Rolle in der Benutzerfreundlichkeit. Mit :HOVER wird dem Nutzer eine Möglichkeit für Interaktion signalisiert.
:linkUnbesuchte Links, kann nur auf <a> angewendet werden. Wird erst aktiv, wenn bei <a&g das Attribut HREF gesetzt ist. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.
:targetWählt alle diese Elemente, wenn Sie mittels eines Links auf ihre ID verlinkt und angeklickt sind. Klicke ich auf einen Link der auf eine ID verweist, dann erscheint diese ID als Anhang mit # in der Internetadresse oben im Browserfenster. Dieses so gewählte Element kann mit :TARGET gestaltet werden.
:visitedWählt besuchte Links aus, kann nur auf <a> angewendet werden. :VISITED wird erst aktiv, wenn auf <a> das Attribut HREF angewendet ist und der Link geklickt wurde. Es gilt folgende Reihenfolge für die Gestaltung des Anker-Elements: <a> {...;} :LINK {...;} :VISITED {...;} :HOVER {...;} :ACTIVE {...;}.