E-Mail ist heutzutage eines der wichtigsten Kommunikationsmittel. Manchmal ist es hilfreich, eine E-Mail-Adresse als aktiven Link auf einer Webseite zu verwenden, damit Besucher ihren E-Mail-Client sofort öffnen und eine E-Mail schreiben können. In diesem Artikel werden wir uns ansehen, wie Sie eine E-Mail zu einem aktiven Link in HTML machen.
Zuerst müssen Sie das Tag "mailto:" im Attribut "href" des Tags "a" verwenden. Zum Beispiel, um eine E-Mail zu machen [email protected] mit einem aktiven Link müssen Sie den folgenden Code schreiben:
Nachdem ein Besucher auf diesen Link geklickt hat, wird ein E-Mail-Client (z. B. Outlook, Gmail usw.) mit der ausgefüllten Adresse des Empfängers geöffnet. Der Benutzer kann die E-Mail einfach schreiben und senden, keine Notwendigkeit, die E-Mail-Adresse zu kopieren und einzufügen.
Sie können auch Text hinzufügen, der anstelle der E-Mail-Adresse selbst angezeigt wird. Wenn Sie beispielsweise den Text "Schreiben Sie uns" anzeigen möchten, müssen Sie den Code wie folgt ändern:
Dadurch wird auf der Webseite der Text "Schreiben Sie uns" angezeigt, der als aktiver Link zur E-Mail-Adresse dient [email protected] Auf diese Weise kann der Besucher Sie einfach per E-Mail kontaktieren.
Wie mache ich eine E-Mail als aktiven Link
Websites enthalten häufig E-Mail-Adressen, damit Benutzer eine Nachricht an den Websitebesitzer senden können. Sie können dies tun, indem Sie einen aktiven E-Mail-Link erstellen. In diesem Artikel werden wir uns ansehen, wie man eine E-Mail zu einem aktiven Link in HTML macht.
Wenn Sie auf diesen Link klicken, öffnet der Benutzer die Standard-E-Mail-Software, die zum Schreiben der E-Mail an die angegebene Adresse bereit ist.
Sie können den Linktext auch mit einem Tag hinzufügen . In diesem Fall sieht der HTML-Code folgendermaßen aus:
Jetzt haben Sie das Wissen, wie man eine E-Mail zu einem aktiven Link in HTML macht. Verwenden Sie dies beim Erstellen von Websites, damit Benutzer Sie leicht erreichen können.
Href-Element und -Attribut
Wenn Sie in diesem Beispiel auf den Text "Dies ist ein aktiver Link" klicken, wird der Benutzer zu einer Webseite mit der Adresse weitergeleitet https://example.com .
Wenn Sie auf den Text "Schreiben Sie uns" klicken, wird eine neue E-Mail im Standard-E-Mail-Client mit der in der E-Mail-Adresse angegebenen E-Mail-Adresse geöffnet.
Aussehen des Links
Um das Aussehen eines Links festzulegen, haben wir mehrere Optionen:
- Ändern Sie die Farbe des Linktextes mit CSS:
- a
- Geben Sie Stile an, um auf den Link zu klicken:
- a:active
- Verwenden Sie Stile als Referenz, wenn Sie den Mauszeiger darüber bewegen:
- a:hover
- Verwenden Sie Stile für besuchte Links:
- a:visited
- Ändern Sie das Schriftformat und die Textgröße des Links:
- a
Diese Beispiele helfen Ihnen, das Aussehen eines Links in Ihrem HTML-Code zu ändern. Sie können alle anderen CSS-Eigenschaften anwenden, um den gewünschten Effekt zu erzielen.
Arbeiten Links auf verschiedenen Geräten
Auf mobilen Geräten wird normalerweise ein Swipe oder eine Berührung verwendet, um durch eine Webseite zu blättern, und der Link kann als Klartext wahrgenommen werden, was die Benutzerfreundlichkeit einschränkt. Es gibt jedoch mehrere Möglichkeiten, einen Link für Benutzer aktiv zu machen, die unterschiedliche Geräte verwenden.
Farbe und Unterstreichung: Obwohl einige Geräte den Stil des Links nicht ändern, wenn Sie den Mauszeiger bewegen, werden sie möglicherweise immer noch den Link mit der geänderten Farbe anzeigen. Es wird daher empfohlen, eine markierte Farbe zu verwenden, um Links von Klartext zu unterscheiden. Außerdem kann es hilfreich sein, Links einen Unterstrich hinzuzufügen, um einen spürbaren Effekt zu erzielen.
Verwenden einer Schaltfläche: Wenn Sie möchten, dass der Link auf einem mobilen Gerät besser sichtbar ist, können Sie ihn als Schaltfläche formatieren. Die Tasten sind normalerweise leichter zu erkennen und für Touchscreen-Benutzer bequemer. Um dies zu tun, können Sie CSS-Stile verwenden, um einem Link einen rechteckigen Rahmen, einen Hintergrund und einen Schatten hinzuzufügen, damit er wie eine Schaltfläche aussieht.
Symbolsymbol: Eine weitere Möglichkeit, einen Link auf mobilen Geräten sichtbarer zu machen, besteht darin, vor dem Linktext ein Symbolsymbol hinzuzufügen. Das Symbol kann mit der Art der Aktion verknüpft sein, die der Benutzer von einem Link erwarten kann. Sie können beispielsweise das Symbol "Brief" vor einem Link zu einer E-Mail oder das Symbol "Telefon" vor einem Link zu einer Telefonnummer verwenden.
Beachten Sie, dass es bei der Verwendung dieser Methoden auch wichtig ist, die Verfügbarkeit Ihres Links für Menschen mit Behinderungen zu berücksichtigen. Stellen Sie den Bildern alternativen Text zur Verfügung und stellen Sie sicher, dass der Link nicht nur mit der Maus, sondern auch mit der Tastatur oder dem Touchscreen aktiviert werden kann.
Hinzufügen eines Ankers zu einer Referenz
Gelegentlich müssen wir beim Erstellen von E-Mails möglicherweise einen Anker zum Link hinzufügen, damit der Benutzer die gewünschte Stelle auf der Webseite nach dem Navigieren leichter finden kann.
Ein Anker in HTML ist eine bestimmte Stelle auf einer Webseite, zu der Sie navigieren können, wenn Sie auf einen Link klicken, der diesen Anker enthält.
Um einem Link in HTML einen Anker hinzuzufügen, verwenden wir das Attribut "href" und das Gittersymbol "#" mit der Anker-ID. Um beispielsweise einen Anker-Verweis mit der ID "section1" zu erstellen, fügen wir den folgenden Code hinzu:
| HTML-Code | Die Beschreibung |
|---|---|
| Gehe zu Abschnitt 1 | Erstellt einen Anker-Verweis mit der ID "section1" |
Nachdem Sie dem Link einen Anker hinzugefügt haben, müssen Sie einen Ort auf der Webseite hinzufügen, an dem der Anker platziert werden soll. Dazu müssen wir das HTML-Element "a" mit dem Attribut "id" verwenden, das den Wert der Anker-ID enthält, die wir im Link angegeben haben.
Um beispielsweise einen Anker mit der ID "section1" zu erstellen, fügen wir den folgenden Code hinzu:
| HTML-Code | Die Beschreibung |
|---|---|
| Erstellt einen Platz auf der Webseite für den Anker mit der ID "section1" |
Nachdem Sie einen Anker und seine Position auf einer Webseite hinzugefügt haben, kann der Benutzer auf den gewünschten Teil der Seite zugreifen, indem er auf den entsprechenden Link klickt.
Öffnet den Link in einem neuen Fenster
Um einen Link in einem neuen Fenster zu öffnen, müssen Sie dem Link-Tag ein target-Attribut hinzufügen. Der Wert dieses Attributs muss "_blank" sein. Um beispielsweise einen aktiven E-Mail-Link zu erstellen, verwenden Sie ein Tag wie folgt:
Wenn Sie also auf den Link "[email protected]", die E-Mail wird in einem neuen Fenster oder in einem neuen Tab im Browser des Benutzers geöffnet. Dies ist sehr nützlich, wenn es wichtig ist, den Benutzer nicht zu unterbrechen und ihm die Möglichkeit zu geben, zur vorherigen Seite zurückzukehren.
Wenn Sie einen Verweis auf eine externe Ressource in einem neuen Fenster anstelle Ihrer Website öffnen möchten, können Sie das Attribut target="_blank" verwenden, ohne eine href anzugeben. Zum Beispiel:
Wenn Sie nun auf den Link "Link in neuem Fenster öffnen" klicken, wird ein neuer Tab mit einer leeren Seite geöffnet. Dies kann nützlich sein, wenn Sie dem Benutzer einen Link zu einer externen Ressource bereitstellen möchten, ihn jedoch nicht von Ihrer Website entfernen möchten.
