Friday, May 8, 2015

Cara Menampilkan Kode HTML Pada Artikel

HTML adalah singkatan dari Hypertext Markup Language. HTML adalah kode yang dipakai untuk membuat halaman website atau blog. Saat kita membuat sebuah artikel tentang tutorial yang didalamnya berisi contoh kode HTML maka diperlukan teknik khusus untuk membuat kode HTML bisa tampil pada artikel blog tersebut. Jika tidak maka kode HTML akan dirender oleh browser dan tidak tampil pada halaman postingan.

Untuk menampilkan kode HTML pada blog kita harus membuat karakter pada HTML bebas dari rendering kode HTML pada browser. Istilah ini disebut dengan HTML Escape. Misalnya karakter "<" dan ">" yang dipakai untuk menulis tag HTML seperti <body> akan diproses atau difilter secara otomatis oleh browser. Untuk mengatasi hal itu digunakan karakter pengganti seperti "<" diganti dengan "&lt;" dan ">" diganti dengan "&gt;". Hal ini juga berlaku ketika kita akan menyisipkan kode PHP dan Javascript pada postingan artikel.

Aturan diatas membuat penulis blog khususnya saya sedikit kesulitan ketika harus menulis banyak kode HTML pada artikel sebagai bagian dari penjelasan sebuah tutorial misalnya. Agar pekerjaan ini menjadi lebih mudah dan bisa dilakukan secara instan, kita bisa menggunakan berbagai tool pemformat HTML Escape yang ada di internet. Kita tinggal kopi saja kode yang akan ditampilkan pada blog kemudian klik tombol dan jadilah kode program kita sudah bebas dari rendering HTML oleh browser.

Cara memformat kode HTML, PHP dan Javascript agar menjadi karakter HTML Escape :
  1. Buka situs yang menyediakan tool untuk format kode agar HTML Escape, misalnya favorit saya di http://codeformatter.blogspot.com/.
    Tampilan situs http://codeformatter.blogspot.com/
  2. Kopi kode HTML yang akan diformat pada textarea dibawah keterangan "Paste Here Your Source Code".
  3. Atur beberapa opsi format sesuai dengan yang diinginkan, misalnya kalau saya bisasa ubah setingan "Remove blank lines" menjadi NO agar jeda antar baris program tidak hilang.
  4. Setelah semua siap, klik tombol "Format Source Code" untuk menjalankan proses format kode.
  5. Sistem perangkat lunak pemformat teks ini menggunakan kode javascript jadi saat melakukan proses format kita tidak mengirimkan kode ke server melainkan hanya diproses pada komputer klien (komputer yang kita pakai) saja.
  6. Kode hasil pemformatan akan ditaruh pada textarea dibawah keterangan "Copy Formatted Source Code".
  7. Silahkan kopi kode tersebut untuk ditaruh pada halaman postingan artikel blog.
  8. Cara menaruh kode hasil format HTML Escape ini adalah dengan mengubah mode editor teks pada halaman Entri Baru menjadi mode HTML dulu baru kemudian dipaste pada artikel.
Untuk mempercantik tampilan kode HTML diatas, bisa dipadukan dengan teknik Cara Menampilkan Source Code Pada Blogspot pada artikel sebelumnya. Dengan demikian kode HTML, PHP dan Javascript pada tutorial yang kita bagikan agar lebih jelas terbaca dan dipahami oleh pengunjung blog yang membutuhkan kode tersebut.

0 komentar

Post a Comment