Sekarang
buka Notepad dan taipkan seperti berikut...
<html>
</html>
Kod-kod
html terdiri daripada tag-tag. Setiap yang terkandung dalam huruf '<'
dan huruf '>'
dinamakan tag. Tag ini tidak akan dipaparkan oleh browser html anda, sebaliknya
ia akan diterjemahkan sebagai corak paparan. Di dalam contoh pertama, anda
telah dikenalkan dengan;
tag
<html>
Tag-tag
tersebut mempunyai pembuka dan penutupnya. Di atas tadi itu adalah pembuka
tag. Untuk membuat penutup bagi tag, anda cuma perlu tambahkan tanda '/'
daripada pembuka tag. Ingatkan itu, ini kerana semua tag yang ada akan
mempunyai pembuka dan penutupnya.
Mari
kita masukkan kod-kod berikutnya. Setiap tag <html> perlulah dipasangkan
tag <head> nya.
<html>
<head>
<--pembukan tag
</head>
<--penutup tag
</html>
Dan sesuatu yang mengikuti
dengan tag <head> (sekarang) adalah tag <title>.
<html>
<head>
<title></title>
</head>
</html>
Akhir
sekali anda boleh masukkan tajuk title untuk laman anda. Sebagai contoh
taipkan;
<html>
<head>
<title>Ini
adalah laman pertama saya</title>
</head>
</html>
Kini
anda telah pun membuat satu dokumen html yang paling asas. Cuba simpankan
di dalam folder yang telah anda sediakan dengan akhiran .htm atau .html
bukan dengan akhiran .txt lagi. Jika anda menyimpannya dengan fail akhiran
.txt, ia tidak akan menjadi sebuah fail html. Cuba lihat fail yang telah
disimpan tersebut di dalam Windows Explorer anda. Icon seperti dibawah
akan kelihatan di dalam folder anda. Dwi-klik icon tersebut dan anda akan
lihat hasilnya. Ia tidak akan memaparkan apa-apa kerana anda belum lagi
memasukkan apa-apa jua di dalam laman anda. Kod-kod yang anda taipkan tersebut
adalah arahan-arahan yang tidak akan dipaparkan di dalam laman anda. Sila
kembali semula ke Notepad anda untuk meneruskan kembali pembelajaran anda.
Jika
anda telah menutup fail Notepad anda tadi, anda boleh membukanya semula
dengan dua cara. Pertama jika anda pengguna Internet Explorer, anda boleh
klik menu [View] - [Source] dan secara automatik tetingkap Notepad akan
keluar dengan kod-kod html asal tadi. Jika anda mennunakan Netscape pula,
anda boleh buka tetingkap Notepad dan klik menu [File] - [Open], pilih
All-files, dan dwi-klik fail anda tadi.
|
|
| [jika anda menggunakan Netscape] |
[jika anda menggunakan Explorer] |
Dua perkara
yang telah anda pelajari di atas tadi adalah, pertama rangka kepada fail
html anda. Dan keduanya, adalah tajuk bagi fail html anda. Lihat di bahagian
atas browser anda. Tajuk yang anda taipkan di dalam tag head tersebut akan
muncul di bahagian atas.
Kandungan laman anda
Bagi meneruskan pembelajaran selanjutnya
saya akan menerangkan lebih lanjut berkenaan tag <body>. Dan saya akan
abaikan tag <html>, <head> dan <title>. Ini kerana ia tidaklah
terlalu penting dalam laman anda.
<html>
<head>
<title>Ini
adalah laman pertama saya</title>
</head>
<body>
</body>
</html>
Memasukkan teks
Kita akan mula memasukan sesuatu
ke dalam laman anda. Sekarang cuba anda taipkan Sembahyang itu tiang agama
di dalam tag <body> seperti berikut:
<html>
<head>
<title>Ini
adalah laman pertama saya</title>
</head>
<body>
Sembahyang
itu tiang agama
</body>
</html>
Sembahyang itu tiang agama |
Setiap kali anda mengubah fail anda
melalui Notepad, simpankan (save) ia semula, kemudian klik Reload atau
Refresh pada browser anda untuk mendapatkan hasil gerak kerja anda yang
terbaru.
Mengubah warna latar belakang
Saya fikir perkara pertama yang perlu
anda ketahui adalah bagaimana untuk menukarkan warna latar belakang laman
anda.
<body bgcolor="#FFFFFF">
Sembahyang itu tiang agama
</body>
|
Sembahyang itu tiang agama |
FFFFFF adalah arahan bagi warna putih.
Ada banyak lagi arahan di
sini.
Terdapat 256 warna pilihan bagi
laman web anda. Pilih sahaja mana yang anda suka dan lihat sendiri hasilnya.
Memasukkan latar bergambar
Atau anda boleh juga meletakkan gambar
sebagai latar belakang laman web anda bagi mengantikan warna tersebut.
Pastikan anda mempunyai gambar untuk dijadikan latar belakang dan masukkan
gambar tersebut di dalam satu folder yang sama dengan fail html anda. Contoh
gambar yang saya pilih adalah swirlies.gif.
<body background="swirlies.gif">
Sembahyang itu tiang agama
</body>
Ini adalah contoh laman yang berlatar
belakangkan gambar dan anda boleh pilih gambar yang anda suka. Jika anda
terlihat latar belakang lain dalam internet yang anda suka, anda boleh
salin (copy) gambar tersebut dengan klik pada latar belakang dan Save
Image As...
Atau anda boleh pilih latar belakang
seperti berikut:
<body background="bluebar.gif">
Sembahyang itu tiang agama
</body>
Baiklah, kita kembali semula kepada
warna putih.
<body bgcolor="#FFFFFF">
Sembahyang itu tiang agama
</body>
|
Sembahyang itu tiang agama |
Tulisan tebal
Kita boleh juga menebalkan tulisan
(bold).
<body bgcolor="#FFFFFF">
Sembahyang itu tiang <b>agama</b>
</body>
|
Sembahyang itu tiang agama |
Ini adalah arahan tag <b> bagi penebalan
tulisan, dan ini </b> adalah arahan tutup penebalan.
Tulisan condong
Atau anda boleh condongkan (italics)...
<body bgcolor="#FFFFFF">
Sembahyang itu<i>
tiang</i> <b>agama</b>
</body>
|
Sembahyang itu tiang agama |
Tulisan bergaris
...seterusnya garisan.
<body bgcolor="#FFFFFF">
<u>Sembahyang
itu</u> <i>tiang</i> <b>agama</b>
</body>
|
Sembahyang itu tiang agama |
Kembali semula kepada latar putih.
<body bgcolor="#FFFFFF">
Sembahyang itu tiang agama
</body>
|
Sembahyang itu tiang agama |
Penggunaan dua tag
Dan kita boleh juga cantumkan dua
arahan.
<body bgcolor="#FFFFFF">
Sembahyang itu tiang <i><b>agama</b></i>
</body>
|
Sembahyang itu tiang agama |
Untuk perhatian. Jika anda ingin gunakan
dua arahan tersebut, pastikan tag yang anda hasilkan tidak berserabut.
Lihat contoh di bawah...
<satu><dua></satu></dua>
Tag yang berserabut.... tidak sesuai
<satu><dua></dua></satu>
tag tersusun.... elok
Jenis tulisan mesin taip
Adakalanya tulisan yang hendak digunakan
adalah jenis mono-spaced, atau tulisan mesin taip.
<body bgcolor="#FFFFFF">
<tt>Sembahyang
itu tiang agama</tt>
</body>
|
Sembahyang itu tiang agama |
| Jenis regular
---> |
assalamualaikum
assalamualaikum
assalamualaikum |
| Jenis monospaced
---> |
assalamualaikum
assalamualaikum
assalamualaikum |
Saiz tulisan
Seterusnya kita tukar pula saiz tulisan
...
Pertama letakkan tag <font>
<body bgcolor="#FFFFFF">
Sembahyang itu tiang <font>agama</font>
</body>
Kemudian tentukan SAIZ yang anda
mahukan.
<body bgcolor="#FFFFFF">
Sembahyang itu tiang <font size=6>agama</font>
</body>
|
Sembahyang itu tiang agama |
Tulisan sekarang adalah bersaiz 6 :
| satu |
dua |
tiga |
empat |
lima |
enam |
tujuh |
| 1 |
2 |
3 |
4 |
5 |
6 |
7 |
Tetapan tulisan
Dua perkara yang perlu diketahui.
Pertama berkenaan <tag> yang akan mengarahkan browser untuk lakukan
sesuatu. Dan kod-kod arahan dalam <tag> seterusnya akan mengarahkan
browser apa yang perlu dibuat.
Keduanya berkenaan tetapan (defaults).
Perlu ada ketahui tetapan (default) adalah arahan supaya ia mengikut
arahan tetapan yang ditetapkan oleh browser anda. Mari kita lihat contohnya;
contoh yang terbaik adalah dalam arahan tulisan. Tetapan tulisan adalah
bersaiz 3. Jika anda tidak memberikan apa-apa arahan untuk tulisan, ia
akan tetap bersaiz 3 iaitu saiz tetapan bagi browser.
Setiap browser telah ditentukan tetapan
bagi saiz tulisan - jenis tulisan dan warnanya. Tetapan jenis tulisan adalah
Times New Roman 12pt dan tetapan jenis warna adalah hitam (black). Selepas
ini kita akan cuba mengubah tetapan tulisan tersebut. Seperti yang di atas
tadi kita telah pun mengubah saiz tulisan daripada saiz tetapan. Sekarang
kita cuba ubah jenis tulisan pula seperti jenis ARIAL atau COMIC SANS.
Browser juga telah menentukan warna
tetapan bagi tulisan, link sambungan, link aktif dan link telah dilawati
dalam arahan tag latar belakang. Berikut adalah tetapannya;
Tulisan adalah hitam (font)
Links sambungan
(link) adalah biru
Link Aktif
(active link) adalah merah
Link telah
dilawati (visited link) adalah unggu
Anda boleh menukarnya mengikut kemahuan
anda dengan mengubah tag <body> berikut.
<body bgcolor="#00000"
text="#FFFF00" link="#FF0000" vlink="#800000" alink="#008000">
Sembahyang itu tiang agama
</body>
Sembahyang itu tiang agama
Sembahyang itu tiang agama, siapa yang mendirikan
sembahyang maka dia telah mendirikan agamanya dan barang siapa yang meninggalkan
sembahyang maka dia telah merobohkan agamanya..
Anda akan lihat sekarang latar
belakang adalah hitam dan tulisan kuning.
Links adalah merah
Visited adalah merah samar
Dan active links adalah
hijau. |
Ubah tetapan
<body bgcolor="#FFFFFF">
Sembahyang itu tiang <font face="ARIAL">agama</font>
</body>
|
Sembahyang itu tiang agama |
Perlu diperhatikan, browser hanya akan
memaparkan jenis tulisan yang terdapat dalam komputer. Secara ringkasnya,
jika sesebuah komputer itu tidak mempunyai tulisan dari jenis yang
ditentukan, ia akan memaparkan jenis tulisan tetapan. Contoh; jenis tulisan
Impact
ini!. Jika ia tidak kelihatan ini bererti di dalam komputer anda tidak
ada tulisan dari jenis tersebut. Bolehkan ia diatasi? Ya! Boleh dengan
anda tentukan beberapa jenis tulisan dalam satu arahan. Cuma taipkan arahan
berikut... <font face="ARIAL, HELVETICA, LUCIDA SANS">Assalamualaikum</font>.
Bagi arahan ini, browser akan mencari
arahan jenis tulisan yang pertama iaitu ARIAL. jika ia jumpa ia akan memaparkannya.
Jika tidak, ia akan mencari jenis tulisan yang kedua iaitu HELVETICA dan
seterusnya kepada jenis tulisan LUCIDA SANS. Jika masih juga tidak dijumpai,
maka ia akan menggunakan jenis tulisan tetapan.
Saya harap anda sudah faham akan
beberapa perkara yang telah saya terangkan sebentar tadi dan tiada sebarang
masalah yang timbul.
Sekarang cubalah ubah mengikut citarasa
anda dan lihat hasilnya.
Mewarnakan tulisan
<body bgcolor="#FFFFFF">
Sembahyang itu tiang <font color="#FF0000">agama</font>
</body>
|
Sembahyang itu tiang agama |
Dan cuba pula arahan ini...
<body bgcolor="#FFFFFF">
Sembahyang itu tiang <font color="#FF0000"
face="ARIAL" size="7">agama</font>
</body>
|
Sembahyang itu tiang agama |
Dan tambahkan lagi arahan ini!
<body bgcolor="#FFFFFF">
Sembahyang itu tiang <u><i><b><font
color="#FF0000" face="ARIAL" size="7">agama</font></b></i></u>
</body>
|
Sembahyang itu tiang agama |
Ingat! Pastikan arahan tag arahan anda
tersusun.
<tag3><tag2><tag1>Assalamualaikum!</tag1></tag2></tag3>
Arahkan browser untuk satu arahan
tag dahulu kemudian tambahkan arahan di luar tag yang pertama. Contoh jika
anda memerlukan dua tag merah (red) dan
tebal (bold). Susunan tag anda mestilah seperti berikut..
<tag2><tag1><tag3>Assalamualaikum!</tag3></tag1></tag2>
Bukan seperti berikut...
<tag3><tag2><tag1>Assalamualaikum!</tag3></tag1></tag2>
(kebiasaan yang selalu terkeliru.)
