Cara Membuat Listing di HTML ~ Belajar Koding YUK !!

Jika saat kita menggunakan software Microsoft Word biasanya kita memanfaatkan fitur untuk mengelompokkan sebuah list atau daftar sesuai dengan berdasarkan nomor secara berurut atau menggunakan simbol tertentu.

Namun dalam HTML, penomoran tersebut bisa kita sebut dengan istilah Ordered List, sedangkan list yang menggunakan simbol bisa kita sebut dengan istilah Unordered List. Nah, seperti apa penggunan dalam dua istilah ini. Berikut adalah penjelasannya.

Ordered List

Saat kita akan membuat daftar tertentu dengan model Ordered List, maka tag yang bisa kita gunakan adalah <ol>...</ol>. Dan di dalam tag tersebut akan disisipi oleh tag listing yakni <li>...</li>.

Sebagai contohnya, silahkan perhatikan baik-baik sintaks berikut ini :

<h2>DAFTAR LIST</h2>
<ol>
 <li>List Pertama</li>
 <li>List Kedua</li>
 <li>List Ketiga</li>
 <li>List Keempat</li>
</ol>

Jika sudah, silahkan jalankan dengan menggunakan Mozilla Firefox, maka hasilnya akan seperti gambar di bawah ini :

Cara Membuat Listing di HTML, Belajar Koding Yuk

Unordered List

Jika daftar yang ingin kita gunakan bukan merupakan rangkaian daftar berurut, kita bisa menggunakan Unordered List yang nantinya setiap list akan memiliki tanda simbol tertentu.

Secara default, simbol pada list akan bertentuk bulat, namun hal ini bisa kita ubah sesuai dengan simbol tertentu dengan memanfaatkan CSS (tidak akan dibahas pada postingan kali ini).

Untuk menggunakan Listing dengan model Unordered List ini, maka tag yang kita gunakan adalah <ul>...</ul> dan di dalamnya disisipi oleh tag listing yakni <li>...</li>. Sebagai contohnya, silahkan tulis script di bawah ini pada Notepad.

    <h2>DAFTAR LIST</h2>
        <ul>
            <li>List Pertama</li>
            <li>List Kedua</li>
            <li>List Ketiga</li>
            <li>List Keempat</li>
        </ul>

Jika sudah, silahkan jalankan menggunakan Mozilla Firefox, dan hasilnya akan seperti di bawah ini :

Dengan menggunakan tag ini akan mempermudah kamu untuk membuat list ataupun menu dalam website kamu. Demikian tutorial kali ini, simak terus ya tutorial yang lainya di belajarkodingyuk.blospot.com.