Objektif:
Di akhir Bab ini, anda akan:
1. Mengetahui elemen-elemen dalam sesuatu
dokumen web,
2. Berkebolehan untuk memasuk dan mengedit
elemen-elemen asas dalam dokumen web,
3. Berkebolehan untuk menyediakan capaian
kepada dokumen web, URL dan e-mel, dan
Penyediaan Laman Web
Pengenalan
Dalam era ledakan teknologi maklumat, pengetahuan serta kemahiran individu berkaitan dengan komputer adalah satu keperluan. Di samping itu, penggunaan alam siber untuk urusan mencari maklumat, komunikasi dan perniagaan dan pelbagai urusan lain semakin meningkat. Justeru itu
kemahiran tentang penyediaan laman web adalah penting untuk persediaan diri untuk keperluan hari ini dan masa depan. Penyediaan laman web adalah mudah dan menarik, tambahan pula dengan bantuan pelbagai perisian berasaskan Windows yang boleh digunakan. Di antara perisian yang boleh
digunakan adalah Microsoft FrontPage, Netscape Composer, Adobe PageMill dan Dreamweaver. Penggunaan perisian ini jauh lebih mudah berbanding dengan penggunaan asas HTML (HyperText Markup Language) kerana in menggunakan persekitaran What-You-See-Is-What-You-Get (WYSIWYG). Bab ini akan hanya menggunakan MS FrontPage dalam pembinaan dokumen web.
Istilah Penting Sebelum meninjau lebih jauh tentang pembinaan laman web, anda perlu memahami beberapa istilah yang berkaitan.
Pelayan
Dokumen web
Laman web
Capaian
Muat turun
Muat naik
Elemen dalam Dokumen WebCapaian
Muat turun
Muat naik
Matlamat penyediaan laman web, antara lain, adalah untuk berkongsi maklumat dengan pengunjung yang melayari internet. Teks merupakan elemen asas yang perlu ada dalam
setiap dokumen web. Selain daripada teks, elemen-elemen lain juga boleh dimasukkan untuk menjadikan sesuatu dokumen web itu lebih menarik. Di antara elemen yang boleh dimasukkan adalah:
• Grafik
• Jadual
• Bingkai (frame)
• Bunyi
• Capaian
• Buku pelawat
• Counter
• Teks marquee
Rekabentuk Laman Web
Laman web yang juga dipanggil sebagai homepage merupakan laman utama yang diakses oleh pengunjung internet. Apabila anda merancang membina laman web, anda perlu mengambil
kira apakah matlamat laman web dan kumpulan sasar. Sediakan struktur direktori dan storyboard supaya dapat membantu anda dalam pembinaan laman web. Pada kebiasaannya, anda tidak akan memasukkan semua maklumat dalam laman web tersebut. Sebaliknya, anda akan menyediakan capaian kepada dokumen web tambahan serta capaian ke laman web lain bagi membolehkan pelayar
Laman web contoh
Antara ciri rekabentuk laman web yang baik ialah paparan yang simple dan mudah dilayari dan capaian yang berfungsi. Gambarajah di bawah merupakan satu contoh laman web. Organisasi
Fail dan Folder
Pada kebiasaannya, semua fail laman web yang disediakan disimpan dalam folder My Webs. Folder ini adalah sub-folder kepada folder My Documents. Jika fail dokumen web yang anda sediakan tidak banyak, anda boleh simpan semua fail ini dalam folder ini. Namun, jika anda mempunyai fail yang banyak, ada lebih baik anda menyimpan fail-fail ini dalam sub-folder yang berlainan. Dengan cara ini organisasi fail anda akan lebih sistematik dan mudah dicari. Sebagai contoh, anda mengajar 3 subjek. Anda mempunyai bilangan fail yang banyak bagi setiap subjek. Anda boleh membuat 4 sub-folder dalam My Webs; satu bagi setiap subjek dan sub-folder keempat untuk memuatkan fail grafik anda.
Folder dan sub-folder
Subjek 2
Subjek 3
Grafik
My
Webs Subjek 1
Berkenalan dengan Ikon terpilih
Pada bar alatan FrontPage terdapat banyak ikon untuk memudahkan proses pembinaan laman Web. Berikut adalah pengenalan kepada ikon terpilih:
Create new
Open
Save
Search
Publish
Toggle Pane
Preview in Browser
Spelling
Cut
Copy
Web Component
Insert Table
Insert Picture
Drawing
Insert Hyperlink
Latihan Penyediaan Laman Web
Dalam latihan ini anda akan menyediakan homepage dan tiga dokumen web. Buat permulaan, anda akan membina homepage seperti gambarajah laman web contoh. Sila buka perisian MS FrontPage. Untuk membina laman web baru, sila klik pada butang . Hasilnya anda akan dapat
paparan window berikut:
Paparan Window FrontPage
Dalam latihan ini anda akan mempelajari kaedah:
· Memasuk, edit dan formatteks
· Memasuk dan format jadual
· Memasuk dan format grafik
· Save dokumen web
· Memasukkan teks marquee
· Meyediakan capaian dokumen, URL dan e-mel
· Publish laman web
· Memasukkan Jadual (Table)
Teknik menukar saiz kolum jadual
1. Format Jadual
Anda akan memformat kedua-dua jadual di atas dengan:
Mengecilkan kolum kiri jadual pertama. Mengecilkan kolum kiri dan melaraskan saiz dua kolum berikutnya Menghilangkan border kedua-dua jadual
Anda akan memformat kedua-dua jadual di atas dengan:
Mengecilkan kolum kiri jadual pertama. Mengecilkan kolum kiri dan melaraskan saiz dua kolum berikutnya Menghilangkan border kedua-dua jadual
1. Menukar saiz kolum
· Letakkan kursor di atas garis pembahagi jadual pertama dan tekan butang kiri tetikus. Anda akan dapat seperti paparan di bawah,
· Drag ke kiri untuk mengecilkan saiz kolum kiri.
· Gunakan kaedah yang sama untuk menukarkan saiz kolum jadua kedua sehingga mendapat seperti paparan di bawah.
2. Hilangkan border
· Letakkan kursor diatas jadual pertama dan tekan butang kanan tetikus (untuk
mendapatkan menu pop-up)
mendapatkan menu pop-up)
· Pada menu pop-up, pilih option Table Properties Seterusnya:
· Pada kotak dialog Table Properties, tukarkan saiz border kepada 0
· Tekan butang OK. Kotak dialog Table Properties 10 Paparan jadual tanpa border
· Ulangi langkah yang sama untuk menghilangkan border jadual kedua Paparan jadual anda yang terhasil adalah seperti berikut:
Memasukkan teks
1. Letakkan titik sisipan pada sel berkenaan dan taipkan teks seperti dalam ambarajah
2. Ulangi prosedur hingga semua tek dimasukkan dalam sel yang berkenaan.
Nota: Tekan kekunci Shift + ENTER untuk mengasingkan barisan teks Hasil dari prosedur di atas, anda akan dapat paparanberikut: Paparan teks yang dimasukkan
Save (simpan)Dokumen Untuk mempastikan dokumen Web yang telah anda
bangunkan tidak hilang sekiranya berlaku sebarang masalah teknikal, simpan dokumen ini dalam folder My Webs. Berikan nama dokumen anda sebagai index.html
2. Ulangi prosedur hingga semua tek dimasukkan dalam sel yang berkenaan.
Nota: Tekan kekunci Shift + ENTER untuk mengasingkan barisan teks Hasil dari prosedur di atas, anda akan dapat paparanberikut: Paparan teks yang dimasukkan
Save (simpan)Dokumen Untuk mempastikan dokumen Web yang telah anda
bangunkan tidak hilang sekiranya berlaku sebarang masalah teknikal, simpan dokumen ini dalam folder My Webs. Berikan nama dokumen anda sebagai index.html
Langkah:
1. Klik butang Save pada bar alatan,
2. Taip nama file sebagai “index.html” dalam ruang di kotak dialog di bawah. lik butang SAVE.
Edit dan Format Teks
Untuk menambahkan lagi keberkesanan dan penampilan laman Web, anda boleh mengedit teks sekiranya terdapat kesilapan ejaan atau untuk menambah teks baru. Selain itu anda juga boleh memformat teks. Pemformatan teks yang akan digunakan dalam latihan ini, antara lain termasuk:
1. Klik butang Save pada bar alatan,
2. Taip nama file sebagai “index.html” dalam ruang di kotak dialog di bawah. lik butang SAVE.
Edit dan Format Teks
Untuk menambahkan lagi keberkesanan dan penampilan laman Web, anda boleh mengedit teks sekiranya terdapat kesilapan ejaan atau untuk menambah teks baru. Selain itu anda juga boleh memformat teks. Pemformatan teks yang akan digunakan dalam latihan ini, antara lain termasuk:
· Penjajaran teks
· Tukar saiz teks
· Tukar warna teks
1. Penjajaran Teks
Anda akan menjajarkan ketengah dua baris teks terakhir.
Langkah:
Anda akan menjajarkan ketengah dua baris teks terakhir.
Langkah:
· Blok teks berkenaan
· Klik butang Penjajaran Center Teknik penjajaran teks Paparan teks yang telah dijajarkan
· Sila gunakan prosedur yang sama untu menjajarkan ketengah teks berikut:
Capaian terpilih:
Universiti Putra Malaysia
Fakulti Anda
Akbar Online
Semakan terkini: tarikh
Sila hantarkan komen anda dengan klik ikon di bawah:
Hasil dari prosedur di atas, setelah disimpan (save)
semula dokumen, hasil preview adalah seperti berikut:
2. Tukar Fon
Tukarkan fon teks “Laman web” dan “Nama anda” mengikut cita rasa anda.
Capaian terpilih:
Universiti Putra Malaysia
Fakulti Anda
Akbar Online
Semakan terkini: tarikh
Sila hantarkan komen anda dengan klik ikon di bawah:
Hasil dari prosedur di atas, setelah disimpan (save)
semula dokumen, hasil preview adalah seperti berikut:
2. Tukar Fon
Tukarkan fon teks “Laman web” dan “Nama anda” mengikut cita rasa anda.
Langkah:
· Blok teks “Laman web”
· Klik butang dan klik fon pilihan anda
Teknik pemilihan fon
·
Ulangi kaedah yang sama untuk memilih fon untuk teks “Nama Anda”
Ulangi kaedah yang sama untuk memilih fon untuk teks “Nama Anda”
3. Tukar Saiz Teks
Tukarkan saiz teks “Laman web” dan “Nama anda”
mengikut cita rasa anda.
Langkah:
· Blok teks “Laman web”
· Klik butang dan klik saiz teks pilihan anda.
4. Tukarkan saiz teks berikut kepada 10 menggunakan
prosedur di atas:
5. Tukar Warna Teks
Untuk menceriakan lagi penampilan laman Web, anda
boleh mewarnakan teks dalam laman web anda.
Dalam latihan ini anda akan menukarkan warna teks
berikut:
4. Tukarkan saiz teks berikut kepada 10 menggunakan
prosedur di atas:
5. Tukar Warna Teks
Untuk menceriakan lagi penampilan laman Web, anda
boleh mewarnakan teks dalam laman web anda.
Dalam latihan ini anda akan menukarkan warna teks
berikut:
· Laman web
· Nama anda
· Kandungan
· Capaian pilihan
Langkah:
Langkah:
· Blok teks Laman web
· Klik butang . Panel pilihan warna akan terpapar.
· Pilih warna yang sesuai atau mengikut citarasa anda.
· Gunakan prosedur yang sama untuk mewarnakan teks yang lain.
Format Grafik
Anda boleh memformat grafik yang telah anda masukkan dalam dokumen anda. Anda boleh menukar saiz dan menjajar grafik untuk enyesuaikannya dengan kandungan lain dalam laman web anda..
1. Menukar Saiz Grafik
Anda akan mengecikan saiz grafik logo UPM dan email.
Langkah
1. Menukar Saiz Grafik
Anda akan mengecikan saiz grafik logo UPM dan email.
Langkah
· Klik atas grafik logo UPM. Grafik tersebut akan dihighlight
· Letakkan kursor di salah satu penjuru segiempatseperti berikut:
· Heret ke dalam untuk mengecilkan saiz grafik.
· Gunakan prosedur yang sama untuk mengecilkan saiz grafik email.gif
2. Menyalin dan Menampal Grafik
Anda akan menyalin grafik ball.gif ke sebelum teks berikut:
Anda akan menyalin grafik ball.gif ke sebelum teks berikut:
· Penglibatan professional
· Koleksi gambar
· Kalendar online
Langkah:
· Blok grafik ball.gif dan ruang kosong seperti paparan di bawah and klik butang kanan tetikus untuk mempaparkan menu pop-up, C Klik pilihan Copy,
· Klik titik sisipan di pangkal teks “Penglibatan profesional” dan tekan butang Ctrl + V untuk menampal,
· Ulang prosedur di atas untuk dua lagi teks.
· Paparan grafik setelah disalin dan ditampal
Menyediakan Teks Marquee
Teks marquee adalah teks yang bergerak dalam laman Web. Teks marquee ini hanya dapat dilihat sekiranya anda menggunakan elayar Internet Explorer. Anda akan menyediakan teks marquee “Selamat Datang”
Langkah:
1. Letakkan titik sisipan satu baris di atas jadual pertama.
2. Klik menu Insert | Web Component
Kotak dialog Marquee Properties
Pada kotak dialog berikut, klik Marquee dan klik butang
Finish
Taipkan teks dalam kotak teks seperti di bawah dan klik
butang OK.
Hasilnya adalah seperti di paparan berikut:
Create Dokumen Web
Anda mempunyai banyak maklumat/data yang ingin dikongsikan melalui laman Web anda. Biasanya maklumat ini disimpan dalam bentuk dokumen Web yang tersimpan dalam server anda. Anda akan create tiga dokumen Web seperti yang tersenarai dalam bahagian Kandungan laman Web yang telah dibangunkan. Tiga dokumen Web tersebut adalah:
Teks marquee adalah teks yang bergerak dalam laman Web. Teks marquee ini hanya dapat dilihat sekiranya anda menggunakan elayar Internet Explorer. Anda akan menyediakan teks marquee “Selamat Datang”
Langkah:
1. Letakkan titik sisipan satu baris di atas jadual pertama.
2. Klik menu Insert | Web Component
Kotak dialog Marquee Properties
Pada kotak dialog berikut, klik Marquee dan klik butang
Finish
Taipkan teks dalam kotak teks seperti di bawah dan klik
butang OK.
Hasilnya adalah seperti di paparan berikut:
Create Dokumen Web
Anda mempunyai banyak maklumat/data yang ingin dikongsikan melalui laman Web anda. Biasanya maklumat ini disimpan dalam bentuk dokumen Web yang tersimpan dalam server anda. Anda akan create tiga dokumen Web seperti yang tersenarai dalam bahagian Kandungan laman Web yang telah dibangunkan. Tiga dokumen Web tersebut adalah:
· Profil diri
· Penglibatan professional
· Koleksi gambar
Langkah:
1. Klik butang untuk create dokumen Web baru,
2. Taipkan tajuk dan masukkan grafik construction.gif seperti dalam paparan di bawah,
3. Save dokumen sebagai “Profil diri.htm”
Nota:
Semua fail grafik yang diperlukan telah disalin atau
dimuat turun ke folder Grafik dalam latihan internet.
23
Dokumen Web profil diri
Dokumen Web Penglibatan Profesional
Dokumen Web koleksi gambar
4. Ulangi prosedur di atas untuk create dua lagi dokumen
Web. Paparan bagi kedua-dua dokumen Web adalah
seperti berikut:
24
Bentuk Capaian - Dokumen
Latihan ini akan memberi peluang kepada anda untuk
menyediakan capaian kepada tiga dokumen Web yang
berkaitan.
Langkah:
1. Blok teks Profil diri
2. Klik butang pada bar alatan. Kotak dialog berikut
akan terpapar.
3. Klik pada fail Profil diri dan klik butang OK
4. Dengan menggunakan prosedur di atas, sediakan
capaian kepada dua lagi tajuk berikut:
Langkah:
1. Klik butang untuk create dokumen Web baru,
2. Taipkan tajuk dan masukkan grafik construction.gif seperti dalam paparan di bawah,
3. Save dokumen sebagai “Profil diri.htm”
Nota:
Semua fail grafik yang diperlukan telah disalin atau
dimuat turun ke folder Grafik dalam latihan internet.
23
Dokumen Web profil diri
Dokumen Web Penglibatan Profesional
Dokumen Web koleksi gambar
4. Ulangi prosedur di atas untuk create dua lagi dokumen
Web. Paparan bagi kedua-dua dokumen Web adalah
seperti berikut:
24
Bentuk Capaian - Dokumen
Latihan ini akan memberi peluang kepada anda untuk
menyediakan capaian kepada tiga dokumen Web yang
berkaitan.
Langkah:
1. Blok teks Profil diri
2. Klik butang pada bar alatan. Kotak dialog berikut
akan terpapar.
3. Klik pada fail Profil diri dan klik butang OK
4. Dengan menggunakan prosedur di atas, sediakan
capaian kepada dua lagi tajuk berikut:
· Penglibatan professional
· Koleksi gambar
Membentuk Capaian:
Laman Web Lain (URL)
Melalui homepage, anda juga boleh linkkan ke laman Web lain yang berkaitan. Anda akan membina link untuk laman Web berikut:
Laman Web Lain (URL)
Melalui homepage, anda juga boleh linkkan ke laman Web lain yang berkaitan. Anda akan membina link untuk laman Web berikut:
· Fakulti anda
· Akbar Online
Langkah:
1. Blok teks “Universiti Putra Malaysia”
2. Klik butang pada bar alatan
3. Pada kotak dialog Insert Hyperlink, taip:
“http://www.upm.edu.my”
4. Tekan butang OK
5. Dengan prosedur yang sama, buatkan capaian kepada dua laman web dengan menggunakan URL berikut: Fakulti anda http://www.......upm.edu.my
Akbar online http://www.malaysiakini.com
Membentuk Capaian: E-Mail Untuk memudahkan pengunjung laman Web anda member maklum balas, anda boleh menyediakan link kepada e-mail anda. Dengan cara ini, pengunjung hanya perlu klik pada link
yang disediakan dan boleh terus menaip mesej dan seterusnya menghantar mesej tersebut.
Langkah:
· Klik pada grafik email.gif
· Klik butang
· Pada kotak dialog Insert Hyperlink, klik pada butang Email
Address seperti di bawah.
Kotak dialog insert hyperlink
Address seperti di bawah.
Kotak dialog insert hyperlink
· Taipkan alamat emel anda dalam kotak di bawah. Klik butang OK. Kotak dialog hyperlink - email
Paparan laman web yang dihasilkan
Paparan laman web yang anda bangunkan adalah seperti berikut:
Paparan laman web yang dihasilkan
Paparan laman web yang anda bangunkan adalah seperti berikut:
Publish Laman Web
Laman Web atau Homepej yang anda sediakan hanya boleh dinikmati di komputer anda sahaja. Pengunjung internet lain tidak dapat capai. Sekiranya anda berminat untuk berkongsi laman Web anda dengan pengunjung lain, anda perlu publish laman Web ini. Anda ingin publish homepej? Bagi anda yang bekerja dengan organisasi atau institusi yang mempunyai server, homepej anda boleh dipublish di server organisasi anda. Anda perlu mendapatkan userID dan kata
kunci daripada pegawai yang bertanggung jawab.
Bagi anda yang tidak mempunyai kemudahan di atas, anda tidak perlu berasa gusar. Terdapat banyak tapak Web yang menyediakan tapak percuma untuk anda publish homepej anda. Biasanya anda boleh memohon secara online untuk mendapatkan tapak percuma ini. Dan proses untuk publish adalah mudah, anda hanya perlu mengikut arahan langkahdemi- langkah sehingga proses publish selesai. Berikut diberikan beberapa tapak Web yang menyediakan tapak percuma:
Laman Web atau Homepej yang anda sediakan hanya boleh dinikmati di komputer anda sahaja. Pengunjung internet lain tidak dapat capai. Sekiranya anda berminat untuk berkongsi laman Web anda dengan pengunjung lain, anda perlu publish laman Web ini. Anda ingin publish homepej? Bagi anda yang bekerja dengan organisasi atau institusi yang mempunyai server, homepej anda boleh dipublish di server organisasi anda. Anda perlu mendapatkan userID dan kata
kunci daripada pegawai yang bertanggung jawab.
Bagi anda yang tidak mempunyai kemudahan di atas, anda tidak perlu berasa gusar. Terdapat banyak tapak Web yang menyediakan tapak percuma untuk anda publish homepej anda. Biasanya anda boleh memohon secara online untuk mendapatkan tapak percuma ini. Dan proses untuk publish adalah mudah, anda hanya perlu mengikut arahan langkahdemi- langkah sehingga proses publish selesai. Berikut diberikan beberapa tapak Web yang menyediakan tapak percuma:
· Fortunecity
· Geocities
· Tripod
· Xoom
Anda boleh dapatkan link ke tapak Web percuma di atas dengan mengunjungi laman Web berikut:
http://ace.upm.edu.my/~bas Sebagai staf UPM, anda sepatutnya mempunyai akaun e-mel dan kata kunci. Anda boleh menggunakan akaun e-mel sebagai userID dan kata kunci untuk akses kepada tapak web di server fakulti atau bahagian di UPM. Dalam latihan ini anda akan memuat naik fail laman Web, dokumen Web dan fail grafik yang anda gunakan dalam laman
web ke server. Anda akan menggunakan perisian WS-FTP proses muat naik. Untuk membolehkan anda menggunakan perisian ini, akan akan belajar 1) membuat setting dan 2) cara mengguna perisian. Setting perisian WS-FTP Anda telah belajar bagaimana untuk muat turun dan install perisian WS-FTP. Sebelum anda boleh mengguna perisian ini anda perlu membuat setting kepada perisian bagi membolehkan anda mengakses server akulti/bahagian anda.
http://ace.upm.edu.my/~bas Sebagai staf UPM, anda sepatutnya mempunyai akaun e-mel dan kata kunci. Anda boleh menggunakan akaun e-mel sebagai userID dan kata kunci untuk akses kepada tapak web di server fakulti atau bahagian di UPM. Dalam latihan ini anda akan memuat naik fail laman Web, dokumen Web dan fail grafik yang anda gunakan dalam laman
web ke server. Anda akan menggunakan perisian WS-FTP proses muat naik. Untuk membolehkan anda menggunakan perisian ini, akan akan belajar 1) membuat setting dan 2) cara mengguna perisian. Setting perisian WS-FTP Anda telah belajar bagaimana untuk muat turun dan install perisian WS-FTP. Sebelum anda boleh mengguna perisian ini anda perlu membuat setting kepada perisian bagi membolehkan anda mengakses server akulti/bahagian anda.
Langkah:
1. Buka perisian WS-FTP, anda akan mendapat paparan di bawah,
2. Klik butang NEW, paparan berikut akan terpapar
3. Taipkan maklumat berikut dalam kotak dialog Session
Perperties
Profile Name: Nama anda
User ID: UserID anda
Password: Password anda
4. Tanda (T)pada option Save Pwd dan klik utang OK
Cara guna WS-FTP
Apabila anda klik butang OK dalam latihan sebelum ini, anda akan mendapat paparan window berikut:
· Paparan window WS-FTP Bahagian kiri (local system) mempaparkan komputer anda, manakala bahagian kanan (Remote Site)
· Terlebih dahulu anda perlu create satu direktori public_html. Direktori ini akan menempatkan sub-direktori serta fail-fail
laman web, dokumen web dan grafik.
1. Create direktori public-html
laman web, dokumen web dan grafik.
1. Create direktori public-html
Langkah
· Klik butang MkDir
C Pada kotak dialog Input, taipkan public_html
C Pada kotak dialog Input, taipkan public_html
· Klik butang OK
· Anda akan dapat paparan window berikut, di mana direktori public_html terpapar di bahagian kanan.
· Sekarang anda boleh mula muat naik fail-faial ke folder anda di server.
Tidak ada komentar:
Posting Komentar