Penomoran Bertingkat di Kompasiana

Mengetahui Kompasiana “ganti wajah”, saya cukup senang. Saya pun berharap ada peningkatan pada fitur untuk menulis di Kompasiana. Salah satu harapan saya pada Kompasiana “wajah” baru adalah tersedianya fitur penomoran bertingkat. Penomoran bertingkat ini sangat diperlukan, misalnya saat menulis sebuah tutorial. Namun, sampai saat ini, fitur penomoran bertingkat belum tersedia. Meskipun demikian, penomoran bertingkat tetap bisa diwujudkan menggunakan serangkaian kode HTML. Saya sudah menerapkannya pada artikel yang satu ini.

Penggunaan kode HTML untuk membuat penomoran bertingkat sebenarnya tidak sulit, namun perlu ketelitian dan kesabaran. Terkadang, saat menulis menggunakan kode HTML, kita justru tertantang “bermain” dengan kode-kode yang ada dan ada keseruan tersendiri saat menggunakannya. Namun, proses penulisan menggunakan kode HTML ini kurang praktis. Ah, seandainya ada fitur penomoran bertingkat seperti fitur Multilevel List pada aplikasi Microsoft Word.

Tak ada rotan akar pun jadi. Berhubung fitur praktis penomoran bertingkat masih sebatas harapan, kita gunakan saja fitur “seru” menggunakan kode HTML. Dengan demikian, mau tidak mau, suka tidak suka, artikel yang di dalamnya ada penomoran bertingkat harus dibuat dalam format dokumen HTML.

Membuat tulisan menggunakan kode HTML prinsipnya sama saja dengan menggunakan fitur standar yang tersedia di Kompasiana. Hanya saja alih-alih mengklik ikon yang tersedia pada area menulis, kita mengetikkan kode perintah untuk menghasilkan format tulisan yang sama. Misalnya, bila ingin menebalkan teks maka kita tinggal memblok teks yang ingin ditebalkan lalu mengklik ikon B pada fitur yang tersedia di Kompasiana. Namun, pada dokumen HTML, ikon B sebagai “perintah” untuk menebalkan teks diganti dengan kode perintah yang harus diketik pada teks yang dimaksud.

Kode Dasar dalam HTML

Dokumen HTML tersusun dari kode perintah yang disebut tag. Tag ini merupakan kode perintah yang ditulis di antara dua tanda kurung sudut (“<” dan “>”). Biasanya tag ditulis berpasangan, terdiri dari tag pembuka (berupa teks “<nama tag>”) dan tag penutup (berupa teks “</nama tag>”). Tag pembuka berfungsi untuk mengaktifkan perintah, sedangkan tag penutup berfungsi untuk menonaktifkan perintah. Objek yang dikenai perintah tag diletakkan di antara tag pembuka dan tag penutup. Objek dapat berupa teks, gambar, atau video. Berikut ini tag HTML yang umum digunakan untuk menulis di Kompasiana.

1. Cetak tebal (bold): menggunakan tag b

   Tag pembuka: <b>

   Tag penutup: </b>

   Contoh: mencetak tebal teks “Kompasiana”, maka yang diketik adalah <b>Kompasiana</b>

2. Cetak miring (italic): menggunakan tag i

   Tag pembuka: <i>

   Tag penutup: </i>

   Contoh: mencetak miring teks “Kompasiana”, maka yang diketik adalah <i>Kompasiana</i>

3. Paragraf: menggunakan tag p

   Tag pembuka: <p>

   Tag penutup: </p>

   Contoh: membuat paragraf “Penggunaan kode HTML untuk membuat penomoran bertingkat sebenarnya tidak sulit, namun perlu ketelitian dan kesabaran.”

   Maka yang diketik adalah:

   <p>Penggunaan kode HTML untuk membuat penomoran bertingkat sebenarnya tidak sulit, namun perlu ketelitian dan kesabaran.</p>

4. Paragraf rata kiri-kanan

   Tag pembuka: <p align="justify">

   Tag penutup: </p>

   Contoh: membuat paragraf rata kiri-kanan contoh paragraf pada nomor 3, maka yang diketik adalah:

   <p align="justify">Penggunaan kode HTML untuk membuat penomoran bertingkat sebenarnya tidak sulit, namun perlu ketelitian dan kesabaran.</p>

   Namun, pengaturan rata kiri-kanan belum berfungsi di Kompasiana. Paragraf yang diberi tag paragraf rata kiri-kanan akan muncul dengan format rata kiri.

Kode HTML untuk Daftar yang Diberi Bullet

Untuk membuat daftar yang diberi bullet, tag yang digunakan ada 2, yaitu tag ul (untuk membantu mengingat, ul=unordered list) dan tag li (untuk membantu mengingat, li=list). Tag dibuka dengan kode <ul> lalu dilanjutkan dengan kode <li> di awal setiap baris dari daftar. Kemudian setiap baris tersebut diakhiri dengan kode </li>. Lalu daftar ditutup dengan kode </ul>.

Misalnya, kita hendak memberi bullet daftar yang terdiri dari kata “Menulis.”, “Membaca.”, “Menggambar.”, maka yang diketik adalah sebagai berikut.

<ul>

<li>Menulis.</li>

<li>Membaca.</li>

<li>Menggambar.</li>

</ul>

atau

<ul type=”Disc”>

<li>Menulis.</li>

<li>Membaca.</li>

<li>Menggambar.</li>

</ul>

Kedua contoh di atas akan menghasilkan daftar dengan bullet berbentuk lingkaran hitam. Tag ul merupakan tag default untuk memberi bullet daftar dengan bullet berbentuk lingkaran hitam. Berikut kode tag ul untuk tipe bullet yang berbeda.

1. Circle, tipe bullet berupa lingkaran dengan garis pinggir hitam

   Tag pembuka: <ul type=”Circle”>

   Tag penutup: </ul>

   Contoh: untuk memberi bullet daftar yang terdiri dari kata “Menulis.”, “Membaca.”, “Menggambar.”, maka yang diketik adalah sebagai berikut.

   <ul type=”Circle”>

   <li>Menulis.</li>

   <li>Membaca.</li>

   <li>Menggambar.</li>

   </ul>

2. Square, tipe bullet berupa kotak hitam

   Tag pembuka: <ul type=”Square”>

   Tag penutup: </ul>

   Contoh: untuk memberi bullet daftar yang terdiri dari kata “Menulis.”, “Membaca.”, “Menggambar.”, maka yang diketik adalah sebagai berikut.

   <ul type=”Square”>

   <li>Menulis.</li>

   <li>Membaca.</li>

   <li>Menggambar.</li>

   </ul>

Kode HTML untuk Daftar yang Dinomori

Untuk membuat daftar yang diberi nomor, tag yang digunakan ada 2, yaitu tag ol (untuk membantu mengingat, ol=ordered list) dan tag li. Tag dibuka dengan kode <ol> lalu dilanjutkan dengan kode <li> di awal setiap baris dari daftar. Kemudian setiap baris tersebut diakhiri dengan kode </li>. Lalu ditutup dengan kode </ol>.

Misalnya, kita hendak menomori (dengan angka Arab) daftar yang terdiri dari kata “Menulis.”, “Membaca.”, “Menggambar.”, maka yang diketik adalah sebagai berikut.

<ol>

<li>Menulis.</li>

<li>Membaca.</li>

<li>Menggambar.</li>

</ol>

Tag ol merupakan tag default untuk penomoran daftar dengan format angka Arab. Berikut kode tag ol untuk tipe penomoran yang berbeda (namun entah mengapa tag ini tidak berfungsi di Kompasiana. Di Kompasiana, daftar yang muncul tetap dalam format angka Arab. Hal ini terjadi pada artikel yang saya berikan tautannya di paragraf awal artikel ini).

1. Angka Romawi (i, ii, iii, … atau I, II, III, …)

   Tag pembuka: <ol type=”i”> atau <ol type=”I”>

   Tag penutup: </ol>

   Contoh: untuk menomori daftar yang terdiri dari kata “Menulis.”, “Membaca.”, “Menggambar.”, maka yang diketik adalah sebagai berikut.

   <ol type=”i”>

   <li>Menulis.</li>

   <li>Membaca.</li>

   <li>Menggambar.</li>

   </ol>

   atau

   <ol type=”I”>

   <li>Menulis.</li>

   <li>Membaca.</li>

   <li>Menggambar.</li>

   </ol>

2. Huruf (a, b, c, … atau A, B, C, …)

   Tag pembuka: <ol type=”a” > atau <ol type=”A”>

   Tag penutup: </ol>

   Contoh: untuk menomori daftar yang terdiri dari kata “Menulis.”, “Membaca.”, “Menggambar.”, maka yang diketik adalah sebagai berikut.

   <ol type=”a”>

   <li>Menulis.</li>

   <li>Membaca.</li>

   <li>Menggambar.</li>

   </ol>

   atau

   <ol type=”A”>

   <li>Menulis.</li>

   <li>Membaca.</li>

   <li>Menggambar.</li>

   </ol>

Penomoran Bertingkat

Pada prinsipnya penomoran bertingkat sama seperti pemberian bullet maupun nomor pada daftar, seperti yang disebutkan di atas. Namun, pada penomoran bertingkat, kita seperti memberi penomoran dalam penomoran. Karena itu, kita harus teliti menempatkan tag pembuka dan tag penutup. Penomoran bertingkat kerap kali gagal karena keliru menempatkan tag pembuka dan tag penutup.

Contoh, kita hendak menomori secara bertingkat (sebanyak dua tingkat) daftar di bawah ini dengan angka Arab.

• Menulis: cerpen, dongeng, novel.

• Membaca: buku cerita, koran, majalah.

• Menggambar: ilustrasi, karikatur, komik.

Katakanlah yang disebut tingkat pertama adalah teks “Menulis:”, “Membaca:”, dan “Menggambar:”. Sedangkan tingkat kedua adalah teks selanjutnya dari tingkat pertama.

Berikut langkah-langkah penomoran bertingkat untuk contoh di atas.

1. Buka Microsoft Word atau aplikasi sejenis untuk mengetik.

2. Siapkan lebih dulu tulisan yang akan dinomori bertingkat. Atur tulisan tersebut sedemikian rupa sehingga daftar dengan tingkat yang berbeda lebih menjorok ke dalam, lihat gambar 1.

   

3. Ketik tag pembuka (<ol>) di atas baris pertama, lihat gambar 2. Tag pembuka ini aktif untuk daftar tingkat pertama.

   

4. Ketik tag pembuka (<li>) di depan kata “Menulis:” (di awal baris pertama tingkat pertama), lihat gambar 3.

   

5. Ketik tag pembuka (<ol>) untuk daftar tingkat kedua, di bawah baris tulisan pertama, lihat gambar 4.

   

6. Ketik tag pembuka (<li>) di depan kata pertama pada tiap baris tulisan tingkat kedua, sekaligus ketik tag penutupnya (</li>), lihat gambar 5.

   

7. Ketik tag penutup (</ol>) untuk daftar tingkat kedua, di bawah baris terakhir tingkat kedua, lihat gambar 6.

   

8. Ketik tag penutup (</li>) baris pertama (dari daftar tingkat pertama) di bawah tag penutup (</ol>) daftar tingkat kedua, lihat gambar 7.

   

9. Lakukan langkah 4 s.d. langkah 8 untuk baris-baris berikutnya, lihat gambar 8.

   

10. Ketik tag penutup (</ol>) untuk daftar tingkat pertama, di bawah baris daftar terakhir, lihat gambar 9.

    

11. Sign in ke Kompasiana, lalu masuk ke area menulis.

12. Klik ikon tanda kurung sudut (<>) di sisi panel paling kanan (lihat gambar 10). Bila ikon ini disorot akan muncul teks “Source code”.

    

13. Selanjutnya muncul tampilan seperti gambar 11.

    

14. Copy seluruh teks yang sudah diberi kode HTML, lalu paste-kan ke area “Source code”, lihat gambar 12. Klik Ok.

    

15. Hasil penomoran bertingkat muncul seperti tampilan pada gambar 13.

    

Catatan:

• Dalam dokumen HTML, untuk mendapatkan kalimat dalam bentuk paragraf, pada kalimat tersebut harus di awali dengan tag pembuka <p> dan tag penutup </p>. Bila terlewat membubuhkan tag ini, maka kalimat pada paragraf satu dengan yang lainnya tidak terpisah dan akan terlihat sebagai satu paragraf.

• Angka (Arab, Romawi), huruf, dan bullet dapat dikombinasikan dalam penomoran bertingkat. Caranya, tinggal sesuaikan tag-nya dengan tag yang diinginkan. Namun, sejauh ini tipe penomoran menggunakan angka Romawi maupun huruf tidak dapat tampil sebagaimana mestinya di Kompasiana. Daftar yang dinomori dengan angka Romawi maupun huruf akan muncul dengan format angka Arab.

Selamat mencoba!

Alur Laut, 05 Juli 2015

(Beberapa gambar di-capture dari Kompasiana, selebihnya merupakan dokumen pribadi)