Pada materi sebelumnya, saya sudah membagikan materi tentang Link. Dimana link ini sangat dibutuhkan dalam sebuah halaman web, yang berguna untuk menghubungkan halaman html yang lain. Sebelum kalian melanjutkan pada materi list ini, saya sangat menyarankan untuk memahami terlebih dahulu Link pada HTML.

Belajar HTML #6: Mengenal Jenis List HTML

Pada materi kali ini kalian diharapkan, dapat mengenal semua jenis list. Karena list ini juga sangat sering ditemui dalam sebuah halaman web. Namun sebelum melangkah lebih jauh tentang sebuah list, adapun pokok-pokok pembahasan yang telah siapkan pada materi kali ini, diantaranya:

Setelah kalian melihat point-point diatas, maka disini saya akan membahasanya secara berurutan. Silakan kalian simak dengan baik, pembahasan saya kali ini:

6.1 Pengertian List HTML

Apa sih list html itu? Jadi list html merupakan sebuah tag yang sering digunakan atau dimanfaatkan untuk menampilkan sebuah teks tertentu dengan lebih sistematis. Sehingga sebuah paragraf jika diberikan sebuah list akan menjadi lebih rapi, saat dilihat dari browser.

Baca Juga: Format Teks pada HTML

Dan tag list ini, akan sering digunakan oleh kalian saat mengembangkan sebuah web. Itulah bisa dikatakan bahwa materi tentang list ini juga penting dipelajari. Secara umum, sebuah list pada html dibedakan menjadi 3 jenis:

  1. List yang menggunakan nomor
  2. List yang tidak menggunakan nomor
  3. List dengan definisi
Apa perbedaan antara ketiganya?
  • List Nomor jika kalian menggunakan jenis list ini, maka tampilan dari daftar setiap itemnya akan diberi sebuah nomor.
  • List tanpa Nomor, untuk list jenis ini kalia dapat memberikan sebuah uraian pada masing-masing tiap itemnya.
Bagaimana cara membuat list?

  • Cara Membuat list tanpa nomor:
    • Tag diawal gunakan <ul>
    • Masukan item yang akan menjadi listnya dalam tag  <li>dan diakhiri dengan</li>. Ulangi terus hingga tidak ada lagi item, yang ingin dibuat jadi listnya.
    • Akhiri dengan tag penutup  </ul>
  • Cara Membuat List dengan Nomor:
    •  Tag diawal gunakan <ol>
    • Gunakan tag  <li>diakhiri dengan tag</li>
    • Akhiri dengan tag penutup  </ol>

6.2 Contoh List

Untuk melihat perbedaan keduanya, kalian dapat melihat contoh program list bernomor dan list tanpa nomor berikut ini:

Baca Juga: Mengenal Tag Tag Dasar HTML

Contoh programnya:

<!DOCTYPE html>
<html>
<head>
<title>List Bernomor dan Tanpa Nomor</title>
</head>
<body>
<h5>List Bernomor (An Ordered List)</h5>
<br>
<ol>
<li>Anisa</li>
<li>Budi</li>
<li>Raisa</li>
</ol>
<p>
<h5>List Tanpa Nomor ( An Onordered List)</h5>
<br>
<ul>
<li>Sepeda</li>
<li>Motor</li>
<li>Mobil</li>
</ul>
</p>
</body>
</html>

Hasilnya seperti ini:

6.3 Membuat Ordered List

Kalian saya yakin sudah memahami list jenis ini, yaitu jenis list yang menggunakan nomor. Nomor itu disesuaikan dengan seberapa banyak item yang kamu tambahkan. Namun Ordered list tidak hanya list yang menggunakan nomor, namun dalam beberapa kondisi kalian dapat mengubahnya sesuai dengan kebutuhan kalian masing-masing.

Baca Juga: Pengenalan Tentang HTML

Berikut ini value yang dapat kalian tambahkan, dalam atribut list model ini:

  • Type I value jenis ini akan menghasilkan Angka Romawi besar.
  • Type value jenis ini akan menghasilkan Angka Romawi kecil.
  • Type a value maka yang akan ditampilkan listnya dengan abjad huruf kecil.
  • Type A value ini akan menghasilkan list dengan Abjad huruf besar.
Penggunaanya sangat mudah, kalian cukup menambahkan sebuah atribut seperti berikut ini:

<ol type="Masukan Type">.......</ol>

Biar lebih jelas penjelasan masing-masing type, silakan kalian lihat programnya berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Type lis Ordered List</title>
</head>
<body>
<h5>List Bernomor </h5>
<ol>
<li>Anisa</li>
<li>Budi</li>
<li>Raisa</li>
</ol>
<h5>List Type Abjad Romawi Besar</h5>
<ol type="I">
<li>Anisa</li>
<li>Budi</li>
<li>Raisa</li>
</ol>
<h5>List Type Abjad Romawi Kecil</h5>
<ol type="i">
<li>Anisa</li>
<li>Budi</li>
<li>Raisa</li>
</ol>
<h5>List Type Abjad Besar</h5>
<ol type="A">
<li>Anisa</li>
<li>Budi</li>
<li>Raisa</li>
</ol>
<h5>List Type Abjad Kecil</h5>
<ol type="a">
<li>Anisa</li>
<li>Budi</li>
<li>Raisa</li>
</ol>


</p>
</body>
</html>

Hasilnya seperti ini:

6.4 Membuat Unordered List

Sedangkan untuk list jenis Unordered List sering disebut juga  dengan bullet list, nilai defaultnya berupa noktah. Sama halnya dengan jenis list Ordered list, list type ini juga bisa diubah nilainya dalam beberapa bentuk:

  1. Bentuk Disk, yaitu bentuk noktah yang tidak di arsir tengahnya.
  2. Box, bentuk kotak.
Penggunaanya juga hampir sama dengan Ordered list, yaitu dengan menambahkan atribut baru seperti ini:
<ul type="box">.....</ul>

Biar lebih jelas dalam penggunaanya, silakan kalian lihat pada program berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Type lis Anordered List</title>
</head>
<body>
<h5>List Type Disc </h5>
<ul type="disc">
<li>Hijau</li>
<li>Kuning</li>
<li>Biru</li>
</ul>
<h5>List Type Circle</h5>
<ul type="circle">
<li>Hijau</li>
<li>Kuning</li>
<li>Biru</li>
</ul>
<h5>List Type Square</h5>
<ul type="square">
<li>Hijau</li>
<li>Kuning</li>
<li>Biru</li>
</ul>


</p>
</body>
</html>

Hasilnya seperti ini:

6.5 Membuat Nested List

Sebuah list dengan jenis bullet, kalian dapat membuatnya menjadi bersarang. Maksudnya didalam sebuah list, terdapat list lagi. Berikut contoh programnya:

<!DOCTYPE html>
<html>
<head>
<title>Nested List</title>
</head>
<body>
<h5>Nested List </h5>
<ul>
<li>Hijau</li>
<li>Kuning</li>
<ul>
<li>Merah</li>
<li>Putih</li>
</ul>
<li>Biru</li>
</ul>

</p>
</body>
</html>

Hasilnya Seperti ini:

6.6 Membuat Defenition List

Untuk list  jenis Definiton list, hampir sama dengan Nested list. Bedanya dapat kamu lihat sendiri melalui program berikut ini:

<!DOCTYPE html>
<html>
<head>
<title>Defenition List</title>
</head>
<body>
<h5>Definition List</h5>
<dl>
<dt>Komputer</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>

<dt>Handphone</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</dd>
</dl>

</p>
</body>
</html>