Cara Menulis Kode Program Pada HTML

Pada tutorial kali ini kita akan membahas mengenai cara menulis kode program pada HTML. Sebelumnya kita telah membahas mengenai penggunaan kutipan pada HTML. Disisi lain, kita sering menggunakan tulisan dengan format seperti kode komputer pada HTML.

1. Menggunakan Tag <code> pada HTML

Anda bisa menggunakan elemen tag HTML <code> untuk mendefinisikan sebuah potongan kode dari program.

Contoh Kode:

<!DOCTYPE html>
<html>
    <body>
        <p>Kode program :</p>
        <code>
        var x = 2;<br>
        var y = 6;<br>
        document.getElementById("demo").innerHTML = x + y;
        </code>
    </body>
</html>

Output Kode:

cara menulis kode program pada HTML

Perlu diingat bahwa, elemen <code> tidak memberikan ekstra spasi dan tidak memberikan garis break. Untuk mengatasi hal ini, Anda bisa meletakan elemen <code> didalam sebuah elemen <pre>.

Menggunakan Elemen <pre>

Contoh Kode:

<!DOCTYPE html>
<html>
    <body>
    <p>Elemen code tidak memberikan spasi dan line break, untuk mengatasi ini anda bisa menggunakan elemen pre diantara code </p>
    <pre>
        <code>
        var x = 5;
        var y = 6;
        document.getElementById("demo").innerHTML = x + y;
        </code>
    </pre>
    </body>
</html>

Output Kode:

cara menulis kode program pada HTML

2. Menggunakan Tag <samp>

Anda bisa menggunakan elemen <samp> untuk mendefinisikan sampel keluaran dari program komputer.

Contoh Kode:

<!DOCTYPE html>
    <html>
    <body>
        <p>Elemen samp akan memberikan contoh keluaran dari sebuah program komputer.</p>
        <samp>
        ayamkoding.com login: Dec 24 02:28:23 Ubuntu 14.04-3hd3h3jh++bjbD+3duadjkajd+nadbajdba+++++reslog-v3.232
        </samp>
    </body>
</html>

Output Kode:
cara menulis kode program

3. Menggunakan Tag <kbd> untuk input keyboard

Anda bisa memakai elemen kbd untuk representasi dari input keyboard.

Contoh Kode:

<!DOCTYPE html>
<html>
    <body>
        <p>Elemen kbd merepresentasikan input keyboard: </p>
        <p><kbd>File | Open...</kbd></p>
    </body>
</html>

Output Kode:

cara menulis kode program

4. Menulis Variabel pada HTML dengan <var>

Anda bisa menggunakan elemen HTML <var> untuk mendefinisikan sebuah variable. Variabel disini dapat menjadi sebuah notasi matematika ataupun sebuah variable dalam programing. Anda bisa menulis rumus fisika dengan menggunakan elemen tag ini.

Contoh Kode:

<!DOCTYPE html>
<html>
    <body>
        <p>
        Rumus Einstein : <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
        </p>
    </body>
</html>

Output Kode:

cara menulis rumus fisika matematika

Ringkasan Cara Menulis Kode Program :

<code> : untuk kode program
<kbd>    : untuk keyboard input
<var>   : untuk menulis variable
<samp> : untuk komputer output program
<pre>    : teks preformatted

Demikian tutorial pemrograman HTML mengenai cara menulis kode program. Selanjutnya kita akan membahas mengenai cara menggunakan komentar pada HTML. Semoga tutorial ini bermanfaat dan terima kasih.