Membuat Daftar atau List Menggunakan Kode HTML

Membuat Daftar atau List Menggunakan Kode HTML Didalam kegiatan ber-blogging pasti tak luput dari penyajian daftar atau list dari suatu materi posting, misalnya membuat daftar blogroll, daftar lagu, daftar backlink dan lain sebagainya. Di posting kali ini saya ingin berbagi tentang dasar membuat suatu daftar atau list, perhatikan contoh dibawah ini :

Daftar lagu Indonesia terpopuler minggu ini : 

• Afgan - Panah Asmara
• D'Bagindas - Maafkan Aku
• Viera - Kesepian
• Anji - Berhenti Di Kamu

Perhatikan daftar lagu diatas, lingkaran (butir) sebelum teks dibentuk menggunakan tag <li> - </li>, daftar diawali dengan tag <ul> dan diakhiri dengan </ul>(Unordered List), lengkapnya cara penulisan untuk menghasilkan tampilan seperti contoh diatas adalah sebagai berikut :

<b>Daftar lagu Indonesia terpopuler minggu ini :</b>
<ul>
<li>Afgan - Panah Asmara</li>
<li>D'Bagindas - Maafkan Aku</li>
<li>Viera - Kesepian</li>
<li>Anji - Berhenti Di Kamu</li>
</ul>

Huruf tebal pada judul dirangkai menggunakan tag <b> dan </b>, dapat juga menggunakan <strong> dan </srong>. Berikut contoh lain dari sebuah daftar yang dibentuk dari kode HTML :

Daftar lagu Indonesia terpopuler minggu ini :

1.     Afgan – Panah Asmara
2.     D’Bagindas – Maafkan Aku
3.     Viera – Kesepian
4.     Anji – Berhenti Di Kamu

Untuk menampilkan daftar dengan urutan nomor sebelum teks adalah dengan menggunakan tag <ol> dan </ol> ( Ordered List ). Perbedaan antara <ul> - </ul>dengan <ol> - </ol> adalah, Ordered List akan menampilkan nomor urut sebelum daftar atau teks, sedangkan Unordered List tidak menampilkan nomor urut didepannya. Mari kita buat tag HTML yang menampilkan daftar seperti terlihat pada contoh ke dua diatas . 

<strong>Daftar lagu Indonesia terpopuler minggu ini :</strong>
<ol>
<li>Afgan - Panah Asmara</li>
<li>D'Bagindas - Maafkan Aku</li>
<li>Viera - Kesepian</li>
<li>Anji - Berhenti Di Kamu</li>
</ol>

Judul “Daftar lagu Indonesia terpopuler minggu ini” ini diapit oleh tag <strong> dan</strong>, coba anda ganti dengan <b> - </b> dan lihat perbedaannya, perhatikan juga jika <b> - </b> atau </strong> - </strong> dihilangkan, apa yang terjadi?, silahkan anda coba sendiri.