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

Язык гипертекстовой разметки HTML (HyperText Markup Language) был предложен Тимом Бернерсом-Ли в 1989 г. в качестве одного из компонентов технологии разработки распределенной гипертекстовой системы World Wide Web.

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

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

Разработчики HTML должны были решить две задачи:

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

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

Первая задача была решена за счет выбора таговой модели описания документа. Такая модель широко применяется в системах подготовки документов для печати. Примером такой системы является хорошо известный язык разметки научных документов ТеХ, предложенный Американским математическим обществом, и программы его интерпретации. К моменту создания HTML существовал стандарт языка разметки печатных документов — Standard Generalised Markup Language (SGML), который и был взят в качестве основы HTML. Предполагалось, что такое решение поможет использовать существующее программное обеспечение для интерпретации нового языка. Однако, будучи доступным широкому кругу пользователей Internet, HTML зажил своей собственной жизнью. Вероятно, многие администраторы баз данных WWW и разработчики программного обеспечения для этой системы имеют довольно смутное представление о стандартном языке разметки SGML.

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

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

· такой файл можно создать в любом текстовом редакторе на любой аппаратной платформе в среде любой операционной системы;

· к моменту разработки HTML существовал американский стандарт для разработки сетевых информационных систем — Z39.50, в котором в качестве единицы хранения указывался простой текстовый файл в кодировке LATIN 1, что соответствует US ASCII.

Таким образом, гипертекстовая база данных в концепции WWW — это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей этих файлов (гипертекстовые ссылки).

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

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

· разметка математических формул;

· дополнительные контейнеры заголовка;

· дополнительные атрибуты стандартных контейнеров тела документа (ALIGN; BGCOLOR; TARGET и т.п.);

· разбиение страницы на фреймы;

· открытие дополнительных окон и др.

Также, помимо возможностей разметки текста, включения мультимедиа и формирования гипертекстовых связей в HTML, включены дополнительные средства работы с мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати изображений и документов. Эти возможности служат интернационализации WWW и распространению ее по всему миру. Кроме того, для управления сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно использовать языки программирования этих сценариев типа JavaScript, Java и VBScript.

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

Таги HTML-документов в большинстве своем просты для понимания и использования, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. HTML-таг состоит из имени, за которым может следовать необязательный список атрибутов тага. Текст тага заключается в угловые скобки (<и>). Простейший вариант тага — имя, заключенное в угловые скобки, например <HEAD> или <i>. Для более сложных тагов характерно различие атрибутов, которые могут иметь конкретные значения, определенные автором для видоизменения функции тага.

Атрибуты тага следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тагов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL других документов в качестве значения атрибута HREF.

Чаще всего HTML-таги состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тага идентично имени начального, но перед именем конечного тага ставится косая черта (/) (например, для тага стиля шрифта — курсив <i> закрывающая пара представляет собой </i>, для тага заголовка <TITLE> закрывающей парой будет </TITLE>). Конечные таги никогда не содержат атрибутов. По своему значению таги близки к понятию скобок «begin/end» в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п. Таги определяют область действия правил интерпретации текстовых тагов документа.

При использовании вложенных тагов в документе следует соблюдать особую аккуратность. Вложенные таги нужно закрывать начиная с самого последнего и двигаясь к первому. Некоторые HTML-таги не имеют конечного компонента, поскольку они являются автономными элементами. Например, таг изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным тагам также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и таги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например таги <МЕТА> и <BASE>.

В некоторых случаях конечные таги в документе можно опускать. Большинство браузеров реализованы так, что при обработке текста документа начальный таг воспринимается как конечный таг предыдущего. Самый распространенный таг такого типа — таг абзаца <Р>. Поскольку он используется в документе очень часто, то его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следующий таг <Р> сигнализирует браузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тагом конца абзаца вообще не пользуются.

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

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

«контейнер»: = <«имя тага» «список атрибутов»>;

содержание контейнера

</«имя тага»>;

Группы тагов HTML. Все таги HTML по их назначению и области действия можно разделить на следующие основные группы:

· определяющие структуру документа;

· оформление блоков гипертекста (параграфы, списки, таблицы, картинки);

· гипертекстовые ссылки и закладки;

· формы для организации диалога;

· вызов программ.

Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка — это адрес другого HTML-документа или информационного ресурса Internet, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена.

Гипертекстовые ссылки в HTML делятся на два класса: контекстные гипертекстовые ссылки и общие. Контекстные ссылки вмонтированы в тело документа, как это было продемонстрировано в предыдущем примере, в то время как общие ссылки связаны со всем документом в целом и могут быть использованы при просмотре любого фрагмента документа. Оба класса ссылок присутствуют в стандарте языка с самого его рождения, однако первоначально наибольшей популярностью пользовались контекстные ссылки. Эта популярность привела к тому, что механизм использования общих ссылок практически полностью «атрофировался». Однако по мере стандартизации интерфейса пользователя и стилей представления информации разработчики языка снова вернулись к общим ссылкам и стремятся приспособить их к задачам управления этим интерфейсом. Справедливости ради следует отметить, что общие гипертекстовые ссылки в большинстве браузеров не используются и не отображаются.

Структура HTML-документа позволяет использовать вложенные друг в друга контейнеры. Собственно, сам документ — это один большой контейнер, который начинается с тага <HTML> и заканчивается тагом </HTML>.

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

Тело документа состоит из:

· иерархических контейнеров и заставок;

· заголовков;

· блоков (параграфы, списки, формы, таблицы, картинки и т.п.);

· горизонтальных отчеркиваний и адресов;

· текста, разбитого на области действия стилей (подчеркивание, выделение, курсив),

· математических описаний, графики и гипертекстовых ссылок.

Активные изображения. Активные изображения (image maps), или изображения, чувствующие щелчки мыши, позволяют создавать графические меню произвольной формы. Пользуясь таким меню, читатели смогут путешествовать по всем закоулкам и проспектам web-узла. Активное изображение — это просто картинка с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц или узлов. Работает такое изображение следующим образом: когда пользователь щелкает мышкой на картинке, определенной как активное изображение, координаты щелчка передаются на web-сервер. Сервер ищет в карте (mapfile) активную область, содержащую переданные координаты. Если такая область находится, заданный в карте URL активируется, и браузер пользователя переходит на новую страницу. С помощью активных изображений можно решить сразу две задачи: создать меню своего web-узла и разместить на нем графику.

Размещение активных изображений. Есть два типа активных изображений: на сервере и у клиента. Изображения первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и передать на браузер нужную страницу. Активные изображения, работающие на клиентской машине, задают информацию об активной области на HTML-странице, так что браузер сам выясняет, какие области являются активными, и запрашивает с сервера требуемую страницу.

Активные изображения, работающие у клиента, имеют несколько преимуществ. Во-первых, страницы с ними можно перенести на другой сервер. Во-вторых, серверу не приходится выполнять лишнюю работу (например, просматривать всю информацию об активных областях), т.е. нагрузка на сервер уменьшается. При использовании работающих на сервере активных изображений в каталоге cgi-bin сервера должен быть соответствующий сценарий. Недостаток активных изображений, работающих на клиентской машине, состоит в том, что обращаться с ними умеют только браузеры, поддерживающие HTML. Если у пользователя другой браузер, на вашей странице появится обычное графическое изображение, не чувствующее мышь. Так что у вас есть три возможности: сделать активное изображение на стороне клиента, что может отвратить от вас инертных людей, не спешащих менять свои браузеры; поместить его на сервере, и тогда им смогут воспользоваться практически все; применить оба вида изображений на одной странице.

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

Средства форматирования. Приятное свойство таблиц состоит в том, что если вы захотите, то можете сделать их границы невидимыми. Это позволяет с помощью тага <TABLE> красиво размещать на странице текст и графику. До сих пор таг <TABLE> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически такой же свободой использования <пустого пространства^ что и создатели печатных страниц. Таблицы в большей мере, чем что-либо другое, помогают отойти от иерархического размещения текста на web-страницах. Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с помощью таблиц.

Гипертекстовые ссылки и картинки — это свойства объекта «документ», который, в свою очередь, является частью объекта «окно». И гипертекстовые ссылки, и картинки составляют встроенные массивы, к которым можно обращаться по индексу.

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

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

Листание картинок и их автоматический просмотр. Вся страница размечается как таблица, состоящая из одного столбца в две ячейки. В первой ячейке размещаются три кнопки управления просмотром картинок «Вперед», «Старт/Стоп», «Назад». Во второй ячейке размещаются картинки, выбранные путем листания. Листание осуществляется кнопками «Вперед» и «Назад». Возможен и другой вариант выбора картинки, когда система сама через некоторый промежуток времени периодически меняет картинки. Для этого следует сначала запустить автоматическую смену картинок, нажав на кнопку «Старт/Стоп», а потом, когда будет показана нужная картинка, остановить автоматическое листание, снова нажав на кнопку «Старт/Стоп».