Tutorial HTML - Membuat daftar (List)

Membuat Daftar (list)

Pada dasarnya daftar atau list pada HTML dibagi menjadi 2, yaitu:

Unorder List - List dengan menggunakan tanda berupa bentuk seperti bulatan hitam kecil.
Ordered List - List dengan menggunakan tanda berupa angka atau huruf yang berurutan.

Secara default list pada HTML ditampilkan berurutan dari atas ke bawah.

Unordered List

Untuk membuat unordered list menggunakan tag <ul> dan tag <li> untuk isi dari daftar.
Contoh:


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
  </head>
  <body>
    <ul>
      <li>
        Senin
      </li>
      <li>
        Selasa
      </li>
      <li>
        Rabu
      </li>
    </ul>
  </body>
</html>

Anda juga dapat mengubah tanda list dengan bentuk lain yang sudah disediakan.
Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
  </head>
  <body>
    <ul style="list-style-type:circle;">
      <li>
        Senin
      </li>
      <li>
        Selasa
      </li>
      <li>
        Rabu
      </li>
    </ul>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
  </head>
  <body>
    <ul style="list-style-type:square;">
      <li>
        Senin
      </li>
      <li>
        Selasa
      </li>
      <li>
        Rabu
      </li>
    </ul>
  </body>
</html>


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
  </head>
  <body>
    <ul style="list-style-type:none;">
      <li>
        Senin
      </li>
      <li>
        Selasa
      </li>
      <li>
        Rabu
      </li>
    </ul>
  </body>
</html>

Ordered List

Untuk membuat ordered list menggunakan tag <ol> dan tag <li> untuk isi dari daftar.
Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
  </head>
  <body>
    <ol>
      <li>
        Senin
      </li>
      <li>
        Selasa
      </li>
      <li>
        Rabu
      </li>
    </ol>
  </body>
</html>

Selain menggunakan angka juga dapat menggunakan huruf.
Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
  </head>
  <body>
    <ol type="A">
      <li>
        Senin
      </li>
      <li>
        Selasa
      </li>
      <li>
        Rabu
      </li>
    </ol>
  </body>
</html>

Type yang dapat digunakan pada ordered list yaitu:

type="1" - Penomoran dengan menggunakan angka (sebagai default jika tidak ditentukan type nya)
type="A" - Penomoran dengan menggunakan huruf kapital.
type="a" - Penomoran dengan mengunakan huruf kecil.
type="I" - penomoran dengan menggunakan angka romawi kapital.
type="i" - Penomoran dengan menggunakan angka romawi kecil.

Description List

Description adalah sebuah daftar dengan pemberian deskripsi pada bagian daftar tertentu.

Pembuatannya menggunakan tag <dl>, tag <dt> sebagai definisi, dan <dd> untuk isi dari daftar.

Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
  </head>
  <body>
    <dl>
      <dt>
        Weekend
      </dt>
        <dd>
          - minggu
        </dd>
      <dt>
        Weekday
      </dt>
        <dd>
          - Senin
        </dd>
    </dl>
  </body>
</html>

List didalam List

Membuat list didalam list sebenarnya hanya memasukan tag list didalam tag list lain.

Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
  </head>
  <body>
    <ul>
      <li>
        Minuman Dingin
      </li>
      <ul>
        <li>
          Esteh manis
        </li>
        <li>
          Es Jeruk
        </li>
      </ul>
      <li>
        Minuman Panas
      </li>
      <ul>
        <li>
          Teh Panas
        </li>
        <li>
          Kopi panas
        </li>
      </ul>
    </ul>
  </body>
</html>

Inline List

Inline list adalah list yang ditampilkan secara horizontal atau kesamping.

Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
    <style>
      li{
        display: inline;
      }
    </style>
  </head>
  <body>
    <h1>Inline List</h1>

    <ul>
      <li>
        Beranda
      </li>
      <li>
        Profil
      </li>
      <li>
        Menu
      </li>
    </ul>
  </body>
</html>

List juga dapat digunakan untuk membuat sebuah menu atau navbar.
Contoh


<!DOCTYPE html>
<html>
  <head>
    <title>Latihan Membuat List</title>
    <style>
      li{
        display: inline;
      }
      li a:hover{
        background-color: #e24c4c;
      }
      li a{
        padding: 2%;
        background-color: #544848;
        color: white;
        border-radius: 2px;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <h2>Navbar dengan List</h2>

    <ul>
      <li>
        <a href="#">Beranda</a>
      </li>
      <li>
        <a href="#">Profil</a>
      </li>
      <li>
        <a href="#">Menu</a>
      </li>
    </ul>
  </body>
</html>