Ah, udah lama banget sejak tulisan terakhirku. Mungkin ini salah satu ujian buat orang yang punya banyak blog kayak aku, ya? Tapi, aku nggak peduli! Aku harus semangat untuk terus menghidupkan blog ini! Udah ganti template, sekarang harus ada posting baru biar tambah hidup! Jia you...

Oke, kita ngomongin apa ini? Ah, ya, bullet and numbering.


Bullet itu peluru...

Numbering itu penomoran...


Haha! Ngawur!

Bullet and numbering itu adalah salah satu menu di Microsoft Office, paling umum dipakai di Ms Word atau Ms Power Point. Di panel Paragraph yang ada di Ribbon, kita bisa lihat dua ikon, yaitu ikon Bullets dan ikon Numbering. Ini contohnya:


Power Point

Microsoft Word



Nah, udah punya gambaran, kan, kira-kira Bullet and Numbering itu kayak gimana? Bagus, deh! Tapi, kita nggak akan bikin bullet and numbering di Word atau Power Point, karena semua orang pasti udah bisa, apalagi yang suka ngutek-utek dua "benda" itu. :D


Kali ini, kita akan bikin bullet and numberingpake HTML. Ini bisa dipake kalo kita mau bikin daftar. Untuk permulaan, kita harus tahu dua buah tag HTML yang namanya <ul> dan <ol>. Tag ini adalah "pembuka" untuk membuat daftar. Untuk menyempurnakannya, kita punya sebuah tag lagi, yaitu <li>. Siapakah mereka?

• <ul> adalah kode yang menentukan bahwa kita akan membuat bullet.
• <ol> adalah kode yang menentukan bahwa kita akan membuat numbering.
• <li> adalah kode untuk memulai daftar kita.

Lalu, bagaimana cara membuat daftar (list) dengan kode-kode tersebut? Mudah saja. Coba saja dengan menuliskan ini:

<ol>
<li>Dua</li>
<li>Satu</li>
<li>Tiga</li>
</ol>

Maka inilah yang akan kita dapatkan:

1. Satu
2. Dua
3. Tiga

Atau coba yang ini:

<ul>
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ul>

Lalu kita akan mendapatkan ini:

• Satu
• Dua
• Tiga

Seru, kan? Bukan hanya itu saja! Setelah kita bisa membuat daftar, boleh juga kalau kita belajar mengkostumisasi daftar kita. Bagaimana caranya, ya?

Coba ini:

<ol type="A" start="4">
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ol>

Maka, yang akan kita dapatkan adalah ini!

4. Satu
5. Dua
6. Tiga

Cukup ganti tulisan merah dan birunya saja, kok! Tapi ada aturannya:

• Merah: tipe list. Diisi dengan A, a, I, i, atau 1. Untuk <ul> hanya bisa diisi dengan disc, square, atau circle.
• Biru: permulaan list. Diisi dengan angka. <ul> tidak memiliki fungsi ini.

Nah, satu lagi fungsi yang seru untuk dicoba-coba. Namanya fungsi style="color: colorname / #hexcode (pilih satu)". Coba lihat contoh ini:

<ol type="A" start="4" style="color: #FFFFBB;">
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ol>

<ul type="circle" style="color: lime;">
<li>Satu</li>
<li>Dua</li>
<li>Tiga</li>
</ul>

Apa yang akan kita dapatkan?

4. Satu
5. Dua
6. Tiga

• Satu
• Dua
• Tiga

List dengan kustomisasi! Berani coba? Ayolah, kenapa nggak? Itulah salah satu kesalahan manusia. Mundur sebelum berperang. Menyerah sebelum mencoba. Jadi, daripada masuk ke dalam golongan "TROUBLE MAKER", coba dulu serunya main-main sama kode HTML!

Good luck, ganbatte~ :D