А. П. Алексеев
«солон»
Введение
Web-дизайн
1 1	/
/ z Учебное пособие
HTML, JavaScript, Adobe Photoshop
Для студентов и преподавателей
Для технических вузов
Теория, практика, тест
Обучение под музыку
Компакт-диск с примерами и бонусом
ISBN 978-5-91359-033-6
9
785913
Оценка «Отлично»!

Серия «Библиотека студента»
А. П. Алексеев
ВВЕДЕНИЕ
В WEB-ДИЗАЙН
Рекомендовано УМО по университетскому политехническому
образованию для студентов высших учебных заведении,
обучающихся по специальности 230105 «Программное
обеспечение вычислительной техники
и автоматизированных систем»
Москва
СОЛОН-ПРЕСС
2008
УДК 621.396.218
ББК 32.884.1
А47
Алексеев А. П.
А47 Введение в Web-дизайн: учебное пособие. — М.: СОЛОН-
ПРЕСС, 2008. — 192 с.: ил. — (Серия «Библиотека студента»).
ISBN 978-5-91359-033-6
Пособие может использоваться для стационарного и дистанционного обуче-
ния при изучении следующих дисциплин: Программирование на языке высокого
уровня. Человеко-машинное взаимодействие, Объектно-ориентированное про-
граммирование.
Основное внимание в пособии уделено языку программирования HTML,
технологии CSS, языку программирования JavaScript, графическому редактору
Adobe Photoshop, технологии мультимедиа.
К учебному пособию прилагается электронный учебник на компакт-диске, ко-
торый содержит теоретический материал, примеры реализации рахтичных задач
(учебный сайт) и практическую часть (задания, контрольные вопросы и методи-
ческие указания на выполнение лабораторных работ). Кроме того, на диске на-
ходится тестирующая программа, с помощью которой преподаватель может бы-
стро и объективно оценить степень усвоения материала.
Любопытной особенностью электронного учебника является то, что каждый
раздел сопровождается спокойной инструментальной музыкой, создающей хоро-
шее настроение.
Данное учебное пособие предназначено для студентов специальности 220400
(230105) — Программное обеспечение вычислительной техники и автоматизиро-
ванных систем. Наличие электронного учебника позволяет педагогам просто ре-
шить проблему тиражирования методических указаний.
Книга незаменима для всех начинающих изучать Web-дизайн.
КНИГА - ПОЧТОЙ
Книги издательства «СОЛОН-ПРЕСС» можно заказать наложенным платежом (оплата при
получении) по фиксированной цснс.Эпказ оформляется одним из двух способов:
1.	Послать открытку или письмо по адресу: 123242, Москва, а/я 20.
2.О	формить заказ можно ни сайте www.solon-prcss.ru в разделе «Книга — почтой».
3.З	аказать книги по телефону (495) 254-44-10, (495) 252-36-96.
Бесплатно высылается каталог издательства по почте. Для этого высылайте конверт с мар-
кой по адресу, указанному в п. 1.
При оформлении заказа следует правильно и полностью указать адрес, по которому должны
быть высланы книги, а также фамилию, имя и отчество получателя. Желательно дополни-
тельно указать свой телефон и адрес электронной почты.
Через Интернет вы можете в любое время получить свежий каталог издательства
«СОЛОН-ПРЕСС», считав его с ajipecawww.solon-prcss.ru/kat.doc
Интернет-магазин размещен на сайте www.solon-prcss.ru
По вопросам приобретения обращаться: ООО «АЛЬЯНС-КНИГА КТК»
Тел: (495) 258-91-94, 258-91-95, www.alians-kmga.ru
Сайт издательства «СОЛОН-ПРЕСС»' www.solon-press.ru
E-mail: solon-avtor@coba.ru
ISBN 978-5-91359-033-6
© А. П. Алексеев, 2008
© Обложка «СОЛОН ПРЕСС», 2008
Введение
3
Книга посвящается моей
любимой внучке - Алисе
Введение
Данное учебное пособие предназначено для дистанционного обуче-
ния студентов специальности 220400 (Программное обеспечение вычисли-
тельной техники и автоматизированных систем). Пособие может использо-
ваться при изучении следующих дисциплин: Программирование на языке
высокого уровня, Человеко-машинное взаимодействие, Сети и телекоммуни-
кации, Объектно-ориентированное программирование. Объем учебного по-
собия рассчитан на 18 часов теоретических и 24 часа практических занятий.
Ограниченный объем часов нс позволяет в деталях изучить серверные техно-
логии Web-дизайна. Кроме того, сделанный в учебном пособии акцент на
изучении клиентских технологий объясняется тем, что при дистанционном
обучении у студентов, как правило, ног возможности свободно работать с
серверами, использующими технологии CGI, ASP, SSI. По этой же причине в
пособии не рассматриваются языки программирования PHP, Peri, Java.
Предполагается, что студенты, изучающие данную дисциплину, уже
освоили Информатику, Информационные технологии и Вычислительные
сети и сисгемы телекоммуникаций.
Основное внимание в пособии уделено языку программирования
HTML, технологии CSS, языку программирования JavaScript, графическому
редактору Adobe Photoshop, технологиям мультимедиа. Приведенные в посо-
бии материалы целесообразно изучать в следующей последовательности:
-	изучить теоретический материал (раздел "Книга”);
-	ознакомиться с "Учебным сайтом" и провести эксперименты по ос-
воению описанных приемов дизайна;
-	самостоятельно выполнить задания для лабораторных работ (раз-
дел "Практика”);
-	ответить на контрольные вопросы (пройти тест).
Результаты выполнения лабораторных работ ("Контрольный сайт")
представляются преподавателю в виде сайта, который содержит отчет по
всем работам. Сайт может быть переправлен преподавателю по электронной
почте, либо размещен в Internet. В последнем случае преподавателю сообща-
ется лишь доменный адрес (для проверки выполненной работы).
4
Введение
Учебное пособие содержит три крупные достаточно самостоятель-
ные части. Первая часть называется "Книгой". Она содержит теоретический
материал, посвященный Web-дизайну. Вторая часть учебного пособия -
"Учебный сайт" предназначена для изучения практических вопросов дизай-
на. Здесь демонстрируются приемы создания и оформления Web-страниц,
Изучать этот материал следует путем сравнения демонстрируемого на экране
эффекта с HTML-кодом, который вызвал этот эффект.
Третья часть учебного пособия - "Практика" содержит задания для
самостоятельной работы. Именно результаты выполнения заданий этого раз-
дела студенты представляют в качестве отчета по проделанной работе.
Разделы "Книга" и "Учебный сайт" написаны достаточно независимо
друг от друга. Приведенные материалы взаимно дополняют друг друга. По
этой причине эти части могут изучаться последовательно (вначале осваива-
ется теория, а затем - практика). Однако возможно и комбинированное шту-
дирование (изученный теоретический материал одного раздела сразу закреп-
ляется его практическим освоение*!). Обе части соединены перекрестными
гиперссылками, что позволяет обучаемым быстро переходить от теоретиче-
ских вопросов к практическим (и наоборот).
Для проведения экспериментов с "Учебным сайтом" нужно скопиро-
вать его с оптического диска (или скачать из Интернета) на жесткий диск и
произвести необходимые изменения кода HTML. Редактирование кода сле-
дует осуществлять с помощью Блокнота или одного из Web-редакторов, на-
пример, FrontPagc, HomeSite, Dreamweaver.
Материалы данного учебного пособия предназначены для просмотра
с помощью браузера, разработанного фирмой Microsoft (Internet Explorer 6.0).
В браузере должны быть включены все мультимедийные опции. Заметим,
что материалы тестировались также с помощью браузеров Opera 7.51 и Net-
scape 7.2.
В ряде случаев при работе с учебным пособием потребуется устано-
вить на свой компьютер дополнительное программное обеспечение, напри-
мер, графический редактор Adobe Photoshop, HTML-редактор HomeSite,
проигрыватель RealOne Player, проигрыватель Flash-файлов и т.д.
Разработанный учебный материал рассчитан на использовании
мультимедийного компьютера (должна быть установлена звуковая карта и
подключены акустические колонки или головные телефоны).
Изучение представленного в учебном пособии материала может со-
провождаться прослушиванием инструментальной музыки. Для многих раз-
делов учебного пособия подобраны соответствующие музыкальные произве-
дения в формате mid. На взгляд автора, инструментальная музыка повышает
концентрацию внимания, маскируя посторонние щумы.
Автор выражает искреннюю благодарность Ананьеву А., Антонову
Н., Горшковой Ю., Каморчсвой Ю., Климову П„ Князеву В., Скоромной О.,
Введение
5
Суховой Б, Орел П., Ромкину М. и многим другим студентам, которые по-
могли подобрать обширный материал, относящийся к Web-дизайну, провес-
ти тестирование материала, устранить многие недочеты.
© Раздел 10.3. Графика написан в соавторстве с Орловым В.В.
© В данном учебном пособии использованы кино- и фотоматериалы,
созданные автором - Алексеевым А.П.
© Работа выполнена по заказу факультета ВВО ПГАТИ (г. Самара),
декан - профессор Павловская Э.А.
Решением УМК от 26.01.2006 г. по специальности 220400 (230105)
данному учебному пособию присвоен гриф: "Рекомендовано УМО по уни-
верситетскому политехническому образованию для студентов высших учеб-
ных заведений, обучающихся по специальности 230105 -Программное обес-
печение вычислительной техники и автоматизированных систем".
6
Глобальные вычислительные сети
1.	Глобальные вычислительные сети
Глобальные сети (как и локальные) состоят из компьютеров, соеди-
ненных каналами связи. Глобальные вычислительные сети (ГВС) всего мира
объединены между собой с помощью Интернета.
Для работы в ГВС пользователю необходимо иметь соответствующее
аппаратное и программное обеспечение. В простейшем случае из аппаратных
средств нужно дополнительно установить модем, с помощью которого осу-
ществляется связь по телефонной линии (например, из квартиры). Заметим,
что современные ЭВМ оснащены сетевыми картами, и при подключении к
сети но выделенному каналу нс нужны дополнительные аппаратные средст-
ва.
Программное обеспечение делится на два класса:
программы-серверы, размещенные на том узле сети, который обслу-
живает компьютер пользователя;
программы-клиенты, которые находятся на компьютере пользователя
и пользуются услугами сервера.
Глобальные сети предоставляют пользователям разнообразные услуги.
ГВС позволяют работать с распределенными базами данных, обмениваться
письмами с помощью электронной почты, сообщениями с помощью теле-
конференций, беседовать в реальном масштабе времени, пересылать файлы и
т. д. Каждая услуга (иногда говорят: служба, сервис) работает по определен-
ным правилам (протоколам).
Для реализации каждой сетевой услуги требуются своя программа-
сервер и своя программа-клиент. Например, существуют почтовые серверы и
клиенты.
В то же время современные браузеры (программы-навигаторы, иссле-
дователи, обозреватели) постепенно берут на себя функции нескольких от-
дельных служб глобальной сети и становятся "универсальными" клиентами.
Термин "сервер" имеет второе значение.
Сервером называют также и компьютер, на котором установлены про-
граммы-серверы. На одном компьютере-сервере могут работать сразу не-
сколько программ-серверов. Чаще всего мы будем понимать под терминов
"сервер" некий компьютер.
Глобальная ссгь Интернет представляет собой совокупность узлов,
содержащих коммутационное оборудование и серверы. Узлы объединяются
между собой каналами связи. Каждый узел содержит один или несколько
мощных компьютеров-серверов, которые работают чаще всего под управле-
нием операционной системы UNIX. Такой узел порой называют хостом.
Управляет узлом его собственник - организация, которая называется провай-
дером (от англ, provide - обеспечивать) или поставщиком услуг Интернета. К
узлам подключаются пользователи - локальные вычислительные сети и от-
Глобальные вычислительные сети
7
дельные компьютеры-клиенты. Среди наиболее известных провайдеров Рос-
сии можно выделить: GlasNct, "Relcom", "Демос", Sovam Teleport, Sprint-
Россия. В США крупнейшими провайдерами считаются CompuServe и
AmericaOnLinc (AOL). Провайдеров можно условно разделить па междуна-
родных, национальных и региональных. В России национальными провайде-
рами (их иногда называют первичными провайдерами) являются, например,
GlasNet, "Relcom", "Демос". К первичным провайдерам подключаются ре-
гиональные (вторичные) провайдеры.
Примерная схема соединений показана на рисунке, из которого видно,
что компьютеры пользователей могут подключаться к глобальной сети, как
через ЛВС, так и непосредственно подсоединяться к любому провайдеру.
На рисунке приняты следующие обозначения:
М - международный провайдер
Н - национальный провайдер
Р - региональный провайдер
8
Глобальные вычислительные сета
ЛВС - локальная вычислительная сеть
ПС - прокси-сервер
III - шлюз
Зср - зеркало
Б - брандмауэр
К - компьютер
Обсудим некоторые часзоиспользусмыс термины .
Зеркало - сервер, который являсгся копией другого популярного, но
(как правило) далеко расположенного сервера. Зеркало используется для
снижения нагрузки в глобальной сети и повышения скорости передачи ин-
формации. Содержимое зеркала периодически обновляется. Если, например,
пользователю компьютера 22111 требуется получить информацию с сервера
HI 1, то он се получает с близко расположенного зеркала Зср1. При этом со-
держимое зеркала практически совпадает с содержимым сервера HI 1.
Прокси-сервер - компьютер, который используется для снижения на-
грузки в сети и повышения быстродействия. На прокси-сервере непродолжи-
тельное время хранится информация, к которой пользователи проявляют по-
вышенный интерес. Если какой-либо пользователь недавно просматривал
Web-страницу, которую решил посмотреть второй пользователь этой же ло-
кальной сети, то второму пользователю опа будет передана с прокси-сервера.
Внешне второму пользователю будет казаться, что установлена связь с пер-
воисточником информации. Предположим, что пользователь ЭВМ 1111 не-
давно получил файл с сервера Р421. Если эту же информацию пытается по-
лучить пользователь компьютера 1112, то она поступает с близко располо-
женного ПС1. Прокси-сервером может быть любая ЭВМ, на которую уста-
новлена программа прокси-сервер. Информация на прокси-сервере стирается
по мере угасания интереса к ней и заменяется новой, более актуальной.
Шлюз - программно-аппаратное средство, предназначенное для со-
единения двух разнородных сетей, работающих по разным правилам (прото-
колам).
Серьезной проблемой при работе в сети является защита информации
от несанкционированного доступа. По этой причине локальные сети банков,
оборонных предприятий, коммерческих фирм защищают от проникновения в
них со стороны Интернета. Для этих целей используют брандмауэр.
Брандмауэр - программно - аппаратное средство (межсетевой экран),
которое предотвращает несанкционированный доступ (вход) в защищаемую
сеть. Межсетевой экран контролирует все информационные потоки между
локальной и глобальной сетями, работая как некоторая "информационная
мембрана". Экран можно представлять себе как набор фильтров, анализи-
рующих проходящую через них информацию. На основе заложенных алго-
ритмов брандмауэр принимает решение: пропустить эту информацию или
отказать в ее пересылке. Кроме того, брандмауэр фиксирует вес незаконные
Глобальные вычислительные сети
9
попытки доступа к информации и сигнализирует о ситуациях, требующих
немедленной реакции (поднимает тревогу). Следует заметить, что Интернет -
подвижная, быстро изменяющаяся струю ура, конфигурация которой зависит
от множества факторов. Поэтому нарисовать достоверную схему соединения
множества узлов принципиально невозможно. Соединения могут быть са-
мыми разнообразными: региональные провайдеры могут соединяться между
собой, зеркала могут устанавливаться в любом месте, отдельные пользовате-
ли могут подключаться к любому провайдеру и т. д. Бурный рост услуг, пре-
доставляемых в Интернете, приводит к перегрузке узлов и каналов связи, что
снижает скорость и надежность передачи информации. При этом средства
телекоммуникаций развиваются крайне неравномерно и, в основном, они
появляются там, где государство и частные фирмы считают нужным вклады-
вать средства в их развитие.
Определение пути, по которому будет передано сообщение, осуществ-
ляется с помощью специального устройства - маршрутизатора.
Маршрутизатор (Router) - устройство, которое работает с несколькими
каналами, направляя в какой-нибудь из них очередной блок (пакет) данных.
Маршрутизатор выбирает канал по адресу, указанному в заголовке пришед-
шего сообщения (пакета). Для каждого поступающего пакета маршрутизатор
принимает индивидуальное решение о пути следования пакета к сети, в ко-
торой находится машина-адресат.
Процедура выбора пути передачи информации называется маршрути-
зацией. Проблема выбора маршрута осложняется тем, что географически
самый короткий путь не всегда является самым лучшим. Часто критерием
при выборе маршрута является время передачи данных по этому маршруту.
Оно зависит от пропускной способности каналов связи и интенсивности на-
грузки (трафика), которая может изменяться с течением времени. Некоторые
алгоритмы маршрутизации пытаются приспособиться к изменению нагрузки,
в то время как другие принимают решения на основе средних показателей за
длительное время. Выбор маршрута может осуществляться и по другим кри-
териям, например, надежности передачи информации. Между конечными
компьютерами может быть несколько десятков узлов, маршрутизаторов,
множество промежуточных физических сетей различных типов, но програм-
ма-клиент будет воспринимать этот конгломерат как единую физическую
сеть. Образно маршрутизатор можно сравнить с телевизионной камерой, ус-
тановленной на вертолете. С помощью такой камеры хорошо видны дороги и
потоки движущихся автомобилей. Такой общий вид позволяет выбрать води-
телю наиболее свободный и удобный (иногда обходной) путь движения
транспорта. Таким образом, протокол IP выполняет функции маршрутиза-
ции, выбирая нужный путь для передачи сообщения в паутине сетей. На ка-
ждом узле маршрутизатор определяет, в каком направлении передать посту-
пившее сообщение.
10
Глобальные вычислительные сети
Краткие итоги
Глобальные сети отличаются от локальных сетей значительно боль-
шей протяженностью, отсутствием единого владельца всех каналов связи,
которые связывают ГВС между собой.
Интернет - это совокупность множества глобальных сетей (сеть се-
тей).
Сервер - компьютер, который предоставляет услуги другому компью-
теру-клиенту.
Способы подключения к Internet
11
2.	Способы подключения к Internet
В зависимости от своих финансовых возможностей пользователь вы-
бирает одни из трех основных способов подключения к Интернет:
удаленный доступ по коммутируемой (временно созданной) телефон-
ной линии;
прямой доступ по выделенному (постоянному) каналу;
комбинированный (прием - по выделенному каналу, а передача - по
коммутируемому каналу).
Первый способ значительно дешевле, однако менее удобен. Для рабо-
ты в Интернет нужно предварительно дозвониться по телефону до узла про-
вайдера. Кроме того, при таком способе соединения будет невысокая ско-
рость обмена информацией и низкое качество связи (частые прерывания свя-
зи, многократные запросы на повторную передачу ошибочно принятой ин-
формации). По коммутируемой линии чаще всего работают в ночное время,
когда телефонные линии меньше "шумят". Коммутируемое соединение мо-
жет быть установлено с помощью сотового телефона. Эго осуществляется с
помощью, так называемого WAP-протокола (Wireless Application Protocol -
Протокол Беспроводных Приложений).
Соединение по выделенному каналу гораздо эффективнее, но и доро-
же, поэтому используется такой способ подключения в основном коллектив-
ными или состоятельными пользователями. В качестве выделенных каналов
могут использоваться телефонные, коаксиальные и оптические кабели, ра-
диорелейные и спутниковые каналы.
Существуют и более сложные (комбинированные) способы подклю-
чения к Интернет, например, система DirecPC (в России - ZakNet, HcliosNet и
"НТВ Интернет"). С ее помощью информация из Интернета поступает через
спутник (тарелка 21 дюйм), а в обратном направлении - по телефонной ли-
нии. Такой способ удобен потому, что пользователи преимущественно полу-
чают информацию из глобальной сети и значительно реже отправляют дан-
ные в сеть. Высокоскоростной спутниковый канал (400 Кбит/с) и низкоско-
ростной телефонный канал удовлетворяют таким требованиям. Другая спут-
никовая система - NctSat Direct обходится без проводного соединения. Не-
смотря на то, что данные передаются в обоих направлениях через спутник, из
Интернета к пользователю они идут намного быстрее. Скорость приема дан-
ных в системе NctSat Direct составляет 400 Кбит/с, а скорость передачи -
только 19,2 Кбит/с. Такие способы подключения удобно иепгътьзовать при
работе по протоколу FTP или с распределенными базами данных WWW, где
потоки информации асимметричны. В этих случаях пользователь в основном
получает информацию из сети и очень мало передает ее. Там же, где нужны
симметричные потоки информации, например для IP-телефонии, голосового
чата и видеоконференций, такие способы подключения не подходят.
12
Способы подключения к Internet
Краткие итоги
Коммутируемый канал создастся временно с помощью автоматиче-
ских телефонных станций.
Выделенный канал постоянно действующий. Для его создания между
провайдером и клиентом прокладывается, например, оптоволоконный или
коаксиальный кабель.
Спутниковый канал удобен в местах значительно удаленных от круп-
ных городов.
Коммутация каналов, сообщений и пакетов
13
3.	Коммутация каналов, сообщений и пакетов
По способу передачи информации сети делятся на сети коммутации
каналов, сети коммутации сообщений и сети коммутации пакетов.
При комму 1ации каналов образуется непосредственное (физическое)
соединение двух узлов. Например, маломощная ЭВМ кратковременно под-
ключается к мощной ЭВМ и при проведении расчетов работает как управ-
ляющая часть (терминал).
При коммутации сообщений информация передается порциями в виде
готовых документов (например, в виде телеграмм, писем или отчетов).
Очевидно, что на время передачи сообщения (а оно может быть очень
большим) канал связи становится недоступным для других пользователей.
Кроме того, надежность такого соединения невелика: неполадки одного из
многочисленных звеньев капала нарушают связь между компьютерами, и
сообщение теряется.
При коммутации пакетов обмен производится короткими порциями
фиксированной структуры и длины. Пакет - это часть сообщения. Малая
длина пакета предотвращает блокировку линий связи, нс позволяет одному
пользователю захватить на долгое время канал связи. При этом пользовате-
ли, подключившиеся к популярному серверу, поочередно получают неболь-
шую порцию информации (1500 байтов). Основные принципы коммутации
пакетов поддерживаются протоколом TCP/IP.
Протокол TCP (Transmission Control Protocol - протокол управления
передачей) разбивает исходное сообщение на несколько небольших фраг-
ментов - пакетов. Каждый пакет снабжается заголовком, который содержит
служебную информацию (адреса отправителя и получателя, идентификатор
сообщения, помер пакета в сообщении и т. п.). Протокол TCP как бы укла-
дывает каждый пакет в отдельный конверт.
Ответственность за доставку отдельного пакета по заданному адресу
несет IP-протокол (Internet Protocol).
Рассмотрим процесс доставки электронных пакетов. Сначала пакет
попадает на узел провайдера, где специальная программа, пользуясь табли-
цами маршрутизации, выбирает дальнейший маршрут следования. При этом
разные пакеты одного и того же сообщения могут дойти до адресата по раз-
ным маршрутам (путям), через разные узлы Интернета. Поэтому судьба кон-
кретного сообщения в известной степени не зависит от неполадок в отдель-
ных участках сети: при необходимости пакет может быть переправлен к цели
обходным путем.
Наконец, TCP-модуль адресата собирает поступающие пакеты и,
пользуясь служебной информацией, соединяет отдельные пакеты в целое
исходное сообщение. Каждый принятый пакет проверяется на целостность и
правильность принятой информации. Для этого в каждом пакете передается
14
Коммутация каналов, сообщений и пакетов
служебная информация - контрольная сумма. Недостающие или искаженные
фрагменты сообщения по запросу принимающей стороны пересылаются по-
вторно.
Все описанные процессы идут со скоростью, близкой к 300 000 км/с,
однако время доставки сообщения оказывается относительно такой скорости
большим: от нескольких секунд до нескольких часов.
Дело в том, что длина одного пакета обычно нс превышает 1500 байт
и одно сообщение может быть разбито на несколько сотен пакетов. Таким
образом, по каналам связи одновременно следуют, чередуясь друг с другом,
тысячи пакетов. При этом общее время передачи равномерно распределяется
между всеми пользователями.
Чем больше пользователей одновременно работают в Интернете, тем
медленнее доставляются сообщения каждому конкретному адресату. Кроме
того, случаются и "технические” задержки - перегрузка промежуточных
шлюзов и серверов, неполадки в линиях связи.
Краткие итоги
Коммутация пакетов делает Интернет демократичной сетью. Каждый
пользователь может получить свой квант информации в виде пакета.
Задержка пакетов при передаче практически не сказывается на работе
электронной почты, передаче файлов по протоколу FTP. Однако интернет-
телефония, интернет-радио и интсрнет-телевиденис весьма чувствительны к
этим задержкам.
Протоколы, службы, услуги
15
4.	Протоколы, службы, услуги
Глобальная сеть Интернет состоит из множества компьютеров, рабо-
тающих под управлением разных операционных систем, па разных аппарат-
ных платформах. Однако при обмене информацией все ЭВМ должны поль-
зоваться едиными правилами (соглашениями, протоколами) о способах пе-
редачи сообщений. Тогда любая ЭВМ будет в состоянии "понять" информа-
цию, полученную от любой другой ЭВМ.
Протокол - это правила (соглашения, стандарт) передачи информации
в сети.
Следует различать два типа протоколов Интернета:- базовые протоко-
лы, отвечающие за физическую пересылку электронных сообщений любого
типа между компьютерами Интернета (IP и TCP). Эти протоколы настолько
тесно связаны между собой, что чаще всего их обозначают единым термином
"протокол TCP/IP" - прикладные протоколы более высокого уровня, отве-
чающие за работу специализированных служб Интернета: протокол http (пе-
редача гипертекстовых сообщений), протокол ftp (передача файлов), прото-
кол telnet (удаленный доступ, дистанционное управление), протоколы элек-
тронной почты SMTP и POP 3 и т. д.
Компьютер нс может работать в Интернете, если на нем не установле-
на поддержка базовых протоколов TCP/IP. Однако на конкретном компьюте-
ре могут отсутствовать программы-клиенты, которые предназначены для
работы с каким-то прикладным протоколом. Например, может нс работать
электронная почта или новости (телеконференция).
Дадим краткую характеристику основным службам, которые функ-
ционируют в современной глобальной сети. Каждая служба (услуга) поддер-
живается своими правилами работы (протоколами).
FTP (File Transfer Protocol) - протокол передачи файлов. Дает возмож-
ность обмениваться файлами между компьютерами. Это один из самых
"древних" прикладных протоколов. Одна из первых потребностей пользова-
телей ЭВМ и программистов заключалась (и заключается) в обмене интерес-
ными программами и документами. Именно этим целям служит данный про-
токол. При обмене информацией по этому протоколу пользователи не видят
содержимое передаваемых файлов. Нередко передаваемые файлы бывают
заархивированными.
SMTP (Simple Mail Transfer Protocol) - этот протокол используется при
передаче электронной почты (E-mail) между компьютерами Интернета. Для
приема электронных сообщений (почты) используются протоколы РОРЗ.
IMAP. Последний протокол позволяет в письмах использовать гипертексто-
вые ссылки.
Usenet - распределенный дискуссионный клуб, телеконференции,
группы новостей (News). Услуга поддерживается протоколом NNTP (Net
16
Протоколы, службы, услуги
News Transfer Protocol). В отличие от электронной почты, клиент Usenet на-
правляет сообщение не индивидуальному адресату, а группе чаще всего не-
известных ему абонентов телеконференции. Все участники конференции
имеют равные права (за исключением модератора - ведущего данный раздел)
при обсуждении того или иного вопроса, поэтому каждый вправе свободно
высказываться по обсуждаемому вопросу. Каждая телеконференция посвя-
щена какой-либо теме (науке, искусству, спорту, отдыху и т. п.). По некото-
рым данным, ныне в Интернете насчитывается от 20 до 50 тысяч тем теле-
конференций. Обмен информацией происходит с временной задержкой, ко-
торая может достигать нескольких часов и даже дней. Телеконференция - это
как бы "плавающая" доска объявлений. Изменения, сделанные на одном сер-
вере новостей, передаются (переплывают) на все другие новостные серверы.
Чтобы обменяться новостями, серверы регулярно связываются между собой.
Если использовать метафору, то электронную почту можно сравнить
со способом передачи записок между Машенькой и Дубровским. У них было
известное только им двоим место нахождения дупла в дереве (адрес).
Остап Бендер, когда делал запись па вершине горы "Киса и Ося здесь
были", использовал принцип телеконференций: любой мог читать и писать в
этом месте.
Telnet - услуга Интернета, которая позволяет пользователю одного
компьютера подключиться к другому удаленному компьютеру и работать с
ним как на собственном компьютере (включая операции редактирования и
удаления). Этот протокол может быть использован, например, в таком слу-
чае. При возникновении неисправности клиент по телефону обращается к
соответствующей технической службе. Специалисты с помощью модема и
телефонной линии обследуют неисправную ЭВМ, дистанционно устанавли-
вают нужные драйверы, запускают на выполнение нужные программы и т. д.
С помощью этого протокола бухгалтер или банкир, находясь в командиров-
ке, может записать или удалить данные на компьютере, находящемся в дру-
гом городе. Эта услуга позволяет нс только управлять на большом расстоя-
нии другим компьютером, но и промышленным объектом (конвейером), на-
учной установкой (телескопом), бытовым прибором (видеомагнитофоном).
IRC (Internet Relay Chat) - чрезвычайно популярная служба Интернета.
IRC позволяет пользователям общаться друг с другом, подключившись к од-
ному серверу IRC. Беседа ведется в реальном времени путем набора своих ре-
плик на клавиатуре. В отличие от телеконференций, здесь реакция собеседни-
ка следует мгновенно, живо. Этот вид услуг порой называют чатом или "бол-
тушкой" и пользуется большой популярностью у студентов и молодых людей.
ICQ (произносится: "Ай Си Кыо") - Интернет-пейджер, который по-
зволяет вести двухсторонний обмен информацией в реальном масштабе вре-
мени. Существует большое число месснджеров подобного типа. Папример,
Miranda, MSN, PalTalk.
Протоколы, службы, услуги
17
Internet Phone (телефония) - быстро развивающийся новый вид услуг,
использующий принцип голосовой связи. Речь преобразуется в цифровой
код и передается по сети в виде обычных электронных пакетов. С помощью
данной услуги возможна передача голоса, видеоизображения, возможен об-
мен текстовыми сообщениями, совместное использование графического ре-
дактора, обмен файлами. Естественно, что ЭВМ должна иметь звуковую кар-
ту, микрофон, акустическую систему. Для передачи динамического изобра-
жения понадобится Web-камсра. Интернет-телефония позволяет организо-
вать голосовую почту, которая похожа на обычную электронную почту. Од-
нако полученные сообщения можно прослушать. Служба SMS способна пе-
ресылать по сети па сотовые телефоны короткие текстовые сообщения. Ин-
тернет-радио - служба, позволяющая прослушивать сотни радиостанций,
ведущих вещание в Интернете. Отличительной особенностью этой услуги
является возможность выбора радиостанций, ведущих передачу на опреде-
ленном языке. Радиостанции можно отобрать с учетом тематики вещания
(например, новости). Музыкальные радиостанции можно фильтровать по
музыкальным стилям (джаз, рок, церковная, классическая, музыка ретро и т.
д.). Численность радиостанций в Интернете непрерывно растет. В августе
1996 г. в Сети насчитывалось 178 станций, в декабре 1998 г. их стало 390. в
апреле 2000 г. - 3537, а в 2003 г. - 8000.
Интернет-телсвидсние - служба, позволяющая вести прием множества
телевизионных каналов. Распространение этой услуги пока ограничивается
малой пропускной способностью современных каналов связи.
WWW (World Wide Web - Всемирная Паутина) - это гипертекстовая
информационно-поисковая система в Интернете. Блоки данных WWW (стра-
ницы) размещаются па отдельных компьютерах, называемых WWW-
серверами (или Wcb-серверами) и принадлежащих отдельным организациям
или частным лицам. С помощью гипертекстовых ссылок, встроенных в до-
кументы WWW, пользователь может быстро переходить от одного докумен-
та к другому, от сайта к сайту, от сервера к серверу.
В основе WWW лежит протокол передачи гипертекстовых сообщений
HTTP (Hypertext Transfer Protocol), а сами страницы формируются с помо-
щью специального гипертекстового языка описания документов HTML (Hy-
pertext Markup Language). В основе распределенной базы данных WWW ле-
жит гипертекстовая технология.
Краткие итоги
Интернет предоставляет пользователю множество услуг, каждая из
которых реализуется по своим правилам (протоколам).
Для Web-дизайна птЗйббЖцйшц^1Ц$|рр<?-уРредстгвляет протокол гипер-
текстовых связей HTTP. | экономь л и информатики
| библиотека
18
Браузеры
5.	Браузеры
Браузерами называются программы, которые считывают данные (до-
кументы, страницы) с удаленных (далеко расположенных) компьютеров-
серверов, а затем демонстрируют их на компьютерах-клиентах.
Термин "браузер" происходит от английского слова browse, означаю-
щего "просматривать книгу". Русскими словами, которые могли бы заменить
этот термин, являются: навигатор, просмотрщик, исследователь, средство
доступа.
Первоначально браузеры предназначались для обработки информации
по протоколу http - просмотр гипертекстовых документов во Всемирной
Паутине (World Wide Web - WWW). Однако в настоящее время браузеры все
больше становятся универсальными клиентами, берущими на себя роль про-
грамм, получающих файлы, почту, новости, ведущих видеоконференции,
прием радиопередач, трансляцию телефонных разговоров и т. д.
Число различных типов браузеров велико. Наибольшее распростране-
ние имеют Internet Explorer (IE) и Netscape Navigator (NN). Большинство
пользователей (90%) в настоящее время работают с IE. Однако еще в 1996 г.
все было наоборот: 90% фирм использовали NN. Изменение соотношения в
использовании браузеров происходило в условиях жесточайшей конкурен-
ции, и процесс перераспределения рынка получил название "война браузе-
ров". Тонкий коммерческий ход фирмы Microsoft (обязательное включение
IE в состав операционной системы Windows) заставил многих пользователей
автоматически перейти к работе с этим браузером.
Первым текстовым браузером был LineModc, выпущенный в 1991 г.
По сравнению с современными навигаторами он чрезвычайно прост. Первым
браузером, который позволял просматривать нс только текстовые докумен-
ты, но и графические, был Mosaic. Он создан в 1993 г. Национальным цен-
тром по суперкомпьютерным приложениям (NSCA). Разработчиком Mosaic
был Марк Андрссссн (Mark Andrccscn). Именно этот браузер послужил ката-
лизатором стремительного развития WWW.
Рассмотрим браузер IE6.0, внешний вид которого показан на рисунке.
Браузеры
19
Вверху окна располагается строка заголовка. Ниже размещается Глав-
ное меню браузера. Затем идет Панель инс грументов. В самом низу видимо-
го окна видна Строка состояния.
Браузер IE6.0 обеспечивает работу с локальными дисками компьютера
(без выхода в Интсрнсг), позволяет просматривать документы, расположен-
ные на других ЭВМ одной локальной сети, работать в глобальной сети с до-
кументами по протоколу http (сервис WWW), с файлами по протоколу FTP,
вести прием радиостанций, вещающих в сети Интернета. Прямо из браузера
можно вызывать программу Outlook Express, с помощью которой осуществ-
ляется обмен почтой и новостями. Главное меню браузера содержит пункты.
Файл, Правка, Вид, Избранное, Сервис, Справка.
С помощью пункта Файл можно сохранить, отпечатать или отправить
по почте текущую страницу, открыть новое окно браузера, перевести его в
автономный режим работы. Пункт Правка позволяет выделять, копировать
фрагменты просматриваемого документа, искать нужное слово на странице.
Пункт Вид используется для настройки внешнего вида браузера, смены
шрифтов, представления документа в виде прогр \ мы, написанной на языке
HTML. Пункт Избранное отвечает за сохранение ссылок на полюбившиеся
страницы и подписку па новости. Пункт Сервис используется для запуска
20
Браузеры
почтового клиента. Изменяя свойства обозревателя, например, можно от-
ключить все мультимедийные приложения. При необходимости получения
помощи или сведений о браузере нужно использовать пункт Справка.
На панель инструментов вынесены кнопки, которые запускают наибо-
лее часто используемые команды: Назад, Вперед, Остановить, Обновить,
Домой, Поиск, Избранное, Медиа, Журнал, Почта, Размер, Печать, Во весь
экран и др. Заметим, что состав и расположение кнопок могут быть измене-
ны пользователем.
Кнопка Назад используется в том случае, когда вслед за последова-
тельным просмотром с помощью гиперссылок нескольких страниц нужно
вернуться к предыдущим страницам. Кнопка Вперед отменяет действие
кнопки Назад. Порой при загрузке страницы для экономии времени требует-
ся остановить ее считывание (ошибочно набран адрес, нужная информация
уже видна, идет загрузка слишком большой страницы). В этом случае ис-
пользуется кнопка Остановить.
Документы, получаемые из Интернета, некоторое время хранятся на
жестком диске клиента (говорят: кэшируются). Бывает, что информация на
просматриваемой странице меняется достаточно часто (например, показание
счетчика числа посетителей или текущие новости). Чтобы получить самую
свежую информацию из сети, нужно нажать кнопку Обновить.
У каждого пользователя есть любимая страница, с которой он чаще
всего работает (как правило, это поисковые системы или порталы). Щелчок
по кнопке Домой загружает любимую страницу, адрес которой был предва-
рительно указан браузеру.
С помощью кнопки Поиск можно получить доступ к многочисленным
информационно-поисковым службам. Кнопка Избранное позволяет исполь-
зовать заранее подготовленные ссылки на интересные места в Интернете, а
также самостоятельно создавать ссылки на понравившиеся страницы. С по-
мощью кнопки Журнал можно посмотреть, какие сайты пользователь посе-
щал в последнее время. Для начала работы с почтой и новостями использу-
ется кнопка Почта.
Ниже Главного меню и Панели инструментов располагаются Адрес-
ная строка и Панель ссылок. Адресная строка служит для ввода адреса Wcb-
страницы, сайта или сервера (URL). С помощью Адресной строки можно
искать информацию, набрав команды find, go, или ? и слово, которое нужно
найти. Можно поступить совсем просто: набрать в Адресной строке ключе-
вое слово и для начала поиска нажать клавишу Enter. Панель ссылок содер-
жит ярлыки наиболее важных, по мнению разработчиков, Web-узлов (на-
пример, www.microsoft.com).
Многие узлы Интернета защищены от несанкционированного про-
смотра проходящей информации. Такие узлы называют "безопасными", а
IE6.0 поддерживает протоколы безопасности, используемые на таких узлах.
Браузеры
При посещении защищенной Web-страницы она автоматически посылает
браузеру свой сертификат, а в строке состояния обозревателя Intel пег Ex-
plorer отображается значок замка. Сертификатом называют документ, iадап-
тирующий подлинность какого-либо лица или безопасное гь просматривае
мого Web-узла (сайта). Браузер Internet Explorer по шоляст кош ро тиро тать
содержание материалов, размещенных в Интернет, и при нсобхо тимост и
ограничить доступ к ним. 11ослс включения ограничения тост yi а можно
просматривать только тот материал, содержание которого соответствие ус-
тановленным требованиям. Этим исключается получение материала, содер-
жащего нснормат ивяую лексику, описание насилия, порнографию и т. л.
Ближайшим конкурентом фирмы Microsoft является фирма America
Online, которая в 1999 г. приобрела корпорацию Netscape Communications, а
значит, и авторские права на разработку браузеров с именем Netscape Па
рисунке показан пользовательский интерфейс браузера Netscape 7 2.
& Wcbomcr Set UpPagr Hcbciptt
J У* iX** £0	look Wrdw* tkb
№
...... ...  .. ....................................................... .......
v Cwbcmce .



J Netscape* 7.2
You haw wcttnUl)	jHed Netxape 1 2
25 Netscape
Inlornel Service
Get unlimited Internet access from Netscape
Netscape tniemet
Число клиентских прщрамм про тол ^a^. < ко орымг умоет работ a it
браузер, продолжает увеличиваться. Появился ктиент Instant Mos.» ос ( ММ),
позволяющий устанавливать мгновенную связь с пол1зова|С см. комш ютер
>2
Браузеры
соторого в данный момент также подключен к сети (режим online). Подоб-
ное идеи широко используются в Интсрнет-псйджерах ICQ, Odigo, PalTalk и
ip. В составе Internet Explorer аналогичную функцию выполняет MSN Mes-
;enger.
Два рассмотренных браузера далеко опередили по распространенно-
сти другие программы. Тем нс менее, существуют и другие браузеры. Пред-
ставляет определенный интерес браузер Opera 9.02 На следующем рисунке
показан его внешний вид.
Браузер Opera был разработан в 1994 г. группой исследователей, кото-
рые работали в Норвежской телекоммуникационной компании (Norwegian
Felecommunication company - Telenor). Авторские права на браузер сейчас
принадлежат компании Opera Software AS, которая находится в Осло (Нор-
зегия).
Данный браузер характеризуется высокой скоростью работы. В брау-
зере Opera удобная система поиска информации, прямо из программы можно
Браузеры
23
вызвать несколько поисковых систем. В закладках браузера имеется большая
коллекция ссылок на множество популярных Web-узлов.
При знакомстве с материалами данного раздела нельзя не заметить
тенденцию дальнейшего развития средств, предназначенных для ведения
коммерции, бизнеса, выполнения покупок в виртуальных магазинах. Вес
большее внимание разработчиками уделяется безопасности передачи ком-
мерческой и конфиденциальной информации. Для повышения удобства ра-
боты в Сети пользователю предоставляются в распоряжение разнообразные
средства коммуникаций: электронная почта, телефонная связь, видеосвязь,
радиосвязь, пейджеры. В состав браузеров включают переводчики, календа-
ри. Браузеры дополняются проигрывателями аудио- и видеофайлов, они по-
зволяют работать с современными информационными технологиями (вирту-
альная реальность). Большинство браузеров предоставляют средства для на-
стройки пользовательского интерфейса под запросы конкретного человека (в
том числе смена кнопок, оболочек - skins). Существуют средства ограниче-
ния доступа к информации, которая порочит достоинство человека. Это дает
возможность детям работать в Интернете без наблюдения взрослых.
Справка
Порой используют другое написание термина "браузер" - "броузер".
По состоянию па сентябрь 2007 г. поисковая система Rambler находила око-
ло 28,1 миллионов ссылок на документы, содержащие термин "браузер", и
примерно 2,47 миллионов ссылок на документы с термином "броузер". Тер-
мин "browser" содержали 4,14 миллионов документов.
Краткие итоги
Наибольшей популярностью в настоящее время обладают три браузе-
ра: MS Internet Explorer, Netscape Navigator и Opera
Популярность браузера Opera объясняется его высоким быстродейст-
вием и возможностью бесплатного использования.
Netscape Navigator был одним из первых графических браузеров, по-
этому исторически ряд пользователей по-прежнему отдают ему свои пред-
почтения.
Браузер MS Internet Explorer получил наибольшее распространение за
счет агрессивной рекламной политики фирмы Microsoft.
Эти браузеры по-разному отображают одну и ту же Web-страницу.
Интерпретаторы этих браузеров поддерживают разные наборы функций
HTML, каскадных таблиц стилей CSS и Java-скриптов. Поэтому дизайнеру
необходимо проводить соответствующую корректировку созданного кода.
24
Поисковые системы и каталоги
6.	Поисковые системы и каталоги
Объем хранящейся в Интернете информации чрезвычайно велик. На
серверах сети хранится более 2 миллиардов Web-страниц. Пользователи ра-
зыскивают в Интернете не только текстовые документы, новости, но и фото-,
аудио-, видеоматериалы, товары, услуги, вакантные места работы и т.п. По-
иск информации в сети можно вести с помощью поисковых систем (ПС) и
каталогов. Мощные поисковые системы и каталоги являются сложными тех-
ническими комплексами, содержащими десятки быстродействующих ком-
пьютеров, обслуживание которых ведут сотни специалистов. Вначале рас-
смотрим принцип действия ПС, а затем - каталогов.
Поисковые системы иначе называют: поисковыми средствами, поис-
ковыми машинами, автоматическими индексами. Эквивалентными ино-
странными терминами являются: английский - Search Engines, немецкий -
Suchmaschincn, французский - Le systemc de prospection. На жаргоне сети ПС
иногда называют "искалками", поисковиками. Работа ПС основывается на
формировании запроса, по которому происходит отбор нужных документов
из распределенной базы данных, хранящейся на серверах в Интернете. За-
прос формируется с помощью ключевых слов (одного или нескольких). Ре-
зультаты поиска выдаются пользователю в виде списка адресов (гиперссы-
лок) и краткой аннотации к ним.
Ключевое слово - это лексическая единица, являющаяся существи-
тельным, прилагательным, глаголом, числительным, наречием или место-
имением естественного языка, которая в наибольшей степени отражает со-
держание всего искомого документа. При формировании запроса могул ис-
пользоваться не только отдельные ключевые слова, но и словосочетания,
состоящие из нескольких ключевых слов.
Запрос - это набор соединенных операторами ключевых слов, с помо-
щью которых поисковая система автоматически ведет поиск и отбор необхо-
димых документов. Другими словами, запрос - это инструкция (команда) для
ПС на поиск нужных документов.
Запросы бывают двух типов: простые и сложные (или расширенные,
advanced). Простые запросы состоят из отдельных ключевых слов или слово-
сочетаний. Сложные запросы, кроме ключевых слов, содержат логические и
другие операторы.
Поиск - это процедура отбора нужных документов, хранящихся в сети.
Поиск осуществляется либо автоматически с помощью ключевых слов, вво-
димых в ПС, либо путем последовательного ручного прохода по рубрикам в
каталогах. Поиск с помощью ключевых слов сводится к их вводу (формиро-
ванию запроса) в специальное поле Поиск и последующему нажатию кнопки
Найти. Кнопка Найти в разных ПС может называться Search, Find, Go. Go
Get it, Suchcn.
Поисковые системы и каталоги
25
Индексация - это процедура автоматического создания базы данных, в
которой хранятся ключевые слова, аннотации документов и доменные адре-
са, по которым размещены эти документы. В базе данных каждому докумен-
ту ставится в соответствие свой набор ключевых слов и доменных адресов.
Когда идет обслуживание конкретного запроса па поиск нужной ин-
формации, то ПС сравнивает ключевые слова, введенные пользователем, с
ключевыми словами, полученными в процессе индексации и хранящимися в
базе данных ПС. При совпадении этих слов пользователю выдается домен-
ный адрес данного документа, т. с. указывается место его хранения в сети.
Процедура поиска по ключевым словам очень напоминает работу с обычной
книгой, в которой есть алфавитный указатель. Читатель с помощью алфавит-
ного указателя определяет номера страниц книги, на которых присутствует
нужное ключевое слово. Этим ускоряется поиск нужной информации. В дан-
ном случае номер страницы книги - это как бы доменный адрес Web-
страницы. Индексация документов, размещенных на различных серверах,
производится поисковыми системами автоматически с помощью специаль-
ных программ - роботов (Robots). Другие названия этих программ - пауки
(Spiders) или черви (Worms).
Робот (паук, червь) - программа, которая автоматически периодически
’'посещает" сайты и индексирует их (т. е. собирает сведения о их содержи-
мом и местоположении). Назначение роботов очевидно: эти программы по-
стоянно "осматривают", сканируют сеть, запоминают, что где лежит, чтобы в
нужный момент времени показать пользователю точное место хранения до-
кумента (т. с. его доменный адрес). Этим объясняется потрясающе высокая
скорость поиска нужной информации. Фактически роботы начинают поиск
задолго до обслуживания конкретного запроса.
Тенденция развития ПС такова, что наиболее быстродействующие ПС
стремятся произвести индексацию всего документа, а не только его названия
и первых предложений текста. Наиболее совершенные роботы при индекса-
ции сканируют нс только главную (домашнюю) страницу, но и по гипер-
ссылкам заходят вглубь сайта (узла). Ограничивается такая идеалистическая
картина индексации лишь низкой скоростью работы современных ПС и бы-
стродействием всей сети. Предварительная индексация хранящихся в сети
документов позволяет впоследствии за несколько секунд обслуживания за-
проса обработать (отсортировать) гигабайты разнообразной информации. С
помощью механизма предварительной индексации можно получить хороший
результат поиска в случаях, когда удается точно сформировать запрос с по-
мощью небольшого числа ключевых слов. В иных случаях пользователь ли-
бо получит большое число ссылок (иногда говорят, линков, т. е. связей), ко-
торые являются лишь "информационным шумом", либо вовсе не удастся
найти необходимый документ.
26
Поисковые системы и каталоги
Значительно повышают избирательность поиска фильтры, которыми
снабжаются поисковые системы. Фильтры позволяют:
-	ограничить список отбираемых документов с помощью логических
операторов
(выполнить так называемый сложный поиск);
-	ограничить пространство поиска типом протокола, с помощью кото-
рого был создан документ
(поиск на Web-сайтах или в телеконференциях);
-	ограничить отбираемый материал временным отрезком, определен-
ными датами создания
разыскиваемого документа (например, между 1 сентября 2005 г. и 20
сентября 2007 г.);
-	отобрать документы, составленные только на определенном языке
(русский, английский);
-	ограничить отбор документов территорией размещения серверов
(например, только Европа);
-	ограничить поиск определенной частью документа (заголовок, до-
менный адрес);
-	отобрать документы, которые содержат фразу с заданным порядком
расположения ключевых слов.
Поиск русских документов в сети дополнительно осложняется осо-
бенностями национальной грамматики. В русском языке (в отличие от анг-
лийского языка) необходимо учитывать падежные окончания ключевых
слов. Наибольшей популярностью в русскоязычной части Интернета поль-
зуются поисковые системы Rambler ( www.ramblcr.ru). Апорт (www.aport.ru)
и Mndcx (www.yandcx.ni).
Русскоязычные ПС позволяют отбрасывать окончания ключевых слов
и заменять их метасимволами и "?". При этом на запрос "самар*" будут
найдены документы, содержащие слова: Самара, Самары, самарский, самар-
ская и т. п. Поисковая система Aport использует принципы искусственного
интеллекта. Она обрабатывает запрос таким образом, что подбирает синони-
мы введенным ключевым словам и автоматически решает проблему падеж-
ных окончаний.
При поиске информации ПС может делать две ошибки: пропускать (нс
отбирать) нужные пользователю документы и, наоборот, отбирать (присы
лать) посторонние документы (мусор, информационный шум). Эти ошибки,
совершаемые автоматическими ПС, описываются терминами "избиратель-
ность" и "чувствительность".
Заметим, что в приведенной фразе есть некоторая терминологическая
неточность: ПС отбирают нс документы, а лишь гиперссылки на них. С по-
мощью полученных ссылок пользователь просматривает или загружает на
Поисковые системы и каталоги
27
собственный компьютер понравившийся ему документ. Однако методически
удобнее говорить о несоответствии запросу документа, а нс гиперссылки.
Избирательность - способность ПС отбирать документы, соответст-
вующие запросу, не включая лишних документов. Качество избирательности
характеризуется числом ошибок первого рода - число отобранных докумен-
тов, нс соответствующих запросу. Чем выше избирательность, тем меньше
посторонних документов попадает к пользователю. Избирательность можно
изменять (регулировать) с помощью логических операторов (фильтров).
Чувствительность - способность ПС отбирать документы, соответст-
вующие запросу, не пропуская нужных документов. Чувствительность ха-
рактеризуется числом ошибок второго рода - числом пропусков нужных до-
кументов. Чем выше чувствительность, тем меньше вероятность пропуска
нужного документа.
Релевантность - степень (мера) соответствия (адекватности) найденно-
го в процессе поиска документа сделанному запросу.
Уточнить запрос (говорят: отфильтровать информацию) позволяют
логические операторы OR, AND, NOT. Использование логического операто-
ра AND (И) приводит к отбору документов, которые обязательно содержат
все перечисленные в запросе ключевые слова, соединенные этим операто-
ром. Оператор NOT (НЕТ) позволяет исключить документы, которые содер-
жат ключевое слово, указанное после этого оператора. С помощью оператора
NEAR (вблизи, рядом) пользователь может отбирать документы, в которых
ключевые слова, соединенные этим оператором, будут находиться поблизо-
сти друг от друга, а не в разных концах документа. Оператор FOLLOWED
BY позволяет выделять документы, в которых ключевые слова следуют друг
за другом в заданном порядке. Оператор ADJ отбирает документы, в которых
ключевые слова являются смежными (следуют одно за другим).
К сожалению, каждая ПС имеет собственный синтаксис запросов. По-
этому перед формированием расширенных запросов необходимо уточнить
правила использования логических и других операторов. В настоящее время
ведутся работы по унификации приемов работы на различных ПС.
Современные ПС становятся интеллектуальными. Используя принци-
пы искусственного интеллекта, они ранжируют (располагают) выводимый
список документов (ссылок на них) в зависимости от степени их релевантно-
сти. При этом ПС анализируют положение найденных ключевых слов в до-
кументе (заголовок или текст), число повторений ключевых слов, их взаим-
ное расположение в документе. Наиболее точно отобранные документы рас-
полагаются в начале списка найденных в процессе поиска докумен гов Для
ранжирования найденных документов используют следующие показатели.
Положение ключевого слова на странице (keyword prominence) - показатель,
определяющий, как близко к началу документа находится заданное ключевое
слово. Как правило, чем ближе к началу страницы располагается ключевое
28
Поисковые системы и каталоги
слово, тем точнее документ соответствует запросу. Частота ключевого слова
(keyword frequency) - показатель, учитывающий абсолютную частоту' исполь-
зования ключевых слов (т. с. сколько раз встречается данное ключевое слово
па странице). Наибольший "вес" при ранжировании документов имеют сло-
ва, расположенные в заголовке Web-страницы (так называемый титул, он
выделяется тегами title). Именно этот заголовок отображается в строке заго-
ловка браузера при просмотре страницы, и приведенные там слова имеют
наибольшую ценность (вес) для ПС. Некоторые поисковые системы при
ранжировании учитывают индекс цитирования (link popularity) - количество
сайтов, которые ссылаются на данный сайт.
Не всякий запрос можно четко сформулировать с помощью небольшо-
го числа ключевых слов. Поэтому, кроме индексного механизма, использу-
ются и другие механизмы поиска и хранения информации в глобальной сети.
Как отмечалось ранее, поиск информации в Интернете можно производить с
помощью поисковых систем и каталогов. Другое нередко используемое на-
звание поисковых средств, построенных с помощью каталогов, - иерархиче-
ские ПС. Термин "иерархия" означает: расположение частей или элементов
целого в порядке от высшего к низшему. В данном случае правильнее гово-
рить: иерархия - это уточнение содержания документа от его общих характе-
ристик к частным характеристикам. Синонимами термина "каталог" являют-
ся слова: директория, рубрикатор. Каталоги представляют собой тематически
подобранные сетевые адреса, которые сопровождаются краткими коммента-
риями (аннотациями).
Каталоги появились самым естественным путем: пользователи отби-
рали для себя ссылки на любимые места в Интернете и составляли упорядо-
ченные тематические списки с детализацией каждого раздела (рубрики).
Именно так возник всемирно известный каталог Yahoo!, созданный студен-
тами Стэндфордского университета Дэвидом Фило и Джерри Янгом. В ката-
логах размещение информации ведется с помощью многоуровневой рубри-
кации, причем па каждом уровне происходит все большая детализация
(уточнение) сведений об искомом (хранящемся) документе. При этом каждая
последующая рубрика нс исключает свойств документа, определенных пре-
дыдущей рубрикой, а лишь уточняет их. Иначе говорят: рубрики находятся в
отношении соподчинения, иерархии. Еще говорят: используется принцип
последовательного уточнения.
Важным термином, характеризующим работу каталогов, является
рубрикация. Рубрикация - помещение документа в соответствующий раздсп
(подраздел, рубрику), которое, как правило, производится вручную специа-
листами (модераторами, аналитиками) или авторами разработанных доку-
ментов. Разработчиков Wcb-страниц иногда называют владельцами ресурсов
или Wcb-дизайнерами. Процедура рубрикации достаточно субъективна и
осуществляется на основании индивидуальных представлений людей о лан-
Поисковые системы и каталоги
29
ной предметной области. Авторы при размещении своих страниц порой ру-
ководствуются нс соображением точного соответствия документа названию
рубрики, а другими соображениями. Например, с целью увеличения посе-
щаемости своих страниц их помещают в рубрики, наиболее популярные в
данный момент времени. Документ, содержащий разнообразную информа-
цию на Wcb-страпице, порой помещают в несколько рубрик.
На следующем рисунке показан фрагмент каталога. Указанные рубри-
ки содержат в себе другие рубрики, в которые еще в большей степени уточ-
няют содержимое хранящегося документа.
Перечислим доменные адреса некоторых отечественных каталогов:
http://www.mail .ги/
http://catalog.chat.ru/
http://www.ru/
http://www.ulitka.ru/
http://www.susanin.net/
http://studcnts.informika.ru/
http://www.stars.ru/
http://yp.piter.com/
http://www.kingdom.ru/
В Интернете, кроме иерархических каталогов, встречаются и другие
типы каталогов - неисрархическис, в которых нет соподчинения, например,
каталоги, использующие алфавитно-предметную классификацию. В качестве
примера можно назвать энциклопедии, музыкальные сайты, телефонные
справочники и др.
Таким образом, поисковые системы и тематические каталоги имеют
свои достоинства и недостатки, взаимно дополняют друг друга. Поисковые
30
Поисковые системы и каталоги
системы "осматривают" большое число сайтов, однако автоматический отбор
искомых документов сопровождается достаточно большим числом ошибок.
База данных каталога хранится на одном сервере и содержит меньший объем
информации, чем ПС. Тем не менее, результаты поиска с помощью каталогов
имеют большую релевантность по сравнению с поиском с помощью ПС.
Естественным путем образовались комбинированные (гибридные) ПС,
которые позволяют вести поиск, как с помощью ключевых слов, так и с по-
мощью каталогов. Мощные поисковые системы, которые позволяют вести
поиск как по ключевым словам так и с помощью каталогов, а также содержат
страницы различных тематических направлений, называют порталами.
Результаты поиска с помощью различных ПС будут отличаться друг
от друга. Это объясняется тем, что в каждой ПС проиндексировано различ-
ное число документов и эти документы совсем нс обязательно одинаковые.
Кроме того, алгоритмы индексации на каждой ПС имеют свои особенности.
Существуют национальные ПС, которые в первую очередь обрабатывают
информацию, составленную на родном языке, например русскоязычная ре-
гиональная ПС Rambler. Периодичность обновления информации с помощью
роботов также различна, и она определяется быстродействием конкретной
ПС (частотой посещения сайтов). Для расширения просматриваемого в сети
просгранства рекомендуют использовать несколько ПС.
Метапоисковая система позволяет вести автоматический поиск по
сделанному запросу с использованием сразу нескольких поисковых машин.
Укажем адреса некоторых метапоисковых систем:
www .mctacrawl cr.com
www.mctor.com
Кроме ПС общего назначения существуют специализированные ПС.
Они предназначены для поиска музыкальных файлов (www.midi.ru), рисун-
ков (www.graphscarch.com), книг (http://bukinist.agava.ru/), кулинарных ре-
цептов (www.cooking.ru/search.html).
В заключение перечислим ПС, предназначенные для поиска файлов:
http://www.filcsearch.iii/
http ://w w w .files. ru/
http://www.freewarc.ru/
При использовании перечисленных систем поиск происходит не с по-
мощью ключевых слов, а по известным именам файлов.	j
Краткие итоги
Результаты поиска информации с помощью разных поисковых систем
и каталогов, как правило, будут разными.
Формирование базы данных в поисковых системах (индексация) осу-
ществляется автоматически с помощью специальных программ - Роботов.
Каталоги формируются вручную дизайнерами и модераторами.
Основные понятия Web-дизайна
31
7.	Основные понятия Web-дизайна
Термин Web-дизайн состоит из двух частей. Первая часть - Web - это
сокращенное написание слов World Wide Web - Всемирная Паутина. Вторая
часть термина - слово "дизайн" - происходит от английского слова design, что
означает: проектировать, конструировать, планировать, чертить, создавать
рисунок. Таким образом, предварительный перевод термина Web-design с
английского языка на русский язык может быть таким: "проектирование для
Интернета".
Для уточнения смысла этого термина рассмотрим существующие по-
нятия и определения.
Дизайн в широком смысле слова - любое проектирование, т. е. процесс
создания новых предметов, инструментов, оборудования. Дизайн в узком
смысле слова - это художественное конструирование. Его цель - проектиро-
вание предметов, в которых форма соответствует их назначению.
Изобразительными средствами дизайна являются: точка, линия, фак-
тура, текстура, цвет, форма, пропорция и др. Понятия точки и линии были
изучены нами в школе на уроках математики. Кратко рассмотрим остальные
термины.
Текстура - характер поверхности какого-либо объекта, обусловленный
его внутренним строением, структурой, объективными физическими свойст-
вами (дерево, металл, стекло, ткань).
Фактура - внешние свойства поверхности объекта (гладкая, шерохова-
тая, зеркальная). Фактура характеризует качество обработки поверхности
объекта.
Форма - внешнее очертание, наружный вид, контур объекта.
Цвет - свойство тел вызывать определенное зрительное ощущение в
соответствии со спектральным составом и интенсивностью отражаемого или
испускаемого ими видимого излучения. Основные параметры цвета - цвето-
вой тон, насыщенность и светлота. Цветовой тон определяется спектральным
составом света, насыщенность - количеством добавляемого серого цвета, а
светлота - яркостью.
Пропорция - связь составляющих внутри сложного целого. Различают
следующие виды пропорций: арифметическую, геометрическую, гармониче-
скую. Самой известной в дизайне пропорцией является золотое сечение. Эту
пропорцию иллюстрирует рисунок. При этом длины сторон показанного
прямоугольника связаны закономерностью: b/а = а/(а-+-Ь).
32
Основные понятия Web-дизайна
ь
Золотое
сечение
Ь = 0,618а
Перечисленные элементы должны быть творчески связаны между со-
бой на базе основных принципов композиции: симметрии, асимметрии, рав-
новесия, ритма и движения (динамики).
Композиция - соединение различных частей (элементов) в единое це-
лое произведение в соответствии с какой-либо идеей. Элементы художест-
венного произведения должны находиться в гармоническом единстве. Ком-
позиция - показатель художественной культуры дизайнера, чувства меры и
стиля.
Симметрия - такое размещение изображаемых объектов, при котором
они располагаются почти зеркально по отношению к центральной оси худо-
жественного произведения (Web-страницы). Симметричные композиции -
статичные (устойчивые), левая и правая половины изображений уравнове-
шены. Нарушение симметрии создает ощущение беспокойства, динамики,
сложности.
Асимметрия - произвольное расположение изображаемых объектов,
при котором левая и правая половины художественного произведения стано-
вятся неуравновешенными.
Равновесие - состояние, при котором все элементы сбалансированы
между собой. Равновесие вызывает ощущение покоя и уверенности.
Движение - иллюзия динамики, создаваемая на статических картинах
специальными изобразительными приемами (использование диагональных
линий и размытого фона, введение свободного пространства перед движу-
щимся объектом, выбор характерных фаг движения объекта - моментов
кульминации движения). В Web-дизайне эффект движения создается средст-
вами анимации.
Основные понятия Web-дизайна
33
Ритм - чередование различных элементов, которое придает компози-
ции четкость, стройность, особую выразительность, динамичность (строение
ветвей дерева, стоящие вдоль улицы дома, повороты голов людей, стоящих
группой).
Кроме перечисленных терминов, в дизайне часто используются сле-
дующие понятия.
Гармония - соразмерность всех частей целого.
Контраст - резкое различие элементов композиции (противопоставле-
ние темного и светлого, высокого и низкого, легкого и тяжелого, тонкого и
толстого, линий и пятен).
Колорит - гармоничное сочетание, взаимосвязь, тональное объедине-
ние различных цветов.
Перспектива - способ изображения трехмерного пространства на
плоскости в соответствии с кажущимся изменением размеров и четкости
объектов. Дизайнеры делают степень изменения размеров и четкости про-
порциональными величине отдаленности объектов от точки их наблюдения.
Благодаря художественной перспективе изображение становится объемным,
стереоскопичным.
Теперь дадим определение Web-дизайна. Заметим, что в литературных
источниках встречаются другие написания этого термина: Веб-мастеринг,
Всб-дизайп.
Web-дизайн - новый жанр изобразительного искусства, основанный на
применении специфических инструментов (компьютера и программ-
редакторов), специальных языков программирования (HTML, JavaScript,
Java, Perl, C++, PHP и др.) и сетевых технологий (CGI, CSS, SSI и др.). Целью
Web-дизайна является проектирование (создание) объектов (Web-страниц,
баннеров, апплетов, скриптов, отдельных элементов Web-страниц), разме-
щаемых в Интернете.
Толкование приведенных в определении терминов будет дано в сле-
дующих разделах.
Wcb-дизайнер (или несколько русифицированные термины: Web-
мастер, Веб-мастер) - художник-программист, занимающийся Web-
дизайном.
Кроме обязанностей, связанных с дизайном, Веб-мастеру нередко
приходится также выполнять обязанности системного администратора и
программиста (по крайней мере, иметь хорошее представление о сетевых
технологиях и языках программирования). Порой Web-дизайнеру приходит-
ся генерировать идеи, воплощать их в реальную жизнь и быть, к сожалению,
единственным зрителем своего произведения. В других крайних случаях ди-
зайнеров ждет головокружительный успех, как это случилось с американ-
скими студентами - разработчиками каталога Yahoo.
34
Основные понятия Web-дизайна
Начинающие Web-дизайнеры (любители) размещают на своих домаш-
них страничках собственные литературные, графические и музыкальные
произведения, результаты научных исследований, фотографии, репродукции
любимых картин, кулинарные рецепты, основные сведения о себе, о своих
увлечениях и т. п. Это позволяет им отыскать в сети единомышленников,
людей со сходными интересами, общаться с интересными людьми.
Более квалифицированные дизайнеры создают сайты, посвященные
некоммерческим организациям: учебным заведениям, добровольным объе-
динениям, политическим партиям, любимым спортивным командам и музы-
кальным группам.
Профессиональные Web-дизайнеры разрабатывают коммерческие
проекты, приносящие прибыль: виртуальные магазины, поисковые системы,
каталоги, информационные сайты. Профессионально разработанный Web-
сайт является одним из видов эффективной рекламы продукции или услуг,
удобным средством для поиска деловых клиентов и партнеров, успешного
проведения маркетинговой политики.
Разработка серьезного коммерческого проекта требует значительных
затрат времени, вложения средств и применения квалифицированного труда.
Чаще всего сложные Web-сайты разрабатываются коллективно, так как при-
ходится решать множество сложных технических, изобразительных, инфор-
мационных, психологических и других задач.
Основной задачей профессиональных Web-дизайнсров является при-
влечение большого числа посетителей на созданный ими сайт. И если на
страницы дизайнеров-любителей заходят два-три посетителя в неделю, то
коммерческие сайты посещают ежедневно тысячи людей. Этому способству-
ет неразрывное единство художественного оформления сайта и его предмет-
ного содержания (единство формы и содержания). Не последнюю роль в соз-
дании популярности играет умение ’’раскрутить*’ сайт.
Для создания коммерческого сайта требуются профессиональное мас-
терство (знание теории, владение навыками), умение выделять актуальные
проблемы и хороший художественный вкус. При разработке сайта дизайне-
ры используют закономерности, накопленные в живописи, графике, скульп-
туре, архитектуре, художественной фотографии, декоративно-прикладном
искусстве, граффити. Однако многие приемы Wcb-ди'зайна являются прин-
ципиально новыми. Поэтому порой говорят о Web-дизайнс как о новом жан-
ре искусства, который опирается на свои изобразительные законы. Эги зако-
ны в настоящее время создаются нашими современниками и проходят прак-
тическую апробацию в сети.
В отличие от классических произведений изобразительных искусств, в
Web-дизайнс нс используются карандаши, кисти, мольберты, краски. Здесь
нужны иные инструментальные средства (HTML-редакгоры, графические,
видео и звуковые редакторы, аниматоры, редакторы скриптов, специальные
Основные понятия Web-дизайна
35
утилиты, программы для создания фотоальбомов, разнообразные сетевые
технологии, языки программирования, цифровые фотоаппараты, сканеры и
др)-
На Web-страницах присутствуют нс только текст и статические изобра-
жения, но и анимация, видео- и аудиоклипы. Внешний вид просматриваемых
Web-страниц динамично изменяется при выполнении пользователем некото-
рых действий. Эю делает Web-страницу сложным произведением искусств,
создаваемым на стыке литературы, журналистики, изобразительного искусст-
ва, кино, телевидения, радио, фотоискусства. При этом опытный профессио-
нальный разработчик хорошо представляет контингент людей, чаще других
посещающих его сайты, учитывает психологию пользователей, подбирает те-
мы, которые наиболее популярны в сети в данный момент времени. Подав-
ляющее большинство Web-страниц является продуктом мультимедиа.
Проектирование страниц или сайтов осложняется еще и тем обстоя-
тельством, что одна и та же страница отображается по-разному разными
браузерами (Internet Explorer, Netscape Navigator, Opera) и в окнах разного
размера. Во многих случаях браузер самостоятельно "решает" как будет вы-
глядеть загружаемая страница. Изменить внешний вид страницы может и
пользователь, например, путем отключения опции загрузки рисунков, ани-
мации.
Для создания динамичных Web-страниц (обладающих элементами ис-
кусственного интеллекта) загрузка отдельных элементов производится в за-
висимости от времени суток или с помощью генератора случайных чисел.
Таким образом, изменяются проигрываемые музыкальные клипы, рисунки,
загружаемые анекдоты и афоризмы.
При проектировании сайта дизайнеру приходится обращать внимание
на правильный выбор цвета шрифта и цвета фона. Рекомендуется отдавать
предпочтение синим буквам на белом фоне, черным на желтом, зеленым на
белом, черным на белом, белым на синем. При выборе цветовой палитры
следует учитывать, что наибольшую чувствительность глаз имеет к желто-
зеленому цвету, а наименьшую к фиолетовому и красному цветам. Замечено,
что разные цвета оказывают разное воздействие на человека: красный цвет
возбуждает, а синий цвет успокаивает.
Данные психологических исследований говорят о том, что человече-
ский глаз воспринимает красный, оранжевый, желтый цвета (и их оттенки)
как теплые. Синий, фиолетовый цвета и их оттенки воспринимаются челове-
ком как холодные. Это связано, видимо, с тем. что солнце и огонь содержат
красные и желтые цвета, а снег, лед - голубые и синие цвета.
Как правило, теплые тона на рисунке обладают свойством "прибли-
жаться", а холодные - "удаляться". Другими словами, предметы, нарисован-
ные теплыми тонами, будут казаться расположенными ближе предметов,
изображенных холодными тонами.
36
Основные понятия Web-дизайна
Специалистами художественной фотографии установлено, что глаз
зрителя обращается, прежде всего, к светлым тонам снимка и к тем местам,
где имеется наивысший тональный контраст.
Белый, черный и серый цвега называются ахроматическими, все про-
чие - хроматическими. Особенности воздействия цвета на человека изучает
наука колористика.
Перечислим некоторые важные рекомендации по созданию Web-
сайта. Целесообразно нс перегружать страницу большим числом деталей.
Это связано с тем, что человек за короткое время способен воспринять и за-
помнить не более 7-8 объектов.
Считается, что чем меньше размер объекта, тем больше должна быть
его контрастность. Замечено, что четко выраженный фоновый рисунок на
Web-странице повышает утомляемость глаз и снижает эффективность вос-
приятия текста. Для исключения пестроты страницу рекомендуется созда-
вать с использованием не более четырех основных цветов.
На всех страницах одного сайта рекомендуется использовать одинако-
вые панели навигации, размещенные в одинаковых местах. Каждая Web-
страница сайта должна иметь ссылку на главную страницу сайта.
На последней стадии проектирования сайта целесообразно проверить
работоспособность всех сделанных гиперссылок. Завершая проектирование
сайта, желательно просмотреть его с помощью различных браузеров (MS
Internet Explorer, Netscape Navigator, Opera).
Кратко рассмотрим вопрос оценки допустимого объема Web-
страницы. В современном динамичном мире каждому человеку нужно ус-
петь многое сделать. Поэтому люди экономят каждое мгновение дарованной
им жизни. Пользователи, путешествующие по сети, "проскакивают" мимо
тех Web-страниц, которые недопустимо долго загружаются на их компьюте-
ры. По этой причине при проектировании сайта дизайнеру необходимо уметь
заранее оценить примерное время загрузки и допустимый объем создаваемой
ими страницы. Считая, что предельно допустимое время ожидания загрузки
Web-страницы составляет 30-40 секунд, а средняя скорость поступления ин-
формации по коммутируемому каналу - 10-20 Кбит/с, получаем желательный
объем проектируемой Web-страницы - 300-800 Кбит, т. е. 37,5-100 Кбайт.
Естественно, что при использовании выделенного канала скорость загрузки,
как правило, возрастает в 3-4 раза, и поэтому допустимый объем страницы в
перспективе может быть увеличен.
Краткие итоги
Web-дизайн - новый жанр изобразительного искусства, использующий
собственные средства, закономерности и приемы.
Web-дизайнср применяет специфические инструменты: компьютер,
прикладные программы и языки программирования.
Структура Wcb-страницы
37
8.	Структура Wcb-страницы
Документы, составленные с помощью языка HTML, имеют опреде-
ленную стандартизированную структуру (см. следующий рисунок).

{<head>
<ti Подробная страница</ППО
</head>
Программа
<body>
<р>Дроба</р>
<р><Ь>Пр о б а</Ь></р>
^</body>
</htJul>
Начинается и завершается любая HTML-страница парой тегов <html>
и </html>. Эти теги сигнализируют браузерам о том, что данная программа
написана на языке HTML. Все, что находится между этими тегами, называ-
ется документом (Web-страницсй, программой).
Заметим, что некотрыс HTML-редакторы самой первой строкой стра-
ницы автоматически вставляют идентификатор (указатель) используемой
версии языка HTML. Например,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transi-
tional//EN">
Такую строку норой называют прологом.
Между тегами <hcad > и </head> помещаются сведения о названии
данной страницы и служебная информация (используемая кодировка, ключе-
вые слова, название редактора, с помощью которого сделана страничка). Дпя
примера название этой Web-страницы выбрано ’’Пробная страница". Назва-
ние страницы окаймлено тегами <title> и </title>. Следует иметь в виду то,
что текст, размещенный между этими тегами, не отображается в окне брау-
зера. Название страницы появляется в строке заголовка браузера при про-
смотре данной страницы, а также в названиях избранных закладок. Между
тегами <head> и </head> размещается служебная информация. Для этого ис-
пользуются метатсги.
С помощью мстатегов дают информацию поисковым системам о со-
держимом данной страницы. Метатеги могут содержать информацию об ав-
38
Структура Web-страпицы
торс, авторских правах, электронном адресе. Метатсги MOiyr управлять ав-
томатической перезагрузкой на другую страницу.
Содержимое страницы, воссоздаваемое на экране монитора (основная
часть, тело), располагается между тегами <body> и </body>. В данном случае
(см. рисунок) пользователи на экранах своих мониторов увидят всего два
слова: "Проба", причем второе слово будет изображено полужирным шриф-
том. Кроме того, на рисунке видны теги <р> и </р>, каждая пара которых
выделяет новый абзац в документе.
Заметим, что исключением из этого правила является порядок созда-
ния фреймов. В этих случаях вместо тега body используется тег frameset.
Понятно, что показанные на рисунке фигурные скобки и поясняющие
надписи (Программа, Заголовок, Тело) изображены лишь для улучшения
наглядности структуры программы, и в реальных программах они отсутст-
вуют. Пространственное расположение тегов в данном примере для нагляд-
ности также несколько изменено.
Увидеть, как выглядит HTML-код конкретной Web-страницы, доволь-
но просто. Для этого достаточно в браузере MS Internet Explorer 6.0 последо-
вательно выполнить команды: Вид - Просмотр HTML-кода.
Краткие итоги
В структуре HTML-страницы нужно выделять три крупных блока:
один блок с помощью тегов <html> и </html> показывает границы всего до-
кумента.
Теги <head > и </hcad> выделяют второй блок со служебной информа-
цией.
В контейнере, созданном тегами <body> и </body> (третий блок), со-
держится информация, отображаемая в окне браузера.
Сетевые технологии Web-дизайна
39
9.	Сетевые технологии Web-дизайна
Основным средством создания Web-страниц в настоящее время явля-
ется язык гипертекстовой разметки HTML.
Стандартный язык HTML позволяет создавать статичные Web-
страницы, которые содержат текст, неподвижные рисунки (исключением
являются рисунки формата GIF)- Такие страницы напоминают плакаты на
досках объявлений, традиционные полотна в картинных галереях или фото-
графии на выставках. Используя лишь язык HTML, невозможно создать сайт,
отвечающий современным требованиям Web-дизайна. Образно язык HTML
можно сравнить с шампуром, на который должны быть нанизаны лакомые
кусочки.
Специальные добавки к HTML
позволяют оживить неподвижные
страницы (ввести мерцание, движу-
щийся текст, обеспечить интерактив-
ность - возможность передачи ин-
формации не только с сервера, но и на
сервер и т. д.). Такими дополнениями
к языку разметки HTML являются
каскадные таблицы стилей CSS,
скрипты, написанные на языке
JavaScript или VBScript, апплеты, со-
ставленные на языке Java, CGI-
скрипты - программы, для создания
которых применяют языки Perl, C++,
скриплеты, написанные на языке
DHTML. Для создания движущихся
надписей и рисунков используют GIF-
и Flash-анимацию. Технологии AVI и
MPEG позволяют вставлять видео-
клипы. Имеются среде гва для озвучивания Web-страниц с помощью аудио-
клипов, созданных в форматах WAV, MP3 и MIDI.
Каждое дополнение решает свою определенную задачу, расширяя
возможности стандартного языка HTML. Так, таблицы стилей CSS упроща-
ют процедуру форматирования текста, придания сайту единообразного вида.
CSS (Cascading Style Sheets - каскадные таблицы стилей) - сетевая
технология, расширяющая возможности языка HTML. Каскадные таблицы
стилей упрощают и ускоряют процедуру форматирования Web-страницы,
позволяют представить страницы одного сайта в едином стиле. С помощью
CSS несложно быстро изменить сразу на всех страницах сайта цвет шрифта,
40
Сетевые технологии Web-дизайна
его размер, начертание, гарнитуру, величину отступа в красной строке, вид
выравнивания текста и т. д. Это реализус гея за счет заранее подготовленных
шаблонов, которые удобно разместить в отдельном файле. Загрузка нового
файла шаблонов приводит к изменению внешнего вида (стиля) сразу всех
страниц данного сайта.
В соответствии с концепцией CSS, весь текст страницы представляют
в виде набора контейнеров (блоков), к каждому из которых можно приме-
нить свой вид форматирования. Контейнерами могу г быть, например, заго-
ловки разделов книги. При этом контейнеры можно интерпретировать как
переменные, которые принимают различные значения (например, размер
шрифта). В этом случае легко изменить цвет сразу всех заголовков на всей
Web-страницс и даже сайте.
Каскадные таблицы стилей позволяют без затруднений создавать лю-
бопытные эффекты, например, проплывание (парение) текста над неподвиж-
ным фоном, формирование разнообразных рамок (box), эффект объемного
текста.
Для браузера MS Internet Explorer (в рамках языка DHTML) разрабо-
таны специальные программы, которые позволяют просто создать разнооб-
разные эффекты: свечение текста, создание тени, смазывание, горизонталь-
ное и вертикальное отражение текста, создание рельефного и гравированного
изображений, инверсия цветов (цветной негатив) и др. Благодаря DHTML
Wcb-страницы могут динамически изменяться при наступлении какого-либо
события.
Программы, написанные на языке DHTML, называются DHTML-
скриптами или скриплетами.
DHTML (Dinamic Hypertext Markup Language) - динамической язык
разметки гипертекста. Конкурирующие фирмы Microsoft и Netscape вклады-
вают разный смысл в понятие "динамический HTML". Это часто приводит к
тому, что одна и та же Wcb-страница по-разному выглядит при ее просмотре
разными браузерами. По этой же причине существует некоторая путаница с
определением самого понятия DHTML.
Сценарии (или скрипты) - программы, которые составляются на спе-
циальных языках программирования с целью расширения возможностей
HTML. В качестве языков программирования используют JavaScript,
VBScript, Java, Perl, C++ и др. Сценарии позволяют обрабатывать (реагиро-
вать на) различные события (например, щелчок мышью, размещение курсора
мыши на некотором объекте, нажатие клавиши). Ответной реакцией на про-
изошедшие события становится изменение внешнего вида Web-страницы,
пересылка данных от клиента на сервер и др. Слово Script в переводе с анг-
лийского языка означает "сценарий". Термины "скрипт" и "сценарий", кото-
рые используются в публикациях по Web-дизайну, являются синонимами.
Сетевые технологии Web-дизайна
41
Традиционное значение слова "сценарий", которое используется в те-
атре, кино, телевидении, - сюжетная схема событий. В Web-дизайнс значение
термина ’’сценарий" отличается от традиционного значения этого слова.
Следует выделить две принципиально различные группы сценариев
(скриптов): JavaScript (VBSript) и CGI-скрипты.
Скрипты первой группы размещаются прямо в тексте программы, на-
писанной на языке HTML. Для их составления используют два языка про-
граммирования: JavaScript и VBScript. Язык JavaScript поддерживается всеми
современными браузерами. Скрипты, написанные на языке VBScript, рабо-
тают только па браузерах MS Internet Explorer. Скрипты обрабатываются
(интерпретируются) браузером одновременно с кодом HTML. В HTML-
программах скрипты размещаются внутри контейнеров, которые обрамлены
тегами <script> и </script>.
Самой характерной особенностью этих скриптов является то, что они
выполняются па стороне клиента, т. с. с помощью браузера. Скрипты первой
группы позволяют индицировать текущее время и дату, формировать бегу-
щую строку с текстом (скроллинг), создавать мерцающие рамки, изменять
оформление страницы в зависимости от времени суток, открывать новые
окна, выполнять определенные команды через заданные промежутки време-
ни. Описать все возможности скриптов практически невозможно. Они соз-
даются программистами непрерывно. Однако трудно удержаться и не упо-
мянуть о следующих возможностях. Скрипты могут проверять правильность
заполнения форм, менять картинки на странице, динамически варьировать
вид кнопок при попадании на них курсора, создавать сетевые игры, вести
математическую обработку данных. Существенным недостатком скриптов
первой группы является принципиальная невозможность записи данных с
машины клиента на сервер.
Вторая группа скриптов - CGI-скрипты - организована значительно
сложнее, чем первая группа скриптов. CGI-скрипты могут быть написаны на
различных языках программирования (чаще всего PHP, Perl, C++). Для их
работы необходимо, чтобы на сервере был установлен интерпретатор соот-
ветствующего языка программирования. Эти скрипты являются программа-
ми, исполняемыми на стороне сервера. Они должны располагаться на серве-
ре отдельно от основного текста HTML-программы. Не все владельцы серве-
ров допускают работу CGI-скриптов, так как существует потенциальная
опасность "взлома" сервера с их помощью. Скрипты могут выполнять раз-
личные команды (в том числе и системные). Поэтому квалифицированный
злоумышленник (кракср) может нарушить нормальную работу сервера. Кро-
ме того, существует опасность неумышленного нарушения нормальной ра-
боты сервера из-за неправильно спроектированного CGI-скрипта.
Работу этой группы скриптов должен поддерживать особый интер-
фейс. CGI (Common Gateway Interface) - специальный интерфейс (способ
42
Сетевые технологии Web-дизайна
взаимодействия сервера и клиента), с помощью которого происходит запуск
программ, расположенных на сервере.
За счет интерфейса, CGI-программы (CGI-скрипты) исполняются на
сервере по командам (запросам), поступающим от компьютера клиента. Ре-
зультаты выполнения CGI-скриптов передаются па машину клиента в виде
HTML-документа. По этой технологии создают гостевые книги, чаты, поис-
ковые машины, виртуальные магазины. Эта технология позволяет осуществ-
лять поиск в сетевых базах данных, а также запоминать на сервере информа-
цию, поступающую с машины клиента. Например, можно сделать запись в
гостевой книге. Эта запись сохранится на сервере, и следующие посетители
страницы смогут с нею ознакомиться.
Кливкт
Сервер
Все CGI-скрипты хранятся на сервере в специальной папке, как пра-
вило, с названием cgi-bin.
Разработка сетевых технологий ведется несколькими фирмами в усло-
виях жесткой конкуренции. Поэтому для каждого языка программирования и
каждой технологии создаются альтернативные варианты.
Альтернативой для технологии CGI является язык ASP (Active Server
Pages - активные страницы на сервере). Язык ASP разработан фирмой Micro-
soft и предполагает использование языка VBScript и элементов ActivX, кото-
рые созданы этой же фирмой.
Еще один язык - PHP (Personal Home Page tools) по назначению анало-
гичен языку ASP и также является альтернативой для CG1. Разработчиком
языка РНР является Rasmus Lerdorf. Программы, написанные па языке РНР,
выполняются на сервере, а результаты пересылаются клиенту в виде HTML-
документа. Сами программы на РНР пишутся прямо внутри HTML-
документа. После обработки страницы с помощью интерпретатора РНР вид
страницы существенно меняется по сравнению с документом, хранящимся на
сервере. Файлы, содержащие программы на РНР, должны иметь расширение
phtml или .php3.
Важными для объяснения принципа действия скриптов являются по-
нятия: событие, объекты и методы.
Сетевые технологии Web-дизайна
43
Событие - это действие, производимое пользователем, в результате
которого запускается скрипт (нажатие клавиши, пересечение курсором мы-
ши гиперссылки, размещение курсора на гиперссылке, щелчок мышью, за-
грузка страницы в браузер и т. д.). Событие - это сигнал, по которому выпол-
няется программа, заранее подготовленная программистом.
Объект - некоторый элемент с набором собственных свойств и мето-
дов (например, открытое окно).
Свойство - параметр объекта, который может быть изменен или счи-
тан (например, ширина окна).
Метод - функция, показывающая, какие действия производятся над
объектом (например, закрыть окно).
Апплеты (applets) - программы, которые составляются на языке Java и
хранятся на сервере отдельно от основного документа, написанного на языке
HTML. В переводе с английского языка слово applet означает небольшое
приложение. Таким образом, апплет (иногда пишут аплет) - это маленькое
приложение (программа на языке Java), служащее для создания разнообраз-
ных визуальных эффектов на основной Web-страницс. Можно заметить не-
которое сходство Java-апплетов с CGI-скриптами (и тс, и другие хранятся
отдельно от основного HTML-документа). Самое существенное их различие
состоит в том, что Java-апплеты нс позволяют сохранять на сервере инфор-
мацию, подготовленную пользователем-клиентом. По своему внешнему про-
явлению Java-апплеты похожи на сценарии, написанные на языке JavaScript.
Однако скрипты располагаются прямо в тексте Wcb-страницы. а апплеты
размещаются на сервере в виде отдельных файлов.
Вызываются апплеты из основного документа, написанного на языке
HTML. В результате вызова апплеты считываются (скачиваются) с сервера и
после проверки на корректность исполняются на компьютере-клиенте. При
этом в браузере должны быть установлены соответствующие опции, разре-
шающие обработку Java-апплетов. В противном случае апплеты будут про-
игнорированы.
Достоинством языка Java является его независимость от используемой
операционной системы и платформы (аппаратной части), на которой реали-
зована ЭВМ. На этом языке можно создавать приложения, способные рабо-
тать на компьютерах самых разных типов: Pentium, Macintosh, рабочих стан-
циях Sun. Это достигается установкой на каждую ЭВМ виртуальной Java-
машины (Java Virtual Machine - программный эмулятор). Эмулятор - это спе-
циальная программа, преобразующая инструкции для виртуальной машины
(или байт-коды) в инструкции для конкретного процессора. Независимость
языка Java от платформы (типа процессора и операционной системы^ являет-
ся одним из основных достоинств этого языка.
Технология создания и использования Java-апплетов следующая. Про-
граммист составляет программу на языке Java. Затем компилирует ее. пре-
44
Сетевые технологии Web-дизайна
SSI-технология
Web-страшщы
Вставляемый блок
вращая текст программы в байт-
коды. Откомпилированная програм-
ма размещается на сервере в виде
файлов Java-классов (с расширением
.class). Вызываются апплеты из
HTML-документа с помощью опций,
которые обрамляются дескрипторами
<applet> и </applct>. Между этими
тегами указываются параметры, с
которыми осуществляется запуск
апплета.
Рассмотрим еще одну полез-
ную сетевую технологию Web-
дизайна - SSI.
SSI (Server Side Include) с анг-
лийского языка переводится так:
включаемый на стороне сервера.
Здесь имеется ввиду, что технология
SSI позволяет добавлять в текст
страницы дополнительные фрагмен-
ты, которые хранятся на сервере в
отдельных файлах. При рассмотрении технологии SS1 слышны "знакомые
мотивы", которые звучали при рассмотрении предыдущих технологий (CG1-
скрипты и Java-апплеты). Отличительной особенностью технологии SSI яв-
ляется то, что и основной текст Web-страницы, и добавляемый блок написа-
ны на одном языке программирования - HTML. Технологию SSI можно об-
разно сравнить с конструированием игрушечных зданий из кубиков. Только
здесь речь идет о проектировании сайта из заранее подготовленных фраг-
ментов Web-страниц. Причем одни и тс же кубики (блоки, файлы) можно
вставлять на различные страницы сайта. Легко изменить внешний вид оди-
наковых элементов сразу на всех страницах сайта (скажем, вид элементов
навигации или текст электронного адреса). Включение (добавление) допол-
нительных блоков происходит непосредственно при передаче текста Web-
страницы от сервера к клиенту. По этой причине коды добавляемых блоков
нельзя увидеть при просмотре страниц в виде HTML. Изменив всего лишь
один файл, дизайнер меняет внешний вид сразу всех страниц сайта. Таким
образом, технология SSI позволяет легко "собирать", "конструировать" сайт,
используя заранее созданные заготовки (блоки).
Web-страница, на которую производится вставка дополнительного
блока, должна иметь расширение shtml (или shtm). Добавляемый файл в
принципе может иметь любое расширение. Синтаксис вызова присоединяе-
мого блока таков:
Сетевые технологии Wcb-дизайна
45
<1 --#include virtual—'navig.htm"-->
Здесь navig.htm - имя добавляемого файла.
Не все серверы поддерживают технологию SS1. Для этого требуются
специальные настройки, которые устанавливает администратор сервера.
Краткие итоги
Большинство Web-страниц построено на основе языка разметки
HTML. Возможности этого языка расширяют за счет использования техноло-
гий, работающих как на стороне клиента, так и на стороне сервера.
На стороне клиента реализуются технологии: CSS, DHTML, Flash,
AVI, MPEG, JavaScript, VBScript, ActiveX
На стороне сервера работают технологии: CGI, ASP, SSI, ColdFusion,
PHP, Perl, Java
46
Язык HTML
10.	Язык HTML
Составление программы на языке HTML что-то напоминает набор
текста в редакторе MS Word. Как известно, если при наборе текста в MS
Word бывает необходимо сделать какое-то слово полужирным, нужно его
выделить и нажать специальную кнопку на панели форматирования. Чтобы
форматировать текст на Web-страницс, нужно с помощью языка HTML по-
ставить вокруг выделяемого слова специальные символы. В различных лите-
ратурных источниках эти символы могут называться по-разному: маркерами,
метками, дескрипторами, командами управления или тегами.
Например, слово "Проба" па Web-странице будет выделено полужир-
ным шрифтом, если использовать такую конструкцию:
<Ь>Проба</Ь>
Выделяемое слово окаймлено с двух сторон тегами, которые отдают
приказ браузеру изобразить указанное слово "толще” обычного текста. Ре-
зультат такого форматирования показан ниже:
Проба
Этот пример достаточно типичен. Большинство тегов парные: первый
тег является открывающим, а второй тег - закрывающим (завершающим, ко-
нечным). Распознать закрывающий тег можно по символу ’7". Открывающий
тег имеет такой формат:
<имя тега [атрибуты]>
Действие тега по форматированию текста определяется его именем и
может уточняться атрибутами. Атрибуты являются необязательными эле-
ментами тегов и поэтому могут отсутствовать. Атрибуты записываются в
формате:
имя атрибута [=значение]
Если некоторый тег имеет несколько атрибутов, то порядок (последо-
вательность) записи атрибутов может быть произвольным. При записи тега
нс имеет значения, какими буквами он записан: большими или маленькими,
т.с. записи <Ь> и <В> равноправны. В общем виде рассмотренную конструк-
цию можно представить так:
<имя тсга>текст</имя тсга>
Фрагмент программы, расположенный между открывающим и закры-
вающим тегами, называется контейнером. Специальные теги используются
для центрирования текста, управления выравниванием, размером шрифта и
цветом текста, создания заголовков, абзацев, списков, таблиц, форм, вставки
гиперссылок, графических объектов и др. Различаются теги своими именами
и действиями, производимыми над элементами документа (Web-страницы).
Кроме парных тегов существуют непарные теги.
Язык HTML
47
Тег <br> используется, если необходимо перейти на новую строку, нс
создавая нового абзаца. Тег <hr> создает разделительную горизонтальную
линию. Одиночный тег <img > используется для вставки графических объек-
тов. К непарным тегам также относится метка для комментариев <!—
Комментарии—>.
При создании языка HTML авторами использовался английский язык.
Смысл имен многих тегов становится понятным при переводе английских
слов на русский язык, например: b - bold (четкий, жирный), i - italic (курсив),
u - underline (подчеркивание), head (голова), body (тело), img (image - изо-
бражение).
Теги могут быть вложенными. Например:
<b><i>HTML</i> - язык для создания \¥сЬ-страниц</Ь>
В результате выполнения браузером этого фрагмента кода на экране
клиента появится фраза, написанная жирным шрифтом (теги Ь), причем сло-
во HTML будет выделено курсивом (теги i):
HTML - язык для создания Web-страниц
Как уже упоминалось выше, теги, помимо имени, могут содержать ат-
рибуты, которые дают дополнительную информацию о том, как браузер
должен обработать текущую метку. Общий вид тега с атрибутом таков:
<имя тега имя атрибута=зпачение (аргумспт)>Форматирусмый
текст</имя тега>
Например, чтобы изменить цвет шрифта на сиреневый цвет можно
воспользоваться следующей конструкцией:
<font color="#fR)Off ’> сирснсвый</Гоп1>
В данном случае использован тег font, атрибут color, которому при-
своено значение #ffOOff. Форма записи значения может быть различной.
Аналогичный результат будет получен, если значение атрибута color будет
записано другим способом: color="rgb(100%, 0%,	100%)'',
color-"rgb(255,0,255)" или color="fuchsia’'
Этот пример говорит о том, что значение атрибута может быть задано
с помощью символьной метки (например, red, blue), с помощью трех деся-
тичных чисел (каждое может изменяться в пределах от 0 до 255), с помощью
трех шестнадцатеричных чисел (каждое изменяется от 0 до FF), путем указа-
ния процентной насыщенности каждого из трех основных цветов (в процен-
тах).
Цвет и цветовые оттенки чаще всего задаются в шестнадцатеричной
системе счисления, причем для одного тега может быть указано несколько
атрибутов. Например:
<body bgcolor=#FFFFFF text=#OOOOOO Iink=#OOOOFF vlink=#FF0000
alink=#00FF00> </body>
В данном фрагменте программы имя тега - body. Этот тег имеет пять
атрибутов, и каждому атрибуту присвоен свой аргумент. Атрибут bgcolor
48
Язык HTML
задает цвет заднего фона страницы (бумаги). В данном случае этот цвет вы-
бран белым. Атрибут text определяет цвет чернил (здесь - черный), a link оп-
ределяет цвет гиперссылки (синий). Наконец, атрибут vlink задаст цвет ги-
перссылки недавно посещенного сайта (красный), a aiink назначает цвет
ссылки в момент ее выбора (зеленый). Цвета задаются тремя шестнадцате-
ричными числами в интервале от 00 до FF (в десятичной системе счисления
от 0 до 255). Иногда такое сочетание трех шестнадцатеричных чисел назы-
вают RGB-триплетом.
Таким образом, можно задать любой из 256x256x256 = 16 777 216 цве-
товых оттенков для бумаги, чернил и ссылок. "Смешивая" три цвета (крас-
ный, зеленый и синий - RGB) с разными интенсивностями каждого цвета,
можно получить желтый (FFFF00), светло-серый (ВЕВЕВЕ), небесно-
голубой (87СЕЕВ), золотой (FFD700), пурпурный (A020F0) цвета и множе-
ство других цветовых оттенков. Образны некоторых цветов показаны в сле-
дующей таблице.
Название	Число j	Цвет
Желтый	FFFF00 !	1
	Светло-серый	ВЕВЕВЕ		i
Небесно-голубой 		 					87СЕЕВ |	-	. Г ЛИ
Зеленый		00FF00 J	
Пурпурный	A020F0 |	
Красный	FF0000 1	
Тег <font> позволяет управляй ь размером, цветом и начертанием сим-
волов. Следующий фрагмент HTML-кода показывает в зможность измене-
ния размеров символов.
<font size=2>Font 2</fontxfont size=5>Font 5</font>
Результат действия этих тегов будет таким: Font 2 Font 5
Размер символов можно изменять от 1 до 7, причем указанные цифры
нс связаны с каким-то истинным размером. Это всего лишь порядковые но-
мера шрифтов. Чем больше номер, тем крупнее символ.
Web-страницы становятся привлекательными благодаря возможности
размещения на них разнообразных графических объектов. Чтобы встроить
изображение в HTML-документ, нужно заранее подготовить рисунок или
фотографию в форматах GIF, PNG или JPEG. Допустим, что нужно включить
в документ фотографию с именем foto.JPG. находящуюся в одном каталоге
(папке) с данным HTML-документом. Тогда нужно использовать такой
фрагмент программы: <img src="foto.JPG">. В результате на экран будет вы-
ведено подготовленное изображение:
Язык HTML
49
Самара. Часовня Бориса и Глеба .
Формирование графических изображений следует сопровождав аль-
тернативным текстом. Дело в том, что многие пользователи для ускорения
работы в Интернете отключают графику с помощью специальных команд
(установок) браузера. В этом случае альтернативный текст позволяет пользо-
вателю заранее представить, что появится па экране монитора после включе-
ния графического режима. Например: <img sre ’’URL" ак~"Поясняющая
(альтернативная) надпись">
При создании графических образов пока чаще всего используются два
формата: GIF и JPF.G. Оба формата являются растровыми (картинки форми-
руются из отдельных разноцветных точек! Каждый формат имеет свою
сильную и слабую стороны. GIF-формат характсри дуется сильной степенью
сжатия графических файлов (по отношению к картинкам с расширением
BMP сжатие достигает 10-30 раз). Этот формат позвонки хранить в одном
файле сразу несколько картинок. Такое свойство GIF изображений исполь
зуют для формирования анимации - динамично изменяющихся писункоь или
надписей. Отличи гспьной особенностью этого формата является чересстроч
ный способ воспроизведения графических объектов. Вначгпс появляются
лишь основные детали, которые по мерс загрхзки клртинки становятся от-
четливее. Еще одной интересной отличительной особенностью GlF-’рафики
является возможность создания прозрачных изображений. « татопапя коте
50
Язык HTML
рым создастся впечатление, будто надписи парят (летят) над задним фоном
страницы. Недостатком GIF-формата является то, что он позволяет запом-
нить лишь 256 различных цветов. Поэтому он сильно искажает цветные фо-
тографии и картины. Идеально этот формат подходит для прорисовки кно-
пок, линий, полос, логотипов, заднего фона, рисунков без полутонов, аними-
рованных картинок, баннеров. В фотоальбомах этот формат используется
для создания маленьких картинок (миниатюр) для быстрого предварительно-
го просмотра фотографий.
Достоинством JPEG-формата является возможность хранить около
16,7 миллиона различных цветов. Недостатком формата является существен-
ная потеря качества при большой степени сжатия изображения. Разработан
еще один формат, который должен объединить достоинства GIF и JPEG
форматов. Эго - PNG (Portable Network Graphic - перемещаемая сетевая гра-
фика).
Краткие и тоги
Язык HTML - это язык разметки (форматирования) текста.
Форматируемый текст обрамляется тегами, которые изменяют форму
символов, текста, их местоположение.
Графические объекты могут быть внедрены на Web-страницу в одном
из трех форматов: JPEG, GIF или PNG.
Форматирование текста
51
10.1. Форматирование текста
Рассмотрим теги, предназначенные для изменения формы текстового
документа.
Теги абзаца <р> </р> позволяют начать каждую запись с новой строки
(с красной строки). При этом соседние абзацы разделяются пустой строкой.
Например:
Фамилия - Иванов
Имя - Петр
Отчество - Сидорович
Некоторые литературные источники указывают па возможность со-
ставления HTML-кода без закрывающего тега </р>. Действительно, на этот
момент времени это так. Работоспособность программ, в которых отсутству-
ет закрывающий тег </р>, нс нарушается. Однако в перспективе предполага-
ется переход к "строгим" языкам программирования XHTML и XML, в кото-
рых подобные "вольности" недопустимы. Видимо, уже сейчас следует при
выкать к будущим стандартам.
Теги позиционирования <р align="center">TeKCT</p> и <р
align="right">TcKcr</p> дают возможность размешать (позиционировать)
текст в разных местах страницы:
Этот абзац выровнен по центру.
Этот абзац выровнен по правому краю.
Такой вид форматирования сохранится
до начала нового абзаца.
Без использования этих двух тегов (по умолчанию) текст позициони-
руется слева.
Гарнитура определяет начертание (конфигурацию) шрифта.
Тег <font face-'Arial" > позволяет установить гарнитуру шрифта
Arial (пропорциональный шрифт "без засечек'-sans-serif).
С помощью тега <font face="Courier New Суг"> может
быть установлена гарнитура Courier (моноширинный шрифт-
monospace) .
Достаточно часто используется гарнитура шрифта Times New Roman
(пропорциональный шрифт с "засечками’'-serif), установить которую можно с
помощью тега <font face="Times New Roman">
Во всех рассмотренных случаях должен быть использован закрываю-
щий тег </font>.
Теги выделения текста <b> <7b> , <i> </i> , <u> </u> способны сфор-
мировать:
Полужирный текст (Bold)
52
Форматирование текста
Наклонный текст - курсив (Italic)
Подчеркнутый текст (Underline)
Перечисленные теги относятся к тегам физического форматирования
Они однозначно указывают браузеру, какие нужно сделать преобразования
символов.
Кроме тегов физического форматирования существуют теги логиче-
ского форматирования <еш> и </ст>. По существу, действие этих тегов
такое же, как и тегов <i> </i>.
Теги <strong> и </strong> позволяют сделать текст полужирным. Не-
сложно заметить, что их действие такое же, как и тегов <Ь> </Ь>. Учитывая
перспективу развития языка программирования HTML, нужно отмстить, что
предпочтительными тегами являются <ст>, </ст> и <strong>, </strong>.
Следует отдавать предпочтение в использовании логического форматирова-
ния, взамен физического форматирования.
Вложенные теги типа <i> <b> ВЫДЕЛЯЕМЫЙ ТЕКСТ <7b> </i> по-
зволяют одновременно выполнять несколько видов форматирования.
Например, делать текст сразу наклонным и полужирным. При ис-
пользовании вложенных тегов необходимо, чтобы открывающие и закры-
вающие теги размещались в строгом порядке:
<тег 1><тсг 2><тег 3>Текст</тег 3> </тег 2></тег 1>
Непарный тег <Ьг> позволяет переносить текст на новую строку без
создания нового абзаца:
Иванов
Петров
Сидорова
Козлова
Теги предварительного форматирования <рге>
</рге>
дают возможность сохранить формат набранного
текста,
например, сделать несколько пробелов между слова-
ми.
Без использования рассматриваемого тега пробелы,
отступы,
табуляция и переводы
строк
браузером игнорируются.
Выше приведен пример действия тега предварительно-
го форматирования.
Теги формирования подстрочного и надстрочного текстов
<sub> </sub> и <sup> </sup> позволяют, например, записать формулы:
Форматирование текста
53
Н2О
2
Е=тс
h=gt2/2
Отлиновки - горизонтальные линии, служащие для отделения одной
части текста от другой. Непарный тег <hr> обеспечивает создание горизон-
тальной разделительной линии. С помощью атрибута типа noshade sizc=10
можно изменять ширину разделительной линии. Ширина задается в пиксе-
лях. С помощью атрибута color можно изменять цвет отлиновки.
С помощью тега <font sizc=l> </font> можно задать фактический раз-
мер шрифта:
Размер 1 Размер 2
Размер 3 Размер д Размер 5 Размер
6
Размер (size) 7
Теги заголовков вида <Ы> </Ы> предназначены для изменения раз-
мера шрифта в заголовках
Заголовок Heading Hl
Заголовок Heading Н2
Заголовок Heading НЗ
Заголовок Heading Н4
Заголовок Heading Н5
Заголовок Heading 116
Теги определения цвета вида <font color=rcd> </font> и <foni
color=#008080> </font> используются для задания нужно] о цвета текста.
Цвет можно задавать как с помощью символьных меток типа red.
green, так и с помощью шестнадцатеричного кода типа #008080. #FF0080.
Тег типа <body bgcolor="whitc" tcxt=’,black’' > позволяет задать цвет
фона страницы и цвет текста (чернил).
Маркированный список создастся с помощью тегов <ul> < 'ul>, внутри
которых содержатся теги <li> </li>. Форму маркера можно изменить с помо-
щью атрибута типа <ul typc~"squarc"> или <li type="square"> .
В этом случае маркер принимает форму квадрата. Маркер может при-
нимать форму:
Квадрата (square), окружности (circle), лиска (disc). По умолчанию
маркер имеет форму диска.
Нумерованный список создается с помошыо тегов <о!> <7о1>
54
Форматирование текста
При использовании атрибута start нумерацию можно начать с любого
значения.
Краткие итоги
Язык HTML имеет достаточно большой набор средств для изменения
вида (формы) Web-страницы.
Таблицы
55
10.2. Таблицы
Таблицы могут использоваться для упорядоченного размещения чи-
словых данных, текста, рисунков (фотографий), анимации, видео. Таблицы
используются для разметки Web-страниц.
Некоторые разновидности форм простых таблиц показаны на сле-
дующем рисунке.
	
	
	
	
	
	
	
	
Таблица создается с помощью тегов <table> </table>. Внутри этих те-
гов размещаются другие теги и атрибуты. Простейшая таблица выглядит в
виде одной ячейки (рамки). Код такой таблицы выглядит так:
<table width=”90%” cellspacings" 12" cellpadding="40" bordcr="8">
<tr>
<tdx/td>
</tr>
</table>
Теги <tr> </tr> задают строки таблицы. Теги <td></td>oiipe;i.enflioT
ячейки. Содержимое такой таблицы записывается между тегами <tdx/td>.
Толщину внешней рамки таблицы задает атрибут border=''8". Толщина
выражается в пикселях. Если сделать толщину бордюра нулевой (Ьог-
der="0"), то рамка таблицы будет невидимой. Такие таблицы удобно исполь-
зовать для разметки Web-страницы. Атрибут cellspacings" 12" задает рас-
стояние от бордюра таблицы (внешней рамки) до границы ячейки. Атрибут
cellpadding="40" определяет расстояние от границ ячейки до границ содер-
жимого ячейки, например, текста или рисунка. Другими словами: этот атри-
56
Таблицы
бут определяет величину пустого пространства между содержимым ячейки и
границами ячейки. Схема отсчета перечисленных расстояний приведена на
рисунке.
(граница таблицы) ячейки	ячейки
С помощью атрибута типа width^"90%" (или width=”200”) задается
ширина таблицы. Ширину можно задавать в пикселях вши в процентах от
ширины экрана (ширины страницы, видимой в окне браузера). Таблица мо-
жет содержать одну строку и два столбца. Код такой конструкции представ-
лен ниже.
<tablc width="90%" cellspacing="6" cellpadding—'20" bordcr="4">
<tr>
<tdx/td>
<td></td>
</tr>
</table>
Теги <tr> </tr> задают строки таблицы (в данном случае она одна). Те-
ги <td></td> задают ячейки (в данном случае их две). Содержимое ячейки
записывается между открывающим и закрывающим тегами. Например:
<td>HcpBaH	KonoiiKa</td>
<td>Bropafl KonoHKa</td>
Заголовки строк и столбцов задают с помощью тегов <th> кото-
рые записываются вместо тегов <td></td>. Текст, заключенный между тега-
ми <th> <7th>, автоматически выделяется полужирным шрифтом и позицио-
нируется по центру ячейки.
Таблицы
57
Заметим, что действие атрибутов, входящих в тег <table>, распростра-
няется на всю таблицу. Атрибуты тега <tr> действуют на всю строку. Нако-
нец, атрибуты тега <td> форматируют содержимое отдельной ячейки.
Атрибут bgcolor="#00ffff’ задает цвет фона таблицы. Теги
<tr>,<td>,<th> можно дополнять атрибутами позиционирования по горизон-
тали align и позиционирования по вертикали valign. Аргументами атрибута
align Moiyr быть слова: left (влево), center (по центру), right (вправо). Аргу-
ментами атрибута valign могут быть слова: top (вверх), middle (в середину),
bottom (вниз).
Ниже приведен HTML-код таблицы, в которой содержимое ячеек вы-
равнивается различными способами по горизонтали и по вертикали.
<tablc align—'center" cellspacing="4" ccllpadding—"4" border="4">
<tr>
<td align-‘center" >Выравнивапис no neiiTpy<7td>
<td align=,,right">BbipaBHHBaHHc BnpaBo</td>
<td align- '1сЙ">Выравниваиис влево</1ё>
</tr>
<tr>
<td valign-"top">BbipaBHHBaHnc по верхней границс<Лд>
<td valign="bottom">BbipaBHHBaHHe по нижней границс<Л:ё>
<td valign^"middlc">I(eHTpHpoBaHHC по всртикали<Лй>
</table>
Таблица может состоять из одной строки и двух столбцов (колонок).
Немецкий язык:	Русский язык:
Baum	Дерево
Wasser		Вода	
Таблица может состоять из двух строк:
1. Говоритс правду - и вы будете оригинальны.
2. Машины должны работать. Люди должны думать.
Таблица может состоять из четырех ячеек (матрица 2x2).
58
Таблицы
Объединяя смежные ячейки из этой таблицы можно получить четыре
других вида таблиц.
Ячейка А получена путем объединения ячеек 1 и 2 в таблице 2x2
Ячейка В получена путем объединения ячеек ] и 3 в таблице 2x2.
Ячейка D получена путем объединения ячеек 3 и 4 в таблице 2x2
Для объединения двух столбцов используются теги вида:
<td colspan=,,2"> D </td>
Для объединения двух строк используются теги вида:
<td rowspan—'2"> В </td>
Очевидно, что для увеличения числа объединяемых строк или столб-
цов аргумент "2" нужно увеличить.
С помощью тегов <th> </th> в верхней строке следующей таблицы
выделены фамилии писателей.
Станислав Ежи Лец	Пол Эрлих
Электронный мозг будет думать за нас точно так же, как электриче- ский стул за нас умирать.	Человеку свойственно оши- баться, но для нечеловече- ских ляпов нужен компьютер.
Таблицы
59
С помощью атрибута bgcolor="M)Offff' можно определить цвет фона
таблицы.
Атрибуты align="lcft" , align-'center" и align="right" позволяют выров-
нять таблицу по левому краю, по центру и по правому краю страницы.
[Позицион ировапо  {влево |
С помощью атрибута типа width=”50%" можно задавать ширину таб-
лицы (в процентах или пикселях).
Ширина
таблицы состав-
ляет 50% от ши-
рины экрана.
Использован
атрибут width
="50%".
Ширина таблицы
составляет 70% от ширины
экрана.
Использован атри-
бут width ="70%".
Ширина таблицы составляет
90% от ширины экрана.
Использован атрибут
width ="90%".
Ширина
таблицы со-
ставляет 100
пикселей.
Использован
атрибут width
=”100".
Действие атрибутов, входящих в тег <table>, распространяется на всю
таблицу. Атрибуты тега <tr> действуют на всю строку. Наконец, атрибуты
тега <td> форматируют содержимое отдельной ячейки.
60
Таблицы
В приведенной таблице в первой строке использовано выравнивание
текста вправо. Во второй строке сделано выравнивание по центру. В каждой
ячейке использован свой атрибут установки цвета.
Теги с именами tr, td, th можно дополнять атрибутами позиционирова-
ния по горизонтали align и позиционирования по вертикали valign.. Аргумен-
тами атрибута align могут быть слова: left (влево), center (по центру), right
(вправо). Аргументами атрибута valign могут быть слова: top (вверх), middle
(в середину), bottom (вниз).
Выравнивание по центру	Выравнивание вправо	Выравнивание влево	
Выравнивание по верхней гра- нице	Выравнивание по нижней границе		Центрирование по вертикали	
Таблицы являют-
ся эффективным
средством раз-
метки страницы.
Невидимые таб-
лицы позволяют
размещать в сво-
их ячейках текст
и изображение.
Если выбрать
толщину бор-
дюра равной
ну'лю, то таб-
лица становит-
ся невидимой.
Однако, за счет
атрибутов cell-
spacing и ccllpad-
ding можно разде-
лять ячейки сво-
бодным простран-
ством.
Многие Web-
страницы по-
строены с исполь-
зованием невиди-
мых таблиц.
Краткие итоги
Таблицы позволяют эффективно размечать Web-ст+раницы. Прини-
мая толщину бордюра равной нулю, можно сделать разметку невидимой
Графика
61
10.3.	Графика*
Графические объекты компактно передают большой объем информа-
ции и оживляют Web-страницу.
По принципу формирования изображений графика делится на растро-
вую (точечную) и векторную. Заметим, что, независимо от природы возник-
новения изображения, на экране дисплея мы наблюдаем растровую картину,
состоящую из множества почти незаметных точек.
Достоинством растровой 1рафики является её реалистичность, доку-
ментальность. Недостаток точечных изображений - большие размеры рас-
тровых файлов. Для устранения этого недостатка современные графические
форматы предполагают использование различных способов сжатия. В рас-
тровой графике каждая точка (пиксель) несет информацию о цвете, яркости,
местоположении. При масштабировании изображения часть точек приходит-
ся исключать (или наоборот добавлять). В результате происходят сущест-
венные геометрические искажения изображаемого объекта. Это еще один
существенный недостаток растровых картинок.
Образно растровую графику можно сравнить с вышиванием "крести-
ком". Изображение вышивки состоит из разноцветных объектов одинакового
размера (крестиков), расположенных в строго определенных местах (в клет-
ках, в матрице). При наблюдении растра с большого расстояния глаз пере-
стает видеть отдельные точки, и возникает иллюзия непрерывного много-
цветного изображения.
Неплохой метафорой для растровой графики может стать мозаика
(панно). Однако для большего соответствия описываемой графики выбран-
ному образу витражи должны состоять из разноцветных стёкол прямоуголь-
ной формы одинакового размера.
Растровый формат изображений легко интуитивно понимается людь-
ми благодаря использованию в быту цифровой техники: фотоаппаратов, со-
товых телефонов со встроенными фотоаппаратами, видеокамер. Одной из
важнейших характеристик этих устройств является размер светочувстви-
тельных матриц, с помощью которых формируются изображения. Матрица
определяет число точек, из которых будет состоять изображение, а, значит,
она определяет и качество изображения
В векторной графике элементами изображений становятся не точки, а
линии и фигуры, которые описываются несложными полиномами (кривые
Безье). Изображение представляет собой математическую модель, которая
описывает протяженность линий, их кривизну, цвет, местоположение.
*Раздел написал совместно с Орловым В.В.
62
Графика
Достоинством векторных изображений является их компактность.
Векторная картинка масштабируется без искажений (если нс учитывать ис-
кажения, возникающие в момент вывода изображения на экран монитора в
точечной форме). Однако, векторные изображения схематичны, упрощенны,
лишены деталей.
Для векторной графики трудно подобрать метафору. Лучше всего
представлять себе векторное изображение, как математическую модель этого
изображения. Математическая модель содержит набор формул, каждая из
которых описывает отдельный элемент векторного изображения.
С большой натяжкой можно сравнить векторное изображение с вы-
шивкой "гладью". В этом случае изображение состоит не из отдельных точек
(крестиков), а из параллельных линий. При этом длина линий и их цвет мо-
гут быть разными. Скорость вышивания "гладью" выше по сравнению с вы-
шиванием "крестиком", однако реалистичность изображения уменьшается.
Как правило, векторные файлы также загружаются быстрее растровых фай-
лов.
В этом сравнении имеются неточности. В векторном изображении ли-
нии не обязательно должны быть параллельными. При формировании век-
торного изображения используются не только прямые линии, но и параболы.
В Wcb-дизайне используются растровый и векторный виды графики.
Растровые изображения должны быть представлены в формате GIF, JPEG
или PNG. В форматах GIF и PNG применяется сжатие изображения без по-
терь информации. В JPEG используется сжатие с потерями. При этом сжатое
изображение будет отличаться от исходного изображения в худшую сторону,
причем возврат к начальному состоянию оригинала после сжатия будет уже
невозможен.
Формат JPEG (Joint Photography Experts Group - Объединенная группа
экспертов по машинной обработке изображений) используется для отобра-
жения многоцветных фотографий (более 16 миллионов цветовых оттенков).
Ниже приведен пример изображения в формате JPEG.
Графика
Самара. Филармония
Основная идея сжатия изображения методом JPEG сос гоит в следую-
щем. Осуществляют трансформацию и юбражения из пространственной об-
ласти в частотную область. Для этою используют преобразование Фурье.
Сжатие изображения осуществляют в частот ной области, путем испо тьзова-
ния спектрального анализа. 11ри этом из спектра ч зс гот сжимаемо! о изобра-
жения удаляют высокочастотные составляющие. Тем самым убирают мелкие
детали изображений. Степень сжатия июбражения определяйся чистом
гармоник, используемых для описания карт ины Вс юрат е просгранст вен-
ную область осуществляют с помощью обратною преобразования Фурье
Описанные приемы сжатия изображения широко исп мьзуются в радиотех-
нике для подавления шумов и сжатия звуков! ix фай юр
Вторая идея, которая использовалась при создании алгоритма сжатия
JPF.G, состоит в учете физиолотичсских особенностей зренич человека. Че-
ловек хорошо видит изменение яркости и значительно хуже виды вариадию
цветовых составляющих (число па точек в i та »с намного нпсвосхопт число
колбочек). Эго позволяет в ряде с 1учаев у мент шить объем передаваемой
информации, характеризующей цвета о г.чечыг. ix областей и юбтзжен» «
64
Графика
При выборе степени сжатия в формате JPEG дизайнер эксперимен-
тально ищет компромисс между размером сжатого файла и качеством полу-
чившегося изображения.
Цветовая палитра формата GIF (формат разработан компанией
CompuServ) значительно скуднее (256 цветовых оттенков). Зато файлы фор-
мата GIF позволяют создавать анимацию (картинки, сменяющиеся с большой
частотой). Характерной особенностью формата GIF является возможность
создания ’’прозрачных” изображений. Рисунок, сохраненный в формате GIF,
может содержать прозрачные области, сквозь которые ‘'просвечивает" фон,
расположенный под рисунком. Еще одна любопытная возможность формата
GIF - чересстрочная загрузка. В таком режиме четкость загружаемого из Се-
ти изображения улучшается постепенно. Пользователи могут не терять время
на ожидание полной загрузки рисунка, который их не интересует.
Идея сжатия изображения в формате GIF похожа на идею архивации
методом LZW: происходит учет числа рядом расположенных одноцветных
пикселей. По этой причине формат GIF эффективен для сжатия однотонных,
схематичных изображений (схемы, диаграммы, баннеры). Например:
Информатика
2007
Формат графических изображений PNG (Portable Network Graphics -
переносимая сетевая графика), вероятно, в будущем придет на смену форма-
там JPEG и GIF, так как он вобрал в себя многие их лучшие свойства. Глуби-
на цвета в этом формате составляет 48 бит. Для сравнения отметим, что глу-
бина цвета формата GIF - 8 бит, a JPEG - 24 бита. Прозрачность каждого
пикселя в формате PNG может иметь 256 градаций (в формате GIF лишь две
градации: пиксель или прозрачен или непрозрачен). Прозрачность изображе-
ния определяется с помощью альфа-канала. На следующем рисунке приведен
пример изображения в формате PNG.
Графика
6^
Самара. Управление железной дороги
Векторная графика в Web-дизайне представлена форматом Macrome-
dia Flash. Файлы имеют расширение SWF.
Для отображения роликов в формате Flash на ЭВМ клиента должен
быть заранее установлен соответствующий проигрьн атель. Заметим, чго по
еле установки дополнительные приложений (plug-in"' моапо отобража.т и
другие графические форматы
66
Графика
Краткие итоги
Для отображения растровых изображений в Web-дизайне используют
форматы: JPEG, GIF и PNG.
Форматы JPEG и PNG целесообразно использовать для отображения
многоцветных (фотографических) изображений.
Формат GIF уместно использовать для отображения схематичных и
анимированных изображений.
Для отображения векторной Flash-графики нужно установить специ-
альный проигрыватель. Не все пользователи имеют желание и возможности
устанавливать дополнительные программы. По этой причине дизайнерам
нужно взвесить все достоинства и недостатки, прежде чем использовать век-
торную графику на своих страницах.
Формат PNG имеет объективные преимущества над форматами JPEG
и GIF.
Гиперссылки
67
10.4.	Гиперссылки
Важнейшим достоинством языка HTML является возможность созда-
ния гиперссылок. С помощью гиперссылок устанавливаются связи с другими
местами данного документа (внутристраничныс связи), с другими страница-
ми данного сервера (внутрисистемные), с другими WWW-серверами (меж-
системпые), а также с файл-серверами и почтовыми серверами (межпрото-
кольные). Именно гиперссылки совместно с линиями связи и серверами уча-
ствуют в создании Паутины - WWW. Для определения местоположения от-
дельного ресурса сети используется указатель, который называется URL
(Uniform Resource Locator). URL - это универсальный указатель ресурсов,
адрес, который описывает путь к конкретному документу. Он содержит ин-
формацию об используемом протоколе, имени сервера, имени домена. Ино-
гда приводятся сведения о директории, в которой хранится файл, и имени
файла. Рассмотрим пример создания гиперссылки па страницу, расположен-
ную на другом сервере по отношению к серверу, на котором расположен
просматриваемый документ:
<а hrcf=" http://www.midi.ru ">Midi-My3biKa </а>
Действие этого фрагмента программы таково: на экране появляется
гиперссылка Midi-музыка, при щелчке по которой происходит переход по
адресу http://www.midi.ru.
Заметим, что здесь имя тега обозначено символом "а", имя атрибута -
словом href. Значение аргумента в данном теге - это адрес в сети
(URL=http://www.midi.ru). Следующая гиперссылка позволяет вывести на
экран страницу, расположенную на том же сервере, что и страница, с кото-
рой происходит вызов документа.
<а href="glossary.htm*'>rлоссарий</а>
Заметим, что в данном случае вызываемый документ расположен в
той же папке, что и отображаемый на экране документ.
В рассматриваемом случае аргумент атрибута href имеет значение
glossary.htm. Это значит, что браузер будет искать указанный документ па
данном сервере, в текущей папке. Подобает обратить внимание на следую-
щий момент: если в адресе перехода нс указан каталог (директория, папка),
то переход будет выполнен внутри текущего каталога (папки). Если в адресе
перехода не указан сервер, то переход будет выполнен на страницу, распо-
ложенную на данном сервере, в указанном в адресе каталоге.
Таким образом, если осуществляется переход между документами од-
ного сайта, то адрес можно указывать не полностью. В этом случае исполь-
зуется так называемая относительная адресация. Рассмотрим правила отно-
сительной адресации на примере некоторого сайта (Site), содержащего три
папки (Folder 1...3) и пять Web-страниц (index и docl ...doc4). Файловая сис-
68
Гиперссылки
Folder2
doc2
doc3
Folder3
случае форма
doc4
index
тема сайта показана на рисунке. Что-
бы сделать ссылку из документа
doc2.html на документ doc3.html, дос-
таточно записать относительный ад-
рес doc3.html. В этом
относительного адреса простейшая.
Это объясняется тем, что оба доку-
мента находятся в одной папке.
Ссылка из документа docl.html на
страницу doc2.html осуществляется
так: Folder2/doc2.html. В этом случае
пришлось войти внутрь панки
Folder2. Для осуществления ссылки
из документа docl.html на документ
indcx.html относительный адрес запи-
сывается так: ../indcx.html. В послед-
нем случае необходим переход на
один уровень вверх. Двоеточие и
слеш управляют таким переходом.
Наконец, чтобы сделать переход от
документа doc2.html к странице
doc4.html, следует использовать отно-
сительный адрес ../Foldcr37doc4.html.
Вначале пришлось выйти из папки
Foldcr2, а затем войти в папку
Foldcr3. Относительная адресация
удобна при смене сервера, на котором располагается сайт. Хотя доменный
адрес у нового сайта изменяется, относительные адреса остаются прежними.
Это ускоряет отладку сайта, перенесенного на новое место (на другой сер-
вер).
Следующий фрагмент программы позволяет перейти к заранее отме-
ченному месту на текущей Web-страницс.
<а href—,#bcgin">Пepexoд в начало документа</а>
Аргумент ”#bcgin" указывает метку (опорную точку, якорь, anchor) на
текущем документе, куда должен быть осуществлен быстрый переход. В
рассматриваемом примере произойдет быстрое "листание" документа, и па
экране после щелчка мышью по гиперссылке мгновенно появится начало
просматриваемого документа. Браузер будет искать указаш1ую метку на
данном сервере и на текущей странице. Предварительно точка перехода
должна быть помечена программистом следующим образом:
Естественно, что метка должна располагаться в самом начале доку-
мента (в том месте, куда по замыслу дизайнера должен произойти переход).
Г ипсрссылки
69
При щелчке мышью по гиперссылке Переход в начало документа произойдет
перемещение к якорю со значением атрибута name="begin". Такие метки
удобно использовать при создании больших документов (книг, отчетов, эн-
циклопедий). В начале документа можно поместить оглавление, состоящее
из ссылок на метки, расположенные в заголовках разделов книги. Для того
чтобы прямо с Web-страницы можно было отправить электронное письмо,
нужно в программу включить следующий текст (межпротокольная ссылка):
<а hrcf="mailto:apasarnara@aport.ru">
Электронное письмо Алексееву А.П.</а>
После слова mailto: указан элскгронный адрес получателя писем (это
аргумент атрибута href). Внутри контейнера (между тегами) приведен пояс-
няющий текст, который будет играть роль гиперссылки. Фраза "Электронное
письмо Алексееву А.П." при просмотре в браузере будет подчеркнутой, и
при попадании на нее курсора он превратится в указующий перст (ладошку,
кисть руки). В качестве гиперссылки можно использовать графическое изо-
бражение (рисунок или фотографию). Ниже приведен фрагмент программы,
который позволяет выполнить переход на другую Web-страницу с помощью
щелчка мышью по рисунку (изображение кнопки - button):
<а href="http://www.rambler.ru">
<img src="http ://www.alcks.pgati-vt.da. ru/button.gif'x/a>
В результате щелчка по изображению кнопки будет вызвана страница,
расположенная по адресу http://www.rambler.ru (отечественная поисковая
система). Изображение кнопки хранится в файле button.gif, который разме-
щен по адресу http://www.alcks.pgati-vt.da.ru/button.gif’. Естественно, что
кнопка должна быть заранее нарисована в графическом редакторе, и файл с
се изображением должен быть помещен на сервер. Из примера видно, что тег
a href—'URL" служит для указания адреса, на который осуществляется пере-
ход со страницы, где видна кнопка.
Язык HTML позволяет запускать звуковые файлы, заранее подготов-
ленные разработчиком страницы. Рассмотрим пример:
Здесь находится звуковой
<а href— 'http://www.aleks.pgati-vt.da.ru/privct.wav">npHBer</a'>
Звуковой файл privct.wav должен быть заранее подготовлен с помо-
щью средств мультимедиа (микрофона и аналого-цифрового преобразовате-
ля) и размещен по соответствующему адресу (в данном случае по адресу
http://www.aleks.pgati-vt.da.ru/privct.wav). На экране монитора поясняющая
надпись и гиперссылка будут выглядеть так:
Здесь находится звуковой привет.
Слово "привет" будет играть роль гиперссылки, и щелчок по нему
приведет к воспроизведению записанного голоса или музыкального произве-
дения с помощью стандартных средств, входящих в состав операционной
системы клиента.
70
Г ипсрссылки
Рассмотрим действующую гиперссылку на звуковой файл, хранящий-
ся в той же папке, что и просматриваемая страница. После щелчка по гипер-
ссылке будет вызван проигрыватель midi-файлов и прозвучит джазовая ком-
позиция. В данном случае гиперссылка имела вид:
<а ЬгсГ="]а2.пйё">джазовая композиция</а>
Гипсрссылки позволяют вызывать на выполнение и другие мультиме-
дийные приложения. Например, видеоклипы. На просматриваемой странице
с помощью графических гиперссылок осуществляется переход к оглавлению
книги, оглавлению сайта и лабораторным работам.
Любопытной формой организации связей является карта-ссылка. Она
представляет собой изображение, содержащее несколько активных областей.
Щелчок по какой-либо активной области вызывает переход на новую стра-
ницу, сайт или другой сервер, адреса которых заранее подготовил дизайнер.
Краткие итоги
Важнейшим достоинством языка HTML является возможность созда-
ния гиперссылок, с помощью которых осуществляется быстрый переход ме-
жду блоками текста одной страницы, между страницами сайта, между сайта-
ми, между серверами.
Отпосшельная адресация упрощает процедуру переноса сайта на но-
вый сервер. При этом изменение доменного адреса не требует большой кор-
рекции сайта.
Файл, с которого начинается загрузка первой страницы сайта, должен
иметь имя index.html.
Следует обратить внимание па написание имен вызываемых файлов.
Серверы, работающие под управлением операционных систем Windows, яв-
ляются регистронезависимыми. Серверы, работающие пол операционной
системой UNIX, чувствительны к изменению регистра. Поэтому файлы с
именем fotoJPG должны вызываться гиперссылкой fotoJPG, но не foto.jpg.
Метатеги
71
10.5.	Метатеги
Мстатсги размещаются в самом начале Web-страницы (между тегами
<hcad> и </hcad>). Мстатсги дают информацию поисковым системам о со-
держании данной страницы или сайта. Они позволяют прямо в заголовке
записать краткий реферат и составить перечень ключевых слов.
Следующий мстатег содержит краткую аннотацию данной страницы:
<mcta namc~"Description" contcnt=" Описание правил использования
мстатсгов ">
Еще один мстатег предназначен для роботов, создающих базу данных
из ключевых слов:
<mcta namc="Keywords" соп1сп1="Метатеги, HTML, структура, заго-
ловок’’>
Метатеги позволяют выбрать кодовую таблицу, что обеспечивает пра-
вильное отображение национальных алфавитов. Например, для кириллицы
следует выбрать кодовую таблицу СР-1251. Это делается с помощью сле-
дующего метатсга:
<meta http-cquiv="Contcnt-Typc" content=”text/html; charset=windows-
1251">
Следующий мстатег указывает страну, на языке которой составлено
описание страницы.
В данном случае атрибут contcnt="rn" указывает на Российскую Феде-
рацию.
<mcta http-cqlliv=,’Contcnt-Languagc,’ content=”ru,,>
Метатсг может давать информацию поисковым системам, через какое
время следует осуществлять повторную индексацию содержимого страницы.
<meta http-cquiv="revisit-aftcr" content-"30 days">
В данном случае робот повторно "осмотрит" данную страницу нс ра-
нее, чем через 30 дней.
С помощью метатсга может быть объявлено о типе данной страницы.
Например, электронная книга декларируется так:
<meta namc="doc-typc" contcnt="Book">
Метатеги позволяют осуществить последовательную загрузку не-
скольких страниц с указанием необходимого времени показа каждой страни-
цы. Например, можно сделать кратковременный вызов страницы, после де-
монстрации которой произойдет автоматический возврат па исходную стра-
ницу.
Мстатсги page-enter и pagc-cxit позволяют создавать видеоэффекты в
момент открытия и закрытия страниц. Видеоэффект в момент ухода со стра-
ницы создастся с помощью метатсга типа:
72
Мстатсги
<meta http-cquiv="pagc-cxit" content="rcvealTrans (Duration=2.0, Transi-
tion=2)">
Видеоэффект в момент захода на Web-страницу создается с помощью
метатсга типа:
<mcta http-cquiv-'pagc-cntcr" content—’revcalTrans (Duration=5.0, Tran-
sition=10)">
В этих мстагсгах атрибут Duration=1.0 задаст длительность видеоэф-
фекта. Атрибут Transitional0 определяет, какой видеоэффект будет проде-
монстрирован. Существует 22 типа видеоэффектов, например,
О - квадрат снаружи внутрь;
1	- квадрат изнутри наружу;
2	- круг снаружи внутрь;
12 - "рассыпание" по отдельным пикселям;
22	- "рассыпание" по столбцам пикселей;
23	и более - случайный видеоэффект.
Таким образом, если нужно создать случайный видеоэффект, длящий-
ся одну секунду при закрытии страницы, то нужно записать метагег:
<mcta http-cquiv-'pagc-cxit" contcnt="rcveaITrans (Duration=I.0, Transi-
tion=23)">
Краткие итоги
Мстатсги позволяют указать общие свойства страницы (язык, автора,
кодировку, краткую аннотацию).
С помощью мстатсгов даются указания роботам по автоматической
обработки информации данной страницы (ключевые слова, периодичность
посещения).
Мсгатсги позволяют формировать разнообразные видеоэффекты.
Карты-ссылки
73
10.6.	Карты-ссылки
Карты-ссылки - это одна из форм организации гиперссылок. Как и
обычные гиперссылки карты-ссылки позволяют сделать переход к другому
блоку текста данной страницы, перейти на другую страницу данного сайта,
уйти на новый сайт или сервер.
Синонимами термина "карта-ссылка" являются: элемент МАР; изо-
бражение-карта; навигационная карта; сегментированная графика; Image
Мар.
Карты-ссылки представляют собой графический объект, у которого
каждой отдельной области изображения поставлена в соответствие своя ги-
перссылка. Это даст возможность Web-дизайнерам создавать некоторый об-
раз (метафору), пояснения к отдельным частям которого вызываются щелч-
ком мыши по активному участку изображения. Активные области могут
иметь форму прямоугольника, круга или многоугольника (полигона). Карты-
ссылки удобно использовать, например, для создания графических меню.
Карты-ссылки имеют большое сходство с графическими ссылками.
Различие состоит в том, что карта-ссылка представляет собой несколько ря-
дом расположенных графических ссылок. Причем все ссылки связаны между
собой композиционно, логически, тематически. Например, карта-ссылка мо-
жет выглядеть в виде глобуса. Выбор части света осуществляется стандарт-
ным щелчком мышью по соответствующей стране. Аналогично могут быть
построены описания конструкций (ЭВМ, автомобилей). Карты-ссылки часто
используют для создания графического меню.
Изображение карты-ссылки формируется следующим образом:
<img src="kartaJPG" width="700"	hcight-,,514" bordcr="0"
usemap—'#plan">
Как видно из приведенной записи, изображение карты-ссылки
karta.JPG вызывается аналогично обычному изображению. Лишь атрибут
usemap—'#plan" говорит о том, что это нс обычный рисунок, а изображение,
содержащее множество гиперссылок.
Теги <тар пате=иИмя карты"> и </тар> создают контейнер, внутри
которого содержится описание активных областей и указание адресов пере-
хода. "Имя карты" определяется пользователем в момент создания карты.
Например, именем карты-ссылки может стать слово plan.
Далее осуществляется описание активных областей изображения, ка-
ждое из которых впоследствии станет гиперссылкой. Описание реализуется
простановкой координат активных областей и указанием адресов, по кото-
рым произойдет переход в случае активизации соответствующей гиперссыл-
ки. Для каждой активной области можно выводить альтернативный текст,
который появляется в момент попадания курсора на активную область.
74
Карты-ссылки
Синтаксис атрибутов, ответственных за перечисленные действия, та-
ков:
<area alt-’Комментарии"	shapc="rcct" coords="528,318,603,421"
href=" 1 .htm">
В переводе на обыденный язык эта команда будет звучать так:
Перейти по ссылке (href) к документу 1 .htm, если произойдет щелчок мышью
в прямоугольной области (shape-'rcct”) с координатами (coords) х 1=528,
у 1=318, х2=603, у2=421. При этом, если курсор попадет на указанную актив-
ную область (area), то на экране должен появиться альтернативный (alt) текст
(в данном случае - это слово Комментарии).
Активные области на изображении карты могут располагаться фраг-
ментарно (часть изображения останется неактивным). Если Wcb-дизайнер
стремится к тому, чтобы при щелчке за пределами активных зон произошел
переход к определенному документу, то можно поступить следующим обра-
зом. Самым последним следует записать атрибут, который позволит охва-
тить всё изображения карты и указать адрес документа, на который будет
происходить переход. Например,
<агеа alt-'Коммснтарии" shape=,,rect" coords="0, 0, xmax, ушах"
hrcf=’’fon.htm">
В данном случае координаты прямоугольной области охватывают все
изображение (от верхнего левого угла изображения карты-ссылки с коорди-
натами 0; 0 до правого нижнего угла с координатами xmax; ушах). Щелчок
мышью в неактивных областях изображения вызовет переход к документу
fon.htm.
Заметим, что если активные области нсрссскаются, то переход осуще-
ствляется на ссылку, которая записана первой.
Язык HTML позволяет выделять активные зоны изображения с помо-
щью фигур трех видов: прямоугольников, кругов и многоугольников (поли-
гонов). Порядок использования прямоугольника уже был рассмотрен. Заме-
тим лишь, что для активного изображения в виде прямоугольника атрибут
shapc="rcct" допустимо не указывать (опускать).
Рассмотрим порядок описания активной зоны в виде круга:
<агеа alt-'Озеро" shapc=’'circle" coords=" 186,81,32" href="16.htm">
В данном случае переход произойдет к документу 16.htm, если выпол-
нить щелчок мышью в круге (shape="circlc"), центр которого имеет коорди-
наты х=186, у=81, а радиус R равен 32 пикселям. Альтернативный текст бу-
дет содержать единственное слово "Озеро".
Активная область в форме полигона формируется так:
<агеа аИ=”Аллся” shape=”POLY” cords-”202,219,203,306,276,297,275,
area alt=" Аллея" shapc="POLY" coords="202,219,203,306,276,297,275,
219" hrcf=" 14.htm
Карты-ссылки
75
В данном случае переход произойдет к странице 14.htm. Активная зо-
на имеет форму полигона (shapc="POLY”). Описанный полигон представляет
собой четырехугольник, однако его углы отличаются от прямых. Аналогично
строят полигоны с большим числом сторон (для этого достаточно указать
координаты всех вершин многоугольника). Таким образом, с помощью поли-
гона можно сформировать активные области в форме треугольника, четы-
рехугольника, пятиугольника, шестиугольника и т.д.
Рассмотрим, как с помощью карты-ссылки можно описать достопри-
мечательности парка отдыха. Вначале нужно подготовить изображение пла-
на парка и соответствующие иллюстрации. В качестве основного изображе-
ния можно использовать, например, фотографию схемы парка.
Имеющееся изображение еле ует подвергнуть стандартной обработке
с помощью одного из графических редакторов, например, Adobe Photoshop.
При этом необходимо скорректировать перспективу, контрастность, произ-
вести ретуширование, с помощью слоев добавить новые элементы, удалить
лишние элементы изображения, произвести заливку иеэстстичных участков
изображения и т.д.
Выделение активных участков на карте-ссылке (и определение их ко-
ординат) осуществляется с помощью HTML-редакторов и специальных ути-
лит. Например, можно использовать р . ы кторы HomcSite+, Dreamweaver,
утилиты MapEdit 2.44, Live Image и др.
Полученная карта-ссылка с изображением плана парка имени 30-летия
11обеды (г. Самара) приведена ниже. Карта с щержит 21 гиперссылку, кото-
рые вызывают кратковременное появление изображений отдельных объек-
тов.
76
Карты-ссылки
УЛ. АЭРОДРОМНАЯ
С помощью атрибута типа
area ак="Вид сверху" coords="0,0,700,514" hrcf="20.htm"
вызывается изображение в тех случаях, когда нс выбран ни один из активных
участков изображения карты.
Краткие выводы
Карты ссылки дают возможность создавать разнообразные графиче-
ские меню с большим числом гиперссылок.
Мультимедиа
77
10.7.	Мультимедиа
Мультимедиа - информационная технология, которая предполагает
одновременное использование текста, рисунков, звуков, анимации и видео.
Чаще всего в Web-дизайне для формирования звуков используются
форматы: wav; mp3; mid; rm.
Форматы wav и mp3 хорошо передают звуковую картину, однако фай-
лы слишком объемны для потокового (on line) воспроизведения звуков. По
современным коммутируемым каналам сложно скачать за короткое время
файлы объемом 3...5 Мбайт. Звуковая картина формата mid схематична (ог-
раниченное число инструментов, электронное звучание). У этого формата
есть возможность имитировать звучание десятков инструментов и нет воз-
можности воспроизводить звучание голоса человека. Однако файлы формата
mid компактны (единицы - десятки килобайт). Формат rm предназначен для
воспроизведения звуков и видео-клипов в режиме реального времени. Для
этого используется соответствующий проигрыватель, например, RcalOne
Player.
Компактность midi-файлов достигается за счет того, что по Сети пере-
даются только ноты (высота, длительность звуков, длительность пауз) и ука-
зывается, с помощью какого инструмента их нужно воспроизводить (то есть
передаются лишь управляющие сигналы). Вся звуковая картина воссоздается
на приемной стороне (аудиокарта клиентской ЭВМ синтезирует звучание
конкретного инструмента). Качество звучания файлов формата mid зависит
от класса установленной на компьютере звуковой карты и во многом опреде-
ляется объемом ПЗУ, в котором хранятся образцы звучания различных инст-
рументов.
Музыку в формате mid можно использовать в качестве фоновой. Рас-
смотрим синтаксис соответствующего непарного тега:
<bgsound sre—'pop.mid" loop—'Г' balance—1000” volume=’’-20" >
Использование приведенной директивы приведет к тому, что звуковой
файл pop.mid прозвучит один раз (1оор="Г') при открытии страницы. При
этом с помощью атрибутов balance и volume сделана балансировка стерео-
системы и несколько убавлена громкость звучания акустических колонок.
Если принять 1оор=’’-1" (или loop—'infinitc"), то фоновая музыка будет
звучать (циклически проигрываться) до момента закрытия данной Web-
страницы.
Если принять значение атрибута balance-*0", то левая и правая аку-
стические колонки будут звучать с одинаковой громкостью (источник звука
будет локализован по центру).
Значение этого атрибута можно изменять от balance~"-l 0000” ло bal-
ance^’10000". При указанных значениях атрибута balance звук будет пооче-
78
Мультимедиа
редко пропадать в одной из колонок. Плавное изменение указанного аргу-
мента приведет к иллюзии перемещения источника звука из одного крайнего
положения в другое.
Атрибут volume позволяет уменьшить громкость звучания от макси-
мального значения (оно определяется настройкой усилителя и микшера опе-
рационной системы) до полного подавления звука. В последнем случае нуж-
но установить значение volume^"-10000".
Музыкальный файл в формате mid можно запустить с помощью ги-
перссылки. Например, это можно сделать с помощью следующего фрагмента
программы:
<а href="mid/opustcla.mid'‘>A.naxMyTOBa. Нсжносз ь</а>
При щелчке по гиперссылке А .Пахмутова. Нежность произойдет вы-
зов проигрывателя, ответственного за воспроизведение звуков в этом форма-
те.
Недостатком формата mid является принципиальная невозможность
воспроизведения голоса. Формат wav свободен от этого недостатка. Однако
за полученные улучшения качества звучания приходится расплачиваться
возросшим объемом звукового файла.
Для воспроизведения звукового файла может быть использована сле-
дующая директива:
<cmbcd src="wav/anek.wav" autostart="False" height=” 150"
width=" 180"></cmbcd>
С помощью атрибута sre указано место, где хранится звуковой файл
anek.wav. Атрибут autostart=" False" препятствует автоматическому запуску
звукового файла на воспроизведение в момент открытия страницы. Запуск
осуществляется по желанию пользователя с помощью манипулятора "мышь”.
Атрибуты height-' 150" width-'180" определяют размеры видимого на экране
дисплея проигрывателя.
Заметим, что для автоматического запуска звукового файла необходи-
мо установить атрибут autostart—'True". Например, как в следующей дирек-
тиве:
<embcd src="art.wav" autostart="True" height^" 150" width="180">
Очевидно, что загрузка объемных wav-файлов по Сети связана с су-
щественными затратами времени.
Рассмотрим еще один способ работы со звуковыми файлами формата
wav. Следующий тег позволяет вызвать проигрыватель для прослушивания
звука.
<objcct data: ‘’'ringin.wav" type~"audio/wav" x/object>
Очевидно, что с помощью атрибута data указывается путь к звуковому
файлу. Атрибут type "audio/wav" определяет тип воспроизводимого мульти-
медийного файла. В данном случае это звуковой файл формата wav.
Мультимедиа
79
Звуки формата mp3, как правило, по качеству несколько хуже звуков
формата wav. Объясняется это тем, что формат mp3 получается путем сжатия
с потерями исходных звуковых файлов. Степень сжатия определяет степень
ухудшения качества звучания. Искусство дизайнера состоит в том, чтобы
найти границу (компромисс) между приемлемым качеством звучания и до-
пустимым объемом файла. Описываемая ситуация сходная с проблемой гра-
фических файлов. Графический редактор Adobe Photoshop позволяет найти
компромисс между хорошим качеством изображения и небольшим размером
графического файла. Аудио-файлы удобно обрабатывать с помощью звуко-
вого редактора Sonic Foundry Sound Forge.
Естественно, что для современного Web-дизайна такие большие объе-
мы файлов (несколько мегабайт) пока неприемлемы. Поэтому дизайнеры
должны информировать пользователей о величине предлагаемых для про-
слушивания мультимедийных файлов. В то же время использование оптиче-
ских или магнитных дисков для работы на локальных компьютерах с некото-
рым мультимедийным учебным пособием снимает проблему длительной
загрузки объемных звуковых файлов.
Формат rm позволяет в сильной степени сжать аудио- и видеофайлы.
По сравнению с файлами формата wav файлы формата rm меньше в 30...40
раз. В этом формате работают сетевые радиостанции и Интсрнет-
тслевидсние (каналы новостей). При скоростном канале формат пт обеспе-
чивает радиовещание в реальном масштабе времени. Естественно, что
уменьшение объема звуковых файлов формата пл достигнуто за счет ухуд-
шения качества звуковой картины. Особенно заметно снижение качества
звучания на музыкальных произведениях.
Видеоклипы требуют наибольших ресурсов ЭВМ. В Wcb-дизайне для
воспроизведения видео используют следующие форматы: avi; mpeg.
Рассмотрим, как воспроизводить видеоклипы в формате avi. Здесь
приведена директива, предназначенная для запуска видеоклипа в момент
открытия страницы.
<cmbed src=fut.avi width=,,320'’ height="240">
С помощью указанной директивы будет вызван файл fut.avi. Атрибуты
width=”320" hcight-^O" дают возможность изменять размеры "экрана", на
котором демонстрируется клип. При правильной настройке компьютера син-
хронно с изображением будет воспроизводиться звук.
Видео можно запускать динамически, например, наведением курсора
на экран. Возможность динамического запуска видеоклипа достигается с
помощью директивы:
<img dynsrc=',demon.avi" start~mouscovcr>
Изображение появится в момент прикосновения курсора мыши к эк-
рану.
80
Мультимедиа
Недостатком формата avi является невысокое качество сопровождаю-
щего звука, мелькание изображения (низкая частота кадров - 8 кадров в се-
кунду) и небольшие размеры экрана (малое число точек на изображении -
320x240). В шутку изображение в формате avi называют "танцующими мар-
ками".
Формат mpeg обеспечивает приемлемое качество изображения и зву-
ка. В этом формате оцифровано большое количество художественных и
мультипликационных фильмов.
Краткие итоги
Звуковые и видео эффекты повышают выразительность созданной
Web-страницы. Однако из-за недостаточной пропускной способности совре-
менных каналов связи в настоящее время целесообразно использовать муль-
тимедийные файлы с высокой степенью сжатия данных.
Фреймы
81
10.8.	Фреймы
Фрейм (от английского слова Frame) - рамка, часть целого, окно.
Фреймы разбивают видимое на экране изображение на несколько час-
тей (окон, рамок, ячеек). В каждом окис может быть размещен документ с
собственным доменным адресом. Фреймы дают возможность в одном окне
располагать текущую (изменяющуюся) информацию, а в другом окне ото-
бражать меню. Это позволяет легко перемещаться но сайту, благодаря тому,
что при прокрутке просматриваемой страницы элементы навигации остаются
постоянно видимыми.
Заметим, что рядом расположенные фреймы могут содержать страни-
цы, которые расположены в разных папках, на разных сайтах и даже - на
разных серверах.
Существенным недостатком фреймов является сложность индексации
в поисковых машинах. Робот, отыскав нужные ключевые слова, даст ссылку
на единственный фрейм. Поэтому пользователи видят найденную с помощью
поисковой системы страницу без элементов навигации. Это не позволяет
пользователю получить полное представлении об индексированном сайте.
Простейший фрейм представляет собой рамку, внутри которой можно
просмотреть содержимое другой Wcb-страницы. Такая конструкция называ-
ется встроенным фреймом.
Встроенный фрейм создастся с помощью парного тега iframc.
<iframe src=,,../../indcx.htmr width="70%" hcight“"300"x/iframc>
Путь к загружаемой странице определяется с помощью атрибута src.
Ширина фрейма (width) задана в относительных единицах (70% от ширины
окна). Высота фрейма (height) определена в абсолютных единицах (300 пик-
селей).
Чаще встроенных фреймов используются фреймы более сложной кон-
струкции. Они содержат несколько окон, причем в каждом окне можно раз-
местить отдельную страницу с собственным доменным адресом.
Внешне фреймы напоминают таблицы. И в таблицах и во фреймах
размещение информации ведется в отдельных ячейках. Существенное отли-
чие этих конструкций заключается в том, что таблица со всеми ячейками
размещается на одной странице. Для описания фреймов требуется число от-
дельных страниц, равное числу ячеек (рамок, фреймов) и плюс еще одна
страница, на которой описывается конструкция фреймов При прокрутке
(скроллинге) изображения в одном фрейме, информация в других фреймах
остается неизменной. Это даст возможность использовать фреймы как удоб-
ное средство навигации и размещения "неназойливой" рекламы.
Рассмотрим синтаксис описания страницы, которая содержит фреймы.
Такая страница нс содержит контейнер body.
82
Фреймы
Вместо него используется другой контейнер:
<framesetx/framcsct>
При описании размеров фреймов используются абсолютные единицы
измерения (пиксели), проценты и относительные единицы. Если сделать за-
пись:
<framesct cols-' 150,10%,*">
то будет создано три вертикальных фрейма (три столбца, cols). При этом ши-
рина крайнего левого столбца составит 150 пикселей, ширина среднего
столбца составит 10% от оставшегося пространства, а третий столбец займет
свободную справа площадь.
Аналогично формируются горизонтально расположенные фреймы:
<frameset rows-’ 100,*,2*">
В данном случае будут сформированы три полосы: верхняя шириной
100 пикселей, а средняя и нижняя полосы поделят оставшееся пространство
таким образом, что нижняя полоса будет в два раза шире средней полосы.
Данный пример наглядно иллюстрирует использование относительных раз-
меров при формировании фреймов.
Рассмотрим, как создать страницу с четырьмя фреймами. Очевидно,
что конструкция должна содержать две строки и два столбца. Это задастся
следующим кодом:
<framcsct rows="80,*" cols=" 150,*”>
Высота верхней полосы будет равна 80 пикселям, нижняя полоса зай-
мет оставшееся пространство. Ширина левого столбца составит 150 пиксе-
лей, правый столбец займет свободную площадь. Четыре фрейма будут обра-
зованы на пересечении рассмотренных строк и столбцов.
Далее нужно дать имена фреймам (например, frame namc="l"), ука-
зать, какой документ должен загружаться в данный фрейм (например,
src-’logo.htmr), определить величину отступа в ячейке по ширине (напри-
мер, marginwidth~" 11"), величину отступа по высоте (например, margin-
hcight="22"), разрешить (yes) или запретить (по) скроллинг (scrolling), разре-
шить (1) или запретить (0) показ границ фреймов (frameborder). Если допол-
нительно в код включить атрибут noresize, то можно запретить пользователю
изменять размеры фреймов с помощью мыши (технология Drag and Drop).
Пример фрагмента кода, который реализует перечисленные действия, приве-
ден ниже:
<frame name="l" src=,,logo.html" marginwidth-’lГ’ marginheight=,,22"
scrolling ”no” framcbordcr=" Г'>
Завершается описание фреймов закрывающим тегом:
</frameset>
Необходимо отметить еще одну особенность фреймов. Для возвраще-
ния па страницу, с которой был сделан вызов фреймов, следует использовать
следующий код:
Фреймы
83
<а href="../freim_s.htm" target=,,_top">
то есть стандартный тег гиперссылок следует дополнить атрибутом tar-
get="_top".
На следующем рисунке показаны некоторые разновидности фреймов,
состоящих из двух областей (1 и 2), трех (3,4 и 5) и четырех областей (6).
Опишем коды, которые позволяют создать подобные виды фреймов.
Для формирования двух вертикально расположенных фреймов (1) ос-
новные теги должны быть такими.
<framesct cols=" 10%,*xframe src=" 1 JPG"xframe src=”2.JPG">
</framcset>
Ширина левого столбца будет составлять 10% от ширины окна. При
этом туда будет загружен рисунок 1.JPG.
Правый столбец будет отображать рисунок 2.JPG.
Очевидно, что в указанные области можно поместить не только ри-
сунки, но и, например, Web-страницы.<br>
Если окно нужно разбить на две горизонтальные прямоугольные об-
ласти (2), то основные теги будут выглядеть так.
<frameset rows— '100, *><framc sre—' 1 .JPG"><framc src= "2,JPG">
</framcsct>
Заметим, что высота верхнего фрейма будет равна 100 пикселям.
Рассмотрим код, предназначенный для формирования трех фреймов
вида (3).
<frameset rows="10%,*"><frame src=,,l.JPG',><framcset cols=" 10%,*">
<framc src= "2JPG"><framc src“"3.JPG"></fraincsct></frameset>
Приведем фрагмент программы, используемый для формирования
трех фреймов вида (4).
84
Фреймы
<framcsct cols=" 10%,*"xframe src=” 1.JPG"xframcsct rows=” 10%,*">
<framc src="2.JPG"><frame src="3.JPG"></framcsct></frameset>
Рассмотрим еще один способ размещения трех фреймов (5).
<frameset cols=" 150,*"><framcsct rows=,,*,*"><frame src="l .JPG">
<frame src="2.JPG"></framesct><frame src=”3.JPG"x/framcsct>
И, наконец, рассмотрим фрагмент программы, используемый для
формирования четырех фреймов вида (6).
<frameset rows- "100,*,20"xframe src=" 1 .JPG"xframcsct cols-'32,*">
<frame src-"2.JPG"><framc sre-'3.JPG"x/frameset>
<framc src="4.JPG"x/franicsct>
Краткие итоги
Фреймы позволяют создавать удобные системы навигации по сайту.
Однако многие специалисты Web-дизайна рекомендуют воздерживаться от
широкого использования фреймов.
Каскадные таблицы стилей CSS
85
10.9.	Каскадные таблицы стилей CSS
Каскадные таблицы стилей - это совокупность правил, которые опи-
сывают стиль оформления Web-страниц.
Каскадные таблицы стилей CSS (Cascade Style Sheets) используют в
тех случаях, когда необходимо установить единый стиль оформления для
нескольких сайтов, нескольких страниц одного сайта, нескольких абзацев,
таблиц, предложений или отдельных слов. Таблицы CSS позволяют сделать
HTML-код компактнее, а значит - уменьшить время загрузки отображаемой
страницы. Они дают возможность увеличить красочность страницы без ис-
пользования 1рафических документов формата BMP, GIF, JPEG. Основным
достоинством каскадных таблиц стилей является возможность изменение
формы сразу нескольких страниц и даже нескольких сайтов.
Напомним, что стиль - это набор правил оформления страницы. Эти
правила могут определять, например, форму текста (наклонный, подчеркну-
тый, синий цвет и т.п.), форму таблиц (толщина и цвет внешней рамки, поря-
док выравнивания текста внутри ячейки).
Стили могут быть использованы для управления свойствами шрифта,
текста, списков, изменения цвета символов и фона, определения границ ме-
жду объектами. Единый стиль оформления сайта позволяет сделать страни-
цы однотипными, узнаваемыми, стандартизированными, удобными в ис-
пользовании.
Каскадные таблицы стилей разработаны для того, чтобы рационализи-
ровать (облегчить) верстку Web-страницы. Они дают возможность формиро-
вать шаблоны, с помощью которых изменение формы Web-страницы проис-
ходит быстрее. При этом появляется возможность одновременного измене-
ния формы сразу нескольких страниц сайта и даже нескольких сайтов. Таб-
лицы CSS как бы отделяют процедуру создания формы документа от проце-
дуры разработки содержания документа. Каскадные таблицы стилей управ-
ляют формой представления документа (размером, гарнитурой и цветом
шрифта, фоном, цветом ссылок, расположением объектов на странице и т.п.).
Каскадные таблицы стилей представляют собой макроязык, который
используется для создания заготовок, наиболее подходящих по эстст ичсским
соображениям конкретному дизайнеру.
Каскадные таблицы стилей могут быть внешними, внедренными и
встроенными. Внешние каскадные таблицы стилей создаются с помощью
отдельного файла, в который дизайнеры заносят описание заранее созданных
стилей. Файл, содержащий описание стилей, должен иметь расширение .css.
Достоинством внешних таблиц является возможность модифицирова-
ния формы страницы без изменения HTML-кода самой страницы.
86
Каскадные таблицы стилей CSS
Внедренные каскадные таблицы стилей декларируются (определяют-
ся) в заголовке Web-страницы (между тегами head). Действие внедренных
таблиц распространяется лишь на одну страницу.
Встроенные CSS создаются непосредственно в момент их использова-
ния (в теле документа, между тегами body). Действие встроенных таблиц
CSS прекращается при появлении тега, завершающего абзац </р>.
Введенные понятия позволяют понять, почему таблицы стилей назы-
ваются каскадными. Объясняется это тем, что форма отображаемой на экра-
не страницы может уточняться последовательно (поэтапно, каскадпо). Сна-
чала указываются общие свойства сайта или страницы с помощью внешнего
файла, затем в заголовке Web-страницы делаются необходимые уточнения и,
наконец, в месте введения текста завершается окончательная коррекция
формы текста, таблицы и т.п. При наличии конфликтов (противоречий) по-
следующие указания отменяют предыдущие указания (то есть последние
директивы имеют более высокий приоритет).
Вызов внешнего стиля разметки из файла осуществляется с помощью
элемента link. Элемент link должен располагаться в заголовке документа.
Например,
<hcad><link href-'apa.css" rcl="styleshect" typc="tcxt/css"></hcad>
В данном случае внешний файл имеет имя apa.css.
Приведем пример внешнего файла, содержащего описание одного из
возможных стилей.
body {background: blue; color: white;
font-family : "Times New Roman", serif;
font-size: 14px; tcxt-align: justify;}
p {text-indent: 11mm;}
h2 {font-size: 14pt; color: green;}
hr {color: blue; height: 3 pt;}
Описание дает следующие указания (команды) браузеру на формати-
рование текста. Сделать фон документа синим (background: blue;). Использо-
вать белые чернила для изображения текста (color : white;). Выбрать гарни-
туру Times New Roman (font-family : "Times New Roman", serif;). Установить
высоту символов 14 пикселей (font-size: 14рх;). Сделать выравнивание текста
по ширине окна (text-align: justify;). Установить величину отступа ("красную
строку") 11 мм (text-indent : 11 mm;). Для заголовка тина h2 установить раз-
мер символов 14 пунктов (font-size: 14pt;), а цвет - зеленый (color: green;).
Задать цвет горизонтальной линии (отлиновки) - синий (color: blue;), а высо-
ту линии - 3 пункта (height: 3 pt;).
Описание стиля внедренных таблиц происходит с помощью элемента
(тега) style, размещаемого в заголовке Web-страницы (внутри контейнера
<hcad> </head>). В этом случае действие созданного стиля распространяется
Каскадные таблицы стилей CSS
87
на содержимое всей страницы. Приведем пример описания внедренного сти-
ля.
<hcad> <stylc typc="tcxt/css"> hl {font-size: 18pt; coloured;} </style>
</head>
Объявление и использование встроенного стиля происходит с помо-
щью атрибута style, но не в заголовке страницы, а непосредственно в элемен-
те (теге) разметки. Этим способом можно изменить свойство стандартного
тега в момент набора текста в HTML-редакторе. Такое изменение стиля дей-
ствует на небольшом участке текста (локально), например, в пределах абза-
ца. Этот способ порой называется английским термином inline (встроенный).
Приведем пример встроенного стиля.
<р stylc=,,linc-hcight:30 pt">
За счет этой директивы расстояние между соседними строками отме-
ченного абзаца будет установлено 30 пунктов.
Самым важным достоинством CSS является возможность изменения
стиля на больших площадях HTML-документа, а нс локальные изменения.
По этой причине встроенные таблицы CSS следует считать менее перспек-
тивными по сравнению с внешними и внедренными каскадными таблицами
стилей.
Образно встроенные таблицы CSS можно назвать одноразовыми (или
локальными) таблицами, внедренные CSS - неоднократно используемыми
(или региональными), а внешние CSS - многоразовыми (или глобальными)
таблицами стилей.
Рассмотрим, каким образом описываются правила формирования сти-
лей.
селектор {свойство 1: значение 1; свойство 2: значение 2;...}
Итак, правила состоят из селекторов и описаний их свойств. В качест-
ве селекторов используются стандартные имена тегов, свойства которых не-
обходимо дополнить или изменить. Все, что находится в фигурных скобках,
принято называть определением (или описанием). Рассмотрим конкретный
пример.
h2{color: red; font-size: 10 pt;}
Здесь имя селектора h2. В данном правиле использовано два свойства
color и font-size. Перечисленные свойства принимают значения соответст-
венно red и 10 pt. Нетрудно заметить, что свойства разделяются точкой с за-
пятой, а значения указываются после знака двоеточия. За счет использования
данного стиля помеченный с его помощью текст будст выделен красным
цветом (red), а символы будут иметь размер 10 пунктов (pt).
Селекторы допускают группировку, которая делается в тех случаях,
когда разным тегам необходимо придать одинаковые свойства.
Например,
hl,h2,h3 {color: Blue;
88
Каскадные таблицы стилей CSS
font-family: "Times New Roman", Times, serif;
font-weight: bold;}
Группировка трех селекторов позволила задать одинаковые свойства
сразу трем заголовкам (типа hl, h2 и h3). Указанные заголовки будут выде-
лены синим цветом. Будет использована гарнитура Times New Roman. Сим-
волы заголовков будут иметь полужирное начертание.
Для закрепления навыков использования CSS образуем стиль, кото-
рый позволяет формировать отступ при переходе к новому абзацу (так назы-
ваемую "красную строку").
р {text-indent: 15 mm;}
Такая модификация селектора позволяет начинать каждый новый аб-
зац (параграф) с отступом, равным 15 мм.
Порой требуется одному и тому же тегу (элементу) придать разные
свойства. Например, в одном случае заголовок типа Ь2 должен быть выделен
зеленым цветом, а в другом этот же тип заголовка - красным. Подобные за-
дачи решаются путем использования классов и идентификаторов. Во внеш-
нем файле следует поместить описание двух кжюсов:
h2.grccn{
color: green
h2.rcd{
color: red
}
Вызов созданных классов в местах форматирования тс кеч а осуществ-
ляется так:
<h2 class^"green">3aronoBOK будет зслсным</Ь2>
<h2 class’s"red">3arojioBOK будет красным</Ь2>
Каскадные таблицы стилей обладают свойством наследования. Это
означает, что при использовании вложенных тегов, один из которых описан
во внешнем файле, форматируемому тексту передаются свойства всех тегов.
Следующий стиль имеет название элемента, которое нс совпадает с
именем какого-либо тега:
.whiteblue { color: &FFFFFF; background-color: #0000FF }
В данном случае цвета (белые чернила и синий фон) заданы в шестна-
дцатеричной системе счисления. Нужно обратить внимание на то, что перед
именем селектора поставлена точка.
Каскадные таблицы стилей позволяют использовать большое число
селекторов, свойств и их значений. Так таблицы спецификации CSS2 содер-
жат более ста свойств. Полное и подробное их рассмотрение потребует не-
допустимо большого времени и объема текста. В необходимых случаях для
выбора нужных элементов, свойств и их значений следует обращаться к
справочной литературе [3] или базам помощи, которыми оснащены Web-
Каскадные таблицы стилей CSS
89
редакторы. Видимо, в подобных ситуациях следует отдать предпочтение ре-
дакторам таблиц CSS. Удобен в работе редактор каскадных таблиц стилей
TopStyle фирмы Bradsoft.
TopStyle Lite 3.10
File Edit View Options Help
5 f 5Ж I * •	1
&П I TopStyle Blog
~ и
Style Inspector
h3
IO
Preview
text-align: justify;
color: Blue:
text-indent: 10mm;
:| < CSS Level 1
color
font-family:
font-style: italic;
color: Fuchsia;
text-indent
E background
backgi ound-atta...
background-color
backgi ound-image
back gr ound-posi...
10rrm
Element р
»

I
Element h3
Click hen? For information about TopStyle Pro
Программа содержит три окна. В верхнем псвом окне демонстрирует-
ся код стиля. В правом верхнем окне приводятся свойства и их значения.
Подбор свойств и значений осуществляется интерактивно с учетом контек-
ста. В нижнем окне редактора демонстрируются действия созданных стилей.
Четвертая слева кнопка на панели инструментов позволяет выбрать нужный
селектор.
Следует обратить внимание на то, что директивы на языке CSS можно
записывать заглавными и строчными буквами (их работоспособность нс за-
висит от выбранного регистра). Напомним, что теги языка HTMI также рс-
гистронсзависимы.
90
Каскадные таблицы стилей CSS
Рассмотрим несколько примеров использования встроенных CSS.
Расс
вами в
НИИ со
т о я н и
этом
с т а в л
е меж
пред
я е т 3
ду б у к -
ложе-
м м .
Такое форматирование (изменение межбуквенного расстояния) вы-
полнено с помощью атрибута lctter-spacing:<p style="font-family:Couricr New
Cyr; lctter-spacing:3 mm">
Каскадные таблицы стилей позволяют изменить межстрочное рас-
стояние. Можно увеличить расстояние между строками. В данном случае оно
составляет 30 типографских пунктов (один пункт содержит 0,35 мм).
Это реализовано с помощью элемента <р style=”Iine-height:30 pf‘>.
Данный абзац начинается с отступа (’’Красной строки”) размером 12
мм. Такое форматирование текста обеспечивает элемент < р style=’’tcxt-
indcnt:12 mm">.
Этот абзац выровнен по правому и по левому краям. Такое выравнивание
чаще всего используется в книгах и статьях. Крайние буквы строк на левой и
правой границах страницы выстраиваются вдоль вертикальных линий. Такой
вид форматирования обеспечивает элемент <р stylc=”text-align:justify”>.
Краткие итоги
Каскадные таблицы стилей позволяют отделить процедуру создания
содержания страницы от процедуры придания ей нужной формы.
Внешние CSS дают возможность управлять формой сразу нескольких
Web-страниц и даже сайтов.
Язык JavaScript
91
11. Язык JavaScript
JavaScript - это объектно-событийный язык сценариев. В этом опреде-
лении содержатся три ключевых понятия: сценарий, событие и объект.
Сценарий (скрипт, script) - программа, которая расширяет возможно-
сти языка HTML. Скрипты обрабатываются (интерпретируется) браузером
одновременно с кодом HTML.
Событие - действие пользователя или операционной системы, которое
вызывает запуск скрипта (программы). В качестве примера произошедших
событий можно назвать: нажатие клавиши на клавиатуре, щелчок мышью,
открытие окна браузера, срабатывание таймера.
Объект - контейнер, содержащий данные. Объект обладает свойствами
и методами, предназначенными для изменения этих свойств. Сценарии по-
зволяют изменять свойства объекта в соответствии с планом, разработанным
дизайнером. Объектами являются: окно браузера (window), Web-страница
(document), фрейм (frame), текстовое поле (text), кнопка (button). Часть объ-
ектов находятся в состоянии соподчипепиости друг к другу (иерархии).
Старшие объекты включают в себя младшие объекты. Например, Web-
страница (document) может содержать внутри себя форму (form), которая
может быть реализована в виде текстового поля (text).
Свойства - совокупность переменных, которые характеризуют объект,
например, ширина и высота окна браузера.
Методы - функции (подпрограммы), которые позволяют изменять
свойства объекта (а значит и сам объект). Характерной синтаксической осо-
бенностью методов является то, что их имена заканчиваются скобками. На-
пример, opcn(), closc(), write(). Кроме того, имена методов чаще всего явля-
ются глаголами, которые указывают на выполняемые действия: открыть,
закрыть, написать.
Программистами создано большое число оригинальных скриптов
(программ-сценариев обработки каких-либо событий с последующим изме-
нением свойств объектов). Скрипты позволяют создавать разнообразные эф-
фекты и выполнять различные действия, например: изменять цвет и форму
кнопки при наведении на нее курсора, определять версию браузера клиента,
выводить на экран местное время, изменять цвет фона страницы и т.д. При
создании скрипта у програмистов имеется большой простор для творчества
Можно выбирать разные события, от которых происходит запуск скрипта.
Программист самостоятельно определяет на какой объект будут направлены
запанированные им действия.
Следует обратить внимание на тот факт, что язык JavaScript имеет
средства для решения математических и логических задач, выполнения сим-
вольных операций, работы с датами и временем.
92
Язык JavaScript
Язык JavaScript существенно отличается от процедурных (алгоритми-
ческих) языков. Работа программ, написанных на алгоритмических языках,
идет практически непрерывно от момента их запуска до момента заверше-
ния. Скрипты - это множество программ, которые работают чаще всего неза-
висимо друг от друга и каждая программа запускается автономно при опре-
деленных действиях пользователя. По этой причине этот язык иногда назы-
вают интерактивным. При отсутствии активных действий пользователя
скрипты не будут рабогать (за исключением, может быть, сценариев, кото-
рые запускаются с помощью таймера или в момент полной загрузки Web-
страницы). Большую часть времени скрипты "дрсмят", ожидая активных
действий пользователя.
Язык JavaScript разработан фирмой Netscape (1995 г.). В противовес
этому языку фирма Microsoft создала язык VBScript. Однако язык VBScript
поддерживается только браузерами Internet Explorer, поэтому язык JavaScript
получил большее распространение в Web-дизайне. Порой этот язык называ-
ют межбраузерным, так как он одинаково успешно работает на разных типах
браузеров (Internet Explorer, Netscape Navigator,. Opera). Язык JavaScript рас-
ширяет возможности языка HTML за счет того, что позволяет программно
изменять значения атрибутов HTML. При эгом происходящие изменения
наблюдаются без перезагрузки Web-страницы.
Рассмотрим основные сведения об этом языке. Элементами языка яв-
ляются:
Константы.
Переменные.
Функции.
Операторы.
Выражения.
Константы - величины, которые по изменяют своих значений в про-
цессе работы скрипта. Константы бывают следующих типов:
Целые (десятичные, восьмеричные, шестнадцатеричные).
С плавающей точкой.
Строковые.
Булевы (логические).
Констанз'а null, означающая отсутствие каких-либо значений (другими
словами, null - это ничего нет, пусто).
Переменные - это величины, которые принимаю!' различные значения
в процессе работы скрипта. Технически переменные следует представлять
себе, как ячейки оперативной памяти, содержимое которых может изменять-
ся в процессе вычислений. При этом некоторым ячейкам памяти програм-
мист временно даст собственные имена.
Переменные могуг быть глобальными и локальными. Локальные пе-
ременные действуют только внутри функции. 1 лобальные переменные дей-
Язык JavaScript
93
ствуют в рамках всей составленной программы. Однако, и глобальные пере-
менные действуют лишь в пределах одной Web-страницы.
Имена переменных должны начинаться с буквы или с символа под-
черкивания. В именах допустимо использование арабских цифр. Имена не
могут содержать пробелов. Они нс должны совпадать с ключевыми (зарезер-
вированными) словами языка JavaScript. Перечень ключевых слов можно
найти в различных литературных источниках. Например, в [7].
Так же как и константы, переменные могут быть целыми, с плаваю-
щей точкой, строковыми и булевыми. Перед использованием переменные
должны быть объявлены. Делается это так:
var = vol_sound;
vary 12 - 3.123;
var x = "Alisa";
В приведенном примере объявлены зри переменные. Причем для пе-
ременных у 12 и х сразу определен их тип (соответственно с плавающей точ-
кой и строковая переменная ).
Переменные могут быть сгруппированы в массивы. Массив - это про-
нумерованный набор переменных, называемых элементами массива. Поряд-
ковые номера элементов (переменных) называют индексами.
Функция - логически завершенный фрагмент программы, предназна-
ченный для решения (реализации) определенной задачи. Каждая функция
имеет оригинальное (неповторяющссся) имя. Одна и та же функция может
быть многократно вызвана в разных местах программы.
Операторы - конструкции, которые определяют, какие действия про-
изводятся над константами, переменными, функциями. Операторы бывают
следующих типов:
Присваивания.
Сравнения.
Арифметические.
Инкремента и декремента.
Битовые.
Логические.
Строковые.
Специальные.
Управляющие.
Цикла.
Выражения - набор констант, переменных, функций, соединенных
операторами. Каждое выражение в языке JavaScript должно заканчиваться
точкой с запятой.
Программа, написанная на языке JavaScript, чаще всего размещается
внутри HTML-кода, например, внутри контейнера из тегов head. Границы
сценария отмечают при помощи парного тега script. Заметим, что существует
94
Язык JavaScript
возможность разместить код скрипта в отдельном файле. В этом случае
можно вызывать один и тот же сценарий на разные HTML-страницы.
Для языка JavaScript важным понятием является ’’объектная модель".
Образно это понятие можно представить так. Существует несколько ящиков,
внутри которых лежат матрешки. Чтобы положить записку в нужную мат-
решку следует открыть соответствующий ящик и все матрешки, которые
охватывают выбранную программистом матрешку. Возвращаясь к реальным
объектам можно сказать: ящики - это окна браузеров (их может быть от-
крытке несколько). Матрешками являются: документы (Web-страницы),
фреймы... Для того чтобы выбрать нужное свойство объекта следует указать
полный путь к нему: объект! .объект2.объектЗ.свойство. Одна из реальных
конструкций вложенных объектов может быть такой: win-
dows. document.forma2.text 1 .value=Proba. Подобная конструкция может ис-
пользоваться для записи слова “Proba" в текстовое поле с именем text! фор-
мы forma2, которые находятся внутни окна window3. По структуре объектная
иерархия напоминает файловую систему, в которой фигурируют диски, пап-
ки и файлы.
Краткие итоги
Язык JavaScript используется для расширения возможностей языка
HTML.
Основными понятиями, которыми оперирует язык JavaScript, являют-
ся :объекты, события, методы, свойства.
Сценарии, написанные на JavaScript, обладают наибольшей совмести-
мостью со всеми типами браузеров.
Порядок запуска скриптов
95
11.1.	Порядок запуска скриптов
Рассмотрим, как запускается простейший скрипт, код которого раз-
мещен в заголовке Web-страницы между тегами head.
Листинг программы и схема расположения кода скрипта на Web-
странице приведены ниже.
<hcad>
♦ • *
<script language-'JavaScript">
function func()
а1ы1("Простсйший скрипт, код которого расположен между тегами
head”);
}
</script>
<7head>
<body>
• • 4
<input tupe=’’Button" уа1ие=''Щелкнитс" onclick=''func()”>
</body>
</html>
Внешним проявлением работы скрипта станет изображение команд-
ной кнопки.
I Щелкните
При щелчке по изображенной кнопке появится сообщение:
96
Порядок запуска скриптов
Анализируя листинг приведенного скрипта, можно сказать, что код
скрипта и обработчик событий находятся на одной Wcb-страпице. Для за-
пуска сценария используются объект - кнопка (Button) и событие - щелчок
(click), которое с помощью обработчика события onclick активизирует функ-
цию func(). Функция func(), в свою очередь, осуществляет вывод информа-
ции на экран с помощью метода alcrt(). Тело скрипта отделяется от заголовка
Web-страницы с помощью парного тега script. В открывающем теге скрипта
указано имя языка (language) - JavaScript. Заметим, что код скрипта может
располагаться практически в любом месте HTML-страницы (даже за преде-
лами HTML-контейнера).
Второй способ запуска скриптов состоит в создании отдельного фай-
ла, который содержит код скрипта. Рассмотрим пример.
Пусть текст скрипта, расположенного во внешнем файле, будет таков:
function func2()
а1сП("Скрипт располагается во внешнем файле с именем script2.js”);
В данном случае сценарий располагается в отдельном файле с именем
script2.js. Имя файла и путь к нему указывается с помощью атрибута sre (ис-
точник). Подсоединение этого файла к HTML-коду осуществляется с помо-
щью строки:
<script language="JavaScript” sre-,script2.js,'></script>
Данная строка располагается между тегами head.
Запуск скрипта можно осуществить с помощью командной кнопки.
Ниже приведен код, используемый для запуска скрипта с помощью команд-
ной кнопки.
<input tupe=,’Button" уаШс^Щслкнитс1' onclick="func2()">
В результате действия этого кода появится изображение командной
кнопки_______________
I Щелкните
Щелчок по этой кнопке приведет к выполнению сценария и появле-
нию следующего сообщения:
Порядок запуска скриптов
97
Microsoft Internet Explorer
Скрипт располагается во внешнем файле с именем scriptZ. js
OK
Третий способ запуска созданных скриптов предполагает использова-
ние гиперссылки (псевдо-URL):
Текст кода, запускающего скрипт, приведен ниже:
<а href— 'javascript:alert('CKpHnT запущен с помощью гиперссылки
');">Щелкните здесь<7а>
В результате работы скрипта на экране появится гиперссылка:
Щелкните здесь
При щелчке по гиперссылке появится окно:
98
Методы ввода информации
11.2.Методы ввода информации ^
.•	J-
В этом разделе будут рассмотрены способы ввода информации. Д ля
ввода данных можно использовать интерактивные формы, текстовое поле,
текстовую область, методы conffrmO H promtO.
Ввод информации с помощью метода confirmO
99
11.2.1. Ввод информации с помощью метода confirmO
В том случае, когда в программу достаточно ввести всего два значе-
ния, например, "да" или нет", то удобно использовать метод confirm(). Диа-
логовое окно этого метода содержит две кнопки ОК и Отмена.
С помощью этих кнопок формируются две логических величины: true
- при нажатии кнопки ОК и false - при нажатии копки Отмена. Введенные
значения затем могут быть использованы по усмотрению дизайнера.
Microsoft Internet Explon - Д|
Результат fake
Код программы, использующей метод confirmO, приведен ниже.
<script language="JavaScript”>
function conf()
var x = сопйпп("Нажмите кнопку OK или Отмена ");
а1сП("Результат:"+ х);
<7script>
<input type="Button" name="butr’ valuc=:,,3anycK метода confirmO" on-
click="confO">
100
Ввод информации с помощью метода confirmQ
Дадим краткие комментарии к данной программе. Функции дано имя
conf. Значение, введенное с помощью метода confirm(), присвоено перемен-
ной х. Результат выбора одной из двух кнопок (ОК или Отмена) выводится с
помощью метода alert(). Запуск программы осуществляется с помощью со-
бытия onclick, возникающего при щелчке по кнопке "Запуск метода соп-
firmQ"
Ввод информации с помощью метода pronipt()
101
11.2.2. Ввод информации с помощью метода promptQ
Метод promt позволяет вводить значение переменной с клавиатуры.
Например, присвоим поочередно двум переменным х и z некоторые число-
вые значения. Затем найдем сумму этих переменных у - х + z. Результат вы-
числений выведем на экран с помощью метода alert. Код такой программы
приведен ниже:
<script language="JavaScript">
function summ()
var x = promptf'Введите число x",
var z = рготр1("Ввсдите число z”,
x=parseFloal(x);
z=parseF!oat(z);
var у = x+z;
а1ей("Результат сложения у = "+ у);
</script>
Запуск скрипта можно осуществить с помощью командной кнопки.
<input tupc-'Button” уа1ие="Щелкните" onclick="summ()">
Последняя строка кода отобразится на экране в следующем виде:
Щелкните
После щелчка по кнопке появится диалоговое окно, в которое нужно
ввести первое слагаемое.
В следующее диалоговое окно нужно ввести второе слагаемое
102	Ввод информации с помощью метода promptQ
_	* • - эЧ? - - . i •
Запрос пользователи:
Запрос сценар ия	0 <
Введите число z
Отмена
Р	____
--------------—---
Результат операции появится в новом окне
Преобразование строковых переменных в числовые переменные фор
мата с плавающей запятой осуществлено с помощью функции parseFIoat 
Если строковую переменную нужно перевести в целочисленную пороме
ную, то используют функцию parselnt(). Без указанных функций преобразс
вания будет выполнена операция конкатенации (соединения) двух строковые
значений х и z. Например, при вводе двух чисел 2 и 3 вместо ожидаемо»
ответа 5 появится строковое значение 23.
Заметим, что преобразование строковой переменной в числовую мож-
но сделать проще: для этого достаточно строковую переменную умножить ic
единицу.
Ввод информации с помощью текстового ПОЛЯ
103
11.23. Ввод информации с помощью текстового поля
Рассмотрим скрипт, который позволяет вводить текстовую информа-
цию с клавиатуры в специально отведенное текстовое поле. Для работы сле-
дующего скрипта нужно ввести имя пользователя в указанное поле, а затем
щелкнуть мышью за пределами поля ввода. Имя пользователя на некоторое
время будет запомнено на компьютере-клиенте.
Изображение текстового поля показано на следующем рисунке.
это поле введите Ваше имя !
Рассмотрим код этого скрипта.
<form name-'form 1">
<input type="text" name^’textl" sizc="30" value="B это поле введите
Ваше имя " onblur="chck()" >
</form>
<script languagc="JavaScript">
function chek() {
d = document, form 1 .textl .value;
а1сг1("Приятно с Вами познакомиться, " + document.forml.textl.value)
</script>
Если в текстовое поле ввести имя Alisa, то в результате выполнения
скрипта на экране появится сообщение
Текстовые поля позволяют организовать математические вычисления.
Например, следующий скрипт создает два текстовых поля, в которые нужно
ввести два числа. Результат суммирования этих двух чисел появляется на
экране после щелчка по кнопке
104
Ввод информации с помощью текстового поля
Введите два других слагаемых вместо чисел 2 и 3:
Первое слагаемое Ь	I
Второе слагаемое |3	|
Результат суммирована я
Приведем код этого скрипта.
Вначале опишем текстовое поле, а затем приведем код скрипта, вы
полняющего операцию сложения.
<fbrm name=Mform2">
Первое слагаемое
<input type="text" name-’textl Г' sizc="5" value="2" Xbr>
Второе слагаемое
<input type-’text” name-’text21” size="5,‘ value="3" xbr><br>
<input type="Button" value—'Результат суммирования” on-
click=”summO”
</form>
<script language="JavaScript”>
function summ() {
var a=41ocument.form2.textl 1 .value;
var b=document.form2.text21 .value;
var c=l*a+l*b;
alert(a + " + " + b + ,, = ,, + c)
<^script>
Вид формы (текстовое поле) задан фрагментом кода type=''text”.
По умолчание в первое поле введено число 2, а во второе поле - числ<
3. Обработка введенных чисел произойдет с помощью функции summ(), вы-
зов которой происходит при щелчке (onclick) по кнопке (Button) с надписы
"Результат суммирования".
В теле скрипта считывание переменной «а» происходит путем проходг
всей иерархии объектов: документ - форма - текстовое поле - введенн f
значение. На языке JavaScript это реализуется так:
Ввод информации с помощью текстового поля
105
var a=documentform2.textl Lvalue;
Аналогично вводится переменная «Ь»:
var b=document.form2.text21 .value;
Преобразование текстовых переменных в числовые переменные осу-
ществляется умножением текстовых переменных на единицу:
var c=l*a+l*b;
Для вывода полученного результата знаки «+» и «=» взяты в кавычки.
Кроме того, для создания символьной переменной использовано четыре сим-
вола конкатенации (сложения)
alert(a + " + ,, + b + ” = " + c)
Выполнение скрипта приведет к появлению следующего сообщения
106 Ввод и вывод информации с помощью текстовой области tcxtarca
11.2.4. Ввод и вывод информации с помощью
текстовой области textarea
Форма tcxtarca (текстовая область) по назначению и принципу рабэть
напоминает форму "Текстовое поле", которое задается конструкцией тиги
<input type="text" ... >. Текстовая область превосходит текстовое поле п
удобству работы с большим объемом обрабатываемой информации. Данная
форма позволяет работать с многострочным текстом. Так же, как и текстовое
поле, текстовую область можно использовать как для ввода, так и для выво
информации.
Текстовая область textarea позволяет ввести (и вывести) большой объ-
ем многострочного текста. Размер текстовой области (окно для ввода и вы-
вода информации) определяется с помощью атрибутов (свойств) cols и rov
(соответственно, столбцы и строки). При этом атрибут cols определяем
сколько символов можно разместить в одной строке. Атрибут rows задае7
число строк, видимых в текстовой области.
Следующий скрипт демонстрирует возможность языка JavaScript счи-
тывать информацию из текстовой области, превращать содержимое окна в
текстовую переменную, выводить эту7 переменную с помощью метода ale t i
Скрипт позволяет изменить содержимое текстового окна и измененный тете
вывести в информационном окне. Для запуска скрипта нужно нажать н
кнопку "Запуск".
ТЕКСТОВАЯ ОБЛАСТЬ
Текстовая область textarea позволяет
ввести (и вывести) большой объем
многострочного текста. Размер текстовой
области (окно для ввода и вывода
информации) определяется с помощью
Содержимое текстовой области можно изменить. Например, можно
написать слово «Проба».
После щелчка по кнопке «Запуск» появится следующее сообщение:
Ввод и вывод информации с помощью текстовой области textarea 107
Приведем код данного скрипта.
<form name-"formTa,'>
<textarea name- ‘tar I" cols="40" rows=,,5" >
Текстовая область textarea позволяет...
Здесь размещается текст, выводимый по умолчанию.
</textarea>
</form>
<form name="formBut">
<input type=Button value—’Запуск"
onclick=”javascript:Func I ();">
</form>
<script Ianguage=nJavaScript">
function FunclO {
var a=document.fonnTa.tarl .value;
// Переменной а присвоено содержимое текстовой области
alert(a);
</script>
108
Интерактивные формы
--- ------------------------ ---------------------
11.2.5. Интерактивные формы
Интерактивное взаимодействие пользователя с ЭВМ нередко орган! •
зуют с помощью различных форм: кнопок, переключателей (радиокнопок
включателей (флажков), списков. Такие элементы удобно использовать, на-
пример, при проверке знаний учащихся (школьников, студентов).
Наиболее просто интерактивное взаимодействие пользователя с ЭВ1'
реализуется с помощью кнопок. Ниже приведен пример несложного тест;
рования обучаемого (например, ученика начальных классов) путем выбор'
одного верного ответа из трех предложенных.
Вопрос: сколько будет 24-3?
Если щелкнуть по кнопке с изображением цифры 5, то появится со
общение:
Выбор цифр 4 или 6 приведет к появлению другого сообщения:
Ниже приведен листинг этого скрипта.
Интерактивные формы
109
<form name="Testr>
<table align-’center” cellspacing-’2” cell paddings" 2" bordcr="3">
<tr>
<td>Bo3MO»Hbie ответы </td>
<td><input type=Button value-"4"
onclick—'javascript:Nevemo();"x/td>
<td></td>
<td><input type—Button value=,,5"
onclick="javascript:Vemo 1 ();"></td>
<tdx/td>
<tdxinput type=Button value-’6"
oncIick="javascript:Nevemo();">
</td>
</tr>
</table>
</form>
<script language="JavaScript,’>
function Vemolf) {
alertf'Bbi - математик...*');}
function NevemoO {
alert(" Шутите?”);}
</script> Button
В приведенной программе неправильный выбор ответа обрабатывает-
ся с помощью функции NevemoO- Выбор правильного ответа запускает
функцию VemolO- Для запуска скрипта используется однократный щелчок
левой кнопкой мыши (onclick) по кнопке (Button).
Эта же задача тестирования может быть решена несколько иначе: с
помощью радиокнопок (переключателя).
но
Интерактивные формы
Сколько будет 2+3?
Проверка решения
Для запуска тестирующего скрипта нужно активизировать одно из по-
лей переключателя и нажать на кнопку «Проверка решения».
В результате этого на экране появится одно из двух сообщений.
Приведем код этого скрипта.
<form name=,,Test2">
<table aligns "с enter" cellspacings1^" cellpadding=”2" border=”3">
<tr>
<1ё>Переключатсль<М>
<td>l 1одсказки</1<1>
</tr>
<tr align-’center">
<tdxinput type=radio value="l" name="Otv"></td>
<td>4</td>
</tr>
<tr align-'center">
<td><input type=radio value= ”2" name=”Otv”></td>
<td>5</td>
Интерактивные формы
111
<tr align-'center">
<tdxinput type=radio value="3" name=*'Otv**x/td>
<td>6</td>
<tr>
<tr align-'center' >
<td colspan=''2,,xinput type=button уа1ие="Проверка решения”
name="Go" onclick="javascript:Rbut();"></td>
</tr>
<7table>
</form>
<script language=”JavaScript">
function Rbut()
otv=document.Test2.Otv[l].checked;
if (otv^alertC'riOTpHcaroiixe!");}
else {alert("yBbi..'’);}
</script>
Более серьезная задача проверки знания таблиц истинности с помо-
щью командных кнопок может быть реализована следующим образом.
Выберите правильный ответ
112
Интерактивные формы
Выбор правильного или ошибочного ответа приводит к появлению
одного из двух сообщений.
Код скрипта размещен ниже.
<form name="Tcst3">
<table align=’'ccnter" cellspacing="2" cellpadding-’2" border="2">
<tr align=''center">
<td colspan="4">Логический элемент ИЛИ<Ьг>
(операция дизъюнкции, <Ьг>логическое сложение)
</td>
<tr align="center”>
<td>Honi4ecKHC <Ьг>выражения<М>
<td со18рап=и2,,>Возможные <Ьг>ответы </td>
<Лг>
<tr align="center">
<td>0 V 0 =</td>
<tdxinput type=Button value-'1”
onclick-javascript:No();"x/td>
<tdxinput type=Button value="0’'
onclick=',javascript:Yes();"x/td>
<tdx/td>
</tr>
<tr align="center">
<td>0 V 1 x/td>
<td><input type=Button vakie="l"
onclick="javascript: Y esQ;"x/td>
<tdxinput type=Button vahie="0"
onclick="javascript:No();"x/td>
</tr>
Интерактивные формы
113
<tr align— 'center*>
<td>l V 0 =</td>
<td><mput type=Button value3" 1"
onclick="javascript:YesO;,,></id>
<tdxinput type-Button value="0"
onclick="javascript:No();"x/td>
<tr>
<tr align="center">
<td>l V 1 =</td>
<tdxinput type=Button value="l"
onclick=?,javascript:Yes();,’></td>
<tdxinput type=Button value=”0"
onclick=:’’javascript:NoO;''x/td>
</tr>
</table>
<7form>
<script language3" JavaScript">
function Yes() {
alertC’BepHo");
function No() {
а1еЛ("Ошибка");
</script>
Эту же задачу можно решить с помощью переключателей (радиокно-
пок).
114
Интерактивные формы
Выберите правильный ответ
При работе с этой формой нужно активизировать одно из двух воз-
можных состояний каждого переключателя и сделать щелчок по кнопке, на-
ходящейся в соответствующей строке.
Возможная реакция скрипта на действия пользователя показана на ри-
сунке.
Листинг данного скрипта приведен ниже.
<form name=,’Tcst4,’>
<table align="ccnter" cellspacing="2" ccllpadding="2" border="2">
<tr align~"center">
Интерактивные формы
115
<td со15рап=,,4">Логический элемент ИЛИ<Лс1>
<Лт>
<tr align—’center">
<td rowspan=" 2 ">Логические <Ьг>выражения<Лё>
<td colspan="2">Bo3MOJKHbic <Ьг>ответы<Л<1>
<td гсм8рап="2">Для проверки <Ьг>принятого решения<Ьг>сделайте
щелчок<Ьг>по KHonKe</td>
</tr>
<tr align="center’'>
<td>l<td>
<td>O</td>
</tr>
<tr align="center">
<td>0 V 0 =</td>
<td><input type=radio valuc="r' name="Otvr'><7td>
<td><input type=radio value="2" namc="Otvr'x/td>
<tdxinput type=button value-'Проверка"
name="Go" onclick="javascript: Anaiizl ();"><7td>
</tr>
<tr align="center">
<tdX) V 1 =</td>
<tdxinput type=radio value="r' name— 'Otv2"xftd>
<td><input type=radio value="2” name="0tv2"X/td>
<tdxinput type=button value—'Проверка"
name="Go" onclick=njavascript:Analiz2();"x/td>
</tr>
<tr align="center">
<td>l V0=</td>
<tdxinput type=radio value=" I *' name-"0tv3"x/td>
<tdxinput typc=radio value="2" name-,'Otv3"x/td>
<tdxinput type=button уа1ие=”Проверка"
name=,,Go" onclick="javascript:Analiz3();"x/td>
<tr align="center”>
<td>l V 1 =<td>
<td><inputtype=radio value^"!" name="Otv4,’></td>
<tdxjnput type=radio value-'2" name="Otv4"x/td>
<tdxinput type=button уа1ие="Проверка"
name="Go" onclick="javascript:Analiz4();,,x/td>
<tr>
</table>
<form>
116
Интерактивные формы
<script language-’JavaScript">
function Analizl О {
otv 1 =document.Test4.Otv 1 [ 1 j.checked;
if (otvl ){alert("BepHo!*');}
else {а1еП("Увы..");}
</script>
<script language=’'JavaScript">
function Analiz2() {
otv2=docuinent.Tcst4.Otv2[0].checked;
if (otv2){alertCBepHo!");}
else {alertf’yBbi..'');}
</script>
<script language="JavaScript">
function Analiz3() {
otv3=document.Tcst4.Otv3[0].chccked;
if (otv3){alert(”BepHo!”);}
else {alertf’yBbi..");}
</script>
<script language="JavaScript">
function Analiz4() {
о tv4=document.Test4.Otv4[0].checked;
if (otv4){alert("BepHo!");}
else {alertC’yBbi..");}
</script>
Приведем пояснения к данной программе.
Первая строка истинности обрабатывается с помощью функции
Analizl 0, вторая строка - с помощью функции Analiz2() и т.д.
Следующий скрипт показывает, как с помощью флагов (включателей)
решается задача проверки знания таблицы истинности логического элемента
ИЛИ. В поля, где должны быть логические единицы, следует ставить флаж-
ки. Поля, где должны быть логические нули, должны остаться пустыми. Для
проверки принятого решения нужно сделать щелчок по кнопке "Проверить
решение".
Интерактивные формы
117
Выберите правильный ответ
Возможные ответы компьютера на действия пользователя показаны на
рисунке.
Код программы приведен ниже.
Microsoft Internet Explore
Ответ неправ» пьный
<form name-'TestFlag">
<table align-’center" cellspacing—*2" ceHpadding="2" border=”2’’>
<tr align="center">
<td colspan- ”2">Логичсский элемент ИЛИ<Ьг>
(операция дизъюнкции, <Ьг>логическое сложение)
</td>
118
Интерактивные формы
<tr align- 'center">
<1й>Логические <Ьг>выражения<А(1>
<1<1>Для ввода 1<Ьг>установите флаг</1<1>
</tr>
<tr align="center">
<	td>0 V 0 =</td>
<td><input type—'Checkbox" value-' 1" name—'Otvvl''></td>
</tr>
<tr align-’center">
<	id>0 V 1 =</td>
<tdxinput type—'Checkbox" value—'2" name—'0tw2"x/td>
</tr>
<tr align-’center">
<	td>l V 0 =</td>
<td><input type—'Checkbox” value=”3" name—'Otw3"></td>
</tr>
<tr align—'center">
<	td>l V 1 =<td>
<td><input type—’Checkbox" value—’4" name—'Otvv4"><7td>
</tr>
<tr align—"center" >
<td colspan—'2">
<input type—'Button" value—’Проверить решение" name—’But" on-
click="javascript:Diz();">
</td>
</tr>
</table>
</form>
<script language—'JavaScript">
function Diz() {
Otvs=new My Array(0,0,0,0);
var Kol^=4;
for (i=0; i<Kol; i+=l){
Otvs| i]=document.TestFlag.elements[iJ.checked;
Vemo=0tvs[l]&&0tvs[2]&&0tvs[3]&&!0tvs[0];
if (Vemo)
{alertC'OrBer правильный1’); }
if (! Vemo)
{alertf'OTBCT неправильный");}
Интерактивные формы
119
function MyArray(Otl,Ot2,Ot3,Ot4){
this.Otl=Otl;
this.Ot2=Ot2;
this.Ot3=Ot3;
this.Ot4=Ot4;
</script>
Для интерактивного взаимодействия пользователя с ЭВМ может быть
использован список, из которого следует выбирать подходящий ответ. На-
пример, так, как это сделано в следующем скрипте.
Какой логический элемент описан с помощью
этой таблицы истинности?
Выберите ответ из предлагаемого списка
Элемент И (конъючкция)	>Г
Элемент ИЛИ (дизъюнкция)
Элемен г ИСКЛЮЧАЮЩЕЕ ИЛИ (неравнозначность >1
Реакция программы на действия пользователя будет такой (в зависи-
мости от правильности ответа):
120
Интерактивные формы
Приведем листинг программы.
<table align=*’center" cellspacing="2" cellpadding="2" border="2">
<tr>
<th>x<sub>2<7sub></th>
<th>x<sub> 1 </sub></th>
<th>y</th>
</tr>
<tr>
<td>O</td>
<td>0<7td>
<td>O</td>
</tr>
<td>O</td>
<td>l<td>
<td>l</td>
<7tr>
<tr>
<td>l<td>
<td>O</td>
<td>l<td>
</tr>
<tr>
<td>l</td>
<td>l<7td>
<td>l</td>
<tr>
<7table>
<br>
<p align="center”>Bbi6epHTe ответ из предлагаемого списка</р>
<div align="center">
Интерактивные формы
121
<form name=”Diz4”>
<select name="Otvet4" size="3” onchange-*javascript:Analiz6();">
<option value=" 1">Элемент И (конъюнкция)
<option уа1ие=*2">Элсмент ИЛИ (дизъюнкция)
<option value-'3">Элемент ИСКЛЮЧАЮЩЕЕ ИЛИ (неравнознач-
ность)
<option ¥а1ис-"4">Элемент ИЛЙ-НЕ (стрелка Пирса)
<option уа1ие="5">Элемснт И-НЕ (штрих Шеффера)
<option уа1ие="6">Элемент ИСКЛЮЧАЮЩЕЕ ИЛИ-HE (равнознач-
ность)
<option ¥а1ие=’’7">Инвсрсия (отрицание)
</select>
</form>
</div>
<script language=JavaScript>
function Analiz6() {
otvet=document.Diz4.0tvet4.selectcdIndex;
if(otvet=l) {а1сП("Да");}
else {alert("HcT’');}
</script>
Списки позволяют выбирать несколько правильных ответов из множе-
ства предложенных (многовариантный ответ). Этим списки несколько напо-
минают включатели (флажки). Рассмотрим скрипт, позволяющий делать
множественный выбор из предложенного списка ответов.
Задание.
Из восьми предложенных строк выберите четыре строки, которые
описывают работу логического элемента ИЛИ. Для множественного выбора
используйте клавишу Ctrl. Для проверки найденного решения нажмите кноп-
ку "Проверить решение".
122
Интерактивные формы
BV0«1
0V1 =0
Проверить решен ле
Варианты возможных ответов компьютера показаны на рисунке.
Приведем код программы.
<form namc="Diz5">
<select name="Otv" size=”8" multiple>
<option value—"l">0 V 0 = 0
<option value="2">0 V 0 = I
<option value=’'3”>0 V 1 = 0
<option value="4">0 V I = 1
<option value—'5">1 V 0 = 1
<option value-‘6">1 V 0 = 0
<option valuc=”7'*>l V 1 = 0
<option valuc="8">l V 1 = 1
</selcct>
<br><br>
<input type=”Button" уа1ие=”Проверить решение" name="Go" on-
click="javascript:Func5();">
<7fonn>
<7div>
Интерактивные формы
123
<script language=JavaScript>
function Func50 {
Otvs=new Mass(0,0,0,0);
var Strok=8;
for (i=0; i<Strok; i+=l) {
Otvs[i]=document.Diz5.Otv.options[i].
selected;
Da=0tvs[0]&&0tvs[3]&&0tvs(4]&&0tvs[7];
Net=Otvs[l ]|Otvs[2]|Otvs[5]|Otvs[6];
Result=Da&&!Net
if(Result) {а!ег?(*Ответ правильный**);}
else {а1еП("Ответ неправильный");}
}
function Mass(Otl ,Ot2,Ot3,Ot4) {
this.Otl=Otl;
this.Ot2=Ot2;
this,Ot3=Ot3;
this.Ot4=Ot4;
</script>
Следует обратить внимание на то, что имена форм в пределах одной
страницы должны быть разными. Они как бы являются именами разных пе-
ременных. Поэтому их совпадение недопустимо.
124
Методы вывода информации
11.3.	Методы вывода информации
♦ *
В этом разделе будут рассмотрены способы вывода информации на
экран дисплея. Вывод можно осуществить с помощью окнй браузера, тексто-
вой области, текстового поля, методов writeO и aiert().
Вывод информации с помощью метода alcrt()
125
11.3.1.	Вывод информации с помощью метода alertQ
Вывод текстовых сообщений можно осуществить с помощью метода
alcrtf). Например, Щелчок по командной кнопке «Просмотр» вызовет появ-
ление сообщения.
Просмотр
Примерный вид сообщения показан ниже.
Код использованного скрипта достаточно прост:
<input type="button" value—’Просмотр"
onclick- а1ег1("Метод alert позволяет выводить на экран текстовые со-
общения")^
Однократный щелчок по кнопке "Просмотр" (событие onclick) активи-
зирует метод alert(). Благодаря этому на экране появляется сообщение, раз-
мещенное в кавычках.
126
Вывод информации с помощью метода writeQ
11.3.2.	Вывод информации с помощью метода writeQ
Вывод результатов работы скриптов можно осуществить с помощью
метода write. Рассмотрим скрипт, который выполняет арифметические опе-
рации над двумя числами (х=8 и z=3) и выводит результаты на экран дис-
плея.
Результат сложения: х + z = 11
Код программы приведен ниже:
<script language=’'JavaScript”>
х=8;
yAdd-x+z;
document.\угЙе(”Результат сложения: х + z = ”+yAdd);
<7script>
Вывод информации с помощью текстового поля
127
11.3.3.	Вывод информации с помощью текстового поля
Особенностью рассматриваемого ниже скрипта является то, что два
текстовых поля будут использованы для ввода информации, а в третье тек-
стовое поле будут выводиться результаты вычислений.
Текстовые поля позволяют организовать математические вычисления.
Например, следующий скрипт создаст два текстовых поля, в которые нужно
ввести два числа (по умолчанию эти числа 2 и 3). Результат суммирования
этих двух чисел появляется на экране после щелчка по кнопке "Вычислить ".
Введите два других слагаемых вместо чисел 2 и 3:
Первое слагаемое
Второе слагаемое |3
Вычислить
Результат
Приведем код рассмотренного скрипта.
Введите два других слагаемых вместо чисел 2 и 3:
<form name="form2">
Первое слагаемое
<input type="tcxt" name="textl 1" size=,,5" value="2" xbr>
Второе слагаемое
<input type="tcxt" name="text21" size—"5" value="3" ><brXbr>
<input typc="Button" уаШе^’Вычислить" onclick="summO"<brxbr>
Результат
<input type=’’text” name=,'text31" size~"5" value="" >
</form>
<script language=”JavaScript">
function summ() {
var a~document.form2.tex11 j .value;
var b=document.form2.text21 .value;
var c=l*a+l*b;
128
Вывод информации с помощью текстового поля
document.fonn2.text31 .value=c;
</script>
В этом скрипте поля, предназначенные для ввода информации, имеют
имена textl 1 и textll. Вывод информации происходит в поле с именем texl31.
Форме дано имя form2. Функция summ(). осуществляет считывание двух чи-
сел из попей textl 1 и text21, преобразование строковых переменных в число-
вые переменные, их суммирование и вывод результата в поле text3. Первому
слагаемому дано имя “а”, второму слагаемому - имя “Ь”, а результату сум-
мирования - имя “с”.
Вывод информации с помощью созданных окон
129
11.3.4.	Вывод информации с помощью созданных окон
Информацию можно выводить в отдельные окна. Здесь рассматрива-
ется скрипт, который позволяет создать два окна (с именами oknol и okno2)
Для создания окон используется метод ореп(). Формирование окон и запись в
них информации происходит с помощью двух функций с именами wino-
penl() и winopcn2(). Запускаются указанные функции с помощью двух кно-
пок, в момент щелчка по ним. Одновременное закрытие созданных (откры-
тых) окон происходит с помощью метода closeQ и соответствующей кнопки.
[Создать окно 1
оздать окно
Закрыть окна
На рисунке показаны командные кнопки и одно их открытых окон.
Ниже показан текст программы.
<script>
function winopen IО
{
oknol^window.open("","","top=l 50, lcft=250, width=150, hcight~80‘');
oknol.document. writef'KaK дела?”);
function winopen2()
okno2=window.opcn("",",’,”top=300, lcft=250, width=150, hcight=80");
okno2.documcnt.write(”Bce в порядке.”);
function winclose()
oknol.close();
okno2.close();
</script>
<input tupe="Button'’ уа1ис="Созлать окно 1" onclick-"winopenl()'*>
<input tupe=”Button" ¥а1ис~"Создать окно 2” onclick-,'winopen2()’,>
130
Вывод информации с помощью созданных окон
<inputtupc="Button" value-'Закрытьокна" onclick="winclose()">
Нужно иметь в виду, что метод window.open() позволяет создать новое
окно, то есть выполнить запуск еще одной копии браузера. Предыдущий
скрипт формирует два окна, которые имеют простейший вид (у них удалены
строка состояния, Главное меню, панель инструментов, линейки прокрутки).
В рассмотренном выше скрипте были использованы свойства width и height,
которые позволяют задать ширину и высоту созданных окон. Кроме того, с
помощью свойств top и left определяется местоположение окон относительно
левого верхнего угла экрана. Чтобы получить более полное представление о
возможностях этого метода, рассмотрим еще один скрипт.
На рисунке показаны две командные кнопки, которыми можно создать
и закрыть окно.
{Создать окно
{Закрыть окно
Внешний вид создаваемого окна показан на следующем рисунке.
Приведём код программы.
<script>
function winopen()
Вывод информации с помощью созданных окон
131
okno=window.open("’,,"",,,toolbar=yes, directorics=yes, menubar=yes,
status=yes,
scrollbars-yes,resizable=ycs,top=150,lefb=250,location=yes,width=500,hei
ght=200");
okno.document.writef’OKHO браузера”);
function winclose()
okno.close();
</script>
<input tupe="Button" уа1ис="Создать окно" onclick=’,winopcn(),'>
<input tupe="Button" уа!ис="3акрыть окна" onclick=,,winclosc()">
Анализируя текст программы легко заметить, что создание окна брау-
зера сопровождается определением большого числа свойств. Большинство
значений свойств (атрибутов) могут принимать только два значения: yes (да)
и по (нет). Например, если свойство resizable=no, то окно теряет возможность
изменения своего размера с помощью ручного манипулятора.
При использовании открывающихся окон следует руководствоваться
чувством меры. Нужно помнить, что большое число открытых окон вызыва-
ет раздражение у пользователей.
132
События
11.4.	События
Различные виды событий рассмотрим на примере клавиш и кнопок,
которые запускают в действие практически одинаковые сценарии. Нужно
четко понимать, что здесь рассматриваются различные события, а они, в
принципе, могут инициализировать самые разнообразные сценарии, а не
только те трафаретные, которые представлены здесь.
Событие onmouscover="Func()" запускает функцию Func() в момент
соприкосновения курсора с объектом (в данном случае - это кнопка "Косни-
тесь”).
Коснитесь!
В результате прикосновения к командной кнопке курсором мыши щ
экране дисплея появится следующее сообщение
f \	Сценарий запущен в момент касания курсором площади кнопки
ок
Код скрипта приведен ниже.
<script language="JavaScript">
function Fsobl()
{
а!сг1("Сцепарий запущен в момент касания курсором площади кнот?
ки’’);
</script>
<input typc="Button" valuc="KocHHTCcb!" onmouseover=”Fsobl(),*>
Чаще других событий используется однократный щелчок мышью. За-
пуск обработчика такого события происходит с помощью конструкции оп-
click="Func()"
События
133
Щелкните!
Следует обратить внимание на то, что срабатывание скрипта происхо-
дит в момент отпускания кнопки мыши. Для проверки этого утверждения
можно выполнить щелчок Мышью в замедленном темпе. Обратите внимание
на то, что в момент отпускания кнопки мыши курсор должен располагаться
над кнопкой "Щелкните!".
Результат работы такого скрипта показан на рисунке.
Листинг скрипта приведен ниже.
<script language="JavaScript”>
function Fsob2()
а1сг1("Сценарий запущен в момент щелчка по кнопке");
</script>
<div align="center">
<input type="Button" valuer "Щелкните!" onclick="Fsob20">
</div>
Следующий скрипт срабатывает при двойном щелчке по кнопке. Ини-
циализация сценария осуществляется с помощью события
ondblclick="Func()’'.
Ну * ен х г □ •	ще лчок!
Результат работы скрипта показан на рисунке.
134
События
Текст программы размещен ниже.
<script languagc="JavaScript">
function Fsob3()
{
а1сП("Сценарий запущен с помощью двойного щелчка по кнопке”);
<7script>
<div align="center">
<input type=" Button" уа1ие="Нужсн двойной щелчок!” ondblclick
"Fsob3()">
<7div>
С помощью события onmouseout="FuncO" есть возможность запуска!
в действие функцию в тот момент, когда курсор мыши покидает площад
кнопки.
Проведите пр кнопке!
Результат работы скрипта показан ниже.
Код данного скрипта таков.
<script language="JavaScript,,>
События
135
function Fsob4()
а1сг1("Сценарий запущен в момент выхода курсора с площади кноп-
ки");
<7script>
<div align="centcr">
<input type="Button” уа1ие="Провсдите по кнопке!" onmouseout=
"Fsob4()">
</div>
Обработка события с помощью метода onmousedown="Func()" начи-
нается в момент нажатия кнопки мыши (не нужно дожидаться отпускания
кнопки).
Нажмите! I
Нажатие кнопки приведет к появлению на экране следующего сооб-
щения.
Листинг скрипта приведен здесь.
<script Ianguage=,'JavaScript">
function Fsob5()
а1еЛ("Сценарий запущен в момент нажатия кнопки");
<7script>
<div align="center">
<input type="Button" value-"Нажмите!" onmousedown=’’Fsob5()">
</div>
136
События
Событие onmouseup=,,Func()" запускает функцию Func(), если отпус
какие кнопки мыши произошло над активным объектом (в данном случае -
это кнопка с названием "Срабатывает при отпускании!".
Срабатывает при отпускании!
Результат работы этого скрипта таков:
Microsoft Internet Explorer
Сценарий запущен б момент отпускания кнопки мыши над объектом
Можно экспериментально проверить такой факт: срабатывание скриг.
та происходит при отпускании кнопки мыши на активном объекте. При этом
нажатие кнопки мыши может происходить в другом месте страницы. Бал
же нажатие и отпускание кнопки мыши происходит на кнопке "Срабатывж
при отпускании!", то действие события onmouseup ничем не отличается oi
действия события onclick.
Рассмотрим код скрипта.
<script languagc="JavaScript">
function Fsob6()
{
alcrtf’Сценарий запущен в момент отпускания кнопки мыши над объ-
ектом");
</script>
<input type="Button" уа!ие="Срабатывает при отпускании!" on-
mouseups "Fsob6()">
События
137
Событие onkeyprcss="Func()" активизирует функцию Func() в момент
тажатия клавиши на клавиатуре. Следующий скрипт позволяет выводить на
жран кодовую таблицу СР-1 ?51 для латинских букв, цифр, знаков препина-
ния и т.п. Для букв русского алфавита выводимые коды не соответствуют
СР-1251.
В верхнее поле введите букву латинского алфавита
Внимание! Для русских букв соответствие не выполняется
Листинг предыдущего скрипта таков.
<script language-"JavaScript">
var cQdgs97;
function FpressQ
{
code=window.event.kcyCode;
window.document.Formpres?.InpText2.value="Kofl CP-1251 для нажатой
клавиши равен....." + code;
</script>
<form namc=',Formprcss,'>
<input type "text" name= "InpText" value-"" size-’4’’ onkeypress=
”Fprcss()">
<input type^text" name="lnpText2" уа1ие=‘’Код CP-1251 для нажатой
клавиши равен...." size-"50" >
<7fonn>
Выводимый скриптом код будет синхронно изменят! ся с введением
очередной буквы.
Событие onkeyup-'Tunc(¥’ наступает в момент отпускания клавиши,
нажатой при вводе текста.
138
События
Введите символ
Введение символа с клавиатуры приведет к появлению такого сооб
щения:
Приведем текст программы.
<script languagc=,,JavaScript’’>
function Fprcss2()
а!ет1("Сценарий запущен в момент отпускания клавиши”);
</script>
<div align="ccnter">
Введите символ<ЬгхЬг>
<form name=”Formprcss2”>
<input type="tcxt" name="InpText" value=”w size="4" or
keyup=”Fpress2()">
<7form>
Если в предыдущем скрипте использовать событие onblur, то сценари
будет активизирован в момент потери фокуса. Для запуска скрипта нужн
ввести символ в текстовое поле и щелкнуть мышью за пределами текстовог
поля.
События
139
Введите символ и щелкните за пределами текстового поля
(или нажмите клавишу Tab)
Результат работы скрипта показан на рисунке.
Напомним, что фокусом называется такое состояние объекта, при ко-
тором объект является активным. Например, при установке фокуса на тек-
стовое поле, внутри него мерцает курсор приглашения для ввода информа-
ции (вертикальная линия).
Проявление события можно задержать па некоторое время. Для этого
используется таймер.
Щелкните по кнопке.
JanycK
Щелчок по кнопке «Запуск» приведет к появлению сообщения с за-
держкой в 2 секунды.
Microsoft Internet txplorer
ь
Прошло 2 секунды с момента нажатия кнопки Как быстро бежит время!
140
События
Листинг скрипта приведен ниже.
<script language—’JavaScript’^
function Fprcss4()
wi ndow. timer l=setTimeout("aicrt('npomno 2 секунды с момента нажа-
тия кнопки.' +' Как быстро бежит время!')",2000);
<7script>
<div align-'ccntcr">
Щелкните по кнопке.<Ьг>
<br>
<input type="Button” name="InpText4" value="3anycK" onclick=
"Fpress4()'’>
</div>
В данном разделе рассмотрены не все виды событий (например, собы
тис onload, которое возникает в момент полной загрузки страницы; опепог
проявляющееся при возникновении ошибки и т.д.).
При закрытии страницы можно использовать обработчик события
onunload, который выведет па экран информационное окно. Например, такое.
Microsoft Internet Explorer

Обработчики событий onload и onunload размещаются в теге body..
Появление указанного сообщения осуществляется с помощью сле-
дующего кода:
<body onunload—"alert('flo скорой встрсчи!')">
Арифметические операции
141
11.5.	Арифметические операции
Рассмотрим скрипт, который выполняет арифметические операции
над двумя числами (х=8 и z=3) и выводит результаты на экран дисплея.
Результат сложения: х + z = II
Результат вычитания: х - z = 5
Результат умножения: х * z = 24
Результат деления: х / z = 2.6666666666666665
Результат целочисленного деления: х % z = 2
Результат инкремента х : ++х = 9
Результат декремента z: —z = 2
Результат сложения х + = z. После выполнения операции х= 11
Код программы приведен ниже:
<script languagc="JavaScript">
х=8;
z=3;
yAdd=x+z;
ySub=x-z;
yMult=x*z;
yDiv=x/z;
yMod=x%z;
ylnkr=++x;
yDekr=—z;
x+=z;
document.уугЦеС’Результат сложения: x + z = ”+yAdd+"<br>”);
document. у/гПе("Рсзультат вычитания: x - z - "+ySub+,,<br>");
document.writc("Pe3ynbTaT умножения: x * z = ”+yMuit+"<br>”),
documcnt.writcf'Результат деления: x / z = "+yDiv+”<br>");
document.\угйс("Результат целочисленного деления: x % z =
"+yMod+"<br>'');
document.write("Pe3ynbTaT инкремента x : ++x = "+ylnkr+''<br>");
document. \¥гйс("Результат декремента z : —z = *-tyDckr+"<br>**);
document.лугкс("Результат сложения x + z. После выполнения опе-
рации x= "+x+"<br>");
</script>
Дадим краткие пояснения для некоторых операций. Целочисленное
деление по-другому называется операцией нахождения остатка (или делени-
ем по модулю). Например, если число 15 целочисленно разделить на 4. то
142
Арифметические операции
остаток равен 3.Операция инкремента представляет собой процедуру увели-
чения числа на единицу. Операция декремента уменьшает имеющееся число
на единицу.
В языке JavaScript используется специфическая форма оператора при-
сваивания. Арифметические операции, представленные в сокращенной (мо-
дифицированной) форме, приведены в таблице.
Сокращенный оператор присваивания	Стандартный оператор присваивания
х+=у	х = х + у
х"=у 			Х“Х-у
	х*=у_			X = X * у	
х/—у	х = х/у
			х = х % у
Замелим, что обе формы рассмотренного оператора присваивания мо-
гут быть использованы в программах, написанных на JavaScript.
Логические операции и операции сдвига
143
11.6.	Логические операции и операции сдвига
Рассмотрим скрипт, который выполняет логические операции и опе-
рации сдвига над двумя десятичными переменными х и z и двумя логиче-
скими (булевыми) переменными q и w. Выберем такие значения аргументов:
х = 7
z = 5
q = true
w = false
1.	Результат логического умножения y=x&z (операция И, конъюнк-
ция): у = 5
2.	Результат логического сложения y=x|z (операция ИЛИ, дизъюнк-
ция): у = 7
3.	Результат выполнения операции неравнозначности y=xAz (исклю-
чающее ИЛИ) : у = 2
4.	Результат сдвига влево на один разряд числа х: у=14
5.	Результат сдвига влево на один разряд числа z: у =10
6.	Результат сдвига влево на два разряда числа х: у=28
7.	Результат сдвига влево на два разряда числа z: у =20
8.	Результат сдвига вправо на один разряд числа х: у =3
9.	Результат сдвига вправо на один разряд числа z: у =2
10.	Результат выполнения операции И: q&&w =false
11.	Результат выполнения операции ИЛИ: q||w =true
12.	Результат инвертирования переменной q: !q = false
13.	Результат инвертирования переменной w: !w — true
Код скрипта размещен ниже.
<script language-’JavaScript”>
//Ввод исходных данных
х=7;
z=5;
q=true;
w=falsc;
//Вычисления
yAnd=x&z; //логическая операция И
yOr=x|z; //логическая операция ИЛИ
yXon=xAz; //исключающее ИЛИ
xLcft=x«l; //сдвиг влево на один разряд
zLeft=z«l; //сдвиг влево на один разряд
xLeft2=x«2; //сдвиг влево на два разряда
zLeft2=z«2; //сдвиг влево на два разряда
144
Логические операции и операции сдвига
xRight=x»>l; //сдвиг вправо на один разряд
zRight=z»>l; //сдвиг вправо на один разряд
u=q&&w; //операция И
p=q||w; //операция ИЛИ
r=!q; //инверсия (отрицание)
t=!w; //инверсия (отрицание)
//Вывод результатов па экран
document. writef' 1. Результат логического умножения y=x&z (операция
И, конъюнкция): у = "+yAnd+,’<br>");
documcnt.write("2. Результат логического сложения y=x|z (операция
ИЛИ, дизъюнкция): у = "4-yOr+"<br>");
document.writc(”3. Результат выполнения операции неравнозначности
y=xAz (исключающее ИЛИ): у = ”+уХог+,,<Ьг>");
document.writc("4. Результат сдвига влево на один разряд числа х:
y=,,+xLcft+,,<br>”);
document. writc("5. Результат сдвига влево на один разряд числа z: у
=”+zLcft+,,<br>”);
document.write(’'6. Результат сдвига влево па два разряда числа х:
y="+xLeft2+"<br>");
document.write("7. Результат сдвига влево на два разряда числа z: у
=,,+zLcft2+’,<br>”);
document.write(*'8. Результат сдвига вправо на один разряд числа х: у
-'+xRight+"<br>");
document. write("9. Результат сдвига вправо на один разряд числа z: у
=,,+zRight+"<br><br>,’);
document, writef' 10. Результат выполнения операции И: q&&w
="+u+"<br>");
document, writef'11. Результат выполнения операции ИЛИ; q||w
="+p+"<br>");
document.write("12. Результат инвертирования переменной q: !q =
"+r+"<br>");
document.writc("13. Результат инвергирования переменной w: !w =
"H+"<br>");
</script>
Дадим краткие комментарии к результатам вычислений.
Логическое умножение двух десятичных чисел 7 и 5 дало результат 5.
Объяснить полученный результат можно только с привлечением двоичной
системы счисления и законов булевой алгебры. Перевод десятичного числа 7
в двоичную систему счисления даст результат: 7D — 111В. Десятичное число
Логические операции и операции сдвига
145
5 в двоичной системе счисления имеет вид: 5D = 101В. Результаты поразряд-
ного логического перемножения этих двух чисел приведены в таблице.
Величины	Двоичные разряды |		
	3	2	1|
Переменная x ~7D		j_	1		1J
Переменная z=5D	1	0	I
Результат умножения (х & z)	I 			0	1|
Последняя строка говорит о том, что в результате логического умно-
жения двух десятичных чисел 7 и 5 получено двоичное число 101В = 5D.
Аналогично можно рассмотреть результаты логического сложения
(операция ИЛИ,.________________________________________________
Величины	1	Двоичные разряды		
	1 з	2		1
Переменная x~7D	| 1	1	1
	Переменная z~ 5D		| 1	0		1
	Результат сложения (х | z)	| 1	1		J
Последняя строка говорит о том, что в результате логического сложе-
ния двух десятичных чисел 7 и 5 получено двоичное число 111В — 7D.
Рассмотрим результаты выполнения операции неравнозначности (ис-
ключающее ИЛИ)._____________________________________________
Величины	Двоичные		разряды
	3	1	2	1 -- 	—ч ...-j
Переменная x=7D	1	| 1		1J
Переменная z_5D	1	|	0	1
Результат (х л z)	0	| 1		0J
Последняя строка говорит о том, что в результате выполнения пораз-
рядной операции исключающее ИЛИ над десятичными числами 7 и 5 полу-
чено двоичное число 010В - 2D.
Для понимания полученного результата сдвига числа влево необходи-
мо вспомнить, что старшие разряды двоичных чисел располагаются слева, а
младшие - справа. После сдвига числа x=7D на один разряд влево будет по-
лучено двоичное число 1110В, которое соответствует десятичному числу
14D. Заметим, что операция сдвига двоичного числа на один разряд влево
146
Логические операции и операции сдвига
эквивалентна умножению числа на 2. Сдвиг влево на два разряда эквивален-
тен умножению числа на 4 и т.д.
Заметим, что технически операция сдвига в ЭВМ выполняется с по-
мощью последовательных регистров. При больших значениях взятых чисел
(операндов) точность вычислений будет зависеть от разрядности используе-
мых регистров сдвига (числом установленных в них триггеров). Для языка
JavaScript допустимая разрядность двоичных операндов ограничена тридца-
тью двумя битами. По этой причине операции с числами более
231=2147483648 будут выполняться неверно.
Операция сдвига вправо приводит к уменьшению исходного операнда.
При этом, если младший бит был равен 0, то сдвиг вправо на один разряд
будет эквивалентен делению числа на 2. Например, сдвиг числа 6D=110B
даст результат 11В (это двоичное число соответствует десятичному числу
3D). Если исходный операнд нечетный (двоичное число заканчивается еди-
ницей), то сдвиг вправо не будет соответствовать операции деления на два.
Например, после сдвига числа 5D=101B будет получен результат 10B=2D.
Операции 1...9 проводились над многоразрядными двоичными числа-
ми. Значительно чаще в практике Web-дизайна логические операции исполь-
зуются при формировании условий ветвления. В этих случаях логические
переменные принимают два значения: true (Истина) и false (Ложь). Для фор-
мирования условий ветвления в распоряжении дизайнера имеется три опера-
ции:
-	инверсия (обозначается символом !);
-	операция И (обозначается символами &&);
-	операция ИЛИ (обозначается символами ||).
Р	езультаты 10... 13 демонстрируют использование этих операций.
Операции со строковыми переменными
147
11.7.	Операции со строковыми переменными
В составе языка JavaScript есть средства для работы со строковыми
(символьными) переменными.
Чаще других используется операция конкатенации (объединения,
суммирования) строковых переменных и констант. Например, строковая
операция ,,7"+"3” даст результат "73". В составе языка JavaScript есть мето-
ды, предназначенные для преобразования строковых переменных в число-
вые. Необходимость в подобных методах особенно обостряется в случаях
ввода информации с помощью различных форм (текстовое поле, текстовая
область). Метод parselnt(x,s) преобразует строковую переменную х в цело-
численную переменную, представленную в десятичной системе счисления.
Переменная s учитывает в какой системе счисления (двоичной или шестна-
дцатеричной) выражено число х.
Метод parseFloat(x) преобразует строковую переменную х в вещест-
венную числовую переменную (с плавающей запятой).
Метод Str.charAt(n) позволяет выделить из строковой переменной с
именем Str символ, расположенный в позиции и. Отсчет порядковых номеров
символов начинается с нуля.
Метод Str.substring(n,m) дает возможность выделить из строки с име-
нем Str подстроку, которая располагается от позиции п до позиции т-1.
Свойство Str.length оперсделяет, сколько символов содержится в пе-
ременной Str.
С помощью метода Str.toLowerCaseO можно преобразовать символы
переменной Str в строчные буквы (символы нижнего регистра). Метод
Str.toUppcrCasc() действует "в обратном” направлении: преобразует символы
переменной с именем Str в заглавные буквы (символы верхнего регистра).
Методы Str.indexOf(SubStr,n) и Str.lastIndcxOf(SubStr,n) позволяют оп-
ределить помер позиции подстроки SubStr, начиная с которой подстрока
входит в строковую переменную Str. Поиск вхождения подстроки начинается
с позиции п. Если искомая подстрока отсутствует в составе строки Str, то
метод возвращает результат -1. Различие рассматриваемых методов состоит
в том, что метод indexOf(SubStr,n) ведет поиск подстроки SubStr от начала
строки Str к ее концу (слева - направо), а метод Str.lastIndexOf(SubStr,n) -
наоборот, от конца строки к её началу (справа - налево). Если значение пере-
менной и не указано, то поиск подстроки SubStr ведется для метода in-
dcxOf(SubStr) с начала строки Str, а для метода last!ndexOf(SubStr) - с конца
строки Str.
Ниже приведены примеры использования строковых методов и
свойств.
Конкатенация двух строк "Паро” и “ход” даст: “Пароход”
Конкатенация двух строк 23 и 77 даст: “23 ” + “77 ” = 2377
148
Операции со строковыми переменными
Суммирование двух чисел 23 и 77 даст: = 100
Целочисленное преобразование строки “3.14159” даст: =• 3
Вещественное преобразование строки “3.14159” даст: = 3.14159
Первая буква слова “Строка” - С.
Третья буква слова “Строка” - р.
В слове “Строка” в позициях 3...5 расположена подстрока - рок.
Слово “Строка” содержит - 6 символов.
Символы слова “Строка” преобразованы к нижнему регистру - строка.
Символы слова “Строка” преобразованы к верхнему регистру -
СТРОКА.
Подстрока “рок” входит в слово “Строка”, начиная с позиции - 2. По-
иск - от начала строки.
Подстрока “рок” входит в слово “Строка”, начиная с позиции - 2. По-
иск - от конца строки.
Код данного скрипта приведен ниже.
<script languagc=,,JavaScript">
var str 1-’Строка";
var Sub Str—"рок";
var str2="napo";
var str3=”xofl";
var str4=,’23’';
var str5=',77";
var str6="3.14159";
documcnt.writc(”KoiiKaTeHauHH двух строк &ldquo;Hapo&rdquo; и
&ldquo;xoA&nlquo; даст: " + ”&ldquo;" + str2 + str3 + "&rdquo; " + Чи>");
document.writeC’KoHKaTCuanHfl двух строк 23 и 77 даст: &ldquo;23
&rdquo; + &ldquo;77 &rdquo; = " + str4 + str5 + и<Ьг>");
document.write("CyMMHpoBaHHc двух чисел 23 и 77 даст: = " + (par-
sclnt(str4) 4 parselnt(str5)) + "<br>");
document.у/гйсС'Целочислснное	преобразование	строки
&ldquo;3.14159&rdquo; даст: = " + parselnt(str6) + "<br>");
docurncnt.writc("BeinecTBCiiHoe	преобразование	строки
&ldquo;3.14159&rdquo; даст: = " + parseFloat(str6) + "<br>");
document.writc("ncpBaa буква слова &ldquo;CTpoKa&rdquo; - " J
strl.charAt(O) +	+ "<bi>");
document.writc("Третья буква слова &ldquo;CrpoKa&rdquo; - '* J
str 1.char At(2) +	+ "<br>");
document.writcf’B слове &ldquo;CrpoKa&rdquo; в позициях 3...5 распо-
ложена подстрока - " + strl .substring(2,5) +	+ "<br>");
Операции со строковыми переменными
149
document.write("CnoBo &ldquo;CrpOKa&rdquo; содержит - " +
strl.length + " символов” +	+ ”<br>");
document.writcf'CnMBonbi слова &ldquo;CipoKa&rdquo; преобразованы
к нижнему регистру - " + strI.toLowcrCasc() +	+ ‘'<br>");
document.write("CHMBonbi слова &ldquo;CTpoKa&rdquo; преобразованы
к верхнему регистру - ” + strl .toUppcrCascO +	+ "<br>");
document.writc("rioflCTpoKa &ldquo;poK&rdquo; входит в слово
&ldquo;CTpOKa&rdquo;, начиная с позиции - " + strl.indexOf(SubStr) +	•*- "
Поиск - от начала строки." + "<Ьг>");
document. \¥п1е("Подстрока &ldquo;poK&rdquo; входит в слово
&ldquo;CrpoKa&rdquo;, начиная с позиции - " + strl.last!ndexOf(SubStr) +
+ " Поиск - от конца строки." + "<Ьг>”);
</script>
Дадим комментарии к результатам работы скрипта.Согласно расчетам
подстрока "рок" входит в строку "Строка", начиная с позиции 2. Нужно пом-
нить, что счет номеров позиций ведется, начиная с нуля. Результаты поиска
позиции расположения подстроки "рок" с помощью методов
strl .lasflndexOf(SubStr) и str 1 .indcxOf(SubStr) оказались одинаковыми. Это
естественно: номер позиции вхождения подстроки не изменился из-за смены
направления поиска.
150
Перевод чисел из одной системы счисления в другую
11.7.1.	Перевод чисел из одной системы счисления в другую
Перевод двоичных и шестнадцатеричных чисел в десятичную систему
счисления (СС) можно осуществить с помощью функции преобразования
строковых переменных в целочисленные переменные - метод parsclnt(x, s).
Здесь приняты такие обозначения: х - преобразуемая строковая (или число-
вая) переменная; s - система счисления, в которой представлена переменная
х. Для двоичной СС s = 2, а для шестнадцатеричной СС s = 16.
Рассмотрим скрипт, предназначенный для перевода чисел из двоичной
системы счисления в десятичную СС.
Введите целое двоичное число
Г еревести в десятмин;. ю СС
Если в текстовое поле ввести число 101, то после щелчка по кнопке
«Перевести в десятичную СС» появится сообщение: "Десятичный эквива-
лент этого двоичного числа 5 ".
Код скрипта приведен ниже.
<script language—'JavaScript">
function func_str() {
var a 1-document, formstr.inpstr. value;
var a2-parsclnt(al, 2);
alert ("Десятичный эквивалент этого двоичного числа " + а2);
}
</script>
<fortn namc=,,form_str" >
<input typc="Text" name="inp_str" value="" size~"23"><br><br>
<input typc="Button" value—"Перевести в десятичную СС" on-
ciick "javaesript: func_str()">
</form>
Язык JavaScript позволяет просто осуществить перевод из шестнадца-
теричной СС в десятичную СС. При этом целые шестнадцатеричные числа
должны записываться в такой форме:
Перевод чисел из одной системы счисления в другую
151
0x234D
0xF4D
0x25
Допустимо символы А, В, С, D, Е, F заменять строчными буквами а, Ь,
с, d, е, f. Если в методе parsclnt(x, s) явно указана шестнадцатеричная система
счисления, то допустимо при вводе шестнадцатеричных чисел опускать пре-
фикс Ох (ноль и икс).
Введите целое шестнадцатеричное число
Перевести в десяти^н^ю С 2
Если в текстовое поле ввести шестнадцатеричное число 2F, то в ре-
зультате преобразования будет получено десятичное число 47.
Код скрипта для перевода чисел из шестнадцатеричной СС в десятич-
ную СС приведен ниже.
<script languagc="JavaScript’'>
function func2()
var al=document.form2.inp2. value;
var a2=parselnt(al, 16);
alert ("Десятичный эквивалент этого шестнадцатеричного числа " +
а2);
<7script>
<form name="form2" >
<input type="text" name="mp2’' value="n size="23"xbrxbi>
<input type="button“ уа1ие="Перевести в десятичную СС" on-
click="javacsript:func2()">
</form>
152
Математические функции и константы
11.8.	Математические функции и константы
Язык JavaScript позволяет сформировать восемь математических кон-
стант и вычислить шестнадцать различных математических функций. К ма-
тематическим функциям отнесен также генератор случайных чисел.
Рассмотрим константы.
Константы				Запись на языке JavaScript
Постоянная Эйлера (основание натурального логарис			эма)	Math.E
Число п				Math.PI
Десятичный логариф		м постоянной Эйлера		Math.LNIO
Двоичный логарис	эм постоянной Эйлера			Math.LN2
Натуральный логари»		рм числа 10		Math.LOG 10E
Натуральный логари<		^)м числа 2		Math.LOG2E
Корень квадратный из двух				Math.SQRT2
Корень квадратный из одной второй				Math.SQRTl 2
Ниже приведен список математических функций.
Функции	Запись на языке JavaScript
Возведение в степень xv	Math.pow(x,y)
Извлечения квадратного корня	Math.sqrt(x)
Вычисления абсолютного значения (модуля) |х	Math.abs(x)
Косинус-cav х	Math.cos(x)
Арккосинус arccos х	Math.acos(x)
Синус sin х	Math.sin(x)
Арксинус arcsin х	Math.asin(x)	;
Тангенс tg х	Math.tan(x)
Арктангенс arctg х	Math.atan(x)
Возведения е в степень ех	Math.cxp(x)
Натуральный логарифм	Math.log(x)
Округления числа х в большую сторону	Math.ceil(x)
Округления числа х в меньшую сторону	Math floor(x)
Округления числа х по правилам арифметики	Math.round(x)
Выбор наибольшего из двух чисел х и у	Math.max(x,y);
Выбор наименьшего из двух чисел х и v	Math.min(x,y); |
Генератор случайных чисел		 		Math.random() J
Математические функции и константы
153
Рассмотрим скрипт, который выполняет математические операции.
Скрипт использует объект Math с различными свойствами и методами. Во-
семь свойств позволяют сформировать восемь констант (в том числе посто-
янную Эйлера е и число л). Семнадцать методов объекта Math предназначе-
ны для формирования шестнадцати элементарных математических функций
и генерирования случайных чисел.
Константы
Значение константы с = 2.718281828459045
Значение константы л = 3.141592653589793
Десятичный логарифм постоянной Эйлера (с) = 0.4342944819032518
Двоичный логарифм постоянной Эйлера (е) = 1.4426950408889633
Натуральный логарифм числа 10 = 2.302585092994046
Натуральный логарифм числа 2 = 0.6931471805599453
Корень квадратный из двух - 1.4142135623730951
Корень квадратный из одной второй = 0.7071067811865476
Функции
Результат возведения в степень: 42 - 16
Результат извлечения квадратного корня из 4: у = 2
Результат извлечения квадратного корня из -9: у = NaN
Результат вычисления абсолютного значения -9: у = 9
Результат вычисления косинуса нуля радиан: у =1
Косинус 180 градусов (л радиан): у = -1
Результат вычисления арккосинуса нуля : у =1.5707963267948965
Результат вычисления синуса нуля радиан: у = 0
Синус 90 градусов (л/2 радиан): у = 1
Результат вычисления арксинуса единицы: у = 1.5707963267948965
Тангенс 45 градусов (л/4 радиан): у = 0.9999999999999999
Результат вычисления арктангенса единицы: у = 0.7853981633974483
Результат возведения е в степень 2: у = 7.38905609893065
Натуральный логарифм от е . у = 2
Результат вычисления десятичного логарифма от числа 100: у = 2
Результат вычисления двоичного логарифма от числа 8: у = 3
Тангенс 45 градусов (с округлением): у = 1
Результат округления числа 1.00123 в большую сторону: у = 2
Результат округления числа -3.1234 в большую сторону: у = -3
Результат округления числа 1.00123 в меньшую сторону: у = 1
Результат округления числа -3.1234 в мсныную сторону: у = -4
Результат округления числа 1.44 по правилам арифметики: у = 1
154
Математические функции и константы
Результат округления числа 1,54 по правилам арифметики: у = 2
Выбор наибольшего из двух чисел 4 и 2: у = 4
Выбор наименьшего из двух чисел 4 и 2: у = 2
ГЕНЕРАТОР СЛУЧАЙНЫХ ЧИСЕЛ
Формирование случайных чисел в интервале [0;1]: у =
0.628075369446297
Код скрипта приведен ниже. В расчетах было использовано гри целых
числа: х=4, z=2, v=-9.
<script Ianguage="JavaScript”>
x=4;
z=2;
v=-9;
yE=Math.E;
yPi=Math.PI;
yLnl0=Math.LN10;
yLn2=Math.LN2;
yLog 1 Oe=Math.LOG 10E;
yLog2e=Math.LOG2E;
ySqrt3=Math.SQRT2;
ySqrt4=Math. SQRT12;
yPow=Math.pow(x,z);
ySqrt=Math.sqrt(x);
ySqrt2=Math.sqrt(v);
yAbs=Math.abs(v);
yCos=Math.cos(0);
yCos2=Math.cos(Math.PI);
yAcos=Math.acos(0);
ySin=Math.sin(O);
ySin2—Math.sin(Math.PI/2);
yAsin=Math.asin(l);
yTan=Math.tan(Math.PI/4);
yAtan=Math.atan( 1);
yExp=Math.exp(z);
yLog=Math.log(yExp);
yLg-Math.log( 100)/Math.log( 10);
yLog2=Math.log(8)/Math.log(2);
yCeiHMath.ceil(yTan);
yCei!2=Math.ceil( 1.000123);
yCei!3=Math.ceil(-3.1234),
Математические функции и константы
yFloor=Math.floor( 1.000123);
yFIoor2=Math.floor(-3.1234);
yRound=Math.round(l .44);
yRound2=Math.round(l .54);
yMax=Math .max(x,z);
yMin=Math.min(x,z);
yRnd=Math.random();
document. \упЧе("КОНСТАНТЫ"+"<Ьг>");
document.write("3Ha4eHHc константы e = "+yE+"<br>’,);
document.и,тйс("3начение константы &#960; = l4yPi+"<br>");
documcnt.writc(" Десятичный логарифм постоянной Эйлера (с) =
"+yLoglOc+"<br>");
document.write(’’ Двоичный логарифм постоянной Эйлера (с) =
"+yLog2c+"<br>");
document. \Угйс("Натуральный логарифм числа 10 - "+yLnlO+’’<br>");
document.writc(" Натуральный логарифм числа 2 = "+yLn2+"<br>");
document.write(" Корень квадратный из двух = "+ySqrt3+"<br>");
document.write(” Корень квадратный из одной второй =
’4ySqrt4+”<br><br>");
document. write(’,OyHKUMH,’+”<br>");
documcnt.write("Pc3ynbTaT возведения в степень: 4<sup>2</sup^ =
,l+yPow+"<br>");
document.у/гйеС'Рсзультат извлечения квадратного корня из 4: у =
"+ySqrt+"<br>");
document.write("Результат извлечения квадратного корня из -9: у =
"+ySqrt2+"<br>");
document, w г йе(" Результат вычисления абсолютного значения -9: у "
"+yAbs+"<br>");
document.уугНе("Рсзультат вычисления косинуса нуля радиан: у
="+yCos+"<br>");
document.writef'Косинус 180 градусов (&#960; радиан): у -
"+yCos2+"<br>”);
documcnt.writc("Pc3ynbTaT вычисления арккосинуса нуля : у
="+yAcos+"<br>");
document.writcf'Результат вычисления синуса нуля радиан: у
-+ySin+"<br>w);
document.writc("CHHyc 90 градусов (&#960;/2 радиан): у
"+ySin2+"<br>");
documcnt.write("Pe3ynbTaT вычисления арксинуса единицы: у
"+yAsin+"<br>");
156
Математические функции и константы
documcnt.writc(’’TaHrcnc 45 градусов (&#960;/4 радиан): у =
"+yTan+’’<br>");
document. \УГЙс("Резупьтат вычисления арктангенса единицы: у =
,,+yAtan4-"<br>");
document.уггйс("Результат возведения е в степень 2: у =
"+уЕхр+,,<Ьг>");
docurncnt.write("HaTypajibHbm логарифм от e<sup>2</sup>: у =
"+yLog+"<br>");
document.write(”Pc3ynbTaT вычисления десятичного логарифма от чис-
ла 100: у = "+yLg+,,<br>");
document.м/п1с("Результат вычисления двоичного логарифма от числа
8: у = "+yLog2+"<br>");
document.writef'TaHrcHC 45 градусов (с округлением): у =
"+yCcil+"<br>");
document.writef’Результат округления числа 1,00123 в большую сто-
рону: у =	yCeil2+"<br>’’);
document.\¥гкс("Результат округления числа -3.1234 в большую сторо-
ну: у = "+yCeil3+’’<br>”);
document.>Уп1е("Рсзультат округления числа 1,00123 в меньшую сто-
рону: у = "+yFloor+’’<br>");
document.\уп1е("Результат округления числа -3.1234 в меньшую сто-
рону: у = ,,+yFloor2+’’<br>”);
documcnt.writc("Результат округления числа 1,44 по правилам арифме-
тики: у — ”+yRound+"<br>”);
documcnt.writc("Pe3ynbTaT округления числа 1,54 по правилам арифме-
тики: у = "+yRound2+"<br>");
document.writc("Bu6op наибольшего из двух чисел 4 и 2: у =
,,+уМах+"<Ьг>'');
document.write("Bbi6op наименьшего из двух чисел 4 и 2: у =
',+yMin+,’<brxbr>");
document, writef’ГЕНЕРАТОР СЛУЧАЙНЫХ ЧИСЕЛ,,+"<Ьг>’’):
document.\уп1с(’’Формированис случайных чисел в интервале [0;1]: у =
”+yRnd+"<br>”);
</script>
Приведем комментарии к полученным результатам расчетов.
Извлечение квадратного корня из числа -9 дало результат NaN. Это
означает, что корень квадратный из отрицательного числа может быть вы-
числен только с помощью комплексных чисел. С помощью вещественных
чисел в подобных случаях ответ получить нельзя.
Метод Math.ceil(x) округляет вещественное число х до ближайшего
большего целого числа. Метод Math.floor(x) округляет вещественное число х
Математические функции и константы
157
до ближайшего меньшего целого числа. Метод Math.roond(x) округляет ве-
щественное число х по стандартным правилам арифметики (если дробная
часть вещественного числа больше или равна 0,5, то число округляется до
ближайшего большего целого числа).
В составе языка JavaScript имеется функция для вычисления нату-
рального логарифма. В случае необходимости вычисления логарифма по
другому основанию (например, а) следует воспользоваться формулой:
log3(x)=log(x)/log(a).
Для понимания результатов вычислений с помощью тригонометриче-
ских функций нужно помнить, что в этих функциях аргумент выражается в
радианах. Для перехода от градусов (grad) к радианам (rad) следует восполь-
зоваться формулой:
rad=grad*n/l 80.
С учетом сказанного станет более привычным полученный результат:
арктангенс единицы равен сорока пяти градусам (в радианах ответ равен
0.7853981633974483).
Заметим, что введенные в состав JavaScript константы нс являются
полной необходимостью. Они могут быть вычислены с помощью имеющих-
ся функций. Например, постоянную Эйлера можно вычислить с помощью
выражения Math.exp(l), а число л с помощью формулы 4 Math.atan(l). Ре-
зультаты вычисления этих констант приведены ниже.
Постоянная Эйлера: е = 2.718281828459045
Число л = 3.141592653589793
158
Регулярные циклы
11.9.	Регулярные циклы
Регулярные циклы позволяют так организовать вычислительный про-
цесс, что заранее можно определить, сколько раз будут выполнены операции,
размещенные в теле цикла. Регулярные циклы часто используются для табу-
ляции математических функций. Примером могут служить известные табли-
цы Брадиса. Для организации регулярных циклов служит оператор for.
Рассмотрим простейший регулярный цикл, который выполняет сум-
мирование целых чисел от 1 до 10 (включительно) с помощью оператора for.
Для запуска скрипта достаточно провести мышкой по кнопке "Вычислить”.
Рассмотрим код данного скрипта.
<script language-' JavaScript">
function FciklyO {
var nac=l;
var fin=l 1;
var summ=0;
var i=l;
for(i=nac; i<fin; i++)
summ=summ+i; //Тело цикла
а1ег1("Сумма чисел от 1 до 10 равна " + summ);
</script>
<input type="button” уа1ие=,,Вычисли'гь” onmouscoverz=’,FcikIy(),,>
Запускается скрипт при наступлении события onmouseover (попадание
курсора на площадь кнопки). Это событие вызывает срабатывание обработ-
чика - функции с именем Fcikly. Функция объявляет используемые перемен-
ные и задает им начальные значения. Переменная пас определяет первое
число, с которого начинается суммирование. Переменная fm указывает на
последнее число, до которого ведется суммирование чисел. Переменим
summ будет накапливать результат, поэтому начальное значение приравни-
вается к нулю. Для того чтобы в сумму вошло число 10, условием заверше
ния работы цикла выбрано соотношение i<ll. Цикл начинает работ)’ пр'
начальном значении параметра цикла i - 1. С каждым проходом тела цикла
параметр цикла i увеличивается на единицу до тех пор, пока не достигает
значения i = fm.
Эту же задачу (суммирование целых чисел от 1 до 10) можно решить
помощью оператора while. Внешне действие этих двух скриптов ничем i.J
Регулярные циклы
159
отличается. Внутренне отличие скриптов состоит в том, что второй цикл
представляет собой цикл с предустановкой (цикл ПОКА). С помощью выра-
жения, записанного в скобках (k<l 1), происходит проверка условия заверше-
ния циклического процесса. Пока выражение, записанное в круглых скобках
истинно, будут выполняться выражения, принадлежащие телу цикла. Когда
условие станет ложным, будет выполнена первая строка, расположенная за
закрывающей тело цикла фигурной скобкой. Для запуска скрипта достаточно
коснуться курсором кнопки ’’Вычислить".
Текст программы приведен ниже.
<script language-’JavaScript’^
function Fcikly2() {
var summ2=0;
vark=l;
while (k<l 1)
summ2=summ2+k; //Тело цикла
k=k+l;
а!еП("Сумма чисел от 1 до 10 равна " + summ2);
</script>
<input type="button" уа1ие="Вычислить" onmouseover="Fcikly20'’>
160
Операторы ветвления
11.10.	Операторы условной передачи управления
if-else(cond) и switch(x)
Название оператора if-clsc (cond) говорит о том, что в зависимости от
выполнения некоторого условия ветвления (cond) реализуется либо один
фрагмент программы, либо другой. В переводе с английского языка фраза if-
else (cond) означает: ЕСЛИ - ИНАЧЕ. Другими словами: если указанное в
скобках условие истинно, то выполняется оператор 1, иначе оператор 2. Если
говорить точнее, то нужно сказать: в одном случае выполняется труппа опе-
раторов 1, в другом случае - группа операторов 2. Вторую труппу операторов
порой называют альтернативой (альтернативной ветвью). Заметим, что усло-
вие ветвления может принимать только два булевых значения: true (Истина)
и false (Ложь).
Схематично изобразим действие этого оператора.
ЕСЛИ (УСЛОВИЕ истинно), ТО выполнить {группу ОПЕРАТОРОВ
1}, ИНАЧЕ выполнить {группу ОПЕРАТОРОВ 2}.
Рассмотрим скрипт, который в зависимости от введенного пользова-
телем значения выдаст одно из двух сообщений.
Щелчок по командной кнопке приведет к появлению такого диалого-
вого окна:
Microsoft Internet Explorer
ЕслиЬы мужчина, то нажните кнопку ОК. Егли Бы женин :на. то -khoi ку Обмена
ОК	Отмена
Загуск скрипта.
В зависимости от сделанного выбора появится одно из двух сообще-
ний:
Операторы ветвления
161
Ниже приведен код этого скрипта.
<script language-’JavaScript'^
function Fif() {
var pol = сопйгт("Если Вы мужчина, то нажмите кнопку ОК. Если Вы
женщина, то - кнопку Отмена");
if (pol=true)
{alcrtf'KaK нам повезло, что мы не женщины!");}
else
{alertf'KaK хорошо быть женщиной!”);}
</script>
<input type="Button" value="3anycK скрипта" onclick="Fif()">
Дадим краткие комментарии к данному сценарию.
Метод confirm() формирует значение true (Истина), если щелкнуть по
кнопке "ОК". При щелчке по кнопке "Отмена" этот метод присваивает пере-
менной pol значение false. Проверка истинности выражения здесь осуществ-
ляется с помощью выражения (pol= =truc). Следует обратить особое внима-
ние на наличие двух знаков равенства. Использование всего одного знака
равенства при проверке истинности условия ветвления является типичной
ошибкой при протраммировании.
Болес сложная конструкция оператора условной передачи управления
может включать несколько направлений ветвлений (русел ветвления). Схе-
матично подобную конструкцию можно изобразить так.
ЕСЛИ (УСЛОВИЕ 1 истинно), ТО выполнить {группу ОПЕРАТОРОВ 1}
ЕСЛИ (УСЛОВИЕ 2 истинно), ТО выполнить {группу ОПЕРАТОРОВ 2}
ЕСЛИ (УСЛОВИЕ 3 истинно), ТО выполнить {группу ОПЕРАТОРОВ 3}
ИНАЧЕ выполнить {группу ОПЕРАТОРОВ п}.
Рассмотрим скрипт подобной конструкции.
В текстовое поле нужно ввести Ваш возраст и щелкнуть по кнопке
"Запуск".
18
Запуск
162
Операторы ветвления
В зависимости от введенного возраста будут появляться различные
сообщения.
Microsoft Internet Explorer
Нужно получить высшее образование! Найти вторую половину^.
Листинг предыдущего скрипта приведен ниже.
<script language="JavaScript”>
function Fif2() {
var letl = documcnt.Formif.Fcld Lvalue;
var let=parsclnt(lctl);
if (isNaN(lct)=truc)
alert("Hy>KHo вводить числа, а нс текст!1');
else if (let<=0)
alertf'Bbi уверены? Вы - эмбрион?");
else if (let>0&&let<=7)
alcrt("TopbKO в этом возрасте бывают настоящие друзья и верные пот
руги!");
else if (let>7&&let<=17)
а1сП("Школьныс годы чудесные! Хочется быстрее повзрослеть.");
else if (let>17&&let<=23)
{а!еП("Нужно получить высшее образование! Найти вторую полов*
ну");}
else if (let>23&&lct<=50)
а1еП("Работа.Работа! He забыть купить машину, дачу, съездить в Гон
дурас.’’);
Операторы ветвления
163
else if (let>5O&&lct<=65)
а1сг1("Опять хочется идти в детский сад, в школу... Совсем не хочется
идти на работу, заниматься домашним хозяйством.”);
else if (let>65&&lct<=I00)
alertf'Tenepb можно отдохнуть. Посмотреть, как бессмысленно суе-
тятся эти молодые люди.");
else if (lct> 100&&let<= 150)
а1ег1("Для Вашего возраста Вы прекрасно управляетесь с вычисли-
тельной техникой! Поступайте в нашу академию на специальность Програм-
мирование.");
else
alertf’BaM приходилось встречаться со Львом Толстым?");
</script>
<form name="Fonnif'>
<input type="Tcxt" name^’Feldl" value=”0” size="4,,><brxbr>
<input type="Button" value="3anycK” onclick="Fif2(),,>
</form>
Приведем комментарии к предыдущей программе.
В скрипте предусмотрена защита от ввода текста вместо чисел. Для этого с
помощью метода isNaN() анализируется введенная информация. Если поль-
зователем введена строковая переменная, то формируется сообщение "Нуж-
но вводить числа, а не текст!’1. Преобразование строковой переменной в це-
лочисленную осуществлено с помощью метода parselnt(). Скрипт формирует
разные сообщения для лиц разного возраста. Заданный диапазон лет выделя-
ется в условиях ветвления с помощью логической функции И (оператор &&).
С помощью условия else if (let<=0) сделана защита от случайного ввода от-
рицательных чисел.
Рассмотрим еще одну конструкцию оператора условного ветвления -
переключатель switch (х). Для его работы нужно вводить натуральные числа
х = 1, 2, 3, ... и т.д. В зависимости от введенного числа, скрипт выполняет
разные фрагменты кода.
Пример подобного скрипта приведен ниже.
164
Операторы ветвления
Введите одно из трех чисел 1, 2 или 3.
Запуск
В зависимости от введенного числа появится одно из трех информа
ционных окон.
Код скрипта таков.
<script language="JavaScript">
function Fif3() {
Операторы ветвления
165
var kol= documcnt.Formif2.Feld2.value;
var kol=parselnt(kol);
switch (koi) {
case 1:	alertf'Первый период жизни человека - астрономиче-
ский.\пВозвышенные мечты, интерес к звездам...");
break;
case 2:	а1ег1("Второй период жизни человека - семафорный.ХпВсс без-
ралично...");
break;
case 3:	а1сП("Трстий период жизни человека - агроиомиче-
скийАпПоявляется естественный интерес к земле...");
break;
default: а1ег1("Введено число, отличное от 1,2 и 3.");
}
</script>
Введите одно из трех чисел 1,2 или 3.<brxbr>
<form name=,'Formif2">
<input type="Text” namc=:"Feld2" value="’’ size="3"xbrxbr>
<inputtype=”Button" value-'Запуск"onclick="Fif3()">
Дадим небольшие пояснения к данному сценарию.
В зависимости от введенного числа выполняется одна из трех строк
(команд). Например, при вводе цифры 2 выполняется команда:
case 2: alertf’Второй период жизни человека - ссмафорный.\пВсе без-
различно..."); break;
Если введено число, отличное от трех заданных, то выполняется стро-
ка:
default: alertf'Введено число, отличающееся от 1,2 и 3.’*);
Оператор break; предотвращает выполнение операторов, расположен-
ных ниже выполненного оператора. Он завершает работу оператора-
переключателя.
Рассмотрим скрипт, который позволяет производить вычисления
функции в соответствии с заданными условиями. При этом аргумент х дол-
жен принимать значения: -4; -2; 0; 2; 4.
cos х при х < О
у = 5 77 при х = О
In х при х > О
166
Операторы ветвления
Щелчки по командной кнопке «Вычислить» приведут к появленм
информационных окон с результатами расчетов при различных значения
аргументов.
Приведем листинг данного сценария.
<script language=”JavaScript">
function Fif4()
var пас—-4;
var fin=5;
var res=O;
var x—1;
for(x=nac; x<fin; x=x+2)
if (x<0) rcs=(Math.round(Math.cos(x)*10000))/10000;
else if (x=0) res=77;
else res=(Math.round(Math.Iog(x)*10000))/! 0000;
alert('’Результат: у = " + res + " для x = " +x);
</script>
<input type="button” value—"Вычислить" onclick="Fif4()”>
Дадим краткие комментарии к данному скрипту.
При выводе результатов расчета использовано округление чисел л
четвертого знака после запятой. Для этого использован метод Math.round(4
константа, равная 10000 (она определяет число знаков, выводимых п >с
запятой).
Анимация в строке-заголовке браузера
167
11.11.	Примеры скриптов
В этом разделы приведены примеры реализации нескольких сценари-
ев: анимация в строке-заголовке, кнопка с подсветкой, итерационные циклы.
168
Анимация в строке-заголовке браузера
11.11.1.	Анимация в строке-заголовке браузера
Ниже приведен код программы, предназначенной для формирования
движущегося текста в строке-заголовке браузера. Выводимый текст должен
располагаться в контейнере title.
<script>
var tit = documenttitle;
// Переменной tit присвоено содержимое контейнера title (текст заго-
ловка)
var с = 0;
function writetitle()
// Для функции определено имя writetitle
documenttitle = tit.substring(O,c);
// смена заголовка на переменную tit (количество выводимых симво-
лов = с)
if(c==titlength)
// Проверка равенства переменной с числу символов в заголовке
с = 0;
setT imeout(" writetitleO", 2000)
// Пауза до очередного вывода текста составляет 2000 миллисекунд = 1
секунды
else
setTimeout("writetitle()", 100)
И Пауза до вывода очередной буквы текста установлена 100 миллиса
кунд
writetitle()
// Вызов созданной функции
</script>
Кнопка с подсветкой
169
11.11.2.	Кнопка с подсветкой
Язык JavaScript создавать разнообразные эффекты. Например, не-
обычные кнопки управления.
Особенностью этой кнопки является то, что она изменяет свой цвет
при наведении на нее курсора, а также изменяет форму при щелчке.
Рассмотрим, как происходит обработка событий и вызов необходимой
Web-страницы. Код обработки событий приведен ниже.
<а href-’../../../book/java/javab.htm" onMouseOvcr="imgOn(,img 1')"
onMouseOut=‘'imgOff('img Г)"
onMouscDown=’’ imgC I ickfimg 1 ’)"
onMouscUp=’’ imgOnfimg 1 *)*>
<img sre-’butl.gif’ width-” 178" hcight^"42" name^ "nngl'1 bor-
der="O’’></a>
В первой строчке вышеприведенного кода указан путь к вызываемой
странице (java_b.htm).
Благодаря второй строке кода наведение пользователем курсора на
изображение кнопки (событие onMouseOvcr) вызывает функцию с именем
imgOn. За счет этого вместо изображения butl.gif появляется изображение
but2.gif. Это дает иллюзию возникновения свечения кнопки. Третья строка
отслеживает момент отвода курсора с изображения кнопки (событие оп-
MouseOut). В результате такого движения курсора произойдет вызов функ-
ции imgOff, и на странице будет сформировано исходное изображение кноп-
ки (butl.gif). Задачей строки onMouseDown=’'imgClick('imgr)" является оп-
ределение момента нажатия на кнопку и формирование изображения нажа-
той кнопки (but3.gif). Запись onMouseUp— ’imgOnfimgl')" фиксирует момент
отпускания нажатой кнопки. Реакцией на это событие является восстановле-
ние начального изображения кнопки
В последней строке находится тег. который формирует начатьное и ю-
бражение кнопки указанных размеров:
170
Кнопка с подсветкой
<div align-'center"xxmp class=time><img src="butl .gif' width="178"
hcight=''42" name-'imgl" border="0"></xmp></div>
Наибольшее внимание следует обратить на атрибут name-'imgl". Ри-
сунку присвоено имя, которое используется при работе скрипта.
Описание используемых функций приведено ниже.
<script language-"JavaScript”>
if (document.images){
imglon^new Image();
imgl on.src="but2.gif
imgloff=new ImageQ;
imgloff.src="butl .gif';
imglclick=new ImageO;
img 1 click.src="but3 .gif';
function imgOn(imgName){
if (document images) {
document[imgName].src=eval(imgNamc+"on.src");
function imgOff(imgName){
if (document.images){
document[imgName].src=evaI(imgName+"off.src");
i
i
function imgClick(imgName){
if (document.images){
document.imgname=imgName
document[imgName].src=eval(imgName+"click.src");
Первая строчка содержит открывающий тег скрипта и атрибут 1ап-
guage=,’JavaScripf,> который указывает на используемый язык. Заметим, что
данный атрибут можно исключить из кода программы, так как по умолчанию
предполагается использование языка JavaScript.
Реализация итерационных циклов
171
11.11.3.	Реализация итерационных циклов
Рассмотрим порядок разработки программы для вычисления иррацио-
нального числа к. Расчетная формула выглядит так:
Для наглядности запишем несколько членов этого знакочередующего-
ся ряда и каждый член ряда обозначим символами а,:
а0 + ах + а3 + ал + а5 +... + ап +...
Чтобы получить компактную программу, выведем рекуррентную
формулу, которая позволяет рассчитать последующий член ряда по извест-
ному предыдущему члену ряда. На основании предшествующей формулы
запишем п + /-й член ряда:
(_пч+|	(-1)"+1
“ 2\п +1) +1 “ 2п + 3
Возьмем отношение п + /-го члена ряда к д-му члену ряда:
= (-1Г'(2Н + 1)
а,	(2я + 3) •(-!)"
2п + 1
2и+3
Теперь с помощью полученного коэффициента q любой последующий
член ряда может быть выражен через предыдущий член ряда:
Блок-схема алгоритма для вычисления константы л приведена на ри-
сунке.
На рисунке приняты такие обозначения:
pogr— абсолютная погрешность, с которой вычисляется число л;
sum — результат (сумма, накопленная при вычислении); а — значение оче-
редного члена ряда; п - число членов ряда; q - коэффициент.
Результаты вычислений накапливаются в переменной sum Первона-
чально ее значение обнуляется, а первый член ряда принимается равным
единице.
172
Реализация итерационных циклов
Завершается программа выводом рассчитанного значения числа я.
Код программы на языке JavaScript приведен ниже.
<httnl>
<head>
<й11е>Итерационный цикл для вычисления числа пи<ЛШе>
</head>
<body>
<script language="JavaScript”>
function FiterQ {
var pogr^O.0000001;
var a=l;
var n—0;
var summ-a;
while (Math.abs(a)>pogr)
Реализация итерационных циклов
173
q=-(2*n+l)/(2*n+3);
a=a*q;
summ=summ+a; //Тело цикла
n=n+l;
alcrtf’Число пи примерно равно " + 4*summ);
}
</script>
<input type="button" value—"Вычислить" onmouseover="Fitcr()">
</body>
</html>
В результате действия скрипта на экране появится командная кнопка.
Вычислить
Помещение курсора на командную кнопку «Вычислить» приведет к
появлению информационного окна с результатом расчета числа пи (прибли-
зительное значение).
Сопоставление полученного значения иррационального числа пи с
точным значением показывает, что расхождение наблюдается уже в седьмом
знаке после запятой. При этом счет продолжается несколько секунд.
174
Перечень лабораторных работ
Приложение 1. Перечень лабораторных работ,
размещенных на оптическом диске
I.	Браузер MS Internet Explorer
2.	Первая Web-страница
3.	Таблицы
4.	Графика
5.	Графический редактор Adobe Photoshop
6.	Карты-ссылки
7.	Фреймы
8.	Каскадные таблицы стилей CSS
9.	Мультимедиа
10.	Язык JavaScript
11.	Гиперссылки
Перечень заданий к лабораторным работам
1.	Браузер MS Internet Explorer
1.1.	Определение версии используемого браузера
1.2.	Изучение пользовательского интерфейса браузера IE
1.3.	Просмотр списка сайтов, посещенных в последние дни
1.4.	Набор адресов в адресной строке
1.5.	Установка начальной (домашней) страницы браузера
1.6.	Формирование списка избранных ссылок
1.7.	Изучение способов ускорения загрузки Web-страниц
1.8.	Исследование действия кнопок "Вперед" и "Назад"
1.9.	Просмотр страницы в виде программы на языке HTML
1.10.	Просмотр страницы с разными кодировками
1.11.	Просмотр страницы с различными размерами шрифта
2.	Первая Web-страница
2.1.	Создание HTML-страницы
3.	Таблицы
3.1.	Оформление таблицы чемпионата страны по футболу
3.2.	Создание таблиц описания цветовых оттенков
3.3.	Создание календаря
4.	Графика
4.1.	Размещение фотографий на Web-странице
4.2.	Использование графики в качестве фона Web-страницы
4.3.	Обтекание иллюстраций текстом
Перечень лабораторных работ
175
5.	Графический редактор Adobe Photoshop
5.1.	Кадрирование
5.2.	Изменение угла наклона фотоснимка
5.3.	Изменение перспективы
5.4.	Устранение эффекта красных глаз
5.5.	Изменение цвета глаз
5.6.	Ретушь повреждений и надписей
5.7.	Клонирование
5.8.	Работа со слоями
5.9.	Коррекция контрастности
5.10.	Коррекция цвета
5.11.	Изменение размера фотографии
5.12.	Сохранение фотографии с различным качеством
6.	Карты-ссылки
6.1.	Создание карты парка Гагарина
7.	Фреймы
7.1.	Создание фотоальбома
8.	Каскадные таблицы стилей CSS
8.1.	Форматирование текста с помощью встроенных CSS
8.2.	Форматирование текста с помощью внедренных CSS
8.3.	Форматирование текста с помощью внешних CSS
9.	Мультимедиа
9.1.	Формирование фоновой музыки в формате mid
9.2.	Регулировка стерсобаланса
9.3.	Использование звуков формата wav
9.4.	Формирование видеоклипов формата avi
10.	Язык JavaScript
10.1.	Создание скрипта "Бегущая строка"
10.2.	Создание скрипта "Цвет фона"
10.3.	Создание скрипта "Тестирование"
10.4.	Создание скрипта "Работа со строковыми переменными"
10.5.	Создание скрипта "Линейный вычислительный процесс"
10.6.	"Разветвляющийся вычислительный процесс"
10.7.	"Итерационный циклический вычислительный процесс"
11.	Гиперссылки
11.1.	Формирование оглавления "Контрольного сайта"
11.2.	Формирование типов перехода между страницами
176
Приложение 2
Приложение 2
Порядок запуска тестирующей программы*
Для запуска тестирующей программы нужно открыть папку test.
|£3auth
(rebook
^midi
£j)ptak
Ijvjjsajte
Samara
^splash
(Cjtest
lol index.html
Затем запустить приложение ControllingProgram
nuborlndmm.dl
|4qcc3260mt.dH
ControllingProgram. exe
(3 Log.txt
@]rtl60.bpl
Qvctoo.bpi
13 webdesign, txt
В Главном меню следует выбрать опцию Тест.
Программа контроля знании
льтаты .0 программе
* Программа разработана Алексеевым П.А.
Приложение 2
Затем нужно открыть текстовый файл vvebdesign.txt
В диалоговом окне указать фамилию и групп)’.
<т' Тестируемый
Фамилия ИО. IСергеев Н.А.
pjma |р 23
Начало тестирования
С помощью переключателя выбрать правильный «тве । из пескот ких
предложенных и пажа гь кнопку «Ответ»
178
Приложение 2
Текущий вопрос. 6	Всего вопросов: 47 Время на ответ:39
“Bonpoc:~~-----------~
Web-страница на языке HTML имеет следующую структур:
“Варианты от ветов:----- ' ——— ----------——;———
(• < html> < head> < /headx body><trtle> < /title> </bbdy>< /html>
С <htmlxheadx/head><tide></title><body></bccyX/hl[Ti >


Г < htrnl> < headx title> < body> </body > < /tille> < /head> < Aianb
.Ответ:
C <htm!> <head> <tit!e> < /Й1е> </head> < body>< /body > < /htmb

Завершается тестирование выводом результатов тестирования. Парал-
лельно ведется протокол тестирования. Все ответы сохранены в файле
Log.txt. Протокол можно посмотреть с помощью опции «Результаты».
Результат теста
.JTJxI
Тест ируемый: Сергеев Н А. Р-23
Коли лество правильных
□ гве гов* 36	.	<
Оценка: 3. f 2S
Сайт «Самара сия - сама Россия»
179
Приложение 3. Сайт «Самара сия - сама Россия»
В качестве подарка для читателей на оптическом диске размещен сайт,
посвященный городу Самара. Сайт содержит более 3000 фотографий наибо-
лее красивых мест города.
Для запуска сайта нужно открыть папку Samara и сделать щелчок по
значку index.html.
Б о ле е 3000 ф от огр афип г ор ода
Храмы
«имя»
вмпвтав»
Для проелушгеп ния 1ГгЗыт*и включите аут и эгистему
Адрес пля переписки: samarafoto(^rirnbler.ru
Дата последнего of м орден и я « ноября?0071.
©Алексеев А П
( амара сия - сама
Россия
Администрация города
Архивные материалы
Банки
Водоёмы
Вокзалы
Гостиницы
Дворцы, дома
Жив отный мир
Заводы, фабрики
Закаты, рассветы
Кинотеатры

Информация
Массовые мероприятия
Медицинские уч, еждения
Муз е и, вы ставки
Набережные, пляжи
Ночной город
Окраины города
Памятники н скульптуры
Памятные места
Парки, сады, скверы
Проектные организации
Районы
Растительный мир
Рестораны, кафе, бары
Сооружения
Спортивные сооружения
Стерео (анаглифы)
Театры, концертные залы
Торговые центры
Транспорт
Улицы, проспекты
ебныетавед^ьия
Фонтаны
ио
Заключение
Заключение
Данное учебное пособие посвящено клиентским технологиям. Приве-
денные в учебном пособии материалы позволят разработать информацией
ный сайт. Однако, изученные здесь технологии не дают возможность дизай
перу созда гь гостевую книгу, чат, счетчик числа посещений страницы, элек-
тронный магазин и т.п. Для создания подобных элементов дизайна необхо-
димо сохранять некоторые данные на сервере. Дальнейшее освоение Web-
дизайна должно быть ориентировано на серверные технологии: CGI, ASP,
SSI языки программирования PHP, Perl. Java. Именно эти технологии и язы-
ки программирования дают возможность всели диалог с пользователем-
клиентом и сохранял ь введенные данные на сервере.
Автор напоминает, что в компактном учебном пособии невозможно
рассмотреть все стороны дизайна. Данную работу следует рассматривать
лишь как первый шаг в освоении нового искусства с названием "Web-
дизайн". Возможно, что использованная структура учебного пособия (Теория
- Примеры для анализа - За линия для самостоятельной работы) позволит бы-
стрее сделать этот первый, самый тяжелый шаг в направлении бесконечного
совершенствования навыков дизайна.
В заключении автор предлагает внимательнее относиться к окружаю-
щему Миру. Видеть Красивое во всем... А начать можно с собственного по-
доконника. .
Список литературы
181
Список литературы
1.	Основы Web-технологий/ П.Б.Храмцов, С.А.Брик, А.М.Русак,
А.И.Сурин. Под ред. П.Б.Храмцова.- М.:ИНТУИТ.РУ "Интернет-
Университет Информационных технологий", 2003. - 512 с.
2.	Холмогоров В. Основы Web-мастерства. - СПб: Питер, 2001352 с.
3.	Гончаров А. Самоучитель HTML. - СПб.: Питер, 2001. -240 с.
4.	Румянцев Д. Сам себе Web-программист. Практикум создания каче-
ственного Web-сайта. - М.: ИНФРА-М, 2001. - 207 с.
5.	Вейтман В. Программирование для Web.- М.: Издательский дом
"Вильямс", 2000.- 368 с.
6.	Гультяев А.К. Wcb-дизайн от Macromedia: Практическое пособие. -
СПб.: КОРОНА принт, 2001.- 480 с.
7.	Усенков Д. Уроки Web-мастсра. - М.: Лаборатория Базовых Знаний,
2001.-432 с.
8.	Дунаев В.В. Сам себе Web-мастер.- СПб.: БХВ-Пстсрбург; Арлит,
2000.- 288 с.
9.	Ратшиллер Т., Геркен Т. РНР4: Разработка Wcb-приложсний.- СПб.:
Питер, 2001.- 384 с.
10.	Шафран Э. Создание Web-страниц: самоучитель.- СПб: Питер, 2000.
- 320 с.
11.	Алексеев А.П. Информатика 2007. - М.: СОЛОН-ПРЕСС, 2007. - 608
с.
12.	Пауэлл Т. Web-дизайн.- СПб.: БХВ-Пстсрбург, 2004. - 1072 с.
13.	Нильсен Я. Всб-дизайн: книга Якоба Нильсена. - СПб: Символ-
Плюс, 2000. - 512 с.
14.	Смит Б., Бибек А. Создание Web-страниц для чайников. - М.: Виль-
ямс, 2001. - 256 с.
15.	Петров М.Н., Молочков В.П. Компьютерная графика. - М.: СПб.:
Питер, 2002. - 736 с.
16.	Пауэлл Т. Wcb-дизайн. - СПб.: БХВ-Петербург. 2004. - 1072 с.
17.	Алексеев А.П., Скоромная О.Б., Сухова Е.Н. Графический редактор
Adobe Photoshop. - Самара: ПГАТИ, 2004. - 32 с.
18.	Шапошников И.В. Самоучитель HTML 4.- СПб.: БХВ-Петербург,
2003. - 288 с.
19.	Дуванов А.А. Web-конструирование. DHTML. -СПб.: БХВ-
Пстсрбург, 2003. - 512 с.
20.	Мэрдок Келли. JavaScript: наглядный курс создания динамических
Web-страниц. - М.: Вильямс, 2001. - 288 с.
21.	Холл Марти, Браун Лэрри. Программирование для Web. Библиотека
профессионала. - М.: Издательский дом "Вильямс", 2002. - 1264 с.
182
Список литературы
22.	Дмитриева М.В. Самоучитель JavaScript.- СПб.: БХВ-Петербург,
2003.-512 с.
23.	Жаринов К.В. Основы веб-мастеринга. - СПб.: БХВ-Петербург, 2003.
- 352 с.
24.	Алексеев А.П., Алексеев П.А. Тестирующая программаУ/Тезисы Де-
вятой Российской НМК «Пути и методы совершенствования учебно-
го процесса» - Самара, 2000.- стр. 46-47.
Оглавление	183
Введение............................................. 3
1.	Глобальные вычислительные сети....................... 6
2.	Способы подключения к Internet....................... 11
3.	Коммутация каналов, сообщений и пакетов............... 13
4.	Протоколы, службы, услуги............................. 15
5.	Браузеры.............................................. 18
6.	Поисковые системы и каталоги.......................... 24
7.	Основные понятия Web-дизайна.......................... 31
8.	Структура Web-страницы................................ 37
9.	Сетевые технологии Wcb-дизайна........................ 39
10.	Язык HTML............................................. 46
10.1.	Форматирование текста.......................... 51
10.2.	Таблицы........................................ 55
10.3.	Графика........................................ 61
10.4.	Гиперссылки.................................... 67
10.5.	Метатсги....................................... 71
10.6.	Карты-ссылки...................................	73
10.7.	Мультимедиа................................... 77
10.8.	Фреймы........................................ 81
10.9.	Каскадные таблицы стилей CSS.................. 85
11.	Язык JavaScript....................................... 91
11.1.	Порядок запуска скриптов...................... 95
11.2.	Методы ввода информации....................... 98
11.2.1.	Ввод информации с помощью метода соп-
firm()..................................... 99
11.2.2.	Ввод информации с помощью метода promt().. 101
11.2.3.	Ввод информации с помощью текстового поля 103
11.2.4.	Ввод и вывод информации с помощью тексто-
вой области textarca............................... 106
11.2.5.	Интерактивные формы........................ 108
11.3.	Методы вывода информации........................... 124
11.3.1.	Вывод информации с помощью метода alert()..	125
11.3.2.	Вывод информации с помощью метода writeQ	126
11.3.3.	Вывод информации с помощью текстового
поля............................................... 127
11.3.4	Вывод информации с помощью созданных
окон............................................... 129
11.4.	События..........................................   132
11.5.	Арифметические операции....................... 141
11.6.	Логические операции	и	операции сдвига.............. 143
184
Оглавление
11.7.	Операции со строковыми переменными................ 147
11.7.1.	Перевод чисел из одной системы счисления в
другую............................................ 150
11.8.	Математические функции и константы................ 152
11.9.	Регулярные циклы.................................. 158
11.10	Операторы условной передачи управления if-else(cond)
и switch(x).............................................. 160
11.11	Примеры скриптов.................................. 167
11.11.1 Анимация в строке-заголовке браузера......	168
11.11.2 Кнопка с подсветкой....................... 169
11.11.3 Реализация итерационных циклов............ 171
Приложение 1: Перечень лабораторных работ и заданий, разме-
щенных на оптическом диске............................... 174
Приложение 2: Порядок запуска тестирующей программы....	176
Приложение 3: Сайт «Самара сия — сама Россия»............ 179
Заключение............................................... 180
Список литературы........................................ 181
Серия «Библиотека студента»
Алексеев Александр Петрович
Введение в Web-дизайн
Ответственный за выпуск
В. Митин
Макет и верстка
А. Алексеев
Обложка
Е. Холмский
ООО «СОЛОН-ПРЕСС»
123242, Москва, а/я 20
Телефоны:
(495) 254-44-10, 252-36-96, 252-25-21
E-mail: Solon-Avtor@coba.ru
По вопросам приобретения обращаться:
ООО «Альянс-книга КТК»
Тел: (495) 258-91-94, 258-91-95
www.alians-kiuga.ru
ООО «СОЛОН-ПРЕСС»
103050, г. Москва, Дегтярный пер., д. 5, стр. ?.
Формат 60х88’/]6. Объем 12. п. л. Тираж 1500 экз Зак. № 444.
Отпечатано с готовых диапозитивов
в 1111IO «Псковская областная типография»
180004. г. Псков, уп Ротная, 34
КНИГА-ПОЧТОЙ
Книги издательств «СОЛОН-ПРЕСО, «ДМК-ПРЕСС», «ЭКОМ» и др. можно заказать наложенным
платежом (оплата при получении) по фиксированной цене. Внимание! В цены ВКЛЮЧЕНЫ
услуги почты по пересылке книг! Однако за перевод денег вам придется заплатить на вашем
отделении связи 5% от переводимой суммы.
Вниманию заказчиков, проживающих в районах с доставкой почты только АВИА! (Некоторые
районы ресл. Саха. Архангельской, Тюменской, Томской, Иркутской, Хабаровской, Камчатской,
Магаданской, Приморской областей.) В связи с большими почтовыми сборами цены на книги
для вас будут ВЫШЕ!
Заказ оформляется одним из двух способов:
1. Пошлите открытку или письмо по адресу 123242, Москва, а/я 20.
2. Оформить заказ можно на сайте www.soion-press.ru в разделе «Книга-почтой» или по
телефону (495) 254-44-10,252-72-03.
Бесплатно высылается каталог издательства по почте. Для этого присылайте конверт с мар-
кой по адресу, указанному в п. 1. При оформлении заказа следует правильно и полностью ука-
зать адрес, по которому должны быть высланы книги, а также фамилию, имя и отчество получа-
теля. Желательно указать дополнительно свой телефон и адрес электронной почты.
Интернет-магазин размещен на сайте www.solon-press.ru Через Интернет вы можете в лю-
бое время получить свежий каталог издательства «СОЛОН-ПРЕСС», считав его с адреса
www.solon-press.ru/kat.doc
Внимание! Заказ может быть не выполнен, если в издательстве закончился тираж данной
книги. Отправка осуществляется в течение 10 дней.
Цены действительны до 01.06.2008 г. Изменения цен контролируйте на сайте
www.solon-press.ru
СЕРИЯ «ПРО ПК»
Применение Excel в
экономических и инженерных
расчетах + CD
Автор: Зеньковский В. А.
Формат: 16x24 см Объем: 192 с.
Цена: 290 р.
В систематизированном виде
с привлечением большого коли-
чества практических гримеров
изложены методы применения
Excel для решения экономических
и инженерных задач, для работы с
базами данных, для решения за-
дач оптимизации, аппроксимации зависимостей,
численного интегрирования. Прилагается компакт-
Причины зависания компьютера
Автор: Платонов Ю. М., Уткин Ю. Г.
Формат: 16x24 см Объем: 256 с.
Цена: 245 р.
Книга представляет собой посо-
бие-справочник по проблемам за-
висания и вопросам диагностики
неисправностей и ремонта ПК.
Материал изложен в виде по-
лезных советов. Рассмотрены
вопросы функционирования опера-
ционных систем Windows 98/2000/NT/MF/XP. Особое
внимание уделено методикам и приемам устранения
программных и аппаратных отказов и сбоев.
диск с вцдеоуроками по главам книги.
Системная BIOS: диагностика,
настройка, оптимизация работы
и разгон компьютера 2-е изд.
Автор: Попов С. Лм Полов А. Л.
Формат: 16x24 см Объем: 256 с.
Цена: 306 р.
Основном целью книги является
описание функционирования и на-
стройки базовых систем ввода/вы-
вода (BIOS) фирм AWARD, AMI,
Phoenix с целью диагностики, кон-
фигурирования, настройки и опти-
мизации работы компьютерной
системы. В книге также рассматриваются вопросы
повышения производительности компьютера путем
разгона средствами BIOS отдельных его компонен-
тов - процессоров, подсистем памяти, видеоплат,
жестких дисков.
Прикладное программирование
на C/C++: с нуля
до мультимедийных и сетевых
приложений + CD
Автор: Иванов В. Б.
Формат: 16x24 см Объем: 240 с.
Цена: 310 р.
Книга предназначена для изуче-
ния средств программирования
работы со звуком, изображением и
передачей информации в компью-
терных сетях с использованием
языков программирования C/C++.
Книга учит программировать «с ну-
ля". На компакт-диске содержатся проекты пред-
ставляемых приложений, включая исполняемые
файлы, которые сразу можно использовать в работе
Программирование
на Visual Basic 6.5
и Visual Basic.NET + CD
Автор: Зеньковскмй В. А.
Формат: 16x24 см Объем: 248 с.
Цена: 290 р.
На большом количестве ориги-
нальных примеров рассмотрены
принципы объектно-ориентиро-
ванного программирования в сре-
дах Visual Basic 6.5 и Visual
Basic.Net. Большое внимание уде-
лено программированию графики,
в частности, построению фрактальных изображений.
К книге прилагается компакт-диск с текстами про-
грамм.
СЕРИЯ «САМОУЧИТЕЛЬ
ПОЛЬЗОВАТЕЛЯ»
Microsoft Word 2007 от новичка
к профессионалу + CD
Автор: Несен А. В.
Формат: 16x24 см Объем: 416 с-
Цена: 295 р.
Word 2007 постигло самое зна-
чительное изменение интерфейса
за последнее десятилетие. Чтобы
быстро разобраться в работе при-
ложения и использовать его воз-
можности на 100%, понадобится
этот последовательный и подроб-
ный путеводитель.
Настольная книга
пользователя IBM PC
Автор: Синицын В. К.
Формат: 16x24 см Объем: 384 с.
Цена: 240 р.
«Настольная книга» - подроб-
ное и очень информативное
введение в мир персональных
компьютеров. Рассмотрены осо-
бенности и важные вопросы наст-
ройки современных операционных
систем Windows 95/98, Windows ХР
и MS-DOS. Описываются самые последние версии
популярных офисных и вспомогательных программ.
Важное место отведено вопросам использования
Интернета.
3DS Мах 9. Самоучитель + CD
Автор: Солосьев М. М.
Формат: 16x24 см Объем: 384 с.
Цена: 330 р.
Эта книга посвящена послед-
ней - девятой версии пакета 3DS
Мах. Пособие является самоучите-
лем, который сочетает в себе по-
дробные теоретические сведения
и объемный практический курс,
насчитывающий более 50 упраж-
нений и заданий для самостоятельной работы.Чита-
телям предлагается более 40 видеоуроков на
компакт-диске для наглядного и быстрого усвоения
материала.
Как изучить компьютер
за 6 занятий
3-е изд., доп. + CD
Автор: Вик Куриловмч
Формат: 14x21 см Объем: 240 с.
Цена: 225 р.
Всего за 6 занятий вы сможете освоить основные
программные продукты, используемые в 99 % офи-
сов. Windows ХР, Word, Excel, OutlookExpress,
HyperSnap - этих программ вам
будет достаточно для полноценной
работы на компьютере. Если ваша
задача - в минимальные сроки ов-
ладеть компьютером, то вам не
нужны толстые пособия.Предлага-
емые на компакт-диске професси-
ональные тесты позволяют закрепить полученные
знания и качественно подготовиться к сертификации
по Microsoft Office Specialist, которую предлагают
многие дистанционные учебные центры.
Photoshop CS2 за 12 уроков + CD
Автор: Никулина И. А.
Формат: 14x21 см Объем: 160с.
Цена: 240 р.
Эта книга для тех, кому
Photoshop показалась сложной
программой с перегруженным ин-
терфейсом, а толстые учебники за-
умным руководством. На изучение
программы читатель потратит ми-
нимум времени, следуя 12 урокам
и выполняя практические задания, подробно описан-
ные на страницах книги.
Доступный курс компьютерной
грамоты
Автор: Олимпов В. В.
Формат: 14x21 см Объем: 240 с.
Цена: 270 р.
В книге в доступной для начи-
нающих форме рассказано о том,
как работать в среде операцион-
ной системы Windows ХР. Для на-
глядности используются примеры
реальных документов. Книга поз-
воляет самостоятельно освоить
работу на компьютере с нуля.
ГОТОВИТСЯ
К ПЕЧАТИ
СЕРИЯ « БИБЛИОТЕКА
СТУДЕНТА»
Методы разработки
курсовых работ
Моделирование, вычисления,
программирование на C/C++ и
MATLAB, виртуализация,
образцы лучших студенческих
курсовых работ + CD
Автор*. Подред. Плохотникова К. Э.
Формат: 14x21 см Объем: 320 с.
Цена: 360 р.
Рекомендовано УМС по класси-
ческому университетскому обра-
зованию РФ в качестве учебного
пособия для студентов высших
учебных заведений, обучающихся
по специальности 010701 - Физи-
ка. Рассмотрены основы програм-
мирования в рамках языка C/C++ и пакета MATLAB.
Для освоения методологий математического моде-
лирования, вычислительного эксперимента и про-
граммирования разработан перечень тем курсовых
работ (в количестве 190), предложенных студентам
второго курса физического факультета МГУ им. М. В.
Ломоносова. В учебном пособии приведены лучшие
студенческие работы, включая описания и програм-
мы на отдельном компакт-диске.
Математика в Excel 2003
Автор: Сдвижное О. А.
Формат: 16x24 см Объем: 192 с.
Цена: 235 р.
Книга посвящена применению
популярного табличного процес-
сора MS Excel в математических
Математика
в Excel 200"
ной математики и заканчивая математическими мо-
делями экономических задач.
Электронная коммерция
Учебное пособие по
выполнению практических работ
Автор: Гаврилов Л. П.
Формат: 14x21 см Объем: 112 с.
Цена: 200 р.
В учебном пособии описаны
практические работы по основной
тематике новой учебной дисципли-
ны «Электронная коммерция», ко-
торая преподается на экономичес-
ких факультетах высших учебных
заведений при обучении студентов
специальностям 351300 «Коммерция» и 061500
«Маркетинг».
Новые информационные
технологии
Автор: Дьяконов В. П.
Формат: 16x24 см Объем: 640 с.
Цена: 480 р.
Рекомендовано УМО по специ-
альностям педагогического обра-
зования министерства образова-
ния и науки Российской Федера-
ции в качестве учебного пособия
по информатике и новым инфор-
мационным технологиям для сту-
дентов высших учебных заведений и университетов.
На сегодняшний день самый современный учебник,
учитывающий последние достижения в области но-
вых информационных технологий. Книга издана в
твердом переплете.
математических задач, начиная с задач элементар-
Основы информатики и
компьютерной техники
Автор: Велихов А. В.
Формат: 16x24 см Объем: 544 с.
Цена: 360 р.
Курс из 22-х лекций для студен-
тов естественнонаучных направле-
ний и специальностей вузов.
Обсуждается предмет и методы
информатики как науки об органи-
зации процессов получения, хра-
нения, обработки и передачи
информации с использованием персонального ком-
пьютера.
Основы теории цепей
Использование пакета
Microwave Office
для моделирования
электрических цепей
на персональном компьютере
Автор: Фриск В. В.
Формат: 16x24 см Объем: 160 с.
Цена: 230 р.
Книга рекомендована УМО по
образованию в области телеком-
муникаций в качестве учебного по-
собия для студентов высших учеб-
ных заведений, обучающихся по
направлению подготовки бакалав-
ров и магистров 554000 Телеком-
муникации. Собраны примеры для самостоятельного
повторения на персональном компьютере, способст-
вующие как более глубокому освоению курса ОТЦ,
так и совершенствованию навыков применения ин-
женерных пакетов схемотехнического моделирования.
«Основы теории цепей»,
«Основы схемотехники»,
«Радиоприемные устройства»
Лабораторный практикум на
персональном компьютере
Автор: Фриск В. В., Логвинов В. В.
Формат: 16x24 см Объем: 608 с.
Цена: 470 р.
Рекомендовано УМО по образо-
ванию в области телекоммуникаций
как учебное пособие для студен-
тов вузов, обучающихся по
направлению подготовки бакала-
вров и магистров 554000 и
654400 Телекоммуникации, по
специальностям подготовки инженеров 201100 ра-
диосвязь, радиовещание и телевидение, 201200
Средства связи с подвижными объектами и 201800
Защищенные системы связи. В первой части пред-
ставлены лабораторные работы по курсу «Основы
теории цепей». Во второй части приведены лабора-
торные работы по курсу «Основы схемотехники» и
«Радиоприемные устройства». Все лабораторные ра-
боты выполняются на персональном компьютере с
помощью системы схемотехнического моделирова-
ния Micro-Cap 8 или Micro-Cap 9.
Основы программирования на
Visual Basic и VBA
в Excel 2007
Автор: Гарбер Г. 3.
Формат: 14x21 см Объем: 192 с.
Цена: 370 р.
Допущено Научно-методичес-
ким советом го информатике при
Министерстве образования и на-
уки РФ в качестве учебного посо-
бия по дисциплине «Информати-
ка» для студентов высших учебных
заведений. Продемонстрированы
приемы работы с отладчиком программ, справочны-
ми системами, макрорекордером и личной книгой
макросов. Книга ориентирована на преподавателей
информатики, студентов вузов и колледжей, а также
на широкий круг читателей.
Разработка дипломного проекта
для транспортных
специальностей вузов
Автор: Тарануха Н. А., Каменских И. В.
Формат: 16x24 см Объем: 208 с.
Цена: 380 р.
Допущено УМО вузов РФ по
образованию в области транс-
портных машин и транспортно
технологических комплексов в
качестве учебного пособия для
студентов специальности 190701
«Организация перевозок и управ-
ление на транспорте (Водный транспорт)» направле-
ние подготовки 190700 «Организация перевозок и
управление на транспорте». Учебное пособие
составлено применительно к дипломному проек-
тированию продолжительностью 4 месяца. Пред-
назначено для студентов транспортных специаль-
ностей вузов, выполняющих дипломные проекты
по направлению «Организация перевозок и управ-
ление на транспорте» и для студентов других
транспортных специальностей и направлений.
Управление удаленным
доступом. Защита
ителлектуальной собственности
в сети Internet + CD
Автор: Ботуз С. П.
Формат: 16x24 см Объем: 256 с.
Цена: 312 р.
левидение», 201200 (210402) «Средства связи с по-
движными объектами», 201800 (210403) «Защищен-
ные системы связи». Рассмотрены методы и модели
управления удаленным доступом к таким объектам
интеллектуальной собственности как электронные
базы данных (ЕД] и базы знаний (БЗ), на всем их
жизненном цикле в сети Internet/lntranet. Приведены
практические примеры защиты и управления досту-
пом к объектам интеллектуальной собственности в
открытых сетях (Internet/lntranet), а также методи-
ческие примеры Java-реапизаций: адаптивного
интерфейса на HTML-документах; оптимизации
клиентской части и др. Прилагается компакт-диск
с текстами программ и разработанных схемотех-
нических решений.
Основы практической
защиты информации
4-е изд., доп.
Автор: Петраков А. В.
Формат: 16x24 см Объем: 384 с.
Цена: 231 р.
Рекомендовано Минсвязи Рос-
сии в качестве учебного пособия
по специальности 20.18.00 «Защи-
щенные системы связи».
Книга предназначена в помощь
студентам университетов, коллед
жей и институтов повышения ква-
лификации на специальностях 2009, 2010, 2011
2012, 2102 (связи) и на смежных специальностях
при изучении дисциплин «Защита информации» или
«Техническая защита информации»
Учебное пособие одобрено Ме-
тодическим советом МТУСИ и ре-
комендовано УМО по образованию
в области телекоммуникаций для
студентов вузов, обучающихся по
специальностям 201100 (210405)
«Радиосвязь, радиовещание и те-
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РФ
Федеральное агентство по образованию
МИНИСТЕРСТВО ОБРАЗОВАНИЯ МОСКОВСКОЙ ОБЛАСТИ
РОССИЙСКАЯ АКАДЕМИЯ ОБРАЗОВАНИЯ
ЦЕНТР НОВЫХ ПЕДАГОГИЧЕСКИХ ТЕХНОЛОГИЙ
ФОНД НОВЫХ ТЕХНОЛОГИЙ В ОБРАЗОВАНИИ «БАЙТИК»
АНО «ИТО»
COMPUTER USING EDUCATORS INC, USA
XIX МЕЖДУНАРОДНАЯ КОНФЕРЕНЦИЯ
«ПРИМЕНЕНИЕ НОВЫХ ТЕХНОЛОГИЙ В ОБРАЗОВАНИИ»
Троицк, Московская область, 26-27 июня 2008 г.
Уважаемые коллеги!
Приглашаем вас принять участие в XIX Международной конференции «Применение новых
технологий в образовании» в рамках Конгресса конференций «Информационные техноло-
гии в образовании», которая пройдет с 26 по 27 июня 2008 года на базе Фонда новых тех-
нологий в образовании «Бантик» (г. Троицк, Московская область). В конференции примут
участие представители организации Computer Using Educators [США] и специалисты других
стран.
Конференция посвящена вопросам практического использования новых технологий в об-
разовании и будет проводиться по следующим направлениям:
1.	Теория и методика обучения информатике.
2.	Информационные технологии в образовании.
3.	Олимпиады и конкурсы по информатике
4.	Дистанционное обучение.
5.	Качество образования и методы его измерения.
6.	Подготовка специалистов в области информатизации образования
7.	Разработка и экспертиза образовательных электронных ресурсов.
8,	Информационно-образовательная среда учебного заведения.
9.	Информационные технологии в обучении людей со специальными потребностями.
Форма участия в конференции:
1.	Устное выступление.
2.	Устное выступление и публикация.
3.	Публикация.
Оргкомитет оставляет за собой право изменить форму участия или отклонить доклад.
В программу конференции будут включены < круглые стопы» для обсуждения проблем ин-
форматизации, состоится выставка-ярмарка учебников, программных и технических
средств и другие мероприятия. Коммерческие фирмы проведут презентации новых образо-
вательных продуктов и программ. Лучшие доклады будут отмечены оргкомитетом. В рамках
конференции вы сможете провести презентацию своей организации и опубликова~ь рекла-
му в сборнике материалов конференции. Условия можно получить в Оргкомитете.
Заявку на участие в работе конференции и тезисы докладов необходимо выслать по элек-
тронной почте до 30 мая 2008 года в адрес оргкомитета конференции по адресу-
bytic4@bytic.ru, bytic@bytic.ru
Гарантией получения нами ваших тезисов является ответное письмо оргкомитета.
Место проведения конференции
Адрес: 142190 Московская обл., г.Троицк. Сиреневый бульвар, д.1, Дом Ученых
Проезд- от станции метро «Теплый стан» на автобусах 398 до остановки «Самохвал»
или 531 до остановки• 41 км».
Координаты Оргкомитета
г Троицк. Сиреневый бульвар, д.11, Фонд «Ьайтик»
Теп/факс: [495)330-96 32, (495)334 03 67, (495) 334- 57 81
Эл. почта: bytic4@bytic.ru, bytic@bytic.ru
Сайт оргкомитета: http://vuww.bytic.ru, http://ito.edu.ru
Кандидат технических
наук, дсценг и старший
научный сотрудник
государственного об-
разовательного учреж-
дения - Поволжской
государственной акаде-
мии телекоммуникаций
и информатики подго-
товил и опубликовал 10
книг. Половина опубли-
кованных учебных посо-
бий имеют грифы УМО,
что говорит о высоком
качестве материала.
Алексеев А. П. является
автором 54 изобрете-
ний, 120 паучн техни-
ческих и ме -“дических
-	Самый тяжелый первый шаг:
в книге в сжатой форме даны ос-
новные понятия Web-дизайна,
описаны приемы построения сай-
та, даны упражнения для трени-
ровки.
-	Книга предназначена для пре-
подавателей:
в «одной упаковке» собраны тео-
рия, примеры, практика (лабора-
торные работы), тестирующая
программа. Материал продубли-
рован в электронном виде, что
позволяет легко тиражировать
методические указания и исполь-
зовать их для обучения студентов.
-	Книга содержит компакт-диск:
на диске собраны методические
указания по проведению лабора-
торных работ; 11 лабораторных
работ помогу! преподавателям на
высоком уровне провести заня-
тия со студентами, а обучаемым
быстро освоить азы Web-дизайна.
-	Подарок читателям от автора
на компакт-диске:
сайт с фотографиями города Са-
мара.
публикаций Увлекается!
фотографией: http: //www. ivt. psati. ru/Samara/