close

Вход

Забыли?

вход по аккаунту

?

3581 komolova n. v html

код для вставкиСкачать
004
К63
к
Комолова
Нина
У Ч ЕБ Н Ы Й К У Р С
f e f c
к
Для всех, кто хочет создать свою веб-страницу
и заявить о себе в Интернете
Основные принципы
создания веб-страниц
Спецификации World Wide Web
Справочные материалы по HTML
Секреты использования баннерной рекламы
С
&
П
П
Т
Е
Р
С Е Р И Я
УЧЕБНЫЙ
С ^ П П Т Е Р *
Нина Комолова
У Ч Е Б Н Ы Й К УшштШ
Р ШСтжМ
v
a
v
/
X
-
!
®
»
ЬіМДдГМ
ГЫЛЫМИ
НАУЧНОЙ £И
1■'"" j с іомйгы^фі лтичдді ыпаялол*р мінуі| і ; ^ і« тмиде»сяткті *
']|~ Н
.. г.
PfHttNvCMoAul А7Ы1ШАГЫ
ifiYiinvAti
®
Ш
т
т
Е
Р
Москва • Санкт-Петербург • Нижний Новгород • Воронеж
Новосибирск • Ростов-на-Дону • Екатеринбург • Самара
Киев • Харьков • Минск
2007
м
S
3
5
S
3
н
ББК 32.988.02-018я7
УДК 004.738.5(075)
К63'
К63
Комолова Н. В.
HTML: Учебный курс. — СПб.: Питер, 2007. — 268 с.: ил.
ISBN 5-469-00854-1
.•
Учебный курс содержит последовательное изложение процесса создания веб-страниц с по­
мощью языка HTML. Также подробно рассмотрены процесс создания изображений для разме­
щения на веб-странице (в программе Adobe Photoshop) и общие вопросы веб-дизайна. Книга
содержит более 100 упражнений, позволяющих на практике закрепить изучаемый материал. Для
студентов, преподавателей вузов и широкого круга читателей, желающих самостоятельно на­
учиться созданию веб-страниц с помощью HTML.
_
I
С.Торайғыроа
атындагы ПМУ^Дің
чадемик С.Бейсембаес
атындағы гылыми
ББК 32.988.02-018я7
УДК 004.738.5(075)
Все права защищены. Никакая
данной книги не может бьггь воспроизведена в какой бы то ни было
форме без письменного разрешения владельцев авторских прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как
надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не
может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за
возможные ошибки, связанные с использованием книги.
г ШЙЙ
ISBN 5-469-00854-1
© ЗАО Издательский дом «Питер», 2007
К р а т к о е
с о д е р ж а н и е
Благодарности...................................................................................................................
Введение..............................................................................
....................... 1 4
Урок 1. Основные св е д е н и я................................................................................ 21
Урок 2. Т е к с т ............................................................................................... ...
Урок 3. Графика
33
....................................................................................................... 5 6
Урок 4. Фон веб-страниц........................................................................................76
Урок 5. Линии, точки и другие объекты .......................................... ...
86
Урок б. Бегущая строка............................................................................................98
Урок 7. Списки
....................................................................................................... ЮЗ
Урок 8. Таблицы........................................................................................................1 1 8
Урок 9. Формы........................................................................................................... 1 5 3
Урок 10. Фреймы...............................................................................................
Урок 11. Ссылки
164
........................................................................................................188
Урок 12. Мультимедиа . . ...................................... ............................................. 198
Урок 13. Баннерная реклама................................................................................ 207
Урок 14. Публикация и поиск документов........................... .......................... 214
Урок 15. Еще раз с н а ч а л а ............................................................................
221
Урок 16. Слои............................... ... ......................................... .................................. 226
Урок 17. Каскадные листы сти лей ..................................................................... 234
Урок 18. Подготовка изображений для веб-страниц............................... 253
Алфавитный у к а з а т е л ь .........................................................................................261
Содержание
Благодарности..................................................................................... 12
Введение............................................................................................. 14
От издательства...................................................... .............................................. 20
Урок 1. Основные св е д е н и я .................................................................21
Основные п о н я т и я .............................................................................................. 22
Б р а у з е р ...................................................................... ...........................................25
Структура д окум ен та........................... ...............................................................25
Гипертекстовые с с ы л к и ....................................................................................... 26
Изменение п р о гр а м м ы ....................................................................................... 27
Теги и атрибуты.................... ................................................................................ 28
Основные правила создания веб-страниц
......................................................29
Атрибуты тега < B O D Y > ........................... .........................................................29
Подведем и т о г и .....................................................................................................32
Урок 2. Т е кст........................................................................................ 33
Первая веб -стран и ц а...........................................................................................34
Уровни за го л о в к о в .............................................................................................. 34
Ш риф т..................................................................................................................... 36
Абзацы и разрывы с т р о к .................................................................................... 38
Выравнивание........................................................................................................ 40
Предварительное форматирование................................................................... 41
Задание начертания.............................................................................................. 43
Неразрывные с т р о к и ...........................
46
Вставка ц и т а т .............
47
Содержание
К о м м ен тар и и ................................................................................................ . . 48
А крони м ы ......................................................................................... ................... 49
Определения.............................. ........................................................................... 50
Шрифтовое в ы д ел ен и е...................................................................................... 50
Использование моноширинных ш р и ф т о в ..................................................... 51
Добавление текста с другой с т р а н и ц ы ............................................................53
Расстановка пробелов......................................................................................... 54
Подведем и т о г и .................................................................. .................................55
Урок 3. Г р а ф и к а ................................................................................................... 56
Размещение графики на веб-странице..................................................' . . .
57
W
Форматы графических ф а й л о в ......................................................................... 58
Формат G I F .............................................................................................
58
Формат J P E G ................................................................................................59
Формат P N G ................................................................................................... 59
Формат B M P ................................................................................................... 59
Формат P C X ....................................................................................................60
Пикселы и р азр еш ен и е........................................................ ............................... 60
Примеры размещения графики на веб-странице........................................... 61
Выравнивание и зо б р а ж ен и й ........................................................ ....................65
Карты изображений............................................................................................. 66
Т е г < М А Р > .................................... ...................... ................ ... ’ . . '. . . 67
Тег < A R E A > ............................................................... ...
67
Примеры карт изображений......................................................................... 69
Масштабирование и зо б р аж ен и й ......................................................................72
Подведем и т о г и ....................................................................................................75
Урок 4 . Фон в еб -стр ан и ц ...................................................................................... 76
Фоновые р и су н к и ................................................................................................ 77
Задание стандартных ц в е т о в .............................................................................78
Подведем и т о г и ......................................................................
85
Урок 5. Линии, точки и другие о б ъ е к т ы ..........................................................86
Горизонтальные л и н и и .......................................................................................87
Клавиатурные си м во л ы .......................................................................................89
Специальные с и м в о л ы .......................................................................................92
8
Содержание
Информация об авторе д о к у м е н т а ...............................| . . . . .
Java-апплеты........................................ ...
* ........................................... ...
С ц е н а р и и .............................................................................................. ................
Внешние объекты и комментарии ......................................................... 1 .
Листы с т и л е й ........................................................................................................
Подведем и т о г и ....................................................................................................
Урок 6. Бегущая с т р о к а .................. ...................................................... ... . . .
Вставка бегущей строки на веб-страницу
............................... ................... ...
Пример беіущей строки.............................. .................................................... ..
Рисунок в качестве бегущей строки .................................. ... ........................
Подведем и т о г и .................................................................................................
Урок 7. Списки
..................................................................................................
Виды списков
.............................................................................................. . .
Нумерованные с п и с к и ......................................................... ..............................
Маркированные с п и с к и ....................................................................................
Вложенные сп иски .................................................................................... ...
Списки определений...................................................... ................... ................
Подведем итоги
................................................................ .................................
Урок 8. Т абли ц ы ..................................................................................................
Основные теги т а б л и ц ........................................................................................
Создание т а б л и ц ................................................................ ... ................. :
Создание строк и столбцов таблицы .........................................................
Создание ячеек т а б л и ц ы ........................... 1 1 ............................. § . . 1
Создание заголовка и подписи т а б л и ц ы ...........................
Теги группирования элементов т а б л и ц .........................................................
Группирование столбцов т а б л и ц ы ..................................... ................ . .
Группирование строк таб л и ц ы .............................................................
Основные атрибуты элементов т а б л и ц ы ........................... ............. ...
Примеры т а б л и ц .................................................................................................
Подведем итоги
Урок
.......................................................................... ................ ... .
9. Ф орм ы ...................................................... ...............................................
Создание ф о р м ...........................................
Размещение на форме элементов управления...............................................
Содержание
9
Списки вы б о р а......................................... . ................... ................................ 159
Многострочные текстовые п о л я ......................................................................162
Подведем итоги
............................................................................ ................ .1 6 3
Урок 10. Ф р е й м ы .................................................................... ............................ 164
Свойства фреймов ............................................................................................. 165
Наборы ф рейм ов................................................................................................ 165
Вставка фрейма в документ с набором фреймов . .............................. ... . 167
Вставка фрейма в документ без набора ф р ей м о в ........................................168
Взаимодействие фреймов ................................................................................ 169
Примеры использования фреймов.................................................................. 170
Примеры взаимодействия ф р ей м о в ...............................................................179
Подведем итоги
................................................................................................ 187
Урок 11. Ссылки
.................................................................................................188
Универсальный указатель ресурса.................................................................. 189
~■1- ъ
-■B
s
f
c
f
ШШшшВШт.уза?1'ҢйР- /rfffiOrSr
Вставка ссылок в д о к у м е н т ............................................................................ 190
Внутренние с с ы л к и ..........................................................................................191
\
°
^
■*-.
*
" • >
ш
~ - %? * - •«?.
'
ъ
- і
7
-
^
у
*
?
*
,
•> -
?
2
г
.» ^
*
=- "
л
1
%
*
с
л
~%м
і
-
•
Внешние с с ы л к и ................................................................................................ 192
Переходы внутри документа............................................................................ 193
Графические с с ы л к и ..........................................................................................196
Подведем итоги
................................................................................................197
Урок 12. М у л ь т и м е д и а ...................................................................................... 198
Размещение объектов мультимедиа на веб-страницах.............................. 199
Анимационные файловые ф орм аты ............................................................... 201
Формат S W F .................................................................................................. 201
Формат A V I......................................................................... .......................... 202
Формат M O V ........................................... ........................... ' .......................202
Семейство форматов M P E G .............................................................................202
Звуковые ф орм аты ................................................................................... ... . . 203
Формат W A V .................................................................................................203
Формат A I F F .................... .............................................................. ... . . . 203
Формат M I D I .................................................................................................204
Формат M P 3 .................................................................................................204
Потоковые д а н н ы е ...................................................................... ........................ 204
Технология Real Audio/Video ............................................... ..................... 205
10
Содержание
Технологии Windows Media Server и Windows Media P la y e r ............. 205
Технологии QuickTime Streaming Server и QuickTime P la y e r............. 206
Подведем итоги
................................................................................................. 206
Урок 13. Баннерная реклама
207
Определение б а н н е р а ....................................................................................... 208
Эффективность б а н н е р о в ................................................................................ 208
Примеры баннеров..............................................................................................210
Подведем итоги
.................................................................................................213
Урок 14. Публикация и поиск документов...................................................... 214
Подготовка и публикация веб-сайта................................................................215
Поиск информации в Интернете
Поиск информации по URL-адресам
Поисковые системы...........................
217
218
219
Подведем итоги
220
Урок 15. Еще раз с н ач ал а..................................................................................... 221
Версия языка H T M L .......................................................................................... 222
М ЕТА-информация.......................................................................................... 223
Атрибут N A M E ..............................................................................................223
Атрибут H TTP-EQ U IV ................................................................................ 224
Связь веб-страницы с дополнительными ф а й л а м и .....................................225
Подведем итоги
225
Урок 16. Слои................................................................................................................ 226
Понятие с л о я ........................................................................................................227
Создание слоя с помощью тега < D I V > ...............................[ ...................... 227
Создание слоя с помощью тега < L A Y E R > .................................................. 231
Создание динамического слоя . ....................................................................... 232
Подведем итоги
...........................
233
Урок 17. Каскадные листы сти л е й ...................................................................... 234
Поддержка с т и л е й ............. ................................................................................ 235
Уровни C S S ........................................
. . . . 235
Синтаксис листа сти ля.............................. .......................................................... 236
Группирование стилей и селекторы к л а с с о в ............................................... 237
Содержание
11
Четыре варианта использования C S S .............................................. . 238
Встраиваемые с т и л и ...................................................................................238
Подключаемые с т и л и ...................................................................................238
Связываемые сти л и ......................................................................................241
Импортируемые с т и л и ...............................................................................242
Примеры использования стилей......................................................................244
Подведем итоги
................................................................................................252
Урок 18. Подготовка изображений для веб-страниц...............................253
Файловые о п ер ац и и ......................................................................................... 254
щ
У
Инструменты выделения
............................................................................... 255
Изменение разрешения и размеров изображения........................................256
Коррекция изображения.................................................................................. 258
Подведем итоги
................................................................................................ 260
Алфавитный у к а за те л ь ........................................................................................261
Благодарности
Появлением этой книги я обязана многим людям.
Начать я хочу со слов благодарности президенту издательского дома «Питер»
Вадиму Усманову и главному редактору Екатерине Строгановой за то, что, не­
смотря на свою занятость, они всегда откликались на приглашение Северо-Западного института печати Санкт-Петербургского государственного университета
технологии и дизайна и приезжали 1 сентября на праздник «День Первокурсни­
ка», одним из организаторов которого я являлась. Они приветствовали напут­
ственной речью студентов 1 курса, которые решили связать свою жизнь с отраслью
печати и стать редакторами, технологами полиграфического производства или
специалистами по полиграфическому оборудованию.
Я очень благодарна за организацию и помощь в работе руководителю проекта,
к. т. н. Анатолию Адаменко, с которым меня связывает наша альма-матер —
математико-механический факультет Санкт-Петербургского государственного
университета.
Я очень благодарна директору Северо-Западного института печати Санкт-Пе­
тербургского государственного университета технологии и дизайна, д. т. н., про­
фессору Дроздову Валентину Ниловичу за то, что он поверил в мой талант
преподавателя и доверил мне преподавание в институте.
Я очень благодарна заведующему кафедрой прикладной математики и информатики
Санкт-Петербургского государственного архитектурно-строительного университета,
д. ф.-м. н., профессору Вагеру Борису Георгиевичу, который инициировал чтение
мною курса лекций «Введение в Интернет-технологии». Благодарна студентам
факультета «Промышленное и гражданское строительство», потоку, состоящему
из четырех групп, которые приветствовали меня вставанием, когда я входила
в аудиторию.
■
Я очень благодарна моему научному консультанту, академику Российской ака­
демии образования, заслуженному деятелю науки и техники РФ, д. т. н., профес­
сору, зав. кафедрой АСОИУ Санкт-Петербургского государственного электро­
технического университета «ЛЭТИ» Советову Борису Яковлевичу за то, что он
оказывал мне помощь при поступлении в докторантуру Санкт-Петербургского
государственного электротехнического университета «ЛЭТИ».
Я очень благодарна моему редактору Алексею Жданову, который непосредст­
венно работал с рукописью, за его кропотливую и профессиональную работу.
Благодарности
13
Очень признательна всем сотрудникам издательства, чьими усилиями появилась
моя книга.
Благодарна тому человеку, который мне как-то сказал: «Надо писать новую
книгу. Читатели ждут».
Благодарна своим родным и близким за поддержание творческого настроя.
А больше всего я благодарна своим ученикам, которые стремятся к знаниям,
требуют их и заставляют постоянно быть в форме: листать книги, читать книги,
общаться с профессионалами, путешествовать по веб-страницам Интернета.
Комолова Нина Владимировна
Введение
Если бы я знал тогда, сколько людей будут
указывать URL, то не стал бы использовать
в синтаксисе два слэша.
Тим Бернерс-Ли
Сегодня каждый знает, что такое Интернет и веб-страница; эти понятия стали
частью повседневной жизни. О них говорят, о них думают, учреждения вклю­
чают адреса своих узлов Интернета в рекламные проспекты. Электронные
адреса показывают по телевизору, называют в радиопередачах. Поэтому и тема
создания веб-страниц интересна многим.
В ноябрьском журнале «Компьютер Центр» за 2004 год, издаваемом санкт-пе­
тербургским магазином «Компьютер-Центр КЕЙ», написано, что в Интернете
только 2 % русскоязычных сайтов, поэтому смысловое содержание 98 % ресурсов
Сети недоступно тем, кто не владеет иностранными языками (картинки можно
смотреть, а все остальное домысливать), поэтому автор книги попытается сде­
лать все, что в его силах, чтобы русскоязычных сайтов в Интернете было как
можно больше. Создавайте русскоязычные сайты!
С появлением первых компьютеров возникла проблема передачи информации
между ними. И средства были найдены — это различные носители и кабель.
Были написаны программы, позволяющие передавать и получать данные, и прак­
тически сразу возникла вторая проблема — проблема совместимости: как
заставить два и более компьютера, соединенных кабелем, работать в локальной
сети. Официальным днем рождения Интернета считается 2 января 1969 года,
когда Управление перспективных исследований (Advanced Research Project
Agency, ARPA) Министерства обороны США начало работу над проектом связи
оборонных компьютеров.
Вн
Введение
15
В 1970-е годы Интернет вырос в международную сеть. Первыми службами
Интернета стали электронная почта (electronic mail, e-mail) и группы новостей
(Usemet).
В 1980-е годы была разработана сеть Bitnet. Эта сеть, созданная специалистами
Нью-Йоркского университета (City University of New York), имела большое
значение, поскольку первоначально не предназначалась ни для военных, ни для
исследовательских целей и в то же время входила в состав Интернета.
В 1984 году была предложена доменная система имен (Domain Name System,
DNS), отображающая символьные имена на IP-адреса. До конца 1980-х годов
Интернет существовал как объединение нескольких больших сетей.
В 1986 году Международная организация по стандартизации (International Or­
ganization for Standardizations, ISO) приняла первый стандарт ISO-8879, назван­
ный SGML (Standard Generalized Markup Language — стандартный обобщенный
язык разметки). SGML — обогащенный метаязык, позволяющий строить
системы логической и структурной разметки текстов любых разновидностей.
Структурная разметка — форматирование текста, в котором управляющие
коды не несут никакой информации о внешнем виде документа, а лишь указы­
вают границы и соподчинение его составных частей, то есть задают его логичес­
кую структуру. SGML-документ требует определения типа документа (Docu­
ment Type Definition, DTD). DTD посылается вместе с SGML-доку ментом или
включается в SGML-документ для того, чтобы можно было распознать теги,
созданные пользователем. Язык SGML не получил распространения, однако его
идеология повлияла на многие компьютерные разработки.
В 1989 году выпускник Оксфордского университета, бакалавр в области физики,
сотрудник Европейского центра ядерных исследований (CERN) Тим Бернерс-Ли
(Tim Bemers-Lee) разработал язык HTML (HyperText Markup Language — язык
разметки гипертекста), ставший основным языком создания веб- документов
и прототипом Всемирной паутины (World Wide Web, W W W ). Тим Бер­
нерс-Ли — автор идеологии гиперссылок (рис. 0.1). По сути, язык HTML — это
набор SGML-предписаний, сформулированный в виде DTD. В случае языка
HTML определение типа документа хранится в браузере, и это определение на­
много проще, чем DTD языка SGML.
Однако нельзя сказать, что именно Тим Бернерс-Ли один все и придумал. К от­
крытию подошло все человечество, накопив достаточные знания. Так, еще в се­
редине двадцатого столетия Ванневар Буш (Vannevar Bush) объявил миру новое
слово — «гипертекст», а Тед Нельсон (Ted Nelson) предложил создать «докумен­
тарную вселенную», связав все тексты, произведенные на свет человечеством, пе­
рекрестными ссылками, но в начале 60-х годов двадцатого столетия у академиче­
ской публики это воззвание не вызвало ничего, кроме снисходительной улыбки.
Осенью 1990 года сотрудники CERN получили в пользование первый веб-сервер
и веб-браузер, созданные Тимом Бернерсом-Ли в среде NeXTStep.
Для работы с текстами был разработан специальный протокол передачи гипер­
текста (HyperText Transfer Protocol, HTTP). Эта технология дала огромный тол­
чок развитию Сети, и Интернет стал действительно интернациональной сетью.
16
Введение
Рис. 0 .1 . Тим Бернерс-Ли — создатель языка HTML
Летом 1991 года проект W W W , покоривший научный мир Европы, пересек океан
и влился в американский проект Internet. Появился ряд новых аббревиатур:
URL, HTTP, HTML. Вспыхнувшее было соперничество между Европой и Аме­
рикой за новую информационную технологию сошло на нет с переездом Тима
ернерса-Ли в США. В 1994-м он сначала возглавил кафедру в Массачусетском
Jw H° u ° u r j CK0Mиинституте> а затем I международный консорциум W3C
0Г м
Web Consortium), играющий роль органа по стандартизации Все­
мирной паутины.
"'•
Интернет представляет собой объединение множества локальных компьютерных
сете . отя говорят, что у Интернета нет хозяина и он не принадлежит никому,
в нем, как показано на рис. 0.2, наблюдается четкая иерархическая структура:
обозначения ПР° ВаЙДеры’ польз°ватели. На рисунке использованы следующие
О Р точка присутствия (Point of Presence, POP). Точками присутствия назы­
вают места подключения к магистрали сети поставщика услуг Интернета
n emet ervice Provider, ISP), или провайдера, обслуживающего локальных
пользователей.
іііит точка достУпа (Network Access Points, NAP). Точками доступа, или
рами о мена (Internet eXchange, IX), называют места объединения сетей
нескольких провайдеров.
Введение
17
О DNS — сервер доменной системы имен (Domain Name System, DNS). DNSсерверы служат для трансляции доменных имен в 1Р-адреса.
O F — файловый (file) сервер.
О W — веб-сервер (web-server).
О D — домен (domain).
Интернет, общие представления
Подключение локальны х сетей к глобальной сети Интернет
Магистрали
Провайдеры
Пользователи
Коммутируемая
линия
Выделенная
линия
Локальная
сеть
Документ
Пользователи
Пользователи
Протоколы передачи данны х:
IP - Internet Protocol (маршрутизация)
TCP - Transmission Control Protocol (передача данных)
POP - Post Office Protocol (передача почты)
FTP - File Transfer Protocol (передача файлов)
Виды подключения:
- постоянное (по выделенной линии)
- сеансовое (по коммутируемой линии)
Рис. 0 .2 . Структура Интернета
стали
расширения языка HTML, например, в 1993 году был разработан первый графи­
ческий браузер Mosaic. После этого появилось еще более ста различных браузе­
ров. Самыми популярными стали Netscape Navigator и Microsoft Internet Explorer.
Консорциум W3C разработал стандарты, необходимые для дальнейшего разви­
о
сотрудничестве
|НСорішшо
тия World Wide Web. “В 1996 году
аиғы
печения.
с лидерами рынка в целях стандарта
Появившийся в 1991 году язык НТМікйашишШ £двреййШ в^ся и дополнялся
ЮШдаб «евсми
Из всех этих видоизменений выделя
КІТАПХАНАГ I
Ш
18
Введение
О HTML 1.0. Первая версия языка, считая год его появления.
о HTML 2.0. Эта версия (RFC 1866) была разработана в 1994 году. Рабочая
группа по HTML в составе IETF (Internet Engineering Task Force) ввела
соответствующие изменения, и набор базовых элементов HTML 2.0 приобрел
статус стандарта.
О HTML 3.0. Эта версия языка была реализована в начале 1996 года. Появилось
много нововведений, включая теги для создания таблиц, разметки математи­
ческих формул, для вставки обтекаемых текстом рисунков, вставки приме­
чаний и т. д. Не нарушая основные концепции разметки гипертекста, авторы
версии 3.0 ввели новое средство — каскадные листы стилей (Cascading Style
Sheets, CSS).
'•
О HTML 3.2. Эта версия языка была реализована в 1996 году. В ней были преду­
смотрены дополнительные элементы, предназначенные для создания аппле­
тов, задания регистра символов и т. д. Версия HTML 3.2 стала компромисс­
ным решением — попыткой примирить Microsoft и Netscape и объединить ихі
оригинальные решения.
-'г.
О HTML 4.0. Эта версия языка была реализована в 1997 году. Вторая скорре­
ктированная реализация вышла в 1998 году. В HTML 4.0 была введена под­
держка мультимедиа, языков сценариев, а также средств воспроизведения
документов для пользователей с физическими ограничениями.
ПРИМЕЧАНИЕ
Когда консорциум W3C опубликовал спецификацию языка HTML 4,0, он
указал, что почти все атрибуты, определяющие вид HTML-документа (цвет,
выравнивание, шрифты, графика и т. д .), являются нежелательными, взамен
рекомендуется использовать листы стилей и классы. Однако большинство
разработчиков веб-страниц по-прежнему пользуются тегами, которые давно
знают.
Iш
О HTML 4.01. Эта версия вышла в 1999 году. В ней были исправлены ошибки,
замеченные в предыдущей версии.
t
В поддержку языка HTML была создана целая серия языков программирования,
таких как Java, JavaScript, Perl, РНР и т. д. С помощью этих языков стало
возможным создание динамических веб-страниц, включающих формы, таблицы,
фреймы и другие элементы.
| і^ Щ ^Щ Я Ш В Я В К т
В феврале 1998 года был предложен язык XML (Extensible Markup Language —
расширяемый язык разметки). Этот язык похож на HTML тем, что для описания
различных разделов документа в нем используются теги. Однако в отличие от
HTML язык XML позволяет разработчикам определять собственные теги и ста­
вить им в соответствие собственные способы воспроизведения информации.
XML-дескрипторы чувствительны к регистру символов. Последняя версия
Internet Explorer поддерживает XML. Что касается Netscape Navigator, то Mozilla
(рабочая группа в составе Netscape) лишь экспериментирует со средствами
поддержки XML
.' I \' § '
Язык XHTML (Extensible HyperText Markup Language — расширяемый язык
разметки гипертекста) - это сочетание HTML и XML Консорциум W3C,
Введение
19
объединяющий представителей более 500 организаций из разных стран,
рекомендует использовать XHTML вместо HTML, однако на сегодняшний день
большинство разработчиков остаются верными HTML.
Язык Dynamic HTML (динамический язык HTML) — это попытка объединить
объектную модель документа (Document Object Model, DOM), язык JavaScript
и каскадные листы стилей (CSS). Dynamic HTML позволяет создавать интерак­
тивные веб-страницы с расширенной поддержкой мультимедиа. Многие средства
Dynamic HTML описаны в спецификации HTML 4.01.
Язык Java произошел от языка программирования Oak, ориентированного на
работу в Интернете. Синтаксис языка Java близок к синтаксису языка C++.
Программы на языке Java можно разделить на две большие группы. К первой
группе относятся Java-приложения, предназначенные для автономной работы
под управлением специальной интерпретирующей машины Java. Реализации
этой машины созданы для всех основных компьютерных платформ. Вторая
группа — это так называемые апплеты.
Апплет — это небольшая программа, написанная на языке Java и включенная
в состав HTML-файла. Среду для выполнения Java-апплетов обеспечивает
другая программа, например веб-браузер. В отличие от приложений, апплеты не
могут непосредственно выполняться в операционной системе. Код апплета
интерпретируется браузером или сервером. В зависимости от того, какая из
программ выступает в роли интерпретатора, апплеты могут выполняться на
стороне клиента либо на стороне сервера. Java — это компилируемый язык.
JavaScript — это язык сценариев, с помощью которого можно расширять возмож­
ности HTML-страниц. Этот язык разрабатывался корпорацией Netscape Commu­
nications для использования в веб-браузере Netscape Navigator (JavaScript для
клиента) и веб-серверных продуктах (JavaScript для сервера), созданных этой
корпорацией. Многие элементы этого языка, предназначенные для поддержки
дополнительных функциональных возможностей статических веб-страниц,
разработала фирма Sun Microsystem.
В отличие от Java-апплетов, загружаемых отдельно от НТМ L-документа, в кото­
ром они используются, программы, написанные на языке JavaScript, встраива­
ются непосредственно в НТМ L-доку менты с помощью парного тега <SCRIPT>.
Некоторые начинающие пользователи считают, что JavaScript является версией
языка Java. Это курьезное заблуждение, между JavaScript и Java нет ничего
общего. Java — это язык программирования, a JavaScript — интерпретируемый
язык, предназначенный для написания сценариев.
VBScript — язык, который был разработан Microsoft как подмножество языка
Visual Basic. VBScript создавался для работы с Internet Explorer и Microsoft
Internet Information Server.
ColdFusion — это набор инструментальных средств разработки веб-приложений.
Достоинством этого пакета является наличие удобных средств для работы с ба­
зами данных.
РНР — это язык сценариев, обрабатываемый сервером. Подобно ColdFusion, РНРкод непосредственно включается в состав HTML-документа. Название РНР —
это аббревиатура первой версии программы, которая полностью называлась Per-
20
Введение
sonal Ноше Page Tools. В РН Р реализованы лучшие решения многих языков,
таких как С и Perl, кроме того, РН Р предоставляет разработчику мощные
средства для работы с базами данных. Подобно Perl, РН Р — свободно
распространяемая открытая система, и сообщество разработчиков имеет возможность ее модернизировать.
..-£7
К известным средствам разработки можно отнести также CGI (Common Gate­
way Interface), ASP, JSP 0 ava Server Pager), SSI (Server Side Includes), VRML
(Virtual Reality Markup Language) и другие.
Какие программы лучше использовать для создания веб-страниц? Это, несомнен­
но, Adobe GoLive, Microsoft FrontPage, Macromedia Dreamweaver. Для редакти­
рования изображения могут применяться программы Adobe Photoshop, Macro­
media Fireworks, Corel Photo-Paint, Adobe Illustrator, Macromedia Freehand, Corel
DRAW, Adobe LiveMotion, Macromedia Flash. Для работы с аудио- и видеодан­
ными - программы Adobe Premier, Apple Final Cut Pro, Apple Quick Time,
RealProducer, Windows Media.
••
■?
Существует множество простых и сложных программ для написания
HTML-страниц. В своей основе все они делятся на две категории: программы,
автоматизирующие вставку тегов, и обыкновенные стандартные текстовые
редакторы и процессоры, созданные для любых платформ. Хотя во многих
перечисленных программах веб-страницы создаются автоматически, следует
обязательно учить язык HTML, чтобы понимать, как строится веб-страница.
Поэтому в данной книге мы будем создавать веб-страницы с помощью
простейшего текстового редактора.
1 ПРИМЕЧАНИЕ
Не следует использовать для создания веб-страниц программу Microsoft
Word или Microsoft Power Point.
В книге подробно рассмотрены процессы обработки изображения для разме­
щения на веб-страницах и общие вопросы веб-дизайна. Все внимательно читая,
а главное, самостоятельно вводя все приводимые в книге коды веб-страниц,
можно очень скоро научиться разрабатывать сайты на хорошем уровне.
От издательства
Ваши замечания, предложения и вопросы отправляйте по адресу электронной
почты comp@piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
Л » г
Подробную информацию о наших книгах вы найдете на веб-сайте издательства
http://www.piter.com.
L
Основные сведения
В этом уроке рассматриваются основные понятия H TM L и эле­
менты веб-страниц. Даны определения HTM L, W W W , И нтер­
нета, веб-сайта. Рассказано, с чего следует начинать при созда­
нии H T M L -документа. Даны определения тегов, гипертекста,
гипертекстовых ссылок, приведены основные теги, определяю ­
щие структуру H TM L-документа.
22
Урок 1. Основные сведения
Основные понятия
Я
Язык HTML (HyperText Markup Language
язык разметки гипертекста)
является стандартным языком, предназначенным для создания гипертекстовых
документов в среде W W W (World Wide Web - Всемирная паутина). HTMLдокументы (или веб-документы) могут просматриваться веб-браузерами различ­
ных типов. Если документ создан с использованием HTML, веб-браузер может
интерпретировать HTML для выделения различных элементов документа и пер­
вичной их обработки.
Основное преимущество HTML заключается в том, что документ может быть
просмотрен на веб-браузерах различных типов и на различных платформах.
HTML — один из наиболее простых языков создания веб-страниц.
щ WW — это сообщество веб-серверов (сетевых компьютеров), входящих в Ин­
тернет, на которых хранятся текстовые, графические, видео-, аудио- и другие ин­
формационные файлы.
WWW — широкомасштабная гипермедиа-среда, ориентированная на предостав­
ление универсального доступа к огромному количеству документов, располо­
женных на серверах.
."w
WWW —распределенная структура данных сетевого мультимедийного гипертекста.
По всему миру разбросаны тысячи информационных серверов. Любой новый
компьютер, подключенный к Интернету, может сам стать сервером, получать не­
обходимую информацию от других серверов, отправлять письма и получать от­
веты с помощью любой из многочисленных почтовых служб.
Поисковые серверы хранят миллионы ссылок на разнообразные документы и про­
изводят поиск нужной информации по запросу пользователя. Глобальный поиск
электронных публикаций проводится с использованием технологий WWW. По­
мимо известных англоязычных и русскоязычных поисковых систем, располо­
женных на крупных серверах, собственные серверы имеют информационные
агентства, издательства, банки и другие организации.
Интернет — это совокупность сетей, применяющих единый протокол обмена
(точнее, обширное семейство из сотен протоколов) для передачи информации.
Веб-сайт (web site) — совокупность веб-документов, организованных в виде ти­
тульной страницы и нескольких связанных с ней страниц. Каждая такая сово­
купность, доступная в Интернете, может иметь любые размер и содержание, ин­
формационную и эмоциональную направленность.
Веб-мастер — лицо, ответственное за поддержание и обновление документов на
веб-серверах.
Как создаются HTML-документы?
/
HTML-документы могут быть созданы при помощи любых текстовых редакто­
ров или специализированных HTML-редакторов и конвертеров.
HTML-документ — это обычный файл в формате ASCII. В его основе лежат спе. циальные дескрипторы (теги), которые и определяют правила форматирования
данных.
.
Основные понятия
23
Код программы на языке HTML — обычный текстовый файл, поэтому проще
всего написать его в Блокноте — стандартном Windows-приложении, которое
вызывается командой Пуск ►Программы ►Стандартные ►Блокнот. Пример програм­
мы, написанной на языке HTML в Блокноте, показан на рис. 1.1.
<К1М.><НЕАО><ТПЪЕ>Современная книга<ЛШ_Е>
<BODY bgColor=#ffffff leftMargin=0 topMargin=0 marginheight=,,0" marginwidth="0">
<TABLE border=0 cellPadding=0 cellSpacing=0
style-’PADDING-BOTTOM: Opx; PADDING-LEFT: Opx; PADDING-RIGHT: Opx; PADDING-TOP: Opx"
width-'100%">
<COLGROUP align=middle span=11 width=*></COLGROUP>
<COLGROUP>
<COL width-'100%">
<COL width=*>
<TBODY>
<TR
vAlign=center>
<TD align=left colSpan=11><A
href="http://www.68-3.ni/index.php?page_type=page&amp;page=11&amp;article=0&amp;lang-'><IMG
alt="o клубе CK" border=0 height=24 hspace=1Q
згс-'Современная книга.Ше5/22.діГ width=30></A><A
href="http:/^ww.68-3.nj/index.php?lang=,,><IMG
aft-'Современная книга, книжный клуб" border=0 height=24
s rc -’Современная книга files/logo gif" width=303></A></TO>
<TD align=right colSpan=2><NOBR><A href=,,mailto:times-new(g^andex.ru,,><IMG
аИ="пишите нам” height=10 src-'Современная KHMrafHes/mailtobgir
width=14></A>&nbsp;&nbsp;</NOBR></TO></TR>.
<TR>
<TD bgColor=#8a8a8a colSpan=13><IMG heights 1
src-'Современная KHnrafiles/spacergif width=1></TD></TR>
<TR dass=menu
Рис. 1 .1 . Пример программы, написанной на языке HTML в Блокноте
Когда программа написана, ее файл следует сохранить не с расширением .txt,
а с расширением .htm (рис. 1.2). Имя HTML-файла следует писать строчными
латинскими буквами без пробелов. Можно использовать цифры, знаки подчер­
кивания и тире.
Сохранение
Рис. 1 .2 . Диалоговое окно сохранения файла в программе Блокнот
24
Урок 1. Основные сведения
Как только файл будет записан с расширением .htm, его значок сразу примет вид
«интернетовского», что показано на рис. 1.3. Файл с расширением .htm можно
просмотреть в программе Internet Explorer.
''
'Шл:
examplei.txt
example1.htm
Рис. 1 .3 . Примеры значков TXT- и HTML-файлов
HTML — это язык тегов. Под тегами понимаются специальные управляющие
коды, записываемые в тексте в угловых скобках. Теги, окружающие текстовые
или графические команды, определяют параметры форматирования текста, ме­
стоположение рисунков относительно текста, расположение объектов на странице.
Все HTML-теги начинаются с символа левой угловой скобки (<) и заканчивают­
ся символом правой угловой скобки (>). Как правило, существуют открывающий и закрывающий теги. Для примера приведем открывающий и закрывающий
теги, определяющие заголовок документа:
<TITLE> Заголовок документа </TITLE>
^
Итак, тег — последовательность символов, заключенных между символами < и >.
Почти все теги образуют пары, то есть для открывающего тега существует
закрывающий тег. Есть и непарные теги, например <BR>, <AREA>, но их мало.
Закрывающий тег выглядит так же, как открывающий, и отличается от него сим­
волом прямого слэша перед текстом внутри угловых скобок. В данном примере
тег <TITLE> говорит веб-браузеру об использовании формата заголовка, а тег
</TITLE> — о завершении текста заголовка.
Некоторые теги, такие как <Р> (тег, определяющий абзац), не требуют завершаю­
щего тега, но его наличие придает исходному тексту документа стройность, дела­
ет его понятнее.
Язык HTML нечувствителен к регистру символов, описывающих тег, и приве­
денный ранее пример мог бы выглядеть следующим образом:
<title> Заголовок документа </title>
,
. •?.1
Дополнительные пробелы, символы табуляции и конца строки, добавленные
в исходный текст HTML-документа, чтобы сделать его понятнее, игнорируются
веб-браузером при интерпретации документа. HTML-документ может включать
вышеописанные элементы, только если они помещены внутрь тегов <PRE>
и </PRE> (более подробно о теге <PRE> рассказывается в уроке 2). Вся программа
состоит из набора тегов. Теги могут иметь параметры, или атрибуты, которые иг­
рают роль дополнения тегов.
^ )п Р И М ЕЧ А Н И ЁГ
Иногда теги называют дескрипторами. Дескриптор (в переводе с лат. описатель) — лексическая единица (слово, словосочетание) информационно-поискового языка, выражающая основное смысловое содержание
какого-либо текста. Дескриптор используется при информационном поиске
документов в информационно-поисковых системах.
______
Структура документа
25
Браузер
WWW
ное обеспечение. Такие программы называются браузерами (от англ. browse —
листать, просматривать, читать). С их помощью можно загружать и просматри­
вать веб-страницы, осуществлять навигацию в WWW и т. д.
^
w
г.'-
:у
----------- ------------- W
^
-------- г
1
^
^
—
—
г
ж
т
т >
Ш
Г
л>
Браузер — программа просмотра HTML-файлов, программа-интерпретатор
языка HTML. Браузер показывает на экране текст и графику, интерпретируя
команды (теги), указанные в исходном тексте в угловых скобках.
Веб-браузер — это прикладная программа, которая отображает содержимое
файлов, полученных с локального или удаленного компьютера, в соответствии
с инструкциями, включенными в эти файлы. Браузер представляет собой кли­
ентскую программу и использует для передачи запросов веб-серверам протокол
HTTP (HyperText Transfer Protocol — протокол передачи гипертекста).
Существует довольно большое количество браузеров, из которых самыми по­
пулярными являются браузеры Microsoft Internet Explorer, Netscape Navigator
и NCSA Mosaic. Браузер, прочитав HTML-файл, с помощью тегов интерпрети­
рует содержащиеся в документе данные и соответствующим образом отображает
их на экране компьютера. Браузеры Netscape Navigator и Internet Explorer имеют
встроенные программы чтения новостей.
Структура документа
Когда веб-браузер получает документ, он по тегам определяет, как документ
должен быть интерпретирован.
О Тег <HTML>. Самый первый тег, который встречается в документе, должен
быть тегом <HTML>. Данный тег сообщает веб-браузеру, что документ написан
на языке HTML. Минимальный HTML-документ мог бы выглядеть так:
<HTML> ... тело документа. . . </HTML>
Таким образом, теги <HTML> и
называемый контейнер.
</HTML>
образуют для HTML-документа так
О Тег <HEAD>. Структурно документ распадается на две части: заголовочную
и основную, или тело документа. Заголовочная часть размещается между
тегами <HEAD> и </HEAD>, основная — между тегами <B0DY> и </B0DY>.
О
Тег <TITLE>. Внутри контейнера <HEAD> и </HEAD> размещается единствен­
ный обязательный контейнер из тегов <TITLE> и </TITLE>, содержащий текст
заголовка.
Тег заголовочной части документа должен быть указан сразу после тега <HTML>
и более нигде в теле документа. Данный тег представляет собой обобщенное
описание документа. Следует избегать размещения какого-либо текста внутри
тега <HEAD>. Открывающий тег <HEAD> указывается непосредственно перед
тегом <TITLE> и другими тегами, описывающими документ, а закрывающий
тег </HEAD> — сразу после окончания описания документа.
26
Ур°к 1* Основные сведения
Большинство веб-браузеров отображают содержимое тега <ТТПЕ> в заголовке
окна содержащего документ, и в файле закладок, если он поддерживается веббоаузеоом Заголовок, ограниченный тегами <TITLE> и </TITLE>, размещается
внутри тегов <HEAD>. Заголовок документа при отображении самого
документа в окне браузера не виден.
, *•
Теги тела документа идентифицируют отображаемые в окне компоненты
HTM L-документа. Тело документа может содержать ссылки на другие
документы, текст и другую форматированную информацию.
О Тег <BODY>. Тело документа должно находиться между тегами <B0DY>
и </B0DY> Это та часть документа, которая отображает его текстовую
и графическую информацию.
Следует заметить что открывающие и закрывающие теги <HTML>, <HEAD>
и <B0DY> необязательны, но их настоятельно рекомендуется использовать,
поскольку это позволяет веб-браузеру уверенно отделить друг от друга
заголовочную и непосредственно смысловую части документа.
Тег <B0DY> парный. Между открывающим тегом <B0DY> и закрывающим
тегом </B0DY> размещаются все другие теги программы, составляющие
основное содержание документа. Тег <B0DY> предназначается для выделения
той части документа, которая должна быть показана пользователю на экране.
Гипертекстовые ссылки
Гипертекстовые ссылки являются ключевым компонентом, делающим веб-
страницы привлекательными для пользователей. Благодаря гипертекстовым
ссылкам (или просто гиперссылкам) веб-страница структурируется и связыва­
ется с другими документами, что обеспечивает быстрое и удобное получение ин­
формации. Технология гиперссылок позволяет объединить множество документов в один.
Гипертекст - информационная структура, обеспечивающая навигацию посред­
ством гипертекстовых ссылок. Гипертекстовыми ссылками называются фраг­
менты текста или изображения, при активизации которых отображаются связан­
ные с ними документы.
,
-.
Гипертекстовая ссылка — основной элемент всех гипертекстовых систем,
которые указывают на другой документ или на другую часть того же документа.
Такая ссылка задается тегами <А> и </А>. Она имеет несколько атри утов,
наличие одного из двух (HREF или NAME) обязательно. Первый указывает на
ссылку за пределы данного документа, например:
<А
HREF="http ://vvFww. имя_сайта. зона/;.:./имя_файла/һіш"> название ссылки </А>
Второй позволяет перейти к определенным образом отмеченному (с помощью так
называемого якоря, или закладки) месту того же самого документа, например.
<А ИАМЕ="#имя_якоря"> название ссылки
</А>
Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать
их и выполнять необходимые функции (вызывать методы) в зависимости от
Изменение программы
27
типа ссылки. Ссылки могут указывать на другой документ, специальное место
данного документа или выполнять другие функции, например запрашивать
файл по протоколу FTP (File Transfer Protocol — протокол передачи файлов)
для отображения его браузером. В ссылку включается URL (Uniform Resource
Locator
унифицированный указатель ресурса) — адрес особого формата,
идентифицирующий другие локальные или удаленные документы, что часто
требуется при организации больших структурированных веб-сайтов.
Ссылки можно использовать для перемещения как по одному документу, так
и от одного документа к другому. Однако HTML не поддерживает возврат на
предыдущую ссылку, если перемещение происходит внутри документа.
Изменение программы
Если в коде веб-документа (файле с расширением .htm), который можно про­
смотреть в браузере Internet Explorer, требуется выполнить изменения, то следупрограмме
команду Вид ►Просмотр HTML-кода (рис. 1.4).
*»
и
____
Э Д М &
J
£ий
Панели инструментов
* £грока сосгояшя
Панели обозревателя
■f •
- V %V«V» . W » « V V W * « ■ ■ f r . v v s
* V a V .V « a V t'.V A W
Переход
Псганоеигъ
Обносить
Л Ч 'А
* У *1* *
Г ‘
|ц
Ғ5
Уі*<У>УУгІГі
Размер шрифта
Кодировка
1
►
►
Просмотр HTML-коаа
^
9
_
»•
JI * w »
* —ш ш
• ■ С
f Ш % *V
в
ъ •
.
4
*
ж Ъ м ~
^ л
|
" *.
Во весь экран
П1
Рис. 1 .4 . Просмотр HTML-кода документа
файл будет открыт в окне программы Блокнот (см. рис. 1.1). Выполнив
изменения кода программы, следует воспользоваться командой Файл ►Сохранить
(рис. 1.5).
файл
Соэадть
Открыть.!.
Сохранить
Сохранить &ак..,'
Макет страницы
Печать
Вдеоа
Рис. 1.5. Сохранение программы
28
Основные сведения
УР0К
Чтобы увидеть изменения программы в браузере Internet Explorer, необходимо
щелкнуть на кнопке Обновить (она четвертая слева на рис. 1.6) или выполнить
команду Вид > Обновить (см. рис. 1.4).
Рис. 1 .6 . Панель инструментов программы Internet Explorer
При следующих изменениях все перечисленные операции следует повторить.
Теги и атрибуты
код
языка
HTML,
с
помощью
которого
выполняется
разметка
исходного
Тег
отмечалось
текста, іс і
*w» ^
----- —
__
„
начинаются с символа < и заканчиваются символом | После открывающей
угловой скобки следует имя тега (команды). Каждый тег может иметь атрибуты.
J
/
_______________ >г тгтт
т р г ч а іг п и в я начальныи
I lU U /iC 11СиСЛ*1Ы1^Х1!1Л
------ J -----иТ А Л
ется. После открывающего тега располагается содержимое тега. Код HTML-д кумента заканчивается конечным, или закрывающим, тегом (рис. 1.7). закрытргм начинаются с символа косой черты (/)f
Имя атрибута
Значение атрибута
Имя тега
<НЗ ALIGN = CENTER> Страница должна иметь заголовок </НЗ>
------ Атрибут —
Открывающий тег
Содержимое элемента
■ М
ШШ
Закрывающий
тег
HTML-элемент
Рис. 1 .7 . Структура HTML-элемента
учитывается
написан как строчными, так и прописными буквами, но в основном используют
1
_____ _ _ __ ..м м л •»»»»/ЧТТТЖ/Т ТТЛ\1У*Л ( Р И Т 51
информационного
9
Если тег написан с ошибкой, то программа его игнорирует, не сообщая об ошиб­
ке. Теги не отображаются сами, а влияют на способ отображения документа.
Атрибуты — дополнительные управляющие слова, отделенные от тега и друг от
друга пробелами. Можно сказать, что атрибуты — это имена свойств тегов,
которые могут принимать определенные значения. Атрибуты имеются только
у открывающих тегов, у закрывающих тегов их нет. Атрибуты влияют на
результат интерпретации тега браузером.
задается
требовалось
заключать
UUUV/ilV XUU* JL UAAi/JLLiV Ui&U
J$
J
- — -------v
.
. v.
И
теперь во многих случаях эти кавычки можно опускать без каких-ли о
последствий.
Атрибуты тега <BODY>
29
Основные правила создания веб-страниц
При создании веб-страницы необходимо придерживаться определенных правил,
которые перечислены ниже.
О Следите за тем, чтобы веб-страницы не получились слишком широкими
и пользователям не приходилось пользоваться прокруткой. Обычно, если
веб-страница не помещается на экране, большинство браузеров добавляют
внизу экрана горизонтальную полосу прокрутки. Типичной шириной экрана
считается ширина 640 пикселов.
О Каждая веб-страница должна иметь заголовок.
О Не перегружайте страницу графикой.
О Попытка визуально выделить все означает не выделить ничего.
О Не забывайте житейскую мудрость: «Все гениальное — просто».
О Помните про пословицу: «Выплескивая воду из корыта, не выплесните
с водой ребенка». Иногда веб-страница сделана так красиво и оригинально,
что непонятно, чему она посвящена.
О Используйте свободное пространство для привлечения внимания. Многие
создатели сайтов концентрируют текст в середине экрана, оставляя широкие
поля слева и справа от текста пустыми. Подобное пустое пространство
заставляет пользователей компьютера сосредоточиться на тексте, который
находится в середине.
Атрибуты тега <B0DY>
В противоположность тегу <HEAD> тег <B0DY> содержит всю ту информацию, из
которой, собственно, и состоит рассматриваемый документ. Порядок следования
тегов здесь именно такой, в каком они предстают перед читателем.
Начальный тег <B0DY> может иметь несколько атрибутов, например:
<B0DY BGCOLOR-#FFFFFF LEFTMARGIN=0 TOPMARGIN-4 MARGINWIDTH=0 MARGINHEIGHT-4 LINK=#000099
VLINK-#000099 ALINK=#CC0000>
О Атрибут BACKGROUND задает графическое изображение, которое, как кафель­
ная плитка, заполнит фон документа. Файл с изображением должен быть
сохранен в формате GIF или JPEG. Пример:
<B0DY BACKGROUND-"(URL)(путь) имя файла">
Файл с изображением фона лучше размещать в том же каталоге, что и файл
самого документа, тогда URL-адрес и путь указывать не нужно. Пример
использования этого атрибута в HTML-документе имеется в уроке 4.
О Атрибут BGCOLOR задает цвет фона документа при помощи шестнадцатерич­
ных значений интенсивности цветовой модели RGB (Red, Green, Blue —
красный, зеленый, синий) или строчного литерала, соответствующего назва­
нию цвета, например:
<B0DY BGCOLOR—"# f f 0000">
<B0DY BGCOLOR-"RED
30
Урок 1. Основные сведения
Примеры использования этого атрибута в HTML-документе имеются в уроке 2.
О Атрибут TEXT задает используемый по умолчанию цвет текста, не являющего­
ся гиперссылкой. По умолчанию такой текст черный. Пример:
<B0DY
’
*
Пример использования этого атрибута в HTML-документе имеется в уроке 4.
О Атрибут LINK задает цвет гиперссылки; в большинстве браузеров он по
умолчанию темно-синий. Пример:
...,,
<B0DY LINK="UBeTn>
,}
| щ |
Пример использования этого атрибута в HTML-документе имеется в уроке 15.
О Атрибут ALINK задает цвет активной гиперссылки, который меняется в мо­
мент щелчка на ней мышью и который желательно делать отличным от цвета
фона (задаваемого атрибутом LINK). Пример:
<В00Ү АШК="цвет">
Пример использования этого атрибута в HTML-документе имеется в уроке 15.
О А т р и б у т VLINK задает цвет посещенной гиперссылки, который желательно
делать отличным от цвета фона (задаваемого атрибутом LINK) и от цвета
активной гиперссылки (задаваемого атрибутом ALINK). Пример:
<BQDY VLINK="ueeT”>
'
Пример использования этого атрибута в HTML-документе имеется в уроке 15.
О Атрибут BGPR0PERTIES задает свойства фонового изображения. В данный
момент браузерами поддерживается единственное его значение fixed, запре­
щающее прокрутку изображения. Пример:
<B0DY BGPROPERTIES="fixed">
_V f
Я
>
О Атрибут T0PMARGIN задает верхнюю границу страницы в пикселах. Пример:
<B0DY 70PHARGlN-4HCfl0>
-V
О Атрибут B0TT0MMARGIN задает нижнюю границу страницы в пикселах. Пример:
<B0DY BOTTOMMARGI N=4ncno>
О Атрибут LEFTMARGIN задает левую границу страницы в пикселах. Пример:
<B0DY LEFTMARGIN=4HCfl0>
.
у Э Д Ш
О Атрибут RIGHTMARGIN задает правую границу страницы в пикселах. Пример:
<B0DY RIGHTMARGIN=4mcjio>
Примеры использования в HTML-документе атрибутов, регулирующих по­
ложение границ страницы, имеются в уроке 4.
На рис. 1.8 показана веб-страница (листинг 1.1), для которой верхняя, левая,
правая и нижняя границы не заданы, то есть равны 0. Видно, что текст как бы
прилипает к левому краю страницы, отступов сверху и снизу не наблюдается.
Правый край текста имеет отступ от правой границы только из-за того, что в нем
после каждой строки указан тег перехода на новую строку (тег <BR>).
Л и сти н г 1 .1 . Пример создания веб-страницы, для которой не заданы границы
<HTML><HEAD><TITLЕ>Моя первая nporpaHMa</TITLE></HEAD>
<B0DY BGCOLOR -FFFF05
TOPMARGI N=0
И
Ш H
Ж
Я
Ш
І
І
Атрибуты тега <BODY>
31
BOTTOMMARGIN«0
LEFTMARGIfH)
RIGHTMARGIN*0>
<H2> А. С. Пушкин </H2>
<H2> Зимняя дорога</Н2>Сквозь волнистые туманы <BR>npo6npaeTCfl луна,<@R>Ha печальные
полянБКб1>Льет печально свет 0 Ha<BR><BR>ri0 дороге зимней. скучной<ЕЮ>Тройка борзая
бежит.<BR>Koлoкoльчик 0flH03By4Hbm<BR>yT0MHTenbH0 гремит.<BR><BR>4to-то слышится
родное <BR>B долгих песнях ямщика :<BR>To разгулье удалое^>То сердечная
тоска...<BR><BR>Hn о г н я , ни черной хаты. <BR>rnyuib и снег... Навстречу мне.
<BR>TonbKO версты пoлocaты<BR>Пoпaдaютcя одне...<BRxBR>CKy4HO. грустно...Завтра.
Нина. <BR>3aBTpa к милой возвратясь.<ВР>Я забудусь у камина. <BR>3aгляжусь не
наглядясь.<BR><BR>3ey4HO стрелка часовая<ВР>Медный круг свой совершит.<BR>M. докучных
удаляя.<BR>rkMH04b нас не paзлyчит<BR><BR>Гpycтнo. Нина: путь мой скучен. <ВР>Дремля
смолкнул мой ямщик.^>Колокольчик однозвучный.<BR>OTyMaHeH лунный
лик.<BR><I>1826</I></BODҮ></HTML>
J Моя первая программа - Microsoft Internet Explorer
C:\Documents and 5еКіпд5\Владелец\Рабочий стол\1080041507.htm
Ш Ш Й Й
■ Ш Я. Ш.Ш Я.т * Ш.Ш,Л
Ш
ш
т. ш ш ш ж
а
ш т.ж т ж .
« . к ж
*
ж ж
—
.
. >
.
А, С. П у ш к и н
и м н я я дор ога
квозь волнистые туманы
робирается луна,
а печальные поляны
ьет печально свет она
Рис. 1 .8 . Веб-страница, для которой не заданы границы
рис. 1.9 показана веб-страница, для которой верхняя, левая, правая и нижняя
границы заданы и равны 150 пикселов (листинг 1.2). Видно, что текст имеет
отступы от левого и правого краев, а также сверху (и снизу, в чем можно убе­
диться, выполнив прокрутку). Так как текст полностью в окно не помещается,
автоматически справа появляется вертикальная полоса прокрутки.
На
Листинг 1.2. Пример создания веб-страницы, для которой заданы границы
<HTML><HEADxTITLE>Mofl первая програмна</Т1Т1_Е></НЕА0>
<B0DY bottomMargin-150 bgColor=#FFD000 leftMargin=150 topMargin=150 rightMargin=150>
<H2>A. С. Пушкин </H2>
<Н2>Зиинее утро </Н2>Мороз и солнце: день чудесный; <BR>Eiue ты дремлешь, друг
прелестный.<BR>flopa. красавица, проснись:<В1*>0ткрой сомкнуты негой взоры<ВЯ>Навстречу
северной Авроры.<В1*>Звездою Севера явись!<BR><BR>Be4op. ты помнишь, вьюга
злилась.<BR>Ha мутном небе игла носилась:<BR>JlyHa. как бледное пятно. <BR>CKB03b тучи
мрачные желтела.<BR>A ты печальная сидела-<BR>A нынче погляди в окно:<BR=><BR>Flofl
голубыми небесами<ВР>Великолепными коврами, <ВЯ>Блестя на солнце, снег
лежит;<BR>f]po3pa4HbM лес один чернеет,<BR>ld ель сквозь иней зеленеет. <BR>H речка
32
Урок 1. Основные сведения
ппло льном блестит <BR><BR>Bca конната янтарный блескон <В1*>0зарена. Веселый
Н К М Н Н Н затопленная печь<ВК>Приятно думать у лежанки.<BR>Ho знаешь: не
велеть ли в санки<В^Кобылқу бурую запречь?<ВК><ВР>Скользя по утреннему снегу.
<BR>flDvr милый предадимся бегу<ВР>Нетерпеливого коня<ВЯ>И навестим поля пустые.
<BR>Seca. недавно столь густые.<BR>H берег, милый для меня<ВР><1>1829</1>
</B0DY></HTML>
'
Мпа первая программа - M icrosoft Intern et ЕиршУСУ
Э
Сервис
- V - V e V w . *
it ulmm
ЩШШ
Журнал
C;\Docurnents and 5ettings\BnaAe n e u \ P a 6 o 4 W C T o n \ iq ^ l^ .to
w
Ш
Ж
ШшШШ
■fig
$Шж.
Рис. 1.9. Веб-страница с отступами от границ
Подведем итоги
В этом уроке рассмотрены базовые понятия, относящиеся к созданию вебстраниц. Показаны структура HTML-документа и некоторые основные теги.
Перечислены правила создания веб-страниц. В заключение урока представлено
несколько примеров веб-страниц.
Текст
В этом уроке рассматриваются основные теги, предназначен­
ные для работы с текстом. Эти теги позволяют форматировать
текст, красиво располагать его на странице, а также выводить
в виде всплывающих подсказок.
34
Урок 2. Текст
_____________
Первая веб-страница
Можно открыть Блокнот и в теле документа записать текст, не задумываясь
о его размерах и цвете. На рис. 2.1 показана такая программа при просмотре
в браузере (листинг 2.1).
•
3 l Моя первая Реб-страничка * Microsoft: Internet
ЖүрһМ
ІШ І
C:\Documents
Рис. 2 .1 . Веб-страница с текстом
Листинг 2 .1 . Пример создания веб-страницы с текстом
<НИ1>
<НЕА0>
<TITLE> Моя первая Веб-страничка</Т1Т1Е>
f:|
-
</ИЁА0>
Щ
-'Г. Ш
^
. *В
Ғ
Я
і
Й
■
:“У.';, Щ. \ ;>С
<b o d y >
■
I 1Н I
I
33 удивительнейшие буквы русского алфавита передают человечеству события, факты,
настроение, переживания, радость и вдохновение, то есть все. что можно видеть,
слышать, пробовать, трогать, чем можно наслаждаться. Как же буквы могут передать
огромное количество информации? Буквы образуют слово, слова собираются в предложения,
предложения могут составить целую книгу. Книги состоят из текста и рисунков.
</B0DY>
</HTML>
*
,
Как видно на рисунке, то, что находится между тегами <TITLE> и </TITLE>, не по­
является на экране. Однако при загрузке документа в браузер этот текст загру­
жается в первую очередь и отображается в заголовке окна браузера. Если текст
заголовка достаточно информативен, пользователь в процессе поиска нужных
документов уже на этапе загрузки может определить, действительно ли ему ну­
жен этот документ, а если не нужен, то сразу отказаться от его загрузки и перей­
ти к загрузке следующего.
Текст названия требуется и при создании закладки на данный документ, с этой
точки зрения его информативность также очень важна.
Уровни заголовков
Заголовки различных уровней позволяют структурно разделить формально не
ограниченный по длине текст на отдельные разделы и абзацы. Первый уровень
заголовков (самый высокий) обозначается цифрой 1, следующий — 2, и т. д. Теги
с меньшими номерами определяют заголовки более высоких уровней. Болыиинподдерживает
каждому
признак 1. Синтаксис заголовка первого уровня (Н, от англ. head — заголовок):
<Н1> Заголовок первого уровня
</Н1
случае
<Нх> Заголовок х - т уровня </Нх>,
Здесь х — цифра от 1 до 6, определяющая уровень заголовка.
Атрибут ALIGN управляет горизонтальным выравниванием, принимая значение
LEFT (влево), CENTER (по центру), RIGHT (вправо) или JUSTIFY (по ширине от левой
границы до правой).
На рис. 2.2 показано окно программы, содержащей заголовки, при просмотре
в браузере (листинг 2.2).
3 Заголовки - Microsoft Internet Explorer
C:\Documents and
Заголовок 1 - Транспортный протокол
Заголовок 2 - П ротокол марш рутизации
Заголовок 3 - Протокол передачи файлов
Заголовок 4 - Протокол передачи почты
Заголовок 5 - Сетевом протокол
kriMMCi -Цңтті ящфіяоіnrmrt «мі«
Готово
WrepHjT
Р ис .
Веб-страница с заголовками разных уровней
Листинг 2.2. Пример создания веб-страницы с заголовками
<HTML>
.
:%Ж Щ
<НЕА0>
<TITLE> Заголовки </TITLE>
</HEAD>
<B00Y>
<Н1> Заголовок 1 - Транспортный протокол</Н1>
<Н2> Заголовок 2 - Протокол маршрутизации</Н2>
<НЗ> Заголовок 3 - Протокол передачи файлов</НЗ>
<Н4> Заголовок 4 - Протокол передачи лочты</Н4>
<Н5> Заголовок 5 - Сетевой протокол</Н5>
<Н6> Заголовок б - Протокол поддержки сетевого адреса</Н6>
</B0DY>
</HTML>
V*
36
Урок2.Текст
Данный тег появился в HTML версии 2.0. Заголовки более высоких уровней
шрифтом
Шрифт
;/
Тег <F0NT> позволяет с помощью атрибутов управлять размером и цветом
шрифта
шрифта. Шрифт
шрифта
непосредственно
цифрой
или задать
^
^
--£----- У
Ж
• •
относительно базового значения (по умолчанию — 3) в положительную или
шрифта
I
иллюстрирует табл. 2.1.
Таблица 2 .1 . Типичные размеры шрифтов и их величины в пунктах
Размер шрифта
Типичная величина в пунктах
1
8
2
10
3
12
4
5
6
14
18
24
шрифта можно изменить при помощи следующей команды
<F0NT SIZE=+|- n>
такая
<BASEF0NT SIZE=n>
Пример использования шрифтов разного размера показан на рис. 2.3 (листинг 2.3)
5 Размер шрифта - Microsoft: Internet Explorer
шшш
C:\Documents and Settings\BnaAeneu\Pa6o4H
Рис. 2 .3 . Веб-страница с буквами разного размера
Шрифт
37
Листинг 2 .3 . Пример создания веб-страницы, содержащей буквы разного размера
<HTML>
<НЕА0>
<TITLE> Размер шрифта </TITLE>
</HEAD>
<B0DY>
<Р>П
<F0NT SIZE-+1>E</F0NT>
<F0NT SIZEe+2>T</FONT>
<F0NT SIZE=+3>E</F0NT>
<F0NT SIZE=+4>P</F0NT>
<F0NT SIZE=+3>b</F0NT>
<F0NT SIZE=+2>Y</F0NT>
<F0NT SIZEs=+l>P</FONT>
Г</Р>
</B0DY>
</HTML>
Данный тег появился в HTML версии 3.2, однако в настоящее время он не реко­
мендован к применению. Вместо него желательно использовать средства каскад­
ных листов стилей (см. урок 17).
Чтобы изменить цвет шрифта, используется атрибут COLOR тега <F0NT>:
<F0NT COLOR*"#хххххх">
Цвет указывается в цветовой модели RGB соответствующими значениями
цветовых составляющих в шестнадцатеричном формате. Например, белый цвет
обозначается FFFFFF, черный — 000000, синий — 0000FF и т. п.
Пример веб-страницы, содержащей текст разного цвета, показан на рис. 2.4
(листинг 2.4).
3 Цвет шрифта - Microsoft Internet
Доиои
$\Владелец\Рабочий стол\1
Синий
Рис. 2 .4 . Веб-страница с разноцветным текстом
Листинг 2.4« Пример создания веб-страницы с разноцветным текстом
<HTML>
<HEAD>
<TITLE> Цвет шрифта </TITLE>
</HEAD>
‘ ■<BQDY>
<F0NT COLOR-"#FFOOOO">
Красный </F0NT>
'
•
<
38
Урок 2. Текст
<F0NT COLOR-м#00ҒҒ00и>
Зеленый </F0NT>
<F0NT COLOR="#OOOOFF">
Синий </F0NT>
</B0DY>
-
•
’
•
< л
;
w
,л;J j j j -*r
■' -vir^h/ ^ Я
</HTML>
;
определяет базовый (основной для всей страницы) размер
шрифта, имеет открывающий дескриптор. SIZE - атрибут тега, который опреде­
ляет базовый размер этого шрифта. SIZE меняется в пределах от 1 до 7. По умол­
чанию используется величина 3. Пример применения этого тега можно посмот­
реть на рис. 2.5, а код программы — в листинге 2.5.
9 Я Н 4*~'’^гтРР
Ter <BASEF0NT>
2 | Теги форматирований символов "
ш
ш
ш
Ш&ШЯ
шшйй
and Setting5\Bладелец\Ра6очии стол\1
41507.htm
Рис. 2.5. Веб-страница, содержащая тег <BASEF0NT>
Листинг 2 .5 . Пример создания веб-страницы, содержащей тег <BASEF0NT>
<HTML><HЕAD><TITLE>Teги форматирования символов</ТІТІ_Е></НЕАО>
<B0DY BGC0L0R=#EEEAAA><BASEF0NT size=8>JloroTnn - элемент фирменного стиля.<BR>
<BASEF0NT $іге=6>оригинальное начертание наименования рекламодателя.<BR>
<BASEF0NT size=5>oflHa из форм торгового знака
</B0DY></HTML>
Тег <BASEF0NT> появился в HTML версии 3.2. Вместо данного тега рекомен­
дуется использовать средства каскадных листов стилей (см. урок 17), а шрифт
может быть изменен с помощью тега <F0NT>.
Абзацы и разрывы строк
В HTML-документе невозможно разбить текст на абзацы, используя клавишу
Enter. Нажатие этой клавиши улучшает внешний вид исходного текста, но не
влияет на получаемое изображение. Для перехода на следующую строку следует
воспользоваться тегом <BR>, а для создания пустой строки — тегом <Р>.
Тег <Р> позволяет разделить текст на абзацы. Если этого не сделать, документ
будет выглядеть как один большой абзац.
ALIGN — атрибут выравнивания тега <Р>. Этот атрибут может иметь значение LEFT,
CENTER, RIGHT, JUSTIFY, что позволяет выровнять абзац по левому краю, по
Абзацы и разрывы строк
39
центру, по правому краю или по ширине соответственно. Например, следующая
запись выравнивает абзац по левому краю:
<Р ALIGN=LEFT>
Данный тег появился в HTML версии 2.0, он не может содержать другие откры­
вающие и закрывающие теги, то есть между тегами <Р> и </Р> может быть только
текст и разрыв строки, но не другие теги.
Тег <BR> извещает браузер о разрыве строки. Дополнительный параметр CLEAR
позволяет расширить возможности тега <BR>, не просто обеспечивая перевод
строки, а размещая следующую строку, начиная с левой (LEFT), правой (RIGHT),
обеих (A LL) границ окна браузера, или обычным способом (NONE). Например,
если рядом с текстом слева должен располагаться рисунок, то можно
использовать тег <BR> для смещения текста под рисунок.
Данный тег появился в HTML версии 2.0. В настоящее время атрибут CLEAR не
рекомендован к применению, вместо него желательно использовать средства
каскадных листов стилей (см. урок 17).
Тег <DIV> (от англ. division — раздел) позволяет выделить в структуре документа
несколько разделов. Он является блочным элементом, функционирующим во
многом подобно элементу <Р>. Если закрывающий тег </Р> опущен, то <DIV> эф­
фективно заменяет его, начиная новый абзац. Он может иметь атрибут ALIGN, ко­
торый имеет значение LEFT, CENTER или RIGHT и указывает отступ. Каждый сле­
дующий раздел игнорирует значение ALIGN, заданное для предыдущего раздела.
Синтаксис:
<DIV ALIGN=OTCTyn> Текст раздела </DIV>
Пример использования этого тега можно посмотреть на рис. 2.6, а код програм­
мы — в листинге 2.6.
Э Теги форматирования символов * M krosoft
and Settjngs\Bладелеи\Рвбочий стол\108(ХМ1507.htm
refcfcoiB.
Ьи^одитедсй
или их стетжв
* отлачающие o s ;
П і
Рис. 2 .6 . Веб-страница, содержащая тег <DIV>
Листинг 2 .6 . Пример создания веб-страницы, содержащей тег <DIV>
<HTMLxHEAD><TITLE> Теги форматирования символов</Т1Т1Е></НЕА0>
<B0DY BGC0L0R“#EEAAAE><DIV ALIGN-CENTER> Аттитюд - социально-психологическая установка,
внутренняя потребность человека к каким-либо действиям (например, к покупке
рекламируемого товара)</DIV>
40
Урок 2. Текст
<DIV> Афиша - старейшее средство наружной реклаиы. выполненное на плотной буиаге или
картоне </DIV>
<DIV ALIGN=RIGHT> Булл-Марк - реклана издательства, вкладываеная в книгу, журнал,
каталог, в виде красочной закладки</01 V>
'■
<OIV> Марка - имя, термин, знак, символ, рисунок или их сочетание, идентифицирующее
товары или услуги одного или нескольких производителей (продавцов) и отличающие их от
товаров и услуг конкурентов</01У>
</BODY></HTML>
;
Н
Н
4~ :
Так как данный тег появился в HTML версии 3.2 и используется в сочетании
с каскадными листами стилей, он представляет собой мощное средство задания
структуры документа.
Выравнивание
Как уже упоминалось, атрибут ALIGN позволяет выровнять текст по левому или
правому краю, по центру или по ширине страницы.
По умолчанию текст, графика и элементы таблицы выравниваются по левому
краю и не выравниваются по правому краю, то есть начало строк находится на
одном уровне, а конец — на разных. Выравнивание по левому краю задается ат­
рибутом ALIGN=LEFT, выравнивание по правому краю — атрибутом ALIGN=RIGHT.
Центрирование элементов документа можно производить разными способами,
например с помощью тега
<ALIGN=CENTER>
Вы можете также центрировать все элементы документа в окне браузера. Для
этого можно использовать тег <CENTER>. Все элементы между тегами <CENTER>
и </CENTER> будут находиться в центре окна.
Центрирование можно производить и в абзаце:
<Р ALIGN=CENTER>
■• '
Пример веб-страницы, содержащей текст, выровненный различными способами,
показан на рис. 2.7 (листинг 2.7).
£ Центрирование и выравнивание - Microsoft. Internet
«
н
Я Я н
В
с
З Э К а Н
гХВЯэВЗЯВЕЯ
ВнЯвВаНнЙ
ш т ат .
Атрибут ALIGN позволяет выровнять текст по левому или правому краю
по центру или по ширине
По умолчанию текст, графика и элементы таблицы выравниваются по левому краю
и не выравнивается по правому краю, то есть начало строк находится на одном уровне, а конец - на разных.
Выравнивание по левому краю задается атрибутом ALIGN=LEFT. Выравнивание по правому краю задается
атрибутом ALIGN=RIGHT
Центрирование элементов документа можно производить разными способами
например с помощью тега ALIGN=CENTER
Рис. 2 .7 . Веб-страница с текстом, выровненным различными способами
м
Предварительное форматирование
41
Листинг 2.7. Пример выравнивания текста различными способами
<HTML>
<HEAD>
<TITLE> Центрирование и выравнивание </TITLE>
</HEAD>
<B0DY>
<Р ALIGN=CENTER> Атрибут ALIGN позволяет выровнять текст по левому или правому краю.
<BR>
Щ
' ■[[, \Г |;
по центру или по ширине </Р>
<Р ALIGN^RIGHT>По умолчанию текст, графика и элементы таблицы выравниваются по левому
краю <BR>
и не выравниваются по правому краю, то есть начало строк находится на одном уровне.
а конец - на разных.<BR>
Выравнивание по левому краю задается атрибутом ALIGN=LEFT. Выравнивание по правому краю
3aflaeTc«<BR>
атрибутом ALIGN=RIGHT </Р>
<Р ALIGN=LEFT>LleHTpHpoBaHHe элементов документа можно производить разными способами.<BR>
например с помощью тега ALIGN=CENTER</P>
</BODY>
</HTML>
ШШШ
Предварительное форматирование
Тег <PRE> позволяет представлять на экране текст со специфическим формати­
рованием. Предварительно отформатированный текст заканчивается завершаю­
щим тегом </PRE>. Внутри предварительно отформатированного текста разреша­
ется использовать:
О символы перевода строки;
О символы табуляции (сдвиг на 8 символов вправо);
О непропорциональный шрифт, устанавливаемый браузером.
Форматирование абзаца, заданное другими тегами, такими как <Нх> и <ADDRESS>,
игнорироваться браузером при помещении их между тегами <PRE> и </PRE>.
C:\Dociments and
Тег предварительного форматирования PRE позволяет представлять т ек ст со специфическим
форматированием на айране. Предварительно отформатированный тек ст заканчивается
завершающим тегом /PRZ. Внутри предварительно отформатированного тек ста разреш ается
и сп ользовать:
символы перевода строки
символы табуляции (сдви г на Ө символов вправо)
непропорциональный шрифт, устанавливаемый браузером
Рис. 2.8. Веб-страница с текстом, имеющим специфическое форматирование
42
Урок 2. Текст
Пример веб-страницы, содержащей текст со специфическим форматированием,
показан на рис. 2.8 (листинг 2.8).
Ш ІИ н И Һ И И
Листинг 2 .8 . Пример специфического форматирования текста
<HTML>
<HEAD>
<TITLE> Специфическое форматирование </TITLE>
</HEAD>
<B0DY>
<PRE>
•
- ,
'|й|й§
.
-v;
^
E H
•
- '
Тег предварительного форматирования <PRE> позволяет представлять текст со специфическим <BR>
форматированием на экране. Предварительно отформатированный текст заканчивается^>
завершающим тегом </PRE>. Внутри предварительно отформатированного текста разрешается^^М^
использовать:
!
символы перевода строки
символы табуляции (сдвиг на 8 символов вправо)
непропорциональный шрифт, устанавливаемый браузером
</№>
'.ы .
--
-
-■>
V : - г.Г
Я
</B0DY>
</HTML> '
Ж п М и И
'
. ■
Д&жйьш тег появился в HTML версии 2.0. В заранее отформатированный текст
нежелательно включать символы табуляции, поскольку при этом может нару­
шиться выравнивание.
Н *
| Щ
Пример, который можно посмотреть на рис. 2.9, а код программы — в листин­
ге 2.9, содержит текст разной высоты и тег <PRE>.
Размер шрифте - Microsoft Internet Explorer
Н
ШШттт
тштттмт
Рис. 2 .9 . Веб-страница с текстом разной высоты
Листинг 2 .9 . Пример создания веб-страницы, содержащей текст разной высоты
<HTML><HEAD><TITLЕ>Размер шрифта</Т1Т1.Е></НЕА0>
<B0DY BGCOLOR—V10LET>
<PRE> Размер шрифта изменяется в пунктах </PRE>
<F0NT SIZE=2> Іпункт равен 1/72 дюйма </F0NT>
<F0NT SIZE=7> Іпункт равен 0.353 мм </F0NT>
<PRE><F0NT SIZE=+,- n> TeKCT</F0NT>
л - число пунктов.на которое необходимо увеличить или уменьшить размер шрифта
Задание начертания
43
Теги <PRE> - теги отформатированного текста
</HIML></PRE></BODY></HTML>
Задание начертания
Для выделения текстовой информации в документах можно использовать раз­
личное начертание. Большинством браузеров поддерживается жирное и курсив­
ное начертание, моноширинный шрифт, большой и маленький шрифты, а также
подстрочный и надстрочный индексы. Эти и подобные им варианты начертания
задаются следующими тегами:
<В>Этот текст жирный </В>
<1>Этот текст наклонный </І>
<и>Этот текст подчеркнутый </U>
<ТТ>Этот текст с моноширинным шрифтом </ТТ>
Этот текст <BIG> большой </BIG>
Этот текст <SMALL> маленький </SMALL>
Этот текст <STR0NG> увеличенный </STR0NG>
Этот текст <STRIKE> перечеркнутый
Этот текст <SUB> подстрочный </SUB>
Этот текст <SUP> надстрочный </SUP>
Результат применения этих тегов показан на рис. 2.10 (листинг 2.10).
41507.htm
Этот текст хл р н ы й
Этот текст наклонный
Этот текст подчеркнутый
Этот т ек ст с непропорциональным шрифтом
Этот текст бол ьш ой
Этот текст маленький
Этот текст увеличенны й
Этот текст переч еркнутый
Этот текст_________ в
Рис. 2 .1 0 . Веб-страница с текстом разного начертания
Теги <В>, <1>, <ТТ>, <STR0NG> появились в HTML версии 2.0, теги <U>, <BIG>,
<SMALL>, <STRIKE>, <SUB>, <SUP> — в HTML версии 3.2. Хотя пользоваться этими
тегами не запрещено, консорциум W3C (World Wide Web Consortium) рекомен­
дует применять вместо них средства каскадных листов стилей (см. урок 17).
Тег <VAR> используется с целью дополнительного выделения переменных в коде.
Синтаксис:
переменная </VAR>
44
Урок 2. Текст
Листинг 2 .1 0 . Пример создания веб-страницы, содержащей текст разного начертания
<HTML>
..
<h £a d >
<TITLE> Стили шрифта </TITLE>
</HEAD>
'" .>
Ш
Ц f*|
Ш
I
Щ
I
-
<80DY>
;
—
<B> Этот текст жирный </BxBR>
<1> Этот текст наклонный </IxBR>
<U> Этот текст подчеркнутый </UxBR>
<ТТ> Этот текст с непропорциональным шрифтом </TTxBR>
Этот текст <В16> большой </BIG><BR>
Этот текст <SMALL> маленький </SHALL><BR>
Этот текст <STR0NG> увеличенный </STR0N6xBR>
Этот текст <STRIKE> перечеркнутый </STRIKExBR>
Этот текст <SUB> подстрочный </SUBxBR>
Этот текст <SUP> надстрочный </SUPxBR>
</B00Y>
</HTHL>
| Н
,
■,
;;y
^
ц :-iу ^
, .
4
.
ЩШ
--
"
pi |
ііВЙИиИ
Й И в
I
Пример использования этого тега можно посмотреть на рис. 2.11, а код програм­
мы — в листинге 2.11.
■Ш
3 Теги форматирования • Microsoft Internet бкріогег
and 5еШпд$\Владвл«4\Ра6очий стол\1
Готофо
.
41507.htm
щтШШВтШюШ
Рис. 2 .1 1 . Веб-страница, содержащая тег <VAR>
Листинг 2.11. Пример создания веб-страницы, содержащей тег <VAR>
<HTMLxHEAD><TITLE>TerH форяатироіани*</ТІТІЕх/Н£АО>
<B0DY BGCOLOR=#EC1DFO<FONT SIZE—6> Доджер - <УАй>рекланный проспект
</VAR></FDNTx/BODY></HTML>
f %g | '
г
Ter <VAR> появился в H T M L версии 2.0. Он определяет переменную или пара­
метр программы и обычно отображается курсивом.
Тег <SPAN> позволяет выделить фрагмент текста для его последующего формати­
рования, однако в отличие от тега <DIV> не начинает новый абзац. Тег <SPAN>
создает структуру текстового уровня, определяемую пользователем. Пример ис­
пользования этого тега можно посмотреть на рис. 2.12, а код программы — в лис­
тинге 2.12.
: V:.^L^
Данный тег появился в H T M L 4.0. Т а к как он используется в сочетании с кас­
кадными листами стилей (см. урок 17), в данном примере его преимущества не
слишком заметны.
ІІШшІ
Задание начертания
45
Листинг 2 .1 2 . Пример создания веб-страницы, содержащей тег <SPAN>
<HTMLxHEAD><TITLE>Tern форматирования символов</Т1Т1_Ех/НЕА0>
<B0DY BGC0L0R=#EAAAAc>
Медиапланирование -<SPA№><I> составление оптимального плана размещения рекламы в СМИ на
основе маркетинговых и медиаисследований. </SPANx/i>
Паблисити - <5РАМхі>неоплаченная информация, стимулирующая спрос на товар или деловую
кампанию посредством распространения о них коммерческих и (или) социальных сведений
в средствах коммуникации</БРАМх/і>
<SPANxi>XapaKTepHbie признаки: достоверность (в сравнении с рекламными сообщениями):
широкий охват аудитории (новинка, сенсация, напоминание): броскость (эффективная и
многожанровая форма).</SPANx/i></BODYx/HTML>
3 Теги форматирования символов - Microsoft In t e n d Explorer
S S ll
Рис. 2 .1 2 . Веб-страница, содержащая тег <SPAN>
выводит текст зачеркнутым. Все, находящееся между тегами <S> и </S>,
будет написано перечеркнутым шрифтом. Это встроенный парный тег. Обяза­
тельных атрибутов не имеет. Пример использования тега можно посмотреть на
рис. 2.13, а код программы — в листинге 2.13.
Т е г <S>
? | П еречеркну тм и іе м г т - M icrosoft In te rn e t Explorer
■вI
C:\Document5 «nd
Рис. 2 .1 3 . Веб-страница, содержащая тег <S>
Листинг 2.13. Пример создания веб-страницы, содержащей тег <S>
<НТМІхНЕАО><ТІТІЕ>Перечеркнутый текст</ТІТІ.Е></НЕАО>
<B00Y BGC0L0R-#CCCCFF> <S> Хот-шол-творческое рекламное ателье, выполняющее отдельные
функции дизайна по созданию элементов фирменного стиля, разработке оригинал-макетов
печатной рекламы.
</S></BODYx/HTML>
46
Урок 2. Текст
Тег <S> появился в HTML версии 4.0. Вместо данного тега консорциум W3C
рекомендует использовать средства каскадных листов стилей (см. урок 17).
Неразрывные строки
Тег <N0BR> (от англ. «по break» — «без разрыва») дает команду браузеру отобра­
жать весь текст в одной строке, не разрывая ее. Этим тегом размечается текст,
который необходимо уместить на одной строке, причем этот текст ни при каких
обстоятельствах не должен быть разбит на несколько строк. Таким образом, тег
<N0BR> противоположен по функциям тегу <BR>.
Если строку текста разместить между тегами <N0BR> и </N0BR>, то браузер не
начнет новую строку, даже если она выйдет за границы экрана; вместо этого
браузер позволит горизонтально прокручивать окно. Пример такой строки пока­
зан на рис. 2.14 (листинг 2.14).
.11 1
•ЩСтроки без разрыва - Microsoft: Internet Explorer
Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения где бы то ни I
Рис. 2 .1 4 . Веб-страница с неразрывной строкой
Листинг 2 .1 4 . Пример создания веб-страницы, содержащей текст в одной строке
без разрыва
'
<HEAD>
'
<TITLE> Строки без разрыва </TITLE>
...J
^
</HEAD>
<body>
--
< /ш >
;> ■
^ ш
м И И Я
<N0BR> Данная строка является самой длинной строкой документа, которая не допускает
какого-либо разбиения где бы то ни было </N0BR>
</ b o d ү>
.
:-
•;V
г ..
Если все же необходимо разбить строку на две, то в нужное место вставляется
тег <WBR>, хотя в последнее время он не рекомендуется к использованию.
Тег <WBR> задает «мягкий разрыв строки» внутри тега <N0BR>. С помощью тега
<WBR> в данном месте текста при необходимости браузер выполняет переход на
новую строку. Пример использования этого тега можно посмотреть на рис. 2.15,
а код программы — в листинге 2.15.
47
Вставка цитат
Листинг 2.15. Пример создания веб-страницы, содержащей теги <WBR> и <N0BR>
<HTML><HEAD><TITLE>Teги форматирования символов</ТІТІ_Е></НЕАО>
<B0DY BGC0L0R=#EB1DDA><F0NT size=5><N0BR> Ключевые понятия - <WBR>
Классифицированная pewiaMa<WBR> Профессиональный pncK<WBR> Персонализация рекламы<ЬШ>
Фактор интеграции<№ВР> Бесприбыльные с вязn<WBR></N0BR> </F0NT></B0DY></HTML>
жжжж
З іе г и форматирования символов * Microsoft internet Explore*1
• . V . W . V
C:\Documents and Settings\Владелец\Ра6очий стол\1080041507.htm
Рис. 2 .1 5 . Веб-страница, содержащая теги < W B R > и <N0BR>
Вставка цитат
Тег <BL0CKQU0TE> определяет текст как цитату большого размера и отображает
его с отступами от левого и правого краев. Этот тег позволяет расположить текст
компактно в центре страницы. При использовании этого тега несколько раз
текст все больше сжимается к центру. Тег <BL0CKQU0TE> имеет атрибут
CITE= "U RI", где U RI задает цитируемый документ или сообщение. URI (Uniform
Resource Identifier) — это унифицированный идентификатор ресурса, в состав
которого входит URL.
Текст, обозначенный тегом <BL0CKQU0TE>, выводится с отступом от левого края
документа на 8 пробелов. Пример использования тега показан на рис. 2.16 (лис­
тинг 2.16).
J Ц итата - ^ ro s o ft Internet Explorer
Ter BLOCKQUOTE добавляет поля слева и справа от текста.
Этот тег позволяет расположить текст компактно и в центре страницы.
При использовании этого тега несколько раз текст все больше сжимается к центру.
Данный тег предназначен для обозначения в документе цитаты из другого источника
Текст, помеченный тегом, отступает от левого края документа на 8 пробелов
Н М
Рис. 2 .1 6 . Фрагмент веб-страницы с длинной цитатой
48
Урок 2. Текст
Листинг 2 .1 6 . Пример создания веб-страницы, содержащей цитату
<HTMLxHEAD>
<TITLE> Цитата </TITLEx/HEAD>
"
<b o d y > І
t
<BL0CKQU0TE>
Тег BLOCKQUOTE добавляет поля слева и справа от текста. <BR>
Этот тег позволяет расположить текст компактно и в центре страницы. <BR>
При использовании этого тега несколько раз текст все больше сжимается к центру.<BR>
Данный тег предназначен для обозначения в документе цитаты из другого источника.<BR>
<ВШСКОиОТЕ>Текст. помеченный тегом, отступает от левого края документа на 8 пробелов
<BL0CKQU0TE>
<
/
B
0
D
Y
>
*
Данный тег появился в HTML версии 2.0. Он обеспечивает вставку более длин­
ных цитат по сравнению с тегом <Q>.
Тег <Q> оформляет текст в виде краткой цитаты. Тег имеет атрибут CITE="URI",
где URI задает цитируемый документ или сообщение. Тег <Q> предназначен для
отображения более коротких цитат по сравнению с тегом <BL0CKQU0TE>. Обычно
в состав цитаты не входят символы разрыва строки, и цитата считается элемен­
том текстового уровня. Символы кавычек отображает браузер.
Пример использования тега <Q> показан на рис. 2.17 (листинг 2.17).
9 Ц итата * Microsoft Internet Explorer
Н
w
W
m
C:\Documents and
Ш
Ві
n
ш
т
ШШ
Ч
mm
W
W
W
П
Й
П
В
М
Й
Рис. 2 .1 7 . Фрагмент веб-страницы с короткой цитатой
Листинг 2 .1 7 . Пример создания веб-страницы, содержащей тег <Q>
<HTML><HEAD><TITLЕ>Цитата</ТITLЕ></HEAD>
<B0DY BGC0L0R=BBAAFF>
<0>пПостер" - наружная реклама, плакат </0></B0DY></HTML>
-
Комментарии
Как любой язык, HTML позволяет вставлять в тело документа комментарии, ко­
торые сохраняются при передаче документа по сети, но не отображаются браузе­
ром. Синтаксис комментария:
V
<!- Это комментарий ->
,• ,
Акронимы
49
Комментарии могут встречаться в документе где угодно и в любом количестве
Данный тег появился в HTML версии 2.0.
Акронимы
Два тега, <ABBR> и «ACRONYM», позволяют выделять акронимы, или аббревиатуры
(Сокращения полных названий), в пределах текста. Содержимое тегов <ABBR>
и «ACRONYM» выводится в виде всплывающих подсказок, которые дают пользова­
телю возможность увидеть расшифровку акронимов.
Содержание тега «ABBR» представляет собой аббревиатуру, описание которой за­
дается посредством атрибута TITLE. Хотя данный тег появился в HTML версии
4.0, в настоящее время браузеры его не поддерживают.
Пример использования тега «ACRONYM» показан на рис. 2.18 (листинг 2.18).
ІА м р и и и и ' Microsoft Internet Ікр Ь гег
т
C:\Docim nts and
Санкт-Пвтер<
технологии и
Листинг 2.18. Пример создания веб-страницы, содержащей акроним
<HTML>
Щ <ИЕА0>
<TITL£> тройни </TITLE>
<800У>
- :- -А
<!- Акроним, или аббревиатура. - это сокращение известных названий ->
<ACR0NYM ТІТІЕ-Теверо-Западный институт печати"> СЗИП </ACR0NYH>
<ACR0NYM Т1Т1Е-"Санкт-Петербургский государственный университет технологии и диэайна">
СПГУТД </ACR0NYK>
</B0DY>
ШН</нтні>
ВНИМАНИЕ
Т е г «ACRONYM»
Не следует забывать, что знак равенства (- ) в программе не должен быть ок­
ружен пробелами.
появился в
H TM L
версии
4 .0 .
50
Урок 2. Текст
Определения
Если название поместить между тегами <С1ТЕ>, то это название отобразится кур­
сивом. Термины можно задать еще и тегом <DFN>. Пример использования этих
тегов показан на рис. 2.19 (листинг 2.19).
Щ .
Ц Определение - Microsoft Internet Explore?
Поиск
C:\Documentsand
nПереулокДжамбула, дом 13мЭто адрес Северо-западного института печати
Санкт-Петербургского государственного университета технологии и дизайна
P R -деньги из воздуха В России PR пока недооценивается
Его репутация не слишком высока, а само слово PR превратилось в “пиар" и вызывает негативные
ассоциации. Ежегодный оборот на рынке заказных публикаций оценивается в 20$ млн.
Теперь эти деньги с незаконного рынка заказухи перетекают в легальный рекламный рынок
- стало больше статей под шапкой "на правах рекламы".
Рис. 2 .1 9 . Фрагмент веб-страницы с определениями
Листинг 2.19. Пример создания веб-страницы, содержащей определения
<
н
ж
>
'
<HEAD>
.
.
.:
<TITLE> Определение </TITLE>
</HEAD>
у '- :
,1.
ВННІ
- '&
<@0DY>
Щ г
Й
<СІТЕ> “Переулок Джамбула, дом 13"</СІТЕ> Это адрес Северо-западного института печати
<
B
R
>
|Н
Л--:,/
Санкт-Петербургского государственного университета технологии и дизайна<ВР>
"|
<DFN> PR - деньги из воздуха </DFN> В России PR пока недооценивается.<BR>
Его репутация не слишком высока, а само слово PR превратилось в “пиар" и вызывает
HeraTHBHbie<BR>
ассоциации. Ежегодный оборот на рынке заказных публикаций оценивается в 20$ млн.<BR>
Теперь эти деньги с незаконного рынка заказухи перетекают в легальный рекламный рынок <BR>
- стало больше статей под шапкой “на правах рекламы".
</B0DY>
< /Ш 1 >
'
Тег <С1ТЕ> появился в HTML версии 2.0. Он определяет цитату, или ссылку на
источник, содержимое данного тега обычно воспроизводится курсивом.
Шрифтовое выделение
Тег <ЕМ> используется с целью выделения особым шрифтом (обычно курсивом)
слова или текста. Синтаксис:
^ ^
<ЕМ> Текст </ЕМ>
.
Пример использования этого тега можно посмотреть на рис. 2.20, а код програм­
мы — в листинге 2.20.
'
Использование моноширинных шрифтов
51
Листинг 2.20. Пример создания веб-страницы со специфическим форматированием
<HTML><HEAD><T ITLЕ>Те ги форматирования</Т1Т1_Е></НЕА0>
<B0DY BGCOLOfH)OFFFO Имидж -<ЕМ> образ (знаковый символ фоторекламного успеха
и рекламного бизнеса, устойчивый престиж искусства фоторекламы, полномасштабная
профессиональная компетентность команды фоторекламистов и их лидера, философия
индивидуальной позиции фоторекламного творчества).
</ЕМ> исключительный и качественный признак в ряду иных подобий, впечатление, которое
свойственно данному товару/услуге, рекламному агентству, мастеру-фоторекламйсту.
фоторекламной акции, рекламной корпорации Интернет-услуг.
</BODYx/HTML>
Теги форматирования - Microsoft Internet бнріогег
шш
Правка
# 3 C:\Documents and
ЩиШШІШМ
ишша
I ■
*
/ Л * .
ій приза
•
j* * * •
• %
•*•* *
I
* . * * * • л ■»
% * *
. I
f
t
* a ■ a
•
* •
я I
* a •
a**
фо^рекййцной акі
Рис. 2 .2 0 . Веб-страница, содержащая тег <ЕМ>
ш
Тег <ЕМ> появился в HTML версии 2.0, чаще всего содержимое данного тега вы­
водится курсивом.
Использование моноширинных шрифтов
Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов
<C0DE>, <KBD> и <SAMP>. Результаты применения этих тегов обычно идентичны.
Тег <С00Е> используется с целью дополнительного выделения фрагментов про­
граммного кода моноширинным шрифтом. Данный элемент предпочтительнее,
чем элемент <ТТ> (см. раздел «Задание начертания»). Синтаксис:
<C0DE> Код </C0DE>
Пример использования этого тега можно посмотреть на рис. 2.21, а код програм­
мы — в листинге 2.21.
Листинг 2 .2 1 . Пример создания веб-страницы, содержащей тег <C0DE>
<HTMLxHEAD><TITL Е>Тег и форматирования</Т1Т1_Е></НЕА0>
<B0DY BGCOLOR—
#00ҒҒЕС> Промоушн - <C0DE> продвижение продаж - комплекс различных мер
стимулирования покупки товаров.</C0DE>
Промоушн включает в себя такие методы, как купонирование. продажи со скидкой, лотереи.
викторины, представление бесплатных образцов.
</B0DY></HTML>
52
Урок 2. Текст
Б£ЗВЭ
Почта
Рис. 2.21. Веб-страница, содержащая тег <C0DE>
Тег <C0DE> появился в HTML версии 2.0; чаще всего содержимое данного тега
ВЫ ВО Д И ТСЯ М О Н О Ш И РИ Н Н Ы М Ш р и ф т о м .
" '’
Тег <KBD> используется с целью выделения диалога пользователя с компьюте­
ром. Синтаксис:
<КВ0> Ввод с клавиатуры </КВ0>
Пример применения этого тега можно посмотреть на рис. 2.22, а код програм­
мы — в листинге 2.22.
L
Ш шНІ
Л Теги фирмт^юваиия - ҢкммоіІ Internet bvlorer
and 5ettngs\BАвдвпей ,Рабо^Л стол\10e004l507.htm
Рис. 2.22. Веб-страница, содержащая тег <KBD>
Листинг 2.22. Пример создания веб-страницы, содержащей тег <KBD>
«HTML ><H EA D xj ITLE>Te ги фориатирования</Т1Т1Ех/НЕА0>
«BODY BGCOLOR—
#EC1DFC> Имидж - <KBD> модификация образа личности, фирмы, товара путем
сгущения красок, приукрашивания или очернения.</KBD>
Теория создания имиджей именуется имиджелопией. или иконикой.
</B0DY></HTML>
■
Тег <KBD> появился в HTML версии 2.0. Чаще всего содержимое данного тега
выводится моноширинным шрифтом.
Тег <SAMP> используется с целью выделения диалога пользователя с компьюте­
ром. Синтаксис:
Добавление текста с другой страницы
53
<SAMP> Системное сообщение компьютера </SAMP>
Пример использования этого тега можно посмотреть на рис. 2.23, а код програм­
мы — в листинге 2.23.
Листинг 2 ,2 3 . Пример создания веб-страницы, содержащей тег <SAMP>
<HTML><НЕA D x j IтLЕ>Тег и форматирования символов</Т1Т1_Ех/НЕА0>
<B0DY BGCOLOfHNiClDDAxFONT size=5>Kopnopa тивна я реклама <БАМР>реклама. создающая потребность не в конкретной марке товара, а в полном товарном
ассортименте. </SAMPx/FONTx/BODYx/HTML>
j Т еги форматирования символов - Microsoft Internet Explorer
Обновит*
■ ■ ■ •Д шлЬя .• • ■ ч • л • •
• • • а п
м
mwm.
к
Мк
%* А.
тт
* •
< » V « V « y w > y
Пвмат*
ІШжІИИ C:\Documents and
Рис. 2 .2 3 . Веб-страница, содержащая тег <SAMP>
Тег <SAMP> появился в HTML версии 2.0. Обычно содержимое данного тега ото­
бражается моноширинным шрифтом.
Добавление текста с другой страницы
Тег <INS> позволяет вывести на странице текст с другой страницы, указав ее ад­
рес. Определяет и отображает текст, который был включен в документ по срав­
нению с его предыдущей версией. Визуально вставленный текст выделяется под­
черкиванием, например:
<INS CITE="www.uprint.spb.ru/listing.htm" DATETIME="2004-08-15"> (доступный фрагмент
текста) </INS>
Для вывода даты предусмотрен атрибут DATETIME.
Пример можно посмотреть на рис. 2.24, а код программы — в листинге 2.24.
Листинг 2 .2 4 . Пример создания веб-страницы, содержащей тег <INS>
<HTMLxHEADxTITLE>flpMMep вставки</ТІТі.Ех/НЕАО
<B0DY BGC0L0R=CAAAAAxINS СІТЕ="Листинг 2.21.htm" DATETIME“"2004-8-15n> ДОСТУПНЫЙ
ФРАГМЕНТ </INSx/BODYx/HTML>
Данный тег появился в HTML версии 4.0. Он может быть элементом блочного
либо текстового уровня. Изменение во вложенном блоковом содержании должно
выполняться на нижнем уровне.
54
Урок 2. Текст
3
Пример вставки 1 Microsoft Internet Explorer
A J / .
Л ^ '
r/j/ ж
ШтШ
Останоеить
C:\Oocuments and
МШ
Ш
к ш
Рис. 2 .2 4 . Веб-страница, содержащая тег <INS>
Расстановка пробелов
R
H
?
Если набрать текст в Блокноте и расставить в нем множество пробелов, то брау­
зер проигнорирует эти пробелы и сократит их до минимума, а если воспользо­
ваться тегом <USTING>, который выводит блок текста моноширинным шрифтом,
то текст отразится таким, как он есть, со всеми пробелами и т. д.
Пример текста со множеством пробелов, окруженного тегами <LISnNG> и </USITNG>,
можно посмотреть на рис. 2.25, а код программы — в листинге 2.25.
^ Ц и тате - Microsoft Internet Explorer
41S07.htm
Рис, 2 .2 5 . Веб-страница, содержащая текст и теги <LISTING>
Листинг 2 .2 5 . Пример создания веб-страницы, содержащей текст и теги <USTING>
<HTML><HEAD><TITLE>UnTaTa</TITLE></HEAD>
<B0DY BGC0L0R=BBCCFF>
:
Реклама - одна из форм маркетинговых коммуникаций.
Оплаченная рекламодателем, имеющая неличный характер.
распространяемая через СМИ с целью оказать воздействие на целевую аудиторию.
<LISTING> Существуют следующие виды рекламы:
товарная.
.
корпоративная.
■
социальная.
- ... . Ү И *,->•
политическая.
</LI ST ING></BODY></НТМL>
Подведем итоги
55
Подведем итоги
В этом уроке рассматриваются основные теги, предназначенные для работы с тек­
стом. Тег <Нх> предназначен для создания заголовков. Теги <F0NT>, <Р>, <PRE>, <В>,
<1>, <ТТ>, <STR0NG>, <U>, <BIG>, <SMALL>, <STRIKE>, <SUB>, <SUP>, <BL0CKQU0TE>,
<DFN>, <CITE>, <EM>, <C0DE>, <KBD>, <VAR>, <SAMP>, <WBR>, <BASEF0NT>, <DIV>,
<SPAN>, <INS>, <Q>, <USTING>, <S> позволяют форматировать текст, изменять его
цвет, красиво располагать на странице. Для разрыва строк служат теги <BR>
и <N0BR>. Теги <ABBR> и <ACR0NYM> используются для создания всплывающих
подсказок.
Урок 3
Одна из наиболее привлекательных черт W W W — возможность
включения ссылок на графические файлы в H T M L -документ.
Графика — лучшее украшение веб-узла. Под графикой подра­
зумевают значки, рисунки, фотографии и карты изображений,
занимающие часть окна браузера.
При размещении графики на веб-странице необходимо сле­
дить за тем, чтобы размер графических файлов был как можно
меньше. Х о тя в принципе размеры графических файлов в бай­
тах могут быть неограниченными, следует помнить, что пере­
дача большого файла может занять очень много времени, осо­
бенно при низкой пропускной способности линий. Если тот,
кто смотрит ваш у веб-страницу, платит деньги за время нахо­
ждения в Интернете, вряд ли он захочет смотреть ваши сле­
дующие страницы, учитывая, что первая страница загружается
очень долго. В этом уроке будут рассмотрены приемы работы
с графикой.
,,
■
Размещение графики на веб-странице
57
Размещение графики на веб-странице
Для вставки графики в веб-страницу используется тег <IMG>. Графика позволяет
значительно улучшить внешний вид и функциональность документов. Тег <IMG>
(от англ. image — изображение) появился в H T M L версии 2.0. Он имеет атрибу­
ты SRC, ALT, LONGDESC, HEIGHT, WIDTH, USEMAP, ISMAP, ALIGN, BORDER, HSPACE, VSPACE.
Пример:
<IMG SRC="URL" ALT-''текст" НЕІ6НТ="длина" WIDTH»"длина"
ALIGN=topI middle I bottomI le f t I rig h t ISMAP>.
О А трибут SRC. Атрибут SRC (от англ. source — источник) определяет месторас­
положение изображения, включаемого в состав документа. URL — обязатель­
ный параметр, который указывает браузеру, где находится рисунок. Рисунок
должен храниться в графическом формате, например в формате G IF или JP G .
Если графический файл находится в том же каталоге, что и содержащий его
H T M L-документ, достаточно указать только имя этого файла, например:
<IMG SR C = filel.g if>
Если графический файл находится на том же сервере, что и содержащий его
H TM L-документ, но в другом каталоге, следует указать имя каталога и имя
этого файла, например:
<IMG SR C = p ictu re/filel.g if> .
Если графический файл находится не на том сервере, на котором находится
содержащий его HTM L-документ, необходимо указать полный адрес этого
файла, например:
<IMG SRC="httR://www.u p rin t.ru / p ic tu re / file l.g if">.
О А трибут ALT. Необязательный атрибут ALT задает альтернативный текст, ко­
торый выводится браузером, пока идет загрузка изображения (или браузером,
не поддерживающим отображение графики). Обычно это короткое описание
изображения, которое пользователь мог бы или сможет увидеть на экране.
Если этот атрибут не задан, на месте изображения большинство браузеров
выводят значок, щелкнув на котором, пользователь сможет увидеть изобра­
жение. Атрибут ALT рекомендуется указывать, если ваши пользователи при­
меняют браузер, не поддерживающий графический режим, например Lunix.
О А трибут LONGDESC. Необязательный атрибут LONGDESC задает ссылку на
удаленный ресурс.
О А трибут HEIGTH. Необязательный атрибут HEIGTH определяет высоту ри­
сунка в пикселах. Если данный параметр не указан, используется оригиналь­
ная высота рисунка. Этот параметр позволяет сжимать или растягивать изо­
бражения по вертикали, что дает возможность точнее контролировать
внешний вид документа. Однако некоторые браузеры не поддерживают дан­
ный параметр. Иногда экранное разрешение на разных компьютерах может
быть разным, поэтому при задании абсолютной величины графического объ­
екта следует быть внимательным.
О А трибут WIDTH. Необязательный атрибут WIDTH используется для указания
ширины рисунка в пикселах.
О А трибут ALIGN . Необязательный атрибут ALIGN используется для точного
позиционирования объектов на экране. Доступные значения:
строки
□ top
W
~
□ middle — центр объекта выравнивается по базовой линии строки;
j—j bottom_нижний край объекта выравнивается по базовой линии строки,
□ left — объект выравнивается по левому краю, при этом возможно обтека­
ние объекта текстом;
□ right — объект выравнивается по правому краю, при этом возможно обте­
кание объекта текстом.
■д.?! ^..^иМ ^ВШ Л
Если данный параметр не указан, большинство браузеров располагает изо
справа от него.
бражение в левой части экрана, а текст
обрамления
жения.
Атрибут
изображением, чтобы текст «не наезжал»
бражение
задать
изображения
на изображение.
Форматы графических файлов
Большинство форматов файлов в компьютерной графике позволяет хранить ин­
формацию об изображении как о наборе точек. Точно так же (в виде набора то­
чек) изображения выводятся на экран.
.■Л
Обычно в Интернете используются два растровых формата — G IF и JP E G .
Кроме того, в Интернете довольно много изображений, имеющих форматы BM P
и PC X . Специалисты считают, что довольно большие перспективы есть у
формата PN G — самого современного формата переносимой сетевой графики.
Формат GIF
Формат G IF (Graphic Interchange Format — формат обмена графическими дан­
ными) служит для записи и хранения растровых графических изображении.
Этот формат был разработан корпорацией CompuServe с использованием техно­
логии Unisys. Формат G IF применяется для хранения 256-цветных изображений
(или изображений с меньшим количеством цветов), сжатых по методу Лемпела—Зива (L Z W ). Тот же метод сжатия характерен для архиваторов файлов.
Формат G IF дольше других представлен в Интернете и поддерживается разны­
ми графическими редакторами. В нем используются индексированные цвета. Вер­
сия GIF89a этого формата обеспечивает возможность чересстрочной развертки,
что позволяет постепенно повышать качество принятого через канал связи изо­
бражения. Это самый распространенный формат изображений в Интернете.
Форматы графических файлов
59
Изображения в формате G IF хранятся в файлах с расширением .gif. К достоин­
ствам G IF -изображений относится то, что вид изображения не зависит от брау­
зера и платформы. Лучше всего отображаются чертежи, рисунки, изображения
с небольшим количеством однородных цветов, прозрачные изображения и ани­
мационные последовательности. В G IF -изображениях используется алгоритм
сжатия без потери информации.
Формат JPEG
Применяющийся в формате JP E G (Joint Photographic Expert Group — объеди­
ненная группа экспертов в области фотографии) алгоритм обработки изображе­
ний разработан группой экспертов как средство сжатия изображений с палитрой
24 бита на пиксел, что обеспечивает отображение 16,7 миллиона цветов.
JP E G — один из самых мощных алгоритмов. Практически он является стандар­
том де-факто для полноцветных изображений. Формат JP E G был создан для
того, чтобы избавиться от недостатков формата G IF.
Алгоритм оперирует областями 8x8 пикселов, в которых яркость и цвет плавно
меняются. Сжатие в формате JP E G осуществляется за счет того, что в реальных
изображениях, в частности в фотографиях, цвет обычно меняется достаточно
плавно. Обеспечивается высокий коэффициент сжатия, значение которого дости­
гает 100 и зависит от допустимого уровня потерь изобразительной информации.
Формат широко используется в HTML-документах и для передачи графики по
сети. Сохраняет параметры графики в цветовой модели RG B. Изображения
в формате JP E G хранятся в файлах с расширением .jpg.
В формате JP E G используются алгоритмы сжатия с потерей информации. При
сжатии из изображения исключаются данные, которые считаются несуществен­
ными. При этом есть риск получить нечеткое, размытое изображение с искаже­
нием деталей.
Формат PNG
ив)
Последнее время получили распространение файлы в формате PNG (Portable
Network Graphics — переносимая сетевая графика). Само название формата го­
ворит о его назначении — использовании при передаче изображений в сетях.
Формат поддерживает полноцветные R G B -изображения и индексированные
изображения. Допускает наличие дополнительного канала для хранения маски
обрезки. Имеет эффективный алгоритм сжатия без потери информации.
Формат BMP
Первым графическим форматом для IB M -совместимых компьютеров, нашед­
шим широкое применение, был формат BM P (B it Map — битовая карта). Можно
сказать, что с него все началось. В формате B M P первоначально использовалось
простейшее кодирование — по пикселам (самое неэкономное). Пикселы обходи­
лись последовательно по строкам, начиная с нижнего левого угла графического
изображения. Файлы именно этого формата поддерживались первыми версиями
60
Урок 3. Графика
оболочки Windows. В них использовались только индексированные цвета в ко­
личестве 256, то есть один пиксел представлялся одним байтом. В дальнейшем
формат стал применяться и для кодирования полноцветных изображений. Это
стандартный формат растровой графики. Поскольку B M P -файлы представляют
собой «родной» формат графики для Microsoft Windows, подобных изображений
в Интернете достаточно много.
|
:
f 5Щ*Ш Ш ІШ
Формат PCX
Формат PC X использует только индексированные палитры. Он был разработан
фирмой Z-soft специально для пакета PaintBrush, а в дальнейшем получил более
широкое распространение. В нем предусмотрено сжатие, обеспечивающее боль­
шую компактность по сравнению с форматом BM P. Тем не менее практически
он пригоден только для простых изображений или изображений с индексиро­
ванными цветами.
^
Пикселы и разрешение
В Интернете для передачи изображений в основном используется растровая графика.
-,ч>
Растровая графика — это, во-первых, графика, представляемая в компьютере
в виде множества точек (пикселов), во-вторых, файл определенного формата.
Для растровой графики важной характеристикой является разрешение изобра­
жения. Одна и та же картинка может быть представлена с лучшим или худшим
качеством в соответствии с количеством точек на единицу длины.
Разрешение — количество точек на единицу измерения:
О dpi (dots per inch) — количество точек на дюйм;
;
О ppi (points/pixels per inch) — количество пикселов на дюйм;
О spi (samples per inch) — оптическое, первоначальное разрешение сканера, оз­
начающее количество проб на дюйм, то есть число «просмотров» сканером
изображения во время сканирования.
Dpi — наиболее часто используемый термин, который относится только к ма­
леньким точкам, создаваемым выходным устройством. Точки выходного устрой­
ства ничего общего не имеют с разрешением изображения, они связаны с мини­
мальным воспроизводимым принтером размером точки.
Разрешение иллюстрации обычно измеряется в dpi. Чем больше разрешение, тем
более качественным является изображение, но и тем больший размер имеет
файл, в котором изображение сохраняется.
^ ;■;] v V .;.
Различают разрешение изображения, разрешение экрана и разрешение принтера.
■ 1 А
-
Мониторы, выпускаемые различными фирмами, как правило, имеют стандартные
разрешения: 640x470, 700x600, 1024x768, 1270x1024, 1600x1270, 1920x1600 точек.
Расстояние между люминофорами хорошего монитора составляет 0,2—0,25 мм.
Конечно, для качественного дизайна требуется монитор с большим разрешени-
Примеры размещения графики на веб-странице
61
ем. Иногда дизайнер может редактировать изображение попиксельно. Разре­
шающая способность экрана зависит от монитора и видеоадаптера компьютера.
Статические растровые изображения представляют собой двухмерный массив
чисел. Элементы этого массива называют пикселами (от англ. pixel — picture
element, или элемент изображения). Пиксел — минимальный адресуемый эле­
мент двухмерного растрового изображения; одна точка изображения.
Примеры размещения графики
на веб-странице
Прежде чем размещать изображение на веб-странице, проведем эксперимент.
Возьмем любительскую фотографию высотой 11 см и шириной 13 см. Как она
будет выглядеть на экране? Если мы отсканируем фотографию в трех вариантах,
в первом выберем цветной режим с разрешением 300 dpi, во втором — черно-бе­
лый режим с разрешением 300 dpi, в третьем — цветной режим с разрешением
72 dpi, то в первых двух вариантах отсканированная фотография будет иметь
размер 1304x1479 пикселов, а в третьем варианте — 313x355 пикселов.
J Рисунок - Microsoft Internet Explorer
f j j 0:\Книги\Учебмый курс\НТМІ\СО\Глава 3\lsting3.1.hfcm
компьютер
Рис. 3.1. Купола на веб-странице
62
Урок 3. Графика
Поскольку размеры фотографии в пикселах в первых двух вариантах оказались
больше размера экрана в пикселах (размер, например, моего экрана составляет
768x1024 пикселов), при размещении фотографии на веб-странице для ее про­
смотра потребуются полосы прокрутки. В третьем варианте отсканированная
фотография занимает только часть экрана.
■
;
Таким образом, для изображений, распространяемых через Интернет, обычно
устанавливается разрешение 72 dpi, а разрешение в 300 dpi характерно больше
для печатных изображений.
На рис. 3.1 показан пример размещения на веб-странице произвольного изобра­
жения (отсканированной фотографии), соответствующий код приведен в лис­
тинге 3.1.
-
Листинг 3.1. Пример создания веб-страницы с изображением церкви
<h t m l >
<
H
E
A
D
Si!S|i
>
.
<TITLE> Рисунок</ТІТІ_Е>
•
'
Ш'ЩШ
</HEAD>
Ц
<B0DY>
<IMG SRC-"Церковь.jpg">
</B0DY>
-Г
.
</HTML>
В этом примере при размещении изображения на странице мы не касались во­
просов его размеров и положения на странице. На самом деле эти вопросы необ­
ходимо учитывать.
СОВЕТ
Размеры изображения можно уточнить и при необходимости изменить
в программе Adobe Photoshop.
j Рисунок - Microsoft Internet Explorer
Ck
■
■
Рис. 3.2. Изображение ромашки на веб-странице
На рис. 3.2 показан пример размещения изображения шириной 198 и высотой
155 пикселов (листинг 3.2). Хотя листинги 3.1 и 3.2 практически совпадают, изо­
бражения имеют разные размеры в пикселах и поэтому занимают разную пло­
щадь.
Листинг 3.2. Пример создания веб-страницы с изображением ромашки
<HTML>
<HEAD>
<TITLE> Рисунок</ТІИЕ>
</HEAD>
<B0DY TOPMARGIN^lOO LEFTMARGIN=100>
<IMG SRC="Ромашка.jpg">
</B0DY>
*
3\
</HTML>
По умолчанию рисунок разместился в левом верхнем углу.
На рис. 3.3 показан еще один пример размещения на веб-странице изображения,
но на этот раз в коде заданы значения атрибутов ширины и высоты (ширина 281,
высота 300 пикселов), а также указана подпись (листинг 3.3).
3 Рисунок Атланты на Фонтанке - Microsoft Internet Екріогег
3\listing3.3.htm
Россия * Санкт-Петербург * Еще одни атланты на Фонтанке
Угол Невского проспекта и Набережной реки Фонтанки
Готою
Мои компьютер
Рис. 3.3. Веб-страница с изображением и подписью
64
Урок 3. Графика
Л истинг 3 .3 . Размещ ение на веб-странице изображ ения и подписи
<HTML>
§
.
<HEAD>
■ -=>.
<Т1ИЕ>Рисунок Атланты на Фонтанке</Т1ИЕ>
</HEAD>
■'
<B0DY BGC0L0R="#FFFFFF" TEXT-"#000000">
<CENTER>
;
«I
<IMG WIDTH -”300” HEIGTH-”281
SRC-’Атланты на Фонтанке, jpg*»
<BR>
ф_
•>..
fв
Россия * Санкт-Петербург*Еще одни атланты на Фонтанке
іЩ1
I
<BR>
Угол Невского проспекта и Набережной реки Фонтанки
</CENTER>
</B0DY></HTML>
I
х>
-
:
На рис. 3.4 показан пример размещения четырех изображений шириной 92 и вы­
сотой 114 пикселов каждое в таблице (листинг 3.4). Подробно принципы работы
с таблицами будут рассмотрены далее.
’, Ь
3 Четыре рисунка в таблице - Microsoft Internet
Поиск
I
ХМ
• У
Рис. 3.4. Четыре рисунка в таблице
А
ч
Выравнивание изображений
65
Листинг 3.4. Пример создания четырех рисунков в таблице
<HTMLxHЕAD><TITLЕ>Четыре рисунка в Ta6nnue</TITLE></HEAD>
<B0DY bgColor=#A1633D>
<TABLE BORDER-O CELLpADDING^l CELLSPACING=0>
<TR>
<TD>
<IMG SRC^JIeHa.jpg" WIDTH~"92" HEIGTH-"114"> </TD>
<TD>
<IMG SRC=nnoflCHe«HHK.jpg" WIDTH="92" HEIGTH="114"> </TD></TR>
<TR> *
<TDxIMG SRC*"Цветы.jpg" WIDTH="92" HEIGTH*"114">
</TD>
<TD> <IMG SRC=41eHa.jpg" WIDTH-"92" HEIGTH*" 114">
</td>
• - ’• . * *
: ■ 'Г
Ш тМ
</TR>
</BODYx/HTML>
Выравнивание изображений
С помощью атрибута ALIGN можно задать способ выравнивания изображения на
веб-странице. На рис. 3.5 первый рисунок выровнен вправо, второй — влево
(листинг 3.5).
jO bTrN dM te I рафики текстом - M icrosoft In tern et Explorer
Обтекание текстом объектов
ActiveMovie Stream - это дополнительный пакет для работы с Internet
С помощью этой программы можно проигрывать файлы в формате ASF в
таких не слишком быстрых сетях, как Интернет.
За счет инкапсуляции в Active Movie Stream можно эффективно
и храніпъ на различных серверах файлы в популярных форматах
таких как MPEG, А\% WAV и Apple Quick Time
Необходимо ввести в веб-страницу звук, видео и интеракпгоностъ. OLE - объектно-ориентированная
технология создания программных объектов
В Н В Н Н В Н Н В
Необходимо
страницу звук,
интеракпшностъ
OLE • объектно-
Рис. 3.5. Пример выравнивания изображений на веб-странице
66
Урок 3. Графика
Листинг 3.5. Пример выравнивания изображений на веб-странице
<HTML><HEAD>
<TITLE> Обтекание графики текстон</ТІИЕ>
</HEAD>
* * ''"
7
<B0DY>
1Ш Щ
<Н1>0бтекание текстом объектов</Н1>
<IMG SRC-" Одуванчик, ip f" ALIGN=RIGHT>
<F0NT size=4>ActiveMovie Stream - зто дополнительный пакет для работы с In tern et
Explorer.<BR>C помощью этой программы можно проигрывать файлы в формате ASF в таких
не слишком быстрых сетях, как Интернет.<BR>
За счет инкапсуляции в A ctive Movie Stream можно эффективно синхронизировать <BR>
и хранить на различных серверах файлы в популярных форматах мультимедиа.<BR>
таких как MPEG. AVI. WAV и Apple Quick Time<BR>
Необходимо ввести в веб-страницу звук, видео и интерактивность. OLE объектно-ориентированная технология создания программных объектов
'Ш
<IMG SRC=Tle4eH04HMK. jpg" ALIGN=LЕFT><BR>
<TABLE BORDERS ALIGNER I GHT>
<
t
r
>
'
,
■
Я
4
,^
■
<TD>B03можно </TD>
</TR>
<
T
R
t
r
I I щ ■Щ
.i
>
<Ю>обтекание текста </TD>
</TR>
<
Щf
1
*
>
<Т0>вокруг таблицы </TD>
|| 9 н в |
</tr>
Необходимо ввести в веб-страницу звук, видео и интерактивность. OLE объектно-ориентированная технология создания программных объектов </F0NT>
</BODҮ></HTML>
Карты изображений
^
"
I
С
||
Карты изображений (image maps) позволяют пользователю связывать ссылки на
другие документы с отдельными частями изображений. Щ елкая мышью на час­
тях изображения, так называемых активных областях (hot spots), пользователь
может выполнять те или иные действия, переходить к другим документам и т. п.
Если пользователь позиционирует указатель мыши на изображении, которое с по­
мощью атрибута ISMAP в теге <IMG> определено как карта изображения, и щелка­
ет левой кнопкой мыши, то координаты точки щелчка передаются на веб-сервер.
При получении этих координат сервер ищет на карте активную область, содержа­
щую эти координаты. Если такая область существует, то заданный U R L -адрес акти­
визируется, и браузер пользователя переходит по этому адресу на новую страницу.
Описанный вариант функционирования характерен для случая, когда карта изо­
бражения размещается на сервере, однако она также может размещаться на кли­
ентском компьютере. В этом случае браузер самостоятельно выясняет U R L -адрес
нужной страницы и передает серверу не координаты точки щелчка, а этот адрес.
Второй случай предпочтительнее, так как на сервере не приходится запускать
программу (сценарий), выполняющую просмотр изображения с целью определе­
ния активной области. По соображениям безопасности многие системные адми-
67
Карты изображений
нистраторы не разрешают посторонним работать на сервере и записывать сцена­
рии в каталоги.
ВН И М А Н И Е
К сожалению, с картами изображений, функционирующими на клиентской
машине, могут работать не все браузеры.
Тег <МАР>
Тег <МАР> применяется для представления графического изображения в виде
карты с активными областями. Активные области можно идентифицировать по
всплывающей подсказке, которая появляется при наведении на такую область
указателя мыши. Данный тег появился в H T M L версии 3.2.
■■ ь
Контейнер, состоящий из тегов <МАР> и </МАР>, является блоком описателей ак­
тивных областей.
Тег <МАР> может быть связан с тегом <IMG> или тегом <INPUT> с помощью атри­
бута USEMAP.
Чтобы включить поддержку карты изображения, необходимо ввести атрибут
USEMAP в тег <IMG>:
<IMG SRC="URL" USЕМАР=" URUma p_name" >
Атрибут USEMAP указывает, в каком месте находится карта изображения. Карта
изображения определяет, какому участку изображения какой U R L -адрес соот­
ветствует. Карта изображения может находиться в том же документе, что и изо­
бражение, или в другом документе. Размещение карты в другом документе по­
зволяет объединять вместе изображения из разных документов, но добавляет
еще одну итерацию в механизм функционирования карты, поскольку за первую
итерацию выясняется местонахождение карты, а за вторую — выполнение дейст­
вия, предписанного U R L -адресом данного участка изображения. Параметр
map_name указывает имя карты для изображения, а предшествующий ему
U R L -адрес — местонахождение карты. Если параметр URL отсутствует, карта
с указанным именем ищется в текущем документе.
Пример синтаксиса определения карты изображения:
<МАР NAME="map_name’'> <AREA [SHAPE-” shape I
[NOHREF]x/MAP>.
C00RDS=”x.у . . . [HREF=" reference *3
Атрибут NAME задает имя карты, например: NAME="KAPTA" — имя карты.
Тег <AREA>
Тег <AREA> определяет активную область в составе карты изображений на сторо­
не клиента (это описатель активной области). Тег <AREA> не имеет закрывающе­
го тега. Синтаксис:
<МАР name-"имя"><AREA атрибуты></МАР>
Для каждой активной области карты имеется свой тег <AREA>.
О А трибут SHAPE. Атрибут SHAPE задает форму активной области на карте
и ее координаты, он может принимать значения:
□ rect — прямоугольная область;
68
Урок 3. Графика
□ circle — область в форме круга;
|й ||||||^ Н Ш
□ poly — область в форме многоугольника;
-
□ default — вся область.
...
Атрибуты, определяющие форму области на карте, являются обязательными.
О А трибут COORDS. Атрибут COORDS определяет позицию области на экране.
Синтаксис:
COORDS-“координаты"
Набор координат соответствует форме области. Координаты задаются в еди­
ницах длины и разделяются запятыми:
^Я В
□ для круга необходимо задать координаты центра и радиус в пикселах (ко­
ординаты центра отсчитываются от левого края и верхнего края рисунка),
□ для прямоугольной области задаются координаты всех четырех углов;
□ для многоугольной области задаются координаты каждого из углов много­
угольника, который точно или приблизительно соответствует форме об­
ласти.
О А трибут HREF. Атрибут HREF задает U R L -адрес для ссылки. Синтаксис:
<AREA HREF=“URL">
О А трибут ALT. Атрибут ALT задает альтернативный текст для браузеров, кото­
рые не поддерживают тег <AREA>. Синтаксис:
,А •
<AREA ALT I "альтернативный текст“>
О А трибут TITLE. Атрибут TITLE задает текст подсказки, всплывающей при на­
ведении указателя мыши на активную область. Синтаксис:
<AREA TITLE = "текст подсказки”>
” ’ 'S '^
О А трибут TARGET. Атрибут TARGET идентифицирует фрейм, в котором дол­
жен быть открыт целевой ресурс. Синтаксис:
_^ 1
TARGET-’иия|_Ыank|_self |_parent|_top"
Параметры:
□ имя — документ открывается во фрейме с именем, задаваемым с помощью ат­
рибута NAME дескриптора <FRAME> (имя фрейма должно начинаться с буквы);
□ _Ыапк — документ открывается в новом неименованном окне;
□ _self — документ открывается в том же окне, в котором содержится теку­
щий документ;
; £Щ
□ _parent — документ открывается во фрейме, родительском по отношению
к фрейму, содержащему текущий документ (если родительского фрейма
не существует, документ открывается в текущем фрейме);
□ -top — документ открывается в текущем окне и занимает все окно.
О А трибут NOHREF. Атрибут N0HREF указывает на то, что с областью не связа­
ш на ссылка.
О А трибут TABINDEX. Атрибут TABINDEX определяет порядок, в котором ак­
тивные области получают фокус* после нажатия клавиши Tab. Синтаксис:
TABINDEX-'число"
"
" Т Ш г М іІ
Карты изображений
69
О А трибут ACCESSKEY. Атрибут ACCESSKEY определяет комбинацию клавиш,
используемую для доступа к активной области (перехода по U R L ). Синтак­
сис:
ACCESSKEY="chhboji"
О А трибут ONFOCUS. Атрибут ONFOCUS определяет обработчик события, воз­
никающего при получении активной областью фокуса ввода (фокус ввода
может быть получен как с помощью мыши, так и в результате перебора после
нажатия клавиши Tab). Синтаксис:
0NF0CUS="сценарий"
О А трибут ONBLUR. Атрибут ONBLUR определяет обработчик события, возни­
кающего при потере активной областью фокуса ввода (фокус ввода может
быть потерян как в результате выбора другого элемента с помощью мыши,
так и в результате перебора после нажатия клавиши Tab).'Синтаксис:
0NBIUR="сценарий"
О А трибут USEM AP. Необязательный атрибут USEMAP связывает с данным эле­
ментом карту изображения. Синтаксис:
USEMAP»"URL"
Этот атрибут разрешает использовать изображения, отдельные части которо­
го связаны с картами и объединяются тегом <МАР>. В этом случае щелчок на
карте обрабатывает браузер:
<IMG SRC - 'URL изображения" USEMAP - “URL" карты (# имя карты) >
О А трибут ISM AP. Необязательный атрибут ISMAP используется для определе­
ния карты изображения на стороне сервера. Синтаксис:
ISMAP-"длина”
Тег <IMG> должен быть включен в тег <А>. Атрибут ISMAP сообщает браузеру,
что данное изображение дает пользователю возможность выполнять какиелибо действия, щелкая мышью на активных областях. Этот атрибут разрешает
использовать изображения, отдельные части которого связаны со ссылками и
позволяют выполнять переходы. Такие изображения применяются совместно
с тегом <А>. В этом случае реакцию на щелчок отрабатывает сервер:
<А HREF - 'URL карты'> <IMG SRC - 'URL изображения" ISMAP>
Примеры карт изображений
В качестве примера карты изображения рассмотрим семейную фотографию. При
наведении указателя мыши на каждого члена семьи появляется соответствую­
щая всплывающая подсказка и возможен переход на другую веб-страницу с бо­
лее подробными данными о нем.
Код карты представлен в листинге 3.6, а на рис. 3.6 показаны варианты карты
изображения с активными областями в виде круга, прямоугольника и много­
угольника. Под изображением находится поле, в котором появляется название
области при наведении на нее указателя мыши. Изображение, которое выбрано
для примера, имеет размер 400x300 пикселов.
70
Урок 3. Графика
шша
gnep«
ocr««»iTts ом*
Р:\)ОчпЛУмаб» йИKypcVHTML\CDV*ламЭ
у
,
.
.
у
«
у
» f A
V
A
*
■ * !* f i *
; - ;
•
•
;
Д
И
]
* *
1
j i
< i
■
очке
0:\Км*м\Учв6«*'icypc\KTHL\CD\rпава3
і у
*
; л
oK**:
Мама
ІМ О К
Рис. З.б. Пример карты изображения
Листинг 3.6. Пример создания карты изображения с активными областями в виде круга,
прямоугольника, многоугольника
- . .-і а м и д а
<НТМ1><НЕА0хТ1Т|_Е>Фотография-карта</Т1Т|_Е></НЕА0>
••■■■'^'4
<B0DY BGC0L0R=#FFFFFF>
- г ,^ г З Д Й п Я
<IMG HEIGHT=300 SRC="flHCTHHr 3 .6 .Ш е 5 / С е к ья.д іГ widtti=400 USEMAP=#Map B0RDER=0>
<MAP NAME=Map>
" 1^
17%
<AREA onmouseover="document.where.who.value='flana'"
•
SHAPE-CIRCLE C00RDS-70.70.70 HREF="Father.htm">
<AREA onmouseover=”document.where.who.value='Сынок'"
,
SHAPE=P0LY COORDs=130.50.250.50.270.156,260.196.220.290.140.141
HREF“ "Son.htm">
S ''
<AREA onmouseove r="document.where.who.value-' Дочка' “
SHAPE-RECT C00RDS-59.125.170.220 HREF-’ Daughter.htro*>
<AREA onmouseover="document.where.who.уа1ие='Мама'"
‘
И
Йй-Й 1І1І1
Карты изображений
71
SHAPE=CIRCLE COORDS-ЗЮ .80.70 HREF="Mather.htm">
</MAP>
<F0RM NAME=where><INPUT size=30 NAME=who> </F0RM>
</MAP>
</B0DY></HTML>
В данном примере изображение, размещенное на странице с помощью тега
<IMG>, становится картой с помощью атрибута USEMAP.
ішһ
В листинге 3.7 представлен код еще одного примера карты изображения, позво­
ляющей просмотреть более подробно пригороды Санкт-Петербург, выбирая
часть большой фотографии. Фотография разделена на четыре прямоугольника
(рис. 3.7).
Пригороды Санкт-Петероурга
(ПетродворсиНЛомоносйв
Графнческне ссылки
Рис. 3.7. Еще один пример карты изображения
Листинг 3.7. Пример создания карты изображения с активными областями в виде
прямоугольников
<HTMLxHEAD><T ITL Е>Меню-карт а</ТITL Е></НЕА0>
<B0DY BGCOLOR - #FFBCBO
<CENTER>
<Н1>Пригороды Санкт-Петербурга</Н1>
<HR5>
<TABLE B0RDER-2>
<TRxTD><A HREF = graphl.htm> Петродворец</А>
<TD><A HREF I #ітд>Лононосов</А>
<TD><A HREF - move.htm> Пушкин</А>
<TO<A HREF 1 #тар>Павловск</А>
</TABLE><HR></CENTER>
<A NAME = MAP>
<Н2>Графические ссылки</Н2>
<MAP NAME = "(цутар">
<AREA SHAPE - "RECT" COORDS - *0.0.270.190" HREF - Петродворец.htm>
<AREA SHAPE | "RECT" COORDS = "270.0.540.190” HREF = Ломоносов.htm>
<AREA SHAPE 1 “RECT" COORDS - "0.190.270.380” HREF = Павловск.htm>
<AREA SHAPE = “RECT* COORDS = “270.190.540.380” HREF = Пушкин.htffl>
</MAP>
<IMG SRC - ‘ Пригороды, jpg" USEMAP | “#mymap">
<HR>
<A NAME = IMG>
T;;;/ T
j
8
;. J
У'
’
" | '& Ш
- ‘-
Щ I I -
Ш
/ ^
■
-
</HTML>
Чтобы лучше понять, как задаются координаты областей, приведен рис. 3.8
с координатами в пикселах для каждой прямоугольной области.
(
0 .0 )
(270.0)
ЗНЕв&вмЯБ8 '*•Яю 8м (Х К —Л
|
£ *■• •
Г
_____________
в
f \ • » » * •»
K jC lJQ D
т Н
д
и
і
у
-
-
у«
.
Д
ТпіЖ П w !* - Я * - * ^ .^ « Л А Я іИ И У ^ .У У ІІУ ііИ ИИ Л Л Л У Л ^ ІМ Л ЯГ1^І ІЛ і . V Л Л Л Л О в І Г Л І л С ' * •
к н и Н
Н
*' + " *. * “
* * -*
.£ л
ш
( 0. 1 90)
• • *
• •
• » ■
г^ГШW
rЛш
4ш
у < ж У
Г а И
ш
■>
і ■ ■
у и У « Д и У у П г У у Р Д ^ і И ^ І Т Д Д
И Ь ^ м Ж И м Ж Х » » %
• • » * Д И И Ж
ш^
.
•*
ж
А
А
.
Ъ
і.
.4
4
1
У ^ y U L O
Д
- • * » _ • * » *• *
A A V a. & . V й.
^внІІНимщН|п
4 gBHHESR'11U)Hy9flH№
Ш
7
Ж
^
V
.
A
W
- Г
4
W
1
№
T H
r F ЖJ JЖ T ИT Ж^ А
l TЖ r Д
^ ^- ИO - ^T ^ JК L- Ш
r J Л
n ^А ^ЖI JЧ jЖr r ЯJ Ж
V Дr tЖt TЖ r І
^™И Д^ . ^. ИП- ж ПЖГ жГ дИУ ГД J .Tд T. * LЖ^ fЖT Ж
Ж TА ^Т M
Ж Ж
» ғ^
I уиЬ^Д
Ж^
Ж
Д^Ж
Ж
ЖЬ»
Д^»7»m
_Р
ДV
*^
і Ч-W
ЛЖ
ш ся# WWW ү * ^ ■■
г к<
”
-М^
иЖ
и^
^и
И^
.▼ ^ ж ж ж Ч* _Ш
w
* •
[ V v i •л * v i s v i j u k k v i v i f v j яш я. ж
j -тзия>л ш V.v * у іцд~ц
V | ■а д и Д м м ■■ИV ■ f a * і. ( І| м а Ж Ів Ж ^ Л щ а ^ Ж в ^ Ж І • a v ТВ Д.
wf % r • a a « » ^ • » 4 ^ ■
Ji. Д Д Д г Д п Д Д Н г г Д д ^ Д
Т IЖ/АІ Г
w
k *
>»
"Ж
■%
*
1уу"
Ж•і•
ТА ІЭ
—
_‘ 3 |*Тt
Я к1Т1 ■
* .»yjK
•Ш9
4• *
•Г»
•
^
■■ *
•Г
»і*
Д Д
ж ЬУ>Д
П й
д ^
Ж ^
Л іЛ
. ^ мДЖ ^жТи І
*
»
<
с
д
%
\
J
»
•в
■
f
а
1ш
3.я t
•
^ 1ЧIХ
»д
•И
I *
»*
л* И
Д
Я
М
Ж
Ж
Ж
■
в
У
а
!
[
■Ц
к
лж
Ч
важ
а^
Ь^
^я
гІІ•
ІГа
ЯA
^ш
Яг
ш
и■
м#
Л1
_Ж
ПI •
О■
И
ЛЖджжд
«Г
жК
■ Т ж ^ ж ^ Я ^ щ в Ш
ч Т Т ү в п Р ■ f l v T р ■ ■ ■ / • ft •
%Л > * , < С Я ^ | .*• J e l f c «Ж • ■ ^ 9 Z 4 P a a j
У У У ^ ^ Г л һ V ^ Ч а н ш жяГлЪяъ 4х С і 4& V K I Г Т *#(« f t
Рис. 3.8. Разметка прямоугольных областей карты
Это изображение, состоящее из '
имеет размеры 380x540 пикселов.
пригородов Санкт-Петербурга,
Масштабирование изображений
На рис. 3.9 показана веб-страница (листинг 3.8), содержащая три изображения
разного размера, источником которых является один и тот же файл. Файл имеет
размеры 154 пиксела в ширину и 248 пикселов в высоту. Первое изображение
Масштабирование изображений
у в е л и ч е н о в д в а р аза, вто р о е и м е е т р е а л ь н ы й р азм ер , р а зм е р ы тр е тье го и зо б р а ­
ж е н и я у м е н ь ш е н ы в д в а раза.
Ц Размеры рисунка - Microsoft Internet fnptorer
V W Y
Рис. 3.9. Три изображения разного размера из одного файла
Листинг 3.8. Пример создания трех изображ ений разного размера из одного ф айла
<НТМ1хНЕА0><Т1Т1Е>Разиеры рисунка</Т1ИЕ></НЕА0>
<B0DY>
<IMG Width-308 Height- 496 src- "g ir1 ,g 1 f’> Snbsp: Snbsp: Snbsp:
<IMG W1dth-154 Height- 248 src-“g ir1 .g if “> Snbsp: Snbsp: Snbsp:
<IMG Width-77 Height- 124 src=“g irl.g if">
</B00Yx/HTML>
Изображения отстоят друг от друга на расстояние трех неразрывных пробелов
(которые задаются символами &nbsp).
Если непродуманно задать ширину и высоту изображения, оно исказится. Такой
пример приведен на рис. 3.10 (листинг 3.9).
Листинг 3.9. Пример неудачного получения трех изображений разного размера
из одного файла
<НТМ1.хНЕА1)><ТПЪЕ>Искаиенные рисунки</Т1ИЕх/НЕА0>
<B0DYxiMG height-424 width-376 s rc « "g irlie .g lf"> &nbsp: Snbsp; Snbsp:
<IMG height-400 width-154 src-”g ir 1 ie .g if“> Snbsp: Snbsp; Snbsp:
<IMG height-124 width-376 s r c - "g ir lie .g if“> </B0DYx /html>
Искаженныерисунки- МкпмоГІ Inlwnrt txpbrtr
wy/J
ц
' . v
t f
5«
>-¥><'№
Нй&Йг
V
^
V
A
V
. W
^
д
а
Я
й
й
W
A
W
<
r V
>
A
V
A
j
• » • • • •
« • • • J * <* * » # % •
W • » * \ » « W * ■ V ■ ■ • • О
• f • • * • • » • • 0 WШ
•
••
•w
■
(VI •
T w w Щ Ф Ш W •
■
•
W
•
■
•
•*I П
Ү
Ү
а
Т
Т
ЛavVVW
aV#* W
i
«вмк
Рис. 3.10. Три изображения разного размера, полученные из одного файла
Стандартные современные мониторы имеют разрешение 1024 пиксела в ширину
и 768 пикселов в высоту. При разработке изображений следует учитывать, что
окно просмотра будет занимать лишь часть этой области. На рис. 3.11 показаны
изображения в виде полос с указанием их ширины и высоты в пикселах (лис­
тинг 3.10). Первая полоса имеет размеры 90 пикселов в высоту и 980 в ширину,
вторая — 80 пикселов в высоту и 780 в ширину, третья — 75 пикселов в высоту и
600 в ширину, четвертая — 70 пикселов в высоту и 500 в ширину, пятая — 65
пикселов в высоту и 400 в ширину, шестая — 60 пикселов в высоту и 200 в ши­
рину, седьмая — 50 пикселов в высоту и 100 в ширину.
j £
Листинг 3.10. Примеры создания изображений с указанием их размеров в пикселах
чн
<HTML><HEADxTITLE>Pa3Mepbi рисунков в пикселах</ТITLE>
</HEAD>
<ЮЗҮ>
<IMG height=90
<IMG height=80
<IMG height=75
<IMG height-70
<IMG height=65
<IMG height-60
<IMG height-50
</B0DY></HTML>
,
‘
Й'7Ш Щ |
w id tM BO
width=780
width=600
width»500
width=400
width-200
width=100
s rc ^ 'p o ly l.g if" > <BR>
src= "p oly2 .g ir> <BR>
src=Hpoly3.gtf"> <BR>
src=,,po1y4.gif"> <BR>
src= "poly5.gif"> <BR>
srce,,po1y6.gir> <BR>
src*"p o ly7 .g if">
v
t•
• | lib H
Если размер изображения по ширине превышает 980 пикселов, оно не может
полностью поместиться на экране, и появляется горизонтальная полоса прокрут­
ки. Если размер изображения по высоте превышает 570 пикселов, оно не может
полностью поместиться на экране, и появляется вертикальная полоса прокрут­
ки. Для мониторов, размеры которых в пикселах отличаются от величины
Подведем итоги
75
1024x768, размеры полностью размещаемого на экране изображения будут дру­
гие, но суть останется та же.
j Размеры рисуикое в пикселам | M icrosoft I nternet tx p te ftr
ШтШШШ
&:\Книп*\Учебный Kypc\HTML\CD\Tлава 3\Esting3.10.htm
В btcot a 90
п и kc е л о в
«шел о в
Рис. 3.11. Примеры изображений с указанием их размеров в пикселах
Подведем итоги
В этом уроке рассмотрены теги, позволяющие размещать графику на веб-страни­
цах. Главным из них является тег <IMG> с его атрибутами SRC, ALT, L0NGDESC,
HEI6TH, WIDTH, ALIGN, BORDER, VSPACE, HSPACE. Местоположением изображения на
странице управляет атрибут выравнивания ALIGN, который может принимать
значения top, middle, bottom, left и right (сверху, посередине, снизу, слева, справа).
Рассказано также о теге <МАР>, который применяется для представления графи­
ческого изображения в виде карты с активными областями. Представлены при*
меры карт.
Рассмотрены форматы графических файлов JP E G и G IF, которые обычно ис­
пользуются в Интернете. Рассказано также о форматах BM P, PC X и PNG.
Для лучшего понимания природы изображений раскрыты такие понятия, как
«пикселы* и «разрешение».
Урок 4
Фон веб-страниц
Каждая веб-страница имеет фон, на котором можно размещать
текст и рисунки. В этом уроке рассмотрены особенности соз­
дания фона веб-страниц. Приведена таблица цветов, наиболее
часто использующихся в Интернете.
Фоновые рисунки
77
Фоновые рисунки
Большинство браузеров позволяет включать в документ фоновый рисунок, кото­
рый будет отображаться на заднем плане всего документа. Некоторым пользова­
телям нравится видеть на веб-страницах фоновую графику, другим — нет. Нена­
вязчивый полупрозрачный рисунок (обои) обычно хорошо выглядит в качестве
фона большинства документов.
Описание фонового рисунка включается в тег <B0DY> и выглядит следующим
образом:
Щ
<B0DY BACKGROUND = "p ic tu re .g if"
На рис. 4.1 показана страница с фоном, код которой представлен в листинге 4.1.
оШ
Рис. 4.1. Веб-страница с фоновым
рисунком
Image Size
EScm
a
OK
1
Cancel
j
Ш ЙК
1
Pixel Dimensions: 94K
Widttv.
H
..... ...
i .
-I
Ipixels
шшшаштшашл
beighf:
$■/
171
pixels
>Ф*
Я
H
-
f
Document See-v;
? 'Ф*2
Height
(4,97
І cm
в к ш !
jcm
И*52
i
у
м
^
О
и
Г
*
J
X
w
. . »'»» ^ •v’**•
►
“»Л
-
Wttth:
І
y
t
' X
" *-**/*
_ Ъ
§
ІІН И ш
i
0esohition;
| pixels/inch
I96
ф
'
• * .
5
* v
’ ‘v
1? Constrain Proportions
I
P
Resample [mage:
,
л
л
Bicubic
Рис. 4.2. Рисунок, выбранный в качестве фона, и диалоговое окно с размерами этого рисунка
В качестве фона выбран рисунок с размерами 4,97x4,52 см. несмотря н
шие размеры, рисунок покрывает всю площадь страницы, словно множество
диалогошшіиіч кафе
іш k ,,v* *
----. 1 1 ni
*
вое окно с размерами этого рисунка, открытое в программе Adobe Photoshop.
78
Урок 4. Фон веб-страниц
Листинг 4.1. Пример создания веб-страницы, содержащей фоновый рисунок
<HTML>
<HEAD>
<TITLE> Графический фон</ТІИЕ>
</НЕА0>
<B00Y BACKGROUND * 3nna.jpg>
</BODҮ>
1
ІШ ІІ
-v’ і , " Д р Я И И Я И
Н
3
</HTML>
;
Задание стандартных цветов
А
Многие создатели веб-страниц используют для фона документа, обычного тек­
ста и ссылок предопределенные цвета. Чтобы задать эти цвета, необходимо
включить в тег <B0DY> дополнительные параметры:
<B00Y BGC0L0R="#XXXXXX“ ТЕХТ="#ХХХХХХ“ LINK="#XXXXXX”>
;ЛМ :--
Здесь каждый из параметров определяет цвет того или иного элемента страницы:
О BGCOLOR — цвет фона документа;
•
О TEXT — цвет простого текста документа;
О LINK — цвет ссылки.
I
,
Цвет задается шестизначным числом в шестнадцатеричном формате и цветовой
модели RG B. Значение #000000 соответствует черному цвету, значение #FFFFFF —
белому. Например:
S і^ в В Н І
<B0DY BGC0L0R="#FFFFFF" TEXT="#000000" LINK=“#9690CC">
Данная строка определяет белый цвет фона документа, черный текст и серебри­
стые ссылки.
а Цветовой фон - M icrosoft Internet Explorer
шшв
4\fcsting4.2.htm
Текст белого цвета
Рис. 4.3. Веб-страница, содержащая текст белого цвета на синем фоне
На рис. 4.3 показана веб-страница, содержащая текст белого цвета на синем фоне
(листинг 4.2).
Задание стандартных цветов
79
Листинг 4.2. Пример создания веб-страницы, содержащей текст белого цвета
на синем фоне
<НТМ1_хНЕА0хТ1Т|_Е>Цветовой $oh</TITLE></HEAD>
<B0DY BGC0L0R=123456 ТЕХТ=ҒҒҒҒҒҒ>
<ВЮ>Текст белого цвета</ВІ6>
</BODYx/HTML>
На рис. 4.4 показана та же веб-страница, что и на рис. 4.3, но с атрибутами, кото­
рые задают верхнюю, нижнюю, левую, правую границы страницы в пикселах
(листинг 4.3). Видно, что текст смещен относительно границ страницы.
Рис. 4.4. Веб-страница, на которой текст имеет отступы
ДТвбяица цветов - Mwwoft Internet
Почт»
т ОйК^иУУчебнь* »сурс\ИТ!4.\С0\Гпава 4\fe»ng4 3.htm
- -
---------- -------- ------------& -
* к
.
*
-
-
----------------
I
^
т
т '\шшіЛ
і П
' -------------
Таблица цветов
ALICEBLUE-ГРЯЭНО ГОЛУБОЙ
(#Ғ0Ғ8ҒҒ)
a n t iq u e w h it e - а н ти ч н ы и
БЕЛЫЙ
<#ҒАЕВОЯ
AQUA-AKBA
<#00FFFF)
a z u r e -л а э у р н ы и
BEIGE-БЕЖЕВЫЙ
eiSQue-бисквит
(* F 0 ҒҒҒҒ)
(»FSFSOC)
(#ҒҒЕ4С4)
вІАКСНЕОАиИОЫ О-ВЛЕДНЫ И
BLUE-СИНИИ
(#OOOOFF)
ДАЛЬМОИД
<#FFEBCD)
AQUAMARINE-AKBAMAPHH
ЭЕЛЕНОВАТОГОЛУБОЙ
(#7ҒҒҒ04)
BROWN-КОРИЧНЕВЫЙ
' <»А52А2А) / .
CHARTREUSE *ЛИКЕР
ШАРТРЕЗ ШШ
<#?ҒҒҒШЛ
c o r n s il k -к у к у р у з н ы и
j H
(#6495ED)
ц вет о к
D
ШЕЛК
(#FFF8DO
Рис. 4.5. Фрагмент веб-страницы, содержащей таблицу цветов
80
Урок'4. Фон веб-страниц
Листинг 4.3. Пример создания веб-страницы, на которой текст имеет отступы
<НТМ1_><НЕА0><Т1Т1_Е>Цветовой $oh</TITLEx /HEAD>
<B0DY BGCOLOR-123456 TEXT-FFFFFF TOPMARGIN-lOO BOTTOMMARGIN-lOO LEFTMARGIN-100
RIGHTMARGIN-100> <В16>Текст белого ueeTa</BIG></BODY></HTML>
На рис. 4.5 показана часть веб-страницы с названиями цветов, которые могут ис­
пользоваться на веб-странице в качестве фоновых (листинг 4.4). Такую таблицу
разработчикам веб-страниц полезно иметь под рукой, поскольку с ее помощью
очень удобно подбирать цвета и определять их значения.
;
Листинг 4.4. Пример созд ания таблицы цветов
<HTML><HEAD><TITLE>Ta6flMua ueeTOB</TITLE></HEAD>
<B0DY ALINK=#000000 BGC0L0R=#FFFFFF BGPROPERTIES-FIXED LINK=#000000 TOPMARGIN-IO
VLINK=#808080xFONT FACE-VERDANA.ARIAL.HELVETICA SIZE-2>
<H1 ALIGN=CENTER>Ta6flnua цветов</Н1> <P align= left>
|||Ш Н |В Я Н Н
<TABLE BGC0L0R=GRAY B0RDER=2 CELLPADDING=0 CELLSPACING=5> <TBODYxTRxTD ALIGN S I DOLE
BGCOLOR»ALICEBLUE></FONT><FONT FACE-VERDANA.ARIAL.HELVETICA SIZE-2xF0NT COLOR-BLACK
SIZE=2>ALlbEBLUErГРЯЗНО lWBOii<BR>(#FOF8FF)</FONT> </F0NTx/TD>
<TD ALIGN-MIDDLE BGCOLOR-ANTIQUEWHITE><F0NT COLOR-BLACK SIZE-2>ANTIQUEWHIТЕ-АНТИЧНЫЙ
БЕЛЫЙ<ВК>(#FAEBD7) </F0NT> </TD>
.
<TD ALIGN-MIDDLE BGC0L0R=AQUA><F0NT COLOR-BLACK SIZE=2>AQUA-AKBA<BR>(#OOFFFF)</FONT>
</TD>
<TD ALIGN-MIDDLE BGCOLOR-AQUAMARINExFONT COLOR-BLACK
'
;^
SIZE=2>AQUAMARINE-AKBAMAPHH-3EJlEH0BAT0-r0JiyB0fi<BR>(#7FFFD4)</F0NT> </TDx/TR>
<TRxTD ALIGN-MIDDLE BGCOLOR-AZURExFONT COLOR-BLACK
H H
^
■%-.&
S I ZE=2>AZURE -JlA3yPHUti<BR>(#F0FFFF )</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-BEIGExFONT COLOR-BLACK
SIZE=2>BEIGE-BE)KEBbM<BR>(#F5F5DC)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-BISQUExFONT COLOR-BLACK
4 -^ 9
SIZE=2>BISQUE-BHCKBHT<BR>(#FFE4C4)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR=BLACK><FONT COLOR-WHITE SIZE=2>BLACK-4EPHbM<BR>(#000000)</F0NT>
</TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-BLANCHEDALMONDxFONT COLOR-BLACK
S I ZE=2>BLANCHEDALM0ND-BJlEflHUii ДАЛbMOHfl<BR>(#FFEBCD)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-BLUExFONT COLOR-WHITE SIZE-2>BLUE-CИHИЙ<BR>(#0000FF)</F0NT>
</TD>
I
<T0 ALIGN-MIDDLE BGCOLOR-BLUEVIOLETxFONT COLOR-BLACK
, ;V
SIZE=2>BLUEVIOLET-OHOJ1ETOBNH<BR>(#8A2BE2)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR=BROWN><FONT COLOR-WHITE
v >i ?
, /
SIZE-2>BR0WN-K0PHMHEBblH<BR>(#A52A2A)</F0NT> </TD></TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-BURLYWOODxFONT COLOR-BLACK
SIZE-2>BURLYWOOD-flPEBECHb$<BR>(ДОЕВ887)</FONT> </TD>
'
<TD ALIGN-MIDDLE BGCOLOR-CADETBLUExFONT COLOR-BLACK
size=2>CADETBLUE-MOPCI«$<BR>(#5F9EAO)</FONT> </TD>
; ;i
<TD ALIGN-MIDDLE BGCOLOR-CHARTREUSE><FONT COLOR-BLACK SIZE-2>CHARTREUSE-ЛИКЕР
11IAPTPE3<BR>(#7 FFFOO)</FONT> </TD>
,- Щ Ш я Н И Ш
<TD ALIGN-MIDDLE BGCOLOR-CHOCOLATExFONT COLOR-BLACK
S IZE=2>CH0C0LATE-ШОКОЛAДHЫЙ<BR>(#02691E)</F0NT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-CORALxFONT COLOR-BLACK
SIZE-2>C0RAL-KOPAflfl<BR>(#FF7F50)</FONT> </TD>
'
/ У іЩ
i- '
:
" Ж
І
Задание стандартных цветов
81
<TD ALIGN-MIDDLE BGCOLOR=#COFOEOxFONT COLOR-BLACK SIZE-2>C0RNFL0WER-KyKypy3HbM
UBET0K<BR>(#6495ED)</F0NT> </TDxTD align-middle BGC0L0R=C0RNSILK><F0NT color-black
Size=2>C0RNSILK-KyKypy3HbM UEJ1K<BR>(#FFF8DC)</F0NT> </TD>
<TD align-m lddle BGCOLOR-CRIMSONxFONT color-black
si ze-2>CRIMSON-МАЛИНОВЫЙ<ВР>(#DC143C)</F0NT> </TD></TR>
<TR> <TD align-m iddle BGC0L0R=CYAN><F0NT color-black
size-2>CYAN-l"OJiyBOfi<BR>(#OOFFFF)</FONT> </TD>
<TD align-m iddle BGCOLOR-DARKBLUExFONT color-white size=2>DARKBLUETEMHO-CHHH(i<BR>(#00008B)</FONT> </TD>
<TD align-m iddle BGCOLOR-DARKCYANxFONT color-black size=2>DARKCYANTEMHO-ГОЛУB0il<BR>(#008B8B) </F0NT> </TD>
<TD align-m iddle BGCOLOR-DARKGOLDENRODxFONT color-black size=2>DARKG0LDENR0DTEMHO-30J10TOli<BR>(#B8860B)</FONT> </TDx/TR>
<TR> <td align-m iddle BGCOLOR-DARKGRAYxFONT color-black size-2>DARKGRAYТЕМНО-CEPbM<BR>(#A9A9A9) </FONT> </TD>
<TD align-m iddle BGCOLOR-DARKGREENxFONT color-white size=2>DARKGREENTEMHO-3EflEHb$<BR>(#00640())</FONT> </TD>
<TD align-m iddle BGCOLOR-DARKKHAKIxFONT color-black size=2>DARKKHAKI- ТЕМНЫЙ
XAKH<BR>(#BDB76B)</F0NT> </TD>
<TD align-middle BGCOLOR=DARKMAGENTA><FONT color-white si ze-2>DARKMAGENTATEMHO-(iyPnyPHHfi<BR>(#8B008B)</FONT> </TDx/TR>
<TR> <TD align-m iddle BGCOLOR-DARKOLIVEGREENxFONT color-white size-2>DARK0LIVEGREENТЕМНО-ЗЕЛEHOOflHBKOBbM<BR>(#556B2F)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DARKORANGExFONT color-black size-2>DARKORANGEТЕМНО-OPAH)KEBbM<BR>(#FF8C00)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DARKORCHIDxFONT color-black size-2>DARK0RCHID- ТЕМНОЙ
0PXHflEH<BR>(#9932CC)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DARKREDxFONT color-white size-2>DARKREDTEMHO-KPACHbM<BR>(#860000) </F0NT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-DARKSALMONxFONT color-black size-2>DARKSALMONТЕМНО-ОРАНЖЕВО PO3OBbM<BR>(#E9967A)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DARKSEAGREENxFONT color-black size-2>DARKSEAGREENТЕМН0-ЗЕЛЕНЫЙ M0PCK0Й<BR>(#8FBC8B)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DARKSLATEBLUExFONT color-white size-2>DARKSLATEBLUETEMHO-CEPOrOJiyBOH<BR>(#483D8B)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DARKSLATEGRAYxFONT color-white size-2>DARKSLATEGRAY(I2F4F4F)</F0NT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-DARKTURQUOISExFONT color-black size-2>DARKTURQUOISETEMHO-BHPKGOBbM<BR>(#OOCEDl)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DARKVIOLETxFONT color-black size-2>DARKVIOLETTEMHO-ФИОЛETOBWii<BR>(#9400D3)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DEEPPINKxFONT color-black size-2>DEEPPINK- НАСЫЩЕННО
PO30BbiH<BR>(#FF1493)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DEEPSKYBLUExFONT color-black size-2>DEEPSKYBLUE- НАСЫЩЕННО
Ш б Ш нЫЙІВЙ^С#ООВҒ:ЕҒІ^і і 0 № </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-DIMGRAYxFONT color-black
Slze-2>DIMGRAY-TyCWI0-CEPbM<BR>(#696969)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-DODGERBLUE><FONT color-black s1ze-2>DODGERBLUE- ИЗМЕНЕННЫЙ
СИНИЙ<ВР>(#1Е90ҒҒ)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-FIREBRICKxFONT color-white s1ze-2>F I REBRICK- ОГНЕННОKHPnH4Hblfl<BR>(#822222)</F0NT> </TD>
о Ъ пом fiuinr
<TD ALIGN-MIDDLE BGCOLOR-FLORALWHITExFONT color-black s1ze-2>FLORALWHITEцветочнобельій<в я >(#ғғға ғо )</font>
</t d x /tr >
продолжение
82
Урок 4. Фон веб-страниц
Листинг 4.4 (продолжение)
<TR> <TD ALIGN=MIDDLE BGC0L0R=F0RESTGREEN><F0NT color=b1ack size«2>F0RESTGREEN- ЛЕСНОЙ
3EJ1EHH<BR>(#228B22)</F0NT> </TD>
,
<TD ALIGN=MIDDL E BGCOLOR=#FOCOOA><FONT C0L0R=BLACK
■ ' SIZE=2>FUCHIA-ФИCTAШKOBЫЙ<BR>(#FFOOFF)</FONT> </TD>
.
<TD ALIGN=MIDDLE BGC0L0R=GAINSB0R0><F0NT C0L0R=BLACK
;
S I ZE=2>GAI NSB0R0- ГEЙHCБ0P0<BR>(#0CDCDC) </F0NT> </TD>
<T0 ALIGN=MIDDLE BGC0L0R=GH0STWHITExFONT C0L0R=BLACK SIZE=2>GH0STWHITE-EJ1E ЗАМЕТНЫЙ
BEJlbM<BR>(#F8F8FF)</F0NT> </TD></TR>
<TR> <TD ALIGN=MIDDLE BGC0L0R=G0LD><F0NT C0L0R=BLACK
SIZE=2>GOLD-30nOTOH<BR>(#FFD700)</FONT> </T0>
<TD ALIGN=MIDDLE BGC0L0R=G0LDENR0D><F0NT C0L0R=BLACK SIZE=2>G0LDENR0DTEMHO-3Ofl0T0H<BR>(#DAA520) </F0NT> </TD>
<TD ALIGN=MIDDLE BGC0L0R=GRAY><F0NT C0L0R=BLACK SIZE=2>GRAY-CEPbM<BR>(#80808())</F0NT>
</to >
<TD ALIGN-HIDOLE BGC0L0R=GREEN><F0NT C0L0R=BLACK
. - тЩ щ В ,
SIZE=2>GREEN-ЗЕЛEHUft<BR>(#008000)</F0№T> </TD></TR>
.
<TR> <TD ALIGN=MIDDLE BGC0L0R=GREENYELL0W><F0NT C0L0R=BLACK SIZE=2>GREENYELL0W3EflEHO-NOTbM<BR>(#A0FF2F) </F0NT> </TD>
<TD ALIGN=MIDDLE BGC0L0R=H0NEYDEW><F0NT C0L0R=BLACK SIZE=2>H0NEYDEW- МЕДВЕН0Й
POCbl<BR>(#FOFFFO)</FONT> </TD>
»■' ^ Щ | |
<TD ALI GN=MI DDLE BGC0L0R=H0TPI NKxFONT C0L0R=BLACK SIZE=2>H0TPINKЖАРК0-P030BbM<BR>(#FF69B4)</F0NT> </TD>
<TD ALIGN=MIDDLE BGC0L0R=INDIANREDxF0NT C0L0R=BLACK SIZE=2>INDIANRED- КРАСНЫЙ
HHflHr0<BR>(#CD5C5C)</F0NT> </TD></TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-INDIGCXFONT C0L0R=WHITE
;
SIZ E=2>INDI GO-ИНДИГ0<BR>(#4B0082) </FONT> </TD>
* yW
<TD ALIGN=MIDDLE BGC0L0R=IV0RYxf0NT C0L0R=BLACK SIZE=2>IV0RY- СЛОНОВОЙ
K0CTH<BR>(#FFFFF0)</F0NT> </TD>
H
<TD ALIGN=MIDDLE BGC0L0R=KHAKI><F0NT C0L0R=BLACK SIZE=2>KHAKI -XAKH<BR>(#F0E68C)</F0NT>
</TD>
<TD ALIGN=MIDDLE BGC0L0R=LAVENDER><F0NT C0L0R=BLACK SIZE=2>LAVENDERflABAHfl0BbW<BR>(#E6E6FA)</F0NT> </T0x/TR>
<TR> <TD ALIGN=MIDDLE BGC0L0R=LAVENDERBLUSHxF0NT C0L0R=BLACK SIZE=2>LAVENDERBLUSHПОКРАСНЕННОЙ ЛABAHflbl<BR>(#FFFOF5)</FONT> </TD>
< ‘ ^
<TD ALIGN=MIDDLE BGC0L0R=LAWNGREEN><F0NT C0L0R=BLACK SIZE=2>LAWNGREEN- ТРАВЯНОЙ
3EnEHH<BR>(#7CFC00)</F0NT> </TD>
<TD ALIGN=MI0DLE BGC0L0R=LEM0NCHIFF0N><F0NT C0L0R=BLACK SIZE=2>LEM0NCHIFF0NflHM0HH0-K0PM4HEBt>M<BR>(#FFFACD)</F0NT> </TD>
;
<TD ALIGN-MIDDLE BGC0L0R=LIGHTBLUE><FONT C0L0R=BLACK SIZE=2>LIGHTBLUECBETЛ0-CИHИЙ<BR>(#ADD8E6)</F0NT> </TDx/TR>
<TR> <TD ALIGN=MIDDLE BGC0L0R=LIGHTC0RALxF0NT C0L0R=BLACK SIZE=2>LIGHTC0RALСВЕТЛ0 -КОРАЯЛОВЫЙ<ВЯ>(#F08080) </F0NT> </TD>
■
■
■
■
-;■ ,% if § |
<TD AL I GN=MI DDLE BGC0L0R=LIGHTCYANxF0NT C0L0R=BLACK SIZE=2>LIGHTCYANСВЕТЛ0- ГОЛУБОЙ<ВЯ>(#ЕОҒҒҒҒ)</F0NT> </TD>
№ і,
<TD AL IGN=MI DDLE BGC0L0R=LIGHTG0LDENR0DYELL0WxF0NT C0L0R=BLACK
SIZE=2>LIGHTG0LDENR0DYELL0W- СВЕТЛ030Л0Т0Й<ВР>(#FAFAD2)</F0NT> </TD>
<TD ALIGN=MIDDLE BGC0L0R=L I GHTGREENxFONT C0L0R=BLACK S I ZE*=2>L IGHTGREEN СВЕТІЮ-ЗЕЛЕНЫЙ<ВЯ>(#90ЕЕ90)</ҒОНТ> </TDx/TR>
•'
<TR> <TD ALIGN=MIDDLE BGC0L0R-LIGHTGREYxFONT C0L0R=BLACK SIZE-2>LIGHTGREYСВЕТЛ0-CEPbM<BR>(#D3D3D3) </F0NT> </TD>
<TD ALIGN-MIDDLE BGC0L0R4IGHTPI NKxFONT COLOR-BLACK SIZE*2>LIGHTPINKСВЕТЛ0-P030BbM<BR>(#FFB6C1)</F0NT> </TD>
Задание стандартных цветов
83
<TD ALIGN-MIDDLE BGCOLOR-LIGHTSALMON><FONT COLOR-BLACK SIZE=2>LIGHTSALM0NCBETJlO-C)PAH)KEBO-PO3OBblfl<BR>(#FFA07A)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-LIGHTSEAGREENxFONT COLOR-BLACK SIZE—2>LIGHTSEAGREEN- СВЕТЛОЙ
МОРСКОЙ ВОЛHbl<BR>(#20B2AA)</FONT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-LIGHTSKYBLUExFONT COLOR-BLACK SIZE=2>LIGHTSKYBLUEСВЕТЛО-НЕБЕСНО-CHHHH<BR>(#87CEFA)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-LIGHTSLATEGRAYxFONT COLOR-BLACK SIZE=2>LIGHTSLATEGRAYСВЕТЛО-rOflYBOCEPbM<BR>(#778899)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-LIGHTSTEELBLUE><FONT COLOR-BLACK SIZE=2>LIGHTSTEELBLUE- СВЕТЛЫЙ
CEPO-CHHHH<BR>(#BOC4DE)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-LIGHTYELLOWxFONT COLOR-BLACK SIZE=2>LIGHTYELLOWСВЕТЛО-ЖЕЛТЫЙ^>(#ҒҒҒҒЕО)</ҒОМТ> </TD></TR>
<TR> <TD ALIGN-MIDDLE BGCQLOR-LIME><FONT COLOR-BLACK SIZE=2>LIME-ЛИПОВЫЙ
UBET<BR>(#OOFFOO)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR=LIMEGREEN><FONT COLOR-BLACK SIZE—2>LIMEGREENЛИПОВО-ЗЕЛЕНЫЙ<ВР>(#32CD32) </FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-L INENxFONT COLOR-BLACK
SIZE=2>LINEN-flbHflHOH<BR>(#FAFOE6)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MAGENTAxFONT COLOR-BLACK SIZE=2>MAGENTAfiypnyPHbM<BR>(#FFOOFF)</FONT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-MAROONxFONT COLOR-WHITE SIZE=2>MAR00NKAIIITAHOBbM<BR>(#800000)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MEDIUMAQUAMARINExFONT COLOR-BLACK SIZE=2>MEDIUMAQUAMARН Е ­
УМЕРЕННЫЙ AKBAMAPMH<BR>(#66CDAA)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MEDIUMBLUExFONT COLOR-WHITE SIZE=2>MEDIUMBLUE- УМЕРЕННЫЙ
CИHИЙ<BR>(#OOOOCD)</FONT> </TD>
<TD ALIGN-MIDOLE BGCOLOR-MEDIUMORCHIDxFONT COLOR-BLACK SIZE=2>MEDIUMORCHID- УМЕРЕННОЙ
APXHflEH<BR>(#BA55D3) </FONT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-MEDIUMPURPLExFONT COLOR-BLACK SIZE=2>MEDIUMPURPLEУМЕРЕННО-nyPfiyPHblH<BR>(#9370DB)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MEDIUMSEAGREEN><FONT COLOR-BLACK SIZE=2>MEDIUMSEAGREENyMEPEHHO-MOPCWM<BR>(#3CB371)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MEDI UMSLATEBLUExFONT COLOR-BLACK
SIZE=2>MEDIUMSLATEBLUE<BR>(#7B68EE) </FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MEDIUMSPRINGGREENxFONT COLOR-BLACK SIZE=2>MEDIUMSPRINGGREENУMEPEHHO-CEPOCИHИЙ<BR>(#OOFA9A)</FONT> </TD></TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-MEDIUMTURQUOISExFONT COLOR-BLACK SIZE=2>MEDIUMTURQUOISEУМЕРЕННО-БИРЮ30ВЫЙ<ВЯ>(#48D1CC)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MEDIUMVIOLETREDxFONT COLOR-BLACK SIZE=2>MEDIUMVI0LETREDУМЕРЕНН0-ФИ0ЛЕТ0В0-КРАСНЬІЙ<ВК>(#С71585)</Ғ0т> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MIDNIGHTBLUExFONT COLOR-WHITE SIZE=2>MIDNIGHTBLUE- СРЕДНИЙ
ТЕМНО-CHHM<BR>(#191970 )</ FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MINTCREAMxFONT COLOR-BLACK SIZE=2>MINTCREAMKPEM0BЫЙ<BR>(#F5FFFA)</F0NT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-MISTYROSExFONT COLOR-BLACK SIZE=2>MISTYROSE- КРАСНЫЙ
TyMAH<BR>(#FFE4El)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-MOCCASINxFONT COLOR-BLACK SIZE=2>M0CCASIN- ЦВЕТ ОБУВИ
ИНДЕЙЦЕВ<ВР>(#FFE4B5)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-NAVAJOWHITE><FONT COLOR-BLACK SIZE-2>NAVAJOWHITEСВЕТЛО-KOPM4HEBbM<BR>(#FFDEAD)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-NAVYxFONT COLOR-WHITE SIZE=2>NAVY-MOPCKOH<BR>(#000080)</FONT>
</TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-OLDLACExFONT COLOR-BLACK SIZE-2>OLDLACE- СТАРЫЕ
KPy»EBA<BR>(#FDF5E6)</F0NT> </TD>
продолжение &
84
Урок 4. Фон веб-страниц
Листинг 4.4 ( продолжение)
<TD ALIGN=MIDDLE BGC0L0R=0LIVE><F0NT COLOR-BLACK SIZE=2>0LIVEOflMBKOBblfl<BR>(#808000 )</F0NT> </TD>
<TD ALIGN-MIDDLE BGC0L0R-0LIVEDRAB><F0NT COLOR-BLACK SIZE=2>0LIVEDRAB- СЕРЫЕ
0/lHBKH<BR>(#6B8E23)</FONT> </TD>
<TD ALIGN=MIDOLE 8GC0L0R=0RANGE><F0NT COLOR-BLACK SIZE-2>0RANGE-
'
ОРАНЖЕBHH<BR>( #FFA500 )</F0NT> </T0></TR>
<TR> <T0 ALIGN-MIDDLE BGC0L0R=0RANGERED><F0NT COLOR-BLACK SIZE=2>0RANGERED0РАНЖЕВ0-KPACHblt4<BR>(#FF4500)</F0NT> </TD>
<TD ALIGN-MIDDLE BGC0L0R-0RCHID><F0NT COLOR-BLACK SIZE=2>0RCHID-
I
■>■£$
.
0РХИДЕИ<ВЯ>(#0A70D6) </F0NT> </TD>
^ .
<TD ALIGN-MIDDLE BGCOLOR-PALEGOLDENRODxFONT COLOR-BLACK SIZE=2>PALEG0LDENR0DBJlEflH0-30J10T0fi<BR>(#EEE8AA)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR=PALEGREEN><FONT COLOR-BLACK SIZE=2>PALEGREEN-
•
BJlEflH0-3EHEHbM<BR>(#98FB98)</F0NT> </TDx/TR>
л ‘■-ҺШ Ш Ш Ш ш
<TR> <TD ALIGN-MIDDLE BGC0L0R=PALETURQU0ISE><F0NT COLOR-BLACK SIZE-2>PALETURQU0ISEБЛEДНО-БИPI030BUfi<BR>(#AFEEEE) </F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-PALEVIOLETREDxFONT COLOR-BLACK SIZE=2>PALEVI0LETRED- БЛЕДНО­
ФИОЛЕТОВО-KPACHblH<BR>(#DB7 093) </F0NT> </TD>
Щ I
<TD ALIGN-MIDDLE BGCOLOR-PAPAYAWHIPxFONT COLOR-BLACK SIZE-2>PAPAYAWHIP- ДЫННАЯ
ПЛETb<BR>(#FFEFD5) </FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-PEACHPUFFxFONT COLOR-BLACK SIZE=2>PEACHPUFF- ПЕРСИКОВЫЙ
flblM<BR>(#FFDAB9) </F0NT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGC0L0R=PERU><F0NT COLOR-BLACK SIZE=2>PERU- ЦВЕТ
nyCTblHH<BR> ( #CD853F )</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-PINKxFONT COLOR-BLACK SIZE=2>PINK- P030BbM<BR>(#FFCOCB)</FONT>
<
/TD
>
ІШ
ЩЯ
<TD ALIGN-MIDDLE BGCOLOR-PLUMxFONT COLOR-BLACK SIZE=2>PLUM' '
DlHBOBbM<BR>(#DDA0DD) </FONT> </TD>
| І І Ш
Н
В
<TD ALIGN-MIDDLE BGCOLOR-POWDERBLUExFONT COLOR-BLACK SIZE=2>P0WDERBLUE- ПОРОШКОВОСИНИЙ<ВР>(#ВОЕОЕ6)</F0NT> </TD></TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-PURPLExFONT COLOR-WHITE SIZE=2>PURPLEПУРПУPHblPI<BR>(#800080) </F0NT> </TD>
;
<TD ALIGN-MIDDLE BGCOLOR-REDxFONT COLOR-BLACK SIZE=2>RED- KPACHbM<BR>(#FF0000)</F0NT>
</TD>
,
.
f
<TD ALIGN-MIDDLE BGC0L0R-R0SYBR0WN><F0NT COLOR-BLACK SIZE=2>ROSYBR0WN- РОЗОЮ-1 | Д
K0PH4HEBbM<BR>(#BC8F8F)</F0NT> </TD>
1 Ш -Й j f ІІҮ
<TD ALIGN-MIDDLE BGC0L0R-R0YALBLUE><F0NT COLOR-BLACK SIZE=2>R0YALBLUE- К0Р0ЛЕВСК0CHHHii<BR>(#4169El)</F0NT> </TDx/TR>
I ; <TR> <TD ALIGN-MIDDLE BGCOLOR-SADDLEBROWNxFONT COLOR-WHITE SIZE=2>SADDLEBR0WNКОРИЧНЕВОЕ CEPO<BR>(#8B4513)</FONT> </TD>
*
<TD ALIGN-MIDDLE BGCOLOR-SALMONxFONT COLOR-BLACK SIZE=2>SALM0N- ЦВЕТ
JI0C0CJI<BR>(#FA8072)</F0NT> </TD>
Щ
<TD ALIGN-MIDDLE BGCOLOR-SANDYBROWNxFONT COLOR-BLACK SIZE=2>SANDYBR0WN- РЫЖЕВАТОКОРИЧНЕВЫЙ<ВЯ>(#F4A460 )</FONT> </TD>
". I С Щ Щ т Ш
<TD ALIGN-MIDDLE BGCOLOR=SEAGREEN><FONT COLOR-BLACK SIZE=2>SEAGREEN- МОРСКОЙ
ЗЕЛEHH<BR>(#2E8B57)</F0NT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-SEASHELL><FONT COLOR-BLACK SIZE-2>SEASHELL- МОРСКИХ
PAKOBHH<BR>(#FFF5EE)</FONT> </TD>
У& Щ ЯШ Ж
<TD ALIGN-MIDDLE BGCOLOR-SIENNAxFONT COLOR-BLACK SIZE-2>SIENNA0XPA<BR>(#A0522D)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-SILVERxFONT COLOR-BLACK SIZE=2>SILVERCEPE6PflHbM<BR>(ІС0С0С0) </F0NT> </TD>
’’Ш
Щ
Я
Подведем итоги
85
<TD ALIGN—MIDDLE BGC0L0R-SKYBLUE><F0NT COLOR-BLACK SIZE-2>SKYBLUE- СИНЕГО
HEBA<BR>(#87CEEB) </F0NT> </TD></TR>
<TR> <TD AL IGN-MI DDLE BGCOLOR-SLATEBLUExFONT COLOR-BLACK SIZE-2>SLATEBLUEСЛАНЦЕВО-CHHHCi<BR>(#6A5ACD) </FONT> </TD>
<TD AL IGN—MIDDLE BGCOLOR-SLATEGRAYxFONT COLOR-BLACK SIZE-2>SLATEGRAYСЛАНЦЕВО-CEPblti<BR>(#708090) </FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-SNOWxFONT COLOR-BLACK SIZE-2>SN0W- СНЕГ<BR>(#FFFAFA)</FONT>
</TD>
<TD ALIGN-MIDDLE BGCOLOR-SPRINGGREEN><FONT COLOR-BLACK SIZE«2>SPRINGGREEN- ВЕСЕННЯЯ
3EHEHb<BR>(#OOFF7F)</FONT> </TDx/TR>
<TR> <TD ALIGN-MIDOLE BGCOLOR-STEELBLUExFONT COLOR-BLACK SIZE-2>STEELBLUE-СИНЕВАТОСТАЛЬНОЙ<ВЯ>(#4682B4) </FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-TANxFONT COLOR-BLACK SIZE-2>TAN-KOPA fly6A<BR>(#02B48C)</F0NT>
</TD>
<TD ALIGN-MIDDLE BGCOLOR-TEALxFONT COLOR-BLACK SIZE-2>TEAL-4HPOK<BR>(#008080)</FONT>
</TD>
<TD ALIGN-MIDDLE BGCOLOR-THISTLExFONT COLOR-BLACK
SIZ E-2>THI STL E -ЧЕ PTOflOllOX<BR>(#08BFD8) </FONT> </TDx/TR>
<TR> <TD ALIGN-MIDOLE BGCOLOR-TOMATO><FONT COLOR-BLACK
S I ZE-2>T0MAT0-TOMATHblH<BR>(#FF6347)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-TURQUOISExFONT COLOR-BLACK
SIZE-2>TURQUOISE-6HPI03A<BR>(#40EODO)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-VIOLETxFONT COLOR-BLACK
SIZE=2>VIOLET-ФИОЛЕТОВЫЙ<ВЙ>(#EE82EE)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-WHEATxFONT COLOR-BLACK
SIZE-2>WHEAT-nillEHHl|A<BR>(#F5DEB3)</FONT> </TDx/TR>
<TR> <TD ALIGN-MIDDLE BGCOLOR-WHITExFONT COLOR-BLACK
SIZE-2>WHITE-БЕЛЫЙ<ВЯ>(#FFFFFF)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-WHITESMOKExFONT COLOR-BLACK
SIZE-2>WHITESM0KE-flblM<BR>(#F5F5F5)</F0NT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-YELLOWxFONT COLOR-BLACK
SIZE-2>YELLOW-)KEfl^<BR>(#FFFFOO)</FONT> </TD>
<TD ALIGN-MIDDLE BGCOLOR-YELLOWGREENxFONT COLOR-BLACK SIZE-2>YELLOWGREENЖЕЛТО-ЗЕЛЁ ІІШ # - (#9ACD32) </FONT>
</TD></TRx/TBODYx/TABLEx/FONTx/PxP>&NBSP:</Px/FONTx/BODYx/HTML>
Подведем итоги
В этом уроке рассказано, как создать фон веб-страницы. В качестве фона можно
использовать рисунок или сделать фон однотонным. В конце урока приведен
листинг очень полезной для разработчиков веб-страниц программы, описываю­
щей 140 различных цветов с указанием их оригинальных названий и шестнадца­
теричных кодов в цветовой модели RG B.
Урок 5
Линии, точки и другие
объекты
УЙ
В этом уроке рассматриваются способы создания линий, кото­
рые могут стать украшением страниц, а также способы вставки
на веб-страницы кавычек, знаков сравнения и прочего, то есть
специальных символов. Кроме того, в конце урока описывают­
ся средства размещения на веб-страницах более сложных объ­
ектов, таких как Ja v a -апплеты, сценарии и прочее.
Горизонтальные линии
87
Горизонтальные линии
Для вставки горизонтальной линии используется тег <HR>. Это одинарный тег,
закрывающего тега он не имеет. По умолчанию линия является объемной
и с тенью.
Горизонтальные линии позволяют разделить длинный формально неограничен­
ный текст на отдельные разделы. Горизонтальные линии на веб-страницах игра­
ют такую же роль, как орнаментальные полосы в печатных изданиях.
Синтаксис:
<HR SIZE=number WIDTH=number|percent ALIGN=1eft|right(center N0SHADE>
Атрибуты:
О SIZE — толщина линии в пикселах;
О WIDTH — ширина линии в пикселах или процентах от ширины окна браузера;
О ALIGN — положение на экране (слева, по центру, справа);
О NOSHADE — линия представляется простой однотонной темной полосой.
Примеры горизонтальных линий различной толщины показаны на рис. 5.1 (лис­
тинг 5.1).
3 Красивые толсты е и тонкие яинии - Microsoft: Internet Explorer
іш
M i
шщт
шШ Ш Ш тжм
шшшшт
ШшжШж
шим
н
f/ A t
шшш
М
й
о
И
о
Я
О
О
О
И
!
ШШ.
шшшшж
кот*о*«р
Рис. 5.1. Горизонтальные линии различной толщины
Шит
88
Урок 5. Линии, точки и другие объекты
Листинг 5.1. Примеры создания горизонтальных линий различной толщины
<HTMLxHEADxTITLE>KpacHBbie толстые и тонкие линии</Т1Т1.Ех/НЕА0>
«щ Й Я
<B0DY BGCOLOR="#FF8COO" LEFTMARGIN=60xCENTERxH2>KpacnBbie толстые и тонкие линии </Н2>
<HR>
HORIZONTAL RULE - горизонтальная черта - одинарный тег.
<НЗ>ЗНАЧЕНИЕ SIZE = И WI0TH = </H3>SIZE = 40 WIDTH - &QU0T:
<HR ALI6N=CENTER WIDTH="20*" NOSHADE
SIZE = 30 WIDTH = &QU0T: 30 % &QU0T;
<HR ALIGN=CENTER WIDTH- 'З О Г NOSHADE
SIZE = 20 WIDTH = &QU0T; 40 * &QU0T;
<HR ALIGN=CENTER WIDTH="40*" NOSHADE
SIZE - 10 WIDTH = &QU0T: 50 % &QU0T:
<HR ALIGN=CENTER WIDTH="50r NOSHADE
SIZE = 5 WIDTH = &QU0T: 60 % &QU0T:
<HR ALIGN=CENTER WIDTH="60r NOSHADE
</CENTERx/BODYx/HTML>
Г
20 % &QU0T:
SIZE=40>
■
I
SIZE=30>
^
Щ
SIZE=20>
SIZE=10>
SIZE=5>
ү
' v? "Щ Щ Щ
Примеры коротких горизонтальных линий показаны на рис. 5.2 (листинг 5.2).
линии -Microsoft
0:\Книги\Учебныиtcypc\HTML\CD\rлава
Линин в виде фи
шштшшт:--. 'Шшштк
аишшяй
Ж
шҮУ
тмж
Рис. 5.2. Короткие горизонтальные линии
Листинг 5.2. Примеры создания коротких горизонтальных линий
<HTMLxHEADxTITLE>KopoT^e горизонтальные линии</Т1^Ех/НЕА0>
<B0DY BGCOLOR=#OOFFFF LEFTMARGIN=60>
<CENTER>
<Н2>Линии в виде фигур</Н2>
<BR>flaHHan линия есть совокупность символов подчеркивания
<HR WIDTH="4X" NOSHADE SIZE=40>
<HR WIDTH=” 3 r NOSHADE SIZE=30>
<HR WIDTH=“2*" NOSHADE SIZE=20>
<HR WIDTH»"1*" NOSHADE SIZE=10>
<HR WIDTH="0.53>" NOSHADE SIZE=5>
<HR WIDTH="0.3X" NOSHADE SIZE=3>
</CENTERx/BODYx/HTML>
Клавиатурные символы
89
Примеры горизонтальных линий, выровненных по правому краю, показаны на
рис. 5.3 (листинг 5.3).
1 Линии, выровненные по правому кран» -M icrosoft Internet Euptorer
Шя
Линии, выровненные по правому краю
т
■
Рис. 5.3. Горизонтальные линии, выровненные по правому краю страницы
Листинг 5.3. Примеры создания горизонтальных линий, выровненных по правому краю
страницы
<НЖхНЕА0хТ1ИЕ>Линии. выровненные по правому краю</ТITLE></HEAD>
<B0DY BGCOLOR=#OOFFFF LEFTMARGIN=60>
<Н2>Линии. выровненные no правому краю</Н2>
<HR WIDTH="4fc" SIZE-40 ALIGN=RIGHT>
<HR WIDTH="12?" SIZE=40 ALIGN=RIGHT>
<HR WIDTH="20X" SIZE=40 ALIGN=RIGHT>
<HR WIDTH="28X" SIZE=40 ALIGN=RIGHT>
<HR WIDTH-"36?" SIZE=40 ALIGN=RIGHT>
<HR WIDTM="44?” SIZE=40 ALIGN=RIGHT>
</BODYx/HTML>
Клавиатурные символы
Как показано на рис. 5.3, с помощью клавиатуры можно рисовать горизонталь­
ные линии (клавиша подчеркивания _), а также наклонные влево (\) и вправо
(/) линии, вертикальные линии (|). Сочетания таких линий позволяют получать
интересные рисунки.
На рис. 5.4 показан рисунок листа, выполненный с помощью клавиатурных сим­
волов (листинг 5.4).
Листинг 5.4. Пример создания листа с помощью символов клавиатуры
<НТМ1хНЕА0хТ1Т1_Е>Символы, введенные с клавиатуры</Т1ИЕх/НЕА0>
<B0DY BGCOLOR-"#7FFFOO" LEFTMARGIN-ЗОО
<Н5 ALIGN=CENTER>JtocT. <ВЯ>нарисованный с помощью символов. <BR>b веденных С «Яф ДОВД
</Н5>
<HlxPRE>
/|\
\\|//
\\\|///
\\\\|////
\\\|///
W W W (//////
\ \ \ \ \ I /////
\\\I///
05^0*ги\УчебныйwwrllllltVCDV'
/I \
\\І//
\\\І///
\\\М ////
\\\І///
W W W I ///✓/✓
W W V I/////
\\\І///
Рис. 5.4. Лист, нарисованный с помощью символов клавиатуры
На рис. 5.5 показан рисунок солнышка, выполненный с помощью клавиатурных
символов (листинг 5.5).
'.
ч В
Листинг 5.5. Пример рисования солнышка с помощью символов клавиатуры
<НЖхНЕАОхТІТі_Ё>Сопныіііко, построенное с помощью символов клавиатуры</Т1ИЕх/НЕА0>
<B00Y BGCOLOR="#90EE90" LEFTMARGIN-300x CENTER>Ohihwi]iko . <BR> построенное с помощью
символов. <BR>b веденных с клавиатуры</СЕМТЕР>
<PRE>
M il /
/
V
\_
I 1
_l
L
/\ /\
/II i\
</PREx/B00Yx/HTML>
¥’'' Н
Клавиатурные символы
91
Я ГОИНЫІЯКО, пос троенное г помощью символов клдвиотуры -Microsoft Internet frpierer
рм
построенноеЩ
;ш вм
ШІШШтЯНЯ
Ш
Ш
Ш
ШШШ
шинн
Рис. 5.5. Солнышко, нарисованное с помощью символов клавиатуры
На рис. 5.6 показан рисунок человечка, выполненный с помощью клавиатуры
(листинг 5.6).
З І Человечек - Microsoft Internet Explorer
Журйал
Я
Я
т
ШИИ
mmm
Мсмісигепьютер
Рис. 5.6. Лицо человека, нарисованное с помощью символов клавиатуры
Листинг 5.6. Пример рисования лица человека с помощью символов клавиатуры
<HTML><HEADxTITLE>4eflOBe4eK</TITLE>
</HEAD>
<B0DY BGCOLOR*DARKSEAGREENxPRE> <H3>
oooooo
о
о
о !
! о
о
о
0 **“* о
о
о
0000
</H3></PRE></B0DYx/HTML>
Ш
**
Как вы уже убедились, с помощью клавиатуры можно рисовать ^
бавные фигуры - дополнительные примеры имеются в листингах
Листинг 5.7. Пример рисования зверя с помощью символов клавиатуры
<HTMLxHEADxTITLE>3eepb</TITLEx/HEAD>
<B0DY BGCOLOR-OOFFFFx PREx H3>
/ /
I I <BR>
I I
/ /<BR>
/ /---- / /<BR>
{
}<BR>
( *
* )<BR>
{ о
} <BR>
{
<###>
}
</ Н З х / PREx/ BODY x / HTML>
Листинг 5.8. Пример рисования птицы с помощью специальных символбв
<HTMLxHEADxTITLE>flTHua</TITLEx/HEAD>
<B0DY BGCOLOR=FOFFFFx PRE>
&1t : &1t ;&gt:&gt: <BR>
&gt ■&gt ■&gt: &gt: &gt: &gt: &gt; &gt; &gt: &gt; &gt: &gt: &gt: &gt: &gt: &gt: &gt: <BR>
&gt:&gt:&gt;&gt:&gt:&gt:&gt;&gt:&gt: <BR>
&gt:&gt;&gt:&gt:&gt:&gt:
<BR>
&1t:&1t:&1t:&gt:&gt:&gt:
<BR>
& lt:& 1 t:& gt:& gt: <BR>
& g t;& lt: <BR>
</PREx/BODYx/HTML>
Специальные символы
могут размешаться кавычки, знаки сравнения, знаки параграфа
специальные символы. И даже
альным
Листинг 5.9. Пример создания веб-страницы со специальными символами
<HTML><HEAD><TITLE>Cneu символы</НЕА0></Т1Т1Е>
<B0DYxF0NT SIZEe2>
Амперсант &amp;<BR>
Знак меньше &lt;<BR>
Знак больше &gt:<BR>
Знак торговой марки &trade;<BR>
Неразрывный пробел &nbsp;<BR>
Цент &cent:<BR>
Фунт &pound:<BR>
II
|
Специальные символы
93
Знак валюты &curren;<BR>
Вертикальная черта &brvbar:<BR>
Знак параграфа &sect:<BR>
Знак копирайта &copy:<BR>
Прямая кавычка &quot;<BR>
Левая типографская кавычка &laquo;<BR>
Правая типографская кавычка &raquo;<BR>
Знак зарегистрировано &reg;<BR>
Знак градуса &deg;<BR>
Степеньі &supl;<BR>
Степень2 &sup2;<BR>
СтепеньЗ &sup3;<BR>
Знак микро &micro:<BR>
Знак абзаца &para;<BR>
Точка маркер &middot:<BR>
1/4 &fracl4:<BR>
1/2 &fracl2;<BR>
Знак умножения &times:<BR>
Знак деления & divide:
</F0NT></B0DY></HTML>
Спец символы < /№ АО
D: \Книги\Учебный курс\НТМ\СО\Г лава 5\listing5.1.htm
шшш
Амперсант &
Знак меньше <
Знак больше >
Знак торговой марки ™
Неразрывный пробел
Цент*
Фунт £
Знак валюты а
Вертикальная черта 2
Знак параграфа §
Знак копирайта ©
Прямая кавы чка"
Левая типографская кавычка «
Правая типографская кавычка »
............
Готово
Рис. 5.7. Веб-страница, содержащая специальные символы
Примеры открывающих и закрывающих тегов показаны на рис. 5.8 (лис­
тинг 5.10). Здесь же представлены надписи различного цвета.
Листинг 5.10. Пример создания веб-страницы, содержащей открывающие
и закрывающие теги
<НТМ1_> <НЕА0><Т1Т1Е>Цвет текста</Т1Т1Е>
</HEADxBODY BGC0L0R-WHITESM0KE>
<F0NT SIZE-5 C0L0R-MAR00N> FONT SIZE-5 &LT; FONT COLOR-MAROON &GT:<BR>
<F0NT C0L0R-NAVY> &LT; FONT COLOR-NAVY &GT:<BR>
<F0NT C0L0R-PURPLE> &LT; FONT COLOR-PURPLE SGT;<BR>
<F0NT C0L0R-FUCHSIA> ALT: FONT COLOR-FUCHSIA &GT:<BR>
<F0NT C0L0R-TEAL> &LT: FONT COLOR-TEAL &GT;<BR>
94
Урок 5. Линии, точки и другие объекты
<F0NT C0L0R=LIME> &LT: FONT COLOR-LIME &GT;<BR>
<F0NT C0L0R=AQUA> &LT; FONT COLOR=AQUA &GT:<BR>
<FONT C0L0R=0LIVE> &LT; FONT COLOR-OLIVE &GT:<BR>
<FONT C0L0R=PLUM> &LT; FONT C0L0R=PLUM &GT;<BR>
<FONT COLOR=BLACK> &LT; FONT COLOR-BLACK &GT:<BR>
<FONT COLOR=SILVER> &LT; FONT COLOR=SILVER &GT:<BR>
<FONT COLOR=ROYALBLUE> &LT; FONT COLOR=ROYALBLUE &GT.<BR>
<FONT COLOR=MEDIUMVIOLETRED> &LT: FONT COLOR-MEDIUMVIOLETRED &GT:<BR>
<FONT COLOR=SPRINGGREEN> &LT: FONT COLOR=SPRINGGREEN &GT:<BR>
<FONT SIZE=3 COLOR=GRAY> &LT:FONT COLOR-GRAY &GT:<BR>
</BODY> </HTML>
текста - M icrosoft In tern et ^ p fore*
■
В
0:\Ю*ги\Учебньй Kypc\HTML\CD\rnaea 5\faHngS.l .t o ......... .....
FO N T SIZ E- 5 < FO N T CO LO R= M ARO O N
< FO N T C O LO R = N A V Y >
< FO N T C O LO R = PU R PLE >
< FO N T C O LO R = FU C H S IA >
I FO N T C O LO R f T E A L >
Рис. 5.8. Веб-страница, содержащая открывающие и закрывающие теги
Информация об авторе документа
Для визуального выделения информации об авторе документа, например его ад­
реса электронной почты, служит тег <ADDRESS>. Синтаксис:
> j|
<ADDRESS> Адрес-автора </ADDRESS>
г '^ н М Н
Этот тег обычно указывается в конце документа. Содержимое тега выводится,
как правило, курсивом. Пример документа, содержащего адрес,' показан на
рис. 5.9 (листинг 5.11).
*1
Листинг 5.11. Пример создания документа, содержащего адрес
<HTML><HEAD><TITLE>Aflpec</TITLE></HEAD>
<B0DY backgroundss"000001,,>
<CENTER>
e
<ADDRESS> HTML- Учебный Kypc<BR> Комолова Нина Владимировна^> Северо*Западный институт
печ ат n<BR>
Санкт-Петербургского государственного университета технологии и дизайна<ВЯ>
ninapetergof@.mai 1. ru</ADDRESS>
</BODҮ></HTML>
Ш
г
95
Сценарии
3 Адрес - M icrosoft In tern et Explorer
ШШтть
шнек
| Ссылки
# § 0:\Книги\Учебный курс\НТМ\СО\Глам
H TM L- Учебный курс
Комолова Нина Владимировна
’еро-Западный и н сти тут печати
технологии и дизайна
n in a p e te rg o m a il ги
С ан кт
М > ч Ы ^ У ^ А У . У . У « ‘ » У в У в У . У в У . У , У Л '. V * V .
V
A
і
*
Ж
f
»11
■ ■ж • • • ж в
ЖІ•
•» •
%щ •
В
В % ЖВ * \1
ЖЦ ЖГ М І В В J
•• •,ЯҢ ДДП
P 1 К rV lO fcr f l J i r
J
И
р .Ч Ч - И N.hWJ.1
1» Ч и
ж >■ ■я •■» Ч ЯШ В щшВ а в жав •
•■
t В•а
Ч
-* •
жВ
i**ЯЛ
*в вЯ
*JLW
' в вВ•
в•в
•
в*•
»В•
•
•
•
ж
•
»1
# В_* ж В_ВЛ а • *
В в В Ві Р•
^Рi В
В.
•
В*^• в вvв•
В»
•в
Ш
В•
В•
тв.
Ж
Ж
В•
Ш
Ж
•
ж•
•
I •
*в•
>
В^В в в j■% %_Р* в »_• в в * в » а ж р^т_в а а а Щж а в • » »
■% в •в •
* * 9 в ва в а * % * L I %* l i t
* в
*Щ
ГА. ■1 » •.1».
•.В
9 * в В В Ив * t \ \ W 1 вЖ И В в В В 0 Л В. В“UЯ В V ШВ ■Л В Я ^ к * ВЛв«ж ИМИ Й у » В | ШФ ■ »Д
■ЩЛ аV * *■
• » •ЖЧ » • ж
’
1
•
Я
В
•
•
ж
ж
•
Р
%
9
ж
•
V
■
Ж
•
а
*
в
ж
Ш
Я
В
а
а
в
■
ящ
яЛ
■
%
В
■
в
«
•
ж
ж
1
1
•
|
В
А
V
■
»
•
t
•
*
>
а
КЯ
•
•
•
■
ж
ж
■
1
•
КЯГЩ
ж
■ ■ж ■шш ш■ ж щt
• * ■В B V » . •• • | В 1 A f ( ( к ж» « В #
а » ■V «ж жж mw *
. ж
^Ш
^
Ж_|П1ЯW
» IV U J
В
В wB I l (Г
НЯ •
Ш
• •• •1
/ГГ»
Щ
Щ
1
Г
■*
«^В ВВ
W •
• ( k v V (Вв в
■
^
M r ВV
* j•,
•
•^
0Л •* » Л ЛЛ В » » Ж» • « Жж •
Tf ф « »в1 » - ~»j
ял в
• \
f - ■■ ■■ • *
-> •,» » « • Ж » J
V .S V V 4 V ? J
JB В ж • I •J к
•Г*в ЖВ Ж
*
/ X w
W
J J
■
.1_г_ иЯЛЛ д
■■ •* ^ В
• жж• • в в ■
*
•
Я'ш Ш
^
Лщшяв 1
BV* <
B^BJBWВ1
V в В Я В 1 ■ ! » • • В ж » В ЖВ •ж 0 ■В • # В •• в В В .В • В^В W В В В ■*-р В * в
■
Tm f •
^ о
в в в ■» в в в ж .в «Jpj j »b^bj^l^lbо
С
«Ч
^в
■а алв^вдв^ві • г , Т Л* Ш
^в
івв
■> . •
М
Л
•
Ав жв
і і
У
Лв Н
1
%
ш
И
У
У
^В ж BLж 1 в / .I B I В Т ! t І
ж • » жВ » « » «
• Ш« ж *_• В » 4
«*ж
*
Iв
I г^ва
••в ж•в
в_
ж•
* *1 в В ш » • ••
11
» «-ВВ^
ж ж ж и Шд івв ш жв в X ж в и в в в в шя Я Шшf в вХщ> ■В в I F
Ш
ж
. жж К жж ж л ж а
в в в ж в i W B ^ i B B t B • в * В в. В в шЯ0 * -В в шв ж а * тш
*
*
/ y f f W Q W v W C T w O W w O C C C C Q y f f ic y # !
В ж ж ж.жж * А В Ж •ж
.ж ж ж • «
<ж жа. ж т ^ жж ж В ж. & лж В ж а ж в а а а ж жВ *.аж
Як 1ж« ж Ва В А ж
.В.В в в в Я Г
Ри с 5.9. Документ, содержащий адрес автора
java-апплеты
Для вставки в состав документа Java-aniuieTOB применяют тег <APPLET>. Java-anплеты — это программы на языке Java, которые загружаются и выполняются
браузером. Программы, переданные браузеру, придают странице интерактив­
ность, не свойственную страницам, написанным без использования апплетов.
Процесс вставки Java-aniuieTa состоит из двух этапов. Во-первых, необходимо
убедиться, что все классы и связанные файлы, такие как графические изображе­
ния и аудиофрагменты, размещены в доступном каталоге — чаще всего это под­
каталог classes каталога с HTM L-документами. Во-вторых, в исходный код стра­
ницы должен быть внедрен тег <APPLET>, а также все необходимые для его
работы атрибуты.
Тег <APPLET> имеет атрибуты CODEBASE, ARHIVE, CODE, OBJECT, ALT, NAME, WIDHT,
HEIGHT, ALIGN, TOP, MIDDLE, BOTTOM, LEFT, RIGHT, HSPACE, VSPACE. Он появился в H T M L
версии 3.2. Обязательным является либо атрибут CODE, либо CODEBASE. Тег
<PARAM>, включаемый в состав тега <APPLET>, должен предшествовать остально­
му содержимому.
Тег <APPLET> не рекомендован к применению. Вместо него желательно использо­
вать тег <0BJECT> (см. далее).
Сценарии
Для включения в документ сценария служит тег <SCRIPT>. Сценарии позволяют
придать документу дополнительные возможности, недостижимые средствами язы­
ка H TM L. Встраиваемые в документ объекты придают ему динамичность, инте­
рактивность, позволяют управлять содержимым страницы после ее загрузки.
Тег <SCRIPT> появился в H T M L версии 3.2. Он может повторяться сколь угодно
часто как в разделе <HEAD>, так и в разделе <B0DY> документа. Если задан атри-
бут SRC, браузер загружает ьнш ппп
тега <SCRIPT> интерпретируется как код сценария.
случае
CHARSET: Атрибут
Сшггаксис:
СНАЯ5ЕТ="набор_синволов"
Для указания набора символов м о^т ^ ^ я с п о ^ н ь ^ н а ч е н и я , угверИЛИ
А трибут TYPE. Атрибут TYPE определяет М ІМ Е-тш
пример, text/javascript). Синтаксис.
ТҮРЕ=”тип_содержимого"
А трибут LANGUAGE. Атрибут LANGUAGE определяет
щью зарезервированного имени. Синтаксис:
LANGUAGE=“flaHHHe“
Атрибут SRC задает
таксис:
SR O ”URL
II
Атрибут DEFER указывает браузеру на то, что сценар
е, предназначенные для отображения. В этом случае
ж и т ь пы ипл документа, не дожидаясь окончания выі
ния сценария.
Внешние объекты и комментарии
Для включения в состав документа внешнего объекта служит тег <0ВЗЕСТ>.
Внешним объектом может быть Ja v a - a n ro ie T , изображение или внешнее прило­
жение. Данный тег появился в H T M L версии 4.0. Тег может располагаться в раз­
деле <HEAD>, но при этом объект выводиться не будет, то есть в этот раздел мож­
но помещать только те объекты, которые не требуют отображения. Тег <ОВОЕСТ>
допускает вложение. Он имеет атрибуты ID, DECLARE, CLASSID, CODEBASE, DATA,
TYPE, CODETYPE, ARHIVE, STANDBY, HEIGHT, WIDHT, USEMAP, NAME, TABINDEX, ALIGN,
BORDER, HSPACE и VSPACE.
Ter <C0MMENT> используется для задания комментариев в документе. Пример:
<СОММЕМТ>Данный текст не выводится.</C0MMENT>
Листы стилей
Для включения в документ листов стилей используется тег <STYLE>. Он может
присутствовать только в H T M L-заголовке (внутри тега <HEAD>).
Обязательный атрибут <TYPE> указывает браузеру на использование листов сти­
лей (см. урок 17). Синтаксис:
<ТҮРЕ>*"Тип данных MIME"
Этот атрибут определяет M IM E -тип языка стилей (например, "text/css").
Подведем итоги
97
■
Атрибут <MEDIA> идентифицирует предполагаемую среду для воспроизведения
информации, заданной с помощью стилей, например:
mediа="screen |pri nt|a ll"
Подведем итоги
В этом уроке рассказано о теге <HR>, позволяющем чертить горизонтальные ли­
нии, параметры которых определяются атрибутами SIZE, WIDTH, ALIGN, NOSHADE.
Кроме того, показано, как с помощью тега <PRE> и клавиатуры можно создавать
незамысловатые рисунки. В конце урока описываются средства размещения
на веб-страницах более сложных объектов, таких как Java-anroieTbi, сценарии
и прочее.
Урок 6
Бегущая строка
ки
иваются средства создания бегущей строэффектных украшений веб-страницы.
Пример бегущей строки
99
Вставка бегущей строки на веб-страницу
Тег бегущей строки <MARQUEE> (от англ. marquee — большой навес, шатер) имеет
атрибуты ALIGN, BEHAVIOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, SCROLLAMOUNT.
О А трибут ALIG N . Атрибут ALIGN позволяет разместить текст в верхней (ТОР),
средней (MIDDLE) или нижней (B0TT0N) области бегущей строки.
О А трибут BEH A VIO R. Атрибут BEHAVIOR управляет поведением бегущей стро­
ки на экране:
□ SCROLL — текст пересекает экран (это значение задано по умолчанию);
□ SLIDE — текст выдвигается на экран и останавливается;
□ ALTERNATE — текст выдвигается на экран, а затем перемещается взад-вперед.
О А трибут BGCOLOR. Атрибут BGCOLOR задает цвет фона бегущей строки в мо­
дели R G B либо названиями цветов, либо шестнадцатеричным значением.
О А трибут D IRECTIO N. Атрибут DIRECTION задает направление движения текста:
□ LEFT — слева направо (это значение задано по умолчанию);
□ RIGHT — справа налево.
О А трибут HEIGHT. Атрибут HEIGHT управляет высотой строки в пикселах или
в процентах от высоты экрана (тогда к числу добавляется знак процента).
О А трибут WIDTH. Атрибут WIDTH управляет длиной строки в пикселах или
в процентах от ширины экрана (тогда к числу добавляется знак процента).
О А трибут HSPACE. Атрибут HSPACE позволяет задать ширину в пикселах ле­
вого и правого полей между областью бегущей строки и окружающим ее тек­
стом или графикой.
О Атрибут VSPACE. Атрибут VSPACE позволяет задать высоту в пикселах верх­
него и нижнего полей между областью бегущей строки и окружающим ее тек­
стом или графикой.
О А трибут LOOP. Атрибут LOOP задает количество проходов бегущей строки
по экрану. Если атрибут опущен, то строка будет появляться до тех пор, пока
страница находится на экране.
О А трибут SCROLLAMOUNT. Атрибут SCROLLAMOUNT управляет скоростью пе­
ремещения текста. Значение этого параметра, равное 1, означает самую ма­
ленькую скорость, значение 2000 — самую большую (в этом случае строка бу­
дет просто мелькать).
О А трибут SCRO LLD ELAY. Атрибут SCR0LLDELAY по своим функциям напоминает предыдущий и определяет время в миллисекундах до перерисовки тек­
ста бегущей строки.
Комбинация двух последних атрибутов позволяет подобрать оптимальную ско­
рость вывода бегущей строки.
Пример бегущей строки
Программа, показывающая движение бегущей строки, представлена в листинге
6.1, а результат работы этой программы показан на рис. 6.1.
Р:\Книги\Учобныйкурс\НТШ\СРІГ/чм 5\Мйпдб.1.hbn
‘ •
■ « _ •
- •
*
*
*K 4 3
бегущей строки обозначается s угловыхскобках
Шв есть аШИ&УГЫ
атрибут BEHAVIOR управляет эыводом бегущей строки на экран
SCROLL | ш ст псфвсекзет щ » (§тозначениеу-ггзисопеио поумолчание*)
SLIDE -текст выдвиодтся на экр&и иостанавливается
ALTERNATE - текст выдвигается на экран. а затем
g g g .и[gggPgft,
I f t l B • # •
'
.n/gЖ
"
■
Й
Й
З*
Рис. 6.1. Веб-страница с бегущей строкой
Листинг 6.1. Пример создания веб-страницы с бегущей строкой
<HTML>
11 ч < Щ р | Я |
<head>
■
</head>
’' ^
<TITLE> Бегущая строка</ТІИЕ>
Ш
'4 & і Э В Я І
Я
Я
<booy>
I Ф тШ Щ
<F0NT FACE-*ARIAL’ C0L0R-BLUE>
_
t:i з Щ Ц
Тег бегущей строки обозначается в угловых скобках английским словом MARQUEE <BR>
<MARQUEE BGCOLOR-RED VSPACE=5 WIDTH-80* HEIGHT=50 ALIGN-MIDDLE BEHAVIOR=SCROLL>
Есть ТЕГИ, а есть АТРИБУТЫ
• 'я
</MARQUEE> </FONT>
<F0NT FACE="ARIAL“ C0L0R-FFFFFF>
яШ Д
И
Д И
Атрибут ALIGN управляет размещением текста в верхней (ТОР), средней (MIDDLE) или нижней
(BOTTOM) области бегущей строки <BR>
<MARQUEE BGCOLOR-RED VSPACE-30 WIDTH-20* ALIGN-ВОПОМ BEHAVIOR-SLIDE>
Есть ТЕГИ, а есть АТРИБУТЫ
4 ‘/ л 1 8 | И И
</MARQUEE> </F0NT>
<F0NT FACE="ARIAL" C0L0R=FF44FF>
Атрибут BEHAVIOR управляет выводом бегущей строки на экран <BR>
SCROLL - текст пересекает экран (это значение установлено по умолчанию) <BR>
SLIDE - текст выдвигается на экран и останавливается <BR>
,, Ш И
ALTERNATE - текст выдвигается на экран, а затем перемещается взад и вперед <BR>
<MARQUEE BGCOLOR-AAAAAA VSPACE-20 WIDTH-50* ALIGN-ВОПОМ BEHAVIOR-ALTERNATE>
И
Есть ТЕГИ, а есть АТРИБУТЫ
"" "
</MARQUEE> </F0NT>
<F0NT FACE-"ARIAL" COLOR-OOOOOO»
.
Атрибут BGCOLOR управляет цветом фона бегущей строки <BR>
цвет задается в модели RGB <BR>
•
либо названием, либо шестнадцатеричным значением <BR>
. а?**3
<MARQUEE BGCOLOR-MAGENTA VSPACE-20 WIDTH-90* ALIGN-ТОР DIRECTION-RIGHT HEIGHT-15*>
Есть ТЕГИ, а есть АТРИБУТЫ
:
</MARQUEE> </F0NT>
1 .
<Р> Атрибут DIRECTION управляет направлением движения текста <BR>
Рисунок в качестве бегущей строки
101
LEFT - слева направо (задается по умолчанию). RIGHT - справа налево<В1*>
Атрибут HEIGHT управляет высотой строки <BR>
Высота строки может задаваться в пикселах <BR>
или в процентах от высоты экрана <BR>
(тогда к числу добавляется знак процента)
Атрибут WIDTH управляет шириной строки <BR>
Ширина строки может задаваться в пикселах <BR>
или в процентах от ширины экрана <BR>
(тогда к числу добавляется знак процента)
Атрибут HSPACE управляет шириной в пикселах <BR>
левого и правого полей между областью бегущей строки и окружающим ее текстом или
графикой <BR>
Атрибут VSPACE управляет высотой в пикселах <BR>
верхнего и нижнего полей между областью бегущей строки и окружающим ее текстом или
графикой <BR>
Этот атрибут успешно используется при размещении бегущей строки в таблице <BR>
Атрибут LOOP задает количество проходов текста по экрану <BR>
Если этот атрибут опущен, то бегущая строка будет двигаться до тех пор. пока страница
находится на экране <BR>
Атрибут SCROLLAMOUNT управляет скоростью перемещения текста <BR>
Значение этого параметра, равное 1. означает самую маленькую скорость, значение 2000 самую большую (в этом случае строка будет просто мелькать) <BR>
Атрибут SCR0LLDELAY по своим функциям напоминает предыдущий <BR>
и определяет время в миллисекундах до перерисовки текста бегущей c t p o k h <BR>
Комбинация двух последних атрибутов позволяет подобрать оптимальную скорость вывода
строки на экран.
</B0DY>
</HTML>
Рисунок в качестве бегущей строки
Бегущей строкой может быть не только текст, но и рисунок. Программа с графи­
ческой бегущей строкой представлена в листинге 6.2, а результат работы этой
программы показан на рис. 6.2. Рисунок для бегущей строки (в данном случае
файл Фон.діҒ) и код программы должны храниться в одном каталоге.
д Ьегуц ии рисунок - Micru%oft Internet Ікріогег
Рис. 6.2. Веб-страница с графической бегущей строкой
102
Урок б. Бегущая строка
Листинг 6.2. Пример создания веб-страницы с рисунком в качестве бегущей строки
<НТМ1хНЕА0хТПи>Бегущий рисунок</Т1Т1Ех/НЕА0>
<B00Y BACKGROUNO-'«OH.g1f'>
«MARQUEE SCROLLAMOUNT-10 BOROER-*0">
<1MG SRO " Велосипедист .gl f “x/MARQUEE>
</B00Yx/HTML>
^
-
- *
Ц Щ
• • - 'if!
§Й|
Подведем итоги
В этом уроке рассказано, как с помощью тега -MARQUEE, украсить веб слмницу
с ______ R H P im iK H пил и повеление бегущей строки определяет атрибу
WIDTH
VSPACE. SCROLLAMOUNT.
Урок
Списки
В этом уроке рассматриваются способы создания разнообраз­
ных списков.
■
Виды списков
Существует три основных ида
О нумерованный список;
О маркированный список;
^
О список определений.
Можно создавать вложенные списки, используя различные теги списков или по­
вторяя одни внутри других. Для это т просто необходимо разместить одну пару
тегов (открывающий и закрывающий) внутри другой.
,„
Нумерованные списки
В нумерованный список браузер автоматически вставляет номера элементов по
порядку. Это означает, что если удалить один или несколько элементов нумеро­
ванного списка, остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью парного тега <0L> (от англ. Ordered
List — нумерованный список). Каждый элемент списка начинается с тега <И>.
Пример нумерованного списка, в котором нумерация осуществляется по умолча­
нию, показан на рис. 7.1 (листинг 7.1).
ftf
Ъ и ум ср о м и и ь* список Microsoft Internet Ікрйиег
-
-
-
----------------------------------—
^
--- ---------
ят^т
0:^Сжги\Уч^»мйuypcVfTHLVCDV"»*
Протоколы и модели Н и тв р и ег-гя м в дв сп и *
Протокол - тто набор правил, регламвгтнрующ
1.
2.
3.
4.
3.
6.
7.
обмен ннформацнен
Модель клиент-сервер
Протокол TCP/IP (Transmission Control Protocol/Internet Protocol)
Протокол http (Hyper Text Transfer Protocol)
URL (Uniform Resource Locator) - уннфнцнрoa аннын уюпатель ресурса
Протокол FTP (File Transfer Protocol)
Microsoft Internet Explorer - самый популярный брауіер
Netscape Navifator - популярный браузер фирмы Netscape OL>
Рис. 7.1. Список с нумерацией, заданной по умолчанию
Листинг 7.1. Пример создания списка, нумерованного по умолчанию
<HTML><HEAO><TITLE> Нумерованный список</Т1Т1_Е></НЕА0>
<B0DY BGCOLOR - 'FLORALWHITE">
<H3> Протоколы и модели Интернет-взаимодействия <НЗ>
> ш |И И
Нумерованные списки
105
Протокол - это набор правил, регламентирующих обмен информацией между различными
устройствами, в частности между компьютерами.<BR><BR>
Веб-браузер - прикладная программа, которая отображает содержимое файлов, полученных
с локального или удаленного компьютера, в соответствии с инструкциями, включенными
в этот файл.
<ol>
.
|
f
<И>Модель клиент-сервер
<И>Протокол TCP/IP (Transmission Control Protocol/Internet Protocol)
<І_І>Протокол HTTP (Hyper Text Transfer Protocol)
<LI>URL(Uniform Resource Locator) - унифицированный указатель ресурса
<Л>Протокол FTP (F ile Transfer Protocol)
<LI>Microsoft In tern et Explorer - самый популярный браузер
<LI>Netscape Navigator - популярный браузер фирмы Netscape
</OLx/BODYx/HTML>
■
Ter <0L> может иметь атрибуты TYPE и START. Синтаксис:
<0L TYPE-AI a 111 i 11 START=n>
V*
..
Здесь:
О TYPE — символы списка:
□
□
□
□
□
А — прописные латинские буквы (А, В, С...);
а — строчные латинские буквы (а, Ь, с...);
I — большие римские цифры (I, II, III...);
i — маленькие римские цифры (i, ii, iii...);
1 — арабские цифры (1, 2, 3...);
О START=n — начальное значение списка.
Пример нумерованного списка с большими римскими цифрами и начальным
значением XLIX показан на рис. 7.2 (листинг 7.2).
| | С лисок с нумерацией и з больш их римских цифр - M tciosofl Internet
y O
w
C
P W
w
Щ C:\Nina\PITER\KH НТМІЛСОХГлам 7Vlisling7.2.htm
WWW - World Wide Web (Всемирная паутина) - одна из
доступных пользователям Интернета
Характеристики языка HTML
\W . Простота
АХ. Универсальность
AY. Совместимость
Интернет развивается с конца 1950-х годов
Рис. 7.2. Список с нумерацией из больших римских цифр
106
Урок 7. Списки
— —
Листинг 7.2. Пример создания списка с нумерацией из больших римских цифр
<HTML><HEAD> <TITLE> Список с нумерацией из больших римских цифр </Т1Т1_Е></НЁА0>
<BODY BGCOLOR=DARKSEAGREEN>
WWW - World Wide Web (Всемирная паутина) - одна из служб. <BR>
доступных пользователям Интернета<ВИ>
<BR>
Характеристики языка HTML:
<0L TYPE*A START=49>
<LI> Простота
<LI> Универсальность
<LI> Совместимость
</0L>
<BR>
Интернет развивается с конца 1950-х годов
</BODYx/HTML>
начальным
нием I показан на рис. 7.3 (листинг 7.3).
3
I
0 :\Книги \У че6н ы й Kypc\H TM L\C D \fя ю з 6 \Ь ^ івд 6 .2 .Ш й
*
_________- ------ -------------------
J A
V
A
j| | 0:\Книги\Уче6ный курс\НТМЦСО\Глава 6\|istin^.2.hbn
И іЬ е д с т а а л с н и :
щжтт т м т тй
Рис. 7.3. Список с нумерацией из прописных латинских букв
Листинг 7.3. Пример создания списка с нумерацией из прописных латинских букв
<HTML><HEAD> <TITLE> </TITLE></HEAD>
<B0DY BGC0L0ReCHARTREUSE>
Концептуальная модель Web<BR>
________________ __ _______________________________________________ <BR>
WWW - это не только текст и изображение, это еще и поведение
<0L TYPE-A START=9>
<LI> Представление
<LI> Структура
<LI> Поведение
</0L>
107
Нумерованные списки
__________________________ __ _________________________<BR>
IAB (Internet Advisory Board) - координационный совет Интернета
</BODYx/HTHL>
Пример списка с нумерацией из строчных латинских букв и начальным значени­
ем е показан на рис. 7.4 (листинг 7.4).
3 D:\Книги\Учебный курс\НТМ 1\СО\Глава b\l»stinq&.2.htm - M icrosoft In te rn e t btphrt*
0:УСнити\Учебный Kypc\HTML\CD\Tлава 6\ksting6.2.htm
Концептуальная модель Web
Получение заказа на выполнение проекта
Работа с заказчиком
Взаи модействие с:;1 |Ш |£ ав ителем заказчі
«
* Vt
% *
»m
\m
” —
~
% *
'
% *
*
V '
*
v <» *. . »
* 4
'•
.
»
■ •
t
«
•
»
% *
»
•
*r «
” ■®
*
•
^
♦ »
■ *
•
*
'
*
*
•
»
*J b
^.•
• * .*
'
*
•
* > * * * »* > * * *
"
*
* * .*
•.
*
* '»
•
% * < * f*
* * * .* *
аудитории
Рис. 7.4. Список с нумерацией из арочных латинских букв
Листинг 7.4. Пример создания списка с нумерацией из арочных латинских букв
<HTMI_xHEADxT I JL E x /T I TLEx/ HEAD>
<B0DY BGCOLOR-КНАК^Концептуальная модель Web
<BR>__________________________ ___
. Этап, предшествующий разработке
<0L type-а s ta rte5>
<И>Получение заказа на выполнение проекта
<И>Работа с заказчиком
<1Л>Взаимодействие с представителем заказчика
<11>Мозговой штурм
<LIОпределение предполагаемой аудитории
<LIОпределение масштаба Web-узла
<И>Анализ информации, представленной конкурентами
<1Л>Бюджет и время выполнения проекта
<И>Переговоры и подписание договора
<BR>
,
, > t;»
i
</01>
____________________________ ______________________________ - _____________________________________
ISOC (In te rn e t So cie ty) - неправительственная некоммерческая организация. <BR>
специально созданная для поддержки и развития Интернета
</B0DY></HTML>
Пример списка с нумерацией из маленьких римских цифр и начальным значени
ем ill показан на рис. 7.5 (листинг 7.5).
веб-страницы
Веб-дизайнер
Главный конструктор
Веб-мастер
Аудиодиэайнер
Видеодизайнер
Аниматор
Программист
Авторы текстов
Специалист, оценивающий применимость узла
Рис. 7.5. Список с нумерацией из маленьких римских цифр
Листинг 7.5. Пример создания списка с нумерацией из маленьких римских цифр
<HTMLxHEAD><TITLE>CnncoK с нумерацией из маленьких римских цифр</Т1ИЕ></НЕА0>
<B0DY BGC0L0R=H0NEYDEW>y4acTHHKn разработки веб-страницы
<BR>____
<0L type=i start=3>
<LI> Веб-дизайнер
<LI> Главный конструктор
<LI> Веб-мастер
<LI> Аудиодизайнер
<LI> Видеодизайнер
<LI> Аниматор
<LI> Программист
<LI> Авторы текстов
<LI> Специалист, оценивающий применимость узла
<LI> Руководитель проекта</01_> .
Щ
у
Д
Ю
н
і И
И
И
И
И
Я
Я
Ш
я
^
Я
Я
И
И
И
<BR>
'
-
ЦЮ ИН
І І
. _________________________________<
B
R
>
IETF - международная организация, в которую входят специалисты по сетевым технологиям
</B0DY></HTML>
цифр и начальным
зан на рис. 7.6 (листинг 7.6).
Листинг 7.6. Пример создания списка с нумерацией из арабских цифр и начальным
значением 11
,
<HTML><HEAD><TITLЕ>Языки ра з метkh</TITLE></MEAD>
<B0DY BGC0L0R=H0CCAS I Ы>Яз ыки разметки веб-страницы^>
<BR>
<0L TYPE-1 START*11>
<LI> HTML (Hyper Text Markup Language)
<Ll> SGML (Standard Generalized Markup Language)
<LI> XML
^
Маркированные списки
109
<LI> XHTML
<LI> Dynamic HTML</OL>
'
_____________________________________________________<BR>
M ozilla - рабочая группа в составе Netscape
</BODYx/HTML>
J
Языки разметки - M icrosoft In tern et Скріогег
V W
W
W
V *
<*сылга*
*1
Modi*
•
Рис. 7.6. Список с нумерацией из арабских цифр и начальным значением 11
Маркированные списки
Маркированные списки создаются с помощью парного тега <UL> (от англ. Unordered List - ненумерованный список). Каждый элемент списка начинается
с тега <LI> (о т англ. List Item - элемент списка). Тег <UL> может иметь атрибут
TYPE:
TYPE-d1sc Icircle|sq u are»
Атрибут TYPE определяет внешний вид маркера. Доступные значения:
<UL
О disc — закрашенные круглые маркеры (вариант, заданный по умолчанию);
О circle — незакрашенные круглые маркеры;
О square — квадратные маркеры.
Пример маркированного списка с параметрами, заданными по умолчанию, пока­
зан на рис. 7.7 (листинг 7.7).
Листинг 7.7. Пример создания маркированного списка с параметрами, заданными
по умолчанию
<НТМ1.хНЕА0хТ1Т1Е>Инструиентальные средства</Т1Т1Е></НЕА0>
<B0DY BGCOLOR-SNOW>HHCTpyHeHTanbHwe средства<ВЯ>
<BR>
<LI>HTML-редакторы
<LI>WYSIWYG-реда кторы
<LI>Adobe GoLive
<LI>Hicrosoft FrontPage
<LMacromedia Dreamweaver
</ul> _ _ _ „
Java - язык програимирования<ВВ>
Ja v a S c rip t - интерпретируемый язык, предназначенный для написания сценариев
</BODYx/HTML>
0:\Книги\Учебный курс\НТМЦСО\Глава 6ytong6.2.hbn
HTML-редакторы
WYSIWYG-редакторы
Adobe Golive
Microsoft Frontpage
Macromedia Dreamweaver
Java - язык программирования
JavaScript - интерпретируемый язык, предназначенный для написания сценариев
Рис. 7.7. Маркированный список с параметрами, заданными по умолчанию
Пример списка с маркерами в виде квадратов показан на рис. 7.8 (листинг 7.8).
Листинг 7.8. Пример создания списка с маркерами в виде квадратов
<HTMl><H£AD><TI TL Е>Элемент ы дизайна</ТіиЕх/НЕА0>
<B0DY BGCOLOR^PALETURQUOI $Е>Элементы дизaйнa<BR>
___ _________________________ ___ __________________________________<BR>
<UL TYPE-square>
<11>Пространство
<11>Форнат
<И>Фрагиеит
<И>0снова
<И>Линия
<1>Фориа
<11>Фигура
i l l
<ii>
■***
'
*
1
'
' '•
Текстура <LI>
Цвет</1Д.>
<BR>
Дизайн - это организация визуальной информации
</BODYx/HTML>
Маркированные списки
in
1 Элементы дизайна - M icrosoft Internet; Explorer
XcSssSk
уда
ШШЖ
Рис. 7.8. Список с маркерами в виде квадратов
*
Пример списка с незакрашенными круглыми маркерами показан на рис. 7.9
(листинг 7.9).
0:\Книги\Учебный курс\НТМЦСЕ)\Глава 6\kting6.2.htm
Переход
Принципы веб-дизайна
Элементы дизайна
Удобство восприятия
Единство стиля
Контрасты
Простота
Наличие структуры
Акценты
Мойкомплот
Рис. 7.9. Список с незакрашенными круглыми маркерами
шлеи
112
Урок 7. Списки
Листинг 7.9. Пример создания списка с незакрашенными круглыми маркерами
<НТМ1_хНЕА0хТ 1Т1_Е>Принципы веб-дизайна</Т1ЛЕ></НЕА0>
<B0DY BGCOLOR-PALEGOLDENROOnpHHunnw веб-дизайна<ВН>
<UL type=circ1e>
<11>Элеиенты дизайна
<И>Удобство восприятия
<L ^Согласованность
<И>Единство стиля
<1>Контрасты
<И>Простота
<1>Наличие структуры
<И>Акценты </UL>
Дизайнер должен предвидеть
<BR>
<BR>
как будет воспринята информация пользователем
</BODYx/HTML>
Вложенные списки
Примеры вложенных списков показаны на рис. 7.10 (листинг 7.10) и 7.11 (листинг7.11).
Я Список coipw w M M -MictosoH Internet Емріоге»
M W y
г,лМ м
С гИ йЭ О й
£\N*»VPITER\Km HTMLACDVDiae* 74abng7 lOWm
Северо-Западный институт печати
Санкт-Петербургский государственный университет
технологии и дизайна
Единственный в Северо-Западном регионе Россш государственный
специалюированный вуз
Факультет
о Издательского дела, рекламы и книжной торговли
о Полиграфических технологий и оборудования
о Заочное отделение
Специальности
■ Издательское дело и редактирование
!
if ii
і
К Ф & Ф А '-
I
Рис. 7.10. Вложенные списки
Листинг 7.10. Пример создания вложенных списков
<HTML><HEADxTITLE> Список сотрудников </TlTLEx/HEAD>
<B0DY BGCOLOR - THISTLE>
.
<H2> Северо-Западный институт печати </Н2>
<НЗ> Санкт-Петербургский государственный университет технологии и дизайна</НЗ>
<Р> Единственный в Северо-Западной регионе России государственный специализированный
!
вуз </Р>
Вложенные списки
<0L>
<LI> Факультет
<UL>
<LI> Издательское дело, реклама и книжная торговля
<LI> Полиграфические технологии и оборудование
<LI> Заочное отделение
</l)L>
<LI> Специальности
<UL Type=square>
<LI> Издательское дело и редактирование
<LI> Книгораспространение
<LI> Реклама
<LI> Графика
<LI> Технология полиграфического производства
<1_1> Полиграфические машины и автоматизированные комплексы
<LI> Автоматизация технологических процессов и производств
</UL>
</0L>
</B0DY>
</HTHL>
3 Пример вложенных списков - M icrosoft Interne* Fxploief
-
---
-1
--m» г « « і
Пункт 1
1. Пункті.1
2. Пункт 1.2
Пункт2
1. Пункт2.1
2. Пункт 2.2
ПунктЗ
1. Пункт 3.1
2. Пункт 3.2
Рис. 7.11. Еще один пример вложенных списков
Листинг 7.11. Еще один пример создания вложенных списков
<HTMLxHEADxTIUE> Пример вложенных списков </TITLEx/HEAD>
<B00Y BGCOLOR*DODGERBLUE>
<UL>
<LI>
<0L>
<LI>
<LI>
<LI>
Пункт 1
Пункт 1.1
Пункт 1.2</Llx/0L>
Пункт 2
<0L>
<LI> Пункт 2.1
ч
**•
113
114
Урок 7. Списки
<LI> Пункт 2.2</LI></0L>
<LI> Пункт 3
<0L>
<LI> Пункт 3.1
<LI> Пункт 3 . 2</LI></0 L></LIx/UL>
</B0DY></HTML>
Списки определении
Список определений состоит из специальным образом расположенных терминов
и их описаний (определений). Для создания списков определений на веб-стра­
ницах используются теги <DL>, <DT> и <DD>.
О Тег <DL>. Парный тег <DL> (от англ. Definition List — список определений)
начинает список определений. Он включает в себя теги <DT> (помечает тер­
мин) и <DD> (помечает описание термина). Списки определении часто ис­
пользуют в научно-технических и учебных изданиях, оформляя с их помо­
щью глоссарии. Тег <DL> имеет атрибуты COMPACT (современными браузерами
не поддерживается), CLASS, ID, LANG и STYLE.
Если определяемые термины короткие, используется атрибут COMPACT, кото­
рый предназначен для вывода элементов списка в компактной форме (с умень­
шенным кеглем и расстоянием между строками):
'
-
<DL COMPACT». . . </DL>
Атрибут COMPACT не имеет значений, синтаксис остальных атрибутов:
CLASS="Стилевой класс"
ІЕКИ н я"
LANG-"Код языка”
STYLE-''Определение встроенного стиля”
' |
‘
У |г •
'
О Тег <DT>. Тег <DT> (от англ. Definition Term — определяемое слово, термин)
представляет собой блочный непарный тег, который помечает текст термина
в списке определений. Атрибуты тега <DT>:
ГЙ?;
CLASS-"C™neBOi* класс”
Ю-”Иня"
LANG-''Код языка”
^ |
О Тег <DD>. Тег <DD> (от англ. Definition Description — описание определяемо­
го термина) представляет собой блочный непарный тег, который помечает
текст определения в списке определений. Атрибуты тега <DD>:
CLASS-"CTnneeovi класс"
Ю“ "Имя”
LANG-” Kofl языка"
STYLE-''Олределение встроенного стиля”
•
,
*
Пример списка определений показан на рис. 7.12 (листинг 7.12).
Листинг 7.12. Пример создания списка определений
<Н1ЖхНЕА0хТ1Т1Е>Введение в Интернет</Т1Т1Ех/НЕА0>
<B0DY BGCOLOR-LEMONCHIFF0N>
<DL>
-*
—
I
■
.
Списки определений
115
<ОТ>Интернет
<DD>‘ совокупность сетей, применяющих единый протокол обмена (точнее, обширное
семейство из сотен протоколов) для передачи информации</01_>
<DL>
<ОТ>Локальная сеть
<DD>- соединение нескольких компьютеров при помощи технических и программных средств,
которые позволяют объединять файловые системы входящих в нее компьютеров </DL>
<DL>
<ОТ>Глобальная сеть
<0 р>- такое соединение компьютеров, при котором допускается использование информации,
физически находящейся на других компьютерах сети (однако пользовательским программам
не предоставляется непосредственный доступ к файловой системе других компьютеров)</DL>
<
D
L
>
Ш
Щ
<ОТ>Провайдер сетевых услуг
<DD>- владелец конкретной сети, с которой клиент находится в юридических
отношениях</01_>
<DL>
<0Т>Бод
<DD>- бит в секунду - единица измерения пропускной способности канала - основная
: ’ І
-
І
характеристика канала связи</01_>
<DL>
<DT>rипертекст
<DD>- информационная структура, обеспечивающая навигацию посредством гипертекстовых
ссылок</01>
<DL>
<ОТ>Гипертекстовая ссылка
<DD>- фрагмент текста или изображение, при активизации которого отображается документ.
связанный со ссылкой,</01_>
</B00Y></HTML>
3
В ве д ен и е в И н те р н е т - Microsoft: Internet Еирадгег
курс\НТМ\СО\Глава 6\fetlng6.2.hbn
Интернет
сетей, применяющих единый протокол обмена (точнее, обширное семейство из сотен
протоколов) для передачи информации
Локальная сеть
- соединение нескольких компьютеров при помощи технических и программных средств, которые позволяют
вбъеиинятъ (кайловые системы входящих в нее компьютеров
дер сетевых услуг
владелец конкретной сети, с которой клиент находится в юридических отношениях
бит в секунду - единица измерения пропускной способности канала - основная характеристика канала сшей
Мойкоипьютер
Рис. 7.12. Список определений
116
Урок 7. Списки
В заключение этого урока рассмотрим еще один пример нескольких списков
с разными маркерами, который показан на рис. 7.13 (листинг 7.13).
один пример списков - Microsoft Internet Ехркмег
• Метод мозгового штурма
■ Метод моментов
Метод системологии
Метод системной ориентации
Метод проб и ошибок
Метод попарного сравнения
Метод профильного анализа
Метод Данахера-Руста
Рис. 7.13. Списки с разными маркерами
Листинг 7.13. Пример создания списков с разными маркерами
<HTMLxHEADxTITLE>Euie один пример списков</ТГПЕ>
</HEAD>
<B0DY bgColог-АВСАВС>
<d1>
І
й| >
’
___ <И>Метод мозгового штурма
___ <1i type=square> Метод моментов
«/Ц]>
.
;*
<о1>
___ <1i> Метод системологии
___ <Ц> Метод системной ориентации
___ <11 value-4> Метод проб и ошибок
</ol>
.i •
fd"А
$»•■
<ol type-A>
___ <11> Метод попарного сравнения
___ <1i> Метод профильного анализа
___ <11> Метод Данахера-Руста
</ОІ>
•
. г
v-y
..
•.
‘
</BODYx/HTML>
Помимо описанных в этом уроке, для создания логически связанных списков
можно использовать теги <MENU> и <DIR>.
О Синтаксис тега <MENU>:
<MENU><LI> элемент списка <LI> элемент списка </MENU>
О Синтаксис тега <DIR>:
<DIRxLI> элемент списка <LI> элемент списка </DIR>
Подведем итоги
117
Подведем итоги
В этом уроке рассмотрены способы создания разнообразных списков, в частно­
сти нумерованных списков (с арабскими и римскими цифрами), маркированных
списков (с маркерами в виде кругов и квадратов) и списков определений. Допус­
кается создание вложенных списков.
Урок 8
Таблицы
В этом уроке рассматриваются методы работы с таблицами,
которые в Н Т М L-доку ментах использую тся не только сами
по себе, но и с целью точного позиционирования фрагментов
текста и изображений друг относительно друга.
Основные теги таблиц
119
Основные теги таблиц
Ячейки таблиц в языке H T M L могут содержать любые H T M L-элементы, в том
числе заголовки, списки, текстовые абзацы, графику, а также элементы форм.
к
Создание таблиц
Основным тегом, описывающим таблицу, является парный тег <TABLE>. Все эле­
менты таблицы должны находиться внутри тегов <TABLE> и </TABLE>. По умолча­
нию таблица не имеет обрамления и разделителей. Обрамление добавляется ат­
рибутом BORDER. Размер рамки может быть фиксированным или автоматически
согласовываться с размерами окна просмотра браузера и размерами текста и ри­
сунков в ячейках. Помимо своего естественного назначения (упорядочения тек­
стовой информации), таблицы позволяют решать чисто дизайнерские задачи:
выравнивать части фрагментов страниц друг относительно друга, размещать ря­
дом рисунки и текст, управлять цветовым оформлением, разбивать текст на
столбцы и т. д.
Тег <TABLE> имеет атрибуты ALIGN, BORDER, BACKGROUND, BGCOLOR, BORDERCOLOR,
CELLPADDING, CELLSPACING, HSPACE, SPACE, COLSPEC, WIDTH.
#
О Атрибут ALIGN. Если атрибут ALIGN располагается внутри тегов <CAPTI0N>
и </CAPTI0N>, он определяет положение подписи таблицы и может принимать
значения ТОР (сверху, вариант заданный по умолчанию) и BOTTOM (снизу).
Если атрибут ALIGN встречается внутри тегов <TR>...</TR>, <ТН>...</ТН> или
<TD>...</TD>, он управляет выравниванием данных в ячейках по горизонтали
и может принимать значения LEFT (слева), RIGHT (справа) или CENTER (по цен­
тру).
О Атрибут BORDER. Атрибут BORDER определяет вид границ таблицы. Если
да н н ы й атрибут присутствует, граница таблицы прорисовывается для всех
ячеек и для таблицы в целом. Атрибут BORDER может принимать числовые
значения, определяющие толщину границы, например:
B0RDER-3
О Атрибут BACKGROUND. Атрибут BACKGROUND позволяет создать фоновое
изображение для всей таблицы:
BACKGROUND = URL
О Атрибут BGCOLOR. Атрибут BGCOLOR задает фоновый цвет.
О Атрибут BORDERCOLOR. Атрибут BORDERCOLOR задает цвет рамки. Исполь­
зуется только с атрибутом BORDER, например:
«TABLE BORDER-’ число" BORDERCOLOR-“цвет">
О Атрибут CELLPADDING. Атрибут CELLPADDING определяет расстояние от
границ ячейки до ее содержимого в пикселах.
О Атрибут CELLSPACING. Атрибут CELLSPACING определяет расстояние между
ячейками в пикселах.
О Атрибут HSPACE. Атрибут HSPACE задает свободное пространство слева и спра­
ва от таблицы в пикселах.
120
Уроке. Таблицы
О Атрибут VSPACE. Атрибут VSPACE задает свободное пространство сверху
и снизу от таблицы в пикселах.
* Щ рИ ^
:
О Атрибут COLSPEC. Атрибут C0LSPEC позволяет создать столбцы фиксиро­
ванной ширины. Значение ширины задается либо в символах, либо в процен­
тах, например:
C0LSPEC-n2 0 r
\
. ' « 11
'
О Атрибут WIDTH. Атрибут WIDTH определяет ширину таблицы. Значение ши­
рины задается либо в пикселах, либо в процентах от текущей ширины окна
браузера, например:
WIDTH-256
WIDTH-100*
'
'?■ * 4
Если вводимый текст не помещается в ячейку, то в нее с помощью символов &nbsp
вводят неразрывный пробел. Это необходимо для прорисовки сетки таблицы.
Создание строк и столбцов таблицы
Для создания строк и столбцов таблицы служат парные теги <TR> и <C0L>.
Тег <TR> (от англ. Table Row — строка таблицы) задает строку таблицы. Количе­
ство строк определяется количеством встречающихся пар тегов <TR> и </TR>.
Строки могут иметь атрибуты ALIGN (выравнивание по горизонтали) и VALIGN
(выравнивание по вертикали).
Тег <C0L> (от англ. Column — столбец) используется для задания столбцов таб­
лицы и может иметь атрибуты WIDTH, BGCOLOR, ALIGN, VALIGN и ID.
О Атрибут WIDTH. Атрибут WIDTH задает ширину ячеек в столбце:
<C0L ИШТН=число>
О Атрибут BGCOLOR. Атрибут BGCOLOR задает цвет фона ячеек:
<C0L B6C0L0R=uBeT>
I
:
г
О Атрибут ALIGN. Атрибут ALIGN задает режим горизонтального выравнива­
ния содержимого внутри ячейки. Он может принимать значения LEFT (влево),
CENTER (по центру) и RIGHT (вправо), например:
<C0L ALIGN=3Ha4eHMe>
‘ <•'
О Атрибут VALIGN. Атрибут VALIGN задает режим вертикального выравнива­
ния содержимого внутри ячейки. Он может принимать значения MIDDLE (по
середине) и ТОР (вверх), например:
<C0L VALIGN-3 Ha4eHMe>
.
.
,
О Атрибут ID. Атрибут ID задает имя для ссылки, например:
<C0L Ш*имя>
“ .
§ * «'■ К •;.*#? ш
Создание ячеек таблицы
Для создания ячейки таблицы служит парный тег <TD> (от англ. Table Data —
табличные данные). Ячейка таблицы может быть описана только внутри строки
таблицы. Каждая ячейка должна быть пронумерована номером столбца, к кото­
рому она относится. Если в строке для некоторых столбцов отсутствует одна или
несколько ячеек, браузер отображает пустую ячейку. Расположение данных
Теги группирования элементов таблиц
121
в ячейке по умолчанию определяется атрибутами ALIGN=LEFT и VALIGN*=MIDDLE.
ДаЦное расположение может быть изменено как на уровне описания строки, так
и на уровне описания ячейки.
Создание заголовка и подписи таблицы
Для создания заголовка таблицы используется парный тег <ТН> (от англ. Table
Head — заголовок таблицы). Ячейка заголовка таблицы имеет ширину всей таб­
лицы. Текст в данной ячейке имеет атрибуты BOLD и ALIGN=CENTER.
Для создания подписи таблицы используется парный тег <CAPTI0N> (от англ.
caption — подпись). Тег <CAPTI0N> должен присутствовать внутри тегов <TABLE>
и <ДАВ1.Е>, но вне описания строки или ячейки. Атрибут ALIGN определяет, где
будет находиться подпись. По умолчанию атрибут ALIGN имеет значение ТОР
(сверху), но может быть установлен равным BOTTOM (снизу). Подпись всегда
центрирована в рамках таблицы по горизонтали.
Теги группирования элементов таблиц
Для группирования элементов таблиц служат теги <C0LGR0UP>, <TB0DY> и <TF00T>.
Группирование столбцов таблицы
Тег <C0LGR0UP> используется с целью группирования столбцов таблицы и может
иметь атрибуты BGCOLOR, ALIGN, VALIGN, SPAN, WIDTH, ID.
О Атрибут BGCOLOR. Атрибут BGCOLOR задает цвет фона ячеек, например:
<C0LGR0UP BGC0L0R=ueeT>
О Атрибут ALIGN. Атрибут ALIGN задает режим горизонтального выравнива­
ния содержимого внутри ячейки. Он может принимать значения LEFT (влево),
CENTER (по центру) и RIGHT (вправо), например:
<C0LGR0UP ALIGN-3Ha4eHHe>
О Атрибут VALIGN. Атрибут VALIGN задает режим вертикального выравнива­
ния содержимого внутри ячейки. Он может принимать значения MIDDLE (по
середине) и ТОР (вверх), например:
<C0LGR0UP VALIGN-3Ha4etwe>
О Атрибут SPAN. Атрибут SPAN задает количество столбцов в группе, например:
<C0LGR0UP SPAN-4HOO>
О Атрибут WIDTH. Атрибут WIDTH задает ширину ячеек в столбцах, например:
<C0LGR0UP И10ТН-число>
О Атрибут ID. Атрибут ID задает имя для ссылки, например:
<C0LGR0UP Ю-иня>
Группирование строк таблицы
Для создания логически связанных групп строк в теле таблицы используется тег
<TB0DY>, например;
122
Урок 8. Таблицы
<TBODY><TRxTD>. . . <TD>.. ,</TB0DY>
^ .
•
У тега <TB0DY> есть атрибуты BGCOLOR, ALIGN, VALIGN, которые имеют тот же
смысл, что и одноименные атрибуты тега <C0LGR0UP>.
Для логического группирования строк в верхней части таблицы (то есть для соз­
дания верхней шапки таблицы) используется тег <THEAD>, например:
<THEAD><TR><TD>...<TD>...</THEAD> j
>,, , a.
У тега <THEAD> есть атрибуты BGCOLOR, ALIGN, VALIGN, ID, которые имеют тот же
смысл, что и одноименные атрибуты тега <C0LGR0UP>.
для
дания нижней шапки таблицы) используется тег <TF00T>, например:
<TF00T><TR><TD>. . . <TD>. . . </THEAD>
У тега <TF00T> есть атрибуты BGCOLOR, ALIGN, VALIGN, ID, которые имеют тот же
смысл, что и одноименные атрибуты тега <C0LGR0UP>.
Основные атрибуты элементов таблицы
Ниже перечислены основные атрибуты элементов таблиц. С некоторыми из них
мы уже познакомились при изучении тегов, применяемых при создании таблиц,
с другим познакомимся в этом разделе.
О Атрибут A LIG N . Атрибут ALIGN управляет выравниванием содержимого ячеек.
Допустимые значения LEFT (влево), RIGHT (вправо) и CENTER (по центру).
О Атрибут BACKGROUND. Атрибут BACKGROUND задает фоновое изображение
для ячеек строки:
v ' ’
BACKGR0UND4JRL
.. . _ .
:
О Атрибут BGCOLOR. Атрибут BGCOLOR задает фоновый цвет для ячеек
строки.
v;. . ^ iW. f ^ ^
О Атрибут BORDER. Атрибут BORDER задает толщину рамки, обрамляющей
ячейки строки. Нулевое значение данного атрибута означает отсутствие обрамления. ‘
. ,
-, « 1
О Атрибут VALIGN Атрибут VALIGN встречается внутри тегов <TR>, <ТН> и <TD>.
Он определяет вертикальное выравнивание данных в ячейках. Доступные
значения ТОР (вверху), BOTTOM (внизу), CENTER (по центру), MIDDLE (по сере­
дине) и BASELINE (по базовой линии).
О Атрибут NOWRAP. Атрибут N0WRAP говорит о том, что данные в ячейке не
могут логически разбиваться на строки и должны быть представлены одной
g •V ЩШ ’ V / . , ч./ Щ й ІІІІ
О Атрибут COLSPAN. Атрибут C0LSPAN указывает, какое количество ячеек бу­
дет объединено по горизонтали с указанной ячейкой. По умолчанию значение
этого атрибута равно 1.
, \
,
|5j *
О Атрибут ROWSPAN. Атрибут R0WSPAN указывает, какое количество ячеек
будет объединено по вертикали с указанной ячейкой. По умолчанию значе­
ние этого атрибута равно 1.
.
строкой.
Примеры таблиц
123
О Атрибут RULES. Атрибут RULES определяет правила вывода линий между
ячейками, например:
<TABLE RULES«ALL>
Доступные значения:
□ NONE — нет линий (это значение используется по умолчанию);
□ GROUPS — линии отображаются только между группами строк (которые за­
даются тегами <THEAD>, <TF00T> и <TB0DY>) или группами столбцов (кото­
рые задаются тегами <C0LGR0UP и <C0L>);
□ ROWS — линии отображаются только между строками;
□ C0LS — линии отображаются только между столбцами;
□ ALL — линии отображаются между строками и столбцами.
О Атрибут FRAME. Атрибут FRAME указывает, какие стороны фрейма, окру­
жающего таблицу, должны быть видимыми, например:
<TABLE FRAHE—VOID>
Доступные значения:
□ VOID — стороны невидимы (это значение используется по умолчанию);
□ ABOVE — видима только верхняя сторона;
□ BELOW — видима только нижняя сторона;
□ HSIDES — видимы только верхняя и нижняя стороны;
□ VSIDES — видимы только левая и правая стороны;
□ LHS — видима только левая сторона;
□ RHS — видима только правая сторона;
□ BOX — видимы все четыре стороны;
□ BORDER — как и в предыдущем случае, видимы все четыре стороны (визу­
альных различий между этими двумя значениями нет).
О Атрибут ID. Атрибут ID задает имя для ссылки, например:
<TABLE 10“ иия>
Примеры таблиц
Программа, создающая таблицу из двух строк и семи столбцов, представлена
в листинге 8.1, а результат работы этой программы показан на рис. 8.1. В этом
примере надписи в ячейках выполнены с использованием тегов <ТН> и </ТН>, по­
этому они центрированы по умолчанию.
Листинг 8.1. Пример создания таблицы из двух строк и семи столбцов, в которой
надписи центрированы
<НТМ1 хН ЕА[)хТ 1Т1 Е>ТаСлица из двух строк и сени столбцов</Т1Т1Е>
</НЕА0>
<B0DY>
<НЗ>Таблица из двух строк и сени столбцов</НЗ>
<TABLE CELLSPAC1NG—О CELLPADOING-0 WIDTH-"60X" B0RDER-4>
<TR ALIGN-CENTER>
124
Урок 8. Таблицы
<тн
<тн
<тн
<тн
<тн
<тн
<тн
BGC0L0R-BLACK>
BGCOLOR-WHIТЕ>а12
BGC0L0R-BLACK>
BGCOLOR-WHIТЕ>а14
BGC0L0R-BLACK>
BGCOLOR-WHITE>a16
BGCOLOR-BLACKx/TR>
<TR ALIGN-CENTER>
<тн BGCOLOR-WHITE>a21
<тн BGC0L0R-BLACK>
<тн BGCOLOR-WHITE>a23
<тн BGC0L0R-BLACK>
<тн BGCOLOR-WHITE>a25
<тн BGC0L0R-BLACK>
<тн BGC0L0R-WHITE>a27</TR>
</TABLE></BODYx/HTML>
;. 4
.|
.v ?
, j
'
'v K
3 Таблица из двум строк и семи с т о л б о в - M icrosoft Internet
Таблица in двух строк и семи столбцов
Рис. 8.1. Таблица из двух строк и семи столбцов, в которой надписи центрированы
В следующем примере, представленном на рис. 8.2, надписи ячеек выполнены
с использованием тегов <TD> и </TD>, поэтому они по умолчанию выровнены по
левому краю (листинг 8.2).
U Таблица из д вух строк и семи столбцов - M icrosoft In tern et
Таблица ю дата строк и семи столбцов
Рис. 8.2. Таблица из двух строк и семи столбцов, в которой надписи выровнены по левому краю
Примеры таблиц
125
Листинг 8.2. Пример создания таблицы из двух строк и семи столбцов,
в которой надписи выровнены по левому краю
*HTMLxHEAD>
<11ЛЕ>Таблица из двух строк и семи столбцов</Т1Т1_Е> „
</NEAD>
<B0DY>
<НЗ>Таблица из двух строк и семи столбцов</НЗ>
<TABLE CELLSPACING-0 CELLPADDING=0 WIDTH-"90r ALIGN-CENTER B0RDER=4>
<TR>
<TD BGC0L0R*BLACK>
<TD BGCOLOR-WHITE>a12
<TD BGC0L0R-BLACK>
<TD BGCOLOR-WHITE>a14
<TD BGC0L0R-BLACK>
<TD BGCOLOR-WHITE>a16
<TD BGCOLOR-BLACKx/TR>
<TR>
<TD BGC0L0R-WHITE>a21
<TD BGC0L0R-BLACK>
<TD BGCOLOR-WHITE>a23
<TD BGC0L0R-BLACK>
<TD BGCOLOR-WHITE>a25
<TD BGC0L0R-BLACK>
<TD BGC0L0R-WHITE>a27</TR>
</TABLE>
</BODYx/HTML>
v >i
В листинге 8.3 представлена программа, создающая таблицу из четырех строк
и двух столбцов, у которой ширина рамки равна 1 пикселу, а не 4, как в предыду­
щем примере. Результат работы этой программы показан на рис. 8.3.
Листинг 8.3. Пример создания таблицы из четырех строк и двух столбцов, у которой
ширина рамки равна 1 пикселу
<HTML><HEAD>
<Т1ИЕ>Таблица цветов из четырех строк й двух столбцов</ТШЕ>
</НЕА0>
>
~ "-
г
§
:
<B0DY BGCOLOR-WHIТЕ>
<TABLE WIDTH--30%" B0R0ER-1>
) С '':Ш
<tr>
:
<Н2>Цветовая модель CMYK</H2>
<TD WTDTH-b50l">CYAN</TD>
<TD WIDTH-"501” BGC0L0R-CYAN>&nbsp;</TD></TR>
<tr >
v
'.v
<TD WIDTH-"501">MAGENTA</TD>
<TD WIDTH-"50*" BGCOLOR-MAGENTA>&nbsp:</TDx/TR>
<TR>
<TD WIDTH-"50X">YELL0W</TD>
<TD WIDTH-"501" BGC0L0R-YELL0W>&nbsp:</TDx/TR>
<TR>
■
'v
*
<TD WIDTH-"501">BLACK </TD>
<TD WIDTH-"50r BGC0L0R-BLACK>4nbsp:</TDx/TR>
</TABLE>
■
^
</B0DY></HTHL>
: ; :
1
"
I
'
126
Урок 8. Таблицы
Э| Таблица цветов из четы ре» строк и двум столбцов - Миэтию
№д
Остановить;; Обновить
Цветовая
модель CMYK
CYAN
MAGENTA
YELLOW
шшшж
fr A # і
Готово
>310/7га*# г > ^ у > т »
r
Рис. 8.3. Таблица из четырех строк и двух столбцов, у которой ширина рамки равна 1 пикселу
Программа, создающая таблицу из предыдущего примера, но выровненную по
центру и имеющую толщину рамки 70 пикселов, представлена в листинге 8.4,
а результат работы этой программы показан на рис. 8.4. Здесь несколько раз
использован тег <BR>, что позволило опустить таблицу относительно заголовка.
Ширина этой таблицы, регулируемая параметром WIDTH, составляет 30 % от
ширины экрана.
.
§ Таблица цветов из четырех строк и двух столбцов - Microsoft
шН
М
Ш
Ш
Ш
Ш
CYAN
MAGENTA
YELLOW
Рис. 8.4. Таблица, у которой ширина рамки равна 70 пикселам
Примеры таблиц
127
Листинг 8.4. Пример создания таблицы, у которой ширина рамки равна 70 пикселам
<-!TMlxHEADxTITLE>Ta6nnua цветов из четырех строк и двух столбцов</Т1ИЕ></НЕА0>
<000Y BGCOLOR-WHIТЕ>
<е|щ>
<TABLE WIDTH«"30r BORDER-70 >
<ТЯхН2>Цветовая нодель CMYK</H2xBR><BRxBRxBR>
<TD WIDTH-"50r>CYAN</TD>
<TD WIDTH-"50*" BGCOLOR-CYAN>&nbsp:</T0x/TR>
<TRxTD WIDTH-"50S">MAGENTA</TD>
<TD WIDTH-’‘SOX" BGCOLOR-MAGENTA>&nbsp;</TDx/TR>
<TRxTD WIDTH-"50r>YELLOW</TD>
<TD WIDTH*"50*" BGC0L0R-YELL0W>&nbsp: </TDx/TR>
<TRxTD WIDTH-"50X'*>BLACK</TD>
<TD WIDTH-"50X" BGCOLOR-BLACK>&nbsp:</TDx/TR>
</TABLEx/CENTERx/BODYx/HTHL>
Программа, создающая таблицу из девяти строк и девяти столбцов, представле­
на в листинге 8.5, а результат работы этой программы показан на рис. 8.5. Под­
пись таблицы, которая задается тегом <CAPTI0N>, расположена сверху.
•J Таблица - Microsoft Internet Explorer
Таблица умножения
Рис. 8.5. Таблица из девяти арок и девяти столбцов
Листинг 8.5. Пример создания таблицы умножения
<HTMLxHEADxTITLE>TaenMua</TITLEx/HEAD>
<B00Y>,
<TABLE' B0RDER-2>
<САРТ10М>Таблица умножения </CAPTI0N>
<TRxTDxTH>2<TH>3<TH>4<TH>5<TH>6<TH>7<TH>8<TH>9</TR>
<TR><TH>2<TD>4<TD>6<TD>8<TD>10<TD>12<TD>14<TD>16<TD>18</TR>
<TRxTH>3<TD>6<TD>9<TD>12<T0>15<TD>18<TD>21<TD>24<T0>27</TR>
<TRxTH>4<TD>8<TD>12<TD>16<TD>20<TD>24<TD>28<TD>32<TD>36</TR>
128
Урок 8. Таблицы
<TRxTH>5<TO>10<TD>15<TD>16<TO>25<TD>30<TD>35<TD>40<TD>45</TR>
<TR><TH>6<TD>12<TD>18<TD>24<TD>30<TD>36<TD>42<TD>48<TD>54</TR>
<TRxTH>7<TD>14<TD>21<TD>28<TD>35<TD>42<T0>49<TD>56<T0>63</TR>
<TRxTH>8<TD>16<TD>24<TD>32<TD>40<TD>48<TD>56<TD>64<TD>72</TR>
<TR><TH>9<T0>18<TD>27<TD>36<T0>45<T0>54<TD>63<T0>72<TD>81</TR>
</TABLEx/BODY></HTML>
Программа, создающая таблицу без рамок из восьми строк и пяти столбцов, по­
казана в листинге 8.6 (рис. 8.6).
-Г
ч | Таблицы без рамки - Microsoft Internet Explorer
Простая таблица o n рамки
ячейка 11 ячейка 12 ячейка 13 ячейка 14 ячейка 15
ячейка 21 ячейка 22 ячейка 23 ячейка 24 ячейка 25
ячейка 31 ячейка 32 ячейка 33 ячейка 34 ячейка 35
ячейка 41 ячейка 42 ячейка 43 ячейка 24 ячейка 45
ячейка 51 ячейка 52 ячейка 53 ячейка 44 ячейка 55
ячейка 61 ячейка 62 ячейка 63 ячейка 54 ячейка 65
ячейка 71 ячейка 72 ячейка 73 ячейка 64 ячейка 75
ячейка 81 ячейка 82 ячейка 83 ячейка 74 ячейка 85
■ W vSvw
Рис. 8.6. Таблица из восьми строк и пяти столбцов
Листинг 8.6. Пример создания таблицы из восьми строк и пяти столбцов
<HTMLxHEAD><TITLЁ>Таблицы без ранки </TITLE></HEAD>
<В(ЮҮхНЗ>Простая таблица без рамки</НЗ>
<TABLE>
<ТЯхТР>ячейка 11 </Т0><Т0>ячейка
</ТОхЮ>ячейка 15 </TDx / tr >
<TR><TD>H4e^Ka 21 </ТОхЮ>ячейка
' </ТОхЮ>ячейка 25 </TDx/TR>
<ТОхТО>ячейка 31 </Т0><Т0>ячейка
</ТОхТО>ячейка 35 </TDx/TR>
<П^хТО>ячейка 41 </ТОхЮ>ячейка
</ТОхТО>ячейка 45 </TD></TR>
<TR><TD>«4ewKa 51 </ТОхЮ>ячейка
; , ... . ■
£
12 </ТОхТО>ячейка 13 </Т0><Т0>ячейка 14
22 </Т0хТ0>ячейка 23 </ТОхЮ>ячейка 24
32 </ТОхЮ>ячейка 33 </ТОхЮ>ячейка 34
42 </ТОхЮ>ячейка 43 </ТОхЮ>ячейка 24
52 </Т0хТ0>ячейка 53 </Т0хТ[>ячейка 44
</Т0><Т0>ячейка 55 </TDx / tr>
*
; Т> иШ ф*«
<TRxTD>fl4ewKa 61 </ТОхЮ>ячейка 62 </Т0хТ0>ячейка 63 </ТОхТО>ячейка 54
</Т0><Т0>ячейка 65 </TDx/TR>
<ТСхТО>ячейка 71 </ТОхЮ>ячейка 72 </ТОхЮ>Ячейка 73 </ТОхТО>ячейка 64
</Т0хТ0>ячейка 75 </TDx / tr >
<ТСхТО>ячейка 81 </ТОхЮ>ячейка 82 </ТОхЮ>ячейка 83 </Т0><Т0>ячейка 74
</ТОхто>ячейка 85 </TDx /t r >
</TABLEx/BODYx/HTML>
Примеры таблиц
129
Программа, создающая ту же таблицу без рамок из восьми строк и пяти столб­
цов, но с атрибутом WIDTH, равным 100 %, показана в листинге 8.7 (рис. 8.7).
1 Таблицы без рамки - Microsoft Internet Explorer
Избранное
Простая таблица без рамки
ячейка 12
ячейка 22
ячейка 32
ячейка 42
ячейка 52
ячейка 62
ячейка 72
ячейка 82
ячейка 13
ячейка 23
ячейка 33
ячейка 43
ячейка 53
ячейка 63
ячейка 73
ячейка 83
ячейка 15
ячейка 25
ячейка 35
ячейка 45
ячейка 55
ячейка 65
ячейка 75
ячейка 85
ячейка 24
ячейка 34
ячейка 24
ячейка 44
ячейка 54
ячейка 64
компьютер
Рис. 8.7. Таблица с шириной, равной ширине экрана
Листинг 8.7. Пример создания таблицы из восьми строк и пяти столбцов с шириной,
равной ширине экрана
<HTMLxHEADxTITLE>Taблицы §e3 рамки </TITLEx/HEAD>
<B0DY>
<НЗ>Простая таблица без рамки</НЗ>
<TABLE WIDTH=100*>
<^><П)>ячейка 11 </Т1><Т0>ячей ка 12
</Т[)хТ1>ячейка 15 </TDx/TR>
<ТКхТО>ячейка 21 </1><ТЕ)>ячейка 22
</ТОхЮ>ячейка 25 </TDx/TR>
<TRxTD>A4eftKa 31 </ТОхТО>ячейка 32
</ТОхТ[>ячейка 35 </TDx/TR>
<TRxTD>ячeйкa 41 </ТО><Ю>ячейка 42
</ТО<ТО>ячейка 45 </TDx/TR>
<^хто>ячейка 51 </Т1><Т0>ячейка 52
</ТОхТОячейка 55 </TDx/TR>
<TRxTD>fl4eftKa 61 </Т0><Т0>»чейка 62
</Т0хТ0>ячейка 65 </TDx/TR>
<ТЙхТО>ячейка 71 </Т0хТОячейка 72
</Т0><Т0>ячейк а 75 </TDx/TR>
< ^хЮ > ячейка 81 </ТО<Т1>ячейка 82
</ТО<ТО>ячейка 85 </TDx/TR>
</TABLEx/BODYx/HTML>
</ТСхТО>ячейка 13 </ТСхТО>ячейка 14
</ТОхЮ>ячейка 23 </ТОхЦ>ячейка 24
</Т0хТО>ячейка 33 </ТОхЮ>ячейка 34
</ТОхТО>ячейка 43 </ТОхЦ>ячейка 24
</ТОхЮ>ячейка 53 </ТОхЮ>ячейка 44
</ТОхТО>ячейка 63 </ТОхЦ>ячейка 54
</Т0хТ0>ячейка 73 </ТОхЦ)>ячейка 64
</ТОхЦ>ячейка 83 </Т1)хТ0>ячейка 74
Программа, создающая ту же таблицу, но у которой расстояние от границы ячей­
ки до ее содержимого, задаваемое параметром CELLPADDING, равно 20 пикселам,
показана в листинге 8.8 (рис. 8.8).
\
130
Урок 8 .Таблицы
Листинг 8.8. Пример создания таблицы из восьми ар о к и пяти столбцов
<HTML><НЕAD><T ITLЕ>Таблицы без рамки </TITLEx/HEAD>
<В(ЮҮ><НЗ>Простая таблица без рамки</НЗ>
<TABLE WIDTH—100% CELLPADDING»20>
<ТР><Т0>ячейка 11 </Т0><Ю>ячейка 12 <ЛТ><Т0>ячейка
</Т0><Ю>ячейка 15 </TD></TR>
<TRxJD> ячейка 21 </ТО><Т0>ячейка 22 </Т0хТ0>ячейка
</Ю><Т0>ячейка 25 </TD></TR>
<ШхТ0>ячейка 31 </Т0><Т0>ячейка 32 </Т0><Т0>ячейка
</Ю><Т0>ячейка 35 </TD></TR>
<Т^хТ0>ячейка 41 </Ю><Т0>ячейка 42 </ЮхТ0>ячейка
</Т0><Ш>ячейка 45 </TD></TR>
<TRxTD>«4 eflKa 51 </Т0><Т0>ячейка 52 </Т0хЮ>ячейка
</Т0><Т0>ячейка 55 </TD></TR>
<TR><TD>fl4ewKa 61 </Т0хТй>ячейка 62 </Т0хТ0>ячейка
</Ю><Т0>ячейка 65 </TD></TR>
<TR><TD>fl4eHKa 71 </Ю><Т0>ячейка 72 </Т0хЮ>ячейка
</Т0хЦ)>ячейка 75 </TD></TR>
<Т^хТ0>ячейка 81 </ТО><Т0>ячейка 82 </ЮхТ0>ячейка
</Т0><Тй>ячейка 85 </TD></TR>
</TABLE></BODY></HTML>
13 </ТО><Ю>ячейка 14
23 </Т0хТ0>ячейка 24
33 </Т0хЮ>ячейка 34
43 </Т0хЮ>ячейка 24
53 </Т0хЮ>ячейка 44
63 </Т0хЮ>ячейка 54
73 </Т0><ТО>ячёйка 64
83 </ЮхТ0>ячейка 74
Tаблицы без рамки * Microsoft In tern et Explorer
П ростая таблица 6 « рамки
ячейка 25
ячейка 31
Рис. 8 . 8 . Таблица из восьми строк и пяти столбцов
Программа, создающая ту же таблицу, но с фоновым изображением, представле­
на в листинге 8.9 (рис. 8.9).
Листинг 8.9. Пример создания таблицы, у которой фоном является изображение
<HTML><HЕAD><T ITLЕ>Таблицы без рамки </TITLEx/HEAD>
<В(ЮҮхнз>Простая таблица без рамки</НЗ>
<TABLE WIDTH=100* CELLPADDING=20 BACKGROUND ^"Янтарная комната.jpg">
Примеры таблиц
<Ц}><ТО>ячейка 11 </ТО><Ю>ячейка
</ТТ)хТО>ячейка 15 </TD></TR>
<1ТСхТ0>ячейка 21 </ТО><Ю>ячейка
\ </ТО><ТО>ячейка 2 5 </TD></TR>
<Тк><ТО>ячейка 31 </ТО><ТО>ячейка
</ТО><ТО>ячейка 35 </TD></TR>
<ПТ*хТО>ячейка 41 </ТО><ТО>ячейка
</ТО><ТОячейка 4 5 </TD></TR>
<TR><TD>a4twKa 51 </Ю><ТО>ячейка
</ТО><Ю>ячейка 55 </TD></TR>
131
12 </ТОхТО>ячейка 13 </Т0хТ0>ячейка 14
22 </ЮхТ0>ячейка 23 </ТОхТО>ячейка 24
32 </ЮхТО>ячейка 33 </ТЭхТО>ячейка 34
42 </ТОхТ0>ячейка 43 </ЮхТО>ячейка 24
52 </ЮхТ0>ячейка 53 </П><Т0>ячейка 44
<TR><TD>ячeйкa 61 < / ТО><ТО>ячейка 62 </Т0хТ0>ячейка 63 </Т0хТОячейка 54
</ТО><Ю>ячейка 6 5 </TD></TR>
<TR><TD>ячeйкa 71 </ТО><Ю>ячейка 72 </Т0хТ0>ячейка 73 </Т0хЮ>ячейка 6 4
</ТО><Ю>ячейка 75 </TD></TR>
<ТК><Т§>ячейка 81 </ТТ)хТО>ячейка 82 </ТОхЮ>ячейка 83 </ТТ)хТО>ячейка 74
</ТСхТ[>ячейка 8 5 < / T D x / t r >
</TABLEx/BODYx/HTML>
3 Таблицы без рамки - M icrosoft In tern et
П ростая тяолица o n рамки
Рис. 8.9. Таблица, у которой фоном является изображение
*
Программа, создающая таблицу с использованием атрибута CELLPADDIN6, равно­
го 20, показана в листинге 8.10 (рис. 8.10).
Листинг 8.10. Пример создания таблицы, созданной с использованием атрибута
CELLPADDING
<HTMLxHEADxTITLE> Текст в таблицах</Т1Т1_Е></НЕА0>
<B0DY>
<Н1 ALIGN=GENTER> СЕВЕРО-ЗАПАДНЫЙ ИНСТИТУТ ПЕЧАТИ </Н1>
<Н2 ALIGN-CENTER> НАШ АДРЕС </Н2>
<НЗ ALIGN-CENTER> переулок Джамбула, дон 13 </НЗ>
<TABLE CELLSPACING-15 CELLPAODING-20 WIDTH-”90I" ALIGN-CENTER B0RDER-4>
<CAPTI0N> Вступительные экзамены:</CAPTI0N>
132
Урок 8. Таблицы
<TB0DY>
<TR> <ТН BGC0L0R-CYAN> Экономика и управление на предприятии
<ТН BGCOLOR-CYAN >Математика. русский язык </TR>
<TR><TH BGC0L0R-CYAN> Книгораспространение
<ТН BGCOLOR—CYAN> Русский язык, история Отечества </TR>
<TR><TH BGC0L0R-YELL0W> Технология полиграфического производства
<ТН BGC0L0R-YELL0W> Математика, русский язык </TR>
<TR><TH BGC0L0R-YELL0W> Реклама
<ТН BGC0L0R-YELL0W> Русский язык, литература, история Отечества
</TRx/TBODY></TABLE></BODY></HTML>
Э Текст в таблицам - M icrosoft In tern et Екріогег
Вступительные экзамены
Экономика и
предприятии
да язык, история
■
•
О.т+чъетълЖШШШ
Щ т
.
. .Я
•ш
л * ■
**
-. *
* • •*•
j# • * • * *
•
. -г
Рис. 8.10. Таблица, созданная с использованием атрибута CELLPADDING
Программа, создающая таблицу, в которой объединены ячейки с помощью атри­
бутов R0W SPAN и C0LSPAN, показана в листинге 8.11 (рис. 8 .1 1 ).
Листинг 8.11. Пример создания таблицы с объединенными ячейкам и
•
<HTMLxHEADxTULE> Текст в таблицах</Т1Т1Ех/НЕА0>
<body>
• ..
<TABLE BORDER—10 WIDTH-80* ALIGN—CENTER>
<CAPTI0N> Пример таблицы с объединенными ячейками по вертикали и горизонтали </CAPTI0N>
<BRxBRxBR>
*
<TRxTD WIDTH-30* BGC0L0R=C0RNSILK> A ll Ячейка первого столбца и первой строки</Т0>
<TD WIDTH-200 BGCOLOR-CHARTREUSE> А12 Ячейка второго столбца и первой строки</Т0>
<TD ROWSPAN-2 BGCOLOR—AQUA> А13+А23 (объединение ячеек по вертикали) </TDx / tr >
<TRxTD ALIGN-CENTER BGC0 L0R-AZURE>fl4ей ка А21 <Ьг> выравнивание по центру</Ю> <TD ALIGN—RIGHT BGCOLOR-LAWNGREEN> Ячейка A22 <br> выравнивание по правому краю
ячейки</ТйхЛТС>
:
<TR><TD HEIGHT-60 VALIGN-TOP BGCOLOR-LIGHTGREY> Ячейка A31 </TD>
<TD COLSPAN-2 VALIGN-ВОПОМ BGCOLOR-MEDIUMSPRINGREEN> A32+A33 <BR>
(объединение ячеек по горизонтали)</TDx /tr >
</TABLEx/BODYx/HTML>
Примеры таблиц
133
Текст в таблицам - Microsoft Internet Explorer
Примертаблицы
с объединенными ячейками по вертикали и
горизонтали
|А11 Ячейка
первого столбца и
первой строки
Щ
Ячейка А21
вы равнивание по
центру
Готово
Рис. 8.11. Таблица
с объединенными ячейками
Программа, создающая таблицу, в которой ячейки объединены с помощью атри
бутов R0WSPAN и C0LSPAN и в качестве фона выбраны рисунки, показана в лис
тинге 8.12 (рис. 8.12).
ЩТаблица - Microsoft Internet Explorer
-
---
-
--—--1-tV »
лава8\lisdng8.12.htm
D:ІКнигуДУчебныи курс\НТМЦСО\Г
Переход
Таблица, в которой объединены ячейки
г w lfe f дин* ш it прх X У:
Объединениепо горюонталн
^Ь •
% ф ф
.
.^ ь ф
. #.
•.
■
И Р Щ
компьютер
Рис. 8.12. Таблица с объединенными ячейками и фоновыми рисунками
134
Урок 8. Таблицы
Листинг 8.12. Пример создания таблицы с объединенными ячейками и фоновыми
рисунками
. щ*.
<HTML><HEADxTITLE>Ta6nnua</TITLE>
</HEAD>
<B0DY>
<TABLE B0RDER=2>
<САРТ10№>Таблица. в которой объединены ячейки </CAPTI0N>
<TBODY><TR><TD BACKGROUND = “ ico n lh g if">1111111
<TH BACKGROUND = "icon2.gif"> 2
<TH BACKGROUND * Mico n 3 .g if ^Объединение no горизонтали
<TH BACKGROUND = “ icon4.gif">4
<TH BACKGROUND - “ ico n 5 .g if”>5
<TH BACKGROUND | “ icon 6 .g if ">6
<TH BACKGROUND - "ісоп7.діГ> 7
<TH BACKGROUND = “ icon 8 .g if ”>8
<TH BACKGROUND = “ ісоп9.діГ> 9 </TR>
<TR> <TH ROWSPAN^e BACKGROUND = “Янтарная комната.jpg”>
<TD BACKGROUND = “ iconl0.gif"> 4 4444
<TD BACKGROUND - “ ic o n ll.g if ->66666
<TD BACKGROUND « “ ic o n l2 .g if ”>88888
<TD BACKGROUND - “ ic o n l3 .g if’ >10000
<TD BACKGROUND - “ ic o n l4 .g if”>12000
<TD BACKGROUND = “ ic o n l5 .g if”>14000
<TD BACKGROUND - "ic o n l6 .g if”>16000
<TD BACKGROUND * "ic o n l7 .g if”>18000 </TD>
<TR><TH C0LSPAN=:5>0бъeдинeниe по горизонтали
<TD BACKGROUND = “ ico n l8 .g if ”>6
<TD BACKGROUND - Mic o n l8 .g if”>9
<TD BACKGROUND - Mic o n l8 .g if”>12</TD>
<TR><TH BACKGROUND - “ iconl7.gif"> 4
<TD BACKGROUND = *ic o n l7 .g if>
<TD BACKGROUND - "iconl6.gif"> 12
<TD BACKGROUND - "ic o n l6 .g if”>16
<TD BACKGROUND = “ ic o n l5 .g if”>20
<TD BACKGROUND = "ic o n l5 .g if”>24
<TD BACKGROUND = “ iconl4.gif"> 28
<TD BACKGROUND - eic o n l4 .g if”>32</TD>
<TR><TH>T<TDxTD>a<TD>6<TD>n<TD>H<TD>M<TD>a</TD>
<TR><TH>E<TD><TD><TD><TD><TD><TD><TD></TD>
<TRxTH>K<TDxTD>l 1<TD>11<TD>11<TD>11<TD>11<TD>11</TD>
<TR><TH>C<TD><TD>11<TD>11<TD>11<TD>11<TD>11<TD>11</TD>
<TRxTH>T<TDxTD>l 1<TD>11<TD>11<TD>11<TD>11<TD>11</TD>
</TRx/TBODYx/TABLEx/ BODY></HTML>
Щ
.
|
r
■Й § Р Й Щ
Программа, создающая таблицу, в которой подпись располагается внизу
(ALIGN=BOTTOM), показана в листинге 8.13 (рис. 8.13).
Листинг 8.13. Пример создания таблицы, в которой подпись располагается внизу
<HTML><HEAD><TITLE> Еще одна таблица</Т1Т1_Е></НЕА0>
<B0DY>
.<TABLЁ B0RDER*4>
<CAPTI0N ALIGN*B0TT0M> Таблица ffel </CAPTI0N>
<TR><TD R0WSPAN=2></TD><TH C0LSPAN=2>CpeflHee 3Ha4eHne</TH></TR>
<TR><TH>PocT</TH><TH>Bec</TH></TR>
1
.
Примеры таблиц
135
<TR><TD>Myжчины</TD><TD ALIGN=CENTER>184</TD><TD ALIGN=CENTER>88</TD></TR>
<ТЯ><Т0>1енщины</TD><TD AL IGN=CENTER>168</TD><TD ALIGN=CENTER>63</TDx/TR>
V table>
<)body></html>
j Еще одна таблица - Microsoft In tern et Explorer
mm
Ш Ш ІІ
Оі\Книги\Учебный Kypc\HTML\CD\rлава 8\listrig8.12.htm
Среднее значение
4
Мужчины
ТаблицаМ®!
Рис. 8.13. Таблица, в которой подпись располагается внизу
Еще один пример таблицы (таблицы цветов) показан на рис. 8.14 (листинг 8.14)
3 Таблица - M icrosoft In tern et Explorer
12.htm
88 Мойкомпьютер
готово
Рис. 8.14. Таблица цветов
136
Урок 8. Таблицы
Листинг 8.14. Пример создания таблицы цветов
<HTML>
'
V ‘
‘
<HEAD>
.
<Т1Т1Е>Таблица</Т1Т1Е></НЕА0>
<B0DY>
.4
<TABLE AL IGN—'*CENTER” WIDTH-90* BORDER-4 CELLSPACING^'lSr CELLPADDING-M50r>
<CAPTION>UBETOBAfl ПАНЕЛЬ RGB</CAPTION>
<TR><TH BGCQLOR-"RED"> Red
<TH BGCOLOR-MRED"> Красный
<TR><TH BGCQLOR-"GREEN"> Green
<TH BGC0L0R-,,GREEN"> Зелёный
<TRxTH BGC0L0R-"BLUE”> Blue
<TH BGC0L0Re” BLUE“> Синий
</TABLE>
J
Ш
</B0DY>
r</HTML>
\
'%
Программа, создающая таблицу, в которой представлены коды цветов, показана
в листинге 8.15 (рис. 8.15).
Тест ц вета * M icrosoft In tern et Explorer
0:\Кмити\Учебный Kypc\HTML\CD\T лава 8\iisting8.12.htm
7FFFD4
#32CD32
Рис. 8.15. Таблица с кодами цветов
Листинг 8.15. Пример создания таблицы с кодами цветов
<HTMLxHEAD><TITLE>TeCT цвета</Т1Т1_Е></НЕА0>
<B0DY>
' -г ' '• v
«TABLE WIDTH-200 B0RDER=3>
<TBODY><TR><TD ALIGN=MIDOLE BGC0L0R=WHITExB>KOfl</B>
<TD ALIGN=MIDDLE BGC0L0R=WHIТЕ><В>цвет</B>
<TR><TD>#B0E0E6 <TD BGCOLOR=#BOEOE6>1
<TRx TD>#AFEEEE <T0 BGC0L0R=#AFEEEE>2
<TR><T0>#7FFFD4 <T0 BGC0L0R=#7fffd4>3
Примеры таблиц
<TR><TD>#00FA9A
\<TR><TD>#OOFFOO
<TRxTD>#32CD32
<’ИХТО>#008000
<ТЦХТЕ>#006400
<TRxTD>#008080
<TR><TD>#FF6800
<TRxTD>#FF6000
<TRx TD>#FF5800
</BODYx /HTML>
137
<TD BGCOLOR=#OOfa9a>4
<T0 BGCOLOR=#OOffOO>5
<TD BGC0L0R=#32cd32>6
<TD BGCOLOR=#008000>7
<TD BGCOLOR=#006400>8
<TD BGCOLOR=#008080>9
<TD BGCOLOR=#FF6800>10
<TD BGCOLOR=#FF6000>11
TD BGC0LOR=#FF5800>12 </TD></TRx /TBODYx /TABLE>
Программа, создающая таблицу, в которой отражены все цвета радуги, показана
в листинге 8.16 (рис. 8.16). Рамка таблицы окрашена в томатный цвет.
Ц Рад уга - Microsoft Internet Explorer
D:\Книги\Учебный Kypc\HTML\CD\Tлава 8\iisting8.12.htm
Рис. 8.16. Таблица, в которой показаны все цвета радуги
Листинг 8.16. Пример создания таблицы, в которой показаны все цвета радуги
<HTMLxHEADxTITLE>Paдуга</Т Ш Ех/Н ЕА О
<B0DY>
<CENTERxFONT COLOR-RED SIZE=5>Paflyra</F0NT>
<TABLE WIDTH-"40*"B0RDER-3CE11SPACING-15CELLPA0DING-1 OBORDERCOLOR-TOHATO>
<T80DY> <TR> <TD BGCOLOR-#FF3030 ALIGN-CENTER> Красный
<TRxTD BGCOLOR=#FFOOOO ALIGN=CENTER> Оранжевый
<TRxTD BGC0L0R-#F3FF5F AL IGN=CENTER> Жёлтый
<TRxT0 BGCOLOR-IOOFFOO ALIGN-CENTER> Зелёный
<TR><TD BGC0L0R-#CF03F7 ALIGN=CENTER> Голубой
<TRxTD BGCOLOR-#5F2FFO ALIGN-CENTER> Синий
<TRxTD BGC0L0R-IB568F4 ALIGN-CENTER> Фиолетовый </TRx/TBODYx/TABLEx/BODYx/HTML>
Программа, в которой фон таблицы и документа закрашен разными цветами, по­
казана в листинге 8.17 (рис. 8.17).
138
Урок 8 .Таблицы
3 Простея таблица - M icrosoft In tern et Explorer ШШШ.
Msopatfrioe
■2тя&
Лоиек
D:\Книги\Учебный курс\НТМЦСО\Глава 8\listing8.12.htm
швш
VSVSVJZ/Xfft
€ * я.
я ш ■
я я
Л ш
I
ШШШ Н
&
Y S r / jb V
« в в ң с ш
УЛУ/У.
Іячейка 11 ячейка 12
Іячейка 21 ячейка 22 j
ооммімооопммооомш
Рис. 8.17. Веб-страница, на которой фон таблицы и документа закрашен разными цветами
Листинг 8.17. Пример, в котором фон таблицы отличается от фона документа
<HTML><HEAD><TITLЕ>Проста я та6лица</Т1ИЕх/НЕА0>
<B0DY BGC0L0R=RЁ
<НЗ ALIGN=CENTER>npociaя таблица </НЗ>
<DIV ALIGN=CENTER> <CENTER> <TABLE BGCOLOR-GREENYELLOW B0RDER=5>
<CAPTI0N>3aголовок таблицы</САРТІОМ>
<TB0DY> <те><ТІ>ячейка ц </TD>
<ТО>ячейка 12 </TD></TR>
ч
<TR><TD>fl4enKa 21 </TD>
<TD><P А Е ^ ^ Т Е Р > я ч е й к а 22
</Px /TD></TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>
Программа, создающая таблицу, в которой отражены различные способы вырав­
нивания, показана в листинге 8.18 (рис. 8.18). Рамка таблицы окрашена в чер­
ный и белый цвета.
: Ш
Листинг 8.18. Пример создания таблицы, в которой отражены различные способы
выравнивания
<HTMLxHEADxTiTLE>Bbipaвнивание в таблицах </TITLEx/HEAD>
<B0DY BGCOLOR-"#F0FFF0">
<НЗ ALIGN-CENTERxFONT COLOR-#000080xBIGxBIGxSTRONGxEM>Paзличныe способы
BbipaBHHBaHHfl</EMx/STR0NGx/BIGx/BIGx/F0NTx/H3>
<TABLE BORDERCOLORDARK-fOOOOOO CELLPADDING-5 BORDERCOLORLIGHT-#FFFFFF B0RDER-3xCAPTI0N
VALIGN-ТОР ALIGN=RIGHT>3a головок таблицы</САРТІОМ>
<TB0DY> <TR> <TD>&NBSP: </TDx/TR>
<TRxTH COLSPAN-2 R0WSPAN-2>&NBSP: </TH>
<TH C0LSPAN-3>Cnoco6 выравнивания</ТНх/ТР>
<TR><TH>no левому краю</ТН>
4
<ТН>Центрирование</ТН>
<TH>flo правому Kpaio</THx/TR>
<TRxTH R0WSPAN-2>Hanpaвлeниe</TH>
<ТН>По вертикали</ТН>
<TD>3tot текст выровнен по левому краю</ТО>
Примеры таблиц
139
<TD ALIGN=MIDDLE>3tot текст отцентрирован</ТО>
<TD ALIGN=RIGHT>3tot текст выровнен по правому Kpaio</TD></TR>
<TR><TH>no горизонтали</ТН>
<Қ) VALIGN=TOP>BBepxy</TD>
< Щ ALIGN=MIDDLE>nocepeflHHe</TD>
<TD VALIGN^BOTTOM ALIGN=RIGHT>BHH3y</TD></T R x /TBODY></TABLE>
</B0DY></HTHL>
31 Вы р авн и ван и е о таблицам - W cro so ft In te rn e t
Различные способы выравнивания
Способ выравнивания
& N BSP;
По левому
краю
Центрирование
По правому
краю
Рис. 8.18. Таблица, в которой отражены различные способы выравнивания
Программа, создающая таблицу с тремя столбцами и четырьмя строками, под­
пись которой располагается внизу, показана в листинге 8.19 (рис. 8.19).
^ Таблицы - Microsoft Internet Explorer
v ,1
*
іш
сж важ ж
ЯВнШІшШИиЖ&іэтВВяШв
щшшт
Ооиоемть
ft
iH te
.
Щ
: • '* - » > * . .■ л - .- ' Л
• •• . У
:
%j
I*
»
u u p a fl
iU i
іИУТлгггГЖті
Переход ; ІС ш ж к
0:\Кииги\Учебиый курс\НТМЦСРу лава>flfcMnqB. 12.htm
Taoj
тремя столоцамн м четырьмя п р о ш ш
С то л б е ц 1
Столбец 2 1 Столбец ш
Ш Ш Ш Ш цщтт
ячейка 21
ifeqil 2 р]
:||»ейкё22'у:!
• H 4 » T k jn D
', V V
(V
1
і і І І 33 1
1
Подпись таблицы снизу и слева
)г«ш ->ЙЙй^ЙВШй(йюіщш№яидідйІ^ЙЯв^ЙИЙ
тт\□
Мой юиимитвр
Рис. 8.19. Таблица, у которой подпись располагается внизу
140
Урок 8 .Таблицы
Листинг 8.19. Пример создания таблицы, у которой подпись располагается внизу
<HTML><HEADxTI TLЕ>Табл ицы</TITLЕ></HEAD>
<B0DY BGCOLOR « #E6 E6FA>
<H3 ALIGN*CENTER>Taблицa с тремя столбцами и четырьмя строками</НЗ>
<DIV ALIGN*CENTER>
<CENTER>
<TABLE BORDERCOLORDARK=BLACK CELLPADDING=5 BGCOLOR-SILVER BORDERCOLORLIGHT~WHITE
border* i >
I
. .. <ТВООҮ><ТРхТН>Столбец 1</TH>
<ТН>Столбец 2</ТН><ТН>Столбец 3</TH></TR>
<TR><TD><FONT COLOR=MAROON>TeKCT выделен цветом </FONT></TD>
<Ю>ячейка 12 </ТОхТО>ячёйка 13 </TDx/TR>
<TRxTD>ячeйкa 21 </ТОхТО>ячейка 22 </ТОхТО>ячейка 23 </TDx/TR>
<TRxTD>fl4eviKa 31 </ТОхТО>ячейка 32 </ТОхЮ>ячейка 33 </TDx/TR>
<CAPTION VALIGN=BOTTOM ALIGIH_EFT>noflnncb таблицы снизу
и cneBa</CAPTI0Nx/TABLEx/CENTERx/DIVx/80DYx/HTML>
Программа, создающая таблицу с четырьмя столбцами и тремя строками, пока­
зана в листинге 8.20 (рис. 8.20).
§ Таблица с четы рьм я столбцами и тремя строками
щ
Щ
М
»1
Ж
Таблица с четырьмя столбцами и
строками
CSS (Cascading Style Sheets - каскадные листы стилей)
Объединение двух ячеек по
горшонталн
текст выделен
цветом
ячейка 21
ячейка
ячейка
ячейка
ячейка
Готово
Рис. 8.20. Таблица с четырьмя столбцами и тремя строками
Листинг 8.20. Пример создания таблицы с четырьмя столбцами и тремя строками
<HTMLxHEADxTlTLE>Ta6flnua с четырьмя столбцами и тремя CTpoKaMH</TITLEx/HEAD>
<B0DY BGCOLOR = #FFFFF0>
<H3 ALI0N=CENTER>T#tnia с четырьмя столбцами и тремя строками</НЗ>
<DIV ALIGN=CENTER>
<CENTER>
<TABLE BORDERCOLORDARK=#000000 CELLPADDING=5 BGC0L0R=#FFFFC4
BORDERCOLORLIGHT=#FFFFFF B0RDER*1 FRAME=sLHS>
<CAPTI0N>CSS (Cascading S ty le Sheets - каскадные листы стилей)</CAPTI0N>
<TB0DY> <TR> <TH rowSpап-2>0бъeдинeние двух ячеек по горизонтали</ТН>
<TD><F0NT C0L0Rs=MAR00N>TeKCT выделен цветом</Ғ0МТх/то>
Примеры таблиц
141
<Т1>ячейка 12 </TD> <Ю>ячейка 13 </TD></TR>
<TR> <Т0>ячейка 21 </TD> <Ю>ячейка 22 </TD> <Т0>ячейка 23 </T0></TR>
<IR> <ТН>Строка 3</ТН> <ТОячейка 31 </TD> <ТО>ячейка 32 </TD>
<ТС>ячейка 33 </TD></TRx/TBODYx/TABLE></CENTERx/DIV></BODYx/HTML>
Еще один пример программы, создающей таблицу с тремя столбцами и четырь
мя строками, у которой, в отличие от приведенной на рис. 8.19, подпись разме
щена сверху, показан в листинге 8.21 (рис. 8.21).
увййй
D:\Книпі\Учебный Kypc\HTML\CD\Tлава 8\6stmg8.12.htm
рамками
Программный код - текст программы
Рис. 8.21. Таблица, у которой подпись располагается сверху
Л и сти н г 8 .2 1 . Пример создания таблицы, у которой подпись располагается сверху
<НТМ1хНЕА0хТ1Т1.Е>Таблицы с обьединенными ячейкаии</Т1Т1_Ех/НЕА0>
<B0DY BGC0L0R-#FAF0E6>
<НЗ ALIGN=:CENTER>Tаблицы с различными рамкани</НЗ>
<01V AHGN=CENTER>
<TABLE BOROERCOLORDARK-#000000 CELLPAD01NG-5 BGCOLOR=#COCOCO
B0RDERC0L0RIIGHT-#FFFFFF BACKGROUND-'" BORDER-2 FRAME-BELOW>
<CAPTI0N ALIGN-LEFT>nporpanHHbifi код - текст nporpannbi</CAPTION>
<TB0DY> <TR> <ТН>Столбец 1</TH>
<TH С015РАК=2>0бьединёние двух ячеек по вертикале</ТНх/TR>
<TRxTDxFONT C0L0R-MAR00N>TeKCT выделен цветом </F0NTx/TD>
<ти>ячейка 12 </TD>
<Т0>ячейка 13 </TDx/TR>
<ТЯхТО>ячейка 21 </ТО<ТО>ячейка 22 </ТОхТй>ячеика 23 </TDx/TR>
<Ш><ТО>ячейка 31 </Т0хТ0>ячейка 32 </TD>
<Т0>ячейка 33 </TDx/TRx/TBOOYx/TABLEx/CEMTERx/DlV>
</B0DYx/HTML>
Еще один пример программы, создающей таблицу без рамки с тремя столбцами
и четырьмя строками, у которой заголовок выровнен по центру, показан в лис­
тинге 8.22 (рис. 8.22).
142
Урок 8. Таблицы
«•рок,амроомемимиярцентру -МкгенЛWtemcfcЬЫ«аг
Ш
ддтааад
ЯШ
Ш
3£І
ш
ш
ш
И
К
И
м
ОСТаНОВИЦ* Обновить
- 7 .4 “
д
іІІШ тШ -
ІШ
ІЛ Д Л
I
Домй
is
141
Поиск -^.Избранно*
ШЩІ
юШіЖ^чйдд
П
яф Щ |Ц Щ і
P l g i l.
Заго л о во к, вы р о вн ен н ы й по центру
Заголовок таблицы - Параметр Frame = VOID
Заголовок строки 1
«тегТН
Заголовок строки 2
- тег ТН
Заголовок строки 3
- тег ТН
Готово •:^ т м І 9 ( М
Я
Й
М
М
Н
В
І ^ н М
І
текст выделен цветом, курсивом и
располож ен с правого прая
ячейка
12 Ж
ячейка
ячейка 21
ячейка
23 ■
ячейка
Ш 32 Й Ш
ячейка 31
У У М # «
І40ЙИОИПМОПО
Рис. 8.22. Таблица без рамки
Листинг 8.22. Пример создания таблицы без рамки с выровненным по центру заголвком
<HTML><HEADxTITLE> Заголовок, выровненный по центру </TITLE>
</HEAD>
/''!:< ^ }
<B0DY BGCOLOR=#FFFOF5>
<H3 ALIGN=CENTER> Заголовок, выровненный no центру </H3>
<DIV ALIGN-CENTER>
•«Щмтейі
'
'Щ ; Щ-\
;.j
•
<TABLE BORDERCOLOfiDARK=#OOOOOD CELLPADDING=5 BGC0L0R=#C4ECFF
BORDERCOLORL IGHT=#FFFFFF B0RDER=3 FRAHE-VQIO
<CAPTI0 N ALIGN=RIGHT>3aголовок таблицы - Параметр Frame • VOID</CAPTIQN>
<TB0DY><TRxTH>3a головок строки 1 - тег TH</TH>
<T0 align=right><FONT со1ог-иагоопхІ>текст выделен цветои. курсивом и расположен
с правого края</1></FQNT></TD>
<Т1>ячейка 12 </Т1><Т[>ячейка 13 </T0x/TR>
<TRxTH>3a головок строки 2 - тег ТН</ТНхТО>ячейка 21 </Т0хТ0>*чейка 22 </ТО><ТОянеЙка
23 </TDx/TR>
. ....
?
<TRxTH>3aголовок строки 3 - тег ТН</ТНхТ1>*чейка 31 </ТОхЮ>ячейка 32 </Т1><П>ячейка
33 < /T 0 x /T R x / TBOOVх/ТАЙ. Ех/С £ NTERx/D 1V»
</BODYx/HTML>
" •:
- Г
Рассмотрим еще один пример создания таблицы, представленный в листинге
8.23. В этом примере показано, что жирные рамки могут создавать различные ви­
зуальные эффекты (рис. 8.23). Противоположный результат можно получить,
если создать таблицу без рамки. При создании вложенных таблиц границы дела­
ют разной толщины, чтобы легче было различать таблицы.
Листинг 8.23. Пример создания вложенных таблиц с разной толщиной рамок
<НТН1хҢ£АО»«тI Т1 Е>Таблицы с размой толивкой раиок</ТITLЕ></НЕА&>
<8Ш¥х ТА81Е CELLSPACING-10 С Ш РADDТ
I 0ТМ--%Г BORDER-8 B0R0ERC0L0R-BLACK>
<TR><T[) AL I GN*C£NТЕRxH >Tипw браузеров*/Нг^
2
Примеры таблиц
143
<TABLE BORDER CELLSPACING-10 WIDTH-"100*">
<TR><TD ALIGN=CENTER C0LSPAN=4xH4>nepBbiii гафический браузер появился в 1993
\
году</Н4></TDx /TR>
<IR><TD ALIGN=CENTER>Microsoft Internet Explorer </TD>
<TD ALIGN=CENTER>Netscape Navigator </TD>
<TD ALIGN-CENTER>Opera </TD>
<TD ALIGN=CENTER>AvantGo</TD></TRx/TABLE></TD></TR></TABLE>
</B0DY></HTML>
Таблицы с разной толщиной ранок - M icrosoft ІіЙжігШ
Типы браузеров
Netscape Navigator
Microsoft Internet Explorer
AvantGo
Рис. 8.23. Вложенные таблицы с разной толщиной рамок
Пример таблицы, в которой наблюдаются интересные эффекты размещения текста
за счет использования атрибута CELLSPACING, показан на рис. 8.24 (листинг 8.24).
Атрибуты тегов таблицы * frficrosoft internet Емрнмпюг
D:ІКнигиІУчебмый Kypc\HTML\CD\TлававнрйФШ12.htm
.
С
- -
-
-------------------------------- .
w .
Ш * . ftM
l
Ш ''йа
[Элемент 11
іЭлемент 12
[Элемент 13
лемент
Элемент 22
Элемент 23
Элемент 32
л емент 33
Элемент 42
Элемент 43
Элемент 41
Готово
.
144
Урок 8. Таблицы
Листинг 8.24. Пример создания таблицы с интересными эффектами размещения текста
<НТМ1.хНЕА 0х Т 1Т1_Е>Атрибуты тегов таблицы</Т1Т1.Е></нЕА0>
<B0DY BGCOLOR - #F0FFF0xCENTER>
<TABLE BORDER CELLSPACING=20>
<TRxTD>3neMeHT 11<TD> Эленент 12<TD> Элемент 13< /T D x /tr>
<ТНхТО>Элемент 21<Т0>Эленент 22<Т0>Эленент 23</TDx/TRx/TABLE>
<TABLE BORDER CELLSPACING=20>
<ТНхТО>Эленент 31<TD> Эленент 32<TD> Эленент 33</TDx/TR>
<ТНхТО>Элемент 41<TD> Эленент 42<TD> Эленент 43</TDx/TRx/TABLE>
<TABLE BORDER tELLSPACING=0>
<TRxTD>3neHeHT 51<Т0>Эленент 52<Т0>Эленент 53</TDx/TR>
<ТРхТО>Эленент 61<TD> Эленент 62<TD> Эленент 63</TDx /tRx /ja b l E>
</bodyx/html>
• ■"
•••*’• <•
ч.
-.
m
Пример таблицы, в которой с помощью атрибута CELLSPACING имитируется рамка
вокруг изображения, показан на рис. 8.25 (листинг 8.25).
j Рамка вокруг фотографии
Internet
mss
Рис. 8.25. Таблица, в которой имитируется рамка вокруг изображения
Листинг 8.25. Пример создания таблицы, в которой имитируется рамка вокруг
изображения
<HTMLxHEADxTITLE>PaHKa вокруг фотографии</Т1Т1Ех/нЕА0>
<B0DY BGCOLOR«#OOeOOO>
<CENTER>
І
•
І
Ш
Примеры таблиц
145
CTABLE CELLSPACING-10 BORDER-15>
<CAPTI0N ALIGN-ВОТТО^Яковлева Елена</САРТІ0№>
<TRxTD>
<VBLE border-ЗО
<TR£f<TO<IMG SRC-"/leHa Яковлева. jpg"> </T0x/TR>
</TABLEx/TDx/TR>
</TABLE></CENTER></BODY></HTML>
Еще один пример таблицы, в которой имитируется рамка с тенью, показан
на рис. 8.26 (листинг 8.26). Ячейка выглядит выпуклой.
I j Р а н к а с т е н ы о - Microsoft I n t f f f lf t tw p ln rer
□;\Книги\Умвбный курс\НТМ\СО\Г паев
Родина моя
С мост-Петербург
а том и этом сеет* Ьуду вспоминать я
'акупоительны в России ввчера
Рис. 8.26. Таблица с выпуклой рамкой
Листинг 8.26. Пример создания таблицы с выпуклой рамкой
<HTMLxHEAD><TITLE>PaHKa с теныо</Т1Т1Е></НЕАО>
<B0DY BGCOLOR—
#Е0ҒҒҒҒ>
<CENTER>
«TABLE ELLPAODING-IO CELLSPACING-0 B0RDER-17>
<TRxTD ALIGN-CENTER>
<Н1>Родина моя</Н1хНЗ>Санқт -Петербур г</Н3>
<TABLE BORDER—30 WIDTH-100J>
/TD^
<TR><TD> <1>На тон и этой свете буду вспоминать я </ Іх / т о х /1 к>
<TRxTD> <1>Как упоительны в России вечера </Ix/TDx/TR>
</TABLEx/TO></TRx/TABLEx/CENTERx/BOOYx/HTML>
Таблицы позволяют размещать текст в колонках. Пример показан на рис. 8.27
(листинг 8.27).
Листинг 8.27. Размещение текста в колонках
<HTMLxHEAO<TITLE>TeKCT В иолонках</ТШЕх/НЕАО>
<B0DY BGCOLOR-IDCDCDC >
<CENTER>
146
Урок 8. Таблицы
«TABLE WIDTH-70* BORDER-O CELLPADDING-''5">
<TR> <TD ALIGN-CENTER C0LSPAN-2>‘
<Н2>Как сделать красиво</Н2>
, -
it
.;
'
'
If v ff Г :
s. ,4 '
<
<НЗ>0сновные правила: Контраст. Выравнивание. Приближенноеть</НЗх/TD></TR>
<TR> <TD width-50* ALIGN-T0 P>
Правило контраста заключается в тон. чтобы избежать расположения на странице одинаковых
эленентов. Нередко контраст - наиболее важное средство привлечения вникания к странице
</TD> <TD VALIGN«T0P>
'
На странице ничто не должно размещаться случайно. Каждый элемент нужно зрительно связывать
с другими элементами. Это придает странице аккуратный, утонченный внешний вид.
</TDx/TRx/TABLEx/CENTERx/BODYx/HTML>
,
-
т в колонках - Microsoft Internet
Н
кУРс\НТМ\СО\Гяава 8\lJstinq8.I2.htm
Как сделать красиво
% ’•
.\ - X v i V
X
'
ООХ
*
^ Д
Г
Я іх ^ У у л
•
» v - V * v .'I* - v *
-'
* * y * % 5 v v .* .v - ..
р ш |вкы «- ц щ іш и і: Контраст, Вьтгш ш ш аю іг
Щ>ан и
ых элементов. Ш ІІІ
т*ЖЖЯ$Ш8ЬЩРЖ№
другими $вс«ситакга
* />
*
■ у у у К УИК д д С * ? у ^ й и Я К С \
v .v « * <
^ ед ст^ ^ и вй етсй й Я внимания к Щ
внешний В&Ш Ш Й
Рис. 8.27. Текст в колонках
Пример разноцветной таблицы из четырех столбцов показан на рис. 8.28 (лис­
тинг 8.28).
:
?
; 1 ■' \ '
1 Текст в четырем столбцам -M icrosoft In tern et Btpforer
Значение
шт
щш
Кто в в е л
ИШ Ш жш
Рис. 8.28. Таблица из четырех столбцов
Примеры таблиц
147
Листинг 8.28. Пример создания таблицы из четырех столбцов
VHTMLxHEAD><TITLE>TeKCT в четырех столбцах</Т1Т1Ех/НЕА[>
<BQDY BGCOLOR=OOFFFF>
<C^NTER> <Н4> Даты возникновения математических знаков</Н4>
<TABLE CELLPADDING” 5 WIDTH-"80r BORDER-1 CELLSPACING-2>
<TR ALIGN-LEFT BGCOLOR - 000099>
!
<TD><F0NT FACE-'ARIAL” COLOR-WHITE SIZE-4> Знак <F0NTx/TD>
<TD><F0NT FACE-"ARIAL" COLOR-WHITE SIZE=4> Значение <F0NT></TD>
<TDxF0NT FACE-"ARIAL“ COLOR-WHITE SIZE=4> Кто ввел <F0NTx/TD>
<TDxF0NT FACE-"ARIAL" COLOR-WHITE SIZE=4> Год <F0NTx/T0></TR>
<TRxTD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDl"xFONT COLOR-YELLOW
SIZE-3>= <F0NT></TD>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDl"xFONT COLOR-YELLOW SIZE=3>paeeHCTBO
<FONT></TD>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDlnxFONT COLOR-YELLOW
SIZE-3>P. PeKopfl<FONTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR =“#OOCEDl"xFONT COLOR-YELLOW
SIZE=3>1557<F0NTx/T0x/TR>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#00CEDl”xFONT COLOR-YELLOW S1ZE=3>
&gt. & lt <FONTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR =''#OOCEDl"xFONT COLOR-YELLOW SIZE-3>6onbuie. меньше
<FONTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDl"xFONT COLOR-YELLOW
SIZE=3>T. ГappMOT<F0NTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDl“xFONT COLOR-YELLOW
SIZE-3>1631<F0NTx/TDx/TR>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDl"xFONT COLOR-YELLOW
SIZE-3>&para <FONTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDl“xFONT COLOR-YELLOW SIZE-З^тношение длины
окружности к диаметру <FONTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDl"xFONT COLOR-YELLOW
SIZE=3>y. A*ohcoh<FONTx /TD>
<T0 align-LEFT VALIGN-TOP BGCOLOR ="#OOCEOrxFONT COLOR-YELLOW
SIZE=3>1706<F0NTx/T0x/TR>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDl"xFONT COLOR-YELLOW SIZE=3>&times
<FONTx/TO>
<TD align-LEFT VALIGN-TOP BGCOLOR =''#OOCEDl"xFONT COLOR-YELLOW БігЕ=3>умножение
<FONT></TD>
<TD align-LEFT VALIGN-TOP BGCOLOR =“#OOCEDl"xFONT COLOR-YELLOW
SIZE=3>y.OyTpefl<FONTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR -"lOOCEOr’xFONT COLOR-YELLOW
SIZE-3>1631<T0NTx/TDx/TR>
<TD align-LEFT VALIGN-TOP BGCOLOR ="#OOCEDl"xFONT COLOR-YELLOW
SIZE=3>log <FONTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR -"#OOCEDl"xFONT COLOR-YELLOW
SIZE-3>norapM$M<F0NTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR -”#OOCEDl"xFONT COLOR-YELLOW
SIZE«3>H Kenneo<FONT></TD>
<TD align-LEFT VALIGN-TOP BGCOLOR -"#OOCEDl”xFONT COLOR-YELLOW SIZE-3>1624<FONTx/TD>
</TR>
<TD align-LEFT VALIGN-TOP BGCOLOR -”#OOCEDrxFONT COLOR-YELLOW
SIZE-3>sin <FONTx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR -"#OOCEDlnxFONT COLOR-YELLOW
БігЕ-3>синус <FONTx/TD>
продолжение &
148
Урок 8. Таблицы
Листинг 8.28 ( продолжение)
<TD align-LEFT VALIGN-TOP BGCOLOR -"#OOCED1“><FONT COLOR-YELLOW
SI ZE-3>B. Кавальери<ҒООТx/TD>
<TD align-LEFT VALIGN-TOP BGCOLOR «=,'#OOCED1,’><FONT COLOR-YELLOW SI2E-3>I632<FOKTx/TD> </TR>
<TD allgn-LEFT VALIGN-TOP BGCOLOR -"#00CEDl"xFONT COLOR-YELLOW
SIZE-3>cos <FONTx/TO>
<TO allgn-LEFT VALIGN-TOP BGCOLOR -"#00CEDl”xFONT COLOR-YELLOW SIZE-Зжосинус
<FONT></TD>
<TO allgn-LEFT VALIGN-TOP BGCOLOR -"#00CE01“xFONT COLOR-YELLOW
SIZE-3>il. 3feiep<F0NT></TO>
<TD allgn-LEFT VALIGN-TOP BGCOLOR -”#OOCEDl"xFONT COLOR-YELLOW SIZE-3>1748<FONTx/TD>
</TRx/TBODY></TABLEx/CENTERx/BODYx/HTML>
Пример таблицы с общим заголовком и отдельными заголовками столбцов пока­
зан на рис. 8.29 (листинг 8.29).
3 Таблица с общ ей подписью и отдельны м и за го л о в к а м и стол бц ов - M icro so ft Internet
m i
•O
•
i:
j t «* •
V P
Йдбрвнмо*
t I t
щ !»i
• л*
щш
Tf<
—
»C:\Nina\PITER\KH НТМІЛСО\Г<им 8Mrslng8 29h(m
» » * 4 •* « « i i
i ■>
»k jk
Заголовок таблицы
Заголовок 1 Заголовок 2 Заголовок 3
{Ячейка 11
[Ячейка 21
Ячейка 12
|Ячейка13
[Ячейка 22
Ячейка 23
■
/• • •
[Ячейка 31
< ш
і м
м
м
>і> е е е —
е і# >
е
Ячейка 32
lm-minn ш тш чш ллм м тш м in iiiii ii fnf
чейка 33
m
T Ггіііг^
Ш
Рис. 8.29. Таблица с общим заголовком и отдельными заголовками столбцов
Листинг 8.29. Пример создания таблицы с общим заголовком и отдельными
заголовками столбцов
<HTML><HEAD><TITLE>Ta6pnqa с общим заголовком и отдельными заголовками
столбцов</Т1Т!_Е></НЕА£)>
<B0DY BGCOL0R=#66ООҒҒ>
<TABLE B0RDER*5 CELLSPACING*4>
<CAPTI0N> Заголовок таблицы </CAPTI0N>
<TRxTH BGCOLOR-” FFFFFF н>3а головок 1
<TH BGCOLOR*"FFFFFD">3a головок 2
<TH BGCOLOR-1*FFFFFE v>3a головок 3
<ТР><ТО>Ячейка 11 <Т0>Ячейка 12<Т0>Ячейка 13
<TR><TD>Ячeйкa 21 <Т0>Янейка 22<Тй>Ячейка 23
<ТН><ТО>Ячейка 31 <ТО>Ячейка 32<Тй>Ячейка 33
</TAIL E></BODYx/HTML>
—
Пример таблицы с общим заголовком и отдельными заголовками столбцов и строк
показан на рис. 8.30 (листинг 8.30).
Примеры таблиц
149
^ Таблице с общей подписью и отдельными заголовками столбцов и строк ^
woSwiiCwOS&wBKwSflgKsSvfloO&QftSSi^^
^ Л Т Л Ч ’Л Т » .
| • • .> « » л я K lfln rrfW b V W V I 1
;v>x
А \7 Г*У У Т »эт>
| < У У У Ү ^ ІГ у Г д ^
І^ У А - А У ^ Д , . У » , Л , 6 У а У ^ У - У Л > У . Ц Ц У Л У ^ У ^ У < , . У . У У У . Г № ,- У
L » K k \ i y > / c Z t • * **• * %УVV/**
- №
й
! А
y f ^^gyv y ^ ^VTa / J^ / ^ T X JB
У
^ ^ / / - Х
^ ^ ^ л ^ Х
^ Х
^ >
; .' vjikl
A B
• •
.............. * • » • • w
«
€ w ' • f C v n > / О Я Х А С & л t* X v X C \ v W
Л ^ в П П п Л Л М М
Х
Щ ШИ
Ш
№
Д
8
^ rf& rw w X < u
C:\Nina\PiTER\KH HTML\CD\T лава
Заголовок таблицы
Заголовок !Заголовок Заголовок Заголовок
[Заголовок Ячейка 11
Заголовок
Ячейка 12
Ячейка 13
Ячейка 14
Ячейка 22
Ячейка 23
Ячейка 24
«а»
Рис. 8,30. Таблица с общим заголовком и отдельными заголовками столбцов и строк
Листинг 8.30. Пример создания таблицы с общим заголовком и отдельными
заголовками столбцов и строк
<HTMLxHEAD><TITLЕ>Таблица с общим заголовком и отдельными заголовками столбцов
и CTpoK</TITLEx/HEAD>
<B00V BGCflLOR-#EE0066>
<TABLE BORDER-5 CELLSPACING=4>
<CAPTI0N> Заголовок таблицы </CAPTI0N>
<TRxTH BGCOLOR-TFFFFF*>
<TH BGCOLOR-"FFFFFF">3aголовок 1
<TH BGCOLOR-" FFFFf'F“>3a головок '2
<TH BGCOLOR-’ FFFFFF">3aголовок 3
<TH BGC0 L0 R=,,FFFFFF“>3 a головок 4 </TR>
<TR> <TH BGCOLOR-"FFFFFF">3aголовок 5
<ТОЯчейка 11<Т0>Ячейка 12<Т0>Ячейка 13<Т0>Ячейка 14 </TR>
<TRxTH BGCOLOR-” FFFFFF”>3a головок 6
<Т0>Ячейка 21<Ю>Ячейка 22<Т0>Ячейка 23<Т0>Ячейка 24 </TR>
</TABLEx/BODY></HTML>
Пример таблицы с объединенными ячейками в столбцах и строках показан на
рис. 8.31 (листинг 8.31).
Листинг 8.31. Пример создания таблицы с объединенными ячейками в столбцах и строках
<HTML><HEADxTITLE>Tаблица с объединенными ячейками в столбцах и строках </TITLEx/HEAD>
<B00Y BGCOLOR—#ЕЕ0011>
«TABLE BORDER-4 CELLSPACING-0 >
«САРТI0N>3aголовок таблицы «/capt1on>
« T R x T D B G C O LO R -" FFFFFF">3aголовок 1
«TD BGCOLOR-” FFFFFF">3a головок 2
«TRxTD ROWSPAN-3 BGCOLOR-"FFFF FF" >Ячейка 1
150
Урок 8. Таблицы
<Т0>Ячейка 2
<Т1?><Т0>ЯчеЙка 3
<ТР><ТО>Ячейка 4
<TR><TD COLSPAN-2 BGCOLOR-'FFFFFF"
<TR><TD COLSPAN-2 BGC010R«"FFFFFF“
<TR><TD COLSPAN-2 BGC0L0R-"FFFFFF"
<TR><TO COLSPAN-2 BGCOLOR-TFFFFF"
</TABLE> </BODYx/HTML>
ALIGN*"CENTER">fl4efiKa
ALIGN-“CENTER">fl4efiKa
ALIGN-“CENTER">fl4eftKa
ALIGN-"CENTER”>fl4eftKa
5
6
7
8
д Таблица с объадниеииынм ячейками в столбцах и строках - MiciotoH Internet Cgpfoiei
Ф<аАл
Правка
ид
Избранное
Обновить
C:\Nina\PtTER\KH HTML\CDST/iaea 8\fetng&31.htm
Заголовок таблицы
Заголовок 1 Заголовок 2
Ячейка 2
Ячейка 5
Ячейка 6
Ячейка 7
Ячейка 8
Рис. 8.31. Таблица с объединенными ячейками в столбцах и строках
Пример таблицы со сложным объединением ячеек в столбцах и строках показан
на рис. 8.32 (листинг 8.32).
3 Объединение ячеек всто й бц аки
Фан»
аголовок
аголовок
Рис. 8.32. Таблица со сложным объединением ячеек в столбцах и строках
Примеры таблиц
151
Листинг 8.32. Пример создания таблицы со сложным объединением ячеек в столбцах
и Строках
<НТМ1хНЕАО<Т1Т1.Е>Объединение ячеек в столбцах и строках</Т1Т1Е></НЕА0>
<BCDY BGC0L0R=#DDEE11>
<TABLE BORDER-4 cellspacimg-o >
<TR><TD BGC0L0R-"FFFFFF">3aголовок 1
<TD BGCOLOR-”FFFFFF"> Заголовок 2
<TD BGCOLOR-" FFFFFF“>3a головок 3
<TD BGCOLOR-" FFFFFF">3a головок 4
<TRxTD ROWSPAN-4 COLSPAN-2 BGCOLOR-”ҒҒҒҒҒҒ“>Ячейка 1
<ТйхТО>Ячейка 2<TD R0WSPAN=3> Ячейка 5
<ТК><ТО>Ячейка 3
<ТИ><ТВ>Ячейка 4
<TRxTD ROWSPAN-4 COLSPAN-2 BGCOLOR-**ҒҒҒҒҒҒи>Ячейка 6
<TR><TD COLSPAN-3 BGCOLOR-“WHITE" ALIGN="CENTER">Ячейка 7
<nAiLEx/TABLEx/BODYx/HTML>
Пример таблицы, размещенной в ячейке другой таблицы, показан на рис. 8.33
(листинг 8.33).
а
Объединение ячеек в столбцам и строкам * M icrosoft Internet
.■ .
- - - ----------
—
-----------
■ ■ м ай —
.1
f
т
0:\Книги\Учвбный курс\НТМ\СО\Г пава
Ячейка 3-1 Ячейка 4-1
Рис. 8.33. Таблица, которая размещается в ячейке другой таблицы
Листинг 8.33. Пример создания таблицы, которая размещается в ячейке другой таблицы
<HTMLxHEADxTlTLE>06beflHHeHHe ячеек в столбцах и cipoKax</TITLEx/HEAD>
<B0DY BGC0L0R-#0DEEFF>
<TABLE BORDER-5 CELLSPACING=0>
<TRxTD BGC0L0R="FFFFFF">fl4efiKa 1
<TD>
<TABLE B0RDER-3>
«71><Т0>Ячейка 2-1
<ТОЯчейка 2-2
<те><ТО>Ячейка 3-2
<Т0>Ячейка 4-2
</TABLE>
<TD BGGOLOR^FFFFfF ">Ячейка 5
<TRxTD BGC0L0R="FFFFFF”>fl4eMKa 3-1
<TD BGC0L0R-”FFFFFF">fl4eftKa 4-1
<TD ҒҒҒҒҒҒ-"ҒҒҒҒҒҒ">Ячейка 6-1
</TABLEx/B00Yx/HTML>
152
Урок 8. Таблицы
Примеры трех таблиц, состоящих из одной ячейки и имеющих рамки разной
толщины, показаны на рис. 8.34 (листинг 8.34).
1 Объединение ячеек в столбцам и строкам » M icrosoft In tern et Ь іЫ огег
Сервис
Остановить
Адрес
0:\Книги\Уче6ный курс\ИТМ\СО'\Главв 8\Iistlng8,12.htm
Одна ячейка
Одна ячейка
Рис. 8.34. Таблицы, состоящие из одной ячейки
Листинг 8.34. Примеры таблиц, состоящих из одной ячейки
<HTML><HEAD><TITLЕ>0бъединейие ячеек в столбцах и строках</Т1ИЕх/НЕА0>
<B0DY BGC0L0R=#DDEEEE>
<TABLE BORDER-4 CELLSPACING-3 CELLPADDING-10>
<TRxTD BGCOLOR»"ҒҒҒҒҒҒ">Одна ячейка </TABLE>
<TABLE BORDERS CELLSPACING-20 CELLPADDING-10>
<TR><TD BGCOLOR-"FFFFFF">0днa ячейка</ТАВЕЕ>
<TABLE BORDER-4 CELLSPACING-40 CELLPADDING-10>
<TRxTB BGCOLOR-" FFFFFF">0дна ячейка</ТАВЕЕ>
</B0DY></HTML>
Подведем итоги
В этом уроке рассказано о создании таблиц. Тег <TR> определяет строку табли­
цы, тег <C0L> — столбец таблицы, тег <TD> — ячейку таблицы, тег <ТН> — заголо­
вок таблицы, тег <CAPTI0N> — подпись таблицы. Все эти теги должны распола­
гаться внутри тегов <TABLE> и </TABLE>.
Поскольку таблицы имеют в веб-дизайне очень важное значение (они используют­
ся не только в качестве собственно таблиц, но и как средство точного позициони­
рования элементов на веб-странице), рассмотрено очень много примеров таблиц.
Урок 9
Формы
Ф орм ы представляют собой важные элементы H T M L -страниц,
позволяющие разработчикам страниц интерактивно взаимодей­
ствовать с посетителями. С их помощью пользователь может
посылать комментарии по поводу посещения определенного
узла, пересылать запросы, регистрироваться. Разработчик за­
дает вопросы, создавая форму, а пользователь отвечает на них,
заполняя ее. Форм а создается при помощи различных тегов
и атрибутов, заключенных в пару тегов <F0RM> и </F0RM>.
В этом уроке рассматриваются методы создания форм.
154
Урок 9. Формы
Создание форм
Формы предназначены для ввода информации. Все формы начинаются тегом
<F0RM> (от англ. form — форма) и завершаются тегом </F0RM>. У формы могут
быть атрибуты NAME, ACTION, METHOD, TARGET.
О Атрибут NAME. Атрибут NAME определяет имя формы и обычно не указыва­
ется. Применяется для идентификации формы, если в документе присутству­
ет несколько форм.
О Атрибут ACTION. Обязательный атрибут ACTION задает U R L -адрес програм­
мы, которая будет вызываться для обработки формы.
О Атрибут METHOD. Атрибут METHOD определяет способ отправки параметров
формы. Принимает значение GET или POST. В настоящее время использование
метода GET не рекомендуется.
О Атрибут TARGET. Атрибут TARGET определяет окно, в которое возвращается
результат обработки отправленной формы. Возможные значения SELF, PARENT,
TOP, BLANK или явно указанное имя окна.
Пример элементарной формы показан на рис. 9.1 (листинг 9.1). Имеющиеся на
форме поля ввода задаются тегом <INPUT>. Атрибут SIZE регулирует длину поля
ввода.
Формы - M icrosoft In tern et Explorer
М оя первая форма
Рис. 9.1. Веб-страница, содержащая элементарную форму
Листинг 9.1. Пример создания веб-страницы, содержащей элементарную форму
<HTML>
<HEAD>
<TITLE> <DopMbi</TITLE>
</HEAD>
1
<B0DY> <F0RM>
<CENTER><H3>Mofl первая форма</НЗ>
ПЕРВОЕ nOJIE<INPUT NAME^'TIEPBOE rW SIZE-"40"><BR>
<INPUT NAME="ВТОРОЕ ПОЛЕ"SIZE*” 60и>ВТ0Р0Е П0ЛЕ<Щ>
</CENTER> </F0RM> </B0DY>
■ </HTML>
•
^
.
ЭД Щ Й Ш
Создание форм
Создать форму легко, но трудно красиво выстроить все элементы. Эта проблема
не имеет простого решения. Можно разместить поля ввода и раскрывающиеся
списки в левой части страницы, а весь сопроводительный текст — справа. По­
скольку длина полей ввода задается атрибутом SIZE, можно выровнять строки по
левому краю, а текст справа оставить не выровненным, как в большинстве доку­
ментов. Такая форма выглядит аккуратнее. Пример такой формы показан на
рис. 9.2 (листинг 9.2).
2 ФОРМЫ - M icrosoft In tern et Explorer
тһск
Обновить
Ссылйй
КАКАЯ Ф ОРМ А ВЫГЛЯДИТ ЛУЧШ Е?
ПЕРВЫЙ
ПОСЛЕДНИЙ
ИЛИ
АДРЕС
ГОРОД
ОБЛАСТЬ
о бл а с ть!
РАЙОН
Рис. 9.2. Форма с выровненными элементами
■
щ
Листинг 9.2. Пример создания формы с выровненными элементами
<HTML>
<НЕА0> <TITLE> Ф0РМЫ</Т1Т1Е> </НЕА0>
<B0DY> <F0RM>
<CENTERxH2>KAKAR ФОРМА ВЫГЛЯДИТ ЛУЧШЕ?</Н2>
<TABLE><TR><TD>
ПЕРВЫЙ <INPUT NAME-"ПЕРВЫЙ"SIZ Е="20"><8R>
ПОСЛЕДНИЙINPUT NAME»"ПОСЛЕДНИЙ’’SIZ E-" 20" xBR>
AflPEC<INPUT NAME=”AflPEC"SIZE” "20"xBR>
Г0Р0Д<I NPUT NAME-“ГОРОД" S I ZE-" 20” xBR>
0БЛАСТЬ<INPUT NAME="06nACTb"SIZE-"20"xBR>
РАЙ0Н<INPUT NAME-" РАЙОН" SIZE-" 20"><BRx/TD>
<TDxH3>WlH</H3x/TD>
<TD>
<INPUT NAME-"ПEPBЫЙ"SIZE“ "20"> llERBb|W<BR> v
<INPUT NAME-"ПОСЛЕДНИЙ" SI ZE=" 20> TOOEflHHH<BR>
<I NPUT NAME=’”AflPEC”SIZE=B20"> AflPEC<BR>
<I NPUT NAME-TOPOfl''SIZE-"20"> Г0P0fl<BR>
«INPUT NAME-"ОБЛАСТЬ’’S I ZE-"20"> ОБЛАСТЬ<ВР>
<INPUT NAME-"РАЙОН^ІZE-"20”> РАЙ0Н</Т0>
</TRx/TABLEx/FORM></CENTER>
</B00Yx/HTML>
156
Урок 9. Формы
Размещение на форме элементов
управления
Для создания полей ввода, с которыми мы познакомились в предыдущем разде­
ле, и других элементов управления используется тег <INPUT> (от англ. input —
ввод). Тег имеет атрибуты NAME, SIZE, CHECKED, MAXLENGTH, SRC, TYPE.
О Атрибут NAME. Атрибут NAME определяет имя поля ввода. Данное имя ис­
пользуется как уникальный идентификатор поля, по которому впоследствии
можно получить данные, введенные пользователем в это поле.
О Атрибут SIZE. Атрибут SIZE определяет размер поля ввода в символах.
О Атрибут CHECKED. Атрибут CHECKED используется с флажками и переклю­
чателями. Он означает, что флажок или переключатель, имеющий этот атри­
бут, при открытии страницы будет установлен.
О Атрибут MAXLENGTH. Атрибут MAXLENGTH определяет количество сим­
волов, которое пользователи могут ввести в поле ввода. При превышении
этого количества браузер отреагирует на попытку ввода нового символа
сигналом
с атрибутом SIZE, который определяет количество видимых в поле символов.
окажется
появится возможность прокрутки. По умолчанию значение MAXLENGTH равно
бесконечности.
О Атрибут SRC. Атрибут SRC задает U R L -адрес, указывающий на изображение
(используется совместно с атрибутом IMAGE).
О Атрибут TYPE. Атрибут TYPE определяет тип элемента управления. По
умолчанию это однострочное поле ввода. Все остальные типы должны быть
явно указаны.
флажок
ется для передачи в вызываемую программу простых логических значении
(ON или OFF), заданных пользователем.
□ Значение HIDDEN скрывает элемент управления — он не отображается
браузером и не дает пользователю возможность изменить присвоенное
ему по умолчанию значение. Такой элемент управления используется для
идентификато
передачи в программу неизм
ра пользователя или пароля.
□ Значение IMAGE позволяет связать с именем элемента управления изобра­
жение. При щелчке мышью на таком изображении будет немедленно вы­
звана ассоциированная с формой программа.
□ Значение PASSWORD внешне не меняет поле ввода, но вводимое пользовате­
лем значение не отображается браузером на экране.
переключатель
ляет выбрать одно значение из нескольких, задаваемых переключателями
с разными значениями атрибута VALUE, но с одинаковыми значениями
Размещение на форме элементов управления
157
атрибута NAME. В вызываемую программу будет передано значение
NAME*VALUE, причем VALUE примет значение установленного переключате­
ля. При установке одного переключателя все остальные автоматически
\сбрасываются.
□ Значение RESET превращает поле ввода в кнопку, при щелчке на которой
все элементы управления формы примут значения, заданные для них по
умолчанию.
□ Значение SUBMIT превращает поле ввода в кнопку, при щелчке на которой
будет вызвана ассоциированная с формой программа или произойдет пе­
реход по заданному U R L -адресу.
□ Значение TEXT описывает однострочное поле ввода. ^Используйте атрибуты
MAXLENGTH и SIZE для определения максимальной длины вводимого значе­
ния в символах и размера поля ввода (по умолчанию 20 символов).
О Атрибут VALUE. Атрибут VALUE позволяет присвоить элементу управления
значение по умолчанию или значение, которое будет присвоено атрибуту
NAME при установке соответствующего переключателя (для типа переключа­
теля данный атрибут обязателен).
Пример формы с переключателями (TYPE=RADI0) показан на рис. 9.3 (листинг 9.3).
j Пример формы - M icrosoft Internet
правк
Остановить
щвнал
Поиск
0:\Книги\Уче6мый курс\НТМЦСО\Г лава 8\lsting8.12.htm
Г> 9600 бит/с
С 14400 бит/с
С 28800 бит/с
Ш 56600 бит/с
Рис. 9 .3 .
Форма с переключателями
Листинг 9.3. Пример создания формы с переключателями
ч
<HTML>
<HEAD>
<TITLE>npHHep фориы</ТІ^Е>
</HEAD>
<body>
<INPUT
<INPUT
<INPUT
<INPUT
TYPE-RADIO
TYPE-RADIO
TYPE-RADIO
TYPE-RADIO
NAME-modem
NAME-modem
NAME*modem
NAME-modem
>
: Ш жm
VALUE*"9600" CHECKED> 9600 бит/с <BR>
VALUE*"14400" CHECKED> 14400 6ht/c<BR>
VALUE*"28800" CHECKED> 28800 6ht/c<BR>
VALUE*"56600" CHECKED> 56600 бит/c<BR>
:.
;
</B0DY>
</HTML>
В листинге 9.4 представлен пример создания формы, содержащей кнопку от­
правки данных (TYPE=SUBMIT). Сама форма показана на рис. 9.4.
I
158
Урок 9. Формы
Листинг 9.4. Пример создания формы с кнопкой отправки
<HTMLxHEAD> <Т1ПЕ>Атрибут SUBMIT</TITLE> </HEAD>
<B0DY>
<F0RM ACTI0N=*www.pite r.ru METH0D«P0ST>
<INPUT SIZE*40 NAME*text VALUE*"значение no умолчанию">
<INPUT TYPE^SUBMIT VALUE*"OTnpaBKa запроса" уа1ие*,,опу6ликовать"> </F0RM>
</B0DY></HTML>
3 Атрибут SUBM IT * M icrosoft In te rn e t Explorer
значение по умолчанию
Рис. 9.4. Форма с кнопкой отправки
В отличие от переключателей, в группе флажков (TYPE=CHECKBOX) с одинаковы­
ми именами может быть установлено сколько угодно флажков. В листинге 9.5
приведен пример создания формы с флажками, причем, как показано на рис. 9.5,
при открытии формы второй и третий флажок оказываются установленными,
поскольку для них указан атрибут CHECKED.
лажкм - M icrosoft Internet Exploiei
I C:\Nina\PITER\KH НТМІЛСОУлава 9\lis»ing9.5.Wm
(Значение по умолчанию
г Всемирная паутина
I? Hyper Text Transfer Protocol
F Hyper Text Markup Language
Рис. 9.5. Форма с флажками
Списки выбора
159
Листинг 9.5. Пример создания формы с флажками
\HTML>
' 4 - '. ■
"
<ЩAD><TI TLЕ>Флажки</ТI TLE x /НЕА0>
<BQDY BGC0L0R-H#DC143C">
<F0RM METHOO-POST ACTION -www.piter.ru>
<INPUT TYPE-TEXT NAME-TEXT
VALUE*"Значение no умолчанию" SIZE-40>
<INPUT TYPE-SUBMIT VALUE*0ny6/iHKOBaTb> <BR>
<INPUT TYPE-CHECKBOX NAME-COMP VALUE-"WWW"> Всемирная паутина <BR>
<INPUT TYPE-CHECKBOX NAME-COMP VALUE- 1,,HTTP,,CHECKED> Hyper Text Transfer Protocol <BR>
<INPUT TYPE-CHECKBOX NAHE-COMP VALUE-"HTMLMCHECKED> Hyper Text Markup Language
</FQRM>
</B0DY>
</HTML>
В листинге 9.6 приведен пример создания формы с полем для ввода пароля
(TYPE=PASSWORD). При вводе информации в такое поле она отображается в виде
звездочек (рис. 9.6).
Ш В во д пароля - M icrosoft In tern et Explorer
И
D:\Книги\У чебньій курс\НТМ\СО\Г лава 8\listlng8.12.htm
Рис. 9.6. Форма с полем для ввода пароля
Листинг 9.6. Пример создания формы с полем для ввода пароля
<HTML>
<HEADxTITLE> Ввод пароля </TITLE></HEAD>
<B00Y>
<F0RM METHOD-POST ACTION -www.piter.ru>
<INPUT TYPE-PASSWORD NAME-TEXT VALUE-'Введите значение" SIZE-40 MAXLEGTH=40><BR></F0RM>
</B0DY>
</HTML>
Ы
Списки выбора
Для создания на форме списков, позволяющих выбрать одно или несколько
значений из множества возможных, используется парный тег <SELECT>. По*
умолчанию в поле списка отображается его первый элемент.
Элемент списка создается с помощью тега <0PTI0N>. В листинге 9.7 представлен
пример использования тегов <SELECT> и <0PTI0N> (рис. 9.7).
160
Урок 9. Формы
Листинг 9.7. Пример создания веб-страницы, содержащей список выбора
<HTML><HEADxTITLE> OopMbi</TITLE></HEAD>
<B0DY>
<Н1 ALIGN4EFT> Устройства ввода-вывода компьютера</Н1>
<F0RM>
<SELECT NAME*group>
<0PTI0N> Клавиатура
<QPTI0N> Мышь
•
<0PTI0N> Монитор
<0PTI0N> Принтер
<0PTI0N> Гибкий магнитный диск
<0PTI0N> CD-диск
<0PTI0N> DVD-диск
<0PTI0N> Синхронизатор с карманным ПК </SELECT>
</FORM></BODY></Hm>
Ж С*
« V A iU V V i
A '
3 Формы - Microsoft: In tern et Explorer
ҒгЛи
т^адді
і Ктй
•
%
A
<
%
if
J kv
*
% % % • • 0 7 * •’I *
^
^V
^
*
*•
*
'v
>
A
I «Ж и д ■»
1 шИ •V
11
H W C a
• l* Я Д 4 Т m A
■’ •
ййыР
й
#rf*JAM*
'*
ү
.
w
У аА аД х
1
v v v X tX v r J
*
I \
\
1J
■
\\
V
»
I
•
1
Й
/
•
—
•
»•
#
»•
»
»
«
I•
I •
»
•
*•
*■
%
V
••
tv
■ШK J m Ш
£■'лУ-<у±
A ’« V k
« >
(Л
W
- N
M
w
H
f t v / .. •
. . * . x v A > > r o 5 v w « v A X y - ‘. . .
fZatit.
>4v
#* *• r
МОПЕлС
■
£
Я
*
*
•»,•«-»* ч і
№
шш
K Z QW
h
* * • # >w •<
и
** V 5 o £ V .
V
У
5
й
* # • А / * ■Л
^
р
>
I
лү
Ж I 1 • %»
£э
A M^V I
•
л
D:\Книги\Уче6ный Kypc\HTML\CD\T лава 8\6sting8.12.htm
i f
—
I
I H
I
f
H
■ i
Ck •«
■ Ад
VKvUIr^
f
ЩшШИВ
i
f
f
У стройства ввода-вывода ком пью тера
(кла ви а тур а
{Ш
............................ Я
Кпөвиатчра
Мышь
Монитор
Принтер
Гибкий магнитный диск
CD-диск
DVD-диск
Синхронизатор с карманным ПК
мм |
л
}•
•
«
•
*
•
•
«
#
»
•
*
•
•
•
••
«
•
»
•
«
«#
•
•
f
t
^
ftf •
•
•
*
•
*•
•
•
I.M
*
А
%
М
>
у
УЛ*•
»
ViVAiУл
У f
*л
"* ■
*****
рййШ Ж Ш Ш Ю
■Жйі.аК'
IE
ММР
Р ис. 9.7. Веб-страница с раскрытым списком выбора
Список выбора, создаваемый тегом <SELECT>, не обязательно является одно­
строчным. Количество одновременно видимых на экране элементов списка зада­
ется атрибутом SIZE. Если количество элементов списка превышает значение,
указанное в атрибуте SIZE, справа появляется полоса прокрутки. Чтобы в списке
одновременно можно было выбрать несколько элементов (с помощью клавиши
Shift или Ctrl), применяется атрибут MULTIPLE, который задает максимальное ко­
личество одновременно выбранных элементов. Пример использования тега <SELECT>
с атрибутами SIZE и MULTIPLE показан на рис. 9.8 (листинг 9.8).
Листинг 9.8. Пример создания многострочного списка
<HTML><HEAD><TITLE> Тег SELECT MULTIPLE < /T IT L E x/H E A D > .
<B0DY>
<F0RM>
<SELECT NAME-group SIZE=4 MULTIPLE=2>
<0PTI0N> Запись на форнный
цилиндр;
в
■•;
Списки выбора
161
<0PTI0N> Запись на форму;
<0PTIQN> Запись на фотоформу:
<0PTI0N> Печатная машина;
<Q°TI0N> Прямая запись:
</'S£LECTx/FORMx/BODYx/HTML>
а Тег SELECT M ULTIPLE - M icrosoft In tern et Е х Щ Щ
Запись на формный цилиндр
Запись на форму;
Запись на фотоформу:
Печатная машина;
етово
Рис. 9.8. Многострочный список на форме
В теге <0PTI0N> обязательно надо указывать атрибут VALUE. Только в этом случае
программа, ассоциированная с формой, сможет определить, какой элемент спи­
ска выбран. Соответствующий пример показан на рис. 9.9 (листинг 9.9).
Ц SELECT.HTM - M icrosoft In tern et Explorer
ж»
0:\Книги\Учебный курс\НТМ1\С0\Глава
Форматы графических файлов:
- QrapMcs і Д Д Д і ЭЙЙЙ
компьютер
Готово
Рис. 9.9. Список, в котором используется атрибут VALUE
Листинг 9.9. Пример создания списка, в котором используется атрибут VALUE
<HTML>
<HEADxTITLE> SELECT.HTM </TITLEx/HEAD>
<B0DY>
<F0RM>
Форматы
«SELECT
OPTION
OPTION
OPTION
OPTION
графических файлов:
NAME“ " 6 IF - Graphics Interchange Format”?
SELECTED VALUE-"Graphics Interchange Format'? GIF - Graphics Interchange Format
VALUE-"JPEG"> JPEG * Jo in t Photographic Expert Group
VALUE” ”PNG">PNG - Portable Network Graphic
VALUE-”BMP'">BMP - B it Map - битовая карта
</SELECT> </F0RM>
</B0DY> </HTML>
162
Урок 9. Формы
Многострочные текстовые поля
Для создания на форме многострочных текстовых полей, позволяющих пользо­
вателю вводить большие объемы информации, служит тег <TEXTAREA>. Этот тег
имеет атрибуты NAME, ROWS, COLS.
-*
, .„hj. XT* }■.
О Атрибут NAME. Атрибут NAME задает имя поля ввода.
О Атрибут ROWS. Атрибут ROWS задает высоту поля ввода в символах.
О Атрибут COLS. Атрибут C0LS задает ширину поля ввода в символах.
Для того чтобы в поле ввода по умолчанию при открытии формы выводился
какой-либо текст, его необходимо вставить между тегами <TEXTAREA>
и </TEXTAREA>.
Пример использования тега <TEXTAREA> показан на рис. 9.10 (листинг 9.10).
Э Ter TEXTAREA - M icrosoft In tern et Explorer
ІІш
і
URL
Uniform Resource Locator - унифицированный
указатель ресурса
Стандартный способ адресации файлов в 1TOV
EPS
[Encapsulated PostScript
Формат; позволяю щ ий сохранять графические
изображения и переносить их из одного приложения
в другое.
Рис. 9.10. Форма с многострочным текстовым полем
Листинг 9.10. Пример создания формы с многострочным текстовым полем
<HTML><HEAD><TITLЕ>Тег TEXTAREA </TITLE></HEAD>
<B0DY>
:
<F0RM>
. ...
.
<TEXTAREA МАМЕ=Тлоссарий" ROWS=10 CQLS=50>
URL
,
".
Uniform Resource Locator - унифицированный указатель ресурса
Стандартный способ адресации файлов в WWW
EPS
Encapsulated PostScript
Формат, позволяющий сохранять графические изображения и переносить их из одного
приложения в другое.
**г
л '
?
</TEXTAREA>
</F0RM></B0DY>
'ц ІЙ М ';
</HTML>
'
.* Ш I
ш
Подведем итоги
163
Подведем итоги
I
В этом уроке рассказано, как создавать формы, позволяющие разработчикам ин­
терактивно взаимодействовать с посетителями своих страниц. Такое взаимодей­
ствие происходит посредством размещаемых на форме элементов управления,
таких как однострочные и многострочные поля ввода, флажки, переключатели,
кнопки, раскрывающиеся и прокручивающиеся списки. Для создания форм ис­
пользуется тег <F0RM>, для создания элементов управления — тег <INPUT>, для
создания списков — тег <SELECT>, для создания многострочных полей ввода — тег
<TEXTAREA>.
Фреймы позволяют разбивать веб-страницы на подокна, при­
чем каждое подокно (фрейм) может иметь собственные поло­
сы прокрутки и функционировать независимо от других подо­
кон либо, наоборот, — управлять их содержанием. Фреймы
могут значительно улучшить внешний вид веб-страниц и по­
высить их функциональность.
Наборы фреймов
165
Свойства фреймов
Ниже перечислены некоторые свойства фреймов.
О Каждый фрейм имеет свой U R L -адрес, что позволяет обращаться к нему и за­
гружать его независимо от других фреймов.
О Каждый фрейм имеет собственное имя (задаваемое атрибутом NAME), позво­
ляющее обратиться к нему из другого фрейма.
О Размер фрейма может быть изменен пользователем прямо на экране мышью
(если это не запрещено с помощью специального параметра).
Перечисленные свойства фреймов позволяют создавать разнообразные интер­
фейсные решения.
О В отдельном фрейме, который будет все время оставаться на экране, можно
разместить статическую информацию, которую автор считает необходимым
постоянно показывать пользователю. Это может быть графический логотип
фирмы, соглашение об авторских правах, набор управляющих кнопок, оглав­
ление всех или части веб-документов, содержащихся на веб-сервере, что по­
зволит пользователю быстро находить интересующую его информацию.
О При интенсивных обращениях пользователя к веб-серверу можно постоянно
отображать на экране два фрейма — в одном фрейме пользователь будет вводить
свои запросы к серверу, а в другом видеть результаты их обработки сервером.
О Для веб-приложений, обслуживающих базы данных, можно создавать формы
с фреймами, связывая их отношениями «главный—подчиненный». Тогда в главном
фрейме будут отображаться общие данные из базы данных, а в подчиненном —
подробные данные, относящиеся к выбранному в главном фрейме элементу.
Наборы фреймов
Формат документа, использующего фреймы, внешне очень напоминает формат
обычного документа, только вместо тега <B0DY> используется парный тег
<FRAMESET>:
<HTML>
<HEAD>.. . </HEAD>
<FRAMESET>.. . </FRAMESET>
</HTML>
To есть перед тем как размещать на веб-страницы фреймы, с помощью тега
<FRAMESET> (от англ. frame set — набор фреймов) создают так называемый набор
фреймов, содержащий информацию о числе фреймов, их относительных и абсо­
лютных размерах. Тег <FRAMESET> не несет какой-либо информационной нагруз­
ки, он только описывает фреймы. Тег <FRAMESET> допускает вложения.
Общий синтаксис набора фреймов:
<FRAMESET COLS-’value" | R0WS-"va1ue">
<FRAME SRC=,,u r ll“>
<FRAME
</FRAMESET>
I
166
Урок 10. Фреймы
Общий контейнер <FRAMESET> описывает все фреймы, на которые делится экран.
Можно разделить экран на несколько вертикальных или несколько горизонталь­
ных фреймов. Для описания каждого фрейма в отдельности служит тег <FRAME>.
Между тегами <FRAMESET> и </FRAMESET> могут находиться теги <FRAME>, вло­
женные теги <FRAMESET> и </FRAMESET>, а также контейнер из тегов <N0FRAME>
и </N0FRAME>, который позволяет продублировать документ для браузеров, не
поддерживающих фреймы.
I
f
Тег <FRAMESET> допускает вложения и может иметь атрибуты COLS, ROWS, BORDER,
FRAMEB0RDER, причем атрибуты ROWS и COLS взаимоисключающие.
О Атрибут COLS. Атрибут C0LS задает количество и размеры столбцов в созда­
ваемом наборе фреймов. Значения ширины различных фреймов перечисля­
ются в кавычках через запятую в пикселах, в процентах (%) или в связанных
масштабных коэффициентах (*), например:
<FRAMESET COLS="4 hoio, число!. число*">
О Атрибут ROWS. Атрибут ROWS задает количество и размеры строк в созда­
ваемом наборе фреймов в пикселах, в процентах (%) или в связанных мас­
штабных коэффициентах (*), например:
<FRAMESET R0WS="число, числоі. число*">
Количество фреймов определяется количеством значений в списке. Общая
сумма значений высоты всех фреймов (при любом способе задания значений
атрибута) должна составлять высоту всего окна. Отсутствие атрибута ROWS
означает один фрейм высотой с окно браузера.
О Атрибут BORDER. Атрибут BORDER задает толщину обрамления в пикселах
для всех фреймов, входящих выданный набор фреймов, например:
<FRAMESET B0RDER="4HCflO”>
.
О Атрибут FRAMEBORDER. Атрибут FRAMEB0RDER позволяет отменить вывод
обрамления у фреймов независимо от значения атрибута BORDER. Значение 1
соответствует наличию, а 0 — отсутствию обрамления, например:
<FRAMESET FRAMEBORDER»" 1">
«FRAMESET FRAMEBORDER="0">
'
, ' . .,'V
Задание значений атрибута ROWS или C0LS в пикселах — далеко не самый луч­
ший способ описания высоты фрейма, поскольку пользователи могут произволь­
ным образом менять размер рабочего поля браузера, не говоря уже о различных
разрешениях экрана. Если вы все же выбрали данный способ описания размера,
настоятельно рекомендуется сочетать его с каким-либо другим, чтобы в резуль­
тате получилось 100-процентное заполнение окна браузера.
Если значения атрибута ROWS или C0LS указываются в процентах (от 1 до 100)
и общая сумма размеров описываемых фреймов превышает 100, то размеры всех
фреймов пропорционально уменьшаются, чтобы в результате получилась сумма
в 100 %. Если, соответственно, сумма меньше 100 %, то размеры пропорциональ«Г
Задание одного из значений атрибута ROWS или C0LS с единичным масштабным
коэффициентом (в этом случае указывается просто звездочка без числа) означает,
что все оставшееся место будет принадлежать данному фрейму. Если единичные
Вставка фрейма в документ с набором фреймов
167
масштабные коэффициенты указываются для двух или более фреймов, то остав­
шееся пространство делится поровну между этими фреймами. Если перед звез­
дочкой стоит цифра, то она задает масштабный коэффициент для данного фрей­
ма що сколько раз он должен быть больше аналогичного фрейма, описанного
звездочкой без числа).
Рассмотрим примеры.
C0LS="3*.*.*n
Эта запись говорит о том, что будет создано три фрейма, причем первый
фрейм займет 3/5 свободного пространства по горизонтали, а два других —по
1/5.
COLS="50S.50r
Такая запись означает деление области просмотра на две равные части.
COLS=H20X.80r
Эта запись означает деление области просмотра на неравные части (слева 20,
справа 80 %):
ROWS*"100.20%.*"
Данная запись означает деление области просмотра на три части. Первой
(верхней) отведено 100 пикселов, второй (средней) — 20 % оставшегося про­
странства, третьей (нижней) — все остальное.
COLS*”* . 3*”
,
V
;
Эта запись означает деление области просмотра на неравные части, причем
правая часть в три раза шире левой. Того же эффекта можно добиться с помо­
щью следующей записи:
C0LS-“25X.75«"
ВН И М А Н И Е
—'
Совместное использование в одном теге <FRAMESET> атрибутов C0LS и ROWS
может привести к непредсказуемым результатам.
Фреймы поддерживаются не всеми браузерами. Чтобы пользователи таких брау­
зеров могли видеть содержимое веб-страницы с фреймами, используется парный
тег <N0FRAMES>. Этот тег помещается внутри контейнера <FRAMESET>, и все, что
находится между тегами <N0FRAMES> и </N0FRAMES>, игнорируется браузерами,
поддерживающими фреймы. То есть разработчику веб-страницы нужно напи­
сать код, дублирующий содержимое фреймов другими средствами, и поместить
этот код между тегами <N0FRAMES> и </N0FRAMES>, тогда все пользователи смогут
увидеть его веб-страницу.
Вставка фрейма в документ
с набором фреймов
Как уже отмечалось, для вставки в документ отдельного фрейма служит непарный тег <FRAME> с атрибутами NAME, SRC, MARGINWIDTH, MARGINHEIGHT, SCROLLING,
NORESIZE, FRAMEBORDER.
168
Урок 10. Фреймы
О Атрибут NAME. Атрибут NAME задает имя фрейма. Имя позволяет обратить­
ся к этому фрейму в программе (это делается с помощью атрибута TARGET,
о котором рассказывается в разделе «Взаимодействие фреймов»), например
загрузить в него содержимое нового HTML-файла. Синтаксис:
NAME-"имя”
.'--г
О Атрибут SRC. Атрибут SRC задает документ, который должен отображаться
внутри данного фрейма, например:
<FRAME SRC-”10.htm">
j
.
:
=
-
Если атрибут SRC отсутствует, отображается пустой фрейм.
О Атрибут MARGINWIDTH. Атрибут MARGINWIDTH позволяет указать величи­
ну вертикальных разделительных полос между фреймами:
MARGINWIDTH-"value”
v-? '
^
Значение value указывается в пикселах и не может быть меньше единицы. Зна­
чение, устанавливаемое по умолчанию, зависит от используемого браузера.
О Атрибут MARGINHEIGHT. Атрибут MARGINHEIGHT позволяет указать вели­
чину горизонтальных разделительных полос между фреймами:
ШшШЗШ
MARGINHEIGHT-"value"
Значение value указывается в пикселах и не может быть меньше единицы.
О Атрибут SCROLLING. Атрибут SCROLLING управляет выводом полос прокрут­
ки фрейма:
SCROLLING=”yes|no| auto"
• >.
■
Значение yes указывает, что фрейм будет иметь полосы прокрутки в любом
случае, значение по — что полос прокрутки не будет. Значение auto, заданное
по умолчанию, говорит о том, что полосы прокрутки появятся только при не­
обходимости.
„ ...
О Атрибут NORESIZE. Атрибут N0RESIZE позволяет создавать фреймы без воз­
можности изменения их размеров. По умолчанию размер фрейма можно из­
менить мышью так же просто, как и размер окна Windows. Атрибут NORESIZE
запрещает такую возможность. Если у одного из фреймов установлен атрибут
NORESIZE, это лишает пользователя возможности перетаскивать границы не
только данного фрейма, но и прилегающие к нему границы других фреймов.
О Атрибут FRAMEBORDER. Атрибут FRAMEB0RDER задает обрамление у фрей­
мов и может принимать значения 1 (есть обрамление) или 0 (нет обрамле­
ния), например:
<FRAME FRAMEB0RDER=”1">
<FRAME FRAMEBORDER=“0">
• „ .
§
,
- •
r ,,
* Г,
. V ,;
Вставка фрейма в документ
без набора фреймов
Для визуализации веб-страницы в другом документе не обязательно предвари­
тельно создавать в нем набор фреймов. Фрейм можно вставить не только в доку­
мент с набором фреймов, но и в «обычный» документ. Для этого используется
Взаимодействие фреймов
169
тег <IFRAME>, который, в отличие от тега <FRAME>, вставляется не между тегами
<FRAMESET> и </FRAMESET>, а между тегами <B0DY> и </B0DY>. Тег <IFRAME> имеет
атрибуты SRC, FRAMEBOARD, MARGINHEIGHT, MARGINWIDTH, NAME, ALIGN, SCROLLING,
WIDTH, HEIGHT.
О Атрибут SRC. Атрибут SRC задает документ, который должен быть отобра­
жен во фрейме, например:
[
<1FRAME SRO"URL">
О Атрибут FRAMEBORDER. Атрибут FRAMEBORDER задает обрамление у фрей­
мов. Может принимать значение 1 (есть обрамление) или 0 (нет обрамления),
например:
I*
cIFRAME FRAMEBORDER="1">
<IFRAME FRAMEBORDER="0">
О Атрибут MARGINHEIGHT. Атрибут MARGINHEIGHT задает толщину верхней
и нижней границ обрамления в пикселах, например:
<IFRAME MARGINHEIGHT =”число">
О Атрибут MARGINWIDTH. Атрибут MARGINWIDTH задает толщину правой и ле­
вой границ обрамления в пикселах, например:
<1FRAME MARGINWIDTH*"4Mcno’ >
О Атрибут NAME. Атрибут NAME определяет имя фрейма, по которому к нему
можно будет обращаться в ссылках.
О Атрибут ALIGN. Атрибут ALIGN позволяет позиционировать фрейм по отно­
шению к тексту и принимает значения LEFT (слева), RIGHT (справа), MIDDLE
(посередине), ТОР (сверху) и BOTTOM (снизу), например:
cIFRAME ALIGN=”LEFT”>
О Атрибут SCROLLING. Атрибут SCROLLING определяет вид полос прокрутки
у фрейма и принимает значения yes (есть полосы), по (нет полос) и auto (по­
лосы появляются при необходимости), например:
«FRAME SCROLLING -"значение"*
О Атрибут WIDTH. Атрибут WIDTH определяет ширину фрейма в пикселах, на­
пример:
cIFRAME WIDTH ="число">
О Атрибут HEIGHT. Атрибут HEIGHT определяет высоту фрейма в пикселах, на­
пример:
<1FRAME НЕІӨТГ“ ‘ число’ >
Взаимодействие фреймов
При разработке страниц с фреймами возникает вопрос: «А как сделать так, чтобы,
щелкнув на ссылке в одном фрейме, инициировать появление информации в дру­
гом?*. Ответом на данный вопрос является организация взаимодействия фреймов.
Каждый фрейм может иметь собственное имя, определяемое при его создании
атрибутом NAME. Существует также специальный атрибут TARGET, позволяющий
адресовать целевой фрейм:
TARGET-"иия*
170
Урок 10. Фреймы
Данный атрибут можно указывать внутри самых разных тегов, например в ссыл­
ках:
I\
*.*•
<А HREF-"100.htm" TARGET-"Framel"> Переход во фрейм с ииенен
Framel </А>
Размещение атрибута TARGET в теге <BASE> позволяет не указывать при описании
каждой ссылки фрейм-приемник документов, вызываемых по ссылкам. Это
очень удобно, если в одном фрейме, например, находится меню, а в другом выво­
дится информация, соответствующая выбранному пункту меню:
<HTMLxHEADxBASE TARGET="FRAME1"></HEAD>
<BQDY>
-
.
-■
■ • ' ,-f--
■-jj- f | g p i ‘jj
<A HREF="URL1"> Первая часть </A>|<A HREF="URL2'> Вторая часть </A>
</body></html>
- '
Допускается включение атрибута TARGET в ссылку при создании карты изобра­
жения, например:
г
<AREA SHAPE="CIRCLE" COORDS - "100.100.50"
HREF="h ttp : //www.pi t e r .com" TARGET="FRAME1">
Атрибут TARGET можно включить в описание формы:
<F0RM ACTION = “URL" TARGET="FRAME2">
В этом случае после обработки переданных параметров формы результирующий
документ появится в указанном фрейме.
Имя фрейма в атрибуте TARGET должно начинаться с латинской буквы или циф­
ры. Также необходимо помнить, что существуют зарезервированные имена, ко­
торые начинаются со знака подчеркивания:
О _BLANK —документ, полученный по ссылке, будет отображаться в новом окне
браузера.
| ;' ;У
\
О _SELF — документ, полученный по ссылке, будет отображаться в том же фрей­
ме, в котором находится ссылка. Это имя удобно использовать для переопре­
деления окна назначения, указанного ранее в теге <BASE>.
О _PARENT — документ, полученный по ссылке, будет отображаться в родитель­
ском окне вне зависимости от атрибутов тега <FRAMESET>. Если родительского
окна нет, то данное имя аналогично имени _SELF.
О _Т0Р — документ, полученный по ссылке, займет все окно вне зависимости от
наличия фреймов. Использовать это имя удобно в случае вложенных фрей­
мов.
Любые другие имена фреймов, начинающиеся со знака подчеркивания, игнори­
руются браузером.
Примеры использования фреймов
В первых двух примерах представлены веб-страницы, состоящие из горизон­
тальных (используется атрибут ROWS) фреймов.
В примере, представленном на рис. 10.1 (листинг 10.1), соотношение верхнего
и нижнего фреймов составляет двенадцать к пяти.
171
Примеры использования фреймов
2 горизонтальных фрейма - M icrosoft Internet Explorer
—
г*.
» 4 V W /o e 4 V b Л
..^ ' J .' A W b V W ^ A V
И
Л Л іҮ
% »\УУЧд I
воровоооиЯиіиИИВДіИ^ЦІДДДРу5
222255222552511
^ b o & > x o 3co^>?v0 ^ q q T O L ,> J P w ^ Q C ,.OYl
i>>iV^V-^^TS^‘T~rt-ii-ii-> ^ У у < у Ж * Л
МЖ™!?отгДІ
•-*-4 • - V . « W iS V » ♦ •“►/*
• V p .W f V ^ * ! * .»У
и*
...л®*'-'
4
М9>ЯЙВ
я
ЮООС » f f . w / w * \ M ? g w o
A W A *.
Гото»
.V A/ W
V A \ t A 4 V \V » V
V • - \ • ■J \CРT« VS IS*y• L^ .
t
: в | п pllf
1 «*»*• .« ,*«*»* ■
1
. . м
1
Рис. 10.1. Два горизонтальных фрейма
Листинг 10.1. Пример создания веб-страницы, содержащей два горизонтальных фрейма
<HTML>
<HEAD>
• ^ | ■?
• |
Ш
'І
<TITLE> 2 горизонтальных фрейма</ТІИЕ>
<FRAHESET FRAMEB0RDER=1 BORDERS 5” ROWS="480.20QH>
<FRAME SRC3S"l.htm">
<FRAME SR O ”2.htm">
</FRAMESET>
</HTML>
В примере, приведенном на рис. 10.2 (листинг 10.2), верхний и нижний фреймы
составляют 30 % от высоты экрана, а средний фрейм 40 /о.
Листинг 10.2. Пример создания веб-страницы, содержащей три горизонтальных фрейма
<HTML>
<HEAD>
<TITLE>Tpn горизонтальных фрейма«/ТІТІ_Е>
</HEAD>
«FRAMESET R0WS=“3*.4*.3*">
«FRAME SRC-" 1 .htm” >
«FRAME SRC--2.htm">
«FRAME SRC-"3.htm”>
</FRAMESET>
</HTML>
В следующих двух примерах представлены веб-страницы, состоящие из верти
кальных фреймов (используется атрибут C0LS).
172
Урок 10. Фреймы
3 Три горизонтальным фрейма - M icrosoft: In te rn e !
VVN
И Ш тм
хш
%тГ%Лв * У ^дО С »>»Х »Г>тТ П У У У У я ЖJ^r
Рис. 10.2. Три горизонтальных фрейма
На рис. 10.3 показаны два фрейма, значения ширины которых относятся как два
к трем (листинг 10.3). Граница, проходящая между фреймами, достаточно широ­
кая, так как атрибут BORDER равен 35. Первый фрейм не имеет полос прокрутки,
так как атрибут SCROLLING для него равен значению по.
Ш Д ва вертикальным фрейма - Microsoft Internet Btpktrer
V * i w S > v »% V« V v V -
№
10\lsbngl0.1.htm
Санкт-Петербург, ул. Захярьевская
I
Рис. 1 0 .3 . Веб-страница, содержащая
два вертикальных фрейма
Примеры использования фреймов
173
Листинг 10.3. Пример создания веб-страницы, содержащей два вертикальных фрейма
4HTML>
AD><TITLЕ>Два вертикальных фрейма</ТП1Е></НЕА0>
<FftAMESET B0RDER-"35“ CC>LS-"40*.60r>
<FRAME SCROLLING="no" SRC-1.htm>
<FRAME SRC-2.htm>
</FRAMESET>
<HTML>
На рис. 10.4 показаны три вертикальных фрейма, значения ширины которых со­
ставляют 40, 30 и 30 % от размера всей веб-страницы (листинг 10.4).
Э Три в е р ти кальн ы м ф рейм а - Міср Ъзд И In te rn e t frxp io rer
№ 0:\Книги\Уче6нь!Й курс\КГМ ЦС0\Глгез lG\listnqlO. 1.htm
Рис. 10.4. Веб-страница, содержащая три вертикальных фрейма
Листинг 10.4. Пример создания веб-страницы, содержащей три вертикальных фрейма
<HTMLxHEAD><TITLE>TpM вертикальных фрейма</Т1ИЕ></НЕА[>
<FRAMESET COLS-"40*.30*.30J!">
<FRAME SRC-:
<FRAME SRC=;
<FRAME SRC=:
</FRAMESET>
</HTML>
Ha d h c 1 0 .5 показана конструкция, состоящая из целого окна (вверху) и окна,
разделенного на. два фрейма (внизу). Значения ширины фреймов составляют,
соответственно, 45 и 55 % (листинг 10.5).
Листинг 10.5. Пример создания веб-страницы из нескольких окон с фреймами
<НТМ1 хНЕА 0 х Т 1Т1 Е>Несколько окон
<FRAMESET R0WS="*.2*”>
с фреймами</Т1ИЕ>«/НЕА0>
174
Урок 10. Фреймы
<FRAME SRO"3.htm">
<FRAMESET C0LS«u452;.55r>
<FRAME SRC-"4.htm">
<FRAME SRO"5.htm">
</FRAMESET>
</FRAMESET>
</HTML>
3 Несколько окон с фреймами - Microsoft Internet ШіШЩ
H i
О&иодаіть
0:\Книги\Уче6ным Kypc\HTML\CD\Tлава 10\listingl0.1.htm
пШіій
Рис. 10.5. Веб-страница, содержащая несколько окон с фреймами
5 Три окна в одном - Microsoft Internet f xpforer
V A
Рис. 1 0 .6 . Еще одна веб-страница, содержащая несколько окон с фреймами
Примеры использования фреймов
175
На рис. 10.6 показана конструкция, состоящая из целого окна (слева) и окна,
разделенного на три фрейма (справа), значения ширины которых составляют,
соответственно, 25, 35 и 40 % (листинг 10.6).
Л истинг 1 0 .6 . Пример создания веб-страницы из нескольких окон с фреймами
<нТМ1>
• /
• 1:1 Ш д а Р
<ИЕАОхТITLЕ>Тр.и окна в одном</Т1ИЕ></НЕА0>
<FRAMESET cols-H*.55X">
<FRAME SRO"4.fitmn>
<FRAMESET ЮІі&*25*.35*.40Г>
<FRAME SRO"5.htm"> .
<FRAME SRC-"6 .htra">
<FRAME SRO ^.htm "»
</FRAMESET>
</FRAMESET>
Л-
-
i
'
.
</KTHL>
На рис. 10.7 показано окно, разделенное на четыре одинаковых фрейма (лис­
тинг 10.7).
'EJ Четыре равных окне * W crosoft Iotefhet
Во:\КнгН\Уче6мьй Kypc\HTML\CD\Tпам 1OVbtinglO. 1.htm
Веб-страница, разделенная на четыре одинаковых фрейма
Листинг 1 0 .7 . Пример создания веб-страницы, разделенной на четыре фрейма
<HTML>
<НЕА0><Т1ИЕ>Четыре равных ойна</ТITLE></HEAD>
<FRAMESET C0LS-’ 50*.50*">
«FRAMESET ROWS-"50*.50*">
<FRAME SRC-"4 .htm">
<FRAME SRC-” 5.htm">
</FRAMESET>
176
Урок 10. Фреймы
<FRAMESET rows-H50X.50r>
<FRAME SRC-"6.htm">
<FRAHE SRC-W7.htm">
</FRAMESET>
</FRAMESET> .
- :
v
"
,
-V .
^
V
^ f
I,
На рис. 10.8 показано окно, разделенное на четыре фрейма разной формы (лис­
тинг 10.8). Первоначально заданные размеры фреймов были затем изменены
традиционным способом — перетаскиванием мышью.
Ц 0:\Книги\Учебный курс\НТМ і\СО\Гяапа IG jisttrx jlO .l
Mfcrosoft
I0\fcstingl0.1.htm
Рис, 10.8. Веб-страница, разделенная на четыре неодинаковых фрейма
Листинг 1 0 .8 . Пример создания веб-страницы, разделенной на четыре неодинаковых
фрейма
<
ш
і
>
<FRAMESET R0ws*”20*.60«.
<FRAME SRC*Hl.htmH>
<FRAMESET COLS-"22 % . 78*">
<FRAME SRO"2.htmH>
<FRAME SRC-"3.htm">
</FRAMESET>
<FRAME SRC="4.htm">
I
’
• .
Ч
:
,.
.I
</ ғшеі£і>
</HTML>
В листингах 10.9 и 10.10 представлены примеры использования тега <N0FRAMES>.
По рис. 10.9 и 10.10 видно, что используемый для просмотра этих страниц брау­
зер поддерживает фреймы, поскольку в обоих случаях информация, размещен­
ная между тегами <N0FRAMES> и </N0FRAMES>, была проигнорирована.
Примеры использования фреймов
Л и сти н г 1 0 .9 . Пример использования тега <N0FRAMES>
У <HTMLxHEAD><TITLE> Фреймы </TITLE></HEAD>
'tfftAMESET ROWS-"*.*">
4 oframes>
<Н1>Ваша версия веб-браузера не поддерживает фреймы!</Н1>
</NOFRAMES>
<FRAMESET COLS="65*. 35* ’’>
<FRAME SRC="l.htm">
<FRAME SRC=”2.htm">
</FRAMESET>' \
«FRAMESET COLS=”*.40*.*">
<FRAME SRC="3.htm”>
<FRAME SRC="4.htm">
<FRAME SRC="5.htm">
</FRAMESET>
</FRAMESET>
</HTML>
Л
Ф р ги н ы
Internet Explorer
В : \ К » т и \ У ч е б і <ын к у р с \ Н Т М Ц С Р \ Г п а в а 1 0 \ B s tin g lQ . l - h t m
I
Рис. 10.9. Веб-страница, разделенная на несколько фреймов
Листинг 1 0 .1 0 . Второй пример использования тега <N0FRAMES:
<HTML> <НЕА0>
<TITLE> Фреймы </TlTLE>
</HEAD>
<FRAMESET ROWS-" 10*. 50*. 40*>
>
«FRAME SRC- ’Янтарная конната. jpg
«FRAMESET COLS-"10*.20*. 70*“>
«FRAME SRC-“XpaM.Jpg’ >
«FRAME SRC-’’Храи. jpg">
«FRAME 5КС=“ Янтарнай комната.jpg" >
</FRAMESET>
177
178
Урок 10. Фреймы
<FRAME БИХ'Екатерининский парк l.jp g " >
</FRAMESET>
<
/NOFRAMES
Ц Фреймы - Microsoft Internet Ғмріогег
Поиск
D:\Книги\Учебный курс\НТМЦСО\Гпава 10\lsbng 10.1.htm
им.ійі»Ү»У
Рис. 10.10. Еще одна веб-страница, разделенная на несколько фреймов
Еще один пример веб-страницы с фреймами показан на рис. 10.11 (листинг 10.11)
sk Документ с Фреймами» - MterosoH Internet Екркме»
C\Nna\PITER\ICMHTMLSCO\rMMlOMstingiai1.hlin
СанктПетербург,
rA JW
л ң Т О
Рис. 1 0 .1 1 . Веб-страница с фреймами
Примеры взаимодействия фреймов
179
Листинг 1 0 .1 1 . Пример создания документа с фреймами
\ <HTML>
\<HEAD>
<Т1Т1Е>Документ с фреймами</ТІТІ_Е></НЕАО>
<FRAMESET cols-|2M . 80Г>
<FRAMESET rows-” 100, 200’>
<FRAME SRC-"l.htm">
<FRAME SRC="Ha Малой Садовой.gif">
</FRAMESET>
<FRAME SRCss"3.ihtm">
<N0FRAMES>
<Р>Этот документ содержит:
<UL>
<LI><A HREF*Ml.htm">0flHa фотография</А>
<LIxIMG SRC=nHa Малой Садовой.g if" aIt- " Еще одна фотография">
< LIxA HREF*"3.htin,,>Eiue одна фотография</А>
</UL>
</N0FRAMES>
</FRAMESET>
</HTML>
Примеры взаимодействия фреймов
В этом разделе рассматриваются примеры взаимодействия фреймов. Такую
взаимозависимую структуру могут иметь веб-страницы учебников, виртуальных
музеев и просто сайты фирм.
Однако для начала рассмотрим код веб-страницы, на которой, как показано на
рис. 10.12, нет фреймов, но есть ссылка на другую страницу (листинг 10.12).
0 т \ Ю * г и \ У ч 8 б » м К ic y p c \ H T M L \ C D \ rл а м I 0 \ i s t a g l 0 - 1 .h tfn
Любимый город
Гвгаи
Рис. 1 0 .1 2 . Веб-страница со ссылкой на другую страницу
180
Урок 10. Фреймы
Листинг 1 0 .1 2 . Пример создания веб-страницы со ссылкой на другую страницу
<HTML><HEAD><TITLE> Главная страница</Т1ИЕх/НЕА 0>
<B00V BGC0L0R=AQUA>
<Н1> Любимый город </Н1>
<HRxA Ш Рр Ви д ы Петербурга.htm"xl> Следующая страница</1х/А>
<HRxiMG HEIGTH- 117 WIDTH-352 ALIGN-CENTER BORDER- 3 SRC-''Фурштатская yn.jpg">
</BODYx/HTML>
' .
Страницу, наподобие показанной на рис. 10.12, можно разместить в отдельном
фрейме, тогда в другом фрейме можно будет увидеть документ, на который указы­
вает ссылка. Соответствующий пример представлен на рис. 10.13 (листинг 10.13).
Microsoft Internet
lOVfccinglCW.htm
Содержание
проспект
Латдйный проспект
Таврический дворец
Памятник Всекиііу
'Іт дъмжііая
Ос моенал страница
Рис. 10.13. Пример веб-страницы со ссылками
Листинг 1 0 .1 3 . Пример взаимодействия фреймов
<НТМ1><НЕА0хТ1Т|_Е>Взаииодействие фрейнов</Т1ИЕх/НЕА0>
<FRAMESET FRAMEBORDER-1 FRAMESРАСING=5 BORDER-5 C0is-"260.800”>
<FRAME NAME-"Список" N0RESIZE SRC-'УЛМЦЫ.htm”>
<FRAME NAME-"Информация” §КС=”Литейный проспект.htm”>
</FRAMESET></HTML>
Щ
....., -
На рис. 10.14 представлена веб-страница, которая вызывается со страницы, пока­
занной на рис. 10.13 (листинг 10.14).
Л истинг 1 0 .1 4 . Код страницы, отображаемой при щелчке на ссылке
«Литейный проспект»
<HTMLxHEADxTITLE>flpaBufl фрейн</Т1ИЕх/НЕА0>
<B0DY TEXT-BLACK LINK-GREEN BGCOLOR—FFFFA>
<НЗ>Литейный проспект</НЗ>
<IMG HEIGTH-117 WIDTH-352 ALIGN-CENTER BORDER- 3 SRC-''Литейный проспект.jpg"xBR>
Примеры взаимодействия фреймов
181
<А HREF=rightl.htm ><1Предыдущая страница</1></А>
&nbsp: &nbsp;&nbsp:&nbsp:
\ <А НІІЁҒ^Петербуіг ,Һ£ш><1>0сное&Ш страница</ 1></А>
^/B00Yx/HTML>
фрейм - Microsoft Internet
D:\Книгм\Учебный курс\НТМ \СО\Гпжа 10Vfe«nQl0. I .htm
проспект
тумая спахгнииа
Рис. 10.14. Веб-страница, которая вызывается со страницы, показанной на рис. 10.13
На рис. 10.15 представлена еще одна веб-страница, которая вызывается со стра
ницы, показанной на рис. 10.13 (листинг 10.15).
M icrosoft
рг\Ю *си\Учвбный kypc\HTW .\CDVm m 10\b tinq l 0-l.htm
Таврическим дворец
Шедыдтш^^прамиил
Основнаястраница
Рис. 10.15. Веб-страница, которая вызывается со страницы, показанной на рис. 10.13
182
Урок 10. Фреймы
Листинг 1 0 .1 5 . Код страницы, отображаемой при щелчке на ссылке «Таврический дворец»
<HTMLxHEAD><TI TL Е>Пра-вый фрейм</Т1TLЕ></НЕА0>
<B0DY TEXT-BLACK LINK-GREEN BGC0L0Rs=FFFFAA>
<НЗ>Таврический дворец </H3>
<IMG HEIGTH-117 WIDTH-352 ALIGN-CENTER BORDER-3 SRC-"Таврический дворец.jpgn><BR>
<A HREF-rightl.htm хі>предыдущая страница</Іх/А>
&nbsp; &nbsp;&nbsp:&nbsp;
<A HREF={lefep6ypf .Һ1т><1>0сновная страница</Іх/А>
</B00Yx/HTML>
4
На рис. 10.16 представлена еще одна веб-страница, которая вызывается со стра­
ницы, показанной на рис. 10.13 (листинг 10.16).
# ] 0:\Книги\Уче&*>1Й KypctHTML\CD\rпава lC\4stmgl0.1 htm
П ам я тн и к С ергею Есенину в Т аври ческом
Рис. 10.16. Веб-страница, которая вызывается со страницы, показанной на рис. 10.13
Листинг 1 0 .1 6 . Код страницы, отображаемой при щелчке на ссылке «Памятник Есенину»
<HTMLxHEAD><TITLE>npaвый фрейм</ТіиЕх/НЕА0>
<B0DY TEXT-BLACK LINK-GREEN BGC0L0R*#FFFFAF>
<НЗ>Памятник Сергею Есенину в Таврическом саду</НЗ>
<IMG SRC-ttnaMflTHMK Сергею Есенину в Таврическом саду.jpg” WIDTH-352
BORDER-3 HEIGTH-"117,,x B R x A
HREF-’'Литейный проспект.h tn fx j Предыдущая страница</Іх/д> &nbsp: &nbsp:&nbsp:&nbsp;
<A HREF=,,nanKa/Петербург. ҺШихі>Основная страница</Іх/А>
</BODYx/HTML>
'
Если на странице, показанной на рис. 10.12, щелкнуть на ссылке Следующая стра­
ница, вызывается документ, показанный на рис. 10.13. А уже с этой веб-страницы
можно перейти к документам, представленным на рис. 10.14, 10.15 и 10.16.
Как уже отмечалось, тег <IFRAME> позволяет вставлять фреймы в документы,
в которых не создан набор фреймов. Пример такой веб-страницы показан на
рис. 10.17 (листинг 10.17).
Примеры взаимодействия фреймов
183
Рис. 10.17. Веб-страница со вставленным фреймом
Листинг 1 0 .1 7 . Использование тега <IFRAME>
<HTMLxHEADxT I TLЕ>Фреймы</TI TLЕ></HEAD>
<I FRAME Src=" 7.htm” width-'400” height="500“
SCROLLING-"auto" FRAMEBORDER-"1">
</IFRAME>
</HTMl>
Фреймы, включаемые в документ с помощью тега <IFRAME>, называют плаваю­
щими. Еще один пример веб-страницы с плавающим фреймом показан на
рис. 10.18 (листинг 10.18).
МювпЙtntemet
1 С SNneVPITERNK* HTMLVCDVTпава 1OVishngl019 Wm
Фреймы, включаемые в документ с помощью тега IFR A M g
называют плавающими
огвво
Ч*
Рис. 10.18. Веб-страница с плавающим фреймом
184
Урок 10. Фреймы
Л истинг 1 0 .1 8 . Тег IFRAME
<НЖ><НЕА0хТ1ЛЕ>Плавающий фрейм</ТITL£></НЕAD>
<IQDY>
II I I
I
I
Фреймы, включаемые в документ с помощью тега IFRAME. называют плавающими.
<IFRAME SRC-"3.htm" ALIGN-CENTER SCROLLING*AUTO FRAMEBORDER-1 WIDTH-60X
HEIGHTe40$>
•
</IFRAMEx/BODY>
•
</HTML>
■
~
Следующий пример, демонстрирующий, как использовать плавающие фреймы,
показан на рис. 10.19 (листинг 10.19).
ІП м вакпций фрейм - Microsoft Internet Explorer
<•»>>
10\lstingl0.1.htm
Рис. 10.19. Вывод изображений в плавающем фрейме
Л истинг 1 0 .1 9 . Пример вывода изображений в плавающем фрейме
<HTML><HEADxTiTLE>flflaBaioutHft фрейм</Т1ИЕх/НЕА0>
<B0DY background*"imagel2.jpg" alink=#ff00ff vlink-#ff00ff link-#00ff00xp>&nbsp:</P>
<P ALIGN-CENTERxHl sty!e - "co lo r:#ҒҒҒҒҒҒ">Гиперссылки для загрузки файлов во
фреймы</Н1х/р>
:
[<Р ALIGN=RIGHTxl><F0NT C0L0R-#FFFFFF FACE =ARIAL COLOR=#800000 512Е=4>Плавающий фрейм
(плавающая область)</1>
<Н1 ALIGN-CENTER style-'"color:#FF00FF”ЮВЕЛИРНЫЙ МАГАЗИН</Н1>
<P>&nbsp;&nbsp:<SMALL><A HREF-"im agel0.gif" TARGET="shop">ВИТРИНА l</a>&nbsp;&nbsp;
<A HREF-'im agell.gif" TARGET-"shop">ВИТРИНА 2</A>&nbsp;&nbsp:
<A HREF-"images.gif" TARGET-” shop">ВИТРИНА 3</A>&nbsp;&nbsp:
<A HREF-"image9.gif" target-"shop">BHTPHHA 4</A>
<IFRAME WIDTH-400 HEIGHT-200 HSPACE-6 VSPACE-6 MARGINWIDTH-0 NAME-shop border-0
al i gn-1 e ft src=" image9. gi f "></1FR A M Ex/p >
<PxF0NT SIZE—5> Этот тип фрейма позволяет с помощью гиперссылок просматривать различные
файлы внутри одного дшумента.
Фрейму присваивается имя: внутри тега IFRAME пишется код пате-(имя). Внутри гиперссылки
пишется код TARGET-Симя фрейма), что указывает на загрузку файла в названный
фрейм.</SMALL>&nbsp;
.
- ,</F0NTx/B0DY>
/ ‘ - ‘i
</HTML>
Ш Ш Ш
: _Щ
¥ : Ш Ш З
Как уже отмечалось, наборы фреймов могут быть вложенными. Соответствующий пример показан на рис. 10.20 (листинг 10.20).
V
Примеры t заимодействия фреймов
185
Листинг 10*20. Пример создания веб-страницы с вложенными фреймами
N <HTMLxHEADxT1Т1Е>Влошенные фреймы</ТITL£x/HEAD>
jf <FRAMES£T R0W5-25*.75*>
\FRAME SRC-"l.htm"»
<FRAM£SET C0tS*3M. 70*>
<FRAME SWX2.fttm*>
<FRAMESET ROWS-30*.30*.40>
<FRAME SRC-W
3.htm">
<FRAMES£T COLS-30*.30*.40*>
<FRAHE SRC-“4.tatmw>
<FRAME SRC-H5.Ktnf>
<FRAME SRCe"6. htm”x/FRAMESET>
<FRAME SRC-"7.htmrt></FRAMESETx/FRAMESETx/FRAHESET></HTML>
Inldrwt fMpinm
ПО ЧГ4І
Рис. 10.20. Веб-страница с вложенными фреймами
На рис. 10.21 показан плавающий фрейм с бегущей строкой, в качестве которой
используется рисунок (листинг 10.21).
Листинг 1 0 .2 1 . Пример создания плавающего фрейма с рисунком в качестве бегущей строки
<НТЖхНЕADxTITL Е>Бегуща я строка в плавающем фрейме</ТП1Ех/нЕА0>
<B0DY BACKGROUND»"Фон.g if ”><F0NT FACE=”Times New Roman" size=4>
<Р>Что такое плавающий фрейм:<BR>
Вот он: <1FRAME ALIGN=LEFT HSPACE-10 VSPACE-10
SRC="Бегущая строка, fitm” WIDTH=100 SCROLLING=N0
HEIGHT-150x/IFRAME>
<Р>Плавающий фрейм нигде не плавает. <BR>
Он работает, как и все фреймы, но при этом создается прямо на веб-странице с помощью
паркого тега IFRAME.<BR>
Синтаксис:&lt:IFRAME WIDTH= .. . HEIGHT- .. . HSPACE=...
VSPACE'... SRC ’ АДРЕС ДОКУМЕНТА"&gt:<8Rx/Px/F0NTx/B0DYx/HTML>
186
Урок 10. Фреймы
'^Бегущ ая строка ввиде рисунка в пяам гац ем фрейме - H tcn xcft internet
ЯШ
newre
10\fistlrtgl0 .2 i.htm
Что такое плавающий фрейм
Вот он:
Он работает, как и все фреймы, но при этом со здается прямо на вео-страннце с
помощью парного тега IFRAME.
Сингаксис:<і£гаше widtb= .. heights ... lisp асе=... vspace=... sre “АДРЕС
ДОКУМЕНТАМ
Рис. 10.21. Веб-страница с плавающим фреймом и рисунком в качестве бегущей строки
На рис. 10.22 показаны три фрейма без рамок (листинг 10.22). Как видите, при
отсутствии рамок фреймы невозможно узнать, а об их существовании можно до­
гадаться только по наличию вертикальных полос прокрутки для каждого фрейма.
3 Фреймы без рамки - M icrosoft In tern e t Explorer V: V
'
D:\Книги\Уче6ньм Kypc\HTML\CDty~лава 10\istingl0.21 .htm
Россия
М осква
Санкт-Петероург
Рис. 10.22. Пример фреймов без рамок
Листинг 10.22. Пример создания фреймов без рамок
<HTML>
о
<НЕА0хТ1Т1Е>Фрейиы без pam<n</ TITLE></ HEAD>
<FRAMESET B0RDER=4 FRAMESPACING=4 ROWS=100.2 0 * .* FRAMEBORDER=0>
<FRAME SRC="0>aiinl.htm" NORESIZE SCR0LLING=YES>
<FRAME SRC=4>aita2.htin" NORESIZE SCR0LLING=YES>
<FRAME SRC="®aiin3.htfn” NORESIZE SCROLLING=YES>
< / FRAMESET></H7ML>
Подведем итоги
187
Подведем итоги
В этом уроке рассказано, для чего нужны фреймы. Рассмотрены теги <FRAMESET>,
<FRAME» и их атрибуты ROWS, COLS, BORDER, FRAMEBORDER, NAME, SRC, MARGINWIDTH,
MARGINHEIGHT, SCROLLING, NORESIZE, FRAMEBORDER. Представлено очень много при­
меров разнообразных фреймов.
Урок 11
Ссылки
Ссылки являются ключевым компонентом, делающим веб­
страницы привлекательными для пользователей. Благодаря
ссылкам, или, как иногда говорят, гиперссылкам, веб-страница
структурируется и связывается с другими документами или
с другими разделами данного документа, что обеспечивает бы­
строе и удобное получение информации. Именно ссылки ста­
ли основной причиной ошеломляющей популярности Всемир­
ной паутины, в которой пользователь может легко переходить
от одной страницы к другой простым щелчком мыши. В этом
уроке рассказывается о вставке ссылок в документ.
Универсальный указатель ресурса
189
Универсальный указатель ресурса
Ддя организации ссылок в HTML используется универсальный указатель ресурса
(Uniform Resource Locator, URL), в общем случае имеющий следующий формат:
петое://иия_сервера:порт/пут ь#якорь
Первая часть URL (до двоеточия) описывает метод доступа или сетевую службу,
вторая часть (после двоеточия) интерпретируется в зависимости от метода дос­
тупа. Обычно два прямых слэша после двоеточия обозначают имя машины.
Наиболее часто используемыми методами являются file, http, ftp, mailto, telnet
и news.
О Метод file. Метод file обеспечивает чтение файла с локального диска. Напри­
мер, следующая запись открывает HTML-файл document.html из каталога
/spb/institute на машине пользователя:
f1le:/spb/1nst1tute/document.html
О Метод http. Метод http предоставляет доступ к веб-странице по протоколу
HTTP. Это наиболее часто используемый метод доступа к HTML-докумен­
там в Сети. Например, следующая запись открывает доступ к домашней стра­
нице компании «Russian»:
h ttp :/ /www. russ1an.сот/
О Метод ftp. Методом ftp выполняется запрос к ҒТР-серверу на получение
файла, например:
ft p ://myname/directory/ni папаше
О Метод mailto. Метод mailto активизирует сеанс почтовой связи с указанными
пользователем и хостом. Например, следующая запись активизирует отправ­
ку сообщения пользователю ninapetergof на машине spb.com, если браузер
поддерживает запуск электронной почты:
mailto: n1napetergof@spb.com
При использовании метода mailto слэши после двоеточия указывать не нужно.
Как правило, после двоеточия сразу вводится адрес электронной почты абонента.
О Метод telnet. Метод telnet используется для обращения к службе telnet.
О Метод news. Метод news обеспечивает вызов службы новостей, если браузер
поддерживает такой вызов. Например:
news:relcom.www.support
Как и в случае метода mailto, при использовании метода news слэши после
двоеточия указывать не нужно. Как правило, после двоеточия сразу вводится
адрес группы новостей.
Имя сервера I необязательный параметр URL, описывающий полное сетевое
имя машины. Например, www.piter.com —полное сетевое имя сервера издательст­
ва ■«Питер». Если имя сервера не указано, то ссылка считается локальной и пол­
ный путь, указанный далее в URL, относится к той же машине, на которой нахо­
дится HTML- документ, содержащий ссылку. Вместо символьного имени сервера
может быть использован IP-адрес, однако это не рекомендуется из-за возможно­
го конфликта имен с фиксированными локальными адресами внутренней сети.
I
190
Урок 11. Ссылки
Следом за именем сервера в URL указывается номер порта TCP, на котором
функционирует веб-сервер. Если порт не указан, по умолчанию используется
порт 80 (что характерно для подавляющего большинства URL-адресов).
Далее в URL указывается частичный или полный путь к документу, который
должен вызываться в результате перехода по ссылке.
Якорь — это ссылка на место внутри текущего HTML-документа. Как будет по­
казано далее, места в документе, на которые ссылается якорь, указываются при
помощи атрибута NAME.
/ т
Текст URL-адреса не отображается браузером, а используется только для выпол­
нения предписанных им действий при активизации ссылки (обычно щелчком
МЫШ И).
‘ \
4 Л/
Вставка ссылок в документ
Для вставки ссылок в документ используется парный тег <А>. Этот же тег позво­
ляет вставить в документ якорь. Тег <А> имеет атрибуты HREF, NAME, ID, METHODS,
FRAME, TITLE, ACCESSKEY.
Ниже перечислены атрибуты тега <А>.
О Атрибут HREF. При вставке ссылки в документ обязательно указывается ат­
рибут HREF. Значением атрибута является URL-адрес документа, на который
указывает ссылка:
_
V
<А HREF="URL">
#1. ‘ . ;
_
При использовании атрибута HREF любой текст, находящийся между тегами
<А> и </А>, специальным образом выделяется веб-браузером (обычно подчер­
кивается и выделяется синим цветом).
О Атрибут NAME. Атрибут NAME указывается вместо атрибута HREF при встав­
ке якоря в документ (см. раздел «Переходы внутри документа»).
О Атрибут ID. Атрибут ID идентичен атрибуту NAME с той разницей, что может
вставляться в другие теги, а не только в тег <А>, например:
<Р ID-’’имя абзаца’ »
•.• --.у-,.:-;■
■ '/ j&
При наличии такой пометки ссылка на нее в текущем документе может быть
создана следующим образом:
<А HREF=“#mmh абзаца"» Ссылка</А>
О Атрибут METHODS. Атрибут METHODS задает метод извлечения документа,
например FTP, Gopher и т. д. Синтаксис:
<А МЕТН005-” название"> необязательный текст </А>
О Атрибут FRAME. Атрибут FRAME позволяет указать фрейм, в котором должен
быть визуализирован целевой документ. Синтаксис:
<А FRAME=” HHfl фрейма"» необязательный текст </А>
О Атрибут TITLE. Атрибут TITLE служит для визуализации подсказки. Синтак­
сис:
<А ТГПЕ="имя ссылки"» Ссылка</А>
Внутренние ссылки
191
О Атрибут ACCESSKEY. Атрибут ACCESSKEY позволяет указать «горячую» кла­
вишу, при нажатии которой будет выполнен переход по ссылке. Синтаксис:
<А ACCESSKEY®"имя клавиши"> Ссылка</А>
Ниже перечислены некоторые примеры ссылок.
О Ссылка на HTML-файл с использованием протокола HTTP:
в' **
<А HREF="h ttp ://www.mizic.ru/alex/lena/pagel.html"> Ссылка </А>
О Ссылка на ZIP-файл с использованием протокола HTTP:
<А HREF*"http://www.m izic.ru/alex/lena/test.zip”> Ссылка </А>
О Ссылка на ТХТ-файл с использованием протокола HTTP:
<А HREF*"http://www. m izic.ru/alex/lena/test.txt"> Ссылка </А>
О Ссылка на MPG-файл с использованием протокола HTTP:
<А HREF*"http://www.mizic.ru/alex/lena.mpg"> Ссылка </А>
О Ссылка на ЕХЕ-файл с использованием протокола FTP:
<А HREF="ftp :/ / ftp .spbszip.com/pub/priem/priem/install .ехе"> Ссылка </А>
в
а
О Ссылка, инициирующая создание сообщения электронной почты:
<А HREF="таi 1to:name@domen. ru"> Ссылка </А>
О Ссылка, инициирующая создание сообщения электронной почты с автомати­
чески введенной темой сообщения:
<А HREF="mai1to:name@domen.ru. Subject=TeMa"> Ссылка </A>
О Ссылка, инициирующая создание сообщения электронной почты с автомати­
чески введенными темой и текстом сообщения:
<А HREF="mailto:name@domen.ru. Subject=TeHa &8СЮҮ=Текст"> Ссылка </A>
О Ссылка, инициирующая создание сообщения электронной почты с автомати­
чески введенными темой и текстом сообщения, а также адресами для отправ­
ки копии и скрытой копии:
<А HREF="mai 1to :name@domen.ru. Subject=TeHa &В00Ү=Текст&сс=
name@domen.ru&bcc=name@donien.ru"> Ссылка </A>
О Ссылка на группу новостей:
<А HREF="news:comp.i nfosystems.www.announce"> Ссылка </A>
Эта ссылка будет работать, только если провайдер поддерживает доступ к груп­
пам новостей.
При наведении указателя мыши на ссылку он меняет свою форму, превращаясь
в изображение кисти руки.
Внутренние ссылки
Внутренние ссылки указывают на другую веб-страницу текущего веб-узла. По­
этому при создании внутренней ссылки в атрибуте HREF тега <А> достаточно ука­
зать относительный путь поиска.
Пример документа, содержащего внутренние ссылки, показан на рис. 11.1 (лис­
тинг 11.1).
192
Урок 11. Ссылки
Лекции no информатике - M icrosoft Internet Explore*
C:\Nina\PITER\KM НТМІЛСО\Глава 11 Mislingl 1.Zhtm
Лекции по информатике
Лекция 1
Лекция
Лекция
Рис. 11.1. Документ с внутренними ссылками
Л истинг 1 1 .1 . Пример создания внутренних ссылок
<нм>
<НЕА0><ТITLE>Лек ции по информат ике</ТITLЕ></НЕAD>
<B0DY BACKGROUND*FFFFFF>
<CENTER><Hl>JleKLinn по информатике</Н1></CENTER>
<HR NOSHADE SIZE-10 WIDTH-” 1001" ALIGN=CENTER>
<P><H2><A HREF="Лекцияі.ҺШ и>Лекция 1</A></P>
<P><A НРЕҒ~"Лекция2. ҺШ‘*>Лекция 2</Ах/Р>
<Р><А HREF-'^eKunflS.ҺШ">Лекция 3</А></Р></Н2>
</B0DY></HTML>
Внешние ссылки
Внешние ссылки указывают на веб-страницы, не расположенные на текущем
веб-узле. Поэтому в атрибуте HREF тега <А> необходимо указывать полный
URL-адрес документа, включая название протокола и адрес веб-узла.
Если файлы Л екц и яі-htm, Лекция2.һ1:т и ЛекцияЗ.М :т разместить в каталоге
C:/Nina/HTML/, то код веб-страницы, представленной на рис. 11.1, будет выгля­
деть так, как показано в листинге 11.2.
Л истинг 1 1 .2 . Пример создания внешних ссылок
<jDOCTYPE HTML PUBLIC ‘ -//W3C//DTD HTML 4.0 Transitional//EN“>
<HTML><HEAb><TiTLЕ>Лёкций по инфорнатике</ТІЛ.Е>
<META HTTP-EQUIV“ Content-Type CONTENT-”text/htm l; CHARSET-windows-1251">
<META CONTENT-“MSHTML 6.00.2600.0" NAME=GENERATOR></HEAD>
Переходы внутри документа
193
<B0DY BACKGROUND-” ">
.
^ u :JSti
<CENTER>
<Н1>Лекции по инфорнатикe</H1></СЕНТER>
У <HR ALIGN-CENTER WIDTH-" 100Г NOSHADE SIZE-10>
<H2xA HREF-*fiТе:///С:/Ni na/HTML/ЛекиияІ.ҺШ->Лекция 1</A>
<P><A HREF-'f iTe:///С: /Niпа/НТМІ/Я-екция2.htnf >Лекция 2</Ax/p>
<A HREF~"f i 1e :///С: /Ni na/HTML/Лem ия3.ht m" >Лекция 3</A></H2>
</BODYx/HTML>
Переходы внутри документа
Как уже отмечалось, ссылки можно делать не только на другие документы, но
и на различные фрагменты одного и того же документа. Это позволяет быстро
переходить от фрагмента к фрагменту внутри документа, не прибегая к прокрут­
ке. Для организации таких переходов используются специальные якоря, которые
обычно вставляются в первую строку или в заголовок фрагмента, к которому
должен выполняться переход.
При вставке якоря также используется тег <А>, но вместо атрибута HREF указывает­
ся атрибут NAME. Значением этого атрибута является имя якоря. Оно может состо­
ять только из латинских букв и цифр и не должно содержать пробелов, например:
<А NAME-"имя якоря"> Переходы внутри документа </А>
3
Пример якоря - Microsoft Intel net Explorei
A
- -
—
-
-
— -
- ---------» ------^
C:\Nma\PITER4CM HTMLVCDSTлава 11Mistingl 1.3 him
якоря
Оглавление
• Глава 1
• Г лава 2
Г лава 1
Т екст главы 1
Глава 2
Текст главы 2
Рис. 11.2. Пример веб-страницы с якорями
194
Урок 11. Ссылки
Для ссылки на установленный якорь необходимо указать имя якоря в конце
URL-адреса после имени документа, отделив его символом #:
<А НКЕҒв,,#имя_якоря"> Ссылка </А>
Пример использования якоря приведен на рис. 11.2 (листинг 11.3).
Л истинг 1 1 .3 . Пример создания якорей в документе
<HTML><HEAD><TITLЕ>Пример якоря</Т1Т1_Ех/НЕА0>
<B0DY backgrouncK#FFF8DCM>
<CENTER>
j
.^
<Н1>Пример якоря</Н1></CENTER>
f
<Р><В>Оглавление</В></Р>
<UL> <LI><A HREF="#glavar>("naBa 1</A></LI>
<LI><A HREF="#g1ava4>niaBa 2</A></LI> </UL>
<P><A NAHE=,,glava,,></A>rnaBa 1</P>
<IL> <Р>Текст главы 1</P> </UL>
<PxA NAME=‘'gl ava"х/А>Гяава 2</P>
<UL> <Р>Текст главы 2 <BRx/p>
</BODYx/HTML>
і
^ ..
*.
j/
.
'
"s
•
v
Когда пользователь щелкнет мышью на ссылке Глава 1, браузер перейдет сразу
к первому разделу главы 1. Якорь может быть вставлен как в текущий, так
и в другой документ. Во втором случае браузер выполнит загрузку нового доку­
мента и перейдет к указанному в нем разделу.
Еще один пример страницы с внедренными якорями представлен на рис. 11.3
(листинг 11.4).
ғ
Л истинг 1 1 .4 . Еще один пример создания якорей в документе
<HTMLxHEADxTITLE>npwMep создания якорей в большом документе</Т1ИЕх/нЕА0>
<B0DY BGC0L0R="#FFFACD" TOPMARGIN-4 MARGINHEIGHT-4 LEFTMARGIN=100>
<
c
e
n
t
e
r
>
<H1>Диз айн</Hі х / CENTER>
ВЯ
<р><в>прині4ипы дизайна</Вх/р>
<UL> <LI ><A HREF=s“#glavar> 1. Что такое дизайн из дания? </А></LI ><BR>
<ЦхД HREF="#glava2">2.Принципы дизайна</А></LIxBR>
< Ц хА HREF=”#glava3H>3. Типичные ошибки </Ax/|_IxBR>
< Ц х Д HREF=,,#g1ava4">4.06beflHHeHne</Ax/LIxBR>
< Ц хА HREF=H#glava5"> 5. Прояорции</Ах/1|><BR>
<LIх д HREF="#g1ava5"> 6 . Haпpaвлeниe</Ax/LI><BR>
<LIх Д HREF=,,#g1ava6”> 7. Единство стиля</А></LI><BR>
<LI><A H R E F ^ g la v a B "^ . KoHTpacT</Ax/LI><BRx/UL>
<P><A NAME="#glavar> 1. Что такое дизайн из дания? </А></P><BR>
Словари иностранных слов трактуют дизайн как художественное конструирование предметов.
<BR>
. :
Еще одна формулировка: Дизайн есть художественное проектирование предметов и сред.<BR>
Дизайн - искусство оформления.<BR>
Графический дизайн предназначен для того, чтобы было красиво.<BR>
Дизайн - вид художественной деятельности, проектирование изделий, обладающих
эстетическими свойствами.<BR>
<РхА NAHE-"#glava2Hx/A>2. Принципы дизайна </Р>
Дизайн базируется на ряде основополагающих принципов, которыми следует руководствоваться
на всех этапах подготовки публикации.<BR>
Переходы внутри документа
Принципы дизаина. которых следует придерживаться при создании веб-страницы:<BR>
1. Приближенность к цеш;<ВК>
2. Выравнивание:<BR>
3. Обзор:<BR>
,4. Шрифт, типы шрифтов и контраст шрифтов:<BR>
Уместность.<BR>
6 . Пропорциональность 1<BR>
7. Контрастность.<BR>
8 . Целостность.<BR>
9. Сдержанность.<BR>
10. Точность в деталях.<BR>
Можно сказать и другими словами, что основными принципами дизайна являются:<BR>
1. Уместность:<BR>
2. Пропорции:<BR>
3. Направление:<BR>
4. Контраст;<BR>
5. Целостный образ:<BR>
6 . Сдержанность;<BR>
7. Внимание к деталям.<BR>
<Р><А МАИЕ="#gla va3"х/А>3. Типичными ошибками являются:</Р>
1. Избыток визуальных доминант. <BR>
</B0DY></HTML>
3 Пример якоря в большом документе - Microsoft Internet Explorer
®
C:\Nina\PlTER\KH НТМ1ЛСО\Глава m fistingl1.4.htm
T IT
________ e k ------------------------ -------
* . -*
«А У * и
• 1 ЪА
Принципы дизайна
• 1. Что такое дизайн издания
• 2. П ринципы дизайна
•
•
•
•
•
•
3. Типичные ошибки
4 .Объединение
5. Пропорции
6. Направление
7. Единство стиля
8. Контраст
1. Что такое дизайн издания?
Словари иностранных слов трактуют дизайн
как художественное конструирование
предметов.
-______
Л W.W.______ ' ---- --- ---- _
—
— --ЫУ■ -- ---Р и с 11.3. Пример большой веб-страницы с якорями
196
Урок 11. Ссылки
Графические ссылки
Как вы помните (см. урок 3), ссылкой может быть не только текст, но и изобра­
жение. При этом код программы на языке HTML и изображение должны нахо­
диться в одном каталоге.
Пример графической ссылки показан на рис. 11.4 (листинг 11.5). При щелчке на
изображении открывается файл Листинг 8.3.htm.
Ш Памятник Пушкину в городе Пушкин - Microsoft Intefnet fxptorer
дай»
тшт
IvOvS
0:\К»*ги\Учебный курс\НТМ\СО\Глава 11\fctingl 1.5.htm
Памятник Пушкину в городе Пушкин
Рис. 11.4. Графическая ссылка
Л истинг 1 1 .5 . Пример создания графической ссылки
<НТМ1хНЕА 0><Т1Т1_Е>Памятник Пушкину в городе Пушкин</Т1ИЕ></НЕА0>
<B0DY BGC0L0R=#FFFFFF>
‘
'
■
<НЗ ALIGN=CENTER>naMflTHHK Пушкину в городе Пушкин</Н3>
<Р ALIGN=CENTER><A НКЕҒ=иЛистинг 8.3.htm">
<IMG SRC="Памятник Пушкину в городе Пушкин.jpg"></F0NT> </А></Р>
</B0DY></HTML>
у
V :?
J Памятник Пушкину в городе Пушкин - Microsoft Interne* Explorer
шт
U \S stn g ll.5 .h tm
П ам ят
Пушкину в городе Пушкин
Рис. 1 1 .5 . Графическая ссылка при отсутствии изображения
Подведем итоги
197
Если изображение для ссылки и код программы на языке HTML находятся
в разных каталогах, то вместо изображения на экране появится квадрат с крас­
ным крестом посередине (рис. 11.5). При этом сама ссылка останется работоспо­
собной, то есть при щелчке на ней произойдет переход по указанному URL-адресу.
Подведем итоги
В этом уроке рассказано о вставке в документ ссылок, делающих веб-страницы
привлекательными для пользователей. Вы познакомились с разными типами
ссылок, в том числе с внешними ссылками, реализующими переходы между
веб-узлами, с внутренними ссылками, реализующими переходы между докумен­
тами одного веб-узла, со ссылками, реализующими переходы внутри документа,
с графическими ссылками, в которых роль активной части исполняет не текст,
а изображение.
Урок 12
Мультимедиа
Стремление сделать содержимое веб-страниц более динамич­
ным привело к созданию разнообразных форматов, предназна­
ченных для представления данных мультимедиа. Именно раз­
мещению мультимедиа на веб-страницах и посвящен этот
Урок.
Размещение объектов мультимедиа на веб-страницах
199
Размещение объектов мультимедиа
на веб-страницах
Широкое распространение мультимедиа пришлось на тот период, когда служба
W W W уже существовала, поэтому язык HTML не сразу приспособился к появ­
лению мультимедийных объектов на веб-страницах. До сих пор анимационные,
видео- и звуковые файлы рассматриваются как встраиваемые объекты, воспро­
изводимые вспомогательными приложениями. Все анимационные, видео- и зву­
ковые файлы имеют разные форматы.
Помещая на веб-страницу сложные изображения и анимацию, необходимо пом­
нить, что такие страницы будут медленно загружаться даже у пользователей,
имеющих быстродействующие модемы со скоростью передачи 56 Кбод.
Одним из вариантов решения проблемы являются современные потоковые фор­
маты, которые позволяют воспроизводить звук и видеоизображение в реальном
времени по ходу загрузки данных.
Чаще всего объекты мультимедиа размещают на веб-страницах с помощью тега
<А>, знакомого нам по предыдущему уроку.
Однако в некоторых случаях требуется внедрить мультимедийный файл не­
посредственно в веб-страницу, например для того, чтобы иметь возможность
воспроизводить этот файл автоматически. Для этого служат теги <ЕМВЕ0>
и <0BJECT>.
Тег <EMBED> не описан в спецификации HTML 4.01; предполагается, что вместо
него должен применяться тег <0BJECT>. Однако в настоящее время чаще приме­
няют тег <ЕМВЕ0>, поскольку при его использовании не возникает проблем с от­
крытием веб-страниц в разных браузерах. Тег <EMBED> имеет атрибуты HEIGHT,
WIDTH, AUTOPLAY, CONTROLLER, LOOP, PLUGINSPAGE. Хотя этот тег считается парным,
при наличии атрибутов можно указывать только открывающий тег.
&
9
О Атрибут HEIGHT. Атрибут HEIGHT задает высоту окна для отображения видеоданных в пикселах или в процентах.
О Атрибут WIDTH. Атрибут WIDTH задает ширину окна для отображения ви­
деоданных в пикселах или в процентах.
О Атрибут AUTOPLAY. Атрибут AUT0PLAY определяет порядок воспроизведе­
ния данных мультимедиа и принимает значение TRUE или FALSE. Значение
TRUE указывает на то, что файл мультимедиа должен автоматически запус­
каться по окончании загрузки документа, а значение FALSE — на то, что запус­
кать файл должен пользователь.
О Атрибут CONTROLLER. Атрибут CONTROLLER определяет порядок управле­
ния файлом мультимедиа и принимает значение TRUE или FALSE. Значение
TRUE позволяет пользователю управлять воспроизведением.
О Атрибут LOOP. Атрибут LOOP принимает значение TRUE, FALSE или PALIDR0ME.
Значение TRUE указывает на то, что по окончании файла мультимедиа он дол­
жен снова начать воспроизводиться. Значение FALSE указывает на то, что дан-
200
Урок 12. Мультимедиа
ные мультимедиа должны быть воспроизведены однократно. Значение
PALIDR0ME говорит о том, что данные мультимедиа сначала воспроизводятся
от начала до конца в прямом направлении, а затем — в обратном.
О Атрибут PLUGINSPAGE. Атрибут PLUGINSPAGE показывает, где на компьюте­
ре установлен требуемый для воспроизведения данных мультимедиа подклю­
чаемый модуль.
В листинге 12.1 приведен код программы, запускающей музыку и воспроизводя­
щей видеоклип (рис. 12.1).
Листинг 12.1. Документ, содержащий встроенные видео- и аудиофайлы
<HTML>
л,
<HEADxTITLE> Встроенные видео- и аудиофайлы </TITLE></HEAD>
<B00Y BACKGROUND«FFFFOF>
г,:;лСЙ
-\ М
- • -i ::^.^^'•-^■
<CENTER><Hl>Myзыкa </Hlx/CENTER>
|I Щ I
<P><A HREF-'legko.wavM>Cfleuyei щелкнуть здесь, чтобы послушать иузыку</Ах/Р>
<Р>Воспроизведение видеоролика</Р>
<EMBED SRC*"VideoOut.a v i" WIDTH«"200,,HEIGHT“ "200">
</B0DY>
\
j Встроенные мультимедийный и звуковой файя - Microsoft
12\fistingl2.1
зы ка
С л е д у е т щ ел к н уть з д е с ь , ч т о б ы п осл уш ать музыку
В о сп р о и зв ед ен и е ви деоролика
Рис. 12.1. Результат выполнения программы листинга 12.1
- | j|
Анимационные файловые форматы
201
Анимационные файловые форматы
В анимационной графике используются форматы, предложенные разработчика­
ми анимационных программных пакетов, например в программе Autodesk
Animator Pro используются форматы FLI. FLC и ZEL. К анимационным про­
граммам для Web можно отнести: Microsoft GIF Animator, Animagic Gib, GIF
Construction Set и другие. Популярными анимационными пакетами считаются
Macromedia Flash, Macromedia Director и Hyper Method.
Формат SWF
Векторный формат SWF (Shockwave Flash), разработанный компанией Macro­
media, является одним из распространенных в Сети. Данный формат в первую
очередь предназначен для хранения анимации. Для его правильного отображе­
ния браузером на компьютере пользователя должен быть установлен соответст­
вующий подключаемый модуль.
В настоящее время технология Flash (английское слово «flash» означает «вспыш­
ка», «сверкание») широко применяется для разработки документов с мульти­
медийным содержанием (это анимационные элементы и звук). До появления
технологии Flash применение мультимедиа в веб-дизайне было ограничено, по­
скольку графические файлы растровых форматов, звуковые и видеофайлы име­
ют большой объем и, следовательно, очень медленно загружаются в браузер.
Ниже перечислены основные достоинства технологии Flash.
О Малый размер выходных файлов и, соответственно, их быстрая загрузка .
В технологии Flash используется векторный формат изображений, а растро­
вые и звуковые файлы сжимаются.
О Решены многие проблемы совместимости браузеров. Технология Flash одина­
ково работает как в Internet Explorer, так и в Netscape Navigator.
О Имеется мощный язык программирования ActionScript. В языке ActionScript
поддерживаются события, условия, циклы, массивы, функции и наследуемые
классы. Этот язык очень похож на JavaScript.
О Красота. Технология Flash поддерживает сглаживание контуров за счет сме­
шения соседних цветов. Дизайнеры знают, как это важно.
О Удобство. Создавать веб-страницы с использованием технологии Flash под
силу даже новичку. Дело только в фантазии и художественном вкусе.
О Распространенность. Технология Flash становится стандартом де-факто. В слу­
чаях, когда необходимы интерактивность, много графики, анимация, звук и
малый объем файлов, технология Flash незаменима.
Файлы, созданные с помощью технологии Flash, имеют расширение .swf. Они
могут содержать картинки в векторном формате, звук, мультфильмы, элементы
управления, интерактивные эффекты. Для их просмотра служит проигрыватель
Flash Player — элемент управления ActiveX, который встроен в последние вер­
сии браузеров Internet Explorer и Netscape. Проигрыватель Flash Player вставля­
ется в HTML-документ с помощью тега <0ВЛЕСТ>.
202
Урок 12. Мультимедиа
Формат AVI
Формат AVI (Audio Video Interleaved — чередующиеся аудио- и видеоданные)
предназначен для записи звука и движущихся изображений и соответствует спе­
цификации RIFF (Resource Interchange File Format — файловый формат обмена
ресурсами). Данные формата AVI, которые можно редактировать, экспортиро­
вать и сжимать, хранятся в файлах с расширением .avi. Для их воспроизведения
необходима специальная программа, которая входит в комплект поставки неко­
торых браузеров. Если в составе браузера нет такой программы, ее можно загру­
зить из Сети.
Формат MOV
Формат MOV, или QuickTime, разработанный фирмой Apple, предназначен для
QuickTime
звук
Семейство форматов MPEG
При работе с цифровым видеосигналом возникает необходимость обработки, пе­
редачи и хранения очень больших объемов информации. Вместе с тем, видеоин­
формация должна передаваться с той же скоростью, с которой предполагается ее
воспроизведение на компьютере. Так, полноцветное (24 бита на пиксел) изобра­
жение размером 720x576 пикселов при воспроизведении со скоростью 25 кадров
в секунду требует скорости передачи видеоданных 240 Мбит в секунду. Однако
пропускная способность каналов FDDI составляет примерно 100—200 Мбит
в секунду, a Ethernet — всего 10 Мбит в секунду. В связи с этим стала актуаль­
ной проблема сжатия видеоданных, для решения которой были разработаны эф­
фективные методы и алгоритмы.
Группа M PEG (Moving Pictures Experts Group) предложила технологию ком­
пактного представления цифровых видео- и аудиосигналов.
Эта группа занимается разработкой стандартов сжатия цифрового видео и звука.
Такие форматы, как правило, требуют использования кодеков (кодеров/декодеров). Существует несколько версий кодека MPEG, например: MPEG-1, MPEG-2,
MPEG-3, MPEG-4, MPEG-7, MPEG-J.
В Интернете наиболее часто используется версия MPEG-1, хотя по мере разви­
тия коммуникационных технологий будут внедряться и остальные варианты.
Стандарт MPEG-1 определяет три уровня, каждому из которых соответствует
собственный формат. Усложненные алгоритмы более высокого уровня требуют
более длительного времени работы, однако обеспечивают более высокие степени
сжатия при сохранении практически точного соответствия оригиналу. Уровень I
дает самую высокую скорость кодирования, а уровень III — наибольшую степень
сжатия при сопоставимом качестве звука. Для звуковых файлов наиболее часто
используется формат MPEG-1 уровня II (расширения файлов .МР2), однако на­
чинают появляться продукты, обеспечивающие сжатие и воспроизведение фай­
лов в формате MPEG-1 уровня III. Файлы MPEG-1 уровня II сохраняют прак­
Звуковые форматы
203
тически неотличимое от несжатого оригинала качество звучания при степени
сжатия от 5:1 до 12:1.
Для записи и воспроизведения звуковых MPEG-файлов необходимы соответст­
вующие программные продукты. Аудио- и видеофайлы в формате MPEG отли­
чаются друг от друга, каждый тип требует специального плеера.
Звуковые форматы
В компьютере звуковая информация, как и любая другая, хранится в файлах.
Файлы с оцифрованным звуком содержат значения амплитуды звукового сигна­
ла, измеренные через одинаковые промежутки времени. Процесс замены непре­
рывного сигнала последовательностью его значений называют дискретизацией.
Частота дискретизации — это величина, обратная промежутку времени между
измерениями. Она показывает, сколько раз в секунду считывается значение сиг­
нала. Частота дискретизации измеряется в герцах (Гц) или килогерцах (кГц).
Приведем перечень распространенных форматов звуковых файлов: .aiff, .aif, .au,
.avr, .hcom, .iff, .nsp, .sf, .smp, .snd, .sou, .voc, .wav. Такое многообразие расширений
появилось из-за большого числа звуковых программ.
Файлы с нотной записью содержат последовательность команд, сообщающих,
какую ноту, каким инструментом и как долго нужно воспроизводить в тот или
иной момент времени. Формат может предусматривать одновременную игру не­
скольких музыкальных инструментов, в этом случае говорят о соответствующем
количестве голосов, или каналов. Например, 16-разрядная звуковая карта под­
держивает 20-голосный синтез. Файлы с нотной записью имеют следующие рас­
ширения: .amf, .cmf, .dmf, .far, .mid, .mod, .mtm, .nst, .okt, .org, .rol, .sbi, .sng, .stm,
.s3m, .ult, .wow. xm.
Формат WAV
Формат WAV (от англ. wave - волна) был создан Microsoft и принят в качестве
стандарта для звукового сопровождения операционной системы и компьютерных игр. WAV-данные хранятся в файлах с расширением .wav. Первоначально
этот формат был разработан для PC, а затем стал использоваться для Macintosh.
В WAV-файле данные хранятся в несжатом виде, кроме того, в нем содержится
информация о числе дорожек (моно или стерео), количестве битов.
Формат AIFF
Формат AIFF (Audio Interchange File Format - формат обмена аудиоданны­
ми) — популярный формат, применяемый на платформе Macintosh, а также ис­
пользуемый для записи аудиоинформации на компакт-диски. Данные в формате
AIFF хранятся в файлах с расширением .aif и .aiff. В этих файлах хранятся
аудиоданные, информация о том, записан звук как стерео или как моно, число
битов, а также сведения, применяемые при обработке аудиофайлов.
204
Урок 12. Мультимедиа
Формат MIDI
Формат MIDI (Musical Instrument Digital Interface — цифровой интерфейс му­
зыкальных инструментов) поддерживается многими разновидностями звуковых
карт. Вместо непосредственного воспроизведения музыки звуковой карте пере­
дается информация о том, как должны быть синтезированы звуки.
Формат MP3
Формат MP3 (MPEG-1 Audio Layer-З) позволяет создавать файлы небольшого
размера, при воспроизведении которых обеспечивается исходное качество звука.
Потоковые данные
Потоковыми называются данные мультимедиа, передаваемые по сети и воспро­
изводимые в реальном времени. Информация может быть получена непосредст­
венно от источника данных, например с видеокамеры или с радиостанции, либо
храниться на веб-сервере.
Передача потоковых данных напоминает трансляцию телевизионных или радио­
каналов. Пользователь может принимать передачу, переключаться на другой ка­
нал либо вовсе прекратить прием данных.
Передача потоковых мультимедиа-данных имеет ряд преимуществ по сравнению
с обычным копированием файлов с веб-сервера.
О Немедленное воспроизведение. При приеме информации в потоковом режиме
фрагмент данных воспроизводится сразу же после его получения.
О Возможность передачи текущих событий. Вещание в потоковом режиме —
единственная возможность передачи текущих событий.
О Возможность передачи больших объемов данных. При передаче данных в пото­
ковом режиме не действуют ограничения на длину копируемого файла.
Фильмы и концерты объемом в гигабайты не занимают места на диске.
О Возможность организации группового вещания. При передаче потоковых дан­
ных несколько пользователей могут подключаться к одному каналу.
О Произвольный доступ к данным. При просмотре данных можно сделать паузу,
перейти к другому фрагменту, просмотреть информацию в ускоренном режиме.
О Возможность контролировать распространение данных. При передаче дан­
ных можно осуществлять контроль за их распространением. Реальные дан­
ные не записываются на диск, сохраняется лишь URL-адрес потока и некото­
рые параметры, используемые для настройки.
Простой поток (unicast) —поток мультимедиа-данных при обычном соединении
между клиентом и сервером, которое можно сравнить с соединением при теле­
фонном разговоре. При обращении нескольких потоков к серверу последний
обеспечивает их организацию, что приводит к дополнительной нагрузке на ли­
нии. Простой поток реализует передачу клиенту данных, находящихся в файлах
на серверах.
!
;
- fi-Vs-s ?
Потоковые Данные
205
Труптёои поток (multicast) - поток мультимедиа-дамных, в котором данные пе­
редают с.я на групповой здрес и одновременно принимаются несколькими клиен­
тами. При этом пользователь не \юж*т управлять ходом трансляции Групповой
гкпок
эффективное средство доставки одних и тех же данных нескольким
пользователям в сети.
Технология Real Audio/Video
— это технология передачи аудио- и видеоинфор
мации, разраоотанная фирмоіі Progressive Networks. Для воспроизведении дан
ных необходим дополнительный модуль Real Player. Файлы, которые могут об­
рабатываться модулем RealPlayer, имеют расширения .га, .ram, .rm, .rmn и .rmd
Технологии Windows Media Server
и Windows Media Player
Технология Windows Media Sewer предлагает набор цифровых компонентов для
поддержки мультимедиа-данных, который предоставляет пользователю возмож­
ность работы с мультимедиа. Windows Media Player поддерживает форматы
WAV, AVI, MIDI, VOD, AIFF и MPEG-2 Layer-3 (MP3). На рис. 12.2 показано
окно программы Windows Media Plaver.
П Проигрыват ель Windows Media
£гздо*а
MidhteVMi*
by Beck Hansen Published by Cya
Beautiful
! SeautihiWay
I BeaubhJ Way
Атмосфера: вода
Рис. 1 2 .2 . Окно программы Windows Media Player
206
Урок 12. Мультимедиа
Технологии QuickTime Streaming Server
и QuickTime Player
Технология QuickTime поддерживает потоковую передачу видео, аудио, текста
и M ID I-информации в реальном масштабе времени. На рис. 12.3 показано окно
программы QuickTime Player.
Welcome Лй
Рис. 12.3. Окно программы QuickTime Player
Подведем итоги
В этом уроке рассказано о размещении аудио-, видео- и анимационных данных
на веб-страницах. Перечислены анимационные файловые форматы. Подробно
рассмотрено семейство форматов MPEG и потоковые мультимедиа-данные.
I
Баннерная реклама
В 1855 году в Лондоне вышла книга Томаса Смита, в которой он
очень интересно писал про рекламу: «В первый раз человек смотрит
на рекламное сообщение и не видит его. Во второй раз он не замеча­
ет его. В третий раз он осознает его присутствие. В четвертый раз он
с трудом припоминает, что где-то это уже видел. В пятый раз он чи­
тает рекламное сообщение. В шестой раз он выхватывает его взгля­
дом из массы других сообщений. В седьмой раз он перечитывает его
и говорит: “О Господи!” В восьмой раз он произносит: “Ну вот, опять
эта проклятая вещь!” В девятый раз он задумывается, что это за
вещь? В десятый раз он подумывает расспросить соседа, не случа­
лось ли ему покупать этой вещи. В одиннадцатый раз он поражается,
каким образом эта вещь может приносить рекламодателю прибыль.
В двенадцатый раз он приходит к выводу, что, вероятно, эта вещь чего-нибудь да стоит. В тринадцатый раз он заключает, что эта вещь
может определенно ему понадобиться. В четырнадцатый раз он при­
поминает, что всю жизнь мечтал об этой вещи. В пятнадцатый раз он
сокрушается, что не может себе позволить купить эту вещь. В шест­
надцатый раз он говорит себе: “Придет время — и я обязательно куп­
лю эту вещь”. В семнадцатый раз он вносит в свои планы покупку
этой вещи. В восемнадцатый раз он клянет свою нищету. В девятна­
дцатый раз он тщательно пересчитывает деньги. В двадцатый раз он
вновь видит рекламное объявление — и покупает эту вещь (или за­
ставляет купить ее свою супругу)».
Эту цитату, которая воспроизведена во многих учебниках по рекла­
ме, издававшихся на протяжении всего двадцатого столетия, в пол­
ной мере можно отнести к баннерной рекламе, являющейся темой
этого урока.
208
Урок 13. Банмерная реклама
Определение баннера
Баннер (от англ. banner — знамя, флаг) — небольшой рекламный модуль стан­
дартного размера (468x60, 88x31 и т. д.), который обычно помещается вверху
или внизу веб-страницы. Баннер может быть текстовым, графическим или инте­
рактивным, содержать анимацию. Как правило, баннер представляет собой ссыл­
ку на сервер рекламодателя, рекламирующего тот или иной ресурс Интернета.
Обычно изображение для баннера имеет формат GIF или JPG , хотя встречаются
баннеры других форматов, созданные с помощью технологий Java, ShockWave
и т- д-
!I I I
I , :■
-
II
В настоящее время не существует официально принятых стандартов на размер
баннеров, хотя наиболее распространенным является размер 468x60 пикселов.
Первой вехой в стандартизации размеров баннеров стали рекомендации, предло­
женные организацией Internet Advertising Bureau совместно с CASIE (The
Coalition for Advertising Supported Information & Entertainment):
О 468x60 — полный горизонтальный баннер (16,51x2,12 см);
О 460x55 — полный горизонтальный баннер (16,2x1,94 см);
О 234x60 — половинный баннер (8,26x2,12 см);
О 125x125 — квадратный баннер (4,41x4,41 см);
О 120x90 — кнопка (4,23x3,18 см);
О 120x60 — кнопка (4,23x2,12 см);
О 88x31 — микрокнопка (3,1x2,12 см);
О 120x240 — вертикальный баннер (4,23x8,47 см).
Размеры в сантиметрах указаны для монитора, имеющего разрешение 72 пиксе­
ла на дюйм.
Так как необходимо, чтобы баннер загружался на страницу как можно быстрее,
существует ограничение на размер баннера в килобайтах. Так, для баннера
468x60 максимальный размер обычно составляет 10-15 Кбайт.
Эффективность баннеров
Одной из самых важных характеристик баннера является отношение числа
щелчков мышью на баннере к числу его показов. Так, если баннер был показан
на какой-либо странице 1000 раз, а щелкнули на нем и, соответственно, с его по­
мощью перешли на сайт рекламодателя 50 раз, то эффективность (его отклик)
такого баннера равна 5 %. По статистике, средний отклик баннеров в W W W со­
ставляет 2,11 %.
'
-;•?
£ -■'Й;;У
'' у 1
На сайте www.promo.ru в энциклопедии интернет-рекламы Тимофей Бокарев при­
водит рекомендации по созданию баннеров.
О Волшебная фраза I Click Неге». Самый простой способ увеличить количество
щелчков на вашем баннере — попросить об этом пользователя. По статистике,
баннеры, содержащие слова типа «click here», «жми сюда», «visit now»,
Эффективность баммсре*
209
«enter* и т. д., имеют отклик на 30 % больше, нем без оных. Хорошей идеей
является размещение на баннере псевдокнолкн или полосы прокрутки.
О Ничто человеческое пользователю сети не чуждо. Следует сделать баннер загодичным, заинтриговать пользователя: что они этим хотели скалить» куда wt+
pBpvr сей б м и р ?
, / л
^ШиИй^Н
О Размер баннера, Бакнеры большего размера имеют пиачктелыго больший от*
клик, чем баннеры меньшего размера. Хотя, разумеется, часто :ia раэме*цение
ка веб-странице байкера большего размера приходится больше платить.
О И спользование анимации. Движение, характерное для анимированных банке*
ров, всегда нриковывает взгляд. По статистике o t ic л ик у таких баннеров на
25 % выше, чем у их статичных баннеров.
О Изображения, Изображения приковывают к себе внимание пользователя н мо­
гут дополнять рекламный слоган по смыслу. Следует стараться органично встро­
ить изображение в баннер, а не просто сделать его прямоугольной частью
Щ баннера.
ft
О Цвет . Для баннера следует использовать яркие цвета — они привлекают
к себе взгляд пользователя — и подобрать оптимальное цветовое сочетание.
О Тестирование. Попытайтесь одновременно разместить на странице несколько
однотипных баннеров, а затем незначительно изменяйте текст, добавляйте,
убирайте какие-либо черты. Иногда даже незначительные изменения текста
или композиции баннера дают значительное изменение отклика. Протести­
руйте эти баннеры некоторое время, после этого можно убрать те, которые
имеют более низкий отклик по сравнению с остальными.
О Положение на странице. Помимо дизайна баннера, на его отклик имеет силь­
ное влияние положение на странице.
Как уже отмечалось, средний отклик баннера в Интернете составляет пример­
но 2 %, Возникает ощущение, что только 2 % показов баннера идут на пользу
рекламодателя (приводят посетителей на его веб-сайт), а остальные 98 % тратят­
ся впустую. Это совершенно не так! Каждый показ баннера приносит рекламода­
телю ощутимую пользу, являясь прекрасным инструментом продвижения торго­
вой марки компании, ее товаров, услуг, ее веб-сайта.
Чтобы реклама работала, баннер должен быть выполнен в соответствующем
ключе: профессиональный дизайн, хорошо продуманный рекламный слоган, ис­
пользование соответствующих изображений и т. д.
Ниже приведены некоторые результаты исследований, которые показывают от­
ношение пользователей Интернета к рекламе в сети (по данным сайта http://www.
iab.net/):
О 18 % горячо поддерживают,
О 41 % одобряют;
О 34 % не возражают;
0 6% против;
О 1 % крайне не одобряют
210
Урок 13. Баннерная реклама
При размещении баннерной рекламы дополнительную прибыль за счет роста
продаж своих товаров получают не только непосредственные рекламодатели, но
страницах
рекламы
рекламе
компании Google в третьем квартале 2004 года выросла более чем в 2 раза по
предыдущим кварталом: до 52 млн долларов (ли 19 центов в пересчете на акцию) по сравнению с 20,4 млн долларов а аналогичный период про­
шлого года, ыручка компании составила 805,9 млн долларов по сравнению
с 393,9 млн долларов.
Примеры баннеров
Хотя в начале этого урока были приведены размеры стандартных баннеров, на
современных сайтах появляются модули нестандартных размеров, причем на­
блюдается тенденция к увеличению размеров баннеров. На рис. 13.1 показан
баннер размером 600x125 пикселов, что при разрешении 72 пиксела на дюйм со­
ставляет 21,17x4,41 см (листинг 13.1).
Журнал
0:\Книги\Уче6ныйкурс\НТМ\СО\Глава I3\8sbng13.l.htm
Рис. 13.1. Баннер размером 600x125 пикселов
Л истинг 1 3 .1 . Пример создания баннера размером 600x125 пикселов
<HTML><HEAD><TITLE>BaHHep школы</Т1Т1_Ех/НЕА0>
<B0DYxCENTER><IMG src="shool .gif"></CENTER></B0DY></HTML>
В последнее время очень модными стали вертикальные баннеры, один из кото­
рых показан на рис. 13.2 (листинг 13.2). Этот баннер имеет размеры 240x400
пикселов, что составляет 8,47x14,11 см при разрешении 72 пиксела на дю йм .
Иногда высота вертикального баннера увеличивается еще больше, и, чтобы его
просмотреть, требуется полоса прокрутки.
Л истинг 1 3 .2 . Пример создания вертикального баннера
<НТМІ><НЕАОхТІТІ_Е>Вертикальньій баннер</Т1Т1_Ех/НЕА0>
<B0DY>
, ..
ч
<CENTERxiMG src="banner 240x400.gi f"x/CENTERx/B0DYx/HTML>
v ■
W
Щ
Примеры баннеров
211
Вертикальный баннер - Microsoft: Internet fxpkirer
■
Ш Ж
0:\К»*си\Учвбиый Kypc\HTM\CD\Tлава 13\lstlngl3.2.htm
свегьлнк
России
Рис. 13.2. Вертикальный баннер размером 240x400 пикселов
Одними из самых распространенных считаются баннеры размером 468x60 пик­
селов, что составляет 14,11x2,12 см при разрешении 72 пиксела на дюйм. При­
мер показан на рис. 13.3 (листинг 13.3).
Ш Баннер - Microsoft Internet Explorer
0 1 0:\Ю«ги\Уче6нь« курс\НТМЦСО\Глава 13\fcbng13.3.htm
Рис. 13.3. Баннер размером 468x60 пикселов
Листинг 1 3 .3 . Пример создания баннера размером 468x60 пикселов
<HTMLxHEADxTITLE>6aHHep</TITLEx/HEA0>
<B0DYxCENTERxIMG src="bannerl3.3.gif"x/CENTERx/B0DYx/HTML>
Иногда на страницу помещают баннер в виде кнопки размером 88x31 пиксел,
что составляет 3,1x1,09 см при разрешении 72 пиксела на дюйм. Пример показан
на рис. 13.4 (листинг 13.4).
212
Урок 13. Баннерная реклама
4.htm
Рис. 13.4. Баннер в виде кнопки
Листинг 1 3 .4 . Пример создания баннера в виде кнопки
< H T M L x H E A D x T гп_Е>Баннер в виде кнопки</Т1ИЕх/НЕА1>
<BOOYxCENTERxlMG src="bannerl3.4.gif“ x/CENTER> </BODYx/HTML>
Баннер размером 234x60 пикселов, что составляет 8,26x2,12 см при разрешении
72 пиксела на дюйм, показан на рис. 13.5 (листинг 13.5).
ІиГягкі* fiflww
*1 1
я* * »*
Рис. 13.5. Баннер размером 234x60 пикселов
Листинг 1 3 .5 . Пример создания баннера размером 234x60 пикселов
<HTHLxH£AD><TlTlE>&dHttep</TITLEx/HEAD>
'Ш Ш Я Ш Я Ш Ш
<0 иит>
<CENTER><IMG s t ғ*
С ЬаппегІЗ. 5. gi f"x/CENTERx/B00Yx/HTHl>
rim* gtit й*бе«л» с«м|-І0Р■
тШ№щ
W
»ЙШ
ИП$ Oftчттіъ Ачиои щ
.
-
. Ы ғ
С
Рис. 1 3 .6 . Баннер размером 474x161 пиксел
Подведем итоги
213
Баннер размером 474x161 пиксел что составляет 16,72x5,68 см при разрешении
72 пиксела на дюйм, показан на рис. 13.6 (листинг 13.6).
Листинг 1 3 .6 . Пример создания баннера размером 474x161 пиксел
У HTMLxHEAD><TITL Е>Баннер</ТITL Ex/HEAD>
І ’
<B0DY>
<CENTERxiMG src="bannerl3.6.gifnx/CENTERx/B0DYx/HTML>
Подведем итоги
В этом уроке рассказано, что такое баннер и баннерная реклама. Рассмотрены
вопросы эффективности баннерной рекламы. Приведены многочисленные при­
меры баннеров.
Урок 14
Публикация и поиск
документов
В этом уроке рассматриваю тся вопросы разм ещ ения материадвух
сайта
О публикацию веб-сайта.
страниц
доступном дисковом пространстве специальных веб- сайтов, которые
услуга
хостами
http://www
числены сайты, в том числе русскоязычные, англоязычные, немец­
коязычные, бесплатно предлагающие услуги веб-хостинга;
www.AGAVA.ru,www.Boom.ru,www.By.ru,www.Chat.ru,www.Hoha.ru,
www.Holm.ru,www.Hut.ru,www.Km.ru,www.narod.yandex.ru,
www.npwmail.ru.www.RussianZone.ru.www.Be6servis.ru.
Подготовка и публикация веб-сайта
215
дготовка и публикация веб-сайта
Сайт (от англ. site — участок) — это ресурс Интернета, один из разделов сервера,
полностью посвященный какой-либо одной теме. В отличие от сервера, для об­
служивания сайта, как правило, не выделяется отдельная серверная программа,
а все сайты, расположенные на сервере, обслуживаются одной такой программой.
■ЩН ородРу - M icrosoft Internet Explorer
htlp://www .гаг od. у andex.ги/
ятю*
Ш BY8 Ш Ш Ш Ш Н
юшт ШшШШШш и п
Рис. 14.1. Главная страница сайта Народ.Ру
Н а р о д ,Р у : М а с те р с к а я - М іт ж Л In te rn e t
http://narod.yandex .ru/userarea/after_regeter. xl
Английский, немецким, французским,
итальянский, испанский.
Народ
кт*.RtlQOO^junin
М астерская
*Пвш«вя
♦ лы т ліи фт&т ва Cite Ф
♦ Дасгш 5 файлам до FTP
♦Ш
ЦИВЗЮ
ИМЯЯ1Ш
іШ
Ш
Ш
ІШ
ХіМЯ
♦Л»6ш>н£
♦ О
» J U U 9 U .M B 1 т о ш и ш ш я и
т Ш Н ІЯ ІЩ Щ И І
Рис. 1 4 .2 . Мастерская на сайте Народ.Ру
216
Урок 14. Публикация и поиск документов
Сайт является частью сервера, хотя большинство сайтов имеют собственное
включать
разделы должны быть подчинены общей идее, единому стилю исполнения.
самостоятельная логическая единица, состоящая из комплекса связан­
Сайт
ных между собой по смыслу текстовых документов и графических иллюстраций.
В качестве примера рассмотрим подготовку и публикацию сайта Народ. Ру, рас­
положенного по адресу http://www.narod.yandex.ru (рис. 14.1).
3 Народ.Ру: Выбор варианта шаблона *Тпарная стрдедца «айіаі
}д Э http;//ndrod .yaodex.r uAempl/prevrew. xhtmlTtemplateJd —198e,dndom-r>ocdche* 122S1342Se28e95c059
IftV IR t ■ « » « ! « • • I
• » « * * . % * * • * - • - . • « • • -> * • • « * • * * f * • • A * • * • v*-». * " * •
л ft *J» • ■
ЯнуковичаиЮщвнкомогутпривлвчьк
уголовнойОТВВТСТВВННОСТИ—
<134
Ш Г5В 0С ТИ
iZSZ у<'- *-* « т о и г г м
^
и
т Л
А
Г Д Г О У * Д ^ Р м
іп Л
e
r a
Ik a m
«
■
a! < А а А
в а с т о б р а б о та н о 8 2 3 ист© « и м и .
Ш Ш a a . «. a »
k
*
*
К ■
to. 4 t A
A
• • • •
t Я • ■
* • »
%
С
Й
■ ■
I
*? (
В В А 4
В В
•
• •
*
Т.ЖвмВЯВЯВПКЯЗ
ІН к ш Н
Г X * ООДОсООДООО М О О С О О О У яX v W W f t V A V W
М астерская / Выбор варианта шаблона "Главная страница сайта*
Выберите вариант шаблона, который наиболее полно отвечает вашим требованиям
Рис. 14.3. Заготовки главной страницы на сайте Народ.Ру
Ц Народ .Ру: Создание index.Wnrd - Microsoft M c rn e t Explorer
«
http://rtarod.varatexjuA«roi/index edtor^htmf?5TATUSHNEWaffenaqw-iode x ^ ^
Выбор файла
Ж Ш
М астерская / Cos
Цвет фона:
> у л
Обои страницы
О не оаэмножа
Краткий эаголовощ
Цвет текста:
• # • ^* • * » • • • • * • в • •
ттт
• • • * •v•
* • • * * » ( _ • • • • • • • • яv в • • • • * • * * е е і
2Щ
;Ж шшшш
m КШ
д а /
О Д » * * » V*2
iV V \%
Рис. 1 4 .4 . Создание главной страницы «с нуля» на сайте Народ.Ру
Поиск информации в Интернете
217
Для создания своего веб-сайта нужно щелкнуть на ссылке Мастерская и с помо­
щью расположенных в «мастерской* ссылок разработать для своего сайта глав­
ную страницу, страницу персональной информации, создать фотоальбом и резю­
ме и т. д. (рис. 14.2).
Вариант своей главной страницы можно выбрать из предложенных заготовок
(рис. 14.3), а можно создать свою главную страницу «с нуля», задав определен­
ный фон и разместив на нем рисунки и текстовую информацию (рис. 14.4).
Однако, чтобы иметь возможность разрабатывать свой сайт в мастерской Народ.Ру, в первую очередь необходимо зарегистрироваться (рис. 14.5).
Сайт Народ. Ру заботливо относится к своим клиентам, предлагая различные за­
готовки и варианты создания страниц, а также сообщая разнообразную полез­
ную информацию, например о размере получающегося файла или о других адре­
сах, на которых можно разместить свои веб-страницы.
Яндекс; Паспорт - Microsoft Internet Ікріогег
*
http://pessport.yandex.ru/passport7mode-r
паспорт
Регистрация: шаг 1 из 2
Логин
должен состоять из сюлеолов А-х. 0-9. начинаться с буквы,
заканчивать^я буквой или цифрой и содержать не более 20 символов
Существует мнение, что все хорошие логины на Яндексе уже ^
заняты. Но это не так. Мы можем посоветовать вам интересный
незанятый логин. Для этого достаточно указать имя и фамилию
(они понадобятся и для дальнейшей регистрации).
Ваше имя
Фамилия
Рис. 14.5. Регистрация на сайте Народ.Ру
Поиск информации в Интернете
Существует три основных способа поиска информации в Интернете, по темати­
ческим ссылкам, по URL-адресам и с помощью поисковых машин. Проще всего
искать информацию по тематическим ссылкам —достаточно щелкать мышью на
предлагаемых ссылках, последовательно сужая круг поиска, например. Покупки ►
Спортивные товары ►Тренажеры и т. д. Другие виды поиска (по URL-адресам и по­
иск с помощью поисковых машин) несколько сложнее.
218
Урок 14. Публикация и поиск документов
Поиск информации по URL-адресам
Чтобы искать информацию по URL-адресам, нужно иметь представление о до­
менной системе имен. В соответствии с этой системой адреса компьютеров де­
лятся на части — так называемые домены (от англ. domain — область), причем
символы последней части URL-адреса представляют собой тематические или
географические домены. Ниже перечислены некоторые наиболее известные до­
мены подобного рода (домены верхнего уровня).
Тематические домены:
I
О сот — корпорации;
О edu — учебные заведения;
О gov — невоенные правительственные учреждения;
О mil — военные учреждения;
О net — сетевые организации;
О org — прочие организации;
щ
_
О int — международные организации;
О firm, biz — бизнес;
О store — виртуальные магазины;
О web — веб-организации;
О arts — организации культуры;
О гес — организации развлечений;
О info — организации, предоставляющие информацию;
О пот — индивидуальные пользователи;
О агра — исторически возникший домен верхнего уровня, соответствующий
сети ARPANET (предшественнице Интернета).
Географические домены:
О at — Австрия (Austria);
О ап — Австралия (Australia);
i
О be — Бельгия (Belgium);
О Ьд — Болгария (Bulgaria);
О са — Канада (Canada);
О ch — Швейцария (Switzerland);
О су — Кипр (Cyprus);
О de — Германия (Germany);
О es — Испания (Spain);
* . »' г
О fi — Финляндия (Finland);
О дг — Греция (Greece);
О it — Италия (Italy);
Йд
О jp — Япония (Japan);
О hi — Голландия (Holland);
О по — Норвегия (Norway);
Поиск информации а Интернете
219
О pi — Польша (Poland);
О ;и — Россия (Russia);
О se — Швеция (Sweden);
О tr — Турция (Turkey);
О uk — Великобритания (United Kingdom);
О us — США (United States).
Зная информацию о доменах верхнего уровня, пользователь при поиске сайта
уже имеет примерное представление о том, что нужно вводить в адресную стро­
ку браузера. Далее представлены некоторые примеры.
О Для поиска корпоративных сайтов к названию фирмы, предприятия, органи­
зации нужно добавить домен .сот, а впереди подставить символы, опреде­
ляющие, как вы уже знаете, метод доступа (www). Вписав полученные симво­
лы в адресную строку браузера, вы наверняка получите адрес нужной
веб-страницы, например:
□ www.adobe.com —адрес компании Adobe, известного производителя графи­
ческих приложений;
□ www.microsoft.com — адрес корпорации Microsoft;
□ www.europages.com — справочник на английском, французском, немецком,
испанском и итальянском языках по более чем 150 тысячам компаний,
расположенных во всех странах Европы;
□ www.intellimatch.com - бесплатный банк данных резюме, предлагающий
услуги как работодателям, так и тем, кто хочет найти работу в США.
О Для поиска российских серверов к названию фирмы, предприятия, организа­
ции следует добавить домен .ги, а впереди подставить символы www, например.
□
□
□
□
www.students.ru — сервер российского студенчества;
www.translate.ru — электронный переводчик текстов:
www.ntv.ru — телекомпания НТВ;
www.hermitage.ru — сервер Эрмитажа;
q www.resume.ru — база данных вакансии и резюме.
О При поиске сайтов крупных учебных заведений к названию американского или
английского университета прибавляется домен .edu, например: www.oxford.edu —
сайт Оксфордского университета.
О В каждой стране есть свой региональный сервер, например:
□ www.russia.net,www.ru.net — Россия;
а www.usa.net — США;
□ www.uk.net — Великобритания.
Поисковые системы
Поисковых систем, которые еще называют поисковыми программами, поисковы­
ми серверами или поисковыми машинами, в Интернете множество, в том числе
русскоязычных.
220
Урок 14. Публикация и поиск документов
Чтобы вызвать поисковую систему, необходимо в адресную строку браузера вве­
сти ее адрес. Вот адреса некоторых наиболее известных поисковых систем:
http://www.rambler.ru, http://www.yahoo.com, http://www.google.com, http://www.aport.ru,
http://www.yndex.ru, http://www.chuvsu.ru, http://www.list.ru, http://www.weblist.com,
http://www.lycos.com, http://www.altavista.com, http://www.infoseek.com, http://www.
excite.com, http://www.webcrabler.com, http://www.hotbol.com.
После загрузки поисковой системы в поле поиска пользователю следует ввести
запрос (искомую строку текста) на любом языке (русском, английском и др.) и
щелкнуть на кнопке поиска.
В результате выполнения запроса появляется список адресов веб-страниц, со­
держащий документы, в которых встречаются введенные в запросе слова. В этом
списке указываются веб-адреса страниц, их названия, фамилии авторов, краткие
описания. Выбрав. нужный адрес, можно перейти к найденному документу.
Обычно в результате поиска предлагается множество документов (иногда тыся­
чи), которые сгруппированы постранично. Чтобы проще было ориентироваться
в таком количестве документов, поисковая система обычно сортирует их — пер­
выми предлагаются те страницы, которые, по мнению поисковой системы, точ­
нее удовлетворяют запросу.
Основу любой поисковой системы составляет сетевой робот, называемый также
пауком (spider), червем (worm) или ползуном (crawler). Поисковая система рас­
сылает в сеть таких пауков, пытаясь по возможности просмотреть максимальное
количество веб-страниц, и сохраняет их адреса и содержимое в своей базе дан­
ных. После того как пользователь вводит запрос и щелкает на кнопке поиска, по­
исковая система просматривает свою базу данных и выводит на экран результат
поиска.
4' , ' , » . у , .. <
I
Подведем итоги
В этом уроке рассказано о подготовке и публикации собственного веб-сайта, пе­
речислены адреса бесплатных веб-хостов, описана процедура создания сайта на
примере сайта Народ.Ру. Во второй части урока рассказывается об основах поис­
ка информации в Интернете.
Урок 15
раз с начала
В этом уроке рассматриваются теги, которые находятся в са­
мом начале веб-страницы, а именно теги <!D0CTYPE>, <LINK>
и <МЕТА>.
I
н
\
222
Урок 15. Еще раз с начала
Версия языка HTML
Первым тегом созданной начинающим пользователем компьютера веб-страницы
является тег <HTML>. Но стоит только сохранить веб-страницу под новым име­
нем, в ее начале появляется новая строка, начинающаяся с тега <!D0CTYPE>.
Тег <!D0CTYPE> предоставляет сведения о версии языка H TM L, используемой
в текущем документе. Эти сведения размещаются в первой строке документа
в форме SG M L-объявления. Тег <!D0CTYPE> должен быть первым тегом в доку­
менте. Этот тег впервые появился в H T M L версии 2.0.
Теоретически тег <!D0CTYPE> должен помочь веб-серверу выбрать способ обра­
ботки документа, информируя его о том, какие дескрипторы могут находиться
на странице, однако в настоящее время он обычно игнорируется браузерами, по­
этому, строго говоря, указывать его не обязательно. Синтаксис:
<!DOCTYPE HTML элемент_верхнего_уровня уровень_доступа
“Признак_регистрации//организация//тип_обьекта//метка/7Код_языка“ "1Ш ">
Пример:
■
* '--.рЩ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN”>
Ниже перечислены параметры тега <!D0CTYPE>.
О Элемент верхнего уровня объявляется в определении типа документа
(Document Type Definition, D TD ). Так как язык H T M L развился из стандарт­
ного обобщенного языка описания документов (Standard General Markup
Language, SG M L), являясь его производной, созданной для разметки тексто­
вых документов, этим и объясняется необходимость задания типа документа.
Документы, в которых могут встречаться те или иные элементы, были отнесе­
ны к различным типам документов (document type). Чтобы описать элемен­
ты разметки документа, достаточно выбрать стандартное определение типа
документа. Для H T M L-документа используется значение HTML.
О Поскольку H T M L-документы являются общедоступными, в качестве уровня
доступа используется значение PUBLIC.
О Признак регистрации указывает на то, зарегистрирована (+ ) или нет (- ) дан­
ная организация в ISO . Консорциум W 3C (W orld W ide W eb Consortium)
в ISO не зарегистрирован, поэтому нужно указывать знак I (минус).
О В качестве организации указывается организация, ответственная за создание
и поддержку DTD. За поддержку определения типа Н ТМ L-документа отве­
чает консорциум W 3C, поэтому используется значение W3C.
О В случае языка H T M L в качестве типа объекта используется значение DTD.
О Метка определяет версию языка H TM L. Для H T M L 4.0 используется значе­
ние HTML 4.0, HTML 4.0 Transitional или HTML 4.0 Frameset.
О Код языка — двухбуквенное обозначение, принятое в ISO . Например, код
английского языка — EN.
'*•
О Идентификатор U R I определяет расположение DTD. H T M L 4.0 поддержива­
ет следующие идентификаторы U R I:
МЕТА-информация
223
□ http://www.w3.org/TR/REC-html40/strict.dtd;
□ http://www.w3.org/TR/REC-html40/loose.dtd;
□ http://www.w3.org/TR/REC-html40/frameset.dtd;
□ http://www.w3.org/TR/REC-html40/HTMLlatl.ent;
□ http://www.w3.org/TR/REC-html40/HTMLsymbol.ent;
□ http://www.w3.org/TR/REC-html40/HTMLspecial.ent.
О бщ ая схема документа с тегом <!D0CTYPE> выглядит следующим образом:
<!DOCTYPE HTML PUBLIC “ -//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEADxTITLE>3ar^0B0K документа</ТіиЕ></НЕАО>
<В00Ү>"Тело" документа, содержащее теги, которые позволяют управлять информацией,
выводимой на экран </B0DY></HTML>
МЕТА-информация
Кроме обычных тегов существуют еще и так называемые МЕТА-теги. Они не
отображаются браузером, но могут содержать некую служебную информацию,
значимую для поисковых систем (например, ключевое слово, указание на автор­
ство, описание).
Как и тег <!D0CTYPE>, МЕТА-информация может появляться автоматически по­
сле первого сохранения страницы под новым именем, располагаясь между тега­
ми <НЕА0> и </HEAD>:
<!DOCTYPE HTML PUBLIC “ -//W3C//DTD HTML 4.0 Transitional//EN">
<HTMLxHEADxTITLE>3ar0n0B0K документа</ТІП.Е>
<META http-equiv*Content-Type content="text/htm1: charset=windows-1251 >
<META content=“MSHTML 6.00.2600.0" name=6ENERAT0Rx/HEAD>
<B0DY>"Te/io” докунента. содержащее теги, которые позволяют управлять информацией
выводимой на экран </B0DYx/HTML>
Тег <МЕТА> служит для размещения дополнительной информации о веб-страни­
це, включая данные о документе, его авторе, дате создания, списки ключевых
слов для поисковых машин и т. п. Общий синтаксис МЕТА-тега:
<МЕТА МАМЕ="иня_МЕТА-тега“ СОНТЕМТ=''содержание_МЕТА-тега">
Еще один вариант:
<МЕТА HTTP-EQUIV-''иня МЕТА-тега" СОМШ=п
содержание_МЕТА-тега">
Разница между этими двумя атрибутами в том, что атрибут NAME не обрабатывается браузером, a HTTP-EQUIV обрабатывается.
Атрибут NAME
Ниже представлены примеры тега <МЕТА> с атрибутом NAME.
О Описание содержимого документа:
<МЕТА NAME*"description" CONTENT-'Описание ресурса >
Описание ресурса рекомендуется делать небольшим (не более 250-300 сим
волов), например:
<МЕТА name - -description" content - “Эта страница предназначена
для предоставления справочной информации по HTML >
224
Урок 15. Еще раз с начала
О Список ключевых слов для поисковых систем:
<МЕТА NAME®"keywords" CONTENT5*"Ключевые слова">
Ключевые слова в списке пишутся через пробел или запятую. Эти слова нужны
поисковым машинам для индексации страницы в своем каталоге, например:
<МЕТА NAME-"keywords" CONTENT="HTML html JavaScrip t
ja va scrip t css CSS VBScript vbscript VRML vrml php
PHP Perl peri теги атрибуты листинг браузер">:
О Имя автора документа, адрес его электронной почты, домашний адрес, другие
данные:
л <МЕТА NAME="author" C0NTENTe"MH$opMaunfl_o6__aBTope,,>
О Название программы, с использованием которой создан документ:
<МЕТА NAMEe"generator" C0 NTENTss"Ha3 BaHne__nporpaMMbi">
О Время «устаревания» документа (то есть срок годности):
<МЕТА NAME = “expires" CONTENT = “
Дата>
О Адрес электронной почты:
<МЕТА NAME~"Rep1y-toH CONTENT=”Имя@Адрес">
О Описание авторских прав на документ:
<МЕТА NAME="Copyrigh" CONTENT-"Авторские^праваи>
Атрибут HTTP-EQUIV
Ниже представлены примеры тега <МЕТА> с атрибутом HTTP-EQUIV.
О Следующая запись позволяет вернуться через заданный промежуток времени
на определенный адрес:
•
г
4
<МЕТА HTTP-EQUIV="Refresh" CONTENT-"0:
URL=h ttp ://www.p iter-p ress. ru">
В данном случае сразу после загрузки страницы браузер перейдет на адрес
http://www.piter-press.ru.
О M IM E -тип содержимого и его кодировка:
<МЕТА HTTP-EQUIV-"Content-Type" CONTENT="text/html:
CHARSET-w1 ndows-1251”
>
^
.
..
:-V
, ' v Д,
В данном случае в качестве М ІМ Е-типа указано значение text/html, то есть
гипертекст, а в качестве кодировки — значение windows-1251. Вообще говоря,
явно указывать кодировку не рекомендуется. Браузеры и сами неплохо
справляются с ее выбором.
О Время «устаревания» документа (то есть срок годности):
<МЕТА HTTP-EQUIV-”expires" CONTENT»"Mon. 7 Nov 2004 10:00:00 GMT”>
Срок годности указывается в формате RFC-850 (стандарт электронной почты):
□ Моп — день недели;
□ 7 Nov — день месяца и месяц;
□ 2004 — год;
□ 10:00:00 — время (часы, минуты и секунды);
□ GMT — временной пояс (в данном случае время указано московское).
Подведем итоги
225
По истечении указанной даты документ будет удален из локального кэша и
при повторном обращении заново запрошен из сети. В этой процедуре участ­
вуют и браузер и сервер. Если указывается нулевая дата, документ удаляется
сразу после загрузки, то есть вообще не сохраняется в кэше.
Связь веб-страницы с дополнительными
фаилами
Связь текущей страницы с другими файлами задается тегом <LINK>. Основное
применение — обращение к описанным в отдельном файле стилям. Тег <LINK>
вставляется между тегами <НЕА0>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transit1ona1//EN">
<!- saved from ur1=(0048)http://www.htrn1heTp.com/reference/css/units.html ->
<HTML 1ang=en><HEAD><TITLE>CSS Units</TITL£>
<META http-equiv-Content-Type content="text/html: charset=windows-1251"xLINK rev-Made
href="m ailto :1 iam@htmlhelp.com"xLINK h ref- "./" rel=Start><LINK.
href-"properties.htm l" rel-UpxLINK href-Vglossary/glossary.htm r rel-GlossaryxLINK
href-"/copyright.htm l" rel-CopyrightxLINK href-"CSS U n its l.file s / s ty le .c s s
type-text/css rel-Sty'1eSheetxLINK media-aural href="CSS U n itsl.file s/ a u ra l .css
type-text/css rel=Sty1eSheet>
<META content=“John Pozadzides/Liam Quinn" name-author>
<META content-"A description of the units availab le in Cascading Style Sheets, leve
„
name=descri p ti on>
<META content="htm1 authoring, newsgroup, web design group, web page design, щ p.
frequently asked questions, internet help, s ite creation, page creation s ite design,
page design, s ite layout, page layout, html. hypertext markup language, hyper text
markup language. questiQns. graphics, www pages, html 3.2. help f ile s , tu to ria s.
a rtic le s , reference m aterial, guide, style , stylesheet, style sheet, css. cascading
style sheets, units, color, colour, colors, colours, length, lengths, percentage,
percentages, value, values. URL. uniform resource locator, rgb. answer"
nameaekeywords>
<M£TA http -equi v*Contfent -Sty 1e -Type content*text/css
<META content-"MSHTML 6.00.2600.0" name=GENERAT0Rx/HEAD>
<B0DY text=#000000 vLink=#800080 aLink=#000080 1ink=#0000ff bgColor-#ffffff
<H2xiMG height=83 a1t="The Web Design Group"
src-"CSS U n itsl.files/w d g lo g o l.g if" width=250x/H2>
Ter <UNK> не имеет закрывающего тега, но имеет обязательные атрибуты. HREF
(целевой адрес), ТУРЕ (тип данных) и либо REL (отношение целевого документа,
заданного атрибутом HREF, к текущей странице), либо REV (обратное отношение).
Подведем итоги
В этом уроке рассказано, что начало программы на языке H T M L содержит важную информацию и иногда может быть довольно сложным.
\
Урок 16
Слои
В этом уроке рассматриваются слои и способы их вклю чения
в веб-страницы. Слои впервые появились в программе Adobe
Photoshop, а спустя некоторое время их стали использовать
в программах Adobe PageM aker, C o re lD R A W и других.
Создание слоя с помощью тега <DIV>
227
Понятие слоя
Понятие слоя (layer) обычно иллюстрируют с помощью листа прозрачной бума­
ги (кальки). На каждом из таких листов может находиться графический или тек­
стовый фрагмент единой композиции, образуемой при наложении листов кальки
друг на друга. Преимущество слоистой структуры состоит в том, что можно ре­
дактировать код программы каждого слоя отдельно, не затрагивая других частей
кода на других слоях. Стопку слоев также сравнивают с колодой игральных
карт. Их, как и карты, можно перетасовывать.
Слои украшают веб-страницу. С появлением браузера Netscape Communicator
версии 4 технологию слоев стали применять непосредственно для оформления
веб-страниц. Слой можно описать тегом <LAYER> (для Netscape Communicator)
или <DIV> (для Internet Explorer) и наполнить нужным содержанием для по­
следующего точного позиционирования на странице. Слоям можно задавать
абсолютные координаты, относительную глубину, фон и т. д. Для создания дина­
мических слоев используется язык JavaScript. Можно, например, нарисовать не.сколько картинок, представляющих кадры анимации, расположить их на разных
слоях и затем, поочередно изменяя атрибут видимости слоев, показывать кар­
тинки зрителю, создавая эффект анимации. Для перемещения картинки по экра­
ну можно просто менять позицию слоя, на котором она расположена.
Создание слоя с помощью тега <DIV>
Парный тег <DIV> предназначен для позиционирования текстового или графиче­
ского слоя. Для этого служит атрибут ALIGN, который может иметь значение L
(по левому краю), CENTER (по центру) или RIGHT (по правому краю). Кроме этого
ется следующий фрагмент кода:
<DIV class-"ita1 lcfont"> Отображение текста курсивом </DIV>
<niи riass-"bo1dfont"> Отображение текста полужирным шрифтом </uiv>
<НЕА0>
<STYLE TYPE-text/css>
<!Ш т
# ita llc fo n t {font-weight: bold}
fboldfont { font-sty 1e : courier}
</STYLE>
</HEAD>
228
Урок 16. Слои
После описания идентификатора его следует включить в состав тега:
<DIV ID ~ "italicfo n t"> Отображение текста курсивом </DIV>
<01V ID-"boldfont"> Отображение текста полужирным </DIV>.
Идентификаторы применяют, если стили должны использоваться в докумен­
те однократно. В противном случае лучше задействовать классы.
О Атрибут STYLE. Атрибут STYLE содержит информацию о стиле (отступах сле­
ва, справа, сверху, снизу, о положении на странице), например:
<01V style®"LEFT: 50рх; POSITION: absolute: TOP: 70рх">.
На рис. 16.1 показан пример использования слоев (листинг 16.1).
3 0:\Книги\Уче6ны й курс\НТМ 1\а>\Г лава 16\)isting 16Л M m
0:\Книги\Уче6ный курс\НТМЦСО\Глава 16\istingl6.1
ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД
ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД
Содержимое слоя
ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД
ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД
Рис. 16.1. Слои на веб-старнице
Листинг 16.1. Пример использования слоев
<html>
<B0DY>
Н
V
;
-'
^
- -V-—
т"
ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД <BR>
ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД <BR>
<LAYER ...х !- открытие слоя в NN ->
<N0LAYER>
<DIV ...> < !- открытие слоя в IE ->
</N0LAYER>
:
;
Содержимое слоя
<N0LAYER>
</DIVx|- закрытие слоя в IE ->
</N0LAYER>
</LAYER><!- закрытие слоя в NN ->
ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД <BR>
ПЕТРОГРАД ПЕТРОГРАД КРУЖЕВНОЙ УЗОР ОГРАД <BR>
</B0 DY>
<html>
•
На рис. 16.2 показан пример наложения двух текстовых слоев друг на друга
(листинг 16.2).
Создание слоя с помощью тега <DIV>
229
Ц 0:\Книги\ Учебньм Kypc\HTML\CD\rпава 16\)istfetQX&23itii$$H ta w a ft Internet
mm
16\isdngl6.2.htm
Рис. 16.2. Наложение текстовых слоев друг на друга
Листинг 16.2. Пример наложения текстовых слоев друг на друга
<HTML>
<НЕА0>
</НЕА0>
<B0DY BGC0L0R-#FAEB07>
<DIV STYLE»"LEFT: 50px: POSITION: absolute: TOP: 70px">
<Н1>Заголовок 1-ro уровня</Н1>
<H2>< Заголовок 2-го уровня</Н2>
<P>Bce надписи сделаны внутри тегов DIV</P>
<1>С поиощыо каскадных листов стилей можно создать свой стиль для всех страниц сайта,
придающий ему собственное лицо и делающий его узнаваемыи.</1>
</H2x/DlV>
<F0NT color=#ff69b4 size-3>3TO узор страницы&яЬ5р: Это узор страницы Snbsp: Это узор
страницы Snbsp: Это узор страницы Snbsp: Это узор страницы Snbsp:Snbsp: Это узор
страницы Snbsp:Snbsp: Это узор страницы Snbsp:Snbsp; Это узор страницы
Snbsp:Snbsp: Это узор страницы Snbsp: Snbsp: Snbsp:Snbsp: Это узор страницы
Snbsp:Snbsp;Snbsp:Snbsp: Это узор страницы Snbsp:Snbsp:Snbsp;Snbsp: Это узор
страницы Snbsp:Snbsp: Это узор страницы Snbsp;Snbsp: Это узор страницы
Snbsp Snbsp;Snbsp;Snbsp; Это узор страницы» nbsp:Snbsp:Snbsp:Snbsp: Это узор
страницы& nbsp: Snbsp: Snbsp: Snbsp: Это узор страницы Snbsp;Snbsp:Snbsp:Snbsp:
Это узор страницы Snbsp: Snbsp: Это узор страницы Snbsp: Snbsp: Snbsp: Snbsp; Это
узор страницы Snbsp: Snbsp:Snbsp:Snbsp: Это узор страницы Snbsp: Snbsp; Snbsp;
Snbsp; Это узор CTpaHMUbiSnbsp:Snbsp: Это узор стрвницы&пЬэр:Snbsp:Это узор
страИйцьг&пЬзр; Это узор страницы&пЬБр; Это узор страницы&пЬБр: Это узор
страницьАпЬзр: Это узор страницы&пЬзр:Snbsp: Это узор страницы Snbsp; Snbsp: Это
узор страницы Snbsp:Snbsp: Это узор страницы Snbsp: Snbsp; Это узор страницы
Snbsp- Snbsp: Snbsp: Snbsp: Это узор страницы Snbsp: Snbsp; Snbsp: Snbsp; Это
узор страницы Snbsp: Snbsp: Snbsp: Snbsp; Это узор страницы Snbsp: Snbsp: Это
узор страницы Snbsp:Snbsp: Это узор страницы Snbsp: Snbsp: Snbsp: Snbsp; Это узор
страницы Snbsp: Snbsp: Snbsp: Snbsp; Это узор страницы Snbsp: Snbsp: Snbsp;
230
Урок 16. Слои
&nbsp; Это узор страницы Snbsp;Snbsp;Snbsp;Snbsp; Это узор страницы Snbsp: Snbsp;
Это узор страницы &nbsp; &nbsp: Snbsp: &nbsp; Это узор страницы
&nbsp:&nbsp:&nbsp;&nbsp: Это узор страницы Snbsp; Snbsp;Snbsp;Snbsp; Это узор
страницы Snbsp; Snbsp: Это узор страницы Snbsp; Snbsp: Это узор страницы Snbsp;
Это узор страницы Snbsp; Это узор страницы Snbsp: Это узор страницы&пЬвр; Это
узор страницы &nbsp: Snbsp; Это узор страницы Snbsp; &nbsp; Это узор страницы
Snbsp:Snbsp; Это узор страницы Snbsp: Snbsp; Это узор страницы &nbsp: Snbsp:
&nbsp: &nbsp: Это узор страницы Snbsp; &nbsp; Snbsp: Snbsp: Это узор страницы
&nbsp: Snbsp: &nbsp:&nbsp: Это узор страницы Snbsp:Snbsp: Это узор страницы
Snbsp:Snbsp; Это узор страницы Snbsp;Snbsp:Snbsp:&nbsp; Это узор страницы Snbsp:
Snbsp;Snbsp:Snbsp: Это узор страницы Snbsp; Snbsp:Snbsp:Snbsp: Это узор страницы
Snbsp:Snbsp;Snbsp;Snbsp; Это узор страницы&пЬзр;Snbsp: Это узор страницы
Snbsp;Snbsp;Snbsp;Snbsp; Это узор страницы Snbsp: &nbsp; Snbsp: Snbsp: Это узор
страницы&пЬвр;Snbsp:&nbsp;Snbsp: Это узор страницы &nbsp; Snbsp; Это узор
страницы Snbsp: &nbsp; Это узор страницы &nbsp; Это узор страницы Snbsp: Это узор
страницы &nbsp; Это узор страницы&пЬ$р; Это узор страницы &nbsp: &nbsp: Это узор
страницы&пЬэр:&nbsp: Это узор страницы Snbsp;Snbsp: Это узор страницы
&nbsp;&nbsp; Это узор страницы &nbsp: &nbsp;&nbsp;&nbsp: Это узор страницы Snbsp:
&nbsp:&nbsp:&nbsp: Это узор страницы&пЬзр:&nbsp:&nbsp:&nbsp: Это узор страницы
&nbsp:&nbsp; Это узор 'страницы&пЬзр:Snbsp; Это узор страницы &nbsp; Snbsp;
&nbsp:&nbsp: Это узор страницы&пЬБр:Snbsp;Snbsp;Snbsp: Это узор страницы &nbsp:
Snbsp: Snbsp;Snbsp; Это узор страницы Snbsp;Snbsp: &nbsp; &nbsp: Это узор
страницы Snbsp: Snbsp; Это узор страницы &nbsp: Snbsp; Snbsp; Snbsp: Это узор
страницы Snbsp; &nbsp:&nbsp: Snbsp; Это узор страницы Snbsp; &nbsp; Snbsp; &nbsp:
Это узор страницы &nbsp; &nbsp; Это узор страницы Snbsp; Snbsp;
</font>
V" 1
' 7 -Ш
;.
</BODY>
p
. ,
</HTML>
a
,
'
Еще один пример использования тега <DIV> показан на рис. 16.3 (листинг 16.3).
Работа со структурированны м текстом
M tcrojoft in te rn e t
0:\Книги\Учебиьй курс\НТМЦСО\Глам 16\Sstingl6.3.htm
Фотография, выровненная по центру блока
Рис. 1 6 .3 . Пример использования тега <DIV>
231
Создание слоя с помощью тега <IAYER>
Листинг 16.3. Пример использования тега <DIV>
. <HTML>
\ <HEAD>
<Т1ИЕ>Работа со структурированным текстом</Т1Т1.Е>
</НЕА0>
<B0DY bgColor=#FFFAAA>
<DIV ALIGN-CENTER style-"LEFT: 50px: POSITION: absolute: TOP: 70px">
<H1> Каменноостровский проспект </Н1>
<IMG WIDTH-355 HEIGHT-232 SRC- 'Каменноостровский rip.jpg‘
><BR>
Фотография, выровненная по центру блока
<Р ALIGN-RIGHT>3flecb выравнивание по правому краю
</DIV>
<F0NT color-#ff69b4 s1ze=3>3TO узор страницы&пЬэр: Это узор страницы Snbsp: Это узор
страницы Snbsp: Это узор страницы Snbsp: Это узор страницы Snbsp: Snbsp: Это узор
страницы Snbsp-.Snbsp: Это узор страницы Snbsp:Snbsp: Это узор страницы
Snbsp:Snbsp: Это узор страницы Snbsp: Snbsp:Snbsp:Snbsp; Это узор страницы Snbsp:
Snbsp: Snbsp:Snbsp: Это узор страницы Snbsp; Snbsp: Snbsp; Snbsp: Это узор
страницы Snbsp: Snbsp: Это узор страницы Snbsp; Snbsp: Это узор страницы
Snbsp:Snbsp;Snbsp;Snbsp; Это узор CTpanwjbiSnbsp:Snbsp:Snbsp: Snbsp; Это узор
страницы Snbsp: Snbsp: Snbsp: Snbsp: Это узор страницы
Snbsp;Snbsp:Snbsp:Snbsp:Это узор страницы Snbsp;Snbsp: Это узор
странищ ДпЬэр;Snbsp:Snbsp:Snbsp: Это узор страницы Snbsp: Snbsp: Snbsp; Snbsp:
Это узор страницы Snbsp: Snbsp; Snbsp; Snbsp: Это узор страницы Snbsp: Snbsp; Это
узор страницы Snbsp; Snbsp: Это узор страницы Snbsp: Это узор страницы Snbsp; Это
узор страницы Snbsp: Это узор страницы Snbsp; Это узор страницы Snbsp:Snbsp: Это
узор страницы Snbsp; Snbsp: Это узор страницы Snbsp: Snbsp; </F0NT>
</BODYx/HTML>
Создание слоя с помощью тега <LAYER>
Тег <LAYER>, как и тег <DIV>, предназначен для описания слоев, однако он не под­
держивается браузером Internet Explorer. А так как доля пользователей Netscape
Navigator неуклонно снижается, применение тега <LAYER> постепенно теряет
смысл. Ниже перечислены атрибуты тега <LAYER>.
О Атрибут BACKGROUND. Атрибут BACKGROUND задает фон слоя, например:
BACKGROUND-"anyi mage.g1f”
О Атрибуты HEIGHT. Атрибут HEIGHT определяет высоту слоя в пикселах, на­
пример:
HEIGHT-"100"
О Атрибут WIDTH. Атрибут WIDTH определяет ширину слоя в пикселах, например:
"
WIDTH«"1Q(T
О Атрибут ID. Атрибут ID является идентификатором (именем) слоя. Напри­
мер, следующая запись описывает слой с именем MyLayerl.
ID-MyLayerl
О Атрибут CLIP. Атрибут СИР задает координаты границ слоя, например:
CLIP--10.10.50.50*
232
Урок 16. Слои
О Атрибут ТОР. Атрибут ТОР задает сдвиг слоя относительно верхнего края
страницы, например:
ЮР-20
О Атрибут LEFT. Атрибут LEFT задает сдвиг слоя относительно левого края
страницы, например:
ф
LEFT—100
j
‘
■В*
Создание динамического слоя
Более сложный код программы, написанный с использованием языка JavaScript,
представлен в листинге 16.4. На рис. 16.4 слева показана исходная надпись,
а справа — надпись после наведения на нее указателя мыши. Когда указатель
оказывается на надписи, цвет фона, на котором размещается надпись, меняется.
З і Дин»>*и^шн f t v *
Р:\Книги\УчебныйкүрсУНТМ.\СР\Гпаеаt6\btlnqie.<.htm
&:У<ігигіф/чбныйкда^ЮіДСЗДГмм16Vstngi6.4.htm
0
j ^
- J
м
<г
I
'лм ш £\
Jum Z -
i n-»—
Динамический слой
«Й Х Й
Рис. 16.4. Изменение цвета фона надписи (слева — исходная надпись, справа — надпись после
наведения на нее указателя мыши)
■яр
Листинг 16.4, Пример создания динамического слоя
<HEAD>
<Т1ИЕ>Динанический слой</ТІТІ_Е>
</HEAD> '
<B0DY>
<LAYER NAME=MyLayer BGC0L0R="green" T0p=50 LEFT=50
OnMouseOver*"color!ayer( ‘blue') "
QnMouseOut="co lo r1ayer( ‘w hite’ )">
<N0LAYER>
*
<DIV ID=MyDiv STYLE^’position:absolute; TOP:50: LEFT:50">
</N0LAYER>
.
<PxF0NT SIZE®" 72">Дш а мичеекий елой</Ғ(Ж></Р>
<N0LAYER>
Щ </DIV>
.
</N0LAYER>
<SCRIPT LANGUA6 E*JavaScri p t l.2>
function colorlayer(changeto)
{ bgColor*changeto }
</SCRIPT>
</LAYER>
<SCRIPT LANGUAGEeVBSCRIPT>
■', r V
^
ғ ^ , ^
\
Подведем итоги
\
%
233
Sub MyD1 v_onmouseover()
docum ent.all.MyDi v .sty 1e .backgroundColor-"blue"
* x End Sub
\Sub MyDiv_onmouseout()
document.а і 1.MyDi v .s ty le .backgroundColor-"green"
End Sub
</SCRIPT>
</B0DY>
</HTML>
Подведем итоги
В этом уроке рассказано о том, что такое слои и с помощью каких тегов их можно
создавать, в частности показаны примеры использования тегов <LAYER> и <DIV>.
Более сложные динамические слои создаются средствами языка JavaScript.
Урок 17
Каскадные листы
стилеи
Этот урок представляет собой введение в большую и сложную
тему каскадных листов стилей (Cascading Style Sheets, CSS).
#
Уровни
css
235
Поддержка стилей
Стиль определяет особенности форматирования и отображения элементов веб­
страниц. Можно задать стиль для начертания шрифта, для цвета фона, для цвета
гипертекстовых ссылок, для полей, для расположения объектов на странице и т. д.
Стили HTM L-, XH TM L- и XM L-документов задаются с помощью каскадных
листов стилей (C S S ).
CSS предоставляет разработчику новые возможности:
О вместо того чтобы кодировать каждую веб-страницу, можно создать один
файл, содержащий листы стилей, и ссылаться на него из всех H T M L-документов;
•
О листы стилей обеспечивают дополнительную степень контроля над шрифта­
ми, цветом фона и другими характеристиками, влияющими на отображение
документа;
О листы стилей позволяют достаточно быстро и просто изменять внешний вид
веб-страниц;
О поскольку становится меньше объем документов, уменьшается время их за­
грузки.
Формат записи стилевых правил CSS похож на табличное представление дан­
ных. Заголовок таблицы напоминает описание элемента, класса или идентифи­
катора стиля, в качестве ячеек и рядов таблицы выступают свойства и значения
стилей, например:
A.menu:link
{
COLOR: #c2ala0:
FONT-FAMILY: A ria l;
FONT-SIZE: 14px:
FONT-WEIGHT: bold:
TEXT-DECORATION: none
}
В соответствии с правилами H T M L при использовании стилей в коде необходи­
мо включать в заголовок документа (в тег <HEAD>) М ЕТА-определение:
<МЕТА h ttp -equ1v-Content- Style-Type content»"text/css:>
Стили предоставляют разработчику максимальный уровень контроля над осо­
бенностями отображения веб-страницы. Разработчик может задавать отдельные
стили для каждого абзаца, заголовка, горизонтальной линии, ячеики таблицы
и других элементов.
Уровни CSS
Если история языка H T M L уходит корнями в далекий 1989 год, то технология
CSS представляется нам более «молодой». Впервые о ней стало известно в мае
1995 года, когда сам недавно образованный (и в декабре 1994 года проведший
‘
’г - г
.ү?'-
-
...‘ -г-j;I
ЕШКж!
236
Урок 17. Каскадные листы стилей
свое первое совещание) консорциум W 3C объявил о выборе технологии C SS
для форматирования H T M L-документов.
Уже в ноябре того же 1995 года консорциум W 3C вновь обращается к этой теме
на своем семинаре по каскадным элементам оформления. Впервые поддержка
CSS была реализована в браузере Internet Explorer 3.0. Там все только начина­
лось, поэтому правила составления стилевых шаблонов были весьма разрознен­
ными.
Со временем структура CSS несколько раз видоизменялась, добавлялись новые
элементы, убирались старые. Первый уровень стилевых шаблонов (C SS1 ) был
утвержден 11 января 1999 года, второй уровень (C SS2 ) был принят к обсужде­
нию в мае 1998 года, а третий уровень (C SS3 ) начали обсуждать в мае 2001 года.
Переход от одного уровня к другому говорит о попытках систематизации CSS.
Почему листы стилей называют каскадными? Этот эпитет употребляют потому,
что к одному H T M L-элементу можно применять несколько стилевых правил,
интерпретируемых браузером последовательно, другими словами — каскадом.
Важной особенностью стилевого оформления является то, что преобразованию
заданным стилем подвергаются все теги, заключенные внутри тега с указанным
стилем. Например, если определяется стиль для тега <B0DY>, то он присваивает­
ся всему содержимому веб-страницы. Это качество называется наследованием
по аналогии с наследованием в объектно-ориентированных языках программи­
рования.
' 4
^
Синтаксис листа стиля
Синтаксис листа стиля имеет четкую структуру.
О Элемент. Все начинается с элемента, или селектора. Элементами могут быть
не только простые теги, например заголовок <Н1> или абзац <Р>, но и более
сложные теги, например ссылка <А> или таблица <TD>.
О Свойство. Именно для элемента назначаются атрибуты форматирования или
набор свойств. Каждый элемент характеризуется своими свойствами, напри­
мер начертание шрифта (FONT-FAMILY: Anal), значения поля (MARGIN: 15рх), об­
рамление (BORDER-RIGHT: white lpx solid), высота (HEIGHT: lpx) и другие.
О Значение. Каждое свойство достигает определенного значения. В примерах
свойства приведены уже со значениями (Arial; white lpx solid, lpx).
О Объявление. Свойство и значение, которое оно должно принять, образуют
объявление.
,
'
. \
.
О Правило. Элемент и его объявление образуют правило.
Правило определения синтаксиса листа стиля иллюстрирует рис. 17.1.
Пусть, например, необходимо сделать жирный синий подчеркнутый текст, тогда
в коде делается следующая
запись:
Г
Г^ г
<F0NT
COLORS"RED"><STR0NG><i>
Поклонитесь Солнцу </Ux/STR0NGx/F0NT>
Группирование стилей и селекторы классов
237
------- Правило-------------Объявление--Элемент
Свойство
Значение
Р {font-fam ily: A ria l;}
Ри с. 1 7 .1 . Правило определения синтаксиса листа стиля
А если подобный стиль требуется применить несколько раз? Хорошо если 5 раз,
а если 10-20? Вот тут и помогает CSS.
Благодаря следующей записи все элементы Н1 в документе будут красного цвета,
размером в 20 точек:
HI {co lo r:red ; size:2 0 p t;}
Группирование стилей и селекторы
классов
Существуют дополнительные методы, которые расширяют функциональные
возможности каскадных листов стилей. Стили можно сгруппировать, что позво­
ляет уменьшить количество необходимых атрибутов и аргументов путем созда­
ния логических групп. Группирование листов стилей может происходить по оди­
наковым тегам или по атрибутам одного семейства. Порядок следования
атрибутов играет важную роль: атрибуты начертания и типа шрифта должны на­
ходиться перед остальными атрибутами — кегль должен быть задан до меж­
строчного интервала, и только потом в строку можно добавить дополнительную
информацию. В случае группирования атрибутов запятые между ними не ста­
вятся, исключение составляет атрибут семейства шрифта, перед ним ставится за­
пятая.
О Пример группирования по тегам:
□ до группирования:
I
Л
HI {font-fam ily: a r ia l: font-size: 14pt}
H2 {font-fam ily: a r ia l: font-size: 14pt}
H3 { font-fami 1у : a r ia l: font-size: 14pt>
□ после группирования:
H1.H2.H3 {font-fam ily: a ria l font-size: 14pt}
О Пример группирования по атрибутам одного семейства:
□ до группирования:
BODY {margin-top: 12pt:margin-right: I0pt:marg1n-left: 15pt}
□ после группирования:
BODY {margin: 12pt lOpt 15pt}
Атрибутом элемента в H TM L, определяющим его класс, является атрибут CLASS.
В C SS можно описать собственные стили для различных классов одних и тех же
элементов.
238
Урок 17. Каскадные листы стилей
Селекторы классов (class selectors) имеют синтаксис:
селектор.класс {сво й ства}
'
Классы могут также быть описаны без явного привязывания их к определенным
элементам, синтаксис:
.класс {сво й ства}
* Я
Четыре варианта использования CSS
Существует четыре варианта использования листов стилей в Н ТМ L-документе:
О встраивание;
-f ■
О подключение;
’
■%:
л!
.-|§
О связывание;
Я
О импорт.
.
Я
В составе документа можно одновременно использовать различные типы листов
стилей. При этом действуют правила каскадирования: встраиваемые стили име­
ют приоритет перед подключаемыми, подключаемые стили имеют приоритет пе­
ред связываемыми, связываемые стили имеют приоритет перед импортируемыми.
Встраиваемые стили
Встраиваемые стили определяются в H T M L-теге и оказывают влияние только
на этот тег. Соответствующий код показан в листинге 17.1 (рис. 17.2).
ч Припер встраиваемого стиля - M crosoft In tern et Explorer
бриЦ»; ••■
Се*щ
К
Остановить
ж
ggjg
Домой
I7\ksting17.l.htm
Текст этого абзаца будет отображаться шрифтом Comic Sans M S
размером 17 пунктов
Рис. 17.2. Применение стиля к абзацу
Листинг 17.1. Пример применения стиля к абзацу
<HTMLxHEAD><TITLЕ>Пример встраиваемого стиля</Т1Т1Ех/НЕА0>
<B0DY>
Щ
'
1
<Р STYLE="font: 17pt Comic Sans MS“>TeKCT этого абзаца будет отображаться шрифтом Comic
Sans MS размером 17 пунктов</Р>
</BQDYx/HTML>
^
, v*
'
Подключаемые стили
Подключаемые стили, которые также называют внутренними стилями, применя­
ются ко всей веб-странице. Для этого служит тег <STYLE>, помещаемый в заголо-
239
Четыре варианта использования CSS
вок HTM L-документа. Стили определяются для различных типов H T M L-докуыентов. Так, можно задать отображение всех элементов <Н1> серым цветом
шрифтом Verdana размером 14 пунктов. Соответствующий код представлен
в Листинге 17.2 (рис. 17.3).
Э | Подк лн ічаен ы е стили - M icrosoft Internet; Екріогег
0:\Кһиги\Учебиый курс\НТМІ\СО\Глава 17\Rstingl7.2.htm
И ван Комоло в НЕЗАБУДКА
НезаЬудка, с ветром споря
Говорит. *Разумным будь"
Все хорошее запомни,
Все плохое позабудь.
Рис. 17.3. Использование подключаемых стилей
Листинг 17,2. Пример использования подключаемых стилей
<НЖ><НЕА0хТ1ЛЕ>Подключаемые стили</Т1ИЕ>
<STYLE>
<»І
•
BODY {
BACKGROUND: #ҒҒҒҒҒҒ:
COLOR: #000000:
}
HI I
FONT: 14pt Book Antique:
COLOR: #CC0000:
}
P{
FONT: 12pt Times:
}
A{
COLOR: IFF0000: TEXT-DECORATION: NONE:
}
—
>
</STYLE></HEAD>
<B00Y>
<Н1>Иван Комолов НЕЗАБУДКА </Н1>
<Р >Незабудка. с ветром споря <BR>rоворит: "Разумным будь . <BR>
Все хорошее запомни. <BR>Bce плохое позабудь .<BR></P><:P х/Р>
<Р >Вспомни май и берег речки.<BR> Луг зеленый был в цвету<ВК>
Как хорошие словечки<ВК> Ты шептал мне на лeтy.<BR></P><P ></Р>
<Р >И ушел в широко поле^> Глубоко волнуя грудь. <BR>
Все хорошее запомни. <BR>Bce плохое позабудь.<BR></Р><Р х/р>
<Р >Прилетай в зеленом звоне.<BR>Conoaьи здесь росы пьют. <BR>
Все хорошее запомни. <BR>Bce плохое позабудь.<BR></P>
</B0DY></HTML>
шШт
Л г A
f k V
A
V
A
f
*4 %
'
240
Урок 17. Каскадные листы стилей
В листинге 17.3 представлен код еще одной страницы (рис. 17.4). Стиль, приме­
ненный к первой фразе, форматирует ее серым цветом и курсивом. Вторая фраза
написана серым цветом и подчеркнута. Третья фраза написана черным цветом
и подчеркнута.
' < ; vnil®
•Ц Пример CSS - M icrosoft In te rn e t Explorer Щ
ЩЖ
D:\Кмиги\Учебмый курс\НТМЦСО\Глава 17\fisting17.3.htm
хаза не у&яажняются слезами
м м ш о скоротечности ж изни
В е ч н а я ю ность св о й ств ен н а в сяк о м у
К т о т ц е т вечного
Рис. 17.4. Применение стилей к абзацам
Листинг 17.3. Пример применения стилей к абзацам
<HTML><HEAD>
<TITLE> Пример CSS </TITLE>
-j
-V :v_. (
< /H EA D >
^
<STYLE>
:
4
.gray {c o lo r : g ray ; fo n t- s ty le :ita lic }
#boldunderline {text-decoration:underline; font-weight:bold}
</STYLE>
•
<B0DY>
Ш
ІШ
' §, %
йШ й
£ ' M-- ^
<P cla ss- 'g ra y '^ P . Пруц</Р>
<P CLASS*"gray" id=,,boldunderline,,>Mon глаза не увлажняются a ie 3 aMH</BR>
При мысли о скоротечности жизни: </Р>
<Р Id ^ '^ o ld u n d e rliпе*'> Вечная юность свойственна всякому. </BR>
Кто ищет вечного </Р>
</B0DY></HTML>
: Й
Еще один пример применения стилей показан на рис. 17.5 (листинг 17.4).
Листинг 17.4. Еще один пример применения стилей
<HTML><HEAD><TI TL Е>Пример каскадных листов стилей</Т1Т1_Е>
<STYLE TYPE=text/css>
Hi {
Щ
Ш
і Щ
Ш
FONT-SIZE: 32px: COLOR: red: FONT-STYLE: it a lic
.blue {
COLOR: blue
I
#bold {
FONT-WEIGHT: bold
5iU
#
Ш
•
-г
і і
Четыре варианта использования CSS
241
</STYLEx/HEAD>
<B0DY>
<Н1>Заголовок форматированк
ру
пн
ы
мк
р
а
с
н
ы
мк
у
р
с
и
в
о
м </Н1>Данное <F0NT
.CLASS-BLUE>o i o b o </F0NT> - синее, a <F0NT ID-bold>д
р
у
г
и
еaioea</F0NT> - жирные.
VBODY></HTML>
ноиас
0:\Кмиги\Уче6ный курс\НТМ1\СО\Глава 17\l$tlngl7.4.htm
оловок форматирован крупным
хсным курсивом
Данное слово - синее, а другие слова - жирные
(
Ри с. 17.5. Еще один пример применения стилеи
Связываемые стили
Связываемые, или внешние, стили применяются к документам всего веб-сайта.
Создайте с помощью любого текстового редактора документ, содержащий толь­
ко определения стилей, и сохраните его в файле с расширением .css. Созданные
таким образом списки можно применить к любой веб-странице.
Чтобы ссылка работала, необходимо добавить ссылку на созданный файл стилей
в раздел заголовка HTM L-документа. Если в файл стилей были внесены измене­
ния, то эти изменения отразятся в каждом документе, который содержит ссылку
на файл стилей.
На рис. 17.6 показан результат применения CSS к тексту (листинг 17.5).
Листинг 17.5. Пример применения стилей, находящихся во внешнем файле
<НТМ1хНЕА0хТ1Т1_Е>Пример использования css-файлов</Т1ИЕ>
<LINK һге^"Л истинг 17.6.file s / s ty le .c s s " type=text/css rel-stylesheetx/HEA0>
<B0DY bottoroMargin=0 bgColor=:#545454 leftMargin^lOO topMargin*0 rightMargineQ
margi nwidth-10 " margi nhei ght=" 0 " >
<H4>&nbsp; &nbsp; &nbsp; &nbsp: &nbsp: &nbsp: Иван Комолов</Н4>
<Н1>У каждого свое</Н1>
<Р>У гор - отроги.<BR>
У рек - ручьи,<BR>
У ног | дороги. <BR>
Иди hiuh<BR>
Ключи от снасть п<Ш>
Среди Tpeeor.<BR>
Они во BflacTH<BR>
Твоих дорог < B R x / p >
I
242
Урок 17. Каскадные листы стилей
<Н1>Подснежники</Н1>
<Р>Пробудились первыми. <BR>
Позабыли сны.<BR>
Ощутили нервами<ВР>
Биоток весны. <BRx/P>
</BODY></HTML>
j Пример использования css-файлов - Microsoft
17\bsting 17.5 .htm
И в а н К ом о лов
каждого свое
У гор I отроги,
У рек - ручьи,
У ног - дороги.
Иди ищи
Ключи от счастья
Рис. 17.6. Применение стилей, находящихся во внешнем файле
Внешний css-файл style.css, определяющий параметры форматирования показан­
ной на рис. 17.6 веб-страницы, представлен в листинге 17.6.
Листинг 17.6. Внешний css-файл для веб-страницы, показанной на рис. 17.6
body
{
'
BACKGROUND: #FFFFFF;
COLOR: #000000:
• ■
)
'
‘
$■%. f
^
Ц
§|"
Щ
.■
Н1 {
font-fam ily: H elvetica. A ria l:
font-size: 24 pt:
COLOR: #0000FF:
}
'
Э Д г
' '
• - -- -
І
І
І
-
*
•
;
ч
P {font-fam ily: Garamond. Times;
font-size: 14 pt:
}
Импортируемые стили
Импорт внешних стилей напоминает их связывание. Единственное отличие состо­
ит в том, что импорт можно сочетать с другими методами определения стилей.
На рис. 17.7 показан результат импорта внешних стилей (листинг 17.7).
Четыре варианта использования CSS
243
■
S П р и м е р и м п ор ти р ован и я внеш них сти л е й - Microsoft Internet Е хр кн еі
--------------------------------------
------------------------------
--------------------------------------------------------------------------------------------------------------n ■ П П ІІ
-
-
------------------------ ■
• ш ш т т ш
.................................................................................................С Т Г У .........................................................................................................................................................................................
C:\Nina\P1TER4CH HTML\CD\T лава 17\l*sting177.htm
«рдаш
Импортирование внешних спилен
позволяет сократить
размеры H TM L-файлов
Ри с. 17.7. Импорт внешних стилей
Листинг 17.7. Пример импорта внешних стилей
<НЖхНЕА0><Т1Т1_Е>Пример импорта внешних стилей </TITLE>
<style type^'text/css'^
■
<!-
©import C:\Nina\PITER\KH НТМЬХСОХГлава 17\Jtac™Hrl7.8.css:
H3 {co lo r: maroon: font-fam ily: courier}
>
—
</style>
<HEA0xB0DY>
<НЗ>Современные технологии форматирования</НЗ>
<р>Импорт внешних стилей<В1*>
позволяет сократить<ВЯ>
размеры НТМ1_-файлов<ВЯ>
</Р>
</BODYx/HTHL>
Внешний css-файл для веб-страницы, показанной на рис. 17.7, представлен
в листинге 17.8 (это файл JlncTHHrl7.8.css).
Листинг 17.8. Внешний css-файл для веб-страницы, показанной на рис. 17.7
<STYLE type-"text/css">
ҺЗ {coloncrim son font-fam ily:A rial Black}
p {background:cornsilk; font-fam ily: times}
</STYLE>
В этом примере браузер сначала импортирует правила, содержащиеся в файле
Листинг17.8.с$$ (выражение @import должно быть расположено первым), и затем
формирует набор правил для данной веб-страницы.
Следует заметить, что для тега <НЗ> заданы два противоречащих друг другу пра­
вила. Одно из них содержится во внешнем файле, а другое включено в состав до­
кумента. В этом случае включенное правило заменяет импортированное прави­
ло. А для тега <Р> действуют внешние правила, так как внутренних правил не
представлено.
244
Урок 17. Каскадные листы стилей
Примеры использования стилеи
В этом разделе представлено несколько достаточно сложных примеров примене­
ния каскадных листов стилей.
}
На рис. 17.8 показана веб-страница, выполненная с помощью C SS (листинг 17.9).
31 D: \Кмиги\Уче6ньм курс\HTML\CD\rпава 17\1«ting 1
l7\Usbng 17.6\btteral.htm
См-
Петербург
П»тро#»ор*ц
Как хорошо
влюбиться первым
И, полюбив,
любимым быть!
Ри с. 17.8. Пример использования стилей
Листинг 17.9. Пример использования стилей
<HTHL>
<HEAD>
' ІУ Ж
<TITLE></TITLE>
<STYLE type-text/css>
А :1Ink I
COLOR: #f0047f; TEXT-DECORATION: underline
}
I .
’
;
Л ,
A .active {
COLOR: red
}
•
A :v is ite d {
COLOR: blue
BODY {
}
COLOR: black: BACKGROUND-COLOR: #e3ffe8
,text5 {
FONT-SIZE: 9px: COLOR: black: FONT-FAMILY:
I'I
Примеры использования стилей
245
'А г іа Г . ’H elvetica’ . ’sans-serif': TEXT-DECORATION: none
\
.textO {
FONT-SIZE: 18px: COLOR: black: FONT-FAMILY:
’A ria l B la c k ': TEXT-DECORATION: none
>
,tex t 2 {
F0NT-WEI6HT: bold: FONT-SIZE: 18px: COLOR:
black; FONT-FAMILY: ’A r ia l’ . 'H e lv e tic a ', ’ sans-serif’ ;
TEXT-DECORATION: none
}
.te x tl {
FONT-WEIGHT: bold: FONT-SIZE: 14px; COLOR:
black: FONT-FAMILY: ’A r ia l’ . ’H e lv e tic a '. ’sans-serif’ :
TEXT-DECORATION: none
}
.te x t19 {
FONT-WEIGHT: bold: FONT-SIZE: 14px: FONT-FAMILY:
’A r ia l' I ’H elvetica’ , ’sans-serif'
}
.tNormal {
FONT-SIZE: 12px; COLOR: black: FONT-FAMILY:
’A r ia l’ . ’H elvetica’ . ’sa n s- se rif': TEXT-DECORATION: none
}
.paral {
TEXT-ALIGN: center
}
.pNormal {
}
.boxl {
WIDTH: 2px; HEIGHT: 380px
}
.box2 {
WIDTH: 2px: HEIGHT: 377px
}
.ЬохЗ {
PADDING-RIGHT: lpx: PADDING-LEFT: lpx: PADDING-BOTTOM: lpx:
PADDING-TOP: lpx
}
,box4 {
WIDTH: 135px: HEIGHT: 131px
}
.Ьохб {
LEFT: 392px: WIDTH: 148px: POSITION: absolute: TOP: 59px: HEIGHT: ІЗОрх
}
.Ьох7 {
LEFT: 338px: WIDTH: 212px; POSITION: absolute: TOP: 356px: HEIGHT: 187px
V
}
.Ьох8 {
"
продолжение &
\
246
Урок 17. Каскадные листы стилей
Листинг 17.9 ( продолжение)
PADDING-RIGHT: lpx: PADDING-LEFT: lpx: LEFT: 414рх:
PADDING-BOTTOM: lpx: WIDTH: 99рх; PADDING-TOP: lpx:
POSITION: absolute: TOP: 440px: HEIGHT: 35px
I
'
I
4 x .г
■.box9 {
X v
:
. ^
‘
LEFT: 107px: WIDTH: 350px: POSITION: absolute: TOP: 497px: HEIGHT: lpx
I
•
.ьо хіо (
.
j
. 'Ш
-Щ 'Щ
^
LEFT: 123px: WIDTH: 314px: POSITION: absolute: TOP: 73px: HEIGHT: 98px
.... , Л ЩШ
I
.Ьо х ІЗ {
*
t•
LEFT: 65px: WIDTH: 22px: POSITION: absolute: TOP: 73px: HEIGHT: 343px
</STYLE>
. . .
'
■J
:^
<META content="MSHTML 5.50.4522.1800й name=GENERATOR></HEAD>
<BODY leftMargin=0 topMargirH) marginwidths=,,0" marginheightss"0">
<TABLE cellSpacing=0 cellPadding®0 alig n = left b o rd e rs
<TB0DY> <TR> <TD colSpan=15></TD> <TD vAlign=top width^l height=2>
<IMG height=2 src= "letteral.files/q x w sp acer.g if" width=l border=0>
<!-Размещение рисунка пустой клетки->
</TD></TR> < TRx!-Строка l-> <TD></TD><!-Ячейка l->
<TD vAlign=top width=55 height=23><!-Ячейка 2->
<DIV classssbox3>
<DIV class=paral><SPAN class=text5>CaHKT-neTep6ypr </SPAN></DIV>
<DIV cl ass=paral><SPAN class=text5>neTpoflBopeu</SPAN></DIV></DIV></TD>
<TD col Span-13x/TD><!-Ячейка 3->
<TD vAlign=top width=l height=23xi -Ячейка 4 ->
<IMG height=23
s rc = "le tte ra l.f i 1es/qxwspacer.g if| width=l
T D x / f ^ ^ j ^ p a йе рисунка пустой клетки->
<TR><!-CTpoKa 2-> <TD colSpan=15></TD><!-Ячейка l->
<TD vAlign=top width^l height=49><!-Ячейка 2->
<IMG height=49 src^ '*!e tte ra l.f i 1es/qxwspacer.g if " width=l
1
рисунка пустой клетки->
<TR><!-Строка 3-> <TD colSpan=14></TD><!-Ячейка l->
<TD vAlign=top width=2 height®380 ^5рап= 11х|-Ячейка 2->
<DIV class=boxl>
<IMG height=380 s rc = "le tte ra l.file s / L in e l2 .g if" width=2
border-6></DIV></TDxF-p^3MeweHne вертикальной линии->
<TD vAlign=top w idth*l һеід һМ х і- Я чей ка 3->
<IMG h e ig h ts srcss"le tte ra l.file s/q x w sp a ce r.g if" width=l
border*0></TDx/TR><!-Размещение рисунка пустой клетки->
< TRx|-Строка 4-> <TD со15рап= Зх/Т0х|-Ячейка 1->
<TD vAlign-top width=2 height*377 rowSpan=8x!-Ячейка 2->
<DIV class=box2>
- ;t v
<IMG height=377 srC“ e1 e tte ra l.file s / L in e 5 .g if". width*2 border^O x/D lV x/TD xl-Размещение
вертикальной линии->
<TD co l Span^lO x/TD xi.-Ячейка 3->
<TD vAlign=top width=l heig h t»1 0 2 x!т Ячейка 4->
Примеры использования стилей
247
<IMG height-102 src= "letteral.files/q x w sp acer.g if” width=l
border=0></TD></TRx!-Размещение рисунка пустой клетки->
<TR><!-CTpoKa 5-> <TD colSpan=3></TD><!—Ячейка l->
<TD colSpan= 10x/TD xi-Ячейка 2->
k <TD vAlign=top width=l height=24><!-Ячейка 3->
\ <IMG height=24 src= "letteral.files/q xw sp acer.g if" width=l
b o rd er^ x /T D x /T R x l-Размещение рисунка пустой клетки->
< TRx!-Строка 6-> <TD со15рап= Зх/т0х!-Ячейка l->
<TD colSpan=3></T0xj-Ячейка 2->
<TD vAlign-top width=135 height=131 гowSpan=Зx!-Ячeйкa 3->
<DIV ciass=liox4>
<IMG height=131 a lt- L e n a l.g if s rc = "le tte ra l.file s / L e n a l.g if" width=100
border=Ox/DIVx/TD>
<TD colSpan= 6x/TD xі-Ячейка 4->
<TD vAlign=top width=l height-Ю хі-Ячө йка 5->
<IMG height-10 src= "letteral.files/q xw sp acer.gif" width=l
b o rd er= 0 x /T 0 x /T R x j-Размещение рисунка пустой клетки->
<TRx|-CTpoKa 7-> <TD colSpan-Зх/ТО хі-Ячейка 1->
<TD co lSpan= 3x/TD xi-Ячейка 2->
< TD x/T0x|-Ячейка 3->
<TD vAlign=top width=200 colSpan=4 һеідһг=73><!-Ячейка 4->
<01V class=box3>
<01V class=pNormalxSPAN class=text2>KaK хорошо влюбиться первым
</SPANx /d iv >
<0IV class=pNormalxSPAN class=text2> И. полюбив, любимым быть!
«/БРА М х/оіУх/оіУх/тО хі-Ячейка 5->
< П )х/ТО х!-Ячейка 6->
<TD vAlign-top width-1 һеідһг= 73х!-Ячейка 7 ->•
<IMG height=73 src=” letteral.fU es/q x w sp acer.g if" width=l
border= O x/TD x/TRx|-Размещение рисунка пустой клетки->
!-Строка 8->
<TD co l Span- З х /Ю х !-Ячейка 1->
<TD col-Spaп=3><Я0><!-Ячейка 2->
<ft) col Span= 6x/TD x !-Ячейка 3->
<TD vAlign=top width-1 height=48x !-Ячейка 4->
<1MG height-48 src- "letteral.files/q x w sp acer.g if” width=l
b o rd er*O x /T D x /T R x j-Размещение рисунка пустой клетки->
< T R x
<TRx!-CTpoKa 9->
<TD col Span-3x/T0x! -Ячейка 3->
<TD co l Sp an -lO x /T D x ! -Ячейка 4->
<TD vAlign-top width-1 h eig h t-5 3 x !-Ячейка 5->
<IMG height-53 src-"1e tte ra l. f i 1es/qxwspacer.gif" width-1
border-Ox/TD></TRx!-Размещение рисунка пустой клетки->
‘< T R x !-Строка 10—>
<TD col Span-3x/T0x!-Ячейка l->
<T0 col Span-2 x / T 0x ! -Ячейка 2->
<TD vAl1gn-top width-314 colSpan-4 height-40,row Span-2x|-Ячейка 3->
<01V class-box3>
<DIV class-pNormalxSPAN class-textl>B могучих елях цвел багульник
</SPANx/DIV>
<Div class-pNormalxSPAN class-textl>B6nH3n Москвы. He просто так.
продолжение &
248
Урок 17. Каскадные листы стилей
Листинг 17.9 ( продолжение)
</SPAN></DIVx/DIVx/TD>
<TD colSpan-4x/TD>
<TD vAlign-top width-1 he1ght»39xiMG height-39
src-" 1e tte r a l.f 11es/qxwspacer.g if " width-1 border-Ox/TDx/TR>
<!-Размещение рисунка пустой клетки->
<TR> <TD colSpan«6x/TD> <TD colSpan-4x/TD>
<TD vAlign-top width-1 height-lxiM G height-1 src- "le tte ra l.file s/q x w sp a ce r.g if" width-1
bor der-Ox/TDx/ tr >
<!-Размещение рисунка пустой клетки^>
<TR> <TD colSpan-14x/T0>
<TD vAlign-top width-1 height-lxiM G height-1
src- "1e ttera l.file s/q x w sp a ce r.g if" width-1 border-Ox/TDx/TR>
<!-Размещение рисунка пустой клетки->
<TR> <TD colSpan«15x/TD>
<TD vAlign-top width-1 height=55xiMG height-55 src-,,le tte ra l.file s/q x w sp a ce r.g if"
width-1 border-Ox/TDx/TR>
<!-Размещение рисунка пустой клетки->
<TR> <TD colSpan-5x/TD>
<TD vAlign-top width-348 col Span-7 height=71>
<DIV class-box3>
<DIV class-paralxSPAN class-textl>BAry/lbHHK
</SPANx/DIV>
<DIV class-paralxSPAN c l ass=textl>CTwxoTBopeHne Ивана Конолова
</SPANx /DIV>
<DIV class-p aralx A href-"ninapetergof@mail .ru"xSPAN
class-textl9>em ail :ninapetergof@mail .ru</SPANx/AxSPAN
c l ass-textlxBRx/SPA N x/D i v>
<DIV class-paralxSPAN class-textl> http://www.uprint.spb.ru
</SPANx/DIVx/DIVx/TD>
<TD col Span=3x/T0>
<TD vAlign-top width-1 height-71>
.
<IMG height-71 src- "le tte ra l.file s/q x w sp a ce r.g if" width-1
border-O x/TD x/TRxi-Размещение рисунка пустой клетки->
<TR> <TD vAlign-top width-2 height=l>
<IMG height-1 src=,,le tte ra l.file s/q x w sp a ce r.g if,, width-2 border-Ox/TD>
<!-Размещение рисунка пустой клетки->
<TD vAlign-top width-55 height-l>
<IMG height-1 src- "le tte ra l.file s/q x w sp a ce r.g if" width-55 border=0></TD>
<!-Размещение рисунка пустой клетки->
<TD vAlign-top width-26 height-l>
<IMG height-1 src-,,le tte ra l.file s/ q x w sp a ce r.g ifH width-26 border-Ox/TD>
< I-Размещение рисунка пустой клетки->
' <TD vAlign-top width-2 height—1>
<IMG height-1 s rc * '1 e tte r a l.f i 1es/qxv*spacer .g if " width-2 border-Ox/JD>
< !-Размещение рисунка пустой клетки->
<TD vAlign-top width-23 height-l>
<IMG height-1 src- "le tte ra l.file s/ q x w sp a ce r.g if° width-23 border-Ox/TD>
< !-Размещение рисунка пустой клетки->
<TD vAlign-top width-12 height-l>
<IMG height-1 src-Hle tte ra l.file s/q x w sp a ce r.g if" width-12 border»Ox/TD>
"v
Примеры использования стилей
249
<1-Размещение рисунка пустой клетки->
<Т0 vAlign-top width-1 height-l>
<IMG h e ig h t-1 s r c - " l e t t e r a l . files/qxw spacer.gif" width-1 border-Ox/TD>
< !-Размещение рисунка пустой клетки->
\<Т0 vAlign-top width-135 he1ght-l>
<IMG height-1 src-"1e tte r a l.f i 1es/qxwspacer.g if* width-135 bqrder=0></TD>
<!-Размещение рисунка пустой клетки->
<TD vAlign-top width-16 height-l>
<IMG height-1 src= "letteral.files/qxw spacer.g1f” width-16 border-0></T0>
<!-Размещение рисунка пустой клетки->
<TD vAlign-top width-62 height-lxiM G height-1 src-"1etteral.files/qxw spacer.gif"
width-62 b0rder-0></TD>
< !-Размещение рисунка пустой клетки->
<TD vAlign-top width-116 height=l>
<IMG height-1 src- "le tte ra l.file s/q x w sp a ce r.g if’ width-116 border=0>
</Т0х!-Разнещ ение рисунка пустой клетки->
<Т0 vAlign-top width-6 height=l>
<IMG height-1 src- "letteral.files/q x w sp acer.g if" width-6 border-0>
</TD><!-Размещение рисунка пустой клетки->
<TD vAlign-top width-16 height-l>
<IMG height-1 src-"letteral.files/q x w sp acer.g if” width-16 border-0></TD>
<'.-Размещение рисунка пустой клетки->
<TD vAlign«top width-11 height=l> .
<IMG height-1 src*"!etteral.files/q x w sp acer.g if" width-11 border-0></TD>
<!-Размещение рисунка пустой клетки->
<TD vAlign-top width-2 he1ght=l>
<IMG height-1 src= "letteral.files/q xw sp acer.g if" width-2 border=Ox/TD>
<!-Размещение рисунка пустой клетки->
<TD vAlign-top width-1 height=l>
<IMG height-1 src=“ letteral.files/q x w sp acer.g if" width-1 border-Ox/TD>
<!-Размещение рисунка пустой клетки->
</TRx/TBOOYx/TABLE>
<DIV class=box6xiMG height-130 alt-Lena.gif src=” le tte ra l.file s / L e n a .g if" width-148
‘e l *
border=0> <!-Подпись рисунка -> </DIV>
<Div class=box7xiMG height-182 a lt- flo w e r.g if s rc = "le tte ra l.file s / flo w e r.g if" width-208
border-0>
<IM6 h e i g h t - 5 s r c = " l e t t e r a l . f i l e s / q x w s p a c e r . g i f " w i d t h - 1 align-right
b o r d e r - O x / D I V x j -Размещение рисунка пустой клетки->
<DIV class=box8>
,<DIV class-pNormalxSPAN class-tNormal>OH отвергал и мрак и тени. </SPANx/DIV>
<Div class-pNormalxSPAN class-tNonnal>B апреле май провозглашал </SPANx /d iv x /d iv >
<DIV class-box9>
1
<IMG height-1 s rc = "le tte ra l.file s / L in e l6 .g if" width-350 border=Ox/DIV>
<DIV class-boxlOxiMG height-98 a lt- lo g o .g if s rc = "le tte ra l.file s / lo g o .g if" width-314
border-0></DIV>
<DIV class-boxl3><IMG height-343 a lt- "T e x r s rc - "le tte ra l.file s / T e x t.g if" width-22
border-G></DIV>
</B0DY>
</HTML>
На рис. 17.9 показана еще одна веб-страница, выполненная с помощью CSS (лис­
тинг 17.10).
250
Урок 17. Каскадные листы стилей
| J 0:\Книги\)Лк6ный курс\НТМЦСО\Глава 17\fcUngl7,6,htm
Ри с. 17.9. Еще один пример использования стилей
Листинг 17.10. Пример более сложной программы на использование стилей
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN">
<HTMLxHEADxTITLE>flpHMep использования файлов с расширением css</TITLE>
<МЕТА HTTP-EQUIV=Content-Type CONTENT="text/html; CHARSET=windows-1251'’>
<LINK HREF-''Л истинг 17.10.file s / s ty le .c s s " type=text/css rel=stylesheet>
<META CONTENT=“MSHTML 6.00.2600.0" NAME=GENERAT0R></HEAD>
<B0DY bottomMargin=0 bgColor=#0DDBBB leftMargin=0 topMargin=0 rightMargin=0
marginheight=” 0" marginwidth=“0">
<IMG ID=BGMMM STYLE="DISPLAY: none: LEFT: 163px: POSITION: absolute: TOP: 74px"
SRC="IlHCTHHr 1 7 .7 .file s / lfo n .g if“>
•
'
<TABLE style= “BACKGROUND: url(im g/bg.jpg) no-repeat le f t top" height="100*”
cellspacing=0 cellpadding=0 width=” 100r border=0>
<TB0DY> <TR> <TD HEIGHT=36>
<TABLE HEIGHT-lOO*" CELLSPACING=0 CELLPADDING=0 WIDTH-” 1Q0T B0RDER=0>
<TB0DY> <TR> <TD WIDTH=339 BACKGROUND*"">&NBSP:</TD>
<TD ALIGN=LEFT BACKGROUND="FFOOFF’’><IMG WIDTH=547 HEIGHT=446
згс= "Листинг 17.10.f ile s /Воронихинскиө
колонны. jpg"x/TD></TR></TBODYx/TABLE></TD>
<TR HEIGHT=1>
<Т0>Россия. Санкт-Петербург</Т0>
<TR HEIGHT=119>
<TD
STYLE="PADDING-LEFT: 350px: FONT-SIZE: 18px- PADDING-TOP40px: FONT-FAMILY: A ria l"
’
ALIGN=MIDDLE>neTpofl ворец</Т0>
<TR> <TD style="PADDING-RIGHT: 20px: PADDING-ВОПОМ: Opx" VALIGN=TOP>
<TABLE HEIGHT="100r' CELLSPACING=0 CELLPADDING=0 WIDTH="100r BORDER=0>
<TB0DY> <TR> <TD WIDTH=200>
‘
<TABLE HEIGHT="100a:“ CELLSPACING=0 CELLPADDING=0 WIDTH-” 100Г BORDER=0>
<TB0DYx/TB0DYx/TABLEx/TD>
<TD ALIGN=RIGHT <Р>Нижний парк
<P ALIGN=RIGHT> Дворец Марли
'
•
<A CLASS-TEXT НРЕҒ="Листинг 1 7 .1 0 .file s /Воронихинскиө колонны.jpg">HoBbiii Петергоф</А><Р
a l ідп=гідіи>Болыиой Петергофский Дворец </Px/T0x/TRx/TB0DYx/TABLEx/TD>
Примеры использования стилей
251
<TR a lig n - !e ft height=155>
<TD>
<SPAN style="WIDTH: 200px: POSITION: absolute: HEIGHT: 155px"></SPAN>
<SPAN style= ”WIDTH: 443px: HEIGHT: 100r>&nbsp:</SPAN></TD></TR></TBODY></TABLE>
<TABLE STYLE-”LEFT: OPX: POSITION: ABSOLUTE: TOP: OPX" HEIGHT-260 CELLSPACING-0
CELLPADDING-0 WIDTH-367 BORDER-0>
<TBODYxTR HEIGHT=63><TD>&NBSP; </TD>
<TR HEIGHT»24xTD ALIGN=RIGHT>
<A CLASS=MENU НРЕҒ-"Листинг 17.10.file s /Большой Дворец.Млп">Большой fleopeu</A><IMG
HEIGHT-1 SRC-’’Листинг 17.10.files/d o t.g 1 f“ WIDTH=0x/TD>
<TR HEIGHT-24^
<TD ALIGN-RIGHTxB CLASS-MMENU
onmouseover- ’
’
пш.styl e .di spl a y = 'i nl i n e '; b g m m m .styl e .di spl a y - 'i nl i n e ':"
onmouseout='"nmm. sty 1 e .di spl a y = ’
n o n e 1:bgmmm. style, d i s p l a y ^ n o n e ' :">
Фонтаны в Нижнеи парке</В>
<SPAN class=spn id=nmm
onmouseover="nm). sty 1e . di spl ay-' i nl i ne': bgmmm.sty1e .di splay-' i n li ne' : ”
style="DISPLAY: none’
onmouseout="mmm. s ty le , display-'none';bgmmm.sty1e .display-' none' :">
<IMG HEIGHT-20 SRC-"Листинг 1 7 .1 0 .files/d o t.g if" width=118>
<A CLASS-MENU HREF-''Л истинг 17.10.Л1е5/Пираиида.һІт">Пираиида</А>
<IMG HEIGHT-20 SRC="flHCTHHr 17.10.file s / d o t.g if' width=8>
<SPAN CLASS-SPN STYLE=”LEFT: -40px: TOP: 16px">
<IMG height-20 5 гс="листинг 17.10.file s / d o t.g if" width=100>
<A CLASS-MENU HREF-’’Листинг 1 7 .1 0 .file s /Золотая горка.htm”>Золотая&пЬзр; горка</А>
<IMG HEIGHT-20 SRC-’’Листинг 17.10.file s / d o t.g if” width=20>
<SPAN CLASS-SPN STYLE=”LEFT: -22px: TOP: 16px”>
<IMG HEIGHT-20 SRC-”Листинг 17.10.file s / d o t.g if’’ width=100>
<A CLASS-MENU HREF-''Л истинг 17.10. f ile s /Марли.ҺШ">Марли</А>
<IMG HEIGHT-20 SRC-"Листинг 17.10. files/d o t. g i f ’ width=84>
<SPAN CLASS-SPN STYLE="LEFT: -34px: TOP: 16px">
<IMG HEIGHT-20 SRC-’’Листинг 17.10.file s / d o t.g if" width=64>
<A CLASS-MENU HREF-’’Листинг 1 7 .1 0 .file s /Большой дворец.htm”>
Большой Snbsp:flBopeu</A>
<IMG HEIGHT-20 SRC-’’Листинг 17.10.file s/d o t.g if’’ width=100>
<SPAN CLASS-SPN STYLE-"LEFT: -16px: TOP: 16px’’>
<1MG HEIGHT-20 SRC-''Л истинг 17.10.file s / d o t.g if’ width=62>
<A CLASS-MENU HREF-’’Листинг 17.10.file s /Улица Аврова.М :т“>Улица Аврова</А>
<IMG HEIGHT-20 SRC-”Листинг 17.10.file s / d o t.g if’ width=95>
<SPAN CLASS-SPN STYLE=’’LEFT: Opx: TOP: 16px”>
<IMG HEIGHT-20 SRC-'Л истинг 1 7 .1 0 .files/d o t.g if" width=41>
<A CLASS-MENU HREF-’’Листинг 17.10. f ile s /Воронихинскиө колонны.һ^">Воронихинские
колонны</А>
<IMG HEIGHT-20 SRC-’’Листинг 1 7 .1 0 .files/d o t.g if” width-94>
<SPAN CLASS-SPN STYLE-"LEFT: -20px: TOP: 16px">
<IMG HEIGHT-20 SRC-''Л истинг 17.10.file s / d o t.g if' width-39>
<A CLASS-MENU HREF-’’Листинг 17.10.f i 1es/Сөрпуховская.ҺШ">Серпуховская</А>
<IMG HEIGHT-20 SRC-’’Листинг 17.10.files/dot.gif"width-58>
<SPAN CLASS-SPN STYLE-"LEFT: -17px: TOP: 16px”>
<IMG HEIGHT-20 SRC-’’Листинг 17.10.file s / d o t.g if" width-39>
<A CLASS-MENU HREF-’’Листинг 1 7 . 1 0 .file s /Особняк на Фонтанке.ҺШ">0собняк на Фонтанке</А>
<IMG height-20 src-''Л истинг 17.10.files/dot.g1 f ”
width-64> </SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN></SPAN>
продолжение &
252
Урок 17. Каскадные листы стилей
Листинг 17.10 ( продолжение)
<IMG HEIGHT-1 SRC-''Л истинг 17.10. f П es/dot.g1f ” w1dth-52x/TD>
<TR HEI6HT-24> <TD ALIGN-RIGHT><A CLASS-MENU НРЕҒ-"Листинг 17.10.file s /Юсуповский
дворец. htm">
>.
Юсуповский flBOpeu</AxIMG HEIGHT-1 SRC-'Л истинг 17.10.file s/d o t.g 1 f" WIDTH-92x/TD>
<TR HEIGHT-24xTD ALIGN-RIGHTxA CLASS-MENU HREF-'Л истинг 1 ?.1 0 ,f 1 les/Аничиов nocT.htm">
Аничков moct</A><IMG HEIGHT-1 SRC-''Л истинг 17.10.file s / d o t.g if" width-152x/TD>
<TR HEIGHT-24> <TD ALIGN-RIGHTxA CLASS-MENU STYLE-“LETTER-SPACING: lp x “
HREF-''Л истинг 17.10.files/H a Фонтанке.htm">Ha Фонтанке</А>
<IMG HEIGHT-1 SRC-''Л истинг 17.10.f11es/dot.gif" width-173x/TD>
<TR HEIGHT-24xTD ALIGN-RIGHTxA CLASS-MENU STYLE-"LETTER-SPACING: lpx"
h re f-''Л истинг 17.10.files/HeecKMft проспект.ҺШ">Невский проспект</А>
<IMG HEIGHT-1 SRC-''Л истинг 17.10.file s / d o t.g if" width-190x/TD>
<TR HEIGHT-24xTD ALIGN-RIGHTxA CLASS-MENU STYLE-"LETTER-SPACING: lpx"
HREF-''Л истинг 1 7 .1 0 .file s /Владимирский собор.htm”>
Co6op</AxiMG height-1 src- "Листинг 17.10.file s / d o t.g if" width-207x/TO>
<TRxTDx/TD></TRx/TBODYx/TABLE>
<STYLE>#bn {
'
• I
DISPLAY: block
,.
#bt {
DISPLAY: block
</STYLE>
</BODYx/HTML>
i'
'
I Г Г іТ Р И И
. - * ■'■
:
:
'
Щ
В последней программе используется парный тег <SPAN>, который создает
структуру текстового уровня, определяемую пользователем. Тег <SPAN> появился
в H T M L версии 4.0 и применяется в сочетании с каскадными листами стилей.
Подведем итоги
В этом уроке даны начальные сведения по большой и сложной теме каскадных
листов стилей. Представлены определения стилей, их уровней, синтаксис. Рас­
смотрены методы группирования листов стилей. Рассказано о четырех вариан­
тах использования листов стилей в HTM L-документе: встраивание, подключе­
ние, связывание, импорт. В заключение урока приведены реальные примеры
применения стилей.
Урок 18
Подготовка
изображений
для веб-страниц
Изображение, которое помещается на веб-страницу, должно
быть особым образом подготовлено, в частности, иметь не­
большой размер в байтах, чтобы содержащая его веб-страница
быстро загружалась. В этом уроке вкратце рассматриваются
принципы подготовки изображений для веб-страниц с помо­
щью программы Adobe Photoshop — наиболее популярной
программы обработки растровой графики.
254
Урок 18. Подготовка изображений для веб-страниц
Файловые операции
Для обработки изображения его нужно открыть. Для этого служит команда
File ►Open (Файл ►Открыть). Диалоговое окно, появляющееся после выбора этой
команды, показано на рис. 18.1.
Ри с. 18.1. Выбор обрабатываемого изображения
Как вы знаете (см. урок 3), на веб-страницах рекомендуется размещать изобра­
жения далеко не всех форматов, доступных в программе Adobe Photoshop. По­
этому первым шагом в обработке изображения является его преобразование из
исходного формата (например, PSD — «родного» формата программы Adobe
Photoshop) в формат, необходимый для размещения изображения на веб-странице. Для этого достаточно воспользоваться командой File ►Save as (Файл ►Сохра­
нить как). При выборе этой команды открывается диалоговое окно, которое пред­
ставлено на рис. 18.2.
Инструменты выделения
255
Мои документы
My Pictures
Мои рисунки
дакдменіы
Untitied-1.gif
CompuServe GIF Г GIF)
. '. v
V
'
Rk m ust be saved as * copy wrth this selection
Рис. 18.2. Сохранение изображения в выбранном формате
Все доступные в программе форматы перечислены в раскрывающемся списке
Format (Формат). Для сохранения файла изображения в наиболее распространен­
ном в Интернете формате G IF в этом списке нужно выбрать пункт CompuServ GIF
(*.GIF), как показано на рис. 18.2, и щелкнуть на кнопке Save (Сохранить).
Инструменты выделения
Очень часто возникает необходимость в коррекции отдельных частей изображе­
ния, например, что-то подправить, отрезать, сделать более ярким, изменить фон
и т. д. Корректировать можно только выделенные области, поэтому первоначаль­
но нужно научиться их выделять.
В программе Adobe Photoshop выделять области изображения можно по разме­
ру по форме, по цвету. К инструментам выделения относится группа инструмен­
тов прямоугольного выделения: Rectangular Marquee Tool (Прямоугольное выделе­
ние) Elliptical Marquee Tool (Эллиптическое выделение), Single Row Marquee Tool (Выде­
ление строки пикселов), Single Column Marquee Tool (Выделение столбца пикселов),
256
I
Урок 18. Подготовка
изображений для веб-страниц
а также группа инструментов лассо: Lasso Tool (Лассо), Poliganol Lasso Tool (Много­
угольное лассо), Magnetic Lasso Tool (Магнитное лассо). Кроме того, к инструментам
выделения относится инструмент Magic Wand (Волшебная палочка), принцип рабо­
ты которого основывается на сходстве цветовых параметров пикселов.
Все инструменты выделения находятся в верхней части набора инструментов
(рис. 18.3).
Ри с. 18.3. Инструменты выделения в наборе инструментов
„
Помимо инструментов для выделения, можно использовать команды меню Select
(Выделить), в частности: для выделения всего изображения применяется команда
All (В се), для отмены выделения
команда Deselect (Снять выделение), для пре­
вращения всех выделенных фрагментов в невыделенные и наоборот — команда
Invert (Инвертировать), для повторного выделения ранее снятого выделения — ко­
манда Reselect (Повторить выделение).
Изменение разрешения и размеров
изображения
Как известно, изображение, которое помещается на веб-страницу, должно иметь
маленький размер в байтах, чтобы содержащая его веб-страница быстро загружа­
лась. Для уменьшения размера изображения в байтах существует несколько прие­
мов, в частности, можно уменьшить разрешение изображения или его геометри­
ческий размер. Этой цели служит команда Image ►Image Size (Изображение ►
Размеры изображения), при выборе которой открывается диалоговое окно, пока­
занное на рис. 18.4.
Хотя геометрические размеры изображения, помещаемого на веб-страницу, мож­
но отрегулировать атрибутами WEIGHT и HEIGHT тегов языка H T M L, эти регули­
ровки никак не скажутся на размере изображения в байтах, а значит, ц на скоро­
сти его загрузки.
Показанная на рис. 18.4 фотография рыбы в аквариуме была выполнена цифро­
вым фотоаппаратом. Как видно в диалоговом окне Image Size (Размеры изображе­
ния), разрешение полученной фотографии составляет 180 пикселов на дюйм, а
геометрический размер
36,58x27,43 см. Конечно, такой файл («весом* более
3 Мбайт) никто не поместит на свою веб-страницу. На рис. 18.5 показано то же
диалоговое окно после уменьшения разрешения и размеров фотографии.
257
Изменение разрешения и размеров изображения
I Щ Щ І Ф
Ш
- V
і
V
«rearms
i-L
-
Ш
й36у’-
S
Щ
Щ
W f ty A f i
ц в Т
•
і k
l f
В
4ЮШ
rw »
■j i ;
v
Шx
- i . v
кда
М!
4
р
Image See
[Д Д Ч У Д д О Р у С т т У т Д Ц И О О р д у у & а И
^ ^ Л о о у й С ^ ^ д Р п ^ З г о у Д К Л у Д Л г ^ ‘Л ’ Л Л
« ж
‘" ь Л
^
- *%Д —
*
.
»
ж • л » • _ ж ^ | • • «• I • Д т ш • •
• • • <* в • » в % • ■
\ р
• Т *| Ж• %
"Ж
«• • • •
* К * . и
* •^ • »Я M
^ Я 9^ •Ж.Жш
w Я * 0Я ЖІж
В I Ж
I *»
i •k *a • я J*
~ шm
^р• в я Ш ж ш 1
Z»_%.
Ч жI Д
Ч
^ . f Л ^ Д Лд
ж
у
J LИ
■ • _ • I » * • • * F J U ^ JЯ^ * » < ® W "* ■ , * Ж ~ * • • • • ^ Ж " | • •Ж
в• • Я Я Я в•
“ • • *w»*• • •
»JrajV' *
• w■
■i ^
J
■
■ •* • • • • M • *
^
P9 -* 9 • *
•
**• • •-**•
Л *
*И
Ж
І
Ж
^IJQiaii Ж
.■Ж
■m Я ш m
Я І • V ЖЩ г^Л.0 - % ш я ш ш m ш я * я 0
ж в> » ж ш я • . • * * • * » • • я * * я я Ж^ж в • л» •
іГ .
* * Я Щ ■ • ж т л м ■ я • % • ж • • • Ж • • * < Ж в. » • » я • ш • • Я ш ш Ж * ж • » ш • Я Я Ш
■• I
•-ШШШ
> Я■ Ш •ГжИ . в
. Ж^ И■■ 1 ■ Иа ж< ■ О
^ ж» 1* шf
_ • Д« д
4 * « Ш • .J •_ 4 •^ ■
* Л
• ■ • # ■J* Ч т і і Ж
И ж• И ж_Ж
р м щ_Ж» _ХЩ
■ ■ Г W» Я •Ш Я Ч • ■ И Д - У у . . Ж J PЖ^ _X*»_^вЖ
* л > І О - » J> V ^ • J>e Ж Щ, ^ ж Т ^ ^ ^ Д і Д И ^ < 1 1 > Х И І ■ m w •И • .Р
И
И• ••У • Л
Йі Ш
^
ві Ш
.&
ШV ft
ft
ft ft
Лі
Л. >ft ft
ft.
ft ft
V ft ft
fti
Ai ft
Vi & Vi ft', ft ift
.1 ft ft
ft Mi
.1 Mi ft Л л |»*i * ft| ftш вI I■■
;
/ .
. V . Л \ ч у * \ У А V , \ V , y * V . S V / . V 4 V l ^ W
<
C“>
-S &
L>c
v *
)
xS
Я
■ Я
m
і ^ и д І Д ^ И
И % ж m •
Д№14.*♦>
Я Хч>>ХО»Х
С
•^
IN
*:ССС<<«ХО№МСОООО^«»ССООС<»6И4»W»KOB^A4>yj
■ ■ *
*■ ^ •"•%»r
■
м
н
н
н
в
М
М
н
•
• •
•■':<<::f^ ^ in “ ‘■
■ . . у.——a ia*■
■
pixels
Ат№№ш|Ш Д-
л:.-'?
| W
P
% *Ж Х * Z l
Ж
т
у
Ю
п
ш
т
• J >
■
а
■
w
£^1^4_______ С pixels
* ■ Я
r
f
~ш л т Ш
/
щ ш ш • В
,
v
* '
t \ V
p
. / !* '
\
• • .• *
. * '! ',
*
■• V| V
*k« »•
P B K S K y w Д
• #< Р % 0 I k • • * . • «. » _ • » • • ^ • • • •> %» •, %• • •
* «. • * \ J " ^ L • .• _ • • _ • • ^ і • • \ • • - • - • •
у д у у ^ у у у у у і ■ ■ л и ч
О г Х V * T * • % * 4 J * « О 1 - , • J*
» » У У У У ^ * У * У Ъ • • * • * * > *L -^ * - * Х * ft# * * V * *л* • . * • «< - • . « • • • • « %« , * .> < » * * » * •_ •,
■ Ж Т * • ■ Й І % Я • • ■ • • % ■ » Ғ • ft w ■ • • • я _ Ш ■ • • и Я ^ я * ■
ж
ч
«
м
ft
<
»
»
•>
»
•
•
*
•
•
•
»
•■
»
“
•
•
A
•
^
■
и
ч
ір
і
■
*
•
Н
^л л щ т • Щ >
• »
•^
•*•1
*_
• . *•
J* Ж
я я *• • ■• я • Ш Ж
У
д А я в • • ■• *• • щ *»• • • я ■«■»
к
в
И
9* ижя Ш я 1
■•■■f %
I
■
ш *Ж
■
~
ж
»
• • «■
»• в^ЛЖ
•Я •
IЖ
в■
J
^
^
bЦ
к■_!*
Щ
W
*•
1 Ж Я Я М Я I I ■ ■ ■ • ■ » • Я я Шft • »
Ж я ш И ft ft1■ • « • ф
ш • •
У і Д * » . • ^ *1
в»f
я Я Я •■
•«
ш
И■■#%
Ж
V
• Я я |рГ| %
■Я Ж Г Я ^ Л Я В
UBB ■I
t B
J
L
B
1 \ | Я LI ■■Ж
Ж
_
■■
9
I
V
й
п
Р
Л
- .
. ^ « v A
V
v
*
д г у м
S>4
в О
І І
л
К
П
. , і ”_ • Я 9 »
■
^
в ж »J
«Л»»-/Ш Ш 8Ш І
«ш
л
Ж Д ж в Ж Ж ж д ж ж ж ж ж ж »
ч
•_ •_ » * •
8
* .* • * •
№
■№
Шій
: ' v
*О
BSJKwSS’'
Л
Х
» . « >
v
•
• •
n
iB H f iV A S I
» 'Л Ч У
* .Й > У г ^
Ж >Т&
*\
l T
J % 4 % > » * - •
'
О
r v
в*
m
» « •
L4—
С гГ ^І
[ЖЯ
і і ч
Л
У
і
Қ Г У
ж я Я л ш
« ж * * * ж * «. » ■
■ ■ ж ^
■
ST ■■
П Г О г » У \ж «. » яУ л ?
• Ж І Ж • ж ж » * & A I ш^ш.
У У У > Ү і
■лл
vjw
PVH|№
№C<|HPPPрИ-^,--.,ЯРЧ
Ё
£
-чК Ж М ш Ж ™
> м
Y
у л { * № о хi оW ? ' Я
Я
» V
* * •
У
Н
В
В
1
• J
W j f ч » вГ \^ Ж Г ^ р \ в ■» « Ж * /
.*»
З А И - З Л
I I ^ Я Ш _ щ .9 ■ Ж ¥ Ж ■ • • Я ж В • В ■ ■ Ж
Е М
іІ
Bicubic
ж__
v4J K
АҮЛV«<
ЯЯВет:
Рис. 18.4, Настройка разрешения и размеров изображения
Рис. 18.5. Уменьшение разрешения и размеров фотографии
Размер файла с новыми параметрами оказался в 132 раза меньше (I), чем был
раньше, и составил 24 Кбайт. Естественно, при подобной настройке нужно все
время визуально контролировать качество изображения, поскольку снижение
разрешения означает уменьшение количества пикселов на единицу длины, что,
в конце концов, обязательно скажется на визуальном восприятии.
258
I веб-страниц
Урок 18. Подготовка изображений для
Коррекция изображения
Программа Adobe Photoshop содержит множество средств для повышения каче­
ства изображений. Фотографии могут быть слишком темными, слишком светлыми,
недостаточно контрастными, иметь неразличимые детали, плохую рельефность,
поэтому появляется необходимость их изменения. Чем отличается хорошая фо­
тография от плохой? Хорошая фотография имеет оптимальный баланс света
и тени. Процесс изменения погрешностей в освещении и контрасте называют
коррекцией.
1
*"
.
Коррекция обычно выполняется с помощью меню команд подменю Adjustments
(Настройка) меню Image (Изображение).
В качестве примера изменим внешность девушки, показанной слева на рис. 18.6.
Справа на рисунке представлено диалоговое окно Brightness/Contrast (Яркость/
Контраст), открывшееся после выделения фрагмента изображения (показанных.
на заднем плане губ) и выбора команды Image ►Adjustment ►Brightness/Contrast
(Изображение ►Настройка ►Яркость/Контраст). Как видите, для изменения контра­
стности и яркости выделенного фрагмента достаточно изменить положение пол­
зунков Brightness (Яркость) и Contrast (Контраст) или ввести нужные значения
в соответствующие поля.
itqhtne г s/C оЫ*att
Ри с. 18.6. Изменение контрастности и яркости губ
Рисунок 18.7 иллюстрирует процесс цветовой коррекции глаза, выделенного
инструментами выделения, с помощью команды Image ►Adjustments ►Hue/Satura­
tion (Изображение ►Настройка ►Оттенок/Насыщенность).
Рисунок 18.8 иллюстрирует процесс цветовой коррекции брови, выделенной инст­
рументами выделения, с помощью команды Image ►Adjustments | Color Balance
(Изображение ►Настройка ►Цветовой баланс), которая применяется к области выделения.
Коррекция изображения
И
Hue/Satuiation
Master
Рис. 18.7. Изменение оттенка, насыщенности и светлоты выделенного фрагмента
Colot Balance
Рис. 18.8. Настройка цветового баланса выделенного фрагмента
Рис. 1 8 .9 . Изображение после коррекции
259
260
Урок 18. Подготовка изображений для веб-страниц
Для обрезки краев изображений применяется инструмент Crop (Кадрирование)
или команда Image ►Crop (Изображение ►Кадрирование) после выделения нужно­
го фрагмента любым инструментом выделения. После выбора этой команды все
изображение, лежащее вне рамки выделения, будет удалено.
На рис. 18.9 показано полностью подготовленное для размещения на веб-странице изображение после выполнения всех операций, описанных в этом разделе
(сравните его с изображением на рис. 18.6).
Подведем итоги
В этом уроке рассмотрены основные принципы подготовки изображений для
веб-страниц с помощью программы Adobe Photoshop. В частности, представлены
команды и инструменты для выполнения файловых операций, для выделения
фрагментов изображения, для изменения разрешения и геометрических разме­
ров изображения, для тоновой и цветовой коррекции изображения.
Алфавитный указатель
#
<!DOCTYPE>, 222
<А>, 26, 199
<ABBR>, 49
<ACRONYM>, 49
<APPLET>, 95
<AREA>, 67
<B>, 43
<BASEFONT>, 38
<BIG>, 43
<BLOCKQUOTE>, 47
<BODY>, 25, 77, 236
<BR>, 38
<CAPTION>, 121
<CENTER>, 40
<CODE>, 51
<COL>, 120
<COLGROUP>, 121
<COMMENT>, 96
<D D >, 114
<DFN>, 50
<DIR>, 116
<DIV>, 39, 227, 230
<DL>, 114
<EM>, 50
<EMBED>, 199
<FONT>, 36
<FORM>, 153
<FRAME>, 166
<FRAMESET>, 165
<H1>, 35
<HEAD>, 25, 223, 235
<HR>, 87
<HTML>, 25, 222
<I>, 43
<IMG>, 57
<INPUT>, 154, 156
<INS>, 53
<KBD>, 52
<LAYER>, 227, 231
<LI>, 104
<LINK>, 225
<LISTING>, 54
<MAP>, 67
<MARQUEE>, 99
<MEDIA>, 97
<MENU>, 116
<NOBR>, 46
<NOFRAME>, 166
<OBJECT>, 96
<OL>, 104, 105
<OPTION>, 159
<P>, 24, 38
<PRE>, 24, 41
<Q>, 48
<S>, 45
<SAMP>, 52
<SCRIPT>, 95
<SELECT>, 159
<SMALL>, 43
<SPAN>, 44, 252
<STRIKE>, 43
<STRONG>, 43
<STYLE>, 96, 238
<SUB>, 43
<SUP>, 43
<TABLE>, 119
<TBODY>, 121
262
Алфавитный указатель
<TD>, 120
<TEXTAREA>, 162
<TFOOT>, 122
<ТН>, 121
<THEAD>, 122
<TITLE>, 24
<TR>, 120
<TT>, 43, 51
<TYPE>, 96
<U>, 43
<UL>, 109
<VAR>, 43
<WBR>, 46
<A>, 190
<OBJECT>, 201
CHECKED, 156
CITE, 47
CLASS, 114, 227, 237
CLEAR, 39
CLIP, 231
COLOR, 37
COLS, 162, 166
COLSPAN, 122
COLSPEC, 120
COMPACT, 114
CONTROLLER, 199
COORDS, 68
D
DEFER, 96
DIRECTION, 99
Document Type Definition
(DTD), 15, 222
Domain Name System (DNS), 15
dpi, 60
A
ACCESSKEY, 69, 191
ACTION, 154
ADDRESS, 41
Advanced Research Project Agency
(ARP A), 14
AIFF, 203
ALIGN, 35,38,57,87,99,119-122,169
ALINK, 30
ALT, 57, 68
AUTOPLAY, 199
AVI, 202
■K
В
BACKGROUND, 29, 119, 122, 231
BASE FONT, 36
BEHAVIOR, 99
BGCOLOR, 29, 78, 99, 119-122
BGPROPERTIES, 30
BORDER, 57, 119, 122, 166
BORDERCOLOR, 119
BOTTOMMARGIN, 30
С
Cascading Style Sheets (CSS), 18, 234
CELLPADDING, 119
CELLSPACING, 119
CENTER, 35, 38
CHARSET, 96
CHECKBOX, 156
E
Extensible Markup Language (XML), 18
F
FLC, 201
FLI, 201
FRAME, 123, 190
FRAMEBORDER, 166, 168 - 169
H
HEIGHT, 57, 99, 169, 199, 231, 256
HIDDEN, 156
HREF, 68, 190, 225
HSPACE, 57, 99, 119
HTTP-EQUIV, 224
HyperText Markup Language
(HTML), 15, 22
HyperText Transfer Protocol (HTTP), 15
I
ID, 114, 120, 123, 190, 227, 231
IMAGE, 156
Internet Explorer, 25, 27
ISMAP, 57, 66
Алфавитный указатель
з
JavaScript, 232
Java-aiuuieT, 95
JUSTIFY, 35, 38
L
LANG, 114
LANGUAGE, 96
LEFT, 35, 38, 231
LEFTMARGIN, 30
LINK, 30, 78
LONGDESC, 57
LOOP, 99, 199
M
Macromedia Flash, 201
MARGINHEIGHT, 168, 169
MARGINWIDTH, 168, 169
MAXLENGTH, 156
МЕТА-информация, 223
МЕТА-тег, 223
METHOD, 154
METHODS, 190
MIDI, 204
Mosaic, 25
MOV, 202
Moving Pictures Experts Group
(MPEG), 202
MP3, 204
MPEG, 202
N
NAME, 67, 154, 156, 162, 168, 169, 190,
223
Netscape Navigator, 25
NOHREF, 68
NONE, 39
NORESIZE, 168
NOSHADE, 87
NOWRAP, 122
0
ONBLUR, 69
ONFOCUS, 69
263
P
PASSWORD, 156
PLUGINSPAGE, 200
ppi, 60
PSD, 254
Q
QuickTime, 202
R
RADIO, 156
Real Audio/Video, 205
RealPlayer, 205
REL, 225
RESET, 157
REV, 225
RGB, 37
RIGHT, 35, 38
RIGHTMARGIN, 30
ROWS, 162, 166
ROWSPAN, 122
RULES, 123
s
SCROLLAMOUNT, 99
SCROLLDELAY, 99
SCROLLING, 168, 169
SHAPE, 67
Shockwave Flash (SWF), 201
SIZE, 36, 87, 154, 156
spi, 60
SRC, 57, 96, 156, 168, 169
Standard Generalized Markup Language
(SGML), 15
START, 105
STYLE, 114, 228
SUBMIT, 157
SWF, 201
T
TABINDEX, 68
TARGET, 68, 154, 169
TEXT, 30, 78, 157
TITLE, 68, 190
TOP, 231
TOPMARGIN, 30
TYPE, 96, 105, 109, 156, 225
264
Алфавитный указатель
и
Uniform Resource Identifier (U R I), 47
Uniform Resource Locator (U R L ), 189
U SEM A P, 57, 69
V
V A LIG N , 120-122
V A LU E, 157
V L IN K , 30
V SPA C E, 57, 99, 120
W
W A V , 203
W E IG H T , 256
W ID T H , 57, 87, 99, 120, 169, 199, 231
Windows Media Player, 205
Windows Media Server, 205
W ord W ide W eb (W W W ), 22
W orld W ide W eb (W W W ), 15
W orld W ide W eb Consortium
(W 3 C ), 17, 222
v
■
I
z
Z EL, 201
A
аббревиатура, 49
абзац, 38
акроним, 49
альтернативный текст, 57
апплет, 19
атрибут, 28
Б
баннер, 208
баннерная реклама, 207
бегущая строка, 99
браузер, 25
Microsoft Internet Explorer, 17
Mosaic, 17
Netscape Navigator, 17
В
Ванневар Буш (Vannevar Bush), 15
веб-браузер, 25
веб-мастер, 22
веб-сайт, 22
веб-страница, 14
вложенный список, 112
вложенный фрейм, 184
внешний объект, 96
внешняя ссылка, 192
внутренняя ссылка, 191
волшебная палочка, 256
встраиваемый стиль, 238
выделение
прямоугольное, 255
столбца пикселов, 255
строки пикселов, 255
эллиптическое, 255
выравнивание
изображений, 65
по вертикали, 120
по горизонтали, 120
текста, 35, 40
Г
,
гипертекст, 15, 26
гипертекстовая ссылка, 26
глоссарий, 114
горизонтальная линия, 87
горизонтальное выравнивание, 35
графика, 57
анимационная, 201
векторная, 201
растровая, 60
графическая ссылка, 196
графический файл, 57
группирование стилей, 237
групповой поток, 205
А
динамический слой, 232
домен, 218
3
заголовок
таблицы, 121
текста, 35
звуковой формат, 203
значение, 236
Алфавитный указатель
И
изображение
коррекция, 258
открытие, 254
размер, 256
разрешение, 256
сохранение, 254
импортируемый стиль, 242
инструмент
Crop, 260
Elliptical Marquee, 255
Lasso, 256
Magic Wand, 256
Magnetic Lasso, 256
Poliganol Lasso, 256
Rectangular Marquee, 255
Single Column Marquee, 255
Single Row Marquee, 255
Интернет, 14, 22
информации об авторе документа, 94
К
кадрирование, 260
каскадные листы стилей, 234
клавиатурный символ, 89
кнопка, 157
комментарий, 48, 49, 96
консорциум W 3C, 236
корпоративный сайт, 219
Л
лассо, 256
магнитное, 256
многоугольное, 256
линия горизонтальная, 87
лист стиля, 96
М
магнитное лассо, 256
маркер, 109
маркированный список, 104, 109
метод
file, 189
ftp, 189
http, 189
mailto, 189
265
метод ( продолжение)
news, 189
telnet, 189
многострочное поле, 162
многострочный список, 160
многоугольное лассо, 256
моноширинный шрифт, 51
мультимедиа, 199
Н
набор фреймов, 165
начертание, 43
неразрывная строка, 46
нумерованный список, 104
О
объект внешний, 96
объявление, 236
определение
МЕТА-определение, 235
на веб-странице, 50
типа документа, 222
отклик баннетэа. 208
п
паук, 220
переключатель, 156
пиксел, 61, 74
плавающий фрейм, 184
подключаемый стиль, 238
поиск
по U R L -адресу, 218
по тематическим ссылкам, 217
с помощью поисковых систем, 219
поисковая система, 219
поле ввода, 156
ползун, 220
поток
групповой, 205
простой, 204
потоковые данные, 204
правило, 236
предварительное форматирование, 41
пробел, 54
простой поток, 204
прямоугольное выделение, 255
W
266
Алфавитный указатель
Р
разрешение изображения, 60, 256
разрыв строки, 38
региональный сервер, 219
С
сайт, 215
свойство, 236
связываемый стиль, 241
селектор класса, 238
сетевой робот, 220
символ
клавиатурный, 89
специальный, 92
синтаксис листа стиля
значение, 236
объявление, 236
правило, 236
свойство, 236
элемент, 236
слой
динамический, 232
понятие, 227
создание, 227
текстовый, 228
служба
e-mail, 15
Usernet, 15
специальный символ, 92
список
вложенный, 112
выбора, 159
маркированный, 104, 109
многострочный, 160
нумерованный, 104
определений, 104, 114
ссылка, 188
внешняя, 192
внутренняя, 191
графическая, 196
стандартный цвет, 78
стиль, 96, 235
встраиваемый, 238
импортируемый, 242
подключаемый, 238
связываемый, 241
столбец таблицы, 120
строка
бегущая, 99
неразрывная, 46
таблицы, 120
структурная разметка, 15
сценарий, 95
Т
таблица, 119
создание, 119
столбцы, 120
строки, 120
цветов, 80
ячейки, 120
тег, 24, 28
текст
абзацы, 38
акроним, 49
альтернативный, 57
выравнивание, 35, 40
комментарий, 49
начертание, 43
неразрывные строки, 46
определение, 50
предварительное
форматирование, 41
размер, 36
уровни заголовков, 34
цитирование, 47
шрифт, 36
шрифтовое выделение, 50
текстовый слой, 228
технология
Java, 208
QuickTime, 206
Real Audio/Video, 205
ShockWave, 208
Windows Media Player, 205
Windows Media Server, 205
Тим Бернере-Ли
(Tim Berners-Lee), 15
тип документа, 222
У
универсальный указатель ресурса, 189
ф
флажок, 156
фон, 77
фоновый рисунок, 77
форма, 154
формат
А ІҒҒ, 203
A V I, 202
BM P, 59
G IF, 58, 208, 255
JP E G , 59
JP G , 208
M ID I, 204
M OV, 202
MP3, 204
M PEG , 202
PC X, 60
PNG, 59
PSD , 254
QuickTime, 202
SW F, 201
W A V , 203
форматирование предварительное, 41
фрейм, 164
вложенный, 184
плавающий, 184
X
хост, 214
хостинг, 214
ц
цвет
ссылки, 78
стандартный, 78
шрифта, 36
цитата, 47
Ч
червь, 220
І
ш
шрифт, 36, 51
шрифтовое выделение, 50
э
элемент
листа стиля, 236
управления, 156
эллиптическое выделение, 255
Я
язык
Dynamic H TM L, 19
Java, 19
JavaScript, 19
Perl, 20
PH P, 19
VBScript, 19
якорь, 193
ячейка таблицы, 120
Комолова Нина Владимировна
HTML: Учебный курс
Заведующий редакцией
Ведущий редактор
Литературный редактор
Художник
Корректоры
Верстка
А. Кривцов
А. Адаменко
А. Жданов
JI. Адуевекая
С. Беляева, И. Тимофеева
Н. Баланина
Подписано в печать 01.08.06. Формат 70X100/16. Уел. п. л. 21.9.
Доп. тираж 3000 экз. Заказ №2148.
ООО «Питер Пресс». 198206, Санкт-Петербург. Петергофское шоссе, д. 73, лит.
Налоговая льгота — общероссийский классификатор продукции
O K 005-93, том 2; 953005 — литература учебная.
Отпечатано с фотоформ в ОАО «Печатный двор» им. А. М. Горького.
*
197110, Санкт-Петербург. Чкаловскнй пр., 15.
Основанный Издательским домом «Питер» в 1997 году, книжный клуб «Профессионал» собирает
в своих рядах знатоков своего дела, которых объединяет тяга к знаниям и любовь к книгам. Для
членов клуба проводятся различные мероприятия и, разумеется, предусмотрены привилегии.
Привилегии для членов клуба:
• карга члена «Клуба Профессионал»;
• бесплатное получение клубного издания - журнала «Клуб Профессионал»;
• дисконтная скидка на всю приобретаемую литературу в размере 10% или 15%;
• бесплатная курьерская доставка заказов по Москве и Санкт-Петербургу;
• участие во всех акциях Издательского дома «Питер» в розничной сети на льготных условиях.
Как вступить в клуб?
Для вступления в «Клуб Профессионал» вам необходимо:
• совершить покупку на сайте www.piter.com или в фирменном магазине Издательского дома
«Питер» на сумму от 800 рублей без учета почтовых расходов или стоимости курьерской до­
ставки;
• ознакомиться с условиями получения карты и сохранения скидок;
• выразить свое согласие вступить в дисконтный клуб, отправив письмо на адрес:
postbook@piter.com;
• заполнить анкету члена клуба (зарегистрированным на нашем сайте этого делать не надо).
Правила для членов «Клуба Профессионал»:
• для продления членства в клубе и получения скидки 10%, в течение каждых шести месяцев
нужно совершать покупки на общую сумму 800 до 1500 рублей, без учета почтовых расходов
или стоимости курьерской доставки;
• Если же за указанный период вы выкупите товара на сумму от 1501 рублей, скидка будет увели­
чена до 15% от розничной цены издательства.
Заказать наши книги вы можете любым удобным для вас способом:
• по телефону: (812) 703-73-74;
• по электронной почте: postbook@piter.com;
• на нашем сайте: www.piter.com;
• по почте: 197198, Санкт-Петербург, а/я 619 ЗАО «Питер Пост».
При оформлении заказа укажите:
• ваш регистрационный номер (если вы являетесь членом клуба), фамилию, имя, отчество, теле­
фон, факс, e-mail;
• почтовый индекс, регион, район, населенный пункт, улицу, дом, корпус, квартиру;
• название книги, автора, количество заказываемых экземпляров.
п задт еп ьск п п п о м
ЗАКАЗАТЬ КНИГИ ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР»
МОЖНО ЛЮБЫМ УДОБНЫМ ДЛЯ ВАС СПОСОБОМ:
•
•
•
•
по телефону: (812) 703-73-74;
по электронному адресу: postbook@piter.com;
на нашем сервере: www.piter.com;
по почте: 197198, Санкт-Петербург, а/я 619,
ЗАО «Питер Пост».
ВЫ МОЖЕТЕ ВЫБРАТЬ ОДИН ИЗ ДВУХ СПОСОБОВ ДОСТАВКИ
И ОПЛАТЫ ИЗДАНИЙ:
Наложенным платежом с оплатой заказа при получении посылки на
ближайшем почтовом отделении. Цены на издания приведены ориентиро­
вочно и включают в себя стоимость пересылки по почте (но без учета
авиатарифа). Книги будут высланы нашей службой «Книга-почтой»
в течение двух недель после получения заказа или выхода книги из печати.
Оплата наличными при курьерской доставке (для жителей Москвы
и Санкт-Петербурга). Курьер доставит заказ по указанному адресу
в удобное для вас время в течение трех дней.
ПРИ ОФОРМЛЕНИИ ЗАКАЗА УКАЖИТЕ:
• фамилию, имя, отчество, телефон, факс, e-mail;
• почтовый индекс, регион, район, населенный пункт,
улицу, дом, корпус, квартиру;
• название книги, автора, код, количество заказываемых
экземпляров.
Вы можете заказать бесплатный
журнал «Клуб Профессионал»
пзалтепьскпл аом
С&ППТЕР
W W W .PITER.COM
ПЗПАТЕПЬСКПП
П О М
СПЕЦИАЛИСТАМ
КНИЖНОГО БИЗНЕСА!
WWW.PITER.COM
ПРЕДСТАВИТЕЛЬСТВА ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР»
предлагают эксклюзивный ассортимент компьютерной, медицинской,
психологической, экономической и популярной литературы
РОССИЯ
м. «Павелецкая», 1-й Кожевнический переулок, д. 10; тел./факс (495) 234-38-15
255-70-67, 255-70-68; e-mail: sales@piter.msk.ru
Москва
Санкт-Петербург м. «Выборгская», Б. Сампсониевский пр., д. 29а;
тел./факс (812) 703-73-73,703-73-72; e-mail: sales@piter.com
Воронеж Ленинский пр., д. 169; тел./факс (4732) 39-43-62,39-61 -70;
e-mail: pitervm@comch.ru
Екатеринбург ул. 8 Марта, д. 2676, офис 202;
тел./факс (343) 256-34-37,256-34-28; e-mail: piter-ural@isnet.ru
Нижний Новгород ул. Совхозная, д. 13; тел. (8312) 41-27-31;
e-mail: office@nnov.piter.com
Новосибирск ул. Немировича-Данченко, д. 104, офис 502;
тел./факс (383) 211-93-18, 211-27-18,314-23-89; e-mail: office@nsk.piter.com
Ростов-на-Дону
Самара
ул. Ульяновская, д. 26; тел. (8632) 69-91-22,69-91 -30;
e-mail: piter-ug@rostov.piter.com
ул. Молодогвардейская, д. 33, литер А2, офис 225; тел. (846) 277-89-79;
e-mail: pitvolga@samtel.ru
УКРАИНА
Харьков
Киев
ул. Суздальские ряды, д. 12, офис 10-11; тел./факс (1038057) 712-27-05,751 -10-02;
e-mail: piter@kharkov.piter.com
пр. Московский, д. 6, кор. 1, офис 33; тел./факс (1038044) 490-35-68,490-35-69;
e-mail: office@ldev.piter.com
БЕЛАРУСЬ
Минск
/w
^
ул. Притыцкого, д. 34, офис 2; тел./факс (1037517) 201-48-79, 201-48-81;
e-mail: office@mirsk.piter.com
Ищем зарубежных партнеров или посредников, имеющих выход на зарубежный рынок.
Телефон для связи: (812) 703-73-73.
E-mail: grigorian@piter.com
Издательский дом «Питер*» приглашает к сотрудничеству авторов.
Обращайтесь по телефонам: Санкт-Петербург — (812) 703-73-72,
Москва - (495) 974-34-50.
0 х-
Заказ книг для вузов и библиотек: (812) 703-73-73.
Специальное предложение - e-mail: kozin@piter.com
£
0
'
пзалтЕПЬСкпһ пом
WWW.PITER.COM
УВАЖАЕМЫЕ ГОСПОДА!
ІИГИ ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР
ВЫ МОЖЕТЕ ПРИОБРЕСТИ
ОПТОМ И В РОЗНИЦУ
НАШИХ РЕГИОНАЛЬНЫХ ПАРТНЕРОВ
Башкортостан
Уфа, «Азия», ул. Гоголя, д. 36, офис 5,
тел./факс (3472) 50-39-00, 51-85-44.
E-mail: asiaufa@ufanet.ru
Красноярск, «Книжныи мир»,
тел./факс (3912) 27-39-71.
E-mail: book-world@public.krasnet.ru
Дальний Восток
Владивосток, «Приморский торговый дом книги»,
тел./факс (4232) 23-82-12.
E-mail: bookbase@mail.primorye.ru
Нижневартовск, «Дом книги»,
тел. (3466) 23-27-14, факс 23-59-50.
E-mail: book@nvartovsk.wsnet.ru
Хабаровск, «Мире»,
тел. (4212) 30-54-47, факс 22-73-30.
E-mail: sale_book@bookmirs.khv.ru
Новосибирск, «Топ-книга»,
тел. (3832) 36-10-26, факс 36-10-27.
E-mail: office@top-knip.ru
http://www.top-kniga.ru
Хабаровск, «Книжный мир»,
тел. (4212) 32-85-51, факс 32-82-50.
E-mail: postmaster@worldbooks.kht.ru
Тюмень, «Друг»,
тел./факс (3452) 21-34-82.
E-mail: drug@tyumen.ru
Европейские регионы России
Архангельск, «Дом книги»,
тел. (8182) 65-41-34, факс 65-41-34.
E-mail: book@atnet.ru
Тюмень, «Фолиант»,
тел. (3452) 27-36-06, факс 27-36-11.
E-mail: foliant@tyumen.ru
Калининград, «Вестер»,
тел./факс (0112) 21-56-28, 21-62-07.
E-mail: nshibkova@vester.ru
http://www.vester.ru
Челябинск, ТД «Эврика», ул. Барбюса, д. 61,
тел./факс (3512) 52-49-23.
E-mail:evrika@chel.sumet.ru
Tатарстан
Северный Кавказ
Ессентуки, «Россы», ул. Октябрьская, 424,
тел./факс (87934) 6-93-09.
E-mail: rossy@kmw.ru
Казань, «Тайс»,
тел. (8432) 72-34-55, факс 72-27-82.
E-mail: tais@bancorp.ru
Урал
Сибирь
Иркутск, «ПродаЛитЪ»,
тел. (3952) 59-13-70, факс 51-30-70.
E-mail: prodalit@irk.ru
http://www.prodalit.irk.ru
Иркутск, «Антей-книга»,
тел./факс (3952) 33-42-47.
E-mail: antey@irk.ru
Екатеринбург, магазин № 14,
ул. Челюскинцев, д 23,
тел./факс (3432) 53-24-90.
E-mail: gvardia@mail.ur.ru
Екатеринбург, «Валео-книга»,
ул. Ключевская, д. 5,
,
тел./факс (3432) 42-56-00.
E-mail: valeo@etel.ru
Нина Комолова
УЧЕБНЫЙ КУРС
Если вы хотите создать свою собственную страницу в Интернете
приобретите эту книгу. Здесь вы найдете множество примеров уже
созданных веб-страничек. Вы узнаете, как разместить текст
и графику на веб-странице и как сделать ее красивой,
как опубликовать свой веб-сайт, как подготовить изображение
для размещения в Интернете, и многе другое.
С^ППТЕР
Заказ книг:
197198, Санкт-Петербург, а/я 619, тел.: (812) 703-73-74, postbook@piter.com
61093, Харьков-93, а/я 9130, тел.: (057) 712-27-05, piter@kharkov.piter.com
www.piter.com — вся информация о книгах
Документ
Категория
Без категории
Просмотров
1
Размер файла
26 585 Кб
Теги
3581, html, komolova
1/--страниц
Пожаловаться на содержимое документа