FAJAR SURYANI PEMROGRAMAN WEB I

FORMAT LIST

POKOK BAHASAN:
✓ Format List
✓ Attribut List
✓ Ordered List
✓ Unordered List
✓ Definition List
✓ Lists Within Lists

TUJUAN BELAJAR:

✓ Setelah mempelajari bab ini diharapkan mampu:

✓ Menjelaskan konsep format list
✓ Menjelaskan attribut list
✓ Menjelaskan dan menerapkan ordered list
✓ Menjelaskan dan menerapkan unordered list
✓ Menjelaskan dan menerapkan definition list
✓ Menjelaskan dan menerapkan list within lists

3.1 Pengertian List

List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok
atau grup data tertentu. Sebagai contoh, dalam situs web yang bertema pendidikan pada sebuah
universitas, list dapat berupa daftar fakultas , beserta jurusannya. List dapat juga berupa
prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan
secara berurutan dari langkah pertama sampai langkah terakhir. List item dalam HTML
dituliskan sebagai berikut:

<li> teks </li>

Dalam dokumen HTML, tipe list dibedakan menjadi empat, yaitu:

1. List berurutan (ordered list)
2. List tidak berurutan (unordered list)
3. List definisi (definition list)
4. List kombinasi (list within list)
FAJAR SURYANI PEMROGRAMAN WEB I

3.2 List Berurutan (Ordered List)

Ordered list digunakan untuk membuat daftar dimanan tiap bagiannya memiliki nomor
secara berurut. Ordered list dimulai dengan menggunakan tag <ol> dan diakhiri dengan </ol>.
Untuk menyatakan bagiannya (list item) digunakan tag <li> dimana tag ini boleh tidak
menggunakan penutup. Proses pengurutan menggunakan angka atau huruf, dalam Ms. Office
dikenal dengan numbering. Cara penulisan ordered list:

<ol type =”...”>

<li>Item satu</li>
<li>Item dua</li>
</ol>

Ketika menggunakan perintah ordered list maka default penomoran adalah 1, 2, 3, …,

maka kita bisa mengubah nomor tersebut menggunakan atribut TYPE pada tag <ol>.

ATRIBUT NILAI DESKRIPSI

A Membuat list dengan penomoran berupa karakter A, B, C, dst
a Membuat list dengan penomoran berupa karakter a, b, c, dst
TYPE I Membuat list dengan penomoran berupa karakter I, II, III, dst
i Membuat list dengan penomoran berupa karakter i, ii, iii, dst
1 Membuat list dengan penomoran berupa karakter 1, 2, 3, dst

3.3 List Tidak Berurutan (Unordered List)

Berbeda dengan ordered list, dalam unordered list tidak dijumpai urutan dalam suatu
daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Tanda bullet menjadi
default dalam unordered list. Untuk membuat daftar dengan tanda ini digunakan tag awal <ul>,
tag akhir </ul>, dan untuk tiap-tiap bagian digunakan <li> bisa dengan atau tanpa penutup.
Contoh penulisan adalah sebagai berikut:

<ul type =”...”>

<li>Item satu</li>
<li>Item dua</li>
</ul>

Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk
setiap item berupa tanda bulatan untuk defaultnya. Selain tipe default, tipe lain yang dapat
digunakan untuk keperluan unordered list adalah :
FAJAR SURYANI PEMROGRAMAN WEB I

ATRIBUT NILAI DESKRIPSI

Disk Membuat list dengan bullet lingkaran hitam (●)
Circle Membuat list dengan bullet lingkaran putih (○)
TYPE
Square Membuat list dengan bullet kotak hitam (▪)
None Membuat list tanpa bullet

3.4 List Definisi (Definition List)

Definition list digunakan untuk mendefinisikan atau menjelaskan istiliah-istilah, sering
juga disebut juga sebagai daftar istilah. Definition List dinyatakan dengan tag awal <dl> dan
tag akhir < /dl>. Dalam tag tersebut terdapat dua bagian, yaitu:
1. Istilah yang akan didefinisikan, dinyatakan dengan tag tunggal <dt> atau Definition Term
2. Definisi dari istilah tersebut, dinyatakan dengan tag unggal <dd> atau Definition Data

Berikut contoh penulisan programnya :

<dl>
<dt>… istilah yang didefinisikan …</dt>
<dd>… definisi dari istilah …</dd>
</ul>

3.5 List Kombinasi (List Within List)

Untuk daftar yang bertingkat, dapat menggunakan kombinasi dari Ordered List dan
Unordered List. Keduanya dipakai secara bersama-sama untuk membentuk suatu daftar.
Contoh sintaks penggunaan kombinasi dari kedua list sebagai berikut:

<ol type =”...”>

<li>Item Satu
<ul type =”...”>>
<li>sub item satu</li>
<li>sub item dua</li>
</ul>
</li>
<li>Item Dua
<ul type =”...”>
<li>sub item satu</li>
<li>sub item dua</li>
</ul>
</li>
</ol>
FAJAR SURYANI PEMROGRAMAN WEB I

3.6 Langkah Praktikum

1. Membuat List Berurutan/Ordered List
Buatlah file HTML dengan nama orderList.html, lalu ketikkan sintaks berikut:

Berikut hasil yang ditampilkan pada browser:

FAJAR SURYANI PEMROGRAMAN WEB I

2. Membuat List Berurutan/Ordered List Menggunakan TYPE

Buatlah file HTML dengan nama orderListAll.html, lalu ketikkan sintaks berikut:
FAJAR SURYANI PEMROGRAMAN WEB I

Berikut hasil yang ditampilkan pada browser:

FAJAR SURYANI PEMROGRAMAN WEB I

3. Membuat List Tidak Berurutan/Unordered List

Buatlah file HTML dengan nama unorderedList.html, lalu ketikkan sintaks berikut:

Berikut hasil yang ditampilkan pada browser:

FAJAR SURYANI PEMROGRAMAN WEB I

4. Membuat List Tidak Berurutan/Unordered List Menggunakan TYPE

Buatlah file HTML dengan nama unorderedListAll.html, lalu ketikkan sintaks berikut:
FAJAR SURYANI PEMROGRAMAN WEB I

Berikut hasil yang ditampilkan pada browser:

FAJAR SURYANI PEMROGRAMAN WEB I

5. Membuat List Definisi/Definition List

Buatlah file HTML dengan nama definitionList.html, lalu ketikkan sintaks berikut:

Berikut hasil yang ditampilkan pada browser:

FAJAR SURYANI PEMROGRAMAN WEB I

6. Membuat List Kombinasi/Nested List

Buatlah file HTML dengan nama nestedList.html, lalu ketikkan sintaks berikut:
FAJAR SURYANI PEMROGRAMAN WEB I

Berikut hasil yang ditampilkan pada browser: