MEMBINA LAMAN WEB 2

Pelajaran 1
Pelajaran 2
Pelajaran 3
Pelajaran 4
Pelajaran 5
Pelajaran 6


ASAS HTML
Pelajaran 1

Langkah permulaan, buka Notepad dan mulakan satu fail baru dengan menulis ini:-

 <HTML>
</HTML>

 Setiap sesuatu pernyataan di atas dinamakan "tag". Yang pertama dinamakan tag pembuka < > dan yang kedua sebagai tag penutup </ >. Yang berbeza ialah tag penutup mempunyai tanda  / . Kebanyakan tag pembuka, tetapi tidak semua,  mempunyai tag penutup.

 Tag-tag ini memberi arahan kepada browser. Seperti contoh tadi, anda memberitahu kepada browser bahawa `di sini mulanya dokumen HTML' (<HTML>) dan 'di sini berakhirnya dokumen HTML ' (</HTML>). Sekarang segala bahan yang lain ditulis di antara kedua-dua tag pembuka dan tag penutup tersebut.


Setiap dokumen HTML pasangan tag kepala iaitu HEAD.

 <HTML>
<HEAD>
</HEAD>
</HTML>


Perkara yang perlu kita ingat di kepalanya pula ialah wujudnya tag tajuk iaitu TITLE.

 <HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>


Dan isi kandungan laman web tersebut akan duduk di dalam tag BODY.

 <HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>


Kita mulakan dengan memberikan dokumen tadi dengan satu tajuk.

<HTML>
<HEAD>
<TITLE>Laman Pertama Saya!</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Sekarang, simpanlah ia, tetapi bukan sebagai dokumen teks, sebaliknya sebagai sebuah dokumen html. Simpan ia sebagai ms1.html di dalam sebuah folder baru. Jika anda kurang faham bagaimana hendak melakukannya, cuba ikut langkah-langkah ini (Win95/Win98)...

Di dalam tetingkap Notepad anda, klik File, kemudian diikuti dengan  Save as.
Anda akan ternampak sebuah kotak dialog. Buat satu folder baru dengan mengklik ->
Namakannya dengan apa-apa nama. Kemudian dwi-klik di atas folder itu untuk membukanya. Apabila ia bertanyakan File name: taipkan ms1.html Dan apabila ia bertanya Save as type: pastikan anda memilih All Files(*.*) dan bukannya txt file.
Tekan enter dan siap satu fail!

 Tahniah! Anda telah berjaya membuat satu fail laman web! Seandainya anda menentukan Netscape sebagai browser asasi, fail anda akan kelihatan seperti ini...

Anda boleh mendwi-kliknya, untuk melihat  hasil tugasan anda.

Malangnya, seperti yang anda lihat, laman itu kosong (namun jangan bimbang, ia tetap sebuah dokumen HTML yang sah!). Selepas ini, tugas kita bertambah besar iaitu memasukkan beberapa bahan lain ke dalam laman  tersebut.

Sebelum saya teruskan saya ingin mengingatkan dua perkara. SATU, apa yang anda lakukan tadi ialah rangka sebuah dokumen HTML. Ia ialah keperluan minima untuk sebuah dokumen web dan kesemua dokumen web yang lain mesti mengandungi perkara-perkara asas ini. Dan KEDUA, tajuk dokumen ialah apa yang akan tertera di atas sekali di sebelah kiri tetingkap  browser .


LATIHAN ULANGKAJI

1.     Lancarkan Notepad dan bina sebuah fail HTML berikut .

<HTML>
<HEAD>
<TITLE>
Ulangkaji pelajaran 1
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

 

2.     Simpan di dalam sebuah fail yang dinamakan fail1.html dan kemudian lancarkan di browser anda.


{ Go Back }


ASAS HTML
Pelajaran 2

Untuk mengelakkan kekeliruan di sini, saya hanya akan menumpukan tag <BODY> . Sementara tag-tag <HTML>, <HEAD> & <TITLE> ditinggalkan. Tetapi jangan pula padam atau lupa  untuk menulisnya setiap kali anda menulis fail html. Jika tidak fail HTML anda tidak menjadi sepenuhnya. 

Pastikan juga tag berikut masih terkandung di dalam fail html anda.

 <BODY>
</BODY>

Kesemua isi dan tag-tag lain akan ditulis di antara kedua-dua tag ini iaitu <BODY>
</BODY>.

 

PENTING
Jika anda telah membuka tag
<BODY> dan anda telah memasukkan sesuatu bahan atau tag-tag yang lain selepas itu, jangan terlalu gopoh untuk menutupnya dengan </BODY>. Ini kerana tag penutup </BODY> ditulis hanya jika fail HTML itu akan berakhir, ertinya anda sudah pasti bahawa tidak ada apa-apa lagi yang ditulis di dalam fail tersebut. Jika tidak, anda kena membuka/menulis semula tag  <BODY> pada setiap kali hendak memasukkan perkara baru, dan ianya tentulah menjenuhkan dan menyulitkan.

Taipkan sesuatu di antara tag pembuka dan tag penutup tersebut.

 <BODY>
Sesuatu yang menyeronokkan!
</BODY>
 
Sesuatu yang menyeronokkan!

Bila-bila saja anda mengubah dokumen anda, jangan lupa menyimpannya dan kemudian tekan butang RELOAD pada browser anda. Kadang-kala menekan butang tersebut tidak mendatangkan hasil yang dikehendaki, tetapi sebaliknya tekan SHIFT- Reload.


Saya kira  sudah sewajarnya kita belajar bagaimana untuk menukar warna latarbelakang.

<BODY BGCOLOR="#FFFFFF">
Sesuatu yang menyeronokkan!
</BODY>
 
Sesuatu yang menyeronokkan!
FFFFFF ialah kodganti bagi warna putih. Di sini anda akan perolehi beberapa kod lagi..
 

Di dalam mod 256 warna Netscape mengkelaskan kesemua imej kepada warna-warna ini. Seandainya warna latarbelakang yang ditentukan itu tidak ada di dalam senarai tersebut, Netscape lazimnya akan memilih warna yang terhampir untuk digunakan. Meskipun tidak berapa penting untuk mengetahui bagaimana browser dan warna berinteraksi di antara satu sama lain pada ketika ini, namun anda boleh melihat halaman yang dinyatakan tadi dan kembali semula ke sini selepas itu iaitu di 216 warna Netscape yang masyur.


Anda juga boleh memilih imej sebagai latarbelakang.

<BODY BACKGROUND="swirlies.gif">
Sesuatu yang menyeronokkan!
</BODY>
 

Ini imej latarbelakangnya


Anda akan dapati imej ini (swirlies.gif) di dalam folder yang serupa dengan folder fail html untuk pemudahan pembelajaran. Jika anda melihat tutorial ini melalui Netscape, anda boleh menyimpan imej ini dengan mengklik butang kanan tetikus anda di atas imej dan pilih Save Image As...


Kadang-kadang latarbelakang menjadi lebih menarik bila kita menggunakan imej berpetak seperti di bawah:-

 <BODY BACKGROUND="bluebar.gif">
Sesuatu yang menyeronokkan!
</BODY>
 

Inilah imej latarbelakangnya
 


Mari kita kembali ke halaman yang tidak menggunakan imej seperti yang mula-mula tadi, iaitu latarbelakang berwarna putih (FFFFFF).

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang menyeronokkan!
</BODY>
 
Sesuatu yang menyeronokkan!


Kita boleh menghasilkan huruf tebal (bold).

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <B>menyeronokkan!</B>
</BODY>
 
Sesuatu yang menyeronokkan!
Apa yang kita telah arahkan kepada browser ialah: di <B> mula hasilkan perkataan-perkataan huruf tebal sehinggalah di </B> di mana berhenti dari menghasilkan huruf tebal tersebut. 


Prinsip yang serupa digunakan terhadap huruf condong....

 <BODY BGCOLOR="#FFFFFF">
Sesuatu <I>yang</I> <B>menyeronokkan</B>
</BODY>
 
Sesuatu yang menyeronokkan


...dan bergaris-bawah.

 <BODY BGCOLOR="#FFFFFF">
<U>Sesuatu</U> <I>yang</I> <B>menyeronokkan!</B>
</BODY>
 

Sesuatu yang menyeronokkan!


Kembali semula ke skrin putih tadi.

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang menyeronokkan!
</BODY>
 
Sesuatu yang menyeronokkan!


Kita boleh gunakan tag-tag ini serentak di dalam satu kombinasi:-

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <I><B>menyeronokkan!</B></I>
</BODY>
 
Sesuatu yang menyeronokkan!
Ini ada satu contoh `tag bersarang' (nested tags). Jika anda ingin menggunakan kombinasi tag-tag, elakkan dari mengelirukan browser, dan dilakukan dengan sarang, bukan bertidih. Izinkan saya terangkannya...

    <INI><ITU></INI></ITU>    Tag-tag bertindih.... tidak bagus
   <INI><ITU></ITU></INI>   Tag-tag bersarang... bagus


Satu jenis kesan teks ialah apa yang dinamakan `mono-spaced font', atau TeleType.

 <BODY BGCOLOR="#FFFFFF">
<TT>Sesuatu yang menyeronokkan!</TT>
</BODY>
 
Sesuatu yang menyeronokkan!

Setiap satu huruf menggunakan jarak ruang melintang yang sama.
 
 

Ini ialah jenis biasa -> iiiiiiiiii
oooooooooo
mmmmmmmmmm
Ini ialah jenis monospaced -> iiiiiiiiii
oooooooooo
mmmmmmmmmm

Kita boleh menukar  saiz font  juga... Mudah saja!

 Pertama kita tambah tag <FONT>...

<BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT>menyeronokkan</FONT>
</BODY>

 Kemudian tentukan ciri SIZE.

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT SIZE=6>menyeronokkan</FONT>
</BODY>
 
Sesuatu yang menyeronokkan
Font mempunyai  7 saiz:

amat kecil kecil biasa sederhana besar amat besar &  paling besar!
1 2 3 4 5 6 7
Dua perkara yang ingin saya sentuh sekarang. Pertama, <TAG> mengarahkan browser untuk melakukan sesuatu. Sementara ATTRIBUTE masuk ke dalam<TAG> dan memberitahu bagaimana untuk melakukannya.
Perkara kedua ialah nilai mantap. Mungkin anda ketahui, nilai mantap ialah nilai yang browser mengandaikannya jika anda tidak memberitahu perkara-perkara lain.  Satu contoh yang baik ialah saiz font. Nilai mantapnya ialah 3. Jika anda tidak menentukan saiznya, maka nilainya ialah  3.

Setiap browser mempunyai ketentuan mantap sesuatu font - nama font, saiz dan warna. Kecuali jika ianya telah diubah nilai mantapnya ialah Times New Roman 12pt (yang di dalam penerangan saya ialah 3) dan warnanya hitam. Dengan penggunaan browser Netscape 3.0 dan ke atas kita boleh tentukan nama font selain dari nilai mantapnya seperti ARIAL dan COMIC SANS.

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT FACE="ARIAL">menyeronokkan!</FONT>
</BODY>
 
Sesuatu yang menyeronokkan!
Font ini akan hanya kelihatan jika pelayar web mempunyai font berkenaan di dalam komputernya. Izinkan saya ulangi... Jika sesiapa yang melayar web itu tidak mempunyai font yang anda telah tentukan di dalam laman web anda, maka mereka hanya akan dapat melihat nilai mantap sahaja. Jadi berhati-hati sewaktu membuat pilihan jenis font. Arial dan Comic Sans MS mungkin tidak menjadi masalah kerana ramai yang mempunyai kerana kedua-duanya terpasang di dalam Windows. Begitu juga  font bernama:- Impact!.
 
 

Satu lagi tag yang perlu dinyatakan di sini ialah tentang kepala bagi bahagian tertentu (section headings). Ia mempunyai 6 saiz dari1-6.

<H1>Sesuatu yang menyeronokkan</H1>
<H2>Sesuatu yang menyeronokkan</H2>
<H3>Sesuatu yang menyeronokkan</H3>
<H4>Sesuatu yang menyeronokkan</H4>
<H5>Sesuatu yang menyeronokkan</H5>
<H6>Sesuatu yang menyeronokkan</H6>
 

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan
Sesuatu yang menyeronokkan
 
Satu arahan lain ke atas kepala bahagian  ialah ALIGN...
<H2 ALIGN="left">Sesuatu yang menyeronokkan</H2>
<H2 ALIGN="center">Sesuatu yang menyeronokkan</H2>
<H2 ALIGN="right">Sesuatu yang menyeronokkan</H2>
 


Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sesuatu yang menyeronokkan

Sekarang tiba masanya untuk saya terangkan sedikit mengenai syntax. Anda perhatikan di sana sini saya gunakan tanda petikan (quotation marks), ini penting. Kesilapan yang kecil terutama di dalam menulis arahan akan menyebabkan arahan bercelaru dan laman web akan menjadi huru hara contohnya tertinggal satu tanda > .  Dan tentang penggunaan HURUF BESAR terhadap arahan-arahan di dalam tag. Ini tidak menjadi masalah kerana ia adalah pilihan peribadi sahaja kerana saya mendapati lebih kemas saya menulis arahan tag di dalam HURUF BESAR. Tidak menjadi kesalahan pula jika saya menulis <font> selain daripada <FONT>. Malah saya boleh menulis begini:- <fOnT> .
 

Anda boleh menukar warna font jika anda suka.

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT COLOR="#FF0000"menyeronokkan!</FONT>
</BODY>
 
Sesuatu yang menyeronokkan!


Kita boleh, menggunakan lebih dari satu ATTRIBUTE di dalam satu <TAG>...

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">menyeronokkan!</FONT>
</BODY>
 
Sesuatu yang menyeronokkan


Lagi!

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang<U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">menyeronokkan</FONT></B></I></U>
</BODY>
 
Sesuatu yang menyeronokkan
Saya kira perlu saya jelaskan sekali lagi tentang perlukan tag-tag yang bermacam-macam itu disarangkan.
 
 

<TAG3><TAG2><TAG1>Haaha!</TAG1></TAG2></TAG3>

Tak kira tag yang mana di tulis dahulu. Bagi contoh di atas anda boleh menulisnya begini:-
 

<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2>

Atau (tetapi yang ini bertindih),
 
 

<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2>


Satu perkara lagi sebelum tamat pelajaran ini ialah tenatang warna-warna capaian. Setiap browser mempunyai setting mantapnya untuk warna teks, warna capaian, warna capaian aktif dan warna capaian yang telah dilawati. Nilai mantapnya ialah...
 
 

Teks ialah hitam
Capaian ialah biru
Capaian aktif ialah merah
Capaian yang telah dilawati ialah ungu

Anda boleh menukarkannya di tag <BODY>.

 <BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
Sesuatu yang menyeronokkan!
</BODY>
 

Sesuatu yang menyeronokkan

Kadang-kadang kita perlu menukarkan warnanya supaya ianya dapat disesuaikan dengan latarbelakang yang kita gunakan dan begitu juga warna-warna capaian. Kita akan belajar perkara ini nanti di pelajaran akan datang di bab CAPAIAN.


    Tulisan berwarna kuning amat jelas di atas latarbelakang hitam.
    Capaian sekarang berwarna merah
    Capaian telah dilawati berwarna coklat
    Dan capaian aktif berwarna hijau.

 

Demikian! Anda telah ketahui tentang bagaimana memanipulasikan teks di dalam dokumen anda. Anda sekarang boleh menghasilkan Huruf merah yang besar atau huruf kecil yang tebal. Anda juga boleh menggunakan Font-font yang lain, atau font-font monospaced.
Malah anda  boleh menulis semacam satu  rollercoaster!

Kod untuk  roller coaster  di sini  jika anda berminat.


LATIHAN ULANGKAJI 

  1. Lancarkan Notepad dan bina sebuah fail HTML berikut .
<HTML>
<HEAD>
<TITLE>
Ulangkaji pelajaran 1
</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN<H1>
</BODY>
</HTML>

2.    Namakan fail anda, "fail2.html" dan perlihatkan di browser anda.

3.     Buka semula fail "fail2.html" di Notepad dan tukarkan kod BGCOLOR dengan BACKGROUND. (Pastikan anda telah terlebih dahulu menyimpan fail "swirlies.gif" di dalam direktori fail html anda).

 

<HTML>
<HEAD>
<TITLE>
Ulangkaji pelajaran 2
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN<H1>
</BODY>
</HTML>

4. Simpan semula fail2.html dan kemudian lancarkan di browser


{ Go Back }


ASAS HTML!
Pelajaran 3

Di sini kita akan mempelajari bagaimana browser melaksanakan tugasnya.
Pertama kita lihat contoh di bawah...

 <BODY BGCOLOR="#FFFFFF">
Sesuatu yang menyoronokkan
umpama berada di pesta!
</BODY>

Sesuatu yang menyeronokkan seperti berada di pesta!

<BODY BGCOLOR="#FFFFFF">
Hai!
Apa
yang
berlaku
di sini??
</BODY>

Hai! Apa yang berlaku di sini??

Browser tidak mengenali `formatting' kecuali ia diberitahu. Sekiranya tidak diberitahu ia akan memaparkan tulisan itu di dalam satu barisan panjang meskipun hasrat anda sebenarnya hendak menulis di dalam beberapa garisan, bukan satu. Jika anda ingin ke barisan lain, sila tentukan dengan menggunakan tag <BR>.

 <BODY BGCOLOR="#FFFFFF">
Hai!<BR>
Apa<BR>
yang<BR>
berlaku<BR>
di sini??
</BODY>

Hai!
Apa
yang
berlaku
di sini??

<BR> bermaksud- mula dengan baris baru. Satu lagi tag ialah <P>. Ia bertindak serupa dengan <BR> iaitu pergi ke barisan lain, tetapi tambah lagi satu baris kosong.

<BODY BGCOLOR="#FFFFFF">
Hai!<P>
Apa<P>
yang<P>
berlaku<P>
di sini??
</BODY>
 
Hai!

 Apa

 yang

 berlaku

 di sini??

<BR> dan <P> adalah contoh-contoh tag yang berdiri sendiri, maksudnya ia tidak perlu kepada tag penutup.

Bagaimana pula nak menjarakkan perkataan?

Cuba lihat...

 <BODY BGCOLOR="#FFFFFF">
Sesuatu        yang        menyeronokkkan
</BODY>

Sesuatu yang menyeronokkan

Browser tak mengenali ruang jarak yang melebihi satu kecuali di arahkan.

Terdapat satu kod kecil untuk arahan jarak ruang dan digunakan secara berturut-turut jika lebih besar jarak ruang yang hendak ditunjukkan iaitu ->  &nbsp;

 Kita cuba...

 <BODY BGCOLOR="#FFFFFF">
Sesuatu&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
yang&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
menyeronokkan
</BODY>

Sesuatu        yang        menyeronokkan

Tanda & bermaksud kita sedang memulakan satu simbol baru manakala ; bermaksud tamat penggunaan simbol tersebut. Terdapat enam simbol istimewa (Nota:- ia perlu ditulis di dalam huruf kecil)

Terdapat juga beberapa simbol istimewa yang lain untuk rujukan anda.

Mengketengahkan teks. Cuba lihat di bawah:-

 <BODY BGCOLOR="#FFFFFF">
<CENTER>Sesuatu yang menyeronokkan!</CENTER>
</BODY>

Sesuatu yang menyeronokkan!

Anda boleh ketengahkan satu huruf, perkataan, ayat atau keseluruhan halaman tertakluk dimana tag <CENTER> bermula dan di mana anda letakkan tag akhirnya </CENTER>.


Sekarang kita belajar bagaimana memasukkan imej ke dalam laman web. Kita gunakan imej ini sebagai contoh.
 

copper

Anda boleh tentukan pemasukan imej dengan tag <IMG>.

 <BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>


Kodnya:-

 <BODY BGCOLOR="#FFFFFF">
<IMG SRC="zura.jpg">
</BODY>
 
 

Seperti yang dipaparkan, imej itu akan bersaiz sama seperti imej sebenar. Cuba lihat pula yang ini:-

 <BODY BGCOLOR="#FFFFFF">
<IMG SRC="zura.jpg" WIDTH=200 HEIGHT=68>
</BODY>


<BODY BGCOLOR="#FFFFFF">
<IMG SRC="zura.jpg" WIDTH=20 HEIGHT=100>
</BODY>


Anda boleh menentukan sebarang ukuran yang sesuai untuk mengubah ukuran asal sesuatu imej. Dan ia ada kegunaannya. Cuba lihat contoh di bawah iaitu dengan satu titik merah yang kecil -> <-. Ia adalah segiempat tepat 2x2. Perhatikan apa yang berlaku...

<BODY BGCOLOR="#FFFFFF">
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2><P>
<IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P>
<CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER>
</BODY>


 

Sedikit nota tentang imej
Browser hanya mengenali imej yang berada di dalam format gif atau jpg. Jika anda menggunakan format yang lain ianya perlu ditukarkan ke dalam bentuk gif atau jpg. Hal ini akan diterangkan lebih lanjut di pelajaran akan datang.
 


LATIHAN ULANGKAJI 

  1. Lancarkan Notepad dan bina sebuah fail HTML berikut .

<HTML>
<HEAD>
<TITLE>
Ulangkaji Pelajaran  3
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN</H1>
<br>
<br>
<FONT COLOR="#FF0000" FACE="ARIAL" SIZE="4">Ini  adalah <B>pengalaman pertama</B> saya membina <U>Laman Web</U>!</FONT> 
<br>
<br>
<FONT COLOR="#000000" FACE="ARIAL" SIZE="4">Menjadi atau tidak, <I>kita tunggu dan lihat sebentar lagi</I></FONT> 
</BODY>
</HTML>


2.         Simpan fail dengan nama “fail3.html” dan lancarkan di browser anda.

3.         Buka semula fail “fail3.html” di Notepad dan tambahkan kod-kod berkenaan.

<HTML>
<HEAD>
<TITLE>
Ulangkaji Pelajaran 3
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN 1</H1>
<br>
<br>
<FONT COLOR="#FF0000" FACE="ARIAL" SIZE="4">Ini  adalah <B>pengalaman pertama</B> saya membina <U>Laman Web</U>!</FONT> 
<br>
<br>
<FONT COLOR="#000000" FACE="ARIAL" SIZE="4">Menjadi atau tidak, <I>kita tunggu dan lihat sebentar lagi</I></FONT>
<br>
<br>
<center>
Namun saya yakin saya akan berjaya seandainya saya berusaha bersungguh-sungguh untuk memahami bahasa HTML ini.
</center>
</BODY>
</HTML>

4.      Simpan semula fail anda dengan nama yang sama (fail3.html) dan lancarkan di browser anda.

5.         Untuk latihan ini, anda dikehendaki menyimpan sekeping gambar berformat gif atau jpg di direktori html anda dan kita mengambil contoh gambar zura.jpg.

Buka semula fail3.html di Notepad dan tambahkan kod berikut:-

<HTML>
<HEAD>
<TITLE>
Ulangkaji Pelajaran 3
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">LAMAN WEB PERCUBAAN </H1>
<br>
<br>
<FONT COLOR="#FF0000" FACE="ARIAL" SIZE="4">Ini  adalah <B>pengalaman pertama</B> saya membina <U>Laman Web</U>!</FONT> 
<br>
<IMG SRC="zura.jpg">
<br>
<FONT COLOR="#000000" FACE="ARIAL" SIZE="4">Menjadi atau tidak, <I>kita tunggu dan lihat sebentar lagi</I></FONT>
<br>
<br>
<center>
Namun saya yakin saya akan berjaya seandainya saya berusaha bersungguh-sungguh untuk memahami bahasa HTML ini.
</center>
</BODY>
</HTML>

 


{ Go Back }



 

ASAS HTML
Pelajaran 4


Kita akan belajar tentang capaian (links).

Ia amat mudah. Kita akan membuat satu capaian ke Yahoo.
Mulakan begini...

 <BODY BGCOLOR="#FFFFFF">
Pergi ke Yahoo!
</BODY>

Pergi ke Yahoo!


Kemudian masukkan tag-tag "anchor".

 <BODY BGCOLOR="#FFFFFF">
Pergi ke <A>Yahoo!</A>
</BODY>

Pergi ke Yahoo!


Kemudian masukkan URL dan siap (URL bermaksud Universal Resource Locator, iaitu satu alamat khusus untuk sesuatu server di mana terletaknya fail-fail internet).

 <BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>

Pergi ke Yahoo!


Cuba kita lakukan sekali lagi.

 <BODY BGCOLOR="#FFFFFF">
Pergi ke Jaring!
</BODY>

Pergi ke Jaring!


<BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.jaring.my/">Jaring!</A>
</BODY>

Pergi ke Jaring!


Satu capaian supaya pelawat boleh terus menulis email dari browser mereka ialah dengan menggunakan mailto.

 <BODY BGCOLOR="#FFFFFF">
Sila hantar <A  HREF="mailto:imcomp@geocities.com">E-Mail!</A>
</BODY>

Sila hantar E-Mail!


Kita boleh menjadikan sesuatu imej sebagai objek capaian. Selain dari menggunakan perkataan 'Pergi ke Jaring!' seperti contoh tadi, kita gantikan dengan tag <IMG> untuk perkataan Jaring!

 <BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.jaring.my/"><IMG SRC="Icazmi.jpg" WIDTH=182 HEIGHT=68></A>
</BODY>

Pergi ke 


Satu soalan yang sering diaju kepada saya ialah bagaimana nak hilangkan border biru yang mengelilingi imej berkenaan bila ianya dijadikan capaian? Mudah!

 <BODY BGCOLOR="#FFFFFF">
Pergi ke <A HREF="http://www.jaring.my"><IMG SRC="Icazmi.jpg" WIDTH=182 HEIGHT=68 BORDER=0></A>
</BODY>

Pergi ke 


Apabila anda memasukkan imej ke dalam homepej anda, sentiasa ingat bahawa imej yang besar dan berat akan menyebabkan kebosanan para pengunjung kerana ia mungkin mengambil masa yang panjang untuk dibawa turun. Satu cara untuk `meringankannya' ialah dengan mengecilkan dimensinya atau mengurangkan warnanya. Berikut ialah beberapa:
 
 

Dimensi 310 x 315
# warna- 256
Saiz - 62.9 Kb
 
 
Dimensi 207 x 210
# warna- 256
Saiz- 31.3 Kb
Dimensi 207 x 210
# warna- 64
Saiz - 20 Kb

Pengeditan imej dilakukan dengan menggunakan Adobe Photoshop


 

Kita saksikan sudah, yang pertama imejnya besar, cantik dan lebih baik mutunya, namun... seandainya laman anda terlalu lama untuk di bawa turun oleh para pengunjung, mereka akan bosan, malah serik untuk datang lagi ke halaman anda. Justeru itu berpada-padalah dengan imej.

Satu cara lagi yang boleh dilakukan jika anda mempunyai banyak gambar/imej yang hendak ditunjukkan ialah dengan mewujudkan thumbnails (gambar kecil) yang apabila diklikkan akan membawakan gambar/imej besar.
 


Klik di atas thumbnail untuk melihat imej yang lebih besar

Perkara pertama yang harus anda lakukan ialah menggunakan pengedit imej untuk menghasilkan imej bersaiz kecil (namakan dengan nama baru). Anda boleh gunakan Adobe Photoshop, Corel Photopaint, PaintShop Pro atau mana-mana program grafik yang sesuai untuk melakukan tugasan tersebut.

 Kita ambil satu contoh iaitu kereta berwarna biru tadi dan setelah ianya dikecilkan namakan dengan satu nama yang baru. Jangan gunakan nama lama, nanti fail itu akan hilang kerana digantikan dengan imej baru.

 Mula dengan tag <IMG>.

 <BODY BGCOLOR="#FFFFFF">
<IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60>
</BODY>



Kemudian masukkan tag </A>.

 <BODY BGCOLOR="#FFFFFF">
<A><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>



Dan terus tambahkan URLnya. Siap!

 <BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60></A>
</BODY>



Seperti tadi, anda boleh hilangkan kotak biru yang mengelilingi kereta tersebut.

 <BODY BGCOLOR="#FFFFFF">
<A HREF="car1.jpg"><IMG SRC="car1a.gif" WIDTH=87 HEIGHT=60 BORDER=0></A>
</BODY>



Seperkara lagi untuk membuat sambungan dan capaian ialah capaian bukan kepada satu halaman baru penuh tetapi kepada hanya bahagian tertentu di dalam sesuatu halaman. Klik di sini yang akan secara automatis membawa anda ke bahagian di mana kita mula-mula membicarakan soal URL. Untuk memudahkan pemahaman saya akan kemukakan melalui contoh-contoh.

 Pertama tentukan tempat mana yang anda ingin bawa pengunjung. Pilih satu perkataan di situ dan masukkan ke dalam tag <A>.

 <A>Masukkan</A> URLnya dan anda selesai melakukannya!


Kemudian berikan tempat itu satu nama khas.

 <A NAME="upabit">Masukkan</A> URLnya dan anda selesai melakukannya!

Apa yang telah anda lakukan ialah menentukan tempat pengunjung hendak dibawa. Sekarang ianya boleh dirujukkan.


Sekarang mula membina capaiannya.

 Klik <A>di sini</A> untuk dibawa secara automatis...


Dan masukkan dokumen yang hendak dirujukkan...

 Klik <A HREF="pel4.html">di sini</A> untuk dibawa secara automatis...


Dan akhir sekali, masukkan `anchor  NAME' seperti contoh tadi  ...

Klik <A HREF="pel4.html#upabit">di sini</A> untuk di bawa secara automatis...

Dan itu saja!


LATIHAN ULANGKAJI

 

1.               Buka satu fail baru di Notepad dan taipkan kod-kod berikut :-

 

<HTML>
<HEAD>
<TITLE>
Ulangkaji Pelajaran 4
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">ULANGKAJI PELAJARAN 4</H1>
<br>
<br>
<FONT COLOR="#FF0000" FACE="ARIAL" SIZE="4">Di halaman ini saya akan cuba untuk membuat pelbagai <b>capaian.</b></FONT> 
<br>
<br>
<A HREF="http://www.tm.net.my/">Laman Web TMNET</A><br>

<A HREF="http://www.jaring.my/">Laman Web Jaring</A><br>
<A HREF="http://www.utusan.com.my/">Laman Web Utusan </A><br>
<A HREF="http://www.jaring.my/bharian">Laman Web Berita Harian</A><br>
<A HREF="http://www.thestar.com.my/">Laman Web The Star</A>
<br>
<br>
Pergi ke <A HREF="http://www.geocities.com/~zulhar">
<IMG SRC="zura.jpg" BORDER=0></A>

<br>
<br>

<FONT COLOR="#000000" FACE="ARIAL" SIZE="4"><I>Itulah capaian-capaian awal yang dapat saya paparkan di peringkat oermulaan ini </I></FONT>
<br>
<br>
<center>
Semuga berjaya hendaknya!
</center>
</BODY>
</HTML>

2.               Simpan fail anda dan namakan sebagai “fail4.html” dan lancarkan di browser

3.        Cuba klikkan semua capaian yang terdapat di halaman berkenaan, termasuk        pada imej zura.jpg. (Pastikan internet anda telah terpasang).

 

 


{ Go Back }



 
 

ASAS HTML
PELAJARAN 5


Banyak sudah dipelajari. Manipulasi teks dan font, imej dan capaian. Untuk peringkat Asas ini, tidak banyak yang belum diliputi

Saya kira saya akan menyatakan sesuatu mengenai resolusi skrin. Skrin yang saya sedang gunakan kini ialah 800 pixel x 600 pixel. Ramai juga yang menggunakan 640 x 480 sedikit menggunakan 1024x768. Dan ramai pula yang tidak faham apakah resolusi yang saya sebutkan inidan apa pentingnya mengetahui hal demikian.

Kadangkala laman web yang siap dan cantik di skrin kita, tak semestinya keluar serupa cantinya di skrin orang lain! Ini jawapannya kesan dari penggunaan resolusi skrin yang berbeza. Sebagai pereka homepej, kita mesti mengetahui kedudukan sebenar apabila ianya dilihat oleh pengunjung-pengunjung yang mempunyai resolusi yang rencam ini.

800×600 640×480 1024×768
Langkah pemeriksaan homepej melalui resolusi yang berbeza adalah langkah yang bijaksana kerana anda adalah pereka sekaligus pengunjung pertama homepej anda. Tanpa pemeriksaan ini, anda tidak dapat mengesan pandangan orang lain terhadap homepej yang anda hasilkan, apatah lagi mengesan "kacau-bilau" yang mungkin terjadi hasil penggunaan resolusi yang berbeza.

Terdapat satu program kecil yang boleh menukarkan resolusi komputer anda secara mudah iaitu Quickres. Seandainya anda kurang mahir memasang dan menggunakannya, dapatkan nasihat mereka yang tahu.


Kini kita akan kembali menyemak beberapa peralatan formatting yang boleh digunakan untuk memperbaiki homepej kita. Salah satunya ialah <BLOCKQUOTE>. Ianya banyak kali saya gunakan di tutorial ini meskipun tidak kelihatan. Saya gunakan satu contoh lain untuk pemahaman.

<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
Sebenarnya memperoleh hikmat bukanlah dengan menjadi tua, tapi dengan memiliki pandangan hidup yang tepat, yang senantiasa melibatkan kehendak Tuhan. Pandangan hidup yang paling mendasar tentunya adalah pengakuan bahawa seluruh alam semesta , termasuk manusia, diciptakan oleh Tuhan.
Oleh karena itu, langkah pertama perolehan hikmat adalah takut akan Tuhan. Tanpa pengetahuan dan pengakuan ini tiada apa yang dinamakan hikmat.
</BLOCKQUOTE>
</BODY>
 
Sebenarnya memperoleh hikmat bukanlah dengan menjadi tua, tapi dengan memiliki pandangan hidup yang tepat , yang senantiasa melibatkan kehendak Tuhan. Pandangan hidup yang paling mendasar tentunya adalah pengakuan bahawa seluruh alam semesta, termasuk manusia, diciptakan oleh Tuhan. Oleh karena itu, langkah pertama perolehan hikmat adalah takut akan Tuhan. Tanpa pengetahuan dan pengakuan ini tiada apa yang dinamakan hikmat.
Saya pasti <BLOCKQUOTE> pertama kali dicipta untuk pelbagai tujuan, seperti memetik kata-kata hikmat tertentu dari para pendita dan sebagainya, namun di sini ia bermaksud untuk tujuan yang lebih senang... iaitu memudahkan kerja-kerja "indenting".


Satu lagi peralatan lain yang besar gunanya ialah LIST. Ia dibahagikan kepada dua iaitu ORDERED lists (lis tersusun) and UNORDERED lists (lis tidak tersusun).
 
 

Ini ialah lis tersusun
  1. sesuatu yang besar
  2. sesuatu yang kecil
  3. sesuatu yang panjang
  4. sesuatu yang pendek
Ini ialah lis tak tersusun
  • warnanya merah
  • warnanya biru
  • sesuatu yang tua
  • sesuatu yang muda

Pertama, kita bina satu lis tak tersusun.

 Kita cuba yang ini...

 <BODY BGCOLOR="#FFFFFF">
Apa yang perlu dibawa untuk berkelah esok?
</BODY>

Apa yang perlu dibawa untuk berkelah esok?

Kemudian masukkan tag lis tak tersusun

 <BODY BGCOLOR="#FFFFFF">
Apa yang perlu dibawa untuk berkelah esok?
<UL>
</UL>
</BODY>

Apa yang perlu dibawa untuk berkelah esok?


Masukkan pula perkara-perkara yang diinginkan tersenarai.

 <BODY BGCOLOR="#FFFFFF">
Apa yang perlu dibawa untuk berkelah esok?
<UL>
<LI>tuala mandi
</UL>
</BODY>


Apa yang perlu dibawa untuk berkelah esok?
  • tuala mandi


Tambah beberapa barang lagi...

 <BODY BGCOLOR="#FFFFFF">
Apa yang perlu dibawa untuk berkelah esok?<UL>
<LI>tuala mandi
<LI>baju/seluar mandi
<LI>pelampong
<LI>tikar
<LI>rendang
</UL>
</BODY>

Apa yang perlu dibawa untuk berkelah esok?
  • tuala mandi
  • baju/seluar mandi
  • pelampong
  • tikar
  • rendang

Siap dah satu senarai!


Bagaimana pula dengan lis tersusun? Mudah saja! Tukar tag <UL> tag kepada <OL>.

 <BODY BGCOLOR="#FFFFFF">
Apa yang perlu dibawa untuk berkelah esok?<OL>
<LI>tuala mandi
<LI>baju/seluar mandi
<LI>pelampong
<LI>tikar
<LI>rendang
</OL>
</BODY>

Apa yang perlu dibawa untuk berkelah esok?
  1. tuala mandi
  2. baju/seluar mandi
  3. pelampong
  4. tikar
  5. rendang 


Satu lagi jenis senarai ialah senarai definasi.
 
 

Cap Dagangan
Pada dasarnya ialah sesuatu tanda yang mengasingkan barangan yang dikeluarkan oleh pengeluar dan dapat membezakan barangan tersebut dengan barangan yang yang dikeluarkan oleh pengeluar-pengeluar lain.

Satu contoh lain:
Mulakan dengan...

 <BODY BGCOLOR="#FFFFFF">
<DL>
</DL>
</BODY>


Kemudian masukkan tajuk definasi...

 <BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Definasi Internet
</DL>
</BODY>

Definasi Internet


Dan masukkan definasinya.

 <BODY BGCOLOR="#FFFFFF">
<DL>
<DT>Definasi Internet
<DD>Suatu rangkaian antarabangsa yang merangkaikan beribu-ribu sistem komputer,samada dirumah, pejabat, organisasi atau institusi, dengan menggunakan bahasa yang sama. Setiap rangkaian yang disambung ke internet boleh dipecahkan kepada rangkaian yang lebih kecil.
</DL>
</BODY>

Definasi Internet 
Suatu rangkaian antarabangsa yang merangkaikan beribu-ribu sistem komputer, samada dirumah, pejabat, organisasi atau institusi, dengan menggunakan bahasa yang sama. Setiap rangkaian yang disambung ke internet boleh dipecahkan kepada rangkaian yang lebih kecil


Untuk mengindahkannya, kita tebalkan tajuknya pula.

 <BODY BGCOLOR="#FFFFFF">
<DL>
<DT><B>Definasi Internet </B>
<DD>suatu rangkaian antarabangsa yang merangkaikan beribu-ribu sistem komputer,samada dirumah, pejabat, organisasi atau institusi, dengan menggunakan bahasa yang sama. Setiap rangkaian yang disambung ke internet boleh dipecahkan kepada rangkaian yang lebih kecil.
</DL>
</BODY>

Definasi Internet 
suatu rangkaian antarabangsa yang merangkaikan beribu-ribu sistem komputer, samada dirumah, pejabat, organisasi atau institusi, dengan menggunakan bahasa yang sama. Setiap rangkaian yang disambung ke internet boleh dipecahkan kepada rangkaian yang lebih kecil


Satu lagi bahan kecil yang boleh digunakan ialah Garis Lintang.

 <BODY BGCOLOR="#FFFFFF">
<HR>
</BODY>



Kita mempunyai beberapa pilihan...

 <BODY BGCOLOR="#FFFFFF">
<HR WIDTH=20%>
<HR WIDTH=50%>
<HR WIDTH=100%>
<HR WIDTH=20>
<HR WIDTH=50>
<HR WIDTH=100>
</BODY>








Yang ini pula menggunakan arahan ALIGN.

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% ALIGN=LEFT>
<HR WIDTH=60% ALIGN=RIGHT>
<HR WIDTH=60% ALIGN=CENTER>
</BODY>





Kita boleh mengawal ketebalannya...

<BODY BGCOLOR="#FFFFFF">
<HR WIDTH=60% SIZE=1>
<HR WIDTH=60% SIZE=3>
<HR WIDTH=60% SIZE=8>
<HR WIDTH=60% SIZE=15>
</BODY>






Jangan lupa apabila saya menyatakan bahawa browser tidak mengerti "formatting", ia hanya memaparkan teks yang ditaip. Kita lihat satu contoh:-

<BODY BGCOLOR="#FFFFFF">

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |         Dariku          |
     |         untuk           |
     |         sidia           |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</BODY>

\|/ (@ @) +----oOO----(_)-----------+ | Dariku | | untuk | | sidia | +-----------------oOO-----+ |__|__| || || ooO Ooo


Oleh itu, kita gunakan tag <PRE> (preformat), kita akan menghentikan apa yang kita taip dibariskan sepanjang-panjang di dalam satu atau dua baris.

 <BODY BGCOLOR="#FFFFFF">
<PRE>

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |          Dariku         |
     |           untuk         |
     |           sidia         |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo
</PRE>
</BODY>

                 \|/ 
                (@ @)
     +----oOO----(_)-----------+
     |          Dariku         |
     |           untuk         |
     |           sidia         |
     +-----------------oOO-----+
               |__|__|  
                || ||
               ooO Ooo

* Perhatikan bahawa font monospaced digunakan. 


Sebelum saya tamatkan Peringkat Asas ini, saya mesti nyatakan sesuatu tenatng stail dan isi laman web. Terlebih baik jika anda lawati laman web Jeffrey Glover bertajuk  Top 10 ways to tell if you have a sucky homepage dan Do's and Don'ts of web site design.


LATIHAN ULANGKAJI

1.     Buka semula fail4.html di Notepad dan ubahsuaikan fail berkenaan dengan kod-kod berikut:-

<HTML>
<HEAD>
<TITLE>
Ulangkaji Pelajaran 5
</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="center">ULANGKAJI PELAJARAN 5</H1>
<br>
<br>
<FONT COLOR="#FF0000" FACE="ARIAL" SIZE="4">Di halaman ini saya akan cuba untuk membuat pelbagai <b>capaian.</b></FONT> 
<br>
<UL>
<LI>
<A HREF="http://www.tm.net.my/">Laman Web TMNET</A>
<LI><A HREF="http://www.jaring.my/">Laman Web Jaring</A>
<LI><A HREF="http://www.utusan.com.my/">Laman Web Utusan</A>
<LI><A HREF="http://www.jaring.my/bharian">Laman Web Berita Harian</A>
<LI><A HREF="http://www.thestar.com.my/">Laman Web The Star</A></UL>
<BR>
Pergi ke <A HREF="http://www.geocities.com/~zulhar"> <IMG SRC="zura.jpg" BORDER=0></A>
<br>
<br>

<FONT COLOR="#000000" FACE="ARIAL" SIZE="4"><I>Itulah capaian-capaian awal yang dapat saya paparkan di peringkat permulaan ini </I></FONT>
<br>
<br>
<center>
Semuga berjaya hendaknya!
</center>
</BODY>
</HTML>

2.     Simpan fail berkenaan dengan nama baru (fail5.html) dan lancarkan di browser. Dapatkah anda melihat capaian-capaian anda telah disenaraikan di dalam satu lis tersusun?


{ Go Back }


TUTORIAL MENCIPTA BORANG


Mencipta & Menggunakan BORANG (FORMS).

Untuk permulaan, kita lihat satu BORANG yang menggunakan kebanyakan ciri-ciri sesuatu Borang, dengan kod yang yang dilaksanakan oleh setiap ciri yang ditunjukkan secara huruf tebal di bawah nya.


Pertamanya, BORANG akan dimulai dengan tag FORM . Untuk penerangan berkenaan METHOD dan ACTION, lihat bahagian akhir bab ini.

<mailto:FORM%20METHOD="POST"%20ACTION="mailto:nobody@nowhere.net">


Sekarang, lihat TEXT FIELD:

Name:
Name:<Input name="name" Value="default text" Size=40 maxlength=40>

Name ialah apakah isi medan teks akan digelarkan di dalam penghantaran borang . Value ialah teks mantap yang akan muncul di dalam medan teks (Jika ada). Size ialah berapa besar kotak yang akan muncul di halaman (selebar berapa banyak huruf). Maxlength ialah bilangan huruf yang maksima yang boleh dimasukkan di dalam medan teks.


Sekarang pada bahagian TEXT AREA:

Tuliskan komen/pandangan anda:

<Textarea Name="Komen" Rows=4 Cols=70> </TEXTAREA>

Name ialah nama isi-isi yang akan dipanggil dalamasa penghantaran borang . Baris dan Lajur (Rows and columns) menerangkan saiz `text area'.


BUTANG RADIO, (RADIO BUTTONS) namanya, mengizinkan pilihan dari apa yang dipaparkan.

Sistem Operasi:
Windows 3.1
Windows for Workgroups 3.11
Windows 95

Sistem Operasi <BR>
<INPUT TYPE="radio" NAME="opsys" VALUE="win3.1" CHECKED>Windows 3.1<BR>
<INPUT TYPE="radio" NAME="opsys" VALUE="wfw3.11">Windows for Workgroups 3.11<BR>
<INPUT TYPE="radio" NAME="opsys" VALUE="win95">Windows 95<BR>

Dalam kes ini sekali lagi, name ialah hasil yang akan dipanggil masuk di dalam penghantaran borang, kecuali dalam hal sebegini, anda perlu mengetahui bahawa kesemua butang-butang dalam kumpulan yang serupa mesti mempunyai nama yang serupa. Value ialah apa yang dikandungi oleh penghantaran borang tatkala butang ini dipilih. DIPILIH (CHECKED) menunjukkan butang mantap (jika ada). Dalam kes butang radio sebegini, hanya satu pilihan yang dibenarkan.


Kotak Pilihan membenarkan pengguna satu atau banyak pilihan.

Saya menggunakan browser-browser ini:
Netscape 3.0
Explorer
Mosaic
Cello

Saya menggunakan browser-browser ini: <BR>
<INPUT type="checkbox" NAME="Netscape 3.0" CHECKED>Nestcape 3.0 <BR>
<INPUT type="checkbox" NAME="Explorer">Explorer <BR>
<INPUT type="checkbox" NAME="Mosaic" CHECKED>Mosaic <BR>
<INPUT type="checkbox" NAME="Cello">Cello <BR>

Name ialah apakah output untuk setiap kotak pilihan itu digelarkan semasa ianya dikembalikan Kesemua kotak pilihan di dalam satu-satu kumpulan tidak boleh mempunyai nama yang sama,kerana hasil tiap-tiap satu kotak terpilih adalah dikembalikan. CHECKED menentukan pilihan mantap di dalam kotak.


Pilihan lis tarik-bawah digunakan untuk membuat satu pilihan tertentu

Umur saya:

My age: <SELECT NAME="age">
<OPTION>Bawah 18
<OPTION>18-25
<OPTION SELECTED>25-50
<OPTION>Melebihi 50
</SELECT>

Name ialah output daripada pilihan tarik-bawah yang akan dipanggil di dalam pengembalian borang..


LIS PILIIHAN boleh juga digunakan untuk memilih lebih dari satu item.

Saya boleh dihubungi dengan: (Jangan lepaskan butang CONTROL untuk memilih lebih dari satu)

Saya boleh dihubungi dengan: (Jangan lepaskan butang CONTROL untuk memilih lebih dari satu)
<SELECT NAME="contact" MULTIPLE SIZE=4>
<OPTION SELECTED>Telefon
<OPTION>Email
<OPTION>Pos Laju
<OPTION>Faks
<OPTION>Pager
<OPTION SELECTED>Telegram

Jika multiple diselitkan di dalam tag, bererti lebih dari satu pilihan dibenarkan. Size mengawal berapa banyak pilihan yang akan dipaparkan pada lis.


Item-item diatas adalah biasa digunakan didalam menulis input. Sekarang izinkan penjawab untuk membersihkan borangnya atau menghantarkannya dengan butang-butang tertentu.

<INPUT TYPE="submit" value="Hantar">
<INPUT TYPE="reset" value="Isi semula">

Value ialah teks yang akan muncul pada butang berkenaan. Saiz butang akan berubah mengikut keperluan teks.


Jangan lupa untuk menutup borang dengan tag.
</FORM>

TATACARA(METHOD) DAN TINDAKAN(ACTION)

Buat masa ini, cuma ada satu METHOD, iaitu POST, jadi jangan dileret-leretkan hal ini berpanjangan.

Terdapat dua kemungkinan ACTION untuk borang-borang, tetapi hanya satu yang ada untuk para pengguna.

ACTION="nama fail" akan menjanakan penghantaran borang kepada satu fail .exe atau skrip yang terdapat pada server, yang akan memproses penghantaran serta akan melakukan sesuatu dengan keputusan itu, lazimnya menuliskan semula ke atas skrin dalam bentuk HTML. Contohnya apabila anda melakukan Carian InfoSeek, anda memasukkan input di dalam satu borang . Ia akan di berikan kepada satu program pengkalan data, yang melaksanakan carian data-data dan kemudian memaparkannya ke atas skrin apakah hasil cariannya. tetapi kebanyakan server tidak mengizinkan kita menggunakan cara ini atas sebab-sebab kerahsiaan maklumat.

Pilihan kedua ialah ACTION="mailto:alamat email". Yang ini boleh didapati untuk sesiapapun. Dalam kes ini, penghantaran borang oleh penjawab akan diemelkan kepada alamat yang tertera. Jadi apakah itu "Penghantaran borang"? Saya telah memasukkan borang contoh di atas dan menghantarkan ke alamat emel saya sendiri. Begini hasilnya:

name=ZULKIPLY+HARUN&Komen=Ini+dimasukkan+di+dalam+TEXT+AREA.%0D%0A &sistem operasi=win3.1&wordprocessor=on&database=on&Umur=25-50&Hubung=Email &Hubung=Fax

Apa tu? Ya, ia tidak jelas. Tukar + kepada satu jarak, gantikan setiap & dengan tekan butang ENTER, dan tafsirkan kesetiap % dengan nilai ASCII sepadan, dan itulah hasilnya!

Sekarang ini terdapat satu program yang boleh menterjemahkan setiap kandungan isi mailto dengan mudah. Mailto: Formatter ialah program yang dimaksudkan.Terima kasih kepada penciptanya kerana menjadikan tugas kita bertambah mudah. Sila tekannya untuk mendapatkan sekarang, jika mahu!

Untuk maklumat lanjut tentang borang silalah ke:
Form Help atau
Matt's Script Archive

{ Go Back }


Cikgu Azmi Jaaffar. Dikemas kini pada 25/12/2002