Cara Membuat Text HTML Tanpa Format (tag pre dan tag code)
HTML <kbd> Untuk Input Keyboard
Elemen HTML <kbd> mewakili masukan pengguna, seperti masukan keyboard atau perintah suara.
Teks yang dikelilingi oleh tag <kbd> biasanya ditampilkan dalam font monospace bawaan browser:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>Elemen kbd merupakan input pengguna:</p>
<p>Simpan dokumen dengan menekan <kbd>Ctrl + S</kbd></p>
</body>
</html>
HTML <samp> Untuk Output Program
Elemen HTML <samp> mewakili keluaran dari program atau sistem komputasi.
Teks yang dikelilingi oleh tag <samp> biasanya ditampilkan dalam font monospace bawaan browser:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>Elemen samp mewakili keluaran dari program atau sistem komputasi:</p>
<p>Jika Anda salah memasukkan nilai, program akan kembali <samp>Error!</samp></p>
</body>
</html>
HTML <code> untuk kode komputer
Elemen HTML <code> mendefinisikan fragmen kode komputer.
Teks yang dikelilingi oleh tag <code> biasanya ditampilkan dalam font monospace bawaan browser:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>Programming code example:</p>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</body>
</html>
Perhatikan bahwa elemen <code> tidak melestarikan spasi ekstra dan jeda baris.
Untuk mengatasinya, Anda dapat memasukkan elemen <code> di dalam elemen <pre>:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
</body>
</html>
HTML <var> Untuk Variabel
Elemen HTML <var> mendefinisikan sebuah variabel.
Variabel tersebut dapat berupa variabel dalam ekspresi matematis atau variabel dalam konteks pemrograman:
Contoh Code:
<!DOCTYPE html>
<html>
<body>
<p>Einstein menulis: <var>E</var> = <var>mc</var><sup>2</sup>.</p>
</body>
</html>
HTML Computer Code Elements
| Tag | Description |
|---|---|
| <code> | Mendefinisikan kode pemrograman |
| <kbd> | Mendefinisikan masukan keyboard |
| <samp> | Mendefinisikan output komputer |
| <var> | Mendefinisikan sebuah variabel |
| <pre> | Mendefinisikan teks terformat |
Belajar HTML Secara Lengkap Disini:
1. Tutorial HTML Bagian 1
2. Tutorial HTML Bagian 2