Beranda / Pemrograman / Web / Panduan Lengkap HTML Computer Code Elements (Tutorial HTML Part 44)

Panduan Lengkap HTML Computer Code Elements (Tutorial HTML Part 44)

Kalau lo sering ngoding atau belajar HTML, pasti sering ketemu sama elemen-elemen khusus buat nulis kode di dalam halaman web. Nah, di artikel ini, kita bakal bahas elemen-elemen HTML yang sering dipakai buat nampilin kode, output program, sampai variabel.

Langsung aja, yuk kita bahas satu per satu!

1. HTML <kbd> Buat Keyboard Input

Elemen <kbd> dipakai buat nunjukin input yang harus diketik sama user di keyboard. Biasanya, ini sering dipakai di dokumentasi atau tutorial. Contohnya gini:

<p>Tekan <kbd>Ctrl</kbd> + <kbd>C</kbd> buat copy teks.</p>
HTML

Kalau ditampilin di browser, jadinya kayak gini:

Contoh elemen <kbd>
Gambar 44.1 : Contoh elemen <kbd>

Elemen ini bikin teks keliatan beda biar lebih jelas kalau itu adalah input dari keyboard.

Panduan Lengkap HTML Form Attributes yang Wajib Lo Tahu! (Tutorial HTML Part 54)

2. HTML <samp> Buat Output Program

Kalau lo mau nampilin hasil output dari program, pakai elemen <samp>. Biasanya, ini dipakai buat nunjukin apa yang bakal muncul di layar setelah menjalankan suatu perintah.

Contohnya gini:

<p>Output dari program:</p>
<p><samp>Hello, World!</samp></p>
HTML

Hasilnya di browser bakal kayak gini:

Contoh elemen <samp>
Gambar 44.2 : Contoh elemen <samp>

Jadi, kalau lo bikin tutorial coding, elemen ini bisa banget dipakai biar output program lo lebih gampang dibaca.

3. HTML <code> Buat Menampilkan Kode

Kalau lo mau nampilin potongan kode di dalam teks HTML, pakai elemen <code>. Biasanya, ini sering digabung sama <pre> buat menjaga format indentasi.

Panduan Lengkap HTML Forms: Bikin Formulir Keren di Website! (Tutorial HTML Part 53)

Contohnya:

<pre><code>
function hello() {
    console.log("Hello, World!");
}
</code></pre>
HTML

Hasilnya:

Contoh elemen <code>
Gambar 44.3 : Contoh elemen <code>

Kalau ditampilin di browser, tampilannya bakal tetap rapi kayak di editor kode.

4. Cara Menjaga Line-Break di HTML

Kalau lo mau nulis kode atau teks yang harus tetap mempertahankan format dan line-break (gak kejadian semuanya numpuk di satu baris), pakai elemen <pre>.

Contohnya:

Perbedaan HTML vs XHTML: Panduan Lengkap (Tutorial HTML Part 52)

<pre>
Line pertama
Line kedua
Line ketiga
</pre>
HTML

Hasilnya di browser bakal tetap rapi sesuai formatnya:

Contoh elemen <pre>
Gambar 44.4 : Contoh elemen <pre>

Elemen ini penting banget kalau lo pengen nampilin kode atau teks dengan format khusus.

5. HTML <var> Buat Variabel

Elemen <var> dipakai buat nunjukin variabel dalam teks, biasanya di dalam dokumentasi atau penjelasan kode.

Contohnya:

<p>Gunakan rumus <var>x</var> = <var>y</var> + 2 untuk menghitung nilai x.</p>
HTML

Di browser, tampilannya bakal kayak gini:

Contoh elemen <var>
Gambar 44.5 : Contoh elemen <var>

Variabelnya jadi miring biar lebih gampang dikenali.

6. Kesimpulan

Jadi, elemen-elemen HTML ini bisa lo pakai buat berbagai keperluan:

  • <kbd> → buat input dari keyboard
  • <samp> → buat output program
  • <code> → buat nampilin kode
  • <pre> → buat menjaga format teks
  • <var> → buat nunjukin variabel

Dengan pakai elemen-elemen ini, lo bisa bikin dokumentasi yang lebih jelas dan enak dibaca.

Kalau lo sering bikin tutorial, dokumentasi, atau blog tentang coding, elemen-elemen di atas bakal berguna banget. Selain bikin tampilan lebih rapi, ini juga bantu pembaca lebih gampang ngerti apa yang lo tulis.

Jadi, jangan ragu buat mulai pakai HTML Computer Code Elements di website atau blog lo!

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *