HTML – eine der wichtigsten Webseiten-Markup-Sprachen.
Das Erstellen einer Schaltfläche in HTML ist eine der ersten Aufgaben, mit denen ein angehender Webentwickler konfrontiert ist. Dies ist jedoch ein sehr einfaches Verfahren. In diesem Artikel erfahren Sie, wie Sie Schritt für Schritt eine Schaltfläche von Grund auf neu erstellen, indem Sie nur grundlegende HTML-Tags verwenden.
Schritt 1: Beginnen wir mit dem Erstellen einer Schaltfläche in HTML. Dafür benötigen Sie ein Tag . Zum Beispiel:
Schritt 2: Die Schaltfläche wurde bereits erstellt, es wurde jedoch keine Aktion zugewiesen. Um einer Schaltfläche eine Aktion hinzuzufügen, verwenden Sie das onclick-Attribut. Um beispielsweise eine Schaltfläche zu erstellen, auf die eine Nachricht angezeigt wird, schreiben Sie:
Schritt 3: Der Knopf ist fertig! Jetzt können Sie Stilisierung hinzufügen, Größe oder Farbe mit CSS ändern. Sie können der Schaltfläche auch ein Bild oder ein Symbol hinzufügen, indem Sie ein Tag einfügen innerhalb des Tags .
Das ist alles! Jetzt haben Sie alle Informationen, die Sie benötigen, um eine Schaltfläche in HTML zu erstellen. Üben und experimentieren Sie mit verschiedenen Möglichkeiten, um einzigartige und kreative Schaltflächen auf Ihren Webseiten zu erstellen.
Warum brauchen Sie Schaltflächen in HTML
Mit den Schaltflächen können Sie interaktive Elemente wie Formulare, Chatbots, Einkaufswagen und vieles mehr erstellen. Sie können verwendet werden, um Daten an einen Server zu senden, zu einer anderen Seite zu navigieren, eine bestimmte Funktion aufzurufen oder bestimmte Inhalte aus-/anzuzeigen.
Schaltflächen enthalten normalerweise Text oder ein Bild, das dem Benutzer hilft zu verstehen, welche Aktion beim Klicken auf die Schaltfläche ausgeführt wird. Die Schaltflächen können auch mit CSS gestylt werden, um dem Design der Seite zu entsprechen und die Aufmerksamkeit des Benutzers zu erregen.
Schaltflächen sind ein wesentlicher Bestandteil der Benutzeroberfläche und ermöglichen das Erstellen von benutzerfreundlicheren und funktionelleren Webseiten.
Vorbereiten der Erstellung einer Schaltfläche
Bevor Sie mit dem Erstellen einer Schaltfläche auf Ihrer Webseite beginnen, benötigen Sie einige Vorbereitungen:
- Verwenden Sie einen Texteditor: Um eine Schaltfläche zu erstellen, benötigen Sie einen Texteditor wie Notepad++, Sublime Text oder andere. Öffnen Sie den Editor und erstellen Sie ein neues Dokument.
- Kennen Sie die Arbeit mit HTML: Um eine Schaltfläche zu erstellen, müssen Sie die Grundlagen von HTML kennen. Stellen Sie sicher, dass Sie mit den grundlegenden HTML-Tags wie , , und anderen vertraut sind.
- Bereiten Sie eine allgemeine Dokumentstruktur vor: Erstellen Sie eine grundlegende HTML - Struktur des Dokuments, einschließlich Tags und . Innerhalb des Tags können Sie eine Schaltfläche platzieren.
- Bestimmen Sie die Position der Schaltfläche: Entscheiden Sie, wo Sie die Schaltfläche auf der Webseite platzieren möchten. Dies kann innerhalb eines Absatzes, einer Tabelle oder anderer Elemente sein.
Nach Abschluss dieser Vorbereitungsarbeit sind Sie bereit, mit dem Erstellen einer Schaltfläche auf Ihrer Webseite zu beginnen.
Definieren des Ziels einer Schaltfläche
Bevor Sie eine Schaltfläche in HTML erstellen, ist es wichtig, ihren Zweck und Zweck zu definieren. Der Zweck der Schaltfläche hängt hauptsächlich vom Verwendungskontext ab. Hier sind einige grundlegende Ziele der Schaltfläche:
1. Wechseln zu einer anderen Seite
Die Schaltfläche kann verwendet werden, um einen Link zu einer anderen Seite zu erstellen. Zum Beispiel kann eine Schaltfläche "Mehr erfahren" einen Benutzer auf eine Seite mit zusätzlichen Informationen umleiten.
2. Aktion ausführen
Die Taste kann eine bestimmte Aktion ausführen, wenn sie gedrückt wird. Beispielsweise kann die Schaltfläche "Senden" ein ausgefülltes Formular zur Verarbeitung an den Server senden.
3. Skript ausführen
Eine Schaltfläche kann dazu führen, dass ein bestimmtes Skript ausgeführt wird. Beispielsweise kann die Schaltfläche "verborgenen Inhalt anzeigen" ein Skript ausführen, das verborgenen Text oder ein ausgeblendetes Bild anzeigt.
Es ist wichtig, den Zweck einer Schaltfläche beim Erstellen in HTML zu definieren, da dies die richtige Programmierung und Stilisierung der Schaltfläche ermöglicht und die Benutzerfreundlichkeit für die Benutzer gewährleistet.
Wählen Sie den Stil und das Aussehen der Schaltfläche aus
In HTML gibt es mehrere Möglichkeiten, den Stil einer Schaltfläche festzulegen:
- Verwenden des style-Attributs im Tag
- Mit der CSS-Klasse. Es wird ein separater Block innerhalb des Tags erstellt, der die Stile für die Schaltfläche vorschreibt. Dann im Tag
- Verwenden Sie eine externe CSS-Datei. Es wird eine separate Datei mit der Erweiterung erstellt.css , das die Stile für die Schaltfläche vorschreibt. Im Tag wird dann ein Verweis auf diese Datei mithilfe des Tags hinzugefügt. Zum Beispiel:
Die Auswahl der Stilmethode hängt von den Anforderungen des Projekts und den Vorlieben des Entwicklers ab. Unabhängig von der gewählten Methode ist es wichtig, sich an einen einheitlichen Designstil zu halten, damit die Schaltflächen auf der Seite harmonisch aussehen und ihre Funktion verständlich vermitteln.
Erstellen des Haupt-HTML-Codes der Schaltfläche
Um eine Schaltfläche in HTML zu erstellen, müssen Sie ein Tag verwenden. Mit diesem Tag können Sie interaktive Elemente auf Webseiten erstellen, auf die der Benutzer klicken kann.
Beispielcode zum Erstellen einer Schaltfläche:
Dadurch wird eine Schaltfläche mit der Aufschrift "Klick mich" erstellt. Wenn Sie diesen Code in einem Browser testen, wird eine interaktive Schaltfläche angezeigt, auf die Sie klicken können.
Beachten Sie, dass das schließende Tag ist obligatorisch und muss angegeben werden, damit die Schaltfläche korrekt angezeigt wird.
Sie können dem Tag zusätzlich zu einer Textbeschriftung Attribute hinzufügen, z. B. id, class und style um einen eindeutigen Bezeichner anzugeben, eine Schaltflächenklasse anzugeben oder Stile hinzuzufügen.
In diesem Fall hat die Schaltfläche die eindeutige ID "myButton", die Klasse "btn-style" und die Textfarbe ist blau.
Auf diese Weise können Sie mithilfe eines Tags und durch Hinzufügen von Attributen und Stilen eine Vielzahl von Schaltflächen mit dem gewünschten Erscheinungsbild und Verhalten auf der Webseite erstellen.
