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

Rujukan MPLS Ramah 2026 Tingkat SMP

 

Panduan Masa Pengenalan Lingkungan Sekolah (MPLS) Ramah 2026 tingkat Sekolah Menengah Pertama (SMP):

1. Ketentuan Umum dan Filosofi MPLS Ramah 2026

• Tema & Definisi: Pada tahun 2026, Kementerian Pendidikan Dasar dan Menengah menetapkan tema MPLS Ramah. Paradigma "Ramah" mencakup aspek ramah anak, ramah lingkungan, dan ramah biaya guna mewujudkan sekolah sebagai rumah kedua yang aman, nyaman, dan bebas dari kekerasan.
• Waktu & Lokasi: Dilaksanakan selama 5 hari pada minggu pertama awal tahun ajaran baru dan bertempat di lingkungan sekolah.
• Asas Penyelenggaraan: Meliputi 9 asas, yaitu: Humanis, Komprehensif, Partisipatif, Kepentingan Terbaik bagi Anak, Nondiskriminatif, Inklusif, Keadilan & Kesetaraan Gender, Harmonis, dan Berkelanjutan.
• Panitia: Terdiri dari kepala sekolah, guru, dan tenaga kependidikan. Murid (seperti pengurus OSIS/MPK) dapat membantu jika panitia memiliki keterbatasan.

2. Struktur Materi MPLS

Pelaksanaan terdiri atas dua kategori materi:

• Materi Utama:
1. Gerakan Tujuh Kebiasaan Anak Indonesia Hebat (G7KAIΗ) — Bangun pagi, beribadah, berolahraga, makan sehat, gemar belajar, bermasyarakat, tidur cepat.
2. Pagi Ceria (senam pagi, menyanyikan Indonesia Raya, dan doa bersama).
3. Sopan dan Santun Bermedia Sosial.
4. Budaya 5S (Senym, Salam, Sapa, Sopan, dan Santun).
5. Gerakan Indonesia ASRI (Aman, Sehat, Resik, dan Indah).
6. Gerakan Rukun Sama Teman (GRST).
• Materi Pilihan: Ciri khas sekolah dan materi lain yang dibutuhkan (seperti pencegahan NAPZA dan anti-korupsi).

3. Tahapan Rangkaian Kegiatan

MPLS Ramah dialur ke dalam tiga tahapan utama berdasarkan Permendikdasmen No. 12 Tahun 2026:

A. Perencanaan & Sosialisasi (Maksimal H-5 Pelaksanaan)

Sekolah wajib melakukan sosialisasi kepada orang tua/wali murid mengenai materi, jadwal, mekanisme pengaduan, edukasi parenting, serta pemberitahuan tes deteksi dini.

B. Pelaksanaan (Rujukan Jadwal 5 Hari)

• Hari Pertama: Salam Sapa, Upacara Bendera (disertai pembacaan Ikrar Pelajar Indonesia), Pengenalan Diri, Wawasan Wiyata Mandala (penyusunan kesepakatan kelas), materi "Aku dan Sekolahku" (tur sekolah), serta materi G7KAIH.
• Hari Kedua: Pagi Ceria, Cek Denyut Jantung, Tes Fleksibilitas (V Sit and Reach), Ruang Perjumpaan Murid Baru (membuat Pohon Harapan & Pohon Solusi), serta simulasi Siaga Bencana.
• Hari Ketiga: Rangkaian Tes & Asesmen (Kondisi Sosial-Emosional, Literasi Membaca, Numerasi, serta Bakat & Minat), dilanjutkan materi Literasi Digital (pencegahan judi online & kampanye 3S: Screen Time, Screen Zone, Screen Break) dan pencegahan NAPZA.
• Hari Keempat: Materi "Sahabat Hebat", pengenalan Ciri Khas Sekolah, Pengenalan Kurikulum, dan Gerakan Indonesia ASRI.
• Hari Kelima: Pagi Ceria, Unjuk Karya, dan Penutupan MPLS.

C. Pascapelaksanaan

Meliputi evaluasi program, berbagi kegiatan positif di media sosial, skrining murid berkebutuhan khusus, serta tindak lanjut hasil asesmen.

4. Rangkaian Tes dan Manajemen Data (Penting)

• Pendaftaran Cek Kesehatan Gratis (CKG): Orang tua/wali murid mendaftarkan anak mereka melalui aplikasi SATUSEHAT Mobile.
• Pengumpulan Data: Tes dilakukan secara digital melalui tautan karakter.data.kemendikdasmen.go.id. Kode tes untuk SMP diakses oleh operator sekolah menggunakan akun SSO Pusdatin mulai 13 Juli 2026. Rentang waktu pelaksanaan tes utama adalah 13-24 Juli 2026.
• Kerahasiaan Hasil: Hasil tes akan tersedia mulai 31 Juli 2026. Hasil Asesmen Set 1 (literasi, numerasi, bakat minat, IMT, fleksibilitas) dibagikan kepada guru terkait, sedangkan Set 2 (Kondisi Sosial-Emosional) bersifat rahasia dan hanya boleh diakses oleh guru BK atau pihak berwenang untuk konseling.

5. Larangan Keras & Sanksi

Sekolah dilarang keras melakukan perpeloncoan/kekerasan, pungutan biaya, memberikan aktivitas/atribut yang tidak edukatif, serta melibatkan alumni sebagai penyelenggara. Pelanggaran akan berakibat pada penghentian kegiatan MPLS dan pemberian sanksi disiplin (teguran tertulis hingga pemberhentian jabatan).

Rujukan MPLS secara lengkap silahkan klik link berikut ini Rujukan MPLS 2026

Continue reading Rujukan MPLS Ramah 2026 Tingkat SMP