Belajar HTML Dasar: Cara Membuat Daftar Atau List di HTML

By sadewa / April 27, 2020

PENDAHULUAN

Pada sesi tutorial ini akan dibahas mengenai cara membuat daftar atau list di HTML. Untuk membuat list di HTML terdapat 3 jenis tag yaitu:

1. <ol></ol>

Disebut juga dengan Ordered List artinya berurutan. Ordered List akan menampilkan angka atau huruf secara berurutan.

2. <ul></ul>

Disebut juga Unordered List artinya tidak berurutan. Unordered List akan menampilkan bullets yang berbetuk bulatan atau kotakan.

3. <dl></dl>

Disebut juga dengan Definition List untuk membuat daftar terminologi dan definisi.

Hal yang harus dipersiapkan adalah sebelum melakukan praktek:

Menggunakan Sublime Text sebagai text editor.
Web browser Chrome

Mulai

Buka Sublime Text.
Kemudian persiapkan file dengan nama BelajarList.html
Pada lembar kerja sublie text buat lah struktur HTML dasar.

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<body>
<body/>
<html/>

Tag pertama yang akan dicoba adalah:

1. Ordered List; <ol></ol>.

Tag <ol></ol> akan memberitahukan HTML bahwasanya akan membuat list terurut. Misalnya akan membuat list kegiatan setelah bangun tidur.

<!DOCTYPE html>
<html>
<head>
    <title>HTML LIST</title>
</head>

<body>
   <h1>Kegiatan setelah bangun tidur:</h1>
       <ol>
           <li>Mandi</li>
           <li>Sarapan</li>
           <li>Berangkat Kerja</li>
       </ol>
<body/>
<html/>

Hasilnya (buka pada browser):

Kemudian apabila ingin mengubah urutannya tidak dengan angka, bisa menggunakan atribut Type. Jenisnya adalah:

1 = angka
A = a kapital a = a kecil
I = i kapital untuk romawi besar
i = i kecil untuk romawi kecil

       <ol type="A">
           <li>Mandi</li>
           <li>Sarapan</li>
           <li>Berangkat Kerja</li>
       </ol>

       <ol type="a">
           <li>Mandi</li>
           <li>Sarapan</li>
           <li>Berangkat Kerja</li>
       </ol>

<ol type="I">
           <li>Mandi</li>
           <li>Sarapan</li>
           <li>Berangkat Kerja</li>
       </ol>

2. Unordered List; <ul></ul>.

Jika menggunakan Unordered List artinya urutan dari list item nya itu tidak berpengaruh. Misalnya list makanan favorit.

<!DOCTYPE html>
<html>
<head>
  <title>HTML LIST</title>
</head>
<body>
  <h3>Makanan favorit</h3>
  <ul>
    <li>Bakso</li>
    <li>Nasi Goreng</li>
    <li>Martabak</li>
    <li>Sate</li>

  </ul>
</body>
</html>

Hasilnya

List default yang dihasilkan adalah bullets. Jika ingin menggunakan tipe yang lain dapat mencoba:

disc = bulat berisi (seperti hasil default) square = kotak

circle = bulat kosong

<ul type="square">
    <li>Bakso</li>
    <li>Nasi Goreng</li>
    <li>Martabak</li>
    <li>Sate</li>
  </ul>

<ul type="square">
    <li>Bakso</li>
    <li>Nasi Goreng</li>
    <li>Martabak</li>
    <li>Sate</li>
  </ul>

3. Definition List; <dl></dl>

Definition List berbeda dengan list sebelumnya, digunakan untuk membuat terminologi dan deskripsi. Isi dari list berpasangan yaitu:

<dl>
<dt> term 1 </dt>
<dd> descr 1 </dd>

<dt> term 2 </dt>
<dd> descr 2 </dd>
</dl>

Jika mempunyai 3 term maka juga harus mempunyai 3 descr juga.

<!DOCTYPE html>
<html>
<head>
<title>HTML LIST</title>
</head>
<body>

<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheet.</dd>
</dl>
 
</body>
</html>