Belajar HTML Part 13 Mengenal Tag samp, kbd, dan var di HTML
Hai selamat datang lagi di warung belajar masih dalam seri tutorial belajar HTML, jika dalam tutorial sebelumnya kita sudah belajar mengenai cara merubah arah text di HTML, nah dalam tutorial kali ini kita masih membahas di bagian tag yang berhubungan dengan text di HTML, kita akan belajar mengenal tag <samp>,<kbd>, dan <var>.
Video Tutorial Belajar HTML – Mengenal Tag samp, kbd, dan var di HTML
ketiga tag diatas biasanya digunakan untuk menuliskan struktur text di html, dengan menggunakan tag ini anda dapat memperjelas struktur text yang anda tulis, baik langsung saja kita mulai.
Tag <samp> di HTML
Tag <samp> merupakan singkatan dari Program Sample, tag ini bisa anda gunakan untuk menuliskan baris kode program yang biasanya dilakukan di web web yang berisi tutorial.
text yang menggunakan tag <samp> akan ditampilkan dengan menggunakan jenis font monospace, penggunaan dari tag ini sama seperti tag <code> yang sebelumnya kita telah bahas di artikel mengenal tag pre dan code di html.
sehingga untuk penggunaan spasi lebih dari satu, akan tetap dihitung satu spasi sama seperti tag <code>.
untuk tag <samp> ini merupakan jenis inline level element, yang artinya akan tetap mengikuti alur text yang sebelumnya telah dibuat.
baik silahkan anda buat skrip seperti ini.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <h3>Contoh Tag Samp</h3> <p>CSS adalah singkatan dari <samp>Cascading Style Sheets</samp>, CSS ini lebih digunakan untuk mendesign dari website anda</p> </body> </html> |
silahkan simpan dan buka di browser.
terlihat untuk tulisan Cascading Style Sheets ditampilkan oleh browser dengan jenis font monospace, memang terlihat lebih kecil sih, nah dari situ terlihat penekanan dari penggunaan tag <samp>
Tag <kbd> di HTML
Tag <kbd> merupakan singkatan dari keyboard, tag ini dipergunakan untuk menampilkan inputan keyboard, sama seperti tag <samp> text yang menggunakan tag <kbd> ini menggunakan font monospace, sama seperti tag<samp> tag ini juga merupakan jenis inline level element, baik langsung saja kita coba buat skrip sederhana seperti dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <h3>Contoh Tag KBD</h3> <p>Untuk Memilih keseluruhan text di text editor silahkan tekan <kbd>CTRL + A</kbd></p> </body> </html> |
lalu silahkan simpan, dan buka di browser.
terlihat untuk bagian text yang menggunakan tag <kbd> textnya terlihat berbeda dengan tag yang lain.
Tag <var> di HTML
tag <var> merupakan singkatan dari variabel, tag ini dipergunakan untuk menampilkan variabel, seperti variabel program.
Berbeda dengan 2 tag sebelumnya, text yang menggunakan tag ini akan ditampilkan dengan huruf miring (Italic), tag <var> juga merupakan jenis inline level element,
baik langsung saja silahkan tuliskan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Belajar HTML</title> </head> <body> <h3>Contoh Tag Var</h3> <p>Anda Bisa Membuat variabel di Javascript dengan menggunakan code <var>var nama_variabel;</var></p> </body> </html> |
lalu silahkan disimpan dan buka di browser.
nah terlihat kan text yang menggunakan tag <var> akan ditampilkan dengan huruf miring (italic), sehingga akan terlihat dari penekanan dari text yang ditulis bahwa itu adalah contoh variabel.
Nah kurang lebih seperti itu fungsi dari tag <samp>, <kbd>, dan <var>, jadi ketiga tag ini lebih digunakan untuk menampilkan struktur dari text HTML, jadi jika anda menggunakan tag ini akan lebih terlihat mana yang text biasa mana yang merupakan text yang ada penekanan untuk contoh sampel code, inputan keyboard, ataupun variabel
nah sekian dulu akan tutorial ini kita akan sambung di tutorial HTML lainnya, terima kasih semoga bermanfaat.
[stextbox id=”info”] Anda serius ingin menguasai HTML ?Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]
