6 - Kod Arahan 2

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
Kad Imbas 378
Tiket Keluar 379
26
PENGAJARAN 26
BIDANG PEMBELAJARAN
4.0 Kod Arahan
Standard Kandungan
4.2 Kod Arahan HTML Persedian: 30 minit
Pengajaran: 120 minit
Standard Pembelajaran
PENGAJARAN 26
Murid boleh Penerapan Pemikiran
4.2.1 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)
ASAS SAINS KOMPUTER (TINGKATAN 1)

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.
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
370
26
RANCANGAN PENGAJARAN

Masa Cadangan Aktiviti BBM/ Catatan

10 Minit Set induksi BBM:
1. Guru bertanyakan murid contoh laman-laman sesawang yang Komputer/
diketahui oleh mereka. komputer riba
2. Guru menunjukkan contoh-contoh laman sesawang yang berbeza. Contoh laman
3. Guru menerangkan kepada murid bahawa pengajaran hari sesawang
PENGAJARAN 26
ini bertujuan untuk mengajar murid langkah pertama pembinaan
laman sesawang. Penerapan
4. Guru bertanyakan murid apakah langkah pertama tersebut? Pemikiran
Jawapan: merancang papan cerita atau storyboard laman Komputasional:
sesawang. Leraian
5. Papan cerita ialah cara mudah untuk melihat jenis maklumat Pengecaman

yang akan diletakkan dalam setiap laman pada laman Corak
sesawang. Peniskalaan
Contoh papan cerita:
40 Minit Aktiviti: Merancang papan cerita BBM:

1. Guru menerangkan kepada murid bahawa terdapat 4 langkah Lembaran Kerja
penting sebelum papan cerita dapat dibina, iaitu: 26-1 (m/s 375)
Set kad imbasan
Langkah 1: Mengenal pasti kandungan laman sesawang Lembaran kerja
2. Bagi tugasan HTML, satu laman sesawang berdasarkan mana- 26-2 (m/s 376)
mana topik di bawah boleh dibina oleh murid: Lembaran kerja
a. Portfolio diri 26-3 (m/s 377)
b. Sukan
c. Sains Penerapan
d. Topik kemanusiaan Pemikiran
e. Pekerjaan Komputasional:
3. Murid dikehendaki mengisi Lembaran Kerja 26-1 (m/s 375) untuk Leraian
mengenal pasti kandungan yang ingin diletakkan di dalam laman Pengecaman
sesawang. Corak
4. Setiap subtopik akan dijadikan laman baru dalam laman Peniskalaan
sesawang tersebut dan dapat dicapai melalui bar navigasi.
371
26


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.
PENGAJARAN 26
3. Kemudian, guru menunjukkan ciri-ciri asas sesuatu laman
sesawang yang kelihatan seperti berikut:

4. 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
26


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.
https://material.google.com/style/color.html#
373
26


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 BBM:

1. Guru memberikan Tiket Keluar (m/s 379) kepada setiap murid Tiket Keluar
sebagai rumusan.
2. Guru meminta 1 atau 2 orang murid untuk berkongsi jawapan
mereka.
374
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
PENGAJARAN 26
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..
375
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:
PENGAJARAN 26
Imej
Tulisan
Tajuk
Bar navigasi
Skema warna yang dipilih untuk laman utama:

Sumber yang diperlukan untuk melengkapkan laman utama:
376
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
PENGAJARAN 26
melalui laman utama atau homepage.
377
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 26
378
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 26
2. 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
379
PENGAJARAN 27
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

Tugasan Kerja 27-1 385
Skema Jawapan 386
Tiket Keluar 387
27
PENGAJARAN 27
BIDANG PEMBELAJARAN
4.0 Kod Arahan Persedian: 30 minit
Standard Kandungan
4.2 Kod Arahan HTML Penerapan Pemikiran
Komputasional:
Standard Pembelajaran Leraian (Decomposition)
PENGAJARAN 27
Murid boleh Pengecaman Corak
4.2.2 Menggunakan tags dalam atur cara HTML: (Pattern Recognition)
<head>; <title>; <body>; dan <paragraph> Peniskalaan (Abstraction)
4.2.3 Menggunakan paragraph headings dalam atur cara
HTML yang dibina

Bahan Bantu Mengajar (BBM)
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
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
381
27


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
PENGAJARAN 27
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.

10 Minit Tag asas: <head>; <title>; <body> BBM:
1. Guru menerangkan bahawa kod HTML terdiri daripada tag iaitu: Perisian Notepad
o dibuka dengan simbol < dan ditutup dengan simbol > Komputer/
o tag selalu digunakan secara berpasangan di permulaan dan komputer riba
pengakhiran
o kod HTML boleh mencecah panjang beberapa muka surat, Penerapan
tetapi kod HTML yang minimum memerlukan tag berikut: Pemikiran
<HTML> Komputasional:
<H1> Leraian
Laman Sesawang Sekolah Pengecaman
</H1> Corak
<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.
382
27


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:
PENGAJARAN 27
<p align = center> </p> (untuk tengah) Penerapan
<p align = left> </p> (untuk kiri) Pemikiran
<p align = right> </p> (untuk kanan) Komputasional:
ii. Guru menunjukkan cara pengunaan tag <p></p> di Notepad Leraian
iii. Guru meminta murid menulis 3 perenggan tentang diri Pengecaman
mereka di Notepad masing-masing Corak

Peniskalaan
20 Minit Lembaran Kerja 27-1 BBM:

1. Guru mengedarkan Lembaran Kerja 27-1 (m/s 384) kepada murid. Lembaran Kerja
2. Guru meminta murid untuk melengkapkan tugasan lembaran 27-1 (m/s 384)
kerja menggunakan Notepad. Tugasan Kerja
3. Guru mengingatkan murid bahawa mereka perlu menaip tag 27-1 (m/s 385)
dan syntax yang betul termasuk tag asas yang minimum, header,
tajuk dan badan laman. Penerapan
4. Bagi murid yang sudah melengkapkan lembaran kerja mereka, Pemikiran
guru memberikan Tugasan Kerja 27-1 (m/s 385) dan menyuruh Komputasional:
murid untuk melengkapkan tugasan tersebut. Leraian
Pengecaman
Corak
Peniskalaan

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
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.
PENGAJARAN 27
Hasil yang dikehendaki:
Selamat Datang ke Laman Sesawang Saya!

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
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.
PENGAJARAN 27
Paparan:

Kod HTML:
385
27
SKEMA JAWAPAN
LEMBARAN KERJA 27-1
Tag
notepad dan tulis semula di atas ruang yang diberikan di bawah. Isi tempat
kosong menggunakan maklumat sendiri di ruangan kelabu.
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>
</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
27
TIKET KELUAR
Tag
1. Apakah tag asas bagi kod HTML?

PENGAJARAN 27
2. Mengapakah penting untuk menguasai tag HTML?

3
2
1
387
PENGAJARAN 28
4.0 KOD ARAHAN

4.2 Kod Arahan HTML
4.2.4 Menggunakan atur cara HTML untuk

menghasilkan Banner, Frame dan Menu.

Skema Jawapan 393
Tiket Keluar 394
28
PENGAJARAN 28
Persedian: 30 minit
BIDANG PEMBELAJARAN
4.0 Kod Arahan
Penerapan Pemikiran
Standard Kandungan
Komputasional:
4.2 Kod Arahan HTML
Leraian (Decomposition)
Pengecaman Corak
PENGAJARAN 28
(Pattern Recognition)
Murid boleh
Peniskalaan (Abstraction)
4.2.4 Menggunakan atur cara HTML untuk menghasilkan

Banner, Frame dan Menu.


Internet
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

Khan Academy - https://www.khanacademy.org/computing/computer-
programming/html-css/intro-to-html/p/html-basics
389
28


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
PENGAJARAN 28
3. Guru menerangkan bahawa murid akan belajar cara untuk
membina setiap bahagian dalam laman sesawang
menggunakan atur cara HTML.
20 Minit Banner, Frame dan Menu BBM:

1. Guru menerangkan setiap ciri-ciri asas paparan laman sesawang Perisian Notepad
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: 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
28


10 Minit Fail Ketiga: main content.html BBM:
<HTML> Komputer/
<H1>Selamat Datang!</H1> komputer riba
<Body> Projektor
<p>Laman sesawang ini mengandungi semua maklumat
PENGAJARAN 28
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.

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. Notepad
Penerapan
Pemikiran
Komputasional:
Leraian
Pengecaman
Corak
Peniskalaan

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.
391
28
LEMBARAN KERJA 28-1
Banner, Frame, Menu
Notepad dan tulis semula di atas ruang yang diberikan di bawah. Isi tempat
kosong menggunakan maklumat sendiri.
PENGAJARAN 28

Kod HTML:
392
28
SKEMA JAWAPAN
LEMBARAN KERJA 28-1
Banner, Frame, Menu
Notepad dan tulis semula di atas ruang yang diberikan di bawah. Isi tempat
kosong menggunakan maklumat sendiri.
PENGAJARAN 28

Kod HTML:
Header: Menu: Main Content: Frame:

<HTML> <HTML> <HTML> <html>
<H1>Laman <H1>Menu</H1> <H1>Cita-cita <head></head>
Ahmad</H1> <Body> Saya</H1> <frameset
</HTML> <p> 1. Cita-cita <Body> rows=20%,*>
Saya </p> <p>perenggan <frame
</body> pertama </p> src=header.html>
</HTML> <p> perenggan <frameset
kedua </p> cols=30%,*>
<p> perenggan <frame src=menu.
ketiga </p> html>
</body> <frame src=main
</HTML> content.html>
</frameset>
</frameset>
</html>
393
28
TIKET KELUAR
Tag
1. Apakah tag frame bagi kod HTML?

PENGAJARAN 28
2. Mengapakah penting untuk menguasai tag HTML?

3
2
1
394
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 HTML

Kad Imbasan Kod Domino 403
Tiket Keluar 404
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
Pengecaman Corak
PENGAJARAN 29
Murid boleh
4.2.5 Membina pautan teks dan imej dalam atur cara HTML
4.2.6 Menulis atur cara untuk memasukkan imej dalam atur cara HTML

Bahan untuk setiap kumpulan

Kad Imbasan Kod Domino
Lembaran Kerja 29-1
Tugasan Kerja 29-1
Tiket keluar
Persediaan
Sumber Tambahan

396
29


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
PENGAJARAN 29
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
15 Minit Membina Pautan Teks dan Imej BBM:

1. Guru menerangkan bahawa pautan teks boleh dimasukkan Perisian Notepad
dalam kod arahan HTML. Komputer/
2. Guru menunjukkan cara untuk memasukkan pautan teks secara komputer riba
tunjuk ajar.
Tag HTML: <a href=url>KLIK DI SINI</a> Penerapan
a) Buka pelayar laman sesawang Pemikiran
b) Cari link yang boleh dijadikan contoh Komputasional:
c) Masukkan url link tersebut dalam tag HTML berikut: <a Leraian
href=url>KLIK DI SINI</a> Pengecaman
d) Perkataan KLIK DI SINI boleh ditukar kepada teks yang lain Corak
untuk ditunjukkan. Peniskalaan
Contoh Pautan Teks:
Contoh Kod Arahan Contoh Hasil

HTML dalam dalam Pelayar
Notepad 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
29


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>
PENGAJARAN 29
* 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

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 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
398
29


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_
PENGAJARAN 29
iStock_000010691996Medium.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.

1. Guru memberi murid Lembaran Kerja 29-1 (m/s 400). Lembaran Kerja
2. Guru mengingatkan murid bahawa tag asas perlu digunakan. 29-1 (m/s 400)
3. Bagi murid yang sudah melengkapkan lembaran kerja mereka, Tugasan Kerja
berikan Tugasan Kerja 29-1 (m/s 401-402) dan minta 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.
399
29
LEMBARAN KERJA 29-1
Pautan Imej
Gunakan tag HTML
yang tepat untuk
membuat pautan
Bayangkan anda pergi bercuti dengan keluarga anda. Ke imej pada laman
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:
PENGAJARAN 29
1. Sekurang-kurangnya 3 imej
2. Perenggan menerangkan tentang imej tersebut
Anda boleh rujuk kepada contoh paparan di bawah sebagai bimbingan.
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
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):
PENGAJARAN 29
Tag HTML:
<html> <a href=url>KLIK DI SINI</a>

<h1> . </h1>
<body> . </body>
</html>

<p> . </p> <a href=http://www.maps-of-langkawi.com/>
<img src=Langkawi.jpg alt=HTML tutorial
style=width:42px;height:42px;border:0;> </a>v
<img src= >
Paparan laman sesawang tentang saya:
401
29
TUGASAN KERJA 29-1
Laman Utama bersama Imej
PENGAJARAN 29
Kod HTML:
402
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
PENGAJARAN 29
Digunakan untuk menunjukkan
<H1>...</H1> -- <H6>...</H6>
perenggan.
Membuka pautan laman yang membawa

<P>
ke dokumen atau anchor lain.

Senarai tersusun (bernombor). Senarai tidak tersusun
<A>....</A>
(tidak bernombor), titik tumpu. Item senarai.
<OL>...</OL>
<UL>...</UL> Huruf gelap. <B>...</B> Huruf condong.
<LI>
<I>...</I> Huruf bergaris. <U>...</U> Break baris.
Digunakan untuk memasukkan imej

<BR>
ke dalam dokumen.
<IMG> Buka dan tutup semua dokumen HTML.
<HTML>...</HTML> Menutup header dokumen.
<HEAD>...</HEAD> Mengandungi badan dokumen HTML.
Digunakan untuk menentukan saiz heading.

<BODY><.../BODY> Nilai 1 hingga 6, dimana 1 ialah paling besar
dan 6 ialah paling kecil.
403
29
TIKET KELUAR
Pautan Imej
1. Tag apa yang boleh digunakan untuk memasukkan imej?

PENGAJARAN 29
2. Mengapakah pautan imej satu fitur yang penting dalam laman sesawang?

3
2
1
404
29
SKEMA JAWAPAN
LEMBARAN KERJA 29-1
Pautan Imej
Gunakan tag HTML
yang tepat untuk
membuat pautan
Bayangkan anda pergi bercuti dengan keluarga anda. Ke imej pada laman
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:
PENGAJARAN 29
1. Sekurang-kurangnya 3 imej
2. Perenggan menerangkan tentang imej tersebut
Anda boleh rujuk kepada contoh paparan di bawah sebagai bimbingan.
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
PENGAJARAN 30
4.0 KOD ARAHAN

4.2 Kod Arahan HTML
4.2.7 Menghasilkan pull down menu melalui atur

cara HTML
4.2.8 Menghasilkan ruang komen melalui atur
cara HTML

Kad Imbasan Kod 415
Tiket Keluar 417
Skema Jawapan 418
30
PENGAJARAN 30
Persedian: 30 minit
BIDANG PEMBELAJARAN Pengajaran: 60 minit
4.0 Kod Arahan
Penerapan Pemikiran
Komputasional:
Standard Kandungan
4.2 Kod Arahan HTML
Pengecaman Corak
PENGAJARAN 30
Murid boleh:
4.2.7 Menghasilkan pull down menu melalui atur cara HTML
4.2.8 Menghasilkan ruang komen melalui atur cara HTML

Bahan untuk setiap kumpulan

Kad Imbasan Kod
Notepad
Chromebook/Komputer riba
Lembaran Kerja 30-1
Tugasan Kerja 30-1
Tiket Keluar
Persediaan
Sumber Tambahan

407
30


5 Minit Set induksi BBM:

1. Guru mengagihkan kad imbasan kepada setiap kumpulan. Kad Imbasan
2. Murid dikehendaki menyusun kad untuk menunjukkan Kod (m/s 415-416)
urutan kod yang betul.
3. Guru mendapatkan perhatian seluruh kelas dan bincangkan
PENGAJARAN 30
jawapan bersama-sama.
4. Guru memberi penekanan keperluan adanya tag asas dan tag
minimum dalam satu laman: <HTML>, <H1>, <BODY> serta penutupnya.
10 Minit Aktiviti 1: Menyediakan senarai BBM:

1. Guru menanyakan murid tentang jenis-jenis senarai yang boleh Perisian Notepad
dibina. Jawapan yang boleh diterima: senarai barang dapur, Komputer/
senarai nama, senarai buku, senarai panggilan dan lain-lain. komputer riba
2. Tuliskan jawapan yang dinyatakan pada papan putih
3. Guru menanyakan murid tentang cara yang terbaik untuk Penerapan
menunjukkan senarai tersebut dengan kemas dalam laman Pemikiran
sesawang seperti menggunakan bullet point, nombor, huruf, Komputasional:
angka Roman, dan sebagainya. Leraian
4. Guru memperkenalkan senarai dalam HTML. Pengecaman
5. Guru menerangkan bahawa terdapat 2 jenis senarai dalam HTML: Corak
Senarai Tersusun dan Tidak Tersusun. Tag untuk kedua-duanya Peniskalaan
ialah seperti berikut:
Senarai Tersusun Senarai Tidak Tersusun

(Bernombor) (Titik tumpu)
<OL> <UL>
<LI> Berlian </LI> <LI> Berlian </LI>
<LI> Emas</LI> <LI> Emas</LI>
<LI> Duit </LI> <LI> Duit </LI>
</OL> </UL>
Contoh Senarai Tersusun:
Contoh Senarai Tidak Tersusun:
408
30


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>
PENGAJARAN 30
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.
10 Minit Aktiviti 2: Pull down menu list BBM:

1. Guru memperkenalkan senarai pull down menu kepada murid. Chrome books
2. Guru menunjukkan gambar di bawah atau menggunakan laman Buka pelayar
sesawang untuk tunjukkan pull down menu. sesawang: http://
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
30


Sebagai contoh:
<select>
<option>Members </option>
<option>Ali </option>
<option>Amin </option>
PENGAJARAN 30
<option>Alixia </option>
<option>Amelia </option>
</select>

3. 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
30


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
PENGAJARAN 30
seperti Hantar, gunakan kod:
<input type=submit value = Hantar>

4. Murid dikehendaki untuk mencipta ruang komen dengan 2 input
iaitu Nama dan Umur sebelum mereka boleh Hantar.

20 Minit Aktiviti 4: Lembaran Kerja 30-1 BBM:
1. Guru memberi murid Lembaran Kerja 30-1. 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. 30-1
3. Guru mengingatkan murid bahawa tag asas perlu digunakan. (m/s 413-414)
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
30
LEMBARAN KERJA 30-1
Senarai
Gunakan tag HTML
Buat senarai anda: yang tepat untuk
1) Reka paparan menu mendatar di bahagian atas laman membina senarai
selepas header. yang sama seperti
yang ditunjukkan
2) Buat senarai bernombor untuk semua makanan yang anda
dibawah
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
PENGAJARAN 30
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:
Tempat yang ingin dilawat:
HANTAR
Kod HTML:
412
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.
PENGAJARAN 30
<html> <ol> . </ol> <b> . </b>
<h1> . </h1> <ul> . </ul> <i> . </i>
<body> . </body> <li> </li> <u> . </u>
</html>
<p> . </p> <br> <HR size = width =>

<p align = > . </p> <Body bgcolor = color <font size = color=
text = color> face= >
<style> <select> <form>

Li { display: inline;} </style> <option> </option> Nama:<br>
<option> </option> <input type=text>
<option> </option> <br><br>
<option> </option> <input type=submit>
<option> </option> </form>
</select>
Paparan laman sesawang dengan topik kegemaran anda:
413
Kod HTML:
Laman Utama
TUGASAN KERJA 30-1
30
ASAS SAINS KOMPUTER (TINGKATAN 1) PENGAJARAN 30
414
30
KAD IMBASAN KOD

penggunaan semula
PENGAJARAN 30
<HTML> </HTML>
<H1> </H1>
<BODY> </BODY>
<B> </B>

<I> </I>
<U> </U>
<BR> <BR>
<P> </P>
<B> </B>
<I> </I>
<U> </U>
Sistem solar terdiri daripada matahari, bulan
SISTEM SOLAR dan planet-planet. Sistem solar juga terdiri
daripada komet, meteoroid dan asteroid.
Dalam turutan mengikut jarak daripada

matahari adalah: Merkuri, Venus, Bumi, Matahari terletak di tengah-tengah
Mars, Jupiter, Saturn, Uranus dan Neptune. sistem solar dan
planet, asteroid, komet dan meteoroid Matahari adalah ahli yang terbesar dalam
bergerak mengelilinginya. sistem solar.
Diambil daripada internet. Terima kasih kerana membaca!
415
30
KAD IMBASAN KOD

penggunaan semula
PENGAJARAN 30
Paparan yang dikehendaki:

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
30
TIKET KELUAR
Senarai
1. Tag apa yang boleh digunakan untuk menggunakan senarai?

PENGAJARAN 30
2. Bagaimanakah penggunaan senarai, bar menu dan senarai pull down menu

membantu pengguna laman sesawang?
3
2
1
417
30
SKEMA JAWAPAN
LEMBARAN KERJA 30-1
Senarai
Gunakan tag HTML
Buat senarai anda: yang tepat untuk
1) Reka paparan menu mendatar di bahagian atas laman membina senarai
selepas header. yang sama seperti
2) Buat senarai bernombor untuk semua makanan yang yang ditunjukkan
dibawah
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.
PENGAJARAN 30
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:
Tempat yang ingin dilawat:
HANTAR
418
30
SKEMA JAWAPAN
LEMBARAN KERJA 30-1
Berikut ialah atur cara HTML bagi lembaran Kerja 30-1 untuk Aktiviti 4:
PENGAJARAN 30
Kod HTML:
<html> <head>
<head> <H1 align = left>Saya hendak melawat...
<H1 align = left>Tentang saya! </H1> </H1>
</head> </head>

<ul>
<body> <li>Australia</li>
<ul class = one> <li>Taman Negara</li>
<li>Hobi</li> <li>England</li>
<li>Keluarga</li> </ul>
<li>Makanan</li> <br><br>
<li>Rakan</li> Tinggalkan komen anda! <br>
</ul> <form>
Nama: <br><input type = text><br><br>
<style> Makanan kegemaran: <br><input type =
text><br><br>
.one li { Tempat yang ingin dilawat: <br><input
display: inline; type = text><br><br>
}
</style> <input type = submit value = HANTAR>
<head> </form>
<H1 align = left>Saya suka makan... </H1>
</head> </body>
</html>
<ol>
<li>Nasi goreng</li>
<li>KFC</li>
<li>Cendol</li>
</ol>
419
PENGAJARAN 31
4.0 KOD ARAHAN

4.2 Kod Arahan HTML
4.2.9 Mengesan sebarang ralat yang berlaku

dalam atur cara HTML yang dibina
4.2.10 Membina laman sesawang interaktif yang

memaparkan Banner, Menu, Ruangan
Komen, Frame dan Pull down menu

Nota Tag 427
Tiket Keluar 428
Skema Jawapan 429
31
PENGAJARAN 31 Persedian: 30 minit
BIDANG PEMBELAJARAN
4.0 Kod Arahan Penerapan Pemikiran
Komputasional:
Standard Kandungan Leraian (Decomposition)
4.2 Kod Arahan HTML Pengecaman Corak
Standard Pembelajaran Peniskalaan (Abstraction)
PENGAJARAN 31
Murid boleh
4.2.9 Mengesan sebarang ralat yang berlaku dalam atur cara HTML yang dibina
4.2.10 Membina laman sesawang interaktif yang memaparkan Banner, Menu, Ruangan Komen,
Frame dan Pull down menu

Komputer/komputer riba
Lembaran Kerja 31-1
Lembaran kerja 31-2
Nota Tag
Tiket Keluar
Lakaran papan cerita dari modul Pengajaran 26
Persediaan
Guru perlu menggunakan semula papan cerita dari modul Pengajaran 26
Sumber Tambahan

421
31


5 Minit Set Induksi BBM:

1. Guru mengimbas kembali pelajaran lepas dengan bertanyakan Lakaran papan
murid tentang fungsi tag yang berlainan. cerita
2. Murid melihat semula reka bentuk laman sesawang dari reka bentuk
Pengajaran 26. laman sesawang
PENGAJARAN 31
3. Guru bertanyakan murid mengenai tag yang telah digunakan Pengajaran 26
dalam rekaan mereka.
4. Guru bertanyakan murid tentang perkara yang boleh ditambah
baik dalam rekaan mereka.
15 Minit Aktiviti 1: Mengesan Ralat BBM:

1. Guru menerangkan ralat boleh berlaku semasa menulis kod Lembaran Kerja
arahan HTML. 31-1 (m/s 424-425)
2. Guru menerangkan bahawa terdapat dua jenis ralat iaitu ralat
logik dan ralat syntax. Penerapan
3. Ralat logik boleh berlaku kepada susunan kod arahan HTML. Pemikiran
4. Ralat syntax boleh berlaku kerana kesalahan ejaan dan cara tag Komputasional:
HTML ditulis. Ralat syntax merupakan ralat yang paling banyak Leraian
berlaku semasa menulis kod HTML. Pengecaman
Corak
Contoh ralat syntax: Peniskalaan
<HTML> <H1>Aktiviti Cuti Sekolah</H2> <Body> <p>Pada cuti
sekolah yang lalu, kami sekeluarga bercuti di Pulau Langkawi.<p>
5. Guru mengedarkan Lembaran Kerja 31-1 (m/s 424-425)

6. Murid dikehendaki untuk mengesan ralat dalam kod HTML yang
diberi dan membetulkan ralat tersebut dalam Lembaran
Kerja 31-1.
7. Selepas 10 minit, guru membincangkan jawapan bersama
dengan murid.
422
31


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. 31-2 (m/s 426)
2. Murid dikehendaki untuk melengkapkan Lembaran Kerja 31-2 Komputer/
yang akan menjadi projek terakhir mereka iaitu menukar reka Komputer riba
PENGAJARAN 31
bentuk fizikal kepada laman sesawang yang sebenar. Perisian Notepad
3. Guru mengingatkan murid bahawa tag asas perlu dimasukkan Nota Tag (m/s 427)
untuk melengkapkan projek ini.
4. Guru mengingatkan murid bahawa aspek kreativiti dan Penerapan
kekemasan amat penting untuk mendapatkan markah yang tinggi. Pemikiran
5. Guru juga mengingatkan murid supaya sentiasa membetulkan Komputasional:

sebarang ralat yang terdapat dalam kod HTML masing-masing Leraian
terutamanya ralat syntax. Pengecaman
Corak
Peniskalaan
10 Minit Penutup BBM:

1. Guru memberikan tiket keluar kepada setiap murid sebagai Tiket Keluar
rumusan. (m/s 428)
2. Beberapa orang murid diminta untuk berkongsi jawapan mereka.
3. Beberapa orang murid diminta untuk berkongsi laman sesawang
mereka untuk paparan bersama.
423
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
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 <!DOCTYPE html>
B2 <html>
B3 <body>
B3
B5 <H1>
B6 BORANG NAMA
B7 </H1>
PENGAJARAN 31
B8
B9 <p> Sila isi borang ini untuk mendaftar masuk ke sekolah kami. </p>
B10
B11 <select>
B12 <option>Aliran <option>
B13 <option>Sains <option>

B14 <option>Akaun <option>
B15 <option>Perdagangan <option>
B16 </select>
B17
B18
B19 <form>
B20 <br>Nama penuh: <input type=text>
B21 Kelas/Tingkatan: <input type=text>
B22 <input type=submit>
B23
B24
B25
B26 </html>
B27
Baris kod yang mempunyai kesalahan dan pembetulannya:
Baris Pembetulan Kod
425
31
LEMBARAN KERJA 31-2
Laman Sesawang Interaktif
Berdasarkan rekaan anda pada papan cerita, terjemahkannya Gunakan tag

HTML yang tepat
kepada kod HTML. Setelah anda gabungkannya dalam talian,
untuk membina
tuliskan kod anda di ruang di bawah. laman sesawang
PENGAJARAN 31
<HTML>
</HTML>
426
< / > 31
</> NOTA TAG HTML
Carta Alir Setiap Laman
Berikut ialah tip untuk membuat paparan anda lebih baik!
Tip dan nota tambahan :
Horizontal rule (Peraturan mendatar) <HR size = width =>
PENGAJARAN 31
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:
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
31
TIKET KELUAR
Pautan Imej dan Ruang Komen
1. Apakah kepentingan kita mempelajari cara-cara membina laman sesawang?

PENGAJARAN 31
2. Berikan contoh laman sesawang yang boleh dibina?

3
2
1
428
SKEMA JAWAPAN 31
LEMBARAN KERJA 31-1
Mengesan Ralat
Baris Kod
B1 <!DOCTYPE html>
B2 <html>
B3 <body>
B4
B5 <H1>
B6 BORANG NAMA
PENGAJARAN 31
B7 </H1>
B8
B9 <p><b> Sila isi borang ini untuk mendaftar masuk ke sekolah kami. </b></p>
B10
B11 <select>
B12 <option>Aliran </option>
B13 <option>Sains </option>

B14 <option>Akaun </option>
B15 <option>Perdagangan </option>
B16 </select>
B17
B18
B19 <form>
B20 <br>Nama penuh: <input type=text><br><br>
B21 Kelas/Tingkatan: <input type=text><br><br>
B22 <input type=submit> value=Hantar
B23 </form>
B24
B25 </body>
B26 </html>
B27
Baris kod yang mempunyai kesalahan dan pembetulannya:
Baris Pembetulan Kod
B9 <p><b> Sila isi borang ini untuk mendaftar masuk ke sekolah kami. </b></p>
B12 <option>Aliran </option>
B13 <option>Sains </option>
B14 <option>Akaun </option>
B15 <option>Perdagangan </option>
B20 <br>Nama penuh: <input type=text><br><br>
B21 Kelas/Tingkatan: <input type=text><br><br>
B22 <input type=submit value=Hantar>
B23 </form>
B25 </body>
429

6 - Kod Arahan 2

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

6 - Kod Arahan 2

Diunggah oleh

Hak Cipta:

Format Tersedia

PENGAJARAN 26

4.0 KOD ARAHAN

4.2.1 Melakar papan cerita untuk membina

Kandungan Muka Surat

Rancangan Pengajaran 371

ASAS SAINS KOMPUTER (TINGKATAN 1)

ASAS SAINS KOMPUTER (TINGKATAN 1)

40 Minit Aktiviti: Merancang papan cerita BBM:

ASAS SAINS KOMPUTER (TINGKATAN 1)

4. Guru boleh menggunakan laman sesawang ini untuk membantu

10 Minit Refleksi dan Penutup BBM:

Lengkapkan ruangan dibawah dengan kandungan laman sesawang yang

ASAS SAINS KOMPUTER (TINGKATAN 1)

Berdasarkan kandungan yang telah ditetapkan, lukiskan susun atur laman

Lakarkan susun atur laman utama (homepage) laman sesawang anda.

ASAS SAINS KOMPUTER (TINGKATAN 1)

Skema warna yang dipilih untuk laman utama:

Tunjukkan bagaimana setiap laman pada bar navigasi laman sesawang

Tunjukkan bagaimana setiap laman pada bar navigasi laman sesawang

ASAS SAINS KOMPUTER (TINGKATAN 1)

Murid mesti menyusun semula kad-kad yang diberikan kepada 4 jenis

1. Mengapakah papan cerita penting sebelum laman sesawang dapat dibina?

ASAS SAINS KOMPUTER (TINGKATAN 1)

Lengkapkan jadual di bawah:

Perkara yang saya belajar hari ini

4.0 KOD ARAHAN

4.2.2 Menggunakan tags dalam atur cara HTML:

4.2.3 Menggunakan paragraph headings dalam

Kandungan Muka Surat

Rancangan Pengajaran 382

ASAS SAINS KOMPUTER (TINGKATAN 1)

2. Tutorial dalam talian

ASAS SAINS KOMPUTER (TINGKATAN 1)

ASAS SAINS KOMPUTER (TINGKATAN 1)

20 Minit Lembaran Kerja 27-1 BBM:

10 Minit Refleksi dan Penutup BBM:

Selamat Datang ke Laman Sesawang Saya!

ASAS SAINS KOMPUTER (TINGKATAN 1)

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!

Cuba fikirkan: Bagaimanakah anda boleh bold perkataan dalam teks?

ASAS SAINS KOMPUTER (TINGKATAN 1)

Selamat Datang ke Laman Sesawang Saya!

ASAS SAINS KOMPUTER (TINGKATAN 1)

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!

Cuba fikirkan: Bagaimanakah anda boleh bold perkataan dalam teks?

1. Apakah tag asas bagi kod HTML?

ASAS SAINS KOMPUTER (TINGKATAN 1)

Perkara yang saya belajar hari ini

4.0 KOD ARAHAN

4.2.4 Menggunakan atur cara HTML untuk

Kandungan Muka Surat

Rancangan Pengajaran 390

Bahan Bantu Mengajar (BBM)

ASAS SAINS KOMPUTER (TINGKATAN 1)

2. Tutorial dalam talian

20 Minit Banner, Frame dan Menu BBM:

ASAS SAINS KOMPUTER (TINGKATAN 1)

20 Minit Lembaran Kerja 28-1 BBM: