Cara membuat list atau daftar di HTML

List atau daftar adalah salah satu cara untuk menampilkan informasi dalam bentuk daftar. List biasa digunakan untuk membuat menu. Ada 3 jenis list yang dapat digunakan yaitu:
  1. Ordered List
  2. Unordered List
  3. Description List
1. Cara Membuat Ordered List
Ordered list adalah list berbentuk urutan, dimana listnya ditandai huruf atau angka. Jika di ingat di microsoft word list jenis ini sama dengan numbering. Tag ordered list adalah <ol>.

<h3>Daftar Makanan</h3>
<ol>
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Maka hasil ordered list di atas seperti ini.

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan
Properti type dan value yang ada di tag <ol>:


Tipe Deskripsi
type="1" Tipe angka adalah tipe default dari ordered list
type="A" Tipe A akan menghasilkan list huruf Kapital
type="a" Tipe a akan menghasilkan list huruf kecil
type="I" Tipe I  a akan menghasilkan list huruf romawi besar
type="i" Tipe I  a akan menghasilkan list huruf romawi kecil

1.1. Contoh dengan type="A"

<h3>Daftar Makanan</h3>
<ol type="A">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan

1.2. Contoh tag <ol> dengan properti type="a"

<h3>Daftar Makanan</h3>
<ol type="a">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan
1.3. Contoh tag <ol> dengan properti  type="I"

<h3>Daftar Makanan</h3>
<ol type="I">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan
1.4. Contoh tag <ol> dengan properti type="i"

<h3>Daftar Makanan</h3>
<ol type="i">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ol>

Daftar Makanan

  1. Nasi Goreng
  2. Bakso
  3. Mie Ayam
  4. Soto Medan
2. Cara Membuat Unordered List
Unordered list adalah list tidak berurut, dimana listnya ditandai simbol atau gambar. Jika di ingat di microsoft word list jenis ini sama dengan bullet. Tag unordered list adalah <ul>.

<h3>Daftar Makanan</h3>
<ul type="i">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan

Properti type dan value yang ada di tag <ul>:


TipeDeskripsi
type="disc"Tipe disc adalah tipe default
type="circle"Tipe circle simbol berbentuk lingkaran
type="square"Tipe square simbol berbentuk persegi
type="none"Tipe none simbol tidak ditampilkan

2.1. Contoh tag <ul> dengan properti type="circle"

<h3>Daftar Makanan</h3>
<ul type="circle">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan
2.2. Contoh tag <ul> dengan properti type="square"

<h3>Daftar Makanan</h3>
<ul type="square">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan
2.3. Contoh tag <ul> dengan properti style="list-style-image: url(url);"

<h3>Daftar Makanan</h3>
<ul style="list-style-image: url(https://lh3.googleusercontent.com/-U9FUptlGsmQ/XiJ8ZlUtMgI/AAAAAAAABCA/vM_Te7eqVvA9C0UDH9An4WWoojnRzGwaQCNcBGAsYHQ/h120/icon.png);">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan

2.4. Contoh tag <ul> dengan properti type="none"

<h3>Daftar Makanan</h3>
<ul type="none">
<li>Nasi Goreng</li>
<li>Bakso</li>
<li>Mie Ayam</li>
<li>Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan
Untuk membuat list secara horizontal dapat menambahkan properti float left dengan css.


<h3>Daftar Makanan</h3>
<ul type="none">
<li style="float: left;">Nasi Goreng</li>
<li style="float: left;">Bakso</li>
<li style="float: left;">Mie Ayam</li>
<li style="float: left;">Soto Medan</li>
</ul>

Daftar Makanan

  • Nasi Goreng
  • Bakso
  • Mie Ayam
  • Soto Medan


Dengan penambahan css lainnya cara di atas biasa digunakan untuk membuat menu tombol di web.

3. Cara Membuat Description List
description list adalah list untuk menampilkan daftar deskripsi. Tag yang digunakan adalah <dl> untuk mendefinisikan deskription list, tag <dt> untuk  nama deskripsi dan tag <dd> untuk deskripsinya.


<h3>Daftar Makanan</h3>
<dl>
<dt>Nasi Goreng</dt>
<dd> Nasi Goreng dengan teri, petai, dan lalapan</dd>
<dt>Bakso</dt>
<dd> Bakso daging ayam dengan beberapa pilihan mie</dd>
</dl>

Daftar Makanan

Nasi Goreng
Nasi Goreng dengan teri, petai, dan lalapan
Bakso
Bakso daging ayam dengan beberapa pilihan mie

Popular posts from this blog

Cara Membuat Kalkulator Dengan Java Script

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

Aplikasi CRUD menggunakan Template Admin LTE