Cara2 Create Website

<="" p="" style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-
style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height:

normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space:
normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><="" p="">

<HTML>

Laman Web

I n t e r n e t

Membina laman web secara percuma (Jika anda telah mempunyai komputer dan
Windows).
Semasa membina laman web, talian Internet tidak diperlukan.
Bagaimana meletakkan laman web di internet.
Mengiklankan laman web.
Dari penulis
Penulis terdorong untuk menulis buku ini setelah mendapati kurangnya buku-buku mengenai
pembinaan laman web dalam Bahasa Melayu dalam pasaran.
Sudah tentu ramai individu, guru-guru sekolah Melayu, murid-murid sekolah Melayu, pelajar
institusi dan kolej pengajian awam dan swasta aliran Melayu yang berminat mengenai laman
web dan dahagakanpanduan untuk membina laman web.
Melalui buku ini penulis mahu berkongsi pengetahuan dan pengalaman dalam pembinaan laman
web yang asas.
Penulis cuba membuat pendekatan yang mudah dalam memperkenalkan cara membina laman
web. Tajuk-tajuk dalam buku ini disusun dengan harapan pembaca akan belajar mengikut
susunan tajuk, hingga apabila semua tajuk telah dilalui, pembaca akan mempunyai gambaran
bagaimana untuk membina laman web sendiri.
Penulis ingin meyakinkan pembaca bahawa membina laman web adalah mudah. Untuk
menghasilkan laman web, tidak memerlukan pengetahuan bahasa Inggeris yang mendalam.
Anda tidak perlukan kredit dalam bahasa Inggeris dalam peperiksaan SPM untuk berjaya
membina laman web.
Bacalah buku ini hingga habis sambil cuba membina laman web anda sendiri. Anda tidak akan
mengambil masa yang lama untuk membina satu laman web yang ringkas, mungkin 15
minit sahaja.
Ketidakpastian atau kurang keyakinan adalah halangan yang anda akan hadapi. Setelah anda
berjaya membina laman web yang pertama, segalanya akan tiba-tiba menjadi mudah.
Pada masa akan datang, kebolehan membina laman web akan meningkatkan nilai anda, anak
anda dan cucu cicit anda dalam pasaran pekerjaan. Juga boleh meningkatkan nilai perniagaan
anda dan majikan anda. Oleh kerana ianya mudah, ia harus dikuasai secepat mungkin.
Selamat membaca dan mencuba.
Pendahuluan
Dizaman internet ini, kebolehan membina laman web sangat berguna, untuk diri sendiri,
keluarga, sekolah, komuniti, syarikat dan negara. Laman Web menjadi antaramuka (interface)
untuk sesiapa saja samada individu atau syarikat atau organisasi menyalurkan pandangan,
maklumat, pengiklanan, pembelajaran, hiburan dan sebagainya untuk dicapai oleh sesiapa juga di
dunia dalam masa beberapa saat sahaja.
Sebaik saja kita membuka program Internet Explorer atau Netscape Communicator di komputer
kita, apa yang kita lihat di skrin ialah satu laman web. Seterusnya apabila kita melayari internet
menggunakan program-program pelayar internet itu, apa yang sebenarnya kita lihat di skrin ialah
laman web demi laman web. Kita menulis alamat satu-satu laman web (URL) pada kotak URL
di Internet Explorer, contohnya "http:/www.jaring.my", kemudian kita klik butang 'Go', kita akan
dapat melihat laman web Jaring (jika kita telah 'online'). Berbagai perkara terpapar dalam laman
web itu. Laman Web itu mungkin mengandungi gambar-gambar atau grafik dimana apabila kita
klik pada satu gambar, laman web lain akan muncul. Semuanya laman web, laman web, laman
web..... Tentu seronok kalau kita boleh membina laman web kita sendiri dan ramai orang dari
seluruh dunia boleh melihatnya. Kita Boleh!!
Susahkah membina laman web? Dengan apa kita boleh membina laman web ? Bacalah
seterusnya...
Mengapa mahu bina laman web
Salah satu atau beberapa perkara berikut mungkin menjadi sebab mengapa kita perlu
mempelajari cara membina laman web.
1. Laman Web adalah antaramuka kepada internet. Melaluinya kita dapat melihat dan
mendengar apa-apa yang ada dalam internet, atau untuk kita memperlihatkan dan
memperdengarkan apa-apa yang kita ada untuk komuniti internet.
2. Bila kita melayari internet, kita sebenarnya melayari laman web demi laman web. Sampai
bila kita cuma boleh melayari tetapi kita tidak punya apa-apa untuk dilayari ? Buatlah laman
web supaya kita dilayari.
3. Dengan mempunyai laman web, kita dapat memaparkan idea, pengetahuan dan maklumat
mengenai apa sahaja untuk di baca atau dikongsi oleh semua orang dalam dunia ini.
4. Jika kita seorang pelajar atau pekerja, kebolehan membina laman web boleh
menaikkan nilai kita di pasaran pekerjaan.
5. Olehkerana laman web boleh dikaitkan terus dengan sistem e-mel, laman web menjadi salah
satu cara berkomunikasi yang berkesan.
Susahkah membina laman web
Jawapannya, mudah. Kita tuliskan saja begini :
<HTML></HTML>
Kita tuliskan ia dalam satu fail Notepad dan menyimpannya dengan nama yang berakhir dengan
".htm" atau ".html" seperti "Laman Websaya.htm". Dengan ini kita telah membina satu laman
web, walaupun ia tidak mengandungi apa-apa isi, hanya laman web kosong.
Untuk makluman, <HTML> dan </HTML> adalah contoh dua penanda (tag) yang digunakan
untuk membina laman web. Laman Web dibina dengan menuliskan tag-tag. Dalam buku ini, tag-
tag akan kita tuliskan dalam program Notepad.
Selain dari dua tag itu, terdapat berpuluh-puluh lagi (bukan beratus-ratus) tag yang kita boleh
gunakan. Buku ini akan menunjukkan sebahagian tag-tag berkenaan. Untuk makluman, tag-tag
berkenaan mudah dihafal kerana ia terdiri dari sukukata bahasa Inggeris yang mudah. Selain dari
itu, tidak ada salahnya kita membina laman web dengan buku ini atau buku rujukan lain kita
letakkan disebelah kita untuk dibuat rujukan bila perlu.
Untuk makluman kita lagi, semua tag-tag yang digunakan untuk membina laman web adalah
dinamakan 'Bahasa HTML' (HTML language).
Sekarang ini, versi yang terbaru bagi bahasa ini ialah versi 4 (dipanggil HTML 4). Dalam buku
ini, versi HTML yang digunakan ialah versi 3.2. Semua tag-tag dalam versi 3.2 ada dalam versi
4. Hanya terdapat beberapa tag-tag tambahan sahaja dalam versi 4. Jadi, mempelajari bahasa
HTML versi 3.2 adalah mencukupi untuk kita membina laman web.
Belum perlu jalinan internet
Semasa membina laman web, komputer kita tidak perlu mempunyai jalinan internet (internet
connection). Semasa mencuba laman web juga kita tidak perlu mempunyai jalinan internet.
Buatlah secanggih-canggih laman web dalam komputer kita dan kita tidak perlu jalinan internet.
Hanya apabila kita mahu orang lain membaca laman web kita, barulah kita perlu mempunyai
jalinan internet. Apa yang kita perlu semasa membina dan mencuba laman web ialah program
Notepad dan Internet Explorer atau program pelayar internet (internet browser) lain.
Apa yang kita perlukan
Apa yang kita perlukan untuk membina laman web ? Dalam buku ini kita akan menggunakan
program Notepad untuk membina laman web dan mencuba (test) dengan program Internet
Explorer yang berjalan (run) dalam Microsoft Windows 95. Selain itu kita juga perlu satu
program grafik (kita boleh mulakan dengan Microsoft Paint) untuk membina gambar yang
ringkas.
Secara ringkas, inilah yang kita perlukan :
1. Komputer.
2. Windows 95/98.
3. Program Notepad.
4. Program Internet Explorer.
5. Program Microsoft Paint.
Semuanya sudah ada dalam komputer kita. Kita tidak perlu berbelanja satu sen pun lagi. Kita
hanya perlu sedikit masa dan usaha.
Membina laman web dengan Notepad
Sebenarnya terdapat bepuluh-puluh program dalam dunia ini yang boleh kita gunakan untuk
membina laman web. Contohnya, kita boleh gunakan Microsoft FrontPage, Frontpage Express,
Cutepage, HotDog dan lain-lain lagi. Saban bulan, program-program baru akan muncul di
pasaran. Kita boleh mengetahuinya dengan membaca majalah-majalah komputer, berita-berita
komputer atau mencari di internet.
Notepad dipilih dalam buku ini kerana ia percuma. Ia sudah tersedia dalam komputer kita,
datang bersama Windows 95. Jadi kita tidak perlu meng'instal' Notepad. Menggunakan notepad
juga pantas, memudahkan kita mengawal persembahan, senang melihat previu. Menggunakan
Notepad juga akan memaksa kita untuk mahir dan menguasai bahasa HTML.
Walaupun program-program lain dapat menghasilkan laman web secara visual tetapi sebenarnya
mereka juga menghasilkan kod-kod yang menggunakan bahasa HTML. Apabila kita tidak
puashati dengan laman web yang terhasil melalui program-program ini, kita akan terpaksa
berpatah balik kepada bahasa HTML untuk membuat pindaan kepada yang lebih memuaskan
hati.
Contoh kegunaan laman web untuk individu...
1. Memaparkan maklumat dan perkembangan diri kita dan keluarga kita.
2. Menyampaikan idea-idea kita untuk tatapan manusia di dunia.
3. Memperkenalkan barang jualan atau perkhidmatan yang kita tawarkan.
4. Memasukkan laman web kita dalam intranet syarikat kita bertugas (Jika ia diterima oleh
pengurusan syarikat).
Kepada siapa buku ini ditujukan
Buku ini ditujukan terutamanya untuk :
1. Individu berpendidikan Melayu yang mempunyai perasaan ingin tahu dan berminat
mengenai laman web.
2. Para pelajar sekolah rendah dan menengah dari aliran Melayu.
3. Para pelajar kolej swasta dari aliran Melayu.
4. Para pelajar institusi pengajian tinggi awam dan swasta yang bukan dari jurusan IT dan
berminat untuk membina web page sendiri.
5. Para guru sekolah rendah dan menengah dari sekolah aliran Melayu yang berminat.
6. Pelajar semester pertama jurusan IT aliran Melayu di institusi pengajian tinggi awam dan
swasta.
Untuk makluman, terdapat berpuluh-puluh buku mengenai membina laman web dalam bahasa
Inggeris dan Cina dalam pasaran buku negara kita, tetapi sangat kurang buku begini terdapat
dalam kedai-kedai buku. Diharapkan buku ini dapat membantu petuju-petuju diatas.
Bagaimanapun, lain-lain individu tidak dihalang untuk menggunakan buku ini. Mungkin kerana
isinya yang mudah difahami, ia boleh menjadi asas belajar laman web yang berguna.
Membina Laman Web paling ringkas
Laman Web paling ringkas ialah sebuah laman web kosong. Kita hanya perlu menulis 2
baris tag (kod) berikut untuk membina laman web kosong :
<HTML>
</HTML>
Kita boleh gunakan huruf kecil, jika kita mahu. Begini :
<html>
</html>
Sebenarnya kita boleh cantumkan kedua-dua baris itu menjadi satu, seperti berikut :
<html></html>
Awasi tanda-tanda <,> dan /.
Kita tuliskan kod diatas dalam satu fail Notepad. Ikuti langkah berikut:
1. Buka program Notepad (Biasanya program ini boleh kita capai apabila kita klik 'Start /
Programs / Accessories / Notepad').

2. Dalam ruang Notepad, tuliskan kod yang dinyatakan diatas. Berikut ialah contoh ruang
Notepad yang mengandungi kod tersebut.

3. Simpan (save) fail itu (klik menu 'File / Save') dan beri nama kepada fail berkenaan.
Pastikan nama fail berpenambahan ".htm" atau ".html" (mana-mana satu pun boleh), contohnya
"Muka1.htm" atau "Muka1.html".

Pastikan anda memilih 'Text Documents' pada kotak "Save as type'. Ini akan menjadikan apa-
apa yang kita tulis dalam Notepad disimpan sebagai teks sahaja, tanpa apa-apa format pada
mana-mana perkataan dalam fail itu. Satu fail 'htm' atau 'html' ialah fail teks semata-mata.
Hasilnya mungkin kelihatan seperti berikut (Perhatikan tajuk kepala Notepad) :

4. Tutup fail ini dan juga program Notepad (klik menu 'File / Exit').
5. Buka program Microsoft Internet Explorer (Biasanya program ini kita boleh capai apabila
kita klik 'Start / Programs / Internet Explorer'.

6. Pada kotak 'Address', tuliskan alamat penuh dimana fail 'Muka1.htm' itu berada. Dalam buku
ini, fail itu terletak dalam folder berikut :
D:\Projek Buku\membina web page\Muka1.htm.
Anda mungkin meletakkannya di lain folder dalam komputer anda. Jika demikian, tuliskan
alamat yang berkenaan.
Berikut ialah contoh kotak 'Address' yang telah diisi dengan alamat fail 'htm'.

7. Selepas menulis alamat di kotak 'Address', ketuk sekali kekunci 'Enter' di kibod. Kita akan
lihat satu laman web yang kosong seperti gambar diatas (tiada isi apa-apa) kerana kita memang
belum mengisinya...
8. Tutup Internet Explorer (jika anda mahu) (Klik menu 'File / Close' pada Internet Explorer).
Dalam buku ini kita akan membuka (menayangkan) fail laman web (.htm) menggunakan Internet
Explorer. Internet Explorer adalah salah satu program yang dipanggil 'pelayar web'. Antara
pelayar web lain ialah 'Netscape Communicator'. Semua pelayar web berguna untuk membuka
dan menayangkan laman web.
Begitulah mudahnya membina satu laman web. Kita hanya perlukan program Notepad untuk
menulis dua baris kod dan program Internet Explorer untuk menayangkan kod berkenaan.
Kita boleh ulangi langkah membuka dan menutup laman web menggunakan Internet Explorer
untuk memuaskan hati kita bahawa kita telah berjaya membina satu laman web, walaupun
kosong.
Kita juga boleh membuka Notepad semula untuk membuka fail laman web
dan melihat semula kod yang telah kita tulis. Ini boleh dilakukan dengan menu 'File / Open'
dalam Notepad, kemudian cari fail 'Muka1.htm.', kemudian klik OK. Kita akan lihat semula kod
yang kita tuliskan.
Semasa menulis kod, jangan tertinggal tanda-tanda <, > dan / serta pastikan kedudukannnya
dengan betul. Ejaan 'html' juga hendaklah betul. Jika tidak, hasil yang anda lihat melalui Internet
Explorer tidak seperti yang anda harapkan.
Membuat pindaan
Setelah kita membuat laman web yang kosong, sudah tentu kita mahu mengisinya dengan bahan-
bahan tulisan, grafik dan sebagainya. Pindaan-pindaan tidak dapat dielakkan.
Kita boleh membuat pindaan pada fail 'htm' menggunakan Notepad pada bila-bila masa. Tentu
pada takat ini kita memikirkan bahawa untuk melakukan pindaan kita perlu melakukan siri
langkah-langkah berikut :
1. Buka fail 'htm' dengan Notepad.
2. Buat pindaan.
3. Simpan fail.
4. Tutup Notepad.
5. Buka Internet Explorer.
6. Tulis alamat fail pada kotak 'Address'.
7. Ketuk kekunci 'Enter' dikibod.
8. Lihat laman web yang terpapar.
9. Tutup Internet Explorer.
Sebenarnya, kita tidak perlu membuka dan menutup Notepad dan Internet Explorer tiap-tiap kali
kita mahu membuat pindaan dan melihat hasil pindaan. Kita boleh membuka kedua-
dua program itu danmembiarkan kedua-duanya terbuka sambil membuat pindaan dan
melihat hasil pindaan.
Apabila kita membuka kedua-duanya, kita boleh mengaktifkan (memfokus atau menumpu)
mana-mana program yang kita mahu dengan lebih cepat kerana ia terdapat
di 'Taskbar' Windows 95. Berikut ialah contoh kedua-dua program yang terdapat di Taskbar.

Apabila kita mahu membuat pindaan pada kod, kita klik pada ikon fail Notepad yang terdapat di
Taskbar. Fail itu akan aktif di skrin. Kita buatlah pindaan. Selepas membuat pindaan, jangan lupa
simpan pindaan itu. Untuk melihat hasilnya, kita klik pula pada ikon fail Internet Explorer yang
terdapat di taskbar. Fail itu pula akan aktif di skrin. Kemudian kita klik butang 'Refresh' yang
ada pada Internet Explorer.

Segala pindaan dalam fail Notepad tadi akan di lihat hasilnya dalam Internet Explorer.
Begitulah kita bertukar-tukar tumpu (focus) dari fail Notepad dengan Internet Explorer
sepanjang kita membina laman web sehingga siap.
Awas, kita hendaklah membuka satu sahaja fail Notepad. Jika kita membuka fail Notepad yang
sama lebih dari sekali, kita akan dapati lebih dari satu fail Notepad di skrin. Akibatnya kita boleh
keliru di fail Notepad manakah pindaan harus dibuat. Pindaan pada satu fail Notepad tidak akan
mengemaskinikan fail Notepad yang lain, walaupun ia sebenarnya fail yang sama.
Untuk pengetahuan tambahan, Jika kita klik kanan tetikus pada mana-mana bahagian Internet
Explorer, kita akan melihat satu menu pop-up :

Pilih menu 'View Source'. Fail Notepad bagi laman web yang dipaparkan akan terbuka. Jadi, ini
adalah cara yang lebih mudah untuk mencapai fail Notepad bagi laman web kita. Kita hanya
perlu membuka fail laman web menggunakan Internet Explorer, kemudian klik kanan pada
Internet Explorer. Kita akan perolehi fail Notepad yang mengandungi kod-kod berkaitan.
Cara mudah membuka fail Notepad ini boleh menyebabkan kita tersasar membuka lebih dari
satu fail Notepad bagi laman web yang sama.
Untuk memeriksa samada kita telah membuka lebih dari satu fail Notepad bagi satu laman web,
lihat pada taskbar. Jika ada lebih dari satu, tutup semuanya kecuali satu sahaja, iaitu fail yang
terkini. Ingat, kita hanya perlu buka satu saja fail Notepad bagi laman web kita.
Satu lagi maklumat berguna ialah, apabila kita telah satu kali menulis alamat laman web pada
kotak 'Address' pada Internet Explorer, alamat itu akan tertinggal disitu. Apabila kita telah
menutup Internet Explorer, dan dilain kali kita membukanya semula, alamat laman web kita akan
terdapat disitu. Kita klik pada bucu kanan kotak itu untuk mendapatkan senarai alamat laman
web, kemudian pilihlah alamat laman web kita. Kemudian ketuk kekunci 'Enter' dikibod. Dengan
ini kita tidak perlu menulis semula alamat laman web yang panjang itu.
Berikut ialah contoh gambarajah apabila kita klik pada bucu kanan kotak 'Address' untuk
mendapatkan senarai alamat laman web sebelum kita klik pada mana-mana alamat yang
berkenaan.

Memasukkan kepala tajuk laman web
Dalam bab terdahulu iaitu 'Membina laman web paling ringkas', kita dapati kepala tajuk laman
web ialah 'D:\Projek Buku\Membina web page\Muka1.htm'.

Ini merupakan kombinasi nama fail dan direktori (folder) dimana fail ini berada. Sudah tentu kita
tidak gemar ini menjadi tajuk kepala laman web kita.
Untuk memasukkan kepala tajuk yang tertentu kepada laman web, contohnya 'Muka 1', kita
gunakan tag <HEAD> dan <TITLE>. HEAD bermaksud kepala, sementara TITLE
bermakna tajuk. Untuk makluman, tag <HEAD> menandakan permulaan kepala laman web
sementara tag <TITLE> menandakan permulaan tajuk kepala laman web. Tag </HEAD>
mengakhiri tag <HEAD> sementara tag </TITLE> mengakhiri tag <TITLE>. Lihat contoh
penggunaannya seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
</HTML>
Dalam Notepad, ia mungkin kelihatan seperti berikut :

Pinda fail Notepad laman web kita kepada baris-baris seperti diatas. Simpan (save) dan lihat
hasilnya dari Internet Explorer.
Hasilnya dalam Internet Explorer akan kelihatan seperti berikut :

Perhatikan tajuk kepala laman web telah bertukar kepada 'Muka 1'.
Tag </HEAD> adalah tanda penamat kepada tag <HEAD> iaitu tanda berakhirnya kepala laman
web.
Tag </TITLE> adalah tanda penamat kepada tag <TITLE> iaitu tanda berakhirnya tajuk kepala
laman web.
Kita akan jumpa banyak lagi tag-tag (kod-kod) selepas ini dalam bab-bab yang seterusnya. Tiap-
tiap tag mempunyai fungsi (kegunaan) tersendiri.
Sila ambil perhatian dan ingat bahawa tiap-tiap tag ada tanda pemula dan tanda penamatnya.
Setakat ini, kita tahu penamat tanda <HTML> ialah </HTML>, sementara penamat tanda
<HEAD> ialah </HEAD> dan penamat tanda <TITLE> ialah </TITLE>. Semua penamat
menggunakan tanda / .
Tag <TITLE> dan </TITLE> seharusnya berada diantara tag <HEAD> dan </HEAD>. Ini
kerana, secara logiknya, kita membina kepala dahulu, barulah dibubuh tajuk, bukan sebaliknya.
Begitu juga, tag <HEAD> dan </HEAD> berada diantara tag <HTML> dan </HTML>, kerana
kepala laman web berada didalam laman web, bukan laman web berada dalam kepalanya!!
Sentiasalah memikirkan logik apabila kita meletakkan kod-kod kita untuk mengelakkan dari
sering melakukan kesilapan.
Oleh kerana tag <HTML> dan </HTML> adalah laman web itu sendiri, ini bermakna semua tag-
tag lain (kita akan pelajari nanti) mesti berada diantara tag-tag ini. Tag <HTML> akan sentiasa
diletakkan di kedudukan paling atas dalam fail Notepad dan tag </HTML> sentiasa diletakkan
dalam kedudukan terakhir dalam fail Notepad.
Satu lagi perkara, semua tag-tag boleh ditulis dalam huruf kecil, seperti <head>, </head> ,
<title> dan sebagainya, mengikut kegemaran kita.
Selain itu, tag-tag boleh ditulis bersambungan begini :
<HTML><HEAD><TITLE>Muka 1</TITLE></HEAD></HTML>
atau begini (dengan huruf kecil):
<html><head><title>Muka 1</title></head></html>
Terpulang kepada kita stail mana yang kita gemar atau yang mudah kita baca.
Kita boleh tukarkan perkataan "Muka 1" kepada perkataan-perkataan lain. Apa-apa perkataan
yang berada diantara tag <TITLE> dan </TITLE> akan menjadi tajuk kepala laman web.
Bagaimanapun ingat bahawa kedua-dua tag pula mesti berada dalam tag <HEAD> dan
</HEAD>. Tag <HEAD> dan </HEAD> pula mesti berada dalam tag <HTML> dan </HTML>.
Semasa menulis kod, jangan tertinggal tanda-tanda <, > dan / serta pastikan kedudukannnya
dengan betul. Ejaan-ejaan kod juga hendaklah betul. Jika tidak, hasil yang anda lihat melalui
Internet Explorer tidak seperti yang anda harapkan.
Membina dan mengendali badan laman web
Kita telah membina rangka laman web dengan tag <HTML> dan </HTML>. Kita juga telah
membina kepala laman web dengan <HEAD> dan </HEAD> dan telah
memasukkan tajuk kepala laman web dalam tag <TITLE> dan </TITLE>. Tetapi, kita belum
membina badan laman web.
Badan laman web ialah segala bahagian dibawah kepala laman web. Untuk membina badan
laman web, kita gunakan tag <BODY> sebagai tanda pemula dan tag </BODY> sebagai tanda
penamat. Kita letakkan tag ini selepas tag </HEAD> (selepas kepala laman web) dan sebelum
tag </HTML> (sebelum tamat rangka laman web). Logiknya, badan diletakkan dibawah kepala
dan diatas kaki (andainya </HTML> dianggap sebagai kaki).
Pinda fail Notepad kita supaya isinya menjadi seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Perhatikan kita telah memasukkan tag-tag <BODY> dan </BODY>. Awasi kedudukannya.
Kita boleh menulisnya bersambungan begini :
<HTML><HEAD><TITLE>Muka 1</TITLE></HEAD><BODY></BODY></HTML>
atau menggunakan huruf kecil, begini :
<html><head><title>Muka 1</title></head><body></body></html>
Perhatikan kedudukan tag <BODY> dan </BODY>.
Didalam badan laman weblah kita akan memasukkan apa-apa tulisan atau grafik, iaitu kita akan
masukkan perkataan-perkataan dan gambar diantara tag-tag <BODY> dan </BODY>.
Semasa kita membina laman web kosong diawal buku ini, kita belum menulis kod <BODY> dan
</BODY> tetapi nampaknya laman web sudah mempunyai badan. Sebenarnya badan belum
ujud. Nampak macam ada, tapi sebenarnya belum ada. Hanya setelah kita menulis tag <BODY>
dan </BODY> barulah badan laman web sebenar-benarnya ujud.
Apabila kita memasukkan tag <BODY> dan </BODY>, kemudian kita cuba melihat kesannya
menggunakan Internet Explorer, kita tidak akan dapat melihat apa-apa kesan.
Bagaimanapun, memasukkan tag <BODY> dan </BODY> sangat penting kerana diantaranyalah
kita akan memasukkan tulisan dan gambar (dengan menggunakan tag-tag lain yang dituliskan
diantara tag-tag <BODY> dan </BODY>).
Berikut ialah contoh laman web yang telah dimasukkan tag <BODY> dan </BODY>. Kita tidak
akan nampak apa-apa perubahan.

Dalam fail Notepad, kodnya ialah seperti berikut :

Memasuk dan mengendali perkataan dalam
badan laman web
Apa-apa perkataan yang kita mahu ia kelihatan dalam laman web (bila fail htm dibuka dengan
Internet Explorer), perkataan itu mestilah dimasukkan diantara tag <BODY> dan </BODY> iaitu
dalam badan laman web. Logiknya, selepas kita membina badan laman web barulah kita
mempunyai tempat untuk menulis.
Apa-apa yang kita tuliskan diantara tag <BODY> dan </BODY> dalam fail laman web Notepad
akan dipaparkan oleh Internet Explorer.
Katakan kita hendak memasukkan perkataan "Saya pun boleh !" dalam laman web, supaya kita
atau pengguna yang membuka fail ".htm" itu boleh nampak perkataan tersebut bila ia dibuka dari
Internet Explorer.
Pinda fail Notepad kita supaya mengandungi kod-kod dan perkataan berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Saya pun boleh !!
</BODY>
</HTML>
Perhatikan, kita memasukkan perkataan 'Saya pun boleh !!' diantara tag <BODY> dan
</BODY>.
Hasilnya melalui Internet Explorer akan kelihatan seperti berikut :

Jadi, apa-apa perkataan (yang bukan tag atau kod HTML) yang kita tuliskan diantara tag
<BODY> dan </BODY> akan dipaparkan oleh Internet Explorer (atau pelayar laman web lain).
Perkataan lebih lebar dari lebar laman web
Jika kita menulis satu tulisan yang panjang dengan kod seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Adalah dimaklumkan, pada pagi 16 April 2000, anak lelaki saya, Murad, akan melangsungkan
akad nikah di mesjid Pekan Dodol. Majlis persandingan akan diadakan pada keesokan harinya di
rumah pengantin perempuan di alamat 24 Jalan Tirai 2, Pekan Dodol, Melaka.
</BODY>
</HTML>
Hasilnya akan kelihatan begini :

Perhatikan, perkataan dalam kod yang tidak dapat ditampung oleh Internet Explorer dalam satu
baris akan secara otomatik dimasukkan ke baris berikutnya.
Memaksa pembinaan baris
Jika kita tulis kod-kod begini (perhatikan ada 3 baris ayat dalam kod):
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Saya pun boleh !!
Dia lagi boleh !!
Sama-sama boleh !!
</BODY>
</HTML>

Seluruh perkataan akan dipaparkan oleh Internet Explorer dalam satu baris (selagi boleh
ditampung oleh lebar laman web), walaupun kita menulis kodnya dalam 3 baris.
Untuk membolehkan Internet Explorer memaparkan satu baris perkataan dalam barisnya yang
tersendiri, kita gunakan tag <BR> atau <br>. Kita letakkan tag ini sebelum perkataan yang kita
mahu ia berada pada baris baru. (Sila ambil perhatian bahawa tag <BR> tidak mempunyai
penamatnya (Tiada tag </BR>). BR adalah ringkasan bagi BREAK.
Berikut ialah contoh kod yang menggunakan tag <BR> :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Saya pun boleh !!
<BR>Dia lagi boleh !!
<BR>Sama-sama boleh !!
</BODY>
</HTML>
Asalkan kedudukan tag itu ialah sebelum perkataan yang berkenaan, ia boleh juga dituliskan
begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Saya pun boleh !!<BR>
Dia lagi boleh !!<BR>
Sama-sama boleh !!
</BODY>
</HTML>
atau begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Saya pun boleh !!
<BR>
Dia lagi boleh !!
<BR>
Sama-sama boleh !!
</BODY>
</HTML>
Hasilnya akan serupa seperti berikut :

Perhatikan Internet Explorer menayangkan 3 baris berkenaan.
Sebenarnya kita boleh menulis kod-kod bersimpang-siur begini :

Internet Explorer akan tetap boleh menayangkan laman web kita, asalkan kedudukan tiap-tiap
tag adalah betul. Jangan sampai ada tag pembuka tetapi tiada tag penamat (kecuali tag <BR> dan
beberapa tag lagi).
Jika kita menulis tag-tag bersimpang-siur seperti diatas, yang akan susah ialah kita sendiri kerana
sukar membaca strukturnya. Oleh itu elakkan dari menulis kod sebegini (tidak berstruktur).
Kita boleh menulis satu tulisan yang panjang dengan kod seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Selamat datang ke laman web Mamat (nama saya)
<BR>
<BR>
<BR>
<BR>
Dengan ini saya dengan sukacitanya menjemput semua saudara-mara dan rakan-rakan yang tidak
sempat saya hulurkan kad jemputan supaya hadir ke majlis persandingan.
<BR>
<BR>
Maklumat lain seperti peta akan saya kemaskini kemudian.
</BODY>
</HTML>
Hasilnya :

Mengelak pembinaan baris
Jika kita mahu menulis satu ayat yang panjang yang melebihi lebar laman web dan kita mahu ia
dipaparkan demikian, kita gunakan tag <NOBR>. Kita mulakan ayat berkenaan dengan tag
<NOBR>. NOBR bermaksud No BREAK. Untuk mengakhiri keadaan ini, kita tutup ayat itu
dengan tag <WBR>. WBR bermakna WITH BREAK. Berikut ialah satu contoh :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<NOBR>
<WBR>Sekarang sudah pulih.</NOBR>
</BODY>
</HTML>
Hasilnya :

Kedudukan perkataan
Secara otomatik, perkataan akan muncul bermula dari kiri laman web.
Kita boleh menjadikan perkataan kelihatan berada ditengah laman web (pandangan melintang)
dengan menggunakan tag <CENTER> dan </CENTER>. Mana-mana perkataan yang kita mahu
ia kelihatan berada ditengah laman web (secara pandangan melintang), kita masukkan perkataan
itu diantara tag <CENTER> dan </CENTER>. Contohnya ialah kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<CENTER>
<BR>
<BR>
</CENTER>
</BODY>
</HTML>
Hasilnya kelihatan seperti berikut :

Untuk membuat perkataan muncul tersisih dikanan laman web pula, kita gunakan tag <DIV
ALIGN="RIGHT"> dan </DIV>. 'DIV' ialah ringkasan dari 'divide' (bahagi). 'ALIGN' bermakna
sisihan. 'RIGHT' bermakna kanan.
Perkataan berkenaan kita tuliskan diantara tag <DIV ALIGN="RIGHT"> dan </DIV>. Perkataan
'ALIGN="RIGHT"' kita boleh tuliskan dalam huruf kecil atau huruf besar atau bercampur-
campur.
Berikut ialah contoh kod yang menggunakan tag DIV (singkatan bagi DIVIDE, bermakna
bahagi) :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<DIV ALIGN="RIGHT">
<BR>
<BR>
</DIV>
</BODY>
</HTML>

Jika kita mahu seluruh perkataan dalam laman web, bukan perkataan tertentu sahaja, tersisih di
tengah atau di kanan laman web, kita gunakan tag <STYLE> dan </STYLE>. Kedua-dua tag ini
kita letakkan diantara tag </TITLE> dan </HEAD>. Kemudian kita tuliskan ciri berikut diantara
tag <STYLE> dan </STYLE> :
BODY {text-align:"center"}
Contoh kod penuh :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
BODY {text-align:"center"}
</STYLE>
</HEAD>
<BODY>
<BR>
<BR>
</BODY>
</HTML>
Tag <STYLE> dan </STYLE> digunakan untuk membina stail keatas satu-satu tag. Dalam bab-
bab seterusnya kita akan jumpa cara-cara mengenakan stail keatas tag-tag lain.
Perhatikan perkataan BODY diantara tag <STYLE> dan </STYLE>. Ia tidak mengandungi
tanda < dan >. Ini menandakan bahawa kita mahu menetapkan satu stail keatas seluruh perkataan
dalam badan laman web. Ciri stail itu ialah 'text-align' (sisihan teks). Nilai ciri itu ialah 'center'
(tengah). Tanda : digunakan untuk memisahkan antara ciri dengan nilainya.
Nilai 'center' boleh diganti dengan 'left" (kiri), 'right' (kanan) atau 'justify'.
Menginden perkataan
Untuk menginden sekumpulan perkataan (mungkin terdiri dari beberapa baris), gunakan tag
<BLOCKQUOTE> dengan </BLOCKQUOTE>. Inden akan terbina dikiri dan kanan kumpulan
perkataan berkenaan.
Contoh hasil penggunaannya :

Kodnya ialah :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Perenggan ini sebelum BLOCKQUOTE di gunakan. Perhatikan ciri
perenggan berikut, iaitu ia terinden dikiri dan kanan serta
terpisah dengan perenggan diatas dan dibawahnya oleh satu baris
kosong
<BLOCKQUOTE>
Pisang emas dibawa belayar
<br>masak sebiji diatas peti
<br>sudah lama saya belajar
<br>baru sekarang saya mengerti
</BLOCKQUOTE>
Baris ini selepas BLOCKQUOTE di gunakan
</BODY>
</HTML>
Margin kiri badan laman web (LEFTMARGIN)
Kita boleh menentukan margin kiri badan laman web dengan memasukkan ciri
LEFTMARGIN="X" dalam tag <BODY> dimana X ialah suatu angka dalam unit pixel yang
menjadi margin. Contohnya :
<BODY LEFTMARGIN="40">
Dalam contoh kod diatas, kita menetapkan margin kiri badan laman web sebanyak 40 pixel.
Maknanya, semua ruang dalam jarak 40 pixel dari kiri laman web tidak akan dapat diisi. Semua
pengisian akan bermula dari jarak 40 pixel dari tepi kiri laman web. Jika kita tuliskan <BODY
LEFTMARGIN=0> semua pengisian akan bermula dari tepi kiri laman web.
Contoh kod penuh ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY LEFTMARGIN="50">
Margin kiri badan laman web ini ialah 50 pixel.
</BODY>
</HTML>
Lihat hasilnya :

Perhatikan jarak antara tepi kiri laman web dengan isi laman web.
Menentukan margin kanan badan laman web (RIGHTMARGIN)
Kita boleh menentukan margin kanan badan laman web dengan memasukkan ciri
RIGHTMARGIN="X" dalam tag <BODY> dimana X ialah suatu angka dalam unit pixel yang
<BODY RIGHTMARGIN="40">
Dalam contoh kod diatas, kita menetapkan margin kanan badan laman web sebanyak 40 pixel.
Maknanya, semua ruang dalam jarak 40 pixel dari kanan laman web tidak akan dapat diisi.
Semua pengisian akan bermula dari jarak 40 pixel dari tepi kanan laman web. Jika kita tuliskan
<BODY RIGHTMARGIN=0> semua pengisian akan bermula dari tepi kanan laman web.
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY RIGHTMARGIN="50">
Margin kanan badan laman web ini ialah 50 pixel.
</BODY>
</HTML>
Lihat hasilnya :

Menentukan margin sebelah atas badan laman web (TOPMARGIN)
Kita boleh menentukan margin sebelah atas badan laman web dengan memasukkan ciri
TOPMARGIN="X" dalam tag <BODY> dimana X ialah suatu angka dalam unit pixel yang
<BODY TOPMARGIN="40">
Dalam contoh kod diatas, kita menetapkan margin sebelah atas badan laman web sebanyak 40
pixel. Maknanya, semua ruang dalam jarak 40 pixel dari atas laman web tidak akan dapat diisi.
Semua pengisian akan bermula dari jarak 40 pixel dari atas laman web. Jika kita tuliskan
<BODY TOPMARGIN=0> semua pengisian akan bermula dari sempadan atas laman web.
Contoh kod :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY TOPMARGIN="50">
Margin atas badan laman web ini ialah 50 pixel.
</BODY>
</HTML>
Kesannya akan kelihatan seperti berikut :

Menentukan jenis huruf dalam badan laman
web
Kita boleh menentukan jenis huruf yang akan digunakan pada seluruh badan laman web. Jika
kita tidak menentukan jenis huruf, Internet Explorer akan menentukannya sendiri atau pengguna
laman web boleh menentukannya sendiri.
Untuk menentukan jenis huruf, kita tuliskan tag <BASEFONT> diikuti dengan ciri "face=X"
dimana X ialah nama jenis huruf (font family) yang kita mahu seperti Times, Arial, Courier,
Sans Serif dan sebagainya. Tag <BASEFONT> dan cirinya kita tuliskan selepas tag <BODY>
sebelum kita memasukkan apa-apa perkataan. Berikut ialah contoh kod :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<BASEFONT face="Arial">
Jenis huruf digunakan ialah Arial.
</BODY>
</HTML>
Hasilnya :

Menentukan saiz huruf dalam badan laman
web
Kita boleh menentukan saiz huruf yang akan digunakan pada seluruh badan laman web. Jika
kita tidak menentukan saiz huruf, Internet Explorer akan menentukannya sendiri atau pengguna
laman web boleh menentukannya sendiri.
Untuk menentukan saiz huruf, kita tuliskan tag <BASEFONT> diikuti dengan ciri "size=X"
dimana X ialah saiz yang kita mahu, iaitu suatu angka seperti 1, 2, 3 hngga 7. Tag
<BASEFONT> dan ciri size=X kita tuliskan selepas tag <BODY> sebelum kita memasukkan
apa-apa perkataan. Berikut ialah contoh kod :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<BASEFONT size="7">
Saiz huruf digunakan ialah 7.
</BODY>
</HTML>
Hasilnya kelihatan begini :

Menuliskan beberapa ciri dalam satu tag
<BASEFONT>
Kita boleh menuliskan lebih dari satu ciri dalam tag <BASEFONT>. Tuliskan sahaja ciri-ciri itu
dengan memisahkannya menggunakan satu huruf kosong. Kedudukan ciri yang mana hendak
didahulukan adalah tidak penting. Berikut ialah satu contoh:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<BASEFONT face="Times" size="7">
Saiz huruf digunakan ialah 7.
</BODY>
</HTML>
Menentukan jarak antara huruf
Kita boleh menentukan jarak antara huruf bagi seluruh isi badan laman web dengan
menggunakan ciri 'letter-spacing=X' dimana X ialah jarak yang kita mahu. X ialah suatu angka
dan unit ukuran seperti 1cm, 2px, dan sebagainya. Ciri ini kita tuliskan diantara tag <STYLE>
dan </STYLE>. Tag <STYLE> dan </STYLE> mesti diletakkan diantara tag </TITLE> dan
</HEAD>. Sebagai menandakan bahawa kita mahu mengenakan ciri ini keatas badan laman
web, kita tuliskan BODY diikuti dengan ciri itu. Perhatikan kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
BODY {letter-spacing:8px}
</STYLE>
</HEAD>
<BODY>
Jarak antara huruf dalam badan laman web ini ialah 8 pixel.
</BODY>
</HTML>
Hasilnya kelihatan begini :

Unit ukuran px ialah bagi pixel. Selain itu, kita boleh gunakan in (bagi inci) dan cm (bagi
sentimeter).
Perhatikan juga simbol { dikiri ciri dan } dikanan ciri. Simbol ini adalah tanda permulaan dan
tamat ciri dan nilainya.
Menetapkan saiz huruf baris-baris
Satu laman web seolah-olah terdiri daripada baris-baris dimana huruf-huruf atau perkataan atau
gambar akan muncul seperti dalam baris-baris. Contohnya :

Jika kita menulis satu ayat yang panjang hingga melebihi lebar satu laman web, baris baru akan
terbentuk dengan sendirinya untuk menampung baki perkataan. Contohnya :

Untuk memaksa satu baris baru terbina, tanpa menunggu laman web melakukannya sendiri, kita
gunakan tag <BR>. BR adalah ringkasan bagi BREAK.
Jika kita tidak mengisi apa-apa perkataan selepas tag <BR>, satu baris kosong akan terbentuk.
Contohnya ialah untuk membuat jarak antara baris.
Perhatikan contoh berikut :

Kod HTML bagi laman web diatas ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<BR>
Baris 2
<BR>
Baris 3
<BR>
Baris 4
<BR>
<BR>
<BR>
Baris 7
</BODY>
</HTML>
atau, boleh ditulis bersambungan begini :
<HTML><HEAD><TITLE>Muka 1</TITLE></HEAD><BODY><BR>Baris 2<BR>Baris
3<BR>Baris 4<BR><BR><BR>Baris 7</BODY></HTML>
Perhatikan bagaimana satu baris kosong dibentuk pada baris 1, 5 dan 6 kerana kita tidak menulis
apa-apa perkataan selepas tag <BR>.
Untuk makluman, tag <BR> tidak mempunyai penutup, iaitu tiada tag </BR>.
Jarak antara baris
Kita boleh mengubah jarak antara baris dengan menggunakan tag <STYLE> dan </STYLE>.
Kedua-dua tag ini hendaklah diletakkan diantara tag </TITLE> dan </HEAD>. Diantara kedua-
dua tag <STYLE> dan </STYLE> ini kita tuliskan perkataan BODY diikuti dengan ciri line-
height:X. Line-height bermakna 'tinggi baris'. X ialah angka bagi ketinggian yang kita mahu.
Kita menulis BODY sebagai tanda bahwa kita mahu mengenakan stail ketinggian baris pada
badan laman web. Contoh ialah seperti berikut :
<html>
<head>
<title>
Muka 1
</title>
<STYLE>
BODY {line-height:8pt}
</STYLE>
</head>
<body>
Baris 1
<br>
Baris 2
<br>
Baris 3
<br>
Baris 4
<br>
Baris 5
<br>
baris 6
<br>
Baris 7
</body>
</html>
Perhatikan perkataan BODY tanpa tanda < dan >. Perhatikan juga penggunaan tanda { dan }.
Apabila kita menetapkan stail keatas satu tag (dalam hal ini tag <BODY>) diantara tag
<STYLE> dan </STYLE>, kita buangkan tanda < dan > bagi tag itu. Tanda { dan } pula
mestilah digunakan bagi ciri berkenaan dan nilai ciri itu (dalam hal ini, cirinya ialah line-height
dan nilainya ialah 0.5). Tanda : digunakan untuk memisahkan ciri dengan nilainya. Perhatikan
juga perkataan 'pt'. Ini adalah unit ukuran bagi ciri 'line-height' dalam point (selain pt, kita boleh
gunakan in bagi inci, cm bagi sentimeter, pl bagi pixel dan x% bagi peratus dari ketinggian baris
sebelumnya).

Memasukkan komen atau nota dalam kod
Kadang-kadang kita mahu memasukkan komen atau nota dalam kod HTML kita. Nota ini tidak
akan dipaparkan oleh pelayar internet, jadi pengguna laman web kita tidak akan dapat melihat
nota ini. Kadang-kadang kita mahu berbuat demikian untuk memudahkan kita mengingati
apakah tujuan kita memasukkan kod tertentu, untuk kegunaan kita sendiri sebagai pembina
laman web. Ini juga memudahkan kita membuat pindaan kepada kod HTML berkenaan.
Kita gunakan tag  sebagai penamatnya.
Contoh kod penggunaannya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
Hasilnya :

Perhatikan, nota tidak dipaparkan. Jadi, apa-apa perkataan yang diletakkan diantara tag 



<Table border>
<TR VALIGN="bottom">
<TD ALIGN="left"><FONT FACE="Arial"><B>
NAMA</B></FONT></TD>
<TD ALIGN="center"><FONT FACE="Arial"><B>
UMUR</B></FONT></TD>
</TR>
<TD ALIGN="left"><FONT FACE="Arial">
ALI</FONT></TD>
<TD ALIGN="center"><FONT FACE="Arial">
10</FONT></TD>
</TR>
<TD ALIGN="left"><FONT FACE="Arial">
ABU</FONT></TD>
<TD ALIGN="center"><FONT FACE="Arial">
11</FONT></TD>
</TR>
</Table>



<FONT SIZE=-1><I>
<HR>
<BR>Last Updated on 6/7/2000
<BR>By Dolah
<FONT SIZE=+0></I>
</BODY>
</HTML>

Perhatikan bahawa proses ini tidak menghasilkan tabel yang baik. Walaupun kita telah membina
ruang yang agak besar dalam fail Excel, tabel yang terhasil dalam laman web menjadi sempit.
Itulah salah satu sebab kita mesti belajar bahasa HTML supaya kita dapat menghasilkan rupa
laman web seperti yang kita mahu.

Perhatikan juga, kod yang dihasilkan oleh Excel menjadi agak panjang. Ini kerana banyak baris-
baris yang tidak perlu telah dimasukkan dalam kod oleh Excel. Kita boleh menghasilkan laman
web yang sama dengan kod yang lebih pendek, dengan membuang baris-baris yang tidak perlu,
dan menyusun kod menjadi lebih kemas seperti berikut :

<HTML>
<HEAD>
<TITLE>ExcelJadiLaman Web</TITLE>
</HEAD>
<BODY bgcolor="white">
<H1><CENTER>Senarai nama</CENTER></H1>
Kawan saya masa kecil
<HR>
<font face="Arial">
<Table border=1>
<TR>
<TD><B>NAMA</B></TD>
<TD ALIGN="center"><B>UMUR</B></TD>
</TR>
<TR>
<TD>ALI</TD>
<TD ALIGN="center">10</TD>
</TR>
<TR>
<TD>ABU</TD>
<TD ALIGN="center">11</TD>
</TR>
</Table>
</font>
<FONT SIZE=-1>
<I>
<HR>
<BR>Last Updated on 6/7/2000
<BR>By Dolah
<FONT SIZE=+0>
</I>
</BODY>
</HTML>

Menghasilkan laman web dari fail Word
Kita boleh menghasilkan satu laman web dari satu fail Word yang kita ada. Ini tidak bermakna
fail Word berkenaan telah bertukar kepada laman web. Fail Word asal masih tetap ada. Laman
Web berkenaan adalah satu fail baru yang dihasilkan dari satu operasi keatas fail Word
berkenaan.
Katakan kita mempunyai satu fail Word seperti berikut :

Untuk menjadikan satu salinan fail ini sebagai laman web, ikuti langkah berikut :
5. Buka fail yang berkenaan (tentunya gunakan Word).
6. Pilih menu 'File / Save as HTML...'.
7. Dialog 'Save as HTML' seperti berikut akan muncul :

Pilih ruangan 'Save in' seperti biasa. Isi ruangan 'File name' seperti
biasa. Dalam ruang 'Save as type', pilih 'HTML Document (*.html;*htm;
*.htx)'. Klik 'Save'. Dialog akan hilang. Ini bermakna satu laman web telah
terbina dalam folder yang kita nyatakan di ruang 'Save in'.

Kita boleh lihat hasilnya dengan membuka fail ini menggunakan Internet
Explorer :

Kita klik kanan pada laman web ini, pilih 'View Source'. Kod bagi laman web
ini akan kelihatan seperti berikut :

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1252">
<META NAME="Generator" CONTENT="Microsoft Word 97">
<TITLE>Kawan semasa kecil</TITLE>
</HEAD>
<BODY>
<FONT FACE="Courier New" SIZE=2><P>Kawan semasa kecil</P>
</FONT>
<TABLE BORDER CELLSPACING=1 CELLPADDING=7 WIDTH=337>
<TR><TD WIDTH="52%" VALIGN="TOP">
<B><FONT FACE="Courier New" SIZE=2><P>NAMA</B></FONT></TD>
<TD WIDTH="48%" VALIGN="TOP">
<B><FONT FACE="Courier New" SIZE=2><P>UMUR</B></FONT></TD>
</TR>
<FONT FACE="Courier New" SIZE=2><P>Ali</FONT></TD>
<FONT FACE="Courier New" SIZE=2><P>10</FONT></TD>
</TR>
<FONT FACE="Courier New" SIZE=2><P>Abu</FONT></TD>
<FONT FACE="Courier New" SIZE=2><P>11</FONT></TD>
</TR>
</TABLE>
<FONT FACE="Courier New" SIZE=2></FONT></BODY>
</HTML>

Mungkin Word dapat menghasilkan laman web yang lebih baik dari Excel.
Bagaimanapun pengetahuan bahasa HTML adalah perlu untuk membolehkan kita
meminda laman web yang dihasilkan.

Menukar grafik bmp kepada gif atau jpg
Sebagaimana kita tahu, gambar-gambar atau grafik boleh dibuat dalam berbagai-bagai format
seperti bmp, wmf, jpg, gif, tga, tif, pcx, png dan sebagainya. Sesetengah program grafik hanya
boleh membuat grafik dalam satu format sahaja tetapi ada juga yang boleh membuat gambar
dalam beberapa format.
Jika kita membuat gambar dengan program Paint, contohnya, formatnya ialah bmp (bitmap).
Kebanyakan gambar adalah dalam format ini. Bagaimanapun, sejak kemunculan internet, format
gambar yang sesuai ialah gif dan jpg (atau jpeg). Format-format ini sesuai digunakan dalam
internet kerana gambar yang dihasilkan dalam format ini adalah berkali ganda lebih kecil saiznya
dibandingkan jika gambar yang serupa yang dihasilkan dalam format lain. Ia menjadikan gambar
kurang menggunakan ruang cakera, memudahkan dan mempercepatkannya dihantar melalui
jaringan internet. Bagaimanapun, jika kita mahu menggunakan gambar untuk kegunaan sendiri
dalam komputer sendiri, format bmp atau lain-lain boleh digunakan.
Jika kita mempunyai gambar yang mempunyai format bukan gif atau jpg, contohnya bmp, wmf
dan sebagainya, kita boleh menukarnya kepada format gif atau jpg dengan membuka fail gambar
itu menggunakan program yang boleh mengendali kedua-dua format. Program berkenaan,
contohnya, Microsoft Photo Editor, boleh membuka fail bmp dan kemudian menyimpannya
dalam format dalam format gif atau jpg.
Berikut ini kita akan menukar satu fail bmp bernama 'Dinosor.bmp' kepada format gif dengan
menggunakan program Microsoft Photo Editor.
Katakan fail 'Dinosor.bmp' dibina menggunakan program Microsoft Paint dan kelihatannya
seperti berikut :

Untuk menukarnya kepada format gif, mula-mula kita buka fail ini menggunakan program
Microsoft Photo Editor. Kemudian kita klik menu 'File/ Save As'.

Kita akan dapati bahawa Photo Editor boleh membina dan menyimpan gambar dalam pelbagai
format seperti bmp, gif, jpg, tif, png, pcx dan tga.
Oleh kerana kita hendak menyimpan gambar dalam format gif, pilih GIF dalam kotak 'Save as
type'. Klik butang 'Save'. Sekarang gambar berkenaan dalam format gif telah terbina. Gambar
asal dalam format bmp masih tetap ada. Kita dapati tiada perbezaan yang nyata dari segi kualiti
gambar antara gambar dalam format bmp dan gambar dalam format gif.
Bagaimanapun, kita akan dapati saiz asal Dinosor.bmp sebanyak 292kb telah berkurang menjadi
29kb sahaja apabila bertukar kepada Dinosor.gif. Pengurangan hampir 10 kali ganda.
Nota mengenai stail
Kita telah diperkenalkan dengan tag <STYLE> dan </STYLE> serta ciri STYLE dalam
beberapa bab sebelum ini. Bab ini mengandungi nota khusus mengenai tag dan ciri. Ia diharap
dapat memberi lebih pemahaman mengenai tag dan ciri berkenaan.
Kita telah pelajari, apabila kita menggunakan satu-satu tag HTML, contohnya <H1>, secara
otomatik, ciri-ciri isi tag ini seperti warna, saiz huruf, jenis huruf (font) yang tertentu akan
dikenakan. Sebagai pembina laman web, kita cuma menerima sahaja 'stail' yang telah
dikhususkan bagi tag ini. Stail ini dikhususkan atau ditentukan oleh pelayar web (Internet
Explorer dan lain-lainnya). Hampir semua tag-tag HTML akan menghasilkan stail yang khusus,
yang telah ditetapkan oleh pelayar web.
Kita boleh mengubah stail isi satu-satu tag dengan menggunakan ciri STYLE dalam tag
berkenaan.
Contohnya, untuk mengubah ciri isi satu perenggan, kita tuliskan ciri STYLE dalam tag <P>,
begini :
<P STYLE=font:12pt Times; color:blue; text-indent:1in; margin-right:1in; margin-left:1in>
Kod penuhnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Perhatikan bagaimana perenggan dibawah telah dikenakan stail tersendiri :
<BR>
<BR>
<P STYLE=font:8pt Times; color:blue; text-indent:1in; margin-left:1in ; margin-right:1in>
Mamat, No 66 Jalan Tampin, Seremban, 34000 Negeri Sembilan, Malaysia,
Asean, Asia Tenggara, Asia, Dunia.
</P>
Sekian
</BODY>
</HTML>
Hasilnya :

Dalam contoh ini, kita mengenakan stail kita sendiri keatas isi satu perenggan (<P>). Stail itu
ialah : Font bersaiz 8 digunakan, font jenis Times, warna perkataan dalam perenggan ialah biru,
inden kiri bagi perenggan ialah 1 inci dan margin kanan ialah 1 inci dan margin kiri ialah 1 inci.
Perhatikan kedudukan tanda-tanda : dan ; yang digunakan dalam ciri STYLE. Tanda ; digunakan
untuk mengasingkan item dalam ciri. Tanda : digunakan untuk menetapkan ciri bagi item.
Kita perhatikan, dengan menggunakan ciri STYLE, kita boleh mengumpulkan beberapa ciri
bagi satu-satu tag dalam satu tempat.
Contoh lain :
<H1 STYLE=font:45pt Times; color:brown>
Dalam contoh ini, kita akan mengenakan stail tertentu keatas isi tag <H1>. Stail itu ialah : Font
bersaiz 45 point, font jenis Times, warna perkataan dalam tag ialah coklat.
Lagi Contoh lain :
<BLOCKQUOTE STYLE=font:10pt Helvetica; color:black; background:yellow>
Dalam contoh ini, kita akan mengenakan stail tertentu keatas isi tag <BLOCKQUOTE>. Stail itu
ialah : Font bersaiz 10 point, font jenis Helvetica, warna perkataan dalam tag ialah hitam dan
warna latarbelakangnya ialah kuning.
Sila ambil perhatian bahawa tidak semua pelayar web menyokong ciri STYLE. Jika tidak
tersokong, apa-apa dalam ciri STYLE tidak akan dihiraukan oleh pelayar berkenaan, jadi kita
tidak akan dapat melihat kesan yang kita harapkan.
Dalam contoh-contoh diatas, kita mengenakan stail tertentu keatas kandungan satu-satu tag
sahaja. Jadi, jika dalam satu laman web terdapat 2 tag <P>, hanya tag <P> yang mengandungi
ciri STYLE sahaja akan dikenakan stail itu. Tag <P> yang tidak mengandungi ciri STYLE tidak
akan dikenakan apa-apa stail, hanya mengikut stail asal. Ini bermakna, kita boleh mengenakan
stail yang berbeza pada berbagai perenggan atau tag-tag lain.
Kita boleh menetapkan stail yang sama keatas isi semua tag tertentu yang ada dalam laman web.
Ini boleh dilakukan dengan menuliskan tag <STYLE> dan </STYLE>. Tag ini diletakkan
diantara tag </TITLE> dan <HEAD>.
Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
H1 {font:45pt Times; color:brown}
P {font:12pt Times; color:blue; text-indent:1in; margin-right:1in}
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Dalam contoh diatas, kita menetapkan stail bagi isi tag <P> dan isi tag <H1>. Bagi tag <H1>,
kita tetapkan supaya isinya sentiasa menggunakan font bersaiz 45 point jenis Times dan
warnanya coklat. Bagi tag <P> kita tetapkan supaya isinya sentiasa menggunakan font bersaiz 12
point jenis Times berwarna biru dan inden kiri 1 inci serta margin kanan 1 inci. Kesannya, semua
isi tag <H1> dan <P> dalam laman web akan mempunyai ciri-ciri ini. Jika terdapat lebih dari
satu tag <H1> dan <P> dalam laman web kita, semua isi tag-tag berkenaan akan mempunyai
ciri-ciri yang demikian.
Perhatikan bahawa dalam tag <STYLE>, apabila kita merujuk kepada satu tag lain, contohnya
tag <H1>, kita tidak menuliskan tanda < dan > tetapi menuliskan H1 sahaja. Cara ini adalah
digunakan keatas semua tag yang kita letakkan dalam tag <STYLE>.
Perhatikan juga penggunaan tanda { dan } . Diantara keduanya kita tuliskan ciri dan item bagi
tag berkenaan. Kegunaan tanda : dan ; telah diterangkan dawal bab ini.
Dalam contoh diatas, kita menetapkan stail dalam laman web yang sama. Kita boleh menulis
stail dalam satu fail lain, kemudiannya mengimpot fail itu kedalam tag <STYLE> dalam laman
web kita.
Contohnya kita menulis baris berikut dalam satu fail (Kita boleh gunakan Notepad) yang
bernama Stail5.txt :
H1 {font:45pt Times; color:brown}
P {font:12pt Times; color:blue; text-indent:1in; margin-right:1in}
Kemudian kita impot fail itu kedalam tag <STYLE> dalam laman web kita menggunakan
kuncikata '@import', seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
@import Stail5.txt;
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Cara ini berguna jika kita menetapkan stail yang kodnya merangkumi banyak baris. Kita dapat
menjimatkan baris dalam tag <STYLE>. Fail Stail5.txt itu boleh diimpot ke web-laman web kita
yang lain, jadi kita boleh menjimatkan masa. Bagaimanapun, kita terpaksa mengingat dan
bayangkan apakah stail yang akan dikenakan oleh fail itu sebelum mengimpotnya, atau memberi
nama fail dengan nama yang membayangkan stail yang akan dikenakan.
Kita boleh mengimpot lebih dari satu fail stail. Contoh caranya ialah seperti berikut:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
@import Stail2.txt;
@import Stail3.txt;
@import Stail4.txt;
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Fail Stail2.txt mungkin kita gunakan untuk mengenakan stail keatas isi tag <H1>. Fail Stail3.txt
mungkin kita gunakan untuk mengenakan stail keatas isi tag <P>. Fail Stail4.txt mungkin kita
gunakan untuk mengenakan stail keatas isi tag <H2>. Jika kita memberi nama satu stail yang
sukar diingati, ini akan menyukarkan kita.
Kita boleh juga mengimpot fail stail milik orang lain jika kita tahu alamatnya dan telah mendapat
kebenaran dari pemiliknya. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
@import url(http://www.Straits.com/StyleA);
@import url(http://www.Mom.com/StyleB);
@import url(http://www.Cherry.com/StyleC);
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Satu lagi cara mengimpot fail stail ialah dengan memasukkan ciri REL (bagi RELATIONSHIP)
dalam tag <LINK> tanpa menggunakan tag <STYLE>. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<LINK REL="STYLESHEET" HREF="Stail5.txt" >
</HEAD>
<BODY>
</BODY>
</HTML>
Perhatikan bahawa tag <LINK> dengan ciri REL diletakkan selepas tag </TITLE> dan sebelum
tag </HEAD>.
Apabila kita menggunakan tag <STYLE>, secara otomatik sebenarnya kita menggunakan ciri
TYPE="text/css" dalam tag itu. Ciri ini adalah satu piawai dalam tag <STYLE>, oleh itu kita
tidak perlu menuliskannya. Jika kita ingin lebih jelas, kita boleh menuliskannya, begini :
<STYLE TYPE="text/css">
Pada masa akan datang mungkin terdapat ciri-ciri lain yang dicipta selain dari ciri 'text/css' ini.
Kita boleh mengumpulkan stail bagi beberapa tag dengan cara seperti berikut:
<STYLE>
H1, H2, H3, H4 {color: red}
P, BLOCKQUOTE {color: green}
</STYLE>
Ini bermakna, kita akan mengenakan warna merah pada isi tag <H1>, <H2>, <H3> dan <H4>
dan warna hijau pada isi tag <P> dan <BLOCKQUOTE>.
Seperti dinyatakan diatas, kita boleh mengimpot lebih dari satu fail stail. Ini boleh
menimbulkan konflik kerana ada kemungkinan tag-tag tertentu ditetapkan stail yang berbeza
oleh fail-fail stail yang berlainan. Untuk mengatasi masalah ini, kita boleh menetapkan ciri
'important' (penting) pada ciri yang berkenaan dengan cara berikut :
<STYLE>
H1 {color:blue ! important}
P {color:yellow ! important}
</STYLE>
Perhatikan ada tanda ! sebelum perkataan 'important'.
Dengan cara ini, jika ada fail stail lain yang menetapkan bahawa warna isi tag <H1> bukan biru
(contohnya merah), warna isi tag <H1> akan tetap biru (blue) dan warna isi tag <P> akan tetap
kuning (yellow).
Kelas (Class)
Sejauh ini, kita hanya faham bahawa kita boleh mengenakan satu set stail bagi satu tag bila
menggunakan tag <STYLE>, tetapi sebenarnya kita boleh menetapkan lebih dari satu set stail
kepada satu tag. Set stail ini dipanggil 'Class'. Lihat contoh berikut :
</TITLE>
<STYLE>
H1.StailA {font:40pt Courier; color:red}
H1.StailB {font:35pt Times; color:blue}
</STYLE>
</HEAD>
Disini kita mencipta 2 set stail (kelas) yang boleh dikenakan keatas isi tag <H1> iaitu nama-
nama kelas itu ialah 'StailA' dan 'StailB'. Tiap-tiap kelas ini kita nyatakan ciri-ciri yang
dikandungnya. (Perhatikan penggunaan tanda titik dalam struktur 'H1.StailA' dan 'H1.StailB'
sebagai tanda kelas bagi tag berkenaan).
Untuk mengenakan satu kelas stail keatas satu tag, kita masukkan ciri CLASS=X dalam tag itu
dimana X ialah nama kelas. Contohnya untuk mengenakan stail kelas 'StailA' keatas satu tag H1,
kita tuliskan begini :
<H1 CLASS="StailA">.
Berikut ialah contoh cara yang lebih lengkap untuk mengenakan ciri CLASS :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
H1.StailA {font:40pt Courier; color:red}
H1.StailB {font:35pt Times; color:blue}
</STYLE>
</HEAD>
<BODY>
<H1 CLASS="StailA">
Heading ini menggunakan stail A
</H1>
<H1 CLASS="StailB">
Heading ini pula menggunakan StailB
</H1>
</BODY>
</HTML>
Setakat ini kita juga tahu bahawa satu stail boleh dikenakan keatas satu tag. Bagaimanapun kita
boleh mengenakan satu stail meliputi beberapa tag yang berdekatan antara satu sama lain dengan
menggunakan tag <SPAN> dan </SPAN>.
Caranya, kita tetapkan dulu isi ciri SPAN dalam tag <HEAD> seperti biasa seperti berikut :
</TITLE>
SPAN {font:Arial; color:white}
</HEAD>
Dalam contoh ini, semua tag-tag yang berada diantara tag <SPAN> dan </SPAN> dalam badan
laman web, isinya akan dikenakan ciri font jenis Arial dengan warna putih.
Contoh cara menggunakannya ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
SPAN {font:Arial; color:white}
</HEAD>
<BODY>
<SPAN>
<H1>
Heading ini menggunakan stail ditetapkan oleh SPAN
</H1>
<P>
Perenggan ini juga masih dikenakan stail yang ditetapkan oleh SPAN
</P>
<P>
Perenggan ini pun masih dikenakan stail yang ditetapkan oleh SPAN
</P>
</SPAN>
Perkataan dalam baris ini sudah diluar SPAN
</BODY>
</HTML>
Kita boleh juga menetapkan SPAN terus dalam <BODY>, begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<SPAN STYLE="font:Arial; color:white">
<H1>
Heading ini menggunakan stail ditetapkan oleh SPAN
</H1>
<P>
Perenggan ini juga masih dikenakan stail yang ditetapkan oleh SPAN
</P>
<P>
Perenggan ini pun masih dikenakan stail yang ditetapkan oleh SPAN
</P>
</SPAN>
</BODY>
</HTML>
Mengumpulkan beberapa ciri
Kita boleh menetapkan beberapa ciri yang hendak dikenakan pada isi satu-satu tag sekaligus,
bukan satu demi satu. Contohnya, kita boleh menetapkan beberapa ciri bagi tag <H1> seperti
berikut :
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family:
courier; font-style: small-caps}
Susunan ciri adalah tidak penting. Pelayar web (internet Explorer dan lain-lain) boleh
mengendalikannya.
Berikut ialah contoh yang agak lengkap :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
H1 { font-weight: bold;
font-size: 35pt;
font-family: Harrington;}
P { font: bold 12pt/14pt "Lucida Handwriting"}
</STYLE>
</HEAD>
<BODY>
<H1 ALIGN=CENTER>
Beberapa ciri font dikenakan pada baris ini, menarik bukan...
</H1>
</BODY>
</HTML>
Jika komputer dimana laman web kita dipaparkan tidak mengandungi fon yang berkenaan,
maksud kita tidak akan kesampaian.
Nota mengenai saiz fon
Dalam tag <FONT> kita biasa menggunakan ciri SIZE seperti berikut :
<FONT SIZE=X>.
Dalam membina stail juga kita mengenakan saiz font. Kedua-duanya menggunakan unit ukuran
'point' atau 'pt'. Bagaimanapun saiz font yang dihasilkan adalah berbeza antara kedua-duanya.
Bila kita menulis <FONT SIZE=3>, saiz sebenar ialah lebihkurang 12 point. <FONT SIZE=1>
pula saiz sebenarnya lebihkurang 6 point. Saiz maksima X dalam <FONT SIZE=X> ialah 7
point, menghasilkan saiz lebihkurang 24 point. Jika kita menggunakan stail, saiz font adalah
tidak terhad.
Jika kita cukup kreatif, kita boleh bina stail-stail yang menarik, menjadikan laman web kita
mempunyai stail yang berlainan dari laman web orang lain.
Senarai ciri-ciri dalam stail
Berikut ialah beberapa ciri yang boleh digunakan untuk kita membina stail :
Dimana laman web hendak di letakkan
Setelah kita menyiapkan laman web, dimana kita harus letakkannya ? Berikut ialah beberapa
pilihan yang kita boleh lakukan :
1. Simpan dalam komputer kita sendiri untuk tatapan sendiri atau ahli keluarga sendiri.
2. Simpan satu salinan dalam komputer di pejabat dimana kita bekerja untuk tatapan kita,
rakan-rakan sekerja kita dan majikan kita.
3. Jika syarikat dimana kita bekerja mempunyai jaringan intranet, cadangkan kepada
pengurusan syarikat supaya satu salinan laman web kita dimasukkan dalam sistem intranet
supaya boleh ditatapi oleh semua kakitangan. Mana tahu, laman web kita cukup menarik atau
berguna kepada syarikat.
4. Letakkan satu salinan laman web kita di komputer syarikat-syarikat yang menyediakan
perkhidmatan menyimpan laman web di internet. Sesetengah syarikat demikian mengenakan
bayaran dan ada juga yang memberi perkhidmatan secara percuma. Bayaran yang dikenakan,
jika berkenaan, biasanya sekitar RM400 setahun (pada masa buku ini ditulis). Bagi yang tidak
mengenakan bayaran, biasanya mereka akan mengenakan syarat agar kita membenarkan mereka
menayangkan iklan-iklan tertentu apabila laman web kita tertayang.
Contoh syarikat yang menyediakan perkhidmatan menyimpan laman web ialah MaxisNet,
IPXcess, Geocities, Tripod, Yahoo, iRepublics dan berpuluh-puluh lagi. Rajin-rajinlah membaca
ruangan komputer / IT di majalah dan suratkhabar atau melayari internet untuk mendapatkan
maklumat mengenai syarikat-syarikat seperti itu. Syarikat-syarikat baru yang menyediakan
perkhidmatan seperti ini biasanya muncul dari masa ke semasa. Sesetengahnya berada dalam
negara dan banyak diluar negara.
Sesetengah syarikat ini menyediakan ruang untuk laman web kita dengan percuma, tanpa apa-
apa bayaran, asalkan kita mendaftar dengan mereka dahulu (ini adalah strategi pemasaran).
Setahu penulis, kita boleh simpan satu salinan laman web kita secara percuma di Geocities
(http://www. geocities.com), di Tripod (http: //www.tripod.yahoo.com) dan di Maxis net
(http://pwp.maxis.net.my). Kita kenalah mempunyai sambungan ke Internet dahulu untuk
mencapai laman web syarikat-syarikat ini dan mendaftar dengan mereka (percuma juga) melalui
laman web mereka. Selepas kita berdaftar, biasanya ada satu butang dan panduan dalam laman
web mereka untuk kita gunakan untuk membina ruang di cakera keras mereka yang akan kita isi
dengan laman web kita.
Menyimpan laman web di internet
Menyimpan laman web di internet bermakna menyimpan laman web di komputer yang dimiliki
oleh syarikat-syarikat yang memberi perkhidmatan menyimpan laman web. Komputer mereka
biasanya dipanggil 'Pelayan Web' (Web Server) dan usaha mereka dipanggil 'Web Hosting'
(Tetuan Web). Sudah tentu kita boleh mengendali sendiri komputer pelayan web tetapi
belanjanya agak mahal dan tidak memadai dengan sebuah laman web peribadi, kecuali kita ingin
berniaga di internet.
Biasanya, untuk menyimpan laman web kita di komputer pelayan web, kita perlu terlebih
dahulu mendaftarkan diri dengan syarikat-syarikat berkenaan melalui laman web mereka. Ini
bermakna kita perlu mempunyai sambungan internet. Lebih mudah jika kita mempunyai
komputer berinternet di rumah. Baca dahulu laman web mereka berkenaan cara, peraturan, harga
dan sebagainya. Kita akan diberitahu langkah-langkah yang perlu dilakukan satu demi satu. Kita
ikuti sahaja langkah-langkah yang ditunjukkan. Kita juga akan diberitahu apakah alamat yang
bakal diberikan bagi laman web kita, contohnya http://www.KompeniSaya.com.my. Selepas
selesai pendaftaran, semua urusan seterusnya antara kita dengan syarikat ini biasanya dilakukan
lain dengan menggunakan e-mel. Syarikat yang berbeza biasanya mempunyai sedikit sahaja
perbezaan tentang langkah-langkah yang perlu diambil.
Menghantar laman web
Untuk menghantar laman web dari komputer di rumah kita atau pejabat kita ke komputer
penyimpan laman web di internet, komputer kita perlu terlebih dahulu mempunyai sambungan
ke internet dan dalam keadaan 'online' atau 'connected'.
Setelah online, kita boleh menggunakan program 'Web Publishing Wizard' yang disertakan
bersama Windows 95 untuk menghantar laman web kita (tidak perlu pergi ke bangunan syarikat
berkenaan).

Kita boleh juga menggunakan program-program lain seperti FTPPro32 atau CuteFTP. Program-
program ini biasanya boleh diperolehi (downloaded) secara percuma dari internet. Biasanya
laman web syarikat penyimpan laman web juga menyediakan kemudahan untuk kita
mendapatkan program percuma ini. Klik saja pada satu butang tertentu, program itu akan di
pindahmasuk ke komputer kita dalam masa lebihkurang seminit.
Persediaan sebelum menghantar laman web
Biasanya, sebelum kita menggunakan program-program ini, kita perlu melakukan persediaan
berikut :
1. Ingat difolder mana laman web kita berada dalam komputer kita. Kita perlu mengisi
kedudukan dan nama laman web kita dalam satu ruang dalam program ini nanti.
2. Cipta satu nama untuk program berkenaan mengingati nama laman web kita. Kita boleh
gunakan 'Laman Web Dolah' atau seumpamanya. Kita perlu mengisi nama laman web kita dalam
satu ruang dalam program ini nanti. Dilain kali, jika kita mahu menghantar laman web lain,
secara otomatik program ini tahu kemana laman web kita hendak dihantar.
3. Cipta satu perkataan rahsia sebagai katakunci(password).
4. Kita perlu ingat nama komputer syarikat penyimpan laman web yang berkenaan (nama
pelayan web ). Contohnya ftp://ftp.maxis.net.my. Ini kita perolehi setelah kita mendaftar dengan
syarikat berkenaan.
5. Kita perlu ingat alamat bagi laman web kita di komputer pelayan di syarikat penyimpan
laman web, contohnya : http://pwp.maxis. net.my/Dolah. Ini kita perolehi setelah kita mendaftar
dengan syarikat berkenaan.
Setelah kita bersedia dengan maklumat diatas, barulah kita mulakan program Web Publishing
Wizard, WS_FTPPro32, WS_FTP95 LE atau CuteFTP, yang mana anda mahu. Saya cadangkan
supaya anda gunakan WS_FTPPro32 atau WS_FTP95 LE kerana ianya mudah digunakan.
Program itu akan meminta kita mengisi maklumat-maklumat tadi. Setelah habis semua
maklumat diberikan, program itu akan sendirinya beroperasi menghantar laman web kita ke
destinasi yang kita nyatakan dalam langkah 4 diatas. Program berkenaan akan memberitahu kita
samada laman web kita berjaya atau gagal dihantar. Kadang-kadang kita terpaksa mencuba
beberapa kali jika sambungan internet kita terputus semasa proses penghantaran sedang
berlangsung atau komputer pelayan web tidak menyambut sambungan kita. Bagaimanapun,
biasanya ia mudah dan mengambil masa kurang dari seminit bagi satu laman web.
Berikut ialah contoh antaramuka program WS_FTP95 LE sebaik sahaja ia di mulakan.

Kita perlu mengisi ruang 'Profile name' dengan apa-apa nama yang kita mahu, sebaiknya nama
yang membayangkan nama laman web kita. Ruang 'Host Name' hendaklah diisi dengan nama
protokol pelayan web seperti yang diberitahu oleh syarikat penyimpan laman web yang anda
telah mendaftar. Bagi ruang 'Host Type', anda biasanya pilih 'Automatic detect' kecuali syarikat
pelayan web anda memberitahu sesuatu yang lain. Isi ruang 'User ID' dan 'password' dengan
butiran yang anda beri kepada syarikat pelayan web. Ruang yang lain boleh di kosongkan.
Setelah itu, anda klik butang 'OK'. Antaramuka berikut pula akan tertayang :

Disini, kita boleh melihat folder di komputer kita (melalui tetingkap di sebelah kiri) dan folder
laman web kita di pelayan web (melalui tetingkap di sebelah kanan). Diantara kedua-dua
tetingkap itu terdapat 2 butang bertanda <- dan ->. Butang ini boleh digunakan untuk menyalin
fail atau laman web ke/dari dua-dua lokasi.
Setelah kita sekali melakukannya, program berkenaan biasanya akan menyimpan maklumat yang
kita berikan. Ini akan menjimatkan masa kita dilain kali kita mahu menghantar laman web lain
atau laman web yang kita betulkan.
Sesetengah program membenarkan kita menghantar beberapa laman web sekaligus, tetapi ada
juga yang menghantarnya satu demi satu (Jika kita mahu menghantar 5 laman web, kita kena
memulakan program berkenaan sebanyak 5 kali).
Jika laman web kita berjaya dihantar, kita boleh cuba melihatnya sebagaimana kita melihat
laman web lain, dengan memulakan Internet Explorer dan mengisi alamat laman web berkenaan
kemudian klik butang 'Go'. Jika kita berjaya mencapainya, laman web kita akan dipaparkan. Apa
yang kita lihat, itulah yang akan dilihat oleh orang lain.
Kita boleh membuat pindaan pada laman web kita di komputer kita kemudian menghantarnya
seperti biasa. Laman Web yang lama akan diganti dengan yang baru (jika kita masih
menggunakan nama fail htm yang sama).
Memasukkan tag <META>
Jika kita hendak meletakkan laman web kita di internet, eloklah kita menggunakan tag <META>
berserta ciri HTTP-EQUIV dan ciri CONTENT.
Tag <META> biasanya digunakan untuk memudahkan injin pencari laman web (seperti
WebCrawler) menjeniskan laman web kita, jenisnya bergantung kepada penetapan kita.
Contohnya jika kita menulis begini :
<META NAME="keywords" CONTENT="mathematic">

ini bermakna, kita hendak menjeniskan laman web kita kepada kategori 'mathematic'. Injin
pencari laman web, apabila menjumpai laman web kita akan memasukkan laman web kita dalam
kategori ini. Pengguna internet, apabila memasuki injin pencari laman web, akan nampak
berpuluh-puluh senarai kategori laman web seperti sports, health, politics dan sebagainya. Ada
kemungkinan mereka akan menjumpai laman web kita. Jika mereka mendapati laman web kita
cukup menarik atau berguna, mereka mungkin akan melawati lagi di lain kali.
Injin pencari web tidak lain adalah menggunakan laman web juga, sama seperti laman web kita,
cuma ia mempunyai kebolehan mencari laman web-laman web di internet. Kita boleh belajar
bagaimana mahu menjadikan laman web kita sebagai injin pencari, tetapi bukan dalam buku
ini.

Tag <META> hendaklah dimasukkan diantara tag <HEAD> dan </HEAD>, biasanya selepas
tag </TITLE> seperti berikut :

<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Kandungan tag ini tidak akan dapat dilihat oleh pengguna laman web kita. Ia untuk kegunaan
injin pencari laman web.
Perkataan NAME="keywords" dan CONTENT= adalah piawai dalam tag <META>. Kita tidak
perlu mengubahnya. Kita hanya boleh mengubah perkataan 'mathematic'.
Kita boleh juga memberitahu injin pencari mengenai tarikh laman web kita mula diterbitkan di
internet dengan menggunakan ciri NAME dalam tag <META>, seperti berikut :
<META NAME="published" CONTENT="Mon, 20 Nov 2000">

Ini memberitahu injin pencari laman web bahawa laman web kita mula diterbitkan pada hari
Isnin 20 November 2000.
Kita boleh menggunakan kedua-dua ciri HTTP-EQUIV dan NAME seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<META NAME="published" CONTENT="Mon, 20 Nov 2000">
</HEAD>
<BODY>
</BODY>
</HTML>
Kita boleh juga memberitahu nama dan alamat e-mel kita, seperti berikut:
<META NAME="author" CONTENT="Aminah:aminah@hotmail.com">
Sebenarnya perkataan "mathematic" boleh ditambah atau diganti dengan berbagai-bagai jenis
yang kita mahu. Jika begitu, kita gunakan tanda koma sebagai pembeza jenis seperti berikut :
<META Name="keywords" CONTENT="mathematic, Malaysia, Ilmu hisab, kira-kira,
matematik, belajar matematik, learn mathematic">
Cara begini boleh menjadikan peluang laman web kita ditemui oleh pengguna laman web lebih
besar lagi kerana kita memasukkan laman web kita dalam banyak kategori. Bagaimanapun
memasukkan laman web kita dalam kategori yang tidak ada kena mengena dengan isinya adalah
tindakan yang hampir tidak beretika.
Kita boleh memberi deskripsi ringkas mengenai laman web kita supaya di pungut oleh injin
pencari laman web dengan memasukkan tag <META> dengan ciri name="description" dan
kandungannya dalam ciri 'content' seperti berikut :
<meta name="description" content="Laman web pilihan sekeluarga">
Kadang-kadang, bergantung harap kepada injin pencari laman web semata-mata adalah tidak
mencukupi. Jika kita tahu alamat laman web injin pencari laman web di internet, seperti yahoo,
cari, catcha, octopus, webcrawler dan sebagainya, kita boleh melayari laman web mereka dan
mendaftarkan alamat laman web kita melalui ruangan yang mereka sediakan. Biasanya tiada
bayaran di kenakan.
Mengendali pelayan web sendiri

Kita boleh menjadikan komputer kita sebagai penyimpan laman web. Ini menjadikan kita tidak
bergantung kepada syarikat lain untuk menyimpan laman web kita. Secara ringkas, kita
memerlukan perkara-perkara berikut :
5. Komputer yang agak berkuasa seperti Pentium 111.
6. Sistem operasi komputer yang berkeupayaan menangani capaian
internet seperti Windows NT dan Linux. Windows 95 dan Windows 98
boleh juga digunakan tetapi tidak berapa sesuai kerana kurang
kemampuannya.
7. Program yang menjadi pelayan web (web server) seperti Internet
Information Server.
8. Kebolehan mengendali sistem operasi, pelayan web dan laman web.
Biasanya kita memerlukan seorang 'web master' (juru web).
9. Mencari nama yang sesuai bagi komputer kita ('Domain name',
seperti 'www.PejSaya.com') dan mendaftarkannya dengan satu badan
penyimpan nama laman web. Badan ini teletak di USA dan dinamakan
NIC. Bayaran tahunan sekitar USD35. Jika nama laman web kita mempunyai sambungan 'my'
(contohnya www.pejsaya.com.my'), kita hanya perlu membayar yuran tahunan kepada JARING
sebanyak RM100.
10.Mendapatkan laluan ke internet dari manan-mana ISP (Internet Service Provider) di Malaysia
seperti TMNet, MaxisNet, Jaring dan sebagainya. Ini adalah syarikat-syarikat yang menyediakan
laluan ke internet dari Malaysia.
11.Mempunyai kabel laluan yang sesuai seperti jenis ISDN, ADSL atau lain-lain untuk
menampung lawatan oleh pengguna laman web kita. Modem biasa adalah tidak memadai.
Maklumat lebih lanjut tidak dapat diberikan dalam buku ini. Ia memerlukan satu buku khusus.
Mengiklankan laman web
Setelah kita meletakkan satu salinan laman web kita di internet, tidaklah mencukupi kita hanya
membiarkannya disitu. Tiada siapa akan tahu kehadiran laman web kita di internet.
Siapakah yang kita harus beritahu dan bagaimanakah caranya memberitahu mereka ? Berikut
ialah contoh-contoh yang boleh kita lakukan :
1. Beritahu ahli keluarga kita, rakan kita, rakan sekerja, rakan kelab dan sebagainya secara
lisan atau menulis surat. Semasa berbual-bual, ambil kesempatan beritahu alamat laman web kita
pada mereka.
2. Tampalkan alamat laman web kita di kenderaan kita, dipintu rumah dan kad perniagaan kita
dan lain-lain kedudukan (jangan tampal di stesen bas).
3. Iklankan dalam suratkhabar atau majalah (jika laman web kita cukup berfaedah, apa
salahnya).
4. Daftarkan alamat laman web kita dengan injin pencari laman web. Terdapat beratus-ratus
injin pencari laman web. Antaranya Cari, Lycos, Catcha, Yahoo dan lain-lain lagi. Ada yang
percuma dan ada yang meminta bayaran. Untuk mendaftar dengan injin pencari laman web, kita
kena mencari laman web atau laman web injin pencari laman web. Kita boleh mencari alamatnya
di internet atau bertanya kawan-kawan atau melalui suratkhabar dan majalah. Setelah jumpa,
biasanya laman web mereka mengandungi butang khusus untuk tujuan ini, dimana apabila kita
klik pada butang itu, kita di kehendaki mengisi beberapa perkara seperti alamat laman web kita,
kategori mana hendak dimasukkan laman web kita itu dan alamat e-mel kita di ruang yang
disediakan dalam laman web mereka, kemudian klik butang 'Save' atau 'Submit'. Selesai. Begitu
mudah.
Kita akan diberitahu melalui e-mel samada mereka berjaya mendaftarkan alamat laman web kita.
Ini akan mengambil masa beberapa hari. Biasanya kalau kita tidak memberitahu alamat laman
web kita dengan betul, ia boleh menjadi punca laman web kita gagal didaftarkan. Jika gagal, kita
boleh cuba lagi.
Jika laman web kita berjaya didaftarkan, maka diharapkan, apabila pengguna internet membuat
carian, mereka akan menemui alamat laman web kita. Katakan kita memasukkan laman web kita
dibawah kategori 'cukai', apabila ada pengguna internet membuat carian tentang 'cukai',
diharapkan alamat laman web kita akan tersenarai dalam hasil carian mereka. Jika laman web
kita adalah diantara beratus-ratus laman web dalam senarai, peluang untuk laman web kita
dipilih tentulah nipis. Tetapi jika mereka memilih untuk melawati laman web kita dan mereka
dapati laman web kita adalah menarik, tentu mereka akan ingat alamat laman web kita dan akan
melawati lagi dimasa-masa yang akan datang.
5. Sesetengah syarikat dimana kita meletakkan laman web kita, mereka akan
mendaftarkan/mengiklankan alamat laman web kita ke injin-injin pencari
laman web. Ada yang memberi perkhidmatan ini secara percuma dan ada juga
yang menghendaki bayaran. Ada juga yang tidak berbuat demikian, hanya
setakat menyimpan sahaja tanpa perkhidmatan tambahan.
Berikut ialah satu contoh sebahagian laman web 'Websurfer' (injin pencari/ pendaftar laman
web). Perhatikan butang 'Submit your site' yang akan membolehkan kita mendaftarkan nama
laman web kita disana.

Selepas kita klik pada butang itu, akan timbul tetingkap berikut yang meminta kita mengisi
beberapa maklumat.

Setelah kita mengisi maklumat-maklumat, kita klik butang 'Submit'. Kita akan dimaklumkan
dalam satu tetingkap lain samada mereka telah menerima maklumat yang kita beri. Jika tidak,
kita akan cuba lagi. Jika diterima, mereka akan cuba dulu menjejaki laman web kita. Selepas itu
barulah mereka akan memberitahu kita bahawa laman web kita telah mereka sahkan untuk
pendaftaran. Lalu, berharaplah kita semoga ada orang yang akan menemui laman web kita....
Jika kita memindah laman web
Kadang-kadang kita memindahkan laman web kita dari satu direktori ke direktori lain atau dari
satu komputer ke komputer lain. Ini menyebabkan alamat laman web kita berubah. Peminat
laman web kita tentu tidak tahu dengan segera tentang alamat laman web kita yang baru. Apabila
pengguna cuba melawat laman web kita dengan menggunakan alamat lama, pengguna tidak akan
memperolehi laman web itu.
Kita boleh mengarahkan pengguna ke alamat laman web kita yang baru dengan salah satu cara
berikut :
<> Buatkan satu laman web yang mengandungi maklumat alamat laman web kita
yang baru dan simpan di laman web yang lama untuk beberapa ketika sebelum terus
memadamnya. Kita boleh gunakan tag <A> dengan ciri HREF yang mengarah ke alamat laman
web yang baru.
Buatkan satu laman web yang mengandungi tag <META> dan simpan di laman web lama
untuk beberapa ketika sebelum terus memadamnya. Dalam tag <META> itu kita tuliskan begini
:
<HEAD>
<META HTTP-EQUIV="Refresh" CONTENT="2;http://www.CompX/Swee/Muka1.htm">
<STYLE>
Dalam contoh ini, apabila pengguna melawat laman web di alamat lama,
selepas 2 saat ia akan dibawa ke alamat yang baru secara otomatik, iaitu
di 'http://www.CompX/Swee/Muka1.htm'. Itulah kegunaan ciri HTTP-
EQUIV="Refresh" dalam tag <META>. Jika kita mahu menukar kepada 3 saat,
gantikan angka 2 dengan angka 3.
Memberi fail kepada orang lain
Jika kita mempunyai apa-apa fail, samada fail Excel, Word, Access, Powerpoint, Lotus 123,
gambar dan grafik, bunyi, video, program dan sebagainya dan kita mahu pengguna laman web
kita (laman web kita mestilah berada di internet) mengambil fail itu ke komputer mereka
(download), kita boleh melakukannya dengan cara berikut :
Hantar fail berkenaan ke komputer penyimpan laman web. Seeloknya simpan ia dalam komputer
penyimpan laman web yang sama dengan laman web kita berada, dan dalam folder yang sama.
Cara menghantar fail ke komputer penyimpan laman web adalah sama dengan cara kita
menghantar laman web kesana.
Kemudian, dalam laman web kita, buat satu satu pintasan kepada fail itu menggunakan tag <A>
dengan ciri HREF=X seperti yang kita pelajari dalam bab 'Memasuk dan mengendali pintasan'.
X ialah nama fail itu dan lokasinya. Contohnya jika fail itu bernama 'FailKiraCukai.xls' (satu fail
Excel), kita tuliskan begini dalam laman web :
<A HREF="FailKiraCukai.xls">Klik untuk dapatkan fail mengira cukai</A>
Contoh kod yang penuh:
<HTML>
<BODY>
<A HREF="FailKiraCukai.xls">Klik untuk dapatkan fail mengira cukai</A>
</BODY>
</HTML>
Hasilnya laman web kita akan kelihatan seperti berikut :

Apabila pengguna klik pada perkataan 'Klik untuk dapatkan fail mengira cukai', jika pengguna
mempunyai program yang digunakan untuk membina fail itu (Excel dalam contoh ini), fail itu
akan terbuka dikomputer pengguna. Ia mungkin akan kelihatan begini :

Pengguna boleh melihat fail itu atau ia boleh juga menyimpannya ke komputer mereka dengan
memilih menu "File / save as...' seperti biasa.
Jika Internet Explorer tidak dapat mengenalpasti apakah program yang seharusnya digunakan
untuk membuka fail itu, contohnya jika fail itu ialah fail Excel tetapi komputer pengguna tidak
mengandungi program Excel, dialog berikut akan timbul :

Pengguna diberi pilihan samada menyimpannya ke cakera keras (save it to disk) atau
membukanya dengan program tertentu (open it using a program on your computer). Sementara
itu proses pindah fail (download) sudah bermula, menunggu pilihan pengguna.
Jika pengguna memilih menyimpan ke cakera keras, dialog biasa seperti berikut akan muncul
(pengguna akan memilih destinasi fail) :
J
Selepas itu, proses pindahan fail ke komputer pengguna akan berlangsung hingga tamat.
Jika pengguna memilih untuk membuka program, pengguna akan menerima dialog berikut untuk
pengguna mengenalpasti program yang akan digunakan :

Pengguna seharusnya biasa menggunakan dialog ini. Ia adalah perkara biasa dalam operasi
Windows95/98.
Kita boleh membina pintasan kepada apa saja fail, asalkan komputer dimana fail itu dibuka
mempunyai program yang berkaitan.
Dengan teknik yang sama, kita bukan sahaja boleh berkongsi fail Excel tetapi lain-lain fail juga
seperti Word, Powerpoint, Access dan lain-lain. Kita boleh membina satu fail Powerpoint yang
mengandungi pelajaran mengenal huruf ABC dan pengguna laman web kita boleh membukanya
dari komputer mereka.
Bagaimanapun, jika saiz fail itu agak besar, ia akan lambat dipaparkan di komputer pengguna.
Eloklah fail itu dipadatkan (compressed) terlebih dahulu. Kita boleh gunakan program pemadat
fail (compression software) seperti WinZip untuk memadatkan fail itu. Fail yang dipadatkan itu
biasanya bersaiz berkali ganda kecil dari saiz asal. Fail yang dipadatkan itulah yang dirujukkan
dalam laman web kita dan fail itulah juga yang kita hantar ke komputer penyimpan laman web.
Pengguna yang mahu mengambil fail itu mestilah mempunyai program pemadat fail yang sama
untuk tidak memadatkan (decompressed) fail itu semula supaya boleh dibuka dikomputer
mereka. Mereka juga mestilah tahu menggunakan program sepeti itu. Biasanya program Winzip
adalah mudah dikendali oleh ramai pengguna komputer.

Membolehkan pengguna menghantar e-mel
Jika kita meletakkan laman web kita di internet, kita boleh memberi kemudahan kepada
pengguna laman web kita untuk menghantar e-mel kepada kita, dengan cara mengadakan satu
pintasan perkataan atau grafik dalam laman web kita dimana jika pengguna klik pada perkataan
atau grafik itu, program e-mel yang ada dalam komputer pengguna akan menjadi aktif dan
pengguna boleh menghantar e-mel kepada kita. Pengguna perlulah mempunyai sambungan
internet dan akaun e-mel serta program yang berkeupayaan mengendali e-mel seperti Outlook
Express dan Microsoft Outlook.
Kita boleh gunakan tag <A> dengan ciri 'HREF="mailto:X"' dimana X ialah alamat e-mel kita.
Lihat contoh penggunaannya seperti berikut .
<A HREF="mailto:NamaSaya@tm.net.my">Sila komen laman web saya</A>
Pengguna akan nampak perkataan "Sila komen laman web saya". Perkataan inilah yang akan
diklik oleh pengguna, lalu program e-mel mereka (jika ada dalam komputer mereka) akan aktif.
Mereka boleh menulis di ruang-ruang tertentu dalam program itu, kemudian (biasanya) klik pada
butang "Send" yang ada dalam program itu. Apaapa yang mereka tulis akan dihantar ke alamat
e-mel kita iaituNamaSaya@tm.net.my. Kita hendaklah telah mempunyai akaun e-mel tersebut)
untuk menerima e-mel dari pengguna.
Contoh laman web:

Kod HTML nya ialah :
<HTML>
<BODY bgcolor="white">
<A HREF="mailto:NamaSaya@tm.net.my">Sila komen laman web saya</A>
</BODY>
</HTML>
Laman Web dan laman web
Laman web biasanya dimaksudkan kepada tempat (komputer) dimana kita menyimpan laman
web kita dan laman web itu boleh dicapai (dilayari) oleh pengguna internet. Komputer itu
biasanya dipanggil 'pelayan web' (web server).
Satu laman web boleh mengandungi hanya satu laman web tetapi biasanya mengandungi lebih
dari satu dimana tiap-tiap satunya akan mempunyai pintasan kepada satu sama lain.
Biasanya terdapat satu laman web yang ditetapkan sebagai laman web induk (permulaan) bagi
laman web dimana pengunjung laman web itu secara otomatik akan mencapai laman web yang
itu dahulu. Dari situ, pengunjung akan melihat pintasan ke lain-lain laman web. Biasanya laman
web permulaan itu dinamakan 'Index.htm' atau 'Default.htm' atau 'welcome.htm', bergantung
kepada peraturan yang digunakan oleh penyimpan laman web.
Dalam buku ini kita menggunakan nama 'Muka1.htm' bagi laman web kita. Seharusnya, setelah
anda mengetahui perkara diatas, kita kena tukar nama laman web utama kita kepada 'Index.htm'
atau 'Default.htm' atau 'welcome.htm'. Laman Web lain, jika ada, bolehlah menggunakan nama-
nama lain.
Pelayan web biasanya dikendalikan oleh seorang 'Juru-web' ('Web Master' atau 'Web
Administrator').
Usaha satu pelayan web menyimpan laman web dipanggil 'Web Hosting' (Tetuan web').
Kita perhatkan bahawa apabila kita klik pada satu alamat laman web seperti www.jaring.my dan
sebagainya, sebenarnya kita akan dibawa terus ke laman web yang bernama 'Index.htm' atau
'Default.htm' atau 'welcome.htm'. Juruweb akan menentukan yang mana satu harus digunakan.
Sokongan pelayar web kepada tag-tag
HTML
Terdapat beratus-ratus pelayar web dipasaran, walaupun yang biasa kita temui pada masa ini
ialah Microsoft Internet Explorer, Netscape Communicator dan Opera. Tiap-tiap pelayar itu pula
mempunyai berbagai versi. Tidak semua versi atau pelayar menyokong semua tag HTML. Oleh
itu, ada pelayar web yang menayangkan laman web kita dengan kemas tetapi ada pula pelayar
yang tidak kemas dalam menayangkan laman web. Kadang-kadang perbezaannya tidaklah teruk
sangat, hanya sedikit sahaja, kadang-kadang kita pun tidak perasan. Tetapi ada ketikanya kita
tidak memperolehi hasil yang kita jangkakan kerana pelayar gagal menayangkan laman web
dengan sempurna walaupun kita telah menulis kod dengan betul. Oleh itu, kita perlu mencuba
laman web menggunakan berbagai pelayar web sebelum kita meletakkan laman web di internet.
Kita boleh menuliskan makluman dalam laman web tentang pelayar web yang terbaik boleh
digunakan oleh pengguna untuk melihat laman web kita.
Jika semasa kita membina laman web, pelayar laman web tidak menayangkan hasil yang kita
harapkan, ada kemungkinan besar pelayar itu tidak menyokong tag HTML yang kita gunakan
(Kemungkinan punca lain ialah kita tidak menulis tag dengan betul samada ejaannya atau
kedudukannya).
Mestikah cantik ?
Kita mahu memasukkan laman web kita ke internet tetapi bimbang samada laman web itu cukup
menarik atau tidak.
Jika kita rajin ke internet, kita akan dapati banyak laman web yang tidak cukup cantik dan kita
rasa kita boleh buat lebih baik lagi. Ada juga laman web yang belum siap.
Jangan ragu-ragu untuk masukkan laman web kita ke internet. Kita boleh perbaiki dari masa ke
masa. Jangan tunggu sampai siap dan cantik barulah nak masukkan laman web kita ke internet.
Kita akan ketinggalan keseronokannya dan faedahnya.
Selepas ini...
Buku ini mencukupi sebagai panduan untuk kita membina laman web yang asas dan memadai
untuk kita ketengahkan untuk tatapan umum. Kita hanya perlukan sedikit kreativiti untuk
membina laman web yang kelihatan kemas, cantik dan senang dilihat oleh pengguna internet.
Selepas kita tahu tahu membina laman web yang asas, jika kita mahu maju kehadapan lagi dalam
bidang ini, berikut ialah langkah-langkah yang kita boleh lakukan :
1. Belajar mencipta grafik yang lebih cantik untuk digunakan dalam laman web kita. Kita
harus belajar menggunakan program-program grafik seperti Microsoft Image Composer,
Photoshop dan sebagainya.
2. Belajar mencipta bunyi atau suara yang baik untuk digunakan dalam laman web.
3. Belajar membuat video yang canggih untuk dimasukkan dalam laman web.
4. Belajar menggunakan program-program pembina laman web seperti HotDog, Frontpage,
Shockwave, Dreamweaver dan sebagainya. Ini memerlukan kos tambahan kepada anda.
Program-program ini menghasilkan laman web secara visual dimana penggunanya tidak perlu
berurus langsung dengan tag-tag HTML walaupun program-program ini sebenarnya
menghasilkan tag-tag HTML dibelakang operasi mereka tanpa disedari oleh pengguna.
5. Mempelajari bahasa DHTML (Dynamic HTML) untuk menjadikan laman web kita
berciri dinamik, tidak statik. Laman Web yang kita pelajari dalam buku ini adalah laman web
yang statik atau tidak dinamik.
Apakah itu laman web yang dinamik ? Kita sudah tahu tentang tag 'MARQUEE' ?
Ini adalah contoh yang hampir dengan 'dinamik' kerana ia bergerak-gerak.
Dinamik bermakna kandungan laman web yang dilihat oleh pengguna berubah-
ubah mengikut keadaan tertentu. Perubahan ini ditentukan oleh kita
sendiri sebagai pembina laman web. Kadang-kadang memerlukan tindakbalas
pengguna dan dilain masa ia berlaku sendiri.
Contoh lain dinamik ialah : apabila pengguna klik satu butang, warna
latarbelakang laman web bertukar dari asal kelabu menjadi merah.

Untuk memasukkan kebolehan dinamik dalam laman web, kita harus mempelajari
bahasa selanjutnya selepas HTML iaitu bahasa DHTML (Dynamic HTML).
6. Mempelajari bahasa Script seperti JavaScript dan VBScript untuk
menjadikan laman web kita dinamik dan interaktif.

Apakah itu laman web yang interaktif ? Ia adalah laman web yang seolah-olah
berinteraksi dengan penggunanya. Contoh laman web yang interaktif ialah :
Pengguna akan menulis satu angka dalam satu ruangan, kemudian menulis
satu lagi angka dalam satu ruang lain. Apabila ia klik pada satu butang,
kedua-dua angka itu akan dicampurkan dan pengguna akan diberitahu
jumlahnya dalam satu ruang lain.
Untuk memasukkan kebolehan interaktif dalam laman web, kita harus
mempelajari bahasa script seperti VBScript atau JavaScript. Seelok-
eloknya kita mempelajari kedua-duanya.

Selain dari membolehkan laman web berciri interaktif, bahasa script juga
memang berkeupayaan menjadikan laman web yang dinamik sebagaimana boleh
dilakukan oleh DHTML.
7. Mempelajari bahasa ASP (Active Server page), CGI atau Perl untuk membolehkan laman
web kita dimasukkan dalam komputer pelayan web dan berinteraksi dengan laman web yang
sedang pengguna gunakan dan berkebolehan menggunakan databes (pengkalan data) untuk
mendapatkan data dari pengguna dan menyimpan data.
Sekarang kita tahu bahawa fail htm ialah fail laman web, iaitu fail yang menggunakan bahasa
HTML (terdiri dari tag-tag tertentu), yang apabila dibuka oleh pelayar web, pengguna akan
memperolehi laman web.
Setakat ini, kita akan perasan bahawa tiada tajuk dalam buku ini yang menyentuh mengenai
pembinaan databes atau mendapatkan data dari databes. Inilah salah satu kelemahan bahasa
HTML yang asas. Ia tidak dapat mengendali pengkalan data.
Untuk menjadikan bahasa HTML berkebolehan mengendali pengkalan data, bahasa ini boleh
digunakan (ditulis) bersama dengan bahasa Script di pelayan web (ASP, CGI dan lain-lain) dan
dilaksanakan dalam komputer pelayan (iaitu komputer yang didalamnya mengandungi program
pelayan (server)). Komputer pelayan biasanya di pandu oleh sistem operasi yang lebih berkuasa
dari Windows 95 atau Windows 98, contohnya Microsoft Windows NT, Unix atau Linux.
Komputer itu juga mengandungi Program pelayan seperti Microsoft Internet Information server
(IIS).
Setakat mempelajari HTML, kita hanya boleh dipanggil 'kerani' dalam bidang IT. Untuk menjadi
eksekutif, pelajarilah ASP, CGI, Perl dan lain-lainnya.
8. Mempelajari bahasa XML (Extensible Mark-Up Language). Ketika buku ini
ditulis, penggunaan bahasa ini sedang dalam peringkat awal.
9. Rajin-rajinlah melihat kod HTML laman web yang anda suka. Sebagaimana kita tahu, kita
boleh melihat sebahagian kod HTML bagi satu laman web dengan klik kanan pada bahagian
kosongnya dan pilih menu 'View Source'. Dengan cara ini kita mungkin boleh belajar teknik-
teknik membina laman web yang cantik dan berfungsi. Bagaimanapun, kita mungkin tidak dapat
melihat semua kod kerana ada cara untuk melindungkannya.
Contoh Laman Web 1

bersambung...

Kod HTML bagi web page ini ialah seperti berikut :
<html>
<head>
<title>Resume
</title>
</head>
<body bgcolor=white>
<h3 align=center>
<em>
Resume dan Vitae
</em>
</h3>
<h1 align=center>
Mamat Dol
</h1>
<div align=center>
<center>
<address>
66 Jalan Seremban
<br>
Tampin
<br>
Telefon : 05-555555
<br>
Faks : 05-555556
<br>
E-Mel : Mamat@tm.net.my
</address>
</div>
<table border=2 height=100 width=100>
<tr>
<td align=center>
Gambar sedang dicuci
</td>
</tr>
</table>
<h2>
<u>
Pengalaman Profesional
</u>
</h2>
<h3>
<strong>
Syarikat ABC Sdn Bhd
</strong>
</h3>
<p>
<strong>
Jawatan
</strong>
<br>
Pengurus Jualan
</p>
<p>
<strong>
Tugas-tugas utama
</strong>
<br>
Meningkatkan penjualan cat cap "Cat"
</p>
<h3>
<strong>
Syarikat DEF Pte Ltd
</strong>
</h3>
<p>
<strong>
Jawatan
</strong>
<br>
Eksekutif Jualan
</p>
<p>
<strong>
Tugas
</strong>
<br>
Menjual mainan budak-budak
</p>
<h3>
<strong>
Syarikat MEM Bhd
</strong>
</h3>
<p>
<strong>
Jawatan
</strong>
<br>
Kerani Jualan
</p>
<p>
<strong>
Tugas-tugas
</strong>
<br>
Merekod jualan dan mengira komisen
</p>
<h2>
<u>
Pelajaran
</u>
</h2>
<h3>
Universiti Olok-Olok, California
</h3>
<p>
<strong>
Jenis ijazah
<br>
</strong>
Ijazah Pemasaran mainan budak-budak
</p>
<p>
<strong>
Tarikh pengurniaan
<br>
</strong>
1990
</p>
<h3>
Institut Tut Tut, Thailand
</h3>
<p>
<strong>
Jenis Ijazah
<br>
</strong>
Master dalam Pembungkusan
</p>
<p>
<strong>
Tahun pengurniaan
<br>
</strong>
1993
</p>
<h3>
Institiut MALEGAM
</h3>
<p>
<strong>
Ijazah
<br>
</strong>
Ijazah Bidang jualan langsung Kelas 1A
<strong>
<br>
<br>
Tahun diperolehi
<br>
</strong>
1999
<br>
<br>
Saya dapat ke kerja ni ?
</body>
</html>

Contoh laman web 2

Kod HTML nya :
<html>
<head>
<title>
Kanak-kanak hilang
</title>
</head>
<body bgcolor=white>
<h1 align=center>
Kanak-kanak hilang
</h1>
<h1 align=center>
<font color=red>
<u>
Mimi Suraya
</u>
</font>
</h1>
<h1 align=center>
<img src="BabyCourt.gif" align=bottom width=200 height=200>
</h1>
<h2>
Umur : 7 tahun
</h2>
<h2>
Hubungi: 03-999
</h2>
<center>
Diatas ialah 'baby court' dimana kanak-kanak itu diletakkan
<br>
sebelum ia didapati hilang.
</center>
</body>
</html>
Contoh laman web 3

Kod HTML nya :
<HTML>
<HEAD>
<FONT FACE="Arial", "Helvetica">
</HEAD>
<body bgcolor=#FFFFFF leftmargin=5 topmargin=5>
<FONT SIZE=+1>
<B>
<table>
<tr>
<td>
Galeri Gambar
</td>
</tr>
</table>
</B>
</font>
<BR>
<FONT SIZE=-1>
<table>
<tr>
<td>
Gambar kecil.
</td>
</tr>
</table>
</FONT>
<br>
<table>
<tr>
<td>
<IMG SRC="GambarKecil.jpg" WIDTH=100 HEIGHT=50 BORDER=0 ALT="Gambar 1"
HSPACE=2>
</td>
</tr>
</table>
<HR NOSHADE SIZE=1>
<table>
<tr>
<td>
<img SRC="GambarBesar.jpg" WIDTH=380 HEIGHT=188>
</td>
</tr>
</table>
<BR>
<FONT SIZE=2>
<table>
<tr>
<td>
Kereta Gajah
</td>
</tr>
</table>
<HR>
<FONT SIZE=-1>
<table>
<tr>
<td>
Dengan harga jualan $28,205, Kereta gajah 4-pintu sedan
dilengkapi dengan injin 3.8-liter V6 menghasilkan 205 kuasakuda.
Ciri-ciri lain termasuk transmisi otomatik 4-kelajuan,
kunci keselamatan kanak-kanak, sistem brek ABS, power steering,
cermin gelap, dan kaset stereo AM/FM.
</td>
</tr>
</table>
</FONT>
</BODY>
</HTML>
Senarai warna
Berikut ialah senarai nama-nama warna yang disokong oleh kebanyakan pelayar web.
Dinyatakan juga nilai hex warna-warna berkenaan.
Warna Nilai HEX
ALICEBLUE #A0CE00
ANTIQUEWHITE #FAEBD7
AQUA #00FFFF
AQUAMARINE #7FFFD4
AZURE #F0FFFF
BEIGE #f5f5DC
BISQUE #FFE4C4
BLACK #000000
BLAncHEDALMOND #FFEBCD
BLUE #0000FF
BLUEVIOLET #8A2BE2
BROWN #A52A2A
BURLYWOOD #DEB887
CADETBLUE #5f9EA0
chARTREUSE #7FFF00
chOCOLATE #D2691E
CORAL #Ff7f50
CORNFLOWERBLUE #6495ED
CORNSILK #FFf8DC
CRIMSON #DC143C
CYAN #00FFFF
DARKBLUE #00008B
DARKCYAN #008B8B
DARKGOLDENROD #B8860B
DARKGRAY #A9A9A9
DARKGREEN #006400
DARKKHAKI #BDB76B
DARKMAGENTA #8B008B
DARKOLIVEGREEN #556B2F
DARKORANGE #Ff8C00
DARKORchID #9932cc
DARKRED #8B0000
DARKSALMON #E9967A
DARKSEAGREEN #8FBC8F
DARKSLATEBLUE #483D8B
DARKSLATEGRAY #2f4f4F
DARKTURQUOISE #00CED1
DARKVIOLET #9400D3
DEEPPINK #Ff1493
DEEPSKYBLUE #00BFFF
DIMGRAY #696969
DODGERBLUE #1E90FF
FIREBRICK #B22222
FLORALWHITE #FFFAF0
FORESTGREEN #228B22
FUchSIA #FF00FF
GAINSBORO #DCDCDC
GHOSTWHITE #f8f8FF
GOLD #FFD700
GOLDENROD #DAA520
GRAY #808080
GREEN #008000
GREENYELLOW #ADFf2F
HONEYDEW #F0FFF0
HOTPINK #Ff69B4
INDIANRED #CD5C5C
INDIGO #4B0082
IVORY #FFFFF0
KHAKI #F0E68C
LAVENDER #E6E6FA
LAVENDERBLUSH #FFF0f5
LEMOncHIFFON #FFFACD
LIGHTBLUE #ADD8E6
LIGHTCORAL #F08080
LIGHTCYAN #E0FFFF
LIGHTGOLDENRODYELLOW #FAFAD2
LIGHTGREEN #90EE90
LIGHTGREY #D3D3D3
LIGHTPINK #FFB6C1
LIGHTSALMON #FFA07A
LIGHTSEAGREEN #20B2AA
LIGHTSKYBLUE #87CEFA
LIGHTSLATEGRAY #778899
LIGHTSTEELBLUE #B0C4DE
LIGHTYELLOW #FFFFE0
LIME #00FF00
LIMEGREEN #32CD32
LINEN #FAF0E6
MAGENTA #FF00FF
MAROON #800000
MEDIUMAQUAMARINE #66CDAA
MEDIUMBLUE #0000CD
MEDIUMORchID #BA55D3
MEDIUMPURPLE #9370DB
MEDIUMSEAGREEN #3CB371
MEDIUMSLATEBLUE #7B68EE
MEDIUMSPRINGGREEN #00FA9A
MEDIUMTURQUOISE #48D1cc
MEDIUMVIOLETRED #C71585
MIDNIGHTBLUE #191970
MINTCREAM #f5FFFA
MISTYROSE #FFE4E1
NAVAJOWHITE #FFDEAD
NAVY #000080
OLDLACE #FDf5E6
OLIVE #808000
OLIVEDRAB #6B8E23
ORANGE #FFA500
ORANGERED #Ff4500
ORchID #DA70D6
PALEGOLDENROD #EEE8AA
PALEGREEN #98FB98
PALETURQUOISE #AFEEEE
PALEVIOLETRED #DB7093
PAPAYAWHIP #FFEFD5
PEAchPUFF #FFDAB9
PERU #CD853F
PINK #FFC0CB
PLUM #DDA0DD
POWDERBLUE #B0E0E6
PURPLE #800080
RED #FF0000
ROSYBROWN #BC8f8F
ROYALBLUE #4169E1
SADDLEBROWN #8B4513
SALMON #FA8072
SANDYBROWN #f4A460
SEAGREEN #2E8B57
SEASHELL #FFf5EE
SIENNA #A0522D
SILVER #C0C0C0
SKYBLUE #87CEEB
SLATEBLUE #6A5ACD
SLATEGRAY #708090
SNOW #FFFAFA
SPRINGGREEN #00Ff7F
STEELBLUE #4682B4
TAN #D2B48C
TEAL #008080
THISTLE #D8BFD8
TOMATO #Ff6347
TURQUOISE #40E0D0
VIOLET #EE82EE
WHEAT #f5DEB3
WHITE #FFFFFF
WHITESMOKE #f5f5f5
YELLOW #FFFF00
YELLOWGREEN #9ACD32
Kita boleh menghasilkan warna-warna selain dari warna-warna yang tercatit diatas, dengan
memasukkan tanda # diikuti dengan 6 dijit angka. Contohnya :
#123456
Tiap-tiap satu angka dalam contoh diatas kita boleh gantikan dengan salah satu dari 16 angka-
angka berikut : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. (Ini adalah angka-angka dalam sistem asas 16
(hexadecimal system)).
Contohnya :
#FA34C6
Kita boleh menghasilkan lebih dari 1 juta warna hasil dari kombinasi 6 angka antara 16 angka
hex.
Sila ambil perhatian bahawa untuk mendapatkan warna yang sebenar, ia bergantung kepada
monitor komputer kita, kad grafik komputer kita, 'driver' video yang digunakan dan sistem
operasi komputer kita dan sebagainya.
Berikut ialah contoh menggunakan nama warna. Contohnya untuk menggunakan warna putih
bagi badan laman web, kita boleh nyatakan begini :
<BODY BGCOLOR=WHITE>
atau begini (nilai hex) :
<BODY BGCOLOR=#FFFFFF>
Tidak semua pelayar web menyokong nama-nama warna yang dicatitkan diatas tetapi semua
pelayar web menyokong warna yang dinyatakan dalam nilai hex.

Bahasa

Cara2 Create Website

Diunggah oleh

Informasi Dokumen

Deskripsi:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Deskripsi:

Hak Cipta:

Format Tersedia

Cara2 Create Website

Diunggah oleh

Deskripsi:

Hak Cipta:

Format Tersedia

<="" p="" style="color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-

style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height:

Anda mungkin juga menyukai