"Om Swastiastu"
Ordered list adalah suatu daftar dalam HTML dimana terdapat item-item terurut atau memiliki nomor secara urut dalam sebuah daftar. Ordered list dimulai dengan tag awal <ol> dan diakhiri dengan tag </ol>. Ditengah-tengah tag tersebut kita menuliskan list atau daftar. Tag untuk menuliskan list adalah <li>. Berikut contoh penggunaan tag tersebut.
<html>
<body>
<h3>Contoh Ordered List:</h3>
<ol>
<li>Tutorial Pemrograman C++</li>
<li>Tutorial Pemrograman Java</li>
<li>Tutorial Pemrograman VB 2008</li>
<li>Tutorial Pemrograman SQL</li>
<li>Tutorial Pemrograman Web</li>
</ol>
</body>
</html>
Silahkan kalian simpan file tersebut, lalu buka dalam browser. Jangan lupa format filenya adalah .html.
Adapun tag ordered list ini memiliki beberapa atribut seperti yang terlihat dalam gambar dibawah:
Untuk lebih jelasnya, kalian dapat melihat contoh dibawah ini:
<ol type="a">
<li>Keyboard</li>
<li>Mouse</li>
<li>Cooling Pad</li>
<li>Flash Disk</li>
</ol>
Silahkan ganti tipe atribut diatas dengan yang terdapat dalam gambar.
Selanjutnya kita akan masuk pada tahap pembuatan unordered list dalam HTML. Unordered list sendiri adalah suatu daftar dalam HTML yang tidak diurutkan, jadi penempatan item-itemnya tidak harus terurut. Lihatlah contoh kode berikut, lalu jalankan dalam browser.
<html>
<body>
<h4>Unordered List</h4>
<ul>
<li>Gitar</li>
<li>Bass</li>
<li>Drum</li>
</ul>
</body>
</html>
Unordered list ini juga memiliki atribut seperti yang terlihat dalam gambar dibawah ini:
Secara default, jika kalian tidak memberikan atribut pada tag <ul>, maka type atributnya akan menjadi disc.
Terakhir, kita dapat mengkombinasikan kedua list ini dalam satu file HTML. Lihat kodenya dibawah ini:
<html>
<body>
<h4>Contoh Kombinasi Ordered List dan Unordered List:</h4>
<ol>
<li>Kopi
<ul type="square">
<li>Arabika</li>
<li>Capucino</li>
</ul>
</li>
<li>Teh
<ul type="circle">
<li>Teh hitam</li>
<li>Teh hijau</li>
</ul>
</li>
<li>Susu</li>
</ol>
</body>
</html>
Semoga tutorial diatas berguna untuk kalian.
"Om Santhi, Santhi, Santhi, Om"
thanks for sharing it.
Thank u ya untuk ilmunya !
walaupun simple, but sangat berguna sekali.
Terus Berkarya ya..