RSS
Как сделать калькулятор на HTML
Надоело выполнять математические вычисления с помощью стандартного калькулятора на компьютере? Попробуйте создать калькулятор самостоятельно, используя простой HTML-код. Справиться с этой задачей помогут базовые знания HTML и четкое соблюдение приведенной ниже инструкции. Выполнив несколько несложных действий, вы сможете не только производить расчеты в браузере, но и развить навыки программирования.

Особенности языка HTML

Код языка разметки HTML состоит из огромного количества элементов синтаксиса, определяющих разные параметры страницы. Каждая строка выполняет свою функцию:

  • html: заключает в себе содержимое веб-страницы.

  • head: применяется для хранения служебной информации.

  • title: помещает название документа, отображаемое в браузере при ее открытии.

  • body: определяет область контента HTML-документа, которая показывается в окне браузера.

  • body bgcolor="#": применяется для определения цвета фона документа в стандарте RGB. Пример: # F0E68C – цвет хаки.

  • body text="": используется для подбора цвета текста документа в стандарте RGB. Пример: #800080 – фиолетовый цвет.

  • form name="": содержит имя формы, используемое для идентификации. В вашем случае это "calculator" (калькулятор).

  • input type="": применяется для создания интерактивных элементов управления в веб-формах с целью получения данных от пользователя.

  • value="": задает начальное значение для элемента.

  • onClick="": возникает при нажатии мышью на элемент.

  • br: определяет место переноса строки на новый ряд.

  • /form, /body, and /html: теги закрытия, предназначенные для завершения всех процессов.

Пошаговое руководство по написанию калькулятора

  1. Скопируйте указанный ниже код. После того, как код будет закрашен синим цветом, нажмите "Ctrl+C", если вы используете Windows, или "Command+C", если Mac.


<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'"><br>

<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="7" onClick="document.calculator.ans.value+='7'"><br>

<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+='+'"><br>

<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. Запустите текстовый редактор. Отдайте предпочтение Блокноту или редактору с поддержкой вкладок TextEdit.

 

  1. Вставьте HTML- код. Если у вас ОС Windows, нажмите по документу и используйте комбинацию клавиш "Ctrl+V". При работе в Mac удерживайте комбинацию "Command+V". После кликните на меню "Формат" и "Создать текстовый документ".

 

  1. Для сохранения файла кликните на "Файл", после чего выберите "Сохранить как", если работаете в Windows. В Mac нужно нажать "Сохранить".

 

  1. Имя файла должно содержать расширение .html. Если вы решили назвать файл "Myfirstcalculator", сохраните его как Myfirstcalculator.html.

 

  1. Найдите файл, который вы создали. Для этого воспользуйтесь кнопкой "Пуск".

 

  1. Откройте файл, щелкнув левой кнопкой мыши.

 

  1. Чтобы произвести расчет, нажимайте на необходимые кнопки. Результат высветится в строке "Ответ".

 

Если вам не нравится внешний вид созданного калькулятора, его можно изменить с помощью HTML-стилей.

Вывод

Усвоение языка HTML – долгий и кропотливый труд. Если вам сложно самостоятельно разобраться с элементами HTML, обратитесь за помощью к репетитору по математике, информатике и программированию. Опытный преподаватель научит вас использовать язык гипертекстовой разметки и продемонстрирует все его возможности.