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,


12 ulasan:

  1. sangat200xxxxxxxxxxxxx membantu.
    Tk for sharing this info.

    BalasPadam
    Balasan
    1. You're welcome. Semoga entri ni dapat memberi manfaat kapada org lain jugak.

      Padam
  2. Macam mana nak masukkan gambar dalam website

    BalasPadam
    Balasan
    1. Boleh refer link ni bawah ni:

      kod masukkan gambar

      Kalau ikut kan guna kod:

      (open tag)img src="url gambar" width="letak size lebar gambar" height="letak size tinggi gambar"(close tag)

      Open tag: <
      Close tag: >

      Padam
  3. abang boleh tolong saye

    BalasPadam
  4. Salam nak tanya, if nak masukkan any transaction payment dekat website tahu tak? Saya nak buat untuk assignment ����

    BalasPadam
    Balasan
    1. Wasalam. Assigment buat ecommerce website ke?

      Nak kena buat transaction payment betul atau kena buat checkout form(add to cart form) sahaja?

      Saya rasa awak nak buat untuk add to cart form. Ni benda yang saya tak mampu nak ajar lagi. Tapi boleh cuba google how to create add to cart form using html/css/javascript/php

      Padam
    2. Yep, saya kena buat assignment ecommerce website. Kalau nak buat transaction payment betul, mcm nak kena ada bukti kita dah buat payment dekat kedai tersebut. So saya kena google add to cart form jugak ya if nak buat transaction betul tu?

      Padam
    3. Sebenarnya saya pun kurang faham lagi ni task assignment awak nak kena buat apa sebenarnya.

      Rasanya awak kena buat satu page untuk buat add to cart form. Lepas tu details customer dan bukti pembayaran akan dihantar ke database sebaik sahaja customer klik bayar.

      Ya awak kena google add to cart form dan google sekali macam mana nak link kan details user tadi ke database.

      Ni sy agak-agak je sbb sy pun tak tahu soalan assignment awak tu mcm mana dan language apa yang perlu digunakan.

      Padam

Related Posts Plugin for WordPress, Blogger...