Das Erstellen eines Links zu einem Telefon kann für viele Webseiten nützlich sein, insbesondere für mobile Geräte. Dadurch können Benutzer auf einen Link klicken und sofort einen Anruf tätigen. In diesem Tutorial erfahren Sie, wie Sie einen Telefonlink in HTML erstellen.
Schritt 1: Der erste Schritt besteht darin, den HTML-Code zu schreiben, um einen Link zum Telefon zu erstellen. Dazu können Sie ein Tag und ein Attribut verwenden href mit dem Protokoll "tel:" und einer Telefonnummer im Format "tel:Telefonnummer". Zum Beispiel:
Wenn Sie in diesem Beispiel auf den Link "+7 (123) 456-789" klicken, kann der Benutzer die angegebene Nummer sofort auf seinem Telefon wählen.
Schritt 2: Um das Aussehen eines Telefonlinks zu verbessern, können Sie CSS verwenden, um Stile hinzuzufügen, z. B. das Ändern der Linkfarbe oder das Hinzufügen eines Telefonsymbols. Sie können beispielsweise eine "phone-link" -Klasse hinzufügen und ihre Stile in CSS definieren:
Sie können diese Klasse dann auf Ihre Telefonreferenz anwenden:
Dadurch können Sie die Farbe des Links in Blau ändern und den Unterstrich entfernen.
Erster Schritt: Erstellen Sie einen Link mit dem Tag "a"
Eine der einfachsten Möglichkeiten, einen Telefonlink in HTML zu erstellen, ist die Verwendung des Tags "a". Dieses Tag dient zum Erstellen von Links und kann verwendet werden, um einen Link zu einer Telefonnummer zu erstellen.
Um einen Link zum Telefon in HTML zu erstellen, müssen Sie das spezielle Protokoll "tel" verwenden. Mit dem "tel" -Protokoll können Sie eine Verbindung zu der im Link angegebenen Telefonnummer herstellen.
Verwenden Sie die folgende Syntax, um eine Telefonreferenz zu erstellen:
- Öffnen Sie das Tag "a" und fügen Sie das Attribut "href" hinzu.
- Geben Sie im Wert des Attributs "href" "tel" an:", nach dem Sie eine Telefonnummer hinzufügen, ohne Leerzeichen oder andere Trennzeichen.
- Schließen Sie das Tag "a".
Im Folgenden finden Sie ein Beispiel für das Erstellen eines Links zu einer Telefonnummer:
Im obigen Beispiel wird der Link als "+123456789" angezeigt, und wenn Sie darauf klicken, wird eine Telefonnummer aufgerufen.
Es ist wichtig zu beachten, dass Sie bei Verwendung des "tel" -Protokolls keine Zeichen hinzufügen können, außer Zahlen und dem "+" -Zeichen. Wenn Sie also einen Ländercode angeben möchten, müssen Sie ihn unbedingt in Ihre Telefonnummer aufnehmen.
Jetzt wissen Sie, wie Sie mit dem "a" -Tag in HTML einen Telefonlink erstellen. In den folgenden Abschnitten werden erweiterte Methoden zum Erstellen von Telefonlinks erläutert.
Zweiter Schritt: Fügen Sie das Protokoll "tel:" hinzu, um die Telefonreferenz zu verarbeiten
Nachdem Sie nun bereits ein Element mit Text und Telefonnummer haben, müssen Sie das Protokoll "tel:" hinzufügen, um den Verweis auf das Telefon zu verarbeiten. Protokoll "tel:" ermöglicht es dem Browser oder mobilen Gerät, den Link zum Telefon korrekt zu interpretieren und dem Benutzer Handlungsoptionen anzubieten.
Um Ihrem HTML-Code das Protokoll "tel:" hinzuzufügen, fügen Sie es einfach vor die Telefonnummer im Attribut ein href. Zum Beispiel:
Hier tel:+1234567890 - dies ist ein Beispiel für einen Telefonlink, wobei "+1234567890" die Telefonnummer ist, an die Sie anrufen möchten.
Es ist wichtig zu beachten, dass das Präfix "+" verwendet wird, um eine internationale Ländervorwahl anzugeben, gefolgt von einer Telefonnummer in dem in diesem Land verwendeten Format.
Wenn Sie in einem mobilen Browser oder Gerät auf einen solchen Link klicken, wird der Benutzer aufgefordert, eine der folgenden Aktionen auszuführen: eine Telefonnummer direkt auf dem Gerät wählen, eine Nummer zu Kontakten hinzufügen oder für zukünftige Verwendung speichern.
Verwenden des Protokolls "tel:" mit der Verarbeitung eines Links zum Telefon können Sie Ihre Webseite benutzerfreundlicher gestalten, insbesondere für Benutzer von mobilen Geräten. Sie können Sie sofort kontaktieren, indem sie eine Telefonnummer mit einem Tastendruck eingeben.
Dritter Schritt: Fügen Sie die Telefonnummer zum Link hinzu
Jetzt, da wir die Grundlage für die Erstellung eines Telefonverknüpfens haben, müssen Sie eine echte Telefonnummer hinzufügen.
Um eine Telefonnummer zu einem Link hinzuzufügen, müssen Sie die "Telefonnummer" im href-Attribut durch die tatsächliche Telefonnummer ersetzen, die Sie verwenden möchten. Das Format der Telefonnummer kann je nach den Anforderungen Ihrer Website oder Ihres Dienstes variieren.
Zum Beispiel, wenn Ihre Telefonnummer +1234567890 ist, würde Ihr href Attribut wie folgt aussehen:
Hier ist "tel:" ein Schema, das den Browser anweist, die Telefonanwendung zu öffnen, um die angegebene Nummer zu wählen.
Sobald Sie die tatsächliche Telefonnummer zum href hinzugefügt haben Attribut, wird Ihr Link zum Telefon wie folgt aussehen:
Wenn der Benutzer nun von einem mobilen Gerät aus auf diesen Link klickt, kann er die angegebene Telefonnummer wählen.
Dies war der dritte Schritt beim Erstellen einer Telefonreferenz in HTML. Als nächstes werden wir uns die anderen Möglichkeiten ansehen, um den Link anzupassen.
Vierter Schritt: Fügen Sie den Text hinzu, der als Link angezeigt wird
Nun, da wir den Link erstellt haben, fügen wir einen Text hinzu, der auf der Seite angezeigt wird. Dieser Text weist normalerweise darauf hin, dass ein Link zu einem Telefon oder einem entsprechenden Inhalt führt.
In diesem Beispiel wird "Call Me" auf der Seite als Link angezeigt, auf den Benutzer klicken können, um die angegebene Telefonnummer (1234567890) anzurufen.
Beachten Sie, dass der als Link angezeigte Text mit Tags formatiert werden kann, um den Stil zu ändern oder einen Akzent hinzuzufügen, wie z. B. , usw.
Nachdem Sie nun Text hinzugefügt haben, der als Link angezeigt wird, können Sie bei Bedarf mit dem Anpassen anderer Attribute für den Link oder dem Formatieren des Textes beginnen.
Im Folgenden finden Sie ein Beispiel für die Verwendung einer ungeordneten Liste zum Anzeigen eines Links:
Und das ist alles! Jetzt haben Sie einen Link zum Telefon mit dem Text, der auf der Seite angezeigt wird.
