Cara Membuat dan Modifikasi List Bullet and Numbering pada HTML

Oleh Admin

Sunday 15 May 2016

Bagikan :

Tweet

Pada Office Word biasanya Bullet and Numbering digunakan untuk menampilkan list untuk menambah kerapian dalam penulisan dan juga keseragaman. Namun, tulis menulis tidak hanya ada di MS Word, namun di website juga bisa saja terjadi tulis menulis yang juga membutuhkan list . 

List biasanya di kategorikan 2 , Bullet dan juga Numbering .

List Bullet yaitu list yang berupa symbol kayak icon gitu, 

sedangkan, 

Numbering merupakan list yang menggunakan bisa angka, bisa juga huruf.

Gambar di atas adalah hasil source code bullet and numbering pada HTML , modifikasinya ada pada

di situ ada tulisan <ol> dan <li>  dan juha <ul>

<ol> </ol>  dan <ul> </ul> merupakan list yang biasanya di gunakan untuk symbol utamanya.
sedangkan <li></li> digunakan untuk bagian yang mengikuti <ol> dan <ul>.

Terus apa bedanya <ol> </ol> dan <ul> </ul> yang sama2 dijadikan sebagai simbol utama?

bedanya ada pada kalo <ol> dia untuk numerik atau numbering nya, sedangkan <ul> untuk symbol bulletnya

Lihat pada tulisan <ol type = "a"> di bawahnya ada <li> dan untuk <li> nya tidak perlu di berikan type-type dia udah otomatis tertulis a, b, c dan sebagainya.

1. <ol type="I"> </ol> yang digunakan untuk menampilkan angka romawi.
2. <ol type="1"> </ol> yang digunakan untuk menampilkan angka 1, 2, 3 dan sebagainya.
3. <ol type="a"> </ol> yang digunakan untuk menampilkan huruf kecil a,b,c.
4. <ol type="A"> </ol> yang digunakan untuk menampilkan huruf besar A, B, C.

Kemudian lihat pada baris bawah, ada yang menggunkan <ul> nah, pada <ul> ini bisa di berikan class nya mau disc, circle atau square yang merupakan class pada bullet.

1. <ul type="disc"> </ul> digunakan untuk menampilkan simbol bulet penuh warna hitam 
2. <ul type="circle"> </ul> digunakan untuk menampilkan simbol lingkaran yang di tengahnya ada warna putihnya
3. <ul type="square"> </ul> digunakan untuk menampilkan simbol kotak penuh warna hitam 

Untuk lebih jelasnya, bisa bandingkan gambar di atas.

source code di atas jika mungkin ingin mencobanya :

<ol type="I">
<li>Macam-macam hewan
<ol type="1">
<li>Herbivora
<ol type="a">
<li>Jerapah</li>
<ul type="square">
<li>Badan Besar</li>
<li>Leher Panjang</li>
</ul>
<li>Zebra
<ul type="disc">
<li>Badan Belang</li>
<li>Badan Sedang</li>
</ul>
</li>
</ol>
</li>
<li>Karnivora
<ol type="a">
<li>Kucing</li>
<ul type="circle">
<li>Bunyinya Meoong</li>
<li>Suka nya ayam dan ikan</li>
</ul>
<li>Nyamuk
<ul type="disc">
<li>Bisa Terbang</li>
<li>Badan Kecil</li>
</ul>
</li>
</ol>
</li>
</ol>
</li>
</ol>

Tag : HTML