А.В. Птушенко

Суета  вокруг  сайта

Когда редакция журнала «Техника – молодёжи» предложила мне написать статью о сайте, мне пришлось крепко призадуматься.  Понятно, что такая статья вообще не интересна «некомпьютеризованному» читателю.  Конечно, среди начально компьютеризованных есть и такие, кто ещё не включился в Интернет.  Среди тех, кто уже включился, встречаются, кто ещё не удосужился позаботиться о собственном сайте.  Понятно, писать статью следует, прежде всего, с расчётом именно на них.  Но хотелось бы чем-то заинтересовать и «продвинутых» пользователей.  Думаю, для таких важнее вопросы «что» и «для чего», а не «как» — последнее они и сами могут хорошо знать, да и книги на эту тему уже изданы в избытке.  Самая привлекательная из них — на мой, разумеется, вкус — «WEB–МАСТЕРИНГ для профессионалов» Дженифер Нидерст (ПИТЕР, С-Пб, Москва, 2001). 

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

 Если кому-то всё это покажется не столь уж и важным, он жестоко ошибётся.  Можно ведь и до полного абсурда договориться: например, произнося вместо «ч’удная» — «чудн’ая», а вместо «мук’а» — «м’ука».  И совсем уж недопустимо, когда министр обороны утверждает, что подводная лодка (очередная утонувшая) якобы делала «три узла в час».  Если бы это соответствовало ситуации, подводная лодка практически стояла бы на месте.  Ибо узлы отсчитывают не за час, а за тридцать секунд.  А один узел соответствует длине вытравленного лаглиня в пятнадцать метров.  «Три узла» означает «три мили в час».  То есть около пяти с половиной километров в час (одна морская миля равна 1,8 км).  Бедная та армия, министр которой ничего этого не понимает, и тупо повторяет типовую языков’ую (не язык’овую!) ошибку. 

Как говорим — так мы и мыслим.  И соответствующие дикие решения принимаем.  Не знают этого только весьма невежественные субъекты.

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

Сегодня глобальная Сеть не только соединила пользователей всего мира, но и утвердилась в виде новых технологий на наших персональных компьютерах.  Действительно, человек, установивший на своей машине Microsoft Office 2000, становится обладателем Интернет-технологии в готовом виде, независимо от того, подключён ли его компьютер к Сети.  Получив в подарок компакт-диск, вы можете обнаружить, что исследовать его содержимое удобнее всего при помощи Интернет-броузера.  Затем вам захочется самовыразиться за счёт размещения в Интернете собственной странички.   Сегодня многие фирмы стали использовать Сеть для рекламы и сбыта своей продукции.  Важную роль Интернет стал играть для учебных, научных и общественных организаций.  Даже в поисках работы вы можете обратиться к помощи глобальной Сети.  

 

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

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

Почти любая личная страница содержит контактные данные, рассказ о своих увлечениях («хобби») и интересах, биографические данные и описание профессиональной деятельности, список публикаций и ссылки на другие Web-страницы.  Нередко всё это увенчивает собственный портрет.

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

Для более яркого выявления собственного лица придется овладеть технологией веб-мастеринга и основными принципами веб-дизайна.  К этому мы ещё вернёмся.  Как говорит Кирсанов, уровень компьютерной грамотности веб-дизайнера должен быть повыше, чем у среднего «интернетчика» (в основном играющего on line и рассматривающего разнообразные чужие картинки), но для создания веб-сайта от начала до конца вовсе не обязательно быть программистом.  Без знания английского конечно трудно, но всё же можно обойтись.  Гораздо важнее хорошее знание родного языка.  Для нас в частности — русского.

Некоммерческие сайты обычно принадлежат учебным заведениям, благотворительным и прочим добровольным организациям, научным центрам, международным органам типа ISO.  Такие сайты, по большей части, создаются и поддерживаются в рабочем состоянии профессионалами веб-дизайна.  Тем не менее здесь редок (да и не нужен) сногсшибательный дизайн.  Сайт, не рассчитанный на пресловутое «делание прибыли» (на чём зациклились теоретическая экономика и наше государство), не рассчитан и на то, чтобы тешить чьё-то самолюбие.  Он самодостаточен благодаря его содержанию и целеустремлённости — научной, образовательной, природоохранной.  Такой сайт точно «знает», чего он хочет.  (Чего никак не скажешь о сайте коммерческом, о чём ниже).

Конечно, граница между личной страницей и некоммерческим сайтом не всегда строго установима. Если, к примеру, профессор на своей страничке (на сей раз многостраничной) публикует свои идеи и программы обучения, рассчитывая привлечь к изучению своего курса будущих студентов — конечно, негосударственных вузов, брезгающих тупыми госстандартами.  Я тешу себя надеждой, что мой личный сайт agynch.narod.ru ближе всего именно к этой группе домашних страниц. 

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

В общем-то коммерческий сайт тоже, хотя бы приблизительно, знает, что он хочет сказать посетителю, но гораздо хуже у него с вопросом, нужно ли всё это потенциальным клиентам.  Убедить посетителя в положительном ответе на последний вопрос и есть основная задача коммерческого сайта.  А тут уж все средства хороши.  Прежде всего, способные удивить и развлечь бедного «юзера».  (Для мало знакомых с компьютерным сленгом даём перевод на русский: пользователя). 

Конечно, корпоративный сайт вынужден давать сообщения (не информацию! — см. наш журнал №5 за прошлый год) и о продукции, выпускаемой фирмой.  Эта часть сайта должна, естественно, обновляться почаще.  В пределе из-за этого корпоративный сайт и становиться менее «чистым» и более «смешанным», приближаясь по дизайну к некоммерческим или к контент-сайтам. 

Как разновидность коммерческого сайта интересны страницы самих дизайнерских компаний — «оплоты стиля, бастионы моды» современного веба.  Их создание наиболее сложно.  Как говорит Д. Кирсанов, «Работая над представительством собственной студии, дизайнер решает труднейшую двойную задачу: сайт должен не только мгновенно завораживать потенциальных заказчиков, но и нравиться собратьям-дизайнерам, отвечать весьма жёстким критериям, выработанным современной дизайн-культурой.  Вкусы массовой и элитарной аудиторий, их понятия о хорошем и плохом дизайне различаются весьма значительно; дизайнерам приходится делать выбор между «попсой» и «высоким искусством», и далеко не всем удаётся гармонизировать эти два начала».  Тем не менее каждому непрофессиональному «сайтопостроителю» полезно побывать на сайтах профессиональных дизайнеров.  Например, на  www.design,ru,  www.studio.ru,  www.symbol.ru,  www.kirsanov.com,  www.quotix.com.

Самая заметная, влиятельная и «формообразующая» группа интернетовских страниц — контент-сайты.  К этой категории относятся поисковые системы, новостные сайты, колонки разнообразных обозревателей, образовательные и развлекательные страницы.  Для них всех, как и для некоммерческих сайтов, содержание вновь превосходит по важности оформление.  Разнородное и часто меняющееся содержание плохо уживается с изысками дизайна.  Как справедливо заметил по сходному поводу Александр Сергеевич, года шалунью рифму гонят, года к суровой прозе клонят. 

Но особенно вычурный дизайн и не нужен контент-сайту.  Рассчитанные на многократное или даже регулярное посещение, такие сайты стремятся свести оформительские элементы к необходимому минимуму — чтобы читатели не тратили драгоценное время на скачивание графики и не отвлекались от главного — контента (от англ. content — содержимое). 

Однако нередко эти сайты живут за счёт размещения на своих страницах чужой рекламы.  При этом возникает проблема баннера.  Для вашего сайта он является просто «чёрным» прямоугольником. Хорошо ещё, что не квадратом. (Шутка по поводу распространённой глупости на фоне издевательства над здравым смыслом г-на Малевича).  Ясно, что с вашим дизайном баннер заведомо никак не будет связан и он не обязан как-то гармонировать с вашим общим замыслом сайта.  В сущности баннер — это заголовок к чужеродному для вашего сайта рекламному тексту (banner по-английски и означает заголовок), на который баннер и соблазняет перейти вашего визитёра.

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

Для наукообразия полезно подытожить вышесказанное о классификации сайтов.  Это и сделал Д. Кирсанов (рис.1 взят из его книги «Веб-дизайн», Символ-Плюс, СПб, 1999).  По осям отложены сложность дизайна и содержания (а не их уровень).  Толщина кривой указывает на имеющийся в природе разброс данных.  А её неразрывная форма говорит о том, что возможны и любого вида смешанные сайты.

 

 

 

 

 

 

 

 

 

 

 

 

 

Следуя приведенному выше принципу наукообразия, похоже, пора всё же поднатужиться и сформулировать адекватное (хотя бы по нашему мнению) определение этого основного понятия.  (Как метко подметил гениальный Пушкин: «Хоть поздно, а вступленье есть!»).  По-английски site — место, участок.  Поэтому, говоря «сайт», можно иметь в виду определённое место в Интернете.  Но тем не менее это место вовсе не всегда относится к одному конкретному компьютеру.  Сайт — система взаимосвязанных веб-страниц (от нескольких до многих тысяч), объединённых общей темой, единым принципом оформления, гиперссылками и, как правило, размещением в пределах одного домена.  Последнее, однако, не обязательно: части сайта вполне могут располагаться на нескольких компьютерах, обслуживаться несколькими серверами и даже принадлежать к разным доменам.  Так что иногда одна и та же система страниц в зависимости от контекста может рассматриваться то как самостоятельный сайт, то как часть другого сайта.  (Что ещё раз подтверждает основные принципы системоанализа).

Веб-страницы являются HTML- или XML-документами (см. ниже).

Похоже, ряд употреблённых выше терминов требует пояснения. 

Домен (от англ. domain — владение, имение, область) — поставщик услуг Интернета или сеть компании, обеспечивающие пользователям доступ к Сети.  Каждый домен имеет имя.  Например, aol. com, аlaska.net, mtu.ru.

Сервер — это любое управляемое компьютером программное обеспечение, которое даёт ему возможность выполнять запросы на любые данные.  Запрашивающая (и отображающая) эти данные программа именуется клиентом.  Руководить общением может как та, так и другая сторона.  Отсюда популярные выражения «на стороне сервера» и «на стороне клиента».

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

В мире работают компьютеры двух принципиально разных систем: IBM-совместимые и «макинтоши».  Они разные не только программно, не только «на уровне железа».  В их схемах реализованы разные идеи.  (Хотя многие программы — Page Maker,  CorelDraw,  QuarkXPress,  PhotoShop — как раз могут работать на компьютерах обеих систем).  Россия в основном пользуется первым типом компьютеров; макинтоши (они подороже) иногда встречаются в издательствах, редакциях и непомерно важничающих офисах.

Броузером называют программу для просмотра сайта.  (Больше я не намерен приседать перед теми, кто и сам всё знает, и дальше буду писать в расчёте на восприятие того, кто знает не всё).  В мире броузеров порядка пока-что маловато.  Зато самих их много: Netscape Navigator (Communicator), Microsoft Internet Explorer, Internet Explorer 4 для компьютеров Macintosh, America Online, WebTV,
Opera, Lynx.

Каждый из них выпускался в нескольких версиях; например MIExplorer — уже в шести.  Однако выход в свет новой версии вовсе не означает, что все более ранние версии мгновенно исчезают из оборота.  Какой-то процент интернетчиков наверняка и сегодня пользуется Эксплорером-2.  Вам решать, хотите ли вы обеспечить возможность и ему увидеть ваш сайт.  От этого будет зависеть диапазон средств дизайна, которыми вы сможете воспользоваться. 

Вряд ли стоит подробно описывать все существующие броузеры.  Но дать вышеназванным семи краткие характеристики, по-моему, полезно.

Броузер фирмы Netscape Communications в первых версиях назывался навигатором, а начиная с четвёртой — коммуникатором.  С 1994г. он захватил монопольное положение на рынке и постоянно совершенствовал свои возможности.  Фирма вводила в язык HTML (о нём чуть позже) всё новые и новые усовершенствования, — поддерживаемые, разумеется, только броузером Netscape.  Новые версии всё улучшали внешний вид документа и расширяли средства его форматирования.

Однако в конце 1995г. в игру включилась корпорация Microsoft и её детище быстро завоевало положение «второго главного броузера».  Понятно, что её улучшения языка разметки поддерживаются только её же броузером.  Сегодня эти два кита — Microsoft и Netscape — делят рынок броузеров почти поровну.  На долю всех остальных остаются крохи.  Но владельцы тех броузеров — тоже люди!

Должен признаться, что у меня самого некоторое время тому назад (97 – 98 г.г.) были установлены параллельно оба «главных» броузера.  Причем в разных операционках: Эксплорер в Windows 98, Коммуникатор — в NT.  Так что мой эксперимент нельзя назвать вполне чистым: на свойства броузера накладывались особенности операционных систем.  Но как-то незаметно (при очередной переустановке операционки — с 98-х «форточек» на 2000-е) я перешёл целиком на Эксплорер.  После перехода к XP мысли о Netscape и вовсе отпали.  Насколько это известно по моим знакомым, — не у меня одного.

Эксплорер для Макинтоша несколько урезан сравнительно с Эксплорером для Виндовс.  Поэтому некоторые использованные вами возможности IE-4 могут исключить из игры пользователей этого броузера в Макинтоше.  Что и следует учитывать при выборе стратегии построения сайта.

Поклонники America Online (AOL) используют один из семи её броузеров.  Некоторые из них обеспечивают только самую малую поддержку HTML.  Последняя версия «Америка Онлайн» для PC использует адаптированную версию Эксплорера 3,0.  И следовательно, грешит всеми известными недостатками этой майкрософтовской «смотрелки».  Как утверждает Дженифер Нидерст, многие разработчики Web не раз ужасались, увидев дизайн своего сайта (который великолепно выглядел в большинстве основных броузеров) после того как он был запущен в системе AOL и отображен одним из их броузеров. 

WebTV приводит Интернет в квартиры через обыкновенный телевизор.  Он использует собственный специализированный броузер, который, естественно, имеет ряд существенных ограничений (не поддерживает фреймы, языки Java, JavaScript, ActiveX и т.п.).   

Opera — простенький маленький броузер и работает только на платформе Windows.  Он не поддерживает всё, что указано в скобках строчкой выше. 

Lynx — распространяемый бесплатно броузер, обеспечивающий просмотр только текста.  Тем не менее им пользуются.  Особенно — инвалиды по зрению.  Они используют этот броузер совместно с речевыми устройствами.

Статистика использования разных броузеров конечно не очень точна, да и разные авторы оперируют разными данными.  Если верить уже упомянутой Дженифер Нидерст, на 2001 год был следующий

расклад: Netscape — 48%; MSIE — 51%; все остальные — остальное.

Самое надёжное — самому отслеживать статистику посещения вашего собственного сайта. 

Среди Web-дизайнеров наблюдаются два диаметрально противоположных подхода к проблеме.  Небольшая их часть убеждена, что Веб должен быть общедоступным.  Они стараются использовать только самый надёжный и проверенный стандарт (HTML 3,2) и проверяют свои находки во всех существующих броузерах (вплоть до Lynx).  Ради доступности своего сайта, они пренебрегают многими современными технологиями.  Такими как DHTML, Java, JavaScript, таблицы стилей.

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

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

Наконец, встречаются и такие сайты, которые предоставляют посетителям возможность самим решать, какую из версий сайта они предпочитают посмотреть.  Такой сайт оснащён механизмами, передающими управление в руки самого пользователя.  Последний писк — создание механизма автоматического запуска версии, предназначенной именно для того типа броузера, с которого посылается запрос на ваш сайт.  Компания WebMonkey (Hotwired) демонстрирует яркий образец такого подхода: http://www.webmonkey.com.  

Существует немало программ, позволяющих в режиме on line проверить ваш сайт на совместимость с разнообразными броузерами (а также и на соответствие HTML-спецификации).  Определённую часть тестов они проведут бесплатно, но за полное индивидуальное обслуживание вашего сайта заплатить придётся.  Наиболее популярны http://walidator.w3.org ; www.websitegarage.com ; www.netmechanic.com ; http://www2.imagiware.com/RxHTML.   

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

Дизайн вообще — система принципов, подходов и методов для наилучшего достижения определённых технических результатов при оптимальном удовлетворении требований эстетики.  Веб-дизайн соответственно — частный случай дизайна вообще применительно к среде WWW.  Образно говоря, World Wide Web — это «склад информации» в электронном виде; это важное средство коммуникации и источник информации (строго — сообщений, см. выше), доступный любому, у кого есть компьютер.  Можно сказать и так: WWW — это средство графического представления сообщений в Интернете.  Хотя в буквальном переводе на русский с английского WWW означает «всемирная паутина».  Что касается обещанного выше наукообразия, то вот оно: WWW есть интерактивная мультимедийная гипертекстовая среда, использующая язык разметки и поддерживающая множество протоколов Интернета.

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

Поясним слагаемые «научного» определения WWW.  Интерактивный — от английского слова interactive, что означает «согласованный, взаимодействующий».  Грубо говоря, реагирующий на экране дисплея на поведение курсора мышки.  Мультимедийность — возможность на одном экране одновременно читать текст, разглядывать картинки, слушать музыку и даже смотреть короткие фильмы (клипы).  «Гипертекст» означает, что определённая часть «информации», которую вы видите, «ссылается» на другие фрагменты сообщения.  Грубо говоря, вы видите выделенные слова (а то и изображения), щёлкнув по которым, выводите на экран относящуюся к ним подсказку.  Гипертекстовые ссылки — кирпичики, из которых строится Веб.  Те, кто свободно гуляют в Интернете, прекрасно знают, что такое URL (Uniform Resource Locators — уникальный указатель ресурсов).  URL можно рассматривать как индивидуальный адрес.  Его имеет любой документ и каждый файл.

Язык разметки — это, в первую очередь, HTML — Hyper Text Markup Language — язык программирования (подмножество более общего языка SGML).  Этот язык использует теги — указания, каким образом сообщения должны выводиться на экран.  (Сами теги на экран не выводятся).  Все документы HTML — чисто текстовые.  В соответствии с языком разметки гипертекста броузер интерпретирует определённые теги и отображает сообщение в нужном формате.  Кроме изменения стиля текста, HTML сообщает броузеру, когда некий текст должен считаться гипертекстовой ссылкой, в каком месте вставляются графические элементы и команды отправки почты.  Язык этот имеет два плана: средства структурной и средства визуальной разметки.  Последние особенно чётко проявляются именно в текстовой части документа.  Благодаря этому языку реализуется основное отличие Интернета от всех других коммуникационных средств — возможность связывать документы паутиной взаимных ссылок.  Собственно, именно поэтому HTML и называют языком разметки гипертекста.  Любая ссылка в этом языке имеет два обязательных элемента: источник — то изображение или фрагмент текста, щелчок по которому активизирует ссылку, и адрес пункта назначения (URL, см. выше), на который ведёт ссылка.  При этом адрес назначения может указывать не только на весь документ в целом, но и на его какой-либо элемент.  В том числе и на вашем же собственном сайте (это можно назвать «внутренней ссылкой»).  Ещё одно важное отличие гипертекстового документа от бумажного — бланки, предназначенные для отсылки сообщений от пользователя обратно на сервер.  Для тех, кто знаком с теорией управления, сразу же возникает в этом аналогия с знаменитой «обратной связью» (при отсутствии которой гибнут царства и цивилизации).  Набор органов управления бланков включает поля для ввода текста (как однострочные, так и многострочные), выпадающие списки с прокруткой, переключатели, кнопки и флажки.  Благодаря этому автор гипертекстового документа может выбирать для своих форм любые элементы, а также устанавливать их размеры и содержание.  HTML — основа моды в Интернете.  Всё, что обсуждается на страницах интернетовских журналов в Сети, так или иначе связано с языком разметки гипертекста: и красивые картинки, и интерактивность веб-страниц, и битва двух гигантов (производителей броузеров), и бизнес, и игры, и многое другое.  Пользователь, игнорирующий Интернет, добровольно обрекает себя на отлучение от целого мира.

Поскольку выше мы обещали определённую строгость изложения (местами и временами), приведём шаблон типичного Web-документа, демонстрирующий принципы построения таких страниц.

<COMMENT>Комментарий к документу</comment>

<HTML>

<HEAD>

<TITLE>Структура веб-страницы</title>

<STYLE> H2 {font-family: Arbat;}

CODE {font-family: Arial;} </stile>

<META

name=”Autor”

content=”Anatoly Ptoushenko”>

<META

name=”Keywords”

content=”WWW, HTML, document, element”>

</head>

<BODY bgcolor=#FFFFFF>

<A name=”top”></a>

Переход в <A href=”#bottom”>конец</a> документа<P>

Переход к <A href=”#S001><B>ссылке 1</b></a><P>

<P>

<HR>

<H1>Заголовок 1</h1>

<H2>Заголовок 2</h2>

<H3>Заголовок 3</h3>

<H4>Заголовок 4</h4>

<H5>Заголовок 5</h5>

<H6>Заголовок 6</h6>

<HR>

Здесь расположена  <B>ссылка 1</b><A name=”S001”></a>

<HR>

<Pдесь должен располагаться оригинальный текст веб-страницы

<HR>

<A name=”bottom”></a><P>

Переход в <A href=”#top”>начало</a> документа

</body>

</html>

Проанализируем приведённые теги.

<COMMENT> </comment> Это тег комментария.  Т.е. произвольная ремарка.  Текст внутри этого тега броузером игнорируется.  Он может находиться в любом месте кода веб-страницы.  Концевой тег (с косой чертой) необходим для отделения комментария от основного текста.  Правда, для выделения комментария можно воспользоваться и иной символикой: <!-- строка комментария  -->.

<HTML></html> Отличительный признак HTML-документа.  Между стартовым и конечным тегом должна находиться вся веб-страница.

<HEAD></head> Область заголовка веб-страницы.

<TITLE></title> Элемент для размещения заголовка веб-страницы.  Эта строка помещается не в теле документа, открытого в броузере, а в заголовке окна броузера.

<STILE></stile> Описание стиля элементов страницы: кегля (размера) и типа (гарнитуры) шрифтов и т.п.

<META> Этот элемент содержит служебную «информацию», которая не отображается при просмотре страницы.  Внутри него нет текста в обычном понимании, поэтому нет и конечного тега.  Мета-данные могут содержать имя автора страницы, его почтовый адрес, набор ключевых слов для поиска, краткое описание содержания веб-страницы. 

<BODY></body>  Этот элемент заключает в себе гипертекст, который определяет собственно веб-страницу.  Внутри тега можно использовать все элементы, предназначенные для дизайна веб-страницы. В приведённом примере определён цвет фона страницы: bgcolor=#FFFFFF, что соответствует белому цвету.  Чёрный обозначается шестью нулями; жёлтый — FFFF00; синий — 0000FF; зелёный — 00FF00; красный — FF0000;  фиолетовый — 4F2F4F.

<H!></h1> Элемент заголовка. Существует шесть уровней заголовков.  1-ый — самый крупный; выравнивание текста задаётся тегом align: “left” — влево, “center” — по центру, “right” — вправо.

<HR> Означает горизонтальную линию.  Для её выравнивания применяются те же символы, что приведены строчкой выше.  Можно задать толщину линии (size= Толщина в пикселах) и её длину (width= Длина в пикселах или в процентах от толщины), а также цвет (color= ).

<A></a> Это нужно для быстрого перемещения по очень большому документу.  Используется механизм гиперссылок — в нужных местах текста расставляются соответствующие метки.

На экране моего монитора (в Интернет-эксплорер 6) записанный выше в тегах шаблон типового документа HTML выглядит так:

-----------------------------------------------------------------------------------------------------------------

Переход в конец документа

Переход к ссылке


Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Здесь расположена ссылка 1


Здесь должен располагаться оригинальный текст веб-страницы  

Переход в начало документа

-----------------------------------------------------------------------------------------------------------------

Конечно, шаблон — это не так уж интересно выглядит на экране.  Поэтому приведём описание реальной пробной (в сущности, учебной) странички.

<HTML>

<HEAD>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

<META NAME="Generator" CONTENT="Microsoft Word 97">

<TITLE>АВП- СТРАНИЦА</TITLE>

</HEAD>

<BODY LINK="#0000ff">

 

<B><U><FONT FACE="Times New Roman" SIZE=7><P ALIGN="CENTER">АВП- СТРАНИЦА</P>

</B></U></FONT><I><FONT SIZE=6 COLOR="#ff0000"><P ALIGN="CENTER"></FONT><FONT FACE="Times New Roman" SIZE=6 COLOR="#f0d58c">Добро пожаловать!</P>

</I></FONT><FONT SIZE=6 COLOR="#ff0000"><P><IMG SRC="Image6.jpg" WIDTH=147 HEIGHT=213></FONT><FONT FACE="Times New Roman" SIZE=4 COLOR="#00008b">Это я -- Анатолий Владимирович Птушенко </P>

<P>Академик, Гранд доктор философии, профессор</P>

<P>Доктор юридических / экономических наук</P>

</FONT><FONT FACE="Times New Roman" SIZE=6 COLOR="#ffffcc"><P>Вице-президент Международного Университета<BR>

гуманитарных наук</P>

</FONT><FONT SIZE=6 COLOR="#008080"><P></P></FONT></BODY>

 

Ниже показан её вид на экране дисплея.

Разбирать все существующие теги — не дело для журнальной статьи.  Отметим только специальный тег <PRE></pre>. Он важен потому, что помещённый в нём текст любым броузером будет выводиться с сохранением форматирования, установленного самим автором.  Правда, и тут не обходится без недостатков: если пользователь введёт текст как одну длинную строку, броузер её не разорвёт и она может уйти далеко за границы окна программы.

Важно представлять себе разницу между тегами — единицами разметки и элементами — составными частями документа.  Теги разделяют исходный неформатированный текст на элементы и создают новые элементы, которым в тексте ничто не соответствовало (например, графические вставки).  Сами теги бывают парные и непарные.  Первые должны вкладываться друг в друга без пересечений: если в области действия тега «А» открылся тег «В», то он (второй тег) должен закрыться до того, как закроется тег «А».  Непарный тег, как следует из его названия, вообще не требует закрытия.  К примеру, тег <META в приведённом выше тексте шаблона документа.  Многие теги (как парные, так и непарные) имеют атрибуты, уточняющие или даже изменяющие действие тега.  Регистр букв учитывается в значениях атрибутов (в самих тегах он роли не играет).  Вообще атрибуты не обязательны: в случае их отсутствия интерпретатор HTML должен использовать значения по умолчанию, заданные в стандарте языка.  Значения атрибута обычно заключаются в кавычки (см. шаблон), это обязательно, если значение содержит какие-либо символы помимо букв, цифр, точки или дефиса.  Однако для совместимости с языком XML (смиже) лучше применять кавычки всегда.  Для включения изображения используется тег IMG.  Найдите его в примере с учебной страничкой АВП.  Этот тег — ссылка на изображение, хранящееся в отдельном файле (в формате GIF или JPEG).  Этот файл может лежать как в той же папке, что и HTML-файл страницы (тогда довольно в атрибуте src указать имя графического файла); если же он располагается на другом сервере, придётся указать его полный URL-адрес.  Существуют специальные теги для включения в документ таблиц и фреймов (последнее — область гипертекстового документа, отграниченная от его общего окна и располагающая собственными полосами прокрутки). 

Новые версии броузеров поддерживают апплеты (это программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы) на языке Java c помощью простого шаблона: <APPLET code=”Имя_файла class“ width=n heigt=m> Произвольн. текст  комментария</applet>. 


---------------------------------------------------------АВП-СТРАНИЦА

Подпись: http://www.online.ru/~agynch
http://anatolpt.boom.ru/index.htm
http://www.sl.ru/~agynch

MThd         аMTrk  Zg я   @ яX      яY    яQ  ;I я  C1-P4 ELEC PIANO я  C2-P37-BASS 1 я  C3-P40-BASS 2 я  C4-P91-POLYSYNTH я  C5-P81-SYNTH MELODY я  C9-P29 ELEC GUIT я  C6-P27-CLAVINET я  C7-P77-BOTTLE я  
C8-P62-BRASS я 	C10-DRUMS я  C11-P56-ORCH HIT я  ©1991 я  Passport Designs, Inc. я  Prod by Music Data Company я  
C13-P64-Melody я  
C14-P2-Piano я 
C15-P1-Bass я  PASSPORT PLEASE я 	C16-Drums °    W А  °S 
; а @  @  @ ±      Б$ ±| 
@ ‘$^ ±[< µ      Е  µ` і      ГZ іS 
Y [K ¶      ЖL ¶s µ
c : [7 ёc №] 
@ ґ      ДP ґd •      З= •m ™*D ІY ™$y №[T ё    x И7 №      Й  І      В' І
@ [  ]( 
¶
@8™* Ѓ *0Ѓ 
*  $ 0‘$  ™*9x* x*, •
! ‘$a ™$mz*  $  ‘$ r™*9 &wh* Ѓ ‘¬W ™*( & T‘¬  ™* v*: ‘"f ™$}Bґ
@ [7,™* Ѓ *'l* pё
@ [X 
  
        ™*; а @  @  @H™$ $* Ѓ *,v* z*<V‘"  ™* ~‘"^ ™*.l‘"  ™* j‘ c ™*9 &w|* t*/R& 2*  ‘  d"f ™*< $yЃ * >$ 2*8
‘" l™* z‘$Z ™*; ${l*  д :  :  3  3  .  . 4$ 4$ :! :! ™*, д<  <  >¬ >¬ <  <  2% 2% ™*  д*) *) ™$  д"- "-  .  .  2  2 ™*< д <  <  @  @ 
‘$ .™* ~$y *. ‘$av$  ™* &$ D&y *9|* t*/@& D* l*<Ѓ * p$q ‘¬a ™*8v* z*> *D *  * Ѓ8‘¬  ™$  *0 ‘¬Px¬  ™* d$} ‘!\ ™*9x* d‘!  ™*,*$ P* v‘"j ™*@ &{H* Ѓ 
‘"  ™.D.& 0. Ѓ *: *El*  * Ѓ *' $o ‘¬^N™$  ‘¬ 
™* Ѓ ‘$^ ™*D $wX* Ѓ *0Ѓ 
* L‘$  ™$  *9x* x*, $q ‘$az™*  ‘$  ™$ Z&w *9h* Ѓ ‘¬W ™*( & T‘¬  ™* v*: ‘"f ™$}n* Ѓ *'l* Ѓ *;l* Ѓ *,v* z*<V‘"  ™* ~*. ‘"^D™$ (‘"  ™* j*9 &w ‘ c|™* t*/R& 2*  ‘  d™*< $s ‘"fЃ ™* 6$ :*8
‘" l™* z*> *D $} ‘$\ ™*  * Ѓ`*0Ѓ 
* >$ &*9>‘$ :™* x*, ${ ‘$ez™* <$ 
‘$ 0™&y *@H* Ѓ(.D@&  . Ѓ *E *:l*  * Ѓ *' ‘¬h ™$wl* Ѓ *; * Ѓ,‘¬ B™*, ‘+` ™$ ^‘+  ™* z$s ‘!f ™*<r* x‘!  ™*. ‘+PN™$ &‘+  ™* j&{ ‘"j ™*9|* B‘" 2™*/ ‘+W.™& @‘+  ™* l$y + *<Ѓ *  +  $ P‘¬^ ™*8P‘¬ &™* z*D ‘$^ ™$} “^X™* `“^ 8[R ™*0|“[  ™* 8$  ‘$  “`q ™*9x* R“` &™$y ‘$a ™*, “[Wz™*  ‘$  
™$ "“[ B™*9 “bu ™&wh* b“b &™*( ‘¬W “[a ™& T‘¬  ™*  
“[ h™${ ‘"f “[Q ™*:n* B“[ @Yi ™*'l* "“Y b™*; “Y>l™* &“Y ^Y] ™*,v* "“Y X™*< “^{V‘"  ™* T“^ *‘"^ “YR ™*.&$ F‘"  ™* F“Y $‘ c ™&w “`o ™*9|* P“` $[a ™*/R& (“[ 
™*  ‘  d“[Y ™${ *< ‘"fЃ ™*  “[  ™$ >*8 “[a
‘" l™*  “[ b‘$Z ™*; $y “^}l™* 6“^ N™*, “[Wv™* :“[  ™$ .*< “`kD‘$ .™* X“` &[Y ™*. $u ‘$av$  ™* $$  “[ B™*9 &y “bo|™* 6“b >™*/ “[c@™& D*  “[ d™*< “[RЃ ™* P“[  Yg ™*8 ‘¬a ™$wv* *“Y P™*> “Y9 ™*D *  * Ѓ “Y *™$  ‘¬ (™*0 ‘+^ “Y]|‘+  ™* &“Y >‘!\ ™${ “^} ™*9x* R“^  ‘!  ™*, “YI ™$ `* F“Y 0™&{ *@ “`s ‘"jH™* z“`  ‘"  ™.D “[c.™& 0. 4“[ ^™*: *E “[Pl™*  * 4“[ P[a ™$w ‘¬^ ™*'Z$  ‘¬ 
™* 0“[ T™*D ‘$^ ™${ “^{X™* Z“^ >[R ™*0V$ 6*  “[ .‘$  ™*9 “`qx™* R“` &‘$a ™$q *, “[Wz™*  ‘$  “[  ™$ Z“bu `B ™*9 &w0“` 8™* D“b D‘¬W “[\ ™*( & T‘¬  ™*  “[ Z‘"f ™$} *: “[Wn™* T“[ .™*' “Yal™* ,“Y X™*; “YMl™* 2“Y R™*, “Yav™* @“Y :^ ™*<0$ &‘"  ™* h“^  YU ‘"^ ™*.l‘"  ™* H“Y "`o ™&w *9 ‘ c|™* X“`  [m ™*/R& 2*  “[  ‘  d™*< ‘"f ™${ “[_Ѓ ™* &“[ 6™$  “[a ™*8
‘" l™*  “[ Z™*D $o ‘$\ “^~ ™*> *  * Ѓ(“^ 8™*0 “[ZЃ 
™*  $  “[ 0™*9 “`m>‘$ :™* R“` &™${ “[_ ‘$e ™*,z*  “[  ™$  ‘$ 0™*@ “`G bu ™&y8“`  ™* n“b :™.D “[a@™&  . H“[ J™*E “[S ™*:l*  * H“[ <™*' “Yg ‘¬h ™$ul*  “Y B™$ **; °[Y ]c “YG ™* Ѓ 
“Y  ‘¬ B™$w *, “Y\ ‘+`H™$ ,‘+  ™* .“Y L™$} “^} ‘!f ™*<r* N$  “^  ‘!  “YR ™*. ‘+Pt+  ™* >“Y ,‘"j “`c ™*9 &u|* B‘"  “` *™*/ 0w ‘+W “[a ™& l‘+ 
™/o 
* 
0  “[ @™/  + &~ *< “[eЃ ™*  “[  ™+ :‘¬P ™*8 “[m&™& P*  ‘¬  “[ ^™1q ђAo :c ™*D $} ‘$h ђEq “^X™* `“^  ™1 0*0 “[R|[  ™* 8$  ‘$  ™*9 “`qTђE  A "™* R“`  ‘$h 
ђAs >q ™$y *, “[W ђ7Ur‘$  ™*  $ "“[ B™&w “bu ™*9h* b“b &™*( “[a ‘¬W ™&  ђ> 
A 4‘¬  ™*  
“[  ђ7 Z‘"h ђ:  ™${ “[Q ђ8c Co ™*: ђ?un™* B“[ @™*' “Yil™* "“Y bY> ™*;l* &“Y ^™*, “Y]v™* "“Y X^{ ™*<N‘" $™* T“^ *™*. “YR ‘"^&™$ F‘"  ™* F“Y $™*9 &w ‘ c “`o|™* P“` $™*/ “[aR™& (“[ 
™*  ‘  d“[Y ‘"f ™*< ${Ѓ *  ђC  “[  ™$  
ђ? 2™*8 “[a
‘" Fђ8 &™*  “[ b™$y ђAw ™*; “^} ђ7R ‘$a ђ>ul™* 6“^ N[W ™*,v* :“[  ™$ "‘$  
™*< “`kPђA  > 
™* X“` &™$u “[Y ђ>s 3g ™*. ‘$a ђ:q&7 `™* $$  “[ Bbo ™&y *9|* 6“b >[c ™*/@& D*  “[ d™*< “[R 
ђ: R‘$  ђ>  ™* Fђ3 
“[  ђ<q ™$w ђ7\ “Yg ™*8 ‘¬c ђ5cv™* *“Y P™*D *> “Y9 ™*  * Ѓ “Y *™$ 
‘¬ &+< ™*0 “Y]h‘+ $™* &“Y >™${ ‘!Z ™*9 “^}x™* R‘!  “^ &YI ‘+W ™*, $ `*  
‘+ :“Y 0™*@ “`s ‘"c ™&{H* z“`  ‘"  ™.D “[c ‘+K.™& 0.  ‘+ "“[ :ђ5 $‘#Y ™*: “[P ™*E ђ7 R™*  * 
ђ< $‘#  “[ P‘+N “[a ™$w *'Z$  *  ‘+  “[ T^{ ‘$` ™${ ђAy :g Ew ™*DX* Z“^ >[R ™*0V$ 6*  “[ :‘$  
™*9 “`q,ђE 
A B™* R“` &™$q ђ7R ‘$\ ђAo ™*, ђ>k “[Wz™*  ‘$  “[  ™$ Z*9 &w “`B bu0` 8™* D“b D[\ ™*( ‘¬Z ™& 
ђ> &A  ‘¬ (™*  
ђ7  “[ 2ђ: (8a Ci ‘ i “[W ™*: $} ђ?un™* T“[ .™*' “Yal™* ,“Y XYM ™*DX* F“Y R™*0 “YaЃ 
™* *“Y :™*9 “^ ‘  .™$ H* b“^  ™*, “YU ‘ O2ђC  ?  ‘  &™* 0ђ8 $“Y "ђ<c ™*9 ђ?{ ™&w ‘"k ђ5K “`oh™* 4ђ<  ?  
5  “`  ™*( “[m2‘"  ™& (*  
“[ jђCq 8_ “[_ ђ?} ™${ *: ‘#\n™* 8“[  ђC  ? ,™$  *' “[a ђ8  ‘# D™* *“[ Z^~ ‘$e ђ7S Aq ™$o ђ>m ™*> *D *  * Ѓ(“^ 8[Z ™*0Ѓ 
*  $  “[ 0™*9 “`m ‘$  ђ> Z™*  ђ7 @“` &ђ7W :m ‘$a ђ>g ™*, ${ “[_TђA &™*  “[  ™$ H“bu `G ™&y *@8“`  ™* n“b :[a ™.D@&  .  ђ:  ‘$  “[  ђ> F™*E *: “[Sl™*  * Fђ7  “[ <Yg ™$u ђCo ™*' ђAs ‘¬a ђ>s <ml™*  “Y B™$ *“YG ™*; * Ѓ 
“Y :‘¬ &™$w “Y\ ™/ ‘+Z ™*,H$  /  *  
‘+ "“Y L^} ™*< ‘!T ™$}r* <‘!  ™$  “^  ‘+U “YR ™*.|‘+ 
™* >“Y ,™&{ “`c ‘"h ™*9|* J“`  ‘" 
+Z “[a ™*/.& L‘+ 
™*  
“[ `[e ™*<Bд =  = 
9 
9  5  5 ™*  д 0  0 “[  д"- "- 0& 0& “[m ™*8 ‘¬f д4$ 4$ 8" 8" 
ђ<  >  д:! :! ђA  
‘¬  ђC  д<  <  ™*  “[ Hд:! :! ‘$^ ™*D ђAo Eq ™$~ ђ:c ”Oy&д8" 8"2™* fд2% 2% 0& 0& ™*0 д*) *) $, $,  .  .  5  5 
9 
9 
™*  д <  <  =  = ‘$  д @  @ ™$  
*9TђE  A "™* ^”O  ђAs >q ‘$a ”Tm ™$} ђ7U ™*,f”T  ™*  ‘$ .™$ D*9 &wh* Ѓ *( ‘¬W ™&  ђ> 
A 4‘¬  ™*  ђ7 `:  ?u ™$~ ђ8c Co ‘"f ™*: ”Mwn™* Ѓ *'l* Ѓ *;f$  * Ѓ *,v* z*< $V‘"  ™* V$ (*. ‘"^l"  ™*  
”M \Hi ™*9 ‘ c ™&w|*  ”H r™*/R& 2*  ‘  d”K~ ™$u *< ‘"fЃ ™*  ”K  ђC  ™$  ђ? 2™*8
‘" Fђ8 &™* zђ>u 7R ™*; ђAw ™$} ‘$a ”Jul™* Ѓ *,Vд =  =  ;  ; ™*  д
9 
9  
8  
8  6  6 
™$ 
‘$  д 4  4 ™*< д 0  0  .  . ђA  д$, $, ђ> 
™*  д*) *) 0& 0& 4$ 4$ 6# 6#$”J  Cg ђ:q ‘$a ђ3g ™*. ђ>s ™$} д4$ 4$ 
ђ7  д.' .'  2  2  <  < ™*  $  д @  @`™*9 &y|* t*/@& D* l*< 
ђ: @”C  ‘$  ђ>  ™* Fђ3 *‘¬c ™${ ђ<q ”F{ ђ7\ ™*8 ђ5cv™* z*> *D *  * Ѓ:‘¬  
™$  *0 ‘+<h+ $™* T”F  B} ™*9 ‘!Z ™$l”B  
™* R‘!  ™$  
*, ‘+Wz™*  
‘+ j"c ”Ae ™*@ &{H* \”A 8‘"  +K ™.D $~ ”?o.™& 0.  ‘+  ”? ,™$  ђ5 $™*: ‘#Y ”<] ™*E ђ7 R™*  * 
ђ< $‘#  ”< T‘+N ™*' ”?~ ™$y`$  
*  ‘+ j“^{ ђEw ™*D $~ ‘$` ђAy :gX™* 0д =  =  <  < 
“^  д
9 
9  4  4 
“[R ™*0 д 1  1  .  . $, $, ™$  д.' .' 2% 2% ™*  д4$ 4$ “[  д8" 8" <  <  ‘$  
“`q ™*9 дF  F  ђE  ”?  дN  N  ђA  дP  P  R  R  
™* 0дD  D  4$ 4$ “`  д /  / 
ђ7R ™$} *, ђAo >k “[W ‘$\ д @  @Z™*  ‘$  “[  ™$ ^&w “bu ™*9h* D“b D™*( ‘¬Z “[\ ™& 
ђ> &A  ‘¬ (™*  
ђ7  “[ 2ђ: (™*: ђCi ‘ c ™$~ “[W ђ?u 8an™* T“[ .Ya ™*'l* ,“Y XYM ™*DX*  $ 2“Y RYa ™*0Ѓ 
* *“Y :™*9 “^ ™$ ‘  v™* b“^  YU ‘ O ™*,2ђC  ?  ‘  &™* ,$  ђ8 $“Y "ђ5K “`o ‘"k ™&w *9 ђ?{ <ch™* 4ђ<  ?  
5  “`  ™*( “[m2‘"  ™& (*  
“[ j™*: ђ?} “[_ ђCq ‘#\ ™$ ђ8_n™* 8“[  ђC  ™$  ђ? @“[a ™*' ђ8  ‘# D™* *“[ Zђ7S ™*> ‘$e ™$ ђ>m “^~ ™*D ђAq ™*  * Ѓ(“^ 8™*0 “[ZЃ 
™* 4“[  ™$ ,“`m ™*9 ‘$  ђ> Z™*  ђ7 @“` &‘$a ™$} ђ>g 7W :m “[_ ™*,TђA &™*  “[  ™$ ^“bu ™&y *@H* n“b :™.D “[a@™&  .  ђ:  ‘$  “[  ђ> F™*: *E “[Sl™*  * Fђ7  “[ <ђ>s “Yg ™*' $~ ‘¬a ђCo As <ml™*  “Y l™*; “YG ™* Ѓ 
“Y  
™$ ,‘¬ &™/ *, “Y\ ‘+Zv™*  /  ‘+ "“Y L™*< ‘!T ™$ “^}r™* <‘! (“^  YR ‘+U ™*.$$ X‘+ 
™* >“Y ,™*9 ‘"h “`c ™&{|* J“`  ‘" 
™$ */ ‘+Z “[a.™& L‘+ 
™*  
“[ $™$ <*< ”Hk “[eЃ ™*  “[  
”H D™$ *8 ”HK ‘¬f “[m4ђ<  >  A  
‘¬  ђC  ™*  
”H  ™$  
“[ ,д 0  0 D  D  ђAo :c ™$~ *D ‘$f ђEq ”Oy 
дH  H <B  B  ™*  
д4$ 4$  4  4  =  =  @  @0™*0Ѓ 
* L‘$ 
™$  
*9TђE  A "™* B”O 6ђAs 7U ”Tu ђ>q ‘$a ™*, $}z*  ‘$  ”T .™$ D*9 &wh* Ѓ *( ‘¬W ™&  ђ> 
A 4‘¬  ™*  ђ7 `:  Co ™$~ *: ”Mw ‘"f ђ8c ?un™* Ѓ *'l* Ѓ *;f$  * Ѓ *,v* z*< $V‘"  ™* V$ (‘"^ ™*.l‘"  ”M  ™* j‘ c ”Hu ™*9 &w|* 2”H B™*/ ”JeR™& $”J  
™*  ‘  d”Km ‘"f ™*< $uЃ *  ђC  ™$  ђ?  
”K &™*8 ”H_
‘" Fђ8  ”H  ™* zђ7R ™$} ”Jy ђ>u ‘$^ ђAw ™*;l* Ѓ *,v* :д =  =  <  < 
™$  д 6  6 ™*< ‘$  д 4  4  1  1 ђA  д .  . ђ> 
™*  д&+ &+ 2% 2% 6# 6# 8" 8" ”J  д4$ 4$ ”Co ђ3g ™*. $} ‘$c ђ>s :q д"- "- 
ђ7  д @  @P™*  $ h*9 &y|* t*/@& D‘$  ™* l‘$B ™*< 
ђ:  ”C .‘$  ђ>  ™* Fђ3 *7\ ™*8 ђ<q 5c ”F ‘¬e ™${v* z*D *> *  * Ѓ*‘¬  ™$  *0 ‘+UZ+  
”F $™* d”B~ ™*9 ‘!` ™$x*  ”B V‘!  ™$  
‘+P ™*,z*  ‘+ V"h ”Ak ™&{ *@H* f”A B‘+U ™$~ .D ”?u ‘" *™& 0.  ‘+  ”? 6™$  ђ5 $‘¬c ™*E *: ”<] ђ7 R™*  * 
ђ< 6”<  ‘¬ >™*' $y ”?`™$  
* Ѓ ђAy Ew ™*> *D $~ ђ:g ‘$e “^{ ™*  * ~д <  <  ;  ; “^  д 
7  
7  4  4 “[R ™*0 д 1  1 (* (* ™$  д0& 0& 4$ 4$ ™*  д6# 6# “[  ”?  д:! :!6‘$  д6# 6# ™*9 “`q д0& 0& ђE  д"- "- ђA  д 4  4  @  @ ™* R“` &[W ‘"k ™*, ђ>k Ao 7R ™$}z*  “[  ™$  ‘" H™*9 “bu ™&wh* D“b D‘¬U ™*( “[\ ™& 
ђ> &‘¬  ђA ,™*  
ђ7  “[ 2ђ: (‘ f ™*: “[W ™$~ ђCi 8a ?un™* T“[ .Ya ™*'l* ,“Y XYM ™*;l*  $ 2“Y RYa ™*,v* @“Y  ‘  &™*< “^ ™$ ‘$- $ R™* h“^  ™*. “YU ‘ a2ђC  ? "‘  *™*  $  ђ8 $“Y "ђ?{ ‘"j ™&w ђ5K <c “`o ™*9|*  ђ<  ?  
5  “`  [m ™*/ ‘" J™& 2*  “[ jђ?} “[_ ™*< ђCq ™$ ђ8_ ‘#^Ѓ ™* &“[  ™$  ђC  ? 0‘#  ™*8 “[a ђ8 V™*  “[ Z^~ ™*D $ ђAq >m ™*> ‘$` ђ7S ™*  * Ѓ(“^ 8™*0 “[ZЃ 
™* 4“[  ™$  ‘$  ™*9 “`m ђ> Z™*  ђ7 @“` &ђ7W >g “[_ ™*, $} ‘$c ђ:mTA &™*  “[  ™$ ^“bu ™*9 &y “`G8` 0™* N“b :™*( / “[a@™& 6ђ:  ™*  /  ‘$ $“[  ђ> F“[S ‘$H ™*:\‘$  ™* Dђ7  “[ <ђ>s Co ‘¬f ђAs ™$~ “Yg ђ<m ™*'l*  “Y l™*; “YGl™* $“Y  
™$  ‘¬ P™- *, “Y\ ‘+Wf+  ™*  -  “Y L‘!^ ™*< $ “^}r™* P‘!  “^  YR ™*.$$ b* >“Y ,‘"f ™*9 “`c|™* J‘"  “` *[a ™$ .P 0kN-u .  0  “[ $™$  - ") *<P) 0* p$ *84ђ<  >  A  C  ™*  
$ l¶[M ™*D •< 7 ™$~ Fq ’ w 
–W{ 
•7  <  –Ys ™* H–W 2™F  *0 •7f <f*<  7 b™* V$  
*9 •7g <g ™FS*•<  7 D™F 
* x•<_ ™RW •7_ ™*, —He D} K} ™$} •[2 •7  < V—D  ™*  —H  K .™$ *R  FQ •<j 7j ™*9 &w2•7  < 6™* 2F D’   ђ7R —Hk Oq K{ •: ™*P •5 ™&  •5  : B™*  —H  K  O Xђ8] —Hk ™*: •7b —Jk ™$~ •<b —Mo ™FQH•<  7  ™F 
* Ѓ •7g ™RW *' •<g ’ w ђ?m<•<  7 0™* Ѓ *; •<f ™F_ •7f ™R ,•7  < &ђ7  ™$  * ,F :ђ8  ™*, •<d 7d ђ7U,•7  < Fђ?  ™* zFN •<b 7b ™$ ђ8Y ™*< ’  (•7  < :™F  * V$ (Ri ’" ђ>] •7o ™*. •<o:<  7 L™* :R 0&w •<Q ™*9 F\ •7Q@7  < <™*  
F f•: ™*/ •?B?  :  ™& 2*  
–Y ^™*< FW $u •7P <P&<  7 <™F  ’"  ™* "$ L’ w •<b ™*8 Ri –Zc •7b,–[i 
•7  < 6–Z  ™* JR  
—J  
H  M  ™$} •7i ™Fi •<i ™*;<•<  7 0™*  F f–[ 
•7i <i ™*, –Yg •<  7 @™*  –Y T™$  •<g ™*< F\ •7g07  < <™F  * ~R_ •<a –Wy •7a ™*. $},•7  < Z™*  $ 6R 2•7f <f ™*9 Fc &y4•<  7 H™* &F  
–W B•5 : ™*/ –Y]&•:  5  ™& 6–Y  
™* l•7d ™FW •<d ™*<B•<  7 ,™F  * n’   •7i ™*8 •<i ™R_ ${ –Tm&•<  7 >™* \R  •: ™F_ *> •? ™*D *  * $•:  ? d™F >$  •<g ’$o ™*0 •7g87  < 4’$  ™* d*9 $ •Av ™F] ’'{ •<vR<  A &™*  F J’'  ™$  
Re *, •7b <b6<  7 D™* XR  &{ •= ™FV *@ •B ’'yH™*  •B  = `™F  
’' "–T  •<v Av ™$~ ’)u ™.D.&  –W~ •<  A  ™. 8–W  ’) "™$ 4Fa •? ™*E *: •:8:  ?  ђ7  ™*  * 
ђ8 
™F p$y Re *' •<t ’$y •7t –Wq.Yi •7  <  
–W  ™$  
*  
’$ $™R T•7b ’  •<b ™*D FN $~<•<  7  ™* HF P•<a 7a ™*0*•7  < *™$  ђ>  ™* dF] •7f <f ™*92•<  7 4™F  * x•7^ ™Ra •<^ ™*, $}(•<  7 R™*  $ "R <•7m <m ™&w FQ ђFg ™*90•<  7 8™* :F N*( •5 : —HY Ts ™&  •:  5 *—H  T  ™* v*: •<] 7] ™Fc —Kw W~ ђCU ™$~6•7  <  ’   ™*  F  —W  
K Nђ<_ •<^ ™R] *' ’  •7^07  < <™* nR  Fg *D —Yw •<f 7f —My2•7  < &™*  $  
—M  Y  ™F N*0 •7f <f2<  7 Z™* dFa *9 •7g ™$ •<g ’   •<  7 <™F  * x’" •7i ™*, Rg —M} •<i —Y}6•<  7  —Y  
M  ™* ,$  R F•<g 7g ™Fe *9 &w6•7  < 2™* JF >*( •: ? ’"  •?  :  ™& (* vFg *: $ •7? ’${ •<? <  7  
–Y F™*  ’$  ™F  $ H–[c ’ w •7m ™Rg •<m ™*',–^{ •<  7 &–[ 
™* ZR **D *> Fg •7\ ™$ •<\ ™*  *  •<  7 p™F L–^  •7^ <^ ™*0 –[o •<  7 X–[  ™* 8$ ,•<] 7] ™F\ *9,•7  < F™F  * r–YW ™Rc *, •<i 7i ™$}2•7  < H™*  $ TR 
*@ &y FV •7^ <^6<  7  ™* DF R–Y  ™.D •: 5"–Ww •5  :  ™&  . <–W V™*E •7\ ™*: Fc •<\8<  7 4™*  *  F ~•7] <] ™$~ Rc *' –Tc(•<  7 (’   ™* Ѓ •: ? ™F\ *; *  R  •?  : P™F  $ R*, •<f 7f ’¬w<•7  < :™* (’¬ R u ™F] •< ™$ *< •APA  <  ™F  –T  ™*  
’  p™Rg •7b ’"o •<b ™*.$$  –W~ 
•<  7 6’"  ™* 
ђ<  –W 0™R (’$s ™*9 &{ •= ™FQ •BDB  = "ђF 
C  ™F  *  ’$ l•<v ’&s ™R] $ */ •Av*–[i ™&  •<  A &’&  ™* .–[  ™$ 4R  F_ •? : ™*< ’'w –Wq •:  ? B™F  –W  ’'  ™* p*8 •7v ™$ ’)q •<v ™RS(–Yi,•<  7 "™*  ’)  ™$ \R  *D $~ Fk •<M ’ w •7M$7  < 4™* PF H*0 •7d <d4<  7 X™* V$  
•7a <a ™F] *9*•<  7 N™F  * x•<b ™Re —Hc ™*, $} —Ky Dm •7b,7  < "—K 
H 
D  ™* 2$ 2R  &w •7b <b ™Fc *9.•<  7 :™* :F N*( —F{ Je Mo ђC\ •: 5 ™&  •5  :  —J (F  M  ™* v$~ ђDV ™Fc *:n*  F  ’  p—Oq ђKo •<g ’  —He Jm ™*' •7g ™Rg>•7  < .™* Ѓ R  •7a ™F] •<a ™*;0•<  7 6™$  * (ђC  ™F  ђD <•<a 7a ™*, ђCY0•7  <  ђK F™* zFc •<f 7f ™$ ђD_ ™*<&•7  < L™*  ’  
™F F$ (Ri •7i ђJg •<i ’" ™*.,•<  7 Z™* j&w *9 FS •7i <i"™R  
•<  7 L™*  F b•: ™*/ •?2?  :  ™& 2* D–Y (™*< •7R ™Fc $u •<R&<  7  ’" B™F  * "$ N’ w ™Ra –Wu ™*8 •7^ <^,–Yi
•<  7 4–W  
™* "—J  H  
O H™Fi $} *; •7j <j(™R 
•<  7 :™* .F V•<g ™*, •7g(–[e •7  < (–Y  ™* *–[ :™$  •7x <x ™*< Fa0•<  7 B™*  F z–Wu •<o ™*. $} Rc •7o27  < T™*  $ h•<t 7t ™F] &y *9:•7  < "™R  * *F J•5 ™*/ •:$–Y] 
W  •:  5  ™& D* $–Y H•7j ™Fa *< •<j><  7 B™F  * f–Tm
’   •7f ™Rg •<f ™${ *8>•<  7 8™* TђC  D  J  ™Fa *> •? ™*D •: ™*  *  R  •:  ? H™F T$  •7j ™*0 ’$k •<j:<  7 L’$  ™* d*9 Fc •A_ ™$ ’'k •<_D<  A  ’'  ™*  F h$  
Rg *, ’+s •7U <U&<  7 T™*  ’+  ™R B–Rk T  ™Fc *@ ’)k •B ™&{ •=H™*  •B  = >™F 
–R  ’) R•<v ™.D •Av ™$~ ’'~"–T] 
™&  •A  <  ™. (–T  
’' *™$ 0–WB ™*E *: •: ? ’$i ™Fm6•?  : 6™*  *  
–W  ™F  ’$ l–Ye ™$y •7} <} ™Rk *' ’ wN•<  7  ™$  
* 4R P*D Fc $~X* bF 6•7a <a ™*0>•<  7  ™$ 8* d•<m ™Fc •7m ™*98•7  < <™F  * x$} •<g ™RW •7g ™*,4•7  < F™*  $ TR 
*9 •7j ™Fi &w •<j —H{ ђOi
Rs —<g •<  7 8™* .—H  <  ™F P*( •: 5 ™&  
•5  :  ђO 8™* v*: •7b ™$~ •<b ™Fc —?w 
K} ђOY Kg ’   •7  <  ђR  ™* 
F 8—? 
K  ђK  •<X 7X ™*' ’  ™Rq ђO ,•7  <  ђD] CJ HZ$™* BR BFa •7v ™*D •<v&—Mo Am
•<  7  ™*  $ *F N—A  M  •7b ™*0 •<b&<  7  —Ca Oi\™* (—C  O (™*9 Fa $ •7a <a —K}
’   —?{ 
•<  7 N™*  F 8—K  ? 8•7g <g ™*, Rg ’".•<  7 L™* ,$ 6R  Fc &w •: ? ™*9 —Mu As •?  : 2™* (F *—M  A 6•<{ ™*( •A{ —CZ Oc •A  <  ™& (* "—C  O 2Ky ™$ F] •7A <A ™*: 
—?w •<  7 N™*  ’"  ™F  —K  
–Y  —?  ™$ @–^e ™*' Rk ’ w •<m 7m –`g —Mu Ao •7  <  –^  ™* J—A  M  ™$ *D FS •7Y <Y ™*> 
R  *  *  •<  7 h™F Z—?i •7i <i ™*0 —Kk –[o
•<  7 &–` 0[  ™*  —K  ? .™$ ,FS —MU •<^ ™*9 —AY •7^&7  < R™*  F  —M (A D™Rs •<f ™$} •7f ™*, —Om C] –Ya •7  < J™*  —O 
C  
™$ LR  F\ •<x ™*@ •7x ™&y —R~ Fq •7  <  
™* 6—R  –Y  —F  ™F T.D •: 5 –W~ —CZ O] •5  :  ™&  . :–W  
—O (C "™*: •<M ™Fg •7M ™*E —Rs •7  <  —FZ8™*  *  F  —R  F P™*' $~ Rq •7q <q –Tg —Ha 
T{$•<  7 ,™* D—H  T 
™R  ’   ™Fi •: ? ™*; *  
—Rm FF2•?  : *–T  —R  F  ™$  F N*, •7Q <Q ’) –Ry —O_ CW •<  7 <™* "–R  —O  C &’)  ™*< •A ’ s ™Fi $ •< —Fa Rw
–O_&•<  A $™*  
F  —R  
F (–O  ™*. ’ s ™Rs •7] <]
’   ™$  —Te HQ –N} •7  <  ђH  —T  H  
™* 
’   
ђD  C  
–N  ™R .•B ™F] ’¬w ™*9 &{ •=(—W~ Kk –Ma •=  B 4™*  F  —W  
–M  —K  ’¬  д =  = ™*/ •<o ™$ ’+ •Ao –Kw 
™&  —Tg •A  <  —HY д ;  ; ™* &д 
7  
7 —H  ™$  
–K  —T  ’+  —Fe д 2  2 ™Fg *< •: ’¬u •? –HV •?  :  —Rs 
д$, $,(™F  *  д2% 2%(—F  –H  —R  дD  D ,™*8 $ •<g 7g0дP  —OP дP  –Fi —C] •7  <  ’¬ $™*  
$  дX  X  —O  –F  
—C  дZ  Z $•5 ™*D •: ђ:c Eq Ao ™$w ”Oy ‘$^
–Ha —T{ •:  5  —Hg ™* |¶[  дR  R  ™*0$дJ  J 0™$  
д8" 8",™*  д&+ &+: 4  4 ‘$  ™& *9 д @  @4ђE  A  —H  T  ™* ^”O  ™$u *, ђ7U As ”Tm ‘$a ђ>q:™& ,”T  ™*  ‘$ r™*9h* Ѓ *( ‘¬W4ђ> 
A 4‘¬  ™*  ђ7  ™$ Xђ:  Co ™*: ”Mw ђ8c ‘"f ђ?u ™&n* Ѓ *' & d* Ѓ $y *;l* Ѓ *,v* >$ <*< &V‘"  ™* ~*. ‘"^"™& J‘"  ™*  
”M \™${ ‘ c ”Hi ™*9d$  *  ”H r™$s */|$  *  ‘  d”K~ ™& *< ‘"fv–H 
™*  ”K  ђC :? 2™&  *8
‘" Fђ8 &™* z‘$a ™$w *D ђ>u Aw ”Ju ђ7R ™*> *  * ЃX$  *0tд ;  ; ™*  д 6  6  1  1 "- "- ‘$  д*) *) ™*9 &~ д8" 8" >¬ >¬ ђA  дD  D  ђ> 
дH  H  ™*  дP  P  X  X <T  T  ”J  ђ>s 3g ‘$a ™$w *, ђ:q ”Cg 
™&  
дJ  J  
ђ7  д>¬ >¬ "- "-  3  3 ™*  д 
7  
7  ;  ;  =  =  @  @ ™*@H* *$ ~.D^. Ѓ *: & *E 
ђ: @”C  ‘$  ђ> 
™*  * Zђ3 *‘¬c ™*' ђ5c <q ”F{ ђ7\
™& b* Ѓ ђ<  5  7  ™*; ${ * ЃH‘¬ &+< ™*,h‘+  
™* :$ 0”F  ™*< & ”B} ‘!Zl”B  ™* X‘! &™&  ‘+W ™$} *.\$ **  ‘+ j™$y ‘"c ”Ae ™*9|* (”A 8‘"  ™*/ ”?o ‘+K ™$ `‘+  ™*  
”? `™*< ”<] ‘#Y ™&Ѓ *  ‘#  ”< 8™&  ”?~ ™*8 ‘+Nv™*  ‘+ jђEw ‘$` ™$w ђ:g Ay “^{ ™*DX* Tд :  : “^  д 6  6  2  2 “[R ™*0 д .  . $, $, ™$  д2% 2% 6# 6# ™*  д<  <  “[  дB  B  D  D  ‘$  —W дN  N  ™& *9 “`q —K{ дT  T  ђE  ”?  дX  X  ђA  дZ  Z  —W 
д^  ^  ™*  —K ,дX  X  L  L  “`  ™&  д<  < 
“[W ™*, ђ>k Ao ™$u ђ7R ‘$\ —Hs T д 5  5  @  @>™*  —T 
‘$  “[  —H \“`B ™*9 “bu0` 8™* D“b D™*( “[\ ‘¬Z(ђ> &A  ‘¬ (™*  
ђ7  “[  ™$ 2ђ: (?u ™*: ђ8a “[W ‘ c ђCi ™&n* T“[  
™& "“Ya ™*'l* ,“Y XYM ™$y *DX* F“Y R™*0 “YaЃ 
™* ($  “Y (—R ™&~ *9 “^ ‘   
—Fw Gi,F  R  G  ™* P&  “^  ‘ O ™*, “YU2ђC  ?  ‘  &™* 0ђ8 $“Y "™*9 ${ ђ5K ‘"k ђ?{ “`o ђ<cd™$  * 4ђ<  ?  
5  “`  ™$s “[m ™*(2‘"  —Fy R2™*  $ 
“[  
—F  R V“[_ ђCq 8_ ™*: ‘#\ ™&~ ђ?}n™* 8“[  ђC  ? $™&  “[a ™*' ђ8  ‘# D™* *“[ Z™*> $w ‘$e ™*D ђ>m 7S Aq “^~ ™*  *  —Fm RЃ “^ .—R  ™$  *0 “[Z —F .Hu TsN™* 2—T  “[  —H 0“`m ™& *9 ‘$  ђ> Z™*  ђ7 @“` &ђ7W :m ‘$a ђ>g ™*, “[_ ™$w 
& HђA &™*  “[ b`G bu ™*@8“`  ™* *$ D“b :[a ™.D^.  ђ:  ‘$  “[  ђ> F™*: “[S ™*E &~l*  * Fђ7  “[ <™&  *' “Yg ђAs <m ‘¬a ђ>s Col™*  “Y lYG ™${ *; * Ѓ 
“Y :‘¬ &™*, / “Y\ ‘+Z —N BuP™*  /  ‘+  
—N  
B 
“Y  
™$ @&{ “^} ‘!T ™*< —Ai MqR™* <‘!  
—A  M  “^  YR ™*. $} ‘+U\™$  ‘+ 
™*  & <“Y ,™*9 $y ‘"h “`c*—?y K<™* F—?  “`  —K  ‘" 
™*/ &{ ‘+Z “[a ™$  —He ;Y <]$™& ,‘+  —;  ™*  —<  “[  —H N™&} ”Hk ™*< —F~ :ZB™*  —F  : 
”H  ™& >‘¬f “[m ™*84ђ<  >  A  
‘¬  ђC  ™*  “[ ^д"- ђAo ™$w д < ђEq :c ™*D ‘$^ 
дZ  ”Oy дh
 n 
™*  дj	 d 
 P  F  >¬ ™*0 
д8" 2% ,( 
™$  д"-  1
™*  д 5  : ‘$  д = ™*9 &
д @JђE  A "™* N”O *™$u ђ>q 7U ™*, ‘$a ђAs ™&  ”Tw^™*  ‘$ "”T P™*9h* Ѓ ‘¬W ™*(4ђ> 
A 4‘¬  ™*  ђ7  ™$ Xђ:  ?u ‘"f ™&~ ђ8c Co ™*: ”MyN™* Ѓ *'l*  
& v*; $yl* Ѓ *,v* >$ <&} *<V‘"  ™* ~”M  ™*. ‘"^b™& 
‘"  ™* j”Hu ™${ *9 ‘ cd™$  * 2”H BJe ™$s */v”J  ™$  *  ‘  d™&} *< ”Km ‘"fЃ ™*  ђC :?  
”K &™*8 ”H_
‘"  ™& Fђ8  ”H  ™* zђAw ™*> *D ‘$^ ђ>u ™$w ђ7R ”Jy ™*  * ЃX$  *0Ѓ 
* d*9 & ‘$ 6ђA  >  ™* Z”J  ђ3g ™$w ‘$c ђ>s ”Co ™*, ђ:q&7 $™& 0* v*@H* *$ ~.D^. &‘$ l™*: *E &~ ‘$B 
ђ:  ”C .‘$  ђ> 
™*  * Zђ3 *™*' ‘¬e ђ5c 7\ <q ”F@™& ,* Ѓ *; ${ * tд =  =  :  :  5  5 ‘¬  д 0  0 ,( ,( ‘+U ™*, д4$ 4$ :! :! >¬ >¬ ‘+  
”F  
™*  д:! :!  /  / ™$  д <  <  @  @ ”B~ ™*< ‘!` ™&~r*  ”B V‘!  
™*. $} ‘+PR™& 
$ **  ‘+ V™$y *9 ‘"h ”Ak|™* 2”A B™&y */ ”?u ‘+U "  
™$ B& $‘+  
™*  ”? Fђ5 $™*< ‘¬c ™&~ ”<] ђ7 \< 
™* ,”<  ‘¬ .™&  ”? ™*8 ґ[ 
—Ck O~V™* z”?  ђAy :g д @ ™$w *D “^{ ™*> ђEw ‘$e ™*  * Ѓ"“^ >™*0 “[RT™$ 
—O  C  ™*  “[ :‘$  —Fm 
™*9 “`q ™&~ —R~ ђE 
A B™*  —R  F F“` &™*, “[W ђAo >k 7R ‘"k ™$u6& D*  “[  ‘" H“`B —Hk “bu ™*9 
—Tq"“` 8™*  —H "T  “b D[\ ‘¬U ™*((ђ> &A  ‘¬ ,™*  
ђ7  ™$  “[ 2ђ: (8a ™&} ‘ f ™*: ђ?u Ci “[W —Kw
WyD™* T“[ $™& 
“Ya ™*' —K  Ts Hm(W  ™* ,“Y X™$y “YM ™*;l* 2“Y R™*, “Yav™*  —H  T  ™$  “Y  ‘   —Fm ‘$- ™*< “^ ™&} —R} ‘$ H—R  F  ™* h“^  YU ™*. ‘ a2ђC  ? "™&  ‘  *™* $ђ8 $“Y "ђ?{ ™*9 ‘"j ђ<c “`o ђ5K ™${ —Oq CeN™$  *  —O  C  ђ<  ?  
5  “`  ™*/ $s “[m ‘" t™$  *  “[ Z—Bo ™*< “[_ ђ8_ ™& ђCq ?} ‘#^ —N~™* &“[  ђC  ?  —N  B  
‘#  “[a ™*8
&  
—Ak Mo ђ8 V™*  “[ Z‘$` ™*D ђAq >m 7S ™$w “^~ ™*> *  * Ѓ(“^ 0™$  “[Z ™*0z—M  ™* &—A  
“[  ‘$  —?m K “`m ™*9 & ђ> Z™*  ђ7 &—?  K 
“` &ђ7W ™$w ‘$c ™*, “[_ ђ:m >g —Ha <V0™&  ђA &™*  —H  
<  “[ bbu ™*9 “`G —K ?q 
“` 0™* 
$ D“b :™*( “[a ™/vђ:  ™*  /  ‘$ $“[  ђ> &—?  ™*: ‘$H “[S ™&~ —K  Hi <a>‘$  ™* ,—H  <  ђ7  “[ <ђ>s As <m ™*' “Yg ђCo ‘¬f —F{ :WT™*  —:  F  
“Y &™& B—Ho ™${ “YG ™*; —<mZ™* $“Y  ‘¬ P™*, ‘+W “Y\ ™-f‘+  ™*  -  “Y  
™$  —< $H  “^} ™& *< ‘!^ 
—F} :gf™*  —:  ™&  —F  ‘!  “^  —C_ “YR ‘+A ™*. $} —7\V™$  —7  C  ‘+  ™* >“Y  —B} 6k 
‘"f ™$y *9 - “`c\—B  
6 
Ai ™*  —5_ ™- 2“`  ‘" *“[a ™*/ &~ ‘+U —?{ 3i ™$  
—5  A  ?  
™&  ‘+  
™*  —3 
“[ R—<g 
™&} *< “[e ‘#a —0=8™&  —<  
™*  —0  
“[ 
‘# F“[m ‘+I ™& *8 і[ 2ђ<  >  A  ‘+ 
ђC  ™*  
&  “[ ^‘$s ™$y 8w ђ$s ™,R,  ‘$  ђ$  ™$ <8 F‘$c ђ$c ™$sr$ nђ$  ‘$  ™, 6e &~Z6  , xђ$o ‘$o ™6gT6  & $‘$  ђ$ x¬a ™8u ‘¬a ™, $yt,  8  
$ R‘¬  ђ¬ Ѓp‘"~ ™, &{ 6k ђ"~`™6 
, Ѓ 6_Z6 0& 2‘"  ђ" 4™, $u 8wl, <8  $ ‚4, •Ns ™&} 6e µ[M 
•MZ T_D™6 
•T  N  M 
™, v&  $w 6_R6 B$ \, 8wh, $8 d$u 
•Ns Tc M\LN  T  M @™$ J&~ 6m ,\6  , |6aZ6 Bе < $, ™&  е2% ™8w , $y •N{ е:! •Mm Tq еD  J  N 
™$  ,  еP  ™8  еN  H  >¬ ™$s 
е4$ $,  .  2 ™$  е 4  
7  =  @ 
™6c &} ,<•T  N  M  ™6  , Ѓ 
6e •Ns M] Ta4™6  •N  T 
M  ™& j8u $y ,d,  8 "$ ‚8•Ns Ti ™, 6c &y •M_T™6  •N  T  M  
™, Ѓ 6gd6  & |, $u 8w ‘¬q •+c\™8  , >$ ‚4&} 6k , •+ J™6  ‘¬  ™, P&  •.k ‘"k ™6_ $wb6 2$ \, 8on, <8 ,•.  ™$u ‘" Ѓ ™$  •3k.‘'q ™, 6c &P6 ., r6a 
•3 >™&  ‘'  ™6 Ѓ $y ђ$w ™, ‘$w ™8s •0Yf™$  ,  
•0  
ђ$  ‘$  ™8 \$s ‘$m ђ$m •0a\™$ 8‘$  ђ$  •0 >™&y 6e ,V6  , Ѓ ђ$i ‘$i ™6_ •0QB™&  6  ђ$  ‘$  •0 t™$y , ‘¬g ™8u ђ¬g •+UN™, 48  $ ^•+  ‘¬  ђ¬ ЃT™, 6q ‘  ™&} ђ  •*qN™,  6 Ѓ 
6c"& 66 4•* F‘   ђ   ™,~ $u 8yX, 48  $ ‚4&{ ,~ 6kB,  
6 Ѓ &  $w QS Q 2•[\ `WD™$  •[  ` 8Zo ™,~ QZ •UeH™,  Q  •Z  U @`P [YP™$u P] •[  ` 4™P 
•Zo UiRU  ™$  •Z B™& •`Z ™, •[\ ™QH<Q  ,  •[  ` <Zo UeP™QV •Z  U @™Q  •[V `U6™& &•[  ` 2™$y •Uk Zw ™Qa ,J•U  ™Q  ,  •Z 
™$ 2•`Y [ZP™PZ $s •[  ` 6™P  •Zs Ui"™$ @•U  Z >™QB , &~ •[\ `\4™Q  ,  •[ 
` :Zq UcNU  ™QU 
•Z  ™& <•`V [W ™Q P•[  
` :™$y •Zq ™,~ Qe •UgF™,  •U  ™Q  •Z >™$  •`U [WB™Nq 
PV 
•[  ` &™P  •Zs U_ ™N  •U &Z :™,~ QF &} •`R [SH™Q  ,  •[  ` >Zq Ue>U  ™Nm QK •Z 2™&  Q  N  •[V `Ub[  ` 6™Q\ •Zs ™, •Ue ™N{ $uR•U  ™,  
Q  •Z <[Y `R 
™$ $N  PY 
•[  ` ,™P  •Ue Zs^U  Z 6™Oe ‘¬u ђ¬u •`Z ™,~ QL & •[\ +eJ™O  Q  ,  •[  
` 4U_ Zo.™& "$w QV •U 
™Om •Z >[Y `W ™Q (O  $  •[  ` 6Zs Uc ™Qa ,}&Nw ‘¬  ђ¬  ™,  •U  ™Q  •+  Z :`U [W(™N $•[  ™Pe ђ"} ‘"} ™$u •.s ` &™P 
•Ua ZqVU  ™$  •Z B™& •[Z ™QS ,} •`Y@™Q  ,  •[ 
` 4Ug Zu:.  U  ™Qc •Z  ™&  
ђ"  ‘"  ™Q  •[e `a µ[ Z•[  
` 60U ‘$s ™8m ђ$s ’<i ™$y ’0U ™,}Z,  $  
ђ$  ‘$  ’<  •0  ’0  ™8 N‘$e ™$s ђ$e ’0B •$B 0k ’<kf™$ B‘$  ђ$ $•$  ’0  ™,} &} 6&•0  ’< 0™,  6 Ѓ ‘$g ™8o •0\ ђ$g ’<\ •$N ’0N.™& $8 "ђ$  ‘$  •0  ’<  
0  •$ fђ¬k ™$y ‘¬k ™,~ 8o 
•¬S ’+S •+] ’7]D™,  8 0$ Lђ¬  ‘¬  ’+  •¬  +  ’7 Ѓ@‘"y ™&} ,~ 6 ђ"y$’:w •.w "_ ’._,™, .6 n8q,& <8  ’.  •"  ђ"  •.  ‘"  ’: V™8_ $u ,{ І[ON™, 88 &$ 4в =  ; 
9  4  / *) 8" H  ’Oe вb  
™&~ 6} ,y вf
 l 6™, 
6  вf
 d 
 b  
™&  в^  ™8u $w вX  J  ™8  вD  @  <  ™$  в8" 2% $, ™8i ,o в"-,™,  в . ™8  в 0  3  4  6 ™.} $u в 
8  ;  @6™. .$ 8’O  ™6y ,k &~ ’RZJR  ™,  
6 z8u ’Ne8™&  8 Ѓ в 0
™$y 8e , в*) 6# <  
™,  $  в>¬ H  ™8  вL 
’N  вH  8" ™$s в 1 ’Kd в @:™$ 0’K N™,~ &~ 6w ’H@T™,  
6 &’H X™8q
& D8 Ѓ"8c ,~ $y ’KeNв < ™,  8  в ; ™$  в 
8< 6\ 
8 
9  :  <> = 
™&{ 6w ,~ в @Z™,  6 r& 
8mH8  
вID  K iT <^ Ph ju ’K  ™$u 8] ,~ еtz =4™, 
еnw ™8  е @ 
в ™$ D2}Nв = ™2  в @Ѓ ™0w &} 6q ,}p6  ,  0 6& D8w /{ $wP8  / ($ \8y -u ,}j,  
-  8 b$u +Ѓ + $$ J’Cq ™&~ —7S ™6o —Cu ™+{ ‘¬q ™,a ђ¬q •+(™, 0—7  ™6 
—C  ™+  •+  ђ¬  ’C  ‘¬ X™&  ‘"y —F{ •.z ™8w +e —:_ ’Fy ™.~ ђ"yN™8  +  —F  ™.  •.  
—:  
‘"  ђ"  ’F V•0s ™,s ’Hm ‘$m —Hs ™Dy $y ђ$m —<Y\™D  $  , 
•0  —H 
ђ$  —<  ‘$  ’H Z‘$e ђ$e ’He ™$s —Hu ™D} •0l —<Zh™D 
$  —<  H  •0  ‘$  ’H  ђ$ L™, &}z, `&  —Hs ђ$m ™Do ’Hm ‘$m —<Z •0of™D  •0  —H  <  ђ$  ’H  ‘$ `ђ¬k —7] Cq ’Ck ™$y ‘¬k ™, C_ •+oj™C  
,  —C (™$  —7  •+  ђ¬  ‘¬  ’C ‚ ™, &} —Fy ђ"} ™Du —:i ‘"} ’F} •.t™, x&  D Ѓ:•.  —:  ™,~ $u ’F  ‘"  ђ"  —F ^™, <$ D—:o Fy ™Dm ‘"{ ’F{ ђ"{ •.f™D  •.  —:  F ,‘"  ђ"  ’F @™&{ ,~p, 4& L‘"y ’Fy •. ™$w ђ"y —:k ™Do —Fyf™D  —:  •.  —F  ‘"  ђ"  ’F  ™$ \ђ g ™,~ ’Ag •)f ‘ g ™Ca —Ai 5cj™, 0C  —A 45  •)  ™$u 
’A  ‘   ђ  Ѓ ™$ JDs &{ •* ђ } ™, ‘ } —6c B~ ’B}^™, H& ‚ D  —6  
’B  ™, $y —B  •* >™,  $  ђ   ‘  z—Bk ’B{ —6c ™$s ‘ { •*q ™Du ђ {r™$  D  •*  —B  6 &ђ   ‘   ’B *™&} ,{t, Z& "—6_ ’By ђ y —Bq ‘ y •*w ™Dk`D  •* 
—B  ђ   ‘   ’B  —6 R’Fq —Fq :] ‘"q ™$y Cg •. ™,y ђ"qn™, (C  —:  F  ™$  •. Dђ"  ‘"  ’F Ѓv™Cg , ‘"s ™&y —Fs •.~ ’Fs ђ"s —:en™,  C  
•.  
—:  F  ’F  ђ"  ‘"  ™& 0‘'w •3z ’Kw —Kq ђ'w ™Dw —?g~?  ™D  —K 
•3  
‘'  ’K  ђ' B™,y\, Ѓ Dw —?Z KY ™.{ $q •3w"ђ'e ’Ke ‘'e@—?  •3  —K  ™D 
. 0‘'  ђ'  ’K  ™$ 2’Py ђ,y ‘,y —Du ™& —P~ •8 ™,P 2y Ced—D  ™,  —P  ™0m C  2  •8 Fђ,  ’P  ‘,  ™/oB0  & */ |ђ,w —P{ ‘,w ™Co ’Pw ™,s $~ —DZ •8V™,  C  •8  
—P  
D  ’P  ђ,  ‘, 0™$  
—Iq ™.{ /s Dy —U{ •= ™& ‘1q ђ1q ’UqL™.  
-u D  —U  ™/  
—I  •= $‘1  ’U  ђ1 $™&  ,} +Y6- .+  , Ѓ —Iu Uy •=| ™D{ µ]  [  •[  ‘1q ђ1q ’UqX™D $—I  ђ1  ‘1  ’U  —U  •= B˜< ё[  І[  ™& :y $ —H ™, ’T ™) •< µ[  І[  ]  №[  ‘0z ђ0s ±[ d—H  ™, f’T  ђ0  ‘0  •<  ™$  )  &  : ‡x˜< „Hд @ а @ в @ а @  @ е @ я/
Добро пожаловать!

Это я -- Анатолий Владимирович Птушенко

Академик, Гранд доктор философии, профессор

Доктор юридических / экономических наук

Вице-президент Международного Университета
гуманитарных наук

Государство — слуга народа, подсистема Общества.

Требуются принципиально новые основы права и экономики.

Требуется принципиально новая — негосударственная! — система образования и организации науки.

Все, кто получил свои дипломы и аттестаты из рук адептов старого, ныне отвергнутого государства,  подлежат дисквалификации!

 
 

 

 

 

 


----------------------------------------------------------------------------------------------------------------------------

Согласно принципам, предложенным Дмитрием Кирсановым, эта страничка сформирована в так называемом классическом стиле.  Что это значит на деле, хорошо это или плохо, — об этом позже, когда перейдём к собственно веб-дизайну.  А пока продолжим разговор о некоторых других важных чертах веб-мастеринга.

Как дополнение к языку разметки разработан CSS (Cascading Stile Sheets) — язык иерархических стилевых спкцификаций, восполняющий ограниченные возможности HTML в области визуального форматирования.  Однако эта технология по зубам не всякому броузеру.  Благодаря ей дизайнер получает доступ к набору обобщённых параметров оформления (имя шрифта, цвет элемента и фона под ним, ширина окружающих элемент полей).  Эта система существует в нескольких версиях, от чего существенно зависят располагаемые эффекты дизайна.

Новые возможности предлагает язык XML (eXtensible Markup Language) — расширяемый язык разметки.  Этот «HTML будущего» может пользоваться любыми тегами, даже изобретаемыми на ходу автором разрабатываемй веб-страницы.  Для создания гиперссылок в документах XML разработан специальный язык — XLL (eXtensible Linking Language) — «Расширяемый язык ссылок».  Он существенно удобнее и мощнее стандартного механизма HTML: ссылки реализуются не на уровне тегов, а с помощью зарезервированных имён атрибутов.  Это позволяет превратить в ссылку любой элемент документа.  Упрощаются требования к разметке файла, на который направлена ссылка.

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

«На закуску» скажем несколько слов о последнем слове в области веб-мастеринга — Dynamic HTML.  В литературе его называют и так: HTML 4.  Это язык, позволяющий создавать страницы, которые могут перемещаться, содержат анимацию и реагируют на действия пользователя после загрузки в броузер.  Эту технологию поддерживают и майкрософтовский и нетскейповский броузеры, начиная с их четвёртых версий.  Хотя, строго говоря, Microsoft и Netscape имеют различные реализации DHTML.  Из-за этого создание динамичного документа превращается в сложную и весьма утомительную операцию.  К тому же разработка такого документа требует знания не только HTML, но и JavaScript, CSS, DOM.  (Первое — язык написания сценариев; второе — каскадные таблицы стилей;   третье — объектная модель документа).

Однако вовсе не обязательно писать теги вручную.  Ибо существует множество программ, способных сделать это за вас.  В какой-то мере это делает «обыкновенный» Word.  Он может сохранить в виде веб-страницы всё, что вы сумеете непосредственно в нём сформировать.  Пример — ниже.

_________________________________________________________________________

Моя страница

 

Новое евангелие: Системная парадигма права

C:\Documents and Settings\1\Мои документы\поэт.wav

D:\_1ПАРА\ССП

 

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

Редактор гипертекста HotDog Professional обладает множеством инструментов, подпрограмм и сервисных возможностей.  Можно попробовать Coffee Cup Editor или HTML Generator.  На сегодня лучшей в этой области обычно признаётся программа Front Page 2003.  Эти продукты продаются на дисках и подчас их можно скачать из Интернета (как правило, условно-бесплатно).

Выше упоминались протоколы Интернета.  С их помощью страницы отправляются и принимаются в Сети.  Самый популярный на сегодня (хотя и не единственный) протокол, позволяющий двум компьютерам общаться друг с другом в определённом формате, — HTTP (HiperText Transfer Protocol).  Как ясно из его названия, он предназначен для передачи гипертеста.  Не менее важен протокол пересылки файлов FTP (File Transfer Protocol).  Есть протокол для доступа ко всем мировым новостям — UseNet; Telnet — для прямого подключения к другим компьютерам в Интернете; WAIS (Wide Area Information Service) — для доступа к различным базам данных.

Думаю, о мастеринге сказано вполне достаточно.  Те, кто захотят разобраться в нём получше, могут обратиться к названной во введении книге Дженифер Нидерст.  По поводу динамического языка разметки написано много книг; на мой взгляд, одна из лучших — «Dynamic HTML» Алекса Хоумера и Криса Улмена (СПб, Москва, Харьков, Минск, ПИТЕР, 1999).  Небесполезна и книга Черила Кирка «Internet — Книга ответов» (СПб, М, Х, М-к, 1998).

Если бы далее я вознамерился подойти к рассказу о веб-дизайне строго научно, я вынужден был бы начать с описания требований к: пространственным отношениям, форме, цвету, текстуре, шрифтам; я должен был бы изложить сегодняшние взгляды на единство, баланс, контраст, динамику и нюансировку изображений (точнее, текстово-графических систем).  Понятно, что изложить всё это понятно можно было бы лишь на сотне страниц.  К тому же многие представления уже известны любому культурному человеку: золотое сечение, пропорции, оптические иллюзии, теория цвета и пр.  Поэтому придётся ограничиться лишь наиболее важными (на мой, конечно, взгляд) и интересными моментами.  Думаю, полезно ещё раз обратиться к нашей любимой аналогии с балетом.  В нём, как известно, кроме балерины (и танцовщика, разумеется), участвуют и такие субъекты как хореограф и балетмейстер.  Вполне отдавая себе отчёт, что с моей нижеизложенной позицией могут не согласиться многие профессионалы от балета, всё же рискну предложить её читателю.  В отличие от многих сусально-расплывчатых энциклопедно-словарных определений, она хороша уже одним существенным отличием — полной логической последовательностью и определённостью.  Итак, в моей интерпретации, хореограф создаёт структуру балета, реализует на бумаге (как это делается, для нас пока-что несущественно) запись последовательности мизансцен, перемещений танцовщиков, их позы и движения, призванные выразить замысел композитора и либреттиста.  При этом хореограф может и вовсе не общаться с танцовщиками.  Балетмейстер же именно этим и занимается: проводит тренаж, совершенствует индивидуальное мастерство каждого исполнителя, ставит конкретный балет, расписывая (нередко и с участем собственных ног) каждое предусмотренное хореографом движение танцовщика.  Понятно, что на практике нередко функции хореографа и балетмейстера синкретично совмещаются в одном лице — для нас это дела не меняет.

И всё это написано ради одного: объявить, что последующее изложение взглядов на веб-дизайн сайта будет вестись в основном с позиции хореографа, а не балетмейстера.

Начнём с компоновки вашего сайта.  Её можно сделать линейной: с первой страницы ссылка ведёт на вторую, со второй — на третью и т.д.  Как в обычной книге.  Можно добавить к этому на каждой странице возврат к первой (главной) странице сайта.  Можно ограничиться возвратом только с последней страницы.  Можно придумать хитроумные древовидные разветвления со страницами разных уровней.  Тут вам будет судьёй собственная интуиция (и конечно же — каждый посетитель вашего сайта). Видимо, надо стараться не только удивить визитёра, но и «сделать ему удобно».  Некоторые общие соображения на сей счёт приведены на рис.2.

 

Рис. 2.  Примеры компоновки сайта

              А — главная страница рационально скомпонованного сайта

              В — сайт с нерациональной структурой

              С — «скрытая» страница

              2, 3, 4 — уровни вложения страниц

 

Пользователь, вышедший на станицу А, вряд ли запутается.  Чего никак не скажешь о посетителе сайта В.  На С он может и вовсе не попасть.

Не вызывает сомнений и то, что сбор всей «информации» на единственной странице — тоже не лучшее решение.  Не следует перенасыщать страницу рисунками: иначе время её загрузки приблизится к бесконечности.  По правилам хорошего тона, в начале документа должен располагаться набор местных ссылок для быстрого перехода к отдельным разделам документа или к входящим в него вложениям (примерно как это сделано на вышеприведённой учебной странице).  Кстати, старые версии Word изначально предлагают вам именно такую структуру вашей главной страницы (но уже Word 2002 оставляет этот вопрос на ваше собственное усмотрение).  По моему опыту, лучше всего иметь главную (или следующую за ней «специальную» диспетчерскую) страницу, на которой размещены вообще все ссылки — как внутренние, так и внешние; а на каждой странице сайта установлена ссылка для возврата на диспетчерскую страницу.  По крайней мере, так устроен мой собственный сайт http://agynch.narod.ru .

Неплохо учесть и то обстоятельство, что избыток ссылок на чужие сайты — «лучший» способ сразу же увести вашего визитёра на те самые чужие сайты. 

Полезно установить на вашей странице счётчик посетителей.  Можно (в качестве отдельной страницы) соорудить собственную книгу посетителей — с предоставлением им возможности непосредственно в ней высказать свои впечатления о вашем сайте. 

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

Следует подумать и о формате страницы.  Будете помещать на ней графику — постарайтесь размеры изображения определить не в дюймах или сантиметрах, а в пикселах (pixel от англ. picture element — элемент изображения; попросту говоря, одна из мельчайших цветных точек, составляющих картинку на экране компьютера).  Избегайте страниц, требующих на экране прокрутки; особенно — горизонтальной.  При этом помните о разных броузерах и о том, что не у всякого пользователя монитор с девятнадцатидюймовым экраном.  У самого старого монитора размер экрана — 640 на 480 пикселов; у дорогой рабочей станции — 1600 на 1200 пикселов.  Иначе говоря, ширина страницы не должна превышать 600 пикселов.  Однако и вертикальная прокрутка мало кого обрадует — основное содержание страницы должно быть видно сразу после её загрузки.  Принято считать допустимой высоту страницы в 350 пикселов.  Честно говоря, и при таких размерах страницы мы оставляем за бортом владельцев устройств WebTV — для них доступно окно только в 544 на 376 пикселов (причём прокрутка у них вообще не предусмотрена).  Конечно, в России этих устройств пока-что практически нет.  А иностранцы — небедные (сравнительно с нами) и могли бы позаботиться о своём достойном компьютерном оснащении. 

Хотя вообще-то говоря, горизонтальную прокрутку можно применить со специальной целью — заставить зрителя неодолимо возжелать увидеть, а «что там за поворотом?».  Такой сайт можно назвать «горизонтальным» и представить его как образец перехода рутинной (почти подсознательной) операции в инструмент «художественности» и волнующее открытие.

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

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

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

Первое.  Лучше, если все страницы вашего сайта оформлены в одном стиле.  (Какими они бывают, скажем чуть позже).  ВтороеКраткость — сестра таланта» вспоминать всегда полезно.  Третье: не переукрашивайте свою страницу.  Четвёртое: страница должна быть живой; проще говоря, полезно её почаще обновлять.  Пятое: опасайтесь «ползучего наворотизма» — не перегружайте страницу плохо совместимыми новомодными трюками (аудио-, видеоклипами и прочими «примочками»). 

Теперь о некоторых конкретных составляющих сайта.  Текст, цвет, графика.

Текст это прежде всего шрифт.  Естественно, бывает шрифт английский (вообще-то и тысячи всяких иных, вплоть до иероглифических) и русский.  Причём во всех программах английских шрифтов много больше — не всякий из них имеет русский аналог.  Тот же любимый всеми Word обеспечит лишь несколько гарнитур русского шрифта.  Гарнитурой традиционно называют комплект шрифтов одного рисунка, но разных размеров и начертаний.  Внутри одной гарнитуры шрифты различаются по кеглю — высоте букв (включая просветы над и под ними).  Кегль измеряется в пунктах и обозначается числами (не «цифрами», как, к сожалению, принято сегодня скверно выражаться на Руси).  Например, читаемый вами текст написан 12-ым кеглем  гарнитуры Academy.  (Шутка: а на каком же ещё языке прилично изъяснятся трижды академику?).  Для научной строгости (но и для интереса тоже) добавим: в полиграфии за каждым кеглем закрепилось французское название: 12 – цицеро (от Цицерона, естественно); 10 – корпус; 9 – боргес; 8 – петит; 7 – нонпарель.  Большие кегли тоже имеют собственные названия, но о них — в другой раз.  Один пункт равен 0,376 мм.

Посмотрим, как это выглядит реально (в порядке, принятом выше):  шрифт, шрифт, шрифт, шрифт    

Семёрки – нонпареля в Ворде 2002 просто нет.  Зато есть кегль 11; и все б’ольшие цицеро кегли — вплоть до 72-го (с шагом в два пункта); для наглядности крайний кегль: шрифт

шрифтПожалуй, он великоват даже для заголовков.  Лучше 28-й: шрифт

Вообще-то язык разметки имеет собственные средства масштабирования шрифтов.  Они показаны выше (взгляните на экранный вид шаблона документа).

Посмотрим располагаемы вордовские русские гарнитуры: шрифт (Book Antiqua),   шрифт (Verdana),  шрифт (Arial Narrou),  шрифт (Tahoma),  шрифт (Adver Gothic),  шрифт (Times New Roman),  шрифт (Odessa Script Cyr).   Обратите внимание: все эти гарнитуры — одного двенадцатого кегля.  (Что и небходимо учитывать при выборе шрифта для своей страницы).  Как видно из примеров, шрифты бывают рубленые и с засечками.  Ворд предлагает и некоторые фигурные шрифты (см. выше).  Большими возможностями по части обилия шрифтовых гарнитур обладает специальная мощная «рисовальная» программа Corel Draw (на сегодня уже в 11-ой версии).  Есть на свете небольшая, но очень накрученная программа Cool3D, она способна варьировать даже текстуру поверхности (металл, дерево, пробка и т.п.) и освещение фигурного шрифта.  Многие профессиональные дизайнеры рассматривают шрифт как одно из важных средств художественной выразительности.  Особенно — сочетание разных гарнитур (иногда и в одном слове — как это было, например, в названии журнала «Интернет», ныне почившего в Бозе).  Для статических текстовых документов популярен особый формат — PDF (Portable Document Format).  Он особенно удобен для выкладывания в Интернете рекламных брошюр, журнальных статей, проспектов. 

О цвете можно сказать не меньше, чем о тексте.  Тем более, что и текст может быть цветным.

Для начала позволим себе некоторое отвлечение.  Всегда будьте готовы к тому, что на листе бумаги (после распечатки страницы) вы можете увидеть совсем не то цветовое великолепие, что на экране монитора.  Ибо на бумаге вместо слияния цветов происходит смешение красок.  Первое — чисто физический процесс; второе — ещё и химический.  Живописцы прекрасно знают, что некоторые краски в смеси вместо положенного колера дают бурую грязь.  К тому же на экране и в принтере используются разные цветовые модели.  В компьютере цвет задаётся в модели RGB, а принтер использует полиграфический стандарт CMYK.  Цветовая модель RGB — естественный «язык» цвета сканеров, мониторов, компьютеров и телевизоров (а также и других электронных устройств).  В аддитивной (получаемой путём сложения) модели RGB (red, green, blue) комбинации красного, зелёного, синего дают все доступные цвета, складывая световые потоки.  Сумма красного, зелёного, синего максимальной эффективности даёт белый цвет.  Комбинации двух цветов дают дополнительные цвета — голубой, пурпурный и жёлтый.

В субтрактивной (англ. subtractive, от лат. subtraho — извлекаю) модели CMY для получения цветов печати комбинируются голубой (cyan), пурпурный (magenta) и жёлтый (yellow).  Теоретически сумма цветов CMY максимальной интенсивности должна давать чистый чёрный цвет.  Но на деле получается грязно-коричневый (из-за несовершенства красящих пигментов).  Принтеры используют чёрный цвет как четвёртый ключевой (К) цвет, чтобы углубить цветовую гамму CMY.

Конечно, добавление четвёртого цвета усложняет проблему соответствия принтерного изображения экранному.  Далее я в эту проблематику углубляться не буду ввиду её сложности.  Желающие углубиться в неё «с головой», могут это сделать, почитав, например, отличную книгу Сибил  и  Эмиля Айриг «Сканирование. Профессиональный подход» (ПОПУРРИ, Минск, 1997).

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

У дизайнеров принято считать, что красный цвет наболее эмоциональный и активный.  Он оживляет интерьер, создаёт атмосферу теплоты.  Однако от дизайнера этот цвет требует смелости и уверенности в себе.  Дополнительный цвет к красному — зелёный.  (Но никак не синий!  Хотя нынешние дизайнеры весьма падки на этот явный кич).  Взгляд на красный цвет у разных народов неодинаков.  Китайцы его всегда любили, считали символом долголетия и шили из красной ткани свадебные платья. Древние римляне считали его символом мощи и власти.  В сегодняшнем обиходе он — знак опасности.  Красный цвет присутствет на флагах многих государств.

Синий цвет во многих культурах считается символом красоты и вечности.  Недаром он всегда ассоциируется с небом и морем.  Дополнительный к нему — оранжевый.  С психолгической точки зрения, синий — покой и умиротворение.  Он в самом деле замедляет биологические процессы, вследствие чего наиболее пригоден для медитации.  Если верить Бернарду Шоу, древние бритты считали синие одежды верхом респектабельности.

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

Зелёный уникален в своей двуликости: рядом с жёлтым он выглядит тёплым, рядом с синим — холодным.  В некоторых сочетаниях он выглядит вполне нейтральным.  Его ассоциации — природа, весна, молодость.  Число его оттенков велико.  И ассоциаций тоже: если светлый жёлто-зелёный — чудо весны, то тёмно-зелёный — уверенная и устойчивая элегантность.  Дополнительные цвета — сиреневый и пурпурный.

Фиолетовый — цвет эмоциональных контрастов.  Его светлые оттенки напоминают нечто хрупкое и романтическое, как говорили в прошлом веке, женственное.  Тёмно-фиолетовые оттенки вызывают представление о мощи, трагичности и демонизме.  Он был весьма популярен и у дизайнеров, и у портных в конце позапрошлого века.  Дополнительный цвет — жёлтый. 

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

И всё же восприятие цвета довольно субъективно.  Многое зависит от того, какую площадь он занимает.  И даже от того, какую форму эта площадь имеет.  А также от того, какие другие цвета его окружают.  При уменьшении площади количество различимых оттенков уменьшается, большинство цветов начинают выглядеть более тусклыми.  Значит, для небольших участков надо выбирать более насыщенные тона.  А чтобы показать всю красоту какого-нибудь слабонасыщенного оттенка, необходима достаточная площадь (фон всей страницы, к примеру).  При всём при том, цвета, близкие к чёрному и к белому, на любой площади выглядят малопривлекательно — в основном, как неаккуратность мастера.

Сочетаемость цветов — область, в которой любой человек воображает себя профессионалом: редко кто не подбирал галстук в тон рубашке или перчатки под цвет жакета.  Конечно, с интуицией здесь не поспоришь.  Хотя и имеются некоторые общие принципы.  Например, единства и контраста.

Первый принцип требует, чтобы используемые цвета были как можно ближе друг к другу.  Опытные дизайнеры поэтому ограничивают каждую отдельную композицию четырьмя цветами.  Контраст между соседними цветами может определяться их различиями в тоне, насыщенности и яркости.  Тон — один из цветов солнечного спектра (радуги); насыщенность — соотношение основного тона и равного ему по яркости серого (бесцветного); яркость: наибольшая превращает цвет в белый, наименьшая — в чёрный. 

Теория эта может оказать вам сущетвенную помощь, но она никогда не заменит вам вашего личного опыта, полученного в эксперименте. 

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

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

Рассуждения о текстурах мы опустим и сразу перейдём к изображениям.

Они бывают векторные и растровые.  Векторное изображение состоит из геометрических объектов — прямых, дуг окружности, кривых.  В том числе, Безье.  Пьер Безье придумал их в 60-е годы прошлого века.  Сегодня они главный инструмент построения криволинейных форм во всех без исключения программах компьютерной графики.  На мой взгляд, лучшая из таких программ — Corel Draw 11.  Рекомендую её всем будущим и уже частично состоявшимся веб-дизайнерам.  Векторное изображение имеет ряд достоиств.  Оно сохраняет независимость обьектов и полную обратимость всех ваших действий — можете «тереть» такое изображение неограниченно, не опасаясь при этом сделать в нём «дырку».  По сравнению с растровым изображением, векторное много «легче» — в смысле килобайт.  В «растре» счёт обычно идёт на мегабайты.  Понятно, что файл в 5Мгб ни в дискету не засунуть, ни по почте не передать.  Да и на вашу страницу в Интернете даром столько не положишь. 

Растровое представление графики основано на разбиении изображения на пикселы (выше о них уже сказано).  Благодаря особенностям человеческого зрения систему этих цветных квадратиков мы воспринимаем как цельный объект.  Собственно, на том же эффекте основаны газетные печатные изображения (откуда и пришло само слово «растр» — решётка).  Живописное произведение (состоящее из отдельных мазков) даёт цельное изображение — на определённом достаточном расстоянии от картины — по тому же принципу.  Растр лучше тем, что даёт многие эффекты, недоступные векторной технологии. В растровом формате отображается обычная фотография.  Технологическая цепочка создания графики для веб-страниц включает три операции: разработка графических элементов в векторном редакторе, экспорт их в полноценный растровый формат, оптимизация полученного изображения с одновремённым переводом его в формат с ограниченной цветностью (GIF) или в формат сжатия с потерями (JPEG).  Понятно, что последнее предпринимается для уменьшения размеров файла графики.  Иногда между вторым и третьим этапами включаются операции по созданию растровых спецэффектов: тени, размывки, маски и линзы. 

Вставляя подготовленное изображение в HTML-документ, нужно снабдить его альтернативным текстом и явным указанием его ширирны и высоты (атрибутами width и heigt).  Вместо того чтобы лично преодолевать своё неумение сносно рисовать, можно прибегнуть on line к услугам специализированных фирм, которые (совершенно бесплатно!) предложат вам набор немудрёных векторных картинок. Например, на ваш запрос Love (любовь) вы получите нечто подобное:

Вот набор адресов таких фирм: www.ist/net/clipart/index.htm; www.geocities.com/CapeCanaveral/3348; (Кстати, на мысе Канаверал во Флориде расположен один из главных космодромов США); www.clipart.com; www.fxmm.co.uk; ausmall.com.au/freegraf/index.htm ; trureality.com/anime.htm;   ourworld.compuserve.com/ourvorld/tools/education/wmpruce.html.

Если у вас есть сканер, вы можете отправить на свою страницу копию любой фотографии.  Однако при этом приходится учитывать, что цветная фотография среднего размера будет «весить» несколько мегабайт, и для приведения её в транспортабельное состояние вам придется пересохранить её в одном из вышеназванных графических стандартов (GIF, JPEG). 

Хотя Web-дизайн ещё не мог бы отметить даже первое своё десятилетие, в нём уже сложились свои традиции.  В том числе отчётливо различимые стили.  Отчасти это наследие других видов дизайна (более всего — книжно-журнального и рекламного), отчасти — издревле установленных норм живописи и графики.  Сложился здесь и свой собственный принцип — единства, целостности и экономии средств.  Особенно он важен именно для начинающих дизайнеров: «если можешь не писать — не пиши».  Естественно, тут не помогут никакие инструкции.  Только то, что дано тебе «от Бога», и нажитый на собственных ошибках личный опыт.  Если в веб-мастеринге всё оценивается точно и однозначно: «правильно – неправильно», то в дизайне оценки довольно растяжимы.  Что-то явно лучше другого, а что-то — кому как.  Мне, например, на 99 процентов претят все «изыски» рекламных дизайнеров.  Которыми, тем не менее, так любят восхищаться обозреватели радиостанции «Эхо Москвы».  Не всегда вдохновляют и находки профессиональных веб-дизайнеров.  В общем правы англичане, утверждающие: Content is king.  Отсюда и оправданная тяга к академическому стилю.  Во вяком случае, он более всего приличен для начинающего дизайнера (уровня вашего покорногослуги). 

Академический стиль — подход при котором оформление документа полностью определяется его структурой.  Как это ни смешно, но именно он более всего соответствует непритязательному HTML: ведь последний предназначен именно для логической, а не визуальной разметки структуры документа.  При этом внешний вид документа в броузере — лишь побочный эффект логической разметки.  Как уже сказано ранее, для всяческих наворотов предназначен DHTML.  Заметим, что академический стиль характерен для научных и образовательных сайтов. 

Все остальные стили трудно определимы.  Условно я бы подазделил их прежде всего по уровню статичности.  Конечно, кнопки, флажки, и фреймы с прокруткой — ещё не атрибут динамизма.  Его наличие можно заметить, когда по сайту ползёт какая-нибудь «бегущая срока», сопровождаемая к тому же аккордом из Баха (другой уровень — из репа).  Dynamic HTML поддерживает шесть новых свойств стилей.  Свойство left (x-координата) используется для задания в пикселах расстояния от левого края окна, на котором должен находиться элемент.  Свойство top (y-координата) задаёт расстояние от верхнего края окна.  Свойство z-index добавляет новое измерение на страницу; оно позволяет указать порядок, в котором элементы будут перекрывать друг друга.  Свойство position задаёт, откуда эти координаты должны отсчитываться.  Свойство overflow определяет, что случится, если ширина или высота элемента внутри фрагмента выйдут за его пределы.  При этом возможны три случая: указание none означает, что часть текста, для которой не хватает места в своей полосе, вылезет за её пределы; clip — выступающие части элемента будут обрезаны; scroll — будет установлен механизм прокрутки.  Последнее свойство стиля в DHTML — visibility.  Оно определяет, будет ли элемент виден на странице.  Оно становится нужным (в простом языке было бы достаточно такой элемент просто изъять из документа), когда добавлен код сценария.  Это последнее — способ научить ваши страницы реагировать на события и и «общаться» с пользователем. 

Думаю, на этом можно и остановиться.

Ниже показаны два стилистических решения для первой страницы сайта.  Одно результат работы высококлассного профессионального дизайнера, второе — итог потуг дилетанта в рамках условий, в значительной мере заданных провайдером.  Где что — вы легко догадаетесь сами.

 

 

Студия Артемия Лебедева

 

Новости

Инвентарь

Портфолио

Отделы

Компания

Ководство

 

Samsung Electronics и Студия Артемия Лебедева проводят конкурс среди иллюстраторов и дизайнеров

Крайний срок подачи работ — 5 марта 2004 года

 

Из последних работ

Пылесос «Циклон 7Л»

Логотип и фирменный стиль компании «Ростсельмаш»

Третья версия сайта МТС


Новости

Открыт промо-сайт Samsung «Бесшумная революция цвета». 24 февраля 2004 года

Открыта пятая версия «Яндекс-Новостей». 24 февраля 2004 года

Создан промышленный дизайн пылесоса «Циклон 7Л». 18 февраля 2004 года

 

С 24 февраля Студия Лебедева перешла на новый единый номер телефона — 540-18-00 (многоканальный). Старые номера будут действовать в течение месяца в режиме рассказа о новом номере. Обновите записные книжки!

 

«Ководство» Лебедева

§ 102. О создании бланков организационно-распорядительной документации

§ 101. Перспектива и вертикальные линии

§ 100. Без слов

§ 99. Законы дизайна

§ 98. Здравствуйте, с вами говорит робот

§ 97. Тире, минус и дефис, или Черты русской типографики

Коллекция плакатов
Штрих-коды всюду, буквально всюду

Творческие вакансии
Приглашаем супердизайнера сайтов-5 и дизайнера-полиграфиста

Еще более творческие вакансии
Приглашаем редактора и менеджера по работе с клиентами

Рутина 26.02.2004

 


Copyright © 1995—2004
Студия Артемия Лебедева

Счетчик посетителей: 10083716

 

 

 

 

 



Это - персональный сайт "Прогрессор"

Информациология, системоанализ и интеллектуальное право спасут Мир!

Моя главная рабочая страница

Мой фотоальбом

Гостевая книга

informationlogy

 

 

 

 

Finita la Commedia!

 

Птушенко Анатолий Владимирович

Трижды доктор (права, экономики, философии)

Профессор

Трижды академик (космонавтики, информатизации, правопорядка)