Tutorial Membuat Laman Materi Ajar Interaktif
Membuat Media Pembelajaran HTML & CSS Menggunakan Gemini AI
Oleh: Solbi, S.Pd., M.Pd.
Tentang Panduan Ini
Panduan ini dirancang untuk membantu Bapak/Ibu Guru dalam membuat web media pembelajaran interaktif secara mandiri. Cukup ikuti navigasi di atas untuk mempelajari langkah dasar pembuatan, cara menyisipkan gambar, hingga melihat contoh hasil laman yang telah selesai dibuat.
Langkah-Langkah Pembuatan
Buka Gemini AI
Buka peramban (browser) di laptop atau HP Anda, lalu kunjungi situs resmi Gemini AI di gemini.google.com . Masuk menggunakan akun Google Anda.
Masukkan Prompt Perintah
Salin (copy) teks perintah (prompt) berikut, lalu tempelkan (paste) pada kolom obrolan Gemini AI. Sesuaikan mapel, materi, nama, dan nomor HP masing-masing. Setelah selesai tekan tombol Kirim / Enter:
"Tolong buatkan kode HTML & CSS lengkap (dalam satu file) untuk membuat halaman web interaktif, mapel Pendidikan Pancasila Kelas 5 SD, materi tentang Menunjukkan empati dengan membantu teman atau anggota keluarga yang sedang kesulitan. Laman responsif di HP, ada navigasi materi dan LKPD. Pada bagian materi masukkan link gambar: gbr1-pancasila-dewi.jpg. LKP dibuat 10 soal pilihan ganda option A-D, dan 3 soal isian singkat. Hasil LKPD terkirim langsung ke WA Guru (082373270662). Ada header judul, guru pengampu: Dewi Fitriani, S.Pd."
Salin (Copy) Kode HTML yang Dihasilkan
Setelah Gemini AI selesai merespons dan menampilkan blok kode, klik tombol "Copy Code" (Salin Kode) yang terdapat di sudut kanan atas kotak kode tersebut.
Buka Aplikasi Notepad & Tempelkan (Paste) Kode
Buka aplikasi Notepad di laptop/komputer Anda. Kemudian tempelkan (paste) kode yang telah disalin tadi dengan menekan tombol Ctrl + V.
Simpan (Save) File HTML
Klik menu File > Save As... pada Notepad, kemudian atur ketentuan penyimpanan sebagai berikut:
- File name: Ketik (contoh)
dewi-fitriani-pancasila1.html
Buka File HTML dengan Web Browser
Cari lokasi file dewi-fitriani-pancasila1.html yang sudah disimpan. Klik ganda (double click) pada file tersebut untuk membukanya di browser (seperti Google Chrome atau Microsoft Edge).
Panduan Menambah Gambar
Copy materi yang ingin dibuatkan gambarnya.
Buka peramban dan masuk ke Gemini AI.
Perintahkan Gemini AI menggunakan prompt berikut:
"Buatkan gambar tentang materi ini:
Nilai Karakter Pancasila - Apa Itu Empati?
Empati adalah kemampuan kita untuk memahami, merasakan, dan peduli terhadap perasaan atau kesulitan orang lain. Bersikap empati berarti kita bisa membayangkan jika kita berada di posisi teman atau keluarga yang sedang mengalami kesusahan.
Sikap empati merupakan pengamalan Sila Kedua Pancasila, yaitu 'Kemanusiaan yang Adil dan Beradab'."
Setelah gambar selesai dibuat, boleh di-crop atau diunduh dan beri nama file sama dengan nama file gambar yang kita masukkan pada prompt AI pertama, misalnya: gbr1-pancasila-dewi.png.
Simpan File Gambar & HTML dalam Satu Folder
Pastikan file gambar (gbr1-pancasila-dewi.png) diletakkan dalam 1 folder yang sama bersama file HTML materi Ajar Anda (dewi-fitriani-pancasila1.html). Hal ini bertujuan agar gambar dapat terbaca dan tampil dengan sempurna saat halaman web dibuka.