Home » , , » Membuat Bullet dan Numberic dengan Kode HTML

Membuat Bullet dan Numberic dengan Kode HTML

Di tulis oleh Ifan Prabowo pada Sunday, February 26, 2012 | 2:30 AM


Sedikit pelepas dahaga saya saja dengan blog ini yang sudah lumayan lama tidak saya update. he he he…
kali ini saya hanya sedekar ingin berbagi pengetahuan tentang format bullet and numbering dengan HTML. Kalau temen-temen sering ngetik di Microsoft Word pasti sudah pernah menggunakan bullet and numbering. Itu loh… yang berfungsi untuk memberikan label urutan kepada suatu list. Misalnya urutan 1, 2, 3, 4, atau mungkin a, b, c, d, atau bisa juga berupa simbol.
Nah, sewaktu saya awal-awal belajar HTML dulu, saya menemukan tips atau tutorial tentang pembuatan bullet and numbering tersebut di blog atau di halaman web. Sebebenernya di hampir semua blog sudah tersedia fasilitas penambahan bullet and numbering secara mudah dengan meng-klik iconnya saja, tapi bagi temen-temen yang lebih senang dengan tantangan atau mungkin ingin lebih berkreasi dengan bullet and numbering, bisa melalui HTML.
Contohnya:
  1. ini bentuk numbering satu
  2. numbering lagi
  3. numbering lagi yach…
  4. ini yang terakhir
SEjauh yang saya ketahui, untuk membuat bullet and numbering ini bisa langsung melalui HTML, atau bisa juga melalui CSS (Cascading Style Sheet). Namun kali ini saya hanya berbagi cara pembuatan melalui HTML saja, sedangkan via CSS lain kali aja yach… he he he…
Untuk tutorial ini bisa anda coba membuatnya di notepad, atau langsung di blog juga bisa ;)
Tentukan bentuk bullet/numbering yang anda inginkan. Jika ingin berupa number/nomor, seperti 1, 2, 3, 4, dst, maka kode yang Anda gunakan adalah:
<ol>
<li>ini bentuk numbering satu</li>
<li>numbering lagi</li>
<li>numbering lagi yach...</li>
<li>ini yang terakhir</li>
</ol>
Hasil yang terlihat akan seperti ini:
  1. ini bentuk numbering satu
  2. numbering lagi
  3. numbering lagi yach…
  4. ini yang terakhir
Yang menentukan list tersebut berupa number adalah code <ol> dan </ol>.
Sedangkan bila Anda ingin membaut membuat list berupa bullet (simbol), maka code yang bisa Anda gunakan adalah:
<ul>
<li>ini bullet satu</li>
<li>ini bullet lagi</li>
<li>yang ini juga bullet</li>
</ul>
Sehingga hasilnya menjadi
  • ini bullet satu
  • ini bullet lagi
  • yang ini juga bullet
    Sedikit ada spesial pada tag UL ini: bentuk bullet bisa kreasikan, baik dengan code maupun dengan gambar. Misalnya:
    <ul> <li style="list-style-type:disc">ini bentuk disc bulllet</li>
    <li style="list-style-type:circle">ini bentuk circle (lingkaran)</li>
    <li style="list-style-type:square">kalo yang ini bentuk persegi</li></ul>
    Sehingga hasilnya seperti:
    • ini bentuk disc bulllet
    • ini bentuk circle (lingkaran)
    • kalo yang ini bentuk persegi
    Kalo mau icon listnya bukan berupa number atau bullet, tapi berupa gambar, Anda bisa menggunakan kode ul tersebut yang ditambahi dengan css inline yang diselipi dengan url gambar icon yang dimaksud. Seperti:
    <ul style="list-style-image: url(http://www.blogger.com/favicon.ico)"> <li>ini list yang pake icon gambar</li>
    <li>yang ini juga contohnya </li> </ul>
    Sehingga hasilnya menjadi:
    • ini list yang pake icon gambar
    • yang ini juga contohnya
    Perbedaan bullet and numbering hanya pada tag pertama dan terakhir saja. Jika ingin membuat list berupa number, maka tag yang anda gunakan adalah OL. Sementara jika anda ingin membuat lists berupa icon simbol atau gambar, maka gunakan tag UL.

    Share this article :
    Baca Juga Yang Ini !!

    Dapatkan artikel terbaru dari " Mahasiswa Lugu ".

    Masukan Email anda disini :


    4 comments:

    1. makasih infonya gan :)
      praktek langsung jadi :)

      ReplyDelete
    2. bang kalo tanda panah kaya digambar kodenya gimana?

      ReplyDelete
    3. Thank you masbro... kunjungi juga TokoOnline ane ya, txs b4

      www.tokoonlinebaru.com

      ReplyDelete

    :: MAHASISWA LUGU ::
    Just share and save my story

     
    Support : Maskolis | RMC | Naeza
    Copyright © 2012. Mahasiswa Lugu - All Rights Reserved
    Webmaster by Ifan Prabowo