Teknologi Maklumat

Oleh: Suhaimi bin Shaarani @ Tan
1 Modul Mudah: Penghasilan Laman Web

Modul Mudah: Penghasilan Laman Web
A. AM

1. Keperluan
a. Komputer dengan Sistem Operasi Windows XP, Pelayar Web (Internet Explorer, Firefox dsb)
dan tetikus.
b. CD Modul Penghasilan Laman Web dengan aplikasi-aplikasi:
i. Web Editing – Nvu (Freeware), Web Page Maker (Shareware)
ii. Grafik – Paint.Net(Freeware dan memerlukan dotnetfx) dan IrfanView (Freeware)
iii. Audio – Audacity (Freeware)
iv. FTP Client – FileZilla (Freeware)
c. Sambungan Internet
d. Bahan-bahan untuk isi laman web:
i. Foto, grafik, animasi, video, audio, butang web dll
ii. Teks untuk kandungan
iii. Papan Cerita (Storyboard)
iv. Javascript
e. Kamera digital / kamera video
2. Pengenalan Awal
a. Extension dan istilah:
i. HTML – Hypertext Markup Language (extension biasa untuk laman web)
ii. Jpg/jpeg – format grafik
iii. Gif – Format grafik, boleh dianimasi
iv. PNG – Format Grafik
v. HTTP – Hypertext Transfer Protocol (untuk URL)
vi. URL – alamat satu-satu laman web
vii. Upload – muatnaik
viii. Download – muaturun
ix. Publish – menerbitkan hasil akhir samada ke folder atau laman web hos.
x. Frame – ruangan (bingkai) dalam laman anda
xi. Javascript – satu set arahan java untuk ditampal ke laman anda
xii. FTP – File Transfer Protocol, untuk memuatnaik ke host
xiii. Host – Pengendali yang menyediakan server untuk web
xiv. Dan lain-lain. Lawati www.swakarya.com untuk senarai penuh.
3. Persediaan
a. Set Minda
i. Pastikan minda anda bersedia secara total. Jika anda rasa tertekan atau terpaksa,
anda akan dapati tugasan ini amat membosankan dan membebankan. Buka Minda
dan bersedia untuk menambah ilmu.
b. Bahan-bahan untuk Content Laman Web
i. Cerita / isi / kandungan – apa yang anda ingin bina? Laman peribadi / sekolah / panitia
/ perniagaan?
ii. Grafik / foto – sediakan grafik yang sesuai, jika perlu edit untuk saiz laman web.
Biaanya mempunyai saiz dan resolusi rendah bagi mempercepatkan proses muaturun.
iii. Video – sediakan klip videoyang difikirkan perlu. Pastikan saiznya!
iv. Audio – Lagu-lagu MIDI, MP3. Pastikan anda tidak melanggar akta Hakcipta.
c. Layout / Rekaletak / Storyboard
i. Fikirkan bentuk rekaletak yang anda inginkan.
ii. Anda perlukan Frame? iFrame?
iii. Di mana anda mahukan banner, grafik, animasi?
4. Sekiranya anda yakin telah bersedia, teruskan ke muka selanjutnya.
2 Modul Mudah: Penghasilan Laman Web
B. Penyediaan Papan Cerita , Prinsip Casper
1. Rujuk Panduan Rekabentuk CASPER dan fahami isi yang ingin disampaikan.
2. Sediakan papan cerita dan carta alir untuk laman web anda.
Perhatikan terdapat 9 muka yang boleh dijadikan Button dan
lain.
3. Papan Cerita anda harus merujuk kepada Carta Alir yang dinyatakan agar ianya menjadi panduan dan
mempermudahkan tugasan anda kelak.
4. Untuk bahan-bahan grafik, foto, animasi, pastikan saiznya bersesuaian untuk laman web. Saiz yang
terlalu besar akan menyebabkan
menjadikan laman anda juga terlalu besar dan berat.
5. Pengunjung akan merasa bosan bagi mendapatkan maklumat sekiranya proses loading mengambil
masa yang lama.
Organisasi
Pentadbir
Falsafah
Visi
Misi
Laman
Utama
Organisasi
Falsafah
Akademik
O
dan Pengisian Bahan.
pan Lihat Contoh
Rajah 1: Contoh Carta Alir Laman Web
beberapa mukasurat sokongan bagi
(lihat contoh)
Rajah 2: Contoh Papan Cerita
proses muaturun dan loading akan menjadi lambat selain
Muka Utama
Akademik
Takwim
AJK
HEM
AJK
Aktiviti
Ko-Ko
AJK
Aktiviti
Peperiksaan
Takwim
Keputusan
•Grafik, Logo sekolah, Butang Navigasi, Frame / iframe
• Pautan ke laman lain
•Aksesori: Javascript, Flash, Animasi, Video, Lagu
• Teks, Grafik, Foto
• Carta
• Pautan ke Laman Utama
• Teks, Grafik, Foto
• Pautan ke Laman Utama
• Teks, Grafik, Foto
• Carta
• Pautan ke Laman Utama
Oleh: Suhaimi bin Shaarani @ Tan
yang
turun Galeri Buku Tamu
3 Modul Mudah: Penghasilan Laman Web
C. Web Page Maker v2. (Shareware)
1. Install Web Page Maker (WPM) dan
2. Lancarkan WPM dan amati paparannya.
3. WPM berfungsi hampir sama dengan Microsoft® Powerpoint.
4. Anda hanya perlu memasukkan teks, gambar, animasi,
anda untuk mengetahui sistem pengprograman HTML.
5. Lihat Menu Bar:
6. Teliti kandungan Menu satu persatu.
7. Perhati pula Toolbar Icon.
a. Insert Text – memasukkan teks
b. Insert Picture – memasukkan grafik
c. Navigation Bar – Butang Navigasi
d. Insert Shapes – memasukkan bentuk
e. Change Color – menukar tema warna
f. Insert Hyperlink – menetapkan pautan hyperrangkai
g. Preview – Butang untuk melihat paparan sebelum diterbitkan
h. Publish – Butang untuk menerbitkan hasil samada k
i. Ikon-ikon lain berfungsi seperti program lain di dalam Windows.
O
ikuti arahannya hingga selesai.
Abaikan dahulu pemilihan Template.
video dan hyperlink sahaja. Tidak perlu bagi
bentuk-bentuk lazim
ke folder atau FTP.
Ruang Kerja
Menu Bar
Oleh: Suhaimi bin Shaarani @ Tan
e Kandungan
4 Modul Mudah: Penghasilan Laman Web
8. Mencipta Web Site baru (templa
a. Anda boleh mulakan dengan laman kosong atau memilih dari template yang telah disediakan.
b. Klik File->New Site atau New Site From Template
c. Ada empat template
Personal -> Personal001. Klik OK
9. Perhatikan paparan WPM sekarang. Kesemua item yang dipaparkan boleh diedit dengan dwiklik.
Ruangan Site Contents memaparkan susunan mukasurat ba
10. Save fail anda dengan nama: “Laman web latihan”.
O
template)
bagi 2 kategori yang dipaparkan. Untuk latihan ini, pilih template
> bagi web site ini.
Oleh: Suhaimi bin Shaarani @ Tan
5 Modul Mudah: Penghasilan Laman Web
11. Sebelum mengubah apa-apa maklumat, lebih elok jika anda menetapkan aturan (properties) bagi
laman web ini.
12. Klik Format -> Properties dan isikan maklumat pada Tab General. (ikut keperluan a
13. Lihat Tab Background. Ubah mengikut keseuaian anda. Untuk latihan ini, jangan ubah apa
14. Background Image dan Music akan mencantikkan laman web anda, namun malangnya masa untuk
memuaturun nanti akan terjejas.
O
> Oleh: Suhaimi bin Shaarani @ Tan
anda)
apa-apa.