Bildlinks in HTML sind auf fast allen Seiten zu finden, da sie uns dabei helfen, auf einer Website von einer Seite zur anderen zu navigieren. Eine beliebte Kombination ist die Verwendung des HTML-Anker-Tags mit dem HTML-img-Tag ![]()
. Mit dieser Kombination können wir Benutzern ermöglichen, von einer Seite zur anderen zu wechseln, indem sie auf ein Bild klicken. Bevor wir tiefer in dieses Thema eintauchen, wollen wir zunächst die Funktionsweise und das Rendern von Anker- und Bildelementen einzeln verstehen und diese dann kombinieren, um ein verknüpftes Bild zu erhalten.
HTML-Anker-Tag
Das HTML-Anker-Tag wird verwendet, um HTML-Hyperlinks zu anderen Webseiten oder im Web gehosteten Multimedia-Inhalten zu erstellen. Sehen wir uns die folgende Syntax an, um zu verstehen, wie Ankertags funktionieren und welche grundlegenden Attribute sie haben
Klicken Sie hier!!
Im obigen Beispiel gibt das „href“-Attribut die URL der Webseite an, zu der wir den Benutzer umleiten möchten, während er auf den Text „Hier klicken!!“ klickt.
Sehen wir uns den vollständigen Code unten an:
Ausgabe
–>
Anhand des obigen Beispiels können Sie die folgenden Beobachtungen machen
- Ein nicht besuchter Link wird unterstrichen und in blauer Farbe angezeigt. Für z.B. Dies ist ein nicht besuchter Link
- Ein besuchter Link wird unterstrichen und in lila Farbe angezeigt. Für z.B. Dies ist ein bereits besuchter Link
- Ein aktiver Link wird unterstrichen und in roter Farbe angezeigt. Für z.B. Dies ist ein aktiver Link
HTML-Bild-Tag
Ich bin mir sicher, dass Sie beim Surfen im Internet auf mehrere Webseiten gestoßen sind, die verschiedene Formen von Multimedia enthalten. Vor allem Bilder sind eine beliebte Multimediaform, die heute auf fast allen interaktiven Webseiten und Websites zu finden ist. Lassen Sie uns das Bild-Tag und seine Implementierung in HTML anhand des folgenden Beispiels verstehen:
Syntax
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
Nach dem Login kopieren
Lassen Sie uns nun verstehen, wie jedes der Attribute im img-Tag funktioniert:
-
src: Das src-Attribut definiert den Bilddateipfad, den wir mit diesem Tag laden möchten. Es kann mit einem im Web gehosteten Bild in einem Format wie example.com/images/dummy.png oder einer Bilddatei verknüpft werden, die lokal auf demselben Server wie die Webseite gehostet wird.
-
alt: Das alt-Attribut definiert den Text und die Beschreibung des Bildes, das wir anzeigen möchten, falls die Bilder aufgrund der Netzwerkkonnektivität oder eines anderen Problems nicht geladen werden können.
-
Breite und Höhe: Die Breite und Höhe beider Attribute definieren die Breite und Höhe des Bildes, das wir auf der Webseite anzeigen möchten. Andernfalls würde das Bild standardmäßig mit 100 % Höhe und Breite funktionieren.
Sehen wir uns nun den vollständigen HTML-Code an, der zum Laden eines Bildes auf einer Webseite erforderlich ist. Speichern Sie das folgende Bild unter dem Namen „sunset.png“ in einem Ordner namens „image_test“ auf Ihrem lokalen Laufwerk.
Jetzt erstellen wir im selben Ordner eine HTML-Datei namens Sunset.html mit dem folgenden HTML-Code:
Gehen Sie nun zu einem Browser auf Ihrem Computer und geben Sie den Pfad der .html-Datei ein. Meine Dateien sind auf Laufwerk D gespeichert, daher wäre der Pfad für mich
D:/image_test/sunset.html
Und jetzt können wir sehen, dass die gerenderte HTML-Seite das Sonnenuntergangsbild in unseren Browser geladen hat. Mithilfe von CSS und
Tag können wir auch Text entsprechend unseren Anforderungen um das Bild herum anzeigen. Sowohl die Anchor- als auch die IMG-Tags sind mit allen Browsern wie Google Chrome, Safari, Microsoft Edge, Firefox und Internet Explorer kompatibel.
Verlinkte Bilder in HTML
Da wir nun anhand von Beispielen verstanden haben, wie Anker-Tags und Bild-Tags einzeln funktionieren, wollen wir nun verstehen, wie wir die beiden Funktionalitäten kombinieren können, um ein Szenario zu erreichen, in dem wir möchten, dass die Benutzer mit dem Klick auf eine neue Webseite weitergeleitet werden eines Bildes. Um ein Bild anklickbar zu machen und den Benutzer auf eine andere Webseite weiterzuleiten, müssen wir das Bild lediglich in einem Anker-Tag verschachteln. Im folgenden Beispiel werden wir versuchen, die drei weltweit am häufigsten verwendeten Websuchmaschinen zu ermitteln. In unserer Liste zeigen wir die Logos der 3 Suchmaschinen an und durch Klicken auf eines der Logos wird der Benutzer zur jeweiligen Suchmaschinenseite weitergeleitet. Erstellen wir einen Ordner mit dem Namen „Redirection Test“ und speichern wir im selben Ordner die folgenden Bilder
1. Google
2. Yahoo
3. Bing
Jetzt erstellen wir in derselben Datei eine .html-Datei mit dem Namen imageredirection.html. Die imageredirection.html enthält den folgenden Code.
Jetzt müssen wir über den Browser auf die HTML-Seite zugreifen, wofür ich meinen lokalen Pfad „D:/redirectiontest/imageredirection.html“ eingebe. Der Browser rendert dann die HTML-Datei, um das folgende Ergebnis zu generieren:
–>
Die Benutzer können durch Klicken auf ihr Logo zur jeweiligen Suchmaschine navigieren. Anhand des obigen Beispiels können wir erkennen, dass HTML eine einfache und flexible Sprache ist, die es uns ermöglicht, mehrere Tags miteinander zu kombinieren und eine komplexe Funktionalität wie diese zu erreichen. Die Kombination aus der Verwendung von img und einem Ankertag ist eine beliebte Kombination. Mit zusätzlicher HTML-Codierung können wir auch verschiedene HTML-Elemente hinzufügen, z. B. die Anzeige verknüpfter Bilder in einer geordneten oder ungeordneten Liste mithilfe von
oder . Die extreme Flexibilität und Einfachheit, die HTML mit jeder veröffentlichten Version bietet, hilft UI- und UX-Designern beim Entwerfen interaktiver und intuitiver Webseiten, die wir beim Surfen im Internet für alltägliche Aktivitäten sehen.
Empfohlener Artikel
Dies war eine Anleitung zum Bildlink in HTML. Hier besprechen wir die verschiedenen Arten von HTML-Tags zusammen mit der Syntax. Sie können auch unsere anderen vorgeschlagenen Artikel lesen, um mehr zu erfahren –
- HTML-Attribute
- HTML-Format-Tags
- HTML-Bild-Tags
- HTML-Frames
Das obige ist der detaillierte Inhalt vonBildlink in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
