HTML ist eine Auszeichnungssprache, mit der Sie Webseiten erstellen und strukturieren können. Eine der wichtigsten Funktionen von HTML ist die Möglichkeit, Links zu anderen Webseiten, Texten und Dokumenten zu erstellen. Aber was ist, wenn Sie einen Link zu einem Bild erstellen möchten? Die Antwort ist einfach - HTML hat dafür ein spezielles Tag.
Sie können ein Tag verwenden, um einen Link zu einem Bild in HTML zu erstellen mit Attribut href und verschachteltes Tag . Kennung definiert einen Verweis und ein Attribut href gibt die Adresse an, an die der Link führen soll. Innerhalb des Tags sie können ein Tag platzieren , die das Bild definiert, das als Referenz angezeigt wird.
Im folgenden Beispielcode wird veranschaulicht, wie Sie einen Bildverweis erstellen:
Ersetzen Sie im obigen Code "Bildadresse" durch die tatsächliche URL des Bildes, auf das Sie verweisen möchten. Ersetzen Sie "alternativer Text" durch die Beschreibung des Bildes, das angezeigt wird, wenn das Bild nicht verfügbar ist. Nachdem Sie den Code ersetzt haben, fügen Sie ihn in Ihr HTML-Dokument ein, um einen Link zum Bild zu erstellen.
Erstellen eines Links zu einem Bild in HTML
HTML-Tags ermöglicht das Erstellen von Links zu Bildern, damit Benutzer sie anzeigen können, wenn sie auf diese Links klicken.
Sie müssen ein Tag verwenden, um einen Link zu einem Bild zu erstellen (das Tag ist eines der wichtigsten HTML-Tags) und geben Sie den Pfad zum Bild im Attribut an href Kennung .
Der Bildpfad kann relativ oder absolut sein. Der relative Pfad beginnt im aktuellen Verzeichnis der HTML-Datei und der absolute Pfad gibt den vollständigen Pfad zur Bilddatei an.
Sie können dem Tag auch zusätzliche Attribute hinzufügen, um die Anzeige des Links zu ändern, z. B. um einen Titel oder einen Stil anzugeben.
Wichtig: damit Benutzer ein Bild sehen können, wenn sie auf einen Link klicken, muss das Bild im angegebenen Pfad verfügbar sein.
Darstellung eines Bildes in HTML
In HTML kann ein Bild mit dem Tag "img" dargestellt werden. Dieses Tag wird verwendet, um Grafiken auf einer Webseite anzuzeigen. Um einen Bildverweis zu erstellen, müssen Sie das Attribut "src" verwenden, das den Pfad zum Bild angibt.
Beispiel für die Verwendung des Tags "img" mit dem Attribut "src":
| Kennung | Die Beschreibung |
|---|---|
| img | Das Tag wird verwendet, um Bilder in eine Webseite einzufügen. |
Im obigen Beispiel lautet "Pfad zu Bild.jpg" ist ein relativer oder absoluter Pfad zum Bild. Das Attribut "alt" wird verwendet, um den Text anzugeben, der angezeigt wird, wenn das Bild nicht geladen oder angezeigt werden kann.
Sie können dem Tag "img" auch andere Attribute hinzufügen. Zum Beispiel:
| Attribut | Die Beschreibung |
|---|---|
| width | Legt die Breite des Bildes in Pixel oder Prozent fest. |
| height | Legt die Höhe des Bildes in Pixel oder Prozent fest. |
| title | Zeigt eine Quickinfo an, wenn Sie über ein Bild schweben. |
| style | Ermöglicht die Angabe eines Stils für das Bild mithilfe von CSS. |
Beispielcode mit zusätzlichen Attributen:
In diesem Beispiel ist das Bild 300 Pixel breit, 200 Pixel hoch, ein Tooltip-Tooltip, wenn Sie darauf zeigen, und ein 1 Pixel dicker Rahmen mit einem schwarzen Strich.
Verwenden des Tags "a" zum Erstellen eines Links
Im HTML-Markup wird ein Tag verwendet, um einen Link zu einem Bild zu erstellen a, das auch als Anker-Tag bezeichnet wird. Mit diesem Tag können Sie einen Link zu einem anderen Dokument erstellen, einschließlich eines Bildes.
Um einen Link zu einem Bild innerhalb des öffnenden und schließenden Tags zu erstellen a sie müssen die Bildadresse mithilfe eines Attributs einfügen href. Zum Beispiel:
Wo ist der "Pfad zu dem Bild.jpg" ist die Adresse des Bildes, das Sie als Referenz verwenden möchten.
Danach können Sie anstelle von "Linktext" einen beliebigen Text angeben, der für den Benutzer sichtbar wird. Wenn Sie auf diesen Text oder das Bild selbst klicken, leitet der Browser den Benutzer an die angegebene Adresse weiter.
Neben dem Attribut href. Sie können dem Tag auch andere Attribute hinzufügen a, wie target, um festzulegen, wo der Link geöffnet wird (z. B. in einem neuen Fenster), oder title, um einen Tooltip hinzuzufügen.
Also das Tag a es ist das wichtigste Werkzeug, um Links zu Bildern und anderen Dokumenten im HTML-Markup zu erstellen.
Festlegen des Bildpfads
Um ein Bild in eine Webseite einzufügen, müssen Sie den Pfad zur Bilddatei angeben. Der Pfad kann absolut oder relativ sein.
Der absolute Pfad gibt den vollständigen Pfad zur Bilddatei auf dem Server an. Zum Beispiel:
Der relative Pfad gibt den Pfad relativ zur aktuellen Webseite an. Zum Beispiel:
- Wenn sich das Bild im selben Verzeichnis wie die Webseite befindet, sieht der Pfad folgendermaßen aus:
- Wenn sich das Bild in einem Unterverzeichnis befindet, sieht der Pfad folgendermaßen aus:
- Wenn sich das Bild im übergeordneten Verzeichnis befindet, sieht der Pfad folgendermaßen aus:
Beachten Sie, dass bei der Angabe des Pfads zu einem Bild die Groß- und Kleinschreibung sowie die Dateinamenerweiterung des Bildes berücksichtigt werden müssen (z. B..jpg oder .png).
Auf diese Weise ermöglicht der korrekt angegebene Bildpfad dem Browser, das Bild korrekt auf der Webseite anzuzeigen.
