Интерактивный HTML

Большинство программистов ограничивается только самыми известными языками — Pascal, C++, Assembler, Visual Basic. Многим из них рано или поздно приходится сталкиваться с языками гипертекстовой разметки (Hyper Text Markup Language). Но вряд ли им доводилось делать интерактивные программы на вышеуказанном языке HTML. А почему бы и нет?

О языке «Hyper Text Markup Language»
HTML представляет собой несложный язык, основанный на тэгах. Это общепринятый язык для публикации информации в World Wide Web. Используется при верстке сайтов. Иногда — для написания маленьких offline-документов (статьи, FAQ, электронные учебники). Но мы будем рассматривать более сложные «программы», такие как энциклопедии, мини-игры, калькуляторы, тесты и прочая offline/online-чепуха.
Язык HTML создавался для ручной разработки, поэтому не питайте доверия к визуальным редакторам (WISIWYG — «что вижу, то и получаю»), вроде FrontPage и Microsoft Word. Особенно для создания мини-программ на HTML, где требуется умение хорошо владеть JavaScript и CSS (Cascade Style Sheets). Я не буду учить вас работе с языком на уровне текстового редактора, где и создают гипертекстовые документы. Это вы можете прочитать в специальной литературе, благо ее хватает. Эта статья рассчитана на людей, уже не раз набивавших на клавиатуре тэги для своего сайта, но еще не столкнувшихся с таким понятием, как программирование на HTML.

Следует отметить, что программирование на HTML — это, в принципе, новинка. Люди, работающие с HTML, называются не программисты, а кодеры. А главный продукт их деятельности — это сайт. В этой статье я решил подать новую идею — программирование на HTML не как на веб-языке, а как на полноценном Языке программирования Высокого Уровня (ЯВУ).

Преимущества HTML
Во-первых, это требования к знаниям. Язык HTML довольно прост, и для свободного оперирования на его изучение может уйти от одной до нескольких недель. Это при условии, что вы заранее запасетесь пятью-шестью хорошими электронными учебниками. Внимание! Не читайте учебники, где нет ни слова о CSS и JavaScript. Конечно, классического HTML на первое время вам хватит, но это только при верстке обычных страничек и только на первое время…
Во-вторых, это требования к вашему ПО. Для написания программ на HTML необходимы только Блокнот, Windows 98 (или выше) и ваши руки, «прямые», естественно. Для использования достаточно одной ОС.
И, наконец, в-третьих. Возможности обычного HTML невелики без приятных мелочей, которые его дополняют. Среди них CSS, JAVA-апплеты, JavaScript, Flash, Cookies. Они и делают HTML интерактивным.

Несколько ложек дегтя
Они есть всегда. И связано это с тем, что при создании языка HTML не предполагалось, что кто-то будет пользоваться им для написания программ и игр. Отсюда следует:
– ваша ОС должна поддерживать HTML со всеми необходимыми дополнениями (CSS, JavaScript и прочие), в худшем случае программа не заработает;
– все-таки это HTML, а он не всесилен, отсутствует возможность работать со сторонними файлами на жестком диске, кроме тех, что предусмотрены: проигрывать музыку и отображать графику еще можно, а вот запускать сторонние программы без разрешения на то пользователя увы, уже нельзя; нельзя также редактировать, копировать и выполнять другие операции с файлами;
– открытость кода: как бы вы ни старались, любой человек может посмотреть устройство программы, многих программистов это не устраивает;
– ограниченность работы с графикой: максимум, чего вы добьетесь, — это последовательное проигрывание картинок и передвижение их по экрану, полноценный графический движок тут не сделаешь, да и не нужно — мы ведь маленькие программки делать собрались, а не мощные игры.

Программы на HTML
От теории медленно переходим к практике. Сначала отдельно отмечу основные элементы HTML, которые вам обязательно пригодятся, и без которых ваша программа не будет являться программой.
1. Фреймы. Позволяют открыть в окне браузера сразу несколько документов. Очень полезный элемент для разного рода энциклопедий и больших учебников, когда меню выносится в отдельный элемент. Мною фреймы использовались для создания игры-книги, где их 14 штук.
2. CSS. Используется в основном для форматирования текста (изменение цвета, шрифта, фона и так далее). Способен заменить стандартные тэги HTML для форматирования текста, такие как , , и тому подобные. Очень удобен и прост в использовании, к тому же имеет широкий ряд возможностей.
3. JavaScript. Несложный язык, считается наследником C++. С его помощью можно создавать мелкие игры, такие как крестики-нолики, шашки, логические игрушки или даже мелкие аркадки. Также незаменим при увеличении функциональности и интерактивности гипертекстового документа.
Существуют еще JAVA-апплеты (ничего общего с JavaScript), Flash, Cookies и прочие «вкусности», но на них в этой статье я останавливаться не буду.
В качестве примера программы на HTML ниже приведен самый примитивный ва­риант калькулятора, способного работать с четырьмя действиями (умножение, деление, сложение и вычитание).




Число 1:
Действие:
Число 2:

Результат:



Для проверки создайте файл «calculator.html» и впишите в него весь вышеприведенный код. У вас получится такой вот милый мини-калькулятор на HTML и JavaScript. При желании его можно и доработать, тогда получится калькулятор более функциональный.
В чем же смысл создания программ на HTML, когда имеется возможность пользоваться тем же, скажем, Pascal'ем? Причины я выделил ниже.
1. Есть много людей, недостаточно знающих программирование на полноценных ЯВУ, но хорошо владеющих веб-языками. Иногда таким людям может быть проще намахать маленькую программку на HTML, чем изучать какой-нибудь ЯВУ для создания аналога.
2. Так как HTML — это веб-язык, то соответственно, программы, написанные на нем, идеально подходят для Web'а (теоретически — они только для него и подходят…).
3. HTML-программы написать проще, чем их аналоги на ЯВУ. Эта простота кажется еще более значимой, если программа является «навороченной».

Примеры
Идея создания программ на HTML свежа, поэтому примеры вы едва ли найдете. Но, как ни странно, они есть…
www.creativearts.com/scientificcalculator/ — мощный online-калькулятор. Сделан полностью на HTML и JavaScript.
indat.team-x.ru/projects.php?p=stone — здесь можно скачать мою игру-книгу (1.4 Мбайт) на HTML, JavaScript, CSS, с использованием фреймов и прочих наворотов.
193.151.73.87/games/lemmings/ — очень милая online-аркада «Лемминги» на HTML и JavaScript. Советую для общего ознакомления с возможностями скриптов, а они (возможности, не скрипты) велики (см. скриншот).
http://js.by.ru/files/editor.zip — простенький HTML-редактор на HTML (59 Кбайт). С виду похож на Блокнот, только немного красивее и более функциональный.
Если у вас есть ссылки на другие программы на HTML, шлите их мне.

В заключение
Идея подана, вам осталось ее переварить и принять во внимание. Дальнейшую разработку я возлагаю на ваши плечи. А всем заинтересовавшимся желаю удачи в освое­нии новой сферы деятельности!


Рекомендуем почитать: