Tutorial 3: Buat laman web guna notepad

Ok, untuk tutorial kali ini aku akan ajar macam mana nak buat menu yang interaktif pada website menggunakan notepad. Sebelum tu rujuk dulu tutorial 1 dan tutorial 2 supaya mudah sikit nak faham untuk tutorial kali ini.

Kali ni aku akan mengajar satu lagi elemen dalam html iaitu <ul>……</ul>, <li>…..</li> dan <a href=”#”>……..</a>. Nak tahu apa semua ni, buka notepad korang dan isikan kod seperti di bawah:

Nampak tak ada penambahan kod <ul>…</ul> tu? Tu la kod bagi navigasi menu pada website korang. Lepas tu yang <li>….</li> tu pulak boleh dianggap sebagai list untuk menu. Maksudnya, apa yang patut ada pada menu la. Manakala yang <a href=”#”>…..</a> tu pulak adalah hypertext reference, bermaksud perkataan yang boleh diklik dan akan dilinkan kepada halaman yang lain atau url yang lain. Secara ringkas macam ni:

<ul>…</ul> ialah kod bagi navigasi menu

<li>….</li> ialah list atau perkara2 yang patut ada pada menu

<a href=”#”>…..</a> ialah kod bagi link yang boleh ditekan untuk ke halaman yang lain.

Lepas korang dah masukkan kod di atas, ini la hasilnya:

Nampak tak dah ada senarai menu pada website anda.

Ok…sekarang tambah pula kod pada bahagian <style>……</style> untuk <ul>….</ul>:

ul{list-style:none;} bermaksud untuk membuang bullet list pada menu tersebut supaya website kelihatan lebih kemas. ul merujuk kepada menu tersebut.

Untuk kod di atas aku ada ubah pada bahagian <li><a href=”#”>Home</a><li> kepada <li><a href=”http://caspositif.blogspot.com/”></a>. Ini bermaksud apabila korang tekan ‘Home’, korang akan dibawa ke halaman blog ini.

 Dan lagi satu aku ada tambah pada bahagian <style> untuk h, p1 dan p2 tu benda ni: {padding-left: 40px;}. Padding tu kalau nak diikutan maksudnya mendayung. Jadi {padding-left:40px;} membawa maksud yang  h,p1 dan p2 akan berdayung ke arah kiri dan menyebabkan ia bergerak ke kanan. Aku tambah kod ni nak biar header dan paragraph bergerak ke kanan sedikit. Maka website korang akan jadi macam ni:

Bullet pada menu akan hilang. Ok….seterusnya tambah kod ini:

ul li{display:inline block;} bermaksud menu akan disusun secara melintang, bukan lagi seperti list tadi.

ul li{text-align:center;} bermaksud perkataan pada menu tersebut akan diletakkan di tengah2 setiap blok menu.

Website korang akan jadi camni:

Nampak tak? Menu disusun secara melintang bukan lagi menegak. Ok …selepas tu tambah kod ni pula:

ul li a{text-decoration:none;} akan membuang garisan pada perkataan, bermaksud segala format pada perkataan akan dihilangkan.

ul li a{display:block;} bermaksud menunjukkan blok pada menu.

ul li a{width:120px;height:30px;} adalah untuk menentukan tinggi dan lebar blok tersebut.

Website akan jadi macam ni pulak:

Ok…last sekali tambah kod ni pulak:

ul li hover:a{background-color:brown;} bermaksud warna latar belakang blok akan menjadi coklat jika dihalakan dengan cursor mouse.

Jadi, website akan jadi begini:

Sekarang website korang dah jadi lebih interaktif. Korang boleh la cuba buat mengikut citarasa korang sendiri kalau korang nak warna latar belakang tu jadi warna lain ke. Ikut suka korang la nak letak warna apa. Cukup la setakat ini...lain kali aku sambung lagi,

Selamat mencuba!

• Tutorial pertama: buat website guna notepad
• Tutorial ke -2: buat website guna notepad
• Tutorial ke -4: buat website guna notepad