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

ВВЕДЕНИЕ

На сегодняшний день глобальная сеть Интернет остается самым популярным информационным средством, проникающим практически во все сферы человеческой жизни. В его основе, помимо технологии передачи и хранения данных, лежит гипертекстовая технология. Она позволяет преобразовывать линейную форму текста в иерархическую и представлять его в виде фрагментов, образующих сеть или граф. Для реализации данной технологии были разработаны языки разметки, впоследствии получившие широкое применение во Всемирной паутине (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].