Cara Membuat List di HTML ~ produktif x tkj

List adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus/simbol. Dalam HTML tag list terbagi atas 2 jenis, yaitu : Ordered list (berurutan) dan Unordered list (tidak berurutan). Untuk lebih jelasnya mari kita bahas satu per satu.

Ordered list ( List berurutan )

Ordered list ( tag <ol> ) Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi.  List entri juga didefinisikan dengan tag <li>.
Atribut yang ada pada Ordered List adalah  TYPE dan  START. Beberapa type penomoran yang dapat digunakan pada ordered list ditunjukkan seperti di bawah ini :

I     Angka ditampilkan dalam angka romawi huruf besar
i      Angka ditampilkan dalam angka romawi huruf kecil
a     Angka ditampilkan dalam abjad huruf kecil
A     Angka ditampilkan dalam abjad huruf besar

Pada tag <ol> juga terdapat atribut START untuk memulai list dari nomor tertentu. Pada tag <li> terdapat atribut VALUE untuk melewati nomor yang tidak diinginkan.

Berikut contoh dokumen HTML yang menggunakan Ordered list ( tag <ol> ) :

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<!DOCTYPE html>

<html>

<head>

  <title>penggunaan tag list </title>

</head>

<body>

  <h1>daftar barang elektronik</h1>

  <ol>

    <li>Komputer</li>

    <li>TV</li>

    <li>Lemari es</li>

    <li>AC</li>

    <li>TV</li>

    <li>Speaker</li>

  </ol>

</body>

</html>

Unordered list ( List tanpa urutan )

Unordered list ( tag <ul> ) digunakan untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entri didefinisikan dengan tag <li>. Pada jenis ini tidak memerlukan pengurutan data. Kita juga dapat menentukan jenis bullet yang akan digunakan dengan menentukan type-nya. Beberapa tipe yang dapat dipilih ditunjukkan pada tabel di bawah ini :

Disc Bullet berbentuk cakram
Circle Bullet berbentuk lingkaran
Square Bullet berbentuk kotak

Untuk membuat unordered list, tinggal ganti tag <ol> menjadi <ul>.
Berikut contoh dokumen HTML yang menggunakan Unordered list ( tag <ul> ) :

DATA HOSTED WITH ♥ BY PASTEBIN.COM - DOWNLOAD RAW - SEE ORIGINAL

<!DOCTYPE html>

<html>

<head>

  <title>Penggunaan tag list </title>

</head>

<body>

  <h1>Daftar barang elektronik</h1>

  <ul>

    <li>Komputer</li>

    <li>TV</li>

    <li>Lemari es</li>

    <li>AC</li>

    <li>TV</li>

    <li>Speaker</li>

  </ul>

</body>

</html>

Selain untuk membuat daftar/list di HTML, tag list juga bisa digunakan untuk membuat menu navigasi pada sebuah website dengan menggunakan CSS, seperti pada menu yang terdapat pada blog saya ini. Selain itu, tag list juga dapat digunakan untuk list bersarang (nested list), artinya sebuah list yang berada di dalam list lainnya.

Artikel terkait :

- Membuat dropdown menu sederhana dengan menggunakan tag list dan CSS
- Membuat Multilevel Dropdown Menu menggunakan tag list dan CSS3

Sampai di sini dulu tutorial Cara membuat list / daftar di HTML, jangan lupa nantikan tutorial pemrograman lainnya di blog ini. Happy coding

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.