Языки гипертекстовой разметки (Гипертекстовая технология)

Содержание:

ВВЕДЕНИЕ

На сегодняшний день глобальная сеть Интернет остается самым популярным информационным средством, проникающим практически во все сферы человеческой жизни. В его основе, помимо технологии передачи и хранения данных, лежит гипертекстовая технология. Она позволяет преобразовывать линейную форму текста в иерархическую и представлять его в виде фрагментов, образующих сеть или граф. Для реализации данной технологии были разработаны языки разметки, впоследствии получившие широкое применение во Всемирной паутине (WWW), что обуславливает актуальность данной курсовой работы.

Объектом исследования курсовой работы является Web-технология. Предмет исследования – языки разметки HTML, XML, XHTML.

Цель данной курсовой работы – обзор языков гипертекстовой разметки, для достижения которой, были определены следующие задачи:

1. Подбор и анализ научной и справочной литературы по теме данной курсовой работы;
2. Рассмотрение основных терминов и определений;
3. Исследование принципов представления и передачи информации в сети Интернет;
4. Изучение особенностей языков HTML, XML, XHTML.

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

ГОСТ Р 52872-2012, устанавливающий термины и определения основных понятий в области веб-технологий [1];

ГОСТ Р ИСО 9241-151-2014, являясь руководством по пользовательским веб-интерфейсам, также содержит определения основных понятий предмета исследования [2];

Учебное пособие И.Н. Васильевой «Web-технологии», содержит теоретические сведения об объекте исследования и принципах распространения информации во Всемирной паутине [3];

В учебном пособии Зудиловой Татьяны Викторовны, доцента факультета инфокоммуникационных технологий Университета ИТМО, изложен перечень основных возможностей языка HTML [4];

Приложение №5 учебника Льюиса Дирка и Петера Мюллера: Java7 представлены основы синтаксиса HTML [5];

Учебное пособие «Основы языка гипертекстовой разметки HTML» Наместникова С.М., изложены базовые сведения о языке HTML [6];

В учебном пособии Одиночкиной Светланы Валерьевны изложены принципы использования языка разметки XML [7];

Учебное пособие доцента кафедры информационных технологий КГУ Синицы Сергея Геннадьевича «Веб-программирование и веб-сервисы» содержатся важные теоретические аспекты веб-разработки, описана архитектура Web и возможности HTTP [8];

На официальном сайте Новосибирского государственного технического университета «ФБГОУ ВПО» размещен онлайн-учебник для студентов, в котором содержится информация об интернет-браузерах [9];

Официальный сайт «Консорциума Всемирной Паутины» W3C, находится подробное описание и API разработанного ими языка HTML [10].

1. ГИПЕРТЕКСТОВАЯ ТЕХНОЛОГИЯ

1.1 Термины и определения

Браузер (browser) – программное средство пользователя для получения и чтения гипертекста, просмотра содержимого web-страниц и перемещения между гипертекстовыми узлами [2, c.8] [9]. Web-браузер предназначен для извлечения, отображения и взаимодействия с Web-контентом в сети Интернет [1, c.4].

Гипертекст (hypertext) – текст, имеющий связь с дополнительной информацией через гиперссылки [6, c.27].

Гипертекстовый документ (hypertext document) – текстовый документ, имеющий гиперссылки в своем содержании [1, c.6].

Интернет (Internet) – Глобальная информационная система, части которой взаимосвязаны по всему миру, состоящая из логически связанных узлов посредством протоколов TCP/IP [1, c.6] [2, с.8] [9].

Контент (content) – информационное наполнение web-ресурса. Как правило, представляется в виде текста, графики или мультимедиа (аудио и визуальной информации) [1, c.] [2, с.8].

Пользовательский web-интерфейс (Web user interface) – интерактивные инструменты взаимодействия пользователя с web-ресурсом [2, с.11].

Ссылка, гиперссылка (link, hyperlink) – Web-ссылка, расположенная внутри какого-либо документа, предназначенная для перехода к другой части данного документа, либо к другому документу [2, с.9].

Протокол HTTP (Hyper Text Transfer Protocol) – протокол передачи данных в формате гипертекста на основе технологии клиент-сервер [9].

IP-адрес (IP Address) – уникальный 32-битный адрес сетевого узла, состоящий из номера сети и номера самого узла [1, c.7] [9].

Протокол TCP/IP (Transmission Control Protocol) – протокол управления передачи данных, определяющий правила для разделения данных на пакеты и проверки корректности и целостности данных при их передаче [1, c.8];

URL (uniform resource locator) – унифицированный индексатор ресурса, средство идентификации веб-страниц в Интернете, посредством указания уникального адреса ресурса [2, c.10].

Web-сайт (site) – узел глобальной сети Интернет, как правило, наполненный тематическим контентом (содержимым). Представляет собой набор взаимосвязанных веб-ресурсов. [2, c.11] [1, с.4].

Web-страница – составной элемент сайта, либо файл, хранящийся на сервере [1, c.4].

WWW (World Wide Web) – Всемирная паутина, единое информационное пространство, объединенное в глобальную вычислительную сеть и состоящее из связанных между собой web-страниц [9].

1.2 Представление и передача информации в сети Интернет

Web-страницы представляют собой файлы текстового формата. Так как любая операционная система может распознать неформатированный текст, существует возможность отправки подобных файлов на любой компьютер посредством сети Интернет [3, c.5]. Вывод данной информации на экран компьютера, осуществляется при помощи специально разработанного программного обеспечения – браузера. Чтобы структурировать передаваемую информацию, форматировать текст в блоки, добавлять графические и мультимедийные элементы, а также размещать гиперссылки на другие web-страницы, необходим набор специальных инструкций для браузера. Такие инструкции записываются в виде тегов (tag). Мультимедийная информация (изображения, звук, видео), которая может быть встроена в гипертекстовый документ, хранится в виде отдельных файлов [6, c.7].

Теги могут определять:

- внешнее оформление документа, а именно – параметры шрифта (его разновидность, размер и цвет), оформление фона (цвет, использование растовых и векторных изображений при его оформлении);

- структуру страницы – расположение текста, графики и прочей мультимедийной информации;

- гиперссылки – ссылки на внутренние ресурсы сайта, либо на иные источники Интернета [3, c.5].

Страницы сайтов представляются виде кода HTML и хранятся в памяти сервера. Различают статические (рисунок 1) и динамические (рисунок 2) сайты. Статический сайт отличается от динамического тем, что структура первого определяется заранее, в то время как динамические сайты обновляются в режиме реального времени посредством специальных сценариев – скриптов [3, c.7].

Рисунок 1. Статический сайт

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

Динамический сайт состоит из шаблонов web-страниц и скриптов (сценариев), которые хранятся в базе данных в виде отдельных файлов. Динамичность осуществляется посредством изменения контента и элементов навигации, в то время как шаблоны дизайна остаются прежними.

Обновление данных на динамическом сайте может осуществляться тремя способами:

- Генерация выполняется при помощи скриптов на стороне сервера;

- Генерация выполняется на стороне клиента;

- Смешанная (комбинированная) генерация, выполняется как на стороне сервера, так и на стороне клиента [3, c.7-8].

Рисунок 2. Динамический сайт

В момент запроса web-страницы, в браузере происходят следующие процессы:

1. При указании имени домена, вместо IP-адреса идет обращение к операционной системе для получения IP адреса web-ресурса;
2. Браузер выполняет соединение с сервером web-ресурса посредством протокола TCP/IP с адресом, указанным в адресной строке, либо на порт по умолчанию (80й порт) [8, c.22];
3. На сервер web-ресурса приходит запрос от браузера на получение страницы;
4. На сервере web-ресурса происходит обработка запроса. В случае успешной обработки, сервер отправляет ответ с содержанием, в противном случае, генерирует код ошибки;
5. При получении ответа от сервера web-ресурса, браузер выводит полученные данные на экран. Если получен HTML документ, браузер производит извлечение гипертекстовой информации, а также загружает мультимедийную информацию, при ее наличии;
6. Соединение с сервером web-ресурса закрывается [8, c.13].

2. ЯЗЫКИ ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ

2.1 Язык гипертекстовой разметки HTML

Документы, оформленные посредством тегов языка гипертекстовой разметки HTML (Hyper Text Markup Language), представляют собой текстовые файлы, содержащие помимо собственного текста, команды для отображения документа на экране. Язык HTML разработан для Web, и имеет открытый стандарт [4, c.5] .

Каждый HTML документ имеет основную структуру (рисунок 3), состоящую из тегов разметки (см. приложение 1) [5, c. 414-415] [6, c.7].

Рисунок 3. Основная структура HTML-документа

Выделение заголовков осуществляется при помощи шести пар тегов: от <h1> до <h6>. Данные теги определяют уровни заголовков. Новый абзац начинается с тега параграфа <p>…</p>. Для переноса строки используется тег переноса <br>…</br> [8, c.32-33] [10].

Чтобы выделить некоторые фрагменты текста относительно основного текста, используются теги крупного шрифта <big>…</big>, мелкого шрифта <small>…</small>, полужирного шрифта <b>…</b>, курсива <i>…</i>, подчеркивания <u>…</u>, зачеркивания <s>…</s> и машинописного шрифта <tt>…</tt> [8, c.35] [10] [4, c.13].

Также в HTML есть поддержка нумерованных и маркированных списков. Для этого применяются тег маркированного списка <ul>, тег нумерованного списка <ol> и тег элемента списка <li> (см. приложение 1) [5, c.417] [4, c.16].

Для отображения специальных символов, используется символ &, после которого должен следовать набор букв с шифровкой спецсимвола. Оканчиваться такая конструкция должна точкой с запятой [5, c.418].

Для вставки рисунков используется тег <img>. Весьма популярны форматы изображения JPEG и GIF, которые поддерживаются большинством браузеров. Также при выполнении вставки изображения, необходимо задать размер рисунка и атрибуты для выравнивания окружающего его текста [10] [6, c.23]. На рисунке 4 представлен пример вставки изображения логотипа Консорциума Всемирной Паутины W3C, взятого с их официального сайта. Отображение содержимого выполнено браузером Google Chrome (рисунок 4).

Рисунок 4. Пример работы тега <img>…</img>

В HTML-документах существует возможность размещения гиперссылок при помощи тега <a>…</a> и атрибута «href» с присвоением ссылки URL [10] [6, c.26].

Для отображения табличных данных используется тег <table>…</table>. Отдельные элементы таблицы (строки и столбцы) внутри данного тега. Новая строка описывается тегом <tt>…</tt>, а ее отдельные ячейки тегом <td>…</td>. В случаях, когда ячейки являются заголовками для столбца или строки, тег <td> следует заменить тегом <th> (рисунок 5) [4, c.24] [6, c.39-41].

Данный способ можно также использовать для структурирования страниц, если скрыть линии таблиц [5, 419] [10].

Рисунок 5. Пример описания табличных данных

Существуют различные атрибуты для тега <table>, с помощью которых можно управлять параметрами таблиц.

Для определения ширины таблицы следует использовать атрибут «width», а в качестве единицы измерения ширины можно использовать количество пикселей, либо пропорцию от ширины окна браузера в процентах. Пример использования: <table width=”200”> [6, c.47] [4, c.27].

Атрибут «height» используется для обозначения высоты таблицы. Единицы измерения для данного атрибута указываются аналогично атрибуту «width». Пример использования: <table height=”400”> [4, c.27].

Толщина рамки регулируется значением атрибута «border». При значении данного атрибута равном 0, построение таблицы происходит со скрытой координатной сеткой. Пример использования: <table border=”0”> [6, c.43-44].

Атрибут «frame» (введен с версии HTML 4.0) создан для определения рамки вокруг таблицы. Для данного атрибута существует следующий набор значений:

- Void – рамка отсутствует;

- Above – линия рамки находится сверху таблицы;

- Below – линия рамки находится снизу таблицы;

- Hsides – линия рамка находится сверху и снизу таблицы;

- LHS – линия границы находится слева;

- RHS – линия границы находится справа;

- Vsides – линия границы находится слева и справа таблицы;

- Box – таблица окружена линией со всех сторон.

Пример использования атрибута «frame»: <table frame=”Void”> [6, c.45] [5, c.420-421].

Для определения параметров оформления отдельных ячеек используется атрибут «rules». Данный атрибут имеет следующие значения:

- none – видимые границы отсутствуют;

- all – линии отображаются вокруг каждой отдельной ячейки таблицы;

- groups – линии отображаются между группами ячеек;

- cols – границы отображаются между столбцами;

- rows – границы отображаются между строками.

Пример использования атрибута «rules»: <table rules=”None”> [6, c.45] [5, c.420-421].

Атрибут «cellpadding» определяет расстояние между содержимым и границами ячейки. Пример использования: <table cellpadding =”6”> [6, c.69].

2.2 Расширяемый язык разметки XML

XML (eXtensible Markup Language) – расширяемый язык разметки, созданный для хранения, передачи и обмена данными между различными системами. Тестовый документ, который размечен при помощи данного языка, называется XML-документом (рисунок 6). XML-язык произошел от языка SGML (по сути, он является его подмножеством) и целью его разработки было упрощение машинного анализа документов [10].

Данный язык представляет собой последовательный набор символов, который вставляется в текст для того, чтобы передавать информацию о его строении и выводе. Текстовый документ, построенный на XML языке, содержит как информационное наполнение, так и дополнительную информацию о своей структуре. Подобные документы могут содержать в себе интерактивные элементы, а также содержание иных документов [7, c.6].

Существует три разновидности разметки: стилистическая, семантическая и структурная. Стилистическая разметка формирует внешний вид документа, структурная – его структуру, а семантическая разметка определяет содержание данных и описывает логику их представления [7, c.6].

Рисунок 6. Пример синтаксиса XML

Язык XML основан на элементах – составных частях структуры, обрабатываемых с помощью таблиц стилей. Основой для элемента служат теги разметки, описывающие имя, начало, а также конец элемента. Элементы могут встраиваться друг в друга, в этом случае, элемент, находящийся на верхнем уровне, называется корневым (рисунок 7) [7, c.9] [10].

Рисунок 7. Пример вложенных элементов XML

XML-документ состоит из следующих разделов:

- XML-декларация;

- Пролог;

- Элементы;

- Атрибуты;

- Комментарии [7, c.10].

Объявление (декларация) документа XML, располагается в первой строчке и не является обязательным условием создания документа. Предусмотрены следующие элементы XML-декларации:

Номер версии – является обязательным аргументом. После декларации номера версии следует декларация кодировки, которая содержит значение кодировки символов. Декларация кодировки не является обязательным аргументом. Далее следует декларация автономности, которая также необязательна. Примером декларации XML-документа может служить следующая строчка:

«<?xml version="1.0" encoding="UTF-8" standalone="yes"?>» [7, c.10].

Пролог XML-документа – набор данных, расположенный после корневого тега или элемента документа и содержащий сведения о параметрах документа, например кодировку символов, таблицы стилей, структуру XML-документа и т.д.

Предусмотрена возможность включения в документ инструкций по его обработке для сторонних приложений. Такие инструкции создаются при помощи следующей конструкции: «<? Приложение Содержимое ?>». В первой части данной инструкции определяется система или приложение, вторая часть описывает содержимое инструкции [7, c.11] [10].

Элементы XML-документа оформляются при помощи тегов, устанавливающих границы содержимого (при его наличии) и должны содержать имена, присваиваемые по следующим правилам:

- содержать буквенно-цифровые и прочие символы;

- не должны начинаться со знака препинания или цифры;

- не должны начинаться с ключевого слова «xml»;

- не должны содержать пробелов;

- не допускаются пробелы у кавычек;

- все имена элементов зависимы от регистра;

- обязательно наличие закрывающего тега.

Кроме того, XML-документ в обязательном порядке должен содержать корневой элемент, по отношению к которому, все остальные элементы имеют статус «дочерних».

Примером оформления элемента может служить следующая строчка:

<ElementName> Некоторое содержимое элемента </ElementName > [7, с.12].

Для предоставления дополнительных параметров элементам, применяются атрибуты XML-документа. Оформляются они при помощи пары «имя-значение»: < myElement attribute="value" ></myElement>.

Для атрибутов в XML существуют следующие синтаксические правила:

- атрибут должен декларироваться в открывающем теге;

- количество атрибутов может быть не ограничено;

- атрибуты разделяются при помощи пробелов;

- атрибут должен состоять из имени и значения;

- в рамках одного элемента имя должно быть уникальным;

- запрещено использование пробелов в имени;

- значение атрибута должно быть заключено в кавычки [7, c.13].

Комментарии XML-документа служат для добавления содержимого, которое не предназначено для синтаксического анализа.

Комментарии могут располагаться в прологе, текстовом содержимом и после документа. Недопустимо расположение комментариев внутри тегов и значений атрибутов. Использование двух символов « - » подряд в тексте комментария и использование данного символа в конце комментария также недопустимо. [7, c.14].

Примером оформления элемента может служить следующая строчка: <!—какой-либо текст комментария -->.

2.3 Расширяемый язык гипертекстовой разметки XHTML

XHTML (eXtensible Hypertext Markup language) – расширяемый язык разметки гипертекста, также как и XML, является подмножеством метаязыка SGML (рисунок 8) [3, c.15] [10].

Рисунок 8. Эволюция языков разметки

XHTML весьма схож с HTML, однако зависит от синтаксических правил XML. Назначением данного языка является отображение правильно оформленных данных в браузере [3, c.17].

Структура XHTML-документа представляет собой корневой HTML-документ с объявлением doctype (тип описываемого документа). Документ разделяется на головную (head) и основную (body) части. В головной части содержится информация, предназначенная для поисковых систем и браузера. Как правило, подобная информация не отображается на дисплее. Основная же часть содержит контент web-ресурса, который предназначен для вывода на дисплей (рисунок 9) [3, c.18].

Рисунок 9. Структура XHTML-документа

Для разделения головной и основной части, следует использовать соответствующие теги. Title – является обязательным тегом и должен быть указан в головной части документа. Такие заголовки отображаются в закладках браузера и выводятся поисковыми системами в результатах поиска [3, c.17].

Головная часть документа может содержать тег meta (необязательный), который служит для описания кодировки web-страницы. В документах типа Frameset (содержащих фреймы) основная часть может вовсе отсутствовать, так как ее будет заменять фреймовая структура. Следующая иллюстрация представляет пример минимального документа XHTML (рисунок 10) [3, c.19].

Рисунок 10. Пример описания минимального XHTML-документа и его отображения в браузере Google Chrome

Для форматирования текста и разделения его на блоки используются теги форматирования. Данные теги подразделяются на два уровня: блока и текста [3, c.19].

Тег, уровня блока <p>, служит для форматирования абзаца, отделенного от основного текста при помощи пустых строк. Тег <div> тоже служит для описания абзаца, но в отличие от <p>, не имеет дополнительного форматирования. Такой тег часто используют для того, чтобы группировать блоки [10].

Теги шести уровней заголовков от <h1> до <h6> визуально отображаются шрифтом определенного размера, в зависимости от уровня (h1 – самый крупный, а h6 – самый мелкий) [10].

Тег <blockquote> форматирует блок с дополнительным отступом, выделяется аналогично тегу <p>.

Тег <pre> используется для переформатированного текста, разбиваемого на табуляции, строки и пробелы.

Тег <br> служит для окончания текущей строки, а тег <hr> выполняет вставку горизонтальной линии [3, c.19].

ЗАКЛЮЧЕНИЕ

Интернет, каким мы видим его сегодня, стал возможен благодаря внедрению гипертекстовой технологии в IT. Существует масса инструментов для создания полнофункциональных web-приложений. Вместе с тем, с каждым годом web-технологии совершенствуются, а глобальная сеть разрастается и усложняется. На данный момент, реализация гипертекстовой технологии во многом облегчена для web-разработчика, когда существует множество программных решений для автоматической верстки web-страниц. И это несмотря на простоту web-дизайна и низкого порога вхождения в данную отрасль IT.

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

Главной проблемой в глобальной сети Интернет, на сегодняшний день, остается обеспечение безопасности web-приложений. Облачное хранение персональных данных, большие объемы информации, хранящиеся на персональных компьютерах пользователей интернет, все это подвержено риску в плане защиты данных, так как злоумышленники, наряду с развитием IT-технологий, также развивают и совершенствуют свои инструменты.

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. ГОСТ Р 52872-2012 Интернет ресурсы. Требования доступности для инвалидов по зрению. Дата введения 01.01.2014. // Опубликован: М.: Стандартинформ, 2014 год. Официальное издание.
2. ГОСТ Р ИСО 9241-151-2014 Эргономика взаимодействия человек – система. Дата введения 01.12.2015. // Опубликован: М.: Стандартинформ, 2015 год. Официальное издание.
3. Васильева И.Н. Web-технологии: учебное пособие / И.Н. Васильева, Д.Ю. Федоров. – СПб.: Изд-во СПбГЭУ, 2014. – 67с.
4. Зудилова Т.В. Web-программирование HTML / Т.В. Зудилова, М.Л. Буркова. – СПб: НИУ ИТМО, 2012. – 70 с.
5. Льюис, Д. Самоучитель Java 7: Пер. с. нем. / Д. Льюис, П. Мюллер. – СПБ.: БХВ-Петербург, 2016. – 464 с.
6. Наместников С.М. Основы языка гипертекстовой разметки HTML и CSS: Учебное пособие / С. М. Наместников. – Ульяновск: УлГТУ, 2014. – с.
7. Одиночкина, С.В. Основы технологий XML: учебное пособие / С.В Одиночкина, СПб: НИУ ИТМО, 2013. – 56 с.
8. Синица С.Г. Веб-программирование и веб-сервисы: учебное пособие / С.Г. Синица. Краснодар: Кубанский гос. ун-т, 2013. 158с.
9. Официальный сайт «ФБГОУ ВПО "Новосибирский государственный технический университет» // Онлайн-учебник [Электронный ресурс]. URL: http://optic.cs.nstu.ru/files/CC/C/Lit/Informatica/info/annotation.html (Дата обращения: 24.12.2018г.)
10. Официальный сайт «Консорциума Всемирной Паутины» // A vocabulary and associated APIs for HTML and XHTML [Электронный ресурс]. URL: https://www.w3.org/TR/html50 (Дата обращения: 24.12.2018г.)

Приложение 1

Синтаксис HTML