UL (Unordered List) dan OL (Ordered List) adalah dua elemen html yang berfungsi untuk membuat daftar pada sertiap Situs Web atau Blog dalam penulisan mode html. Keduanya sama-sama tidak tertinggalkan dalam penulisan kerena memiliki peran yang sangat penting untuk membuat tampilan daftar lebih tersusun rapi dan mudah dipahami.
Ul berfungsinya untuk membuat daftar berbentuk poin-poin berututan vertikal, contohnya:
- List satu
- List dua
- List tiga
Adapun ol memiliki fungsinya untuk membuat daftar berurutan dengan angka atau huruf, contohnya:
- List angka satu
- list angka dua
- list huruf satu
- list huruf dua
Desain di atas bisa dibilang tampilan default dan cukup umum pada setiap situs web maupun blog. Pada artikel ini saya akan memberikan sedikit tips untuk membuat, mengatur dan memodefikasi desain ul dan ol tersebut.
Cara Membuat Daftar Ul dan Ol Default
Tampilan diatas merupakan desain default, yaitu tampilan yang akan terlihat tanpa adanya modefikasi kode html atau tamabahan kode css. Membuat kedua daftar tersebut sangatlah mudah, Anda hanya perlu membuat susunan koden html seperti berikut.
<ul> <li>List satu</li> <li>List dua</li> <li>List tiga</li> </ul>
atau
<ol> <li>List angka satu</li> <li>list angka dua </li> </ol>
Untuk membuat dartar ol dengan huruf harus menambahkan " type='a' " kedalam kode dasarnya, contoh:
<ol type='a'> <li>list huruf satu</li> <li>list huruf dua</li> </ol>
Selain type a, Anda juga bisa merubah dengan beberapa alternatif lain, tinggal mengganti ganti huruf "a" menjadi:
| "A" | :Huruf kapital ( besar ) |
| "i" | :Angka romawi kecil |
| "I" | :Angka romawi besar |
Selain tampilan default di atas saya juga memiliki beberapa desain lain, akan tetapi untuk menerapkannya Anda harus menambahkan kode CCS terlebih dahulu, kemudian memasukan "class" pada ol sebagai pemanggil.
Silahkan tambahkan kode CSS berikut kedalam "Tema" atau "Portingan" terlebih dahulu.
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.s {list-style-type: inherit;}
Setelah kode CSS ditambahkan, Anda perlu memanggil tampilannya menggunakan kode "class" misalkan:
<ol class="a"> <li>Armenian type</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="b"> <li>Cjk-ideographic type</li> <li>Lemon Tea</li> <li>Tea Tarik</li> </ol> <ol class="c"> <li>Decimal type</li> <li>Alpocado Juice</li> <li>Alpocado Boba</li> </ol> <ol class="d"> <li>Decimal-leading-zero type</li> <li>Taro Juice</li> <li>Taro Boba</li> </ol> <ol class="e"> <li>Georgian type</li> <li>Tea</li> <li>Ice Tea</li> </ol> <ol class="f"> <li>Hebrew type</li> <li>Green Tea</li> <li>Lice Tea</li> </ol> <ol class="g"> <li>Hiragana type</li> <li>Blue moca</li> <li>Coca Cola</li> </ol> <ol class="h"> <li>Hiragana-iroha type</li> <li>Bang Bang</li> <li>Chocolate</li> </ol> <ol class="i"> <li>Katakana type</li> <li>Black Burger</li> <li>Beef Burger</li> </ol> <ol class="j"> <li>Katakana-iroha type</li> <li>Chicken burger</li> <li>Egg burger</li> </ol> <ol class="k"> <li>Lower-alpha type</li> <li>AFC Chicken</li> <li>Flour Chicken</li> </ol> <ol class="l"> <li>Lower-greek type</li> <li>french fries</li> <li>Cheese banana</li> </ol> <ol class="m"> <li>Lower-latin type</li> <li>Cheese Toast</li> <li>Chocolate Toast</li> </ol> <ol class="n"> <li>Lower-roman type</li> <li>Tofu Balado</li> <li>Tofu Soup</li> </ol> <ol class="o"> <li>Upper-alpha type</li> <li>Chicken Fried Rice</li> <li>Egg Fried Rice</li> </ol> <ol class="p"> <li>Upper-latin type</li> <li>Milk sandwiches</li> <li>Chocolate Sandwiches</li> </ol> <ol class="q"> <li>Upper-roman type</li> <li>Fried Sausage</li> <li>Grilled Sausage</li> </ol> <ol class="s"> <li>inherit type</li> <li>Salt Desserts</li> <li>Jelly Desserts</li> </ol>
Hasilnya akan terlihat seperti:
- Armenian type
- Tea
- Coca Cola
- Cjk-ideographic type
- Lemon Tea
- Tea Tarik
- Decimal type
- Alpocado Juice
- Alpocado Boba
- Decimal-leading-zero type
- Taro Juice
- Taro Boba
- Georgian type
- Tea
- Ice Tea
- Hebrew type
- Green Tea
- Lice Tea
- Hiragana type
- Blue moca
- Coca Cola
- Hiragana-iroha type
- Bang Bang
- Chocolate
- Katakana type
- Black Burger
- Beef Burger
- Katakana-iroha type
- Chicken burger
- Egg burger
- Lower-alpha type
- AFC Chicken
- Flour Chicken
- Lower-greek type
- french fries
- Cheese banana
- Lower-latin type
- Cheese Toast
- Chocolate Toast
- Lower-roman type
- Tofu Balado
- Tofu Soup
- Upper-alpha type
- Chicken Fried Rice
- Egg Fried Rice
- Upper-latin type
- Milk sandwiches
- Chocolate Sandwiches
- Upper-roman type
- Fried Sausage
- Grilled Sausage
- inherit type
- Salt Desserts
- Jelly Desserts
Memodefikasi Desain Ul dan Ol dengan Tambahan Html
Anda bisa mengatur tampilan sesuka hati jika mengetahui beberapa kode html alternatif. Inilah kelebihan belajar menulis artikel menggunakan beberapa atribut html dan sedikit tambahan CSS untuk mempercantik desain.
Membuat Urutan Menjadi Terbalik
Urutan terbalik bisa disebut dengan mengurutkan list angka dari yang terbesar menjadi yang terkecil, seperti 1 2 3 4 5 menjadi 5 4 3 2 1. Pada dasarnya semua list akan mengurutkan dari angka awal, jika ingin membalik urutan hanya perlu menambahkan kode "reversed" atau "value".
Keduanya sama-sama memiliki fungsi yang sama, namun sedikit berbeda dalam penggunaan dan penerapannya.
Reversed digunakan membalik urutan secara otomatis, tetapi tidak semua browser mendukung kode ini. Cara menggunakannya sangat mudah, tinggal masukan kode reversed pada kode "ol", contoh:
<ol reversed>
<li>tiga</li>
<li>dua</li>
<li>satu</li>
</ol>
hasilnya:
- tiga
- dua
- satu
Adapun Value harus digunakan dengan cara manual pada setiap kode <li>. Walaupun begitu, kode ini didukung semua browser.
Cara penerapannya mungkin agak sedikit ribet, tapi alangkah baiknya menggunakan cara ini dari pada merusak tampilan pada saat pengunjung membuka artikel Anda pada browser yang tidak mendukung penggunaan kode "Reversed".
Berikut cara menerapannya:
<ol> <li Value='3'>tiga</li> <li Value='2'>dua</li> <li Value='1'>satu</li> </ol>
hasilnya:
- tiga
- dua
- satu
Sedikit saya jelaskan, maksud tidak didukung pada semua browser adalah kode tidak akan berfungsi jika dibuka pada browser yang tidak mendukung kode tersebut.
| Kode | Yaho | Frefox | Safari | Crome | Opera |
|---|---|---|---|---|---|
| Reversed | Tidak | Tidak | Ya | Ya | Tidak |
| Value | Ya | Ya | Ya | Ya | Ya |
Membuat Star Meluncat
Pada umumnya setiap list angka akan dimulai dengan angka "1" atau huruf dengan huruf "a". Namun dengan menambahkan kode "Start", semua bisa dimulai dengan angka atau huruf yang meluncat. Anda bisa memulai dengan angka "5" atau huruf "e".
Cara membuatnya sangatlah mudah, hanya cukup menambahkan kode "start" setelah kode "ol",berikut contoh penerapannya:
<ol start='5'> <li>Lima</li> <li>Enam</li> <li>Tujuh</li> </ol>
Hasilnya akan terlihat seperti berikut:
- Lima
- Enam
- Tujuh
Cara Mengatur Desain Ul dan OL dengan CSS
Anda bisa mengatur tinggi baris, margin, dan padding. Caranya sangat mudah tinggal merubah atau menambah sedikit kode CSS.
Mengatur Tinggi Baris Perlist
Tinggi baris perlist salah satu yang tidak bisa disepelekan. Biasanya tingginya sudah diatur pada setiap template dan akan otomatis berfungsi pada setiap postingan.
Jika Anda ingin mengatur sesuai keinginan tentunya harus repot-repot edit pada template. Ada cara alternatif lain, yaitu menambahkan style secara langsung pada ul atau ol.
<ol style='line-height:50px'> <li>Conton 50px</li> <li>List lebih tinggi dari baris lain</li> </ol> <ol style='line-height:20px'> <li>Conton 20px</li> <li>List lebih rendah dari baris lain</li> </ol>
Silahkan atur nilai tinggi pada "line-height" di atas. Hasilnya akan terlihat berbeda pada tinggi baris list dengan baris paragraf lain.
- Conton 50px
- List lebih tinggi dari baris lain
- Conton 20px
- List lebih rendah dari baris lain
Mengatur Margin dan Padding List
Margin dan padding pada list juga bisa dibuat berbeda dari baris-baris paragraf lain. Caranya cukup mengatur kode CSS margin dan padding ul atau ol pada template Anda. Ada kemungkinan kode CSS nya akan sedikit berbeda pada template Anda, biasanya kode akan terlihat seperti ini.
.ul {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 20 px;
padding-left: 40px;
}
.ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 20 px;
padding-left: 40px;
}
Sebenarnya Anda juga bisa menambahkan code CSS di atas pada setiap list tanpa edit template, tapi saya tidak menyarankan yang satu ini kerena membuat kode list jadi terlalu panjang jika membuat kode secara keseluruhan. Misalkan:
<ol style='display: block; list-style-type: decimal; margin-top: 1em; margin-bottom: 1em; margin-left: 50px; margin-right: 20px; padding-left: 90px;'> <li>Contoh margin atas 1em, bawah 1em dan kiri 50px, dan kanan20px.</li> <li>Contoh Padding kiri90px</li> </ol>
Contoh paragaraf di atasnya
- Contoh margin atas 1em, bawah 1em dan kiri 50px, dan kanan20px.
- Contoh Padding kiri90px.
Contoh paragaraf di bawahnya
Cara Memghilangkan Angka Atau Huruf List
Silahkan Tambahkan Code CSS Berikut.
ol.non-type {list-style-type: none;}
Kemudian Anda bisa memanggilnya dengan "class". Contoh:
<ol class="non-type"> <li>None type</li> <li>Tea</li> <li>Coca Cola</li> </ol>
Hasil:
- None type
- Tea
- Coca Cola