Языки гипертекстовой разметки (Сущность понятия гипертекста и его разметки)

Содержание:

ВВЕДЕНИЕ

Концепция организации информации, при которой линейность повествования заменяется возможностью перехода по разным ссылкам, первоначально использовавшейся в печатных изданиях. В начале 90-х годов XX века Тим-Бернерс Ли создал, а его последователи в дальнейшем усовершенствовали, основные инструменты, которые позволили создать интернет на основе гипертекста в его современном виде. Одним из этих инструментов явился язык гипертекстовой разметки HTML для кодирования содержания веб-страниц сайтов в нужном формате.

Актуальность темы работы определена тем, что сегодня HTML остается самым универсальным языком разметки гипертекста, а, следовательно, и написания web-страниц, поскольку не требует интерпретации исходного кода в двоичный код.

Цель работы состоит в исследовании основ и презентации практического применения языка гипертекстовой разметки.

В соответствии с поставленной целью задачами работы являются:

- определение сущности понятия гипертекста и его разметки;

- характеристика языков гипертекстовой документации;

- исследование структуры документа HTML;

- создание простого HTML-сайта.

Объектом исследования являются языки гипертекстовой разметки.

Предметом исследования является алгоритм написания web-страницы на языке разметки гипертекста HTML.

Перед написанием работы были проработаны и изучены учебные источники литературы таких авторов, как Ллойд Йен, Б. Лоусон, М. Мак-Дональд, Дж. Робинс, М. Русаков, Э. Фримен, Б. Хеник и др., проанализированы статьи интернет-источников по структуре, основным тегам и алгоритму написания на языке разметки гипертекста HTML.

1. Теоретические основы гипертекста и его разметки

1.1. Сущность понятия гипертекста и его разметки

Термин «гипертекст» происходит от латинского hypertext, где приставка hyper означает сверх-, многократно превышающий обычную норму.

Изначально данное понятие использовалось в литературе. Так, в частности, Библия содержит большое количество текстовых ссылок на разные разделы и главы (стихи). Примером гипертекста также может служить энциклопедия или словарь, где каждая статья имеет несколько ссылок на другие публикации^[1].

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

Впервые термин «гипертекст» предложил использовать Теодор Нельсон в 1965 году. В 80-е годы XX века термин «гипертекст» в филологическом смысле употребил Жерар Женетт в книге «Палимпсесты«, где он исследовал различные виды интертекстуальных связей. Жерар Женнет разработал практическую модель исследования межтекстовых отношений, при этом основной акцент он делал не на частных текстуальных связях, а на их произведении как целостной структуре. Однако следует отметить, что термин «гипертекст» в рамках концепции Женетта имел более узкое значение, нежели в компьютерных разработках, где понятие гипертекста является ключевым^[3].

Прорыв в применении электронной версии гипертекста имел место во время зарождения интернета и связан с именем Тима-Бернерса Ли, который в начале 90-х годов XX века создал, а его последователи в дальнейшем усовершенствовали, основные инструменты, позволяющие создать интернет на основе гипертекста в его современном виде^[4].

В настоящее время нет единого определение понятия «гипертекст». Приведем наиболее используемые определения.

Так самое простое определение данного понятия, которое имеется практически в любом руководстве по веб-дизайну, гласит: гипертекст — это текст, связанный ссылками с другими текстами^[5].

Тед Нельсон дает следующую трактовку гипертексту: «гипертекст - это не последовательное сочинение, а текст, который разветвляется и позволяет читателю выбирать, т.е. это ряд кусков текста, соединенных линками, предлагающими читателю различные пути»^[6].

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

Тим Бернерс-Ли дает следующее определение: «гипертекст — это соединение смысловой структуры, структуры внутренних связей некоего содержания, и технической среды, технических средств, дающих возможность человеку осваивать структуру смысловых связей, осуществлять переходы между взаимосвязанными элементами»^[8]

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

Костюк Н.К. полагает, что гипертекст – это нелинейная документация, ветвящаяся и взаимосвязывающаяся, что позволят читателю исследовать содержащуюся в ней информацию в последовательности, им самим выбранной.^[9]

Гипертекст дает возможность связать текстовую информацию, аудио, фотографии, чертежи, карты, динамичные картинки и иные формы предоставления информации в единое осмысленное целое, доступ к которому возможен посредством системы индексации, которая ориентирована на конкретные идеи, а не слова в тексте^[10].

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

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

Гипертекстовая технология представляет собой создание, поддержку, расширение и просмотр текста, представленного в виде сети. Поддерживающие эту технологию программы базируются на следующих функциях гипертекста:

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

- замещение - позволяет заменять при просмотре текста любую часть информации рисунком или иным фрагментом текста;

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

- запросы – помогают проводить анализ текста с определенных пользователем позиций. Так можно использовать данные, не имеющие отношение к некоторому фрагменту текста, но при этом с ним связанные. Поиск можно производить по ключевым словам при сопоставлении с каким-либо образцом или по разделителям на основании фильтрации необходимых знаний из гипертекста^[12].

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

Следует подчеркнуть, что электронная книга также обладает опцией поддержки связи между ссылками, т.е. смысловые связи в информации можно использовать и без компьютера. Однако связи, поддерживаемые техникой, позволяют вывести уровень чтения на более высокий качественный уровень^[13].

Таким образом, идея гипертекстовой системы, зародившаяся еще в середине прошлого столетия, получила развитие, и была реализована на практике как основа Интернета, с которой сегодня сталкивается каждый ежедневно^[14].

Основное преимущество гипертекста состоит в нелинейности повествования, которая позволяет создавать сразу несколько линейных последовательностей в изучении материала: захотел — перешел по одной ссылке, захотел — по другой либо продолжил чтение. При этом такие действия можно совершать не только в пределах одной веб-страницы какого-либо сайта, но по всей сети, при этом, не изучая всю предоставленную информацию, а, только выбирая нужную, что позволяет сэкономить много времени^[15].

Именно принцип разрыва линейности текста стал основополагающим при создании Всемирной паутины. Так Тимом Бернесом-Ли в целях реализации принципа гипертекста и гиперссылок и его последователями были созданы следующие основные инструменты, которые позволили создать интернет на основе гипертекста в его современном виде:

- язык разметки гипертекста HTML – кодирует содержание документов (веб-страниц сайтов) в нужный формат;

- протокол передачи гипертекста HTTP (HTTPS) - передает по сети информацию в электронном виде;

- система адресации URI и URL - предусматривает указание протокола передачи данных в составе адреса того или иного документа в сети;

- браузеры - позволяют реализовать все перечисленные выше возможности, а именно: отобразить текст, закодированный с помощью средств HTML, в удобном для чтения виде; осуществить прямой переход на нужную страницу любого веб-сайта путем ввода URL в адресную строку браузера; следовать по созданным гиперссылкам, находящимся в составе контента веб-страницы^[16].

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

1.2. Характеристика языков разметки гипертекста

Язык разметки документов – это набор специальных инструкций, называемых тегами, предназначенных для формирования в документах какой-либо структуры и определения отношений между различными элементами этой структуры^[17].

Теги языка, каким-либо образом кодируются в таких документах, и выделяются относительно основного его содержимого и служат в качестве инструкций для программы, производящей показ содержимого документа на стороне клиента. В самых первых системах для обозначения таких команд использовались символы “ < ” и “ > ”, внутри которых помещались названия инструкций и их параметры. Сейчас данный способ обозначения тегов является стандартным^[18].

Так в 1986 г. Международная организация по стандартизации (ISO) приняла первый стандарт ISO-8879, именуемый «Standard Generalized Markup Language (SGML)». Этот стандарт был посвящен описанию языка SGML - обобщенного метаязыка, позволяющего строить системы логической и структурной разметки любых разновидностей текстов. При этом следует подчеркнуть, что в такой разметке управляющие коды, вносимые в текст, не несут информации о внешнем виде документа, а только задают его логическую структуру, т.е. указывают границы и соподчинение его составных частей^[19].

Следует отметить, что SGML является наследником разработанного в 1960 году в IBM языка GML (Generalized Markup Language - обобщенный язык разметки), который представлял собой набор макросов для реализации разметки и использовал теги для оформления текста, используя процедурную разметку SCRIPT, определяющую, чем текст является с точки зрения параграфов, заголовков, списков и таблиц, что позволяло осуществить автоматическое форматирование текста для различных устройств, необходимо было только указать разновидность устройства^[20].

SGML широко использовался в печатной и издательской сфере, но ввиду его сложности широкого распространения для повседневного использования он не получил.

SGML документ состоит из следующих основных частей:

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

- Document Type Definition (DTD) – тип документа, для определения синтаксиса конструкций разметки;

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

- содержимое SGML-документа - должен быть хотя бы корневой элемент^[21].

Отличительными характеристиками SGML являются:

- упор на описательную, а не на процедурную разметку. Так система описательной разметки использует коды разметки лишь предоставляющие названия для классификации частей документа, а инструкции, необходимые для обработки документа собираются вне документа в отдельных процедурах или программах. Так один и тот же документ может быть обработан различными программами, применяющими различные правила обработки к определенным частям документам в зависимости от степени их важности^[22];

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

- независимость от конкретной системы в представлении текста – позволяющая обеспечить транспортабельность закодированных документов из одной аппаратной и программной среды в другую без потери информации на уровне строк байтов (символов), из которых составляется документ^[23].

Таким образом, SGML решал проблему стандартизации обмена данными между разнородными программами и платформами. Однако являлся очень сложным. Кроме того, SGML-документ было трудно интерпретировать без определений языка разметки, который хранится в определении типа документа, который необходимо было посылать вместе с самим SGML-документом, чтобы распознать теги, созданные пользователем. Поэтому язык SGML не получил масштабного распространения, однако лег в основу языка HTML (Hyper Text Markup Language - язык разметки гипертекста).

По сути, HTML представляет собой набор предписаний SGML, сформулированных в виде DTD. В случае языка HTML DTD хранится в браузере и этот DTD во много раз меньше, чем DTD SGML^[24].

HTML - это технология представления данных, которая не несет содержательной информации, помимо той, которая заключена в тегах, при этом значимость тегов здесь не определена, поэтому нельзя представить иерархию данных^[25].

Язык HTML интерпретируется браузерами - полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства.

Существует восемь версий языка HTML. Так в версии HTML 3.0 в целях разрешения противоречия между идеологией структурной разметки и потребностями пользователей в гибких и разнообразных возможностях визуального представления информации, ввели иерархические стилевые спецификации (Cascading Style Sheets - CSS). Система CSS формально независима от HTML, имеет совершенно иной синтаксис, не наследует никаких идеологических ограничений и позволяет уже совершенно в иных терминах задавать параметры визуального представления для любого тега HTML^[26].

В HTML.3.2 и HTML.4.0 разработчики попыталась объединить большинство нововведений языка, появившихся после выхода версии 3.0, с учетом современных концепций развития компьютерных технологий, в частности Мультимедиамультимедиа.

В поддержку языка HTML была создана целая серия программных языков, таких, как JavaJava, JavaScriptJavaScript, Perl, PHP и т.д. Тем самым открылась возможность для создания динамических Web-страниц, включающих формы, таблицы, фреймы и другие элементы^[27].

Следует подчеркнуть, что HTML до его 5-ой версии определялся как приложение SGML. Спецификации HTML5 формулируются в терминах DOM (объектной модели документа)^[28].

В 1998 г. члены рабочей группы Консорциума World Wide Web, упростив SGML для использования в Web, предложили расширяемый язык разметки XML (eXtensible Markup Language - расширяемый язык разметки).

XML представляет собой подмножество SGML, причем любой действительный документ XML является действительным документом SGML. Как и SGML, XML - это метаязык, определяющий другие языки разметки для специфических целей. Например, язык синхронизированной интеграции мультимедиа (Synchronized Multimedia Integration Language - SMIL) базируется на XML^[29].

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

Целью создания XML было обеспечение совместимости при передаче структурированных данных между разными системами обработки информации, особенно при передаче таких данных через Интернет. Словари, основанные на XML (например, RDF, RSS, MathML, XHTML, SVG), сами по себе формально описаны, что позволяет программно изменять и проверять документы на основе этих словарей, не зная их смыслового значения.

XML используется для разметки стандартных документов во многом так же, как HTML. Однако XML ориентирован на работу со структурированными данными, такими, как результаты запроса, метаинформация о Web-узле или элементы и тип схемы.

Документ XML внешне похож на HTML. Он также состоит из текстовых фрагментов, аннотированных заключенными в угловые скобки тегами. Однако, в отличие от HTML, смысл тега зависит от регистра, а каждый открывающий тег должен во всех случаях иметь парный закрывающий тег^[30].

Основные преимущества и недостатки языка XML представлены в Приложении 1.

Язык XML целесообразно использовать разработчиками сложных информационных систем, с большим количеством приложений, связанных потоками информации самой различной структурой. В этом случае XML - документы выполняют роль универсального формата для обмена информацией между отдельными компонентами большой программы^[31].

XML является базовым стандартом для нового языка описания ресурсов, RDF, позволяющего упростить многие проблемы в Web, связанные с поиском нужной информации, обеспечением контроля за содержимым сетевых ресурсов, создания электронных библиотек и т.д. Он также позволяет описывать данные произвольного типа и используется для представления специализированной информации, например химических, математических, физических формул, медицинских рецептов, нотных записей, и т.д. Следовательно, XML может служить мощным дополнением к HTML для распространения в Web "нестандартной" информации^[32].

Вся информация, располагающаяся между начальным и конечными тэгами, рассматривается в XML как данные, и поэтому учитываются все символы форматирования (в HTML они игнорируются)^[33].

Содержимое XML документа представляет собой набор элементов, секций CDATA, директив анализатора, комментариев, спецсимволов, текстовых данных.

Первой строкой документа XML является декларация XML. Эта необязательная часть файла определяет его как файл XML (например, <?xml version="1.0" encoding="utf-8"?>). Начальный и замыкающий теги корневого элемента окружают весь текст XML-документа. В файле должен присутствовать только один корневой элемент (например, <recipe> (рецепт), и это необходимая "обложка" для него. По мере создания документа в него помещается текст и дополнительные теги между <recipe> и </recipe>. При создании XML регистры начального и конечного тегов должны совпадать. В XML сначала выбираются имена элементов, а затем на основе этих имен определяется соответствующее описание DTD или схема. Пробелы в именах элементов не допускаются, при этом имена должны начинаться с буквы^[34].

Пример файла XML приведен в Приложении 2.

XHTML представляет собой язык разметки гипертекста, основанный на XML и максимально приближенный к стандартам HTML. XHTML отличается от HTML строгостью написания кода. Если HTML позволял писать практически любые конструкции и браузер их корректно распознавал, то теперь, с появлением XHTML, это стало невозможным. XHTML требует строгого соблюдения всех правил, предъявляемых W3C^[35].

XHTML создавался с учетом общей совместимости пользовательских агентов. С помощью нового механизма профилирования пользовательских агентов и документов серверы, прокси и пользовательские агенты смогут преобразовывать содержимое наилучшим образом. В конечном счете, возможна разработка соответствующего XHTML содержимого, пригодного для любого соответствующего XHTML пользовательского агента^[36].

XHTML совместим с HTML при соблюдении некоторых правил, т.е. даже самые старые браузеры, которые понимают HTML, могут работать и с XHTML.

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

При написании кода на XHTML необходимо выполнение следующих основных требований:

- в начале документа должен указываться один из возможных DTD:

- в теле документа должны обязательно присутствовать тэги: html, head, title и body;

- обязательно наличие атрибута xmlns в элементе html;

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

- все значения атрибутов должны заключаться в "кавычки";

- все тэги должны закрываться;

- необходимо соблюдать корректную вложенность тэгов^[37].

Пример кода XHTML-страницы приведен в Приложении 3:

Если вставить этот XHTML-страницы в файл, сохранить его как "file.html" и открыть через веб-сервер, то вся информация будет получена клиентом как >text/html<. То есть, как и обычная HTML-страница. Фактически для браузера это будет не XHTML, а HTML-документ^[38]. У XHTML есть свой собственный MIME-тип: <application/xhtml+xml> - специальный набор расширений, указывающий программам, как обрабатывать входящую информацию. Поэтому XHTML-данные правильно отдавать клиенту именно в формате <application/xhtml+xml>, поскольку все преимущества, помимо кросс-браузерности (увеличение скорости анализа кода процессором XML, сообщение об ошибках самим браузером и пр.), могут достигаться только в случае, если пользовательский агент поддерживает XHTML и ему сообщается о том, что входящие данные – это XHTML-код^[39].

WML (Wireless Markup Language) – язык разметки для работы в Интернет беспроводных устройствах (WAP), основанный на XML. WML используется для описание контента и пользовательского интерфейса для особого класса узкополосных устройств, типа Palm Pilot, сотовых телефонов и пейджеров^[40]. Следует подчеркнуть, что размер WML-страниц не должен превышать 4 килобайт.

WML специально ориентирован ограничения подобных WAP-устройств, поэтому в его основе лежит идея хорошо структурированных данных – WML наследует синтаксис XML. В WML ориентируются на такие механизмы событий, как голос, либо еще какие-то варианты, кроме кнопочных.

В WML предъявляются жесткие требования к парности тегов, использованию регистра и обрамлению атрибутов кавычками. Используемые компоненты синтаксиса в WML – это символьные сущности, элементы, атрибуты, комментарии, переменные и секции CDATA.

В WML набор поддерживаемых тегов невелик.

По структуре WML напоминает несколько упрощенный HTML, при этом WML ориентирован на устройства, не обладающие возможностями персональных компьютеров (малоформатный экран, узкая полоса пропускания канала связи, малая собственная память, ограничения на "вычислительные" способности). Поэтому вся информация в WML содержится в так называемых «колодах» или «деках» (англ. deck) - минимальных блоках данных, которые могут быть переданы сервером.

В деках находятся «карточки» (card), каждая из которых ограничена тегами <card> и </card>. В одном деке всегда должна быть, по меньшей мере, одна карточка. При этом на экране устройства в каждый момент времени отображается только одна карточка, а пользователь может переключаться между ними, переходя по ссылкам^[41].

Так, если для обычного сайта единицей является Web-page, то единица WML – это deck, состоящая из одной или нескольких card, составляющих вместе WML-документ (wml-файл). Как только wml-файл загружен в устройство с сервера, пользователь может листать экраны, переходить к следующему или возвращаться к предыдущему, не ожидая загрузки с сайта, что, конечно, выгодно по скорости^[42].

Поскольку WML представляет собой ветвь XML, а любой XML-документ сначала должен пройти проверку на соответствие своему DTD, в любом wml-файле, необходимо указывать полный путь к WML DTD^[43].

Строительные блоки и функциональные средства WML можно условно разделить на четыре категории: форматирование, навигация, ввод данных и управление действиями/событиями.

Так поскольку на экран выводится по одной карте, то в элементе card предусмотрен атрибут id - внутренний идентификатор для переходов, а также видимый на экране заголовок title. Для форматирования текста, почти аналогично элементы, аналогичные HTML: p – для параграфов, em и I – для выделения курсивом, big – для текста большего размера и др.

Для навигации и установки гиперссылок предусмотрены теги anchor и a.

Для ввода данных предусмотрены такие теги, как input, select/option (поле выбора из заранее заданного списка), postfield.

Для управления действиями используются tasks, do. Типовые "исполнительные" теги действий – это go, prev, refresh (перечитать текущую карту) или noop (ничего не делать). Действия на уровне конкретной карты описываются в тегах do, а на уровне всей колоды – в элементе template^[44].

Пример WML-колоды из трех карт приведен в Приложении 4.

В WML есть также возможность назначать клавиши навигации.

Тег <onevent type="button">действие</onevent> позволяет приписать к одной из кнопок телефона пользовательское событие. В качестве действия обычно используется <go href="url"/>. Так, добавив к карте строку <onevent type="GO"><go href="#card2"/></onevent>, можно назначить кнопке GO переход непосредственно в меню.

Посредством таблицы 1.1 дана сравнительная характеристика языков гипертекстовой разметки.

Таблица 1.1

Сравнительная характеристика языков гипертекстовой разметки

Язык	HTML	XHTML	WML
Основан на	SGML	XML	XML
Тип разметки	тег	тег	тег
Структурная разметка	да	да	да
Презентационная разметка	да	да	да
Формат использования	текст/html	приложение/xhtml+xml	приложение/wml+xml

По итогам первой главы работы можно сделать следующие выводы:

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

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

- SGML - обобщенный метаязык, позволяющего строить системы логической и структурной разметки любых разновидностей текстов и не несущий информации о внешнем виде документа;

- HTML – широко используемый стандартизированный язык разметки документов в Интернете. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора. Существует восемь версий языка HTML. HTML до его 5-ой версии определялся как приложение SGML. Спецификации HTML5 формулируются в терминах DOM;

- XML - это метаязык, определяющий другие языки разметки для специфических целей, предназначен для хранения структурированных данных и для обмена информацией между программами;

- XHTML - язык разметки гипертекста, основанный на XML и максимально приближенный к стандартам HTML. XHTML отличается от HTML строгостью написания кода;

- WML – язык разметки для работы в Интернет беспроводных устройствах (WAP), основанный на XML. WML используется для описания контента и пользовательского интерфейса для особого класса узкополосных устройств, типа Palm Pilot, сотовых телефонов и пейджеров.

2. Практическое применение языка HTML

2.1. Структура документа HTML - основные теги

HTML сегодня является самым универсальным языком разметки гипертекста и стандартизированным языком разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML. Поэтому необходимо иметь четкое представление о написании кода документа на данном языке.

Любой документ на языке HTML представляет собой набор элементов, начало и конец каждого из которых обозначается специальными пометками - тегами, с помощью которых можно выделять заголовки документа, изменять цвет, размер и стиль букв, вставлять графические изображения и таблицы, а также специальных конструкций языка HTML, которые позволяют щелчком мыши перейти к просмотру другого документа^[45].

HTML-документ состоит из собственно текста - данных, составляющих содержимое документа, и тегов — специальных конструкций языка HTML, используемых для разметки документа и управляющих его отображением. Графическая и звуковая информация, имеющаяся в HTML-документе, хранится в отдельных файлах^[46].

Для файлов, содержащих HTML-документы приняты расширения .htm или .html.

Элементы HTML могут быть пустыми - не содержащими никакого текста и данных (например, тег перевода строки <br>), тогда нет необходимости указывать закрывающий тег, либо иметь атрибуты, определяющие определенные свойства, тогда наличие закрывающего тега обязательно. Стоит отметить, что регистр, в котором набрано имя элемента и имена атрибутов, в HTML значения не имеет^[47].

Как правило, теги используются парами, состоящими из открывающего <имя_тега> и закрывающего </имя_тега> тегов, которые иначе называют контейнером.

Как правило, текст документа HTML начинается со специального тега <!DOCTYPE html>, который показывает, на какую версию html ориентироваться браузеру^[48].

Основными тегами, используемыми HTML, являются html, head, body.

Тегом html определяется все содержание документа. С него документ начинается <html> и им заканчивается </html>. Эти теги сигнализируют о том, что находящиеся между ними строки являются единым гипертекстовым документом. Наличие этих тегов дает возможность программе просмотра идентифицировать формат документа и правильно его интерпретировать.

Следующим тегом является head, внутри которого размещается служебная информация, необходимая браузеру для корректной интерпретации html документа. Стоит отметить, что на открытой веб-странице этой информации не видно^[49].

В разделе head необходимо посредством тега title написать название страницы, поскольку title выводится в строке заголовка окна браузера и используется поисковыми машинами для индексирования сайта и показа в результатах поиска.

Вся информация, которая отображается на веб-странице, помещается между закрывающим и открывающим тегами body^[50].

Эти теги являются обязательными и входят в состав любого документа HTML, при этом используется принцип вложенности, который определяет расположение тегов открытия и закрытия следующим образом:

<html>

<head>Служебная информация

</head>

<body>Содержание

</body>

</html>

Тело документа является обязательным элементом, так как в нем располагается весь материал документа. Тело документа размещается между тегами <body> и </body>. Все, что размещено между этими тегами, интерпретируется браузером в соответствии с правилами языка HTML позволяющими корректно отображать страницу на экране монитора^[51].

Язык HTML поддерживает два вида форматирования документа:

- логическое, указывающее на назначение определенного фрагмента текста, при котором выделяются части текста в соответствии со структурой документа (заголовки шести уровней);

- физическое, задающее внешний вид текста (тип и размер шрифта). Например, тег <b> выделяет текст полужирным начертанием, <u> - подчеркивание текста.

В целом тэг представляет собой метку, указывающую браузеру, как нужно представлять сайт. В некоторых тэгах можно вводить дополнительную информацию – атрибут, после которого следует знак равенства и детали атрибута, заключенные в двойные кавычки. Точка с запятой после атрибута служит для разделения команд разных стилей^[52].

Например, тег <body style="background-color:#ff0000;"> сигнализирует браузеру о выводе страницы красного цвета, при этом использован шестнадцатиричном формате (HEX), где каждому цвету соответствует свое 16-ричное число. Но можно использовать и английские названия цветов, например, <body style="background-color: red;">^[53].

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

<a href="http://www.html.net/">Это ссылка на HTML.net</a>

Элемент тега a обозначает "якорь/anchor", а атрибут href (от "hypertext reference/гипертекстовая ссылка") - место, на которое выполняется переход по данной ссылке, при этом "http://" всегда должно входить в состав URL.

При ссылках между страницами на одном сайте, полный адрес документа ("http://") указывать необязательно^[54].

Для создания ссылки-перехода внутри самой страницы используется атрибут id и символ "#". Так сначала посредством тега <h1 id="heading1">heading 1</h1> маркируется элемент, на который необходимо сделать переход. А посредством тега <a href="#heading1">Ссылка на heading 1</a> создана ссылка на этот элемент^[55].

Если необходимо сделать ссылку на e-mail адрес, используется следующий тег:

<a href="mailto:nobody@html.net"> </a>

В результате при щелчке по ссылке открывается программа по умолчанию для работы с электронной почтой с адресом, уже записанным в строке адреса^[56].

Для того, чтобы поместить на страницу сайта изображение, необходимо использовать тэг img src, где src ("source") указывает размещение изображения. Следует отметить, что тэг img не требует наличия закрывающего тэга.

Есть три типа файлов изображений, которые можно вставить на страницы сайта:

- GIF - изображения графики и рисунков;

- JPEG - для фотографий.

- PNG - для того и другого.

Чтобы загрузить файлы изображений, необходима программа редактирования файлов изображений (Paint Shop Pro, PhotoShop, Macromedia Fireworks, Irfan View (бесплатная))^[57].

Можно также вставить изображения, используя ссылки на другие сайты.

При вставке изображений, как правило, используют атрибуты width и height для установки ширины и высоты изображения, при этом значение указывается в пикселах. Например: <img src="logo.gif" width="32" height="32">

Для вставки таблиц используются 3 базовых тэга:

- <table> - начало и конец таблицы;

- <tr> - "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек;

- <td> - "table data/табличные данные" - начинает и заканчивает каждую ячейку ряда таблицы^[58].

Тег <div></div> представляет собой блочный элемент, на котором можно построить весь сайт. Использование блоков <div> является универсальным способом вставки изображения, делает код более читабельным. Применяя блоки <div> можно достичь максимально комфортных условий для показа контента^[59].

Следует отметить, что если задавать стили блокам текста непосредственно в самом коде каждого <div>, то код разрастается. В целях упрощения работы были разработаны каскадные таблицы стилей СSS (Cascading Style Sheets), представляющие собой формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Так создается файл CSS, который является единым файлом стилей для всего сайта и подключается ко всему сайту, а, следовательно, и задает свойства стилей для всех блоков и всего шаблона.

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

2.2. Создание простого HTML-сайта

Для создания HTML-сайта необходимы браузер и текстовый редактор. В данной работе будет использован браузер Google Chrome и текстовый редактор Notepad.

Сайт будет состоять из семи страниц и будет посвящен теме данной работы «Языки гипертекстовой разметки». Для его создания будет использована табличная верстка.

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

Далее была создана таблица из 3 строк и 3 столбцов всего 9 ячеек. Для точной разметки таблицы были использованы теги width и height в теги <table> и <td> таблицы, при этом размеры ячеек таблицы были введены не в пикселях, а в процентах в целях избежания дополнительного описания процедуры адаптации сайта под различное разрешение экрана у посещающих данный сайт пользователей.

В теге <table> была установлена высота и ширину равная 100%. В теге <td> указаны проценты от размера таблицы, а также цвет строк, используя тег bgcolor, чтобы таблица была видна.

Далее во 2 ячейке таблицы размещено название страницы «Языки гипертекстовой разметки», и сразу задан размер шрифта посредством тегов <h2> </h2>, в 8 ячейке, которая является в нашей странице центральной, использован шрифт, определяемый тегами <h3></h3>, и находится определение гипертекстового документа.

Далее на сайт были добавлены картинки в ячейки 1 и 3, визуально указывающие, о чем данный сайт, Для вставки картинок использовался тег <img src="имя.jpg">. Чтобы картинки смогли отобразиться на создаваемом сайте, файлы с ними были помещены в папку сайта htdocs под именами HTML_logo (1).JPG и html-1.JPG.

Далее, чтобы дать имя создаваемому сайту, название сайта « Языки гипертекстовой разметки» было помещено между тегами <title> и </title>. Следует отметить, что данный заголовок сайта невидим в рабочей области, а нужен для поисковых систем Интернета.

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

4 ячейка – Гипертекст: сущность;

5 ячейка - HTML - язык гипертекстовой разметки документа;

6 ячейка – Гипертекст: функции;

7 ячейка - SGML и XML;

9 ячейка - XHTML WML.

В итоге первая страница сайта имеет следующий вид (рисунок 2.1).

Рисунок 2.1. Первая страница сайта «Языки гипертекстовой разметки»

Далее была создана вторая страница сайта «Гипертекст: сущность», код которой представлен в Приложении 5 и сохранен под именем site-1.html в папке для файлов сайта htdocs. На данную страницу сайта сделана ссылка из первой страницы посредством следующего тега:

<a href="site-1.html" >Гипертекст: сущность</a>.

При создании данной страницы были использованы теги выравнивания текста align="left" и align="justifу".

На рисунке 2.2. представлена вторая страница создаваемого сайта.

Рисунок 2.2. Вторая страница сайта «Языки гипертекстовой разметки»

Далее подобным образом была создана третья страница сайта «Гипертекст: функции» (рисунок 2.3), код которой представлен в Приложении 6 и сохранен под именем site-2.html в папке для файлов сайта htdocs. На данную страницу сайта сделана ссылка из первой страницы посредством следующего тега:

<a href="site-2.html" >Гипертекст: функции</a>.

В ячейках 5, 7 и 9 находятся ссылки, которые переводят пользователя на созданные сайты иных разработчиков, посвященные соответственно следующим языкам SGML, XML, HTML, XHTML и WML. Для этого были использованы соответсвенно следующие теги:

<a href="http://ru.html.net/tutorials/html/" >HTML - язык гипертекстовой разметки документа</a>

<a href="http://nknaromanova.narod.ru/sgml.htm" >SGML и XML <a>

<a href="https://htmlweb.ru/html/xhtml.php">XHTML </a>

<a href="https://htmlweb.ru/html/wml.php">WML </a></center>.

Рисунок 2.3. Третья страница сайта «Языки гипертекстовой разметки»

В итоге код главной страницы созданного сайта получил следующий вид (Рисунок 2.4):

Рисунок 2.4. HTML-код сайта «Языки гипертекстовой разметки»

В папке htdocs содержаться следующие файлы:

- index1.html

- HTML_logo (1).JPG

- html-1.JPG.

- site-1.html

- site-2.html.

По итогам второй главы работы можно сделать следующие выводы:

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

- как правило, теги используются парами, состоящими из открывающего <имя_тега> и закрывающего </имя_тега> тегов, которые иначе называют контейнером. Основными тегами, используемыми HTML, являются html, head, body. Тегом html определяется все содержание документа. Внутри head размещается служебная информация, которая не видна на открытой веб-странице, необходимая браузеру для корректной интерпретации html документа и поиске браузерами. Вся информация, которая отображается на веб-странице, помещается между закрывающим и открывающим тегами body;

- для создания HTML-сайта необходимы браузер и текстовый редактор. В данной работе использован браузер Google Chrome и текстовый редактор Notepad, посредством которого создан сайт из семи страниц под названием «Языки гипертекстовой разметки». Для его создания использована табличная верстка. Все документы, связанные с созданием сайта, сохранены в папке "htdocs". Две страницы, на которые имеются ссылки на главной странице сайта, созданы самостоятельно, остальные ссылки на сайте перенаправляют пользователя на созданные сайты иных разработчиков, посвященные соответственно SGML, XML, HTML, XHTML и WML.

ЗАКЛЮЧЕНИЕ

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

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

SGML - обобщенный метаязык, позволяющего строить системы логической и структурной разметки любых разновидностей текстов и не несущий информации о внешнем виде документа;

HTML – широко используемый стандартизированный язык разметки документов в Интернете. Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора. Существует восемь версий языка HTML. HTML до его 5-ой версии определялся как приложение SGML. Спецификации HTML5 формулируются в терминах DOM;

XML - это метаязык, определяющий другие языки разметки для специфических целей, предназначен для хранения структурированных данных и для обмена информацией между программами;

XHTML - язык разметки гипертекста, основанный на XML и максимально приближенный к стандартам HTML. XHTML отличается от HTML строгостью написания кода;

WML – язык разметки для работы в Интернет беспроводных устройствах (WAP), основанный на XML. WML используется для описания контента и пользовательского интерфейса для особого класса узкополосных устройств, типа Palm Pilot, сотовых телефонов и пейджеров.

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

Как правило, теги используются парами, состоящими из открывающего <имя_тега> и закрывающего </имя_тега> тегов, которые иначе называют контейнером. Основными тегами, используемыми HTML, являются html, head, body. Тегом html определяется все содержание документа. Внутри head размещается служебная информация, которая не видна на открытой веб-странице, необходимая браузеру для корректной интерпретации html документа и поиске браузерами. Вся информация, которая отображается на веб-странице, помещается между закрывающим и открывающим тегами body.

Для создания HTML-сайта необходимы браузер и текстовый редактор. В данной работе использован браузер Google Chrome и текстовый редактор Notepad, посредством которого создан сайт из семи страниц под названием «Языки гипертекстовой разметки». Для его создания использована табличная верстка. Все документы, связанные с созданием сайта, сохранены в папке "htdocs". Две страницы, на которые имеются ссылки на главной странице сайта, созданы самостоятельно, остальные ссылки на сайте перенаправляют пользователя на созданные сайты иных разработчиков, посвященные соответственно SGML, XML, HTML, XHTML и WML.

.

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

1. Большая книга веб-дизайна / Терри Фельке-Моррис; пер. с англ. Н.А. Райтмана. – М.: Эксмо, 2012. – 608с.
2. Гипертекст — что это такое. URL: http://ktonanovenkogo.ru/voprosy-i-otvety/gipertekst-chto-eto-takoe.html (Дата доступа 01.12.2017)
3. Гипертекст. Что это такое? URL: http://www.brightweb.ru/interesting/43.html (Дата доступа 01.12.2017)
4. Дакетт Дж. HTML и CSS. Разработка и дизайн веб-сайтов. – М.: Эксмо, 2013. - 480с.
5. История гипертекста. URL: http://inf.1september.ru/articlef.php?ID=200700905 (Дата доступа 01.12.2017)
6. Как создать простой HTML сайт. URL: http://kapon.com.ua/beginning.php (Дата доступа 05.12.2017)
7. Костюк К.Н. Книга в новой медийной среде / К.Н. Костюк. - М.: Директ-Медиа, 2015. – 432с.
8. Ллойд Йен. Создай свой веб-сайт с помощью HTML и CSS. – СПб.: Питер, 2013. - 416с.
9. Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста / Б. Лоусон, Р. Шарп. – СПб.: Питер, 2012. – 304с.
10. Мак-Дональд М. Создание Web-сайта. Недостающее руководство. – 3-е изд.: Пер с англ. – СПб.: БХВ-Петербург, 2013. – 624с.
11. Номейн А. HTML-шпаргалка. – М.: Издательские решения, 2017. – 26с.
12. Робинс Дж. HTML5, CSS3 и JavaScript. Исчерпывающее руководство. – М.: Эксмо, 2014. – 528с.
13. Руднев В. Энциклопедический словарь культуры XX века / В. Руднев. – М.: Азбука, 2017. – 864с.
14. Русаков М. Создание сайта от начала и до конца. – 2014. – 172с.
15. Теодор Нельсон создаёт технологию гипертекста. URL: http://vikent.ru/enc/676/ (Дата доступа 03.12.2017)
16. Тим Бернерс-Ли. Да пребудет с нами Веб! / Тим Бернерс-Ли // Журнал «В мире науки», 2011 г. - №2. – С.78-95
17. Учебник HTML. URL: http://ru.html.net/tutorials/html/ (Дата доступа 03.12.2017)
18. Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств / Б. Фрейн. – СПб.: Питер, 2014. – 304с.
19. Фримен Элизабет, Фримен Эрик. Изучаем HTML, XHTML и CSS. – СПб: Питер, 2016. – 720с.
20. Хеник Б. HTML и CSS. Путь к совершенству / Бен Хеник. СПб.: Питер, 2011. – 336с.
21. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения / Б. Хоган. – СПб.: Питер, 2014. – 320с.
22. Языки разметки. SGML и XML URL: http://nknaromanova.narod.ru/sgml.htm (Дата доступа 02.12.2017)
23. Языки разметки гипертекста и программирования скриптов URL: http://www.hi-edu.ru/e-books/xbook081/01/part-008.htm (Дата доступа 02.12.2017)
24. WML – Язык разметки для мобильных телефонов(WAP) URL: https://htmlweb.ru/html/wml.php (Дата доступа 02.12.2017)
25. XHTML. URL: https://htmlweb.ru/html/xhtml.php (Дата доступа 02.12.2017)

ПРИЛОЖЕНИЕ 1

Преимущества и недостатки языка XML

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

ПРИЛОЖЕНИЕ 2

Документ XML

<?xml version="1.0" encoding="UTF-8"?>

<recipe type="dessert">

<recipename cuisine="american" servings="1">Ice Cream Sundae</recipename>

<ingredlist>

<listitem><quantity units="cups">0.5</quantity>

<itemdescription>vanilla ice cream</itemdescription></listitem>

<listitem><quantity units="tablespoons">3</quantity>

<itemdescription>chocolate syrup or chocolate fudge</itemdescription></listitem>

<listitem><quantity units="tablespoons">1</quantity>

<itemdescription>nuts</itemdescription></listitem>

<listitem><quantity units="each">1</quantity>

<itemdescription>cherry</itemdescription></listitem>

</ingredlist>

<utensils>

<listitem><quantity units="each">1</quantity>

<utensilname>bowl</utensilname></listitem>

<listitem><quantity units="each">1</quantity>

<utensilname>spoons</utensilname></listitem>

<listitem><quantity units="each">1</quantity>

<utensilname>ice cream scoop</utensilname></listitem>

</utensils>

<directions>

<step>Using ice cream scoop, place vanilla ice cream into bowl.</step>

<step>Drizzle chocolate syrup or chocolate fudge over the ice cream.</step>

<step>Sprinkle nuts over the mound of chocolate and ice cream.</step>

<step>Place cherry on top of mound with stem pointing upward.</step>

<step>Serve.</step>

</directions>

<variations>

<option>Replace nuts with raisins.</option>

<option>Use chocolate ice cream instead of vanilla ice cream.</option>

</variations>

<preptime>5 minutes</preptime>

</recipe>

ПРИЛОЖЕНИЕ 3

Документы XHTML

Простейший XHTML-документ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<!-- Этот раздел предназначен для заголовка страницы и технической информации. -->

</head>

<body>

<!-- А здесь надо размещать все, что хочется увидеть на странице. -->

</body>

</html>

Документ со строгой разметкой

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Пример строгого документа</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<p>...</p>

</body>

</html>

Документ с фреймами

XHTML 1.0IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Фреймы</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<frameset cols="100,*">

<frame src="menu.html" name="menu" />

<frame src="content.html" name="content" />

</frameset>

</html>

ПРИЛОЖЕНИЕ 4

WML-колода из трех карт^[60]

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

"http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

<card id="home" title="Welcome">

<p align="center">Taler's HP<br/>

<img src="logo.wbmp" alt="home"/><br/>

<do type="accept" label="next"><go href="#card1"/></do></p>

</card>

<card id="card1" title="Page 1">

<p>This is the first card.</p>

<do type="accept" label="next"><go href="#card2"/></do>

<do type="prev" label="back"><prev/></do>

</card>

<card id="card2" title="Page 2">

<p>This is the second card.</p>

<do type="accept" label="home"><go href="#home"/></do>

</card>

</wml>

ПРИЛОЖЕНИЕ 5

HTML-код страницы «Гипертекст: сущность»

<html>

<head>

<title>Гипертекст: сущность</title>

</head>

<body>

<h1 align="center">Понятие гипертекста</h1>

<p align="justify">Впервые термин «гипертекст» предложил использовать Теодор Нельсон в 1965 году.

В 80-е годы XX века термин «гипертекст» в филологическом смысле употребил Жерар Женетт в книге «Палимпсесты«,

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

межтекстовых отношений, при этом основной акцент он делал не на частных текстуальных связях, а на их произведении

как целостной структуре. Однако следует отметить, что термин «гипертекст» в рамках концепции Женетта имел более узкое

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

Прорыв в применении электронной версии гипертекста имел место во время зарождения интернета и связан

с именем Тима-Бернерса Ли, который в начале 90-х годов XX века создал, а его последователи в дальнейшем усовершенствовали,

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

</p>

<p align="justify">В настоящее время нет единого определение понятия «гипертекст».

Приведем наиболее используемые определения

</p>

<h2 align="left">Тед Нельсон </h2>

<p align="justify">Гипертекст - это не последовательное сочинение, а текст, который разветвляется и позволяет

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

<h2 align="left">В. Руднев </h2>

<p align="justify">Гипертекст - текст, устроенный таким образом, что он превращается в систему, иерархию текстов,

одновременно составляя единство и множество текстов</p>

<h2 align="left">Тим Бернерс-Ли </h2>

<p align="justify">Гипертекст — это соединение смысловой структуры, структуры внутренних связей некоего содержания,

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

осуществлять переходы между взаимосвязанными элементами</p>

<h2 align="left">Костюк Н.К. </h2>

<p align="justify">Гипертекст – это нелинейная документация, ветвящаяся и взаимосвязывающаяся, что позволят читателю

исследовать содержащуюся в ней информацию в последовательности, им самим выбранной</p>

</body>

</html>

ПРИЛОЖЕНИЕ 6

HTML-код страницы «Гипертекст: функции»

<html>

<head>

<title>Гипертекст: функции</title>

</head>

<body>

<h1 align="center">Функции гипертекстовой технологии</h1>

<h2 align="left">Ссылки </h2>

<p align="justify">Ссылки – являются самой важной функцией, благодаря им имеется возможность использовать связи

информационной сети, в образе которой представлен гипертекст,

через которые можно обращаться к связанным на уровне ассоциаций узлам.

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

а можно использовать запросы, автоматически фильтрующие данные.

</p>

<h2 align="left">Замещение </h2>

<p align="justify">Замещение - позволяет заменять при просмотре текста любую часть информации рисунком или иным фрагментом текста</p>

<h2 align="left">Заметки</h2>

<p align="justify">Заметки - стандартные заметки на полях, но гораздо более выразительные (видеофайлы, цветная графика, звуковое сопровождение и др.). Следует отметить, что данная функция является обратной, т.е. информация связывается с выделенным фрагментом, а не наоборот</p>

<h2 align="left">Запросы </h2>

<p align="justify">Запросы – помогают проводить анализ текста с определенных пользователем позиций. Так можно использовать данные, не имеющие отношение к некоторому фрагменту текста, но при этом с ним связанные. Поиск можно производить по ключевым словам при сопоставлении с каким-либо образцом или по разделителям на основании фильтрации необходимых знаний из гипертекста</p>

<p align="justify">Запросы в совокупности с замещением позволяют получать срезы исходного текста, являющиеся функционально-ориентированными, т.е. структурировать гипертекст, исходя из потребностей каждого отдельного пользователя</p>

</body>

</html>

1. История гипертекста. URL: http://inf.1september.ru/articlef.php?ID=200700905 (Дата доступа 01.12.2017) ↑

2. Гипертекст — что это такое. URL: http://ktonanovenkogo.ru/voprosy-i-otvety/gipertekst-chto-eto-takoe.html (Дата доступа 01.12.2017) ↑

3. Костюк К.Н. Книга в новой медийной среде / К.Н. Костюк. - М.: Директ-Медиа, 2015. – С.56 ↑

4. Гипертекст — что это такое. URL: http://ktonanovenkogo.ru/voprosy-i-otvety/gipertekst-chto-eto-takoe.html (Дата доступа 01.12.2017) ↑

5. Мак-Дональд М. Создание Web-сайта. Недостающее руководство. – 3-е изд.: Пер с англ. – СПб.: БХВ-Петербург, 2013. – С.33 ↑

6. Теодор Нельсон создаёт технологию гипертекста. URL: http://vikent.ru/enc/676/ (Дата доступа 03.12.2017) ↑

7. Руднев В. Энциклопедический словарь культуры XX века / В. Руднев. – М.: Азбука, 2017. – С.78 ↑

8. Тим Бернерс-Ли. Да пребудет с нами Веб! / Тим Бернерс-Ли // Журнал «В мире науки», 2011 г. - №2. – С.82 ↑

9. Костюк К.Н. Книга в новой медийной среде / К.Н. Костюк. - М.: Директ-Медиа, 2015. – С.57 ↑

10. История гипертекста. URL: http://inf.1september.ru/articlef.php?ID=200700905 (Дата доступа 01.12.2017) ↑

11. Дакетт Дж. HTML и CSS. Разработка и дизайн веб-сайтов. – М.: Эксмо, 2013. – С.38 ↑

12. Гипертекст. Что это такое? URL: http://www.brightweb.ru/interesting/43.html (Дата доступа 01.12.2017) ↑

13. Большая книга веб-дизайна / Терри Фельке-Моррис; пер. с англ. Н.А. Райтмана. – М.: Эксмо, 2012. – С.52 ↑

14. История гипертекста. URL: http://inf.1september.ru/articlef.php?ID=200700905 (Дата доступа 01.12.2017) ↑

15. Ллойд Йен. Создай свой веб-сайт с помощью HTML и CSS. – СПб.: Питер, 2013. - С.63 ↑

16. Гипертекст — что это такое. URL: http://ktonanovenkogo.ru/voprosy-i-otvety/gipertekst-chto-eto-takoe.html (Дата доступа 01.12.2017) ↑

17. Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста / Б. Лоусон, Р. Шарп. – СПб.: Питер, 2012. – С.45 ↑

18. Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств / Б. Фрейн. – СПб.: Питер, 2014. – С.58 ↑

19. Языки разметки гипертекста и программирования скриптов URL: http://www.hi-edu.ru/e-books/xbook081/01/part-008.htm (Дата доступа 02.12.2017) ↑

20. Языки разметки гипертекста и программирования скриптов URL: http://www.hi-edu.ru/e-books/xbook081/01/part-008.htm (Дата доступа 02.12.2017) ↑

21. Языки разметки. SGML и XML URL: http://nknaromanova.narod.ru/sgml.htm (Дата доступа 02.12.2017) ↑

22. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения / Б. Хоган. – СПб.: Питер, 2014. – С107 ↑

23. Языки разметки. SGML и XML URL: http://nknaromanova.narod.ru/sgml.htm (Дата доступа 02.12.2017) ↑

24. Языки разметки гипертекста и программирования скриптов URL: http://www.hi-edu.ru/e-books/xbook081/01/part-008.htm (Дата доступа 02.12.2017) ↑

25. Робинс Дж. HTML5, CSS3 и JavaScript. Исчерпывающее руководство. – М.: Эксмо, 2014. – С.23 ↑

26. Большая книга веб-дизайна / Терри Фельке-Моррис; пер. с англ. Н.А. Райтмана. – М.: Эксмо, 2012. – С.63 ↑

27. Хеник Б. HTML и CSS. Путь к совершенству / Бен Хеник. СПб.: Питер, 2011. – С.111 ↑

28. Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств / Б. Фрейн. – СПб.: Питер, 2014. – С.71 ↑

29. Языки разметки гипертекста и программирования скриптов URL: http://www.hi-edu.ru/e-books/xbook081/01/part-008.htm (Дата доступа 02.12.2017) ↑

30. Большая книга веб-дизайна / Терри Фельке-Моррис; пер. с англ. Н.А. Райтмана. – М.: Эксмо, 2012. – С.68 ↑

31. Мак-Дональд М. Создание Web-сайта. Недостающее руководство. – 3-е изд.: Пер с англ. – СПб.: БХВ-Петербург, 2013. – С.71 ↑

32. Языки разметки. SGML и XML URL: http://nknaromanova.narod.ru/sgml.htm (Дата доступа 02.12.2017) ↑

33. Русаков М. Создание сайта от начала и до конца. – 2014. – 172с. ↑

34. Большая книга веб-дизайна / Терри Фельке-Моррис; пер. с англ. Н.А. Райтмана. – М.: Эксмо, 2012. – С.112 ↑

35. Фримен Элизабет, Фримен Эрик. Изучаем HTML, XHTML и CSS. – СПб: Питер, 2016. – С.321 ↑

36. XHTML. URL: https://htmlweb.ru/html/xhtml.php (Дата доступа 02.12.2017) ↑

37. Большая книга веб-дизайна / Терри Фельке-Моррис; пер. с англ. Н.А. Райтмана. – М.: Эксмо, 2012. – С.115 ↑

38. Фримен Элизабет, Фримен Эрик. Изучаем HTML, XHTML и CSS. – СПб: Питер, 2016. – С.323 ↑

39. XHTML. URL: https://htmlweb.ru/html/xhtml.php (Дата доступа 02.12.2017) ↑

40. WML – Язык разметки для мобильных телефонов(WAP) URL: https://htmlweb.ru/html/wml.php (Дата доступа 02.12.2017) ↑

41. WML – Язык разметки для мобильных телефонов(WAP) URL: https://htmlweb.ru/html/wml.php (Дата доступа 02.12.2017) ↑

42. Большая книга веб-дизайна / Терри Фельке-Моррис; пер. с англ. Н.А. Райтмана. – М.: Эксмо, 2012. – С.536 ↑

43. Фримен Элизабет, Фримен Эрик. Изучаем HTML, XHTML и CSS. – СПб: Питер, 2016. – С.658 ↑

44. WML – Язык разметки для мобильных телефонов(WAP) URL: https://htmlweb.ru/html/wml.php (Дата доступа 02.12.2017) ↑

45. Фримен Элизабет, Фримен Эрик. Изучаем HTML, XHTML и CSS. – СПб: Питер, 2016. – С.32 ↑

46. Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста / Б. Лоусон, Р. Шарп. – СПб.: Питер, 2012. – С.38 ↑

47. Дакетт Дж. HTML и CSS. Разработка и дизайн веб-сайтов. – М.: Эксмо, 2013. - С.53 ↑

48. Лоусон Б., Шарп Р. Изучаем HTML5. Библиотека специалиста / Б. Лоусон, Р. Шарп. – СПб.: Питер, 2012. – С.32 ↑

49. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения / Б. Хоган. – СПб.: Питер, 2014. – С.46 ↑

50. Дакетт Дж. HTML и CSS. Разработка и дизайн веб-сайтов. – М.: Эксмо, 2013. - С.55 ↑

51. Фримен Элизабет, Фримен Эрик. Изучаем HTML, XHTML и CSS. – СПб: Питер, 2016. – С.67 ↑

52. Учебник HTML. URL: http://ru.html.net/tutorials/html/ (Дата доступа 03.12.2017) ↑

53. Ллойд Йен. Создай свой веб-сайт с помощью HTML и CSS. – СПб.: Питер, 2013. – С.302 ↑

54. Ллойд Йен. Создай свой веб-сайт с помощью HTML и CSS. – СПб.: Питер, 2013. – С.312 ↑

55. Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств / Б. Фрейн. – СПб.: Питер, 2014. – С.236 ↑

56. Учебник HTML. URL: http://ru.html.net/tutorials/html/ (Дата доступа 03.12.2017) ↑

57. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения / Б. Хоган. – СПб.: Питер, 2014. – С.202 ↑

58. Фрейн Б. HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств / Б. Фрейн. – СПб.: Питер, 2014. – С.202 ↑

59. Хеник Б. HTML и CSS. Путь к совершенству / Бен Хеник. СПб.: Питер, 2011. – С.283 ↑

60. WML – Язык разметки для мобильных телефонов(WAP) URL: https://htmlweb.ru/html/wml.php (Дата доступа 02.12.2017) ↑