Sebelumnya saya memposting tentang
Cara membuat kalkulator sederhana dengan html sekarang saya akan berbagi tentang cara membuat bentuk keybord dengan html.
caranya sama dengan kalkulator dengan menggunakan table. agar lebih rapih.
<HTML>
<HEAD><TITLE>Keyboard</TITLE></HEAD> <h1>Key Board</H1
<table border="3" >
<tr><td><button>ESC</button> </td>
<td align="center"><button>F1</button> </td>
<td align="center"><button>F2</button> </td>
<td align="center"><button>F3</button> </td>
<td align="center"><button>F4</button></td>
<td align="center"><button>F5</button> </td>
<td align="center"><button>F6</button></td>
<td align="center"><button>F7</button> </td>
<td align="center"><button>F8</button></td>
<td align="center"><button>F9</button></td>
<td align="center"><button>F10</button></td>
<td align="center"><button>F11</button></td>
<td align="center"><button>F12</button></td>
<td align="center"><button>Prt sc<br>Syrs Rq</button></td>
<td align="center"><button>Paus <br>Break</td>
<td align="center"><button>INS</button></td>
<td align="center"><button>DEL</button></td></tr </td></tr> <tr>
<td><button>~<br>`</button></td>
<td align="center"><button>!<br>1</button></td>
<td align="center"><button>@<br>2</button></td>
<td align="center"><button>#<br>3</button></td>
<td align="center"><button>$<br>4</button></td>
<td align="center"><button>%<br>5</button></td>
<td align="center"><button>^<br>6</button></td>
<td align="center"><button>&<br>7</button></td>
<td align="center"><button>*<br>8</button></td>
<td align="center"><button>(<br>9</button></td>
<td align="center"><button>)<br>0</button></td>
<td><button align="center">_<br>-</button></td>
<td><button align="center">+<br>=</button></td>
<td Colspan="2" align="center"><button><-Backspace</button></td>
<td Colspan="2" align="center"><button>Home</td></tr> <tr>
<td><button>|<--- <br> ---></button></td>
<td align="center"><button>Q</button></td>
<td align="center"><button>W</button></td>
<td align="center"><button>E</button></td>
<td align="center"><button>R</button></td>
<td align="center"><button>T</button></td>
<td align="center"><button>Y</button></td>
<td align="center"><button>Y</button></td>
<td align="center"><button>U</button></td>
<td align="center"><button>I</button></td>
<td align="center"><button>O</button></td>
<td align="center"><button>P</button></td>
<td align="center"><button>{<br>[</button></td>
<td align="center"><button>}<br>]</button></td>
<td align="center"><button>|<br>\</button></td>
<td Colspan="2" align="center"><button> Pgup <br><br></button></td></tr><tr>
<td align="center"><button>Caps <br> Lock</button></td>
<td align="center"><button>A</button></td>
<td align="center"><button>S</button></td>
<td align="center"><button>D</button></td>
<td align="center"><button>F</button></td>
<td align="center"><button>G</button></td>
<td align="center"><button>H</button></td>
<td align="center"><button>J</button></td>
<td align="center"><button>K</button></td>
<td align="center"><button>L</button></td>
<td align="center"><button>: <br>;</button></td>
<td align="center"><button>"<br>'</button></td>
<td Colspan="3" align="center"><button> Enter <----<br><br></button></td>
<td Colspan="2" align="center"><button>Pgdn<br><br></button></td></tr><tr>
<td Colspan="2"><button><br><br></button></td>
<td align="center"><button>Z</button></td>
<td align="center"><button>X</button></td>
<td align="center"><button>C</button></td>
<td align="center"><button>V</button></td>
<td align="center"><button>B</button></td>
<td align="center"><button>N</button></td>
<td align="center"><button>M</button></td>
<td align="center"><button><<br>,</button></td>
<td align="center"><button>><br>.</button></td>
<td align="center"><button>?<br>/</button></td>
<td Colspan="3" align="center"><button> Shift <br><br></button></td>
<td Colspan="2" align="center"><button> End <br><br></button></td></tr> </tr><tr>
<td><button>Ctrl <br><br></button></td>
<td align="center"><button>FN</button></td>
<td align="center"><button>WIN</button></td>
<td align="center"><button>ALT</button></td>
<td Colspan="5"><button> Spasi <br><br></button></td>
<td align="center"><button>Alt</button></td>
<td align="center"><button>Mou</button></td>
<td align="center"><button>Ctrl</button></td>
<td align="center"><button>Top<br><br></button></td>
<td align="center"><button>Left<br><br></button></td>
<td align="center" ><button>Right</button></td>
<td align="center" Colspan="2"><button>Bottom <br><br></button></td></tr>
</table>
</FORM>
</HTML>
Hasilnya akan seperti ini .
Klo mau di Gabung kalkulator dan keybord nya. Tinggal di copy keybordnya di bawah kalkulator yah tapi buka tutup htmlnya 1 aja.
Untuk menyimpan di notepad caranya sama seperti di
Kalkulator.
Selamat mencoba. Semoga bermanfaat. :)