Cara menggunakan kalkulator html, css

Unduh PDF

Terdapat berbagai cara untuk mengerjakan matematika di komputer menggunakan kalkulator bawaan. Namun, Anda juga bisa membuat kalkulator sendiri menggunakan kode HTML. Caranya, Anda perlu mempelajari dasar-dasar HTML, lalu menyalin kode yang diperlukan ke program penyunting teks dan menyimpannya dengan ekstensi HTML. Kemudian, kalkulator bisa digunakan dengan membuka dokumen HTML di peramban utama Anda. Dengan demikian, Anda bisa menggunakan kalkulator di peramban serta mempelajari dasar-dasar seni coding.

1
Pelajari peran tiap fungsi HTML. Kode yang akan digunakan untuk membuat kalkulator dibuat dari banyak bagian sintaks yang saling bekerja sama untuk mendefinisikan berbagai elemen-elemen dokumen. Baca artikel ini untuk mempelajari proses ini sampai terbiasa, atau teruskan membaca artikel ini untuk mempelajari apa efek dari setiap baris dalam kode untuk membuat kalkulator.
- html: Bagian sintaks ini memberi tahu bahasa apa yang digunakan kode kepada seluruh dokumen. Dalam coding, pengodean dilakukan dengan sejumlah bahasa, dan <html> menyatakan bahwa seluruh dokumen akan berada dalam html.[1]
- head : Memberi tahu kepada dokumen bahwa semua di bawahnya adalah data terkait data, disebut juga dengan "metadata". Perintah <head> biasanya digunakan untuk mendefinisikan elemen bergaya dari suatu dokumen, misalnya judul, kepala, dan sebagainya. Anggaplah sebagai payung tempat seluruh kode didefinisikan. [2]
- title: Di sini Anda akan memberi judul dokumen. Atribut ini digunakan untuk mendefinisikan judul dokumen saat dibuka dalam peramban html.
- body bgcolor= "#": Atribut ini menetapkan warna dari latar belakang dan tubuh kode. Angka dalam set kutipan ini yang muncul setelah # berhubungan dengan warna yang ditetapkan sebelumnya.
- text= "": Kata dalam set kutipan ini menentukan warna teks dokumen.
- form name="": Atribut ini menentukan nama format, yang digunakan untuk membangun struktur dari apa yang datang setelah didasarkan pada apa arti nama format tersebut sesuai pengetahuan Javascript. Sebagai contoh, nama format yang akan kita gunakan adalah kalkulator, yang akan menciptakan struktur khusus pada dokumen.[3]
- input type="": Di sini tindakan akan terjadi. Atribut ini memberi tahu dokumen nilai akan berupa teks jenis apa di dalam seluruh kurungan (bracket). Sebagai contoh, nilainya dapat berupa teks, kata sandi, tombol (seperti dalam kalkulator), dan seterusnya.[4]
- value="": Perintah ini memberi tahu dokumen apa yang akan terkandung dalam jenis masukan (input) yang disebutkan di atas. Untuk kalkulator, nilai ini akan muncul sebagai angka (1-9) dan perhitungan (+,-,*,/,=).[5]
- onClick="": Sintaks ini menjelaskan suatu kejadian, yang memberi tahu dokumen bahwa sesuatu telah terjadi ketika tombol ditekan. Untuk kalkulator, kita ingin teks yang muncul sesuai dengan teks yang tertulis di setiap tombol. Dengan demikian, untuk tombol “6”, kita akan menuliskan document.calculator.ans.value+='6' di antara kutipan.[6]
- br: Label ini memulai baris pemisah dalam dokumen sehingga apa pun yang tertulis setelahnya akan muncul satu baris di bawah apa pun yang muncul sebelumnya. [7]
- /form, /body, dan /html: Perintah ini memberi tahu dokumen bahwa perintah berhubungan yang dimulai sebelumnya di dalam dokumen kini sudah selesai. [8]

Salin kode di bawah. Sorot teks di dalam kotak di bawah dengan menahan kursor di sudut kiri atas kotak, dan geser ke sudut kanan bawah kotak sehingga semua teks berwarna biru. Kemudian, tekan "Command+C" pada Mac atau "Ctrl+C" pada PC untuk menyalin kode ke clipboard.

<html>
<head>
<title>HTML Calculator</title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</form>
</body>
</html>

1

Buka program penyunting teks di komputer. Ada beberapa program yang bisa digunakan, tetapi demi kemudahan dan kualitas, kami sarankan memakai TextEdit atau Notepad.[9][10]
- Bagi pengguna Mac, klik ikon kaca pembesar di sudut kanan layar untuk membuka Spotlight. Kalau sudah, tik TextEdit dan klik program TextEdit (seharusnya disorot dengan warna biru).
- Bagi pengguna PC, buka menu Start di sudut kiri bawah layar. Pada kolom pencarian, tik Notepad dan klik aplikasi Notepad di daftar hasil pencarian.
2

Tempelkan kode HTML kalkulator ke dokumen.
- Bagi pengguna Mac, klik badan dokumen dan tekan "Command+V". Anda perlu mengeklik "Format" di bagian atas layar dan klik "Make Plain Text" setelah menempelkan kode. [11]
- Bagi pengguna PC, klik badan dokumen dan tekan "Ctrl+V".
3

Simpan berkas. Caranya, klik tombol File di sudut kiri atas jendela Anda, dan klik "Save As..." pada PC atau "Save..." pada Mac dalam menu tarik turun.
4

Tambahkan ekstensi HTML pada nama berkas. Di menu "Save As... ", tik nama berkas Anda diikuti dengan “.html”, kemudian klik “Save”. Sebagai contoh, Anda bisa menuliskan “KalkulatorPertamaku.html”

1

Temukan berkas yang baru saja dibuat. Caranya, tik nama berkas di Spotlight atau kolom pencarian di menu Start, seperti yang dijelaskan sebelumnya. Anda tidak perlu mengetik ekstensi “html”.
2
Klik berkas Anda untuk membukanya. Peramban utama Anda akan membuka kalkulator dalam laman web baru.
3

Klik tombol pada kalkulator untuk menggunakannya. Solusi persamaan Anda akan muncul di kolom hasil.