Materi Kelas 6 Pertemuan Ke 9 Semester Ganjil

💻 Materi TIK Kelas 6 📋

Membuat Daftar Berurutan & Tidak Berurutan dengan Tag <ol>, <ul>, <li>
📅 Pertemuan Hari Ini

🔢 1️⃣2️⃣3️⃣   |   🔘🔘🔘

---

📚 IDENTITAS
📚 Nama Guru: Erni Sri Wahyuni
📚 Mata Pelajaran: TIK
📚 Hari/Tanggal: Kamis/17 September 2026
📚 Pertemuan: Ke-9
🎓 Kelas: 6 Al Khawarizmi
💡 Materi: Membuat daftar berurutan dan tidak berurutan menggunakan tag ol, ul, dan li
🎯 Tujuan Umum: Memahami penggunaan Ordered List dan Unordered List

📌 CAPAIAN PEMBELAJARAN (CP)

Peserta didik mampu mengenal, memahami, dan mempraktikkan penggunaan tag HTML <ol>, <ul>, dan <li> untuk membuat daftar berurutan (numbering) maupun tidak berurutan (bullet) pada halaman web sederhana, sehingga mampu menyajikan informasi secara terstruktur dan mudah dipahami, sekaligus melatih logika berpikir dan ketelitian dalam menulis kode program dasar.

🎯 TUJUAN PEMBELAJARAN (TP)

TP Umum: Peserta didik mampu memahami dan menggunakan tag Ordered List (<ol>) dan Unordered List (<ul>) beserta <li> untuk membuat daftar pada halaman web.

Tujuan Pembelajaran Mendalam

🧘 Mindful: Peserta didik mampu mengamati dengan teliti struktur penulisan tag pembuka dan penutup pada <ol>, <ul>, dan <li>, serta fokus saat menyusun urutan kode agar tidak ada kesalahan penulisan.

💡 Meaningful: Peserta didik memahami manfaat nyata daftar berurutan dan tidak berurutan dalam kehidupan sehari-hari, misalnya menyusun langkah-langkah resep masakan (berurutan) atau daftar belanja (tidak berurutan).

🎉 Joyful: Peserta didik belajar dengan senang dan percaya diri melalui video, kuis interaktif, dan praktik langsung menulis kode HTML sederhana.

🧭 ALUR TUJUAN PEMBELAJARAN (ATP)

1. Peserta didik mengingat kembali tag dasar <br>, <b>, <i>, <u>, dan <hr> pada pertemuan sebelumnya.
2. Peserta didik mengamati struktur penulisan tag <ol>, <ul>, dan <li>.
3. Peserta didik menjelaskan perbedaan daftar berurutan dan tidak berurutan dengan bahasa sendiri.
4. Peserta didik mempraktikkan menulis kode <ul><li> untuk daftar tidak berurutan.
5. Peserta didik mempraktikkan menulis kode <ol><li> untuk daftar berurutan.
6. Peserta didik menerapkan kombinasi <ol>/<ul> pada sebuah halaman web sederhana.
7. Peserta didik mengevaluasi hasil tampilan daftar yang telah dibuat pada browser.

🧩 MODEL / METODE PEMBELAJARAN

Model: Discovery Learning dipadukan dengan Problem Based Learning (praktik menulis kode 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 kehidupan dengan tahapan yang sangat berurutan dan rapi: bayi, anak-anak, remaja, hingga dewasa, serta pergantian siang dan malam yang selalu berurutan setiap hari.

Ar-Razzaq (Maha Pemberi Rezeki) 🧠 — Allah memberi kita rezeki berupa akal untuk berpikir secara logis dan runtut, sehingga kita mampu belajar menyusun kode HTML dengan urutan yang benar hari ini.

Al-Malik (Maha Merajai) 👑 — Allah adalah Raja yang mengatur seluruh sistem alam semesta dengan sangat teratur dan tersusun rapi, seperti daftar (list) yang menyusun informasi secara berurutan dan jelas.

🤔 Pertanyaan Renungan:
1. Coba amati tahapan pertumbuhan manusia dari bayi hingga dewasa yang berjalan dengan urutan yang sangat teratur. Menurutmu, apa hubungannya dengan sifat Allah Al-Khalik yang menciptakan segala sesuatu dengan tahapan yang rapi?
2. Allah memberi kita akal untuk berpikir secara logis dan runtut (Ar-Razzaq). Bagaimana kita bisa mensyukuri nikmat akal ini saat belajar menyusun kode HTML yang berurutan hari ini?
3. Sebagai "pembuat kode kecil" yang menyusun daftar informasi di halaman web, bagaimana kita bisa meniru sifat Allah Al-Malik yang mengatur segala sesuatu dengan sangat rapi dan berurutan?

---

1️⃣ APERSEPSI: BENAR ATAU SALAH (Materi Sebelumnya: Tag Dasar HTML)

Ayo ingat kembali pelajaran sebelumnya tentang tag <br>, <b>, <i>, <u>, dan <hr>! Jawablah Benar atau Salah.

1. Tag <br> digunakan untuk membuat baris baru (pindah baris). (___)
2. Tag <b> digunakan untuk membuat tulisan menjadi miring (italic). (___)
3. Tag <u> digunakan untuk memberi garis bawah pada tulisan. (___)
4. Tag <hr> digunakan untuk membuat garis horizontal pemisah. (___)
5. Semua tag HTML selalu memerlukan tag penutup. (___)

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

2️⃣ VIDEO PEMBELAJARAN

🎬 Yuk tonton video berikut sebelum kita belajar lebih lanjut!

▶️ Tonton video: Cara Membuat Daftar dengan Tag ol, ul, dan li

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

📖 PENJELASAN MATERI: TAG <ol>, <ul>, DAN <li>

🏷️➡️📋

Apa itu Ordered List dan Unordered List?
Dalam HTML, kita bisa membuat daftar menggunakan dua jenis tag utama:

🔹 <ol> (Ordered List) — digunakan untuk membuat daftar berurutan yang ditandai dengan angka (1, 2, 3, dst).
🔹 <ul> (Unordered List) — digunakan untuk membuat daftar tidak berurutan yang ditandai dengan simbol bulatan (•).
🔹 <li> (List Item) — digunakan untuk menandai setiap item/baris di dalam daftar, dan harus ditulis di dalam tag <ol> atau <ul>.

Contoh Kode Unordered List:

<ul> <li>Bawang</li> <li>Gula</li> <li>Minyak</li> </ul>

Hasil tampilan:
• Bawang
• Gula
• Minyak

Contoh Kode Ordered List:

<ol> <li>Bangun tidur</li> <li>Mandi</li> <li>Sarapan</li> </ol>

Hasil tampilan:
1. Bangun tidur
2. Mandi
3. Sarapan

Kapan digunakan? Gunakan <ol> jika urutan langkah/informasi penting (misalnya resep masakan), dan gunakan <ul> jika urutan tidak menjadi masalah (misalnya daftar belanja).

---

3️⃣ LATIHAN SOAL PILIHAN GANDA (10 Soal)

Tingkat kesukaran meningkat dari mudah ➡️ sedang ➡️ sukar

1. (Mudah) Tag yang digunakan untuk membuat daftar tidak berurutan (bullet) adalah...
   A. <ol>   B. <li>   C. <br>   D. <ul>
2. (Mudah) Tag yang digunakan untuk membuat daftar berurutan (bernomor) adalah...
   A. <ul>   B. <li>   C. <ol>   D. <hr>
3. (Mudah) Tag <li> digunakan untuk...
   A. Membuat garis horizontal   B. Menandai setiap item dalam daftar   C. Membuat tulisan tebal   D. Membuat baris baru
4. (Mudah) Tag <li> harus dituliskan di dalam tag...
   A. <b> atau <i>   B. <hr> saja   C. <br> saja   D. <ol> atau <ul>
5. (Sedang) Tampilan daftar tidak berurutan pada browser biasanya ditandai dengan...
   A. Simbol bulatan/bullet (•)   B. Angka 1, 2, 3   C. Huruf abjad   D. Garis putus-putus
6. (Sedang) Tampilan daftar berurutan pada browser biasanya ditandai dengan...
   A. Simbol bulatan (•)   B. Tidak ada tanda apa pun   C. Angka urut 1, 2, 3, dst   D. Garis bawah
7. (Sedang) Penulisan kode yang benar untuk satu item dalam daftar adalah...
   A. <ol>Nasi Goreng</ol> tanpa <li>   B. <ul>Nasi Goreng</li>   C. <li>Nasi Goreng<ol>   D. <li>Nasi Goreng</li> di dalam <ol> atau <ul>
8. (Sukar) Dinda ingin menuliskan langkah-langkah membuat mi instan yang harus dilakukan sesuai urutan. Tag yang paling tepat digunakan Dinda adalah...
   A. <ul>, karena urutan tidak penting   B. <ol>, karena urutan langkah harus berurutan   C. <br> saja tanpa daftar   D. <hr>, untuk memisahkan tiap langkah
9. (Sukar) Rizky menulis daftar belanja (bawang, gula, minyak) yang urutannya tidak menjadi masalah. Tag yang paling tepat digunakan Rizky adalah...
   A. <ol>, karena harus bernomor   B. <hr>, untuk tiap barang   C. <ul>, karena urutan tidak penting   D. <b>, agar tulisan tebal
10. (Sukar) Perhatikan potongan kode berikut:
    <ol><li>Bangun tidur</li><li>Mandi</li><li>Sarapan</li></ol>
    Jika ditampilkan pada browser, hasilnya adalah daftar dengan tanda...
    A. Bullet (•)   B. Angka: 1. Bangun tidur, 2. Mandi, 3. Sarapan   C. Tidak ada tanda sama sekali   D. Garis bawah pada setiap kata

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

---

4️⃣ PEMETAAN MINDFUL, MEANINGFUL, JOYFUL

🧘 Mindful terlihat pada: kegiatan renungan kebesaran Allah di awal pembelajaran, serta saat peserta didik mengamati dengan teliti struktur tag pembuka dan penutup pada <ol>, <ul>, dan <li> sebelum mempraktikkannya.

💡 Meaningful terlihat pada: penjelasan manfaat daftar berurutan dan tidak berurutan dalam kehidupan sehari-hari (resep masakan, daftar belanja), serta contoh soal cerita (Dinda & Rizky) 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 <ol>, <ul>, dan <li> adalah kode HTML penting untuk membuat daftar berurutan maupun tidak berurutan, sehingga informasi pada halaman web dapat tersusun rapi dan mudah dipahami. Sama seperti Allah Al-Malik yang mengatur seluruh alam semesta dengan sangat teratur, kita juga belajar untuk menyusun informasi dengan rapi dan berurutan 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 👋 ✨