nota pembangunan laman web

Pembangunan Laman Web TTM 311

Farah Waheda Othman 1

BAB 1: PEMBINAAN LAMAN WEB

ISTILAH-ISTILAH INTERNET

1. WWW

- Salah satu perkhidmatan yang terdapat di internet.

- Satu jalinan maklumat berasaskan hyperteks yang mempunyai ciri-ciri friendly user, grafik, video,

audio dll.

- Koleksi maklumat-maklumat yang besar yang boleh didapati di internet

- Yang diwujudkan oleh Tim Berbers-Lee

2. Web server

- merupakan komputer untuk tujuan khas – untuk gabungkan laman-laman web melalui hyperlinks

3. Web browser

- program yang digunakan untuk melihat/membuka laman web

- cth: Netscape Navigator, Microsoft Internet Explorer,Mosaic,NeoPlanet,OPERA.

- membenarkan pengguna melayari web dengan klik pada perkataan/gambar tertentu pada laman

web.

- Ada 2 jenis web browser

a. Text only browser

LYNX

CELLO

b. Graphical browser

Netscape

IE

4. HTML – HyperText Markup Language

- semua laman web ditulis dengan HTML

- satu cara standard utk masukkan tags ke dalam dokumen/fail untuk tunjukkan bagaimana teks

tersebut dipaparkan pada skrin di browser.

- Fail HTML mesti disimpan dalam teks file dengan extension *.htm atau *.html

- Ditulis dalam format ASCII dan boleh dibaca oleh semua platform (UNIX, SimpleText pada

Macintosh dan Notepad pada Windows)

5. URL – Uniform Resource locators

- merupakan alamat dalam web.

- alamat internet anda, ini bertujuan memudahkan pengunjung lain untuk melihat laman web anda

dengan hanya menaip alamat internet anda

- Ada 2 jenis :

a. Domain name

Cth: www.jaring.com.my

b. IP address

Cth : 216.85.237.21

http://www.upsi.edu.my/fakulti/fst.html

6. Hyperlink

- untuk menghubungkan laman web

7. Web pages

- www mempunyai jutaan web pages (dokumen web) yang ditulis dalam kod HTML

- setiap web pages adalah fail komputer

- Suatu halaman tunggal yg mengandungi teks dan grafik yang telah dilabelkan dgn kod-kod HTML

yang bersesuaian untuk web

8. Web site

protokol domain Nama

server

Direktori/nam

a fail

http://www.jaring/



- tempat dalam komputer di internet kita simpan web pages

- Suatu himpunan halaman web yang berkait dan mempunyai pelbagai kandungan yang boleh

diterokai dengan mudah menggunakan pelayar web

9. Home page

- laman mula bagi web site

- seperti jadual kandungan

10. Search engine

- alatan / tool yang digunakan untuk mengesan laman web di seluruh dunia dan mencari item yang

kita nak

11. ISP – Internet Service Provider

- perniagaan yang berhubung kepada individu atau syarikat dengan percuma atau bayaran

- Cth : di Malaysia – Jaring oleh MIMOS dan TMnet oleh Telekom.

12. Wizard

- Suatu ciri yang memandu secara langkah demi langkah melalui proses tertentu dalam FrontPage

seperti mencipta sesuatu tapak web baru

13. HTTP - Hypertext Transfer Protokol

14. DHTML - Dynamic Hypertext Markup Language

15. - File Tranfer Protocol

- bertujuan untuk mengalih fail dari satu komputer ke komputer yang lain dalam internet

TUJUAN MEMBINA LAMAN WEB

Untuk dikenali diseluruh dunia

Untuk pengiklanan

Untuk penjualan barangan

Untuk menjalin hubungan

Untuk berkomunikasi

Untuk besuka-ria

Hiburan

Berkongsi pengetahuan

Memperkenalkan Negara

FAKTOR YANG PERLU DIKENALPASTI SEBELUM MEMBINA LAMAN WEB

Kenalpasti sararan pengguna

- Samada pengguna terdiri daripada kanak-kanak, remaja, dewasa, dsb

Kenalpasti keperluan

- Keperluan terdiri daripada 2 iatu perkakasan dan perisian

- Perkakasan : Set komputer.

- Perisian : Microsoft FrontPage, Macromedia Dreamweaver, Notepad

Kenalpasti fungsi laman web

- Berkait rapat dengan pemilik laman.

- Cth: Pembina laman amat berminat dalam pernanaman buah-buahan, maka fungsi laman

yang dibangunkan adalah memberi maklumat dalam bidang tersebut.

Kenalpasti gaya & rekabentuk

- Gaya laman web

- Rekabentuk laman web

- Cth: Gaya dan rekabentuk hendaklah bersesuaian dan dapat menarik minat pengguna.

Kenalpasti elemen-elemen yang perlu dimasukkan

- Elemen-elemen yang perlu dimasukkan antaranya : Teks, audio, video, animasi, grafik.

- Cth: Lagu latar yang tenang semasa pengguna melayari laman web

Kenalpasti penyampaian sesuatu maklumat



- Maklumat yang tepat/berkesan

- Maklumat yang terkini

- Cara penyampaian maklumat

- Pengolahan Maklumat

- Keberkesanan maklumat yang dipaparkan

JENIS LAMAN WEB (Kategori kandungan laman web)

1. Advocacy web page

Mengandungi idea, pandangan, pendapat untuk meyakinkan pengguna/pembaca

2. Business/Marketing web page

Mengandungi promosi, jualan barangan atau perkhidmatan

3. Infomational web page

Mengandungi maklumat-maklumat fakta

4. News web page

Mengandungi berita-berita terkini yang berkaitan sukan, kehidupan, wang, cuaca dll

5. Portal web page

Mengandungi pelbagai perkhidmatan internet seperti email,searche engine,berita terkini dll.

6. Personal web page

Web individu yang tak berkait dengan mana-mana organisasi.

ELEMEN-ELEMEN HALAMAN WEB

1. Teks

2. Grafik

3. Audio

4. Video

5. hyperlink

PERISIAN PEMBANGUNAN WEB

- Terdapat beberapa kategori Editor HTML, antaranya ialah:

- Perisian editor teks ringkas

Memerlukan pengetahuan mendalam dalam bahasa HTML.

Cth : Notepad, Wordpad

- Perisian berasaskan pemproses perkataan

Memerlukanpengetahuan asas dalam mengendalikan perisian pemproses

Cth : Microsoft Word dan Word Perfect

Kurang digunakan kerana timbul banyak kekangan dan masalah semasa

pembangunan dan larian web

- Perisian berasaskan editor tag HTML

Memerlukan kemahiran menggunakan kod atau tag HTML dan pengguna nak

menggunakan skrip seperti JavaScript,ASP,PHP.

Cth: Micromedia Homesite dan Microsoft Visual Interdev.

- Perisian berasaskan pendekatan WYSIWYG

Menggunakan pendekatan perisian tag editor dengan perisian pemproses

perkataan.

Menyediakan kuasa kawalan tag HTML yang akan dihasilkan secara automatic

oleh perisian tersebut.

Cth : Microsoft FrontPage,Macromedia Dreamweaver, NetObjects Fusion.



KOD HTML

- HTML – hypertext Markup Language

- Bahasa yang digunakan untuk membangunkan sesebuah halaman web dalamWWW.

- Secara dasarnya adalah set kod penanda yang dipanggil tag.

- Biasanya tag beroperasi secara berpasangan. Cth:

<B>Teks tebal</B>

- Struktur asas kod HTML

- Selain itu,terdapat elemen sokongan yang biasa digunakan seperti elemen tag TITLE yang

digunakan seperti berikut :

Ciri-ciri Dokumen HTML.

1. Warna latar belakang dokumen

- Kod :

<BODY BGCOLOR=”#FF0000”></BODY>

- Contoh kod warna :

Warna Kod warna

Putih #FFFFFF

Hitam #000000

Merah #FF0000

Hijau #00FF00

Biru #0000FF

Magenta #FF00FF

Cyan #00FFFF

Kuning #FFFF00

Coklat #5C3317

Violet #9F5F9F

Merah Jambu #FF6EC7

Oren #FF7F00

2. Imej latar belakang dokumen

- Kod :

<BODY BACKGROUND=”logo.gif”></BODY>

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Tajuk Halaman Web</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>



3. Pautan atau links dalam dokumen

a. TEKS

- Kod :

<A HREF=”#nama pautan”>teks yang ingin dipautkan</A>

cth: <A HREF=”hobi.htm”>KLIK SINI</A>

b. IMEJ

- Kod :

<IMG SRC=”#nama fail”>

4. Pembahagi atau pemisah medan

a. Paragraph

- Kod :

<P ALIGN=”CENTER”>

Ini merupakan contoh perenggan di dalam dokumen HTML. Ruang Kosong akan

diabaikan memandangkan setiap perkataan dipisahkan oleh aksara space

</P>

b. Line Breaks

- Kod :

<P>

Ini merupakan baris perkataan yang pertama

<BR>

Ini pula teks yang dimulakan pada satu barisan yang baru tetapi bukan pada perenggan

yang baru.

</P>

5. Senarai atau lists

a. Ordered lists

- Kod :

<OL>

<LI>Item nombor 1

<LI>Item nombor 2

<LI>Item nombor 3

</OL>

b. Unordered lists

- Kod :

<UL>

<LI>Item nombor 1

<LI>Item nombor 2

<LI>Item nombor 3

</UL>

6. Penggunaan jadual

- Kod :

<TABLE BORDER=5>

<TR>

<TH>Lajur 1</TH>

<TH>Lajur 2</TH>

</TR>

<TR>

<TH>Sel 1a</TH>

<TH>Sel 1b</TH>

</TR>

<TR>

<TH>Sel 2a</TH>



<TH>Sel 2b</TH>

</TR>

</TABLE>

7. Menetapkan format teks HTML

a. Bold

- Kod :

<B>Halaman web saya</B>

b. Italic

- Kod :

<I>Halaman web saya</I>

c. Heading

- Kod :

<H1>Halaman web saya</H1>








BAB 2 : PENGENALAN ANTARAMUKA MICROSOFT FRONTPAGE XP

CIRI-CIRI YANG MENARIK YANG ADA PADA MICROSOFT FRONTPAGE

Menu tersusun untuk menyenangkan capaian

Tidak perlu menggunakan bahasa/kemahiran dalam HTML

Dapat menerima grafik/imej

Dapat menggunakan bantuan (help)

Mesra pengguna (friendly user)

KEMUDAHAN DALAM MS FRONTPAGE

a. Bar menu bagi Microsoft Frontpage

i. Menu file

- mengandungi semua arahan yang berkaitan dengan pengurusan fail frontpage atau helaian

halaman web yang di bina seperti membina fail baru, membuka dan menutup fail.

ii. Menu edit

– Mengandungi semua arahan yang berkaitan dengan proses pengubahsuaian fail frontpage

atau helaian halaman web yang dibina seperti arahan menyalin dan menampal bahagian teks

iii. Menu view

– Mengandungi semua arahan yang berkaitan dengan rupa bentuk paparan fail frontpage atau

helaian halaman web di skrin

iv. Menu insert

– Mengandungi semua arahan yang berkaiatan dengan proses penambahan elemen dalam fail

frontpage atau helaian yang dibina

v. Menu format

– Mengandungi semua arahan yang berkaitan dengan proses penyemakan keatas setiap teks

yang ditaip di helaian laman web

b. Tetingkap Di Microsoft Frontpage XP

- terdapat 6 tetingkap utama iaitu:

a. Tetingkap Page

Memaparkan fail halaman web dalam format HTML bagi tujuan

pengubahsuaian dan paparan

Paparan Page membolehkan anda memasukkan, menyunting, dan memformat

laman web anda

Digunakan untuk pembangun mengisi kandungan halaman individu laman web

b. Tetingkap Folders

Memaparkan semua folder dan fail dalam halaman web

Paparan Folders memaparkan susunan lipatan tapak web anda dan

menyenaraikan maklumat tentang laman web, gambar, dan lain-lain objek di

dalam tapak web anda

Membenarkan untuk melihat dan mengurus keseluruhan web dari aras fail dan

foldernya

Lokasi yang ditetapkan oleh Microsoft adalah

C:\My Documents\My Webs

c. Tetingkap Reports

Memaparkan laporan tentang halaman web.

Antara maklumat yang dipaparkan adalah:

Bil fail yang mempunyai pautan

Bil fail yang mempunyai pautan yang terputus



Fail yang mempunyai masa muat turun yang lama – 30s bagi kelajuan

28.8KBps

Paparan report membolehkan anda membaca laporan tentang analisis laman web

anda

Mengenalpasti ralat atau masalah yang mungkin berlaku bagi laman web yang

telah dibina

d. Tetingkap Navigations

Memaparkan rajah / diagram berbentuk pokok bagi halaman web yang dibina.

Paparan Navigasi membolehkan anda melihat serta menyusun struktur navigasi

(pergerakan) tapak web anda

Memberikan satu pandangan keseluruhan bagaimana laman web disusun atur.

2 kesan terhadap laman web yang dibina jika anda tidak melakukan

pengubahsuaian dalam tetingkap navigation

Banner tidak dapat dihasilkan

Menu button tidak dapat disetkan mengikut theme yang dipilih

Susah untuk menganalisa perjalanan sesuatu laman web

e. Tetingkap Hyperlinks

Memaparkan diagram tentang pautan yang terdapat pada helaian halaman web

yang sedang aktif di skrin.

Paparan hyperlink membolehkan anda melihat pautan yang bersambung ke

laman web pilihan di dalam tapak web anda

Membenarkan untuk melihat pautan antara fail-fail dalam laman web.

f. Tetingkap Tasks

Memaparkan senarai tugas yang perlu dilaksanakan oleh halaman web yang

dibina.

Paparan Tugas membolehkan anda mebina senarai tugas yang perlu dibuat untuk

menyiapkan tapak web anda.

Memaparkan senarai tugas dan membantu pembangun menjejaki lanhkah-

langkah untuk menghasilkan satu web

Jika menggunakan wizard, FrontPage akan membina senarai tugas secara

automatic dan ia masih boleh ditambah.

PELAYAN WEB DAN PELAYAR WEB

Pelayan web adalah merupakan komputer yang menyimpan blok-blok maklumat / data yang

dipaparkan dalan web.

Pelayar web adalah merupakan satu perisian yang digunakan untuk mencapai fail-fail yang

tersimpan pada pelayan web



BAB 3 : ANTARAMUKA PENGGUNA LAMAN WEB

1. Memulakan Microsoft FrontPage

Rajah 3.1

MEMULAKAN MICROSOFT FRONTPAGE

- untuk membina helaian laman web yang pertama : File>New>Page or Web dan tetingkap Task

Pane akan dipaparkan

- membina helaian laman web baru : klik pada arahan Blank Page

- Membina laman web baru dan kosong : klik pada arahan Empty Web

PENGGUNAAN TEMPLATE DAN WIZARD

Templat :

- Satu dokumen yang sedia direka bentuk tanpa berinteraksi dengan pembangun

- Pembangun hanya perlu menambah teks dan grafik di mana perlu

- Menyediakan satu koleksi halaman terpaut yang boleh diubahsuai

Wizard :

- Satu dokumen yang sedia direka bentuk hasil dari interaksi dengan pembangun.

- Pembangun hanya perlu menambah teks dan grafik di mana perlu

a. Penggunaan template

- membina helaian laman web dengan pilihan templates : klik pada arahan Page templates

- membina laman web dengan pilihan templates : klik pada arahan Web Sites Templates

Title bar Standard toolbar Formating toolbar

Ruangan paparan

View bar Status bar

Task Pane



b. Helaian Templates

- Paparan seperti di bawah akan ditunjukkan :

Rajah 3.2

- Berikut merupakan keterangan ringkas bagi sebahagian dari pilihan template tersebut:

Template Keterangan

Confirmation Form Memaparkan maklumat tentang penerima input dari

pengguna

Feedback Form Berbentuk ruangan memberi komen atau maklum

balas

Form Page Wizard Borang yang akan dibina dengan bimbingan

tetingkap wizard

Frequently Asked Mengandungi senarai soalan dengan jawpan yang

sering disoal oleh pengguna

Guest Book Berbentuk seperti buku tetamu yang membolehkan

pengguna memberikan komen atau maklumat

Narrow, Left-aligned Body Mempunyai reka letak teks yang sempit ke sebelah

kiri

Narrow, RightLeft-aligned Body Mempunyai reka letak teks yang sempit ke sebelah

kanan

- Pilih Templates yang diingini contohnya Personal Web dan klik OK

- Untuk ubahsuai laman web, tab pada normal dan ubahsuai seperti biasa.

- Bagi mengantikan imej yang terdapat dalam templates,klik kanan tetikus pada imej tersebut dan

klik pada arahan Gallery Properties.

- Tetingkap seperti rajah akan dipaparkan.

Rajah 3.3 Rajah 3.4



- Pada tetingkap rajah ,imej-imej boleh ditambah, ubahsuai dan dipadamkan.

- Untuk menambah gambar, klik pada butang Add > Pictures From Files dan pilih gambar yang

dikehendaki. Gambar ini secara automatiknya akan dimasukkan dalam galeri yang disediakan.

- Untuk mengubahsuai imej, klik pada butang Edit dan tetingkap Edit Picture dipaparkan. Pada

tetingkap ini imej boleh diubahsuaikan.

- Setelah selesai mengubahsuai imej, klik butang OK.

- Untuk membuang imej, pilih imej yang ingin dipadamkan dan klik butang remove.

c. Web Sites Templates / Wizard

- Paparan seperti di bawah akan ditunjukkan :

Rajah 3.5

- Customer support web merupakan satu templat untuk sesebuah syarikat menyebarkan produknya

dalam internet

- Discussion web wizard pula akan menghasilkan satu laman web yang bertemakan kumpulan

perbincangan, forum, dan sebagainya

- Ubahsuai lokasi laman web yang ingin dibina. Laman web anda akan ditempatkan ke lokasi ini.

- Pilih Templates yang diingini contohnya Personal Web dan klik OK

- Klik pada tetingkap folders dan kelihatan direktori anda dipenuhi dengan beberapa fail html dan

imej seperti di bawah:

Rajah 3.6

- Klik fail index.htm untuk melihat kandungan laman web anda. Contohnya :



Rajah 3.7

- Untuk ubahsuai laman web, tab pada normal dan ubahsuai seperti biasa.

- Klik pada tetingkap Navigation, Hyperlinks dan Task untuk melihat hubungan dalam laman web

anda.

PENGGUNAAN TULISAN

- Buka Microsoft FrontPage dan mulakan dengan fail yang baru dengan klik pada ikon

- Tab pada normal seperti yang ditunjukkan dalam rajah dibawah :

Rajah 3.8

- Taipkan maklumat seperti yang berikut :

Rajah 3.9

- Simpan fail dengan nama index.htm.

Langkau dengan

tekan kekunci Enter

Langkau dengan

tekan kekunci Shift

dan Enter serentak.



MENGUBAHSUAI RUPA BENTUK TEKS

* Mengubahsuai saiz teks

1. Buka fail index.htm yang telah dibina sebelum ini.

2. highlight pada perkataan Selamat Datang.

Rajah 3.10

3. Untuk mengubahsuai saiz teks tersebut, klik pada anak panah ke bawah pada ikon di

Formatting Toolbar.Pilih saiz yang dikendaki.

4. Ikon Increase Font Size dan Decrease Font Size juga boleh digunakan untuk

mengubahsuai saiz teks.

5. Simpankan fail.

* Mengubahsuai jenis font



3. klik pada anak panah ke bawah pada ikon di Formatting Toolbar. Pilih jenis font

yang dikendaki.

4. Simpankan fail.

* Mengubahsuai stail tulisan


2. Highlight pada perkataan yang dikehendaki dan pilih jenis stail yang dikehendaki pada salah satu

ikon ini .

3. Simpankan fail.

Mengubahsuai Rupa Bentuk Teks

* Mengubahsuai saiz teks



Rajah 3.11

8. Untuk mengubahsuai saiz teks tersebut, klik pada anak panah ke bawah pada ikon di

Formatting Toolbar.Pilih saiz yang dikendaki.

9. Ikon Increase Font Size dan Decrease Font Size juga boleh digunakan untuk

mengubahsuai saiz teks.

10. Simpankan fail.

* Mengubahsuai jenis font





7. klik pada anak panah ke bawah pada ikon di Formatting Toolbar. Pilih jenis font

yang dikendaki.

8. Simpankan fail.

* Mengubahsuai stail tulisan


5. Highlight pada perkataan yang dikehendaki dan pilih jenis stail yang dikehendaki pada salah satu

ikon ini .

6. Simpankan fail.

*NOTA:

Dimaksudkan dengan fail index

Di anggap sebagai fail hadapan, dan fail inilah yang dikenali sebagai homepej

Dinamakan index.htm

Apabila gagal menentukan fail yang akan dibuka, peluncur akan membuka fail tersebut.

Kod bertanda ©

hakcipta

agar tidak diciplak oleh orang lain

MENUKAR PROPERTIES DALAM LAMAN WEB

a. Warna Latar

Warna latar biasa yang ditetapkan oleh Ms FrontPage ialah putih. Walaupun begitu, pengguna boleh

menukarkan warna latar ini.

1. Buka laman yang dikehendaki.

2. Klik File > Properties > Background.

Rajah 3.12

3. Klik anah panah di sebelah Background. Kotak warna akan ditunjukkan dan pilih warna yang

dihendaki.

Rajah 3.13

4. Pilih More Colors untuk pilihan yang lebih banyak.



Rajah 3.14

5. Pilih warna dan klik butang OK. Simpan laman web anda.

Pengguna boleh juga menggunakan latar yang bergambar/tekstur. Imej sebaik-baiknya berukuran 96 x 96

piksel.

1. Buka laman web anda.

2. Klik kanan pada tetikus dan pilih Page Properties > Background

Rajah 3.15

3. Klik pada Background picture dan pada butang Browse…

4. Dalam kotak dialog yang muncul, klik pada fail imej yang anda kehendaki.

Rajah 3.16



MENGUBAHSUAI SPESIFIKASI HELAIAN

* Mengubahsuai tajuk helaian

1. Klik kanan pada tetikus > Page properties

Rajah 3.17

2. Ubahsuai tajuk New Page 1 pada ruangan Title dengan tajuk yang lebih sesuai.

* Mengubahsuai latar belakang helaian

1. Klik kanan pada tetikus > Page Properties.

2. Tab pada Background

Rajah 3.18

3. Untuk memilih warna, klik anak panah ke bawah pada bahagian Color, Background dan pilih

warna yang dikehendaki.

4. Untuk memilih imej, tandakan pada Background Picture dan klik Browse dan pilih imej yang telah

ditetapkan.

MARQUEE

- Marquee atau sepanduk Grafik berfungsi sebagai menarik perhatian pengunjung kerana kadang

kala ia mengandungi animasi atau dynamic effects.

- Teks yang boleh digerakkan di halaman web bagi memaparkan mesej tertentu

1. Klik Insert > Web component > Dynamic effect > marquee

2. klik Finish



Rajah 3.19 Rajah 3.20

3. Entiti bagi marquee

Perkara Penerangan

Text Teks yang dipaparkan

Direction Arah pergerakan teks

Speed Kelajuan teks

Behaviour Jenis pergerakan

Size Saiz marquee

Repeat Kuantiti ulangan

Style Font

Background color Warna latar

THEME

- Suatu himpunan atribut-atribut warna dan rekabentuk yang dikenalpasti dengan satu nama tema.

Tema tertentu boleh digunakan pada keseluruhan tapak web atau pada halaman induk dalam suatu

tapak web.

1. Pilih Format > Theme…

2. Tetingkap di bawah akan dipaparkan.

Rajah 3.21



Perkara Penerangan

Vivid Colors Warna lembut pada latar dan teks

Active graphics Grafik yang dipaparkan semasa objek aktif

Background picture Gambar bagi latar fail

Apply Using CSS Menggunakan CSS

Background color Warna latar

Colors Warna latar, butang, kombinasi warna

Graphics Bentuk susun atur fail

Text Jenis teks yang digunakan



BAB 4 : PERLAKSANAAN NAVIGASI

MAKSUD PAUTAN ATAU LINK

• merupakan elemen halaman web yang membolehkan suatu navigasi tidak linear berbentuk

hypermedia dapat dihasilkan

• boleh hubungkan antara satu halaman ke halaman yang lain

Hyperlink akan menyambung sebuah laman ke laman yang lain. Ia juga membolehkan anda

melayari tapak-tapak web di Internet.

Link boleh jadi link teks atau link grafik. Apabila disentuh pautan dengan penunjuk tetikus, rupa

penunjuk bertukar menjadi penunjuk jari.

JENIS PAUTAN DALAM MEMBANGUNKAN LAMAN WEB

i. Pautan Teks

- Menghubungkan sesuatu halaman menggunakan teks

- Cth : “Sila klik halaman peribadi untuk mengetahui dengan lebih lanjut”

ii. Pautan Imej

- Menghubungkan sesuatu halaman menggunakan imej / gambar

iii. Pautan untuk menghantar emel

- Pautan yang membolehkan pengguna menghantar emel kepada individu tertentu seperti

pembangun halaman web dan sebagainya

- Untuk membina pautan emel, pastikan anda mempunyai suatu alamat emel yang sah

- Cth : [email protected]

iv. Pautan ke halaman web lain

- Boleh menghubungkan ke halaman web yang lain

- Cth : http://www.yahoo.com

v. Pautan Bookmark

- Merupakan lokasi tertentu pada sesuatu fail html yang dibina menerusi arahan

Insert>Bookmark di bar menu

- Digunakan di dalam suatu fail html yang mengandungi maklumat yang terlalu banyak

sehingga memerlukan pengguna skrol ke bahagian bawah fail tersebut.

vi. Pautan berrdasarkan kawasan (hotspot)

- Membenarkan pengguna menetapkan kawasan pautan berbeza pada satu imej.

A. TEKS

1. Taipkan teks yang ingin dipautkan

2. Highlight pada teks tersebut dan klik kanan > Hyperlink

3. Pilih Existing File or Web Page > fail yang dikehendaki > OK

Rajah 4.1 Rajah 4.2 Rajah 4.3

B. IMEJ

1. Masukkan imej ke dalam fail

2. Highlight pada teks tersebut dan klik kanan > Hyperlink

3. Pilih Existing File or Web Page > fail yang dikehendaki > OK

mailto:[email protected]

http://www.yahoo.com/



C. MAIL ELEKTRONIK

1. Taipkan teks yang dikehendaki.

2. Klik pada imej tersebut dan klik kanan > Hyperlink

3. Pilih E-mail Address

4. Pada ruangan E-mail address, taipkan alamat email yang dikehendaki > OK

Rajah 4.4

D. PETA IMEJ

1. Keluarkan Picture Toolbars dengan klik kanan pada mana-mana bahagian toolbars > Pictures

2. Klik pada imej untuk mengaktifkan Pictures Toolbars

3. Pilih Polygonal Hotspot dan lukis mengikut imej kecil yang ada pada imej tersebut sehingga

bertemu semula dengan titik mula.

4. Menu hyperlink akan dipaparkan dan pilih fail yang dikehendaki untuk dipautkan.

Rajah 4.5 Rajah 4.6 Rajah 4.7

E. BOOKMARK

1. Sediakan satu fail yang panjang (yang menggunakan scroll bar) seperti fail di bawah:

Rajah 4.8

2. Buatkan tanda pada tajuk-tajuk resipi denagn hightlight pada tajuk resipi > Insert > Bookmark…




3. Menu bookmark akan dipaparkan. Berikan nama untuk tanda ini dan klik OK. Akan kelihatan

garis putus-putus pada tajuk.

4. Highlight pada tajuk yang hendak dipautkan > klik kanan > hyperlink


5. Klik pada Place In This Document > Ubi Kentang Jaket > OK

6. Untuk membuang bookmark, highlight pada tanda bookmark > klik kanan > bookmark properties

7. pilih tanda yang di highlight tadi > clear.

Rajah 4.13



BAB 5 : ELEMEN REKABENTUK

Rekabentuk laman web yang baik menggunakan kesemua eleman-eleman yang ada dalam multimedia

seperti imej, audio, teks, video dan grafik. Elemen-eleman ini sangat penting dalam pembangunan sesebuah

laman web. Sesebuah laman web yang baik dan menarik akan menggabungkan kesemua elemen-elemen ini

supaya laman web yang dibangunkan dapat menarik perhatian pengguna untuk melayari laman tersebut.

ELEMEN ASAS LAMAN WEB

1. Teks

2. Grafik

3. Audio

4. Video

5. hyperlink : dokumen, URL, emel dan bookmark

ELEMEN TAMBAHAN LAMAN WEB

1. Bingkai / frame

2. Interactive button / Hover button

3. Hotspot

4. Rollover effect

5. Hit counter

MEMBINA JADUAL

1. Pada toolbar Standard, klik pada anak panah di sebelah butang New dan klik pada Page. Kotak

dialog Page Template akan dipaparkan.

2. Pilih Normal Page daripada kotak dialog Page Template yang dipaparkan. Klik butang OK.

3. Pada menu Table pilih Insert, kemudian klik Table untuk membuka kotak dialog Insert Table.

Rajah 5.1

4. Saiz yang ditetapkan untuk jadual sekarang adalah dua lajur dan dua baris menjadikan ia sebagai

empat cell.

Rajah 5.2

5. Pilih saiz tersebut. Juga teruskan sahaja menerima pilihan untuk Layout dan Width yang

diberikan.



6. Klik butang OK. Jadual akan terbina pada laman anda.

Rajah 5.3

Memahami Saiz Jadual

Satu perkara yang perlu anda ketahui mengenai jadual adalah bagaimana ia disaizkan. Kelebaran jadual di

set sama ada menggunakan peratus atau pixel.

Jika anda menerima kelebaran asal (tiada perubahan) untuk jadual yang anda buat di atas, ini bermaksud

anda telah setkan jadual anda kepada 100 peratus daripada kawasan paparan. Sekiranya anda setkan

kelebaran menggunakan pixels, ia akan dikira sebagai saiz jadual tersebut.

Menukar Kelebaran Jadual

1. Letakkan kursor di dalam jadual.

2. Dari menu Table, pilih Select, Table.

3. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties.

4. Pada bahagian Specify Width, pilih butang radio In Pixels dan setkan nilai 400.

5. Klik butang OK dan jadual anda akan disaizkan mengikut nilai yang baru.

Rajah 5.4

Warna Jadual

Selain setkan saiz jadual, anda juga boleh setkan warna sempadan dan latarbelakang jadual anda. Anda juga

boleh setkan sempadan sahaja, atau membina kesan 3 dimensi dengan setkan apa yang dikatakan sempadan

terang dan sempadan gelap.

1. Pilih Jadual yang anda bina.

2. Dari menu Table, pilih Table Properties, Table untuk membuka kotak dialog Table Properties.

3. Pada bahagian Border, pilih dropbox Color untuk membuka Border Color Pallete.

4. Anda juga boleh memilih warna untuk latarbelakang atau menggunakan grafik/imej untuk gambar

latarbelakang untuk jadual atau sel.

5. Klik butang OK untuk mengesahkan pertukaran dan melihat paparan perubahan.

Rajah 5.5



Membahagikan (Split) Cell

1. Pilih salah satu cell daripada jadual yang anda bina untuk dipecahkan (split), dengan klik pada cell

tersebut.

2. Tekan butang kanan pada tetikus, kotak dialog akan dipaparkan.

Rajah 5.6

3. Pilih sama ada anda ingin Split into Columns atau Split into Rows

Rajah 5.7

4. Pilih bilangan baris atau lajur yang anda ingin cell itu di pecahkan. Secara lalai nilainya adalah 2;

nilai maksimum adalah 100.

5. Klik butang OK.

Rajah 5.8

Mencantumkan (Merging) Cells

1. Pilih cell pertama yang anda mahu untuk memasukkan cantuman anda dan letakkan kursor pada

cell tersebut.

2. Tekan tanpa lepas kunci Shift dan pilih laras cell yang anda mahu untuk dicantumkan dengan cell

yang dipilih sebelumnya. Dua cell yang dipilih akan dihighlightkan. Kemudian tekan butang

kanan pada tetikus untuk memilih Merge Cells

Rajah 5.9

3. Dua cell yang anda pilih akan dicantumkan menjadi satu.



MEMBINA BINGKAI (FRAMES)

Bingkai akan membahagikan tetingkap (windows) kepada tetingkap yang lebih kecil. Pembahagian ini akan

dapat memudahkan pengguna meluncur di laman web yang dibina. FrontPage 2003 mempunyai satu

koleksi templat untuk membina bingkai. Ia membenarkan anda untuk meletakkan banyak bingkai di dalam

bingkai layout dokumen. Satu bingkai yang ringkas mengandungi dua bingkai, satu mengandungi pautan

dan satu lagi memaparkan laman yang dijalinkan oleh pautan tadi. Dalam lain perkataan, apabila pelawat

klik pada pautan di bingkai yang pertama, laman yang terpaut akan dipaparkan pada bingkai yang kedua.

Frame (bingkai)

- Ia digunakan untuk membahagikan kawasan di dalam tetingkap pelayar web kepada bahagian

berlainan yang dipanggil bingkai.

kedudukan bingkai bagi pilihan bingkai di bawah.

i. Banner & Contents

ii. Contents

iii. Header, Footer & Contents

iv. Header

1. View > Task pane


2. Pilih Page Template > Frame page > Banner and Contents > Ok



Rajah 5.12

3. Untuk menukar fail/page dalam bingkai.

a. Klik kanan pada bingkai yang dikehendaki

b. Pilih Frame properties > klik Browse


c. Klik Existing File or Web Page pada bahagian Link to:

d. Cari dan pilih fail yang dikehendaki

e. Klik OK

4. Untuk pautkan fail ke dalam bingkai melalui button.

a. Klik kanan pada button > button properties > browse

b. Pilih fail yang ingin dipautkan

c. Klik pada butang Target Frame

d. Klik pada mana-mana bingkai yang dikehendaki > OK

Rajah 5.15

Untuk fail/page

yang baru

Untuk fail/page

yang sedia ada.



MENAMBAH IMEJ

Grafik bersaiz besar tidak sesuai dimasukkan ke laman web

Grafik yang terlalu besar memakan masa yang agak lama untuk di beban ke bawah

Ini boleh menyebabkan pengunjung berasa bosan dan meninggalkan laman web anda tanpa

menunggu kesemua elemen dalam laman web dipaparkan

Format-format bagi fail grafik yang paling popular digunakan

- .gif

- .jpeg

perbezaan di antara grafik dengan format GIF dan grafik dengan format JPEG

GIF JPEG

- Format imej yang kadangkala mengandungi

animasi

- Format imej yang dimampat / statik

- Bersifat interlace – imej di muat dr kabur ->

terang

- tak bersifat interlace – pengguna akan nampak

muka kosong & imej dimuat scr baris demi baris

dari atas ke bawah.

- latar imej boleh ditukarkan kepada transperent - tak boleh ditukar kepada transperent

- boleh papar hingga 256 warna bagi imej - boleh papar hingga berjuta-juta warna imej

- selalu digunakan - lebih baik dari gif tapi ambil masa lama utk papar

Menambah Imej Dari Clip Art

1. Letakkan kursur pada tempat yang dikehendaki

2. Klik Insert > Picture > Clip art...

Rajah 5.16

3. Menu seperti di bawah a akan dipaparkan dan klik pada Clip Organizer…. Menu seperti rajah b akan

dipaparkan dan klik pada Office Collections. Pilihlah gambar yang dihendaki.

Rajah 5.17(a) Rajah 5.17 (b)



MULTIMEDIA

Audio / Bunyi

Format fail audio yang biasa digunakan untuk laman web

i. Wav(.wav)

ii. Real Audio(.ra)

iii. MPEG Level 3(.MP3)

iv. MIDI

v. AIFF Sound File

vi. AU Sound file

Menambah audio ke dalam laman web

1. Klik kanan mana-mana fail > Page Properties

2. Tab pada General > klik Browse pada bahagian Background Sound > OK

Bunyi ini boleh dditetapkan untuk berulang-ulang atau sebaliknya dengan menetapkan pada bahagian

Loop.

Rajah 5.18: Audio Rajah 5.19 : Video

Video

Format fail video yang dapat diintegrasikan ke dalam sesebuah laman web

Audio Video Interleaved(.avi)

QuickTime(.mov)

MPEG(.mpg)

RealVideo(.ra atau .ram atau rm)

.dat

Menambah Video ke dalam laman web

1. Insert > Picture > Video

2. Pilih fail video yang dikehendaki > OK

3. Edit saiz video yang telah dimasukkan.

4. Untuk edit masa tayangan video, klik kanan pada fail video > Picture Properties

5. Tab Video > pilih ulangan pada bahagian Repeat dan pilih masa tayangan pada bahagian Start.



REKABENTUK

Hover Button / Interactive Button

- Butang pada halaman web yang bertukar warna atau bersinar apabila seseorang pengguna

menggerakkan penuding tetikus di atasnya.

- Apabila pengguna mengklik tetikus di atas butang hover button, maka ia boleh pergi ke lokasi

halaman mengikut hyperlink yang telah ditentukan.

1. Klik Insert > Interactive Button

Rajah 5.20

2. Pilih butang pilihan.

3. Klik pada Tab “Font”

Rajah 5.21



4. Entiti bagi butang

Perkara Penerangan

Font Jenis teks

Font Style Bentuk teks

Size Saiz teks

Original Font Color Warna teks pada butang sebenar

Hovered Font Color Warna teks pada butang jika penuding diatasnya

Pressed Font Color Kesan pada warna teks pada butang jika butang

telah ditekan

5. Perlu diingatkan, untuk melihat hover button, fail perlu disimpan terlebih dahulu dan dilarikan

dalam browser.

DHTML (Dynamic HTML)

Dynamic HTML adalah kombinasi dari teknologi untuk membuat halaman web dinamik. Untuk

kebanyakan orang Dynamic HTML bermaksud gabungan dari HTML 4.0, Style Sheets dan JavaScript.

Istilah seperti Zoom, Fly dan Hop sering kali kita dengar. FrontPage menggunakan istilah tersebut untuk

menganimasikan elemen-elemen halaman dengan menggunakan HTML Dinamik (DHMTL)

Kelemahan DHTML adalah ia tidak berfungsi dalam pelayar-pelayar versi lama. Untuk melihat kesan-

kesan DHTML anda perlu menggunakan pelayar versi 4 ke ke atas (terkini)

Menambah kesan DHTML

Mencipta DHTML anda sendiri memanglah sukar, namun dengan penggunaan bar alatan DHTML Effects

memudahkan kerja anda.

Rajah 5.22 : Menunjukkan pilihan DHTML Effects

Rajah 5.23 : Bar alatan DHTML Effects



LANGKAH MEMBINA DHTML

Langkah 1: Bina halaman baru

Langkah 2: Taipkan beberapa perkataan pada halaman dan highlightkannya seperti di bawah.

Rajah 5.24

Langkah 3: Buka Bar Alatan DHTML

Pilih View > Toolbars > DHTML Effects (Rujuk rajah 1)

Langkah 4: Pilih peristiwa pemula

Pilih teks, tentukan peristiwa yang akan memulakan animasi.

Dalam bar alatan DHTML Effects, klik anak panah ke bawah di sebelah kotak kombo ON. Buat pilihan

daripada menu jatuh turun. Cth : Page Load (Lihat rajah di bawah)

Rajah 5.25



Langkah 5: Gunakan kesan

Daripada menu Apply, pilih kesan animasi yang akan diaksikan oleh teks apabila peristiwa yang dipilih

dalam Langkah 4 berlaku.

Rajah 5.26

Langkah 6: Pilih Setting

Rajah 5.27

Cuba dan lihat sendiri kesannya….

Anda juga boleh meletakkan kesan DHTML pada imej seperti di bawah.

Rajah 5.28

Langkah 7 : Hilangkan kesan DHTML

Jika hendak menghilangkan suatu kesan animasi, highlightkan teks/imej yang mempunyai kesan tersebut

dan klik butang Remove Effect dalam bar alatan DHTML Effects

Pilih gambar kedua

Gambar pertama



STYLE SHEETS

Juga lebih dikenali dengan Cascading Style Sheets(CSS):

• CSS ialah teks ASCII yang mengandungi arahan-arahan untuk memformat dokumen web. Ia

memudahkan anda untuk membuat reka letak dan persembahan web seperti penggunaan fon, saiz

fon, warna latar dan lain-lain.

• CSS juga adalah sebuah dokumen yang berdiri sendiri dan dapat dimasukkan dalam kod HTML

atau sekadar menjadi rujukan oleh HTML dalam pendefinisian style.

• CSS menggunakan kod2 yang tersusun untuk menetapkan style pda elemen HTML atau dapat

juga digunakan membuat style baru yang biasa disebut class.

• CSS dapat mengubah saiz teks, mengganti warna background pada sebuah halaman, atau dapat

pula mengubah warna border pada tabel, dan masih banyak lagi yang dapat dilakukan oleh CSS.

• membenarkan pereka sesebuah laman web menentukan jumlah style yang akan digunakan dalam

laman web.

terbahagi kepada 3 iaitu:

• Embedded style sheets

• style sheets yang hanya digunakan pada helaian yang telah ditetapkan sahaja.

Dikenali juga sebagai internal style sheets.

• External style sheets

• style sheets yang digunakan dalam beberapa helaian dan saling berpaut antara

satu sama lain

• Inline style sheets

• Kurang digunakan kerana tidak ‘power’ dan hanya boleh digunakan untuk 1

muka sahaja.

•

Membina CSS

1. Klik menu File New Page or Web.

2. Kemudian pada jendela tugas Page or Web klik Page Templates.

3. Klik pada Style Sheets tab, klik pada jenis CSS yang hendak dibina , kemudian klik OK

Rajah 5.29



Aplikasi Borang (Form Wizard)

Anda tentulah pernah mengisi borang web seperti menyemak peti mel, membeli belah, memberi

maklum balas dalam buku tetamu. Semua aktiviti ini memerlukan anda untuk memasukkan maklumat ke

dalam borang web.

Untuk mencipta borang anda perlu memilih menu Insert >Form. Elemen-elemen yang

membentuk suatu borang dipanggil medan. Medan boleh jadi sebuah kotak teks yang membolehkan anda

menaip komen-komen. Maklumat yang dimasukkan oleh pengunjung ke dalam medan dipanggil nilai.

Untuk pengendalian borang, pelayan anda memerlukan sokongan untuk ASP (Active Server

Pages). ASP merupakan teknologi yang membolehkan halaman web untuk berinteraksi dengan sesuatu

program. Anda tidak perlu bimbang tentang penciptaan kod untuk penyediaan pangkalan data anda dalam

talian. FrontPage akan mengendalikan tugas-tugas yang paling sukar untuk anda.

Bagaimana Menggunakan Wizard Halaman Borang

Untuk membina borang manggunakan wizard ikut langkah-langkah berikut.

Langkah 1: Pilih halaman baru

Langkah 2: Pilih wizard Halaman Borang

- Klik Page Templates

- Pilih Form Page Wizard

- Klik OK

Rajah 5.20

Langkah 3: Mulakan Wizard

- Klik Next untuk mulakan wizard

- Kemudian klik Add untuk memasukkan soalan-soalan bagi borang anda

Langkah 4: Pilih jenis borang

- Klik Add

- Kemudian pilih jenis borang yang lazim seperti maklumat produk, personal dsb



Rajah 5.21

Langkah 5: Pilih soalan

- Pilih butir-butir yang dikehendaki daripada pengguna

- Klik Next bila selesai

Rajah 5.22

Langkah 6: Selesaikan borang

Jika terdapat maklumat tambahan yang ingin dikumpulkan, ulangi langkah 4 hingga 6. Borang baru akan

dipaparkan.



Rajah 5.23

Bagaimana Menggunakan Borang Maklum Balas

Untuk membina borang ikut langkah-langkah berikut.

Langkah 1: Pilih halaman baru

Langkah 2: Pilih Borang Maklum Balas (Feetback Form)

- Klik Page Templates

- Pilih Feetback Form

- Klik OK

Langkah 3: Edit Teks Borang

Anda boleh mengedit teks yang terdapat dalam borang mengikut kesesuaian anda.

Rajah 5.24

Langkah 4: Hilangkan Elemen Borang

Anda juga boleh menghapuskan bahagian-bahagian borang yangtidak penting. Caranya, highlightkan

bahagian yang ingin dipadam, kemudian tekan delete.



BAB 6 : PANGKALAN DATA WEB

Penggunaan Pangkalan Data Web

Silberschatz et.al (1997) mentakrifkan World Wide Web sebagai sistem maklumat teragih yang berasaskan

teks hiper (hypertext). Kebanyakan tapak Web yang ada adalah berasaskan fail di mana setiap dokumen

Web disimpan dalam fail berbeza. Untuk tapak Web yang kecil, pendekatan ini adalah memadai.

Bagaimanapun untuk tapak Web besar, ini menyebabkan masalah pengurusan yang besar.

Pada peringkat awal, tapak Web hanya berbentuk statik. Kini, kebanyakan tapak Web menyimpan data

dinamik seperti maklumat jumlah stok dan harga stok. Untuk menyelenggarakan maklumat sedemikian

dalam pangkalan data dan tapak Web berbeza adalah satu tugas yang besar. Oleh itu, kaedah membenarkan

pangkalan data dicapai terus dari Web semakin mendapat tempat sebagai cara pengurusan maklumat

Web atau kandungan dinamik. Storan maklumat Web di dalam pangkalan data dapat menyokong

penggunaan fail atau menggantikan penggunaan fail sama sekali.

Kaedah Data Access (Capaian Data)

DBMS merupakan perisian utk membina, mengubah & mencapai maklumat dalam pangkalan data.

– DBMS

• Membina pelbagai fail pangkalan data.

• Menambah dan mengubah data dalam fail.

• Menyusun rekod

• Mengenal pasti lokasi data dengan tepat.

Terdiri daripada:

– Kamus data- menerangkan struktur p. data

– Bahasa pertanyaan- utk capai maklumat & bahasa yang digunakan secara meluas ialah

SQL iaitu bahasa pertanyaan berstruktur

Perisian Popular:

• Microsoft Access

• dBASE III Plus

• FoxBASE Plus

• Oracle

• MS SQL Server

• SoftBASE

• Clipper

• Paradox

FrontPage menawarkan ciri baru yang membolehkan anda mencipta pangkalan data yang

berdasarkan web. Database Interface Wizard memudahkan tugas rumit ini. Dengan hanya beberapa klik

tetikus, anda dapat memasukkan mahupun mengedit maklumat ke dalam pangkalan data melalui laman

web.

Pangkalan data yang berasaskan web amat berguna kerana anda boleh mengemaskini rekod dari

sebarang tempat yang mempunyai akses internet. Walaubagaimanapun, perlu diingat bahawa anda

memerlukan pelayan yang menyokong ASP (Active Server Pages). Tidak semua pembekal khidmat web

menawarkan ciri ini.

ASP merupakan teknologi Microsoft, ia membolehkan halaman HTML berinteraksi dengan

program seperti pangkalan data. ASP boleh digunakan untuk mencipta halaman dinamik. Mempunyai

sambungan .asp



Untuk membina pangkalan data web, ikut langkah-langkah berikut:

Langkah 1: Mulakan web baru

New Page > Web > Web Site Template > Database Interface Wizard

Rajah 6.1

Langkah 2: Cipta Pangkalan Data Access

- Pilih Create a new Access database within your web

- Atau use a simple database connection

- Klik next

Rajah 6.2

Langkah 3: Namakan Pangkalan Data

Anda perlu memberikan nama bagi pangkalan data anda.Klik Next

Penting: Nama mestilah satu perkataan sahaja, tidak mengandungi ruang kosong/jarak.



Rajah 6.3

Langkah 4: Pilih Maklumat Yang Terkumpul

Anda akan mengedit jenis maklumat yang dikumpul oleh pangkalan data anda. Anda boleh menambah lajur

baru dengan menekan Add

Rajah 6.4

Langkah 5: Pilih halaman

Rajah 6.5

Anda boleh memilih apa yang akan dipaparkan pada halaman anda seperti Result Page, Submission Form,

Database Editor.

Langkah 6: Uji sambungan Pangkalan Data

Anda tidak boleh melihat kesan/hasil pangkalan data anda jika web anda ada pada cakera keras kecuali

komputer anda merupakan sebuah komputer pelayan/server. Untuk menguji anda perlulah terlebih dahulu

menerbitkan web. Cara: File > Publish Web > (pilih direktori) > Publish

Tambah lajur baru: Tel



Rajah 6.6 : Pangkalan data web yang telah dibina menggunakan wizard

Tabular Data Control (TDC)

Tabular Data Control adalah satu kawalan Microsoft ActiveX yang datang dengan versi IE4 . Kawalan ini

membenarkan laluan, paparan, dan jenis maklumat ASCII disimpan pada pelayan akhir, seperti pada .txt

fail. Dengan kata lain, ia mewujudkan "pangkalan data" fungsi bahagian pelayan tidak perlu untuk menulis

skrip seperti PHP dan mySQL. TDC menyediakann satu pangkalan data yang mudah!

TDC hanya didapati di IE 4 dan ke atas. Netscape memerlukan plug-in untuk menjalankan fungsi yang

sama.

Implementasi

ActiveX control dimulakan dengan menggunakan <OBJECT> tag. CLASSID (pengecam unik) untuk TDC

adalah

CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83

Untuk memulakan TDC adalah seperti berikut :

Sebarang objek , seperti aplet, mengendungi parameter. Parameter objek itu adalah ditentukan

menggunakan tag <PARAM>. TDC adalah sekitar 8 parameter.

DataURL: Direktori fail yang mengandungi data. Contoh "data.txt".

Use Header : Menetapkan samada baris pertama fail data itu harus digunakan sebagai nama

rujukan untuk field masing-masing . Jika penetapan adalah palsu, gunakan "Column1",

"Column2" adalah sebaliknya. Nilai default adalah palsu.

TextQualifier: Menentukan pilihan aksara yang mengelilingi field.

FieldDelim: Menentukan aksara itu sudah diasingkan setiap menurunkan fail data. Aksara default

adalah koma (,). Contoh, menimbangkan satu fail data di mana data:

*SomeName*|*SomeAge*|*SomeSex*. Di sini, pemisah field digunakan adalah '|' dan '*' adalah

penerang teks.

RowDelim: Menentukan samada aksara digunakan untuk menandakan pada akhir setiap lajur

data. Akasara default adalah newline (NL).

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-

0080C7055A83">

...

...

...

</OBJECT>



Berikut adalah contoh lengkap:

<OBJECT ID="SomeID" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-

0080C7055A83">

<PARAM NAME="DataURL" VALUE="YourDataFile.txt">

<PARAM NAME="UseHeader" VALUE="TRUE">

<PARAM NAME="TextQualifier" VALUE="~">

<PARAM NAME="FieldDelim" VALUE="|">

</OBJECT>

Nama parameter bukanlah kes sensitif. Parameter TextQualifier adalah optional, digunakan untuk

membezakan data.

Contoh mudah:

data1.txt:

name|age

~Premshree Pillai~|~19~

HTML page

<OBJECT ID="data1" CLASSID="CLSID:333C7BC4-460F-11D0-BC04-

0080C7055A83">

<PARAM NAME="DataURL" VALUE="data1.txt">

<PARAM NAME="UseHeader" VALUE="TRUE">

<PARAM NAME="TextQualifier" VALUE="~">

<PARAM NAME="FieldDelim" VALUE="|">

</OBJECT>

<SPAN DATASRC="#data1" DATAFLD="name"></SPAN>

<SPAN DATASRC="#data1" DATAFLD="age"></SPAN>

Paparan output adalah : Premshree 19

Data Source Object (DSO)

Data Source Object (DSO) adalah satu objek Microsoft ActiveX tertanam dalam satu halaman Web. Ia

adalah proses yang dipanggil data binding, di mana satu kawalan ActiveX berhubung secara langsung

dengan halaman Web satu lagi, atau dengan satu sumber data XML luar.

DSO juga hanya boleh didapati pada Internet Explorer 4 dan ke atas. Pembangun laman web biasanya

mewujudkan DSO nya sendiri. Sebagai contoh, satu animasi radar cuaca daripada Pusat Taufan Negara

boleh dipamerkan secara beterusan pada satu laman web Jabatan Pertahanan Awam tanpa perlu

dihubungkan atau diklik pada Pusat Taufan Negara.

DSO juga digunakan untuk tujuan Spyware. Jenis pencerobohan menunjukkan Spyware mengesan

program sebagai eksplotasi DSO. Sesetengah spyware sukar untuk dibasmi, dan jika ia berjaya

dibuang biasanya ia akan dipulangkan.

Menambah DSO pada halaman

Apabila pembangun web telah mengenalpasti data yang hendak dipamerkan pada halaman mukasurat,

langkah yang seterusnya adalah memilih DSO yang membekalkan data dan untuk menambah rujukan

kepada DSO halaman tersebut.



Tambahan kepada pembekal data, sumber lain yang berguna adalah MSDN Web.

DSO boleh dilaksanakan sebagai satu kawalan Microsoft ActiveX atau seperti satu Java aplet. Unsur

objek adalah satu kawalan ActiveX pada halaman; unsur aplet adalah satu aplet Java pada halaman.

Secara umum, pembangun Web boleh meniru OBJECT atau APPLET sesuai dan mengubah suai

pengistiharaan parameter yang digunakan supaya unsur-unsur pada halaman boleh terikat dengan

sumber data, perisytiharan itu harus meliputi sifat id.

Recordset

Recordset adalah struktur data yang mengandungi rekod pangkalan data, dan samada berasaskan jadual

ataupun query daripada jadual.

Konsepnya adalah biasa untuk platform-platform, terutamanya Microsoft Data Access Objects (DAO)

dan ActiveX Data Objects (ADO). Objek Recordset mengandungi satu koleksi Fields dan satu koleksi

Properties. Pada bila-bila masa, Recordset merujuk kepada satu ciri sahaja dalam rekod semasa.



BAB 7 : PENERBITAN LAMAN WEB

File Transfer Protocol (FTP)

Merupakan satu kaedah piawai memindahkan fail melalui internet.

Adalah cara termudah untuk bertukar-tukar fail antara komputer-komputer dalam internet

Digunakan untuk memuat naik dan memuat turun laman-laman web, perisian-perisian, klip video

dan muzik digital serta berkongsi fail dengan pengguna lain.

Terdapat dua jenis FTP, iaitu:

– Pelayan FTP terkawal : memberikan servis berbayar dan pengguna perlu mempunyai

akaun.

– Pelayan FTP Anonymous : servis percuma.

peluncur web yang seringkali digunakan untuk upload laman web

internet explorer

netscape navigator

hos laman web percuma

http://www.geocities.com

http://www.tripod.com

http://www.angelfire.com

http://www.webjump.com

kelemahan sekiranya menggunakan hos laman web percuma

Tiada servis sokongan atau servis sokongan yang lembap

Hos laman web yang tidak stabil

Alamat laman web yang terlalu panjang dan tidak berkaitan dengan jenis laman web anda

Tidak menyokong skrip CGI

keburukan menempatkan iklan penaja di laman web

i. Sepanduk iklan penaja kadangkala terlalu besar dan memakan masa yang lama untuk dipaparkan

ii. Penaja meletakkan link rantaian dari laman web anda ke laman web mereka

iii. Iklan yang dipaparkan kadangkala tidak sesuai dengan laman web

Disked-based

Laman web yang boleh dijana daripada semua jenis computer atau pun drive tertentu

Server-based

Laman web yang boleh dijana daripada web server

FTP accessible

Capaian secara fizikal (physical access)

Capaian secara fizikal di dalam internet merupakan kemudahan kelengkapan komputer kepada

guru dan pelajar untuk mencapai internet berserta dengan komponen seperti e-mel, gopher,

kumpulan perbincangan elektronik, pemindahan fail, Archie, Veronica, WAIS, dan WWW.

Capaian secara bijaksana (intellectual access).

Iaitu kebolehan dan kemahiran menjelajah dunia siber dengan penuh berakhlaq dan bijaksana.



MENERBITKAN LAMAN

Merupakan penyalinan halaman dan tapak web sistem komputer setempat ke pelayan web yang

mempunyai hubungan langsung kepada internet atau intranet.

Untuk menerbitkan web anda, ikut langkah-langkah berikut:

1. Pastikan komputer mempunyai sambungan ke internet

2. Dalam FrontPage, pilih menu File dan kemudian pilih Publish Web. Kotak dialog Publish

Destination akan dipaparkan seperti di bawah

Rajah 7.1

3. Masukkan alamat pelayan web yangakan muat naik web anda dalam kotak Enter Publish

Destination (samada menggunakan alamat HTTP atau FTP). Kemudian klik OK

4. Kotak Publish Web dipaparkan. Kotak ini mempamerkan kesemua fail yang terdapat dalam

web anda, Sekiranya web anda pernah diterbitkan ke alamat yang dinyatakan, anda boleh

melihat semula fail-fail yang tersimpan dalam pelayan web dengan mengklik butang Show.

nota pembangunan laman web

Education