Элементы языков HTML и JAVASCRIPT

При создании Web-сайта в числе прочих решаются две основные задачи, связанные с графикой:

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

Обе задачи сводятся в конечном счете к размещению картинок из графических файлов в HTML-документе. Этот документ пишется на специальном языке HTML (HyperText Markup Language, Язык разметки гипертекста). При этом неважно, какими средствами вы пользовались для его создания (обычный текстовый редактор, Microsoft FrontPage, Macromedia Dream Weaver и т. п.). HTML-документ хранится в обычном текстовом файле. Расширение htm или html этого файла указывает лишь на то, что в нем содержатся тэги (инструкции, команды) HTML-кода. Щелчок кнопкой мыши на имени этого файла в Проводнике Windows открывает его в Web-браузере, установленном на вашем компьютере (например, в Internet Explorer). Браузер загружает HTML-документ вместе с другими файлами, необходимыми для формирования и функционирования Web-страницы. Это могут быть обычные текстовые файлы, а также файлы с мультимедийным содержанием (графика, звук, видео). Затем браузер интерпретирует команды HTML-документа. В результате в окне браузера постепенно появляется Web-страница. Если вы разработали свой сайт целиком с помощью Macromedia Flash, то все равно вам не обойтись без хотя бы элементарного HTML-документа, который просто загружает Flash-мультфильм, хранящийся в соответствующем SWF-файле.

Здесь мы не будем подробно рассматривать ни HTML, ни вопросы дизайна Web-страниц. На эту весьма обширную тему написано достаточно много книг. В этой главе мы остановимся лишь на некоторых основных моментах HTML, наиболее тесно связанных с графикой и мультимедиа. Мы думаем, что дизайнер графики для Web должен понимать, что происходите его творением, когда оно встраивается в HTML-документ. Часто бывает, что эффективнее непосредственно подправить HTML-код, чем мучиться со средствами визуальной разработки в специализированных редакторах. Кроме того, следует учитывать, что и в HTML имеются средства управления графикой. Например, к картинкам можно применять встроенные фильтры, перемещать их в окне браузера программными средствами, создавая эффекты анимации.

В данной главе мы рассмотрим общую структуру HTML-документа и вставку в него графических и текстовых элементов. В частности, мы рассмотрим вставку SWF-файлов, созданных в Flash или других приложениях.

Форматирование текстов

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

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

При оформлении текстов используются специальные тэги. Рассмотрим некоторые из них. Тэг <BR> предписывает переход на новую строку. Тэг <Р> является тэгом конца абзаца. После него текст будет выводиться с новой строки и, кроме того, одна строка будет пропущена. Если не использовать эти тэги, то разбиение текста на строки будет определяться шириной окна браузера, так что вид текста может оказаться совсем не таким, каким вы его представляли. Если вы хотите, чтобы текст выравнивался по центру окна браузера, используйте тэг <CENTER>, который упоминался в предыдущей главе. Заметим, что тэги <BR> и <Р> действуют не только на тексты, но и на другие элементы страницы. Например, если вы хотите, чтобы рисунок размещался ниже текста, то поставьте между текстом и тэгом рисунка <BR> или <Р>.

Стандартные логические стили

Для выбора размера шрифта можно использовать тэги так называемых логических стилей. Их всего шесть и обычно они используются для определения заголовков различного уровня. При переходе от первого стиля к шестому постепенно уменьшаются размер и толщина букв шрифта. Тэги логических стилей записываются как <Н1>, <Н2>,..., <Н6>.Каждый из них имеет соответствующий закрывающий тэг. Например, тэгу <Н1> соответствует закрывающий тэг </Н1>. Например, запись

<Н1>Заголовок 1-го уровня </Н1>

задает вывод текста Заголовок 1-го уровня шрифтом, соответствующим первому логическому стилю.

Заметим, что логический стиль определяет стиль текста сообразно настройкам браузера. При этом текст со стилем <Н2> всегда будет «меньше», чем со стилем <Н1>, если, конечно, автор страницы не переопределил его по своему усмотрению. Дело в том, что вы имеете возможность переопределить установки по умолчанию. Для этого используются средства каскадных таблиц стилей (CSS).
Следующая программа демонстрирует использование тэгов логических стилей:

<HTML>
    <HEAD> <TITLE> Основные элементы HTML </TITLE></HEAD>
  <BODY>
    <Н1>Заголовок 1-го уровня </Н1>
    <Н2>Заголовок 2-го уровня </Н2>
    <НЗ>Заголовок 3-го уровня </НЗ> уровня
    <Н4>3аголовок 4-го уровня </Н4>
    <Н5>3аголовок 5-го уровня </Н5>
    <Нб>Заголовок 6-го уровня </Н6>
    <Н7>Заголовок 7-го уровня </Н7>
   </BODY>
</HTML>

Тэги заголовков <Н1>...<Н7>
Чем больше номер, тем мельче заголовок

Рис. 648. Логические стили

Заголовки различных уровней;
заголовок уровня i (1=1,2,..., 7) задается тегом <Hi>

Управление шрифтом

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

Для каждого тэга физического стиля существует соответствующий закрывающий тэг, который отменяет дальнейшее применение стиля. Например, для тэга <B> закрывающим тэгом является </B>.
Ниже приведен пример программы и внешний вид различных физических стилей:

<HTML>
  <НЕАD><ТIТLЕ>Физические стили </ТIТLЕ></НЕАD>
  <BODY>
    <В>Полужирный</В>
    <I>Курсив</I>
    <U>Подчеркнутый</U>
    <S>Вычеркнутый</S>
    <ТТ>Пишущая машинка</ТТ>
    <ВХ1>Полужирный курсив</В>
    <ВХ1><и>Полужирный курсив подчеркнутый </В></I></U>
   </BODY>
</HTML>

Рис. 649. Физические стили

Внутри тэга заголовка можно вставить тэг физического стиля, чтобы модифицировать весь заголовок или только некоторую его часть. Например, чтобы выделить курсивом часть текста, определенного в качестве заголовка, можно использовать следующую конструкцию:

<HTML>
   <НЕАD><ТIТLЕ>Физические и логические стили </ТIТLЕ> </НЕАD>
   <BODY>
      <Н2>Это — <I> модифицированный</I> заголовок 2-го уровня</Н2>
  </BODY>
</HTML>

Рис. 650. Изменение стиля шрифта части заголовка

С помощью специального тэга <FONT> можно настроить шрифт для изображения текста: задать гарнитуру, размер и цвет. Прежде всего, вы можете установить размер основного шрифта, который используется в документе по умолчанию. Тэг основного шрифта имеет формат <BASEFONT SIZE=>. Размер основного шрифта можно установить от 1 до 7. Если не использовать этот тэг, то размер основного шрифта по умолчанию устанавливается равным 3.

Тэг <FONTSIZE=размер_шрифта> устанавливает размер текущего шрифта для отдельных фрагментов текста. На стили этот тэг не влияет. Диапазон возможных значений — от 1 до 7. Данный тэг позволяет также управлять размером текущего шрифта относительно основного. Для этого используются символ + (чтобы увеличить) и символ - (чтобы уменьшить) размер шрифта на заданную величину. Например, если размер основного шрифта установлен равным 3, то тэг <FONT SlZE=+2> устанавливает размер текущего шрифта равным 5.
Для задания гарнитуры шрифта используется тэг <FONT РАСЕ="имя_шрифта">. Например:

<FONT FACE="Arial">

Если этот тэг не используется в вашем документе, то браузер будет применять шрифт, установленный в его настройке. Поэтому текст на экране пользователя может выглядеть совсем не так, как вы его представляли. Следует также иметь в виду, что если назначенный вами шрифт не установлен на компьютере пользователя, то браузер будет изображать текст шрифтом, установленным по умолчанию.

Вы можете в тэге <FONT> указать через запятую перечень шрифтов. В этом случае браузер будет использовать первый найденный шрифт. Например, можно записать тэг:

FACE="Arial, Sans Serif, Courier">

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

С помощью атрибута COLOR в тэге <FONT> можно задать цвет шрифта:

<FONT СОLOR="цвет">

Аргумент атрибута COLOR представляет собой шестнадцатеричную запись кода цвета (красной, зеленой и синей составляющей, иначе говоря, RGB-составляющей). Следующая программа демонстрирует управление шрифтом:

<HTML>
<НЕАD><ТIТLЕ>Установка шрифтов</ТIТLE/НЕАD>
<BODY>
<Р>Шрифт Aria <FONT FАСЕ="АRIАL">АБВГДЕЖЗИК </FONT>
<Р>Шрифт Courier<FONT FАСЕ="СOURIER">АБВГДЕЖЗИК </FONT>
<Р>Шрифт SYMBOL<FONT FACE="SYMBOL" SIZE=7 СОLОR="RЕD">АБВГДЕЖЗИК
</FONT>
</BODY>
</HTML>

Рис. 651. Использование различных шрифтов

Заметим, что в тэге <FONT> можно использовать несколько или все его возможные атрибуты. Например:

<FONT FACE="Arial" SIZE=5 COLOR="BLUE">

В математических формулах, а также для подстрочных замечаний часто применяются индексы, которые отличаются от основного текста положением (чуть выше или ниже) и размером. Для этой цели служат тэги <SUP> и <SUB> соответственно для верхних и нижних индексов.

<HTML>
<НЕАD><Т1ТLЕ>Индексы</ТIТLЕ> /НЕАD>
<BODY>
<НЗ>Пример использования индексов
<Р> (5+x<SUP>2</SUP>)<SUP>x+3</SUP>
<P>a<SUB>1</SUB> + a<SUB>2</SUB>+ a<SUB>3</SUB>
<Р>Подстрочные примечания <SUP>2</SUP>
</H3>
</BODY>
</HTML>

Рис. 832. Использование верхних и нижних индексов

Кроме рассмотренных выше, имеются дополнительные тэги форматирования текстов:

<ADDRES> — выделение адресов электронной почты, почтовых адресов и
номеров телефонов; <СIТЕ> — выделение цитат;<CODE>, <SAMP> — запись текстов программ, символьных констант; <KBD> — ввод текстов с клавиатуры.

В последних трех стилях используется моноширинный шрифт (обычно Courier). Например, буквы I и Ж моноширинного шрифта занимают одинаковое место. Использование моноширинных шрифтов обусловлено простой возможностью выравнивания текста с помощью символов «пробел».

Отметим еще один момент. В тэги управления шрифтом, как и в тэги логических стилей, можно вставлять атрибут ТITLE= "строка", что позволяет привязать к тексту внутри этого тэга всплывающую подсказку. Аргументом атрибута TITLE является строка подсказки. При остановке указателя мыши на выделенном слове или фразе около указателя появится подсказка. С помощью этого приема можно расшифровывать аббревиатуры, давать дополнительные пояснения и рекомендации пользователю.

Цвет

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

Цвет фона определяется атрибутом BGCOLOR тэга <BODY>. Например, тэг, задающий цвет фона #FF1230, имеет вид:

<BODY BGCOLOR="#FF1230">

Тэг, задающий желтый цвет фона, имеет вид:

<BODY BGCOLOR="YELLOW">

Можно задать и цвет текста. Этой цели служит атрибут TEXT тэга <BODY>. Тэг, приведенный ниже, задает зеленый цвет фона и синий цвет текста:

<BODY BGCOLOR="GREEN" TEXT="BLUE">

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

Текст заданного формата

Браузер обычно преобразует текст HTML-файла при выводе его на экран, т. е. игнорирует лишние пробелы, символы табуляции и символы конца строки. Если вы хотите, чтобы текст на экране выглядел так, как вы его ввели в документ HTML, то воспользуйтесь тэгом предварительного форматирования <PRE>. Текст должен находиться между тэгами <PRE> и <РRЕ>.

Списки

Довольно часто требуется разместить на странице списки (перечни элементов). Списки бывают упорядоченными (по алфавиту или по возрастанию/убыванию номера) и неупорядоченными. При отображении списков браузер выделяет их отступом от края страницы. Кроме того, списки могут быть вложенными.

Упорядоченные списки задаются тэгом <OL>, а неупорядоченные — тэгом <UL>. Оба эти тэга парные, т. е. контейнерные.

Для упорядоченных списков можно выбрать способ индексации. Это делается с помощью атрибута TYPE с аргументами: 1 (арабские цифры), А (прописные буквы), а (строчные буквы), i (римские цифры). Можно задать номер, с которого начинается нумерация элементов списка. Для этого служит атрибут START внутри тэга <OL>.

Перед элементами списков следует поставить тэг <LI>, чтобы индексация происходила автоматически. В этом тэге можно использовать и вышеописанный атрибут TYPE.

Приведем примеры, показывающие различные способы создания списков:

<HTML>
<HEAD> <TITLE>Cписки</TITLE> </HEAD>
<BODY>
<Н2>Списки</Н2>
<LI>Это - упорядоченный список.Начальный номер - 5<BR>
<OL TYPE=1 START=5>
<LI>Элемент
<LI>Элемент
<LI>Элемент
<LI>Элемент
</OL>
<P>Это - упорядоченный список.Нумерация римскими цифрами <BR>
<OL TYPE=i>
<LI>Элемент
<LI>Элемент
<LI>Элемент
<LI>Элемент
</OL>
<Р>Это - неупорядоченный список. Здесь используются различные вводные маркеры <BR> <UL>
<LI>Элемент
<LI>Элемент
<LI>Элемент
<LI>Элемент
</UL>
</BODY>
</HTML>

<OL> - упорядоченный список
<UL> - неупорядоченный список
<LI> - устанавливается перед элементом списка, чтобы упорядочение происходило автоматически

Рис. 653. Варианты списков

Разделительные полосы

При оформлении текста, чтобы отделить один раздел от другого, нередко используют разделительные полосы. Можно задать ширину, толщину и способ выравнивания разделительной полосы. Разделительная полоса задается тэгом <HR>, внутри которого можно вставить атрибуты:

SIZE — толщина в пикселах; WIDTH — ширина в пикселах; ALIGN — способ выравнивания (принимает значения CENTER, LEFT или RIGHT; кроме того, можно использовать атрибут для создания сплошной черной полосы без тени).

Пример задания разделительных полос.

<HTML>
<BODY BGCOLOR="#EOEOEO">
<Н1>Разделительные полосы<Н1>
<НЗ>Для отделения частей текста можно использовать разделительные полосы.Такие полосы вставляются тэгом HR.<BR>
Это - обычная полоса, заданная без указания атрибутов
<HR>
Можно задавать различные толщину и ширину полос. Это - полоса толщиной 5
<HR SIZE=5>
<Р>Это - полоса толщиной 10 и шириной 200
<HR SIZE=10 WIDTH=200>
<Р>Это - полоса толщиной 5, заданная с атрибутом
<HR SIZE=5 >
<НЗ>
</BODY>
</HTML>

Рис. 654. Разделительные полосы

Бегущая строка

Internet Explorer поддерживает тэг <MARQUEE>, который позволяет создать так называемую бегущую строку, т. е. эффект прокручивания текста в заданном поле. Характеристики бегущей строки задаются следующими атрибутами:

WIDTH — ширина поля бегущей строки в пикселах или процентах от ширины окна; HEIGHT — высота поля бегущей строки (в пикселах); HSPACE, VSPACE — интервалы по горизонтали и вертикали между текстом строки и краями ее поля (в пикселах); ALIGN —положение текста бегущей строки в ее поле; возможные аргументы: ТОР (вверху); BOTTOM (внизу); MIDDLE (посередине); DIRECTION — определяет направление движения; возможные аргументы: LEFT (справа налево); RIGHT (слева направо); BEHAVIOR — характер движения строки; возможные аргументы: SCROLL — текст появляется от одного края и скрывается за другим; SLIDE — строка вытягивается из одного края поля и останавливается у другого края; ALTERNATE — задаетпеременноенаправлениедвижения, отодного края к другому, а затем обратно; LOOP — количество повторений текста в бегущей строке, задаваемое числом; если необходимо «бесконечное» количество повторений, то следует задать аргумент в виде ключевого слова INFINITY.

Атрибут LOOP не влияет на поведение бегущей строки, если для атрибута BEHAVIOR заданы аргументы ALTERNATE или SLIDE;

SCROLLAMOUNT — устанавливает длину (в пикселах) «прыжка» те кета за один такт; при большом значении этого параметра текст движется рывками, а при малом — замедленно; SCROLLDELAY — определяет величину паузы между тактами перемещения текста в миллисекундах; BGCOLOR — устанавливает цвет поля бегущей строки, задаваемый шестнадцатеричным числом или именем.

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

В следующем примере бегущая строка «бесконечно» прокручивается на желтом поле шириной 75% от ширины окна браузера.

<HTML>
<НЕАD><ТIТLЕ>Бегущая строка</ТIТLЕ> </НЕАD>
<BODY>
Ниже расположена "бегущая строка"
<MARQUEE HEIGHT=50 WIDTH=75% HSPACE=5 VSPACE=5 ALIGN=TOP BGCOLOR=YELLOW DIRECTION=LEFT LOOP=INFINIТЕ BEHAVIOR=SCROLL SCROLLAMOUNT=5 SCROLLDELAY=100>
<H1> Это сообщение будет прокручиваться на экране справа налево</Н1>
</MARQUEE>
</BODY>
</HTML>

Рис. 655. Бегущая строка

Специальные и зарезервированные символы

При формировании документа HTML может потребоваться ввести символы, которые воспринимаются браузером как служебные. Например, нельзя использовать символы < и > для обозначения знаков «меньше» и «больше», т. к. они интерпретируются как символы тэгов. Кавычки (") и амперсанд (&) также используются в языке HTML для служебных целей. Кроме того, все символы, которые можно набрать при нажатых клавишах управления, отличных от <Shift>, могут не воспроизводиться при просмотре документа, поскольку они зарезервированы. Если все же возникнет необходимость вставить в текст зарезервированные символы, то вместо них следует использовать их буквенные эквиваленты или коды ASCII. В качестве буквенного эквивалента используются соответствующие сокращения.
Буквенный эквивалент имеет формат:

&буквенный эквивалент;

Например, &lt; обозначает символ < (less then, меньше чем).
Цифровой эквивалент имеет формат:

&#код_АЗС11;

Например, символ < можно вставить в документ как &#60;.

Таким образом, эквиваленты заключаются между символами & и точкой с запятой. При этом в случае цифрового эквивалента перед ASCII-кодом символа следует поставить символ #. Ниже представлена таблица эквивалентов для некоторых часто употребляемых зарезервированных символов. Данная таблица была сформирована как НТМ L-документ. Приведем его содержание в качестве примера использования специальных и зарезервированных символов.

<HTML>
<НЕАD><Т1ТLЕ>Специальные символы</Т1ТLЕ></НЕАD>
<Н2>
<SAMP>
Симв.Код Эквивалент<ВR> <HR>
&#34;&#160;&#160;&#160; 34 quote<BR>
&#38;&f160;&#160;&I160; 38 amp<BR>
&#60;&#160;&#160;&#160; 60 lt<BR>
&#62;&#160;&#160;&I160; 62 gt<BR>
&#160- &S160; 4П60- 160 nbsp<BR>
&f 162; S#160; &#160; 162 cent<BR>
&#163; &#160; S#160; 163 pound<BR>
&#167; &016Q; {,1160; 167 sect<BR>
&#169; &#160; S#160; 169 copy<BR>
&#174; &#160; &I160; 174 reg<BR>
&#177; &#160; 4#160; 177 plusmn<BR>
81181; &#160; &#160; 181 micro<BR>
&I182; &#160; &#160; 182 para<BR>
& # 1 8 8 ; &#160; &#160; 188 frac!4<BR>
&#189; &#160; &#160; 189 frac!2<BR>
5#190; &#160; & # 1 6 0 ; 190 frac34<BR>
&#198; &#160; &#160; 198 AElig<BR>
&#216; &#160; &#160,- 216 Oslash<BR>
&#230; s#160; &#160; 230 aelig<BR>
&#247; &#160; &#160; 247 divide<BR>
</Н2>
</HTML>

Рис. 656. Эквиваленты некоторых часто употребляемых зарезервированных символов

Тэг <SAMP> применен только для того, чтобы использовать моноширинный шрифт. Многократное использование пробела (&#160;) связано с тем, что браузер сокращает количество «лишних» пробелов, введенных с клавиатуры, а они были нужны для задания достаточно большого расстояния между столбцами таблицы.

Графика на Web-страницах

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

вставка отдельных картинок; заполнение фона картинкой.

В любом случае графическое изображение берется из файла.

Вставка графических изображений

Вставка на страницу графического изображения из файла графического формата производится с помощью тэга <IMG> (от англ, image — изображение) с указанием адреса файла в качестве аргумента атрибута SRC:

<IMG SRC="адрес_графического_файла">

Адрес графического файла — этолибо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для показа графического файла logotip.jpg следует написать тэг

<IMG SRC="logotip.jpg">

Для увеличения скорости передачи графического изображения в тэге <IMG> можно использовать атрибут (дополнительный параметр) LOWSRC, который принимает в качестве аргумента адрес графического файла. Вы можете создать два графических файла: один (например, пусть это файл logotip.jpg) содержит картинку, полученную с высоким разрешением, а другой (например, logotip.gif) — картинку, полученную с низким разрешением. Тогда тэг

<IMG SRC="logotip.jpg" LOWSRC="logotip.gif">

предпишет браузеру сначала загрузить файл logotip.gif, а затем по мере приема заменить его файлом logotip.jpg.

Другой способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Заметим, что браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения:

<IMG SRC="logotip.gif" WIDTH=40 HEIGHT=20>

Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тэга <IMG> с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ для верхнего и нижнего полей и НSPACE для боковых полей в тэге <IMG>. Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Для отмены обтекания графики текстом служит тэг <BR CLEAR=. . . >.

Следующий тэг задает обтекание графики из файла logotip.jpg справа (картинка будет находиться слева от текста):

<IMG SRC="logotip.jpg" ALIGN=LEFT>

Если требуется расположить картинку справа от текста, то нужно атрибуту ALIGN присвоить аргумент RIGHT:

<IMG SRC="logotip.jpg" >

Чтобы задать поля вокруг картинки, надо написать тэг вида:

<IMG SRC="logotip.jpg" ALIGN=LEFT HSPACE=20 VSPACE=10>

Здесь числа 20 и 10 определяют размеры полей.
Рассмотрим пример совместного использования графики и текстов. Откройте Блокнот (текстовый редактор Notepad) Windows. Напишите в нем HTML-код с использованием рассмотренных выше тэгов. Ниже приводится программа, выводящая некоторый текст и графику. В качестве графического файла можно использовать любой из имеющихся у вас файлов. Здесь используется файл logotip.gif.

<HTML>
<HEAD> <TITLE> Упражнение 1 </TITLE>
</HEAD>
<BODY BGCOLOR="YELLOW">
<IMG SRC="logotip.gif " ALIGN=LEFT>
<Н1>Текст обтекает графику справа</Н1>
Это - пример совместного использования текста и графики. <BR> Текст программы HTML можно писать в любом текстовом редакторе . При этом используются тэги разметки текста .
<P>
Этот текст выводится с нового абзаца. Чтобы сделать это, мы использовали специальный тэг.
<P>
Попробуйте изменить размеры окна Вашего браузера. Обратите внимание, как изменяется расположение текста.
</BODY> </HTML>

Рис. 657. Текст обтекает картинку справа

Широкие возможности точного позиционирования изображений (как и других элементов) на странице предоставляют таблицы и стили. Эти элементы HTML будут рассмотрены позже. Например, вы можете определить таблицу без видимых рамок, а в ячейках этой таблицы разместить картинки, тексты и другие элементы.

Фоновая графика

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

Картинка может представлять собой небольшой прямоугольник или длинную узкую полоску (например, залитую градиентом).

Фоновая графика задается в тэге <BODY> в начале документа HTML, подобно тому, как задается цвет фона. При этом используется атрибут BACKGROUND, значением которого является имя графического файла. Например, если мы хотим для фона взять файл fon.gif. то соответствующий тэг будет выглядеть так:

<BODY BACKGROUND="fon.gif">

Для браузера Internet Explorer можно использовать дополнительный атрибут BGPROPERTIES=FIXED, запрещающий прокрутку фона в окне экрана. Например:

<BODY BACKGROUND»"fon.gif" BGPROPERTIES=FIXED >

Следует иметь в виду, что существуют неграфические браузеры, а в графических браузерах пользователи могут отключать загрузку графики, поэтому можно задать и текстовое описание графики, встроенной в документ, т. е. описать вид картинки или указать размер и формат графического файла. Последнее даже предпочтительнее, поскольку пользователь графического браузера сможет сам решить, стоит ли загружать тот или иной графический файл или лучше не тратить время на это. Подмена графики текстом осуществляется с помощью атрибута ALT в тэге <IMG>. Например:

<IMG SRC="logotip.gif" ALT="[Логотип, GIF 18K]">

Ссылки

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

В языке HTML структуры текстовых и графических ссылок подобны друг другу. Все они задаются тэгом <А HREF>, которому соответствует закрывающий тэг </А>. В ссылке сначала указывается имя файла, на который она ссылается, а затем текст или имя графического файла, содержащего изображение ссылки. Кроме простых графических ссылок, можно создать так называемую графическую карту ссылок: картинку с «горячими областями», щелчок на которых приводит к срабатыванию соответствующих ссылок.

Графические ссылки

Структура графической ссылки имеет вид:

<А НREF="адрес_ссылки"> <IMG SRS="имя_графического_файла">

Например, следующий тэг описывает ссылку на HTML-файл докум2. htm, при этом ссылка на экране будет представлена картинкой из файла Iogotip.gif:

<А НREF="докум2.htm"> <IMG SRC="logotip.gif "

К графической ссылке можно добавить поясняющий текст, как это сделано ниже:

<А НREF="докум2.htm"> <IMG SRC="logotip.gif "></A> Щелкните здесь

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

Графическая карта задается с помощью нескольких тэгов. Первым является тэг <МАР> (карта) с атрибутом NAME для указания имени карты. Имя карты выбирается как имя переменной. Далее, между тэгами <МАР> и </МАР> следуют тэги <AREA> (область) для задания горячих областей. Тэг <AREA> имеет ряд атрибутов, описывающих собственно ссылку, а также форму и положение горячей области:

HREF — строка, определяющая адрес ссылки; SHAPE — определяет форму области; принимает аргументы: "RECT" (прямоугольник); "POLYGONS" (многоугольник); "CIRCLE" (круг); COORDS — координаты области, которые задаются в виде перечня чисел, разделенных запятыми; весь перечень заключается в кавычки (для прямоугольника задаются четыре числа — координаты верхнеголевого и правого нижнего угла; для многоугольника задаются координаты каждого угла; для круга задаются три числа — координаты центра и радиус);

После закрывающего тэга </МАР> следует указать тэг, вставляющий графическое изображение и реализующий привязку карты к нему, — это уже известный тэг <IMG>, в котором помимо прочих возможных атрибутов используется атрибут связи с картой:

USEMAP="#имя_карты"

В качестве имени карты указывается аргумент атрибута NAME тэга <МАР>.
В нашем примере в основе графической карты ссылок находится топографическая карта некоторой местности. На ней мы определили прямоугольную и круглую горячие области, соответствующие двум населенным пунктам. При щелчке на горячей области будет выведен документ северный.htm или южный.htm, содержащие, например, описание соответствующего населенного пункта.

<HTML>
<НЕАD><ТITLЕ>Графическая карта</ТITLЕ> </НЕАD>
<МАР NAME="mapO">
<AREA HREF="северный.htm" SHAPE="RECT" COORDS="150,100,250,250">
<AREA HREF="южный.htm" SHAPE = "CIRCLE" COORDS = " 150,380,50">
</MAP>
<IMG SRC="KAPTA.JPG" USEMAP="#mapO" WIDTH=360 HEIGHT=480>
</HTML>

Графические карты ссылок обычно используются для создания красочных меню, а также в тех случаях, когда внешний вид страницы формируется с помощью графического редактора (например, Adobe Photoshop), в котором можно создать картинку со всеми необходимыми надписями и художественными элементами, — это альтернатива использованию множества тэгов, вставляющих различные элементы. Основная трудность здесь состоит в определении координат горячих областей. Однако если известны ширина и высота всего изображения, то координаты горячих областей можно рассчитать, хотя бы приблизительно, а затем уточнить опытным путем при отладке. Работа существенно упрощается при использовании такого средства проектирования Web-страниц, как FrontPage.

URL-адреса ссылок

В рассмотренных выше примерах в качестве адреса ссылки использовалось имя файла. В общем случае можно применять URL-адрес (Uniform Resource Locator, Унифицированный указатель ресурса). Формат URL-адреса включает: тип сетевой службы (протокол связи), адрес сервера, путь поиска и имя файла. Ниже перечислены URL наиболее популярных служб Интернета:

Стиль	Тэг
Полужирный (Bold)	<В>
Курсив (Italic)	<I>
Подчеркнутый (Underscore)	<U>
Вычеркнутый (Strike )	<S>
Пишущая машинка (Typewriter)	<TT>
Мерцающий (только для браузера Netscape Navigator)	<BLINK>

Если вы указываете адрес, начинающийся с http, тем самым вы обращаетесь к ресурсам, доступ к которым осуществляется по протоколу HTTP(HyperText Transfer Protocol, Протокол передачи гипертекста). Этот протокол используется в качестве основного в World Wide Web (WWW) при передаче информации, находящейся в HTML-документах.

Префикс адреса ftp означает, что следует использовать протокол передачи файлов FTP (File Transfer Protocol). Этот протокол используется при передаче файлов-программ, имеющих расширение ехе. Он может использоваться при перемещении любых файлов с одного компьютера на другой. В частности, при перекачке файлов вашей страницы на сервер используется именно этот протокол. Протокол FTP обеспечивает высокую надежность передачи файлов.К примеру, если еще можно вытерпеть потерю до 10% обычной текстовой информации, то при передаче программы вообще не допускается потеря — неточно переданная программа просто не будет работать.

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

News — служба обеспечения телеконференций, это система типа доски объявлений, на которую вы можете поместить свое сообщение и прочитать то, что туда послали другие участники телеконференции.
Ниже приведены примеры ссылок с применением URL-адресов:

<А HREF="ftp://ftp.admiral.ru/PUB/index.htm);т">Бесплатный доступ</А>
<А HREF="mailto:dunaev@mail.admiral.ru">0тправить почту</А>

Пути поиска могут быть абсолютными и относительными. Абсолютный путь описывает местоположение файла, начиная с самого высокого уровня, и включает имена всех каталогов, ведущих к файлу. Ошибка в записи абсолютного пути (адреса) файла приводит к тому, что файл не будет найден. Относительный путь (адрес) описывает местоположение файла относительно места расположения текущего документа. Так, если вы указываете просто имя файла myfile.htm, это означает, что вы указываете относительный адрес. В данном случае браузер будет искать его в том же каталоге, где находится текущий документ. Если перед именем файла поставить две точки и слэш (../), например, ../myfile.htm, то браузер будет искать файл в каталоге, находящемся на один уровень выше, чем тот, в котором находится текущий документ. Аналогично, если перед именем файла поставить ../../ (например, ../../myfile.htm), то браузер будет искать файл в каталоге на два уровня выше, чем текущий.

При создании ссылок вы можете указывать не только на конкретные документы и программы (т. е. конкретные файлы, используя путь к ним), но и на папки (каталоги). Другими словами, адрес — это описание места расположения ресурса (единицы хранения информации). Он может быть точным или «приблизительным» (неполным). Вы можете ссылаться на папку, HTML-документ, документ, созданный каким-либо приложением (например MS Word, MS Excel), или просто на текстовый файл с расширением txt. Наконец, можно сослаться на файл программы с расширением ехе. Однако в последнем случае (по крайней мере, в Internet Explorer) сработает защита вашего компьютера. Появится окно с предупреждением и предложением возможных вариантов: запустить файл программы или сохранить его на диске — предохранительная мера против возможных вирусов. В этом случае вы решаете сами, что делать. Можно сразу запустить файл программы, а можно сохранить его на локальном диске, проверить с помощью антивирусной программы и только потом запустить, или вылечить, или уничтожить.

Таблицы

Довольно часто на Web-страницах встречаются таблицы. Простейший пример табличной организации данных — прайс-лист. Однако таблицы можно использовать просто как способ форматирования текста, поскольку таблица в HTML-документе может не содержать всех или некоторых разграничительных линий (сетки). Заметим, что в большинстве случаев элементы текста позиционируются как табличные.

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

Таблица представляет собой особую часть документа HTML. Данные в ней организованы в виде прямоугольной сетки, которая состоит из вертикальных столбцов (колонок) и горизонтальных строк (рядов). Каждая клетка таблицы называется ячейкой. Ячейки могут содержать текст, графику и даже другую таблицу.

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

Описание таблицы в документе HTML начинается с тэга <TABLE> и заканчивается тэгом </TABLE>. Если вы хотите, чтобы таблица имела видимую рамку (границы), используйте атрибут BORDER, например:

<TABLE BORDER>

Атрибут BORDER может принимать аргумент (число), определяющий ширину рамки, например:

<TABLE BORDER=10>

Для задания названия таблицы используется тэг <CAPTION> с атрибутом выравнивания ALIGN, который может принимать значения ТОР или BOTTOM (расположение названия вверху или внизу таблицы соответственно), например:

<CAPTION ALIGN=TOP> Моя таблица </CAPTION>

Каждый ряд ячеек начинается с тэга <TR> и заканчивается тэгом </TR>. Если ряд должен содержать заголовки столбцов таблицы, то используются тэги <ТН> и </тн>. Если в ячейках должны размещаться данные, то используются тэги <TD> и </TD>.
Тэги заголовков и данных должны располагаться между тэгами рядов <TR> и </TR>. Проще говоря, вы сначала определяете таблицу (тэг <TABLE>), а затем внутри этого определения задаете строки (тэг <TR>) и содержимое ячеек (тэг <TD> — для данных, тэг <ТН> — для названий заголовков столбцов).
Приведем пример описания простой таблицы, встроенной в некоторый текст. Обратите внимание на порядок заполнения ячеек таблицы. Сначала определяется строка заголовков столбцов таблицы, затем аналогичным образом создаются строки данных путем указания того, какие данные должны располагаться в ячейках таблицы. Строка заголовков столбцов задается так же, как и строка данных. Отличие состоит лишь втом, что при создании строки заголовков внутри тэга <TR> используется тэг <ТН>, а при создании строки данных — тэг <TD>.

<HTML>
<НЕАD> <ТIТLЕ>Таблицы</Т1ТLЕ> </НЕАD>
<BODY>
<Н2>Основные элементы таблиц</Н2>
<P>
Ниже приведен пример простой таблицы
<P>
<TABLE BORDER>
<CAPTION ALIGN=TOP>Cпиcoк сотрудников</САРТION>
<TR>
<ТН>Имя</ТН> <ТН>Должность</ТН> <ТН>Оклад</ТН>
</TR>
<TR>
<ТD>Иван</ТD> <ТD>Директор</ТD> <ТD>1000</ТD> </TR> <TR>
<ТD>Петр</ТD> <ТD>Бухгалтер</ТD> <ТD>800</ТD> </TR> <TR>
<ТD>Федор</ТD> <ТD>Рабочий</ТD> <ТD>50</ТD>
</TR>
</TABLE>
</BODY>
</HTML>

Рис. 659. Простая таблица, встроенная в текст

Несколько ячеек могут быть объединены в одну как по горизонтали, так и по вертикали. Объединение по столбцам применяют тогда, когда надо, чтобы соседние столбцы имели общий заголовок. Объединение по строкам делается в том случае, когда содержимое нескольких ячеек подряд одинаково. Для объединения ячеек используются тэги COLSPAN и ROWSPAN (по столбцам и по строкам соответственно). Аргументами этих атрибутов являются количества объединяемых столбцов или строк. Вот пример объединения ячеек:

<HTML>
<НЕАD> <ТITLE>Таблицы</ТIТLЕ> </НЕАD> <BODY>
<Н2>Основные элементы таблиц</Н2>
<P>
Ниже приведен пример простой таблицы с объединенными ячейками
<P>
<TABLE BORDER>
<CAPTION ALIGN=ТОР>Список сотрудников</CAPTION>
<TR> <TH COLSPAN=2>Имя и должность</TH> <ТН>Оклад</ТН>
</TR>
<TR> <TD>Иван</TD><TD>Директор</TD> <TD>1000</TD>
</TR>
<ТР> <ТD>Петр</ТD> <ТD>Бухгалтер</ТD> <ТD>800</ТD>
</TR>
<ТК> <ТD>Федор</ТD> <ТD ROWSPAN=2>Pa6oчий</TD> <TD>50</TD>
</TR>
<TR><TD>Bacилий</TD><TD>70</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Рис. 660. Пример объединения ячеек

Как шириной всей таблицы, так и шириной каждой отдельной ячейки можно управлять. Ширину всей таблицы можно задать как в пикселах, так и в процентах от ширины окна. Ширину ячеек можно задать также двумя способами: в пикселах и в процентах от ширины таблицы. Следует иметь в виду, что ячейки в одном столбце имеют одинаковую ширину, а ячейки одной строки — разную ширину. Ширина таблицы задается атрибутом WIDTH в тэге <TABLE>, ширина ячейки указывается тем же атрибутом в тэге <ТН> или <TD>.

<HTML>
<НЕАD> <ТITLE>Таблицы</ТITLE> </НЕАD>
<BODY>
<Н2>Основные элементы таблиц</Н2>
<Р>
Ниже приведен пример таблицы с объединенными ячейками и заданными
размерами
<Р>
<TABLE BORDER WIDTH=400>
<CAPTION ALIGN=TOP>CnncoK сотрудников</САРТIОN>
<TR>
<TH COLSPAN=2 WIDTH=75%>Имя и должность</ТН> <ТН>Оклад</ТН>
</TR>
<TR>
<ТD>Иван</ТD><ТD>Директор</ТD><ТD>1000</ТD>
</TR>
<TR>
<ТD>Петр</ТD><ТD>Бухгалтер</ТD><ТD>800</ТD>
</TR>
<TR>
<ТD>Федор</ТD><ТD ROWSPAN=2>Pa6o4MM</TDXTD>50</TD>
</TR>
<TR>
<ТD>Василий</ТD><ТD>70</ТD>
</TR>
</TABLE>
</BODY>
</HTML>

Рис. 661. Пример таблицы с заданной шириной ячеек

Текст и графику внутри ячеек таблиц можно выравнивать. Горизонтальное и вертикальное выравнивание содержимого рядов задается с помощью атрибута ALIGN в тэге <TR>. Выравнивание в отдельных ячейках выполняет атрибут ALIGN в тэгах <ТН> и <TD>. Атрибут ALIGN может принимать аргументы LEFT (по левому краю), RIGHT (по правому краю) и CENTER (по центру).

Примеры использования атрибута ALIGN:

<TR ALIGN=LEFT>
<TH WIDTH=25% ALIGN=CENTER>Имя и должность</TH>

Для определения дизайна рамок таблицы в браузере Internet Explorer можно использовать атрибут FRAME тэга <TABLE>. Ниже перечислены возможные аргументы атрибута FRAME, указывающие способы изображения рамки:

BOX — все четыре стороны рамки; ABOVE — только верхняя часть рамки; BELOW —только нижняя часть рамки; HSIDES — горизонтальные части рамки сверху и снизу; VSIDES — только левая и правая вертикальные части рамки; LHS — только левая часть рамки; RHS — только правая часть рамки; VOID — не изображать внешнюю рамку.

Разделительные линии между столбцами и рядами таблицы описывается атрибутом RULES в тэге <TABLE>. Атрибут RULES может принимать следующие значения, задающие способ изображения разделительных линий:

ALL — все вертикальные и горизонтальные линии; ROWS — только горизонтальные линии между рядами; COLS — только вертикальные линии между столбцами; NONE — не изображать разделительные линии.

Приведем пример управления дизайном таблиц.

<HTML>
<НЕАD> <ТITLE>Таблицы</ТITLE></НЕАD> <BODY>
<Н2>Основные элементы таблиц</Н2>
<Р>Различный дизайн таблиц
<Р>
<TABLE BORDER=15 FRAME=BOX RULES=ROWS WIDTH=300>
<CAPTION ALIGN=TOP>Cписок сотрудников</САРТION>
<TR>
<TH COLSPAN=2>Имя и должность</ТН><ТН>Оклад</ТН>
</TR> <TR>
<ТD>Иван</ТD><ТD>Директор</ТD><ТD>1000</ТD>
</TR>
<TR>
<ТП>Петр</ТD><ТD>Бухгалтер</ТD><ТD>800</ТD>
</TR>
<TR>
<ТD>Федор</ТD><ТD ROWSPAN=2>Pa6oчий</ТD><ТD>>50</TD>
</TR>
<TR>
<ТD>Василий</ТD><ТD>70</ТD>
</TR>
</TABLE> <TABLE BORDER=10 FRAME=BOX RULES=COLS WIDTH=300>
<CAPTION ALIGN=TOP>Список сотрудников</САРТION>
<TR>
<TH COLSPAN=2>Имя и должность</ТН><ТН>Оклад</ТН>
</TR>
<TR>
<ТD>Иван</ТD><ТD>Директор</ТD><ТD>1000</ТD>
</TR>
<TR>
<ТD>Петр</ТD><ТD>Бухгалтер</ТD><ТD>800</ТD>
</TR>
<TR>
<ТD>Федор</ТОХТП ROWSPAN=2>Pa6oчий</ТD><ТD>50</TD>
</TR>
<TR>
<ТD>Василий</ТD>70</ТD>
</TR>
</TABLE>
</BODY>
</HTML>

Рис. 662. Примеры оформления таблиц

В следующем примере используем таблицу без рамок как способ размещения различных элементов на странице. В ячейки помещены текстовые ссылки, картинки и число 1000, а некоторые ячейки остались пустыми. Для задания нужного расстояния между элементами следует использовать атрибуты выравнивания. Пока еше нет другого способа разместить несколько элементов в одном ряду, кроме использования таблиц. В следующем разделе, посвященном каскадным таблицам стилей, будет рассмотрен другой способ позиционирования элементов. В приведенном ниже примере просто задана таблица, но не указаны ее размеры и способ выравнивания для того, чтобы показать: можно располагать элементы как по горизонтали, так и по вертикали в пределах некоторой области. При этом только опытный программист на языке HTML может догадаться по внешнему виду страницы, что для ее создания была использована таблица. Освойте этот прием позиционирования, если хотите располагать на Web-странице много графических элементов и ссылок. Это позволит сэкономить место и достаточно эффектно разместить материал в окне браузера.

<HTML>
<НЕАD> <ТITLE>Таблица</ТITLE></НЕАD>
<BODY>
<Н2>
Использование таблицы как способа расположения элементов на странице
</Н2>
<TABLE>
<TR>
<TD><A HREF="пример1.htm">Пример 1</A> </TD>
<TD> <IMAGE SRC="logotip.gif» WIDTH=100 HEIGHT=100> </TD>
<TD>1000</TD>
</TR>
<TR>
<TD> <A HREF="пример2.htm">Пример 2</A> </TD> <TD> <IMAGE ЗРС="квадрат.bmp"> </TD>
</TR>
</TABLE>
</BODY>
</HTML>

Цветовое оформление таблиц производится с помощью атрибута BGCOLOR, который принимает в качестве аргумента цвет в виде имени или шестнадцатеричного числа. Если нужно установить цвет для всей таблицы, то атрибут BGCOLOR вставляется в тэг <TABLE>. Для изменения цвета только одного ряда этот атрибут вставляется в тэг <TR>. Задание цвета отдельной ячейки обеспечивается атрибутом BGCOLOR внутри тэга <TD>.
Если в таблице имеются рамки, то можно указать и их цвет с помощью атрибутов:

BORDERCOLOR — цвет всей рамки; BORDERCOLORLIGHT — цвет светлой части рамки; BORDERCOLORDARK — цвет темной части рамки.

Рис. 663. Пример размещения нескольких элементов с помощью таблицы без рамок

Эти атрибуты вставляются в тэг <TABLE>. Чтобы они действительно работали, необходимо присутствие еще и атрибута BORDER, задающего ширину рамки. Ниже приводится пример использования атрибута цвета в различных тэгах таблицы.

<TABLE BGCOLOR="#FOFOFO" BORDER=10 BORDERCOLOR="#808080" BORDERCOLORLIGHT="#707070" BORDERCOLORDARK="#202020"> <TR BGCOLOR="BLUE">
<ТН>Имя</ТН> <ТН>Адрес</ТН>
</TR>
<TR>
<TD BGCOLOR="YELLOW">Иван</ТD><ТD>г.Санкт-Петербург</ТD>
</TR>
</TABLE>

Если требуется задать шрифт для текстов внутри ячеек таблицы, то это можно сделать с помощью тэгов заголовков и физических стилей внутри тэгов <TD> :

<TD BGCOLOR="YELLOW"><Н2>Иван</Н2> </ТD>

Теперь вы имеете общее представление о том, зачем нужны таблицы и как их создавать. Следует заметить, что таблицы удобно готовить в таких редакторах, как FrontPage и Dream Weaver. С их помощью визуальными средствами можно начертить таблицу и вставить в ее ячейки необходимые данные. В этом деле редактор Dream Weaver даже более удобен, чем FrontPage.

Стили

Существует еще один прием позиционирования элементов и достижения внешних эффектов, которые могут украсить страницу и привлечь к ней внимание читателей. Этот прием основан на определении пользовательских стилей и задании таблицы стилей. Таблица стилей — это просто некоторая структура описания свойств элемента. Не ищите здесь какой-нибудь прямоугольной сетки. Если таблица стилей задана, то различные документы могут просто ссылаться на эту таблицу и не содержать большое количество атрибутов в тэгах форматирования типа <Н1>, <FACE> и т. п. Каскадные таблицы стилей (CSS, Cascading Style Sheets) содержат описание формата части или всего текста, координаты расположения элементов и другие параметры. Задание стиля обеспечивается с помощью как тэга <STYLE1>, так и атрибута STYLE1. Используя стили, можно позиционировать элементы страницы (например, тексты и графику), указав координаты их положения. И это, пожалуй, самое важное, что дают стили. Кроме того, таблицы стилей часто применяются при создании динамических страниц.

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

Тэги <STYLE1> и </STYLE1> используются внутри тэгов заголовка файла <HEAD> и </HEAD>, а атрибут STYLE1 — в тэге заголовка раздела (<Н1>, <Н2>,..., <H6>), а также в тэге <BODY>, в тэге выделения фрагмента <DIV> и многих других.
Применение тэга <STYLE1>:

<HEAD>
<STYLE1>
Тэг {свойство 1:значение 1; свойство2: значение; ...;
свойство N: значение N}
</STYLE1>
</HEAD>

Здесь в фигурных скобках через точку с запятой перечисляются свойства и их значения, причем между свойством и его значением ставится двоеточие. При этом тэг, указываемый перед описанием в фигурных скобках, пишется без угловых скобок.
В следующем примере определяются стили заголовков первого и второго уровней путем использования тэга <STYLE1>.

<HTML>
<HEAD>
<STYLE1>
HI {Font-size:48pt;Color:RED}
Н2 {Font-size:20pt;Color:BLUE}
</STYLE1>
</HEAD>
<BODY>
<Н1>Это стиль H1. Цвет - красный</Н1>
<Н2>Это стиль Н2. Цвет - синий</Н2>
Это - обычный стиль по умолчанию
</BODY>
</HTML>

Мы изменили стили Н1 и Н2, принятые по умолчанию: назначили размеры (48 и 30 пунктов) и цвета (красный и синий) для всех текстов, которые окажутся внутри этих тэгов. Существуют и другие свойства. Например, свойство FONT-FAMILY: HELVETICA задает гарнитуру шрифта HELVETICA.

Обратите внимание на то, что внутри тэга <STYLE1> указываются определения стилей тегов, которые записываются без угловых скобок.

Рис. 664. Стили заголовков первого и второго уровней заданы атрибутами тэга <STYLE1>

Можно определить стиль для тэга BODY. Тогда весь текст, находящийся между тэгами <BODY> и </BODY>, будет автоматически отформатирован в соответствии с перечисленными свойствами.

Если мы хотим задать один и тот же стиль сразу для нескольких тэгов, то перед определением стиля (всего того, что заключено в фигурные скобки) можно указать перечень тэгов (без угловых скобок), разделенных запятыми. В следующем примере задается одинаковый стиль для заголовков первого и второго уровней.

<HTML>
<HEAD>
<STYLE1>
HI, H2 (Font-size:48pt;Color:RED}
</STYLE1>
</HEAD>
<BODY>
<Н1>Это стиль HI. Цвет - красный</Н1>
<Н2>Это стиль Н2, такой же, как и HI. Цвет - красный</Н2>
Это - обычный стиль по умолчанию
</BODY>
</HTML>

Мы можем создать таблицу стилей, закрепив за ней имя. Это имя задается как обычное имя, но с точкой в качестве первого символа. Тогда в тэгах мы можем обращаться к этой таблице по ее имени, используя атрибут СLASS=имя_стиля, где имя стиля употребляется уже без точки.
Например, можно задать стиль так:

<STYLE1>
mystyle (color:black;font-family:Aria1}
</STYLE1>

А стиль заголовка второго уровня можно задать где-нибудь в тексте программы так:

<Н2 CLASS=mystyle>

Рассмотрим пример, создающий эффект, который без задания стиля был бы достижим только с помощью графики. Мы накладываем тексты друг на друга. Эта возможность далее будет использована для создания эффекта объемного текста (так называемого ЗD-эффекта). Кроме того, возможность наложения (частичного перекрытия) фрагментов страницы часто используется в дизайне реальных страниц. Вданном примере применяется тэг <DIV> для выделения фрагмента HTML-документа. Обратите внимание, как внутри определения стиля тэга BODY определяются другие стили с именами тень, основа, слой 1 и слой2. Это и есть то, что понимается под каскадной таблицей стилей.

<HTML>
<HEAD>
<TITLE>Пример CSS</TITLE>
<STILE> BODY {color: black; font-size:16px; font-family: Arial}
.тень {color: #DBDBDB; text-align:right; weight: medium; margin-top: ЗОрх;
font-size:27Opx;1ine-height: 270px;
font-family: Times)
.основа (color: red; weight: 900; margin-top: —230px; font-size:220px;
line-height: 250px; font-family: Times)
. слой1(color: black; margin-top: ~130px; weight: medium; ont-size:65px;
line-height: 65px; font-family: Arial}
.слой2 {color: green; margin-top: ЗОрх; weight: medium; font-size: 35px;
line-height: 45px; font-family: Arial}
</STYLE1>
</HEAD>
<BODY>
Пример каскадного стиля <CENTER>
<TABLE WIDTH=500 CELLPADING=0 CELLSPACING=0 BORDER=0> <TR>
<TD ALIGN=CENTER VALIGN=TOP>
<DIV CLASS=Tень>Мы/DIV>
<DIV CLASS=ocHOBa>Мы/DIV>
<DIV CLASS=слой1>сделали это без всякой графики</DIV>
<DIV CLASS=слой2>используя только стили текста</DIV>
</TD> </TR>
</TABLE>
</CENTER>
</BODY>
</HTML>

Рис. 665.

В приведенном примере использованы тэг <DIV> и атрибут CLASS. Тэг <DIV> применяется для задания части страницы (фрагмента документа). Он ничего не форматирует, а лишь помечает фрагмент текста, который рассматривается как единый объект. Атрибут CLASS позволяет сослаться на таблицу стилей и тем самым задать стиль представления текста, расположенного между тэгами <DIV CLASS . . . > и </DlV>. Обратите внимание на то, как в таблице стилей определяется стиль: набору свойств в фигурных скобках присваивается имя, перед которым ставится точка. В дальнейшем идут ссылки на эти имена с помощью атрибута CLASS для применения ранее определенного стиля. Идея проста: сначала определяется что-то, а затем используется это определение путем ссылки на него.

В этом примере тексты определяются как бы в слоях, которые накладываются друг на друга. Так, сначала выводится слой тень, затем на него накладывается слой основа, а потом — слой1 и слой2. Порядок, в котором слои накладываются друг на друга, задается порядком следования фрагментов текста, помеченных тэгом <DIV>. Собственно перекрытие слоев обеспечивается применением отрицательных значений свойства margin-top (отступ сверху).

В рассмотренном выше примере были использованы следующие свойства:

margin-top — отступ сверху; color —цвет; font-size — размер шрифта; font-family — семейство шрифтов; weight — степень «жирности» шрифта; line-height — высота строки.

Используя отрицательные значения свойства margin-top, можно наложить один текст на другой.

Кроме рассмотренных выше способов задания стилей, можно применять атрибут STYLE1, вставляемый в тэги заголовков, абзаца <Р>, тела <BODY>, <DIV> и <IMG>. В этом случае стиль задается в следующем формате:

STILE ="описание_свойств_стиля"

Описание свойств стиля заключается в кавычки и содержит свойства и их значения, перечисленные через точку с запятой, как это делалось при использовании тэга <STYLE1>.

Атрибут STYLE1 обычно применяется в тех случаях, когда необходимо задать стиль элемента по месту его появления в программе. Вот пример использования атрибута STYLE1 для форматирования заголовка второго уровня.

<Н2 STYLE1="font-size:48; font-family:Аг1а1">Некоторый текст</Н2>

Позиционирование элементов

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

left — для задания расстояния в пикселах от левого края окна (х-координата); top — для задания расстояния в пикселах от верхнего края окна (у-координата); z-index — для указания порядка, в котором элементы будут перекрывать друг друга; это новое измерение, элементы с большим z-индексом будут появляться над элементами с меньшим z-индексом.

Конечно, при использовании этих трех свойств не создается эффект трехмерного пространства, но это уже нечто большее, чем плоская поверхность. В этом случае говорят о 2,5-мерном пространстве.

Кроме свойств-координат, нам понадобится свойство роsition, которое в сочетании со свойствами left и top позволяет устанавливать элементы в определенные позиции окна. Свойство position может принимать три значения:

absolute — заданные свойства left и top поставят элемент в точку с координатами х и у относительно верхнего левого угла контейнера (объекта, содержащего данный элемент). Если они определены для элемента вне контейнера, то началом отсчета координат будет верхний левый угол страницы. Заметим, что положение элемента не зависит от положения его тэга внутри HTML-документа; relative — элемент будет установлен в соответствии с тем, в каком месте исходного текста он находится; это значение установлено по умолчанию. Например, если элемент находится в трех строках от начала его выделения в тексте документа, то по умолчанию считается, что свойство позиционирования имеет значение relative, а свойства координат left и top — нулевые значения. Ненулевые значения свойств left и top задают сдвиг элемента относительно исходного положения; static — элемент будет поставлен в некоторое положение относительно фона и не будет перемещаться при прокручивании страницы.

Следующий пример показывает использование свойства z-index. Хотя в тексте программы картинка описана выше остальных элементов, за счет присвоения ей индекса с большим номером происходит перемещение ее поверх первого текста. Таким образом, использование свойства z-index освобождает от пут естественного порядка упоминания элементов в тексте HTML-программы.

<HTML>
<НЕАD><TITLE>Позиционирование</TITLE> </НЕАD> <BODY BGCOLOR="AQUA">
<DIV STYLE1="position:absolute;
top:0;left:70;width:50,-height:100;z-index:2">
<IMG SRC="logotip.gif">
</DIV>
<DIV STYLE1="position:absolute; top:15;left:15;width:400,-height:100;
z-index: 1">
<H1 STYLE1="color : red">nepBbiu позиционированный текст</Н1>
<DIV STYLE1="position:absolute; top:60;left:300/width:50 ;
height: 100">
<H1 STYLE1="color:Ыие">Второй позиционированный текст</Н1>
</DIV>
</BODY>
</HTML>

Рис. 666. Использование свойства i-index позволяет изменить естественный порядок следования элементов в тексте HTML-документа

При позиционировании элементов может оказаться, что размеры элемента превосходят размеры фрагмента (отводимой области, заданной в нашем примере тэгом <DIV>). Например, текст или картинка не помещаются полностью в прямоугольник, выделенный для них. На этот случай имеется свойство overwlow (переполнение). Свойство overflow может иметь три значения:

nоnе (ничего) — если элемент и выйдет за пределы фрагмента (отведенного для него места), он все равно будет показан; clip — выступающие за границы фрагмента части элемента будут обрезаны; scroll — будет использована прокрутка.

В следующем примере используется свойство overflow для создания механизма прокрутки первого текста.

<HTML>
<НЕАD><ТIТLЕ>Позиционирование</ТIТLЕ></НЕАD>
<BODY BGCOLOR="AQUA">
<DIV STYLE1="position:absolute; top:0;left:70;width:50;height:100">
<IMG SRC="logotip.gif">
<DIV STYLE1="position:absolute; top:10;left:15;width:220;height:120;
overflow:scroll">
<H1 STYLE1="color: red">riepBbiM позиционированный текст </Н1>
<DIV STYLE1="position:absolute;
lop:60;left:300;width:50;height:100">
<H1 STYLE1="color:Ыие">Второй позиционированный текст</Н1>
</BODY>
</HTML>

Рис. 667. Механизм прокрутки текста, реализованный с помощью свойства overflow

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

Рис. 668. Пример создания трехмерного текста с помощью CSS

<HTML>
<HEAD> <TITLE>3d эффект</ТITLE> <НЕАD>
<STYLE1>
P (font-family: "sans-serif"; font-size: 96, -color: red)
P. highlight (color : silver }
P. shadow ( color : darkred}
</STYLE1>
<BODY BGCOLOR="#509090">
<DIV STYLE1= "position: absolute; top: 5; left: 5;
width: 600; height : 100; margin: top :10">
<P CLASS=Shadow>Объемный текст'</Р>
<DIV
STYLE1="position: absolute; top: 0;left:0; width: 600;
height :100;margin: top: 10"> <P CLASS=highlight>Oбъeмный текст</Р>
<DIV STYLE1="position: absolute; top: 2; left: 2; width : 600;
height :100;margin: top: 10">
<P> Объемный текст </Р>
</DIV>
</BODY>
</HTML>

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

Статические фильтры

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

Статический фильтр можно задать как свойство в таблице стилей, используя запись вида:

filter: название_фильтра

или, при наличии параметров, такую запись:

filter : название_фильтра (параметр 1 , параметр2 , . . . , параметры)

В языке HTML (версии 4) имеется 14 статических фильтров. Перечислим некоторые из них, используемые без параметров и чаще других:

blur — создает эффект размытости; fliph — создает горизонтальное отражение картинки или текста; flipv — создает вертикальное отражение картинки или текста; Wave — создает «волнистое» искажение картинки или текста; Хгау — показывает только контур объекта (как бы в Х-лучах, т. е. «рентгеновское изображение»).

Ниже приводится текст программы, которая выводит графический файл и текст сначала без фильтра, а затем с фильтрами flipv, fliph и blur. Результат работы этой программы показан на рисунке. Обратите внимание, что фильтр blur, примененный к тексту, создает эффект трехмерности, т. е. текст как бы отбрасывает тень.

<HTML>
<НЕАD><TITLE>Фильтры</TITLE> </НЕАD> <STYLE1>
Р {position:absolute;top:0;left:190;font-size:80}
</STYLE1>
<BODY>
<IMG STYLE1="position:absolute;width:150;height:100" SRC="world.gif">
<IMG
STYLE1="position:absolute;top:120;left:10;width:150;
height:100,-filter:flipv" SRC="world.gif">
<IMG
STYLE1="position:absolute;top:2 30;left:10;width:150;
height:100;filter:fliph" SRC="world.gif">
<IMG
STYLE1="position:absolute;top:340;left:10;width:150;
height:100;filter:blur" SRC="world.gif">
<Р>Фильтр</Р>
<P STYLE1="top:130;filter:f11рv">Фильтр flip"</P>
<P STYLE1="top:240;fliter:f11рh">Фильтр fliph</P>
<P STYLE1="top: 360; filter:blur">Фильтр blur</P>
</BODY>
</HTML>

Рис. 669. Пример применения фильтров flipv, fliph u blur

Покажем работу еще двух фильтров: Хгау и Wave.

<HTML>
<НЕАD> <TITLE>Фильтры</TITLE> </НЕАD>
<STYLE1>
Р (position:absolute;top:0;left:190;font-size:48}
</STYLE1>
<BODY>
<IMG STYLE1="position:absolute;width:150;height:100" SRC="world.gif">
<IMG
STYLE1="position:absolute;top:120;left:10;width:150;height:100;filter:Xray" SRC = "world.gif ">
<IMG
STYLE1="position:absolute;top.-230;left:10;width:150;height:100;filter:Wave" SRC="world.gif">
<Р>Фильтр</Р>
<P STYLE1="top:130;filter:Хгау">Фильтр Xray</P>
<P STYLE1="top:240;filter:Wave">OmibTp Wave</P>
</BODY>
</HTML>

Нетрудно заметить, что эти фильтры не воздействуют на тексты.

Рис. 670. Пример применения фильтров Хгау и Wave

Динамические фильтры

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

Служба в Интернете	URL-адрес
World Wide Web	http://
FTP	ftp://
Mail	mailto:
Gopher	Gopher://
Телеконференции UseNet	news:
Ссылки в пределах одного документа Иногда оказывается полезным организовать ссылки на разделы одного и того же документа. Например, на своей странице вы размещаете статью объемом в несколько десятков страниц как единый HTML-документ. Скорее всего, вам захочется сделать ссылки на предыдущие или последующие разделы этого документа. Речь идет о ссылках не на другие HTML-документы, а на определенные места того же самого документа. Такие ссылки еще называют закладками. Для них нужны две вещи: якорь и собственно ссылка. Якорь определяет место в документе, к которому происходит переход по ссылке. Ссылка использует имя якоря вместо имени (адреса) файла. Формат якоря: <А NAМЕ="имя_якоря"> текст_на_экране</А> Формат ссылки: <А HREF"#имя_якоря"> текст_на_котором_щелкать</А> Ниже приводятся программа, демонстрирующая применение ссылок в пределах одного документа, и вид этого документа в окне браузера. Мы используем ссылки при создании оглавления документа, а также ссылки из текста одних глав на другие главы. <HTML> <HEAD><TITLE> Ccылки в пределах одного документа </TITLE> </НЕАD> <ВОDУ>Здесь используются текстовые ссылки на разделы в пределах одного и того же документа. При щелчке на ссылке окно браузера будет прокручиваться до тех пор, пока не появится соответствующий ссылке якорь. <Р> <Н2>Содержание</Н2> <Р><Р><А HREF="#Глава1">Глава1 . Основы HTML</A> <BR><A HREF="#Глава2">Глава2 . Примеры программ</А> <Н2><А NАМЕ="Глава1">Глава1 . </А>Основы языка HTML</H2> В этой главе мы собираемся рассмотреть основные элементы языка HTML. На языке HTML создаются документы, которые могут быть опубликованы в Интернете. После изучения основных конструкций языка мы подробно рассмотрим примеры программ (<А HREF="#Глава2">см. главу 2</А>) . <Р> <Н2><А NАМЕ="Глава2">Глава 2 . </А>Примеры программ</Н2> Здесь мы рассмотрим примеры программ с использованием элементов языка, которым посвящена <А HREF="#Глава1 ">Глава1 . </А> Прежде всего рассмотрим применение текстовых ссылок. </BODY> </HTML> Рис. 658. Пример документа, содержащего ссылки на свои разделы и отдельные фрагменты

В следующем примере картинка с изображением карты мира постепенно становится видимой через открывающиеся вертикальные жалюзи. Картинка из файла word.gif сначала невидима (свойство visibility:hidden таблицы стилей). В тэге <DIV> применен динамический фильтр revealtrans, управляющий появлением изображений. Сценарий содержит одну функцию dyn_filter (), которая применяет фильтр (метод apply ()), делает картинку видимой (свойству visibility присваивается значение «visible»), устанавливает тип преобразования (Transition=8) и задает длительность преобразования 2 с (методу play () передается числовой параметр 2). Далее определено, что эффект постепенного появления картинки начнется сразу же после загрузки страницы. Это достигается привязкой функции dyn_filter () к событию ONLOAD в тэге<ВОDУ>.

<HTML>
<HEAD> <TITLE> Динамический фильтр </TITLE>
<SCRIPT >
function dyn fliter () {
Imagel . filters (0) . apply ()
I1 . style .visibility" visible" Imagel . filters (0) .Transition=8
Imagel .filters (0) .play(2)
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="dyn_filter () ">
<DIV ID=Imagel STYLE1="position: absolute;
height: 2 00; width: 300; left: 10; top : 10; filter : reveal trans">
<IMG ID=I1 STYLE1="position:absolute; '
height : 200; width: 300; visibility : hidden" SRC=world. gif >
<H3 STYLE1= "posit ion: absolute; top:210">
Динамическое преобразование картинки с помощью фильтра </НЗ>
</BODY>
</HTML>

Рис. 671. Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи»

Заметим, что Image1— это имя (идентификатор) элемента-контейнера, заданного тэгом <DIV>; контейнер содержит единственный элемент (картинку), но мы использовали его только затем, чтобы применить к нему метод applay (), который не поддерживается элементом, созданным тэгом <IMG>; filters — коллекция всех фильтров, фильтр (единственный) указан номером в коллекции: Imagel.filters (0).

Если в приведенной выше программе изменить тип преобразования, например, на 3 (расширяющийся круг) путем замены в теле функции соответствующей записи Image 1. filters (0) .Transition=3, то получится такой эффект, как показано на следующем рисунке (картинка постепенно появляется в расширяющемся круге):

Рис. 672. Динамическое преобразование картинки с помощью фильтра «Расширяющийся круг»

При установке фильтра типа 12 возникает эффект постепенного повышения разрешения изображения путем случайного заполнения пикселами места, отведенного под картинку. Точки картинки постепенно выводятся на экран в случайном порядке.

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

Следующая программа аналогична рассмотренной выше, но в ней применяется другой фильтр (blendtrans), который создает эффект постепенного повышения яркости и насыщенности изображения. Этот фильтр имеет только один параметр — продолжительность преобразования (duration). Обратите внимание, что новая программа получилась из предыдущей путем замены двух строк.

<HTML>
<HEAD> <TITLE> Динамический фильтр </TITLE>
<SCRIPT>
function dyn_filter(){
Imagel.filters(0).Apply()
II . style.visibility="visible"
Imagel.filters (0) .play (2)
</SCRIPT>
</HEAD>
<BODY ONLOAD="dyn_f liter ()">
<DIV ID=Imagel STYLE1="posi t ion : absolute;
height : 200; width: 300; left: 10; top: 10; f ilter :
blendtrans ">
<IMG ID=I1 STYLE1="position:absolute;
height : 200; width: 300 ; visibility :
hidden" SRC=world. gif >
<H3 STYLE1="position:absolute; top:210">
Динамическое преобразование картинки с помощью фильтра
</НЗ>
</BODY>
</HTML>

Попробуйте применить фильтр revealtrans, управляющий появлением картинки, при различных значениях (0-23) параметра transition, который задает тип преобразования. Для этого можно использовать в качестве основы один из рассмотренных выше текстов HTML-программы.

При создании динамических сцен может потребоваться переориентировать картинку при изменении направления ее движения. Например, при изменении направления движения самолета на противоположное следует развернуть его изображение на 180°. Конечно, можно иметь две картинки с самолетом, на одной из которых самолет летит направо, а на другой — налево. Тогда вам потребуется только динамически изменять аргумент атрибута SRC в тэге <IMG>. Другой способ состоит в том, чтобы две картинки поместить на одном и том же месте, но динамически управлять их видимостью так, что в любой момент видна лишь одна картинка. Наконец, можно просто применить соответствующий статический фильтр к одной картинке. Попробуйте самостоятельно разработать эти сценарии.

Таблицы стилей в отдельных файлах

При использовании тэга <STYLE1> требуется вставлять таблицу стилей в каждый документ. Это может показаться довольно неэкономным как с точки зрения объема файлов, так и с точки зрения времени, необходимого для разработки страницы. Однако есть способ автоматического применения таблицы стилей, сохраненной в отдельном файле. Имя этого файла должно иметь расширение ess. Для применения стилей, описанных в этом файле, к данному документу используется специальная инструкция, которую следует вставить между тэгами <STYLE1> и </STYLE1>. Вот формат этой инструкции:

@ import URL ("адрес_файла_таблицы_стилей")

Например:

@ import URL ( "http: //abcd/xyz/style.css")

(здесь приведен вымышленный адрес файла описания стилей). Другой способ использования внешних таблиц стилей основан на применении тэга <LINK> внутри тэга <HEAD>. Например:

<HEAD> [<LINK REL=STYLE1SHEET TYPE="text/css"
НREF="адрес_файла__таблицы_стилей"
TITLE="Style"
</HEAD>

Вставка Flash-мультфильма в Web-страницу

Flash-мультфильм содержится в SFW-файле, т. е. в файле с расширением swf, созданном в программе Macromedia Flash. Чтобы вставить его в Web-страницу (в соответствующий ей HTML-документ), надо написать несколько строк HTML-кода. А именно: нужно вставить объект, который будет воспроизводить Flash-файл. Flash-файл может содержать мультимедийный документ (анимацию, векторную и растровую графику, звук, интерактивные элементы управления). В частности, вы можете создать статическую картинку, содержащую много элементов (например, большой чертеж). Для этого сохраните ее в векторном, экономном SWF-формате и втавьте в свой HTML-документ. Более того, Flash-мультфильм может почти полностью определять и представлять содержание вашей Web-страницы, оставляя HTML-документу лишь роль контейнера.

В Flash имеется специальная команда для создания HTML-документа со всеми необходимыми тэгами, обеспечивающими проигрывание SWF-файла, — File>Publish (Файл>Публикация). Этот вопрос мы рассматривали в главе 9. Однако нередко требуется вставить готовый мультфильм в уже имеющуюся Web-страницу. В таком случае удобнее скорректировать HTML-документ вручную, с помощью обыкновенного текстового редактора.

Итак, чтобы вставить Flash-мультфильм в HTML-документ, необходимо написать в этом документе несколько строк, задающих объект, который будет воспроизводить мультфильм. Это — тэг <OBJECT> с соответствующими параметрами. Тэг <OBJECT> является контейнером, т. е. тэгом, который содержит другие тэги, а именно — тэги, задающие параметры.

Главный параметр тэга <OBJECT> — classid. Он указывает на Flash-проигрыватель (элемент управления ActiveX). Параметр codebase указывает, где в сети взять Flash-проигрыватель, если он не установлен на вашем компьютере. Тэг <EMBED> вставлен ради Netscape-браузера. Другие параметры объекта записываются в тэге <PARAM>. Отметим лишь некоторые из них, которые в большинстве случаев оказываются достаточными.
Параметр <PARAM NAME=raovie VALUE="имя_swf_файла"> указывает на имя SWF-файла с Flash-мультфильмом. Параметры WIDTH и HEIGHT (ширина и высота) определяют размеры прямоугольника, в котором будет размещаться ваш Flash-мультфильм. Имейте в виду, что мультфильм может обрезан, а также ему может быть отведено слишком много места на странице. Параметр <РАRАМ NAME=wmode VALUE=transparent> определяет, каким будет фон вашего ролика. В частности, значение transparent задает прозрачность фона. Это значение наиболее часто используется при вставках мультфильмов в Web-страницы.
Возможные значения параметров лучше всего изучить по книгам или справкам к программе Flash. Для точного позиционирования Flash-ролика на странице можно воспользоваться контейнером с заданием координат в атрибуте STYLE1. Например, в Internet Explorer для этого подходит контейнерный тэг <DIV>.

В качестве примера приведем вставку Flash-мультфильма, представляющего собой калькулятор. Файл этого мультфильма calculator.swf можно взять из коллекции примеров программы Flash 5.0. HTML-код имеет следующий вид:

<DIV style= "posit ion: absolute; top: 120; left : 100 ">
<OBJECT classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"
codebase="http: //down load. macromedia .com
/pub /shock wave /cabs/flash/ swflash.cab#version=6, 0, 0, 0"
WIDTH="430" HEIGHT="450" id="Flashl" ALIGN="">
<PARAM NAME=movie VALUE="calculator . swf ">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=scale VALUE=noborder>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="Flashl . swf " quality=high scale=noborder
wmode=transparent bgcolor=#FFFFFF
WIDTH="430" HEIGHT="450" NAME="Flashl " ALIGN=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE=
"http:// www. macromedia . com/go/getf lashplayer"> </EMBED> </OBJECT>
</DIV>

Для полного изучения всех возможных параметров советуем обратиться к программе Flash и поэкспериментировать с командой Publish при различных вариантах параметров (см. главу 9). Выбирая различные значения параметров, смотрите, какой HTML-код получается при публикации.

Поле ввода данных

При создании интерактивных страниц может потребоваться передать ряд символов от пользователя. Например, мы можем попросить пользователя ввести его адрес электронной почты. Для этого необходимо поле ввода. Затем все то, что было введено, можно обработать с помощью программы-сценария.

Чтобы организовать поля ввода данных, применяется тэг <INPUT> с некоторыми атрибутами. Для ввода строки символов формат тэга <INPUT> имеет вид:

<INPUT TYPE="TEXT">

Если вы хотите, чтобы введенные символы появлялись на экране в виде звездочек (что обычно нужно при вводе пароля), то используйте такой формат:

<INPUT TYPE="PASSWORD">

Для ввода числовых значений используется соответствующий аргумент атрибута TYPE:

<INPUT TYPE="NUMERIC">

В тэг <INPUT> можно вставить и другие атрибуты:

NАМЕ="имя" — имя переменной, в которой сохраняется введенное значение; VALUE="значение" — начальное значение; SIZE="число" —длина текстового поля; МАХLENGТН="число" — максимальное количество символов, которое можно ввести.

Например:

<INPUT TYPE="TEXT" NAME="USERTEXT" VALUE="" SIZE="20">

Рис. 673. Поле ввода данных

Существует и другое средство для предоставления пользователю возможности вводить данные — метод prompt () языка JavaScript, который принимает в качестве параметров пояснительный текст и начальное значение, а затем отображает на экране окно для ввода значения. В этом окне есть две кнопки — ОК и Отмена. Метод возвращает введенное пользователем значение, либо false, если пользователь нажал кнопку Отмена.

Например, в результате выполнения функции prompt ("Введите текст", "") появляется следующее окно:

Рис. 674. Стандартное окно ввода данных, вызываемое методом prompt ()

Сценарии, связанные с полем ввода, будут рассмотрены в следующих разделах данной главы. Идея их проста. В тэге <INPUT> следует использовать атрибут NAME, чтобы иметь возможность привязать к полю ввода сценарий. В сценарии обычно обрабатывается аргумент атрибута VALUE. Инициация обработки, как правило, происходит по событию ONCHANGE (при изменении содержимого поля).

Переключатели

Тэг <INPUT> позволяет вывести на страницу не только поле ввода, но и другие элементы. Например, если использовать атрибут TYPE= "RADIO" , то можно создать набор переключателей (radio-button) — кружков, щелчок на одном из которых делает его отмеченным (выбранным), а все остальные — неотмеченными. Чтобы набор переключателей воспринимался как целое, его необходимо поместить внутри тэга списка <UL> и в каждом тэге <INPUT> использовать одно и то же имя (значение атрибута NAME). Чтобы выделить переключатель, применяется атрибут CHECKED. После тэга <INPUT> помещается текст, который мы хотим видеть рядом с переключателем. Атрибут VALUE используется для того, чтобы мы смогли узнать, какой переключатель выбрал пользователь, и обработать выбор в программе-сценарии. Радиокнопки называют еще селекторными переключателями в отличие от просто переключателей, под которыми имеют в виду флажки (см. ниже).
В следующем примере создается набор из трех переключателей:

<HTML>
<НЕАD><TITLE>Переключатели</TITLE></НЕАD>
<Н2> Kакой язык Вы используете ?
<UL>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="
Русский" CHECKED> Русский<ВR>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="
АнглиЙский"> Английский <BR>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="
Немецкий" > Немецкий
</UL>
</H2>
</HTML>

Рис. 675. Набор переключателей, оформленный в виде списка. В наборе можно установить только один переключатель.

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

<HTML>
<НЕАD><TITLE>Переключатели</Т1ТLЕ></НЕАD>
Какой язык Вы используете ?
<UL>
<TABLE>
<TR>
<TD>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="Русский" СНЕСКЕО>
Русский
</TD>
<TD>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="Английский">
Английский
</TD>
<TD>
<INPUT TYPE="RADIO" NAME="LANG" VALUE="Немецкий" >
Немецкий
</TD>
</TR>
</TABLE>
</UL>
</HTML>

Рис. 676. Переключатели расположены горизонтально с помощью таблицы с невидимыми рамками.

Флажки

лажки (checkbox) аналогичны переключателям за исключением внешнего вида и того, что в одном наборе можно установить/снять любое количество флажков. Задаются флажки так же, как переключатели, однако аргументом атрибута TYPE должен быть аргумент CHECKBOX:

<HTML>
<HEAD> <TITLE> Флажки</TITLE> </НЕАD>
<Н2> Kакие экзамены Вы будете сдавать ?
<UL>
<INPUT TYPE="CHECKBOX" NAME="TEST"
VALUE="Физика" CHECKED> Физика<ВR>
<INPUT TYPE="CHECKBOX" NAME="TEST"
VALUE="Английский язык"> Английский язык<ВR>
<INPUT ТYPE="CHECKBOX" NAME="TEST"
VALUE="Математика"> Математика
</UL>
</H2>
</HTML>

Если понадобится горизонтальное расположение флажков, то вы можете использовать тэг <TABLE>, как в предыдущем примере.

Рис. 677. Флажки или переключатели. В отличие от радиокнопок (селекторных переключателей) можно установить более одного флажка

Кнопки

На странице можно разместить обычную кнопку, нажатие (щелчок кнопкой мыши) на которой обрабатывается программой-сценарием. Например, вы можете создать кнопку с надписью Поиск. Что произойдет, если пользователь нажмет эту кнопку, — зависит от вашего сценария. Кнопка создается с помощью тэга <BUTTON>. Можно поместить на кнопку текст и картинку, а также позиционировать ее в нужное место с помощью атрибута STYLE1.

В следующем примере создается кнопка с картинкой из файла logotip.gif и надписью:

<HTML>
<BUTTON STYLE1="position:absolute; width:150;height:60">
<IMG SRC="logotip.gif" WIDTH="50" HEIGHT="50">
Нажми меня
</BUTTON>
</HTML>

Рис. 678. С помощью тэга <BUTTON> можно создать кнопку, поставить на нее картинку и текст

Можно создать графическую кнопку, используя уже знакомый тэг <INPUT>, но с атрибутами TYPE="IMAGE" и SRC="имя_файла", а также NAME и VALUE:

<INPUT TYPE="IMAGE" SRC="имя файла"
NАМЕ="имя кнопки" VALUE=значение>

В качестве картинки можно подобрать изображение кнопки или любое другое изображение. Например, следующая строка кода выводит значок (icon) «стрелка» из файла arw10ne.ico:

<INPUT TYPE=" IMAGE" SRC="arwl One . ico" NAME = "N" VALUE=jhjhghghuyt>

Рис. 679. C помощью тэга <INPUT> можно создать графическую кнопку, например, в виде пиктограммы стрелки

Кнопку также можно создать с помощью тэга <INPUT TYPE="BUTTON">.
Кроме рассмотренных выше, можно задать специальные кнопки для отправки данных серверному приложению (CGI), очистки полей ввода (и восстановления значений, принятых по умолчанию). В документ HTML можно включить несколько полей ввода данных, переключателей и флажков. Если они входят в один смысловой блок, то эти элементы следует заключить в тэг формы < FORM>. В этот же тэг можно включить и специальные кнопки.

Если мы хотим отправлять данные серверному приложению, то тэг <FORM> должен содержать атрибут, указывающий способ передачи, и атрибут, содержащий адрес серверного приложения. Например:

<FORM METHOD="POST" ACTION="/bin/serv">

Внутри этого тэга можно определить кнопку отправки. Например:

<INPUT TYPE=SUBMIT VALUE ="Отправить">

Здесь аргументом атрибута VALUE является текст надписи на кнопке. Кнопка очистки задается так:

<INPUT TYPE=SUBMIT RESET="Очистить">

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

Сценарии (скрипты)

тобы Web-страница была интерактивной (могла взаимодействовать с пользователем) и динамичной, необходимо использовать так называемые скрипты или, иначе говоря, сценарии. Сценарий (script, скрипт) — программа, написанная на специальном языке программирования, которая встраивается в HTML-документ.

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

Стандартным языком для скриптов является JavaScript. Однако разные браузеры воспринимают различные версии этого языка и, более того, даже отличающиеся его редакции. Редакция JavaScript от фирмы Microsoft, наиболее близкая к стандарту, называется JScript. Браузер Microsoft Internet Explorer поддерживает не только JScript, но и еще один язык скриптов — Visual Basic Script (VBScript). Другие браузеры VBScript не воспринимают. Так уж сложилось, что сейчас около 80% посетителей Web используют браузер Microsoft Internet Explorer. Однако остальных тоже миллионы. Ближайший конкурент браузера от Microsoft — Netscape Navigator. Будучи хорошим продуктом, последние годы он только отступал. Есть еще один популярный браузер — Opera. В полемике о том, какой браузер лучше, на наш взгляд, следует руководствоваться критерием близости к стандартам поддерживаемых скриптовых языков, а не удобствами использования браузера и его внешним видом. Netscape, можно так сказать, поддерживает некий диалект JavaScript. To, что ему не под силу, легко воспринимает Internet Explorer. А на каком диалекте «говорит» браузер Opera? Чтобы ответить на этот вопрос, "требуется провести особое исследование. Обсуждения в Интернете на тему, какой браузер лучше, пока затрагивают лишь вопросы удобства и скорости.

Чтобы эффективно использовать скриптовый язык для создания сценариев (скриптов), необходимо знать так называемую объектную модель HTML-документа. Действительно, прежде чем что-то делать, нужно понимать, к каким свойствам каких объектов наши действия будут приложены. Дело в том, что HTML-документ при загрузке в браузер транслируется в некоторое внутреннее представление в соответствии с объектной моделью. Каждый элемент HTML-документа (заголовок, картинка, кнопка и т. п.) представляется соответствующим объектом. Специфика объектов определяется их свойствами. С другой стороны, браузер, будучи программой, тоже имеет свою объектную модель. Если бы объектные модели HTML-документа и браузера были нам известны и, кроме того, имелись бы средства для манипулирования объектами, то тогда мы могли бы управлять как содержанием документа, так и браузером. С появлением HTML 4.0 и интерпретирующих его браузеров (например, Internet Explorer версии 4.0 и старше) появилась и такая возможность. Объектная модель была опубликована, т. е. были описаны объекты, их свойства и соответствие элементам HTML-документа. Средством манипулирования объектами стал язык JavaScript. Для браузера Internet Explorer, кроме JScript, можно использовать язык VBScript. Это — объектно-ориентированные языки программирования. На них можно писать программы, называемые сценариями (скриптами), и вставлять сценарии в HTML-код, обрамляя тэгами <SCRIPT> и </SCRIPT>.

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

Объекты имеют фиксированные названия. Например, окну браузера соответствует объект window, a HTML-документу, загруженному в браузер, — объект document. Это основные объекты, но есть и другие. Объекты характеризуются тремя типами свойств:

собственно свойства; методы; другие объекты.

Собственно свойства, называемые обычно просто свойствами, представляют собой переменные с фиксированными именами. Свойства имеют значения. Есть свойства, значения которых можно только читать (нельзя изменять). Такие свойства подобны измерительным приборам и датчикам. Значения других свойств можно изменять как обычные переменные. Эти свойства аналогичны элементам управления. Для доступа к свойству объекта используется синтаксис:

объект.свойство;

Например, значением свойства document.location является URL-адрес HTML-документа.
Методы— это внутренние функции объектов. Они имеют фиксированные имена, могут принимать параметры и возвращать значения. Вот синтаксис применения метода:

объект.метод(список_параметров);

Например, метод window, open ("www. admiral. ru/~dunaev") открывает новое окно браузера и загружает в него страницу, расположенную по указанному адресу. Заметим, что некоторые методы не имеют параметров. С точки зрения пользователя методы отличаются от собственно свойств только синтаксисом обращения. Такого понимания вполне достаточно, чтобы их использовать. Более глубокие различия понятны только программистам. Дело в том, что программы (объекты — это тоже программы) могут управляться как данными (т. е. значениями переменных), так и процедурами и функциями (т. е. методами).

Объект может иметь в качестве свойства другой объект. В этом случае говорят, что первый объект содержит (включает в себя) второй объект. При этом первый объект называют также родительским (parent), а второй — дочерним, потомком или подобъектом (child). Если мы хотим обратиться к свойству или методу объекта объект2, являющегося подобъектом объекта объект!, то пишем так:

объект1.объект2.свойство;
объект2.объект2.метод () ;

Например, объект document является подобъектом объекта window. Если мы хотим что-то записать в документ, загруженный в текущее окно, то можем воспользоваться для этого методом write(). Вот пример:

window.document.write("Привет!")

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

Все перечисленные понятия лежат в основе так называемых объектно-ориентированных программ. В настоящее время к ним относится основная масса программных продуктов. И в первую очередь таковыми являются современные операционные системы, например Windows.

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

Конечно, в действительности не все так просто, но хотелось обратить внимание на то, что программирование под Windows — программирование, управляемое событиями.
Можно связать HTML-код с происходящими событиями и использовать эту связь для организации взаимодействия пользователя со страницей. Например, один лишь щелчок порождает сразу несколько событий: onmousedown (нажата кнопка мыши), onmouseup (отпущена кнопка мыши) и onclick (щелчок кнопкой мыши, т. е. кратковременное нажатие и освобождение кнопки).

Если пользователь нажмет кнопку мыши во время нахождения указателя над окном браузера, то Windows пошлет браузеру сообщение, содержащее информацию о том, какая кнопка мыши нажата, какие при этом клавиши клавиатуры удерживаются, а также координаты указателя мыши. Браузер решает, обрабатывать ли ему это событие. Если пользователь щелкнул на одной из кнопок панели инструментов, то браузер обработает это событие сам. Если во время щелчка указатель находился внутри собственно страницы, то браузер пропустит это событие к странице через свою объектную модель. В HTML-программе страницы может находиться сценарий, который обрабатывает это событие. Имеется и обратный путь. Если мы решаем ответить на событие, то инструкции идут от сценария к браузеру через ту же объектную модель. Браузер теперь решает, что делать со страницей, и сообщает об этом системе. В динамическом HTML мы можем указать, на какие события реагировать странице и что делать браузеру.

Объектная модель

Теперь рассмотрим объектную модель подробнее. Сразу предупредим, что это рассмотрение не исчерпывающее. Какуже отмечалось, каждый элемент страницы (HTML-документа) предстает в виде объекта со своими свойствами и методами. Объекты, соответствующие элементам страницы, упорядочиваются в некоторую иерархическую структуру так, что одни из объектов являются подобъектами других объектов.

Рис. 680. Объектная модель

Самым главным является объект window (окно), который находится вверху иерархии. Но в то же время основное в модели — объект document, т. к. большая часть страницы состоит из его частей. По существу, объект window — просто контейнер (объект, содержащий другой объект) для объекта document. Кроме объектов, в модель входят коллекции — структуры, аналогичные массивам. В таком массиве каждый элемент принадлежит структуре и связан с соседними элементами. Иначе говоря, коллекция — это способ держать объекты вместе для упрощения доступа к ним с помощью программного кода. Считайте, что коллекция — просто промежуточный (технологический) уровень в иерархии.

Например, объект document может содержать коллекцию images картинок (объектов frame). Мы можем обратиться к картинке либо по ее имени, либо по порядковому номеру:

document . images ( "my_labelture" )
window .images (0)

В коллекциях объектной модели первый элемент имеет нулевой индекс (порядковый номер). Расположение (индекс) элемента в коллекции зависит от его места в исходном тексте HTML-документа.

Рассмотрим пример простого HTML-документа:

<HTML>
<НЕАD> <TITLE>Пример</ТITLE> </НЕАD>
<BODY>
<CENTER>
< ! Рисунок 1 >
<IMG ЗНС="рис1 .gif " NAME="imagel ">
</CENTER>
<! Форма, содержащая три элемента > <FORM NAME="myForm">
Имя: <INPUT TYPE="TEXT" NAME="xName" VALUE=""XBR>
E-mail: <INPUT TYPE="TEXT" NAME="email" VALUE=" "><BR><BR>
<INPUT TYPE="BUTTON" NAME="raybutton" VALUE="Нажми меня">
</FORM>
<! Рисунок 2 >
<IMG SRC="pnc2 .gif" NAME="image2 " WIDTH=200>
< ! Ссылка >
<A HREF="www.admiral.ru/~dunaev">Mofl
домашняя страница</А>
</BODY>
</HTML>

На рисунке, изображающем описанную выше страницу в окне браузера, сделаны поясняющие надписи, чтобы было понятно, какие элементы страницы какими объектами представляются.

Рис. 681. Объекты, соответствующие элементам Web-страницы (HTML-документа)

На этой странице расположены два рисунка, одна ссылка и форма, содержащая два поля ввода текста и кнопку. Окно браузера — это объект window. Он также содержит элементы, такие как строка состояния. Внутри окна браузера размещен HTML-документ. Этот документ представлен объектом document — самый важный объект в объектной модели. Все элементы HTML-документа являются свойствами объекта document и одновременно объектами с точки зрения языка сценариев. Для удобства некоторые объекты объединены в группы, называемые коллекциями. Например, коллекция всех картинок в HTML-документе называется images, а коллекция всех ссылок — links. Чтобы обратиться к объекту из коллекции, нужно указать его номер в этой коллекции. На следующем рисунке приведена иерархическая схема объектного представления HTML-документа из рассматриваемого примера:

Рис. 682. Иерархическая схема объектного представления HTML-документа

Первый объект в этой структуре — document. Первый элемент HTML-документа — картинка с именем image 1. Она представляется в виде объекта images (0) (напомним, что нумерация элементов коллекции начинается с нуля, поэтому первый элемент коллекции имеет индекс 0). В примере первой картинкой является графическое изображение из файла рис 1.gif. Чтобы получить доступ к этому элементу страницы, требуется записать:

document.images (0)

Если нужна кнопка, то пишем:

document.forms(0).elements(2)

Для доступа к первому полю ввода используется запись:

document.forms(0).elements(0)

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

document.forms(0).elements(0).value

HTML-документе были предусмотрительно определены имена элементов с помощью атрибута NAME. Хотя задание имен не является обязательным, указывать имена все же очень полезно, поскольку появляется возможность обращаться к элементам по именам. Например, вместо записи

document.forms(0).elements(0).value

можно было бы записать

document.myForm.xName.value

Это удобно, особенно когда на странице расположено много элементов, и трудно отслеживать, какой индекс имеет тот или иной элемент. Еще раз обратите внимание на то, что регистр букв в имени элемента имеет важное значение. Так, myForm и myform — не одно и то же.

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

Объект window

Объект window имеет свойства, методы, события, а также дочерние объекты. Приведем их полные перечни и рассмотрим, с разной степенью подробности, только наиболее важные с практической точки зрения.

Свойства объекта window

parent — возвращает родительское для текущего окно; self — возвращает ссылку на текущее окно; top — возвращает ссылку на главное окно; name — название окна; opener — ссылка на исходное окно, в котором было создано данное окно; О dosed — сообщает, если окно закрыто; status — текст, показываемый в строке состояния браузера; def aultstatus — текст строки состояния браузера по умолчанию; returnValue — позволяет определить возвращенную переменную для события или диалогового окна; client — ссылка, которая возвращает объект навигатора браузеру; document — ссылка «только для чтения» на объект окна document; event — ссылка «только для чтения» на глобальный объект event; history — ссылка «только для чтения» на объект окна history; location — ссылка «только для чтения» на объект окна location; navigator — ссылка «только для чтения» на объект окна navigator; screen — ссылка «только для чтения» на глобальный объект screen.

«Только для чтения» означает, что данное свойство изменять нельзя.
Свойство parent позволяет обратиться к объекту, находящемуся в иерархии на одну ступень выше, например к окну, содержащему коллекцию фреймов, в которой находится наш фрейм. Для перемещения на две ступени вверх нужно писать parent.parent и т. д.:

parent.window.frames(0)
parent.parent.window.frames(0)

Чтобы обратиться к самому главному окну, т. е. к окну браузера, следует использовать свойство top. Однако top не может обращаться к главному фрейму вашей системы разбиения на фреймы.
Свойство name соответствует имени фрейма, которое мы задаем и тэге <FRAMESET>.
Свойство status полезно использовать для вывода сообщений во время работы сценария, например, при отладке:

window.status="Ceйчac работает сценарий"

Методы объекта window

open — открывает новое окно браузера; dose — закрывает текущее окно браузера; showHelp — показывает окно подсказки как диалоговое; showModalDialog — показывает новое окно как диалоговое; alert — показывает окно предупреждения с сообщением и кнопкой ОК; prompt — показывает окно приглашения с сообщением и текстовым полем; confirm — показывает окно подтверждения с сообщением и кнопками ОК и Cancel (Отмена); navigate — загружает другую страницу с указанным адресом; blur — убирает фокус с текущей страницы; соответствующее событие — onblur; focus — устанавливает страницу в фокус; соответствующее событие - onf ocus; scroll — разворачивает окно на заданные ширину и высоту; setinterval — указывает процедуре выполняться периодически через заданное количество миллисекунд; setTimeout — запускает программу через заданное количество миллисекунд
после загрузки страницы; clear Interval — обнуляет таймер, заданный методом setinterval; clearTimeout — обнуляет таймер, заданный методом setTimeout; execScript — выполняет код сценария; по умолчанию JScript.

Методы объекта window предоставляют возможности управления окнами и выполнения в них различных задач. Например, чтобы создать новое окно браузера, можно использовать метод open, а чтобы его закрыть — close. Следующий фрагмент программы создает новое окно браузера и показывает в нем документ new.htm (в общем случае можно указать URL-адрес документа):

window. open ("new .htm")

Ниже приводится текст HTML-программы, которая просит пользователя ввести адрес страницы и, если введен непустой адрес, пытается загрузить ее в браузер.

<SCRIPT>
window . alert ( "Вы хотите перейти к другой странице!");
, Adress=window .prompt ("Введите адрес страницы",""); if (Adress!= null)
{
window . status = "HoBHft адрес: "i-Adress;
window. navigate (Adress) ;
}
</SCRIPT>

Метод scroll позволяет развернуть страницу в заданных пределах. Например, чтобы задать ширину в 300 и высоту в 200 пикселов, надо написать:

window.scroll(300,200)

В ряде случаев может понадобиться, чтобы какая-то процедура была выполнена с некоторой временной задержкой. С этой целью можно применить метод setTimeout (), создающий таймер. Например, следующая строка программы создает таймер, который будет работать 10 с (10 000 мс) и затем запустит некоторую функцию Myfunc ():

TimeID=window.setTimeout("Myfunc()",10000)

Если потребуется перезапустить таймер, чтобы повторить процесс, то можно применить метод setlnterval. Он работает так же, как и setTimeout, но с той разницей, что вызывается периодически через заданное количество миллисекунд. Например, функция Myfunc() будет периодически вызываться через каждые 5 с:

TimeID=window.setlnterval("Myfunс()",5000)

Метод setlnterval уже был использован в примере создания движущейся картинки.

События объекта window

onblur — выход окна из фокуса; onfocus — окно становится активным; onhelp — нажатие пользователем клавиш <F1>; onresize — изменение пользователем размеров окна; onscroli — прокрутка окна пользователем; onerror — ошибка при передаче; onbeforeunload — перед выгрузкой страницы, что позволяет сохранить данные; onload — страница полностью загружена; onunioad — непосредственно перед выгрузкой страницы.

Среди перечисленных выше событий три происходят в результате действий пользователя. Если открыто несколько окон браузера, пользователь может переключаться между ними, переводя фокус с одного окна на другое. Эти действия инициируют события onblur и onfocus. Заметим, что эти же события можно вызвать программным способом, используя методы blur и focus. Если происходит ошибка при загрузке страницы или ее элемента, то инициируется событие onerror. Мы можем использовать это событие в программе, чтобы, например, попытаться еще раз загрузить страницу или как-то изменить дальнейшие действия. Вот пример:

<SCRIPT>
function window.onerror ()
{
alert("Произошла ошибка! Попробуйте еще раз")
}
</SCRIPT>

Событие onload происходит, когда в окно загружается страница; событие onbeforunload — перед тем как страница покинетокно; событие onunloaci — когда страница выгружена или перед загрузкой новой страницы, или перед закрытием браузера. Например:

<SCRIPT>
function window.onunload ()
{
alert("Страница выгружается!")
}
</SCRIPT

Объект window имеет несколько дочерних объектов, которые доступны с его помощью: document, history, navigator, location, event и screen.

Объект document

Объект document является центральным в иерархической объектной модели и представляет всю информацию о документе HTML с помощью коллекций и свойств. Он также предоставляет множество методов и событий для работы с документами. Поскольку мы уже рассматривали некоторые основные приемы обращения с этим объектом, то здесь ограничимся лишь справочными сведениями.

Таблица. Свойства объекта document

Тип превращения	Номер фильтра
Стягивающийся прямоугольник	0
Расширяющийся прямоугольник	1
Стягивающийся круг	2
Расширяющийся круг	3
Стирание вверх	4
Стирание вниз	5
Стирание вправо	6
Стирание влево	7
Вертикальные жалюзи	8
Горизонтальные жалюзи	9
Сужающиеся клетки	10
Закрывающаяся шахматная доска	11
Случайный наплыв	12
Вертикальное деление внутрь	13
Вертикальное деление наружу	14
Горизонтальное деление внутрь	15
Горизонтальное деление наружу	16
Стирание влево вниз	17
Стирание влево вверх	18
Стирание вправо вниз	19
Стирание вправо вверх	20
Случайные горизонтальные полосы	21
Случайные вертикальные полосы	22
Случайный выбор номера (из диапазона 0-22)	23

Коллекции объекта document

аll — коллекция всех тэгов и элементов в основной части документа; anchors — коллекция всех «якорей» (закладок) в документе; applets — коллекция всех объектов в документе, включая встроенные элементы управления, графические элементы, апплеты, внедренные и другие объекты; embeds — коллекция всех внедренных объектов в документе; forms — коллекция всех форм на странице; frames — коллекция всех фреймов, определенных в тэге <FRAMESET>; images — коллекция всех графических элементов (картинок) на странице; links — коллекция всех ссылок и блоков <AREA> на странице; plugins — еще одно название для коллекции внедренных объектов документа; scripts — коллекция всех разделов <SCRIPT> на странице; stylesheets — коллекция всех конкретных свойств стиля, определенных в документе.

Методы объекта document

clear — очищает выделенный участок; close — закрывает текущее окно браузера; createEiement — создает экземпляр элемента для выделенного тэга; elementFromPoint — возвращает элемент с заданными координатами; execcommand — выполняет команду (операцию) над выделением или областью; open — открывает документ как поток для обработки результатов применения методов write и writeln; queryCommandEnabled — сообщает, доступна ли данная команда; queryCommandindeterm — сообщает, если данная команда имеет неопределенный статус; queryCommandstate — возвращает текущее состояние команды; querycommandsupported — сообщает, поддерживается ли данная команда; queryCommandText — возвращает строку, с которой работает команда; queryCommandValue — возвращает значение команды, определенное для документа или объекта TextRange; write —записывает текст и код HTML в документ, находящийся в указанном окне; writeln — записываеттекст и код HTML, заканчивающийся возвратом каретки.

События объекта document

onafterupdate — возникает при окончании передачи данных; onbef oreupdate — возникает перед выгрузкой страницы; onclick — происходит, когда кнопка мыши щелкнула на документе; ondbidick— происходит, когда пользователь делает двойной щелчок на
документе; ondragstart — происходит, когда пользователь начинает перетаскивание; onerror — ошибка при передаче; onhelp — происходит при нажатии пользователем клавиши <F1>; onkeydown — возникает при нажатии клавиши; onkeypress — возникает, когда пользователь нажал клавишу и удерживает ее в нажатом состоянии onkeyup — возникает, когда пользователь отпускает клавишу; onload — возникает при полной загрузке элемента; onmousedown — происходит, когда пользователь нажимает кнопку мыши; omousemove — происходит, когда пользователь перемещает мышь; onmouseout — происходит, когда указатель мыши выходит с элемента; onmouseover — происходит, когда указатель мыши впервые входит на элемент; onmouseup — происходит, когда пользователь отпускает кнопку мыши; onreadystatechange — возникает при изменении свойства readystate; onseiectstart — происходит, когда пользователь в первый раз запускает выделенную часть документа.

Объект history

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

Свойство объекта history

length — количество элементов в списке History браузера.

Методы объекта history

back — загружает предыдущую страницу из списка; forward — загружает следующую страницу из списка; go (n) — загружает страницу с номером n из списка.

В следующем примере сначала загружается первая страница, а затем пятая страница, причем предварительно проверяется, существует ли она.

window.history.до(1) ;
if (window.history.length>4 )
{window.history.go(5) };

Объект navigator

Объект navigator содержит информацию о производителе браузера, его версии и возможностях.

Свойства объекта navigator

appCodeName — название кода браузера; appName — название браузера; appVerston — версия браузера; cookieEnabied — определяет возможность создания в браузере элементов cookies на стороне клиента; userAcjent — название браузера, посылаемое с помощью HTTP-протокола.

Коллекции объекта navigator

mimeTypes — коллекция всехтипов документов и файлов, поддерживаемых браузером; piugins — название коллекции всех внедряемых объектов на странице;

Методы объекта navigator

taintEnabled — возвращает значение False, включен для совместимости с Netscape Navigator; javaEnabied — сообщает, возможен ли в данном браузере запуск сценария на языке JavaScript.

Объект location

Объект location содержит информацию об URL-адресе текущей страницы, а также методы, позволяющие обновлять страницы.

Свойства объекта location

href — URL-адрес в виде строки; hash — строка, следующая в URL за символом #; host — часть URL ("хост:порт"); hostname — часть URL «хост»; pathname — путь к объекту или файлу, находящийся после третьего слэша; port — номер порта URL; protocol — начальная часть, определяющая протокол; search — строка запроса или данные URL после знака ?.

Например, если вы загрузили страницу с адресом http://www.cityline.spb.ru, то значением location.href будет эта строка.
Мы можем изменять показываемую страницу, присваивая свойству href новое значение. Например:

window.location.href="http://www.rambler.ru"

Методы объекта location

assign — загружает другую страницу; этот метод эквивалентен изменению свойства window.location.href; reload — обновляет текущую страницу; replace — загружает страницу, заменяя URL-адрес текущей.

Объект event

Объект event позволяет получить информацию о каком-либо событии, происходящем в браузере.

Свойства объекта event

aitKey — возвращает состояние клавиши <Alt>, когда происходит событие; button — кнопка мыши, вызывающая событие; canceiBubble — устанавливается для запрета прохождения заданного события вверх по объектной иерархии; clientx — возвращает горизонтальную координату элемента, исключая обрамление, отступы, полосы прокрутки и т. д.; clientY — возвращает вертикальную координату элемента, исключая обрамление, отступы, полосы прокрутки и т. д.; ctrlKey — возвращает состояние клавиши <Ctrl> при появлении события; fromElement — возвращает элемент, с которого ушел указатель мыши, для событий onmouseover и onmouseout; keyCode — код ASCII нажатой клавиши; позволяет изменить значение, передаваемое объекту; offsetx — возвращает горизонтальную координату указателя мыши в пикселах относительно содержащего его элемента при возникновении события; offsetY — возвращает вертикальную координату указателя мыши в пикселах относительно содержащего его элемента при возникновении события; reason — указывает, что перемещение данных прошло успешно или из-за чего оно прекратилось; returnvalue — определяет возвращаемое значение для события; screenx — возвращает горизонтальную координату указателя мыши относительно экрана, когда происходит событие; screen Y —возвращает вертикальную координату указателя мыши относительно экрана, когда происходит событие; shiftKey — определяет состояние клавиши <Shift> при возникновении события; srcEiement — возвращает элемент, с которого началось прохождение события; srcFiiter — возвращает фильтр, создавший событие onfiiterchange; toElement — возвращает элемент, на который «наезжает» курсор мыши, при появлении события omouseover или onmouseout; type — возвращает название события как строку, без приставки on; х — возвращает горизонтальную координату указателя мыши относительно либо к позиционированному родительскому элементу, либо к окну; у — возвращает вертикальную координату указателя мыши относительно либо к позиционированному родительскому элементу, либо к окну.

Свойства объекта event устанавливаются в момент прохождения события и большинство из них доступны только для чтения (их значения нельзя изменить). Однако есть два изменяемых свойства: keyCode и return Value.

Объект screen

Объект screen содержит информацию о возможностях экрана пользователя и может применяться, например, при определении размеров создаваемых окон, а также разрешения, с которым нужно передавать графику (нет смысла загружать 32-битное изображение, если монитор и видеокарта пользователя поддерживают только 256 цветов).

Свойства объекта screen

width — возвращает разрешение по ширине экрана пользователя (в пикселах); height — возвращает разрешение по высоте экрана пользователя (в пикселах); bufferDepth — задает количество бит на пиксел браузера; colorDepth — возвращает информацию, позволяющую решить, как использовать цвета на экране; updateinterval — возвращает или устанавливает интервал времени смены экрана пользователя.

Объект TextRange

Объект TextRang (текстовая область) отображает разделы потока текста, формирующего документ HTML. Может быть использован для управления текстом внутри страницы.

Свойства объекта TextRange

htmlText — возвращает содержимое TextRange как текст и код HTML; text — простой текст, находящийся внутри элемента TextRange или тэга <OPTION>.

Методы объекта TextRange

collapse — стягивает текстовую область в точку в начале или конце текущей области; compareEndPoints — сравнивает две текстовые области и возвращает значение, показывающее результат; duplicate — возвращает копию области TextRange; execCommand — выполняет команду (операцию) над выделением или областью; expand — расширяет текстовую область, добавляя туда новый знак, слово, предложение, или указывает, какие неполные блоки полностью содержатся; findText — определяет текстовую область, содержащую только искомый текст; getBookmark — возвращает значение, позволяющее в дальнейшем идентифицировать данную позицию в документе; inRange — определяет, находится ли заданная текстовая область внутри текущей; isEqual — определяет, равны ли заданная и текущая текстовые области; move —изменяет начальную и конечную точки текстовой области для включения в нее различного текста; moveEnd — заставляет текстовую область сжаться или расшириться до заданной конечной точки; movestart — заставляет текстовую область сжаться или расшириться до заданной начальной точки; moveToBookmark — передвигает границы текстовой области для включения другой, определенной ранее с помощью getBookmark; moveToElementText — передвигает границы текстовой области для включения текста в заданном элементе; moveToPoint — передвигает границы текстовой области и сжимает ее вокруг выбранной точки; parentElement — возвращает родительский элемент для всего, что входит в текстовую область; pasteHTML — вставляет текст и/или код HTML в текущую текстовую область; queryCommandEnabled — сообщает, доступна ли данная команда; queryCommandindeterm — сообщает, если данная команда имеет неопределенный статус; queryCommandState — возвращает текущее состояние команды; queryCommandSupported — сообщает, поддерживается ли данная команда; queryCommandText — возвращает строку, с которой работает команда; queryCommandVaiue — возвращает значение команды, определенное для документа или объекта TextRange; scroiiintoview — переносит текущую текстовую область в видимую часть окна браузера; select — делает активный подсвеченный участок выделения на странице равным текущей текстовой области; setEndPoint — переносит начальную или конечную точку текущей текстовой области в начало или конец заданной области.

Как писать скрипты

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

Как уже неоднократно отмечалось, сценарий вставляется в HTML-код с помощью тэга <SCRIPT>, который обычно размещается внутри тэга заголовка <HEAD>. Это делается для того, чтобы код сценария загрузился прежде, чем страница будет выведена на экран. Сценарий можно разместить и в конце HTML-документа, чтобы элементы документа загрузились прежде, чем к ним будут применены операции сценария. Для указания языка сценария служит атрибут LANGUAGE (язык). Если сценарий пишется на JavaScript, то атрибут LANGUAGE можно не указывать, поскольку JavaScript считается стандартным языком (по умолчанию). В браузере Internet Explorer версий с 4.0 по 6.0 можно также применять сценарии, написанные на VBScript. Если вы пишете на VBScript, то в качестве аргумента атрибута LANGUAGE следует задавать либо VBScript, либо VBS.
Вставка сценария в HTML-код осуществляется обычно по следующей схеме:

<HTML>
<HEAD>
...
<!--
<SCRIPT LANGUAGE='название_языка' >
... (здесь располагается текст сценария)
</SCRIPT>
//-->
</HEAD>
...
<BODY>
...
</BODY>
</HTML>

Здесь использован типовой вариант, при котором сценарий вставляется внутрь тэга заголовка <HEAD>, хотя он может находиться влюбом месте HTML-кода. Иногда даже требуется, чтобы скрипт был загружен после загрузки некоторых элементов страницы,
Атрибут LANGUAGE тэга <SCRIPT> может принимать аргументы JavaScript, JScript, VBScript и VBS. Если атрибут не указан, то подразумевается JavaScript.
Символы < ! — и //--> образуют тэг комментария. Рекомендуется их использовать на тот случай, когда браузер пользователя не сможет интерпретировать сценарий. Например, браузеры Netscape не воспринимают скрипты на VBScript. Обратите внимание, что тэг комментария в данном случае отличается от обычного тэга комментария < ! >, используемого вне сценария для того, чтобы вставить поясняющие тексты, не отображаемые на экране.

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

<SCRIPT SRC="адрес_файла_со_скриптом"> </SCRIPT>

Например:

<SCRIPT SRC="my_script . js"> </SCRIPT>

Для определенности в тэг <SCRIPT> не помешает вставить атрибут LANGUAGE= ' JScript'.
Привязка сценариев к элементам страницы
Внутри тэга <SCRIPT> размещается собственно программа сценария. Эта программа может делать все, что угодно ее автору. Однако обычно она содержит описания функций, которые должны вызываться при возникновении таких событий, как щелчок кнопкой мыши, нажатие клавиши на клавиатуре, загрузка страницы и др. Такие функции называются обработчиками событий. Чтобы вызов функций сценария произошел при возникновении того или иного события, нужно сделать привязку события и соответствующей ему функции к элементу страницы.
Связь между событием и функцией осуществляется в формате:

событие =" функция"

Например, если мы хотим связать событие «щелчок кнопкой мыши» с определенной нами функцией MyfuncQ, то должны использовать запись вида:

onclick="Myfunc ()"

Если вызов этой функции должен произойти при загрузке страницы в браузер, то следует записать:

onload=IMyfunc ()I

Мы рассмотрели связь типа «событие-функция». Однако одно и то же событие может восприниматься различными элементами страницы. Например, на щелчок кнопкой мыши могут отреагировать и кнопка, и картинка, и заголовок. Чтобы образовать связь «событие-функция—элемент», следует вставить запись типа событие='функция' в тэг элемента страницы подобно вставке атрибута. Например, если мы хотим, чтобы функция Myfunc() вызывалась при щелчке на тексте, находящемся внутри тэга <Н2>, то надо написать:

<Н2 onclick='Myfunc()'> Некоторый текст </Н2>

Связь между событием и функцией может быть записана в большинстве тэгов, например в <BODY>, <IMG>, <DIV>, <INPUT> и др.

Возможен и другой, нестандартный способ связи «событие—функция-элемент». Он заключается в том, что в тэге элемента страницы указывается атрибут ID (идентификатор, выполняющий роль имени NAME этого элемента, предназначенный для доступа к нему из программы). Затем в сценарии определяется функция, имя которой формируется по правилу:

идентификатор_элемента.событие()

Например, если мы хотим, чтобы при щелчке мышью на тексте, заключенном внутри тэга <Н2>, выполнялась некоторая функция, то мы должны написать примерно следующее:

....
<Н2 ID=My> Некоторый текст <Н2>
....
<SCRIPT>
....
function My.onclick()
....
</SCRIPT>
....

Обратите внимание на связь между значением атрибута ID в тэге <Н2> элемента страницы и именем функции, определенной внутри тэга сценария <SCRIPT>: значение ID и название события указываются в имени функции. В JScript эти составляющие имени пишутся через точку, а в VBScript — через символ подчеркивания. Приведенный выше фрагмент на языке VBScript выглядит так:

....
<Н2 ID=Му>Некоторый текст<Н2>
....
<SCRIPT LANGUAGE="VBScript">
....
Sub My_onclick()
....
</SCRIPT>

Подробно связи событий с функциями, определенными в сценарии, а также привязка этих связей к элементам страницы рассмотрены ниже на конкретных примерах. А сейчас дадим общие рекомендации по созданию обработчиков событий.

Обработчики событий

Обработчики событий следует оформлять в виде функций или процедур. В JScript используются только функции, а в VBScript — в основном, процедуры. Функция от процедуры отличается только тем, что возвращает некоторое значение. Следует различать описание (определение) функции и ее вызов.
Описание функции в JScript имеет вид:

function имя_функции (список_параметров)
{
... // код (тело) функции
};

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

return возвращаемый_результат

Если команда return не указана, то возвращается значение последнего вычисленного выражения. Следующий пример дает описание функции для вычисления площади прямоугольника:

function S_rectangle (a,b)
{
S=a*b;
return S
};

Для вычисления значения функции используется вызов:

имя_функции (список_значений_параметров)

Например, для вычисления площади прямоугольника со сторонами 5 и 20 следует записать выражение:

S = S_rectangle(5,20)

Здесь значение, возвращаемое функцией S_rectangle, присваивается переменной S. В вызове функций вместо конкретных значений можно подставлять переменные, функции и выражения. Вот пример:

х = 5;
S = S_rectangle(x,4+16)

Поскольку функция возвращает значение, ее вызов может участвовать в выражениях. Например, для вычисления площади прямоугольного треугольника с катетами а и b можно записать следующий код:

а = 5;
b = 20;
S_tr = 0.5*S_rectangle(a,b)

Впрочем, мы могли бы определить специальную функцию, вычисляющую площадь прямоугольного треугольника по его катетам:

function S_tr(a,b)
{
return 0.5*S rectangle(a,b)

Переменные

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

<SCRIPT LANGUAGE 'JScript'>
// Вычисление площади прямоугольного треугольника с помощью
// функции для площади прямоугольника
а = 5;
b = 20;
S_tr = 0.5*S_rectangle (a,b) // Вычисление площади
// прямоугольного треугольника.
function S_rectangle (a,b) // Описание функции
// вычисления площади прямоугольника.
{
S=a*b;
return S
}
</SCRIPT>

Здесь все переменные доступны внутри функции S_rectangle () , но переменная S недоступна вне ее. Чтобы сделать переменную S доступной в любом месте скрипта, нужно просто создать ее вне функции. Например, можно записать выражение S = 0; в том месте скрипта, где определены переменные а и Ь.

Примеры скриптов

Здесь мы приведем несколько простых скриптов, которое в том или ином виде часто применяются в Web-страницах. Все они создают некоторые визуальные эффекты.
Другие примеры с пояснениями можно найти на сайте автора по адресу www.admiral.ru/~dunaev.

Смена картинки

В данном примере наведение указателя мыши на картинку приводит к изменению изображения. Когда указатель покидает картинку, изображение приобретает первоначальный вид.

Картинка на странице определяется, как известно, тэгом <IMG>. Атрибут SRC задает файл с изображением. Нам необходимо изменить значение атрибута SRC при наступлении события, связанного с указателем мыши. Когда указатель мыши попадает в область, занятую каким-либо объектом, возникает событие onMouseOver, а когда он покидает эту область, наступает событие onMouseOut.

Пусть первоначально на странице находится картинка из файла labeltl.gif, а заменять ее мы хотим картинкой из файла labelt2.gif. Тогда соответствующий HTML-код будет иметь следующий вид:

<HTML>
<IMG id="myimage" SRC="labeltl.gif"
onMouseOver="document.all('myimage').src='labelt2.gif" onMouseOut="document.all('myimage').src='labeltll.gif'">
</HTML>

В этом примере мы обращаемся к объекту через коллекцию all() всех элементов HTML-документа, указывая идентификатор id нужного элемента. Поскольку выражения, которые следует выполнить при наступлении событий, просты, мы не стали заводить для скрипта отдельный раздел, ограниченный тэгами <SCRIPT> и </SCRIPT>.

Теперь рассмотрим пример, в котором изображение изменяется при щелчке кнопкой мыши на картинке. Понятно, что картинка должна реагировать на событие onСlick. В отличие от предыдущего примера нам потребуется счетчик щелчков, а лучше сказать — триггер, который при щелчке принимает одно из двух значений (0 или I). Это необходимо, чтобы знать, какое именно изображение показывать. Если значение триггера равно 0, то при щелчке оно изменяется на I и показывается картинка labelt2.gif. Если значение триггера равно I, то при щелчке оно изменяется на 0, и показывается картинка labeltl.gif.

<HTML> <SCRIPT>
var img_click=0; // триггер
function changeimg ()
{
if (img_click)
{document.all('myimge').src='labeltl.gif1; img_clickl=0}; else
{document.all ('myimge') .src='labelt2.gif; img_clickl=l};
}
</SCRIPT>
<IMG id="myimage" SRC="labeltl. gif" onClick="c'hangeimg () ">
</HTML>

данном примере скрипт должен быть загружен раньше тэга <IMG>, чтобы переменная img_click инициализировалась раньше, чем кто-нибудь щелкнет на картинке.
Если нам необходимо, чтобы при щелчке на кнопке с картинкой изменялся вид последней, то в приведенном выше коде следует вместо тэга <IMG> подставить следующие тэги:

<BUTTON onclick="changeimg()">
<image src="labelt.gif" id="myimage">
Нажми меня</ВUTTON>

Подсветка кнопок

В следующем примере на странице располагаются три кнопки серого цвета. При наведении указателя мыши на кнопку ее цвет изменяется на желтый. Здесь мы использовали стиль, чтобы задать первоначальный цвет кнопок и «вес» шрифта. При возникновении события функция changecolor (color) изменяет один из параметров стиля, а именно цвет фона backgroundColor. Цвет, который следует установить, передается функции в качестве параметра.

<HTML>
<STYLE1>
.mystyle (font-weight:bold;background-color:aOaOaO}
</STYLE1>
<FORM onMouseOver="changecolor('yellow')"
onMouseOut="changecolor('aOaOaO')">
<INPUT TYPE="button" VALUE="Pora" CLASS="mystyle"
onClick="alert('Вы нажали Рога')">
<INPUT TYPE="button" VALUE="Kопыта" CLASS="mystyle"
onClick="alert('Вы нажали Копыта')">
<INPUT TYPE="button" УАЫ1Е = "Хвосты" CLASS="mystyle"
onClick="alert('Вы нажали Хвосты')">
</FORM>
<SCRIPT>
function changecolor (color) // изменение цвета кнопок
{
event.srcElement.style.backgroundedоr = color;
}
</SCRIPT>
</HTML>

В данном примере мы воспользовались объектом event, который содержит информацию о каком-либо событии (в нашем случае — о щелчке). Свойство srcElement этого объекта содержит информацию об элементе страницы, с которым связано событие (в нашем случае это какая-то кнопка). Мы хотим изменить параметр background, относящийся не непосредственно к кнопке, а к ее стилю (style). Именно поэтому мы изменяем значение свойства event.srcElement.style.backgroundColor.
Мы рассмотрели не единственный возможный способ организации подсветки кнопок. В примере мы хотели обратить ваше внимание на то, что можно изменять параметры, определенные ранее тэгом или атрибутом STYLE1.

Мигание

В этом примере мы создаем с помощью тэга таблицы рамку, окаймляющую текст. С помощью скрипта цвет рамки будет периодически изменяться, создавая эффект мигания.

<HTML>
<TABLE BORDER=1 WIDTH=180 ID="mytab" style="border:
7px solid:yellow">
<ТR> <ТD>Мигающий бордюр</ТD> </ТR>
</TABLE>
<SCRIPT>
function flash() // изменение цвета бордюра
{
if (.'document. all) // ничего в документе нет
return;
if (mytab.style.borderColor=='yellow')
mytab.style.borderColor='red'; else
mytab.style.borderColor='yellow';
}
setlnterval("flash()",500);
// мигание бордюра с периодом 500 мс
</SCRIPT>
</HTML>

В скрипте периодически с помощью метода setlnterval () вызывается функция flash (), которая назначает цветрамки таблицы; setlnterval () является методом объекта window. Он принимает два параметра: функцию, которую следует периодически запускать, и число, равное периоду запусков в миллисекундах. В нашем примере функция flash () задания цвета рамки запускается через каждые 500 мс.

Ссылки, переливающиеся цветами радуги

В этом примере мы помещаем на страницу три гиперссылки. Чтобы привлечь внимание посетителей, мы заставляем их периодически изменять спой цвет. Мы не настаиваем на широком использовании этого способа дизайна (частое мигание не только привлекает, но и раздражает), но пример сам по себе довольно поучительный.

В НТМ L-коде мы размешаем три гиперссылки на Web-странице нашего сайта, посвященного, главным образом, учебным примерам. Напомним его адрес: www.admiral.ru/~dunaev. Далее, в этом же HTML-документе мы размещаем скрипт (сценарий), который выполняет периодическую смену цветов гиперссылок.
В скрипте определяется массив, элементами которого являются коды или названия цветов. Напомним, что цвет можно задать двумя способами. В примере длина массива цветов (количество элементов) равна 8. Функция colorchange () , определение которой мы написали сами, изменяет цвет. Чтобы внести хаотичность в процесс выбора цвета, мы использовали оператор % для вычисления остатка от деления текущего индекса массива цветов на его длину. Таким способом мы вычисляем номер элемента массива цветов, который будем использовать при следующем назначении цвета ссылке. Разумеется, здесь можно придумать и что-нибудь более изысканное, но все и так достаточно хорошо работает.

Чтобы гиперссылки постоянно изменяли свой цвет, мы используем уже известный из предыдущих примеров метод set Interval ( ) . Здесь он применяется к функции изменения цветов colorchange () . Это означает, что первым параметром метода является строка (в кавычках), содержащая вызов функции colorchange ( ) . Частота смены цветов определяется вторым числовым параметром этого метода. Напомним, что он задает период запуска функции в миллисекундах, так что значение 500 соответствует 0,5 с. Обратите внимание, что способы выбора цветов для непосещенных и уже использованных ссылок различаются.

<HTML>
<! Ссылки>
<А HREF="i_is . htm">Начало</А>
<А HREF="examples.htm">Примеры HTML</A>
<А HREF="mybook.htm">Moи книги</А>
<SCRIPT>
color s=new Array (8); // массив цветов
сolors[l]='#008000';
Colors [2] = 'green ' ;
сolors [3]='#c6c6bc' ;
colors [4]='green ' ;
rolors [5] ='blue ' ;
сolors [6]='purple' ;
сolors[7]='black';
сolors [8]='red' ;
link=4;// начальные индексы массива цветов
"unction colorchange ()// изменение цвета
{
link=(link+l)%co]ors. length;
vlin k= (link+1) %colors. length ;
document.linkColor=colors [link] ;
document.viinkColor=colors[vlink];
}
setlnterval("colorchange()",500)
// изменение цвета через 500мс,
// т. е . через 0,5с.
</SCRIPT>
</HTML>

Обратим внимание на то, что в данном примере в гиперссылках использовались имена файлов, а не их полные URL-адреса. Это вполне допустимо, если указанные файлы находятся в той же папке (каталоге), что и HTML-документ, содержащий эти гиперссылки. Для надежности, а также в общем случае, вы можете использовать более точные указания и, в частности, универсальные адреса расположения ресурсов — URL.

Анимация

Анимационные эффекты на Web-странице можно создать и средствами HTML совместно со скриптами. Конечно, самым эффективным средством создания анимации для Web является программа Flash. Однако кое-что можно сделать с помощью динамического HTML, т. е. HTML совместно со скриптами и CSS (каскадными таблицами стилей).

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

Ниже мы приводим код, который перемещает картинку из файла labelt.gif на некоторе количество пикселов по вертикали и горизонтали, если вы сделали на ней щелчок кнопкой мыши.

<HTML>
<IMG id="myimage" SRC = "openl.gif" STYLE1="position:
absolute;
lop:10;left:50"
onClick="move()">
<SCRIPT>
function move()
{
document.all("myimage").style.top=parselnt(document.all
("myimage").style.top)+10; document.all("myimage").style.left=parselnt
(document.all("myimage").style.left)+20;
}
</SCRIPT>
</HTML>

Здесь функция move () переопределяет координаты картинки. Мы использовали функцию parseInt () для преобразования строковых значений параметров стиля в числовые, чтобы корректно выполнить арифметические операции.
Теперь модифицируем рассмотренный выше пример так, чтобы картинка при щелчке кнопкой мыши на ней начинала двигаться без остановки. Для этого нам потребуется метод setInterval (). Напомним, что это — метод объекта window. Он принимает два параметра: функцию, которую следует периодически запускать и период в милисекундах, через который ее нужно запускать. В примере мы намерены запускать функцию move () через 0, I с. Вот код данного примера:

<HTML>
<IMG id="myimage" SRC="openl.gif" STYLE1="position:
absolute; top:iO;left:50"
onClick="move()">
<SCRIPT>
function move()
{
document.all("rayimage").style.top=parselnt
(document.all("myimage").style.top)+10; document.all
("myimage").style.left=parselnt
(document.all("myimage").style.left)+20;
setlnterval ("move ()",100);
// периодический вызов функции move()
}
</SCRIPT>
</HTML>

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

<HTML>
<IMG id="myimage" SRC = "openl.gif " STYLE1="position : absolute; top:10;left:50">
<SCRIPT>
function move()
{
document. all ("myimage").style.top=parselnt
(docurrent. all ("myimage").style.top)+10;
document.all("myimage").style.left=parselnt
(document.all("myimage").style.left)+20;
}
setlnterval("move()",100);
// периодический вызов функции move()
</SCRIPT>
</HTML>

В этом примере метод setlnterval () находится вне определения функции move () , поэтому он начнет выполняться сразу же после загрузки страницы в браузер.
Очевидно, в рассмотренных выше примерах картинка, начав движение, со временем исчезнет из поля зрения (уйдет за границы окна браузера). Чтобы это не произошло, следует использовать замкнутые траектории движения, которые мы рассмотрим в следующем примере.

В рассматриваемом ниже примере картинка перемещается по эллиптической траектории. Вместо картинки вы можете заставить двигаться любой другой видимый элемент страницы. Эллипс — это замкнутая кривая, овал. Частными случаями эллипса являются окружность и отрезок прямой линии. Особенность данного примера состоит в том, что функция, обеспечивающая движение элемента по эллипсу, универсальна, т. е. не зависит от того, что именно должно двигаться по эллиптической траектории. Кроме того, мы разместили описание этой функции в отдельном текстовом файле с расширением js. Предполагается, что текстовые файлы с таким расширением содержат скрипты, написанные на языке JavaScript. В нашем примере этот файл имеет имя ellipse.js. Поскольку этот скрипт достаточно универсален, вы можете использовать его в своих разработках.

Файл ellipse.js

//Движение по эллипсу
// Параметры:
// objnamel - id движущегося объекта, заданного тэгом; строка;
// alphal - угол поворота эллипса, градусы;
// al - большая полуось эллипса, пикселы;
// b1 - малая полуось эллипса, пикселы;
// omegal - угловая скорость, град/с;
знак задает направление вращения;
// х01 - х-координата центра эллипса, пикселы;
// у01 - у-координата центра эллипса, пикселы;
// ztimel - начальная фаза на эллипсе, градусы;
// dtl - временная задержка, секунды.
function ellipse
(objnamel, alphal, al,bl, omegal, xOl , yOl, ztimel, dtl)
// проверка наличия параметров if
(alphal==null) alphal=0; if (al==null)
al = 0; if (bl==null)
bl = 0;
if (omegal==null)
A omegal=0;
if (x01==null)
x01=0; if (y01==null)
y01=0; if (ztimel==null)
ztimel=0; if (dtl==null)
dtl=0; t=-ztimel;
// чтобы начальное значение было О,
// поскольку в move() уже есть приращение
// Многократный вызов функции move()
с интервалом ztime в секундах: setlnterval
("move('"+objnamel+"',"+alphal + "," + al + "," + b1 + ",
+ omegal + "," + xOl + "," + yOl + ","
+ ztimel + "," + dtl ") ", ztimel*1000)
// Пересчет координат, вызывается из ellipse ()
function move
(objname2 ,alpha2,a2,b2, omega 2 ,x02,y02,ztime2,dt2)
t = t-H2time2;
// x,y - координаты в собственной системе координат
x=a2*Math. cos ( (ornega2* t + dt2) *Math. PI/180) ;
y=b2*Math.sin((omega2*t Kit2)*Math.PI/180) ;
as=Math.sin(alpha2*Math.PI/180) ;
ac=Math.cos(alpha2*Math.PI/180) ;
document.all(objname2) .style.top=-x*as+y*ac+y02
document.all(objname2).style.left=x*ac+y*as+x02

Параметр функции objname определяет идентификатор (значение id) элемента страницы, который должен двигаться по эллиптической траектории. Смысл остальных параметров можно понять из следующего рисунка:

Координаты top и left — вертикальная и горизонтальная экранные координаты. Если а = b (большая и малая полуоси эллипса равны), то эллипс превращается в окружность. Если а = 0 или b = 0, то эллипс вырождается в отрезок. Обратите внимание, как используются математические (тригонометрические) функции. Эти функции суть методы объекта Math.

Рис. 863. Параметры движения по эллиптической траектории

Собственно перемещение элемента обеспечивается периодическим вызовом вспомогательной функции move (), которая вычисляет новые координаты элемента. Чтобы вызывать эту функцию периодически (с заданной временной задержкой), мы использовали метод setlnterval () объекта window.

Вот HTML-код, в котором определяется перемещаемый элемент (картинка из файла labelt.gif), загружается файл ellipse.js со скриптом, описывающим функцию ellipse (), и вызывается функция ellipse ():

<HTML>
<! Объект, который будет двигаться >
<IMG ID="pl" SRC = "labelt.gif" STYLE1 =
"position:absolute;top:300;left:190">
<! Загружаем скрипт из файла с описанием функции ellipse (),
ss которая перемещает объект>
<SCRIPT SRC = "ellipse js"x/script>
<! Вызываем функцию ellipseO >
<SCRIPT>
ellipse("pi",60,100,30,10,170,300,0.2,0)
</SCRIPT>
</HTML>

Особенность данного примера состоит в том, что перемещаемый объект (в нашем случае — картинка) должен быть определен прежде загрузки скрипта и вызова функции, обеспечивающей движение.

---

---

Свойство	Атрибут	Назначение
activeElement		Идентифицирует активный элемент
alinkColor	ALINK	Задает цвет активных ссылок на странице
bgColor	BGCOLOR	Определяет цвет фона элемента
body		Ссылка только для чтения на неявный основной объект документа, определенный в тэге <BODY>
cookie		Строка пароля для элементов cookie браузера
domain		Устанавливает или возвращает домен документа для его защиты или идентификации
fgColor	TEXT	Устанавливает цвет текста переднего плана
lastModified		Дата последнего изменения страницы, доступна как строка
linkColor	LINK	Цвет еще не посещенных гиперссылок на странице
location		Полный URL-адрес документа
parentWindow		Возвращает родительское окно для документа
readyState		Определяет текущее состояние загружаемого объекта
referer		URL-адрес страницы, которая вызвала текущую
selection		Ссылка «только для чтения» на дочерний для document объект selection
itle	TITLE	Определяет справочную информацию для элемента, используемую при загрузке или во всплывающей подсказке
url	URL	URL-адрес документа клиента или в тэге <МЕТА>
vlinkColor	VLINK	Цвет посещенных ссылок на странице