Cara membuat Bullet And Numbering

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 cara Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog semoga bermanfaat.

Sumber : http://www.jual-rebanamarawis.com/2012/04/cara-membuat-bullets-numbering-tag-html.html