So erstellen Sie einen Link in einem HTML-Dokument. Tag A - seine Syntax und Attribute

  1. URL oder "Adresse" einer Seite im Internet
  2. <A> -Tag und seine grundlegende Syntax
  3. Absoluter und relativer Bezug
  4. Relativer Link zum Verzeichnis höher als aktuell
  5. Attribute des <A> -Tags. So öffnen Sie ein Dokument über einen Verweis in einem neuen Fenster
  6. Titellink. Das title-Attribut für das <A> -Tag
  7. Attribut Hyperlink nofollow. Verbieten Sie die Übertragung des "Vertrauens" der Website durch Verweis
  8. Interner Link oder Anker im Dokument
  9. Verbindungsanker - Bild
  10. Fortsetzung

Verweise (oder Hyperlinks) durchdringen das Internet wie Blutgefäße. Wenn es keine Links gäbe, gäbe es kein Internet.

Wie man einen Link in einem HTML-Dokument erstellt und seine Attribute korrekt registriert, was eine URL ist und wie Suchmaschinen sich auf Links beziehen - in dieser nächsten Lektion für Anfänger, um HTML zu lernen.

URL oder "Adresse" einer Seite im Internet

Jedes HTML-Dokument im Web hat eine eigene „genaue Adresse“. Es heißt "URL", aus dem Englischen. URL - Uniform Resource Locator

Die URL-Struktur ist häufig in der Adressleiste des Browsers sichtbar. Es beinhaltet:

  1. Der Protokollname lautet http: // oder https: //
  2. Site Domain
  3. den Ordner oder Pfad zu dem Ordner, in dem sich dieses Dokument befindet,
  4. Dateiname (muss nicht immer sein).

Dank dieser „genauen Adresse“ wurde es möglich, aus dem Text eines anderen Dokuments auf dieses Dokument zu verweisen.

<A> -Tag und seine grundlegende Syntax

Ich hoffe, das Wort „Syntax“ macht Ihnen keine Angst mehr 🙂

<a href="http://domen-saita.ru/papka-na-servere/dokument.html"> Linktext </a>

Wie Sie sehen, muss nach dem Start des <A> -Tags ein obligatorisches href-Attribut vorhanden sein, das die Adresse des Dokuments angibt, zu dem Sie wechseln möchten.

Im <A> -Container-Tag selbst befindet sich ein Text (obwohl möglicherweise ein Bild vorhanden ist), der der Text des Links ist. Es wird auch " Anker " oder einfach - Anker genannt.

Absoluter und relativer Bezug

In den obigen Beispielen wurden absolute Referenzen verwendet. Diejenigen, die die vollständige URL des Dokuments enthalten.

In einigen Fällen enthält das href-Attribut keine vollständige URL mit dem Namen des Protokolls und der Domäne der Site. Befindet sich das Dokument, zu dem der Link führt, auf derselben Site, können Sie den relativen Link verwenden, der von der Stelle aus führt, an der sich das Dokument befindet.

Schema bei Anwendung der relativen Referenz

Beispiel: Ein Link aus dem Dokument first.html führt zur Datei second.html, die sich im Ordner news befindet.

Relativer Link zum Verzeichnis höher als aktuell

Code:

<a href="../first.html"> Dies ist ein relativer Link zu einer Datei auf Verzeichnisebene 1 </a>

Dieser Link führt zu der Datei first.html im "Eltern" -Verzeichnis, d.h. eine Ebene höher .

Die Kombination ../ gibt einen Ordner an, der eine Ebene über der angegebenen Position der Datei liegt, von der aus die Verknüpfung hergestellt wird.

Attribute des <A> -Tags. So öffnen Sie ein Dokument über einen Verweis in einem neuen Fenster

Damit das Dokument in einem neuen Browser-Tab geöffnet werden kann, müssen Sie das Attribut target = "_ blank" verwenden.

Damit das Dokument in einem neuen Browser-Tab geöffnet werden kann, müssen Sie das Attribut target = _ blank verwenden

Attribut link target = "_ blank"

Missbrauche es nicht. Mit diesem Attribut müssen keine internen Links zur Site erstellt werden. Benutzer werden durch das "Funkenfenster" verärgert.

Im Allgemeinen mit diesem Zielattribut - die ganze Geschichte. Es gibt noch eine Reihe von Bedeutungen, die heute jedoch nur noch selten verwendet werden.

Dies liegt daran, dass sie so konzipiert sind, dass sie mit der Site auf Frames zusammenarbeiten , die nicht mehr populär sind und mit dem Aufkommen von HTML5 der Vergangenheit angehören.

Titellink. Das title-Attribut für das <A> -Tag

Ein weiteres nützliches Attribut ist title = "Text, der erklärt, wohin dieser Link führt".

Syntax:

<a href="http://domen-saita.ru/papka-na-servere/dokument.html" title="der Popup-Hinweis"> Dies ist ein Hinweis-Link </a>

Wie Sie sehen, zeigt der Browser dies als QuickInfo an. Dabei werden die Suchmaschinen berücksichtigt.

Attributhinweis für den Linktitel

Attribut Hyperlink nofollow. Verbieten Sie die Übertragung des "Vertrauens" der Website durch Verweis

Es gibt ein mehrdeutiges Attribut für die Links rel = "nofollow"

Er teilt Suchmaschinen mit, dass das Linkdokument möglicherweise nicht vertrauenswürdig ist. Gleichzeitig werden Vertrauensindikatoren ("Vertrauensindikatoren") von der Quellwebsite nicht per Verweis an die Site übertragen.

Das Thema "Vertrauen" und Link-Rankings ist immer noch in Führung, aber wenn es kurz ist, hängt das "Schicksal" der Websites in den Suchmaschinen auch von der Anzahl der Links ab, die zu dieser Website führen. Je mehr von ihnen, desto mehr verbindliche Websites - desto mehr Glaubwürdigkeit der Website durch Verweis.

In einigen Fällen lohnt es sich, Verknüpfungen mit diesem Attribut zu überprüfen. Zum Beispiel, wenn Sie eine negative Bewertung zu einem Service abgeben.

<a href="http://bad-sait.ru/dokument.html" rel="nofollow"> fehlerhafte Website </a>

Interner Link oder Anker im Dokument

Bei großen Texten ist häufig die Installation von sogenannten "Ankern" in logischen Teilen des Dokuments erforderlich. Dann ist es an dieser Stelle, auf die Sie verweisen können.

Am einfachsten ist es, aus Hyperlinks, die zu diesen Ankern führen, ein lokales Inhaltsverzeichnis zu erstellen. Solche Inhaltsverzeichnisse stehen normalerweise ganz am Anfang des Artikels.

Beim Erstellen eines solchen Ankers wird das Attribut name anstelle des Attributs href verwendet.

Die Syntax zum Erstellen eines Ankers lautet:

<a name="top"> </a>

Wenn Sie einen Link erstellen, fügen Sie am Ende der URL durch das Zeichen # - den Namen des "Ankers" hinzu:

<p> <a href="#top"> Top </a> </ p>

Der Übergang erfolgt genau an dieser Stelle, d.h. Der Browser platziert diesen Ort im oberen sichtbaren Bereich.

In langen Dokumenten wird häufig ganz unten ein solcher Link „Oben“ eingefügt.

... durch die Welt der duftenden Körner gereist, fanden sie die höchste Qualität derjenigen, für die Afrika, Asien, Mittel- und Südamerika berühmt sind. Deshalb heute in den Kaffeehäusern der Marke Kaffeebohne Hier finden Sie die besten Kaffeesorten anerkannter Hersteller.

? Nach oben ?

Aus einem anderen Dokument können Sie diesen Ort auch verlassen, indem Sie am Ende der URL das Zeichen # name_ hinzufügen.

Der <a href="http://domen-saita.ru/dokument.html#top"> Linktext führt zu einem Anker "oben" in diesem Dokument. </a>

Verbindungsanker - Bild

Jedes Bild kann ein Link sein.

Code:

<a href="http://sait.ru/dokument.html"> <img src = kartinka.jpg "width =" 100 "height =" 131 "/> </a>

Standardmäßig werden die Links vom Browser mit einer durchgezogenen blauen Linie unterstrichen und die Linkbilder erhalten den blauen Rahmen.

Links-Bilder erhalten einen blauen Rahmen

Um dieses Problem zu beheben, wird der CSS-Datei für die Site eine einfache Regel hinzugefügt:

a {border: 0px;}

Dies ist eine Anweisung, um die Randdicke für alle Bildverknüpfungen auf Null zu setzen.

Fortsetzung

Im nächsten Beitrag werde ich über E-Mail-Links, deren Attribute und Methoden zum "Schutz" vor bösen Spammern sprechen