Neueste Web-Entwicklung Tutorials

HTML-Links


Links sind in fast allen Web-Seiten gefunden. Links ermöglichen es Benutzern, ihre Art und Weise von Seite zu Seite klicken.


HTML-Links Beschreibung

ein Hyperlink oder einfach ein Link, ist ein Verweis auf Daten, die die Leser direkt folgen können entweder durch Anklicken, tippt oder schweben.

Ein Hyperlink auf ein ganzes Dokument oder auf ein bestimmtes Element in einem Dokument. Hypertext ist Text mit Hyperlinks. Der Text, der aus verlinkt wird, Anchor-Text genannt.

Ein Software-System, das für die Anzeige und die Schaffung von Hypertext verwendet wird, ein Hypertext-System, und einen Hyperlink zu erstellen, ist zu Hyperlink (oder einfach zu verbinden). Ein Benutzer folgender Hyperlinks wird gesagt, navigieren oder den Hypertext zu durchsuchen.


HTML Links - Hyperlinks

HTML-Links sind Hyperlinks.

Ein Hyperlink ist ein Text oder ein Bild, das Sie anklicken können, und Sprung zu einem anderen Dokument.


HTML Links - Syntax

In HTML - Links sind mit dem definierten <a> tag:

<a href=" url "> link text </a>

Beispiel

<a href="http://www.w3ii.com/html/default.html">Visit our HTML tutorial</a>
Versuch es selber "

Das href Attribut gibt die Zieladresse (http://www.w3ii.com/html/default.html)

Der Link - Text ist der sichtbare Teil (Visit our HTML tutorial) Sie (Visit our HTML tutorial) - (Visit our HTML tutorial) .

Ein Klick auf den Link-Text, werden Sie an die angegebene Adresse senden.

Der Link-Text nicht über Text. Es kann ein HTML-Bild oder jedes anderes HTML-Element sein.

Ohne einen Schrägstrich auf Unterordner Adressen, können Sie zwei Anfragen an den Server generieren. Viele Server werden automatisch Slash an die Adresse hinzufügen und dann eine neue Anfrage erstellen.


lokale Links

Das obige Beispiel verwendet , um eine absolute URL (A full web address) .

Eine lokale Verbindung (link to the same web site) wird mit einer relativen URL angegeben (without http://www.... ) .

Beispiel

<a href="html_images.asp">HTML Images</a>
Versuch es selber "

HTML Links - Farben

Wenn Sie die Maus über einen Link bewegen, werden zwei Dinge normalerweise passieren:

  • Der Mauszeiger verwandelt sich in ein wenig Hand
  • Die Farbe des Verbindungselements ändert

Standardmäßig wird ein Link wie folgt angezeigt (in all browsers) :

  • Ein unvisited Link ist unterstrichen und blau
  • Ein besuchter Link ist unterstrichen und lila
  • Eine aktive Verbindung ist unterstrichen, und rot

Sie können die Standardfarben ändern, von Arten mit:

Beispiel

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>
Versuch es selber "

HTML Links - Das target

Das target gibt an, wo das verknüpfte Dokument zu öffnen.

In diesem Beispiel wird das verknüpfte Dokument in einem neuen Browserfenster öffnen oder in einem neuen Tab:

Beispiel

<a href="http://www.w3ii.com/" target="_blank">Visit w3ii!</a>
Versuch es selber "
Zielwert Beschreibung
_blank Öffnet das verknüpfte Dokument in einem neuen Fenster oder Tab
_self Öffnet das verknüpfte Dokument im selben Rahmen wie es angeklickt wurde (this is default)
_parent Öffnet das verknüpfte Dokument in dem übergeordneten Rahmen
_top Öffnet das verknüpfte Dokument in dem gesamten Körper des Fensters
framename Öffnet das verknüpfte Dokument in einem benannten Rahmen

Wenn Ihre Webseite in einem Rahmen gesperrt ist, können Sie target="_top" aus dem Rahmen zu brechen:

Beispiel

<a href="http://www.w3ii.com/html/default.html" target="_top">HTML5 tutorial!</a>
Versuch es selber "

HTML Links - Bild als Link zu

Es ist üblich, Bilder als Links zu verwenden:

Beispiel

<a href="default.html">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
Versuch es selber "

Rand: 0 hinzugefügt wird IE9 zu verhindern (and earlier) von einem Rand um das Bild anzuzeigen.


HTML Links - Erstellen Sie ein Lesezeichen

HTML Lesezeichen verwendet werden Leser auf bestimmte Teile einer Webseite springen zu lassen.

Lesezeichen sind praktisch, wenn Ihre Website langen Seiten.

Um ein Lesezeichen zu machen, müssen Sie zunächst das Lesezeichen erstellen und dann einen Link, um es hinzuzufügen.

Wenn der Link angeklickt wird, wird die Seite mit dem Lesezeichen auf den Ort bewegen.

Beispiel

Zuerst ein Lesezeichen mit dem erstellen id - Attribute:

<h2 id="tips">Useful Tips Section</h2>

Dann einen Link zu dem Lesezeichen hinzuzufügen ("Useful Tips Section") , von innerhalb der gleichen Seite:

<a href="#tips">Visit the Useful Tips Section</a>

Oder einen Link zu dem Lesezeichen hinzuzufügen ("Useful Tips Section") , von einer anderen Seite:

Beispiel

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
Versuch es selber "

Kapitelzusammenfassung

  • Verwenden Sie die HTML <a> Element eine Verbindung zu definieren ,
  • Verwenden Sie das HTML href Attribut die Link - Adresse zu definieren ,
  • Verwenden Sie das HTML - target zu definieren , wo das verknüpfte Dokument öffnen
  • Verwenden Sie das HTML <img> Element (inside <a> ) ein Bild als Link zu verwenden
  • Verwenden , um das HTML - id - Attribut ( id=" value ") zu definieren , von Lesezeichen in einer Seite
  • Verwenden Sie das HTML - href - Attribut ( href="# value ") auf das Lesezeichen verlinken

Testen Sie sich mit Übungen!

Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »


HTML Link-Tags

Etikett Beschreibung
<a> Definiert einen Hyperlink