Setelah 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:
| Tag | Atribut | Value | Description |
|---|
| <ul> | type | square | bullet kotak |
| disk | bullet titik |
| circle | bullet 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
Belum ada tanggapan untuk "Tutorial HTML - 5 (ateonsoft.com/ayomaju.com)"
Post a Comment