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>

REFERENSI
[1]. https://youtu.be/gLHEoeuplZs diakses 25 April 2020
Original Create by: Ega Kuslia Sari & Dini Octari Rahmadia