Cara Membuat Alert Konfirmasi di HTML

By Posted on

Cara Membuat Alert Konfirmasi di HTML – Dalam dunia web development, pesan alert konfirmasi sangat penting untuk memberi pengguna pemahaman tentang tindakan yang akan dilakukan. Dalam tutorial ini, kelashtml akan memandu Anda langkah demi langkah dalam membuat pesan alert konfirmasi menggunakan HTML dan CSS. Tutorial ini dirancang khusus untuk pemula, sehingga Anda tidak perlu memiliki pengetahuan teknis yang mendalam untuk mengikuti.

Alat yang Harus Anda Siapkan

Berikut ini beberapa alat yang harus Disiapkan untuk membuat alert konfirmasi di html:

  • Perangkat laptop,
  • Notepad++ (Text editor code),
  • Google chrome (Web browser),
  • Niat yang kuat.

Cara Membuat Alert Konfirmasi di HTML

1. Membuat Folder Project Alert Konfirmasi

Langkah pertama adalah membuat folder proyek yang akan kita gunakan untuk menyimpan semua file terkait dengan pembuatan pesan alert konfirmasi. Anda dapat memberi nama folder tersebut sesuai dengan preferensi Anda, misalnya “alert-konfirmasi-project“.

2. Membuat File HTML untuk Pesan Alert Konfirmasi

Buka editor teks favorit Anda dan buatlah file HTML baru dengan nama “alert_konfirmasi.html“. Ini akan menjadi tempat kita menulis kode HTML untuk membuat pesan alert konfirmasi.

Baca Juga:  Cara Membuat Background Color di HTML

Berikut ini source code html yang harus Anda tambahkan untuk membuat alert konfirmasi di html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alert Konfirmasi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Pesan Alert Konfirmasi</h1>
    <button onclick="showConfirmation()">Klik untuk Konfirmasi</button>

    <script>
        function showConfirmation() {
            if (confirm("Apakah Anda yakin ingin melanjutkan?")) {
                alert("Tindakan berhasil dilakukan!");
            } else {
                alert("Tindakan dibatalkan.");
            }
        }
    </script>
</body>
</html>
 

3. Membuat File CSS untuk Styling

Kita juga ingin memberi tampilan yang menarik untuk pesan alert konfirmasi kita. Untuk itu, kita akan membuat file CSS. Buatlah file baru dengan nama “style.css” di dalam folder proyek.

Baca Juga:  Cara Membuat Input Tanggal di HTML

Berikut ini source code css yang harus Anda tambahkan untuk membuat alert konfirmasi di html:

/* style.css */
body {
    font-family: Arial, sans-serif;
    text-align: center;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}
ale

4. Mengubah Tampilan Pesan Alert Konfirmasi

Anda dapat mengubah gaya pesan alert konfirmasi sesuai keinginan Anda dengan menyesuaikan properti CSS di dalam file “style.css“.

5. Menyimpan & Melihat Tampilan

Setelah menyelesaikan semua langkah di atas, simpan semua perubahan yang telah Anda lakukan. Buka file “alert_konfirmasi.html” menggunakan browser web Anda untuk melihat hasilnya. Anda sekarang akan melihat tombol untuk “Klik untuk Konfirmasi”. Ketika Anda mengkliknya, Anda akan melihat pesan alert konfirmasi yang muncul.

Preview hasil

Berikut ini preview hasil alert konfirmasi di html jika Anda berhasil membuatnya:

Penutup

Sekarang Anda telah berhasil membuat pesan alert konfirmasi menggunakan HTML dan CSS! Jika Anda ingin mengembangkan lebih lanjut, Anda dapat menyesuaikan desain dan perilaku pesan alert sesuai kebutuhan proyek Anda. Selamat mencoba!

Related posts:

Baca Juga:  Cara Membuat Checkbox di HTML