Sedikit tentang Ordered List dan Unordered List

Ditulis oleh : pramur

Ordered list dan unordered list. Mungkin dua istilah ini sudah tidak asing bagi Anda yang sering berkutat dengan web design atau hal-hal sealiran itu. Kalau Anda sudah mahfum tentang “Bullets and Numbering”, sederhananya : unordered list itu “Bullets” dan ordered list adalah “Numbering”nya. Daripada daku banyak cingcong, langsung aja dengan contoh ya?

Ini contoh numbering di wordpress :

  1. Ketuhanan Yang Maha Esa
  2. Kemanusiaan Yang Adil dan Beradab
  3. Persatuan Indonesia
  4. dst.. (padahal karena tidak hafal soalnya ini yang paling panjang :-p)

Nah, mau yang lebih sok gaya?

Langsung contoh aja, ya?

  1. Tiga
  2. empat
  3. Lima

Codenya adalah sebagai berikut
<ol start=”3″>
<li>Tiga</li>
<li>empat</li>
<li>Lima</li>
</ol>

Perhatikan bahwa ada parameter (dalam HTML dinamakan properti) dengan value “3”. Ini menunjukkan kalau numbering dimulai dari angka 3. Bisa juga dengan disisipi nomer yang lain. Untuk properti yang berbeda, langsung contoh aja ya? (Saya benar-benar payah dalam menjelaskan…)

  1. Oseng-oseng Daun Ganja
  2. Tongseng Opium Aroma Topi Miring

Codenya? Yuukk…
<ol type=”A”>
<li>Oseng-oseng Daun Ganja</li>
<li>Tongseng Opium Aroma Topi Miring</li>
</ol>
Value yang lain adalah “i”, “I”, “a”, dan “1” (default). Bedanya sudah mahfum, kan?

Untuk unordered list alias bullet, contohnya seperti ini…

  • Neraka
  • Surga
  • Miskin
  • Kaya

Agak berbeda dengan biasanya? Itu karena codenya disisipi nyang beginian nih …
<ul type=”circle”>
<li>Neraka</li>
<li>Surga</li>
<li> Miskin</li>
<li>Kaya</li>
</ul>

Value yang lain adalah disc (seperti biasa : bulat item ) dan square (kotak).
Kalo ada yang salah maafin dan mohon koreksinya yaa… ^_^ V

31 Responses to “Sedikit tentang Ordered List dan Unordered List”


  1. 1 Hendra Juli 30, 2007 pukul 10:31 am

    Makasih
    Banget
    Atas
    Infonya

  2. 2 qistoos September 27, 2007 pukul 10:07 pm

    wah enak sekaleeeeeeee

  3. 3 ynbs April 29, 2008 pukul 2:35 am

    abang aku minta artikelnya, untuk sekolah. thanks yah sebelumnya

  4. 4 faridfann Mei 20, 2008 pukul 10:02 pm

    kalau untuk bullet yang berwarna bagaimana caranya?thanks

  5. 5 faridfann Mei 20, 2008 pukul 10:35 pm

    tolong ya bang, tentang cara membuat bullet yang berwarna.

  6. 6 taufiq Agustus 7, 2008 pukul 11:55 am

    mas, misalnya kalo pake cara diatas pa nanti da pengaruh ma index google, terus infonya bagus thanks

  7. 7 wongjava Agustus 7, 2008 pukul 11:58 am

    mas kalo dengan cara diatas, bisa ngk kalo ditambah cara dengan setting warnanya?

  8. 9 Bangrosyid Maret 1, 2009 pukul 10:38 pm

    Matur Suwun atas tutorialnya, aku jadi mudeng ….

  9. 12 pengetahuan produksi elektronik Mei 4, 2012 pukul 6:04 am

    Thanks atas sharingnya, bagaimana kalau isi order listnya panjang?
    bagaimana cara untuk merapikannya?

  10. 14 natalia shop Juni 21, 2013 pukul 2:51 pm

    Produk dijamin asli orginal.
    Natalia Shop : Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 0857-1721-2287 ATAU KLIK WEBSET RESMI KAMI http://natalia-shop7.blogspot.com/
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon

    Ready Stock!
    BlackBerry 9380 Orlando – Black.Rp.900.000,-
    Ready Stock!
    BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock!
    BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock!
    Blackberry Curve 9320.Rp.700.000,-
    Ready Stock!
    Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock!
    Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock!
    Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock!
    Samsung Galaxy Nexus I9250 – Titanium Si.Rp.1.500.000,-
    Ready Stock!
    Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock!
    Samsung Galaxy Note N7000 – Pink.Rp.1.700.000.
    Ready Stock!
    Samsung Galaxy Y S5360 GSM – Pure White.Rp.500.000,-
    Ready Stock!
    Nokia Lumia 800 – Matt Black.Rp.1.700.000,-
    Ready Stock!
    Nokia Lumia-710-whiteRp. 900.000,-
    Ready Stock!
    Nokia C2-06 Touch & Type -Dual GSM-Rp.450.000,-
    Ready Stock!
    Nokia Lumia 710 – Black.Rp. 900.000,-
    Ready Stock!
    Apple iPhone 4S 16GB (dari XL) – Black.Rp.1.200.000,-
    Ready Stock!
    Apple iPhone 4S 16GB (dari Telkomsel).Rp.1.200.000,-
    Ready Stock!
    Apple iPod Touch 4 Gen 8GB.Rp.700.000.
    Ready Stock!
    APPLE iPod Nano 8GB – Pink.Rp.500.000,-
    Ready Stock!
    Acer Aspire 4755G Core i5 2430 Linux Blue.Rp 1.700.000.
    Ready Stock!
    Acer Aspire One AOD270 10.1.-Rp. 1.000.000,-
    Ready Stock!
    Acer TravelMate TM8481-2462G32.Rp. 1.400.000
    Ready Stock!
    Acer ICONIA Tab W500 10.1″ Tablets Notebook.Rp. 1.100.000,-
    Ready Stock!
    Nikon D7000 kit 18-105mm.Rp.1.700.000.
    Ready Stock!
    Nikon D90 Kit 18-105mm Vr.Rp 1.300.000.
    Ready Stock!
    Nikon Coolpix L 120 Red.Rp. 900.000
    Ready Stock!
    Nikon Coolpix P 500 Black.Rp 1.000.000.

  11. 15 Manual Hand Stacker Juni 28, 2013 pukul 1:33 pm

    Salam kenal buat admin dan para pengunjung situs ini. Sebagai pembaca yang baik, seihklasnya untuk memberikan komentar pada setiap artikel/postingan yang sudah dibaca agar dapat membantu memberikan saran/kritik terhadap pemilik situs. Terima kasih

  12. 16 Grosir Jilbab Terbaru Agustus 3, 2013 pukul 10:52 am

    Apa yang telah kita perbuat detik ini, saat ini, hari ini akan menjadi bom waktu dikemudian hari dan akan dipertanggung jawabkan. Jadi komentar yang baik akan menjadi bom berkah sedangkan komentar yang jelek akan menjadi bom kehancuran.

  13. 17 Opal Campos Agustus 8, 2013 pukul 9:47 am

    Excellent site you have here.. It’s difficult to find quality writing like yours these days. I honestly appreciate people like you! Take care!!

  14. 18 http://bit.ly/1m3VHPK Juli 5, 2014 pukul 6:10 am

    Anda mengetahui apa yang sharusnya tidak dilakukan ketika Anda gagal Jadi Anda menciptakan pengetahuan baru dan itu bukan kegagalan.

  15. 19 NORHAYATI Juli 5, 2014 pukul 11:29 am

    Anda mengetahui apa yang sharusnya tidak dilakukan ketika Anda gagal Jadi Anda menciptakan pengetahuan baru dan itu bukan kegagalan.

  16. 20 NORHAYATI Juli 7, 2014 pukul 9:26 am

    jangan menyalahkan kegagalan karena Anda mengetahui apa yang sharusnya tidak dilakukan ketika Anda gagal Jadi Anda menciptakan pengetahuan baru dan itu bukan kegagalan.

  17. 25 PROGRAM STUDI PEMDIDIKAN BAHASA INGGRIS S- Desember 13, 2014 pukul 12:19 am

    Jangan tangisi kesalahan tapi tersenyumlah karena setiap kesalahan mengajarkanmu agar berupaya lebih baik lagi

  18. 26 ADE WIBOWO Februari 11, 2015 pukul 5:06 pm

    Hidup kita sangat sulit namun ada jutaan kehidupan yang lebih sulit diluar sana

  19. 27 Javas Corner Desember 9, 2015 pukul 3:05 pm

    Mencerahkan brow
    Kunbal ya tukeran link

  20. 28 Javas Corner Desember 9, 2015 pukul 3:08 pm

    Bagaimana caranya kalo untuk blogger?


  1. 1 BLOG « Ianca80’s Blog Lacak balik pada Februari 22, 2009 pukul 5:42 pm
  2. 2 Menu nge-blog « tugazpti140110100069 Lacak balik pada Desember 9, 2010 pukul 7:33 am
  3. 3 Menu nge-blog « Amudi Pandapotan Saragih Lacak balik pada November 13, 2011 pukul 2:19 pm

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s




Peringatan & Etika

Blog Stats

  • 778,372 hits

%d blogger menyukai ini: