Tutorial HTML yang telah Anda ikuti sebelumnya sudah membekali Anda untuk membuat sebuah halaman website sederhana, namun ilmu tersebut masih jauh dari lengkap. Tutorial HTML list atau daftar ini akan menambahkan sedikit lagi ilmu untuk Anda. Daftar tulisan sebenarnya bisa dibuat secara manual tapi penggunaan sistem list dari HTMl akan membuat styling yang lebih mudah nantinya.

Tutorial HTML – List – Daftar – Bagian 12 (Bahasa Indonesia)

Apa fungsinya list pada HTML? Kapan digunakan? Ok, di sini saya akan terlebih dahulu memberikan contoh sebuah daftar. Kita sering menyebutkan sesuatu dalam jumlah banyak di dalam sebuah artikel tapi kita biasa menuliskannya ke dalam baris yang sama atau memanjang ke samping.

Contoh:
Buah yang banyak mengandung vitamin C, contohnya: jeruk, jambu biji, pepaya, kiwi, mangga, stroberi, nanas dan lain sebagainya.

Pada contoh di atas kita bisa menyusunnya ke dalam sebuah daftar bahkan memberikan nomor atau suatu tanda di setiap awal kalimat baru. Penulisan dengan cara ini akan lebih memudahkan kita untuk membacanya dan terlihat lebih rapi. Silahkan perhatikan contoh di bawah ini:

 

Silahkan perhatikan hasil tampilan berikut ini:

List HTML - daftar

Pada contoh di atas menggunakan tag li yang merupakan singkatan dari list. List dapat dituliskan menggunakan tanda baca atau penomoran. Pada kedua contoh di atas terdapat dua contoh yang menggunakan list dengan tag berbeda. Pada contoh yang pertama menggunakan tag ul yang merupakan singkatan unordered list(daftar tidak terurut) dan contoh kedua menggunakan tag ol yang disingkat dari ordered list(daftar terurut).

Bila Anda ingin menggunakan daftar tulisan yang menggunakan tanda baca di depan kalimat, Anda bisa menggunakan tag ul. Sedangkan bila Anda ingin menggunakan penomoran di dalam daftar tulisan, Anda bisa menggunakan tag ol.

Tag ol

Tag ol digunakan untuk membuat daftar yang terurut. HTML menyediakan atribut type pada ol untuk digunakan memilih tipe tampilan pengurutan. Berikut ini adalah mode yang bisa dipilih untuk menampilkan pengurutan:

1 – menggunakan bilangan
a – menggunakan huruf abjad kecil
A – menggunakan huruf abjad besar
i – menggunakan angka romawi kecil
I – menggunakan angka romawi besar

Saya berikan contoh kode html agar pengaturan pada tag ol lebih mudah dimengerti.

 

Kode di atas akan menghasilkan tampilan berikut ini

list ol HTML - daftar terurut

 

Tag ul

Tag ul untuk digunakan pada daftar yang tidak terurut. Daftar yang tidak terurut dapat juga diatur tampilan simbol yang akan digunakan untuk mengawali kalimat. Tag ul juga menggunakan atribut type untuk mengatur tampilannya. Namun, pengaturan atribut type berbeda dengan pengaturan pada tag ol. Silahkan perhatikan pilihan pengaturan type yang dapat dilakukan.

circle – menggunakan simbol bulatan
disc – menggunakan simbol berbentuk piringan
square – menggunakan simbol kotak

Agar lebih jelas saya akan berikan lagi contoh kode HTMLnya seperti berikut ini:

Hasil tampilan kode di atas adalah seperti berikut ini:

List ul HTML - daftar tidak terurut

 

Tutorial HTMl kali ini cukup singkat karena materi yang akan dipelajari cukup singkat. Dan Anda dapat mencobanya sendiri. Kita selanjutnya akan membuat tampilan dokumen HTML kita menjadi lebih cantik menggunakan gambar.

Tutorial HTML – Gambar – Bagian 13 (Bahasa Indonesia)