Наиболее важное свойство базового языка HTML - это простота его освоения. Воспользовавшись парой управляющих кодов (тегов) заголовков - например, <H1></H1> и <H3></H3>, - кодов дл форматирования неупорядоченных списков - <UL><LI>/<UL> - и гипертекстовой связью - <A HREF...></A> -, вы самостоятельно создадите небольшой, но вполне приличный проект. Доберитесь до более сложных кодов, например, для графических изображений, таблиц, форм и т. п., и вскоре у вас будет Web-страница, для начала вполне пригодная. Однако в какой-то момент придет осознание того, что языку HTML в качестве самостоятельного средства разработки присущи жесткие ограничения.

HTML никогда не предназначался для разработки макетов страниц. Цель его разработки в далеком 1989 г. в ЦЕРНе состояла в создании системы кодирования, которая обеспечивала бы легкий обмен информацией в формате, не зависящем от операционной системы и аппаратных платформ, и которая позволяла бы авторам просто и эффективно ссылаться на связанные между собой документы. Таким образом, предусмотренные в HTML команды затрагивают лишь ограниченный набор элементов макета страницы - заголовки, списки, графические изображения - и имеются некоторые самые элементарные типографские функции - например, выделение полужирным или курсивным шрифтом - плюс вполне доступные пониманию средства организации гиперсвязей. На затем произошло чудо: появился браузер NCSA Mosaic. Оснащенный средствами для отображения великолепных графических изображений, он оживил скучную в эстетическом плане Internet, и начался бум Web-страниц, напоминающих страницы печатных журналов. Затем в 1994 г. был выпущен браузер Netscape с дерзким предложением нескольких нестандартных функций для разметки текста, которые можно использовать только в его среде.

Несмотря на протест тех, кто полагал - по существу справедливо, - что такие нестандартные особенности противоречат принципу универсального отображения в Web, авторы произведений для "Паутины" начали использовать эти функции для улучшения внешнего вида страниц. Акции фирмы Netscape продолжали расти с появлением новых версий Navigator, и вскоре корпорация Microsoft оснастила подобными новинками свой Internet Explorer. Итогом этой деятельности стало предоставление авторам "Паутины" средств разработки страниц Web, близких по сути к средствам управляемого проектирования журнальных страниц. (Многие утверждают, что в результате замедлилось развитие Web как самостоятельной коммуникационной среды.) Ряд таких дополнительных кодов нашел свое отражение в новом стандарте HTML 3.2, поэтому первый раунд выиграли сторонники презентационной школы.

Хотя новые коды действительно обеспечивают большую гибкость макетирования, в связи с ними возникают другие проблемы. Во-первых, эти управляющие HTML-коды, придуманные разработчиками браузеров, нарушают принцип совместимости браузеров. Во-вторых, одно дело - с усердием разместить все эти коды на одной Web-странице и совершенно иное - соответствующим образом использовать их на крупном Web-узле. Как проектировщик узла, вы хотите добиться связного представления, но постоянно заниматься согласованием всех этих кодов в каждом документе узла слишком утомительно. Для этого нужны средства, позволяющие уведомить Web-браузер пользователя, что идентичные элементы вашего узла следует обрабатывать одинаково, так, например, все заголовки уровня 2 во всех документах должны быть оформленны шрифтом одного размера и одного цвета. Другими словами, нужен способ указать браузеру: "Я хочу, чтобы все мои документы выглядели, как этот" - аналогичная возможность предусмотрена в программах верстки или, при использовании шаблонов, в текстовом редакторе. Вы хотите управлять своими документами не руками пользователей, а своими собственными - руками создателя.

Сформируйте таблицы стилей (style sheets). В настоящее время разрабатываются два варианта реализации таблиц стилей в языках HTML и SGML. Версия, санкционированная Международной организацией по стандартизации (International Organization for Standardization, ISO), называется Document Style Semantics and Specification Language (язык семантики и спецификации стиля документов), более известный как DSSSL (occam.sif.novell.com:8080/dsssl/dsssl96/). Но выясняется, что его опережает другой язык описани стилей, предназначенный именно для HTML: Cascading Style Sheets (Каскадные таблицы стилей), или CSS, - это набор команд, предложенный консорциумом W3 Consortium (www.w3.org/) для решения как проблемы оригинальных кодов HTML, так и унифицированного дизайна страниц Web. Мы рассмотрим CSS уровня 1 (CSS1), одобренный корпорацией Microsoft в начале этого года. Средствами, обеспечивающими работу с CSS, оснащен браузер Internet Explorer, а в Microsoft подготовили галерею CSS, чтобы продемонстрировать, как она работает (www.microsoft.com/truetype). Соответствующие средства фирма Netscape планирует включить в редакцию Navigator 4.0, выпуск которой ожидается к концу года.

Стиль и структура

Механизм использования таблиц стилей основан прежде всего на исключении стилевых команд из структуры документа. Хотя стилевые правила можно встраивать в текущие HTML-документы, идеальным вариантом было бы объединение их в самостоятельный HTML-документ - таблицу стилей. Суть идеи в том, что, если не вставлять коды стиля в структурный элемент HTML, то можно избежать проблем, связанных с отсутствием у браузеров средств для интерпретации и вывода на экран подвергшихся изменениям элементов. Гарнитуры шрифтов, цвета фона, высота строк и текстовые украшения - это только малая часть стилей, которыми в CSS можно управлять, что не только облегчает процедуру разработки авторами согласованных между собой документов, но и позволяет браузеру пользователя выводить их в таком же едином стиле. А в будущем спецификация CSS обеспечит более широкие возможности, чем простые браузеры. По мере внедрения в Web-документы новых технологий - таких, как воспроизведение звуковых файлов для людей с ослабленным зрением, - наличие таблиц стилей застрахует от ущерба структуру и содержание документов. По этой причине, между прочим, предложение CSS касается скорее агентов пользователя (user agents, UAs), чем браузеров, поскольку, возможно, в какой-то момент браузеры утратят свою популярность.

Шире возможности управления

Таблицы стилей позволяют управлять многими функциями макетирования и типографской разметки. К ним относятс фоновое оформление основного текста (использование цвета или графических файлов), цвета заголовков, цвета связей, в том числе тех, по которым в данном сеансе происходило обращение, внешний вид первых строк и буквиц, размеры отступов, промежутки между словами и буквами и цвета, жирность и семейства шрифтов. Во всяком случае, можно указать, скажем, что шрифт дл заголовков уровня 2 будет синий полужирный с гарнитурой типа Arial. Конечно, все это вам уже знакомо, но именно с появлением CSS стало возможным задавать эти параметры компоновки в начале HTML-документа, чтобы ко всем идентичным элементам в документе - в данном случае к заголовкам уровня 2 - применялись указанные стилистические атрибуты. И не только это: вы можете копировать описания стилей целиком из одного HTML-документа в другой, т. е. избежать необходимости снова и снова уточнять одни и те же атрибуты по всему узлу Web. В действительности возможности CSS еще шире: вставьте ссылку на некий документ, содержащий нужные вам стили, и все документы, имеющие указатель на документ с оригинальными стилевыми настройками, будут автоматически соответствовать тем же описаниям стилей.

Существует четыре способа внедрения стилей в HTML-документ: во-первых, их коды можно поместить непосредственно в раздел <BODY> документа, использу атрибут STYLE в сочетании с данным управляющим кодом или контейнером HTML. Например, код абзаца <P> можно использовать как <P STYLE=>, чтобы назначить целому абзацу определенный цвет или гарнитуру, задать для него конкретные границы и т. д. Хотя эта возможность и полезна, фактически она противоречит назначению таблиц стилей - хранить структурные элементы (в данном случае <P>) отдельно от описаний стилей. Таким образом, более эффективный вариант - вложение контейнера <STYLE></STYLE> в контейнер <HEAD></HEAD>. Внутри этого контейнера можно задавать все стилевые особенности, которые хотите применять к элементам HTML. Нельзя описать отдельный красный абзац, но, например, можно изображать все связи, по которым вы уже обращались в данном сеансе, зеленым полужирным шрифтом Helvetica размером 18 пунктов. Если у вас уже есть таблица стилей, атрибуты которой вы хотели бы скопировать, можно импортировать этот документ в текущий с помощью предложения @import (указав либо URL, либо имя локального файла) внутри контейнера STYLE. И наконец, если таблица стилей не импортировалась, но вы все же хотите, чтобы текущему документу были назначены элементы из существующей таблицы стилей, можно применять элемент LINK с элементом гиперсвязи (anchor) <A></A>. чтобы адресовать текущий документ к некой имеющейся странице, таблицей стилей которой вы хотите воспользоваться.

Создание стилей

Конструирование стилей - это просто назначение стилевых особенностей конкретным HTML-элементам. Например, чтобы все заголовки уровня 2 были красными, следует воспользоваться правилом H2 {color: red}. В данном примере H2 представляет собой селектор, а color: red - декларацию. А в самой декларации color - это параметр, а red - его значение. Это правило помещаетс в контейнер STYLE, вложенный в контейнер HEAD, так что текст на языке HTML (исключая все, не относящееся к данному примеру) выглядит примерно так:

(Атрибут TYPE для элемента STYLE содержит информацию для браузера о том, что вы работаете с типом CSS MIME, если же с DSSSL, вы бы составили следующее выражение: TYPE=application/DSSSL.)

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

В данном примере заложена информация для браузера пользователя о том, как выводить все заголовки уровн 3: зеленым полужирным шрифтом, желательно типа Arial, но если такой гарнитуры нет, ее может заменить Helvetica, sans serif или, в крайнем случае, Times. Заголовок должен отступать слева на 15%, а справа на - 25%. Всем заголовкам уровня 3 будут присущи эти стилистические особенности, что позволяет вам сконцентрировать свое внимание на содержании документа, а не на отдельных элементах макета. Заметим, что все описание стиля заключено в фигурные скобки, а каждый конкретный элемент заканчивается точкой с запятой.

Кроме того, чтобы расширить возможности управлени внешним видом, можно формировать классы стилей или специально созданные элементы. Классы помещаются в контейнер STYLE, вложенный в элемент HEAD, и обозначаются именем, которому предшествует точка. Далее в своем HTML-тексте вы можете ссылаться на этот класс как на атрибут с помощью кодов форматирования. Например, предположим, что есть два различных вида абзацев: первый (назовем его p1) с отступами справа и слева и черным текстом, а второй (p2) без отступов и с красным, полужирным текстом. Каждый вид абзаца можно определить как класс следующим образом:

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

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

Вот теперь вы, наверное, сочли бы, что уже достаточно осведомлены, для того чтобы, представив стилизованный текст с помощью графики, добитьс необходимых результатов в оформлении своих документов. Это так, но ведь не всегда есть гарантия, что пользователь работает в графическом режиме или что у него есть браузер с графическими возможностями. С таблицами стилей вы используете стандартный язык HTML, поэтому текст будет отображаться, даже если графические функции отключены или, как в случае употреблени текстового браузера типа Lynx для ОС Unix, графические возможности отсутствуют вовсе. Возможно, еще важнее то, что графика загружается намного медленнее HTML-текста, даже когда последний изысканно оформлен, а для загрузки каждого графического изображения требуется отдельное HTTP-подключение. Благодаря таблицам стилей в распоряжении пользователей имеется ускоренный доступ и возможность управления внешним видом своих документов.

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

Самый свежий вариант спецификации можно найти по адресу www.w3.org/pub/WWW/TR/WD-css1. Здесь вы найдете все возможности CSS1 - как реализованные, так и предполагающиеся. Обязательно посетите галерею CSS корпорации Microsoft и, добравшись до нее, сделайте две вещи: во-первых, просмотрите текст на языке HTML и познакомьтесь с тем, как работают таблицы стилей; во-вторых, исследуйте эту галерею с помощью сначала Internet Explorer 3.0 затем какого-либо браузера, не обладающего средствами для работы с CSS (например, Internet Explorer 1.0 или Netscape Navigator 2.0), и убедитесь, насколько эффективно использование этих таблиц.