Дмитрий Кирсанов
Веб–дизайн
Техминимум
К сожалению, веб–дизайн еще не достиг той ступени развития, на которой технические средства реализации дизайнерских идей отошли бы на второй план. Веб–дизайнер обязан не только свободно ориентироваться во всем спектре технологий современного Интернета, но и сам следить за тем, чтобы его сайты отвечали духу и букве соответствующих стандартов и спецификаций.
Стандарты, регламентирующие разные аспекты интернетовских технологий, уникальны своим не поддающимся никакому учету количеством реализации (т. е. веб–страниц, сайтов, сообщений электронной почты и т. д.), — и вследствие этого, увы, чрезвычайно низким в среднем уровнем соблюдения как формальных, так и идеологических требований этих стандартов. Вина за это лежит не только на массовой аудитории, в большинстве своем не подозревающей о том, чем, к примеру, корректное использование HTML отличается от некорректного, но и на множестве наспех написанных программ, генерирующих зачастую не лезущий ни в какие рамки программный или разметочный код. В этих условиях технологическая грамотность веб–дизайнера приобретает особое значение.
Бурно развивающиеся в последние годы технологии, калейдоскопически сменяющиеся версии программ, напряженная борьба компаний, идей и подходов — все это могло бы дать материал для увлекательного технотриллера толщиной с хороший кирпич, а не для главы в несколько десятков страниц. Я написал лишь небольшое введение, которое позволит вам свободнее ориентироваться в официальных спецификациях, стандартах и других справочных материалах, без чтения которых вам все равно не обойтись.
Кодировки текста
Отказавшись от претендующего на всеохватность изложения «от теории к практике» и «от простого к сложному», я сразу же попал во власть встречных течений, то и дело отбрасывавших меня назад: «Об этом писать нельзя, пока не объяснено то, а перед этим обязательно нужно рассказать и о том».
Так, поставив на первое место в этой главе технологии разметки текста (HTML и XML), я был вынужден сделать еще шаг назад и начать со стандартов
В общем случае
Определяющим для любой кодировки является количество охватываемых ею кодов и, соответственно, символов. Поскольку тексты в компьютере хранятся в виде последовательности байтов, большинство кодировок естественным образом распадаются на
ASCII
Однако прежде чем переходить к восьмибитным кодировкам, нужно сказать несколько слов о кодировке под названием ASCII (American Standard Code for Information Interchange) — кодировке также восьмибитной, но охватывающей только 128 символов и потому довольствующейся семью значимыми битами (старший, восьмой бит при этом всегда равен нулю). Важность этой кодировки, включающей латинский алфавит, цифры и основные знаки пунктуации, необычайно велика: почти все остальные (большие по размеру) кодировки совместимы с ней, т. е. размещают на своих первых 128 знакоместах те же самые символы в том же порядке.
Первые 32 позиции в кодировке ASCII заняты так называемыми
ОДНОБАЙТОВЫС КОДИРОВКИ
Задействовав в кодировке ASCII старший бит, мы получаем дополнительные 128 знакомест, которых должно хватить для кодирования, например, кириллического алфавита или набора каких–нибудь специ–альных символов. К сожалению, восьмибитных кодировок на свете существует гораздо больше, чем наборов символов, которые они кодируют. Очень характерна в этой связи ситуация с русским языком — анархия компьютеризации в нашей стране, наложившаяся на всемирную анархию конкурирующих компьютерных платформ и операционных систем, привела к тому, что для кириллицы существует сразу несколько однобайтовых кодовых таблиц.
Хронологически одним из первых стандартов кодирования русских букв на компьютерах был КОИ 8 («Код обмена информацией, 8-битный»). Эта кодировка применялась еще в доисторические советские времена на компьютерах ЕС ЭВМ, и когда в середине 80‑х появились первые русифицированные версии операционной системы UNIX, они унаследовали эту кодировку у своих «предков». Сеть Редком, открывшая в начале 90‑х эпоху российского Интернета, в те годы состояла в основном из компьютеров с UNIX и потому также приняла кодировку КОИ 8 в качестве стандартной. В результате КОИ 8 является сейчас единственно допустимой кодировкой в русскоязычной электронной почте и телеконференциях Usenet и одной из кодировок, которые обязательно должна поддерживать любая русская веб–страница.
Вторая по значению в русском Интернете (и, безусловно, первая по употребимости на персональных компьютерах) кодировка — это стандартная кириллическая кодировка Microsoft Windows, обозначаемая аббревиатурой СР 1251 («СР» расшифровывается как «Code Page», «кодовая страница»). Все Windows–приложения, работающие с русским языком, обязаны понимать эту кодировку без перевода. Благодаря распространенности Windows кодировка СР 1251, вместе с КОИ 8, входит в абсолютный минимум кодировок, которые приходится поддерживать русскоязычным сайтам.
Реликтом эпохи MS DOS остается так называемая «альтернативная» кодировка, в терминологии фирмы Microsoft — кодировка СР 866. И хотя в Интернете компьютеры с MS DOS — большая редкость, кодировка эта сохраняет определенный авторитет благодаря тому, что она принята в качестве стандартной в операционной системе OS/2 и в некоммерческой сети Фидо. Поэтому изредка можно встретить сайты, предлагающие посетителям в качестве одного из вариантов и альтернативную кодировку MS DOS.
Однако первой фирмой, выпустившей русифицированную операционную систему, была все–таки не Microsoft, a Apple. И разумеется, русифицированные Макинтоши, появившиеся в конце 80‑х, имели свою собственную, ни с кем не совместимую кодировку кириллицы. Хотя в нашей стране компьютеры этой марки так и не приобрели популярности, сравнимой с их популярностью на Западе, в Сети можно встретить и кириллическую кодировку для Макинтошей.
Семейство 8859. Похожая ситуация с конкурирующими платформами и операционными системами и, как следствие, с конкурирующими несовместимыми кодировками наблюдается и в других языках, пользующихся своим собственным алфавитом или даже латинским алфавитом с расширениями. Международная организация по стандартизации (International Standards Organization, ISO) попыталась навести порядок в восьмибитных кодировках, создав серию кодировок ISO 8859, расширяющих таблицу ASCII для латинских букв с диакритикой и лигатур (кодировка ISO 8859–1), кириллицы (ISO 8859–5), арабского (ISO 8859–6), греческого (ISO 8859–7), иврита (ISO 8859–8) и других алфавитов.
Если кодировка ISO 8859–5 для кириллицы так и не прижилась, первая из этой серии — кодировка ISO 8859–1, известная также под именем Latin‑1, — сумела стать общепринятым стандартом для кодирования «расширенной» латиницы. В эту кодировку включены почти все символы, употребляющиеся в письменностях западноевропейских языков — французского, немецкого, испанского и т. д. По аналогии с ASCII первые 32 позиции во второй половине кодировок серии ISO 8859 (коды со 128 по 159 включительно) объявлены «неиспользуемыми». На сей раз, однако, производители программ решили обойти этот запрет. Так, большинство шрифтов для Windows соответствуют кодировке ISO 8859–1 начиная с позиции 160 до конца таблицы, но в диапазоне 128–159 размещают некоторые дополнительные символы (в частности, длинное тире и символ «торговой марки», стр.233). Поскольку HTML обязан соответствовать стандарту Latin‑1 (а начиная с версии 4 — Unicode), числовые подстановки (стр. 29) не могут ссылаться на коды из этого диапазона.
ДВУХБАЙТОВЫЕ КОДИРОВКИ
Языки с иероглифической письменностью (японский, китайский, корейский) пользуются смешанными кодировками, в которых иероглифы (а их в сотни раз больше, чем букв в алфавите) представлены двухбайтовыми кодами, а вставки на латинице кодируются по однобайтовой таблице (обычно совпадающей с Latin‑1). Переключение между двухбайтовым и однобайтовым режимами производится специально зарезервированными управляющими символами.
В 1991 году была предпринята попытка создать единую универсальную двухбайтовую кодировку, охватывающую все алфавиты и иероглифические системы мира. Результатом стал стандарт под названием Unicode, покрывающий не только системы письменности всех живых и большинства мертвых языков мира, но и множество музыкальных, математических, химических и прочих символов. Хотя массовое применение Unicode в документах и программах остается делом будущего, для веб–дизайнера эта кодировка имеет особое значение, так как именно она объявлена «стандартной кодировкой документа» в HTML начиная с версии 4 (стр. 32).
HTML
Вместе с XML, которому посвящен следующий раздел HTML обычно причисляют к «языкам разметки текста». На самом деле роль этих двух языков, как и самого формата под названием «просто текст» («plain text»), выходит далеко за рамки обработки текстовой информации.
Текстовая часть любой веб–страницы теснейшим образом переплетена с управляющими конструкциями языка HTML, невидимыми сами по себе, но определяющими внешний вид и размещение всех остальных элементов страницы. Таким образом, в первую очередь HTML выполняет роль «скелета» страницы и сайта в целом — на HTML-разметку нанизываются текст, изображения, ссылки, интерактивные элементы и вообще все, что только может быть отображено в окне броузера. Лишь «по совместительству» HTML-файл содержит в себе еще и собственно текстовую часть страницы.
ИСТОРИЯ
Давайте для начала проследим короткую, но необычайно насыщенную историю HTML — языка, в котором столкнулись противоположные (и, в идеале, взаимодополняющие) подходы к проблеме представления информации в компьютере и который стал в последние годы ареной сотрудничества и противоборства основных действующих лиц «компьютерного театра».
В начале был SGML. Начало истории HTML следует отнести к далекому 1969 году, когда Чарльз Гольдфарб, работавший тогда в компании IBM, создал прототип языка для разметки технической документации, впоследствии названного GML, а с приданием ему в 1986 году статуса международного стандарта — SGML (Standard Generalized Markup Language). Этот обобщенный метаязык предназначен для построения систем логической,
Создатели SGML стремились полностью абстрагироваться от проблем представления текста в разных программах, на разных компьютерных платформах и устройствах вывода. Хотя формально ничто не мешает записать средствами SGML
Благодаря этим ограничениям размеченный текст сможет без труда интерпретировать любая программа, работающая с любым мыслимым устройством вывода. К примеру, при работе в графическом интерфейсе заголовок может действительно выводиться полужирным шрифтом повышенного кегля; программа, использующая текстовый интерфейс, выделит его пустой строкой сверху и снизу и, возможно, повышенной яркостью символов; синтезатор речи, читающий документ вслух, сможет отметить заголовок паузой и изменением интонации; наконец, «робот», собирающий базу, придаст тексту заголовка больший «вес» при контекстном поиске. Можно сказать, что SGML-разметка обнажает нематериальную «душу» текста, для которой впоследствии любая программа–интерпретатор сможет подобрать подходящее к случаю «тело».
Сам по себе SGML есть не готовая система разметки текста, а лишь удобный метаязык, позволяющий строить такие системы для конкретных обстоятельств. Жизнь многообразна и непредсказуема: сегодня вам требуется выделять в текстах заголовки, а завтра, возможно, понадобится размечать подписи в письмах, математические формулы или имена действующих лиц в пьесе. Стандарт SGML устанавливает лишь синтаксис записи элементов разметки, а также правила определения новых элементов и указания структурных отношений между ними. Для практической же разметки документов нужно
Золотой век. Принципы, на которых строится язык SGML, значительны и интересны; несомненно, идеология языка оказала влияние на многие компьютерные разработки. Однако сам по себе SGML не получил сколько–нибудь заметного распространения до тех пор, пока в 1991 г. сотрудники Европейского института физики частиц (CERN), занятые созданием системы передачи гипертекстовой информации через Интернет, не выбрали SGML в качестве основы для нового языка разметки гипертекстовых документов. Этот язык — самое известное из приложений SGML — был назван HTML (HyperText Markup Language, «язык разметки гипертекста»).
Изначально HTML, как и положено SGML-приложению, разделял все особенности идеологии SGML. Из сорока с небольшим тегов HTML версии 1.2 (датированной июнем 1993 г.) всего три, да к тому же и не рекомендованных к использованию, тега осмеливались намекать на физические параметры представления документа. Вся разметка была чисто логической, и лишь в описательной части стандарта, сопровождающей формальное определение тегов, можно было прочесть что–нибудь вроде «в графических броузерах действие этого тега может передаваться курсивным начертанием».
Первым же (и единственным в те далекие времена) графическим броузером была программа Mosaic, разработанная, как и сам WWW, в научном учреждении — Национальном центре суперкомпьютерных приложений США (NCSA). Так что нет ничего удивительного в том, что в этот «золотой век» никаких противоречий между официальными стандартами и их реализацией в броузерах еще не существовало. HTML неторопливо развивался, оставаясь в рамках парадигмы структурной разметки, и в апреле 1994 г. началась подготовка спецификации следующей версии языка — 2.0. Этим занимался образованный в том же году Консорциум W3 (W3 Consortium, сокращенно W3C), перенявший от CERN верховную власть и авторитет в мире WWW.
В настоящий момент консорциум, имеющий статус «международного и некоммерческого», объединяет свыше 150 организаций–членов, в том числе фирмы Netscape, Microsoft и множество других. Однако в 1994–1995 гг. его членами были почти исключительно университеты и научные учреждения. Столь академический состав W3C сказывался как на самих документах, публикуемых консорциумом, так и на процедуре (и особенно на сроках) их принятия. Достаточно сказать, что спецификация HTML 2.0, единственным серьезным усовершенствованием в которой был механизм форм (стр. 30) для отсылки информации с компьютера пользователя на сервер, была окончательно утверждена лишь в сентябре 1995 г., когда в W3C уже полным ходом шло обсуждение HTML 3, — или, как его называли поначалу, «HTML+».
HTML плюс. Пожалуй, проект HTML 3 — самая яркая и неоднозначная страница в истории языка. Работа над ним началась в марте 1995 г., и первоначальный вариант стандарта включал в себя много интересных нововведений — теги для создания таблиц, разметки математических формул, вставки обтекаемых текстом рисунков, примечаний и др. Но самое главное — HTML 3 был попыткой разрешить уже достаточно очевидное к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, заинтересованных в первую очередь в гибких и богатых возможностях визуального представления.
Противоречие это было разрешено опять–таки в полном соответствии с идеологией SGML: W3C ввел в HTML 3 поддержку так называемых иерархических стилевых спецификаций (CSS, стр.40). Система CSS формально независима от HTML, имеет совершенно иной синтаксис, не наследует никаких идеологических ограничений и позволяет, уже в совершенно иных терминах, задавать параметры графического (так же как и текстового, звукового и какого угодно другого) представления для любого тега HTML.
Нет сомнения, что CSS — почти идеальный способ избавить HTML от наследственных дефектов и перевести его развитие на принципиально новые рельсы. Тем досаднее то, как сложилась судьба этого замечательного изобретения. Поскольку спецификацию CSS увязали с другими нововведениями HTML 3, W3C долго не утверждал ее в качестве официального стандарта; задерживалось и доведение ее до более или менее завершенного вида, при котором стала бы возможной реализация CSS в коммерческих продуктах.
Идолы рынка. А между тем коммерческое освоение WWW не заставило себя долго ждать. В начале 1994 г. группа разработчиков броузера Mosaic основала корпорацию Netscape Communications и вскоре выпустила первую версию коммерческого броузера Netscape (начиная с. версии 2.0 — Netscape Navigator, а с версии 4.0 — Netscape Communicator). С этого момента начался экспоненциальный рост WWW, продолжающийся по сей день. Чтобы закрепить лидерство (на которое, впрочем, тогда еще мало кто покушался) и привлечь новых пользователей, Netscape вводила в HTML все новые и новые усовершенствования, — поддерживаемые, разумеется,
Практически все новые теги, без устали изобретаемые Netscape, были направлены на улучшение внешнего вида документа и расширение возможностей его форматирования. Причины понятны: чтобы убедить, скажем, бизнесмена, что ему пора обратить внимание на некую новую технологию» прежде всего нужно показать ему ее в привлекательном, «товарном» виде. Поставив себе целью завоевание корпоративного рынка, разработчики из Netscape не могли (да и не хотели, по–видимому) уделять должное внимание сложившимся традициям развития языка. В результате тот вариант HTML, который поддерживала выпущенная в начале 1996 г. версия Netscape Navigator 2.0, представлял собой довольно странную смесь старых логических тегов с беззастенчиво вломившимися новыми, ориентированными на графическое экранное представление документа и затрудняющими его воспроизведение на других устройствах вывода.
Бяки и буки. Такая политика компании, с одной стороны, принесла ей быстрый и впечатляющий успех (одно время версии Netscape Navigator составляли более 90 % всех используемых броузеров), а с другой — вызвала ожесточенное сопротивление наиболее сознательной части HTML-сообщества. Энтузиасты неустанно разъясняли и разъясняют каждому, кто согласен их слушать, что HTML по природе своей не имеет права зависеть от какого–то конкретного броузера и что заявления типа «эту страницу лучше всего смотреть в Netscape Navigator» являются просто насмешкой над здравым смыслом.
Помимо использования «плохих» Netscape–ориентированных тегов, широко распространена также практика «злоупотребления» средствами HTML ради сопутствующих им визуальных эффектов. Скажем, вместо того чтобы использовать тег TABLE только для оформления «настоящих» таблиц, веб–дизайнеры сплошь и рядом применяют таблицы без рамок для построения графического «каркаса» страницы (стр. 234). Нет нужды объяснять, что оформление в виде таблицы того, что по сути своей таблицей совсем не является, есть прямое нарушение идеологии структурной разметки.
Те же и Microsoft. В конце 1995 г. ситуация в мире HTML была довольно смутной. Популярность броузера Netscape неуклонно росла; программисты этой фирмы готовили к выпуску версию 2.0, которая должна была утвердить господство Netscape на вечные времена благодаря неслыханному набору новшеств (интерфейс подключаемых модулей, поддержка Java–апплетов, встроенный язык сценариев JavaScript, возможность разбивки окна на фреймы и многое другое). К этому времени W3C окончательно завяз в своем проекте HTML 3, который был слишком сильно оторван от реальности и на завершение которого у консорциума попросту не хватало ни сил, ни средств. HTML 3 по сравнению с HTML 2.0 был важным шагом вперед, однако он развивался по–прежнему в рамках идеологии структурной разметки, а инструмент, дающий возможность выйти за эти рамки, — система CSS — был еще далек от завершения.
В этот переломный момент в игру вступил новый участник — корпорация Microsoft. Долгое время эта компания, привыкшая монопольно владеть своим сектором рынка, недооценивала перспективы Интернета и не собиралась как–либо участвовать в развитии этой информационной среды. Однако невероятный взлет Netscape (число копий броузера Navigator измерялось к этому времени уже Десятками миллионов) заставил Microsoft изменить свое мнение.
И именно на броузерном фронте, где господство Netscape оставляло меньше всего шансов конкурентам, корпорация Microsoft нанесла свой главный удар. Поначалу мало кто верил, что броузер Microsoft Internet Explorer, который тогда существовал в версии 2.0 и не представлял собой ничего выдающегося, сможет составить конкуренцию Netscape. Тем не менее выпущенная летом 1996 г. версия Internet Explorer 3.0, которая поддерживала почти все расширения Netscape, вызвала настоящий бум и очень быстро утвердилась в качестве «второго главного броузера». Сейчас Microsoft и Netscape делят рынок броузеров почти поровну, и окончательный исход их битвы не берется предсказать никто.
Три, четыре… Одновременно с разработкой конкурентоспособного броузера Microsoft решила «навести порядок» и в мире HTML. Взяв под свою опеку W3C, она напитала его денежными и людскими ресурсами и тем самым заработала право едва ли не решающего голоса в этой организации. Проект HTML 3 был заморожен, а вместо него в сжатые сроки создан стандарт HTML 3.2, который, по сути, всего лишь описывает большинство расширений Netscape (с тем же успехом их можно назвать теперь «расширениями Microsoft»). Пройдя обычный в W3C процесс обсуждения и внесения поправок, спецификация HTML 3.2 была утверждена в январе 1997 года. Спираль развития HTML завершила свой первый виток — как и в «золотой век», расхождения между предписаниями стандарта и реализацией HTML в броузерах вновь были сведены к минимуму.
В декабре того же 1997 г., с принятием стандарта HTML 4.0, маятник, похоже, качнулся уже в обратную сторону — наряду с дальнейшим обогащением репертуара визуальных тегов, эта версия ввела немало пусть и не вполне «логических», но очень важных расширений для поддержки многоязычных документов (стр. 32) и обеспечения доступности документа в разных средах (стр. 34). Кроме того, в HTML 4 наконец–то прямо в тексте стандарта четко проведено разделение логических и визуальных тегов (последние объявлены «нерекомендованными», «deprecated»). Кстати, объем спецификации HTML 4 (которую я советую прочесть всем, кто имеет хоть какое–то отношение к веб–дизайну) в несколько раз больше, чем у 3.2, в основном не за счет описания новых тегов, а благодаря гораздо более подробному обоснованию целей и идеологии языка — так, в спецификацию включен даже краткий курс SGML и разбор HTML DTD.
СИНТАКСИС
Изучение любого компьютерного языка начинается со знакомства с его основными строительными блоками — операторами, выражениями, переменными. С этой точки зрения язык HTML крайне прост, чтобы не сказать — примитивен: кроме обычного текста, HTML-файл содержит лишь один тип управляющих конструкций, так называемые
Важно понимать различие между
<парный–тег>
<непарный–тег>
Парные теги должны вкладываться друг в друга без пересечений, т. е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А.
Многие теги, как парные, так и непарные, имеют
<тег атрибут 1=«значение» атрибут 2=«значение» …>
Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается. Пары атрибут=«значение» распознаются как таковые только внутри угловых скобок тега и отделяются друг от друга пробелами. В большинстве случаев атрибуты являются необязательными, и в их отсутствие интерпретатор HTML должен использовать значения по умолчанию, заданные в стандарте языка. Существуют атрибуты, не требующие присвоения значения, сам факт присутствия которых просто включает какой–то режим работы данного тега. Согласно стандарту, кавычки вокруг значения атрибута обязательны в тех случаях, когда значение это содержит какие–либо символы кроме букв, цифр, точки или дефиса; однако если вас интересует совместимость с XML, то лучше пользоваться кавычками всегда.
Подстановки. Чтобы ввести в документ символы, отсутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются
è для ё
< для <
& для &
Набор мнемонических кодов, определенный в стандарте HTML, включает в себя, в частности, весь символьный репертуар Latin‑1 (в том числе символ неразрываемого пробела , стр.229), а начиная с HTML версии 4 и некоторые из символов Unicode (стр. 231).
В числовых подстановках вместо мнемонического кода используется десятичный числовой код нужного символа с добавлением впереди символа # (например, б 0; для того же символа неразрываемого пробела). Важно помнить, что код символа берется из стандарта Unicode вне зависимости от кодировки основного текста документа. Так, в какой бы кодировке ни был представлен русский текст документа, подстановка для кириллической буквы «А» всегда будет иметь вид А (хотя поймет ли такую подстановку броузер — это уже другой вопрос).
<!DOCTYPE HTML PUBLIC " — //W3C//DTD HTML 4.0//EN»>
ТЕКСТОВАЯ РАЗМЕТКА
О возможностях HTML и CSS в области разметки текста довольно подробно рассказывается в гл. III. Здесь мне хотелось бы еще раз подчеркнуть врожденную двуплановость языка HTML, сплетенность в нем средств структурной и визуальной разметки, которая особенно четко проявляется именно в текстовой части документа. Использование минимума структурных тегов, результатом которого является «академический стиль» (стр. 159), — самый разумный выход для тех, кому не очень–то нужен какой бы то ни было дизайн или нет средств на его создание.
ССЫЛКИ И ПРИВЯЗКИ
Очевидно, возможность связывать документы паутиной взаимных ссылок — первое и главное отличие Интернета от всех других средств распространения информации, отраженное даже в названии HTML — языка разметки
Адрес назначения может указывать не только на весь документ в целом, но и на какое–то место (точнее, опять–таки, какой–то