Ajar HTML dan CSS dengan hasil yang terus kelihatan
Pelajar menulis kod dan melihat perubahan halaman di sebelahnya. Guru boleh menunjukkan hubungan antara tag, gaya dan hasil visual dalam satu sesi kelas.
Contoh setempat. Kod anda tidak disimpan.
Cabaran Pembelajaran Tradisional
Mengapa belajar web dengan Notepad mudah membuat pelajar kecewa?
❌ Notepad tiada maklum balas visual
Pelajar terpaksa menulis kod secara buta, menyimpan fail, mencari fail di Desktop, kemudian klik dua kali untuk membukanya di pelayar web. Proses ini perlu diulang berkali-kali hanya untuk menukar warna teks.
✅ Live Preview
Sebaik sahaja pelajar menaip satu huruf, paparan sebelah kanan berubah secara dinamik. Pengalaman interaktif ini membangkitkan rasa seronok mencipta (instant feedback loop).
❌ Ralat kecil yang memeningkan
Notepad tidak akan memberitahu jika pelajar tertinggal tag penutup </p>.
Ini boleh mengambil masa apabila guru menyemak banyak hasil kerja dalam satu kelas.
✅ Semak hasil ketika mengekod
Dengan pratonton dan konsol dalam editor Maker, pelajar boleh mencuba perubahan kod, melihat hasilnya dan membincangkan ralat bersama guru.
Topik pembelajaran ASK
Pemetaan Kurikulum ASK Tingkatan 1
Contoh aktiviti HTML dan CSS yang boleh dihubungkan dengan topik kod arahan ASK Tingkatan 1.
SP 4.1.1 & 4.1.2: Struktur & Teks
Pelajar menulis tag wajib html,
head,
title,
dan body
dengan struktur warna berkod. Pembelajaran tag perenggan dan tajuk menjadi lebih teratur.
SP 4.1.3 & 4.1.4: Media & Pautan
Memasukkan imej, audio, dan video terus dalam folder projek maya. Pelajar membina pautan luar dan dalam untuk menghasilkan laman bercabang.
SP 4.1.6: Penggayaan CSS
Latihan tiga kaedah penulisan CSS: gaya luaran (external melalui fail .css berasingan), gaya dalaman (internal), dan gaya sebaris (inline).
Mengapa Guru ASK Memilih SenangWebs?
Berasaskan Pelayar
Pelajar boleh menggunakan editor melalui pelayar pada peranti yang serasi, tanpa memasang aplikasi penyunting kod khusus.
Pemarkahan Pantas
Pelajar hanya perlu menghantar pautan langsung (URL) projek mereka melalui Google Classroom. Guru boleh menyemak kod dan hasilnya dengan cepat.
Pautan Hasil Kerja
Hasil yang diterbitkan boleh dibuka semula melalui pautan untuk semakan, perbincangan dan pembentangan kelas.
Mudahkan Pengajaran Kod Arahan Sekarang!
Mulakan dengan satu latihan HTML ringkas. Tunjukkan perubahan di paparan langsung, kemudian minta pelajar menerbitkan hasil mereka untuk semakan.
