HTML - Bildlinks

Hallo da draußen, angehende Webentwickler! Heute tauchen wir in die aufregende Welt der HTML-Bildlinks ein. Als dein freundlicher Nachbar-Computerlehrer bin ich hier, um dich auf dieser Reise Schritt für Schritt zu führen. Also hole dir dein lieblingsGetränk, setze dich bequem hin und lassen wir gemeinsam dieses Abenteuer beginnen!

Was sind HTML-Bildlinks?

Bevor wir ins Detail gehen, lassen uns verstehen, was HTML-Bildlinks sind. Stell dir vor, du erstellst ein digitales Fotobuch. Du möchtest Bilder anzeigen, aber du möchtest auch, dass die Leute auf diese Bilder klicken, um andere Webseiten zu besuchen. Genau das tun HTML-Bildlinks – sie machen Bilder zu klickbaren Links!

Syntax

Nun schauen wir uns die Syntax für die Erstellung eines Bildlinks an. Mach dir keine Sorgen, wenn sie initially etwas einschüchternd aussieht – wir werden sie gemeinsam analysieren!

<a href="URL_des_links">
<img src="URL_des_bildes" alt="Beschreibung des Bildes">
</a>

Lassen wir den Code auseinandernehmen:

1. <a href="URL_des_links">: Das ist unser Ankertag. Er erstellt den Link.
2. <img src="URL_des_bildes" alt="Beschreibung des Bildes">: Das ist unser Bildtag, eingebettet in den Ankertag.
3. </a>: Das schließt unseren Ankertag.

Beispiele für HTML-Bildlinks

Beispiel 1: Einfacher Bildlink

Lassen wir mit einem einfachen Beispiel beginnen. Angenommen, wir möchten ein Bild eines süßen Welpen erstellen, das, wenn man darauf klickt, zu einer Website über Hundepflege führt.

<a href="https://www.hundepflege.com">
<img src="suesser_welpe.jpg" alt="Ein süßer Welpe">
</a>

In diesem Beispiel:

• Die Bilddatei ist "suesser_welpe.jpg"
• Ein Klick auf das Bild führt dich zu "https://www.hundepflege.com"
• Wenn das Bild nicht lädt, wird "Ein süßer Welpe" als Alternativtext angezeigt

Beispiel 2: Link in einem neuen Tab öffnen

Manchmal möchten wir, dass der Link in einem neuen Tab geöffnet wird. Das können wir erreichen, indem wir target="_blank" zu unserem Ankertag hinzufügen.

<a href="https://www.katzenpflege.com" target="_blank">
<img src="verspielter_kater.jpg" alt="Ein verspielter Kater">
</a>

Dieser Code öffnet die Katzenpflege-Website in einem neuen Tab, wenn man auf das Katerbild klickt.

Beispiel 3: Hinzufügen einer Titelbeschreibung

Wir können eine Titelbeschreibung zu unserem Bildlink hinzufügen, die als Tooltip angezeigt wird, wenn jemand über das Bild fährt.

<a href="https://www.vogelbeobachtung.com" title="Mehr über Vogelbeobachtung lernen">
<img src="farbiger_papagei.jpg" alt="Ein farbiger Papagei">
</a>

Nun, wenn jemand über das Papageienbild fährt, wird "Mehr über Vogelbeobachtung lernen" als Tooltip angezeigt.

Koordinatensystem in HTML-Bildern

Nun sprechen wir über etwas Fortgeschritteneres – das Koordinatensystem in HTML-Bildern. Das ist besonders nützlich, wenn du verschiedene Teile eines Bildes klickbar machen und mit verschiedenen Seiten verlinken möchtest.

Bildkarten

Eine Bildkarte ermöglicht es dir, klickbare Bereiche auf einem Bild zu definieren. Diese Bereiche können verschiedene Formen haben: Rechtecke, Kreise oder Polygone.

Hier ist ein Beispiel, wie man eine Bildkarte erstellt:

<img src="weltkarte.jpg" alt="Weltkarte" usemap="#weltkarte">

<map name="weltkarte">
<area shape="rect" coords="0,0,82,126" href="nordamerika.html" alt="Nordamerika">
<area shape="circle" coords="90,58,3" href="suedamerika.html" alt="Südamerika">
<area shape="poly" coords="124,58,96,71,102,83,124,83,129,72" href="afrika.html" alt="Afrika">
</map>

Lassen wir das auseinandernehmen:

1. Wir haben ein Weltkartenbild.
2. Wir definieren eine Karte mit dem Namen "weltkarte".
3. Innerhalb der Karte definieren wir drei klickbare Bereiche:

• Ein Rechteck für Nordamerika
• Ein Kreis für Südamerika
• Ein Polygon für Afrika

Jeder Bereich hat seine eigene Form, Koordinaten und Verlinkung.

Verständnis der Koordinaten

Das Koordinatensystem beginnt in der oberen linken Ecke des Bildes (0,0). Die x-Koordinate erhöht sich, wenn man nach rechts bewegt, und die y-Koordinate erhöht sich, wenn man nach unten bewegt.

Für verschiedene Formen funktionieren Koordinaten leicht unterschiedlich:

Form	Koordinatenformat	Beispiel
Rechteck	x1,y1,x2,y2	coords="0,0,82,126" (oben links nach unten rechts)
Kreis	x,y,Radius	coords="90,58,3" (Mitte x, Mitte y, Radius)
Polygon	x1,y1,x2,y2,...,xn,yn	coords="124,58,96,71,102,83,124,83,129,72" (Reihe von Punkten)

Schlussfolgerung

Und das war's, Leute! Wir haben die Welt der HTML-Bildlinks durchquert, von einfacher Syntax bis hin zu fortgeschrittenen Bildkarten. Denke daran, Übung macht den Meister. Versuche, deine eigenen Bildlinks und Bildkarten zu erstellen – du wirst überrascht sein, wie schnell du es lernst!

Als wir aufhören, erinnere ich mich an einen Schüler, der mir einmal sagte: "Herr, ich dachte, HTML wäre nur für langweiligen Text, aber jetzt sehe ich, dass es das Internet zum Leben erwecken kann!" Und genau das lernst du – das Internet zum Leben zu erwecken, eine Bildverlinkung nach der anderen.

Weiter codieren, weiter lernen und vor allem: weiter Spaß haben! Bis下次, dein freundlicher Nachbar-Computerlehrer verabschiedet sich. Frohes Coden!

Credits: Image by storyset