Преподаватель который помогает студентам и школьникам в учёбе.

«Языки гипертекстовой разметки» (Языки гипертекстовой разметки)

Содержание:

ВВЕДЕНИЕ

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

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

Таким образом, объектом исследования нашей работы становится Web-технология. Предмет исследования, в свою очередь – это языки разметки HTML, XML, XHTML.

Приступая к подготовке курсовой работы, мы определили ее цель: обзор языков гипертекстовой разметки. А чтобы достичь поставленной цели, поставили следующие задачи:

Подобрать и изучить научную и справочную литературу, по заявленной теме;
Рассмотреть и дать определения терминам, использованным в работе;
Исследовать принципы представления и передачи информации в сети Интернет;
Изучить отличительные свойства и особенности языков 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-страницы, в браузере происходят процессы, перечисленные ниже:

При указании имени домена, вместо IP-адреса обращение направляется к операционной системе, это необходимо для получения IP адреса web-ресурса;
Сам же браузер организует соединение с сервером web-ресурса через протокол протокола TCP/IP с адресом, прописанным в адресной строке, либо на 80-й порт (по умолчанию) [8, c.22];
На сервер web-ресурса от браудера поступает запрос на получение необходимой страницы страницы;
На сервере web-ресурса запрос обрабатывается. При успехе, с сервера уходит ответ с содержимым, в ином случае, генерируется код ошибки;
Когда браузер получает ответ от сервера web-ресурса, полученные данные выводятся на экран устройства. Если документ приходит в формате HTML, браузер извлекает гипертекстовую информацию, а также, при наличии оной, загружает мультимедийную информацию;
Соединение с сервером 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].

Этот метод также подходит для структурирования страниц, при условии, что линии таблиц скрыты [5, 419] [10].

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

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

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

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

Атрибут «border» регулирует толщину рамки. В том случае, если значение атрибута равно нулю, то таблица строится со скрытой координатной сеткой. Пример: <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].

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

XML (eXtensible Markup Language) – расширяемый язык разметки, который применяется для хранения, передачи и обмена данными между системами. Документ, размеченный при помощи XML, называется XML-документом (рисунок 6). XML-язык, в сущности является подмножеством, или иначе, производной языка SGML. Целью разработки его разработки XML было упрощение машинного анализа документов [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].

Примером оформления элемента приведен далее: <!—какой-либо текст комментария -->.

Расширяемый язык гипертекстовой разметки 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 обязателен и указывается в головной части документа. Заголовки, обозначенные тегом 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-приложений. Облачные технологии для хранения персональных данных, растущие объемы информации на персональных компьютерах, подключенных к глобальной сети - все это небезопасно с точки зрения защиты данных. Параллельно с развитием систем защиты и других разработок в данной области, свои инструменты совершенствуют и злоумышленники. Более того, рядовые пользователи могут столкнуться с определенными проблемами восприятия многомерных документов, требующих специальных навыков и дополнительной умственной нагрузки. И это отличает цифровые, нелинейные документы, от бумажных аналогов.

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

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

Приложение 1

Синтаксис HTML