W3Docs

Darstellung

Deutsch

HTML-Links ​

Websites enthalten verschiedene Arten von Links, die Sie direkt zu anderen Seiten führen oder es Ihnen ermöglichen, zu einem bestimmten Teil der Seite zu navigieren. Links in HTML werden Hyperlinks genannt. Sie werden mit dem Tag <a> definiert.

Hyperlinks werden auf eine Phrase, ein Wort, ein Bild oder jedes beliebige HTML-Element angewendet.

Die Standardfarbe von Links in HTML ist:

  • nicht besuchte Links: unterstrichen und blau
  • besuchte Links: unterstrichen und lila
  • aktive Links: unterstrichen und rot

Dies ist der Standardstil von Links, aber Sie können mit CSS-Stilen. die Unterstreichung entfernen oder die Farbe der Links ändern

Syntax ​

Das Tag <a> kommt paarweise vor, das öffnende <a> gibt an, wo der Link beginnen soll, und das schließende </a> zeigt an, wo der Link endet.

Um einen Hyperlink zu erstellen, sollten Sie das Tag <a> und das href-Attribut verwenden, dessen Wert die URL oder der Ort ist, auf den der Link verweist.

HTML-Links

html
<a href="url">your text</a>.

Beispiel für das HTML-<a>-Tag mit dem href-Attribut: ​

Beispiel für HTML-Links|W3Docs.com|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Link example</h2>
    <a href="https://www.w3docs.com/">W3Docs.com</a>
  </body>
</html>
Try it Yourself »

Ergebnis ​

hyperlink

Im obigen Beispiel haben wir <h2> verwendet, um Zwischenüberschriften zu definieren, und das Tag <a>, um Links zu erstellen. Zwischen den Tags <a> und </a> steht W3Docs.com. Klicken Sie darauf, und Sie werden zur Startseite unserer Website weitergeleitet.

Zielattribut ​

Um einen Link in einer neuen Seite zu öffnen, müssen Sie target="_blank" zu Ihrem Code hinzufügen. Das target-Attribut legt fest, wo genau die verlinkte Seite geöffnet werden soll. Mit target="_blank" wird die verlinkte Seite in einem neuen Fenster oder in einem neuen Tab geöffnet.

HTML-Links

html
<a href="https://www.w3docs.com/" target="_blank" rel="noopener noreferrer">W3Docs.com</a>

ID-Attribut ​

Um zu einem bestimmten Teil der Seite zu navigieren, verwenden Sie das id-Attribut.

So gehen Sie dabei vor:

  1. Verwenden Sie das Attribut id, um dem Teil der Seite einen Namen zu geben, zu dem ein Benutzer nach dem Klicken auf den Link weitergeleitet werden soll. Der Wert des Attributs kann ein Wort oder eine Phrase sein, die diesen Teil beschreibt (wenn Sie eine Phrase verwenden, dürfen keine Leerzeichen enthalten sein – verwenden Sie stattdessen Unterstriche.)
    Bsp. <h2 id="jump">Link example with id attribute</h2>. Wir haben das id-Attribut mit dem Namen "jump" verwendet.

  2. Erstellen Sie einen Hyperlink mit der id des Linkziels, dem ein Hash (#) vorangestellt ist
    Bsp. <a href="#jump">When you click on this link, you will be redirected to the part of the page with "jump" id</a>.

Sehen wir uns nun an, wie das im HTML-Code aussieht. Scrollen Sie im folgenden Beispiel nach unten zum Link am unteren Rand, klicken Sie auf den Link, und Sie gelangen wieder zurück nach oben.

Beispiel für das HTML-<a>-Tag mit dem id-Attribut: ​

Beispiel für den Link mit einem id-Attribut

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2 id="jump">Link example with id attribute</h2>
    <p>
      Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo.
    </p>
    <p>
      Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
    </p>
    <p>
      Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
    </p>
    <p>
      Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus.
    </p>
    <p>
      Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem.
    </p>
    <p>
      Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor.
    </p>
    <p>
      Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    </p>
    <a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id</a>
  </body>
</html>
Try it Yourself »

Um einen Hyperlink auf ein Bild anzuwenden, müssen Sie das Bild einfach in das <a>-Tag setzen. Dies geschieht mit dem Tag <img>, das einige erforderliche Attribute haben sollte:

  1. src - die Quelle des Bildes
  2. alt - alternativer Text für das Bild
  3. width - Breite des Bildes
  4. height - Höhe des Bildes

Hyperlink auf ein Bild angewendet|Beispiel für HTML-Links|W3Docs

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <a href="https://www.w3docs.com/">
    <img src="https://de.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" />
    </a>
  </body>
</html>
Try it Yourself »

HTML-Bilder werden im nächsten Kapitel ausführlich behandelt.

Linktitel ​

Das title-Attribut wird verwendet, um zusätzliche Informationen über ein Element anzugeben. Diese Informationen werden häufig als Tooltip-Text angezeigt, wenn Sie mit der Maus über das Element fahren.

Beispiel für Linktitel: ​

Beispiel für Linktitel

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Link Title Example</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>The <span class="attribute">title</span>  attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.</p>
    <a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML</a>
  </body>
</html>
Try it Yourself »

Externe Pfade ​

Sie können externe Seiten mit einer URL oder einem Pfad referenzieren, der der aktuellen Webseite entspricht. Das folgende Beispiel zeigt, wie Sie dies tun können:

Beispiel für das HTML-<a>-Tag zum Verweisen auf eine externe Seite mit ihrer URL: ​

Beispiel für das HTML-<a>-Tag zum Verweisen auf eine externe Seite mit ihrer URL:

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>External paths</h1>
    <div>Example of referencing an external page with its URL</div>
    <p><a href="https://en.wikipedia.org/wiki/HTML">More about HTML</a></p>
  </body>
</html>
Try it Yourself »

Practice ​

What are the different attributes of the HTML <a> tag according to the article?

Finden Sie das nützlich?

Dual-run-Vorschau — vergleichen Sie mit den Symfony-Routen live.