Kode Html Bullet Dan Numbering

Dalam sebuah karya tulis atau tulisan seringkali kita jumpai daftar item (list), baik berupa penomoran (numbering) maupun bullet yang berfungsi untuk memberikan label atau urutan agar tulisan tersebut terstruktur dengan rapi sehingga dapat dipahami dengan mudah oleh para pembacanya.

Sebenarnya pada post editor blog sudah tersedia fasilitas untuk membuat list baik numbering maupun bullet, untuk blogspot sendiri fasilitas ini terdapat pada mode "Tulis" atau "Compose" yaitu berupa icon, dan penggunaannya cukup dengan meng klik icon tersebut, namun penggunaan fasilitas ini dirasa kurang praktis dan kurang memadai, terutama karena kurangnya variasi type numbering maupun bullet, juga pada saat kita hendak menggunakan list yang bertingkat.

HTML mendukung beberapa format list, baik numbering List dan bullets List.

1. Tag HTML Numbering List
   Ada beberapa tipe Penomoran (numbering list) antara lain:
   1. type umum (default) dari Numbering adalah lambang bilangan (1,2,3,... dst)
      Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
      Contoh:<ol>
      <li>urutan ke-1</li>
      <li>urutan ke-2</li>
      <li>urutan ke-3</li>
      <li>urutan seterusnya...</li>
      </ol>
      Hasilnya akan terlihat seperti ini:
      Contoh:
      1. urutan ke-1
      2. urutan ke-2
      3. urutan ke-3
      4. urutan seterusnya...
      
      Ket: Tag ini selalu berpasangan
   2. Huruf romawi (I, II, III, ... atau i, ii, iii,... ),
      Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="I"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
      Contoh:<ol type="I">
      <li>urutan ke-1</li>
      <li>urutan ke-2</li>
      <li>urutan ke-3</li>
      <li>urutan seterusnya...</li></ol>
      Hasilnya akan terlihat seperti ini:
      Contoh:
      1. urutan ke-1
      2. urutan ke-2
      3. urutan ke-3
      4. urutan seterusnya...
   3. Huruf Alfabet ( A,B,C,... atau a,b,c,...)
      Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="A"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
      Contoh:<ol type="I">
      <li>urutan ke-1</li>
      <li>urutan ke-2</li>
      <li>urutan ke-3</li>
      <li>urutan seterusnya...</li></ol>
      Hasilnya akan terlihat seperti ini:
      Contoh:
      1. urutan ke-1
      2. urutan ke-2
      3. urutan ke-3
      4. urutan seterusnya...
2. Tag HTML Bullet List
   Ada beberapa tipe Bullet (bullet list) antara lain:
   1. Tipe Disc,
      Penulisan Tag HTML nya( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
      Contoh:<ul type="Disc"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
      Hasilnya:
      Contoh:
      • urutan ke-1
      • urutan ke-2
      • urutan ke-3
      • urutan seterusnya...
   2. Tipe Circle
      Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
      Contoh:<ul type="Circle"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
      Hasilnya sbb:
      Contoh:
      • urutan ke-1
      • urutan ke-2
      • urutan ke-3
      • urutan seterusnya...
   3. Tipe Square
      Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
      Contoh:<ul type="Square">
      <li>urutan ke-1</li><li>urutan ke-2</li><li>urutan ke-3</li><li>urutan seterusnya...</li></ul>
      Hasilnya sebagai berikut:
      Contoh:
      • urutan ke-1
      • urutan ke-2
      • urutan ke-3
      • urutan seterusnya...

Yang menjadi pertanyan adalah bagaimana jika List Numbering dan Bulleting digabung dan bertingkat seperti pada postingan blog saya kali ini?



Contoh Penulisan Tag HTML Bertingkat Selamat mencoba:
<ol type="I"><li>Tingkat I-a <ol type="1"><li>Tingkat ke-2a<ol type="a"><li>Tingkat ke-a</li><ul type="square"><li>square 1</li><li>square 2</li></ul><li>tingkat ke a-2<ul type="disc"><li>disc 1</li><li>disc 2</li></ul></li></ol></li><li>Tingkat ke-2b<ol type="a"><li>Tingkat ke-a</li><ul type="square"><li>square 1</li><li>square 2</li></ul><li>tingkat ke a-2<ul type="disc"><li>disc 1</li><li>disc 2</li></ul></li></ol></li></ol></li>
<li>tingkat I-b<ul type="disc"><li>disc 1<ol type="a"><li>pertama</li><li>kedua</li></ol></li><li>disc 2<ol type="&lt;i&quot;"><li>pertama</li><li>kedua</li>
</ol></li></ul>
</li></ol>
Hasilnya seperti ini:

1. Tingkat I-a
   1. Tingkat ke-2a
      1. Tingkat ke-a
      • square 1
      • square 2
      2. tingkat ke a-2
         • disc 1
         • disc 2
   2. Tingkat ke-2b
      1. Tingkat ke-a
      • square 1
      • square 2
      2. tingkat ke a-2
         • disc 1
         • disc 2
2. tingkat I-b
   • disc 1
     1. pertama
     2. kedua
   • disc 2
     1. pertama
     2. kedua

Demikian postingan kali ini mengenai kode html bullet dan numbering pada Posting Blog semoga bermanfaat.