Belajar HTML Part 8 - Penulisan Kode-Kode Komputer

Assalamu'alaikum Warahmatullaahi Wabarakatuh

Pada artikel sebelumnya, kita telah membahas tentang membuat kutipan atau quotations. Selanjutnya di sini kita akan mempelajari tentang bagaimana menulis kode-kode komputer.

Normalnya, sebuah halaman web menampilkan sebuah teks dengan pemformatan tulisan biasa. Namun untuk menulis sebuah kode, kita membutuhkan teks yang tidak terpengaruh oleh pemformatan tulisan. Melainkan ditampilkan apa adanya. Tag-Tag yang biasa digunakan untuk penulisan kode-kode komputer semacam ini di antaranya tag <kbd>,<samp>,<var>,<code>, dan <pre>.
Untuk lebih jelasnya, langsung saja kita praktekkan. Silahkan buka aplikasi Notepad++ Anda

A. Tag <kbd> untuk input Keyboard

Untuk penulisan sebuah inputan dari keyboard, kita bisa menggunakan tag <kbd>. Coba  tulis contoh script berikut :

<p> Tag kbd merepresentasikan input dari keyboard, misal :<br /> 
Ketik <kbd>Crrl + Alt + Del</kbd> untuk merestart komputer</p>

Simpan dengan nama kbd.html dan jalankan pada browser. Berikut tampilan yang dihasilkan :

B. Tag <var> dan <samp> untuk Penulisan Variabel dan Contoh Outputnya.

Silahkan ketik contoh script berikut :

<p> Tag var digunakan untuk menulis sebuah variabel, dan tag sam digunakan untuk menulis contoh atau sampel dari sebuah output. Misal :<br /> Jika dalam sebuah pemrograman, ditulis variabel <var>Hari</var> dan <var>tanggal</var>, maka contoh output yang dihasilkan adalah <sam>Kamis, 4 Desember 2015</sam></p>

Simpan dengan nama computercode.html lalu jalankan pada web browser. Berikut hasilnya :

C. Tag <code> untuk Menulis script atau kode pemrograman.

Contoh, tulis script di bawah ini :

<code>
 var x = 5; var y = 6;
 document.getElementById("demo").innerHTML = x + y; 
</code>

Simpan dengan nama computercode.html kemudian jalankan pada browser Anda. Berikut hasilnya :

Namun, perlu diingat bahwa tag <code> ini tidak memproses Enter atau spasi tambahan. Oleh karena itu kita membutuhkan Tag <pre> untuk bantuan. Contoh, silahkan ubah file sebelumnya menjadi seperti berkut :

<pre>
 <code>
  var x = 5; var y = 6;
  document.getElementById("demo").innerHTML = x + y;
 </code> 
</pre>

Simpan lalu buka hasil perubahan yang ditulis. Berkut hasilnya :

Kita lihat dengan bantuan tag <pre>, browser akan memproses pengetikan enter dan spasi tambahan.

Demikian Seri Belajar HTML Penulisan Kode-Kode Komputer, semoga bermanfaat. Terima kasih,

Wassalamu'alaikum Warahmatullaahi Wabarakatuh.