Cara Membuat Multilevel List (Daftar Urutan) di Pemrograman Web Dasar

Multilevel List atau Daftar Urut adalah pembuatan list ke dalam satu atau beberapa level menggunakan beberapa elemen, yaitu elemen teratur (ordered list) dan element tak teratur (unordered list).  Ordered list berfungsi untuk membuat nomor daftar urut. Ordered list terdiri dari angka, huruf adbjad, dan huruf abjad romawi. Sedangkan unordered list berfungsi untuk membuat daftar tanpa nomor urut. Unordered list terdiri dari elemen square, circle, dan disc. Untuk lebih jelasnya, perhatikan penjelasan di bawah ini :

1.       Ordered List
Ordered list berfungsi untuk membuat nomor daftar urut dengan angka, huruf abjad, dan huruf abjad romawi. Daftar urut ini diawali dengan tag <ol> dan diakhiri dengan tag </ol>. Tag yang berada di dalam tag <ol> dan tag </ol> adalah tag </li>. Tag ini berfungsi sebagai tag item, yaitu isi dari daftar yang dibuat. Untuk atribut apa saja yang bisa digunakan di tag ini, silahkan lihat tabel berikut :

Tag	Atribut	Deskripsi	Contoh Nilai
<ol>	type	Menentukan bentuk daftar urutan	1,A,a,I,i
	start	Memberikan nilai awal dari daftar urutan	1,2,3… A,B,C… a,b,c…. I,II,III… i,ii,iii,…
<li>	type	Menentukan bentuk daftar urutan	1,A,a,I,i
	value	Menentukan nilai nomor urutan dari atribut type	1,2,3… A,B,C… a,b,c…. I,II,III… i,ii,iii,…

Untuk lebih jelas penggunaan tag, atribut, dan nilai di atas, saya akan memberikan beberapa contoh di bawah :

Contoh 1.1

Keterangan :

• Pada contoh 1.1 adalah Daftar Barang diamana terdapat beberapa elemen yang hanya mempunyai satu level, dua level, dan tiga level. Pada elemen ke- 1, 4, dan 5 yaitu Komputer, Tablet, dan Modem hanya memiliki satu level dimana elemen tersebut tidak dibagi lagi menjadi beberapa sub elemen.
• Pada elemen ke-2 yaitu Laptop mempunyai dua level dimana elemen Laptop dibagi menjadi beberapa sub elemen yaitu Acer, Lenovo, dan Asus.
• Sedangkan pada elemen ke-3 yaitu Android mempunyai tiga level dimana elemen Android dibagi menjadi beberapa sub elemen yaitu Mito, Evercross, dan Samsung. Kemudian sub elemen Mito dibagi lagi menjadi beberapa super-elemen yaitu A100, A200, dan A300.

Contoh pembuatan daftar urut diawali oleh suatu nilai :

Contoh 1.2

Keterangan :

• Perhatikan pada Contoh 1.2 bahwa elemen pada level satu dimulai dengan nomor 4 karena pada program yang saya buat terdapat atribut dan nilai start=”4” pada tag <ol> yang pertama yang menunjukkan elemen tersebut berada pada level satu.
• Elemen pada level dua yaitu sub elemen dari elemen Laptop dimulai dengan huruf abjad H karena pada level ini, bentuk list yang saya gunakan bertipe A (huruf abjad). Kenapa dimulai dengan huruf abjad H ? Karena pada tag <li> pertama di bawah tag <ol> di level kedua terdapat atribut dan nilai value=”8” yang menunjukkan bahwa nilai 8 adalah huruf abjad H.
• Elemen pada level ketiga yaitu super-elemen dari sub elemen Mito dimulai dengan huruf romawi V karena pada level ini, bentuk list yang saya gunakan bertipe I (huruf romawi). Alasan dimulai dengan huruf romawi V karena pada tag <li> pertama di bawah tag <ol> di level ketiga terdapat atribut dan nilai value=”5” yang menunjukkan bahwa nilai 5 adalah huruf romawi V.

2.       Unordered List
Unordered list berfungsi untuk membuat daftar urut tanpa nomor, yaitu dengan menggunakan beberapa elemen (simbol). Elemen-elemen tersebut adalah circle (lingkaran dengan lubang tengah), square (persegi padat), disc (lingkaran padat). Daftar urut ini diawali dengan tag <ul> dan diakhiri dengan tag </ul>. Sedangkan tag item atau tag yang berada di dalam tag ini adalah sama dengan tag <ol>, yaitu tag <li>.  Untuk melihat atribut yang digunakan, perhatikan tabel berikut :

Tag	Atribut	Deskripsi	Contoh Nilai
<ul>	type	Menentukan bentuk daftar urutan	circle, square, disc
<li>	type	Menentukan bentuk daftar urutan	circle, square, disc

Silahkan lihat beberapa contoh dalam penggunaan tag, atribut, dan nilai tersebut di bawah ini :

Contoh 2.1

Keterangan :

• Pada Contoh 2.1, elemen pada level satu menggunakan atribut dan nilai type=”disc” yang menunjukkan simbol yang digunakan adalah lingkaran padat.
• Elemen pada level dua yaitu sub elemen dari elemen Laptop menggunakan atribut dan nilai type=”square” yang menunjukkan simbol yang digunakan adalah persegi padat.
• Elemen pada level tiga yaitu super-elemen dari sub elemen Mito menggunakan atribut dan nilai type=”circle” yang menunjukkan simbol yang digunakan adalah lingkaran dengan lubang di tengah.

Dengan modal dasar di atas, diharapkan sobat bisa membuat dan mengembangkan penulisan Daftar Urut ke beberapa level. Silahkan sobat bisa mencoba latihan sendir di rumah dengan beberapa kasus pembuatan Daftar Urut seperti yang saya contohkan di atas. Baik, saya rasa cukup materi tentang Cara Membuat Multilevel List (Daftar Urutan) di Pemrograman Web Dasar yang saya sampaikan hari ini. Semoga bermanfaat dan terimakasih atas kunjungannya. J