Belajar HTML Part 14: Cara Membuat Daftar Menu dengan HTML

Diposting oleh pada tanggal

Cara Membuat Daftar Menu dengan HTML



Unordered HTML List


Daftar unordered dimulai dengan tag <ul>. Setiap item daftar dimulai dengan tag <li>.

Item daftar akan ditandai dengan peluru (lingkaran hitam kecil) secara default:
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Contoh Code:

<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>

Unordered HTML List - Pilih Daftar Item Marker


Properti tipe daftar CSS digunakan untuk menentukan style penanda item daftar:

Value Description
disc Mengatur daftar penanda item ke peluru (default)
circle Menetapkan daftar penanda item ke lingkaran
square Menetapkan daftar penanda item ke kotak
none daftar tidak akan ditandai

Example - Disc
<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example - Circle
<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example - Square
<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Example - None
<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Contoh Code:

<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
</body>
</html>

Ordered HTML List


Ordered List dimulai dengan tag <ol>. Setiap item daftar dimulai dengan tag <li>.

Item daftar akan ditandai dengan angka secara default:
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Contoh Code:

<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
</body>
</html>

Ordered HTML List - Atribut Tipe


Atribut tipe tag <ol>, menentukan jenis penanda item daftar:
Type Description
type="1" Item daftar akan diberi nomor dengan angka (default)
type="A" Item daftar akan diberi nomor dengan huruf besar
type="a" Item daftar akan diberi nomor dengan huruf kecil
type="I" Item daftar akan diberi nomor dengan huruf roman huruf besar
type="i" Item daftar akan diberi nomor dengan nomor roman huruf kecil

Numbers:
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Uppercase Letters:
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lowercase Letters:
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Uppercase Roman Numbers:
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lowercase Roman Numbers:
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Contoh Code:

<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<h2>Ordered List with Letters</h2>
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
</body>
</html>


Daftar Deskripsi HTML


HTML juga mendukung daftar deskripsi.

Daftar deskripsi adalah daftar istilah, dengan deskripsi masing-masing istilah.

Tag <dl> mendefinisikan daftar deskripsi, tag <dt> mendefinisikan istilah (nama), dan tag <dd> menjelaskan setiap istilah:
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

 Contoh Code:

 <!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>
</body>

</html>

Daftar HTML bersarang


Daftar bisa disarangkan (daftar dalam daftar):
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Contoh Code:

<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
    <li>Black tea</li>
    <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>
</body>
</html>

Catatan: Daftar item dapat berisi daftar baru, dan elemen HTML lainnya, seperti gambar dan tautan, dll.


Daftar Horizontal


Daftar HTML dapat ditata dengan berbagai cara dengan CSS.

Salah satu cara yang populer adalah dengan membuat daftar secara horizontal, untuk membuat menu:

Contoh Code:
<!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="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

Ringkasan Bab

  1. Gunakan elemen HTML <ul> untuk menentukan daftar unordered
  2. Gunakan properti tipe-style CSS untuk menentukan daftar penanda item
  3. Gunakan elemen HTML <ol> untuk menentukan daftar pesanan
  4. Gunakan atribut jenis HTML untuk menentukan jenis penomoran
  5. Gunakan elemen HTML <li> untuk menentukan item daftar
  6. Gunakan elemen HTML <dl> untuk menentukan daftar deskripsi
  7. Gunakan elemen HTML <dt> untuk menentukan istilah deskripsi
  8. Gunakan elemen HTML <dd> untuk menjelaskan istilah tersebut dalam daftar deskripsi
  9. Daftar bisa disisipkan di dalam daftar
  10. Daftar item dapat berisi elemen HTML lainnya
  11. Gunakan float properti CSS: kiri atau tampilan: inline untuk menampilkan daftar secara horizontal

HTML List Tags

Tag Description
<ul>  Mendefinisikan daftar yang tidak berurutan
<ol>  Mendefinisikan sebuah daftar pesanan
<li>  Mendefinisikan daftar item
<dl>  Mendefinisikan daftar deskripsi
<dt>  Mendefinisikan sebuah istilah dalam daftar deskripsi
<dd>  Menggambarkan istilah tersebut dalam daftar deskripsi


Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2