Penjelasan Dan Cara Membuat Alat HTML Editor Di Blog

Jika kamu seorang blogger atau bekerja dalam industri teknologi informasi, mungkin kamu sudah sering mendengar kata 'HTML'. HTML (Hypertext Markup Language) banyak digunakan untuk membuat sebuah konten di internet.

Menggunakan bahasa pemrograman seperti HTML tentu bukan hal mudah dan rawan salah. Untuk itu perlu dilakukan pengecekan terhadap setiap penulisan dan tampilan hasil coding yang kamu buat untuk blog mu. Bila kamu ingin mengetahui apakah hasil penulisan mu sudah benar atau memiliki kesalahan, kamu dapat menggunakan aplikasi khusus seperti Adobe Dreamweaver tetapi bila kamu ingin melihat hasil coding mu seperti apa tampilannya di blog, maka kamu bisa menggunakan sebuah HTML Editor.

Cara Membuat Alat HTML Editor Di Blog

Apa itu HTML Editor?

Dilansir dari Wikipedia, HTML Editor adalah sebuah program yang berfungsi untuk mengubah sebuah bahasa pemrograman HTML. HTML Editor juga dapat memunculkan tampilan dari hasil coding untuk melihat apakah konten HTML yang dibuat sudah benar atau masih memiliki kesalahan.

Cara Membuat Alat HTML Editor Di Blog

HTML Editor ini mungkin tidaklah seperti HTML Editor yang berbentuk software dan sejenisnya tetapi tetap dapat kamu gunakan untuk memvalidasi kode HTML yang kamu buat sudah benar atau masih memiliki kesalahan.

Berikut ini merupakan cara membuat alat HTML Editor di Blog.

• Buat halaman/postingan baru
• Pilih metode penulisan dengan HTML

• Copy-Paste kode berikut ini.

<form method="post" name="form1">
<textarea name="code" onclick="focus(this.code)" style="border: solid 1px #cccccc; box-shadow: 5px 5px 5px #CCCCCC; color: black; font-family: Courier New, Monospace, Courier; font-size: 14px; font-weight: normal; height: 400px; margin: 0px; padding: 5px; scroll: auto; width: 100%;"></textarea></form>
<button onclick="preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Preview</button><button onclick="window.document.form1.code.value='';preview.document.write (document.getElementsByTagName ('TEXTAREA')[0].value); preview.document.close(); preview.focus()">Clear </button><span style="color: white;">
<br />
<iframe frameborder="0" name="preview" src="about:blank" style="background: #ffffff; border: solid 1px #cccccc; box-shadow: 5px 5px 5px #CCCCCC; height: 400px; padding: 5px; width: 100%;"></iframe>

Kode berwarna kuning merupakan ukuran dari text box, silahkan ubah sesuai keinginan mu.

• Publikasikan halaman/postingan tersebut

Contoh Alat HTML Editor

***

Bila kamu memiliki pertanyaan seputar cara membuat alat HTML Editor di blog, silahkan tulis dikolom komentar ya.

Baca juga: