Kita buka kembali kode HTML kita dari pelajaran terakhir, dan kita akan belajar mengenai cara membuat list atau daftar menggunakan tag UL dan OL. UL singkatan dari unordered list, yang berarti daftar tanpa nomor urut. Sedangkan OL singkatan dari ordered list, yang berarti daftar dengan nomor urut.

Pertama kita hapus dahulu komentar TODO, karena hal ini akan kita kerjakan di dalam video ini. Lalu kita tambahkan header tiga, dengan konten Daftar Buah-buahan.

Dan kemudian kita coba buat tag UL. Dan untuk menambahkan setiap baris di dalam daftar, kita mesti menggunakan tag LI, singkatan dari List Item. Misalkan kita tambahkan tag LI yang isinya Apel. Lalu tambahkan tag LI lagi untuk Jeruk, dan Mangga.

Kita simpan dan lihat hasilnya pada browser. Dan kita sudah mendapatkan daftar buah-buahan, yang pada sebelah kirinya menggunakan bullet. Titik hitam disebelah kiri nama buah ini kita sebut dengan nama bullet.

Kita copy kode HTML yang barusan kita tulis dan kita paste ke bagian bawahnya. Kali ini kita coba ganti UL menjadi OL. Kita bisa lihat hasil pada browser bahwa kode yang menggunakan OL akan diberikan nomor urut 1 2 3. Dan nama buah mendapatkan nomor urut berdasarkan urutan list item-nya. Nomor urut satu untuk Apel, dua untuk Jeruk dan tiga untuk Mangga.

Dan apabila kita pindahkan posisi Mangga keatas. Maka nomor urut dari list akan berubah menjadi nomor satu untuk Apel, dua untuk Mangga dan tiga untuk jeruk.

Selanjutnya kita membahas beberapa attribute yang bisa kita gunakan untuk elemen OL. Yang pertama adalah Attribute Type, yang bisa mengubah jenis nomor urut yang digunakan untuk menampilkan daftar. Secara default, nilai dari type adalah 1, sehingga browser akan menampilkan daftar dengan menggunakan nomor urut 1 2 3 seperti sekarang. Kita bisa mencoba mengganti type menjadi “A”, sehingga browser akan menampilkan daftar dengan menggunakan huruf A B C besar. Atau menggunakan “a” kecil.

Type lain yang bisa digunakan untuk OL adalah huruf I besar, dimana browser akan menggunakan nomor urut romawi dengan menggunakan huruf besar. Atau type huruf I kecil untuk menggunakan nomor urut romawi dengan huruf kecil.

Selanjutnya kita bisa menggunakan Attribute Start untuk menentukan nilai awal dari nomor urut kita. Misalnya kita kembalikan dahulu Type menjadi 1. Dan kita tambahkan attribute Start = 5. Bisa kita lihat hasilnya, browser akan memulai urutan daftar buah-buahan langsung dengan nomor 5.

Dan attribute terakhir yang bisa kita gunakan adalah Reversed. Yang artinya nomor urut dibalik menjadi dari besar ke kecil. Kita coba tambahkan attribute Reversed. Dan kita bisa lihat hasilnya, nomor urut yang digunakan menjadi terbalik, yaitu 5 4 3.

Selanjutnya kita akan mencoba untuk membuat nested list, yaitu sebuah daftar yang di dalamnya terdapat beberapa daftar lagi. Kita buat dahulu header tiga dengan konten Menu Restoran.

Lalu kita buat ordered list dengan isi pertama adalah Makanan. Kita tambahkan tag strong agar tulisannya menggunakan huruf tebal. Kemudian kita buat ordered list baru dengan isi Nasi Goreng, Mie, Goreng, Kwetiaw Goreng, dan Bihun Goreng.

Setelah itu kita membuat list item kedua dengan isi Minuman. Dan kita buat lagi ordered list dengan isi Teh Tawar, Teh Manis, Es Teh Tawar dan Es Teh Manis.

Kita lihat hasilnya. Disini kita bisa melihat ada 3 buah list ya. List tingkat pertama berada di inden pertama, yang isinya 1 Makanan dan 2 Minuman. List kedua berada dibawah makanan, yaitu nasi goreng, mie goreng, kwetiaw goreng dan bihun goreng, dan bisa kita lihat nomor urutnya dimulai dari nomor 1.

Dan list yang ketiga bisa kita lihat dibawah minuman, dengan nomor urut yang kembali dimulai dari nomor 1 lagi, yaitu Teh Tawar, Teh Manis, Es Teh Tawar, dan Es Teh Manis.

Kita bisa melakukan beberapa perubahan pada list kita, seperti yang telah kita pelajari sebelumnya. Misalnya tag OL pada makanan kita ganti menjadi UL. Dan hasilnya daftar makanan akan ditampilkan dengan menggunakan Bullet.

Contoh lain kita bisa mengganti daftar minuman dengan menambahkan type=”a”. Sehingga daftar minuman ditampilkan dengan menggunakan huruf kecil abcd.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.