Bullet and Numbering dengan HTML

Bagi yang sering menggunakan software pengolah kata seperti Microsoft Word atau Microsoft PowerPoint mungkin sudah tidak asing lagi dengan istilah Bullet and Numbering.

Bullet and Numbering (penomoran) berfungsi memberikan symbol atau nomor pada poin-poin uraian. Pada Powerpoint fungsi ini sering digunakan karena pada hakikatnya penggunaan PowerPoint adalah untuk menguraikan poin- poin penting saja dan tentunya dengan Bullet and Numbering poin-poin ulasan itu menjadi menarik dan akan mudah dipahami oleh audien saat kita melakukan presentasi.

Dari penjelasan singkat di atas memberikan gambaran bahwa Bullet and Numbering pada halaman web pun sangat diperlukan agar para pembaca mengetahui poin-poin penting dari sebuah ulasan. Berikut Kak Hady bagikan tutorial pembuatan Bullet and Numbering untuk halaman web dengan kode HTML.

A. Bullet

Bullet merupakan pemberian penomoran dengan symbol pada point uraian (bullet point). Tag yang digunakan untuk pemberian Bullet adalah diawali dengan <ul> dan diakhiri dengan </ul>. Untuk memunculkan poin uraian tag yang digunakan adalah <li> diakhiri dengan </li>.

Untuk lebih memahami kita coba berlatih mengetik kode HTML dengan menggunakan Notepad. Ketik Sintak berikut:

Berkut adalah 5 Browser yang paling banyak digunakan:
<ul>
<li>Mozilla Firefox</li>
<li>Google Chrome</li>
<li>Internet Explorer</li>
<li>Opera</li>
<li>Safari</li> </ul>

Simpan dengan File Name : Bullet.html dan Save as Type : All Files. Jalankan file. Maka hasilnya adalah seperti berikut:
Berkut adalah 5 Browser yang paling banyak digunakan:

• Mozilla Firefox
• Google Chrome
• Internet Explorer
• Opera
• Safari

Symbol bullet point diatas adalah standar dengan symbol bulat hitam. jika ingin symbol bullet point yang lainnya ada tiga symbol yang sering dipakai yaitu:
A.1. Symbol Bullet Point Bulat Hitam (Disk)

<ul type="disc">
<li>Bullet Point Disc</li>
</ul>

A.2. Symbol Bullet Point Lingkaran

<ul type="circle">
<li>Bullet Point Circle</li>
</ul>

A.3. Symbol Bullet Point Persegi

<ul type="square">
<li>Bullet Point Square</li>
</ul>

 

B. Numbering
Numbering merupakan pemberian penomoran dengan angka atau romawi pada poin uraian Tag yang digunakan untuk pemberian Numbering adalah diawali dengan <ol> dan diakhiri dengan </ol>.Untuk memunculkan poin uraian tag yang digunakan adalah <li> diakhiri dengan </li>.
Untuk lebih memahami kita coba berlatih mengetik kode HTML dengan menggunakan Notepad.
Ketik Sintak berikut:

Berkut adalah 5 Browser yang paling banyak digunakan:
<ol>
<li>Mozilla Firefox</li>
<li>Google Chrome</li>
<li>Internet Explorer</li>
<li>Opera</li>
<li>Safari</li>
</ol>

Simpan dengan File Name : Numbering.html dan Save as Type : All Files. Jalankan file. Maka hasilnya adalah seperti berikut:
Berkut adalah 5 Browser yang paling banyak digunakan:

1. Mozilla Firefox
2. Google Chrome
3. Internet Explorer
4. Opera
5. Safari

Symbol bullet point diatas adalah standar dengan angka. jika ingin memberikan type penomoran yang lainnya yaitu:
B.1. Penomoran Huruf Kapital

<ol type=A>
<li>Contoh 1</li>
<li>Contoh 2</li>
</ol>

Hasilnya:

1. Contoh 1
2. Contoh 2

B.2. Penomoran Huruf Kecil

<ol type=a>
<li>Contoh 1</li>
<li>Contoh 2</li>
</ol>

Hasilnya:

1. Contoh 1
2. Contoh 2

B.3. Penomoran Romawi Kecil

<ol type=i>
<li>Contoh 1</li>
<li>Contoh 2</li>
</ol>

Hasilnya:

1. Contoh 1
2. Contoh 2

B.4. Penomoran Romawi Besar

<ol type=I>
<li>Contoh 1</li>
<li>Contoh 2</li>
</ol>

Hasilnya:

1. Contoh 1
2. Contoh 2

 

C. Penggunaan Bullet dan Numbering Pada Naskah Soal Pilihan Ganda

<ol>
<li>Berkut yang bukan merupakan Browser adalah … </li>
<ol type=a>
<li>Mozilla Firefox</li>
<li>Microsoft PowerPoint</li>
<li>Internet Explorer</li>
<li>Opera</li>
</ol>
<li>Berikut adalah beberapa layanan media internet: </li>
<ul type=square>
<li>Facebook</li>
<li>Skype</li>
<li>Bing</li>
<li>Google Plus</li>
<li>LINE</li>
<li>Youtube</li>
</ul>
Yang merupakan layanan dari Microsoft adalah ….
<ol type=a>
<li>Bing dan Youtube</li>
<li>Skype dan Bing</li>
<li>Google Plus, Youtube dan Facebook</li>
<li>Skype, LINE dan Youtube</li>
</ol>
</ol>

Sehingga menjadi:

1. Berkut yang bukan merupakan Browser adalah …
   1. Mozilla Firefox
   2. Microsoft PowerPoint
   3. Internet Explorer
   4. Opera
2. Berikut adalah beberapa layanan media internet:
   • Facebook
   • Skype
   • Bing
   • Google Plus
   • LINE
   • Youtube
   Yang merupakan layanan dari Microsoft adalah ….
   1. Bing dan Youtube
   2. Skype dan Bing
   3. Google Plus, Youtube dan Facebook
   4. Skype, LINE dan Youtube

Setelah berlatih melalui tutorial di atas, mulailah menerapkannya pada pembuatan posting di blog. Buatlah artikel yang menggunakan bullet and numbering. Selamat mencoba