Автор: Мархвида И.В
Теги: компьютерная графика компьютерные технологии программирование интернет языки программирования язык программирования javascript
ISBN: 985-475-010-8
Год: 2002
Текст
Создание
Web-страниц:
UM
Java cript
AH09
И.В. Мархвида
Создание
Web-страниц:
ML
Java
cript
МИНСК ООО «ПОВОЕ ЗНАНИЕ» 2002
УДК 004.92
ББК32.973.26-018.2
М25
Мархвида И.В.
М25 Создание Web-страниц: HTML, CSS, JavaScript / И.В. Мархвида. — Мн.:
Новое знание, 2002. — 352 с.: ил.
ISBN 985-475-010-8.
Книга посвящена основным технологиям написания- Web-страниц: языку гипертек-
стовой разметки HTML, применению каскадных таблиц стилей CSS, а также созданию
сценариев на основе JavaScript. Подробно рассмотрены базовые понятия Web-програм-
мирования. Описаны наиболее применяемые элементы и методы создания эффективного
HTML-кода.
Книга может быть использована как пособие для начинающих разработчиков Web-
страниц, а также в качестве справочника по HTML, CSS и JavaScript.
УДК 004.92
ББК 32.973.26-018.2
ISBN 985-475-010-8
© Мархвида И.В., 2002
© Оформление. ООО «Новое знание»,
2002
ОГЛАВЛЕНИЕ
Введение.........................................9
Часть 1. Основные сведения. ... .,. .11
Глава 1. Интернет и Web. ... .13
Глава 2. URI — основа гиперссылки........................17
Глава 3. HTML - язык Web.. .... . . .18
Глава 4. Браузеры. .... .20
Глава 5. HTML: путь из недавнего прошлого
к светлому будущему .24
Глава 6. Инструментарий для разработки Web-документов . . 28
Часть 2. HTML ... .. . .31
Глава 7. Структура языка.................................35
7.1. Понятие элемента .... . .35
7.2. Атрибуты. . .38
7.3. Типы данных...............................39
7.4. Единицы измерения длины...................42
7.5. Два подхода к форматированию текста .43
7.6. Комментарии............................. 45
Глава 8. Структура HTML-документа . . .46
8.1. Информация о версии языка.
Элемент <!doctype>. .46
8.2. Элемент <html>. 48
8.3. Размещение контента. Элемент <body>. 49
Глава 9. Структурирование и разметка контента............51
9.1. Заголовки. Элементы <111 >, <112>,
<h3>, <114>, <115>, <116>.................51
9.2. Элементы встроенные и блочные.............54
9.3. Выделение блока. Элемент <div>,...........56
9.4. Встроенный блок. Элемент <span>...........57
9.5. Цитаты. Элемент <blockquote>. ... .58
9.6. Организация абзацев. Элемент <р>..........59
9.7. Перевод строки.
Элементы <br>, <nobr>, <wbr>. ............62
9.8. Списки. Элементы <ol>, <ul>, <li>.........66
4
Оглавление
.. .... i
9.9. Списки-определения.
Элементы <dl>, <dt>, <dd>. .69
9.10. Вывод отформатированного текста.
Элемент <рге>. .71
9.11. Разделитель. Элемент <hr>. .72
9.12. Элемент <address>. .74
Глава JO. Разметка текста.................................76
10.1. Элементы логического форматирования. .76
10.2. Элементы удаления и вставки .78
10.3. , Физическое форматирование текста.........79
10.4. Элемент <font>.............................81
10.5. Элемент <basefont> .82
Глава 11. Изображения. . .83
11.1. Элемент <img>. .84
11.2. Карта изображения. Элементы <тар>, <агеа>. 90
Глава 12. Мультимедийные элементы. .94
12.1. Элемент <object>. .... 94
12.2. Элемент <embed>;...........................98
12.3. Элемент < applets , 101
12.4. Элемент <param>, 103
Глава 13. Организация гиперссылок.......... . .. . .105
13.1. Элемент <а>. . . . .106
.13.2. Элемент <lir»k>...... .110
13.3. Элемент <base>„ . . . 112
Глава 14. Таблицы. ................. .113
14.1. Элемент <table>. : . 114
14.2. Элемент <caption>..... .......116
14.3. Группировка строк.
Элементы <thead>, <tfoot>, <tbody>. .117
14.4. Организация колонок.
Элементы <со1> и <colgroup>. .118
14.5. Организация строки. Элемент <tr>. .121
14.6. Элементы <th>, <td> . .. .122
14.7. Табличная верстка . "...'. . . . 127
Глава 15. Формы. . . . .130
15.1. Элемент <form>.................. .130
15.2. , Элемент <input>..........................134
Оглавление
5
15.3. Элемент <textarea>. .... .140
15.4. Кнопка. Элемент <button>. ......141
15.5. Выбор из списка. Элемент <select>. .143
15.6. Элементы <option> и <optgroup>. . . . .144
15.7. Связывание элементов формы. . .146
15.8. Элементы <fieldset>, <legend>. . . .147
Глава 16. Фреймы.......... .:...................... .151
16.1. Элемент <frameset>. .153
16.2. Элемент <frame>...........................154
16.3. Элемент <noframes> . .....................155
16.4. Особенности навигации
с использованием фреймов .156
16.5. Встроенные панели. Элемент <iframe>. .159
Глава 17. Раздел заголовков...............................163
17.1. Элемент <head>. .163
17.2. Элемент <meta>. . . . .164
17.3. Элемент <title>...........................166
17.4. Общие атрибуты. 167
Часть 3. CSS 169
Глава 18. Немного истории. ... . .. 171
Глава 19. Общая характеристика языка CSS . . . ...........173
Глава 20. Подключение таблиц стилей................... .. 177
20.1. Встроенные стили. .177
20.2. Глобальные таблицы стилей.
Элемент HTML <Style>............................178
20.3. Псевдо классы. ... ... .181
20.4. Псевдоэлементы.............................183
20.5. Внешние таблицы стилей .........« 183
20.6. Наследование. . .185
Глава 21. Свойства каскадных таблиц стилей. . .190
21.1. Управление цветом и фоном.................190
21.2. Шрифты. 193
21.3. Форматирование текста. .196
21.4. Блоки....... 198
21.5. Позиционирование блоков...................201
21.6. Визуализация..............................203
21.7. Свойства для форматирования таблиц,
списков и других элементов................205
6
Оглавление
' .... ~Z3
Глава 22. Фильтры .......................................... 209
22.1. Фильтр alpha................................. 209
22.2. Фильтр blur .... ..212
22.3. Фильтр chroma .213
22.4. Фильтр dropshadow......... . . . .214
22.5. Фильтр glow................................. .215
22.6. Фильтры flipv и fliph..........216
22.7. Фильтр gray. . . .216
22.8. Фильтр invert.......... .216
22.9. Фильтр mask...................................216
22.10. Фильтр shadow 217
22.11. Фильтр wave .... Р. ... . .218
Часть 4. JavaScript. ............................................221
Глава 23. События в НТМГ .................................. .226
Глава 24. Подключение скриптов...............................229
24.1. Встроенные скрипты.......................... .229
24.2. Элемент <script>..............................230
24.3. Подключение скриптов в элементах <script> . . 231
24.4. Подключение во внешнем файле. . . .233
Глава 25. Основы языка JavaScript 235
Глава 26. Базовая часть языка................................236
26.1. Переменные....................................236
26.2. Операторы. 238
26.3. Условные операторы и операторы циклов . . . .241
26.4. Функции..................... .243
26.5. Объекты...................................244
26.6. Особенности работы с объектами .246
26.7. Создание объекта пользователя . . . 248
Глава 27. Встроенные объекты............................... .250
27.1. Объект Array..................................250
27.2. Объект String. .... ...... .253
27.3. Объект Boolean................................257
27.4. Объект Number.................................257
27.5. Объект Date . , . 258
Оглавление 7
i"" , - । * —
27.6. Объект Math .263
27.7. Объект Function......................... 264
27.8. Объект Object. .267
27.9. Глобальные функции........................268
Глава 28. Объекты браузера................................271
28.1. Иерархия объектов. .271
28.2. Управление окном. Объект window. .272
28.3. Объект frames. .276
28.4. Объект history............................276
28.5. Объект location. .-. .277
28.6. Объект navigator. . . , . .278
28.7. Таймер. .281
Глава 29. Объектная модель документа .284
29.1. Объект document .285
29.2. Иерархия объектов документа...............285
29.3. Доступ к элементам ' .290
29.4. Прямой доступ .294
29.5. Дерево элементов. .294
Глава 30. События-объекты. .. 296
30.1. Связывание событий. .296
30.2. События, поддерживаемые JavaScript .299
30.3. Всплывание событий .305
30.4. Объект event .307
Глава 31. Динамическое форматирование. .310
31.1. Объект style. 310
31.2. Объект cssText . .. .312
31.3. Переключение стилей. .313
Глава 32. Динамическая верстка. .316
32.1. Генерация содержания методом write(). .316
32.2. Динамическое содержание. .317
32.3. ОбъектТех! Range........................ .321
32.4. Методы для разметки области TextRange .... 325
32.5. Методы для работы с TextRange.............327
Глава 33. Заключение......................................332
8 Оглавление
_ __________ft? 'и' — - - ...... ........
Приложения. . . .333
Основные
сведения
Интернет и Web
Глава 1
Своей современной огромной популярностью Интернет обязан
прежде всего службе Web. Новички часто считают эти понятия си-
нонимами, что не совсем верно.
Интернет — это всемирное объединение компьютеров, которые
могут обмениваться между собой информацией. Оценить гранди-
озность такого объединения можно, если вам удастся представить
ПО млн компьютеров. Трудно вообразить себе подобную цифру,
поскольку обыкновенный человек все, что превышает несколько де-
сятков, заменяет словом-понятием «много». Однако именно ПО млн
различных адресов было зарегистрировано к январю 2001 года ор-
ганизацией Internet Domain Survey (http://www.isc.org), зани-
мающейся исследованием роста Интернета.
Наиболее популярны IBM-совместимые компьютеры, которые
строятся на различных процессорах, материнских платах и т.д. По-
следние модели базируются на 32-ра 'рядном процессоре Pentium 4,
но в Интернете можно встретить и модели 386-й серии. Широко
используются машины и других типов, например, Macintosh, Ami-
ga, карманные компьютеры, ноутбуки, мэйнфреймы.
Таким образом, Интернет является межплатформенным объеди-
нением. Для каждого типа машин разрабатываются свои операци-
онные системы, которых в мире насчитывается более семидесяти.
Наиболее распространены операционные системы Windows 98, Win-
dows Millenium и Windows 2000. На январь 2001 года в Windows 98
работало около 59% пользователей Интернета.
Однако сегодня компьютер уже далеко не единственное средст-
во, обеспечивающее доступ в Интернет. Появляется все больше
специализированных устройств. Приставка WebTV позволяет путе-
шествовать по Интернету, сидя в гостиной у телевизора, который
используется как монитор, а пульт служит для управления (навига-
ции). Начался настоящий бум, связанный с дистанционным досту-
пом в Интернет. Про сотовые телефоны, передающие и принимаю-
щие информацию через Интернет, можно прочитать практически
в каждой компьютерной газете. В одной из них прямо было сказа-
но, что мобильные телефоны с Интернет-доступом не выпускает
сейчас только ленивый.
14 Часть 1. Основные сведения
-— — . т. — :— .. д
В ближайшем будущем информационные устройства станут раз-
нообразнее, приспосабливаясь к нуждам конкретных потребителей.
По прогнозам специалистов, к 2002 году 43% пользователей будут
иметь доступ в Интернет не традиционно, при помощи персональ-
ного компьютера, а при помощи новых аппаратных платформ.
Нужно обладать немалым воображением, чтобы представить, как
разработчикам удалось заставить это «вавилонское столпотворение»
понимать друг друга. Объединить же все это многообразие в огром-
ную целостную систему удалось благодаря двум факторам.
Первый фактор — единое адресное пространство. Каждый компью-
тер (устройство) в Интернете имеет собственное цифровое имя —
IP-адрес, благодаря которому его однозначно можно найти в Сети,
чтобы передать ему или запросить у него информацию. Этому циф-
ровому адресу, который насчитывает до 12 десятичных цифр (а в скором
времени это число будет расти), обычно соответствует буквенное до-
менное имя, которое больше подходит для человеческого восприятия.
Второй фактор — протоколы. Для объединения такого большого
числа компьютеров с разными операционными системами потре-
бовалось создание сложной логической системы обмена данными ме-
жду компьютерами. Ее основу составляют протоколы, то есть пра-
вила работы Сети. Неудивительно, что таких протоколов достаточно
много. Пытаясь систематизировать их, Международная организация
по стандартизации ISO (International Standards Organization) разра-
ботала семиуровневую модель Сети. На каждом уровне действуют
отдельные протоколы, которые решают свои типовые задачи.
Например, на прикладном уровне унифицируются данные, ко-
торые поступают от приложений. Для различных приложений раз-
работаны свои протоколы, скрывающиеся за аббревиатурами HTTP,
FTP, SMTP и другими, которые работают с разными типами ин-
формации. Короткие частные сообщения передаются по одним пра-
вилам, сообщения, которые должны быть доступны многим — по
другим. Передача файлов реализуется при помощи собственных про-
токолов и т.д. Профаммное обеспечение, разработанное в соответ-
ствии с этими протоколами разными производителями, единооб-
разно кодирует информацию и воспроизводит ее. Это означает, что
информация, отправленная с сервера на разные компьютеры, может
быть принята различными программами-клиентами, но текстовая
часть воспроизведется в виде текста, а для просмотра графической
части будут вызваны фафические программы.
Современные профаммы, предназначенные для работы в Сети,
часто состоят из двух частей, находящихся на компьютере пользо-
вателя (клиентская часть программы) и на сервере (профамма-сер-
вер). Первая вызывает профамму-сервер, которая и осуществляет
обслуживание, пересылая, например, сообщения электронной почты.
Глава 1. Интернет и Web
15
Широко распространены в Интернете почтовые серверы для пере-
дачи электронной почты, серверы для пересылки файлов, серверы
Web-страниц и др. Все они являются парными программами «кли-
ент-сервер», обменивающимися между собой информацией.
Совокупность различных прикладных программ-клиентов и серве-
ров, работающих по специальному протоколу с одним типом ин-
формации, образует отдельную технологию обмена информацией
в Интернете, называемую службой, или сервисом, Интернета. Элек-
тронная почта, служба работы с файлами, управление удаленным
компьютером — примеры различных служб Интернета.
Но экспоненциальный рост Интернета в последнее десятилетие
обусловлен популярностью службы, называемой Web, или WWW.
Три магические буквы WWW (World Wide Web) в переводе с анг-
лийского означают Всемирная паутина, или, по остроумному заме-
чанию одного из «сетевых граждан», — ППП (Повсеместно Протя-
нутая Паутина).
Web представляет сеть постоянно обновляющихся информацион-
ных ресурсов, организованных в виде библиотеки гипертекстовых
документов (далее будут встречаться синонимы: Web-страница,
HTML-страница, HTML-документ). Количество их перевалило за
миллиардную отметку. Созданию таких документов и посвящена
данная книга. Web-сервис посредством своих серверов, протоколов
и программ-клиентов, называемых браузерами, позволяет переда-
вать и представлять различную информацию (текстовую, графиче-
скую, мультимедийную и т.д.). Однако главную особенность представ-
ляют гиперссылки, связывающие между собой различные источники
по желанию разработчика. Совокупность связанных Web-страниц, те-
матически объединенных одним разработчиком, образует сайт (site).
Сайт может состоять из одной страницы, а может насчитывать и
сотни. Располагаются сайты на Web-серверах по всему миру. Коли-
чество Web-серверов удваивается быстрее, чем за полгода.
Web-страницы можно просматривать при помощи клиентской
программы — \К&Ъ-браузера,о котором речь пойдет дальше. При
загрузке Web-страницы ее временная копия создается на винчесте-
ре вашего компьютера.
Основу любой Web-страницы составляет гипертекст, то есть текст,
в котором содержатся гиперссылки. Они связывают информацию,
вызывая рисунки, фотографии, аудио- и видеовставки, Гиперссылка
позволяет одним щелчком мыши перейти от одного места просмат-
риваемого документа к другому так же легко, как и к документу,
размещенному на сервере в другом конце света. Каждый документ
обычно Связан со следующим и т.д. Ссылки, как нити паутины, со-
единяют между собой огромное количество документов на всем
земном шаре. Ссылки могут быть перекрестными, то есть на один
16
Часть 1. Основные сведения
документ можно ссылаться из разных первоначальных источников.
Именно перекрестные ссылки между документами превращают ги-
гантские массивы информации, накапливаемой в Сети, в единую
информационную систему.
В Интернете существовали и другие службы, осуществляющие
доступ к аналогичной информации, такие как Gopher, WAIS. Однако
гиперссылки оказались самым удобным способом организации ин-
формации, и Web, стремительно расширяясь, буквально выбросил
их на обочину магистрали развития информационных систем.
URI — основа гиперссылки
Глава 2.
Возможность организовывать гиперссылки появляется благодаря
тому, что каждый Web-документ, равно как и другие файлы-ресурсы,
имеет свой адрес, который указывает его координаты в сетевом про-
странстве. В последних спецификациях он называется URI (Universal
Resource Identificator) — Универсальный Идентификатор Ресурсов.
Часто встречающийся в литературе термин URL (Universal Resource
Locator) является подмножеством URI, а в контексте данной книги
они будут совпадать.
Структуру URI проще разобрать на примере.
http://www.wnk.bi z/some_directorу/index.html
5Г 2 T~ 4
1. Адрес читается слева направо — от общего к частному. Первая
часть адреса — http: / / — указывает тип сервиса, которым вы хотите
воспользоваться. В частности http: // указывает на протокол HTTP,
который использует Web-сервис, разбираемый нами сейчас. Далее бу-
дут встречаться и другие протоколы, например, mailto:// — обра-
щение к электронной почте. Заметим, что в Интернете применяются
соглашения операционной системы Unix, в которой для разделения
каталогов используется косая черта «/» (слеш), в отличие от DOS, где
при указании пути употребляется «обратный» слеш «\».
2. Вторая часть адреса, www.wnk.biz/, является доменным име-
нем сервера. Особенности образования этих имен приведены в при-
ложении 1.
3. Третья часть, some directory/, указывает путь (каталог
some_directory/) к файлу на сервере, который вы собираетесь
открывать.
4. Последним (index.html) следует имя самого файла, index,
и его расширение, html. Если имя файла отсутствует, то сервер от-
крывает страницу, заданную по умолчанию. Часто такая страница
.называется index.html, или index.htm, или default.htm. Она
служит начальной страницей, на которой есть гиперссылки, веду-
щие ко всем другим значимым страницам этого сайта.
HTML — язык Web
Глава 3
Web, будучи частью Интернета, является многоплатформенной
системой, то есть работает с различными компьютерами и циф-
ровыми устройствами (вплоть до бытовой техники). Чтобы сделать
информацию Web-страниц доступной для такого множества компью-
терных систем, создан универсальный язык HTML (HyperText Markup
Language) — язык разметки гипертекста. Благодаря популярности
Web язык HTML стал стандартом для оформления сетевых доку-
ментов.
Информация, закодированная при помощи этого языка, не яв-
ляется традиционной программой и не нуждается в компиляции,
другими словами, не переводится в машинный код. Она передается
с компьютера на компьютер в виде обычного текста, в который до-
бавлена специальная разметка HTML. Получив такой файл, брау-
зер отформатирует текст в соответствии с командами, оформив за-
головки и абзацы, подсчитает количество'слов в строке и произведет
ее перенос, выделит место под иконки и фотографии, вызовет изо-
бражения и т.д. Все это будет сформировано в зависимости от раз-
решения монитора и его цветности, наличия шрифтов, размеров
экрана и других особенностей пользовательской платформы и са-
мого браузера.
Операторы языка, называемые тегами, имеют вид угловых ско-
бок. Тег в переводе с английского означает «метка». Тегами размеча-
ют текст. Эта разметка описывает форматирование текста, разделяя
его на логические части, выделяя заголовки, абзацы и т.п. Харак-
терный пример размеченного текста представлен на рис. 1.L Кроме
того, язык содержит дополнительные элементы, из которых самый
главный — гиперссылка. Обращение к гиперссылке, как уже гово-
рилось, позволяет перейти к другой части документа или загрузить
новый.
Забегая несколько вперед, отметим, что если вы при помощи
браузера Просматриваете какую-либо страницу, то всегда можете
увидеть и ее НТ\^-«внутренности», то есть исходный текст. Для
этого ее достаточно открыть в обычном текстовом редакторе, напри-
мер, Notepad («Блокнот»). Не рекомендуется использовать MS Word
и прочие полнофункциональные процессоры, которые не позволяют
Глава 3. HTML — ЯЗЫК Web
19
Представление на экране
5 Изображения Micrc’olt Internet •_xpioiei
!£айл Правка £иа Сервис £праекл
ЗИЯ 13
Пример параметра sr&<>mg src="http.//wjwag.rLi/!>nksJiogo_l>riks.gf ">
—___ _____________—/
По умолчанию (параметр align f
срез рисунка совпадает со срезе
буква. Размер рисунка иовпадае-
| 4^ Й зображу ния Б локнот
5Е«йл Прсвкд ПсаСК Справка
C//DTD HTML 4. о П ЕН
• Пример параметра ай: <imgelb
............................
^Готова
<» DOCTVPE HTML PUBLIC
<ntnl>
<head>
<Г1Не>Изображения </titl
<STVLE TVPE-"text/css
span.cod{text-transforn^Lowercase ; font-style:itali
—X/STVLE>
</head>
(body
<ul>
style-"backgrou
: #ffffff“>
^Д~1>Принер параметра <en>src</en>^ <sp«
<ЬгХйгл-------------------------
<ing src-"iogo_links.giF" border-1 alt-'
рисунок оудет прижат влево и нижний срег
Размер рисунка совпадает с естественным.
<brXbr>
Рис. 1.1. Представление Web-страницы в браузере и текстовом
редакторе Notepad. В последнем можно различить командвт-теги
и содержательную часть текста
редактировать HTML-код непосредственно. В наиболее популярном
браузере Internet Explorer это можно сделать, выбрав пункт меню
File ► Edit with Windows Notepad (Файл ► Править в текстовом
редакторе «Блокнот») или View ► View HTML (Вид ► В виде
HTML). При этом для Notepad открывается новое окно, что также
показано на рис. 1.1.
Браузеры
1 I I » II —- _. 1^—
Глава 4
Простейший HTML-документ, или Web-страница, удивляет своей
лаконичностью. Однако сам документ немногого стоит без програм-
мы просмотра Web-страниц — браузера Насколько прост документ,
настолько сложен современный браузер, полный комплект кодов-
которого измеряется несколькими мегабайтами. В результате взаи-
модействия браузера с HTML-документом и появляются те шедев-
ры, которые отображаются на экране вашего монитора.
Термин «браузер» прочно укоренился в компьютерной среде. Са-
мо слово происходит от английского browser, что в переводе означает
«просмотрщик», то есть программа для просмотра. В русскоязычных
версиях операционной системы Windows фигурирует официальный
(не особо удачный) термин «обозреватель», который плохо прижива-
ется. Под просмотром еще недавно подразумевалось отображение
текста Web-страниц. Однако современные браузеры (пятого поколе-
ния) представляют собой интегрированные пакеты программ, имею-
щие более широкие возможности. Они могут работать не только
с языком HTML, но и воспринимать программные инструкции на
другихязыках, например, JavaScript.
В результате обработки браузером текст документа превращается
в достаточно сложный исполняемый код. Компиляция кода на сто-
роне клиента имеет свои достоинства и недостатки, хотя первых
значительно больше. Во-первых, процесс обработки информации
распределяется по большому числу компьютеров (каждый обраба-
тывает ее сам), разгружая сервер и делая систему более устойчивой.
Во-вторых, документ или программная инструкция отделяется от
кода, который его отображает, что позволяет значительно снизить
количество передаваемой информации, поскольку размер исход-
ных текстов гораздо меньше исполняемого кода. Несмотря на все
возрастающее увеличение скорости передачи информации, закон
Мэрфи и его следствия продолжат действовать, приводя к тому, что
емкости любого пропускного канала будет недостаточно для нор-
мальной работы системы :-). В-третьих, на разных платформах уста-
навливаются свои программы-клиенты, однотипно (но не обязатель-
но одинаково) отображающие документ, что обеспечивает кроссплат -
форменность всей службы, то есть независимость от разнообразия
Глава 4. Браузеры
21
аппаратуры и операционных систем. Все эти черты тесно перепле-
таются между собой и кажутся сейчас вполне естественными, хотя
за этими концепциями стоит труд многих людей. Из недостатков
можно отметитв увеличение времени, необходимого для воспроизве-
дения документа.
Среди возможностей современного брау tepa можно отметить сред-
ства просмотра содержимого Web-страниц, то есть гипертекста с мно-
жеством ссылок, графики, аудио- и видеоматериалов, прослушива-
ние потокового аудио, доступ к электронной почте (e-mail),
серверам FTP и Gopher, телеконференциям и беседам в реальном
времени, встроенные средства поиска, автоматизированное обновле-
ние информации с последующим просмотром в автономном
(off-line) режиме, сохранение информации о посещении интерес-
ных мест в Интернете, возможность осуществления электронной
торговли, исполнение различных программ-сценариев и т.д.
Работа с Web-страницами подразумевает также навигацию, т.е. пе-
реход по гиперссылкам. Для пользования гиперссылка внешне вы-
глядит как выделенный фрагмент текста (обычно подчеркнутый) или
рисунок, с которыми связан адрес другого Web-документа. Некото-
рые рисунки-ссылки объединяются в большое изображение, образуя
графические карты. Указатель мыши при попадании на гиперссылку
любого вида меняет свою форму. Щелчок по гиперссылке левой кноп-
кой мыши приводит к загрузке новой затребованной страницы.
Ссылок на страницах так много, и переходы по ним бывают так
непредсказуемы, что необходим навык, чтобы не заблудиться в мно-
гообразии Web-документов. Для этого браузер имеет кнопки Forward
(Вперед) и Back (Назад), которые позволяют вернуться на недавно
просмотренную нужную страницу.
К навигации можно отнести и поиск страниц по определенным
признакам, закладки на интересных страницах. Из других функций
браузера стоит упомянуть ведение учета посещений, остановку сис-
темы, обеспечение безопасной передачи данных, предотвращение
и ограничение загрузки нежелательной информации и т.п.
Наиболее популярные сегодня
браузеры — это Microsoft Internet
Explorer версии 5.0 (самая исполь-
зуемая на сегодняшний день), 5.5
и 6) и Netscape Navigator (вер-
сии 4.7 и 6). Из раритетов можно
упомянуть текстовый браузер Lynx
для систем, работающих под Unix
на машинах Предыдущих ПОКОЛе-
ний, отличающийся недоступной
ныне компактностью.
Microsoft IE
22
Часть 1. Основные сведения
OPERA
software
Установка, или, как иногда говорят, инсталляция, браузера не
представляет особых трудностей и мало чем отличается от установки
другого программного обеспечения. Более того, если вы — начи-
нающий пользователь, то нелишним будет просмотреть еще раз
программы, установленные на вашем компьютере.
Если у вас установлена операционная система Windows,
то вы наверняка можете пользоваться и программой Inter-
net Explorer, об этом позаботилась фирма Microsoft. Самую
свежую информацию об этом браузере можно получить на
сервере http://www.microsoft.com.Компания Microsoft начала
разрабатывать свои браузеры с середины 1990-х годов и стала делать
это, как обычно, масштабно, практически вытеснив конкурентов
(рис. 1.2). Обусловлено это не столько качеством браузера (все совре-
менные браузеры практически равноценны), сколько интеграцией
Internet Explorer в операционную систему, где он стал единым
средством просмотра таких разных систем, как локальные диски,
сетевые диски и удаленные Web-узлы. Получив бесплатный доброт-
ный продукт, нужно иметь веские причины, чтобы тратить время
на установку чего-то другого. Конкурентная гонка привела к тому,
что сейчас все основные браузеры поставляются, как правило, бес-
платно.
Совсем недавно абсолютное первенство в этой области
было у компании Netscape с браузером Navigator. Послед-
ний в современном виде входит в состав пакета Netscape
Communicator. Неискушенному пользователю сложно сде-
лать выбор в пользу той или иной программы, в то время как у опыт-
ных пользователей часто можно встретить оба браузера сразу, пре-
имущества которых они используют в зависимости от решаемых
задач. В некоторых случаях на Web-страницах встречаются сообще-
ния о том, какой браузер наилучшим образом отобразит информацию
этой страницы. Netscape Navigator поддерживается большим числом
операционных систем. В настоящее время сектор рынка, занимае-
мый компанией, стремительно сокращается и Netscape Navigator мо-
жет прекратить свое существование как самостоятельный продукт.
Последним событием в мире браузеров стало появле-
ние браузера Opera, разработанного норвежской компанией
Opera Software (http: //www. opera. com). В марте 2000 года
появилась Opera 4, в декабре — версия 5.0, а в ноябре 2001 -
6.0. Данный браузер имеет следующие особенности:
♦ самый компактный (базовая версия занимает 3,3 Мб);
♦ самый быстрый полнофункциональный браузер;
* имеет возможность масштабирования страниц в сторону уве-
личения (до 100%) и уменьшения;
♦ многооконный, то есть в одной оболочке открывает много
дочерних окон-страниц.
Глава 4. Браузеры
23
Браузер быстро набирает популярность, и, хочется верить, его
ждет блестящее будущее.
Особое место среди браузеров занимают так называемые offline-
браузеры (Teleport Pro, Black Widow, последний назван по имени
знаменитого ядовитого паука «черная вдова», самка которого имеет
дурную привычку пожирать самца после спаривания), — одна из раз-
новидностей программ-пауков. Они позволяют обнаруживать по ссыл-
кам все файлы сайта и целиком копировать сайт на ваш компьютер,
а затем просматривать их в спокойной обстановке. Такие программы
позволяют экономить время, проводимое в Сети, что может быть су-
щественно при высоких тарифах и плохой связи. Часто такие про-
граммы имеют собственный браузер-просмотрщик.
Список других доступных браузеров можно найти на странице
http://www.libpng.org/pub/png/pngapbr.html.
HTML:
путь из недавнего прошлого
к светлому будущему
Глава 5
Археологи и летописцы Интернета, производя виртуальные рас-
копки, обнаружили, что Web зародилась еще до Второй мировой
войны. Но правильным будет изобретателем Web считать все-таки
англичанина Тима Бернерса-Ли. Прообразом Web послужила про-
грамма, написанная им в CERN (Conseil Europeen pour la Recherche
Nucleaire) — Европейская лаборатория ядерных исследований (ЦЕРН),
находящаяся в Женеве. Научные сотрудники, заставшие те недале-
кие времена, еще, наверное, помнят такие программы форматиро-
вания текста, как Тех, которые использовались при подготовке статей
в электронном виде для отправки в журналы. Подобные програм-
мы, которыми пользовался и Тим, были довольно громоздкими.
Цель Тима заключалась в том, чтобы предложить нечто более про-
стое, такую форму представления информации, которую бы пони-
мал и простенький терминал, и графическая станция. В этой про-
грамме использовались гиперссылки. Сам проект, названный WWW,
был предложен им в 1989 году, а в 1991 году в Интернете появились
первые Web-страницы. Страницы размечались при помощи HTML,
передавались при помощи несложного протокола HTTP (HyperText
Transport Protocol — протокол передачи гипертекста) и просматри-
вались при помощи браузеров, названия которых помнят уже толь-
ко историки. Именно это буквенное сочетание (HTTP) встречается
в начале адресов Web-страниц. Первая версия самого языка HTML
документирована в 1992 году.
Образованная на нескольких серверах служба WWW быстро раз-
расталась, и ряд компаний взялся за разработку и выпуск своих
браузеров. Этапным шагом в развитии Интернета стала разработка
Марком Андриссеном и Эриком Бином удачного браузера Mosaic.
Чтобы расширить возможности представления Web-страниц, компа-
нии начали вводить новые команды-теги, которые интерпретирова-
лись только их собственными браузерами. Что было делать «бедным»
Глава 5. HTML: путь из недавнего прошлого к светлому будущему 25
I
Web-дизайнерам, которых довольно много появилось к тому времени,
на кого ориентироваться — браузеры одних разработчиков не по-
нимали тегов других и наоборот. В 1994 году, чтобы покончить со
всем этим безобразием и навести порядок, появился консорциум
W3C, который до сих пор является влиятельнейшей организацией,
определяющей развитие и стандартизацию этой части Интернета.
В том же 1994 году была описана версия HTML 3.0, которая, хо-
тя и не была признана стандартом, определяла новые направления
дальнейшего развития, такие как, например, таблицы, апплеты,
математические выражения.
Тем временем на рынке браузеров выделились два гиганта — Mi-
crosoft Internet Explorer и Netscape Communicator. Между ними и раз-
вернулась основная конкурентная борьба за миллионы пользователей
Интернета. Решающим аргументом в этом споре, как уже упоми-
налось, явилась ставка Microsoft на интеграцию браузера со своей
уже сверхпопулярной операционной системой Windows, а также
решение сделать этот браузер бесплатным, что постепенно и потес-
нило Netscape на второе место. Версия HTML 3.2, вышедшая в 1996
году, была попыткой объединить лучшие решения для языка, соз-
данные обеими фирмами, в одно целое.
Используемая и сейчас версия 4.0 языка HTML появилась в 1997
году, а версия 4.01, датированная 1999 годом, лишь фиксирует не-
которые уточнения и исправления.
Развитие Интернета поставило перед HTML новые проблемы.
Разрабатываются все новые устройства для доступа в Интернет.
Таблицы Брайля для слепых можно, пожалуй, отнести к разряду
уникальных устройств, а вот сотовые телефоны с малыми дисплея-
ми, устройства для скачивания и воспроизведения MPEG-файлов,
аппараты для проведения дистанционных банковских расчетов имеют
реальные основания стать массовыми Интернет-устройствами на каж-
дый день. Свои особенности имеют и другие виды доступа в Интер-
нет, например, WebTV. Смогут ли эти устройства извлекать инфор-
мацию из уже накопленных гигантских массивов, и как это сделать
оптимально? Как воспроизвести одни и те же Web-страницы на
различных платформах (от сотовых телефонов до автомобильных
компьютеров), некоторые из которых вообще не предусматривают
экранов?
В языке HTML правилом хорошего тона становится отделение
логической части — заголовков, разделов, слов с усиленным значе-
нием — от представления, которое автор, пользователь или система
могут легко преобразовать к наиболее удобному и приятному виду.
Таким образом появились таблицы стилей (CSS — Cascading Style
Sheets), позволяющие вынести описание всего оформления в отдель-
ный файл, оставив в файлах Web-страниц содержательную часть и ло-
гическую разметку.
26
Часть 1. Основные сведения
Другая тенденция — модуляризация, которая заключается в вы-
делении из языка подсистем-модулей. Бортовые автомобильные
компьютеры, скорее всего, будут обходиться без CD-драйверов и вин-
честеров, а сотовому телефону не понадобится мышь и мощная ви-
деосистема, поскольку на его экране помещается только несколько
строк текста и отсутствует цветопередача. Для нужд таких плат-
форм разрабатываются специализированные операционные системы,
программное обеспечение, браузеры, а в HTML будет достаточно
выделить в множестве языка небольшие подсистемы, уменьшив тем
самым объем обрабатываемой, передаваемой и представляемой ин-
формации.
Третья тенденция — сделать развитие языка естественным про-
цессом, позволив браузерам самостоятельно обрабатывать теги, изо-
бретенные каждым разработчиком и описанные в соответствующих
разделах. Для браузеров на мобильных телефонах аудиоподача ин-
формации выглядит вполне естественно. Она может осуществляться,
например, синтезатором речи, для которого необходимы специфи-
ческие команды. Для мощных графических станций акценты могут
быть сделаны, наоборот, на мощную трехмерную графику, а пред-
ставление содержания возможно при помощи трехмерных виртуаль-
ных миров, для которых может быть введена своя система команд.
Подобные проблемы решаются в других языках, таких как XML.
Расширяемый язык разметки XML (extensible Markup Language) яв-
ляется стандартом оформления различных данных. Эти данные, в ча-
стности, могут быть оформлены как Web-страницы. XML является
достаточно устойчивым стандартом, поскольку подразумевает рас-
ширяемость, то есть возможность определения новых специфиче-
ских тегов для каждой области знаний — математики, трансформации
данных, графики и т.д. Тем самым язык приобретает способность
плавно эволюционировать, отказавшись от радикальной смены од-
ной версии последующими. Кроме того, XML позволяет выделять
из основного языка необходимые подсистемы, то есть производить
модуляризацию.
В январе 2000 года консорциум W3C, занимающийся разработ-
кой стандартов Web, опубликовал рекомендации по использова-
нию современной версии языка, называемого XHTML (extensible
HTML — расширенный HTML). По замыслу авторов, этот язык
представляет собой «переформулировку языка HTML 4.0 в терми-
нах XML».
Проще говоря, в код Web-страниц вводится ряд небольших огра-
ничений-изменений, которые позволят языку XML рассматривать
HTML как одно из своих подмножеств. Взамен HTML приобретает
гибкость, присущую XML. XHTML оказывается совместимым с дру-
гими существующими специализированными языками, производными
Глава 5. HTML: путь из недавнего прошлого к светлому будущему 27
otXML, для различных областей: математики, химии, экономики.
При этом становятся ясными основные направления развития язы-
ка, а с другой стороны, не теряется совместимость языка с сущест-
вующими браузерами. Гибкость HTML дает дизайнерам новые воз-
можности: передача команд голосом, гибкий доступ к базам
данных, разработка интерактивных форм для ввода данных органи-
зации, других действий пользователя. Появляется возможность
разработки новых прогрессивных интерфейсов для работы с суще-
ствующими и вновь появляющимися устройствами.
Инструментарий для
разработки Web-документов
Глава 6
До недавнего времени текст Web-страниц на языке HTML писали
в обычных текстовых редакторах. Простейшим средством и сейчас ос-
тается Notepad («Блокнот») — стандартная программа Windows.
Современные системы для создания Web-страниц можно разде-
лить на два типа. К группе визуальных, или WYSIWYG-редакторов
(What You See is What You Get — что видите, то и получаете) отно-
сятся те, в которых Web-страницы сразу представляются наглядно,
по мере перетаскивания на них форм, ссылок, ввода текста, а фор-
мирование кода происходит «за кадром». Они ориентированы на ря-
довых пользователей. Подобно Microsoft Word, в окне формируется
сама страница, на которой нужным шрифтом печатается текст не-
обходимого размера, перетаскиваются кнопки, располагаются и мас-
штабируются картинки (рис. 1.2). В данном случае для создания
Web-страниц знание HTML фактически не нужно, поскольку ре-
дактор автоматически переводит страницу в коды. Уже упомянутый
Word, в частности, позволяет преобразовывать набранные документы
в Web-страницы. Профессиональные дизайнеры редко пользуются
услугами подобных систем, поскольку «смотреть без слез на твор-
чество таких редакторов невозможно». Результирующие коды гро-
моздкие, избыточные, трудночитаемые и часто малоэффективные.
Однако подобные программы могут с успехом использовать те, кому
необходимо сверстать несколько страниц, не углубляясь в тонкости
кода. Среди таких редакторов:
» Front Page (http;//www.microsoft.com/frontpage/,
в состав Internet Explorer входит усеченная версия — Front
Page Express);
» DreamWeaver (http://www.macromedia.com/software/
dreamweaver/);
♦ Composer в составе Netscape Communicator;
» W3C's Amaya;
» HomeSite (http://www.allaire.com/);
♦ HTML Pad (http;//www.book.ru/snk/),
и многие другие, которые появляются сейчас, как грибы после дождя.
Глава 6. Инструментарий для разработки Web-документов
29
Example^ visualSite
Ев gesoitce Briwx get
(WSE--------------------
- |X|
& у
|Hjad|
Empty1*04
LJHeed
L> Emptyset
Empty riot
9 erpUle
L'*F Empty dot
| I«d2
\J>- Empty dot
^wnk.btr
£»• E.nptydot
Рис. 1.2. Редактор VisualSite позволяет использовать технологию WYSI WIG
и непосредственное редактирование кода
Редакторы второго типа — текстовые, в которых непосредствен-
но редактируется код. Для работы в них необходимо знание языка
HTML. Смотря на код, вы не сможете представить, как будет вы-
глядеть будущая страница. Чтобы такое представление получить,
по мере написания ее нужно периодически загружать в браузер.
Кроме уже упоминавшегося Notepad, для написания кода подойдет
и универсальный редактор из Visual Studio, специализированные
редакторы Visual HTML Workshop, HotDog и т.д. За качество стра-
ницы здесь отвечает сам дизайнер, а редакторы отличаются лишь
набором вспомогательных функций, позволяющих выделять цве-
том команды, задавать шаблоны страниц, быстрее расставлять ссыл-
ки, открывать одновременно несколько файлов и т.п.
Созданную страницу необходимо разместить на сервере своего
Интернет-провайдера или на том сервере, который предоставляет
вам такую возможность. Личные страницы, например, можно рас-
полагать бесплатно на сервере www.geocities .com. Если вы зна-
комы с FTP-сервисом, то можете воспользоваться любой програм-
мой FTP-кдиентом*. К ним относятся FAR, Windows Commander,
ftp.exe (входит в комплект стандартных программ Windows и нахо-
дится в директории windows или аналогичной). Если вы пользуетесь
* Доступное описание FTP-клиентов можно найти, например, в книге Марх-
вида И.В. «Интернет». Минск: Новое знание, 2001.
30 Часть 2. HTML
специализироваными программами для разработки Web-страниц,
внимательно изучите меню. Очень часто в них можно обнаружить
функцию Для пересылки (online-публикации) Web-страниц на сер-
вер. Особенно удобны подобные программы при регулярном обнов-
лении сайта, поскольку многие операции автоматизированы.
Если вы планируете размещать на своих страницах рисунки, то
. для этого небходим один из графических редакторов, который мо-
жет создавать файлы для Web-страниц (обычно в форматах GIF,
JPG, PNG, поддерживаемых самим браузером).
HTML
Часть 2. HTML
33
XHTML
В этой части дано описание последней версии языка HTML 4.01.
Оно же, с небольшими модификациями, может быть использовано
для разработки программ на XHTML. Программы, написанные на
языке XHTML, имеют лишь небольшие синтаксические отличия,
внимание на которые обращается при помощи знака, вынесенного
на поля. Для просмотра программ, написанных на XHTML, наряду
с HTML-браузерами могут быть использованы XML-браузеры.
Содержимое любой Web-страницы располагается в файле, обычно
имеющем расширение htm или html. Первое может быть использо-
вано в операционных системах, поддерживающих название файла
в формате: восемь букв — имя, три — расширение. Начальная стра-
ница сайта может иметь упомянутое имя «index.html» или «in-
dex, htm», а также «default .html», «default htm», которые браузер
будет искать и загружать по умолчанию, если в адресе явно не ука-
зано другое имя, то есть указано только имя сервера и путь к сайту.
Итак, откройте в редакторе, который вы решили использовать,
например, все в том же Notepad («Блокнот»), новый файл и сохра-
ните его под именем index.html.
Возникает вопрос: что же написать внутри этого файла?
Любой программист начинает карьеру с написания программы,
которая выводит на экран надпись «Hello, world!», что в переводе
на русский язык означает примерно следующее: «Привет, вот и я!»
Такую программу проще написать на HTML. Для этого в файле дос-
таточно напечатать: «Hello, world!»
Сохраните измененный файл и откройте его при помощи брау-
зера. Для этого обычно достаточно дважды щелкнуть по пикто-
грамме файла. Если вы используете Internet Explorer 5, то на экране
появится окно (рис. 2.1).
2 Зак 1627
Рис. 2.1. Отображение браузером простейшего HTML-документа
Часть 2. HTML
Это уже успех'
Однако радоваться рановато, поскольку это успех не ваш, а брау-
зера, который сумел распознать и воспроизвести ваш замысел. Не
исключено, что другой браузер не воспроизвел бы этот файл, по-
скольку на языке HTML программа имела бы несколько другую
структуру.
Структура языка
Глава 7
Файл HTML, призванный отображать только текст, похож на
обычный текстовой файл, за исключением отдельных операторов,
интерпретируемых браузером как разметка. Она придает документу
упорядоченность, или структуру. Если, открыв файл в текстовом
режиме, вы сразу не можете распознать отображаемый текст, зна-
чит, вам попалась очень «продвинутая» страница.
71,
I Понятие элемента
В спецификации языка HTML 4.01, которая будет незримо при-
сутствовать на каждой странице книги, и на которую в дальнейшем
мы будем опираться при описании языка, ключевым понятием яв-
ляется структурный блок, называемый элементом. Вся Web-стра-
ница делится на такие элементы при помощи разметочных тегов.
Элементы-блоки имеют различное функциональное назначение.
Среди них можно выделить группу элементов для хранения слу-
жебной информации, не отображаемой в окне браузера, для раз-
биения текста на заголовки, параграфы, аннотации, для формиро-
вания таблиц, вывода графики и работы с мультимедиа и др.
Элемент имеет свое имя, атрибуты-параметры и содержимое,
последнее на современный манер называют контентом (от англий-
ского content — содержимое).
Основная масса элементов представляется в виде последователь-
ности:
* открывающий тег, в котором располагается имя элемента и его
атрибуты;
♦ контент;
♦ закрывающий тег.
Тег. Открывающий тег представляет собой угловые скобки < >,
в которых располагается имя элемента, другими словами, сама ко-
манда-инструкция для браузера, например:
<р> — тег, открывающий элемент-абзац.
36
XHTML
XHTML
Часть 2. HTML
—I
Большинству открывающих тегов соответствует закрывающий
тег — аналогичная комбинация, в которой перед именем команды
ставится косая черта (слеш) например:
</р> — тег, закрывающий элемент-абзац.
В терминологии современного программирования открывающий
и закрывающий теги образуют команду-хо//лпед//е/> — структуру, в ко-
торую помещается контент.
К отсутствию закрывающего тега в HTML вплоть до четвертой
версии включительно браузеры относятся терпимо, за исключением
нескольких элементов. При этом они восстанавливают контейнеры-
по своему разумению на основании нескольких простых правил,
что в ряде случаев может приводить к неверному отображению со-
держания страницы.
В XHTML закрывающий тег должен присутствовать обязательно.
' /
Имя элемента может включать буквы, цифры, дефисы. В HTML
для написания имени используются строчные и прописные буквы,
поскольку имя не чувствительно к регистру.
В XHTML используются только строчные буквы (нижний ре-
гистр).
В настоящее время насчитывается около 90 элементов, полный
список которых приведен в приложении 1.
Следующий элемент выделяет, например, абзац, который может
быть смещен на странице, написан курсивом, залит цветом, то есть
отформатирован любым образом. Например:
<р>Весенние вечера были упоительны, грязь подлуной сверкала, и вся мо-
лодежь города была до такой степени влюблена в секретаршу месткома комму-
нальников, что это мешало ей собирать членские взносы.</р>
Необходимо сказать, что в литературе термины элемент и тег
существуют как синонимы, что подчеркивает их неразрывную связь.
В спецификации языка, однако, специально отмечается, что это раз-
ные понятия. Понятие тега является более узким.
, В дальнейшем при описании или упоминании элемента для его
выделения в тексте будем употреблять его имя, заключая для на-
глядности в угловые скобки (оформляя как открывающий тег). На-
пример, элемент <р>.
Отдельные элементы (их немного) не имеют закрывающего те-
га-аналога, то есть их не просто можно опустить, а они вообще не
Глава 7. Структура языка
37
существуют в языке. Таковыми являются, например, элементы <meta>,
<frame>> <hr> и др. Они состоят толвко из открывающего тега, по-
этому не могут ограничиватв никакую частв документа, и, следова-
телвно, не имеют содержимого, а сами по себе образуют отдельные
элементы. Далее они будут называться одиночными тегами.
Расположение элементов. Элементы могут следоватв друг за дру-
гом, а могут бвттв вложенными (если они представляют собой кон-
тейнер). Но элементы не могут пересекатвся.
, Например, правилвное расположение контейнеров
<divxp>Hello, world!</px/div>|
то есть один в другом. В данном случае элемент <р> вложен в эле-
мент <div>.
Или
<div>Hello, world!</divxp>3ro новый абзац</р>
I II I
где элементы следуют один за другим.
Неправильно
<divxp>Hello, world! </div>,</p>
XHTML
В последнем случае элементы перекрываются.
В HTML вплоть до четвертой версии включительно браузеры
снисходительно относились к таким ошибкам. В последнем случае
браузер, встретив команду </div>, определит, что этот элемент за-
канчивается, закроет все не закрытые явно элементы (в нашем
случае — <р>), а тег </р>, следующий за </div>, просто будет отбро-
шен. Пользователь не заметит разницы в представлении результа-
тов. Браузер оказывается достаточно умным, чтобы исправить си-
туацию. Но так бывает далеко не всегда, и лучше не отдавать
браузерам на откуп ваше произведение.
В спецификации XHTML особо оговорена недопустимость по-
добных перекрытий.
Несколько слов о контенте. Современный гипертекст подразу-
мевает представление не только текста, но и ссылок на другие ис-
точники растровых изображений, анимации, видео, звука, обратную
связь-общение с сервером через заполняемые формы, таблицы, вклю-
чение программных модулей.
38 Часть 2. HTML
— ---------- 'ТГЗ
72 ________________________________________________________________
Т Атрибуты
Каждый элемент может содержать параметры, помещаемые в от-
крывающий тег. Термин «параметры» в программировании встре-
чается очень часто. Параметры присутствуют и в HTML, и в CSS,
и в JavaScript, при этом они порой имеют одинаковое название.
Поэтому, чтобы не вносить путаницы, далее в книге при описании
HTML будем называть их атрибутами (термин берет начало из анг-
лоязычной документации), при описании CSS — свойствами (так-
же отдавая дань первоисточникам), а сам термин «параметры» будем
использовать преимущественно при описании JavaScript.
Назначение атрибутов в элементах НТМ L — задать конкретные
свойства элемента, например, определить адрес страницы, к кото-
рой ведет элемент-гиперссылка, или цвет отображения текста, вхо-
дящего в элемент.
Атрибуты могут принимать различные значения, которые ука-
зываются после знака равенства в кавычках (одинарных или двой-
ных). Например, аПдп-'сетег", bgcolor-’ffoo77",title-Это поясняющий текст’.
Тип и диапазон значений зависят от конкретного элемента HTML
и атрибута.
Запись элемента <р> с атрибутом align выглядит так:
<р align=”center“>
В одном элементе одновременно может присутствовать несколько
атрибутов. В этом случае они указываются друг за другом через пробел:
< р attribute- 1=”vaiue_ 1" attribute_2="vaiue_2”... >
Если строка длинная, то ее можно перенести, используя стан-
дартный код переноса строки. Перед знаком равенства и после него
допускаются пробелы. Переводы строк и лишние пробелы всеми
распространенными браузерами игнорируются.
В HTML 4 отсутствие кавычек, окружающих значение атрибута,
критично только в том случае, когда значение представляет собой
фразу, в которой есть пробелы. Например, если написать title = Это
поясняющий текст без кавычек, то атрибут title примет значение Это, а по-
ясняющий и текст будут считаться новыми нераспознанными атрибутами.
Для каждого элемента существует определенный набор возмож-
ных атрибутов. Далее в тексте перечисление значений атрибутов
будет вестись через знак «|». Это логическое «или», часто встречаю-
щееся в программировании. Например, запись 1 \ а | А \ / \ / означает,
что атрибут может принимать одно из пяти перечисленных значений.
Глава 7. Структура языка
39
Довольно часто теги сходного назначения имеют одинаковые
атрибуты. В отдельных случаях атрибуты являются уникальными.
Когда атрибуты не указаны явно, используются их значения, задан-
ные по умолчанию.
XHTML
XHTML
В XHTML атрибуты записывают строчными буквами (в нижнем
регистре).
Согласно спецификации HTML 4.01 браузер не различает про-
писные и строчные буквы, поэтому язык допускает написание те-
гов, атрибутов и их значений в любом регистре. Однако следует со-
блюдать осторожность при задании имен файлов. Дело в том, что
они используются не только браузером, но и сервером, который
может быть более щепетилен в отношении регистра.
В HTML встречаются атрибуты без значений. По сути — это ло-
гические атрибуты, имеющие значение 0 или 1, «yes» или «по».
Указание атрибута подразумевает, что он уже имеет одно из значе-
ний. Отсутствие атрибута указывает на противоположное значение.
В XHTML значение атрибута должно быть указано обязательно.
7.3 ,____________
I Типы данных
Выше упоминалось, что для каждого атрибута определен свой
набор значений, Совокупность таких значений в других языках об-
разует отдельный перечисляемый тип данных. В HTML такие типы
не устанавливаются, поскольку атрибуты часто могут принимать раз-
нородные значения. Среди всех используемых данных можно выде-
лить несколько характерных групп или типов. Чаще других встре-
чаются следующие:
* текстовые строки;
♦ символы;
♦ URI;
» цвет;
» линейные размеры (длина и ширина);
* дата и время;
» MIME-типьг (указывают характер содержимого).
Текстовые строки. Представляют собой последовательность чи-
таемых символов — букв, цифр, знаков препинания. Особенность
строк заключается в том, что при интерпретации браузером из них
изымаются символы перевода строки, и несколько идущих подряд
пробелов заменяются одним. Аналогично не воспринимаются на-
чальный и конечный пробелы в значениях атрибутов. Например,
значения " kft " и "left" будут интерпретированы одинаково.
40
Часть 2. HTML
Символы. Иногда кодировка, используемая при наборе текста
или программы, не содержит тот или иной символ документа. Неко-
торых символов просто нет на клавиатуре. В таких случаях можно
использовать соответствующий численный (в десятичной или шест-
надцатеричной системе счисления) эквивалент или специальные бук-
венные сочетания — строковые константы, или литералы. Призна-
, ком такого обозначения служит знак &. Например, знак «меньше»
(<) может быть обозначен сочетанием < (от английского «меньше
чем» — less than). В противном случае знак «меньше» будет непра-
вильно интерпретирован браузером, поскольку в HTML угловая
скобка (<) используется как служебный символ для описания те-
гов. Часто используются следующие литералы:
> (greater than) — знак «больше» (>);
& — сам знак & (амперсанд);
" — кавычки;
  (non break space) — неразрывный пробел, который в Micro-
soft Word набирается комбинацией клавиш Ctrl + Shift + Space.
В цифровом формате после знака & идет символ # и цифровой
код. Как правило, используется кодировка Unicode и ее подсисте-
мы, например, известная всем ASCII. Примеры литералов в деся-
тичной форме:
" — кавычки;
О — знак «меньше» (<), то же, что и <
б9, так же, как и &сору — знак авторского права (©).
Подробный список литералов и соответствующих цифровых
кодов приведен в приложении 2.
URI. При разработке Web-страниц часто используются адреса
различных связанных документов — URL Это могут быть гипер-
ссылки новых страниц или ресурсы, которые необходимо загрузить
на текущую страницу.
Различают URI абсолютные, которые были рассмотрены в главе 2,
и относительные. Последние используются, когда файлы находятся
на одном сервере. Они удобны, если сайт целиком, со всеми вло-
женными папками, переносится в другое место (на иной сайт или
в папку), а относительное расположение страниц не меняется.
При загрузке страницы браузер делит ее расположение и по от-
носительному адресу ресурса, указанному на странице, может вы-
числить его абсолютный адрес.
Для указания используются те же правила, что и для путей в DOS.
Например, если загруженный файл находится в папке «Root», то
указать путь к файлу в папке «English» можно следующим обра-
Глава 7. Структура языка
41
| 1 _ -----------------------------------------------------------------
зом: /english/index_en.html. Если вы находитесь в папке «English»,
то вызвать файл из папки «Images» можно так: . . / images/bird, gif,
где . . / позволяет подняться на одну папку вверх.
1 - - V ч
Цвет. Многие элементы используют атрибуты, задающие цвет.
Это цвет рамок, текста, фона и т.д. Существует несколько систем
кодирования цветовой палитры. При отображении на мониторе за
основу берется RGB-палитра. Любой цвет получают, смешивая три
основных: R — красный (red), G — зеленый (green), В — синий
(blue). Яркость каждого цвета задается одним байтом и, следова-
тельно, может принимать значения от Одо 255 (255 = 28 — 1). Число
возможных комбинаций (28 х 28 х 28 = 224 = 16 777 216) равно чис-
лу возможных оттенков. На задание цвета для каждой точки тра-
тится 24 бита. В шестнадцатеричной системе яркость изменяется от
О до FF. Цвет кодируется заданием значений яркости основных цве-
тов после знака # в следующем порядке: красный, зеленый, синий.
Например:
#000000 черный (яркость каждого цвета равна нулю),
tfFFOOOO красный (яркость красного цвета максимальная, осталь-
ных — равна нулю),
#OOFFOO зеленый (яркость зеленого цвета максимальная, осталь-
ных — равна нулю),
tfOOOOFF синий,
#FFFFFF белый (смешаны все три составляющие с максималь-
ной яркостью).
Если возникает трудность с шестнадцатеричной системой, можно
использовать и десятичную. В этом случае цвет задается вызовом
функции rgb (rr, gg, bb), параметры которой можно задавать или в ви-
де десятичного числа от 0 до 255, или в процентах (от 0 до 100). Ка-
ждый из параметров обозначает уровень яркости соответствующего
цвета. Например: значения rgb(127, 255, 127) и rgb(5O%, 100%, 50%)
будут задавать одинаковый зеленый цвет средней насыщенности.
Существует большое количество других оттенков, среди кото-
рых — coral (коралловый), comflowerblue (васильковый). Список
используемых в Web цветов приведен в приложении 4.
Не все компьютеры имеют возможность отображать такое коли-
чество цветов (16 777 216) — это зависит от видеокарты, операцион-
ной системы и т.п. Поэтому в каждом конкретном случае компью-
тер будет отображать заданные на Web-странице цвета в соответствии
со своими возможностями. Чтобы цвет страницы передавался одина-
ково на любых мониторах, рекомендуется использовать безопасную
42 Часть 2. HTML
-1
палитру цветов. Эти цвета по договоренности должны одинаково
передаваться всеми браузерами и платформами. Палитра образует-
ся путем смешения только шести оттенков каждого цвета: 00, 33,
66, 99, СС, FF. Всего она насчитывает 6x6x6 = 216 цветов.
Кроме того, браузер может получать и использовать цвета, такие же,
как использует система для задания заголовков окон, цвета окон, цве-
та фона рабочего стола и других элементов. Например, activeBorder —
использует цвет границы активного окна. Background — задает цвет
фона рабочего стола. Используя такие настройки, можно получать
страницы, не отличающиеся по дизайну от интерфейса пользователя.
Страницы, где используются такие параметры, будут доступны для
любых систем, поскольку автоматически подстраиваются под ресурсы
системы пользователя. Подробно они перечислены в приложении 4.
74._____________________________________________________________
) Единицы измерения длины
Единицы измерения длины весьма разнообразны. Прежде всего
они делятся на абсолютные и относительные.
Абсолютные. Абсолютные единицы измерения длины использу-
ются редко, когда известны физические параметры прибора. Изме-
рения в этих случаях проводятся в
in — дюймах (1 дюйм равен 2,54 сантиметра),
ст — сантиметрах,
mm — миллиметрах,
pt — points. Point — это «точка», которая равна 1/72 дюйма или
0,36 мм, что еще уверенно различается человеческим глазом. Эта
единица измерения берет начало в типографиях, но дожила до
электронного века.
pc — picas. 1 pica (пика) равна 12 pt.
Относительные. Относительные единицы измерения разнообразны
и обычны в употреблении. Особенно коварны проценты, которые
для разных параметров измеряются относительно разных величин,
часто относительно наследуемых из внешнего блока.
ет — единица измерения, которая базируется на ширине стан-
дартной для типографии буквы «т». Значение 1,5 ет будет в полтора
раза больше базового размера данного шрифта.
ех — единица измерения, которая основана на высоте шрифта.
рх — размер, за единицу которого взят отдельный пиксель эк-
рана. Хотя для разных типов мониторов эта величина отличается,
но она интуитивно понятна и, более того, по стандарту должна
иметь одинаковый угловой размер.
Глава 7. Структура языка
43
Затронув единицы измерения, попутно заметим, что для альтер-
нативных браузеров существуют и другие единицы измерения —
герцы (Hz), миллисекунды (мс), радианы, градусы.
MIME-типы данных. Протокол MIME (Multipurpose Internet
Mail Extension) первоначально был разработан для описания фай-
лов, вкладываемых в электронную почту. Он определял, какой тип
данных передается сервером. Сейчас протокол активно использует-
ся и в других интернет-сервисах. Сначала указывается тип файла,
а затем (через косую черту) — конкретный его формат: “тип файла/
формат", где тнп/формат может принимать, например, значения image/gif
или text/htmi, или application/sp. Когда строка с MIME-типом данных
является значением атрибута (часто атрибута type), то подобная за-
пись может выглядеть так: type=’’text/htmi”. Подробный список MIME-
типов можно найти в приложении 5.
7.5
Два подхода
к форматированию текста
В процессе развития языка HTML были разработаны, и до сих
пор активно используются, многие полезные атрибуты. Например,
уже упомянутый атрибут align. Он указывает расположение заго-
ловка, абзаца или другого элемента. В приведенном ниже примере
показаны варианты использования команды <р> с тремя атрибута-
ми align, которые принимают значения right, left, center (справа,
слева, по центру соответственно).
Пример 1.
<html>
. <body>
< р align=”right”>3T0T абзац выключен вправо</р>
< р аНдп="1еИ”>Этот блок выключен влево</р>
< р align=”center”>3Ta строка расположена по центру</р>
< р style="text-align: right">A в это время за окном шел дождь и рота
красноармейцев.</р>
</body>
</html>
Современный подход рекомендует тегами <р> отделять логический
абзац, а его представление на экране оформлять отдельно. В данном
примере эта информация встроена в атрибут style.
44
Часть 2. HTML
Рис. 2.2. Форматирование текста при помощи атрибутов
и изменения стиля
Несмотря на несколько более сложное оформление, «рота красно-
армейцев» тоже будет успешно выровнена по правому краю (рис. 2.2).
Информацию о стиле можно разместить и в других местах. Например,
в отдельном элементе <style> (надеюсь, вы уже не путаете элементы
и атрибуты, хотя порой они будут иметь одинаковые названия) или
в отдельном файле.
Таким образом, логическая разбивка текста отличается от фи-
зического форматирования. Эффективность такого подхода сказы-
вается при представлении сайтов в альтернативных браузерах и при
разработке объемных сайтов. Его преимущества вы довольно скоро
почувствуете, как только начнете практическую работу. Подробно
о таком форматировании рассказано в разделе, описывающем CSS —
каскадные таблицы стилей (Cascading Style Sheets). Если вы рабо-
тали в Microsoft Word, то, вероятно, сталкивались с аналогичным
подходом к форматированию текста. С одной стороны, его можно
форматировать «вручную» (каждый абзац и букву), ас другой — мож-
но задавать или изменять готовый набор стилей (при этом все
фрагменты текста с таким стилем автоматически поменяют свой
вид в соответствии с вашими пожеланиями).
В настоящее время можно применять оба подхода: прямое фор-
матирование непосредственно при помощи атрибутов и отдельных
специальных элементов и форматирование при помощи стилей. Но
в будущем методы прямого форматирования поддерживаться не будут.
Строго говоря, разбивка документа на логическую структуру и
стиль оформления предусмотрена изначально в стандарте языка
SGML, реализацией которого HTML и является. Однако стреми-
тельное развитие языка HTML привело к тому, что разделение на
структуру и стиль стало игнорироваться. Элементы заголовков <h1>
Глава 7. Структура языка
45
и :h2> стали применять не только для выделения заголовков раз-
ных уровней, но и просто для выделения текста более крупным шриф-
том. Стремление дизайнеров оригинально отобразить свои страницы
привело к тому, что появились специальные элементы, отвечающие
за представление текста на экране, такие как <font>, <i> и др. Такие
элементы стали настолько популярны, что вводились в стандарт
языка. По мере того, как Интернет охватывал новые технологиче-
ские области, начали появляться альтернативные браузеры, для ко-
торых логическая структура документа имела первостепенное значе-
ние, а представление информации существенно разнилось по срав-
нению с традиционным. Более актуальными стали и другие задачи,
связанные с-логической структурой документа, например, определе-
ние наиболее значимых слов поисковыми машинами и т.п.
Началась борьба за чистоту стандарта, и ряд элементов и атри-
бутов были объявлены не рекомендуемыми (deprecated). Этот факт
будет специально подчеркиваться при рассмотрении элементов и ат-
рибутов. Не рекомендуемые элементы еще входят в спецификацию
HTML 4.01 и могут использоваться в настоящее время — браузеры их
распознают и правильно отображают. Однако если вы хотите обес-
печить своим Web-страницам будущее, то не стоит использовать уста-
ревшие технологии. Кроме отмененных, при разборе текстов могут
встретиться запрещенные элементы, которые исключены из послед-
ней спецификации.
7-6, ______________________________________________________
I Комментарии
Часто употребляемым элементом являются комментарии. Они
«упаковываются» в один тег, который выглядит так:
<!-- Далее идет любой комментарий до 1024 символов -->
Внутри комментария не должны встречаться угловые скобки. В от-
крывающей части тега (<!—) пробелы не допускаются. В закрываю-
щей части пробел возможен между — и угловой скобкой >.
Текст комментария не отображается, но это не значит, что он
не обрабатывается браузером. Возможность обработки коммента-
рия зависит от версии программы. Иногда в комментарии записы-
вается полезная для браузера информация. Старые браузеры ее не
прочтут, а для новых, «продвинутых», которые умеют читать «меж-
ду строк», здесь могут содержаться, например, java-скрипты. Ино-
гда эту информацию могут использовать серверные или поисковые
программы (роботы-пауки).
Структура
HTM L-документа
Глава 8
Все элементы языка образуют определенную иерархию. Есть бо-
лее важные, а есть те, без которых можно обойтись; одни могут вкла-
дываться в другие, обратная ситуация не всегда возможна; есть рабо-
тающие самостоятельно, а есть такие, которые работают только в паре.
8-1, _________________________
Информация о версии языка.
Элемент <!doctype>
Если рассмотреть любой HTML-документ, то определенные эле-
менты в нем всегда можно найти.
Правила хорошего тона советуют в первом элементе разместить
информацию о версии языка, которую вы используете, чтобы брау-
зер, отображающий Web-страницу, мог учесть особенности или ог-
раничения этой версии.
Рассматриваемый элемент имеет только открывающий тег
<!doctype>, который начинается восклицательным знаком. В данном
теге заключена информация о типе документа.
В версии HTML 4.01 есть ссылки на три вида документов.
1. HTML 4.01 Strict — наиболее «правильная» версия, не под-
держивающая отмененные элементы для форматирования текста.
Элемент обычно имеет вид
<html public "-//W3C//DTD HTML4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
С указанного адреса браузер (в случае необходимости) может
загрузить описание элементов данной версии языка. Часть, касаю-
щаяся адреса, может быть опущена. Аббревиатура DTD (Document
Type Definition) означает «определение типа документа». Эта вер-
сия языка не поддерживает подокна-фреймы, речь о которых пой-
дет в главе 16.
Глава 8. Структура HTML-документа
47
.XHTML
2. HTML 4.01 Transitional — переходная версия языка, наиболее
популярная в настоящее время. Подразумевается, что предыдущие
требования к синтаксису смягчаются и поддерживаются страницы,
написанные до появления стандарта HTML 4.0. Допустимы отме-
ненные в современном языке элементы, например, <font>. В этом
случае <!doctype> имеет вид
<html public"-//W3C//DTD HTML 4.01 Transitional//EN”>
Как и в предыдущем примере, может быть использован адрес
документа: http: //www.w3 .org/TR/1999/REC-html401-19991224/
loose, dtd
3. HTML 4.01 Frameset — используется в том случае, если ваш
документ включает фреймы (см. главу 16). Записывается
<!doctype html public”-//W3C//DTD HTML 4.01 Frameset//EN”>
• Адрес документа: http://www.w3.org/TR/1999/REC-html401-
19991224/frameset.dtd
Для XHTML разработчиками W3C установлено следующее опи-
сание языка.
XHTML 1.0 Strict — версия языка XHTML. Слово Strict означает,
что синтаксис должен жестко подчиняться последним требованиям
вышеупомянутой спецификации, то есть не должен содержать от-
мененных элементов или атрибутов и фреймов.
Далее в данной части книги следует описание конкретных элемен-
тов, сгруппированных по функциональному признаку. Описание сде-
лано по возможности единообразно, чтобы материал можно было ис-
пользовать как справочный. После общей характеристики элемента
располагаются сведения о его синтаксисе. В приложении 2 можно
найти справочную таблицу, где все элементы сведены вместе, и в ко-
торой указана необходимость наличия закрывающих тегов, возмож-
ность пропуска и актуальность их (действуют или отменены) и т.п.
Затем описываются используемые атрибуты. В конце параграфа
размещается информация о содержимом, которое может быть вклю-
чено в элемент. Приведенное описание базируется на стандартах W3C
и поддерживается обоими ведущими браузерами (Microsoft Internet
Explorer и Netscape Navigator). В тех редких случаях, когда лишь один
из них поддерживает элемент или его атрибут, будет сделана соответ-
ствующая пометка в виде иконки с указанием браузера и его версии.
* Значок & будет означать Internet Explorer, а цифра после
него — номер версии.
♦ Значок f~~~1 — Netscape Navigator.
48
Часть 2. HTML
82.
I Элемент <html>
Этот элемент служит признаком того, что перед нами Web-стра-
ница, или HTML-документ.
<>•<•>
Правило записи (синтаксис): элемент является контейнером. От-
крывающий тег — <html>, закрывающий — </html>. Оба тега могут
отсутствовать. Однако их использование является правилом хорошего
тона. Все остальные элементы, кроме <!doctype>, помещаются внутрь
контейнера <ht ml >... < /html> и служат его контентом.
<?>
Элемент практически не использует атрибутов. Можно упомянуть
лишь
version не рекомендуемый атрибут, в котором описывается
версия языка. Сейчас эта информация помещается
в <!doctype>.
Также могут использоваться два атрибута общего назначения
lang и dir, которые будут описаны в следующем параграфе.
Примечание. Элемент <html> введен в стандарт начиная с всрспп HTML 2.0.
Из содержимого контейнера наибольшее значение имеют два эле-
мента, располагаемые друг за другом — <head> (голова) и <body> (тело),
то есть заголовочная и основная части. Документ может содержать
один раздел <head> и один <body>. Заголовочная часть не отобража-
ется браузером и несет служебную информацию. В <body> располага-
ется основное содержание Web-страницы.
Таким образом, минимальный документ должен иметь структуру
<html>
<head>
служебная неотображаемая информация...
</head>
<body>
...воспроизводимое содержание документа...
</html>
А к контейнеру <head> вернемся в п. 9.1, так как он содержит
сложные для понимания элементы. Рассмотрение начнем с элемента
<body>.
Глава 8. Структура HTML-документа
49
8.3
Размещение контента.
Элемент <body>
Итак, в элементе <body> расползается та часть информации,
которая должна быть воспроизведена, то есть содержимое.
<><>
Синтаксис: элемент представляет собой контейнер
cbody attribute- 1=”vaiue_ 1" attribute_2="vaiue_2"...>
...воспроизводимое содержание
</body>
Открывающий и закрывающий теги могут быть опущены (од-
новременно). В этом случае браузер сам будет пытаться определить
начало и конец контента.
Атрибуты элемента:
bgcolor задает цвет фона, значениями служат единицы опре-
О 04 background text link vlink alink bgproperties topmargin leftmargin bottommargin rightmargin деления цвета (см. п. 7.3). указывает URI графического файла, используемого в качестве фона на всей странице, не рекомендуемый, определяет цвет текста на всей странице, не реко- мендуемый. задает цвет ссылок, не рекомендуемый, v задает цвет просмотренных ссылок, не рекомендуе- мый. задает цвет активных ссылок, на которых находится маркер в данный момент. Используется для подсвет- ки ссылок во время выбора, не рекомендуемый. может принимать единственное значение fixed. В этом случае фон не прокручивается вместе с текстом, а ос- тается «привязанным» к экрану. задает в пикселях расстояние между окном и тек- стом соответственно сверху, слева, снизу и справа.
04 scroll устанавливает полосы прокрутки.
50
Часть 2. HTML
Общие атрибуты. Такие атрибуты встречаются у большинства эле-
ментов. Поэтому здесь дадим их краткое описание, а в последующих
разделах только перечислим. Подробное пояснение будет приведено
в п. 17.4.
id задает идентификатор элемента, который может при-
меняться в различных целях, например, в качестве
программной метки, чтобы программа смогла найти
этот элемент среди множества других.
class указывает на принадлежность элемента к классу эле-
ментов, имеющих аналогичные свойства. Например,
Class="red_text".
lang задает информацию о языке.
dir определяет направление написания текста и данных
в таблицах.
style встраивает информацию о стиле форматирования (под-
робно будет рассмотрен в ч. 3).
Перечислим атрибуты для установки обработчиков различных
событий (порядок их использования будет рассмотрен далее):
onclick, ondblclick, dnmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onload, onunload.
Контент может содержать самые разные элементы, описывае-
мые далее, за исключением разделов <!doctype>, <html>, <head>.
Примечание. Элемент <body> введен в стандарт, начиная с версии HTML 2.0.
Пример 2. Структура элементарного Web-документа
Попробуем переписать нашу первую программу с учетом рассмотрен-
ных элементов.
<!doctype html public"-//W3C//DTD HTML 4.01 TransitionalZ/EN'S
<html>
<head>,
<body>
Hello, world!
</body>
</html>
Такой шаблон часто используется при создании новых документов.
Структурирование
и разметка контента
Глава 9
Большое количество элементов HTML предназначено для орга-
низации контента и прежде всего текста, который обычно состав-
ляет подавляющую часть содержимого Web-страниц. В новой кон-
цепции языка, как уже отмечалось, основное внимание отводится
логической разметке текста, или логическому форматированию.
Элементы, связанные с такой разметкой контента, рассмотрены в дан-
ной главе.
Структурирование контента подразумевает его разбивку на ло-
гические блоки. Первым среди таких блоков, как правило, следует
заголовок.
91 ________________________________
Заголовки. Элементы <h1>, <h2>,
<h3>, <h4>, <h5>, <h6>
Заголовок, который автор дал своей электронной публикации
и который появится на Web-странице, определяется элементом <h1>.
<><>
Синтаксис: заголовок помещается в контейнер, например:
<h1 >Золотойтеленок</111 >
Это заголовок первого уровня (самый значимый). Существуют
заголовки второго, третьего и других уровней, вплоть до шестого.
Организуются они при помощи аналогичных тегов:
<112>3аголовок 2-гоуровнж/1э2>
<ИЗ>Заголовок 3- гоуровнж/ЬЗ>
<И4>Заголовок4-го уровнж/Ь4>
<И5>Заголовок 5-го уровня</И5>
<И6>Заголовокб-то уровнж/1з6>
52
Часть 2. HTML
Рис. 2.3. Элементы-заголовки разных уровней по умолчанию
отображаются браузером различным размером шрифта
Элементы-заголовки разных уровней по умолчанию отображаются
браузером различным размером шрифта (рис. 2.3). Первым распо-
ложен заголовок самого высокого уровня <h1>, далее следуют уров-
ни <h2>...<h6>.
Если вы еще не можете сориентироваться, как вставить эти фраг-
менты в общий файл, то воспользуйтесь текстом, приведенным ниже.
Наберите его* в простом текстовом редакторе, например, Notepad
(«Блокнот»), сохраните файл под именем index.html и откройте его
при помощи браузера.
Пример 3.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html public"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>YpoBHn заголовков</Ш1е>
</head>
<body>
<М>Золотой теленок</М>
<Ь2>Заголовок 2-го уровня<Л12>
<h3 align=”right">3arcMiOBOK 3-го уровня</ЬЗ>
<h4 align=”center”>3aronoBOK 4-го уровня</Ь4>
<И5>Заголовок 5-го уровня</Ь5>
<h6 style=”position: absblute; 1еЙ:30%">Заголовок 6-го уровня</Ь6>
</body>
<\html>
Номера строк не являются частью кода, их набирать не нужно (Прим, ред.)
Глава 9. Структурированием разметка контента
53
с
<?•>
. Шрифт, используемый браузером для вывода заголовка — полу-
жирный. Он выбран из заданных по умолчанию. Чем ниже уровень
заголовка, тем меньше размер шрифта. Использование заголовков
разного уровня позволяет структурировать документ по разделам, гла-
вам, параграфам и т.п., облегчая чтение.
В ряде браузеров, например, в Opera, размер и вид шрифтов, ис-
пользуемых на Web-странице, может задавать сам пользователь в на-
стройках. Далее будет показано, как управлять размером, типом и дру-
гими характеристиками шрифта программным путем при помощи
стилей, не полагаясь на особенности других браузеров.
Вернемся к рассмотрению заголовков. Они имеют один атрибут
align задает выравнивание заголовка на странице. Не реко-
мендуемый. Может принимать четыре значения:
left выравнивает заголовок по левому краю страницы (используется по умолчанию, что видно из примеров 1 и 2);
right выравнивает заголовок по правому краю страницы (использован в строке 9 при- мера 3);
center выравнивает заголовок по центру (ис- пользован в строке 10 примера 3);
justify выравнивает заголовок по ширине стра- ницы, растягивая строку от правого до левого поля. Эффект проявляется, когда длина строки больше ширины листа.
Результаты использования этого атрибута видны на рис. 2.3. Здесь
также (на примере заголовка 6-го уровня) продемонстрировано,
что таблицы стилей, разбираемые в ч. 3, является более мощным
средством форматирования и позволяют позиционировать заголо-
вок в любом месте. В данном случае он смещен на произвольное
расстояние (30% от длины строки).
Общие атрибуты:
/Д class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur.
54
Часть 2. HTML
Контент может включать элементы:
1) блочные (заголовки более низкого уровня);
2) встроенные:
» текст,
♦ элементы физического форматирования (<b>, <big>, <i>,
<s>, <strike>, <small>, <tt>),
» логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
» специального назначения (<a>, <img>, <map>, <applet>,
<object>, <script>, <span>, <iframe>, <font>, <basefont>, <br>,
<sub>, <sup>, <bdo>, <q>),
♦ форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент введен в стандарт, начиная с версии HTML 2.0.
9.2
Элементы встроенные и блочные
В предыдущем параграфе встретились новые термины: «блоч-
ные элементы» и «встроенные элементы». Поясним, что это такое.
Все элементы, отвечающие за представление контента, принято
разделять на две большие группы:
♦ элементы уровня блока, или блочные (block);
♦ встроенные, или элементы уровня текста (inline).
Первые отделяют в тексте и вообще в контенте большие блоки
(например, заголовок, абзац, адрес автора публикации). Вторые
выделяют фрагмент внутри строки (одно слово или фразу).
По умолчанию блоки начинаются с новой строки и отделяются
от предыдущего и последующего блока строкой (рис. 2.4). Блоки
могут быть вложены друг в друга. Блочные элементы могут содер-
жать встроенные элементы. Подробно блочные элементы будут
рассмотрены ниже, а пока только перечислим их: абзацы — <р>,
заголовки — <h1>,...,<h6>, блоки — <div>, предварительно отформа-
тированный текст — <рге>, цитаты — <blockquote>, <fieldset>, <ad-
dress>, разделитель — <hr>, таблицы — <table>, списки — <ul>,
<ol>, <dl>, скрипты — <script>, <noscript>.
Элементы более низкого уровня — уровня текста — по умолча-
нию выводятся друг за другом в текущей строке (рис. 2.5). Они мо-
гут встраиваться в элементы уровня блока и включать другие встро-
енные элементы. Однако встроенные элементы не могут содержать
элементы блочные. Общее правило: элементы можно вкладывать
только в элементы более высокого или своего уровня. К встроенным
Глава 9. Структурирование и разметка контента
55
Рис. 2.4. Блочные элементы
относятся элементы логического (phrase) и физического (fontstyle)
форматирования текста, специальные элементы и элементы задания
форм. Поименно все они перечислены в предыдущем параграфе. От-
дельные исключения будут рассмотрены при описании соответст-
вующих элементов.
По умолчанию блочные и текстовые элементы по-разному фор-
матируются при визуализации. Блочные начинаются с новой строки
и отделяются строкой снизу.
Рис. 2.5. Встроенные элементы
56
Часть 2. HTML
1 Выделение блока. Элемент <div>
Элемент <div> является наиболее характерным представителем
элементов уров! !Я блока. Он исполвзуется для объединения текста и
других частей контента в логически целвную единицу. Логический
блок — это нечто болвшее, чем выделение текста в абзац. Он может
отделятв, например, несколвко абзацев, которые представляют собой
аннотацию статьи, новости или замечания к основному тексту. В со-
четаниии с атрибутами class и id, работу которых мы рассмотрим
позднее, элемент <div> позволяет легко структурировать текст.
Этот элемент носит общий характер, не подразумевающий ка-
ких-то специфических функций, таких как выделение адреса или
заголовка. Но, эффективно взаимодействуя с таблицами стилей, он
позволяет отлично форматировать разделы отдельной страницы или
даже целого сайта. Текстовый блок, отделенный логически, легко
потом Выделить при отображении любым способом, например,
шрифтом, цветом, межстрочным интервалом, центрированием и т.п.
Содержимое элемента <div> может быть расположено произволь-
ным образом, выделено другим фоном и т.д. Забегая вперед, отме-
тим, что блок можно скрыть и показать в нужный момент. Ввиду
своей универсальности этот элемент используется наиболее часто.
<•><•>
Синтаксис обычный — это контейнер с открывающим и закры-
вающим тегом. Закрывающий тег обязателен. Фраза «закрывающий
тег обязателен», которая будет встречаться и далее, не означает, что
открывающий тег может быть опущен. Она подчеркивает, что в от-
личие от элементов, у которых закрывающий тег может быть без-
болезненно опущен, у этих его присутствие обязательно.
<•?>
<div attribute^~’vaiue_r attribute_2="vaiue_2K ...>
Разнообразный контент...
</div> '
Атрибуты элемента <div>:
align задает выравнивание текста. Не рекомендуемый. Мо-
жет принимать четыре значения:
left выравнивает заголовок по левому краю
страницы;
выравнивает заголовок по правому краю
страницы;
right
Глава 9. Структурирование и разметка контента
57
С
center выравнивает заголовок по центру;
justify выравнивает заголовок по ширине
страницы, растягивая строку от пра-
вого до левого поля. Эффект прояв-
ляется, когда длина строки болвше
ширины листа.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Контент может включатв элементы:
1) блочные: заголовки элементы <р>, <div>, <dl>,
<pre>, <blockquote>, <fieldset>, <address>, <hr>, <table>, списки <ul>,
<ol>, скрипты <script>, <noscript>;
2) встроеннвте:
« текст,
• элементы физического форматирования (<b>, <big>, <i>,
<s>, <strike>, <small>, <tt>),
* логического форматирования (<em>, <strong>, <dfn>,
<code>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acrnnym>),
♦ специального назначения (<a>, <img>, <map>, <applet>,
<object>, <script>, <span>, <iframe>, <font>, <basefont>, <br>,
<sub>, <sup>, <bdo>, <q>),
♦ форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <div> введен в стандарт, начиная с версии HTML 3.2.
94.___________________________________________
1 Встроенный блок. Элемент <span>
Аналогом <div> на уровне текста является элемент <span>. Ос-
новное его назначение — организовывать встроенные блоки, кото-
рые затем можно эффективно форматировать при помощи стилей.
<>•<•>
Синтаксис: элемент является контейнером.
58
Часть 2. HTML
<span>
текст + элементы уровня текста
</span>
Общие атрибуты (см. п. 17.4):
ctlparid, class, style, title, lang, dir.
<?>
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur.
Контент может включать встроенные элементы:
♦ текст,
» элементы физического форматирования (<b>, <big>, <i>, <s>,
<strike>, <small>, <tt>),
» логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
♦ специального назначения (<img>, <map>, <applet>, <object>,
<script>, <span>, <iframe>, <font>, <fontbase>, <br>, <sub>, <sup>,
<bdo>, <q>),
» форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
03(5
Примечание. Элемент <span> введен в стандарт, начиная с версии HTML 4.0.
9.5 ,_______________________________
! Цитаты. Элемент <blockquote>
Данный элемент является разновидностью блочного выделения.
Отличие OT<div> в том, что по умолчанию элемент, как цитата, сдви-
гается вправо по отношению к основному тексту. Ранее этот эле-
мент использовался для создания искусственным образом полей сле-
ва от текста. Кавычки, в случае необходимости, добавляются при
помощи таблиц стилей (см. ч. 3).
Синтаксис: контейнер, закрывающий тег, необходим.
<blockquote> цитата </blockquote>
Из атрибутов следует выделить
cite
задает URI документа или письма, подлежащего ци-
тированию.
Глава 9. Структурирование и разметка контента
59
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Контент может включатв элементы:
1) блочные: заголовки <h1>,...,<h6>, элементы <р>, <div>, <dl>,
<pre>, <blockquote>, <fieldset>, <address>, <hr>, <table>, списки <ul>,
<ol>, скрипты <script>, <noscript>;
, 2) встроенные:
♦ текст,
♦ элементы физического форматирования (<b>, <big>, <i>,
<s>, <strike>, <small>, <tt>),
» логического форматирования (<em>, <strong>, <dfn>,
<code>, <samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
» специалвного назначения (<a>, <img>, <map>, <applet>,
<object>, <script>, <span>, <iframe>, <font>, <basefont>, <br>,
<sub>, <sup>, <bdo>, <q>),
* форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <blockquote> введен в ставдарт, начиная с версии HTML 2.
9.6
1 Организация абзацев. Элемент <р>
Как уже упоминалось, браузер не обрабатывает символы перево-
да строки. Сделано это потому, что заранее вы не знаете, на какой
платформе будет отображаться ваш текст, и именно браузеру пред-
стоит правильно его расположить, самостоятельно организовав раз-
биение на строки. Поэтому текст, который вы набрали на своем
компьютере, одновременно форматируя его, разделяя на абзацы, и
придавая ему какое-то логическое деление, браузер сначала преоб-
разует, удалив все подряд идущие пробелы и переводы строк, а за-
тем выведет его. При этом информация об абзацах будет утеряна.
Чтобы этого не произошло, для логической организации абзацев
используется специальный элемент <р>.
<><•>
Синтаксис: контейнер.
<р>текст абзаца</р>
60
Часть 2. HTML
В XHTML закрывающий тег обязателен, в HTML 4 — не обя-
зателен. В последнем случае как только встречается новый тег <р>,
или другой блочный тег, предыдущий абзац считается окончен-
ным. К особенностям относится невозможность вкладывать эле-
менты <р> друг в друга, то есть недопустима конструкция
<?>
<р>текст абзаца 1<р>текстабзаца 2</р>продолжение</р>
Первый абзац будет окончен перед вторым тегом <р>, а послед-
ний тег </р> просто проигнорируется.
Пустые абзацы браузер может воспринять как перевод на другую
строку или просто проигнорировать, поэтому организовывать перевод
строки надо только при помощи специального элемента <br>.
Если необходимо организовать несколько пустых строк, то в ка-
честве контента <р> можно использовать неотображаемый элемент,
например, неразрывный пробел —  . Хотя подобное програм-
мирование часто не является признаком профессионализма и луч-
ше использовать стили CSS.
Атрибуты не отличаются особым разнообразием и включают
align задает выравнивание текста. Не рекомендуемый. Мо-
жет принимать четыре значения:
left выравнивает заголовок по левому краю
страницы;
right выравнивает заголовок по правому
краю страницы;
center выравнивает заголовок по центру;
justify выравнивает заголовок по ширине стра-
ницы, растягивая строку от правого до
левого поля. Эффект проявляется, когда
длина строки больше ширины листа.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Контент может включать встроенные элементы:
Глава 9. Структурирование и разметка контента
61
» текст,
♦ элементы физического форматирования (<b>, <big>, <i>,
<s>, <strike>, <small>,
♦ логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
* специального назначения (<a>, <img>, <map>, <applet>, <object>,
<script>, <span>, <iframe>, <font> <basefont>, <br>, <sub>, <sup>,
<bdo>, <q>),
• форм (<input>, <seleqt>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <р> введен в стандарт, начиная с версии HTML 3.2.
Пример 4. Блочная структура Web-страницы
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC“-//W3CADTD 111 Ml 4.0 Transitional//EN">
<html>
<head>
<title>3aronoBKM, блоки, цитаты, абзацы</Ме>
</head>
<body leftmargin=”100" bgcolor="#ffffff">
<h1 align="center1^
<р>Часть первая
<р>Старгородский лев
</h1>
<h2>
<р>Глава 1<р>Безенчук и &дио1Нимфы"
</h2>
<div style="background:#ffddff; color:#006600; margin-left:-40px“>
<p>B уездном городе N было так много парикмахерских за-
ведений и бюро похоронных процессий, что казалось, жители
города рождаются лишь затем, чтобы побриться, остричься, ос-
вежить голову вежеталем и сразу же умереть. А на самом деле
в уездном городе N люди рождались, брились и умирали доволь-
но редко. Жизнь города N была тишайшей.</р>
</div>
<р>Вопросы любви и смерти не волновали Ипполита Матвее-
вича Воробьянинова, хотя этими вопросами по роду своей служ-
бы он ведал с девяти утра до пяти вечера ежедневно с по-
лучасовым перерывом для завтрака.</р>
</body>
</html>
Анализируяданную Web-страницу, можно отметить следующее.
Строки 7_ 10: заголовок первого уровня.
Строки 11 —13: заголовок второго уровня, выполненный по
умолчанию более мелким шрифтом. V
Строки 14—16: блок <div>. Для наглядности он выделен другим
цветом текста и фоном, которые задаются при помощи стилей CSS,
а также смещен на 40 пикселей влево от линии других элементов.
Строка 17. Обычный абзац, созданный при помощи элемента <р>.
62
Часть 2. HTML
Рис. 2.6. Блочная структура страницы
Все перечисленные элементы входят в элемент <body>. В терминах
программирования говорят, что этот элемент является родительским
для вложенных эле ментов-потомков (а также «детей» или «наследни-
ков») <hl>, <h2>, <div>, <р>. Эле менты-потомки наследуют ряд свойств
элемента-родителя. Например, <h 1 >, <h2>, <р> наследуют от <body>
значение левой границы. Элемент <div> выпадает из этого списка, по-
скольку для него явно задано левое поле. А вот элемент <р>, который
входит в <div>, наследует от него смещенную левую границу (рис. 2.6).
97, ____________________________________________
Перевод строки.
Элементы <br>, <nobr>, <wbr>
Элемент <Ьг>. Как говорилось ранее, место переноса строк оп-
ределяется браузером автоматически с учетом размеров окна, шриф-
тов и т.п. Для случаев, когда необходим принудительный перевод
Глава 9. Структурирование и разметка контента
63
строки, разработан элемент <Ьг>. Встретив тег <br>, браузер начнет
вывод последующего текста с новой строки.
<•>•<>
XHTML
Синтаксис: элемент состоит из одиночного тега <Ьг>.
В XHTML, где закрывающий тег обязателен, из положения вы-
ходят, записывая тег в форме <Ьг/>, или сразу за открывающим вво-
дят закрывающий тег <br></br>.
<?>
Атрибуты:
clear Используется для визуальных браузеров. Указывает
положение начала следующей строки при обтекании
изображения или иного объекта. Не рекомендуемый.
Может принимать четыре значения:
попе
left
right
all
следующая строка начнется сразу после
предыдущей (принимается по умол-
чанию);
следующая строка начнется на ближай-
шей строке ниже любого «плавающего»
объекта, прижатого к левому полю (то
есть объекта, который может обтекаться
текстом), другими словами, новая стро-
ка должна иметь свободное левое поле;
следующая строка начнется на бли-
жайшей строке ниже любого «плаваю-
щего» объекта, прижатого к правому
полю;
следующая строка начнется на бли-
жайшей строке, имеющей оба сво-
бодных поля.
Рассмотрим на примере использование элемента <br>.
Пример 5. Переносы строк
1 n clDOCTYPE html PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN'*>
2 ’’ <html>
3 ' <head>
4 ' <Ш1е>Использование элемента Br с различными атрибутами<ЛШе>
5" <style>
6 br#my_right {clear: right}
7" </style>
8" </head>
и
64
Часть 2. HTML
_ . .. -----1
9
10
11
12
13
14
15
16
<body>
<img src="bird.gif" align="right"> j
Глаза Остапа заискрились.<Ьг clear-"left">
- Теперь я уже должен жениться, как честный человек.<Ьг
clear="right">
Ипполит Матвееевич сконфуженно хрюкнул.<br id=#my_right>
- Знойная женщина, - сказал Остап, - мечта поэта. Провинци-
альная непосредственность. В центре таких субтропиков давно уже
нет, но на периферии, на местах - еще встречаются.
</body>
</html>
Дадим несколько пояснений к тексту программы. В ней исполь-
зованы и отмененные атрибуты.
Строка 4 формирует заглавие, которое будет отображаться в за-
головке окна (верхняя строка окна). Для вывода знаков «меньше»
и «больше» использованы литералы (см. п. 7.3).
Строки 6—15: элемент <body> содержит основную часть доку-
мента, выводимую на экран.
Программа на языке HTML выполняется последовательно,
строка за строкой. Так же в последовательности (потоке) организу-
ется и вывод элементов (рис. 2.7).
Поскольку все эти элементы являются элементами уровня текста,
то по умолчанию они должны выводиться в одну строку, выравнива-
ясь по базовой линии (совпадает с нижней границей обычной стро-
ки). Использование параметров может изменять стандартный вывод,
принятый по умолчанию, что и иллюстрирует приведенный пример.
Строка 7. Сначала отображается рисунок bird.gif, но он распола-
гается справа (атрибут align="right,:)H выпадает из стандартного потока.
Обратите внимание, что действие атрибута противоположно по смыс-
лу действию такого же атрибута в элементе <img>.
Строка 8. Затем выводится текст.
Строка 9. Элемент <Ьг> указывает, что следующая строка долж-
на начинаться в том месте, где поле слева свободно (атрибут
align="left") .Строка 10 действительно начинается с первой же стро-
ки, где левое поле не занято.
Строка 11. В ней указано, что следующая строка должна начи-
наться в том месте, где поле справа свободно. Следующая строка
12 начинается только со строки под рисунком, где освобождается
- поле справа.
Строка 13. Атрибут аИдп=”а1Гв данном случае указывает, что сле-
дующая 14-я строка выводится только в том месте, где одновремен-
но свободны левое и правое поля.
Современное форматирование с использованием стилей позво-
ляет решить те же задачи другим способом. Подробнее о таком спо-
собе оформления рассказано в ч. 3.
Глава 9. Структурирование и разметка контента
65
3 Использование элемента Вг с различными атрибутами - Microsoft Inlet net Е
Рис. 2.7. Использование элемента <t>r> с различными атрибутами
Элемент <nobr>» Элементы, аналогичные <br>, в стандарт HTML 4.0
не входят. Иногда необходимо удержатв на экране строку без переноса
текста. В этом случае такие строки заключаются в контейнер <nobr>.
<поЬг>Текст непереносимой строки</поЬг>
Закрывающий тег обязателен.
Если строка слишком длинная, то появится горизонталвная ли-
нейка скроллинга (прокрутки).
В неболвших фразах, во избежание переноса, можно исполвзо-
ватв неразрвтвнвш пробел (один или несколвко), которвш вставля-
ется как символ-литерал   (в десятичной форме &# 160, в шест-
надцатеричной форме &#хА0).
Элемент <wbr>. Решает обратную задачу — разрешает перенос
и вставляется как контейнер внутрв элемента <nobr>.
В следующем примере перенос осуществлен толвко в предложе-
нии «Провинциалвная непосредственноств.»
ЗЗак. 1627
66
Часть 2. HTML
<ПОЬг>Знойнаяженщина, - сказал Остап, - мечта поэта.<wbr> Провинци-
альная непосредственность. </wbr>B центре таких субтропиков давно уже нет,
но на периферии, на местах - еще встречаются.</поЬг>
На практике проще использовать только элемент <nobr>, выде-
ляя им часть строки, не подлежащей переносу. Предыдущий при-
мер в этом случае был бы записан так:
<поЬг>Знойнаяженщина, - сказал Остап, - мечта поэта.</поЬг>Провинци-
альная непосредственность.<поЬг>В центре таких субтропиков давно уже нет,
но на периферии, на местах - еще встречаются.</поЬг>
98. __________________________________________
Списки. Элементы <ol>, <ul>, <li>
Особые элементы служат для организации списков. Всего в языке
возможно создание пяти видов списков: нумерованные, ненумерован-
ные, определения, меню (<menu>) и каталоги (<dir>) Два послед-
них в настоящее время не рекомендуется использовать. Они счита-
ются отмененными и исключены из стандарта HTML 4.
<>.<•>
Синтаксис: нумерованные списки помещаются в контейнер
<ol>...</ol>, ненумерованные — в <ul>...</ui>. Каждый следующий
элемент списка вкладывается в отдельный контейнер <li>. Закры-
вающий тег подразумевается, но в HTML может быть опущен, по-
скольку однозначно восстанавливается по наличию следующего эле-
мента или по концу списка. В XHTML закрывающий тег обязателен.
<?>
Атрибуты для всех элементов списков:
compact указывает браузеру выводить список компактно. Реа-
лизация зависит от браузера. Не рекомендуемый.
type для <ul> и <li> задает вид маркеров. Не рекомендуе-
мый. Возможные значения:
disk кружок,
square квадрат,
circle окружность;
для <о1> и <li> принимает значения "1" | "а" | "А" | Т' | Т,
которые определяют вид нумерации. Не рекомен-
дуемый. Рде:
1
арабские числа,
Глава 9. Структурирование и разметка контента
67
а строчные латинские буквы,
А прописные буквы,
/ римские строчные буквы,
/ римские прописные.
Атрибут для элемента <о1>
start значение принимает целые числа, которые указывают,
с какого номера начинать нумерацию. Если нумера-
ция ведется буквами, то указывает порядковый номер
начальной буквы в алфавите.
Например: <ol type=“a" start=u3”>...</o\> начнет нуме-
рацию с буквы "с" — третьей буквы латинского алфа-
вита. Не рекомендуемый.
Атрибут для <li>
value отменяет предыдущий порядок нумерации и устанав-
ливает новый порядковый номер (или букву). Не ре-
комендуемый. Например, <li va/ue=,7’> задает номер
элемента, равный семи.
• • i
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onbluf.
Содержимое элементов <ol> и <ul> включает один или несколько
элементов <li>.
Контент <li> может включать элементы:
1) блочные: заголовки <h 1 >.....<h6>,элементы <р>, <div>, <dl>, <pre>,
<blockquote>, <fieldset>, <address>, <hr>, <table>, списки <ul>, <ol>,
скрипты <script>, <noscript>;
2) встроенные:
♦ текст,
* элементы физического форматирования (<b>, <big>, <i>,
<s>, <strike>, <small>, <tt>),
» логического форматирования (<em>. <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
68
Часть 2. HTML
- Какие там васюкинцы! Васюкинцы денегплатитъ не будут.
Сотни тысяч людей, богато о б ее печенных людей, будут стремиться в
Васюки.
• Следовательно ,НКПС по строит железнодорожную магистраль.
Это - раз.
• Два - это гостиницы и небоскребы для размещения гостей.
• Три - поднятие сельского хозяйства в радиусе на тысячи
километров...
4. Дворец, в котором будет происходить турнир, - четыре.
5. Пять - постройка гаражей для гостевого автотранспорта.
• Для передачи всему миру сенсационных результатов турнира
придется построить сверхмощную радиостанцию. Это - в-шестых.
• Гргобо ' " р ?[ тЖк6мпью*ео. v ...
Рис. 2.8. Пример реализации списков.
' * специального назначения (<а>, <img>, <map>, <applet>,
<object>, <script>, <span>, <iframe>, <font>, <basefont>, <br>,
<sub>, <sup>, <bdo>, <q>),
♦ форм (<input>, <seiect>, <textarea>, <button>, <iabei>).
Допускается отсутствие контента.
Примечание. Элементы <ol>, <ul>, <Н> введены в стандарт, начиная с вер-
сии HTML 2.
Списки разных типов могут вкладываться друг в друга (рис. 2.8),
что демонстрирует следующий пример.
Пример 6. Организация списков
<!DOCTYPE html PUBLIC "7/W3C//DTD HTML 4.0 Trans-tional//EN“>
<html>
<head>
<title>CnncKM</title>
</head>
<body>
- Какие там васюкинцы! Васюкинцы денег платить не будут.. .<br>
Сотни тысяч людей, богато обеспеченных людей, будут стремиться
в Васюки.
<ul>
<П>Следовательно, НКПС построит железнодорожную маги-
страль. Это - раз.
Глава 9. Структурирование и разметка контента 69
--------- ‘ ....... - --------------------------=
<Н>Два - это гостиницы и небоскребы для размещения гостей.
<Н>Три - поднятие сельского хозяйства в радиусе на тысячи
километров...
<о!>
<li уа1ие="4">Дворец, в котором будет происходить турнир, -
четыре.
<1)>Пять - постройка гаражей для гостевого автотранспорта.
</ol>
<Н>Для передачи всему миру сенсационных результатов турнира
придется построить сверхмощную радиостанцию. Это — в-шестых.
</ul>
</body>
. •__________________________________________________________________________________
Списки-определения.
Элементы <dl>, <dt>, <dd>
Отдельный вид списков составляют списки-определения, кото-
рые организуют текст подобно толковому словарю. В них задается
слово-термин и формируется его описание. Само слово по умолча-
нию выделяется полужирным шрифтом и выравнивается по правому
краю. Описание выводится с отступом вправо. Весь список вкла-
дывается в контейнер <dl>...</dl>, который определяет структуру спис-
ка и может содержать только элементы <dt> и <dd>.
<><>
Определение включается в контейнер
<б1>определение</с1Т>
Описание располагается внутри элемента
<dd>onpicaHMe</dd>
<?>
Атрибут
compact
указывает на необходимость вывода списка компактно.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, on key down, onkeyup, onfocus, onblur.
70
Часть 2. HTML
Списки определения - Microsoft Internet Explorer
Црягже Дна И s'1*' нее С®темс • Сгза и*
Adobe Photoshop 6 в теории и на практике
Книга представляете обой пособие по практическому использованию самой
популярной программы для обработки растровой графики. Рассмотрены основные
особенностиеепоследнейверсии. Приведе но и одр об ное оп ис ан ие пр ин ци по в работы и
ЭЛ СМСНТОВинтерфейса. Подобраны десятки профессионал ьных нестандартных примеров,
которые наглядно демонстрируютвозможности пакета. Кии га может быть полезнакак
начинающим пользователям, так и профессионалам полиграфического и web-дизайна.
SQL в примерах и задачах
Изложены основные понятия и с пос о бы применения SQL—популярного языка
запросов креляцииккымбазамданных. О и пеаны приемы манипулирования данным и и
ф орм ирования запрос ов раз л ичнойстепенисложности. Каждая глава пособия
сопровождается упражнениями, которые позволяют закрепить на практике теоретические
знания. Книгаявляется учебным пособием для студентов, обучающихся по направлению
"Прикладная математика и информатика”, атакже может быть использованадля
самостоятельного изучения языка SQL.
... .... ЛГ
jjyfw-Bn ... . j .Идик-иг лак*.
Рис. 2.9. Использование элементов <dl>, <dt>, <dd>
для организации списков-определений.
Содержимое <dl> включает элементы <dt> и <dd>.
Элемент <dd> может включать блочные элементы: <р>, <div>,
<dl>, <pre>, <blockquote>, <fieldset>, <address>, <hr>, <table>> заго-
ловки <h1>....<h6>, списки <ul>, <ol>, скрипты <script>, <noscript>.
Элементы <dt> и <dd> могут включать встроенные элементы:
* текст,
* физического форматирования (<b>, <biq>, <i>, <s>, <strike>,
<small>, <tt>),
» логического форматирования (<em>t <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
♦ специального назначения (<a>, <img>, <map>, <applet>, <ob-
ject>, <script>, <span>, <iframe>, <font>, <basefont>, <br>,
<sub>, <sup>, <bdo>, <q>),
* форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элементы <dl>, <dt>, <dd> введены в стандарт, начиная с вер-
сии HTML 2.
Пример статей энциклопедии, организованных при помощи рас-
смотренных выше элементов, приведен на рис. 2.9.
Глава 9. Структурирование и разметка контента 71
Г~ - - — ---- L-... —. ....................... - ------
<>-<->
9.10 ,__________________________________________________
Вывод отформатированного текста.
Элемент <рге> 1
В тех случаях, когда необходимо отобразить заранее отформати-
рованный текст с сохранением всех пробелов, переводов строк, от-
ступов и т.п., весь подобный контент помещается в контейнер <рге>...
</рге>.
Синтаксис:
<pre width-число символов>...текст...</рге>
4
Текст при этом выводится моноширинным шрифтом, в котором
все символы (в том числе и пробелы) имеют одинаковую ширину. Это
позволяет сохранять относительное расположение символов, что весь-
ма полезно, например, при организации текста в колонки, выводе сти-
хов, листингов программ или псевдографики. Элемент заменил отме-
ненные и запрещенные элементы <хшр>, < listing> и <plaintext>.
<•?>
Атрибут
width
задает ширину отводимого под текст пространства в
символах, то есть максимальную длину строки. Не ре-
комендуемый. Поддерживается не всеми браузерами.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
В элемент <pre> нельзя поместить элементы <img>, <object>, <big>,
<small>, <sub>, <sup>, которые могут нарушить размещение текста
(о них речь пойдет дальше). Контент может включать встроенные
элементы:
* текст, *
» физического форматирования (<b>, <i>, <s>, <strike>, <tt>),
* логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
72
Часть 2. HTML
ё tt
* специального назначения (<а>, <map>, <script>, <span>, <iframe>,
<font>, <basefont>, <br>, <bdo>, <q>),
♦ форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <рге> введен в стандарт, начиная с версии HTML 2.
Пример 7. Форматированный текст (рис. 2.Ю)
Элемент <pie> - Microsoft Internet Explorer
; Файл . Правка Диа Измире цчрьис ^правка
НИ В И
•Элемент <рге> - Блокнот
Файл Лрмка Поиск Сг равка
__ “ _
<Head>
<Title>Элемент f iltpre></Title>
</Head>
<Bodp>
<Pre>
</Pre>
</Bodp>
Рис. 2.10. Форматированный текст
HL.___________________________________________
i
I Разделитель. Элемент <hr>
При оформлении текста часто бывает полезна горизонтальная ли-
ния, отделяющая одни блоки от других. Задается она при помощи
элемента <hr>.
Синтаксис: одиночный тег <hr>.
XHTML
В XHTML требуется закрывающий тег, Контент при этом отсут-
ствует (например, <hrx/hr>), или можно одиночный тег записать
в виде <hr/>.
Глава 9. Структурирование и разметка контента
73
Длина, толщина и расположение линии задаются при помощи
не рекомендуемых атрибутов:
align задает расположение полосы: left полоса начинается у левого поля, center по центру, справа.
width задает размер полосы относительно ширины стра- ницы в пикселях или в процентах (по умолчанию составляет 100%). size задает толщину линии в пикселях.
noshade булев атрибут, определяет вид полосы. По умолчанию (при отсутствии атрибута) она изображается в объем- ном трехмерном виде. Если этот атрибут указан, а ука- зывается он без значения, то выводится плоская цвет- ная полоса.
В XHTML это будет выглядеть так:
noshade=”noshade"
Например:
<hr afign="center" width=’’28O" size=”i'>
<hr width="eo%” size=u9" noshade>
Вместо всех не рекомендуемых атрибутов можно использовать
форматирование с использованием таблиц CSS. ,
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
£
При ме ча ние. Элемент <hr> введен в стандарт, начиная с версии HTML 2.
74
Часть 2. HTML
9.12 w
I Элемент <address>
В статьях часто необходимо выделить информацию об авторе, ре-
дакции, организовать возможность связи с ними через электронную
почту. Создать подобный блок информации удобно при помощи эле-
мента <address>. Этот блок обрабатывается отдельными поисковы-
ми системами. Располагается он чаще всего в начале или в конце
документа.
Синтаксис: элемент является контейнером
<address>..,</address>
Закрывающий тег обязателен.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Контент может включать встроенные элементы:
♦ текст,
* физического форматирования (<b>, <big>, <i>, <s>, <strike>,
<small>,
* логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
» специального назначения (<a>, <img>, <map>, <applet>, <object>,
<script>, <span>, <iframe>, <font>, <basefont>, <br>, <sub>, <sup>,
<bdo>, <q>),
♦ форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <address> введен в стандарт, начиная с версии HTML 2.
Рассмотрим использование данного элемента на примере, в ко-
тором также организована ссылка на адрес (ящик) для отправки
электронной почты.
Глава 9. Структурирование и разметка контента 75
<абс1гге88>КорейкоАлександр ИвановичсЬп»
г. Черноморск,<Ьг>
ЭЛ. почта<а href="roga_l_ kopyta @c/7omon7orskru>roga_i_kopyta@cher-
nomorsk.ru<a>
</address>
В результате поисковая система или любое заинтересованное
лицо будет знать, что данный документ создан Александром
Ивановичем Корей ко, которому можно отправить письмо на адрес
roga_i_kopyta@chernomorsk.ru.
Разметка текста
Глава 10
<•><>
На практике все еще часто можно встретить элементы физическо-
го форматирования текста, задающие гарнитуру шрифта и его начер-
тание. Например, контейнер <1>старгородский лев</|> выведет заклю-
ченный в него текст курсивом. Большинство подобных тегов не
рекомендовано к использованию, а оставленные (рекомендуемые) —
не более чем дань их популярности.
В настоящее время рекомендуется применять элементы логиче-
ского форматирования. Например, используя контейнер <ет>старго-
родский лев</ет>, мы указываем, что словосочетание «старгородский
лев» должно быть выделено. По умолчанию это выделение будет сде-
лано курсивом, но, изменив стиль элемента <ет>, можно вывести
текст любым способом, который у вас ассоциируется с выделением
(например, увеличенным кеглем).
10.1 ,
Элементы логического
форматирования
Среди таких элементов следующие контейнеры:
<еш>...</еш> (от слова emphasis — выделение) — выделяет текст,
по умолчанию при визуализации на экране выводит
его курсивом (рис. 2.11).
<strong >... < /stron g>
указывает на повышенное значение слова или фра-
зы. Степень выделения обычно больше, чем элемен-
том <ет>.
<code>...</code>
в текстах, связанных с программированием, выделя-
ет код программы и выводит его по умолчанию мо-
ноширинным шрифтом типа Courier.
Глава 10. Разметка текста
г- 11 —----
77
Элементы логического Форматирования - Microsoft Internet Explorer
ЧРая Правка Вй4 Избранно. Cjtf-Bi* СпрШа
элемент <еш>: Утро другого дня застало Э.чдочку в парикмахерской.
элемент <strong> Здесь она потеряла прекрасную черную косу и перекрасила
элемент <code>: волосы в рыжий цвет. Затем удалось подняться еще на одну
элемент <var>; ступеньку той лестницы, которая приближала Элпочку к сияющему
элемент <kbd>: ра», где прогуливаются дочки миллиардеров, не годящиеся
элемент <samp>: домашней хозяйке Щукиной даже в подметки.
элемент «dfii*: Порабкредитубыла куплена
элемент <cite>: собачья шкура, изображавшая выхухоль.
элемент <abbr>: Она была употреблена на отделку вечернего туалета.
элемент <acronym>: Мистер Щукин, давно лелеявший мечту о покупке новой
о бычный текст: чертежной доски, несколько приуныл.
<У Г .ом i'' д^Чоикомрыотчр
Рис. 2.11. Элементы логического форматирования текста
и их отображение браузером по умолчанию
<var>...</var> выделяет переменные в тексте программвт Выводит
содержимое элемента по умолчанию курсивом.
<kbd>...</kbd> выделяет текст, вводимый с клав натур bi пользовате-
лем.
<samp>...</samp>
выделяет данные, выводимые программой.
<dfn>...</dfn> выделяет термины-определения.
<cite>...</cite> организует вывод цитаты.
<abbr>...</abbr>
используется для указания на аббревиатуру.
<acronym>...</acronym>
указывает на акроним.
<•?>
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
78
Часть 2. HTML
Контент может включать встроенные элементы:
» текст,
* физического форматирования (<b>, <big>, <i>, <s>, <strike>,
<small>, <tt>),
♦ логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>).
Допускается отсутствие контента.
Примечание. Элементы логического форматирования введены в стандарт,
начиная с версии HTML 2.
10.2 ,__________________________ _________________________________
I Элементы удаления и вставки
Эти элементы удобны для работы со страницами, время от време-
ни подвергающимися изменению.
<del>...</del> помечает текст как удаленный. Может содержать сле-
дующие атрибуты:
cite указывает URI документа, который по-
ясняет причины удаления фрагмента;
datetime указывает дату и время удаления в фор-
мате YYYY-MM-DDThh:mm:ssTZD,\j\c YYYY —
год, мм — месяц, DD — день, hh — час,
тт — минуты, ss — секунды, TZD —
часовой пояс.
Например:
Глава про <del datetime=2oo2-oi-27Ti2:io:54-o.i2>W'\^{.
</del> XHTML
<ins>...</ins> помечает текст как вставку. Удобен для разметки
вносимых в документ правок. Имеет атрибуты cite и
datetime.
Примеча ние . ЭлементыудаленияивставкиневходятвстандартНТМЕ4.О.
Глава 10. Разметка текста
79
___10.3 ,________________________________
| Физическое форматирование текста
<><•> Для физического форматирования служат следующие контейнеры:
<i>.„</i> содержимое контейнера выделяется курсивом, <b>...</b> выделение содержимого полужирным шрифтом, <tt>...</tt> выделение моноширинным шрифтом типа Courier,
<small>...</small>
содержимое контейнера отображается уменьшенным
кеглем,
<big>...</big> увеличенный кегль контейнера,
<strike>...</strike>
содержимое контейнера зачеркивается. Не рекомен-
дуемый,
<s>...</s> аналог <strike>...</strike>. Не рекомендуемый,
<и>...</□> содержимое контейнера подчеркивается. Не рекомен-
дуемый.
<?>
£1N
Хотя не все из перечисленных элементов объявлены устаревши-
ми, рекомендуется для физического форматирования текста ис-
пользовать таблицы стилей.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Контент может включать встроенные элементы:
♦ текст,
• физического форматирования (<b>, <big>, <i>, <s>, <strike>,
<small>, <tt>),
♦ логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>).
Допускается отсутствие контента.
Примечание. Элементы физического форматирования введены в стандарт,
начиная с версии HTML 2.
80
Часть 2. HTML
Рассмотрим на примере использование элементов физического
форматирования (рис. 2.12).
Рис. 2.12. Отображение браузером элементов физического форматирования
Пример 8. Физическое форматирование
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
cidoctype html public "-//W3C//DTD HTML 4.0 Transitional//EN''>
<html>
<head>
<Ш1е>Формати рован ие текста</Ш1е>
</head>
cbody style="background-color: #00f40;">
элемент &Iti>:      <i>Bot как
обернулось это дело. Васисуалий Андреевич по-прежнему</|><Ьг>
элемент <b>:     <Ь>забывал тушить свет
в помещениях общего пользования.</ЬхЬг>
элемент <tt>:     <И>Да и мог ли он пом-
нить о таких мелочах быта,</ПхЬг>
элемент SJtb'g>    <Ыд>когда ушла жена, когда
остался он без копейки,</bigxbr>
элемент <small>: <small>Korpa не было еще точно уяснено
все многообразное</8та11хЬг>
элемент <strike>: <$1пке>значение русской интеллигенции?</51пке><Ьг>
элемент <s>:      <s>Mor ли он
думать, что жалкий бронзовый светишко</8><Ьг>
элемент <u>:     
<и>восьмисвечовой лампы вызовет в соседях такое большое
чувство?</цхЬг>
обычный текст: Сперва его предупреждали по нескольку раз в
день. Потом приелали<Ьг>
элемент <font>:  <font face="arial"> письмо, составленное
Митричем и подписанное всеми жильцами.</1опЪ>
</body>
</html>
Глава 10. Разметка текста
81
В данном примере представлены все элементы физического фор-
матирования, за исключением строки 16, где использован элемент
<font>, подробно рассмотренный в следующем параграфе.
10.4 ,_______________
I Элемент <font>
Данный элемент хотя и отменен, но очень популярен и встре-
чается настолько часто, что упомянуть о нем просто необходимо.
<•><>
Синтаксис: контейнер
<font>...</font>
<?>
Управляет внешним видом шрифта и должен содержать хотя бы
один из трех атрибутов.
face указывает гарнитуру шрифта. Например, face-'ahai”. Ес- ли такой шрифт не установлен на компьютере и браузер не может его отобразить, то через запятую записывается несколько шрифтов в порядке предпочтительности. На- пример, face=”Arial, Tahoma, Times New Roman".
size устанавливает размер шрифта в собственных услов- ных единицах от 1 до 7 (7 — самый крупный). По умолчанию применяется значение size=”3", что обычно соответствует 12 пунктам, но может легко изменять- ся в настройках браузера. Поддерживается относи- тельное изменение. Для этого перед значением атрибута ставится знак «плюс» (+) или «минус» (—). Например, size=”+ /"увеличит шрифт на одну едини- цу по сравнению с текущим размером, size="-2" — уменьшит на две" единицы.
color указывает цвет шрифта в системе RGB. Например, С010Г=”#66ССОО".
Общие атрибуты:
Id, class, title, style, lang, dir.
Пример использования элемента <font> см. в предыдущем пара-
графе.
82
Часть 2. HTML
10.5 ,______________________________________________
I Элемент <basefont>
Для задания базового шрифта сразу для всей страницы прменя-
ется элемент <basefont>. Обычно он указывается сразу после тега
<body>. Использование этого тега не отменяет возможность изме-
нения шрифта в любом месте.
<>•<•>
Синтаксис: одиночный тег.
Также как и <font> — не рекомендуемый — и имеет те же атрибуты.
Изображения
Глава 11
Восприятие Web-страницы резко меняется, как только на ней по-
являются мультимедийные объекты: изображения, музыка, анима-
ция или видео. Все они хранятся в отдельных файлах специальных
форматов. Для отображения такой информации применяется два
подхода. При первом информация воспроизводится самим браузе-
ром (чаще всего используется для графики). При втором обработка
производится дополнительными программами, которым передается
управление. Такие программы могут быть как независимыми (напри-
мер, Microsoft Word), так и расширяющими возможности браузеров -
так называемые плагины (plug-ins), которые обычно необходимо
дополнительно скачать и установить на ваш компьютер.
Следует помнить, что неоправданное увлечение графикой при-
водит к увеличению времени, необходимого для загрузки страницы.
Сайты, которые долго загружаются, теряют своих посетителей.
Содержимое файла естественным образом определяется по его рас-
ширению, например, графические форматы, используемые в Интер-
нете, имеют расширения: JPG, GIF, PNG. Другой способ заключа-
ется в указании атрибута content в служебном элементе <meta> (см.
п. 17.2). Значением атрибута является строка, указывающая М1МЕ-тип
файда, которая может принимать, например, значения image/gif.Под-
робный список этих MIME-типов можно найти в приложении 4.
Изначально браузеры распознают и отображают три формата
растровой графики:
GIF — хорошо подходит для рисованной графики с небольшим
количеством цветов, имеет возможность создания анимированных
изображений и рисунков с прозрачным фоном;
JPEG — для фотографий;
PNG — создан как альтернатива штатному GIF, но встречается
значительно реже.
Для отображения других форматов необходимо устанавливать
плагины или запускать Java-апплеты.
Векторная графика представлена технологиями Shockwave и Hash
от компании Macromedia, но требует установки дополнительных
модулей.
84
Часть 2. HTML
- - . ' —I
Осознание этого факта привело к тому, что современные Web-пор-
талы не злоупотребляют графикой, а делают упор на полезности ин-
формации. Тем не менее представитв современный сайт без графики
невозможно. Поэтому девиз при исполвзовании мулвтимедиа и изо-
бражений должен быть таким: «Чувство меры!» Размер файла более
50 Кб следует считать скорее исключением, чем нормой. Эмпириче-
ское правило не рекомендует использовать графические файлы раз-
мером более 35 Кб.
11.1 ,_______________
I Элемент <img>
Этот элемент наиболее распространен для отображения гра-
фических файлов, начиная маленькими пиктограммами-стрелка-
ми и заканчивая полноцветными фотографиями.
<><>
Синтаксис: одиночный тег с двумя обязательными атрибутами
<img SrC—'uri" alt—Альтернативный текст">
Атрибут
src
значение его определяет URI (адрес) загружаемого
графического файла. Может быть как абсолютным,
так и относительным.
При отображении Web-страницы прежде всего загружается тек-
стовая часть, а затем — более емкие графические файлы. В окне
браузера вместо этих файлов сначала появляются прямоугольные
области, зарезервированные под рисунки. <img> является элемен-
том уровня текста. По умолчанию рисунок будет выводиться в об-
щем потоке как одна большая буква в том месте, где встретится тег
<img>. Как правило, первоначальные изображения представляются
в виде небольшой пиктограммы (рис. 2.13). Уже на этом этапе мож-
но дать знать пользователю, загрузку какого рисунка он ожидает.
Это очень полезно для пользователей текстовых браузеров или для
тех, у кого отключено воспроизведение графики.
Для отображения такого поясняющего рисунок текста служит
атрибут
alt значением атрибута является строка, которая выво-
дится в качестве поясняющего текста. Не лишним бу-
дет заключить этот текст в квадратные скобки
(ait=’[текст, поясняющий рисунок]1), как того требуют неко-
торые виды текстовых браузеров^ чтобы отличить его
Глава 11. Изображения
85
Рис. 2.13. Отображение браузером рисунка и альтернативного текста
от обычного текста. Это не единственное назначение
альтернативного текста. В современных браузерах он
воспроизводится как «всплывающая» подсказка при
наветении указателя мыши на рисунок.
Следующие два атрибута являются рекомендуемыми:
height
width
задает высоту рисунка в пикселях или в процентах;
задает ширину рисунка.
Если эти атрибуты заданы, то браузер оставляет место для изо-
бражения и страница загружается быстрее (рис. 2.14). В противном
случае вместо рисунка сначала отображается квадратик, а после за-
грузки графического файла происходит обновление страницы с со-
ответствующим перемещением текста, других объектов и потерей
времени.
Если рекомендуемые атрибуты не указаны явно, то по умолчанию
рисунок отображается в соответствии с собственными размерами.
Если указан один из атрибутов, то второй вычисляется автомати-
чески с сохранением пропорций (рис. 2.15). При этом размер загру-
жаемого файла не изменяется, но время на трансформацию рисунка,
естественно, требуется. При больших размерах файла затраты времени
могут быть достаточно ощутимыми.
86
Часть 2. HTML
• Пример параметра width: <IMG width=Z 50 >
Параметр width задает ширину области в пикселях, отводимой под изображение. Если указана
только ширина, то высота рисунка автоматически масштабируется браузером для сохранения
пропорций.
• Пример параметрай«£Й£ <IMGheight=-Z00 >
Параметр Л«§Л^задает высоту области в пикселях, отводимой под изображение. Если указана
только высота, то ширина рисунка автоматически масштабируется браузером для сохранения ;
пропорций.
Обратите внимание на тот факт, что размер изображения в килобайтах не меняется при
изменении параметров width и height _j
;£]Готас> Л । " Мой компьютер
Рис. 2,14. Влияние атрибутов heightu width на представление изображения
Рис. 2.15. Изменение атрибутов элемента <img>
позволяет управлять линейными размерами отображаемого изображения
Глава 11. Изображения
87
Если атрибуты указаны явно, то картинка отображается в области
указанных размеров. Если пропорции области и рисунка не совпада-
ют, то изображение трансформируется до размеров области.
Интересные особенности возникают, если атрибуты задаются
в процентах. Размер области, в которой отображается рисунок, в этом
случае вычисляется относительно размеров окна браузера. При изме-
нении размеров окна соответственно меняется и размер рисунка. Ес-
ли задан только один атрибут, то второй вычисляется автоматически,
из условия сохранения пропорций. Если оба атрибута заданы в про-
центах, то при непропорциональном изменении окна (только высоты
или ширины) изображение исказится. Если размер по одной из осей
превысит размер окна, то появится полоса прокрутки (рис. 2.16).
Возможны комбинированные способы задания размеров (ширина —
в пикселях, высота — в процентах), которые в большинстве случаев
приводят к искажению: конечный размер, заданный в пикселях — со-
храняется, в процентах — трансформируется.
Рис. 2.16. При болыпих отображаемых размерах рисунка
появляется полоса прокрутки
Существуют и другие атрибуты.
hspace
в пикселях задает размер пустого поля, отделяющего
рисунок справа и слева по горизонтали.
88
Часть 2. HTML
'"'1
vspace border действует аналогично по вертикали. задает толщину рамки вокруг рисунка в пикселях. Цвет рамки данный атрибут не регулирует, но для большин- ства браузеров это черный. Не рекомендуемый. В со- временных версиях для формирования рамки рекомен- дуется использовать элемент HTML <style>.
align задает расположение рисунка относительно текущей строки. Может принимать ряд значений. По умолча- нию — bottom (низ). Строка идет по нижнему краю рисунка, а рисунок рассматривается как большая бук- ва, вставленная в строку (см. рис. 2.5). top строка текста вдет по верхней границе картинки (рис. 2.17). middle строка текста проходит по середине ри- сунка. рисунок находится слева от текста. йрЛГ рисунок прижат к правому полю. Текст располагается слева от рисунка. Значения left и right в настоящее время считаются ус- таревшими. Их рекомендуется заменять при помо- щи CSS.
ismap используется при организации графической карты ссы- лок (о чем ниже). В этом случае элемент <img> дол- жен быть вложен в контейнер <а>...</а>. Обращение к ссылке обрабатывается на сервере.
usemap используется для задания графической карты ссы- лок, которая ассоциируется с данным рисунком. Изображение при этом является активным, то есть щелчок по нему воспринимается системой, и брау- зер обрабатывает его в соответствии с заданными в файле инструкциями.
name присваивает изображению внутреннее имя, по кото- рому его можно найти в программе и обратиться из скриптов. Аналогичен атрибуту id, но применяется для совместимости со старыми браузерами.
Общие атрибуты (см. и. 17.4):
Глава 11. Изображения
89
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков собвттий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
0Ы
Примечание. Элемент <img> введен в стандарт, начиная с версии HTML 2.
Как поместитв рисунок горизонталвно по центру, если элемент
<img> не имеет соответствующего атрибута? Здесв надо проявитв
немного фантазии и скомбинироватв его с элементом, которвш мо-
жет производитв центрирование, например, <р> или, лучше, <div>:
<р align="centern> <img src="bird.gir></p>
<div align=”center"> <img src="bird.gif></d\v>
90
Часть 2, HTML
112 _ ________________________________________________
Карта изображения.
Элементы <тар>, <агеа>
Рисунок может являться ссылкой, для чего элемент <img> дол-
жен быть помещен в контейнер <а йге/=...>...</а>.Еще эффектнее
воспринимается сайт, на котором части изображения являются
ссылками на разные страницы. Такое изображение называется гра-
фической картой.
Существуют два подхода к организации карты. При первом ин-
формация о том, какая часть изображения является ссылкой и куда
она ведет, то есть описание карты, хранится на сервере. В этом слу-
чае в теге <img> указывается атрибут ismap, упоминавшийся ранее.
Такой подход сейчас практикуется редко.
Во втором случае карта размещается в том же файле. Говорят, что
карта размещена на стороне клиента (в архитектуре клиент-сер-
вер). Элемент <img> в этом случае имеет атрибут usemap, значение
которого является именем карты. Описание карты не обязательно
должно следовать за тегом <img>. Часто его располагают в конце
документа.
В элементе одновременно могут присутствовать атрибуты usemap
и ismap. В этом случае приоритет имеет обработка карты клиен-
том-браузером, то есть используется usemap. В случае неудачи под-
ключается серверный обработчик, задаваемый атрибутом ismap.
Забегая несколько вперед, отметим, что если встретилась кон-
струкция <а href=...xirng src=... usemap=...></a>,To есть элемент
<img> сам является ссылкой, которая организована при помощи кон-
тейнера <а /?ге/=...>...</а>,то сначала обрабатывается карта (usemap
или ismap), а ссылка, организованная контейнером <а href=...>...<!&>
игнорируется. И только в случае неудачи используется альтерна-
тивная ссылка <а href=...>...<!&>.
<-><->
Синтаксис: карта организуется при помощи двух элементов —
<тар> и <агеа>. Описание карты располагается в обобщающем
контейнере <тар>, а активные фрагменты-ссылки рисунка, задаю-
щие ресурсы, к которым приведет ссылка, описываются в несколь-
ких одиночных тегах <агеа>.
<тар пате=иту_тар“>
<area Shape='recr* C00rds=‘20,20,140,100'' href=“http://adress_1"alt="HanpaBO
пойдешь - коня потеряешь“>
</тар>
Глава 11. Изображения
91
<?>
Атрибут <тар>
пате
имя элемента <тар>. Оно может использоваться в кар-
тинке <img>, объекте <obj> или элементе <input>.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Контент <map> может включать блочные элементы и элементы
<агеа>.
Атрибуты <агеа>
shape
задает форму активной области. Может принимать
следующие значения:
default
точка,
rect прямоугольник,
circle
круг,
poly многоугольник.
coords через запятую задает координаты соответствующих
фигур. Порядок — общепринятый в программиро-
вании — сначала координата х, затем у. Для прямо-
угольников — хлевый, у верхний, X правый, у ниж-
ний. Для окружности — х центра, у центра, г. Для
многоугольника — необходимое число пар точек.
href задает URI связанного документа.
nohref означает, что для описываемой области нет ссылки.
alt задает альтернативный текст, который будет отобра-
жаться текстовыми браузерами или «всплывать» как
подсказка.
tabindex задает порядок перехода по ссылкам при помощи
клавиши Tab при работе с клавиатурой.
92
Часть 2. HTML
' "i
accesskey назначает «горячие» клавиши для быстрого доступа
к элементам. В Windows быстрый доступ организу-
ется при помощи сочетания Alt + клавиша. Напри-
мер, accesskey=”d” будет переводить фокус ввода на
заданную область при нажатии Alt + D.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, on mousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur.
Рис. 2.18. Карта ссылок
Примечание. Элементы <тар> и <агеа> введены в стандарт, начиная с вер-
сии HTML 3.2.
Рассмотрим на примере организацию карты.
Пример 9. Организация карты ссылок
1
2
3
4
5
6
<’doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>KapTa ссылок</Ш1е>
</head>
<body>
Глава 11. Изображения
93
7
8
9
10
11
12
<img src="../images/arrows.bmp" usemap="#arrows">
Рисунок используется как карта ссылок
<map name="arrows,l>
Carea shape="rect" coords="0r0,100,190,f href="http://adress_1'
аН="налево пойдешь - коня потеряешь">
Carea shape="rect" coords=" 101,0,200,190" nohref аИ="прямо
пойдешь - ссылки не найдешь">
Carea shape="rect" coords="201,0,300,190" href="http://adress_3"
аИ=”направо пойдешь - сам потеряешься">
</тар>
</body>
</html>
Строка 7: код этой строки выводит изображение и ссылается на
элемент с именем #arrows, в котором описана карта.
Строка 8: обычный текст, выводимый после рисунка.
Контейнер <тар> содержит строки 9—13: описание карты.
Строки 10—12 описывают отдельные области и указывают, какую
ссылку они будут вызывать.
Проведя указателем мыши по такому изображению, можно легко
обнаружить, где находится ссылка, а где ее нет (рис. 2.18). Справа
и слева карты изображения ссылки существуют, а в центре — от-
сутствует. Адрес ссылки можно прочитать в статусной строке брау-
зера (“adress_3”B нашем примере). Выполняя пример, обратите вни-
мание, как адрес ссылки меняется при перемещении маркера с левой
стрелки поворота на правую.
Мультимедийные элементы
Глава 12
<>•<>
Возможность включать мультимедийные данные появилась в язы-
ке HTML не сразу. Простейший способ встраивания их в состав
HTML-документа состоит в создании гиперссылок, которые указы-
вают на мультимедийные объекты. Если браузер не в состоянии ото-
бразить файл, то вызываются соответствующие внешние приложения.
Если приложение не обнаружено, то на экране возникает специальный
значок в виде разорванной страницы, который указывает, что объект
не может быть отображен. В HTML 4 основным для встраивания
мультимедийных средств является элемент <object>.
12.1 j _____________________________________
I Элемент <object>
Под объектом в данном случае понимается файл данных, кото-
рый организует вызов той или иной программы, отображающей дан-
ные. Подключается такой объект при помощи элемента <object>.
Синтаксис: контейнер
<object> attribute="vaiue”
Альтернативное содержание </object>
Закрывающий тег — требуется.
Сведения о присоединяемом объекте передаются с помощью ат-
рибутов. Контент элемента <object> играет второстепенную роль и
указывает только дополнительные сведения для приложения. Снача-
ла анализируется содержание атрибутов, подобно подключению изо-
бражении. Производится попытка отобразить объект. Если попытка
оказалась неудачной, то анализируется и отображается содержимое
контента, который называют альтернативным содержанием. Значе-
ния атрибутов в этом случае игнорируются.
Элементы <object> можно вкладывать друг в друга, образуя
альтернативные цепочки. Например, первый элемент может содер-
жать описание фильма в формате AVI. Если нет средств просмотра
Глава 12. Мультимедийные элементы
95
формата AVI, то второй элемент задает просмотр статичного изобра-
жения. Если же компьютер пользователя не позволяет отобразить ни
первое, ни второе, то выводится альтернативный текст, заданный
в третьем элементе <object> или в самом контенте.
Элемент <object> может использоваться для отображения не-
стандартных типов данных.
<•?>
Атрибуты элемента <object>:
classid="urr определяет URI-адрес файла для создания объекта.
Используется в тех случаях, когда необходимо под-
ключить java-апплеты или другие нестандартные про-
граммы. Для стандартных программ следует исполь-
зовать атрибут date.
codebase="uri” ука зывает базовую часть адреса для объекта, заданного
в classid, отображаемых данных (см. data) и вспомога-
тельных файлов (см. archive). В этом случае в соответ-
ствующих атрибутах можно использовать относитель-
ные адреса. Если они не указаны явно, то за значение
адреса принимается URI текущего документа.
date="uri” указывает адрес данных, которые будут отображаться
программным объектом. Применяется для рисунков
и других аналогичных стандартных типов данных.
type задает MIME-тип загружаемых данных, адрес кото-
рых указан в data.
codetype указывает МШЕ-тип данных, которые должны быть
загружены, если используется атрибут classid.
archive=”uri” позволяет указать список адресов дополнительных
файлов, которые будут использованы объектом. Это
могут быть рисунки, библиотеки, драйверы и т.п. По-
зволяет ускорить загрузку объекта.
declare если ука зать этот атрибут, то элемент <object> будет яв-
ляться только объявлением объекта, но сам объект
еще создан не будет. Для подключения объекта к не-
му необходимо обратиться из другого элемента.
standby задает альтернативный текст, который будет выво-
диться, пока элемент не загрузится. Например: «Жди-
те, и вам загрузится!».
width задает ширину поля в пикселях, в котором будет ото-
бражаться объект.
96
Часть 2. HTML
1
height аналогично задает высоту поля для отображения объекта.
align wspace hspace usemap border name показывает, где должен находиться объект на стра- нице и как его должен обтекать текст. Используется также, как в элементе <img> (см. п. 11.1). Допусти- мые значения: top текст выравнивается по верхнему краю объекта, middle текст — по середине объекта, buttom текст — по нижнему краю объекта, left объект располагается слева, текст об- текает его справа, right объект располагается справа, текст обтекает слева. указывает величину полей слева и справа от объекта, указывает величину полей снизу и сверху от объекта, как и для изображения, указывает адрес карты, которая ассоциируется с Данным объектом. Вся информация, связанная с вызовом ссылок, обрабатывается на сторо- не клиента. Карта расположена в элементе <тар>. Объект используется также в качестве ссылки. задает ширину рамки вокруг объекта. В настоящее вре- мя устарел. определяет имя объекта. Аналогичен атрибуту id. Ис- пользуется для совместимости со старыми версиями браузеров.
tabindex accesskey Общие определяет порядок перемещения по элементам вво- да при помощи клавиши Tab. Значением атрибута является число — порядковый номер. 1 назначает «горячую» клавишу для организации дос- тупа к элементу. атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Глава 12. Мультимедийные элементы
97
Контент может включать элементы:
1) один или несколько элементов <рагат> — для задания атри-
бутов;
2) блочные: заголовки <hl>.<h6>, элементы <р>, <div>, <dl>,
<pre>, <blockquote>, <fieldset>, <address>, <hr>, <table>, списки
<ul>, <ol>, скрипты <script>, <noscript>;
3) встроенные:
♦ текст,
* элементы физического форматирования (<b>, <big>, <i>,
<s>, <strike>, <small>, <tt>),
♦ логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
• специального назначения (<a>, <img>, <map>, <applet>,
<object>, <script>, <span>, <iframe>, <font>, <basefont>,
<br>, <sub>, <sup>, <bdo>, <q>),
♦ форм(<1приЬ, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <object> введен в стандарт, начиная с версии HTML 4.
Пример 10. Подключение о&ьектов
«ddoctype html public"-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<Ш1е>Объект<ЛШе>
</head>
<body>
< h1 >Scorpions</h1 >
Cobject data="file://h:/games/teleigra/melodies/midi/11 .mid" type="audio/
midi”>Ecnn ничего не услышали, то расслабьтесь и попытайтесь насла-
диться чтением этого текста</оЬ]есЬ>
< р>Увы! Бумага не может передать очарование некоторых роман-
тических композиций</р>
</body>
</html>
В этом примере смоделировано подключение звукового файла
11.mid. В данном случае после анализа типа данных, поскольку
браузер сам не может воспроизвести звук, для проигрывания вызы-
вается стандартная программа Windows — «Универсальный проиг-
рыватель» (mplayer2.exe) (рис. 2.19). Тип файла MID ассоциирован
с этой программой в настройках Windows. Альтернативный текст
не воспроизводится. Если настройки произведены неправильно, то
файл не сможет быть воспроизведен и в браузере вы увидите только
альтернативный текст.
4 Зак. 1627
98
Часть 2. HTML
j| Объект - Microsoft Internet Explorer
jj Файл Правка gpy; Избранное Сервис Справка Д
Scorpions
Показ
Клип
-Д Автор
Авторское право-
Увы I Бумага \
некоторых рс
О0ткры>ЯМ1..
Рис. 2.19- Если браузер не справляется сам,
то вызывает на помощь внешние программы
Если для воспроизведения используется элемент ActiveX для
Internet Explorer, то задается атрибут класса id, значение которого —
шестнадцатеричный идентификатор класса, описывающий соответ-
ствующий элемент.
12.2 ,_______________________
I Элемент <embed>
Ы Аналогом <object> выступает элемент <embed>, который также
является контейнером. Он уже не входит в стандарт HTML, одна-
ко поддерживается ведущими браузерами. Предназначен для встав-
ки объектов непосредственно на страницу. Включается в этот
элемент как сам объект, так и текст. Текст в этом случае будет
отображаться, как подпись. Содержание задается при помощи ат-
рибутов, располагающихся в открывающем теге. Если отобразить
содержимое <embed> не удалось, то внутрь можно вложить другой
элемент <embed> (организовать альтернативную цепочку), как и
для <object>. Если ни один элемент не распознан, то просто ото-
бразится текст, который входит в его контент.
Глава 12. Мультимедийные элементы
99
Атрибуты:
src как и для элемента <img> (см. п. 11.1), определяет адрес URI, по которому хранится данный объект.
type определяет MIME-тип данных, передаваемых серве- ром (см. приложение 4).
autostart true I false
указывает, запускать ли элемент сразу после загрузки.
hidden присутствие этого атрибута делает элемент невиди- мым.
пате , align задает имя элемента. задает выравнивание. Принимает значения: left по левому краю, right по правому краю,
• texttop по верхнему краю, textmiddle по центру, textbottom по нижнему краю, baseline выравнивает по базовой линии.
codebase-’urr указывает базовую часть адреса для объекта, заданного в elassid, отображаемых данных (см. data) и вспомога- тельных файлов (см. archive). В этом случае в соответ- ствующих атрибутах можно использовать относитель- ные адреса. Если они не указаны явно, то за значение адреса принимается URI текущего документа.
date="uri" указывает адрес данных, которые будут отображаться программным объектом. Применяется для рисунков и других аналогичных стандартных типов данных.
type задает MIME-тип загружаемых данных, адрес кото- рых указан в data.
codetype указывает MIME-тип данных, которые должны быть загружены, если используется атрибут elassid.
. archive=”uri" позволяет указать список адресов дополнительных файлов, которые будут использованы объектом. Это могут быть рисунки, библиотеки, драйверы и т.п. Позволяет ускорить загрузку объекта.
Часть 2. HTML
~i
100
declare если указать этот атрибут, то элемент <object> будет яв- ляться только объявлением объекта, но сам объект еще создан не будет. Для подключения объекта к не- му необходимо обратиться из другого элемента.
standby задает альтернативный текст, который будет выво- диться, пока элемент не загрузится. Например: «Жди- те, и вам загрузится!».
width задает ширину поля в пикселях, в котором будет ото- бражаться объект.
height задает высоту поля для отображения объекта.
align показывает, где должен находиться объект на странице и как его должен обтекать текст. Используется так же, как в элементе <img> (см. п. 11.1). Допустимые значения: top текст выравнивается по верхнему краю объекта, f middle текст — по середине объекта, bottom текст — по нижнему краю объекта, left объект располагается слева, текст об- текает его справа, right объект располагается справа, текст об- текает слева..
wspace указывает величину полей слева и справа от объекта.
hspace указывает величину полей снизу и сверху от объекта.
usemap как и для и зображения, указывает адрес карты, кото- рая ассоциируется с данным объектом. Вся информа- ция, связанная с вызовом ссылок, обрабатывается на стороне клиента. Карта расположена в элементе <тар>. Объект также используется в качестве ссылки.
border задает ширину рамки вокруг объекта. Устарел.
name определяет имя объекта. Аналогичен атрибуту id. Ис- пользуется для совместимости со старыми версиями браузеров.
tabindex определяет порядок перемещения по элементам ввода при помощи клавиши Tab. Значением атрибута яв- ляется число — порядковый номер.
Глава 12. Мультимедийные элементы
101
с
accesskey
назначает «горячую» клавишу для организации дос-
тупа к элементу.
12.3
I Элемент <applet>
В настоящее время отменен в HTML 4. Был разработан в свое
время, чтобы поддерживать апплеты Java и включать их в HTML-
документы.
<>•<•>
Синтаксис: элемент является контейнером:
<applet>.. .< /applet>
<?>
Атрибуты
code
определяет URI файла, который содержит двоичный
скомпилированный байт-код апплета. Имеет расши-
рение .class, например, code-’aud-o class"
object определяет» и мена ресурсов, содержащих представле-
ние состояний апплета.
align задает выравнивание элемента. Допустимы значения:
kft по левому краю,
right по правому краю,
top по верхнему краю,
middle по Центру,
bottom по нижнему краю.
alt задает альтернативный текст,. отображаемый во время
загрузки апплета.
codebdse="uri" указывает базовую часть адреса для объекта, заданного
в classid, отображаемых данных (см. data) и вспомога-
тельных файлов (см. archive). В этом случае в соответ-
ствующих атрибутах можно использовать относитель-
ные адреса. Если они не указаны явно, то за значение
адреса принимается URI текущего документа.
date="uri” указывает адрес данных, которые будут отображаться
программным объектом. Применяется для рисунков
и других аналогичных стандартных типов данных.
102
Часть 2. HTML
' i
type
codetype
archive="uri"
declare
standby
width
height
align
wspace
hspace
usemap
задает MIME-тип загружаемых данных, адрес кото-
рых указан в data.
указывает MIME-тип данных, которые должны быть
загружены, если используется атрибут elassid.
позволяет указать список адресов дополнительных
файлов, которые будут использованы объектом. Это
могут быть рисунки, библиотеки, драйверы и т.п.
Позволяет ускорить загрузку объекта.
если указать этот атрибут, то элемент <object> будет яв-
ляться только объявлением объекта, но сам объект еще
создан не будет. Для подключения объекта к нему не-
обходимо обратиться из другого элемента.
задает альтернативный текст, который будет выво-
диться, пока элемент не загрузится. Например: «Жди-
те, и вам загрузится!».
задает ширину поля в пикселях, в котором будет ото-
бражаться объект.
задает высоту поля для отображения объекта.
показывает, где должен находиться объект на, стра-
нице и как его должен обтекать текст. Используется
также, как в элементе <img> (см. п. 11.1).Допусти-
мые значения:
toP текст выравнивается по верхнему краю
объекта,
middle текст — по середине объекта,
buttom текст — по нижнему краю объекта,
left объект располагается слева, текст об-
текает его справа,
right объект располагается справа, текст об-
текает слева.
указывает величину полей слева и справа от объекта,
указывает величину полей снизу и сверху от объекта,
как и для изображения, указывает адрес карты, которая
ассоциируется с данным объектом. Вся информация,
связанная с вызовом ссылок, обрабатывается на сторо-
не клиента. Карта расположена в элементе <тар>.
Объект также используется в качестве ссылки.
Глава 12. Мультимедийные элементы
103
border задает ширину рамки вокруг объекта. В настоящее время устарел.
name определяет имя объекта. Аналогичен атрибуту id. Ис- пользуется для совместимости со старыми версиями браузеров.
tabindex определяет порядок перемещения по элементам ввода при помощи клавиши Tab. Значением атрибута яв- ляется число — порядковый номер.
accesskey назначает «горячую» клавишу для организации дос- тупа к элементу.
Общие атрибуты:
id, class, style, title.
Контент чаще всего состоит из элемента <param>, передающего
дополнительные параметры.
12.4 _____________________________________
] Элемент <param>
Элемент <param> описывает дополнительные значения, кото-
рые не входят в набор стандартных атрибутов <object> и <applet>.
Он позволяет передать имя параметра и его значение. Элемент
<param> вкладывается в контейнер <object> или <applet> и распо-
лагается ранее других. Часто он бывает единственным контентом.
Если параметров несколько, то используется несколько элементов
<param>. Часто применяется для подключения популярных сегодня
Flash- технологий.
<•>•<>
Синтаксис: одиночный тег
<рагаш пате="имяп уа1ие=”значениеп>
Один элемент передает одну пару имя параметра—значение. Но
таких элементов можно использовать сколько угодно.
Использование элемента может выглядеть, например, следующим
образом:
<object ...>
<param пате=“х“ valuers' ...>
<param пате=у value="25" ...>
</object>
104
Часть 2. HTML
Атрибуты:
id уникальный идентификатор элемента.
пате определяет имя атрибута, который передается объекту.
value определяет значение атрибута, который передается объекту.
valuetype задает тип передаваемого атрибута. Допустимые зна- чения: data значение представляет собой строку; ref значение является URI файла, где со- держатся данные; object указывает, что value ссылается на дру- гой объект. Значение value равно id этого объекта.
type задает MIME-тип данных, если valuetype="ref”.
Например, <param name^extco^r value="biue”>
Организация гиперссылок
Глава 13
Гиперссылки являются основной особенностью гипертекста, имен-
но поэтому элемент, представляющий собой гиперссылку (слово,
фраза или изображение), изначально сделан активным. Эта актив-
ность проявляется во взаимодействии с пользователем. Например,
при попадании курсора на гиперссылку он приобретает форму ла-
дони с вытянутым пальцем. Так браузер по умолчанию организует
взаимодействие со ссылкой. Часто разработчики модифицируют это
взаимодействие, изменяя цвет текста или рисунок.
Однако интерактивность — это только внешнее свойство ссылки,
призванное обратить на нее внимание. Основные события развора-
чиваются после вызова гиперссылки — щелчка по ней правой кноп-
кой мыши или нажатием клавиши Enter. Такой вызов позволяет из
данного места документа перейти к другому документу, организо-
вать доступ к файлу по FTP, запускает программу-клиент электрон-
ной почты или что-либо еще в зависимости от указанного в URI
интернет-протокола. Уместно будет .напомнить типовые формы за-
писи URI для:
♦ загрузки Web-страниц:
http://www.domain_name.zone/directory/file_name.html
« доступа к FTP-серверам для получения файлов:
ftp://login@password@ftp.domain_name.zone/directory/
fi le_name. exe
где часть login@pas sword может отсутствовать, например, если сер-
вер разрешает анонимный доступ. Если имя файла не указано, то
будет открыт соответствующий каталог, в котором файл можно вы-
брать вручную.
-» отправки писем по указанному адресу:
mailto:user_name@postserver_name.zone
♦ вызов файла с диска локального компьютера:
d:\directory\file_name.txt
» доступ к файлам на gopher-серверах:
gopher: / /gopher. domain__name. zone/directory/
file _name.abc
106
Часть 2. HTML
Если имя файла не указано, то будет открыт соответствующий
gopher-каталог, в котором файл можно выбрать вручную.
Для организации гиперссылок используются элементы <а>, <link>,
<base>.
13.1,____________
I Элемент <а>
Название элемента <а> происходит от английского слова anchor,
чго в переводе означает «якорь». Этот якорь призван отметить в тек-
сте две точки. Первая — сама ссылка, из которой производится вы-
зов. Вторая отмечает точку, за которую этот якорь должен «заце-
питься», т.е. точка, в которую этот вызов должен привести. Эти две
разных функции оператора задаются разными атрибутами,
<>•<>
Синтаксис: элемент уровня текста представляет собой контейнер
<а atribute_1 = “value г atribute_2 = “value 2”>...</а>
Закрывающий тег обязателен. Элементы <а> не могут вклады-
ваться друг в друга.
<?>
Вызов ресурса. Основной атрибут для организации ссылки:
href происходит от HyperREFerence — гиперссылка. Зна-
чение атрибута — это URI вызываемого ресурса. URI
(далее просто адрес) берется в HTML в кавычки, так
как содержит служебные символы — двоеточия и
слеши.
XHTML
Как неоднократно подчеркивалось выше, в XHTML кавычки
подразумеваются в обязательном порядке.
Например:
<а hret=“Л«р7/^лк.ь»Издательство Новое знание</а>
По умолчанию на странице текст «Издательство Новое знание»,
под которым скрывается гиперссылка, будет отображен синим цве-
том и подчеркнут. Просмотренные ссылки имеют фиолетовый цвет,
чтобы не смешиваться с непросмотренными.
Реакция на щелчок по ссылке зависит от URL В большинстве
случаев — это вызов другой Web-страницы по протоколу HTTP. При
этом в ссылке может быть указан абсолютный или относительный
Глава 13. Организация гиперссылок 107
I 1 -----
адрес. Относительный адрес начинает свой отсчет с директории на
сервере, где располагается исходный код загруженной страницы.
Например, если вы находитесь на странице wnk.biz/
index, html и хотите организовать ссылку на файл help. html в той
же директории, то при использовании относительной адресации
вам достаточно указать
< а href="help.html">leKCTCCunw</a>
В следующем примере организован переход к английской вер-
сии сайта, расположенной в каталоге englishno абсолютному ад-
ресу wnk.biz/english/index.html.
< a href= "еп9//5/т//пс1ех.лгт/”>Английскаяверсия</а>
Обратный переход на одну директорию вверх из каталога /english
(расположенную выше уровнем) организуется обычным способом —
На два уровня вверх — дважды используйте комбинацию из
трех символов.
< а href- '.У/псУех.Мп7/'>О6ратный вызов русскоязычной версии из основно-
го каталога, находящийся на уровень выше английской версии</а>
Переход по ссылке не обязательно должен открывать новый
Web-документ. Например, ссылка
< а href=’’mallto:nk@wnk.biz‘>f]vniivrre[HCi^ "мылом"</а> — организует
вызов почтовой программы с заданным адресом mailto: nk@wnk. biz.
< а йге/=7/р.#йр.1Уп/<.ь/7'>Архивы</аэерганизует доступ к архиву по
FTP-протоколу.
< а href="file://e:/book/archiv.htm“>f<pxMBU</a^ipO4wraeT файл с вашего
компьютера.
Внутренние переходы. Чтобы перейти к определенному месту Web-
страницы, после адреса страницы (абсолютного или относительного)
указывается знак "#' и имя метки, указывающей точку входа. Переход
обозначает, что страница будет отображаться с выбранного места.
Например, <а href-'.../index,htrnl#news“> или <а href^news^, если
переход осуществляется в том же файле.
В файле, к которому осуществляется переход, точку входа также
надо разметить. Делается это при помощи того же якоря, но с атри-
бутом пате. Значение атрибута — имя метки. Контейнер <а>...</а>
не может быть пустым, поэтому в него надо поместить какое-нибудь
слово из общего контента, к которому и будет осуществляться
переход. Например:
108
Часть2. HTML
—।
<a лате="Ьед/лл/пд>Здесь</а>начинается текст
Типичное использование таких внутренних ссылок — переход
к началу страницы в больших документах или организация оглав-
ления с возможностью перехода к нужному пункту.
Переход надо организовать к месту, содержащему ссылку. По-
скольку вложение элементов <а> запрещено, то метку можно со-
вместить со ссылкой, задав в одном элементе сразу два атрибута —
href и пате. Например:
<а href=httpy/“server.com"name=‘bookmark“>... </а>
<?>
Другие атрибуты. Иногда необходимо открыть ссылку в новом
окне. Опытный пользователь сам может это сделать, открыв кон-
текстное меню правой кнопкой мыши и выбрав соответствующий
пункт. Но и разработчик может заставить открываться документ, на
который указывает ссылка, сразу в новом окне. Для этого достаточ-
но использовать атрибут
target=“HMH окна"
каждое окно, открытое браузером, имеет имя. Если ок-
но с именем, указанным в target уже открыто, то новая
страница будет отображена в нем. Если такого имени
система еще не встречала, то откроется новое окно.
hreflang указывает язык документа, к которому ведет ссылка.
type указывает MIME-тип документа, к которому ведет
ссылка, например text/htmlmia lmage/gif>wwi audio/wav (см.
приложение 4).
charset указывает кодировку, которую будет использовать но-
вый документ.
rel указывает, как текущий документ соотносится с за-
гружаемым. Применяется в тех случаях, когда сайт
позволяет создать совокупность страниц и организо-
вать их последовательное считывание, например, про-
граммой-роботом. Помогает сохранять связь между
страницами сайта при изменении адресов, например,
в результате копирования сайта. Позволяет указать на
файлы-оглавления и другие отношения между доку-
ментами. Может принимать значения:
bookmark закладка,
copyright информация об авторских правах,
Глава 13. Организация гиперссылок
109
glossary словарь, help файл помощи, home начальная страница, index указатель, toe (table of content) содержание, next следующая страница, previous предыдущая страница.
rev указывает, как загружаемый документ будет соотно- ситься с текущим. Может принимать значения author, editor, publisher, owner.
shape определяет на экране область определенной формы. Может принимать значения: rect прямоугольник, circle круг, poly многоугольник, default область входит целиком.
coords определяет положение области на экране.
Ссылка-рисунок. Ссылкой можно сделать не только текст, но и
многие другие элементы, например, рисунок. Для этого достаточно
элемент <img> разместить в соответствующем контейнере <а>. На-
пример:
<а href="maitto:nk@wnk.biz tximg SrC=‘image/mair.gif‘' dlt—"Пишите нам"></&>
организует ссылку на электронную почту в виде небольшого рисунка.
Могут создаваться анимированные рисунки в формате GIF, кото-
рые часто встречаются на сайтах.
<?•>
Прочие атрибуты.
tabindex определяет порядок перемещения по элементам вво-
да при помощи клавиши Tab. Значением параметра
является число — порядковый номер.
accesskey назначает «горячую» клавишу для организации дос-
тупа к элементу.
по
Часть 2. HTML
Общие параметры:
id, class, style, title, lang, dir
Параметры для установки обработчиков собвпий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur.
Контент может включатв встроенные элементы:
* текст,
♦ элементы физического форматирования (<b>, <big>, <i>, <s>,
<strike>, <smalb>, <tt>),
* логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
♦ специалвного назначения (<img>, <map>, <applet>, <object>,
<scnpt>, <span>, <iframe>, <font>, <basefont>, <br>, <sub>, <sup>,
<bdo>, <q>),
* форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент,<а> введен в стандарт, начиная с версии HTML 2.
Р0
13.2 ,
I Элемент <link>
Элемент <link> также предназначен для организации ссылок. Ин-
формация, заключенная в нем, в зависимости от атрибутов может
по-разному восприниматвся и исполвзоватвся браузерами. Распола-
гается толвко в разделе <head>, причем здесв может располагатвся
несколько элементов <link>.
Синтаксис: одиночный тег.
Элемент может использоваться для загрузки файлов стилей. На-
пример:
Clink rel—'stylesheet" type— "text/css" href—'default.css”>
Может быть использован для взаимодействия с поисковыми ма-
шинами, указывая им, например, где находятся версии документа на
других языках, версии для альтернативных браузеров или начальная
страница последовательности связанных страниц. Помогает сохра-
нить связь между страницами в результате копирования сайта на
локальный компьютер пользователя, когда изменение директорий
Глава 13. Организация гиперссылок 111
может нарушить работу ссылок. Например, можно указать, что на-
чальная страница имеет имя homepage.html:
Clink title=”First page" reb .ndex" href=”homepage.html“>
Указание на английскую версию сайта:
Clink titte="English version" type="iexVtitml" rel—'altemate"href—'english/index‘itml”
hreflang="en“>
Атрибуты:
charset указывает кодировку, которую будет использовать но- вый документ.
href задает URI ресурса.
hreflag указывает язык документа, заданного в href.
type указывает MIME-тип загружаемых данных.
rel указывает, как текущий документ соотносится с загру- жаемым. Применяется в тех случаях, когда необходимо описать структуру сайта, чтобы он нормально работал, например, после копирования программой-роботом. Позволяет указать на файлы-оглавления и другие от- ношения между документами. Может принимать зна- чения: appendix приложение» bookmark закладка, copyright информация об авторских правах, chapter глава, glossary словарь, help файл помощи, home начальная страница, index указатель, toe (table of content) содержание, некоторые браузеры вос- принимают синоним content, next следующая страница,
previous
предыдущая страница.
112
Часть 2. HTML
----- --L
указывает, как загружаемый документ будет соотно-
ситься с текущим. Это отношение обратное к ге/. Мо-
жет принимать значения author, editor, publisher, owner.
media
target
задает среду, в которой будет использоваться загружае-
мая таблица стилей. Обычно используется значение
screen, указывающее, что страница будет отображаться
на мониторе. Оно подразумевается по умолчанию.
определяет имя окна или фрейма, в которое по
умолчанию будут направляться файлы, загружаемые
по всем ссылкам этого документа.
Атрибуты, которые задают обработчики соответствующих собы-
тий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur.
При ме ча ние. Элемент <link> введен в стандарт, начиная с версии HTML 2.
13.3 w ____________________________________________________________________________
I Элемент <base>
Является вспомогательным элементом. Предназначен для того,
чтобы указать базовый URI для всех ссылок в документе, подобно
тому, как в файле autoexec.bat описываются пути для поиска фай-
лов. Если базовый адрес указан, то для всех остальных ссылок мож-
но использовать относительные адреса, не опасаясь за их непра-
вильную интерпретацию. Элемент должен находиться в разделе
<Иеас!>до любых ссылок в документе на внешние источники.
Синтаксис: одиночный тег
<base href=”httpy/fitness.ictp. unibel.by”>
Атрибуты:
href задает базовый URI ресурс.
target определяет имя окна или фрейма, в которое по
умолчанию будут направляться файлы, загружаемые
по всем ссылкам этого документа.
Примечание. Элемент <base> введен в стандарт, начиная с версии HTML 2.
Таблицы
Глава 14
Таблицы служат удобным средством для представления и орга-
низации данных различного рода. Они широко применяются и для
оформления, позволяя выровнять текст, рисунки и другие элемен-
ты, задать нужные интервалы и отступы. В этом случае даже гово-
рят о табличной верстке Web-страниц. Хотя, напомним, что стандар-
ты языка HTML настоятельно этого не рекомендуют, настаивая на
использовании стилей CSS.
Таблица представляет собой достаточно сложную структуру, фор-
мируемую множеством элементов. Базовых элементов, из которых
может быть составлена минимальная таблица — три. Это <table> —
ограничивающий, всю таблицу, <tr> — выделяющий строку (вкла-
дывается в <table>); <td> — выделяющий отдельные ячейки в стро-
ке (вкладывается в <tr>). Данные (текст, другие таблицы, изобра-
жения, гиперссылки, формы и др.) располагаются в контейнерах
<td>...</td>.
Простая таблица размером 2x2 строится следующим образом.
Пример И. Простейшая таблица
1 . <html>
2 " <head>
3 I <title> Таблица<ЛШе>
4 ! </head>
5 " <body>
6 " ctable border="1" cellpadding="1O">
7 " <tr>
8 1 <td>a1 </tdxtd>a2</td>
9 " </tr>
10 <tr>
11" <td>b1 </tdxtd>b2</td>
12 в
13|( </table>
14 </body>
15"</html>
Строки 6—12 вышеприведенного кода отвечают за организацию
таблицы.
114
Часть 2. HTML
Рад элементов детализирует таблицу и предназначен для груп-
пировки ячеек простой двумерной матрицы. Это позволяет форми-
ровать таблицы со сложной структурой ячеек. Например, таблица
на рис. 2.21 строится из таблицы размером 6x4, представленной на
рис. 2.20.
Рис. 2.20. Исходная таблица Рис. 2.21. Таблица со сложной
размером 6x4 структурой ячеек
Для объединения ячеек служат элементы col, colgroup, thead, tbody,
tfoot.
—
1
141
) Элемент <table>
<><>
Синтаксис
ctable atribute_1 = "value 1” atribute_2 = value 2”>...</table>
Атрибуты этого элемента определяют общие свойства таблицы:
ее размер, расположение на странице (имеется в виду таблица це-
ликом), цвет фона, размер рамок, расстояние между ячейками и т.д.
Ряд атрибутов элементов (если они не заданы явно), вложенных
в <tab!e>, наследуют значения атрибутов из этого элемента.
Атрибуты <table>
width задает ширину таблицы. Значение задается в абсолют-
ных величинах — пикселях, или в относительных —
в процентах по отношению к текущей ширине окна
браузера.
align не рекомендуемый атрибут, задающий выравнивание
таблицы в окне. Допустимы следующие значения:
Глава 14. Таблицы
115
center располагает таблицу по центру окна,
left прижимает таблицу к левому краю,
right прижимает таблицу к правому краю.
border главный из атрибутов, задающих в пикселях ширину
рамки вокруг таблицы. Если значение border равно
нулю (по умолчанию), то рамка не рисуется и все
остальные атрибуты, связанные с рамками, не при-
нимаются во внимание.
bgcolor не рекомендуемый. Указывает цвет фона таблицы,
frame описывает поведение рамок и ячеек таблицы. При-
нимает следующие значения:
void рамка отсутствует (используется по
умолчанию),
box, border рамка со всех сторон таблицы и каж- дой ячейки, above рамка рисуется только сверху, below рамка рисуется только снизу, rhs рамка только справа, Ihs рамка то лько слева, hsides горизонтальные рамки для выделения строк — только сверху и снизу, vslzed вертикальные рамки — только справа и слева.
rules определяет ячейки и их стороны, которые должны быть обведены рамкой. Этот атрибут не затрагивает внешнюю границу всей рамки, а прорисовывает сетку таблицы. По умолчанию принимает значение "попе"
» (рамка вокруг таблицы не рисуется). Варианты: groups рамкой будут обводиться элементы, сгрупированные внутри элемента <table> при помощи вложенных элементов более низкого уровня — <thead>, <tbody>, <tfoot>, <col> и <colgroup>; rows выделяются рамкой строки; cols выделяются рамкой столбцы.
cellspacing задает расстояние между соседними ячейками таб- лицы.
116
Часть 2. HTML
cellpadding задает поле внутри ячейки между границей и тек-
summaiy
стом.
значение — текстовая строка, поясняющая таблицу.
Не поддерживается визуальными браузерами.
Общие атрибуты (см. п. 17.4):
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Контент включает табличные элементы <caption>, <col>, <thead>,
<colgroup>, <tfoot>, <tbody>, <tr>. Собственного выводимого содер-
жимого элемент не имеет. Если случайно в контенте оказывается
текст, он выводится за пределами таблицы.
Примечание. Элемент <table> введен в стандарт, начиная с версии HTML 2.
14.2
I Элемент <caption>
Элемент <caption> предназначен для организации заголовка
таблицы. Располагается сразу после тега <table>.
Синтаксис: контейнер
<caption atribute_1 = Value г atribute_2 = Value 2>...</caption>
Атрибуты:
align определяет расположение заголовка. Отмененный. Мо-
жет принимать значения:
top
bottom
над таблицей, действует по умолчанию;
сразу после таблицы, подобно подписи.
Общие атрибуты (см. и. 17.4):
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
Глава 14. Таблицы
117
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
02 E
Контент может включать встроенные элементы:
* текст заголовка,
» элементы физического форматирования (<b>, <big>, <i>, <s>,
<strike>, <small>, <tt>),
♦ логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
» специального назначения (<img>, <applet>, <object>, <map>,
<script>, <span>, <iframe>, <font>, <basefont>, <br>, <sub>,
<sup>, <bdo>, <q>),
* форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <caption> введен в стандарт, начиная с версии HTML 3.2
14.3 ,
Группировка строк.
Элементы <thead>, <tfoot>, <tbody>
Строки можно группировать, например, для организации на-
чальных полей таблицы с заголовками колонок. Для этого они по-
мещаются в контейнер <thead>. Для организации окончания табли-
цы, например подстрочника, служит аналогичный элемент <tfoot>.
Во время печати длинных таблиц части <thead> и <tfoot> могут по-
являться на каждой странице.
Синтаксис: каждый из элементов является контейнером.-Закры-
вающие теги могут быть опущены.
Средняя раббчая часть таблицы помещается в контейнер <tbody>.
Рабочих частей может быть несколько.
Будучи помещенными в такие контейнеры, все части, таблицы
легко могут быть вьщелены при отображении. В частности, они могут
иметь разную высочу, а при помощи стилей CSS можно задать раз-
ный цвет фона и т. п. Все части должны иметь одинаковое количе-
ство столбцов.
<•?>
Атрибуты элементов:
align задает горизонтальное выравнивание в ячейках. При-
нимает значения:
left выравнивает содержимое по левому краю;
118
Часть 2. HTML
right выравнивает содержимое по правому краю;.
center выравнивает содержимое по центру,
justify выравнивает по ширине ячейки (во всех стро ках контейнера),
char выравнивает по определенному символу, в настоящее время браузерами еще не поддерживается.
valign задает вертикальное выравнивание в ячейках. Прини-
мает значения:
top выравнивание происходит по верхней гра- нице ячеек,
middle выравнивание происходит по середине ячеек,
bottom выравнивание происходит по нижней гра- нице ячеек,
baseline выравниваются все ячейки в строке, у ко- торых установлен этот атрибут по базо- вой линии.
Общие атрибуты (см. п. 17.4):
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Контент включает один или несколько элементов <tr>.
Примечание. Элементы <thead>, <tfoot> и <tbody> введены в стандарт, на-
чиная с версии HTML 4.
14.4 ,_______________________________________
Организация колонок.
Элементы <col> и <colgroup>
Элемент <со1> применяется для организации и работы со столбца-
ми. Они должны располагаться до первого появления элемента <tr>,
организующего строку. Элемент <со1> по умолчанию предназначен
Глава 14. Таблицы
119
для организации оформления одного столбца. Имеет параметры, за-
дающие выравнивание данных и элементов в столбцах.
<><•>
Синтаксис: одиночный тег
<col align-”nghtn>
Для больших таблиц может пригодиться объединяющий кон-
тейнер для столбцов, который указывает, как форматировать целые
группы столбцов.
<><>
Синтаксис: контейнер, содержимым которого являются элемен-
ты <ео1>, или содержимое может отсутствовать. Закрывающий тег
может отсутствовать:
ccolgroup align^ieft'^
<col width=’’50px">
<col аНдп=”пдьг>
<col>
</colgroup>
При совместном использовании <со1> и <colgroup> следует пом-
нить о правилах наследования. <со1> наследует по умолчанию оформ-
ление от <colgroup>. Но индивидуальное задание атрибутов в <со1>
переопределяет наследуемые значения.
<?•>
Атрибуты:
span задает объединение колонок в группу. По умолчанию
принимает значение, равное 1. При этом элемент
<col span=3> образует группу из трех колонок, так
же, как и ccolgroup span=3>.
Если таблица содержит элементы <colgroup> или <со1>, то брау-
зеры при вычислении числа колонок принимают во внимание следую-
щее. Во-первых, для каждого элемента <со1> вычисляется число столб-
цов, которые он объединяет своим атрибутом span. Затем в элементах
<colgroup>, которые содержат по меньшей мере один элемент <со1>,
сначала игнорируется атрибут span, и вычисляется число столбцов
в соответствии с правилами для <со1>. Для пустых <colgroup> при-
нимаются во внимание значения атрибута span.
Если таблица не содержит элементов <со1> и <colgroup>, то число
столбцов вычисляется по числу ячеек <td> в строке <tr>. При нали-
чии <со!> и <colgroL’p> число столбцов, вычисленное первым и вто-
рым способом, должно совпадать.
120
Часть 2. HTML
После подсчета числа столбцов браузер осуществляет их груп-
пировку.
Прочие атрибуты:
align задает горизонтальное выравнивание в колонках. При-
нимает значенияг-
left выравнивает содержимое по левому
краю,
right выравнивает содержимое по правому
краю,
center выравнивает содержимое по центру,
justify выравнивает по ширине ячейки (во
всех строках контейнера),
char выравнивает по определенному сим-
волу, в настоящее время браузерами
еще не поддерживается.
Г
char задает символ, по которому должно происходить вы-
равнивание.
width задает ширину столбца или группы (для <colgroup>).
уalign задает вертикальное выравнивание в ячейках. При-
нимает значения:
top выравнивание происходит по верхней
границе ячеек,
middle выравнивание происходит по середи-
не ячеек,
bottom выравнивание происходит по нижней
границе ячеек,
baseline выравниваются все ячейки в строке,
у которых установлен этот атрибут по
базовой линии.
Общие атрибуты (см. п. 17.4):
id, class, style, title, lang, dir.
Атрибу гы для установки обработчиков событий:
Глава 14. Таблицы
121
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
д Примечание. Элементы <col> и <colgroup> введены в стандарт, начиная с вер-
9?** сии HTML 4.
14.5,_______________________________
I Организация строки.
I Элемент <tr>
Элемент <tr> служит для организации строки.
<•>•<>
Синтаксис: Контейнер <tr>...</tr>. Закрывающий элемент может
быть опущен.
Если текст попал в элемент <tr>, но не лопал в контейнеры <th>
или <td>, то текст будет отображаться вне таблицы. Если контейне-
ры <th> или <td> отсутствуют, то таблица не образуется.
Атрибуты:
<-?>
bgcolor не рекомендуемый. Указывает цвет фона строки.
align
не рекомендуемый, задающий горизонтальное Вы-
равнивание данных во всех ячейках строки сразу.
Допустимы следующие значения:
center располагает данные по центру ячеек;
left выравнивает данные в ячейках по ле-
вому краю;
right выравнивает данные в ячейках по
правому краю;
justify выравнивает текст и данные в ячейках
всей строки по ширине (равномерно
распределяет по ширине всей ячейки);
char задает выравнивание вокруг какого-то
символа, например, точки, отделяющей
целую и дробную часть числа.
Образец выравнивания по точке:
10.001
100.0
1.02
998.
Поддерживается не всеми браузерами.
В частности, MSIE его не поддерживает.
122
Часть 2. HTML
valign задает вертикальное выравнивание в ячейках. При-
нимает значения:
top выравнивание происходит по верхней границе ячеек,
middle выравнивание происходит по середи- . не ячеек,
bottom выравнивание происходит по нижней границе ячеек,
baseline выравниваются все ячейки в строке, у которых установлен этот атрибут по базовой линии.
Общие атрибуты (см. п. 17.4):
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
02®
Контент включает один или несколько элементов <th>,<td>.
При ме ча ние. Элемент <tr> введен в стандарт, начиная с версии HTML 3.2.
14.6 ,__________________
I Элементы <th>, <td>
<><•>
Каждая отдельная ячейка организуется элементом <td>. Для вы-
деления заглавных ячеек (например, ячеек в первой строке) пред-
назначен элемент <th> — разновидность <td>. По умолчанию текст
в ячейках <th> отображается полужирным шрифтом.
Синтаксис: контейнер
<td atribute_1 = value г atribute_2 = "value 2>...</td>
В HTML закрывающий тег может быть опущен, поскольку он
однозначно определяется по тегу, открывающему следующую ячей-
ку или заканчивающему строку или таблицу.
Атрибуты:
<•?>
headers указывает на список заголовков для данной ячейки
(только для элементов <td>). Список формируется пу-
Глава 14. Таблицы
123
тем перечисления через пробел идентификаторов id
заголовочных ячеек. Используется в основном для
невизуальных браузеров, например, в аудиобраузерах
заголовок озвучивается перед озвучиванием данных
ячейки.
scope указывает диапазон ячеек, относящихся к данной
заголовочной ячейке <th>. Принимает значения:
row текущая ячейка формирует заголовок для
всей строки;
со/ текущая ячейка формирует заголовок для
всего столбца;
rowgroup текущая ячейка формирует заголовок
для всей оставшейся группы строк;
colgroup текущая ячейка формирует заголовок для
всей оставшейся группы столбцов;
abbr указывает аббревиатуру, которая может
использоваться для альтернативного пред-
ставления содержимого ячейки. Не ис-
пользуется обычными браузерами;
axis используется для пометки ячеек, к со-
держимому которых может быть орга-
низован доступ. Может применяться для
построения многомерных таблиц.
rowspan определяет количество ячеек в строках под текущей,
которые будут объединены в одну. Применяется для
организации сложных таблиц. По умолчанию равен 1.
Значение равное нулю указывает, что ячейка объеди-
няет все ячейки, размещенные вниз от текущей до
последней в секции (имеются в виду <thead>,
<tbody> или <tfoot>).
co/span аналогичный предыдущему, но распространяет свое
действие на столбцы. По умолчанию значение равно 1.
Значение равное нулю объединяет ячейки от текущей
вправо до последнего столбца в группе, заданной
элементом colgroup.
nowrap не рекомендуемый. Запрещает перенос строк. В настоя-
щее время для этих целей рекомендуются стили CSS.
width не рекомендуемый. Задает ширину ячейки. Как все
атрибуты, определяющие длину, задается в пикселях,
124
Часть 2. HTML
или в процентах, от доступного пространства (как
правило, от ширины таблицы). Окончательное ре-
шение о ширине столбца, к которому принадлежит
ячейка, браузер принимает после анализа данных о
ширине каждой ячейки в столбце.
height не рекомендуемый. Указывает высоту.
bgcolor не рекомендуемый. Указывает цвет фона строки.
align задает горизонтальное выравнивание в ячейках. При-
нимает значения:
Mt выравнивает содержимое по левому
краю,
right выравнивает содержимое по правому
краю,
center выравнивает содержимое по центру,
justify выравнивает по ширине ячейки (во всех
строках контейнера),
char выравнивает по определенному символу.
valign задает вертикальное выравнивание в ячейках. При-
нимает значения:
top выравнивание границе ячеек, происходит по верхней
middle выравнивание ячеек, происходит по середине
bottom выравнивание границе ячеек, происходит по нижней
baseline выравниваются все ячейки в строке, у
которых установлен этот атрибут, по
базовой линии.
char задает символ» по которому выравнивается текст.
Общие атрибуты (см. п. 17.4):
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur.
Глава 14. Таблицы
125
02 И
Контент может включать элементы:
1) блочные заголовки <h1>,...,<h6>, элементы: <р>, <div>, <dl>,
<pre>, <blockquote>, <fieldset>, <address>, <hr>, <table>, списки
<ul>, <ol>, скрипты <script>, <noscript>;
2) Встроенные:
* текст,
* элементы физического форматирования (<b>, <big>, <i>, <s>,
<strike>, <small>, <tt>),
♦ логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
» специального назначения (<img>, <map>, <applet>, <object>,
<script>, <span>, <iframe>, <font>, <basefont>, <br>, <sub>, <sup>,
<bdo>, <q>),
♦ форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <td> введен в стандарт, начиная с версии HTML 3.2.
Приведем пример построения таблицы с использованием раз-
личных элементов и атрибутов.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<head>
<Ш1е>Таблицы</Ш1е>
</head>
<body>
<table border="1" frame="box" rules="groups" style=Hfont-size: 12pt;">
<capion style='font: italic 16px bold;">M3 записной книжечки
OcTana</caption>
<col align="center">
<thead style="background:#cceeee; fontArial 14px; text-align: center;H>
<tr>
<th>°</th>
<th width=60%>CTaTbH расходов<АИ>
<th>CT0HM0CTb</th>
<th>BanK)Ta</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Bep6ntofl</td><td>180 p.</tdxtd rowspan=3
align="center" valign^'middle’^He имеется<Мх/1г>
<tr>
<td>2</tdxtd>BapaH</tdxtd>30 p. </tdxtdx/tdx/tr>
<tr>
<td>3</tdxtd>KyMbic</tdxtd>1p.75K.</tdxtdx/tdx/tr>
«7tbody>
<tfoot style=,,background:#eeccee;">
<tr>
<tii> </th>
126
Часть 2. HTML
—~-----m
28
29
30
31
32
33
34
<th align="right">HToro</th>
<tii> </th>
<tii> </th></tr>
</tfoot>
</table>
</body>
</html>
Элемент <thead> (строки 9~ 15) организует заголовок таблицы.
Элемент <tbody> (строки 25—31) организует подстрочник таблицы.
Они отделяется границами, поскольку в элементе <table> атрибут
rules задает прорисовку границ между сгруппированными элемен-
тами. Элемент <со1> выделяет первый столбец (строка 8), который
отделяется границей по той же причине. Вся таблица обведена рам-
кой, поскольку задан атрибут frame в элементе <table>.
Приведем пример построения таблицы с использованием раз-
личных элементов и атрибутов.
1 <!doctype html publir "-//W3C//DTD HTML 4.01 Transitional//EN”>
2 <html>
3 <head>
4 <Ш1е>Таблицы<ЛМе>
5 </head>
6 <body >
7 <table border="1" frame="bux" rules="groups“ style^font-size:
12pt;">
8 <caption style="font: italic 16px ЬоИ;*>Из записной книжечки
OcTana</caption>
9 <col align= center’s
10 <tiiead style="background:#cceeee; font.Arial 14px; text-align: center,">
И <tr>
12 <th>°</th>
13 <th width=60%>CraTba pacxopoB</th>
14 <th>CTOHMOCTb</th>
15 <th>BaniOTa</th>
16 </tr>
17 </thead>
18 <tbody>
19 <tr>
20 <td>1 </td>
21 <td>Bep6nrafl</td>
22 <td>180 p.</td>
23 <td rowspan=3 align^center" valign='middle's He имеется </td>
24 </tr>
25 <tr>
26 <td>2</td>
27 <td>BapaH<Ad>
28 <td>30 p.</td>
29 <td></td>
30 , </tr>
31 <tr>
32 <td>3< /td>
33 <td>KyMbic</td>
34 <td>1p.75K.</td>
Глава 14. Таблицы
127
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<td></td>
</tr>
</tbody>
<tfoot style="background:#eeccee;">
<tr>
<th> </th>
<th align=''right">MToro</th>
<tii> </th>
<th> </th>
</tr>
</tfoot>
</table>
</body>
</html>
Строка 6. Начинает таблицу. Указанный в <table> атрибут rules
указывает на необходимость обвести рамкой сгруппированные
подразделы таблицы — заголовочную часть, основную и итоговую.
Атрибут border задает толщину границ.
В строке 7 использован элемент <caption> для организации наз-
вания таблицы.
Строки 9~ 17. Организуют заголовочную часть таблицы. В ней
выводятся заголовки столбцов: №, «Статья расходов», «Стоимость»,
«Валюта». Форматирование текста и фон, заданные при помощи
стилей CSS.
Строка 10. Открывает контейнер — строку, которая закрывается
в строке 16.
Строки 12—15, Каждая ячейка организована при помощи эле-
мента <th>.
Строки 18—37. Организуют основное тело таблицы при помощи
контейнера <tbody>.
В строке 19 начинается первая строка основной таблицы.
Строка 23. Последняя ячейка в этой строке объединяет три ячейки
со всех рядов в одну строку при помощи атрибута align.
Строки 38—45. Организуют итоговую часть таблицы. Формати-
рование проводится комбинированное, как при помощи стилей
CSS (строка 38), так и при помощи атрибутов (строка 48). При этом
сначала строки </tr>, а вслед за этим и ячейки, исследуют фон
родительского элемента <tfoot>.
м -7
| Табличная верстка
Ячейки таблицы могут содержать самый разнообразный кон-
тент: не только данные, но и полноценные абзацы текста, блоки,
ссылки, изображения, объекты, формы.
128
Часть 2. HTML
2 1 able - Microsoft Internet Explorer
BHE3
Файл Древке Вид - Цзбрв+юе Сервис., Справка
’•NEW KNOWLEDGE-
PUBLISHING HOUSE
"НОВОЕ ЗНАНИЕ” —
сотвори свое будущее!
На web-сайте издательства "Новое
знание”
Вы найдете информацию о книгах только
данного издательства. Информация о книгах
систематизирована ПО страницам
Новинки. Книги. ГОТОВЯТСЯ.
Издательство "НОВОЕ ЗНАНИЕ"
основано в 1998 году.
Наша специализация —учебная литература
для вузов, а также справочная, деловая,
компьютерная и медицинская литература.
Наша цель - помочь каждому студенту
получить доступ к необходимой информации,
каждому специалисту— приобрести надежного
помощника в работе, каждой творч еской
личности—добиться успеха.
Рис. 2.22. Границы таблицы
Размерами ячеек и выравниванием контента в ячейке легко управ-
лять, поэтому, располагая в ячейках элементы, можно при помощи
таблицы задавать относительное расположение блоков. Фон ячей-
ки позволяет подобрать нужное цветовое сочетание.
Если сделать границу между ячейками и окружающую рамку
невидимой (<title borders<э>),то о присутствии таблицы на страни-
це пользователь во время просмотра документа даже не будет дога-
дываться, а страница приобретет хорошо структурированный вид.
На рис. 2.22—2.23 представлен пример простой табличной верстки.
Рис. 2.22, показывает границу таблицы, рис. 2.23 — окончательный
вид страницы, когда граница не прорисована.
В более сложных случаях таблицы можно вкладывать друг в друга
(то есть элемент <td> содержит новую таблицу в качестве контента).
В настоящее время табличная верстка вытесняется форматиро-
ванием при помощи стилей (см. ч. 3).
Глава 14. Таблицы
129
5 Зак. 1627
|Е........................................... т
j | Файл Правка. £иа Избранное Сервис £граека ;
Table - Microsoft internet Fxploici
НОВОЕ зНдНИЕ" _
сотвори свое будущее!
Н a web - сай те издательства "Новое
знание”
Вы найдете информацию о книгах только
данного издательства Информация о книгах
систематизирована по страницам
Новинки. Книги. ГОТОВЯТСЯ
Издательство "НОВОЕ ЗНАНИЕ"
основано в 1998 году.
Наша специализация — учебная литература
для вузов, а также справочная, деловая, '
компьютерная и медицинская литература.
Наша цель - помочь каждому студенту
получитьдоступ кнеобходимой информации,
каждому специалисту—приобрести надежного
помощника в работе, каждой творческой
личности — добиться успеха.
гТМойномпькяер
Рис. 2.23. Окончательный вид страницы
Формы
Глава 15
Один из интерактивных элементов — гиперссылки — был уже
рассмотрен. Однако гиперссылки не позволяют организовать обрат-
ную связь с пользователем. Для этих целей в HTML предусмотрены
другие виды интерактивного взаимодействия. Одна из них — это
формы, к которым относится набор простейших элементов управ-
ления, таких как кнопки, переключат ели, поля ввода и тому подоб-
ное. Данные из форм отсылаются на сервер или обрабатываются
при помощи Java-скриптов на самой странице. Форма — не един-
ственный способ организации интерактивного взаимодействия, но
один из самых простых.
15.1 „
з __________________
I Элемент <form>
Начать рассмотрение форм удобнее именно с этого элемента. Сам
элемент <form> не позволяет вводить данные, но является удобной
надстройкой, которая объединяет конкретные элементы ввода с кон-
кретных кнопок, переключателей, полей ввода, занимается сбором
информации и формированием запроса на сервер.
<•><>
Синтаксис: элемент является контейнером.
<form атрибут_1=Ъначение_Гатрибут_2=“значение_2”>...<fiorm>
В контейнер вкладываются элементы: поля ввода <input>, кнопки
<button>, списки выбора <select> и другие, с которых будет собрана
информация. Элемент <form> недопустимо вкладывать в другой эле-
мент <form>. Фрагмент программы для ввода пароля с использованием
<fcrm> может выглядеть, например, следующим образом (рис. 2.24):
<form name=’’my_form’’ action=”httpy/server_domain_name/cgi-bin/proceed_pro-
дгатт.сдГ method=’’get’‘>
введите пароль:
cinput type="password" name=”user_iogin“>
cinput type=”submit” value=press">
</form>
Глава 15. Формы
131
Рис. 2.24. Форма для ввода пароля.
Введенные буквы будут представляться звездочками «*»
Здесь элемент <form> включаеттекст, элемент ввода текста и кноп-
ку, образуя удобную форму для ввода пароля.
Собственные атрибуты элемента <form>:
action = “uri" указывает обработчик формы на сервере, которому
передаются данные. В качестве URI указывается ад-
рес программы на сервере, включая адрес сервера
http: / /server_name/di rectory/program_name.
Альтернативным способом передачи данных может
служить пересылка при помощи почтовой программы
клиента. В этом случае указывается почтовый пре-
фикс, как в обычной строке браузера mailto: //uri.
method=”get / post”
указывает метод отправки данных. Может принимать
значения:
get используется в том случае, когда необ-
ходимо отправить небольшие сообще-
ния. Данные, полученные из <form>,
добавляются к строке вызова часто по-
сле разделителя «?*. Эту строку можно
увидеть в адресной строке браузера во
время передачи данных.
Например.
элемент <form action-“httpy7internet/cglbln/program cqilTiethod=
132
Часть 2. HTML
”деН>сформирует строку http: / / inter .net/ cgibin/
program. cgi?Bender, после того как в поле одного
из запросов будет введено имя “Sender и подана ко-
манда на отправку формы.
post более универсальный метод отправки.
Применяется при передаче большого
количества данных, поскольку разме-
ры адресной строки могут ограничи-
ваться серверами. Формирует длин-
ную отправляемую строку-запрос, где
указываются пары: имя — значение,
где имя и значение — это, как прави-
ло, значения атрибутов пате и value.
Буквы и цифры при этом остаются
неизменными, а служебные символы
заменяются специальными. Например,
пробелы заменяются знаком «+». Воз-
можно представление в виде шестна-
дцатеричных кодов, которым предше-
ствует знак «%». Любая пара name, value
соединяется знаком «&». Справочная
строка представляет так называемую
кодировку MTMF, application/x-www-form-
uriencoded. Символы русского языка
также кодируются в этом формате.
Чтобы прочитать такой формат, нуж-
ны специальные программы декоди-
рования.
Другие атрибуты: '
пате определяет имя, которое может использоваться для
доступа к элементу <form>, например, из таблиц
стилей, пате является аналогом атрибута id и слу-
жит для обеспечения совместимости со старыми
браузерами.
target указывает окно, куда будет направлена информация
(см. гл. 16). Принимает значения:
frame_name имя окна, определенное в атрибуте
пате фрейма,
_blank новое окно,
~self тот же фрейм,
Глава 15. Формы
Г — ..
133
_parent родительский фрейм, если он суще- ствует (в противном случае — теку- щий),
-top окно верхнего уровня по отношению к данному фрейму. Если вызов про- исходит не из дочернего фрейма, то он эквивалентен атрибуту _self.
accept-charset="content-type"
указывает кодировку символов, используемых поль-
зователем.
accept="content-type”
указывает тип данных, которые использует форма.
enctype-'contenttype”
определяет тип данных, отправляемых серверу. По
умолчанию равен application/x-www-form-urlencoded
Общие атрибуты (см. п. 17.4):
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur, onreset,
onsubmit.
0Ы
Контент может включать элементы:
1) блочные заголовки <h1 >. . ...<h6>, элементы: <р>, <div>, <dl>,
<pre>, <blockquote>, <fieldset>, <address>, <hr>, <table>, списки
<ul>, <ol>, скрипты <script>, <noscript>;
2) встроенные:
текст,
• элементы физического форматирования (<b>, <big>, <i>, <s>,
<strike>, <small>, <tt>),
• логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
» специального назначения (<a>, <img>, <map>, <applet>,
<object>, <script>, <span>, <iframe>, <font>, <basefont>, <br>,
<sub>, <sup>, <bdo>, <q>),
♦ форм (cinput*, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <form> введен в стандарт, начиная с версии HTML 2.
134
Часть 2. HTML
152 >
I Элемент <input>
Элемент <input> предназначен для формирования большого ко-
личества элементов управления в формах. Сюда относятся тексто-
вые поля, поля ввода пароля, флажки, переключатели, кнопки,
скрытые элементы (рис. 2.25). Они все, как правило, используются
для ввода данных в форму. Форматирование элементов формы (вы-
равнивание, шрифты, цвет и пр.) осуществляется только через из-
менение стиля.
Рис. 2.25. Элементы управления text, radio и checkbox
Синтаксис: одиночный тег, закрывающий тег отсутствует
Cinput type =пгип_элемента" атрибуг_2=’’значениея>
<•?>
Атрибут:
type ключевой атрибут, который задает тип элемента
управления. Может принимать следующие значе-
ния:
text задает поле для ввода текста в виде од-
ной строки. Если указан атрибут size,
то он ограничивает размер поля в сим-
волах. По умолчанию присваивается и
* Не следует путать элементы управления в формах и элементы языка HTML
(прим. ред.).
Глава 15. Формы
135
выводится на экран значение, задан-
ное атрибутом value.
тт
Например:
Cinput type="texr size=n30” maxlength="50” уа!ие=Ъначение">
password создает поле для ввода пароля, от
элемента text отличается тем, что
при наборе пароля в поле на экране
выводятся звездочки, чтобы секрет-
ное слово было невозможно прочи-
тать из-за вашего плеча. По умолча-
нию присваивается значение, задан-
ное атрибутом value.
checkbox создает флажок — квадратик — для
проставления или снятия птички.
Квадратик по умолчанию отображает-
ся как пустой. При щелчке мышью в
нем устанавливается птичка. Атрибут
value для флажка по умолчанию полу-
чает значение "on ". Если флажокдолжен
быть установлен первоначально, то не-
обходимо добавить булев атрибут
checked без всякого значения. При от-
правке данных пара «имя-значение»
для флажка отправляется только в том
случае, если флажок установлен.
radio создает радио-переключатель. Исполь-
зуется обычно несколько элементов
radio, которые объединены в группу.
Отображается в виде кружка с точкой
(см. рис. 2.24). Если выбран один из
переключателей в группе, то остальные
обнуляются. Переключатели В одной
группе имеют одинаковое значение ат-
рибута пате. Значение же атрибута
value должно у них различаться. Во
время отправки в строку включается
только та пара «имя-значение», кото-
рая соответствует установленному пе-
реключателю.
file создает элемент для выбора файла.
Обычно это строка для ввода имени
и кнопка, при нажатии на которую от-
крывается стандартный диалог — «вы-
бор файла» (рис. 2.26}. ।
136
Часть 2. HTML
1ММИ—— 1 ------------
hidden невидимый для пользователя эле-
мент. Обычно недоступен для редак-
тирования. При отправлении соответ-
ствующая пара пате и value будет
включена в строку отправки.
Кнопки. Элемент <input> позволяет создавать кнопки четырех
видов, каждый из которых имеет свое значение атрибута type.
button предназначается для создания кнопки произвольно-
го назначения. Надпись на ней задается с помощью
атрибута value. По умолчанию эта кнопка ничего не
делает. Задействуется только при помощи языка сце-
нария, который включается в работу после щелчка
по кнопке.
Рис. 2.26. Элемент выбора файла file, кнопки submit и reset
submit создает часто используемую кнопку «Отправить». На
кнопке появляется текстовая надпись. Текст надписи
является значением атрибута value. Если при описа-
нии кнопки указан атрибут пате, то пара «имя-значе-
ние» будет включена в отправляемую строку. Это
необходимо, если в форме используется несколько
кнопок отправки и следует идентифицировать, ко-
торая из них была задействована.
image создает элемент в виде кнопки-изображения. В этом
случае в теге указываются атрибуты src и alt, которые
обычно используются для задания изображения.
reset кнопка предназначена для сброса формы, т.е. органи-
зации операции очистки. Надпись на кнопке задается
с помощью атрибута value, как и ранее. Щелчок по
кнопке останавливает форму и ее содержание, кото-
рое существовало во время загрузки страницы. От-
правка данных при этом не производится.
Глава 15. Формы
137
Другие атрибуты:
size определяет размер элемента ввода в символах или пикселях. В символах для text и password, а в пиксе- лях для остальных.
accept используется для указания типа данных.
name задает имя элемента.
value задает начальные значения элементов (по умолчанию). Для флажков и радиокнопок определяет значение, ко- торое будет передано на сервер, если кнопка выбрана. Оно будет состоять из имени кнопки и ее значения.
maxlength указывает максимальную длину строки, которая мо- жет быть задана и затем передана на сервер. Ее не сле- дует путать с длиной поля ввода, вцдимого на экране.
disabled делает элемент неактивным, т.е. щелчки на нем не приводят ни к каким действиям:
readonly не позволяет изменять содержимое для элементов «ввод текста» и «ввод пароля». , 1
alt задает альтернативный текст.
usemap указывает на карту, обрабатываемую на стороне кли- ента.
ismap указывает на карту, обрабатываемую на сервере.
tab-index определяет порядок перемещения по элементам ввода при помощи клавиши Tab.
accesskey назначает «горячую» клавишу для организации дос- тупа к элементу.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, а также onfocus, onblur,
onselect, onchange.
Примечание. Элемент <lnput> введен в стандарт, начиная с версии HTML 2.
138
Часть 2. HTML
Пример 12. Элемент <input>
V
1 " <html>
2 ,, <head>
3 ' <Ш1е>Элементы ввода информации < input ></title>
4 “ </head>
5 <body>
6 ' <form>
7 ввод TeKCTa   <input type="text" 7а1ие="текст no
умолчанию" name="my_text">
8 и <br>
9 ввод пароля  <input type="password1' value="enter“
II name="my_pass" style="background: #aaaaaa; text-align: center;">
10(| <br>
11 флажок (checkbox)   <input type="checkbox" name=
|| “check1“ уа1ие="первый">
12 <input type="checkbox" name="check2“ value="BTopon" checked>
13" <br><br> проголосуй за
14" <br>
15 <input type="radio“ name="radio1" value="BeHflep“>  
Бендера
16(| <br>
17 <input type="radio" name=“radio1“ checked 7а1ие=мПаников-
ский"> &пЬ8р&пЬ8рПаниковского
18(| <br>
19 <input type="radio" name=“radior value="BanaraHOB">   
। Балагане ва
20 <br><br>
21 , < nput type="file“ name="my_file">
22" <br>
23*' <input type="hidden“ name="spy“ уа1ие=“донос">
24 “ <br>
25 " <input type="button" уа1ие=“кнопка">
26", <br><br>
27 *•’ <inp’ut type="image" src=M./mail.gif" onclick=" style= "position:
absolute; left:150px; top: 75%;">
28 „ <br>
29 cinput type="submit" name=“submit1“ 7а1ие=“отправить">
30“ <input type=“reset“ narne="reset1" 7а1ие=“очистить">
31“ </form>
32" </body>
33 " </html>
В примере приведено использование элемента <input> с различ-
ными атрибутами (рис. 2.27).
Строка 7. Выводится текст «Ввод текста», а за ним поле ввода тек-
ста, в котором отображается текст, заданный по умолчанию в атрибуте
value. Именно этот текст будет подвергаться редактированию.
Строка 9. Аналогично формируется поле для ввода пароля.
Слово «enter», заданное по умолчанию, выводится звездочками.
Глава 15, Формы
139
t
Рис. 2.27. Элементы ввода информации <input>
Стандартные атрибуты HTML не предоставляют возможности управ-
лять отображением элементов форм (фон, выравнивание, шрифт
и т.д.). Это возможно при использовании стилей.
Например, в строке 7 в поле ввода сразу после отображения
выводится текст «текст по умолчанию», который выравнивается по
левому краю.
В строке 9 показано, что текст можно выводить, выравнивая его
по центру.
Строки 11, 12. Выводятся флажки, второй из которых по умол-
чанию отмечен. Могут быть выбраны оба флажка.
Строки 15, 17,19. Выводятся однотипные радиокнопки, из кото-
рых по умолчанию выбрана вторая (в строке 17 в элементе <input>
установлен флажок — атрибут checked). Кнопки объединены общим
именем name=Hreaict и из них может быть выбрана только одна.
Строка 21. Организуется поле для ввода имени файла, рядом с
которым — кнопка для вызова стандартного диалога.
Строка 23. «Подпольный» элемент не выводится, но при отпра-
вке данных значения его параметров могут передаваться.
Строка 25. Выводится простая кнопка, надпись на которой
легко изменить.
Строка 27. Выводится кнопка-изображение. Здесь продемон-
стрировано преимущество форматирования при помощи стилей.
Кнопка-изображение «изымается» из стандартного потока вывода
140
Часть 2. HTML
и отображения в заданном положении. При прокрутке страницы
эта кнопка остается на месте.
Строка 29. Выводится кнопка «отправить» (определяются данные).
Строка 30. Выводится кнопка «очистить». Ее нажатие вернет фор-
му в начальное состояние.
Не все элементы управления задаются с помощью элемента
<input>. Некоторые невозможно представить как одну командную
строку. Для их описания используются парные теги, т.е. контейне-
ры. Среди таких элементов — <textarea> — текстовая область.
15.3 ,________________________________________________________
I Элемент <textarea>
Используется вместо элемента <input type="text"> в том случае,
если необходимо ввести или отредактировать многострочный текст.
Атрибуты задают размеры окна, текст, который туда выводится для
редактирования, и т.п. Текст, размещаемый в элементе, представ-
ляется как отформатированный, т.е. в нем пробелы и переводы
строк являются значащими и отображаются в поле ввода текста по
умолчанию. При этом подразумевается, что длина строки меньше,
чем ширина поля для ввода текста. В противном случае строки
будут автоматически переноситься.
Синтаксис: контейнер, требуется открывающий и закрываю-
щий тег:
<textarea rows=“20” cols=”20">
Гаврила шел кудрявым лесом,
Бамбук Гаврила порубал...
</textarea>
<?>
Собственные атрибуты:
пате определяет имя элемента, которое используется при
передаче данных. Аналогичен атрибуту id.
rows определяет число строк текста на экране. Число не
ограничивает возможности по вводу текста, по-
скольку возможна прокрутка.
cols определяет число символов в каждой строке, т.е. за-
дает ширину поля ввода текста. В случае необходи-
мости текстовая область снабжается горизонтальной
полосой прокрутки.
Глава 15. Формы
141
disabled
readonly
tabindex
accesskey
делает элемент неактивным, т.е. щелчки на нем не
приводят ни к каким действиям.
не позволяет изменять содержимое элемента.
определяет порядок перемещения по элементам вво-
да при помощи клавиши Tab. Например, tabindex="4'
поставит элемент четвертым в очереди при переме-
щении фокуса ввода по элементам.
назначает «горячую» клавишу для организации дос-
тупа к элементу.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur,
onselect, onchange.
Примечание. Элемент <textarea> введен в стандарт, начиная с версии НТМ L 2.
15.4 ,_____________________________________________
| Кнопка. Элемент <button>
Существует специальный элемент для организации кнопки -
<button>. Применяется в том случае, если необходимо организовать
кнопку без использования элемента <input>. В этом случае в кнопку
можно включать блочные и встроенные HTML-элементы, за исклю-
чением <а>, <input>, <select>, <textarea>, <label>, <button>, <form>,
<fieldset>.
<><>
Синтаксис: элемент представляет собой контейнер, требуется от-
крывающий и закрывающий тег:
cbutton 1уре=”значение". ..</button>
<?>
Атрибуты. Обязател ьн ые:
type указывает на тип кнопки. Может принимать значе-
ния:
button создается кнопка произвольного зна-
чения,
142
Часть 2. HTML
Рис. 2.28. Кнопка, созданная при помощи специального элемента <button>,
обладает большими функциональными возможностями
жГотово ' ' ~кЖ Мой компьютер
submit создается кнопка «Отправить», reset создается кнопка «Очистить».
Другие атрибуты:
name задает имя элемента.
value задает значение, которое будет послано на сервер при нажатии submit.
disabled делает элемент неактивным, т.е. щелчки на нем не приводят ни к каким действиям.
tabindex определяет порядок перемещения по элементам вво- да при помощи клавиши Tab.
accesskey назначает «горячую» клавишу для организации дос- тупа к элементу.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur.
Например (рис. 2.28), кнопка-картинка организуется при помо-
щи элемента <button> так:
<button type^button" ОПО//ск=7ипс</оп^пишите<1тд src=‘Jmail.gif‘ alt-'это
кнопка, можно нажать!Ъ</Ь\М0Г}>
Глава 15. Формы
143
При этом изображение помещается на кнопку вместе с текстом
«пишите», что отличается от кнопки, организованной при помощи
элемента cinput type^’image^ (см. п. 15.2). Другими словами, в этом
случае содержимое элемента связвшается с кнопкой.
04 И
15.5
Примечание. Элемент ;button> введен в стандарт, начиная с версии HTML4.0.
Выбор из списка. Элемент <select>
Элемент <select> предназначен для организации меню, различ-
hbix списков и выбора из них. Пункты списка создаются элемента-
ми <option>. При отправке данных на сервер пересвитается имя
списка вместе со значением, которое по умолчанию является вы-
бранной строкой. Передаваемое значение может бвпъ изменено
(см. п. 15.6).
<>.<•>
Синтаксис: элемент представляет собой контейнер, требуется
открвшающий и закрывающий тег:
<select>
<option>..
<option>..
</select>
<•?>
Атрибуты:
name
size
multiple
i
обязательный, определяет имя элемента, передавае-
мое на сервер.
определяет количество видимых строк списка. Значе-
нием является целое число. Число элементов может
быть больше значения size. В этом случае будет соз-
дана полоса прокрутки. Отображаться будет только
количество элементов, определенных в size. При ука-
зании атрибута список визуализируется сразу как
многострочное поле. По умолчанию (если атрибут size
отсутствует) создается список, который раскрывается
при щелчке по нему мышью или переходе ввода. Та-
кой список выглядит как поле ввода.
по умолчанию список подразумевает одиночный вы-
бор. Однако если задан атрибут multiple, то браузер
позволяет выбрать более одного элемента списка. В
HTML этот атрибут указывается без значения. Мно-
гократный выбор в системах, управляемых Windows,
144
Часть 2. HTML
производится последовательным добавлением эле-
ментов путем нажатия клавиши Ctrl и одновремен-
ным выбором элемента.
disabled
tabindex
делает список неактивным. В HTML атрибут указы-
вается без значения, поскольку является булевым.
определяет порядок перемещения по элементам ввода
при помощи клавиши Tab. Значением является чис-
ло — порядковый номер.
Общие атрибуты: ”
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur,
onchange.
Контент должен включать хотя бы один или несколько элементов
<option>. Можетсодержать элементы группирования <optgroup>.
Примечание. Элемент <select> введен в стандарт, начиная с версии HTML2.
15.6
I Элементы <option> и <optgroup>
Как указывалось выше, элемент <select> должен содержать хотя
бы один элемент <option>, задающий элементы выбора в меню.
Элемент <optgroup> применяется для связывания нескольких
элементов <option> в логическую группу. Элементы <optgroup> могут
вкладываться Друг в друга. Подразумевается, что при этом могут
быть организованы, например, иерархические меню, которые брау-
зерами в настоящее время на экране не отображаются.
Синтаксис: контейнер. Для <option> закрывающий тег может
опускаться, поскольку окончание предыдущего элемента одно-
значно определяется по началу следующего или по окончанию эле-
мента <select>. В отличие от<орйоп> <optgroup> требует закрываю-
щего элемента. Он тоже является контейнером.
Атрибуты элемента <option>:
value
определяет начальное значение соответствующего эле-
мента. Именно оно передается на сервер в качестве
Глава 15. Формы
145
значения. Если атрибут не задан, то он будет рав-
ным строке — содержимому контейнера <option>.
selected задает выбранный элемент по умолчанию. Если он
отсутствует, то ни один из элементов не считается
выбранным к моменту открытия формы.
label определяет метку элемента. Значением является стро-
ка, более короткая, чем содержимое элемента. Под-
держивается не всеми браузерами.
1
disabled делает элемент списка неактивным, т.е. он не может
быть выбран.
Атрибуты для <optgroup>: labels disabled (см. для элемента <option>).
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup.
Контент <option> может включать текст.
Примечание. Элемент <option> введен в ставдарт, начиная с версии HTML 2,
<optgroup> — с HTML 4.0.
Использование элемента <option> с различными атрибутами пока-
зано на рис. 2.29.
Рис. 2.29. Использование элемента <option> с различными атрибутами
Пример 13. ( писки выбора
<html>
<head>
<title>Select</title>
</head>
146 Часть 2. HTML
<body>
<select name="select1">
<option>MocKBa
<option 5е1ес1ес1>Жмеринка
<орНоп>Большие Васюки
</select>
<select name=,,select2" size=5 multiple»
coption selected>nonbixaeB
coption value="6yxranTep">Bepnara
Coption label= 'васис“ selected>BackicyanwM Андреевич Лоханкин
coption style="color: геЦ;">Гигиенишвили
<орйоп>Пряхин
<орйоп>Дуня
<орЙоп>Люция Францевна Пферд
</select>
c/body>
c/html>
15.7 ,___________________________________________
I Связывание элементов формы
Элементы для связывания различных форм весьма полезны
в случае автоматической обработки содержимого страницы и при
использовании альтернативных браузеров. Они позволяют задать
логическую связь между различными элементами. Например, свя-
зать надпись на экране с каким-то элементом формы, таким как ее
название. Первым в этом ряду идет элемент <label>. Обычно этот
элемент в визуальных браузерах используется для связывания тек-
стовой информации и элемента управления, т.е. организации под-
писи. Каждый конкретный элемент <label> может связываться толь-
ко с одним элементом формы, но с одним элементом формы может
быть связано несколько элементов <label>.
<><>
Синтаксис: элемент представляет собой контейнер: Закрываю-
щий тег обязателен:
<label>
</label>
Атрибуты:
for
<?>
определяет имя элемента, к которому привязывается
надпись. Сама надпись помещается в контейнер <label>.
Такая структура используется, если элемент и его
подпись размещены в разных местах документа. Если
Глава 15. Формы
147
они располагаются вместе, то элемент <label> вклю-
чает в себя элемент управления и соответствующую
текстовую надпись. Надпись может располагаться до
или после тега, определяющего элемент управления.
accesskey назначает «горячую» клавишу для организации дос-
тупа к элементу.
Общие атрибуты:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondbldick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur.
Контент может включать встроенные элементы:
* текст,
» элементы физического форматирования (<b>, <big>, <i>, <s>,
<strike>, <small>, <tt>),
» логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
♦ специального назначения (<a>, <img>, <map>, <applet>, <object>,
<script>, <span>, <iframe>, <font>, <basefont>, <br>, <sub>, <sup>,
<bdo>, <q>),
* форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <label> введен в стандарт, начиная с версии HTML4.
Пример:
<form action="uri" method="post“>
<label for="*w«7>first name:</label>
cinput type='text" id="HMs"><br>
</form>
1 Элементы <fieldset>, <legend>
В некоторых случаях необходимо организовать подпись не к од-
ному, а к ряду элементов и организовать их в группу. Элемент
<label> позволяет подписывать только один элемент формы. Для
организации подписи ко многим элементам служат элементы
’ <fieldset> и <legend>.
148
Часть 2. HTML
<><>
<fieldset> является контейнером, в который вкладываются фор-
мы. Служит для объединения элементов форм и подписей к ним.
В визуальных браузерах формы, вошедшие в <fieldset>, объединя-
ются рамкой.
<legend> служит контейнером и организовывает подпись к группе.
<fieldset attribute=”vaiue”>
<legend>.. .</legend>
<legend>...</legend>
</fieldset>
<•?>
Атрибуты < legend >:
/
align атрибут является устаревшим. Указывает, где должна
располагаться подпись относительно блока <fieldset>
Может принимать следующие значения:
top вверху;
fe/Z слева;
right справа;
bottom внизу. Визуальными браузерами не под-
держивается.
accesskey
назначает «горячую» клавишу для организации дос-
тупа к элементу.
Остальные атрибуты общего назначения для обоих элементов:
id, class, style, title, lang, dir.
Атрибуты для установки обработчиков событий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup. \
Контент для <fieldset> может включать элементы:
Блочные заголовки <h1 >.....<h6>, элементы: <р>, , <div>, <dl>,
<pre>, <blockquote>, <fieldset>, <address>, <hr>, <table>, списки
<ul>, <ol>, скрипты <script>, <noscript>;
Элемент <legend>.
Как <fieldset>, так и <legend> могут включать встроенные эле-
менты:
» текст,
Глава 15. Формы
149
» элементы физического форматирования (<b>, <big>, <i>, <S>,
<strike>, <small>, <tt>),
♦ логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
♦ специального назначения (<a>, <img>, <map>, <applet>, <object>,
<script>, <span>, <iframe>, <font>, <basefont>, <br>, <sub>, <sup>,
<bdo>, <q>),
♦ форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элементы <legend>, <label>, <fleldset> введены в стандарт, на-
чиная с версии HTML 4.
Применение элементов <legend>, <label>, <fieldset> показано на
рис. 2.30.
Рис. 2.30. Использование элементов <legend>, <label>, <fieldset>
Пример 14.
<doctype html public “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<Ш1е>Элемент <fieldset></title>
</head>
<body>
<fieldset>
<legend style=Hfont-family:'ariar;">aHKeTa</legend>
<form action=,'uri" method="post">
<label 1ог="имя">имя:</1аЬе1>
<input type="text" id=’MMH"xbrxbr>
150
Часть 2. HTML
1
пол<Ьг>
< label for="non">M</labelxinput type="radio" пате="пол" vakie="M">
cinput type=“radio" name="non" value="x">
</form>
</fieldset>
</body>
</html>
Фреймы
Глава 16
С фреймами сталкивались практически все, может, не подозревая
об этом. Во многих программах информация располагается в двух-
трех подокнах, которые и называются фреймами или панелями.
Иногда между подокнами присутствует визуальная граница, наличи-
ем которой можно управлять. Если ее нет, то присутствие фреймов
можно определить только во время работы. Информация на каждой
панели отображается независимо от других, например, прокрутка
текста в одной не вызывает изменений в других.
Web-страницы можно отображать во фреймах, при этом в каж-
дом фрейме отображается отдельная страница. Описание фреймовой
структуры строится в отдельном файле. Поэтому для создания, на-
пример, документа, который отображается в двух фреймах, необхо-
димо три файла. Два файла представляют собой отдельные Web-стра-
ницы, и один файл описывает структуру фреймов. Для использования
во фреймах не нужны специальные Web-страницы. Любая страни-
ца, используемая во фреймах, с таким же успехом может отобра-
жаться и в стандартном окне браузера, если ее загружать отдельно.
При этом каждая страница будет занимать полностью окно браузе-
ра (рис.2.31).
Файл, который содержит описание структуры фреймов, имеет
существенные отличия от стандартных Web-страниц. В частности,
он не может содержать элемент <body>, в котором располагается
отображаемая информация. Такой файл имеет основной элемент
<html>, в который включаются разделы <head> и <frameset>. Раздел
<frameset> содержит описание распределения окон с указанием раз-
мера каждого фрейма.
В элемент <1rameset> входят элементы <frame>, каждый из ко-
торых задает адрес загружаемой страницы. Если перед <frameset>
случайно окажется какой-либо блочный элемент, например <М>,
то <frameset> не будет правильно интегрирован и файловая струк-
тура не отразится.
152
Часть 2. HTML
Новое напив’ Mictusoll Internet Explore!
HKD
_p« . £ма сдааяс £пр«*м
«НОВОЕ ЗНАНИЕ" -
сотвори свое будущее!
О нас
О нас
Авторам
НатгеЬ-сайтеиздательства*‘НовоезнаниепВы найдете информациюо
книгахтолько данного издательства. Информация о книгах систематизирована
по страницам Новинкн.Книги.Готовятся.
Реклама
Ваша корзина
Отзывы
Главная
Издательство “НОВОЕ ЗНАНИЕ* основано в 19е® году.
Наша специализация - учебная литература для вузов, а также справочная,
I деловая, компьютерная и медицинская литература.
Наш цель - помочь каждому студенту получить доступ к необходимой
информации, каждому специалисту — приобрести надежного помощника в
работе, каждой творческой личности - добиться успеха.
Наши приоритеты - Читатель и Автор.
Уважаемые читатели!
Мы будем радй получить Ваши отзывы на наши книги, пожелания и
<1 __________________________________ I
tti ~ ,i f 4 f 1 I tJ Мойкомпыотао •
.-vvа- мл,.1.-.лл .I.*. .-...’лл.лМй-.м.А.ла- v»-. -ллулЗу.лу;-; • у...-..-,-.j-„-
Рис. 2.31. Один и тот же файл загружен в одно окно (сверху) и в левый
фрейм в структуре из двух фреймов (снизу)
Глава 16. Фреймы
153
16.1 ,
1
I Элемент <frameset>
<><•>
При помощи атрибутов <frameset> задается разбиение основно-
го окна на панели.
Синтаксис: <frameset> является контейнером, закрывающий тег
обязателен.
<?•>
Основные атрибуты:
cols задает число вертикальных панелей.
rows задает число горизонтальных панелей.
Значение cols и row указывается либо в пикселях, либо в относи-
тельных единицах — процентах — по отношению к доступной части
окна. В последнем случае размер панели меняется при изменении ос-
новного базового окна. По умолчанию значение cote и rows полагает-
ся равным 100%, т.е. занимает все окно браузера.
Во фреймах допустим новый способ разбиения — в пропорцио-
нальных частях. Для этого используется обозначение *N, где N —
целое положительное число, которое может отсутствовать. Все раз-
нородные единицы измерения могут перечисляться в рамках одного
атрибута через запятую.
Например: cols - 20%, 350, означает, что третий фрейм
займет по горизонтали все оставшееся место.
Другой пример: row = "2, *1. В данном случае по вертикали ок-
но разобьется на два фрейма. Первый будет в два раза больше вто-
рого.
Общие атрибуты:
id, class, style, title.
Атрибуты для установки обработчиков событий:
onload, onunload onblur, onfocus.
Конт&нтдолжен включать:
♦ по крайней мере один или более вложенных элементов
<frameset> или <frame>,
» ни одного или несколько элементов <noframe>.
154
Часть 2. HTML*
i
Отдельные браузеры поддерживает также атрибуты:
border указывает толщину рамки в пикселях.
bordercolor указывает цвет рамки.
frameborder указывает вид рамки (плоский или объемный): "Г рисуется объемная рамка, "О’ рисуется плоская рамка.
framespacing создает пустое поле заданной толщины между фрей- мами, frameborder при этом должен принимать зна- чение “0”.
Каждая из панелей может быть разбита на отдельные фреймы при
помощи вложенного элемента <frameset> (т.е. <frameset> вкладыва-
ется в элемент <frameset>). При помощи такого вложения можно
получить довольно сложную структуру панелей, которая не сводит-
ся к обычной линейной таблице.
Примечание. Элемент <frameset> введен в стандарт, начиная с версии HTML 4.
16.2 ,
Элемент <frame>
Элемент <frame> служит для описания отдельных панелей и вы-
бора документа, который загружается в эту панель. <frame> мо^кет*.
использоваться только внутри элемента < Irani eset >.
<>•<•>
Синтаксис: одиночный тег:
<frame attribute1=”vaiuei" attribute2=”vaiue2">
<?>
Атрибуты:
src=“uri”
name
обязательный атрибут. Определяет источник, из ко-
торого загружаются Web-страницы. Загружаемые стра-
ницы, как будет показано дальше, могут направляться
в разные фреймы. Но логично их направить в тот,
из которого они вызываются, что и происходит по
умолчанию.
задает имя фрейма, которое нужно для организации
переходов между фреймами и использования в: про-;
граммах при организации ссылки. В этом случае оно
служит значением атрибута target (см. пример 16).
Глава 16. Фреймы
155
scrolling атрибут задает или отменяет полосу прокрутки. Мо-
жет принимать значения:
auto полоса прокрутки появляется автома- тически, когда элемент не помещает- ся во фрейме. Используется по умол- чанию.
yes полоса прокрутки появляется в лю- бом случае.
no полоса прокрутки не отображается. При этом часть страницы будет не- доступна пользователю.
noresize указывает, что пользователь не может менять разме-
ры фрейма. Если этот атрибут отсутствует, то перетас-
киванием мыши границы между фреймами их размер
может изменяться.
frameborder меняет рамку для данного фрейма. Принимает два
значения — oil. frameborder =”0” предполагает от-
сутствие рамки, значение "Г указывает ее наличие.
Для Netscape Navigator задаются значения “Л/о", Тел".
Общие атрибуты:
id, class, style, title.
03 Я
Примечание. Элемент<frame> введен в стандарт, начиная с версии HTML4.
16.3 ,_____________________
I Элемент <noframes>
Предназначен для альтернативного изображения фрейма в том
случае, если браузер не поддерживает фреймы, или сконфигуриро-
ван так, чтобы их не отображать. В этом случае вместо фреймов
отображается содержание элемента <noframes>. Текст, помещен-
ный в <noframes>, отображается даже в том случае, если элементы
<frameset>, <frame>, <noframes> не распознаются. Обычно <noframes>
располагается после элемента <frameset>, хотя не запрещено и его
использование внутри.
<•?>
Общие атрибуты (см. п. 17.4.):
id, class, style, title, lang, dir.
156
Часть 2. HTML
.... ....3
Атрибуты для установки обработчиков собвпий:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
oonmousernuve, nkeypress, onkeydown, onkeyup.
Если элемент < no frames > распознается браузером, то его содер-
жимое воспринимается как содержимое <body>. Если нет, то про-
сто выводится контент, который может включатв:
1) блочные заголовки <h1>..<h6>, элементы: <р>, <div>, <dl>,
<pre>, <blockquote>, <fieldset>, <address>, <hr>, <table>, списки <ul>,
<ol>, скрипты <script>, <noscript>;
2) встроенные элементы:
» текст,
• элементы физического форматирования (<b>, <big>, <i>, <s>,
<strike>, <small>, <tt>),
♦ логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
♦ специ ального назначения (<a>, <img>, <map>, <applet>,
<object>, <script>, <span>, <iframe>, <font>, <basefont>, <br>,
<sub>, <sup>, <bdo>, <q>),
* форм (<input>, <select>, <textarea>, <button>, <label>).
£3®
Примечание. Элемент <noframes>введен в стандарт, начиная с версии HTML4.
16.4 ,
Особенности навигации
с использованием фреймов
Рассмотрим использование фреймов и организацию переходов
между ними на типичном примере создания в одном фрейме меню,
которое будет все время оставаться неизменным, в то время как в
другом окне будут появляться выбранные из другого меню страницы.
В левом узком фрейме расположится таблица ссылок, при
щелчке по каждой из которых содержание правого фрейма будет
меняться, т.е. в нем будет отображаться соответствующий вызван-
ный файл.
Пример 15. Фрейм
1
2
3
4
5
<!—файл index.html, задающий фреймовую структуру-->
<html>
<head>
<Ш1е>Издательство "Новое знание"</title>
</head>
Глава 16. Фреймы
157
G
7
8
9
10
11
12
13
14
15
<frameset cols=" 145, *“>
<frame name="main" src="menu.htm">
<frame name="navigator" src="about.htm">
</frameset>
<noframes> •
<р>Ваш браузер не поддерживает фреймы</р>
<р>используйте<а href="http://www.netscape.com">Netscape
Navigator</a> версии 2.0 или новее, or <а href=“http://
www.microsoft.comSMS Internet Explorer</a> version 3.0 или новее.</р>
<p>B безфреймовом варианте можно просмотреть эту<а
href=’’http://wnk.biz”> версию</а>сайта</р>
</noframes>
</html>
Строки 3—5. В файле, описыващем фреймовую структуру, сохра-
няется блок <head>.
Строки 6—9. Блок, описывающий фреймы.
Строки 10—14. Описывается вариант, который появится в брау-
зерах, не распознающих фреймы.
Во фреймах откроются свои файлы, справа — начальная страница
сайта (about.html), слева — файл с пунктами меню (menu .html). В
каждом из файлов будут использованы ссылки. В ссылках необходи-
мо детализировать, в каком из фреймов открывать вызываемый файл.
Например, в меню, расположенном слева, находятся пункты-ссылки
меню, при щелчке по которым файлы должны открываться в правом
фрейме. Если никаких дополнительных действий не предпринять, то
файлы по умолчанию будут открываться в узком окне справа, меню
пропадет. Для этого в ссылках используется атрибут target. Значением
атрибута является имя фрейма, в котором отображаются документы.
В нашем случае имя этого фрейма — "main". Чтобы не задавать во всех
ссылках вручную один и тот же атрибут target= "main", можно исполь-
зовать элемент <base>, который размещается в разделе заголовков.
В этом элементе указывается атрибут target= "main". Теперь по умол-
чанию все гиперссылки будут открывать документы во фрейме с име-
нем “main’’.
Атрибут target используется также элементами <link>, <агеа>,
<form>.
target может принимать и заранее определенные имена-значе-
ния, которые являются ключевыми словами языка:
_Ыапк определяет, что документ должен быть открыт в но- вом окне;
_parent указывает, что документ необходимо открыть в ис- ходном наборе фреймов. Это возможно, когда на одной из панелей открывались свои фреймы;
158
Часть 2. HTML
top открывает документ во все окно, отказываясь от
фреймов;
self указывает, что документ открывается в текущем
фрейме.
Рассмотрим построение фреймов caftTahttp://wnk.biz (рис. 2.31).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
Пример 16. Построение фреймов
<!—файл nav_ru.html для организации меню -->
<html>
<head>
<Ш1е>Издательство "Новое знание": navigation</title>
<link rel="stylesheet“ href=Mdefault.css“ type="text/css">
<base target="main">
</head>
. <body noscroll>
<img src="nk.jpg“>
<brxbr>
<a href=l'about.html" title="O деятельности издательства"
target="main">0 нас</а>
<brxbr>
< a href="avtorann.htmr Ш1е="Г1редложения авторам" target=“main“>
Авторам</а>
<brxbr>
< a href="reklama.htmr Ш1е="Размещение рекламы в наших
изданиях" target=“main"> Реклама</а>
<br><br>
< а href=“korzina.htmr Ш1е="Г1росмотр заказанных книг"
target=Mmain“>Bauja корзина</а>
<br><br>
< а href=mailto:nk@wnk.biz title='"e-mair><img src="mail.gif"
аИ^Отзывы" border="none“><br>OT3biBbi</a>
<brxbr>
< a href="main.htmr Ш1е=“Главная страница"
target=umain">rлавнаж/а>
<brxbr>
</body>
</html>
Данный файл описывает меню, которое появляется в левом
фрейме (рис. 2.32).
Строка 4. Заглавие 4 при работе с фреймами не проявится в
заголовке. Его можно увидеть только при отдельной загрузке
этого файла.
Строка 5. Загружается файл, в котором описаны стили.
Строка 6. Атрибут /алде1='7па/л’’указывает, что если не описано
иное, то все ссылки из этого файла должны открывать документы
во фрейме с именем "main".
Глава 16. Фреймы
159
Строка 8. Открывается блок документа. Указывается, что не дол-
жна появляться полоса прокрутки и задает фон.
Строка 9. Выводится логотип.
Строка 11. Организуется ссылка на английскую версию сайта.
Поскольку при этом новая фреймовая структура (about.html)
должна загрузиться в полное основное окно, которое является
родительским по отношению к исходному фрейму, то следует
указать target=”_parent".
Строки 13, 15, 17, 21 — ссылки, которые вызывают страницы
сайта, направляя их в окно "main" (правый большой фрейм).
Строка 19 — ссылка, вызывающая программу электронной почты.
Если имена фреймов не обозначены в элементе <frame> и ссылки
не имеют атрибутов target, то вся навигация сводится к открытию
ссылок в новом окне.
16.5 ,_______________________________________________
I Встроенные панели. Элемент <iframe>
Элемент <iframe> открывает специальный вид панелей — встро-
енное окно или встроенный фрейм. В этом окне может отображать-
ся другой документ. По механизму действия элемент <.frame> ближе
к встраиваемым элементам <object>, чем ко фреймам, которые по
реализации ближе к окну приложения. С последними он сходен
визуально, поскольку выделяет область на экране, где отображает-
ся другая страница (см. рис. 2.33).
<><>
Синтаксис: <iframe> является контейнером и располагается в ото-
бражаемом файле:
<iframe атрибуты>
Альтернативное содержание:
<iframe>
Содержание контейнера не имеет значения. Оно отображается
только в том случае, если браузер не распознает встроенное окно-
фрейм. Поэтому часто оно является альтернативным содержанием.
<?>
Атрибуты:
scr указывает URI загружаемого элемента.
name задает имя встроенного фрейма.
I6ngdesk задает адрес документа, в котором содержится рас-
ширенное описание загружаемого документа.
160
Часть 2. HTML
...........- ।
frameborder меняет рамку для данного фрейма. Принимает два значения — "О" I "г. frameborder =”0” предполагает от- сутствие рамки, значение т указывает, что рамка будет. По умолчанию frameborder=”r.
marginwidth указывает поле справа и слева в пикселях между гра- ницей фрейма и его содержанием.
marginheight задает поле сверху и Снизу в пикселях.
scrolling задает или отменяет прокрутку. Может принимать значения: auto используется по умолчанию. Полоса про- крутки появляется автоматически, когда элемент не помещается во фрейме; yes полоса прокрутки появляется в любом случае; по полоса прокрутки не визуализируется. При этом часть экрана, часть страницы будет недоступна пользователю.
align задает выравнивание фрейма на странице. Может принимать значения: top выравнивает встроенное окно по верх- ней линии блока или строки, middle выравнивает центр встроенного окна по линии строки, bottom выравнивает низ встроенного окна- фрейма по базовой линии строки,
left выравнивает встроенный фрейм по левому краю, right выравнивает встроенный фрейм по правому краю.
height определяет высоту встроенного фрейма в пикселях или процентах.
width определяет ширину встроенного фрейма в пикселях или процентах.
Любопытная ситуация возникает, если размер элемента <iframe>
совпадает с шириной текущего окна. В этом случае пользователв,
просматривая содержимое, загруженное в <iframe>, и не подозрева-
ет, что остается в пределах предыдущей Web-страницы. Такой при-
ем часто используется для удержания пользователя на одном сайте,
т.е. содержание других сайтов будет отображаться на странице,
Глава 16. Фреймы
161
принадлежащей сайту-захватчику. Такой прием может использо-
ваться для разных целей, не всегда благовидных. Например, для от-
слеживания интересов пользователя, для улучшения статистики
посещаемости сайта и т.д.
Общие атрибуты:
id, class, style, title.
£з[¥1
Контент может включать элементы:
1) блочные заголовки <Ы>.....<h6>, элементы: <р>, <div>, <dl>,
<pre>, <blockquote>, <fieldset>, <address>, <hr>, <table>, списки <ul>,
<ol>, скрипты <script>, <noscript>;
2) встроенные элементы:
» текст,
♦ элементы физического форматирования (<b>, <big>, <i>, <s>,
<strike>, <small>, <tt>),
* логического форматирования (<em>, <strong>, <dfn>, <code>,
<samp>, <kbd>, <var>, <cite>, <abbr>, <acronym>),
» специального назначения (<a>, <img>, <map>, <a'pplet>,
<object>, <script>, <span>, <iframe>, <font>, <basefont>, <br>,
<sub>, <SUp>, <bdo>, <q>),
• форм (<input>, <select>, <textarea>, <button>, <label>).
Допускается отсутствие контента.
Примечание. Элемент <iframe> введен в стандарт, начиная с версии HTML4.
Использование элемента <iframe> показано на рис. 2.32,
Пример 17. Встроенный фрейм
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<Ш1е>Элемент <iframe></title>
</head>
cbody style="background-color: #dddddd">
<р>Был воскресный вечер. Все было чисто и умыто</р>
<div>
Налюбовавшись&пЬвр
ciframe align=middle width=82% height=350 8ГС="Элемент
iframe.files/wnk.html">
Здесь должен быть сайт издательства
</iframe>
</div>
<р>- Эх, Киса, - сказал Остап, мы чужие на этом празднике
жизни</р>
</body>
</html>
6 Зак 1627
162
Часть 2. HTML
" 'П
Рис. 2.32. Использование элемента <iframe>
Строка 7—11. Организуется блок <div>.
Строка 8. В блоке сначала выводится текст «Налюбовавшись».
Строка 9. Выводится фрейм, который имеет относительный
размер по ширине (82%) и абсолютный по высоте (350 рх). Во^фрейм
выводится файл wnk.html. Фрейм выравнивается по середине строки.
В заключение раздела о фреймах следует отметить, что волна
интереса к этой технологии в последнее время несколько схлынула,
поскольку те же задачи могут решаться более простыми средства-
ми. Например, организовать неподвижный список-меню в одном
окне с прокручивающимся текстом теперь можно и без фреймов,
используя стили CSS. Блок меню при этом просто фиксируется в
нужной точке окна. В одном окне намного проще организуется на-
вигация. Кроме того, не все браузеры поддерживают фреймы и не
все поисковые системы способны «разобраться» во фреймовой
структуре. Особый характер фреймовой структуры подчеркнут даже
в необходимости использовать свои спецификации (см. п. 8.1).
Впрочем, такую «зигзагообразную» судьбу, характеризующуюся
приливом интереса разработчиков и последующим спадом, в
HTML разделили многие технологии, такие как слои (layer), аппле-
ты и др.
Раздел заголовков
Глава 17
<?•>
Раздел заголовков располагается в самом начале документа, но
мы оставили его изучение на конец части книги, поскольку для
рассмотрения затрагиваемых здесь вопросов желательно уже обла-
дать некоторыми навыками работы с HTML.
________________________________
I
I Элемент <head>
В элементе <head> размещается служебная информация, кото-
рая браузером не отображается. Большое количество информации,
размещенной в этом блоке, используется серверами. Она записана
в следующих элементах, размещаемых внутри <head>:
различного рода дополнительная информация, описываемая
элементом <meta>;
заголовок-название страницы <title>;
стиль страницы <style>, отвечающий в основном за форматиро-
вание и представление страницы, (см. п. 20.2);
элемент <base> предназначен для описания расположения ссы-
лок (см. п. 13.3),
связь между файлами указывает элемент <link> (см. п. 13.2).
Атрибуты, которые использует <head>, не отличаются разнооб-
разием. Это:
profile="uri” определяет URI файла, в котором содержатся ин-
формация и свойства, заданные тегами <meta>.
Общие атрибуты:
ultllang, dir.
164
Часть 2. HTML
172,___________________________________________
I Элемент <meta>
Открыв практически любую Web-страницу в виде HTML-кода,
в заголовочной части <head> можно обнаружить большое количе-
ство элементов <meta>.
<><•>
Синтаксис: одиночный тег:
<meta atributes>='Va/ue"
Это служебные теги, называемые мета-тегами, которые играют
вспомогательную роль. Они поставляют дополнительные данные и
могут вставляться ра ^работниками, программой, генерирующей стра-
ницу (в том числе и браузером), или сервером. Дополнительная ин-
формация может включать: ключевые слова для поиска, сведения
об авторах, описание документа для поисковых машин и др. Дан-
ные в элементах могут обрабатываться как браузером, так и серве-
рами.
Элемент <meta> бессмысленно использовать без атрибутов, ко-
торые, собственно, и несут информацию. Атрибуты указываются
парами. Одни указывают свойство, другие определяют его значе-
ние. Порядок следования атрибутов роли не играет.
Наиболее типичные пары составляют ,
пате — content и
http-equiv — content
Например:
<meta name="Author” COntent=X)cTan Сулейман Ибрагим Бендер">
Вообще можно вводить любые свойства и назначать им любые
значения. В примере атрибутом является author, а его значением
"Остап Сулейман Ибрагим Бендер". Такой необычный порядок считыва-
ния пары атрибут-значение объясняется тем, что передаваемые та-
ким обраюм атрибуты не входят в минимальный состав, опреде-
ляемый HTML и используемый браузерами (хотя это не значит, что
браузеры не могут откликаться на некоторые из них). Но они могут
использоваться серверными программами, или функциями, напи-
санными самостоятельно разработчиками Web-страниц.
Глава 17. Раздел заголовков
165
Атрибуты:
ultlname
content
http-equiv
scheme
<?>
задает имя свойства, при описании собственных
сведений о документе.
задает значение свойства.
указывает информацию, передаваемую сервером
HTTP.
указывает на схему обработки браузером значения,
заданного в content.
Некоторые свойства употребляются настолько широко, что мог-
ли бы составить конкуренцию встроенным. Среди них:
name^author" автор,
name="copyright” описание авторского права,
name=”description" краткое описание до 150 знаков содержания доку-
мента (используется поисковыми машинами),
пате-'generator" указывает программу, создавшую страницу,
name=“keywords" ключевые слова.
Среди полезных серверных инструкций известны следующие:
http-equiv=“refresh— указывает браузеру на необходимость пе-
резагрузки документа через указанный интервал времени (в секун-
дах). Это свойство использовалось для «накручивания» рейтинго-
вых счетчиков, имитируя частую загрузку страницы. В настоящее
время многие рейтинговые системы распознают эту хитрость. Дру-
гое известное.употребление — редирект (redirect) — перенаправле-
ние пользователя по другому адресу. Редирект обычно производит-
ся маленьким файлом, оставленным на старом месте, после того
как весь сайт был перемещен в другое место. В данном случае рас-
познавание параметров возложено на браузер.
Например:
cmeta http-equiv=urefresh" content^'is^
Если браузер распознает эту инструкцию, то перезагрузит эту
же страницу через 15 секунд. Такая операция может быть не лише-
на смысла, если вы, к примеру, отслеживаете биржевые сводки или
новости в он-лайн.
<equiv = "refresh” content = "15; urf = http://wnk.blz>
166
Часть 2. HTML
Через 15 секунд браузер загрузит новую страницу.
expires указывает дату, после которой документ будет счи- таться устаревшим. Встретив такую инструкцию, браузер загрузит свежую версию прямо из Сети, а ус- таревшую удалит из кэша.
type обозначает тип таблиц стилей. Таблицы стилей CSS будут рассмотрены дальше (см. 4.3).
citype указывает на тип обрабатываемого файла.
В следующем примере указывается кодировка кириллицы в Windows:
< meta http. equiv="Content. type "content="text/html;charset=windows-1251“>
Могут применяться и общие атрибуты для всех элементов:
Icgrid информация о языке,
dir направление текста.
17.3 ,___________________________________________
] Элемент <title>
Заглавие может быть использовано по-разному и это использо-
вание зависит от системы. Текст, расположенный между тегами,
появляется в верхней части окна браузера. В случае отсутствия за-
главия в этой строке браузер отображает URI загруженного файла.
Кроме того, заглавие используется в списке недавно просмотренных
страниц — журнале. Ряд поисковых систем производят поиск с уче-
том заглавия, причем страницы, имеющие найденное слово в заглавии,
имеют повышенный коэффициент соответствия условиям запроса.
<>•<•>
Синтаксис: элемент является контейнером:
<Ш1е>Заглавие страницы<ЛИ1е>
В отличие от других элементов, этот обязательно требует закры-
вающего тега </title>.
<?>
Имеет только общие атрибуты для всех элементов:
lang информация о языке,
dir
направление текста.
Глава 17. Раздел заголовков 167
I Общие атрибуты
Некоторые атрибуты встречаются практически у каждого эле-
мента. К их числу относятся id, class, dir, language, title.
id используется как уникальный идентификатор эле- мента. Элемент с таким идентификатором можно однозначно выделить среди других, в том числе и однотипных элементов. Например, элемент абзаца <р id="my_eiementn> может быть выделен среди дру- гих абзацев и оформлен индивидуальным образом. Идентификатор является той уникальной меткой в коде, которая может служить якорем (местом на- значения) для ссылки. Активно используется со- вместно с языками стилей и языками сценариев, например JavaScript, для организации доступа к от- меченному элементу.
class Атрибут определен для всех элементов, за исключением <base>, <html>, <head>, <title>, <meta>, <script>, <style>. используется для организации связи со стилями оформления. Элементы, которые имеют одинаковый класс, однотипно оформляются. Позволяет группиро- вать даже разнородные элементы. Используется всеми подлежащими оформлению элементами. В их число не попадают <base>, <basefont>, <html>, <head>, <title>, <meta>, <param>, <script>, <style>.
Щ tltle указывает краткую подсказку для элементов, которые могут появиться на странице. В IE может появляться как всплывающая подсказка. Отсутствует в элементах <base>, <basefont>, <html>, <head>, <title>, <meta>, <param>, <script>.
dir введен для поддержки национальных особенностей написания текста. Выводит текст обычным образом — слева направо (значение яг задано по умолчанию). Ес- ли атрибут принимает значение “rtr, то текст выводится справа налево. Может использоваться всеми элемента- ми, имеющими контент. Не поддерживается элемента- ми <applet>, <base>, <basefont>, <bdo>, <br>, <frame>, <frameset>, <iframe>, <param>, <script>.
lang предназначен для поддержки многоязычных сайтов. Как и предыдущий, определен для всех элементов-
168
Часть 2 HTML
контейнеров. В их число не попадают <applet>,
<base>, <basefont>, <bdo>, <br>, <frame>, <frameset>,
<iframe>, <param>, <script>. Принимает значения, ко-
торые являются двухбуквенной аббревиатурой язы-
ка. Например:
еп английский,
ги
fr
русский,
французский.
css
Немного истории
Глава 18
CSS — язык стилей — совсем молодой по сравнению с HTML.
В мае 1995 года консорциум W3C объявил о намерении использо-
вать CSS для оформления Web-документов. Консорциум начал ак-
тивное сотрудничество с ведущими разработчиками браузеров в деле
разработки единых стандартов. Уже следующий браузер Microsoft
(к тому времени — Internet Explorer 3) поддерживал язык стилей. В де-
кабре 1996 года W3C рекомендовал первую версию языка CSS Layer 1
(http://www.w3 .org/TR/REC-CSSl), в которой содержалось око-
ло 50-ти различных свойств форматирования. Netscape внедряла
язык стилей в свои браузеры не так быстро. Netscape Navigator 4
лишь частично поддерживал CSS, и только Netscape Navigator 6
оказался более прогрессивным в этом отношении.
Использование стилей позволило избавиться от многих дизай-
нерских проблем, часть из которых приходилось решать обходны-
ми путями, а часть и вовсе не решалась стандартными средствами
HTML. Приведем несколько примеров. Для создания отступов за-
данного размера разработчики ранее применяли изображение бе-
лого прямоугольника, поскольку повторяющиеся пробелы браузе-
рами игнорируются, а других средств позиционирования HTML не
имело. Теперь достаточно в стилях соответствующего элемента
указать необходимую величину отступа.
Для размещения и привязки текста, картинок, форм использо-
вали таблицы (табличная верстка). Теперь можно позиционировать
каждый блок в произвольном месте.
Для создания выразительных надписей конвертировали текст
в изображения в графических редакторах и вставляли рисунки в Web-
документ, что увеличивало размеры файлов. Для других элементов
оформления использовали встроенные программы, что неоправдан-
но усложняло код. Сейчас стили предоставляют достаточно боль-
шое количество фильтров для художественного оформления текста.
В классическом HTML искусство Web-дизайнера состояло не
столько в реализации собственных идей, сколько в умении преду-
гадывать поведение браузера, за которым оставалось последнее слово
в оформлении страницы. CSS позволил дизайнеру получить власть
над оформлением и управлять процессом отображения документов.
172
Часть 3. CSS
За два года популярность стилей настолько выросла, что в 1997 г.
в спецификации HTML 4.0 W3C объявил многие атрибуты устарев-
шими и на чтом основании отмененными, рекомендуя использовать
для оформления страниц стили. Язык HTML постепенно начинает
терять свою первозданную простоту, приобретая взамен большие
возможности и гибкость. Вместе с тем CSS — весьма простой язык,
который не требует сверхусилий для освоения. Следует отметить,
что для написания кодов на CSS можно использовать два подхода:
писать код вручную или использовать специальный WYSIWYG-ре-
дактор, поддерживающий CSS, в котором можно оформлять страни-
цы, не будучи знакомым с тонкостями языка — расставлять за вас
команды будет редактор. Из последних таких редакторов упомянем
(для Windows):
♦ CSS-Styler 3.0 (фирма Maxro Software, http://www.maxro.de/
css-styler.htm);
* JustStyle CSS Editor (version 1.1, http://juststyle.mastak.
com/) — редактор CSS1;
* TopStyle 2.10 (фирма Bradbury Software, http://www.brad-
soft .com/topstyle/), включает подержку для браузеров
Netscape 6, IE 6 и Opera 5.
Язык постоянно развивается и в CSS 2 (полное описание можно
найти по адресу http: //www.w3.org/TR/REC-CSS2), основанном
на CSS 1 и вышедшем в мае 1998 года, добавлено около 70-ти но-
вых свойств. Из последних тенденций развития языка следует от-
метить возможность его успешной комбинации с языками сценариев,
которая является одной из основных технологий разработки инте-
рактивных страниц и динамического HTML.
Общая характеристика
языка CSS
Глава 19
Как уже упоминалось, ряд элементов и атрибутов HTML объяв-
лены устаревшими или отмененными по той причине, что задачи
оформления решаются сейчас другими, более прогрессивными, спо-
собами, с использованием стилей. HTML позволяет подключать раз-
личные языки стилей. Мы остановимся в данной части книги лишь
на наиболее популярных каскадных таблицах стилей CSS. Для спе-
циальных нужд могут использоваться другие аналогичные языки,
например, таблицы стилей Java.
Что же представляют собой таблицы стилей CSS? По сути это
совокупность параметров, объединенных в правила (rule), при по-
мощи которых форматируется (оформляемся и отображается) текст.
Например, простейшее правило, в котором описывается поведение
только одного параметра, выглядит следующим образом
p{color: reefs
Нетрудно догадаться, что оно означает: все абзацы, задаваемые
элементом р, должны быть отображены красным цветом.
Каждое из правил может применяться в указанном разработчи-
ком месте к заданным элементам. В правиле задается объект, к ко-
торому стиль применяется, а затем следует собственно описание
составляющих стиль компонентов: цвет и размер шрифта, вырав-
нивание и т.п.
Почему язык CSS (Cascading Style Sheets) называют таблицами,
вообще-то не совсем понятно. Термин «таблицы» достаточно прочно
укоренился, но, строго говоря, он вносит некоторую путаницу.
Можно встретить и термин «листы» стилей, что является дослов-
ным переводом с английского слова sheets. С точки зрения русского
языка CSS правильнее было бы назвать «списками» стилей (точнее,
списками правил, поскольку CSS является объединением различ-
ных правил). В этом же смысле и будет далее пониматься в нашей
книге термин «таблицы стилей», чтобы не вносить разнобой введе-
нием новой терминологии.
174 Часть 3. CSS
' —i
Таблицы стилей решают несколько проблем. Во-первых, они по-
могают отделить содержание, т.е. контент от представления. Тем са-
мым Web-страница приобретает универсальность. Одно и то же содер-
жание сможет адекватно воспроизводиться на экранах мониторов, на
дисплее мобильного телефона, в аудиобраузере. Каждое из уст-
ройств при этом будет использовать свои таблицы стилей для пред-
ставления содержания.
Вторая особенность — гибкость. Достаточно поменять несколь-
ко строк кода и на всех страницах сайта, которых может насчиты-
ваться не одна сотня, синхронно изменится цвет фона, поля,
шрифты заголовков и т.п. Это приводит к упрощению разработки
и простоте эксплуатации сайтов. Поэтому использование таблиц
стилей особенно оправданно в больших и динамичных проектах.
Третья особенность — увеличение возможностей оформления
контента. В примерах, приведенных во второй части, было проде-
монстрировано, что в то время, как атрибуты элементов HTML по-
зволяют расположить элемент только справа, по центру или слева,
при помощи CSS его можно расположить произвольным образом.
Возможности CSS по форматированию если не безграничны, то
очень впечатляют.
Таким образом, использование стилей приводит к упрощению
разработки и эксплуатации сайтов и особенно оправданно в боль-
ших проектах.
«Идеология» стилей присуща не только Web-документам. Она
давно и успешно реализована в различных издательских системах,
в частности, в таком популярном редакторе, как MSWord. Печатая
одну страницу письма, вы не будете тратить времени на создание
отдельного стиля для адреса, подписи и т.п. Их проще физически
отформатировать, выделив что-то курсивом, а что-то подчеркнув.
Однако ситуация изменится, если вы будете готовить даже неболь-
шую брошюру, не говоря уже о многостраничном отчете или книге.
В этом случае проще разметить заголовки, сноски, списки, формулы.
Для каждого из элементов задается свой стиль, который в любой
момент можно изменить, автоматически поменяется их оформле-
ние по всему тексту.
Аналогично работают стили и в Web-публикациях. Возможно,
нет смысла изучать языки стилей, если ваше знакомство с Web-тех-
нологиями ограничится изготовлением одной-двух домашних стра-
ниц. Можно обойтись только HTML или вообще использовать
WYSIWIG- редактор. Однако при разработке большого количества
однотипных документов без стилей не обойтись.
Стили можно не только задать во время написания текста стра-
ницы, ими можно управлять и программным образом при помощи
скриптов, что также позволяет приобщить эту технологию к созда-
нию интерактивных страниц.
Глава 19. Общая характеристика языка CSS
175
Наглядно увидеть разницу между форматированием при помо-
щи классического HTML и форматированием при помощи стилей
можно на следующем примере. Допустим, вы оформляете сайт, пред-
ставляющий собой доску объявлений, в котором единообразно вы-
деляются одним способом ключевые слова, другим — контактная
информация, третьим — основная часть. Отдельное объявление, за-
данное только средствами HTML, могло бы выглядеть так (рис. 3.1):
<div align^justify'^
<font size-i-1 color="#dd5577 face="Tjmes New Ho/nan'Xb>KyruiK)</b></font>
<font size=+i color="#6666cc'' {асе='ТаЬота>рренарцать стульев<Лоп1>
<font size=-i color^oooooo'' face=“Times New яотал^работы мастера Гамбса
начала двадцатого века. Hefloporo.</font><font Size=+1 co/or="#dd5577"
7асе=*Дпа/><‘|>Тел. 911 -911 </ix/font>
</div>
Рис. 3.1. Форматированный текст
Указанную совокупность атрибутов (а это еще не предел!), за
которой практически не читается текст, придется в HTML задавать
каждый раз для нового объявления, что очень трудоемко. Выделить
фон отдельного слова в абзаце стандартными средствами HTML
невозможно. А изменить размер, цвет и начертание букв в сотнях
объявлений вы бы взялись только по приказу начальника, черты-
хаясь, и только за большие деньги, которые за такую работу, увы,
никто не заплатит.
Табицы стилей позволяют решить вышеприведенную задачу на-
много проще, и, кроме того, обладают гораздо большими возмож-
ностями для форматирования. В нашем случае изменения выгляде-
ли бы следующим образом:
<div >
<strong>KynBro</strongxem> двенадцать стул ьев</ет> работы мастера
Гамбса начала двадцатого века. Недорого. <em class=“phone">Ten. 911-911
</ет>
</div>
176
Часть 3. CSS
Здесь использован обычный HTML, а в отдельном месте будет со-
средоточено описание форматирования элементов <div>, <strong>,
<em>, <em class="phone">. Это может быть сам файл документа или
отдельный внешний файл стилей. Стиль элементов может быть
описан, например, так:
<div>
<81гопд>Куплю</81гопд><ет>двенадцатьстульев</ет>работы мастера
Гэмбсаначала двадцатого века. Недорого. <ет С/а38=нрЛопе>Тел.911-911</е[р>
</div>
Каждое следующее объявление будет иметь такой же внешний
вид, если в нем использовать те же элементы <div>, <strong>, <em>,
<em class="phone>.
Каскадность. Язык CSS поддерживает каскадность, хотя не все язы-
ки стилей обладают таким свойством. Стили могут быть описаны в
разных местах, образуя своеобразный «каскад» правил. Каскадность
подразумевает как сбор и анализ информации о стилях из разных
источников, так и определение приоритета источников, позволяя
тем самым разрешить конфликтные ситуации, когда информация
из одного источника противоречит информации из другого. Кас-
кдцность тесно связана с наследованием.
Наследование. Под наследованием понимается ситуация, при
которой стиль из дочернего вложенного элемента, если он не задан
явно, заимствуется из внешнего родительского элемента. Напри-
мер, раздел «Энциклопедия» на сайте может иметь специальный стиль
оформления, предположим, черный цвет текста на белом фоне. Под-
раздел «Физика» может унаследовать этот стиль (черный цвет тек-
ста на белом фоне) от общего раздела «Энциклопедия», внося при
этом некоторые изменения (зеленый цвет текста). Подраздел «Оп-
тика» может отличаться (серый фон) от стиля наследуемого в преды-
дущем уровне (зеленый текст на белом фоне) и т.д.
Зависимость от среды представления. Если в HTML решаются
задачи независимости представления от среды и способа воспроиз-
ведения, то таблицы стилей, наоборот, призваны конкретизировать
способ отображения контента для данного устройства или группы
устройств. Причем один и тотже язык стилей может включать опи-
сание различных способов представления, например, экран мони-
тора, принтер, синтезатор речи... Сюда же относятся возможности
использования альтернативных таблиц стилей. Одна и та же группа
устройств, например, мониторы, может объединять устройства с
высоким и низким разрешением. В первом случае могут использо-
ваться мелкие шрифты, во втором — крупные.
Глава 20
Подключение
таблиц стилей
Где размещать информацию о стилях, решает разработчик. Если
стилей немного и они применяются к большому числу страниц, то
имеет смысл вынести стили в отдельный файл. В этом случае стили
называются внешними. Для стилей CSS файл имеет расширение
*.css. Информация о внешних файлах располагается в документе
в элементе <meta> или <link>.
Если каждая страница индивидуальна, то стили располагают в спе-
циализированнном элементе <style>, который размещается в начале
документа в разделе <head>. Такие таблицы иногда называют гло-
бальными, подразумевая, что они относятся ко всему документу.
Когда необходимо отформатировать отдельный элемент, описа-
ние стиля можно расположить непосредственно внутри элемента
при помощи уже специализированного атрибута style. Например:
<div Style="color:red;“>
k
Такие стили называют еще встроенными (inline), или внедренными.
Чем ближе описание стиля находится к элементу, тем более вы-
сокий приоритет имеет этот стиль при решении вопроса о выборе
конечного правила оформления. Списки (таблицы) стилей различ-
ных уровней образуют тот своебразный каскад, о котором упоми-
налось в главе 19.
Начнем с рассмотрения стилей, имеющих самый, высокий при-
оритет — встроенных.
20.1 ,_________________
I Встроенные стили
04 Е,
Встроенные стили организуются при помощи атрибута style, ко-
торым обладают все оформляемые элементы HTML. Атрибут style
нельзя найти в элементах, которые с форматированием не связаны:
<base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <title>.
178
Часть 3. CSS
<><>
Синтаксис записи самого тега HTML при использовании атри-
бута style сохраняется, например:
<div sty/e=”...~>
Значением атрибута style является строка, в которой содержится описание
правила стиля. Описание стиля осуществляется в соответствии с собственным
синтаксисом языка CSS путем перечисления параметров и их значений в виде:
Style = "свойство_стиля_1: значение_1; свойство_стиля_2: значение_2;“ И т.д.
Параметры bCSS называют свойствами. Значение свойств записывается после
двоеточия, а друг от друга свойства отделяются точкой с запятой. Например:
Style="color: brown; text-align: right;"
Некоторые свойства могут иметь общее групповое название. На-
пример, font-fctmity, font-size, font-style, pit-weight имеют общее групповое
имя font. В этом случае для сокращения название каждого свойства
можно не указывать, а заменить общим групповым именем. Значе-
ния, соответствующие разным параметрам, следуют в таком случае
подряд, без точки с запятой, разделяемые только пробелом. Напри-
мер, равносильны будут записи
style="font-famlly: Times New Roman'; font-size: 12pt; font-style: italic; font-weight: 400;"
style="font: 'Times New Roman' 12pt Italic 400;"
Сохраняется правило, касающееся вложенных кавычек — они
должны быть разными. Если значения в таком правиле указывают-
ся через запятую, то они относятся к одному свойству и порядок
их задания означает приоритет использования. Если не может быть
найдено первое значение, то используется второе и т.д. Прежде
всего это относится к font-family, которое задает гарнитуру (тип)
шрифтов.
20.2 и
Глобальные таблицы стилей.
Элемент HTML <style>
Если одинаковые стили используются в файле в нескольких мес-
тах, то удобнее использовать глобальные стили. В этом случае они
располагаются в специальном элементе HTML <style>. Элемент
представляет контейнер, который размещается в разделе заголов-
ков <head>:
179
Глава 20. Подключение таблиц стилей
। .. - —
<style>
описание стилей на языке стилей в соответствии с собственным синтаксисом
</style>
<?>
Из собственных атрибутов отметим
tpard его значение определяет язык таблицы стилей и пере-
загружает его, если он отличается от языка, используе-
мого по умолчанию. Значение задается как типлрормат
(MIME-тип), например: textoss (см. приложение 4).
media по умолчанию значение равно screen, что предполагает использование стиля для отображения на мониторе. Может содержать один или несколько дескрипторов других устройств, отделенных запятой, например: media="screen, print" (для печати).
Свойства общего назначения (см. ч. 2).
lang, dir, title
В одном документе может содержаться несколько элементов
<style>. Поскольку ранние версии браузеров могут не поддерживать
стили, то рекомендуется скрывать содержимое <style> в комментариях.
Например:
<style type=Ktext/css№><\—
описание стиля
—></style>
Если элемент <style> не будет распознан (его не распознают ста-
рые версии браузеров), то его содержимое воспримется как ком-
ментарий и не будет выводиться на экран.
Описание стиля производится следующим образом:
4 . 1
selector_1 { СВОЙСТВОСТИЛЯ: значение; свойство_стиля: значение;...}
selector_2{ СВОЙСТВО СТИЛя: значение; свойство_стиля: значение;...}
И Т.Д.,
где селектор (selector) указывает на элемент или группу элементов,
к которым применяется задаваемое правило. Само правило разме-
щается в фигурных скобках, причем до двоеточия располагается
свойство, после — его значение
180
Часть 3. CSS
Селектор может указывать на:
1. Один отдельный элемент. В этом случае элемент распознается
по своему идентификатору г7?или атрибуту пате. Например:
<style type="text/cssH><\—
# my_element{ font: Times New Roman’ 12pt italic 400;}
-></style>
В теле документа это форматирование будет применено только
к элементу с уникальным идентификатором my_element, знак «#» пе-
ред идентификатором не ставится. Только один элемент может
иметь такой идентификатор. Например:
<р id="my_elementK>...</p>
2. Если необходимо указать, к какому элементу применяется
правило стиля, то задается имя элемента. Например:
<р id=''my_elementH>...</p>
Однако в этом случае, если одиночный элемент, к которому
применяется правило, заранее известен, лучше использовать встро-
енные стили.
f
Ъ. Преимущества глобальных стилей проявляются при примене-
нии правила к группе элементов. Например, если предыдущее пра-
вило надо применить ко всем параграфам, то оно запишется так:
pf font: Times New Roman’ 12pt italic 400;}
4. Если таким же образом оформлять и другие элементы, то их
наименование в разделе селектора достаточно указать через запятую,
а не записывать одно и то же правило для каждого элемента:
р, div, hi, a.{ font: Times New Roman’ 12pt italic 400;}
5. Если имена элементов не отделены запятой, то селектор при-
обретает совсем другой смысл. Правило
div р, a{ font: Times New Roman' 12pt italic 400;}
будет применяться только:
а) к элементам <р>, вложенным в элемент <div>,
б) к элементам-якорям <а> (последний указан через запятую).
6. Селектор работаете понятием class. Такой атрибут имеется прак-
тически у всех элементов HTML. Класс элементов может выделять
Глава 20. Подключение таблиц стилей 181
г " 1 1 - ---- - -
подмножество как одноименных, так и различных элементов, ко-
TopBie будут иметв одинаковые способы форматирования.
Описание класса задается в виде имени класса после точки, затем
следует стандартное правило форматирования, заключенное в
Например:
р myFont {font: ‘Times New Roman' 12pt italic 400;}
В этом примере задан класс элементов <р>, называемый myFont.
Такое правило применяется к элементам <р>, но не ко всем, атоль-
ко к тем из них, у которых указан соответствующий атрибут class.
Например:
< р class=KmyFonr>ievcx абзаца</р>
.myFont { font: ‘Times New Roman’ 12pt italic 400;}
Во втором примере задан обобщенный класс, к которому мож-
но присоединитв любой элемент указанием соответствующего ат-
рибута class=‘‘myFont’B теге элемента. В отличии от идентификатора
id, который должен быть уникальным у каждого элемента, один и
тот же атрибут class пригоден для любого количества любых эле-
ментов, конечно, при условии, что в правиле описаны только свой-
ства, поддерживаемые данным элементом.-
Например, можно использовать определенный выше класс в не-
скольких элементах:
< h4 c/ass="myFont">... </h4>
< р cfass=“myFonr>...</p>
К элементам, определенным без класса "myFont", вышеописанное
правило применяться не будет.
20.3 ,
! Псевдоклассы
В отличие от классов псевдоклассы определяют форматирова-
ние элемента не только в зависимости От его имени и положения
в структуре страницы, но и от наличия некоторых определенных
внешних условий. Аналогичным образом устанавливаются и псев-
доэлемепты.
182
Часть 3. CSS
i
В настоящее время псевдоклассы чаще все! о и активно исполь-
зуются для выделения ссылок. Одни и те же ссылки в зависимости
от условий (ссылка уже просматривалась ранее, на ссылку попал
курсор и т.п.) могут отображаться по-разному. Имя псевдокласса
в селекторе ставится после двоеточия.
Условия, которые отличают одни ссылки от других:
a: link { color:blue } непосещенные ссылки. Чаще всего ссылки отличаются цветом, что и от- мечено в примере, представленном в следующем параграфе;
a:visited (правило стиля } посещенные;
a: active {правило стиля } активные (т.е. ссылка, активирован- ная в данный момент, по которой идет загрузка или загружена указан- ная страница);
a: hover {правило стиля } ссылки, на которых находится кур- сор мыши.
Эти псевдокласссы относятся только к ссылкам, поэтому имя
элемента а может быть опущено. Например, допустимо:
: hove г {правило стиля }
Следующие псевдоклассы в настоящее время поддерживаются
только NN 6, хотя и входят в спецификацию CSS 2:
:first-child псевдоклассы для описания первого элемента в группе.
Например:
p:first-child (color: navy}
определяет правило для первого параграфа, вложен-
ного в любой элемент, будет отображен синим цве-
том;
p:first-child {color, navy}
определяет правило для первого параграфа, вложен-
ного в блок <div>;
Глава 20. Подключение таблиц стилей
183
। ' —
*>p:first-child (color navy}
равносильно первому примеру, поскольку «джо-
кер» — * — заменяет любой элемент.
20.4 ,__________________________________________________________
I Псевдоэлементы
Псевдоэлементы выделяют из элемента некоторую часть. В на-
стоящее время поддерживаются только NN 6, хотя в специфика-
цию CSS 2 входят следующие псевдоэлементы:
•first-letter выделяет первую букву. Применяется к элементам
уровня блока.
Например:
Р first-letter {font-size:i6px}.
Позволяет организовать буквицу.
first-line: выделяет первую строку. Применяется к элементам
уровня блока.
:before :after применяются для генерации дополнительного кон-
тента до (before) или после (after) элемента.
Например:
p.new:before { content:"New!“; colorred }
Будет вставлять «New!» красного цвета во всех
параграфах класса .new.
В спецификацию входит небольшое количество других псевдо-
элементов, не поддерживаемых в данное время ни одним браузером.
20.5 ,__________________________________________________________
I Внешние таблицы стилей
Внешние таблицы стилей, называемые иногда связанными сти-
лями, располагаются во внешних файлах. Особенности работы
с такими стилями имеются в подключении внешнего файла. Его
написание не отличается от рассмотренного в параграфе про гло-
бальные стили (см. п. 20.2). Файл не содержит дополнительных
184
Часть 3. CSS
сведений и начинается прямо с текста, аналогичного контенту эле-
мента HTML <style>. Комментарии отмечаются подобно коммен-
тариям языка С и заключаются в /*..*/.
Например:
/* файл default, css "/
body {background-image: url("image/snow_blue.jpg"); color: #000000; font-
family:Arial, Helvetica;}
body.Navigator {background-image: url{"image/corai.jpg‘); color: #000000;
font-famlly:Arialr Helvetica;}
table.Menu {fonteoo iopt; font-family:Ariai, Helvetica; background-
color:#9999cc; align:center; width: 100%; bordecsolief}
a {text-decoration: none}
a: link {color: яззззсс; font-weight: bold]
a:visited {color: #660099; font-weight: bold}
a:active {color: #cc3300; font-weight: bold}
a:hover {color: #993300; font-weight: bold}
h2.Comic {font:400 14pr, font-family:Comic Sans MS,Arial, Helvetica; text-
align.‘center; text-transform: uppercase}
Подключение внешних файлов командой CSS ©import. В основном
файле внутри элемента <style> может находиться команда ©import,
которая указывает URI подключаемого файла. Эта команда являе-
тся командой языка CSS.
Например:
<style type =“text/cssM><]--
@import url(my_style.css);
--></style>
Подключение внешних файлов элементом HTML <link>. Другой
способ подключения внешнего файла заключается в использова-
нии элемента HTML <link>. Элемент является одиночным тегом.
Для связывания используются параметры:
rel указывает, что подключаемый файл является списком
стилей.
>
type указывает MIME-тип файла. Например: type^'text/css"
href значением параметра является URI подключаемого
файла.
Глава 20. Подключение таблиц стилей
185
20.6
!Наследование
Все вместе это может выглядеть следующим образом:
Clink type="text/css“ rel-'stylesheer href—"default.css">
Таблицы стилей поддерживают механизм наследования. Меха-
низм наследования подразумевает наличие объектов-родителей (пред-
ков) и объектов-детей (потомков), тем или иным образом порож-
денных первыми. Потомки при этом наследуют некоторые или
даже все свойства родителей. В случае с HTML внешние элементы
играют роль предков, а вложенные в них элементы играют роль по-
томков, и обычно наследуют свойства внешних, если эти свойства
не указаны явно. Это касается таких свойств форматирования, как
color, font и др.
Например, в конструкции
<div style= "font: 'Times New Roman' 12pt italic 400;“>
Действительно в отделе "Что случилось за день" нонпарелью было
напечатано:
<р>Попал лодлошадь<Ьг>
Вчера на площади Свердлова попал под лошадь извозчика № 8974 гр.
0. Бендер. Пострадавший отделался легким испугом.</р>
Это извозчикот делался легким испугом, а не я, - ворчливо заметило. Бендер.
</div>
।
элемент <р> будет напечатан таким же шрифтом, размером и цве-
том, что и текст, относящийся к <div>.
Использование наследования удобно для задания свойств всему
документу. В этом случае форматирование применяется к самому
внешнему элементу — <body>.
Для наглядного представления отношений «отцы и дети» удобно
использовать графы, своего рода генеалогическое дерево элементов.
Вернемся к примеру 6. Для него такое дерево, если начинать его с
элемента <body> (а именно с <body> начинают наследоваться свой-
ства), будет иметь вид, показанный на рис. 3.2, что прекрасно иллю-
стрирует соотношение между элементами предками и потомками.
Проведем теперь небольшой эксперимент. Поменяем цвет у элемен-
та <о1> (код выделен полужирным шрифтом).
186
Часть 3. CSS
Рис. 3.2. Механизм наследования стиля <body>
Пример 18.
<html>
<head>
<title>CnncKH</title>
<style ><!--
ol{font-size:24pt; font-style: italic; }
- -></style>
</head>
Cbody > »
Какие там васюкинцы! Васюкинцы денег платить не будут...<br>
Сотни тысяч людей, богато обеспеченных людей, будут стремиться
в Васюки.
<ul>
<Н>Следовательно, НКПС построит железнодорожную
магистраль. Это - раз.
<П>Два - это гостиницы и небоскребы для размещения гостей.
. <и>Три - поднятие сельского хозяйства в радиусе на тысячи
километров...
<ol>
<li value="4"> Дворец, в котором будет происходить турнир, -
четыре.
<П>Пять - постройка гаражей для гостевого автотранспорта.
</ol>
<К>Для передачи всему миру сенсационных результатов турнира
придется построить сверхмощную радиостанцию. Это - в-шестых.
</ц|>
</body>
</html>
При просмотре этой страницы легко убедиться, что сразу две
строки написаны курсивом и более крупно (рис. 3.3). Произошло
это потому, что у элемента <о1> было изменено свойство font-size на
24ptn свойство font-style на italic— соответственно, поменялись такие
Глава 20. Подключение таблиц стилей
187
- Какие там васюкинцы;
Сотни тысяч людей, бог
*1 Списки - Microsoft Internet Explorer
|;' Фаил Правка Вид Избранное; Сервис Справка
В асюки.
• Следовательно,Н
Это - раз.
• Два - этогостишг
• Три - поднятиесе
километров...
4. Дворец, в к<
5. Пять - постр
• Для передачивсег
придется построй
@ Готово
- Какие тамвасюкинцы! Васюкинцы денег платить не
Сотни тысяч людей, богато обеспеченныхлюдей, буду
Васюки.
Следовательно,НКПС построитжелезнодорожн
Эт;о - раз.
Два - это гостиницы и небоскребы дляразмещен
Три - поднятие сельского хозяйствав радиусе на
километров...
4. Дворец, в которой будет происходил
5. Пять - постройка гаражей для г ос ее
Дляпередачи всему миру сенсационных результ;
придется построить сверхмощную радиостанции
Рис. 3.3. Изменение вида страницы
в результате изменения одного из стилей
же свойства у двух элементов-потомков <li>. Элементы <li>, поро-
жденные <ul>, имеют свойства, заданные по умолчанию.
Теперь перепишем начало примера 1 8 следующим образом:
<style ><!—
ol{font-size: 24pt; font-style: italic;}
body{ font:i2pt arial;}
Добавленное правило касается элемента <body>. Однако все
вложенные элементы унаследуют его. В этом случае весь текст ме-
няет свой размер на 12 pt, унаследовав его от <body>. Меняется так-
же и его гарнитура (Arial). Только два все тех же элемента <li> со-
хранили размер и курсив (рис. 3.4). Это произошло потому, что их
непосредственный предок <о1> продолжает сохранять свойство text-
decoration неизменным. Если бы в <о1> был явно задан цвет шрифта
и его гарнитура, то и они не претерпели бы изменения ни в <о1>,
ни в его наследниках <li>.
В данном случае произошло столкновение противоречащих друг
другу инструкций из разных мест. Такой конфликт стилей, прихо-
дящих из разных каскадов, является типичным и разрешается при
помощи правила приоритетов. Звучит оно примерно так: «своя ру-
башка ближе к телу», т.е. из всех стилей выбирается тот, который
188
Часть 3. CSS
Списки - Microsoft Internet Explorer
ЗРаЙл Правка "Избранное Сервис ^правка '* j . > , ‘А, ]j|
- Какие там васюкинцы! Васюкинцы денег платить не будут...
Сотни тысяч людей, богато обеспеченных людей, будут стремиться в
• Следовательно, НКПС построит железнодорожную магистраль.
• Два - это гостиницы и небоскребы для размещения гостей.
• Три - поднятие сельского хозяйства в радиусе на тысячи киломе
4. Дворец, в котором будет п}
турнир,- четыре.
5. Пять -постройка гаражей \
гостевого автотранспорт
• Для передачи всему миру сенсационных результатов турнирап^
J^Jotobo"'Н-; :'= г компьютер: = д
Рис. 3.4. Изменение стиля <body>
ближе расположен к элементу. В нашем случае элемент <о!> «не за-
хотел» наследовать от предков размер и начертание, присланные
сверху. Если выстроить стили по рангу по мере удаления, то полу-
чится такая иерархия:
Встроенные
I —
Глобальные
1 ----------
Внешние
1 —
Наследуемые
I —
Заданные по умолчанию
Если ОДНО и то же свойство у элемента задается через атрибут и
стиль, то приоритет принадлежит стилю. Например, в следующем
«соревновании»:
<font С010Г=“гесГ Style="color:navy“>
«победит» синий цвет моря (navy).
Глава 20. Подключение таблиц стилей
189
Отдельно надо сказать и о том, что если нет указаний, то ис-
пользуются стили, задаваемые браузером по умолчанию. Пользова-
тель может установить свои стили, в соответствии со своими вкуса-
ми, пользуясь доступными ему настройками браузера. И, наконец,
разработчик Web-страницы, руководствуясь собственными поня-
тиями о дизайне, часто не остается в стороне от этого процесса.
Обычно порядок использования стилей имеет приоритет в том по-
рядке, в котором они перечислены (разработчик, пользователь,
браузер по умолчанию), причем стилям разработчика принадлежит
наивысший приоритет.
Ряд свойств, такие как background, не наследуется. Для этого
есть свои причины. Во-первых, отсутствие фона ускоряет загрузку
документов. Во-вторых, если бы рисунок фона наследовался, то каж-
дый последующий элемент при наложении мог бы сбивать рисунок
основного фона, так как фон элемента позиционируется относи-
тельно другой точки. О наследовании конкретного свойства надо
консультироваться в его описании (см. приложение 6).
Свойства каскадных
таблиц стилей
Глава 21
Далее начинается рассмотрение конкретных свойств форматиро-
вания. При описании свойств будут использоваться для сокращения
некоторые обозначения. Перечисление [ top I center I bottom ] подразу-
мевает, что допустим какой-то один выбор из перечисленных зна-
чений. Комбинация ключевых слов [ top I center I bottom ] II [ left I center
I right /подразумевает, что допустимо одно из значений первого спи-
ска [ top I center I bottom ] и/или одно из значений второго списка
[ left I center I right ]. Так, предложение "background-position может прини-
мать значения [ top I center I bottom ] II [ left I center I right ]", следует по-
нимать, что допустимы правила {background-position: center}, и {background-
position: top center}, и {background-position: bottom right}, И др. Порядок записи
значений после двоеточия не важен, т.е. {background-position: top center }
и {background-position: center top } дадут одинаковый результат.
Запись %color% означает, что свойство может принимать любое
из значений, задающих цвет (см. ниже).
2*1 __________________________
Управление цветом и фоном
Цвет элемента (цвет переднего плана) задается свойством color.
Значения свойства, обозначающего цвет, могут задаваться в не-
скольких системах:
♦ в системе RGB при помощи шестнадцатеричных чисел.
Например:
<a>{co/or #AAFF55} или то же самое в сокращенном варианте
<a>{color: #AF5}. Регистр значения не имеет. В HTML сокращенный
вариант не поддерживается;
Глава 21. Свойства каскадных таблиц стилей
191
» в системе RGB при помощи целых десятичных чисел, ко-
торые могут изменяться от 0 до 255.
Например:
<td>{COlor rgb(0,33,255)}
* в системе RGB, когда цветовые составляющие задаются в про-
центах.
Например:
<h2>{color: rgb(100%,70%,20%)}
» при помощи ключевых слов (см. приложение 3).
Например:
<div>{ color: aquamarine}
Кроме того, браузер может получать и использовать цвета, та-
кие же, как использует система для задания заголовков окон, цвета
окон, цвета фона рабочего стола и других элементов (см. приложе-
ние 7).
Фон. Для работы с фоном предназначено целое семейство атри-
бутов:
background-attachment может принимать значения [ scroll I fixed]. В первом случае фон не прокручивает- ся с текстом или другим содержимым синхронно. Имеется у всех элементов. Не наследуется.
background-color задает цвет сплошного фона. Может принимать значение %color% и допол- нительное значение transparent (обозна- чает, что фон элемента является про- зрачным). Имеется у всех элементов. Не наследуется.
background-image задает URI фонового . рисунка. По умолчанию принимает значение попе (нет). Имеется у всех элементов. Не наследуется.
background-position задает положение фоновой картинки относительно левого верхнего угла блока.
192
Часть 3. CSS
Значение задается:
» в процентах.
Например:
[background-position:50% о%} — сместит изображение по центру
вверх.
* различных единицах длины.
Например,
{background-position:2cm 1ст}
* комбинацией ключевых слов [ top I center I bottom ] II [ left I
center I right ].
Например:
{background-position: top center} или {background-position: center top}
означает то же, что {background-position: 50% o%}
background-repeat задает повторяемость фоновой кар- тинки. Может принимать значения [ repeat 1 repeat-x 1 repeat-y 1 no-repeat р
repeat повторяет картинку по горизонтали и вертикали,
repeat-x повторяет картинку только по гори- зонтали,
repeat-y повторяет картинку только по верти- кали,
no-repeat повтор не применяется.
Все описанные свойства имеют родовое имя background, кото-
рое может использоваться для сокращения записи и задания всех
свойств фона. Например, будут эквивалентны выражения:
div {background: uri(snow_biue.g't) repeat-x fixed;}',
div {background-image: uri(snow_blue.gif); background-repeat: repeat-x;
background-attachment: fixed;}
Глава 2f1* Свойства каскадных таблиц стилей
193
21.2 ,
Шрифты
Стили позволяют эффективно управлятв шрифтами, задавая и мо-
дифицируя существующие или зафужая по Сети уникальные. Для
этого исполвзуются следующие свойства:
font-family задает список шрифтов (в порядке уменвшения при- оритета), которвте должны исполвзоватвся для ото- бражения элемента. Исполвзуется первый шрифт в списке. Если он не найден, браузер пвггается най- ти второй и т.д. Названия шрифтов, состоящих бо- лее чем из одного слова, следует заключать в кавыч- ки. После перечисления конкретных шрифтов может быть указано описание их семейства. Например: Sty!e="font: ‘Times New Homan’, ‘Anal’, ’Verdana’ helvetica 12pt italic 400;” Имеется у всех элементов. Наследуется вложенными элементами. Например: div {font-family "Times New Roman", Newton}
font-style задает стиль написания шрифта — прямой (обыч- ный), курсив и косой (сильно наклоненный). Соот- ветственно, может принимать одно из трех значений: normal обычный, italic курсив, oblique косой (сильно наклонен). Например: em { font-style: oblique } Имеется у всех элементов. Наследуется вложен- ными элементами.
7 Зак. 1627
194
Часть 3. CSS
font-variant задает регистр шрифта. Принимает два значения:
normal
нормальный,
small-caps
малые заглавные.
Например:
текст написан ПРОПИСНЫМИ МАЛЫМИ БУКВАМИ и
ОБЫЧНЫМИ ПРОПИСНЫМИ.
Если специального модифицированного шрифта
нет, то браузер генерирует прописные буквы, умень-
шая их в масштабе.
Имеется у всех элементов. Наследуется вложен-
ными элементами.
font-weight устанавливает толщину шрифта. Может принимать
значения [ normal I bold I bolder I lighter p.
normal
bold
нормальный,
жирный,
bolder
жирнее,
lighter
светлее.
Толщина изменяется в условных числовых значениях от 100 до
900 через 100. При этом значение normal соответствует 400, а полу-
жирный bold — 700.
Значения lighter и bolder делают шрифт тоньше или жирнее по
сравнению с наследуемым или заданным по умолчанию, не выходя
за рамки численных значений от 100 до 900.
Имеется у всех элементов. Наследуется вложенными элементами.
font-stretch задает растянутость шрифта. Может принимать зна-
чения [ normal I wider I narrower I ultra-condensed I extra-con-
densed I condensed I semi-condensed I semi-expanded I expanded
I extra-expanded I ultra-expanded p
normal
нормальный (используется по умол-
чанию),
wider
более растянутый, по сравнению
с наследуемым или заданным по
умолчанию,
narrower
более сжатый,
Глава 21. Свойства каскадных таблиц стилей
195
С
ultra-condensed ультрасжатый,
extra-condensed экстрасжатый,
condensed сжатый,
semi-condensed полу сжатый,
semi-expanded и олурастянутый,
expanded растянутый,
extra-expanded экстрарастянутый,
ultra-expanded ультрарастянутый.
Имеется у всех элементов. Наследуется вложенными элементами.
font-size задает размер шрифта.
Принимает значения:
* при ПОМОЩИ ключевых СЛОВ [xx-smali Ix-smail I small I medium I large
I х-1агде I xx-iarge ], где medium — размер, установленный в качестве
стандартного в браузере.
Каждый следующий размер влево от medium в 1,2 раза мень-
ше предыдущего, а вправо, наоборот, больше. Например,
если стандартный размер составляет 12pt (см. и. 7.4), то эле-
мент strong{ fonf-s/ze: x-iarge} будет отображаться шрифтом в
12pt х 1,2 х 1,2 17pt;
» в абсолютных единицах;
* в относительных размерах. Возможные значения [ larger I smaller ].
Увеличивает или уменьшает шрифт на одну градацию (см. выше);
♦ любых относительных единицах длины;
* процентах по отношению к размеру шрифта родительского
элемента.
Имеется у всех элементов. Наследуется вложенными элементами.
@ font-face команда CSS, загружающая шрифты по Сети, иногда
еще называемых Web-шрифтами. В правиле указыва-
ются два свойства, первое задает семейство шрифтов.
Если указанный шрифт на компьютере пользователя
не обнаружен, то он загружается по Сети.
Например:
<style><! -
©font-face { font-family: "School Book", src: urt ( http: //server_name/
school.ttf) }
196
Часть 3. CSS
21.3 ,_________________________________________________________
! Форматирование текста
Свойства данной категории применяются для форматирования
текста (выравнивания, оформления, разрежения и т.д.). Позволяют
изменять расстояние между буквами и словами, задавать высоту
строк и отступ в красной строке.
О У ' ' • - г
text-align позволяет выравнивать текст и применяется к блоч-
ным элементам. Может принимать следующие зна-
чения:
left выравнивает текст по левому краю,
right по правому краю,
center по центру,
justify равномерно распределяет текст по
ширине всего блока (от правого до
левого края).
Значения наследуются из внешних блоков.
text-decoration задает оформление текста. Значения:
попе оформление отсутствует (используется
по умолчанию);
underline текст подчеркивается;
overllne оформляется чертой сверху;
line-through текст зачеркивается;
blink текст мигающий.
text-intend определяет отступ в красной строке (по умолчанию —
ноль). Задается в числовых значениях или в процен-
тах относительно ширины блока.
text-transform переключает регистр при воспроизведении текста.
Может принимать значения:
попе подразумевает, что регистр не пере-
ключается, буквы воспроизводятся так,
как заданы в документе (использует-
ся по умолчанию);
uppercase буквы преобразуются в прописные
(верхний регистр);
Глава 21. Свойства каскадных таблиц стилей
197
lowercase в строчные (нижний регистр);
•* capitalize начальные буквы слов преобразуют- ся в заглавные. Подобным образом часто оформляю англоязычные за- головки и термины.
letter-spacing v У word- spacing line-height white-space задает дополнительное расстояние между буквами. Для сжатия текста следует использовать отрицательг ные значения (рис. 3.5). : ч задает интервал между словами. Работает аналогич- но предыдущему элементу, но изменяет интервал не между буквами, а между словами. Воспринимается только NN 6. задает минимальную высоту строк. Применяется ко всем элементам. Может принимать значения: normal то же самое, что и 100% (использует- ся по умолчанию); числовое в этом случае высота строки вычис- значение ляется как произведение заданного числа и размера шрифта (отрица- тельные значения недопустимы); значение в единицах длины; значение в процентах относительно размера шрифта, задает режим работы с пробелами. Принимает зна- чения: normal незначащие пробелы игнорируются, строки переносятся автоматически; pre пробелы сохраняются «как есть»; за- дает режим, аналогичный задаваемо- му элементом HTML <рге>; nowrap запрещен перенос строк, лишние пробелы не отображаются. Воспри- нимается только NN 6.
Пример 19.
<html>
<head>
<Ш1е>Свойство CSS letter-spacing</title>
<style type="text/css”><!--
#bigger{letter-spacing: 0.5em}
#condense{letter-spacing:-0.05em}
-></style>
</head>
’ <body>
<р>этот текст имеет нормальное расстояние между буквами</р>
198
Часть 3. CSS
К____________-________________________________
S $ис. Избраниюе Сервис Справке
Воздействие свойства letter spacing на отображение текста - Microsoft Internet
этоттеКс г имеет нормальное расстояние между буквами
]
это текст с увеличенн
это текст с уменьшен ым интервалом
Рис. 3.5. Воздействие свойства letter-spacing на отображение текста
<р id=bigger>3TO текст с увеличенным интервалом</р>
<р id=condense>3To текст с уменьшенным интервапом</р>
</body>
</html>
ы м интервалом
21.4 и_____
“1
I Блоки
Особое значение и удобство стили приобретают при работе с блоч-
ными элементами. Для блочного элемента вводят следующие понятия.
Содержимое (контент), чаще всего текст, располагается в самом
внутреннем блоке и отделяется от границ блока отступами (pad-
ding). Далее следует граница (border), которая имеет свои размеры.
Наконец, за границей располагается поле (margin), которое являет-
ся самым внешним элементом блока. Поле прозрачное, поэтому
сквозь него просвечивает фон родительского элемента, на котором
расположен данный блок. Вместе эти части образуют блок форма-
тирования (рис. 3.6) Все блочные элементы HTML располагаются
в блоках форматирования.
Средства CSS позволяют гибко управлять размерами, располо-
жением и цветом блочных элементов.
Отступы регулируются следующими свойствами:
padding-top
padding left
padding-bottom
padding-right
задают размеры отступов соответст-
венно сверху, слева, снизу и справа.
Значение можно задавать в едини-
цах измерения длины и в процентах
от ширины блока. '
Например:
р {padding-top: ю%}
199
Глава 21. Свойства каскадных таблиц стилей
।
Контент
Отступ
Граница блока
Поле
Рис. 3.6. Блок форматирования
Возможно задание одного родового имени:
padding в этом случае описывает все отступы,
одинаковые со всех сторон. Имеется
у всех элементов и наследуется вло-
женными элементами.
Поля регулируются аналогично. Для этого используются свойства:
margin-top
margin-left
margin-bottom
margin-right
задают размеры полей соответственно свер-
ху, слева, снизу и справа. Значение можно
задавать в единицах длины и в процентах
от ширины блока.
। Например:
p{margin-top:50px; margin-bottom:ioem;}
абзац будет иметь поле сверху размером в
50 пикселей и снизу размером в 10 букв.
Возможно задание одного родового имени:
margin все поля одинаковой ширины.
Границы определяют свойством border.
border-top-color
border-left-color
border-bottom-color
border-right-color
border-color
задают цвет рамки для верхней, левой, ниж-
ней, правой или всех границ одновременно.
Значением являются единицы определения
цвета. Дополнительное значение — transparent
(прозрачный). Если цвет не указан но ука-
зан стиль границы (border-style), то исполь-
зуется цвет самого элемента.
200
Часть 3. CSS
border-top-style
border-left-style
border-bottom-style
border-righ t-style
border-style
border-top-width
border-left-width
border-bottom-width
border-right-width
border-width
задают ширину рамки для верхней, ле-
вой, нижней, правой или всех границ од-
новременно. Значением являются единицы
длины.
. Например:
р {border-top: юрх; border-left 1ет;}
Кроме того, могут быть использованы
следующие литералы:
thin тонкая рамка,
medium рамка средней толщины,
thick толстая рамка.
Абсолютные значения толщины рамки зависят от браузера.
border-spacing
border-top
border-left
border-bottom
border-right
border
height
width
применяется только к таблицам. Задает
расстояние между ячейками. Значение —
единицыдлины. В процентах не измеряет-
ся. Если задано одно значение, то расстоя-
ния по горизонтали и вертикали будут
одинаковыми. Если два, то первое значе-
ние устанавливает расстояние по горизон-
тали, второе — по вертикали.
эти обобщенные свойства задают все свой-
ства границ, соответственно, сверху, слева,
снизу, справа или всех полей, если они
одинаковые. Допустимо задание в процен-
тах от ширины блока.
задают высоту и ширину блока в едини-
цах длины или в процентах по отноше-
нию к внешнему родительскому элементу.
Е1о умолчанию имеют значение auto. Не
наследуются.
Глава 21. Свойства каскадных таблиц стилей 201
I---м ... ..........— ---
21.5 ,____________________________
! Позиционирование блоков
При отображении документа элементы HTML выводятся по-
следовательно друг за другом по мере их следования в тексте доку-
мента. Детальное расположение элементов определяется самим брау-
зером. Однако в CSS существуют и специализированные средства,
позволяющие располагать элементы в произвольном месте страницы.
К ним относится свойство position.
Оно может принимать следующие значения:
static статический способ позиционирования — подразуме-
вает естественный вывод элемента в общем потоке
всех элементов в соответствии с их иерархией и деле-
нием на блочные и встроенные. Напомним, что
встроенные элементы выводятся в строке друг за дру-
гом вдоль координаты х, пока не закончится строка,
осуществляя затем переход на следующую, а блоч-
ные — друг под другом вдоль координаты у. Статич-
ность в данном случае подразумевает неизменность
в потоке вывода. Используется по умолчанию;
relative относительное позиционирование подразумевает, что
элементы-потомки размещаются относительно роди-
тельского элемента, который может быть позициони-
рован как статически, так и абсолютно. Отсчет
ведется от левого верхнего угла родительского блока;
absolute абсолютно позиционированные элементы изымают-
ся из общего потока вывода и размещаются в ука-
занном месте на странице. Размещаемый элемент
может перекрывать другие. Отсчет ведется от левого
верхнего угла документа (элемента <body>). При про-
крутке всей страницы этот угол перемещается, а с
ним «уплывает» и абсолютно «привязанный» эле-
мент;
fixed используется как absolute. Разница в том, что элемент
«привязывается» к углу окна, а не элемента <body>,
которые совпадают лишь до начала прокрутки. Эле-
мент, «привязанный» как fixed, остается фиксирован-
ным на экране и не прокручивается.
202 ' Часть 3. CSS .. — —i
top задает расположение верхней границы блока. Окон- чательное расположение блока зависит от параметра position. Принимает значения: auto (используется по умолчанию), в про- центах по отношению к внешнему ро- дительскому блоку, численное значе- ние в единицах длины.
left задает расположение левой границы блока. Употреб- ляется совместно с top и принимает такие же значе- ния: auto (используется по умолчанию), в про- центах по отношению к внешнему ро- дительскому блоку, численное значе- ние в единицах длины.
clear указывает сторону блока, которая должна быть «чис- той», то есть не иметь смежных сторон с предыду- щим блоком. Принимает значения: поле предполагает обычное (последователь- ное) отображение элементов (исполь-
зуется по умолчанию), left левая сторона свободна, right правая сторона свободна, both обе стороны свободны.
float применяется к непозиционированным элементам в об- щем потоке для указания стороны объекта, с которой его должен обтекать текст. Принимает три значения: попе без обтекания, kft обтекание слева, right обтекание справа.
max-height задают соответственно максимальную высоту и ши-
max-widht рину блока. Принимают значения: поле (используется по умолчанию), в еди- ницах длины, в процентах по отно- шению к родительскому элементу.
min-height задают минимальную высоту и ширину блока. При-
min-width нимают значения: в единицах длины (по умолчанию — ноль), в процентах по отношению к родительскому элементу.
Глава 21. Свойства каскадных таблиц стилей
203
3 Познцй. м» нн« блоков - MicwoJt Internet Еttpfaet
Файл Правка Вид Избранное Сеовиг QnpaBi а
Командор Танцует Танго
т
.едстго»
В мэденькпч буфете иску» етвенных минеральных вод. на
вывеске btnfuporu были намалеваны синие сифоны
(ЛЛсли за белым столяком Lt и;.той и Паяпковский
УйОи-юмйчснаыв но кота т?м жевал трубочку, следя та
гем» ч»обы чрем не выдавился с противоположного
конца З'чг харч богов он . г сельтерской водой с
j 4 л е и ы и сиропом С «елее е се но ” * *
—
Курьер пил целебный кефир Перед МИМ стояли уже «лесть. ; «
пустых бутылочек. Из седьмой Панйковский озабоченно
вытряхивал в Стакан густую жидкость. Сегодня В конторе
новая письмоводительница платила жалованье по
ведомости, подписанной Бендером, и друзья наслаждались
.рохладой, шедшей от итальянских каменных плит буфета,
несгораемого шкафл-ледника, где хранилась мокрая
брынза.
;4£~| Готово
а5Мой компьютер
Рис. 3.7. Различные варианты позиционирования блоков
с раз-
На рис. 3.7 приведено форматирование блоков и текста
ными значениями свойств, перечисленных выше. Обратите внима-
ние на разный фон, размер текста, поля, границы, отступы и пози-
ционирование блоков.
21.6 .
| Визуализация
Визуальные эффекты позволяют скрывать отдельные блоки и
проявлять их в нужный момент.
Для их организации используется свойство visibility.
В переводе означает видимость. Может принимал ь значения:
visible
hidden
блок становится видимым (используется по умолча-
нию);
блок невидим, но зарезервированное под него место
отображается на странице;
204
Часть з. CSS
collapse блок невидим, и место под него не отображается.
Работает только е рядами и столбцами таблиц.
display^ служит аналогичным целям. Одно из свойств — попе.
Элемент с таким значением изымается из потока
отображения. Место под элемент на экране не ото-
бражается.
clip служит для обрезки блока и применяется к блочным
элементам. Принимает значения:
отсечение не производится (исполь-
зуется по умолчанию);
%shape% задает форму прямоугольника, кото-
рая служит шаблоном для обрезки.
Вызов формы по синтаксису совпа-
даете вызовом функции: сначала идет
имя, а затем в круглых скобках сле-
дуют параметры.
Например:
div{c//p; rect(10px, Юрх, 50рх; 12рх)}
При этом значения Юрх, Юрх, 50рх,
12рх определяют, соответственно, верх-
нюю, правую, нижнюю и левую грани-
цы отсечения относительно блока.
overflow используется, если размеры, зарезервированные при
помощи свойств или атрибутов под блок, и размеры
отображаемого блока не совпадают (рис. 3.9). При-
нимает значения:
visible для текстовых блоков увеличивает раз-
мер блока отображения, чтобы пол-
ностью отобразить текст; для изобра-
жений может как увеличивать, так и
уменьшать блок отображения, подго-
няя его под размер рисунка;
hidden обрезает элемент по размерам блока;
auto при необходимости добавляет поло-
сы прокрутки;
scroll устанавливает полосы прокрутки в лю-
бом случае.
Z-index при абсолютном и относительном позиционировании
элементы могут перекрываться. Причем по умолчанию
Глава 21. Свойства каскадных таблиц стилей
205
те элементы, которые встречаются в потоке позже, бу-
дут оказываться наверху, скрывая нижние. Эти элемен-
ты можно мысленно расположить вдоль оси z, перпен-
дикулярной экрану и Направленной в сторону наблю-
дателя-пользователя. Чем больше ^-координата элемента,
тем ближе он к наблюдателю. Изменить порядок выво-
да слоев можно при помощи указанного свойства, ко-
торое принимает целые значения.
Рис. 3.8. Использование свойства overflow при визуализации.
217 ____________________________________________
Свойства
для форматирования таблиц,
списков и других элементов
Некоторые свойства имеют только табличные элементы.
caption-side указывает расположение заголовка таблицы. Это свой-
ство имеет только элемент HTML <caption>. Может
принимать четыре значения:
206
Часть 3. CSS
top bottom заголовок располагается над таблицей, под таблицей,
left слева от таблицы,
right справа от таблицы.
empty-cells указывает, отображать Или нет пустые ячейки. Мо-
жет принимать значений:
show показывать,
hide спрятать.
Наследуется в элементах таблицы.
table-layout используется элементами таблицы. Принимает зна-
чения:
auto ширина таблицы и ее ячеек вычисля- ется браузером автоматически,
fixed ширина таблицы фиксирована. Непо- местившиеся данные обрезаются или выходят за рамки таблицы, если не за- дано свойство overflow.
vertical-align это свойство имеют ячейки таблицы и встроенные эле-
менты. Указывает выравнивание элемента относитель-
но задающей строки. Принимает значения:
baseline выравнивание по основной линии блока,
sub как нижний индекс,
super top middle как верхний индекс, по верхнему краю (в таблицах), по середине,
bottom по нижнему краю (в таблицах),
числовое значение в единицах длины,
в процентах относительно высоты строки.
content используется с псевдоэлементами для генерации кон-
тента.
cursor устанавливает вид указателя мыши. Свойство может
иметь два значения. Первое указывает URI файла, в
котором содержится изображение курсора. Задается
в виде url("mouse , ico"). Второе указывает событие,
при котором возникает данный курсор. Допустимые
значения: [auto I crosshair I default!pointer I move I e-resize I
Глава 21. Свойства каскадных таблиц стилей
I---- =
207
ne-res,ze 1 nw-reslze 1 n-resize 1 se-resize 1 sw-re$ize 1 s-resize 1 w- resize 1 text 1 wait 1 help].
Специфические свойства имеют стили для элементов списков.
list-style-posi- tion применяется для элементов списка, чтобы указатв, с какой сторонв! выравнивать элементы. Значения: inside с внутренней стороны, outside с внешней стороны.
list-style-type задает тип маркера для элементов списка. Имеет бо- лее широкие возможности, чем аналогичные парамет- ры HTML-элементов. Может принимать значения: попе нумерация отсутствует; disc точка; circle окружность; square квадрат; decimal десятичные числа; decimal-leading-zero десятичные числа с добавлением нуля в начале (NN 6); lower-roman малые латинские цифры; upper-roman большие латинские цифры; lower-alpha нумерация прописными буквами; upper-alpha нумерация строчными буквами; lower-latin, в NN 6 допустима буквенная нуме- upper-latln, рация на различных языках (иврите, hebrew, армянском) и с помощью иерогли- armenlan, фов. georgian, cjk-ldeographlc, hiragana, katakana,
* hlragana-lroha, katakana-iroha
list-style-image позволяет разработчику задавать собственную кар- тинку-маркер. Допустимые значения: попе (используется по умолчанию) urf задает адрес файла-картинки.
208
Часть 3. CSS
Например:
list-style
ul { list-style-image: url(heaitglf) }
обобщенный способ задания свойств элементов спи-
ска. Значениями являются перечисленнвте ввипе ве-
личин bi для элементов списков.
Фильтры
Глава 22
Браузеры предоставляют богатые возможности для художест-
венного оформления электроннвтх документов с исполвзованием
филвтров. Филвтр по определенному закону преобразует изображе-
ние или текст и толвко затем отображает его. При помощи филвт-
ров реализовано достаточно много операций, хорошо знакомых
тем, кто имел дело с графическими редакторами. Это и смазыва-
ние, и тенв, и зеркалвное отображение, и ряд других. Реализованы
они, например, в IE 4 и более hobbix его версиях. Подобные фильт-
pBi можно встретитв и в ряде других известных продуктов Microsoft,
например, Power Point. Фильтры могут быть статическими и дина-
мическими. Первые преобразуют элемент и просто показывают
его. Вторые создают анимационную картинку, показывая все про-
межуточные этапы преобразования.
Синтаксис задания фильтров сходен с заданием свойств CSS,
только вместо свойства указывается функция-метод преобразования.
Свойства задаются в атрибуте style или в элементе HTML <style>.
Функции можно задавать последовательно друг за другом. Например:
Style—‘filter: имя_функции_1( параметры) имя_функции_2(пара метры)"
22.1 ,_________________________________
I Фильтр alpha
Задает уровень прозрачности элемента. Имеет следующие пара-
метры:
opacity задает уровень прозрачности в процентах. Нулевое
значение означает, что элемент полностью прозрач-
ный, фон проступает сквозь изображение, которое
при этом пропадает. При других уровнях — частич-
но, при 100% — блок (рисунок или текст) непрозра-
чен и ничем не отличается от блока, отображаемого
без фильтра ( см. рис. 3.9).
210
Часть 3. CSS
---1
Старый замок
^Готово- . f, i :j§| Мойконлькггер Г
Рис. 3.9. Применение фильтра alpha
Кроме того, метод alpha (...) позволяет получать ряд эффектов с
изменением прозрачности различных частей блока.
finishOpadty конечный уровень прозрачности. Используется при
градиентных заливках, создающих плавное измене-
ние прозрачности от уровня opacity до finishOpadty, при-
чем первый может быть как больше, так и меньше
второго.
style задает форму градиентной заливки и принимает
значения:
о градиентная заливка отсутствует,
1 изменение прозрачности вдоль ли-
нии,
2 прозрачность меняется от центра, где
она принимает значение opacity, до
эллипса, вписанного в прямоуголь-
ник блока (текста или изображения),
на границе и за пределами которого
она имеет значение finishOpadty,
Глава 22. Фильтры
211
з прозрачность меняется от центра, где
она принимает значение opacity, до
границ блока (текста или изображе-
ния), где она имеет значение finish-
Opacity.
При style=i допустим еще ряд параметров: startx,
startY, ftnishY, finishY. Они задают координаты точек ли-
нии, вдоль которой прозрачность изменяется от
уровня opacity ДО finishopacity.
Пример 20.
1
2 .
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html public"-//w3c//dtd html 4.01 transitional//en“>
<html>
<head>
<title>Filters</title>
<style type="text/css"><!--
#my_alpha{filte r: alpha (opacity=,50')}
--></style>
</head>
<body style="background:#fff">
<div>
<img style="filter: alpha(opacity=l10,)n src="mir.jpg" height^'SSO1
widtfi=*233">
cimg id=my_alpha src="mir.jpg№ height="350" width="233">
cimg style="filter: alpha(opacity='100')" src=l,mir.jpg“ height="350"
width="233">
</div>
<div style="position:absolute; left: 22%; top: 45%; font: 30pt ">
Старый замок </div>
</body>
</html>
В строках 1J и 12 фильтры подключаются через встроенный (11)
и глобальный (12) стили. В строке 15 применяется абсолютное пози-
ционирование блока, что позволяет наложить текст на изображение.
При изменении размеров окна надпись сместится пропорционально
изменению размеров, а изображения сохранят свои размеры.
И еще один пример, связанный с градиентной заливкой (рис. 3.10).
1
2
3
<!doctype html public"-//w3c//dtd html 4.01 transitional//en">
<html>
chead>
4
5
6
7
< title > Fi Ite rs</title >
</head>
<body style=,,background:#fff">
' <div>
212
Часть 3. CSS
- —. —Т)
Рис. 3.10. Использование градиентной заливки
8 <img style="filter: alpha(opacity^'0’, finishOpacity=‘100', style='r,
starty='O', finishy=,5O,)“ src="rect.jpg“ height="350" width= '233">
9 <img sfyle="filter: alpha(opacity='100', finishOpacity^lO', style='2,)“
src=,,rectjpg“ height="350" width="233">
10 cimg style="filter: alpha(opacity='100', style^S')" src="rect.jpg"
|| height="350" width=,,233"></div>
11 <div style="position: absolute; left:7%; top:70%; 1оп1:18рГ>Картина неиз-
|| вестного художника начала III тысячелетия... </div>
12 </body> . , .
13| </html>
22.2 w___________
I Фильтр blur
Задает «смазывание» изображения или текста, как на снимке,
сделанном во время движения (рис. 3.11). Применяется к абсолют-
но позиционированным текстовым блокам и изображениям.
Синтаксис:
filter: blur(add^r, direction="90‘,l strength="5")
Используется с параметрами:
add принимает значение 1 либо 0. В первом случае ис-
ходное изображение добавляется в результат преоб-
разования, во втором — нет. В результате этого
исходное изображение лучше видно на размытом
фоне в первом случае, чем во втором.
Глава 22. Фильтры
213
Рис. 3.11. Применение фильтра blur
direction задает направление размытия в градусах от 0 до 360,
при этом поворот на 90 градусов эквивалентен по-
вороту на 270 градусов. Эти параметры задают раз-
ное «направление движения». Можно использовать
ключевые слова:
lop равносильно 0 градусов,
top right равносильно повороту на 45 граду- сов,
right на bottom right bottom 90 градусов, на 135 градусов, на 180 градусов,
bottom left default left top left на 225 градусов, на 270 градусов, на 315 градусов.
strength задает величину смещения.
22.3 ,______________________________________
I Фильтр chroma
Позволяет сделать одноцветные участки прозрачными.
Синтаксис:
filter: chroma(co/or-woooo")
214
Часть 3. CSS
Рис. 3.12. Применение фильтра chroma
Единственным параметром является цвет, который и заменяет-
ся на прозрачный (transparent). На рис. 3.12 показано применение
филвтра chroma: черный цвет фона заменен прозрачнвш.
22.4 и
I Фильтр dropshadow
Филвтр рисует контур объекта, смещенный в заданном направ-
лении на заданное расстояние. Это создает эффект тени, отбрасы-
ваемой объектом (рис. 3.13).
Синтаксис:
filter: dropShadow(co/or='^999999",offX="4",offY=“4", positive^T1)
Исполъзуются параметры:
color задает цвет тени,
offx
задает смещение тени по оси х,
Глава 22. Фильтры
215
3 Фильтр dtopshadow - Microsoft Internet Explorer
I файл Правка fiw ; Избранное Сгрсис ^правка
[^ Готово . -.....................‘J- ‘ I".'’'"’_ £^ м'о^ком^\ьк]тео
Рис. 3.13. Применение фильтра dropshadow
offy задает смещение тени по оси у,
positive булев параметр, равен либо 0 (тень от прозрачных
пикселей не создается), либо 1 (контур тени созда-
ется всеми пикселями объекта).
22.5 ,___________________________________
I Фильтр glow
Создает светящийся ореол вокруг границ текста
Синтаксис:
filter: glow( color="#ooooffK, strength=4)
Использует параметры:
color
strength
задает цвет сияния,
задает толщину ореола.
216 ЧастьЗ. CSS
— . ................ —. ............:---1
22.6 ,_________________________________________________________
| Фильтры flipv и fliph
Фильтр flipv переворачивает объект вертикально, а фильтр fliph —
горизонтально. Параметров они не имеют.
Синтаксис:
filter: f/ipv
22.7 ,_________________________________________________________
I Фильтр gray
Трансформирует цветовую палитру элемента в серые оттенки.
Параметров не имеет.
Синтаксис:
filter: gray
22.8 , ________________________________________________________
] Фильтр invert
Трансформирует цветовую палитру элемента во взаимодопол-
няющую (цветовая инверсия). Параметров не имеет.
Синтаксис:
filter: invert
22.9 ,________________________________________________________
I Фильтр mask
«Перекрашивает» прозрачные пиксели объекта в задаваемый
цвет и создает маску из непрозрачных пикселей.
. Синтаксис:
filter: rnask(color="#ooooffu)
Использует параметр color для задания цвета.
Глава 22. Фильтры
217
ИК1ЕЗ
3 Фильтр mask - Microsoft Internet Explorer
I Ф 1ил Цравка Избранное Сервис Справка
WWMAVMWAWMKVMt.я -.WVWJWWW*« - —
Рис. 3.14. Применение фильтра mask
На рис. 3.14 прозрачные пиксели вокруг изображения (из под
них виден белый фон на левой части рисунка), перекрашиваются в
синий фон (правая часть), а остальное изображение преобразуется,
наоборот, в прозрачное.
22.10 ,_______________
I Фильтр shadow
Служит для создания тени. В отличие от фильтра dropshadowза-
дает объемную тень (рис. 3.15). Имеет два параметра — для задания
цвета и направления тени.
Синтаксис:
filter: shadow(co/or="#333333", direct ion="135")
218
Часть 3. CSS
------1
Файл 11раькб ёий Избранное Сервис Справка
J Фильтр shadow - Microsoft Internet Explorer
Рис. 3.15. Применение фильтра shadow
22.11 и_____________
I Фильтр wave
Деформирует блок сложным образом, повторяя волнообразную
линию (рис. 3.16).
Синтаксис:
filter: wave(fre<7=8, add=o, HghtStrength=i, phase=25, strength=4)
Использует параметры:
add принимает значение 0 (false) либо 1 (true), каки в дру- гих фильтрах, включает или нет исходное изображе- ние в конечный результат.
freq задает частоту волны, другими словами — число максимумов.
phase задает начальную фазу волны в процентах относи- тельно синусоиды с начальной фазой равной нулю. Значение 100% соответствует изменению начальной фазы на 2 л.
Глава 22. Фильтры
219
Рис. 3.16. Применение фильтра wave
JavaScript
222 Часть 4. JavaScript
— .. —.......................... .. --------1
Популярный термин «интерактивность» означает «взаимодейст-
вие». В данном случае речь идет о взаимодействии пользователя с
электронной публикацией, которая позволяет превратить Web-
страницу, в отличие от ее «бумажной сестры», в андерсеновскую
«книжку с волшебными картинками». Интерактивность нужна как
для решения эстетических, так и функциональных проблем. Гра-
мотно изготовленный сайт из безжизненного набора текстов пре-
вращается в smart-ресурс, наделенный «элементами разума», удоб-
ный для пользователя и полезный для владельца.
С интерактивностью мы уже встречались, поскольку именно
она сделала Web столь популярной и дала жизнь языку HTML. В дан-
ном случае речь идет о гиперссылках — важнейшей особенности
Web-страниц. Щелчок мышью по гиперссылке — и загружается вы-
бранная вами страница. Ввиду большой важности ссылки проявляют
себя еще до щелчка по ним. Подведите указатель мыши к гипер-
ссылке, и она поменяет цвет, да и указатель в форме стрелки примет
вид руки.
Однако набор интерактивных элементов весьма ограничен, и в це-
лом страницы, которые можно разработать при помощи классичес-
кого HTML, остаются статичными.
Некоторое разнообразие в статичный «пейзаж» вносят элементы
<form>, которые позволяют организовывать простейшие интерфей-
сы для ввода данных в электронный документ. Однако введенные
данные далее надо обрабатывать.
Существует несколько различных технологий для организации
обработки данных. Одна из них — CGI-программы (Common
Gateway Interface). Они обрабатывают на сервере информацию, ко-
торая поступает с различных форм, заполняемых пользователем.
Эта технология активно используется в настоящее время. Однако
отсылка запроса на сервер и получение ответа увеличивают загруз-
ку каналов и сервера. Для пользователя это прежде всего потеря
времени, порой немалого, а при коммутируемом доступе, соответ-
ственно, и денег.
Поэтому удобно было бы иметь возможность не только запол-
нять формы, но и организовывать выполнение некоторых приклад-
ных программ прямо на локальном компьютере пользователя, не
«перегоняя» информацию на сервер и обратно несколько раз. К та-
ким функциям относятся, например, организация калькулятора для
вычисления суммы всех покупок в интернет-магазине или провер-
ка правильности вводимой в многочисленные разнородные поля ин-
формации.
Разработчики все чаще стараются придать своим страницам ди-
намику. Проявляется это не только в подключении анимации. Как
раз наоборот, подобными ресурсоемкими эффектами в настоящее
223
Часть 4. JavaScript
I
время стараются не злоупотреблять. Динамика должна проявляться
в адаптивных способностях Web-страницы, которые позволяют пре-
доставлять клиенту, посещающему сайт, максимум удобств. Среди та-
ких способностей можно отметить индивидуализацию содержания
страницы в соответствии с пожеланиями клиента или в зависимости
от других условий, например, времени суток. Типичный пример -
организация железнодорожной справочной системы, действующей
в реальном времени. С 6.00 до 15.00 она выдает расписание утрен-
них электричек, с 15.00 до 24.00 — вечерних, а в остальное время
просто «желает всем спокойной ночи». Хорошо сделанное распи-
сание при этом будет выдавать не весь список поездов, а только
тех, которые следуют в указанном пользователем направлении.
Обычно это достигается динамической версткой страниц, как ино-
гда говорят, формированием страницы «на лету». Суть такой верстки
в том, что код HTML существует не в файле, как мы привыкли, а ге-
нерируется программой. Чаще всего эту работу выполняет сервер
перед отсылкой страницы, которая формируется по запросу поль-
зователя. Но возможности браузера позволяют формировать ее и на
стороне клиента во время загрузки.
Среди разнообразных возможностей интерактивных страниц ча-
сто используется возможность динамически, по требованию поль-
зователя, выдавать дополнительную информацию, не затрачивая
времени на перезагрузку страницы. Другими словами, необходимо
изменить часть страницы без перезагрузки (например, выпадающее
меню второго уровня) или часть отображаемого документа, не за-
трагивающую основное содержимое (например, идущие на Web-
странице часы).
Динамика может проявляться и в новой организации элементов
мультипликации, когда силами браузера меняется их позициони-
рование, размеры элементов и т.п. Этот метод даже эффективнее,
чем загрузка анимированных GIF-файлов. Такие визуальные эф-
фекты, как «перетаскивание» товаров мышью в корзину для отбора
в интернет-магазине, весьма удобные и впечатляющие. В класси-
ческом HTML все эти возможности отсутствуют, поскольку загру-
женную страницу изменить уже нельзя.
JavaScript. Для организации вышеописанных и многих других
действий могут использоваться языки сценариев, такие как JavaScript
(разработка Netscape), JScript, Visual Basic Script (последние два про-
двигаются Microsoft), Perl, Python и др. JavaScript с языками Java и
C++ роднит общий синтаксис, но это самостоятельный язык, а не
урезанная версия Java. JScript, созданный Microsoft, является реали-
зацией стандарта ЕСМА 262 и в основном совпадает с JavaScript.
Программа-сценарий, или скрипт, написанная на JavaScript, не
является исполняемой скомпилированной программой, которые
224
Часть 4. JavaScript
разрабатываются на полноценных языках, таких как Java, C++,
Delphi и др. Это не исполняемый код, а только текст программы, ко-
торую должен обработать интерпретатор-браузер или интерпрета-
тор-сервер. Программы, разрабатываемые для сервера и для клиен-
та-браузера, имеют несколько разную структуру. Мы остановимся
только на тех аспектах, которые имеют отношение к браузеру.
Программы, выполняемые интерпретаторами, более требовательны
к ресурсам. Встроенные в браузер интерпретаторы (средства для об-
работки текстов программ) могут занимать объем в четыре-пять раз
больше, чем браузеры-просмотрщики статических страниц. Переда-
ча с сервера только текста программы, встроенного в Web-страницу,
уменьшает трафик. Однако если программа достаточно емкая, то вре-
мя ее исполнения будет значительным, поскольку скорость одновре-
менной компиляции и отображения браузером в режиме строка за
строкой невелика.
Таким образом, программы в виде скриптов не так эффектив-
ны, как исполняемые приложения. Скомпилированным програм-
мам разумно отдавать большие вычислительные задачи, обработку
изображений и т.п. В то же время наилучшая область использова-
ния скриптов — это обеспечение взаимодействия между различны-
ми составляющими страницы: HTML, языком стилей и исполняе-
мыми скомпилированными компонентами.
Современный HTML в сочетании с языком таблиц стилей CSS2
и языком сценариев JavaScript способен сделать интерактивным
любой элемент на странице и организовать огромное количество
эффектов и функций. Этот совместный код иначе называют Дина-
мическим (Dynamic) HTML. Он действует на стороне клиента, то
есть обрабатывается браузером, который представляет и изменяет
страницы в своем окне.
Формирование элементов HTML, доступ к их атрибутам, орга-
низация новых элементов, изменение значений свойств в таблицах
стилей — эти и другие действия могут быть организованы при по-
мощи разных технологий, но принципы взаимодействия останутся
теми же, даже если браузеры будут использовать другие стили и язы-
ки сценариев.
Термин «Динамический HTML» еще не совсем устоялся. Одни
понимают под ним всю совокупность интерактивных эффектов,
примеры которых были приведены выше, включая динамическую
генерацию страниц. Другие — только ту часть, которая позволяет
организовывать программируемый доступ к элементам HTML, что
позволяет менять оформление и контент на загруженной страни-
це. Это не исключает возможности исчезновения или «проявле-
ния» элементов, изменения их положения, прекращения обраще-
ния к ним и т.п.
Часть 4. JavaScript
I ' —
225
Объектная модель документа (DOM). К трем вышеперечислен-
ным компонентам (HTML, CSS и JavaScript) обычно добавляют
еще один, который служит каркасом, объединяющим их в одно це-
лое. На языке JavaScript в общем могут решаться разные задачи.
Когда говорят про Dynamic HTML, то подразумевают прежде всего
его часть, призванную обеспечить программный доступ к различ-
ным элементам Web-страницы и управление ими. Для этих целей
разработана специализированная библиотека, которая встраивает-
ся в интерпретаторы современных браузеров. Она называется объект-
ной моделью документа (DOM — Document Object Model). Пони-
мание сути этой модели требует привлечения новых концепций из
объектно-ориентированного программирования, основным поня-
тием которого является объект.
DOM представляет собой модель, позволяющую представить
HTML-документ как иерархический набор стандартных объектов.
Работа с такими объектами позволяет гораздо эффективнее управ-
лять документом, его контентом, форматированием, отображением
и т.д. При анализе HTML-кода браузер, поддерживающий DOM,
представляет Web-страницу как структурное дерево элементов HTML,
каждый из которых является объектом-узлом. В иерархии объектов
страницы такие объекты легко создавать, перемещать, изменять и уда-
лять программным путем.
Конкретная реализация DOM зависит от браузера и достаточно
сильно различается у разных компаний и в разных версиях.
Хотя для дальнейшего рассмотрения за основу взят браузер Micro-
soft Internet Explorer, мы постараемся останавливаться только на уни-
версальном ядре этой модели, общем для различных браузеров.
8 Зак. 1627
События в HTML
Глава 23
Интерактивное взаимодействие со страницей, как и все совре-
менное программирование, основано прежде всего на обработке
собвттий. Собвттия в программировании — это реальные физические
действия, такие как перемещение мвипи, нажатие клавиши, или
виртуальные, которые происходят, например, в процессе ввшолне-
ния программы — открытие окна, его активация и т.п. Объединяет
их то, что после наступления собвттия между программой и опера-
ционной системой передаются сообщения. Получив такое сообще-
ние, программа, которой оно предназначалось, вызывает некоторую
функцию-обработчик события. Именно об этих событиях и орга-
низации их обработки различными методами и пойдет речь далее.
Сам HTML не предусматривает обработку событий, если не
считать переходы по ссылкам и отправку форм. Но он предусмат-
ривает механизм связи события с обработчиком, реализованном на
каком-либо языке. Технология обработки событий в HTML не отли-
чается большой гибкостью и возможностями по сравнению с други-
ми развитыми языками, но зато организация обработки событий
достаточно проста.
Практически каждый элемент имеет набор атрибутов (мы будем
называть их атрибутами событий), начинающихся префиксом on.
Они были перечислены при описании элементов. Вот те, которые
встречались наиболее часто:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmouseout,
onmousemove, onkeypress, onkeydown, onkeyup, onfocus, onblur.
Название атрибута формируется следующим образом. Префикс
on ставится перед названием события, например, click означает щел-
чок, dblclick — двойной щелчок и т.п. Значением атрибута, которое,
как обычно, надо взять в кавычки, служит код JavaScript, если он не-
большого размера, но чаще этот код является вызовом функции.
Атрибуты событий, перечисленные выше, позволяют связать эле-
менты HTML с обработчиками, которые выполняются при помощи
скриптов. Весь сложный процесс формирования и прохождения со-
бытия от щелчка мышью, прохождения сигнала через операционную
Глава 23. События в HTML.
227
Microsoft Internet Explorer
n сможем детям Будам помнить, что дети - цветы жизни. Я приглашаю вас сейчас
же сделать СБиМ взносы и помочь детям
LJL..-I
:г~: : :-“ZZ~Z“--—"—~Z~Z3
Готово s •’ । Мой компьютер
Рис. 4.1. HTML позволяет подключать обработчики событий
систему до поступления и прохождения внутри браузера остается
скрыт от разработчика страницы. Ему остается лишь описать реак-
цию на сигнал.
Приведем пример простейшей организации обработки события.
Пример 21.
1
2
3
4
7
8
9
10
<html>
<head>
<Ш1е>События и HTML</title>
</head>
5
6
<body>
<h1 onmouseover^'alertfПоможем детям. Будем помнить, что
дети - цветы жизни. Я приглашаю вас сейчас же сделать свои
взносы и помочь детям.')">
Союз меча и орала
</М>
</body>
</html>
Сначала, по мере чтения, выполняется код HTML. Без каких-ли-
бо особенностей открывается окно браузера с заголовком. Но эле-
мент <h1> становится активным, как ссылка. При попадании на него
указателя мыши возникает событие. В данном примере процедура
обработки события вызывается встроенными средствами HTML, она
указана как значение атрибута onmouseover. Управление передается
обработчику события, то есть вызывается процедура alert (‘строка’).
228
Часть 4. JavaScript
Обработчик, как и положено, выполнен средствами JavaScript. Эта
простая встроенная функция ввтзвтвает на экран диалоговое окно
предупреждения. В функцию должна быть передана строка (берется
в одинарные кавычки), которая и появится в окне (рис. 4.1).
Перечислим подробнее назначение атрибутов событий
onclick назначает обработчик события click, то есть функ- цию, которая должна вызываться после щелчка мы- шью по элементу, в котором расположен параметр.
ondblclick назначает обработчик двойного щелчка мышью.
onmousedown назначает обработчик нажатия левой кнопки мыши.
onmouseup назначает обработчик отпускания левой кнопки мыши.
onmouseover назначает обработчик наведения указателя мыши на элемент, например, на блок текста или изображе- ние (см. пример 21).
onmousemove назначает обработчик перемещения мыши.
onmouseout назначает обработчик отведения указателя мыши от элемента.
onkeypress назначает обработчик события «нажатие и отпус- кание клавиши».
onkeydown назначает обработчик события «нажатие и удержа- ние клавиши».
onkeyup назначает обработчик отпускания клавиши.
onfocus данному элементу передан фокус ввода, то есть он готов среагировать на нажатие клавиши Enter. Часто фокус ввода передаётся клавишей-табулятором Tab.
onblur обратное действие — элемент теряет фокус ввода, и последний передается другому элементу.
onchange параметр обслуживает несколько элементов, таких как <input>, <select>, <textarea>, и назначает обра- ботчик события «изменение пользователем исход- ного текста формы».
Другие обработчики событий подробно перечислены в п. 30.2.
Подключение скриптов
Глава 24
Роль скриптов заключается не только в обработке событий. В лю-
бом случае скрипты должны быть встроены в основной исполняемый
код. Сценарии могут быть подключены к основному HTML-докумен-
ту несколькими способами:
» включением скрипта в качестве параметра в один из обработ-
чиков, как было продемонстрировано в главе 23. Этот метод
обычно применяется для коротких сценариев;
* наиболее распространенный метод — размещение сценария
в специальном элементе <script>;
♦ наконец, сценарии могут загружаться из внешних файлов;
обычно применяется для сценариев большого размера или
многократно используемых на разных страницах.
Если во втором и третьем случаях браузер сразу находит испол-
няемый код, то есть команды, предназначенные для немедленного
выполнения, то интерпретатор выполняет их последовательно, стро-
ка за строкой, по мере чтения текста.
_241. ____________________________________
Г Встроенные скрипты
В приведенном ниже примере скрипт встроен в тело тега.
Пример 22.
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<Ш1е>Скрипты</Ш1е>
</head>
cbody style="background-color:#ffffff">
<Ь2>Скрипты</Ь2>
<hr id="my_bar" style="width:50%; height: 10; color: #000”>
<br>
cinput type=,,submit" >/а1ие="Меняем размер полосы"
onclick="javascript: my_bar.style.width=30;">
</body>
</html>
230
Часть 4. JavaScript
3 Скрипты - Microsoft Internet Explorer
Файл Правке Избранное С *реи? £прав а
Скрипты
| * . Мёнзен раз мер
Рис. 4.2. Динамическое изменение размеров разделительной полосы.
Скрипт вызывается как обработчик события «нажатие на кнопку»
В строке 10 в значение атрибута onclick встроен код, которвш
вв1зв1вается при нажатии кнопки с надписвю «Меняем размер по-
лосы» (рис. 4.2). Синтаксис встраивания аналогичен назначению
атрибута HTML. Этот код ввтзвтвает изменение размеров раздели-
телвной полосв! (элемент с id="my_bar) путем изменения соответст-
вующего ей свойства стиля (width), что подробнее будет рассмотрено
далее.
Скришы могут вв1зв1ватвся не толвко посредством рассмотрен-
hbix ввнпе атрибутов собвггий, но и при помощи других атрибутов.
Например, атрибута href="javascriptKod JavaScript или вызов функции", ко-
торвш входит во многие элементвт HTML, в частности, в ссвитки
<а /7ге/г=',...>Контент</а>.
24.2 ,___________________
I Элемент <script>
Элемент HTML <script> предназначен для размещения сцена-
риев. Может встречатвся любое количество раз в разделах <head>
и <body>.
<•><•>
Синтаксис: контейнер. Закрвтвающий тег обязателен.
Глава 24. Подключение скриптов
231
Г
Атрибуты:
fype
language
src
defer
charset
указывает, какой язык скриптов будет использовать-
ся, перегружая заданный по умолчанию.
Например: type=“text/javascripr.
Следует обратитв внимание, что JavaScript нео-
бязателвно должен исполвзоватвся по умолчанию.
указвтвает язык скрипта, на котором будет записан
контент элемента <script>. Не рекомендуемый. Од-
нако данный параметр может быть полезен, так как
некоторые старые браузеры не работают с type. Если
распознан параметр type, то language игнорируется.
определяет URI файла, содержащего внешний под-
ключаемый скрипт. Если параметр не установлен,
то браузер интерпретирует содержимое элемента как
сценарий. Если параметр задан, то содержимое эле-
мента игнорируется.
булев параметр. Если он присутствует, то это указвт-
вает браузеру, что даннвш скрипт не будет генери-
роватв контент (текст и разметку страницы) про-
граммным путем, и браузер может продолжить даль-
нейший разбор контента. Отложенное ввшолнение
скрипта ускоряет отображение страницвп
задает кодировку символов.
24.3 ,
Подключение скриптов
в элементах <script>
Элемент <script>, в котором располагаются операторы JavaScript,
можно вставлятв в любое место документа, и таких разделов может
быть несколько. В элементе может располагаться код, который вы-
полняется сразу после прочтения, а может содержаться и описание
функций, которые выполняются в нужный момент — момент вы-
зова (например, после подведения указателя мыши). Коды из раз-
ных разделов могут взаимодействовать между собой.
Е1ри размещении кода следует помнить о построчном порядке
выполнения операторов. Обычно код размещают или в разделе
232
Часть 4. JavaScript
<head> или после раздела <body>. Первый случай рекомендуется,,
когда необходимо, чтобы код скрипта был обработан раньше, чем
загрузится страница.
Если в документе размещено несколько элементов <script>, то
при выполнении текущего фрагмента следует помнить, что могут быть
использованы только переменные и функции, определенные в пре-
дыдущих скриптах, определенные же в последующих могут быть еще
недоступны, и попытка их использования приведет к ошибке.
Если скрипт используется после загрузки страницы и достаточ-
но длинный, то его выгоднее разместить в конце документа, чтобы
загрузка не мешала отображению кода HTML.
Описание функции можно располагать в любом месте, главное,
чтобы к моменту вызова функции оно уже было загружено в память.
Чтобы код был скрыт от браузеров, не поддерживающих скрип-
ты, его размещают в комментариях HTML. Браузеры без интерпре-
татора JavaScript в этом случае код не прочтут, а интерпретатору
эти комментарии не помешают.
Если надо скрыть текст и от интерпретатора, размещая не код,
а замечания к программе, то такие комментарии надо оформлять
по правилам, которые применяются в языках C++ и Java. Таких
правил два. Первое — только для однострочных комментариев, ко-
торые начинаются с двух подряд идущих слешей
//для браузеров, не поддерживающих JavaScript
Второе правило заключается в помещении текста в контейнер
/* ... */. Причем размещение текста и ограничителей значения не
имеет, они могут располагаться на одной или нескольких строках.
Вкладывать один комментарий такого рода в другой нельзя.
/* Размещая сценарий внутри комментария HTML, можно скрыть
его от браузеров, не поддерживающих JavaScript
7
Рассмотрим пример организации обработчика события как
функции.
Пример 23.
1
2
3
4
5
<head>
<title>Alert</title>
<script type="text/javascript">
<!--//Размещая сценарий внутри комментария HTML, можно
скрыть его от браузеров, не поддерживающих JavaScript
Глава 24. Подключение скриптов
233
6
7
8
9
10
11
12
13
14
15
function f1()
{ ’
alert(" Поможем детям. Будем помнить, что дети - цветы
жизни. Я приглашаю вас сейчас же сделать свои взносы и
помочь детям.");
}
—></script>
</head>
<body>
<h1 align="center" onmouseover="f1 ()">Союз меча и орала<Л11>
</body>
</html>
Подробно с организацией функций мы познакомимся позднее,
а здесь отметим, что функция используется как обработчик события.
Ее описание отдельно выносится в основной скрипт (строки 6—9)
и размещается в секции-контейнере <script>...</script> (строки 4-10).
Сама по себе эта часть во время прочтения интерпретатором не вы-
полняется, а только находится в памяти. Вызов функции происходит
в строке 13 — в атрибуте события HTML при назначении обработчика
24.4 ,______________________________
I Подключение во внешнем файле
Скрипты могут полностью располагаться во внешних файлах.
Проще всего пояснить порядок такого размещения на примере. Пе-
репишем предыдущий пример, разместив скрипт во внешнем файле.
Пример 24.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- файл index.html ->
<html>
<head>
<title>Alert</title>
</head>
<body>
<script type = "text/javascript" src = "my_script.js">
<!-//
Если файл my_script.js будет обнаружен, то это содержимое
будет проигнорировано. Если браузер не распознает параметр
src, то он будет пытаться обработать этот контент, в котором
можно расположить альтернативный сценарий.
--></script>
<h1 align = "center" onmouseover="f1 ()“> Союз меча и орала </Ы>
</body>
</html>
234
Часть 4. JavaScript
В строке 7, написанной по стандартам HTML, указано, что ис-
точник кода JavaScript располагается в отдельном файле my_script.js
(атрибут src = “myiscriprjs'’) .Причем файл для данного примера, как
видно из адреса, должен находиться в той же папке, но в общем
случае может располагаться даже на другом сервере. Содержимое са-
мого элемента HTML <script>, как следует из комментария, игно-
рируется, если внешний файл загружен. Если по какой-то причине
зафузка не произошла, то только тогда выполняется код, заданный
внутри элемента.
Файл скрипта содержит только «чистый» код без какого-либо
вспомогательного оформления.
1
2
3
4
5
//file my_script.js
function f1()
{
а1егЦ"Поможем детям. Будем помнить, что дети - цветы жизни. Я
приглашаю вас сейчас же сделать свои взносы и помочь детям.");
}
Основы языка JavaScript
Глава 25
С языком JavaScript могут работать разные категории разработ-
чиков. И начинающие, познающие несколько простых операций
и функций, и опытные, освоившие создание функционирующих
приложений из готовых библиотек и модулей, и эксперты, которые
самостоятельно разрабатывают новые модули.
Язык JavaScript состоит из элементарной и базовой части. Пер-
вая включает переменные, основные математические и логические
операции, а также функции. Ко второй относится присущая совре-
менным объектно-ориентированным языкам возможность создания
объектов, обладающих свойствами и методами.
Язык имеет небольшое количество полезных встроенных объек-
тов, таких как Array, String, Math, Date и др. для организации ра-
боты с массивами, строками, математическими функциями, датами.
Прикладную ценность языка составляют специализированные
библиотеки. В данном случае речь идет о библиотеках взаимосвя-
занных объектов. Применительно к HTML разработаны объекты
для взаимодействия с браузером и представляемым в нем докумен-
том HTML. -Эта специально разработанная иерархия объектов об-
разует объектную модель браузера (иногда ее называют объектной
моделью DHTML). Она позволяет программным путем получать
доступ и изменять многие настройки браузера и представления до-
кумента, а также переписывать отдельные строки кода.
Среди объектов браузера выделяется самая существенная и боль-
шая часть, ответственная за работу с документом, которая образует
объектную модель документа (Document Object Model — DOM).
Она позволяет структурировать весь документ на объекты и затем
легко оперировать с HTML-элементами как с объектами, динами-
чески создавая и изменяя их.
Базовая часть языка
Глава 26
26.1 ,_________
I Переменные
Данные, которые обрабатывает программа, являются перемен-
ными или константами. Переменные, как следует из названия, мо-
гут изменять свое значение, а константы — нет. В отличие от дру-
гих языков, переменные в JavaScript не должны иметь заранее
определенный и неизменный тип. Тип переменной может изме-
няться в процессе выполнения программы и зависит от типа поме-
щаемых в него данных.
Имена переменных не должны совпадать с ключевыми словами,
которых насчитывается несколько десятков (см. приложение 7).
Имя переменной может состоять из латинских букв (строчных
и прописных), цифр и символа подчеркивания «_». В языке
JavaScript прописные и строчные буквы различаются (в отличие от
HTML и CSS), поэтому при назначении имен следует быть особо
внимательными.
Все переменные следует объявлять при помощи оператора var.
Например:
var а;
var zx1247_Clicked\
Объявлять разные переменные можно и в одной строке. В этом
случае они отделяются друг от друга запятой.
var a, var zx1247_Clicked;
Язык поддерживает четыре простых типа и объекты.
К простым типам относятся:
♦ целочисленный,
♦ вещественный,
* строковый,
♦ булев (логический).
Глава 26. Базовая часть языка
Г ~ . .. Т - —
237
Целочисленный тип. Значение переменной может задаваться в де-
сятичном формате.
*» I .
Например:
var а=125‘,
В восьмеричном значение начинается с нуля:
var а-011;
На шестнадцатеричный указывает префикс ох:
var Ьи1/=0х9сг,
Целочисленные константы, или литералы, представляют собой
последовательность цифр со знаками «+» и «~» или без них.
Вещественный тип. Имеет несколько форматов задания вещест-
венных чисел (с плавающей запятой):
var а= 123.456;
var а=-1.2345бе2;
var а=12345.6Ё-2;
Вещественные константы (литералы) имеют аналогичный син-
таксис и указываются в выражениях без имени.
Строковый тип. Значение переменной представляет собой стро-
ку символов или цифр, которая берется в кавычки. Как и в HTML,
кавычки могут быть одинарные и двойные. Для выделения строки
следует использовать кавычки только одного вида (например, пра-
вильно: Остап”, неправильно: ‘Остап").
Длинные строковые литералы нельзя разрывать и переносить на
следующую строку (подробнее об этом — в следующем параграфе).
Булев (логический) тип. Переменные этого типа принимают одно
из двух значений — false или true — и используются при проведении
логических операций.
Специальное значение null указывает, что переменная имеет не-
определенное значение.
Неопределенное значение undefined задается в случае, если пере-
менная была объявлена, но к моменту использования ее в вычис-
лениях так и не была инициализирована.
238
Часть 4. JavaScript
26.2 и__________________________________________
I Операторы
Кроме оператора var, переменная может быть определена во вре-
мя инициализации оператором присваивания «=».
Например:
Str= "Антилопа Гну"
а=5;
flag-true;
В одной строке можно объявлять сразу несколько переменных
(через запятую). Часть их или все они могут инициализироваться.
Например:
var str= “Антилопа Гну", a, flag=true;
Если во время вычислений используется не инициализированная
или необъявленная переменная, то интерпретатор выдает сообщение
об ошибке. В одном случае неопределенное значение не генерирует со-
общение об ошибке. Это происходит, если переменной присвоено спе-
циальное значение null, используемое для неопределенных значений.
Для организации различных действий с переменными исполь-
зуются операторы. Переменные, объединенные операторами, обра-
зуют выражения. Выражения отделяются друг от друга точкой с за-
пятой, как, вероятно, вы уже заметили в примерах. Части выраже-
ния можно располагать на разных строках. Исключением из этого
правила являются строки, которые нельзя разрывать. Поскольку
в языке нет специальных операторов продолжения строки, то в слу-
чае необходимости строку делят на части, которые объединяют
операцией сложения (конкатенация строк).
Операторами можно организовать выражения трех типов: ариф-
метические, логические и строковые. Порядок вычисления выра-
жений определяется стандартными правилами приоритета.
Арифметические операторы:
+ оператор сложения, может использоваться как для
сложения чисел, так и для объединения (конкате-
нации) строк.
Например:
var a=b+c; var str_name="OcTan“+"Бендер";
Глава 26. Базовая часть языка
239
Если операция сложения проводится со сме- шанными типами данных и хотя бы одна перемен- ная является строковой, то все остальные также пре- образуются к строковому типу. операция вычитания, применяется к числам.
* умножение чисел.
/ деление чисел.
операция присвоения значения переменной или объекту.
% остаток от деления целых чисел. Например, резуль- татом выражения 10%3 будет 1.
+= в ряде языков, в том числе и JavaScript, такой опе- ратор обозначает сложение числа с текущим значе- нием числовой переменной или конкатенацию строки с текущим значением строковой перемен- ной, то есть х+=а эквивалентно х=х+а Например: Х=Г, х+=2; В итоге переменная х сначала получит значение 1, а затем — з (в результате действия х=х+2).
Аналогично предыдущему действуют следующие операторы:
х-=у аналогично х~х-у;
х*=у аналогично х=х*у;
/= х/=у аналогично х=х/у;
%= х%=у аналогично х=х%у;
++ 1 операция инкремента (увеличение числа на единицу). Например, допустимы следующие выражения: а++; Ь= а++: Ь=++а;
Различие в первом и во втором случаях не проявится,
хотя оно существует в моменте увеличения значения.
240
Часть 4. JavaScript
В третьем случае сначала произойдет присвоение b
значения а, и только после этого а увеличится на
единицу. В четвертом случае, наоборот, сначала уве-
личится а, и затем произойдет присвоение.
операция декремента (уменьшение числа на еди-
ницу). Действует аналогично предыдущей.
Логические операторы и операторы сравнения применяются
для создания и вычисления логических выражений.
Операторы сравнения могут использоваться и с числами, и со
строками. Нечисловые значения сравниваются в соответствии с их
представлением в Unicode.
знак «меньше». Например, выражение (х<5) возвра-
щает значение true, если х меньше пяти, и false в про-
тивном случае.
знак «больше». Действует аналогично.
знак «меньше или равно».
знак «больше или равно».
операция проверки на равенство.
операция проверки на неравенство.
Логические операторы:
&& логическое И.
логическое
ИЛИ.
логическое НЕ.
?: условный оператор. Применяется как сокращенный
вариант конструкции if/else (см. следующий пара-
граф). Например: с=(а>Ь) d : / Если условие (а>Ь)
является истинным, то выполняется и возвращается
результат первого выражения d, которое присваива-
ется с (c=d). Если условие ложное, то вычисляется
второе выражение f и окончательно c=f.
В языке поддерживается ряд поразрядных операций, которые,
как правило, при работе с HTML кодом не используются.
Глава 26. Базовая часть языка
241
26.3 ,_____________________
| Условные операторы
I и операторы циклов
if/else Оператор условного перехода if существует практи-
чески во всех языках программирования и разветв-
ляет выполнение программы в зависимости от ис-
тинности проверяемого условия.
<><>
Синтаксис:
1 if(a>b)
2 {блок операторов_1;}
3 [else
4 {блок операторов_2;}]
5 блок операторовЗ;
Если проверяемое в строке 1 условие истинное (в скобках мо-
жет стоять просто булева переменная), то выполняется условие,
записанное в строке 2. Это может быть блок операторов, тогда они
помещаются в фигурные скобки. Если это одно выражение, то
скобки могут опускаться. После выполнения блока 1 управление
сразу передается строке 5.
В случае, если проверяемое условие в строке 1 ложно, управление
переходит к блоку else и выполняется блок операторов_2. Фигурные
скобки могут отсутствовать, если записывается всего одно выраже-
ние. Блок else является необязательным. При его отсутствии, в слу-
чае невыполнения условия в строке 1, блок операторов ! пропускается
и сразу выполняется блок операторов_3.
В блоки могут входить любые операторы, в том числе вложен-
ные (if/else).
switch/case Оператор switch (...) позволяет разветвлять процесс
по многим направлениям.
<>.<>
Синтаксис:
switch(expression){
case value_1:
блок операторов_1;
break;
242
Часть 4. JavaScript
case value_2:
блок операторов_2;
break;
case value_3:
блок операторов_3;
break;
default:
блок операторов по умолчанию;
}
После вычисления выражения expression оно последовательно
сравнивается со значениями value .1, value_2 и т.д. В случае совпадения
с каким-то значением выполняется блок операторов в соответствую-
щем разделе case. При отсутствии такого совпадения выполняется
блок default. Оператор break предназначен для прекращения вычисле-
ний внутри блока и выхода за его пределы. При его отсутствии будет
продолжаться последовательное выполнение операторов в блоках
case до первого встреченного break или до конца switch.
for
оператор for предназначен для организации циклов.
<><>
Синтаксис:
for (init_expression; condition; next)
{
блок операторов;
Здесь initexpression — начальное выражение, condition — условие
продолжения цикла (если оно истинное, то тело цикла выполняет-
ся). Если оно ложное, то выполнение цикла прекращается и управ-
ление передается оператору, следующему за фигурными скобками.
Они могут опускаться, если тело цикла состоит из одного выражения.
next — изменяющееся выражение, которое вычисляется после
каждого отдельного цикла. В фигурных скобках записывается тело
цикла, то есть группа выполняемых операторов.
Любое из выражений initexpression, condition, next или даже
все они могут отсутствовать, но наличие разделителей «;» обяза-
тельно. Типичный пример организации цикла:
for (i=0; i<10;i++)
{
summator+=i;
}
Глава 26. Базовая часть языка
243
while другим оператором, служащим для организации
цикла, является while.
<><>
Синтаксис:
while(condition)
{
блок операторов;
}
Цикл выполняется в том случае и до тех пор, пока выражение
condition принимает значение «истинно». Как только оно принима-
ет значение «ложно», управление передается оператору, следующе-
му за блоком операторов в фигурных скобках. Фигурные скобки
могут опускаться, если тело цикла состоит из одного выражения.
Организация изменяемого выражения, связанного с проверяемым
условием, лежит на плечах программиста.
break
continue
предназначен для выхода из циклов. Передает уп-
равление оператору, следующему сразу за телом
цикла.
предназначен для продолжения циклов. При встрече
этого оператора в теле цикла выполнение следующих
за ним операторов прекращается и управление пере-
дается на начало следующего цикла.
26.4 ,__________________________________________________________
1 Функции
Функции представляют собой последовательность операторов,
которые выполняются в определенный момент — момент вызова
функции. Для задания функции необходимо описать ее по следую-
щей форме:
function f name ([arg1, arg2,...])
{
список_используемых_операторов;
[return возвращаемая_величина]/
}
Признаком описания служит ключевое слово function, после ко-
торого следуют имя функции, задаваемое пользователем, и в скоб-
ках список аргументов.
244
Часть 4. JavaScript
Порядок следования параметров в функциях JavaScript менятв
нелвзя, в отличие от атрибутов элементов и свойств в правилах CSS.
Сами аргументы могут отсутствоватв, но скобки остаются и в этом
случае. После скобок точка с запятой отсутствует. Описание разме-
щается в фигурнвтх скобках. Если функция должна вернутв какое-
либо значение в основную программу, то последним ее оператором
является return, после которого идет возвращаемое значение. При
отсутствии return возвращаемое значение полагается неопределен-
hbim (undefined).
Для исполвзования функции осуществляется ее вызов из про-
граммы. Признаком функции является наличие скобок.
f_name(x,y); // вызов функции
Ввтзов функции может происходитв толвко после ее описания.
Возвращаемое значение может возвращатвся прямо в выражение
и исполвзоватвся для присвоения или продолжения вычислений.
Например:
с= f_name(x,y);
a=b+f_name(x,y);
Переменяйте, определенные внутри функции, могут бвггв ис-
пользованы толвко внутри функции. Другими словами, области их
видимости ограничена телом функции.
26.5 , __________________________________________________________
I Объекты
Объекты — наиболее сложный, однако и наиболее мощный тип
данных современного программирования. Языки, поддерживающие
объекты, называют объектно-ориентированными. Большинство
современных систем программирования — Delphi, C++, Java, C# —
являются объектно-ориентированными. Объекты, конструируемые в
JavaScript, не обладают всеми свойствами, присущими объектам, на-
пример в C++, но позволяют строить основные конструкции прило-
жений.
Объект представляет собой совокупность тесно взаимосвязанных
и взаимодействующих данных и функций. Данные в этом случае на-
зываются свойствами объекта, а функции — методами объекта. Свой-
ства могут быть заданы не только простыми типами данных (целыми,
вещественными, строками), но и другими новыми объектами.
Глава 26. Базовая часть языка
245
Возникновение объектов стало ответом разработчиков-програм-
мистов на постоянно возрастающую сложноств и объем программ.
Наличие объектов позволяет отделятъ основное содержание про-
граммы от огромного количества второстепенных деталей. Вся ра-
бота с деталями при этом «прячется» в объекты. Если провести ана-
логию, то ситуация сходна со стилями. Простые программы можно
написатъ, не привлекая объекты, так же, как и одну страницу мож-
но оформитъ без исполъзования стилей. Но написание сложной
программы в обозримые сроки возможно, толъко если научитъся
работатъ с более крупными блоками данных, такими как объекты.
Аналогично при верстке книги mbi полъзуемся стилями, не со-
мневаясъ, что однажды задав их, mbi получим соответствующее
оформление всего издания.
Имя объекта подчиняется общим правилам формирования имен.
А вот въ1зов, или доступ, к свойствам осуществляется по собствен-
ным правилам, иногда называемым точечной нотацией. Они заклю-
чаются в том, что слева направо последователъно указываются объ-
ект и его свойство. Разделителем между ними служит точка.
Например, если имя объекта team, а его свойство — driver, то
вътзватъ это свойство можно следующим образом:
team.driver
Въ1зов методов-функций осуществляется аналогично, с учетом
особенностей вызова функций. Например, вызов метода go(parameter)
принадлежащего объекту team, имеет вид
team.go( черноморск')
где вызвана функция с параметром-строкой “Черноморск".
В том случае, когда свойство является объектом и надо обра-
титься к свойству или методу этого вложенного объекта, запись
продолжается аналогичным образом.
Например, если одно из свойств объекта team само является
объектом contora, у которого есть внутреннее свойство predsedatel,
то полный вызов имеет вид
team .contora .predsedatef
246
Часть 4. JavaScript
При использовании одних объектов в качестве свойств других,
образуется целая иерархия объектов, подчиненных друг другу. На-
пример, в нашем случае она выглядит так:
В основном использование таких свойств происходит обычным
порядком. Например, присвоим значение вышеупомянутому свой-
ству predsedatel:
team .contora.predsedate/=”<PyKc*
Теперь присвоим переменной chairName значение, хранящееся
в predsedatel:
chairName=team.co nto га. predsedatel
26.6 -________________________________________________________
I Особенности работы с объектами
Некоторую специфику в работу с объектами ВНОСЯТ специаль-
ные операторы.
Оператор new служит для создания нового экземпляра из класса
однотипных объектов. Причем правила создания, то
есть описание объекта, должны быть приведены
раньше: либо пользователем в программе, либо раз-
работчиками в структуре браузера. В последнем слу-
чае — это встроенные объекты, которые будут рас-
смотрены далее.
Указатель this используется для указания на то, что мы находимся
внутри объекта. Детально осознать это можно толь-
ко начав программировать и столкнувшись с такой
ситуацией на практике.
Попробуем пояснить это на примере, продолжая достраивать
объект team. Допустим, внутри функции до мы хотим переназначить
247
Глава 26. Базовая часть языка
।-- - 1 —
свойство predsedatel. Для для этого случая можно было 6bi исполь-
зоватв полное имя, заданное переменной new_Chair, и в одной из
строк описания до() организоватв следующее присвоение:
ieam.conlora.predsedatel=new_Chair,
Но что делатв, если у нас еств ряд однотипных объектов team,
team_1, team_2, ..., team_100, — какой из них исполъзоватъ в описа-
нии функции? Это выяснится толвко в процессе вычисления. Нео-
пределенноств выбора объекта можно устранитъ, исполъзуя указатель
this следующим образом:
this.contora.predsedatel=new_Chair,
Функция до, «увидев» this, определит, что contora является свой-
ством того же объекта, что и сама функция до(). При вызове
team.go() будет исполъзована переменная team.contora.predsedatel,
а при вътзове другого метода до() аналогичного объекта tearrM .до() —
team 1 .corpora.predsedatel.
♦ 1
Цикл for...in
Для полноты картины необходимо упомянутъ еще циклит, кото-
рые организуются с объектами.
<•>•<>
Синтаксис:
forG in obj)
{block;
}
где J задает переменный целый индекс, который изменяется от ну-
ля до п - 1, (п — число свойств объекта), obj — имя объекта. Цикл
используется для последовательного перебора свойств объекта, ор-
ганизованных в виде перенумерованного массива.
Оператор with
<>•<•>
Синтаксис:
with (obj)
(block;
248 Часть 4. JavaScript
--- — -—= = —1 . -i.-1 — i
Все операторы внутри блока будут оперировать свойствами и ме-
тодами, которые по умолчанию принадлежат объекту obj. В ряде слу-
чаев это позволяет сократить длинное наименование свойств с ис-
пользованием точечной нотации, в том числе избавляясь от указателя
this. Предыдущий пример (изменение свойства predsedatel) в объекте
team мог бы иметь вид
my_obj=team;
with(my_obj)
{...
contora.predsedatel=new_Chair;
Г
При изменении team Hateam l блок легко «разберется», в какой
команде менять «председателя».
26.7 ,’
[ Создание объекта пользователя
Создать отдельный объект с заранее заданными пользователем
свойствами чрезвычайно просто. Свойства добавляются к объекту
автоматически, во время инициализации. Например, рассмотрим
построение уникального (в смысле одиночного) объекта team:
var team;
team. driver="Kozievich~
В первой строке создана переменная team, которая может иметь
любой тип, в том числе и тип объекта. Во второй строке автомати-
чески создается свойство driver, которому присваивается строковое
значение. При этом team становится объектом.
С функциями дело обстоит несколько иначе.
Нельзя записать team.go()=change_chairf}, поскольку при такой
записи слева будет вызвана функция change_chair(), которая вер-
нет некоторое значение. Это значение не может быть присвоено
функции.
Однако в JavaScript функции можно рассматривать как свойст-
ва. В этом случае в объекте располагается указание на функцию.
Указатель содержит адрес ячейки памяти, с которой начинается
код функции, и является некоторым числом-адресом. Имя указа-
249
Глава 26. Базовая часть языка
1=—'
теля совпадает с именем функции, но записывается без круглых
скобок. Значение указателя может служить свойством и его можно
присваивать. Следующий код позволяет назначить для team новый
метод, используемый как свойство:
1
2
3
4
function change_chair()
{код функции;}
var team;
var team.go=change_chair;
В строке 4 создается свойство до, которое указывает на функ-
цию. Ей и присваивается значение указателя change_chair. В отли-
чие от change_chair(), запись change_chairобозначает указатель, яв-
ляется некоторым числом-адресом и функцию не вызывает.
Аналогично обстоит дело и с team.до.
Дальнейший вызов и использование метода до() осуществляется
по обычным правилам.
На одну и ту же функцию можно ссылаться из разных объектов.
Создание одиночного объекта не требует явного обращения к
оператору new, а также изготовления и использования конструкто-
ров — специальных функций, инициализирующих новый объект
(см. п. 27.1).
Встроенные объекты
Глава 27
Язык JavaScript позволяет создавать собственные объекты, одна-
ко начинающему программисту полезнее сначала научиться поль-
зоваться библиотеками объектов. В языке библиотечные объекты
называются встроенными.
271 ___________________________________________________________
I Объект Array
В JavaScript отсутствует такой тип данных, как массив. Однако
объекты позволяют решить эту задачу. Достаточно создать объект с на-
бором свойств и каждое из них рассматривать как элемент массива.
Затем следует организовать к элементам-свойствам привычное об-
ращение по номерам, как к элементам настоящего массива. Для со-
здания подобных типов объектов и организации доступа к ним как
к элементам массива разработано описание, встроенное в язык. В дру-
гих языках такой код (правила создания однотипных объектов) на-
зывают классом.
В JavaScript библиотечный код для создания массивов называется
объектом Array (переводится как «массив» или «вектор»). Array в дан-
ном случае — не имя конкретного объекта, а родовое имя правил
(класса), которые позволяют строить объекты-массивы с произволь-
ными именами, например: array_1, people, my_Massiv.
Доступ к элементам в объектах типа Array может быть получен
при помощи порядкового номера (индекса). Значения индексов на-
чинаются с нуля. Например, если объект people является массивом
строк, то значение четвертого элемента задается так
people/3/= “Kozievich"
Внешне такое обращение не отличается от синтаксиса массивов
в других языках. Однако объект Array позволяет организовывать и
так называемые хэш-массивы, В них роль индекса играет строка, и
задание массива сводится к заданию пар «строка-индекс» и «стро-
ка-значение». Значения индексов также размещаются в квадратных
скобках после имени массива.
Глава 27. Встроенные объекты
251
Например:
people[ "driver'^'Kozievich"
Допускаются оба описанных варианта.
Возможно создание массива с неопределенными (пустыми) эле-
ментами.
Конструкторы. Создание нового объекта осуществляется при по-
мощи специальных функций, называемых конструкторами.
Это заранее определенные функции (в случае встроенных масивов
они уже написаны разработчиками JavaScript, и их описания встроены
в браузер или другую программу, обрабатывающую скрипты), которые
создают и инициализируют свойства новому экземпляру-объекту из
заданного типа (класса) объектов.
Конструктор имеет такое же имя, как и родовой объект (в на-
шем случае — Array), но поскольку является функцией, то записы-
вается с круглыми скобками — Аггау(). В скобках могут стоять па-
раметры. Набор их может быть различным. Каждому допустимому
набору соответствует свой конструктор, который создает и иници-
ализирует объект по своим правилам. По сути это отдельные функ-
ции, имеющие для удобства общее название, поскольку служат од-
ной цели. При этом говоря, что один набор параметров отличается
от другого, мы имеем в виду не отличие значений, а количество па-
раметров, их тип, порядок следования. Программа автоматически
отличает один набор параметров от другого и вызывает соответст-
вующие конструкторы.
Кроме того, создание объекта требует вызова оператора new, от-
ветственного за выделение памяти под конкретный объект.
Конструкторы массивов. Задавать массивы можно при помощи
нескольких конструкторов.
. г
Например:
var people=new Array()
задает массив с неопределенной длиной, которая может менять-
ся при добавлении новых элементов. В результате следующих дей-
ствий:
people/0/= "Bender,
peoplef 1 ]= "Balaganov"',
252
Часть 4. JavaScript
размерность массива станет равной двум. А если добавить
people/3> "Kozlevich'
то сразу расширится до четырех, причем третий элемент (people[2])
будет иметь неопределенное значение (undefined).
var people=new Array(7)
задает массив размерностью в семь элементов (в версиях языка До
JavaScript 1.2). Начиная с версии 1.2 и выше, создает массив с од-
ним элементом, значение которого равно 7.
var people=new Array(ll,21,73)
задает массив из трех элементов, которые инициализируются
соответствующими целыми значениями.
Многомерные массивы организуются из одномерных. Например,
в случае организации двумерного массива создается одномерный мас-
сив объектов, каждый из которых в свою очередь является одномер-
ным массивом. Доступ к элементам в этом случае имеет вид а[2][4].
Свойства массивов. Поскольку Array реально является не масси-
вом, а специальным образом организованным объектом, то он имеет
и другие вспомогательные и полезные свойства и методы.
length задает количество элементов в массиве.
Например:
peoplejength
prototype позволяет назначать массиву новые свойства и ме-
тоды. Это свойство используется с ранее созданными
в документе экземплярами массивов. Употребляется
весьма редко и, как правило, профессионалами.
Методы массивов:
concat() объединяет несколько массивов в один (от concate-
nate — объединять). Данная функция не влияет на
исходные массивы. Например, выражение a.concat(b)
вернет объект-массив, в котором массив b добавлен
в конец массива а.
Глава 27. Встроенные объекты
I' - 1 - —
253
join () объединяет в одну строку все элементы массива. Если
указ?н параметр-строка функции join (), то он будет
вставляться между любыми двумя элементами как
разделитель. Метод может использоваться для фор-
мирования строки-запроса, отправляемого на сервер.
reverse() меняет порядок элементов в массиве на противопо-
ложный, то есть последний элемент становится пер-
вым, предпоследний — вторым и т.д.
slice() создает новый массив, «вырезая» часть исходного.
Например:
slice (start, end)
где start и end — соответственно начальный и конеч-
ный элементы в новом массиве. Если end не указан,
то по умолчанию новый и старый массивы будут
иметь один и тот же последний элемент.
sort() функция сортировки массива (по умолчанию осу-
ществляется в алфавитном порядке).
Например:
people. sort()
Числа сортируются в соответствии с задаваемой
функцией, которая в этом случае служит парамет-
ром для sort().
27.2
[ Объект String
В языке JavaScript строковый тип данных отсутствует, а работа
со строками организуется при помощи объекта String. Такая же си-
туация наблюдалась и с массивами. Фактически задание перемен-
ной в виде
var my_string="ltis а text string"
является вызовом конструктора, который задает экземпляр объекта
String и записывается по собственным синтаксическим правилам,
аналогичным заданию переменной.
254
Часть 4. JavaScript
Классический конструктор имеет вид
var /77y_s^f7r7p!=newString(7r is a text string")
который даст такой же результат.
Значением строки может быть последовательность практически
любых символов, вводимых с клавиатуры.
)
Свойства:
I
length . задает число символов в строке.
prototype позволяет создавать новые свойства и методы, свя-
занные с объектом String.
Методы объекта String можно разделить на две категории. Ме-
тоды первой категории предназначены для организации поддержки
HTML. Они позволяют генерировать код HTML программным пу-
тем, дополняя написанный «вручную». В частности они дополняют
текстовую строку тегами HTML для выделения ее полужирным
шрифтом, курсивом и т.д.
anchor (bookmark)
создает закладку с name="bookmark\ добавляя теги <а>
вокруг строки.
Например, вызов
n7y_str/ng.anchor (bookmark)
для строки, построенной в начале параграфа, вернет
строку
<а пате=нЬооктагк“>11 is a text stn'ng</a>
arlink(URL) окружает строку тегами <а> с атрибутом href, уста-
новленным в значении, которое указано в качестве
параметра функции. Создает таким образом ссылку.
Пример аналогичен предыдущему.
big() добавляет теги <big> вокруг строки.
добавляет теги <small> вокруг строки.
bold() добавляет теги <Ь> вокруг строки.
italics() добавляет теги <i> вокруг строки для отображения ее
курсивом.
Глава 27. Встроенные объекты 255 г- - -
strike() добавляет теги <strike> вокруг строки.
sub() добавляет теги <sub> вокруг строки для отображения нижних индексов.
sup() добавляет теги <sup> вокруг строки для отображения верхних индексов.
fixed () добавляет теги <tt> вокруг строки для отображения ее моноширинным шрифтом типа Courier.
fontcolor добавляет теги <font> вокруг строки. Атрибут coloryc-
(mcolor) танавливается равным значению, указанному в каче- стве параметра функции m color.
fontsize создает копию строки внутри набора тегов <font> с ат-
(m_size) рибутом size, установленным равным значению, ука- занному в качестве параметра m_size вызова функции.
Методы второй категории манипулируют со строками.
charAt(m_position)
возвращает символ, находящийся в указанной пози-
ции m_position. Отсчет начинается с нуля.
charCodeAt() возвращает десятичное значение Unicode для симво-
ла в указанной позиции.
concat() объединяет две строки. Например, Str1 .concat(m_str2)
добавит к первоначалъной строке Str1 строку str2, ана-
логично str1+str2.
String.fromCharCode(numl, num2, num3,...)
возвращает строку символов со значениями Uni-
code, соответствующими числам, указанным в каче-
стве параметров вызова функции. Метод всего класса
String, то естъ вътзъщается именно так, как записано
вначале. Вызов Му._string.from CharCode( 127,56,зз) недо-
пустим.
indexOf(substr[, startPosition])
возвращает в строке позицию первого символа под-
строки substr, если она была найдена. Если подстрока
не навдена, то возвращаемое значение будет равно — I.
Поиск подстроки также можно начатъ с некоторой
позиции startPosition.
256 Часть 4. JavaScript
----- ' -.. m
lastIndexOf(substring[,startPosition])
возвращает позицию первого символа подстроки
substring, найденную для последнего вхождения. Если
подстрока не найдена, возвращается значение — 1.
Поиск подстроки также можно начать с позиции
startPosition. Метод аналогичен indexOf(), за исключе-
нием того, что он начинает поиск подстроки с кон-
ца строки.
replace (str, replaceStr)
возвращает строку, в которой вместо подстроки str
стоит подстрока замены replaceStr.
search(str) возвращает позицию первого символа подстроки str.
Метод аналогичен indexOf().
slice(start, end) возвращает подстроку текущей строки, которая на-
чинается с указанной позиции start и заканчивается
позицией end. Параметр end является необязатель-
ным (если он не указан, то подстрока завершается
в конце первоначальной строки). Он может иметь от-
рицательное значение, в этом случае отсчет конечной
позиции ведется с конца строки.
split(delim) возвращает массив подстрок, полученный из основ-
ной строки в результате разбиения ее на части. При-
знаком разбиения является подстрока delim, которая
убирается из массива.
substr(startPosition,length)
выделяет подстроку из первоначальной строки. Под-
строка начинается с позиции startu содержит число
символов length. Если параметр length не указан, то
выделение осуществляется до конца строки.
substring(start[, end])
возвращает подстроку, которая начинается с пози-
ции start и заканчивается позицией end, текущей
строки. Параметр end также необязательный. Метод
аналогичен slice(), за исключением того, что пара-
метр end не может иметь отрицательного значения.
toLowerCase(), возвращает строку с буквами, преобразованными в ни-
toUpperCase() жний или верхний индекс.
Глава 27. Встроенные объекты
257
27.3 ,__________________________________________________
Т Объект Boolean
Бинарные объекты типа Boolean (булевы) могут иметь значение
true (истина) или false (ложь) и употребляются, как правило, в ло-
гических операциях.
toString() Преобразует логическое значение объекта в строку
(то есть возвращает строку “true" или false'). Обычно
/ браузеры автоматически преобразуют объекты Boolean
в строки.
valueOf() возвращает логическое значение объекта как true
или false.
27.4 ,_____________________________________________________________
| Объект Number
Number — это объект с любым числовым значением. Применя-
ется в тех редких случаях, когда приходится иметь дело с такими
понятиями, как бесконечность, максимальное и минимальное чис-
ло, представляемые компьютером, а также в случае проверки, яв-
ляется ли переменная числом.
Свойства:
MAX VALUE возвращает наибольшее число, равное
1.7976931348623157Е+308. Вызов: Number.MAX. VALUE
MIN-VALUE возвращает наименьшее число, равное 5Е-324. Вы-
зов: Number./W/\/_ UAL L/E
NaN (Not a Number) возвращает это значение при по-
пытке выполнения недопустимых числовых опера-
ций с числами и строками.
NEGATIVEJNFINIY, POSITIVEJNFINITY
значения, которые являются, соответственно, мень-
шими и большими, чем MIN_VALUE мМАХVALUE.
Возвращается, например, при делении на ноль.
prototype используется для присвоения новых свойств и мето-
дов объекту Number.
УЗак. 1627
258
Часть 4. JavaScript
Методы:
toStringO возвращает значение объекта в виде строки. Напри-
мер, число 12345 принимает вид "12345".
valueOf() возвращает значение объекта.
27.5 в;
1 VF'.......... ..>П~7
Объект Date
Объект Date предназначен для отображения дат и предоставляет
целый ряд методов работы с ними.
• 1 •
Объект создается рядом конструкторов:
My_date=newDate( )
пустой список параметров создает объект, значени-
ем которого является текущая дата.
My_date=newDate("Sepfe/7?ber 1, 2001 17:00:00")
задающим параметром является текстовая строка ви-
да «месяц день год иасы:минуты:секунды». Отсутст-
вие часов, минут и секунд в инициализирующей
строке означает, что они полагаются равными нулю.
My_date=new Date (200 7, 1,9, 17,о,о,о)
задает дату, часы, минуты, секунды и миллисекунды
в цифровом виде. Ранние версии браузеров могут не
распознавать миллисекунды, что приводит к ошиб-
кам. Поэтому их желательно не задавать. Допускаются
конструкторы, в которых отсутствуют секунды, ми-
нуты и часы.
My_date=new Bate (2700008217) ~
любая дата в конечном итоге в компьютере пред-
ставляется в виде числа миллисекунд с 1 января
1970 года. Допускается конструктор вышеприведен-
ного вида.
1 Все возвращаемые значения даты и времени по умолчанию со-
держат местное время пользователя.
Глава 27. Встроенные объекты
259
Свойство
prototype добавляет новые свойства и методы экземплярам объектов Date.
Методы:
getDate() возвращает значение месяца, указанного при созда- нии объекта. Например, запись My_date.getDate() вер- нет значение, равное девяти.
getDay() возвращает номер дня недели. Отсчет начинается с воскресенъя, которое имеет порядковый номер о, по- неделъник — 1, вторник — 2 и т.д.
getFullYear() возвращает значение года.
getHours() возвращает время суток, которое может изменятъся от о до 24 часов.
GetMilliseconds() возвращаетчисло миллисекунд, хранящихся в Date.
Значения находятся в диапазоне от о до 999.
getSeconds() возвращает число секунд в объекте Date. Значения находятся в диапазоне от о до 59.
getMinutes() возвращает число минут, хранящихся в Date. Значе- ния находятся в диапазоне от о до 59.
getMonth() возвращает порядковъш номер месяца, указанного в объекте Date. Значения находятся в диапазоне от Одо л (январь имеет значение о).
getTime() возвращает время в миллисекундах, которое прошло с 1 января 1970 года до даты, указанной в объекте Date.
getIimezoneOffset()
возвращает разницу между временем по Гринвичу и местным временем пользователя в минутах. Часо- вые пояса, расположенные восточнее Гринвичского меридиана, имеют положительные значения, а за- паднее — отрицательные. Значения находятся в диа- пазоне от -720ДО 720.
Следующие функции имеют аббревиатуру UTC (Universal Time
Coordinate), что означает современное название Гринвичского вре-
мени.
260 Часть4. JavaScript
___—.. ---------------------------------------------------- ----------.... -----]
getUTCDate() возвращает месяц, указанный в объекте Date, в фор-
lit gecUTCDay() мате UTC. возвращает номер дня недели. Отсчет в формате UTC также начинается с воскресенвя.
getUTCFulLYearO возвращает значение года в формате UTC.
getUTCHours() возвращает время суток по Гринвичу, которое мо- жет изменятвся от 0 до 24 часов.
g etU ТС M ittiseco ndsO
возвращает число миллисекунд, хранящихся в объ- екте Date, в формате UTC. Значения находятся в ди- апазоне от 0 до 999.
getUTCSecondsQ возвращает число секунд в объекте Date, в формате UTC. Значения находятся в диапазоне от 0 до 59.
getUTCMinutes() возвращает число минут, хранящихся в Date, в фор- мате UTC. Значения находятся в диапазоне от Одо 59.
getUTCMonth() возвращает порядковый номер месяца, указанно- го в объекте Date, в формате UTC, Значения на- ходятся в диапазоне от 0 до 11 (январи соответствует значению 0).
getUTCTime() возвращает время в миллисекундах, которое про- шло с 1 января 1970 года до даты, указанной объ- ектом Date, в формате UTC.
parse() анализирует значение даты, заданной в виде стро- ки, и возвращает его в миллисекундах. Например: parse (String_Date)
setDate() изменяет значение месяца, указанного в качестве числового параметра объекта Date.
setFullYear() в качестве параметра задается числовое значение года, которое и будет значением объекта Date.
setHoursQ аналогично устанавливает часы объекта Date.
setMHliseconds() устанавливает миллисекунды.
setMinutes() устанавливает минуты.
setMonthQ устанавливает месяц.
Глава 27. Встроенные объекты
261
setSecondsQ устанавливает секунды.
setUTCDate() устанавливает месяц во всемирном времени объек- та Date. э
setUTCFullYearQ устанавливает год в формате UTC.
setUTCHoursO устанавливает часы в формате UTC.
о -
setUTCMillisecondsQ
setUTCMinutes() устанавливает число миллисекунд в формате UTC. устанавливает минуты в формате UTC.
setUTCMonthtl устанавливает месяц года в формате UTC объекта Date.
setUTCSeconds() устанавливает число секунд в формате UTC объ- екта Date. Значения могут находиться в диапазоне от 0 до 59.
setYear() устанавливает год в формате UTC объекта Date.
toGMTString() возвращает значение объекта Date во всемирном времени в виде строки (формат строки см. в начале п. 27.5).
toLocaleString() возвращает даты в местном времени пользователя в виде строки.
toString() преобразует дату в строку.
toUTCString() возвращает дату во всемирном времени в виде строки.
Date.UTC() возвращает разницу в миллисекундах между указан- ной датой и 1 января 1970 года. Метод относится ко всему классу Date.
valueOf() возвращает значение объекта.
В следующем примере объект Date используется для вывода те-
кущего времени.
Пример 25.
1
2
3
4
5
6
<html>
<head>
<title></title>
<script language=javascript>
<!—
function clockGoQ
262
Часть 4. JavaScript
7 1 {
8 var time=new Date();
9 । var temp=time toLocaleString();
10 document.all.clock. value=temp;
11 setTimeoutf'clockGoO",! 000);
12 j
13 -></SCRIPT>
14 </head>
15 <body>
16 <h2 onmouseover="clockGo(),,>4acb)</h2>
17 CINPUT id=clock type=,,text" size=lB value="">
18 </body>
19 </html>
Строка 16: выводится заголовок «Часы» (рис. 4.3). Строка 17: под заголовком выводится пустое поле ввода текста. Строка 19: выведен весь документ; исполняемые функции за-
гружены в память и ждут вызова.
Рис. 4.3. Использование объекта Date для вывода текущего времени
Интерактивная часть. При подведении указателя мыши к заголов-
ку «Часы» часы начинают идти. Функция dockGoQ подключается как
обработчик события onmouseover. В пустом поле появляется теку-
щая дата и время. При вызове функции создается экземпляр объекта
Date с именем time (строка 7). Он сразу инициализируется датой и
временем, считанными из системного таймера компьютера. В строке
9 вызывается метод toLocaleString(), возвращающий дату и время пре-
образованными в текстовую строку, которая становится значением
переменной temp. В строке 10 текстовая строка temp назначается
значением атрибута value для элемента с идентификатором id="ciock"
(а это элемент HTML <input>); осуществляется это специальными
средствами JavaScript, о чем мы подробно поговорим далее. Боаузер
сразу же отображает новое значение атрибута в соответствующем по-
ле. Строка 11 через 1000 миллисекунд (одна секунда) снова вызывает
функцию dockGo(), которая обновляет дату, что ввдно по изменяю-
щимся секундам.
Глава 27. Встроенные объекты
263
Приведенная программа легко может быть модернизирована
для вывода часов или секундомера. В этом случае придется исполь-
зовать другие методы Date, возвращающие часы, минуты и секунды.
27.6
I Объект Math
Объект Math применяется для вычисления ряда функций и по-
лучения математических постоянных. Константы доступны как
свойства объекта, а математические функции — как методы. Пояс-
ним последнее на примере. Встроенный оператор «+» при желании
можно заменить функцией Sum():
Sum(x,y){
var а=х+у;
return а;
}
которая возвращает значение х+у. Операция суммирования вместо
привычного ввда а=х+уимелц бы ввд а=8ит(х,у). Если бы функция
5ит(х,у)являлась объектом Math, то она вызывалась бы следующим
образом: Math. Sum (х,у).
Если привычное суммирование нет смысла заменять функцией,
то операции, перечисленные ниже, оформляются именно в виде функ-
ций объекта Math.
В отличие от других объектов, Math не позволяет создавать мно-
жество экземпляров с индивидуальными именами, поэтому исполь-
зуется одно общее имя Math.
Свойства:
задает число е.
Например:
var a=Math.E + b
PI
SQRT2
возвращает значение числа п.
Например:
var a=Math.P/
возвращает квадратный корень числа 2.
264 Часть 4. JavaScript
Методы: - - - ~
abs(x) возвращает модуль числа x.
acos(x) возвращает арккосинус (в радианах) числа х.
asin(x) возвращает арксинус (в радианах) числа х.
atan(x) возвращает арктангенс (в радианах) числа х.
ceil(x) возвращает ближайшее целое число, больше либо равное х.
cos(x) возвращает косинус числа х, выраженного в радианах.
exp(x) возвращает е*.
floor(x) возвращает ближайшее целое число, меньше либо равное х.
log(x) возвращает натуральный логарифм х. Для вычисле- ния логарифмов с другими основаниями объект Math имеет еще несколько констант.
тах(х,у) возвращает наибольшее число из X и у.
min(x,y) возвращает наименьшее число из х и у.
pow(x,y) возвращает ху.
Например:
var a=pow(x,s)
random() возвращает псевдослучайное число в диапазоне от О до 1.
round(x) возвращает результат округления числа с плаваю- щей точкой.
sin(x) возвращает синус числа х, выраженного в радианах.
sqrt(x) возвращает корень из числа х.
tan (x) возвращает тангенс числа х, выраженного в радианах.
27.7 ,
] Объект Function
Функцию можно не только объявлять, как статичную заранее
определенную подпрофамму, но и делать объектом, который мо-
жет динамически создаваться во время выполнения программы и
Глава 27. Встроенные объекты
265
удаляться из памяти после его использования. Это экономит ресур-
сы, но увеличивает время выполнения программы.
Для динамического создания функция задается при помощи
конструктора
var my_function = new Function (arg_1, arg__2,..., function_body);
После создания функция используется как обычная, вызываясь
по тем же правилам и с тем же синтаксисом.
Для примера создадим простую функцию, сравнивающую два
значения и возвращающую большее из них
varmy_max = new Function "return
В качестве названия функции может использоваться имя пере-
менной или метода уже существующего объекта. Таковым может
быть обработчик события (например, document.onclick), с которым
мы встретимся далее.
В следующем примере показан код, проверяющий работоспо-
собность созданной таким образом функции. В строке 7 для срав-
нения показан пример классического объявления функции. Ее
можно проверить, убрав комментарий и сделав комментарием
строку 8.
Пример 26.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<title>Function</title>
</head>
<body>
<script type=“text/javascript"><!-
//fu notion my_max(x,y)
{
return (x>y?x:y);
}
var my_max = new Function ("xTy", "return (x>y?x:y);");
var x=9;
var y=10;
--></script>
<Ы>Динамическое создание функции</Ы>
cinput type="Submit" namC="Submit1" value="BbiacHH максимум"
onclick= "alertfmax = '+my_max(x,y));“ >
</body>
</html>
266
Часть 4. JavaScript
В приведенном примере коды HTML и JavaScript различаются
Начертаниями шрифта.
Нажатие кнопки (строка 16) передаст управление обработчику со-
бытия, который в окне браузера вызовет окошко сообщений (функ-
ция atert(...)). Во время вычисления выражения-параметра для alert
будет вызвана функция my_max(x,y), которая возвратит максималь-
ное значение. В окошке будет выведена строка со значением мак-
симума (рис. 4.4).
Рис. 4.4. Результат вызова функции
Function может использоваться для организации конструкторов.
Объект Function имеет ряд полезных свойств:
arguments возвращает массив аргументов.
length возвращает число заданных аргументов.
prototype данный метод позволяет определять новые свойства
объекта.
toString возвращает значение объекта в виде строки.
valueOf возвращает значение функции.
267
Глава 27. Встроенные объекты
I —
27.8 w____________________________________________________
1 Объект Object
if! ’ '
Он создает объекты общего вида, для которых можно задавать
свои свойства и методы. По сути Object позволяет пользователю со-
здавать свой собственный класс, при помощи которого можно объяв-
лять необходимое количество однотипных объектов.
Конструктор объекта имеет вид
var my_Obj = new Object(); *
Свойства:
prototype позволяет назначать новые свойства и методы буду-
щим экземплярам объекта Object.
constructor возвращает код конструктора.
Методы:
toString() возвращает значение объекта, преобразованное в строку.
vaLueOf() возвращает значение объекта.
Рассмотрим пример, в котором организуется не отдельный объект,
а класс, позволяющий строить множество конкретных объектов (team,
team_1, team_2 и т.д.).
Пример 27.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<title>Object</title>
<script type=,,text/javascript"><!-
Object.prototype.ЬгЬ/ег^'Козлевич'';
function show()
{
alert(this.driver);
}
Object.prototype.go=show;
var team=new Object();
team.go();
--></script>
</head>
<body>
</body>
</html>
268
Часть 4. JavaScript
Рис. 4.5. Создание объекта
Строка 5 задает для объекта свойство-строку driver, которая будет
присутствовать во всех будущих конкретных экземплярах Object. Это
свойство сразу же инициализируется для всего класса Object (води-
тели во всех командах — team, team_2 и т.д. — будут тез-
ками и будут носить одну и ту же фамилию Козлевич").
Строки 6~9 определяют функцию show().
Строка 10 определяет метод до() для всех будущих объектов.
Свойство go будет указателем на функцию show.
Строка 11: динамически создается конкретный объект класса
Object с именем team.
В строке 12 осуществляется проверка работоспособности со-
зданного объекта. Вызывается метод до(), который выводит значе-
ние свойства.
Результатом выполнения этого кода будет окно (рис. 4.5), с запи-
санным в нем свойством driver, принадлежащим объекту team при
помощи метода до. Следует обратить внимание на разницу в объ-
явлении свойств и методов и их извлечении (использовании).
27.9 ,
Т Глобальные функции
Существуют функции, не являющиеся методами какого-либо
объекта. Они называются глобальными. Могут использоваться в
любом месте и не требуют использования точечной нотации для
доступа к ним.
Глава 27. Встроенные объекты
269
Функция eval()
eval(codestring) аргументом функции является строка (объект String),
содержащая исполняемый код JavaScript. Метод eval
анализирует строку и сообщает интерпретатору, что
ее немедленно надо выполнить.
Эта глобальная функция позволяет сформировать строку кода
и выполнить ее.
Например, если в программе определено значение element, то
следующая строка:
eval( “documenf’+element+". style. color= black”')’,
в процессе выполнения назначит этому элементу через стили чер-
ный цвет.
Функции escape(url) и unescape()
escape(url) готовит строку для отправки на сервер в составе
URI. Например, пробелы переводятся в набор симво-
лов %20. Знак «+» не кодируется, поскольку он ис-
пользуется как служебный. Для его кодировки после
URI добавляется строка “,1”.
unescape() выполняет обратную операцию, декодируя строку,
переданную сервером, в вид, пригодный для чтения
и разбора.
Функции parselnt() и parse FloatQ
parselnt(string) выполняет анализ строки string, заданной в качест-
ве параметра и, если она начинается с цифры, воз-
вращает первое найденное целое число. Строка
может содержать начальные пробелы. Если первый
символ — не цифра и не пробел, то возвращает
значение 7Vh7V(Not a Number).
parseFloat(string) работает аналогично предыдущей функции, но, как
следует из названия, возвращает целое или вещест-
венное значение. Строка может содержать началь-
ные пробелы. Если первый символ — не цифра и
не пробел, то возвращает значение NaN.
270 Часть 4. JavaScript
— . -- _ _ ___~~т 1 —.
Функции isFinite() и isNaN()
isFin.te() вычисляет выражение, заданное в качестви параме-
тра, и возвращает логическое true, если результат
вычисления находится в пределах от MIN VALUE до
MAX^VALUE.
isNaNQ вычисляет выражение, заданное в качестве параме-
тра, и возвращает логическое true, если оно не явля-
ется числом.
Объекты браузера
I
Глава 28
Возможность построения объектов позволяет создавать полезные
библиотеки для использования в различных областях. Такие биб-
лиотеки образуют надстройки или расширения к базовой части
языка. Применительно к Web-сервису расширения разрабатываются
для поддержки серверов (их мы рассматривать не будем) и для кли-
ентов. Вполне естественно встраивать -библиотеки в программы,
которые с ними работают. Поэтому серверные расширения встра-
иваются в программу Web-сервера, а клиентская часть — в браузер.
Совокупность объектов, поддерживаемая браузером, называется объ-
ектной моделью браузера.
В разных браузерах сконструированы разные коллекции объек-
тов. Поэтому если скрипт-код содержит объекты, поддерживаемые
только NN, то он не будет работать в IE, и наоборот. Это не значит,
что все объекты не будут создаваться. Однако в программе, в отли-
чие от HTML-кода, зачастую достаточно не выполнить одну строку
и остальная часть теряет смысл.
Выход из положения находят в том, что программу делают оди-
наковой в той части, которая может читаться обоими браузерами,
и разветвляют на две или более линий в тех местах, где приходится
использовать уникальные объекты. Благо, JavaScript поддерживает
возможность определения типа браузера.
Далее мы постараемся описывать в основном объекты, общие
для основных браузеров, останавливаясь, по мере необходимости,
на различиях.
28.1 ,
! Иерархия объектов
Когда браузер представляет документ в своем окне, он строит ряд
объектов в иерархическом порядке (рис. 4.6). Старшим в этой иерар-
хии является объект window, предназначенный для, работы с окном.
Манипулируя его свойствами, можно управлять настройками самого
окна (например, выводить или убирать панели управления, изменять
размеры окна, управлять фреймами), открывать и закрыть окно
272
Часть 4. JavaScript
" 2Z------1
Рис. 4.6. Иерархия объектов браузера
программным путем, а также загружать или получать доступ к уже
загруженному документу и к содержащимся в нем элементам.
28.2 ,•
Управление окном.
Объект window
Объект window создается в момент открытия окна браузера и су-
ществует до его закрытия. Смена документов в окне отражается на
открытии и закрытии (удалении) объектов document, но объект
window продолжает существовать. Каждый объект window ассоцииру-
ется с одним окном.
Объект обладает большим количеством свойств, изменение ко-
торых позволяет управлять видом окна, чего практически невоз-
можно добиться средствами НТМ L.
Свойства-объекты, представленные в иерархии (см. рис. 4.6),
рассматриваются в отдельных параграфах.
Среди свойств объекта window отметим следующие:
пате задает имя окна. Используется для распознавания
окна при выводе. Напомним, что с именем окна ра-
ботают некоторые HTML-элементы, имеющие ат-
рибут target.
Например, в элементе
<а href='...’ target—navigator_window>...</a>
строка ftavigator_windowRBn%&TC% именем окна; она бу-
дет храниться в переменной window.name.
opener
содержит ссылку на окно, открывшее данное.
Глава 28. Объекты браузера
273
parent содержит ссылку на родительское окно или фрейм,
в котором открыт данный фрейм.
self содержит ссылку на текущее окно.
top содержит ссылку на верхнее окно на экране (бли-
жайшее к пользователю).
defaultstatus значением является текст, отображаемый в строке
состояния окна по умолчанию.
Создание и закрытие окон. Окна бывают разные, это необяза-
тельно полноценное окно браузера. Это может быть окно-преду-
преждение или окно для ввода данных. Все окна делятся на мо-
дальные и немодальные. Модальное окно — это чаще всего окно
предупреждения или диалога, которое пользователь должен за-
крыть, чтобы продолжать работу, иначе доступ к приложению, от-
крывшему окно, будет невозможен. Немодальность окна подразу-
мевает, что окно открывается независимо и не останавливает
работу приложения. Например, в Microsoft Word это окно «Найти/
Заменить». Для открытия окон существует ряд методов. Немодаль-
ное окно браузера открывается при помощи метода
open( [ uri], [ name], [прочие параметры ])
это программный аналог пункта меню браузера (File)
Файл ► (New) Создать. Все параметры, как видно из
синтаксиса, необязательные (здесь и далее они ука-
зываются в квадратных скобках). В качестве пара-
метров используются переменные или заранее опре-
деленные строковые константы (литералы).
uri задает адрес загружаемого документа.
пате задает имя окна.
Прочие параметры записываются в одну строку и
задают вид окна, наличие полос прокрутки, ширину,
высоту, положение левого верхнего угла на экране
и т.п. Например: win_map=window.open("map_ru.wn?/",
мМу_тар", "status=no, toolbar^ по, menubar=no, width=3i5,
height-380, top=25, left=29&'); Этот метод открывает
вспомогательное окно (без строки состояния, панели
инструментов и меню), в которое загружает файл с
относительным адресом map_ru.html (рис. 4.7). Пе-
ременная win. map указывает на этот объект-окно и в
дальнейшем может быть использована для закрытия
именно этого окна программным путем.
274
Часть 4. JavaScript
3 Технологии электронных публикаций: HTML, CSS... ИГЕЮ
И. Мархвида
Создание web-страниц; HTML, CSS, JavaScript
КнигапосвященаосновныйтехнологиямнаписанияууеЬ-
страниц: языку гипертекстовой разметки HTML,
применению каскадныхтаблицстилейС85,атакже
созданию скриптов на основе JavaScript.
Рис. 4.7. Программным путем открыто новое окно браузера (без меню,
кнопок, адресной строки и строки состояния); настройками самого
браузера такое окно установить нельзя
rclose() закрывает существующее окно, параметров не имеет.
Например, предыдущее окно закрывается при помощи
строки win_map.close(). Если закрытие производится
из самого окна, то управление передается родитель-
скому окну.
а1ег1:(сообщение) с этой функцией мы уже встречались. Она широко
применяется для открытия служебных модальных
окон, выводящих сообщение или данные и имеющих
одну кнопку «ОК». Нажатие ее приводит к закрытию
окна сообщений и дает возможность продолжать ра-
боту с браузером (рис. 4.8).
confirm (сообщение)
функция, аналогичная alert, только выводит две кноп-
ки «ОК» (возвращаемое значение — true) и «Cancel»
(возвращаемое значение — false) (рис. 4.9).
Глава 28. Объекты браузера
275
рготр!(сообщение [, default_text])
открывает также модальное диалоговое окно, в ко-
тором выводится сообщение (message), и которое,
кроме того, запрашивает данные у пользователя. В
поле запроса сразу может быть выведена перемен-
ная (строка) default-textfpnc. 4.10).
focus передает окну фокус ввода (делает окно активным),
blur указывает, что окно теряет фокус ввода.
status(message) в строке состояния отображает сообщение (message).
Microsoft Internet Explorer
окно window alert()
OK
Рис. 4.8. Окно alert
Рис. 4.9. Окно confirm
В заключение — несколько слов об использовании указателей ок-
на. Если все действия развиваются в одном окне, где объект window
276
Часть 4. JavaScript
"1
является старшим в иерархии, то при вызове свойств и методов
этого окна явно указывать на сам объект window не нужно. Это от-
носится и к его свойству self, которое также возвращает указатель
на окно. Например., приведенные ниже обращения будут одинако-
выми:
window.document.forms[2J;
self document.forms[2];
document.forms[21;
28.3 ,
I Объект frames
Фреймы можно создавать и манипулировать ими не только из
HTML, но и из JavaScript. В этом случае фреймы рассматриваются
как объекты window. Объект frames содержит массив организованных
в главном окне фреймов в порядке их появления в документе или
в элементе <frameset>. Этот объект позволяет получать доступ к кон-
кретному фрейму. Например: window.frames/О/ — обращение к пер-
вому фрейму.
Фреймы являются разновидностью окна (окно в окне), и на-
бор их свойств совпадает с набором свойств window. По сути, это
один и тот же объект, но обращение к подокнам через frames де-
лает код «прозрачнее» и понятнее. Поэтому обращения windowfO/
и window.framesfO/, эквивалентные.
Параметры разделения экрана на фреймы (размеры и т.п.) на-
ходятся в объектах document.
Фреймы имеют те же свойства, что и окна, за исключением
length содержит количество фреймов в окне.
28.4 ,___________________________________________________
I Объект history
Объект history хранит массив адресов просмотренных страниц и
позволяет программным путем реализовывать действия, которые
пользовате гть совершает, пользуясь такими средствами навигации,
как кнопки браузера «Журнал», «Вперед» и «Назад».
Свойство
length
содержит количество элементов (загрузок) в объекте
history.
Глава 28. Объекты браузера
277
Методы:
back() выполняет действия, аналогичные нажатию кнопки Back («Назад»): загружает предыдущую страницу. Например, следующий, код создаст на странице (не в строке меню браузера!) кнопку Back («Назад»), дублирующую действия такой же кнопки браузера: Cinput type= "button" 1/аЛ/е=’Ьаск" onc//ck='’history.back();">
forward () выполняет аналогичные действия. Загружает следу- ющую страницу из списка просмотренных.
go(> позволяет загружать любую из просмотренных страниц. Например, обращение до (-2) вызовет страницу, которая была на экране до предыдущей. После пе- рехода на страницу она становится текущей, и ее номер становится равен нулю.
28.5 ,
I Объект location
Объект location хранит информацию об URI загруженного в бра-
узер документа. Его свойства доступны как для чтения, так и для
записи. Изменение свойств приводит к перезагрузке документа.
Кроме window свойство location может быть и у фреймов.
Свойства:
href hash хранит полный указатель загруженного документа. хранит ту часть указателя, которая следует за знаком
host «#» («закладка»). хранит доменное имя сервера или его IP-адрес и но- мер порта.
hostname хранит только доменное имя сервера или его IP-ад- рес.
pathname хранит путь к документу на сервере (каталог и имя файла).
port номер порта.
278
Часть 4. JavaScript
protocol содержит протокол загрузки.
search часть строки запроса, следующая за вопроситель-. ным знаком^
Методы:
reloadO
I
replace(uri)
перезагружает текущий докумен. Аналог кнопки «Об-
новить».
загружает новый документ с указанным в качестве
параметра адресом. При этом удаляются старые зна-
чения объекта history. Вследствие этого кнопка «На-
зад» (back) и метод history.back не позволяют загру-
зить предыдущие страницы.
Например:
window, location = url;
где url — строка с адресом.
28.6 ,________________________________________________________
| Объект navigator
Информация о браузере имеет важное значение для правильно-
го написания кода. Обусловлено это тем, что существует различие
между рядом объектов, поддерживаемых разными браузерами. Та-
кую информацию скрипт всегда может получить. Она может быть
использована непосредственно в скрипте этой же страницы, так,
чтобы код HTML был правильно динамически сгенерирован. Ин-
формация о версии браузера может быть отправлена и на сервер,
откуда придет уже полностью сформированный документ, учиты-
вающий специфику браузера.
Эта информация доступна через свойство navigator. Internet Explorer
старше версии 4.р поддерживает свойство-синоним — clientinformation.
Свойство является объектом, который, в свою очередь, сам обладает
рядом свойств:
» appName — строка, содержащая имя браузера;
* appVersion — информация о версии браузера;
* appCodeName — кодовое имя браузера;
» userAgent— строка, используемая в заголовке НТТР-пакета,
посылаемого браузером серверу;
» platform — строка с информацией о платформе;
Глава 28. Объекты браузера
279
* plugins — массив, содержащий информацию о дополнитель-
ных модулях, которые поддерживает браузер;
* mimeTypes — массив, содержащий информацию о типах дан-
ных, поддерживаемых браузером.
Имя браузера содержится в свойстве appName. Для NN оно
принимает значение "Netscape", так что все браузеры NN отделяются
от прочих элементарной проверкой
if (navigator. appName == "Netscape’}
или
if(window.navigator.app/\/ame == "Netscape’}
Для IE это свойство принимает значение "Microsoft internet Explorer".
После того как определен тип браузера, можно определить и его
версию. Версия браузера содержится в свойстве appVersion в формате
Версия (платформа; информация [.'дополнительная информация])
Например, navigator.appVersionдля Netscape Navigator 4.0 имеет
вид строки 4.0(Win95;l). Поле «информация» содержит данные о ши-
фровании продукта (в США существуют ограничения на экспорт
программного обеспечения), / в данном случае означает междуна-
родную версию, и — американскую. Netscape Navigator 6.0 имеет
внутренний номер версии 5.
IE возвращает несколько другую строку: 4.0 (compatible; MSIE 5.0;
Windows 98). При этом в поле «платформа» IE записывает значение
compatible (совместимый), а название платформы помещается в поле
«дополнительная информация». Кстати IE 3.0 имеет внутренний
номер версии 2.
Выделить номер версии для NN можно, например, используя
функцию разбора строк parselnt():
var version = parseInt(navigator.appVers/on);
Для IE точное определение версии несколько сложнее (см.
пример 8).
Кодовое имя браузеров содержится в appCodeName и имеет зна-
чение ‘Mozilla".
userAgent — строка содержит кодовое имя и номер версии, объ-
единяя через слеш свойства appCodeName/appVersion.
userLanguage — указывает язык, используемый пользователем.
280
Часть 4. JavaScript
К сожалению, браузеры возвращают информацию о версии в раз-
ном формате, из-за чего не удается использовать перечисленные
свойства непосредственно, а приходится производить дополнитель-
ный анализ строк. Ситуация усложняется тем, что общепринятые
имена и версии программ не совпадают с их кодовыми номерами и
названиями, установленными разработчиками. Пример 28 показыва-
ет один из возможных путей определения данных о браузере и пред-
ставление ее в общеизвестном формате. Программа определяет толь-
ко наиболее распространенные версии браузеров.
Пример 28.
1
2
3
4
5
6
7
8
9
10
И
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<title>navigator</title>
Cscript language=javascript>
<!—
function getnavigator()
{
var name, ver;
if (navigator.appname == 'microsoft internet explorer*)
name="internet explorer";
// выясняем номер версии для ie
if (navigator.appversion.indexof("msie 4") > 0 ) ver=4;
else if (navigator.appversion.indexoff'msie 5.5") > 0) ver=5.5;
else if (navigator.appversion.indexoff'msie 5") > 0) ver=5;
}
else if (navigator.appname == "netscape")
{
name= netscape navigator";
// выясняем номер версии для nn
if (parseint(navigator, appversion) == 5)
ver=6;
else
ver=“ 4 или даже более ранней";
}
else
{ пате="не распознанный браузер";
}
а1ег1("кажется, что у вас установлен "+name+" версии " +ver);
//document.write("<p>Bbr пользуетесь браузером ,,+name+ver+"</p>");
}
//-->
</script>
</head>
<body>
cinput type="button" name=*'navigator" уа1ие="определить браузер"
onclick="getnavigator();“>
</body>
</html>
Глава 28. Объекты браузера
281
Строка 6. Начало реализации функции GetNavigator()
Строка 7. Объявление двух переменных пате и ver, в которых
помещается имя и версия браузера.
Строки 9~ 16. Определение браузера IE и его версии. Функция
indexOf() применяется к строкам и ищет в них подстроку, заданную
параметром.
Строки 17-25. Определение браузера NN и его версии проис-
ходит несколько проще, поскольку строка с данными имеет более
простой формат.
Строка 29. Вывод информации в отдельное окно.
Строка 30: полученную информацию можно использовать раз-
личным образом. Например, вывести на новой строницс. Для этого
надо снять комментарии с этой строки. Функция write() будет по-
дробно рассмотрена в главе 29.
Строки 35—37: тело страницы, где организуется вывод кнопки.
При ее нажатии запускается функция GetNavigator(), в которой оп-
ределяется тип браузера и номер версии.
28.7 _
— ....... _ ' —
I "
1 Таймер
Таймеры предназначены для отсчета интервалов времени и ге-
нерации сообщения, запускающего какую-либо функцию или про-
грамму. Для объекта window существуют два вида таймеров.
Однократный таймер. Таймер такого типа генерирует одно уп-
равляющее сообщение через заданный промежуток времени. Уп-
равляется двумя методами:
282
Часть 4. JavaScript
setTimeout(script, time)
данный метод запускает таймер после вызова и спу-
стя йше миллисекунд после начала вызывает функ-
цию или выполняет код в строке script. Возвращает
указатель на объект таймера.
Например:
ptrTimer = setTimeout("doit()", 10000);
dearTimeout(ptrTimer)
уничтожает таймер, созданный методом setTimeout().
В качестве параметра задается значение указателя на
уничтожаемый таймер.
Периодический таймер. Таймеры этого типа генерируют управ-
ляющие сообщения регулярно через заданный интервал времени.
Имеют два основных метода:
setlnterval(script time)
управляющее сообщение генерируется через каждые
time миллисекунд и запускает на выполнение код,
встроенный в строке script или вызывает внешнюю
функцию;
clearlnterval(ptrTimer)
уничтожает таймер, созданный методом setTimeout().
В качестве параметра задается значение указателя на
уничтожаемый таймер.
Приведенный пример иллюстрирует один из возможных методов
моделирования периодического таймера при помощи однократного.
Пример 29. Таймер
1
2
3
4
5
6
7
8
9
<html>
<head>
<Ш1е>таймер</Ш1е>
<script language=javascript>
<!-
var intsecond =0;
function TimerGo()
< if ( intsecond <10 )
Глава 28. Объекты браузера
283
10
И
12
13
14
15
16
17
18
19
20
21
22
23
24
{
intsecond++;
document.all.my_timer.innertext=intsecond+"
settimeoutfTi merGo()', 10ОО)
}
}
//->
</script>
</head>
cbody onload = "settimeoutCTimerGoO'JOOO)'^
прошло
<span id="my_timer"> 0 </span> •
секунд
</body>
</html>
Строка 9. Ограничивается число секунд, время действия функ-
ции и определяется число вызовов функции TimerGo().
Строка 11. Увеличивается текущее значение секундомера на
единицу.
Строка 12. Преобразуется элемент <span>, после чего автомати-
чески меняется его отображение на экране. К рассмотрению по-
добных процедур мы вернемся позднее, в параграфе про динами-
ческое содержание.
Строка 13. Устанавливается таймер, который через секунду сно-
ва вызовет функцию TimerGo().
Строка 14-15. Заканчивается функция TimerGo().
Прошла 1 секунда: срабатывает «мина замедленного действия»,
заложенная в строке 13. Цикл повторяется. При значении intSecond
равном ю программа пойдет по другой ветви на строку 15, минуя
установку таймера и очередной запуск TimerGo().
Строка 19. Начинается загрузка контента. К этому моменту
функция TimerGo() уже загружена в память.
Строка 21. Количество выводимых секунд включено в элемент
<span> с идентификатором для того, чтобы получить к нему доступ
позднее и иметь возможность его изменить. Изменить эту запись
только средствами HTML после загрузки страницы было бы невоз-
можно.
Строка 23. Загрузка страницы завершена. После загрузки стра-
ницы будет сгенерировано событие load, обработчик которого задан
в атрибуте onload() элемента <body> в строке 19. Будет установлен
таймер на одну секунду, спустя которую вызовется первый раз функ-
ция TimerGo. Начинается функция TimerGo().
Объектная модель
документа
Глава 29
До сих пор мы рассматривали объекты, которые касались в ос-
новном управления браузером, но не затрагивали сам документ,
представляемый в окне браузера. Впервые модель объектов, соответ-
ствующих элементам и атрибутам HTML, была реализована в NN 2.
Она позволяла управлять лишь несколькими параметрами элемен-
тов. Важным этапом в развитии моделей объектов стал IE 4, кол-
лекция объектов которого позволяла получить доступ ко всем эле-
ментам документа. В настоящее время организация W3C установила
стандарт для объектов, которые связаны с отображением документа.
Стандарт называется DOM (Document Object Model), и в русско-
язычной литературе фигурирует как объектная модель документа.
В основе рекомендаций W3C лежат разработки Microsoft. Стандарты
W3C позволяют разрабатывать интерфейсы прикладного программи-
рования для HTML-документов, не зависящие от языка и системы.
Объектная модель документа позволяет при загрузке Web-стра-
ницы создать набор программных элементов, которые полностью
воспроизводят логическую структуру страницы, заданную тегами
HTML. Манипулируя этими объектами, можно полностью управ-
лять элементами страницы: оформлением, положением, появлени-
ем и т.п. Эта модель переносит в HTML концепции XML, при
котором линейный текст файла разбивается на иерархическое де-
рево узлов, удобное для различных манипуляций с элементами.
DOM тоже неоднороден. Первая его версия, или уровень (Level 1),
работает с более простыми объектами — массивом конкретных эле-
ментов HTML. Вторая версия (Level 2) позволяет работать с эле-
ментами как с более абстрактными объектами-узлами, связанными
соотношениями наследования и родства. При использовании этой
модели нет необходимости опускаться до уровня конкретных эле-
ментов HTML, а можно работать с элементами как с узлами логи-
ческого дерева, которые можно удалять, перемещать, добавлять и т.д.,
что значительно сокращает код. Мы ограничимся лишь рассмотре-
нием первой версии DOM, более простой и доступной, но вполне
Глава 29. Объектная модель документа
285
достаточной для разработки большинства Web-страниц, возникаю-
щих в воображении
Если IE 4 реализовывал объектную модель, утвержденную W3C
только частично, го, по заявлениям разработчиков, IE 5 и NN 6
полностью поддерживают стандарт DOM Level 1. Сегодня прохо-
дит испытание версия DOM Level 2, ядро которой поддерживает
браузер NN 6.
29.1 ,______________________________________________________
I Объект document
Объект document является наиболее важным свойством объекта
window. Он имеет множество собственных свойств и методов. Одни
из них являются общими и присущи каждому из объектов document.
Среди них, например, метод write() или свойство bgColor— цвет
фона документа. Но наиболее важна вторая часть, которая возни-
кает динамически при анализе контента. Это набор конкретных
объектов, порождаемых объектом document, каждый из которых
соответствует элементу HTML. Их набор определяется содержи-
мым страницы. Эти объекты образуют собственную иерархию в ви-
де дерева. Они включают в себя всю информацию, которая содер-
жится в документе, в том числе и раздел <head>, несущий служебную
информацию. Через объект document можно получить доступ ко
всем элементам страницы и организовать их изменение, генерацию
содержимого контента (HTML-потока) и обработку событий.
Ссылка на объект имеет вид document или window.document, по-
скольку объект document является свойством объекта window. В слу-
чае окна с фреймами каждое из окон-фреймов взаимодействует со
своим документом, например: frame[1].document
29.2 ,______________________________________________________
Иерархия объектов документа
С иерархией объектов в документе мы уже сталкивались, когда
рассматривали наследование стилей в элементах HTML (см. и. 20.6).
Теперь речь пойдет о том, как получить программный доступ к
этим элементам и как ими управлять.
Свойства:
linkColor
позволяет получать и устанавливать цвет ссылок.
286
Часть 4. JavaScript
alinkColor позволяет получать и менять цвет активных ссылок.
vlinkColor Позволяет получать и менять цвет просмотренных ссылок.
fgColor позволяет получать и менять цвет текста (происхо- дит от английского сокращения foreground — перед- ний план, в данном случае — текст).
bgColor определяет цвет фона (от англ, background — задний план).
title свойство-строка, содержащая заголовок документа. Это свойство доступно только для чтения в NN 4, а в IE и NN 6 — как для чтения, так и для записи.
URL строка, содержащая полный адрес документа.
Referer строка, в которой содержится URL-адрес докумен- та, из которого был вызван текущий документ.
Приведем пример использования свойств объекта document.
Пример 30.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<Ш1е>Параметры</Ш1е>
<script type="text/javascript"><!—
function myColorsO {
if(document.bgColor = "tfffffff") document.bgColor="navy";
else document.bgColor="white";
if(document.fgColor == ''#000000") document.fgColor="#ccffff";
else document.fgColor="#000000";
}
— ></script>
</head>
<!-- body style="background-color: white;
<body bgcolor="white">
<h2 Демонстрация доступа</б2>
<div>4epea две минуты Коля понял в первый раз за три месяца
супружеской жизни,
что любимая женщина любит морковные, картофельные и
гороховые сосиски гораздо меньше, чем он.
</div>
<br>
Глава 29. Объектная модель документа
287
23
24
25
26
cinput type="Submit" name="Submit1" value="noMeHHft
onclick="myColors();">
cinput type="Submit" name="Submitr’ ^1ие="Узнай
onclick="alert(window.document.title);">
</body>
c/html>
цвет"
'title”
Обратите внимание, что в строках 6—9 и строке 23 вызов свойств
осуществляется по-разному. В первом случае нет указания на объект
window, т.к. вызов осуществляется из самого объекта. Это аналогично
указанию относительного адреса. Во втором случае указывается явная
ссылка на окно. Такой способ необходим, если вызывается свойство
другого окна или фрейма. Например, если в вышеописанную
функцию myColors вставить код win_map.document.fgcolor=’’^oooooo,’>
то он сделает цвет текста белым в окне из раздела 0, если оно от-
крыто.
Если в документе встречается конфликтная ситуация, когда
цвет фона задается скриптом, а затем устанавливается параметром
элемента, то установка скриптом имеет приоритет. Обратим вни-
мание на строку 13. Если ее превратить из комментария в код, то
браузер не сможет производить смену цвета фона. Это значит, что
свойство bgColor не может изменить установки стиля. Доступ к
стилю осуществляется через другие объекты.
Свойства-массивы. Некоторые очень важные свойства являются
объектами-массивами. Иначе их называют коллекции, или семей-
ства. Каждый из элементов массива в свою очередь сам обладает ря-
дом свойств.
Иерархия свойств-массивов, приведенная на рис. 4.11, реализу-
ется в IE. NN 4 имеет несколько отличную структуру объектов.
Anchors[]
в отличие от предыдущих свойств, алсйогеДявляется
массивом. Каждый из элементов этого массива явля-
ется ссылкой на якорь (anchor), созданный при по-
мощи элемента <а пате=...>, причем параметр пате
обязателен. Напомним, что таким образом чаще
всего создаются метки, предназначенные для орга-
низации переходов внутри документа. При нахож-
дении каждого следующего якоря-метки создается
очередной элемент массива. Нумерация в массивах,
как обычно, начинается с нуля. Доступ к ссылкам
может осуществляться либо по номеру ссылки, на-
пример, document.anchors^;, либо по имени. Если
якорь-метка организуется элементом HTML <а пате=
"bookmark^Переходнаверх</а>, то вызов ссылки осуще-
288
Часть 4. JavaScript
Рис. 4.11. Иерархия свойств-массивов
ствляется так: document.anchors[‘‘bookmark’]. Наконец,
поскольку объект document порождает объект bookmark,
то возможно обращение document.bookmark
forms// массив, содержащий в виде объектов ссылки на все
формы, расположенные в документе. Нумерация
ссылок в массиве и их вызов аналогичны рассмот-
ренным для предыдущего массива anchors.
imagesfj массив изображений, встречающихся в документе.
Iinks[] Массив, содержащий ссылки в документе, которые
организуются элементами HTML <а href=”..."> и
<area href="...">. Элементы массива нумеруются в по-
рядке их появления в документе. Сюда же попадают
и объекты link, созданные конструктором link(...).
Необходимо упомянуть коллекции, которые встречаются доста-
точно часто, но различаются у браузеров IE и NN 4.
Доступ ко всем элементам (попавшим и не попавшим в выше-
перечисленные коллекции) реализуется через массив объектов:
Глава 29. Объектная модель документа
289
all[ ] содержит ссылки на все элементы документа.
Примеры:
documenta// [“bookmark’]
document.а// [5]
layer[] содержит ссылки на все слои (layers), к которым
привязываются различные элементы. Если элемент
имеет имя пате=“Ьооктагкп> то вызов этого объекта
будет иметь вид document.layer [“bookmark"]
В программах, которые должны работать в браузерах
IE и NN одновременно, следует избегать употребления
специфических свойств. Вместо этого используют до-
полнительное кодирование, делающее программу уни-
версальной. Примеры такого кодирования достаточно
широко представлены в литературе.
Методы
Необходимо в первую очередь упомянуть методы
write()
writein ()
Записывают строку "string" в анализируемый браузером поток
контента документа. Таким программным образом, в том числе и ди-
намически, можно формировать текст HTML-документа, выводя
теги HTML и операторы JavaScript. Разница между write() и writeln()
заключается в том, что write Ln () добавляет после строки знак конца
строки (\п). Это различие не проявляется при просмотре результата
браузером, т.к. он не учитывает перенос строк.
open([mime_type]) открывает поток вывода. Проще говоря, создает воз-
можность записи в поток. Функции write() и writeln()
делают эту операцию автоматически. Необязатель-
ный параметр, представляет строку, указывающую
тип mime выводимых данных, чаще всего это Texttitm/".
close() закрывает поток вывода, если он был открыт
функцией ореп().
dear() очищает содержимое документа. Редко использу-
емый метод.
Примеры использования метода writeQ см. в разделе про дина-
мическую генерацию кода.
10 Зак. 1627
290
Часть 4. JavaScript
29.3 ,______________________________________________________________
1 Доступ к элементам
Доступ к элементам можно организовать многими способами.
Во-первых, если речь идет об IE, то можно использовать массив all.
Во-вторых, когда известен номер элемента, то вызов можно осуще-
ствить как вызов элемента массива. Например, если известно, что
ссылка является четвертым элементом в массиве, то ее вызов может
быть осуществлен как
document. all[3j
Вывести все элементы массива можно, например, циклом
for(£=o; i<document.a//./enptf7; /++)
alert (document.all[ij);
или аналогичным.
Идентификацию элемента в массиве осуществить бывает не
всегда просто, поэтому специализированные массивы позволяют
сузить круг поиска, например, массив links, где та же ссылка может
оказаться первым элементом:
document.//n/rs[o]
Надо иметь некоторый навык, чтобы организовать программ-
ную работу с этими элементами, которые остаются «упрятанными»
в эти массивы. Рассмотрим простой пример:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
. <title> AIK/title>
<script type=,,text/javascript"><!-
function review(obj)
{var result="
for(var i in obj){
result+='document.all(’ +i+ ') = ' +obj[i].name+obj[i]+'<br>'
}
return result;
}
-></script>
</head>
<body bgcolor=B#ffffff">
Глава 29. Объектная модель документа
291
15
16
17
18
<а href="http://www.myserver.ru/file.html">3T0 ссылка</а>
<input type="buttoh" value="properties" onclick="document.write
(review(document.links))">
</body>
</html>
В этом примере создаются ссылка (строка 15) и кнопка (строка
16). Вторая позволяет запуртить на выполнение функцию reviewQ,
которая может вывести свойства любого объекта (в нашем
случае — all). При нажатии на кнопку сгенерируется код страницы,
который опубликует свойства, то еств то, что объект all содержит во-
семъ свойств (рис. 4.12). Первое свойство, как нетрудно догадатъся,
показътвает длину массива. Что обозначают остальные свойства,
сразу понять Трудно, поскольку все они безымянны. На самом деле
все они соответствуют элементам HTML.
Проще всего к элементу получить доступ, если он будет имено-
вании, т.е. будет содержать атрибут пате или id. Здесь, собственно,
и кроется причина появления в языке HTML универсального атрибута
id, присутствующего практически у всех элементов HTML. В таком
случае этот элемент становится объектом с соответствующим
именем, например, элементу <а id=”refer">...обудет сопоставлен
объект.
document.a/Z.refer
а также
т document.Z/nfcs.refer
Рис. 4.12. Нажав на кнопку properties, можно увидеть свойства объекта all
292
Часть 4. JavaScript
Еще один вариант позволяет обратитвся к объекту как к эле-
менту массива
docu ment. all[refer]
document, linksfrefer]
Немного модернизируем пример, расставив атрибуты пате и id:
<html id="el_htmr >
<head id="el_head">
Ctitle id=,,el_title"> All</title>
<script id=”el_script" type="text/javascript”><!-
function review(obj)
{var result="
for(var i in obj){
result+=,document.all(’ +i+ ') = ' +obj[i].name+obj[i]+,<br>'
}
return result;
}
—></script>
</head>
<body id=”el_body" name="my_body“ bgcolor="#ffffff">
<a id="refer,‘ href="http://www.myserver.ru/file.htmr'>3To ссылка</а>
<input id="el_input'‘ name=’‘my_button" type="buti.on‘'
value="properties" onclick="documentwrite(review(document.all))">
</body>
</html>
Рис. 4.13. Результат расстановки атрибутов name и id
Глава 29. Объектная модель документа 293
I. ............. — - -----------------
Как видно на рис. 4.13, после вывода тех же элементов распо-
знаватв их стало легче.
Между id и пате еств некоторое различие. Атрибут id является
уникальным идентификатором элемента внутри документа, пате
некоторые элементы (например, радиокнопки) исполвзуют совме-
стно. В том случае, если элементвт совместно исполвзуют один ат-
рибут пате, например name= radio то они организуют свой подмас-
сив, к которому можно обращаться по обычным правилам обращения
к элементам массива, например:
Document.a//. radio/" 1J
или как к двумерному массиву
Docu ment.a//. [*'гасло"][?]
Иногда бывает полезно создание своих подмассивов из опреде-
ленных элементов.
Метод item ()
Доступ можно организовать не только при помощи свойств, но
и при помощи метода itemf/ncfex). В качестве параметра функции
item задается порядковый номер элемента в массиве или его id, или
имя. Например, подключив в том же примере на кнопку новый об-
работчик
ondick=l,alert(,document.a//.item(6) = 1 + document.a//.item(e).
name4-document.a//.item(6))”
мы увидим после щелчка на кнопке следующее окно сообщений
Если метод вызывается с параметром пате или id, которые не
существуют или еще не определены (не считаны), то он возвращает
значение кин.
294 Часть 4. JavaScript
----- - — - 1 • .... ттэ
Метод tags
Иногда свои подмассивы удобно организовать для определен-
ной группы элементов HTML, например для заголовков. Для них,
в отличие от ссылок или форм, не предусмотрены встроенные се-
мейства. В этом случае используют метод tags (параметр), который
принадлежит как семейству all, так и всем другим встроенным се-
мействам. Параметром, передаваемым в метод, служит строка-имя
элемента HTML, например:
document.a//.tags(772")
Этот вызов создаст массив-семейство заголовков второго уров-
ня. Вызов любого, например i-ro элемента, осуществляется так
docu ment. a//.tags( "h2K)[i-1],
где, напоминаем, отсчет ведется с нуля.
Массив создается даже в том случае, если на странице находит-
ся только один элемент. В этом случае массив и будет содержать
только этот один элемент, доступ к которому имеет вид
document.a//.tags(T72j[/-7]
29.4 , -
Прямой доступ
К элементам, которые имеют свой уникальный идентификатор
id, возможен прямой доступ из документа, минуя семейство all, или
аналогичные. В приведенном выше примере возможен такой вызов:
document.elbody
29.5 й
I
Дерево элементов
Анализируя предыдущий пример более внимательно, можно об-
наружить, что массив all заполняется в том порядке, в котором бра-
узер встречает элементы, последовательно считывая HTML-код.
z Сначала создается объект, соответствующий элементу <html>, затем
<head>, <title>, <script>, <body>, <a>, <input>.
Глава 29. Объектная модель документа
295
Наличие такого порядка еще не открывает структуру документа,
к которой мы уже обращались, рассматривая наследование в части
про CSS (см. п. 20.6). В нашем примере она имеет вид, представ-
ленный на рис. 4.14. Это логическая структура документа HTML.
Аналогичные связи устанавливаются и между соответствующими
объектами в структуре документа. Каждый из объектов является уз-
лом в дереве связей и связан с другими узлами свойствами насле-
дования. Специальный набор методов позволяет организовать до-
ступ к этой древовидной структуре и манипуляцию с узлами.
Таким образом, видно, что после анализа HTML-кода каждому
элементу будет поставлен в соответствие объект. Этот объект имеет
свойства, которые представляют атрибуты, стиль и содержание, ко-
торыми естественно можно управлять из сценариев.
Этот метод составляет альтернативу методу прямой генерации
или изменения HTML-содержания страницы.
События-объекты
Глава 30
Обработку событий мы уже рассматривали, когда анализирова-
ли специальные атрибуты HTML-документов (см. гл. 15). Одно из
назначений JavaScript заключалось в написании обработчиков.
30.1 ,________________________________________________________________
I Связывание событий
Соединение скрипта-обработчика с событием называется свя-
зыванием события (event binding). Возможны, следующие способы
связывания.
1. Напомним, что в HTML атрибуты элементов (далее будем на-
зывать их атрибуты-события) onclick, onkeypress и др. позволяли
связать событие с обработчиком путем вызова функции, указанной
в качестве значения атрибута события, или нескольких строк кода.
Например
<Ы опс//ск=”ту_с11ск();”>Название</Ь1 >
Или
<h1 опсНск=\ы browser = (Navigator.app/Vame==’/vetocape’)?'A/A/’:7E”
my_dick(riroivse^;”> Названиес/М>
2. В IE 4 и выше существуют специальные атрибуты в элементе
<script> для назначения обработчика любому именованому объекту
по его имени (пате) или идентификатору (id). Это парные атрибуты
for и event. Значением for является идентификатор или имя объекта,
а значением event является событие. В самом теле скрипта распо-
лагается обработчик. Например, для заголовка с id= "my_h/"назначе-
ние обработчика выглядит следующим образом:
<script for=”my_hi” event=" onclick' >
код обработчика
</script>
Глава 30. События-объекты
297
В JavaScript существуют и свои собственные механизмы связыва-
ния событий. Для начала отметим, что события представлены как
свойства соответствующих объектов. Наименование свойства обра-
зуется от имени события с префиксом on, и в JavaScript все записы-
вается с малой буквы (напомним, что в JavaScript синтаксис явля-
ется регистро-зависимым). Например, уже упоминавшийся щелчок
(событие click) описывается свойством onclick.
Доступ к свойствам осуществляется как обычный доступ к свой-
ствам элемента при помощи точечной нотации. Например:
dages.my_element.onc//ck
Связывание событий-свойств с кодом обработчика может про-
исходить Двумя способами, описанными ниже.
3. Важной особенностью является возможность динамическим
образом создавать обработчики, подобно динамической генерации
других программных элементов. Обработчик создается динамичес-
ки как объект Function. Подробно динамическое создание функ-
ции, когда ее описание не хранится все время в памяти, а форми-
руется только в момент обращения, мы уже рассматривали в
параграфе 4.5.7. Поясним еще раз такое создание на примере.
Пример 31.
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title></title>
</head>
<body>
<h1 id=my_element >Элемент заголовками 1>
</body>
<script type="text/javascript"><!--
document.all.my_element.onclick= new Function ("alertfSro был
заголовок')'');
--></script>
</html>
В строке 9 справа, как объект, создается функция — вызов ди-
алогового окна. Она размещается где-то в памяти, а указатель на
эту область памяти возвращается и присваивается свойству
document.a/Amy_element.onc//ck. При щелчке мышью по элементу
заголовка <h1> произойдет вызов этой функции и на экране
возникает вспомогательное диалоговое окно.
Обработчик создается как указатель на уже определенную функ-
цию. Рассмотрим этот вариант на примере.
298
Часть4. JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Пример 32.
г.
<html>
<head>
<Ш1е>Обработчик события<ЛШе>
</head>
<l- Начало заголовка --!>
<body>
<h1 id=my_element >Элемент заголовка</И1 >
</body>
. <!-- Окончание заголовка --!>
' <script type="text/javascript"><!—
document.all.my_element.onclick=my_fun;
function my_fun()
{
alert('3TO был заголовок');
}
--></script>
</html>
Строка 5—7. В даном примере на страницу выводится толвко
один заголовок. Элемент заголовка имеет собственный идентифи-
катор.
Строка 8—14. Посколвку в данном случае скрипт располагается
после элемента <body>, то его ввшолнение начинается после за-
грузки страницвг
Строка 9. Определяется обработчик собвггия click (щелчок мы-
швю) для элемента с идентификатором my_Lelement. Следует обра-
тить внимание, что после my_fun нет привычных круглых скобок —
признака функции. В данном случае свойству-обработчику onclick
присваивается указатель на функцию. Если бы скобки были, то про-
изошел бы вызов и исполнение функции my_fun(). После выполне-
ния функция вернула бы некоторое значение, которое и было бы
присвоено обработчику как свойству. Если бы функция не вернула
никакого значения, то было бы присвоено значение null.
Строка 10—13. Описание функции my_fun.
Поскольку обработчики могут назначаться различным образом,
то возможно назначение одному и тому же событию разных обра-
ботчиков и создание таким образом конфликтных ситуаций.
Пример 33.
1
2
3
4
<html>
<head>
<Ш1е>Пример с обработчиками<ЛИ1е>
</head>
Глава 30. События-объекты
299
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body>
<h1 id=my_element onclick= "my_fun 1 ()" >Элемент заголовкж/й 1 >
</body>
<script type="text/javascrip.t"><!--
document.all.my_element.onclick=my_fun;
function my_fun()
{
а1еП('Это был заголовок');
}
function my fun1()
alert('3aronoBOK_1');
}
--></script>
</html>
В данном примере один обработчик назначен средствами
HTML (строка 6). А второй, как и ранее, средствами JavaScript
(строка 9). Этот конфликт разрешается при помощи механизма
приоритетов. В данном случае приоритет имеет назначение обра-
ботчика в строке 9, в чем легко убедиться, запустив программу на
выполнение. Обработчик, назначенный в строке 6, будет проигно-
рирован.
Если обработчик-свойство не имеет значения null или undefined, то
вызов функции-обработчика осуществляется автоматически при на-
ступлении события. Никаких вызовов обработчика совершать не
нужно.
Однако поскольку обработчик является функцией, то его можно
в случае необходимости явно вызвать в коде программы, эмулируя
реакцию, аналогичную реакции на событие, например, в демо-вер-
сиях программы.
30.2 .________________________________________
I События,
поддерживаемые JavaScript
Количество поддерживаемых при помощи JavaScript (и других
языков) событий-свойств отличается у разных браузеров, и оно
значительно больше количества стандартных событий, которые
можно связать при помощи стандартных атрибутов в элементах
HTML.
300
Часть 4. JavaScript
Например, ГЕ поддерживает следующие события.
Таблица 4.1
Название события Обработчик Комментарии
abort onabort Используется для остановки загрузки изображения.
afterprint onafterprint Генерируется после печати до- кумента. Используется, чтобы восстановить те изменения, ко- торые были сделаны для под- готовки объекта к печати. Ча- сто используется совместно с onbeforeprint.
afterupdate onafterupdate Возникает после успешной передачи данных. Может ис- пользоваться для обновления значений.
beforecopy onbeforecopy Генерируется при стандартных операциях копирования из ме- ню или при помощи сочетания клавиш (в англ, версиях Ctrl + + С). Обработчик может ис- пользоваться для специальной подготовки выделенных дан- ных.
beforecut onbeforecut Генерируется при стандартных операциях вырезания из меню или при помощи сочетания клавиш (в англ, версиях Ctrl + 4- X).
beforeeditfocus onbeforeeditfocus Генерируется перед тем, как объект перейдет в активное состояние. Может использо- ваться в собственных интер- фейсах пользователя.
beforepaste onbeforepaste Генерируется после вызова операции вставки из меню или при помощи горячих клавиш (в англ, версиях Ctrl + V).
Глава 30. События-объекты
301
Продолжение табл. 4. [
Название события Обработчик Комментарии t
beforeprint onbeforeprlnt Генерируется перед печатью документа. Используется для подготовки печатной версии.
beforeunload onbeforeunload Генерируется перед загрузкой страницы.
beforeupdate onbeforeupdate Генерируется для элементов, которые поддерживают обнов- ление данных. Сигнализирует о том, что данные были изме- нены. Генерируется в момент, когда фокус перемещается с элемента, значение которого было изменено, но перед пе- редачей данных.
blur onblur Снимает фокус с объекта, ко- торый генерировал это собы- тие. Возникает до того, как другой, вновь выбранный объект, получит фокус.
bounce . onbounce Возникает, когда контент объ- екта marquee достигает грани- цы и отражается.
cellchange oncellchange Сообщает, что данные, содержа- щиеся в объекте, изменились.
change onchange Указывает, что выделение в эле- менте <select> изменилось, т.е. выбран другой элемент <option>.
dick onclick Стандартное событие, см. выше.
contextmenu • 1 oncontextmenu Генерируется при щелчке пра- вой кнопкой мыши в клиент- ской области окна, когда вы- зывается контекстное меню.
copy oncopy Генерируется после выполне- ния операции копирования.
302 Часть 4. JavaScript
_— - - ~ I
Продолжение табл. 4.1
Название события Обработчик Комментарии
cut oncut Генерируется после операции «вырезание».
dataavailable ondataavailable Генерируется при получении браузером данных.
datasetchanged ondatasetchanged Генерируется, когда объект го- тов передавать данные.
datasetcomplete ondatasetcomplete Уведомляет о завершении пе-
редачи данных и доступности
данных для дальнейшего ис-
пользования. Устанавливает
свойство reason объекта event
в состояние:
0 — передача завершена без
ошибок;
1 — пользователь прервал пе-
редачу (например, кнопкой
Stop браузера);
2 — в процессе передачи про-
изошли ошибки.
dblclick ondblclick Стандартное событие.
drag ondrag Возникает во время перетас- кивания выделенного текста или объекта.
dragend ondragend Возникает при отпускании кнопки мыши после перетас- кивания выделенного текста или объекта.
dragenter ondragenter Возникает, когда объект пе- ретаскивания находится над объектом, который может его принять, и пользователь от- пускает кнопку мыши.
drag leave ondragleave Возникает, когда курсор по- кидает объект, в котором мог бы быть размещен объект пе- ретаскивания.
Глава 30. События-объекты
303
Продолжение табл. 4.1
Название события Обработчик Комментарии
dragovor ondragover Возникает, когда объект пе- ретаскивания находится над объектом, который может его принять.
dragstart ondragstart Возникает, когда пользова- тель начинает операцию пе- ретаскивания.
drop ondrop Возникает при отпускании кнопки мыши во время опе- рации перетаскивания.
error onerror Генерируется при возникно- вении ошибки во время за- грузки.
errorupdate onerrorupdate Генерируется в случае неус- пешной передачи данных.
filterchange onfilterchange Возникает, когда фильтр из- меняет состояние или завер- шает переход.
finish onfinish Возникает при завершении цикла в объекте marquee.
focus onfocus Возникает, когда объект по- лучает фокус.
help onhelp Генерируется при нажатии служебной клавиши F1, и фокус ввода находится на браузере.
keydown onkeydown Стандартное событие — на- жатие на клавишу.
keypress onkeypress Стандартное событие.
keyup onkeyup Стандартное событие.
load onload Генерируется сразу после за- грузки объекта.
304
Часть 4. JavaScript
Продолжение табл. 4.1
Название события Обработчик Комментарии
losecapture onlosecapture Возникает, когда объект перестал реагировать на действия мыши.
mousedown onmousedown Стандартное событие.
mousemove onmousemove Стандартное событие.
mouseout onmouseout Стандартное событие.
mouseover onmouseover Стандартное событие.
mouseup onmouseup Стандартное событие.
paste onpaste Генерируется после выполне- ния операции вставки.
propertychange onpropertychange Генерируется, когда изменя- ется свойство или стиль объ- екта.
readystatechange onreadystatechange Генерируется, когда изменя- ется состояние объекта (readyState).
reset onreset Генерируется, когда пользо- ватель восстанавливает на- чальное состояние формы (кнопка «Сбросить»).
resize onresize Генерируется, когда пользова- тель изменяет размеры объекта.
rowenter . onrowenter Генерируется, когда данные в источнике данных были из- менены и доступны для ис- пользования объектом.
rowexit onrowexit Генерируется перед тем, как элемент управления данными изменит данные в объекте.
rowsdelete onrowsdelete Генерируется перед удалени- ем данных из записи.
rowsinserted onrowsinserted Генерируется после вставки данных в запись.
Глава 30. События-объекты
305
Окончание табл. 4.1
Название события Обработчик Комментарии
scroll onscroll Генерируется, когда пользо- ватель перетаскивает бегунок линейки прокрутки.
select onselect Генерируется после выбора объекта.
selectstart onselectstart Генерируется во время выбо- ра объекта.
start onstart Генерируется перед началом цикла объекта marquee.
stop onstop Генерируется, когда пользо- ватель нажимает кнопку «стоп» или покидает доку- мент.
submit onsubmit Генерируется перед подачей формы.
unload onunload Генерируется перед выгруз- кой объекта. По умолчанию удаляет объект или документ из окна браузера.
30.3 w____________
| Всплывание событий
Проведем эксперимент,- для чего модифицируем пример 33.
Пример 34
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<Ш1е>Пример с обработчиками</Ш1е>
</head>
cbody id=my_body>
<h1 id=my_element >Элемент заголовками >
</body>
<script type=,,text/javascript'l><!--
documentall. my_elemen t о ncl ick=my_f u n;
function my_fun()
{а1еП('Это был заголовок');}
306
Часть 4. JavaScript
12
13
14
15
16
document.all.my_body onclick=my_fun1;
function my_fun1()
(alertfA это уже не заголовок');}
--></script>
</html>
В результате его выполнения получим на экране простую над-
пись-заголовок
3 Пример с обработчиками - Microsoft Internet Explorer
И Правка Ййй Избранное Сервис Справка. .
Элемент заголовка
В документе реализовано два обработчика событий onclick —
щелчок кнопкой мыши. Один для элемента <body> с id=my_body. Это
функция my_funl(), которая связывается с событием в строке 12.
При щелчке вне заголовка только по телу элемента <body> сра-
ботает этот обработчик и появится окно с сообщением
Второй обработчик реализован для элемента <h1> с id= my_element.
Это функция my_fun(). Назначенце обработчика происходит в строке 9.
Щелчок по заголовку вызывает второй обработчик, что приво-
дит к выводу другого окна
Глава 30. События-объекты
307
Казалось бы, все присходит достаточно логично. Однако самое
интересное начинается далее. Как только вы щелкнете в последнем
окне кнопку ОК в надежде продолжить работу, окно закроется, но
на его месте возникнет новое окно с предыдущим сообщением 'А
это уже не заголовок'» Это свидетельсгвует о том, что после первого
обработчика сработал и второй.
Здесь мы сталкиваемся с механизмом всплывания событий. Де-
ло в том, что элемент заголовка document.a//.my body.my element,
v сопоставленный элементу HTML <h1>, расположен внутри элемента
document.a//.my_body, соответствующего элементу HTML <body>.
Таким образом, в иерархии объектов <body> является родительским
элементом по отношению к <h1>. Событие, обработанное в <h1>, не
исчезает самопроизвольно, хотя и может быть отменено принуди-
тельным образом. Оно передается родительскому элементу, т.е.
всплывает на уровень выше. Здесь оно обрабатывается своими об-
работчиками, которые определяются программистом или исполь-
зуются обработчики, действующие по умолчанию.
Если элемент не последний в иерархии, то всплывание события
повторяется вплоть до достижения уровня window, если какой-либо
элемент в иерархии не отменит всплывание события. Для отмены
всплывания надо установить свойство cancelBubble события event
равным true. Сделать это можно, внеся следующие изменения в об-
работчик:
function my_fun()
{а1егЦ'Это был заголовок1);
window.event.cancelBubble=true;}
Подробнее об event — в следующем параграфе. После такой не-
сложной модификации щелчок по заголовку будет вызывать одно
и только одно окно, а по телу страницы — другое.
30.4 ,______________________________________________________________
| Объект event
В ряде событий необходимо получить большую информацию,
чем просто свидетельство его возникновения. Если речь идет о мы-
ши, то могут понадобиться координаты курсора, если о клавиатуре,
то сведения о том, какая клавиша нажата и т.д. Такие дополнитель-
ные сведения о событии можно получить, имея доступ к специаль-
ному элементу event. Возникновение события сопровождается со-
зданием нового объекта event, который является свойством объекта
window. Это свойство-объект позволяет отменить всплывание со-
308
Часть 4. JavaScript
бытия. Кроме того, объект event позволяет установить, какой эле-
мент генерировал событие.
Я: • ' . . '
К основным свойствам объекта event относятся:
type содержит тип события. Имя события связано с име-
нем обработчика, только не содержит префикса on.
Например нажатие кнопки мыши приведет к тому,
что event, type будет иметь значение click. Соответст-
вующий обработчик, напомним, называется onclick.
Тип события во многом определяет и его свойства.
srcElement содержит информацию об элементе, который сгене-
рировал событие,
cancelBubble булева переменная, определяет всплывание события,
или отменяет его. При всплывании события имеет
значение false, которое задается по умолчанию.
Для событий клавиатуры:
altKey свойство, содержащее информацию о том, была ли
нажата клавиша Alt. Значение этой булевой перемен-
ной, равное true, указывает, что клавиша была нажата.
ctrlKey свойство, содержащее информацию о том, была ли
нажата клавиша Ctrl.
shiftKey свойство, содержащее информацию о том, была ли
нажата клавиша Shift.
Для событий, генерируемых мышью:
clientX, clientY содержит, соответственно, х и у координаты курсора
мыши относительно клиентской части окна браузера.
offsetX, offsetY содержит, соответственно, х и у координаты курсора
мыши относительно элемента контейнера, в кото-
ром расположен элемент-источник события.
screenX, содержит, соответственно, хи у координаты курсо-
screenY ра мыши относительно экрана.
Например: (рис. 4.15)
<html>
<head>
<1Ше>Применение объект even</title>
Глава 30. События-объекты 309
t— - ---------------
</head>
<body>
<h1 >Элемент заголовками 1 >
<div id=my_element onclick=,,my_fun2(),,>3TO текстовой
параграф
</div>
</body>
<script type="text/javascript"><!-
function my_fun2()
{alert('x='+window.event.offsetX+'\n'+ly=l+window.event.offsetY);}
~></script>
<html>
Рис. 4.15. Применение объекта event
Динамическое
форматирование
--- - 111
Глава 31
Форматирование документа, как уже рассматривалось выше, мо-
жет эффективно осуществляться при помощи таблиц стилей CSS
(см. 4.3). Параметры, задаваемые таблицей стилей, можно изме-
нить посредством сценария. В результате этого обновляется быв-
шая до этого статичной таблица стилей и за ней — представление
страницы на экране или в другом браузере.
В IE для динамического управления стилями каждому элементу
назначается свойство style. Для управления стилями имеется воз-
можность изменения, добавления или удаления этих свойств в сце-
нариях, подключения или отключения внешних стилей.
31.1 ,_________________________________ ______________________
I Объект style
Объект style (подчеркнем, именно объект JavaScript, а не эле-
мент HTML и не атрибут элемента) присущ всем программным
объектам, описывающим элементы HTML. Он имеет свой набор
свойств (в данном случае термин «свойство» относится к объектам
JavaScript и чтобы делать различие со свойствами стилей, послед-
ние будем далее называть «свойства CSS»). Название свойств объекта
JavaScript и свойств CSS могут совпадать в том случае, если название
простое, состоящее из одного слова, например, color. Для большин-
ства же свойств наименование несколько отличается от названия па-
раметров в стилях, которые пишутся через черточку, например,
background-color. Это нужно, чтобы не возникал конфликт между де-
фисом в названии параметра CSS, и знаком минус в JavaScript. Од-
нако правило преобразования достаточно простое. Дефис убирает-
ся и название параметра пишется слитно, причем первое слово
записывается с малой буквы, а второе (остальные) — с большой.
Необходимо помнить, что JavaScript имеет регистровую чувстви-
тельность. Например, в объектной модели упомянутое свойство бу-
дет именоваться backgroundColoru вызываться, например, так:
Глава 31. Динамическое форматирование
311
document. all.bookrnarksfyle.backgroundColor
Некоторые свойства не могут быть изменены динамически. К ним,
в частности, относится свойство position.
В следующем примере меняется стиль оглавления и второго абзаца,
именованного bookmark, при помощи идентификатора id (рис. 4.16).
В заголовке (см. строку 6) фон меняется на салатовый при наведе-
нии маркера мыши на элемент <h1>. Поскольку при возникнове-
нии события onmouseover элемент известен, то вместо указания id
заголовка и указания полного доступа можно использовать свойст-
во this — указатель на текущий элемент: this.style.backgroundColor.
Во втором случае (строка 11) доступ к свойству указан полно-
стью: doc u me nt. all. bookmark, style, backgroundcolor
Пример 35
1
2
3
4
5
6
7
10
11
12
13
8
9
<html>
<head>
<Ш1е>Доступ к стилям<ЛП1е>
</head>
cbody style="background-color: white; “>
<h2 onmouseover="this.style.backgroundColor='#ccffdd,;"> Демон-
страция динамического изменения CSS </h2>
<p >- Значит ты предпочитаешь собачатину диетическому
питанию? - закричал Коля, в горячности не учтя подслушивающих
соседей.
<р id="bookmark">- Да говори тише! - громко закричала Лиза.-
И потом ты ко мне плохо относишься. Да! Я люблю мясо! Иногда.
Что же тут дурного?
<р>Коля изумленно замолчал. Этот поворот был для него
неожиданным. Мясо пробило бы в Колином бюджете огромную,
незаполнимую брешь.
<brxbr>
<input type="submit" name="submit1" 7а1ие=“Поменять фон"
onclick="document.all.bookmark.style.backgroundColor=,pink,;“>
</body>
</html>
Выполнение этого кода представит на странице текст (строки 6-9),
под которым будет расположена кнопка (строка 11). После нажа-
тия на нее обработчик события onclick поменяет стиль абзаца
id= "bookmark'', что тут же вызовет изменение фона. При наведении
маркера на заголовок он тоже изменит цвет, поскольку встроенный
обработчик onmouseover= "this, style. backgroundColor= #ccffdd" также
меняет фон.
312
Часть 4. JavaScript
Рис. 4.16. Динамическое изменение CSS
31.2 .
] Объект cssText
Полезным является свойство cssText. Это строка, в которой
заданы все параметры стиля. Она удобна для копирования стиля
одного элемента и назначения его другому. Например, в ниже-
приведенной программе элементы my_div2 и my divl обменива-
ются стилями (рис. 4.17).
<html>
<head>
<Ш1е>Параметры</Ш1е>
<script type="text/javascript"><!-
function'change_style() {
var old_cssText=document.all.my_div2.style.cssText;
document.all.my div2.style.cssText=document.all.my_div1.style.cssText;
document.all.my_div1.style.cssText=old_cssText;
}
-></script>
</head>
Глава 31. Динамическое форматирование
313
<body style="background-color: white;">
<h2 Демонстрация изменения стиля</И2>
<div id=my_div2 >- Подумай только, пожирать трупы
убитых животных! Людоедство под маской культуры!
Все болезни*происходят от мяса.
</div>
<div id=my_div1 style="color:#aa3355; font-style:italic;">
Конечно,- с застенчивой иронией сказала Лиза,- например,
ангина.
</div>
<br>
<input type="Submit" name="press" уа1ие="Поменяй стиль"
onclick="change_style();">
</body>
</html>
Рис. 4.17. Демонстрация изменения стиля
При более глобальных изменениях можно производить не толь-
ко смену стилей у отдельных элементов, но и изменять параметр
class элементов. С этим параметром связано свойство className.
Внешние таблицы стилей подключаются в HTML при помощи
элемента HTML <link>, который используется вместо <style>. Ана-
логично в объектной модели свойство style сменяется свойством link.
31.3
! Переключение стилей
Все таблицы стилей собраны в массиве. Как и в других массивах,
объекты-стили в stylesheets добавляются по мере встречаемости и
314
Часть 4. JavaScript
расположены в соответствующем порядке. На стиль в stylesheets
можно ссылаться как по номеру, так и по id элемента.
Не все стили обязательно должны использоваться в данный мо-
мент. HTML-элементы <style> и <link> имеют булев параметр
disabled, который позволяет отключить таблицы стилей. В статич-
ных страницах использование этого параметра не имеет особого
смысла, зато при динамическом взаимодействии со страницами он
играет важную роль. Этот параметр можно установить или выбро-
сить из сценария при помощи свойства disabled, которое имеется
как у объекта style, так и у объекта link.
Возможность подключения или отключения отдельных правил
или целых файлов таблиц позволяет реализовать другой подход к
динамическому форматированию. В предыдущем параграфе пред-
ставление менялось, поскольку модифицировалось правило, опи-
сывающее стиль. Здесь мы остановимся на другом подходе, кото-
рый позволяет просто сменить одно правило на другое, не изменяя
его, путем простого переключения.
<html>
<head>
<Ш1е>Параметры</Ш1е>
<style id=version_1 type="text/css“><!-
#my_div1 {color:#aa3355; font-style:italic;}
#my_div2 {color:#OOOCOO; font-style:normal;}
-></style>
l
<style id=version_2 type=“text/css" disabledx!—
#my_div1 {color:#000000; font-style:normal;}
#my_div2 {color:#aa3355; font-style:italic;}
-></style>
<script type="text/javascript"><!—
function change_style()
{if(documentstyleSheets['version_1 '{.disabled)
{document. styleSheets['version_1 '].disabled=false;
document.styleSheets[lversion_2'].disabled=true;
}
else{document.styleSheets[’version_1 '].disabled=true;
doeument.styleSheets[lversion_2'].disabled=false;
}
}
—></script>
</head>
Глава 31. Динамическое форматирование
315
Cbody style="background-color: white;“>
<И2>Демонстрация изменения стиля</Ь2>
<div id="my_div111 >- Подумай только, пожирать трупы
убитых животных! Людоедство под маской культуры!
Все болезни происходят от мяса.
</div>
<div id=“my_div2" >
Конечно,- с застенчивой иронией сказала Лиза,-
например, ангина.
</div>
<br>
Cinput type="Submit” name="press“ 7а1ие=“Поменяй стиль"
onclick=“change_style();">
</body>
</html>
Результат действия этого кода будет таким же, как и'предыду-
щий. Однако механизм здесь основан на задании двух таблиц (пер-
вая — строки 4—7, вторая — 8—11). Вторая из них сразу полагается
отключенной. При нажатии кнопки «Поменяй стиль» действующая
таблица отключается, а вторая включается.
Весьма эффективно такой механизм действует в сочетании хо
стилями, которые отображают или скрывают определенные блоки
(с7/вр/ау=”попе")после щелчка мыши или кнопки.
Сравнивая оба механизма изменения стиля, можно сказать, что
первый экономит оперативную память, но проигрывает во времени
исполнения, второй, наоборот, исполняется быстрее, но занимает
больше оперативной памяти.
Динамическая верстка
Глава 32
32.1 ,_________________________________
Г енерация содержан ия
методом write()
Динамическая генерация содержания основана на использова-
нии метода write(), который генерирует строки кода HTML в поток
вывода.
Рассмотрим пример:
<html>
<head> *
<Ш1е>Параметры</Ш1е>
<script type=,,text/javascript“><!-
function myWrite() {
document.write('<div>- Дуся! - удивился монтер.- Вы меня
озлобляете. Я человек, измученный нарзаном.</div>');
}
—></script>
</head>
<!—body style=”background-color: white;" onload="лnyV\/rite();’, -->
<body bgcolor="white" >
<h2 Демонстрация write</h2>
<div>4epes две минуты Коля понял в первый раз за три
месяца супружеской жизни, что любимая женщина любит
морковные, картофельные и гороховые сосиски гораздо
меньше, чем он.
</div>
<br/>
cinput type=“Submit“ nanne=,lSubnnitr‘ value="write"
onclick="nnyWrite();">
</body>
</htnnl>
Глава 32. Динамическая верстка
317
Функция myWrite() с кодом
document.write("<div>- Дуся! - удивился монтер.- Вы меня озлобляете. Я
человек, измученный нарзаном.</div>")
во время обработки создаст в потоке вывода блочный элемент
<div>...</div>. Если она запускается по нажатию кнопки Write, то
будет открыт и выведен новый поток про Дусю, который сменит на
экране Николая. Старый станет достоянием истории, но будет до-
ступен при помощи кнопки браузера Back. Обратите внимание, что
в адресной строке имя файла не меняется, то есть смена содержи-
мого произошла в рамках одного и того же объекта document.
Функциями write() браузер может сгенерировать полноценную
страницу, но обычно подобную работу выполняет сервер.
32.2 и
I
I Динамическое содержание
Рассмотренный метод write() заменяет полностью страницу, ор-
ганизуя новый поток вывода содержания. Однако чаще возникают
задачи, когда необходимо изменить только часть контента, сменить
текст или картинку. Можно ли частично изменить код страницы, а не
переписывать его заново? Такие способы, позволяющие манипули-
ровать кодом HTML, существуют.
Для каждого элемента HTML, начиная с <body> и для всех вло-
женных в него элементов, существует возможность (начиная с IE 4)
во время анализа элемента, выделить в нем содержание и теги.
Каждый элемент при этом снабжается четырьмя свойствами:
innerHTML, outerHTML, mnerText, outerText. Значениями этих свойств
как раз и является содержимое-контент элемента, задаваемое в ви-
де строки. Различие между этими свойствами заключается в том,
очищается или нет содержимое от тегов во время формирования
строки.
Рассмотрим эти отличия на примере. Пускай элемент <р> имеет
вид
<р /с/="ту_ГехГ> На Эллочку <ет>вещь</ет> произвела неотразимое впе-
чатление... </р>.
Свойство outerHTML элемента my text после загрузки страни-
цы будет иметь в качестве значения всю эту строку вместе с тегами,
т.е. значением document.all.myMext.outerHTML будет строка
318
Часть 4. JavaScript
""'I
‘<p id=Mmy_text,'>Ha Эллочку <ет>вещь</ет> произвела неотразимое впечатле-
ние... </р>’
В процессе выполнение какого-либо скрипта это строковое
значение можно поменять на любую другую строку. В памяти со-
ответственно обновится содержимое Web-страницы в этой части, и
во время обновления окна, на экране перерисуется страница с об-
новлениями. В новой строке могут отсутствовать теги, тогда эле-
мент (в нашем примере <р>) просто исчезнет.
Свойство innerHTML элемента mytext будет иметь в качестве
значения всю эту строку, очищенную только от внешних тегов, а
внутренние теги сохранятся, т.е.:
На Эллочку <ет>вещь</ет> произвела неотразимое впечатление...
При любом изменении этого свойства внешние теги <р 7d=Tny_text>
и </р> остаются неизменными. Таким образом можно модернизи-
ровать содержимое параграфа, но он сам в любом случае сохранится
как элемент страницы. В этом можно убедиться обратившись к при-
меру, приводимому ниже. Действительно во время загрузки стра-
ницы формируется название (строка 13) и два параграфа (строка 14
и 15), причем второй из них (строка 15), обозначенный идентифи-
катором “my_text"должен быть пустой. После загрузки страницы
произойдет событие load и при помощи атрибута события onload
(строка 12) будет вызвана функция-обработчик init(). Она поменяет
содержимое между тегами <р /afe="my_rexf> и </р> (строка 9) и будет
сгенерирована строка <р id="my_text”>На Эллочку <ет>вещь</ет> про-
извела неотразимое впечатление...</р>> страница будет обновлена и
появится вторая строка str 1, значение которой задавалось в 6 стро-
ке кода. Угловые скобки, содержащиеся в str1, будут восприняты
как теги. Видно, что слово «вещь» оказалось выделено.
Вернемся к рассмотрению элемента <р /d=Bmy_texri>Ha Эллочку
<ет>вещь</ет> произвела неотразимое впечатл ение... </р>. Свойство outerText
объекта document.all.my_text будет иметь в качестве значения всю
строку, очищенную от всех тегов, как внутренних, так и внешних.
Останется чистый текст, что и подчеркивает название свойства:
На Эллочку вещь произвела неотразимое впечатление...
Свойство innerText элемента my text также будет иметь в каче-
стве значения всю эту строку, очищенную от всех тегов:
На Эллочку вещь произвела неотразимое впечатление...
Различие между последними проявится при формировании ко-
да HTML. Если теперь переустановить значение свойств
Глава 32. Динамическая верстка
319
document.all.vny_texi.outerText=TaKoe впечатление производит старая банка
из-под консервов на людоеда..."
То в документе вместо
<р id=”my_text”>Ha Эллочку <ет>вещь</ет> произвела неотра-
зимое впечатление...
появится строка
Такое впечатление производит старая банка из-под консервов
на людоеда...
Если переустановитв значение свойства
doCUTV\eni.all.TT\y_\.ex\.innerText=‘TaKoe впечатление производит старая банка
из-под консервов на людоеда..."
то вместо ввипеозначенной строки появится следующее
<р id=”my_text”>TaKoe впечатление производит старая банка из-
под консервов на людоеда... </р>
Манипуляции с содержанием документа таким образом сводят-
ся к манипуляциям с кодом HTML. Следующий пример, позволяет
поэкспериментироватв со всеми свойствами.
Пример 36.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<Ш1е>Изменение кода HTML</title>
</head>
<script type="text/javascript"><!-
var str = 'соТакое впечатление производит старая банка из-под
консервов на людоеда...</i>‘
var strl = 'На Эллочку <ет>вещь</ет> произвела неотразимое
впечатление...'
function init()
{document.all.my_text.innerHTML=str1;
}
—></script>
<body onload="init();">
<М>Людоедка Эллочка</П1>
<р>И Остап вынул из кармана маленькое позолоченное
ситечко</р>
320
Часть 4. JavaScript
15
16
17
18
19
20
21
22
23
24
<р id="my_text"></p>
cinput type="button" value="M3MeHHTb свойство outerHTML
"onclick="alert(document.all.my_text.outerHTML);
document.all.my_text.outerHTML=str;" >
<brxbr>
<input type=“button" уа1ие="Изменить свойство innerHTML’1
onclick="alert(document.all.my_text.innerHTML);
document.all.my_text.innerHTML=str;
alert(document.all.my_text.innerHTML);" >
<brxbr>
cinput type=“button" уа1ие="Изменить свойство outerText" onclick="
alert(document.all.my_text.outerText);
document.all.my_text.outerText=str;,‘ >
<brxbr>
cinput type="button" уа1ие="Изменить свойство innerText" onclick="
alert(document.all.my_text.innerText);
document.all.my_text.innerText=str; “>
c/body>
c/html>
При нажатии на первую кнопку весь элемент "my_text", вместе
с тегами будет заменен текстом
<|>Такое впечатление производит старая банка из-под консер-
вов на людоеда...</i>.
Элемент <р id='my_text"> будет удален и дальнейшие попытки об-
ратиться к нему вызовут ошибку. Параграф пропадет, но в иерархии
элементов возникнет новый элемент <i>, который будет нормально
работать.
Перезагрузим страницу снова, чтобы можно было продолжить
работу с элементом <р id=“myjexr>. Нажав вторую кнопку, можно
убедиться, что элемент <р id=“my_text'> сохранится, внутрь него бу-
дет вставлен текст
<|>Такое впечатление производит старая банка из под консер-
вов на людоеда...<А>
что при интерпретации строки приведет к появлению нового элемента
<i>. Вторая строка отобразится курсивом.
Для чистоты эксперимента загрузим страницу снова и нажмем
третью кнопку. Можно убедиться, что элемент <р id= "my_text'> про-
падает, поскольку при генерации текста, теги не добавляются. Эле-
мент <i> не распознается, поскольку угловые скобки переводятся
Глава 32. Динамическая верстка
321
в литералы и воспринимаются как текст, а не как признак опера-
тора. Весь текст воспроизводится браузером как цитата, со всеми
знаками препинания и угловыми скобками. В том, что пропал аб-
зац можно убедиться по расположению кнопки. Поскольку теперь
она рисуется как продолжение строки, значит предыдущий блоч-
ный элемент-абзац исчез.
Перезагрузив страницу в последний раз и нажав четвертую
кнопку, можно убедиться, что элемент <р id="my_text*>сохраняется,
поскольку при генерации текста, теги добавляются. Но элемент <i>
снова не распознается, и весь текст воспроизводится как цитата.
323 .______________________________________________________________
I Объект TextRange
Еще более мощные средства для манипулирования с HTML-
текстом представляет объект TextRange. Этот объект позволяет на-
прямую редактировать как теги HTML, так и контент, работая с
ними, как работает с текстом любой текстовой редактор. Объект
выделяет область HTML-текста, помечая ее начало и конец соот-
ветственно начальным и конечным маркерами, а также предостав-
ляет более 30 свойств и методов для работы с этой областью.
Рассмотрим пример:
<body>
...на моем памятнике будет высечено:
<blockquote style="font:italic bold; font-family: 'Arial1; "> Здесь
лежит известный теплотехник и истребитель
<span id=fullName >Остап-Сулейман-Берта-Мария Беццер-
бейс/spar»,
отец которого был турецко-подданным...</blockquote >
</body>
В данном примере можно организовать, что объект TextRange
будет охватывать и работать со словами с третьего по пятое
контента документа («памятнике будет высечено»). В этот же текст
могли попасть и теги HTML. В результате манипуляций с текстом,
из него могут быть удалены, или наоборот добавлены какие-нибудь
теги. Контроль за соблюдением правильности получившегося кода
лежит на программисте, поскольку объект TextRange встроенных
средств контроля не имеет. Метод позволяет находить в тексте
нужные строки, выделять их, удалять, переносить и т.д., эмулируя
множество операций текстового редактора.
[ I Зак. 1627
322
Часть 4. JavaScript
~ j
Создать объект TextRange может не любой объект, а только, так
называемые, «владельцы текстового редактора» (text edit owner).
Таких элементов насчитывается немного. Это прежде всего <body>,
как в приведенном выше примере, которому принадлежит весь
контент. Другими примерами могут служить <button>r <input> (атри-
бут type (тип) кнопки должен иметь значение fype=7exf),<textarea>-
Проверить, может ли объект создать TextRange, можно при помо-
щи свойства, имеющегося у всех объектов:
isTextEdit
Это свойство указывает, является ли объект (владелец свойства
isTextEdit) также и владельцем свойства TextRange.
Пример:
<html>
<head>
<Ш1е>Изменение кода HTML</title>
</head>
<script type="text/javascript”><!-
var str = '<1>Такое впечатление производит старая банка
из под консервов на людоеда...</i>'
var str1 = 'На Эллочку <ет>вещь</ет> произвела
неотразимое впечатление...'
function init()
{document.all.my_text.innerHTML=str1;
}
- ></script>
<body onload=“init();">
<1"|1>Людоедка Эллочка</И1>
<р>И Остап вынул из кармана маленькое позолоченное
ситечко</р>
<р id="my_text"></p>
<input type=”button" 7а1ие="Изменить свойство outerHTML
"onclick="alert(document.all.my_text.outerHTML);
document.all.my_text.outerHTML=str;" >
<br><br>
<input type="button" уа!ие="Изменить свойство innerHTML"
onclick="alert(document.all.my_text.innerHTML);
document.all.my_text.innerHTML=str;
alert(document.all.my_text.innerHTML);" >
<brxbr>
cinput type="button" уа!ие="Изменить свойство outerText"
Глава 32. Динамическая верстка
323
onclick=" alert(document.all.my_text.outerText);
document.all.myJext.outerTextz^str;1' >
<br><br>
cinput type="button" 7а1ие="Изменить свойство innerTexf
onclick=“ alert(document.all.my_text.innerText);
document all. my_text.innerText=str; ">
</body>
</html>
Для создания объекта TextRange служит специальный метод
createTextRange(), который используется следующим образом
var my_TextRange = document.body.createTextRange()
Созданный таким образом элемент охватывает изначально все
содержание, заключенное между <body> и </body>. Начальный мар-
кер стоит за открывающим тегом <body>, а конечный — перед за-
крывающим </body>. Ислользуя другие методы, такие как move(),
moveToElementText(), можно произвольным образом передвинуть на-
чальный и конечный маркер.
Использовать createTextRangeQ можно только после того, как за-
гружен весь документ. В противном случае объект не будет создан.
Пример:
<html>
<head>
<title>TextRange</title>
<script language=javascript>
<!--
function checkcreate()
var my_TextRange = document.body.createTextRangeQ;
if (my_TextRange!=null) {
alert(my_TextRange.htmlText);
}
else alertf'объект не создан11);
}
//->
</script>
</head>
<body>
...на моем памятнике будет высечено:
Cblockquote style="font:italic bold; font-family: ’arial’; "> здесь
лежит известный теплотехник и истребитель
324
Часть 4. JavaScript
<span 1б=Ти11пате>остап-сулейман-берта-мария
бендербей</зрап>,
отец которого был турецко-подданным.,.</blockquote>
cinput type="button" уа!ие="проверяем свойство
createTextRange()" id=button1 name=button1
onclick="checkCreate(),,>
</body>
</html>
Свойства:
text является строкой, которая содержит текст, заклю- ченный между маркерами и очищенный от HTML- тегов. Свойство доступно как для чтения, так и для записи, позволяя считывать текст, и модифициро- ватъ его, устанавливая новый текст. Попъггка вста- витъ новый текст с HTML- разметкой приводит к тому, что служебные символы заменяются литера- лами, т.е. например, знак > будет заменен на >.
htmIText позволяет получитъ содержание, заключенное меж- ду началънътм и конечным маркером вместе с HTML тегами. Доступно толвко для чтения. Это свойство исполъзовано в въипеприведенном примере для вы- вода содержимого объекта my_TextRange.
boundingHeight возвращает высоту прямоуголвника, который ог-
раничивает объект TextRange. Доступно толвко для
чтения.
boundingWidth возвращает ширину прямоуголвника, которвш ог- раничивает объект TextRange. Доступно толвко для чтения.
boundingLeft возвращает значение расстояния между левым кра- ем самого объекта TextRange и объекта, которвш содержит TextRange. Доступно толвко для чтения.
boundingTop возвращает значение расстояния в пикселях между верхней границей самого объекта TextRange и объ- екта, которвш содержит TextRange. Доступно толь- ко для чтения.
parentTextEdit содержит указателъ на родителъский элемент в иерар- хии объектов документа, которому принадлежит TextRange(). Если родителъский элемент не существует, то свойство равно пин. Доступно только для чтения.
Глава 32. Динамическая верстка
325
32.4 ,__________________________________________________________
) Методы для разметки
I области TextRange
После создания TextRange область текста может быть изменена
до того размера, с которым предстоит работать. Для этого сущест-
вуют методы, позволяющие позиционировать маркеры. При этом
область текста не может выходить за рамки элемента — владельца
TextRange,
Методы:
moveStart(st/n/f [, iCount]), moveEnd(sUnit [, iCountJ)
позволяют перемещать соответственно начальный и ко-
нечный маркеры, ограничивающие область TextRange.
sUnit задает единицы измерения и принимает значения:
character в символах,
word в словах,
sentence в предложениях,
textedit смещение происходит на опреде-
леннное число элементов редактиро-
вания.
Второй необязательный параметр iCount указывает на
величину смещения. Он может принимать как поло-
жительные, так и отрицательные значения. В первом
случае смещение осуществляется вперед, во втором —
назад.
m oveT oELementText( element)
ограничивает область действия объекта TextRange пре-
делами указанного элемента, который задается в виде
обязательного параметра. Метод позволяет переме-
щаться внутри документа для выбора нужного контента
rnove(sUnit /, iCountJ)
смещает область, заданную TextRange, на определенное
расстояние iCount. При этом перемещается открываю-
щий маркер, а закрывающий помещается в ту же точку,
326
Часть 4. JavaScript
уменьшая размер область действия TextRange до нуля.
sUnit — задает единицы измерения и принимает значе-
ния:
character в символах,
word в словах,
sentence в предложениях,
textedit смещение происходит на опреде-
леннное число элементов редактиро-
вания.
Второй необязательный параметр iCount указывает на
величину смещения, по умолчанию принимает зна-
чение ноль. Он может принимать как положитель-
ные, так и отрицательные значения. В первом случае
смещение осуществляется вперед, во втором — назад.
Метод возвращает число блоков, на которые произо-
шло перемещение.
moveTo Poi nt(x,y)
метод определяет, какой элемент выводится на экра-
не в точке с координатами хи у, заданными в виде
параметров. Затем помещает в эту точку объект
TextRange, у которого начальный и конечный маркер
схлопнуты в одну точку. Используя прочие методы,
можно от данной точки расширить сферу влияния
TextRange до символа, слова, предложения — другими
словами, до желаемой области. Можно, не изменяя
положение маркеров, вставить между ними текст.
getBookmarkQ позволяет получить имя закладки, для того, чтобы
потом возвращаться в это же место с помощью ме-
тода moveToBookmark(sBookz7?ark).
Например:
’sBookmark = my_TextRange.getBookmark()
moveT oBookmark(sBookmark)
смещает указатель к закладке sBookmark. Возвра-
щает булево значение true в случае успешного вы-
полнения операции.
Глава 32. Динамическая верстка
327
32.5 .
I ' -
1 Методы для работы с TextRange
. pasteHTMLfs^r/лр/
предназначен для изменения содержания и HTML раз-
метки. Угловые скобки он будет вставлять как часть те-
га, т.е. без изменения.
Например:
my_TextRange.pasteHTML(^Р><В>8стаапяем параграф</В></Р>,г)',
Требует осторожного обращения, поскольку при
некорректной вставке тегов, может привести к непред-
сказуемым результатам.
duplicate() создает копию объекта TextRange.
Например:
var а = createTextRangef);
Var b = a.duplicate();
При этом а и b будут разными объектами, т.е. срав-
нение (а = = Ь) вернет значение false.
expand (sUnit) расширяет объект TextRange до тех пор, пока не будет
охвачен весь блок unit. Им может быть символ, слово,
предложение или весь блок владельца TextRange. Со-
ответственно параметр sUnit принимает значения:
character символ,
ivord слово,
sentence предложение,
texted f весь элемент владелец блока редак-
тирования.
Возвращает значение true, если операция была про-
ведена успешно.
328 Часть 4. JavaScript
— -- - 1 1 1 — ...
collapse ([bStart])
выполняет обратную операцию, схлопывая охвачен-
ную область до точки, то есть начальный и конеч-
ный маркер помещается в одну точку. Эта точка
определяется необязательным булевым параметром
bStart. По умолчанию он равен true и оба маркера по-
мещаются в начальную точку текущей области. Если
параметр равен false, то оба маркера помещаются в
конечную точку текущей области.
select() выделяет область, при этом она отображается на
другом фоне, как в текстовом редакторе.
fi ndTextfstring, [, isearchScope][iFlagJ)
используется для поиска текстовой строки, задан-
ной в виде обязательного первого параметра. Второй
необязательный параметр указывает целое число
символов от начального маркера, которые должны
совпадать. Знак числа задает направление поиска:
«+» — вперед, «-» — назад. Третий параметр задает
дополнительные опции поиска:
2 — слово должно совпадать целиком,
4 — при поиске совпадений следует
учитывать регистр,
6 — устанавливает оба параметра.
isEqual() проверяет совпадение содержания двух объектов. Воз-
вращает true, уели объекты охватывают один и тот же
текст HTML и false в противном случае. Если b яв-
ляется например копией а, как в предыдущем абза-
це, то вызов a.isEqual(b) вернет true.
I n Range (oTextRange)
устанавливает соответствие между контентом двух
объектов TextRange (проверяет, содержится ли один в
другом). В частности a.inRange(b) возвращает true, если
содержимое b входит в а. Вызов b.inRange(a) возвра-
щает true, если наоборот содержимое а входит в Ь.
parentElement() возвращает указатель на элемент, которому непосред-
ственно принадлежит выделенный фрагмент текста.
В случае неудачи возвращает null. Если после создания,
Глава 32. Динамическая верстка
329
TextRange охватывает весь текст, то очевидно, что
весь текст принадлежит элементу <body> и указатель
ParentElement будет указывать на <body>. После мани-
пуляцийсобъекгом, область, охватываемаяТ extRange,
может измениться. Соответственно может измениться
и элемент, которому эта область будет принадлежать.
Пример 37.
1 <html>
2
3
4
5
6
7
8
9
10
11
<head>
<Ш1е>Метод find</title>
</head>
<body>
...на моем памятнике будет высечено:
<blockquote style="font:italic bold; font-family: 'Arial'; и> Здесь лежит
известный теплотехник и истребитель
<span id=fullName >Остап-Сулейман-Берта-Мария Бендербей</
span>,
отец которого был турецко-подданным...</blockquote >
</body>
</html>
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<SCRIPT LANGUAGE=javascript>
<!—
var my TextRange = document.body.createTextRangeQ;
// записывается текущее состояние как закладка
var my_Mark = my_TextRange.getBookmarkQ;
// регистро-независимый поиск
my_TextRange.findText('ocTan');
// выделяем объект на экране
my_T extRange.selectf);
alert(my_T extRange. htmIT ext)
// изменение TextRange
my_T extRange. moveT oBookmark(my_Mark);
alert(my_TextRange.text)
// false - неудачный поиск целого слова
my_TextRange.findText(,BeHflep'1 0, 2);
my_T extRange. se lect();
alert(my_TextRange.htmlText)
my_TextRange.moveToBookmark(my_Mark);
// false - неудачный поиск с учетом регистра
my_TextRange.findText('BeHflep', 0, 4);
my_TextR ange.select();
alert(my_T extRange. htmIT ext)
// возврат к закладке
330
Часть 4. JavaScript
36
37 "
38 "
39 "
40 "
41 "
42 "
43 "
44 "
45 "
46 "
47 "
48 ”
49 "
50 "
51 "
52 "
my_Text Range. moveToBookmark(my_Mark);
I I true - успешный поиск Всего слова с учетом регистра
my.TextRange.findTextCBeHflepeetf, 0, 6);
> my_ Text Range, select ();
alert(my_T extRange.htmIT ext)
I/ возврат к закладке
my_TextRange .moveT oBookmark(my_Mark);
// схлопывает область до точки
my_T extRange .collapse();
I I false - неудачный поиск в схлопнутой области
my_TextRange.findText(,BeHflep6eM', 0, 6);
my_TextRange.select();
alert(my_TextRange.htmlText)
// true - третий параметр не задан
my-TextRange.findTextCBe1);
my_T extRange .select();
alert(my_T extRange. htmIT ext)
//->
</SCRIPT>
Рис. 4.18. Действие метода объекта TextRange
В данном примере можно проследить действие многих методов
объекта TextRange. В отличие от предыдущих примеров объект со-
здается не в результате вызова функции, а в результате выполнения
Глава 32. Динамическая верстка
331
скрипта интерпретатором сразу после загрузки страницы. Доста-
точно поместить скрипт до элемента <body>, и он выполняться не
будет. Основные пояснения даны в комментариях. Запустив этот
пример в браузере, вы сможете в появляющихся окнах проследить,
как меняется содержимое TextRange.
Заключение
Глава 33
В заключение следует отметить, что язык JavaScript имеет боль-
шое количество объектов и свойств, рассмотрение которых заняло
бы значительно более места, чем вся эта книга вместе взятая. По-
этому в отличие от HTML и CSS, которые описаны достаточно по-
дробно, последнюю главу следует рассматривать скорее как введе-
ние в JavaScript и подробный обзор, позволяющий ознакомиться
с основными правилами использования скриптов, их возможнос-
тями и направлениями применения.
Если ваш опыт еще недостаточен для написания профессио-
нальных сложных скриптов, то разобраться с уже написанными,
коих в Интернете превеликое множество, теперь вы будете в
состоянии. Вы можете грамотно пользоваться уже готовыми биб-
лиотеками, что тоже немало. А остальное дело за практикой.
Все замечания по поводу книги присылайте по адресу
markhvida@yahoo.com.
Приложения
Правила построения
доменного имени
Доменное имя показывает, по какому принципу объединены ком-
пьютеры. Рассмотрим пример — server. company. сот. Читая имя
слева направо, мы обнаружим сначала имя конкретного компьюте-
ра (server), затем (обычно) имя компании (company), и в конце —
имя домена верхнего уровня (сот). Под доменом верхнего уровня
понимается одно из следующих сочетаний:
агра — сеть ARPANET (устаревшее);
сот — коммерческие организации;
gov — правительственные и государственные;
edu — образовательные;
mil — военные;
net — организации, связанные с Сетью;
огд — прочие организации, не упомянутые выше.
Как правило, подобные имена имеют серверы, расположенные
на территории США, откуда подобная классификация берет нача-
ло. Хотя и другие страны сейчас имеют возможность зарегистриро-
вать свои крупные серверы с подобными обозначениями. Из при-
веденного списка первое имя (агра) практически не используется
как устаревшее.
К этим традиционным именам доменов верхнего уровня в 2000 году
добавлены новые. Они отражают изменения, произошедшие в Ин-
тернете за последнее время.
Если имя домена верхнего уровня состоит из двух букв, то это
говорите географической принадлежности сервера, например, для
России — ги, для Беларуси — by, для Украины — иа. Объединение
подобного имени со словом Net (сеть) часто дает сленговое назва-
ние национальной сети. Например: Рунет (RuNet) — российская
часть Интернета, Байнет (ByNet) — белорусский Интернет.
Элементы HTML
Условные обозначения: Необязательный, Запрещенный, Пустой
Имя Нач. тег Кон. тег Кон- тент Описание
а якорь
abbr сокращенная форма (напри- мер, WWW, HTTP и т.д.)
acronym аббревиатура
address информация об авторе
applet апплет Java
area 3 П область клиентского изобра- жения-карты
b полужирный текст
base 3 П базовый URI документа
basefont 3 п базовый размер шрифта
bdo I18N BiDi over-ride
big большой текст
blockquote длинная цитата
body H Н тело документа
br 3 п жесткий перевод строки
button -. кнопка
caption заголовок таблицы
center сокращение для <div align= centei>
cite цитата
code фрагмент компьютерного кода
col 3 п столбец таблицы
colgroup « Н группа столбцов таблицы
2. Элементы HTML
337
ИМЯ Нач. тег Кон. тег Кон- тет Описание
dd Н описание определения
del удаленный текст
dfn определение экземпляра
dir список каталогов
div общий контейнер языка/стиля
dl список определений
dt Н определяемый термин
em выделение
fieldset группа управляющих элемен- тов формы
font локалвное изменение шрифта
form интерактивная форма
frame 3 П вложенное окно
frameset разделение окна
hl заголовок первого уровня
112 заголовок второго уровня
h3 заголовок третвего уровня
h4 заголовок четвертого уровня
h5 заголовок пятого уровня
h6 заголовок шестого уровня
head H Н заголовок документа
hr F П горизонталвный разделители
html H Н корневой элемент документа
i курсив
iframe встроенное окно
img 3 П внедренное изображение
input 3 П управляющий элемент формы
ins вставленный текст
isindex 3 П запрос из одной строки
kbd текст, вводимый пользовате-
лем
label текст метки поля формы
338
Приложения
имя Нач. тег Кон. тег Кон- тент Описание
legend описание набора полей
li Н элемент списка
link 3 П не зависящая от устройства
ссылка
map клиентское изображение-карта
menu список меню
meta 3 п общая метаинформация
noframes альтернативный контейнер со- держимого для представления без фреймов
noscript альтернативный контейнер со- держимого для представления без скриптов
object общий внедренный объект
ol упорядоченный список
optgroup группа опций
option н выбираемый элемент
P н абзац
para in 3 п значение именованного свой-
ства
pre форматированный текст
q короткая встроенная цитата
s перечеркнутый текст
samp пример вывода программы, скрипта и т.д.
script выражения скрипта
select выбор варианта
small мелкий текст
span общий контейнер языка/
стиля
strike перечеркнутый текст
strong усиленное выделение
style информация о стиле
2. Элементы HTML
I ' —
339
ИМЯ Нач. тег Кон. тег Кон- тент Описание
sub нижний индекс
sup верхний индекс
table таблица
tbody H Н тело таблицы
td H ячейка данных таблицы
text area текстовое поле из несколь-
ких строк
tfoot Н сноска таблицв!
th Н заголовок ячейки таблицв!
thead Н заголовок таблицв!
title название документа
tr Н строка таблицвт
tt шрифт пишущей машинки (моношириннвш)
u подчеркнутый текст
ul неупорядоченнвшсписок
var экземпляр переменной или аргумента программв!
Литералы и коды
Символ Цифровой код HTML
«с " "
& & ( &
О; <
> > >
О;
(Г) ® ®
(с) б9; ©
(tm) ™
« « «
» » »
И ¶ ¶
и µ µ
Ю · ·
- –
— —
± - ± ±
о ° °
¬ ¬
• ¦ ¦
§ § §
п ¤ ¤
Не поддерживаются некоторыми браузерами
№ ¹ ¹
I ² ²
3. Литералы и коды 341
С - — .. .7- _ -
Символ Цифровой код цтмь
J ¼ &fracl4;
S ½ &frac!2;
S ¾ ¾
Т ¿ &iqncst;
V ¡ ¡
Ё ¨ ¨
Ч × ×
Ш Ø Ø
ж æ æ
Ж Æ Æ
У ¢ ¢
J £ £
Г ¥ ¥
t ♦ ♦
* ≠ ≠
S ≡ ≡
оо ∞ ∞
I ∑ ∑
—> ← ←
т ↑ ↑
<— → →
i ↓ ↓
Названия и коды
HTML-цветов
Название Шеснадцатеричное значение RGB Яркость каналов
R G В
aliceblue #FOF8FF 240 248 255
antiquewhite #FAEBD7 250 ’ 235 215
aqua #OOFFFF 0 255 255
aquamarine #7FFFD4 127 255 212
azure #FOFFFF 240 255 255
beige #F5F5DC 245 245 220
bisque #FFE4C4 255 228 196
black #000000 0 0 0
blancedalmond #FFEBCD 255 235 205
blue tfOOOOFF 0 0 255
blueviolet #8A2BE2 138 43 226
brown #A52A2A 165 42 42
burlywood #DEB887 222 184 135
cadetblue #5F9EAO 95 158 160
charteuse #7FFFOO 127 255 0
chocolate #D2691E 210 105 30
coral #FF7F50 255 127 80
cornflowerblue #6495ED 100 149 237
cornsilk #FFF8DC 255 248 220
crimson #DC143C 220 20 60
cyan #OOFFFF 0 255 255
darkblue #00008B 0 0 139
4. Названия и коды HTML-цветов
343
Название Шеснадцатеричное значение RGB Яркость каналов
R G В
darkcyan #008B8B 0 139 139
darkgoldenrod #B8860B 184 134 11
darkgray #A9A9A9 169 169 169
darkgreen #006400 0 100 0
darkkhaki #BDB76B 189 183 107
darkmagenta #8B008B 139 0 139
darkolivegreen #556B2F . 85 107 47
darkorange #FF8COO 255 140 0
darkorchid #9932CC 153 50 204
darkred #8B0000 139 0 0
darksalmon #E9967A 233 150 122
darkseagreen #8FBC8F 143 188 143
darkslateblue #483D8B 72 61 139
darkslategray #2F4F4F 47 79 79
darkturqouise #OOCED1 0 206 209
darkviolet #9400D3 148 0 211
deeppink #FF1493 255 20 147
deepskyblue #OOBFFF 0 191 255
dimgray #696969 105 105 105
dodgerblue #1E9OFF 30 144 255
firebrick #B22222 178 34 34
floralwhite #FFFAFO 255 250 240
forestgreen #228B22 34 139 34
fuchsia #FFOOFF 255 0 255
ghostwhite #F8F8FF 248 248 255
gainsboro #DCDCDC 220 220 220
gold #FFD700 255 215 0
goldenrod #DAA520 218 165 32
gray #808080 128 128 128
green #008000 0 128 0
greenyellow #ADFF2F 173 255 240
344
Приложения
Название Шеснадцатеричное значение RGB Яркость каналов
R G В
honeydew #FOFFFO 240 255 240
hotpink #FF69B4 255 105 180
indianred #CD5C5C 205 92 92
indigo #4B0082 75 0 130
ivory #FFFFFO 255 255 240
khaki #FOE68C 240 230 140
lavender #E6E6FA 230 230 250
lavenderblush #FFF0F5 255 240 245
lawngreen #7CFCOO 124 252 0
lemonchiflon #FFFACD 255 250 205
lightblue #ADD8E6 173 216 230
lightcoral #F08080 240 128 128
lightcyan #EOFFFF 224 255 255
lightgoldenrodyellow #FAFAD2 250 250 210
lightgreen #90EE90 144 238 144
lightgrey #D3D3D3 211 211 211
lightpink #FFB6C1 255 182 193
lightsalmon #FFA07A 255 160 122
lightseagreen #20B2AA 32 178 170
lightskyblue #87CEFA 135 206 250
lightslategray #778899 119 136 153
lightsteelblue #B0C4DE 176 196 222
lightyellow #FFFFEO 255 255 224
lime #OOFFOO 0 255 0
limegreen #32DC32 50 205 50
linen #FAF0E6 250 240 230
magenta #FFOOFF 255 0 255
maroon #800000 128 o" 0
mediumaquamarine #66CDAA 102 205 170
mediumblue #0000CD 0 0 205
4. Названия и коды HTML-цветов
345
Название Шеснадцатеричное значение RGB Яркость каналов
R G В
mediumorchid #BA55D3 186 85 211
mediumpurple #9370DB 147 112 219
mediumseagreen #3CB371 60 179 113
mediumslateblue #7B68EE 123 104 238
mediumspringgreen #00FA9A 0 250 154
mediumturquoise #48D1CC 72 209 204
mediumvioletred #C71585 199 21 133
minightblue #191970 25 25 112
mintcream #F5FFFA 245 255 250
mistyrose #FFE4E1 255 228 225
moccasin #FFE4B5 255 228 181
navajowhite #FFDEAD 255 222 173
navy #000080 0 0 128
oldlace ,#FDF5E6 253 245 230
olive #808000 128 128 0
olivedrab #6B8E23 107 142 35
orange #FFA500 255 165 0
orangered #FF4500 255 69 0
orchid #DA70D6 218 112 214
palegoldenrod #EEE8AA 238 232 170
palegreen #98FB98 152 251 152
paleturquoise #AFEEEE 175 238 238
palevioletred #DB7093 219 112 147
papayawhip #FFEFD5 255 239 213
peachpufT #FFDAB9 255 218 .185
peru #CD853F 205 133 63
pink #FFCOCB 255 192 203
plum #DDAODD 221 160 221
powderblue #BOEOE6 176 224 230
purple #800080 128 0 128 '
346
Приложения
Название Шесйадцатеричное значение RGB Яркость каналов
R G В
red #FFOOOO 255 0 о
rosybrown #BC8F8F 188 143 143
royalblue #4169E1 65 - 105 L 225
saddlebrown #8B4513 139 69 19
salmon #FA8072 250 128 114
sandybrown #F4A460 244 164 96
seagreen #2E8B57 46 139 87
seashell #FFF5EE 255. 245 238
sienna #A0522D 160 82 45
silver #COCOCO 192 192 192
skyblue #87CEEB 135 206 235
slateblue #6A5ACD 106 90 205
slategray #708090 112 128 144
snow #FFFAFA 255 250 250
springgreen #OOFF7F 0 255 127
steelblue Я4682В4 70 130 180
tan #D2B48C 210 . 180 140
teal #008080 0 128 128
thistle #D8BFD8 216 191 216
tomato #FF6347 255 . 99 71
turquoise #40EODO 64 224 208
violet #EE92EE 238 130 238
wheat #F5DEB3 245 222 179
white #FFFFFF 255 255 255
whitesmoke #F5F5F5 245 245 245
yellow #FFFFOO 255 255 0
yellowgreen #9ACD32 154 205 50
MIME-типы данных
Тип данных Описание Расширение
text/richtext Текст в формате RTF rtf
text/rtf Текст в формате RTF rtf
text/plain Текст ASCII txt
text/html Текст HTML и XHTML 1.0 htm, html
text/sgml Текст SGML sgml
text/xml Текст XML xml
text/ess Текст CSS css
text/javascript Текст JavaScript js
multipart/form -data Данные HTML-формы —
multipart/mixed Смешанные данные —
audio/x-aiff Звук AIFF aif, aiff
audio/basic Звук BASIC au
audio/wav Звук WAV wav
audio/midi Звук MIDI mid, midi
audio/nspaudio Звук Netscape Packed Audio la, Ima
audio/rmf Звук RMF rmf
audio/realaudio Звук для RealPlayer rpm
image/gif Изображение GIF gif
image/jpeg Изображение JPEG jpg,jpeg
image/pjpeg Изображение P-JPEG jpg,jpeg
348
Приложения
Тип данных Описание Расширение
image/tiff Изображение TIFF tif, tiff
image/png Изображение PNG Png
image/bmp Изображение Windows Bitmap bmp
image/x-wmf Изображение Windows Metafile wmf
image/x-emf Изображение Windows En. Metafile emf
image/ief Изображение Exchange Format ief
video/avi Видеоклип Windows AVI avi
video/quicktime Видеоклип Macintosh QuickTime mov
video/mpeg Видеоклип MPEG mpe, mpeg
model/vrml Модель VRML wrl
application/postscript Файл в Postscript ps
application/base64 Файл в кодировке BASE64 —
application/ macbinhex40 Приложение для Macintosh —
application/pdf Файл Adobe Acrobat pdf
application/x- compressed Архив х к —
application/zip Архив ZIP zip
application/msword Файл Microsoft Word doc
application/msexcel Файл Microsoft Excel xls
application/idp Профиль загрузки файла idp
application/Java Приложение на Java java
application/ futuresplash Файл Future Splash spl
application/ shockwave - flash Файл Shockwave Flash swf
Производственно-практическое издание
Мархвида Игорь Владимирович
Создание Web-страниц:
HTML, CSS, JavaScript
Ведущий редактор А. В. Жвалевский
Редакторы Е.С. Каляева, М.Э. Моисеева
Корректор Е.А. Барбарчик
Художник обложки С. В. Ковалевский
Компьютерная верстка Е.Л. Помогаев
Подписано в печать с готовых диапозитивов 05.08.2002.
Формат 70x100 */|6. Бумага офсетная. Гарнитура Ньютон.
Печать офсетная. Усл. печ. л. 28,6. Уч.-изд. л. 14,21:
Тираж ЗОЮ экз. Заказ № 1627.
Общество с ограниченной ответственностью «Новое знание».
ЛВ№ 310 от 14.08.2001.
Минск, ул. Академическая, д. 28, к. 112.
Почтовый адрес: 220050, Минск, а/я 79.
Телефон/факс: (10-375-17) 211-10-33, 284-03-23.
Москва, ул. Маросейка, д. 10/1. Телефон (095) 921-67-21.
E-mail: nk@wnk.biz
http://wnk.biz
Республиканское унитарное предприятие
«Издательство «Белорусский Дом печати».
220013, Минск, пр. Ф.Скорины, 79.
Об авторе:
Игорь Владимирович Мархвида,
профессиональный преподаватель,
доцент факультета информационных
технологий и робототехники БГПА,
автор книги "Интернет:
для начинающих"
789854
-475-010-8
1750101
http:llwnk.biz