HTML LIST

List termasuk atribut yang sering digunakan dalam membuat sebuah daftar ataupun sub daftar. Biasanya bentuk list yang sering digunakan adalah seperti Angka, huruf, romawi, titik atau bentuk-bentuk bidang seperti lingkaran, kotak, dll.

Berikut beberapa contoh bentuk list yang sering digunakan :


<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

OK....Selamat membaca artikel yang lain dan semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Related

Menggunakan Atribut Style pada Font

Atribut Style digunakan untuk menentukan gaya atau bentuk dan memberi fariasi pada font. Dengan Atribut Style, kita bisa merubah atau menentukan ukuran besar dan kecil pada font, memberi warna pada fo...

Blockquote html

Blockquote ditandai dengan tag awal <blockquote> dan tag akhir </blockquote>. Tag ini berfungsi untuk menampilkan sebuah blok berisi teks atau kutipan teks, dan dengan tag ini browser akan...

HTML Dasar

Bila anda sudah membaca artikel saya mengenai Definisi HTML, kali ini kita akan belajar bersama mengenal keseluruhan tentang HTML secara bertahap.Seperti yang sudah saya utarakan pada artikel mengenai...

Posting Lebih Baru CSS Background

Posting Komentar

  1. wah tips yg sgt bermanfaat nih, thx ya sdh mau berbagi, salam kenal

    BalasHapus
  2. trims mas untuk postingannya. sangat bermanfaat u saya. namun saya pernah melihat list bentuknya spt dibawah ini:
    jenis warna:
    1). putih
    2). merah
    3). kuning
    4). dst.
    kalau pake html atau css bisa ngak mas? trims untuk bantuannya.

    BalasHapus
    Balasan
    1. HTML dan css untuk bentuk yg anda maksud, sy belum pernah lihat.
      maaf ya...

      Hapus

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