Для создания тестовой программы в HTML потребуется программа Блокнот.
Прежде чем рассмотреть пример написания тестовой программы, познакомимся с основными тегами (командами) языка гипертекстовой разметки HTML, которые могут понадобиться при создании теста. Основные теги всегда парные, т.е. обязательно должен быть открывающийся (в угловых скобках - < >) и закрывающийся тег (</ >). Регистр написания символов в тегах – заглавный или прописной – не играет значения, они воспринимаются программой одинаково, но должны вводится строго в английском языке. Между открывающим и закрывающим тегами вводится текст, который должен быть выведен на экран с учетом указанных параметров.
<html> - обозначение документа
<head> - «голова» HTML-документа
<title> - заголовок странички (то, что высвечивается на синей полоске экрана)
<body> - «тело» документа (то, что будет видно на рабочем поле экрана)
<DIV> - раздел документа
<B> - обозначение полужирного начертания символов
<I> - обозначение курсивного начертания символов
<br> - разрыв строки
Рассмотрим пример программы:
<html>
<head><title> Тест </title></head>
<body>
<div>
<b> Вопрос 1. </b> Что не относится к функциям средств мультимедиа?
<br><input type=radio name=a> Распознавание речи
<br><input type=radio name=a> Выполнение арифметических операций
<br><input type=radio name=a> Считывание текста с бумаги
</div>
<br><div>
<b> Вопрос 2.</b> Какую функцию выполняют внешние устройства:
<br><input type=checkbox name=b> обеспечение взаимодействия ПК с пользователями
<br><input type=checkbox name=b> хранение и обработка информации
<br><input type=checkbox name=b> координация работы всех компонентов компьютера
</div>
<br><div>
<b>Вопрос 3.</b>В Программы для сжатия информации на диске:
<br><select name=c>
<option value=1>драйверы
<option value=2>утилиты
<option value=3>архиваторы
</select>
</div>
<br><input type=button value="Проверить" onClick="test();">
<script>
function test () {
result = 0;
if (a[1].checked) {result++}
if ((b[0].checked)&&(!b[1].checked)&&(!b[2].checked)) {result++}
if (c.value==3){result++}
result=Math.round(result*5/3)
alert("Ваша оценка: " + result)}
</script>
</body>
</html>
Код странички получился довольно объёмным, поэтому разбираться в нём будем по разделам:
· В первом разделе выводится текст первого вопроса, а затем три варианта ответов. Ответы выводятся тегом <INPUT> с атрибутом type=radio, который означает переключатель с зависимой фиксацией (часто такой переключатель называют радио кнопкой). Так как все три радиокнопки образуют единую группу, им даётся одно имя а. Таким образом, мы получаем массив переключателей а[0], а[1] и а[2]. Нумерация ответов начинается с 0.
· Во втором разделе приводится второй вопрос, на который может быть дано несколько верных ответов. Поэтому для этого вопроса мы выводим ответы с помощью переключателей с независимой фиксацией (type=checkbox, флажок). 
Этим переключателям тоже дано единое имя b, которое объединяет их в массив b[0], b[1] и b[2].
· Ответы на третий вопрос выводятся с помощью раскрывающегося списка, формируемого тегом <SELECT>. Каждый элемент списка определяется в теге <OPTION>. При этом имя с даётся всему списку целиком (атрибутом name тега <SELECT>), поэтому обратиться к какому-то элементу списка «персонально» мы не сможем. Для того чтобы определить, какую строчку выбрал посетитель, в каждом теге <OPTION> приводится атрибут value — по значениям этого атрибута мы и распознаем введённый посетителем ответ.
· Четвёртый раздел состоит из единственного тега <INPUT>, выводящего на страничку кнопку с надписью «Проверить». При щелчке по этой кнопке должен запуститься скрипт, проверяющий верность всех выбранных ответов. Как вы уже догадываетесь, в этом скрипте мы не обойдёмся парой команд, поэтому оформим его отдельной функцией, а здесь дадим на неё ссылку (запись onClick="test (); " означает, что где-то на страничке есть функция с именем test (), которую и нужно запустить в ответ на щелчок по кнопке.
· Ну и, наконец, последний раздел, расположенный в теге <SCRIPT>, в котором и записана функция test(). Тег <SCRIPT> может располагаться в любом месте странички, не важно, до или после вызова содержащихся в нём функций.
Ну а теперь рассмотрим, наконец, функцию test ():
· Определение функции начинается с ключевого слова function, за которым следует её имя test (), а затем, в фигурных скобках, тело функции.
· В первой строке определяется значение переменной result, в которой будет накапливаться количество верных ответов. Пока таких ответов 0.
· Во второй строке (if (a[1].checked) {result++}) проверяется, выбран ли второй переключатель а (вы помните, что нумерация переключателей начинается с нуля, поэтому второй переключатель имеет имя а[1]). Если это условие истинно, то
переменная result увеличивается на единицу (операция инкремент обозначается двумя плюсами после имени переменной).
· В третьей команде проверяется сложное условие, которое можно «перевести» так: «если первый переключатель включен (b[0].checked) и (&&) второй переключатель выключен (!b[1].checked) и третий переключатель выключен (!b[2].checked)» (! – означает выключенное состояние переключателя, т.е. отсутствие флажка). В случае истинности этого условия значение переменной result увеличивается.
- В четвёртой команде (if (c.value==3) {result++}) проверяется значение атрибута value элемента с и, если оно равно трём, счётчик result увеличивается.
· После подсчёта количества верных ответов число result переводится в пятибалльную систему и округляется функцией round объекта Math.
· И, наконец, функцией alert выводится оценка за тест.
В данном алгоритме представлены три варианта оформления выбора ответов: радиокнопка, флажок и выбор из списка. Количество вопросов, ответов и вариантов оформления может варьироваться самостоятельно.