Création d'un bouton cliquable en HTML

Introduction

L'élément HTML <button> est utilisé pour créer un bouton sur une page web qui peut être utilisé pour effectuer certaines actions. Dans ce tutoriel, nous allons apprendre à créer un bouton à l'aide d'HTML.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez rafraîchir l'onglet Web 8080 pour prévisualiser la page web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 86%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Créer le fichier HTML

Créez un fichier HTML appelé index.html. Dans ce fichier, nous allons créer une structure HTML de base.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Création d'un bouton en HTML</title>
  </head>
  <body></body>
</html>

Créer un bouton

Pour créer un bouton, nous utilisons l'élément HTML <button>. Nous pouvons ajouter du texte, des images ou du contenu multimédia entre les balises d'ouverture et de fermeture de l'élément bouton.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Création d'un bouton en HTML</title>
  </head>
  <body>
    <button>Cliquez sur moi!</button>
  </body>
</html>

Ajouter un attribut onclick

Nous pouvons ajouter un attribut onclick à l'élément bouton pour exécuter une fonction JavaScript lorsque le bouton est cliqué.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Création d'un bouton en HTML</title>
  </head>
  <body>
    <button onclick="alert('Bonjour le monde!')">Cliquez sur moi!</button>
  </body>
</html>

Ajouter un style CSS

Nous pouvons utiliser le CSS pour styliser le bouton selon nos besoins. Ici, nous ajoutons quelques styles CSS de base pour changer la couleur du texte, la couleur d'arrière-plan et le rembourrage du bouton.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Création d'un bouton en HTML</title>
    <style>
      button {
        background-color: #4caf50; /* Vert */
        border: none;
        color: blanc;
        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('Bonjour le monde!')">Cliquez sur moi!</button>
  </body>
</html>

Résumé

Dans ce tutoriel, nous avons appris à créer un bouton à l'aide d'HTML. Nous avons également appris à ajouter une fonction JavaScript à l'élément bouton et à appliquer une mise en forme CSS au bouton. En maîtrisant l'élément bouton, vous pouvez facilement créer des boutons pour effectuer des actions sur votre page web.

Bouton cliquable en HTML