Pada artikel kali ini saya akan menjelaskan mengenai cara membuat list pada html, biasanya list dapat kita gunakan untuk menampilkan suatu informasi, misalnya: untuk menampilkan menu makanan, list nama siswa dan lain sebagainya.
Dalam Html, list dapat dibedakan menjadi 2 jenis yaitu: ordered list dan unordered list.
Untuk menulis ordered list kita dapat menggunakan tag <ol>, ordered list memiliki fungsi untuk membuat list secara berurutan, sedangkan unordered list dapat kita pakai untuk membuat list yang tidak berurutan, untuk menulis unordered list kita dapat menggunakan tag <ul>.
Daftar Isi
Cara Membuat List Pada Html
Silahkan simak penjelasan dibawah ini untuk penjelasan lebih lanjut mengenai ordered list dan unordered list.
Ordered List
Seperti yang sudah saya jelaskan sebelumnya ordered list ( <ol> ) adalah tag yang bisa kita gunakan untuk membuat daftar atau list secara berurutan
Contoh
Berikut adalah contoh penulisan tag ordered list:
<!DOCTYPE html>
<html>
<head>
<title>List Nama Siswa</title>
</head>
<body>
<ol type="A">
<li>Rimuru</li>
<li>Kuhaku</li>
<li>Shiro</li>
<li>Shora</li>
<li>Kiragami</li>
</ol>
</body>
</html>
Hasil saat dijalankan atau dibuka melalui browser:
Penjelasan
Untuk menulis ordered list, kita dapat menggunakan tag <ol> dan diakhiri dengan tag </ol>, kemudian pada contoh diatas terdapat tag <li>…</li> diantara tag <ol dan </ol>, tag <li> berfungsi untuk menulis daftar item.
Selain itu didalam tag <ol> juga terdapat atribut type=”A”, atribut tersebut dapat Anda ganti dengan atribut yang ada dibawah ini:
| Atribut | Fungsi |
|---|---|
| type=”A” | Untuk membuat list berurutan dengan huruf besar |
| type=”a” | Untuk membuat list berurutan dengan huruf kecil |
| type=”I” | Untuk membuat list berurutan dengan huruf romawi besar |
| type=”i”> | Untuk membuat list berurutan dengan huruf romawi kecil |
| type=”1″> | Untuk membuat list berurutan menggunakan angka |
Unordered List
Anda dapat menggunakan tag <ul> dan diakhiri dengan tag </ul> untuk membuat list yang tidak berurutan (unordered list), terdapat tiga type unordered list yang bisa Anda pakai yaitu: disc, circle, dan square.
Jika Anda tidak memilih type list didalam tag <ul> maka secara default browser akan menampilkan list dengan type disc (bulat berwarna hitam).
| Atribut | Fungsi |
|---|---|
| type=”disc” | Membuat list dengan bentuk bulat hitam |
| type=”circle” | Membuat list dengan bentuk bulat putih |
| type=”square” | Membuat list dengan bentuk kotak |
Contoh
Berikut adalah contoh penulisan unoredered list dengan type disc, circle, dan square.
<!DOCTYPE html>
<html>
<head>
<title>List Nama Siswa</title>
</head>
<body>
<ul type="disc">
<li>Rimuru</li>
<li>Kuhaku</li>
</ul>
<ul type="circle">
<li>Shiro</li>
<li>Shora</li>
</ul>
<ul type="square">
<li>Kiragami</li>
<li>Ains</li>
</ul>
</body>
</html>
Hasil saat dijalankan atau dibuka melalui browser:
Jadi itulah 2 jenis list beserta type list dan cara membuat list pada html, Anda dapat melanjutkan ke artikel berikutnya yaitu: Cara Membuat Hyperlink di Html untuk mengetahui lebih lanjut mengenai Html.
