List adalah elemen yang digunakan untuk menampilkan informasi dalam bentuk list. Biasanya digunakan untuk membuat menu.
Ada tiga jenis list di HTML:
- Ordered List adalah list yang terurut;
- Unordered List adalah list yang tak terurut;
- Descriptiona List adalah list yang berisi definisi.
Mari kita bahas satu-per-satu…
1. Cara Membuat 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.
Ordered list dibuat dengan tag
<ol>. Tag ini memiliki anak berupa tag untuk membuat item list yaitu <li> (list item).
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Membuat List Ordered</title>
</head>
<body>
<h3>10 distro linux yang sering digunakan di Indonesia</h3>
<ol>
<li>Ubuntu</li>
<li>Mint</li>
<li>BlankOn</li>
<li>Fedora</li>
<li>Debian</li>
<li>CentOS</li>
<li>OpenSUSE</li>
<li>ElementaryOS</li>
<li>BackTrack</li>
<li>Kali Linux</li>
</ol>
</body>
</html>
Hasilnya:
10 distro linux yang sering digunakan di Indonesia
- Ubuntu
- Mint
- BlankOn
- Fedora
- Debian
- CentOS
- OpenSUSE
- ElementaryOS
- BackTrack
- Kali Linux
List diatas diurutkan berdasarkan angka dari
1 sampai 10.
Lalu bagaimana kalau kita ingin menggunakan huruf seperti
a, b, c atau angka romawi seperti I, II, III?
Gampang…
Untuk membuat yang seperti itu, kita bisa menggunakan atribut
type pada tag ol.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List dengan Atribut Type</title>
</head>
<body>
<h3>List dengan type alfabet</h3>
<ol type='a'>
<li>Gunakan Linux</li>
<li>Jadilah Kreatif</li>
<li>Berani Berbeda</li>
</ol>
<h3>List dengan type alfabet kapital (huruf besar)</h3>
<ol type='A'>
<li>Gunakan Linux</li>
<li>Jadilah Kreatif</li>
<li>Berani Berbeda</li>
</ol>
<h3>List dengan type romawi</h3>
<ol type='i'>
<li>Gunakan Linux</li>
<li>Jadilah Kreatif</li>
<li>Berani Berbeda</li>
</ol>
<h3>List dengan type romawi kapital</h3>
<ol type='I'>
<li>Gunakan Linux</li>
<li>Jadilah Kreatif</li>
<li>Berani Berbeda</li>
</ol>
</body>
</html>
Hasilnya:
List dengan type alfabet
- Gunakan Linux
- Jadilah Kreatif
- Berani Berbeda
List dengan type alfabet kapital (huruf besar)
- Gunakan Linux
- Jadilah Kreatif
- Berani Berbeda
List dengan type romawi
- Gunakan Linux
- Jadilah Kreatif
- Berani Berbeda
List dengan type romawi kapital
- Gunakan Linux
- Jadilah Kreatif
- Berani Berbeda
2. Cara Membuat Unordered List di HTML
Sementara untuk list yang tidak terurut, biasanya menggunakan simbol-simbol.
Cara membuatnya menggunakan tag
<ul> (unordered list). Ia juga memiliki anak yang sama seperti <ul>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h3>Daftar bahasa pemrograman</h3>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
</body>
</html>
Hasilnya:
Daftar bahasa pemrograman
- C
- C++
- Java
- Python
- PHP
- Ruby
- Perl
Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga dapat menggantinya seperti ordered list dengan menggunakan atribut
type.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Unordered List</title>
</head>
<body>
<h3>Type = square</h3>
<ul type="square">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = disc</h3>
<ul type="disc">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = none</h3>
<ul type="none">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
<h3>Type = circle</h3>
<ul type="circle">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
</body>
</html>
Hasilnya:
Type = square
- C
- C++
- Java
- Python
- PHP
- Ruby
- Perl
Type = disc
- C
- C++
- Java
- Python
- PHP
- Ruby
- Perl
Type = none
- C
- C++
- Java
- Python
- PHP
- Ruby
- Perl
Type = circle
- C
- C++
- Java
- Python
- PHP
- Ruby
- Perl
Selain menggunakan type list di atas, kita juga bisa menggunakan gambar.
Contohnya:
<ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);">
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
<li>PHP</li>
<li>Ruby</li>
<li>Perl</li>
</ul>
Hasilnya:
- C
- C++
- Java
- Python
- PHP
- Ruby
- Perl
Pada contoh di atas, kita menggunakan inline CSS untuk mengganti simbol yang digunakan list dengan gambar ikon.
style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico);"
3. Cara Membuat Description List di HTML
List ini digunakan untuk menampilkan deskripsi/penjelasan. Contohnya seperti kamus.
Tag unutuk membuat description list adalah
<dl> (data list). Dalam tag ini terdapat tag <dt> (data term) dan <dd> (data description).
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Description List</title>
</head>
<body>
<dl>
<dt>Kopi</dt>
<dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
<dt>Kopi Black Magic</dt>
<dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
<dt>White Coffee</dt>
<dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
<dt>Kopi++</dt>
<dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
</dl>
</body>
</html>
Hasilnya:
List di dalam List (Nested List)
List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.
Caranya, list yang di dalam ditulis di dalam tag
<li>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>List di dalam List</title>
</head>
<body>
<h3>Distro Linux dan Keluarganya</h3>
<ol>
<li>Debian
<ul><li>Ubuntu</li>
<li>Mint</li>
<li>elementaryOS</li>
</ul>
</li>
<li>RedHat
<ul><li>Fedora</li>
</ul>
</li>
<li>Slackware</li>
</ol>
</body>
</html>
Hasilnya:
Distro Linux dan Keluarganya
- Debian
- Ubuntu
- Mint
- elementaryOS
- RedHat
- Fedora
- Slackware
0 Komentar