pinyinkpin - kali ini saya akan membahas bagaimana membuat list pada html.list html berfungsi memberi efek bullet atau numbering pada text yang ditulis di HTML.
Dalam html , list terbagi menjadi tiga macam, yaitu
1. unordered list
2. ordered list
3. description list
1. unorderet list,
biasa mengguankan sintaks <ul><li></li></ul>
contoh
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
hasil
2. ordered list
biasa menggunakan sintaks <ol><li></li></ol>
<ol>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ol>
hasil
- menu 1
- menu 2
- menu 3
3. desctiprion list
biasa menggunakan sintaks <dl><li></li></dl>
contoh
<dl>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</dl>
hasil
menu 1
menu 2
menu 3
list html <ul></ul> jika tidak di beri style maka tampilannya akan default. jadi kurang menarik, maka dari itu harus di beri style.
beberapa contoh style :
untuk yg unordered list
1. list-style-type:disc
ini menampilkan list dengan type disc. yaitu seperti bullet. lingkaran hitam
contoh
<ul style="list-style-type:disc">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
2. list-style-type:circle
menampilkan list seperti lingkaran yang tengahnya bolong
contoh
<ol style="list-style-type:circle">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ol>
3. list-style-type:square
menampilkan list dengan gambar kotak hitam
contoh
<ul style="list-style-type:square;">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
4. list-style-type: none;
menampilkan list tanpa tambahan.
contoh
<ul style="list-style-type:none;">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
</ul>
Sekian dari saya, apabila ada pertanyaan silahkan berkomentar atau dapat bertanya di menu
contact . bye and thank you for read,
pinyinkpin