Select Language



Followers

IT Programmer. Powered by Blogger.

05 October 2010

Belajar HTML - Ordered List dan Unordered List dalam HTML

"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"



Comments:

Ada 2 comments pada “Belajar HTML - Ordered List dan Unordered List dalam HTML”
harjeet said...
pada hari 

thanks for sharing it.

Unknown said...
pada hari 

Thank u ya untuk ilmunya !
walaupun simple, but sangat berguna sekali.
Terus Berkarya ya..

Social Media


Facebook Page

Programming Tutorial


Info


Tips
Downloads
Friends
 
This Blog is proudly powered by Blogger.com | Template by Bali Web Development | Privacy Policy | Rise Up!!