Cara membuat List pada daftar menggunakan html

List termasuk atribut yang sering digunakan dalam membuat sebuah daftar ataupun sub daftar. Secara umum biasanya bentuk list yang sering digunakan adalah seperti Angka, huruf, romawi, titik atau bentuk-bentuk bidang seperti lingkaran, kotak, dll.
Dibawah ini saya mencoba memberikan beberapa contoh bentuk list untuk membuat sebuah daftar dengan menggunakan Html, dan untuk membuat List image atau list yang berbentuk gambar, seperti tanda panah, tanda centang, atau list dengan gambar yang lain, akan saya bahas pada tutorial css.

Kali ini kita fokus pada tutorial html terlebih dulu ya.......
silahkan anda perhatikan cara penulisan kodenya.





<h4>List bentuk Angka :</h4>
 <ol>
 <li>Satu</li>
 <li>Dua</li>
 <li>Tiga</li>
 <li>Empat</li>
</ol>

List bentuk Angka :

  1. Satu
  2. Dua
  3. Tiga
  4. Empat

<h4>List bentuk Huruf besar:</h4>
<ol type="A">
 <li>Huruf besar A</li>
 <li>Huruf besar B</li>
 <li>Huruf besar C</li>
 <li>Huruf besar D</li>
</ol>

List bentuk Huruf besar:

  1. Huruf besar A
  2. Huruf besar B
  3. Huruf besar C
  4. Huruf besar D

<h4>List bentuk Huruf kecil:</h4>
<ol type="a">
 <li>Huruf kecil a</li>
 <li>Huruf kecil b</li>
 <li>Huruf kecil c</li>
 <li>Huruf kecil d</li>
</ol>

List bentuk Huruf kecil:

  1. Huruf kecil a
  2. Huruf kecil b
  3. Huruf kecil c
  4. Huruf kecil d

<h4>List bentuk Romawi besar:</h4>
<ol type="I">
 <li>Romawi besar I</li>
 <li>Romawi besar II</li>
 <li>Romawi besar III</li>
 <li>Romawi besar IV</li>
</ol>

List bentuk Romawi besar:

  1. Romawi besar I
  2. Romawi besar II
  3. Romawi besar III
  4. Romawi besar IV

<h4>List bentuk Romawi kecil:</h4>
<ol type="i">
 <li>Romawi kecil i</li>
 <li>Romawi kecil ii</li>
 <li>Romawi kecil iii</li>
 <li>Romawi kecil iv</li>
</ol

List bentuk Romawi kecil:

  1. Romawi kecil i
  2. Romawi kecil ii
  3. Romawi kecil iii
  4. Romawi kecil iv




<h4>Disc bullets list:</h4>
<ul type="disc">
 <li>Merah</li>
 <li>Kuning</li>
 <li>Hijau</li>
 <li>Biru</li>
</ul>

Disc bullets list:

  • Merah
  • Kuning
  • Hijau
  • Biru

<h4>Circle bullets list:</h4>
<ul type="circle">
 <li>Merah</li>
 <li>Kuning</li>
 <li>Hijau</li>
 <li>Biru</li>
</ul>

Circle bullets list:

  • Merah
  • Kuning
  • Hijau
  • Biru

<h4>Square bullets list:</h4>
<ul type="square">
 <li>Merah</li>
 <li>Kuning</li>
 <li>Hijau</li>
 <li>Biru</li>
</ul>

Square bullets list:

  • Merah
  • Kuning
  • Hijau
  • Biru




<h4>Sub Daftar:</h4>
<ul> <li>Buah</li>
  <li>Hewan
    <ul>
    <li>Reptil</li>
    <li>Mamalia
      <ul>
      <li>Sapi</li>
      <li>Kambing</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>Pohon</li>
</ul>

 

Sub Daftar:

  • Buah
  • Hewan
    • Reptil
    • Mamalia
      • Sapi
      • Kambing
  • Pohon



    Selamat mencoba dan semoga bermanfaat....
    Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

    Tidak ada komentar:

    Posting Komentar