IWj1X5DXrCbI10RsBEkQ7SL6RUOnRXSRSecqO6kR
Cara Membuat HTML LIST yang Benar

Cara Membuat HTML LIST yang Benar


List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu, jenis- jenis list dalam HTML adalah:
  • list tanpa nomor
  • list dengan nomor
  • list definisi

Unordered List (List tanpa nomor)

Untuk cara membuat list tanpa nomor (bulleted list):
  1. Mulai dengan tag pembuka list <UL>
  2. Masukkan setiap item list dengan menggunakan tag <LI> kemudian tuliskan itemnya (satu saja), tag penutup item </LI>
  3. Ulangi lagi langkah kedua untuk menuliskan item list berikutnya
  4. Akhiri seluruh list dengan sebuah tag penutup </UL>


Unordered list disebut juga sebagai bulleted list, mempunyai bullet default berupa noktah. Jenis bullet bisa diubah contohnya dengan mengisi atribut “type” dengan disk atau box.


Ordered List (List dengan nomor)

Untuk list dengan nomor, disebut juga ordered list, tag <UL> dubah dengan <OL>, demikian juga
</UL> diganti dengan </OL>. Nomor item secara default adalah menggunakan angka 1,2,3..dst sampai dengan sejumlah item dalam list tersebut. Untuk keperluan penyajian tertentu kita dapat mengubah nomor dalam ordered list dengan model angka yang lain, dengan mengisi atribut “type” pada tag <OL>


TYPE ARTI
I Ditampilkan dengan angka Romawi huruf besar
i Ditampilkan dengan angka Romawi huruf kecil
a Ditampilkan dengan angka abjad huruf kecil
A Ditampilkan dengan angka abjad huruf besar


Selain atribut type, ada juga atribut start, digunakan untuk mendefinisikan  nomor awal yang akan digunakan pada ordered list. Jika kita ingin list dimulai dari nomor 8, maka penulisannya <OL START = 8>....</OL>.

Contoh Unordered List:


Contoh Ordered List:


Contoh Defenition List:

DONASI VIA PULSA Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain Prodi SEO. Terima kasih.
Selanjutnya...
SHARE
Blog Ala Santri
"Bagaimana aku akan takut dengan kemiskinan, sedangkan aku adalah hamba dari Yang Maha Kaya".

Related Posts

Subscribe to get free updates

Post a Comment