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

Ditulis oleh Muhammad Erfan, dipublikasi sejak 24 Agustus 2017 pukul 15:48, disimpan dalam kategori HTML, Tutorial, Web. Ingin mengomentari tulisan ini? Ada 18 komentar.

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.

Tinggalkan Balasan 18

Your email address will not be published. Required fields are marked *


Eco Racing

Eco Racing

Mantaaap,,, Terimakasih ilmunya…

banghaji

banghaji

Terima kasih juga, semoga bermanfaat…

tutorial89

tutorial89

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

banghaji

banghaji

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

Umar Azmar MF

Umar Azmar MF

Salam kenal, cm mau nyapa 🙂

*2019 nemu pengelola situs pribadi seperti ini lumayan sulit

banghaji

banghaji

Salam kenal juga ya 🙂
Terima kasih atas kunjungannya.

Bulan

Bulan

Mau nanya kalo bikin
1.1
1.2
Itu gimana yak?

Muhammad Erfan

Muhammad Erfan

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… 😀

febri eriyanto

febri eriyanto

Terima kasih atas tutorialnya, sangat membantu saya mengerjakan tugas ^^
Kenalkan nama saya Febri Eriyanto 1722500001 dari Atma Luhur

Muhammad Erfan

Muhammad Erfan

Terima kasih atas kunjungannya, semoga bermanfaat…

Tempat Tidur Jati

Tempat Tidur Jati

Terimakasih untuk artikel yang di share sangat membantu, Tutorialnya cukup lengkap gan. Jadi menambah referensi saya

Muhammad Erfan

Muhammad Erfan

Terima kasih atas kunjungannya, silakan dishare kepada temen-temen yang lain jika dirasa bermanfaat…

Bintang

Bintang

Mau tanyaa cara mengubah angkaa dalam wibsite atau situs bagaimana

Muhammad Erfan

Muhammad Erfan

Perlu diperjelas pertanyaannya, ingin mengubah angka yang di bagian mana?…

Bintang

Bintang

Mau tanyaa cara mengatur angka di wibsite atau situs bagaimana

Muhammad Erfan

Muhammad Erfan

Angka apa yang mau diatur? Bisa disampaikan lebih jelas? Semoga bisa saya bantu…

ArRahim

ArRahim

kalau supaya urutan nya jadi terbalik gimana ya? jadi yang nomor 1 posisinya jadi paling bawah.

Muhammad Erfan

Muhammad Erfan

Bisa menggunakan tambahan atribut reversed di dalam tag OL-nya, misalnya begini:

<ol reversed>
     <li>BangHaji</li>
     <li>DotCom</li>
     <li>Official</li>
</ol>

nah hasilnya akan terlihat seperti ini:

  1. BangHaji
  2. DotCom
  3. Official


Silakan dicoba ya… 🙂
Oh iya, ini berlaku untuk HTML5 😉