Mengapa Bab Ini Ada: Rp50.000 yang Hampir Membuatku Jantung Berdebar
Alasan menulis bab ini sederhana: seorang teman menghabiskan 50 ribu rupiah untuk membuat halaman web roda undian sederhana.
Saat mendengarnya, aku hampir terkena serangan jantung.
Bukan karena 50 ribu itu mahal, tapi hal ini bisa dibuat dalam 5 menit dengan AI gratis!
Serius, jika kamu punya kebutuhan seperti ini, bahkan jika kamu langsung mentransferku 50 ribu dan biarkan aku mengajarimu langkah demi langkah, itu lebih baik daripada membayar layanan tersebut. Setidaknya tutorialku gratis, dan aku akan menjelaskan setiap langkah dengan jelas.
Jadi bab ini adalah tambahan khusus, khusus mengajarkanmu: bagaimana menggunakan AI gratis untuk membuat halaman HTML yang sederhana namun praktis.
Pengingat Penting: Kuasai Versi Web Gratis Terlebih Dahulu
Sebelum kita mulai, saya ingin menekankan satu hal:
Versi web AI saat ini sudah sangat canggih. Tidak perlu pengetahuan pemrograman, tidak perlu instalasi perangkat lunak, cukup buka browser dan gunakan.
Apa yang bisa dilakukan versi web AI?
- Mengobrol denganmu dan menjawab pertanyaan
- Mengenali gambar dan menganalisis konten
- Menulis kode dan membuat halaman web
- Membuat PPT dan laporan
- Menerjemahkan dan merangkum dokumen
- Dan masih banyak lagi…
Saranku: pemula sebaiknya menguasai AI berbasis web gratis terlebih dahulu sebelum mempertimbangkan alat canggih seperti API.
Mengapa? Karena versi web:
- Sepenuhnya gratis (atau memiliki kuota gratis yang besar)
- Sederhana digunakan, tanpa kurva belajar
- Sudah cukup canggih
- Kamu bisa langsung bertanya pada AI jika mengalami masalah
Sekarang mari kita mulai topik utama: Gunakan AI untuk Membuat Halaman Web Roda Undian.
Gunakan AI Studio untuk Membuat Halaman HTML
Langkah 1: Masuk ke Google AI Studio
Kita menggunakan Google AI Studio, platform AI gratis resmi dari Google.
Mengapa memilihnya?
- Sepenuhnya gratis
- Gemini 3 Pro sangat canggih
- Cocok untuk tugas kompleks seperti membuat halaman web
Langkah-langkah:
- Buka https://aistudio.google.com
- Masuk dengan akun Google-mu (membutuhkan VPN/proxy)
- Masuk ke antarmuka utama
Langkah 2: Pilih Playground dan Model
Setelah masuk, kamu akan melihat antarmuka utama AI Studio.
Langkah-langkah:
- Klik “Playground” di menu kiri
- Di pemilih model di kanan atas, pilih Gemini 3 Pro
- Jangan pilih Flash; Pro lebih mumpuni
- Terutama untuk tugas kompleks seperti menulis kode
- Pastikan di kiri adalah antarmuka obrolan dengan kotak input di bagian bawah
Sekarang kamu siap mengobrol dengan AI.
Langkah 3: Masukkan Prompt untuk Membiarkan AI Membuat Halaman Web
Langkah ini kunci: kamu perlu memberi tahu AI dengan jelas apa yang kamu inginkan.
Semakin detail, semakin baik! Jangan hanya bilang “Bantu saya buat halaman undian”; spesifikkan:
- Seperti apa tampilannya
- Fitur apa yang dimilikinya
- Cara menggunakannya
- Gaya seperti apa
Contoh Prompt Lengkap
Salin teks di bawah ini dan tempelkan ke kotak input AI Studio:
Please help me generate a lottery wheel webpage.
If no prizes are specified, use default prizes: Grand Prize, First Prize, Second Prize, Third Prize, Lucky Prize, Try Again.
Functional requirements:
- Beautiful wheel design, supporting 6-8 sectors
- A "Start Lottery" button in the center
- Click the button to spin the wheel
- The spin should have acceleration and deceleration effects for realism
- After stopping, a popup shows the result
- Click the popup to close and spin again
Design requirements:
- Festive and grand style (mainly red and gold)
- The wheel border should have texture
- Each sector should have alternating colors
- A pointer indicating the current position
- Responsive for mobile and desktop
After completion, please explain:
1. How to open and use it
2. How to modify the prize names
3. How to adjust the winning probability
Use example prizes: iPhone 16, AirPods, 100 yuan red envelope, 50 yuan red envelope, Try Again
Langkah-langkah:
- Salin dan tempel prompt di atas ke kotak input
- Klik tombol “Run” atau tekan Enter
- Tunggu AI menghasilkan (biasanya 10-30 detik)
Langkah 4: AI Akan Mengembalikan Kode HTML Lengkap
Setelah AI selesai menghasilkan, kamu akan melihat blok kode yang besar.
Respons AI biasanya mencakup:
- Kode HTML: file halaman web lengkap
- Petunjuk penggunaan: cara membuka dan memodifikasi
- Panduan kustomisasi: cara mengubah hadiah dan menyesuaikan probabilitas
Kodenya terlihat seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lottery Wheel</title>
<style>
/* Style code here */
</style>
</head>
<body>
<!-- Webpage content here -->
<script>
// Function code here
</script>
</body>
</html>
Jangan takut! Halaman web sudah bisa langsung dijalankan! Ikuti saja tangkapan layar dan klik.
Langkah 5: Ubah Konten Halaman Web (Ganti Hadiah, Sesuaikan Probabilitas)
Halaman web yang dihasilkan AI biasanya sudah cukup lengkap, tetapi kamu mungkin ingin:
- Mengubah nama hadiah
- Menyesuaikan probabilitas kemenangan
- Mengubah warna
Jangan khawatir, kamu tidak perlu memahami kode. Teruslah bertanya pada AI!
Lanjutkan Percakapan, Biarkan AI Membantumu Memodifikasi
Langkah-langkah:
- Jangan tutup jendela obrolan AI Studio
- AI mengingat percakapan sebelumnya
- Kamu bisa terus bertanya di bawah
- Masukkan permintaan modifikasimu
Contoh 1: Ubah Nama Hadiah
Ketik di kotak input:
Add a settings interface to this webpage to set the probabilities and specific prizes for different awards.
Ulangi Sampai Kamu Puas
Ini adalah proses inti membuat sesuatu dengan AI:
- Nyatakan dengan jelas apa yang kamu inginkan
- AI menghasilkan versi pertama
- Cobalah, temukan masalah
- Beri tahu AI masalahnya, biarkan AI memperbaikinya
- Ulangi langkah 3-4 sampai sempurna
Poin penting:
- Jangan takut repot, coba beberapa kali
- Ubah satu hal dalam satu waktu agar mudah dikendalikan
- Jika AI mengubah sesuatu yang salah, katakan “Tidak, kembalikan ke versi sebelumnya”
Langkah 6: Unduh Halaman Web Akhir
Sekarang kamu memiliki halaman web undian yang sempurna, bagaimana cara mengunduhnya?
Cukup klik tombol unduh, file akan terunduh ke perangkat lokalmu, dan kamu bisa membukanya untuk digunakan!
Apa yang Bisa Dilakukan Halaman HTML? 10 Rekomendasi Alat Mini Praktis
Sekarang, kamu mungkin berpikir: selain undian, halaman web apa lagi yang bisa kubuat dengan AI?
Jawabannya: hampir semua alat mini sederhana!
Berikut 10 contoh praktis yang bisa langsung kamu minta AI buatkan:
1. Alat Penerjemah Online
Prompt:
Make an online translation webpage that supports Chinese-English translation with a clean interface.
2. Pengenalan Teks Gambar (OCR)
Prompt:
Make a webpage that can upload an image, recognize text in the image, and allow copying.
3. Daftar Tugas (To-Do List)
Prompt:
Make a to-do list webpage that can add, delete, and mark tasks as complete, with data saved in the browser.
4. Hitung Mundur / Timer
Prompt:
Make a multi-functional timer webpage: countdown, Pomodoro timer, stopwatch.
5. Generator Kata Sandi Acak
Prompt:
Make a password generator that can set length and complexity, with one-click copy.
6. Kalkulator BMI
Prompt:
Make a BMI health calculator that inputs height and weight and displays health advice.
7. Generator Kode QR
Prompt:
Make a QR code generation webpage that inputs text or URL, generates a QR code, and allows download.
8. Pemilih Warna
Prompt:
Make a color tool that can select colors, display RGB/HEX values, and provide color scheme suggestions.
9. Editor Markdown
Prompt:
Make a simple Markdown editor with input on the left and real-time preview on the right.
10. Pelacak Pengeluaran
Prompt:
Make a simple expense tracking webpage that can record income and expenses and display statistical charts.
Fitur umum dari alat-alat ini:
- Semua berupa file HTML tunggal
- Tidak memerlukan server
- Cukup dibuka di browser
- Sepenuhnya gratis
Pertanyaan yang Sering Diajukan
Q1: Saya sama sekali tidak paham kode, bisakah saya melakukannya?
A: Ya, bisa! Yang perlu kamu tahu hanyalah:
- Salin dan tempel
- Simpan file
- Buka file dengan browser
Hanya tiga langkah ini, bahkan anak kecil pun bisa.
Q2: Bagaimana jika kode yang dihasilkan AI tidak sempurna?
A: Itu wajar! Lanjutkan percakapan dengan AI:
- “Ada bug di sini, tombolnya tidak berfungsi saat diklik”
- “Warna ini jelek, ganti dengan yang bagus”
- “Bisakah kamu menambahkan efek suara?”
AI akan terus memperbaiki berdasarkan masukanmu.
Q3: Bisakah saya menggunakan halaman web buatan AI untuk tujuan komersial?
A: Secara teknis ya, tetapi perhatikan:
- Kode yang dihasilkan AI biasanya tidak memiliki batasan hak cipta
- Namun jika untuk proyek klien, uji coba secara menyeluruh
- Untuk proyek komersial kompleks, tetap disarankan menyewa pengembang profesional
Q4: Mengapa file HTML saya tidak bisa dibuka?
A: Penyebab umum:
- Ekstensi file salah: pastikan
.html, bukan.html.txt - Kode tidak lengkap: pastikan kamu menyalin semua kode
- Masalah browser: coba browser lain
Q5: Bisakah digunakan di ponsel?
A: Ya! Dua cara:
- Pindahkan file HTML ke ponsel dan buka dengan browser ponsel
- Unggah ke platform seperti Netlify dan akses melalui URL (disarankan)
Q6: Saya ingin memodifikasi kode tetapi tidak tahu caranya?
A: Jangan memodifikasinya sendiri! Tanyakan pada AI:
- “Saya ingin mengubah warna latar belakang menjadi biru”
- “Saya ingin membuat font judul lebih besar”
- “Saya ingin menambahkan musik latar”
Biarkan AI memodifikasinya untukmu, lalu salin kode barunya.
Ringkasan
Hari ini kamu belajar:
- Cara menggunakan Google AI Studio untuk membuat halaman HTML
- Cara menulis prompt yang jelas untuk memberi tahu AI kebutuhanmu
- Cara menyimpan file HTML dan membukanya di browser
- Cara terus meningkatkan halaman web melalui percakapan
- Cara membagikan atau menyebarkan halaman webmu
Ide inti:
- Tidak perlu pengetahuan pemrograman
- Tidak perlu uang
- Hanya perlu tahu cara berkomunikasi dengan AI
- Buat alat praktis dalam 5 menit
Lain kali jika seseorang memintamu membuat halaman web sederhana, kamu bisa:
- Menggunakan AI untuk melakukannya dalam 5 menit
- Menagih 50 ribu itu (bercanda)
- Atau ajari mereka melakukannya sendiri
Serius, berhentilah membuang-buang uang!