Einführung in Image Link in HTML
Bildverknüpfung in HTML ist auf fast allen Seiten vorhanden, da sie uns dabei helfen, auf einer Website von einer Seite zur nächsten zu navigieren. Eine beliebte Kombination ist die Verwendung des HTML-Ankertags mit dem img-Tag von HTML . Mit dieser Kombination können wir die Bewegung von Benutzern von einer Seite zur anderen ermöglichen, indem wir auf ein Bild klicken. Bevor wir weiter auf dieses Thema eingehen, wollen wir zunächst die Arbeitsweise und das Rendern von Anker- und Bildelementen einzeln verstehen und sie dann kombinieren, um ein verknüpftes Bild zu erhalten.
HTML-Ankertag
Das HTML-Anchor-Tag wird zum Erstellen von HTML-Hyperlinks zu anderen Webseiten oder Multimedia-Inhalten verwendet, die im Web gehostet werden. Sehen wir uns die folgende Syntax an, um zu verstehen, wie Ankertags funktionieren und welche grundlegenden Attribute sie haben
Klicke hier!!
Im obigen Beispiel gibt das Attribut "href" die URL der Webseite an, zu der wir den Benutzer weiterleiten möchten, während Sie auf den Text "Click here !!" klicken.
Lassen Sie uns den vollständigen Code unten sehen:
Ausgabe
->
Mit dem obigen Beispiel können Sie die folgenden Beobachtungen machen
- Ein nicht besuchter Link wird unterstrichen und in blauer Farbe angezeigt. Zum Beispiel. Dies ist ein nicht besuchter Link
- Ein besuchter Link wird unterstrichen und in lila Farbe angezeigt. Zum Beispiel. Dies ist ein bereits besuchter Link
- Ein aktiver Link wird unterstrichen und in roter Farbe angezeigt. Zum Beispiel. Dies ist ein aktiver Link
HTML-Bild-Tag
Ich bin mir sicher, dass Sie beim Surfen im Internet auf mehrere Webseiten gestoßen sind, auf denen verschiedene Formen von Multimedia enthalten sind. Insbesondere Bilder sind eine beliebte Form von Multimedia, die heutzutage 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
Lassen Sie uns nun verstehen, wie die einzelnen Attribute im img-Tag funktionieren:
- src: Das Attribut src definiert den Pfad der Bilddatei, die wir mit diesem Tag laden möchten. Dies kann ein Link zu einem im Web gehosteten Bild im Format example.com/images/dummy.png.webp sein oder eine Bilddatei, die lokal auf demselben Server wie die Webseite gehostet wird.
- alt: Das alt-Attribut definiert den Text und die Beschreibung des Bildes, die wir anzeigen möchten, falls das Laden der Bilder aufgrund einer Netzwerkverbindung oder eines anderen Problems fehlschlägt.
- 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 funktioniert das Bild standardmäßig mit 100% Höhe und Breite.
Sehen wir uns nun den vollständigen HTML-Code an, der zum Laden eines Bildes auf eine Webseite erforderlich ist. Speichern Sie das folgende Bild unter dem Namen "sunset.png.webp" in einem Ordner mit dem Namen "image_test" auf Ihrem lokalen Laufwerk.
Jetzt erstellen wir im selben Ordner eine HTML-Datei namens sunset.html mit dem folgenden HTML-Code:
Rufen Sie nun einen Browser auf Ihrem Computer auf und geben Sie den Pfad der HTML-Datei ein. Meine Dateien werden auf Laufwerk D gespeichert, so dass der Pfad für mich wäre
D: /image_test/sunset.html
Und jetzt können wir sehen, dass die gerenderte HTML-Seite das Sonnenuntergangsbild in unseren Browser geladen hat. Mit Hilfe von CSS und
Tag können wir auch Text gemäß unseren Anforderungen um das Bild anzeigen. Sowohl die anchor- als auch die img-Tags sind mit allen Browsern wie Google Chrome, Safari, Microsoft Edge, Firefox und Internet Explorer kompatibel.
Verknüpfte Bilder in HTML
Nachdem wir nun anhand von Beispielen verstanden haben, wie Anker-Tag und Bild-Tag einzeln funktionieren, können wir nun verstehen, wie wir die beiden Funktionen kombinieren können, um ein Szenario zu erreichen, in dem die Benutzer beim Klicken auf ein Bild auf eine neue Webseite umgeleitet werden sollen . Um ein Bild anklickbar zu machen und den Benutzer auf eine andere Webseite umzuleiten, müssen wir das Bild einfach in einem Ankertag verschachteln. Im folgenden Beispiel werden wir versuchen, die drei weltweit am häufigsten verwendeten Web-Suchmaschinen zu registrieren. In unserer Liste werden die Logos der 3 Suchmaschinen angezeigt und durch Klicken auf eines der Logos wird der Benutzer auf die entsprechende 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 eine .html-Datei mit dem Namen imageredirection.html in derselben Datei. Die Datei imageredirection.html enthält den folgenden Code
Jetzt müssen wir über den Browser auf die HTML-Seite zugreifen, für die ich meinen lokalen Pfad "D: / redirectiontest / imageredirection.html" eingeben werde. Der Browser rendert dann die HTML-Datei und generiert das folgende Ergebnis:
->
Die Nutzer können durch Anklicken ihres Logos zur jeweiligen Suchmaschine navigieren. Anhand des obigen Beispiels können wir feststellen, dass HTML eine einfache und flexible Sprache ist, mit der wir mehrere Tags miteinander kombinieren und eine komplexe Funktionalität wie diese erzielen können. Die Kombination aus img und anchor-Tag ist eine beliebte Kombination. Mit zusätzlicher HTML-Codierung können wir auch verschiedene HTML-Elemente hinzufügen, z. B. das Anzeigen verknüpfter Bilder in einer geordneten oder ungeordneten Liste mithilfe von
- oder
- HTML-Attribute
- HTML-Format-Tags
- Vorteile von HTML
- HTML-Bild-Tags
- HTML-Frames
- HTML-Blöcke
- Stellen Sie eine Hintergrundfarbe in HTML mit Beispiel ein
- HTML-Bestellliste | Attributtypen mit Syntax
- . 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 täglichen Surfen im Internet sehen.