Panduan Praktis Interaktif

Tutorial Membuat Laman Materi Ajar Interaktif

Membuat Media Pembelajaran HTML & CSS Menggunakan Gemini AI

Oleh: Solbi, S.Pd., M.Pd.

Beranda Langkah-Langkah Menambah Gambar Lihat Hasil Contoh Usaha

Tentang Panduan Ini

Panduan ini dirancang khusus untuk membantu Bapak/Ibu Guru dalam membuat web media pembelajaran interaktif secara mandiri tanpa memerlukan latar belakang pemrograman yang rumit. 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

6 Langkah Utama

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:

Prompt Gemini AI

"Buatkan laman Materi Ajar Mapel Bahasa Indonesia Kelas 5 SDLB dalam versi kode HTML dan CSS, materinya tentang: Menunjukkan gambar peristiwa penting berdasarkan dongeng yang disimak. Ada navigasi Materi dan LKM (Lembar Kerja Murid). LKM buat 10 soal pilihan ganda (A-D) dan 5 isian singkat. Responsif untuk pengguna handphone. Warna laman solid, animasi tampilan menarik, hasil lkpd terkirim ke wa guru (082389232303), Guru pengampu Rio Nugraha SLB Negeri Sangir - Solok Selatan."

Salin (Copy) Kode HTML yang Dihasilkan

Setelah Gemini AI selesai merespons, ada 2 kemungkinan yang akan muncul:

Kemungkinan 1:

Muncul blok hitam berisi koding seperti pada gambar di bawah ini.

Kemungkinan 2:

Muncul pratinjau langsung. Ada dua cara: klik tulisan kode atau langsung klik download.

Tampilan Blok Koding (Kemungkinan 1)

Tampilan Pratinjau & Download (Kemungkinan 2)

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:

Nama File Penyimpanan:


                                rio-nugroho-materi1-bahasa.html

Buka File HTML dengan Web Browser

Cari lokasi file rio-nugroho-materi1-bahasa.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:

Prompt Generasi Gambar

"Buatkan gambar tentang Dongeng: Semut dan Burung Merpati. Pada suatu hari, seekor Semut terjatuh ke sungai yang deras. Semut berteriak meminta tolong. Seekor Burung Merpati melihat Semut dan segera menjatuhkan sehelai daun. Semut naik ke atas daun dan selamat. Tidak lama kemudian, seorang pemburu datang hendak memanah Burung Merpati. Semut langsung menggigit kaki pemburu! Pemburu kesakitan dan memanah ke arah lain. Burung Merpati pun terbang dan selamat."

Setelah gambar selesai dibuat, pada posisi gambar klik kanan lalu pilih Simpan Sebagai (Save Image As), dan beri nama file contohnya: gbr-semut-merpati.

Perintahkan Gemini AI menggunakan prompt berikut untuk menyisipkan gambar:

Prompt Sisip Gambar

"Masukkan gambar (insert) pada laman kode html bagian Dongeng, link gambar: semut-merpati.jfif"

Buka kembali file HTML-nya atau tinggal refresh jika sudah terbuka pada browser. Inilah hasilnya gambar sudah masuk dalam laman:

Simpan File Gambar & HTML dalam Satu Folder

Pastikan file gambar (gbr-semut-merpati) diletakkan dalam 1 folder yang sama bersama file HTML materi Ajar Anda (rio-nugroho-materi1-bahasa.html). Hal ini bertujuan agar gambar dapat terbaca dan tampil dengan sempurna saat halaman web dibuka.