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.

    Related

    Cara Buat Kotak menggunakan atribut Fieldset

    Saat yang lalu saya menjelaskan cara membuat tabel. Dan pada tutorial blog kali ini hampir mirip dengan tabel, sama-sama berbentuk kotak. Tapi kotak yang ini berfungsi sebagai teks area dan bentuknya ...

    Cara Membuat Tabel (Tahap 1)

    Tutorial Blog kali ini saya akan membahas bagaimana cara membuat tabel. Karena tabel sangat penting dan sering diperlukan ketika kita edit atau posting artikel pada web atau blog. Biasanya tabel digun...

    Cara membuat Link Terbuka di halaman Baru

    Sering kali kita mendapati banyak link yang terdapat pada halaman sebuah web atau blog, baik terletak pada teks, gambar, baner atau yang lain. Dan ketika link-link tersebut kita klik, biasanya akan te...

    Posting Komentar

    1. betul betul menarik web anda ,saya akan sering berkunjung ke web anda ,terima kasih infonya

      BalasHapus
    2. kontent yang kaya akan ilmu internet anda betul betul mahir dalam ilmu online saya salut, anda benar benar mengetahui seluk beluk web

      BalasHapus

    emo-but-icon
    :noprob:
    :smile:
    :shy:
    :trope:
    :sneered:
    :happy:
    :escort:
    :rapt:
    :love:
    :heart:
    :angry:
    :hate:
    :sad:
    :sigh:
    :disappointed:
    :cry:
    :fear:
    :surprise:
    :unbelieve:
    :shit:
    :like:
    :dislike:
    :clap:
    :cuff:
    :fist:
    :ok:
    :file:
    :link:
    :place:
    :contact:

    Hot in weekRecentComments

    Hot in week

    Recent

    Slide down random post

    Satu lagi pengembangan fitur slide show terbaru dari saya. Fitur ini saya beri nama "Slide down random post", sebab fitur ini saya adopsi dan saya kembangkan dari aplikasi recent post yang tampil seca...

    Slice Random Recent Post

    Dilihat sekilas memang recent post ini tampak seperti biasa, dan hanya tampil judul artikel saja. Tapi sebenarnya recent post ini memiliki tampilan yang lebih, yaitu effek slice atau sebuah lapisan ya...

    Buat Toko Online dengan blogger tidak kalah Profesional

    Bersamaan dengan Lounching Perdana Toko Online "Jogja Smart", saya ingin berbagi pengalaman  dan pengetahuan tentang blogger kepada sobat - sobat blogger yang mampir di blog tercinta ini.Kendati ...

    Cara mengaktifkan Thread Comments blogger

    Melihat penggunaan Thread Comments yang ada pada template bawaan blogger, buat saya sangat disayangkan bila dilewatkan. Sebab Thread Comments ini memiliki fitur yang lebih dibanding form komentar yang...

    Cara Pasang Rating Bintang Rich Snippets

    Bagi yang belum atau masih kesulitan memasang Rating Bintang dan Rich Snippets, berikut langkah yang paling pas dan mudah untuk memasang Rating Bintang dan Rich Snippets.Sebelum menuju caranya, sebaik...

    Comments

    Manly tours:

    artikel ini beserta kode kodenya untuk di passang di website blogger ya mas keren juga mas saya kepingin tapi saya tidak menggunakan website blogger yang saya gunakan website word press, kalau begitu...

    peluang usaha:

    wah.. keren nih..tanks gan dah share

    muhammad isra:

    kalau batas waktu 10, apa tidak terlalu cepat gan....salam sukses selalu...ditunggu kunjungan balik dan kritik sarannya......

    item