Belajar HTML : Cara Membuat List di HTML
Ittekcno.blogspot.com – pada artikel kali ini kita akan sama-sama membahas dan mempelajari tentang bagaimana cara membuat list di html.
Menyampaikan informasi atau menyajikan data dalam dokumen html menggunakan list dapat memudahkan para pembaca dalam mengolah dan memahami tentang informasi yang di sajikan tersebut.
Penggunaan list berfungsi agar kita dapat menyampaikan suatu informasi dengan lebih mudah dan teratur. Penggunaan list biasanya selalu berhubungan dengan informasi yang harus dijelaskan secara berurutan ataupun tersusun.
Untuk cara membuat list di html kita dapat menggunakan tag-tag seperti tag <ol>, tag <ul>, tag <li>, dan beberapa tag lainnya yang berhubungan dengan list. Tiap-tiap tag mempunyai fungsi dan kegunaan masing-masing.
Berikut ini adalah penjelasan detail tentang macam-macam list yang ada di HTML ;
Macam-Macam Element List di HTML
Di dalam HTML terdapat tiga jenis elemen list yang dapat kita gunakan, yaitu antara lain ;
- Ordered list ( list yang berurutan )
- Unordered list ( list yang tidak berurutan )
- Description list ( list yang berisi definisi )
Ketiga elemen list di atas mempunyai fungsi dan kegunaan masing-masing. Berikut adalah penjelasan tentang ketiga jenis list tersebut ;
1. Ordered List
Ordered list / list berurutan dibuat menggunakan tag <ol>, dan untuk membuat daftar atau isi listnya kita menggunakan tag <li>. Untuk lebih jelasnya perhatikan gambar berikut ;
input :
Output :
Perhatikan gambar di atas, pada saat kita membuat list menggunakan tag <ol>, maka list yang ditampilkan akan secara default menggunakan angka 1,2,3,4,5, dan seterusnya.
Selain angkat 1,2,3 dan seterusnya, kita juga bisa membuat list dengan huruf kecil ( a,b,c,d ) ataupun menggunakan angka romawi (I,II,III,IV, dan seterusnya ).
Baca Juga :
Untuk menampilkan yang seperti itu, kita bisa menggunakan atribut type pada tag <ol>. Berikut adalah beberapa value yang bisa digunakan pada atribut type ;
- A ( digunakan untuk menampilkan list menggunakan huruf capital )
- a ( digunakan untuk menampilkan list menggunakan huruf kecil )
- I ( digunakan untuk menampilkan list menggunakan angka romawi capital )
- i ( digunakan untuk menampilkan list menggunakan angka romawi kecil )
untuk lebih jelasnya, perhatikan gambar berikut ini ;
input :
output :
selain menggunakan atribut type, kita juga bisa menggunakan atribut start. Pada saat kita membuat list menggunakan tag <ol>, makan secara default list yang ditampilkan akan menggunakan angkat secara berurutan mulai dari 1 dan seterusnya.
Atribut start ini berfungsi untuk menentukan angka pertama yang akan muncul pada list yang ingin kita tampilkan. Misalnya saja kita ingin menampilkan list mulai dari angka 5, maka kita bisa menggunakan atribut start.
Untuk lebih jelasnya perhatikan gambar di bawah ini ;
input :
Output :
2. Unordered List
Unordered list / list tak berurutan dibuat menggunakan tag <ul>, dan untuk membuat daftar atau isi listnya kita juga menggunakan tag <li>. Untuk lebih jelasnya perhatikan gambar berikut ;
input :
Output :
Unordered list yang kita buat menggunakan tag <ul> akan secara default menggunakan lingkaran kecil (disc ). Tag <ul> juga memiliki beberapa atribut type yang bisa kita gunakan sesuai dengan jenis atau tampilan list seperti apa yang kita inginkan.
Berikut ini adalah beberapa value dari atribut type yang bisa kita gunakan pada tag <ul> ;
- square ( digunakan untuk menampilkan list menggunakan simbol persegi )
- disc ( digunakan untuk menampilkan list menggunakan lingkaran kecil )
- none ( digunakan untuk menampilkan list dengan tidak memakai simbol )
- circle ( digunakan untuk menampilkan list menggunakan simbol lingkaran )
untuk lebih jelasanya, perhatikan gambar di bawah ini ;
input :
output :
3. Description List
Apa itu description list ? description list merupakan suatu list yang berisi definisi, dekripsi, ataupun penjelasan dari suatu kata tertentu.
Pada pembuatan description list ini, terdapat tiga ( 3 ) tag yang bisa kita gunakan, yaitu ;
- Tag <dl> ( description list ) yaitu tag yang digunakan untuk membuat description list,
- Tag <dt> (description term ) yaitu tag yang digunakan untuk membuat kata yang akan dideskripsikan,
- Tag <dd> ( description description ) yaitu tag yang digunakan untuk membuat penjelasan dari suatu kata.
Untuk lebih jelasnya, perhatikan gambar berikut ini ;
Input :
Output :
List di Dalam List ( Nested List )
List di dalam list ini sebenarnya adalah hasil dari percampuran antara list list yang sudah kita jelaskan di atas. Untuk list jenis ini pembuatannya tergantung dari apa yang ingin kita tampilkan dan bagaimana kita ingin membuat listnya.
Sebagai contoh coba perhatikan gambar di bawah ini ;
Input :
Output :
Demikianlah pembahasan kita tentang bagaimana cara membuat list di HTML. Semoga artikel ini bisa bermanfaat dan menambah pengetahuan para pembaca sekalian.
Jika ada kritik dan saran silahkan tinggalkan di dalam kolom komentar artikel ini.
Terima Kasih