> Cara membuat List pada daftar menggunakan html

Jumat, 25 Februari 2011

3

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.
    Ping your blog, website, or RSS feed for Free



    Informasi Artikel :
    Judul : "Cara membuat List pada daftar menggunakan html"
    Diulas Oleh : | Jumat, 25 Februari 2011 | 08.40
    Description : List termasuk atribut yang sering digunakan dalam membuat sebuah daftar ataupun sub daftar. Secara umum biasanya bentuk list yang sering d...

    Rating : 6.4 Dari 10, Berdasarkan 300+ Dari 3 000+ Pengunjung.



    3 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

    BLOGGER

    TUTORIAL BLOGGER

    TUTORIAL BLOGGER

    REKOMENDASI

    REKOMENDASI

    Artikel Terbaru

    POST POPULER

    Entri Populer



    BLOGGER

    Comments

    HTML

    Side Ads

    CSS

    Footer Ads

    JAVASCRIPT

    Random News


    BACKLINK

    INFO

    Bagi anda yang berminat tukar link, silahkan copy linknya lalu pasang di Blog anda. Dan bila sudah terpasang, jangan lupa beritahu saya, agar link anda segera saya pasang di Blog tercinta ini.

    CEO
    BLOG MAS NOER

    Noer cholis


    Plosokuning V, Minomartani, Ngaglik, Sleman, Yogyakarta.

    TUKAR LINK

    TUKAR LINK






    Baca artikel "Manfaat Tukar Link"













    Baca artikel "Manfaat Tukar Link"

    LINK SAHABAT

    LINK SAHABAT


    CHAT

    CHAT




    TESTIMONI

    Follow Us

    Bila anda merasa artikel ataupun tutorial yang ada di Blog ini bermanfaat, anda bisa berikan suport comment melalui form ini. Form ini sangat bagus sebagai BACKLINK buat blog anda, silahkan tinggalkan link anda....

    RECENT COMMENT

    Recent Comments


    top down