Dokumen ini membahas aplikasi komputer dalam pengurusan pembangunan laman web, termasuk pengenalan kepada world wide web, elemen-elemen halaman web, dan proses penerbitan web. Terdapat penjelasan tentang jenis laman web, mereka bentuk, dan menulis kod HTML yang diperlukan untuk membangunkan laman web. Proses penerbitan dan penyelenggaraan laman web juga dibincangkan untuk memastikan laman web sentiasa relevan dan mudah dinavigasi.

1. Bab 12
STID 1103 - Aplikasi Komputer
Dalam Pengurusan
Pembangunan Laman
Web
Oleh :
MOHD TARMIZI BIN MUSA

2. Chapter Outline
• Pengenalan
• Laman Web
• Membina laman web
2

3. Pengenalan
• World Wide Web (WWW) merupakan salah satu
perkhidmatan yang disediakan oleh internet.
• Halaman web (webpage) adalah satu dokumen yang
mengandungi teks dan grafik yang telah dilabelkan dengan
kod HTML yang sesuai untuk web.
• Laman web (website) adalah koleksi webpage berkaitan yang
mengandungi pelbagai kandungan dan dilayari dengan
menggunakan pelayar Web (web browser). Ia termasuk
halaman yang pertama yang dipanggil halaman utama (Home
page).
• Dari halaman utama, anda boleh ke pautan halaman lain di
laman web ini atau lain-lain laman web (website).

4. WWW
• World Wide Web, singkatan WWW atau W3 lebih dikenali sebagai
Web, adalah satu sistem dokumen hiperteks/hypermedia yang
diakses melalui Internet.
• Hypertext adalah teks dipaparkan pada komputer atau peranti
elektronik lain dengan rujukan (hyperlink) kepada teks lain yang
pembaca serta-merta boleh mengakses, biasanya dengan satu klik
tetikus atau urutan tekanan kekunci.
• Hypermedia digunakan sebagai lanjutan logik hypertext jangka di
mana grafik, audio, video, teks dan pautan untuk mewujudkan
sederhana umumnya bukan linear maklumat.
• Pencipta: Timm Berners-Lee, 1989.

5. Adakah web dan Internet perkara yang sama?
5
Internet dan Web BUKAN perkara yang sama TETAPI bekerjasama

6. WWW (cont…)
• World Wide Web, atau Web, adalah satu cara mengakses
maklumat melalui medium Internet.
• Ia adalah satu model perkongsian maklumat yang dibina di atas
Internet dan mengandungi koleksi dokumen elektronik dari seluruh
dunia.
• Web menggunakan HTTP (Hypertext Transfer Protocol), untuk
menghantar data.
• Web juga menggunakan pelayar (browsers) seperti Internet
Explorer, Netscape, Mozilla Firefox dan lain-lain untuk mengakses
dokumen Web (web pages) yang dihubungkan antara satu sama
lain melalui hyperlink.

7. Web Page (halaman web)
• A web page atau webpage adalah dokumen atau sumber
maklumat yang sesuai untuk WWW dan boleh diakses melalui
pelayar web dan dipaparkan pada monitor atau peranti mudah
alih.
• Maklumat ini biasanya dalam format HTML atau XHTML, dan
mungkin menyediakan navigasi ke laman web lain melalui pautan
hiperteks.
• Ia boleh mengandungi teks, grafik, audio, video pautan ke
dokumen web yang lain.
• Web page mempunyai alamat unik yang dipanggil sebagai Uniform
Resource Locator (URL).

8. Elemen Web Page (halaman web)
• A webpage can contain numerous types of information, which is able to be seen, heard or interact by the end user:
• Perceived (rendered) information:
– Textual information
– Non-textual information:
• Static images on raster graphics, typically GIF, JPEG or PNG; or vector formats as SVG or Flash.
• Animated images typically Animated GIF and SVG, but also may be Flash, Shockwave, or Java applet.
• Audio, typically MIDI or WAV formats or Java applets.
• Video, WMV (Windows), RM (Real Media), FLV (Flash Video), MPG, MOV (QuickTime)
– Interactive information: more complex, glued to interface.
• For "on page" interaction:
– Interactive text.
– Interactive illustrations: ranging from "click to play" image to games, typically using script, Flash, Java applets, SVG, or Shockwave.
– Buttons: forms providing alternative interface
• For "between pages" interaction:
– Hyperlinks: standard "change page" reactivity.
– Forms: providing more interaction with the server and server-side databases.
• Internal (hidden) information:
– Comments
– Linked Files through Hyperlink (Like DOC,XLS,PDF,etc).
– Metadata with semantic meta-information, Charset information, Document Type Definition (DTD), etc.
– Diagramation and style information: information about rendered items (like image size attributes) and visual specifications, as Cascading Style Sheets
(CSS).
– Scripts, usually JavaScript, complement interactivity and functionality.

9. Laman Web (Web site)
• Satu set koleksi Web pages (halaman web) yang mengandungi kandungan
(media), termasuk teks, video, muzik, audio, imej, dan lain-lain.
• Laman web dihoskan pada sekurang-kurangnya satu pelayan web, boleh diakses
melalui rangkaian seperti Internet atau rangkaian kawasan setempat melalui
alamat Internet yang dikenali sebagai Uniform Resource Locator (URL).
• Semua laman web yang diakses oleh orang awam secara kolektif membentuk
World Wide Web.
• Pelawat yang akses laman web dan melihat Web pages (halaman web)
menggunakan program perisian yang dipanggil Web browser.

10. Jenis Laman web (web site)
10
Portal Berita Informasi Perniagaan
Blog Wiki Laman sosial Pembelajaran

11. Jenis Laman web (web site)
Hiburan Advokasi Aplikasi Web
Aggregator
kandungan
Persendirian
11

12. Halaman Utama (Home Page)
• Home page atau index page adalah halaman utama atau paparan halaman
pertama yang diperlukan untuk pengguna internet selepas mereka menaip
alamat internet peribadi atau organisasi.
• Ia paling kerap merujuk ke laman web asal atau utama dari sebuah laman
web, kadang-kadang dipanggil "muka depan" (oleh analogi dengan surat
khabar).
• Laman web atau fail tempatan yang secara automatik memuatkan apabila
pelayar web bermula atau apabila butang “home" pelayar ditekan;
• Contoh: pengguna menaip alamat URL: www.uum.edu.my.
• Pengguna boleh meneroka laman web lain melalui halaman utama.

13. URL (Uniform Resources Locator)
• URL adalah alamat unik halaman web.
• Terdiri daripada beberapa bahagian yang membantu
mengenal pasti dokumen web.
• Bahagian pertama menunjukkan protokol (set peraturan)
yang digunakan untuk mendapatkan semula dokumen yang
dinyatakan.
• Protokol ini biasanya diikuti dengan titik bertindih, dua garis
condong ke hadapan, nama domain (nama hos), laluan ke
laman web tertentu atau lokasi di laman web, dan nama
halaman Web.

14. Uniform Resource Locator (URL)
14

15. Pelayar Web (Web Browser)
• Pelayar web (web browser) adalah aplikasi perisian untuk mendapatkan
semula, mempersembahkan, dan memperolehi sumber maklumat di
World Wide Web.
membolehkan pengguna untuk mengakses, mengemudi laman web dan
program Web.
15
Internet
Explorer
Firefox Opera
Safari
Google
Chrome

16. Antaramuka Pengguna Pelayar Web
Kebanyakan pelayar web mempunyai persamaan antaramuka
pengguna:
• Back and forward buttons to go back to the previous resource and forward respectively.
• A refresh or reload button to reload the current resource.
• A stop button to cancel loading the resource. In some browsers, the stop button is merged with the
reload button.
• A home button to return to the user's home page.
• An address bar to input the Uniform Resource Locator (URL) of the desired resource and display it.
• A search bar to input terms into a search engine. In some browsers, the search bar is merged with
the address bar.
• A status bar to display progress in loading the resource and also the URL of links when the cursor
hovers over them, and page zooming capability.
• Major browsers also possess incremental find features to search within a web page.

17. Contoh pelayar web

18. Enjin Carian Web (Web Search Engine)
• Adalah perisian untuk mencari maklumat dalam laman web.
• Membantu pengguna mendapatkan maklumat dengan cepat dan
mudah.
• Hasil carian selalunya dipersembahkan dalam bentuk senarai
keputusan yang dikenali sbg “hits”.
• Maklumat yang boleh didapati termasuklah halaman web, laman
web, imej, video, berita, peta, dan maklumat lain yang berkaitan
dengan topik tertentu.
• Contoh enjin carian web yang terkenal: Google, Yahoo, Hotbot,
Excite, Lycos, Ask.com, etc.
18

19. World Wide Web (samb.)
19

20. World Wide Web (samb.)
• Maklumat yang
dipersembahkan di Web
mesti dinilai untuk
ketepatan
• Tiada siapa yang
mengawasi kandungan
laman web
20

21. World Wide Web (samb.)
• Plug-in merupakan satu program yang
menambahkan keupayaan pelayar Web
21

22. Penerbitan Web (Web publishing)
• Penerbitan Web (Web publishing) ialah perisian
untuk membangunan, mengubahsuai,
menerbitkan dan menyelenggara laman web.
• Halaman web ini akan diterbitkan dalam internet,
intranet atau extranet.
22

23. Penerbitan Web
• Terdiri daripada empat kategori perisian:
– Editor teks seperti Notepad atau TextEdit, di mana kandungan dan HTML
markup dimanipulasi secara langsung dalam program editor.
– WYSIWYG editor offline, seperti Microsoft FrontPage dan Adobe
Dreamweaver (sebelum Macromedia Dreamweaver), disunting
menggunakan antara muka GUI dan HTML dijana secara automatik oleh
perisian editor.
– WYSIWYG editor atas talian boleh mencipta persembahan media seperti
laman web, widget, intro, blog, dan dokumen lain.
– Editor berasaskan template seperti Rapidweaver dan iWeb, yang
membolehkan pengguna untuk dengan cepat membuat dan memuat naik
laman web ke pelayan web tanpa pengetahuan HTML terperinci, kerana
mereka memilih template yang sesuai dari palette dgn menambah gambar
dan teks tanpa manipulasi langsung kod HTML.
23

24. Proses Penerbitan Web
• Proses penerbitan laman web terdiri daripada 6
langkah:
24
Mempelajari
(Learn)
Merancang
laman web
(Plan)
Analisis dan
reka bentuk
(Design)
Membina
laman web
(Code)
Menerbitkan
laman web
(Launch)
Menyelenggara
laman web
(Maintain)

25. Mempelajari (Learning)
• Mengkaji dan memahami apa yang anda perlukan
untuk membina laman web adalah perkara
pertama yang paling penting dalam keseluruhan
proses reka bentuk laman web.
• Gunakan ringkasan kreatif ~ pada dasarnya satu
siri soalan yang anda meminta pelanggan anda
supaya anda boleh memahami skop dan
matlamat projek.

26. Perancangan (Plan)
• Sebaik sahaja anda telah belajar apa yang anda perlu untuk
membina, ia adalah masa untuk mula merancang
bagaimana anda akan untuk menjadikannya satu
kenyataan.
• Berikan jawapan kepada soalan-soalan perancangan
berikut:
– Apakah matlamat web?
– Apakah isi kandungannya web?
– Bagaimanakah ia disusun?
– Bagaimanakah ia akan kelihatan bila diterbitkan?

27. Perancangan (samb...)
• Strategi mereka bentuk
– Sebelum anda boleh mula mereka bentuk laman web,
anda perlu tahu apa dan bagaimana untuk mereka
bentuk
• Membuat kajian
– lawati laman web dan lihat jenis reka bentuk yang sudah
terdapat di pasaran supaya anda dapat menghasilkan
reka bentuk yang tersendiri termasuklah warna, font
dsb.

28. • Lakaran
– bermula dengan lakaran idea-idea di atas sekeping
kertas, seperti yang dilakukan oleh ramai pereka web
yang lain.
– mula berfikir secara serius tentang susun atur laman
web, struktur laman web dan bentuk navigasi.
• Pilihan alatan (Tools)
– Nilai alat yang akan digunakan.
– Apakah isi kandungan akan bekerja/berfungsi dengan baik
berdasarkan matlamat laman web, sama ada memasukkan Flash
atau sebaliknya.
Perancangan (samb...)

29. Struktur hierarki Laman Web
• Sediakan lakaran cadangan laman web dengan
menunjukkan hubungan antara setiap laman.
Selepas lakaran peta laman web seterusnya
mulakan lakaran susun atur yang sama bagi setiap
laman anda.

30. Mereka bentuk (Design)
• Apabila anda sudah bersedia untuk mula mereka bentuk,
anda perlu untuk mereka bentuk laman utama dan laman2
lain yang berkaitan.
• Laman web boleh dibina dengan berbagai cara:
– Menggunakan notepad
– Menggunakan web authoring tool seperti Frontpage,
dreamweaver dll.

31. • Contoh:
Struktur hierarki Laman Web

32. Pembangunan Laman Web (Coding)
• Menulis program/kod
• Boleh dibangunkan dengan cara:
– Menulis kod HTML menggunakan notepad
– Menggunakan editor WYSIWYG editor (web
authoring tool) seperti Microsoft FrontPage
atau Macromedia Dreamweaver.
• Buat pengesahan dan uji laman web
– Disediakan oleh W3C

33. HTML
• Ringkasan daripada perkataan Hypertext Markup
Language.
• HTML is Bahasa penanda (set peraturan untuk
menandakan blok teks) memberitahu pelayar (browser)
untuk memaparkan teks.
• digunakan untuk membangunkan dokumen hypertext
dalam WWW atau intranet.
• Bahasa ini akan menentukan hubungan antara laman
web dan pandangan di laman web.
33

34. HTML
E.g. Hypertext Markup Language Document
34

35. Kod HTML
35
STID 1103

36. Menulis Kod HTML
• Exercise
– All you need is a text editor (eg: Notepad)
– Open Notepad
– Type the following code into your file and then save as index.html
<html>
<head>
<title> My First Web Page </title>
</head
<body>
Hello World
</body>
</html>

37. Menulis Kod HTML (samb…)
• Open browser to view your page

38. Menulis Kod HTML (samb…)
<html>
<head>
<title> My First Web Page </title>
</head
<body>
<center><H1>Hello World</h1><br>
<a href=http://www.uum.edu.my>
Universiti Utara Malaysia</a>
</body>
</html>

39. Menulis Kod HTML (samb…)

40. Kod HTML: Maksud
• Kod HTML ditulis terdiri daripada tag yang disertakan
dalam kurungan (spt <html>)
• Tag HTML adalah berpasangan cth: <h1> and </h1>

41. Kod HTML: Elemen
• <html>...</html>
– The Root element of an HTML document; all other elements are
contained in this.
– the beginning and the end of an HTML document.
• <head>...</head>
– Container for processing information and metadata for an HTML
document.
• <body>...</body>
– Container for the displayable content of an HTML document.
• <title>...</title>
– Define a document title.
– Web browsers usually display it in a window's title bar when the
window is open

42. Kod HTML: Elemen (samb…)
• <h1>...</h1> <h2>...</h2>
– Section headings at different levels.
• <center>...</center>
– Creates a block-level center-aligned division.
• <a>...</a>
– An anchor element is used to anchor a URL to some text on a web page.
• <p>...</p>
– Creates a paragraph
• <br>
– A forced line-break.
• <img>
– Used by visual user agents to insert an image in the document. The src attribute
specifies the image URL.

43. Jenis Fail Web
• .htm / .html ~ Hypertext Markup Language
• .php / .php3 ~ Personal Home Page
• .asp / .aspx ~ Active Server Pages
• .cgi ~ Common Gateway Interface
• .jsp ~ JavaServer Pages
• Default webpage filename: index
– index.html
– index.jsp

44. Penerbitan (Launch/Publish)
• Apabila anda laman web telah siap maka ia perlu
diterbit/lancar kepada orang ramai
• Penerbitan Web bermakna meletakkan semua folder dan
fail dalam Web ke pelayan Web.
• Pelayan Web kemudian menyajikan laman web anda untuk
pengunjung di WWW.
• Pengguna tidak boleh hanya menyalin fail nya ke pelayan.
• Dua cara berbeza untuk memuat naik fail Web ke pelayan:
– HTTP (untuk memuat naik fail web anda untuk pelayan)
– FTP (untuk memindahkan fail ke pelayan)

45. Menyelenggara (Maintain)
• Anda perlu mengekalkan laman web anda agar tidak
menjadi out-of-date.
• Laman web perlu dipantau dan sentiasa dikemaskini.

46. Perkara yang perlu diberi perhatian:
• Butang navigasi atau bar adalah mudah untuk difahami
dan digunakan.
• laman web yang besar perlu ada indeks atau peta tapak.
 senarai laman web yang boleh diakses oleh pengguna
• Bar navigasi memberi tahu pengunjung petunjuk tentang
di mana mereka berada, apakah halaman laman web
tersebut.
• Hierarki maklumat jelas.
• Jenis dan saiz teks yang sesuai.
• Grafik dan latar belakang menggunakan warna selamat.
• Muat turun dengan cepat.
• Konsisten dari halaman ke halaman  setiap laman web
perlu tergolong dalam tapak yang sama.

47. Web Navigation
• All web navigation must answer these
questions:
– Where am I?
– Where have I been?
– Where can I go next?
– Where's the Home Page?
– Where's the Home Home Page?
• Navigation must be simple and consistent.

48. Bad Web Design
• http://www.jaydax.co.uk/tutorials/webdesign/badpagegui
de/badpgguide.html
• http://www.bow-wowbooks.com/
• http://www.burlingtonnews.net/burlington_ufo_center.ht
ml
• http://www.georgehutchins.com/
• http://anselme.homestead.com/AFPHAITI.html
• http://web.archive.org/web/20100813142028/http://hav
enworks.com/
• http://www.thomasedison.org/
• http://www.webpagesthatsuck.com/

49. Tindakbalas pengguna
• Cara yang paling mudah utk mengesan tindak
balas pengguna di dalam sesuatu laman web.
– Pembilang
– Komen
– Respon E-mail
– Log Server
49

50. 50