Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <kbd> (Keyboard) Pada HTML

previous Previous Page

HTML element tag <kbd> merupakan tag pada HTML untuk merepresentasikan inputan dari pengguna yang biasanya berasal dari papan ketik (keyboard). Element tag <kbd> diciptakan sebagai contoh bahwa teks di dalam tag kbd seolah-olah adalah papan ketik. Jenis Inputan lainnya dapat berasal dari berbagai piranti lain seperti inputan suara, kamera, pen tab dan lainnya. HTML elemen tag <kbd> ditampilkan dalam bentuk font monospace.

Element tag <kbd> merupakan tag dengan display inline. ELement ini dapat disisipkan pada element induk tanpa menghasilkan line break. Penulisan HTML element tag kbd> dituliskan dengan tag pembuka <kbd> dan ditutup dengan tag penutup </kbd>.

Berikut ini contoh penggunaan elemen <kbd> :

HTML

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Element Tag KBD</title>
</head>
<body>
   <h1>Latihan Menggunakan HTML Element Tag KBD</h1>
   <p>Untuk operasi copy, cut dan paste, tekan <kbd>Ctrl</kbd> + <kbd>C</kbd>, <kbd>Ctrl</kbd> + <kbd>X</kbd>, <kbd>Ctrl</kbd> + <kbd>V</kbd></p>
   <p>Untuk pencarian teks, tekan <kbd>Ctrl</kbd> + <kbd>F</kbd></p>
   <p>Untuk menyimpan file, tekan <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
</body>
</html>
element tag kbd pada html

Jika Anda menginginkan tampilan teks pada tag <kbd> seperti layaknya papan ketik (keyboard), dapat menggunakan penataan gaya pada CSS. Caranya dengan mengatur border dan warna latar belakang elemen <kbd>.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<title>Latihan Menggunakan HTML Element Tag KBD</title>
   <style>
    kbd {
    border: 1px solid #666666;
    border-radius: 4px;
    padding: 3px 5px;
    margin: 2px;
    background-color: #444444;
    color:#ffffff;
   }
   </style>
</head>
<body>
   <h1>Latihan Menggunakan HTML Element Tag KBD</h1>
   <p>Untuk operasi copy, cut dan paste, tekan <kbd>Ctrl</kbd> + <kbd>C</kbd>, <kbd>Ctrl</kbd> + <kbd>X</kbd>, <kbd>Ctrl</kbd> + <kbd>V</kbd></p>
   <p>Untuk pencarian teks, tekan <kbd>Ctrl</kbd> + <kbd>F</kbd></p>
   <p>Untuk menyimpan file, tekan <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
</body>
</html>
element tag kbd pada html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<kbd>yayayayaya

Global Attributes :

Tag <kdb> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <kbd> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar(onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <kbd> pada HTML:

CSS

1
2
3
4
kbd{
   display:inline;
   font-family: monospace;
}

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Tutorial HTML

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami