Файл: Распределенные системы обработки информации. Языки гипертекстовой разметки.pdf

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

Теговая модель определяет документ как некую совокупность элементов, каждый из которых окружен тегами. Теги, по своему значению, близки к представлению скобок «begin/end» в универсальных языках программирования, которые задают области действия имен локальных переменных, а именно динамику распределения памяти блока. Теги определяют область действия неких правил интерпретации текстовых элементов документа. Контейнерами принято называть элементы документа, которые размечены с помощью HTML. В данном виде может быть записана схема расположения элемента текста в формате HTML:

"элемент":= <"имя элемента" "список атрибутов">, сущность элемента

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

Атрибуты всегда помещаются в начальном теге элемента HTML. Значения атрибутов всегда полезно заключать в кавычки. Наиболее широко используются двойные кавычки, но одиночные кавычки также допустимы.

В некоторых редких ситуациях, когда, например, значение атрибута само содержит кавычки, необходимо использовать одиночные кавычки:

Кроме атрибутов, записываемых вышеописанным способом, для некоторых элементов определены специальные флаги, которые просто указываются как .

Заголовки определяются с помощью тегов от до определяет заголовок самого большого размера, а определяет заголовок самого маленького размера.

Тег комментария используется для вставки комментариев в исходный код HTML. Комментарии будут проигнорированы браузером. Комментарии можно использовать для пояснения кода, что может помочь при редактировании исходного кода в будущем.

Пример:

Гипертекстовая ссылка – это адрес другого HTML документа, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена. Для записи гипертекстовых ссылок в системе WWW была разработана форма, которая называется Universe Resource Locator.

В HTML они (гипертекстовые ссылки) делятся на два класса. Бывают контекстные ссылки и общие. Контекстные ссылки как-бы вмонтированы в тело документа, в то же время, когда общие ссылки связаны со всем документом в целом и при просмотре любого фрагмента документа могут быть использованы. Оба класса ссылок существуют в стандарте языка с самого основания, однако, приоритетной популярностью по началу пользовались именно контекстные ссылки. Эта привело к «атрофированию» механизма задействования общих ссылок.

Но по мере стандартизации интерфейса пользователя и стилей представления информации, разработчики языка вновь вернулись к общим ссылкам для приспособления их к задачам управления этим интерфейсом. Структура HTML документа дает возможность использовать вложенные друг в друга элементы. Можно сказать, что сам документ и является одним большим элементом с именем «HTML».

Новая версия языка гипертекстовой разметки, потенциальные возможности которого гораздо превышают предшественника – это HTML 5. Новые теги и новая семантика упрощают работу написания приложения. НТМL-страницы становятся все более и более логичными: их структура отделяется от визуального оформления. Такой код легко разбирают и читают люди и, благодаря стандартизации, более точно выполняют устройства, какими бы они ни были. Стандартизация и логичность - это то, к чему стремится язык HTML и что требуется от браузеров и других устройств, работающих с ним.

Глава 3. Примеры использования языка HTML

Создание сайта HTML.

 Создадим сайт в блокноте при помощи HTML. HTML-документ должен иметь следующую структуру:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Как создать сайт с нуля - "Нубекс"</title>

</head>

<body>

<h1>Мой первый сайт в блокноте HTML</h1>

<p>Привет! Это мой первый сайт.</p>

</body>

</html>

Скопируйте приведенный код в блокнот (Notepad) и сохраните на компьютере в формате .html. Чтобы теперь посмотреть на нашу веб-страницу, откройте сохраненный файл с помощью браузера (Правой кнопкой мыши -> Открыть с помощью).