Kalian pernah ngetik di microsoft word dan menggunakan Bullets and Numbering? Kalian gunakan untuk apa Bullets and Numberingnya? Bullets and Numbering digunakan untuk membuat daftar, seperti daftar makanan, daftar hobi dan lain sebagainya yang disusun dengan penomoran atau simbol. Pada HTML ini dikenal dengan nama List.
Apa itu List di HTML?
Pada HTML, list adalah elemen yang digunakan untuk menampilkan informasi dalam bentuk list atau daftar, bisa berupa simbol (Bullet) atau nomor urut (Numbering). List HTML bisa juga digunakan untuk membuat menu navigasi pada halaman website.
Jenis List di HTML
Di dalam HTML ada tiga jenis list yaitu:
- Ordered List <ol></ol> adalah list yang terurut;
- Unordered List <ul></ul> adalah list yang tak terurut;
- Definition List <dl></dl> adalah list yang berisi definisi.
Dalam pembahasan pada tutorial ini kita akan menggunakan ketiganya untuk latihan. Namun pada praktek nyatanya kalian nanti dapat memilih dan menyesuaikan sendiri penggunaannya.
Cara Menggunakan Ordered List di HTML
Ordered list adalah sebuah list yang terurut. List ini ditandai dengan angka atau huruf di depannya sebagai penanda bahwa list ini terurut. Untuk membuat Ordered list kalian dapat membuatnya dengan tag <ol>. Di dalam <ol> terdapat sub elemen untuk menentukan item listnya yaitu dengan menggunakan Tag <li> (list item).
Contoh Penggunaan Ordered List:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <title>Belajar Ordered List HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar nama ikan yang hidup di laut</h3> <ol> <li>Bandeng</li> <li>Barakuda</li> <li>Baronang</li> <li>Belanak</li> <li>Buntal</li> <li>Hiu</li> <li>Kakap</li> <li>Kerapu</li> </ol> </body> </html> |
Secara default Ordered List <ol></ol> akan menghasilkan tampilan daftar terurut dengan nomor, seperti contoh di atas menghasilkan urutan 1 sampai dengan 8. Kita juga dapat menyesuaikan tipe penomorannya misalkan menginginkan huruf a, b, c dan seterusnya, atau I, II, III dan seterusnya. Caranya tinggal menambahkan atribut type di Tag awal <ol>, dengan format <ol type=”…”></ol>.
Buatlah kode HTML berikut ini untuk mencoba Atribut type.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>Belajar Ordered List HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar nama ikan mentah</h3> <ol> <li>Nila</li> <li>Bawal</li> <li>Gurami</li> </ol> <h3>Daftar Menu Makanan</h3> <ol type="a"> <li>Nila Bakar</li> <li>Bawal Goreng Sambal Ijo</li> <li>Gurami Bakar</li> </ol> <h3>Daftar Menu Minuman</h3> <ol type="I"> <li>Es Teh</li> <li>Kopi Panas</li> <li>Kopi Dingin</li> </ol> </body> </html> |
Hasil dari kode di atas dapat dilihat pada gambar berikut ini.
Cara Menggunakan Unordered List di HTML
Unordered List adalah daftar/list item yang tidak memiliki urutan atau urutan khusus. Daftar ini dibuat dengan menggunakan tag HTML <ul>. Setiap item dalam daftar ditandai dengan simbol-simbol.
Kalian bisa menggunakan atribut type untuk tag <ul> untuk menentukan tipe bullet/simbol yang kalian inginkan. Secara default, ini adalah disc. Beberapa opsi type yang kalian bisa gunakan adalah circle, square dan disc.
Berikut ini contoh penggunakan unordered List <ul></ul>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <title>Belajar Unordered List HTML Bersama SulusiLain.Com</title> </head> <body> <h3>Daftar Tanaman Obat</h3> <ul> <li>Jahe</li> <li>Kunyit</li> <li>Kumis Kucing</li> </ul> <h3>Daftar Buah</h3> <ul type="square"> <li>Duku</li> <li>Salak</li> <li>Rambutan</li> </ul> <h3>Daftar Sayuran</h3> <ul type="circle"> <li>Bayam</li> <li>Kangkung</li> <li>Kol</li> </ul> </body> </html> |
Dari kode diatas akan menampilkan halaman seperti pada gambar berikut ini.
Menggunakan Definition List di HTML
Selain Ordered List dan Unordered List, Pada HTML mendukung daftar/list yang disebut daftar definisi di mana entri terdaftar seperti dalam kamus atau ensiklopedia. Daftar definisi cocok digunakan untuk menyajikan glosarium, daftar istilah, atau daftar nama/nilai lainnya.
Daftar Definisi menggunakan tiga tag berikut.
- <dl> – Menentukan awal daftar
- <dt> – Istilah
- <dd> – Definisi istilah
- </dl> – Menentukan akhir daftar
Cohtoh Penggunaan Definition List pada HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>Belajar Definition List HTML Bersama SolusiLain.Com</title> </head> <body> <h3>Daftar Istilah dalam Pemrograman Web</h3> <dl> <dt><b>Web Browser</b></dt> <dd>Suatu program atau software yang digunakan untuk menjelajahi internet atau untuk mencari informasi dari suatu web yang tersimpan didalam komputer.</dd> <dt><b>Web Server</b></dt> <dd>Perangkat lunak yang berfungsi sebagai penerima permintaan yang dikirimkan melalui browser kemudian memberikan tanggapan permintaan dalam bentuk halaman situs web atau lebih umumnya dalam dokumen HTML.</dd> </dl> </body> </html> |
Hasil dari kode di atas adalah sebagai berikut.
Itulah Cara Membuat List di HTML untuk menyajikan informasi dalaman bentuk daftar/list. Mudah-mudahan bermanfaat.