Dokumen ini menjelaskan tentang membuat daftar/list dalam HTML dan CSS, termasuk jenis-jenis daftar seperti ordered list (ol), unordered list (ul), dan description list (dl). Setiap jenis daftar memiliki atribut dan cara penyajian masing-masing, seperti penggunaan tag <li> dan pengaturan style untuk menampilkan daftar. Selain itu, dokumen juga memberikan contoh tampilan list secara mendatar untuk membuat menu pilihan.

1. MEMBUAT DAFTAR
/ LIST
AMIROH, S.Kom
SMKN 3 JOMBANG

2. KONSEP DAFTAR/LIST
 Membuat Daftar/List adalah membuat deretan
teks yang tersusun rapi berdasarkan urutan
nomor ataupun karakter/symbol tertentu
 Ada 2 jenis list, yaitu Ordered list (OL),
Unordered list (UL) dan Description List (DL)
 Contoh sebuah daftar/list:

3. 1. Ordered List (OL)
 OL (Ordered List) atau daftar berurut
 Digunakan untuk menampilkan daftar teks yang
memiliki nomor urut berupa “1”, ”A”, “a”, “I”, “i”
 Masing-masing item dituliskan di antara tag List Item
atau <li>
 Type (dalam HTML) dan list-style-type (dalam CSS)
adalah atribut/property list, yang digunakan untuk
menentukan bentuk list-nya, yaitu:

4. CONTOH:

5. 2. Unordered List (UL)
 UL (Unordered List) atau daftar tidak berurut
 Digunakan untuk menampilkan daftar teks
yang tidak bernomor urut.
 UL memiliki atribut yang sama dengan OL,
yaitu Type (dalam HTML) dan list-style-type
(dalam CSS), yang digunakan untuk
menentukan tipe list-nya:
 Circle : Bulat
 Disc : Kotak
 Square : Kotak

6. Contoh

7. 3. Description List (DL)
 Digunakan untuk menampilkan teks beserta
deskripsinya
 Contoh:

8. List Bertumpuk
 List dapat ditampilkan secara bertumpuk
seperti berikut:

9. Horizontal list

10. Horizontal List
 List dapat pula ditampilkan dengan
secara mendatar (tidak menurun/dalam 1
baris) dengan menggunakan Style CSS
 Display:Inline; adalah property yang
digunakan untuk menampilkan list secara
mendatar.
 List yang ditampilkan secara mendatar ini
selanjutnya biasa digunakan untuk
membuat “Menu Pilihan”

11. Contoh:

12. LATIHAN
 Buatlah tampilan list mendatar seperti
gambar berikut:
 Gunakan style CSS untuk membuat warna
background Hijau

13. THANK YOU 

14. Referensi
 http://www.w3schools.com/html/html_lists.as
p
 http://www.w3schools.com/css/css_list.asp