Erstellen eines klickbaren Buttons in HTML

Einführung

Das HTML <button>-Element wird verwendet, um einen Button auf einer Webseite zu erstellen, mit dem bestimmte Aktionen ausgeführt werden können. In diesem Tutorial lernen wir, wie man einen Button mit HTML erstellt.

Hinweis: Sie können im index.html programmieren und lernen, wie man HTML in Visual Studio Code schreibt. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Dies ist ein Guided Lab, das schrittweise Anweisungen bietet, um Ihnen beim Lernen und Üben zu helfen. Befolgen Sie die Anweisungen sorgfältig, um jeden Schritt abzuschließen und praktische Erfahrungen zu sammeln. Historische Daten zeigen, dass dies ein Labor der Stufe Anfänger mit einer Abschlussquote von 86% ist. Es hat eine positive Bewertungsrate von 100% von den Lernenden erhalten.

Erstellen Sie die HTML-Datei

Erstellen Sie eine HTML-Datei namens index.html. In dieser Datei werden wir eine grundlegende HTML-Struktur erstellen.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body></body>
</html>

Erstellen Sie einen Button

Um einen Button zu erstellen, verwenden wir das HTML <button>-Element. Wir können zwischen den Anfangs- und Schließtags des Button-Elements Text, Bilder oder Multimediainhalte hinzufügen.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button>Click Me!</button>
  </body>
</html>

Fügen Sie ein onclick-Attribut hinzu

Wir können ein onclick-Attribut zum Button-Element hinzufügen, um eine JavaScript-Funktion auszuführen, wenn der Button angeklickt wird.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

Fügen Sie CSS-Stil hinzu

Wir können CSS verwenden, um den Button nach unseren Anforderungen zu stylen. Hier fügen wir einige grundlegende CSS hinzu, um die Textfarbe, die Hintergrundfarbe und den Innenabstand des Buttons zu ändern.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Creating a Button in HTML</title>
    <style>
      button {
        background-color: #4caf50; /* Grün */
        border: none;
        color: weiß;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button onclick="alert('Hello World!')">Click Me!</button>
  </body>
</html>

Zusammenfassung

In diesem Tutorial haben wir gelernt, wie man einen Button mit HTML erstellt. Wir haben auch gelernt, wie man einer Button-Element eine JavaScript-Funktion hinzufügt und CSS-Stil an den Button anwendet. Indem Sie das Button-Element beherrschen, können Sie leicht Buttons erstellen, um Aktionen auf Ihrer Webseite auszuführen.

HTML-Klickbarer Button