Site hosted by Build your free website today!

In this series we will create simple calculator with basic HTML, CSS and JavaScript. Our calculator can only perform basic mathematical operations: addition, subtraction, multiplication and division. You should have HTML and CSS skills to better understand this tutorial.

If you do not know them yet, you do not need to worry. I've made this tutorial as easy as possible for you :)

Why should we do so?

As you suspect, you must create a "button" to enter values ​​and it must display a screen to display these values.

Well, that's basically it!

In fan situations, these are the ingredients that we see:

Display Field for Operators, Processes and Solutions

Key to enter value for display

The calculator is obviously a container-connected table. And as you already know, tables include row rows and columns of tables.

Now you realize, let's start!

This is the original format for HTML documents.


<Head> </ head>


<! - Content ->

</ Body>

</ HTML>

If you do not yet know how to provide HTML scripts, you should see this short tutorial.

The view portion of the web page varies in the <body> </ body> tag.

Before proceeding, you need to understand some HTML vocabulary (words) such as tags, attributes and elements.

Tags: tags are native labels that define parts of your markup in elements and separates them. It contains the keyword surrounded by an angle bracket <>. The content closes between two tags and ends by slash (note: some stand-alone HTML tags, such as image tags).

<! - This is an open and closing sale day ->

<P> </ p>

Features: The property of the HTML component is used to provide additional instructions on a specific HTML tag. Attribute is specified in the original HTML tag.

<! Here's the class function ->

<P class = ""> </ p>

Element: An HTML element usually has an introductory tag and an end tag that contains content.

<! Closing tag tag >> Extending tag tag >>

<P class = "paragraph"> This is a paragraph. </ p>

Well with the default, it's enough. Come dance

To go to our HTML body, use the first form element <form> </ form>. Once created, the "name" attribute with the "calculator" value should be added to the original form tag.


<Head> </ head>


<Form name = "calculator">

</ Form>

</ Body>

</ HTML>

The form element acts as the container for the table containing the main part of the calculator.

Okay, how are you?

After that we have to create tables.

What is a table? No, no furniture!

Sorry I jokingly with my small efforts.

HTML Tables allow web designers to arrange data in rows and columns of data such as rows, images, links, other tables, etc. It is created using the <table> tag, which uses <tr> tags to create table rows and <TD> to create data cells.

The row is horizontal and columns stand in any way.

You should delete all of this text and replace it with text of your own. You can modify any text on your page with the Text formatting tools at the top of the page. To add other content, use the Media and Add-ons tabs. If you'd like to change your style template click on Styles. To add or remove pages use the Pages tab.