Membuat Media Pembelajaran HTML & CSS Menggunakan Gemini AI
Oleh: Solbi, S.Pd., M.Pd.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 pengunggahan ke portal sekolah, cara menyisipkan gambar, hingga melihat contoh hasil laman yang telah selesai dibuat.
Buka peramban (browser) di laptop atau HP Anda, lalu kunjungi situs resmi Gemini AI di gemini.google.com . Masuk menggunakan akun Google Anda.
Salin (*copy*) teks perintah (prompt) berikut, lalu tempelkan (*paste*) pada kolom obrolan Gemini AI, edit ganti nama, materi, 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 Bahasa Indonesia Kelas 5 SDLB Tunadaksa, materi tentang Menyebutkan nama tokoh dan watak utama dari dongeng/fabel. Laman responsif di HP, ada navigasi materi dan LKPD, hasil LKPD terkirim langsung ke WA Guru (082214222280)."
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** di laptop/komputer Anda. Kemudian tempelkan (*paste*) kode yang telah disalin tadi dengan menekan tombol Ctrl + V.
Klik menu File > Save As... pada Notepad, kemudian atur ketentuan penyimpanan sebagai berikut:
bahasa1-kelas5d-suhaidi.html
Cari lokasi file bahasa1-kelas5d-suhaidi.html yang sudah disimpan. Klik ganda (*double click*) pada file tersebut untuk membukanya di browser (seperti Google Chrome atau Microsoft Edge).
File HTML yang sudah dibuat jadikan file .ZIP terlebih dahulu.
Buka situs web https://slbnsrisoedewi.sch.id, cari dan klik ikon Unggah Materi PJJ, lalu pilih jurusan dan masukkan password yang sesuai.
Pilih tombol Choose File, lalu cari dan pilih file yang sudah di-ZIP sebelumnya.
Klik tombol Unggah Sekarang untuk mengunggah materi.
Copy materi dongeng/cerita yang ingin dibuatkan gambarnya.
Buka peramban dan masuk ke Gemini AI.
Perintahkan Gemini AI menggunakan prompt berikut:
"Buatkan gambar untuk materi pelajaran ini: Kisah Semut dan Belalang. Pada suatu hari di musim panas, **Semut** bekerja keras mengumpulkan makanan untuk persediaan musim dingin. Semut selalu rajin dan tidak pernah mengeluh. Sementara itu, **Belalang** hanya malas-malasan sambil bernyanyi. Belalang menertawakan Semut yang terlalu sibuk bekerja. Namun ketika musim dingin tiba, Belalang kelaparan karena tidak punya makanan. Semut yang baik hati mau berbagi makanan dengan Belalang."
Setelah gambar selesai dibuat, unduh dan beri nama file gambar tersebut, misalnya: semut-belalang.jpg.
Lalu masukkan kembali kode HTML awal (bahasa1-kelas5d-suhaidi.html) ke Gemini AI dan perintahkan:
"Sisipkan gambar semut-belalang.jpg pada bagian materi."