Langkah berikutnya yang akan kita pelajari dalam tutorial belajar HTML dasar adalah cara membuat daftar/list di HTML. Untuk menampilkan sebuah text sebagai daftar/list, HTML menyediakan Tag <ol>, <ul> dan <li>.
Cara Membuat Daftar/List di HTML
Dalam HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf, sedangkan unordered list dengan bulatan atau kotak.
Ordered list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>, sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan lebih mudah jika menggunakan contoh.
Berikut adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:
<!DOCTYPE html> <html> <head> <title>penggunaan tag list </title> </head> <body> <h1>daftar belanjaan</h1> <ol> <li>minyak goreng</li> <li>sabun mandi</li> <li>deterjen</li> <li>shampoo</li> <li>obat nyamuk</li> </ol> </body> </html>Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.
Berikut adalah contoh kode HTML untuk membuat unordered list menggunakan tag<ul>:
<!DOCTYPE html> <html> <head> <title>penggunaan tag list </title> </head> <body> <h1>daftar belanjaan</h1> <ul> <li>minyak goreng</li> <li>sabun mandi</li> <li>deterjen</li> <li>shampoo</li> <li>obat nyamuk</li> </ul> </body> </html>eBook HTML Uncover Duniailkom
Anda serius ingin menguasai HTML? Duniailkom telah menyusun eBook HTML Uncover. eBook ini membahas HTML dengan lebih detail dan lebih lengkap hingga fitur terbaru HTML5. Penjelasan lebih lanjut bisa ke: eBook HTML Uncover Duniailkom.
Kalian pernah ngetik di microsoft word dan menggunakan Bullets and Numbering? Kalian gunakan untuk apa Bullets and Numberingnya? Bullets and Numbering digunakan untuk membuat daftar, seperti daftar makanan, daftar hobi dan lain sebagainya yang disusun dengan penomoran atau simbol. Pada HTML ini dikenal dengan nama List.
Apa itu List di HTML?
Pada HTML, list adalah elemen yang digunakan untuk menampilkan informasi dalam bentuk list atau daftar, bisa berupa simbol (Bullet) atau nomor urut (Numbering). List HTML bisa juga digunakan untuk membuat menu navigasi pada halaman website.
Jenis List di HTML
Di dalam HTML ada tiga jenis list yaitu:
- Ordered List <ol></ol> adalah list yang terurut;
- Unordered List <ul></ul> adalah list yang tak terurut;
- Definition List <dl></dl> adalah list yang berisi definisi.
Dalam pembahasan pada tutorial ini kita akan menggunakan ketiganya untuk latihan. Namun pada praktek nyatanya kalian nanti dapat memilih dan menyesuaikan sendiri penggunaannya.
Cara Menggunakan Ordered List di HTML
Ordered list adalah sebuah list yang terurut. List ini ditandai dengan angka atau huruf di depannya sebagai penanda bahwa list ini terurut. Untuk membuat Ordered list kalian dapat membuatnya dengan tag <ol>. Di dalam <ol> terdapat sub elemen untuk menentukan item listnya yaitu dengan menggunakan Tag <li> (list item).
Contoh Penggunaan Ordered List:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Belajar Ordered List HTML Bersama SolusiLain.Com</title>
</head>
<body>
<h3>Daftar nama ikan yang hidup di laut</h3>
<ol>
<li>Bandeng</li>
<li>Barakuda</li>
<li>Baronang</li>
<li>Belanak</li>
<li>Buntal</li>
<li>Hiu</li>
<li>Kakap</li>
<li>Kerapu</li>
</ol>
</body>
</html>
Kode HTML di atas akan menghasilkan tampilan seperti berikut:Tampilan Ordered List
Secara default Ordered List <ol></ol> akan menghasilkan tampilan daftar terurut dengan nomor, seperti contoh di atas menghasilkan urutan 1 sampai dengan 8. Kita juga dapat menyesuaikan tipe penomorannya misalkan menginginkan huruf a, b, c dan seterusnya, atau I, II, III dan seterusnya. Caranya tinggal menambahkan atribut type di Tag awal <ol>, dengan format <ol type=”…”></ol>.
Buatlah kode HTML berikut ini untuk mencoba Atribut type.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Belajar Ordered List HTML Bersama SolusiLain.Com</title>
</head>
<body>
<h3>Daftar nama ikan mentah</h3>
<ol>
<li>Nila</li>
<li>Bawal</li>
<li>Gurami</li>
</ol>
<h3>Daftar Menu Makanan</h3>
<ol type="a">
<li>Nila Bakar</li>
<li>Bawal Goreng Sambal Ijo</li>
<li>Gurami Bakar</li>
</ol>
<h3>Daftar Menu Minuman</h3>
<ol type="I">
<li>Es Teh</li>
<li>Kopi Panas</li>
<li>Kopi Dingin</li>
</ol>
</body>
</html>
Hasil dari kode di atas dapat dilihat pada gambar berikut ini.
Ordered List Type
Cara Menggunakan Unordered List di HTML
Unordered List adalah daftar/list item yang tidak memiliki urutan atau urutan khusus. Daftar ini dibuat dengan menggunakan tag HTML <ul>. Setiap item dalam daftar ditandai dengan simbol-simbol.
Kalian bisa menggunakan atribut type untuk tag <ul> untuk menentukan tipe bullet/simbol yang kalian inginkan. Secara default, ini adalah disc. Beberapa opsi type yang kalian bisa gunakan adalah circle, square dan disc.
Berikut ini contoh penggunakan unordered List <ul></ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Belajar Unordered List HTML Bersama SulusiLain.Com</title>
</head>
<body>
<h3>Daftar Tanaman Obat</h3>
<ul>
<li>Jahe</li>
<li>Kunyit</li>
<li>Kumis Kucing</li>
</ul>
<h3>Daftar Buah</h3>
<ul type="square">
<li>Duku</li>
<li>Salak</li>
<li>Rambutan</li>
</ul>
<h3>Daftar Sayuran</h3>
<ul type="circle">
<li>Bayam</li>
<li>Kangkung</li>
<li>Kol</li>
</ul>
</body>
</html>
Dari kode diatas akan menampilkan halaman seperti pada gambar berikut ini.
Hasil Unordered List HTML
Menggunakan Definition List di HTML
Selain Ordered List dan Unordered List, Pada HTML mendukung daftar/list yang disebut daftar definisi di mana entri terdaftar seperti dalam kamus atau ensiklopedia. Daftar definisi cocok digunakan untuk menyajikan glosarium, daftar istilah, atau daftar nama/nilai lainnya.
Daftar Definisi menggunakan tiga tag berikut.
- <dl> – Menentukan awal daftar
- <dt> – Istilah
- <dd> – Definisi istilah
- </dl> – Menentukan akhir daftar
Cohtoh Penggunaan Definition List pada HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<title>Belajar Definition List HTML Bersama SolusiLain.Com</title>
</head>
<body>
<h3>Daftar Istilah dalam Pemrograman Web</h3>
<dl>
<dt><b>Web Browser</b></dt>
<dd>Suatu program atau software yang digunakan untuk
menjelajahi internet atau untuk mencari informasi
dari suatu web yang tersimpan didalam komputer.</dd>
<dt><b>Web Server</b></dt>
<dd>Perangkat lunak yang berfungsi sebagai penerima permintaan yang dikirimkan
melalui browser kemudian memberikan tanggapan permintaan
dalam bentuk halaman situs web atau lebih umumnya
dalam dokumen HTML.</dd>
</dl>
</body>
</html>
Hasil dari kode di atas adalah sebagai berikut.
Hasil Definition List HTML
Itulah Cara Membuat List di HTML untuk menyajikan informasi dalaman bentuk daftar/list. Mudah-mudahan bermanfaat.