Selasa, 17 April 2012

Membuat List atau Daftar dengan 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

              http://www.w3schools.com/html/

Tidak ada komentar:

Posting Komentar