Tutorial Belajar Praktek Cara Encode Decode HTML

dalam HTML
Hosting Murah Berkualitas

Pada kesempatan kali ini saya akan membahas tentang bagaimana caranya melakukan Encode dan Decode pada script HTML. Bahasan pada artikel sengaja saya buat sebagai paparan lanjutan dari artikel sebelumnya yang sudah saya tulis yaitu tentang Cara Membuat Warna Background Text Pada Postingan Artikel Di WordPress. Pada artikel sebelumnya tadi saya sudah memberikan penjelasan tentang bagaimana caranya memberi warna pada background sebuah teks yang akan di posting dalam sebuah artikel blog anda. Tujuan dari pemberian warna suatu teks tadi sudah dijelaskan pada artikel sebelumnya, yaitu untuk membedakan antara bagian-bagian teks biasa dengan bagian teks yang dianggap sangat penting yang harus diketahui oleh pengunjung website.

Sebelum kita masuk pada materi praktek bagaimana cara melakukan encode dan decode pada sebuah script HTML, sebaiknya anda tahu dulu apa itu pengertian dari  Encode HTML dengan Decode HTML. Berikut adalah penjelasannya.

Encode HTML : yaitu sebuah proses konversi untuk mengkodekan kembali kode HTML yang asli ke bentuk kode yang lain. Secara sederhananya adalah kita mengubah beberapa tag HTML yang asli kebentuk kode atau karakter yang lain dengan tujuan agar kode-kode HTML asli tadi bisa ditampilkan dalam sebuah postingan dalam bentuk HTML aslinya. Harus anda ketahui kenapa kita harus melakukan Encode HTML ini? jawabannya adalah karena jika anda menampilkan langsung kode HTML murni langsung pada postingan artikel anda, maka kode-kode HTML yang akan anda tampilkan tadi tampilannya tidak akan sesuai dengan kode HTML aslinya, jadi akan ada kode-kode HTML anda yang akan hilang ketika ditampilkan. Bahkan mungkin juga kode HTML tadi tidak tampil sama sekali pada postingan artikel anda. Atau mungkin juga blog dan website anda nantinya akan tampak kacau dan aneh tampilannya.

Decode HTML : yaitu merupakan kebalikannya dari proses Encode HTML tadi diatas. Secara sederhananya adalah hasil dari Encode HTML diatas dikembalikan lagi ke kode HTML aslinya. yaitu kode atau tag HTML murni yang biasa dipakai untuk menjadi hiasan dan pernak-pernik pada sebuah situs seperti contoh misalnya adalah kode HTML murni ini bisa digunakan membuat link, menampilkan gambar, teks besar, teks cetak tebal, teks garis miring, teks garis bawah dan untuk keperluan lain-lainnya dalam sebuah halaman website. Intinya jika kita ingin menampilkan kode atau tag HTML ini pada sebuah halaman yang belum mendukung Syntax Highlighter maka kita harus meng-convert beberapa Tag HTML tadi menjadi bentuk karakter lain yang disebut dengan Encode tadi, agar kode-kode dan tag HTML tadi dapat ditampilkan sebagai Decode. Bagaimana anda masih bingung dengan istilah-istilah yang saya sebutkan di paragraf ini tadi? jangan takut, lambat laun juga seiring waktu belajar anda nantinya akan mengerti juga akhirnya. Sekarang lupakan dulu istilah-istilah asing tadi dan mari kita terus lanjutkan ke Praktek Cara Encode Decode HTML ini.

Nah, sekarang untuk melanjutkan materi praktek cara encode decode HTML ini, saya akan mengambil sebagian materinya dari postingan artikel saya sebelumnya diwebsite peterwebs.com ini yang berjudul Cara Membuat Warna Background Text Pada Postingan Artikel Di WordPress. Pada artikel sebelumnya ini saya sudah memnjelaskan bagaimana caranya membuat warna background teks pada postingan artikel di wordpress, namun pada prakteknya seluruh kode-kode yang sudah di copy paste pada teks editor wordpress anda tadi tidak muncul semua dihalaman website dan blog anda. Yang muncul di halaman webiste dan blog anda hanya teks yang sifatnya emang teks biasa, namun kode-kode HTML yang ikut di copy paste tadi tidak ditampilkan pada halaman website dan blog anda. Nah agar Kode-kode HTML tadi bisa muncul juga di halaman website dan blog anda sebagai teks biasa maka kode-kode dan tag HTML tadi harus di Encode dulu menjadi kode lain.

Sekarang untuk mencoba Tutorial Belajar Praktek Cara Encode Decode HTML ini, kita ambil contoh kode pertama dari halaman sebelumnya tadi Cara Membuat Warna Background Text Pada Postingan Artikel Di WordPress yaitu contoh kodenya adalah sebagai berikut :

<div style=”color: blue; background: #ADE4AD; border: 2px dashed #006600; margin: 10px; padding: 5px;”>
~~tulis kalimat yang ingin anda tampilkan disini~~
</div></p>

Silahkan anda copy semua kode-kode HTML yang akan kita coba untuk di Encode diatas, lalu anda klik di sini untuk membuka Tools Encode Decode HTML yang sudah saya siapkan di halaman lain. Tampilan Tools nya adalah seperti contoh gambar dibawah ini.

tools-decode-encode-html

Lalu anda paste kode-kode yang sudah anda copy tadi tepat dibawa tulisan “Masukkan Teks HTML dibawah sini”. Untuk jelasnya silahkan lihat contohnya melalui gambar dibawah ini.

 paste-tools-decode-encode-html

Setelah kode HTML tadi dipaste, maka disana akan ada 2 pilihan option button yang tersedia yaitu Do HTML Encoding dan Do HTML Decoding. Karena saat ini anda akan melakukan Encoding untuk keperluan menampilkan kode diatas persis seperti kode yang anda paste tadi dihalaman website dan blog anda, maka silahkan anda pilih Do HTML Encoding.

Setelah Do HTML Encoding ini dipilih maka silahkan anda klik tombol Convert Text itu untuk melanjutkan meng-encode kode-kode HTML tadi.

Nah, setelah anda meng-klik tombol Convert Text tadi, maka akan muncul kode-kode lain dibawah kode HTML anda yang aslinya, yang mana kode-kode ini merupakan hasil generate dari Proses Encoding yang sudah anda lakukan tadi. Nah, Kode-kode hasil Encoding itulah yang nantinya akan anda masukkan pada text editor wordpress milik anda tadi agar kode-kode HTML tadi tampil dengan lengkap sebagai teks biasa di halaman website dan blog anda. Untuk melihat hasil Encoding yang sudah anda lakukan tadi, anda bisa lihat pada gambar dibawah ini.

output-tools-encode-html

bagaimana mudah kan bagaimana cara meng-encode kode-kode HTML anda? Sekarang dengan Tutorial Belajar Praktek Cara Encode Decode HTML dari saya ini, anda bisa menampilkan kode-kode HTML anda sebagai teks di postingan halaman artikel anda. Dengan cara Encode HTML ini Anda bisa ngeshare kode-kode HTML sesuka anda ke teman-teman anda dengan memajangnya langsung dihalaman website/blog anda. Dengan demikian teman anda hanya tinggal melakukan copy paste kode HTML tersebut melalui postingan artikel di website dan blog anda.

Dengan anda mempraktekkan Tutorial dari saya ini, tentunya sekarang harusnya anda sudah tahu bagaimana caranya mengembalikan kode hasil Encoding tadi ke bentuk aslinya? Iya benar dengan cara mem-paste hasil Encodingan tadi, lalu pilih option ke 2 yaitu option Do HTML Decoding.

Nah, sekarang anda sudah faham bukan bagaimana caranya Meng-Encode kode-kode HTML anda agar bisa tampil dengan lengkap di halaman website/blog anda tanpa ada satu huruf pun yang hilang. Jadi kesimpulannya adalah dengan memasukkan hasil Encoding dari kode-kode HTML tadi, maka kode-kode HTML yang anda masukkan pada halaman postingan anda akan diperlakukan sebagai teks biasa, sama seperti teks-teks yang lain yang biasa tampil pada sebuah halaman blog dan website . Namun jika kode-kode HTML tadi tidak anda Encoding terlebih dahulu dengan Tools HTML Encoder Decoder yang saya buat tadi, maka kemungkinan kode-kode HTML tadi tidak akan muncul pada postingan artikel blog dan website anda.

Semoga Bermanfaat dan selamat mencoba.

Tags: #belajar html #blogging #html #kode html #membangun website #tutorial website #web design

author
Penulis: 
Saya adalah Seorang Blogger yang aktif dan konsen di bidang programming, web design, graphic design dan bisnis online. Saya juga tertarik pada bidang Parenting, Kesehatan dan informasi bermanfaat lainnya.
Website Tempat Download Gambar Gratis
Website Tempat Download Gambar Gratis
Pada kesempatan kali ini, saya akan berbagi
Cara Posting Artikel Di Website Berbasis WordPress
Cara Posting Artikel Di Website Berbasis WordPress
Pada saat yang lalu saya sudah membahas
Cara Posting Artikel Di Blogspot
Cara Posting Artikel Di Blogspot
Setelah anda mengikuti artikel saya yang berjudul
Cara Membuat Blog Gratis Dengan Blogspot Untuk Blogger Pemula
Cara Membuat Blog Gratis Dengan Blogspot Untuk Blogger Pemula
Berdasarkan permintaan temen saya dan subscriber di
Konfigurasi WordPress Yang Penting Untuk Diketahui
Konfigurasi WordPress Yang Penting Untuk Diketahui
Pada kesempatan yang lalu saya sudah membahas
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Menambahkan Banyak Domain Dalam Satu Hosting Dengan Add-On Domain
Bagi anda yang ingin memiliki banyak website
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Cara Merubah DNS Atau Name Server Dari Domain Yang Baru Di Beli
Langkah pertama yang harus anda lakukan ketika
Cara Membeli Domain Dan Hosting
Cara Membeli Domain Dan Hosting
Salah satu persyaratan untuk bisa memiliki sebuah
Cara Install WordPress Di Localhost Dengan Xampp
Cara Install WordPress Di Localhost Dengan Xampp
Sebagai lanjutan dari pembelajaran membangun website, kali
  1. author

    ayoeng prayetno2 tahun yang lalu

    Thank,,,,
    Atas info nya!!!
    bikin aku ga mudeung,,,,,,wkwkwk!!!!
    Maklum pemula,,,,,,,

    Balasan
    • author
      Penulis

      Apit Saepulloh2 tahun yang lalu

      nanti kapan-kapan saya bikin tutorial dalam bentuk videonya biar mudeng..yang penting beli pc nya dulu biar semangat 😀

      Balasan

Beri komentar "Tutorial Belajar Praktek Cara Encode Decode HTML"

Baca juga×

Top