Pages

Senin, 29 Desember 2014

Membuat Bentuk Keybord dengan HTML

17.55    1 comment

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. :)

Read More

Membuat kalkulator sederhana dengan HTML

17.29    1 comment

Kalkulator di bawah ini  di buat dengan javascript dan di jalankan di browser.
di browser akan tampil seperti ini :




<HTML>
    <HEAD><TITLE>Kalkulator</TITLE></HEAD>
    <FORM NAME="Input">
    <h1>Kalkulator</h1>
        <TABLE BORDER="4" >
        <tr><TD colspan="5"><INPUT TYPE="text" NAME="Input" Size="37"><br></TD></tr>
        <tr>
    <TD><INPUT  TYPE="button" NAME="clear"  VALUE="MS" OnCLick="Calc.Input.value = ''"></td>
    <td><INPUT TYPE="button" NAME="MR" VALUE="MR" OnClick="Calc.Input.value = ''"></td>
    <td><INPUT TYPE="button" NAME="MS" VALUE="MS" OnClick="Calc.Input.value = ''"></td>
    <td><INPUT TYPE="button" NAME="minus"  VALUE="-M" OnClick="Calc.Input.value += '-'"></td>
    <td><INPUT TYPE="button" NAME="plus" VALUE="+M" OnClick="Calc.Input.value = '+'"></td></tr>
    <tr>
    <td><INPUT TYPE="button" NAME="seven" VALUE="   7   " OnClick="Calc.Input.value += '7'"></td>
    <td><INPUT TYPE="button" NAME="eight" VALUE="   8   " OnCLick="Calc.Input.value += '8'"></td>
    <td><INPUT TYPE="button" NAME="nine"  VALUE="   9   " OnClick="Calc.Input.value += '9'"></td>
    <td><INPUT TYPE="button" NAME="div"   VALUE="   /   " OnClick="Calc.Input.value += ' / '"></td>
    <td><INPUT TYPE="button" NAME="div"   VALUE="  %  " OnClick="Calc.Input.value += ' % '"></td></tr>
    <tr>
    <td><INPUT TYPE="button" NAME="four"  VALUE="   4   " OnClick="Calc.Input.value += '4'"></td>
    <td><INPUT TYPE="button" NAME="five"  VALUE="   5   " OnCLick="Calc.Input.value += '5'"></td>
    <td><INPUT TYPE="button" NAME="six"   VALUE="   6   " OnClick="Calc.Input.value += '6'"></td>
    <td><INPUT TYPE="button" NAME="six"   VALUE="   *   " OnClick="Calc.Input.value += '*'"></td>
    <td><INPUT TYPE="button" NAME="six"   VALUE="1/X" OnClick="Calc.Input.value += '1/*'"></td></tr>
    <tr>
    <td><INPUT TYPE="button" NAME="one"   VALUE="   1   " OnClick="Calc.Input.value += '1'"></td>
    <td><INPUT TYPE="button" NAME="two"   VALUE="   2   " OnCLick="Calc.Input.value += '2'"></td>
    <td><INPUT TYPE="button" NAME="three" VALUE="   3   " OnClick="Calc.Input.value += '3'"></td>
    <td><INPUT TYPE="button" NAME="minus"  VALUE="   -   " OnClick="Calc.Input.value += ' - '"></td>
    <td rowspan="2"><INPUT TYPE="button" NAME="DoIt"  VALUE="    =  " OnClick="Calc.Input.value = eval(Calc.Input.value)"></td></tr>
    <tr>
    <td colspan="2"><INPUT TYPE="button" NAME="minus" VALUE="  0  " OnClick="Calc.Input.value += ' - '"></td>
    <td><INPUT TYPE="button" NAME="times" VALUE="    .   " width="30" height="30"OnClick="Calc.Input.value += ' . '"></td>
    <td><INPUT TYPE="button" NAME="plus" VALUE="   +  " OnClick="Calc.Input.value += '+'"></td>
    </tr>
    </TABLE></html>


Untuk Di tampilkan di lokal komputer copy scriptnya ke dalam notepad kemudian save as misalnya kalkulator.html dengan format all file kmudian pilih save untuk menyimpan.


Buka file kalkulator dengan browser mozila, Internet Exporer, google chrome dll.

Selamat mencoba. :)

Read More
Langganan: Postingan (Atom)