HTML-Textlink

Ein HTML-Link kann ein Link oder ein Hyperlink sein. Dadurch wird auf eine andere Seite, ein anderes Bild oder eine andere Website weitergeleitet. es kann alles sein. Sie werden auch verwendet, um auf derselben Seite für einen bestimmten Abschnitt zu navigieren. Früher konnten sie Daten und Dokumente einfach durch Anklicken rendern. Wir verpacken unser Dokument, unsere Bilder, unsere URL oder unsere Daten in Text. Je nach Anforderung kann es auch auf eine Datei, ein Objekt oder irgendetwas auf derselben oder einer anderen Seite verweisen. Wenn wir mit der Maus über den HTML-Link fahren, ändert sich der Cursor in ein anderes Symbol. Wie sie funktionieren und wie man sie erstellt, können wir im nächsten Abschnitt unseres Artikels besprechen. In diesem Thema lernen wir etwas über HTML-Text-Links.

Syntax für HTML-Link

Wir können unseren ersten HTML-Link mit der folgenden Syntax erstellen. Wir werden ein anderes Tag, andere Attribute und entsprechende Eigenschaften in der unten angegebenen Syntax verwenden.

<a url>Link your corresponding text here</a>

In der obigen Syntax verwenden wir das Anker-Tag, um einen HTML-Link oder einen Hyperlink zu erstellen. Wir werden dieses Ankertag im Detail besprechen.

Der Ankertag ist ein Tag, über den wir unseren Text, unsere Phrase oder unser Wort anhängen oder verlinken können, um einen externen oder internen Link zu erstellen. Durch die Verwendung eines Ankertags; Wir fügen eine URL in unsere Seiten ein, die zur Navigation zu jeder anderen Seite, Website oder innerhalb desselben Abschnitts auf der Seite verwendet werden kann.

Durch die Verwendung des Ankertags haben wir viele der unten genannten Vorteile.

• Organisieren: Es hilft, unsere Daten zu organisieren. Wir müssen nicht mehrere Webseiten erstellen oder unsere Daten zu Verwaltungszwecken in Blöcke aufteilen. Wir können unsere Daten ganz einfach an nur einem Ort organisieren.
• Kein Scrollen: Durch die Verwendung des HTML-Links oder interner HTML-Links müssen wir uns keine Gedanken über das Scrollen auf wirklich langen Seiten machen; Wir können auf diesen Link klicken, um die gewünschte Abschnittsseite zu finden. So ist es einfach, alle Daten oder Abschnitte auf der Seite zu finden.

Wie erstelle ich ein Anker-Tag?

Wie Sie in der obigen Syntax sehen können, haben wir dort mittlerweile so viele Dinge verwendet; Wir werden uns genauer ansehen, wie man erstellt und wie es funktioniert.

Es besteht aus drei verschiedenen Teilen (Attribut):

1. href-Attribut
2. Zielattribut
3. Namensattribut

1. href-Attribut

Das Href-Attribut steht für Hypertext-Referenz. Angenommen, wir möchten einen Hyperlink erstellen. Die erste Anforderung ist also eine Dokumentadresse, die etwa eine andere Website, eine Datei wie PDF usw. sein kann.

Also zum Beispiel:

<a href="http://www.google.com">Google</a>

Dabei ist http://www.google.com der Wert, den wir unserem href-Attribut zuweisen. Wenn wir also auf Google klicken, werden wir zum Link zur Google-Startseite weitergeleitet. Daher enthält das href-Attribut die Dokumentadresse. Wir können auch unseren eigenen HTML-Link zu href erwähnen.

Zum Beispiel

<a href="demo.html">My page</a>

2. Zielattribut

Das Zielattribut definiert, wie das Dokument geöffnet wird. Es gibt viele Arten und wir können sie entsprechend unseren Bedürfnissen verwenden.

• _parent: Es öffnet lediglich das angehängte Dokument im übergeordneten Frame.
• _blank: Das Dokument wird in einem neuen Tab oder Fenster geöffnet.
• _top: Das angehängte Dokument wird im Vollbildfenster geöffnet.
• _self: Es öffnet das Dokument in demselben Fenster oder derselben Registerkarte, in der es angeklickt wird. Standardmäßig ist dieses Ziel aktiviert. Wir können es wie folgt ändern:

<a href="http://www.demo.com" target="_blank" rel="noopener">Your Link text</a>

Hier ist target=“_blank“ die Syntax für die Verwendung.

3. Namensattribut

Das Namensattribut wird verwendet, um zu einem bestimmten Punkt auf der Seite zu springen oder zu navigieren. Dies kann nützlich sein, wenn wir eine umfangreiche VRU-Seite mit so viel Inhalt haben. Dies hilft, Benutzerergebnisse zu sparen und Zeit zu sparen, ohne scrollen zu müssen. Syntax unten:

<a name="to%20end"></a> or

Hier klicken wir, um zum Ende der Seite zu gelangen, ohne nach unten zu scrollen.

<a href="#SomeSection">Section</a>

Dieser Browser identifiziert den Abschnitt, aber wir müssen (#) mit dem Namensattribut verwenden.

<a href="otherpage.html#title">Link your text</a>

Dadurch können wir intern auf den „Titel“ einer anderen Seite verweisen. Auch hier muss (#) am Ende der Seitenadresse verwendet werden.

HTML-Linkfarben

Wir können unserem HTML-Link auch Farben hinzufügen. Standardmäßig haben sie drei Status für die Linkfarbe; Dies wird in allen Browsern angezeigt.

• Aktiver Link:Wenn wir auf einen Link klicken, wird dieser zu einem aktiven Link mit einer unterstrichenen und roten Farbe.
• Unbesuchte Links: Die Standardfarben des Browsers für die nicht besuchten Links sind blau und unterstrichen.
• Besuchte Links: Diese sind lila und unterstrichen.

Aber wir können unsere benutzerdefinierten Farben auch mithilfe der folgenden Syntax verlinken. Wir können diesem anderen Typ folgen, um unserem Link Farbe zu verleihen. Aber wir verwenden hier Inline-CSS; Sie können bei Bedarf auch externes CSS erstellen.

• Directly provide the name of the color.
• By using the HEX color code.
• By using rgb() and rgba() values.
• By using hsl and hsla() values.

<a href="http://demo.com/" style="color:blue;">Red Link</a>

We can directly specify the color name in the style attribute. This is an inline CSS.

<a href="http://demo.com/" style="color:#FF0000;">Red color code</a>

Here we are specifying the color by using color codes. (HEX color codes)

<a href="http://demo.com/" style="color:rgb(255,0,0);">Red color</a>

We can also use RGB() values to specify the color of our links. We can control the opacity of the color by using rgb().

<a href="http://demo.com/" style="color:rgba(255,0,0,0.4);">Red color</a>

You can replace rbg() with rgba() but specify the fourth value for transparency and opacity.

<a href="http://demo.com/" style="color:hsl(0,10%,50%);">Red color</a>

We can also use HSL t color our link. HSL stands for hue, saturation, and lightness. We can also use HSLA for specifying color, but we need to provide one more parameter in hsla().

Conclusion – HTML Text Link

So in Sort, we use the anchor tag and its attributes to create the hyperlink or link in HTML. HREF contains the document’s address and the target responsible for handling the document. We can also color our link using inline or external CSS.

Das obige ist der detaillierte Inhalt vonHTML-Textlink. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!