Файл: Языки гипертекстовой разметки (Возможности применения технологии HTML в образовательном процессе).pdf

XML (англ. eXtensible Markup Language -расширяемый язык разметки). Свое название XML получил по той причине, что в нем нет фиксированного формата, как в HTML. В то время как язык HTML ограничивается набором твердо закрепленных тегов, пользователи XML могут создавать свои собственные тэги, которые бы отвечали тематике документа. Таким образом, XML — это метаязык. Этот язык используется в качестве средства для описания грамматики других языков и контроля за правильностью составления документов.

Документ XML выглядит во многом похожим на HTML. В XML существуют открывающие, закрывающие и пустые тэги. Однако, в отличие от HTML, правила относительно тегов более строгие. Например, смысл тега зависит от регистра, а каждый открывающий тег должен во всех случаях иметь парный закрывающий тег. Кроме того, теги в документе могут быть вложены друг в друга^[8].

XML служит для хранения, передачи и обмена данными. С помощью XML вы можете осуществить обмен данными даже между несовместимыми системами. В настоящее время компьютеры и базы данных хранят информацию в самых разнообразных и несовместимых форматах. Преобразование данных в XML формат сделает данные доступными для самых различных типов программ^[9].

Wiki — веб-сайт, структуру и содержимое которого пользователи могут сообща изменять с помощью инструментов, предоставляемых самим сайтом. В идеале в Wiki пользователь имеет права на редактирование любой страницы и создания своих. При этом не обязательно знать какие-либо сложные языки разметки. Для форматирования текстов может использоваться Wiki-разметка, позволяющая создавать функциональный и корректный гипертекст даже тем, кто не знает html. Чтобы отредактировать текст в Wiki, обычно достаточно нажать кнопку «редактировать» или даже просто дважды кликнуть по тексту. Внесение правок не вызовет никаких проблем и у новичка.

Wiki-разметка максимально проста: основные её правила, достаточные для редактирования и создания новых материалов, можно узнать за считанные минуты. В Wiki сохраняются все изменения, произошедших со всеми статьями с момента их создания. В любой момент можно сравнить две версии одной и той же статьи, увидеть, какие изменения были внесены, откорректировать страницу снова или просто вернуться к старой версии. Исправить нанесенный ущерб проще, чем его нанести. Ну и, конечно же, у администраторов всегда есть возможность заблокировать изменение той или иной страницы или разрешить редактирование только определенным пользователям. Одной из особенностей Wiki является гипертекстовость: связь страниц и подразделов сайта через контекстные гиперссылки.

BBCode (от англ. Bulletin Board Code) — язык разметки, используемый для форматирования сообщений на многих электронных досках объявлений (BBS), форумах, блогах, гостевых книгах и чатах. При создании сообщений, текст которых необходимо отформатировать, окружают специальными BBCode тегами — которые очень похожи на HTML-теги, но отличаются от последних тем, что заключены в квадратные скобки (“[ и ]”). BBCode был придуман с целью предоставить более простой, безопасный и ограниченный по сравнению с HTML способ форматирования сообщений. Первоначально на многих форумах использовалась HTML-разметка, что могло приводить к побочным эффектам: искажению разметки на странице или же к запуску JavaScript-сценариев^[10].

Отличие BBCode от HTML в том, что язык разметки HTML можно использовать в любом статическом сайте — его по умолчанию понимают и отображают правильно все известные браузеры.С BBCode другая ситуация. Он может использоваться только под управлением какого-нибудь движка — браузеры не воспринимают чистый BBCode. Перед отображением страницы движок форума производит разбор текста, затем преобразует его в HTML-код.

Textile — простой язык разметки, позволяющий осуществить форматирование текста без HTML-кодирования, подобно BBCode, но обладающий большими возможностями. Textile используется в системе управления содержимым Textpattern, также встроен в некоторые Wiki. Textile автоматически преобразует текст в разметку, отслеживая абзацы в тексте. В тексте также можно непосредственно использовать HTML-разметку, когда возможностей Textile не хватает для необходимого форматирования в документе.

Глава 2. Изучение языков разметки на примере HTML

2.1. Преимущества и недостатки языка HTML

Использование языка программирования нового поколения позволяет создавать веб-документы с более простой структурой и чистым кодом. В отличие от предыдущей версии, пятое поколение языка программирования использует вместо контейнеров div семантические элементы nav, article, header, footer, aside и section. Ко всему прочему, HTML5 существенно облегчает работу с файлами мультимедиа: так, пользователи могут слушать музыку и смотреть видео прямо в браузере без использования Adobe Flash и прочих приложений. Дополнительные программы не потребуются и при размещении фотографий и прочей графики. Метаморфозы затронули также процесс ввода данных, который в пятом поколении языка программирования стал намного проще и безопаснее^[11].

Если в предыдущей версии система сообщала об ошибке ввода данных постфактум, то теперь пользователь будет оповещён незамедлительно, что снимет массу проблем, связанных с отправкой неверно составленных документов. Что касается внешнего вида, то новый язык программирования существенно расширяет возможности оформления сайтов и приложений, за счёт чего html 5 игры и сайты станут ещё более оригинальными и интересными. Благодаря новой функции Canvas, которая реализована в пятой версии веб-языка, можно будет размещать на сайтах небольшие html 5 игры, анимацию и динамическую графику без использования дополнительных программ.К тому же данная функция позволяет создавать качественно новые html 5 игры и пользовательские интерфейсы^[12].

Одним из тонких мест нового поколения веб-языка является защита данных. При использовании HTML 5 на винчестере пользователя долгое время хранится большой объём данных, что позволяет злоумышленникам осуществлять несанкционированный доступ к ресурсам компьютера с целью сбора конфиденциальной информации. Некоторая уязвимость HTML 5 имеет место быть и в сфере игр. Так, контент не может похвастаться высокой производительностью, платформы весьма ограничены в своём применении, а на создание контента с использованием HTML 5 требует больших затрат ресурсов и времени^[13].

Ко всему прочему, до недавнего времени поддержкой HTML 5 могли похвастаться далеко не все браузеры. Несмотря на то, что сегодня ситуация в корне изменилась, и теперь абсолютное большинство программ распознают пятое поколения языка программирования, всё же остаются единичные экземпляры, которые с ним до сих пор не знакомы. Самым совместимым с HTML 5 считается браузера Chrom, а именно его 18-я версия. Программа, создателем которой является Google, имеет модуль Canvas 2D, который существенно облегчает работу в ресурсами, разработанными с помощью HTML 5. Впрочем, недостатки новой версии языка программирования не снижают его популярности даже среди таких гигантов, как YouTube, Google и т.д., которые активно осваивают данную веб-технологию.

Огромный вклад в расширение практического использования нового языка программирования сделала корпорация Google, которая любезно предоставила свои стартовые страницы, чтобы рекламировать на них html 5 игры, сайты и веб-приложения. Ярким примером использования расширенных возможностей языка является страничка http://www.google.com.hk/intl/zh-CN/landing/shuixia/, которая предназначена для поздравления жителей Гонконга. Если пощёлкать компьютерной мышкой ниже вотерлинии, то обычная стартовая страница Google превратится в островок удовольствия.

Ещё один пример применения возможностей HTML 5 в Google – это визуализация главной странички в форме аркадной игрушки в духе Кибериады, что было сделано в честь дня рождения Станислава Лемма. Для того, чтобы освоить весь безграничный потенциал нового языка Интернета, необходимо пройти курс обучения. Желательно, чтобы обучение происходило в игровой форме. Такую уникальную возможность предоставляет сайт http://html5game.ru/, который радует пользователей с самой первой страницы – наводя мышку на шапку, можно с удовольствием наблюдать, как она разлетается на сотни шариков, а потом вновь возвращается в своё исходное состояние^[14].

В учебных целях сайт предлагает широкий инструментарий по созданию html 5 игр, а это, как известно, лучший способ освоить новый язык программирования. Немалую обучающую ценность несёт в себе графический редактор http://www.picozu.com/editor, который позволяет рисовать, пользуясь инструментарием, разработанным в HTML5.

2.2. Синтаксический анализатор HTML в браузерах

Задача синтаксического анализатора HTML – разобрать исходный текст HTML файла и на его основе построить синтаксическое дерево. К сожалению, ни один из стандартных анализаторов не подходит для языка HTML. HTML невозможно определить с помощью контекстно-свободной (бесконтекстной) грамматики, с которой работают автоматические синтаксические анализаторы.

Существует формальный стандарт определения HTML – формат DTD (Document Type Definition), однако его грамматика не является бесконтекстной. На первый взгляд это может показаться странным, так как язык HTML во многом схож с XML; кроме того, оба этих языка произошли от стандартного обобщенного языка разметки SGML. В ходе развития технологий разработки web-документов язык HTML совершенствовался и, начиная с версии HTML4, перестал полностью соответствовать структуре языка SGML. Кроме того, синтаксис языка перестал быть строгим: вместе с развитием Интернета браузеры научились исправлять за разработчиками разного рода ошибки, например, потерянные теги (открывающие или закрывающие). Все эти нововведения привели к тому, что для современного HTML становится очень сложно формально определить грамматику^[15].

Таким образом, грамматика HTML не является контекстно-свободной, поэтому его анализ нельзя выполнить ни с помощью стандартно сгенерированных анализаторов, ни с помощью анализаторов для языка XML. Полученное синтаксическое дерево называют DOM-деревом. DOM – объектная модель документа (Document Object Model) – служит для описания структуры и представления HTML-документа. Кроме того, DOM-дерево является главным интерфейсом взаимодействия для внешних объектов, таких как Javascript код.

Модель DOM практически идентична разметке. Рассмотрим небольшой пример разметки (рис. 1):

Рисунок 1. HTML-код

На рисунке 2 представлено DOM-дерево для данной разметки.

Рисунок 2. DOM-дерево

Спецификации DOM, как и сам язык HTML, разрабатывает World Wide Web Consortium (W3C). Это универсальная спецификация для работы с документами. В специальном модуле описаны элементы, характерные для HTML. Под словами "дерево содержит узлы DOM" подразумевается, что дерево состоит из элементов, которые реализуют один из интерфейсов DOM. В браузерах применяются специфические реализации, обладающие дополнительными атрибутами для внутреннего использования.

Рассмотрим этапы создания дерева для следующего примера (рис. 3):

Рисунок 3. Пример HTML-кода

1. Начальное состояние анализатора – исходное состояние: последовательность токенов, полученная в результате лексического анализа;

2. Анализатор получает токен "html". Состояние меняется на "до html", после чего токен обрабатывается еще раз, но уже в новом состоянии;

3. Анализатор создает элемент HTMLHtmlElement и добавляет его к корневому объекту Document. Состояние меняется на "до head";

4. Анализатор получает токен "body". Несмотря на то, что в коде нет тега "head", элемент HTMLHeadElement будет автоматически создан и добавлен в дерево, так как элемент "head" является обязательным. Состояние меняется на "внутри head" и сразу же на "после head". После повторной обработки токена "body" элемент HTMLBodyElement создается и добавляется в дерево. Состояние меняется на "внутри body";

5. Анализатор получает первый токен строки "Пустой документ", что ведет к созданию узла Text и добавление его к объекту HTMLBodyElement. Далее к созданному узлу добавляются остальные символы;

6. Анализатор получает закрывающий токен "body". Состояние меняется на "после body";

7. Анализатор получает закрывающий токен "html". Состояние меняется на "после после body";

8. Как только будет получен токен конца файла (EOF), анализ завершается.

2.3. Возможности применения технологии HTML в образовательном процессе

В современном мире всё большее влияние на различные сферы деятельности оказывает Всемирная сеть. Раньше любую информацию (новости, познавательные и развлекательные программы) мы получали через радио, позднее – через телевизор, а сейчас, в основном, через Интернет.