Belajar Part 5 : CaraMembuat List pada HTML

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 :

  1. Ordered List (OL) yaitu list yang berurutan
  2. 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
  1. (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 :

  1. a untuk alfabet a,b,c dan seterusnya
  2. A untuk alfabet A,B,C dan seterusnya
  3. i untuk angka romawi i,ii,iii dan seterusnya
  4. 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 :

  1. square, untuk membuat symbol persegi.
  2. disc(default), untuk membuat symbol lingkaran kecil.
  3. None, untuk tidak menggunakan symbol.
  4. Circle, untuk membuat symbol lingkaran.

Berikut penulisan code nya

Dan inilah output dari code nya

Share this article

Connect with us

Isi email kamu untuk terhubung dengan Haltev, soal trend, promo dan lainnya

Request Syllabus

Isi formulir pendaftaran dengan lengkap untuk mendapatkan silabus kelas.

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

Konfirmasi Pembayaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

Formulir Pendaftaran

Isi formulir pendaftaran dengan lengkap untuk mendaftar.

  • Potongan HargaRp. 00