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 .
Selamat mencoba. Semoga bermanfaat. :)
ini bukan tampilan aja ya gan ? proses nya pake apa javascript atau apa ?
BalasHapus