Cara Membuat Bullets dan Numbering Tag HTML di Blogspot - Idrahman

Menampilkan list Bullet (Unordered Lists):

Type Atribut penggunakan tag <ul> menentukan jenis bullet yang akan terlihat pada halaman blog. Meskipun melalui pemanggilan CSS kita dapat menentukan berbagai-macam model bullet dan bahkan menggunakan gambar sendiri, secara default di HTML memiliki 3 jenis bullet :

  • type="circle" – Lingkaran terisi
  • type="disc" – Lingkaran penuh
  • type="square" – Persegi terisi

Sebagai contoh seperti dibawah ini :

<ul type="square">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Daftar di atas saya ditempatkan di masing-masing <ul> tetapi masing-masing <li> juga mendukung jenis atribut, sehingga bisa terlihat seperti :

  • Square
  • Disc
  • Circle

Menampilkan list Numbered (Ordered Lists):
Jika Anda ingin menyajikan daftar artikel dengan cara penggunaan tag <ol>. Secara default langsung memberikan daftar nomor.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Hasilnya..
  1. Item 1
  2. Item 2
  3. Item 3

Tetapi jenis atribut ini kita juga bisa melakukan perubahan tapilan secara fleksibilitas seperti dibawah ini :

<ol type="A">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Hasilnya..
  1. Item 1
  2. Item 2
  3. Item 3

Berikutnya..

<ol start="4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Hasilnya
  1. Item 1
  2. Item 2
  3. Item 3

Selanjutnya membalikkan ordered dengan penambahan type reversed

<ol reversed="reversed">
<li>First LI</li>
<li>Second LI</li>
<li>Third LI</li>
<li>Fourth LI</li>
<li>Five LI</li>
</ol>

Hasilnya..
  1. First LI
  2. Second LI
  3. Third LI
  4. Fourth LI
  5. Five LI

Dibeberapa kasus ada beberapa artikel penggunaan tag <ol> (list Numbered) penampilan nomor terpisah oleh beberapa paragraf. 

Contoh seperti dibawah ini :
  1. Item 1
  2. Item 2
Ini adalah alinea yang memisahkan penggunaan tag <ol>, sehingga penggunan tag berikutnya tetap mengikuti dan menampilkan angka selanjutnya dari penggunaan tag <ol> sebelumnya.
  1. Item 3
  2. Item 4
  3. Item 5
Contoh penerapannya dari hasil diatas adalah :
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Ini adalah alinea yang memisahkan penggunaan tag <ol>, sehingga penggunan
tag berikutnya tetap mengikuti dan menampilkan angka selanjutnya dari penggunaan tag <ol>
sebelumnya.
<ol start="3">
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ol>



Belum ada Komentar untuk "Cara Membuat Bullets dan Numbering Tag HTML di Blogspot - Idrahman"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel