Ads by Yasya El Hakim
Tutorial Lengkap HTML: List pada HTML - Bagian 17

Kalian dapat membuat List atau daftar pada HTML dengan menggunakan tag <ul>. Setiap daftar item dapat diawali dengan tag <li>.

Secara Default, sebuah List memiliki tanda berupa lingkaran (Bullet).

Contoh
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul> 
See the Pen 64. HTML Unordered List by Yasya El Hakim (@elhakimyasya) on CodePen.

List Tidak Tersusun (Unordered List) serta Penanda List pada HTML

Kalian dapat menggunakan penanda List dengan property list-style-type pada CSS.

Berikut adalah beberapa daftar penanda List yang dapat kalian gunakan:
  • disc - Berupa lingkaran (Default).
  • circle - Berupa lingkaran bergaris tepi.
  • square - Berupa kotak.
  • none - Dapat digunakan untuk menyembunyikan penanda List.

Contoh Penanda Disk

<ul style="list-style-type:disc;">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul> 
See the Pen 64. HTML Unordered List by Yasya El Hakim (@elhakimyasya) on CodePen.

Contoh Penanda Circle

<ul style="list-style-type:circle;">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul> 
See the Pen 65. HTML Unordered List Circle by Yasya El Hakim (@elhakimyasya) on CodePen.

Contoh Penanda Square

<ul style="list-style-type:square;">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul> 
See the Pen 66. Unordered List Square by Yasya El Hakim (@elhakimyasya) on CodePen.

Contoh Tanpa Penanda (None)

<ul style="list-style-type:none;">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul> 
See the Pen 67. Unordeded None by Yasya El Hakim (@elhakimyasya) on CodePen.

List Tersusun (Ordered List) pada HTML

Sebuah List tersusun dapat kalian gunakan dengan menggunakan tag <ol>. Setiap daftar item diawali dengan tag <li>.

Secara Default, penanda list akan otomatis berupa angka.

Contoh

<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol> 
See the Pen 68. Ordered List by Yasya El Hakim (@elhakimyasya) on CodePen.

Tipe Atribut pada Ordered List

Kalian dapat menggunakan atribut type pada tag <ol> untuk menentukan tipe dari daftar item:
  • type="1" - Daftar item dengan angka (Default).
  • type="A" - Daftar item dengan huruf besar.
  • type="a" - Daftar item dengan huruf kecil.
  • type="I" - Daftar item dengan angka romawi besar.
  • type="i" - Daftar item dengan angka romawi kecil.

Contoh type="1" - Angka

<ol type="1">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol> 
See the Pen 68. Ordered List by Yasya El Hakim (@elhakimyasya) on CodePen.

Contoh type="A"- Huruf Besar

<ol type="A">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol> 
See the Pen 69. Ordered List Uppercase by Yasya El Hakim (@elhakimyasya) on CodePen.

Contoh type="a" - Huruf Kecil

<ol type="a">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol> 
See the Pen 70. Ordered List Lowercase by Yasya El Hakim (@elhakimyasya) on CodePen.

Contoh type="I" - Angka romawi besar

<ol type="I">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol> 
See the Pen 71. Ordered List Roman Uppercase by Yasya El Hakim (@elhakimyasya) on CodePen.

Contoh type="i" - Angka romawi kecil

<ol type="i">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol> 
See the Pen 72. Ordered List Roman Lowercase by Yasya El Hakim (@elhakimyasya) on CodePen.

Description List pada HTML

Kalian juga dapat membuat daftar deskripsi pada HTML.

Sebuah daftar item pada Description List dapat berupa istilah dengan sebuah deskripsi pada setiap istilah tersebut.

Kalian dapat menggunakan Description List dengan menggunakan tag <dl>, untuk menentukan nama istilah, kalian dapat menggunakan tag <dt>, dan deskripsi istilah, kalian dapat menggunakan tag <dd>.

Contoh

<dl>
<dt>Kopi</dt>
<dd>- Minuman berwarna hitam.</dd>
<dt>Susu</dt>
<dd>- Minuman berwarna putih.</dd>
</dl>
See the Pen 73. Description Lists by Yasya El Hakim (@elhakimyasya) on CodePen.

Menggabungkan List

Kalian juga dapat membuat atau menggabungkan List didalam List.

Contoh

<ul>
<li>Kopi</li>
<li>Teh
<ul>
<li>Teh tarik</li>
<li>Teh tubruk</li>
</ul>
</li>
<li>Susu</li>
</ul> 
See the Pen 74. Penggabungan List by Yasya El Hakim (@elhakimyasya) on CodePen.

Catatan: Daftar list dapat terdiri dari daftar baru, gambar, link, dan elemen HTML lainnya.

Mengatur Penghitungan List

Secara Default, sebuah Ordered List (List tersusun) dihitung dari angka 1. Jika kalian ingin mengatur penghitungan, kalian dapat menggunakan atribut start.

Contoh

<ol start="10">
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
See the Pen 75. Penghitungan List by Yasya El Hakim (@elhakimyasya) on CodePen.

List Horizontal dengan CSS

List dapat diatur menjadi Horizontal dengan mengatur CSS.

Salah satu contoh penggunaan dalam mengatur tampilan List secara Horizontal adalah untuk membuat menu navigasi.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#berita">Berita</a></li>
<li><a href="#kontak">Kontak</a></li>
<li><a href="#tentang">Tentang</a></li>
</ul>

</body>
</html> 
See the Pen 76. List Menu by Yasya El Hakim (@elhakimyasya) on CodePen.

Tips: Kalian dapat mempelajari CSS lebih lanjut pada Tutorial Lengkap CSS.

Ringkasan

  • Gunakan elemen <ul> untuk menentukan List Tidak Teratur (Unordered List).
  • Gunakan propery list-style-type untuk mengatur jenis penanda item.
  • Gunakan elemen <ol> untuk menentukan List teratur (Ordered List).
  • Gunakan atribut type untuk menentukan jenis penghitungan.
  • Gunakan elemen <li> untuk menentukan daftar item.
  • Gunakan elemen <dl> untuk menentukan Description List.
  • Gunakan elemen <dt> untuk menentukan Description Item.
  • Gunakan elemen <dd> untuk menentukan sebuah istilah pada Description List.
  • List pada HTML dapat digabungkan.
  • List dapat terdiri dari elemen HTML lain.
  • Gunakan property float: left atau display: inline untuk menampilkan List secara Horizontal.

Sebelumnya: Tutorial Lengkap HTML: Tabel pada HTML - Bagian 16
Selanjutnya: Tutorial Lengkap HTML: Block pada HTML - Bagian 18
Daftar Isi: Tutorial Lengkap HTML

Sumber: https://www.w3schools.com/

0Komentar

Sebelumnya Selanjutnya