Cara membuat kalkulator dengan HTML

Pengarang: John Stephens
Tanggal Pembuatan: 21 Januari 2021
Tanggal Pembaruan: 15 Boleh 2024
Anonim
Cara Membuat Kalkulator Sederhana dengan HTML & CSS
Video: Cara Membuat Kalkulator Sederhana dengan HTML & CSS

Isi

Dalam artikel ini: Memahami kodeMenulis kode dasar kalkulatorMembuat kalkulatorGunakan kalkulator11 Referensi

Ada banyak cara untuk melakukan perhitungan di komputer Anda menggunakan kalkulator bawaan, tetapi Anda juga dapat membuatnya sendiri menggunakan hanya kode HTML. Untuk melakukan ini, Anda harus mempelajari dasar-dasar HTML sebelum menyalin kode yang diperlukan ke dalam file e yang Anda simpan dengan extension.html. Kemudian cukup buka file di browser favorit Anda untuk mengakses kalkulator. Teknik ini memungkinkan Anda melakukan perhitungan langsung di peramban sambil mempelajari dasar-dasar seni pemrograman komputer.


tahap

Bagian 1 Memahami kode



  1. Pahami cara kerja kode. Kode yang akan Anda gunakan untuk membuat kalkulator didasarkan pada potongan-potongan kecil kode yang bekerja satu sama lain untuk mendefinisikan berbagai elemen dokumen. Anda dapat mempelajari lebih lanjut tentang HTML dengan mengklik tautan ini atau Anda dapat membaca apa yang dilakukan setiap baris dalam kode yang akan Anda gunakan untuk kalkulator.
    • html: bagian kode ini menunjukkan ke seluruh dokumen bahasa yang digunakan. Banyak bahasa pemrograman yang berbeda digunakan dan tag menunjukkan ke seluruh dokumen bahwa kali ini adalah HTML yang Anda gunakan.
    • kepala : ini memberi tahu dokumen bahwa informasi berikut adalah data yang juga disebut "metadata". Tag ini biasanya digunakan untuk mendefinisikan elemen-elemen gaya dari dokumen, seperti judul, tajuk, dll. Ini seperti payung di mana sisa kode didefinisikan.
    • judul : Ini adalah judul yang akan Anda berikan pada dokumen. Tag ini digunakan untuk menampilkan judul dokumen setelah dibuka di browser.
    • body bgcolor = "#" : Ini menetapkan warna latar belakang untuk dokumen. Angka yang muncul setelah tajam berhubungan dengan warna yang telah ditentukan.
    • = '' : Kata dalam tanda kutip menunjukkan warna e pada dokumen.
    • form name = "" : Atribut ini menunjukkan nama formulir yang akan digunakan untuk struktur apa yang muncul setelahnya sehingga JavaScript dapat mengetahui bentuk mana yang sedang diucapkan. Misalnya, nama formulir yang akan kita gunakan adalah "kalkulator" yang akan membuat struktur spesifik dokumen.
    • tipe input = "" : ini adalah tempat aksi akan berlangsung. Atribut "tipe input" memberi tahu dokumen jenis nilai untuk e di dalam tanda kurung. Misalnya, itu bisa berupa e, kata sandi, tombol (seperti untuk kalkulator kami), dan sebagainya.
    • value = "" : Atribut ini memberi tahu dokumen apa yang akan berisi atribut "tipe input". Untuk kalkulator, Anda akan menampilkan angka dari 1 hingga 9 dan tanda-tanda aritmatika (+, -, *, /, =).
    • onclick = "" : Bagian kode ini menjelaskan peristiwa yang memberi tahu dokumen bahwa sesuatu harus terjadi ketika tombol diaktifkan. Untuk kalkulator, Anda ingin menampilkan angka yang sesuai dengan tombol yang ditekan pengguna. Misalnya, jika tombol 6 diaktifkan, Anda ingin meletakkan document.calculator.in.value + = 6 di antara tanda kutip.
    • br : ini adalah tag yang menunjukkan pemisah baris, semua kode lainnya yang muncul berikutnya akan muncul baris di bawah.
    • / form, / body, dan / html Tag penutup ini memberi tahu browser bahwa tag yang Anda buka sebelumnya sudah selesai dan ditutup.

Bagian 2 Tulis kode dasar kalkulator

Salin kode di bawah ini. Pilih e di bawah ini dengan menjaga kursor ditekan dari sudut kiri atas kotak dan menyeretnya ke sudut kanan bawah sehingga keseluruhan e tampak biru. Kemudian tekan "Command + C" pada Mac atau "Ctrl + C" pada PC untuk menyalin e.


Kalkulator HTML

Hasilnya adalah

Bagian 3 Membuat kalkulator




  1. Buka file e di komputer. Ada banyak program yang dapat Anda gunakan, tetapi demi kualitas, disarankan untuk menggunakan Edit atau Notepad.
    • Pada Mac, cukup klik pada kaca pembesar di kanan atas layar untuk membuka Spotlight. Setelah terbuka, ketikkan mengedit dan klik pada program yang harus dipilih dengan warna biru.
    • Pada PC, klik tombol awal kiri bawah. Di bilah pencarian, ketik notes dan klik aplikasi yang akan muncul di hasil.


  2. Rekatkan kode HTML ke dalam dokumen.
    • Di Mac, cukup klik di badan dokumen dan tekan "Command + V". Anda kemudian harus mengklik format di bagian atas layar dan kemudian pada Lihat secara sederhana e setelah menempelkan kode.
    • Pada PC, klik di badan dokumen dan rekatkan kode dengan menekan "Ctrl + V".


  3. Simpan file. Cukup klik pada tombol berkas di kiri atas jendela dan kemudian Simpan sebagai ... pada PC atau Simpan ... pada Mac di menu drop-down yang muncul.


  4. Tambahkan ekstensi HTML. Setelah di menu, ketik nama file diikuti dengan ".html" sebelum mengklik rekor. Misalnya, jika Anda ingin memanggil file ini "kalkulator pertama saya", Anda dapat memberikannya dengan nama: "MyPremierCalculette.html".

Bagian 4 Menggunakan kalkulator



  1. Temukan file HTML. Cukup ketik nama file di Spotlight pada Mac atau di bilah pencarian menu Start Windows. Tidak perlu mengetikkan ekstensi file.


  2. Klik untuk membukanya. Browser default Anda harus membuka kalkulator di tab baru.


  3. Klik pada tombol untuk menggunakannya. Hasil perhitungan Anda akan muncul di bilah yang disediakan untuk tujuan ini.

Cara Membuat Lampion Kertas

Vivian Patrick

Boleh 2024

Tentukan ukuran dan jumlah trip lampu enter Anda. Jumlah trip akan epenuhnya mengubah tampilan enter. Jarak 2,5 cm adalah normal.Buatlah tabung. Ambil kedua ujung kerta dan gulung menjadi atu untuk me...

Cara Membuat Cover Notebook

Vivian Patrick

Boleh 2024

Ucapkan elamat tinggal pada ampul notebook ku am Anda yang ama eperti milik orang lain. aatnya membuat buku catatan Anda unik! Kami akan berbicara tentang penutup kain, pita wa hi, glitter, decoupage,...

Populer Di Portal