Skip to content Skip to sidebar Skip to footer
Home / HTML / Web Design

Tutorial Belajar HTML 12 : List pada HTML

By Web Design Purbalingga Post a Comment
List pada HTML – List atau daftar dalam HTML didefinisikan dengan tag <li> atau list. Tag ini biasa digunakan saat ingin membuat daftar nama, atau daftar item pada dokumen html. Ada banyak sekali fungsi dari list ini pada html.

List pada HTML

Ada 2 macam list dalam html yaitu list unordered dan list ordered. Unordered list identik dengan list yang tidak berurutan sedangkan Ordered list adalah list atau daftar yang diurutkan. Untuk lebih jelasnya perhatikan contoh list di bawah ini.


Unordered List

Untuk membuat list jenis ini, dibutuhkan tag <ul> atau unordered list. Adapun tag <li> akan di tulis di antara tag <ul> pembuka dan tag </ul> penutup. Lihat contoh penulisannya berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan HTML</title>
</head>
<body>
 <!-- contoh unordered list -->
<ul>
 <li>HTML</li>
 <li>CSS</li>
 <li>Javascript</li>
</ul>
</body>
</html>
Save dan hasilnya akan tampak seperti pada gambar contoh di atas yang bagian unordered list. Jenis dari unordered list ini ada bermacam – macam seperti type disc, circle, square dan none. Lihat contohnya berikut ini;
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan HTML</title>
</head>
<body>
<h3>Contoh Unordered List type Disc</h3>
 <ul style="list-style-type:disc">
   <li>HTML</li>
   <li>CSS</li>
   <li>Javascript</li>
 </ul>
<h3>Contoh Unordered List type Square</h3>
 <ul style="list-style-type:square">
   <li>HTML</li>
   <li>CSS</li>
   <li>Javascript</li>
 </ul> 
<h3>Contoh Unordered List type Circle</h3>
 <ul style="list-style-type:circle">
   <li>HTML</li>
   <li>CSS</li>
   <li>Javascript</li>
 </ul> 
<h3>Contoh Unordered List type None</h3>
 <ul style="list-style-type:none">
   <li>HTML</li>
   <li>CSS</li>
   <li>Javascript</li>
 </ul>
</body>
</html>
Hasilnya

Ordered List

Ordered list pada html didefinisikan dengan tag <ol> atau ordered list. List tipe ini biasa berurutan seperti nomor 1, 2, 3 dan seterusnya. Penulisannya sama dengan unordered list yaitu tag <li> ditulis di antara tag <ol> pembuka dan tag </ol> penutup. Tipe list dari jenis ini pun ada beberapa macam, ada tipe 1 (list berbentuk nomor urut 1 dan seterusnya), ada tipe A (list berbentuk huruf kapital A - Z), ada tipe a (list berbentuk huruf a kecil biasa) dan juga tipe angka romawi besar dan romawi kecil seperti I dan i. Perhatikan contohnya di bawah ini
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan HTML</title>
</head>
<body>
 <h3>Contoh Ordered List type Angka</h3>
  <ol type="1">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ol>
 <h3>Contoh Ordered List type Huruf Kapital</h3>
  <ol type="A">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ol>
 <h3>Contoh Ordered List type huruf kecil biasa</h3>
  <ol type="a">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ol>
 <h3>Contoh Ordered List type Angka Romawi Besar</h3>
  <ol type="I">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ol>
 <h3>Contoh Ordered List type Angka Romawi Kecil</h3>
  <ol type="i">
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
  </ol>
</body>
</html>
Hasilnya


Sekian materi kali ini tentang List pada HTML. Semoga bermanfaat dan mudah di pahami. Jika ada yang belum jelas, kalian bisa bertanya di kolom komentar di bawah ini. Sampai jumpa di materi berikutnya.

Post a Comment for "Tutorial Belajar HTML 12 : List pada HTML"