Artikel Baru

Cara Membuat Bullet dan Numbering pada HTML

, , , , , , , , , , ,
Cara Membuat Bullet dan Numbering pada HTML
Bullet and Numbering merupakan fasilitas untuk penomoran dalam sebuah dokumen. Jika anda pernah menggunakan Microsoft Word tentu saja akan sangat mengenal dengan istilah bullet dan numbering. Ternyata, pada html dan blog, juga menggunakan istilah ini. Hanya saja cara menuliskannya berbeda.

Secara umum bullet dan numbering dibagi menjadi 2, yaitu daftar list numbering atau biasa dikenal dengan ordered list dan daftar list berupa bullet (simbol) atau biasa dikenal dengan unordered list.

Sebagai contoh silahkan dilihat bedanya dibawah ini :
Ordered List / Numbering
  1. Baris Pertama
  2. Baris Kedua
  3. Baris Ketiga
  4. Dan Seterusnya
Unordered List / Bullet
  • Baris Pertama
  • Baris Kedua
  • Baris Ketiga
  • Dan Seterusnya
Nah bagaimana cara menuliskannya dengan menggunakan bahasa HTML? Jika pada halaman blogspot, untuk menuliskannya kita harus berada pada mode HTML.

Secara umum, bentuk penulisannya adalah sbb :
Ordered List / Numbering :

1
2
3
4
5
6
 
<ol> 
  <li>Baris Pertama</li>  
  <li>Baris Kedua</li>  
  <li>Baris Ketiga</li> 
  <li>Dan Seterusnya</li> 
</ol>
Untuk menuliskan ordered list kita memulainya dengan TAG <ol></ol>. Dan untuk menuliskan baris isinya ditulis dengan tag <li>Teks Anda</li>
Unordered List / Bullet :

1
2
3
4
5
6
 
<ul> 
  <li>Baris Pertama</li>  
  <li>Baris Kedua</li>  
  <li>Baris Ketiga</li> 
  <li>Dan Seterusnya</li> 
</ul>
Untuk menuliskan unordered list kita memulainya dengan TAG <ul></ul>. Dan untuk menuliskan baris isinya ditulis dengan tag <li>Teks Anda</li>

Diantara kedua list ini bisa disisipkan atau digabungkan menjadi bagian yang komplek, seperti contoh dibawah ini :
  1. Baris Pertama
  2. Baris Kedua
    • Sub Baris Pertama
    • Sub Baris Kedua
      1. Sub Sub Baris Pertama
      2. Sub Sub Baris Kedua
    • Sub Baris Ketiga
  3. Baris Ketiga
Cara penulisannya adalah sebagai berikut :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
 
<ol>
  <li>Baris Pertama </li>
  <li>Baris Kedua 
    <ul>
      <li>Sub Baris Pertama </li>
      <li>Sub Baris Kedua 
        <ol>
          <li>Sub Sub Baris Pertama </li>
          <li>Sub Sub Baris Kedua </li>
        </ol>
      </li>
      <li>Sub Baris Ketiga </li>
    </ul>
  </li>
  <li>Baris Ketiga </li>
</ol>

Sumber : https://simdigital-smk.blogspot.com/2018/03/cara-membuat-bullet-dan-numbering-pada.html

Tidak ada komentar

Langganan: Posting Komentar ( Atom )