Belajar HTML untuk Pemula (bagian 5)

Elemen ol (ordered list), ul (unordered list) dan li (list item)

Untuk elemen ol memiliki attribut start dan type, start untuk menentukan format penomoran awal, sebagai contoh apabila dimulai dengan nomor 1 maka start akan diberikan attribut 1 (start="1" dan apabila ingin memulai dengan nomor 2 atau tiga atau empat maka attribute untuk startnya sesuaikan dengan awal penomoran tersebut.

HTML untuk elemen ul (unordered list) digunakan untuk membuat list tanpa adanya nomor urut baik berupa angka maupun abjat seperti 1, A, a, I, i dan sebagainya melainkan berupa bentuk lingkaran, kotak maupun bundar dan memiliki attribute type yang berfungsi untuk mengubah bentuk attribute tersebut.

HTML untuk elemen li (list item) juga memiliki attribute start dan type

Berikut ini beberapa contoh html untuk elemen ol, ul dan li.

Contoh HTML untuk ol dan li

Link Blog Saya
<ol>
     <li>Belajar Ilmu Komputer</li>
     <li>Computer Serve</li>
     <li>TobiPuken.com</li>
     <li>KlikGanda</li>
     <li>Kokiku-tobipuken</li>
     <li>Belajar HTML</li>
</ol>

Hasilnya seperti berikut :

Link Blog Saya

        
  1. Belajar Ilmu Komputer
  2.     
  3. Computer Serve
  4.     
  5. TobiPuken.com
  6.     
  7. KlikGanda
  8.     
  9. Kokiku-tobipuken
  10.     
  11. Belajar HTML

Contoh untuk elemen ul (unordered list)

Link Blog Saya
<ul>
     <li>Belajar Ilmu Komputer</li>
     <li>Computer Serve</li>
     <li>TobiPuken.com</li>
     <li>KlikGanda</li>
     <li>Kokiku-tobipuken</li>
     <li>Belajar HTML</li>
</ul>

Hasilnya seperti berikut

Link Blog Saya

        
  • Belajar Ilmu Komputer
  •     
  • Computer Serve
  •     
  • TobiPuken.com
  •     
  • KlikGanda
  •     
  • Kokiku-tobipuken
  •     
  • Belajar HTML

Untuk mencoba sendiri html untuk elemen ol, ul dan li silahkan copy kode html di atas dan pastekan pada notepad kemudian simpat dengan nama file : olulli.html kemudian coba jalankan pada browser dan lihat hasilnya.

1 comment:

Anonymous said...

bermanfaat bgt thx's y.salam sejahtera.

Post a Comment

Bagaimana menurut anda tentang artikel ini, Berikan Komentar anda di sini... komentar spam akan dihapus

Pengikut Belajar Ilmu Komputer