Membuat Daftar List Secara HTML

Gambaran Daftar (List)

Membuat daftar list dengan HTML, mengapa harus dipelajari ? ~ Baik dalam dunia blogging maupun website pembuatan daftar merupakan salah satu hal yang sering dilakukan. Untuk platform blog seperti blogger, wordpress, livejournal, dll pada dasarnya memang sudah menyediakan shortcut untuk membuat sebuah daftar, hanya saja shortcut yang diberikan ini memiliki keterbatasan kemampuan dimana tidak semua jenis daftar dapat digunakan, itulah alasan mengapa kita harus mengetahui bagaimana membuat list secara HTML.

Didalam dunia website/blog, daftar sendiri sebenarnya ada 4 jenis yaitu : Ordered List, Unordered List, Nesting List, dan Definition List. Apabila kalian pengguna blog, dalam platform blog shortcut untuk membuat list tersebut hanya terbatas pada ordered list (daftar berupa angka) dan Unordered list (daftar berupa poin), sedangkan untuk nesting dan definition list kita hanya bisa lakukan melalui edit HTML.

Ordered List

Ordered List, merupakan jenis daftar berupa angka atau sering disebut juga sebagai numbered list atau numbering apabila dalam MS word. Dalam ordered list ini akan ada dua jenis elemen yang dibutuhkan yaitu <ol> yang merupakan singkatan ordered list dan <li> yang merupakan singkatan list item.

Contoh Ordered List

Berdasarkan pada contoh diatas, maka kita dapat tuliskan bentuk HTML nya sebagai berikut :
Contoh HTML dari ordered list :

<ol><li>Login ke account google kalian terlebih dahulu</li><li>Masuk ke alamat feedburner (http://feedburner.google.com)</li><li>Setelah itu isikan alamat URL blog kalian di kolom yang bertuliskan "burn a feed right this instan", lalu klik next. </li></ol>

Unordered List

Unordered list, merupakan bentuk daftar berupa poin-poin. nama lain dari unordered list sendiri adalah bullet list. Bullet atau onordered list ini umumnya digunakan apabila kita ingin membuat suatu daftar yang terlepas dari suatu urutan-urutan tertentu. Untuk list jenis ini, pembuatannya sangat mirip dengan Ordered list, hanya saja ada perbedaan pada jenis synthax yang digunakan dimana unordered list akan menggunakan <ul>.

Contoh HTML Unordered list :

<ul><li>Mutum, D; Qing, W. (2010). Consumer Generated In Blogs. Handbook of Reseach on Digital Media and Advertising:User Generated Content Consumtion 1.�</li><li>Rebecca, B. (2000). Weblog: A History and Perspective</a></li><li>Zaki, A & Smitdev, C. (2008). Optimasi Blogging. Gramedia Pustaka Utama. Jakarta.</li></ul>

Seperti halnya pada ordered list dan semua penulisan script, apabila ada opening tag pasti akan selalu diakhiri closing tag: </li> dan </ul> untuk undordered list. Dari hasil script HTML diatas maka berikut hasilnya :

Contoh Hasil Unordered List

Nesting List

Nesting list, merupakan daftar yang ada dalam daftar. Didalam pengaplikasiannya, nesting list akan menggunakan kombinasi dari dua jenis list: bisa ordered dengan unordered list, ordered dengan ordered list maupun unordered dengan unordered list. Didalam membuat jenis daftar ini yang kita butuhkan hanyalah ketelitian.

Contoh HTML Nesting List Dengan Kombinasi Sesama Ordered List.

<ol><li>Tambahkan telur, tepung, mentega, dan gula lalu aduk hingga mengental</li><li>Tuangkan kedalam baking pan</li><li>Tambahkan bahan ini sesuai urutan sambil diaduk perlahan : <ol><li>Tambahkan saus coklat</li><li>Tambahkan kayu manis yang telah dihancurkan</li></ol></li><li>Masukan kedalam oven dan panggang selama 40 menit</li></ol>

Hasil Nesting List 1

didalam jenis daftar ini, apabila kita ingin mengkombinasikan antara ordered dan unordered list, maka kita hanya perlu mengganti opening dan closing tag <ol> </ol> dengan <ul> </ul>

Contoh Nesting List : Kombinasi Ordered List Dengan Unordered List 

<ol>
<li>Tambahkan telur, tepung, mentega, dan gula lalu aduk hingga mengental</li>
<li>Tuangkan kedalam baking pan</li>
<li>Tambahkan bahan ini sesuai urutan sambil diaduk perlahan :
      <ul>
      <li>Tambahkan saus coklat</li>
      <li>Tambahkan kayu manis yang telah dihancurkan</li>
     </ul>
</li>
<li>Masukan kedalam oven dan panggang selama 40 menit</li>
</ol>

Definition List

Ini merupakan jenis daftar yang umumnya digunakan untuk mendefinisikan sesuatu. Definition list sendiri sebenarnya sudah terlepas dari ketiga daftar diatas, dalam artian mempunyai jenis opening dan closing tag yang benar-benar berbeda dari tiga jenis daftar diatas. Definition list akan menggunakan tiga jenis tag : Diawali dengan <dl> yang merupakan singkatan definition list; <dt> yang merupakan singkatan definition term (digunakan untuk kata yang akan didefinisikan); <dd> definition description yang merupakan penjelasan dari suatu istilah (<dt>).

Contoh HTML Definition List :

<dl><dt>SEO</dt><dd>Search Engine Optimization, Teknik untuk memaksimalkan pencarian situs di search engine</dd><dt>Blog</dt><dd>Singkatan dari weblog yang merupakan bentuk sederhana dari website</dd><dt>SE</dt><dd>Search Engine, sejumlah mesin pencari situs seperti google, bing, dan yahoo</dd></dl>

Hasil Dari Definition List