Cara membuat list atau daftar di HTML - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Cara membuat list atau daftar di HTML, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel html, Artikel Materi HTML, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara membuat list atau daftar di HTML
link : Cara membuat list atau daftar di HTML

Baca juga


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>:


TipeDeskripsi
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


Demikianlah Artikel Cara membuat list atau daftar di HTML

Sekianlah artikel Cara membuat list atau daftar di HTML kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara membuat list atau daftar di HTML dengan alamat link https://dev-create.blogspot.com/2020/01/cara-membuat-list-atau-daftar-di-html.html