Materi Ajar Kelas 6 Pertemuan Ke 14 Semester Ganjil

💻 Materi TIK Kelas 6 🌈

Memberi Warna pada Teks dan Latar Belakang Halaman Web
📅 Pertemuan Hari Ini

🔴 🟡 🟢 🔵 🟣

📚 IDENTITAS
📚 Nama Guru: Erni Sri Wahyuni
📚 Mata Pelajaran: TIK
📚 Hari/Tanggal: Kamis/29 September 2026
📚 Pertemuan: Ke-14
🎓 Kelas: 6 Al Khawarizmi
💡 Materi: Memberi Warna pada Teks dan Latar Belakang Halaman Web
🎯 Tujuan Umum: Memahami penggunaan perintah teks color dan bg color

📌 CAPAIAN PEMBELAJARAN (CP)

Peserta didik mampu mengenal, memahami, dan mempraktikkan cara memberi warna pada teks dan latar belakang halaman web menggunakan atribut style dengan properti color dan background-color, sehingga mampu membuat halaman web sederhana yang menarik dan mudah dibaca, sekaligus melatih logika berpikir, ketelitian dalam menulis kode, dan kepekaan estetika.

🎯 TUJUAN PEMBELAJARAN (TP)

TP Umum: Peserta didik mampu memahami cara memberi warna pada teks dan latar belakang halaman web.

Tujuan Pembelajaran Mendalam

🧘 Mindful: Peserta didik mampu menulis kode dengan teliti (tanda petik, titik dua, dan titik koma), serta memperhatikan apakah kombinasi warna teks dan latar nyaman dibaca.

💡 Meaningful: Peserta didik memahami bahwa warna membantu halaman web lebih menarik dan mudah dibaca, misalnya untuk judul, pengumuman penting, atau halaman profil kelas.

🎉 Joyful: Peserta didik belajar dengan senang melalui video, eksperimen mengganti warna lalu melihat hasilnya langsung di browser, dan LKPD "Halaman Webku Berwarna".

🧭 ALUR TUJUAN PEMBELAJARAN (ATP)

1. Peserta didik mengingat kembali materi tautan menggunakan tag <a> pada pertemuan sebelumnya.
2. Peserta didik mengamati contoh halaman web berwarna dan kodenya.
3. Peserta didik menjelaskan fungsi atribut style, properti color, dan background-color.
4. Peserta didik mempraktikkan memberi warna pada teks (judul, paragraf, dan satu kata dengan <span>).
5. Peserta didik mempraktikkan memberi warna latar belakang halaman.
6. Peserta didik menggunakan nama warna dan kode warna heksadesimal.
7. Peserta didik menyelesaikan LKPD "Halaman Webku Berwarna" dan menguji hasilnya di browser.
8. Peserta didik mengevaluasi keterbacaan warna dan melakukan refleksi.

🧩 MODEL / METODE PEMBELAJARAN

Model: Discovery Learning dipadukan dengan Project Based Learning (membuat halaman web berwarna)
Metode: Demonstrasi, Praktik Langsung (hands-on coding) dengan LKPD, 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 warna di alam: langit yang biru, daun yang hijau, bunga yang merah dan kuning, hingga pelangi yang indah setelah hujan.

Ar-Razzaq (Maha Pemberi Rezeki) 👁️ — Allah memberi kita rezeki berupa mata yang dapat melihat dan membedakan warna, serta akal untuk belajar mengatur warna pada karya digital kita.

Al-Malik (Maha Merajai) 👑 — Allah mengatur alam dengan serasi: siang yang terang dan malam yang gelap tampil berbeda jelas sehingga kita mudah membedakannya. Kita belajar memilih warna yang serasi dan jelas agar tulisan mudah dibaca.

🤔 Pertanyaan Renungan:
1. Allah menciptakan warna-warna yang berbeda pada langit, daun, dan bunga, dan semuanya tampak serasi. Menurutmu, apa yang membuat sebuah kombinasi warna terlihat indah dan nyaman dipandang?
2. Allah Ar-Razzaq memberi kita mata untuk melihat warna. Bagaimana cara kita mensyukurinya, misalnya dengan memilih warna yang tidak menyulitkan mata orang lain saat membaca halaman web kita?
3. Allah Al-Malik mengatur siang dan malam dengan jelas dan teratur. Bagaimana kita meniru ketelitian itu saat menulis kode warna, sehingga satu tanda baca yang salah pun tidak membuat warna gagal tampil?

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

Ayo ingat kembali pelajaran sebelumnya tentang tautan dengan tag <a>! Jawablah Benar atau Salah.

1. Tag <a> digunakan untuk membuat tautan (link) ke halaman atau situs lain. (___)
2. Atribut href digunakan untuk menentukan alamat tujuan tautan. (___)
3. Tag <a> tidak memerlukan tag penutup. (___)
4. Atribut target="_blank" membuat tautan terbuka di tab baru. (___)
5. Teks yang dapat diklik pada tautan diletakkan di luar tag <a> dan </a>. (___)

✅ Kunci Jawaban: 1. Benar   2. Benar   3. Salah (tag a memerlukan penutup </a>)   4. Benar   5. Salah (teks yang diklik berada di antara <a> dan </a>)

2️⃣ VIDEO PEMBELAJARAN

🎬 Yuk tonton video berikut sebelum kita belajar lebih lanjut!

▶️ Tonton video: Memberi Warna Teks dan Latar Belakang dengan HTML

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

📖 PENJELASAN MATERI: WARNA TEKS DAN LATAR BELAKANG

🖍️💻🌈

Atribut style (gaya)
Untuk memberi warna, kita menambahkan atribut style pada tag. Isinya berpola properti: nilai; dan ditulis di dalam tanda petik.

<tag style="properti: nilai;">Isi</tag>

Properti	Fungsi	Contoh
color	Mengubah warna teks	color:red;
background-color	Mengubah warna latar belakang	background-color:yellow;

1) Memberi warna pada teks

<h1 style="color:blue;">Judul Biru</h1> <p style="color:green;">Paragraf ini berwarna hijau.</p>

HASIL DI BROWSER:

Judul Biru

Paragraf ini berwarna hijau.

2) Memberi warna pada satu kata saja dengan <span>
Tag <span> membungkus sebagian teks tanpa membuat baris baru.

<p>Ini sangat <span style="color:red;">penting</span>!</p>

HASIL DI BROWSER:Ini sangat penting!

3) Memberi warna latar belakang
Latar satu paragraf: <p style="background-color:yellow;">. Latar seluruh halaman: letakkan style pada tag <body>.

<body style="background-color:lightyellow;"> ...isi halaman... </body>

HASIL DI BROWSER (satu paragraf):

Paragraf ini punya latar kuning.

4) Menggabungkan warna teks dan latar
Pisahkan dua properti dengan titik koma (;).

<p style="color:white; background-color:navy;">Selamat Datang</p>

HASIL DI BROWSER:

Selamat Datang

Cara menulis warna

Merah
red / #FF0000

Biru
blue / #0000FF

Hijau
green / #008000

Kuning
yellow / #FFFF00

Oranye
orange / #FFA500

Ungu
purple / #800080

Hitam
black / #000000

Putih
white / #FFFFFF

Warna dapat ditulis dengan nama bahasa Inggris (red) atau kode heksadesimal yang diawali tanda pagar (#FF0000).

Contoh halaman lengkap:

<html> <head> <title>Halaman Berwarna</title> </head> <body style="background-color:lightyellow;"> <h1 style="color:navy;">Selamat Datang</h1> <p>Ini halaman <span style="color:red;">berwarna</span> buatanku.</p> </body> </html>

Perhatikan keterbacaan! Pilih warna teks yang kontras dengan latarnya.

✅ Mudah dibaca: teks hijau tua di latar hijau muda

⚠️ Sulit dibaca: teks oranye muda di latar oranye

Catatan: Cara lama seperti <font color="red"> atau bgcolor pada <body> sudah tidak dianjurkan. Gunakan atribut style yang lebih baru dan lebih fleksibel.

📝 LKPD: PRAKTIK HALAMAN WEBKU BERWARNA

LKPD — Halaman Webku Berwarna 🌈

Nama: ..............................Kelas: 6 ( ..... )Tanggal: ................

🎯 Tujuan: Membuat halaman web yang teks dan latarnya diberi warna menggunakan atribut style.
🧰 Alat: Komputer dengan Notepad dan web browser.

A. Langkah kerja (beri tanda ✔ jika sudah):

☐ Buka Notepad, lalu ketik kerangka berikut:

<html> <head> <title>Halaman Webku</title> </head> <body> <h1>Halaman Webku</h1> <p>Namaku ........ dan aku suka belajar TIK.</p> <p>Warna favoritku adalah ........</p> <p>Belajar itu menyenangkan!</p> </body> </html>

☐ Tambahkan latar halaman berwarna muda pada tag <body>.

☐ Beri warna judul (<h1>) dengan warna pilihanmu.

☐ Beri warna hijau pada paragraf kedua dan warna merah hanya pada kata "favoritku" menggunakan <span>.

☐ Buat paragraf terakhir dengan teks putih dan latar biru tua.

☐ Simpan dengan nama warna.html (jenis file: All Files), lalu buka di browser.

B. Isilah tabel berikut (tulis kode yang kamu pakai):

No	Bagian yang diwarnai	Kode yang saya tulis
1	Latar halaman
2	Judul (h1)
3	Paragraf hijau
4	Kata "favoritku" merah
5	Paragraf teks putih, latar biru tua

C. Tantangan kreatif ⭐ Ganti satu warna dengan kode heksadesimal (misalnya #FF5722). Tulis kodenya dan warna apa yang muncul:
..................................................................................................................

D. Refleksi
1. Kombinasi warna yang paling nyaman dibaca pada halamanku adalah ........................
2. Kesalahan kode yang pernah kualami (misalnya lupa tanda petik atau titik koma) adalah ........................

Rubrik Penilaian (Skor 1–4)

Aspek	Penilaian
Ketepatan kode warna	4 = semua warna tampil benar; 3 = 1 salah; 2 = 2–3 salah; 1 = banyak salah
Ketelitian penulisan (petik, titik dua, titik koma)	4 = tanpa kesalahan; 3 = 1 kesalahan; 2 = 2–3 kesalahan; 1 = banyak kesalahan
Keterbacaan warna	4 = semua kontras dan nyaman; 3 = hampir semua; 2 = sebagian sulit; 1 = sulit dibaca
Kreativitas dan tantangan	4 = memakai kode heksadesimal dan kombinasi unik; 3 = memakai kode heksadesimal; 2 = belum tepat; 1 = belum mengerjakan
Penyimpanan file	4 = warna.html dan terbuka di browser; 3 = nama kurang tepat; 2 = file tidak terbuka benar; 1 = belum disimpan

🔑 Contoh kunci kode (untuk guru): (1) <body style="background-color:lightyellow;"> · (2) <h1 style="color:navy;"> · (3) <p style="color:green;"> · (4) <span style="color:red;">favoritku</span> · (5) <p style="color:white; background-color:navy;">. Warna boleh bervariasi selama sesuai perintah dan kodenya benar.

3️⃣ LATIHAN SOAL PILIHAN GANDA (10 Soal)

Tingkat kesukaran meningkat dari mudah ➡️ sedang ➡️ sukar

1. (Mudah) Atribut yang digunakan untuk memberi gaya, seperti warna, pada elemen HTML adalah...
   A. src   B. style   C. href   D. alt
2. (Mudah) Properti yang digunakan untuk mengubah warna teks adalah...
   A. background-color   B. width   C. color   D. height
3. (Mudah) Properti yang digunakan untuk mengubah warna latar belakang adalah...
   A. background-color   B. color   C. width   D. align
4. (Sedang) Kode yang benar untuk membuat paragraf berwarna merah adalah...
   A. <p color="red">Halo</p>   B. <p style=red>Halo</p>   C. <p red>Halo</p>   D. <p style="color:red;">Halo</p>
5. (Sedang) Kode yang benar untuk memberi warna latar kuning muda pada seluruh halaman web adalah...
   A. <body color="lightyellow">   B. <body style="background-color:lightyellow;">   C. <body style="color:lightyellow;">   D. <background>lightyellow</background>
6. (Sedang) Kode warna heksadesimal untuk warna merah adalah...
   A. #0000FF   B. #00FF00   C. #FF0000   D. #FFFFFF
7. (Sedang) Tag yang cocok untuk mewarnai satu kata saja di tengah kalimat adalah...
   A. <span>   B. <br>   C. <hr>   D. <img>
8. (Sukar) Rani membuat halaman web dengan latar biru tua dan teks hitam sehingga sulit dibaca. Perbaikan yang paling tepat adalah...
   A. Mengganti latar menjadi hitam   B. Mengecilkan teks   C. Menghapus semua teks   D. Mengganti warna teks menjadi putih atau warna terang
9. (Sukar) Perhatikan kode: <p style="color:white; background-color:green;">Selamat Datang</p>. Hasil yang tampil di browser adalah...
   A. Teks hijau di latar putih   B. Teks putih di latar hijau   C. Teks hijau di latar hijau   D. Teks putih di latar putih
10. (Sukar) Dito ingin hanya kata "penting" pada kalimat "Ini sangat penting!" berwarna merah. Kode yang tepat adalah...
    A. <p style="color:red;">Ini sangat penting!</p>   B. <p>Ini sangat penting!</p style="color:red">   C. <p>Ini sangat <span style="color:red;">penting</span>!</p>   D. <span style="color:red;">Ini sangat penting!</span>

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

4️⃣ PEMETAAN MINDFUL, MEANINGFUL, JOYFUL

🧘 Mindful terlihat pada: renungan kebesaran Allah di awal pembelajaran, ketelitian menulis tanda petik, titik dua, dan titik koma, serta saat memperhatikan apakah kombinasi warna nyaman dibaca.

💡 Meaningful terlihat pada: pemahaman bahwa warna membuat halaman lebih menarik dan mudah dibaca (judul, pengumuman, profil kelas), pembahasan keterbacaan warna, serta soal cerita (Rani dan Dito) yang dekat dengan pengalaman siswa.

🎉 Joyful terlihat pada: video pembelajaran, eksperimen mengganti warna dan melihat hasilnya langsung di browser, LKPD dengan tantangan kreatif, dan kuis interaktif.

📝 KESIMPULAN

Warna pada halaman web dapat diatur dengan atribut style. Properti color mengubah warna teks, sedangkan background-color mengubah warna latar. Warna dapat ditulis dengan nama atau kode heksadesimal, dan pilihlah kombinasi yang kontras agar mudah dibaca. Seperti Allah yang menciptakan warna alam dengan serasi dan teratur, kita belajar memilih warna dengan teliti dan bijak. Semoga ilmu hari ini menjadi bekal yang bermanfaat dan wujud syukur kita kepada Allah atas nikmat Al-Khalik dan Ar-Razzaq. 🌟

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