VISION: active

HOW TO MAKE A SIMPLE CALCULATOR IN HTML

INTRODUCTION:-

Creating a simple web calculator on your own is a pretty basic thing. You can learn this on your own. There are many other tutorials on the internet but it depends on what you choose, you choose which best suits you. I am not going to explain things in deep like explaining you that what is "HTML" ! So , here you will learn "How To Create A Calculator In HTML" not "what is HTML" ?...

REQUIREMENTS:-

You should know some basic knowledge of Web Browsers and typing in notepad.
It will be easy for anyone of age 12+
(If you are -12 and know the basics , you rock !)

LETS BEGIN...

STEP ONE:-

Now first of all, open the notepad which is built-in in windows and many other operating systems.

STEP TWO:-

After that, type in the basic starting tags of HTML i.e <HTML> <head> <title> <body>
below are the starting codes you have to type.

I have inserted the image and not the text as you should write the code yourself so you get practiced.

Now, explaining the code. The first <html> & <head> tags are the base which packs the whole code between them. The 2nd is the <title> & </title> tag which are used to give a title to your html website, app, age etc... And the <style> tag is used to customize things which are placed after that like i have added the <style> tag after the head which will now customize the body.

STEP THREE:-

Now its time to edit your body, now firstly you have to make everything into center so to make it center , use <center> tag and after that we will use <form> tag in which we will type our calculator's name , here i am using "Simple Calculator" name. And after that we will add code for the result of performed actions i.e multiplication , addition , division etc...

STEP FOUR:-

Now in step four, we will add our number buttons.
These are the codes for numbers, don't worry they look huge but they are just exact same, you have to copy paste the same line but only have to change the number and value. And the height and width depends on your choice. The reset button code is just different but don't worry you will understand it.

STEP FOUR:-

Now the fourth step contains just the font tags and end tags of body , html & head... just end these tags with ending slash "/".

STEP FOUR:-

Now the final step. In this step, just save your notepad text file with the (.html) extension and then open your file with your web browser. You can see the image below that how your calculator will look like. Or, download the original source file to see live preview on your browser. Just download it and open it with your web browser.

DOWNLOAD SIMPLE CALCULATOR HTML

INFORMATION:-

This How-To is written by Safeer Ahmed who is the official author of this Tutorial. This How-To is actually for those who have a basic knowledge of HTML.

AUTHOR