Materi Ajar Kelas 6 Pertemuan Ke 10 Semester Ganjil

💻 Materi TIK Kelas 6 🖼️

Menyisipkan Gambar pada Halaman Web dengan Tag <img>
📅 Pertemuan Hari Ini

🏷️ <img> ➡️ 🖼️

---

📚 IDENTITAS
📚 Nama Guru: Erni Sri Wahyuni
📚 Mata Pelajaran: TIK
📚 Hari/Tanggal: Kamis/24 September 2026
📚 Pertemuan: Ke-10
🎓 Kelas: 6 Al Khawarizmi
💡 Materi: Menyisipkan gambar pada halaman html
🎯 Tujuan Umum: Memahami penggunaan tag img

📌 CAPAIAN PEMBELAJARAN (CP)

Peserta didik mampu mengenal, memahami, dan mempraktikkan penggunaan tag HTML <img> beserta atribut sederhana (src, alt, width, height) untuk menyisipkan gambar pada halaman web sederhana, sehingga mampu menghasilkan halaman web yang lebih menarik dan informatif, sekaligus melatih ketelitian dalam menuliskan kode program.

🎯 TUJUAN PEMBELAJARAN (TP)

TP Umum: Peserta didik mampu memahami dan menggunakan tag <img> beserta atributnya untuk menyisipkan gambar pada halaman web.

Tujuan Pembelajaran Mendalam

🧘 Mindful: Peserta didik mampu mengamati dengan teliti setiap atribut pada tag <img> (src, alt, width, height), serta fokus memastikan alamat/lokasi file gambar dituliskan dengan benar sebelum mempraktikkannya.

💡 Meaningful: Peserta didik memahami manfaat nyata menyisipkan gambar pada halaman web dalam kehidupan sehari-hari, misalnya membuat blog pribadi, poster digital, atau halaman profil kelas yang lebih menarik dan mudah dipahami dengan bantuan gambar.

🎉 Joyful: Peserta didik belajar dengan senang dan percaya diri melalui video, kuis interaktif, dan praktik langsung menyisipkan gambar pada halaman web buatan sendiri.

🧭 ALUR TUJUAN PEMBELAJARAN (ATP)

1. Peserta didik mengingat kembali materi tag <ol>, <ul>, dan <li> pada pertemuan sebelumnya.
2. Peserta didik mengamati struktur penulisan tag <img> beserta atributnya.
3. Peserta didik menjelaskan fungsi atribut src, alt, width, dan height dengan bahasa sendiri.
4. Peserta didik mempraktikkan menuliskan kode <img> sederhana dengan atribut src.
5. Peserta didik mempraktikkan menambahkan atribut alt, width, dan height pada tag <img>.
6. Peserta didik menerapkan penyisipan gambar pada halaman web sederhana buatan sendiri.
7. Peserta didik mengevaluasi hasil tampilan gambar pada browser.

🧩 MODEL / METODE PEMBELAJARAN

Model: Discovery Learning dipadukan dengan Problem Based Learning (praktik menyisipkan gambar langsung)
Metode: Demonstrasi, Praktik Langsung (hands-on coding), Tanya Jawab, dan Kuis Interaktif
Pendekatan: Pembelajaran Mendalam (Deep Learning) — Mindful, Meaningful, Joyful

---

🌟 PEMBUKAAN: MENGENAL KEBESARAN ALLAH

Sebelum belajar, yuk kita renungkan sebentar bersama-sama 🤲

Al-Khalik (Maha Pencipta) 🏞️ — Allah menciptakan alam semesta yang begitu indah: gunung, laut, langit, dan tumbuhan, sehingga keindahan ciptaan-Nya bisa kita abadikan menjadi gambar atau foto.

Ar-Razzaq (Maha Pemberi Rezeki) 👁️ — Allah memberi kita rezeki berupa mata untuk melihat keindahan, serta ilmu dan teknologi (kamera, komputer) yang bisa kita gunakan untuk menampilkan gambar pada halaman web hari ini.

Al-Malik (Maha Merajai) 👑 — Allah adalah Raja yang mengatur segala sesuatu di alam semesta dengan ukuran dan posisi yang sangat pas dan seimbang, seperti kita mengatur ukuran gambar (width dan height) agar tampil rapi di halaman web.

🤔 Pertanyaan Renungan:
1. Coba amati keindahan alam di sekitarmu, seperti langit senja atau pepohonan hijau. Bagaimana keindahan tersebut menunjukkan sifat Allah Al-Khalik?
2. Allah memberi kita nikmat mata dan teknologi untuk mengabadikan serta menampilkan gambar (Ar-Razzaq). Bagaimana cara kita mensyukuri nikmat ini saat belajar menyisipkan gambar hari ini?
3. Sebagai "pembuat halaman web kecil", bagaimana kita bisa mengatur ukuran dan posisi gambar dengan rapi dan seimbang, meniru keteraturan yang Allah Al-Malik ciptakan di alam semesta?

---

1️⃣ APERSEPSI: BENAR ATAU SALAH (Materi Sebelumnya: Tag ol, ul, li)

Ayo ingat kembali pelajaran sebelumnya tentang tag <ol>, <ul>, dan <li>! Jawablah Benar atau Salah.

1. Tag <ol> digunakan untuk membuat daftar berurutan bernomor. (___)
2. Tag <ul> digunakan untuk membuat daftar berurutan bernomor. (___)
3. Tag <li> harus ditulis di dalam tag <ol> atau <ul>. (___)
4. Tampilan daftar tidak berurutan biasanya ditandai dengan angka. (___)
5. Tag <ol> dan <ul> dapat digunakan untuk menyusun informasi secara terstruktur. (___)

✅ Kunci Jawaban: 1. Benar   2. Salah   3. Benar   4. Salah   5. Benar

2️⃣ VIDEO PEMBELAJARAN

🎬 Yuk tonton video berikut sebelum kita belajar lebih lanjut!

▶️ Tonton video: Cara Menyisipkan Gambar dengan Tag img

*Guru dapat memilih salah satu video dari hasil pencarian di atas yang paling sesuai untuk siswa kelas 6 SD.

📖 PENJELASAN MATERI: TAG <img>

🖼️📎

Apa itu Tag <img>?
Tag <img> adalah tag HTML yang digunakan untuk menyisipkan gambar pada halaman web. Berbeda dengan tag lain, tag <img> tidak memerlukan tag penutup karena termasuk tag tunggal (self-closing).

Atribut-atribut Penting pada Tag <img>:

Atribut	Fungsi
src	Menentukan alamat/lokasi file gambar (wajib ada)
alt	Teks alternatif yang muncul jika gambar gagal ditampilkan
width	Mengatur lebar gambar (dalam piksel)
height	Mengatur tinggi gambar (dalam piksel)

Contoh Kode Tag <img>:

<img src="taman.jpg" alt="Taman Sekolah" width="250" height="180">

🖼️ Hasil tampilan: gambar "Taman Sekolah" akan muncul dengan lebar 250 piksel dan tinggi 180 piksel. Jika file "taman.jpg" tidak ditemukan, maka tulisan "Taman Sekolah" yang akan muncul menggantikan gambar.

Manfaatnya: membuat halaman web menjadi lebih menarik, mudah dipahami, dan informatif karena dilengkapi gambar pendukung, misalnya foto kegiatan sekolah atau ilustrasi materi pelajaran.

---

3️⃣ LATIHAN SOAL PILIHAN GANDA (10 Soal)

Tingkat kesukaran meningkat dari mudah ➡️ sedang ➡️ sukar

1. (Mudah) Tag yang digunakan untuk menyisipkan gambar pada halaman web adalah...
   A. <pic>   B. <img>   C. <photo>   D. <gambar>
2. (Mudah) Atribut yang digunakan untuk menentukan alamat/lokasi file gambar adalah...
   A. alt   B. width   C. height   D. src
3. (Mudah) Tag <img> termasuk jenis tag yang...
   A. Tidak memerlukan tag penutup   B. Harus diletakkan di dalam <ol>   C. Hanya bisa digunakan sekali dalam satu halaman   D. Selalu berpasangan dengan tag penutup
4. (Mudah) Atribut yang digunakan untuk mengatur lebar gambar adalah...
   A. height   B. src   C. width   D. alt
5. (Sedang) Atribut alt pada tag <img> berfungsi untuk...
   A. Mengatur warna gambar   B. Menghapus gambar   C. Memutar gambar   D. Menyediakan teks alternatif jika gambar tidak dapat ditampilkan
6. (Sedang) Atribut yang digunakan untuk mengatur tinggi gambar adalah...
   A. height   B. src   C. alt   D. width
7. (Sedang) Penulisan kode <img> yang benar adalah...
   A. <img>src="foto.jpg"   B. <img src="foto.jpg" alt="Foto Sekolah">   C. <image src="foto.jpg">   D. <img>foto.jpg</img>
8. (Sukar) Dika menulis kode <img src="kucing.jpg"> tanpa atribut alt. Jika gambar gagal dimuat karena alamat file salah, maka yang akan terjadi adalah...
   A. Halaman web otomatis error dan tidak bisa dibuka   B. Video akan muncul menggantikan gambar   C. Muncul kotak kosong tanpa keterangan apa pun   D. Gambar lain akan muncul secara otomatis
9. (Sukar) Lala ingin gambar logo sekolahnya tampil dengan lebar 200 piksel dan tinggi 150 piksel. Kode yang tepat untuk Lala adalah...
   A. <img width="logo.jpg" src="200">   B. <img src="logo.jpg" alt="200" alt="150">   C. <img src="logo.jpg" ukuran="200x150">   D. <img src="logo.jpg" width="200" height="150">
10. (Sukar) Perhatikan kode berikut: <img src="taman.jpg" alt="Taman Sekolah" width="250" height="180">. Jika file "taman.jpg" tidak ditemukan di server, maka tulisan yang akan muncul pada browser adalah...
    A. Taman Sekolah   B. 250   C. 180   D. img

✅ Kunci Jawaban:
1. B   2. D   3. A   4. C   5. D   6. A   7. B   8. C   9. D   10. A

---

4️⃣ PEMETAAN MINDFUL, MEANINGFUL, JOYFUL

🧘 Mindful terlihat pada: kegiatan renungan kebesaran Allah di awal pembelajaran, serta saat peserta didik mengamati dengan teliti setiap atribut pada tag <img> dan memastikan alamat file gambar ditulis dengan benar sebelum mempraktikkannya.

💡 Meaningful terlihat pada: penjelasan manfaat menyisipkan gambar dalam kehidupan sehari-hari (blog pribadi, poster digital, halaman profil kelas), serta contoh soal cerita (Dika & Lala) yang menghubungkan materi dengan situasi nyata.

🎉 Joyful terlihat pada: penggunaan video pembelajaran, kuis benar/salah dan pilihan ganda yang interaktif, serta contoh kode dan hasil tampilan yang membuat belajar coding terasa menyenangkan.

📝 KESIMPULAN

Tag <img> beserta atribut src, alt, width, dan height adalah kode HTML penting untuk menyisipkan gambar pada halaman web, sehingga tampilan halaman menjadi lebih menarik dan informatif. Sama seperti Allah Al-Khalik yang menciptakan alam semesta dengan penuh keindahan, kita juga belajar untuk menampilkan gambar dengan rapi dan sesuai kebutuhan menggunakan kode HTML. Semoga ilmu yang kita dapatkan hari ini menjadi bekal yang bermanfaat dan menjadi bentuk rasa syukur kita kepada Allah atas nikmat Al-Khalik dan Ar-Razzaq. 🌟

✨ Selamat belajar, anak-anak hebat! Sampai jumpa di pertemuan berikutnya 👋 ✨