List Pada HTML

List atau daftar pada html berfungsi untuk menguraikan daftar dari suatu informasi agar susunan informasi tersebut lebih efektif dan gampang dibaca. Ada banyak bentuk list dalam html yang dapat kita gunakan seperti list dengan nomor, list tanpa nomor dan list definisi.



List dengan nomor (Ordered List) adalah model list yang tiap-tiap itemnya ditandai dengan urutan nomor, sedangkan list tanpa nomor sering disebut juga dengan bulleted list dengan bullet default berupa noktah (titik).


Untuk memulai membuat list tanpa nomor (bulleted list) kita mulai dengan tag pembuka list <ul>, lalu dilanjutkan dengan memasukkan setiap item list pada tag <li> pembuka dan tag </li> penutup,  dan ditutup dengan tag penutup list <ul/>. Untuk list dengan nomor tag <ul> dan </ul> kita ganti menjadi <ol> dan </ol>.

Agar lebih jelasnya perhatikan contoh dibawah:


 <!-- Contoh List -->  
 <html>  
 <head>  
 <title> Contoh List </title>  
 <head>  
 <body>  
 <h4> List dengan Nomor </h4>  
 <ol>  
 <li> Kopi </li>  
 <li> Susu </li>  
 <li> Teh Manis </li>  
 </ol>  
 <h4> List Tanpa Nomor </h4>  
 <ul>  
 <li> Nasi Goreng </li>  
 <li> Mie Goreng </li>  
 <li> Bihun Goreng </li>  
 </ul>  
 </body>  
 </html>  


List dengan nomor (ordered list) secara default akan berupa angka seperti pada contoh diatas. Ada beberapa bentuk yang bisa kita gunakan untuk mengubah penomoran dalam ordered list yaitu: I untuk angka Romawi besar, i untuk angka romawi kecil, A untuk abjad huruf besar dan a untuk abjad huruh kecil. Sedangkan untuk membuat ordered list dimulai dari angka tertentu maka kita tambahkan start.

Perhatikan agar lebih jelas:


<html>  
 <head>  
 <title> Contoh List </title>  
 <head>  
 <body>  
 <h4> List dengan Abjad huruf Besar </h4>  
 <ol type = "A">  
 <li> Kopi </li>  
 <li> Susu </li>  
 <li> Teh Manis </li>  
 </ol>  
 <h4> List Dimulai dari angka 7 </h4>  
 <ol start =7>  
 <li> Nasi Goreng </li>  
 <li> Mie Goreng </li>  
 <li> Bihun Goreng </li>  
 </ul>  
 </body>  
 </html>  


Nested List
Nested list atau list bersarang maksudnya didalam list masih ada list lagi. Perhatikan contohnya:

 <html>  
 <head>  
 <title> Contoh List </title>  
 <head>  
 <body>  
 <h4> List dengan Abjad huruf Besar </h4>  
 <ol >  
 <li> Kopi </li>  
 <li> Susu </li>  
 <li> Teh Manis </li>  
 </ol>  
 </body>  
 </html>  


Baca Juga Membuat Button Menu Dengan HTML Dan Javascript


Demikian Caa Membuat List Pada HTML, Semoga Bermanfaat

Previous
Next Post »