Особенности языка 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: теги закрытия, предназначенные для завершения всех процессов.
Пошаговое руководство по написанию калькулятора
-
Скопируйте указанный ниже код. После того, как код будет закрашен синим цветом, нажмите "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> |
-
Запустите текстовый редактор. Отдайте предпочтение Блокноту или редактору с поддержкой вкладок TextEdit.
-
Вставьте HTML- код. Если у вас ОС Windows, нажмите по документу и используйте комбинацию клавиш "Ctrl+V". При работе в Mac удерживайте комбинацию "Command+V". После кликните на меню "Формат" и "Создать текстовый документ".
-
Для сохранения файла кликните на "Файл", после чего выберите "Сохранить как", если работаете в Windows. В Mac нужно нажать "Сохранить".
-
Имя файла должно содержать расширение .html. Если вы решили назвать файл "Myfirstcalculator", сохраните его как Myfirstcalculator.html.
-
Найдите файл, который вы создали. Для этого воспользуйтесь кнопкой "Пуск".
-
Откройте файл, щелкнув левой кнопкой мыши.
-
Чтобы произвести расчет, нажимайте на необходимые кнопки. Результат высветится в строке "Ответ".
Если вам не нравится внешний вид созданного калькулятора, его можно изменить с помощью HTML-стилей.
