Bagaimana jika kamu disuruh membuat list inventory barang pada suatu Website ?
Apa yang harus kamu lakukan ??
Ini cara yang sangat biasa untuk membuat manual list
Hasil output nya
Memang terlihat seperti list pada umumnya, tetapi ini bukan cara yang benar untuk membuat list pada suatu Website.
Penggunaan Elemen List pada HTML
Ternyata untuk pembuatan list pada website sangat mudah karena HTML sudah menyediakannya. Dengan tig acara pembuatan jenis list yang dapat dibuat dengan HTML :
- Ordered List (OL) yaitu list yang berurutan
- Unordered List (UL) yaitu list yang tidak berurutan
Yuk sekarang kita bahas dari masing-masing list nya…
1. Ordered List pada HTML
Pembuatan Ordered List dengan menggunakan Tag
- , dan didalamnya diisi dengan item yang akan dimasukkan kedalam list. Untuk membuat item sendiri dengan menggunakan Tag
- (List Item)
Berikut adalah code nya
Dan ini adalah Output nya
Kalau kita lihat dari output diatas, ternyata list diurutkan berdasarkan dari angka 1,2,3 sampai seterusnya, tergantung dari isi list item nya.
Terus bagaimana caranya kalau ingin output nya menggunakan huruf a,b,c atau dengan romawi I, II, III ?
Mudah kok buat nya..
Untuk mendapatkan output seperti itu, kita dapat menggunakan attribut type pada Tag ol nya, dan berikut nilai yang dapat kita berikan :
- a untuk alfabet a,b,c dan seterusnya
- A untuk alfabet A,B,C dan seterusnya
- i untuk angka romawi i,ii,iii dan seterusnya
- I untuk angka romawi I,II,III dan seterusnya
Berikut code nya
Dan ini hasil ouput nya
2. Unordered List pada HTML
Pengertian dari Unordered List yaitu list yang tidak berurutan yang menggunakan symbol-simbol pada item-nya. Unordered List dibuat dengan Tag <ul> dan untuk isi dari item nya juga dibuat dengan Tag <li>.
Berikut penulisan code nya
Dan ini adalah output dari code nya
Dengan kita menggunakan Unordered List, maka secara default nya symbol yang muncul yaitu lingkaran kecil (disc), tetapi kita juga bisa menggantinya dengan attribut type, penulisannya sama dengan Ordered List.
Ini beberapa value yang dapat diberikan di attribute type :
- square, untuk membuat symbol persegi.
- disc(default), untuk membuat symbol lingkaran kecil.
- None, untuk tidak menggunakan symbol.
- Circle, untuk membuat symbol lingkaran.
Berikut penulisan code nya
Dan inilah output dari code nya
