Web Creation - еженедельный сетевой журнал для вебмастеров

   
Html-writing мифы и реальность

Автор: Валерий Валеев
Сайт автора: http://valeev.da.ru/
Впервые опубликовано в журнале "Мир интернет"

World Wide Web, в оригинале задуманная как средство ассоциативной структуризации ресурсов Интернета, к настоящему времени стала для большинства пользователей привычным интерфейсом для работы с прочими службами Сети - электронной почтой, передачей файлов, удаленными базами данных... Естественно, что значительный спрос на ресурсы WWW обусловливает спрос на специалистов по подготовке информации к опубликованию в World Wide Web

Основа Паутины - гипертекст, то есть формат, обеспечивающий в ключевых местах возможность перехода к ресурсам Сети, имеющим, с точки зрения автора, какое-либо отношение к контексту. На сегодня разработаны и поддерживаются несколько таких форматов, но с первых дней существования Web главным из них остается HTML (HyperText Markup Language, язык разметки гипертекста), и, таким образом, путь к успешной карьере web-мастера неминуемо лежит через его изучение.

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

Например Netscape не поддерживает тег <if rame>, а эффекты, которые можно получить, используя тег <lауег>, не будут замечены пользователями Microsoft Internet Explorer. Псевдовыпуклые границы таблиц можно подкрасить с помощью атрибутов bordercolordark и bordercolorlight, но оценить подобранное вами сочетание цветов можно лишь с помощью Internet Explorer. Подобная ситуация наблюдается и в отношении дополнений к HTML - языка иерархических деклараций стилей (Cascading Style Sheets, CSS) и концепции динамической разметки HTML-документа с помощью скриптов, исполняемых на стороне клиента.

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

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

...
«Нормальный»   текст
<ul>
Смещенный  текст
</ul>
...

Выделить пункты списка, не смещая их, позволяе пользование тега <li> без обрамляющих тегов сп (рис. 1). В список входят:

<li   type=square>Объект   1 
<li   type=square>Объeкт   2
...
 

Еще чаще для создания отступов используются прозрачные GIF-картинки:

«Нормальный»   текст<br> 
<img  src=0.gif  width=10  height=20  border=l
align=left   hspace=5>Смещенный  текст
Интересный вид странице придают вложенные таблицы (рис. 2):
<table width=300  border=0   cellpadding-0 cellspacing=0><tr> <td bgcolor=990099>
<table width=100% border=0   cellpadding=7 cellspacing=1>
<tr   align=center>
<td bgcolor=c0c0c0>A</td>
<td bgcolor=9999cc>B</td> 
<td bgcolor=c0c0c0>C</td> 
</tr>
</table> 
</td></tr></table>

Авторы сайта yaseu.da.ru для отрисовки вертикальных разделителей использовали символ «|» и стилевую спецификацию «line-height: 0.7;»

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

Дмитрий Кирсанов в своей - замечу, весьма увлекательной - книге «Веб-дизайн» неоднократно подчеркивает, что HTML предназначен для структурной разметки документов, но отнюдь не для оформления. При этом большая часть текста на стартовой странице сайта Dmitry Kirsanov Studio подается зрителю в виде карти- нок. Перефразируя цитату из упомянутой книги, оформление в виде рисунка того, что по сути своей рисунком не является, есть прямое нарушение идеологии структурной разметки.

Другой пример противоречия себе - Артемий Лебедев, автор «Ру/Ководства», чтива, на наш взгляд, тоже занимательного, если не обижаться на стремление автора популяризовать излагаемые мысли до тривиальности. И тут, и там в теле страниц, несущих всем известный логотип - штрих-код, встречаются теги <img . .. >, в которых значение атрибута <alt> не квотируется либо же атрибут просто опускается.

Наконец, авторы спецификации HTML 4.01 (www.w3.org/TR/html4) используют тег </li>, в то время как раздел, посвященный элементу списка, объявляет закрывающий тег необязательным.

Чтобы лучше показать, что представляет собой современный HTML, позволю себе напомнить читателю историю создания этого языка.

В 1991 году, на заре weboстроения, сотрудниками CERN была начата разработка языка для написания гипертекстовых документов. 1993 годом датировано появление HTML версии 1.3, содержащей порядка 50 тегов. Заметим, что создатели первой версии HTML думали исключительно о структурной разметке гипертекста, и лишь несколько — меньше десятка - тегов предполагали визуальное выделение соответствующих элементов web-страницы. Не следует удивляться «узкомыслию» разработчиков первой версии, ибо появление визуальных броузеров относится к тому же времени. Быстрое расширение WWW привело к основанию в 1994 году Консорциума W3 (W3 Consortium, W3C) - организации, ставшей правопреемницей CERN в области разработки стандартов для WWW, и версия 2.0 языка HTML, утвержденная в 1995 году, разрабатывалась уже сотрудниками W3C. Главное отличие HTML версии 2.0 от HTML 1.3 - присутствие элементов, делающих web-страницы интерактивными, - форм.

В том же 1994 году в свет вышла первая версия броузера Netscape, вскоре ставшего лидером на рынке web-клиентов. Проникновение и быстрая экспансия коммерции в WWW стали причиной, заставившей корпорацию Netscape Communications разрабатывать собственную спецификацию HTML Она отличалась от спецификации W3C значительным количеством тегов, предназначенных для придания HTML-странице визуальной привлекательности, поддержкой языка JavaScript и апплетов на Java. Такой подход противоречил идее HTML как языка структурной разметки, но принес популярность броузеру, выпускаемому корпорацией, и страницам, ориентированным па просмотр в Netscape.

W3C попытался устранить противостояние «визуального» и «структурного» подходов к созданию web-страниц, введя в разрабатываемую версию HTML 3 поддержку CSS, но утверждение этой версии языка затянулось, и в конце концов проект был закрыт. Довольно быстро была разработана спецификация HTML 3-2, ставшая в действительности лишь свидетельством официального признания нововведений, сделанных Netscape.

Тем временем корпорацией Microsoft был выпущен броузер Internet Explorer версии 3-0, составивший серьезную конкуренцию Netscape. Так родился еще один стандарт.

1997 год ознаменовался утверждением версии HTML 4.0, в которой, наряду с прочими усовершенствованиями языка, «визуальные» теги и атрибуты были помечены, как «не рекомендованные к использованию» (deprecated). Вводятся три типа HTML-документов {Document Type Definition, DTD): Strict, Frameset и Transitional. Strict DTD декларирует «ординарный» тип документа, не содержащий «визуальных» тегов и тегов, соответствующих документам, скомпонованным из фреймов. Типу Transitional соответствуют документы типа Strict и документы, содержащие, помимо тегов Strict DTD, «визуальные» теги. Frameset DTD в качестве подмножества содержит Transitional DTD и, кроме того, определения элементов для создания наборов фреймов.

Текущая версия HTML 4.01, утвержденная 24 декабря 1999 года, описывает 90 тегов и 188 атрибутов, из них 10 и 47 соответственно отнесены к «визуальным». Таким образом, если сравнивать с предыдущей версией HTML, можно говорить о появлении в спецификации W3C признаков внутренней гармонии.

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

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

На мой взгляд, спецификации HTML, разрабатываемые Консорциумом, не следует воспринимать, как догму. Этот стандарт, безусловно, достоин серьезного изучения именно в качестве рекомендаций - пожеланий авторам HTML-документов, как позаботиться о представлении информации в максимально доступной и удобной для восприятия и обработки форме. Разумный подход к представлению информации демонстрирует, например, сайт http://www.macromedia.com/. Основная версия сайта построена на основе технологии Flash, но для посетителей, еще не установивших соответствующий plug-in-модуль, существует HTML-версия. Так что даже используя текстовый броузер, при просмотре этого сайта вы сможете получить ту же информацию, что и с помощью графического броузера, хотя и в менее привлекательной форме.

Но вернемся к вопросу об отношении к спецификациям HTML. Разумеется, утверждение «Всякий HTML-до кумент должен содержать элемент <title> внутри раздела <head>» не означает, что, согласно мнению экспертов W3C, каждый приличный броузер, обнаружив документ без названия, должен прекратить работу, или разразиться бурей сообщений об ошибках, или же, на худой конец, отказаться воспроизводить такую страницу Но оставляя ресурс без развернутого названия, вы лишаете зрителей возможности ознакомиться с его содержимым перед прочтением, а при создании закладки для страницы - возможности сохранить ее содержательное описание.

То же справедливо и применительно к атрибуту <alt>. Пользователям с неграфическими броузерами необходимо понимать, какого рода информация заключена в картинке. Но использование атрибута <alt> бессмысленно, если изображение играет роль лишь декоративного элемента. Правда, W3C предостерегает создателей web-страниц от использования картинок в оформительских целях и в качестве альтернативы предлагает применять язык CSS, по в силу причин, о которых речь пойдет далее, это возможно далеко не всегда.

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

Необязательно ставить знак «#» перед шестнадцатеричным идентификатором цвета.

Некоторые моменты спецификации W3C не ограничивают, а, напротив, освобождают от лишних хлопот, правда, незначительных. Еще в версии HTML 3.2 необязательными были объявлены закрывающие теги заголовка столбца, ряда и клетки таблицы (</th>, </tr> и </td> соответственно). Но опыт показывает, что не закрытые теги <tr> и < td>, использованные во вложенных 'таблицах, неправильно интерпретируются Netscape вплоть до версий 4.x.

Забавно, что структурные теги <html>, <body> и <head>, как открывающие, так и закрывающие, согласно рекомендациям Консорциума, также попадают в разряд необязательных (по крайней мере, со времени утверждения HTML 3.2), и cyiy6o теоретический вопрос о "минимальном" HTML-документе с позиции W3C решается примерно следующим образом:

<!—начало  документа—>
<!doctype html  public   "-//w3c//dtd html   4.0
transitional//ru"> <title>
Документ с минимальной структурой. 
<title> 
<!—конец документа->

Хочу заметить, что несмотря на столь нежесткие требования, предъявляемыми основным стандартом к синтаксису HTML, не стоит грубо нарушать «правила хорошего топа». Дурное впечатление производят страницы, содержащие, скажем, два элемента или же сочета-ние в одном документе элементов <body> и <frameset> (я встретил такой синтаксис на чей-то домашней странице два года назад). Но вот другой пример, несколько обескураживающий: в страницы пользователей популярного сайта www.geosities.tom вставляются динамически генерируемые фрагменты. Получаемый в результате HTML-текст может содержать таблицу между областью заголовка <head> и тегом <body> или рисунок после закрывающего тега </html>. He находя причин, которые бы обосновывали необходимость такого искажения синтаксиса HTML, невольно начинаешь считать авторов этих вставок со стороны сервера людьми неаккуратными.

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

Язык иерархических стилевых деклараций вошел в стадию практического применения далеко не сразу по выходе в свет. Текущие версии основных броузеров -Netscape 4.x и MSIE 4.x—5.x - поддерживают W3C-cпецификацию CSS2 лишь отчасти, во многом придерживаясь различных точек зрения по вопросу о воспроизведении одного и того же стиля. Простейший пример такого расхождения - воспроизведение декларации стиля границы и цвета фона (рис. 3):

div   {width:   80%;
background-color:   #ffffff; 
margin:    0.5em;   
padding:    0;5em; 
border-width:   1;   
border-style:   solid;   
border-color:  cc0000; }

В этом случае MSIE заполнит белым цветом всю область, ограниченную элементом <div>, Netscape же лишь закрасит некий прямоугольник меньшего размера. Еще одна быстро обнаруживающаяся проблема, связанная с интерпретацией стилевых деклараций, - различные представления о размере шрифта, если в определении стиля в качестве единицы измерения использован типографский пункт (pt). Видимый размер шрифта в Netscape и Explorer совпадает, если соответствующая разность размеров, определенных декларациями CSS, равна 2 pt.

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

Актуальна проблема «эксклюзивных» тегов и деклараций CSS, которые хотя и поддерживаются лишь одним из броузеров, обеспечивают слишком привлекательные возможности визуального оформления документов, чтобы производители (и пользователи) могли отказаться от них. Таким является уже упоминавшийся тег <1ауег>, позволяющий, например, разместить один блок информации поверх другого. Поэтому профессиональным web-мастерам порой приходится создавать различные реализации одного и того же элемента оформления для просмотра в разных броузерах (любители, как правило, следуют более легким путем, выставляя предупреждение наподобие «Для просмотра только в Lynx версии 1.1 и младше»).

Хочется надеяться, что следующие версии броузеров избавятся от недостатков, связанных с отсутствием или неполнотой поддержки различных полезных и приятных возможностей, в теории существующих уже сегодня. Так, поддержка тега <if rame> и, насколько мне известно, полная поддержка второй версии языка иерархических стилевых деклараций CSS2, разработанной W3C, реализованы в Netscape б, доступном на настоящий момент только в отладочной версии.

Мне также кажется странным, что до сих пор в HTML нет удовлетворительного способа разбиения кода документа на несколько файлов, что позволило бы не повторять в исходных текстах страниц одного проекта одинаковые фрагменты. Способ, связанный с использованием фреймов, неуклюж и требует дополнительных ухищрений для того, чтобы создавать полноценные страницы. Как известно, существенный недостаток использования фреймов состоит в невозможности сослаться на конкретную страницу, Чтобы обойти это неудобство, разработчики сайтов па фреймах применяют технологию SSI (Server Side Include, вставки со стороны сервера), динамически создавая собственное определение набора фреймов (frameset) для каждой страницы.

В связи с этой же проблемой привлекательным кажется элемент <object>. С его помощью, в соответствии со спецификацией W3C, можно включить в документ практически любой должным образом описанный тип данных, но этот тег толком не поддерживается Netscape...

Именно «нелегальное» использование HTML для получения различных визуальных эффектов привело к появлению концепций, лежащих в основе современного лод хода к созданию web-страниц, в частности, технологии Dynamic HTML (DHTML). DHTML подразумевает использование CSS, динамической загрузки шрифтов и идеи о динамическом позиционировании содержимого HTML-документа.

Динамическое позиционирование, то есть управление на стороне клиента воспроизведением web-страницы, основано на взаимодействии вложенных в документ скриптов с объектной моделью документа (Document Object Model, DOM). Стандарт DOM нельзя отнести к числу новых - объектное представление документа является ровесником HTML Грубо говоря, DOM есть интерфейс к HTML-документу, хранимому но внутреннем представлении броузера.

До выхода HTML версии 2.0 объектная модель документа предназначалась для сугубо внутреннего использования web-клиентом. Введение форм в HTML давало пользователю возможность управлять свойствами нескольких объектов DOM нижнего уровня иерархии. Наконец, для более полного контроля за свойствами объектов DOM корпорацией Netscape Communications был разработан язык JavaScript.

В качестве альтернативы JavaScript корпорация Microsoft предложила язык VBScript, но это средство работы с DOM менее популярно, несмотря на поддержку в наиболее широко распространенном броузере Internet Explorer.

Но вне зависимости от исхода поединка JavaScript -vs-VBScript есть все основания считать, что DHTML уже стал одним из основных инструментов web-мастера, хотя еще несколько лет назад перечисленные компоненты DHTML относились к неформальным и вызывали раздражение у адептов идеологии структурной разметки. Достоинства DHTML оказались столь неоспоримыми, что и Microsoft, и Консорциум W3 были вынуждены изыскать для DHTML место среди поддерживаемых стандартов, а затем и приступить к разработке собственных спецификаций данной технологии.

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

Итак, уже сегодня профессиональный web-мастер должен относиться к отсутствию единого стандарта языка разметки гипертекста, как к объективной реальности. По-видимому, не стоит и в будущем рассчитывать на унификацию поддерживаемых различными броузерами версий HTML и наборов plug-in-модулей. Да и можно ли относиться к возможному появлению «глобальной», обязательной для поддержки всеми клиентами спецификации, как к позитивному изменению положения вещей в WWW? Безусловно, такое событие устранило бы многие проблемы, которые сегодня вынужден решать создатель web-страниц. Но настоящий специалист, творчески относящийся к своей работе, не просто может позволить себе, благодаря своему опыту и глубокому пониманию технологий, используемых для изготовления web-страниц, игнорировать некоторые предписания, но и обязан развивать свое мастерство, не ограничиваясь рамками официальных стандартов.

Поэтому хочется пожелать читателю избежать широко распространенного в современном Рунете предубеждения против использования скриптов, CSS, Flash, словом, всего, что появилось сравнительно недавно и может не поддерживаться старыми версиями броузеров. Невозможно успешно работать в сфере производства ресурсов WWW, используя лишь стандарты каменного века и всем известные избитые приемы. К тому же история знает немало примеров, когда нестандартные подходы к изготовлению web-страниц не только заставляли web-зрителей заменить броузер или установить plug-in-модуль, но и приносили немалую популярность сайту.

Автор: Валерий Валеев
Сайт автора: http://valeev.da.ru/
Впервые опубликовано в журнале "Мир интернет"

 

© журнал принадлежит Web Creation
по всем вопросам обращаться А. Кузьмин