Cara Membuat HTML Experiment Engine Untuk Belajar Coding HTML Secara Offline

Jokam-Informatika.com - Sobat tentunya sudah tidak asing dengan yang namanya HTML bukan ? di sini saya akan memberikan anda tutorial cara untuk membangun form yang berguna untuk pembelajaran pemrograman html para pengunjung website anda. Apabila anda seorang administrator website yang berjenis kan teknologi maka cara ini cocok untuk anda terapkan pada website, selain itu dengan adanya mesin ini maka pengunjung website anda dapat mempraktekkan coding yang anda berikan secara langsung tanpa repot-repot membangun sebuah server lokal pada komputer mereka.

Keunggulan dari mesin ini dapat menjalankan Kodingan HTML secara langsung hingga menjadi sebuah tampilan yang seharusnya dimuat oleh browser, kebanyakan mereka menggunakan sebuah server lokal yang memanfaatkan aplikasi "Xampp" untuk menjalankannya. Dengan hadirnya mesin ini maka anda dapat mempraktekkan coding html anda kepada browser secara langsung sehingga tidak terlalu memakan banyak memori yang dapat menyebabkan komputer anda menjadi lemot.

Bagaimanakah cara untuk membangun HTML Experiment Engine untuk menjalankan coding HTML ?

Simak ulasan dibawah ini untuk membuatnya,

HTML - Memiliki kepanjangan yakni Hyper Text Markup Language, adalah sebuah pemrograman yang diciptakan untuk mendesain sebuah tampilan website agar dapat digunakan oleh banyak orang di dalam sebuah server. Pada umumnya pemrograman ini digunakan untuk menampilkan data yang berjenis kan gambar, video ataupun text. Namun tak hanya itu karena sekarang sudah banyak dikembangkan oleh pakar ahli sehingga dapat digunakan untuk keperluan yang lain misalnya untuk memutar musik, bermain game online, bekerjasama dengan aplikasi, menjalankan animasi dan lain sebagainya. Apa terkecuali membangun sebuah Web Tools yang digunakan untuk membantu pekerjaan manusia terutama dalam hal pemrograman dan pembuatan desain website.

Mesin ini sudah di testing dan sudah lulus uji kinerja maupun responsiveablenya pada saat bekerja. Berikut ini merupakan cara untuk membuatnya :

Masuk pada dashboard Blogger.

KLIK DISINI

Kemudian klik tab "Pages atau Halaman".
Kemudian untuk membuat halaman baru maka anda dapat menekan tombol "New page".
Setelah anda sudah pada halaman editor maka klik tab "HTML".
Lalu masukan script berikut ini kedalamnya :


<style type="text/css">
textarea, iframe {
 border: 2px solid #ddd;
    height: 500px;
    width: 100%;
 }
</style>

<h3>HTML Experiment Engine</h3>
<p>
<div style="text-align: center; width: 100%; style="margin: 0 auto; padding: 55px 0;>
<p>Apakah anda pengguna Mobile Phone ?</p>
Klik Disini : <button onclick="" style="margin-right: 10px;" type="button"><b>Mobile Version</b></button>
</div>
<br />
<div style="text-align: center; width: 100%; style="margin: 0 auto; padding: 55px 0;>
<button onclick="runCode();" style="margin-right: 10px;" type="button"><b>RUN</b></button>
<button onclick="code_clear();" style="margin-left: 10px;" type="button"><b>CLEAR</b></button>
</div>

<table width="100%" border="0" cellspacing="5" cellpadding="5">
 <tr>
  <td width="50%" align="left" scope="col"><div style="text-align: center;"><h3>INPUT</h3></td>
  <td width="50%" align="left" scope="col"><div style="text-align: center;"><h3>HASIL</h3></td>
 </tr>
 <tr>
  <td>
   <strong>Masukan Kode Disini :</strong>
   <form>
    <textarea name="SourceCode" id="SourceCode"></textarea>
   </form>
  </td>
  <td>
   <strong>Tampilan Kode</strong>
   <br />
   <br />
    <iframe name="TargetCode" id="TargetCode"></iframe>
  </td>
 </tr>

</table>
</p>

<script type="text/javascript">
    function code_clear()
 {
  var wtarea=document.getElementById('SourceCode');wtarea.value='';
  var INPUT = document.getElementById('SourceCode').value;
  var iframe=document.getElementById('TargetCode');iframe.value='';
  iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
        iframe.document.open();
        iframe.document.write(INPUT);
        iframe.document.close();
 }

 function runCode()
    {
  var content = document.getElementById('SourceCode').value;
        var iframe = document.getElementById('TargetCode');
        iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
        iframe.document.open();
        iframe.document.write(content);
        iframe.document.close();
        return false;
    }

    runCode();
</script>

Setelah selesai maka beralihlah ke tab "Compose", barulah anda klik "Publikasikan" untuk membuatnya.
Sesudah membuatnya maka bisa anda cek dengan mengunjunginya dan mencobanya secara langsung pada halaman.

Anda bisa mempraktekannya secara offline dengan mematikan koneksi internet anda pada halaman tersebut, akan tetapi untuk gambar maka anda perlu menyiapkannya pada harddisk anda sendiri agar gambar dapat tampil karena anda menggunakan metode offline. Apabila anda menggunakan metode Online maka anda tidak memerlukan harddisk untuk menyimpan gambar.