Monday, June 14, 2010

Tutorial HTML - 5 (ateonsoft.com/ayomaju.com)

HTMLSetelah tahu bagaimana membuat ordered list, atau list item yang berurutan atau sering kita menyebutnya nomor urut. Kalau yang biasa bekerja dengan microsoft word, maka list item ini sebenarnya adalah bullet and numbering. Kali ini masih membahas komponen Basic HTML Element. Pada tutorial HTML lengkap 5 saya sudah mengatakan akan membahas unordered list. Unordered list adalah list item yang tidak berurutan, jadi hanya berupa daftar data.

Unordered list


Kode yang digunakan adalah kode <UL></UL>, dan untuk itemnya sama yaitu kode <LI></LI>. Agar tidak berbelit perhatikan kode-kode dibawah ini:
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<P>Shedule for HTML Course</P>
<ul>
<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
</body>
</html>

Copy kode diatas dan paste notepad, setelah itu simpan dengan nama unorderedlist.html, jangan lupa harus diberi .html agar file bukannya disimpan sebagai text biasa tapi disimpan sebagai file HTML. Kalau sudah maka file yang didapatkan akan seperti dibawah ini:

Shedule for HTML Course


  • Sunday

  • Monday

  • Tuesday

  • Wednesday


Sudah tahu kan maksudnya? list item diatas adalah list item standart, biasanya menggunakan bullet bundar. Jika ingin model lainnya silahkan lihat tabel dibawah ini:


TagAtributValueDescription
<ul>typesquarebullet kotak
diskbullet titik
circlebullet lingkaran

Cara penggunaan tabel diatas seperti dibawah ini:
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<P>Shedule for HTML Course</P>

<ul type="square">

<li>Sunday</li>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
</ul>
</body>
</html>

Hasilnya akan seperti dibawah ini:

Shedule for HTML Course



  • Sunday

  • Monday

  • Tuesday

  • Wednesday

Saya kira sudah cukup jelas penjelasan mengenai unordered list beserta atributnya, Penjelasan pada artikel mendatang membahas tentang definition list. Selamat mencoba, sampai jumpa di Tutorial HTML lengkap 6.

feed dari situs: http://www.ateonsoft.com

No comments:

Post a Comment