Tutorial HTML Part 10 : Membuat Daftar List pada HTML

Daftar List Pada HTML

List adalah salah satu elemen HTML yang digunakan untuk menampilkan informasi dalam bentuk List atau Daftar. Dan biasanya di buat untuk membuat menu-menu.

List di HTML umumnya terdapat 2 macam jenis list yang sering di gunakan pada umumnya yaitu :

Ordered List yaitu List yang terurut,
Unordered List yaitu List yang tidak terurut.

Pembahasan :

1. Cara Membuat Ordered List pada HTML

Ordered List merupakan daftar list yang terurut. Ditandai dengan angka atau huruf yang ada didepan teks.

Contoh :

HTML
CSS
PHP
MYSQL

Penggunaan Ordered List pada HTML ditandai dengan penggunaan Tag <ol> dan sub tagnya adalah <li> atau (list item)

Contoh :

<!DOCTYPE html>
<html>
<head>
    <title>Membuat List Ordered</title>
</head>
<body>
    <h5>5 Macam CMS Terpopuler buatan Indonesia menurut Codekop.com :</h5>
    <ol>
      <li>CMS Sekolahku</li>
      <li>CMS Popoji</li>
      <li>Fiyo CMS</li>
      <li>HTMLy</li>
      <li>Lokomedia</li>
    </ol>
</body>
</html>

Hasilnya :

5 Macam CMS Terpopuler buatan Indonesia menurut Codekop.com :

CMS Sekolahku
CMS Popoji
Fiyo CMS
HTMLy
Lokomedia

List diatas merupakan urutan 1-5, bagaimana kita ubah urutan dari 1-5 menjadi huruf alphabet a,b,c atau romawi I,II,III. Dengan menggunakan atribut type pada tag <ol>. Contoh :

<!DOCTYPE html>
<html>
<head>
    <title>Ordered List dengan Atribut Type</title>
</head>

<body>
   <h5>List dengan type alfabet</h5>
       <ol type='A'>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
          <li>MySQL</li>
          <li>jQuery</li>
       </ol>
   <h5>List dengan type alfabet kapital (huruf besar)</h5>
       <ol type='a'>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
          <li>MySQL</li>
          <li>jQuery</li>
       </ol>
   <h5>List dengan type romawi</h5>
       <ol type='I'>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
          <li>MySQL</li>
          <li>jQuery</li>
       </ol>
   <h5>List dengan type romawi kapital</h5>
       <ol type='i'>
          <li>HTML</li>
          <li>CSS</li>
          <li>PHP</li>
          <li>MySQL</li>
          <li>jQuery</li>
       </ol>
</body>
</html>

Hasil :

List dengan type alfabet

HTML
CSS
PHP
MySQL
jQuery

List dengan type alfabet kapital (huruf besar)

HTML
CSS
PHP
MySQL
jQuery

List dengan type romawi

HTML
CSS
PHP
MySQL
jQuery

List dengan type romawi kapital

HTML
CSS
PHP
MySQL
jQuery

2. Cara Membuat Unordered List pada HTML

Unordered List adalah list yang tidak terurut, biasanya menggunakan simbol-simbol.

Penggunaan Unordered List pada HTML ditandai dengan penggunaan Tag <ul> dan sub tagnya adalah <li> atau (list item)

Contoh:

<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h5>Daftar Tutorial Website Codekop.com :</h5>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
</body>
</html>

Hasil :

Daftar Tutorial Website Codekop.com :

HTML
CSS
PHP
MySQL
jQuery

Untuk default symbol lingkaran kecil yang terdapat pada tag <ul>, kita dapat mengubahnya symbolnya dengan menggunakan atribut type :

<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h5>Type = square</h5>
  <ul type="square">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
  <h5>Type = disc</h5>
  <ul type="disc">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
  <h5>Type = none</h5>
  <ul type="none">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
  <h5>Type = circle</h5>
  <ul type="circle">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
</body>
</html>

Hasil :

Type = square

HTML
CSS
PHP
MySQL
jQuery

Type = disc

HTML
CSS
PHP
MySQL
jQuery

Type = none

HTML
CSS
PHP
MySQL
jQuery

Type = circle

HTML
CSS
PHP
MySQL
jQuery

dan anda dapat mengubah menjadi gambar pada symbol list tersebut :

<!DOCTYPE html>
<html>
<head>
  <title>Unordered List</title>
</head>
<body>
  <h5> List Style dengan Gambar : </h5>
  <ul style="list-style-image: url('https://www.codekop.com/cd-view/assets/media/source/fauzan1892/leaf_icon.jpg');">
    <li>HTML</li>
    <li>CSS</li>
    <li>PHP</li>
    <li>MySQL</li>
    <li>jQuery</li>
  </ul>
</body>
</html>

Hasil :