HTML Tutorials : Penggunaan Tag KBD, Variable, Code, Sample
HTML Tutorials : Penggunaan Tag KBD, Variable, Code, Sample
Pada tutorial
sebelumya kita telah membahas mengenai beberapa tag baru di HTML Tutorials : Abbreviation, Address, Cite, BDO. Tahukah kamu
bagaimana cara mengatur tampilan output seperti font computer atau font keybord
yang biasa disebut dengan monoscope? Bagaimana cara mengatur teks dalam bentuk
notasi atau variable matematika?
Di tutorial ini,
kita akan menjawab pertanyaan di atas. Sebab, kita akan membahas empat tag
baru, yaitu <kbd>, <var>, <code>, dan <samp> secara
lugas di HTML Tutorial : Penggunaan Tag KBD, Variable, Code,
Sample.
---------------------------------------------------------------------------------
Tag KBD
Tag KBD
merupakan tag khusus di HTML 5 yang digunakan untuk menampilkan tulisan dengan
input seperti huruf keybord. KBD sendiri merupakan singkatan dari kata tersebut
(keybord). Tag ini dalam bahasa HTML 5 dituliskan dengan tag pembuka
<kbd> dan tag penutup </kbd>. Elements yang berada di antaranya
akan ditampilkan seperti tulisan keybord. Tulisan seperti ini sering disebut
dengan monoscope. Selain itu, penggunaan tag ini juga akan memberikan
spasi antar huruf dan antar kata yang lebih renggang.
Contoh :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ma Haamesha | Penggunaan Tag KBD,
Variable, Code, Sample</title>
</head>
<body>
<h1>HTML Tutorials : Penggunaan Tag
KBD</h1>
KBD singkatan dari
<b><i>keybord</i></b>. Tag ini akan menampilkan
tulisan dengan tampilan yang berbeda, yaitu seperti
input keybord komputer.
<br> Tulisan tanpa tag <kbd>
<br> <kbd>Tulisan dengan tag
<kbd></kbd>
</body>
</html>
|
---------------------------------------------------------------------------------
Tag Variable
Tag Variable adalah tag
khusus di HTML yang biasanya digunakan para programmer untuk menyelesaikan
kasus penulisan notasi maupun variabel matematika.
Tag ini dituliskan dengan tag pembuka <var> dan tag penutup </var>.
Dilihat dari
fisiknya, web browser akan menampilkan elements dari tag <var> dengan
tulisan bercetak miring. Ditambah lagi, huruf yang ditampilkan akan memiliki
bentuk yang berbeda, seperti tulisan tangan langsung. Huruf yang sangat
terlihat berubah bentuknya adalah huruf “a”.
Contoh :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<h1>HTML Tutorials : Penggunaan Tag
Variable</h1>
<var> adalah singkatan dari kata
<q>variable</q>.
Tag var ini digunakan untuk menyelesaikan masalah
dalam
penulisan notasi atau variable matematika.
<blockquote>
Tentukan
nilai tan (a + b) <br>
Tentukan
nilai tan (<var>a</var> + <var>b</var>) <br>
Tentukan
nilai tan <var>(a + b)</var>
</blockquote>
Penggunaan tag ini sering ditemani dengan tag
supercript
dan tag subscript.
<blockquote>
<var>x</var><sup>2</sup>
+ 2<var>x</var> - 24 = 0<br>
(<var>x</var>
+ 6)(<var>x</var> - 4) = 0 <br>
<var>x</var><sub>1</sub> = -6 <br>
<var>x</var><sub>2</sub>
= 4 <br>
</blockquote>
</body>
</html>
|
---------------------------------------------------------------------------------
Tag Code
Tag Code adalah salah satu kelompok
tag yang mengandung banyak elements di dalamnya. Karenanya di versi HMTL 4, tag code disebut dengan
phrase elements. Penulisan tag ini
berpasangan dan tidak dapat dipisahkan dengan tag penutupnya. Elements yang
akan ditampilkan dituliskan dalam tag <code>…</code>.
Tag code digunakan untuk menampilkan satu atau lebih karakter inline (sebaris)
yang mana merupakan suatu kode komputer, seperti program statements, variable,
nama, kata kunci, dan sebagainya.
Elements tag ini
akan sekilas ditampilkan kurang lebih sama dengan konten yang berada di body.
Perbedaannya ialah tag ini akan menampilkan tulisan yang lebih tipis dan memiliki
ukuran lebih kecil dari tulisan default. Selain itu, tag ini juga akan
ditampilkan dengan font huruf monoscope. mahaamesha.com
Contoh :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ma Haamesha | Penggunaan Tag KBD,
Variable, Code, Sample</title>
</head>
<body>
<table border="1px"
cellpadding="20px">
<tr>
<td>
<h1>HTML Tutorials : Penggunaan Tag
Code</h1>
Tag Code dituliskan
<code>...</code>. <br>
Tag Code digunakan untuk penulisan : <br>
<li>Program statements</li>
<li>Variable</li>
<li>Names</li>
<li>Keywords</li>
Berikut contoh penggunaan Tag Code. <br>
<blockquote>
var a
= 10; <br>
var b =
20; <br>
var c =
30; <br>
a + b = c;
<br>
alert(c);
</blockquote>
</td>
<td>
<code>
<h1>HTML Tutorials : Penggunaan Tag
Code</h1>
Tag Code dituliskan
<code>...</code>. <br>
Tag Code digunakan untuk penulisan : <br>
<li>Program statements</li>
<li>Variable</li>
<li>Names</li>
<li>Keywords</li>
Berikut contoh penggunaan Tag Code.
<blockquote>
var a
= 10; <br>
var b =
20; <br>
var c =
30; <br>
a + b = c;
<br>
alert(c);
</blockquote>
</code>
</td>
</tr>
</table>
<p>Bisa dilihat jelas perbedaan kedua kolom di
atas.
Tag code menampilkan tulisan lebih tepis dan kecil,
serta dengan font monoscope.
</body>
</html>
|
---------------------------------------------------------------------------------
Tag Sample
Tag Sample merupakan tag
HTML dengan fungsinya yang digunakan untuk menunjukkan suatu output sample dari komputer kode. Tag
ini dituliskan berpasangan antara
tag pembuka dan penutunya, yaitu <samp>…</samp>.
Tag ini
ditampilkan mirip dengan tag code. Anda bisa mencoba untuk menjalankan kode
berikut di web browser Anda.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ma Haamesha | Penggunaan Tag KBD,
Variable, Code, Sample</title>
</head>
<body>
<table border="1px"
cellpadding="20px">
<tr>
<td>
<samp>
<h1>HTML Tutorials : Penggunaan Tag Sample</h1>
Tag Samp dituliskan
<samp>...</samp>. <br>
Tag Samp digunakan untuk penulisan <b>program
komputer</b>. <br>
Berikut contoh penggunaan Tag Samp. <br>
<blockquote>
akfhwb455b2+tifdsmn23hfsi325nfso-320009.70
</blockquote>
</samp>
Tabel ini menggunakan tag sampel
</td>
<td>
<code>
<h1>HTML Tutorials : Penggunaan Tag
Sample</h1>
Tag Samp dituliskan
<samp>...</samp>. <br>
Tag Samp digunakan untuk penulisan <b>program
komputer</b>. <br>
Berikut contoh penggunaan Tag Samp. <br>
<blockquote>
akfhwb455b2+tifdsmn23hfsi325nfso-320009.70
</blockquote>
</code>
Tag ini menggunakan tag code
</td>
</tr>
<tr align="center">
<td><b> Ini dengan tag CODE
</b></td>
<td><b> Ini dengan tag SAMP
</b></td>
</tr>
</table>
<p>Tidak ada perbedaan dalam web browser
menampilkan
elements menggunakan kedua tag ini.
</body>
</html>
|
---------------------------------------------------------------------------------
Summary
Pada tutorial
ini kita telah mempelajari :
Tag KBD
|
<kbd>…</kbd>
|
→ Font keybord
|
Tag Variable
|
<var>…</var>
|
→ Variable, notasi matematika
|
Tag Code
|
<code>…</code>
|
→ Kode komputer
|
Tag Sample
|
<samp>…</samp>
|
→ Sample output kode komputer
|
---------------------------------------------------------------------------------
Semoga artikel
di atas bermanfaat sehingga Anda paham akan materi yang telah saya sampaikan.
Jangan lupa tinggalkan tanggapan Anda mengenai artikel ini di kolom komentar
jika artikel ini bermanfaat. Tetap semangat belajar programming dan jangan lupa
end tag.
Comments
Post a Comment