Websites sind anders als alle Kommunikationsmedien, die vor ihnen erschienen sind. Eines der Hauptmerkmale, das Websites von früheren Medienformaten wie Print, Radio und sogar Fernsehen unterscheidet, ist das Konzept des "Hyperlinks".
Hyperlinks, häufig auch als "Links" bezeichnet, machen das Web so dynamisch. Im Gegensatz zu einer gedruckten Publikation, die auf einen anderen Artikel oder eine andere Ressource verweisen kann, können Websites diese Links verwenden, um Besucher tatsächlich zu diesen anderen Seiten und Ressourcen zu senden. Das kann kein anderes Übertragungsmedium. Sie können eine Anzeige im Radio hören oder im Fernsehen anzeigen, aber es gibt keine Hyperlinks, die Sie zu den Unternehmen in diesen Anzeigen führen können, wie dies auf Websites problemlos möglich ist. Links sind wirklich ein erstaunliches Kommunikations- und Interaktionswerkzeug!
Bei den Links auf einer Website handelt es sich häufig um Textinhalte, die Besucher auf andere Seiten derselben Website leiten. Die Navigation einer Website ist ein Beispiel für Textlinks in der Praxis, Links müssen jedoch nicht textbasiert sein. Sie können Bilder auch einfach auf Ihrer Website verlinken. Sehen wir uns an, wie das gemacht wird, gefolgt von einigen Fällen, in denen Sie bildbasierte Hyperlinks verwenden möchten.
So verknüpfen Sie ein Bild
Als Erstes müssen Sie das Bild selbst in Ihrem HTML-Dokument platzieren. Ein bildbasierter Link wird häufig mit der Logo-Grafik der Website verwendet, die dann auf die Startseite der Website zurück verlinkt wird. In unserem folgenden Beispielcode ist die Datei, die wir verwenden, eine SVG-Datei für unser Logo. Dies ist eine gute Wahl, da unser Bild für verschiedene Auflösungen skaliert werden kann, während die Bildqualität und eine kleine Gesamtdateigröße erhalten bleiben.
So platzieren Sie Ihr Bild im HTML-Dokument:
Um das Bild-Tag herum fügen Sie nun den Anker-Link hinzu, indem Sie das Ankerelement vor dem Bild öffnen und den Anker nach dem Bild schließen. Dies ist ähnlich wie beim Verknüpfen von Text. Statt die Wörter, die Sie mit den Ankertags verknüpfen möchten, umschließen Sie das Bild. In unserem Beispiel verlinken wir zurück auf die Homepage unserer Website, die "index.html".
Fügen Sie beim Hinzufügen dieses HTML-Codes zu Ihrer Seite keine Leerzeichen zwischen dem Ankertag und dem Bildtag ein. In diesem Fall fügen einige Browser neben dem Bild kleine Häkchen hinzu, die seltsam aussehen.
Das Logo-Image würde jetzt auch als Homepage-Button fungieren, was heutzutage ein gewisser Web-Standard ist. Beachten Sie, dass wir keine visuellen Stile, wie z. B. Breite und Höhe des Bildes, in unser HTML-Markup aufnehmen. Wir werden diese visuellen Stile CSS überlassen und eine klare Trennung von HTML-Struktur und CSS-Stilen beibehalten.
Sobald Sie sich mit CSS befassen, können Sie für die Stile, die Sie als Ziel für diese Logografik erstellen, die Größe des Bildes ändern, einschließlich responsiver Stile für geräteübergreifende Bilder sowie alle visuellen Elemente, die Sie dem Bild / Link hinzufügen möchten, beispielsweise Rahmen oder CSS Schatten werfen. Sie können Ihrem Bild oder Link auch ein Klassenattribut zuweisen, wenn Sie zusätzliche "Hooks" für Ihre CSS-Stile benötigen.
Anwendungsfälle für Image-Links
Das Hinzufügen eines Bildlinks ist also ziemlich einfach. Wie wir gerade gesehen haben, müssen Sie das Bild nur mit den entsprechenden Ankertags versehen. Ihre nächste Frage könnte sein: "Wann würden Sie dies in der Praxis tun, neben dem oben genannten Beispiel für ein Logo / Homepage-Link?"
Hier einige Gedanken:
- Miniaturbilder in einer Galerie, die mit größeren Versionen dieser Bilder verknüpft sind.
- Bilder, die allein zur Darstellung von Inhalten verwendet werden, z. B. Produktfotos für eine E-Commerce-Website.
- Teaser-Bilder, die Teil eines anderen Inhalts sind, wie z. B. ein Blogartikel oder eine Pressemitteilung, die die Menschen dazu bringen, zu bemerken, dass der Inhalt ihnen einen Zielbereich gibt, auf den Sie tippen oder klicken können, um den gesamten Artikel zu lesen.
- Symbolbilder, die als Schaltflächen zum Herstellen einer Verbindung zu bestimmten Funktionen oder Seiten innerhalb der Site verwendet werden.
- Social-Media-Links, die die erkennbaren Logos der verschiedenen Social-Media-Sites verwenden, die für diese Site oder dieses Unternehmen wichtig sind.
- Bilder, die als Schaltflächen für bestimmte Funktionen verwendet werden, wie z. B. das Senden von Formularen (Hinweis auf bewährte Vorgehensweisen: Aus Sicht der Website-Performance sind rein CSS-gestaltete Schaltflächen eine bessere Wahl als Bildschaltflächen).
Eine Erinnerung bei der Verwendung von Bildern
Bilder können eine wichtige Rolle für den Erfolg einer Website spielen. Eines der oben genannten Beispiele verwendet Bilder neben anderen Inhalten, um auf diese Inhalte aufmerksam zu machen und sie dazu zu bringen, sie zu lesen.
Bei der Verwendung von Bildern müssen Sie darauf achten, dass Sie das richtige Bild für Ihre Anforderungen auswählen. Dazu gehören das richtige Bildthema und das richtige Bildformat. Außerdem müssen Sie sicherstellen, dass alle Bilder, die Sie auf Ihrer Website verwenden, für die Bereitstellung der Website ordnungsgemäß optimiert sind. Es mag eine Menge Arbeit sein, nur Bilder hinzuzufügen, aber der Gewinn ist es wert! Bilder können wirklich zum Erfolg einer Website beitragen.
Zögern Sie nicht, geeignete Bilder auf Ihrer Website zu verwenden. Verknüpfen Sie diese Bilder bei Bedarf, um sie interaktiv zu Ihren Inhalten hinzuzufügen. Beachten Sie jedoch auch die bewährten Vorgehensweisen für Bilder und verwenden Sie diese Grafiken / Links korrekt und verantwortungsbewusst in Ihrer Webdesign-Arbeit.
