Anda di halaman 1dari 474

<="" 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>
Hasilnya akan kelihatan begini :

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>
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.
<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>
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.
<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>
Selamat datang ke laman web Mamat (nama saya)
<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.
</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">
Selamat datang ke laman web Mamat (nama saya)
<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.
</DIV>
</BODY>
</HTML>
Hasilnya akan kelihatan begini :

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>
Selamat datang ke laman web Mamat (nama saya)
<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.
</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
menjadi margin. Contohnya :
<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.
Contoh kod penuh ialah seperti berikut :
<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
menjadi margin. Contohnya :
<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).
Hasilnya kelihatan seperti berikut :

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 permulaan nota dan tag --> sebagai penamatnya.
Contoh kod penggunaannya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<!--
Saya bercadang menjadikan laman web ini sebagai nota
mengajar murid-murid darjah Satu. Langkah yang perlu saya buat :
1. Dapatkan isi kandungan matapelajaran
2. Bincang dulu dengan guru kelas
3. Tentukan grafik yang akan dipakai
4. Tentukan suara siapa akan dipakai
Banyak lagi...
-->
</BODY>
</HTML>
Hasilnya :

Perhatikan, nota tidak dipaparkan. Jadi, apa-apa perkataan yang diletakkan diantara tag <!-- dan -
-> tidak akan dipaparkan oleh Internet Explorer dan tidak akan dapat dilihat oleh pengguna
laman web.
Mengubah latarbelakang laman web
Warna latarbelakang
Kita boleh menetapkan warna latarbelakang laman web kita dengan memasukkan ciri
BGCOLOR=X dalam tag <BODY> dimana X ialah warna yang kita mahu. BGCOLOR adalah
ringkasan bagi BACKGROUNDCOLOR (bermakna warna latarbelakang).
Walau apapun warna latarbelakang yang kita tetapkan, pengguna Internet Explorer boleh
mengubah warna latarbelakang laman web dengan memilih menu 'Tools/ Internet Options/
Colors'.
Jika kita tidak menetapkan warna latarbelakang laman web, biasanya warna latarbelakang akan
menjadi warna kelabu atau putih atau mengikut apa yang penguna telah tetapkan.
Contoh ringkas kod yang menggunakan ciri BGCOLOR=X ialah :
<BODY BGCOLOR="RED">
Perhatikan, bagaimana ciri BGCOLOR="RED" dimasukkan dalam tag <BODY>. Kita akan
temui banyak lagi ciri-ciri dalam bab-bab yang seterusnya.
Kod diatas menjadikan warna latarbelakang badan laman web ialah merah (red).
Berikut ialah contoh latarbelakang laman web yang berwarna merah :

Kodnya penuhnya ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY BGCOLOR="RED">
</BODY>
</HTML>
Kita boleh menukar 'red' dengan warna-warna lain seperti : black, white, green, blue, yellow,
magenta, cyan, purple, gray, lime, maroon, navy, olive, silver dan teal (semuanya 16 warna)
(Kita boleh mengeja dengan huruf besar atau huruf kecil atau bercampur-campur). Kita boleh
dapatkan warna-warna lebih dari 16 warna yang tercatit diatas dengan memasukkan tanda #
diikuti dengan angka 6 dijit bagi ciri BGCOLOR. (Sila rujuk bab 'Senarai warna'). Contohnya :
<BODY BGCOLOR=#123456>
Tiap-tiap angka dalam contoh diatas kita boleh gantikan dengan angka-angka
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E atau F. Ini ialah angka-angka hex (asas 16).
Contohnya :
<BODY BGCOLOR=#FA34C6>
Sila membuat percubaan sendiri dan lihat kesannya.
Dengan kombinasi 6 dijit angka-angka hex, kita boleh menghasilkan lebih dari 2 juta warna.
Corak latarbelakang
Kita boleh menjadikan latarbelakang laman web mempunyai corak-corak atau gambar. Gambar
atau corak ini adalah berdasarkan kepada satu fail lain, biasanya satu fail gambar atau grafik
yang mengandungi corak-corak (texture). Ini boleh dilakukan dengan memasukkan
ciri BACKGROUND=X dalam tag <BODY> dimana X ialah nama fail berkenaan.
BACKGROUND bermakna latarbelakang. Contohnya :
<BODY BACKGROUND="GambarKereta.jpg">
Dalam contoh ini, "GambarKereta.jpg" adalah satu fail gambar yang telah siap dan diletakkan
dalam folder yang sama dengan folder dimana laman web kita berada. Berikut ialah contoh hasil
penggunaan gambar sebagai latarbelakang laman web :

Kod bagi laman web diatas ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY BACKGROUND="GambarKereta.jpg">
</BODY>
</HTML>
Perhatikan, oleh kerana saiz gambar lebih kecil dari saiz laman web, gambar akan diulang-ulang
untuk memenuhi seluruh latarbelakang laman web.
Apabila kita menjadikan gambar sebagai latarbelakang laman web dan kita menulis diatasnya,
ini boleh menimbulkan kesan yang menarik. Lihat contoh berikut:

Kodnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY BACKGROUND="GambarKereta.jpg">
<CENTER>
<FONT COLOR="YELLOW" SIZE=14>
Kereta lama dia
</FONT>
</CENTER>
</BODY>
</HTML>
(Dalam kod diatas, anda diperkenalkan dengan tag <FONT COLOR="YELLOW" SIZE=14>.
Kita akan pelajari tag ini dalam bab selepas ini iaitu 'Mengendali huruf dan perkataan'. Secara
ringkasnya tag ini boleh digunakan untuk mewarna perkataan dan membesarkan saiz huruf).
Gambar lebih kecil dari laman web
Apabila saiz gambar lebih kecil dari saiz laman web, secara otomatik gambar itu akan diulang
sehingga memenuhi seluruh laman web, seperti contoh diatas.
Kita boleh juga menetapkan ciri ulangan (REPEAT) bagi gambar dengan menuliskan ciri
BACKGROUND-REPEAT:X diantara tag <STYLE> dan </STYLE> sambil menyatakan nama
tag yang akan dikenakan stail ulangan itu, dimana X ialah jenis ulangan (samada 'repeat', 'repeat-
x' atau 'repeat-y'). Tag <STYLE> dan </STYLE> diletakkan diantara tag </TITLE> dan
</HEAD>. Didalamnya kita tuliskan 'BODY' sebagai tanda bahawa kita hendak mengenakan
satu stail (style) keatas badan (BODY) laman web. Stailnya ialah <BODY> laman web itu akan
menggunakan stail REPEAT keatas latarbelakang (background).
Contoh penggunaan ciri BACKGROUND-REPEAT ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
body {background-repeat:repeat}
</STYLE>
</HEAD>
<BODY BACKGROUND="GambarKecil.jpg">
<CENTER>
<FONT COLOR="YELLOW" SIZE=14>
Kereta lama dia
</FONT>
</CENTER>
</BODY>
</HTML>
Hasilnya :

Dalam contoh ini, gambar 'gambarkecil.jpg' akan berulang
secara menegak dan melintangi laman web.
Perhatikan juga bahawa perkataan BODY dalam tag <STYLE> tidak mempunyai tanda < dan >
apabila ia dituliskan diantara tag <STYLE> dan </STYLE>. Perhatikan juga penggunaan dan
kedudukan tanda-tanda {, : dan }. Tanda-tanda ini dan kedudukannya adalah penting.
Untuk membuat gambar itu berulang secara melintang sahaja, gantikan 'repeat' dengan 'repeat-x'
:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
body {background-repeat:repeat-x}
</STYLE>
</HEAD>
<BODY BACKGROUND="GambarKecil.jpg">
<CENTER>
<FONT COLOR="YELLOW" SIZE=14>
Kereta lama dia
</FONT>
</CENTER>
</BODY>
</HTML>
Hasilnya :

Ini bererti, jika tinggi gambar itu kurang dari tinggi laman web, bahagian bawah laman web tidak
akan diisi dengan gambar berkenaan.
Untuk membuat gambar itu berulang secara menegak sahaja, gantikan 'repeat' dengan 'repeat-y' :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
body {background-repeat:repeat-y}
</STYLE>
</HEAD>
<BODY BACKGROUND="GambarKecil.jpg">
<CENTER>
<FONT COLOR="YELLOW" SIZE=14>
Kereta lama dia
</FONT>
</CENTER>
</BODY>
</HTML>
Hasilnya :

Ini bererti, jika lebar gambar itu kurang dari lebar laman web, bahagian kanan laman web tidak
akan diisi dengan gambar berkenaan.
Untuk membuat gambar itu tidak diulang (cuma satu kali sahaja), gantikan 'repeat' dengan 'no-
repeat' :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
body {background-repeat:no-repeat}
</STYLE>
</HEAD>
<BODY BACKGROUND="GambarKecil.jpg">
<CENTER>
<FONT COLOR="YELLOW" SIZE=14>
Kereta lama dia
</FONT>
</CENTER>
</BODY>
</HTML>
Hasilnya :

Gambar lebih besar dari laman web
Kadang-kadang kita atau pengguna laman web mengecilkan saiz laman web dengan
menggunakan tetikus. Ini menjadikan laman web lebih kecil dari saiz gambar. Ini menyebabkan
sebahagian gambar berkenaan tidak kelihatan sebagai latarbelakang.
Menyalin latarbelakang laman web orang lain
Semasa kita melayari laman web orang lain, jika kita menemui latarbelakang laman web yang
menarik dan kita mahu menyimpannya kedalam komputer kita (supaya kita boleh gunakan untuk
laman web kita nanti), kita boleh melakukannya dengan klik kanan pada laman web itu dan pilih
menu 'Save Background as'..

Satu dialog 'Save as' akan muncul.

Anda tentu biasa dengan dialog ini, untuk menyimpan gambar ke dolder tertentu dalam komputer
anda. Hanya satu gambar sahaja yang akan disimpan, bukan semua gambar yang berulang-
ulang).
Kita boleh juga memilih menu 'Copy background'. Ini akan menyalin gambar latarbelakang ke
klipbod. Kemudian kita boleh menampalnya (paste) gambar itu ke mana-mana program seperti
Paint, Word, Excel dan sebagainya.
Cantik latarbelakang, cantiklah laman web
Warna latarbelakang dan corak gambar latarbelakang yang cantik dan menarik akan membantu
mejadikan laman web kita cantik dan menarik.
Pengguna tidak mahu latarbelakang...
Kebanyakan pelayar web boleh di set oleh penggunanaya supaya tidak menayangkan gambar
latarbelakang bagi laman web. Ini dapat mempercepatkan penayangan laman web di skrin
komputer. Bagaimanapaun, bila pengguna melakukannya dan pembina laman web pula tidak
menyatakan ciri BGCOLOR bagi latarbelakang laman web, semua warna-warna yang ditetapkan
keatas warna teks dan warna pintasan bagi ciri seperti VLINK, ALINK, LINK dan lain-lain tidak
akan diambil peduli oleh pelayar web. Ini dapat mengelakkan teks dan pintasan dari sukar dibaca
disebabkan warna teks dan warna latarbelakang yang tidak sesuai antara satu sama lain seperti
kuning dan putih.
Contoh
Berikut ialah contoh satu laman web yang mempunyai latarbelakang tertentu :

Memformat huruf dan perkataan
Dalam bab ini kita akan belajar bagaimana menjadikan perkataan yang dipaparkan oleh Internet
Explorer kelihatan Bold, Italic, Underline, Small, Big, Superscript, Subscript, Strike, Strong dan
sebagainya. Anda biasa dengan istilah-istilah ini semasa menggunakan Word dan lain-lain
pemproses perkataan.
Sebelum itu, kita lihat semula hasil perkataan 'Saya boleh' yang tidak dikenakan apa-apa format :

Kodnya ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Saya boleh !!
</BODY>
</HTML>
B
Untuk menjadikan perkataan itu kelihatan 'Bold' (lebih gelap dan tebal sedikit), kita gunakan
tag <B> dan </B>. Kita letakkan perkataan itu diantara kedua-dua tag ini, seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<B>
Saya boleh !!
</B>
</BODY>
</HTML>
Hasilnya seperti berikut :

Perhatikan, perkataan itu kelihatan lebih gelab dari yang asal.
Perhatikan pula kod berikut (terutamanya kedudukan tag-tag <B> dan </B>) dan lihat kesannya:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<B>
Saya boleh !!
</B>
<BR>
Dia <B>Boleh !!</B>
<BR>
Mereka Bol<B>e</B>h
</BODY>
</HTML>
Hasilnya :

Dalam contoh diatas, seluruh baris pertama dikenakan tag <B>. Dalam baris kedua, hanya
perkataan 'Boleh' dikenakan tag <B>. Dalam baris ketiga, hanya huruf 'e' dalam perkataan
'Boleh' dikenakan tag <B>.
Kesimpulannya, apa-apa huruf atau perkataan yang kita letakkan diantara tag <B> dan </B>
akan kelihatan lebih gelap (Bold).
I
Untuk menjadikan perkataan kelihatan condong kanan (Italic), kita gunakan tag <I> dan </I>.
Kita masukkan perkataan atau huruf berkenaan diantara kedua-dua tag ini.
Perhatikan contoh penggunaannya dalam kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<I>
Saya boleh !!
</I>
<BR>
Dia <I>Boleh !!</I>
<BR>
Mereka Bol<I>e</I>h !!
</BODY>
</HTML>
Hasilnya :

Dalam contoh diatas, seluruh baris pertama dikenakan tag <I>. Dalam baris kedua, hanya
perkataan 'Boleh' dikenakan tag <I>. Dalam baris ketiga, hanya huruf 'e' dalam perkataan 'Boleh'
dikenakan tag <I>.
Kesimpulannya, apa-apa huruf atau perkataan yang kita letakkan diantara tag <I> dan </I> akan
kelihatan condong kekanan (Italic).
U
Untuk menjadikan perkataan atau huruf kelihatan ada garis dibawahnya (underline), kita
gunakan tag <U> dan </U>. U ialah ringkasan bagi 'Underline'. Kita masukkan perkataan atau
huruf berkenaan diantara kedua-dua tag ini.
Perhatikan contoh penggunaannya dalam kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<U>
Saya boleh !!
</U>
<BR>
Dia <U>Boleh !!</U>
<BR>
Mereka Bol<U>e</U>h !!
</BODY>
</HTML>
Hasilnya :

Dalam contoh diatas, seluruh baris pertama dikenakan tag <U>. Dalam baris kedua, hanya
perkataan 'Boleh' dikenakan tag <U>. Dalam baris ketiga, hanya huruf 'e' dalam perkataan
'Boleh' dikenakan tag <U>.
Kesimpulannya, apa-apa huruf atau perkataan yang kita letakkan diantara tag <U> dan </U>
akan kelihatan bergaris dibawahnya.
Strike
Huruf atau perkataan yang kita letakkan diantara tag <STRIKE> dan </STRIKE> akan
menjadikan perkataan atau huruf kelihatan terpotong dengan garisan (strikethrough).
Perhatikan kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<STRIKE>
Saya boleh !!
</STRIKE>
<BR>
Dia <STRIKE>Boleh !!</STRIKE>
<BR>
Mereka Bol<STRIKE>e</STRIKE>h !!
</BODY>
</HTML>
Hasilnya :

Dalam contoh diatas, seluruh baris pertama dikenakan tag <STRIKE>. Dalam baris kedua, hanya
perkataan 'Boleh' dikenakan tag <STRIKE>. Dalam baris ketiga, hanya huruf 'e' dalam perkataan
'Boleh' dikenakan tag <STRIKE>.
Small
Huruf atau perkataan yang diletakkan diantara tag <SMALL> dan </SMALL> menjadikan
perkataan atau huruf itu kelihatan kecil sedikit saiznya dari biasa.

Dalam contoh diatas, seluruh baris pertama dikenakan tag <SMALL>. Dalam baris kedua, hanya
perkataan 'Boleh' dikenakan tag <SMALL>. Dalam baris ketiga, hanya huruf 'e' dalam perkataan
'Boleh' dikenakan tag <SMALL>.
Kodnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<SMALL>
Saya boleh !!
</SMALL>
<BR>
Dia <SMALL>Boleh !!</SMALL>
<BR>
Mereka Bol<SMALL>e</SMALL>h !!
</BODY>
</HTML>
Big
Tag <BIG> dan </BIG> menjadikan perkataan atau huruf kelihatan besar sedikit saiznya dari
biasa.

Kodnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<BIG>
Saya boleh !!
</BIG>
<BR>
Dia <BIG>Boleh !!</BIG>
<BR>
Mereka Bol<BIG>e</BIG>h !!
</BODY>
</HTML>
Strong
Tag <STRONG> dan </STRONG> mempunyai kesan yang serupa dengan tag <B> dan </B>.
Super
Tag <SUPER> dan </SUPER> menjadikan huruf atau berkataan dalam keadaan 'Superscript',
contohnya : H
2
O. Angka 2 itu adalah di superscript kan.
Sub
Tag <SUB> dan </SUB> pula menjadikan huruf atau berkataan dalam keadaan 'Subscript',
contohnya : H
2
O. Angka 2 itu adalah di subscript kan.
TT
Tag <TT> dan </TT> menjadikan huruf atau perkataan kelihatan seperti
cetakan mesin taip dimana tiap-tiap huruf mempunyai lebar yang sama. TT ialah ringkasan bagi
TELETYPE. Contohnya huruf I dan M akan menggunakan lebar kawasan yang sama walaupun
huruf I kelihatan lebih kurus.

Kodnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<TT>Saya boleh !!</TT>
<BR>
<TT>Dia Boleh !!</TT>
<BR>
<TT>Mereka Boleh !!</TT>
</BODY>
</HTML>
Em
Tag <EM> dan </EM> jika digunakan akan mempunyai kesan yang sama dengan tag <I> dan
</I>. EM adalah bagi EMPHASIS (Penekanan).
Cite
Perkataan dalam tag <CITE> dan </CITE> biasanya berbentuk condong kekanan (serupa seperti
Italic) tetapi digunakan untuk menunjukkan bahawa perkataan atau ayat adalah cabutan atau
petikan dari ucapan atau buku dan lain-lain. Contohnya seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
John F.Kennedy pernah berkata : " <CITE> Jangan tanya apa yang
negara boleh buat untuk kamu tetapi tanyalah apa yang kamu
boleh buat untuk negara</CITE> " dalam satu majlis resmi.
</BODY>
</HTML>
Kesannya :

CITE adalah ringkasan bagi CITATION.
Code
Tag <CODE> dan </CODE> pula digunakan biasanya untuk menunjukkan bahawa ayat atau
perkataan didalamnya adalah satu kod program komputer. Ia mempunyai ciri tersendiri. Lihat
contoh kod berikut dan hasilnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Berikut ialah perkataan yang dikenakan tag CODE<BR><BR>
<CODE>
Dim S as string<BR>
S="makan"<BR>
Dim I as string<BR>
I=InputBox("Tulis apa-apa :",vbokonly,"Tulis")<BR>
If I=S Then msgbox "Ya, anda kuat makan.",vbokonly,"Jawapan"<BR>
</CODE>
<BR>
Sekian
</BODY>
</HTML>

Kbd
Perkataan dalam tag <KBD> dan </KBD> pula menghasilkan ciri seperti berikut :

Kesannya hampir sama dengan tag <TT> dan </TT>. KBD adalah ringkasan bagi KEYBOARD.
Samp
Perkataan dalam tag <SAMP> dan </SAMP> pula menghasilkan ciri seperti berikut :

SAMP adalah ringkasan bagi SAMPLE.
XMP
Perkataan diantara tag <XMP> dan </XMP> akan kelihatan sama kesannya seperti kesan
penggunaan tag <TT> dan </TT>, iaitu tiap-tiap huruf akan menggunakan ruang yang sama
saiznya. XMP adalah ringkasan bagi EXAMPLE.Biasanya digunakan untuk memberi contoh-
contoh kepada pengguna laman web supaya menimbulkan ciri khas keatas perkataan atau ayat
berkenaan.
Var
Perkataan dalam tag <VAR> dan </VAR> pula akan menghasilkan ciri hampir serupa dengan
tag <SAMP>. Ia adalah ringkasan bagi VARIABLE.
Kombinasi Bold dan Italic
Untuk menjadikan huruf atau perkataan Bold dan Italic kita tulis begini :
<B><I>Perkataan ini Bold dan Italic</I></B>
atau, begini :
<I><B>Perkataan ini Bold dan Italic</B></I>
tetapi tidak boleh begini :
<I><B>Perkataan ini Bold dan Italic</I></B>
Perhatikan kedudukan tag </B> dan </I>.
Kedudukan perkataan
Kita telah belajar mengenai kedudukan perkataan dalam bab sebelum ini.
Saiz perkataan
Untuk mengenakan saiz tertentu keatas huruf atau perkataan, kita gunakan tag <FONT
SIZE=X> dan tag </FONT> dimana kita letakkan huruf atau perkataan itu diantara kedua-dua
tag ini. X ialah saiz yang kita mahu. Saiz huruf adalah dalam unit pixel. Contoh kod :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<FONT SIZE=4>Ini saiz 4</FONT>
<BR>
Ini <FONT SIZE=6>Saiz 6</FONT>
<BR>
Ini pula Saiz <FONT SIZE=8> 8</FONT>
</BODY>
</HTML>
Lihat hasilnya :

Kita boleh menetapkan saiz font bagi satu huruf atau perkataan berdasarkan saiz huruf atau
perkataan sebelumnya dengan menggunakan tanda campur (+) atau tolak (-) dalam tag <FONT>.
Contohnya seperti berikut :
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Perkataan biasanya bersaiz 3.<BR>
<FONT SIZE=-2><P>Perkataan ini bersaiz 2 pixel kurang dari baris diatas</FONT><BR>
<FONT SIZE=+2><P>Perkataan ini bersaiz 2 pixel lebih dari baris kedua</FONT><BR>
</BODY>
</HTML>
Hasilnya :

Warna perkataan
Untuk mewarnakan huruf atau perkataan, kita gunakan tag <FONT
COLOR=X> dan </FONT>. Kita letakkan huruf atau perkataan yang hendak diwarnakan itu
diantara kedua-dua tag. X ialah warna yang kita mahu. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<FONT COLOR=BLUE>Biru</FONT>
<BR>
Warna <FONT COLOR=RED>Merah</FONT>
<BR>
Huruf H pula berwarna <FONT COLOR=GREEN> H</FONT>ijau
</BODY>
</HTML>
Hasilnya ialah :

Warna-warna yang boleh digunakan ialah : Aqua, Navy, Black, Olive, Blue, Purple, Fuchsia,
Red, Gray, Silver, Green, Teal, Lime, White, Maroon dan Yellow. Dalam bab 'Senarai warna'
kita akan belajar cara mendapatkan warna-warna lain dari 16 warna ini.
Nama-nama warna boleh ditulis dalam huruf kecil atau huruf besar atau bercampur-campur.
Jika kita mahu semua perkataan dalam laman web mempunyai warna yang sama, kita tuliskan
sahaja ciri TEXT=X dalam tag <BODY> dimana X ialah warna yang kita mahu. Contoh kod :
<BODY TEXT=RED>
Contoh kod yang agak penuh :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY TEXT=RED BGCOLOR=YELLOW>
Semua perkataan dalam laman web ini berwarna merah.
</BODY>
</HTML>
Hasilnya :

Keluarga Font
Contoh keluarga font ialah "courier", "courier new", "times", "times new roman", "arial", "serif"
dan sebagainya. Jika kita biasa menggunakan program Microsoft Word, kita tentu biasa dengan
banyak keluarga font. Nama keluarga font boleh kita tulis dalam huruf besar atau huruf kecil atau
bercampur-campur.
Ciri FACE=courier dalam tag <FONT> menjadikan huruf selepasnya berbentuk 'courier'. Contoh
penggunaan ialah seperti berikut :
<FONT FACE=courier>Perkataan ini menggunakan keluarga Courier</FONT>.
Berikut ialah contoh kod yang agak penuh :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Lihat contoh beberapa keluarga font :
<BR>
<BR>
<FONT FACE=courier>Courier</FONT>
<BR>
<FONT FACE=times>Times</FONT>
<BR>
<FONT FACE=Arial>Arial</FONT>
<BR>
<FONT FACE=Serif>Serif</FONT>
<BR>
<FONT FACE=tahoma>Tahoma</FONT>
<BR>
<FONT FACE=wingdings>Wingdings</FONT>
<BR>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya :

Drop cap
Kita boleh membuat kesan supaya huruf pertama dalam satu ayat atau perkataan bersaiz besar,
contohnya seperti berikut ;
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<FONT SIZE=+7>H</FONT>uruf pertama yang besar seperti ini dipanggil Drop-cap.
</BODY>
</HTML>
Perhatikan kedudukan tag <FONT SIZE=+7> dan </FONT>
Hasilnya :

Mengenakan beberapa format
Kita boleh mengenakan beberapa format sekaligus kepada satu-satu perkataan atau huruf.
Contohnya kita hendak mengenakan format berikut kepada perkataan "Perbagai format
dikenakan" :
Kedudukannya tegaknya di baris 4 dari atas laman web
Kedudukan lintangnya ialah di tengah laman web
Warna perkataan ialah biru
Saiz perkataan ialah 6
Condong kanan (Italic)
Kodnya ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<BR>
<BR>
<BR>
<CENTER>
<I>
<FONT SIZE=6 COLOR=BLUE>Pelbagai format dikenakan</FONT>
</I>
</CENTER>
</BODY>
</HTML>
Perhatikan cara bagaimana saiz (SIZE) dan warna (COLOR) di masukkan dalam tag <FONT>.
Dalam contoh ini, SIZE=6 dimasukkan lebih awal dari COLOR=BLUE. Kita boleh tuliskan
COLOR=BLUE lebih awal dari SIZE=6, begini :
<FONT COLOR=BLUE SIZE=6 >Pelbagai format dikenakan</FONT>
Hasilnya ialah seperti berikut :

Contoh kreatif penggunaan saiz font
Perhatikan kod berikut dan lihat kesannya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY BGCOLOR=BLACK>
<FONT COLOR=YELLOW>
<CENTER>
<FONT SIZE=-2>M</FONT>
<FONT SIZE=-1>A</FONT>
<FONT SIZE=+0>M</FONT>
<FONT SIZE=+1>A</FONT>
<FONT SIZE=+2>T</FONT>
<FONT SIZE=+4>b</FONT>
<FONT SIZE=+6>i</FONT>
<FONT SIZE=+6>n</FONT>
<FONT SIZE=+4>D</FONT>
<FONT SIZE=+2>O</FONT>
<FONT SIZE=+1>L</FONT>
<FONT SIZE=+0>L</FONT>
<FONT SIZE=-1>A</FONT>
<FONT SIZE=-2>H</FONT>
</CENTER>
</FONT>
</BODY>
</HTML>
Kesannya :

Semuanya menggunakan prinsip-prinsip yang telah kita pelajari.
Saiz-saiz tetap bagi perkataan
Tag-tag <H1>, <H2>, <H3>, <H4>, <H5> dan <H6> digunakan untuk menjadikan perkataan-
perkataan mempunyai saiz-saiz tertentu. Tiap-tiap tag ini mempunyai tag penutup masing-
masing iaitu </H1>, </H2>, </H3>, </H4>, </H5> dan </H6>. Perkataan-perkataan yang
diletakkan diantara tag-tag pembuka dan penutup masing-masing akan mempunyai saiz
tersendiri.
H dimaksudkan kepada HEADING (bermakna tajuk). Biasanya tag-tag ini digunakan bagi tajuk-
tajuk (heading) dalam laman web.
Tag <H1> adalah bagi saiz yang paling besar dan tag <H6> adalah bagi saiz yang paling kecil.
Perhatikan kod berikut yang akan menunjukkan saiz tiap-tiap perkataan yang dikenakan tag-tag
berkenaan :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<H6>Saiz H6</H6>
<H5>Saiz H5</H5>
<H4>Saiz H4</H4>
<H3>Saiz H3</H3>
<H2>Saiz H2</H2>
<H1>Saiz H1</H1>
</BODY>
</HTML>
Hasilnya :

Perhatikan juga bahawa tag <H1> hingga <H6> akan menyebabkan perkataan didalamnya
berada dalam baris tersendiri tanpa memerlukan penggunaan tag <BR>.
Mewarnakan perkataan dalam tag
Kita boleh mengenakan warna perkataan yang berada diantara tag-tag H dengan memasukkan
ciri STYLE=COLOR:X dalam tag itu. Contoh penggunaannya ialah seperti berikut :
<H1 STYLE=COLOR: GREEN>Warna hijau</H1>
Dalam contoh kod diatas, warna perkataan akan kelihatan hijau.
Antara warna-warna lain yang biasa digunakan ialah seperti berikut : Aqua, Navy, Black, Olive,
Blue, Purple, Fuchsia, Red, Gray, Silver, Green, Teal, Lime, White, Maroon, Yellow. Sila rujuk
bab 'Senarai warna' untuk mendapatkan warna-warna lain.
Berikut ialah satu contoh kod yang agak lengkap :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<H1 STYLE=COLOR:YELLOW>
Persembahan minggu ini
</H1>
1. Pak Kadok naik junjung
<BR>2. Si Tenggang
<BR>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya kelihatan seperti berikut :

Menetapkan warna latarbelakang tag <H>
Kita boleh menetapkan warna latarbelakang perkataan bagi mana-mana tag <H>. Kita gunakan
ciri STYLE dan nyatakan warna perkataannya, seperti berikut :
<H1 STYLE=BACKGROUND:YELLOW>
Dalam contoh ini, kita menetapkan warna kuning sebagai latarbelakang bagi tag <H1>.
Antara warna-warna lain yang biasa digunakan ialah seperti berikut : Aqua, Navy, Black, Olive,
Blue, Purple, Fuchsia, Red, Gray, Silver, Green, Teal, Lime, White, Maroon, Yellow. Sila rujuk
bab 'Senarai warna' untuk mendapatkan warna-warna lain.
Berikut ialah satu contoh kod yang agak lengkap :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<H1 STYLE=BACKGROUND:YELLOW>
Persembahan minggu ini
</H1>
1. Pak Kadok naik junjung
<BR>2. Si Tenggang
<BR>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya :

Menuliskan ciri warna dan latarbelakang serentak
Kita boleh menuliskan ciri warna tag H dan warna latarbelakang tag H serentak seperti berikut :
<H1 STYLE=BACKGROUND:YELLOW;COLOR:BLUE>
Persembahan minggu ini
</H1>
Perhatikan tanda ; dalam kod diatas sebagai pemisah antara ciri.
Hasilnya akan kelihatan seperti berikut :

Menetapkan kedudukan isi tag <H>
Secara otomatik setiap isi tag <H> akan muncul dikiri laman web. Kita boleh menyebabkannya
muncul di tengan laman web dengan menggunakan tag <CENTER> dan </CENTER>. Kita
letakkan tag <H> yang berkenaan diantara tag <CENTER> dan </CENTER>. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1 STYLE=COLOR:YELLOW;BACKGROUND:BLUE>
Persembahan minggu ini
</H1>
</CENTER>
</BODY>
</HTML>
Hasilnya :

Untuk meletakkan isi tag <H> dikanan laman web, gunakan tag <DIV ALIGN=RIGHT> dan
</DIV>, dimana kita letakkan tag <H>, isinya dan tag </H> diantara tag <DIV
ALIGN=RIGHT> dan </DIV> seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=RIGHT>
<H1 STYLE=BACKGROUND:BLUE;COLOR:YELLOW>
Persembahan minggu ini
</H1>
</DIV>
<BODY>
</HTML>
Hasilnya seperti berikut :

Menetapkan keluarga font bagi tag <H>
Contoh-contoh keluarga font (bentuk huruf) ialah Serif, Arial, Times, Courier dan sebaginya.
Jika kita tidak menetapkan keluarga font bagi isi tag <H>, secara otomatik pelayar web akan
menggunakan keluarga font yang dipilih sendiri oleh pelayar web, diluar kawalan kita. Jika kita
menetapkan suatu keluarga font tetapi pelayar web tidak menyokong keluarga font itu atau
komputer pengguna tidak mempunyai keluarga font berkenaan, pelayar web akan memilih
keluarga font yang tertentu juga.
Untuk menetapkan keluarga font bagi isi tag <H>, kita gunakan tag <FONT FACE=X> dan
</FONT>. X ialah bagi nama keluarga font. Kita letakkan tag <H> dan isinya diantara tag
<FONT FACE=X> dan </FONT> seperti contoh kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<FONT FACE="COURIER">
<H1>
Persembahan minggu ini
</H1>
</FONT>
<BODY>
</HTML>
Hasilnya :

Menggunakan stail
Kita boleh juga menggunakan tag <STYLE> dan </STYLE> yang diletakkan diantara tag
</TITLE> dan </HEAD> untuk menetapkan warna isi tag <H> dan warna latarbelakang isi tag
<H>. Contohnya, untuk mendapatkan isi tag <H1> yang berlatarbelakangkan warna biru dan
perkataannya berwarna kuning, kita tuliskan begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
H1 {COLOR:YELLOW;BACKGROUND:BLUE}
</STYLE>
</HEAD>
<BODY>
<H1>
Persembahan minggu ini
</H1>
</BODY>
</HTML>
Perhatikan tanda-tanda { dan }.
Hasilnya akan sama seperti gambarajah diatas.
Mengubah saiz huruf tag <H>
Walaupun isi tiap-tiap tag <H> akan mempunyai saiz huruf yang tertentu, kita masih boleh
mengubah saiz huruf-huruf bagi tag-tag berkenaan, contohnya apabila kita kurang berkenan
dengan saiz asal itu.
Untuk mengubah saiz huruf tag <H> yang tertentu, kita gunakan tag <STYLE>
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
H1 {FONT SIZE:15}
</STYLE>
</HEAD>
<BODY>
<H1>
Persembahan minggu ini
</H1>
</BODY>
</HTML>
Hasilnya :

Menetapkan beberapa ciri serentak
Kita boleh menetapkan beberapa ciri bagi isi tag <H> serentak, bukan satu demi satu seperti
contoh-contoh diatas. Contohnya kita boleh menetapkan tag <H1> yang menggunakan font jenis
courier, bersaiz 8, warna kuning dan latarbelakang biru. Kita tuliskan begini dalam tag
<STYLE>:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
H1 {FONT:COURIER; SIZE:8; COLOR:YELLOW; BACKGROUND:BLUE}
</STYLE>
</HEAD>
<BODY>
<CENTER>
<H1>
Persembahan minggu ini
</H1>
</CENTER>
</BODY>
</HTML>
Atau, kita boleh tuliskan begini (jika tidak menggunakan tag <STYLE>) :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1 STYLE=FONT:COURIER; SIZE:8; COLOR:YELLOW; BACKGROUND:BLUE>
Persembahan minggu ini
</H1>
</CENTER>
</BODY>
</HTML>
Jarak antara huruf
Kita boleh menetapkan jarak antara huruf yang berdekatan dalam tag <H> yang sama dengan
menggunakan ciri 'letter-spacing' (jarak huruf) dalam tag <STYLE>.
Ciri 'letter-spacing' boleh ditulis dalam ukuran pt (bagi point), in (bagi inci), cm (bagi
sentimeter), pl (bagi pixel) atau x% (peratusan dari jarak yang terdahulu).
Contohnya :
<html>
<head>
<title>
Muka 1
</title>
<STYLE>
H2 {letter-spacing:20pt}
</STYLE>
</HEAD>
<body>
<h2>Persembahan<h2>
</body>
</html>
Ini menetapkan jarak antara huruf dalam satu tag <H2> sebanyak 20 point. Semua isi tag <H2>
dalam laman web akan dikenakan jarak huruf yang sama.
Kesannya ialah seperti berikut :

Kita boleh tetapkan jarak huruf yang berbeza bagi tag <H> yang tertentu, bukan terpakai pada
setiap tag <H>, dengan cara menuliskan ciri berkenaan pada tag yang berkenaan, seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<H2 STYLE=letter-spacing:10pt>
Huruf-huruf dalam heading ini berjarak 10 point antara satu sama lain.
</H2>
<H2 STYLE=letter-spacing:5pt>
Huruf-huruf dalam heading ini pula berjarak 5 point antara satu sama lain.
</H2>
</BODY>
</HTML>
Kesannya :

Jarak antara perkataan
Kita boleh menetapkan jarak antara perkataan yang berdekatan dalam semua tag <H> yang sama
dengan menggunakan ciri 'word-spacing' (jarak perkataan) dalam tag <STYLE>.
Ciri 'word-spacing' boleh ditulis dalam ukuran pt (bagi point), in (bagi inci), cm (bagi
centimeter), pl (bagi pixel) atau x% (bagi peratusan dari jarak yang terdahulu).
Contoh penggunaan ciri 'word-spacing' bagi tag <H>:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
H3 {word-spacing:1in}
</STYLE>
</HEAD>
<BODY>
<H3>Jarak 20 point antara perkataan</H3>
</BODY>
</HTML>
Kod diatas menetapkan jarak antara perkataan dalam semua tag <H3> yang ada dalam laman
web yang sama sebanyak 20 point.
Kita boleh menetapkan jarak yang berbeza bagi tag <H> yang tertentu, bukan terpakai pada
setiap tag dengan memasukkan ciri 'STYLE=word-spacing=X' terus dalam tag <H>, dimana X
ialah jarak yang kita mahu. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<H3 STYLE=word-spacing:10pt>Jarak 10 point antara perkataan.</H3>
<H4 STYLE=word-spacing:15pt>Jarak 15 point antara perkataaan.
</H4>
</BODY>
</HTML>
Membina dan mengendali perenggan
Perenggan ialah sekumpulan perkataan yang berada dalam baris-baris yang rapat antara satu
sama lain. Satu perenggan akan kelihatan terpisah oleh satu baris kosong dengan baris-baris
perkataan yang lain, samada diatas atau dibawahnya.
Lihat contoh berikut :

Perhatikan, dalam contoh diatas, perkataan "Mula..." dan "Serba boleh" masing-masing terpisah
dari kumpulan perkataan "Saya boleh .......... bolehkah" dengan satu baris kosong kerana
kumpulan perkataan itu telah di set sebagai satu perenggan.
Untuk membuat satu perenggan, kita gunakan tag <P> dan </P>.
Kod bagi laman web diatas ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<P>
Saya boleh, dia boleh, mereka boleh, sudah boleh, belum boleh, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
Serba boleh
</BODY>
</HTML>
Sila ambil perhatian tentang bilangan baris dalam perenggan dalam kod (2 baris) dengan
bilangan baris dalam perenggan yang dipaparkan (3 baris). Perbezaan bilangan baris ini berlaku
apabila lebar laman web tidak dapat menampung sepenuhnya lebar baris dalam kod. Secara
otomatik, perkataan yang tidak dapat ditampung akan dimasukkan kedalam baris berikutnya.
Kedudukan isi perenggan
Secara otomatik, isi perenggan adalah tersisi kiri, seperti kita lihat diatas. Kita boleh menjadikan
isi perenggan tersisi di tengah dengan memasukkan ciri ALIGN="CENTER" dalam tag <P>,
seperti contoh berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<P ALIGN="CENTER">
Saya boleh, dia boleh, mereka boleh, sudah boleh, belum boleh, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
Serba boleh
</BODY>
</HTML>
Atau, kita letakkan tag <P> dan </P> diantara tag <CENTER> dan </CENTER> seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<CENTER>
<P>
Saya boleh, dia boleh, mereka boleh, sudah boleh, belum boleh, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
</CENTER>
Serba boleh
</BODY>
</HTML>
Hasilnya serupa seperti berikut :

Kita boleh menjadikan isi perenggan tersisi kanan dengan memasukkan ciri ALIGN="RIGHT"
dalam tag <P> :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<P ALIGN="RIGHT">
Saya boleh, dia boleh, mereka boleh, sudah boleh, belum boleh, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
Serba boleh
</BODY>
</HTML>
Atau, kita masukkan tag <P> dan </P> diantara tag <DIV ALIGN="RIGHT"> dan </DIV>
seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<DIV ALIGN="RIGHT">
<P>
Saya boleh, dia boleh, mereka boleh, sudah boleh, belum boleh, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
</DIV>
Serba boleh
</BODY>
</HTML>
Hasilnya akan kelihatan serupa, begini :

Mewarna isi perenggan
Kita boleh mewarnakan perkataan dalam perenggan dengan menggunakan tag <FONT
COLOR=X> dan </FONT>. X ialah warna yang berkenaan. Kita masukkan perenggan diantara
tag <FONT COLOR=X> dengan </FONT>. Contohnya untuk mewarna merah kepada perkataan
dalam perenggan, kita tuliskan kod begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<FONT COLOR="RED">
<P>
Saya boleh, dia boleh, mereka boleh, sudah boleh, belum boleh, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
</FONT>
Serba boleh
</BODY>
</HTML>
Hasilnya :

Kita boleh juga mewarna sebahagian perkataan sahaja dalam perenggan dengan menggunakan
tag <FONT COLOR=X> keatas perkataan itu sahaja, bukan pada seluruh perenggan. Contohnya
:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<P>
Saya <FONT COLOR="BLUE">boleh</FONT>, dia <FONT
COLOR="RED">boleh</FONT>, mereka <FONT COLOR="GREEN">boleh</FONT>, sudah
<FONT COLOR="YELLOW">boleh</FONT>, belum <FONT
COLOR="MAGENTA">boleh</FONT>, boleh boleh, semua boleh, janji boleh, asalkan boleh,
bolehlah, tak boleh, bolehkah
</P>
Serba boleh
</BODY>
</HTML>
Hasilnya :

Untuk mendapatkan warna-warna lain, sila rujuk bab 'Senarai Warna'.
Saiz perkataan dalam perenggan
Kita boleh menetapkan saiz semua huruf atau perkataan dalam perenggan dengan memasukkan
tag <P> dan </P> diantara tag <FONT SIZE=X> dan </FONT>. X ialah saiz huruf yang
berkenaan. Contoh kod :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<FONT SIZE=4>
<P>
Saya boleh, dia boleh, mereka boleh, sudah boleh, belum boleh, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
</FONT>
Serba boleh
</BODY>
</HTML>
Hasilnya :

Sudah tentu kita boleh menetapkan saiz huruf atau perkataan tetentu sahaja dalam perenggan
dengan memasukkan perkataan itu sahaja diantara tag <FONT SIZE=X> dan </FONT>.
Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<P>
Saya <FONT SIZE=4>boleh</FONT>, dia <FONT SIZE=5>boleh</FONT>, mereka <FONT
SIZE=6>boleh</FONT>, sudah <FONT SIZE=7>boleh</FONT>, belum <FONT
SIZE=8>boleh</FONT>, boleh boleh, semua boleh, janji boleh, asalkan boleh, bolehlah, tak
boleh, bolehkah
</P>
Serba boleh
</BODY>
</HTML>
Hasilnya :

Kesimpulannya, tag-tag lain yang boleh dikenakan keatas perkataan seperti <U>, <I>, <B> dan
sebagainya (kita pelajari dalam bab yang lalu) boleh dikenakan pada seluruh perenggan atau
perkataan/huruf dalam perenggan. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<P>
Saya <U>boleh</U>, dia <B>boleh</B>, mereka <I>boleh</I>, sudah
<STRIKE>boleh</STRIKE>, belum <B><I>boleh</I></B>, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
Serba boleh
</BODY>
</HTML>
Hasilnya :

Margin perenggan
Margin perenggan ialah jarak diantara tepi (kiri, kanan, atas atau bawah) laman web dengan isi
perenggan.
Katakan kita mahu menetapkan satu perenggan yang marginnya ialah 2 inci dari kiri laman
web. Kita boleh gunakan ciri 'STYLE=margin-left:2in' dalam tag <P>. Contohnya begini :
<P STYLE="margin-left:2in">
Berikut ialah contoh kod penuh :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Mula...
<P STYLE="margin-left:2in">
Saya boleh, dia boleh, mereka boleh, sudah boleh, belum boleh, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
Serba boleh
</BODY>
</HTML>
Hasilnya :

Kita boleh tukar margin-left dengan margin-right menjadi seperti berikut :
<P STYLE="margin-right:2in">
Hasilnya akan kelihatan seperti berikut :

Kita boleh gantikan in (bagi inci) dengan cm (bagi sentimeter) atau mm (bagi milimeter) atau px
(bagi pixel).
Untuk menetapkan margin sebelah atas, kita gunakan margin-top seperti berikut :
<P STYLE="margin-top:1in">
Hasilnya :

Jika kita gunakan pula margin-bottom seperti berikut :
<P STYLE="margin-bottom:1in">
Hasilnya ialah :

Sudah tentu kita boleh gunakan keempat-empat margin sekaligus seperti ini :
<P STYLE="margin-top:0.5in;margin-bottom=0.5in;margin-left:0.5in;margin-right:0.5in">
Hasilnya :

Sebenarnya kita boleh gunakan 'margin-all' untuk menggantikan baris kod diatas (jika semua
margin adalah sama) seperti kod berikut :
<P STYLE="margin-all:0.5in">
Mengenakan stail tertentu keatas isi perenggan
Kita boleh mengenakan stail tertentu yang sama keatas semua perenggan dalam laman web yang
sama dengan menggunakan tag <STYLE> dan </STYLE>. Tag <STYLE> dan </STYLE> kita
letakkan diantara tag </TITLE> dengan tag </HEAD>. Kita tuliskan huruf P sebagai
menunjukkan bahawa kita mahu mengenakan stail keatas perenggan, diikuti dengan ciri dan nilai
bagi ciri itu. Contohnya ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
P {margin-left:0.5in;margin-right:0.5in;}
</STYLE>
</HEAD>
<BODY>
<P>
Isi perenggan
</P>
</BODY>
</HTML>
Perhatikan, kita menggunakan tag <STYLE> dan </STYLE>, bukan lagi ciri STYLE dalam tag
<P>. Perhatikan juga huruf P tanpa tanda < dan > dalam tag ini. Perhatikan juga penggunaan
tanda {, :, ; dan }.
Apabila kita menulis baris berikut dalam tag <STYLE> diatas :
P {margin-left:0.5in;margin-right:0.5in;}
Ini bermaksud kita akan mengenakan stail itu keatas apa-apa perenggan yang akan ada dalam
<BODY>. Maknanya, jika kita ada lebih dari satu tag perenggan <P>, semua isi tag-tag <P>
akan mempunyai stail itu. Ini bererti kita boleh menjimatkan masa kerana dengan menulis stail
satu kali sahaja, stail itu boleh dikenakan pada semua perenggan dalam laman web. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
P {margin-left: 0.5in;margin-right:0.5in;}
</STYLE>
</HEAD>
<BODY>
Awas...
<P>Isi perenggan pertama</P>
Sedia
<P>Isi perenggan kedua</P>
Cabut..
</BODY>
</HTML>
Hasilnya :

Sebenarnya kita boleh membina lebih dari satu stail bagi perenggan, dimana kita boleh
menetapkan suatu perenggan menggunakan stail yang berlainan dari perenggan yang lain.
Katakan kita hendak membina 2 stail yang berlainan untuk perenggan. Katakan stail itu kita
namakan 'stailsatu' dan 'staildua'. Tiap-tiap stail mempunyai ciri berlainan. Kita akan tuliskan
begini dalam tag <STYLE>:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
P.stailsatu
{
font: 10pt Courier;
color: blue;
margin-left: .25in;
margin-right: 2.5in;
}
P.staildua
{
font: 10pt Times;
color: blue;
margin-left: 2.5in;
margin-right: .25in;
}
</STYLE>
</HEAD>
<BODY>
<p>Isi perenggan pertama<p>
<p>Isi perenggan kedua</p>
</body>
</html>
Perhatikan tanda titik dalam perkataan 'P.stailsatu' dan 'P.staildua'. Inilah cara kita mencipta stail
yang berbeza bagi perenggan.
Untuk mengenakan 'stailsatu' kepada satu perenggan, kita tuliskan pula ciri 'CLASS=stailsatu'
dalam tag <P> perenggan yang berkenaan, begini :
<BODY>
<P CLASS="stailsatu">Isi perenggan</P>
</P>
Untuk mengenakan 'staildua' kepada perenggan yang lain, kita tuliskan pula ciri
'CLASS=staildua' dalam tag <P> perenggan yang berkenaan, begini :
<BODY>
<P CLASS="staildua">Isi perenggan</P>
</P>
jadi disini kita diperkenalkan dengan ciri CLASS.
Berikut ialah contoh kod penuh :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
P.stailsatu
{
font: 10pt Courier;
color: blue;
margin-left: .5in;
margin-right: 1.5in;
}
P.staildua
{
font: 10pt Times;
color: red;
margin-left: 1.5in;
margin-right: 2.5in;
}
</STYLE>
</HEAD>
<BODY>
<P CLASS="stailsatu">
Isi perenggan pertama - menggunakan stailsatu
</P>
<P CLASS="staildua">
Isi perenggan kedua - menggunakan staildua
</P>
<P CLASS="stailsatu">
Isi perenggan ke tiga - menggunakan stailsatu
</P>
</BODY>
</HTML>
Hasilnya :

Huruf pertama perenggan
Kadang-kadang kita mahu membuat huruf pertama dalam satu perenggan lebih besar dari huruf-
huruf lain dalam perenggan itu (Ini biasanya digelar 'drop-cap') :
Contohnya :
uruf pertama dalam baris ini ialah huruf H.
H
Kita boleh membinanya dengan memasukkan ciri 'first-character' dalam tag <STYLE> dan
menyatakan nilai bagi ciri itu, seperti kod berikut :
<html>
<head>
<title>
Muka 1
</title>
<STYLE>
P:first-character {float:left contour}
P:first-character {font: 30pt Arial; color: black}
</STYLE>
</head>
<body>
<p>Isi perenggan</p>
</body>
</html>
Perhatikan kedudukan tanda-tanda :
Huruf pertama akan kelihatan tergantung dikiri perenggan (float:left contour) dengan saiz 30
point font Arial dan warna hitam.
Beberapa cara lain menggantung huruf pertama selain 'left contour' ialah :
P:first-character {float: left box}
P:first-character {float: right contour}
P:first-character {float: right box}
Baris pertama perenggan
Kita boleh menetapkan ciri-ciri bagi baris pertama bagi satu-satu perenggan. Contohnya kita
boleh mengenakan font (bentuk huruf), warna perkataan dan warna latarbelakang bagi baris
pertama perenggan. Kita gunakan ciri 'P:first-line' dan nyatakan ciri yang berkenaan dalam tag
<STYLE> dan nyatakan nilai bagi ciri itu, begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
P:first-line {font: 16pt Times; color: blue}
</STYLE>
</HEAD>
<body>
<p>Isi perenggan</p>
</body>
</html>
Dalam kod diatas kita menetapkan supaya baris pertama dalam satu perenggan menggunakan
font Times saiz 16 dengan warna latarbelakang baris itu ialah biru.
Kita boleh juga menetapkan lebih dari satu stail bagi baris pertama perenggan. Contohnya :
<STYLE>
P.StailBarisPertamaA { first-line font: 10pt Courier; color: blue;}
P.StailbarisPertamaB { first-line font: 10pt Times; color: yellow;}
</STYLE>
Contoh penggunaan :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
P.StailBarisPertamaA { first-line font: 10pt Courier; color: blue;}
P.StailBarisPertamaB { first-line font: 15pt Times; color: yellow;}
P.StailBarisPertamaC { first-line font: 20pt Arial; color: red;}
</STYLE>
</HEAD>
<BODY>
<P CLASS="StailBarisPertamaA">Perenggan pertama</P>
<P CLASS="StailBarisPertamaB">Perenggan kedua</P>
<P CLASS="StailBarisPertamaC">Perenggan ketiga</P>
</BODY>
</HTML>
Warna latarbelakang perenggan
Kita boleh menetapkan warna latarbelakang (background colour) bagi satu perenggan.
Kita masukkan ciri 'STYLE=background:X' dalam tag <P> dimana X ialah warna yang
berkenaan.
Contoh penggunaan :
<P STYLE=background:"yellow">
Dalam contoh ini, kita menetapkan warna kuning sebagai latarbelakang bagi satu perenggan.
Antara warna-warna yang biasa digunakan ialah seperti berikut : Aqua Navy Black Olive Blue
Purple Fuchsia Red Gray Silver Green Teal Lime White Maroon Yellow. Untuk memperoleh
warna lain, sila rujuk bab 'Senarai warna'.
Berikut ialah contoh kod penuh :
<html>
<head>
<title>
Muka 1
</title>
</head>
<body>
<p STYLE=background:"yellow">
Latarbelakang perenggan ini berwarna kuning
</p>
</body>
</html>
Kesannya :

Lebar perenggan
Kita boleh menetapkan lebar perenggan dengan menggunakan ciri "width:x" dimana x ialah
suatu peratus dari lebar laman web (contohnya 50%). Ciri ini kita tuliskan selepas huruf P (bukan
<P>) menandakan ciri ini adalah dikenakan pada isi tag perenggan. Ianya dituliskan seperti
berikut :
P {width:60%}
Baris ini dituliskan diantara tag <STYLE> dan </STYLE>. Tag <STYLE> dan </STYLE> ini
pula diletakkan diantara tag </TITLE> dan </HEAD>. Berikut ialah contoh kod penuh :
<html>
<head>
<title>
Muka 1
</title>
<STYLE>
P {WIDTH:50%}
</STYLE>
</head>
<body>
Mula...
<P>
Saya boleh, dia boleh, mereka boleh, sudah boleh, belum boleh, boleh boleh, semua boleh, janji
boleh, asalkan boleh, bolehlah, tak boleh, bolehkah
</P>
Serba boleh
</body>
</html>
Hasilnya akan kelihatan begini :

Ketinggian baris perenggan
Tinggi baris perengan bermaksud jarak antara baris dalam perenggan. Seperti yang kita lihat
dalam contoh-contoh sebelum ini, tinggi baris secara otomatik adalah mengikut piawai (standad)
yang ditetapkan oleh Internet Explorer.
Kita boleh menetapkan tinggi baris dengan menggunakan tag <STYLE> dan memasukkan huruf
P serta ciri 'line-height=x' (tinggi baris) dimana x ialah nilai ketinggian.
Ciri 'line-height' boleh ditulis dalam ukuran pt (bagi point), in (bagi inci), cm (bagi centimeter),
pl (bagi pixel) atau x% (peratusan dari tinggi yang terdahulu).
Contoh kod :
</TITLE>
<STYLE>
P {line-height:5pt}
</STYLE>
</HEAD>
Kod ini menetapkan tinggi tiap-tiap baris dalam perenggan sebanyak 5 point.
Contoh kod penuh :
<html>
<head>
<title>
Muka 1
</TITLE>
<STYLE>
P {line-height:7pt}
</STYLE>
</head>
<body>
<p>Tinggi tiap-tiap baris dalam perenggan ini ialah sebanyak 7 point hingga menyebabkan
baris-baris terlalu rapat antara satu sama lain</p>
</body>
</html>
Kesannya :

Kita boleh tetapkan tinggi yang berbeza bagi perenggan yang tertentu, bukan terpakai pada setiap
tag dengan menuliskan ciri STYLE=line-height=X dalam tag <P> yang berkenaan. Contohnya :
<BODY>
<P STYLE=line-height:14pt>
Jarak antara baris dalam perenggan ini ialah 14 point
</P>
</BODY>
Contoh kod penuh :
<html>
<head>
<title>
Muka 1
</TITLE>
</head>
<body>
<p STYLE=line-height=8pt>Tinggi tiap-tiap baris dalam perenggan ini ialah sebanyak 8
point</p>
<p STYLE=line-height=20pt>Tinggi tiap-tiap baris dalam perenggan ini pula ialah sebanyak 20
point</p>
</body>
</html>
Kesannya :

Jarak antara huruf dalam perenggan
Kita boleh menetapkan jarak antara huruf yang berdekatan dalam perenggan yang sama dengan
menggunakan ciri 'letter-spacing=X' (jarak huruf) dalam tag <STYLE> dimana X ialah jarak
yang kita mahu.
Nilai X dalam ciri 'letter-spacing' boleh ditulis dalam ukuran pt (bagi point), in (bagi inci), cm
(bagi centimeter), pl (bagi pixel) atau x% (bagi peratusan dari jarak yang terdahulu).
Contohnya :
</TITLE>
<STYLE>
P {letter-spacing: 20pt}
</STYLE>
</HEAD>
Ini menetapkan jarak antara huruf dalam satu perenggan sebanyak 20 point. Semua perenggan
dalam laman web akan dikenakan jarak huruf yang sama.
Contoh kod penuh :
<html>
<head>
</TITLE>
<STYLE>
P {letter-spacing:20pt}
</STYLE>
</HEAD>
<body>
<p>Perenggan 1</p>
<p>Perenggan 2</p>
<p>Perenggan 3</p>
</body>
</html>
Kesannya :

Kita boleh tetapkan jarak huruf yang berbeza bagi perenggan yang berlainan, bukan terpakai
pada setiap perenggan, dengan menuliskan ciri STYLE=letter-spacing:X dalam tag-tag <P> yang
berkenaan, seperti berikut :
<html>
<head>
<title>
Muka 1>
</title>
<BODY>
<P STYLE=letter-spacing:8pt>
Jarak 8 point antara huruf.
</P>
<P STYLE=letter-spacing:1pt>
Jarak 1 point antara huruf.
</P>
</BODY>
</html>
Kesannya :

Jarak antara perkataan
Kita boleh menetapkan jarak antara perkataan yang berdekatan dalam perenggan yang sama
dengan menggunakan ciri 'word-spacing' (jarak perkataan) dalam tag <STYLE>.
'word-spacing' boleh ditulis dalam ukuran pt (bagi point), in (bagi inci), cm (bagi sentimeter), pl
(bagi pixel) atau x% (bagi peratusan dari jarak yang terdahulu).
Contoh penggunaan ciri 'word-spacing' bagi perenggan:
</TITLE>
<STYLE>
P {word-spacing:10pt}
</STYLE>
</HEAD>
Kod diatas menetapkan jarak antara perkataan dalam satu perenggan sebanyak 10 point. Ini akan
dkenakan keatas semua perenggan yang terdapat dalam laman web yang sama.
Kita boleh menetapkan jarak antara perkataan yang berbeza bagi tag yang berlainan, bukan
terpakai pada setiap tag dengan memasukkan ciri 'STYLE=word-spacing=X' terus dalam tag <P>
dimana X ialah jarak yang kita mahu. Contohnya :
<BODY>
<P STYLE=word-spacing:10pt>
Perkataan-perkataan dalam perenggan ini berjarak 10 point antara satu sama lain.
</P>
<P STYLE=word-spacing:15pt>
Perkataan-perkataan dalam perenggan ini pula berjarak 15 point antara satu sama lain.
</P>
</BODY>
Ketebalan huruf (font)
Kita boleh menetapkan ketebalan font (font-weight) yang akan digunakan pada perenggan. Ada
beberapa ketebalan font yang boleh kita tetapkan:
font-weight: light
font-weight: lighter
font-weight: extra-light
font-weight: demi-light
font-weight: bold
font-weight: bolder
font-weight: demi-bold
font-weight: extra bold
font-weight: medium
Kita menetapkan ketebalan font dengan menyatakannya dalam ciri STYLE yang kita masukkan
dalam tag-tag <P> yang berkenaan.
Berikut ialah contoh menggunakan ketebalan font :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<DL>
<DT>
Bergetah
<P STYLE=font-weight:lighter>
Boleh melekat bila di sentuh atau di pandang
</P>
<P>
Gulai
<P STYLE=font-weight:bolder>
Satu hasil masakan
</P>
</BODY>
</HTML>
Kes (case) huruf
Kita boleh menetapkan 'case' huruf dalam satu perenggan samada seperti asal (sebagaimana kod
di tulis), huruf besar bagi huruf pertama, semua huruf kecil atau semua huruf besar. Ia dilakukan
dengan menggunakan ciri 'STYLE=text-transform=X' dalam tag-tag <P> yang berkenaan
dimana X ialah samada 'none', 'capitalize', 'lowercase' atau 'uppercase'. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<P STYLE=text-transform:capitalize>
semua huruf dalam kod perenggan ini ditulis dalam huruf kecil tetapi
huruf pertamanya kelihatan berhuruf besar kerana stailnya telah ditetapkan demikian.
</P>
<P STYLE=text-transform:uppercase>
semua huruf dalam kod perenggan ini ditulis dalam huruf kecil tetapi
kelihatan semuanya berhuruf besar kerana stailnya telah ditetapkan demikian.
</P>
<P STYLE=text-transform:lowercase>
semua huruf dalam kod perenggan ini ditulis dalam huruf BESAR tetapi
kelihatan semuanya berhuruf KECIL kerana stailnya telah ditetapkan demikian.
</P>
<P STYLE=text-transform:none>
Semua huruf dalam kod perenggan kelihatan sama sebagaimana kodnya ditulis.
</P>
</BODY>
</HTML>
Membuat perkataan berbayang
Kita boleh membuat satu-satu perkataan seolah-olah berbayang dengan memasukkannya dalam
perenggan kemudian mengenakan warna yang berbeza keatas perenggan dan perkataan. Berikut
ialah contoh kod yang melakukannya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
P.berbayang { font:20pt Courier; background:Silver; color:blue;)
</STYLE>
</HEAD>
<BODY>
<P CLASS=berbayang>
Perkataan berbayang
</P>
</BODY>
</HTML>
Contoh kreatif penggunaan tag <P>
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY BGCOLOR=black TEXT=white>
p<P>
e<P>
r<P>
k<P>
a<P>
t<P>
a<P>
a<P>
n<P>
<P>
t<P>
e<P>
g<P>
a<P>
k<P>
</BODY>
</HTML>
Hasilnya :

Memasukkan dan mengendali gambar atau
grafik dalam laman web
Sediakan gambar dahulu
Untuk memasukkan gambar-gambar kedalam Laman Web, fail-fail gambar
mestilah disediakan terlebih dahulu. Gambar-gambar bermaksud lukisan, foto, grafik dan lain-
lain lagi.
Banyak program-program komputer yang boleh digunakan untuk membuat gambar seperti
Microsoft Paint, Image Composer, Photo Editor, PaintShop Pro, CorelDraw dan lain-lain lagi.
Kita mestilah tahu serba sedikit mengenai cara membuat gambar menggunakan program-
program ini.
Berbagai-bagai program menghasilkan berbagai-bagai format gambar seperti bmp, jpg, gif dan
sebagainya. Semuanya boleh dimasukkan dalam laman web. Bagaimanapun, jika kita mahu
meletakkan laman web kita di Internet, gunakan program-program yang menghasilkan format
"jpg", "jpeg" atau "gif" seperti PaintShop Pro, Gif Constructor, Photo Editor, Image Composer
dan sebagainya. Untuk kegunaan sendiri, kita boleh gunakan apa-apa format gambar.
Selepas kita membina gambar, simpan fail gambar tadi dalam cakera keras. Seeloknya, buat
permulaan, simpan fail gambar dalam folder yang sama dengan laman web. Ingat nama folder
dimana gambar itu disimpan (kerana kita akan merujuk alamat fail gambar itu dalam kod laman
web).
Untuk menghasilkan gambar yang cantik kita perlulah pandai melukis atau mengambil gambar
yang dibuat oleh orang lain (pastikan kita mendapat kebenaran dari pihak berkenaan) atau
meminta tolong kawan kita. Banyak juga cakera CD dan laman web yang menyediakan gambar-
gambar yang cantik-cantik untuk digunakan dalam laman web secara percuma oleh sesiapa saja.
Berikut ialah beberapa sumber gambar di internet :
http://pubweb.nexor.co.uk/public/Archie/servers.html
http://netletter.com/cameo/hotlist/hotlist.htm
http://www.scs.unr.edu/Veronica.html
Kita boleh juga menggunakan mesin pengimbas untuk mengimbas gambar atau mengambil
gambar menggunakan kamera digital dan menyimpannya dalam cakera keras komputer kita.
Gunakan tag <IMG>
Katakan kita mempunyai gambar yang disimpan dengan nama 'GambarKereta.jpg' dalam folder
yang sama dengan Laman Web kita, kita gunakan tag <IMG> berserta ciri SRC untuk
memasukkan gambar itu kedalam laman web. Contohnya :
<IMG SRC="GambarKereta.jpg">.
Berikut ialah contoh penggunaannya yang lebih lengkap:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Gambar kereta
<BR>
<BR>
<IMG SRC="GambarKereta.jpg">
<BR>
<BR>
Sekian
</BODY>
</HEAD>
</HTML>
Hasilnya :

IMG ialah kependekan bagi IMAGE, bermakna gambar. SRC pula kependekan bagi SOURCE
iaitu sumber dimana gambar itu berada dan nama gambar. Jika gambar itu berada dalam folder
'C:\Semua Gambar\', maka kita hendaklah menulis begini :
<IMG SRC="C:\Semua Gambar\GambarKereta.jpg">
Jika kita hendak memasukkan gambar yang berada di internet dimana ia berada dalam komputer
milik syarikat ABC.com, tuliskan begini :
<IMG SRC="http://www.ABC.com/GambarDia.gif">
Pastikan kita mendapat kebenaran pemiliknya sebelum kita menggunakan gambar milik mereka.
Kedudukan gambar
Secara otomatik, gambar akan muncul dikiri laman web. Kita boleh meletakkan gambar
ditengah atau kanan laman web dengan menggunakan tag <DIV> dan memasukkan ciri
ALIGN="center" atau ALIGN="right" didalamnya. Contoh penggunaannya seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Gambar kereta
<BR>
<BR>
<DIV ALIGN="CENTER">
<IMG SRC="GambarKereta.jpg">
</DIV>
<BR>
<BR>
Sekian
</BODY>
</HEAD>
</HTML>
DIV adalah ringkasan bagi DIVIDE. ALIGN bermakna sisihan (kedudukan). Kod diatas
menyebabkan gambar berada ditengah laman web.
Berikut ialah contoh hasil setelah kita gunakan ciri ALIGN="CENTER" dalam tag <DIV> :

Untuk memasukkan gambar ditengah laman web seperti diatas, kita boleh juga memasukkan tag
<IMG> diantara tag <CENTER> dan </CENTER> seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Gambar kereta
<BR>
<BR>
<CENTER>
<IMG SRC="GambarKereta.jpg">
</CENTER>
<BR>
<BR>
Sekian
</BODY>
</HEAD>
</HTML>
Kita boleh gantikan <DIV LIGN="CENTER"> dengan <DIV ALIGN="RIGHT"> untuk
meletakkan gambar dikanan laman web.
Perkataan menggantikan gambar
Ada kemungkinan, memasukkan gambar akan melambatkan sedikit proses menampakkan laman
web kita ke skrin komputer oleh Internet Explorer. Oleh itu ada sesetengah pengguna laman web
tidak suka melihat gambar pada laman web. Pengguna boleh mengelak dari gambar dipamirkan
dengan mengubah setting pada Internet Explorer dengan memilih menu 'View | Options... |
General | Show Pictures'.
Kita sebagai penulis laman web boleh memasukkan saperkataan tertentu sebagai ganti kepada
gambar jika pengguna berbuat demikian. Kita gunakan ciri ALT. ALT adalah ringkasan bagi
ALTERNATIVE. Contoh penggunaannya :
<IMG SRC="GambarKereta.jpg" ALT="Gambar kereta">
Ciri ALT diatas menyebabkan pengguna tidak nampak gambar tapi nampak perkataan 'Gambar
kereta' pada kedudukan gambar. Untuk melihat gambar, pengguna boleh klik kana pada pada
perkataan itu, kemudian pilih menu 'Show picture'. Contoh hasil :

Ciri ALT boleh juga diletakkan sebelum ciri SRC, begini :
<IMG ALT="Gambar kereta" SRC="GambarKereta.jpg">
Pelayar web Internet Explorer akan menggunakan teks ALT sebagai perkataan tip yang
ditayangkan bila kita gerakkan tetikus pada kedudukan gambar.
Perkataan dan gambar
Untuk memasukkan apa-apa perkataan (biasanya digunakan untuk memberi penerangan
mengenai gambar) dikiri dan kanan gambar, tuliskan perkataan itu dikiri dan kanan tag <IMG>
(atau, kita boleh katakan betul-betul sebelum dan selepas tag <IMG>), begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Gambar kereta
<BR>
<BR>
Lihat kereta ini, <IMG SRC="GambarKereta.jpg"> Cantik kan ?
<BR>
<BR>
Sekian
</BODY>
</HEAD>
</HTML>
Hasilnya :

Perhatikan, kedudukan perkataan ialah diparas bawah gambar.
Kedudukan perkataan dan gambar
Biasanya kita memasukkan apa-apa nota untuk sesuatu gambar. Contohnya :

Berikut ialah kodnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Gambar kereta
<BR>
<BR>
<IMG ALIGN="RIGHT" SRC="GambarKereta.jpg" ALT="Gambar kereta">
Sebuah kereta diatas padang. Nampaknya ia sebuah model lama.
Bagaimanapun, ia kelihatan masih berkilat kerana baru di
sembur cat baru. Entah siapalah yang meletakkannya disitu.
<BR>
<BR>
Sekian
</BODY>
</HEAD>
</HTML>
Perhatikan, dengan menuliskan ciri ALIGN="RIGHT" dalam tag <IMG>, nota akan berada di
kiri gambar. Nota hendaklah dituliskan selepas tag <IMG>. Jika ditulis sebelum tag <IMG> iaitu
begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Gambar kereta
<BR>
<BR>
Sebuah kereta diatas padang. Nampaknya ia sebuah model lama.
Bagaimanapun, ia kelihatan masih berkilat kerana baru di
sembur cat baru. Entah siapalah yang meletakkannya disitu.
<IMG ALIGN="right" SRC="GambarKereta.jpg" ALT="Gambar kereta">
<BR>
<BR>
Sekian
</BODY>
</HEAD>
</HTML>
maka begini kelihatannya (tidak begitu menarik) :

Perhatikan perkataan 'Sekian' berada tidak cukup kebawah gambar. Untuk meletakkannya di kiri
tetapi dikedudukan lebih kebawah dari gambar, kita gunakan tag <BR CLEAR=ALL> selepas
nota gambar, seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Gambar kereta
<BR>
<BR>
Sebuah kereta diatas padang. Nampaknya ia sebuah model lama.
Bagaimanapun, ia kelihatan masih berkilat kerana baru di
sembur cat baru. Entah siapalah yang meletakkannya disitu.
<IMG ALIGN="right" SRC="GambarKereta.jpg" ALT="Gambar kereta">
<BR CLEAR=ALL>
<BR>
Sekian
</BODY>
</HEAD>
</HTML>
Jika kita menuliskan ciri ALIGN="LEFT" dalam tag <IMG> dan nota pula dituliskan selepas tag
<IMG>, iaitu begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Gambar kereta
<BR>
<BR>
<IMG ALIGN="LEFT" SRC="GambarKereta.jpg" ALT="Gambar kereta">
Sebuah kereta diatas padang. Nampaknya ia sebuah model lama.
Bagaimanapun, ia kelihatan masih berkilat kerana baru di
sembur cat baru. Entah siapalah yang meletakkannya disitu.
<BR>
Sekian
</BODY>
</HEAD>
</HTML>
maka begini kesannya, iaitu gambar berada dikiri laman web dan nota berada dikanan gambar :

Ciri ALIGN="top" akan menyebabkan teks berada di paras atas gambar, seperti berikut :

Kodnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Gambar kereta
<BR>
<BR>
Sebuah kereta
<IMG ALIGN="top" SRC="GambarKereta.jpg" ALT="Gambar kereta">
Sekian
</BODY>
</HEAD>
</HTML>

Ciri ALIGN="texttop" menyebabkan teks berada diatas gambar tetapi lebih atas dari kesan ciri
ALIGN="top".
Ciri ALIGN="middle" menyebabkan teks berada di tengah gambar secara menegak. Contoh
kesan :

Ciri-ciri lain ialah seperti berikut :
ALIGN="absmiddle"
Ciri ini berkesan jika kita menayangkan lebih dari satu gambar yang berbeza ketinggiannya
dalam satu baris. Kesannya perkataan akan berada di tengah (secara menegak) gambar yang
paling tinggi.
ALIGN="baseline"
Ciri ini menyebabkan perkataan berada di paras paling bawah bagi gambar. Contoh kesan :

ALIGN="bottom"
Ciri ini memberi kesan yang hampir sama dengan ciri ALIGN="baseline"
ALIGN="absbottom"
Ciri ini berkesan jika kita menayangkan lebih dari satu gambar yang berbeza ketinggiannya
dalam satu baris. Kesannya perkataan akan berada di paras bawah gambar yang paling bawah.
Gambar sebagai pintasan (link)
Kita boleh menjadikan satu gambar sebagai penghubung ke lain-lain laman web, iaitu apabila
kita klik pada gambar itu, kita akan dibawa melihat laman web lain (iaitu kita mempunyai lebih
dari satu laman web).
Kita gunakan tag <A> dengan ciri HREF untuk menjadikan gambar berfungsi sedemikian.
Caranya, kita masukkan tag <IMG> didalam tag <A>. Contohnya :
<A HREF="Muka2.htm"><IMG SRC="Gambar2.gif"></A>
Apabila kita klik "Gambar2.gif" yang kelihatan pada laman web semasa, kita akan melihat laman
web "Muka2.htm". Untuk melihat semula laman web tadi, kita kena sediakan pintasan pada
laman web "Muka2.htm" yang menuju ke laman web tadi.
Selain dari pintasan ke lain laman web (dalam laman web yang sama), pintasan juga boleh dibuat
ke bahagian lain dalam laman web yang sama, atau ke laman web lain di lain laman web di
internet.
Prinsip yang dinyatakan dalam bab 'Membina dan mengendali pintasan' adalah terpakai juga
dalam mengendali gambar sebagai pintasan.
Contoh grafik yang dijadikan sebagai pintasan :


Kod bagi laman web diatas ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Sila klik grafik dibawah untuk masuk ke laman web yang lebih menarik...
<BR>
<BR>
<A HREF="Muka2.htm"><IMG SRC="Butang.bmp"></A>
</BODY>
</HEAD>
</HTML>
Sempadan gambar
Apabila kita memasukkan gambar kedalam laman web, kita boleh tetapkan ciri-ciri sempadan
(border) bagi gambar itu. Contohnya ciri ketebalan sempadan, warna sempadan dan corak
sempadan.
Kita boleh menyatakan tebal garis sempadan gambar dengan memasukkan ciri BORDER=X
dalam tag <IMG> dimana X ialah satu angka bagi ketebalan. Contoh :
<IMG SRC="GambarKereta.gif" BORDER=2>
Ciri ini juga berguna untuk membuat jarak antara satu gambar dengan perkataan di kelilingnya.
Contohnya jika kita menuliskan ciri BORDER=5 seperti berikut :
<IMG ALIGN="LEFT" SRC="GambarKereta.jpg" BORDER=5>
kesannya ialah seperti berikut :

Perhatikan sudah ada jarak antara gambar dengan nota (sebanyak 5 pixel).
Apabila kita menggunakan ciri BORDER=X, jarak adalah bagi keliling gambar berkenaan (ke
empat-empat sempadan gambar). Untuk menetapkan jarak bagi sebelah kanan dan kiri gambar
sahaja, kita gunakan ciri HSPACE=X menggantikan ciri BORDER=X. HSPACE bermaksud
Horizontal Space.
Untuk menetapkan jarak bagi sebelah atas dan bawah gambar sahaja, kita gunakan ciri
VSPACE=X menggantikan ciri BORDER=X. VSPACE bermaksud Vertical Space.
Ciri BORDER=0 berguna untuk menghilangkan garisan dikeliling satu gambar yang kita jadikan
sebagai pintasan (jika kita jadikan satu gambar sebagai pintasan, akan ada garisan keliling
gambar).
Kita boleh juga nyatakan ciri sempadan gambar dalam ciri STYLE. Contohnya :
Bagi ketebalan sempadan, gunakan salah satu dari ciri berikut :
<IMG STYLE=border:thin>
<IMG STYLE=border:medium>
<IMG STYLE=border:thick>
<IMG STYLE=border:2cm>
Bagi warna sempadan :
<IMG STYLE=border:red>
Untuk nama-nama warna lain, sila rujuk bab 'Senarai warna'.
Jika tidak mahu nampak sempadan :
<IMG STYLE=border:none>
Bagi corak sempadan :
<IMG STYLE=border:dotted>
<IMG STYLE=border:dashed>
<IMG STYLE=border:solid>
<IMG STYLE=border:double>
Bagi sempadan 3D:
<IMG STYLE=border:groove>
<IMG STYLE=border:ridge>
<IMG STYLE=border:inset>
<IMG STYLE=border:outset>
Apabila kita menggunakan sempadan 3D, kita boleh juga memasukkan grafik dalam sempadan
itu dimana grafik itu akan diulang-ulang sepanjang garisan sempadan berkenaan. Ini
membolehkan kita mencipta garisan sempadan yang cukup menarik. Contoh menggunakan
grafik bagi sempadan 3D ialah seperti berikut :
</TITLE>
<STYLE>
IMG { border:groove .6in "airbatu.gif" }
</STYLE>
</HEAD>
Dalam contoh ini, kita menggunakan fail grafik bernama 'airbatu.gif' sebagai garis sempadan 3D.
Tebal sempadan keliling gambar boleh juga kita tetapkan dengan menggunakan ciri 'padding'.
Contohnya :
</TITLE>
<STYLE>
IMG { padding: .5in }
</STYLE>
</HEAD>
Dalam kod ini, kita tetapkan 'padding' selebar setengah inci.
Menyalin gambar dari laman web orang lain
Semasa kita melayari laman web orang lain, jika kita menemui gambar yang menarik dan kita
mahu menyimpannya kedalam komputer kita, kita klik kanan tetikus pada gambar itu dan pilih
menu 'Save this picture'...
Menetapkan saiz gambar
Saiz gambar dalam laman web diukur dalam ukuran pixel. Kita gunakan ciri WIDTH=X untuk
menentukan lebar gambar dan ciri HEIGHT=X untuk menetapkan tinggi gambar. X ialah nilai
yang kita mahu. Contohnya jika kita menulis begini :
<IMG SRC="GambarKereta.jpg" WIDTH=200 HEIGHT=300>
ini bermakna kita tetapkan lebar gambar sebagai 200 pixel dan tingginya 300 pixel.
Biasanya kita tidak menetapkan saiz gambar supaya saiznya mengikut saiz sebenar fail gambar
itu. Jika kita menetapkan saiz gambar yang lebih besar dari saiz sebenar, gambar akan kelihatan
kabur. Jika kita menetapkan saiz gambar yang lebih kecil dari saiz sebenar, gambar akan
dimampatkan.
Contoh gambar yang kabur :

Contoh gambar yang mampat :

Penggunaan ciri WIDTH dan HEIGHT boleh mempercepatkan sedikit penayangan gambar di
laman web. Ini kerana laman web sudah diberitahu luas kawasan yang akan dipakai untuk
gambar. Jika tidak, laman web akan menunggu seluruh gambar timbul dalam ingatan (memory)
komputer, kemudian mengira tinggi dan lebar gambar. Ciri ini juga membantu mempercepat
penayangan nota berkaitan dengan gambar. Ia juga mempercepat penayangan teks ALT.
Memasukkan gambar gantian
Jika kita memasukkan gambar yang besar atau mengandungi banyak warna, ini boleh
menyebabkan laman web kita lambat ditayangkan. Kita boleh membuat satu salinan gambar
berkenaan yang saiznya lebih kecil dan bilangan warnanya kurang dari gambar asal. Salinan
gambar inilah yang akan dipamirkan dulu. Kita gunakan ciri LOWSRC untuk menandakan
gambar yang dipamirkan dahulu ialah salinan gambar yang lebih kecil dan kurang bilangan
warnanya. Contoh penggunaan ciri LOWSRC ialah seperti berikut :
<IMG SRC="GambarKereta.jpg" LOWSRC="GambarKeretaKecil.jpg" WIDTH=200
HEIGHT=300>
Pelayar web akan menayangkan dahulu gambar yang lebih ringkas. Olehkerana gambar itu
mengandungi bilangan warna yang sedikit dan saiznya yang lebih kecil, ia dapat ditayangkan
dengan lebih cepat. Apabila gambar gantian itu telah sepenuhnya ditayangkan, barulah gambar
yang sebenarnya ditayangkan. Proses ini berlaku tanpa disedari oleh pengguna laman web kita.
Kesan penggunaan gambar
Gambar-gambar yang banyak dalam laman web, saiz gambar yang besar dalam laman web atau
gambar yang menggunakan banyak warna dalam laman web boleh melambatkan proses
penayangan laman web kita. Terdapat beberapa cara dan teknik untuk mengatasi masalah ini
supaya laman web kita ditayangkan dengan lebih cepat :
1. Kurangkan penggunaan gambar yang tidak perlu
2. Kurangkan penggunaan warna yang tidak perlu
3. Kecilkan saiz gambar
4. Gunakan format gambar yang sesuai seperti jpg dan gif
5. Gunakan teknik 'transparency'
6. Gunakan 'interlaced gif'
7. Gunakan ciri LOWSRC.
Cara dan teknik membuat gambar, mengurangkan saiz gambar, mengurangkan bilangan warna
gambar dan sebagainya tidak ditunjukkan dalam buku ini. Teknik-teknik ini kita boleh pelajari
semasa kita mempelajari program-program grafik.
Belajar mengendali program-program grafik dan pengimbas
Untuk menghasilkan gambar-gambar yang cantik untuk dimasukkan dalam laman web, kita
perlulah belajar menggunakan program-program grafik, tahu menggunakan pengimbas, tahu
mencari gambar-gambar yang sesuai di internet dan CDROM.
Membuat dan mengendali senarai
Berikut ialah contoh ringkas satu senarai :
Jenis kekacang
1.Kacang panjang
2.Kacang boncis
3.Kacang unta
Kita boleh menyediakan senarai dalam laman web menggunakan tag-tag yang kita pelajari
sebelum ini, contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Jenis-jenis kekacang
<BR>
1.Kacang panjang
<BR>
2.Kacang boncis
<BR>
3.Kacang unta
</BODY>
</HTML>
Hasilnya :

Bagaimanapun, terdapat tag-tag khusus yang kita boleh gunakan untuk membina dan mengisi
senarai.
Senarai bernombor
Tag-tag berikut berguna untuk membina senarai bernombor.
<OL>, </OL>, <LI> dan <LI>
OL adalah ringkasan bagi ORDERED LIST (senarai bernombor). Tag <OL> adalah tanda mula
satu senarai bernombor. Senarainya terkandung dalam tag <LI>. Satu tag <LI> adalah bagi satu
item dalam senarai. Tag </LI> ialah tanda penamat bagi tag <LI>. Tag </OL> pula ialah tanda
penamat tag </OL>.
Contoh penggunaan tag <OL>, <LI>, <LI> dan </OL> adalah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai kekacang
<OL>
<LI>Kacang panjang</LI>
<LI>Kacang boncis</LI>
<LI>Kacang unta</LI>
</OL>
Sekian
</BODY>
</HTML>
Hasilnya :

Perhatikan, nombor-nombor siri 1, 2, 3 terbina dengan sendirinya. Senarai itu terinden sedikit
dari tepi kiri laman web dan senarai itu terpisah dengan perkataan lain yang tidak termasuk
dalam senarai oleh satu baris kosong di baris atas dan bawahnya.
Senarai berbulet
Kita boleh juga menggunakan tag <UL> sebagai ganti tag <OL>. UL adalah ringkasan bagi
UNORDERED LIST (senarai berbulet). Tag <UL> adalah persediaan bagi membina senarai
berbulet. Senarai tidak akan bernombor tetapi berbulet. Senarainya terkandung dalam tag <LI>
juga. Tag </LI> pula ialah penamat bagi tag <LI>. Satu tag <LI> adalah bagi satu item dalam
senarai. Tag </UL> ialah tanda penamat bagi tag <UL>.
Contoh penggunaan tag <UL>, <LI>, <LI> dan </UL> adalah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai kekacang
<UL>
<LI>Kacang panjang</LI>
<LI>Kacang boncis</LI>
<LI>Kacang unta</LI>
</UL>
Sekian
</BODY>
</HTML>
Hasilnya :

Perhatikan, bulet-bulet terbina dengan sendirinya. Senarai itu terinden dari tepi kiri laman
web dan senarai itu terpisah oleh satu baris kosong dari perkataan dibaris atas dan bawahnya
yang tidak termasuk dalam senarai.
Secara otomatik, semua bulet adalah berbentuk satu titik hitam yang agak kecil. Kita boleh
mengubahnya kepada bentuk cakera (disc), bulatan besar (circle) atau empat segi (square).
Caranya ialah dengan menambah ciri TYPE dalam tag <UL>. Contohnya begini:
<UL TYPE=disc>
Ciri TYPE=disc menjadikan semua bulet berbentuk cakera. Kita boleh gantikan 'disc' dengan
'circle' atau 'square'.
Kita boleh tetapkan bentuk bulet yang berbeza bagi tiap-tiap item dalam senarai dengan
memasukkan ciri TYPE dalam tag <LI>. Secara otomatik, bentuk bulet ialah satu titik hitam.
Kita boleh mengubahnya menjadi bentuk cakera(disc), bulatan(circle) atau empatsegi(square).
Contoh penggunaannya:

<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai kekacang
<UL>
<LI TYPE=disc>Kacang panjang</LI>
<LI TYPE=circle>Kacang boncis</LI>
<LI TYPE=square>Kacang unta</LI>
</UL>
Sekian
</BODY>
</HTML>
Kesannya :

Senarai Definisi
Satu lagi bentuk senarai selain dari bentuk berbulet dan bentuk bernombor siri ialah
senarai definisi. Ini biasa kita lihat pada kamus atau pada lembaran akhir sesebuah buku. Senarai
definisi mengandungiterma (term) dan diikuti dibaris bawahnya satu definisi bagi terma itu.
Berikut ialah contoh definisi dan terma:
Pisang
Sejenis buah popular di dunia
Pasung
Kawal atau penjara
Tag-tag bagi membina definisi ialah seperti berikut :
<DL>, <DT>, </DT>, <DD>, </DD>, </DL>
DL bermakna DEFINITION LIST (Senarai definisi). Tag <DL> ialah tanda persediaan bagi
membina definisi. Senarai dalam definisi adalah tidak bernombor atau berbulet. Terma akan
terkandung dalam tag <DT>. Definisi bagi terma diletakkan dalam tag <DD>.
</DL> ialah tanda penamat tag <DL>.
<DT> bermakna DEFINITION TERM (terma definisi). Tag ini adalah tanda permulaan satu
terma dalam senarai yang dibina menggunakan tag <DL>. Sama seperti <LI>, cuma <LI> adalah
dalam <OL> atau <UL> sementara <DT> diletakkan selepas <DL>.
</DT> ialah tanda penamat bagi tag <DT>.
<DD> bermakna DEFINITION DATA (data definisi). Tag ini adalah tanda permulaan definisi
bagi terma. Sama seperti <LI>, cuma <LI> adalah dalam <OL> atau <UL>. <DD> diletakkan
selepas <DT>.
</DD> ialah tanda penamat tag <DD>.
Secara otomatik kandungan <DD> adalah di inden kekanan sedikit dari kandungan <DT>.
Contoh penggunaan <DL>, <DT> dan <DD> :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Contoh definisi
<DL>
<DT>Pisang</DT>
<DD>Sejenis buah popular di dunia</DD>
<DT>Pasung</DT>
<DD>Kawal atau penjara</DD>
</DL>
Sekian
</BODY>
</HTML>
Hasilnya :

Perhatikan ciri-ciri berikut : Definisi terpisah oleh satu baris kosong dari baris-baris diatas dan
dibawahnya. Isi <DD> terinden sedikit dari kiri laman web.
Senarai direktori
Senarai direktori ialah satu senarai yang mengandungi nama-nama direktori seperti yang biasa
kita lihat dalam buku direktori telefon dan dalam buku-buku. Untuk membina senarai, kita
mulakan dengan tag <DIR> dan diakhiri dengan tag </DIR>. Diantara kedua-dua tag ini kita
masukkan item dengan menggunakan tag <LI> dan </LI>.
Contoh kod :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai direktori
<DIR>
<LI>A-H
<LI>I-M
<LI>M-R
<LI>S-Z
</DIR>
Sekian
</BODY>
</HTML>

Kesannya kelihatan seperti berikut :

Kesannya kelihatan sama seperti senarai berbulet.

Senarai menu
Ini adalah satu lagi bentuk senarai. Untuk membinanya, kita dimulakan dengan tag <MENU>
dan akhirinya dengan tag </MENU>. Diantara kedua-dua tag ini, kita masukkan senarai dalam
tag <LI> dan </LI>. Ini adalah sama seperti lain-lain senarai.
Senarai dalam senarai
Kita boleh memasukkan senarai dalam senarai. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai benua dan negara
<UL>
<LI>Asia</LI>
<UL>
<LI>Malaysia</LI>
<LI>Indonesia</LI>
</UL>
<BR>
<LI>Afrika</LI>
<UL>
<LI>Mesir</LI>
<LI>Zimbabwe</LI>
</UL>
</UL>
Sekian
</BODY>
</HTML>
Perhatikan kedudukan-kedudukan tag <UL> dalam kod diatas. Perhatikan juga cara kod ditulis.
Sebenarnya kita boleh juga menulis begini (cara biasa):
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai benua dan negara
<UL>
<LI>Asia</LI>
<UL>
<LI>Malaysia</LI>
<LI>Indonesia</LI>
</UL>
<BR>
<LI>Afrika</LI>
<UL>
<LI>Mesir</LI>
<LI>Zimbabwe</LI>
</UL>
</UL>
Sekian
</BODY>
</HTML>
Tetapi cara biasa ini menyukarkan kita melihat struktur kod.
Hasil kedua-dua cara itu tetap sama, seperti berikut :

Untuk memasukkan senarai kedua dalam senarai yang pertama, kita masukkan tag-tag yang
membina senarai iaitu <UL> atau <OL> selepas tag <LI> yang berada dalam tag <UL> atau
<OL> yang awal.
Ciri TYPE dan START serta VALUE
Berikut ialah beberapa perkara lain yang boleh diambil perhatian :
Bentuk-bentuk bulet lain juga boleh diperolehi seperti berikut :
Ciri TYPE="1" dalam mana-mana tag menjadikan bulet berbentuk angka biasa. Contohnya 1, 2,
3, ...
Ciri TYPE="I" dalam mana-mana tag menjadikan bulet berbentuk angka roman.
Contohnya I, II, III, ...
Ciri TYPE="A" dalam mana-mana tag menjadikan bulet berbentuk huruf besar.
Contohnya A, B, C, ...
Ciri TYPE="a" dalam mana-mana tag menjadikan bulet berbentuk huruf kecil.
Contohnya a, b, c, ...
Ciri TYPE="i" dalam mana-mana tag menjadikan bulet berbentuk angka roman tapi berhuruf
kecil. Contohnya I, ii, iii, ...
Ciri START digunakan untuk menentukan bulet permulaan. Ia digunakan bersama dengan ciri
TYPE.
Dalam kod berikut :
<OL TYPE=1 START=3>
Ciri START=3 menjadikan senarai dalam <OL> bermula dengan angka 3, bukan dengan angka
1.
Dalam kod berikut pula:
<OL TYPE=i START=3>
Ciri START=3 menjadikan senarai dalam <OL> bermula dengan angka iii, bukan dengan
angka i.
Lihat pula kod berikut :
<OL TYPE=A START=3>
Ciri TYPE=A bersama dengan ciri START=3 menjadikan senarai dalam <OL> bermula dengan
huruf C.
Dalam kod berikut pula :
<LI VALUE=12>
Ciri VALUE=12 menjadikan senarai dalam <LI> bermula dengan angka 12, bukan dengan
angka 1. Menetapkan ciri VALUE dalam tag <LI> akan menafikan ciri START yang dinyatakan
dalam tag <OL> dan sebagainya bagi tag <LI> yang tertentu itu dan tag <LI> yang berikutnya.
Lihat pula kod berikut :
<OL TYPE=A START=3>
Ciri TYPE=A bersama dengan ciri START=3 menjadikan senarai dalam <OL> bermula dengan
huruf C.
Sila ambil perhatian, tidak semua pelayar web menyokong ciri TYPE=X. Jika tidak disokong,
ciri yang anda tetapkan tidak akan dilayan. Pelayar itu akan mengganti ciri itu dengan cirinya
sendiri, yang diluar jangkaan kita.
Saiz huruf (font-size)
Saiz font biasanya diukur dalam unit point. 1 point lebihkurang 1/72 inci.
Jika kita tidak menetapkan saiz font, saiz yang secara otomatik digunakan oleh Internet Explorer
biasanya ialah 12 point.
Kita boleh mengubah saiz font bagi satu senarai, dengan memasukkan ciri STYLE dalam tag
<LI> dan tetapkan saiznya (font-size). Contohnya seperti berikut :
<LI STYLE=font-size:30pt>Asia</LI>
Berikut ialah contoh kod yang agak lengkap :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai benua dan negara
<UL>
<LI STYLE=font-size:30pt>Asia</LI>
<UL>
<LI STYLE=font-size=20pt>Malaysia</LI>
<LI>Indonesia</LI>
</UL>
<BR>
<LI STYLE=font-size:30pt>Afrika</LI>
<UL>
<LI STYLE=font-size=20pt >Mesir</LI>
<LI>Zimbabwe</LI>
</UL>
</UL>
Sekian
</BODY>
</HTML>
Hasilnya :

Warna latarbelakang
Kita boleh menetapkan warna latarbelakang bagi satu item dalam senarai dalam laman web. Kita
masukkan ciri 'STYLE=background:X' dalam tag <LI>. X ialah warna yang kita mahu.
Contoh penggunaan :
<LI STYLE=background:yellow>
Dalam contoh ini, kita menetapkan warna kuning sebagai latarbelakang bagi satu item dalam
senarai.
Antara warna-warna yang biasa digunakan ialah seperti berikut : Aqua Navy Black Olive Blue
Purple Fuchsia Red Gray Silver Green Teal Lime White Maroon Yellow. Untuk mendapatkan
warna-warna lain, sila rujuk bab 'Senarai warna'.
Berikut ialah satu contoh yang lebih lengkap:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai benua dan negara
<UL>
<LI STYLE=background:yellow;font-size:30pt>Asia</LI>
<UL>
<LI STYLE=font-size=20pt;background:green>Malaysia</LI>
<LI STYLE=background:red>Indonesia</LI>
</UL>
<BR>
<LI STYLE=background:blue;font-size:30pt>Afrika</LI>
<UL>
<LI STYLE=background:pink>Mesir</LI>
<LI STYLE=background:purple>Zimbabwe</LI>
</UL>
</UL>
Sekian
</BODY>
</HTML>
Hasilnya ialah seperti berikut :

Warna perkataan
Kita boleh menetapkan warna perkataan bagi satu item dalam senarai dalam laman web. Kita
masukkan ciri 'STYLE=color:X' dalam tag <LI>. X ialah warna yang kita mahu.
Contoh penggunaan :
<LI STYLE=color:red>
Dalam contoh ini, kita menetapkan warna merah sebagai warna bagi satu item dalam senarai.
Antara warna-warna yang biasa digunakan ialah seperti berikut : Aqua Navy Black Olive Blue
Purple Fuchsia Red Gray Silver Green Teal Lime White Maroon Yellow. Untuk mendapatkan
warna-warna lain, sila rujuk bab 'Senarai warna'.
Berikut ialah satu contoh yang lebih lengkap:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai benua dan negara
<UL>
<LI STYLE=color:yellow;font-size:30pt>Asia</LI>
<UL>
<LI STYLE=font-size=20pt;color:green>Malaysia</LI>
<LI STYLE=color:red>Indonesia</LI>
</UL>
<BR>
<LI STYLE=color:blue;font-size:30pt>Afrika</LI>
<UL>
<LI STYLE=color:pink>Mesir</LI>
<LI STYLE=color:purple>Zimbabwe</LI>
</UL>
</UL>
Sekian
</BODY>
</HTML>
Hasilnya ialah seperti berikut :

Memasukkan beberapa ciri serentak
Kita boleh menuliskan beberapa ciri kedalam tag <LI> seperti dalam contoh-contoh diatas dan
contoh berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai benua dan negara
<UL>
<LI STYLE=background:red;color:yellow;font-size:30pt>Asia</LI>
<UL>
<LI STYLE=background:yellow;font-size=20pt;color:green>Malaysia</LI>
<LI STYLE=background:purple;color:red>Indonesia</LI>
</UL>
<BR>
<LI STYLE=background:blue;color:yellow;font-size:30pt>Afrika</LI>
<UL>
<LI STYLE=background:magenta;color:pink>Mesir</LI>
<LI STYLE=background:black;color:white>Zimbabwe</LI>
</UL>
</UL>
Sekian
</BODY>
</HTML>
Hasilnya :

Kedudukan senarai
Secara otomatik satu senarai akan berada dikiri laman web (dengan sedikit inden). Kita boleh
meletakkannya ditengah laman web dengan memasukkan tag <OL>, <UL> atau <DL> (yang
mana berkenaan) diantara tag <CENTER> dan <CENTER> seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<CENTER>
<UL>
<LI>Oren</LI>
<LI>Mangga</LI>
<LI>Epal</LI>
</UL>
</CENTER>
</BODY>
</HTML>

Hasilnya :

Kita boleh meletakkan senarai dikanan laman web dengan memasukkan tag <OL>, <UL> atau
<DL> (yang mana berkenaan) diantara tag <DIV ALIGN=RIGHT> dan <DIV> seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<DIV ALIGN=RIGHT>
<UL>
<LI>Oren</LI>
<LI>Mangga</LI>
<LI>Epal</LI>
</UL>
</DIV>
</BODY>
</HTML>
Hasilnya :

Margin senarai
Kita boleh juga menetapkan margin senarai dengan menggunakan tag <STYLE> dan </STYLE>
yang diletakkan diantara tag </TITLE> dan </HEAD>. Diantara tag <STYLE> dan </STYLE>
kita tuliskanlah ciri-ciri margin yang kita mahu. Ciri-ciri margin ialah samada margin-left,
margin-right, margin-top, margin-bottom.
Berikut ialah contoh kod yang menggunakan ciri margin-left dalam tag <STYLE> :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
UL LI {margin-left:2in}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI>Oren</LI>
<LI>Mangga</LI>
<LI>Epal</LI>
</UL>
</HTML>
Dalam kod berikut kita cuba menetapkan margin kiri sebanyak 2 inci kepada senarai yang ada
dalam laman web.
Hasilnya :

Contoh tambahan
Berikut ialah contoh lain mengenai senarai.
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<STYLE>
UL LI {font: 20pt Times;
color:red;
background:yellow;
margin-left:1.5in;
margin-right:1.5in}
</STYLE>
</HEAD>
<BODY>
Senarai berikut berlatarbelakang kuning dan perkataan merah.
<UL>
<LI>Oren</LI>
<LI>Mangga</LI>
<LI>Epal</LI>
</UL>
</HTML>
Hasilnya :

Ciri COMPACT
Ciri compact biasanya digunakan untuk menjimatkan ruang. Contohnya jika digunakan pada
senarai definisi, kesannya ialah terma dan definisi akan berada dalam baris yang sama. Jika tiada
ciri ini, definisi akan berada di baris bawah terma. Selain itu, jarak antara item juga semakin
dekat.
Contoh penggunaan :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai berikut berlatarbelakang kuning dan perkataan merah.
<UL COMPACT>
<LI>Oren</LI>
<LI>Mangga</LI>
<LI>Epal</LI>
</UL>
</HTML>
Membina dan mengendali tabel
Contoh tabel
Berikut ialah satu contoh tabel, iaitu sekumpulan data yang strukturnya kelihatan seperti
mempunyai baris (row) dan ruang (column).

Nama Umur Jantina
Ali 12 L
Abu 30 L
Siti 40 P
Membina tabel
Untuk membina tabel dalam laman web, kita gunakan tag <TABLE> dan </TABLE>.
Contoh kod :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
<TABLE>
</TABLE>
</BODY>
</HTML>
Tag <TABLE> menandakan kita akan membina satu tabel. Tag </TABLE> ialah tanda penamat
tabel.
Membina ruang dan baris
Setakat menuliskan tag <TABLE> dan </TABLE> tidak akan menampakkan tabel dalam laman
web. Selain dari tag-tag ini, ada beberapa tag lain yang berkait rapat dengan tag-tag ini iaitu tag-
tag <TR>, </TR>, <TD> dan </TD>. Semua tagtag ini diperlukan untuk menghasilkan satu
tabel yang sempurna.
Tag-tag lain ini iaitu <TR>, </TR>, <TD> dan </TD> diletakkan diantara tag <TABLE> dan
</TABLE>.
Tag <TR> bermakna TABLE ROW. Dengannya kita membina satu baris dalam tabel. Tag
</TR> ialah tanda kita mengakhiri satu baris dalam tabel. Tag <TR> dan </TR> diletakkan
diantara tag <TABLE> dan </TABLE>. Oleh kerana sepasang tag <TR> dan </TR> akan
membina satu baris, ini bermakna untuk membina lebih dari satu baris, kita tuliskan lebih dari
satu pasang tag-tag ini.
Tag <TD> bermakna TABLE DATA, tanda kita akan memasukkan data. Tag </TD> adalah
tanda kita mengakhiri satu data. Data dituliskan diantara tag <TD> dan </TD>. Data ialah apa
yang akan terpapar dalam tabel. Tag <TD> dan </TD> diletakkan diantara tag <TR> dan </TR>.
Satu pasang tag <TD> dan </TD> juga dipanggil satu sel. Tiap-tiap baris hendaklah
mengandungi bilangan sel yang sama.
Berikut ialah contoh penggunaan tag-tag diatas untuk membina satu tabel:
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<TABLE>
<TR>
<TD>Nama</TD>
<TD>Umur</TD>
<TD>Jantina</TD>
</TR>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
<TR>
<TD>Ali</TD>
<TD>12</TD>
<TD>L</TD>
</TR>
<TR>
<TD>Abu</TD>
<TD>30</TD>
<TD>L</TD>
</TR>
<TR>
<TD>Siti</TD>
<TD>40</TD>
<TD>P</TD>
</TR>
</TABLE>
Sekian
</BODY>
</HTML>
Jika kod diatas kurang jelas strukturnya, kita boleh menulisnya begini :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<TABLE>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD> </TD><TD> </TD><TD> </TD></TR>
<TR><TD>Ali </TD><TD>12 </TD><TD>L </TD></TR>
<TR><TD>Abu </TD><TD>30 </TD><TD>L </TD></TR>
<TR><TD>Siti</TD><TD>40 </TD><TD>P </TD></TR>
</TABLE>
Sekian
</BODY>
</HTML>
Kedua-dua cara memberi hasil yang sama seperti berikut :

Perhatikan ciri-ciri berikut :
1. Baris diatas dan dibawah tabel tidak terpisah oleh baris kosong, tidak seperti tag <PRE>.
2. Percubaan kita memasukkan baris kosong dengan menulis <TR> dan <TD> yang tidak diisi
data, gagal (baris kosong tidak dipamirkan). Untuk memasukkan baris kosong, kita hendaklah
menuliskan kod ini : &nbsp; dalam tiap-tiap sel seperti berikut :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<TABLE>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>&nbsp;</TD><TD>&nbsp;</TD><TD>&nbsp;</TD></TR>
<TR><TD>Ali </TD><TD>12 </TD><TD>L </TD></TR>
<TR><TD>Abu </TD><TD>30 </TD><TD>L </TD></TR>
<TR><TD>Siti</TD><TD>40 </TD><TD>P </TD></TR>
</TABLE>
Sekian
</BODY>
</HTML>
Hasilnya :

Garis sempadan tabel
Untuk menunjukkan garisan sempadan mengelilingi setiap data (sel), kita masukkan ciri
BORDER dalam tag <TABLE> seperti berikut :
<TABLE BORDER>
BORDER bermaksud 'sempadan'. Contoh penggunaannya seperti berikut :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya, kita akan nampak garisan sempadan pada tiap-tiap sel :

Kedudukan tabel (secara melintang) dalam
laman web
Secara otomatik, tabel akan berada di kiri laman web. Kita boleh menjadikannya
berada ditengah laman web dengan menuliskan ciri ALIGN="CENTER" dalam tag <TABLE>
seperti berikut :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<TABLE BORDER ALIGN="CENTER">
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
Sekian
</BODY>
</HTML>
Hasilnya, tabel akan kelihatan berada di tengah laman web :

Selain dari memasukkan ciri ALIGN="CENTER", kita boleh juga menggunakan tag
<CENTER> dan </CENTER>. Kita letakkan tag <TABLE> dan </TABLE> diantara tag-tag
<CENTER> dan </CENTER> seperti contoh kod berikut :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<CENTER>
<TABLE BORDER>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
</CENTER>
Sekian
</BODY>
</HTML>
Hasilnya akan sama seperti gambar diatas.
Untuk meletakkan tabel dikanan laman web, kita masukkan ciri ALIGN="RIGHT" dalam tag
<TABLE> seperti berikut :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<TABLE BORDER ALIGN="RIGHT">
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
Sekian
</BODY>
</HTML>
Hasilnya, tabel akan kelihatan berada dikanan laman web seperti berikut :

Selain dari menggunakan ciri ALIGN="RIGHT", kita boleh juga menggunakan tag <DIV
ALIGN="RIGHT"> dan </DIV>. Kita letakkan tag <TABLE> dan </TABLE> diantara tag
<DIV ALIGN="RIGHT"> dan </DIV> seperti berikut :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<DIV ALIGN="RIGHT">
<TABLE BORDER>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
</DIV>
Sekian
</BODY>
</HTML>
Hasilnya akan sama seperti gambar diatas.
Ketebalan garis sempadan
Jika kita menuliskan ciri BORDER dalam tag <TABLE>, secara otomatik ketebalan garisan
ialah 1 (dalam unit pixel). Untuk menebalkan lagi garisan sempadan, kita boleh tulikan ciri
BORDER=X dalam tag <TABLE> dimana X ialah angka yang kita mahu, contohnya :
<TABLE BORDER=3>
Berikut ialah contoh hasil ketebalan BORDER=8 :

Perhatikan, ciri BORDER=X hanya memberi kesan kepada ketebalan garisan sekeliling tabel,
bukan ketebalan garisan keliling tiap-tiap sel. Tiada cara untuk menetapkan ketebalan garisan
keliling satu baris tertentu sahaja, atau satu ruang tertentu sahaja, atau satu sel tertentu sahaja.
Jika kita tidak memasukkan ciri BORDER atau kita memasukkan ciri BORDER=0, garis
sempadan tabel tidak akan kelihatan.
Warna garisan sempadan tabel
Jika kita telah menyatakan ciri BORDER, selanjutnya kita boleh menetapkan ciri warna garis
sempadan dengan memasukkan ciri BORDERCOLOR=X dalam tag <TABLE> dimana X ialah
nama warna yang kita mahu. Contoh kod :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER BORDERCOLOR="red">
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya :

Perhatikan, warna berkenaan adalah mengelilingi tiap-tiap sel.
Untuk mendapatkan warna lain, sila rujuk bab 'Senarai warna'.
Jika kita tidak menetapkan ciri BORDER terlebih dahulu, kesan ciri BORDERCOLOR=X tidak
akan kelihatan.
Stail garis sempadan tabel
Apabila kita menuliskan ciri BORDER dalam tag <TABLE>, garisan-garisan sempadan akan
kelihatan pada keliling tiap-tiap sel dalam tabel. Terdapat beberapa stail garis sempadan tabel
yang boleh kita bina dengan memasukkan ciri FRAME=X dalam tag <TABLE>. Berikut ialah
beberapa pilihan bagi ciri FRAME=X. Kita akan lihat kesan tiap-tiap ciri ini nanti.
FRAME="VOID" Tiada sempadan keliling tabel. Menyebabkan juga tiada
jarak antara tabel dengan apa-apa kandungan laman web di
kelilingnya.
FRAME="ABOVE" Sempadan hanya kelihatan pada sebelah atas tabel.
Sempadan sebelah bawah, kiri dan kanan tabel akan hilang.
FRAME="BELOW" Sempadan hanya kelihatan di sebelah bawah tabel. Sempadan
sebelah atas, kiri dan kanan tabel akan hilang.
FRAME="HSIDES" Sempadan hanya kelihatan di sebelah atas dan bawah tabel.
Sempadan kiri dan kanan tabel akan hilang. HSIDES ialah
ringkasan bagi HORIZONTAL SIDES (Sebelah yang mendatar).
FRAME="VSIDES" Sempadan hanya kelihatan di kiri dan kanan tabel.
Sempadan atas dan bawah tabel akan hilang. VSIDES ialah
ringkasan bagi VERTICAL SIDES (Sebelah yang menegak).
FRAME="LHS" Sempadan hanya kelihatan di sebelah kiri tabel. Sempadan
kanan, atas dan bawah tabel akan hilang. LHS ialah
ringkasan bagi LEFT HAND SIDE.
FRAME="RHS" Sempadan hanya kelihatan di sebelah kanan tabel. Sempadan
kiri, atas dan bawah tabel akan hilang. RHS ialah
ringkasan bagi RIGHT HAND SIDE.
FRAME="BOX" Sempadan kiri, kanan, atas dan bawah tabel akan
kelihatan.
FRAME="BORDER" (Sama dengan FRAME=BOX). Digunakan bagi pelayar web yang
tidak menyokong FRAME=BOX.
Sebelum menggunakan ciri FRAME, kita mesti tuliskan dahulu ciri BORDER. Tanpa
menuliskan ciri BORDER dahulu, kita tidak akan nampak kesan ciri FRAME.
Berikut ialah contoh kod yang menggunakan ciri FRAME="VSIDES".
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER FRAME="VSIDES">
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Perhatikan ciri FRAME dituliskan selepas ciri BORDER.
Hasilnya seperti berikut :

Jika ciri FRAME="VOID" digunakan, kesannya ialah seperti berikut :

Jika ciri FRAME="ABOVE" digunakan, kesannya ialah seperti berikut :

Jika ciri FRAME="BELOW" digunakan, kesannya ialah seperti berikut :

Jika ciri FRAME="HSIDES" digunakan, kesannya ialah seperti berikut :

Jika ciri FRAME="LHS" digunakan, kesannya ialah seperti berikut :

Jika ciri FRAME="RHS" digunakan, kesannya ialah seperti berikut :

Jika ciri FRAME="BOX" digunakan, kesannya ialah seperti berikut :

Kita boleh juga menuliskan ciri RULES=X dalam tag <TABLE> untuk mendapatkan beberapa
stail lagi. Terdapat beberapa pilihan bagi ciri RULES=X iaitu :
RULES="NONE", RULES="ROWS", RULES="COLS", RULES="ALL" dan
RULES="GROUP".
Ciri RULES=X hendaklah dituliskan selepas ciri BORDER, jika tidak kita tidak akan nampak
kesannya.
Jika kita menggunakan ciri RULES=NONE, hanya garisan keliling tabel akan kelihatan tetapi
garisan diantara sel tidak akan kelihatan. Cuba lihat contoh kod berikut :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></head>
<BODY>
Senarai nama
<TABLE BORDER RULES="NONE">
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
Sekian
</BODY>
</HTML>

Hasilnya :

Jika kita menggunakan ciri RULES="ROWS" seperti berikut :
<TABLE BORDER RULES="ROWS">
Hasilnya, hanya garisan diantara baris-baris sahaja yang kelihatan, seperti berikut :

Jika kita menggunakan ciri RULES="COLS" seperti berikut :
<TABLE BORDER RULES="COLS">
Hasilnya, hanya garisan diantara ruang-ruang sahaja yang kelihatan, seperti berikut :

Jika kita menggunakan ciri RULES="ALL" seperti berikut :
<TABLE BORDER RULES="ALL">
Hasilnya sama seperti kita hanya menggunakan ciri BORDER sahaja, seperti berikut :

Bagaimanapun, perhatikan garisan bawah bagi baris pertama yang menjadi agak tebal.
Kebolehan kita memasukkan kombinasi ciri-ciri dan tag boleh menghasilkan tabel yang kemas,
cantik dan menarik.
Memasukkan tajuk tabel
Satu tabel biasanya mempunyai tajuk diatasnya.
Kita gunakan tag <CAPTION> dan </CAPTION> untuk memasukkan tajuk bagi tabel. Tag-tag
ini kita letakkan selepas tag <TABLE>.
Berikut ialah contoh penggunaan tag <CAPTION> :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER>
<CAPTION>Senarai nama</CAPTION>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya kelihatan berikut :

Kedudukan tajuk tabel
Secara otomatik, tajuk akan muncul di sebelah atas/tengah tabel. Kita boleh gunakan ciri-ciri
berikut untuk meletakkan kedudukan tajuk :
<CAPTION ALIGN="TOP"> Tajuk akan berada di sebelah atas/tengah
tabel.
<CAPTION ALIGN="LEFT"> Tajuk akan berada di sebelah atas/kiri tabel.
<CAPTION ALIGN="RIGHT"> Tajuk akan berada di sebelah atas/kanan
tabel.
<CAPTION ALIGN="BOTTOM"> Tajuk akan berada di sebelah bawah/tengah
tabel.
Contoh kod :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER>
<CAPTION ALIGN="LEFT">Senarai nama</CAPTION>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Kesannya :

Memformat tajuk tabel
Kita boleh memformat tajuk tabel sama seperti kita memformat lain-lain perkataan seperti yang
kita pelajari dalam bab 'Memformat perkataan'. Contohnya :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER>
<CAPTION><FONT SIZE=6><B>Senarai</B></FONT></CAPTION>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya :

Lebar tabel
Kita boleh menetapkan lebar tabel dengan memasukkan ciri WIDTH=X dalam tag <TABLE>
dimana X ialah suatu angka dalam unit pixel. Dalam contoh kod berikut kita cuba menetapkan
lebar tabel sebanyak 500 (unit pixel) :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER WIDTH=500>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>

Hasilnya kelihatan seperti berikut :

Perhatikan lebar tiap-tiap ruang adalah sama.
Kita boleh juga menulis lebar tabel dalam bentuk peratus lebar laman web. Contohnya jika kita
menulis begini :
<TABLE BORDER WIDTH=80%>
ini bermakna lebar tabel ialah 80 peratus dari lebar laman web. Jika kita atau pengguna
mengubah lebar laman web, lebar tabel pun turut berubah. Lebar tiap-tiap ruang dalam tabel
akan dibahagi samarata.
Jikia kita menetapkan lebar tabel, lebarnya tidak akan berubah walaupun kita atau pengguna
mengubah lebar laman web.
Jika kita tidak menetapkan lebar tabel dan kita membina tabel yang lebih lebar dari lebar laman
web, lebar tabel akan dipadatkan oleh Internet Explorer supaya seluruh lebar tabel dapat
ditayangkan.
Saiz tabel yang tetap adalah baik jika kita menggunakan tabel untuk menayangkan gambar
didalamnya kerana saiz gambar adalah tetap. Saiz tabel yang berdasarkan peratus lebar laman
web adalah sesuai jika tabel itu kita gunakan untuk menayangkan data bukan grafik.
Kita juga harus ingat bahawa tidak semua pengguna mempunyai saiz skrin monitor yang sama
dengan saiz skrin monitor kita. Jika kita membina tabel yang dapat ditayangkan sepenuhnya
dalam skrin satu komputer, skrin yang lebih kecil tidak akan dapat menayangkan tabel itu
sepenuhnya. Oleh itu, ada kemungkinan saiz tabel yang berdasarkan peratus lebar skrin elok
digunakan.
Lebar ruang
Biasanya lebar satu ruang ditentukan oleh bilangan huruf atau karakter yang terbanyak dalam
mana-mana sel bagi satu ruang itu. Bagaimanapun, kita boleh menetapkan lebar ruang-ruang
tertentu dengan menuliskan ciri WIDTH=X dalam mana-mana satu tag <TD> dalam ruang yang
berkenaan. Biasanya kita menuliskan ciri itu dalam baris yang pertama atau terakhir. Contohnya
jika kita ada 3 ruang (seperti diatas) dimana kita mahu ruang pertama lebarnya 300, ruang kedua
50 dan ruang ketiga pun 50, kita tulis ciri WIDTH=X dalam tag <TD> bagi ruang-ruang yang
berkenaan :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER>
<TR><TD WIDTH=200>Ali</TD><TD WIDTH=50>12</TD><TD
WIDTH=250>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya :

Jika kita menulis lebar dalam tag <TD> pada tiap-tiap baris tag <TR>, maka lebar yang paling
maksima bagi ruang tertentu akan dipakai. Contohnya kita menulis begini :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER>
<TR><TD WIDTH=200>Ali</TD><TD WIDTH=50>12</TD><TD
WIDTH=250>L</TD></TR>
<TR><TD WIDTH=100>Abu</TD><TD WIDTH=100>30</TD><TD
WIDTH=200>L</TD></TR>
<TR><TD WIDTH=50>Siti</TD><TD WIDTH=100>40</TD><TD
WIDTH=200>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Lebar ruang pertama akan diambil sebagai 200 pixel, ruang kedua 100 pixel dan ruang ketiga
250 pixel.
Sila ambil perhatian, jika kita menetapkan WIDTH dalam tag <TD> dan kita juga menetapkan
WIDTH dalam tag <TABLE>, lebar tabel akan terpakai tetapi lebar tiap-tiap ruang akan berubah
mengikut kadarnya.
Kita boleh tulis lebar ruang tertentu dalam bentuk peratus lebar tabel. Contohnya jika kita
mahu lebar ruang pertama ialah 50 peratus dari lebar tabel, ruang kedua pula 30 peratus dan
ruang ketiga 20 peratus (pastikan jumlahnya 100 peratus), kita tulis begini dalam tag-tag <TD>
yang berkenaan (biasanya kita tuliskan pada baris pertama) :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER>
<TR><TD WIDTH=50%>Ali</TD><TD WIDTH=30%>12</TD><TD
WIDTH=20%>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Jika kita telah menetapkan lebar tabel berdasarkan peratus lebar laman web dan kemudian
menetapkan lebar ruang berdasarkan peratus lebar tabel, bila kita mengubah saiz laman web, saiz
ruang akan berubah menurut kadarnya.

Tinggi tabel
Tinggi tabel pun boleh kita tetapkan dengan memasukkan ciri HEIGHT=X dalam tag <TABLE>.
Dalam contoh kod berikut kita cuba menetapkan tinggi tabel sebanyak 200 (unit pixel) :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER WIDTH=500 HEIGHT=200>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>

Hasilnya :

Tinggi tiap-tiap baris akan dibahagi sama rata.
Tinggi baris
Kita boleh menetapkan tinggi baris tertentu dengan menuliskan ciri HEIGHT=X dalam mana-
mana satu tag <TR>. Contohnya jika kita ada 3 baris dalam tabel dimana kita mahu baris
pertama tingginya 50, baris kedua 20 dan baris ketiga pula 50, kita tulis ciri HEIGHT=X dalam
tag <TR> yang berkenaan :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER>
<TR HEIGHT=50><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR HEIGHT=20><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR HEIGHT=50><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya :

Sila ambil perhatian, jika kita menetapkan HEIGHT dalam tag <TR> dan kita juga menetapkan
WIDTH dalam tag <TABLE>, tinggi tabel akan terpakai dan tinggi tiap-tiap baris akan berubah
mengikut kadarnya.
Kita boleh tulis tinggi baris tertentu dalam bentuk peratus tinggi tabel. Contohnya jika kita
mahu tinggi baris pertama ialah 50 peratus dari tinggi tabel, baris kedua pula 30 peratus dan baris
ketiga 20 peratus (pastikan jumlahnya 100 peratus), kita tulis begini dalam tag-tag <TR> yang
berkenaan:
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER HEIGHT=200>
<TR HEIGHT=50&><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR HEIGHT=30%><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR HEIGHT=20%><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Jika kita telah menetapkan ltinggi tabel berdasarkan peratus tinggi laman web dan kemudian
menetapkan tinggi baris berdasarkan peratus tinggi tabel, bila kita mengubah saiz laman web,
saiz baris akan berubah menurut kadarnya.
Memformat perkataan dalam tabel
Kita boleh memformat perkataan dalam tabel dengan mengenakan tag-tag seperti yang kita
pelajari dalam bab memformat perkataan.
Katakan kita mahu menjadikan perkataan bagi baris pertama dalam tabel bersaiz 10, maka kita
masukkan tag <FONT> yang mengandungi ciri SIZE=x selepas tag-tag <TD> yang ada pada
baris pertama tabel. Contohnya :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<TR><TD WIDTH=200><FONT SIZE=8>Nama</FONT></TD><TD WIDTH=150><FONT
SIZE=8>Umur</FONT></TD><TD WIDTH=150><FONT
SIZE=8>Jantina</FONT></TD></TR>
<TR><TD>Ali</TD><TD WIDTH=100>12</TD><TD WIDTH=100>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TABLE>
</BODY>
</HTML>
Hasilnya :

Mencantumkan sel antara ruang
Ciri COLSPAN=X kita gunakan untuk mencantumkan beberapa sel dalam beberapa ruang
supaya kelihatan seperti satu sel sahaja. X ialah bilangan sel yang kita mahu cantumkan. Ciri ini
kita tuliskan dalam satu tag <TD>. Contohnya jika kita menulis COLSPAN=3 dalam satu tag
<TD>, ini bermakna kita akan mencantumkan 3 sel, bermula dari sel sekarang dan 2 sel
lagi dikanannya. Kita boleh tukar angka 2 kepada angka lain.
Berikut ialah contoh penggunaan ciri COLSPAN=X :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<TR><TD WIDTH=250 COLSPAN=2>Nama dan umur</TD><TD
WIDTH=150>Jantina</TD></TR>
<TR><TD>Ali</TD><TD WIDTH=100>12</TD><TD WIDTH=100>L</TD></TR>
<TR><TD>Abu</TD> <TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD> <TD>40</TD><TD>P</TD></TR>
</TABLE>
</BODY>
</HTML>
Hasilnya :

Mencantumkan sel antara baris
Kita boleh juga mencantumkan beberapa sel yang berdekatan secara menegak dengan
menggunakan ciri ROWSPAN=X yang dimasukkan dalam satu tag <TD>. Contohnya jika kita
mahu mencantumkan 3 sel secara menegak bermula dari satu sel, kita tuliskan begini :
<TD ROWSPAN=3>...</TD>.
Contoh penggunaannya ialah seperti berikut :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<TR><TD WIDTH=100>Benua</TD><TD WIDTH=100>Negara</TD><TD WIDTH=100>Ibu
Negara</TD></TR>
<TR><TD ROWSPAN=3>Asia</TD><TD>Malaysia</TD><TD>Kuala Lumpur</TD></TR>
<TR> <TD>Thailand</TD><TD>Bangkok</TD></TR>
<TR> <TD>Indonesia</TD><TD>Jakarta</TD></TR>
</TABLE>
</BODY>
</HTML>
Hasilnya :

Kedudukan isi sel secara menegak
Secara otomatik, isi tiap-tiap sel dalam tabel berada di bahagian tengah sel. Kita boleh
menetapkan kedudukan isi sel secara menegak supaya berada di sebelah atas sel, tengah, bawah
atau garis bawah sel. Kita gunakan ciri VALIGN=X dimana X ialah samada "top",
"center","bottom" atau "baseline".
Jika kita mahu semua sel dalam tabel berada pada kedudukan menegak yang tertentu, kita
tuliskan ciri VALIGN=X dalam tag <TABLE>, contohnya begini :
<TABLE VALIGN="top">
Jika kita mahu semua sel dalam satu baris tertentu sahaja dalam tabel yang berada pada
kedudukan menegak yang tertentu, kita tuliskan ciri VALIGN=X dalam tag <TR> yang tertentu,
iaitu begini :
<TR VALIGN="top">
Jika kita mahu isi sel tertentu sahaja yang berada pada kedudukan menegak yang tertentu, kita
tuliskan ciri VALIGN=X dalam tag <TD> yang berkenaan iaitu begini :
<TD VALIGN="top">
Berikut ialah contoh penggunaan ciri VALIGN=X.
<html>
<head><title>Muka 1</title></head>
<body>
<TABLE BORDER HEIGHT=200>
<TR VALIGN="top"><TD WIDTH=100>Nama</TD><TD WIDTH=100>Umur</TD><TD
WIDTH=100>Jantina</TD></TR>
<TR VALIGN="center"><TD>Ali</TD><TD WIDTH=100>12</TD><TD
WIDTH=100>L</TD></TR>
<TR VALIGN="bottom"><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD VALIGN="top">Siti</TD><TD VALIGN="center">40</TD><TD
VALIGN="bottom">P</TD></TR>
</TABLE>
</body>
</html>
Hasilnya ialah seperti berikut :

Kita boleh juga menuliskan ciri VALIGN=X dalam tag <COL> untuk menetapkan kedudukan
secara menegak isi sel bagi tiap ruang dalam tabel. Contohnya :
<COL VALIGN="top">
Jika tabel kita mengandungi 3 ruang, kita hendaklah menuliskan 3 tag COL (bersama ciri
berkenaan). Tag <COL> yang pertama untuk menetapkan kedudukan isi ruang pertama, tag
<COL> kedua untuk menetapkan kedudukan isi ruang kedua dan tag <COL> ketiga untuk
menetapkan kedudukan isi ruang ketiga. Jika kita hanya menuliskan 2 tag <COL>, Internet
Explorer akan menganggap ianya untuk ruang pertama dan kedua sahaja. Bilangan tag <COL>
mestilah sama dengan bilangan ruang dalam tabel. Tag <COL> biasanya dituliskan selepas tag
<TABLE> dan sebelum tag <TR> yang pertama.
Berikut ialah satu contoh :
<html>
<head><title>Muka 1</title></head>
<body>
<table border width=200 height=200>
<col valign="top">
<col valign="middle">
<col valign="bottom">
<tr><td>Atas</td><td>Tengah</td><td>bawah</td></tr>
<tr><td>Atas</td><td>Tengah</td><td>bawah</td></tr>
<tr><td>Atas</td><td>Tengah</td><td>bawah</td></tr>
</table>
</body>
</html>
Hasilnya :

Kedudukan isi sel secara melintang
Secara otomatik, isi sel secara melintang dalam tabel ialah di kiri sel. Kita boleh menetapkan
kedudukan isi sel dalam tabel samada berada di kiri, tengah atau kanan sel (pandangan
melintang) dengan memasukkan ciri ALIGN="X". X adalah samada "left", "center", "right",
"justify", "chAR" atau "chAROFF". Jika kita memasukkan ciri ALIGN="X" dalam tag <TR>, ini
akan menetapkan kedudukan bagi seluruh isi sel dalam baris tertentu sahaja dalam tabel. Jika
kita memasukkan ciri ALIGN="X" dalam tag <TD> tertentu, ini akan menetapkan kedudukan isi
sel tertentu sahaja dalam tabel. Apa-apa kedudukan yang kita tetapkan dalam tag <TD> akan
mengatasi ketetapan yang dibuat pada tag <TR>. Perhatikan contoh berikut :
<html>
<head><title>Muka 1</title></head>
<body>
<TABLE BORDER>
<TR><TD WIDTH=100>Nama</TD><TD WIDTH=100>Umur</TD><TD
WIDTH=100>Jantina</TD></TR>
<TR ALIGN="right"><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR ALIGN="center"><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR ALIGN="right"><TD ALIGN="center">Siti</TD><TD ALIGN="left">40</TD><TD
ALIGN="center">P</TD></TR>
</TABLE>
</body>
</html>
Hasilnya :

Kita boleh juga menuliskan ciri ALIGN=X dalam tag <COL> untuk menetapkan kedudukan
secara melintang isi sel bagi ruang tertentu dalam tabel. Contohnya :
<COL ALIGN="right">
Jika tabel kita mengandungi 3 ruang, kita hendaklah menuliskan 3 tag COL (bersama ciri
berkenaan). Tag <COL> yang pertama untuk menetapkan kedudukan isi ruang pertama, tag
<COL> kedua untuk menetapkan kedudukan isi ruang kedua dan tag <COL> ketiga untuk
menetapkan kedudukan isi ruang ketiga. Jika kita hanya menuliskan 2 tag <COL>, Internet
Explorer akan menganggap ianya untuk ruang pertama dan kedua sahaja. Bilangan tag <COL>
mestilah sama dengan bilangan ruang dalam tabel. Tag <COL> biasanya dituliskan selepas tag
<TABLE> dan sebelum tag <TR> yang pertama.
Tag ini diletakkan selepas tag <TABLE> atau sebelum tag <TR> yang pertama.
Berikut ialah satu contoh :
<html>
<head><title>Muka 1</title></head>
<body>
<table border width=200 height=200>
<col align="left">
<col align="middle">
<col align="right">
<tr><td>Kiri</td><td>Tengah</td><td>Kanan</td></tr>
<tr><td>Kiri</td><td>Tengah</td><td>Kanan</td></tr>
<tr><td>Kiri</td><td>Tengah</td><td>kanan</td></tr>
</table>
</body>
</html>
Hasilnya :

Ciri ALIGN="chAR" berguna untuk menetapkan kedudukan mendatar isi sel berdasarkan satu
karakter. Biasanya ia digunakan keatas angka yang mengandungi titik perpuluhan. Ciri ini boleh
menjadikan titik perpuluhan dalam keadaan selari. Oleh itu kita perlu menyatakan titik
perpuluhan sebagai karakter yang berkenaan. Contohnya :
<COL ALIGN="chAR" chAR=".">
Ciri OFFSET digunakan bersama ciri ALIGN dan chAR untuk menyatakan kedudukan karaktor
berdasarkan peratus lebar sel. Contohnya :
<COL ALIGN=chAR chAR=% OFFSET=75>
Contoh ini menandakan tanda % sentiasa berada 75 peratus kekanan sel. Untuk meletakkan tanda
% betul-betul disempadan kanan sel, tuliskan OFFSET=100. Jika kita tuliskan OFFSET=0, tanda
% akan berada dikedudukan paling kiri sel (jadi, jika kita mengisi sel dengan angka 56%, angka
56 tidak akan kelihatan). OFFSET=50 akan meletakkan tanda % ditengah sel.
Warna latarbelakang tabel
Kita boleh mengenakan warna latarbelakang seluruh tabel dengan memasukkan ciri
BGCOLOR=X dalam tag <TABLE> dimana X ialah warna yang kita mahu. Contohnya untuk
mengenakan warna kuning, kita tulis begini :
<TABLE BGCOLOR="yellow">.
Contoh penggunaannya ialah seperti berikut :
<html>
<head><title>Muka 1</title></head>
<body>
Benua dan negara
<Br>
<BR>
<TABLE BORDER BGCOLOR="yellow">
<TR><TD WIDTH=100>Benua</TD><TD WIDTH=100>Negara</TD><TD WIDTH=100>Ibu
Negara</TD></TR>
<TR><TD ROWSPAN=3>Asia</TD><TD>Malaysia</TD><TD>Kuala Lumpur</TD></TR>
<TR> <TD>Thailand</TD><TD>Bangkok</TD></TR>
<TR> <TD>Indonesia</TD><TD>Jakarta</TD></TR>
</TABLE>
</body>
</html>
Hasilnya :

Kita boleh menukar "yellow" dengan 16 warna-warna lain iaitu Aqua, Navy, Black, Olive, Blue,
Purple, Fuchsia, Red, Gray, Silver, Green, Teal, Lime, White, Maroon dan Yellow. Sila rujuk
bab 'Senarai warna' untuk mendapatkan warna-warna lain.
Warna latarbelakang satu baris
Jika kita mengenakan ciri BGCOLOR=X pada satu tag <TR>, bukan pada tag <TABLE>, maka
hanya baris itu sahaja yang akan berwarna seperti warna yang kita tuliskan. Contohnya :
<html>
<head><title>Muka 1></title></head>
<body>
Benua dan negara
<BR>
<BR>
<TABLE BORDER>
<TR BGCOLOR="yellow"><TD WIDTH=100>Benua</TD><TD
WIDTH=100>Negara</TD><TD WIDTH=100>Ibu Negara</TD></TR>
<TR><TD ROWSPAN=3>Asia</TD><TD>Malaysia</TD><TD>Kuala Lumpur</TD></TR>
<TR BGCOLOR="yellow"> <TD>Thailand</TD><TD>Bangkok</TD></TR>
<TR> <TD>Indonesia</TD><TD>Jakarta</TD></TR>
</TABLE>
</body>
</html>
Hasilnya :

Jika kita telah menetapkan ciri BGCOLOR dalam tag <TABLE>, ciri warna yang kita tetapkan
melalui ciri BGCOLOR dalam tag <TR> akan digunakan bagi baris berkenaan. Baris lain akan
berwarna latarbelakang seperti yang ditetapkan dalam tag <TABLE>.
Warna latarbelakang sel tertentu
Kita boleh mengenakan warna pada sel tertentu sahaja dengan mengenakan ciri BGCOLOR=x
pada satu tag <TD> yang tertentu. Contohnya :
<html>
<head><title>Muka 1</title></head>
<body>
Benua dan negara
<BR><BR>
<TABLE BORDER=1>
<TR><TD WIDTH=100 BGCOLOR="yellow">Benua</TD><TD
WIDTH=100>Negara</TD><TD WIDTH=100>Ibu Negara</TD></TR>
<TR><TD ROWSPAN=3>Asia</TD><TD>Malaysia</TD><TD>Kuala Lumpur</TD></TR>
<TR> <TD>Thailand</TD><TD>Bangkok</TD></TR>
<TR> <TD>Indonesia</TD><TD BGCOLOR="yellow">Jakarta</TD></TR>
</TABLE>
</body>
</html>
Hasilnya :

Jika kita telah menetapkan ciri BGCOLOR dalam tag <TABLE>, ciri warna yang kita tetapkan
melalui ciri BGCOLOR dalam tag <TD> akan digunakan bagi sel berkenaan. Ciri BGCOLOR
dalam tag <TD> mengatasi ciri BGCOLOR dalam tag <TR> dan Ciri BGCOLOR dalam tag
<TR> mengatasi ciri BGCOLOR dalam tag <TABLE>.
Warna latarbelakang ruang
Untuk mewarna latarbelakang ruang, kita masukkan ciri BGCOLOR=X dalam tag <COL>
dimana X ialah warna yang kita mahu, contohnya :
<COL BGCOLOR="red">
Tag <COL> hendaklah dituliskan selepas tag <TABLE> dan sebelum tag <TR> yang pertama.
Jika tabel mempunyai 3 ruang, kita hendaklah menuliskan 3 tag <COL> iaitu bilangan tag
<COL> mestilah sama dengan bilangan ruang dalam tabel. Jika tabel mengandungi 3 ruang
tetapi kita hanya menuliskan satu tag <COL>, ini akan dianggap oleh Internet Explorer sebagai
ruang pertama.
Contoh kod :
<html>
<head><title>Muka 1</title></head>
<body>
Benua dan negara
<BR><BR>
<TABLE BORDER=1>
<COL BGCOLOR="red">
<COL BGCOLOR="yellow">
<COL BGCOLOR="green">
<TR><TD>Benua</TD><TD>Negara</TD><TD>Ibu Negara</TD></TR>
<TR><TD>Asia</TD><TD>Malaysia</TD><TD>Kuala Lumpur</TD></TR>
<TR><TD>Asia</TD><TD>Thailand</TD><TD>Bangkok</TD></TR>
<TR><TD>Asia</TD><TD>Indonesia</TD><TD>Jakarta</TD></TR>
</TABLE>
</body>
</html>
Hasilnya :

Grafik sebagai latarbelakang tabel
Jika kita mempunyai satu fail grafik (gambar), kita boleh menjadikan gambar itu sebagai
latarbelakang tabel dengan menuliskan ciri BACKGROUND=X dalam tag <TABLE> dimana X
ialah nama fail gambar itu. Contohnya kita menulis begini :
<TABLE BACKGROUND="Bulatan.bmp">
"Bulatan.bmp" adalah fail gambar yang ada dalam komputer kita.
Contoh kod yang lebih lengkap :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
<TABLE BORDER BACKGROUND="Bulatan.bmp">
<TR><TD WIDTH=100>Benua</TD><TD WIDTH=100>Negara</TD><TD WIDTH=100>Ibu
Negara</TD></TR>
<TR><TD ROWSPAN=3>Asia</TD><TD>Malaysia</TD><TD>Kuala Lumpur</TD></TR>
<TR> <TD>Thailand</TD><TD>Bangkok</TD></TR>
<TR> <TD>Indonesia</TD><TD>Jakarta</TD></TR>
</TABLE>
</BODY>
</HTML>
Hasilnya :

Kita kena pastikan saiz gambar bersesuaian dengan saiz tabel.
Grafik sebagai latarbelakang sel
Gambar boleh juga dijadikan latarbelakang bagi satu sel dalam tabel dengan memasukkan ciri
BACKGROUND=X dalam tag <TD> yang berkenaan, dimana X ialah nama fail gambar yang
sedia ada. Contohnya :
<html>
<head><title>Muka 1</title></head>
<body>
<TABLE BORDER>
<TR><TD WIDTH=100>Benua</TD><TD WIDTH=100>Negara</TD><TD WIDTH=100>Ibu
Negara</TD></TR>
<TR><TD ROWSPAN=3>Asia</TD><TD>Malaysia</TD><TD>Kuala Lumpur</TD></TR>
<TR><TD>Thailand</TD><TD>Bangkok</TD></TR>
<TR><TD BACKGROUND="BulatBulat.bmp">Indonesia</TD><TD>Jakarta</TD></TR>
</TABLE>
</body>
</html>
Hasilnya :

Jarak isi sel dengan sempadan sel
Ciri CELLPADDING=X dalam tag <TABLE> berguna untuk membuat jarak antara isi setiap sel
dalam tabel dengan sempadan selnya, dimana X adalah unit ukuran dalam pixel. Contohnya :
<TABLE CELLPADDING=6>
Perhatikan kod berikut :
<html>
<head><title>Muka 1</title></head>
<body>
<TABLE BORDER CELLPADDING=20>
<TR><TD WIDTH=100>Benua</TD><TD WIDTH=100>Negara</TD><TD WIDTH=100>Ibu
Negara</TD></TR>
<TR><TD ROWSPAN=3>Asia</TD><TD>Malaysia</TD><TD>Kuala Lumpur</TD></TR>
<TR><TD>Thailand</TD><TD>Bangkok</TD></TR>
<TR><TD>Indonesia</TD><TD>Jakarta</TD></TR>
</TABLE>
</body>
</html>
Kesannya :

Jarak antara sel
Ciri CELLSPACING=X dalam tag <TABLE> berguna untuk menetapkan ketebalan sempadan
satu sel dengan sel yang bersebelahan. Contohnya :
<html>
<head><title>Muka 1</title></head>
<body>
<TABLE BORDER CELLSPACING=20>
<TR><TD WIDTH=100>Benua</TD><TD WIDTH=100>Negara</TD><TD WIDTH=100>Ibu
Negara</TD></TR>
<TR><TD ROWSPAN=3>Asia</TD><TD>Malaysia</TD><TD>Kuala Lumpur</TD></TR>
<TR><TD>Thailand</TD><TD>Bangkok</TD></TR>
<TR><TD>Indonesia</TD><TD>Jakarta</TD></TR>
</TABLE>
</body>
</html>

Kesannya :

Tabel dalam tabel
Kita boleh masukkan satu table dalam satu sel. Iaitu kita masukkan tag <TABLE> dan
</TABLE> dalam tag <TD> dan </TD>. Contohnya :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
<TABLE BORDER>
<TR><TD WIDTH=100>Benua</TD><TD WIDTH=100>Negara</TD><TD WIDTH=100>Ibu
Negara</TD></TR>
<TR><TD>Asia</TD>
<TD>
<TABLE BORDER=1>
<TR><TD COLSPAN=2><CENTER>Malaysia</CENTER></TD></TR>
<TR><TD>Negeri</TD><TD>Ibu Negeri</TD></TR>
<TR><TD>Selangor</TD><TD>Shah Alam</TD></TR>
<TR><TD>Johor</TD><TD>Johor Bahru</TD></TR>
</TABLE>
</TD>
<TD>Kuala Lumpur</TD></TR>
<TR><TD>Afrika</TD><TD>Mesir</TD><TD>Kahirah</TD></TR>
<TR><TD>Eropah</TD><TD>Sepanyol</TD><TD>Madrid</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya :

Satu lagi cara untuk membuat satu tabel dalam tabel tanpa mencantumkan ruang ialah seperti
berikut :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
<TABLE BORDER=1>
<TR><TD WIDTH=100>Benua</TD><TD WIDTH=100>Negara</TD><TD WIDTH=100>Ibu
Negara</TD></TR>
<TR>
<TD>Asia</TD>
<TD><CENTER>Malaysia</CENTER>
<TABLE BORDER=1>
<TR><TD>Negeri</TD><TD>Ibu Negeri</TD></TR>
<TR><TD>Selangor</TD><TD>Shah Alam</TD></TR>
<TR><TD>Johor</TD><TD>Johor Bahru</TD></TR>
</TABLE>
</TD>
<TD>Kuala Lumpur</TD>
</TR>
<TR><TD>Africa</TD><TD>Mesir</TD><TD>Kahirah</TD></TR>
<TR><TD>Eropah</TD><TD>Sepanyol</TD><TD>madrid</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya sedikit berbeza:

Grafik dalam sel
Kita boleh masukkan gambar dan grafik dalam sel tabel, bukan setakat angka dan perkataan.
Kita mestilah telah mempunyai fail gambar yang disimpan dalam komputer. Kita gunakan tag
<IMG> berserta ciri <SRC=X> yang dimasukkan diantara tag <TD> dan </Td>. X ialah nama
dan lokasi fail gambar itu.
Dalam contoh kod berikut, kita akan masukkan tiga gambar yang fail masing-masing di beri
nama "Panah.bmp", "Bola.bmp" dan "Jari.bmp" :
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
Gambar-gambar
<BR>
<BR>
<TABLE BORDER=1>
<TR><TD WIDTH=100>Gambar</TD><TD WIDTH=100>Keterangan</TD></TR>
<TR><TD><IMG SRC="Panah.bmp"></TD><TD>Panah</TD></TR>
<TR><TD><IMG SRC="Bola.bmp"></TD><TD>Bola</TD></TR>
<TR><TD><IMG SRC="Jari.bmp"></TD><TD>Jari</TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya :

Jangan keliru antara grafik yang dijadikan latarbelakang sel/tabel dengan grafik yang
dimasukkan dalam sel. Ia adalah dua perkara yang berbeza, walaupun fail gambar yang sama
boleh dijadikan latarbelakang dan boleh juga dimasukkan dalam sel.
Mempercepat penayangan tabel
Jika tabel kita besar (mengandungi banyak ruang dan baris serta data), kita akan dapati tabel itu
akan dipamirkan oleh Internet Explorer dengan agak lambat. Untuk mempercepatkan sedikit
tayangan tabel, kita gunakan ciri COLS=X (ringkasan bagi COLUMNS, bermaksud ruang-
ruang) dimana X ialah bilangan ruang pada tabel. Ini adalah seolah-olah memberitahu awal-awal
lagi kepada Internet Explorer berapa bilangan ruang dalam tabel, jika tidak Internet Explorer
akan mengambil masa untuk membuat kiraan sendiri, jadi melambatkan proses penayangan
tabel. Kita tuliskan ciri COLS=X dalam tag <TABLE> seperti berikut :
<TABLE COLS=4>
Dalam contoh ini kita memberitahu Internet Explorer bahawa tabel kita mengandungi 4 ruang.
Pastikan bilangan ruang yang sebenarnya adalah sama dengan bilangan ini.
Jika ada ciri-ciri lain dalam tag ini kita tambahkan saja ciri ini dimana-mana kedudukan dalam
tag <TABLE>, contohnya seperti berikut :
<TABLE BORDER COLS=4 CELLSPADDING=10>
Mengenakan ciri serupa pada beberapa
ruang
Dalam contoh-contoh diatas, kita menggunakan satu tag <COL> untuk mengenakan ciri pada
satu ruang. Dari itu jika ada 3 ruang, kita terpaksa menuliskan 3 tag <COL>. Sebenarnya kita
boleh menuliskan satu saja tag <COL> tetapi boleh mengenakan ciri pada lebih dari satu ruang.
Kita boleh gunakan ciri SPAN untuk tujuan ini.
Berikut ialah satu contoh kod tabel yang mempunyai 5 ruang. Isi ruang yang pertama terletak
dikiri sel. Isi ruang yang ke dua hingga ke lima diletakkan di kanan sel dengan menggunakan ciri
SPAN.

<html>
<head><title>Muka 1</title></head>
<body>
<TABLE BORDER FLOAT="RIGHT" CELLPADDING=5 FRAME=BOX RULES=BASIC
COLS=5>
<CAPTION ALIGN="LEFT">Contoh tabel</CAPTION>
<COL ALIGN="LEFT">
<COL ALIGN="RIGHT" SPAN=4>
<TR><TD WIDTH=80>Nama</TD><TD WIDTH=80>Umur</TD><TD
WIDTH=80>Jantina</TD><TD WIDTH=80>Negeri</TD><TD
WIDTH=80>Rambut</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD><TD>Joh</TD><TD>Lurus</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD><TD>KL</TD><TD>Keriting</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD><TD>Penang</TD><TD>Botak</TD></T
R>
</TABLE>
</body>
</html>
Lihat hasilnya :

Menjadikan baris pertama sebagai kepala
tabel
Kita biasa dengan tag <TD> iaitu didalamnya kita akan masukkan data bagi tabel. Kita boleh
tetapkan sel-sel dalam satu baris tabel sebagai kepala tabel (biasanya baris pertama) dengan
menggunakan tag <TH> dan </TH> (Bermaksud Table Heading). Biasanya isi tag ini akan
dipaparkan dalam Bold. Kedudukan isinya secara mendatar biasanya ialah ditengah dan
kedudukan menegaknya juga di tengah sel.
Tag <TH> menggantikan tag <TD> dan tag </TH> menggantikan tag </TD>.
Berikut ialah contoh kod yang menggunakan tag <TH> dan </TH>:
<html>
<head><title>Muka 1</title></head>
<body>
<TABLE BORDER>
<TR>
<TH>Nama</TH><TH>Umur</TH><TH>Jantina</TH><TH>Negeri</TH><TH>Rambut</TH
>
</TR>
<TR><TD></TD><TD></TD><TD></TD><TD>Joh</TD><TD>LURUS</TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD><TD>KL</TD><TD>Keriting</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD><TD>Penang</TD><TD>Botak</TD></T
R>
</TABLE>
</body>
</html>
Hasilnya :

Mengelak isi sel berbungkus
Jika isi sel agak panjang, dan lebar sel tidak dapat menampung seluruh isinya dalam satu baris,
secara otomatik isi sel akan terpamir dalam beberapa baris dalam sel itu. Contohnya ialah seperti
berikut :


Untuk memaksa supaya isi sel tetap terpamir dalam satu baris, kita gunakan ciri NOWRAP. Ciri
NOWRAP bermaksud tidak berbungkus. Ciri ini kita tuliskan dalam tag <TD> yang berkenaan.
Cuba lihat contoh berikut ;
<html>
<head><title>Muka 1</title></head>
<body>
Bunga hiasan mengikut hari:
<TABLE BORDER>
<TR><TD>Hari</TD><TD>Bunga</TD></TR>
<TR><TD>Isnin</TD><TD NOWRAP>Bunga matahari</TD></TR>
<TR><TD>Selasa</TD><TD NOWRAP>Bunga tahi ayam</TD></TR>
<TR><TD>Rabu</TD><TD NOWRAP>Bunga cempaka</TD></TR>
</TABLE>
</body>
</html>

Kelihatan begini :

Menetapkan warna sempadan sel
Jika kita telah menetapkan satu tabel supaya mempunyai garis sempadan (dengan ciri
BORDER), kita selanjutnya boleh menetapkan warna bagi garis sempadan. Kita gunakan ciri
BORDERCOLOR=X dimana X ialah warna yang kita mahu. Kita masukkan ciri ini samada
dalam tag <TABLE>, <TR> atau <TD>. Contohnya :
<TR BORDERCOLOR="red">
Contoh kod penuh ialah seperti berikut :
<html>
<head>
<title>
Muka 1
</title>
</head>
<body>
<TABLE BORDER BORDERCOLOR="red">
<TR BORDERCOLOR="blue"><TD WIDTH=100>Nama</TD><TD
WIDTH=100>Umur</TD><TD WIDTH=100>Jantina</TD></TR>
<TR BORDERCOLOR="yellow"><TD>Ali</TD><TD WIDTH=100>12</TD><TD
WIDTH=100>L</TD></TR>
<TR BORDERCOLOR="green"><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD BORDERCOLOR="red">Siti</TD><TD
BORDERCOLOR="yellow">40</TD><TD BORDERCOLOR="green">P</TD></TR>
</TABLE>
</body>
</html>
Hasilnya :

Menetapkan warna bahagian ringan
sempadan tabel
Jika kita telah menetapkan satu tabel supaya mempunyai garis sempadan (dengan ciri
BORDER), kita selanjutnya boleh menetapkan samada garisan sempadan itu supaya kelihatan 3
dimensi (3D) dengan menggunakan ciri BORDERCOLORLIGHT=X dimana X ialah warna
yang kita mahu. Kita masukkan ciri ini samada dalam tag <TABLE>, <TR> atau <TD>.
Contohnya :
<TR BORDERCOLORLIGHT="red"
Contoh kod penuh ialah seperti berikut :
<html>
<head>
<title>
Muka 1
</title>
</head>
<body>
<TABLE BORDER>
<TR BORDERCOLORLIGHT="red"><TD WIDTH=100>Nama</TD><TD
WIDTH=100>Umur</TD><TD WIDTH=100>Jantina</TD></TR>
<TR BORDERCOLORLIGHT="blue"><TD>Ali</TD><TD WIDTH=100>12</TD><TD
WIDTH=100>L</TD></TR>
<TR BORDERCOLORLIGHT="green"><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD BORDERCOLORLIGHT="yellow">Siti</TD><TD
BORDERCOLORLIGHT="red">40</TD><TD
BORDERCOLORLIGHT="green">P</TD></TR>
</TABLE>
</body>
</html>
Hasilnya :

(Ambil perhatian, jika kita perhatikan betul-betul garisan sempadan sel, ia terdiri dari 2 bahagian
iaitu bahagian gelap dan bahagian ringan (terang)).
Jika kita masukkan ciri BORDERCOLORLIGHT=X dalam satu tag <TD>, maka sempadan sel
itu sahaja yang akan terlibat. Jika kita masukkan ciri BORDERCOLORLIGHT=X dalam satu tag
<TR>, maka sempadan semua sel dalam baris itu akan terlibat. Jika kita masukkan ciri
BORDERCOLORLIGHT=X dalam tag <TABLE>, maka sempadan semua sel dalam tabel akan
terlibat. Jika kita masukkan ciri BORDERCOLORLIGHT=X dalam satu tag <TD> dan juga
dalam tag <TABLE>, dengan X (warna) yang berbeza, penetapan bagi sempadan sel itu akan
mengatasi penetapan dalam tag <TABLE> (Sel yang lain akan mengikuti penetapan pada tag
<TABLE>).
Menetapkan warna bahagian gelap
sempadan tabel
Jika kita telah menetapkan satu tabel supaya mempunyai garis sempadan (dengan ciri
BORDER), kita selanjutnya boleh menetapkan supaya bahagian gelap garisan sempadan itu
kelihatan 3 dimensi (3D) dengan menggunakan ciri BORDERCOLORDARK=X dimana X ialah
warna yang kita mahu. Kita masukkan ciri ini samada dalam tag <TABLE>, <TR> atau <TD>.
Contohnya :
<TR BORDERCOLORDARK="red"
Contoh kod penuh ialah seperti berikut :
<html>
<head>
<title>
Muka 1
</title>
</head>
<body>
<TABLE BORDER>
<TR BORDERCOLORDARK="red"><TD WIDTH=100>Nama</TD><TD
WIDTH=100>Umur</TD><TD WIDTH=100>Jantina</TD></TR>
<TR BORDERCOLORDARK="blue"><TD>Ali</TD><TD WIDTH=100>12</TD><TD
WIDTH=100>L</TD></TR>
<TR BORDERCOLORDARK="green"><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD BORDERCOLORDARK="yellow">Siti</TD><TD
BORDERCOLORDARK="red">40</TD><TD
BORDERCOLORDARK="green">P</TD></TR>
</TABLE>
</body>
</html>
Hasilnya :

Memasukkan perkataan dikiri tabel
Jika kita meletakkan tabel dikanan laman web dengan menggunakan ciri ALIGN="right" dan
kita mahu memasukkan ayat tertentu dikiri tabel itu, kita boleh melakukannya dengan
menuliskan ayat berkenaan selepas tag </table> tanpa memasukkan tag <BR>. Contohnya :
<html>
<head>
<title>
Muka 1
</title>
</head>
<body>
<TABLE ALIGN="right" BORDER=1 WIDTH=50%>
<TR><TD>Tabel ini mengandungi dua baris</TD></TR>
<TR><TD>Ia tersisi dikanan laman web</TD></TR>
</TABLE>
Ayat ini akan berada dikiri tabel
</body>
</html>
Hasilnya :

Perhatikan kedudukan ayat dikiri tabel tidak begitu menarik. Bagaimana dengan kedudukan
seperti berikut :

Kedudukan ayat sekarang secara menegak ialah agak ke tengah tabel. Ini dilakukan dengan
menambah tag <BR> dengan ciri CLEAR="left" selepas tag </TABLE> dan sebelum ayat
berkenan, seperti berikut :
<html>
<head>
<title>
Muka 1
</title>
</head>
<body>
<TABLE ALIGN="right" BORDER=1 WIDTH=50%>
<TR><TD>Tabel ini mengandungi dua baris</TD></TR>
<TR><TD>Ia tersisi dikiri laman web</TD></TR>
</TABLE>
<BR CLEAR="left">
Ayat ini berada dikiri tabel
</body>
</html>
Memasukkan perkataan dikanan tabel
Jika kita meletakkan tabel dikiri laman web dengan menggunakan ciri ALIGN="left" dan kita
mahu memasukkan ayat tertentu dikanan tabel itu, kita boleh melakukannya dengan menuliskan
ayat berkenaan selepas tag </table> tanpa memasukkan tag <BR>. Contohnya :
<html>
<head>
<title>
Muka 1
</title>
</head>
<body>
<TABLE ALIGN="left" BORDER=1 WIDTH=50%>
<TR><TD>Tabel ini mengandungi dua baris</TD></TR>
<TR><TD>Ia tersisi dikiri laman web</TD></TR>
</TABLE>
Ayat ini akan berada dikanan tabel
</body>
</html>
Hasilnya :

Perhatikan kedudukan ayat dikanan tabel tidak begitu menarik. Bagaimana dengan kedudukan
seperti berikut :

Kedudukan ayat sekarang secara menegak ialah agak ke tengah tabel. Ini dilakukan dengan
menambah tag <BR> dengan ciri CLEAR="right" selepas tag </TABLE> dan sebelum ayat
berkenan, seperti berikut :
<html>
<head>
<title>
Muka 1
</title>
</head>
<body>
<TABLE ALIGN="left" BORDER=1 WIDTH=50%>
<TR><TD>Tabel ini mengandungi dua baris</TD></TR>
<TR><TD>Ia tersisi dikiri laman web</TD></TR>
</TABLE>
<BR CLEAR="right">
Ayat ini berada dikanan tabel
</body>
</html>
Bahagian-bahagian tabel
Sebenarnya satu tabel mengandungi 3 bahagian iaitu kepala, badan dan kaki. Untuk membina
kepala tabel, kita gunakan tag <THEAD> dan </THEAD>. Untuk membina badan tabel, kita
gunakan tag <TBODY> dan </TBODY> dan untuk membina kaki tabel kita gunakan tag
<TFOOT> dan </TFOOT>. Dalam tiap-tiap tag, kita boleh masukkan tag-tag lain seperti <TR>,
</TR>, <TD> dan </TD> serta lain-lain tag dan ciri yang kita pelajari dalam perenggan-
perenggan diatas. Sebenarnya tiada perbezaan nyata antara ketiga-tiga bahagian ini. Apa-apa tag
dan ciri yang kita boleh masukkan dalam satu bahagian, kita boleh masukkan juga dalam
bahagian lain.
Berikut ialah contoh kod yang membina ketiga-tiga bahagian tabel (Perhatikan kedudukan tag-
tag) :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<TABLE BORDER=1>
<THEAD>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</THEAD>
<TBODY>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TBODY>
<TFOOT>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
<TR><TD>Siti</TD><TD>40</TD><TD>P</TD></TR>
</TFOOT>
</TABLE>
Sekian
</BODY>
</HTML>
Hasilnya kelihatan seperti berikut :

Perhatikan bahawa garisan dibawah baris pertama tiap-tiap bahagian adalah dengan sendirinya
agak tebal sebagai tanda sempadan bahagian-bahagian yang berkenaan.
Oleh kerana tiap-tiap bahagian adalah mempunyai ciri-ciri yang sama, dalam contoh-contoh
yang akan kita gunakan sebelum ini, kita tidak membahagikan satu tabel kepada bahagian-
bahagian itu. Sebaliknya kita terus menggunakan tag-tag <TR> dan <TD> dalam tag <TABLE>.
Apabila kita tidak menyatakan tag <THEAD> dan <TFOOT>, bermakna kita menggunakan tag
<TBODY>, walaupun kita juga tidak menyatakan tag <TBODY>.
Satu tabel boleh mengandungi lebih dari satu bahagian badan (TBODY) tetapi hanya satu
bahagian kepala (THEAD) dan satu bahagian kaki (THEAD).
Jika satu tabel hanya mengandungi bahagian badan tanpa bahagian kepala dan kaki, kita tidak
perlu menuliskan tag <TBODY>. Cukuplah dengan menuliskan tag-tag <TABLE> dan
</TABLE> sahaja. Ini cukup untuk menandakan bahawa tabel kita hanya mengandungi bahagian
badan sahaja. Inilah yang kita gunakan dalam contoh-contoh diatas.
Dalam contoh-contoh berikut ini, kita tidak menggunakan bahagian kepala dan kaki, hanya
bahagian badan tabel. Sebab itu kita tidak akan menggunakan tag <THEAD>, <TBODY> dan
<TFOOT> tetapi menggunakan tag <TABLE> sahaja.
Jika kita menggunakan ketiga-tiga tag <THEAD>, <TBODY> dan <TFOOT>, kita harus
mempastikan bahawa tiap-tiap bahagian itu mengandungi sekurang-kurangnya satu baris data
(tag <TR> dan <TD>), jika tidak, perkataan THEAD, TBODY dan TFOOT itu sendiri akan
dipaparkan oleh Internet Explorer.
Ciri RULES="GROUPS" berguna untuk membuat garisan antara kepala tabel, badan tabel
dan kaki tabel (jika kita menggunakan tag-tag <THEAD>, <TBODY> dan <TFOOT>.
Kesannya garisan pada tiap-tiap sel akan hilang, yang ada hanya garisan antara bahagian-
bahagian. Cuba lihat contoh kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<TABLE BORDER=1 RULES=GROUPS>
<THEAD>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
</THEAD>
<TBODY>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
</TBODY>
<TFOOT>
<TR><TD>Nama</TD><TD>Umur</TD><TD>Jantina</TD></TR>
<TR><TD></TD><TD></TD><TD></TD></TR>
<TR><TD>Ali</TD><TD>12</TD><TD>L</TD></TR>
<TR><TD>Abu</TD><TD>30</TD><TD>L</TD></TR>
</TFOOT>
</TABLE>
Sekian
</BODY>
</HTML>
Hasilnya, bagaimanapun, tidak begitu jelas seperti berikut :

Sisihan bahagian tabel
Kita boleh menetapkan ciri sisihan (ALIGN dan VALIGN) bagi tiap-tiap bahagian. Jika kita
menggunakan tag <COL> untuk menetapkan sisihan, sisihan dalam tag bahagian-bahagian itu
yang akan digunakan.
<COL ALIGN=JUSTIFY VALIGN=TOP>
<COL ALIGN=chAR chAR=: chAROFF=25 SPAN=4>
<THEAD ALIGN=CENTER VALIGN=MIDDLE>Kepala tabel</THEAD>
<TR><Td>xxx</TD><TR>
<TBODY>
<TR><Td>xxx</TD><TR>
<TBODY>
<TR><Td>xxx</TD><TR>
<TBODY>
<TR><Td>xxx</TD><TR>
<TFOOT ALIGN=LEFT VALIGN=BOTTOM>
<TR><Td>xxx</TD><TR>
</TABLE>
Contoh tabel
Perhatikan kod berikut dan hasilnya :
<html>
<head>
<title>
Muka 1
</title>
<body>
<TABLE BORDER FRAME=hsides RULES=cols>
<COL ALIGN=left>
<COLGROUP SPAN=3 ALIGN=center VALIGN=middle>
<THEAD>
<CAPTION ALIGN=center><FONT SIZE=+1><B>Sebahagian perbandingan keupayaan
pelayar web</B>
</FONT>
</CAPTION>
<TR>
<TD>Unsur</TD><TD><B>Internet Explorer</B></TD><TD><B>Netscape</B>
</TD><TD><B>Mosaic</B></TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>&lt;B&gt;</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD>&lt;BASE ...&gt;</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...HREF</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...TARGET</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD>&lt;BASEFONT ...&gt;</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top> ...SIZE</TD><TD>X<BR><FONT SIZE=-1>
(hanya nampak<BR>bila FONT<BR>SIZE= digunakan<BR>juga)</FONT></TD><TD
VALIGN=top>X</TD>
<TD></TD>
</TR>
<TR>
<TD> ...FACE</TD><TD>X</TD><TD></TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top>&lt;BGSOUND ...&gt;</TD><TD VALIGN=top>X</TD><TD>
</TD><TD>X<BR><FONT SIZE=-1>(akan melangkaui<BR>pemain fail<BR>.mid)
</FONT></TD>
</TR>
</TBODY>
<TFOOT></TFOOT>
</TABLE>
</body>
</html>



Menetapkan kedudukan perkataan
Pengenalan
Cuba perhatikan contoh kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
Nama Umur Jantina
Ali 12 L
Abu 30 L
Siti 40 P
Sekian
</BODY>
</HTML>
Hasilnya akan kelihatan seperti berikut :

Hasil yang kita lihat melalui Internet Explorer tidak kelihatan seperti struktur data yang kita
susun dalam kod.
Untuk menjadikan struktur data yang kita susun dalam kod akan kelihatan seperti itu bila dilihat
melalui Internet Explorer, kita gunakan tag <PRE> dan </PRE>. PRE adalah ringkasan bagi
PRE-DETERMINED. Kita masukkan data dan strukturnya diantara kedua-dua tag ini.
Contoh kod yang menggunakan tag <PRE> dan </PRE> ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<PRE>
Nama Umur Jantina
Ali 12 L
Abu 30 L
Siti 40 P
</PRE>
Sekian
</BODY>
</HTML>
Hasilnya kelihatan seperti berikut :

Perhatikan ciri-ciri berikut apabila kita menggunakan tag <PRE> :
1. Jarak melintang antara perkataan yang kelihatan dalam pelayar web akan serupa seperti
jarak melintang antara perkataan dalam kod.
2. Perkataan dalam baris sebelum <PRE> dan selepas </PRE> masing-masing dengan
sendirinya terpisah oleh satu baris kosong dengan isi tag.
3. Jenis font (bentuk huruf) yang dihasilkan bagi perkataan dalam tag berbeza dari font
perkataan yang di luar tag.
Kedudukan isi tag <PRE>
Kedudukan isi tag <PRE> yang dipamirkan oleh Internet Explorer adalah mengikut kedudukan
isi tag itu dalam kod yang dituliskan. Bagaimanapun, kita boleh meletakkan data yang
dipamirkan supaya beradaditengah laman web dengan lebih mudah dengan meletakkan tag
<PRE> dan </PRE> diantara tag <CENTER> dan </CENTER>. Berikut ialah contoh kodnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<CENTER>
<PRE>
Nama Umur Jantina
Ali 12 L
Abu 30 L
Siti 40 P
</PRE>
</CENTER>
Sekian
</BODY>
</HTML>
Hasilnya :

Untuk meletakkan data dikanan laman web dengan lebih mudah, kita letakkan tag <PRE> dan
</PRE> diantara tag <DIV ALIGN="RIGHT"> dan </DIV>. Contoh kod :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<DIV ALIGN="RIGHT">
<PRE>
Nama Umur Jantina
Ali 12 L
Abu 30 L
Siti 40 P
</PRE>
</DIV>
Sekian
</BODY>
</HTML>

Hasilnya :

Warna latarbelakang isi tag <PRE>
Kita boleh mewarna latarbelakang bagi perkataan dalam tag <PRE> dengan memasukkan ciri
STYLE=BACKGROUND:"X" dalam tag <PRE> dimana X ialah warna yang kita mahu.
Warna-warna yang boleh digunakan ialah : Aqua, Navy, Black, Olive, Blue, Purple, Fuchsia,
Red, Gray, Silver, Green, Teal, Lime, White, Maroon dan Yellow. Dalam bab 'Senarai warna'
kita akan belajar cara mendapatkan warna-warna lain dari 16 warna ini.
Contoh ringkas kod ialah :
<PRE STYLE=BACKGROUND:"YELLOW">
Berikut ialah contoh kod yang lebih lengkap :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<PRE STYLE=BACKGROUND:"YELLOW">
Nama Umur Jantina
Ali 12 L
Abu 30 L
Siti 40 P
</PRE>
Sekian
</BODY>
</HTML>
Hasilnya ialah seperti berikut :

Warna perkataan dalam tabel
Kita boleh mewarna semua perkataan dalam tag <PRE> dengan warna yang sama dengan
memasukkan ciri STYLE=COLOR:"X" dalam tag <PRE> dimana X ialah warna yang kita
mahu.
Warna-warna yang boleh digunakan ialah : Aqua, Navy, Black, Olive, Blue, Purple, Fuchsia,
Red, Gray, Silver, Green, Teal, Lime, White, Maroon dan Yellow. Dalam bab 'Senarai warna'
kita akan belajar cara mendapatkan warna-warna lain dari 16 warna ini.
Contoh ringkas kod ialah :
<PRE STYLE=COLOR:"RED">
Berikut ialah contoh kod yang lebih lengkap :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<PRE STYLE=COLOR:"RED">
Nama Umur Jantina
Ali 12 L
Abu 30 L
Siti 40 P
</PRE>
Sekian
</BODY>
</HTML>
Hasilnya ialah seperti berikut :

Untuk mewarna perkataan-perkataan dengan warna yang berlainan, gunakan cara seperti yang
kita pelajari dalam bab 'Mengendali huruf dan perkataan', iaitu kita letakkan perkataan yang
berkenaan diantara tag <FONT COLOR="X"> dan </FONT> dimana X ialah warna yang kita
mahu. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<PRE>
<FONT COLOR=RED>Nama</FONT> <FONT COLOR="RED">Umur</FONT>
<FONT COLOR="RED">Jantina</FONT>
Ali 12 L
Abu 30 L
Siti 40 P
</PRE>
Sekian
</BODY>
</HTML>
Hasilnya :

Format perkataan dalam tag <PRE>
Kita boleh memformat perkataan dalam tag <PRE> dengan menggunakan tag-tag yang kita
pelajari dalam bab 'Mengendali huruf dan perkataan'. Bagaimanapaun, perkataan-perkataan yang
merupakan kod HTML tidak mempengaruhi kedudukan perkataan yang bukan kod HTML. Satu
contoh ialah kod diatas tadi. Satu lagi contoh ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<PRE>
<FONT COLOR="RED">Nama</FONT> <FONT COLOR="RED">Umur</FONT>
<FONT COLOR="RED">Jantina</FONT>
<B>Ali</B> 12 L
<B>Abu</B> <FONT SIZE=8>30</FONT> L
<B>Siti</B> 40 <FONT COLOR="BLUE">P</FONT>
</PRE>
Sekian
</BODY>
</HTML>
Hasilnya :


Margin isi tag <PRE>
Kita boleh menetapkan kedudukan isi tag <PRE> dari kiri laman web dengan memasukkan ciri
STYLE=margin-left:Xin' dalam tag <PRE> dimana X ialah suatu angka. 'in' ialah bagi inci.
Contoh ringkas ialah seperti berikut :
<PRE STYLE=left-margin:2in>
Berikut ialah contoh kod penuh :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<PRE STYLE=margin-left:2in>
Nama Umur Jantina
Ali 12 L
Abu 30 L
Siti 40 P
</PRE>
Sekian
</BODY>
</HTML>

Hasilnya :

Untuk menetapkan kedudukan isi tag <PRE> pada satu jarak tertentu dari atas laman web,
gantikan 'margin-left' dengan 'margin-top'.
Untuk menetapkan kedudukan isi tag <PRE> pada satu jarak tertentu dari kanan laman web,
gantikan 'margin-left' dengan 'margin-right'.
Untuk menetapkan kedudukan isi tag <PRE> pada satu jarak tertentu dari bawah laman web,
gantikan 'margin-left' dengan 'margin-bottom'.
Contoh kombinasi beberapa ciri
Berikut ialah kod yang menunjukkan pengenaan beberapa ciri pada tag <PRE> :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Senarai nama
<PRE STYLE=margin-left:1in;background:white>
Nama Umur Jantina
<FONT COLOR="GREEN">Ali</FONT> <I>12</I> <B>L</B>
<FONT COLOR="GREEN">Abu</FONT> <I>30</I> <B>L</B>
<FONT COLOR="GREEN">Siti</FONT> <I>40</> <B>P</B>
</PRE>
Sekian
</BODY>
</HTML>
Hasilnya :

Memasukkan simbol-simbol dan karakter
Banyak simbol-simbol atau karakter-karakter yang tidak terdapat dalam kibod, contohnya simbol
. Untuk memasukkan simbol ini dalam laman web, kita gunakan kod bagi simbol ini, iaitu
&#169;. Perhatikan penggunaan tanda-tanda &, # dan ;. Tandatanda ini sangat mustahak.
Contoh :

Kod HTML dan kod simbolnya ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>Muka 1</TITLE>
</HEAD>
<BODY>
<FONT SIZE=10>
Tanda hakcipta ialah : &#169; iaitu ringkasan bagi Copyright.
</FONT>
</BODY>
</HTML>
Lain-lain simbol dan kod-kod bagi simbol ialah seperti berikut :
Simbol Kod karakter
(Belum digunakan) &#00; hingga &#08;
Tab &#09;
Baris baru &#10;
(Belum digunakan) &#11; hingga &#31;
(Belum digunakan) &#32;
! &#33;
" &#34; atau &quot; (double quote)
# &#35;
$ ringgit &#36;
% peratus &#37;
& sambungan &#38; atau &amp; (ampersand)
' koma diatas &#39;
( kurungan (kiri) &#40;
) kurungan (kanan) &#41;
* bintang &#42;
+ campur &#43;
, koma &#44;
- sengkang &#45;
. titik &#46;
/ &#47;
0 hingga 9 &#48; hingga &#57;
: titik dua bertindih &#58;
; &#59;
< kurang dari &#60; atau &lt; (lower than)
= sama dengan &#61;
> lebih dari &#62; atau &gt; (greater than)
? tanda soal &#63;
@ &#64;
A hingga Z &$65; hingga &#90;
[ &#91;
\ &#92;
] &#93;
^ &#94;
_ &#95;
` &#96;
a hingga z &#97; hingga &#122;
{ &#123;
| &#124;
} &#125;
~ &#126;
(Tidak digunakan) &#127; hingga &#152;
&#153;
(Tidak digunakan) &#154; hingga &#160;
&#161;
ruang (huruf) kosong &#160; atau &nbsp; (non-breaking space)
&#161;
&#162;
&#163;
&#164;
&#165;
&#166;
&#167;
&#168;
(copyright) &#169; atau &copy;
&#170;
&#171;
&#172;
- &#173;
(registered) &#174; atau &reg;
&#175;
&#176;
&#177;
2 &#178;
3 &#179;
&#180;
&#181;
&#182;
&#183;
&#184;
1 &#185;
&#186;
&#187;
&#188;
&#189;
&#190;
&#191;
&#192; atau &Agrave;
&#193; atau &Aacute;
&#194; atau &Acirc;
&#195; atau &Atilde;
&#196; atau &Auml;
&#197; atau &Aring;
&#198; atau &AElig;
&#199; atau &Ccedil;
&#200; atau &Egrave;
&#201; atau &Eacute;
&#202; atau &Ecirc;
&#203; atau &Euml;
&#204; atau &Igrave;
&#205; atau &Iacute;
&#206; atau &Icirc;
&#207; atau &Iuml;
&#208; atau &ETH;
&#209; atau &Ntilde;
&#210; atau &Ograve;
&#211; atau &Oacute;
&#212; atau &Ocirc;
&#213; atau &Otilde;
&#214; atau &Ouml;
darab &#215;
&#216; atau &Oslash;
&#217; atau &Ugrave;
&#218; atau &Uacute;
&#219; atau &Ucirc;
&#220; atau &Uuml;
Y &#221; atau &Yacute;
&#222; atau &THORN;
&#223; atau &szlig;
&#224; atau &agrave;
&#225; atau &aacute;
&#226; atau &acirc;
&#227; atau &atilde;
&#228; atau &aauml;
&#229; atau &aring;
&#230; atau &aelig;
&#231; atau &ccedil;
&#232; atau &egrave;
&#233; atau &eacute;
&#234; atau &ecirc;
&#235; atau &euml;
&#236; atau &igrave;
&#237; atau &iacute;
&#238; atau &icirc;
&#239; atau &iuml;
&#240; atau &eth;
&#241; atau &ntilde;
&#242; atau &ograve;
&#243; atau &oacute;
&#244; atau &ocirc;
&#245; atau &otilde;
&#246; atau &ouml;
bahagi &#247;
&#248; atau &oslash;
&#249; atau &ugrave;
&#250; atau &uacute;
&#251; atau &ucirc;
&#252; atau &uuml;
v &#253; atau &yacute;
w &#254; atau &thorn;
&#255; atau &yuml;
Tidak semua pelayar web menyokong karakter-karakter yang dinyatakan diatas. Jika pelayar web
itu tidak menyokong satu karakter, karakter itu akan dipamirkan dalam bentuk tidak seperti yang
kita jangkakan.
Contoh :
<html>
<head>
<title>Muka 1</title>
</head>
<body>
60 &gt; 59
<br>
100 &lt; 1000
<br>
Sini &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Sana
<br>
&#169;
<br>
&#174;
<br>
&quot;Bahaya&quot;
<br>
&#36;350
<br>
Suka &amp; duka
<br>
</body>
</html>
Hasilnya :

Membuat dan mengendali pintasan (links)
Pintasan adalah perkataan atau grafik dalam satu laman web, dimana apabila kita klik padanya,
kita akan dibawa melihat laman web yang lain, atau ke satu bahagian lain dalam laman web yang
sama atau satu bahagian laman web yang lain.
Tag-tag yang berkaitan dengan pintasan ialah <A> dan </A>. <A> bermaksud ANCHOR. Tag
ini menandakan kita mahu membuat satu pintasan. </A> ialah tanda penamat satu pintasan.
Kita membuat pintasan dengan memasukkan apa-apa perkataan, ayat atau gambar diantara tag
<A> dan </A>, serta menuliskan ciri HREF="X" dalam tag <A> dimana X ialah destinasi
kepada pintasan. Contohnya :
<A HREF="Muka2.htm">Ke muka surat 2</A>.
HREF bermakna HYPERTEXT REFERENCE. Dalam contoh ini 'Muka2.htm' ialah satu laman
web lain. Ia adalah destinasi kepada pintasan. Perkataan 'Ke muka surat 2' ialah perkataan yang
akan kita dan pengguna lihat pada laman web. Apabila kita klik pada perkataan ini, kita akan
dipersembahkan dengan laman web bernama 'Muka2.htm'. Ini bermakna laman web 'Muka2.htm'
mestilah telah sedia ada. Jika belum ada, bagaimanapun, tiada apa-apa akan berlaku.
Contoh penggunaan pintasan :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<A HREF="Muka2.htm">Ke muka surat 2</A>.
</BODY>
</HTML>
Akan kelihatan dalam laman web seperti berikut :

Begitulah kegunaan ciri HREF dalam tag <A>, sebagai cara untuk mengalihkan kita ke laman
web lain.
Bagaimana kita boleh kembali ke laman web yang asal setelah kita melihat laman web destinasi?
Kita boleh klik butang "Back" yang terdapat pada Internet Explorer. Berikut ialah kedudukan
biasa butang 'Back' pada Internet Explorer :

Atau, kita sediakan tag <A> dalam laman web 'Muka2.htm' yang mengarah ke laman web asal
(ini cara yang lebih selamat):

Jadi, kita sediakan baris kod berikut dalam laman web 'Muka2.htm' :
<A HREF=Muka1.htm>Ke muka surat 1</A>.
Pintasan ke folder yang sama
Dalam contoh diatas, laman web 'Muka2.htm' berada dalam folder yang sama dengan laman
web yang memanggilnya (Muka1.htm). Sebab itu kita menuliskan nama laman web itu sahaja
tanpa menuliskan lokasinya.
Pintasan ke folder lain
Jika laman web destinasi (Muka2.htm) berada di satu direktori selepas direktori dimana laman
web yang memangilnya (Muka1.htm) berada, dan katakan sub-direktori itu bernama 'biografi',
kita tuliskan begini :
<A HREF=biografi/Muka2.htm>Ke muka surat 2</A>.
Atau, kita boleh menuliskan alamat destinasi dengan penuh seperti berikut :
<A HREF=C:\orang\biografi\Muka2.htm>Ke muka surat 2</A>.
Dalam contoh baris diatas, laman web yang memanggil berada di folder C:\orang.
Perhatian : Bezakan penggunaan tanda / (forward-slash) dengan tanda \ (back-slash). Dalam tag
<A> kita gunakan / tetapi dalam sistem windows, kita gunakan \ .
Jika laman web destinasi (Muka2.htm) berada di dua direktori selepas direktori dimana laman
web yang memanggilnya (Muka1.htm) berada, dan katakan sub-sub direktori itu masing-masing
bernama 'ahlisains/biografi', kita tuliskan begini :
<A HREF=ahlisains/biografi/Muka2.htm>Ke muka surat 2</A>.
Atau, kita boleh menuliskan alamat dengan penuh seperti berikut :
<A HREF=C:\orang\biografi\ahli sains\Muka2.htm>Ke muka surat 2</A>.
Dalam contoh ini, laman web kita berada di C:\orang.
Jika laman web 'Muka2.htm' berada di satu direktori sebelum direktori dimana laman web
'Muka1.htm' berada, kita tuliskan begini (kita gunakan tanda dua titik) :
<A HREF=../Muka2.htm>Ke muka surat 2</A>.
Atau, kita boleh menuliskan alamat dengan penuh seperti berikut :
<A HREF=C:\manusia\Muka2.htm>Ke muka surat 2</A>.
Dalam contoh ini, laman web kita berada di C:\manusia\orang.

Jika laman web 'Muka2.htm' berada di dua direktori sebelum direktori dimana laman web
'Muka1.htm' berada, kita tuliskan begini (kita gunakan tanda dua titik juga dengan dua tanda / ) :
<A HREF=../../Muka2.htm>Ke muka surat 2</A>.
Atau, kita boleh menuliskan alamat dengan penuh seperti berikut :
<A HREF=C:\makhluk\manusia\Muka2.htm>Ke muka surat 2</A>.
Dalam contoh ini, laman web kita berada di C:\makhluk\manusia\orang.
Pintasan ke laman web lain
Jika laman web 'Muka2.htm' berada di laman web lain, dan katakan laman web itu bernama
'maxi.com', kita tuliskan begini :
<A HREF=http://www.maxi.com/Muka2.htm>Ke muka surat 2 di maxi</A>.
Sudah tentu kita perlukan jalinan internet untuk mencapainya.
Jika laman web berkenaan tidak dapat dihubungi oleh sebab-sebab tertentu, Internet Explorer
akan mempamirkan makluman berikut :

Lihat pula contoh berikut :
<A HREF=http://www.jering.my>Ke jering</A>
Dalam contoh ini, tiada laman web dinyatakan dalam tag <A> (tiada "xxx.htm"). Kita cuba
mencapai komputer di internet bernama www.jering.my dengan menggunakan protokol "http://".
"Http://" adalah nama protokol (cara) yang digunakan untuk mencapai laman web melalui
jaringan internet. Kita biasanya menggunakan protokol ini. Tiada laman web dinyatakan dalam
tab <A>, kerana komputer berkenaan mempunyai lebih dari satu laman web, dimana salah satu
laman web nya (biasanya bernama "welcome.htm" atau "index.htm" atau "default.htm") telah di
set secara otomatik untuk menerima tag <A> kita dan kita akan dapat melihat laman web itu.
Setelah itu barulah kita dapat melihat lain-lain laman web dalam komputer tersebut melalui tag-
tag <A> yang disediakan dalam laman web "welcome.htm" itu.
Pintasan ke laman web yang sama
Kita boleh membuat pintasan ke satu perkataan atau grafik yang berada dalam laman web yang
sama jika kita telah memberi nama kepada perkataan atau grafik itu terlebih dahulu. Pintasan ini
biasanya kita lakukan jika laman web kita sangat panjang.
Untuk memberi nama kepada satu perkataan atau grafik dalam laman web, kita gunakan juga tag
<A> tetapi dengan memasukkan ciri NAME="X" dalam tag <A> dimana X ialah nama yang kita
mahu. Contohnya perkataan 'Bawah sini' di laman web kita yang terletak di bahagian bawah
laman web yang sama, kita hendak berikannya nama 'BawahSini'. Caranya begini :
<A NAME=BawahSini>Bawah sini</A>.
Untuk mencapai perkataan 'Bawah sini dari satu pintasan, kita boleh tuliskan tag begini pada
pintasan itu:
<A HREF=BawahSini>Ke Bawah sana</A>.
Apabila kita sebagai pengguna klik pada pekataan 'Ke Bawah sana', kita akan dapat melihat
perkataan 'Bawah sini' (yang telah diberi nama 'BawahSini').
Pintasan ke bahagian tertentu di laman web
lain
Kita juga boleh membuat pintasan terus ke bahagian tertentu yang telah diberi nama
dalam laman web lain. Contohnya :
<A HREF=Muka5.htm#KL>Kuala Lumpur di muka 5</A>
Tag <A> ini menyebabkan kita dan pengguna akan dibawa ke laman web bernama 'Muka5.htm'
dan seterusnya ke bahagian (tag) yang telah diberi nama 'KL'. Perhatikan penggunaan tanda #
dalam tag <A>. Untuk memberi nama kepada perkataan 'Kuala Lumpur' dengan nama 'KL' di
laman web Muka5.htm, kita tuliskan begini di kod laman web Muka5.htm:
<A NAME=KL>Kuala Lumpur</A>

Pintasan dalam tabel
Kita boleh memasukkan pintasan dalam tabel seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Senarai nama
<BR>
<BR>
<TABLE BORDER=1 WIDTH=400>
<TR><TD>Ali</TD><TD><A HREF="BiodataAli.htm">Biodata Ali</A></TD></TR>
<TR><TD>Abu</TD><TD><A HREF="BiodataAli.htm">Biodata Abu</A></TD></TR>
<TR><TD>Siti</TD><TD><A HREF="BiodataAli.htm">Biodata Siti</A></TD></TR>
</TABLE>
<BR>
Sekian
</BODY>
</HEAD>
</HTML>
Hasilnya :

Perenggan sebagai destinasi
Jika kita mahu satu perenggan dalam laman web sebagai satu destinasi, kita perlu memberi nama
kepada perenggan itu. Kita memberi nama kepada perenggan dengan memasukkan ciri
NAME="X" dalam tag <P> dimana X ialah nama yang kita mahu. Contohnya untuk memberi
nama "perengganA" kepada satu perenggan, kita tuliskan begini :
<P NAME=perengganA>
Dari lain-lain bahagian dalam laman web kita boleh mencapai perenggan ini dengan menuliskan
pintasan seperti berikut :
<A HREF=PerengganA>Ke Perenggan A</A>
Jika PerengganA berada dalam laman web Muka5.htm dan kita mahu mencapainya dari satu
pintasan di laman web Muka1.htm, kita tuliskan begini pada kod pintasan di laman web
muka1.htm:
<A HREF=Muka5.htm#PerengganA>Ke Perenggan A di Muka5</A>

Tabel sebagai destinasi
Jika kita mahu satu tabel dalam laman web sebagai satu destinasi, kita perlu memberi nama
kepada tabel itu. Kita memberi nama kepada tabel dengan memasukkan ciri NAME="X" dalam
tag <TABLE> dimana X ialah nama yang kita mahu. Contohnya untuk memberi nama "tableA"
kepada satu tabel, kita tuliskan begini :
<TABLE NAME=tableA>
Dari lain-lain bahagian dalam laman web kita boleh mencapai tabel ini dengan menuliskan
pintasan seperti berikut :
<A HREF=tabelA>Ke tabel A</A>
Jika tabelA berada dalam laman web Muka5.htm dan kita mahu mencapainya dari satu
pintasan di laman web Muka1.htm, kita tuliskan begini pada kod pintasan di laman web
muka1.htm:
<A HREF=Muka5.htm#tabelA>Ke tabel A di Muka5</A>
Contoh kegunaan pintasan
Menggunakan pintasan antara bahagian dalam laman web biasanya berguna untuk membuat
indeks atau senarai kandungan bagi laman web yang panjang. Contohnya :
<HTML>
<HEAD>
<TITLE>Muka 1</TITLE>
</HEAD>
<BODY>
<H1>Sejarah</H1>
<H2><A HREF="#Sejarah Melaka">Sejarah Melaka</A></H2>
<H2><A HREF="#Sejarah Siam">Sejarah Siam</A></H2>
<H2><A HREF="#Sejarah Singapura">Sejarah Singapura</A></H2>
<H2><A HREF="#Sejarah Johor">Sejarah Johor</A></H2>
<HR>
<H2><A NAME="Sejarah Melaka">Sejarah Melaka</A></H2>
. . .
<H2><A NAME="Sejarah Siam">Sejarah Siam</A></H2>
. . .
<H2><A NAME="Sejarah Singapura">Sejarah Singapura</A></H2>
. . .
<H2><A NAME="Sejarah Johor">Sejarah Johor</A></H2>
. . .
</BODY>
</HTML>
Destinasi lain
Selain dari perenggan dan tabel, kita juga boleh memberi nama kepada heading (tag <H1>
hingga <H6>), gambar dan sebagainya untuk membolehkannya dijadikan destinasi pintasan.
Menggunakan ciri ID
Kita boleh juga menggunakan ciri ID="X" sebagai ganti ciri NAME="X".
Warna pintasan
Biasanya warna perkataan yang menjadi pintasan ialah biru. Kita boleh menentukan warna
perkataan pintasan kepada warna-warna lain dengan cara memasukkan ciri LINK="X" kedalam
tag <BODY> dimana X ialah warna yang kita mahu. Contohnya :
<BODY LINK=RED>
Warna-warna lain yang boleh kita gunakan ialah : Aqua, Navy, Black, Olive, Blue, Purple,
Fuchsia, Red, Gray, Silver, Green, Teal, Lime, White, Maroon dan Yellow. Untuk mendapatkan
warna-warna lain, sila rujuk bab 'Senarai warna'.
Ada kemungkinan kita telah memasukkan ciri warna dalam tag <BODY>, contohnya <BODY
BGCOLOR="YELLOW">. Untuk memasukkan ciri LINK, kita tuliskan sahaja ciri ini sebelum
atau selepas ciri yang sedia ada, dipisahkan dengan satu karakter kosong, seperti berikut :
<BODY LINK=RED BGCOLOR=YELLOW>

Kita boleh menentukan warna pintasan yang baru saja di klik dengan memasukkan ciri
ALINK="X" dalam tag <BODY> dimana X ialah warna yang kita mahu. ALINK adalah
ringkasan bagi ACTIVE LINK. Contohnya :
<BODY ALINK=GREEN>
Ada kemungkinan kita telah memasukkan ciri lain dalam tag <BODY>, contohnya <BODY
BGCOLOR=YELLOW>. Untuk memasukkan ciri ALINK, kita tuliskan sahaja ciri ini
sebelum atau selepas ciri yang sedia ada, dipisahkan dengan satu karakter kosong, seperti berikut
:
<BODY LINK=RED BGCOLOR=YELLOW ALINK=GREEN>
Kita boleh menentukan pintasan yang telah pernah di klik s dengan dengan memasukkan ciri
VLINK=X dalam tag <BODY> dimana X ialah warna yang kita mahu. VLINK adalah ringkasan
bagi VISITED LINK. contohnya :
<BODY VLINK=MAGENTA>
Ada kemungkinan kita telah memasukkan ciri lain dalam tag <BODY>, contohnya <BODY
BGCOLOR=YELLOW>. Untuk memasukkan ciri VLINK, kita tuliskan sahaja ciri ini
sebelum atau selepas ciri yang sedia ada, dipisahkan dengan satu karakter kosong, seperti berikut
:
<BODY LINK=RED BGCOLOR=YELLOW VLINK=MAGENTA>
Satu perkara yang perlu kita awasi ialah warna pintasan hendaklah berbeza dengan warna
latarbelakang badan laman web, jika sama kita tidak dapat melihat pintasan itu.
Kita boleh juga menyatakan warna dengan nilai hex. Sila rujuk bab 'Senarai warna' untuk
mendapatkan senarai warna dan cara mendapatkan nilai hex bagi apa-apa warna.
Alamat asas bagi pintasan
Alamat pintasan asas boleh kita gunakan untuk mengelakkan kita dari menulis alamat penuh
destinasi pintasan setiap kali kita membina pintasan.
Kita gunakan tag <BASE> untuk menandakan alamat asas bagi laman web kita dan semua
pintasan dalam laman web.
Tag <BASE> dituliskan dalam tag <HEAD>. Satu sahaja ciri dalam tag <BASE> ialah HREF.
Tag ini tidak mempunyai tag penutup.
Berikut ialah satu contoh :
<BASE HREF="http://tvseven.com/">
Contoh ini memberitahu Internet Explorer untuk menambah http://tvseven .com/ untuk semua
pintasan dalam laman web. Cara begini sangat berguna bila laman web kita mengandungi laman
web-laman web di komputer yang berlainan dan kita mahu menghubungkan mereka dalam satu
laman web lain. Contohnya, kita boleh meletakkan satu laman web dalam satu komputer pelayan
web tanpa menukar alamat satu pintasan didalamnya.
Berikut ialah contoh yang agak lengkap :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BASE HREF="http://tvseventy.com/">
</HEAD>
<BODY>
<P>
<A HREF="Muka2.htm"><IMG SRC="gambarbangunan.gif"></A>
</P>
<H2>
<IMG SRC="gambarMukaPengerusi.gif" ALIGN="BOTTOM">
Saluran TV untuk anda yang berumur 70 keatas
</H2>
<P>
<STRONG>
<A HREF="SejarahTV.html">
Alamilah dunia hiburan terbaru dicipta
khusus untuk anda.</A>
</STRONG>
</P>
</BODY>
</HTML>
Apabila pengguna melayari laman web ini, tidak kira dimana laman web ini berada dalam
internet, apa-apa pintasan yang dilalui oleh pengguna akan membawa mereka ke laman web
tvseventy.com. Alamat asas juga memastikan lain-lain alamat relatif dalam laman web sentiasa
betul kedudukannya, termasuk pintasan kepada gambar-gambar.
Dalam contoh diatas, rujukan-rujukan kepada Muka2.html, gambarbangunan.gif,
GambarMukaPengerusi.gif, dan SejarahTV.htm akan ditafsirkan sebagai berikut:
http://tvseventy.com/Muka2.html
http://tvseventy.com/gambarbangunan.gif
http://tvseventy.com/GambarMukaPengerusi.gif
http://tvseventy.com/SejarahTV.html
Kita boleh menggunakan ciri TARGET=X dalam tag <BASE> untuk menetapkan satu lokasi
dalam laman web atau satu laman web sebagai sasaran atau destinasi bagi pintasan dari mana-
mana laman web. Contohnya jika kita menulis begini dalam satu laman web:
<BASE TARGET=Muka2.htm>
kemudian menulis begini dalam satu tag <A> :
<A>Juga kesana</A>
ini akan menyebabkan pengguna dibawa melihat Muka2.htm.
Membuat pintasan ke kumpulan berita
(Newsgroup)
Newsgroup (kumpulan berita) ialah satu perkhidmatan yang disediakan oleh syarikat-syarikat
tertentu. Syarikat tersebut menyediakan satu komputer khusus untuk pengguna internet bertukar-
tukar berita dengan orang lain (kita boleh menghantar berita ke komputer tersebut dan kita boleh
membaca berita yang dihantar oleh orang lain di komputer tersebut).
Jika kita tahu alamat komputer tersebut, kita boleh memasukkan pintasan ke situ dalam laman
web kita menggunakan tag <A> dengan ciri HREF. Contohnya :
<A HREF="NNTP://news.ABCdotcom.com/buku.reviu">Reviu buku</A>
Perhatikan penggunaan 'NNTP', bukannya 'HTTP'. Ini kerana perkhidmatan seperti itu dicapai
melalui protokol NNTP bukan HTTP seperti laman web biasa.
NNTP bermaksud 'Network News Transfer Protocol'.
Biasanya sebelum kita dapat menggunakan perkhidmatan ini, kita mesti mendaftar dahulu
dengan syarikat berkenaan. Mendaftar boleh dilakukan melalui laman web mereka atau melalui
pos.
Pintasan ke kumpulan penyelidikan
Satu lagi jenis perkhidmatan yang terdapat dalam internet ialah perkhidmatan yang disediakan
oleh syarikat-syarikat tertentu (biasanya oleh pihak universiti) dimana komputer khusus
disediakan untuk sesiapa juga bertukar-tukar maklumat mengenai penyelidikan mereka supaya
dapat dikongsi oleh orang lain.
Jika kita tahu alamat komputer tersebut, kita boleh membuat pintasan ke situ dalam laman web
kita dengan menggunakan tag <A> berserta ciri HREF. Contohnya :
<A HREF="GOPHER://gopher.UMAS.Proj.kereta/2005">Projek kereta 2004</A>
Perhatikan penggunaan GOPHER bukan HTTP seperti laman web biasa kerana protokol (cara
capaian internet) yang digunakan ialah GOPHER bukannya HTTP.
Menggunakan perkhidmatan telnet
Telnet ialah satu perkhidmatan yang disediakan oleh syarikat-syarikat tertentu. Perkhidmatan ini
membolehkan penggunanya berinteraksi antara satu sama lain. Mereka terlebih dahulu mestilah
tahu bahasa arahan-arahan telnet.
Kita boleh memasukkan pintasan ke perkhidmatan telnet jika tahu alamat perkhidmatan itu.
Contohnya :
<A HREF="telnet://tvp.com"> Perkhidmatan Telnet oleh TVP</A>
Membuat garisan melintang
Contoh garisan melintangi wepej ialah seperti berikut :

Kita gunakan tag <HR> untuk membina garisan melintangi laman web. HR adalah ringkasan
bagi HORIZONTAL RULE. Tag <HR> boleh digunakan tanpa tag penamat iaitu tag </HR>
tidak diperlukan.
Kod bagi laman web diatas ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Dibawah ini ialah satu garisan melintangi laman web
<HR>
Sekian
</BODY>
</HTML>
Perhatikan, tag <HR> tidak memerlukan tag <BR> untuk membinanya di baris tersendiri.
Ketebalan garisan
Kita boleh mengubah ketebalan garisan dengan memasukkan ciri SIZE=X dalam tag <HR>
dimana X ialah angka seperti 1, 2, 3 dan sebagainya. Tebal asal (jika kita tidak memasukkan ciri
SIZE=X) ialah 2 (dalam unit pixel). Untuk mengubah ketebalannya menjadi 8 pixel, kita tulis
begini :
<HR SIZE=8>
Contoh kod penuh ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Dibawah ini ialah satu garisan melintangi laman web setebal 8 pixel
<HR SIZE=8>
Sekian
</BODY>
</HTML>
Hasilnya :

Lebar garisan
Kita juga boleh mengubah lebar garisan dengan memasukkan ciri WIDTH=X dalam tag <HR>
dimana X ialah suatu angka. Unit angka ialah dalam pixel. Untuk membuat garisan selebar 200
pixel, kita tulis begini :
<HR WIDTH=200>
Contoh kod penuh ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Dibawah ini ialah satu garisan melintangi laman web sepanjang 200 pixel
<HR WIDTH=200>
Sekian
</BODY>
</HTML>

hasilnya :

Perhatikan kedudukan lintangnya secara otomatik ialah di tengah laman web.
Kita boleh juga menyatakan lebar garisan dalam bentuk peratusan dari lebar laman web,
contohnya jika kita menulis begini :
<HR WIDTH=60%>
ini bermakna lebar garisan ialah 60 peratus dari lebar laman web. Apabila lebar laman web
berubah, secara otomatik, lebar garisan juga berubah supaya sentiasa 60 peratus.
Sisi garisan
Kita boleh memasukkan ciri ALIGN="LEFT" dalam tag <HR> untuk menjadikann garisan
berada dikiri laman web (apabila lebar garisan kurang dari lebar laman web). Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Garisan melintangi kiri laman web sepanjang 200 pixel
<HR WIDTH=200 ALIGN="left">
Sekian
</BODY>
</HTML>
Hasilnya :

Kita boleh menukar ciri ALIGN="LEFT" dengan ciri ALIGN="RIGHT" untuk menjadikan
garisan berada dikanan laman web.

Kedudukan garisan
Kita kurang bernasib baik kerana kedudukan garisan tidak boleh lain dari kiri, tengah atau kanan
laman web. Kita tidak akan dapat meletakkannya, katakan, satu inci dari kiri laman web.
Rupa garisan
Secara otomatik, rupa garisan adalah seperti 3D (kelihatan tenggelam) jika latarbelakang laman
web berwarna kelabu. Jika kita memasukkan ciri NOSHADE, garisan tidak akan kelihatan
tenggelam. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Garisan lintang dengan ciri NOSHADE
<HR WIDTH=200 SIZE=10 NOSHADE>
Sekian
</BODY>
</HTML>
Hasilnya :

Warna garisan
Kita boleh mewarna garisan dengan memasukkan ciri COLOR="X" dimana X ialah warna yang
berkenaan. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Garisan lintang dengan warna merah
<HR WIDTH=200 SIZE=10 NOSHADE COLOR="RED">
Sekian
</BODY>
</HTML>
Hasilnya :

Sila rujuk bab 'Senarai Warna' untuk mendapatkan warna-warna lain.
Memasukkan lebih dari satu ciri
Seperti yang kita lihat dalam contoh-contoh diatas, kita boleh memasukkan lebih dari satu ciri
dalam tag <HR>. Kedudukan ciri adalah tidak penting asalkan tiap-tiap satu ciri berada dalam
tag <HR>.
Contoh kreatif
Beikut ialah satu contoh kreatif penggunaan tag <HR>.
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<HR ALIGN="CENTER" SIZE=2 WIDTH=65 NOSHADE>
<HR ALIGN="CENTER" SIZE=3 WIDTH=75 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=4 WIDTH=85 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=5 WIDTH=95 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=6 WIDTH=105 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=7 WIDTH=115 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=8 WIDTH=125 NOSHADE COLOR="BLUE">
<H1 ALIGN="CENTER">Selamat datang!</H1>
<HR ALIGN="CENTER" SIZE=8 WIDTH=125 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=7 WIDTH=115 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=6 WIDTH=105 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=5 WIDTH=95 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=4 WIDTH=85 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=3 WIDTH=75 NOSHADE COLOR="BLUE">
<HR ALIGN="CENTER" SIZE=2 WIDTH=65 NOSHADE>
</BODY>
</HTML>
Hasilnya :

Membuat perkataan beranimasi
Perkataan beranimasi ialah perkataan yang bergerak dari kanan ke kiri laman web atau dari kiri
kekanan laman web. Pergerakan lain, seperti dari atas kebawah dan bawah keatas, tidak dapat
dilakukan.
Kita gunakan tag <MARQUEE> sebagai tanda permulaan perkataan yang hendak dianimasikan
dan tag </MARQUEE> sebagai penamat perkataan yang hendak dianimasikan.
Contohnya :


Kod HTML nya ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<MARQUEE>
Perkataan ini sebenarnya sedang beranimasi (bergerak) ke kiri laman web ini
</MARQUEE>
</BODY>
</HTML>
Biasanya perkataan beranimasi akan bergerak dari kanan ke kiri laman web. Kita boleh
menjadikannya bergerak dari kiri ke kanan dengan memasukkan ciri DIRECTION="RIGHT"
dalam tag <MARQUEE>, seperti berikut :
<MARQUEE DIRECTION="RIGHT">
Selain dari itu kita juga boleh menjadikannya menggelungsur (SLIDE) dengan menuliskan ciri
BEHAVIOR="SLIDE" dalam tag <MARQUEE>, seperti berikut:
<MARQUEE BEHAVIOR="SLIDE">
Kita juga boleh menjadikannya melantun (ALTERNATE) dari kiri kekanan dengan menuliskan
ciri BEHAVIOR="ALTERNATE" dalam tag <MARQUEE>, seperti berikut:
<MARQUEE BEHAVIOR="ALTERNATE">
Kita boleh menentukan tinggi kawasan beranimasi dengan menuliskan ciri HEIGHT=X dalam
tag <MARQUEE> (dimana X ialah suatu angka dalam unit pixel). Contohnya :
<MARQUEE HEIGHT=120>

Kita boleh menentukan lebar kawasan beranimasi dengan ciri menuliskan ciri WIDTH=X dalam
tag <MARQUEE> dimana X ialah suatu angka dalam unit pixel. Contohnya :
<MARQUEE WIDTH=200>
Contoh hasil :

Kita boleh gantikan angka dalam ciri WIDTH=X dan HEIGHT=X dengan peratus, contohnya
WIDTH=60%. Ini bermakna kawasan animasi ialah 60 peratus dari lebar laman web.
HEIGHT=50% bermakna kawasan animasi ialah 60 peratus dari tinggi laman web.
Biasanya perkataan beranimasi akan terus beranimasi tanpa berhenti iaitu berulang-ulang. Kita
boleh tetapkan berapa kali animasi berulang dengan menggunakan ciri LOOP=X dalam tag
<MARQUEE>, dimana X ialah satu angka. contohnya :
<MARQUEE LOOP=5>
Kod ini akan menjadikan perkataan beranimasi 5 kali sahaja, selepas itu akan berhenti.
Jika kita mendapati animasi berlangsung terlalu cepat atau lambat, kita boleh
mengubah kelajuan animasi dengan menuliskan ciri SCROLLAMOUNT=X dalam tag
<MARQUEE> dimana X ialah suatu angka. Contohnya :
<MARQUEE SCROLLAMOUNT=1>
Contoh ini menjadikan perkataan bergerak dengan kelajuan satu huruf setiap saat. Ini adalah
kelajuan yang paling minima (paling lambat).
Selain dari ciri SCROLLAMOUNT, kita boleh juga menggunakan ciri SCROLLDELAY=X
dalam tag <MARQUEE> (dimana X ialah suatu angka) untuk mengawal kelajuan animasi.
Contohnya :
<MARQUEE SCROLDELAY=2000>
Contoh ini menjadikan animasi berhenti selama 2000 mili-saat (miliseconds) setiap kali sebelum
bergerak lagi. 1 saat ialah 1000 mili-saat, oleh itu 2000 mili-saat ialah 2 saat.
Kita boleh menggunakan ciri BGCOLOR=X dalam tag <MARQUEE> (dimana X ialah warna
yang berkenaan) untuk menampakkan warna latarbelakang kawasan animasi. Contohnya :

<MARQUEE BGCOLOR="GREEN">
Kod ini menjadikan warna latarbelakang kawasan animasi sebagai hijau. Untuk mendapatkan
warna lain, sila rujuk bab 'Senarai Warna'.
Contoh hasil :

Sebenarnya kita boleh memasukkan lebih dari satu ciri dalam tag <MARQUEE>. Contohnya :
<MARQUEE WIDTH=200 HEIGHT=200 SCROLLAMOUNT=5 BGCOLOR="RED">
Kedudukan ciri-ciri dantara satu sama lain adalah tidak penting. Mana-mana ciri boleh dituliskan
terlebih dahulu dari ciri-ciri lain.
Kita boleh memformat perkataan yang berada diantara tag <MARQUEE> dan </MARQUEE>
sebagaimana kita pelajari dalam bab 'Mengendali huruf dan perkataan'. Contohnya untuk
mejadikan perkataan kelihatan condong kekanan, kita gunakan tag <I> dan </I> seperti berikut :
<MARQUEE WIDTH=200 HEIGHT=200 SCROLLAMOUNT=5 BGCOLOR="RED">
<I>Perkataan ini sedang beranimasi</I>
</MARQUEE>
Memasukkan gambar beranimasi
Kita boleh memasukkan fail animasi gambar atau grafik kedalam laman web. Ini bermakna, kita
mestilah telah menyediakan fail-fail animasi yang berkenaan.
Animasi gambar ialah satu siri gambar-gambar yang disusun dan ditayangkan satu persatu
dengan begitu cepat sehingga kelihatan seperti satu gerakan.
Kita boleh menggunakan program-program grafik seperti Microsoft Paint untuk membuat satu
siri gambar-gambar. Katakan kita mahu membuat animasi katak melompat, maka kita hendaklah
membina satu siri gambar-gambar gerakan katak ketika mahu melompat, baru melompat, sedang
melompat, hampir habis melompat dan mendarat. Dalam hal ini, nampaknya kita perlukan 5
grafik. Untuk menampakkan lompatan lebih kemas, kita hendaklah menjadi lebih rajin sedikit
dengan menambah lebih banyak grafik bagi peringkat-peringkat lompatan.
Setelah kita menyiapkan siri grafik-grafik, kita hendaklah menggunakan pula program pembina
animasi seperti "GIF Constructor", "Microsoft GIF Animator", "GIF Construction set" atau
Photoshop untuk menjadikan grafik-grafik itu satu animasi, iaitu menjadikan katak kelihatan
melompat. Oleh itu, kita mesti tahu menggunakan program pembina animasi untuk membina fail
animasi.
Simpanlah fail animasi itu dalam cakera keras komputer kita, seeloknya dalam folder yang sama
dengan laman web kita. Katakan fail animasi itu bernama "KatakLompat.gif".
Untuk memasukkan fail animasi itu dalam laman web, gunakan tag <IMG> dengan ciri SRC.
Contohnya :
<IMG SRC= "KatakLompat.gif">
Buku ini tidak menerangkan bagaimana menggunakan program pembina animasi.
Bagaimanapun, sedikit maklumat diberikan berikut ini.
Setelah kita membina siri-siri gambar, membina animasi gambar-gambar itu dengan program
pembina animasi biasanya adalah mudah. Contohnya, dengan menggunakan program 'GIF
Construction Set', dalam program tersebut terdapat menu 'File | Animation Wizard'. Menu ini
akan memandu kita ke beberapa langkah yang perlu dilakukan untuk membina animasi.
Biasanya ia meminta kita mengenalpasti fail-fail gambar-gambar yang hendak dianimasikan,
turutan gambar-gambar, nama fail animasi dan sebagainya. Seterusnya program itu akan
membina satu fail animasi.
Contoh-contoh animasi selain dari katak melompat ialah buku yang terbuka/tertutup
berselangseli, bom meletup berulang-ulang dan sebagainya.
Program yang sama juga biasanya boleh digunakan untuk membina perkataan beranimasi (Sila
rujuk bab 'Membina perkataan beranimasi').
Sebagaimana grafik dan gambar, saiz fail animasi dan bilangan warna dalam fail animasi akan
mempengaruhi cepat atau lambatnya laman web kita terpapar di skrin komputer kita atau
pengguna.
Ciri-ciri yang biasa kita gunakan bagi tag <IMG> dalam bab 'Memasuk dan mengendali gambar'
boleh digunakan untuk animasi gambar :
Tag <CENTER> dan </CENTER> untuk meletakkan animasi di tengah laman web.
Tag <DIV ALIGN="RIGHT"> dan </DIV> untuk meletakkan animasi di kanan laman web.
Ciri BORDER=X dalam tag <IMG> untuk menentukan saiz ketebalan garisan keliling kawasan
animasi.
Satu contoh animasi yang biasa kita lihat ialah apabila kita menyalin fail, kita akan melihat
animasi seperti berikut :

Berikut ialah contoh kod penuh yang memainkan animasi grafik :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Animasi katak lompat
<BR>
<Br>
<IMG SRC="SalinFail.gif">
</BODY>
</HTML>
Kedudukan animasi
Secara otomatik, fail animasi akan timbul di kiri laman web.
Untuk meletakkannya di tengah laman web, kita gunakan letakkan tag <IMG> yang
mengandungi gambar animasi itu diantara tag <CENTER> dan </CENTER>. Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Animasi salin fail
<BR>
<Br>
<CENTER>
<IMG SRC="SalinFail.gif">
</CENTER>
</BODY>
</HTML>
Untuk meletakkannya di kanan laman web, kita gunakan letakkan tag <IMG> yang
mengandungi gambar animasi itu diantara tag <DIV ALIGN="RIGHT"> dan </DIV>.
Contohnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Animasi salin fail
<BR>
<Br>
<DIV ALIGN="right">
<IMG SRC="SalinFail.gif">
</div>
</BODY>
</HTML>
Ulangan animasi
Kita boleh menetapkan berapa kali satu animasi berulang dengan memasukkan ciri LOOP="X"
dalam tag <IMG>. Contohnya :
<IMG LOOP=3 SRC="SalinFail.gif">
Dalam contoh ini, animasi akan berlangsung 3 kali. Jika kita menggunakan ciri LOOP="infinite"
seperti berikut :
<IMG LOOP="infinite" SRC="SalinFail.gif">
kesannya animasai akan terus diulang tanpa henti.
Memasuk dan mengendali video
Kita boleh memasukkan video ke dalam laman web.
Fail video
Sebelum kita memasukkan video, kita mestilah telah mempunyai fail video dalam komputer kita.
Kemudian kita cuma gunakan tag-tag HTML tertentu untuk membolehkan video tersebut
dipamirkan dalam laman web kita.
Kita boleh membuat fail video dengan alat perakam video digital. Kemudian, kita pindahkan
atau salin fail video berkenaan ke komputer kita. Atau kita boleh terus menggunakan komputer
kita untuk membina fail video. Buku ini bagaimanapun tidak menunjukkan bagaimana proses-
proses ini dilakukan. Keterangan lengkap mengenai proses membuat video, mengendali alat
perakam video, memindahkan fail video ke komputer, menyunting video dan sebagainya
memerlukan satu buku khusus. Mungkin buku yang sedemikian sudah ada di pasaran.
Kita juga boleh mendapatkan fail-fail video percuma dari internet. Contohnya fail-fail video oleh
NASA di Amerika Syarikat kebanyakannya boleh di gunakan secara percuma. Ada banyak juga
kumpulan-kumpulan jurufoto yang membenarkan video mereka digunakan oleh sesiapa jua.
Bagaimanapun jika video mereka tidak sesuai dengan laman web kita, kita bolehlah membuat
fail video sendiri, contohnya video hari perkahwinan dan sebagainya.
Memasukkan fail video
Untuk memasukkan video ke dalam laman web, kita gunakan tag <A> dengan ciri HREF="X"
dimana X ialah alamat dimana fail video berada dan nama fail video itu. Contohnya :
<A HREF="MainSki.avi">Klik untuk lihat saya main ski</A>
'MainSki.avi' adalah nama fail video berkenaan. 'Klik untuk lihat saya main ski' adalah perkataan
yang dilihat oleh pengguna laman web kita. Video akan dimainkan sebaik saja pengguna klik
pada perkataan itu.
Contoh kod ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Mula 1
</TITLE>
</HEAD>
<BODY>
Video main ski
<BR>
<A HREF=MainSki.avi>Klik untuk lihat saya main ski</A>
<BR>
Sekian
</BODY>
</HTML>
Laman Web akan kelihatan begini :

Jika kita atau pengguna klik pada perkataan 'Klik untuk lihat saya main ski', video akan
dimainkan dalam laman web. Contohnya :

Biasanya Internet Explorer secara otomatik akan menggunakan program 'Media Player' untuk
memainkan video. Maknanya, bila kita klik pada perkataan 'Klik untuk lihat saya main ski',
secara otomatik program 'Media Player' akan diaktifkan dan seterusnya memainkan video.
Program ini mempunyai butang kawalan untuk memberhentikan video, melompat ke satu
kedudukan dalam video, menamatkan video dan sebagainya. Jika kita membiarkan video
dimainkan hingga tamat, program ini akan hilang dengan sendirinya. Biasanya program ini telah
sedia ada jika kita menggunakan Windows 95/98. Bagaimanapun, jika program ini tidak ada,
video tidak akan dapat dimainkan oleh Internet Explorer. Ada kemungkinan, program pemain
video lain (jika ada dalam komputer kita) akan digunakan.
Kita boleh juga merujuk fail video dalam laman web dengan menggunakan tag <IMG> berserta
ciri DYNSRC="X" dimana X ialah alamat fail video dana nama fail video itu. Ini adalah cara
lain memainkan video, selain dari menggunakan tag <A>. Contohnya :
<IMG DYNSRC=MainSki.avi>
DYNSRC adalah ringkasan bagi DYNAMIC SOURCE.
Kawasan video
Jika kita menggunakan tag <IMG>, kita boleh juga memasukkan ciri WIDTH=X untuk
menentukan lebar kawasan video dan ciri HEIGHT=X untuk menentukan tinggi kawasan video.
X ialah suatu angka dalam unit pixel. Contoh kod :
<IMG DYNSRC=MainSki.avi WIDTH=160 HEIGHT=160>
Kawalan video
Ciri CONTROLS dalam tag <IMG> akan menampakkan satu set butang kawalan dibawah video
yang dimainkan. Contoh kod :
<IMG DYNSRC=MainSki.avi WIDTH=160 HEIGHT=120 CONTROLS>
Ulangan video
Ciri LOOP="INFINITE" dalam tag <IMG> akan menjadikan video akan dimainkan berulang-
ulang tanpa berhenti. Contoh kod :
<IMG DYNSRC=MainSki.avi WIDTH=160 HEIGHT=120 CONTROLS LOOP=INFINITE>
Ciri LOOP=3 dalam tag <IMG> akan menjadikan video berulang 3 kali. Kita boleh tukar angka
3 itu kepada angka lain.
Kedudukan video
Ciri ALIGN="LEFT" dalam tag <IMG> akan menjadikan video berada dikiri laman web. Kita
boleh gantikan 'LEFT' dengan 'RIGHT' (kanan) atau 'CENTER' (tengah). Contoh kod :
<IMG ALIGN="LEFT" DYNSRC=MainSki.avi WIDTH=160 HEIGHT=120 CONTROLS
LOOP=10>
Sempadan video
Ciri BORDER=0 dalam tag <IMG> akan menjadikan video tidak mempunyai garisan sempadan.
Kita boleh gantikan angka 0 dengan angka lain untuk menunjukkan garisan sempadan dengan
ketebalan garisan yang tertentu. Contoh kod :
<IMG BORDER=3 ALIGN=LEFT DYNSRC=MainSki.avi WIDTH=60 HEIGHT=60
CONTROLS LOOP=2>
Kita boleh juga menggunakan tag <EMBED> untuk memasukkan video berserta ciri SRC=X
dimana X ialah alamat fail video dan nama fail video itu. Contohnya :
<EMBED SRC=MainSki.avi>
Ciri-ciri lain yang boleh dimasukkan dalam tag <EMBED> ialah ALIGN, WIDTH, dan
HEIGHT. Contoh penggunaannya ialah seperti berikut :
<EMBED SRC=MainSki.avi ALIGN=LEFT WIDTH=180 HEIGHT=160>
'ALIGN' bermakna sisihan video dalam laman web. 'LEFT' (kiri) boleh diganti dengan 'RIGHT'
(kanan) atau 'CENTER' (tengah). WIDTH bermakna lebar layar video. Kita boleh tukar 180
kepada angka lain. HEIGHT bermakna tinggi layar video. Kita boleh gantikan 160 dengan angka
lain.
Ciri AUTOPLAY=TRUE dalam tag <EMBED> menyebabkan video dimainkan secara otomatik
sebaik saja laman web muncul. 'TRUE' boleh diganti dengan 'FALSE'. Jika kita ganti dengan
FALSE, video akan dimainkan hanya setelah kita klik pada pintasan. Contoh penggunaannya :
<EMBED SRC=MainSki.avi ALIGN=LEFT WIDTH=180 HEIGHT=160
AUTOPLAY=TRUE>
Ciri LOOP=TRUE dalam tag <EMBED> menyebabkan video dimainkan berulang-ulang secara
otomatik. 'TRUE' boleh diganti dengan FALSE. Jika kita menggunakan LOOP=FALSE, video
akan dimainkan sekali sahaja. Contoh penggunaannya :
<EMBED SRC=MainSki.avi ALIGN=LEFT WIDTH=180 HEIGHT=160
AUTOPLAY=TRUE LOOP=FALSE>

Ciri ONCURSOR=PLAY dalam tag <EMBED> menyebabkan video dimainkan sebaik saja kese
tetikus berada pada layar video. Contoh penggunaannya :
<EMBED SRC=MainSki.avi ALIGN=CENTER WIDTH=180 HEIGHT=160
ONCURSOR=PLAY LOOP=FALSE>
Tidak semua tag disokong oleh semua pelayar web. Kita boleh gunakan tag <NOEMBED>
untuk memasukkan tag yang disokong oleh pelayar web lain. Ini bererti kita harus tahu pelayar
web yang mana yang menyokong atau tidak menyokong satu-satu tag. Contoh penggunaannya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
<EMBED SRC=AyamGaduh.avi WIDTH=160 HEIGHT=120 ALIGN=LEFT
AUTOPLAY=FALSE LOOP=FALSE ONCURSOR=PLAY>
<NOEMBED>
<A HREF=AyamGaduh.avi>
<IMG SRC=AyamGaduh.jpg DYNSRC=AyamGaduh.avi LOOP=INFINITE
WIDTH=160 HEIGHT=120 ALIGN=left BORDER=1>
</A>
</NOEMBED>
</BODY>
</HTML>
Dalam contoh ini, tag <EMBED> disokong oleh pelayar Netscape Nevigator manakala tag-tag
dalam <NOEMBED>...</NOEMBED> disokong oleh Microsoft Internet Explorer.
Biasanya video dimainkan bersama dengan bunyian. Untuk mengendali bunyian, sila rujuk bab
'Mengendali bunyian'.
Memasuk dan mengendali bunyian dalam
laman web
Kita boleh memasukkan bunyi, suara atau lagu dalam laman web.
Sebelum kita memasukkan bunyian, kita mestilah telah mempunyai fail bunyian dalam komputer
kita. Kemudian kita cuma tuliskan tag-tag HTML tertentu untuk memasukkan bunyian tersebut
dalam laman web.
Kita boleh membuat fail bunyian dengan alat perakam bunyian digital. Kemudian pindahkan
atau salin fail bunyian berkenaan ke komputer kita. Atau kita boleh terus menggunakan
komputer kita untuk membina bunyian. Contoh perakam bunyian ialah Microsoft Sound
Recorder. Kita tentunya perlukan juga mikrofon jika kita mahu membuat fail bunyian kita
sendiri. Keterangan lengkap mengenai proses membuat bunyi, mengendali alat perakam bunyi
dan memindahkan fail bunyi ke komputer, menyunting bunyi dan sebagainya memerlukan satu
buku khusus, jadi tidak ditunjukkan dalam buku ini. Mungkin buku yang sedemikian sudah ada
di pasaran.
Kita juga boleh mendapatkan fail-fail bunyian percuma dari internet atau dari cakera-cakera
padat yang dijual dikedai-kedai komputer.
Biasanya fail bunyian mempunyai sambungan '.wav', '.mid', '.au' dan sebagainya. Contohnya
'BunyiItik.wav', 'LaguKu.mid', 'Ohlala.au'.
Kita gunakan tag <A> dengan ciri HREF=X untuk memasukkan bunyian dalam laman web
dimana X ialah nama fail bunyi itu. Contohnya :
<A HREF="BunyiItik.wav">Bunyi itik.</A>
'BunyiItik.wav' adalah nama fail bunyian berkenaan. 'Bunyi itik' adalah perkataan yang dilihat
oleh pengguna laman web kita. Bunyian akan dimainkan sebaik saja pengguna klik pada
perkataan itu. Ini adalah serupa dengan pintasan yang kita pelajari dalam bab sebelum ini.
Sebenarnya, bila pengguna klik pada pintasan yang destinasinya ialah satu fail bunyian, pelayar
web yang digunakan oleh pengguna (Contohnya Internet Explorer) akan memanggil satu
program lain, iaitu program yang boleh memainkan bunyian berkenaan. Program itu mestilah
telah ada dalam komputer kita. Contoh program ialah Microsoft Media Player atau Microsoft
Sound Recorder. Biasanya program ini telah ada bila kita menggunakan Windows 95/98. Sebab
itu, apabila kita klik pada perkataan yang berkenaan untuk memainkan suara, kita akan dapat
lihat program itu menjadi aktif dan dengan sendirinya memainkan bunyi berkenaan.
Berikut ialah contoh kod :
<HTML>
<HEAD>
<TITLE>
Mula 1
</TITLE>
</HEAD>
<BODY BGCOLOR="white">
Bunyi itik
<BR>
<A HREF="BunyiItik.wav">Klik untuk dengar</A>
<BR>
Sekian
</BODY>
</HTML>
Hasilnya :

Apabila kita klik pada perkataan 'Klik untuk dengar', program Sound Recorder (atau apa-apa
program yang telah kita tetapkan sebagai pemain bunyi) akan aktif secara otomatik dan akan
memainkan bunyi itu :

Program ini mempunyai butang-butang kawalan untuk memberhentikan bunyi, melompat ke satu
kedudukan dalam fail bunyi, menamatkan bunyi dan sebagainya. Jika kita membiarkan fail bunyi
dimainkan hingga tamat, program ini akan hilang dengan sendirinya.
Bagaimanapun, jika program ini tidak ada, bunyian tidak akan dapat dimainkan oleh pelayar
web.
Untuk memainkan bunyi, komputer kita atau pengguna perlu mempunyai pembesar suara
(speaker) dan kad bunyi (sound card).
Tag lain
Kita boleh juga memasukkan fail bunyian dalam laman web dengan menggunakan tag <IMG>
berserta ciri DYNSRC=X dimana X ialah nama fail bunyi. Ini adalah cara lain memainkan
bunyian, selain dari menggunakan tag <A>. Contohnya :
<IMG DYNSRC="BunyiItik.wav">
DYNSRC adalah ringkasan bagi DYNAMIC SOURCE.
Ciri LOOP=INFINITE dalam tag <IMG> akan menjadikan bunyian dimainkan berulang-ulang.
<IMG DYNSRC="BunyiItik.wav" LOOP=INFINITE>
Ciri LOOP=3 dalam tag <IMG> akan menjadikan bunyian berulang 3 kali. Kita boleh tukar
angka 3 itu kepada angka lain.
Kita boleh juga menggunakan tag <EMBED> dengan ciri SRC=X (dimana X ialah nama fail
bunyi) untuk memasukkan bunyian. Contohnya :
<EMBED SRC="BunyiItik.wav">
Ciri AUTOPLAY=TRUE dalam tag <EMBED> menyebabkan bunyian dimainkan secara
otomatik sebaik saja laman web muncul. TRUE boleh diganti dengan FALSE. FALSE
menyebabkan fail bunyi dimainkan hanya setelah kita klik pada pintasannya. Contoh
penggunaannya :
<EMBED SRC="BunyiItik.wav" AUTOPLAY=FALSE>
Ciri LOOP=TRUE dalam tag <EMBED> menyebabkan bunyian dimainkan berulang-ulang
secara otomatik. TRUE boleh diganti dengan FALSE. FALSE menyebabkan fail bunyi
dimainkan satu kali sahaja. Contoh penggunaannya :
<EMBED SRC="BunyiItik.wav" AUTOPLAY=FALSE LOOP=FALSE>

Ciri ONCURSOR=PLAY dalam tag <EMBED> menyebabkan bunyian dimainkan sebaik saja
kese tetikus berada pada layar bunyian. Contoh penggunaannya :
<EMBED SRC="BunyiItik.wav" ONCURSOR=PLAY>
Tidak semua tag disokong oleh semua pelayar web. Kita boleh gunakan tag <NOEMBED>
untuk memasukkan tag yang disokong oleh pelayar web lain. Ini bererti kita harus tahu pelayar
web yang mana yang menyokong atau tidak menyokong satu-satu tag. Contoh penggunaannya :
<HTML>
<HEAD>
<TITLE>Muka 1</TITLE>
<BODY>
<EMBED SRC="AyamGaduh.wav" AUTOPLAY=FALSE LOOP=FALSE>
<NOEMBED>
<A HREF="AyamGaduh.wav">
<IMG SRC="AyamGaduh.wav" DYNSRC="AyamGaduh.wav">
</A>
</NOEMBED>
</BODY>
</HTML>
Dalam contoh ini, tag <EMBED> disokong oleh pelayar Netscape Nevigator manakala tag-tag
dalam <NOEMBED>...</NOEMBED> disokong oleh Microsoft Internet Explorer.
Biasanya bunyian dimainkan bersama dengan video (biasanya fail video memang mengandungi
fail suara sekaligus). Untuk mengendali video, sila rujuk bab 'Memasuk dan mengendali video'.
Bunyi latarbelakang
Tag <BGSOUND> disokong oleh Internet Explorer sahaja untuk
memainkan bunyian latarbelakang iaitu semasa laman web dipaparkan tanpa perlu pengguna
melakukan apa-apa tindakan (seperti klik pada mana-mana butang).
Ciri-ciri yang boleh dimasukkan dalam tag <BGSOUND> ialah SRC=X dan LOOP=Y, (SRC
adalah ringkasan bagi SOURCE bermaksud sumber, X ialah alamat fail bunyi yang hendak
dimainkan, LOOP bermaksud ulang, Y ialah bilangan berapa kali fail akan dimainkan. LOOP=2
bermakna fail akan dimainkan 2 kali. LOOP=INFINITE bermakna fail akan dimainkan berulang-
ulang tanpa henti hingga laman web ditutup). Contoh penggunaan tag <BGSOUND> dan ciri-
cirinya ialah seperti berikut :
<BGSOUND SRC="AyamGaduh.wav" LOOP=INFINITE>
Memasuk dan mengendali wayang interaktif
(multimedia)
Kita boleh memasukkan multimedia dalam laman web dengan memasukkan fail wayang
(movie) yang dibina menggunakan program 'Shockwave' (ringkasan bagi 'Shockwave for
Director', program yang dibina oleh syarikat Macromedia). Fail ini bukan statik seperti yang kita
biasa lihat melalui TV dan panggung wayang, tetapi interaktif, iaitu ia boleh bertindakbalas
kepada tindakan pengguna laman web.
Sebelum kita memasukkan fail itu, kita mesti telah membuat fail berkenaan. Oleh itu, kita mesti
tahu menggunakan program Shockwave (Tidak ditunjukkan dalam buku ini. Ia memerlukan satu
buku berasingan).
Untuk memasukkan fail wayang Shockwave kedalam laman web, kita gunakan tag <OBJECT>
(Jika pelayar web ialah Internet Explorer) atau <EMBED> (Jika pelayar web kita ialah Netscape)
atau
Fail Shockwave biasanya mempunyai nama tambahan .dcr, contohnya 'WayangMu.dcr'.
Tag-tag lain dan ciri-ciri yang digunakan untuk mengendali fail Shockwave adalah hampir
serupa dengan tag-tag yang digunakan untuk mengendali animasi dan video.
Sebenarnya, kita perlu ada satu fail lain dalam komputer kita sebelum fail Shockwave dapat
dimainkan. Fail lain itu dipanggil 'plug-in' atau 'ActiveX control'. Kita boleh dapatkan fail lain
itu dari laman web Macromedia atau Microsoft.
Berikut ialah contoh penggunaan tag <EMBED> bagi memasukkan fail Shockwave:
<EMBED SRC="WayangMu.dcr" WIDTH=300 HEIGHT=400 VSPACE=10 HSPACE=10
ALIGN=center BGCOLOR=silver PALETTE=background>
Ciri SRC ialah untuk diisi dengan nama fail dan foldernya.
Ciri WIDTH dan HEIGHT ialah untuk diisi dengan lebar (dalam unit pixel) dan tinggi (dalam
unit pixel) kawasan wayang dalam laman web. Jika kawasan yang kita tetapkan lebih kecil dari
saiz wayang sebenar, ada bahagian wayang yang tidak akan kelihatan.
Ciri VSPACE dan HSPACE digunakan untuk menetapkan ruang kosong (margin) (dalam ukuran
pixel) atas/bawah dan kiri/kanan bagi kawasan wayang.
Ciri ALIGN digunakan untuk meletakkan kedudukan wayang dalam laman web samada left
(kiri), center (tengah) atau right (kanan).
Ciri BGCOLOR digunakan untuk menetapkan warna latarbelakang kawasan wayang. Jika
kawasan wayang sama saiz dengan saiz fail, tentu warna latarbelakang tidak akan kelihatan. Kita
boleh gunakan salah satu dari 16 warna (red, green, blue, silver dan sebagainya) atau warna dari
kombinasi angka hex (Sila rujuk bab 'Senarai warna').
Nilai ciri PALETTE ialah samada 'background' atau 'foreground'. Nilai 'background' akan
menyebabkan kawasan wayang menggunakan warna-warna yang terdapat dalam pelayar web
kita. Nilai 'foreground' akan menyebabkan kawasan wayang menggunakan warna-warna yang
ada dalam fail wayang berkenaan. Kadang-kadang fail wayang mengandungi bilangan warna
yang lebih atau kurang dari bilangan warna yang boleh dipamirkan oleh pelayar web. Biasanya,
'background' adalah selamat digunakan.
Tag <NOEMBED> dan </NOEMBED> kita gunakan untuk mengatasi masalah pelayar web
tidak menyokong tag <EMBED> (Internet Explorer tidak menyokong tag ini).
Berikut ialah contoh penggunaan tag <NOEMBED> dan </NOEMBED> :
<EMBED SRC="wayangshock/mula/mari.dcr" WIDTH=300 HEIGHT=235 VSPACE=5
HSPACE=5 ALIGN=left BGCOLOR=#FFFFFF PALETTE=background>
<NOEMBED>
<IMG SRC="grafik/gambarmu.gif"><BR>
Maaf, pelayar web anda tidak menyokong tag EMBED. Sila gunakan
Pelayar web lain.
</NOEMBED>
Seperti yang dinyatakan dipermulaan bab ini, kita gunakan tag <OBJECT> dan </OBJECT>
serta <NOOBJECT> dan </NOOBJECT> jika kita mahu menggunakan pelayar web Internet
Explorer.
Contoh kod yang menggunakan tag-tag ini ialah seperti berikut :
<OBJECT CLASSID="clsid:166B1BCB-5f9c-21CF-1075-444553540000"
CODEBASE="http://active.macromedia.com/director/cabs/sw.cab#version=5,0,1,6 1"
WIDTH=300 HEIGHT=235 NAME="Shockwave" ID="wayang3">
<PARAM NAME="SRC" VALUE="wayangshock/pengenalan/mari.dcr">
<PARAM NAME="PALETTE" VALUE="background">
<PARAM NAME="BGCOLOR" VALUE="white">
</OBJECT>
<NOOBJECT>
<IMG SRC="grafik/gambarmu.gif"><BR>
Maaf, pelayar web anda tidak menyokong tag EMBED. Sila gunakan
Pelayar web lain.
</NOOBJECT>
Ciri CLASSID mengandungi rujukan bagi satu fail 'ActiveX control' iaitu satu fail yang mesti
ada dalam komputer kita (atau pengguna) jika mahu memainkan wayang Shockwave. Nama
penuh fail ialah 'Shockwave for Director Control'. Kita boleh dapatkan fail ini dari laman web
Microsoft atau Macromedia.
Ciri CODEBASE hendaklah mengandungi alamat dimana versi terbaru fail ActiveX boleh
diperolehi. Jika komputer kita tidak mempunyai fail ini, secara otomatik, kita akan menerima
kotak dialog menggesa kita mencapai laman web macromedia untuk mengambil fail itu.
Ciri WIDTH dan HEIGHT hendaklah mengandungi tinggi dan lebar kawasan wayang (dalam
unit pixel). Pastikan luas lebar dan tinggi kawasan adalah sama dengan lebar dan tinggi fail
Shockwave, jika tidak, ada bahagian yang tidak dapat ditayangkan.
Bagi ciri NAME, sentiasa isi dengan "Shockwave".
Ciri ID adalah bagi angka atau nama pengenalan kepada wayang dalam laman web supaya ia
boleh dipintas dari mana-mana pintasan.
Perhatikan pasangan PARAM dan VALUE. Tiap pasangan hendaklah mengandungi nama dan
nilai bagi nama itu. Bagi pasangan <PARAM NAME="SRC", 'value' hendaklah diisi dengan
nama fail Shockwave yang hendak dimainkan. Bagi pasangan <PARAM NAME="PALLETTE"
VALUE="background">,'background boleh diganti dengan 'foreground'. Dalam pasangan
<PARAM NAME="BGCOLOR" VALUE="white">, ia adalah warna bagi latarbelakang
kawasan wayang.
Membuat dan mengendali bingkai (Frame)
Bingkai ialah satu bahagian empat segi yang kita boleh bina dalam laman web untuk boleh
berfungsi untuk menampung satu laman web lain, selain dari perkataan dan grafik. Kita boleh
buat lebih dari satu bingkai dalam satu laman web.
Tag-tag berkaitan dengan bingkai ialah seperti berikut :
<FRAMESET>
Tag ini menandakan permulaan kawasan bingkai. Ia menggantikan tag <BODY>. Jika kita
gunakan <FRAMESET>, jangan gunakan tag <BODY> dalam laman web.
</FRAMESET>
Menandakan akhir kawasan bingkai. Ia menggantikan tag </BODY>. Jika kita gunakan
</FREMESET>, jangan gunakan tag </BODY> dalam laman web.
Selepas tag <FRAMESET> kita masukkan tag <FRAME>. Tag <FRAME> inilah yang
sebenarnya membina bingkai. Tiada tag penamat bagi tag <FRAME>, iaitu tiada tag
</FRAME>. Jadi, kita gunakan tag <FRAMESET> bersama dengan tag <FRAME>, bukan
bersendirian. Tag <FRAME> diletakkan diantara tag <FRAMESET> dan </FRAMESET>.
Sebagai contoh, untuk persediaan membina 3 bingkai yang kedudukannya beratur dari kiri laman
web ke kanan laman web dengan satu bingkai lebarnya 20 peratus dari lebar laman web, bingkai
kedua lebarnya 60 peratus dan bingkai ketiga 20 peratus, masukkan ciri COLS=20%,60%,20%
dalam tag <FRAMESET>, iaitu dengan menulis begini :
<FRAMESET COLS=20%,60%,20%>
Kod diatas adalah persediaan sahaja bagi membina 3 bingkai. 3 nilai dalam ciri COLS iaitu 20%,
60% dan 20% menandakan kita mahu membina 3 bingkai. Untuk membuat bingkai yang
sebenarnya, kita gunakan tag <FRAME>. Satu tag <FRAME> akan membina satu bingkai, jadi
untuk membina 3 bingkai kita kena tuliskan 3 tag <FRAME>. Jadi kod penuhnya ialah :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<FRAMESET COLS=20%,60%,20%>
<FRAME SRC="Muka2.htm">
<FRAME SRC="Muka3.htm">
<FRAME SRC="Muka4.htm">
</FRAMESET>
</HTML>
Hasilnya kelihatan begini:

Perhatikan perkara-perkara berikut :
1. Kita tidak menggunakan tag <BODY> dan </BODY> apabila kita menggunakan tag
<FRAMESET> dan </FRAMESET>.
2. Dalam tag <FRAMESET> kita menandakan bahawa kita mahu membina 3 bingkai (bila kita
menulis 3 nilai dalam ciri COLS iaitu 20%,60%,20%), sebab itulah kita ada 3 tag <FRAME>.
Bilangan tag <FRAME> mestilah sama dengan bilangan yang dinyatakan dalam ciri COLS
dalam tag <FRAMESET>. Jika tidak, hasilnya tidak seperti yang kita jangkakan.
3. Dalam tag <FRAME> ada ciri SRC=X dimana X ialah nama satu laman web lain. Laman
Web lain itu akan ditayangkan dalam bingkai yang berkenaan. Ini bererti kita mestilah
menyiapkan laman web-laman web lain itu terlebih dahulu.
<="" p="">
kosong.
4. Tag <FRAME> tidak mempunyai tanda penamat. Tiada tag </FRAME>.
Jika kita mahu membina 3 baris bingkai (kedudukannya dari atas ke bawah) dimana tinggi tiap-
tiap baris ialah masing-masingnya 30 peratus, 30 peratus dan 40 peratus, kita gunakan ciri
ROWS, begini :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<FRAMESET ROWS=30%,30%,40%>
<FRAME SRC="Muka2.htm">
<FRAME SRC="Muka3.htm">
<FRAME SRC="Muka4.htm">
</FRAMESET>
</HTML>
Hasilnya :

Kita boleh menuliskan ciri COLS dan ROWS dalam unit pixel, bukan dalam bentuk peratusan,
seperti berikut :
<FRAMESET COLS=200,400,300>
<FRAMESET ROWS=100,50,150>
Kita boleh menyediakan 2 set bingkai yang masing-masingnya mempunyai 3 bingkai dan 2
bingkai, dengan menuliskan 2 tag <FRAMESET> dan memasukkan bilangan tag <FRAME>
yang bersesuaian dalam tiap-tiap tag <FRAMESET>. Lihat kod berikut :
<HTML>
<HEAD>
<TITLE>Muka 1</TITLE>
</HEAD>
<FRAMESET ROWS=70%,30%>
<FRAMESET COLS=20%,60%,20%>
<FRAME SRC="Muka2.htm">
<FRAME SRC="Muka3.htm">
<FRAME SRC="Muka4.htm">
</FRAMESET>
<FRAMESET COLS=50%,50%>
<FRAME SRC="Muka5.htm">
<FRAME SRC="Muka2.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Hasilnya :

Kedudukan ciri ROWS dan COLS mempunyai peranan begini : Jika kita menuliskan ciri ROWS
dahulu diikuti dengan ciri COLS, baris baris bingkai akan dibina dahulu kemudian tiap-tiap
bingkai akan dibahagi kepada ruang-ruang(column). Jika kita menuliskan ciri COLS dahulu
diikuti dengan ciri ROWS, ruang-ruang (columns) bingkai akan dibina dahulu kemudian tiap-
tiap ruang akan dibahagi kepada baris-baris (row).
Perhatikan contoh kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<FRAMESET ROWS="34%,33%,33%">
<FRAMESET COLS="50%,50%">
<FRAME SRC=Muka2.htm>
<FRAME SRC=Muka3.htm>
</FRAMESET>
<FRAME SRC=Muka4.htm>
<FRAME SRC=Muka5.htm>
</FRAMESET>
</HTML>
Hasilnya :

Lihat pula kod berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<FRAMESET COLS="50%,50%">
<FRAMESET ROWS="34%,33%,33%">
<FRAME SRC="Muka2.htm">
<FRAME SRC="Muka3.htm">
<FRAME SRC="Muka4.htm">
</FRAMESET>
<FRAME SRC="Muka5.htm">
</FRAMESET>
</HTML>
Hasilnya :

Memberi nama bingkai
Kita boleh memberi nama kepada satu bingkai dengan memasukkan ciri NAME=X dalam tag
<FRAME> dimana X ialah nama yang kita mahu, contohnya :
<FRAME SRC="Muka2.htm" NAME="FremAm">
Ciri NAME="FremAm" dalam tag <FRAME> diatas memberikan nama "FremAm" kepada
bingkai yang bersumberkan laman web "Muka2.htm".
Bingkai sebagai sasaran pintasan
Kebaikan memberi nama kepada FRAME ialah untuk memudahkan kita merujuk bingkai itu
sebagai destinasi pintasan, samada dari lain-lain bahagian dalam laman web yang sama atau dari
lain-lain laman web dengan menggunakan ciri TARGET=X dalam tag <A> dimana X ialah
nama bingkai.
Katakan kita mempunyai satu pintasan seperti berikut dalam satu laman web :
<A HREF="LihatNi.htm" TARGET="FremAm">Klik dan lihat.</A>

Tag ini, seperti yang kita lihat mempunyai ciri TARGET="FremAm". Jika pengguna laman web
klik pada perkataan 'Klik dan lihat', laman web 'LihatNi.htm' akan dipaparkan dalam bingkai
'fremAm' yang berada dalam laman web (biasanya dalam laman web yang sama dengan tag <A>
tadi).
Margin kiri bingkai
Ciri MARGINWIDTH dalam tag <FRAME> menentukan margin kiri bingkai (dalam unit
pixel). Contohnya :
<FRAME MARGINWIDTH=10>
Ini menjadikan jarak margin kiri (jarak antara isi bingkai dengan sempadan kiri bingkai)
sebanyak 10 pixel.
Contoh kesan bila MARGINWIDTH=40 pada tiap-tiap <FRAME> :

Kod penuhnya :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<FRAMESET ROWS=70%,30%>
<FRAMESET COLS=20%,60%,20%>
<FRAME MARGINWIDTH=40 SRC="Muka2.htm">
<FRAME MARGINWIDTH=40 SRC="Muka3.htm">
<FRAME MARGINWIDTH=40 SRC="Muka4.htm">
</FRAMESET>
</HTML>
Margin sebelah atas bingkai
Ciri MARGINHEIGHT dalam tag <FRAME> menentukan margin atas bagi bingkai (dalam
ukuran pixel). Contohnya :
<FRAME MARGINHEIGHT=30>
menjadikan margin atas sebanyak 30 pixel (jarak antara garis sempadan sebelah atas bingkai
dengan isi bingkai).
Palang skrol pada bingkai
Ciri SCROLLING="yes" dalam tag <FRAME> menimbulkan palang skrol pada bingkai.
Contohnya:
<FRAMESET ROWS=70%,30%>
<FRAMESET COLS=20%,60%,20%>
<FRAME SCROLLING=yes SRC="Muka2.htm">
<FRAME SCROLLING=yes SRC="Muka3.htm">
<FRAME SCROLLING=yes SRC="Muka4.htm">
</FRAMESET>
Contoh kesan :

Ciri ini berguna jika saiz laman web yang dipaparkan dalam bingkai lebih besar dari saiz bingkai
itu sendiri.
Ciri SCROLLING="no" dalam tag <FRAME> menghilangkan palang skrol pada bingkai.
Contoh penggunaannya :
<FRAME SCROLLING="no" SRC="Muka2.htm">
Ciri SCROLLING="auto" dalam tag <FRAME> menyebabkan palang skrol timbul pada bingkai
secara otomatik apabila saiz sebenar laman web yang dipaparkan dalam bingkai lebih besar dari
bingkai itu sendiri. Contoh penggunaannya :
<FRAME SCROLLING="auto" SRC="Muka2.htm">
Pengguna mengubah saiz bingkai
Pengguna boleh mengubah saiz bingkai (lebar dan tinggi) dengan menggunakan tetikus. Ciri
NORESIZE dalam tag <FRAME> boleh digunakan untuk menghalang pengguna dari mengubah
saiz bingkai. Contoh penggunaannya :
<FRAME SCROLLING="yes" NORESIZE SRC="Muka2.htm">
Garis sempadan bingkai
Ciri BORDER=X dalam tag <FRAME> digunakan untuk menetapkan saiz lebar garisan
sempadan bingkai dimana X ialah saiz yang kita mahu. Contohnya :
<FRAME BORDER=4 SCROLLING="no" NORESIZE SRC="Muka2.htm">
menjadikan tebal sempadan bingkai sebanyak 4 pixel.
Ciri FRAMEBORDER="no" dalam tag <FRAMESET> menjadikan sempadan bingkai tidak
kelihatan. Contoh penggunannya :
<FRAMESET FRAMEBORDER="no">
Contoh kesan :

Jarak antara bingkai
Ciri FRAMESPACING=X dalam tag <FRAMESET> digunakan untuk mengubah jarak antara
bingkai dimana X ialah unit jarak yang kita mahu. Contohnya :
<FRAMESET FRAMESPACING=10>
menjadikan jarak antara satu FRAME dengan yang lain dalam FRAMESET ialah 10 pixel.
Contoh kesan :

Pelayar web tidak menyokong bingkai
Tag-tag <NOFRAME> dan </NOFRAME> digunakan untuk mengarahkan pelayar web supaya
tidak memperdulikan atau memaparkan apa-apa sahaja yang kita tulis didalam laman web. Ini
berguna jika pengguna laman web kita menggunakan pelayar web yang tidak menyokong
bingkai. Berikut ialah contoh kod yang menggunakan tag <NOFRAME>:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<FRAMESET COLS=25%,75%>
<FRAMESET ROWS="20%,80%">
<FRAME SRC=Muka2.html>
<FRAME SRC=Muka3.html>
</FRAMESET>
<FRAME SRC=Muka4.html>
</FRAMESET>
<NOFRAME>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
. . .
</BODY>
</HTML>
Perhatikan tag <NOFRAME>. Semua kod bahagian sebelah atas tag ini akan diproses oleh
pelayar web yang menyokong tag <FRAMESET> sementara semua kod dibahagian sebelah
bawah tag ini akan diproses oleh pelayar web yang tidak menyokong <FRAMESET> (sebab
itulah tag <BODY> dituliskan semula dibahagian bawah.
Saiz relatif
Jika kita menulis begini :
<FRAMESET ROWS=3*,*,100,150>
Ini bermakna kita mahu membina 4 baris bingkai dengan 2 bingkai bersaiz tetap sebanyak 100
pixel dan 150 pixel dan 2 bingkai bersaiz relatif. Tanda * menandakan bahawa baki kawasan
bingkai hendaklah diberi kepada bingkai berkenaan tetapi mesti ada satu bingkai yang saiznya
sentiasa 3 kali ganda dari saiz bingkai yang ditetapkan saiz relatifnya.
Destinasi Asas
Jika kita menuliskan tag <BASE> berserta ciri TARGET=X diantara tag </TITLE> dan
</HEAD> dimana X ialah satu nama bingkai dalam laman web lain, seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 5
</TITLE>
<BASE TARGET="IsiKandungan">
</HEAD>
<BODY>
</BODY>
</HTML>
Hasilnya, semua pintasan dalam laman web ini akan terarah ke bingkai bernama "IsiKandungan"
yang berada dalam laman web lain itu.
Contoh menyusun bingkai

Kodnya :
<html>
<head>
<title>
Muka 1
</title>
</head>
<frameset cols="23%,77%">
<frame src="muka2.htm" name="left" marginwidth="1"
marginheight="1">
<frameset rows="18%,82%">
<frame src="muka3.htm" name="kananatas" marginwidth="1"
marginheight="1">
<frame src="muka4.htm" name="kananbawah" marginwidth="1"
marginheight="1">
</frameset>
<noframes>
<body>
<p>Laman Web ini menggunakan bingkai, tetapi pelayar yang anda
gunakan tidak menyokong bingkai.</p>
</body>
</noframes>
</frameset>
</html>
Contoh 1 kegunaan bingkai
Laman Web berbingkai boleh digunakan untuk membina nota kaki (footnotes) dalam laman web
itu. Kita memerlukan 2 bingkai : satu bingkai menjadi dokumen utama dan bingkai kedua
menjadi nota kaki. Bila kita klik pada perkataan tertentu dalam bingkai utama, satu nota akan
dipaparkan di bingkai kedua.
Kod di laman web ini adalah seperti berikut :
<html>
<head>
<title>
Muka 1
</title>
</head>
<frameset rows="78%,22%">
<frame src="Utama.htm" name="utama" marginwidth="1" marginheight="1">
<frame src="Nota.htm" name="nota" marginwidth="1" marginheight="1">
</frameset>
</html>
Jadi, kita perlu ada 2 lagi laman web iaitu 'Utama.htm' dan 'Nota.htm'. 'Utama.htm' akan
dipaparkan di bingkai utama di sebelah atas dan 'Nota.htm' akan dipaparkan di bingkai kedua di
bahagian bawah laman web.
Contoh 2 kegunaan bingkai
Dalam contoh kali ini, kita akan membina satu projek ensiklopedia. Kita akan mempunyai satu
laman web bernama 'Muka1.htm'. Dalam laman web ini, kita akan bina 2 bingkai. Satu bingkai
disebelah kiri laman web dan satu lagi di sebelah kanan laman web. Bingkai di sebelah kiri kita
akan namakan 'Senarai' dan bingkai di sebelah kanan kita namakan 'Keterangan'. Bingkai
'Senarai' akan menampung satu laman web lain bernama 'Senarai.htm'. Bingkai 'Keterangan'
akan menampung satu lagi laman web lain bernama 'Keterangan.htm'. Apabila kita klik pada satu
item dalam bingkai 'senarai', keterangan atau gambar bagi item itu akan dipamirkan pada bingkai
'keterangan'.
Berikut ialah rupa 'Muka1.htm' :

Kodnya ialah seperti berikut :
<html>
<head>
<title>
Muka 1
</title>
</head>
<frameset cols="18%,82%">
<frame src="Senarai.htm" marginwidth="1" marginheight="1">
<frame src="" name="BingkaiKeterangan" marginwidth="1" marginheight="1">
</frameset>
</html>
Perhatikan perkara berikut :
Apabila laman web ini terpapar, bingkai di kiri akan terus menampakkan laman web
'Senarai.htm". Kita tidak memberi nama kepada bingkai ini. Bingkai dikanan pula tidak
dirujukkan kepadan mana-mana sumber (src=""), menyebabkannya kelihatan kosong. Bingkai
ini kita namakan 'BingkaiKeterangan'.
Kod pada laman web 'Senarai.htm' pula ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Senarai
</TITLE>
</HEAD>
<BODY>
<U>Senarai</U>
<BR>
<BR>
<A HREF="Proton.htm" TARGET="BingkaiKeterangan">Proton</A><BR>
<A HREF="Toyota.htm" TARGET="BingkaiKeterangan">Toyota</A><BR>
<A HREF="Mitsubishi.htm" TARGET="BingkaiKeterangan">Mitsubishi</A><BR>
<A HREF="Perodua.htm" TARGET="BingkaiKeterangan">Perodua</A><BR>
<A HREF="Gambarkereta.jpg" TARGET="BingkaiKeterangan">Kereta</A><BR>
<A HREF="Jam.jpg" TARGET="BingkaiKeterangan">Jam loceng</A><BR>
</BODY>
</HTML>
Perhatikan, laman web ini mengandungi pintasan-pintasan kepada 4 laman web dan 2 gambar.
Semua pintasan ini di halakan kearah bingkai 'BingkaiKeterangan' yang berada dalam laman web
'Muka1.htm'. Hasilnya, apabila kita klik pada mana-mana pintasan, laman web atau gambar
pintasan berkenaan akan dipaparkan dalam 'BingkaiKeterangan'.
Nampaknya, kita perlu menyediakan 4 laman web lagi (iaitu 'Proton.htm', 'Toyota.htm',
'Mitsubishi.htm' dan 'Perodua.htm') dan 2 gambar (iaitu 'GambarKereta.jpg' dan 'Jam.jpg').
Hasil laman web 'Muka1.htm' setelah kita klik pada pintasan 'Jam loceng' :

Membuat laman web berganti
Salah satu ciri laman web dinamik ialah laman web yang berubah-ubah kandungannya dengan
sendiri, tanpa campurtangan pengguna.
Biasanya bingkai digunakan untuk mempamirkan satu siri beberapa laman web secara berganti-
ganti mengikut tempoh masa tertentu, katakan 3 saat. Ini bererti kita mestilah telah menyediakan
beberapa laman web.
Katakan, bagi laman web 'Muka1.htm', selepas 3 saat ia dipamirkan, kita mahu ia diganti dengan
'Muka2.htm', iaitu 'Muka2.htm' pula akan dipamirkan. Kita tuliskan ciri berikut diantara tag
<HEAD> dan <TITLE> dalam 'Muka1.htm':
<META HTTP-EQUIV=Refresh CONTENT=3;"Muka2.htm">
Katakan bagi 'Muka2.htm' pula, selepas 4 saat ia dipamirkan, kita mahu 'Muka3.htm' pula akan
menggantikannya. Jadi kita tulis kod berikut diantara tag <HEAD> dan <TITLE> dalam
'Muka2.htm':
<META HTTP-EQUIV=Refresh CONTENT=4;"Muka3.htm">
Katakan bagi 'Muka3.htm' pula, selepas 5 saat ia dipamirkan, kita mahu kembali ke 'Muka1.htm'.
Jadi kita tulis kod berikut diantara tag <HEAD> dan <TITLE> dalam 'Muka3.htm':
<META HTTP-EQUIV=Refresh CONTENT=5;"Muka1.htm">
Berikut ialah contoh kod yang agak penuh (katakan kod ini bagi laman web 'Muka2.htm'):
<HTML>
<HEAD>
<META HTTP-EQUIV=Refresh CONTENT=2;"Muka3.htm">
<TITLE>Muka 2</TITLE>
</HEAD>
<BODY>
<A HREF="MukaDepan.htm">Klik sini untuk memberhentikan pertukaran</A>
</BODY>
</HTML>
Dalam kod diatas, 'MukaDepan'.htm' ialah satu laman web lain yang tidak mengandungi tag
<META HTTP-EQUIV=REFRESH.....>. Apabila pengguna yang melihat laman web
'Muka2.htm' klik pada perkataan 'Klik sini untuk memberhentikan pertukaran', laman web
'MukaDepan.htm' akan dipamirkan. Olehkerana laman web 'MukaDepan.htm' tidak
mengandungi tag <META....> maka tiada laman web lain yang akan dipamirkan secara
otomatik, kecuali kita sediakan satu pintasan dalam laman web 'MukaDepan.htm' yang mengarah
kepada satu laman web lain yang mengandungi tag <META...> seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka depan
</TITLE>
</HEAD>
<BODY>
<A HREF="Muka1.htm">Klik sini untuk memulakan pertunjukan...</A>
</BODY>
</HTML>
Jika kita tahu alamat satu laman web bursa saham yang sentiasa mengemaskinikan maklumat
pasaran saham setiap saat, kita boleh membina satu bingkai dalam laman web kita sendiri dan
memasukkan pintasan ke laman web bursa saham berkenaan serta memasukkan tag <META ...>.
Ini tentu memerlukan talian internet. Cara ini dapat mengelakkan kita dari berbelanja membeli
perisian bursa saham yang mahal.
Memasukkan alamat pembina laman web
Bahasa HTML menyediakan tag <ADDRESS> untuk kita sebagai penulis laman web
memasukkan maklumat ringkas kita seperti alamat, nombor telefon, alamat e-mel dan
sebagainya. Tag ini diakhiri dengan tag </ADDRESS>.
Biasanya apa-apa yang kita tulis diantara tag <ADDRESS> dan </ADDRESS> akan tertera
dalam huruf condong kekanan (italic).
Contoh kegunaan :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
<ADDRESS>
Mamat
No 66 Jalan Tampin
Seremban
34000 Negeri Sembilan
</ADDRESS>
</BODY>
</HTML>
Ia akan dipamirkan begini :
Mamat No 66 Jalan Tampin Seremban 34000 Negeri Sembilan
Untuk menampakkannya lebih dari satu baris, gunakan tag <BR> seperti biasa:
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
<BODY>
Laman Web canggih ini disediakan oleh :
<BR>
<BR>
<ADDRESS>
Mamat
<BR>
No 66 Jalan Tampin
<BR>
Seremban
<BR>
34000 Negeri Sembilan
</ADDRESS>
</BODY>
</HTML>
Contoh hasil :

Tag ini berguna kerana sesetengah injin-injin pencari laman web akan mencari tag ini untuk
mendapatkan maklumat penulis laman web berkenaan.
Gambar berpeta (image maps)
Kita boleh menjadikan satu gambar dalam laman web kepada beberapa bahagian dimana apabila
kita klik pada bahagian tertentu, kita akan dibawa ke laman web lain. Tiap-tiap bahagian yang
berbeza akan membawa kita ke laman web yang berlainan apabila di klik. Gambar yang
dibahagi-bahagikan kawasannya kita boleh panggil gambar berpeta.
Kita gunakan tag <MAP> untuk menanda satu gambar bahawa gambar itu akan di bahagikan
kepada beberapa bahagian. Tag ini diakhiri dengan tag </MAP>. Tag <MAP> digunakan
bersama dengan tag <AREA>. Tag <AREA> digunakan untuk mengenalpasti bahagian-bahagian
yang berkenaan. Satu tag <AREA> membina satu bahagian. Satu bahagian dikenalpasti dengan
koordinat.
Dalam tag <MAP> kita masukkan ciri NAME=X untuk memberi nama kepada bahagian itu. X
ialah nama yang kita mahu. Bahagian (MAP) itu dikaitkan dengan satu gambar apabila kita
memasukkan ciri USEMAP=X dalam tag <IMG> yang mengandungi gambar berkenaan. X
dalam USEMAP=X dan NAME=X hendaklah nama yang sama.
Perhatikan contoh penggunaan berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY BGCOLOR="white">
<MAP NAME="Peta 1">
<AREA SHAPE="RECT" COORDS="0, 0, 30, 30" HREF="Muka2.htm">
<AREA SHAPE="RECT" COORDS="60, 0, 90, 30" HREF="Muka3.htm">
<AREA SHAPE="RECT" COORDS="0, 60, 90, 30" HREF="Muka4.htm">
<AREA SHAPE="RECT" COORDS="60, 60, 90, 90" HREF="Muka5.htm">
</MAP>
<IMG SRC="Bola.gif" USEMAP="#Peta 1">
</BODY>
</HTML>
Dalam contoh kod diatas, kita akan menjadikan satu gambar sebagai satu peta dengan
menamakan gambar itu sebagai 'Peta 1' dengan menulis <MAP NAME="Peta 1">. Selepas tag
ini, kita tuliskan 4 tag <AREA>, bermakna kita akan bahagikan peta (gambar) kepada 4
kawasan. Tiap-tiap kawasan berbentuk empatsegi (SHAPE="RECT"). Kita nyatakan koordinat
tiap-tiap kawasan (0,0,30,30 dan sebagainya). Kemudian kita nyatakan laman web yang akan di
capai bila kita klik pada kawasan berkenaan (HREF=X).
Kemudian dalam tag <IMG>, kita rujukkan gambar ("Bola.gif") kepada nama peta menggunakan
ciri USEMAP=X.
Kedudukan blok tag <MAP> dan <IMG> tidak semestinya berdekatan seperti contoh diatas. Ia
boleh jadi dipisahkan oleh lain-lain tag.
Untuk makluman, selain daripada bentuk empatsegi ("RECT"), kita boleh gantikannya dengan
"CIRCLE" (bulatan), tetapi kita harus memberi maklumat panjang radius pula.
Koordinat kawasan empatsegi dalam peta dinyatakan dalam 4 angka. Angka pertama adalah bagi
kedudukan sebelah atas/kiri kawasan itu dari sebelah atas gambar. Angka kedua adalah bagi
kedudukan sebelah atas/kanan kawasan itu dari sebelah atas gambar. Angka ketiga adalah bagi
kedudukan sebelah bawah/kiri kawasan itu dari sebelah atas gambar. Angka keempat adalah
bagi kedudukan sebelahbawah/kanan kawasan itu dari sebelah atas gambar. Kedudukan adalah
dinyatakan dalam unit pixel. Contoh :
0, 0 0, 300



0, 200 200, 300
Apabila kita mengajukan kese tetikus ke kawasan yang berkenaan, satu 'tip' (nota kecil) akan
timbul memberitahu kita nama laman web yang akan kita layari atau nama bahagian lain laman
web yang akan kita temui atau nama fail bunyi, video dan lain-lain fail yang akan dibuka jika
kita klik pada kawasan itu.
Jika peta berada berada dalam laman web lain (katakan 'Muka5.htm') dan kita telah menamakan
peta itu (katakan 'Peta 1'), kita tuliskan begini untuk mencapainya dari laman web yang sedang
kita kerjakan :
<IMG SRC="Bola.gif" USEMAP="Muka5.htm#peta 1">
Perhatikan penggunaan tanda #.
Dalam contoh berikut :




Perhatikan bahagian bawah laman web dimana terdapat perkataan 'Shortcut to...'. Perkataan ini
muncul bila kita kese tetikus berada pada satu kawasan dalam gambar (tip dan kese tidak
kelihatan dalam gambarajah diatas). Ini menunjukkan bahawa jika kita klik pada kawasan itu,
kita atau pengguna akan dibawa ke laman web yang dinyatakan dalam 'Shortcut to...'.

Mendapatkan maklumbalas dari pengguna
Kita boleh mendapatkan maklumbalas dari pengguna laman web kita di internet dengan
menuliskan alamat e-mel kita dalam laman web. Dengan ini kita berharap pengguna akan
menulis ke alamat e-mel kita apa-apa makluman yang mereka mahu beri. Cara ini bagaimanapun
akan menyebabkan pengguna memberitahu makluman-makluman yang diluar jangkaan kita.
Untuk memasukkan alamat e-mel kita, kita masukkan alamat itu dalam tag <A> seperti berikut :
<A HREF="NamaSaya@hotmail.com">E-mel saya</>
Pengguna akan nampak perkataan 'E-Mel saya'. Bila ia klik pada perkataan itu, satu program e-
mel yang ada dalam komputer pengguna akan menjadi aktif, dan jika pengguna tahu
menggunakan program itu (contohnya Outlook atau Outlook Express), maka bolehlah ia
menghantar e-mel kepada kita.
Kita boleh mendapatkan makluman dan maklumat yang tertentu sahaja dari pengguna dengan
menggunakan tag <FORM> dan </FORM>. Diantara kedua-dua tag ini kita akan masukkan pula
tag-tag lain yang membina objek-objek yang berupa ruang-ruang atau pilihan-pilihan. Pengguna
akan menuliskan sesuatu pada ruang atau menandakan pilihan mereka atau membuat pilihan dari
satu senarai. Kemudian pengguna akan klik pada satu butang (kita kena sediakan), lalu semua
maklumat yang pengguna tuliskan atau pilih akan dihantar ke alamat e-mel kita. Pengguna
haruslah dalam keadaan 'online' dan laman web kita haruslah berada di internet. Alamat e-mel
kita juga mestilah dituliskan pada satu tempat dalam kod kita.
Cuba lihat contoh laman web dibawah :

Dalam laman web diatas, apabila pengguna klik pada butang 'Hantar', semua maklumat yang ia
tuliskan pada ruang-ruang yang disediakan (seperti nama, alamat e-mel, pilihan pendapatnya dan
komen) akan dihantar ke alamat e-mel kita (jika pengguna online di internet). Apabila pengguna
klik pada butang 'Kosongkan', semua isi ruang-ruang akan dikosongkan.
Ruang dikanan perkataan 'Nama anda' ialah satu objek 'kotak teks' (text box) yang kita namakan
'Nama'. Kita boleh memberi apa-apa nama kepada objek ini asalkan nama itu boleh
memudahkan kita sebagai pembina laman web untuk mengenal objek ini dalam kod.
Memasukkan objek dan menamakan objek kita lakukan dalam kod. Oleh itu, hanya kita sebagai
pembina laman web tahu apakah objek yang ada dalam laman web dan nama objek. Pengguna
tidak perlu tahu.
Ruang dikanan perkataan 'Alamat e-mel anda' juga ialah satu 'kotak teks' yang kita namakan
'eMel'.
Ruang dikanan perkataan 'Pendapat anda mengenai laman web ini' ialah satu objek 'Kotak
Kombo' (SELECT OPTION) yang kita namakan 'Pilihan' mengandungi 5 item yang boleh dipilih
oleh pengguna.
Ruang dibawah perkataan 'tuliskan dibawah ini' ialah satu objek 'kotak teks besar' (TEXTAREA)
yang kita namakan 'Komen'. Objek ini berguna untuk pengguna laman web menuliskan tulisan
yang panjang melebihi satu baris.
Butang bertulis dengan perkataan 'Hantar' ialah satu objek butang penghantar (INPUT
TYPE=SUBMIT). Objek jenis ini, apabila di klik oleh pengguna laman web, akan secara
otomatik menghantar semua isi lain-lain objek yang ada ke alamat e-mel yang ditetapkan. Kita
akan pelajari nanti bagaimana menetapkan alamat e-mel supaya menjadi sasaran butang ini.
Butang bertulis dengan perkataan 'Kosongkan' ialah satu objek butang pengosong (INPUT
TYPE=RESET). Objek jenis ini, apabila di klik oleh pengguna laman web, akan secara otomatik
mengosongkan isi objek-objek TEXT, TEXTAREA dan OPTION.
Kita memasukkan objek-objek dalam laman web dengan menggunakan tagtag tertentu. Tag
<INPUT TYPE=TEXT> digunakan untuk memasukkan objek 'kotak teks'. Tag <SELECT>
digunakan untuk memasukkan objek 'Pilihan'. Tag <TEXTAREA> digunakan untuk
memasukkan objek 'Kotak teks besar'. Tag <INPUT TYPE=SUBMIT> digunakan untuk
memasukkan objek 'Butang penghantar'. Tag <INPUT TYPE=RESET> digunakan untuk
memasukkan objek 'Butang pengosong'.
Semua tag-tag pembina objek hendaklah diletakkan diantara tag-tag <FORM> dan </FORM>.
Kawasan diantara tag <FORM> dan </FORM> akan membina satu kawasan 'borang' (form)
dalam laman web. Jadi, seolah-olah, objek berada dalam borang. Bagaimanapun, pengguna tidak
nampak sempadan kawasan borang.
Berikut ialah kod penuh bagi laman web diatas. Pelajari bagaimana membina borang dan
memasukkan objek dalam borang:
<HTML>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<BODY>
<H1>Borang maklumbalas</H1>
<FORM METHOD=POST ACTION="mailto:abu@tm.net.my">
Nama anda: <INPUT TYPE=text NAME="Nama" Size=50>
<BR>
Alamat e-mel anda: <INPUT TYPE=text NAME="eMel" size=50>
<BR>
Pendapat anda mengenai laman web ini:
<SELECT NAME="Pilihan">
<OPTION>Cemerlang
<OPTION>Bagus
<OPTION>Biasa saja
<OPTION>Tak bagus
<OPTION>Teruk
<OPTION SELECTED>
</SELECT>
<BR>
<BR>
Jika anda ada apa-apa komen,
<BR>
tuliskan dibawah ini:
<BR>
<TEXTAREA NAME="Komen" ROWS=5 COLS=40 WRAP=Virtual>
</TEXTAREA>
<BR>
<BR>
<INPUT TYPE=SUBMIT VALUE="Hantar">
<INPUT TYPE=RESET VALUE="Kosongkan">
</FORM>
</BODY>
</HTML>
Mari kita menganalisa kod diatas.
Perhatikan baris kod berikut :
<FORM METHOD="POST" ACTION="mailto:ibh1@tm.net.my">
Bentuk tag <FORM> yang paling ringkas ialah tag <FORM> itu sendiri. Dalam tag ini kita
boleh masukkan ciri METHOD="POST" dan ciri ACTION="mailto:X". 'abu@tm.net.my' ialah
alamat e-mel kita. Anda boleh tukar perkataan ini dengan alamat e-mel anda. Kita tidak boleh
meminda lain-lain perkataan dalam baris diatas kecuali alamat e-mel. Inilah cara kita
menetapkan alamat e-mel yang menyebabkan secara otomatik semua maklumat dalam objek-
objek dalam borang akan dihantar ke alamat e-mel itu apabila pengguna klik pada butang jenis
SUBMIT. Ciri METHOD="POST" dalam tag <FORM> menentukan cara tindakan yang akan
dilakukan kepada maklumat yang ada dalam borang, iaitu cara POST. Kita tidak perlu mengubah
cara ini. Ini adalah cara yang piawai (standad).
Untuk makluman, borang diatas sebenarnya bermula dari perkataan 'Nama anda... ' dan kebawah
hingga ke butang 'Kosongkan'. Perkataan 'Borang maklumbalas' berada diluar borang (diluar tag
<FORM>. Kerana tiada garisan yang menunjukkan sempadan borang, ia agak mengelirukan.
Tetapi pengguna tidak perlu tahu bahagian laman web yang menjadi borang dan bahagian yang
bukan borang. Hanya kita sebagai pembina laman web yang tahu kawasan borang.
Kita dapati juga, diantara tag <FORM> dan <FORM>, kita boleh masukkan
perkataan=perkataan selain dari tag-tag yang membina objek.
Menyusun objek dalam borang
Kita boleh menggunakan tag <PRE> seperti yang kita pelajari dalam bab 'Mengendali tabel cara
1' untuk menyusun objek-objek dalam borang supaya kelihatan lebih kemas. Berikut ialah kod
yang menggunakan tag <PRE> :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<H1>Borang maklumbalas</H1>
<FORM METHOD="POST" ACTION="mailto:ibh1@tm.net.my">
<PRE>
Nama anda: <INPUT TYPE=text NAME=Nama Size=50>
Alamat e-mel anda: <INPUT TYPE=text NAME=eMel size=50>
Pendapat anda mengenai laman web ini:
<SELECT NAME=Pilihan>
<OPTION>Cemerlang
<OPTION>Bagus
<OPTION>Biasa saja
<OPTION>Tak bagus
<OPTION>Teruk
<OPTION SELECTED>
</SELECT>
Jika anda ada apa-apa komen, tuliskan dibawah ini:
<TEXTAREA NAME=Komen ROWS=5 COLS=40 WRAP=Virtual>
</TEXTAREA>
<INPUT TYPE=SUBMIT VALUE=Hantar> <INPUT TYPE=RESET VALUE=Kosongkan>
</PRE>
</FORM>
</BODY>
</HTML>
Hasilnya kelihatan lebih kemas :

Objek-objek borang
Berikut ialah jenis-jenis objek yang boleh dimasukkan dalam borang (termasuk objek-objek yang
ditunjukkan dalam contoh diatas) berserta ciri-ciri masing-masing.
1. Kotak teks (text box)
Objek ini merupakan satu ruang kosong yang boleh diisi oleh pengguna. Kita membinanya
dengan menggunakan tag berikut:
<INPUT TYPE=TEXT>
Didalam tag ini kita boleh menambah ciri-ciri berikut : NAME (untuk kita memberi nama
kepada objek ini), SIZE (untuk kita menetapkan panjang objek dalam unit bilangan karakter
yang boleh dituliskan didalamnya), VALUE (untuk menetapkan perkataan yang akan timbul
padanya secara otomatik) dan MAXLENGTH (untuk menetapkan bilangan maksima karakter
yang boleh diisi).
Contoh penggunaan ciri-ciri itu ialah seperti berikut :
<INPUT TYPE=text NAME="Ruang Jantina" SIZE=20 VALUE="Tulis jantina anda"
MAXLENGTH="20">
Hasilnya :

Jika kita tidak menulis ciri VALUE=X, tiada perkataan yang otomatik timbul dalam objek ini.
Jika kita tidak menuliskan ciri SIZE=X, lebar objek biasanya ialah 1.5 inci. Objek ini
bagaimanapun boleh menampung lebih banyak karakter dari lebarnya.
Perhatikan, tag ini tiada tag penutupnya.
2. Kotak teks besar (text area)
Objek ini merupakan satu ruang yang lebih besar dari kotak teks yang boleh diisi oleh pengguna.
Kita membinanya dengan menggunakan tag berikut:
<TEXTAREA>
Tag ini perlukan tag penutup iaitu </TEXTAREA>.
Didalam tag ini kita boleh menambah ciri-ciri berikut : NAME (untuk kita memberi nama
kepada objek ini), COLS (untuk kita menetapkan lebar objek dalam unit bilangan karakter yang
boleh dituliskan didalamnya), ROWS (untuk menentukan bilangan baris yang boleh kelihatan),
WRAP (untuk menetapkan bahawa apabila satu huruf telah sampai ke sempadan kanan objek,
huruf seterusnya akan tertulis dibaris berikutnya).
Contoh penggunaan ciri-ciri itu ialah seperti berikut :
<TEXTAREA NAME="Ruang komen" COLS=50 ROWS=5 WRAP="virtual"></TEXTAREA>
Hasilnya :

3. Kotak combo (Combo box)
Objek ini merupakan satu ruang yang kita boleh isi dengan lebih dari satu item (seperti satu
senarai), kemudian pengguna boleh memilih satu dari item dalam senarai. Kita membinanya
dengan menggunakan tag yang berstruktur seperti berikut:
<SELECT>
<OPTION>X1
<OPTION>X2
.
.
.
<OPTION SELECTED>X5
</SELECT>
Perhatikan struktur ini dimulakan dengan dengan tag <SELECT> dan diakhiri dengan tag
</SELECT>. Diantara kedua-dua tag ini kita tuliskan tag <OPTION>. Kita boleh tuliskan lebih
dari satu tag <OPTION>. Dikanan tiap-tiap tag <OPTION> kita boleh tuliskan satu item. Jadi,
jika kita hendak memasukkan 10 item, kita harus menuliskan 10 tag <OPTION>. Tag
<OPTION> boleh ditulis tanpa tag penutup (kita boleh menulis tag penutup </OPTION> jika
kita mahu. Tag <OPTION SELECTED> pula digunakan untuk menentukan item yang akan
ditayangkan sebaik saja laman web dilihat oleh pengguna. Tag ini boleh dituliskan pada mana-
mana kedudukan diantara tag <SELECT> dan </SELECT> dan tidak semestinya selepas tag
<OPTION> yang terakhir. Item itu kita tuliskan dikanan tag ini, dan tidak semestinya satu item
diantara item-item yang ada pada tag <OPTION>. Jika kita tidak menuliskan apa-apa item,
bermakna tiada item yang akan ditayangkan sehingga pengguna membuat pilihan. Pengguna
membuat pilihan dengan mengklik bahagian kanan objek, kemudian satu senarai akan
dipaparkan. Pengguna klik pada satu item dalam senarai untuk memilih item berkenaan.
Didalam tag <SELECT> kita boleh menambah NAME untuk kita memberi nama kepada objek
ini. Kita boleh beri apa-apa nama kepada objek ini, seeloknya nama yang menggambarkan
isinya.
Contoh penggunaan objek ini ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
Pilih makanan kegemaran anda :
<SELECT NAME="Pilihan makanan">
<OPTION SELECTED>Jambu batu</OPTION>
<OPTION>Nasi minyak</OPTION>
<OPTION>Nasi biasa</OPTION>
<OPTION>Nasi kerabu</OPTION>
<OPTION>Nasi ayam</OPTION>
<OPTION>Nasi goreng hailam</OPTION>
</SELECT>
</BODY>
</HTML>
Berikut ialah hasilnya sebaik saja laman web kelihatan, dan selepas di klik:

Keadaannya ketika diklik :

4. Kotak cek (Check box)
Objek ini merupakan satu kotak kecil yang boleh ditanda oleh pengguna. Kita membinanya
dengan menggunakan tag berikut:
<INPUT TYPE="CHECKBOX">
Didalam tag ini kita boleh menambah ciri NAME=X (untuk kita memberi nama kepada objek
ini, CHECKED (untuk terus membubuh tanda sebaik saja laman web ditayangkan).
Contoh penggunaan objek ini dan cirinya ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<FORM>
<PRE>
Tandakan buah-buah yang anda gemari :
(Dua daripadanya telah ditandakan untuk anda)
Nanas <INPUT TYPE="CHECKBOX" NAME="Nanas" CHECKED>
Pisang <INPUT TYPE="CHECKBOX" NAME="Pisang">
Durian <INPUT TYPE="CHECKBOX" NAME="Durian">
Rambutan <INPUT TYPE="CHECKBOX" NAME="Rambutan" CHECKED>
</PRE>
</FORM>
</BODY>
</HTML>
Hasilnya :

5. Butang radio (radio button)
Objek ini merupakan satu bulatan kecil yang boleh ditanda oleh pengguna. Kita membinanya
dengan menggunakan tag berikut:
<INPUT TYPE="RADIO">
Didalam tag ini kita boleh menambah ciri NAME=X (untuk kita memberi nama kepada objek
ini, VALUE=X (untuk kita menyangkutkan satu nilai pada objek ini).
Contoh penggunaan objek ini dan cirinya ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<FORM>
<PRE>
Tandakan jawapan yang betul bagi 9 + 7 :
1. 14 <INPUT TYPE="RADIO" VALUE="14" NAME="jawapan">
2. 15 <INPUT TYPE="RADIO" VALUE="15" NAME="jawapan">
3. 16 <INPUT TYPE="RADIO" VALUE="16" NAME="jawapan">
4. 17 <INPUT TYPE="RADIO" VALUE="17" NAME="jawapan">
</PRE>
</FORM>
</BODY>
</HTML>
Hasilnya :

6. Butang penghantar (Submit button)
Objek ini merupakan satu butang yang apabila diklik, semua maklumat yang dituliskan oleh
pengguna dalam lain-lain objek dalam borang akan dihantar ke destinasi e-mel yang alamatnya
kita nyatakan dalam tag <FORM>. Kita membinanya dengan menggunakan tag berikut:
<INPUT TYPE="SUBMIT">
Didalam tag ini kita boleh menambah ciri VALUE=X untuk kita memberi perkataan yang akan
kelihatan pada butang ini (gantikan sahaja X dengan perkataan yang kita mahu). Jika kita tidak
menuliskan ciri VALUE=X, perkataan yang akan timbul pada butang ialah 'SUBMIT'.
Saiz minima butang ini ialah lebihkurang satu inci panjang dan panjang maksimanya adalah
mengikut panjang perkataan yang kita tulis dalam ciri VALUE=X.

Contoh penggunaan objek ini ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<INPUT TYPE="SUBMIT" VALUE="Klik untuk menghantar data">
</BODY>
</HTML>
Hasilnya:

7. Butang pengosong (reset button)
Objek ini merupakan satu butang yang apabila diklik, semua data yang terpapar pada lain-lain
objek dalam borang akan diset semula (kosong semula). Kita membinanya dengan menggunakan
tag berikut:
<INPUT TYPE="RESET">
Didalam tag ini kita boleh menambah ciri VALUE=X untuk kita memberi perkataan yang akan
kelihatan pada butang ini (gantikan sahaja X dengan perkataan yang kita mahu). Jika kita tidak
menuliskan ciri VALUE=X, perkataan yang akan timbul pada butang ialah 'RESET'.
Saiz minima butang ini ialah lebihkurang satu inci panjang dan panjang maksimanya adalah
mengikut panjang perkataan yang kita tulis dalam ciri VALUE=X.

Contoh penggunaan objek ini ialah seperti berikut :
<HTML>
<HEAD>
<TITLE>
Muka 1
</TITLE>
</HEAD>
<BODY>
<INPUT TYPE="RESET" VALUE="Klik untuk mengosongkan ruang-ruang">
</BODY>
</HTML>
Hasilnya:

Rupa fail yang akan kita terima
Apabila kita menyediakan borang dalam laman web kita dimana pengguna akan mengisinya dan
menghantarnya ke alamat e-mel kita, semua data secara otomatik akan dikumpulkan dalam satu
fail teks yang dinamakan 'Postdata.att' dan fail ini merupakan satu lampiran ('attachement') dari
e-mel pengguna. Kita boleh membukanya menggunakan program Notepad atau lain-lain
program pemproses perkataan seperti Word, Wordpad dan sebagainya.
Data dalam fail itu bersambung terus menerus antara satu sama lain, tidak seperti susunan yang
kita buat dalam borang. Contohnya jika kita menyediakan borang yang mempunyai 2 ruang
untuk diisi, dimana satu ruang kita namakan 'Nama' dan satu lagi ruang kita namakan 'Alamat'
dan pengguna mengisi ruang nama dengan perkataan 'Dol bin Ton' dan ruang alamat diisi dengan
'Shah Alam', data dalam fail 'postdata.att' akan kelihatan bersambungan begini :
&Nama=Dol+bin+ton&Alamat=Shah+Alam
Perhatikan tanda & digunakan untuk membezakan antara data. Nama objek diikuti dengan tanda
= , kemudian diikuti dengan data. Tanda + menandakan huruf ruang kosong.
Dengan struktur data yang bersambung seperti ini, kita terpaksa mencari cara untuk
mengubahnya menjadi struktur yang lebih mudah dibaca atau memindahkannya ke program lain
yang boleh memecahkan data ini kepada unsur-unsurnya. Kita boleh menggunakan program
Excel atau Word untuk melakukannya.
Untuk menggunakan data ini, kita perlu memasukkannya dalam satu databes untuk tujuan
merekodkannya dan menganalisanya. Kita boleh memungut (pilih) data tertentu sahaja dan salin
(copy) data itu ke databes.
Menghasilkan laman web dari fail Excel
Kita boleh menghasilkan satu laman web dari satu fail Excel yang kita ada. Ini tidak bermakna
fail Excel berkenaan telah bertukar kepada laman web. Fail Excel asal masih tetap ada. Laman
Web berkenaan adalah satu fail baru yang dihasilkan dari satu operasi keatas fail Excel
berkenaan.
Katakan kita mempunyai fail Excel seperti berikut :

Untuk menghasilkan satu laman web dari fail diatas, ikut langkah berikut :
1. Buka fail Excel yang berkenaan (tentunya gunakan program Excel).
2. Pilih kawasan data yang kita hendak salin sebagai laman web. Katakan A2:B4.
3. Pilih menu 'File / Save as HTML...'.
(Jika sub-menu 'Save as HTML...' tidak kelihatan, klik menu 'Tools / Add-Ins'. Dialog berikut
akan muncul :

Pastikan ada tanda pada kotak 'Internet Assistant Wizard'. Klik OK. Dialog ini akan hilang.
Kemudian klik menu 'File'. Kita akan nampak sub-menu 'Save as HTML...'.)
4. Dialog berikut akan muncul (ini adalah permulaan proses menghasilkan laman web):


Pilih 'Next'. Dialog berikut pula akan timbul :



Klik 'Next'.



Isi atau ubah isi ruangan-ruangan yang berkenaan. Klik 'Next' :



Klik 'Finish'. Dialog akan hilang. Ini bermakna satu laman web telah
terbina dan disimpan dalam folder seperti yang tertera dalam kotak
dibawah perkataan 'File path'.

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">
<TITLE>ExcelJadiLaman Web</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Senarai nama</CENTER></H1>
Kawan saya masa kecil
<HR>
<!-- The following table was generated by the Internet Assistant Wizard for Microsoft Excel. -->
<!-- ------------------------- -->
<!-- START OF CONVERTED OUTPUT -->
<!-- ------------------------- -->
<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>
<TR VALIGN="bottom">
<TD ALIGN="left"><FONT FACE="Arial">
ALI</FONT></TD>
<TD ALIGN="center"><FONT FACE="Arial">
10</FONT></TD>
</TR>
<TR VALIGN="bottom">
<TD ALIGN="left"><FONT FACE="Arial">
ABU</FONT></TD>
<TD ALIGN="center"><FONT FACE="Arial">
11</FONT></TD>
</TR>
</Table>
<!-- ------------------------- -->
<!-- END OF CONVERTED OUTPUT -->
<!-- ------------------------- -->
<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>
<TR><TD WIDTH="52%" VALIGN="TOP">
<FONT FACE="Courier New" SIZE=2><P>Ali</FONT></TD>
<TD WIDTH="48%" VALIGN="TOP">
<FONT FACE="Courier New" SIZE=2><P>10</FONT></TD>
</TR>
<TR><TD WIDTH="52%" VALIGN="TOP">
<FONT FACE="Courier New" SIZE=2><P>Abu</FONT></TD>
<TD WIDTH="48%" VALIGN="TOP">
<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>
<META NAME="keywords" CONTENT="mathematic">
</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="keywords" CONTENT="mathematic">
<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>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<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>
<HEAD><TITLE>Muka 1</TITLE></HEAD>
<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 : &#160;&#160;&#160; 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.