SSIAGA TRANS
Rabu, 22 Juni 2016

Dasar Penulisan List Pada Laman HTML

Bagi yang ingin membuat daftar bullet cukup dengan menambahkan tag <ul> dan </ul> di awal dan akhir daftar listnya. Daftar list yang bernomor atau berurut berdasarkan angka memiliki tag <ol>, dan bukan tag <ul>.


Untuk memisahkan daftar item tunggal menggunakan tag <li> dan </li>. Lebih lengkapnya anda bisa mempelajari daftar list bullet dan daftar list bernomor sebagai berikut :

1. Daftar List Berupa Bullet

Ada beberapa cara penulisan bullet yang bisa kita pilih :
  • Disc
  • Circle, dan
  • Square
Lihat contoh penulisannya
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

Output :

  • text
  • text
  • text

Kode bullet di atas bisa kita rubah dengan menambahkan kode berikut kedalam tag <ul> :
1. <ul type="disc">
2. <ul type="circle">
3. <ul type="square">

Sehingga hasilnya seperti ini :
<ul type="disc">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>


<ul type="circle">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>


<ul type="square">
<li>text</li>
<li>text</li>
<li>text</li>
</ul>

Output :

  • text
  • text
  • text
  • text
  • text
  • text
  • text
  • text
  • text

2. Daftar List Berupa Angka dan Abjad

Kode tag yang digunakan ini menunjukkan bagaimana membuat berbagai jenis daftar list bernomor dan berabjad.

Ada beberapa pilihan list penomoran yang bisa kita pilih :
  • Nomor
  • Huruf Kapital
  • Huruf Kecil
  • Angka Romawi
  • Angka Romawi Kecil

Selain pilihan ini, anda juga dapat menentukan di mana urutan daftar harus dimulai. Awal nilai sebagai default untuk daftar nomor adalah nomor satu (atau huruf A). Lebih lengkapnya perhatikan kode html yang ada dalam tabel berikut dan bagaimana output yang dihasilkan.


Kode HTML Output
<ol>
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
  1. text
  2. text
  3. text
<ol start="5">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
  1. text
  2. text
  3. text
<ol type="A">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
  1. text
  2. text
  3. text
<ol type="a">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
  1. text
  2. text
  3. text
<ol type="I">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
  1. text
  2. text
  3. text
<ol type="i">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
  1. text
  2. text
  3. text
<ol type="1">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
  1. text
  2. text
  3. text
<ol type="I" start="7">
<li>text</li>
<li>text</li>
<li>text</li>
</ol>
  1. text
  2. text
  3. text



Catatan :
Untuk menghasilkan output yang berbeda-beda, anda perlu menambahkan kode tertentu ke dalam tag <ol> seperti contoh di atas.

Kini anda bisa memanfaatkan macam-macam kode list di atas untuk lebih mempercantik postingan anda.