|
|
[ tentang dia ] [ tentang alam ]
HTML:
hYPERtEXT mARKUP laNGUAGE
|
|
TapakKakiTM WebSite 1998 - 2007 | SMS: 012-9352147 | Email: mhusniutmkl@gmail.com |
|
a006
AKU SUKA BERCAKAP..
Kalau korang observer.. di setiap page baru, mesti aku nak cakap sesuatu.. Walaupun kadang-kadang tak ada apa nak cakap pun.. Actually, bahagian tutorial ini dah banyak kali di versi-versi kan dan yang kelakarnya, saya masih menghadapi masalah dalam pengolahan ayat. (sometimes saya cakap aku, sometimes aku cakap saya. whatever le kan..)
Diharapkan saya dapat selesaikan tutorial HTML ini kali ini..
|
a007
Resepi 4 - ASAS HTML UNTUK LAMAN WEB
Dengan Nama Allah, Yang Maha Pemurah, Lagi Maha Mengasihani
Bahan-bahan:
01. Notepad
02. Browser
03. Pemahaman dalam Asas HTML
 Mengumpul Pemahaman Dari Resepi 1
Dengan Nama Allah, Yang Maha Pemurah, Lagi Maha Mengasihani
Kita sudah lihat bagaimana caranya menukar (convert) fail Notepad menjadi fail browser. Juga, penggunaan asas aturcara bahasa HTML, cara untuk menyimpan (bagaimana menggunakan Save As, dan bagaimana menggunakan Save), menentukan dan mencari semula lokasi fail simpanan yang telah ditetapkan. Segala-galanya ini telah saya cuba muatkan dalam 3 resepi... er.. tutorial saya sebelum ini.
Pada Resepi 4 - Asas HTML Yang Membina Sebuah Laman Web ini, mari kita tumpukan perhatian pada aturcaranya. Bagaimana dan kenapa tag-tag aturcara html (kod-kod bahasa HTML seperti <html> , <body> , </body> , <br> dan lain-lain) ini perlu jika kita ingin membina sebuah laman web menggunakan aturcara.
HTML bermaksud HyperText Markup Language. Sebenarnya HTML tidak dikategorikan sebagai sebuah 'bahasa program' kerana ianya bukan program. Ianya adalah sebuah bahasa format yang digunakan sebagai perantara kepada browser. Jadi tidak hairanlah aturcaranya lebih familiar dan mudah difahami. (so that we know it's not a programming language, tapi still saya akan gunakan perkataan 'aturcara' sebab kita dah biasa mengaitkan bahawa HTML adalah aturcara. Dah biasa sebut, kalau di ubah jadi perkataan lain, kadangkala akan mengelirukan).
Dokumen HTML yang pertama (yang asal), yang digunakan secara komersial telah diperkenalkan dalam tahun 1990 (wow! baru 16 tahun ?). Jadi cuba bayangkan dalam masa sesingkat 16 tahun ni, dah berbilion laman web yang boleh kita surf di Internet ( I wanted to believe it's THAT many already). So, rugilah kalau kita x mempelajarinya kalau tak banyak, sikit. Menuntut ilmu biarlah sampai ke negeri Cina. Dengan adanya Internet, semua orang boleh 'pergi' ke sana. ^^
|
Cerita, cerita juga, celoteh, celoteh juga. Mana aturcaranya?
Kita sudah pun cuba memasukkan aturcara html sebelum ini dan outputnya pun sudah kita lihat. Sekarang, kita akan menyelam lebih dalam lagi ke dunia bahasa HTML ini. Kita akan melihat kenapa tag-tag diperlukan dalam HTML untuk membina sebuah laman web.
The basic of the basic untuk membina sebuah laman web memerlukan aturcara seperti di bawah:
<html>
<head><title> [ tajuk page disini ] </title></head>
<body>
[ maklumat anda disini ]
</body>
</html>
|
Umpama sebuah rumah, jika tanpa asas, maka roboh lah rumah itu. Jadi secara teori dan praktikal, setiap sesuatu itu mesti lah ada asas.. HTML pun gitu juga.
Dalam tutorial kita di Resepi 1 hingga Resepi 3, kita telah memasukkan aturcara, kemudian meng-editnya. Pada tutorial kali ini, kita akan tetap menggunakan fail yang sama. Sila fahami langkah-langkah di bawah:
|
| Untuk Mengeluarkan Semula Fail Notepad Dari Browser_ |
Cara untuk mengeluarkan semula fail Notepad kita daripada browser:
- Buka fail anda --> fail_ku.html dan double-click
- Pada browser, halakan mouse ke menu.
- Klik perkataan View --> Source (Internet Explorer)
- Klik perkataan View --> Page Source (Netscape)
|
Dalam Resepi 3 (tutorial sebelum ini), editan terbaru yang kita lakukan pada fail_ku.html adalah seperti di bawah: (lihat dalam bahagian <body> , saya sengaja fokuskan penekanannya disitu
<html>
<head>
<title>Layang˛ Terputus Talinya - Alleycats</title>
</head>
<body>
Berarak mendung kelabu<br>
Mengekori langkahku<br>
Sepanjang kehidupan<br>
Penuh dugaan<br>
Namun aku tetap aku<br>
<p>
Kucuba dan terus mencuba<br>
Mencapai suria<br>
Walau membakar jiwa<br>
Walau aku dihina<br>
Namun aku tetap aku<br>
<p>
Derita oh derita<br>
Engkau di mana-mana<br>
Walaupun jauh aku berlari<br>
Mahupun berdiam diri<br>
Namun indah mimpi dari realiti<br>
Hidupku tanpa arah
Bagaikan layang-layang<br>
Terputus talinya<br>
<p>
Tapi pasti suatu hari nanti<br>
Sinar suriakan menjelma
|
</body>
</html>
Mari kita mengimbas kembali apa yang telah kita tahu sebelum ini. Seperti yang kita sudah sedia maklum, demi membina sebuah laman web yang asas, maka tag-tag yang asas itu adalah suatu kemestian. Dan tag-tag asas itu adalah seperti yang diperlihatkan di bawah:
<html>
<head><title> [ tajuk page disini ] </title></head>
<body>
[ maklumat anda disini ]
</body>
</html>
|
Sekarang, cuba kita kaitkan kepada aturcara kita yang telah kita bina. (sila rujuk aturcara di Notepad anda). Pada kawasan <body> pada aturcara yang telah kita buat, (pada fail_ku.html) ada ditambah tag <br> dan <p>.
Ini memberitahu kita bahawa, kita boleh meletakkan apa saja tag yang kita hendak, asalkan ianya berada di dalam kawasan <body>. Yang penting, browser MEMBENARKANNYA.
Berbekalkan semua maklumat yang diperolehi ini, kemahiran dan pemahaman anda dalam mengikuti tutorial-tutorial sebelum ini ( harap-harap.. ^^), mari kita cuba bina sebuah fail browser baru dan namakan fail ini index.html dan masukkan input seperti di bawah, kemudian lihat hasil outputnya:
<html>
<head><title> Welcome 2 My Site </title></head>
<body>
Hai! <p> My Name is TapakKaki <br><br> Nice to meet you! <br> Make yourself at home yach!
</body>
</html>
|
|
| Cemana Nak Buat Fail Browser Yang Baru_ ? |
Sila ikuti langkah di bawah:
- Biarkan fail Notepad fail_ku dibuka (sengaja saya biarkan terbuka)
- Buka sebuah Notepad baru.
| Start --> Programs --> Accessories --> Notepad |
- Kemudian, masukkan input seperti yang diberi, iaitu:
<html>
<head>
<title> Welcome 2 My Site </title>
</head>
<body>
Hai! <p> My Name is TapakKaki <br><br> Nice to meet you! <br> Make yourself at home yach!
</body>
</html>
|
Juga, perhatikan, saya tidak menyusun perkataan saya, dan saya meletakkan tag-tag <br> dan <p> tanpa menyusunnya, tidak seperti semasa kita menulis lirik lagu sebelum ini.
Jadi sila ambil perhatian tentang keadaan ini. Anda boleh membandingkannya sekarang dengan aturcara pada fail_ku jika anda mahu.
- Save As fail ini dan namakannya index.html , kemudian tempatkan nya di lokasi pilihan anda.
- Jangan tutup fail Notepad dan cari semula fail browser yang bernama index ini pada lokasinya dan double-click fail itu.
- Sebuah browser akan terpapar dan lihat outputnya
|
Sekarang lihat aturcara anda pada Notepad dan output yang terpapar pada browser. (index.html)
Dari pemerhatian anda, apa kesimpulan yang di dapati ? Cuba hilangkan tag <p> yang terdapat dalam kawasan <body> dan Save, kemudian Refresh browser anda dan lihat sekali lagi outputnya. Apakah perbezaan yang anda dapati ?
Contoh output yang saya dapat pada browser saya:
| Hai!My Name is TapakKaki
Nice to meet you!
Make yourself at home yach! |
Output Saya Setelah Tag <p> Di Buang
Letakkan semula tag <p> di tempat asal sebelum anda membuangnya sebentar tadi dan Save, kemudian Refresh. Apakah perubahan yang anda dapati ?
Contoh output yang saya dapat di browser saya:
| | Hai! My Name is TapakKaki
Nice to meet you!
Make yourself at home yach! |
Output Saya Setelah Tag <p> Di Tambah Semula
Sekarang pergi ke fail_ku.html , double-click fail ini, dapatkan aturcaranya dalam Notepad (jika tadi anda tidak menutup fail_ku, maka anda tidak perlu melakukan bahagian ini lagi) dan buangkan kesemua atau sebahagian tag <br> yang terdapat dalam kawasan <body> , kemudian Save dan Refresh. Apakah output terbaru yang dapat di lihat ?
Contoh output yang saya dapat di browser saya:
|
Berarak mendung kelabu
Mengekori langkahku
Sepanjang kehidupan
Penuh dugaan
Namun aku tetap aku
Kucuba dan terus mencuba
Mencapai suria
Walau membakar jiwa
Walau aku dihina
Namun aku tet..
|
|
| |
Berarak mendung kelabu
Mengekori langkahku
Sepanjang kehidupan
Penuh dugaan
Namun aku tetap aku
Kucuba dan terus mencuba
Mencapai suria
Walau membakar jiwa
Walau aku dihina
Namun aku tetap aku
Derita oh derita
Engkau di mana-mana
|
| | Output fail_ku.html Sebelum Tag <br> Di Buang (output asal) | Output fail_ku.html Selepas Tag <br> Di Buang (output terbaru) |
Daripada pemerhatian saya, walaupun di Notepad (fail_ku), telah saya susun lirik lagu ini perenggan demi perenggan, tetapi tanpa tag <br> , outputnya tidak akan mengikut arahan, sebagaimana susunan dan kemahuan yang telah kita buat dalam Notepad. Tetapi dengan adanya tag <br> , tanpa menyusunnya pun (di dalam Notepad), outputnya akan memberi hasil yang anda kehendaki. Ini adalah juga, apa yang dapat kita perhatikan pada aturcara kita di index.html dan outputnya.
Ini adalah sesuatu perkara penting yang ingin saya pertunjukkan... sebab selepas ini kita akan banyak menggunakannya (tag <br> dan tag <p>) untuk memformat teks.
|
a008
Resepi 5 - TAG <br> DAN TAG <p>
Bahan-bahan:
01. Notepad
02. Browser
03. Tag-tag asas HTML
04. Tag-tag tambahan HTML yang baru iaitu
Glosari:
<br> bermaksud "break paragraph" atau "page break". Dalam bahasa melayu di panggil pecah perenggan (sometimes it sounds funny in malay..). Anyway, itu lah fungsi yang di pikul oleh tag <br> ini.
<p> pula bermaksud "break double paragraph". Kalau <br> tu pecah perenggan, maka <p> tu pecah dua kali jarak perenggannya.
Kebiasaannya, kedua-dua tag ini saling membantu, dan tag-tag ini juga terletak di dalam kawasan <body>
Cara membuat:
Kita akan menggunakan fail index.html dan berpandukan pedoman yang terdapat pada fail index ini, cuba lakukan aturcara anda sendiri dengan menggunakan kedua-dua tag <br> dan <p> ini.
|
Here, Let Me Help A Little_
|
Dibawah adalah aturcara anda pada fail index.html:
<html>
<head>
<title> Welcome 2 My Site </title>
</head>
<body>
Hai! <p> My Name is TapakKaki <br><br> Nice to meet you! <br> Make yourself at home yach!
</body>
</html>
|
Sekarang, cuba buang semua maklumat yang ada di atas dan cuba masukkan input anda sendiri. Jangan lupa masukkan sekali tag <br> dan tag <p> yach!
Yang perlu anda ingat ialah strukturnya. (lihat pedoman dibawah):
<html>
<head>
<title> [ tajuk page disini ] </title>
</head>
<body>
[ maklumat anda disini ]
</body>
</html>
|
Senang je... saya boleh buat, anda pun boleh buat.
|
a009
Resepi 6 - TAG <hr>
Bahan-bahan:
01. Notepad
02. Browser
03. Pengetahuan dalam Resepi 1 hingga Resepi 5
04. Tag-tag asas HTML
05. Tag <br> dan <p>
06. Tag tambahan HTML yang baru iaitu Tag <hr>
Cara membuat:
Satu lagi jenis tag yang menarik iaitu tag <hr>
<hr> bermaksud "horizontal rule" atau in malay, garisan melintang. Dan fungsinya ialah, memaparkan sebuah garisan mendatar / melintang pada output di browser.
Bila dan bagaimana menggunakan tag ini terpulang kepada cara anda menggunakannya kerana tag <hr> mempunyai sifat atau atribut-atribut tambahan dalam dirinya. Mari kita lihat secara lebih detail.
Apa akan jadi pada output do browser, jika saya memasukkan tag <hr> ini dalam Notepad index.html saya seperti di bawah:
<html>
<head><title> Welcome 2 My Site </title></head>
<body>
<hr>
Hai! <p> My Name is TapakKaki <br><br> Nice to meet you! <br> Make yourself at home yach!
</body>
</html>
|
Agaknya bagaimanakah outputnya pada browser ?
Output saya:
|
Hai!My Name is TapakKaki
Nice to meet you!
Make yourself at home yach! |
Nampak X Garisan Melintang Kat Browser ?
Sekarang, apa akan terjadi jika saya ingin tambah sedikit perkataan seperti di bawah dan perkataan ini saya letakkan sebelum tag <hr>
<html>
<head><title> Welcome 2 My Site </title></head>
<body>
TapakKaki's Site ! <br>
<hr>
Hai! <p> My Name is TapakKaki <br><br> Nice to meet you! <br> Make yourself at home yach!
</body>
</html>
|
Outputnya akan kelihatan seperti di bawah:
| TapakKaki's Site !
Hai!My Name is TapakKaki
Nice to meet you!
Make yourself at home yach! |
Output Saya Setelah Melakukan Beberapa Editan
|
I WANT TV COLOR !!!
Masih ingatkah dikau..... saya ada mengatakan bahawa tag <hr> ni ada sifat-sifat (atribut) tambahannya yang tersendiri ? Memang ada pun.. Dengan wujudnya sifat-sifat tambahan ini dalam sesebuah tag tertentu (tidak semua tag punya atribut), maka kita dapat mengawal tag itu mengikut kehendak dan citarasa kita dan ini memudahkan kita mengaturcara.
Tapi, sekali lagi, tak semua tag mempunyai sifat atau atribut yach ?
Saya hanya akan menerangkan sedikit sebanyak tentang sifatnya, kerana anda akan dapat melihatnya dengan lebih mendalam di tutorial-tutorial kita yang akan datang, InsyaAllah..
|
Diharap keterangan diatas memuaskan dan difahami. Kalau boleh, seelok-eloknya selepas belajar 30 minit, rehat seketika dan sambung semula kemudiannya. Saya tak pernah baca tips sebegini pada laman-laman web yang menyediakan tutorial kepada pelayarnya, tapi saya selalu jumpa tips begini di laman-laman web game... "Lepas main game sejam, rehat 15 minit.. Lepas tu main lah balik game."
Er, ok, sekarang, katakan saya ingin memberi output <hr> saya ini WARNA. Maka, bagaimana pula arahan aturcara nya pada Notepad?
<html>
<head><title> Welcome 2 My Site </title></head>
<body>
TapakKaki's Site ! <br>
<hr color="black">
Hai! <p> My Name is TapakKaki <br><br> Nice to meet you! <br> Make yourself at home yach!
</body>
</html>
|
|
Perasan Tak 2 Perkara_ ?
- Apabila saya menambahkan atribut tambahan pada tag <hr> , saya meletakkan arahan tambahan --> color="black" selepas perkataan hr. Juga, arahan bagi sifat tambahan tag <hr> ini saya letakkan di dalam breket ( < . . . > )tag itu sendiri. Kenapa? Sebab sifat atau atribut itu tag <hr> yang punya. Jadi, mesti lah arahan tu duduk di dalam tag itu sendiri ye tak ?
- Di sekolah, kita mengeja warna dalam Bahasa Inggeris begini --> colour
Ejaan ini adalah mengikut bahasa British-English (atau English-English), dan ia adalah ejaan dan bahasa yang betul.
Dalam bahasa html, kita menggunakan ejaan dalam bahasa American-English, dan ejaannya adalah sedikit berbeza. Maka ini harus anda ambil perhatian.
Colour dalam aturcara HTML ditaip color
Jika ada sebarang perubahan ejaan dalam HTML yang akan kita temui nanti, InsyaAllah saya akan beritahu anda. Kalau saya tak perasan, tolong beritahu saya yach!
|
Jadi, outputnya bagaimana ?
| TapakKaki's Site !
Hai!My Name is TapakKaki
Nice to meet you!
Make yourself at home yach! |
Tag <hr> saye warna hitam !
|
Khas Untuk Pengguna Browser Netscape Navigator
Kepada mereka yang menggunakan browser Netscape Navigator untuk melihat output diatas, anda tidak akan dapat melihat output <hr> ini diwarnakan.
Kod yang dimasukkan ini betul, tetapi untuk browser Netscape Navigator, mungkin memerlukan kod yang berbeza untuk memaparkan warna pada horizontal rule ini.
Anda boleh menambah atribut noshade pada tag <hr> untuk menjadikan horizontal rule kita solid (akan nampak lebih kemas).
|
<hr color="black" noshade>
|
|
|
I WANT 44-inch COLOR TV !!
|
^^ Seperti tajuk di atas, selain memberi warna pada tag <hr> kita juga boleh mengubah saiznya.. Mari kita lihat bersama bagaimana aturcaranya diletakkan:
<html>
<head><title> Welcome 2 My Site </title></head>
<body>
TapakKaki's Site ! <br>
<hr color="black" width="50%">
Hai! <p> My Name is TapakKaki <br><br> Nice to meet you! <br> Make yourself at home yach!
</body>
</html>
|
|
Ukuran Saiz Dalam Dunia HTML_
Nampak tak pada aturcara di atas, saya meletakkan 50% sebagai jarak panjang tag <hr>. Ini bermaksud, panjang <hr> akan menjangkau seperdua (setengah / sebahagian) daripada saiz browser anda. (kalau menjangkau penuh, maka width-nya adalah 100% - ini adalah ukuran default)
Walaupun saya tak akan pergi jauh tentang perkara ini di masa ini, tapi apa yang kita perlu tahu, ada 2 cara atau pendekatan sesuatu ukuran itu dapat kita beri dalam aturcara bahasa HTML.
- Pertama - dengan memberi saiz dalam bentuk peratusan (percentage).
- Kedua - dengan memberi saiz dalam bentuk piksel (pixels)
Untuk waktu ini, just please keep in mind that you can do these two things to most tags.
|
Outputnya ?:
| TapakKaki's Site !
Hai!My Name is TapakKaki
Nice to meet you!
Make yourself at home yach! |
Tag <hr> di berikan saiz !
|
| TV NI AKU NAK LETAK BELAH ... KIRI LAH.. |
^^ Satu lagi atribut yang penting yang perlu anda tahu iaitu
--> kaedah positioning atau kaedah peletakan lokasi.
Dalam output saya di atas, setelah tag <hr> dipendekkan kepada 50%, garisan melintang kita akan terbawa ke tengah secara default. Tapi, memandangkan perkataan kepada tajuk browser saya iaitu TapakKaki's Site! berada di belah kiri page, maka saya memerlukan garisan <hr> berada di sebelah kiri juga. Disini, arahan positioning untuk <hr> diperlukan untuk memposisikan garisan melintang kita ini ke kiri.
|
Maka, bagaimana arahan aturcaranya ?:
<html>
<head><title> Welcome 2 My Site </title></head>
<body>
TapakKaki's Site ! <br>
<hr color="black" width="50%" align="left">
Hai! <p> My Name is TapakKaki <br><br> Nice to meet you! <br> Make yourself at home yach!
</body>
</html>
|
|
Jenis Posisi_
Terdapat 3 jenis posisi yang boleh kita berikan pada tag <hr>, iaitu:
- Left positioning
- Center positioning (lihat ejaan center, bukan centre)
- Right positioning
|
Output pada browser akan kelihatan seperti di bawah selepas kita menentukan positioning kepada garisan <hr> dengan betul :
| TapakKaki's Site !
Hai!My Name is TapakKaki
Nice to meet you!
Make yourself at home yach! |
Tag <hr> di berikan posisi ! Horeee!!!
|
a010
Resepi 7 - TAG <b> , TAG <i> DAN TAG <u>
Bahan-bahan:
01. Notepad
02. Browser
03. Sebaik-baiknya mempunyai pemahaman dalam Resepi-resepi sebelum ini
04. Tag-tag asas HTML
05. Tag <br> dan <p>
06. Tag <hr>
07. Tag tambahan HTML yang terbaru iaitu
- Tag <b> . . . </b>
- Tag <i> . . . </i>
- Tag <u> . . . </u>
Cara membuat:
The simplest form of tags dalam bahasa aturcara HTML mungkin adalah ketiga-tiga tag ini:
- Tag <b> . . . </b> (menebalkan teks)
- Tag <i> . . . </i> (menyendengkan teks) dan
- Tag <u> . . . </u> (menggariskan teks)
Ketiga-tiga tag ini boleh anda gunakan serentak (sama ada digunakan berasingan dalam satu ayat, atau digabungkan ketiga-tiganya dalam satu ayat atau perkataan), dimana jika anda ingin menjadikan sesuatu teks itu tebal, sendeng (italic) atau bergaris.
Mari kita lihat contoh:
<html>
<head><title> Welcome 2 My Site </title></head>
<body>
<b>TapakKaki's Site !</b> <br>
<hr color="black" width="50%" align="left">
Hai! <p> <u>My Name is <i>TapakKaki</i></u> <br><br> Nice to meet you! <br> Make yourself at home yach!
</body>
</html>
|
Dan outputnya akan kelihatan begini:
| TapakKaki's Site !
Hai!My Name isTapakKaki
Nice to meet you!
Make yourself at home yach! |
Penggunaan Tag <b> , <i> dan <u>
|
| Pandang Lah, Lihat Lah, Tiru Macam Saya_ |
Jika anda perhatikan dalam aturcara di atas, tag <i> telah saya letakkan SEBELUM tag <u> ditutup. Seperti yang saya katakan sebentar tadi, ketiga-tiga tag ini boleh kita gunakan dimana-mana, dimulakan dimana-mana, dan diakhirkan dimana-mana, asalkan di tempat itu ada teks untuk kita format.
Dalam contoh di atas, menerangkan, di dalam teks yang bergaris, kita boleh menjadikan sebahagian teks yang bergaris itu menyendeng (atau kesemua sekali teks itu). Maka, kalau kita tebal kan, sendeng kan dan garis kan teks yang sama pun boleh. Tiada kesalahan disitu.
Contoh:
<b><i><u> TapakKaki </u></i></b> --> TapakKaki
Sila perhatikan juga tertib tag-tag ini ditaipkan. Sebagai contoh:
<b><i> TapakKaki </b></i> --> akan menghasilkan output TapakKaki
Tetapi tertib susunan tag nya tidak tertib / tidak tersusun dengan baik.
<b><i> TapakKaki </i></b> --> juga akan menghasilkan output TapakKaki
Tetapi tertib susunan tag yang sebegini adalah yang digalakkan.
|
|
a011
Resepi 8 - TAG <pre> DAN TAG <xmp>
Bahan-bahan
01. Notepad
02. Browser
03. Sekurang-kurangnya mesti memahami Resepi 1 hingga Resepi 5 dengan baik
04. Tag-tag asas HTML
05. Tag tambahan HTML yang terbaru iaitu
- Tag <pre> . . . <pre>
- Tag <xmp> . . . </xmp>
Cara membuat:
|
Perhatian! :
Penggunaan Tag <pre> dan <xmp> adalah untuk pengguna Novice dan ke atas. Walaubagaimanapun, pengetahuan tentang tag-tag ini diperkenalkan pada awal pembelajaran bahasa aturcara HTML.
|
Tag <pre> dan tag <xmp> adalah 2 jenis tag yang khas. Bagi saya, kedua-dua tag ini saya lihat sebagai tag yang bersifat 'out-of-the-box'. Ini adalah keupayaannya yang istimewa.
Jika tag ini digunakan, biasanya kita tidak akan memerlukan penggunaan tag-tag HTML yang lain selain daripada tag-tag HTML yang asas sahaja kerana tag <pre> dan <xmp> cukup berkuasa untuk mengawal keseluruhan format output pada browser. Dengan kata lain, paparan output pada browser akan kelihatan seperti di Notepad! (bukan sebijik macam kat Notepad, tapi sipi-sipi..) asalkan selama tag ini digunakan.
<pre> bermaksud "prefix tag" dan <xmp> bermaksud "example tag"
Peletakan aturcara untuk kedua-dua tag ini adalah seperti di bawah:
- <pre> . . . . . </pre>
- <xmp> . . . . . </xmp>
Tag <pre> atau tag prefix ini biasanya digunakan dalam e-borang (electronic form). Dengan kata lain tag ini akan memberi arahan pada browser agar memproses output mengikut corak binaan yang kita buat pada Notepad.
Tag <xmp> atau tag example ini biasanya digunakan untuk menulis atau memaparkan kod html di browser ( how to say this.. to make invisible code visible? Sama seperti apa yang dapat anda lihat di Notepad.). Dengan kata lain, browser tidak akan memproses outputnya secara 'browser style' tetapi akan mengendahkan proses itu dan membiarkan Notepad melakukan apa saja.
Contoh Penggunaan Tag <pre>_
Anda boleh bina fail baru untuk latihan ini jika mahu.
Juga perhatikan, pada Notepad, saya telah susun aturan teksnya mengikut format saya. Sila perhatikan aturcara di bawah:
<html>
<head><title> Test </title></head>
<body>
<pre>
Nama : TapakKaki
Jantina : Lelaki
Tempat Tinggal: N9
</pre>
</body>
</html>
|
Adakah outputnya sama seperti format yang kita bina pada Notepad ?:
|
Nama : TapakKaki
Jantina : Lelaki
Tempat Tinggal: N9
|
Penggunaan Tag <pre> dan Outputnya di Browser
Outputnya sama. Dengan menggunakan tag <pre> . . . </pre>, teks-teks yang berada di dalam kawasan naungannya akan di paparkan sama dengan format yang kita buat di Notepad. Ini adalah fungsi tag <pre> .
Tambahan Terbaru Kepada Tutorial
Di dalam kawasan tag <pre> , kita boleh menggunakan tag-tag lain dan tag-tag tambahan ini tidak akan mengganggu format perletakan teks yang telah kita susun.
Contoh:
<html>
<head><title> Test </title></head>
<body>
<pre>
<b>Nama</b> : <i>TapakKaki</i>
<b>Jantina</b> : Lelaki
<b>Tempat Tinggal</b>: N9
</pre>
</body>
</html>
|
Walaupun terdapat beberapa tag tambahan yang seakan mengganggu perletakan kedudukan teks yang telah kita setkan di atas, outputnya akan tetap sama:
|
Nama : TapakKaki
Jantina : Lelaki
Tempat Tinggal: N9
|
Menngunakan Tag <pre> bersama dengan tag-tag lain dan Outputnya di Browser
Contoh Penggunaan Tag <xmp>_
Anda boleh bina fail baru untuk latihan ini jika mahu.
<html>
<head><title> Test </title></head>
<body>
<xmp><![CDATA[
Untuk tebalkan teks, saya gunakan tag <b> . . <b>
Untuk sendengkan teks, saya gunakan tag <i> . . </i>
Untuk gariskan teks, saya gunakan tag <u> . . </u>
]]> </xmp>
</body>
</html>
|
Outputnya:
| |
<![CDATA[
Untuk tebalkan teks, saya gunakan tag <b> . . <b>
Untuk sendengkan teks, saya gunakan tag <i> . . </i>
Untuk gariskan teks, saya gunakan tag <u> . . </u>
]]>
|
Penggunaan Tag <xmp> dan Outputnya di Browser
Daripada output diatas, dapat kita perhatikan, tag boleh muncul di browser. Ini adalah kerana dengan adanya tag <xmp> , maka keadaan ini menjadi mungkin.
Tak percaya ? Cuba buangkan tag <xmp> ( jangan lupa buang penutupnya sekali </xmp> ) pada Notepad anda, kemudian Save dan Refresh browser anda. Lihat apa yang berlaku.. Tag-tag HTML tidak akan berupaya di paparkan secara terus JIKA tidak menggunakan tag <xmp>
|
Nota:
Resepi 8 - Tag <pre> dan Tag <xmp> adalah jenis-jenis tag yang harus digunakan berhati-hati.
Satu perkara lagi yang perlu anda ambil berat. Daripada Resepi 1 hingga kini (Resepi 8), ada sesetengah tag yang tidak memerlukan tag penutup (seperti tag <br> , <p> dan <hr> - setakat ini ada 3 sahaja)
Ada tag yang memerlukan tag penutup seperti tag
<html> . . . </html> , <i> . . . </i> ,
<pre> . . . </pre> dan banyak lagi.
Jadi, extra careful when doing complex programming my frenz. Biar lambat, asal selamat.
|
I need a break.. Kita minum dulu. ^^
Selepas ini, kita akan melihat beberapa ralat yang mungkin kita lakukan apabila menggunakan tag-tag yang disebutkan ini yang akan saya selitkan di dalam tutorial-tutorial akan datang.
Sekianlah.
|
|  | Some People Came Into Our Lives And Quickly Go Away,
Some Stay For A While And Leave Footprints Into Our Hearts,
And We Will Never Be The Same |
|
wanna be friends?
MHusniUtmKL
@
gmail.com
at your service |
| please take your time a minute or two to look at the picture below: |
| Dan jangan lah pula kita bersedih semata-mata untuk mempersoalkan ketentuan Allah Kerana alangkah beruntungnya mereka di Akhirat kelak... adakah kita seuntung mereka ? |
guys, kalau ada forward yang bet, please emelkan kepada aku ok?
thankx
^ skroll kat atas ^ |
| INGAT JANJI? Pada satu masa yang ditetapkan, kita pasti dirisik. Pertunangan sejak azali. Dihujung hidup nanti berlangsungnya perkahwinan dengan maut, hantarannya sakit dan nazak. Tamu bertandang menghadiahkan tangisan. Pengantin dimandikan, dipakaikan baju putih. Wangian gaharu cendana jadi pelamin. Pengantin bersanding sendirian, diarak keliling kampung, berkompang azan dan kalimah kudus. Akad nikahnya bacaan talkin berwalikan liang lahad, bersaksikan nisan. Siraman mawar keluarga terdekat. Malam pertama bersama kekasih yang dindingnya tanah dan menuntut janji pernikahan.. |
korang ada link ke site yang offer lagu-lagu mp3 yang bet? kasi kat aku alamat eh boley? emel kat aku eh?
^ skroll kat atas ^ |
cari mp3 F.Fantasy
I - XIII ?
ffextreme.com |
JANGAN,
YA ALLAHKetika aku sedang terlelap
Jangan matikan aku ya Allah
Bilamana dunia membutakan matahatiku,
Jangan matikan aku ya Allah Ketika umurku tenggelam tiada erti,
Jangan matikan aku ya Allah Tatkala langkahku terseret khayalan,
Jangan matikan aku ya Allah Ketika lidahku kelu dengan zikirmu,
Jangan matikan aku ya Allah Ketika jiwaku hampa dengan rahmatmu,
Jangan matikan aku ya Allah Ketika diriku terasa ringan menabur perih,
Jangan matikan aku ya Allah
Ketika hatiku penuh lumpur kenistaan,
Jangan matikan aku ya Allah Ketika nama-Mu berat dalam hatiku,
Jangan matikan aku ya Allah Ketika nama-Mu berat dalam nafasku,
Jangan matikan aku ya Allah Tapi, andai diriku ini di dalam keredhaan- Mu,
Matikanlah aku...
Oleh: <|man76|>
|
Ilmu Adalah Langit
Ilmu Adalah Samudera
Lama Sudah Ku Berjalan
Tiada Lagi Ku Tampak HujungnyaPendeta Za'aba |
| SYAIR RABI'ATUL ADAWIYAH AL-I'TIROOF
(Haddad Alwi) Ilaahi lastu
Lilfirdausi ahlan,
Walaa aqwaa
'alannaaril jahiimi. Fahabli taubatan
Waqhfir dzunuubi,
Fa innaka
Ghoofiruddzambil 'adziimi. Dzunubii mitslu
A'daadir rimaali,
Fahabli taubatan
Yaa dzaljalaali. Wa'umrii naaqishun
Fiikulliyaumi,
Wa dzambii zaa-idun
Kaifahtimali. Ilaahi 'abdukal
'aashi ataaka,
Muqirron biddzunuubi
Waqod da'aaka. Fa in taghfir fa anta
Lidzaaka ahlun,
Wa in tadrud
Faman narjuu siwaaka. |
Kalendar Islam 1428
2007
Bermula:
11 Zulhijjah, 1427 | | 1 Januari, 2007
|
|
A | I | S | R | K | J | S |
 | 11
1 | 12
2 | 13
3 | 14
4 | 15
5 | 16
6 |
17
7 | 18
8 | 19
9 | 20
10 | 21
11 | 22
12 | 23
13 |
24
14 | 25
15 | 26
16 | 27
17 | 28
18 | 29
19 |
|
|
Bermula:
1 Muharram, 1428
TAHUN BARU | | 20 Januari, 2007
|
|
A | I | S | R | K | J | S | |
| | | | | | 1
20 |
2
21 | 3
22 | 4
23 | 5
24 | 6
25 | 7
26 | 8
27 |
9
28 | 10
29 | 11
30 | 12
31 | 13
1 | 14
2 | 15
3 |
16
4 | 17
5 | 18
6 | 19
7 | 20
8 | 21
9 | 22
10 |
23
11 | 24
12 | 25
13 | 26
14 | 27
15 | 28
16 | 29
17 |
30
18
|
|
Bermula:
1 Safar, 1428 | | 19 Februari, 2007
|
|
A | I | S | R | K | J | S | |
| 1
19 | 2
20 | 3
21 | 4
22 | 5
23 | 6
24 |
7
25 | 8
26 | 9
27 | 10
28 | 11
1 | 12
2 | 13
3 |
14
4 | 15
5 | 16
6 | 17
7 | 18
8 | 19
9 | 20
10 |
21
11 | 22
12 | 23
13 | 24
14 | 25
15 | 26
16 | 27
17 |
28
18 | 29
19 | | | | | |
|
Bermula:
1 Rabi'ul-Awwal, 1428 | | 20 Mac, 2007
|
|
A | I | S | R | K | J | S | |
| | 1
20 | 2
21 | 3
22 | 4
23 | 5
24 |
6
25 | 7
26 | 8
27 | 9
28 | 10
29 | 11
30 | 12
31 |
13
1 | 14
2 | 15
3 | 16
4 | 17
5 | 18
6 | 19
7 |
20
8 | 21
9 | 22
10 | 23
11 | 24
12 | 25
13 | 26
14 |
27
15 | 28
16 | 29
17 | 30
18 | | | |
|
Bermula:
1 Rabi'ul-Akhir, 1428 | | 19 April, 2007
|
|
A | I | S | R | K | J | S | |
| | | | 1
19 | 2
20 | 3
21 |
4
22 | 5
23 | 6
24 | 7
25 | 8
26 | 9
27 | 10
28 |
11
29 | 12
30 | 13
1 | 14
2 | 15
3 | 16
4 | 17
5 |
18
6 | 19
7 | 20
8 | 21
9 | 22
10 | 23
11 | 24
12 |
25
13 | 26
14 | 27
15 | 28
16 | 29
17 | | |
|
Bermula:
1 Jumada al-Ula, 1428 | | 18 Mei, 2007
|
|
A | I | S | R | K | J | S | |
| | | | | 1
18 | 2
19 |
3
20 | 4
21 | 5
22 | 6
23 | 7
24 | 8
25 | 9
26 |
10
27 | 11
28 | 12
29 | 13
30 | 14
31 | 15
1 | 16
2 |
17
3 | 18
4 | 19
5 | 20
6 | 21
7 | 22
8 | 23
9 |
24
10 | 25
11 | 26
12 | 27
13 | 28
14 | 29
15 | |
|
Bermula:
1 Jumada al-Akhirah, 1428 | | 16 Jun, 2007
|
|
A | I | S | R | K | J | S | |
| | | | | | 1
16 |
2
17 | 3
18 | 4
19 | 5
20 | 6
21 | 7
22 | 8
23 |
9
24 | 10
25 | 11
26 | 12
27 | 13
28 | 14
29 | 15
30 |
16
1 | 17
2 | 18
3 | 19
4 | 20
5 | 21
6 | 22
7 |
23
8 | 24
9 | 25
10 | 26
11 | 27
12 | 28
13 | 29
14 |
30
15
|
|
Bermula:
1 Rejab, 1428 | | 16 Julai, 2007
|
|
A | I | S | R | K | J | S | |
| 1
16 | 2
17 | 3
18 | 4
19 | 5
20 | 6
21 |
7
22 | 8
23 | 9
24 | 10
25 | 11
26 | 12
27 | 13
28 |
14
29 | 15
30 | 16
31 | 17
1 | 18
2 | 19
3 | 20
4 |
21
5 | 22
6 | 23
7 | 24
8 | 25
9 | 26
10 | 27
11 |
28
12 | 29
13 | | | | | |
|
Bermula:
1 Sya'ban, 1428 | | 14 Ogos, 2007
|
|
A | I | S | R | K | J | S | |
| | 1
14 | 2
15 | 3
16 | 4
17 | 5
18 |
6
19 | 7
20 | 8
21 | 9
22 | 10
23 | 11
24 | 12
25 |
13
26 | 14
27 | 15
28 | 16
29 | 17
30 | 18
31 | 19
1 |
20
2 | 21
3 | 22
4 | 23
5 | 24
6 | 25
7 | 26
8 |
27
9 | 28
10 | 29
11 | 30
12 | | | |
|
Bermula:
1 Ramadhan, 1428 | | 13 September, 2007
|
|
A | I | S | R | K | J | S | |
| | | | 1
13 | 2
14 | 3
15 |
4
16 | 5
17 | 6
18 | 7
19 | 8
20 | 9
21 | 10
22 |
11
23 | 12
24 | 13
25 | 14
26 | 15
27 | 16
28 | 17
29 |
18
30 | 19
1 | 20
2 | 21
3 | 22
4 | 23
5 | 24
6 |
25
7 | 26
8 | 27
9 | 28
10 | 29
11 | 30
12 | |
|
Bermula:
1 Syawwal, 1428 | | 13 Oktober, 2007
|
|
A | I | S | R | K | J | S | |
| | | | | | 1
13 |
2
14 | 3
15 | 4
16 | 5
17 | 6
18 | 7
19 | 8
20 |
9
21 | 10
22 | 11
23 | 12
24 | 13
25 | 14
26 | 15
27 |
16
28 | 17
29 | 18
30 | 19
31 | 20
1 | 21
2 | 22
3 |
23
4 | 24
5 | 25
6 | 26
7 | 27
8 | 28
9 | 29
10 |
|
Bermula:
1 Zulqa'dah, 1428 | | 11 November, 2007
|
|
A | I | S | R | K | J | S |
1
11 | 2
12 | 3
13 | 4
14 | 5
15 | 6
16 | 7
17 |
8
18 | 9
19 | 10
20 | 11
21 | 12
22 | 13
23 | 14
24 |
15
25 | 16
26 | 17
27 | 18
28 | 19
29 | 20
30 | 21
1 |
22
2 | 23
3 | 24
4 | 25
5 | 26
6 | 27
7 | 28
8 |
29
9 | 30
10 | | | | | |
|
Bermula:
1 Zulhijjah, 1428 | | 11 Disember, 2007
|
|
A | I | S | R | K | J | S | |
| | 1
11 | 2
12 | 3
13 | 4
14 | 5
15 |
6
16 | 7
17 | 8
18 | 9
19 | 10
20 | 11
21 | 12
22 |
13
23 | 14
24 | 15
25 | 16
26 | 17
27 | 18
28 | 19
29 |
20
30 | 21
31 | 22
1 | 23
2 | 24
3 | 25
4 | 26
5 |
27
6 | 28
7 | 29
8 | | | | |
|
|
| DO IT ANYWAY People are often unreasonable, illogical and self-centered.
Forgive them anyway.
If you are kind, people may accuse you of selfish, ulterior motives.
Be kind anyway.
If you are successful, you will win some false friend and some true enemies.
Succeed anyway.
If you are honest and frank, people may cheat you.
Be honest and frank anyway.
What you spend years building, someone could destroy it overnight.
Built it anyway.
If you find serenity and happiness, they may be jealous.
Be happy anyway.
The good you do today, people will often forget tomorrow.
Do good anyway.
Give the world your best and it may never be enough.
Give the world your best anyway.
You see,
in the final analysis,
It is between you and GOD
It was NEVER between you and them anyway.
by
Mother Theresa
|
ONSLAUGHT
...IS COMING...
AGAIN!
in back issues
|
PREVENT HP FROM BEING STOLEN
To check your hand phone's serial number, key in the following digits on your phone:
* # 0 6 #
A 15 digit code will appear on the screen. This number is unique to your handset.
Write it down and keep it somewhere safe. Should your phone get stolen, you can phone/contact your service provider and give them this code. They will then be able
to block your handset so even if the thief changes the SIM card your phone will be totally useless.
You probably won't get your phone back, but at least you know that whoever stole it can't use/sell it either. If everybody did this, there would be no point in stealing mobile phones.
From:
zaidan karim
spejli@hotmail.com
|
| HARGA CINTA Apabila Kemiskinan Berada Di Ambang Pintu, Cinta Lari Di Ambang Tingkap
HAMKA
|
|
Page 2 | 
