Dalam tutorial ini, kita akan mencoba memahami bagaimana cara membuat bullet dan numbering (daftar berbutir dan daftar bernomor)
Fitur ini digunakan untuk membuat penomoran yang rapi ketika menampilkan sebuah daftar
Terdapat dua jenis list yang umum digunakan yaitu ordered list (daftar yang terstruktur dan urut) serta unordered list (sebuah daftar tanpa urutan)
Untuk menampilkan urutan 1 2 3 4 atau a b c d kita menggunakan ordered list (daftar berurut) sedangkan unordered list menampilkan dot hitam atau cakram bulat sebagai penanda daftar
Yuk simak selengkapnya !!
Cara Membuat Bullets dan Numbering
Seperti yang biasa kita lakukan di blog gurublogger.id , kita akan praktek terlebih dahulu baru kemudian membahas teorinya
Dummy Text :
<p >
Saya sedang berlatih membuat daftar bullet and numbering, yang biasa digunakan untuk membuat list berurut menggunakan angka, huruf maupun dot cakram.
</p>
Nomer 1<br/>
Nomer 2<br/>
Nomer 3<br/>
Nomer 4<br/>
Nomer 5<br/><br/>
Huruf a<br/>
Huruf b<br/>
Huruf c<br/>
Huruf d<br/>
Huruf e<br/><br/>
Nomer 1<br/>
Nomer 2<br/>
Huruf a<br/>
Huruf b<br/>
Nomer 3<br/>
Nomer 4<br/>
Nomer 5<br/><br/>
ini bullet<br/>
ini bullet<br/>
ini bullet<br/>
ini bullet<br/>
ini bullet<br/><br/>
Nomer 3<br/>
Nomer 4<br/>
Nomer 5
Instruksi menggunakan bullet and dumbering adalah sebagai berikut :
- Buat Postingan Baru
- Beri Judul Latihan 13 : Membuat Bullet dan Numbering
- Copy Dummy Text
- Kembali ke postingan baru >> Pindah ke mode HTML kemudian Paste
- Beri Format Numbered List (Daftar Bernomor) untuk urutan angka dan huruf
- Beri Format Bulleted List (Daftar Berbutir) untuk selain angka dan huruf
- Publikasikan Postingan
Setelah dipublikasikan, silahkan cek hasilnya…apakah ada yang error?
Hasil latihan guru blogger bisa dilihat di : Latihan membuat bullet dan numbering
Numbered List (Daftar Bernomor)
Dalam post editor blogger diberi nama numbered list (daftar bernomor), namun nama aslinya adalah Ordered list (daftar berurut) disingkat ol
Jadi ketika teman teman menggunakan daftar bernomor, yang muncul adalah kode html ol, dan didalamnya ada li (singkatan dari list).
Kodenya kurang lebih akan terlihat seperti ini :
<ol>
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ol>
Ingat, seperti telah dijelaskan di topik sebelumnya, bahwa kode html selalu diawali dengan opening tag dan ditutup dengan closing tag <li> ditutup dengan </li> dan <ol> ditutup dengan </ol>
Lalu kenapa huruf a tidak keluar? kenapa yang keluar tetap 1 2 3 urutannya?
Hal itu dikarenakan adanya kekurangan tipe ol didalam kode numbered list yang telah teman teman buat
Untuk membuat urutan dari a kecil b kecil c d e f g dst teman teman harus menambahkan type=”a” didalam ol
Untuk membuat urutan A besar B besar C D E F G dst teman teman harus menambahkan type=”A” didalam ol
Bila ingin membuat urutan huruf romawi kecil tinggal tambahkan type=”i” atau type=”I” bila ingin romawi besar
Cara mengaplikasikannya adalah seperti ini :
<ol type=”a”>
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ol>
Pertanyaan terkait membuat urutan dengan huruf sudah terjawab, lalu bagaimana bila urutannya tidak mulai dari 1? dari 3 misalnya
caranya mudah, cukup tambahkan start=”anka mulai” didalam ol
Cara mengaplikasikan pembuatan numbered list dimulai dari 2 3 atau 4 dst (selain 1):
<ol start=”3″>
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ol>
Lalu bagaimana dengan numbered list didalam numbered list seperti contoh kasus diatas, karena ada urutan a b c setelah nomer 2, tapi kemudian dilanjutkan lagi dengan nomer 3
prinsipnya adalah memasukkan ol kedalam ol, bentuk sederhananya mungkin akan terlihat seperti ini
<ol >
<li>Urutan 1</li>
<li>Urutan 2</li>
<ol>
<li>huruf a</li>
<li>huruf b</li>
</ol>
<li>Urutan 3</li>
</ol>
Teman teman bisa coba coba sendiri untuk mengasah kemampuan membuat numbered list, atau lupakan saja dan bila pada saatnya nanti bertemu teman teman bisa kembali ke halaman ini 😀
Bulleted List (Daftar Berbutir)
Didalam blogger diberi nama Bulleted List (Daftar Berpeluru), namun bila teman teman menggunakan bahasa indonesia ternyata terjemahannya adalah Daftar Berbutir)
Tapi tau ngga kalau istilah aslinya adalah Unordered List (Daftar Ngga Urut) disingkat ul
Cara menggunakan bulleted list pada dasarnya sama dengan numbered list, tinggal ol diganti ul
Contoh penggunaan unordered list :
<ul>
<li>Urutan 1</li>
<li>Urutan 2</li>
<li>Urutan 3</li>
</ul>
Bila ol bisa pakai a kecil, A besar, romawi, dll harusnya ul juga punya type dong?
Betul !!
Beberapa type yang bisa digunakan didalam unordered list adalah “circle”, “disc”, dan “square” teman teman bisa bereksperimen sendiri karena cara kerja membuat penomoran baik itu menggunakan ul maupun ol adalah sama
catatan terakhir : Bila teman teman bertemu dengan style=”text-align: left;” maka kode itu bisa dihapus agar kode html terlihat lebih clean (itu hanyalah kode inline css yang sudah kita bahas di topik sebelumnya)