Файл: «Языки гипертекстовой разметки» (Языки гипертекстовой разметки).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].

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

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

Браузер (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].

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

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].

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

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

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

У каждого подобного документа есть основная структура (рисунок 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>, используются для того, чтобы выделить необходимые фрагменты текста, относительно основного массива.

Также у HTML есть возможность поддерживать нумерованные и маркированные списки. Для этого применяются три вида тегов:

• тег маркированного списка <ul>;
• тег нумерованного списка <ol>;
• тег элемента списка <li> (см. приложение 1) [5, c.417] [4, c.16].

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

Для работы с визуальными элементами, в частности для вставки в документ рисунков, используется тег <img>. В основном при работе с HTML используют изображения в форматах JPEG и GIF, поскольку те поддерживаются большинством браузеров. При вставке изображения, необходимо также указать размер рисунка и данные для выравнивания окружающего его текста [10] [6, c.23]. Пример вставки изображения логотипа Консорциума Всемирной Паутины W3C представлен на рисунке 4 (изображение взято с официального сайта). Содержимое документа отображает браузер 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].