Cara Membuat Kalkulator dengan HTML

Disusun bersama Staf wikiHow

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 .

Bagian 1

Bagian 1 dari 4:

Memahami Kode Anda

Unduh PDF

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-460px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/08\/Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg\/v4-728px-Create-a-Calculator-Using-HTML-Step-1-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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]
  X
  Teliti sumber}
- 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]
  X
  Teliti sumber}
- 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]
  X
  Teliti sumber}
- 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]
  X
  Teliti sumber}
- 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]
  X
  Teliti sumber}
- 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]
  X
  Teliti sumber}
- 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]
  X
  Teliti sumber}
- /form, /body , dan /html : Perintah ini memberi tahu dokumen bahwa perintah berhubungan yang dimulai sebelumnya di dalam dokumen kini sudah selesai. ^{[8]
  X
  Teliti sumber}
Iklan

Bagian 2

Bagian 2 dari 4:

Kode Dasar HTML Kalkulator

Unduh PDF

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 
 >