Membina HTML

HYPERTEXT MARKUP LANGUAGE

(termasuk HTML 3.2, IE dan Netscape Extensions)

Jika anda inginkan Halaman ini sebagai rujukan kemudian hari, sila tekan " CTRL+D ".

Anda boleh memuat turun versi demo Microsoft® FrontPage daripada http://www.microsoft.com/frontpage

Dengan menggunakan Microsoft® FrontPage, anda dapat mempunyai beberapa kelebihan: Rangkaian di antara semua halaman digambarkan dengan jelas; dengan ini memudahkan penyunting Web menyediakan lebih dari satu tapak Web. Untuk lebih memudahkan anda, terdapat perisian bestari atau wizard untuk membantu anda jenis tapak Web yang umum. Dengan ini anda lebih mudah menyediakan tapak Web jika dibandingkan dengan menggunakan Windows® Notepad dalam penyediaan HTML.

Anda juga boleh menggunakan berbagai perisian penyunting yang lain. Terdapat berbagai aplikasi perisian yang dapat anda memuat turun, diantaranya HomeSite 3.0 yang di miliki oleh Allair Corporation® dan HomePage 3.0 yang dimiliki oleh Claris Corporation®. Kedua-dua perisian ini dapat anda gunakan dengan mudah seperti anda menggunakan Microsoft® FrontPage, kerana perisian-perisian tersebut terdapat ciri-ciri WYSIWYG tetapi tidaklah secekap Microsoft® FrontPage. Jika anda masih baru di dalam penyediaan tapak Web, perisian-perisian ini masih juga dapat menghasilkan tapak Web yang baik dan menarik untuk anda.

Anda boleh memuat turun versi demo

HomeSite 3.0 http://www.allaire.com

HomePage 3.0 http://www.claris.com

Untuk menghasilkan tapak Web yang menarik, sudah tentulah tapak tersebut lebih baik jika terdapat tatapan imeg grafik yang berwarna-warni. Oleh itu anda juga memerlukan satu aplikasi untuk menyunting imeg untuk dimasukan kedalam tapak Web anda . Cara yang termudah, anda boleh menggunakan Windows® Paint. Dengan menggunakan Windows® Paint, sudah memadai untuk anda menghasilkan imeg grafik yang asas. Adalah lebih baik jika anda dapat menggunakan aplikasi yang lebih canggih yang dapat anda memuat turun daripada internet contohnya seperti Lview® Pro atau Adobe® Photoshop .

Anda boleh memuat turun versi demo Lview® Pro daripada http://www.lview.com

Untuk menghasilkan dan mempastikan tapak Web anda tidak mengecewakan, anda perlulah memasangkan pelayar web versi terbaru kegemaran anda samada Microsoft® Internet Explorer (IE) ataupun Netscape® Navigator. Adalah perlu anda mencuba dengan pelayar yang berlainan yang akan mempamerkan hasil kerja anda dengan sedikit perbezaan. Jika boleh, dapatkan juga versi-versi lama pelayar tersebut (bukan semua pengguna Internet mempunyai perisian terbaru). Jadi elakan tapak Web anda tidak berjalan lancar dengan di sebabkan anda tidak mengendahkan pengguna Internet menggunakan pelayar versi terdahulu.

Dan akhir sekali, perancangan anda. Sebelum anda mula membangunkan dan merekabentuk sebuah laman Web, adalah lebih baik anda meluangkan sedikit masa untuk memikirkan tentang tujuan halaman anda. Adakah anda akan menerbitkan sebuah halaman PERIBADI atau SYARIKAT. Disini saya akan menerangkan halaman peribadi. Laman peribadi ini merupakan hasil pertama yang diletak atas Web oleh kebanyakan pengguna Internet. Anda telahpun mempunyai akaun Internet untuk beberapa bulan dan telah mengenali beberapa kawan melalui Kumpulan Berita (Newsgroup) dan saluran IRC. Sekarang anda mungkin ingin membolehkan kawan-kawan anda itu mengetahui rupa anda pula. Laman seperti ini jarang memuatkan daripada satu atau dua bait ingatan. Jadi ini adalah cara yang "murah" untuk anda berjinak-jinak dengan penghasilan laman Web. Anda boleh mendapat ruang yang diperlukan daripada Pembekal Perkhidmatan Internet anda. Terlalu banyak halaman jenis ini dimulakan dengan baik dan teratur tetapi merosot apabila kekeliruan pautan-pautan "sedang dibina" (under construction) timbul. Jangan jatuh ke dalam perangkap ini. Sekiranya anda tidak sabar untuk menghasilkan kesemua halaman anda, jangan harap bahawa anda akan menghabiskan kesemuanya. Namun hakikatnya, anda tidak akan berbuat demikian. Tiada apa yang kelihatan lebih teruk daripada sebuah laman yang tergantung begitu sahaja dan separuh siap. Diharap dengan adanya Laman ini, serba sedikit dapat membantu anda menyunting beberapa dokumen HTML dengan menggunakan beberapa tag-tag yang yang asas kerana ia dihasilkan sebagai rujukan anda untuk menempuhi DUNIA INTERNET yang serba mencabar ini.

PETUNJUK HTML asas IMEG BINGKAI JADUAL

HTML asas

Pada umumnya semua dokumen HTML diwajib memakukan tag <HTML> dan </HTML>. Tag ini adalah menandakan bahawa dokumen yang anda sebuah HTML dan bukan sebuah dokumen SGML (Standard Generalised Markup Language). Kebanyakan pelayar web tidak mengambil berat akan tag-tag ini dan kebanyakan orang cuba mengabaikannya, tetapi bukankah lebih baik kita membuat sesuatu mengikut langkah yang betul?.

Bahagian Kepala (Head)

<HEAD>

Di antara pasangan tag <HTML> itu, elemen yang seterusnya adalah kepala kepada dokumen. Setiap dokumen HTML seharusnya mempunyai satu kepala tetapi secara praktikal anda boleh mengabaikannya di dalam keadaan tertentu. Pada bahagian Kepala di sisipkan antara tag <HEAD> dan </HEAD>.

<HTML> <HEAD> <TITLE>Tajuk dokumen ini</TITLE> </HEAD> <BODY> .............. Bahagian badan dokumen </BODY> </HTML>

Bahagian Kepala mengandungi maklumat umum sesuatu dokumen. Beberapa tag khas akan digunakan dalam bahagian Kepala , antaranya iaitu

<TITLE>

Teks antara tag <TITLE> dan </TITLE> akan dibaca oleh pelayar web sebagai tajuk sesebuah dokumen itu. Kebanyakan Web mempamerkannya di bahagian atas tetingkap dan juga menggunakan tajuk ini di dalam senarai Penanda Halaman (Bookmark) dan Sejarah (History). Oleh itu sesuatu dokumen HTML seharusnya mempunyai satu tajuk. Jika anda meletakan tajuk dokumen anda sebagai " Selamat Datang " contohnya, ini ada tajuk yang agak kurang sesuai kerana tajuk tersebut akan di peragakan di dalam senarai Bookmark nanti oleh seseorang pelayar apabila melawat halaman anda nanti. Tajuk tersebut sebenarnya tidak membawa erti, adalah lebih baik anda memberi tajuk dokumen anda seperti " Laman Web Siti " contohnya.

Bahagian Badan (Body)

<BODY>

BODY adalah sesuatu bahagian yang utama di dalam dokumen HTML. Tetapi ada juga dokumen HTML yang tidak menggunakan tag BODY - contohnya jika anda menggunakan bingkai, tetapi kebanyakan dokumen mempunyai bahagian ini. Tag <BODY> dan berakhir dengan tag </BODY> akan digunakan pada bahagian BODY. Tag BODY juga mempunyai beberapa atribut yang membenarkan anda menentukan sesuatu imeg bagi latar belakang atau warna latar belakang dan latar depan. Atribut-atribut tersebut adalah merupakan sambungan Netscape bagi HTML yang kini termasuk di dalam HTML versi 3.2. Oleh sebab itu pada masa kini semua pelayar web boleh menjalankannya dengan baik. Tetapi anda haruslah berhati-hati semasa anda memilih warna kerana jika pilihan anda kurang bijak, halaman anda tidak boleh dibaca sama sekali ( ingatlah bahawa tidak semua pengguna mempunyai monitor atau kad grafik yang dapat memaparkan bilangan warna yang sama seperti komputer anda). Atribut tersebut adalah seperti di bawah:-

BACKGROUND	Atribut ini akan digunakan jika anda meletakkan satu imeg (biasanya fail .GIF atau .JPG) untuk digunakan sebagai latar belakang dokumen HTML anda. Ifeknya anda akan mendapati imeg tersebut akan memenuhi ruang dokumen anda dengan diulagi beberapa kali . Seboleh-bolehnya fail imeg ini haruslah dikecilkan kerana fail yang besar akan melambatkan apabila dimuat turunkan.
BGCOLOR	Atribut ini akan digunakan dengan menyatakan warna yang akan anda gunakan untuk latar belakang dokumen anda. Ia boleh digunakan dengan cara yang mudah ataupun dengan cara yang lebih terperinci. Cara yang mudah adalah dengan menggunakan nama-nama warna yang dibenarkan iaitu, aqua, black, blue, fuchsia, gray, green, lime, marroon, navy, olive, purple, red, silver, teal, white atau yellow. Jika anda ingin menggunakan cara yang lebij terperinci, anda perlulah menyatakan warna tersebut dengan menggunakan tata tanda "RGB" ( Red, Green dan Blue ). Setiap satu warna RGB dibahagikan kepada dari nilai 0 dan 255. Sebagai contoh , jika anda meletakkan BGCOLOR=#FFFF00, latar belakang dokumen anda akan menghasilkan warna kuning (yellow). BGCOLOR=#FFCC99, pula menghasilkan warna latar belakang perang terang.
TEXT	Atribut ini akan mentakrifkan warna teks yang akan anda gunakan
LINK	Atrubut ini mentakrifkan warna bagi pautan hiperteks yang belum dilawati.
VLINK	Atribut ini mentakrifkan warna untuk pautan yang telah dilawati.
ALINK	Atribut ini mentakrifkan warna untuk pautan semasa anda mengkliknya dengan tetikus nanti.

TAJUK TEKS	Di dalam spesifikasi HTML, terdapat 6 jenis tajuk iaitu bermula dari H1 (yang paling penting) diikuti pula H2, H3 hinggalah H6 (yang kurang penting). Cara penyusunan tajuk ada penting bagi sesuatu dokumen HTML kerana tanpa penyusunan yang baik, agak susah seseorang pelayar web meneliti dokumen anda nanti. Cara penyusunan yang baik ada bermula dengan tajuk yang menggunankan tahap yang teratas iaitu H1 dimana didalam tajuk H1 akan menggandungi beberapa tajuk H2 dan di dalam tajuk H2 pula menggandungi beberapa tajuk H3 pula dan tajuk H3 pula menggandungi beberapa H4 pula dan seterusnya. Pada kebiasaanya, tajuk-tajuk tersebut akan kelihatan seperti berikut :- <H1>PENGENALAN</H1> Dimana <H1> adalah tag pembukaan, PENGENALAN pula adalah teks tajuk dan </H1> pula adalah tag penutup tajuk tersebut. Adalah penting bagi anda mempastikan agar tag pembukaan <H1> akan berakhir dengan tag penutup </H1> pula bukan </H2> kerana tanpa penyusunan tersebut dokumen anda akan kelihatan tidak betul. Seharusnya kesilapan tersebut dapat dielakan jika anda berhati-hati apabila anda menggunakan tag tajuk tersebut.
TEKS MARQUEE	Dengan menggunakan tag MARQUEE anda akan menghasilkan teks yang menarik kerana anda akan mendapati satu teks yang bergerak akan merintangi dokumen anda nanti (seperti pelindung skrin - Screen Saver - didalam Windows® ). Untuk menghasilkan teks tersebut adalah seperti berikut :- <MARQUEE>TEKS INI BERGERAK</MARQUEE> dan akan menghasilkan TEKS INI BERGERAK Terdapat beberapa atribut khas yang boleh anda gunakan bersama teks MARQUEE untuk mendapatkan kesan yang lebih baik seperti ALIGN, WIDTH, HEIGHT, DIRECTION dan sebagainya. Dengan menggunakan atribut ini anda akan dapat mengawal sifat-sifat teks MARQUEE.
PERENGGAN	Untuk menghasilkan sesuatu perenggan tag <P> akan digunakan. Terdapat beberapa cara tag ini boleh digunakan. Cara pertama :- <P>Ini ada cara perenggan pertama........ Jika diperhatikan tag <P> digunakan pada permulaan perenggan. Cara kedua :- <P>Ini ada adalah cara perenggan kedua</P> Pada cara ini tag <P> digunakan pada pembukaan dan tag </P> pula digunakan pada penutup. Cara ketiga :- Ini adalah cara yang ketiga<P> Cara ketiga pula tag <P> digunakan pula pada akhir perenggan. Anda boleh menggunakan ketiga-tiga cara tersebut tetapi ketiga-tiga cara tersebut ada berbeza cara pemaparannya.
PEMUTUS BARIS	Untuk menghasilkan satu penamat baris, tag <BR> akan digunakan. Kebiasaannya pada teks normal (SGML), anda hanya memasukan perintah Return untuk menghasilkan satu pemutus baris, tetapi pada dokumen HTML tag <BR> digunakan dengan atribut CLEAR untuk menghasilkan skrin menatal ke bawah sedikit supaya tiada imeg terapung terhasil. <BR CLEAR=LEFT> bergerak ke kiri melepasi imeg terapung, <BR CLEAR=RIGHT> bergerak ke kanan dan <BR CLEAR=ALL> menatal skrin supaya tiada imeg terapung terhasil.

STAIL-STAIL FON Dengan menggunakan tag-tag ini anda dapat mempastikan bagaimanakah cara teks yang anda akan hasilkan. Perlu diingatkan lagi, kesemua tag-tag ini memerlukan tag permulaan dan tag penutup kerana tag-tag ini akan mempengaruhi cara fon anda nanti. Jika anda ingin menghasilkan satu tajuk berbunyi "Laman Saya" dimana teksnya adalah tebal, tag yang akan digunakan adalah <B>LAMAN SAYA</B> dan menghasilkan LAMAN SAYA. Anda boleh juga menggunakan lebih dari satu kesan tetapi tagnya mestilah dikumpulkan, contohnya anda ingin menghasilkan fon tebal dan Italik, tag yang akan digunakan adalah <B><I>LAMAN SAYA</I></B> dan menghasilkan LAMAN SAYA. Antara tag-tag yang boleh anda gunakan adalah:-

<B>	Menghasilkan Teks tebal
<I>	Menghasilkan Teks Italik
<U>	Menghasilkan Teks bergaris bawah
<TT>	Menggunakan fon sama-ruang (singkatan bagi "Teletype")
<STRIKE>	Menghasilkan Teks dibatalkan
<BIG>	Menghasilkan Teks yang lebih besar
<SMALL>	Menghasilkan Teks yang lebih kecil
<SUB>	Menghasilkan Teks subskrip (digerak ke bawah)
<SUP>	Menghasilkan Teks superskrip (digerak ke atas)

Walau bagaimanapun terdapat beberapa tag yang menerangkan kesan am yang dapat membantu pelayar web menentukan paparan sebenar iaitu :-

<EM>	Menghasilkan Teks yang dititikberatkan, biasanya dalam cetak italik
<STRONG>	Menghasilkan Teks yang akan ditonjolkan, biasanya dalam cetak tebal
<DFN>	Menghasilkan Teks menunjukkan definisi-definisi
<CODE>	Menggunakan ekstrak kod atur cara
<SAMP>	Menggunakan sample output dari sesuatu atur cara
<KBD>	Menghasilkan Teks yang akan ditaip oleh pengguna (keyboard)
<VAR>	Menggunakan pembolehubah dalam fungsi-fungsi atur cara
<CITE>	Menggunakan petikan dan rujukan

SENARAI Di dalam dokumen HTML terdapat tag yang dapat menghuraikan jenis-jenis senarai yang berlainan. Setiap senarai mempunyai sintaksi asas yang sama cuma berbezaannya adalah cara bagaimana ia di paparkan. Ia sangat berguna jika anda ingin memaparkan senarai-senarai kandungan contohnya. Terdapat 2 cara tag senarai dapat diadakan, iaitu

1. SENARAI TAK TERATUR Jenis "Senarai Tak Teratur" adalah cara yang paling mudah dibina kerana elemen-elemen dalam senarai yang akan dibina nanti tidak perlu diatur dan selalunya dipaparkan sebagai satu poin bulet. Tag <UL> dan </UL> akan digunakan di dalam "Senarai Tak Teratur" dan didalam setiap elemen pula akan menggunakan tag <LI>. Contohnya seperti berikut :- <UL> <LI>Bahagian 1 <LI>Bahagian 2 <LI>Bahagian 3 <UL> <LI>Bahagian 3.1 <LI>Bahagian 3.2 </UL> Akan menghasilkan :-   Bahagian 1 Bahagian 2 Bahagian 3 Bahagian 3.1 Bahagian 3.2

1. SENARAI TERATUR Jenis "Senarai Teratur" adalah serupa dengan jenis "Senarai Tak Teratur" cuma elemen-elementnya dinomborkan. Dengan menggunakan senarai jenis ini, pelayar web akan menghasilkan penomboran untuk anda. Contohnya seperti berikut :- <OL> <LI>Bahagian 1 <LI>Bahagian 2 <LI>Bahagian 3 <OL> <LI>Bahagian 3.1 <LI>Bahagian 3.2 </OL> Akan menghasilkan :-   Bahagian 1 Bahagian 2 Bahagian 3 Bahagian 3.1 Bahagian 3.2

GARIS MENGUFUK Anda boleh menghasilkan satu garis mengufuk yang merintangi skrin didalam dokumen HTML anda iaitu menggunakan tag <HR> (Horizontal Rule). Terdapat beberapa atribut juga digunakan, iaitu

ALIGN	Dengan menggunakan atribut ini anda boleh menyatakan dimana garis mengufuk tersebut akan di letakkan samada LEFT, RIGHT atau CENTER. Walau bagaimanapun atribut ini tidak akan mendatangkan kesan yang sepatutnya kecuali jika atribut WIDTH diubah (rujuk atribut WIDTH).
NOSHADE	Pada kebiasaannya, garis HR akan menghasilkan bayang yang membuatnya kelihatan seperti berikut :- Anda boleh menggunakan <HR NOSHADE> supaya garis tersebut menghasilkan garis seperti berikut :-
SIZE	Atribut ini digunakan untuk menerangkan ketebalan garis dalam ukuran piksel. Contohnya seperti di bawah, saya menggunakan <HR SIZE=6> iaitu piksel 6.
WIDTH	Atribut WIDTH akan digunakan untuk menerangkan panjang garis mengufuk (HR). Panjang tersebut boleh digunakan dengan 2 cara, iaitu <HR WIDTH=75> untuk garis yang mempunyai 150 piksel seperti di bawah atau <HR WIDTH="80%"> akan menetapkan panjang garis tersebut kepada ukuran 80% daripada lebar skrin. Contohnya :-

Kembali ke Petunjuk

IMEG

Di dalam bab imeg ini, saya akan menerangkan bagaimanakah untuk mendapatkan hasil imeg yang baik dan menggunakan imeg yang anda hasilkan atau anda muat turun.

Bagaimana untuk mendapatkan imeg yang baik

Anda tentu sering tertanya apabila anda telah melawati beberapa halaman peribadi kawan-kawan anda ; "Bagaimana dia dapat menghasilkan imeg yang begitu menarik?". Sebenarnya adalah mudah untuk mendapatkan hasil imeg yang baik dapat anda hasilkan dan dapat dikendalikan oleh komputer anda. Jika anda perolehi fail imeg dengan menggunakan pakej seni komputer pastinya boleh dibaca dengan komputer dan anda hanya perlu menukar format fail imeg anda kepada format GIF atau JPEG ( Pelayar World Wide Web boleh menangani pelbagai format fail imeg, tetapi pada masa kini kedua-dua format tersebut adalah yang paling sering di gunakan). Sekiranya anda mempunyai bepuluh gulung nagatif gambar di mana di dalamnya terdapat beratus gambar yang anda rasakan sesuai untuk anda pamerakan di dalam laman web anda contohnya, anda boleh menyimpankan kesemua gambar-gambar tersebut di dalam cakera padat. Kini dengan adanya teknologi moden anda boleh berbuat demikian dengan mengunjungi kedai-kedai foto. Kini salah sebuah jenama filem yang terkemuka antarabangsa (Kodak®) telah mempunyai teknologi dimana gambar-gambar di dalam nagatif anda dapat di pindahkan kedalam bentuk CD-ROM. Setelah anda menghantar nagatif-nagatif anda, di dalam beberapa hari anda akan memperolehi satu CD yang mengandungi gambar-gambar anda. Sisipkan saja CD anda ke dalam pamacu CD anda dan gunakan perisian yang sesuai untuk anda menukar ke format GIF atau JPEG.

Satu lagi cara adalah dengan menggunakan alat pengimbas (Scanner). Terdapat 2 jenis pengimbas iaitu alas datar (flat-bed scanner) atau penggelek (roller scanner) - saya tidak mencadangkan anda menggunakan jenis penggelek kerana ianya tidak memberi kualiti yang memuaskan.

Satu lagi pilihan adalah dengan menggunakan kamera digital. Pada amnya kemera digital adalah sama dengan kamera biasa, cuma kamera digital tidak memerlukan filem untuk mengwujudkan sesuatu imeg. Kamera ini akan menggunakan memori kemudian anda hanya perlu menyambungkan kemera ini kepada komputer anda untuk memindahkan imej-imej yang ujud ke dalam cekera keras anda.

Tag <IMG> Untuk menyisipkan sesuatu imeg ke dalam dokumen HTML anda, tag <IMG> akan digunakan. Tag ini akan disisipkan hanya pada permulaan kerana tag ini tiada tag penutup. Walau bagaimanapun beberapa atribut-atribut boleh di gunakan iaitu :-

SRC	Atribut ini adalah arahan untuk memberi nama fail yang mengandungi imeg. Pada kebiasaannya hanya nama fail sahaja yang akan diberi, tetapi anda juga boleh memasukan satu URL penuh dimana-mana imeg tersebut boleh didapati di dalam internet. Tetapi saya tidak mencadangkan anda menggunakan cara tersebut kerana kemungkinan imeg tersebut tidak dapat dicapai ( laman anda tidak dapat memapar imeg tersebut dengan baik) atau kemungkinan tapak URL tersebut berubah atau tidak disenaraikan lagi. Oleh itu halaman anda tidak akan memberi hasil yang baik. Sebagai contohnya, saya menggunakan <IMG SRC="anaku.gif"> akan menghasilkan Saya dan anak kembar saya
ALT	Atribut ini digunakan untuk memberi nilai teks penerangan untuk sesuatu imeg. Terdapat beberapa sebab tag ini digunakan, Pertama, anda dapat memberi mesej kepada pengguna web dimana sesuatu imeg di tempatkan sehingga imeg dimuat turun, jadi halaman anda akan dapat memberi keterangan secepat mungkin. Kedua, tidak semua pengguna web dapat memuat turun imeg itu. Ini adalah mungkin disebabkan sambungan talian internetnya yang lambat atau pelayar web mereka tidak dapat memaparkan imeg. Maka jika anda tidak menggunakan tag ini, halaman anda tidak memberi makna kepada sesetengah pengguna.
HEIGHT, WIDTH	Kedua-dua tag ini digunakan untuk menentukan nilai ketinggian dan kelebaran imeg yang akan anda paparkan nanti (dalam ukuran piksel). Setelah anda memberi nama fail imeg yang akan dipaparkan nanti, dengan meletakan tag tersebut halaman anda akan kelihatan lebih menarik di lihat dan lebih kemas. Sekiranya imeg yang akan anda paparkan nanti tidak mempunyai tag-tag ini, imeg yang akan anda paparkan nanti kemungkinan terlalu besar untuk dipaparkan dan juga memberi kesulitan kepada pengguna web nanti. Contohnya saya gunakan <IMG SRC="anaku.gif" WIDTH=150 HEIGHT=102> akan menghasilkan :- Saya dan anak kembar saya, imeg di kecilkan
ALIGN	Atribut ini digunakan untuk menerangkan bagaimana imeg yang akan anda paparkan harus dijajarkan bersama teks dipersekitarannya. Terdapat beberapa seting yang boleh digunankan, iaitu:-

ALIGN=TOP	Seting memberi arahan bahagian teratas imeg akan dijajarkan dengan bahagian teratas garis imeg ditempatkan. Saya dan anak kembar saya
ALIGN=BOTTOM	Seting memberi arahan bahagian terbawah imeg akan dijajarkan dengan bahagian terbawah garis imeg ditempatkan. Saya dan anak kembar saya
ALIGN=CENTER	Seting memberi arahan mempertengahkan imeg yang akan dijajarkan dengan teks disebelahnya. Saya dan anak kembar saya
ALIGN=LEFT	Seting ini memberi arahan meletakkan imeg pada margin kiri dan teks pula disusun di sebelah kanan. Saya dan anak kembar saya. Teks ini berada pada sebelah kanan gambar kami.
ALIGN=RIGHT	Seting ini memberi arahan meletakkan imeg pada margin kanan dan teks pula disusun di sebelah kiri. Saya dan anak kembar saya. Teks ini berada pada sebelah kiri gambar kami.

Kembali ke Petunjuk

BINGKAI

Pada kebiasaanya semua dokumen HTML memaparkan satu dokumen tunggal. Tetapi dengan menggunakan bingkai, dokumen HTML anda boleh membahagikan tetingkap pelayar web utama kepada beberapa anak tetingkap yang dikenali sebagai "bingkai". Di mana setiap bingkai mempunyai bar tatal yang berasingan. Setiap bingkai mengandungi dokumen HTML dan pautannya sendiri. Dengan menggunakan bingkai, dokumen yang akan dipaparkan akan mempengaruhi bingkai yang lain. Selalunya penggunaan bingkai adalah sebabkan untuk membenarkan anda meletakan kesemua pautan-pautan yang anda bina di sesuatau bingkai yang tidak menatal. Dengan ini jika pelawat web anda akan mudah untuk mencapai pautan-pautan tersebut walaupun beliau berada didokumen HTML yang diasingkan. Tetapi anda harus berhati-hati jika ingin menggunakan bingkai kerana terdapat beberapa sebab yang akan anda hadapi nanti. Pertama, dokumen yang mengandungi bingkai adalah lambat sedikit untuk dipaparkan kerana setiap bingkai adalah satu fail HTMLnya tersendiri untuk dipaparkan dari pelayan (Server). Cuba anda bayangkan jika anda mempunyai 3 bingkai yang perlu di paparkan dan di setiap bingkai mengandungi pautan-pautan dan imeg. Kedua, bukan semua pelayar web mampu untuk memaparkan atau mengendalikan bingkai. Oleh itu untuk tidak menghampakan pelawat anda, terpaksalah anda membina satu dokumen HTML tunggal pula untuk pelawat web anda yang tidak dapat mengendali bingkai. Disebabkan inilah tidak ramai pengguna Internet tidak gemarkan bingkai. Tetapi tidak salah anda menggunakan bingkai jika anda dapat rasakan anda perlukan bingkai.

Pada amnya sesuatu dokumen berbingkai adalah sama dengan dokumen HTML yang anda kenali cuma kelainannya adalah dokumen berbingkai tidak mempunyai tag BODY tetapi digantikan oleh tag <FRAMESET> yang menyenaraikan dokumen HTML yang terkandung didalam halaman tersebut.

Tag <FRAMESET> Tag ini merupakan bekas utama bagi dokumen berbingkai. Diantara tag <FRAMESET> dan </FRAMESET>, anda boleh menggunakan tag-tag seperti FRAMESET, FRAME atau NOFRAME. Sekiranya tag-tag biasa bagi BODY digunakan diantara tag FRAMESET , perintah FRAMESET akan diabaikan. Tag FRAMESET mempunyai 2 atribut, iaitu :-

ROWS

Atribut ini adalah dinilaikan dengan siri nilai yang dipisahkan dengan koma. Nilai-nilai ini adalah untuk menentukan cara skrin dibahagikan kepada beberapa bingkai. Terdapat tiga cara untuk menyatakan nilai-nilai ini dan anda juga boleh mengabungkannya dalam satu atribut ROWS. Cara yang termudah adalah membubuhkan satu nombor, iaitu ketinggian bingkai dalam ukuran piksel. Saya tidak mencadangkan anda menggunakan cara ini kerana tidak semua skrin komputer pengguna web mempunyai piksel yang sama. Skrin komputer anda mungkin mempunyai ketinggian 480 piksel dan kelebaran 600 piksel tetapi ini tidak bermakna skrin komputer pengguna yang lain adalah sama. Cara yang kedua adalah dengan meletakan saiz sebagai nilai peratus, iaitu saiz bingkai akan ditentukan dengan peratusan saiz daripada ruang yang ujud di skrin komputer. Cara yang terakhir adalah dengan menggunakan bingkai "bersaiz relatif". Dengan menggunakan tanda " * " untuk saiz bingkai, bingkai itu akan diberikan mana-mana ruang tertinggal setelah semua bingkai peratusan atau bingkap tetap telah ditentukan. Ruang tertinggal akan dibahagikan di antara sebarang bingkai bersaiz relatif. Dengan meletakan satu nombor di depan "*" supaya bingkai itu diberi bahagian yang lebih besar daripada ruang yang tertinggal. Misalnya, "2*,*" mentakrifkan dua bingkai, satu mengambil 2/3 daripada ruang yang wujud dan yang satu lagi mengambil 1/3. Contoh tag FRAMESET: <FRAMESET ROW="10%,*"> Ini mentakrifkan dua bingkai. Satu mengambil 10% daripada ketinggian tetingkap di bahagian atas dan satu lagi mengambil bahagian yang tertinggal. <FRAMESET ROW="30,*,2*,15%"> Ini pula menghuraikan empat bingkai. Bingkai teratas mempunyai 30 piksel, bingkai terbawah mengambil 15% daripada tetingkap dan dua bingkai yang lain mengambil bahagian yang tertinggal mengikut kadar 2/3 dan 1/3.

COLS

Aribut ini mempunyai sintaksis yang sama dengan atribut ROWS tetapi membahagikan skrin anda secara menegak. Sesuatu tag FRAMESET boleh mengandungi atribut ROWS atau COLS tetapi tidak kedua-duanya. Untuk mewujudkan pembahagian mendatar dan menegak pada halaman yang sama, letakan tag FRAMESET yang kedua di dalam tag yang pertama. Katakan anda ingin mengadakan bingkai di sepanjang tepi kiri skrin selebar 100 piksel dan juga ingin menetapkan satu kotak besar di bahagian atas sebelah kanan untuk meletakan maklumat utama halaman anda dan satu kotak kecil di bawahnya untuk sebarang ulasan. Anda akan menggunakan HTML berikut: <FRAMESET COLS="100,*"> <FRAME> <FRAMESET ROWS=",20%"> </FRAMESET> </FRAMESET>

Tag <FRAME> Tag ini menghuraikan bingkai individu di dalam satu tag <FRAME>. Tag ini bukanlah sebuah bekas, jadi tiada tag penutup </FRAME> diperlukan. Tag <FRAME> mempunyai beberapa atibut, iaitu :-

SRC	Nilai atribut SRC ialah URL bagi fail HTML yang akan diletakan dalam bingkai itu nanti. Sekiranya tiada atribut SRC, pelayar web akan memaparkan bingkai yang kosong.
NAME	Aribut ini digunakan untuk menamakan sesuatau bingkai supaya bingkai itu boleh dialamatkan melalui pautan dalam dokumen-dokumen yang lain. Pada kebiasaannya atribut ini di dalam bingkai yang lain tetapi di dalam tetingkap yang sama. Saya akan menerangkan pautan ini di dalam bab atibut TARGET nanti.
SCROLLING	Aribut ini digunakan untuk menentukan sama ada bingkai itu mempunyai bar tatal atau tidak. SCROLLING=Yes digunakan untuk menentukan bingkai tersebut akan mempunyai bar tatal. SCROLLING=No digunakan untuk menentukan bingkai tersebut tidak akan mempunyai bar tatal. SCROLLING=Auto digunakan untuk menentukan bingkai tersebut akan mempunyai bar tatal atau tidak, bergantung kepada pelayar web untuk menentukan. Sekiranya anda tidak menetapkan nilai atibut SCROLLING, nilainya akan dianggap sebagai Auto.
NORESIZE	Biasanya pengguna web dapat mengubah saiz bingkai dokumen HTML individu dengan meheretkan tetikus. Sedah tentulah anda tidak mahu pelawat web anda melakukannya, dengan menetapkan atribut NORESIZE bingkai di dalam dokumen HTML anda tidak dapat diubahkan.

Tag <NOFRAME> Bagi sesetengah pengguna web yang melawat halaman anda, mungkin tidak mempunyai pelayar web yang tidak sanggup mengendalikan bingkai. Oleh itu anda perlulah meletakan kod HTML antara tag <NOFRAME> dan </NOFRAME> untuk mempersembahkan maklumat yang sama tanpa bingkai bagi halaman tanpa bingkai. Jika pelayar web pelawat tersebut boleh mengendalikan bingkai, tag <NOFRAME> akan diabaikan. Manakala bagi pelayar web yang tidak mengendalikan bingkai, akan hanya boleh memaparkan kandungan tag ini sahaja.

Atribut <TARGET> Biasanya di dalam HTML, apabila anda mengklik sesuatu pautan, hasil pautan itu akan dipamerkan dalam tetingkap yang sama. Tetapi jika anda mempunyai dokumen berbingkai, kita perlu mengarahkan pelayar web bahawa hasil pautan tersebut harus dipamerkan di dalam tetingkap yang berlainan. Anda boleh berbuat demikian dengan set sambungan HTML yang melibatkan atribut TARGET. Pelbagai keadaan anda boleh menggunakan di dalam sambungan TARGET (misalnya, anda boleh membuka satu lagi tetingkap pelayar web yang bertindak sebagai "kawalan jarak jauh") tetapi ia paling berguna apabila diguna bersama bingkai. Sambungan TARGET terdiri daripada dua bahagian. Pertama:- anda perlu menamakan tetingkap dan Keduanya:- anda perlu mengarahkan pelayar web bahawa keputusan bagi sesuatu permintaan harus ditujukan ke tetingkap yang dinamakan.

Menamakan tetingkap Ada 3 cara untuk menamakan tetingkap. Pertamanya, dokumen boleh dihantar bersama pengepala HTTP ini: Windows-target: nama-tetingkap Kedua, jika sesuatu dokumen diperolehi melalui satu pautan dengan atribut TARGET ditetapkan, sebuah tetingkap dengan nama itu akan dicipta sekiranya ia belum wujud. Dan cara ketiga yang paling penting, menetapkan atribut NAME bagi tag FRAME dan nama itu akan dijadikan nama tetingkap bingkai itu. Menggunakan atribut TARGET dalam satu pautan Anda boleh menggunakan atribut TARGET dalam pelbagai tag HTML. Dalam setiap kes ini, nilai atribut TARGET haruslah merupakan nama tetingkap yang diperlukan. TARGET dalam tag A Atribut TARGET boleh ditambah kepada tag sauh biasa. Apabila sauh itu diklik, dokumen yang berkenan akan muncul dalam tetingkap yang dinamakan. TARGET dalam tag BASE Anda harus menggunakan pendekan ini jika semua (atau kebanyakan) pautan dalam satu dokumen harus dimasukan ke sesuatu tetingkap. <BASE TARGET="indek"> bermakna semua pautan dalam dokumen itu yang atribut TARGETnya tidak ditetapkan akan dipaparkan ke dalam satu tetingkap yang bernama "indek". TARGET dalam tag AREA Jika anda menggunakan tag MAP bagi peta imeg jenis pelanggan, tag AREA akan digunakan. Apabila tempat panas yang ditetapkan oleh tag AREA diklik, dokumen terpaut itu akan dipaparkan dalam tetingkap yang dinamakan oleh tag TARGET. TARGET dalam tag FORM Tag FORM digunakan untuk mentakrifkan sebuah borang. Atribut TARGET akan menyebabkan keputusan dari penyerahan borang dipaparkan dalam tetingkap yang dinamakan.

Nama-nama TARGET Nama yang anda berikan mestilah bermula dengan satu huruf atau satu nombor. Di samping itu, terdapat beberapa nama khas yang boleh anda gunakan. Semua nama ini bermula denga satu garis bawah "_". Iaitu:-

TARGET="_blank"	Pautan ini akan dipaparkan di dalam tetingkap baru yang tiada nama.
TARGET="_self"	Keputusan pautan ini akan dimuatkan ke dalam tetingkap yang sama dengan tetingkap di mana pautan dipaparkan.
TARGET="_parent"	Keputusan pautan ini akan dipaparkan dalam induk kepada tetingkap semasa. Ini bermakna jika tetingkap semasa adalah bingkai, ia akan dipaparkan dalam tetingkap bagi dokumen FRAMESET yang mengandungi tag FRAME ini. Jika tetingkap semasa tiada induk, ia akan dianggap sebagai satu TARGET="_self"
TARGET="_top"	Pautan ini akan dipaparkan dalam tetingkap penuh pelayar web, tidak kira berapa lapis tag FRAMESET yang wujud.

Kembali ke Petunjuk

JADUAL

Bagi sesetengah orang, untuk menghasilkan jadual di dalam dokumen HTML adalah rumit, tetapi sebenarnya adalah mudah untuk di lakukan. Ini adalah disebabkan sebahagian besar daripada HTML terhasil apabila sekumpulan orang menambah pelbagai ciri kepada satu bahasa yang pada dasarnya amat mudah. Terdapat beberapa struktur HTML yang tersarang dalam satu sama lain untuk menghasilkan jadual. Seluruh jadual terkandung antara tag <TABLE> dan </TABLE>. Pasangan tag ini boleh mengandungi: Tag <CAPTION> yang opsyenal; Satu atau lebih tag <TR> (Table Row/Baris Jadual), satu untuk setiap baris. Setiap baris jadual boleh mengandungi: Satu atau lebih tag <TH> (Table Heading/Tajuk Jadual) atau tag <TD> (Table Data/Data Jadual), satu untuk setiap lajur dalam jadual. Setiap tag ini boleh mengandungi: Kod HTML biasa bagi kandungan sel-sel jadual.

Untuk setiap satu daripada tag ini boleh mempunyai pelbagai atribut yang menentukan rupa bentuk dan susun atur jadual. Setengah atribut ini boleh wujud dalam beberapa tag yang berlainan, ini adalah bergantung kepada anda sendiri menentukannya. Tag <TABLE> mengandungi keseluruhan jadual. Tag ini boleh mengandungi atibut-atribut berikut:

ALIGN	Nilai atribut ALIGN boleh terdiri daripada nilai LEFT, CENTER atau RIGHT yang akan menetapkan jajaran keseluruhan jadual dalam tetingkap pelayar web dan bukan jajaran teks dalam sel-sel jadual. Biasanya jadual dijajarkan ke kiri melainkan jadual itu sendiri adalah di dalam tag DIV atau CENTER yang menetapkan jajaran lain.
WIDTH	Atribut ini digunakan untuk menentukan kelebaran jadual anda nanti. Anda boleh menyatakan kelebaran itu dalam dua cara iaitu, <TABLE WIDTH=150> akan menghasilkan jadual dengan lelebaran 150 piksel dan <TABLE WIDTH="85%"> akan menghasilkan jadual selebar 85% daripada kelebaran tetingkap pelayar web. Sekiranya anda tidak membekalkan satu nilai untuk atribut ini, kelebaran jadual anda nanti akan ditetapkan mengikut kelebaran kandungannya.
BORDER	Aribut ini digunakan untuk menentukan kelebaran sempadan di sekitar jadual dalam piksel. Sekiranya anda tidak menetapkan satu nilai, jadual tersebut tidak akan mempunyai sempadan. <TABLE BORDER=1> mentakrifkan sebuah jadual dengan sempadan satu piksel.
CELLSPACING	Atribut ini menetapkan kelebaran sempadan diantara sel-sel jadual, serta sempadan antara sel-sel tepi dengan sempadan jadual sendiri. Biasanya nilainya aialah 1 melainkan anda menetapkan CELLSPACING=0.
CELLPADDING	Ini menetapkan ruang yang ditinggalkan antara sempadan dan kandungan setiap sel.
BGCOLOR	Bukan semua pelayar web dapat mengenali atribut warna ini. Bagi yang dapat mengenalinya, atribut ini akan menetapkan warna latar belakang untuk jadual. Sila rujuk kembali tag <BODY BGCOLOR> untuk menentukan nilai-nilai atribut ini.

Baris-baris jadual Setiap baris di dalam jadual haruslah terkandung dalam satu tag <TR> - iaitu antara satu <TR> dan satu </TR>. Tag ini boleh mempunyai atribut-atribut berikut:

ALIGN	Nilai atribut ALIGN boleh terdiri daripada nilai LEFT, CENTER atau RIGHT yang akan menetapkan jajaran mengufuk bagi kandungan sel-sel dalam baris ini.
VALIGN	Nilai atribut VALIGN boleh terdiri daripada TOP, MIDDLE atau BOTTOM yang akan menentukan jajaran tegak bagi kandungan sel dalam baris ini.
BGCOLOR	Bukan semua pelayar web dapat mengenali atribut ini. Bagi yang dapat mengenalinya, atribut ini akan menetapkan warna latar belakang untuk jadual. Sila rujuk kembali tag <BODY BGCOLOR> untuk menentukan nilai-nilai atribut ini.

Sel-sel jadual Setiap sel dalam satu baris jadual perlu dikandung dalam satu tag sel. Terdapat 2 jenis tag sel, iaitu <TH> Tag ini digunakan untuk sel yang kandungannya ialah satu tajuk. Teks dalam sel <TH> tidak tertera sama seperti teks dalam sesuatu sel data; biasanya fon tebal digunakan dan teksnya diketengahkan. <TD> Tag ini digunakan untuk sel-sel yang mengandungi data. Inilah tag yang biasa digunakan untuk sel. Kedua-dua tag <TH> dan <TD> diguna sebagai bekas, iaitu kandungan sel merupakan teks antara tag <TH> dan <TD>. Walaupun begitu, tag akhir tidak semestinya diperlukan sekiranya maksudnya jelas, anda boleh meninggalkannya. Tag-tag ini boleh mempunyai atribut-atibut seperti berikut;-

NOWRAP	Atribut ini membatalkan ciri lilitan kata dalam sel, supaya teks tidak ke baris baru tetapi dipaparkan dalam satu baris sahaja. Ini amat berguna untuk memastikan sesuatu lanjur adalah cukup lebar.
ROWSPAN	Nilai bagi atribut ini ialah satu nombor lebih besar daripada satu. Jika anda menetapkan atribut ini, maka sel itu akan terbentang merintangi bilangan baris yang dinyatakan. Saya akan menerangkan lebih lanjut pada bab "Sel diperkembangkan" nanti.
COLSPAN	Atribut ini berfungsi seperti ROWSPAN kecuali kini sel itu merangkumi bilangan lanjur yang ditetapkan.
ALIGN	Nilai atribut ALIGN boleh terdiri daripada nilai LEFT, CENTER atau RIGHT yang akan menetapkan jajaran mendatar bagi kandungan sel. Nilai ini juga akan mengatasi nilai yang ditetapkan oleh sesuatu atribut ALIGN dalam tag <TR> jika ada.
VALIGN	Nilai atribut VALIGN boleh terdiri daripada TOP, MIDDLE atau BOTTOM yang akan menentukan jajaran tegak bagi kandungan sel. Nilai ini juga akan mengatasi sesuatu atribut VALIGN yang ditetapkan dalam tag <TR>. Sekiranya anda tidak menetapkan nilai VALIGN untuk sel ataupun baris, anda mungkin terkejut melihat hasilnya; nilai VALIGN=MIDDLE akan digunakan, iaitu kandungan sel akan diketengahkan antara tepi atas dan tepi bawah sesuatu sel.
WIDTH	Atribut ini mencadangkan kelebaran sel dalam piksel. Ini tidak termasuk sebarang ruang CELLPADDING yang ditetapkan dalam tag TABLE. Jika CELLPADDING ditetapkan, maka kelebaran sel yang sebenar ialah WIDTH + CELLPADDING*2.
HEIGHT	Atribut ini mencadangkan ketinggian sel dalam piksel, juga tanpa termasuknya ruang CELLPADDING. Kekangan ke atasnya adalah sama dengan atribut WIDTH.
BGCOLOR	Bukan semua pelayar web dapat mengenali atribut ini. Bagi yang dapat mengenalinya, atribut ini akan menetapkan warna latar belakang untuk sel. Sila rujuk kembali tag <BODY BGCOLOR> untuk menentukan nilai-nilai atribut ini.

Kandungan sel Hampir sebarang kod HTML boleh diletakkan didalam tag <TD> atau <TH>, seperti imeg, sauh, jadual, peranggan dan bermacam-macam kod lagi. Anda harus ingat bahawa kandungan sesuatu sel adalah sebagai satu dokumen HTML tersendiri. Jika anda menggunakan saiz fon atau warna yang tidak standard, anda perlu menyatakannya dalam setiap sel kerana ciri-ciri ini tidak disampaikan dari sel ke sel. Di sebaliknya, elemen HTML yang lain boleh merangkumi lebih daripada satu sel.

Sel diperkembangkan Biasanya sebuah jadual terdiri daripada sel-sel dalam grid segi empat tepat, dengan bilangan sel yang sama dalam setiap baris dan semua bucu segi diselarikan. Ada kalanya, anda tidak ingin jadual dibentang sebegitu. Misalnya, anda mungkin ingin tajuk jadual merangkumi sebilangan baris atau lajur. Anda boleh menghasilkan kesan tersebut dengan atribut COLSPAN dan ROWSPAN. Sekiranya anda memulakan sesuatu sel dengan <TD COLSPAN=2>, sel tersebut akan berkembang untuk menduduki ruang lajur itu serta lajur di sebelah kanannya. Maka baris jiran itu harus mempunyai satu tag <TD> kurang. Sekiranya anda menggunakan <TD ROWSPAN=2>, sel itu akan berkembang dan memenuhi sel tepat di bawahnya pada baris seterusnya. Dalam kes ini, baris itu harus mempunyai satu tag <TD> kurang daripada biasa. Berhati-hatilah semasa menggunakan kesan ini. Mudah sahaja anda lupa untuk meninggalkan satu sel untuk menyediakan ruang bagi sesuatu sel diperkembangkan dan ini akan menghasilkan satu "lajur khayalan" di sebelah kanan jadual. Anda mungkin juga menghasilkan dua sel bertindih. Ini tidak dibenarkan dan hasilnya sukar diramalkan.

Kembali ke Petunjuk

©Copyright Marzuki Mohd Hashim 1998®™

25hb Oktober 1998