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.
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 angkatype="A"urutannya akan berdasarkan huruf dengan bentuk kapital, hasilnya A, B, F, R, dan lain-laintype="a"urutannya akan berdasarkan huruf dengan bentuk huruf kecil, contoh a, b, x, y, dan sebagainyatype="I"urutannya akan berdasarkan angka romawi dengan format huruf kapital, misalnya I, II, V, IX dan seterusnyatype="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.
Halaman : 1 2
Mantaaap,,, Terimakasih ilmunya…
Terima kasih juga, semoga bermanfaat…
kok saya praktekan di blogger kaga bisa ya, yang mulai start dari angka yang diinginkan?
Terima kasih sudah berkunjung…
Bisa jadi karena browsernya, atau atribut start memang tidak didukung oleh blogger.
Salam kenal, cm mau nyapa 🙂
*2019 nemu pengelola situs pribadi seperti ini lumayan sulit
Salam kenal juga ya 🙂
Terima kasih atas kunjungannya.
Mau nanya kalo bikin
1.1
1.2
Itu gimana yak?
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… 😀
Terima kasih atas tutorialnya, sangat membantu saya mengerjakan tugas ^^
Kenalkan nama saya Febri Eriyanto 1722500001 dari Atma Luhur
Terima kasih atas kunjungannya, semoga bermanfaat…
Terimakasih untuk artikel yang di share sangat membantu, Tutorialnya cukup lengkap gan. Jadi menambah referensi saya
Terima kasih atas kunjungannya, silakan dishare kepada temen-temen yang lain jika dirasa bermanfaat…
Mau tanyaa cara mengubah angkaa dalam wibsite atau situs bagaimana
Perlu diperjelas pertanyaannya, ingin mengubah angka yang di bagian mana?…
Mau tanyaa cara mengatur angka di wibsite atau situs bagaimana
Angka apa yang mau diatur? Bisa disampaikan lebih jelas? Semoga bisa saya bantu…
kalau supaya urutan nya jadi terbalik gimana ya? jadi yang nomor 1 posisinya jadi paling bawah.
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:
Silakan dicoba ya… 🙂
Oh iya, ini berlaku untuk HTML5 😉