Belajar HTML (12): Membuat Daftar dengan Urutan Angka atau Huruf

Hai… Pada tulisan ini kita masih membahas tentang dasar-dasar web, yaitu HTML. Kali ini kita akan belajar cara membuat daftar atau senarai berbentuk poin-poin, di mana poin-poin tersebut berupa urutan angka atau huruf. Sering kita temukan daftar dengan urutan angka dari 1 sampai sekian, atau dari a sampai z dan seterusnya.

Untuk lebih mudahnya, silahkan baca-baca dulu tulisan sebelumnya tentang cara membuat daftar tidak berurutan. Dan juga tulisan lain, di antaranya tentang Elemen dan Atribut.

Tag ol

Daftar berurutan ini disebut juga Ordered List. Untuk membuatnya kita menggunakan tag <ol> dan </ol> . Seperti unordered list, diikuti dengan tag List untuk isi daftarnya yang dituliskan seperti ini: <li>isi daftarnya di sini...</li> .

Lansung saja, untuk contoh nyata dari tutorial Ordered List ini adalah sebagai berikut, silahkan ketik dan simpan kemudian jalankan kode di bawah ini. Simpan dengan nama file 30-html-ordered-list.html.

<!DOCTYPE html>
<html>
<head>
   <title>Ordered List</title>
</head>
<body>
   <h2>Menampilkan Daftar Secara Berurutan</h2>
   <p>Daftar urutan biasa disebut juga <b><font face="Arial">Ordered List</font></b>, digunakan untuk menampilkan daftar berupa poin-poin dengan urutan tertentu, bisa berupa angka atau huruf. Contohnya:</p>
   <ol>
      <li>Ini kalimat pertama.</li>
      <li>Ini kalimat kedua.</li>
      <li>Ini kalimat ketiga.</li>
      <li>...</li>
      <li>Dan seterusnya</li>
   </ol>
</body>
</html>

Silahkan dijalankan dan lihat hasilnya.

HTML Ordered List

Mungkin akan muncul pertanyaan, apakah bisa daftar urut ini diubah menjadi huruf, misalnya dengan urutan a, b, c dan seterusnya? Atau misalnya ingin berurutan dengan bentuk angka romawi? Bisa. Caranya dengan menggunakan atribut type.

Menggunakan Type

Ada 5 tipe urutan yang bisa digunakan yaitu sebagai berikut:

  • type="1" urutannya akan berdasarkan angka integer (bilangan bulat), ini adalah bentuk default atau dasarnya, tanpa menyebutkan tipenya pun akan menghasilkan urutan berdasarkan angka
  • type="A" urutannya akan berdasarkan huruf dengan bentuk kapital, hasilnya A, B, F, R, dan lain-lain
  • type="a" urutannya akan berdasarkan huruf dengan bentuk huruf kecil, contoh a, b, x, y, dan sebagainya
  • type="I" urutannya akan berdasarkan angka romawi dengan format huruf kapital, misalnya I, II, V, IX dan seterusnya
  • type="i" urutannya akan berdasarkan angka romawi juga tetapi dengan format huruf kecil seperti iii, iv, v dan selanjutnya

Silahkan coba ketik dan jalankan kode berikut ini, simpan dengan nama file 31-html-ordered-list-type.html:

<!DOCTYPE html>
<html>
<head>
   <title>Ordered List Type</title>
</head>
<body>
   <h2>Menampilkan Daftar Berurutan dengan atribut Type</h2>
   <p>Atribut <b><font face="Courier New" color="red">type</font></b>, digunakan untuk mengubah tampilan poin-poin sesuai yang diatur pada atribut tersebut. Berikut adalah contoh-contoh penggunaan type yang berbeda:
   <table border="1">
      <tr>
         <td>
            Contoh <b>angka (default)</b>
            <ol type="1">
               <li>Kalimat pertama.</li>
               <li>Kalimat kedua.</li>
            </ol>
         </td>
         <td>
            Contoh <b>huruf kapital</b>
            <ol type="A">
               <li>Kalimat pertama.</li>
               <li>Kalimat kedua.</li>
            </ol>
         </td>
         <td>
            Contoh <b>huruf kecil</b>
            <ol type="a">
               <li>Kalimat pertama.</li>
               <li>Kalimat kedua.</li>
            </ol>
         </td>
         <td>
            Contoh <b>angka romawi kapital</b>
            <ol type="I">
               <li>Kalimat pertama.</li>
               <li>Kalimat kedua.</li>
            </ol>
         </td>
         <td>
            Contoh <b>angka romawi huruf kecil</b>
            <ol type="i">
               <li>Kalimat pertama.</li>
               <li>Kalimat kedua.</li>
            </ol>
         </td>
      </tr>
   </table>
</body>
</html>

Coba perhatikan tampilannya setelah dijalankan.

Selanjutnya →

Halaman : 1 2

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

9 Responses

  1. Eco Racing berkata:

    Mantaaap,,, Terimakasih ilmunya…

  2. tutorial89 berkata:

    kok saya praktekan di blogger kaga bisa ya, yang mulai start dari angka yang diinginkan?

    • banghaji berkata:

      Terima kasih sudah berkunjung…
      Bisa jadi karena browsernya, atau atribut start memang tidak didukung oleh blogger.

  3. Umar Azmar MF berkata:

    Salam kenal, cm mau nyapa 🙂

    *2019 nemu pengelola situs pribadi seperti ini lumayan sulit

  4. Bulan berkata:

    Mau nanya kalo bikin
    1.1
    1.2
    Itu gimana yak?

    • Muhammad Erfan berkata:

      Terima kasih telah berkunjung…

      Setelah saya coba ternyata untuk format seperti yang Anda inginkan itu tidak bisa di-handle oleh HTML…

      Mohon maaf saya belum bisa memberikan solusi, tetap semangat… 😀

  1. 12 April 2018

    […] tulisan saya sebelum-sebelumnya sudah dibahas tentang cara membuat daftar, baik berurutan ataupun tidak berurutan. Kali ini kita masih membahas tentang tampilan dalam bentuk daftar tetapi […]

Tinggalkan Balasan ke Bulan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *