HTML: Membuat Daftar atau List

Friday, 24 September 2021

HTML: Membuat Daftar atau List

Halo, apa kabarnya nih? Semoga banyak cemilan buat baca postingan ini.

Sebelumnya kita sudah coba membuat Heading dan Paragraf disini: HTML: Heading dan Paragraf.

Kali ini, kita akan coba buat Daftar atau List menggunakan HTML.

Pada HTML, ada 3 tipe List, yaitu:

  • Ordered List (Daftar yang terutut)
  • Unordered List (Daftar yang tidak terutut)
  • Description List (Daftar yang mempunyai definisi sendiri)

🐹 : “Mari kita mulai..”

Order List (Daftar Berurutan)

Membuat daftar secara berurutan biasanya dilakukan untuk mengelompokan sesuatu. Misal: Daftar Anggota Kelompok.

Contoh:

  1. Budi Lasido
  2. Eka Blitz
  3. Odyu

Diatas merupakan “Daftar Berurutan (Ordered List)” menggunakan gaya penomoran.

🐹 : “Mari kita buat di HTML”

Buat file baru, beri nama 📄contoh-list.html, kemudian tulis struktur dasar HTML.

Order List menggunakan tag <ol> sebagai pembungkus/indikator dan di dalamnya terdapat tag <li> sebagai itemnya.

🦧 : “Waduh..”

🐹 : “Pelan-pelan aja. Kita coba!”

<ol>
   <li>Budi</li>
</ol>

Simpan dan jalankan.. 🐹 : “Muncul ga? Kalo belum, coba cek lagi penulisannya..”

Jika ingin menambahkan item baru, silahkan tulis lagi tag baru.

Contoh:

<ol>
   <li>Budi</li>
   <li>Eka</li>
   <li>Odyu</li>
</ol>

🐹 : “Silahkan refresh halamannya untuk lihat perubahan..”

Unorder List (Daftar Tidak Beraturan)

Gaya penulisan daftar ini sering kita pakai saat menulis daftar belanjaan emak. Hehehe.. Tidak ada urutan, asalkan ada item-nya.

Misal:

  • Gula
  • Beras
  • Tepung
  • Minyak Goreng

🐹 : “Paham kan?”

Nah, untuk membuat List seperti itu di HTML, kita cukup menuliskan tag <ul> sebagai pembungkus dari itemnya.

<ul>
   <li>Gula</li>
   <li>Beras</li>
   <li>Tepung</li>
   <li>Minyak Goreng</li>
</ul>

Udah? Silahkan simpan dan refresh halaman untuk melihatnya!

Description List

Gaya list ini biasanya digunakan untuk menampilkan pengertian/deskripsi dari item yang ada.

Sedikit berbeda dengan 2 tipe list diatas, Description List menggunakan tag <dl sebagai pembungkus, kemudian ada tag <dt sebagai item, dan tag <dd sebagai deskripsinya.

🦐 : “Udah mulai berasap kepala saya..”

😹 : “Tenang.. Kita akan coba pelajari bersama..”

Coba kode berikut:

<dl>
	<dt>Indonesia</dt>
	<dd>Sebuah Negara dan Bangsa Hebat yang ada di atas Bumi.</dd>
</dl>

Bisa sampe sini? Kalo belum, monggo diulangi lagi.. Abis ini, kita akan memodifiksi sedikit “Daftar/List” yang sudah kita buat.

Modifikasi Tipe atau Gaya Lists 🪐

Saya harap, teman-teman sudah bisa membuat list seperti diatas. — mau coba-coba ya gapapa.. Untuk mengubahnya, kita cukup menambahkan attribute type.

💦Ordered List

Kita coba menambahkan attribute type pada kode sebelumnya diatas:

<ol type="">
   <li>Budi</li>
   <li>Eka</li>
   <li>Odyu</li>
</ol>

Nah, kita coba beri nilai untuk tipe gayanya, contoh:

<ol type="a">
   <li>Budi</li>
   <li>Eka</li>
   <li>Odyu</li>
</ol>

Coba simpan dan jalankan.. Ada perubahan?

Untuk Ordered List ada beberapa nilai tipe yang bisa dikasih, yaitu:

  • a : berurutan dari huruf a-z
  • i : berurutan sebagai angka romawi dengan tulisan kecil
  • A : berurutan dari huruf A-Z
  • I : berurutan sebagai angka romawi dengan tulisan besar

🦁 : “Bisa dipahami ga sampe sini? Hehehe..”

💦Unordered List

Nah, sekarang untuk Daftar tak terutut, ada beberapa nilai yang bisa dipakai, yaitu:

  • square : untuk simbol berbentuk kotak
  • disc : bebentuk lingkaran seperti cincin
  • none : tidak memiliki gaya simbol
  • circle : berbentuk bulat (tipe default)

Contohnya:

<ul type="square">
   <li>Budi</li>
   <li>Eka</li>
   <li>Odyu</li>
</ul>

🦁 : “Dicoba sendiri ya.. Biar eksperimen!”

Selanjutnya, ada satu yang tak kalah penting yaitu “Nested List”.

Nested List (List di dalam List)

Judulnya aja cukup “ngery” wkwkwk, tapi tenang.. Itu hanyalah istilah, tapi teknisnya mudah aja. Tinggal membuat sebuah List, kemudian di itemnya, dibuat list lagi.

🙉 : “Aaaarrrrggghhhh..”

Okeh, cukup.

Saya buatkan sebuah contoh sederhana:

<ul>

   <li>Kelompok 1:
      <ol>
         <li>Budi</li>
         <li>Eka</li>
         <li>Odyu</li>
         <li>Pus</li>
      </ol>
   </li>
   
   <li>Kelompok 2:
      <ol>
         <li>Gin</li>
         <li>Narto</li>
         <li>Sinpaci</li>
         <li>Kagura</li>
      </ol>
   </li>
   
</ul>

Silahkan dibuat menggunakan contoh lain, agar lebih meresap.. Ok? Sampe sini dulu, sampai bertemu di postingan berikutnya.

#html