Mengubah Format Tulisan dengan XHTML dan CSS

Pengguna WordPress atau platform blog lainnya biasanya memanfaatkan fitur WYSIWYG pada saat menulis artikel pada blog mereka. Fitur tersebut memang sangat membantu dalam pengaturan format tulisan yang sedang dibuat. Namun, mengatur tampilan artikel dengan menggunakan kode XHTML dan CSS memiliki keunggulan serta kelebihan tersendiri dibanding dengan penggunaan fitur WYSIWYG.

Keunggulan dan Kekurangan

Keunggulan dari penggunaan metode ini adalah format tulisan bisa diubah dengan variasi yang bebas sesuai dengan keinginan kita. Dengan WYSIWYG, ubahan hanya dapat dilakukan secara terbatas pada kode-kode yang telah ada secara default ditanaman di dalamnya. Kekurangannya, kita harus mengetahui penggunaannya secara tepat termasuk macam-macam tag, properties dan fungsi masing-masing tag tersebut.

Mode Penulisan

Pengguna WordPress dapat memilih untuk menggunakan XHTML pada saat membuat/mengubah artikel dengan meng-klik tombol “HTML” pada toolbar form “Edit Post“. Pemilihan mode ini mungkin berbeda apabila blog Anda menggunakan platform berbeda seperti blogger atau TypePad.

Penggunaan XHTML dalam Tulisan

Toolbar yang tampil dapat juga digunakan untuk menyisipkan kode XHTML dalam tulisan yang sedang dibuat. Namun demikian, ada baiknya untuk mengerti cara penggunaannya secara lebih jelas. Berikut adalah beberapa trik dalam melakukan format tulisan.

1. Format Tulisan dengan Tag XHTML
   Tulisan dapat dibuat menjadi tebal dengan menggunakan tag <strong> sebelum kata/kalimat yang akan dibuat menjadi tebal dan ditutup dengan tag </strong>. Perhatikan contoh berikut;

   <strong>Tulisan ini akan ditebalkan</strong>

   akan menghasilkan : Tulisan ini akan ditebalkan.

   Tag XHTML lain untuk mengubah format tulisan dengan cara penggunaan yang serupa dengan contoh diatas antara lain:

   • <em> ... </em>: Membuat tulisan menjadi miring (Emphasis, Italic)
   • <sup> ... </sup>: Membuat superscript, contoh ²
   • <sub> ... </sub>: Membuat subscript, contoh ₂
   • <del> ... </del>: Mencoret tulisan, contoh Tercoret

Pengaturan tulisan dengan CSS

Penggunaan CSS memungkinkan kita untuk melakukan pengaturan tampilan tulisan secara lebih seksama. Kode XHTML yang diperlukan untuk menempatkan tag CSS secara langsung pada tulisan yang akan diformat adalah <span> ... </span> yang cara penggunaannya sama dengan contoh di atas.

Untuk mengubah format tulisan di dalamnya, maka perlu disisipi tag style di dalamnya sehingga penggunaannya menjadi:

<span style="">Tulisan yang akan diubah</span>

Perhatikan tanda quote (“) pada style="". Di antara tanda itulah tag CSS untuk mengubah format tulisan akan disisipkan. Beberapa tag CSS yang dapat digunakan untuk mengubah format tampilan adalah sebagai berikut:

1. font-size:, untuk mengubah ukuran, misalnya font-size: 14px
2. font-family:, untuk mengubah jenis font, misalnya font-family: Arial
3. font-weight:, untuk mengubah ketebalan, misalnya font-weight: bold
4. font-style:, untuk membuat style, misalnya font-style: italic

Untuk penulisan tag yang lebih dari satu, harus dipisahkan dengan tanda “;” seperti pada contoh berikut:

<span style="font-family: Arial; font-size: 28px">Tulisan yang akan diubah</span>

yang apabila ditampilkan akan menjadi seperti berikut:

Tulisan yang akan diubah

Tabel Contoh CSS untuk format tulisan

Banyak sekali macam tag CSS yang dapat digunakan dengan berbagai macam fungsi. Sebagian besar tag yang tidak terdapat dalam daftar dapat dipelajari dari website W3. Anda juga dapat men-download Daftar lengkap kode-kode Cascading Stylesheet dari sini.