One day, saya menanam hasrat --> "aku mesti belajar sendiri, bukak mesin sendiri, repair sendiri, amik buku-buku mesin, baca! arini aku tanak tido 7 jam lagi"... dan saya berjaya repair mesin tu on my own. Kemudian, 'kewujudan' saya pun di perasani... oleh kerana pengetahuan yang telah saya ada pada masa itu, maka saya di anggap penting. But frankly speaking, saya sangat-sangat, TIDAK MAHU jadi macam dorang tu. Saya ingin berkongsi dengan semua orang, walaupun orang tu tanak berkongsi dengan saya. ( ..I think I have to rephrase that word again.. )

Bahan-bahan:

01. Notepad
02. Browser
03. Tag-tag asas HTML
04. Pengetahuan dalam tag-tag tambahan dalam HTML yang kita telah tahu seperti

• Tag <br> , <p> dan <hr>
• Tag <b> . . </b> , <i> . . </i> dan <u> . . </u>
• Tag <pre> . . </pre> dan <xmp> . . </xmp> (pengetahuan tambahan)

Cara membuat:

Dengan Nama Allah, Yang Maha Pemurah, Lagi Maha Mengasihani

Kod &nbsp; digunakan jika kita ingin memaksa browser mewujudkan satu jarak kosong di antara aksara di dalam browser, DAN IANYA BUKAN TAG.

Kod &nbsp; adalah salah satu daripada pelbagai kod-kod istimewa (special character codes) yang boleh kita lihat dan dapati di dunia HTML. Saya akan list-kan selebihnya dalam tutorial berikut nanti

Penggunaan &nbsp; lebih kurang seperti penggunaan [space bar] di keyboard.
[space bar] akan berfungsi sebagai penggerak aksara selangkah ke hadapan jika ianya ditekan sekali; dan akan berganjak 2 aksara ke hadapan jika ditekan 2 kali. Perkara ini dapat kita perhatikan dengan jelas di Notepad.

Malangnya, di browser tidak boleh begini. Ada format bahasanya yang tertentu. Jika kita tekan beratus kali [space bar] pun di Notepad, teks yang bergerak hanya dapat di lihat di Notepad, tapi pada outputnya di browser, browser hanya mengenalinya sebagai SATU anjakan ke kanan sahaja.

Jika anda terfikirkan sesuatu_ Jika anda terfikir, kenapa tidak menggunakan tag <pre> atau <xmp> saja ? Bukankah dengan menggunakan mana-mana satu tag ini, kita boleh mendapatkan output yang sama seperti di Notepad ? Jawapan saya, kerana jika dengan menggunakan kedua-dua tag yang disebutkan di atas, kita tidak akan dapat lagi mengawal format keseluruhan teks di browser kerana jika tag ini digunakan, browser akan lepas tangan. Browser tidak akan memproses outputnya mengikut format binaan asal yang telah dibina, jika boleh pun saya tidak akan menggalakkan di masa ini. Mungkin di masa ini anda keliru dengan alasan ini, tapi pada hakikatnya, apabila tag <pre> atau <xmp> digunakan, outputnya akan berbeza di browser-browser berbeza. Jika kita recall semula tutorial kita yang lepas (dalam Resepi 8), penggunaan tag <pre> . . . </pre> memang boleh digabungkan dengan beberapa tag-tag lain tetapi tidak semuanya. Sebagai contoh, penggunaan font face (anda akan lihat nanti. Buat masa ini, please keep in mind) yang berbeza akan mengakibatkan ralat. Anda boleh cuba, tetapi saya tidak akan pergi jauh dari apa yang telah saya nyatakan disini. Penggunaan tag <xmp> . . . </xmp> juga begitu dan kedua-duanya ini akan ketara ralatnya di browser yang berbeza jika kita tidak betul-betul mahir menggunakannya. (Terdapat banyak jenis browser di dunia, dan pengguna dunia tidak hanya menggunakan satu jenis browser sahaja. Ditambah pula dengan landasan-landasan sistem operasi yang berbeza akan menambahkan versi-versi output yang berbeza pada browser yang duduk di landasan yang berbeza, terutamanya browser-browser yang script sensitive seperti Netscape Navigator dan Mozilla Firefox. Walaubagaimanapun, kedua jenis browser ini adalah alat terbaik untuk kita melihat ralat yang timbul pada output kita dimana Internet Explorer tidak dapat mengesan / mengendahkan). Seorang pereka laman web yang baik akan mengambil berat tentang bagaimanakah output mereka jika dipaparkan di browser yang lain selain Internet Explorer.

Browser? Firefox... landasan... Er, Apa Tadi_ ? Nak cerita skit... Internet Explorer diminati ramai kerana... ianya adalah milik Microsoft. Dan, kebanyakan kita menggunakan sistem apa di rumah dan pejabat? --> Microsoft ye tak ? Microsoft Windows 98, Microsoft Windows XP dan lain-lain. Notepad pula milik syarikat apa ? Microsoft ? Betul lah tu. Jadi, kenapa browser Internet Explorer kurang mengeluarkan ralat (atau mengendahkan ralat) sewaktu kita mengaturcara dan memaparkan output ? Kerana ia disokong oleh sistem Windows itu sendiri. Netscape pula bagaimana ? Netscape bukan milik Microsoft. Maka, dengan aturcara yang baik dan betul sahaja akan membuatkan browser Netscape memaparkan output yang betul seperti yang anda kehendaki. ( This is where your real challenge really begin ) Di rumah, saya menggunakan 3 jenis browser --> Internet Explorer, Mozilla Firefox dan Netscape Navigator untuk membantu saya melihat paparan yang betul untuk ketiga-tiga browser ini. Namun begitu, banyak gak kesilapan yang saya buat.

Maka, langkah selamat untuk mengelak daripada kejadian yang tak diigini berlaku (dengan menggunakan tag <pre> atau <xmp>), kita gunakan arahan &nbsp; ini. Kodnya pun sangat mudah.

Contoh: Saya akan wakilkan perbuatan satu anjakan ke kanan dengan simbol []. Maka, jika: matahari (tidak guna  ) --> matahari mata   hari --> mata [] hari mata     hari --> mata [] [] hari mata      hari --> mata [] [] [] hari Disini, kita perhatikan, lebih banyak simbol kod   ini digunakan, maka semakin bertambah ruang anjakannya ke kanan.

&nbsp; bermaksud "non-breaking spaces" atau dalam bahasa melayu --> ruang yang tak pecah (agaknya lah... ^^)

Mari kita ambil satu contoh: (gunakan fail terbaru anda sebelum ini jika mahu, atau bina satu fail lain)

<html> <head><title> Timing Makes Perfect! </title></head> <body> 0005 [ 5 second to launch ] <br> &nbsp; 0004 [ four ] <br> &nbsp; &nbsp; 0003 [ three ] <br> &nbsp; &nbsp; &nbsp; 0002 [ two ] <br> &nbsp; &nbsp; &nbsp; &nbsp; 0001 [ one ] <br> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [ prooooooootttt !!! ] </body> </html>

Outputnya akan kelihatan begini:

Timing Makes Perfect!

0005 [ 5 second to launch ]  0004 [ four ]    0003 [ three ]     0002 [ two ]      0001 [ one ]       [ prooooooootttt !!! ]

01. Notepad
02. Browser
03. Tag-tag asas HTML
04. Simbol "Special Character Code"

Cara membuat:

Kita akan melihat lagi beberapa kod istimewa (special character codes) yang anda boleh gunakan dan paparkan pada browser selain daripada simbol &nbsp; .

Kodnya ada banyak, tapi kebanyakannya juga boleh kita dapati pada keyboard, jadi saya tidak akan meletakkan apa yang telah sedia ada pada keyboard (seperti simbol ? , < , > , + dan lain-lain).

01. Notepad
02. Browser
03. Tag-tag asas HTML
04. Dua lagi simbol tambahan iaitu < dan >

Cara membuat:

Ada satu lagi cara untuk mendapatkan simbol-simbol khas, tetapi dengan cara pendekatan yang lain (lain skit aje). Yang penting, kita mempunyai pengetahuan tentang kewujudannya. Saya akan terus straight to the point.

Ramai daripada kita yang tak suka sangat menggunakan tag <xmp> . . . </xmp> kerana kita terpaksa akur dengan format nya yang tersendiri. Juga ianya menjadi agak rumit untuk digunakan dalam situasi-situasi yang tertentu, seperti yang akan kita lihat di bawah nanti.

Sebagai contoh, jika saya ingin melihat output begini (lihat di bawah):

Problem ... problem !

Tengok! Saya boleh letakkan kod <html> dalam browser.

01. Notepad
02. Browser
03. Tag-tag asas HTML
04. Penguasaan dalam tag-tag tambahan HTML lain terutama tag <pre>
05. Tag baru iaitu Tag <blockquote> . . . </blockquote>

Cara membuat:

Jika perkataan blockquote ini ditukarkan ke dalam Bahasa Melayu dalam pengertian yang longgar, ianya bermaksud "kata-kata dalam blok".

Dengan gambaran diagram yang cuba saya kaitkan dibawah, apabila tag <blockquote> digunakan, ianya seakan perkataan itu ditempatkan di dalam sebuah kotak atau blok, tetapi blok itu tidak kelihatan tetapi kita sedar akan kewujudannya.

Bayangkan [ diagram A ] dibawah adalah browser anda: |------------------------------------------| |Internet Explorer | |------------------------------------------| | | | | | | | | | | | | | | | | |------------------------------------------| [ diagram A ] Katakan, didalamnya terdapat beberapa patah perkataan, sebelum tag <blockquote> di gunakan. Lihat contoh [ diagram B ] |------------------------------------------| |Internet Explorer | |------------------------------------------| | | |Pecah Kaca, Pecah Gelas, | |Lepas Baca, Harap Balas. | | | | | | | | | | | |------------------------------------------| [ diagram B ] Aturcaranya untuk memaparkan output seperti di [ diagram B ] diatas adalah seperti di bawah: <html> <head>   <title> Internet Explorer </title> </head> <body> Pecah Kaca, Pecah Gelas, <br> Lepas Baca, Harap Balas. </body> </html> Sekarang, saya akan menunjukkan kepada anda apa yang terjadi jika kita meletakkan tag <blockquote> . . . </blockquote> pada Notepad dan bagaimanakah outputnya pada browser secara diagram. Maka perkara pertama, aturcaranya: <html> <head>   <title> Internet Explorer </title> </head> <body> <blockquote> Pecah Kaca, Pecah Gelas, <br> Lepas Baca, Harap Balas. </blockquote> </body> </html> Dan sekarang outputnya dalam diagram: |------------------------------------------| |Internet Explorer | |------------------------------------------| | | -->|Pecah Kaca, Pecah Gelas, |<<-- -->|Lepas Baca, Harap Balas. |<<-- | | | | | | | | | | |------------------------------------------| [ diagram C ] Daripada pemerhatian yang kita lihat pada [ diagram C ] diatas, dengan menggunakan tag <blockquote> . . . </blockquote>, output teks pada browser akan dimampatkan di bahagian kiri dan kanan browser. Dengan cara ini, Seolah-olah teks berada dalam sebuah blok yang tidak kelihatan. Kita juga boleh menambah blockquote di dalam blockquote. Tetapi harus diingat, dengan menggunakan banyak gabungan blockquote begini, akan memampatkan lagi jarak lebar browser dan akibatnya akan dapat dilihat pada output di bawah. Mari kita lihat contoh di bawah: <html> <head> <title> Internet Explorer </title> </head> <body> |-> <blockquote> | Pecah Kaca, Pecah Gelas, <br> | Lepas Baca, Harap Balas. | |-> <blockquote> | | Jangan Tak Balas Yach! | | |-> <blockquote> [1] [2] [3] Kalau Tak Balas, SIAP!!! | | |-> <blockquote> | |-> </blockquote> |-> </blockquote> </body> </html> Diperlihatkan pada aturcara diatas, 3 tag <blockquote> yang digabungkan mengikut susunannya. Blockquote kedua berada di dalam blockquote pertama, dan ketiga berada di blockquote yang kedua. Akhir sekali, mari kita lihat outputnya pada browser... Internet Explorer Pecah Kaca, Pecah Gelas, Lepas Baca, Harap Balas. Jangan Tak Balas Yach! Kalau Tak Balas, SIAP!!! [ Gambar 5 ] Penggunaan <blockquote> di dalam <blockquote>. Teks dimampatkan.

Biasanya, saya tidak menggalakkan penggunaan tag <blockquote> secara penggabungan. Kita boleh, however, meletakkan arahan tag <blockquote> . . . </blockquote> ini satu persatu. Ini lebih baik.

Seperti contoh aturcara kita di bawah:

<html> <head> <title> Internet Explorer </title> </head> <body> |-> <blockquote> [1] Teks ini berada dalam blockquote |-> </blockquote> <p> Teks ini tidak berada dalam blockquote <p> |-> <blockquote> [2] Teks ini berada dalam blockquote |-> </blockquote> </body> </html>

Daripada contoh aturcara diatas, saya telah meletakkan penggunaan tag <blockquote> . . . </blockquote> satu persatu. Cara begini lebih baik dan format outputnya lebih mudah dikawal daripada penggabungan.

Contoh output:

Internet Explorer

Teks ini berada dalam blockquote Teks ini tidak berada dalam blockquote Teks ini berada dalam blockquote

01. Notepad
02. Browser
03. Pengetahuan dalam membina laman web asas

Cara membuat:

PERHATIAN: BROWSER NETSCAPE NAVIGATOR WILL SIMPLY IGNORE THIS TAG DAN AKAN MEMAPARKAN TEKS PEGUN (tidak bergerak) SAHAJA

<marquee> . . . </marquee> adalah sejenis tag yang boleh menggerakkan teks dan imej (imej ? nanti saya tunjukkan..) pada output browser. Saya suka gunakan tag ini satu masa dulu, tapi disebabkan browser-browser seperti Mozilla Firefox tidak dapat memproses output imej (teks boleh) dan Netscape Navigator langsung tidak mengendahkan tag ini, maka saya terpaksa mencari alternate lain dalam pembikinan laman web saya.

Tetapi anda boleh melihat outputnya di browser Internet Explorer. Marquee bermaksud 'pergerakkan melintang' dan tag ini mempunyai atributnya yang tersendiri. Saya hanya akan menunjukkan kepada anda atribut-atributnya yang biasa digunakan sahaja.

Contoh output di bawah adalah hasil menggunakan tag <marquee> . . . </marquee> pada Notepad. (browser Netscape will simply see the text, not the marquee).

Weeeee!!! Roller Coaster

I'M GETTING DIZZY..