Membuat Daftar Bernomor dan Tak Bernomor di HTML

Selamat datang kembali. Jadi di artikel ini adalah melanjutkan artikel sebelumnya, yaitu Tag Yang Harus Diketahui dan Paling Sering Dipakai di HTML. Artikel kali ini akan berfokus pada daftar/list. Daftar yang dimaksud disini adalah daftar “kata benda”, seperti “daftar artikel blog”, bukan daftar “kata kerja”, seperti “mendaftar dengan formulir ini”. Jadi artikel ini mungkin akan sangat singkat, karena daftar atau mungkin kita sebut saja list agar tidak membingungkan. Jadi artikel ini mungkin akan singkat saja karena list pada HTML ini adalah sesuatu yang sangat mudah dan sederhana. Namun dibalik kesederhanaannya ini, list adalah salah satu elemen yang paling sering dipakai. Oh ya, sebelum memulai, perlu diketahui bahwa artikel ini adalah bagian dari Pelatihan Pengembangan Web, jadi jika ini pertama kalinya kalian membuka situs ini, ada baiknya untuk membaca Tentang Pelatihan Pengembangan Web. Jadi ada dua jenis list yang bisa kita definisikan. Salah satunya adalah daftar bernomor atau daftar berurutan (ordered list) yang akan terlihat seperti dibawah ini.

  1. Pegang toples dengan kedua tangan
  2. Taruh satu tangan di bagian tutup dan tangan lainnya tetap di badan toples
  3. Putar tutup toples berlawanan arah jarum jam
  4. Toples terbuka
Dan yang lainnya adalah daftar tak bernomor atau daftar tak berurutan (unordered list) yang bekerja dengan cara yang sama kecuali kita memiliki poin-poin di sini bukan angka, seperti dibawah ini.
  • Jangan main klarinet.
  • Jangan pernah melambaikan lampu senter ke depan dan ke belakang terlalu cepat. Itu dianggap undangan.
  • Jangan pernah berhenti menatap sekitar.
  • Jangan makan keju, kecuali yang kotak.
  • Jangan pakai topi sombrero.
  • Jangan pakai baju bodoh.
  • Jangan pakai rok panjang.
  • Jangan pakai sepatu merah.
  • Jangan berlagak seperti kera.
  • Jika beruang sudah mendekat, buat gambar lingkaran besar untuk melindungi diri dari gigitan beruang. Usahakan jangan lonjong.
  • Jangan lari.
  • Jangan jalan pincang.
  • Jangan merangkak.

Daftar Berurutan/Daftar Benomor

Jadi kita akan mulai dengan membicarakan daftar berurutan atau daftar bernomor dan tag yang digunakannya. Tag untuk daftar ini adalah ol  singkatan dari Ordered List. Tapi, jika kita hanya menulis tag ol tersebut dan menampilkannya di browser seperti dibawah ini.
<ol></ol>
Tidak akan muncul apapun karena daftar bernomor sendiri sendiri tidak berarti apa-apa jika sendirian. Kita harus memasukan unsur-unsur daftar atau item daftar yang memiliki tag li ,singkatan dari List Item. Item-item yang ingin kita tuliskan dimasukan dalam tag <li> tersebut dan dimasukan kedalam tag <ol>. Seperti contoh dibawah ini.
<ol>
  <li>Ambil piring</li>
  <li>Lemparkan</li>
  <li>Catat waktu yang dibutuhkan hingga piring jatuh ke tanah</li>
  <li>Tulis dalam laporan dan buat kesimpulannya</li>
</ol>
Hasil dari contoh diatas adalah seperti dibawah ini.
  1. Ambil piring
  2. Lemparkan
  3. Catat waktu yang dibutuhkan hingga piring jatuh ke tanah
  4. Tulis dalam laporan dan buat kesimpulannya
Selesai, kita sudah berhasil membuat daftar bernomor. Mudah bukan?

Daftar Tak Berurutan/Daftar Tak Benomor

Sekarang bagaimana dengan daftar tak bernomor? Sama saja, perbedaannya adalah tag yang digunakan adalah ul , singkatan dari Unordered List. Tag untuk item nya sama, yaitu li . Karena sama, maka langsung saja ke contoh penggunaannya, seperti dibawah ini.
<ul>
  <li>Jangan menghujat</li>
  <li>Jangan Membunuh</li>
  <li>Jangan Berzina</li>
  <li>Jangan Mencuri</li>
  <li>Jangan Berbohong</li>
</ul>
Yang apabila ditampilkan, hasilnya adalah seperti dibawah ini,
  • Jangan menghujat
  • Jangan Membunuh
  • Jangan Berzina
  • Jangan Mencuri
  • Jangan Berbohong
Mudah bukan? Jadi itulah yang ingin saya tunjukkan tentang daftar di HTML Kita dapat menggabungkan semua ini bersama-sama untuk membuat beberapa daftar yang menarik seperti dibawah ini.
<ol>
 	<li>Huruf antara B-E
 	 	<ul>
 	 	 	<li>B</li>
 	 	 	<li>C</li>
 	 	 	<li>D</li>
 	 	 	<li>E</li>
 	 	</ul>
 	</li>
 	<li>Cara memasak air
 	 	<ol>
 	 	 	<li>Siapkan alat dan bahan</li>
 	 	 	<li>Masukan air ke dalam pemanas</li>
 	 	 	<li>Nyalakan</li>
 	 	 	<li>Tunggu sampai mendidih</li>
 	 	</ol>
 	</li>
 	<li>Dan lain lain</li>
</ol>
Hailnya
  1. Huruf antara B-E
    • B
    • C
    • D
    • E
  2. Cara memasak air
    1. Siapkan alat dan bahan
    2. Masukan air ke dalam pemanas
    3. Nyalakan
    4. Tunggu sampai mendidih
  3. Dan lain lain
kita juga dapat mengkombinasikan dengan judul atau paragraf seperti pada artikel sebelumnya.  Tag <ul> atau <ol> dan <li> ini adalah salah satu yang mendasari dari antarmuka banyak website. Jadi meskipun dalam contoh ini tidak indah dan terlihat tidak terlalu berguna, namun dalam prakteknya nanti akan sangat berguna dan dapat diper-indah dengan CSS, agar berubah menjadi angka romawi mungkin, atau bullet dari daftar takbernomornya diganti gambar, semua itu akan dibahas ketika kita sampai di artikel mengenai CSS nanti. Jadi mungkin di artikel berikutnya, kita akan berlatih secara singkat tentang apa yang sudah dipelajari selama ini. Latihan berupa membuat tampilan HTML sesuai dengan gambar yang saya berikan. Terlihat sulit? tenang saja, asalkan kalian membaca semua artikel saya dari awal, tidak akan sulit kok, karena ini masih Dasar HTML.]]>

About: totop275


One thought on “Membuat Daftar Bernomor dan Tak Bernomor di HTML”

Leave a Reply

Your email address will not be published. Required fields are marked *