So verwenden Sie ein Bild als Link in HTML

So verwenden Sie ein Bild als Link in HTML

HTML ist eine Sprache, die in Webdesign und -entwicklung verwendet wird. Durch die Verwendung der einzigen HTML können wir statische Webseiten erstellen. Die Ausrichtung und das Design werden durch CSS durchgeführt. Wie andere Programmiersprachen gibt es auch Codes/Befehle, die als Tags bekannt sind. Diese Tags sind mit Winkelklammern geschrieben.

Möglicherweise finden wir einige interaktive integrierte modulare Websites, die nur Drag & Drop-Ansätze verwenden, die alle aus HTML bestehen. Wir können viele Elemente in der HTML wie Text, Bilder, Videos usw. hinzufügen. Jedes Element hat ein separates Tag im HTML -Tag -Körper geschrieben. HTML hat viele Funktionen, die angewendet werden müssen. Einer davon ist ein Link. Link ist eine Funktion, die die aktuelle Seite in eine andere verwandelt. Ein Link hinter dem Bild ist das heutige Thema, das hier erklärt werden muss.

Erforderliche wichtige Wesentliche

Es gibt zwei grundlegende Tools zur Implementierung von HTML -Code.

  • Ein Texteditor
  • Ein Browser

Ein Tool wird als Eingabewerkzeug verwendet, während das andere als Ausgabesoftware fungiert. Im Texteditor schreiben wir den Code, der auf der anderen Software ausgeführt werden soll. Dieser Editor fungiert als Eingabetool. Andererseits fungiert der Browser als Ausgabetool. Es ist eine Plattform, die den im Editor geschriebenen HTML -Code ausführt.

Wenn wir diese Aufgabe unter Windows ausführen, ist der Texteditor standardmäßig Notizblock. Sie können Sublime, Notepad ++ usw. verwenden. Während der Browser Internet Explorer ist. In unserem Leitfaden werden wir jedoch Google Chrome und Notepad verwenden, was leicht zugänglich ist.

HTML -Handbuch

Wenn wir das Konzept der Verbindung im Bild erläutern wollen, müssen wir zuerst die Arbeit von HTML verstehen. Der HTML -Körper ist in zwei Teile unterteilt. Einer ist der Kopf und der zweite der Körper. Der Kopfteil ist zuerst geschrieben. In diesem Teil fügen wir den Titel der Webseite hinzu. Es ist bekannt, dass der funktionelle Teil der Körperteil des HTML ist. Weil alle Eigenschaften von HTML hier definiert sind.

Alle Tags, einschließlich HTML. Der HTML -Code, der in den Notepads geschrieben ist. Der .TXT -Erweiterung wird als Code gespeichert, während es mit HTML für den Browser gespeichert wird. Die Datei des Texteditors muss mit der HTML -Erweiterung gespeichert werden. Zum Beispiel Link.html. Dann sehen Sie, dass die Datei mit dem Symbol des aktuellen Browsers, den Sie für diesen Zweck verwenden, gespeichert wird.



… .

Das folgende Bild ist ein Beispielcode von HTML. Im Kopfabschnitt haben wir den Namen des Titels der Seite hinzugefügt. Und im Körperanteil wird einfacher Text hinzugefügt.

Schaffung eines einfachen Hyperlinks

Möglicherweise haben Sie die Links auf den Websites in Form von Text oder Bild beobachtet. Diese werden durch die Verwendung der Hyperlinks im HTML -Code entwickelt. Dies ist das Merkmal sowohl der statischen als auch der dynamischen Webseiten. Es gibt sowohl Öffnungs- als auch Schließetiketten. ist als Anker -Tag bekannt. Die Syntax ist unten angegeben.



HREF ist die Referenz der Seite. Hier schreiben wir die Adresse dieser spezifischen Website oder Webseite, auf der wir auf den Link klicken möchten. Während wir im Körper des Anker -Tags den Text schreiben, mit dem wir verlinken möchten. Zum Beispiel haben wir unten einen Text verwendet.

https: // linuxHint.com”>
Mein toller Link

Während wir die Adresse schreiben, können Sie sehen, dass sie automatisch unterstrichen ist und ihre Farbe geändert wird. Es impliziert die Unterscheidung zwischen dem einfachen Text und dem Hyperlink. Während wir im Körper einen einfachen Satz verwendet haben. Betrachten Sie das obige Beispiel im Arbeitszustand.

Da wir diesen Code im Notizblock geschrieben haben, werden wir ihn jetzt ausführen, um die Ausgabe aus dem Browser zu erhalten.

Aus der Ausgabe können Sie feststellen, dass der von uns hinzugefügte Text unterstrichen ist, was zeigt, dass es sich um einen Link handelt. Während wir den Mauszeiger auf den Link bewegen, wird der Zeiger in das Handsymbol konvertiert.

Bild -Tag in HTML

Bild ist der grundlegende Inhalt der HTML. Es wird ein bestimmtes Tag verwendet. Das Bild -Tag unterscheidet sich etwas von anderen Tags. Da es keine Öffnungs- und Schließungs -Tags enthalten. Bild kann auch direkt aus Ihrem System oder Internet hinzugefügt werden. Die Bildquelle wird erwähnt. In der Quell.

< img src = “c:\users\USER\DESKTOP\13.png”>

Hier ist das Bild Tag . 'SRC' steht für die Quelle. Dies ist der Pfad des Bildes mit der Dateierweiterung.

Siehe die Ausgabe unten.

Bild und ein Link

Verknüpfen Sie eine Website mit dem Bild

Sie müssen auf Websites gestoßen sein, insbesondere in den Website -Stores oder auf den Online -Shopping -Websites. Es gibt Unmengen von Bildern, die beim Klicken auf einer anderen Seite geöffnet werden. Wir fügen einen Link für das Bild hinzu oder verknüpfen zwei Seiten über einen Link. Diese Seite kann eine statische oder eine dynamische Seite sein. Wir brauchen zwei Elemente -Tags drin. Einer ist das Bild -Tag und der andere ist das Link -Tag.



Der Bildcode wird in das Anker -Tag hinzugefügt, da das Bild wie ein Link wirkt. Unten finden Sie den vollständigen HTML -Code.

Jetzt werden wir diesen Code in Google Chrome ausführen.

Durch das Bild ist es nicht möglich, genau zu erklären. Wenn Sie jedoch üben, werden Sie sehen, dass das Bild beim Schweben der Maus die Hand des Zeigers zeigt und es als Link zeigt. Wenn wir auf das Bild klicken, wird es in der Website geöffnet, deren Adresse im Referenzanteil erwähnt wird. Die folgende Website wird geöffnet.

Verknüpfen Sie eine statische Webseite mit dem Bild

Wenn Sie bereit sind, die statische Webseite in den Code hinzuzufügen, ersetzen Sie einfach die Adresse der Website durch die in Ihrem System vorhandene Seite.

< a href = “sample.html”>

Im Browser sehen Sie, dass die statische Beispielseite geöffnet ist, deren Adresse im Tag angegeben wurde.

ALT -Attribut und der Bildlink

Dieses Attribut hilft bei der Beschreibung von etwas über das Bild. Dies wird nur angezeigt, wenn aus irgendeinem Grund das Bild nicht geladen wird oder Ihre Internetverbindung möglicherweise langsam ist. Diese Beschreibung wird also gezeigt, die dem Leser hilft, etwas über das Bild oder eine Website zu wissen.

< img alt= “image is not available” src= “C:\users\USERS\DESKTOP\13.png”>

Dies ist das Tag. ALT -Attribut wird im IMG -Tag geschrieben.

Die Ausgabe ist unten angezeigt, die die Textalternative zum Bild zeigt.

Abschluss

In diesem Artikel haben wir die einfachen Tags sowohl eines Links als auch eines Bildes verwendet. Außerdem verwenden wir ein Bild als Link mit vielen Beispielen. Es kann viele Möglichkeiten geben, dieses Konzept zu erläutern. Wir haben einige einfache Beispiele in diesem Leitfaden erwähnt.