Pandeglang Blog

Menjadi bagian dari arus informasi dunia

Cara menampilkan kode HTML pada post

22 Komentar

Tulisan ini berisi tentang Cara menuliskan, memasang dan menampilkan kode HTML dalam postingan atau halaman web

Seperti yang sudah kita ketahui bahwa kode2 HTML selalu tersembunyi dibalik sebuah halaman web, meski begitu karena fungsi dari tag-tag HTML itulah sebuah browser bisa membuka dan menampilkan halaman web dengan baik.

Biasanya tujuan Kode HTML ditampilkan dalam sebuah postingan untuk memberi contoh dari sebuah penjelasan, menshare sebuah link, script iklan atau widget untuk dicopy paste dan maksud-maksud lainnya. Untuk menampilkan kode html dalam postingan kita harus “melumpuhkan” atau menon-aktikan kode tersebut sehingga menjadi tidak berfungsi dan tampil di halaman web sebagai teks karakter biasa.

Cara yang umum digunakan untuk menampilkan kode HTML ialah dengan mengganti simbol2 dari HTML tersebut menjadi sebuah wujud karakter HTML, sehingga browser pun hanya akan mengenali tag-tag tersebut sebagai sebuah simbol karakter, bukan sebagai sebuah TAG HTML. Misalnya untuk menampilkan kurung sudut buka ( < ), kurung sudut tutup ( > ) dan kode2 lainnya diubah penulisannya menjadi seperti ini :

< = &lt;
> = &gt;
/ = & #47;
] = & #93;
[ = & #91;
" = & #34;
' = & #39;
& = &amp;

Contoh : &lt;html&gt;konten&lt;/html&gt; menjadi

<html>konten</html>

Proses ini disebut encoding atau parsing Cara yang sama berlaku juga jika kita akan memasukan kode HTML ke dalam Teks area. Untuk memudahkan copy paste.

Cara yang baik dalam menampilkannya pada post adalah dengan memisahkannya dengan spasi, bahasa kerennya monospaced types tujuannya agar pembaca tahu bahwa yang ditampilkan adalah sebuah kode. Cara memisahkannya pun tak perlu satu2 persatu karena ada tag HTML yang berfungsi untuk itu yakni <code>KODE</code> menjadi KODE

Untuk membuat kode terlihat seperti berada dalam kotak cukup tambahkan tag <pre>KODE DALAM KOTAK</pre> Contoh :

<b>textbold</b>

Kalau merasa tidak hapal dengan kode2 pengganti tersebut atau terlalu ribet jangan khawatir karena sudah banyak tersedia online encoder decoder HTML file,sebuah free tool yang bisa digunakan untuk mengkonversi wujud keberadaan HTML.silahkan masuk ke salah satu alamat berikut :

http://centricle.com/tools/html-entities
http://htmlentities.net
http://encode.ykub.xtgem.com

Pertama-tama masukan file HTMLnya lalu pilih encode untuk membuat proses pemecahan kode/symbol html menjadi teks biasa, Atau decode untuk proses pembalikan dari kode teks html biasa menjadi kode html kembali (vice versa). Copy hasilnya dan pastekan ke dalam postingan atau teks area. Untuk lebih jelasnya lagi silahkan kunjungi panduan WordPress untuk menulis kode dalam postingan

Demikian sedikit tips dan tutorial mengenai cara menampilkan kode HTML dalam postingan, semoga bermanfaat.

Penulis: Nourly

Bergabung di wordpress sejak 2 april 2012 Just a mobile blogger from Pandeglang.

22 thoughts on “Cara menampilkan kode HTML pada post

  1. I’ve been browsing online more than three hours today, yet I never found any interesting article like yours Cara menampilkan kode HTML pada post Pandeglang Blog. It is pretty worth enough for me. Personally, if all web owners and bloggers made good content as you did, the internet will be much more useful than ever before.

  2. Woah! I’m really digging the template/theme of this site. It’s simple, yet effective.
    A lot of times it’s tough to get that “perfect balance” between usability and visual appearance. I must say you have done a very good job with this. In addition, the blog loads extremely fast for me on Firefox. Excellent Blog!

  3. Ping-balik: Blog Open Source » Karakter HTML dan cara menulis nya

  4. Hello There. I found your blog using msn. This is a really well written article. Ill make sure to bookmark it and return to read more of your useful information. Thanks for the post. I will definitely return. agkdcekekddc

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s