PENGAJARAN 21:

HTML
Papan cerita

Items Page
Pelan Pengajaran
Lembaran Kerja 21.0
Lembaran Kerja 21.1
Lembaran Kerja 21.2
Kad imbas susun atur

1
 TINGKATAN 1: ASAS SAINS KOMPUTER
Pengajaran 21
Papan cerita

Standard Kandungan
Persediaan: 30 mins
4.2 Kod Arahan HTML
Pengajaran: 1 x 60 mins
Perbendaharaan Kata
Standard Pembelajaran  Laman web (website)
Murid boleh:  Papan Cerita (storyboard)
4.2.1 Melakar papan cerita untuk membina laman
 Susun atur (layout)
sesawang yang menggunakan kod arahan HTML
 Bar Navigasi (navigation bar)
 Homepage
Objektif Pembelajaran:
Penerapan Pemikiran Komputasional:
Pada akhir pembelajaran dan pengajaran, pelajar akan
Data Collection (DC)
dapat:
Data Representation (DR)
1. Memasukkan menu, banner, gambar, petikan, peti
Problem Decomposition (PD)
komen dan menu turun bawah dengan kaedah
yang paling mesra pengguna dan bermakna
Penerapan Pembelajaran Abad ke-21
Collaboration (C)
Knowledge Construction (KC)
Self-Regulation (SR)
Skilled Communication (SC)

Standard Prestasi Kesimpulan

 Tahap 1 1. Pelajar dapat mengenalpasti topik laman web yang
akan dibina
2. Pelajar dapat melakarkan laman utama laman web
mereka
3. Pelajar dapat membina carta alir yang
menghubungkan semua laman dalam laman web

2 Pengajaran 21
Bahan Bantu Mengajar (BBM)
Bahan untuk satu kelas
1. Chromebook/komputer riba
2. Contoh laman web

Bahan untuk setiap pelajar

1. Lembaran Kerja 21.0
2. Lembaran Kerja 21.1
3. Lembaran Kerja 21.2
4. Kad imbasan susun atur laman web
5. Pensel warna
6. Tiket keluar

Persediaan
1. Cetak lembaran kerja cukup untuk setiap pelajar
2. Cetak, potong dan laminate set kad imbasan susun atur laman web cukup untuk setiap
kumpulan di dalam kelas
3. Cetak tiket keluar cukup untuk setiap pelajar

Sumber Tambahan
1. Papan cerita untuk laman web:
http://www.webhostdesignpost.com/website/websitestoryboarding.html
2. Membuat papan cerita untuk laman web:
http://nmasse.com/courses/ecom205/storyboard.php
3. Templat papan cerita untuk laman web: http://www.printablepaper.net/category/storyboard

3 Pengajaran 21
Lesson Plan

Masa Cadangan Aktiviti BBM Pernilaian

10 Minit Pengenalan dan set induksi  Komputer riba
1. Tanyakan kepada pelajar contoh laman-laman web yang mereka tahun  Contoh laman
2. Guru menunjukkan contoh-contoh laman web yang berbeza web
3. Terangkan kepada pelajar bahawa pengajaran hari ini bertujuan untuk mengajar pelajar
langkah pertama sebelum laman web boleh dibina
4. Tanyakan kepada pelajar apakah langkah pertama tersebut. Jawapan: merancang papan
cerita atau “storyboard” laman web tersebut
5. Papan cerita atau “storyboard” boleh dikatakan sebagai blueprint suatu laman web tersebut.
Papan cerita adalah cara mudah untuk melihat jenis informasi yang akan diletakkan dalam
setiap laman pada laman web
40 minit Aktiviti: Merancang papan cerita  Lembaran  Kandungan
Terangkan kepada pelajar bahawa terdapat 4 langkah penting sebelum papan cerita dapat dibina Kerja 21.0 laman web
 Set kad  Susun atur
Langkah 1: Mengenal pasti kandungan laman web imbasan laman web
1. Bagi tugasan HTML, satu laman web berdasarkan mana-mana topik dibawah boleh dibina oleh  Lembaran  Skema warna
pelajar: kerja 21.1 laman web
a. Portfolio diri  Lembaran  Carta alir yang
b. Sukan kerja 21.2 mengkaitkan
c. Sains setiap laman di
d. Topik kemanusiaan dalam laman
e. Pekerjaan web
2. Pelajar dikehendaki mengisi lembaran kerja 21.0 untuk mengenal pasti kandungan yang akan
diletakkan di dalam laman web
3. Setiap sub-topik akan dijadikan laman baru dalam laman web tersebut dan dapat diakses
melalui bar navigasi

Langkah 2: Mengenal pasti susun atur laman web

1. Jelaskan kepada pelajar bahawa setiap laman web mempunyai susun atur yang berbeza
2. Buka pelbagai jenis laman web dengan susun atur dan rekaan yang berbeza dan tunjukkan
ciri-ciri asas sesuatu laman web yang kelihatan seperti berikut:

4 Pengajaran 21
 Masa Cadangan Aktiviti BBM Pernilaian

3. Dalam kumpulan, berikan set kad imbasan untuk susun atur laman web yang berbeza. Minta
setiap kumpulan untuk membentuk seberapa banyak susun atur laman web yang boleh
4. Secara individu, berikan lembaran kerja 21.1, arahkan pelajar untuk lakarkan laman pertama
laman web mereka. Pastikan mereka menepati soalan-soalan berikut:
a. Di bahagian manakah terdapat tulisan pada laman pertama tersebut?
b. Di bahagian manakah imej atau gambar akan diletakkan?
c. Berapa laman semuanya dan apakah nama bagi laman-laman tersebut? Di bahagian
manakah bar navigasi akan diletakkan untuk menyenaraikan semua laman yang ada?
d. Apakah sumber yang diperlukan untuk melengkapkan laman pertama ini?
5. Contoh lakaran susun atur laman web yang boleh dicipta:

5 Pengajaran 21
 Masa Cadangan Aktiviti BBM Pernilaian

Langkah 3: Mengenal pasti skema warna

1. Warna bagi setiap laman dalam laman web mungkin berbeza tetapi skema warna bagi
keseluruhan laman web tersebut sebaik-baiknya adalah konsisten
2. Pastikan juga warna latar dan warna tulisan dapat dibezakan untuk memastikan tulisan dapat
dibaca

Langkah 4: Melakar carta alir yang menghubungkan satu laman ke laman yang lain di dalam laman
web
1. Terangkan kepada pelajar bahawa setiap laman mestilah dapat diakses melalui laman utama
(homepage)
2. Satu carta alir dapat dibentuk untuk menujukkan hubungan diantara setiap laman yang akan
dibina nanti
3. Berikan lembaran kerja 21.2 untuk pelajar melukis carta alir tersebut
4. Contoh carta alir tersebut adalah seperti berikut:

6 Pengajaran 21
 Masa Cadangan Aktiviti BBM Pernilaian

CT Skills: 21st CLD:

DC, DR, PD C, KC, SR, SK
10 minit Refleksi dan Penutup  Tiket keluar  Tiket keluar
1. Berikan tiket keluar kepada setiap pelajar sebagai rumusan yang lengkap
2. Minta 1 atau 2 orang pelajar untuk berkongsi jawapan mereka

7 Pengajaran 21
 Lengkapkan ruangan dibawah dengan kandungan
Lembaran Kerja 21.0 laman web yang akan dibina. Kandungkan laman
web mestilah berdasarkan salah satu topik berikut:
Kandungan Laman Web  Portfolio diri
 Sukan
 Sains
 Topik kemanusiaan
 Pekerjaan

Tulis selengkap yang mungkin deskripsi topik laman web yang akan dibina berdasarkan permulaan ayat-ayat contoh
dibawah:

Laman web yang akan dibina adalah tentang….

Laman web ini akan membantu pengguna untuk mengetahui lebih dalam lagi tentang….
Laman-laman yang akan disertakan dalam navigasi bar adalah…..

8 Pengajaran 21
 Berdsarkan kandungan yang telah ditetapkan,
Lembaran Kerja 21.1 lukiskan susun atur laman web yang akan dibina

Susun atur laman web

Lakarkan susun atur laman utama (homepage) laman web anda. Pastikan terdapat elemen-elemen
berikut:
 Imej
 Tulisan
 Tajuk
 Bar navigasi

Skema warna yang dipilih untuk laman utama:

Sumber yang diperlukan untuk melengkapkan laman utama:

9 Pengajaran 21
 Tunjukkan bagaimana setiap laman pada bar
Lembaran Kerja 21.2 navigasi laman web anda berhubung dengan satu
sama lain. Pastikan setiap laman dapat diakses
Carta alir setiap laman melalui laman utama atau “homepage”

Kenalpasti semua laman yang terdapat dalam laman web yang akan dibina. Lukis carta alir yang
menunjukkan bagaimana setiap laman dapat diakses melalui laman utama dan laman lain.

10 Pengajaran 21
 Potong dan laminate kad imbas
Kad imbas susun atur laman dibawah. Setiap set mengandungi
semua kad imbas dibawah. Pastikan
web setiap kumpulan mempunyai satu set.

Pelajar mesti susun semula kad-kad yang diberikan kepada 4 jenis templat dibawah.

11 Pengajaran 21
 Fikirkan semula pengajaran pada hari ini. Adakah
Tiket keluar anda mempelajari sesuatu yang baru dan
bermakna? Adakah objektif PDP pada hari ini
Papan cerita tercapai?

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

2. Mengapakah skema warna yang dipilih untuk setiap laman pada laman web adalah penting?

Lengkapkan jadual dibawah

Perkara yang saya belajar hari ini …

3
Perkara yang saya rasa menarik untuk pengajaran hari ini …

2
Soalan yang saya masih ada tentang pengajaran hari ini …

1
12 Pengajaran 21