Cari
Beranda  ›  Tutorial HTML

Belajar Membuat Daftar Urutan/ Daftar List Pada HTML

Ditulis 12/24/2018 0 Komentar

Pada kesempatan kali ini saya akan menerangkan sedikit tentang Mengenal Daftar Urutan/ Daftar List pada HTML. Disini saya akan mencoba menjelaskan dan memberikan contoh agar mudah dipelajari dan dimengerti.

  1. Element OL (Ordered List)
    2. Element OL berfungsi untuk membuat nomor daftar urut (numbering). Element ini mempunyai attribute yaitu Start dan Type.
    • Attribute Start berfungsi untuk memberikan nilai awal dari daftar urutan
    • Attribute Type berfungsi untuk memilih bentuk daftar urutan yaitu :
      • 1 untuk angka decimal. format angkanya 1,2,3,4, dan selanjutnya.
      • A untuk abjad huruf besar. format hurufnya A,B,C,D, dan selanjutnya.
      • a untuk abjad huruf kecil. format hurufnya a,b,c,d, dan selanjutnya.
      • I untuk abjad romawi besar. format hurufnya I,II,III,IV, dan selanjutnya.
      • i untuk abjad romawi kecil. format hurufnya i,ii,iii,iv, dan selanjutnya.
    Dalam element OL harus terdapat beberapa element LI. Dalam penulisan sintaksnya :

    <ol start=”Number” type=”1”|”A”|”a”|”I”|”i”>
   <li> ................ </li>
</ol>

    Sebagai Contoh menggunakan Element OL :
    1. Menampilkan daftar urutan (default).
      2. <html>
   <head>
      <title>Daftar List Menggunakan OL (default)</title>
   </head>
<body>
   <ol>
      <li>item pertama</li>
      <li>item kedua</li>
      <li>item ketiga</li>
   </ol>
</body>
</html>
      Hasilnya :
      1. item pertama
      2. item kedua
      3. item ketiga

    2. Menampilkan daftar urutan bertingkat.
      3. <html>
   <head>
      <title>Daftar Urutan Bertingkat</title>
   </head>
<body>
   <ol start="1" type="1">
      <li>item pertama</li>
      <ol start="1" type="A">
         <li>sub item pertama</li>
         <li>sub item kedua</li>
         <li>sub item ketiga</li>
      </ol>
      <li>item kedua</li>
      <li>item ketiga</li>
      <ol start="1" type="I">
         <li>sub item pertama</li>
         <li>sub item kedua</li>
         <li>sub item ketiga</li>
         <ol start="1" type="a">
            <li>sub sub item pertama</li>
            <li>sub sub item kedua</li>
            <li>sub sub item ketiga</li>
         </ol>
      </ol>
   </ol>
</body>
</html>
      Hasilnya :
      1. item pertama
        1. sub item pertama
        2. sub item kedua
        3. sub item ketiga
      2. item kedua
      3. item ketiga
        1. sub item pertama
        2. sub item kedua
        3. sub item ketiga
          1. sub sub item pertama
          2. sub sub item kedua
          3. sub sub item ketiga

      Bisa juga menggunakan koding ini(Sama saja hasilnya) cuman tidak menggunakan attribute Start.
      <html>
   <head>
      <title>Daftar Urutan Bertingkat (Tidak Menggunakan attribute Start)</title>
   </head>
<body>
   <ol type="1">
      <li>item pertama</li>
      <ol type="A">
         <li>sub item pertama</li>
         <li>sub item kedua</li>
         <li>sub item ketiga</li>
      </ol>
      <li>item kedua</li>
      <li>item ketiga</li>
      <ol type="I">
         <li>sub item pertama</li>
         <li>sub item kedua</li>
         <li>sub item ketiga</li>
         <ol type="a">
            <li>sub sub item pertama</li>
            <li>sub sub item kedua</li>
            <li>sub sub item ketiga</li>
         </ol>
      </ol>
   </ol>
</body>
</html>
      Hasilnya :
      1. item pertama
        1. sub item pertama
        2. sub item kedua
        3. sub item ketiga
      2. item kedua
      3. item ketiga
        1. sub item pertama
        2. sub item kedua
        3. sub item ketiga
          1. sub sub item pertama
          2. sub sub item kedua
          3. sub sub item ketiga

    3. Menampilkan daftar urutan mulai dari angka/ huruf.
      4. <html>
   <head>
      <title>Daftar Urutan Mulai Angka/Huruf</title>
   </head>
<body>
   <ol start="6" type="1">
      <li>item pertama</li>
      <ol start="3" type="A">
         <li>sub item pertama</li>
         <li>sub item kedua</li>
         <li>sub item ketiga</li>
      </ol>
      <li>item kedua</li>
      <li>item ketiga</li>
      <ol start="11" type="I">
         <li>sub item pertama</li>
         <li>sub item kedua</li>
         <li>sub item ketiga</li>
         <ol start="20" type="a">
            <li>sub sub item pertama</li>
            <li>sub sub item kedua</li>
            <li>sub sub item ketiga</li>
         </ol>
      </ol>
   </ol>
</body>
</html>
      Hasilnya :
      1. item pertama
        1. sub item pertama
        2. sub item kedua
        3. sub item ketiga
      2. item kedua
      3. item ketiga
        1. sub item pertama
        2. sub item kedua
        3. sub item ketiga
          1. sub sub item pertama
          2. sub sub item kedua
          3. sub sub item ketiga

  2. Element UL (Unordered List)
    3. Element UL berfungsi untuk membuat daftar tanpa nomor urut (Bullet). Element ini mempunyai attribute yaitu Type.
    • Attribute Type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai attibute type ini adalah circle, square, dan disc.
    Dalam element UL harus terdapat beberapa element LI. Dalam penulisan sintaksnya :

    <ul type=”circle”|”square”|”disc”>
   <li> ................... </li>
</ul>

    Sebagai contoh menggunakan element UL :
    1. Menampilkan daftar urutan (default).
      2. <html>
   <head>
      <title>Daftar Urutan UL (default)</title>
   </head>
<body>
   <ul>
      <li>item pertama</li>
      <li>item kedua</li>
      <li>item ketiga</li>
   </ul>
</body>
</html>
      Hasilnya :
      • item pertama
      • item kedua
      • item ketiga

    2. Menampilkan daftar urutan bertingkat.
      3. <html>
   <head>
      <title>Daftar Urutan bertingkat</title>
   </head>
<body>
   <ul type="square">
      <li>item pertama</li>
      <ul type="disc">
         <li>sub item pertama</li>
         <li>sub item kedua</li>
         <ul type="circle">
            <li>sub sub item pertama</li>
            <li>sub sub item kedua</li>
            <li>sub sub item ketiga</li>
         </ul>
         <li>sub item ketiga</li>
      </ul>
      <li>item kedua</li>
      <li>item ketiga</li>
      <ul type="square">
         <li>sub item pertama</li>
         <li>sub item kedua</li>
         <li>sub item ketiga</li>
      </ul>
   </ul>
</body>
</html>
      Hasilnya :
      • item pertama
        • sub item pertama
        • sub item kedua
          • sub sub item pertama
          • sub sub item kedua
          • sub sub item ketiga
        • sub item ketiga
      • item kedua
      • item ketiga
        • sub item pertama
        • sub item kedua
        • sub item ketiga

  3. Element LI (List Item)
    4. Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute Type dan Value.
    • Nilai attribute Type adalah 1, A, a, i, I, circle, square, disc.
    • Nilai attribute Value berisikan nilai nomer urutan dari attribute Type.
    Penulisan sintaksnya :

    <li type=”1”|”A”|”a”|”I”|”i”|”circle”|”square”|”disc”> ............... </li>

    Contoh menggunakan element LI :
    <html>
   <head>
      <title>Menggunakan Element LI</title>
   </head>
<body>
   <ol>
      <li type="circle">item pertama</li>
      <li type="I">item kedua</li>
      <li type="1">item ketiga</li>
      <ul>
         <li type="i">sub item pertama</li>
         <li type="square">sub item kedua</li>
         <li type="A">sub item ketiga</li>
      </ul>
   </ol>
</body>
</html>
    Hasilnya :
    1. item pertama
    2. item kedua
    3. item ketiga
      • sub item pertama
      • sub item kedua
      • sub item ketiga


Anda juga bisa mengkombinasikan Ordered list (OL) dan Unordered list (UL)
Contoh :
<html>
   <head>
      <title>Contoh Daftar Urutan</title>
   </head>
<body>
   <ol>
      <li>Nama</li>
      <li>Tempat/Tanggal Lahir</li>
      <li>Nama Orang Tua</li>
      <ul type="disc">
         <li>Ayah :</li>
         <li>Ibu :</li>
      </ul>
      <li>Pendidikan</li>
      <ol type="i">
         <li>Sekolah Dasar (SD)</li>
         <li>Sekolah Menengah Pertama (SMP)</li>
         <li>Sekolah Menengah Atas (SMA)</li>
         <li>Perguruan Tinggi</li>
         <li>Pekerjaan</li>
      </ol>
      <li>Alamat</li>
   </ol>
</body>
</html>
Maka akan menghasilkan daftar item sebagai berikut :
  1. Nama
  2. Tempat/Tanggal Lahir
  3. Nama Orang Tua
    • Ayah :
    • Ibu :
  4. Pendidikan
    1. Sekolah Dasar (SD)
    2. Sekolah Menengah Pertama (SMP)
    3. Sekolah Menengah Atas (SMA)
    4. Perguruan Tinggi
    5. Pekerjaan
  5. Alamat


Somoga anda memahami yang saya jelaskan ini, sebenarnya ini mudah kalau anda sering-sering latihan.
Sekian dan terima kasih!

0 Komentar

- Kalau ada kesalahan lapor admin biar secepatnya diperbaiki.

- Jika berkenan silahkan berikan komentar anda mengenai artikel diatas.
- Gunakan kosa kata yang mudah dipahami.
- Usahakan Tidak berkomentar sebagai "Anonymous".

- Untuk menyisipkan kode, gunakan tag [pre] KODE ANDA [/pre].

Emoticon

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Bawah Artikel

Atas