Одним из компонентов технологии создания распределенной гипертекстовой системы World Wide Web стал язык гипертекстовой разметки HTML, разработанный Тимом Бернерсом-Ли, на основе стандарта языка разметки печатных документов - SGML (Standard Generalised Markup Language, стандартный обобщенный язык разметки).
Разработчики HTML смогли решить две задачи:
- предоставить дизайнерам простое средство создания документов;
- сделать это средство достаточно мощным, чтобы отразить имевшиеся на тот момент представления об интерфейсе пользователя.
HTML является описательным языком разметки документов, в нем используются указатели разметки (теги). Теговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тегами. То есть документ HTML представляет собой не что иное, как обычный ASCII-файл, с добавленными в него управляющими НТМL-кодами (тегами). Поскольку HTML произошел от SGML, в нем разрешено использовать только три управляющих символа: горизонтальную табуляцию, перевод каретки и перевод строки. Это облегчает взаимодействие с различными операционными системами.
Теги НТМL-документов в большинстве своем просты и понятны, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-тег состоит из имени, за которым может следовать необязательный список атрибутов тега. Текст тега заключается в угловые скобки (“<” и “>”). Простейший вариант тега - имя, заключенное в угловые скобки, например, <HEAD> или <I>. Для ряда тегов характерно наличие атрибутов, которые могут иметь конкретные значения, устанавливаемые автором для изменения функции тега.
Например, при описании таблицы открывающий тег с атрибутами может выглядеть так:
<TABLE WIDTH=570 ALIGN=center CELLPADDING=10
CELLSPACING=2 BORDER=16>
Эта запись означает следующее: таблица шириной 570 пикселов, выровнена по центру, поле между рамкой и содержимым ячеек 10 пикселов, поле рамки 2 пиксела, ширина бордюра 16 пикселов.
Атрибуты тега следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в теге значения не имеет.
Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута - одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно.
Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тегов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL (Uniform Resource Locator, унифицированный указатель ресурса) других документов в качестве значения атрибута HREF.
Чаще всего элементы разметки HTML или HTML-контейнеры состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тега идентично имени начального, но перед именем конечного тега ставится косая черта “/”. Например, для тега стиля шрифта курсив <I> закрывающая пара представляет собой </I>, для тега заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>).
Конечные теги никогда не содержат атрибутов. По своему значению теги близки к понятию скобок “begin/end” в универсальных языках программирования, которые задают области действия имен локальных переменных и т.п. Теги определяют область действия правил интерпретации текстовых документов.
Некоторые элементы разметки не имеют конечного компонента, поскольку являются автономными элементами. Например, тег изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным элементам разметки также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и теги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например, теги <META> и <BASE>.
Общая схема построения контейнера в формате HTML может быть записана в следующем виде:
“контейнер”=
<“имя тега” “список атрибутов”>
содержание контейнера
</“имя тега”>
Кроме тегов, элементами HTML являются CER (Character Entity Reference), они предназначены для представления специальных символов в документе HTML, которые могут быть неверно обработаны браузером. Предположим, создается документ HTML, речь в котором идет об элементах данного языка. Если указать имя тега <BODY> просто в документе, браузер может воспринять его как непосредственно старт-тег. Для вывода таких символов и используется CER.
Например, чтобы представить символ “<” в документе HTML, нужно заменить его на <, а символ “>” - на >. То есть, если указать в тексте HTML строку <BODY>, она будет выглядеть на экране как текст <BODY>.
Все теги НТML по их назначению и области действия можно разделить на следующие основные группы:
Структура гипертекстовой связи задается гипертекстовыми ссылками. Гипертекстовая ссылка - это адрес другого HTML-документа или информационного ресурса сети Интернет, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена.
Типичным примером использования гипертекстовых ссылок можно считать следующий пример:
Этот текст содержит:
<A HREF=”http://www.intuit.ru/help/index.html”>
гипертекстовую ссылку</A>
Гипертекстовые ссылки в HTML делятся на два класса: контекстные гипертекстовые ссылки и общие. Контекстные ссылки встроены в тело документа, в то время как общие ссылки связаны со всем документом в целом и могут использоваться при просмотре любого фрагмента документа. Оба класса ссылок изначально присутствуют в стандарте языка, однако, первое время наибольшей популярностью пользовались контекстные ссылки.
Структура HTML-документа позволяет задействовать вложенные друг в друга контейнеры. Собственно, сам документ - это один большой контейнер, который начинается с тега <HTML> и заканчивается тегом </HTML>.
Разработчикам HTML-документов предоставляется довольно богатый выбор форм отображения информации на страницах. Текстовая и графическая информация может быть упорядочена и организована при помощи списков, таблиц или просто с помощью параметров выравнивания, задания горизонтальных линий, разделения на абзацы. Иногда этих возможностей оказывается недостаточно и тогда приходится разбивать окно просмотра браузера на отдельные области или фреймы (frames).
Форма - это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает “общепринятый интерфейс шлюзов”.
Формы передают информацию программам-обработчикам в виде пар “имя переменной” = “значение переменной”. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
Дизайн Web-узлов - это точное размещение компонентов HTML-страниц относительно друг друга в рабочей области окна браузера. Недостатки такого определения Web-дизайна очевидны. В нем не учтены ни цвет, ни форма, ни другие свойства компонентов HTML-страниц. Позиционирование компонентов на странице является одним из самых слабых мест в HTML.
К компонентам страницы относятся: блоки текста, графика и встроенные приложения. Размер и границы каждого из этих компонентов в рамках HTML-разметки задаются с разной степенью точности. Размер графики и приложений можно задать с точностью до пикселя. Размеры текстовых блоков в HTML задать нельзя: они вычисляются браузером исходя из относительного размера шрифта по умолчанию. Автор страницы не может заранее определить настройки браузера пользователя, что существенно ограничивает число вариантов представления информации на странице [6].
Спецификация CSS (Cascading Style Sheets) - каскадные таблицы стилей позволяет остаться в рамках декларативного характера разметки страницы и полностью контролировать форму представления элементов HTML-разметки.
Каскадные таблицы стилей призваны разрешить противоречие между точностью определения размеров картинок и приложений, с одной стороны, и точностью определения размеров блоков текста и его начертания с другой.
Таблицы стилей также позволяют определить цвет и начертание текстового фрагмента, изменять эти параметры внутри текстового блока, выполнять выравнивание текстового блока относительно других блоков и компонентов страницы.
Наличие подобных возможностей позволяет говорить о CSS как о средстве разделения логической структуры документа и формы его представления. Логическая структура документа определяется элементами HTML-разметки, в то время как форма представления каждого из этих элементов задается CSS-описателем элемента [7].
- определяющие структуру документа;