Laporan Project Best Learning Wardah Inspiring Teacher Gen 8 Belajar Koding Dengan Gembira

Pada tahap Penenun Aksi dari kegiatan Wardah Inspiring Teacher Gen 8 tugas akhir dalam kegiatan ini yaitu mempraktikkan Rencana Project Best Learning yang telah disusun sejak 3 bulan yang lalu. Saya melaksanakan PjBL bersama siswa kelas 8A yang saya beri judul Belajar Koding dengan GEMBIRA (GEMini, iBIspaint, ScRAtch). Berikut ini laporan PjBL yang saya share dalam bentuk carousel di Instagram rita_pinang. 

Continue reading Laporan Project Best Learning Wardah Inspiring Teacher Gen 8 Belajar Koding Dengan Gembira

Membuat Tabel pada HTML

 

1. Pengenalan Tabel HTML

Tabel pada HTML digunakan untuk menyajikan data terstruktur dalam bentuk baris (rows) dan kolom (columns), seperti data laporan keuangan, jadwal pelajaran, daftar produk, atau perbandingan fitur.

Elemen dasar yang digunakan untuk membangun tabel HTML meliputi:

•         <table> : Elemen utama yang membungkus seluruh komponen tabel.
•       <tr> (Table Row) : Mendefinisikan baris baru di dalam tabel.
•       <th> (Table Header) : Mendefinisikan sel sebagai judul kolom/baris (secara bawaan teks dicetak tebal dan rata tengah).
•       <td> (Table Data) : Mendefinisikan sel biasa yang berisi data/konten tabel.

Contoh Kode Sederhana:

<table border="1"> <tr> <th>Nama</th> <th>Umur</th> <th>Kota</th> </tr> <tr> <td>Andi</td> <td>25</td> <td>Jakarta</td> </tr> <tr> <td>Budi</td> <td>30</td> <td>Bandung</td> </tr> </table>

 

2. Struktur Tabel Semantik (Lanjutan)

Untuk membuat tabel yang rapi, profesional, dan aksebel (*accessible* bagi *screen reader*), HTML5 menyediakan tiga elemen semantik pembagi struktur tabel:

• <thead> : Menampung bagian kepala tabel (header), berisi <tr> dan <th>.
• <tbody> : Menampung bagian utama atau isi data tabel.
• <tfoot> : Menampung bagian kaki tabel (footer), biasa digunakan untuk total, rata-rata, atau catatan kaki.

Contoh Struktur Semantik Lengkap:

<table border="1"> <thead> <tr> <th>Produk</th> <th>Jumlah</th> <th>Harga</th> </tr> </thead> <tbody> <tr> <td>Kopi Aromatic</td> <td>2</td> <td>Rp 30.000</td> </tr> <tr> <td>Teh Melati</td> <td>1</td> <td>Rp 10.000</td> </tr> </tbody> <tfoot> <tr> <td colspan="2">Total Pembayaran</td> <td>Rp 40.000</td> </tr> </tfoot> </table>

 

3. Menggabungkan Sel (Colspan & Rowspan)

Seringkali kita membutuhkan sel yang memuat ruang lebih dari satu kolom atau baris. Untuk mengatasi hal tersebut, HTML menyediakan dua atribut utama:

• colspan (Column Span) : Menggabungkan beberapa kolom secara horizontal (ke samping). Contoh: colspan="2" akan menggabungkan 2 kolom.
• rowspan (Row Span) : Menggabungkan beberapa baris secara vertikal (ke bawah). Contoh: rowspan="2" akan menggabungkan 2 baris.

Contoh Penggunaan Colspan & Rowspan:

<table border="1"> <!-- Contoh Colspan --> <tr> <th colspan="2">Nama Lengkap</th> </tr> <tr> <td>Nama Depan</td> <td>Nama Belakang</td> </tr> <!-- Contoh Rowspan --> <tr> <td rowspan="2">Kategori Produk</td> <td>Elektronik</td> </tr> <tr> <td>Pakaian</td> </tr> </table>

 

4. Tampilan Visual Hasil Tabel

Berikut adalah contoh bagaimana tabel di atas dirender atau ditampilkan secara konseptual:

Produk	Jumlah	Harga
Kopi Aromatic	2	Rp 30.000
Teh Melati	1	Rp 10.000
Total Pembayaran		Rp 40.000

 

5. Praktik Terbaik (Best Practices)

• Gunakan CSS untuk Tampilan Modern — Hindari menggunakan atribut HTML kuno seperti border="1", cellpadding, atau bgcolor di dalam tag HTML. Gunakan CSS (misal: border, border-collapse, padding) untuk penataan gaya yang lebih rapi dan fleksibel.
• Gunakan Tag <caption> — Sertakan tag <caption> tepat di bawah tag <table> untuk memberikan judul atau deskripsi singkat mengenai isi tabel.
• Aksesibilitas (Accessibility) — Gunakan elemen <th> serta atribut scope="col" atau scope="row" agar pembaca layar (screen reader) dapat membantu pengguna disabilitas memahami konteks data.
•  Tabel Responsif — Untuk tampilan di layar smartphone/HP, bungkus tabel dengan <div> bertipe overflow-x: auto agar tabel dapat digeser secara horizontal tanpa merusak layout halaman web.

Continue reading Membuat Tabel pada HTML

Perjalanan MPI 2026 Tim Spenduyo

 

Ada yang istimewa dalam Workshop Pembuatan Media Pembelajaran Interaktif (MPI) Jenjang SMP Tahun 2026 yang diselenggarakan oleh Kemendikdasmen. Dari 2.377 sekolah SMP di seluruh Indonesia yang mendaftar, kami dari Tim Smp Negeri Dua Mendoyo sangat bersyukur dan bisa terpilih menjadi 1 dari 350 sekolah yang dinyatakan lolos seleksi rancangan storyboard.

Seleksi diselenggarakan pada bulan Maret dimana 1 sekolah  hanya mengirim 1 tim yang terdiri dari guru dan operator. Kebetulan disekolah saya merangkap jabatan sebagai Operator sehingga saya mendaftarkan diri bersama rekan guru Matematika. Setelah membuat rancangan story board untuk  seleksi workshop. Sebulan kemudian nama-nama peserta yang lolos di umumkan.

Tahap selanjutnya kami belajar secara mandiri melalui LMS selama sebulan  tahap selanjutnya revisi storyboard. Bulan Juli  seluruh peserta sedang melangkah ke tahap selanjutnya Pra Workshop dan workshop di bulan Agustus Pelatihan Pembuatan MPI yang natinya akan di publish pada platform Rumah Pendidikan (Ruang Murid).

Mohon doa dan dukungannya dari seluruh masyaratat terutama keluarga besar SMP Negeri 2 Mendoyo semoga seluruh proses pelatihan berjalan lancar, serta karya yang dihasilkan dapat lolos kurasi, uji publik, dan bermanfaat bagi pembelajaran murid-murid di seluruh Indonesia.

MPI 2026

Berkarya Untuk Negeri Melalui Digigitalisasi Pembelajaran Inovatif Berdampak

 

Continue reading Perjalanan MPI 2026 Tim Spenduyo

Empat Hari Menempa Diri Untuk Penguatan Kapasitas Fasilitator Daerah Provinsi Bali

 

Ada energi hangat yang membakar semangat ketika langkah kaki melangkah masuk ke Ballroom Hotel Harris Sunset Road, Bali, pada pertengahan Juli lalu. Tepatnya pada tanggal 15 hingga 18 Juli 2026, suasana ruangan ber-AC dingin itu seketika terasa hangat oleh antusiasme puluhan pendidik dari berbagai penjuru Pulau Dewata.

Hari itu, saya berkesempatan hadir dan berproses bersama dalam kegiatan Penguatan Kapasitas Fasilitator Daerah (Fasda) Provinsi Bali. Sebuah ruang perjumpaan yang tidak biasa, karena di sanalah para "Pejuang Digital"—berisikan perwakilan Guru, Kepala Sekolah, hingga Pengawas Sekolah se-Provinsi Bali—duduk bersama, menepi sejenak dari rutinitas harian di sekolah masing-masing untuk satu tujuan yang sama: menaikkan level kapasitas diri demi kemajuan pendidikan anak-anak kita.

Belajar, Berbagi, dan Menguatkan

Selama empat hari tiga malam, alur kegiatan terasa sangat dinamis dan kaya akan wawasan. Tidak ada sekat antara pengawas, kepala sekolah, maupun guru. Semua melebur menjadi pembelajar yang haus akan ilmu baru.

Ada tiga pilar utama yang menjadi menu pembelajaran intensif kami selama kegiatan berlangsung:

1. Sistem Penjaminan Mutu Internal (SPMI) Kami diajak menyelami kembali bagaimana sekolah bisa membangun siklus penjaminan mutu yang mandiri, terukur, dan berkelanjutan. Mutu pendidikan bukan sekadar angka di atas kertas, melainkan budaya yang dihidupi sehari-hari oleh seluruh warga sekolah.
2. Pembelajaran Digital yang Bermakna Sebagai Pejuang Digital, sesi ini bagaikan menyiram benih kreativitas yang ada di kepala. Kami mengeksplorasi strategi integrasi teknologi yang bukan cuma sekadar "menggunakan aplikasi," melainkan bagaimana memanfaatkan media digital agar pembelajaran terasa interaktif, kontekstual, dan benar-benar berpusat pada siswa.
3. Penguatan Literasi & Numerasi Menjawab tantangan zaman, penguatan konsep dasar literasi dan numerasi menjadi sorotan penting. Kami mendiskusikan strategi praktis bagaimana menganyam kemampuan berpikir kritis dan pemecahan masalah ke dalam tiap aktivitas belajar di kelas dengan cara yang menyenangkan.

Oleh-oleh Semangat untuk Sekolah dan Daerah

Di balik padatnya jadwal materi dari pagi hingga malam, momen yang paling berkesan adalah saat sesi menjadi pemateri yang dinilai oleh rekan-rekan sekelas. Melihat penampilan para Pengawas, Kepala Sekolah dan Guru Pejuang Digital menambah semangat baru dalam melaksanakan tugas sebagai fasilitator di sekolah yang ditunjuk.

Sabtu, 18 Juli 2026, kegiatan resmi ditutup dengan senyum puas dan rasa optimis yang membuncah. Kami melangkah keluar dari Hotel Harris Sunset Road bukan lagi sekadar sebagai peserta, melainkan sebagai Fasda yang siap mengimbaskan ilmu, energi, dan semangat baru kepada sekolah-sekolah yang mendapatkan Bos Kinerja.

Pengalaman 4 hari ini menjadi amunisi berharga untuk terus berkarya, berinovasi, dan mendampingi rekan-rekan sejawat. Mari terus bergandengan tangan, bergerak bersama, dan berdampak nyata bagi pendidikan Bali!

 

Continue reading Empat Hari Menempa Diri Untuk Penguatan Kapasitas Fasilitator Daerah Provinsi Bali

Mengikuti Workshop Cinta, Bangga, Paham Rupiah oleh Bank Indonesia Provinsi Bali

 

Siapa bilang edukasi keuangan dan kecintaan terhadap mata uang negara hanya tugas bank sentral? Di SMPN 2 Mendoyo, kami percaya bahwa menanamkan karakter Cinta, Bangga, dan Paham (CBP) Rupiah harus dimulai dari bangku sekolah, bahkan dari kebiasaan sehari-hari para siswa.

Senin, 6 Juli 2026 saya mendapat kesempatan berharga untuk mengikuti Workshop dan Review Kurikulum Dalam Rangka Integrasi Materi CBP Rupiah Pada Kurikulum Satuan Pendidikan (KSP) di Sekolah Rintisan CBP Rupiah Kabupaten Jembrana yang diselenggarakan oleh Bank Indonesia Provinsi Bali.

Sebagai salah satu sekolah rintisan, SMPN 2 Mendoyo merasa terpanggil untuk tidak sekadar menjadikan CBP Rupiah sebagai slogan, melainkan menyatukannya ke dalam napas pembelajaran di sekolah melalui 4 Pilar Pendidikan.

Bagaimana kami mengintegrasikannya? Mari kita bedah satu per satu!

1. Intrakurikuler: Menyisipkan Nilai dalam Lintas Mata Pelajaran

Integrasi CBP Rupiah tidak harus membuat mata pelajaran baru. Kami menyelipkannya secara alami ke dalam Modul Ajar dan RPP di berbagai mata pelajaran:

• IPS: Memahami peran Rupiah sebagai simbol kedaulatan bangsa dan alat pemersatu ekonomi nasional.
• Matematika: Mempelajari literasi keuangan, perhitungan transaksi, hingga konsep nilai tukar.
• IPA: Mengedukasi aspek kebersihan, bahan pembuat uang, serta bagaimana menjaga uang agar tidak cepat rusak (efek kelestarian fisik uang).
• Bahasa Indonesia: Melatih siswa membuat narasi, teks prosedur, atau persuasif bertema perlakuan terhadap Rupiah.

2. Kokurikuler: Menggema Lewat 7 KAIH & PUSAKA Spenduyo

Penguatan literasi keuangan dan CBP Rupiah kami wadahi secara rutin melalui kegiatan kokurikuler:

• Kamis Literasi Keuangan: Setiap hari Kamis, siswa diajak mendalami cara mengelola uang saku, menabung, dan merawat uang secara cermat.
• PUSAKA Spenduyo (Pusat Siaran Siswa Kreatif): Menggunakan media siaran sekolah untuk memutar konten edukatif, pesan moral, dan imbauan menjaga Rupiah yang diproduksi langsung oleh para siswa.

3. Ekstrakurikuler: Digitalisasi Gerakan Lewat Computer Club

Generasi Z dan Alpha adalah digital native. Oleh karena itu, gerakan CBP Rupiah di SMPN 2 Mendoyo juga diamplifikasi secara digital oleh anggota Computer Club Spenduyo.

Anak-anak dilatih untuk memproduksi konten kreatif—mulai dari video pendek edukatif hingga poster digital interaktif—yang kemudian diunggah di media sosial resmi sekolah. Edukasi jadi terasa seru, kekinian, dan menjangkau lebih banyak penonton!

4. Budaya Sekolah: Aksi Nyata Lewat Gerakan 5J

Perubahan perilaku terjadi jika pembiasaan dilakukan konsisten. Melalui aksi nyata 5J (Jangan Dilipat, Jangan Diremas, Jangan Dicoret, Jangan Distapler, dan Jangan Dibasahi), kami membangun budaya sekolah dengan:

• Pelantikan Duta CBP Rupiah Kelas: Para bendahara kelas resmi diangkat sebagai Duta CBP Rupiah untuk mengedukasi teman-temannya dalam merawat uang saku dan mengelola uang kas kelas.
• Peran Aktif Petugas Kantin: Ibu/Bapak pengelola kantin bertindak sebagai pengingat etika bertransaksi—memastikan kembalian diterima dan disimpan dengan rapi.
• Media Visual Edukatif: Pemasangan banner dan spanduk informasi di sudut-sudut strategis sekolah sebagai pengingat visual harian.

"Langkah kecil yang dilakukan secara konsisten adalah kunci perubahan besar."

Mendidik generasi yang bijak secara finansial dan menghargai Rupiah sebagai kedaulatan bangsa bukanlah proses instan. Namun, bersama keluarga besar SMPN 2 Mendoyo, kami berkomitmen untuk terus bergerak, menginspirasi, dan mewujudkan generasi yang Cinta, Bangga, dan Paham Rupiah!

Bagaimana dengan sekolah Bapak/Ibu guru? Yuk, bagikan cerita atau ide integrasi CBP Rupiah di kolom komentar!

Salam Inovasi & Salam Edukasi,

 

Continue reading Mengikuti Workshop Cinta, Bangga, Paham Rupiah oleh Bank Indonesia Provinsi Bali

Memasukkan Gambar pada HTML

 

Memasukkan Gambar pada HTML

Tujuan Pembelajaran

Setelah mempelajari materi ini, siswa diharapkan mampu:

• Memahami fungsi tag <img> pada HTML.
• Menambahkan gambar ke dalam halaman web.
• Menggunakan atribut src, alt, width, dan height.

 

Apa Itu Gambar pada HTML?

Gambar merupakan salah satu elemen penting dalam sebuah website. Dengan gambar, tampilan website menjadi lebih menarik dan informasi lebih mudah dipahami.

Untuk menampilkan gambar di HTML digunakan tag:

<img>

Tag <img> adalah tag tunggal (self-closing), sehingga tidak memiliki tag penutup.

 

Struktur Dasar Tag <img>

<img src="nama_gambar.jpg" alt="Keterangan gambar">

Penjelasan:

• src (source)
  Menentukan lokasi atau alamat file gambar yang akan ditampilkan.
• alt (alternative text)
  Menampilkan teks pengganti apabila gambar tidak dapat ditampilkan. Atribut ini juga membantu pengguna yang menggunakan pembaca layar (screen reader).

 

Contoh Penggunaan

Misalnya terdapat file gambar bernama kucing.jpg yang berada di folder yang sama dengan file HTML.

<!DOCTYPE html>

<html>

<head>

    <title>Menampilkan Gambar</title>

</head>

<body>

 

<h1>Hewan Kesayangan</h1>

 <img src="kucing.jpg" alt="Gambar seekor kucing">

 </body>

</html>

Hasilnya:

• Judul "Hewan Kesayangan" muncul.
• Gambar kucing.jpg ditampilkan di bawah judul.

 

Mengatur Ukuran Gambar

Ukuran gambar dapat diatur menggunakan atribut:

• width = lebar gambar
• height = tinggi gambar

Contoh:

<img src="kucing.jpg" alt="Kucing" width="300">

atau

<img src="kucing.jpg" alt="Kucing" width="300" height="200">

Keterangan:

• width="300" berarti lebar gambar 300 piksel.
• height="200" berarti tinggi gambar 200 piksel.

 

Menampilkan Gambar dari Folder

Misalnya struktur folder:

Website

│

├── index.html

└── gambar

      └── bunga.jpg

Maka penulisannya:

<img src="gambar/bunga.jpg" alt="Bunga">

 

Menampilkan Gambar dari Internet

Selain dari komputer, gambar juga dapat ditampilkan menggunakan alamat URL.

Contoh:

<img src="https://example.com/gambar.jpg" alt="Gambar dari internet">

 

Contoh Lengkap

<!DOCTYPE html>

<html>

<head>

    <title>Belajar Gambar</title>

</head>

<body>

 

<h1>Belajar HTML</h1>

 

<p>Berikut adalah gambar bunga.</p>

 

<img src="gambar/bunga.jpg"

     alt="Bunga Matahari"

     width="350">

 

</body>

</html>

 

Kesalahan yang Sering Terjadi

1. Nama file salah

❌

<img src="bungaa.jpg">

Padahal nama file sebenarnya:

bunga.jpg

 

2. Folder salah

Misalnya gambar berada di folder gambar, tetapi ditulis:

<img src="bunga.jpg">

Seharusnya:

<img src="gambar/bunga.jpg">

 

3. Lupa menambahkan atribut alt

Kurang baik:

<img src="kucing.jpg">

Lebih baik:

<img src="kucing.jpg" alt="Seekor kucing berwarna putih">

 

Ringkasan

• Tag untuk menampilkan gambar adalah <img>.
• Tag <img> tidak memiliki tag penutup.
• Atribut src digunakan untuk menentukan lokasi gambar.
• Atribut alt digunakan sebagai teks pengganti jika gambar tidak tampil.
• Atribut width dan height digunakan untuk mengatur ukuran gambar.

 

 

Continue reading Memasukkan Gambar pada HTML