Selasa, 17 Juli 2012

Membuat List pada HTML

Untuk membuat list pada html, tag yang kita gunakan adalah <li> dan ditutup dengan tag </li>. List dalam html, bisa berupa nomer/angka(ordered list) yang didefinisikan dengan tag <ol>, juga bisa berupa bullet(unordered list) yang didefinisikan dengan tag <ul>.

Langsung saja kita lihat perbedaanya,
Kita mulai dengan yang list berupa angka,misalnya kodenya sebagai berikut,
Minuman yang tersedia :
<ol>
<li>Es Tawar</li>
<li>Es Teh Manis</li>
<li>Es Jeruk</li>
</ol>
Maka hasilnya adalah,
Minuman yang tersedia :
  1. Es Tawar
  2. Es Teh Manis
  3. Es Jeruk

Jika kita ingin mengganti list angka menjadi huruf atau angka romawi, maka kita menambahkan atribu type. Atribut type yang dimaksud adalah "a","A","i","I".Silahkan dipilih salah satu type sesuai yang diinginkan.

Sekarang kita coba menggunakan salah satu type,
Minuman yang tersedia :
<ol type="a">
<li>Es Tawar</li>
<li>Es Teh Manis</li>
<li>Es Jeruk</li>
</ol>
Maka hasilnya adalah,
Minuman yang tersedia :
  1. Es Tawar
  2. Es Teh Manis
  3. Es Jeruk
Kita berlanjut ke unordered list,contoh kodenya :
Makanan yang tersedia :
<ul>
<li>Nasi Uduk</li>
<li>Ayam Goreng</li>
<li>Soto Ayam</li>
</ul>
Maka hasilnya :
Makanan yang tersedia :
  • Nasi Uduk
  • Ayam Goreng
  • Soto Ayam

Kita juga bisa menggunakan atribut type jika ingin bentuk list yang lain. Type yang dimaksud adalah "disc","square","circle".

Sekarang kita coba menyisipkan salah satu type
Makanan yang tersedia :
<ul type="square">
<li>Nasi Uduk</li>
<li>Ayam Goreng</li>
<li>Soto Ayam</li>
</ul>
Maka hasilnya :
Makanan yang tersedia :
  • Nasi Uduk
  • Ayam Goreng
  • Soto Ayam