Wie du einen HTML-Link mit a href einfügst!

Wie du einen HTML-Link mit a href einfügst!

Du möchtest gerne einen HTML-Link in deine Webseite einfügen? Das ist ganz einfach! Mit dem HTML-Tag a href kannst du einen Link-Text erstellen und ihn mit </a> schließen.

So einfach kannst du also einen HTML-Link einfügen und Inhalte verlinken:

  • Der HTML-Code lautet: <a href="Link-Ziel">Link-Text</a>.
  • Ein Beispiel für einen Link zur Webseite www.schulhomepage.de ist: <a href="https://www.schulhomepage.de/">Schulhomepage.de</a>.
  • Du möchtest eine E-Mail-Adresse verlinken? Das geht mit dem HTML-Link mailto: <a href="mailto:kontakt­@website.de">­kontakt@website.de</a>.
  • Die Syntax für a href lautet: <a href="URL">. Das Tag a wird um das href Attribut erweitert, um einen Link zu erstellen.
  • Du möchtest einen HTML-Anker-Tag erstellen?
    • Zuerst erstellst du den Anker (Anchor): <div id="Anker"></div>.
    • Dann verlinkst du zu dem Anker: <a href="#Anker">Link zum Anker</a>.

Super einfach, oder? Du kannst auch ein Bild mit a href verlinken. Dafür verwendest du den HTML img Link: <a href="bild-link.html"><img src="bild.jpg"></a>. So verlinkst du also ein Bild mit a href.

Wenn du möchtest, dass sich der Link in einem neuen Tab öffnet, kannst du das mit target="_blank" machen: <a href="http://­www.schulhomepage.de/" ­target="_blank"­>Schulhomepage.de</a>.

Du möchtest deinen HTML Link auch noch gestalten? Du kannst ihn mit einer CSS-Datei beliebig stylen. Jede Webseite hat eine CSS-Datei, in der das Erscheinungsbild der HTML-Elemente angepasst werden kann.

Du möchtest die Link-Farbe ändern oder den Link farblich gestalten? Kein Problem! Du kannst die Link-Farbe mit CSS anpassen. Standardmäßig haben Links in den meisten Browsern folgende Farben:

  • Nicht besuchter Link: blau
  • Besuchter Link: lila
  • Aktiver (gerade geklickter) Link: rot

Um die Link-Farben anzupassen, integrierst du ein CSS Stylesheet in dein HTML-Dokument. Ein Beispiel-Code für die Integration einer CSS-Stylesheet-Datei in dein HTML-Dokument lautet:

<head>
<link rel="stylesheet" href="style.css">
</head>

In der CSS-Datei kannst du deinen Link beliebig stylen. Hier sind ein paar Beispiele für das a Element:

a {
  color: red;
  text-decoration: underline;
} // Links haben die Farbe rot und sind unterstrichen

a:visited {
  color: green;
  text-decoration: underline;
} // Besuchte Links sind unterstrichen und erhalten die Farbe grün

a:hover {
  color: blue;
  text-decoration: none;
} // Links, auf die die Maus zeigt, erhalten die Farbe blau und haben keine Unterstreichung

a:active {
  color: black;
  background-color: lightgreen;
} // Links, die gerade angeklickt werden, erhalten die Farbe schwarz und als Hintergrundfarbe hellgrün

Du möchtest weitere Beispiele für die Gestaltung von HTML Links mit CSS Style? Kein Problem, es gibt viele Möglichkeiten, deinen Link mit CSS zu stylen!

LESEN  Das FES 990 Wave Premium Full Suspension Step Thru eBike

Wenn du nicht selbst einen HTML Link erstellen möchtest, kannst du zur Vereinfachung und um Fehler zu vermeiden einen HTML Link Generator verwenden. Ein HTML Link Generator erstellt automatisch den HTML Code für deinen Link. Du gibst einfach den zu verlinkenden Text und die Ziel-URL des Links ein und der Generator erstellt den Code. So einfach ist das!

Wie verlinkst du ein lokales Verzeichnis auf deinem Computer? Ganz einfach! Du setzt den Verweis mit dem HTML-Code:

<a href="file://C:/">Link zur Festplatte C</a>

Bitte beachte, dass dieser Link nur für lokale Verzeichnisse auf deinem Computer funktioniert. Ein Link zu einem Verzeichnis einer Website funktioniert anders.

Was ist der Unterschied zwischen absoluten und relativen Pfaden? Wenn du Links innerhalb deiner Website setzt, musst du nicht immer die volle Link-Adresse mit der Domain angeben.

Bei einem absoluten Pfad mit Domain gibst du die komplette URL-Adresse an:

<a href="https://www.schulhomepage.de/seite1.html">Beispiel-Link</a>

Bei einem relativen Pfad ohne Domain kannst du die Domain einfach weglassen und stattdessen nur ein “/” schreiben. Die Kurzform sieht dann so aus:

<a href="/seite1.html">Beispiel-Link</a>

Wichtig: Dies funktioniert nur für interne Links innerhalb deiner Website mit derselben Domain! Es kann bei einigen Websites auch Probleme geben, daher solltest du das unbedingt vorher ausprobieren, bevor du alle internen Links so setzt.

Wie verlinkst du ein Verzeichnis oder einen Ordner? Du legst den Link nicht zur Indexseite (z. B. index.html), sondern nur zum Verzeichnis selbst. Ein Beispiel lautet:

<a href="/verzeichnis/">Link zum Verzeichnis</a>

Wichtig ist bei dem Link, dass du immer entweder immer ein “/” am Ende des Verzeichnisses setzt oder nie. Ob du das “/” immer setzt oder nicht, ist egal. Du musst es nur immer gleich machen, damit Suchmaschinen die Verzeichnisse nicht doppelt in ihren Suchergebnissen führen.

LESEN  “Crispr-Technik: Die Zukunft der Genetik”

Mit oder ohne “www”? Du musst dich entscheiden, ob du deine Website immer mit “www” aufrufen möchtest oder ohne. Du kannst eine Weiterleitung einrichten, damit du deine Website auch ohne “www” aufrufen kannst. Die meisten Besucher verwenden das “www” vor der Internetadresse nicht und ersparen sich das Tippen der drei Buchstaben.

Der Aufbau einer URL-Adresse sieht folgendermaßen aus:

  • Protokoll: z. B. https:// oder ftp://
  • Domain oder IP-Adresse: z. B. schulhomepage.de oder 192.158.1.38
  • Dateipfad: /verzeichnis/datei.html. Der Dateipfad kann aus beliebig vielen Ebenen bestehen.

Abschließend solltest du immer deinen Code mit einem Link-Validator überprüfen, um eventuelle Fehler zu finden. Es gibt verschiedene Tools, mit denen du deinen Code auf Fehler überprüfen kannst. Eines der besten Tools ist der Link-Checker des W3C-Konsortiums. Hier kannst du deine Verknüpfungen, Anker-Links, Dateiverknüpfungen und vieles mehr überprüfen.

Das war’s! Jetzt weißt du, wie du einen HTML-Link mit a href einfügst und richtig verlinkst. Viel Spaß beim Verlinken deiner Inhalte!

Hast du noch weitere Fragen? Hier sind ein paar häufig gestellte Fragen:

  • Was ist ein HTML-Link?
    Ein HTML-Link ist eine “Verlinkung” von einer Webseite auf eine andere Webseite. Sobald ein Benutzer hierauf klickt, wird die neue Webseite aufgerufen.

  • Wie verlinke ich in HTML?
    Um in HTML zu verlinken, verwendest du den HTML-Code <a href="Link-Ziel">Link-Text</a>.

  • Wie verlinke ich auf eine Website?
    Um auf eine Website zu verlinken, musst du einen HTML-Link einfügen. Der Code lautet <a href="Link-Ziel">Link-Text</a>.

  • Wie verweise ich auf ein lokales Verzeichnis?
    Um auf ein lokales Verzeichnis zu verweisen, verwendest du den Verweis file://C:/.

  • Wie füge ich einen Link zu einem neuen Tab ein?
    Einen Link zu einem neuen Tab fügst du mit target="_blank" ein. Der Code lautet <a href="Link-Ziel" target="_blank">Link-Text</a>.

  • Was ist ein externer Link?
    Ein externer Link ist ein Verweis von einer Webseite auf eine außerhalb der eigenen Domain liegende Seite.

  • Was ist a href?
    a href ist ein Teil des HTML-Codes, der zur Verlinkung von Webseiten verwendet wird.

  • Wie verlinke ich eine E-Mail-Adresse?
    Die Verlinkung einer E-Mail-Adresse erfolgt mit dem HTML-Code mailto. Beispiel: <a href="mailto:dange@schulhomepage.de">dange@schulhomepage.de</a>.

  • Was ist ein Deep Link?
    Ein Deep Link ist ein Hyperlink direkt zu einer Unterseite einer Website anstatt zur Startseite.

  • Was ist ein Surface Link?
    Ein Surface Link ist ein Hyperlink zur Startseite einer Website anstatt zu einer Unterseite.

LESEN  Nicht nur Staffel 2: “The Last Of Us”-Macher planen schon Staffel 3 – und die Vorlage ist schuld

Probier es doch gleich mal aus und füge einen HTML-Link zu Schulhomepage.de ein:

<a href="https://www.schulhomepage.de">Schulhomepage.de</a>

Viel Spaß dabei!

Anja Zimmermann