Linking Image in HTML: So erstellen Sie Links aus Bildern

Wir werden einen anfängerfreundlichen Blick darauf werfen, wie Sie Bildlinks auf Ihrer Website erstellen.

Wir werden uns ansehen, welche HTML-Tags Sie im Code verwenden müssen.

Wenn Sie dies noch nie zuvor getan haben, keine Sorge! Ich werde Sie durch den gesamten Prozess führen.

Am Ende dieses Artikels erstellen Sie Bildlinks auf Ihrer gesamten Webseite und im Internet.,

Wir werden uns gegen Ende des Artikels auch einige fortgeschrittenere Techniken ansehen, wenn Sie sich mutig fühlen.

Schnappen Sie sich einen Kaffee, lassen Sie “ s tauchen in!

Wie erstelle ich einen Hyperlink?

Um Links auf Ihrer Homepage zu erhalten, müssen Sie einen Hyperlink erstellen. Um dies in HTML zu tun, müssen Sie ein <a> – Tag verwenden. Jedes <a> – Tag besteht aus zwei Teilen: dem öffnenden und dem schließenden Tag.,

Hier ist ein Beispiel:

<a href="..."> ...</a>

Oben sehen Sie, dass das offene Tag:

<a href="...">

den Anfang des Hyperlinks erzeugt. Dann schließen wir das Tag mit:

</a>

Jeder Text, den wir zwischen dem Tag Öffnen und Schließen schreiben, ist Ihr Linktext. Zum Beispiel:

<a href="..."> My Great Link</a>

Um dies in einen Link umzuwandeln, müssen wir eine URL hinzufügen. Dazu fügen wir die URL zum href Attribut hinzu., Die URL kann auf eine beliebige Stelle im Internet verweisen. Für dieses Beispiel verwenden wir die PageDart-Homepage:

<a href="https://pagedart.com"> My Great Link</a>

Stellen Sie sicher, dass Sie die vollständige URL mit HTTPS vorne angeben.

Das ist alles, was es gibt, um einen Nur-Text-Link in HTML zu erstellen. Als nächstes schauen wir uns an, wie wir mit HTML ein Bild zu einer Webseite hinzufügen können.

Wie erstelle ich ein Bild in HTML?

Um Ihrer Webseite ein Bild hinzuzufügen, verwenden Sie ein img – Tag.,

Dieses Tag unterscheidet sich ein wenig von einem a – Tag, da es kein öffnendes und schließendes Tag hat.

Um ein img – Tag zu erstellen, müssen Sie dem Tag eine Quelldatei geben. Verwenden Sie dazu das Attribut src:

<img src="https://pagedart.com/favicon-32x32.png">

Dies fügt dem Bildschirm ein Bild wie folgt hinzu:

Jetzt haben wir ein Bild, das wir drehen müssen es in einen Link., Dazu müssen wir ein <img> – Tag innerhalb der <a> – Tags hinzufügen, um ein Verknüpfungsbild in HTML zu erstellen.

Schauen wir uns als nächstes ein Beispiel an.

Bild als Link

Um ein Bild in einen Link zu verwandeln, müssen Sie das <img> – Tag in das <a> – Tag einfügen., In unserem früheren Beispiel würde der Quellcode folgendermaßen aussehen:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"></a>

Was diesen HTML-Code erzeugen würde:

Durch Hinzufügen des <img> – Tags innerhalb eines <a> tag der Browser kann sehen, dass das Bild anklickbar sein sollte. Sie haben das Bild in einen Link verwandelt!

Wenn Sie WordPress verwenden, können Sie diesen HTML-Code mithilfe der Textansicht im Seiteneditor zu Ihrer Seite hinzufügen.

Sie können auch Text und Bilder innerhalb des Links hinzufügen, schauen wir uns dies an.,

Bild und Text als Link

Im obigen Beispiel wurde gezeigt, wie nur ein Bild als Link hinzugefügt wird.

Was wäre, wenn wir einem Link sowohl ein Bild als auch einen Text hinzufügen möchten?

Nun, in diesem Fall müssen wir sicherstellen, dass wir den Text hinzufügen, bevor wir das <a> – Tag schließen:

<a href="https://pagedart.com"> <img src="https://pagedart.com/favicon-32x32.png"> PageDart Home </a>

Oben haben wir „PageDart Home“ innerhalb der <a> tag zusammen mit dem <img> Tag., Wenn es in einem Webbrowser auf der Seite angezeigt wird, sieht es folgendermaßen aus:

Das <img> – Tag enthält ein weiteres Attribut, das wir nicht besprochen haben und das Sie verwenden sollten.

Es ist das Attribut.

Bildlinks und das Alt-Attribut

Bilder im Internet sollten ein Attribut haben. Dies ist eine Textbeschreibung des Bildes.

Bildschirmleser verwenden den Alt-Text, um sehbehinderten Benutzern zu helfen. Die Bildschirmleser lesen die Textbeschreibung aus, wenn sie ein Bild findet.,

Dazu fügen wir dem img – Tag ein img – Attribut wie folgt hinzu:

<a href="https://pagedart.com"> <img alt="PageDart.com" src="https://pagedart.com/favicon-32x32.png"></a>

Wenn der Bildschirmleser dieses Bild liest, heißt es „PageDart.com“ laut.

Beim Schreiben von Bild-Alt-Text ist es wichtig, Best Practices zu befolgen.

Stellen Sie sicher, dass Sie über die Person nachdenken, die den Bildschirmleser verwendet. Schreiben Sie Ihre Alt-Textbeschreibung für sie und beschreiben Sie das Bild so gut Sie können.

Dies ist alles, was Sie zum Erstellen von Verknüpfungsbildern in HTML benötigen., Es gibt jedoch einige fortgeschrittenere Techniken, die Sie verwenden können. Wenn Sie sich mutig fühlen, werden wir uns diese als nächstes ansehen.

Erweiterte Technik: Bild als Link mit CSS

Eine erweiterte Technik ist die Verwendung von CSS. CSS steht für Cascading Style Sheet und ermöglicht es Ihnen, das Aussehen einer HTML-Seite zu ändern.

Mit CSS können Sie ein Hintergrundbild für ein Element wie unser <a> – Tag festlegen.,

Hier hätten wir HTML, das so aussieht:

<style> a { background-image: url("https://pagedart.com/favicon-32x32.png"); display: block; height:32px; width:32px; }</style><a href="https://pagedart.com"></a>

Dieses Mal befindet sich also nichts im <a> – Tag, aber das Bild wird im CSS-Stil festgelegt. Dies würde Folgendes im Browser anzeigen:

Wir können eine ähnliche Technik mit einem <button> – Tag verwenden.

Erweiterte Technik: Verwenden einer Schaltfläche

In diesem Beispiel verwenden wir das <button> – Tag anstelle des<a> – Tags.,

Wir können dieselbe Ausgabe wie im obigen Beispiel mit diesem HTML-Code erstellen:

Wodurch diese Ausgabe erstellt wird:

Hier verwenden wir JavaScript, um eine neue Browser-Registerkarte zu öffnen. Senden des Benutzers an die PageDart-Startseite.

Ich habe keine Ahnung, warum du das jemals tun würdest! Aber ich wollte Ihnen zeigen, was möglich ist und wie flexibel HTML, CSS und JavaScript sein können.

Das letzte Beispiel, das ich zeigen werde, ist die Verwendung einer Imagemap.

Erweiterte Technik: Bildkarte

Bildkarten sind einzelne Bilder mit anklickbaren Bereichen., Sie haben im Laufe der Jahre an Popularität verloren, sind aber immer noch Teil der HTML5-Spezifikation. Dies bedeutet, dass Browser wie Internet Explorer, Chrome und Safari werden unterstützt.

Diagramme sind gute Beispiele für Bildkarten wie Organigramme wie diese:

Um dann jeden rosa Bereich zu einem anklickbaren Link zu machen, würden wir einemap wie folgt erstellen:

Wir haben das Attributusemap zurimg tag.,

Dann haben wir innerhalb des map – Tags ein area – Tag. Jeder dieser Bereiche erstellt einen anklickbaren Bereich, der als Schaltfläche fungiert.

Verwenden eines Verknüpfungsbildes in HTML

Wir haben fünf verschiedene Möglichkeiten untersucht, um ein Bild als Link auf Ihrer Webseite hinzuzufügen:

1. Ein Bild als Link
2. Bild und Text als Link
3. Verwenden Sie CSS, um ein Bild als Link festzulegen
4. Mit einer Schaltfläche als Link
5. Mit Bildkarten

Alle diese können Bilder in Links umwandeln. Sie sollten jetzt das Vertrauen haben, dies selbst zu versuchen.,

Wir haben uns auch mit Barrierefreiheit und dem Festlegen von Alt-Text befasst, um Sehbehinderten zu helfen.