Membuat List atau Daftar dengan HTML

Membuat List HTML

Seringkali kita melihat daftar yang misalnya seperti ini: Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

• Pangeran Diponegoro
• Perang Padri
• Teuku Umar
• Wolter Monginsidi
• Dan Lain-lainnya

Atau yang seperti ini:
Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

1. Pangeran Diponegoro
2. Perang Padri
3. Teuku Umar
4. Wolter Monginsidi
5. Dan Lain-lainnya

Nah, untuk membuat list atau daftar yang seperti ini dengan html caranya adalah dengan tag <ul></ul> yang disebut Unordered List atau dengan tag <ol></ol> yaitu Ordered List.
Beda antara <ol></ol> dan <ul></ul> adalah bahwa Ordered List <ol></ol> menghasilkan daftar dengan nomor urut 1,2,3 dst sedangkan Unordered List <ul></ul> hasilnya tanpa nomor.
Sekarang kita membuat list atau daftar dengan tag <ul></ul> supaya memperoleh hasil seperti diatas.
<strong>Daftar Buku Sejarah dan Pahlawan Kemerdekaan:</strong>
<ul>
<li>Pangeran Diponegoro</li>
<li>Perang Padri</li>
<li>Teuku Umar</li>
<li>Wolter Monginsidi </li>
<li>Dan Lain-lainnya</li>
</ul>
Hasilnya adalah seperti ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

• Pangeran Diponegoro
• Perang Padri
• Teuku Umar
• Wolter Monginsidi
• Dan Lain-lainnya

Supaya kita tahu perbedaannya, maka tag <ul></ul> kita ganti dengan tag <ol></ol>
kita lihat kode htmlnya sekarang menjadi seperti ini:
<strong>Daftar Buku Sejarah dan Pahlawan Kemerdekaan:</strong>
<ol>
<li>Pangeran Diponegoro</li>
<li>Perang Padri</li>
<li>Teuku Umar</li>
<li>Wolter Monginsidi </li>
<li>Dan Lain-lainnya</li>
</ol>
Lihatlah…… Sekarang hasilnya adalah seperti dibawah ini:

Daftar Buku Sejarah dan Pahlawan Kemerdekaan:

1. Pangeran Diponegoro
2. Perang Padri
3. Teuku Umar
4. Wolter Monginsidi
5. Dan Lain-lainnya

Kelihatan bedanya, kan?
Catatan:
Tag <strong> </strong> adalah untuk menebalkan text.
Seperti pada contoh diatas ada tag <strong> </strong> yang mengapit kalimat Daftar Buku Sejarah dan Pahlawan Kemerdekaan:
Silahkan Anda coba sendiri apa yang terjadi kalau tag <strong> </strong> dihapus.
Anda lihat perbedaannya?
Demikian cara membuat List atau Daftar dengan kode HTML.



http://belajarhtmltable.com/list-html/#more-328