4.0 KOD ARAHAN - 6 - Kod Arahan 2.pdf
PENGAJARAN 26
4.0 KOD ARAHAN
4.2 Kod Arahan HTML
4.2.1 Melakar papan cerita untuk membina laman sesawang yang menggunakan kod arahan HTML Kandungan Muka Surat
Rancangan Pengajaran 371 Lembaran Kerja 26-1 375 Lembaran Kerja 26-2 376 Lembaran Kerja 26-3 377 Kad Imbas 378 Tiket Keluar 379
26 PENGAJARAN 26 BIDANG PEMBELAJARAN
4.0 Kod Arahan
Standard Kandungan Persedian: 30 minit
4.2 Kod Arahan HTML
Pengajaran: 120 minit Standard Pembelajaran Penerapan Pemikiran Murid boleh
Komputasional:
4.2.1 Melakar papan cerita untuk membina laman
ARAN 26
- Leraian (Decomposition) sesawang yang menggunakan kod arahan HTML
AJ G
- Pengecaman Corak (Pattern Recognition)
PEN Bahan Bantu Mengajar (BBM)
- Peniskalaan (Abstraction)
Bahan untuk kelas
- Chromebook/ komputer riba
TAN 1)
- Contoh laman sesawang
GKA Bahan untuk setiap murid
- Lembaran Kerja 26-1
(TIN
- Lembaran Kerja 26-2
- Lembaran Kerja 26-3
- Kad imbasan susun atur laman sesawang
OMPUTER
- Pensel warna
- Tiket keluar
AINS K AS S Persediaan
AS • 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.
Sumber Tambahan
- Papan cerita untuk laman sesawang: http://www.webhostdesignpost.com/website/
websitestoryboarding.html
- Membuat papan cerita untuk laman sesawang: http://nmasse.com/courses/ecom205/
storyboard.php
- Templat papan cerita untuk laman sesawang: http://www.printablepaper.net/category/
storyboard
RANCANGAN PENGAJARAN
10 Minit
BBM/ Catatan BBM:
1. Guru bertanyakan murid contoh laman-laman sesawang yang diketahui oleh mereka.
Masa
- Komputer/ komputer riba
- Contoh laman sesawang
- Leraian • Pengecaman Corak • Peniskalaan
40 Minit Cadangan Aktiviti Set induksi
c. Sains
Penerapan Pemikiran Komputasional:
BBM:
Penerapan Pemikiran Komputasional:
- Lembaran Kerja 26-1 (m/s 375)
- Set kad imbasan
- Lembaran kerja 26-2 (m/s 376)
- Lembaran kerja 26-3 (m/s 377)
3. Murid dikehendaki mengisi Lembaran Kerja 26-1 (m/s 375) untuk mengenal pasti kandungan yang ingin diletakkan di dalam laman sesawang.
e. Pekerjaan
d. Topik kemanusiaan
b. Sukan
AS AS S AINS K OMPUTER (TIN GKA TAN 1) PEN G AJ ARAN 26
2. Bagi tugasan HTML, satu laman sesawang berdasarkan mana- mana topik di bawah boleh dibina oleh murid: a. Portfolio diri
Langkah 1: Mengenal pasti kandungan laman sesawang
Contoh papan cerita: Aktiviti: Merancang papan cerita
5. Papan cerita ialah cara mudah untuk melihat jenis maklumat yang akan diletakkan dalam setiap laman pada laman sesawang.
4. Guru bertanyakan murid apakah langkah pertama tersebut? Jawapan: merancang papan cerita atau storyboard laman sesawang.
3. Guru menerangkan kepada murid bahawa pengajaran hari ini bertujuan untuk mengajar murid langkah pertama pembinaan laman sesawang.
2. Guru menunjukkan contoh-contoh laman sesawang yang berbeza.
1. Guru menerangkan kepada murid bahawa terdapat 4 langkah penting sebelum papan cerita dapat dibina, iaitu:
- Leraian • Pengecaman Corak • Peniskalaan
4. Setiap subtopik akan dijadikan laman baru dalam laman sesawang tersebut dan dapat dicapai melalui bar navigasi.
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:
ARAN 26 AJ G PEN TAN 1) GKA (TIN OMPUTER
4. Dalam kumpulan, guru mengedarkan set Kad Imbasan (m/s 383) untuk susun atur laman sesawang yang berbeza.
AINS K
5. Guru meminta setiap kumpulan untuk membentuk susun atur laman sesawang.
AS S AS 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?
AS AS S AINS K OMPUTER (TIN GKA TAN 1) PEN G AJ ARAN 26
Masa Cadangan Aktiviti
9. Contoh lakaran susun atur laman sesawang yang boleh dicipta:
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.
https://material.google.com/style/color.html# BBM/ Catatan
AS AS S AINS K OMPUTER (TIN GKA TAN 1) PEN G AJ ARAN 26
Masa
10 Minit Cadangan Aktiviti
5. Contoh skema warna yang baik:
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.
Refleksi dan Penutup
1. Guru memberikan Tiket Keluar (m/s 379) kepada setiap murid sebagai rumusan.
- Tiket Keluar
2. Guru meminta 1 atau 2 orang murid untuk berkongsi jawapan mereka.
BBM/ Catatan BBM:
LEMBARAN KERJA 26-1
AS AS S AINS K OMPUTER (TIN GKA TAN 1) PEN G AJ ARAN 26
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 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…..
LEMBARAN KERJA 26-2
- Imej • Tulisan • Tajuk • Bar navigasi
AS AS S AINS K OMPUTER (TIN GKA TAN 1) PEN G AJ ARAN 26
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:
Skema warna yang dipilih untuk laman utama: Sumber yang diperlukan untuk melengkapkan laman utama:
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”.
ARAN 26 AJ G PEN TAN 1) GKA (TIN OMPUTER AINS K AS S AS
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.
ARAN 26 AJ G PEN TAN 1) GKA (TIN OMPUTER AINS K AS S AS
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?
ARAN 26 AJ G PEN
2. Mengapakah skema warna yang dipilih untuk setiap laman pada laman sesawang adalah penting? TAN 1) GKA (TIN OMPUTER AINS K
Lengkapkan jadual di bawah: AS S AS
Perkara yang saya belajar hari ini …
3 Perkara yang saya rasa menarik untuk pembelajaran hari ini …
2 Soalan yang saya masih ada tentang pembelajaran hari ini …
1
4.0 KOD ARAHAN
4.2 Kod Arahan HTML
4.2.2 Menggunakan tags dalam atur cara HTML: <head>; <title>; <body>; dan <paragraph>
4.2.3 Menggunakan paragraph headings dalam
atur cara HTML yang dibina PENGAJARAN 27Kandungan Muka Surat Rancangan Pengajaran 382 Lembaran Kerja 27-1 384 Tugasan Kerja 27-1 385 Skema Jawapan 386 Tiket Keluar
387
27 PENGAJARAN 27 BIDANG PEMBELAJARAN Persedian: 30 minit
4.0 Kod Arahan
Pengajaran: 60 minit Standard Kandungan
Penerapan Pemikiran
4.2 Kod Arahan HTML
Komputasional:
- Leraian (Decomposition)
7 Standard Pembelajaran
- Pengecaman Corak
Murid boleh
(Pattern Recognition)
4.2.2 Menggunakan tags dalam atur cara HTML:
ARAN 2
- Peniskalaan (Abstraction) <head>; <title>; <body>; dan <paragraph>
AJ G
4.2.3 Menggunakan paragraph headings dalam atur cara
PEN
HTML yang dibina
Bahan Bantu Mengajar (BBM) Bahan untuk setiap murid TAN 1)
- Internet
GKA
- Chromebook/komputer riba
- Lembaran Kerja 27-1
(TIN
- Tugasan Kerja Kerja 27-2
- Nota Tag HTML
- Tiket keluar
OMPUTER Persediaan
AINS K
- Pastikan internet dapat digunakan di dalam kelas
AS S
- Cetak lembaran kerja untuk setiap murid
AS
- Cetak tiket keluar untuk setiap murid
Sumber Tambahan
1. Nota dalam talian
- http://www.alternetwebdesign.com/htmltutorial/index.htm
- http://pjnicholson.com/stupid/justplainstupid.htm
- http://www.w3schools.com/html/default.asp
2. Tutorial dalam talian
- Coursera – https://www.coursera.org/learn/html
- Khan Academy - https://www.khanacademy.org/computing/computer- programming/html-
css/intro-to-html/p/html-basics
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
7 perkara yang kita inginkan.
2. Guru membuka sebuah laman sesawang dan menunjukkan kod
ARAN 2
arahan HTML laman sesawang tersebut. Cara: Tekan ctrl + u semasa
AJ G di laman sesawang yang telah dibuka untuk melihat kod htmlnya. PEN
10 Minit Tag asas : <head>; <title>; <body> BBM:
1. Guru menerangkan bahawa kod HTML terdiri daripada tag iaitu: • Perisian Notepad
TAN 1)
o dibuka dengan simbol “<” dan ditutup dengan simbol “>” • Komputer/
GKA
o tag selalu digunakan secara berpasangan di permulaan dan komputer riba
(TIN
pengakhiran o kod HTML boleh mencecah panjang beberapa muka surat, Penerapan tetapi kod HTML yang minimum memerlukan tag berikut: Pemikiran
OMPUTER <HTML>
Komputasional: <H1>
- Leraian
AINS K
Laman Sesawang Sekolah • Pengecaman
</H1>
Corak AS S
AS <H2>
- 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.
- • Perisian Notepad
- Komputer/ komputer riba
- <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 mereka di Notepad masing-masing
- Leraian • Pengecaman Corak • Peniskalaan
- • Lembaran Kerja
- • Tugasan Kerja
- Leraian • Pengecaman Corak • Peniskalaan
- • Tiket Keluar
- Leraian (Decomposition)
- Pengecaman Corak
- Peniskalaan (Abstraction)
- Internet • Chromebook/komputer riba
- Lembaran Kerja 28-1
- Tiket Keluar
- Pastikan internet dapat digunakan di dalam kelas
- Cetak Lembaran Kerja untuk setiap murid
- Cetak Tiket Keluar untuk setiap murid
- http://www.alternetwebdesign.com/htmltutorial/index.htm
- http://pjnicholson.com/stupid/justplainstupid.htm
- http://www.w3schools.com/html/default.asp
- Coursera – https://www.coursera.org/learn/html
- Khan Academy - https://www.khanacademy.org/computing/computer-
- 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>
- Komputer/ <H1>Selamat Datang!</H1> komputer riba <Body>
- Projektor <p>Laman sesawang ini mengandungi semua maklumat tentang SMK Taman Sejahtera.</p>
- Notepad
- Leraian • Pengecaman Corak • Peniskalaan
- Leraian (Decomposition)
- Pengecaman Corak (Pattern Recognition)
- Peniskalaan (Abstraction)
- Kad Imbasan Kod Domino
- Chromebook/komputer riba
- Lembaran Kerja 29-1
- Tugasan Kerja 29-1
- Tiket keluar
- Cetak lembaran kerja untuk setiap murid
- Cetak tiket keluar untuk setiap murid
- http://www.alternetwebdesign.com/htmltutorial/index.htm
- http://pjnicholson.com/stupid/justplainstupid.htm
- http://www.w3schools.com/html/default.asp
- Coursera – https://www.coursera.org/learn/html
- Khan Academy - https://www.khanacademy.org/computing/computer-
- Peniskalaan
- Untuk memastikan imej dapat dilihat, anda mesti simpan gambar yang ingin dipaparkan dalam komputer dengan nama
- Lembaran Kerja 2. Guru mengingatkan murid bahawa tag asas perlu digunakan.
- Tugasan Kerja berikan Tugasan Kerja 29-1 (m/s 401-402) dan minta mereka
Penerapan Pemikiran Komputasional:
27-1 (m/s 385)
27-1 (m/s 384)
BBM:
Penerapan Pemikiran Komputasional:
BBM/ Catatan BBM:
3. Ingatkan murid untuk melengkapkan Tugasan Kerja 27-1 untuk dihantar pada kelas seterusnya.
2. Minta 1 atau 2 orang murid untuk berkongsi jawapan mereka.
1. Berikan Tiket Keluar (m/s 387) kepada setiap murid sebagai rumusan.
Refleksi dan Penutup
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 murid untuk melengkapkan tugasan tersebut.
2. Guru meminta murid untuk melengkapkan tugasan lembaran kerja menggunakan Notepad.
Lembaran Kerja 27-1 1. Guru mengedarkan Lembaran Kerja 27-1 (m/s 384) kepada murid.
1. Guru menerangkan bahawa petikan panjang boleh dibahagikan kepada beberapa perenggan pendek menggunakan tag <p> </p>. i. Perenggan boleh juga dijajarkan di tengah, kiri dan kanan dengan tag yang berikut:
10 Minit Cadangan Aktiviti Tag <paragraph> dan paragraph heading
20 Minit
10 Minit
7 Masa
AS AS S AINS K OMPUTER (TIN GKA TAN 1) PEN G AJ ARAN 2
BBM:
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.
7 ARAN 2 AJ
Hasil yang dikehendaki:
G PEN Selamat Datang ke Laman Sesawang Saya! Nama saya ialah . Saya berumur tahun. Sekolah saya ialah .
TAN 1) Cita-cita saya ialah . GKA (TIN
Pada masa lapang, saya suka . Makanan kegemaran saya ialah . Jika saya boleh memperkenalkan diri saya dengan 3 perkataan.
OMPUTER AINS K AS S Saya berharap anda seronok membaca laman saya!
AS
Kod HTML:
Cuba fikirkan: Bagaimanakah anda boleh bold perkataan dalam teks?
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.
7 Paparan: ARAN 2 AJ G PEN TAN 1) GKA (TIN OMPUTER AINS K AS S AS
Kod HTML:
SKEMA JAWAPAN 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 notepad dan tulis semula di atas ruang yang diberikan di bawah. Isi tempat kosong menggunakan maklumat sendiri di ruangan kelabu.
7 ARAN 2 AJ
Hasil yang dikehendaki:
G PEN Selamat Datang ke Laman Sesawang Saya! Nama saya ialah . Saya berumur tahun. Sekolah saya ialah .
TAN 1) Cita-cita saya ialah . GKA (TIN
Pada masa lapang, saya suka . Makanan kegemaran saya ialah . Jika saya boleh memperkenalkan diri saya dengan 3 perkataan:
OMPUTER AINS K AS S Saya berharap anda seronok membaca laman saya!
AS
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?
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?
7 ARAN 2 AJ G PEN
2. Mengapakah penting untuk menguasai tag HTML? TAN 1) GKA (TIN OMPUTER AINS K
Lengkapkan jadual di bawah: AS S
Perkara yang saya belajar hari ini … AS
3 Perkara yang saya rasa menarik untuk pembelajaran hari ini …
2 Soalan yang saya masih ada tentang pembelajaran hari ini …
1
PENGAJARAN 28
4.0 KOD ARAHAN
4.2 Kod Arahan HTML
4.2.4 Menggunakan atur cara HTML untuk menghasilkan Banner, Frame dan Menu.
Kandungan Muka Surat Rancangan Pengajaran 390 Lembaran Kerja 28-1 392 Skema Jawapan 393 Tiket Keluar 394
28 PENGAJARAN 28 Persedian: 30 minit
BIDANG PEMBELAJARAN
Pengajaran: 60 minit
4.0 Kod Arahan
Penerapan Pemikiran Standard Kandungan Komputasional:
4.2 Kod Arahan HTML
Standard Pembelajaran
(Pattern Recognition)
Murid boleh
4.2.4 Menggunakan atur cara HTML untuk menghasilkan
ARAN 28 Banner, Frame dan Menu. AJ G PEN
Bahan Bantu Mengajar (BBM) Bahan untuk setiap murid
TAN 1)
GKA
(TIN Persediaan
OMPUTER
AINS K Sumber Tambahan
AS S
1. Nota dalam talian
AS
2. Tutorial dalam talian
programming/html-css/intro-to-html/p/html-basics
RANCANGAN PENGAJARAN Masa Cadangan Aktiviti BBM/ Catatan
10 Minit Pengenalan dan set induksi BBM:
1. Murid mengeluarkan semula papan cerita laman sesawang • Komputer/ semasa pengajaran pertama HTML. komputer riba
2. Guru ulang kaji ciri-ciri asas paparan laman sesawang. • Projektor
ARAN 28 AJ G PEN TAN 1) GKA (TIN
3. Guru menerangkan bahawa murid akan belajar cara untuk membina setiap bahagian dalam laman sesawang menggunakan atur cara HTML.
OMPUTER AINS K
20 Minit Banner, Frame dan Menu BBM:
1. Guru menerangkan setiap ciri-ciri asas paparan laman sesawang • Perisian Notepad AS S
AS
dibina melalui fungsi frame. • 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:
<p>Jadual Kelas</p> <p>Aktiviti Tahunan</p>
</body> </HTML>
Masa Cadangan Aktiviti BBM/ Catatan
10 Minit • Fail Ketiga: main content.html BBM:
<HTML>
</body>
ARAN 28
</HTML>
AJ G
5. Guru menunjukkan tag frame:
PEN
<html> <head></head> <frameset rows=”20%,*”>
TAN 1)
<frame src=”header.html”>
GKA
<frameset cols=”30%,*”>
(TIN
<frame src=”menu.html”> <frame src=”main content.html”> </frameset>
OMPUTER
</frameset> </html>
AINS K
6. Murid dikehendaki untuk membuka fail Notepad baru dan masukkan tag frame yang ditunjukkan.
AS S AS
20 Minit Lembaran Kerja 28-1
BBM:
1. Guru mengedarkan Lembaran Kerja 28-1 (m/s 392) kepada murid. • Lembaran Kerja
2. Guru meminta murid untuk melengkapkan tugasan lembaran 28-1 (m/s 392) kerja menggunakan Notepad. • Komputer/
3. Guru mengingatkan murid bahawa mereka perlu menaip tag dan komputer riba syntax yang betul.
Penerapan Pemikiran Komputasional:
10 Minit Refleksi dan Penutup
BBM:
1. Berikan Tiket Keluar (m/s 394) kepada setiap murid sebagai • Tiket Keluar rumusan.
2. Minta 1 atau 2 orang murid untuk berkongsi jawapan mereka di hadapan kelas.
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.
ARAN 28 AJ
Hasil yang dikehendaki:
G PEN TAN 1) GKA (TIN OMPUTER AINS K AS S AS
Kod HTML:
SKEMA JAWAPAN
LEMBARAN KERJA 28-1
AS AS S AINS K OMPUTER (TIN GKA TAN 1) PEN G AJ ARAN 28
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: Kod HTML:
Header: <HTML> <H1>Laman Ahmad</H1> </HTML>
Main Content:
<HTML><H1>Cita-cita
Saya</H1> <Body><p>perenggan
pertama </p>
<p> perenggan
kedua </p><p> perenggan
ketiga </p> </body> </HTML> Menu:<HTML> <H1>Menu</H1> <Body> <p> 1. Cita-cita Saya </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>
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? ARAN 28 AJ G PEN
2. Mengapakah penting untuk menguasai tag HTML? TAN 1) GKA (TIN OMPUTER AINS K
Lengkapkan jadual di bawah: AS S
Perkara yang saya belajar hari ini … AS
3 Perkara yang saya rasa menarik untuk pembelajaran hari ini …
2 Soalan yang saya masih ada tentang pembelajaran hari ini …
1
PENGAJARAN 29
4.0 KOD ARAHAN
4.2 Kod Arahan HTML
4.2.5 Membina pautan teks dan imej dalam
atur cara HTML
4.2.6 Menulis atur cara untuk memasukkan
imej dalam atur cara HTMLKandungan Muka Surat
Rancangan Pengajaran 397 Lembaran Kerja 29-1 400 Tugasan Kerja 29-1 401 Kad Imbasan Kod Domino 403 Tiket Keluar404 Skema Jawapan 405
29 PENGAJARAN 29 Persedian: 30 minit
BIDANG PEMBELAJARAN Pengajaran: 60 minit
4.0 Kod Arahan
Penerapan Pemikiran Komputasional: Standard Kandungan
4.2 Kod Arahan HTML
Standard Pembelajaran
Murid boleh
4.2.5 Membina pautan teks dan imej dalam atur cara HTML
ARAN 29
4.2.6 Menulis atur cara untuk memasukkan imej dalam atur cara HTML AJ
G PEN Bahan Bantu Mengajar (BBM) Bahan untuk setiap kumpulan
Bahan untuk setiap murid TAN 1)
GKA
(TIN
Persediaan OMPUTER
AINS K AS S Sumber Tambahan
AS
1. Nota dalam talian
2. Tutorial dalam talian
programming/html-css/intro-to-html/p/html-basics
RANCANGAN PENGAJARAN 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
ARAN 29 AJ
dalam laman sesawang supaya lebih menarik. Contoh jawapan
G
yang boleh diterima: tambah imej dan warna
PEN
15 Minit Membina Pautan Teks dan Imej BBM:
1. Guru menerangkan bahawa pautan teks boleh dimasukkan • Perisian Notepad
TAN 1)
dalam kod arahan HTML. • Komputer/
2. Guru menunjukkan cara untuk memasukkan pautan teks secara komputer riba
GKA tunjuk ajar. (TIN
Tag HTML: < a href =”url”> KLIK DI SINI < /a > Penerapan
a) Buka pelayar laman sesawang Pemikiran
b) Cari link yang boleh dijadikan contoh Komputasional:
OMPUTER
c) Masukkan url link tersebut dalam tag HTML berikut: < a • Leraian
href =”url”> KLIK DI SINI < /a > • Pengecaman AINS K
d) Perkataan KLIK DI SINI boleh ditukar kepada teks yang lain Corak
AS S untuk ditunjukkan.
AS
Contoh Pautan Teks:
Contoh Kod Arahan Contoh Hasil dalam Pelayar HTML dalam Laman Sesawang
Notepad
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 = “
Masa Cadangan Aktiviti BBM/ Catatan
d) Masukkan nama imej selepas <img src =e)
e) Contoh tag HTML pautan imej: <a href=”http://www.maps-of-langkawi.com/”>
<img src=”Langkawi.jpg” alt=”HTML tutorial” style=”width:42px;height:42px;border:0;”> </a>
ARAN 29
yang sama dalam tag HTML anda selepas <img src = .Contoh:
AJ
<img src=”Langkawi.jpg”
G PEN Contoh Kod Arahan HTML
TAN 1) dalam Notepad
GKA Pastikan fail dipaparkan telah imej yang ingin disimpan dalam komputer
(TIN OMPUTER AINS K
Contoh Hasil dalam Pelayar Laman Sesawang
AS S AS
7. Murid membuka Notepad dan cuba memasukkan satu pautan imej mengikut cara yang ditunjukkan oleh guru.
15 Minit Memasukkan Imej dalam atur cara HTML BBM:
1. Guru menunjukkan beberapa gambar dan meminta murid • Komputer/ mengenal pasti gambar yang sesuai untuk digunakan dalam komputer riba laman sesawang sesebuah pasar raya. Guru menunggu jawapan • Projektor murid untuk seketika.
2. Murid diberi beberapa contoh gambar pasar raya dan diminta Penerapan memilih gambar yang sesuai sebagai gambar utama dalam Pemikiran laman sesawang.
Komputasional:
3. Guru menerangkan bahawa imej boleh dimasukkan dalam laman • Leraian sesawang menggunakan tag : <img src= “”> • Pengecaman
4. Guru menunjukkan cara secara tunjuk ajar: Corak
a. Buka pelayar laman sesawang
b. Cari gambar Bandaraya Kuala Lumpur menggunakan enjin carian Google Image
c. Dapatkan pautan laman bagi imej tersebut
Masa Cadangan Aktiviti BBM/ Catatan
d. Masukkan pautan laman imej tersebut ke dalam kod di atas, seperti berikut: <img src=”http://primeglobal.net/sites/default/files/ styles/inner-banner-image/public/KUALA_LUMPUR_ iStock_000010691996Medium.jpg”>
ARAN 29 AJ G Contoh Kod
PEN Arahan HTML dalam Notepad
TAN 1) Contoh Hasil dalam
GKA Pelayar Laman Sesawang
(TIN OMPUTER
5. Pautan laman itu perlu dimasukkan di antara pembuka dan
AINS K
penutup kata, iaitu selepas src=
6. Murid membuka Notepad dan cuba memasukkan imej dalam AS S
AS 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.
20 Minit Lembaran Kerja 29-1
BBM: 1. Guru memberi murid Lembaran Kerja 29-1 (m/s 400).
29-1 (m/s 400)
3. Bagi murid yang sudah melengkapkan lembaran kerja mereka,
29-1 melengkapkannya. (m/s 401-402)
5 Minit Refleksi
BBM:
1. Guru memberikan Tiket Keluar (m/s 404) kepada setiap murid • Tiket Keluar 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 401-402) untuk dihantar pada kelas seterusnya.
LEMBARAN KERJA 29-1
Pautan Imej Gunakan tag HTML yang tepat untuk membuat pautan imej pada laman
Bayangkan anda pergi bercuti dengan keluarga anda. Ke sesawang 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 ARAN 29 AJ G Anda boleh rujuk kepada contoh paparan di bawah sebagai bimbingan.
PEN
Contoh paparan:
Aktiviti Cuti Sekolah! TAN 1) Pada cuti sekolah yang lalu, kami sekeluarga bercuti di Pulau Langkawi.
GKA Klik sini (pautan teks) untuk membaca tentang Pulau Langkawi. (TIN Klik gambar di bawah untuk melihat peta Pulau Langkawi (buat pautan pada imej).
OMPUTER AINS K
Berikut merupakan beberapa gambar kegemaran saya semasa di Pulau Langkawi:
AS S AS
Gambar semasa kami … Kami sedang … Kami nampak…
Kod HTML:
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:
ARAN 29 AJ <a href=”url”>KLIK DI SINI</a> <html>
G <h1> …. </h1>
PEN <body> …. </body> </html>
<a href=”http://www.maps-of-langkawi.com/”>
<p> …. </p> TAN 1)<img src=”Langkawi.jpg” alt=”HTML tutorial” GKA style=”width:42px;height:42px;border:0;”> </a>v
(TIN <img src=”” >
OMPUTER
Paparan laman sesawang tentang saya:
AINS K AS S AS
TUGASAN KERJA 29-1
Laman Utama bersama Imej
Kod HTML:
ARAN 29 AJ G PEN TAN 1) GKA (TIN OMPUTER AINS K AS S AS
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
Digunakan untuk menunjukkan <H1>...</H1> -- <H6>...</H6> perenggan.
ARAN 29 AJ G
Membuka pautan laman yang membawa
PEN <P>
ke dokumen atau “anchor” lain.
Senarai tersusun (bernombor). Senarai tidak tersusun TAN 1) <A>....</A> (tidak bernombor), titik tumpu. Item senarai.
GKA (TIN <OL>...</OL> Huruf gelap. Huruf condong.
<B>...</B> <UL>...</UL> <LI>
OMPUTER AINS K Huruf bergaris. <U>...</U> Break baris.
<I>...</I> AS S AS
Digunakan untuk memasukkan imej <BR> ke dalam dokumen.
<IMG> Buka dan tutup semua dokumen HTML.
<HTML>...</HTML> Menutup “header” dokumen.
Mengandungi badan dokumen HTML. <HEAD>...</HEAD> Digunakan untuk menentukan saiz “heading”.
Nilai 1 hingga 6, dimana 1 ialah paling besar <BODY><.../BODY> dan 6 ialah paling kecil.
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? ARAN 29 AJ G PEN
2. Mengapakah pautan imej satu fitur yang penting dalam laman sesawang? TAN 1) GKA (TIN OMPUTER AINS K
Lengkapkan jadual di bawah: AS S
Perkara yang saya belajar hari ini … AS
3 Perkara yang saya rasa menarik untuk pembelajaran hari ini …
2 Soalan yang saya masih ada tentang pembelajaran hari ini …
1
SKEMA JAWAPAN LEMBARAN KERJA 29-1
Pautan Imej Gunakan tag HTML yang tepat untuk membuat pautan imej pada laman
Bayangkan anda pergi bercuti dengan keluarga anda. Ke sesawang 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 ARAN 29 AJ G Anda boleh rujuk kepada contoh paparan di bawah sebagai bimbingan.
PEN
Contoh paparan:
Aktiviti Cuti Sekolah! TAN 1) Pada cuti sekolah yang lalu, kami sekeluarga bercuti di Pulau Langkawi.
GKA Klik sini (pautan teks) untuk membaca tentang Pulau Langkawi. (TIN Klik gambar di bawah untuk melihat peta Pulau Langkawi (buat pautan pada imej).
OMPUTER AINS K
Berikut merupakan beberapa gambar kegemaran saya semasa di Pulau Langkawi:
AS S AS
Gambar semasa kami … Kami sedang … Kami nampak…
Kod HTML: