tutorial html

Membuat List Pada HTML

Membuat List Pada HTML – List atau orang – orang sering menyebutnya sebagai daftar adalah sebuah urutan. Urutan ini ( list ) dapat berupa urutan yang kronologis maupun hanya sebuah urutan biasa.

Secara garis besar list dapat dibedakan menjadi tiga, yaitu ordered list, unodered list, dan description list.

Untuk membuat sebuah list membutuhkan dua buah tag utama. Tag yang pertama adalah tag yang mendefinisikan jenis list, kemudian tag yang kedua adalah tag yang digunakan untuk membuat isi dari list.

 

1. Ordered List

Ordered list adalah list berupa urutan yang kronologis. Contohnya list urutan memasak, urutan sebuah prosedur, dan lain sebagainya.

Untuk membuat list jenis ini kita menggunakan tag <ol> dan tag <li>. Tag ol sebagai pendefinisi yang merupakan kependekan dari ordered list ( ol ) dan tag li sebagai penyusun isi dari list yang merupakan kependekan dari list item (li).

Mari kita coba untuk membuat list pada html mengenai cara menghidupkan komputer desktop. Silahkan buat sebuah dokumen html baru dengan nama belajar-list.html.

orderedlist

 

Secara default ordered list akan ditampilkan dengan urutan angka, namun kita juga bisa mengubahnya dengan atribut type.

Atribut type untuk ordered list ada 5 macam yaitu :

  • type I ( type=”I” )   : yaitu untuk menandai list dengan angka romawi besar.
  • type i ( type=”i” )    : yaitu untuk menandai list dengan huruf romawi kecil.
  • type 1 ( type=”1″ )   : yaitu untuk menandai list dengan angka.
  • type A ( type=”A” ) : yaitu untuk menandai list dengan huruf besar.
  • type a ( type=”a” )  : yaitu untuk menandai list dengan huruf kecil.

 

Mari kita coba salah satu type tersebut. Saya akan memodifikasi list sebelumnya agar penanda list menggunakan angka romawi besar.

ordered list

 

Ordered list juga memiliki satu atribut lagi yaitu atribut strart. Atribut ini kita gunakan jika menginginkan agar list yang dibuat tidak dimulai dari penanda yang paling awal. Misalnya agar list dimulai dari huruf C, dimulai dari angka 2, dan sebagainya. Nilai dari atribut start ini berupa angka.

Perhatikan contoh berikut.

ordered list

 

Baca Juga : Struktur Dasar HTML

 

2. Unordered List

Jenis list yang ke dua adalah unordered list. List ini merupakan jenis list yang tidak kronologis atau tidak ada urutan yang pasti.

Untuk membuat list pada html menggunakan jenis list ini kita menggunakan tag <ul> yang merupakan kependekan dari unodered list dan tag <li> sebagai penyusun isi list.

Untuk membuat list jenis ini sama halnya dengan membuat list sebelumnya. Mari kita modifikasi file belajar-list.html.

 

unordered list

Sama halnya dengan ordered list, unordered list juga memiliki atribut type. Ada tiga macam value atribut type untuk unordered list antara lain:

  • type disc ( type=”disc” )   : ini merupakan penanda dengan bentuk bulat hitam dan merupakan default dari unordered list.
  • type square ( type=”square” ) : ini merupakan penanda dengan bentuk kotak hitam.
  • type circle ( type=”circle” )   : ini merupakan penanda list dengan bentuk lingkaran hitam dibagian pinggir

 

Mari kita coba untuk menggunakan type circle.

unordered list

Unordered list tidak meiliki atribut start layaknya ordered list, inni dikarenakan bentuk list dari unordered list relatif sama. List jenis ini biasanya banyak digunakan untuk membuat menu navigasi sebuah blog maupun website.

 

3. Description List

List jenis ini biasanya digunakan untuk membuat urutan layaknya kamus yang diLLsertai dengan penjelasan.

Untuk membuat list jenis ini agak berbeda dengan dua list sebelumnya yang sudah kita bahas. Kita memerlukan tiga buah tag, yakni tag <dl> yang merupakan kependekan dari description list, tag <dt> yang merupakan kependekan dari data term dan tag <dd> yang merupakan kependekan dari data description.

Perhatikan contoh berikut:

Membuat List Pada HTML

List jenis ini jarang digunakan, yang paling sering adalah dua list sebelumnya yaitu ordered list dan unordered list.

Berikut kode lengkap pembahasan kita kali ini :

 

Sekian untuk pembahasan mengenai Membuat List Pada HTML. Lanjut ke tutorial belajar membuat table pada html.

Leave a Reply

Your email address will not be published. Required fields are marked *