PENGAJARAN Melakar papan cerita untuk membina laman sesawang yang menggunakan kod arahan HTML

Transkripsi

1 PENGAJARAN KOD ARAHAN 4.2 Kod Arahan HTML Melakar papan cerita untuk membina laman sesawang yang menggunakan kod arahan HTML Kandungan Muka Surat Rancangan Pengajaran 371 Lembaran Kerja Lembaran Kerja Lembaran Kerja Kad Imbas 378 Tiket Keluar 379

2 26 PENGAJARAN 26 BIDANG PEMBELAJARAN 4.0 Kod Arahan Standard Kandungan 4.2 Kod Arahan HTML Persedian: 30 minit Pengajaran: 120 minit Standard Pembelajaran Murid boleh Penerapan Pemikiran Melakar papan cerita untuk membina laman Komputasional: sesawang yang menggunakan kod arahan HTML Leraian (Decomposition) Pengecaman Corak Bahan Bantu Mengajar (BBM) (Pattern Recognition) Bahan untuk kelas Peniskalaan (Abstraction) Chromebook/ komputer riba Contoh laman sesawang Bahan untuk setiap murid Lembaran Kerja 26-1 Lembaran Kerja 26-2 Lembaran Kerja 26-3 Kad imbasan susun atur laman sesawang Pensel warna Tiket keluar Persediaan Cetak lembaran kerja cukup untuk setiap murid. Cetak, potong dan laminate set kad imbasan susun atur laman sesawang cukup untuk setiap kumpulan di dalam kelas. Cetak tiket keluar cukup untuk setiap murid. PENGAJARAN 26 Sumber Tambahan Papan cerita untuk laman sesawang: websitestoryboarding.html Membuat papan cerita untuk laman sesawang: storyboard.php Templat papan cerita untuk laman sesawang: storyboard 370

3 26 RANCANGAN PENGAJARAN Masa Cadangan Aktiviti BBM/ Catatan 10 Minit Set induksi 1. Guru bertanyakan murid contoh laman-laman sesawang yang diketahui oleh mereka. 2. Guru menunjukkan contoh-contoh laman sesawang yang berbeza. 3. Guru menerangkan kepada murid bahawa pengajaran hari ini bertujuan untuk mengajar murid langkah pertama pembinaan laman sesawang. 4. Guru bertanyakan murid apakah langkah pertama tersebut? Jawapan: merancang papan cerita atau storyboard laman sesawang. 5. Papan cerita ialah cara mudah untuk melihat jenis maklumat yang akan diletakkan dalam setiap laman pada laman sesawang. Contoh papan cerita: BBM: Komputer/ komputer riba Contoh laman sesawang Penerapan Pemikiran Komputasional: Leraian Pengecaman Corak Peniskalaan PENGAJARAN Minit Aktiviti: Merancang papan cerita 1. Guru menerangkan kepada murid bahawa terdapat 4 langkah penting sebelum papan cerita dapat dibina, iaitu: Langkah 1: Mengenal pasti kandungan laman sesawang 2. Bagi tugasan HTML, satu laman sesawang berdasarkan manamana topik di bawah boleh dibina oleh murid: a. Portfolio diri b. Sukan c. Sains d. Topik kemanusiaan e. Pekerjaan 3. Murid dikehendaki mengisi Lembaran Kerja 26-1 (m/s 375) untuk mengenal pasti kandungan yang ingin diletakkan di dalam laman sesawang. 4. Setiap subtopik akan dijadikan laman baru dalam laman sesawang tersebut dan dapat dicapai melalui bar navigasi. BBM: Lembaran Kerja 26-1 (m/s 375) Set kad imbasan Lembaran kerja 26-2 (m/s 376) Lembaran kerja 26-3 (m/s 377) Penerapan Pemikiran Komputasional: Leraian Pengecaman Corak Peniskalaan 371

4 26 Masa Cadangan Aktiviti BBM/ Catatan Langkah 2: Mengenal pasti susun atur laman sesawang 1. Guru menjelaskan kepada murid bahawa setiap laman sesawang mempunyai susun atur yang berbeza. 2. Guru membuka pelbagai jenis laman sesawang dengan susun atur dan rekaan yang berbeza. 3. Kemudian, guru menunjukkan ciri-ciri asas sesuatu laman sesawang yang kelihatan seperti berikut: PENGAJARAN Dalam kumpulan, guru mengedarkan set Kad Imbasan (m/s 383) untuk susun atur laman sesawang yang berbeza. 5. Guru meminta setiap kumpulan untuk membentuk susun atur laman sesawang. 6. Setiap kumpulan diberi 5 minit untuk melakukan aktiviti tersebut. 7. Selepas 5 minit, Guru membincangkan jawapan murid. 8. Guru memberikan Lembaran Kerja 26-2 (m/s 376) dan mengarahkan setiap murid secara individu untuk melakarkan laman pertama pada laman sesawang mereka. Pastikan mereka menepati soalan-soalan berikut: a. Di bahagian manakah terdapat tulisan pada laman tersebut? b. Di bahagian manakah imej atau gambar akan diletakkan? c. Berapakah jumlah laman yang ingin dibangunkan? d. Di bahagian manakah bar navigasi akan diletakkan untuk menghubungkan semua laman yang ada? e. Apakah sumber yang diperlukan untuk melengkapkan laman? 372

5 26 Masa Cadangan Aktiviti BBM/ Catatan 9. Contoh lakaran susun atur laman sesawang yang boleh dicipta: PENGAJARAN 26 Langkah 3: Mengenal pasti skema warna 1. Warna bagi setiap laman dalam laman sesawang mungkin berbeza tetapi skema warna bagi keseluruhan laman sesawang tersebut sebaik-baiknya perlulah konsisten. 2. Pastikan juga warna latar dan warna tulisan dapat dibezakan untuk memastikan tulisan dapat dibaca dengan baik. 3. Contoh skema warna yang kurang baik: 4. Guru boleh menggunakan laman sesawang ini untuk membantu murid memilih skema warna yang sesuai

6 26 Masa Cadangan Aktiviti BBM/ Catatan 5. Contoh skema warna yang baik: PENGAJARAN 26 Langkah 4: Melakar carta alir yang menghubungkan satu laman ke laman yang lain di dalam laman sesawang 1. Guru menerangkan bahawa setiap laman mestilah dapat diakses melalui laman utama (homepage). 2. Guru memberikan Lembaran Kerja 26-3 (m/s 377) supaya murid dapat melakarkan setiap laman yang terdapat dalam laman sesawang mereka. 10 Minit Refleksi dan Penutup 1. Guru memberikan Tiket Keluar (m/s 379) kepada setiap murid sebagai rumusan. 2. Guru meminta 1 atau 2 orang murid untuk berkongsi jawapan mereka. BBM: Tiket Keluar 374

7 26 LEMBARAN KERJA 26-1 Kandungan Laman Sesawang Lengkapkan ruangan dibawah dengan kandungan laman sesawang yang akan dibina. Kandungkan laman sesawang mestilah berdasarkan salah satu topik berikut: Portfolio diri Sukan Sains Topik kemanusiaan Pekerjaan PENGAJARAN 26 Tulis selengkap yang mungkin deskripsi topik laman sesawang yang akan Laman sesawang yang akan dibina adalah tentang. Laman sesawang ini akan membantu pengguna untuk mengetahui lebih dalam lagi tentang. Laman-laman yang akan disertakan dalam navigasi bar adalah.. 375

8 26 LEMBARAN KERJA 26-2 Susun Atur Laman Sesawang Berdasarkan kandungan yang telah ditetapkan, lukiskan susun atur laman sesawang yang akan dibina Lakarkan susun atur laman utama (homepage) laman sesawang anda. Pastikan terdapat elemen-elemen berikut: Imej Tulisan Tajuk Bar navigasi PENGAJARAN 26 Skema warna yang dipilih untuk laman utama: Sumber yang diperlukan untuk melengkapkan laman utama: 376

9 26 LEMBARAN KERJA 26-3 Carta alir setiap laman Tunjukkan bagaimana setiap laman pada bar navigasi laman sesawang anda berhubung dengan satu sama lain. Pastikan setiap laman dapat diakses melalui laman utama atau homepage. Tunjukkan bagaimana setiap laman pada bar navigasi laman sesawang anda berhubung dengan satu sama lain. Pastikan setiap laman dapat diakses melalui laman utama atau homepage. PENGAJARAN

10 26 KAD IMBAS Susun Atur Laman Sesawang Potong dan laminate kad imbas dibawah. Setiap set mengandungi semua kad imbas dibawah. Pastikan setiap kumpulan mempunyai satu set. Murid mesti menyusun semula kad-kad yang diberikan kepada 4 jenis templat di bawah. PENGAJARAN

11 26 TIKET KELUAR Papan Cerita Fikirkan semula pembelajaran pada hari ini. Adakah anda mempelajari sesuatu yang baru dan bermakna? Adakah objektif PDP pada hari ini tercapai? 1. Mengapakah papan cerita penting sebelum laman sesawang dapat dibina? PENGAJARAN Mengapakah skema warna yang dipilih untuk setiap laman pada laman sesawang adalah penting? Lengkapkan jadual di bawah: Perkara yang saya belajar hari ini 3 2 Perkara yang saya rasa menarik untuk pembelajaran hari ini 1 Soalan yang saya masih ada tentang pembelajaran hari ini 379

12 PENGAJARAN KOD ARAHAN 4.2 Kod Arahan HTML Menggunakan tags dalam atur cara HTML: <head>; <title>; <body>; dan <paragraph> Menggunakan paragraph headings dalam atur cara HTML yang dibina Kandungan Muka Surat Rancangan Pengajaran 382 Lembaran Kerja Tugasan Kerja Skema Jawapan 386 Tiket Keluar 387

13 27 PENGAJARAN 27 BIDANG PEMBELAJARAN 4.0 Kod Arahan Standard Kandungan 4.2 Kod Arahan HTML Standard Pembelajaran Murid boleh Menggunakan tags dalam atur cara HTML: <head>; <title>; <body>; dan <paragraph> Menggunakan paragraph headings dalam atur cara HTML yang dibina Persedian: 30 minit Pengajaran: 60 minit Penerapan Pemikiran Komputasional: Leraian (Decomposition) Pengecaman Corak (Pattern Recognition) Peniskalaan (Abstraction) PENGAJARAN 27 Bahan Bantu Mengajar (BBM) Bahan untuk setiap murid Internet Chromebook/komputer riba Lembaran Kerja 27-1 Tugasan Kerja Kerja 27-2 Nota Tag HTML Tiket keluar Persediaan Pastikan internet dapat digunakan di dalam kelas Cetak lembaran kerja untuk setiap murid Cetak tiket keluar untuk setiap murid Sumber Tambahan 1. Nota dalam talian Tutorial dalam talian Coursera Khan Academy - programming/htmlcss/intro-to-html/p/html-basics 381

14 27 RANCANGAN PENGAJARAN Masa Cadangan Aktiviti BBM/ Catatan 10 Minit Pengenalan dan set induksi BBM: 1. Guru menerangkan bahawa HTML ialah bahasa yang digunakan Komputer/ untuk menulis laman sesawang. HTML mengandungi kod yang komputer riba boleh digabung dan ditukar menjadi reka bentuk. Kod HTML Projektor adalah seperti arahan kepada komputer untuk melakukan perkara yang kita inginkan. 2. Guru membuka sebuah laman sesawang dan menunjukkan kod arahan HTML laman sesawang tersebut. Cara: Tekan ctrl + u semasa di laman sesawang yang telah dibuka untuk melihat kod htmlnya. PENGAJARAN Minit Tag asas: <head>; <title>; <body> 1. Guru menerangkan bahawa kod HTML terdiri daripada tag iaitu: o dibuka dengan simbol < dan ditutup dengan simbol > o tag selalu digunakan secara berpasangan di permulaan dan pengakhiran o kod HTML boleh mencecah panjang beberapa muka surat, tetapi kod HTML yang minimum memerlukan tag berikut: <HTML> <H1> Laman Sesawang Sekolah </H1> <H2> BBM: Perisian Notepad Komputer/ komputer riba Penerapan Pemikiran Komputasional: Leraian Pengecaman Corak Peniskalaan Selamat Datang! </H2> <BODY> Jemput membaca isi kandungan laman sesawang ini. </BODY> </HTML> 2. Kod berwarna digunakan untuk membantu murid melihat pembukaan dan penutupan tag dan permulaan dan penutupan tindakan. 3. Pengakhiran tindakan mempunyai / yang termasuk dalam tag 4. <H1> ialah header dan menentukan saiz header. Saiz boleh dipilih daripada <H1> hinggalah mencecah <H7>. 5. NOTA: Penggunaan huruf besar atau huruf kecil dalam HTML tidak berbeza. Oleh itu, <title> ialah sama dengan <TITLE> atau <TiTlE>. 6. Guru meminta murid menaip kod seperti di atas dalam Notepad. 7. Guru meminta murid menukar tajuk laman dan badan laman mengikut kreativiti. 8. Apabila mereka selesai, uji murid tentang fungsi tag yang berbeza. 382

15 27 Masa Cadangan Aktiviti BBM/ Catatan 10 Minit Tag <paragraph> dan paragraph heading BBM: 1. Guru menerangkan bahawa petikan panjang boleh dibahagikan Perisian Notepad kepada beberapa perenggan pendek menggunakan tag <p> </p>. Komputer/ i. Perenggan boleh juga dijajarkan di tengah, kiri dan kanan komputer riba dengan tag yang berikut: <p align = center> </p> (untuk tengah) <p align = left> </p> (untuk kiri) <p align = right> </p> (untuk kanan) ii. Guru menunjukkan cara pengunaan tag <p></p> di Notepad iii. Guru meminta murid menulis 3 perenggan tentang diri Penerapan Pemikiran Komputasional: Leraian Pengecaman PENGAJARAN 27 mereka di Notepad masing-masing Corak 20 Minit Lembaran Kerja Guru mengedarkan Lembaran Kerja 27-1 (m/s 384) kepada murid. 2. Guru meminta murid untuk melengkapkan tugasan lembaran kerja menggunakan Notepad. 3. Guru mengingatkan murid bahawa mereka perlu menaip tag dan syntax yang betul termasuk tag asas yang minimum, header, tajuk dan badan laman. 4. Bagi murid yang sudah melengkapkan lembaran kerja mereka, guru memberikan Tugasan Kerja 27-1 (m/s 385) dan menyuruh Peniskalaan BBM: Lembaran Kerja 27-1 (m/s 384) Tugasan Kerja 27-1 (m/s 385) Penerapan Pemikiran Komputasional: murid untuk melengkapkan tugasan tersebut. Leraian Pengecaman Corak Peniskalaan 10 Minit Refleksi dan Penutup BBM: 1. Berikan Tiket Keluar (m/s 387) kepada setiap murid sebagai Tiket Keluar rumusan. 2. Minta 1 atau 2 orang murid untuk berkongsi jawapan mereka. 3. Ingatkan murid untuk melengkapkan Tugasan Kerja 27-1 untuk dihantar pada kelas seterusnya. 383

16 27 LEMBARAN KERJA 27-1 Tag Gunakan tag HTML yang tepat untuk mendapatkan paparan yang sama seperti yang ditunjukkan dibawah Berdasarkan hasil yang dikehendaki, taip kod HTML yang betul dalam compiler dan tulis semula di atas ruang yang diberikan di bawah. Isi tempat kosong menggunakan maklumat sendiri di ruang kelabu. Hasil yang dikehendaki: Selamat Datang ke Laman Sesawang Saya! PENGAJARAN 27 Nama saya ialah. Saya berumur tahun. Sekolah saya ialah. Cita-cita saya ialah. Pada masa lapang, saya suka. Makanan kegemaran saya ialah. Jika saya boleh memperkenalkan diri saya dengan 3 perkataan. Saya berharap anda seronok membaca laman saya! Kod HTML: Cuba fikirkan: Bagaimanakah anda boleh bold perkataan dalam teks? 384

17 27 TUGASAN KERJA 27-1 Tag Tambahan Berdasarkan Nota Tag HTML yang diberikan, perbaiki laman utama anda dengan menjadikannya lebih menarik! Dengan papan cerita yang telah dibuat semasa pengajaran yang lepas, cipta laman sesawang sendiri menggunakan tag yang sesuai. Paparan: PENGAJARAN 27 Kod HTML: 385

18 SKEMA JAWAPAN LEMBARAN KERJA 27-1 Tag 27 Gunakan tag HTML yang tepat untuk mendapatkan paparan yang sama seperti yang ditunjukkan dibawah Berdasarkan hasil yang dikehendaki, taip kod HTML yang betul dalam notepad dan tulis semula di atas ruang yang diberikan di bawah. Isi tempat kosong menggunakan maklumat sendiri di ruangan kelabu. Hasil yang dikehendaki: Selamat Datang ke Laman Sesawang Saya! PENGAJARAN 27 Nama saya ialah. Saya berumur tahun. Sekolah saya ialah. Cita-cita saya ialah. Pada masa lapang, saya suka. Makanan kegemaran saya ialah. Jika saya boleh memperkenalkan diri saya dengan 3 perkataan: Saya berharap anda seronok membaca laman saya! Kod HTML: <HTML> <H1> Selamat Datang ke Laman Sesawang Saya! </H1> <BODY><P align = center>nama saya ialah Ali. Saya berumur 13 tahun. Sekolah saya ialah SMK Taman Sejahtera</p><p align = left> Pada masa lapang, saya suka bermain bola sepak. Makanan kegemaran saya ialah Nasi Lemak. </p><p align = right>kalau saya ingin memperkenalkan diri saya dengan 3 perkataan, 3 perkataan tersebut ialah: </p><p align = right>tinggi</p><p align = right>ceria</p><p align = right>bahagia </p><p align = center>i hope you enjoyed my page!</p> </BODY> </HTML> Cuba fikirkan: Bagaimanakah anda boleh bold perkataan dalam teks? 386

19 27 TIKET KELUAR Tag Fikirkan semula pembelajaran pada hari ini. Adakah anda mempelajari sesuatu yang baru dan bermakna? Adakah objektif PDP pada hari ini tercapai? 1. Apakah tag asas bagi kod HTML? PENGAJARAN Mengapakah penting untuk menguasai tag HTML? Lengkapkan jadual di bawah: 3 Perkara yang saya belajar hari ini 2 Perkara yang saya rasa menarik untuk pembelajaran hari ini 1 Soalan yang saya masih ada tentang pembelajaran hari ini 387

20 PENGAJARAN KOD ARAHAN 4.2 Kod Arahan HTML Menggunakan atur cara HTML untuk menghasilkan Banner, Frame dan Menu. Kandungan Muka Surat Rancangan Pengajaran 390 Lembaran Kerja Skema Jawapan 393 Tiket Keluar 394

21 28 PENGAJARAN 28 BIDANG PEMBELAJARAN 4.0 Kod Arahan Persedian: 30 minit Pengajaran: 60 minit Standard Kandungan 4.2 Kod Arahan HTML Standard Pembelajaran Murid boleh Menggunakan atur cara HTML untuk menghasilkan Banner, Frame dan Menu. Bahan Bantu Mengajar (BBM) Bahan untuk setiap murid Internet Chromebook/komputer riba Lembaran Kerja 28-1 Tiket Keluar Persediaan Pastikan internet dapat digunakan di dalam kelas Cetak Lembaran Kerja untuk setiap murid Cetak Tiket Keluar untuk setiap murid Sumber Tambahan 1. Nota dalam talian Penerapan Pemikiran Komputasional: Leraian (Decomposition) Pengecaman Corak (Pattern Recognition) Peniskalaan (Abstraction) PENGAJARAN Tutorial dalam talian Coursera Khan Academy

22 28 RANCANGAN PENGAJARAN Masa Cadangan Aktiviti BBM/ Catatan 10 Minit Pengenalan dan set induksi 1. Murid mengeluarkan semula papan cerita laman sesawang semasa pengajaran pertama HTML. 2. Guru ulang kaji ciri-ciri asas paparan laman sesawang. BBM: Komputer/ komputer riba Projektor PENGAJARAN Minit 3. Guru menerangkan bahawa murid akan belajar cara untuk membina setiap bahagian dalam laman sesawang menggunakan atur cara HTML. Banner, Frame dan Menu 1. Guru menerangkan setiap ciri-ciri asas paparan laman sesawang dibina melalui fungsi frame. BBM: Perisian Notepad Komputer/ 2. Frame membahagikan laman sesawang kepada bahagian yang komputer riba diingini. 3. Sebelum frame digunakan, isi kandungan dalam setiap frame Penerapan perlu dihasilkan dahulu. Pemikiran 4. Murid membuka 3 fail Notepad berbeza dan menulis atur cara Komputasional: HTML untuk header, main content dan menu. Leraian Contoh: Pengecaman Fail Pertama: header.html Corak <HTML> Peniskalaan <H1>Laman Sesawang SMK Taman Sejahtera</H1> </HTML> Fail Kedua: menu.html <HTML> <H1>Menu</H1> <Body> <p>jadual Kelas</p> <p>aktiviti Tahunan</p> </body> </HTML> 390

23 28 Masa Cadangan Aktiviti BBM/ Catatan 10 Minit Fail Ketiga: main content.html <HTML> <H1>Selamat Datang!</H1> <Body> <p>laman sesawang ini mengandungi semua maklumat tentang SMK Taman Sejahtera.</p> </body> </HTML> 5. Guru menunjukkan tag frame: <html> <head></head> <frameset rows= 20%,* > <frame src= header.html > <frameset cols= 30%,* > <frame src= menu.html > <frame src= main content.html > </frameset> </frameset> </html> 6. Murid dikehendaki untuk membuka fail Notepad baru dan masukkan tag frame yang ditunjukkan. BBM: Komputer/ komputer riba Projektor PENGAJARAN Minit Lembaran Kerja Guru mengedarkan Lembaran Kerja 28-1 (m/s 392) kepada murid. 2. Guru meminta murid untuk melengkapkan tugasan lembaran kerja menggunakan Notepad. 3. Guru mengingatkan murid bahawa mereka perlu menaip tag dan syntax yang betul. BBM: Lembaran Kerja 28-1 (m/s 392) Komputer/ komputer riba Notepad Penerapan Pemikiran Komputasional: Leraian Pengecaman Corak Peniskalaan 10 Minit Refleksi dan Penutup 1. Berikan Tiket Keluar (m/s 394) kepada setiap murid sebagai rumusan. 2. Minta 1 atau 2 orang murid untuk berkongsi jawapan mereka di hadapan kelas. BBM: Tiket Keluar 391

24 28 LEMBARAN KERJA 28-1 Banner, Frame, Menu Gunakan tag HTML yang tepat untuk mendapatkan paparan yang sama seperti yang ditunjukkan dibawah Berdasarkan hasil yang dikehendaki, taip kod HTML yang betul dalam Notepad dan tulis semula di atas ruang yang diberikan di bawah. Isi tempat kosong menggunakan maklumat sendiri. Hasil yang dikehendaki: PENGAJARAN 28 Kod HTML: 392

25 SKEMA JAWAPAN LEMBARAN KERJA 28-1 Banner, Frame, Menu 28 Gunakan tag HTML yang tepat untuk mendapatkan paparan yang sama seperti yang ditunjukkan dibawah Berdasarkan hasil yang dikehendaki, taip kod HTML yang betul dalam Notepad dan tulis semula di atas ruang yang diberikan di bawah. Isi tempat kosong menggunakan maklumat sendiri. Hasil yang dikehendaki: PENGAJARAN 28 Kod HTML: Header: <HTML> <H1>Laman Ahmad</H1> </HTML> Menu: <HTML> <H1>Menu</H1> <Body> <p> 1. Cita-cita Saya </p> </body> </HTML> Main Content: <HTML> <H1>Cita-cita Saya</H1> <Body> <p>perenggan pertama </p> <p> perenggan kedua </p> <p> perenggan ketiga </p> </body> </HTML> Frame: <html> <head></head> <frameset rows= 20%,* > <frame src= header.html > <frameset cols= 30%,* > <frame src= menu. html > <frame src= main content.html > </frameset> </frameset> </html> 393

26 28 TIKET KELUAR Tag Fikirkan semula pembelajaran pada hari ini. Adakah anda mempelajari sesuatu yang baru dan bermakna? Adakah objektif PDP pada hari ini tercapai? 1. Apakah tag frame bagi kod HTML? PENGAJARAN Mengapakah penting untuk menguasai tag HTML? Lengkapkan jadual di bawah: 3 Perkara yang saya belajar hari ini 2 Perkara yang saya rasa menarik untuk pembelajaran hari ini 1 Soalan yang saya masih ada tentang pembelajaran hari ini 394

27 PENGAJARAN KOD ARAHAN 4.2 Kod Arahan HTML Membina pautan teks dan imej dalam atur cara HTML Menulis atur cara untuk memasukkan imej dalam atur cara HTML Kandungan Muka Surat Rancangan Pengajaran 397 Lembaran Kerja Tugasan Kerja Kad Imbasan Kod Domino 403 Tiket Keluar 404 Skema Jawapan 405

28 29 PENGAJARAN 29 Persedian: 30 minit BIDANG PEMBELAJARAN Pengajaran: 60 minit 4.0 Kod Arahan Penerapan Pemikiran Komputasional: Standard Kandungan Leraian (Decomposition) 4.2 Kod Arahan HTML Pengecaman Corak (Pattern Recognition) Standard Pembelajaran Peniskalaan (Abstraction) Murid boleh Membina pautan teks dan imej dalam atur cara HTML Menulis atur cara untuk memasukkan imej dalam atur cara HTML Bahan Bantu Mengajar (BBM) Bahan untuk setiap kumpulan Kad Imbasan Kod Domino Bahan untuk setiap murid Chromebook/komputer riba Lembaran Kerja 29-1 Tugasan Kerja 29-1 Tiket keluar Persediaan Cetak lembaran kerja untuk setiap murid Cetak tiket keluar untuk setiap murid Sumber Tambahan 1. Nota dalam talian PENGAJARAN Tutorial dalam talian Coursera Khan Academy

29 RANCANGAN PENGAJARAN 29 Masa Cadangan Aktiviti BBM/ Catatan 5 Minit Pengenalan dan set induksi BBM: 1. Guru mengedarkan kad imbasan kod domino (m/s 403) kepada Kad Imbasan setiap kumpulan. Kod Domino 2. Setiap kumpulan dikehendaki untuk menyusun kad yang diberi supaya maksudnya adalah bersebelahan dengan kod tersebut dalam bentuk bulat. 3. Selepas 3 minit, guru mendapatkan semula perhatian seluruh kelas dan bincangkan jawapan bersama-sama. 4. Guru bertanyakan murid ciri-ciri lain untuk ditambahkan dalam laman sesawang supaya lebih menarik. Contoh jawapan yang boleh diterima: tambah imej dan warna PENGAJARAN Minit Membina Pautan Teks dan Imej 1. Guru menerangkan bahawa pautan teks boleh dimasukkan dalam kod arahan HTML. 2. Guru menunjukkan cara untuk memasukkan pautan teks secara tunjuk ajar. Tag HTML: <a href= url >KLIK DI SINI</a> a) Buka pelayar laman sesawang b) Cari link yang boleh dijadikan contoh c) Masukkan url link tersebut dalam tag HTML berikut: <a href= url >KLIK DI SINI</a> d) Perkataan KLIK DI SINI boleh ditukar kepada teks yang lain untuk ditunjukkan. Contoh Pautan Teks: BBM: Perisian Notepad Komputer/ komputer riba Penerapan Pemikiran Komputasional: Leraian Pengecaman Corak Peniskalaan Contoh Kod Arahan HTML dalam Notepad Contoh Hasil dalam Pelayar Laman Sesawang 3. Murid membuka Notepad dan membina satu pautan teks mengikut cara yang ditunjukkan oleh guru. 4. Guru menerangkan bahawa pautan imej juga boleh dimasukkan dalam kod arahan HTML. 5. Ini bermaksud apabila gambar diklik, laman sesawang yang ditetapkan akan muncul. 6. Guru menunjukkan cara untuk memasukkan pautan imej secara tunjuk ajar. a) Buka pelayar laman sesawang b) Cari link contoh c) Masukkan link yang diingini dan diletakkan dalam gambar selepas <a href = 397

30 29 Masa Cadangan Aktiviti BBM/ Catatan d) Masukkan nama imej selepas <img src =e) e) Contoh tag HTML pautan imej: <a href= > <img src= Langkawi.jpg alt= HTML tutorial style= width:42px;height:42px;border:0; > </a> * Untuk memastikan imej dapat dilihat, anda mesti simpan gambar yang ingin dipaparkan dalam komputer dengan nama yang sama dalam tag HTML anda selepas <img src =.Contoh: <img src= Langkawi.jpg PENGAJARAN 29 Contoh Kod Arahan HTML dalam Notepad Pastikan fail imej yang ingin dipaparkan telah disimpan dalam komputer Contoh Hasil dalam Pelayar Laman Sesawang 7. Murid membuka Notepad dan cuba memasukkan satu pautan imej mengikut cara yang ditunjukkan oleh guru. 15 Minit Memasukkan Imej dalam atur cara HTML 1. Guru menunjukkan beberapa gambar dan meminta murid mengenal pasti gambar yang sesuai untuk digunakan dalam laman sesawang sesebuah pasar raya. Guru menunggu jawapan murid untuk seketika. 2. Murid diberi beberapa contoh gambar pasar raya dan diminta memilih gambar yang sesuai sebagai gambar utama dalam laman sesawang. 3. Guru menerangkan bahawa imej boleh dimasukkan dalam laman sesawang menggunakan tag : <img src= > 4. Guru menunjukkan cara secara tunjuk ajar: a. Buka pelayar laman sesawang b. Cari gambar Bandaraya Kuala Lumpur menggunakan enjin carian Google Image c. Dapatkan pautan laman bagi imej tersebut BBM: Komputer/ komputer riba Projektor Penerapan Pemikiran Komputasional: Leraian Pengecaman Corak 398

31 29 Masa Cadangan Aktiviti BBM/ Catatan d. Masukkan pautan laman imej tersebut ke dalam kod di atas, seperti berikut: <img src= styles/inner-banner-image/public/kuala_lumpur_ istock_ medium.jpg > Contoh Kod Arahan HTML dalam Notepad Contoh Hasil dalam Pelayar Laman Sesawang 5. Pautan laman itu perlu dimasukkan di antara pembuka dan penutup kata, iaitu selepas src= 6. Murid membuka Notepad dan cuba memasukkan imej dalam atur cara HTML. 7. Minta murid mencari sekurang-kurangnya 3 imej berlainan dalam bentuk banner atau kain rentang dan gunakan pautan laman dalam kod <img src=>dengan betul. PENGAJARAN Minit Lembaran Kerja Guru memberi murid Lembaran Kerja 29-1 (m/s 400). 2. Guru mengingatkan murid bahawa tag asas perlu digunakan. 3. Bagi murid yang sudah melengkapkan lembaran kerja mereka, berikan Tugasan Kerja 29-1 (m/s ) dan minta mereka melengkapkannya. BBM: Lembaran Kerja 29-1 (m/s 400) Tugasan Kerja 29-1 (m/s ) 5 Minit Refleksi 1. Guru memberikan Tiket Keluar (m/s 404) kepada setiap murid sebagai rumusan. 2. Guru meminta 1 atau 2 orang murid untuk berkongsi jawapan mereka. 3. Guru mengingatkan murid untuk melengkapkan Tugasan Kerja 29-1 (m/s ) untuk dihantar pada kelas seterusnya. BBM: Tiket Keluar 399

32 29 LEMBARAN KERJA 29-1 Pautan Imej Bayangkan anda pergi bercuti dengan keluarga anda. Ke manakah anda akan pergi, apakah yang akan anda lihat dan apakah yang akan anda buat? Tambah imej ke dalam laman sesawang dan tulis satu perenggan pendek tentang imej tersebut. Laman sesawang anda perlu mempunyai: 1. Sekurang-kurangnya 3 imej 2. Perenggan menerangkan tentang imej tersebut Anda boleh rujuk kepada contoh paparan di bawah sebagai bimbingan. Gunakan tag HTML yang tepat untuk membuat pautan imej pada laman sesawang PENGAJARAN 29 Contoh paparan: Aktiviti Cuti Sekolah! Pada cuti sekolah yang lalu, kami sekeluarga bercuti di Pulau Langkawi. Klik sini (pautan teks) untuk membaca tentang Pulau Langkawi. Klik gambar di bawah untuk melihat peta Pulau Langkawi (buat pautan pada imej). Berikut merupakan beberapa gambar kegemaran saya semasa di Pulau Langkawi: Gambar semasa kami Kami sedang Kami nampak Kod HTML: 400

33 29 TUGASAN KERJA 29-1 Laman Utama bersama Imej Anda telah mempelajari semua tag asas HTML. Anda boleh buat laman sesawang Tentang Saya yang lengkap. Laman sesawang anda perlu mempunyai tag seperti (rujuk Lembaran Kerja 28-1 Pengajaran 28 di muka surat 392 untuk layout laman utama anda): Tag HTML: <html> <a href= url >KLIK DI SINI</a> <h1>. </h1> <body>. </body> </html> <p>. </p> <a href= > <img src= Langkawi.jpg alt= HTML tutorial style= width:42px;height:42px;border:0; > </a>v <img src= > Paparan laman sesawang tentang saya: PENGAJARAN

34 29 TUGASAN KERJA 29-1 Laman Utama bersama Imej Kod HTML: PENGAJARAN

35 29 KAD IMBASAN Kod Domino Arahan untuk guru: Potong kad di bawah. Setiap kumpulan perlu mendapat satu set. Kad perlu dilamina dan disimpan dalam bag ziplock untuk memudahkan penggunaan semula <H1>...</H1> -- <H6>...</H6> <P> Digunakan untuk menunjukkan perenggan. Membuka pautan laman yang membawa ke dokumen atau anchor lain. PENGAJARAN 29 <A>...</A> <OL>...</OL> <UL>...</UL> <LI> <I>...</I> Senarai tersusun (bernombor). Senarai tidak tersusun (tidak bernombor), titik tumpu. Item senarai. Huruf gelap. Huruf bergaris. <B>...</B> <U>...</U> Huruf condong. Break baris. <BR> Digunakan untuk memasukkan imej ke dalam dokumen. <IMG> Buka dan tutup semua dokumen HTML. <HTML>...</HTML> Menutup header dokumen. <HEAD>...</HEAD> Mengandungi badan dokumen HTML. <BODY><.../BODY> Digunakan untuk menentukan saiz heading. Nilai 1 hingga 6, dimana 1 ialah paling besar dan 6 ialah paling kecil. 403

36 29 TIKET KELUAR Pautan Imej Fikirkan semula pembelajaran pada hari ini. Adakah anda mempelajari sesuatu yang baru dan bermakna? Adakah objektif PDP pada hari ini tercapai? 1. Tag apa yang boleh digunakan untuk memasukkan imej? PENGAJARAN Mengapakah pautan imej satu fitur yang penting dalam laman sesawang? Lengkapkan jadual di bawah: 3 Perkara yang saya belajar hari ini 2 Perkara yang saya rasa menarik untuk pembelajaran hari ini 1 Soalan yang saya masih ada tentang pembelajaran hari ini 404

37 SKEMA JAWAPAN LEMBARAN KERJA 29-1 Pautan Imej Bayangkan anda pergi bercuti dengan keluarga anda. Ke manakah anda akan pergi, apakah yang akan anda lihat dan apakah yang akan anda buat? Tambah imej ke dalam laman sesawang dan tulis satu perenggan pendek tentang imej tersebut. Laman sesawang anda perlu mempunyai: Gunakan tag HTML yang tepat untuk membuat pautan imej pada laman sesawang Sekurang-kurangnya 3 imej 2. Perenggan menerangkan tentang imej tersebut Anda boleh rujuk kepada contoh paparan di bawah sebagai bimbingan. PENGAJARAN 29 Contoh paparan: Aktiviti Cuti Sekolah! Pada cuti sekolah yang lalu, kami sekeluarga bercuti di Pulau Langkawi. Klik sini (pautan teks) untuk membaca tentang Pulau Langkawi. Klik gambar di bawah untuk melihat peta Pulau Langkawi (buat pautan pada imej). Berikut merupakan beberapa gambar kegemaran saya semasa di Pulau Langkawi: Gambar semasa kami Kami sedang Kami nampak Kod HTML: <HTML> <H1>Aktiviti Cuti Sekolah</H1> <Body> <p>pada cuti sekolah yang lalu, kami sekeluarga bercuti di Pulau Langkawi.</p> <p>klik <a href= > sini</a> untuk membaca tentang Pulau Langkawi.</p> <a href= > <img src= alt= HTML tutorial style= width:42px;height:42px;border:0; > </a> <p> Berikut merupakan beberapa gambar kegemaran saya semasa di Pulau Langkawi:</p> <img src= url > <p>gambar semasa kami berenang di Pantai Cenang</p> <img src= url > <P>Kami sedang makan makanan laut</p> <img src= url > <P>Kami nampak helang yang besar!</p> </body> </HTML> 405

38 PENGAJARAN KOD ARAHAN 4.2 Kod Arahan HTML Menghasilkan pull down menu melalui atur cara HTML Menghasilkan ruang komen melalui atur cara HTML Kandungan Muka Surat Rancangan Pengajaran 408 Lembaran Kerja Tugasan Kerja Kad Imbasan Kod 415 Tiket Keluar 417 Skema Jawapan 418

39 30 PENGAJARAN 30 BIDANG PEMBELAJARAN 4.0 Kod Arahan Standard Kandungan 4.2 Kod Arahan HTML Standard Pembelajaran Murid boleh: Menghasilkan pull down menu melalui atur cara HTML Menghasilkan ruang komen melalui atur cara HTML Bahan Bantu Mengajar (BBM) Bahan untuk setiap kumpulan Kad Imbasan Kod Bahan untuk setiap murid Notepad Chromebook/Komputer riba Lembaran Kerja 30-1 Tugasan Kerja 30-1 Tiket Keluar Persediaan Cetak lembaran kerja untuk setiap murid Cetak tiket keluar untuk setiap murid Sumber Tambahan 1. Nota dalam talian Persedian: 30 minit Pengajaran: 60 minit Penerapan Pemikiran Komputasional: Leraian (Decomposition) Pengecaman Corak (Pattern Recognition) Peniskalaan (Abstraction) PENGAJARAN Tutorial dalam talian Coursera Khan Academy

40 30 RANCANGAN PENGAJARAN Masa Cadangan Aktiviti BBM/ Catatan 5 Minit 10 Minit Set induksi 1. Guru mengagihkan kad imbasan kepada setiap kumpulan. 2. Murid dikehendaki menyusun kad untuk menunjukkan urutan kod yang betul. 3. Guru mendapatkan perhatian seluruh kelas dan bincangkan jawapan bersama-sama. 4. Guru memberi penekanan keperluan adanya tag asas dan tag minimum dalam satu laman: <HTML>, <H1>, <BODY> serta penutupnya. Aktiviti 1: Menyediakan senarai 1. Guru menanyakan murid tentang jenis-jenis senarai yang boleh dibina. Jawapan yang boleh diterima: senarai barang dapur, senarai nama, senarai buku, senarai panggilan dan lain-lain. 2. Tuliskan jawapan yang dinyatakan pada papan putih 3. Guru menanyakan murid tentang cara yang terbaik untuk menunjukkan senarai tersebut dengan kemas dalam laman sesawang seperti menggunakan bullet point, nombor, huruf, angka Roman, dan sebagainya. 4. Guru memperkenalkan senarai dalam HTML. 5. Guru menerangkan bahawa terdapat 2 jenis senarai dalam HTML: Senarai Tersusun dan Tidak Tersusun. Tag untuk kedua-duanya ialah seperti berikut: BBM: Kad Imbasan Kod (m/s ) BBM: Perisian Notepad Komputer/ komputer riba Penerapan Pemikiran Komputasional: Leraian Pengecaman Corak Peniskalaan PENGAJARAN 30 Senarai Tersusun (Bernombor) <OL> <LI> Berlian </LI> <LI> Emas</LI> <LI> Duit </LI> </OL> Senarai Tidak Tersusun (Titik tumpu) <UL> <LI> Berlian </LI> <LI> Emas</LI> <LI> Duit </LI> </UL> Contoh Senarai Tersusun: Contoh Senarai Tidak Tersusun: 408

41 30 Masa Cadangan Aktiviti BBM/ Catatan 6. Guru menerangkan cara menulis atur cara HTML senarai secara mendatar menggunakan tag <style> sebelum permulaan senarai, seperti berikut: Contoh Input kod HTML dan hasil: <style> li { display: inline; } </style> <UL> <LI> Berlian </LI> <LI> Emas</LI> <LI> Duit </LI> </UL> 7. Murid membuka Notepad. 8. Murid dikehendaki untuk menulis atur cara HTML; 2 jenis senarai seperti makanan kegemaran, filem kegemaran dan lain-lain. Satu senarai perlu menggunakan senarai tersusun dan satu lagi menggunakan senarai tidak tersusun. 9. Setelah murid siap, murid dikehendaki untuk membuat senarai tersebut secara mendatar pula. PENGAJARAN Minit Aktiviti 2: Pull down menu list 1. Guru memperkenalkan senarai pull down menu kepada murid. 2. Guru menunjukkan gambar di bawah atau menggunakan laman sesawang untuk tunjukkan pull down menu. BBM: Chrome books Buka pelayar sesawang: goo.gl/cfzlvb Penerapan Pemikiran Komputasional: Leraian Pengecaman Corak Peniskalaan a. Senarai pull down menu ialah senarai beberapa item yang menunjukkan kesemua item apabila tab tersebut ditekan. b. Untuk membuat senarai pull down menu dalam HTML, gunakan tag <select> <option> </option></select>. 409

42 30 Masa Cadangan Aktiviti BBM/ Catatan Sebagai contoh: <select> <option>members </option> <option>ali </option> <option>amin </option> <option>alixia </option> <option>amelia </option> </select> PENGAJARAN Guru menanyakan murid di mana mereka akan masukkan senarai pull down menu dalam laman sesawang. Jawapan yang boleh diterima: di bahagian bar navigasi. 4. Guru menanyakan murid mengapa mereka akan memasukkan senarai pull down menu dalam laman sesawang mereka. Jawapan yang boleh diterima: laman sesawang kelihatan lebih kemas, menjimatkan ruang. 5. Murid dikehendaki untuk menukar 2 senarai sebelumnya kepada senarai pull down menu dalam fail Notepad masing-masing. 10 Minit Aktiviti 3: Ruang Komen 1. Guru memperkenalkan ruang komen kepada murid 2. Guru menerangkan bahawa ruang komen boleh menjadikan laman sesawang nampak lebih menarik kerana mereka boleh mendapatkan pandangan atau input daripada pengguna atau pelawat. 3. Ruang komen boleh dibuat menggunakan tag <form> </form> seperti berikut: <form> Nama:<br> <input type= text > <br><br> <input type= submit > </form> 410

43 30 Masa Cadangan Aktiviti BBM/ Catatan a. Dengan menggunakan input type = text sebagai input, pengguna boleh menaip input mereka. b. Untuk membolehkan pengguna menghantar input, gunakan input type submit c. Untuk menukar perkataan submit kepada perkataan lain seperti Hantar, gunakan kod: <input type= submit value = Hantar > PENGAJARAN Minit 4. Murid dikehendaki untuk mencipta ruang komen dengan 2 input iaitu Nama dan Umur sebelum mereka boleh Hantar. Aktiviti 4: Lembaran Kerja 30-1 BBM: 1. Guru memberi murid Lembaran Kerja Lembaran Kerja 2. Guru mengingatkan murid bahawa mereka perlu membuat bar 30-1 (m/s 412) menu mendatar dan juga menyertakan senarai drop down Tugasan Kerja dalam menu Guru mengingatkan murid bahawa tag asas perlu digunakan. (m/s ) 4. Bagi murid yang sudah melengkapkan lembaran kerja mereka, berikan Tugasan Kerja 30-1 dan minta mereka melengkapkannya. 5 Minit Penutup BBM: 1. Guru mengedarkan Tiket Keluar (m/s 417) kepada setiap murid Tiket Keluar sebagai rumusan. 2. Seorang atau dua orang murid diminta untuk berkongsi jawapan mereka. 3. Ingatkan murid untuk melengkapkan Tugasan Kerja 30-1 untuk dihantar pada kelas seterusnya. 411

44 30 LEMBARAN KERJA 30-1 Senarai Buat senarai anda: 1) Reka paparan menu mendatar di bahagian atas laman selepas header. 2) Buat senarai bernombor untuk semua makanan yang anda suka makan. 3) Senarai bullet points bagi semua tempat yang anda hendak lawat. Beri peluang kepada rakan yang melawat laman anda untuk meninggalkan komen. Gunakan contoh paparan di bawah sebagai bimbingan: Contoh paparan: Tentang saya! Hobi Keluarga Makanan Rakan Saya suka makan 1. Nasi goreng 2. KFC 3. Cendol Saya hendak melawat Australia Taman Negara England Tinggalkan komen anda! Nama: Makanan kegemaran: Gunakan tag HTML yang tepat untuk membina senarai yang sama seperti yang ditunjukkan dibawah PENGAJARAN 30 Tempat yang ingin dilawat: HANTAR Kod HTML: 412

45 30 TUGASAN KERJA 30-1 Laman Utama Di bawah ialah senarai tags yang anda telah pelajari. Pilih satu topik dari subjek yang anda gemari dan sediakan satu laman sesawang yang kreatif dengan menggunakan semua tags tersebut. Guna bahan bacaan serta internet untuk mencari maklumat yang anda perlu bagi melengkapi tugasan ini. <html> <h1>. </h1> <body>. </body> </html> <ol>. </ol> <ul>. </ul> <li> </li> <b>. </b> <i>. </i> <u>. </u> PENGAJARAN 30 <p>. </p> <br> <HR size = width = > <p align = >. </p> <Body bgcolor = color text = color> <style> <select> Li { display: inline;} </style> <option> </option> <option> </option> <option> </option> <option> </option> <option> </option> </select> <font size = color= face= > <form> Nama:<br> <input type= text > <br><br> <input type= submit > </form> Paparan laman sesawang dengan topik kegemaran anda: 413

46 30 TUGASAN KERJA 30-1 Laman Utama Kod HTML: PENGAJARAN

47 30 KAD IMBASAN KOD Arahan untuk guru: Potong kad di bawah. Setiap kumpulan perlu mendapat satu set. Kad perlu dilamina dan disimpan dalam bag ziplock untuk memudahkan penggunaan semula <HTML> <H1> <BODY> <B> <I> <U> <BR> <P> <B> <I> </HTML> </H1> </BODY> </B> </I> </U> <BR> </P> </B> </I> PENGAJARAN 30 <U> SISTEM SOLAR </U> Sistem solar terdiri daripada matahari, bulan dan planet-planet. Sistem solar juga terdiri daripada komet, meteoroid dan asteroid. Dalam turutan mengikut jarak daripada matahari adalah: Merkuri, Venus, Bumi, Mars, Jupiter, Saturn, Uranus dan Neptune. Matahari terletak di tengah-tengah sistem solar dan planet, asteroid, komet dan meteoroid bergerak mengelilinginya. Matahari adalah ahli yang terbesar dalam sistem solar. Diambil daripada internet. Terima kasih kerana membaca! 415

48 30 KAD IMBASAN KOD Arahan untuk guru: Potong kad di bawah. Setiap kumpulan perlu mendapat satu set. Kad perlu dilamina dan disimpan dalam bag ziplock untuk memudahkan penggunaan semula Paparan yang dikehendaki: PENGAJARAN 30 SISTEM SOLAR Sistem solar terdiri daripada matahari, bulan dan planet-planet. Sistem solar juga terdiri daripada komet, meteoroid dan asteroid. Matahari adalah ahli yang terbesar dalam sistem solar. Dalam turutan mengikut jarak daripada matahari adalah: Merkuri, Venus, Bumi, Mars, Jupiter, Saturn, Uranus dan Neptune. Matahari terletak di tengah-tengah sistem solar dan planet, asteroid, komet dan meteoroid bergerak mengelilinginya. Diambil daripada internet. Terima kasih kerana membaca! 416

49 30 TIKET KELUAR Senarai Fikirkan semula pembelajaran pada hari ini. Adakah anda mempelajari sesuatu yang baru dan bermakna? Adakah objektif PDP pada hari ini tercapai? 1. Tag apa yang boleh digunakan untuk menggunakan senarai? PENGAJARAN Bagaimanakah penggunaan senarai, bar menu dan senarai pull down menu membantu pengguna laman sesawang? Lengkapkan jadual di bawah: Perkara yang saya belajar hari ini 3 2 Perkara yang saya rasa menarik untuk pembelajaran hari ini 1 Soalan yang saya masih ada tentang pembelajaran hari ini 417

50 SKEMA JAWAPAN LEMBARAN KERJA 30-1 Senarai Buat senarai anda: 1) Reka paparan menu mendatar di bahagian atas laman selepas header. 2) Buat senarai bernombor untuk semua makanan yang anda suka makan. 3) Senarai bullet points bagi semua tempat yang anda hendak lawat. Beri peluang kepada rakan yang melawat laman anda untuk meninggalkan komen. Gunakan contoh paparan di bawah sebagai bimbingan: Contoh paparan: Tentang saya! Hobi Keluarga Makanan Rakan Saya suka makan 1. Nasi goreng 2. KFC 3. Cendol Saya hendak melawat Australia Taman Negara England Tinggalkan komen anda! Nama: Makanan kegemaran: Gunakan tag HTML yang tepat untuk membina senarai yang sama seperti yang ditunjukkan dibawah 30 PENGAJARAN 30 Tempat yang ingin dilawat: HANTAR 418

51 SKEMA JAWAPAN LEMBARAN KERJA Berikut ialah atur cara HTML bagi lembaran Kerja 30-1 untuk Aktiviti 4: Kod HTML: <html> <head> <H1 align = left>tentang saya! </H1> </head> <body> <ul class = one > <li>hobi</li> <li>keluarga</li> <li>makanan</li> <li>rakan</li> </ul> <style>.one li { display: inline; } </style> <head> <H1 align = left>saya suka makan... </H1> </head> <ol> <li>nasi goreng</li> <li>kfc</li> <li>cendol</li> </ol> <head> <H1 align = left>saya hendak melawat... </H1> </head> <ul> <li>australia</li> <li>taman Negara</li> <li>england</li> </ul> <br><br> Tinggalkan komen anda! <br> <form> Nama: <br><input type = text ><br><br> Makanan kegemaran: <br><input type = text ><br><br> Tempat yang ingin dilawat: <br><input type = text ><br><br> <input type = submit value = HANTAR> </form> </body> </html> PENGAJARAN

52 PENGAJARAN KOD ARAHAN 4.2 Kod Arahan HTML Mengesan sebarang ralat yang berlaku dalam atur cara HTML yang dibina Membina laman sesawang interaktif yang memaparkan Banner, Menu, Ruangan Komen, Frame dan Pull down menu Kandungan Muka Surat Rancangan Pengajaran 422 Lembaran Kerja Lembaran Kerja Nota Tag 427 Tiket Keluar 428 Skema Jawapan 429

53 31 PENGAJARAN 31 BIDANG PEMBELAJARAN 4.0 Kod Arahan Standard Kandungan 4.2 Kod Arahan HTML Standard Pembelajaran Murid boleh Persedian: 30 minit Pengajaran: 60 minit Penerapan Pemikiran Komputasional: Leraian (Decomposition) Pengecaman Corak (Pattern Recognition) Peniskalaan (Abstraction) Mengesan sebarang ralat yang berlaku dalam atur cara HTML yang dibina Membina laman sesawang interaktif yang memaparkan Banner, Menu, Ruangan Komen, Frame dan Pull down menu Bahan Bantu Mengajar (BBM) Bahan untuk setiap murid Komputer/komputer riba Lembaran Kerja 31-1 Lembaran kerja 31-2 Nota Tag Tiket Keluar Lakaran papan cerita dari modul Pengajaran 26 Persediaan Cetak lembaran kerja untuk setiap murid Cetak tiket keluar untuk setiap murid Guru perlu menggunakan semula papan cerita dari modul Pengajaran 26 PENGAJARAN 31 Sumber Tambahan 1. Nota dalam talian Tutorial dalam talian Coursera Khan Academy

54 31 RANCANGAN PENGAJARAN Masa Cadangan Aktiviti BBM/ Catatan 5 Minit 15 Minit Set Induksi 1. Guru mengimbas kembali pelajaran lepas dengan bertanyakan murid tentang fungsi tag yang berlainan. 2. Murid melihat semula reka bentuk laman sesawang dari Pengajaran Guru bertanyakan murid mengenai tag yang telah digunakan dalam rekaan mereka. 4. Guru bertanyakan murid tentang perkara yang boleh ditambah baik dalam rekaan mereka. Aktiviti 1: Mengesan Ralat 1. Guru menerangkan ralat boleh berlaku semasa menulis kod arahan HTML. 2. Guru menerangkan bahawa terdapat dua jenis ralat iaitu ralat logik dan ralat syntax. 3. Ralat logik boleh berlaku kepada susunan kod arahan HTML. 4. Ralat syntax boleh berlaku kerana kesalahan ejaan dan cara tag HTML ditulis. Ralat syntax merupakan ralat yang paling banyak berlaku semasa menulis kod HTML. Contoh ralat syntax: <HTML> <H1>Aktiviti Cuti Sekolah</H2> <Body> <p>pada cuti sekolah yang lalu, kami sekeluarga bercuti di Pulau Langkawi.<p> BBM: Lakaran papan cerita reka bentuk laman sesawang Pengajaran 26 BBM: Lembaran Kerja 31-1 (m/s ) Penerapan Pemikiran Komputasional: Leraian Pengecaman Corak Peniskalaan PENGAJARAN Guru mengedarkan Lembaran Kerja 31-1 (m/s ) 6. Murid dikehendaki untuk mengesan ralat dalam kod HTML yang diberi dan membetulkan ralat tersebut dalam Lembaran Kerja Selepas 10 minit, guru membincangkan jawapan bersama dengan murid. 422

55 31 Masa Cadangan Aktiviti BBM/ Catatan 30 Minit Aktiviti 2: Cipta laman sesawang BBM: 1. Murid diberikan Lembaran Kerja 31-2 dan Nota Tag sebagai Lembaran Kerja rujukan untuk penambahbaikan laman sesawang masing-masing (m/s 426) 2. Murid dikehendaki untuk melengkapkan Lembaran Kerja 31-2 Komputer/ yang akan menjadi projek terakhir mereka iaitu menukar reka bentuk fizikal kepada laman sesawang yang sebenar. 3. Guru mengingatkan murid bahawa tag asas perlu dimasukkan untuk melengkapkan projek ini. 4. Guru mengingatkan murid bahawa aspek kreativiti dan kekemasan amat penting untuk mendapatkan markah yang tinggi. Komputer riba Perisian Notepad Nota Tag (m/s 427) Penerapan Pemikiran PENGAJARAN Guru juga mengingatkan murid supaya sentiasa membetulkan Komputasional: 10 Minit sebarang ralat yang terdapat dalam kod HTML masing-masing terutamanya ralat syntax. Penutup 1. Guru memberikan tiket keluar kepada setiap murid sebagai rumusan. 2. Beberapa orang murid diminta untuk berkongsi jawapan mereka. 3. Beberapa orang murid diminta untuk berkongsi laman sesawang mereka untuk paparan bersama. Leraian Pengecaman Corak Peniskalaan BBM: Tiket Keluar (m/s 428) 423

56 31 LEMBARAN KERJA 31-1 Mengesan Ralat Berikut adalah paparan untuk pendaftaran masuk murid baru. Namun, sekolah anda mempunyai masalah untuk memaparkannya. Cari ralat dalam kod html untuk menyelesaikan masalah ini. PENGAJARAN 31 Paparan utama borang Pull down menu pada borang 424

57 31 Berikut adalah kod HTML paparan utama borang yang mempunyai ralat. Bulatkan atau tandakan ralat tersebut. Tulis semula baris kod yang betul. Baris Kod B1 B2 B3 B3 B5 B6 B7 B8 B9 B10 B11 B12 B13 B14 B15 B16 B17 B18 B19 B20 B21 B22 B23 B24 B25 B26 B27 <!DOCTYPE html> <html> <body> <H1> BORANG NAMA </H1> <p> Sila isi borang ini untuk mendaftar masuk ke sekolah kami. </p> <select> <option>aliran <option> <option>sains <option> <option>akaun <option> <option>perdagangan <option> </select> <form> <br>nama penuh: <input type= text > Kelas/Tingkatan: <input type= text > <input type= submit > </html> PENGAJARAN 31 Baris kod yang mempunyai kesalahan dan pembetulannya: Baris Pembetulan Kod 425

58 31 LEMBARAN KERJA 31-2 Laman Sesawang Interaktif Berdasarkan rekaan anda pada papan cerita, terjemahkannya kepada kod HTML. Setelah anda gabungkannya dalam talian, tuliskan kod anda di ruang di bawah. Gunakan tag HTML yang tepat untuk membina laman sesawang <HTML> PENGAJARAN 31 </HTML> 426

59 </> </> NOTA TAG HTML Carta Alir Setiap Laman Berikut ialah tip untuk membuat paparan anda lebih baik! 31 Tip dan nota tambahan : Horizontal rule (Peraturan mendatar) <HR size = width = > horizontal rule <HR> tag membuat garisan melintang dengan lebar window pelayar boleh digunakan untuk mengasingkan bahagian penting dalam seksyen pada laman saiz lebar garis boleh ditukar menggunakan WIDTH= dan SIZE= Sebagai contoh: <HR SIZE=3 WIDTH=80%> Ada 2 ciri lain yang boleh digunakan dengan tag <HR> Align = right (kanan), left (kiri) or center (tengah) Noshade -menyebabkan peraturan menjadi hitam Contoh: <HR SIZE=3 WIDTH=80% ALIGN =CENTER NOSHADE> Tambah warna latar belakang (background color) <Body bgcolor = color text = color> Bgcolor akan menentukan warna latar belakang laman anda Text menentukan warna text dalam laman Terdapat 16 nama warna yang dikenali HTML: PENGAJARAN 31 Untuk menambah warna, tukar tag <body> kepada berikut: <body bgcolor = red text = white> </body> Tukar stail font <font size = color= face= > Perkataan dalam laman sesawang boleh dijadikan lebih menarik dengan tag <font> Ketiga-tiga sifat (size, color, face) tidak perlu digunakan sekaligus pada tag <font> Saiz boleh dipilih dalam lingkungan 1 hingga 7. Pelayar default mempunyai saiz 3 Terdapat pelbagai jenis muka font. Contohnya seperti, Times New Roman, Verdana, Comic Sans dll. Contoh: <font size=5 color = blue face = comic sans ms > 427

60 31 TIKET KELUAR Pautan Imej dan Ruang Komen Fikirkan semula pembelajaran pada hari ini. Adakah anda mempelajari sesuatu yang baru dan bermakna? Adakah objektif PDP pada hari ini tercapai? 1. Apakah kepentingan kita mempelajari cara-cara membina laman sesawang? PENGAJARAN Berikan contoh laman sesawang yang boleh dibina? Lengkapkan jadual di bawah: 3 Perkara yang saya belajar hari ini 2 Perkara yang saya rasa menarik untuk pembelajaran hari ini 1 Soalan yang saya masih ada tentang pembelajaran hari ini 428

61 SKEMA JAWAPAN LEMBARAN KERJA 31-1 Mengesan Ralat 31 Baris Kod B1 B2 B3 B4 B5 B6 B7 B8 B9 B10 B11 B12 B13 B14 B15 B16 B17 B18 B19 B20 B21 B22 B23 B24 B25 B26 B27 <!DOCTYPE html> <html> <body> <H1> BORANG NAMA </H1> <p><b> Sila isi borang ini untuk mendaftar masuk ke sekolah kami. </b></p> <select> <option>aliran </option> <option>sains </option> <option>akaun </option> <option>perdagangan </option> </select> <form> <br>nama penuh: <input type= text ><br><br> Kelas/Tingkatan: <input type= text ><br><br> <input type= submit > value= Hantar </form> </body> </html> PENGAJARAN 31 Baris kod yang mempunyai kesalahan dan pembetulannya: Baris B9 B12 B13 B14 B15 B20 B21 B22 B23 B25 Pembetulan Kod <p><b> Sila isi borang ini untuk mendaftar masuk ke sekolah kami. </b></p> <option>aliran </option> <option>sains </option> <option>akaun </option> <option>perdagangan </option> <br>nama penuh: <input type= text ><br><br> Kelas/Tingkatan: <input type= text ><br><br> <input type= submit value= Hantar > </form> </body> 429