Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / HTML

Belajar Menciptakan Daftar Urutan/ Daftar List Pada Html


Pada kesempatan kali ini aku akan menunjukan sedikit ihwal Mengenal Daftar Urutan/ Daftar List pada HTML. Disini aku akan mencoba menjelaskan dan menawarkan teladan supaya gampang dipelajari dan dimengerti.

  1. Element OL (Ordered List)
    2. Element OL berfungsi untuk menciptakan nomor daftar urut (numbering). Element ini memiliki attribute yaitu Start dan Type.
    • Attribute Start berfungsi untuk menawarkan nilai awal dari daftar urutan
    • Attribute Type berfungsi untuk menentukan bentuk daftar urutan yaitu :
      • 1 untuk angka decimal. format angkanya 1,2,3,4, dan selanjutnya.
      • A untuk karakter huruf besar. format hurufnya A,B,C,D, dan selanjutnya.
      • a untuk karakter huruf kecil. format hurufnya a,b,c,d, dan selanjutnya.
      • I untuk karakter romawi besar. format hurufnya I,II,III,IV, dan selanjutnya.
      • i untuk karakter 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 memakai 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 memakai koding ini(Sama saja hasilnya) cuman tidak memakai 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 menciptakan daftar tanpa nomor urut (Bullet). Element ini memiliki attribute yaitu Type.
    • Attribute Type berfungsi untuk menentukan bentuk bullet yang digunakan. Nilai attibute type ini yaitu circle, square, dan disc.
    Dalam element UL harus terdapat beberapa element LI. Dalam penulisan sintaksnya :

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

    Sebagai teladan memakai 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 memiliki attribute Type dan Value.
    • Nilai attribute Type yaitu 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 memakai 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 sanggup 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 aku jelaskan ini, bekerjsama ini gampang jika anda sering-sering latihan.
Sekian dan terima kasih!
Sumber https://ferygg.blogspot.com/