Алексей Петюшкин 55ГУ PC. Санкт-Петербург

1 АЛЕКСЕЙ ПЕТЮШКИН Характеристика современных браузеров Форматирование текста и работа со шрифтами Работа с графикой Использование аудио- и видеофрагментов ^ Применение визуальных динамических фильтров

2 Алексей Петюшкин 55ГУ PC Санкт-Петербург «БХВ-Петербург» 2003

3 УДК ББК П29 П29 Петюшкин А. В. HTML. Экспресс-курс. СПб.: БХВ-Петербург, с.: ил. ISBN Книга представляет собой руководство по изучению основных правил языка гипертекстовой разметки HTML, необходимого практически каждому пользователю Всемирной сети, уже имеющему собственную Web-страницу в Интернете или только еще желающему ее создать. Дано общее представление о языке HTML, об интерактивных технологиях, реализующих электронные документы с динамически изменяющимся содержанием, раскрыта структура и описаны конструктивные элементы языка теги и их параметры, приведены примеры различных способов форматирования текста электронных документов и соответствующие иллюстрации. Уделено внимание правилам использования графики и звука при создании Web-страниц, изложены принципы формирования карт-изображений, фреймов и пользовательских форм. Для широкого круга пользователей Интернета Группа подготовки издания: УДК ББК Главный редактор Зам. главного редактора Зав. редакцией Редактор Компьютерная верстка Корректор Дизайн обложки Зав. производством Екатерина Кондукова Евгений Рыбаков Григорий Добин Римма Смоляк Натальи Караваевой Виктория Пиотровская Игоря Цырульникова Николай Тверских Лицензия ИД от Подписано в печать Формат 70x100'/ в. Печать офсетная. Усл. печ. л. 20,64. Тираж 5000 экз. Заказ 863 "БХВ-Петербург", , Санкт-Петербург, Измайловский пр., 29. Гигиеническое заключение на продукцию, товар Д от г. выдано Департаментом ГСЭН Минздрава России. Отпечатано с готовых диапозитивов в Академической типографии "Наука" РАН , Санкт-Петербург, 9 линия, 12. ISBN о Петюшкин А. в., 2003 О Оформление, издательство "БХВ-Петсрбург", 2003

4 Содержание Предисловие 1 Содержание книги 1 Об авторе 2 ЧАСТЬ I. HTML - ПЕРВЫЕ ШАГИ 5 Глава 1. Ваш первый HTML-документ 7 Что такое HTML 7 Спецификация HTML 8 Какой браузер выбрать 8 Internet Explorer 9 Netscape 10 Opera И Структура HTML-документа 12 Раздел HTML 13 Раздел HEAD 13 Название документа <TITLE> 13 Связь между документами <LINK> 14 Мета-определения <МЕТА> 14 Элементы <STYLE> и <SCRIPT> 18 Раздел BODY 18 Параметры фона 19 Параметры границ документа 20 Параметры текста 20 Параметры гиперссылок 20 Первый HTML-документ 21 Глава 2. Работаем с текстом 22 Форматирование текста 22 Теги логического форматирования 22 Теги физического форматирования 27 Структурное форматирование 32 Абзац 33

5 _Л/ Содержание Текстовый блок 37 Центрирование 38 Отступы и перенос строки 39 Горизонтальный разделитель 42 Предварительно отформатированный текст 44 Комментарии 44 Специальные символы 45 Символы, отображающие элементы HTML-форматирования 46 Символы оформления документа 46 Буквы иностранных алфавитов 48 Создание гиперссылок 50 Структура гиперссылок 50 Правила описания гиперссылок 54 Внешние ссылки 54 Внутренние ссылки 57 Глава 3. Структуризация информации 61 Зачем нужны HTML-списки? 61 Нумерованные списки 62 Параметры тега <OL> 65 Маркированные списки 69 Параметры тега <UL> 70 Графические маркеры 72 Вложенные списки 74 Списки определений 75 Другие списки 77 Глава 4. Таблица основа вашего HTML-документа 79 Табличное представление данных 79 Создание простейших таблиц 79 Правила описания таблиц 81 Параметры тега <TABLE> 81 Параметр BORDER 81 Параметр BORDERCOLOR 82 Параметр CELLSPACING 82 Параметр CELLPADDING 82 Параметр ALIGN 83 Параметры WIDTH и HEIGHT. 86 Параметры тегов <TR>, <TD> и <77/> 87 Параметры ALIGN и VALIGN 87 Параметры BGCOLOR и BACKGROUND 89 Параметры WIDTH и HEIGHT 90 Параметр NOWRAP 90

6 Содержание V Параметры COLSPAN и ROWSPAN 90 Нестандартное представление таблиц 93 Пустые ячейки 93 Группировка данных 97 Колонтитулы таблицы 99 Прорисовка структуры таблицы 99 Вложенные таблицы 102 Преимущества вложенных таблиц 102 Пример вложенных таблиц 103 Глава 5. Добавляем графику 108 Роль графики 108 Характеристика графических стандартов 109 GIF (Graphics Interchange Format) 109 JPEG (Joint Photographic Experts Group) 110 PNG (Portable Network Graphics) 110 Вставка графики в HTML-документ 111 Описание графики в HTML-документе 111 Параметры тега <1MG> 111 Карты-изображения 120 Преимущества и недостатки карт-изображений 120 Область применения 121 Конфигурация карт-изображений 121 Типы карт-изображений 122 Краткий обзор программ по работе с графикой 125 Графические редакторы 125 Adobe Photoshop CorelDRAW Graphics Suite Ulead PhotoImpact JASC PaintShop Pro Аниматоры 127 Ulead GIF Animator CoffeeCup GIF Animator Просмотрщики графических файлов 127 ACDSee XnView Программы по созданию карт-изображений 128 Sausage Image Mapper CoffeeCup Image Mapper 128 Глава 6. HTML-документы на основе фреймов 129 Понятие фрейма 129 Области применения фреймов 130

7 VI Содержание Панель навигации 130 Одновременное отображение информации 131 Постоянное визуальное присутствие объекта 132 Web-интерфейс для онлайн-игр 132 Преимущества и недостатки фреймов 132 Правила описания фреймов 133 Тег <FRAMESET> 133 Тег <FRAME> 136 Параметр SRC 136 Параметр NAME 136 Параметр SCROLLING 136 Параметр NORESIZE 136 Параметры MARGINWIDTH и MARG1NHEIGHT. 137 Тег <NOFRAMES> 137 Дополнительные параметры фреймовых структур 137 Взаимодействие между фреймами 139 Плавающие фреймы 142 Глава 7. Звук на вашей странице 144 Звуковые форматы 144 Встраивание звуковых файлов в HTML-документ 145 Создание гиперссылки на музыкальный файл 145 Применение тега <EMBED> 145 RealAudio 147 Фоновый звук 151 ЧАСТЬ II. СОЗДАНИЕ ИНТЕРАКТИВНЫХ HTML-ДОКУМЕНТОВ 153 Глава 8. Работа с пользовательскими формами 155 Что такое пользовательские формы 155 Организация обратной связи 156 Авторизация 159 Проведение исследований 160 Пользовательский профиль 160 Структура пользовательских форм 161 Параметр ACTION 161 Параметр METHOD 162 Параметр NAME 163 Параметр ENCTYPE 163 Тег <INPUT> 164 Параметр TYPE 164 Дополнительные параметры тега <INPUT> 173

8 Содержание VII Тег <TEXTAREA> 173 Тег <SELECT> 175 Глава 9. CSS и Dynamic HTML просто и привлекательно! 182 Каскадные таблицы стилей 182 Уровни CSS 183 Способы определения таблиц стилей 184 Запись шаблона CSS 187 Группировка и наследование 187 Селекторы 188 Псевдоклассы 189 Применение таблиц стилей CSS 190 CSS в форматировании текста 190 Структурное форматирование 193 Пользовательские формы в CSS 196 Позиционирование объектов 202 Абсолютное позиционирование 202 Относительное позиционирование 203 Dynamic HTML 203 Создание визуальных эффектов 203 Динамические блоки 204 Визуальные фильтры 209 Заключение 219 Приложение 1. Перечень специальных символов HTML 221 Приложение 2. Обозначения цветов в HTML 229 Приложение 3. Полезные ссылки 235

10 Предисловие Содержание книги Книга "HTML. Экспресс-курс" посвящена описанию и разъяснению основ языка гипертекстовой разметки HTML, который в настоящее время является основой разработки электронных документов для Интернета. Вследствие постоянного развития HTML-технологии, возникновения новых свойств и параметров, а также появления новых версий популярных браузеров, возможности HTML приобретают все большее значение в ходе создания Web-сайтов различной сложности и тематики. Знание основ языка HTML становится обязательным и неотъемлемым атрибутом многих специалистов в области интернет-технологий, превращается в систему знаний, необходимых практически каждому пользователю Всемирной сети. Предлагаемая книга ориентирована на широкий круг читателей, желающих научиться создавать привлекательные Web-сайты с помощью языка гипертекстовой разметки HTML, а также интерактивных технологий Dynamic HTML и CSS. Материал, представленный в книге, изложен простым, понятным языком, содержит множество пояснительных иллюстраций и практических примеров с пошаговыми инструкциями и раскрывает все стороны создания электронных HTML-документов -- от форматирования текста и стилевых шаблонов CSS до применения карт-изображений и пользовательских форм. Прочитав эту книгу, вы сможете в кратчайшие сроки овладеть популярным языком разметки HTML и создавать на его основе собственные Web-сайты и интерактивные документы различной сложности и тематической направленности. Книга разделена на две части. "Часть I. HTML: первые шаги" раскрывает сущность языка разметки HTML и описывает следующие темы: П применение браузеров; О структура HTML-документа; П форматирование текста и работа со шрифтами; П структурное форматирование и блоки информационных данных; П нумерованные и маркированные списки, списки определений;

11 Предисловие О создание простых и вложенных таблиц, оптимизация табличных данных, использование таблицы в качестве структурной основы HTML-документа; П графические форматы и типы файлов, используемые в Интернете; О внедрение графики в Web-страницу; G использование карт-изображений (Imagemap); П разработка фреймов; П внедрение звука в Web-страницу, обзор основных аудиоформатов, используемых в Интернете. "Часть II. Создание интерактивных HTML-документов" знакомит читателя с основами разработки интерактивных электронных документов и освещает следующие темы: П разработка пользовательских форм; П основы применения каскадных таблиц стилей CSS; П использование Dynamic HTML; П позиционирование и визуальные динамические фильтры. Книга "HTML. Экспресс-курс" -- это путь к быстрому и эффективному освоению навыков создания Web-документов с помощью языка HTML без утомительного изучения сотен страниц с техническими характеристиками и бесконечными листингами непонятного кода. В ней содержится только самая нужная и полезная для начинающего пользователя информация, способная помочь ему в дальнейшем закрепить полученные в ходе прочтения этой книги знания на практике. Об авторе Петюшкин Алексей Валерьевич закончил Санкт-Петербургский гуманитарный университет профсоюзов по специальности "Рекламное дело". Работает в интернет-индустрии свыше 7 лет, является автором более 100 аналитических и научных статей, посвященных вопросам информационных технологий, психологии рекламы, электронной коммерции, интернет-маркетинга, пользовательских интерфейсов и пр. Статьи автора опубликованы во многих известных оффлайновых и сетевых изданиях, а также на серверах, посвященных интернет-технологиям. Среди них такие, как "CHIP-Россия", "ComputerPrice", "Мир Интернет", "Компьютерная Россия", "Магия ПК", "Новое Знание", "Маркетер", "Banner Index", "Raskmtka.Net", "emanual", "Компьютерная газета", "Санкт-Петербургские ведомости" и др. Автор является сертифицированным специалистом по дисциплинам "Нейролингвистическое программирование (НЛП)", "Интернет-маркетинг", "Язык разметки HTML".

12 Предисловие Принимал участие и проводил консультации по разработке и продвижению в более тридцати интернет-проектов и электронных презентаций, в числе которых такие, как "Getlnfo.Ru", "URSA-Россия", "MS-Soft", "TravellingRussia", "ТехноподиуМ", "Guides of St.-Petersburg", "Griffin Securities", "Система документооборота Комитета экономики и инвестиций Правительства Ленинградской области", "Информационно-справочная система TopPlan", "Интранет-система Ford Motor Russia" и пр. В апреле 2002 года издательство "БХВ-Петербург" выпустило книгу автора "Основы баннерной рекламы". Книга была рекомендована профессорскопреподавательским составом кафедры экономики и управления Санкт- Петербургского института международных экономических отношений (ИМЭО) в качестве учебного пособия по дисциплине "Менеджер по маркетингу в Интернете". Свои комментарии, замечания, а также предложения по книге "HTML Экспресс-курс" можно оставить на авторском сайте по адресу

14 Часть I HTML первые шаги Глава 1. Ваш первый HTML-документ Глава 2. Работаем с текстом Глава 3. Структуризация информации Глава 4. Таблица основа вашего HTML-документа Глава 5. Добавляем графику Глава 6. HTML-документы на основе фреймов Глава 7. Звук на вашей странице

16 Глава 1 Ваш первый HTML-доку мент Что такое HTML Всемирная паутина (World Wide Web WWW) состоит из множества связанных между собой электронных документов, представляющих кладезь информационных данных, описанных с помощью специальных технологических правил. Эти правила составляются на языке гипертекстовой разметки HTML (HyperText Markup Language). Можно с уверенностью сказать, что сегодня язык разметки HTML является основой всех размещенных в Интернете электронных документов. Он выступает в роли некоего фундамента, на базе которого реализуются прочие сетевые программные технологии, призванные в конечном итоге повысить общую привлекательность, эффективность и интерактивность носителей информационных данных в Сети. Так же как обычный фундамент строящегося дома представляет собой несущую конструкцию, на которой впоследствии возводятся стены, HTML служит простейшим и по большому счету незаменимым средством создания гипертекстовых документов, которое в совокупности с более гибкими и функциональными интернеттехнологиями позволяет получать воистину фантастические результаты. HTML постоянно набирает популярность, причем не только в сфере интернет-технологий, но и в области предоставления презентационных услуг, рекламно-выставочной деятельности, внедряется в состав программного обеспечения и пр. Корпоративные клиенты все чаще разрабатывают CDпрезентации и демонстрационные ролики, заказывают электронные визитки и рекламные обращения. Частный пользователь все больше склоняется к мысли о составлении интерактивных портфолио и резюме, позволяющих, в отличие от листа бумаги, ярче и привлекательнее преподнести свои знания и умения потенциальному работодателю. Разработчики ПО (программного обеспечения) делают информационные и рекламные вставки справочного характера внутри создаваемых ими программных пакетов. И все это так или иначе реализуется с помощью простого и доступного, но вместе с тем эффективного языка разметки HTML.

17 Часть I. HTML первые шаги Спецификация HTML Многие называют HTML языком программирования. Это не совсем верно, так как в традиционном понимании HTML является языком разметки электронных документов, лишь указывающим программам просмотра HTML-страниц (браузерам) форму представления описанной в документе информации. Начиная с середины 90-х годов XX века HTML претерпел некоторые изменения в своей спецификации варианты используемых инструкций, применяемых тегов и модулей горячо обсуждались и изменялись. На сегодня последней версией языка HTML является версия Начиная с момента своего возникновения разработкой спецификации языка HTML стала заниматься организация под названием "Консорциум W3C" (World Wide Web Consortium). Ее основной задачей являлось составление и принятие технических рекомендаций единого стандарта разметки гипертекстовых документов. Практическая необходимость работы над стандартом была обусловлена постоянным ростом популярности Интернета, в рамках которого производители программ (браузеров) для просмотра Web-документов выдвигали свои предложения по улучшению правил описания гипертекстовых данных. Версия HTML 4.0, выпущенная Консорциумом в середине 1997 года и ставшая признанной спецификацией в конце того же года, является на сегодня последней номерной версией языка разметки HTML. Некоторые несущественные дополнения, внесенные в спецификацию в декабре 1999 года, мало повлияли на структуру самого языка, а версия получила небольшое добавление в виде цифры 1, т. е. стала называться Хочется добавить, что деятельность Консорциума по сути призвана регулировать и контролировать развитие и совершенствование языка гипертекстовой разметки HTML, учитывая потребности сферы интернет-технологий и компаний-разработчиков, работающих на рынке браузеров. Однако в действительности ситуация не такая однозначная производители программ для просмотра HTML-документов постоянно предлагают технологические нововведения в спецификацию языка, часть которых получает одобрение Консорциума. Остальная часть инноваций, не вошедшая в состав принятой W3C рекомендации, может тем не менее внедряться в программную платформу выпускаемых браузеров, что на практике вызывает проблемы несовместимости электронных документов при их просмотре браузерами разных моделей и версий. Какой браузер выбрать Специальные программы для просмотра электронных документов, созданных по правилам языка разметки HTML, называются браузерами. Основная функция браузера заключается в интерпретации кода HTML и выводе визу-

18 Глава 1. Ваш первый HTML-документ ального результата на экран монитора пользователя. Сегодня существует большое количество самых разнообразных браузеров, однако наибольшей популярностью пользуются лишь три программы: Internet Explorer, Netscape Navigator и Opera. Рассмотрим немного подробнее каждый из этих браузеров. Internet Explorer В августе 1995 года компания Microsoft выпустила очередное обновление своей операционной системы Windows 95, в состав которой впервые был включен интернет-браузер Internet Explorer 1.0. Однако первоначальный программный код браузера принадлежал не Microsoft, а компании Spyglass, которая впоследствии продала лицензию на изменение и коммерческое распространение кода разработчикам Microsoft. Последние поставили Internet Explorer на более высокий уровень развития, что позволило браузерудебютанту составить достойную конкуренцию Netscape Navigator браузеру, которым к 1995 году пользовались свыше 50% посетителей Интернета. В конце того же года Microsoft выпускает окончательный и доработанный вариант Internet Explorer 2.0, а весной 1996 года появляется версия 3.0, содержавшая для того времени целый ряд нововведений, таких как поддержка фреймов, подключение программных надстроек (plug-in) и пр. Выход четвертой версии Internet Explorer (вторая половина 1997 года) положил начало стремительному увеличению доли рынка браузеров корпорации Microsoft (к концу года по самым разным данным она охватывала 60% рынка, в то время как ее основной соперник, компания Netscape, всего около 30%). Однако Microsoft не останавливается на достигнутом превосходстве. В 1999 году выходит пятая версия популярного во всем мире браузера, в котором были реализованы новые и усовершенствованы старые технологии. Примерно через год появляется версия 5.5 и, наконец, в октябре 2001 года свет увидела последняя (на момент написания книги) версия 6.0. Можно назвать несколько основных возможностей браузера, благодаря которым Internet Explorer получил такую популярность: П быстрый запуск программы; П поддержка многих технологий, не реализованных или реализованных недостаточно в других браузерах (ActiveX, CSS1/CSS2, "плавающие фреймы" и др.); CU демократичность интерпретации HTML-кода. При загрузке документа, код которого содержит незнакомые конструкции и/или ошибки, Internet Explorer в большинстве случаев просто не выводит часть, вызывающую затруднения, на экран, в то время как, например, браузер Netscape может отобразить структуру такого документа нарушенной или вообще ничего не вывести на экран монитора;

19 _/0 Часть I. HTML первые шаги П полная интеграция с другими приложениями Microsoft, работающими под управлением ОС Windows; П возможность масштабирования графических изображений, открытых в отдельном окне. Среди недостатков можно выделить следующие: О нестабильность работы; П среднюю скорость загрузки информации. Netscape Компания Netscape Communications Corporation практически с самого начала считалась основным конкурентом корпорации Microsoft в продвижении своего браузера. Современный браузер Netscape берет свое начало в марте 1993 года, когда один из основателей будущей компании Марк Андриссен (Маге Andreessen) анонсирует выход программы Mosaic (прототипа будущего браузера Netscape). На следующий год Марк Андриссен и его коллега Джим Кларк (Jim Clark) основывают компанию Mosaic Communications (будущая Netscape Communications Corporation), а буквально через несколько месяцев на свет появляется первая версия интернет-браузера Netscape O.9. Компания расширяется, Netscape получает распространение, и в итоге к лету 1995 года большинство посетителей Всемирной паутины (около 80%) используют для путешествия по Интернету именно эту программу. Однако вскоре появляется Internet Explorer, который начинает всерьез конкурировать с Netscape, и основатели компании выпускают новую версию своего браузера (2.0), снабдив его не только новым именем Netscape Navigator, но и некоторыми техническими возможностями, тем самым начав знаменитую "войну браузеров". В конце 1998 года крупнейший интернет-провайдер Соединенных Штатов Америки America-On-Line (AOL) покупает компанию Netscape и все права на развитие одноименного браузера. В 2000 году выходит Netscape 6.0, параллельно с выходом которого анонсируется проект Mozilla O.6. Оба приложения на тот момент использовали единое программное ядро Gecko, но Netscape как торговая марка принадлежал AOL, a Mozilla разрабатывался в качестве независимого проекта. Наконец, в августе 2002 года выходит последняя на момент написания книги версия Netscape 7.0, а следом за ней появляется Mozilla 1.0. Основными преимуществами браузеров семейства Netscape являются: П сравнительно небольшой размер программы; П предоставление пользователю расширенного управления содержанием электронных документов;

20 Глава 1, Ваш первый HTML-документ 11 П улучшенная организация внутренних данных; П поддержка технологии смены skin'os (изменение внешнего вида программы в соответствии с выбранной оформительской схемой). Недостатков тоже хватает, учитывая трудный путь развития, который прошли браузеры Netscape: П отсутствие поддержки некоторых интерактивных технологий, рекомендованных Консорциумом W3C; П низкая скорость работы; П слишком долгое время запуска программы. Opera Компания Opera Software (г. Осло, Норвегия) разработала одноименный браузер в 1994 году для норвежской телекоммуникационной компании Telenor. Группа разработчиков, включавшая в себя двух основателей Opera Software, Иона Штефенсона фон Тежнера (Jon Stephenson fon Tetzchner) и Гера Иварсоя (Geir Ivarsoy), поставила перед собой задачу создать интернет- и мультимедиа-приложение, которым могли бы пользоваться все желающие, независимо от системных возможностей своих компьютеров. В первоначальную концепцию браузера были заложены такие критерии, как скорость запуска программы и загрузки информации, небольшой размер приложения, минимальные требования к ресурсам компьютера пользователя. Программа, изначально задуманная как небольшой по размеру быстрый браузер для компьютеров с незначительными ресурсами, какое-то время использовалась в пределах внутренней информационной сети компании Telenor, а к концу 1995 года авторы Opera покинули стены компании, чтобы продолжить самостоятельное развитие своего детища. Наконец, во второй половине 1996 года браузер Opera 2.1 стал доступен для загрузки в Интернете в качестве 90-дневной условно-бесплатной (Shareware) версии. К числу основных отличий Opera от других браузеров, которые с полной уверенностью можно считать преимуществами, отнесем следующие: П небольшой размер; О минимальные системные требования; П быструю скорость загрузки HTML-документов; П расширенные настройки; О высокую масштабируемость просматриваемого документа. Однако и у Opera есть ряд недостатков, которые также следует упомянуть: П статус коммерческого программного продукта (регистрация стоит 39 долларов для полной версии; Freeware-вариант будет постоянно "радовать" вас показом чужих рекламных баннеров);

21 Часть I. HTML первые шаги П отсутствие поддержки некоторых русских кодировок в английских версиях программы; П недостаточно высокий уровень надежности выполнения скриптов на стороне пользователя (JavaScript/VBScript). На момент написания книги последней версией браузера Opera стала версия 7.0. Как видите, каждый из описанных интернет-браузеров прошел долгую историю развития, имеет свои плюсы и минусы, получает одобрение и порицание, обладает сторонниками и противниками своих функциональных возможностей. В конечном итоге, выбор браузера, с которым вы будете работать в процессе освоения языка гипертекстовой разметки HTML, остается за вами. В заключение лишь приведу статистику использования браузеров. Согласно подсчетам известной исследовательской группы OneStat, в 2002 году около 94,6% пользователей во всем мире выходило в Интернет с помощью Internet Explorer, в то время как на долю Netscape пришлось всего 3,3%. Остальные браузеры отстают безнадежно пользователей Mozilla 1.0 и Opera 6.0 насчитывается всего около 0,8%. Статистика использования браузеров в российской части Интернета почти повторяет мировые показатели: Internet Explorer 91,5%, Netscape - 3,2%, а прочие браузеры 5,2% (источник: ArtLebedev Group, ноябрь 2002 года). Структура HTML-документа Как уже было сказано ранее, язык HTML представляет собой набор специальных правил. Каждому правилу соответствует свое название, свойство и значение. Например, чтобы задать правило жирного начертания обыкновенного текста, необходимо использовать следующую HTML-конструкцию: <В>Обыкновенный текст</в> Как видно из примера, текст, который должен отображаться жирным начертанием, обособлен группами символов <в> и </в>. Такие группы принято называть тегами. Сразу следует сказать, что теги бывают одинарными и парными. В случае с нашим примером тег </в> является парным, т. к. он закрывает HTML-конструкцию вместе с символом "/" (прямой слэш). Иногда теги, которые необходимо закрывать парным тегом, называют тегамиконтейнерами. Структура любого тега подразумевает указание самого тега, его параметра и значения этого параметра. При этом наименование параметра и его значения может писаться как строчными, так и прописными буквами. Значение параметра ставится в кавычки.

22 Глава 1. Ваш первый HTML-документ ^ 13 Кроме того, параметры и их значения могут либо вообще отсутствовать у какого-то определенного тега, либо считаться необязательными и устанавливаемыми только в случае изменения стандартных характеристик тега: <TABLE WIDTH="100%" BORDER> В приведенном примере для тега построения таблицы <TABLE> один параметр (WIDTH) указан со значением, другой (BORDER) такового не содержит. Некоторые теги могут указываться вообще безо всяких параметров (например, принудительный перенос строки <BR>). Другие теги могут включать несколько значений одного параметра ("INDEX, FOLLOW" для метаопределения "robots"). Любой HTML-документ содержит три основных обязательных раздела: HTML, HEAD и BODY. Рассмотрим подробнее каждый из них. Раздел HTML Раздел HTML определяет специфику документа, содержание которого будет интерпретироваться браузером. Раздел описывается тегом-контейнером <HTMLX/HTML> и дает браузеру информацию о том, что документ разработан с помощью языка разметки HTML. В предыдущих версиях языка тег <HTML> использовался с некоторыми параметрами, однако спецификация 4.0 отменила это правило (в принципе, сегодня большинство браузеров способно распознать HTML-документ и без указания данного тега, тем не менее, пропускать раздел HTML разработчикам не рекомендуется). Раздел HEAD Раздел HEAD выполняет функцию рабочего заголовка HTML-документа и является, по сути, "бойцом невидимого фронта" - - теги, указываемые внутри этого раздела, чрезвычайно важны и могут сильно влиять на внешний вид документа, но сами остаются незаметными глазу пользователя. Данному разделу сопоставлен парный тег <HEADX/HEAD>. Рассмотрим теги HTML, которые указываются внутри раздела HEAD. Название документа <TITLE> Парный тег <TITLEX/TITLE> предназначен для указания имени созданному электронному документу. Следует помнить, что под именем документа в данном случае имеется в виду не файловое наименование, а визуальный заголовок HTML-страницы. Указание конструкции <TITLEX/TITLE> не является обязательным, однако рекомендуется по ряду причин: П отсутствие тега названия документа заставит браузер при интерпретации HTML-кода вывести в заголовке окна фразу типа Untitled Document

23 14 Часть I. HTML первые шаги (Документ без названия), что не соответствует ни тематике вашего электронного документа, ни его наполнению; П при попытке добавить созданный вами HTML-документ (без тегаконтейнера <TITLEX/TITLE>) в "закладки" браузера пользователю придется самостоятельно вписывать название добавляемой страницы; П поисковые системы, столкнувшись с безымянной страницей, занесут ее в свои базы данных под заголовком Untitled, что сделает HTML-документ безликим и похожим на миллионы других электронных документов, размещенных в Интернете. Связь между документами <LINK> Часто бывает так, что несколько различных документов структурно или функционально взаимосвязаны между собой. В этом случае используется тег <LINK>, который не является парным, а значит не требует указания закрывающего тега: <LINK HREF="styles/main.ess" TYPE="text/css" REL="stylesheet"> Приведенный пример показывает отношение между HTML-документом, в разделе HEAD которого указана данная кодовая конструкция, и внешним файлом шаблона стилей main.ess. Возможные параметры тега <LINK> приведены в табл Таблица 1.1. Возможные параметры тега <LINK> Параметр HREF TYPE REL REV Назначение Указание ссылки на внешний документ Тип внешнего документа Отношение между текущим и внешним документом Отношение между внешним и текущим документом Мета-определения <МЕТА> Мета-определения электронного документа описываются целым рядом параметров, входящих в состав непарного тега <МЕТА> и предназначеных для описания внутренних свойств HTML-файла. Все мета-определения, в сущности, имеют два основных типа данных: НТТР- EQUIV и NAME. Первый можно отождествить с заголовками протокола передачи гипертекстовых данных HTTP (HyperText Transfer Protocol). Структура мета-тега этого типа выглядит так: <МЕТА HTTP-EQUIV="MMH" СОЫТЕМТ="содержание">

24 Глава 1. Ваш первый HTML-документ 15 Рассмотрим кодовые конструкции по данному типу мета-определений (с использованием соответствующих параметров HTML). МЕТА HTTP-EQUIV="expires" Конструкция определяет возможность запрета кэширования HTML-страниц за счет указания даты устаревания документа (актуальна для интернетресурсов с динамически изменяющимся содержанием). По истечении срока, указанного в этом параметре, браузер при повторном обращении к документу будет перенаправлен к источнику для обновления информации. Значение параметра CONTENT описывается в следующей последовательности: день недели (Mon, Tue, Wed и т.д.), число (01, 02, 03 и т.д.), месяц (Jan, Feb, Маг и т. д.), год, время (часы, минуты, секунды) и часовой пояс (GMT): <МЕТА HTTP-EQUIV="expires" CONTENT="Sat, 25 Jan :30:00 GMT"> Приведенный пример говорит о том, что в субботу, 25 января 2003 года, в 15 часов 30 минут по Гринвичу "срок годности" HTML-документа истечет, что потребует от браузеров обновления данных при обращении к содержанию страницы. МЕТА HTTP-EQUIV="refresh" Такая конструкция указывает браузеру перезагружать содержимое окна через заданный промежуток времени. При добавлении дополнительного параметра URL через указанное время (в секундах) будет произведена переадресация на внешний адрес. Следующий пример дает браузеру команду ровно через 10 секунд перенаправить посетителя по адресу <МЕТА HTTP-EQUIV="refresh" CONTENT="10; URL= Причин для использования такой конструкции может быть несколько: ваш Web-сайт переехал на другой сервер, вы хотите показать рекламный блок, а потом перенаправить посетителя на заглавную страницу и т. д. Простая перезагрузка содержимого страницы может пригодиться в случае динамического изменения информации, работы скрипта по случайному выводу данных, электронных презентаций и пр. МЕТА HTTP-EQUIV="Content-Type" Главная функция этой конструкции определение типа и кодировки документа. Наиболее используемыми значениями кодировки русскоязычных HTML-документов являются Windows-1251 и KOI8-R. На некоторых серверах возможно автоматическое перекодирование документов, в связи с чем использовать эту конструкцию не рекомендуется. Также необходимо проследить, чтобы кодировка текста документа совпадала с кодировкой, обозначенной В значении charset. <МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

25 16 Часть I. HTML первые шаги Упомянутые и прочие малоиспользуемые конструкции типа МЕТА HTTP- EQUIV перечислены в табл Таблица 1.2. Параметры типа мета-определений HTTP-EQUIV Параметр Функция Подпараметры expires refresh Content-Type Content-Language Cache-Control Window-target Pragma Set-Cookie Ext-cache Location Запрет кэширования HTML-документа по истечении указанного срока Перезагрузка/переадресация через заданный промежуток времени Определение типа и кодировки документа Указание языка документа Контроль кэширования документа Определение места загрузки документа (используется для фреймовых структур) Управление кэшированием документа по протоколу НТТР/1.0 Настройка чтения данных Cookies (данных пользовательского компьютера) Управление альтернативным кэшем документа Указание места расположения документа в Интернете (полный адрес) URL charset name expires domain path secure name instructions Теперь рассмотрим основные конструкции мета-определений второго типа NAME. МЕТА NAME="Keywords" Конструкция задает набор ключевых слов документа, предназначенных для индексирования поисковыми системами (добавления информации о документе в базы данных). Слова указываются через запятую: <МЕТА NAME="keywords" CONTENT="HTML, Web, WWW, Web-страница, Интернет">

26 Глава 1. Ваш первый HTML-документ 77 МЕТА NAME="Description" Предоставление небольшого описания текущего HTML-документа, также необходимого для поисковых систем (при поиске информации описание выводится рядом со ссылкой на найденный интернет-ресурс): <МЕТА NAME="description" CONTENT="HTML. Экспресс-курс: Быстрое освоение популярного языка гипертекстовой разметки HTML"> МЕТА NAME="Author" Конструкция предназначена для указания автора (авторов) текущего документа. <МЕТА NAME="Author" CONTENT="AneKcen Петюшкин"> МЕТА NAME="Robots" Это одна из наиболее важных конструкций, используемая при описании правил для индексирования документа поисковыми системами (роботами). Отдельно следует перечислить возможные значения параметра CONTENT: П ALL разрешение индексирования документа со всеми присутствующими в нем гиперсвязями (ссылками); П NONE - - запрет индексирования документа со всеми присутствующими в нем гиперсвязями; О О П П INDEX разрешение индексирования документа; NOINDEX запрет индексирования документа; FOLLOW разрешение индексирования присутствующих в документе гиперсвязей; NOFOLLOW запрет индексирования присутствующих в документе гиперсвязей. Если конструкция МЕТА NAME= "Robots" не указывается, то поисковый робот индексирует документ со всеми присутствующими в нем гиперссылками (равнозначно значению ALL или INDEX, FOLLOW). <МЕТА NAME="robots" CONTENT="ALL"> Эти и некоторые другие конструкции типа NAME перечислены в табл Таблица 1.3. Параметры типа мета-определений NAME Параметр Функция Подпараметры keywords description author Указание ключевых слов документа Указание краткого описания документа Информация об авторе (авторах) документа

27 18 Часть I. HTML первые шаги Таблица 1.3 (окончание) Параметр Функция Подпараметры robots rating document-state revisit distribution URL copyright generator Составление правил для индексирования документа поисковыми системами (роботами) Установление возрастной категории содержания документа Определение частоты индексирования документа Определение промежутка времени, через которое должно производиться повторное индексирование документа Категория распространения документа (массовое или ограниченное) Указание основного адреса документа для индексирования (в случае существования "зеркальных" копий) Установление авторского права и перечисление условий распространения документа Информация о программном обеспечении, с помощью которого создавался документ ALL NONE INDEX NOINDEX FOLLOW NOFOLLOW Следует помнить о том, что использование абсолютно всех мета-определений не нужно. В зависимости от типа документа, его содержания и прочих факторов, надо выбрать только самые необходимые теги мета-данных. Наиболее важными являются данные для поисковых систем и указание кодировки документа. Элементы <STYLE> и <SCRIPT> В структуру раздела документа HEAD также могут входить теги-контейнеры <STYLEX/STYLE> И <SCRIPTX/SCRIPT>. ПерВЫЙ ПЗрНЫЙ Т6Г ОПИСЫВЗеТ СТИЛСВЫС шаблоны документа, второй содержит код исполняемых сценариев (скриптов). Раздел BODY Раздел BODY является одним из самых важных компонентов любого HTMLдокумента, т. к. в нем располагается содержательная часть, которая выводится браузером на экран монитора пользователя.

28 Глава 1. Ваш первый HTML-документ 19 Раздел описывается парным тегом <BODYX/BODY>, внутри которого размещается большинство существующих тегов HTML. Тег <BODY> имеет ряд параметров (табл. 1.4), которые условно можно разделить на четыре основные группы (параметры фона, границ документа, текста и гиперссылок). Таблица 1.4. Параметры тега <BODY> Параметр BGCOLOR BACKGROUND BGPROPERTIES TOPMARGIN, BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN, MARGINWIDTH, MARGINHEIGHT TEXT LINK, ALINK, VLINK Функция Определение цвета фона Указание фонового рисунка Изменение свойств фона (например, фиксирование фонового рисунка) Определение размера отступов Определение цвета основного текста Определение цвета гиперссылок Параметры фона Параметрами фона документа являются BGCOLOR, BACKGROUND и BGPROPERTIES. BGCOLOR устанавливает цвет фона, значение которого может быть введено в символьном эквиваленте, в шестнадцатеричном коде или в формате цветовой модели RGB. Система указания цвета в HTML основана на трех основных цветах: красном, зеленом и синем (модель RGB Red, Green, Blue). Любое значение RGB может быть преобразовано в шестнадцатеричный формат (от 00 до FF с приставкой # (читается "диез")). Некоторым значениям упомянутых моделей соответствует символьное название цвета. Таким образом, один и тот же цвет можно указать тремя возможными способами. Далее показано три варианта установки цвета фона (белого): П <BODY BGCOLOR="white"> П <BODY BGCOLOR="#FFFFFF"> П <BODY BGCOLOR="255,255,255"> Параметр BACKGROUND позволяет накладывать на фон документа графическое изображение: <BODY BACKGROUND="images/bg.gif"> Параметр BGPROPERTIES поддерживается только браузером Microsoft Internet Explorer и позволяет менять свойства фона документа. Например, конструкция <BODY BACKGROUND="imageS/bg.gif" BGPROPERTIES="fixed">

29 20 Часть I. HTML первые шаги позволит прокручивать содержание документа, оставляя фоновое графическое изображение в зафиксированном виде. Описанные параметры не являются обязательными, однако использование BGCOLOR рекомендуется по следующей причине: пользователь в настройках своего браузера может поставить любой цвет фона, а разработчик, полагая, что белый цвет является основным по умолчанию, может не указать этот параметр. В результате вместо подразумевающегося белого цвета, фон может оказаться черным, зеленым и т. д., что способно привести к нарушению оформления документа. Также наряду с графическим изображением фона рекомендуется использовать и параметры цвета на тот случай, если рисунок не загрузится (тогда браузер отобразит цвет). Параметры границ документа Параметры границ HTML-документа создают отступы заданного размера от верхнего, нижнего, левого и правого краев документа. Этим отступам соответствуют параметры TOPMARGIN, BOTTOMMARGIN, LEFT-MARGIN и RIGHTMARGIN. Значения для них задаются в пикселах: <BODY TOPMARGIN="5" BOTTOMMARGIN="5" LEFTMARGIN="10" RIGHTMARGIM="10"> Однако данные параметры не воспринимаются некоторыми браузерами. В частности, Netscape объединяет упомянутые параметры в две группы - горизонтальные и вертикальные отступы: <BODY MARGINWIDTH="10" MARGINHEIGHT="5"> Таким образом, если вы хотите учесть особенности всех браузеров, то в HTML-конструкцию надо подставить и те, и другие параметры: <BODY TOPMARGIN="5" BOTTOMMARGIN="5" LEFTMARGIN="10" RIGHTMARGIN="10" MARGINWIDTH="10" MARGINHEIGHT="5"> Параметры текста Из параметров текста документа реально применяется только один TEXT. Он задает цвет основного текста на странице (значение параметра может быть введено аналогично цвету фона документа): <BODY TEXT="black"> Параметры гиперссылок Параметры гиперссылок (связей с внутренними или внешними документами) определяют цвет активных (ALINK), не посещенных (LINK) и посещенных (VLINK) ссылок: <BODY LINK="#OOOOFF" ALINK="#OOOOFF" VLINK="blue">

30 Глава 1. Ваш первый HTML-документ 21 Первый HTML-документ Итак, мы рассмотрели основные разделы любого HTML-документа. В целом, код простейшей страницы представлен в листинге 1.1. I Листинг 1.1. Пример простейшего HTML-документа <HTML> <HEAD> <Т1ТЬЕ>Мой первый НТМЬ-документ</Т1ТЬЕ> <МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251"> <META NAME="keywords" CONTENT="HTML, документ, первый"> <META NAME="description" СОМТЕМТ="Это мой первый HTML-документ"> </HEAD> <BODY BGCOLOR="#FFFFFF" TOPMARGIN="30" TEXT="black" LINK="#OOFFOO" ALINK="fOOFFOO" VLINK="blue"> Это мой первый HTML-документ! </BODY> </HTML> Теперь сохраните код под любым именем, не забыв присвоить файлу расширение html или htm. Откройте файл в браузере. Это ваш первый HTML-документ! 3 Мой первый HTML-документ - Microsoft Internet Explorer File Edit. View Favorites Tools tjelp а Back Slop Refresh Home ; Search Favotkes Это мой первый HTML-документ! «У Done Д^ My Computer _J Рис Ваш первый HTML-документ

31 Глава 2 Работаем с текстом Форматирование текста Можно с полной уверенностью заявить, что текст занимает далеко не последнее место в структуре HTML-документа. В большинстве случаев мы посещаем интернет-сайты в поисках именно текстовой информации: статей и художественных произведений, новостей и технической документации и т. п. Поэтому от того, как оформлен текст, как он преподнесен посетителю, зависит многое в судьбе любого Web-сайта. Область работы с текстом в HTML включает в себя большое количество всевозможных тегов, составляющих две основные группы теги логического форматирования и теги физического форматирования. В группу тегов логического форматирования входят теги, отображающие на экране монитора элементы документа таким образом, как установлено по умолчанию в спецификации языка разметки HTML. Переопределить их параметры или свойства нельзя, за исключением ситуаций использования стилевых шаблонов CSS и обособления тегами физического форматирования. Результат действия разных тегов логического форматирования визуально может совпадать, ибо основное их предназначение заключается в логическом выделении отдельных элементов HTML. Теги физического форматирования позволяют разработчику HTMLдокумента визуально изменять вид текста, варьируя его параметры и значения. Другими словами, теги физического форматирования предназначены для выделения отдельных текстовых фрагментов различными способами, установленными автором документа. Рассмотрим подробнее наиболее используемые теги из каждой группы. Теги логического форматирования Тег <ACRONYM> используется для расшифровки аббревиатур. Реализуется через параметр TITLE (листинг 2.1) и отображается в браузере при наведении курсора на слово-аббревиатуру (рис. 2.1).

32 Глава 2. Работаем с текстом 23 Hal Расшифровка аббревиатур с помощью тега ACRONVM -. Edit View Favorites lools Help j Back. Slop Refresh Home ; Search Favorites ]ТГШ птгны -т наиболее популярных и HyperText Markup Language рдшулцуднснныл на сегодня языков разметки текста, используемый для создания Web-сайтов. jsjdone" J My Computer Рис Использование тега <ACRONYM> J Листинг 2.1. Использование тега <ACRONYM> <HTML> <HEAD> <Т1ТЬЕ>Расшифровка аббревиатур с помощью тега ACRONYM</TITLE> </HEAD> <BODY BGCOLOR="IFFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> <ACRONYM TITLE="HyperText Markup Language">HTML</ACRONYM> - один из наиболее популярных и распространенных на сегодня языков разметки текста, используемый для создания Web-сайтов. </BODY> </HTML> Помимо <ACRONYM>, возможность отображения слова в сокращенном виде и подсказки к нему существует у тега <ABBR>. Тег <CITE> призван выделять различные цитаты и высказывания, названия библиографических источников и пр. Текст, помещенный между тегами <CITE> и </CITE>, браузером выделяется курсивом. Визуально аналогичен тегам <ЕМ> и

33 24 Часть I. HTML первые шаги Тег <CODE> предназначен для визуального выделения небольших фрагментов программного кода. Код, размещенный в этом парном теге, отображается моноширинным шрифтом. Тег <DEL> используется для обозначения удаленного текста. Имеет необязательные для указания параметры DATETIME и CITE (первый показывает дату удаления, второй ссылается на источник причины удаления). Текст, заключенный между тегами <DEL>, отображается зачеркнутым и аналогичен действию тегов <s> или <STRIKE>. Тег <ЕМ> -- используется для интонационного выделения определенного текстового фрагмента (листинг 2.2). Браузерами отображается курсивом (так же, как теги <CITE> и <i>) (рис. 2.2). i'3 Вы деление текста курсивом - Microsoft Internet Explorer j File Edit View Favorites Tools Це1р ^. ' *. & 1 Й i : ^'.'".[*j Back. f.orty.iid Stop Refresh Home I Search Favorites Тег используется для интонационного выделения определенного текстового фрагмента. Браузерами отображается курсивом. i Д^ My Computer _J Рис Использование тега <ЕМ> Листинг 2.2. Использование тега <ЕМ> <HTML> <HEAD> <Т1ТЬЕ>Вьщеление текста курсивом</т1тье> </HEAD> <BODY BGCOLOR=" FFFFFF" TEXT="black" LINK="ttOOFFOO" ALINK="tOOF?00'

34 Глава 2. Работаем с текстом 25 VLINK="blue"> Тег используется для <ЕМ>интонационного выделения определенного текстового фрагмента</ем>. Браузерами отображается курсивом. </BODY> </HTML> Теги <HI>, <Н2>. <нб> тег <н> с указанием одной из цифр (от 1 до 6) задает определенный размер заголовка всего текста целиком или его конкретного фрагмента (листинг 2.3). Соответственно, заголовок <нб> будет минимальным, a <HI> самым большим (рис. 2.3). Особенностью тегов <н> является то, что они уже подразумевают отступ от текстовой части и разработчикам HTML-документов не приходится делать отступ самостоятельно.. Back.: Microsoft Internet Explorer :. iew Favorites loots Це1р. 4 -ф ' 'Ш r ИЩИ Stop ': Refresh \- Заголовок 1 m Заголовок 2 Заголовок 3 Заголовок 4 Заголовок 5 Ззгопюск 6 Рис Использование тегов <Н1> <Н6> I Листинг 2.3. Использование тегов <Н1>т-<нб> <HTML> <HEAD> <Т1ТЬЕ>Заголовки H1-H6</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> 2 Зак. 863

35 26 Часть I, HTML первые шаги <Н1>Заголовок <Н2>Заголовок 2</Н2> <НЗ>Заголовок 3</НЗ> <Н4>Заголовок 4</Н4> <Н5>Заголовок 5</Н5> <Н6>Заголовок 6</Н6> </BODY> </HTML> Тег <STRONG> используется для выделения фрагментов текста, на которых необходимо акцентировать внимание пользователя (листинг 2.4). Браузерами результат такого форматирования отображается жирным начертанием (рис. 2.4). В визуальном плане аналогичен тегу <в>. Ня Выделение текста жирным - Microsoft Internet Explorer Ejle Edit SSew Favorites tools Це!р ' HED ЕР i Back Stop Refresh Home ; Search Favorites Для выделения фрагментов текста, на которых необходимо акцентировать внимание пользователя, используется тег STRONG. У My Computer" Рис Использование тега <STRONG> Листинг 2.4. Использование тега <STRONG> <HTML> <HEAD> <Т1ТЬЕ>Выделение текста жирным</т1тье> </HEAD>

36 Глава 2. Работаем с текстом 27 <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> Для вьщеления фрагментов текста, на которых <ЗТЮЫОнеобходимр акцентировать внимание пользователя</зтрш6>, используется тег STRONG. </BODY> </HTML> Полный перечень рассмотренных тегов логического форматирования приведен в табл Таблица 2.1. Теги логического форматирования Тег ACRONYM CITE CODE DEL ЕМ Н1-Н6 STRONG Функция Расшифровка аббревиатур Указание цитаты Указание фрагмента программного кода Обозначение удаленной информации Выделение курсивом Создание заголовков Выделение жирным начертанием Теги физического форматирования Тег <в> функция этого тега аналогична действию тега <STRONG>, а именно визуальное выделение фрагмента текста, на котором следует сделать акцент, отображается жирным начертанием. В последней версии спецификации HTML вместо <в> рекомендуется использование тега логического форматирования <STRONG>. Тег <BASEFONT> предназначен для определения типа шрифта, а также его цвета и размера, которые будут считаться принятыми по умолчанию для всего HTML-документа. Параметры тега <BASEFONT> аналогичны параметрам тега <FONT> и могут быть изменены по ходу текста дополнительным форматированием с помощью тега <FONT>. Следует заметить, что тег <BASEFONT> используется в двух разделах документа: HEAD и BODY. Закрывающего тега <BASEFONT> не требует. Тег <BIS> -- используется, если необходимо выделить часть текста небольшим увеличением размера шрифта относительно остальных слов. Однако следует заметить, что спецификация HTML не одобряет подобного подхода и рекомендует применять теги заголовков <н>. Тег <BLINK> поддерживается только браузером Netscape и реализует мигающий эффект выделенного фрагмента текста:

37 28 Часть I. HTML первые шаги Тег <FONT> один из основных тегов физического форматирования текста, отображающий свойства шрифтов. Для него могут использоваться следующие параметры: П FACE -- параметр, посредством которого браузер отображает текст указанным в HTML-коде шрифтом. При этом значение параметра FACE должно соответствовать установленному на компьютере пользователя шрифту. В случае если такого шрифта нет, текст будет показан стандартным (по умолчанию) шрифтом. Часто разработчики HTML-документов добавляют сразу несколько значений параметра FACE. Таким образом, если первого шрифта не окажется на компьютере пользователя, то браузер отобразит текст вторым шрифтом. Не будет найдено второго шрифта, браузер приступит к поиску третьего и т. д. (рис. 2.5, листинг 2.5). Использование параметра FACE - Microsoft Internet Expl. ИНБ File Edit View Favorites Tools Help ч- 1 Back iiwi! i Stop Refresh Home Search Favorites Этот текст будет показан одним из 3-х указанных шрифтов. Этот текст будет показан шрифтом по умолчанию. jfs] Done ' SJ My Computer Рис Использование параметра FACE тега <FONT> Листинг 2.5. Использование параметра FACE тега <FONT> f.. . ;. ;.i. ;. <HTML> <HEAD> <Т1ТЬЕ>Использование параметра FACE</TITLE> </HEAD>

38 Глава 2. Работаем с текстом 29 <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> <H3> <FONT FACE="Tahoma", "Arial", "Verdana">3TOT текст будет показан одним из 3-х указанных шрифтов.</font> </НЗ> <НЗ> <FONT FACE="Allegro">3TOT текст будет показан шрифтом по умолчанию. </FONT> </НЗ> </BODY> </HTML> V П COLOR параметр, предназначенный для выбора цвета, которым будет написан текст. HTML-конструкция имеет следующий вид: <FONT COLOR="red">3TOT текст будет написан красным цветом.</font> О SIZE функцией этого параметра является определение размера шрифта, которое происходит по условной шкале от 1 до 7. При этом указание размера может осуществляться как в виде относительного показателя (+1), так и в виде абсолютного (1). Средним значением размера шрифта принято считать показатель 3. Однако окончательный вид шрифта с учетом свойств его размеров может отличаться в зависимости от модели и версии браузера. Наконец, возможно использование сразу всех параметров тега <FONT> в пределах одной HTML-конструкции (листинг 2.6, рис. 2.6). I Листинг 2.6. Использование всех параметров тега <FONT>., <HTML> <HEAD> <Т1ТЬЕ>Использование всех параметров тега FONT</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> <FONT FACE="Tahoma", "Helvetica" COLOR="ttOOOOOO" 312Е="2">Этот текст будет показан одним из 3-х указанных шрифтов, черным цветом и размером "1".</FONT> </BODY> </HTML>

39 30 Часть I. HTML первые шаги 'ЭИспользование всех параметров тега FONT - Microsoft In.. file pt View Favorites tools Help :

' «* '! ii : ч-»:-; Back Stop Refresh.Home i Search Favorites Этот текст будет показан одним из 3-х указанных шрифтов, черным цветом и размером "1". Ш "У Computer Рис Использование всех параметров тега <FONT> Тег <i> тег, аналогичный тегам логического форматирования <CITE> и <ЕМ> (выделяет нужную часть текста курсивом). В ряде случаев использование <i> рекомендуется заменять соответствующими тегами логического форматирования. Тег <SMALL> предназначен для установки размера шрифта немного меньшего, чем остальные слова (поместив нужный фрагмент между парным тегом <SMALL>, получим эффект, противоположный действию тега <BIG>). Тег <SPAN> применяется в случае, когда выделенному фрагменту текста необходимо присвоить определенные свойства, а к помощи никакого логического тега прибегнуть нельзя. Теги <s> и <STRIKE> в последней версии спецификации HTML эти два тега были названы отмененными. Вместо них рекомендуется использовать тег <DEL>, также перечеркивающий выбранный фрагмент текста. Тег <зив> -- позиционирует фрагмент текста относительно нижней линии строки. Весьма удобный инструмент для написания математических и химических формул. Тег <SUP> размещает текстовый фрагмент относительно верхней линии строки. Также подходит для включения в разнообразные формулы (рис. 2.7).

40 Глава 2. Работаем с текстом 31 Нижний и верхний индексы - Microsoft Internet Explorer ИИ S3 i File E* View Favorites Tools Help ' -щ;; 7Щ^р-'Щ^Щ"- "ф

I Back r::v;;s,i i: Stop Refresh Home i Search Favorites 2y) 3 jly My Computer Рис Использование тегов нижнего и верхнего индексов <SUB> и <SUP> Тег <тт> спецификация определяет его как тег для отображения телетайпа или текста, набранного моноширинным шрифтом. В ряде случаев может быть заменен тегом <CODE>. Тег <и> делает текст подчеркнутым. В завершение разговора о тегах физического форматирования необходимо добавить, что разные теги могут использоваться одновременно в отношении одного текстового фрагмента. Например, часть текста и даже отдельного слова может быть написана и курсивом, и жирным начертанием, да еще подчеркнута и т. д. (листинг 2.7). Единственное, о чем следует помнить, это сохранение последовательности указания закрывающих тегов. Другими словами, не рекомендуется, открыв фрагмент текста тегами <в> и <FONT>, закрывать HTML-конструкцию в том же порядке (т. е. порядок закрывающих тегов должен быть обратным). i Листинг 2.7. Одновременное использование нескольких тегов физического I форматирования <HTML> <HEAD> <Т1ТЬЕ>Одновременное использование нескольких тегов физического форматирования</т1тее>

41 32 Часть I, HTML первые шаги </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="tOOFFOO" ALINK="#OOFFOO" VLINK="blue"> <FONT FACE="Verdana", "Arial" COLOR="gray" SIZE="3">B этом тексте использовано <и>три различных тега</и> <В>физического форматирования.</вх/гомт> </BODY> </HTML> Полный перечень рассмотренных тегов физического форматирования приведен в табл Таблица 2.2. Теги физического форматирования Тег Функция в BASEFONT BIG BLINK FONT I SMALL SPAN Выделение жирным начертанием Определение свойств шрифта для всего документа Выделение фрагмента текста большим размером, чем основной текст Создание эффекта мигания текста Указание свойств шрифта (цвет, размер, название шрифта) Выделение курсивом Выделение фрагмента текста меньшим размером, чем основной текст Присвоение свойств фрагменту текста при невозможности использования логических тегов s, STRIKE Обозначение удаленной информации зив SUP тт U Создание нижнего индекса Создание верхнего индекса Имитация телетайпа или моноширинного шрифта Выделение подчеркиванием Структурное форматирование Как известно, любой текст имеет свою структуру. Книги разделены на части, главы и разделы. Газеты и журналы имеют отдельные рубрики и подзаголовки, которые, в свою очередь, включают фрагменты текста, также имеющие свою собственную внутреннюю структуру абзацы, отступы, параграфы и пр.

42 Глава 2. Работаем с текстом 33 Текст, размещенный в HTML-документе, не исключение, он также должен иметь логичную, понятную каждому пользователю структуру. Ведь от того, насколько просто и удобно будет восприниматься текст на Web-странице, зависит многое, прежде всего то, какое впечатление о HTML-документе сложится у посетителя. Структурное форматирование в HTML подразумевает разбиение текстовых фрагментов электронного документа на логические блоки с информацией, которым соответствует определенный формат: абзац, текстовый блок, центрирование, отступы и перенос строки, горизонтальный разделитель, предварительно отформатированный текст и комментарии. Рассмотрим каждый из названных элементов структурного форматирования. Абзац При наборе текста в каком-нибудь текстовом редакторе (Microsoft Word, WordPerfect и др.) для обозначения абзаца мы используем клавишу <Enter>. Такое действие дает программе команду обособить один фрагмент текста от другого, задав "красную строку". При создании HTML-документа для обозначения абзаца' используется специальный тег <р>, который разделяет фрагменты текста вертикальным отступом (листинг 2.8). Простой перевод строки в данном случае не поможет: браузер, интерпретируя код, не воспримет отступ как команду создания абзаца и при выводе содержания на экран монитора объединит фрагменты текста вместе (рис. 2.8). i Листинг 2.8. Результат двойного перевода строки без использования тега <р> I. * <HTML> <HEAD> <Т1ТЬ,Е>Результат перевода строки без использования тега P</TITLE> </HEAD> <BODY BGCOLOR="ttFFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> <FONT FACE="Tahoma" COLOR="#000000" SIZE="3">npn создании HTML-документа для обозначения абзаца используется специальный тег <CODE>P</CODE>, который разделяет фрагменты текста вертикальным отступом. Простой перевод строки в данном случае не поможет: браузер, интерпретируя код, не воспримет отступ как команду создания абзаца и при выводе содержания на экран монитора объединит фрагменты текста вместе.</font> </BODY> </HTML>

43 34 Часть I. HTML первые шаги I'll Результат перевода строки без использования тега Р -. HGDE3I! 0le Edit View Favorites tools Help ; T; 1W' 7 ''1^:W :: llpl ЦЦ.Р;Вч;К:. ; -'. Гй,*;ч 1 Stop Refresh Home ш ]ТЩ^ЩЙ :^;3 : Search Favorites : При создании HTML-документа для обозначения абзаца используется специальный тег Р, который разделяет фрагменты текста вертикальным отступом. Простой перевод строки в данном случае не поможет: браузер, интерпретируя код, не воспримет отступ как команду создания абзаца и при выводе содержания на экран монитора объединит фрагменты текста вместе. 1 lj TMy Computer" Рис Результат перевода строки без использования тега <Р> Тег <Р> является парным, однако наличие закрывающего тега, согласно последней спецификации HTML, не обязательно. Так как <р> относится к разряду структурных тегов, включать другие элементы структурного форматирования он не может. Внутри него могут находиться только теги форматирования текста (логические и физические). Тег <Р> может содержать параметр ALIGN, отвечающий за тип горизонтального выравнивания текста в окне браузера (листинг 2.9): П ALiGN="ieft" текст выровнен по левому краю (значение параметра, принятое по умолчанию). При необходимости такого типа выравнивания указание параметра ALIGN не обязательно; П ALiGN="center" текст располагается посередине окна браузера. Использование данного значения не рекомендуется при работе с большими фрагментами текста, т. к. из-за различной длины слов восприятие абзаца затрудняется; П ALiGN="right" выравнивание текста по правому краю. Идеально подходит для создания эпиграфов, подписей, заголовков и пр. Использование при работе с большими текстовыми фрагментами нежелательно; П ALiGN="justify" выравнивание по ширине окна браузера. Значение JUSTIFY стало поддерживаться браузерами сравнительно недавно, однако во многих случаях именно этот тип выравнивания подходит для работы с текстом (рис. 2.9).

44 Глава 2. Работаем с текстом 35 : Листинг 2.9. Использование различных типов выравнивания <HTML> <HEAD> <Т1ТЬЕ>Использование различных типов выравнивания</т1тье> </HEAD> <BODY BGCOLOR="tFFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> <Р>При создании HTML-документа для обозначения абзаца используется специальный тег <CODE>P</CODE>, который разделяет фрагменты текста вертикальным отступом.</р> <Р ALIGN="center">TaKOU тип выравнивания подходит для заголовков документов. </Р> <Р А1ЯСЫ="г1дЫ;">Двойной перевод строки в данном случае не поможет: браузер, интерпретируя код, не воспримет двойной отступ как команду создания абзаца.</р> <Р ALIGN="justify">3Ha4emie JUSTIFY стало поддерживаться браузерами' сравнительно недавно, однако во многих случаях именно этот тип выравнивания подходит для работы с текстом.</р> </BODY> </HTML> 'ЯИспользование различных типов выравнивания - Micros El! I'Ete.' * itiew Favorites Tools Help \ :;ч / ': : : ^. и ' 'i) -i!) t*lf : Q -tj ; Back ^ Stop Refresh Home! Search Favorites При создании HTML-документа для обозначения абзаца используется специальный тег Р, который разделяет фрагменты текста вертикальным отступом. Такой тип выравнивания подходит для заголовков документов. Двойной перевод строки в данном случае не поможет: браузер, интерпретируя код, не воспримет двойной отступ как команду создания абзаца. Значение JUSTIFY стало поддерживаться браузерами сравнительно недавно, однако во многих случаях именно этот тип выравнивания подходит для работы с текстом. НО Done J My Computer Рис Использование различных типов выравнивания

45 36 Часть I. HTML первые шаги Как уже было сказано ранее, тег создания абзаца <р> позволяет использовать все теги форматирования текста как логического, так и физического. Следующий пример (листинг 2.10) иллюстрирует эту возможность (рис. 2.10). Ml Использование тегов форматирования текста внутри те. BIFF ' " ' Це1р Stop Refresh Home! Search Favorites При наборе текста в каком-нибудь текстовом редакторе (Microsoft Uorcl, WordPerfect И Др.) ДЛЯ обозначения абзаца мы используем клавишу <Enter>. Такое действие дает программе команду обособить один фрагмент текста от другого, задав "красную строку". Рис Использование тегов форматирования текста внутри тега <Р> Листинг Использование тегов форматирования текста внутри ' " ' '" <HTML> <HEAD> <Т1ТЪЕ>Использование тегов форматирования текста внутри тега P</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> <P ALIGN="justify"XFONT FACE="Verdana" SIZE="3"> При наборе текста в каком-нибудь текстовом редакторе (<TT>Microsoft Word</TT>, <TT>WordPerfect</TT> и др.) для обозначения абзаца мы <ЗТКОЫОиспользуем</ЗТКОЫС> клавишу <EM><Enter></EM>. Такое деист-

46 Глава 2. Работаем с текстом 37 вие дает программе команду обособить <и>один фрагмент текста от другоro</u>, задав <FONT С01/Ж="гес1"><В1С>"красную строку"</в1сх/гомт>. </FONTX/P> </BODY> </HTML> В данном примере в конце кода стоят два закрывающих тега </FONT>: один завершает действие свойства color=red, другой закрывает правила отображения свойств типа и размера шрифта (FONT FACE="verdana" SIZE="3"). Текстовый блок В случае необходимости указания специальных свойств отдельному фрагменту текста используются теги текстовых блоков <DIV> и <SPAN>. Изменение свойств осуществляется посредством назначения выбранному фрагменту текста стиля CSS, например: <DIV STYLE="COLOR: GRAY;"> Фрагмент текста, набранный серым цветом Более подробно о назначении стилей будет рассказано в главе 9. Однако следует помнить, что между <DIV> и <SPAN> имеются существенные отличия. Во-первых, <DIV> является исключительно структурным тегом, a <SPAN> берет начало в области физического форматирования текста. Во-вторых, <DIV> создает принудительный перенос строки на одну позицию после своего закрывающего тега (в отличие от тега абзаца <Р>, который осуществляет перенос на две позиции), поэтому задавать с его помощью отдельные свойства фрагмента внутри абзаца нельзя это вызовет принудительный перенос строки. Если такая необходимость возникла, лучше использовать тег <SPAN>, который позволяет назначать новые правила отображения текстовых фрагментов без изменения структуры документа. Для обоих элементов обязательно наличие закрывающих тегов, а также возможно добавление параметра типа выравнивания ALIGN, например (рис. 2.11): <Р ALIGN="justify"> Начало основного текста документа. <DIV ALIGN="right"><tparMeHT текста. </DIV> Окончание основного текста документа.

47 38 Часть I. HTML первые шаги КяОтличия в использовании тегов текстового блока DIV и. HOOF \ й, ф) Щ <ел : '. : ' ^ Search Favoiites, Два текстовых блока DIV 1. Однако следует помнить, что между DIV и SPAN существуют важные отличия. 2. Во-первых, DIVявляется исключительно структурным тегом, a SPAN берет начало в области физического форматирования текста. Два текстовых блока SPAN I. Однако следует помнить, что между DlVu SPAN существуют важные отличия. 2. Во-первых, DIV является исключительно структурным тегом, a SPAN берет начало в области физического форматирования текста. Рис Отличия в использовании тегов текстового блока <DIV> и <SPAN> Центрирование Центрирование любых элементов HTML-документа может быть осуществлено с помощью тега <CENTER>. Все данные, размещенные внутри тегаконтейнера <CENTERX/CENTER>, подлежат горизонтальному выравниванию по середине окна браузера. В сущности, тег <CENTER> представляет собой аналог значения ALiGN="center" того тега, результат отображения которого будет отцентрирован на экране монитора. К примеру, результат отображения фрагмента кода таблицы <CENTER> <TABLEXTRXTDX/TDX/TRX/TABLE> </CENTER> и фрагмента кода <TABLE ALIGN="center"XTRXTDX/TDX/TRX/TABLE> будет абсолютно одинаков. В первом случае использован структурный тег центрирования, во втором указан соответствующий тип выравнивания всей таблицы относительно окна браузера.

48 Глава 2. Работаем с текстом 39 Отступы и перенос строки Часто во многих печатных и книжных изданиях мы можем наблюдать, что начало новой строки абзаца начинается после небольшого отступа. В текстовом редакторе эта возможность регулируется клавишей табуляции <ТаЬ> или перемещением ползунка линейки настроек рабочей области документа (рис. 2.12). W Microsoft Word - Глава 2 (Работаем с текстом).с1ос I*] Файл Правка ид,. Вставке Формат ервис Таблица UKHQ Я.1 ' = Ш 'М \S '. 1= 1= & ip \ Q <CENTEB> <TABLEXTK><TD></TDX/TR></TABI.E> </CENTER> и фрагмента кода STABLE *LICN""center"><TB><TD></TL></TR></TABLE> будет абсолютно одинаков. В первом случае использован структурный тег центрирования, во втором - указан соответствующий тип выравнивания всей таблицы относительно окна браузера. Отступы и перенос строки Часто во многих печатных и книжных изданиях мы можем наблюдать, что начало новой строки абзаца начинается после небольшого отступа. Б текстовом редакторе эта возможность регулируется клавишей табуляции Tab или перемещением ползунка линейки настройки рабочей области документа Стр. ц 11/11 ' 1.' Ш fy Computer г.^j Рис Нестандартные возможности прорисовки структуры таблицы Возможные значения параметров FRAME и RULES приведены соответственно в табл. 4.3 и 4.4. Таблица 4.3. Возможные значения параметра FRAME Значение BOX BORDER ABOVE BELOW Функция Рамка с четырех сторон Рамка с четырех сторон Рамка только сверху Рамка только снизу

111 102 Часть I. HTML первые шаги Таблица 4.3 (окончание) Значение HSIDES VSIDES LHS RHS VOID Функция Верхняя и нижняя части рамки Левая и правая части рамки Только левая часть рамки Только правая часть рамки Нет рамок Таблица 4.4. Возможные значения параметра RULES Значение ALL GROUPS COLS ROWS NONE Функция Отображение линейки целиком Часть линейки, разделяющая сгруппированные данные Часть линейки, разделяющая столбцы Часть линейки, разделяющая строки Отсутствие линейки Вложенные таблицы Одной из замечательных особенностей HTML-таблиц по праву считается поддержка многоуровневой вложенности. Другими словами, одна таблица может включать другую, та, в свою очередь, еще одну и т. д. Преимущества вложенных таблиц Особенность вложенных таблиц, в отличие от других способов представления данных в электронном документе, позволяет более точно размещать отдельные элементы страницы относительно друг друга и относительно границ самого документа, отображаемого браузером. Например, два разнородных блока текста и нумерованный список, размещенные внутри тега <BODY>, невозможно разместить на одном уровне, а тем более на одном уровне со смещением в какую-либо сторону. Использование таблиц с легкостью решает эту проблему, позволяя располагать различные элементы и их комбинации в разных местах документа посредством видимых и невидимых ячеек рядов таблицы. Вот почему в последнее время преобладающее большинство HTML-документов создается на основе таблиц, где в качестве несущей основы берется таблица с невидимыми краями, содержащая вложенные таблицы с разным оформлением, отличающимися значениями параметров.

112 Глава 4. Таблица - основа вашего HTML-документа 103 Подводя итог сказанному, можно выделить следующие преимущества вложенных таблиц: П гибкая масштабируемость структуры электронного документа в целом; П широкие возможности позиционирования отдельных элементов страницы; О многоуровневое представление разнородных информационных данных; П расширенные оформительские возможности; О поддержка популярными браузерами. Пример вложенных таблиц Правила построения вложенных таблиц ничем не отличаются от создания таблиц одного уровня используются те же теги и параметры, задаются те же свойства и значения. Единственное, о чем нельзя забывать в ходе создания сложных вложенных таблиц, это: П каждая таблица последующего уровня размещается внутри тегаконтейнера <то> или <тн> таблицы предыдущего уровня; П вложенная таблица не может быть создана за пределами вышеназванных тегов ячейки таблицы; П таблица одного уровня может содержать любое количество вложенных таблиц другого уровня, идущих друг за другом в пределах тега ячейки таблицы верхнего уровня; П количество тегов таблиц всех уровней должно соответствовать количеству закрывающих тегов этих же таблиц. Один из вариантов использования многоуровневых вложенных таблиц приведен соответственно в листинге 4.9 и на рис ; Листинг 4.9. Пример использования многоуровневых вложенных таблиц I <HTML> <HEAD> <Т1ТЬЕ>Пример использования многоуровневых вложенных таблиц</т1тье> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> <H2 ALIGN="center">IIOCTPOEHME ВЛОЖЕННЫХ ТАБЛИЦ</Н2> <! Основная несущая таблица. Начало > <TABLE ALIGN="center" BORDER="0" CELLSPACING="0" CELLPADDING="2" WIDTH="100%">

113 104 _ Часть I, HTML первые шаги <TR> <TD VALIGN="top" WIDTH="50%"> <! Левая таблица с текстом. Начало > <TABLE ALIGN="center" BORDER="1" CELLSPACING="3" CELLPADDING="5" WIDTH="100%"> <TR> <TH BGCOLOR="gray"XFONT COLOR="white">Bno;KeHHbie таблицы</гоытх/тн> </TR> <TR> <TD VALIGN="top"> <P ALIGN="justify"> Одной из замечательных особенностей HTML-таблиц по праву считается поддержка многоуровневой вложенности. <BRXBR> Другими словами, одна таблица может включать другую, та, в свою очередь, еще одну и т. д. <BRXBR> Эта особенность, в отличие от других способов представления данных в электронном документе, позволяет более точно размещать отдельные элементы страницы относительно друг друга и границ самого документа, отображаемого браузером. </TD> </TR> </TABLE> <! Левая таблица с текстом. Окончание > </TD> <TD VALIGN="top" WIDTH="50%"> <! Правая таблица со списком. Начало > <TABLE ALIGN="center" BORDER="1" CELLSPACING="3" CELLPADDING="5" WIDTH="100%"> <TR> <TH BGCOLOR="#000000"XFONT COLOR="white '^Преимущества вложенных таблиц</гоытх/тн> </TR> <TR> <TD VALIGN="top"> <OL TYPE="1"> <Ы>Гибкая масштабируемость структуры электронного документа в целoм<br><br>

114 Глава 4. Таблица основа вашего HTML-документа 105 <1Л>Широкие возможности позиционирования отдельных элементов страницы<вехвк> <Ы>Многоуровневое представление разнородных информационных дан- HHX<BRXBR> </OL> </TD> </TR> </TABLE> <Ы>Расширенные оформительские возможности<вкхвя> <Ы>Поддержка популярными браузерами <! Правая таблица со списком. Окончание > </TD> </TR> </TABLE> <! Основная несущая таблица. Окончание > </BODY> </HTML> Пример использования многоуровневых вложенных таблиц - Microsoft Internet Explorer Яе Edit yjew Favorites : ДооЬ Back. Stop Reliesh Home : Search Favorite Hisloijj Mail. Size Print Edit ПОСТРОЕНИЕ ВЛОЖЕННЫХ ТАБЛИЦ Вложенные таштацы Одной из замечательных особенностей HTML-! таблиц по праву считается поддержка J многоуровневой вложенности. Другими словами, одна таблица может включать ; \ другую, та, в свою очередь, еще одну и т.д. ^! Эта особенность, в отличие от других способов ; \ представления данных в элеьсгронном документе, \ позволяет более точно размещать отдельные j элементы страницы относительно друг друга и I I границ самого документа, отображаемого i j браузером. Преимущества вложенных таблиц 1. Гибкая масштабируемость структуры электронного документа в целом 2. Широкие возможности позиционирования отдельных элементов страницы 3. Многоуровневое представление разнородных информационных данных А. Расширенные оформительские возможности 5. Поддержка популярными браузерами И Don*. Рис Пример использования многоуровневых вложенных таблиц

115 106 Часть I. HTML первые шаги Как видно из листинга 4.9, электронный документ состоит из трех таблиц: первая является основной (несущей) и имеет невидимые рамки; две других расположены в ячейках основной таблицы и содержат блок текста и нумерованный список, соответственно. Для удобства восприятия HTML-кода были использованы комментарии, обособляющие структуру каждой из трех таблиц. Ширина ячеек несущей таблицы по 50%, что позволяет даже при изменении размеров окна браузера разделять информацию на две равные части. Для закрепления пройденного материала все описанные теги и параметры, используемые при построении HTML-таблиц, приведены в табл Таблица 4.5. Теги и параметры, используемые для построения таблиц Тег TABLE CAPTION TR TD, TH Описание Основной тег построения структуры таблицы. Определяет наличие и цвет рамки, отступы между границами ячеек и соседними ячейками, тип выравнивания, ширину и высоту таблицы. Задает свойства прорисовки рамок и линеек таблицы Тег заголовка таблицы. Задает тип горизонтального и вертикального выравнивания заголовка таблицы Тег ряда таблицы. Устанавливает следующие свойства для ряда таблицы: тип вертикального и горизонтального выравнивания, ширину и высоту, цвет фона, запрет переноса строки Теги ячейки таблицы. Устанавливает следующие свойства для ячейки таблицы: тип вертикального и горизонтального выравнивания, ширину и высоту, цвет и графическое изображение фона, запрет переноса строки, обьединение соседних ячеек в одну (по горизонтали и вертикали) Параметры BORDER BORDERCOLOR CELLSPACING CELLPADDING ALIGN WIDTH HEIGHT FRAME RULES ALIGN VALIGN ALIGN VALIGN WIDTH HEIGHT BGCOLOR NOWRAP ALIGN VALIGN WIDTH HEIGHT BGCOLOR BACKGROUND NOWRAP ROWSPAN COLSPAN

116 Глава 4. Таблица - основа вашего HTML-документа 107 Таблица 4.5 (окончание) Тег Описание Параметры COL Тег группировки табличных данных. Задает количество соседних столбцов и единый тип горизонтального выравнивания для всех столбцов COLGROUP Тег группировки табличных данных, осуществляющий логическое объединение столбцов с информацией. THEAD Задает количество соседних столбцов и единый тип горизонтального и вертикального выравнивания для всех столбцов Тег верхнего колонтитула таблицы TBODY Тег основного (содержательного) колонтитула таблицы TFOOT Тег нижнего колонтитула таблицы SPAN ALIGN SPAN ALIGN VALIGN

117 Глава 5 Добавляем графику Роль графики Как интересный журнал или проспект теряет в своей привлекательности без цветных иллюстраций, так любой HTML-документ кажется сухим и невзрачным без использования графики. Значение графических изображений в аспекте создания электронных документов нельзя переоценить - реклама и коммерческие предложения компаний и юридических лиц становятся более выразительными и яркими, иллюстрации и схемы способны превратить скучный перечень услуг или расценок в интересный информативный материал, любой художественный рассказ или произведение будет восприниматься легче и естественнее при наличии картинок или фотографий. Однако всегда и во всем следует помнить о чувстве меры. HTML-документ, перенасыщенный иллюстративным материалом, будет неоправданно отвлекать внимание пользователя от истинного содержания страницы информации. К тому же чрезмерное увлечение графикой влечет за собой увеличение времени загрузки электронного документа, что может сказаться на общей оценке посетителем вашего интернет-ресурса. Также необходимо четко и внимательно отбирать графический материал для последующего размещения в HTML-документах, следить за его соответствием тематике вашего интернет-ресурса в целом и содержанию отдельной страницы в частности. Следует помнить о том, что графика призвана привлечь внимание посетителя, заострить его интерес на конкретных моментах или формулировках, но ни в коем случае не должна отвлекать от основного содержания Web-сайта. Разумеется, данное утверждение имеет ряд оговорок и исключений из правил (например, в отношении компьютерных галерей и прочих ресурсов, где ставка сделана именно на графические изображения). И, тем не менее, в большинстве случаев необходимо строго следить за количеством графики на ваших HTML-документах.

118 Глава 5. Добавляем графику 109 Характеристика графических стандартов Любая графическая информация может храниться в двух основных форматах векторном и растровом. Графический файл векторного формата состоит из отдельных математических данных, которые с помощью отрезков прямых, называемых векторами, отображают графический объект на экране. Преимуществом векторной графики является независимость качества изображения от масштаба рисунка, а минусом недостаточная возможность для работы с фотографическими изображениями. Примером файлов векторного формата могут служить CDR (CorelDRAW), AI (Adobe Illustrator), FH (FreeHand), SVG (Scalable Vector Graphics) и др. Векторный формат распространен, в основном, в полиграфии, предпечатной подготовке высококачественных документов и т. д. Отображение файла растрового формата основано на обработке минимальной единицы рабочей области экрана точки (пиксела). Изменение размеров растровых изображений может существенно повлиять на их качество, т. к. масштабирование осуществляется без вмешательства каких-либо сложных математических операций. Наиболее распространенными растровыми форматами являются PSD (Photoshop Document), BMP (Bitmap Image) и др. Форматом, избранным для демонстрации Web-графики в Интернете, стал растровый формат, поскольку относительно малый размер мониторов пользователей не позволяет выводить на экран изображения больших размеров. На сегодняшний день для создания графических изображений, предназначенных для размещения в электронных документах, используются три основных стандарта: GIF, JPEG и PNG. Рассмотрим каждый из них немного подробнее. GIF (Graphics Interchange Format) Стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов не превышает числа 256. Среди других характеристик стандарта GIF можно назвать возможность построчного чередования служебных заголовков блоков с данными файла, внесения комментариев, реакцию на пользовательские действия (перемещение курсора и т. д.), создание прозрачного фона и поддержку режима анимации кадров. Две последние характеристики стандарта GIF сегодня являются основополагающими и повсеместно используемыми от создания навигационных меню до интернет-рекламы. К сожалению, такое замечательное свойство, как реакция на манипуляции пользователя, не реализовано в интернеттехнологиях, поскольку оно не поддерживается браузерами.

119 110 Часть I. HTML первые шаги На сегодняшний день стандарт GIF по-прежнему является самым используемым и популярным в ходе разработки электронных документов благодаря следующим преимуществам: П наличие специального алгоритма сжатия данных позволяет подвергать компрессии файлы GIF без изменения качества изображения; П способность чередования кадров анимированного GIF-файла приводит к тому, что в пределах одного рекламного носителя возможно разместить большой объем информации; П по сравнению со статичными изображениями анимированный GIF-объект привлекает большее внимание со стороны пользователей; П поддержка прозрачности позволяет экономить на исходном размере файла. JPEG (Joint Photographic Experts Group) Как видно из расшифровки аббревиатуры стандарта JPEG, он был создан специальной группой экспертов в области фотографии и предназначался для хранения графических изображений с большой глубиной цвета. Профиль деятельности разработчиков JPEG внес свой вклад в позиционирование стандарта в основном он использовался (и по сей день используется) для передачи фотографических изображений. В стандарте применен специальный алгоритм компрессии данных при повышении степени сжатия качество изображения ухудшается за счет изъятия "ненужной" информации (в отличие от алгоритма сжатия GIF, который позволяет производить подобную процедуру практически без потерь). На сегодняшний день стандарт JPEG занимает второе место по популярности после GIF и используется для создания изображений, в композицию которых входят фотографии, сложные коллажи (компьютерный монтаж нескольких разнородных графических объектов), объекты, подвергнутые действию различных графических эффектов и фильтров. PNG (Portable Network Graphics) Стандарт разрабатывался с учетом особенностей Интернета. PNG вобрал в себя наиболее сильные стороны двух предыдущих стандартов и исключил их недостатки. В стандарте реализованы следующие средства: П прозрачный фон; О построчное чередование; О сжатие без потерь и др.

120 Глава 5. Добавляем графику 111 Однако PNG, несмотря на свои преимущества, не получил такого признания пользователями Интернета, как стандарты GIF и JPEG (одна из возможных причин отсутствие поддержки анимации). В Сети можно встретить графические файлы с расширением png, но достаточно редко и только в специфических направлениях интернет-отрасли (например, работа программного модуля GD::Graph, автоматически генерирующего графики и диаграммы для систем статистики, рейтинга и пр.). Вставка графики в HTML-документ Прежде чем перейти к рассмотрению правил встраивания графики в HTMLдокументы, следует напомнить, что графические изображения также могут быть включены в основной раздел документа, описываемый тегомконтейнером <BODY>, а также в качестве фона ячеек таблицы: <BODY BACKGROUND="bg.gif"> <TABLE> <TR> <TD BACKGROUND="bg2.jpg">TeKCT</TD> </TR> </TABLE> Описание графики в HTML-документе Для вставки графических изображений в HTML-документы используется специальный тег <IMG>, который не требует наличия закрывающего тега. Параметры тега <IMG> Рассмотрим существующие параметры этого тега. Параметр SRC Единственный параметр, который является обязательным для указания, - это SRC, который выполняет важную роль в графическом изображении на странице он задает путь (относительный или абсолютный) к рисунку. Формат указания следующий: <IMG SRC="picture.gif"> Следует заметить, что в данном случае браузер станет искать файл "picture.gif" в том же каталоге, где находится и HTML-документ, ссылающийся на этот рисунок. Обычно для графических изображений выделяется отдельная папка: <IMG SRC="images/picture.gif">

121 112 Часть I. HTML первые шаги Параметр BORDER Параметр BORDER предназначен для отображения вокруг рисунка рамки определенной толщины (рис. 5.1). Толщина указывается в пикселах, по умолчанию (если параметр пропущен) рамка браузером не отображается: <IMG SRC="images/clock.gif" BORDER="5"> <* Рамка вокруг рисунка - Microsoft Internet Explorer j gle Edit View Favorites lools Help ГТГ!г*Г

а":ж.ж],,ж!.ш : Back Forward Stop Refresh Home ; Search Favorites \& Done [й My Computer" Рис Пример рамки вокруг рисунка _l В случае если графическое изображение является гиперссылкой, браузер автоматически отобразит вокруг рисунка рамку толщиной в 1 пиксел (кроме этого, некоторые браузеры делают рамку определенного цвета, обычно синего). Поэтому, если никакой необходимости в рамке вокруг графического указателя ссылки нет, следут дать браузеру соответствующую инструкцию: <А HREF="clock.html"XIMG SRO"images/clock. gif" BORDER="0"x/A> Параметры WIDTH и HEIGHT По аналогии с другими HTML-элементами (табличные ячейки, горизонтальные разделители) параметры WIDTH и HEIGHT используются для определения размеров графического изображения, встраиваемого в электронный документ (ширина и высота, в пикселах): <IMG SRC="images/clock.gif" BORDER="1" WIDTH="300" HEIGHT="201">

122 Глава 5. Добавляем графику 113 Использование этих параметров не обязательно, однако рекомендуется по двум основным причинам: П во время загрузки изображения браузер сразу зарезервирует на странице столько места, сколько необходимо для отображения рисунка. Многие разработчики пренебрегают этим правилом, в результате чего при загрузке под рисунок изначально отводится слишком мало места, а потом страница начинает "скакать", поскольку браузер одновременно пытается в это пространство вместить реальные размеры файла; П иногда размеры изображения слишком велики и для его просмотра "в полный рост" требуются полосы прокруток. В таком случае, если необходимо поместить рисунок в окне браузера, не прибегая к помощи полос прокруток, то можно в HTML-коде указать пропорционально уменьшенные размеры этого рисунка. Размещая на странице уменьшенный вариант рисунка, обязательно помните о необходимости пропорционального изменения размеров, в противном случае при нарушении соотношения этих размеров, изображение получится искаженным и неприглядным (рис. 5.2). Например нарушения пропорций изображения - Microsoft. ВИЗЕ j File Edit View Favorites Tools Help 'Back ; эт ar. Slop Refresh Home ; Search Favorites S]Done i! My Computer - " I Рис Пример нарушения пропорций изображения Корректно изменить пропорции рисунка можно следующими способами: П указать в теге <IMG> измененным только один из параметров (либо WIDTH, либо HEIGHT). Браузер самостоятельно изменит второй параметр, сохраняя пропорцию;

123 114 Часть I. HTML первые шаги П открыть рисунок в любом растровом редакторе (например, Adobe Photoshop) и изменить пропорции программным образом. Что касается пропорционального увеличения графических изображений в HTML-документах, то такой подход не рекомендуется по причине особенностей самого растрового формата (ухудшение качества изображения при увеличении его размеров). Однако если степень увеличения незначительна (в среднем на 5 10 пикселов), как правило, визуально качество остается неизменным. В завершение разговора о параметрах WIDTH и HEIGHT следует сказать, что допустимо указание размеров графического изображения в процентах. Этот формат записи дает команду браузеру растянуть или сузить рисунок в соответствии с размерами окна страницы. Но такой подход не рекомендован и может применяться только в исключительных случаях и только в отношении однородных рисунков, поскольку некоторые браузеры либо не поддерживают подобное обозначение размеров, либо выводят рисунки некорректно. Параметр ALIGN Параметр ALIGN предназначен для определения типа выравнивания рисунка относительно текста и прочих элементов электронного документа. Существующие значения параметра ALIGN представлены в табл Таблица 5.1. Значения параметра ALIGN Значение LEFT RIGHT ТОР ТЕХТТОР MIDDLE ABSMIDDLE BOTTOM BASELINE ABSBOTTOM Функция Текст обтекает рисунок по правому краю (изображение слева) Текст обтекает рисунок по левому краю (изображение справа) Верхний край рисунка выравнивается по самому высокому элементу строки Верхний край рисунка выравнивается по самому высокому текстовому элементу строки Выравнивание середины рисунка по базовой линии строки Выравнивание середины рисунка по середине строки Выравнивание нижнего края рисунка по базовой линии строки Выравнивание нижнего края рисунка по базовой линии строки Выравнивание нижнего края рисунка по нижнему краю строки Следует заметить, что некоторые популярные браузеры (например, Netscape) интерпретируют значения ABSMIDDLE и ABSBOTTOM как, соответственно, MIDDLE и BOTTOM. Internet Explorer корректно отображает все приведенные в табл. 5.1 значения.

124 Глава 5. Добавляем графику 115 Основное же различие между значениями нижнего края и базовой линии заключается в особенностях некоторых букв алфавита и прочих символов. Нижний край это крайняя точка текстового блока, а базовая линия проходит по нижней части строки текста без учета фрагментов текста, выходящих за строку. Другими словами, при наличии в тексте букв "у", "р", "q", "g" и т. п. нижняя часть этих символов будет определяться значением ABSBOTTOM, а часть букв на уровне запятой в предложении значением BOTTOM или BASELINE. Примеры выравнивания рисунков приведены соответственно в листинге 5.1 и на рис Листинг 5.1. Примеры выравнивания рисунков <HTML> <HEAD> <Т1ТЬЕ>Примеры выравнивания рисунков</т1тье> </HEAD> <BODY BGCOLOR="IFFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> <IMG SRC="brush.jpg" ALIGN="left" BORDER="1" WIDTH="100" НЕ1СНТ="67"><В>Выравнивание текста по правому краю рисун- Ka</B><BR>CT3HflapT GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю, однако нельзя сказать, чтобы это являлось большим недостатком. Среди других черт стандарта GIF можно назвать возможность построчного чередования, внесение комментариев, реакцию на пользовательские действия, создание прозрачного фона и поддержку режима анимации кадров. <HR> <IMG SRC="brush.jpg" ALIGN="right" BORDER="1" WIDTH="100" НЕ1СНТ="б7"ХВ>Выравнивание текста по левому краю phcyhka</b><br>crahflapt GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю, однако нельзя сказать, чтобы это являлось большим недостатком. Среди других черт стандарта GIF можно назвать возможность построчного чередования, внесение комментариев, реакцию на пользовательские действия, создание прозрачного фона и поддержку режима анимации кадров. <HR> <В>Выравнивание этого предложения <IMG SRC="brush.jpg" ALIGN="top" BORDER="1" WIDTH="100" HEIGHT="67"> по верхнему краю рисунка</в> </BODY> </HTML>

125 116 Часть I. HTML первые шаги Выравнивание текста по правому краю рисунка Стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю, однако нельзя сказать, чтобы это являлось большим недостатком. Среди других черт стандарта GIF можно назвать возможность построчного чередования, внесение комментариев, реакцию на пользовательские действия, создание прозрачного фона и поддержку режима анимации кадров. Выравнивание текста по левому крап рисунка Стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю, однако нельзя сказать, чтобы это являлось большим недостатком. Среди других черт стандарта GIF можно назвать возможность построчного чередования, внесение комментариев, реакцию на пользовательские действия, создание прозрачного фона и поддержку режима анимации кадров. Выравнивание этого предложения по верхнему краю рисунка ;.SJMy Computer" Рис Примеры выравнивания рисунков Как видно из примеров, все типы выравнивания условно можно разделить на две группы: П выравнивание относительно края окна документа (значения LEFT и RIGHT); G выравнивание относительно текущей строки текста (все остальные значения). Параметры HSPACEvt VSPACE Параметры HSPACE и VSPACE определяют размер горизонтального и вертикального отступов от встраиваемого изображения до текста. Формат записи значений в пикселах. По умолчанию значения обоих типов отступа равны нулю (листинг 5.2, рис. 5.4). i Листинг 5.2. Отступы между рисунком и текстом <HTML> <HEAD> <Т1ТЬЕ>Отступы между рисунком и текстом</т1тье> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue">

126 Глава 5. Добавляем графику 117 <IMG SRC="brush.jpg" ALIGN="left" BORDER="1" WIDTH="100" НЕ1СНТ="67"><В>Отступов между текстом и изображением нет</вхвю>стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю, однако нельзя сказать, чтобы это являлось большим недостатком. Среди других черт стандарта GIF можно назвать возможность построчного чередования, внесение комментариев, реакцию на пользовательские действия, создание прозрачного фона и поддержку режима анимации кадров. <HR> <IMG SRC="brush.jpg" ALIGN="left" BORDER="1" WIDTH="100" HEIGHT="67" HSPACE="20" VSPACE="20"XB>OTCTyn между текстом и изображением равен 20 пикceлaм</b><br>cтaндapт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю, однако нельзя сказать, чтобы это являлось большим недостатком. Среди других черт стандарта GIF можно назвать возможность построчного чередования, внесение комментариев, реакцию на пользовательские действия, создание прозрачного фона и поддержку режима анимации кадров. </BODY> </HTML> -'Л! СИ с гулы между рисунком и текстам - Microsoft Internet Explorer : Edit tew Favorites look ; Це1р н, Back Slop Refresh Home Search Fa»oiites Histaji Mail Size Flint Edit Отступов между текстом и изображением нет Стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю, однако нельзя сказать, чтобы это являлось большим недостатком. Среди других черт стандарта GEF можно назвать возможность построчного чередования, внесение комментариев, реакцию на пользовательские действия, создание прозрачного фона и поддержку режима анимации кадров. Отступ между текстом и изображением равен 20 пикселам Стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета), Надо заметить, что в изображении этого стандарта количество цветов ограничивается всего лишь 256-ю, однако нельзя сказать, чтобы это являлось большим недостатком. Среди других черт стандарта GIF можно назвать возможность построчного чередования, внесение комментариев, реакцию на пользовательские действия, создание прозрачного фона и поддержку режима анимации кадров. Юром J=JMy Computer Рис. 5,4. Отступы между рисунком и текстом

127 118 Часть I. HTML первые шаги Необходимо обратить внимание на то, что значение, указанное для параметров HSPACE и VSPACE, устанавливается с обеих сторон графического изображения. Параметр ALT Параметр альтернативного текста ALT играет существенную роль в процессе встраивания графики в электронные документы. Изначальное его предназначение заключалось в возможности предоставления пользователям неграфических браузеров информации о рисунке, которая появляется при наведении на графический объект курсора мыши. Однако сегодня понятие "неграфического браузера" стало практически неактуальным, поэтому функция параметра ALT сильно расширилась и повсеместно используется для вывода смысловых подсказок для значимых графических элементов. Для не имеющих какой-либо смысловой нагрузки рисунков альтернативный текст указывать не следует. Например, для рисунка "services.gif", демонстрирующего образ услуг коммерческой компании, будет уместным добавить альтернативный текст "Наши услуги". Для прозрачной распорки, размещенной в пустой табличной ячейке, совершенно бессмысленно писать что-то вроде "Прозрачная графическая распорка". Использование альтернативного текста при не сгружен. н К '. " '

File Edit Sew Favorites Tools Help, Back Stop Refresh Home : Search Favorites Стандарт GIF был разработан компанией CompuServe Inc. для передачи графической информации в пределах определенных компьютерных сетей (разработка велась еще до появления Интернета). Надо заметить, что в изображении этого стандарта количеств о цветов ограничивается всего лишь 256-ю, однако нельзя сказать, чтобы это являлось большим недостатком. Среди других черт стандарта GIF можно назвать возможность построчного чередования, внесение комментариев, реакцию на пользовательские действия, создание прозрачного фона и поддержку режима анимации кадров. ItJDone: IjJMyCoi m Рис Использование альтернативного текста при незагруженном изображении

128 Глава 5, Добавляем графику 119 Для незначимых графических изображений обычно задается следующая конструкция: <IMG SRC="images/spacer.gif" WIDTH="5" HEIGHT="5" ALT=""> Таким образом, даже если ваш HTML-документ будут просматривать в текстовом редакторе (к примеру, Lynx), композиция страницы сохранится, а пользователю будет выведена информация о наличии рисунка. Также указывать альтернативный текст ALT рекомендуется в случае, если изображение по каким-либо причинам не загрузилось. Подсказка, отображенная на месте рисунка, даст пользователю хотя бы минимальную информацию о незагруженном объекте (рис. 5.5). Параметр TITLE Данный параметр, по сути, выполняет функцию, аналогичную ALT, и предназначен для отображения подсказок к рисункам. Различие в том, что при незагруженном изображении параметр TITLE не предоставит пользователю никакой информации для этого существует параметр альтернативного текста ALT. Следует отметить, что последние версии некоторых браузеров (Opera, Netscape) не отображают значение поля ALT при наведении на изображение курсора мыши. Для закрепления материала все рассмотренные параметры тега <IMG> приведены в табл Таблица 5.2. Параметры тега <IMG> Параметр SRC BORDER WIDTH HEIGHT ALIGN HSPACE VSPACE ALT TITLE Функция Указание пути к встраиваемому изображению Указание рамки рисунка Определение ширины изображения Определение высоты изображения Указание типа выравнивания рисунка Определение горизонтального отступа между рисунком и текстом Определение вертикального отступа между рисунком и текстом Указание альтернативного текста Создание информационной подсказки к изображению

129 120 Часть I. HTML первые шаги Карты-изображения На многих HTML-документах сегодня с успехом используются так называемые карты-изображения (Imagemaps), которые представляют собой обычные графические файлы (как правило, стандарта GIF или JPEG) с привязанными к различным областям этого изображения гиперссылками. Такие области описываются специальными координатами, в соответствии с которыми браузер переносит пользователя на нужную страницу. О правилах конфигурации карт-изображений будет рассказано чуть позже, а сейчас рассмотрим преимущества и недостатки карт-изображен и и как средства навигации (перемещения) по HTML-документам. Преимущества и недостатки карт-изображений К основным преимуществам можно отнести следующие моменты: П более удобного средства, чем карта-изображение, для создания сложных навигационных меню (в особенности географических, топографических и прочих карт) не найти. Процесс создания и пространственного размещения на странице нескольких десятков кнопок для обозначения, например, всех областей Российской Федерации, чрезвычайно сложен и потребует больших временных затрат; О использование карты-изображения в качестве навигационных меню на каждой странице интернет-проекта может существенно сократить время загрузки электронных документов и сэкономить место на Web-сервере; О для использования карты-изображения один рисунок; потребуется изготовить всего П использование карт-изображений позволит разработчику HTML-документов реализовать самые смелые дизайнерские задумки. Можно создавать графические объекты любой сложности и формы, не задумываясь об их пространственном размещении на странице, что способно придать интернет-ресурсу оригинальность и сделать его более запоминающимся для посетителей. Однако без некоторых недостатков также не обошлось: П графические заготовки для карт-изображений, имеющих большой размер файла, могут заметно увеличить время загрузки электронных документов по сравнению с обычными текстовыми ссылками; П для посетителей, которые экономят свое время пребывания в Интернете, переход к HTML-документам по ссылкам, указанным в конфигурации карты-изображения, не позволяет отслеживать страницы, на которых они уже побывали, поскольку гиперссылки карт-изображений не изменяют цвет после посещения их пользователем;

130 Глава 5. Добавляем графику 121 П при наведении курсора мыши на определенную активную область картыизображения в серверном варианте, в статусной строке браузера отображается не адрес электронного документа, а координаты области, которые хранятся в конфигурационном файле на самом Web-сервере; П если параллельно с картой-изображением не предусмотрено дублирующее текстовое меню, то посетители, которые по каким-либо причинам не могут загрузить графику или отключили ее в своем браузере, останутся не у дел. Область применения В принципе, карты-изображения можно применять в самых разнообразных областях компьютерных технологий. Наиболее распространенными из них являются: О геоинформационные и картографические системы; П баннерные рекламные сети и системы электронной коммерции; П электронный и сотовый банкинг, платежные системы; П игровые трехмерные и двумерные интернет-ресурсы; П корпоративные серверы; П интернет-ресурсы широкого профиля. Как видно из списка, диапазон применения карт-изображений может охватывать практически все отрасли современных технологий. Конфигурация карт-изображений Прежде всего следует сказать, что карта-изображение не является принципиально новой технологией. Однако раньше их применение было осложнено рядом причин: П ранние версии некоторых браузеров (например, Netscape Navigator 1.x) не поддерживали технологию карт-изображений; П часть Web-серверов не позволяло использовать графику для создания карт-изображений вообще или предоставляло такую возможность только лишь профессиональным разработчикам или крупным компаниям; П раньше был возможен единственный вариант реализации картизображений серверный, который подразумевал управление переходом на соответствующий документ исключительно со стороны сервера. Сегодня существует клиентский вариант карт-изображений, что во многом облегчает применение данной технологии, которую в настоящее время поддерживает большинство современных браузеров. Сама карта-изображение представляет собой обыкновенный графический рисунок, а ее конфигурация определяется в виде значений координатных 5 Зак. 863

131 122 Часть I. HTML первые шаги кривых, которые прописываются в HTML-коде. Эти значения указывают активные области изображения и содержат информацию о том, куда следует перейти браузеру после нажатия на одну из этих областей. Активные области могут иметь форму прямоугольника, круга и многоугольника. Также позволительно комбинировать эти три варианта или определять область, расположенную вне активных областей карты-изображения. Типы карт-изображений Как уже было сказано, карты-изображения могут быть реализованы в двух вариантах серверном и клиентском. Рассмотрим подробно каждый из них. Серверный вариант Серверный вариант реализации карты-изображения (Server-Side Imagemap) подразумевает, что документ, в котором прописаны координаты областей, находится на самом Web-сервере, который обязательно должен поддерживать выполнение CGI-сценария. Процесс перехода по гиперссылкам на карте-изображении осуществляется следующим образом. При нажатии на одной из активных областей браузером передаются координаты на сервер, который обращается к специальному конфигурационному файлу. Результат обработки данных возвращается браузеру назад в виде адреса, соответствующего данной активной области, который загружается в окне обозревателя. В случае если конфигурационный файл не содержит данных об искомой активной области, выводится сообщение об отсутствии данного документа. Для того чтобы браузер определил графический объект как картуизображение, необходимо в теге <IMG>, описывающем конфигурацию карты-изображения, указать параметр ISMAP, а файл конфигурации сохранить в формате MAP. Серверный вариант поддерживает два формата реализации картизображений CERN и NCSA. Первый разработан научным центром European Organization for Nuclear Research и предлагает следующую запись координат активных областей: тип_области координаты адрес Значения пар координат разделяются запятой и заключаются в круглые скобки, например: rect (54, 127)(45, 344) В начале конфигурации стоит значение rect (прямоугольное выделение для задания активной области). Другими значениями могут быть: circle (круг). poly (многоугольник) и default (значение по умолчанию).

132 Глава 5. Добавляем графику 123 Формат NCSA разработан центром приложений для суперкомпьютеров National Center for Supercomputing Applications и предлагает несколько иной формат записи конфигурации карт-изображений: тип_области адрес координаты Координаты х, Y тоже разделяются запятыми, но в скобки не заключаются, например: rect 54, , 344 Кроме типов областей, предложенных CERN, данный формат разрешает использование типа point (активизируется та ссылка после нажатия, которая обозначена ближе всего к точке соприкосновения). Клиентский вариант Клиентский вариант позволяет разместить все данные об активных областях карты-изображения в самом HTML-доку менте. В этом случае количество обращений к серверу сильно сокращается, а конфигурировать саму картуизображение можно параллельно с изменением HTML-кода. Размещать файл конфигурации на Web-сервере не нужно -- координаты активных областей указываются в самом документе, куда встроен графический объект для карты-изображения. При использовании клиентского варианта (Client-Side Imagemap) в тег <IMG> добавляется параметр USEMAP. В связи с тем что клиентский вариант на сегодня распространен более широко и к тому же более доступен, подробно рассмотрим процесс конфигурации карты-изображения на примере Client-Side Imagemap. Для определения конфигурации активных областей карты-изображения используется специальный тег-контейнер <МАР> с параметром NAME, который должен соответствовать свойству параметра USEMAP в теге <IMG>. Необходимо отметить, что описание карты-изображения следует сразу же после указания тега рисунка <IMG>: <IMG SRC="picture.gif" USEMAP="#mymap"> <MAP NAME="mymap"> Координаты активных областей. </MAP> Описание активных областей карты-изображения осуществляется с помощью тега <AREA>, не требующего за собой закрывающего тега. Тег <AREA> может включать следующие параметры: П SHAPE - - определяет форму активной области (значения такие же, как в формате CERN серверного варианта); П COORDS -- осуществляет выбор конкретной активной области и содержит значения пар координат. Начало координат размещается в верхнем левом

133 124 Часть I. HTML первые шаги углу графического изображения, которому соответствует начальное значение О, О; П TARGET - - используется при работе с фреймами (рассмотрению фреймов посвящена глава 6); П ALT действие параметра аналогично использованию его в обычных гиперссылках на основе графических указателей (альтернативный текст); П HREF -- наличие гиперссылки для данной области; П NOHREF -- отсутствие гиперссылки для данной области. Пример карты-изображения (клиентский вариант) приведен соответственно на рис. 5.6 и в листинге 5.3. О Пример карты-изображения (клиентский вариант) - Micr. HuDEal j File Edit View Favorites Tools Help " $«::Д "! $"' & $ Г Ф si Back :' '.. -'-. Stop Refresh Home ; Search Favorites \Щ My Computer J Рис Пример карты-изображения (клиентский вариант) ; Листинг 5.3. Пример карты-изображения (клиентский вариант) <нтмь> <HEAD> <Т1ТЬЕ>Пример карты-изображения (клиентский вариант)</title> </HEAD> <BODY BGCOLOR-"#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO' VLINK="blue">

134 Глава 5. Добавляем графику 125 <IMG SRC="box.jpg" BORDER="1" WIDTH="300" HEIGHT="234" ALT="" USEMAP="#gift"> <MAP NAME="gift"> <AREA SHAPE="rect" COORDS="60, 26, 222, 98" HREF="bantik.html" АЬТ="Вантик"> <AREA SHAPE="rect" COORDS="63, 88, 135, 188" HREF="left.html" А1/Г="Левая сторона"> <AREA SHAPE="rect" COORDS="151, 102, 225, 200" HREF="right.html" АЬТ="Правая сторона"> </MAP> </BODY> </HTML> На рис. 5.6 видна выделенная при нажатии активная область картыизображения, ведущая по гиперссылке на документ "bantik.html". В завершение следует добавить, что возможно совмещение серверного и клиентского вариантов карты-изображения. В этом случае в теге рисунка <IMG> необходимо указывать оба параметра ISMAP и USEMAP. При этом следует помнить, что параметр USEMAP будет доминирующим. Такой комбинированный вариант можно применять во избежание трудностей, связанных с отсутствием поддержки данной технологии некоторыми браузерами (хотя таких считанные единицы). Если браузер не поддерживает Client-Side Imagemap, то параметр USEMAP проигнорируется, а реализован будет серверный вариант (при наличии конфигурационного файла на сервере и поддержке последним CGI). Краткий обзор программ по работе с графикой В этом разделе вашему вниманию представлен краткий обзор наиболее популярных и удобных программ для работы с графическими изображениями - графических редакторов, аниматоров, программ для просмотра и управления графическими изображениями, а также утилитами по созданию картизображений. Графические редакторы Adobe Photoshop 7 Мощный и многофункциональный редактор растровой графики от компании Adobe Systems ( имеет полный спектр всех необходимых инструментов по обработке и ретушированию фотографических изображений, созданию потрясающей Web-графики и анимации.

135 126 Часть I. HTML первые шаги В состав программного пакета входят две программы Adobe Photoshop (ориентация на работу с фотоизображениями цифрового качества и разработку эффектной Web-графики) и Adobe ImageReady (оптимизация графики, подготовка изображений для размещения в Интернете, разработка анимации и карт-изображений). Это достаточно сложный для освоения редактор, больше подходящий пользователю среднего уровня. CorelDRAW Graphics Suite 11 Всемирно известный программный пакет по работе как с векторной, так и с растровой графикой от компании Corel Corporation ( CorelDRAW Graphics Suite предоставляет широкие возможности по разработке графических изображений, фоторедактированию и векторной анимации. В состав пакета входят три программы CorelDRAW (создание и редактирование векторной графики, полиграфия и предпечатная подготовка высококачественных иллюстраций), Corel PhotoPaint (работа с растровой графикой, фотоизображениями, создание и оптимизация Web-графики) и Corel R.A.V.E. (создание векторной анимации для HTML-документов). Это также весьма сложный для обычного пользователя программный пакет. Ulead PhotoImpact 8 Более простой и понятный для начинающего пользователя графический редактор от компании Ulead Systems ( Условно его можно назвать облегченной версией Adobe Photoshop: программа обладает достаточно широкими функциональными возможностями, развитым инструментарием и интуитивно понятным рабочим интерфейсом. Ulead PhotoImpact предназначен для создания и редактирования растровой графики, оптимизации и подготовки изображений с целью последующего размещения в Интернете. Содержит большой набор средств обработки и корректировки фотоизображений, библиотеку текстур, шаблонов и прочего полезного материала. JASC PaintShop Pro 7 Компания JASC Software ( также выпускает программный продукт, больше ориентированный на начинающего или среднего пользователя. Растровый редактор JASC PaintShop Pro умеет работать с фотоизображениями, позволяет создавать и оптимизировать деловую, презентационную и Web-графику, содержит широкий набор эффектов, инструментов рисования и редактирования, включает программу Animation Shop для разработки анимационных роликов.

136 Глава 5. Добавляем графику 127 Аниматоры Ulead GIF Animator 5 Мощная программа разработки анимации стандарта GIF от компании Ulead Systems ( Содержит удобный рабочий интерфейс, широкий набор средств по оптимизации анимационного процесса. Включает библиотеку эффектов, а также возможность предпросмотра готовых роликов. CoffeeCup GIF Animator 6.2 Очень простой и удобный аниматор от компании CoffeeCup Software ( Программа имеет многочисленные награды, врученные на крупнейших зарубежных серверах программного обеспечения. Среди них такие, как ZDNet Editors' Pick, CNET Downloads Pick, Tucows и др. Такое внимание со стороны общественности не случайно CoffeeCup GIF Animator включает большой спектр возможностей для создания анимации. Поддержка технологии "перетаскивания" изображений (Drag and Drop), одновременный просмотр всего ролика и его отдельных кадров, экспортирование и импортирование видеофайлов формата AVI, генерация HTML-кода для вставки готовой анимации в электронный документ и многое другое. Просмотрщики графических файлов ACDSee 5.0 Одна из самых популярных во всем мире программ для просмотра и управления графическими изображениями от компании ACDSystems ( ACDSee предоставляет пользователю широкий диапазон возможностей для просмотра, редактирования, ретуширования и печати фотографических изображений. Поддержка большого количества растровых форматов, гибкие средства конвертирования, создание фотогалерей и слайдшоу, интеграция с периферийными устройствами (сканер, цифровая камера), развитые возможности предпросмотра и управления файлами практически любого формата. XnView 1.5 Более простой и быстрый просмотрщик графических файлов от французского разработчика Пьера Гугеле ( Среди функциональных возможностей XnView особенно следует выделить следующие: свыше 300 различных форматов файлов для импортирования и около 40 для экспортирования, управление графическими файлами (копирование, перемещение и т. д.), ретуширование фотоизображений, применение

137 128 Часть I. HTML первые шаги эффектов, полноэкранный режим, создание слайдшоу и галерей изображений, многоязыковая поддержка и многое другое. Программы по созданию карт-изображений Sausage Image Mapper 1.23 Простая утилита по созданию карт-изображений от компании Sausage Software ( Выбор адреса гиперссылки, работа с областями выделения (создание, редактирование, удаление) и пр. CoffeeCup Image Mapper Еще один редактор карт-изображений от компании CoffeeCup Software ( CoffeeCup Image Mapper имеет встроенный мастер карт-изображений, позволяет просматривать HTML-код и тестировать работу создаваемых карт-изображений, поддерживает основные области выделения, имеет расширенные средства работы с буфером обмена при редактировании активных областей и др.

138 Глава 6 HTML-документы на основе фреймов Понятие фрейма Фрейм (от англ, "frame" рамка, каркас, кадр) представляет собой отдельное рабочее окно браузера, разделенное еще на несколько различных по параметрам и размеру фреймам. Совокупность таких окон принято называть фреймовой структурой. Чаще всего такие структуры называют просто окнами (или же в соответствии с родным названием фреймы). Фреймовая структура позволяет разбивать основную область на любое число составляющих подфреймов (подобластей), причем по необходимости определяя внутреннее поведение подфреймов. Каждый фрейм это не что иное, как отдельный HTML-документ, загружающийся браузером в предназначенном для него окне. Таким образом HTML-документ, созданный на фреймовой основе, является набором взаимосвязанных электронных документов, параметры и свойства которых определяются настройками всей фреймовой структуры. Впервые возможность отображения фреймов была реализована компанией Netscape в одноименном браузере версии 2.0. Но ничего замечательного первоначальный вариант поддержки подобной структуры не предлагал своим пользователям. Однако уже с выходом версии 3.0 в браузере Netscape появился ряд нововведений, расширивших диапазон параметров основных тегов описания фреймов. Компания Microsoft тоже не тратила время впустую и, решив потеснить Netscape на перспективном рынке браузеров, выпустила летом 1996 года свой новый продукт Microsoft Internet Explorer 3.0, который поддерживал практически все основные расширения Netscape и к тому же предполагал реализацию так называемых плавающих фреймов. Далее и та и другая компания старались покорить пользователя посредством расширения возможностей фреймовых структур, которые поддерживались

139 130 Часть I. HTML первые шаги только собственными браузерами. К сожалению, и на сегодняшний день не всегда можно быть уверенным в том, что электронный документ, созданный с применением многооконной (фреймовой) структуры, одинаково корректно отобразится в браузерах обеих компаний. Тем не менее, в настоящее время фреймы получили достаточное распространение и представляют собой еще один вариант системы навигации интернет-ресурса. Области применения фреймов Диапазон применения фреймов не настолько широк как, например, у картизображений или меню навигации в виде обыкновенных текстовых гиперссылок. Чаще всего прибегают к фреймовой структуре в следующих случаях: П создание неподвижной или прокручиваемой навигационной панели управления; П одновременное отображение информации в нескольких местах; П постоянное визуальное присутствие определенного текстового, графического или иного объекта; П разработка Web-интерфейса для онлайн-игр. Рассмотрим подробнее каждую из названных областей применения. Панель навигации Независимо от типа интернет-ресурса (корпоративный сервер, персональная страница, общественная организация и т. д.) в последнее время стало весьма популярным применение фреймов для создания привлекательных и удобных навигационных панелей (меню). Эти панели могут быть статичными (т. е. не зависящими от действий посетителя) и динамическими, когда какоелибо действие со стороны пользователя (нажатие комбинации клавиш или на кнопку мыши и пр.) приводит к различным по виду и масштабу изменениям, начиная с замены внешнего вида навигационных кнопок (эффект RollOver/MouseOver) и заканчивая исполнением сложных программных сценариев. Такая реализация фреймов удобна прежде всего тем, что она позволяет посетителю перемещаться по сайту и независимо от его месторасположения (двадцать страниц он пролистал или всего одну) постоянно иметь перед глазами панель управления с перечнем всех или основных разделов сайта. Реализовать такую панель управления можно разными способами: П в главном фрейме обозначить только основные разделы Web-сайта, а подразделы открывать в другом окне;

140 Глава 6. HTML-документы на основе фреймов 131 П в главном фрейме разместить ссылки на документы подразделов, тогда при нажатии на ссылку конкретного подраздела главный фрейм перезагрузится и откроется расширенный вариант меню; П в главном меню расположить динамическое меню в виде раскрывающегося списка, по нажатию на пункты которого в другом фрейме будет открываться нужный документ. На рис. 6.1 представлен пример меню навигации, составленного на основе фреймовой структуры. раменю навигации на примере фреймовой структуры - Mi. RF5 Щ1 Edit View Favorites Tools Help.. ш а Back Stop Refresh Home р ш. Search Favoriles МЕНЮ НАВИГАЦИИ Ссылка 1 Ссылка 2 Ссылка 3 jf[i Done Содержание первой ссылки Независимо от типа интернетресурса (корпоративный сервер, персональная страница, общественная организация и т.д.), в последнее время стало весьма популярным применение фреймов для создания привлекательных и удобных навигационных панелей (меню), которые могут быть статичными, то есть не зависящими от действий посетителя, и динамическими, когда какое-либо действие со стороны пользователя - ; i '.5J My Computer Рис Меню навигации на примере фреймовой структуры Одновременное отображение информации Иногда бывает необходимо иметь перед глазами одновременно несколько текстовых или иных информационных блоков, расположенных в разных окнах. Например, сравнительные характеристики котировок акций (покупкапродажа), структура книги (главы, разделы, подразделы и соответствующее им содержание), перечень товаров и их разнообразные характеристики и др. Согласитесь, что было бы весьма неудобно и непрактично размещать раздельно документы с данными о покупке и документы с информацией о продаже акций, публиковать электронную версию книги без оглавления, растягивать знакомство с товаром на продолжительное время, включающее

141 132 Часть I. HTML первые шаги переход с одной страницы (название и фирма-производитель) к другой (изображение товара), тем более что подобный переход может состоять еще из нескольких стадий. Все это чревато ослаблением внимания посетителя как потенциального покупателя и потерей интереса к товару. Постоянное визуальное присутствие объекта Иногда разработчики HTML-документов ставят перед собой задачу размещения конкретного объекта на странице таким образом, чтобы он был хорошо виден посетителям независимо от их действий (конечно, в пределах данного Web-сайта). То есть что бы ни делал посетитель переходил из одного раздела в другой, оставлял сообщение в гостевой книге, копировал интересный материал, просматривал документы и т. д., данный объект в визуальном плане всегда должен быть доступен. В качестве таких объектов могут выступать фирменные логотипы, эмблемы, фотографии, рекламные баннеры, навигационные меню, надписи, рубрикаторы и многое другое. Что касается навигационных меню и баннеров, то возможно создание таковых при помощи технологий DHTML и JavaScript, которые позволяют разработчику таким образом определить характеристики меню, чтобы оно всегда было видно пользователю. Например, пользователь немного прокрутил окно вниз меню автоматически тоже опускается чуть-чуть вниз, документ прокручивается вверх движение меню полностью повторяет поведение страницы. Однако не следует забывать о том, что многих такое дрейфующее положение рекламы и меню сильно раздражает, а порой мешает рассмотреть некоторые элементы на самой Web-странице. Аналогичным вариантом реализации эффекта постоянного присутствия объекта на странице будет применение многооконной (фреймовой) структуры. Web-интерфейс для онлайн-игр Наконец, фреймы применяются не только на познавательно-информационных сайтах и коммерческих серверах. С их помощью можно создавать Web-интерфейсы для самых разнообразных игр в режиме онлайн. Преимущества и недостатки фреймов Само собой разумеется, что фреймовая структура, как и любое другое технологическое решение, имеет своих противников и сторонников. Кому-то фреймы не нравятся исключительно из визуальных соображений (нажимаешь в одном месте, а все меняется уже в другом), другим пользователям фреймы не нравятся по ряду технических причин.

142 Глава 6. HTML-документы на основе фреймов 133 Рассмотрим основные преимущества и недостатки применения фреймовых структур. Начнем, как водится, с положительных сторон: П фреймы позволяют экономить на объеме пересылаемых пользователю файлов, поскольку после активизации ссылки изменяется только один фрейм; П фреймы заметно облегчают навигацию по электронным документам благодаря возможности перехода по другим ссылкам в пределах интернетресурса; возможность работы сразу с несколькими информационными блоками в пределах одного окна позволяет экономить время; П использование правил описания фреймовых структур позволяет разработчику HTML-документов как угодно варьировать размеры полей фреймов, что дает более широкий спектр возможностей пространственного размещения объектов. А теперь несколько недостатков фреймов: П некоторые поисковые механизмы не в состоянии индексировать документы с фреймовой структурой или делают это не совсем корректно, что приводит к индексированию не родительского фрейма, как требуется, а одного из его составляющих; П компоновка страниц с фреймами часто выглядит неуклюже и грубо, многие не понимают, как пользоваться его возможностями; П на Web-сайтах, использующих фреймовые структуры, при перемещении назад/вперед в адресной строке ничего не меняется там постоянно указан начальный адрес сайта; П некоторые малоизвестные браузеры (а также ранние версии популярных) при попытке перейти назад к предыдущему документу, который только что просматривался, возвращаются в начало Web-сайта. То же самое происходит, если попробовать обновить страницу с фреймовой структурой. Правила описания фреймов Для описания фреймовых структур в HTML предусмотрен ряд специальных тегов и параметров, которые сейчас и рассмотрим. Тег <FRAMESET> Тег <FRAMESET> является основным тегом-контейнером фреймовой структуры HTML-документа (закрывающий тег обязателен). Особенностью любого электронного документа с фреймами является то, что в HTML-коде отсутствует тегконтейнер <BODY>, тег <FRAMESET> вставляется сразу же после раздела HEAD. Структурный HTML-документ (тот, который определяет структуру фреймов) не может содержать ни тегов форматирования, ни каких-либо HTML-элементов.

143 134 Часть I. HTML первые шаги Тег <FRAMESET> может содержать два основных параметра ROWS и COLS. Параметры ROWS и COLS определяют количество горизонтальных (ROWS) и/или вертикальных (COLS) фреймов. Формат записи значения может быть в пикселах, процентах или относительных единицах, причем число значений соответствует количеству фреймов. Значения записываются через запятую, например: <FRAMESET ROWS="30%, 70%"> В данном примере мы имеем два горизонтальных фрейма, один из которых (верхний) занимает 30% рабочей области окна браузера, а второй (нижний) 70% (общая сумма всегда должна составлять 100%). Запись значений в пикселах не очень удобна ввиду того, что разработчик фреймовой структуры (да и вообще всего HTML-документа) не знает, на каком мониторе и при каком экранном разрешении будет просматриваться его документ. В этом смысле оптимально подходит указание значений в процентном соотношении при изменении размеров окна браузера размеры фреймов будут пропорционально меняться. Формат записи значений в относительных единицах выглядит так: <FRAMESET COLS="*, 2*, 3*"> Символ "звездочки" (*) является одной частью целого числа и осуществляет пропорциональное деление окна браузера на указанное количество фреймов (в нашем случае это три вертикальных фрейма). Чтобы определить дробное число, соответствующее размеру конкретного фрейма, нужно сложить все цифры, стоящие перед символом *, и подставить получившуюся сумму в качестве знаменателя от целого числа. Таким образом: = 6, т. е. первый фрейм занимает 1/6 окна, второй 2/6 (или 1/3) окна, а третий 3/6 (или 1/2) окна браузера (рис. 6.2). Отсутствие цифры перед символом "звездочки" подразумевает значение 1. Язык разметки HTML позволяет для параметров ROWS и COLS задавать смешанные значения, например: <FRAMESET ROWS="50, 50%, *, 3*"> Такая структура включает в себя четыре горизонтальных фрейма: первый строго зафиксирован (50 пикселов), второй занимает 50% от всего размера окна браузера, а два последних фрейма поделят оставшееся пространство в соотношении 1/4 и 3/4. Обязательного порядка для записи смешанных значений не существует, однако рекомендуется в первую очередь указывать фиксированные значения (пикселы), затем проценты, а уже потом относительные единицы. Также в тег <FRAMESET> возможно включать оба параметра ROWS (рис. 6.3): <FRAMESET COLS="40%, 60%" ROWS="*, 2*"> и COLS

144 Глава 6. HTML-документы на основе фреймов 135 ^Разделение фреймовой структуры в формате относите.. File Edit ^iew Favorites Tools Uelp I-' Back Stop Rehesh Home! Search Favorites -zr

ir 1/6 1/3 1/2 i Jij My Computer^ Рис Разделение фреймовой структуры в формате относительных единиц И1 Включение обоих параметров ROWS и COLS во фреймо. ВШЕ31 1 File Edit iiew Favorites Tools tlelp Back Фрейм 1 Slop Refresh Home : Search Favorites d Фрейм 2 1 Фрейм З 1 1 Фрейм 4 1 I"l l^j Done jj/my Computer Рис. 6.З. Включение обоих параметров ROWS и COLS во фреймовую структуру

145 136 Часть I. HTML первые шаги Тег <FRAME> Тег <FRAME> описывает свойства отдельного фрейма, входящего в состав фреймовой структуры. Соответственно, сколько имеется фреймов, столько должно быть и тегов <FRAME>, заключенных внутри тега фреймовой структуры <FRAMESET>. Тег <FRAME>.He требует закрывающего тега и может содержать параметры, которые мы сейчас и рассмотрим. Параметр SRC Параметр SRC указывает путь к HTML-документу, занимающему текущий фрейм: <FRAME SRC="frames/menu.html"> В данном случае браузером во фрейм будет загружен документ «nenu.html". В качестве источника фрейма может быть указан любой допустимый адрес. Также следует помнить, что свойства документа, являющегося составным компонентом фреймовой структуры, определяются в HTML-коде этого документа, а не в пределах конструкций <FRAMESET> или <FRAME>. Параметр NAME Данный параметр присваивает текущему фрейму внутреннее имя, которое используется для взаимодействия между различными фреймами (подробнее изложено в разделе "Взаимодействие между фреймами"этой главы). Параметр SCROLLING С помощью параметра SCROLLING можно управлять полосой прокрутки в отдельном фрейме. Существуют три возможных значения данного параметра: О YES - полоса прокрутки появляется в любом случае. Такое значение не рекомендуется присваивать, поскольку постоянное присутствие этой полосы может негативно сказаться на дизайне всего электронного документа; О NO запрет полосы прокрутки. Прокрутка не появится даже в случае, если содержание документа превышает размер видимого пространства окна браузера. В итоге оставшаяся часть документа будет недоступна пользователю; П дито -- автоматическое появление полосы прокрутки по мере необходимости. Это рекомендуемое значение, оно регулирует прокрутку в зависимости от объема информации в текущем фрейме. Параметр NORESIZE Параметр NORESIZE запрещает ручное изменение пользователем размеров текущего фрейма. Такое изменение возможно при наведении курсора мыши

146 Глава 6. HTML-документы на основе фреймов 137 на границу фрейма, однако в ряде случаев разработчику может потребоваться запретить изменение размеров окон фреймовой структуры. Параметр NORESIZE не требует указания каких-либо значений. Также следует помнить о том, что при наличии данного параметра изменить размеры соседних фреймов тоже будет нельзя. Параметры MARGINWIDTH v\ MARGINHEIGHT Параметры MARGINWIDTH и MARGINHEIGHT предназначены для определения горизонтальных и вертикальных отступов внутри фрейма. Значение указывается в пикселах и является равнозначным для обеих сторон, например: <FRAME MARGINWIDTH="5" MARGINHEIGHT="3"> В данном случае горизонтальный отступ будет равен 5 пикселам, а вертикальный равен 3 пикселам. При указании этих двух параметров необходимо помнить о том, что такие же отступы могут быть определены не только в файле фреймовой структуры, но и непосредственно в HTML-коде документа выбранного фрейма (параметры LEFTMARGIN, RIGHTMARGIN, TOPMARGIN, BOTTOMMARGIN, MARGINWIDTH И MARGINHEIGHT В Т6ГС <BODY>). Тег <NOFRAMES> Возможность работы с фреймами не была предусмотрена спецификацией HTML вплоть до версии 3.2. И это несмотря на то, что многие браузеры данную технологию все же поддерживали. С принятием HTML 4.0 была введена поддержка фреймовых структур, а Консорциум W3C стал рекомендовать использование тега-контейнера <NOFRAMES> (закрывающий тег обязателен), предоставляющего информацию пользователям браузеров, не поддерживающих фреймовую структуру. <NOFRAMES> Этот документ содержит фреймы. </NOFRAMES> Текст, заключенный между двумя тегами <NOFRAMES>, будет показан владельцам таких браузеров, а современные браузеры просто проигнорируют эту информацию. Дополнительные параметры фреймовых структур К дополнительным параметрам фреймовых структур можно отнести параметры, которые поддерживаются не всеми браузерами. Это параметры BORDER (толщина границы между фреймами), FRAMEBORDER (наличие границы между фреймами), BORDERCOLOR (цвет границы фрейма) и FRAMESPACING (отступ между соседними фреймами).

147 138 Часть I. HTML первые шаги В завершение разговора о правилах построения фреймовых структур рассмотрим итоговый пример (рис. 6.4, листинг 6.1). 3 Пример разветвленной фреймовой структуры - Microsoft Internet Explorer ЯЕЗЕЗ fie «И» Favorites lools Це1р ^, '* '. a ; 1з ;^T;jgT :,"'. ф,3. '^v ;$ :. ^ gjj-- ; Back : :, "", Stop Refiesh Home! Saard) Favociles Media HislMy Mail Size F»W. Edit HTML. ЭКСПРЕСС-КУРС Работаем с текстом йспйль»оа»мия и основные рмличия тагов форматирбв*ни1 DIV, SPAN, P. Вмжуальноа :. Краткое оглавление отображения коиментарйа» * HTML-документа. Как работаит гмпарссмлки? Правила ;., уквяания абсйяютмык и относительным гипарссылок а НТМЬ-докуиантах. Введение Ваш первый HTML-документ '.' ' Глава 2: Работаем с текстом 4: Работаем с текстом Структуризация информации, или Зачем нужны HTML-списки Таблица - основа вашего HTMLдокумента Добавляем графику HTML- документы на основе фреймов Звук и видео на вашей странице Ив»*" 1 " '"'"" :: " "" : " ;: г, "": *' Можно с полной уверенностью заявить, что текст занимает далеко на последнее место в структуре HTML-документа. В большинстве случаев мы посещаем интернет- сайты в поисках именно текстовой информации: статей и художественных. 1 произведений, новостей и технической документации и т.п. Поэтому от того, как оформлен текст, как он преподнесен посетителю, зависит многое в судьбе любого J^J Web-сайта. Область работы с текстом в HTML включает в себя большое количество всевозможных тегов, составляющих две основные группы: теги логического форматирования и теги физического форматирования. В группу тегов логического форматирования входят теги, отображающие на экране монитора элементы документа таким образом, как установлено по умолчанию в jrj. : '. . '.. - '. ' I l l '!^My Computer Рис Пример разветвленной фреймовой структуры! Листинг 6.1. Пример разветвленной фреймовой структуры <HTML> <HEAD> <Т1ТЬЕ>Пример разветвленной фреймовой структуры</т1тье> </HEAD> <FRAMESET COLS="30%, 70%" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0"> <FRAME NAME="left" SRC="left.html" SCROLLING="yes" NORESIZE MARGINWIDTH="10" MARGINHEIGHT="10"> <FRAMESET ROWS="*, 2*" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0"> <FRAME NAME="top" SRC="top.html"> <FRAME NAME="bottom" SRC="bottom.html"> </FRAMESET> <NOFRAMES>

148 Глава 6, HTML-документы на основе фреймов 139 Ваш браузер не поддерживает фреймы. </NOFRAMES> </HTML> Пример описывает фреймовую структуру, состоящую из двух вертикальных и двух горизонтальных фреймов. Конструкция <FRAMESET COLS="30%, 70%" FRAMEBORDER="0" FRAMESРАСING="0" BORDER="0"> показывает, что окно браузера поделено на две части: 30% и 70%, соответственно. Следующий за ней тег <FRAME> задает свойства левого фрейма. Правый фрейм разбит еще на два фрейма, на этот раз горизонтальных, для чего дается отдельная конструкция: <FRAMESET ROWS="*, 2*" FRAMEBORDER="0" FRAMESPACING="0" BORDER="0"> После этого посредством тега <FRAME> дается описание двух упомянутых горизонтальных фреймов. Завершает код файла фреймовой структуры тегконтейнер <NOFRAMES>, предназначенный для браузеров, не поддерживающих фреймы. Для закрепления пройденного материала основные теги фреймовых структур и их параметры приведены в табл Таблица 6.1. Основные теги и параметры фреймовых структур Тег Параметры Функция FRAMESET FRAME NOFRAMES COLS ROWS SRC NAME SCROLLING NORESIZE MARGINWIDTH MAGINHEIGHT Основной тег фреймовой структуры Тег описания свойств отдельного фрейма Тег информации для браузеров без поддержки фреймов Взаимодействие между фреймами Работа с фреймовыми структурами имеет свои специфические особенности, которые следует знать, если имеется желание использовать данное средство навигации для HTML-документов.

149 140 Часть I. HTML первые шаги Взаимодействие между отдельными фреймами происходит посредством загрузки документа по соответствующей ссылке в установленное окно. Реализуется это действие с помощью параметра TARGET тега <А>. По умолчанию вызванный по гиперссылке документ будет загружаться в текущий фрейм. Но чаще всего нужно сделать так, чтобы страница появлялась в соседнем окне. Существуют специальные зарезервированные имена действий, по которым происходит загрузка документов на сайтах с фреймовой структурой: "Jolank", "_self", "_parent" И "_top". Действие <А HREF="filel.html" TARGET="_blank"> осуществляет загрузку документа в новое окно без имени, определяемого параметром NAME тега <FRAME>, поэтому этот вариант исключает изменение содержимого созданного окна. Действие <А HREF="fiIe2.html" TARGET="_self"> открывает документ в текущем окне. Действие <А HREF="file3.html" TARGET="_parent"> производит загрузку документа в область, занимаемую родительским фреймом текущего фрейма. Действие <А HREF="fiie4.html" TARGET="_top"> вызывает загрузку документа в полном окне. В данном случае не был задействован параметр NAME в теге описания текущего фрейма <FRAME>. Рассмотрим несколько примеров по взаимодействию между фреймами и открытию отдельных окон браузера с помощью параметра TARGET. Создадим файл со следующей фреймовой структурой: <FRAMESET ROWS="2*, *"> <FRAME NAME="meriu" SRC="menu.html" NORESIZE FRAMEBORDER="1"> <FRAMESET COLS="50%, 50%"> <FRAME NAME="left" SRC="left.html"> <FRAME NAME="right" SRC="right.html"> </E*RAMESET> Верхний фрейм будет содержать перечень гиперссылок, а два нижних фрейма предназначены для открытия в них содержимого конкретной ссылки. Документ "menu.html" (рис. 6.5, листинг 6.2) содержит шесть гиперссылок на один и тот же файл "text.html".

150 Глава 6. HTML-документы на основе фреймов 141 *щ Взаимодействие между фреймами и открытие окон браузера - Microsoft Internet Explorer ffc ЕЛ Вей Favorites loots Help V '.."->"..".".я"'" ^ W & Back Forward Stop Refresh Home j Sear> Ссылки верхнего фрейма Я '5t. -Этекст документа text.html Microsoft Internet Explorer File E* View Fjvorltes Tools Help Текст документа text.html ] т Файл с текстам в левом нижнем фрейме Файл с текстом в правом нижнем фрейме Файл с текстом в верхнем фрейме Файл с текстом в полном оюне Файл с текстом в новом owe» Файл с текстом в текущем фрейме ;«У Done I' '.' : 'Ш My Computer" Текст левого нижнего фрейма Текст правого нижнего фрейма JSJ My Computer Рис Взаимодействие между фреймами и открытие окон браузера Листинг 6.2. Файл верхнего фрейма "menu. html' <HTML> <BODY BGCOLOR="IFFFFFF" TEXT="black" LINK="#FFOOOO" ALINK="#OOFFOO" VLINK="blue"> <НЗ>Ссылки верхнего фрейма</нз> <HR>- <FONT FACE="Tahoma" SIZE="2"> <UL TYPE="square"> TARGET="left">Фaйл с текстом в левом нижнем фрей- <LIXA HREF="text.html" ме</а> <LIXA HREF="text.html" ТАКСЕТ="г1д^">Файл с текстом в правом нижнем фрейме</а> <LIXA HREF="text.html" ТАКСЕТ="тепи">Файл с текстом в верхнем фрейме</а> <LIXA HREF="text.html" ТАКСЕТ="_Ьор">Файл с текстом в полном окне</а> <LIXA HREF="text.html" ТАКСЕТ="_Ыап1<:">Файл с текстом в новом окне</а> <LIXA HREF="text.html" TARGET=" зе! ">Файл с текстом в текущем фрейме</а>

151 142 Часть I. HTML первые шаги </OL> </FONT> </BODY> </HTML> Первая ссылка откроется в левом нижнем фрейме по причине указания конструкции TARGET="ieft" ("left" в данном случае это внутреннее имя данного фрейма). Вторая ссылка откроется в правом нижнем фрейме (указано внутреннее имя фрейма "right"). Третья ссылка будет открыта в этом же окне, т. к. "menu" это имя текущего фрейма, из которого открываются гиперссылки. Четвертая ссылка откроется в полном окне браузера (конструкция "_top"). Пятая ссылка будет открыта в отдельном новом окне поверх фреймовой структуры (действие "_biank"). Наконец, последняя ссылка откроется в текущем фрейме (аналогично действию TARGET="menu"). Плавающие фреймы Плавающие фреймы являются стандартом, который поддерживается только браузером Internet Explorer. Netscape подобные фреймы просто-напросто не отображает. Суть плавающих фреймов заключается в возможности встраивать обыкновенные фреймы (с указанием источника), являющиеся в сущности HTMLдокументами, в другие электронные документы. Плавающие фреймы описываются тегом-контейнером <IFRAME> и могут иметь параметры, присущие обыкновенным фреймам, а также параметры, аналогичные описанию графических изображений (а именно: ALIGN, WIDTH, HEIGHT, HSPACE И VSPACE) (ЛИСТИНГ 6.3, рис. 6.6.). Листинг 6.3. Пример плавающих фреймов <HTML> <HEAD> <Т1ТЬЕ>Пример плавающих фреймов</т1тье> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#FFOOOO" ALINK="#OOFFOO" VLINK="blue"> <IFRAME SRC="iframe.html" NAME="iframe" WIDTH="150" HEIGHT="250" HSPACE="5" VSPACE="5" SCROLLING="auto" ALIGN="right">

152 Глава 6. HTML-документы на основе фреймов 143 Ваш браузер не отображает плавающие фреймы. </IFRAME> <Р ALIGN="justify"> Плавающие фреймы являются стандартом, который поддерживается только браузером Internet Explorer. Netscape подобные фреймы просто-напросто не отображает. <BRXBR> Суть плавающих фреймов заключается в возможности встраивать обыкновенные фреймы (с указанием источника), являющиеся в сущности HTML- документами, в другие электронные документы. </BODY> </HTML> Например плавающих фреймов - Microsoft Internet Explorer HQDE3E File Edit View Favorites loots tlelp V" 1.. V '^Jf. lJ LJJ : w " «$. ij Back Focwatd Stop Refresh Home Search Favorites Плавающие фреймы являются стандартом, который поддерживается только браузерам Internet Explorer. Netscape подобные фреймы просто-напросто не отображает. Суть плавающих фреймов заключается в возможности встраивать обыкновенные фреймы (с указанием источника), являющиеся в сущности HTMLдокументами, в другие электронные документы ССЫЛКА 1 ССЫЛКА 2 ССЫЛКА 3 ССЫЛКА 4 JfSjDone jj My Computer Рис Пример плавающих фреймов Браузеры, которые не поддерживают плавающие фреймы, в указанном месте документа выведут сообщение "Ваш браузер не отображает плавающие фреймы".

153 Глава 7 Звук на вашей странице В нашей повседневной жизни звук играет далеко не последнюю роль. Мы слушаем радио и музыку, записанную на CD, ежедневно слышим звук из динамиков наших телевизоров, устанавливаем затейливые мелодии для будильников, даже поздравительные открытки и те стали музыкальными. Развитие компьютерных технологий, в частности Интернета, на сегодняшний день позволяет применять в электронных документах компоненты звука. Существует несколько возможных вариантов воспроизведения звуковых файлов в Интернете. Мы же в рамках знакомства с HTML остановимся именно на возможностях этого языка разметки. Звуковые форматы Существует огромное количество звуковых форматов распространенных и не особо встречающихся, применяемых в различных операционных системах и для различных нужд. Нас интересуют те форматы, файлы которых позволительно встраивать в HTML-документы и воспроизводить непосредственно в браузере пользователя. К ним можно отнести: П WAV формат звуковых файлов операционной системы Microsoft Windows; П MIDI Musical Instrument Digital Interface (формат электронных инструментов); П AU формат Sun/NeXT; П AIFF формат платформы Macintosh; Я RealAudio формат передачи звуковых файлов в режиме реального времени. Также в последнее время большую популярность получил формат МРЗ (формат сжатия аудиосигнала с потерей качества, лежащей за пределами возможностей человеческого слуха). Однако с помощью стандартных средств HTML файлы МРЗ встроить в структуру электронного документа нельзя.

154 Глава 7. Звук на вашей странице 145 Встраивание звуковых файлов в HTML-документ Для встраивания практически любых звуковых файлов в HTML-документ можно использовать два пути: П создание гиперссылки на музыкальный файл и размещение ее на странице; П применение специального тега вставки музыкальных файлов <EMBED>. Создание гиперссылки на музыкальный файл Правила записи гиперссылки на файлы музыкальных форматов абсолютно идентичны записи ссылок на HTML-документы или графику: <А НКЕЕ-"тиз1с.1'/ау">Музыкальный файл (30 Кб) </А> При нажатии на такую ссылку на компьютере пользователя запускается установленный по умолчанию проигрыватель звуковых файлов. Следует обратить особое внимание на указание размера музыкального файла, стоящее в ссылке сразу после названия. Дело в том, что некоторые звуковые данные (песни, фрагменты мелодий, фонограммы и пр.) могут иметь весьма большой размер. И прежде чем нажать на подобную ссылку, пользователь, учитывая скорость соединения с Интернетом и технические возможности своего компьютера, должен иметь хотя бы примерное представление о том, сколько времени займет открытие файла. Применение тега <EMBED> Тег <EMBED> имеет ряд параметров, которые позволяют управлять воспроизведением музыкального файла непосредственно в окне браузера. Пример встраивания звукового файла с помощью тега <EMBED> приведен соответственно в листинге 7.1 и на рис ; Листинг 7.1. Пример встраивания звукового файла с помощью тега <EMBED> <HTML> <HEAD> <Т1ТЬЕ>Пример встраивания звукового файла</т1тье> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#FFOOOO" ALINK="IOOFFOO" VLINK="blue"> <H2 ALIGN="center">npwviep встраивания звукового файла</н2>

155 146 Часть I. HTML первые шаги <CENTER> <EMBED SRC="melody.wav" WIDTH="287" HEIGHT="213" AUTOSTART="true"> </CENTER> </BODY> </HTML> В этом случае браузер отобразит встроенную панель воспроизведения указанного музыкального файла ("melody.wav")- (ЯПример встраивания звукового файла - Microsoft Intern. ВНЕ File Edit View Favorites look Help *- : T

* - T:^ - ^ T : ;g. : 'g; v Bsc«hi'.'j;.; Stop Refresh Home ; Search Favorites Пример встраивания звукового файла jgjdone jj My Computer Рис Пример встраивания звукового файла с помощью тега <EMBED> Параметры тега <EMBED> приведены в табл Таблица 7.1. Параметры тега <EMBED> Параметр SRC WIDTH HEIGHT AUTOSTART Описание Указание пути к воспроизводимому звуковому файлу форматов AU, AIFF, WAV и MIDI. Является обязательным параметром Ширина панели воспроизведения (обязательный параметр) Высота панели воспроизведения (обязательный параметр) Значение по умолчанию FALSE. Для автоматического начала воспроизведения используется значение TRUE

156 Глава 7. Звук на вашей странице 147 Параметр AUTOLOAD ALIGN VOLUME STARTTIME ENDTIME CONTROLS CONSOLE SMALLCONSOLE PLAYBUTTON PAUSEBUTTON Описание Таблица 7.1 (окончание) Значение по умолчанию TRUE. Для запрета автоматической загрузки файла используется значение FALSE Тип выравнивания панели воспроизведения относительно текста на странице. Возможные значения: LEFT, RIGHT, CENTER, TOP и BASELINE. Значение по умолчанию BASELINE Установка громкости воспроизведения (определяется в процентах) Время начала воспроизведения в минутах и секундах (формат записи: "mm: ss"; по умолчанию 00.00) Время окончания воспроизведения в минутах и секундах (формат записи: "mm: ss"; по умолчанию конец звукового файла) Указание элементов управления на панели воспроизведения (значения CONSOLE, SMALLCONSOLE, PLAYBUTTON, PAUSEBUTTON, STOPBUTTON, VOLUMELEVER). Значение по умолчанию CONSOLE Отображение полного набора элементов управления на панели воспроизведения Компактный набор элементов управления на панели воспроизведения Отображение только кнопки воспроизведения Отображение только кнопки паузы STOPBUTTON Отображение только кнопки остановки воспроизведения (звуковой файл при этом будет выгружен) VOLUMELEVER Отображение только регулятора громкости Особое внимание при встраивании музыкальных файлов в HTMLдокументы следует обратить на совместимость перечисленных параметров тега <EMBED> с различными браузерами. Дело в том, что браузер Internet Explorer использует для воспроизведения встроенных звуковых файлов модуль ActiveMovie (проигрыватель Windows Media), a Netscape LiveAudio. Каждый из этих модулей имеет ряд своих преимуществ, однако результат встраивания музыкального файла визуально может сильно отличаться при просмотре в этих двух браузерах. RealAudio Формат RealAudio был разработан компанией RealNetworks в период развития аудио- и видеоконференций в режиме реального времени. Новый формат положил начало возможности передавать звуковые файлы в Интернете в реальном времени.

157 148 Часть I. HTML первые шаги Технология RealAudio состоит из трех программных компонентов: П кодировщик конвертирование звуковых файлов в формат RealAudio; П сервер передача файлов формата RealAudio по сети; П проигрыватель воспроизведение музыкальных файлов в формате RealAudio. Для прослушивания RealAudio-файлов достаточно иметь установленный проигрыватель. Для распространения собственных файлов придется обзавестись и программой-кодировщиком, и сервером. Для встраивания звукового файла в формате RealAudio на HTML-страницу используется также два варианта - посредством ссылки на источник RealAudio-данных и с помощью уже известного нам тега <EMBED>. Ссылка на файл RealAudio выглядит так: pnm://audio.real.com/melody.ra где: pnm: // это указание сервера RealAudio; audio.reai.com адрес сервера RealAudio; melody, ra название звукового файла RealAudio (расширение га). Совокупность ссылок такого вида обычно размешают в обыкновенном текстовом файле, содержащем информацию о звуковых данных RealAudio, которому присваивают расширение ram (RealAudio Metafile). Таким образом позволительно указание обоих расширений (и га, и ram), однако вариант с расширением ram предоставляет дополнительные возможности по определению точки проигрывания файла и даты его воспроизведения. pnm://audio.real.com/melody.ra$0:30 В этом примере файл формата RealAudio будет воспроизводиться с тридцатой секунды (запись типа $мишсек). Дата начала проигрывания определяется конструкцией $dd:hh:mm:ss:t (день:час:минута:секунда:десятая доля секунды). Также можно вставить в HTML-документ обыкновенную гиперссылку, при нажатии на которую на компьютере пользователя запустится проигрыватель файлов RealAudio (рис. 7.2): <А HREF="audio/melody.ra">t>aiin в формате RealAudio</A> При встраивании файлов RealAudio с помощью тега <EMBED> необходимо помнить, что расширение файла должно быть не ram, a rpm (для активизации подключаемого к браузеру модуля воспроизведения звуковых файлов RealAudio). Пример встраивания файлов RealAudio в HTML-документ приведен соответственно на рис. 7.3 и в листинге 7.2.

158 Глава 7. Звук на вашей странице 149 RealPlayer File View Options Presets Sites Help Channels Choose Customize Channels from the View menu to add Channels. & Update I Рис Окно проигрывателя звуковых файлов RealPlayer ЦВстраивание файлов RealAudio в HTML-документ - Micro. HHE3I File Edit View Favorites Tools Help ^ ; : 5- TW : Ш 4 ; a -,S> Back Forward Stop Refresh Home : Search Favorites Встраивание файлов RealAudio > и a «t F Clip Info: О g] Done gj My Computer J Рис. 7.З. Встраивание файлов RealAudio в HTML-документ

159 150 Часть I. HTML первые шаги \ Листинг 7.2. Встраивание файлов RealAudio в HTML-документ <HTML> <HEAD> <Т1ТЬЕ>Встраивание файлов RealAudio в НТМЬ-документ</Т1ТЬЕ> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#FFOOOO" ALINK="#OOFE'00" VLINK="blue"> <H2 ALIGN="center">BcTpaMBaHMe файлов RealAudio</H2> <CENTER> <EMBED SRC="audio/melody.rpm" WIDTH="300" HEIGHT="128" AUTOSTART="true" CONTROLS="A11"> </CENTER> </BODY> </HTML> Параметры тега <EMBED> для воспроизведения звуковых файлов в формате RealAudio перечислены в табл Таблица 7.2. Параметры тега <EMBED> (RealAudio) Параметр Описание SRC Указание пути к воспроизводимому звуковому файлу формата RealAudio. Является обязательным параметром WIDTH HEIGHT CONTROLS AUTOSTART CONSOLE NOLABELS Ширина панели воспроизведения (обязательный параметр) Высота панели воспроизведения (обязательный параметр) Набор элементов управления на панели воспроизведения (полный перечень возможных значений приведен в табл. 7.3) При значении TRUE проигрывание файла начинается автоматически (порядок загрузки и последовательность воспроизведения нескольких файлов в формате RealAudio зависит от настроек браузера и программы-сервера) Создание нескольких панелей воспроизведения При значении TRUE вывод информации о проигрываемом файле RealAudio (автор, название и пр.) будет запрещен Перечень возможных значений параметра CONTROLS (выбор элементов панели воспроизведения) приведен в табл. 7.3.

160 Глава 7. Звук на вашей странице 151 Таблица 7.3. Значения параметра CONTROLS Значение АИ ControlPanel. InfoPanel InfoVolumePanel StatusBar PlayButton StopButton VolumeSlider PositionField PositionSlider StatusField Описание Значение по умолчанию отображаются все элементы управления Кнопки воспроизведения и остановки, индикатор воспроизведения файла и регулятор громкости Вывод информации о файле Вывод информации о файле и регулятор громкости Окно состояния воспроизведения файла, указание времени и продолжительности файла Только кнопка воспроизведения/паузы Только кнопка остановки Только регулятор громкости Время воспроизведения и продолжительность файла в строке состояния Только индикатор текущего положения файла Текстовые сообщения в строке состояния Фоновый звук В завершение разговора о музыкальных форматах, используемых в современном Интернете, следует упомянуть о такой возможности языка разметки HTML, как указание фонового звука для электронного документа: <BODY BGSOUND="audio/intro.wav" LOOP="infinite"> Данный пример задает для страницы фоновый звук "intro.wav" с помощью параметра BGSOUND. Конструкция LOOP="infinite" дает браузеру команду проигрывать указанный файл бесконечное количество раз. Для ограниченного количества воспроизведения фонового звука в качестве значения необходимо использовать целые числа (1, 2, 3 и т. д.).

162 Часть II Создание интерактивных НТМ L-доку ментов Глава 8. Работа с пользовательскими формами Глава 9. CSS и Dynamic HTML просто и привлекательно! 6 Зак. 863

164 Глава 8 Работа с пользовательскими формами Что такое пользовательские формы Пользовательская форма это совокупность стандартных HTML-конструкций ввода текстовой и прочей информации и программы-обработчика этой информации, работающей на Web-сервере. Иными словами, пользовательская форма (или HTML-форма) служит для передачи информационных данных серверу. Результат конструкций языка разметки HTML интерпретируется браузером, с помощью которого пользователь электронного документа получает информацию. Таким образом, объединив все эти формулировки, можно сказать, что HTML-форма выступает в роли посредника между пользователем и сервером. Посетитель Web-страницы вводит в HTML-форму определенные данные, которые обрабатываются программой и отсылаются на Web-сервер. Все эти действия укладываются в три стадии: 1. Ввод пользователем информации. 2. Обработка введенной информации программой, установленной на сервере. 3. Получение результата отправления введенной информации на Webсервер (открытие нового HTML-документа, переадресация на предыдущую страницу и пр.). В качестве программы-обработчика чаще всего выступает CGI-сценарий (скрипт, который обычно разрабатывается на языке Perl или C/C++ и который взаимодействует со специальным компонентом Web-сервера Common Gateway Interface) или программы, написанные на основе таких серверных языков программирования, как PHP, ASP, JSP и др. Значение пользовательских форм трудно переоценить они являются особым средством HTML, дающим посетителю возможность не только пассивно просматривать информацию, но и быть задействованным в содержании

165 156 Часть II. Создание интерактивных HTML-документов Web-сайта. Такое свойство принято называть интерактивностью, которая на сегодняшний день встречается практически во всех электронных документах. Что же дает присутствие пользовательских форм на странице? Диапазон функций, выполняемых HTML-формами, чрезвычайно широк, поэтому остановимся лишь на некоторых, наиболее распространенных направлениях. Организация обратной связи Форма обратной связи это неотъемлемый атрибут Web-сайта любой тематики и функциональной направленности. Размещая электронный документ во Всемирной сети, мы уже подразумеваем реакцию пользовательской аудитории похвалу и одобрение или же несогласие и критику. В качестве средства обратной связи между пользователем и автором электронного документа могут выступать: П почтовая форма (рис. 8.1). Посетителя просят указать свои персональные данные и изложить суть обращения. Текст обращения обрабатывается программой и высылается автору сайта по электронной почте. При этом другие посетители сайта не могут получить доступ к содержанию отправленного сообщения; ГШСЛЕЙНН& ПОСТУПЛЕНИЯ Ц Perl:: LWP + MIME или как получить WEB страницу по P*rl 02/84/03 Q Контактная информация на сайте. Есть контакт? (liability r.l/jvl.-o.i Контакты Отправляйте свои пожелания, комментарии и предложения по адресу Также вы можете воспользоваться нижеследующей формой: р] FAQ по форматам файлов Основы домина 01/04/0-3 Щ Кодируем со всеми удобствами HTML-peoJKTOpti m 'CW/CU : Q Требования к Е,Reporting ' Упраслшич* гэ/оз/оз Добавить аатыо О Основные концепции и подходы при создании контекстно-поисковых (579) ] Отправить Рис Пример почтовой формы

166 Глава 8. Работа с пользовательскими формами 157 П гостевая книга (рис. 8.2). Электронная книга жалоб и предложений, в которой любой желающий может оставить свой отзыв, поделиться впечатлениями о сайте, изложить критические замечания и указать на ошибки автора. В этом случае сообщения одного посетителя видимы для остальных пользователей гостевой книги; 'а фирма "Компьютерный Мир", Санкт-Петербург - Microsoft Internet Explorer! He Edit View Favorites Tools Help,; ** "> ' «3.. R*l i Back Slop Refresh Home Mail (3 : Обратная связь» f Ш 1>:в.-!->- форумы. ч f,-. С ' f i ^ Р*ч;йСтр8ЦИЧ ' 0 фирме 1 Ho. *:^., * Прфсс-рели-э фирмы > В'й'ански 3; Товары и цены > Ь::

- 'М.--. ' >.' Т i"]m'';'i '. ОТО&е. -.т.шг.н^я > Спец^лл:ьные цены > Kdiajmr icittdpub ^wь/ Информация 1» Дискоигная си(легч1-:1 * Маши рй*омйид'! л.1ии ^ Все о сетях ( > Отдел сет*г.ых pftfflir-мий»c«pmn»md«.п^»: 1КИФ, ГЕ«««Гостевая книга - список тем Тема сообщения % Просьба и Папа ft Otmitnt «Miirfou о KM!l!i»<(( Щя Спаси!эи Евгении) tptjmfihku ift KotmeienmocTb Г5рода >цов? ЙЖ А почоку? ft 1>ап,ыигас SI..-MP3» с ДУ г Ш Ваше ммеиме о райоте продйеции 1ЁШ С Новым (адом! Ш Когда? Новая тема Автор: Тема: Текст: " '. '. Последнее посещение: IS :35 Автор Изменено Отв. G Timmerman я Notice zfreld Us Egorius slave Соц. Опрос Г/ала Valery Пароль: I : : : : :39 J : : : : I3 4 S 6? 3 1 ;_>.. > _d» Рис Пример гостевой книги О интернет-форум (рис. 8.3). Более мощный инструмент стимулирования оценки пользовательской аудитории, нежели почтовая форма или гостевая книга. В интернет-форумах происходит многосторонний диалог, причем не только между человеком, задающим вопрос, и автором Web-сайта, но и между всеми пользователями данного интернетресурса. На вопрос одного пользователя может ответить другой, третий подскажет то, чего не упомянул второй, наконец, автор сайта подытожит высказывания всех пользователей и даст свой развернутый ответ. Часто в рамках интернет-форума работают дополнительные функциональные средства общения: личные сообщения, скрытые разделы форума для привилегированных пользователей, опросы общественного мнения и пр.;

167 ' 158 Часть II. Создание интерактивных HTML-документов Форум 11 Atpet.Spb.Ru > Aip*t.spb.Ri Регистрация Персональные данные Вход Забыли пароль? Кто на форуме? I Помощь 1 Поиск» Здра»ст»уЙт*; *lp*ti Выйти ия форума Личные сообщения Показать новые сообщения Отметить все сообщения как "прочитанные" А> «(У «Г- ^ irf- ; ' л: ** *«!- ; www. alpet.jpb.ru ; Форум 11 Alpet.Spb.Ru приветствует нового участника Lao Ьорум Alpet.Spb.Ru; 11 участников, 117 сообщений, 20 тем.» Объявления администратора форума *ф Форум открыт! [ Про» Общие форумы Материалы сайта : 1 :Обсуждение авторских материалов сайта Alpet.Spb.Ru:.критика, замечания, пожелания, благодарности.! (Модвр итсры: alpeo О сайте Alpet.Spb.Ru _ Конструктивные предложения по изменению внешнего Qi> вида и функциональности авторского сайта Алексея Петюшкина. ^ TimV 7?37*m 2 " ;by: aipet DaU: им Timei in27am bv; а!р ** i» Тематические форумы : Графика и веб-дизайн f\ i Дискуссии на тему графического макетирования, выставлемие макетов сайтов на суд общественности. Рис Пример Интернет-форума Ffc &fc ^Sew Favorites.; loois. Цв1р ' i : Ш *' " ' ; ^ = ^ ' ' и :: ; ' : '-и. jy. ^ Bick Stop Rrte* Home. Seeich Favoiilej; Helgiy j Mai [17:24:08] Бублик: В чат входит Avexx! [17:21:5Qj Бублик: Angelst покидает чат. [17:17:13] Бублик: Ejen покидает чат. [17:17:10] Ejen. я пошел счастливо Q [17:13.46] Ejen, AngeJsr я он [17:12:28] Angeist: Ejen. ты f/m? [17:12:03] Ejen: пойду сайт поделаю [17:08:31] Ejen: Angelst: arao [17:07:25] Ang^lst. Ejen: ни было бы лучше если Рыло бы хорошо!*! [17:06:54] Angeist: че, усиули все? [17:06:52] Ejfen. Aiiyelsi. нормапьно [17:06:43] Angelsr ц ку [17:02:52] Angslst. как делишки? [17:02:12] Ejen' Angelst привет [17:01:59] Angelst: hi a)! [17:01:28] Бублик: Angelst, ты не сможешь войти в Служебная. [17:00:31] Бублик: В чат еходит Angelst! [16:50:49] Бублик: В чат входит Ejen! [15:08:13] Бублик: Шурз покидает чат. * Зал (2) ' Бу6 к \ Легенда смайликов Правила "*; Скорость обновления ; lo J Рис Пример чата Отправить'-'] [уприватюг.] [светпо-зеленыйi'j^j [ Выход"] ' jfilrtdingt'

168 Глава 8. Работа с пользовательскими формами 159 П чат (рис. 8.4). Средство чата (от англ, "to chat" разговаривать, болтать) подразумевает единовременное общение многих пользователей в режиме реального времени. В отличие от гостевой книги или форума, где ответ на поставленный вопрос может быть выслан и через час, и через день, общение в чате происходит между двумя (или более) собеседниками так, будто они сидят в одной комнате. Собеседники могут находиться в разных городах, государствах и временных зонах, однако присутствуя в чате, все пользователи способны общаться одновременно. В чатах также могут присутствовать некоторые дополнительные функции: приваты (отдельный разговор между двумя пользователями), система почтовых сообщений, голосования и т. д. Авторизация Для получения доступа к информации на многих интернет-ресурсах существует необходимость регистрации в сервисе. После регистрации, которая подразумевает указание уникального пользовательского имени и пароля, пользователь должен пройти процедуру авторизации, т. е. проверки на наличие в базе данных сайта заявленного имени и пароля (рис. 8.5). т \ ^ Цвход Форум Субъектиные заметки об интернет-дизайне - Microsoft Internet Explorer Edit Ще» Favorites loots IJelp Г 7 Г '*» ТГ : ё' Ш 7 й : \ Ш ' а 7^ УЖ- "'а- * " :: ш Я ' "..' ' : ' t! Г ' Г*^ *:-V. F <. - : : > ' Stop Refresh Home ;.; Search Favorites History ; Maii Size. Print. - Y: ' ; Главная Правила Регистрация I FAQ Поиск [ Пользователи Группы Профиль Личные сообщения I Вход 1 Форум Введите ваше имя и пароль для входа в систему Имя: ( Пароль: Автоматически входить при каждом посещении: Г" [ Вход 7 ) Забыли пароль? Powered by pbpbb (И W2 phpbb йгаир Главная Заметки Обзоры Советы Ресурсы Форум 1 т': ru. Раэиещено на 100MB.ru. ' : : "*' "'" Рис Пример формы авторизации : «*^." *? ] П стиль. Под стилем принято понимать приведение какого-то явления к общему набору правил и определений. CSS это способ дополнительного форматирования стандартных тегов HTML. Версия HTML 4.01 включает следующие характеристики CSS: П гибкое использование стилевых шаблонов (Flexible placement of style information). Правила задания стилевых таблиц позволяют использовать такие способы определения стиля, как создание внешнего CSS-файла,

192 Глава 9. CSS и Dynamic HTML просто и привлекательно! /83 использование внутреннего шаблона и импортирования таблицы стилей и пр. Более подробно о способах определения таблиц стилей будет рассказано в разделе "Способы определения таблиц стилей"этой главы; П независимость от других языков определения стиля (Independence from specific style sheet languages). Спецификация HTML позволяет, помимо CSS, использовать другие языки определения стилевых шаблонов, что делает создаваемый электронный документ стиленезависимым, а значит и более адаптируемым к изменению внешнего вида определенных HTML-элементов; П каскадность (Cascading). Возможность определения нескольких стилевых правил (указания нескольких таблиц стилей) для одного элемента HTML. He все языки таблиц стилей поддерживают каскадность. Свойство каскадное реализуется за счет последовательного чтения стилевых данных браузером; П привязанность к носителю информации (Media dependencies). С помощью стилевых шаблонов CSS возможна ориентация создаваемого электронного документа на различные носители информационных данных: операционные системы Windows и Macintosh, телевизионные и игровые приставки, мобильные телефоны и карманные персональные компьютеры (КПК), устройства распознавания человеческой речи и пр; П альтернативные стили (Alternate styles). Разработчики электронных документов могут создавать несколько вариантов отображения элементов HTML с помощью различных таблиц стилей CSS. Уровни CSS Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии, поэтому правила составления стилевых шаблонов были весьма разрозненными. С момента своего возникновения структура CSS была несколько раз пересмотрена, в нее были добавлены новые элементы и убраны (видоизменены) старые. Существуют три уровня CSS, определяемых наличием завершенной редакции структуры. Это: CSS 1 (первый уровень структуры стилевых шаблонов, окончательно утвержденный 11 января 1999 года), CSS 2 (второй уровень стилевых конструкций, начало обсуждения которого датируется маем 1998 года) и CSS 3 (третий уровень стилевого оформления электронных документов, принятый к обсуждению 23 мая 2001 года, на момент написания книги находился в стадии проработки). В завершение разговора об уровнях CSS следует добавить, что переход от одного уровня к другому, в основном, сопровождался некоторыми видоизменениями в структуре и в правилах стилевого оформления, технологическими дополнениями, а также попытками систематизировать применение CSS.

193 184 Часть II. Создание интерактивных HTML-документов Именно третий уровень (CSS 3) позиционируется разработчиками в качестве некой единой системы представления стилей в электронном документе, основанной на использовании специальных модулей. Способы определения таблиц стилей Как уже было сказано, любая таблица стилей CSS должна быть интерпретирована браузером для того, чтобы правила CSS, обозначенные для конкретных элементов электронного документа, вступили в силу. Определение таблицы стилей (стилевого шаблона) возможно четырьмя способами: П ссылка на внешний файл. Если все стилевые шаблоны для конкретного HTML-документа разместить в одном текстовом файле (с расширением ess), то с помощью специального тега <LINK> из текущего документа можно сделать ссылку на внешний CSS-файл стилевых шаблонов, например: <LINK REL="stylesheet" TYPE="text/css" HREF="style.ess"> Браузер, анализируя HTML-код, обратится по указанному пути и, обнаружив указанный файл стилевого оформления, отобразит элементы страницы в соответствии с определенными правилами CSS. Следует помнить, что конструкция указания пути к внешнему CSS-файлу должна находиться в пределах раздела HEAD HTML-документа; П внедрение в документ. Под внедрением в документ подразумевается задание стилевой конструкции внутри самой HTML-страницы, например: <STYLE TYPE="text/css"> <! BODY < font-family: Arial, Helvetica; >INPUT < background-color: #CECECE; >--> </STYLE> Данная конструкция также должна присутствовать в разделе HEAD. Для браузеров, не поддерживающих CSS вообще или поддерживающих лишь отдельные правила стилевого оформления, описание шаблонов заключается между символами комментариев (при отсутствии поддержки CSS браузер пропустит содержание стилевых шаблонов, если же поддержка есть, то браузер интерпретирует правила CSS); П включение в теговые конструкции. Любой отдельный HTML-элемент может быть подвергнут форматированию средствами CSS. Для этого необходимо задать определенное правило реализации того или иного тега, например: <Р ALIGN="justify" STYLE="color: #000000; font-family: Verdana;"> Текст параграфа.

194 Глава 9. CSS и Dynamic HTML просто и привлекательно! 185 В этом случае задано отдельное правило для конкретного параграфа. Также можно присваивать отдельному HTML-элементу определенный класс стилевого шаблона: <TABLE> <TR> <TD <TD </TR> </TABLE> Описание классов должно строиться следующим способом (на примере внедрения стилевого шаблона в документ): <STYLE TYPE="text/css"> <!.header < font-weight: bold; color: gray; >.text < color: black; font-size: llpx; >--> </STYLE> В данном случае текст табличной ячейки класса.header будет отображаться жирным начертанием и серым цветом, а ячейки класса. text - обычным начертанием, черным цветом и размером шрифта 11 пикселов; П импортирование. Импортирование стилевого шаблона CSS, по сути, аналогично указанию ссылки на внешний файл: <STYLE TYPE="text/css"> < i Simport: url(style.ess); --> </STYLE> Все четыре способа определения стилевого шаблона CSS можно использовать одновременно в пределах одного HTML-документа (листинг 9.1). Такая возможность позволяет задавать основное правило CSS, к примеру, в виде внешнего файла шаблонов, а для исключительных или редких HTMLэлементов отдельные конструкции либо в теге <STYLE>, либо в кодовых конструкциях самих тегов. \ Листинг 9.1. Совмещение различных способов определения стилевого шаблона CSS <HTML> <HEAD> <Т1ТЬЕ>Совмещение различных способов определения CSS</TITLE> 7 Зак. 863

195 186 _ Часть II. Создание интерактивных HTML -документов <LINK REL="stylesheet" TYPE="text/css" HREF="style.css"> <STYLE TYPE="text/css"> <! P < text-align: justify; color: green; >.title < color: blue; font-weight: bold; font-size: 16px; >> </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO" VLINK="blue"> <FONT определения шаблонов CSS</FONT> Ниже перечислены существующие способы определения стилевых шаблонов CSS, даны характеристики каждого способа, приведены примеры их использования. <UL> <Ы>Ссылка на внешний файл <и>внедрение в документ <Ы>Включение в теговые конструкции <Ы>Импортирование </UL> </BODY> </HTML> Также следует сказать, что использование каждого способа определения стилевых шаблонов CSS может быть связано с некоторыми минусами. П В случае ошибки интерпретации HTML-кода браузером, плохой связи с сервером и пр. внешний файл CSS может не загрузиться, вследствие чего стиль для нужных элементов HTML не будет переопределен. О Если внешний файл CSS включает слишком большое количество стилевых шаблонов (что отражается на конечном размере файла), то существует вероятность того, что браузер не сумеет полностью интерпретировать файл CSS или вообще исчерпает лимит времени по загрузке данных. В первом случае стили для части элементов не будут переопределены (браузер успеет "обнаружить" только те правила, которые размещены в верхней части CSS-файла). Во втором случае все элементы страницы останутся без изменения, загрузившись по умолчанию. П При использовании способа включения стиля в сам документ наличие слишком большого количества шаблонов CSS заметно увеличит конечный размер HTML-страницы, что скажется на времени загрузки документа в браузере.

196 Глава 9. CSS и Dynamic HTML просто и привлекательно! 187 П При сочетании различных способов определения стилевых шаблонов следует учитывать особенности браузеров. К примеру, Netscape "плохо относится" к использованию символа нижнего подчеркивания ( _ ) в указании классов для элементов HTML (.news_titie,._about и т. д.). Также ряд браузеров (и Netscape в том числе) не подключает стилевой шаблон класса, присвоенного ячейке таблицы <то>/<тн>: конструкция <то выведет текст по умолчанию, a <TDXFONT отобразит текст заданным стилем. Запись шаблона CSS Группировка и наследование Любое правило таблицы стилей CSS состоит из селектора и определения шаблона. Селектор выступает в роли указателя стилевого правила для определенного HTML-элемента или внутреннего класса (идентификатора). Определение шаблона это описание стилевых правил для обозначенных элементов HTML. Правила чередуются через точку с запятой и заключаются в фигурные скобки. НЗ < color: blue; font-family: Tahoma, Verdana, Arial; >В данном примере селектором является элемент заголовка нз, для шаблона которого следует такое определение: цвет синий, шрифт Tahoma, либо Verdana, либо Arial. Как видно из примера, для одного селектора приведено описание, содержащее два правила по цвету заголовка и наименованию гарнитуры. Это говорит о том, что CSS позволяет группировать несколько стилевых правил для одного селектора в рамках единого описания шаблона. Сравнив запись вида: НЗ ( color: blue; > НЗ < font-family: Tahoma, Verdana, Arial; >И НЗ < color: blue; font-family: Tahoma, Verdana, Arial; >можно сделать вывод о том, что группировка правил по селектору позволяет, во-первых, экономить размер CSS-файла, во-вторых систематизировать структуру описания шаблона. Другой особенностью таблиц стилей CSS является свойство наследования стилевых правил для нескольких селекторов одновременно, например: TD, ТН, Р, DIV < text-align: justify; color: gray: font-size: Юрх; >Такая запись назначает единый стиль отображения текстовой информации для элементов ячейки таблицы (<то>, <тн>), а также параграфов (<Р>)

197 188 Часть II. Создание интерактивных HTML-документов и блоков (<DIV>), а именно: тип выравнивания по ширине, цвет серый, размер шрифта 10 пикселов. Селекторы В качестве селектора CSS могут выступать: П элементы HTML. Переопределение стиля для конкретного элемента страницы: BODY < color: orange; >В этом случае весь текст в пределах раздела BODY будет оранжевым. При добавлении, например, таблицы назначение стилевого шаблона пропадет для текста внутри ячеек; П классы. Использование классов позволяет переопределять стиль как для конкретного элемента, так и для любого элемента, которому присвоен данный класс. Наименование класса начинается с точки и обычно пишется строчными буквами (допускается использование латинских букв и цифр, но наличие специальных символов, нижних подчеркиваний и прочих нестандартных элементов не рекомендуется)..red < color: red; >В этом случае любой элемент HTML, позволяющий менять цвет, будет отображаться красным, если ему присвоить класс. red: <FONT красным цветом</коыт> ИЛИ <HR Если мы дополним селектор класса наименованием конкретного HTMLэлемента, то действие стилевого правила будет распространяться только на данный элемент: HR.red < color: red; >При указании классов стилевого шаблона следует внимательно следить за тем, поддерживает ли HTML-элемент присваемый тип переопределения стиля. Например, запись вида: HR < text-align: justify; >будет бессмысленной, т. к. горизонтальный разделитель относится к области структурного форматирования и не может содержать текст, который, согласно стилевому правилу, следует растянуть по ширине; П идентификаторы. Запись идентификатора начинается с символа # (диез) и заканчивается наименованием: #black < background-color: black; >Например, присвоив данный идентификатор тегу то, мы получим ячейку таблицы, залитую черным цветом: <TD черного цвета</то>

198 Глава 9. CSS и Dynamic HTML просто и привлекательно! 189 Сравнив функции селектора класса и идентификатора, можно задаться вполне закономерным вопросом чем же отличаются эти селекторы? Действительно, формат определения селектора обоих типов аналогичен по структуре и присвоению HTML-элементам. Однако селектор идентификатора часто применяется для задания уникального имени элементу, который задействован в программном сценарии (скрипте). В отличие от него, селектор класса ограничивается, в основном, применением в стилевых шаблонах. В заключение необходимо обратить особое внимание на невозможность сочетания селекторов различных типов. Нельзя одновременно переопределить стиль для стандартного элемента HTML и для него же, но по конкретному классу/идентифи катору. Псевдоклассы Псевдоклассами называют определенные условия форматирования HTMLэлемента, в соответствии с которыми браузер подставляет необходимые стилевые правила отображения данных. При этом в исходной структуре электронного документа такие классы не присутствуют, они создаются в процессе интерпретации HTML-кода браузером. В основном, псевдоклассы предназначены для задания различных типов форматирования по нескольким разновидностям элементов. Рассмотрим функциональность псевдоклассов на примере гиперссылок. Согласно спецификации HTML и стандарту CSS, гиперссылка может принимать четыре состояния: непосещенная ссылка (link), посещенная ссылка (visited), активная ссылка (active) и ссылка при наведении курсора мыши (hover). Первые Три СОСТОЯНИЯ (link, visited, active) обычно ПрОПИСЫваются в теге <BODY> HTML-документа (уровень CSS 1). Четвертое состояние (hover) относится к уровню CSS 2 и подразумевает изменение цвета ссылки при наведении на нее курсора мыши пользователя (событие работает в браузерах Internet Explorer 4 и выше, Opera 5 и выше, Netscape 6 и выше, Mozilla 1.0; браузеры более ранних версий, а также некоторые не особенно распространенные браузеры не поддерживают состояние hover). Эти состояния и будут являться псевдоклассами при записи правил отображения гиперссылок в стилевом шаблоне: A:link < color: blue; >A:active < text-decoration: underline; >A:visited < color: gray; >A:hover < color: orange; >В данном случае все присутствующие в электронном документе гиперссылки будут отображаться в соответствии с заданным стилевым правилом. Однако часто возникает необходимость визуально выделить одни ссылки

199 190 Часть II. Создание интерактивных HTML-документов относительно других. Для этого наряду с псевдоклассами используются обычные селекторы классов: A:active.red < color: red; >A:hover.red ( color: blue; > A:active.white < color: white; >A:hover.white ( color: black; > Применение таблиц стилей CSS Прежде всего следует отметить, что при определении стилевых таблиц далеко не всегда свойства стандартного HTML-элемента соответствуют описанию шаблона стиля. Например, в HTML для жирного начертания используется тег-контейнер <в> (<STRONG>), а в CSS конструкция font-weight: bold,- (для элемента или селектора). Для выделения текста подчеркиванием в HTML предусмотрен тег <и>, а в CSS используется запись вида text-decoration: underline; И Т. Д. В рамках данной книги, посвященной применению языка разметки HTML, сложно рассказать обо всех свойствах переопределения стиля с помощью CSS. Поэтому мы остановимся лишь на некоторых аспектах использования каскадных таблиц стилей, а именно: на форматировании текста, структурном форматировании и организации пользовательских форм. CSS в форматировании текста CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста (подчеркивание, курсив, жирное начертание, выбор гарнитуры и размер шрифта), с помощью средств CSS возможно изменять такие параметры, как межбуквенный и межстрочный интервал, тип регистра (строчные и прописные буквы) и многое другое. Единицы измерения в таблицах стилей Все единицы измерения свойств элементов в CSS можно разделить на абсолютные и относительные (табл. 9.1). Абсолютные единицы измерения используются в случае, когда известны характеристики того устройства, которое отображает информацию. Относительные единицы измерения определяют масштаб форматируемого элемента относительно других элементов, что позволяет сохранить первозданность документа при выводе на передающее устройство, характеристики которого заранее не известны.

200 Глава 9. CSS и Dynamic HTML просто и привлекательно! 191 Таблица 9.1. Единицы измерения CSS Абсолютные in (дюйм

2,5 см) mm (миллиметр) cm (сантиметр) pt (пункт

1/7 дюйма) Относительные em (высота шрифта элемента) ех (высота буквы х) рх (пиксел) % (процентное соотношение) рс (пика = 12 пунктов) В табл. 9.2 приведены наиболее распространенные свойства форматирования текста в CSS. Таблица 9.2. Свойства форматирования текста в CSS Свойство font-family font-size font-style font-weight font-variant text-decoration text-align text-transform letter-spacing line-height Color Background-color Формат записи font-family: Tahoma, Arial; font-size: font-style: llpx; italic; font-weight: bold; font-variant: small-caps; text-decoration: underline; text-align: right/- text-transform: uppercase; letter-spacing: lem; line-height: 5mm; color: #FFFFFF; background-color: white; Функция Выбор гарнитуры для отображения (допускается перечисление нескольких названий через запятую) Размер шрифта Выбор наклона текста (курсив) Наличие/отсутствие начертания жирного Преобразование строчных букв в прописные с изменением пропорций Подчеркивание текста Определение типа выравнивания текста Выбор регистра букв Межбуквенный интервал Межстрочный интервал Цвет текста Цвет фона текста

201 192 Часть II. Создание интерактивных HTML-документов Рассмотрим на примере (рис. 9.1, листинг 9.2) некоторые свойства форматирования текста в CSS. КЯ Форматирование текста в CSS - Microsoft Internet Explo. ШЕшЕ gle Edit View Favorites Tools Help Back "crv.-',, Stop Refresh Home j Search Favorites CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML, Помимо способов выделения текста (подчеркивание, курсив, жирное Начертание, выбор гарнитуры И размер шрифта), С помощью средств CSS возможно изменять такие параметры, как м е ж б у к в е н н ы и и межстрочный интервал, ТИП РЕГИСТРА (строчные и прописные буквы) и многое другое. J I jjjj My Computer Рис Форматирование текста в CSS Листинг 9.2. Форматирование текста в CSS <HTML> <HEAD> <Т1ТЬЕ>Форматирование текста в CSS</TITLE> <STYLE TYPE="text/css"> <!.text < font-family: Tahoma; color: ; line-height: 7mm; font-size: 12pt; >fkursiv < font-style: italic; >SPAN. font < font-size: llpx; >.color < background-color: #CECECE; ></STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO' VLINK="blue">

202 Глава 9. CSS и Dynamic HTML

просто и привлекательно! 193 <FONT CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста (<FONT STYLE="text-decoration: underline;">подчеркивание</ро Г>, <FONT <FONT STYLE="font-weight: bold;">жирное начертание</ео Г>, <FONT STYLE= "font-family: Times New Roman;">выбор гарнитуры</роыт> и <SPAN шpифтa</span>), с помощью средств CSS возможно <FONT СЬАЗЗ="со1ог">изменять такие параметры</роыт>, как <FONT STYLE= "letter-spacing: Зрх;">мeжбyквeнный</FONT> и межстрочный интервал, <FONT STYLE="text-transform: uppercase;">тип регистра</еомт> (строчные и прописные буквы) и многое другое. </FONT> </BODY> </HTML> Структурное форматирование Также каскадные таблицы стилей CSS привнесли много нового и заметно расширили функциональность форматирования структурных элементов электронного документа: р, DIV и пр. В табл. 9.3 приведены наиболее распространенные свойства структурного форматирования в CSS. Таблица 9.3. Свойства структурного форматирования в CSS Свойство border- width border-style border-color list-style-type list-style-image margin padding Формат записи border-width: 20рх; border-style : solid; border-color: gray; list-style-type: square; list-style-image: url(«bullet.gif"); margin: Ipx 2px Зрх 4px; padding-top: loem; padding-right: 25px; Функция Ширина границы структурного элемента Тип декоративного отображения границы элемента Цвет границы структурного элемента Тип нумерованного или маркированного списка Указание пути к графическому маркеру Определение размера поля относительно верхнего, правого, нижнего и левого края структурного элемента Определение отступа от верхнего, правого, нижнего и левого края структурного элемента

203 194 _ Часть II. Создание интерактивных HTML-документов Свойство Формат записи Функция Таблица 9.3 (окончание) width width: ЗООрх; Ширина структурного элемента height height: 120px; Высота структурного элемента background-color background-color: Цвет фона структурного элемента #СЕСЕСЕ; float float: left; Плавающее расположение структурного элемента относительно других элементов Рассмотрим на примере (листинг 9.3, рис. 9.2) некоторые свойства структурного форматирования в CSS.! Листинг 9.3. Структурное форматирование в CSS <HTML> <HEAD> <Т1ТЬЕ>Структурное форматирование в CSS</TITLE> <STYLE TYPE="text/css">.text < font-family: Tahoma; color: #003366; line-height: 7mm; font-size: 12pt; margin: lopx lopx lopx lopx; padding-left: 15px; padding-right: 15px; border-color: black; border-style: dotted; background-color: #COCOCO; width: SOOpx; text-align: justify; >#kursiv < font-style: italic; >SPAN. font < font-size: llpx; >.color < background-color: #CECECE; >IMG < float: left; width: loopx; height: loopx; >LI > </STYLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="black" LINK="#OOFFOO" ALINK="#OOFFOO VLINK="blue">

204 Глава 9. CSS и Dynamic HTML просто и привлекательно! 195 <Р <IMG SRC="picture.gif ">CSS предоставляет разработчику электронных документов гораздо более широкий набор возможностей работы с текстовой информацией, нежели стандартный HTML. Помимо способов выделения текста: <UL> <LIXFONT STYLE="text-decoration: underline; ">подчеркивание</ромт> <LIXFONT <LIXFONT STYLE=" font -weight: bold; ">жирное начертание</ронт> <LIXFONT STYLE="font-family: Times New Roman; ">выбор гарнитуры</г(жг> <LIXSPAN шрифта</зра >) </UL> <P с помощью средств CSS возможно <FONT С1АЗЗ="со1ог">изменять такие параметры</роот>, как <FONT STYLE=" letter-spacing: Зрх; ">межбуквенный</гоот> и межстрочный интервал, <FONT STYLE="text-transform: uppercase; ">тип реrnctpa</font> (строчные и прописные буквы) и многое другое. </BODY> </HTML> 61e Ed* Vie* Favorites idols цлр " - Microsoft Internet Explorer! Beck Slop ReliKh Home 1 Search Favotiles Hisloiy i Mai Siee Prrt ЕЛ ess предоставляе'г разработчику электронных документов гораздо более широкий набор возможностей - работы с текстовой информацией, нежели 1 стандартный HTML. Помимо способов выделения текста. -.. а о подчеркивание о курене о жирное начертание о выбор гарнитуры О рымвр шрифт*), с помощью федств CSS возможно изменять такие параметры, :'.как межбукеенный и /межстрочный интервал, ТИП : РЕГИСТРА (строчные и прописное буквы) и t^woroe другое. [^ My Computer Рис Структурное форматирование в CSS

205 196 Часть II. Создание интерактивных HTML-документов Как видно из примера, некоторые структурные элементы позволяют применять свойства CSS, относящиеся к форматированию текста: text-align, background-color и др. Таким образом, при формировании таблиц стилей допускается сочетание свойств CSS как для текстового, так и для структурного форматирования. Пользовательские формы в CSS Язык разметки HTML предлагает разработчику электронных документов широкий набор возможностей по организации пользовательских форм. Однако при развитой функциональности внешний вид всевозможных текстовых полей, переключателей, ниспадающих меню зачастую оставляет желать лучшего. Это досадное упущение компенсируется посредством таблиц стилей CSS. В табл. 9.4 приведены наиболее распространенные свойства пользовательских форм в CSS. Свойство Формат записи Функция Таблица 9.4. Пользовательские формы в CSS Background-color border-width border-style border-color border-top border-right border-bottom border-left font-family font-size font-weight margin padding width height background-color: white; border-width: Ipx; border-style: solid; border-color: #003366; border-top: Ipx; border-right: 2px; border-bottom: 3px; border-left: 4px; font-family: Tahoma; font-size: 12em; font-weight: bold; margin: 2px 2px 2px 2px padding-top: Ipx; padding-right: 2px; width: 200px; height: 50px; Цвет фона элемента формы Толщина рамки вокруг элемента формы Тип декоративного отображения рамки вокруг элемента формы Цвет рамки вокруг элемента формы Толщина рамки для верхней, правой, нижней и левой части элемента формы Свойства текста внутри элемента формы (аналогичны свойствам срорматирования обычного текста) Размер поля вокруг элемента формы (вверху, справа, внизу, слева) Размер внутреннего отступа от края элемента формы Ширина элемента формы Высота элемента формы

207 198 _ Часть II. Создание интерактивных HTML-документов <TABI,E BORDER="0" CELLPADDING="5" CELLSPACING="3" ALIGN="center" WIDTH="98%"> <TR> <TH BGCOLOR="#999999" ИЮТН="50%">Личные данные</тн> <TH BGCOLOR="#999999" И10ТН="50%">Увлечения<:/ТН> </TR> <TR> <TD VALIGN="top" BGCOLOR="#EEEEEE" WIDTH="50%"> Ваше имя : <BR> <INPUT TYPE="text" SIZE="30" MAXLENGTH="35" NAME="name" <BR> Ваш пароль : <BR> <INPUT TYPE="password" SIZE="30" MAXLENGTH="35" NAME="password" <BR> Ваша фотография : <BR> <INPUT TYPE="file" SIZE="18" NAME="photo" </TD> <TD VALIGN="top" BGCOLOR» "#EEEEEE" WIDTH="50%"> <INPUT TYPE="checkbox" NAME="hobby" VALUE="computers" СНЕСКЕОЖомпыотеры и Интернет <BR> <INPOT TYPE="checkbox" NAME="hobby" УАЬиЕ="аг1;">Литература и искусство <BR> <INPUT TYPE=" checkbox" NAME="hobby" VALUE="music">My3biKa и танцы <BR> <INPUT TYPE="checkbox" NAME="hobby" УАШЕ="аиЛо">Автомобили <BR> <INPUT TYPE="checkbox" NAME="hobby" VALUE="sport">CnopT и активный отдых </TD> </TR> <TR> <TH BGCOLOR="#999999" WIDTH="50%">MeCTO житель ства</тн> <TH BGCOLOR="#999999" ИЮТН="50%"Жомментарии</ТН> </TR> <TR> <TD VALIGN="top" BGCOLOR="#EEEEEE" WIDTH="50%"> <SELECT NAME="city" SIZE="5" STYLE="font-family: Verdana; font-size: <OPTION VALUE="" STYLE="background-color: tcecece; "> --- Выберите город ---

208 Глава 9. CSS и Dynamic HTML просто и привлекательно! 199 <OPTION VALUE="Moscow">MocKBa <OPTION VALUE="Spb" STYLE="background-color: #CECECE;">Санкт-Петербург <OPTION VALUE="Samara">CaMapa <OPTION VALUE="Ryazan" STYLE="background-color: icecece;">рязань <OPTION VALUE="Krasnoyarsk">KpacHOHpCK <OPTION VALUE="Komsomolsk" STYLE="background-color: ICECECE; "Жомсомольск-на-Амуре <OPTION VALUE="Vladivostok">Bnafl OCTOK </SELECT> <BRXBR> <SELECT STYLE="font-family: Verdana; font-size: llpx;"> <OPTION VALUE=""> Выберите страну - <OPTION VALUE="Russia">PoccMH <OPTION VALUE="England">Aнглия <OPTION VALUE="USA">CU1A <OPTION УАШЕ="Сеггаапу">Германия <OPTION УАШЕ="Ггапсе">Франция </SELECT> </TD>,<TD VALIGN="top" BGCOLOR="#EEEEEE" WIDTH="50%"> <TEXTAREA COLS="25" ROWS="5" NAME="comments" <BR> <INPUT TYPE="radio" NAME="site" VALUE="first" СНЕСКЕО>Я впервые на этом сайте <BR> <INPUT TYPE="radio" NAME="site" VALUE="not_first">H тут не в первый раз </TD> </TR> <TR> <TD COLSPAN="2" ALIGN="center" BGCOLOR="#999900"> <INPUT TYPE="submit" УАШЕ="Отправить" TYPE="reset" 7АШЕ="Очистить" </TD> </TR> </TABLE> </FORM> </BODY> </HTML>

209 200 Часть II. Создание интерактивных HTML-документов ' ^: v ""*. ''& ^ : 4 v -a 21 3"k> 4-"" ; а»' я Toots Це!р : Sack. FpfwafCf Stop Refresh.Home Seech Favorites History M«l Size '.".'Print Edit ПОЛЬЗОВАТЕЛЬСКАЯ АНКЕТА баш пароль; Ваша фотография: j Место жительстве f? Компьютеры и Интернет Г" Литература и искусство Г" Музыка и танцы I Автомобили Г" Спорт и активный отдых Выберите город Москва Санкт-Петербург Самара Рязань J --- Выберите страну - ^ Я впервые на зтом сайте * Я тут ие Б первый раз nj My Computer Рис Пользовательские формы в CSS D Е^е Edit View Navigation Bookmarks Messaging News Window Це1р, F-.w-:;d Reload Home Hotlist Print New ПОЛЬЗОВАТЕЛЬСКАЯ АНКЕТА Ваша фотография; Р Компьютеры и Интернет Г" Литература и искусство Г" Музыка и танцы Г

А&томобили Г" Спорт и активный отдых - Выберите город --- Москва Санкт-Петербург Самара Рязань Место жительства J--- Выберите страну - (^ Я впервые на зтом сайте (

Я тут не в первый раз [3 Пояьаовательскив. Рис Пользовательские формы в браузере Opera 6 (реализация с CSS)

210 Глава 9. CSS и Dynamic HTML просто и привлекательно! 201 Fife Edit View Search Qo gookmarks Tasks Help ^0.0 Q Q I Home gg Netscape O % Search й Shop ^Bookmarks ^ Net2Phone ПОЛЬЗОВАТЕЛЬСКАЯ АНКЕТА ** Компьютеры и Интернет I Литература и искусство I Музыка и таниы Автомобили I Спорт и акти&ный отдых Выберите город Москва Санкт-Петербург Самара Рязань Е2 -ЕР Рис Пользовательские формы в браузере Netscape 6.2 (реализация с CSS) Не Edit View So Communicator Нв р j So(o: /hlmls/lorrn-css.hlml ЫМ Menag» 'gl WabMJ ' Hadio Д1 People glyelto»pag«! g Download 'Sji Calendar ',_j Oannete ПОЛЬЗОВАТЕЛЬСКАЯ АНКЕТА? Комп*ют«р*1 и 11 Г Лит*р*тур» и искусств Г" Нуанк* и танцы I Аетомобили Г Спорт и активный отлых В»ш< фотографии; Browse Вибврит* город - *] Санкт-Петербург Самара * Я in*pent w» >тси сайт ' Я тут нс в первый pss Рис Пользовательские формы в браузере Netscape Navigator 4.7 (реализация с CSS)..ca

211 202 Часть II. Создание интерактивных HTML-документов Чтобы понять превосходство стилевых шаблонов в организации пользовательских форм, просто сравните рис. 9.3 (применение таблиц стилей CSS) и рис (стандартные элементы форм HTML). Однако и здесь есть подводные камни. Если, к примеру, Internet Explorer поддерживает практически все свойства CSS 1 и CSS 2, то другие браузеры (в особенности более ранних версий) могут искажать или попросту не отображать стилевые шаблоны (рис. 9.4). Браузер Opera 6 не отображает цвет фона для элементов списка SELECT, не поддерживает свойство border-style в текстовых полях INPUT, свойство color в наименовании кнопок подтверждения (Отправить) и отмены (Очистить). Браузер Netscape 6.2 (рис. 9.5) более лоялен к отображению свойств стилевых шаблонов CSS, однако некорректно интерпретирует конструкцию INPUT TYpE="fiie" (загрузка файла с локального компьютера). В отличие от своей более усовершенствованной версии, Netscape Navigator 4.7 выводит на экран полное нарушение стилей, а также компоновки электронного документа (рис. 9.6). Позиционирование объектов Исходя из концепции языка разметки HTML, все элементы документа выводятся браузером в той последовательности, в какой размещены теговые конструкции в коде. CSS (уровень 2) позволяет задавать порядок и последовательность отображения тех или иных HTML-элементов в зависимости от определенных событий на странице или манипуляций, осуществляемых со стороны пользователя. Другими словами, с помощью средств CSS можно прибегнуть к позиционированию (пространственному расположению) необходимых объектов в пределах электронного документа. Существуют два типа визуального позиционирования элементов: абсолютное и относительное. Для описания каждого типа используются специальные свойства position, top И left. Абсолютное позиционирование Абсолютное позиционирование подразумевает четкое фиксирование выбранного элемента на странице, независимо от остальных элементов документа, например: <IMG SRC="picture.gif" WIDTH="100" HEIGHT="100" ALT="Рисунок" STYLE="position: absolute; top: lopx; left: 25px;"> В данном случае графическое изображение абсолютно спозиционировано и размещается в 10 пикселах от верхнего и в 25 пикселах от левого края

212 Глава 9. CSS и Dynamic HTML просто и привлекательно! 203 своего родительского элемента (в качестве родительского элемента выступает верхняя левая точка структуры документа). Относительное позиционирование Относительное позиционирование позволяет расположить выбранный объект в зависимости от размещения остальных элементов документа (т. е. относительно других объектов страницы), например: <DIV STYLE="position: relative; top: 50px; left: 50px;"> Dynamic HTML Dynamic HTML или динамический HTML не является отдельным языком программирования или разметки документа. Это всего лишь технология, реализующая электронные документы с динамически изменяющимся содержанием. Реализация динамического HTML строится на трех компонентах: П HTML HyperText Markup Language. Простой язык разметки гипертекстовых документов; П CSS Cascading Style Sheets. Каскадные таблицы стилей HTMLдокумента; П JavaScript клиентский язык программирования (выполняется не на сервере, а непосредственно в браузере пользователя на его локальном компьютере). Возможный аналог VBScript, JScript. Эти три компонента образуют важнейшую структуру под названием Document Object Model, DOM (Объектная модель документа), которая в дополнение к простоте HTML и изяществу CSS обладает свойством возможности динамического изменения содержания без перезагрузки электронного документа. К сожалению, объектная модель DHTML (Dynamic HTML), входящая в состав Internet Explorer (начиная с версии 4.01), по многим параметрам не поддерживается браузерами других производителей (например, Opera или Netscape), что накладывает определенные ограничения на процесс разработки интерактивных документов с динамическим содержанием. Создание визуальных эффектов Динамический HTML позволяет разработчику создать в пределах электронного документа рабочий инструментарий, позволяющий пользователю манипулировать содержанием страницы, видом и расположением объектов или элементов и т. д.

213 204 Часть II. Создание интерактивных HTML-документов Рассмотрим действие Dynamic HTML на примере динамических информационных блоков и применения визуальных фильтров для графических изображений. Динамические блоки Область применения динамических информационных блоков чрезвычайно широка, поэтому остановимся лишь на одном, достаточно распространенном случае. Предположим, что на сайте расположена карта России с нанесенными на ней названиями городов. Посетитель должен быстро и в удобном виде получить информацию по каждому из городов. Какие могут быть способы реализации данной задачи? Разрезать карту на части или задать активные области-изображения (Imagemap) для нее? Неудобно, потому что каждый раз посетитель будет переходить по ссылке и назад, что снова потребует загрузки графического файла. Поместить нужный текст в поле ALT, чтобы тот отображался в виде всплывающей подсказки при наведении курсора? Бессмысленно, поскольку подсказка через несколько секунд исчезнет, а текст может быть большим (десятки предложений и т. п.). Самый подходящий и эффективный способ прибегнуть к помощи Dynamic HTML в совокупности с Imagemap. В этом случае при наведении курсора мыши на заданную активную область карты в определенном месте страницы появится информация о городе (как текстовая, так и графическая). Такой подход имеет два достоинства корректная работа (что в Internet Explorer, что в Netscape Navigator), да еще экономия времени посетителя (графика загружается только один раз, а все действия выполняются непосредственно из кода текущего электронного документа). Но для этого прежде всего необходимо определить JavaScript-сценарий в разделе HEAD (листинг 9.5): Листинг 9.5. JavaScript-сценарий для динамических информационных блоков j <SCRIPT LANGUAGE»"JavaScriptl.2"> <! var ie = document.all? 1 : 0; var ns = document.layers? 1 : 0; var topcss = 165; if (ns) topcss = 200; function showlayer(name)

214 Глава 9. CSS и Dynamic HTML просто и привлекательно! 205 if (ie) document.all[name].style.visibility = "visible"; else if (ns) document.layers[name].visibility = "show"; > function hidelayer(name) ( if (ie) document.all[name].style.visibility = "hidden"; else if (ns) document.layers[name].visibility = "hide"; > II > </SCRIPT> Далее определяем координаты информационных слоев (листинг 9.6), которые невидимы до тех пор, пока курсор мыши не переместится на активную область (координаты размещаются в начале раздела BODY): I Листинг 9.6. Координаты информационных слоев <STYLE TYPE="text/css"> <! #linkl < position: absolute; left: 160px; top: 250px; visibility: hidden; >Ilink2 < position: absolute; left: 160px; top: 250px; visibility: hidden; >ilink3 < position: absolute; left: 160px; top: 250px; visibility: hidden; ) #link4 < position: absolute; left: 160px; top: 250px; visibility: hidden; >II > </STYLE> В данном случае в качестве селектора стилевого шаблона используется идентификатор. Поле #link3