PEMBANGUNAN SISTEM PEMBELAJARAN BERASASKAN WEB DI

BAWAH TAJUK HTML: INTEGRASI ELEMEN AUDIO DAN VIDEO.

SUHAILI BINTI SAMSURI

UNIVERSITI TEKNOLOGI MALAYSIA

PEMBANGUNAN SISTEM PEMBELAJARAN BERASASKAN WEB DI
BAWAH TAJUK HTML: INTEGRASI ELEMEN AUDIO DAN VIDEO

SUHAILI BT SAMSURI

Laporan projek ini dikemukakan

sebagai memenuhi sebahagian daripada syarat penganugerahan
Ijazah Sarjana Muda Sains dan Komputer serta Pendidikan (Kimia)

Fakulti Pendidikan
Universiti Teknologi Malaysia

APRIL 2006
 iii

Khas buat ayah, Hj Samsuri b. Hj Othman dan mak, Hjh Seringatin bt. Hj Jamil.
Terima kasih tak terhingga anakanda ucapkan
Semoga Allah merahmati dan melindungi kalian di dunia dan akhirat, Amin..
Suhaili sayang mak & ayah!

Kepada ’tentera-tentera cilik’ - Fariz, Emi, Aqil, Zati, Nadia & Hadi..
Berusahalah.. moga ini pendorong kalian untuk lebih berjaya di masa hadapan!
 iv

PENGHARGAAN

Dengan Nama Allah Yang Maha Pemurah Lagi Maha Penyayang.

Alhamdulillah, segala puji bagi Allah, Tuhan sekelian alam. Bersyukur saya ke
hadratNya dengan limpah kurniaNya, dengan Rahmat dan InayahNya serta ilham yang
dicurahkan, maka terhasillah sebuah projek sarjana muda ini dengan baiknya.

Pertama sekali, jutaan penghargaan yang tak terhingga diucapkan kepada Pn

Norah bt. Md. Noor, selaku penyelia projek sarjana muda saya yang banyak memberikan
tunjuk ajar, panduan, dorongan dan sokongan kepada saya dalam menyiapkan projek ini.
Tidak lupa juga kepada Dr Jamalludin Harun selaku penasihat isi kandungan serta para
pensyarah Jabatan Multimedia, Fakulti Pendidikan, Universiti Teknologi Malaysia.
Terima kasih atas tunjuk ajar yang telah diberikan selama empat tahun pengajian saya di
sini.

Kepada rakan-rakan seperjuangan dari 5 SPK, dari Kolej Tuanku Canselor

terutama sekali saudara Mohd Fauzi b. Darus (2 SEC), serta rakan-rakan UTM
umumnya, terima kasih diucapkan. Tanpa bantuan, sokongan dan dorongan kalian, tidak
mampu rasanya untuk saya menyempurnakan projek ini.

Tidak lupa kepada ibu bapa serta seluruh ahli keluarga saya, terima kasih yang
tidak terhingga diucapkan. Sokongan, tiupan semangat serta iringan doa mereka amat
bererti buat saya. Sekian, terima kasih.
 v

ABSTRAK

Pembangunan laman web pendidikan yang bertajuk HTML: Integrasi Elemen

Audio Dan Video ini bertujuan untuk menambah bahan pembelajaran berkaitan dengan
HTML. Laman web ini dibina berdasarkan sukatan pelajaran Bahasa Pengaturcaraan
Berasaskan Web yang ditawarkan di Fakulti Pendidikan, UTM. Model reka bentuk yang
diterapkan ialah model Rapid Prototype manakala strategi pengajaran yang digunakan
ialah tutorial, kaedah eksplorasi serta kaedah penyelesaian masalah. Perisian
pengarangan laman web Microsoft FrontPage digunakan kerana ia mudah dikendalikan
dan berkemampuan untuk membina laman web yang interaktif. Selain itu beberapa
perisian tambahan lain seperti Adobe Photoshop, Macromedia Flash MX dan sebagainya
turut digunakan bagi mengintegrasikan elemen-elemen multimedia ke dalam laman web
ini. Pengintegrasian elemen-elemen tersebut membolehkan pelajar meneroka dan
melibatkan diri secara aktif dalam proses pembelajaran. Di harapkan agar laman web ini
dapat memberikan manfaat dan memenuhi keperluan pengguna khususnya para pelajar
Institusi Pengajian Tinggi yang mengikuti kursus Bahasa Pengaturcaraan Berasaskan
Web dan pelajar lain yang berminat mempelajarinya.
 vi

ABSTRACT

The purpose of the development of the educational website entitled HTML:

Integrasi Elemen Audio Dan Video is to add more learning materials in HTML. The
development of this website is based on Web Based Programming syllabus from Faculty
of Education, UTM. Instructional design model used for this website development is
Rapid Prototype Model. Teaching strategies used in this website were tutorial,
exploration and problem solving method. Microsoft FrontPage is used as the main
website editing software. This is because it is easy to use and able to produce an
interactive website. Other editing software such as Adobe Photoshop and Macromedia
Flash MX were also used to integrate multimedia elements in this website. The
integration of these elements in the website enables students to explore and participate
actively in the learning process. Hopefully that this website will give benefit and meet
the needs of the target users which are among college students who took Web Based
Programming course and also for those who are interested in learning HTML.
 vii

ISI KANDUNGAN

BAB PERKARA MUKA SURAT

BORANG PENGESAHAN STATUS TESIS

PENGESAHAN PENYELIA
HALAMAN JUDUL i
PENGAKUAN PELAJAR ii
DEDIKASI iii
PENGHARGAAN iv
ABSTRAK v
ABSTRACT vi
KANDUNGAN vii
SENARAI RAJAH xii
SENARAI LAMPIRAN xii

1 PENGENALAN 1
1.1 Latar Belakang Projek 2
1.2 Penyataan Masalah 3
1.3 Objektif 4
1.4 Rasional Projek 5
1.5 Skop Projek 5
1.6 Istilah 6
 viii

1.6.1 Internet 6
1.6.2 World Wide Web (WWW) atau Web 7
1.6.3 Laman Web 7
1.6.4 Pengajaran dan Pembelajaran (P&P) 7
1.6.5 Pendidikan Jarak Jauh (PJJ) 8
1.6.7 Reka Bentuk Pengajaran (Instructional Design) 8
1.6.8 HTML (Hypertext Markup Language) 8
1.7 Kesimpulan 9

2 SOROTAN PENULISAN 10
2.1 Sejarah Internet dan Web 10
2.2 Perkembangan Internet Dalam Bidang Pendidikan
di Malaysia 11
2.3 Web Dalam Pendidikan 13
2.3.1 Sokongan Kepada Pembelajaran Tradisional 14
2.3.2 Sokongan Kepada Program PJJ 14
2.4 Keberkesanan Laman Web Dalam Proses Pengajaran 16
dan Pembelajaran
2.5 Hyperteks Markup Language (HTML) 18
2.6 Teori dan Strategi Pembelajaran 19
2.6.1 Teori Behaviourisme 19
2.6.2 Teori Kognitif 21
2.6.3 Teori Konstruktivisme 22
2.7 Multimedia Dalam Laman Web 23
2.7.1 Teks dan Hiperlink 24
2.7.2 Grafik 25
2.7.3 Kombinasi Audio dan Video 25
2.7.4 Animasi 26
2.7.5 Hipermedia 27
 ix

2.7.6 Interaktiviti 27
2.8 Model Reka Bentuk Instruksi Dalam Membangunkan 28
Laman Web
2.8.1 Model ADDIE 29
2.8.2 Model ASSURE 30
2.8.3 Model Reka Bentuk Prototyping 32
Sebagai Reka Bentuk Pembangunan
2.9 Kesimpulan 34

3 METODOLOGI 35
3.1 Pembangunan Laman Web 35
3.2 Fasa 1: Analisis 37
3.2.1 Analisis Luaran 37
3.2.1.1 Isi Kandungan 38
3.2.1.2 Sasaran Pengguna 38
3.2.1.3 Objektif Pengajaran Aplikasi 39
3.2.1.4 Media Penyebaran 40
3.2.2 Analisis Dalaman 40
3.2.2.1 Keperluan Perkakasan 41
3.2.2.2 Keperluan Perisian 42
3.3 Fasa 2: Reka Bentuk 43
3.3.1 Reka Bentuk Informasi 43
3.3.2 Reka Bentuk Interaksi 46
3.3.3 Reka Bentuk Persembahan 48
3.4 Fasa 3: Pembangunan 49
3.5 Fasa 4: Pelaksanaan 50
3.6 Fasa 5: Pengujian dan Penilaian 51
3.6.1 Pengujian 51
3.6.2 Penilaian 52
 x

3.6.2.1 Penilaian Formatif 52

3.6.2.2 Penilaian Sumatif 52
3.7 Kesimpulan 53

4 HASIL REKA BENTUK LAMAN WEB 54

4.1 Paparan Laman Web 54
4.1.1 Paparan Percikan (Splash Screen) 56
4.1.2 Paparan Laman Utama 57
4.1.3 Panduan 58
4.1.4 Peta Laman 58
4.1.5 Glosari 59
4.1.6 Halaman Maklum Balas Pengguna 60
4.1.7 Tutorial 61
4.1.7.1 Bahagian Imbas Kembali 62
4.1.7.2 Bahagian Audio 62
4.1.7.3 Bahagian Video 64
4.1.8 Latihan 65
4.2 Pengujian laman Web dan Kesesuaiannya 67
4.3 Penilaian Laman Web dan Kesesuainnya 69
4.4 Kesimpulan 69

5 KESIMPULAN, MASALAH DAN CADANGAN 70

5.1 Kesimpulan 70
5.2 Masalah-Masalah Atau Kekangan Yang Dihadapi 72
5.2.1 Masa dan Kos 72
5.2.2 Kemahiran dan Kreativiti 73
 xi

5.3 Kelebihan Laman Web 73

5.4 Kelemahan Laman Web 74
5.5 Cadangan 76

RUJUKAN 77
Lampiran A-C 80-2
 xii

SENARAI JADUAL

NO JADUAL TAJUK MUKA SURAT

4.1 Jadual pengujian laman web di pelayar web dan 68

resolusi yang berbeza
 xiii

SENARAI LAMPIRAN

LAMPIRAN TAJUK MUKA SURAT

A Cartalir bagi pembangunan laman web

HTML: Audio & Video 80

B Storyboard atau papan cerita laman web 81

C Borang Penilaian Pembangunan Perisian 82

 xiv

SENARAI RAJAH

NO. RAJAH TAJUK MUKA SURAT

2.1 Aliran kerja berdasarkan Model ADDIE 29

2.2 Model ASSURE 31
2.3 Model Rapid Prototype 33
3.1 Struktur tutorial 47
4.1 Paparan Laman Percikan (Splash Page) 56
4.2 Paparan Pengenalan 57
4.3 Paparan Panduan 58
4.4 Paparan Peta Laman 59
4.5 Paparan Glosari 60
4.6 Paparan halaman maklum balas pengguna atau
Hubungi Kami 61
4.7 Paparan bahagian Imbas Kembali 62
4.8 Paparan Pengenalan Audio 63
4.9 Paparan Tutorial Audio 64
4.10 Paparan Pengenalan Video 65
4.11 Paparan utama Latihan 66
4.12 Paparan Latihan Teori 66
4.13 Paparan Latihan Praktikal 67
 BAB 1

PENGENALAN

Ledakan kemajuan ICT di seluruh dunia menjadi mangkin kepada

pembentukan masyarakat berilmu dan bermaklumat. Atas kesedaran ini, kerajaan
Malaysia telah memperkenalkan Multimedia Super Corridor atau lebih dikenali
sebagai MSC, iaitu inisiatif terulung negara. Melalui projek ini, pihak kerajaan
berusaha membawa ICT kepada rakyat Malaysia.

Tujuh aplikasi perdana dibawa bagi menjayakan MSC. Salah satu

daripadanya ialah sekolah bestari. Ini jelas menunjukkan bahawa bidang pendidikan
turut menjadi fokus utama dalam membawa ICT kepada generasi baru Malaysia.
Pengajaran dan pembelajaran tradisional digantikan dengan pengajaran dan
pembelajaran berasaskan teknologi moden. Ini termasuklah penggunaan Internet
dalam pengajaran dan pembelajaran.

Internet merupakan medium terkini bagi penyebaran ilmu pengetahuan. Ia

juga merupakan pusat sumber terbesar yang menyimpan pelbagai jenis khazanah
ilmu di dalamnya. Menurut Mohamed Amin et al.(2001):

Internet menyediakan akses kepada pelbagai sumber pendidikan yang

disimpan dalam komputer yang terdapat di seluruh dunia. Terdapat
kemungkinan yang besar bahawa sebahagian besar daripada sumber tersebut
sesuai digunakan untuk tujuan pengajaran dan pembelajaran.
 2

Internet merupakan media penyebaran maklumat tercanggih pada masa kini

dan kepentingannya memang tidak dapat disangkal lagi. Ia merupakan media
penyebaran maklumat terpantas, interaktif, global dan dinamik yang mana maklumat
yang diperolehi dapat dikongsi bersama. Dengan hanya satu klik sahaja, kita mampu
mengakses pelbagai maklumat terkini dari seluruh dunia dalam sekelip mata pada
bila-bila masa dan di mana jua.

1.1 Latarbelakang Projek

Malaysia mula mendapatkan kemudahan Internet sejak 13 tahun yang lalu

dan kini pengguna Internet semakin meningkat seiring dengan perkembangan
semasa.

Kini, pengguna dapat melayari Internet menggunakan pelbagai teknologi

terkini, samada sambungan melalui talian telefon, perkhidmatan jalur lebar
menggunakan teknologi ADSL, teknologi wayarless, Internet satelit, liputan hotspot
dan yang seumpama dengannya. Maka dengan ini, lebih ramai pengguna di negara
ini berpeluang melayari Internet bila-bila masa dan di mana-mana sahaja.

Bilangan laman-laman web di Internet juga semakin meningkat. Menurut

Trochim (1996, dalam: Mohamed Amin et al., 2001) pelbagai jenis laman web boleh
kita perolehi, masing-masing mempunyai tujuannya tersendiri. Ada yang bertujuan
untuk menyebarkan maklumat, latihan dan pendidikan, perdagangan dan
pengiklanan, hiburan dan komunikasi. Selain dari mendapatkan maklumat, pengguna
juga boleh membeli-belah secara online, membayar bil-bil, membuat tempahan dan
sebagainya.
Internet kini banyak mempengaruhi bidang pendidikan. Laman-laman web
berunsurkan pendidikan dan latihan turut berkembang seiring dengan perkembangan
semasa. Laman-laman web pendidikan dan latihan kebanyakannya dibangunkan oleh
golongan pendidik dalam bidang masing-masing. Para pelajar turut sama
 3

menyumbang dan berkongsi ilmu dengan membina laman-laman web. Ini kerana
Internet merupakan medium tercanggih dalam menyampaikan maklumat dengan
sesiapa sahaja di seluruh dunia.

Walaupun begitu banyak sumber yang boleh diperolehi di Internet, namun,

tidak semuanya benar dan boleh diguna pakai. Oleh yang demikian, penggunaan
Internet dalam bidang pendidikan perlu diberi perhatian khususnya dari segi
ketepatan maklumat yang diambil. (Ahmad Muhaimin, 2004).

1.2 Penyataan Masalah

Hasil dari tinjauan yang dibuat, terdapat banyak laman web canggih yang
berkaitan dengan pendidikan dan latihan khususnya yang berkaitan dengan tutorial
pengaturcaraan HTML. Namun, kebanyakan laman web yang ada lebih berperanan
menyampaikan maklumat daripada ‘mengajar’ serta tiada penerapan aspek-aspek
pedagogi atau reka bentuk pengajaran (instructional design). Dengan kata lain, ‘seni
mengajar’ atau ‘art of teaching’ tidak ditekankan. Terdapat juga maklumat-maklumat
yang disampaikan hanyalah seperti memindahkan maklumat daripada buku teks
kepada laman web dan sebahagiannya hanyalah sebagai automated page turners
(Nor Aishah, 2001).
Selain daripada itu, boleh dikatakan semua laman web berkenaan yang
ditemui adalah dalam Bahasa Inggeris. Ini amat menyukarkan pengguna yang kurang
penguasaan dalam Bahasa Inggeris yang ingin mendalami ilmu tersebut. Sehubungan
dengan itu, laman web yang akan dibangunkan dalam Bahasa Melayu ini merupakan
langkah alternatif bagi pengguna yang ingin mendalami ilmu tersebut tetapi kurang
penguasaan dalam Bahasa Inggeris.

Topik pengaturcaraan HTML ini juga amat bersesuaian sekali dibina

berasaskan web berbanding dibina berasaskan CD-ROM atau media cetak. Ini kerana
pelajar dapat mempelajari, mengaplikasi, serta mengalami sendiri apa yang telah
 4

dipelajari terus dalam persekitaran web. Menurut Merill (1991, dalam: Baharuddin et
al., 2002 hlm. 67) pembelajaran mestilah berlaku dalam situasi yang sebenar,
penilaian diintegrasi dalam kerja dan bukan suatu yang terpisah. Melalui pautan-
pautan yang disediakan, pelajar berpeluang meneroka maklumat-maklumat tambahan
melalui laman-laman web yang lain.

Perkembangan teknologi yang sentiasa berubah mengikut peredaran zaman

juga menyebabkan ia amat sesuai dibangunkan dalam bentuk web berbanding CD-
ROM atau media cetak. Ini kerana Internet memudahkan pembangun mengubahsuai
isi kandungan laman web mengikut perkembangan semasa. Dengan yang demikian,
kos dan masa perubahan dapat diminimumkan. Berbeza dengan CD-ROM dan media
cetak, ia memerlukan kos yang tinggi dan masa yang panjang bagi sebarang
perubahan isi kandungan.

1.3 Objektif

Projek ini bertujuan menghasilkan satu laman web pendidikan berkenaan

dengan pengaturcaraan HTML yang mengintegrasikan audio dan video yang bertajuk
‘HTML: Audio & Video’. Laman web yang akan dibangunkan ini menggunakan
Bahasa Melayu sebagai bahasa pengantar serta menggunakan pendekatan tutorial
langkah demi langkah, kaedah eksplorasi serta penyelesaian masalah. Selain ia
dibangunkan bagi menambahkan kepelbagaian sumber di ruang siber, ia juga
dibangunkan bagi membantu pengguna yang kurang penguasaan Bahasa Inggeris
yang ingin mendalami ilmu ini. Ia juga merupakan alternatif penyebaran bahan
pembelajaran selain disebarkan melalui CD-ROM.