Версия для печати

Архив документации на OpenNet.ru / Раздел "Web мастеру, CGI, Perl, PHP, Apache" (Многостраничная версия)

Практическое введение в программирование на JavaScript

Павел Храмцов, Центр Информационных Технологий

Введение

1. Принципы гипертекстовой разметки. Структура документов

1.1. Группы тагов НТМL
1.2. Контейнеры HTML-документа
1.3. Средства описания таблиц в HTML
1.4. Использование таблиц в дизайне страницы
1.5. Фреймы
1.6. Формы
1.7. Апплеты
1.8. Каскадные таблицы стилей (Cascad Style Sheets)

2. Управление просмотром страниц Web-узла. JavaScript

2.1. Модель объектов JavaScript - объекты Navigator'а
2.2. Методы объектов и свойства объектов. Управление потоком вычислений
2.3. События
2.4. Массивы
2.5. Графика
2.6. Стеки гипертекстовых ссылок
2.7. Фреймы и окна
2.8. Наследование кода скриптов различными страницами
2.9. Java, JavaScript и Plug-ins
2.10. Встраивание в HTML-документ
2.11. Примеры скриптов
2.12. Единство в многообразии
2.13. Приемы программирования на JavaScript
2.14. Примеры манипулирования окнами
2.15. Гипертекстовые ссылки и картинки

1.2. Контейнеры HTML-документа

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

Контейнеры заголовка документа НТМL - HEAD

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

ТIТLЕ

Наиболее часто используемым тагом заголовка является имя документа.

ТIТLЕ имеет следующий синтаксис 

	<ТIТLЕ> Название документа </ТIТLЕ>

Содержание тага ТIТLЕ отображается в поле названия документа.

ВАSE

Таг ВАSЕ связан с формой представления гипертекстовой ссылки в форме URL. Дело в том, что спецификация URL определяет две формы адресации документов: полную и неполную. НТМL разрешает использовать как полную форму адреса URL, так и неполную. Но для того, чтобы использовать вторую форму спецификации, ее надо на чем-то базировать, т.е. задавать базовый адрес, который можно было бы использовать для формирования полной формы URL из неполной. Таг ВАSЕ позволяет определить эту базу. Так, например, если в заголовке будет задано: 

	<BASE HREF="http://polyn.net.kiae.su/>,
гипертекстовая ссылка вида: 
	<A HREF="/altai/index.htmll">
будет расширена до 
	<A HREF= http://polyn.net.kiae.su/altai/index.shtmll
Это же касается и других импортируемых в документ тагов. Графический образ, монтируемый в документ по команде: 
	<IMG SRC="/gif/te t.gif">
будет найден по адресу: 
	<IMG SRC=' http://polyn.net.kiae.su/gif/test.gif'>

Содержание тага ВАSЕ интерфейсом пользователя прямо не отображается.

ISINDEX

Возможность поиска НТМL-документа по ключевым словам определяется тагом ISINDEX заголовка документа. В первоначальной версии языка данный таг не имел дополнительных атрибутов. Если сервер мог выполнить запрос по ключевым словам, то он автоматически вставлял в заголовок таг ISINDEX. Список ключевых слов приписывался клиентом к адресу документа после символа "?". Понятно, что выполнить запрос мог сервер, который при наличии символа "?" превращался в поисковую машину. НТМL-документ мог быть сгенерирован "на лету" программой, тогда ключевые слова после "?" приписываются к адресу этой программы. В новой версии языка появилась возможность указать программу обработки запроса и задать фразу вместо стандартной "SЕАRСН ISINDEX": 

	<ISINDEX HREF="http://polyn.net.kiae.su/cgi-bin/search" 
	PROMPT="Enter Keywords:">

В приведенном примере атрибут НREF определяет адрес программы обработки запроса, а атрибут РRОМРТ - содержание приглашения. Справедливости ради стоит отметить, что полностью новые возможности этого тага выполняет только один - Аrеnа. Такие популярные интерфейсы, как Моsaic и Netscape, данный таг интерпретируют по-старому.

МЕТА

Таг МЕТА предназначен для определения в заголовке документа конструкций, отсутствующих в спецификации НТМL. Имеет три атрибута: NAME, CONTENT, HTTP-EQUIV. Применение данного тага затруднено тем, что для интерпретации конструкций, которые вводятся через этот таг, необходимо, чтобы сервер или интерфейс пользователя могли эти конструкции расшифровать и применить. Для такого сорта работы программа должна иметь интерпретировать конструкции SGML, что практически не реализовано ни в одной интерфейсной программе. Единственным способом применения данного тага на практике является включение в заголовок отклика по протоколу НТТР информации, определенной через атрибут НТТР-ЕQUIV: 

	<META HTTP-EQUIV="Keywords" CONTENT="Plsma, Nuclear Physics">

При таком использовании в заголовок НТТР-пакета будет включена строка: Keywords: Plasma, Nuclear Physics, что удобно при отправке почты, например.

Наиболее эффектное применение контейнера МЕТА для построения демонстрационных роликов. В этом случае изменение отображаемой страницы строится на параметре Rеfresh (т.е. времени обновления документа). В заголовок документа записывается контейнер МЕТА следующего вида: 

	<meta http-equiv = "Refresh": content = "0, URL=next.htmll">

такое предложение равносильно появлению в заголовке сообщения протокола НТТР предложения вида: 

	Refresh = 0; URL=next.htmll <LF>

В свою очередь это означает замену документа сразу же после загрузки его браузером. При этом в качестве нового документа используется документ из параметра URL.

Назад | Содержание | Вперед

1.3. Средства описания таблиц в HTML

По мере роста системы WWW стало ясно, что средств, которые заложены в НТМL, не достаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (таг <PRE>), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выделялась из общего стиля документа.

Таг <ТАВLЕ>.

Для описания таблиц служит таг <ТАВLЕ>. Таг <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.

Таг <ТR>

Таг <ТR> (сокращение от Таble Row - строка таблицы) создает строку таблицы. Если в таблице содержится два набора тагов <ТR></ТR>, в ней будут две строки. Весь текст, другие таги и атрибуты, которые вы хотите поместить в одну строку, должны быть помещены между тагами <ТR></ТR>.

Пример 1.10 

	<HTML> 
	<BODY> 
	<H1 ALIGN=CENTER>Таблица</H1>
	<CENTER> 
	<TABLE BORDER> 
	<TR> 
	<TD COLSPAN=3>Если в таблице два тага <TR> то в ней две строки.</TD> 
	</TR> 
	<TR> 
	<TD>Если в стоке три тага <TD> </TD>
	<TD>то в ней </TD> 
	<TD>три столбца.</TD> 
	</TR> 
	</TABLE> 
	</CENTER> 
	</BODY> 
	</HTML>

Рис. 1.11. Использование тагов TR и TD

Таг <ТD>

Внутри строки таблицы обычно размещаются ячейки с данными, Каждая ячейка, содержащая текст или изображение, должна быть окружена тагами <ТD></ТD>. Число тагов <ТD></ТD> в строке определяет число ячеек. Строка с пятью парами тагов <ТD></ТD> будет состоять из пяти ячеек.

Пример 1.11 

	<HTML> 
	<BODY> 
	<TABLE BORDER>
	<TR> 
	<TD>В</TD> 
	<TD>этой</TD> 
	<TD>строке</TD> 
	<TD>пять</TD> 
	<TD>столбцов</TD> 
	</TR> 
	<TR> 
	<TD>а в этой</TD> 
	<TD>только</TD> 
	<TD>три.</TD>
	</TR> 
	</TABLE> 
	</BODY> 
	</HTML>

Рис. 1.12. В разных строках возможно задать разное количество столбцов

Таг <ТН>

При задании заголовков для столбцов и строк таблицы используются таг заголовка <ТН></ТН> (Таblе Неаder, заголовок таблицы). Эти таги аналогичны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тагами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD></ТD> с тагом <В> и атрибутом <АLIGN=CENTER>, текст тоже будет выглядеть как заголовок. Однако, следует иметь в виду, что не все броузеры поддерживают жирный шрифт в таблицах, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

Пример 1.12 

	<HTML> 
	<BODY> 
	<TABLE BORDER> 
	<TR> 
	<TH>Заголовок центрирован по умолчанию</TH> 
	<TH COLSPAN=2>Заголовок может объединять столбцы</TH> 
	</TR> 
	<TR> 
	<TH>Заголовок может быть расположен перед столбцами</TH>
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	<TR> 
	<TH ROWSPAN=3> Заголовок может объединять строки</TH>
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	</TABLE> 
	</BODY> 
	</HTML>

Рис. 1.13. Таг заголовков для столбцов и строк TH и его атрибуты COLSPAN= и ROWSPAN=

Таг <САРТIОN>

<CAPTION> позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=ТОР>), либо под таблицей (<САРТION ALIGN=ВОТТОМ>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда таг <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда таг <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

Пример 1.13 

	<HTML> 
	<BODY> 
	<TABLE BORDER> 
	<CAPTION ALIGN=TOP>Заголовок над таблицей</CAPTION>
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	</TABLE> 
	<TABLE BORDER> 
	<CAPTION ALIGN=BOTTOM>Заголовок под таблицей</CAPTION>
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	</TABLE> 
	</BODY> 
	</HTML>

Рис. 1.14. Таг заголовка CAPTION

Атрибут NOWRAP

Обычно любой текст в таблице, не помещающийся в одну строку ячейки, переходит на следующую строку. Однако, при использовании атрибута NOWARP с тагами <ТН> или <ТD> длина ячейки расширяется на столько, чтобы, заключенный в ней текст поместился в одну строку.

Атрибут СОLSPAN=

Таги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN= (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN=, чтобы растянуть ее над любым количеством обычных ячеек.

Пример 1.14 

	<HTML> 
	<BODY> 
	<CENTER> 
	<TABLE BORDER=3> 
	<TR> 
	<TD> 
	Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, 
	</TD> 
	<TD> 
	можно воспользоваться атрибутом СОLSPAN=,
	</TD> 
	</TR> 
	<TR> 
	<TD BGCOLOR=WHITE COLSPAN=2>
	чтобы растянуть ее над любым количеством обычных ячеек.
	</TD> 
	</TR> 
	</TABLE> 
	</CENTER> 
	</BODY> 
	</HTML>

Рис. 1.15. Атрибут COLSPAN=

Атрибут ROWSPAN=

Атрибут ROWSPAN=, используемый в тагах <ТD> и <ТН>, аналогичен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN= число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Нельзя поместить ее внизу таблицы.

Атрибут WIDТН=

Атрибут WIDТН= применяется в двух случаях. Можно поместить его в таг <ТАВLЕ> для задания ширины всей таблицы, а можно использовать в тагах <ТR> или <ТН> для задания ширины ячейки или группы ячеек. Ширину можно указывать в пикселях или в процентах. Например, если вы задали в таге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселей независимо от размера страницы на мониторе. При задании WIDТН=50% в таге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в пикселях имейте в виду, что если у вашего читателя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселями и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы могут оказаться полезными.

Пример 1.15 

	<HTML> 
	<BODY> 
	<TABLE BORDER WIDTH=100%> 
	<TR> 
	<TD ALIGN=CENTER>Текст или данные - ширина 100%
	</TR> 
	</TABLE>
или
 
	<TABLE BORDER WIDTH=50%> 
	<TR> 
	<TD ALIGN=CENTER>Текст или данные - ширина 50%</TD>
	</TR> 
	</TABLE>
или
 
	<TABLE BORDER WIDTH=200> 
	<TR> 
	<TD ALIGN=CENTER>Текст или данные - ширина 200 пикселей</TD>
	</TR> 
	</TABLE>
или
 
	<TABLE BORDER WIDTH=100> 
	<TR> 
	<TD ALIGN=CENTER>Текст или данные - ширина 100 пикселей</TD> 
	</TR> 
	</TABLE> 
	</BODY> 
	</HTML>

Рис. 1.16. Атрибут WIDTH=

Атрибут UNIТ=

Атрибут UNIT= тага <ТАВLЕ> определяет единицы измерения, используемые при указании размеров как всей таблицы, так и ее отдельных столбцов. Атрибут UNIТ= может принимать три значения:

UNIТ=ЕN - это значение присваивается по умолчанию и задает единицу измерения, равную еn-пробелу. Еn-пробел - это типографская единица измерения, равная ширине буквы <n>. Реальный размер пробела зависит от выбранного шрифта: для крупного шрифта еn-пробел больше, чем для мелкого. Обычно еn-пробел равен половине размера шрифта. Например, при использовании 12-пунктового шрифта ширина еn-пробела будет 6 пунктов. Для 8-пунктового шрифта еn-пробел занимает 4 пункта.

UNIТ=RELATIVE используется для задания относительной ширины столбцов в процентах от общей ширины таблицы. Этот способ следует по возможности применять вместо указания ширины в процентах UNIТ=RELATIVE выполняет ту же функцию, но поддерживается большим количеством броузеров.) При задании относительных (RELATIVE) единиц вводимые числа воспринимаются как ширина столбцов в процентах.

UNIТ=РIXELS - это значение применяется, когда вам нужно точно знать ширину столбца на экране. В этом случае лучше всего задать ее в пикселях. Например, таг <ТАВLЕ UNIТ=РIXELS WIDTH=340> сформирует таблицу шириной 340 пикселей.

Атрибут СОLSРЕС=

Атрибут СОLSРЕС=, используемый с атрибутом UNIТ=, определяет, сколько места занимает каждый столбец таблицы и как в нем выравниваются данные. Применяется только в таге<ТАВLЕ>.

СОLSРЕС= перечисляет все столбцы и для каждого из них задает выравнивание и размер. Для столбца (или ячейки) существует пять способов выравнивания: L - по левому краю, С - по центру, R - по правому краю, J - по правому и левому краю и D - по десятичной запятой. Если у вас пять столбцов, вы можете определить ширину и выравнивание каждого из них следующим образом: 

	<ТАВLЕ UNIТ=РIХЕLS СОLSРЕС="L10 С15 J25 D30">

Вы описали таблицу, в которой первый столбец имеет ширину 10 пикселей и его содержимое выравнивается по левому краю, второй столбец, шириной 15 пикселей, с выравниванием по центру, третий, шириной 20 пикселей, выровнен по правому краю, четвертый, шириной 25 пикселей, выровнен с двух сторон, а пятый, шириной 30 пикселей, выравнивается по десятичным запятым.

Атрибут DР=

Атрибут DР= (Decimal Point, десятичный знак) определяет символ, используемый для отделения целой части десятичной дроби. DР="." (по умолчанию) указывает на точку в качестве десятичного символа. DР="," задает запятую.

Пустые ячейки

Если ячейка не содержит данных, она не будет иметь границ. Если вы хотите, чтобы у ячейки были границы, но не было содержимого, вы должны поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселях или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении текста и графики на странице.

Атрибут СЕLLРАDDING=

Атрибут СЕLLPADDING= определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.

Пример 1.16 

	<HTML> 
	<BODY> 
	<CENTER> 
	<TABLE BORDER CELLPADDING=20>
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	</TABLE> 
	<BR> 
	<TABLE BORDER CELLPADDING=O>
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	</TABLE> 
	</CENTER> 
	</BODY> 
	</HTML>

Рис. 1.17. Атрибут CELLPADDING= определяющий ширину полей

Атрибуты АLIGN= и VALIGN=

Таги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN= и VALIGN=. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру, как видно из рис. . Горизонтальное выравнивание может быть задано несколькими способами:


ALIGN=ВLЕЕDLEFT Прижимает содержимое ячейки вплотную к левому краю.
ALIGN=LEFT Выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING=.
АLIGN=СЕNTER Располагает содержимое ячейки по центру.
АLIGN=RIGHT Выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING=.

Пример 1.17 

	<HTML>
	<BODY>
	<TABLE BORDER WIDTH=100%> 
	<TR> 
	<TD ALIGN=LEFT>Текст или данные</TD>
	<TD ALlGN=CENTER>Текст или данные</TD>
	<TD ALIGN=RIGHT>Текст или данные</TD>
	</TR> 
	<TR> 
	<TD ALIGN=RIGHT>Текст или данные</TD>
	<TD ALIGN=CENTER>Текст или данные</TD>
	<TD ALIGN=LEFT>Текст или данные</TD>
	</TR> 
	<TR> 
	<TD ALIGN=RIGHT>Текст или данные</TD>
	<TD ALIGN=RIGHT>Текст или данные</TD>
	<TD ALIGN=RIGHT>Текст или данные</TD>
	</TR> 
	<TR> 
	<TD ALIGN=CENTER>Текст или данные</TD>
	<TD ALIGN=CENTER>Текст или данные</TD>
	<TD ALIGN=CENTER>Текст или данные</TD>
	</TR> 
	<TR> 
	<TD ALIGN=LEFT>Текст или данные</TD>
	<TD ALIGN=LEFT>Текст или данные</TD>
	<TD ALIGN=LEFT>Текст или данные</TD>
	</TR> 
	</TABLE> 
	</BODY> 
	</HTML>

Рис. 1.18. Атрибут ALIGN= выравнивания содержимого ячеек таблицы по горизонтали

Атрибут VALIGN= осуществляет выравнивание текста и графики внутри ячейки по вертикали. . Вертикальное выравнивание может быть задано несколькими способами: VALIGN=ТОР Выравнивает содержимое ячейки по ее верхней границе.


VALIMG=МIDDLE Центрирует содержимое ячейки по вертикали.
VALIGN=ВОТТОМ Выравнивает содержимое ячейки по ее нижней границе.

Пример 1.18 

	<HTML> 
	<BODY> 
	<CENTER> 
	<TABLE BORDER WIDTH=90%> 
	<TR> 
	<TD WIDTH=100> Атрибут VALIGN= осуществляет выравнивание текста и 
	графики внутри ячейки по вертикали.  
	</TD> 
	<TD VALIGN=TOP>верх,</TD> 
	<TD VALIGN=MIDDLE>середина,</TD> 
	<TD VALIGN=BOTTOM>низ.</TD> 
	</TR> 
	<TR VALIGN=TOP> 
	<TD> VALIGN=ТОР Выравнивает содержимое ячейки по ее верхней границе.
	</TD>
	<TD>верх,</TD> 
	<TD>верх,</TD> 
	<TD>верх.</TD> 
	</TR> 
	<TR VALIGN=middle> 
	<TD> VALIGN=МIDDLE Центрирует содержимое ячейки по вертикали. 
	</TD>
	<TD>середина,</TD> 
	<TD>середина,</TD> 
	<TD>середина.</TD> 
	</TR> 
	<TR VALIGN=bottom> 
	<TD> VALIGN=ВОТТОМ Выравнивает содержимое ячейки по ее нижней границе.
	</TD>
	<TD>низ,</TD> 
	<TD>низ,</TD> 
	<TD>низ.</TD> 
	</TR> 
	</TABLE> 
	</CENTER> 
	</BODY> 
	</HTML>

Рис. 1.19. Атрибут VALIGN= осуществляет выравнивание текста и графики внутри ячейки по вертикали.

Атрибут ВОRDER=

В таге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пустое пространство для них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать границы различной толщины для разных таблиц, чтобы их легче было различать.

Атрибут СЕLLSPACING=

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

Пример 1.19 

	<HTML> 
	<BODY> 
	<CENTER> 
	<TABLE BORDER CELLSPACING=20>
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	</TABLE> 
	<TABLE CELLSPACING=20> 
	<TR> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	<TD>Текст или данные</TD> 
	</TR> 
	<TR> 
	<TD>Текст или данные</TD>
	<TD>Текст или данные</TD>
	<TD>Текст или данные</TD>
	</TR> 
	</TABLE> 
	<TABLE CELLSPACING=0>
	<TR> 
	<TD>Текст или данные</TD>
	<TD>Текст или данные</TD>
	<TD>Текст или данные</TD>
	</TR> 
	<TR> 
	<TD>Текст или данные</TD>
	<TD></TD> 
	<TD>Текст или данные</TD>
	</TR> 
	</TABLE> 
	</CENTER> 
	</BODY> 
	</HTML

Рис. 1.20. Атрибут CELLSPACING= определяет ширину промежутков между ячейками

Назад | Содержание | Вперед

1.4. Использование таблиц в дизайне страницы

Приятное свойство таблиц состоит в том, что если вы захотите, то можете сделать их границы невидимыми. Это позволяет с помощью тага <ТАВLЕ> красиво размещать на странице текст и графику. До сих пор таг <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически такой же свободой использования <пустого пространства>, что и создатели печатных страниц. Таблицы в большей мере, чем что-либо другое, помогают отойти от иерархического размещения текста на Web-страницах.

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

Пример 1.20 

	<HTML> 
	<BODY> 
	<CENTER> 
	<TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16> 
	<TR> 
	<TD ALIGN=CENTER> 
	<H1>ПЕРФОРАТОР</H1> 
	<H3>Только сегодня!</H3> 
	<TABLE BORDER WIDTH=100%> 
	<TR><TD ALIGN=CENTER><I>Почти бесплатно!</I></TD>
	</TR> 
	</TABLE> 
	</TD> 
	</TR >
	</TABLE>
	</CENTER >
	</BODY>
	</HTML>

Рис. 1.21. Создание выпуклых элементов

Создание разноцветных таблиц

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

Цветные границы в Netscape Navigator

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

	<BODY ВАСКGROUND="сооlbg.gif" ВGCOLOR=" # FF0000">

Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ли ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF не слишком сложно устроен, время загрузки страницы лишь немного возрастет. На приведенном ниже примере показано какие, широкие возможности дает использование цвета в HTML и в частности в таблицах.

Пример 1.21 

	<HTML> 
	<BODY BACKGROUND="bgr.gif"  BGCOLOR="YELLOW" > 
	<CENTER>
	<TABLE BORDER=3 CELLPADDING=20>
	<CAPTION ALIGN=TOP><H2>Как просверлить бетонную
	 стену</H2></CAPTION>
	<TR>
	<TD BGCOLOR=GRAY> 
	<TABLE CELLPADDING=10 CELLSPACING=0 BORDER=16> 
	<TD BGCOLOR=RED ALIGN=CENTER> 
	<H1>ПЕРФОРАТОР</H1> 
	<H3>Только сегодня!</H3> 
	<TABLE BORDER WIDTH=100%> 
	<TR> 
	<TD BGCOLOR=AQUA ALIGN=CENTER><I>Почти бесплатно!</I></TD>
	</TR> 
	</TABLE> 
	</TABLE>
	<TD WIDTH=50% BGCOLOR=BROWN ALIGN=CENTER>
	<IMG SRC="perfor1.gif" WIDTH=200 HEIGHT=150>
	</TD> 
	</TR>
	<TR>
	<TD BGCOLOR=PINK>
	<FONT SIZE=6 COLOR=BLUE>От 6 до 20 мм</FONT>
	</TD>
	<TD  BGCOLOR=BLUE>
	<FONT SIZE=6 COLOR=PINK>Просверлим все</FONT>
	</TD>
	</TR>
	</TABLE> 
	</CENTER > 
	</BODY> 
	</HTML>

Рис. 1.22. Пример разноцветной таблицы

Назад | Содержание | Вперед

1.5. Фреймы

Что такое фрейм?

В каком-то смысле фрейм - это именно то, что означает данное слово: рамка вокруг картинки, окошко или страница. Вводя таг <FRAME>, дизайнер НТМL-страницы разделяет экран броузера на части. В результате человек, просматривающий страницу, может изучать одну часть страницы независимо от остальной части. Фактически броузер, распознающий фреймы, загружает разные страницы в разные секции, или фреймы, экрана. Например, вы можете построить страницу таким образом, что фирменный знак будет зафиксирован в верхней части экрана, в то время как остальную часть страницы пользователь пролистывает обычным способом. Можно расположить сбоку кнопки навигации, которые не перемещаются, когда читатель щелкает их мышкой, так что изменяется только часть экрана, а сама полоска навигации остается неподвижной.

Для чего можно использовать фреймы

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

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

Как работают фреймы

На первый взгляд, фреймы - это нечто сложное, но их легче понять, если провести аналогию с ячейками таблицы. Расположение фреймов на экране задается почти так же, как ячеек в таблице: таги и атрибуты работают так же, как их табличные родственники. Однако, хотя аналогия между единичным фреймом на странице и ячейкой таблицы полезна, нужно помнить, что есть и отличия. Содержимое ячейки задано в коде HTML-страницы с таблицей. Текст или графика, составляющие содержимое таблицы, фактически вводятся на той же самой странице HTML, что и таг или атрибут, описывающие таблицу. Напротив, экран с фреймами описывается в НТМL-странице, называемой (frameset ). Содержимое же фрейма - это отдельная HTML-страница, которая может находиться где угодно - в другом каталоге, на локальном сервере или на удаленном узле где-то в сети. Фреймовая структура определяет только способ организации экрана с фреймами и указывает, где находится начальное содержимое каждого фрейма. Для всех фреймов задаются URL, описывающие местонахождение их данных. Как правило, на странице с фреймовой структурой нет содержимого фреймов. Такая страница обычно невелика - она описывает только кадровую структуру экрана. Когда документ загружается в фрейм, вы можете щелкать мышкой на ссылке в этом документе, что вызовет появление связанных документов в других кадрах, заданных в фреймовой структуре.

Создание простой страницы с фреймами

Создадим, для лучшего понимания, пару простых страничек с фреймами, чтобы стало понятно, каково строение НТМL страницы с фреймами и для чего нужны основные таги и атрибуты.

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

Задание фреймовой структуры

Для начала мы должны представить себе общий вид страницы - где и какого размера будут фреймы. Затем можно подумать об их содержании. Ниже приводится код простой фреймовой структуры с использованием тага <FRAMESET>. Обратите внимание: страница с фреймовой структурой не содержит тага <ВОDY>.

Пример 1.22 

	<HTML>
	<HEAD>
	<TITLE>Пример фреймов</TITLE>
	</HEAD>
	<FRAMESET COLS="25%, 75%"
	<FRAME SRC="a.htmll">
	<FRAME SRC="b.htmll" NAME="main">
	</FRAMESET>
	<NOFRAMES>
	Вы видите эту страницу броузером не поддерживающим фреймы.
	</NOFRAMES>
	</HTML>

Рис. 1.23. Вид экрана броузера с фреймами

Вот и весь код, необходимый для задания фреймовой структуры. Обратите внимание на таг <NOFRAMES>. Через несколько минут мы к нему вернемся. В результате мы получили экран, разделенный на два окна. Левое окно занимает 25 процентов экрана и содержит страницу с названием a.htmll. Окно справа займет 75 процентов и вначале покажет файл b.htmll. Пока у нас их нет, так что вы увидите страницу с двумя пустыми фреймами. Прежде чем она появится, нам придется пару раз щелкнуть мышкой в ответ на сообщения об ошибках, потому что броузер будет пытаться найти несуществующие страницы. Заметьте, что правую страницу мы назвали <main > ( <главная>) с помощью строки: 

	<FRAME SRC="b.htmll" NAMЕ="main">

Это означает, что фрейм под именем main будет содержать страницу b.htmll. Заметим, что поскольку мы не собираемся показывать в левом фрейме никаких страниц, кроме menu.htmll, нам не нужно его называть.

Подготовка содержимого фрейма

Теперь давайте загрузим фреймы с содержимым. Зададим страницу menu.htmll в левом фрейме, где мы собираемся щелкать мышью, переключаясь между двумя страницами в правом фрейме. Файл menu.htmll - это обычная НТМL-страница, построенная как оглавление. На самом деле мы можем взять готовую страницу с оглавлением и использовать ее. Имейте в виду, что этот фрейм узкий и высокий, так что страница, которая будет в него загружаться, должна быть соответствующим образом спроектирована. Теперь мы должны определить, где будут появляться другие страницы при щелчке мышкой на ссылке. Поскольку мы хотим, чтобы они отображались в правом фрейме, добавим атрибут ТАRGET= (TARGЕТ="main") в таг ссылки. Это означает, что когда пользователь щелкает на ссылке, вызываемая страница появляется в фрейме main. Мы отображаем все страницы в фрейме main, поэтому давайте добавим атрибут ТАRGЕТ="main" во все таги ссылок в оглавлении. Если мы не определим атрибут ТАRGЕТ, то страница появится там, где мы щелкнули мышкой, - в левом фрейме, что нас не устраивает, хотя в какой-нибудь другой ситуации подобное поведение было бы очень кстати. Например, вы можете добавить ссылку <Другие пункты оглавления>, которая будет просто выводить следующие ссылки. Имеет смысл сделать оглавление подлиннее, чтобы читатели видели как можно больше ссылок. Но сейчас давайте ограничимся простым примером. Ниже приведен код для левого фрейма menu.htmll.

Пример 1.23 

	<HTML>
	<HEAD>
	<TITLE> Меню</TITLE>
	</HEAD>
	<BODY>
	<H3 ALIGN=CENTER>Компания.</H3>
	<HR>
	<UL><font color="#400040" size="4">
	<LI><a href="html-pr2-4.htmll" ТАRGЕТ="main">Главная</a>
	<LI><a href="news.htmll" ТАRGЕТ="main">Новости</a>
	<LI><a href="products.htmll" ТАRGЕТ="main">Товары</a> 
	<LI><a href="servis.htmll" ТАRGЕТ="main">Услуги</a> 
	<LI><a href="contact.htmll" ТАRGЕТ="main">Контакты</a> 
	<LI><a href="search.html" ТАRGЕТ="main">Поиск</a> 
	</UL>
	</font>
	</BODY>
	</HTML>

Рис. 1.24. Оглавление (меню) располагающееся в левой части

Заметим, что здесь ничего не говорится о фреймах. О них все сказано в фреймовой структуре. Единственное, о чем нужно позаботиться на каждой НТМL странице, появляющейся в фрейме, так это о том, где поместить ссылки, активирующие те или иные действия. В нашем примере, в левом фрейме, где находится оглавление, будет располагаться только одна страница. Мы хотим, чтобы при щелчке мышкой в левой странице ссылочный документ появлялся бы в правом фрейме main.

Подготовка фрейма main

Правый фрейм main будет содержать сами HTML-страницы. Ваша задача так их спроектировать, чтобы они хорошо смотрелись в меньшем, чем обычно, окне, потому что часть экрана будет занята левым кадром оглавления. Но больше эти страницы ничем не примечательны. Ниже приводится код для страницы, упомянутой первой в оглавлении ( html-pr2-4.htmll).

Пример 1.24 

	<HTML>
	<HEAD>
	<TITLE> Главная страница</TITLE>
	</HEAD>
	<BODY>
	<H1 ALIGN=CENTER>Компания.</H1>
	<HR>
	<H3 ALIGN=LEFT><I>Открытое акционерное общество Компания основанная
	 в 1996 году, является одним из ведущих поставщиков бытовой электроники 
	в России.</I></H3>
	<HR>
	<H3>Основными направлениями деятельности Компании являются:
	<OL>
	<LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов; 
	<LI>создание сервисных центров по обслуживанию бытовой 
	электроники.</H3>
	</OL>
	<HR>
	<H3><U><FONT COLOR=RED> Компания ищет агентов по сбыту бытовой 
	электроники.</FONT></U></H3>
	<H5 ALIGN=CENTER>Контактная информация</H5>
	<UL>
	<LI>Telephone (123) 12-34-56
	<LI>FAX (123) 12-34-56
	<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106
	<UL TIPE=CIRCLE>Электронная почта<BR>
	<LI>Общая информация: abc@abc.su
	<LI>Продажи: abc@abc.abc.su
	</UL>
	</UL>
	<BR><BLINK>Copyright</BLINK> Ы 1997 Компания
	</BODY>
	</HTML>

Рис. 1.25. Вид правой части экрана с фреймами

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

Использование тага <NOFRAMES>

У многих ваших посетителей еще остались броузеры, не умеющие обращаться с фреймами. По этим причинам разумно предоставить доступ к версии ваших основных страниц без фреймов. Если читатель с устаревшим броузером окажется на вашей странице с фреймовой структурой, все, что находится на ней между тагами < NOFRAMES > и </ NOFRAMES >, будет выглядеть отлично - броузер просто проигнорирует фреймы. Вот почему обязательно нужно использовать таги <ВODY></ВОDY>. Возможно, вам придется иначе организовать экран без фреймов.

Можно поместить на страницу с фреймами кнопку No Frames (Без фреймов). Ее назначение очевидно. Такой вариант достаточно разумен и легко осуществим.

На тот случай, если вы неуверенно чувствуете себя при использовании < NOFRAMES >, ниже приведен пример страницы с фреймовой структурой с добавленным в конце разделом < NOFRAMES >.

Пример 1.25 

	<HTML>
	<HEAD>
	<TITLE> Пример фрейма</TITLE>
	</HEAD>
	<FRAMESET COLS="25%, 75%"
	<FRAME SRC="html-pr5-2.htmll">
	<FRAME SRC="html-pr2-3.htmll" NAME="main">
	</FRAMESET>
	<NOFRAMES>
	Вы видите эту страницу броузером не поддерживающим фреймы. 
	Броузер поддерживающий фреймы не видит этот текст.
	</NOFRAMES>
	</HTML>

Рис. 1.26. Вид экрана с фреймами

Имейте в виду, что поддерживающий фреймы броузер проигнорирует все, что находится между тагами < NOFRAMES > и </ NOFRAMES >. И наоборот, не поддерживающий фреймы броузер проигнорирует все, что находится между тегами <FRAMESET> и </FRAMESET>. Код без фреймов можно поместить и в начало, и в конец страницы.

Специфические таги и атрибуты фреймов

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

Таг <FRAMESET>

Таги <FRAMESET> обрамляют текст, описывающий компоновку фреймов. Здесь размещается информация о числе фреймов, их размерах и ориентации (горизонтальной или вертикальной). У тага <FRAMESET> только два возможных атрибута: ROW=, задающий число строк, и СОLS=, задающий число столбцов. Между тагами <FRAMESET> не требуется указания тага <ВОDY>, но его можно поместить между тагами <NOFRAME> в конце фреймовой структуры. Между тагами <FRAMESET> не должно быть никаких тегов или атрибутов, которые обычно используются между тагами <ВОDY>. Единственными тагами, которые могут находиться между тагами <FRAMESET> и </FRAMESET>, являются таги <FRAME>, <FRAMESET> и < NOFRAME>. Это упрощает задачу. В основном все связано с тагами <FRАМЕ> и их атрибутами. Если же вы хотите поэкспериментировать, можно сделать вложенные друг в друга таги <FRAMESET> аналогично тагам <ТАВLЕ>.

Атрибуты ROW= и СОLS= похожи. Имейте в виду, что для каждой строки и столбца, упомянутых в таге <FRAMESET>, должен быть свой набор тагов <FRАМЕ>.

  1. Атрибут ROW=

    Атрибут ROW= тага < FRAMESET > задает число и размер строк на странице. Количество тагов <FRАМЕ> должно соответствовать указанному числу строк. Справа от знака = можно определить размер каждой строки в пикселях, процентах от высоты экрана или в относительных величинах (обычно это указание занять оставшуюся часть места). Не забывайте пользоваться кавычками и запятыми и оставлять пробелы между значениями атрибутов. Например, следующая запись формирует экран, состоящий из трех строк: высота верхней равна 20 пикселей, средней - 80 пикселей, нижней - 20 пикселей:

    Следующий таг < FRAMESET > создает экран, на котором верхняя строка занимает 10% высоты экрана, средняя - 60%, а нижняя - оставшиеся 30%. 

    	<FRAMESET ROW="10%, 60%, 30%->

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

    	< FRAMESET ROW="20, 80, *" >

    А можно сделать так: 

    	< FRAMESET ROW="20, 2*, *" >

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

  2. Атрибут СOLS=

    Столбцы задаются так же, как строки. Для них применимы те же атрибуты.

  3. Таг <FRАМЕ>

    Таг <FRАМЕ> определяет внешний вид и поведение фрейма. Этот таг не имеет закрывающего тага, поскольку в нем ничего не содержится. Вся суть тага <FRАМЕ> в его атрибутах. Их шесть: NАМЕ=, MARGINWITH=, MARGINHEIGHT=, SCROLLING=, NORESIZE= и SRC=.

  4. Атрибут NАМЕ=

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

    	<FRАМЕ SRC="my.htmll" NАМЕ="main">

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

  5. Атрибут МАRGINWITH=

    Атрибут МАRGINWITH = действует аналогично атрибуту таблиц CELLPADDING=. Он задает горизонтальный отступ между содержимым кадра и его границами. Наименьшее значение этого атрибута равно 1. Нельзя указать 0. Можно ничего не присваивать - по умолчанию атрибут равен б.

  6. Атрибут МАRGINHEIGHT=

    Атрибут МАRGINHEIGHT= действует так же, как и МАRGINWITH =. Он задает поля в верхней и нижней части фрейма.

  7. Атрибут SCROLLING=

    Хотите ли вы, чтобы ваши читатели пользовались прокруткой в фрейме? Иногда бывает разумно лишить их этого удовольствия. Возможные варианты: SCROLLING =YES, SCROLLING =NО, SCROLLING =АUТО. SCROLLING =YES означает, что в фрейме всегда будут полосы прокрутки, даже если это не нужно. При задании SCROLLING =NО полос прокрутки не будет, даже если они необходимы. Если документ слишком большой, а вы задали режим без прокрутки, то документ просто будет обрезан. Атрибут SCROLLING =АUТО предоставляет броузеру самому решать, требуются ли полосы прокрутки или нет. Если атрибут SCROLLING= отсутствует, результат будет таким же, как и при задании SCROLLING =АUТО.

  8. Атрибут NORESIZE

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

  9. Атрибут SRС=

    Атрибут SRС= применяется в таге FRАМЕ при разработке фреймовой структуры для того, чтобы определить, какая страница появится в том или ином кадре. Если вы зададите атрибут SRС= не для всех фреймов, у вас возникнут проблемы. Даже если страницы, отображаемые в фрейме, выбираются в соседнем фрейме, вы должны по крайней мере задать для каждого фрейма начальную страницу. Если вы не укажите начальную страницу и URL, фрейм окажется пустым, а результаты могут быть самыми неожиданными - например, ваш броузер начнет выводить все новые и новые окна просмотра.

  10. Атрибут ТАRGЕТ=

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

    Атрибут ТАRGЕТ= можно задавать для нескольких различных тагов. При использовании в таге <ВАSЕ> он направляет все ссылки в определенный целевой фрейм, если в дальнейшем особо не оговорено другое. Можно задать атрибут ТАRGЕТ= в таге <АRЕА> в активном изображении или в таге <FОRМ>. Фреймы полезны для организации форм. Пользователи будут видеть одновременно и форму, и результат своего выбора. Обычно при щелчке мышью кнопки Submit форма исчезает и возникает страница с результатами выбора. Сочетание форм и фреймов может оказаться удобным средством навигации.

"Волшебные" целевые фреймы

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

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

Фрейм "blank"

Если атрибут ТАRGЕТ= ссылается на " blank", то документ всегда будет появляться в новом пустом окне.

Фрейм "self"

Имя "self" указывает на то, что выбранная страница загружается в тот же фрейм, где была активирована ссылка. Если вы щелкнете мышкой на ссылке в фрейме оглавления, выбранная страница окажется в том же самом фрейме. Если вы задали фрейм для всего документа в атрибуте ВАSЕ=, то "self" помогает нейтрализовать ссылку в ВАSЕ=.

Фрейм "раrent"

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

Фрейм "top"

При указании ссылки "tор" документы появляются в отдельном окне вне фрейма. Независимо от вашего желания броузер откроет новое окно просмотра.

Вложенные и множественные кадровые структуры

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

В основном вложенные фреймы действуют так же, как вложенные таблицы. Задайте кадровую структуру, а внутри какого-нибудь фрейма в ней еще одну структуру. Помните, что таг <FRАМЕ> не имеет закрывающего тага. Вы, наверное, заметили, что при работе с фреймами не используются таги <СОLSРАN> и <ROWSРАN>. Их роль играют множественные, или вложенные, фреймы. Задав внутри одной объемлющей фреймовой структуры две независимых подструктуры, можно поместить в левой части экрана столбец из двух, а в правой - из трех фреймов.

Назад | Содержание | Вперед

1.6. Формы

Интерактивные формы позволяют читателям Web-страниц легко общаться с их владельцами. Благодаря простоте использования тага <mailto:> и форм стал возможен двусторонний диалог между владельцами Web-узлов и их читателями. Это открывает для Web-навигаторов увлекательные перспективы и коммерческие возможности. К сожалению, многие старые броузеры не поддерживают таг <mailto:>.

Как сделать так, чтобы ваша форма хорошо смотрелась

Один из способов свести все трудности к минимуму состоит в том, чтобы разместить области ввода и выпадающие меню в левой части страницы, а весь сопроводительный текст - справа. Поскольку ширину областей ввода можно задать с помощыо атрибута SIZЕ=, вы по крайней мере выровняете строки слева, а текст справа будет невыровненным - как в большинстве документов. Такая форма выглядит несколько аккуратнее. Не забудьте оставить промежуток между текстом и областью ввода формы. Другой несколько более сложный способ - разместить элементы формы в ячейки таблицы. Это позволяет разместить сопроводительный текст слева, а области ввода справа. Это показано в примере.

Пример 1.26 

	<HTML>
	<HEAD>
	<TITLE>Коментарии</TITLE>
	</HEAD>
	<BODY>
	<H1>Коментарии</H1>
	<BR>Пожалуйста сообщите нам, что вы думаете о нашем web сайте, компании,
	продукции, или услугах. Если вы сообщите нам свою контактную информацию, 
	у нас будет возможность связаться с вами и ответить на ваши вопросы.</p>
	<FORM METHOD="POST" action="mailto: yourname@your.email.address">
	<H3>Контактная информация</H3>
	<TABLE BORDER="0">
	<TR>
	<TD ALIGN="right"><em>Имя</em></td>
	<TD><input type="text" size="35" name="Name"></td>
	</TR>
	<TR>
	<TD ALIGN="right"><em>Тема</em></td>
	<TD><input type="text" size="35" name="Title"></td>
	</TR>
	<TR>
	<TD ALIGN="right"><em>Компания</em></td>
	<TD><input type="text" size="35" name="Company"></td>
	</TR>
	<TR>
	<TD ALIGN ="right"><em>Адрес</em></td>
	<TD><input type="text" size="35" name="Address"></td>
	</TR>
	<TR>
	<TD ALIGN ="right"><em>Телефон</em></td>
	<TD><input type="text" size="35" name="Telephone"></td>
	</TR>
	<TR>
	<TD ALIGN ="right"><em>Факс</em></td>
	<TD><input type="text" size="35" name="FAX"></td>
	</TR>
	<TR>
	<TD ALIGN ="right"><em>E-mail</em></td>
	<TD><input type="text" size="35" name="Email"></td>
	</TR>
	</TABLE>
	<p> 
	<input type="reset" value="Очистить форму"> </p>
	</FORM>
	</BODY>
	</HTML>

Рис 2.27. Вид формы на экране

Как заставить формы работать

Возможно, это именно тот раздел, которого вы ждете - как сделать так, чтобы формы отсылали на сервер введенные данные. На самом деле заставить форму пересылать данные довольно просто. Главная проблема - понять, куда их пересылать. Формально вы просто пишете в таге <FORM> атрибут АСТION= и задаете ссылку на URL программы, которая может обработать входные данные и сделать с ними что-нибудь полезное.

Назад | Содержание | Вперед

1.7. Апплеты

Собственно и не стоило бы говорить о Java, если бы не возможность использования небольших мобильных программ, которые можно передавать по сети и исполнять на компьютере пользователя. Эти программы в терминологии Java называются апплетами (яблочками). Для встраивания вызовов апплетов в текст НТМL-документа и отведения места для отображаемой апплетом информации в НТМL был введен контейнер АРРLЕТ, который начинается тагом <аррlet> и кончается тагом </аррlet>. В общем виде документ, содержащий ссылки на апплеты будет выглядеть так, как это представлено в примере.

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

Пример 1.27 

	<HTML> 
	<HEAD> 
	<TITLE>Документ со встроенной ссылкой на applet.</TITLE>
	</HEAD> 
	<BODY bgcolor=#FFFFFF> 
	<CENTER> 
	<H1>Документ со встроенным апплетом hello Java</H1> 
	<HR> 
	<APPLET CODE=hello width=200 height=100> 
	Аррlet будет отображаться в этом месте, если Ваш браузер интерпретирует Java 
	</APPLET> 
	<HR> 
	</BODY) 
	</HTML>

В результате ссылки на такой документ сначала будет загружен текст документа. За тем будет обнаружен контейнер аррlet, и произойдет загрузка кода апплета. Файл hello.class должен в этом случае находиться там же, где и НТМL-файл, в котором есть на него ссылка. После приема апплета браузер отведет под него место в своей рабочей области и только после этого начнет его исполнение.

В общем случае контейнер АРРЕЕТ имеет следующий вид: 

	<applet 
	[codebase = codebase url]
	code = applet.class 
	[alt = text] 
	[name= applet name] 
	width = number of pixels
	height = number of pixels
	[align = alignment] 
	[vspace=number of picsels] 
	[hspace=number of pixels] 
	[<param name=param name value=param value>]
	[HTML text] 
	</applet>

Параметр соdebase задает базу для поиска кода апплета, соdе - это имя файла апплета, которое должно иметь расширение сlass, аlt - альтернативный текст - отображается в том случае когда выполнение апплета запрещено, name - имя контейнера аррlet, используется для ссылки на контейнер, widthт - ширина области отображения апплета, height - высота области отображения апплета, аlign - управляет выравниванием области отображения апплета внутри рабочей области браузера, vspase и hspase - указывают на отступ от текста НТМL-документа (вертикальный и горизонтальный, соответственно).

Использование контейнера РАRАМ позволяет передавать параметры внутрь апплета и НТМL-документа. Это аналогично вызову команды с различными аргументами командной строки. Для того, чтобы получить эти параметры внутри апплета, следует использовать метод getParametr ().

Из атрибутов контейнера АРРLЕТ обязательными являются только соdе, width и height Все остальные атрибуты (они заключены в квадратные скобки "[ ]") можно опускать. Большинство систем разработки Java-программ сами генерируют НТМL-документ, точнее его макет, для тестирования Java-апплетов. Так поступают, например, в АDК (Аррlet Development Kit) компании IВМ.

Для получения URL документа, из которого вызван аррlet можно использовать метод getDocumentBase и getCodeBase. Первый определяет базу адреса для документа, в то врeмя как второй определяет базу самого апплета. Применение этих методов необходимо для обращения за данными (текст или графика), которые могут храниться там жe, где и документ аррlet.

Назад | Содержание | Вперед

1.8. Каскадные таблицы стилей (Cascad Style Sheets)

Каскадные таблицы стилей были предложены w3c(WWW Consorcium) в рамках разработки спецификации HTML 3.0. Однако, реализованы в реально действующих навигаторах они были только в 1997 году. Фактически, в качестве применяемой HTML-разметки они стали доступны только с версий Netscape Navigator 4.0 и Internet Explorer 4.0.

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

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

	<style type="text/css">
	<!-- Описание стилей -->
	</style>
Вообще говоря, в Netscape поддерживают еще одну нотацию описание таблиц стилей - нотация JavaScript: 
	<style type="text/javascript">
	<!-- Описание стилей -->
	</style>

При описании таблиц стилей мы будем опираться на документацию Netscape, т.к. - это наиболее популярный браузер Internet. Internet Explorer поддерживает только спецификацию w3c.

Начнем с простого примера. Нужно описать стили отображения текста в параграфе и заглавии документа:

Пример 1.28 

	<html>
	<head>
	style type="text/css">
	p {color:blue; font-family: times; font-size:10pt;}
	h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
	</style>
	</head>
	<body>
	<h1>Test Style Shits in Communicator</h1>
	<p> This is a first part of the document
	</body>
	</html>

То же самое но в JavaScript-нотации будет выглядеть следующим образом:

Пример 1.29 

	<html>
	<head>
	<style type="text/javascript">	tags.p.color="blue";
	tags.p.fontFamily="times";
	tags.p.fontSize="10pt";
	tags.h1.color="black";
	tags.h1.fontSize="12pt";
	tags.h1.fontStyle="Arial";
	tags.h1.textAlign-"center";
	</style>
	</head>
	<body>
	<h1>Test Style Shits in Communicator</h1>
	<p> This is a first part of the document
	</body>
	</html>

Сoзданный таким образом документ будет отображаться следующим образом:

Рис. 1.28. Пример отображения документа с каскадными описателями стилей

Разберем теперь описатели стилей более подробно. Определим область их применения и способы встраивания в документ.

Новые HTML-контейнеры

С появлением таблиц стилей в языке появилось три новых контейнера: STYLE, LINK, SPAN. Вообще говоря LINK - это не новый таг, а новое применение старого тага.

Контейнер STYLE(<style type="...">......</style>) служит для определения таблицы описания стилей. Хотя в спецификации CSS прямо не говорится, в каком контейнере документа следует применять STYLE, тем не менее, в примерах чаще всего приводится этот контейнер внутри контейнера HEAD.

Контейнер LINK в контексте описателей стилей применяется для определения внешнего файла с описаниями стилей для данного документа. Например, внешний файл может содержать следующее описание стилей: 

	/* contents of the external style sheets file  css.html*/
	p {color:blue; font-family: times; font-size:10pt;}
	h1 {color:black; font-size:12pt; font-style:Arial; text-align: center;}
	/* the end of style sheets definition */

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

Пример 1.30 

	<html>
	<head>
	<link REL=STYLESHEET TYPE="text/css" HREF=http://localhost/css.shtml>
	</head>
	<body>
	The body of the document should be here.
	</body>
	</html>

Из данного примера видно, что писание стилей в фале css.html полностью совпадает с описанием в контейнере STYLE. В тексте файла описания стилей не нужно указывать таги контейнера STYLE.

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

Пример 1.31 

	<HTML>
	<!--
	Author:	Paul Khramtsov
	Date:	September 19, 1997
	URL:	http://polyn.kiae.su/Internet/intro.shtmll
	-->
	<HEAD>
	<style TYPE="text/css">
	FS.all { color:red; font-size: 24pt; font-family: times;}
	H1 {color:navy; text-transform: uppercase;font-size: 18pt; 
	font-weight: bold; font-family: times;}
	H2 {color:navy; font-size: 14pt; font-weight: bold; font-style: italic; 
	font-family: times;}
	H3 {color:navy; font-size: 10pt; font-weight: bold; font-family: times;}
	P  {color:navy; font-size: 12pt; font-family: times; text-align: justify}
	P.HELP {color:darkgreen; font-size: 10pt; font-family: times; 
	text-align: justify;}
	P.LEFT {color:navy; font-size: 12pt; font-family: times; text-align: right;}
	</style>
	</HEAD>
	<BODY bgcolor=lightyellow>
	<center>
	<h3>Центр информационных технологий</h3>
	<h1>Информационные Ресурсы Internet</h1>
	<h3>(Учебное пособие для компьютерных непрофессионалов)</h3>
	<h3>Храмцов П.Б.</h2>
	<h3>Москва, 1997</h2>
	<hr>
	</center>
	<p><span class=FS>C</span>обществу глобальных компьютерных сетей 
	Internet в 1995 году исполнилось 25 лет. На настоящий момент - это самый
	большое информационный ресурс мира. Одновре-менно Internet - это самая 
	популярная и массовая компьютерная сеть планеты. По оценкам международного 
	центра координации сетевой деятельности в рамках Internet(Internic-Internet 
	Information Center) на 1997 год в сети насчитывалось несколько десятков 
	миллионов постоянно зарегистрированных компьютеров-серверов, которые 
	откликаются на запросы пользователей 365 дней в году и 24 часа в сутки. Этот 
	огромный информационный ресурс полностью децентрализован и не подчиняется ни 
	одному правительству или крупной финансовой компании мира.
	</BODY>
	</HTML>

В данном примере, контейнер SPAN применен сразу после тага начала параграфа <p>, что позволяет выделить первую букву в отображаемом абзаце:

Рис. 1.29. Эффект от применения контейнера SPAN

Кроме новых контейнеров таблицы описания стилей привнесли еще и новые атрибуты в известные таги.

Новые свойства контейнеров HTML

Перечень новых атрибутов у тагов HTML следует начать с атрибута STYLE. Этот атрибут используется для определения стиля отображаемого контейнера непосредственно внутри тага начала контейнера: 

	<h3 style="line-hieght:24pt; font-weight:bold; color: blue">The blue text
	<h3 style="lineHeight='24pt'; fontWeght='bold'; color='blue'">The blue text
Можно также определить класс стилей и использовать его при помощи атрибута CLASS: 
	<style type="text/css">
	h3.class1 {font-size:12pt;color=blue}
	</style>
	.....
	<h3 class="class1">This is a blue text
В данном случае мы определили класс заголовков третьего уровня, но можно определить класс, который можно будет применять к любым контейнерам, а не только к заголовкам: 
	<style type="text/css">
	all.class1 {font-size:12pt;color=blue}
	</style>
Kроме определения классов существует еще возможность создания поименованных стилей. Поименованный стиль создается как уточнение какого-либо класса: 
	<style type="text/css">
	all.class1 {font-size:12pt;color=blue}
	#C1 { font-size: 20;}
	</style>
	....
	<h3 class="class1">This is a blue text
	<h3 class="class1" id="C1">This is a blue text

Таким образом, атрибуты контейнеров позволяют связать описатели стилей с содержанием контейнеров и управлять формой отображаемой информации.

Свойства контейнеров, управляемые описателями стилей

Первую группу свойств составляют свойства шрифтов:


font-size, font-family, font-weight, font-style.

Вторую группу свойств составляют свойства текста:


line-height, text-decoration, text-transform, text-align, text-indent.

Третью группу свойств составляют свойства блоков текста:


margin-left, margin-right, margin-top, margin-bottom, margin, padding-top, padding-right, padding-bottom, padding-left, paddings, border-top-width, border-bottom-width, border-left-width, border-right-width, border-width, border-style, border-color

Четвертую группу составляют описатели цвета фона и цвета текста:


color, background-image, background-color.

Кроме того, существуют свойства определяющие тип пульки у элементов списка и ряд других свойств элементов HTML-разметки.

Назад | Содержание | Вперед

Контейнеры тела документа НТМL - BODY

Таги тела документа

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

ВОDY

Описание тагов тела документа следует начать с тага ВОDY. В отличии от тага НEАD, таг ВОDY имеет атрибуты:

ID - идентификатор тага. Используется для именования тагов, а также в качестве точки перехода по гипертекстовой ссылке. Данный атрибут имеется практически во всех тагах тела документа. С точки зрения практического использования идентификатора ВОDY в качестве точки перехода по гипертекстовым ссылкам, использование этого атрибута сомнительно, т.к. отображаемая часть документа собственно и начинается с этого тага.

LANG - определяет язык документа в виде двухсимвольного кода ISO-639, за которым следует через точку необязательный код страны в формате ISO-3166. По замыслу разработчиков стандарта языка данный атрибут должен распознаваться программами интерпретации и управлять отображением многоязычных текстов. Однако даже Аrеnа, специально предназначенная для иллюстрации НТМL 3.0, не реализует этой возможности.

СLASS - иерархически организованное имя типа "ADDITION.FIRST". Предназначено для связывания тага текста с определенным стилем отображения. Реально пока не используется.

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

ВАСКGROUND - определяет фон, на котором отображается текст документа. В примере НТМL-документа в качестве фона был использован небольшой графический образ "bgr.gif. 

	<ВОDY ВАСКGROUND="bgr.gif">

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

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

АтрибутЗначение
ВАСКCOLOR=#FFFFFFЦвет фона
ТЕХТ=#0000FFЦвет текста
VLINK=#FF0000Цвет пройденных гипертекстовых ссылок
LINK=#00FF00Цвет гипертекстовой ссылки

В данной таблице строка #ХХХХХХ определяет цвет в терминах RGB в шестнадцатеричной нотации. Так, цвет текста определен как синий, фона - белый, пройденные ссылки красные, а новые ссылки зеленые. Если в качестве атрибутов тага ВОDY указать: 

	<ВОDY ВАСКCOLOR=#FFFFFF  ТЕХТ=#0000FF  VLINK=#FF0000 LINK=#00FF00>

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

Назад | Содержание | Вперед

Активные изображения

Активные изображения (image maps), или изображения, чувствующие щелчки мыши, позволят вам создать на своем узле графические меню произвольной формы. Пользуясь таким меню, читатели смогут путешествовать по всем закоулкам и проспектам вашего Web-узла. Активное изображение - это просто картинка с так называемыми активными областями (hot spots), которые ссылаются на URL других страниц или узлов. Работает такое изображение следующим образом: когда пользователь щелкает мышкой на картинке, определенной как активное изображение с помощью атрибута ISМАР в таге IMG, координаты щелчка передаются на Web-сервер. Сервер ищет в карте (mapfile) активную область, содержащую переданные координаты. Если такая область находится, заданный в карте URL активируется, и броузер пользователя переходит на новую страницу.

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

В зависимости от того, на какие броузеры вы ориентируетесь, вам может понадобиться доступ к каталогу cgi-bin на вашем Web-сервере. Возможно, вам придется попросить у администратора своего Web-сервера разрешения записать туда файлы. Тем не менее, размещать активные изображения очень легко. Процесс их создания может поначалу показаться трудным, но существуют доступные программы, с помощью которых для конструирования таких изображений достаточно указать мышкой границы активных областей и задать каждой из них свой URL.

Где помещать активное изображение: на сервере или у клиента?

Есть два типа активных изображений: на сервере и, новая разновидность, у клиента. Изображения первого типа используют сервер для того, чтобы найти соответствующий данной активной области URL и передать на броузер нужную страницу. Активные изображения, работающие на клиентской машине, задают информацию об активной области на НТМL-странице, так что броузер сам выясняет, какие области являются активными, и запрашивает с сервера требуемую страницу.

Активные изображения, работающие у клиента, имеют несколько преимуществ. Во-первых, страницы с ними можно перенести на другой сервер. Во-вторых, серверу не приходится выполнять лишнюю работу (например, просматривать всю информацию об активных областях), то есть нагрузка на сервер уменьшается. При использовании работающих на сервере активных изображений в каталоге сgi-bin сервера должен быть соответствующий сценарий. По соображениям безопасности многие системные администраторы не любят разрешать людям толпиться вокруг сервера, записывая сценарии в каталог сgi-bin. Если вы арендуете сервер или просто используете место на чьем-то чужом сервере, вам, возможно, придется кого-то долго обхаживать, пока удастся записать сценарии. Недостаток активных изображений, работающих на клиентской машине, состоит в том, что обращаться с ними умеют только броузеры, поддерживающие HTML 3.0. Если у пользователя другой броузер, на вашей странице появится обычное графическое изображение, не чувствующее мышь. Так что у вас есть три возможности: сделать активное изображение на стороне клиента, что может отвратить от вас инертных людей, не спешащих менять свои броузеры; поместить его на сервере, и тогда им смогут воспользоваться практически все; применить оба вида изображений на одной странице. Последний вариант, видимо, наилучший, потому что вы попрактикуетесь в новейших средствах НТМ~ 3.0, и в то же время ваши страницы будут доступны для просмотра старыми броузерами.

Как сделать активное изображение

Процесс создания активного изображения состоит из двух этапов. Сначала вы должны определить области на картинке, которые вы хотите сделать активными, а потом соотнести их со ссылками на другие URL. Активные области задаются перечислением их координат (в пикселях). Все это можно сделать вручную, определив координаты углов активных областей, но гораздо проще воспользоваться какой-нибудь программой, например МарЕdit.

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

Границы активных областей задаются координатами углов прямоугольника и многоугольника или центра и радиуса круга. Эти параметры записываются в карту (МАР-файл)

Закончив создание активного изображения, вы можете сохранить полученный файл в формате NCSA или СЕRN, если оно будет работать на сервере, или в формате СSIМ, если оно функционирует на клиентской машине. Всю остальную работу выполняет программа МарEdit. Она создает карту на сервере или встраивает карту на стороне клиента в указанный вами файл HTML. Если вы решили делать активное изображение у клиента, Мар Edit поставляет данные только для тагов <МАР>. Вам придется самому задать таг изображения с атрибутом USЕМАР и поместить его после тага </МАР>. Не забудьте перед именем карты в атрибуте USЕМАР записать символ # следующим образом: 

	<IMG SRC="mymap.gif " USЕМАР="#sitemap">

Как поместить активное изображение на НТМL-страницу

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

Активные изображения на сервере

Старый испытанный способ создания активных изображений (для HTML 2.0) требует использования атрибута ISМАР в таге IMG. Таг IMG относится к изображению, и его надо поместить между начальным и конечным тагами ссылки на файл-карту. Вам нужно занести в HTML-файл приблизительно такую строку: 

	<А НREF="path/somemap.map"><IMG SRC="path/somemap.map" ISМАР></А>

Атрибут ISМАР показывает броузеру, что данное изображение является активным. Когда в какой-либо его области происходит щелчок мыши, то благодаря атрибуту ISМАР серверу посылается сообщение, содержащее координаты щелчка. Если вы когда-нибудь пробовали водить мышью по активному изображению, вы могли заметить, что строка состояния в нижней части Web- броузера показывает нечто вроде: 

	http:/www.my.com/path/somemap.map?300,20

Числа, стоящие после вопросительного знака, - это координаты указателя. Вы увидите их только в случае использования активных изображений на сервере. Карты изображений на стороне клиента показывают URL или ссылку, ассоциированную с областью карты.

Если вы хотите, чтобы специальная программа на сервере обработала активное изображение, на нее надо сослаться. Это значит, что URL, который показывает строка состояния, может иметь такой вид: 

	http:/www.my.com/cgi-bin/imagemap/path/somemap.map?300,20

В данном случае сервер для обработки активного изображения используется программой под названием imagemap, находящейся в каталоге сgi-bin. Чтобы ваши изображения заработали, вам придется выяснить у своего системного администратора, что в точности нужно серверу. В зависимости от программного обеспечения сервера запись об активных изображениях в НТМL-файле будет выглядеть либо так: 

	<А НREF="somemap.map">
	<IMG SRC="somemap.gif" ISМАР>
	</А>,
либо так 
	<А НREF="sgi-bin/imagemap/somemap.map">
	<IMG SRC="somemap.gif" IS-МАР></А>,

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

Активные изображения у клиента

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

Пример 1.9 

	<HTML>
	<HEAD>
	<TITLE> Товары</TITLE>
	</HEAD>
	<BODY>
	<H1 ALIGN="CENTER">Компания.</H1>
	<HR>
	<p ALIGN="CENTER"><font color="#400040" size="4">[ 
	<a href="news.htmll">Новости</a> |
	<a href="products.htmll">Товары</a> | 
	<a href="servis.htmll">Услуги</a> | 
	<a href="contact.htmll">Контакты</a> |
	<a href="search.html">Поиск</a> ] </font>
	<HR>
	<H3 ALIGN=CENTER>Виды бытовой электроники предлагаемые Компани-ей </H3> 
	<IMG SRC="catal2.jpg" usemap="#catal2" ALIGN=MIDDLE> 
	<map name="catal2">
	<area shape="rect" coords="8,5,128,134" href="tv.htmll">
	<area shape="default" nohref>
	</map>
	<HR>
	<H3 ALIGN="CENTER">Контактная информация</H3>
	<UL>
	<LI>Telephone (123) 12-34-56
	<LI>FAX (123) 12-34-56
	<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106
	<UL TIPE="CIRCLE">Электронная почта<BR>
	<LI>Общая информация: abc@abc.su
	<LI>Продажи: abc@abc.abc.su
	</UL>
	</UL>
	<BR><BLINK>Copyright</BLINK> Ы 1997 Компания
	</BODY>
	</HTML>

Рис. 1.10. Пример активного изображения

Имейте в виду, что если опустить атрибут SНАРЕ=, будет задано SНАРЕ="RЕСТ". Атрибут СООRDS= описывает координаты формы, используя пиксели в качестве единиц измерения. Атрибут USЕМАР= в таге <IMG> действует как ссылка <переход на>. Если перед именем файла карты помещен символ #, то атрибут USЕМАР= считает, что активное изображение находится в файле, описанном в таге <IMG>. Не пугайтесь координат. Точкой отсчета является левый верхний угол.

Активные изображения, работающие и на сервере, и у клиента

Возможно, вы захотите проявить осторожность и сделать изображения, работающими и на сервере, и на машине-клиенте.

После того, как вы создадите активные изображения на сервере и у клиента, соединить их в один HTML-файл нетрудно. Для этого нужно внести в документ HTML ту же запись, которую вы сделали бы для активного изображения на сервере. Не забудьте только добавить в таг IMG атрибут USЕМАР=. Атрибут USЕМАР= имеет более высокий приоритет, чем таг ISМАР, и если броузер поддерживает активные изображения, работающие у клиента, он распознает этот атрибут. Броузер, не знающий о таких изображениях, проигнорирует атрибут USЕМАР=.

Назад | Содержание | Вперед

Изображения в миниатюре

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

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

Назад | Содержание | Вперед

Таги управления разметкой

Заголовки

Заголовки обозначают начала разделов документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тагами <Н1></Н1>, получается большим - это основной заголовок. Если текст окружен тагами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></ Нб>. Некоторые программы, позволяют использовать большее число заголовков, однако реально более трех уровней встречается редко, а более 5 - крайне редко.

Стандарт языка насчитывает 11 атрибутов у тага заглавие. Рассмотрим только АLIGN, т.к. остальные в большинстве программ интерпретаторов не реализованы.

Для разбиения текста на параграфы используется таг <Р> в нем используются те же атрибуты что и заголовках.

В качестве примера рассмотрим создание домашней страницы фирмы по продаже бытовой электроники.

Пример 1.3 

	<HTML>
	<HEAD>
	<TITLE> Главная страница</TITLE>
	</HEAD>
	<BODY>
	Компания.
	Открытое акционерное общество Компания основанная в 1996 году, 
	является одним из ведущих продавцов бытовой электроники в России. Ос-новными 
	направлениями деятельности Компании являются:
	реализация бытовой электроники ведущих фирм мира через сеть магази-нов; 
	создание сервисных центров по обслуживанию бытовой электроники; 
	Компания ищет агентов по сбыту бытовой электроники.
	Контактная информация
	Telephone (123) 123-34-56
	FAX (123) 123-34-56
	Почтовый адрес 123456 г. Город, ул Лесная, 106
	Электронная почта
	Общая информация: abc@abc.su
	Продажи: abc@abc.abc.su
	Copyright Ы 1997 Компания
	</BODY>
	</HTML>

Рис. 1.3. Пример текста без разметки

Броузер покажет нам этот HTML-документ в виде непрерывного текста.

Атрибут АLIGN. Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам.

Следующая таблица определяет возможные значения атрибута АLIGN:

ЗначениеОписание применения
LeftВыравнивание по левому краю
Right Выравнивание по правому краю
JustifyВыравнивание по левому и правому краям
Сеnter Центрирование

Значение Justify реализовано не во всех программах интерпретации.

Выравнивание по левому краю

По умолчанию текст HTML выравнивается по левому краю и не выравнивается по правому, то есть начало строк находится на одном уровне, а концы на разных. Чаще всего, получающийся при этом текст с равными промежутками между словами выглядит лучше. Поскольку выравнивание по левому краю задается автоматически, атрибут АLIGN=LEFT можно опустить.

Выравнивание по правому краю

Текст, выровненный по правому краю и не выровненный по левому - концы строк находятся на одном уровне, а начало на разных, - часто применяется на практике, хотя бы с целью создать оригинальный дизайн. Этот эффект достигается заданием атрибута АLIGN=RIGHT в обычных тагах, например в таге <Р>.

Центрирование текста и графики

Есть несколько способов отцентрировать текст или графику. В спецификациях HTML 3.0 предлагается пользоваться тагом <АLIGN=СЕNТЕR>. Однако этот таг применим не для всех объектов HTML-страницы, поэтому Netscape добавил таг <СЕNТЕR>, который центрирует любые объекты и поддерживается броузерами Netscape Navigator, Microsoft Explorer и некоторыми другими. К тагу <СЕNТЕR> нужно относиться с осторожностью. Какой-нибудь броузер может его вообще проигнорировать, и на странице окажется выровненный по левому краю текст.

Оборачивание

С помощью атрибута ALIGN= вы можете <обернуть> текст вокруг графического объекта. Для этого поместите таг <IMG SRC="/путь/файл.gif"> в том месте, где должен быть графический объект, и добавьте атрибут ALIGN=LEFT, ALIGN=RIGHT или АLIGN=CENTER. Кроме того, с помощью атрибутов НSPAСЕ= и VSPАСЕ= (они описываются ниже ) задается ширина горизонтальных и вертикальных полей, отделяющих изображение от текста. Можно также создать рамку вокруг картинки или обрамление таблицы текстом.

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

ЗначениеНазначение
left Пропустить картинку, расположенную у левого края листа
right Пропустить картинку или таблицу, расположенную у правого края листа
аll Прервать отображение текста перед картинкой или таблицей и продолжить ниже

В атрибуте СLEAR можно указать и численные значения: 

	<Р СLEAR="100 рiх">

Данная запись означает пустое горизонтальное поле высотой в 100 пиксельных строк.

Расставим таги заголовков с атрибутами в нашем примере.

Пример 1.4 

	<HTML>
	<HEAD>
	<TITLE> Главная страница</TITLE>
	</HEAD>
	<BODY>
	<H1 ALIGN=CENTER>Компания.</H1>
	<H3 ALIGN=LEFT>Открытое акционерное общество Компания основан-ная в 1996 
	году, является одним из ведущих поставщиков   бытовой электроники в 
	России.</H3>
	<H4 ALIGN=RIGHT>Основными 
	направлениями деятельности Компании являются:
	реализация бытовой электроники ведущих фирм мира через сеть ма-газинов; 
	создание сервисных центров по обслуживанию бытовой электроники; </H4>
	<H3> Компания ищет агентов по сбыту  бытовой электроники.</H3>
	<H5 ALIGN=CENTER>Контактная информация
	Telephone (123) 123-34-56
	FAX (123) 123-34-56
	Почтовый адрес 123456 г. Город, ул Лесная, 106
	Электронная почта
	Общая информация: abc@abc.su
	Продажи: abc@abc.abc.su
	Copyright Ы 1997 Компания</H5>
	</BODY>
	</HTML>

Рис. 1.4. Текст с использованием тагов заголовков

Результат мы можем видеть на экране.

Назад | Содержание | Вперед

Таг <ВR>

Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. В этом режиме существующие в тексте концы строк игнорируются. Иногда для большей выразительности требуется начать печать с новой строки. Для этой цели и используется таг ВR. Атрибут СLЕАR= в таге <ВR> используется для того, чтобы остановить в указанной вами точке обтекание текстом объекта и затем продолжить текст в пустой области за объектом. Продолжающийся за объектом текст выравнивается в соответствии со значениями LEFT, RIGHT или АLL атрибута СLЕАR=:

<BR СLЕАR =LЕFТ> Текст будет продолжен, начиная с ближайшего пустого левого поля
<BR СLЕАR =RIGHT> Текст будет продолжен, начиная с ближайшего пустого правого поля
<BR СLЕАR=АLL> Текст будет продолжен, как только и левое, и правое поля окажутся пустыми

Таг <NOВR>

Таг <NОВR> (Nо Вrеаk, без обрыва) дает команду броузеру отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в таги <NОВR>, не поместится на экране, броузер добавит в нижней части окна документа горизонтальную полосу прокрутки. Если вы хотите оборвать строку в определенном месте, поставьте там таг <ВR>.

Назад | Содержание | Вперед

Таги управления отображением символов

Все эти таги можно разбить на два класса: таги, управляющие формой отображения (font style), и таги, характеризующие тип информации (information type). Часто внешне разные таги при отображении дают одинаковый результат. Это зависит главным образом от настроек интерпретирующей программы и вкусов пользователя.

Таги, управляющие формой отображения

Курсив, усиление, подчеркивание, верхний индекс, нижний индекс, шрифт большой, маленький, красный, синий, различные комбинации - все это делает страницы интереснее и функциональнее. Microsoft Internet Explorer и Netscape Navigator позволяют определить шрифт с помощью атрибута FАСЕ=. Теперь можно объединять на одной странице несколько видов шрифтов, вне зависимости от того, какой из них задан по умолчанию в броузере пользователя.

Верхние и нижние индексы [НТМL 3.0]

С помощью тагов <SUР> и <SUВ> можно задавать верхние и нижние индексы, необходимые для записи торговых знаков, символов копирайта, ссылок и сносок. Рассматриваемые таги позволяют создать внутри текстовой области верхние или нижние индексы любого размера. Чтобы они казались меньше окружающего текста, можно использовать таги <SUР> и <SUВ> с атрибутом FONT SIZE=.

Атрибут SIZE=

Атрибут SIZЕ= тага <FОNТ> позволяет задавать размер текста в данной области. Если вы не пользуетесь тагом <ВАSЕFОNТ SIZЕ=n> для задания определенного размера шрифта на всей странице, то по умолчанию принимается 3.

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

Таги <ВIG> и <SMALL>

Текст, расположенный между тагами <ВIG></ВIG> или <SMALL></SMALL>, будет соответственно больше

Атрибут СОLОR=хх

Если вы хотите сделать свою страницу более красочной, то можете воспользоваться атрибутом СОLОR= в таге FONТ, и тогда единственным ограничением будет цветовая палитра на компьютере пользователя. Пока только самые популярные броузеры отображают цвет шрифта.

Пользоваться тагом <FONТ СОLОR=> для смены цвета шрифта, так же как и большинством тагов НТМL, очень просто. Заключите текст в таги <FONТ СОLОR= RED></FONТ>.

Таги, управляющие формой отображения

Таг Значение
<I>.....</I> Курсив (Italic)
<B>...</B> Усиление ВОLD)
<ТТ>... </TТ> Телетайп
<U>. </U> Подчеркивание
<S>...</S> Перечеркнутый текст
< BIG >... </ BIG > Увеличенный фонт
< SMALL >...</ SMALL > Уменьшенный фонт
< SUB >...</ SUB > Подстрочные символы
< SUЗ >... </ SUР > Надстрочные символы

Назад | Содержание | Вперед

Таги, характеризующие тип информации

ТагЗначение
<ЕМ>... </ЕМ> Типографское усиление
<СIТЕ>...</СIТЕ> Цитирование
< STRONG >.</ STRONG > Усиление
<СODE>... </СОDE> Отображает примеры кода (например, коды программ)
<SАМР>... </SАМР> Последовательность литералов
<КВD>... </КВD> Пример ввода символов с клавиатуры -
<VAR>...</VAR> Переменная
<DFN>... </DFN> Определение
<Q>- </Q> Текст, заключенный в скобки

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

Пример 1.5. Использование тагов, управляющих формой отображения. 

	<HTML>
	<HEAD>
	<TITLE> Главная страница</TITLE>
	</HEAD>
	<BODY>
	<H1 ALIGN=CENTER>Компания.</H1>
	<H3 ALIGN=LEFT><I>Открытое акционерное общество Компания осно-ванная в
 	1996 году, является одним из ведущих поставщиков  бытовой электроники в 
	России.</I></H3>
	<H3 ALIGN=RIGHT><B>Основными направлениями деятельности Компании 
	являются</B>:
	реализация бытовой электроники ведущих фирм мира через сеть магазинов; 
	создание сервисных центров по обслуживанию бытовой электроники;</H3>
	<H3><U> Компания ищет агентов по сбыту  бытовой  электроники.</U></H3>
	<H5 ALIGN=CENTER><TT>Контактная информация</TT>
	<DL>Telephone (123) 123-34-56
	<DL>FAX (123) 123-34-56
	<DL>Почтовый адрес 123456 г. Город, ул Лесная, 106
	Электронная почта
	<DL>Общая информация: abc@abc.su
	<DL>Продажи: abc@abc.abc.su</DL>
	Copyright Ы 1997 Компания</H5>
	</BODY>
	</HTML>

Рис. 1.5. Таги отображения стилей текста

Таг <DL>

Использование тага списка (Definition List: <DL>) напоминает применение отступов в обычных текстовых редакторах. Таг <DL> был создан для форматирования текста, определяющего какой-то термин. Определяемый термин записывается на одной строке, а его определение на следующей, с небольшим отступом вправо. Таг <DL> позволяет создавать отдельные абзацы с отступом без нумерации или маркеров. Отступ делается от левого края. Если у вас на странице несколько тагов <DL>, то текст постепенно сдвигается все больше вправо. В конце определения поместите закрывающий таг </DL>. Помните, что таг <DL> сдвигает только левую границу абзаца.

Назад | Содержание | Вперед

Таг <ВLОСKQUOTE>

Таг добавляет поля слева и справа от текста. Это полезный таг, поскольку он позволяет расположить текст компактно в центре страницы. При использовании < ВLОСKQUOTE > несколько раз текст все больше сжимается к центру.

Microsoft Internet Explorer и Netscape Navigator допускают применение атрибутов LEFTMARGIN=n и ТОРМАRGIN =n в таге <ВОDY>. Атрибут LEFTMARGIN = задает левое поле для всей страницы. ТОРМАRGIN= определяет верхнее поле. Число n показывает ширину поля в пикселях. Например, таг < ВОDY LEFTMARGIN ="40"> создаст на всей странице левое поле шириной 40 пикселей. При n, равном 0, левое поле отсутствует.

Табуляция

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

Самый простой - записать таг <ТАВ IDENT=n>, где n определяет число еn-пробелов перед новым абзацем. Еn-пробел - это типографская единица измерения, приблизительно равная ширине буквы n в том шрифте, который вы используете. Таким образом, таг <ТАВ IDENT=4> задает символ табуляции шириной в четыре еn-пробела.

Если вы хотите в нескольких местах применить символ табуляции заданной величины, то в том месте, где вы задаете его размер, поместите таг <ТАВ> с атрибутом ID=, например, таким образом: 

	<ТАВ ID="tabone" >

Теперь в любом месте страницы достаточно написать <ТАВ ТО="ТАВОNЕ">, и символы табуляции станут равными ТАВОNЕ. Соответственно можно аналогичным образом создать ТАВТWО, ТАВТНRЕЕ, ТАВFОUR и т. д.

Чтобы создать более сложный дизайн, можно применить с тагом <ТАВ> атрибут ALIGN=. При задании АLIGN=LЕFТ или ALIGN=RIGHT текст, следующий за тагом <ТАВ> (вплоть до ближайшего обрыва строки или тага), будет выровнен по левому или правому краю соответственно. При задании АLIGN=СЕNTER текст центрируется относительно табулятора на задаваемое тагом <ТАВ> число еn-пробелов.

Таг <ТАВ> можно применять для размещения и текста, и графики.

Назад | Содержание | Вперед

Списки

Списки являются важным средством структурирования текста и применяются во всех языках разметки. В НТМL имеются следующие виды списков: ненумерованный список (неупорядоченный), нумерованный список (упорядоченный) и список определений. Таги для ненумерованных (Unordered Lists <UL>) и нумерованных списков (Ordered Lists <OL>) - это основа HTML. HTML 3.0 добавляет несколько атрибутов к тагам списков для выбора разных типов маркеров в ненумерованных списках и разных схем нумерации в нумерованных. Можно включать такие атрибуты в сами таги <LI> (List Item), чтобы сменить тип маркера в середине списка. После появления нового атрибута все последующие маркеры в списке будут иметь такой же вид.

Таг <UL>

Ненумерованный список. Ненумерованный список предназначен для создания текста типа:

Записывается данный список в виде следующей последовательности: 

	 <UL>    
	 <LI> первый элемент списка    
	 <LI> второй элемент списка    
	 <LI> третий элемент списка    
	 </UL>

Таги <UL> и </UL> - это таги начала и конца ненумерованного списка, таг <LI> (List Item) задает таг элемента списка. В дополнение к этим тагам существует таг, позволяющий именовать списки - LН (List Header). Приведем пример отображения ненумерованного списка следующего вида:

Атрибуты маркеров в ненумерованном списке

Если вы не желаете применять одни и те же маркеры на разных уровнях вложенности, то используйте атрибут ТYРЕ=. Вы можете задать любой тип маркера в произвольном месте списка. Можно даже смешивать разные типы маркеров в одном списке. Ниже перечислены таги с атрибутами стандартных маркеров


<UL TYPE =DISK> Таг создает сплошные маркеры такого типа, как в списках первого уровня по умолчанию
<UL TYPE =CIRCLE> Таг создает маркеры в виде окружностей
<UL TYPE =SQUARE> Таг создает сплошные квадратные маркеры

В HTML 3.0 вы можете вместо обычного маркера поместить GIF или специальный символ.

Атрибут РLАN=

Атрибут РLAN= создает ненумерованные списки без маркеров. Разумеется, простейший способ это сделать - воспользоваться списком определений, но если вы все же захотите вставить в список один-два маркера, то лучше применяйте данный атрибут.

Атрибут SRС=

Атрибут SRС= используется для того, чтобы задать GIF-файл вместо обычного маркера GIF, наиболее употребительный в HTML графический формат. Вместо того чтобы помещать GIF перед строкой с тегом <ВR> в конце, вы можете создать собственные изящные маркеры и затем использовать их в списке. В этом случае вы получите все преимущества ненумерованного списка и вдобавок симпатичные GIF-картинки в качестве маркеров. Атрибут SRC= можно задать в таге <UL>, определив сразу все маркеры списка, а можно указать разные GIF для разных пунктов списка, помещая атрибут SRC= в каждом таге <LI>. В любом случае для того чтобы атрибут SRС= работал с тагом <UL>, нужно задать атрибут РLAN=.

Атрибут SRС= для тагов списков очень нужен Web-разработчикам и способен сделать ваши страницы чрезвычайно привлекательными. Вместе с тем, его некорректное употребление приводит к исключительно уродливым страницам.

Атрибут DINGВАТ= [НТМL 3.0]

Атрибут DINGВАТ= позволяет создавать специальные типографские символы dingbats, поддерживаемые броузером. Эти символы имеют вид картинок, которые используются в качестве маркеров в списках. Приведем список стандартных dingbats: 

	Text, Audio, Folder, Disc drive, Form, Home, Next.

Для задания dingsbat нужно указать его имя в таге <LI>. Например, для того чтобы задать home (домик), записывайте таг <LI DINGBAT="home" >.

Dingsbat можно также применять с тагом заголовка.

Таг <OL>

Нумерованные списки. Таг <OL> вместе с атрибутом ТYРЕ= в HTML 3.0 позволяет создать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке.


<ОL ТYРЕ=1> Таг создает список с нумерацией в формате 1., 2., 3., 4. и т. д.
<ОL ТYРЕ=A> Таг создает список с нумерацией в формате А., В., С., В. и т. д.
<ОL ТYРЕ=a> Таг создает список с нумерацией в формате а., b., с., d. и т. д.
<ОL ТYРЕ=I> Таг создает список с нумерацией в формате I., II., III., IV. и т. д.

Пример 1.6. Использования тагов различных списков. 

	<HTML>
	<HEAD>
	<TITLE> Главная страница</TITLE>
	</HEAD>
	<BODY>
	<H1 ALIGN=CENTER>Компания.</H1>
	<HR>
	<H3 ALIGN=LEFT><I>Открытое акционерное общество Компания осно-ванная в 
	1996 году, является одним из ведущих поставщиков  бытовой электроники в 
	России.</I></H3>
	<HR>
	<H3>Основными направлениями деятельности Компании являются:
	<OL>
	<LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов; 
	<LI>создание сервисных центров по обслуживанию бытовой 
	электроники.</H3>
	</OL>
	<HR>
	<H3><U><FONT COLOR=RED> Компания ищет агентов по сбыту  бытовой 
	электроники.</FONT></U></H3>
	<H5 ALIGN=CENTER>Контактная информация</H5>
	<UL>
	<LI>Telephone (123) 12-34-56
	<LI>FAX (123) 12-34-56
	<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106
	<UL TIPE=CIRCLE>Электронная почта<BR>
	<LI>Общая информация: abc@abc.su
	<LI>Продажи: abc@abc.abc.su</UL></UL>
	<BR><BLINK>Copyright</BLINK> Ы 1997 Компания
	</BODY>
	</HTML>

Рис. 1.6.

Назад | Содержание | Вперед

2. Управление просмотром страниц Web-узла. JavaScript

Современные гипертекстовые информационные системы условно можно представить в виде совокупности нескольких компонентов: системы хранения гипертекстовых объектов, системы отображения гипертекстовых объектов, системы подготовки гипертекстовых объектов и системы программирования просмотра совокупности гипертекстовых объектов. С этой точки зрения технология World Wide Web только к 1996 году получила законченный, функционально полный вид. Первыми были разработаны системы хранения и просмотра (1989-1991 г.г.), которые продолжают развиваться и в настоящее время. После 1990 года стали появляться первые системы подготовки документов. Наконец, в 1995 году были предложены первые языки управления сценариями просмотра.

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

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

Программы просмотра гипертекстовых страниц традиционно называют скриптами (scripts) по аналогии с исполняемыми файлами, написанными для командных интерпретаторов типа sh. Собственно как это было и раньше в локальных системах, в программировании просмотра гипертекстовых документов World Wide Web существуют два подхода: создание интерпретируемых программой просмотра скриптов или компиляция байт-кода. Первый подход следует традиции World Wide Web, согласно которой для разработки гипертекстовой страницы нужен только обычный текстовый редактор и сам гипертекстовый документ должен легко читаться человеком-оператором. Второй подход позволяет повысить эффективность исполнения программы и защищенность кода от несанкционированных модификаций. Как первый, так и второй способ опираются на объектно-ориентированный подход к программированию. По поводу байт-кодов или мобильных кодов, как их еще называют, написано в контексте технологии программирования Java достаточно много, поэтому сосредоточим свое внимание на скриптах, а точнее на скриптах, написанных на языке JavaScript.

Назад | Содержание | Вперед

2.1. Модель объектов JavaScript - объекты Navigator'а

Идея JavaScript очень проста. Все операции, которые можно исполнять в программе на JavaScript, описывают действия над хорошо известными и понятными объектами, которыми являются элементы рабочей области программы Netscape Navigator и контейнеры языка HTML. Собственно объектная ориентированность JavaScript на этом и кончается. Есть только объекты с набором свойств и набор функций над объектами. Последние называются методами. Кроме методов существуют и другие функции, которые больше похожи на функции из традиционных языков программирования и позволяют работать со стандартными математическими типами или управлять процессом выполнения программы. Еще в JavaScript есть события - аналог программных прерываний. Эти события также ориентированы на работу в World Wide Web, например, загрузка страницы в рабочую область Navigator'a или выбор гипертекстовой ссылки. Используя события, автор гипертекстовой страницы и программы ее отображающей может организовать просмотр динамических объектов, например, бегущая строка, или управление многооконным интерфейсом.

Описание иерархии классов

Все встроенные объекты JavaScript берут свое начало от рабочей области Netscape, и их можно представить в виде следующей иерархии:

Кроме этих классов объектов пользователь может создавать и свои собственные. Но обычно большинство программ используют эту систему классов и не создают новых.

Назад | Содержание | Вперед

2.2. Методы объектов и свойства объектов. Управление потоком вычислений

Каждый из этих классов имеет функции управления объектами класса - методы. Самыми главными их этих методов являются те, которые позволяют переназначать значения объектов. Делается это обычно по операции присваивания. Вообще, все типы операторов, которые поддерживаются обычными языками программирования, реализованы JavaScript (+,-,*, /, %, >>,<<, +=, -=, ...). При этом оператор сложения "+" при работе со строками означает конкатенацию последних, т.е. добавление в конец строки новую строку: 

	s = "string1"+"string2"

Кроме операций с числами и описаний стандартных классов в JavaScript есть команды управления потоком вычислений: 

	var kuku = "kuku"

Тип переменной определяется по присвоенному ей значению.

Перечисленные здесь операторы не представляют полного перечня операторов JavaScript, но их вполне достаточно для выполнения практических занятий.

Назад | Содержание | Вперед

2.3. События

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

Не будем перечислять все события, но упомянем о наиболее часто используемых:

Появление Netscape Navigator 3.0 и новой версии JavaScript 1.1 заставляет продолжить обзор возможностей управления сценариями просмотра Website, который был опубликован в предыдущем выпуске "Открытых Систем Сегодня" (CW N 46, 1996). В новой версии языка были введены: возможность взаимодействия JavaScript и Java, определение установленных plug-ins, определены новые типы объектов (Area, Function, Image) и ряд других особенностей, которые по мнению разработчиков должны повысить мощь программирования на JavaScript.

Назад | Содержание | Вперед

2.4. Массивы

Первый тип новых объектов, которые мы рассмотрим, являются массивы. Тип "Array" введен в JavaScript 1.1 для возможности манипулирования самыми разными объектами, которые отображаются Navigator'ом. Это - список всех гипертекстовых ссылок данной страницы Website, список всех картинок на данной странице, список всех applet'ов данной страницы, список всех элементов формы и т.п. Пользователь может создать и свой собственный массив, используя конструктор Array(). Делается это следующим образом: 

	new_array = new Array()
	new_array5 = new Array(5)
	colors = new Array ("red","white","blue")

Размерность массива может динамически изменяться. Можно сначала определить массив, а потом присвоить одному из его элементов значение. Как только это значение будет присвоено, изменится и размерность массива: 

	colors = new Array()
	colors[5] = "red"

В данном случае массив будет состоять из 6 элементов, т.к. первым элементом массива считается элемент с индексом 0. Для массивов определены три метода: join, reverse, sort. Join объединяет элементы массива в строку символов, в качестве аргумента в этом методе задается разделитель: 

	colors = new Array("red","white","blue")
	string = acolors.join("+")

В результате выполнения присваивания значения строке символов string мы получим следующую строку: 

	string = "red + white + blue"

Другой метод, reverse, изменяет порядок элементов массива на обратный, а метод sort отсортировывает их в порядке возрастания. У массивов есть два свойства: length и prototype. Length определяет число элементов массива. Если нужно выполнить некоторую рутинную операцию над всеми элементами массива, то можно воспользоваться циклом типа: 

	color = new Array("red","white","blue")
	n = 0
	while(n != colors.length)
	{.... операторы тела цикла ...}

Свойство prototype позволяет добавить свойства к объектам массива. Однако наиболее часто, в программе на JavaScript используются встроенные массивы, главным образом графические образы (Images) и гипертекстовые ссылки (Links).

Назад | Содержание | Вперед

2.5. Графика

До Navigator 3.0 в JavaScript использовались только встроенные объекты типа Image. В новой версии языка появился конструктор для этого типа объектов: 

	new_image = new Image()
	new_image = new Image (width,height)

Часто для целей создания мультипликации создают массивы графических объектов, которые потом прокручивают один за другим: 

	img_array = new Array()
	img_array[0] = new Image(50,100)
	img_array[1] = new Image(50,100)
	....
	img_array[99] = new Image(50,100)

У объекта Image существует 10 свойств, из которых, пожалуй, самым важным является src. Так, для присваивания конкретных картинок элементам массива img_array следует воспользоваться следующей последовательностью команд: 

	img_array[0].src = "image1.gif"
	img_array[1].src = "image2.gif"
	...
	img_array[99].src = "image100.gif"

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

	<img name=car src=car.gif> <--- Встроенный в документ объект
	document.car.src = "car1.gif"
	 
	<form name=kuku>
	<img name=car src=car.gif>   <-- Встроенный в форму документ.
	</form>
	document.kuku.car.src = "car1.gif"

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

	document.images[1].src = "car1.gif"

Расширяя наш пример с массивом Image построим теперь документ, в котором будет встроена мультипликация, определенная нашим массивом:

Пример 2.1 

	<HTML>
	<HEAD>
	<SCRIPT>
	function multi_pulti()
	{
	img_array = new Array()
	img_array[0] = new Image(50,100)
	....
	img_array[99] = new Image(50,100)
	img_array[0].src = "image1.gif"
	...
	img_array[99].src = "image100.gif"
	n=0
	while(n==0)
	{
	document.images[0].src = img_array[0].src
	...
	}
	}
	</SCRIPT>
	</head>
	<body onLoad="multi_pulti()">
	<img src=image1.gif>
	</body>
	</html>

Довольно часто используют не мультипликацию, а выбор картинки через OPTION, другой новый объект JavaScript. При этом можно через поле формы SELECT менять не только саму картинку, но и гипертекстовую ссылку, которая может быть связана с этой картинкой. На гипертекстовую ссылку также можно ссылаться по индексу: 

	document.links[index].href = kuku.htmll

Данный прием оправдан и с точки зрения интерфейса навигатора. При использовании такого сорта массивов ссылок не требуется их длительное перечисление и листание страницы в рабочей области навигатора - можно просто выбрать ссылку из "выпадающего" меню. Другой способ для сокращения числа нажатий на клавиши - использование событий. В том же объекте OPTION можно использовать событие onChange, что делает необязательным нажатие кнопок типа submit. В этом случае достаточно будет просто выбрать альтернативу и перейти к новой странице сразу после выбора.

Назад | Содержание | Вперед

2.6. Стеки гипертекстовых ссылок

Не обошли своим внимание авторы JavaScript и стеки гипертекстовых ссылок. В язык теперь введен новый тип объектов типа Area. Area - это элемент контейнера MAP, который определяет client-site imagemap. Собственно, главное достоинство такого объекта состоит в том, что гипертекстовые ссылки, которые определены в AREA, стали доступны для переопределения. Они появляются в массиве обычных ссылок страницы, и можно как получить значение URL, так и переопределить его. К объекту AREA нельзя обратиться по имени. Можно использовать только индекс массива гипертекстовых ссылок документа.

В контексте стека гипертекстовых ссылок интересно рассмотреть еще одну возможность JavaScript, связанную с переходом по гипертекстовой ссылке вообще. В обычном случае параметр HREF контейнера A должен иметь какое-нибудь значение. Если, например, по событию onClick необходимо открыть новое окно и в старом сохранить отображенный документ, то его URL следует указывать в качестве значения HREF. В противном случае, в старое окно будет загружена пустая страница, если HREF=" ". В новой версии JavaScript введена функция void. Точнее тип void, который означает отсутствие какого-либо значения. Если нам необходимо выполнить некоторые действия при выборе гипертекстовой ссылки, но при этом не перегружать текущие страницы, то в параметре HREF можно указать конструкцию: 

	<A HREF="javascript:void(0)">kuku</A>

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

Назад | Содержание | Вперед

2.7. Фреймы и окна

При работе с фреймами и окнами в предыдущих версиях JavaScript постоянно приходилось отслеживать последовательность открытия окон и фреймов, для того, чтобы аккуратно их потом закрывать. На некоторых неточностях работы с окнами были основаны так называемые mail-bombs. Суть этих "подарков" заключалась в том, что если пользователь по почте принимает документ, который состоит только из одной команды: 

	window.close()

то система не спрашивая пользователя закрывала текущее окно, а в этот момент таким окном является окно электронной почты. Теперь, перед тем как что-либо закрыть, система будет спрашивать разрешения. Правда, опять не всегда. Если в момент получения команды на закрытие окна на экране только одно окно Navgator, то система его закроет без каких-либо комментариев.

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

	window.opener.[method]

Например, если требуется закрыть окно-предшественник, то можно просто выполнить метод close: 

	window.opener.close()

Точно таким же способом можно изменить содержание этого окна при помощи методов write или writeln. Можно менять и другие свойства объектов в окне предшественнике. Следующий пример взят из дополнений к спецификации JavaScript: 

	window.opener.document.bgColor='cyan'

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

	window.opener= new_window
	window.opener = null

Первый пример переназначает для текущего окна окно-предшественник, в то время как второй вообще защищает предшественника от каких-либо действий. Все, что было сказано об окнах, распространяется и на фреймы, которые являются просто частным случаем окна. При работе с фреймами часто фрейм может быть порожден путем разбиения другого фрейма на части. Если при этом потребуется обратиться к окну-предшественнику фрейма-предшественника, то свойство opener в этом случае незаменимо. Разработчики языка следуют за пожеланиями авторов Websit'ов и практикой применения JavaScrip, которая на начальной стадии разработки языка не была столь очевидной. Кроме обращения к различным свойствам окон и фреймов разработчики расширили действие методов blur и focus с фреймов до окон. Теперь не только фрейм, но и окно может быть сделано текущем с использованием метода focus или, наоборот, переведено в фон при помощи метода blur. В ряде случаев, при порождении нескольких страниц, например, обращение к этим функциям бывает довольно полезным.

Назад | Содержание | Вперед

2.8. Наследование кода скриптов различными страницами

Отсутствие какого-либо наследования между различными страницами Website заставляло разработчиков перетаскивать из одной страницы в другую довольно большое количество часто используемых функций и переменных. Разговоры о том, что было бы неплохо получить возможность доступа к глобальным ресурсам или возможность определять такие глобальные ресурсы, ведутся с самого момента появления JavaScript. К сожалению, стройного логичного механизма передачи параметров, функций и переменных от одного окна или фрейма другому нет и в JavaScript 1.1. Однако, продвижение в этом направлении есть.

У контейнера SCRIPT появился атрибут SRC. Это дает возможность авторам строить своеобразную библиотеку функций, к которым можно обращаться из любой страницы, в которой будет ссылка на такую библиотеку. При этом вовсе необязательно размещать саму библиотеку на том же сервере, где размещены и гипертекстовые страницы Website. Можно использовать и чужие функции, написанные кем-либо из ветеранов программирования на JavaScript на другом конце Земли. В атрибуте SRC используется обычный URL. Внутри файла скриптов не используются теги SCRIPT. Это обычный файл с использованием определений функций и переменных. Естественно, что использование чужих скриптов может обернуться не только полезными приобретениями, но и непредсказуемыми проблемами. Для обычных пользователей страниц Website подкачка большого количества скриптов может стать просто дополнительным источником затрат. Наиболее вероятным случаем может стать использование одной-двух функций из библиотеки на одной странице, а качать придется всю библиотеку. Другой новой возможностью работы с функциями стало введение нового объекта Function. Объект Function порождается конструктором Function: 

	new_Function = new Function(arg1,arg2,...,argn, function_body)

Главное отличие от обычного декларирования функции заключается в том, что в данном случае порождена переменная new_Function, с которой можно работать, как с любым другим объектом. При обычном переделении функции такой переменной не порождается. Как любой объект Function имеет свои свойства, но не имеет методов. В качестве свойств функции выступают аргументы и возможность назначения новых свойств через prototype. В заключении разговора о функциях и наследовании хочется еще раз обратить внимание на свойство opener окон и фреймов. Это свойство можно использовать при обращении к объектам страницы-родителя, что позволяет компенсировать отсутствие наследования и глобальных переменных в JavaScript.

Назад | Содержание | Вперед

2.9. Java, JavaScript и Plug-ins

В новой версии языка есть возможность организовать взаимодействие между Java-applet'ами и JavaScrip-скриптами. Достигается это за счет использования атрибута MAYSCRIPT в контейнере APPLET. Собственно в JavaScript определен объект типа APPLET, к которому можно обращаться либо по имени, либо по индексу в массиве applet'ов. У этого объекта есть только одно свойство - имя. Ни какие-либо другие свойства или методы для данного типа объектов не определены. Сами детали взаимодействия applet'ов и скриптов лучше всего обсуждать в рамках программирования Java applet'ов, поэтому здесь мы эти особенности опустим.

Кроме applet'ов JavaScript позволяет работать и с Plug-ins. Последние представляют из себя массив соответствующего типа, для которого определен ряд свойств. Используя эти свойства можно определить установленные plig-ins и их соответствия MIME-типам. Назначить plug-ins или манипулировать ими нельзя.

Назад | Содержание | Вперед

2.10. Встраивание в HTML-документ

Для встраивания скриптов в тело HTML-документа используется контейнер SCRIPT. Не все программы просмотра способны распознавать и исполнять скрипты, поэтому само тело скрипта помещается в контейнер комментария. Для определенности рассмотрим небольшой пример:

Пример 2.2 

	<HTML>
	<!--
	Author:	Pavel Khramtsov
	Date:	March 5, 1996
	-->
	<HEAD>
	<TITLE>Registration</TITLE>
	<SCRIPT LANGUAGE="JavaScript">
	<!-- The JavaScript Functions Definition
	function help_win()
	            {
	Help = window.open("reg_help.html","Help","scrollbars=yes,resizable=yes")
	            }
	function main_menu()
	            {
	             Main_menu = window.open("main_m.html","Main_menu")
	            }
	// The end of JavaScript Functions Definition -->
	</SCRIPT>
	</HEAD>
	<BODY>
	<CENTER>
	<TABLE>
	<TR><TH><IMG 	SRC="radleg3.gif"></TH><TH><H2>ISTC.
	Project	RADLEG(#245)</H2>
	RRC "Kurchatov Institute"<BR>
	<I>Dec, 25, 1995</I>
	</TH></TR>
	</TABLE>
	</CENTER>
	<HR>
	<CENTER>
	<h2>Registration Form</h2>
	<hr>
	......
	Текст страницы.
	.....
	<hr>
	<FORM NAME=help_call>
	<TABLE BORDER=0>
	<TR>
	<TD><INPUT NAME=next TYPE=button VALUE=Next onClick="main_menu()"></TD>
	<TD><INPUT NAME=help TYPE=button VALUE=Help onClick="help_win()"></TD>
	</TR>
	</TABLE>
	</FORM>
	<hr>
	</CENTER>
	</BODY>
	</HTML>

В данном примере в заголовок документа (контейнер HEAD) включен контейнер SCRIPT. До недавнего времени атрибут LANGUAGE в этом контейнере не являлся обязательным. Но с момента появления VBSCRIPT смысл в указании типа языка появился - Navigator не понимает скриптов на других языках. Отсутствие атрибута может привести к ошибкам при отображении гипертекстовых страниц.

Далее в тексте страницы определен комментарий, в который включен текст скрипта. Начинается комментарий со строки: 

	<!-- The JavaScript Functions Definition
и кончается строкой: 
	// The end of JavaScript Functions Definition -->

Внутри контейнера скрипта определены две функции пользователя: help_win() и main_menu(). Смысл этих функций достаточно прозрачен. Help_win() предназначена для организации контекстно зависимого help, а main_menu() осуществляет допуск пользователя к главному меню Website. Обе функции используют один и тот же метод open (встроенную в JavaScript функцию, которая определена над объектом window) для того, чтобы открыть новое окно Netscape Navigator и загрузить в него гипертекстовые документы. При этом функция main_menu порождает стандартное окно (с кнопочками, иконками и т.п.), а функция help_win() окно без стандартных атрибутов. У этого окна имеются только линейки прокрутки (scroll bars).

Вызов функций осуществляется после нажатия на соответствующую кнопку, которые определены в HTML-форме help_call. Таким образом выполнение функций будет осуществлено только в том случае, если произойдет событие, описанное атрибутом onClick в контейнере INPUT соответствующего поля формы.

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

Назад | Содержание | Вперед

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

Теоретизировать на предмет написания скриптов на JavaScrip можно долго. Но самый продуктивный способ получения представления о языке - это разбор примеров. Если посмотреть на список этих примеров, который можно найти в соответствующей директории Yahoo, то больше всего там различного сорта калькуляторов. Разберем программу такого же типа, только это будет не калькулятор, а программа обучения устному счету.

Пример 2.3 

	<HTML>
	<!--
	Author:	Pavel Khramtsov
	Date:	February 23, 1996
	URL:	http://144.206.192.100/radleg/mo_input.shtml
	-->
	<HEAD>
	<TITLE>Проверка устного счета.</TITLE>
	<SCRIPT LANGUGE="JavaScript">
	<!--
	var max_value = 0
	var operand1 = 0
	var operand2 = 0
	var result = 0
	var flag = 0
	var sign = "+"
	var input = ""
	var v_date = new Date()
	var number = v_date.getTime()
	 
	function init(factor) {
	        var today = new Date()
	        return (factor*today.getTime()/1000)%30000
	}
	//Инициализировать счетчик случайных чисел.
	 
	IX = init(2)
	IY = init(3)
	IZ = init(4)
	 
	//2, 3, and 4 below were arbitrarily chosen.
	//They put some distance between the initial values of IX, IY, and IZ
	 
	//Датчик случайных чисел.
	 
	function random() {
	        IX = Math.floor(171 * IX % 30269)
	        IY = Math.floor(172 * IY % 30307)
	        IZ = Math.floor(170 * IZ % 30323)
	        return ( IX/30269.0 + IY/30307.0 + IZ/30323.0 ) % 1.0
	}
	 
	//Выбрать сложение или вычитание.
	 
	function set_sign(x)
	         {
	          if( x == "+")
	            {
	             flag = 0
	             sign = "+"
	            }
	          if( x == "-")
	            {
	             flag = 1
	             sign = "-"
	            }
	          return true
	         }
	 
	// Определить первый операнд.
	 
	function f_operand()
	         {
	          operand1 = random()*max_value
	          return parseInt(operand1)
	         }
	 
	// Определить второй операнд.
	 
	function s_operand()
	         {
	          if(flag == 0)
	            {
	             operand2 = random() * (max_value-operand1)
	            }
	          else
	            {
	             operand2 = random() * operand1
	            }
	          return parseInt(operand2)
	         }
	 
	// Проверить введенные данные.
	 
	function input_sign(x)
	         {
	          if(x == 10)
	            {
	             if(flag == 0)
	               {
	                if( operand1+operand2 == parseInt(input))
	                  {
	                   window.document.test.r0.value = "Молодец!"
	                  }
	                else
	                  {
	                   window.document.test.r0.value = "Думай!?"
	                   window.document.test.input = ""; input = ""
	                  }
	               }
	             if(flag == 1)
	               {
	                if( operand1-operand2 == parseInt(input) )
	                  {
	                   window.document.test.r0.value ="__-__-_р!"
	                  }
	                else
	                  {
	                   window.document.test.r0.value = "Думай!?"
	                   window.document.test.input = ""; input = ""
	                  }
	               }
	             return true
	            }
	          input += x
	          window.document.test.result.value = input
	          return true
	         }
	 
	// Генерация варианта.
	 
	function main_calc()
	         {
	          operand1 = f_operand()
	          window.document.test.op1.value = operand1
	          operand2 = s_operand()
	          window.document.test.op2.value = operand2
	          window.document.test.s_sign.value = sign
	          input = ""
	          window.document.test.input = ""
	          window.document.test.r0.value = " ??? "
	          return true
	         }
	// -->
	</SCRIPT>
	</HEAD>
	<BODY>
	<CENTER>
	<H1>Математический тест</H1>
	<HR>
	<FORM NAME=test>
	<TABLE BORDER=0>
	<TR>
	<TD><INPUT NAME=i10 TYPE=button VALUE="0-10"
		onClick="max_value=10"></TD>
	<TD><INPUT NAME=i20 TYPE=button VALUE="0-20" 
		onClick="max_value=20"></TD>
	<TD><INPUT NAME=i100 TYPE=button VALUE="0-100" 
		onClick="max_value=100"></TD>
	<TD><INPUT NAME=i+ TYPE=button VALUE=" + " 
		onClick="set_sign('+')"></TD>
	<TD><INPUT NAME=i- TYPE=button VALUE=" - " 
		onClick="set_sign('-')"></TD>
	</TR>
	</TABLE>
	<HR>
	<TABLE BORDER=0>
	<TR>
	<TD><INPUT NAME=op1 SIZE=2 MAXLENGTH=2></TD>
	<TD><INPUT NAME=s_sign SIZE=1 MAXLENGTH=1></TD>
	<TD><INPUT NAME=op2 SIZE=2 MAXLENGTH=2></TD>
	<TD>=</TD>
	<TD><INPUT NAME=result SIZE=3 MAXLENGTH=3></TD>
	<TD><INPUT NAME=award TYPE=button VALUE=" ? " onClick="main_calc()">
	<TD><INPUT NAME=r0 VALUE=" ??? ">
	</TR>
	</TABLE>
	<HR>
	<TABLE BORDER=2>
	<TR>
	<TD><INPUT NAME=b1 TYPE=button VALUE=" 1 " onClick="input_sign('1')"></TD>
	<TD><INPUT NAME=b2 TYPE=button VALUE=" 2 " onClick="input_sign('2')"></TD>
	<TD><INPUT NAME=b3 TYPE=button VALUE=" 3 " onClick="input_sign('3')"></TD>
	</TR>
	<TR>
	<TD><INPUT NAME=b4 TYPE=button VALUE=" 4 " onClick="input_sign('4')"></TD>
	<TD><INPUT NAME=b5 TYPE=button VALUE=" 5 " onClick="input_sign('5')"></TD>
	<TD><INPUT NAME=b6 TYPE=button VALUE=" 6 " onClick="input_sign('6')"></TD>
	</TR>
	<TR>
	<TD><INPUT NAME=b7 TYPE=button VALUE=" 7 " onClick="input_sign('7')"></TD>
	<TD><INPUT NAME=b8 TYPE=button VALUE=" 8 " onClick="input_sign('8')"></TD>
	<TD><INPUT NAME=b9 TYPE=button VALUE=" 9 " onClick="input_sign('9')"></TD>
	</TR>
	<TR>
	<TD><INPUT NAME=b0 TYPE=button VALUE=" 0 " onClick="input_sign('0')"></TD>
	<TD COLSPAN=2><INPUT NAME=bs TYPE=button VALUE=" OK " onClick="input_sign('10')">
	</TD></TR>
	</TABLE>
	</FORM>
	</CENTER>
	<HR>
	</BODY>
	</HTML>

Приведенный здесь пример содержит датчик случайных чисел (функции init и rand), таблицу, реализующую функции кнопок клавиатуры, и блок проверки результата вычислений. После загрузки программы пользователь должен выбрать тип вычислений (+,-), интервал вычислений (в пределах 10, 20, 100) и нажать кнопку "?" для генерации примера. После ввода с отображаемой клавиатуры числа пользователь нажимает на символ "=", что означает "исполнить", и система проверяет правильность ответа. Если ответ правильный, то программа поздравляет фразой "Молодец!", если нет - "Думай!?". В системе Windows 3.x нет встроенного датчика случайных чисел, поэтому стандартная функция rand в этой версии JavaScript не реализована. Используемый в данной программе датчик был позаимствован из телеконференции по JavaScript. В скрипте кроме этого используются объект типа "дата" и его методы, а также встроенные функции контроля вводимых данных. Как видно из примера обращение к полям HTML-формы представляет из себя обращение к структуре, корнем которой является объект окно, в котором определен объект документ, внутри которого определена форма и ее поля и атрибуты полей. Не у всех полей можно менять значения атрибутов, так, например, атрибут VALUE в кнопке не меняет своего значения, если только не перезагрузить страницу.

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

Пример 2.4. Бегущая строка 

	<HTML>
	<!-- ady@demos.su, Saturday, January 20, 1996 7:23:31 PM-->
	<!-- Demos WWW cover page -->
	<HEAD>
	<TITLE>Welcome to Demos Company - Moscow, Russia</TITLE>
	 
	<!-- yet another scroller. (C) 1996 Dmitry Altukhov, ady@demos.su -->
	<!--
	 
	     Use this code for whatever purposes... provided that you
	     retain the copyright notice. I accept no responsibility for any disasters
	     caused by this monster. Cannot guess any other cool places for scrollers.
	     And MSIE marquee emulation in JS?!
	     Er... Mozilla clears windows too slow in JS...
	-->
	 
	<SCRIPT LANGUAGE="JavaScript">
	<!-- roll it
	 
	var rate, pos=0;
	function roll() {
		var loop, top, msg1;
	        var msg="Hello World";
	        for(var i=0; i<10; i++)
	           {
	            msg = msg + ("  Hello World");
	           }
	//move on, make a scrolly... and who said that scrollers suck?! ;-)
	 
	        top=(130/msg.length)+1;
		for(loop=0; loop<top; loop++) msg+=" "+msg;
		msg1=msg.substring (pos, pos+130); window.defaultStatus=msg1; 
	if (pos++ == 130) pos=0;
	 
	//come on, the poor thing can't roll any faster... buy a Ferrari. ;-)
	 
		rate=setTimeout("roll()",30);
	}
	 
	// that's all folks ;-)
	// end -->
	</SCRIPT>
	</HEAD>
	<BODY BACKGROUND="back.gif" BGCOLOR="#FFFFFF" TEXT="#000040"
	 LINK="#000080" VLINK="#400080" ALINK="#FF0000" onLoad="roll()">
	.....
	</BODY>
	</HTML>

Здесь приведен фрагмент страницы компании Демос разработанный Дмитрием Алтуховым (andy@demos.su). Как видно из этого примера, прокрутка осуществляется за счет изменения содержания отображаемой переменной msg1. Запускается бегущая строка в момент загрузки страницы по событию onLoad. Из комментария к примеру следует, что автор не несет ответственность за проблемы, которые может данный скрипт породить при его отображении программой просмотра на компьютере пользователя. Собственно проблема вызвана применением функции setTimeout. Изначально предполагалось, что программа просмотра, которая поддерживает JavaScript будет исполняться в среде многопотоковых операционных систем. В этом случае к моменту порождения нового потока старый уже завершится и setTimeout будет таким образом порождать последовательно исполняемые потоки. Однако, при реализации JavaScript в Netscape Navigator 2.0 не все было выполнено аккуратно, и setTimeout стала просто "пожирать" ресурсы компьютера. Системы Windows 3.x вообще не являются много поточными и в них просто происходит переполнение стека при выполнении данного скрипта. Весь вопрос заключается только в том, как быстро "упадет" система, что зависит от объема исполняемой по setTimeout функции. Самое лучше, что можно посоветовать, если вдруг на экране появляется прокрутка - поскорее покинуть такую страницу. Справедливости ради следует отметить, что прокрутку можно организовать и другими способами, поэтому ее появление не обязательно должно вызывать крах системы или крах программы просмотра.

Прокручивать можно и вертикальные фрагменты. Достигается это за счет использования полей типа TEXTAREA.

Пример 2.5 

	<HTML>
	<!--
	Author:	Pavel Khramtsov
	Date:	February 25, 1996
	-->
	<HEAD>
	<TITLE>Text Block Scrolling</TITLE>
	<SCRIPT LANGUAGE="JavaScript">
	var line_beak = "\n"
	var screen = ""
	 
	//                   1234567890123456789012345678901234567890
	    screen += "Будем прокручивать			"
	    screen += "Данный фрагмент текста			"
	    screen += "В поле типа				"
	    screen += "TEXTAREA                                	"
	    screen += "формы term				"
	 
	    for(i=0;i<6;i++)
	    screen += "                                         "
	 
	var i=0
	var j=40
	flag = 0
	function scroll()
	         {
	          if( flag== 0 )
	            {
	             display_str = ""
	             for(k=0;k<11;k++)
	                {
	                 display_str += screen.substring(i,j)
	                 i +=40;j = i + 40
	                 if(i>400) i = 0
	                }
	      window.document.term.work_field.value = display_str
	             i += 40 ; if(i>400) i =0
	            }
	          id = setTimeout("scroll()",1000)
	          return true
	         }
	function change_button()
	         {
	          if(flag==0)
	            {
	             flag = 1
	             return true
	            }
	          if(flag == 1)
	            {
	             flag = 0
	             return false
	            }
	         }
	</SCRIPT>
	</HEAD>
	<BODY onLoad="scroll()">
	<CENTER>
	<H1>Text Block Scrolling.</H1>
	<HR>
	<FORM NAME=term>
	<TEXTAREA NAME=work_field COLS=40 ROWS=10 WRAP=ON></TEXTAREA>
	<P>
	<INPUT NAME=alarm VALUE="Start/Stop" TYPE=button onClick="change_button()">
	</FORM>
	</CENTER>
	<HR>
	</BODY>
	</HTML>

Собственно все организовано также, как и в предыдущем примере, только прокрутка осуществляется в поле формы, для этого поля введен параметр переноса текста на новую строку, ширина поля подобрана под размер выводимых строк. Прокрутка осуществляется как по событию onLoad, так и при нажатии на кнопку "Start/Stop". В этом случае не надо немедленно покидать страницу с прокруткой, а достаточно просто ее остановить.

Другой часто встречающийся пример на страницах со скриптами JavaScript - идущие часы:

Пример 2.6 

	<HTML>
	<HEAD>
	<TITLE> type_Document_Title_here </TITLE>
	<SCRIPT LANGUAGE="JavaScript">
	<!--
	var i=0
	adv_message = "                                         "
	advert = "Russian Research Center \"Kurchatov Institute\""
	adv_message += advert
	adv_message += "                                       "
	adv_length = advert.length
	function move_clock()
	              {
	 
	// Clock
	day = new Date()
	clock_screen = day.getHours()+":"+day.getMinutes()+":"+day.getSeconds()
	document.kuku.f_clock.value = clock_screen
	 
	// Rolling Field
	document.kuku.adv_string.value = adv_message.substring(i,i+45)
	document.kuku.i_field.value = i
	i++
	if( i == adv_length + 44 ) i = 0
	id = setTimeout("move_clock()",100)
	}
	// end -->
	</SCRIPT>
	</HEAD>
	<BODY onLoad="move_clock()">
	This is the start point:<BR>
	<a href="#next">
	This the document start point.</a>
	kukuku
	<a name=next>
	<FORM NAME=kuku onSubmit="alert('You submit data to server')" METHOD="GET"> 
	<INPUT TYPE=SUBMIT NAME=SABMIT VALUE=SUBMIT> Make a clock 
	here:  <INPUT NAME=f_clock maxlength=8 size=8> <P> <INPUT 
	NAME=adv_string maxlength=45 size=45> <INPUT NAME=i_field size=10> 
	</FORM>
	</BODY>
	</HTML>

Пример 2.7. Минимизация, максимизация окна и его удаление. 

	<HTML>
	<!--
	Author:	HTMLed User
	Date:	May 16, 1996
	-->
	<HEAD>
	<title>Iconize</title>
	<script language="JavaScript">
	function make_icon()
	            {
	window.open("test_icon.html","test_icon","resizable=yes,scrollbars=no,
	width=50,height=70")
	             window.close()
	            }
	</script>
	</HEAD>
	<BODY>
	<h1>minimize page</h1>
	<form name=icon>
	<input name=icon_button type=button value=icon onClick="make_icon()">
	</form>
	</BODY>
	</HTML>

Пример 2.8. Максимизация окна: 

	<HTML>
	<!--
	Author: Pavel Khramtsov
	Date:	May 16, 1996
	-->
	<HEAD>
	<script>
	function max_window()
	             {
	window.open("iconize.html","new","toolbar=yes,scrollbars=yes,directories=yes,
	status=yes,menubar=yes,resizable=yes,location=yes,width=700,height=500")
	              window.close()
	             }
	</script>
	</HEAD>
	<BODY>
	<center>
	<a href="" onClick="max_window()"><img src=back.jpg></a>
	</center>
	</BODY>
	</HTML>

Назад | Содержание | Вперед

2.12. Единство в многообразии

В заключении следует отметить, что JavaScript - это не единственный язык управления сценариями просмотра документов. Microsoft подготовила свою версию аналогичного языка - VBScript на основе Visual Basic. Кроме того, управлять сценарием просмотра можно и из Java-applet'ов, что конечно сложнее, но зато более надежно и безопасно. При этом программист получает все преимущества наследования и прочие атрибуты объектно-ориентированного программирования. В конце концов для создания фреймов и окон можно использовать атрибуты соответствующих контейнеров HTML, которые позволяют делить рабочую область экрана на фрагменты, перекрывать объекты и восстанавливать первоначальный вид страницы. Таким образом, к настоящему времени существует по меньшей мере три способа управления сценариями просмотра гипертекстовых баз данных Web, каждый из которых по своему хорош. Какой из них выбрать - это дело автора Website.

Следуя логике авторов JavaScript и направлениям развития World Wide Web следует ожидать появления новых типов объектов и изменения свойств существующих. Кроме этого, видимо, появятся глобальные переменные и функции. Порождение абстрактных типов тоже не за горами, хотя от такой новации не очень понятно, кто выиграет. Постепенно совершенствуется и поддержка встроенных функций на разных платформах, так, например, функция random() реализована в настоящее время везде, что не исключает использование и своих собственных датчиков случайных чисел. И еще, скорее всего, следует ожидать компилятора JavaScript для клиента. Будет ли эта возможность встроена в Navigator или это будет отдельный модуль - пока не ясно, но появление библиотек функций - движение в этом направлении, хорошо согласующееся с принципами кэширования гипертекстовых страниц.

Назад | Содержание | Вперед

2.13. Приемы программирования на JavaScript

Проще всего начать изучение программирования на каком-либо языке с простых примеров, которые читатель может немедленно проверить. С подачи авторов языка С все современные книги по программированию начинаются с примера печати фразы "Hello world" в разных ее проявлениях ("Hello Java", "Hello Perl" и т.п.). Для JavaScript точного аналога такого подхода найти нельзя. Но мы попробуем проиллюстрировать на простых примерах основные приемы программирования.

Аналогом "Hello world" можно считать выдачу сообщения в отдельном окне, которое порождается при нажатии на гипертекстовую ссылку:

Пример 2.9. Программа выдачи простого предупреждения при выборе гипертекстовой ссылки. Схема URL - JavaScript 

	<HTML>
	<HEAD>
	<title>Самый первый пример JavaScript</title>
	</HEAD>
	<BODY>
	<center>
	<h1>Мой первый пример JavaScript</h1>
	<hr>
	</center>
	В текст этого документа внедрена гипертекстовая ссылка
	<a href="javascript:window.alert('Do you speak English?')">
	"Don`t click here"
	</a>.
	Любопытно, что будет, если все-таки выбрать?
	</BODY>
	</HTML>

В данном примере среди текста документа расположена гипертекстовая ссылка "Don`t click here". Если ее выбрать при просмотре (кликнуть мышкой), то на экране появится окно-предупреждение с вопросом: "Do you speak English?".

Генерация этого окна осуществляется специальным методом window.alert, который выполняется при выборе гипертекстовой ссылки. Если быть более точным, то в качестве URL информационного ресурса, который следует загрузить при переходе по данной гипертекстовой ссылке, используется схема JavaScript - расширение спецификации URI для программирования сценариев просмотра гипертекстовых документов World Wide Web. В этом случае выполнение JavaScript-программы происходит при выборе гипертекстовой ссылки, а сам код программы записан как URL.

Рис. 2.1. Выполнение скрипта при выборе гипертекстовой ссылки

Добиться такого же эффекта можно и другим способом, не прибегая к новой схеме URL. Для этой цели можно использовать событие, которое генерируется программой-навигатором при выборе гипертекстовой ссылки - Click.

Пример 2.10. Программа выдачи простого предупреждения по событию Click при выборе гипертекстовой ссылки 

	<HTML>
	<HEAD>
	<title>Самый первый пример JavaScript</title>
	</HEAD>
	<BODY>
	<center>
	<h1>Мой первый пример JavaScript</h1>
	<hr>
	</center>
	В текст этого документа внедрена гипертекстовая ссылка
	<a href="javascript:void(0)" onClick="window.alert('Do you speak
 	English?')">"Don`t click here"</a>. Любопытно, что будет, 
	если все-таки выбрать?
	</BODY>
	</HTML>

Обойтись без новой схемы URL здесь также не удается, но она используется только для того, чтобы после выбора гипертекстовой ссылки в рабочем поле программы навигатора не появлялось пустой страницы, или не приходилось загружать вновь старую страницу. Для обработки события используется конструкция onClick, которая реализует обращение к обработчику (handler) данного события, который в свою очередь вызывает выполнение кода, записанного вслед за onClick.

Размещение кода программы на JavaScript непосредственно в тагах HTML является обычным делом, но не всегда бывает удобным. Наиболее часто JavaScript-код выносят в специальный HTML-контейнер SCRIPT(</script>.....</script>). Для того, чтобы продемонстрировать применение этого подхода, видоизменим наш пример следующим образом:

Пример 2.11. Применение контейнера SCRIPT для размещение JavaScript-кода 

	<HTML>
	<HEAD>
	<title>Самый первый пример JavaScript</title>
	<script language="JavaScript">
	<!-- Start the text of programme
	function question()
	         {
	          window.alert("Do you speak English?");
	         }
	// -->
	</script>
	</HEAD>
	<BODY>
	<center>
	<h1>Мой первый пример JavaScript</h1>
	<hr>
	</center>
	В текст этого документа внедрена гипертекстовая ссылка 
	<a href="javascript:void(0)" onClick="question()">"Don`t click 
	here"</a>. Любопытно, что будет, если все-таки выбрать?
	</BODY>
	</HTML>

Данный пример развивает применение JavaScript-кода для обработки события Click. Но только в этом случае мы не размещаем весь код обработки события в атрибуте onClick. В данный атрибут помещается только вызов функции, которая будет обрабатывать это событие. Само тело функции размещено в заголовке HTML-документа внутри тагов <script ...> и </script>

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

Различные браузеры поддерживают разные версии JavaScript, что накладывает определенные ограничения при написании сценариев JavaScript. Для того, чтобы максимально адаптировать свою программу к конкретному типу программного обеспечения, часто включают проверку версии и имени программы-браузера в JavaScript.

Пример 2.12. Получение типа программы просмотра HTML-страниц 

	<HTML>
	<HEAD>
	<title>Test of Browser name</title>
	</HEAD>
	<BODY>
	<h1 align=center>Проверка имени типа браузера;</h1>
	<hr>
	Для того, чтобы получить имя вашей программы просмотра
	выберите кнопку "Browser"<br>
	<center>
	<form name=kuku>
	<input type=button name=browser value=Browser
	 onClick="window.alert(window.navigator.appName)">
	</form>
	</BODY>
	</HTML>

Данная программа в точности повторяет пример 2.10, но в окне предупреждения выдает имя программы просмотра HTML-страниц (window.navigator.appName). Вообще говоря, в простом сообщении о типе программного обеспечения большого смысла нет, но если вставить проверку данного имени в текст HTML-страницы и реализовать условную компиляцию страницы, то тогда обращение к данной конструкции JavaScript будет оправданным:

Пример 2.13. Условная генерация текста страницы по типу программы просмотра 

	<HTML>
	<HEAD>
	<title>Test of Browser name</title>
	</HEAD>
	<BODY>
	<h1 align=center>Проверка имени типа браузера</h1>
	<hr>
	<script language=JavaScript>
	<!--
	if(window.navigator.appName == "Netscape")
	{
	document.write("<br><center><font color=steelblue size=+5>");
	document.write("У вас хороший навигатор.");
	document.write("</font></center>");
	}
	else
	{
	document.write("<font color=red size=+3>Необходим Netscape Navigator
 	версии 3.0 и выше.</font>");
	window.alert("Down load new version of your browser now.");
	}
	// -->
	</script>
	</BODY>
	</HTML>

В данном примере текст JаvaScript-программы размещен непосредственно в теле документа. При его загрузке, когда HTML-интерпретатор доходит до контейнера SCRIPT, вызывается JavaScript-интерпретатор. В этот момент будет проверяться условие, которое содержится в операторе if. В зависимости от результата проверки этого условия остальной текст страницы примет тот или иной вид в зависимости от типа программы просмотра. При просмотре данного документа программой отличной от Netscape Navigator будет выдано еще и окно предупреждения.

Рис.2.2. При загрузке был определен Netscape Navigator в качестве программы-браузера HTML-страниц

Вообще говоря, проверить тип программы просмотра можно на сервере протокола HTTP и передать программе просмотра уже готовую страницу без условной генерации ее содержания. Но это возможно только в том случае, когда автор страницы имеет возможность программировать на машине где установлен сервер и имеет возможность администрировать этот сервер. В ряде случаев, когда место под Website арендуется и в договоре аренды нет пункта, обеспечивающего управление ресурсами сервера, в этом случае программы с условной генерацией содержания страниц бывают чрезвычайно полезными. Другой случай - это работа в локальном режиме без сервера. Здесь JavaScript является единственным средством управления просмотром. Существует еще ряд случаев, когда применение контейнера SCRIPT в теле документа является вполне оправданным, но на них мы остановимся позже в контексте решения конкретных задач управления сценариями просмотра.

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

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

Вернемся теперь снова к примеру 2.13, но только разместим теперь код JavaScript не в тексте документа, а в отдельном файле:

Пример 2.14. Размещение скрипта в отдельном файле (netscape.jsc) 

	<HTML>
	<HEAD>
	<title>Test of Browser name</title>
	</HEAD>
	<BODY>
	<h1 align=center>Проверка имени типа браузера</h1>
	<hr>
	<script language=JavaScript src=netscape.jsc>
	</script>
	</BODY>
	</HTML>

В данном случае текст условной генерации страницы размещен во внешнем файле. При загрузке страницы этот текст докачивается программой просмотра и исполняется так же, как если бы он размещался в документе. Любопытно, что при просмотре текста документа через опцию "View Source" текст скрипта не отображается, что дает возможность скрыть его содержание от пользователя. В самом файле, который содержит конструкции JavaScript, HTML-таги не используются:

Пример 2.15. Содержание файла netscape.jsc, ссылка на который установлена в атрибуте SCR тага <SCRIPT > из примера 6 

	if(window.navigator.appName == "Netscape")
	  {
	   document.write("<br><center><font color=steelblue size=+5>");
	   document.write("У вас хороший навигатор.");
	   document.write("</font></center>");
	  }
	else
	  {
	   document.write("<font color=red size=+3>Необходим Netscape Navigator
		версии 3.0 и выше.</font>");
	   window.alert("Down load new version of your browser now.");
	  }

На этом можно закончить вступительную часть, посвященную примерам JavaScript-кода, и перейти к более планомерному изложению приемов программирования на JavaScript, если бы не одно "но". Дело в том, что любой автор, который собирается излагать программирование на JavaScript, встречается с проблемой постепенного наращивания сложности примеров. Материал надо начинать излагать "от печки", но вот этой самой печки нет. Все программы на JavaScript (Client-site JavaScript) - это в той или иной мере программы обработки событий, которые связаны с теми или иными информационными объектами. Без изучения этих объектов нельзя начинать ничего программировать.

Однако, существует лазейка в этом заколдованном круге, которой мы и воспользуемся. Это схема JavaScript универсального локатора ресурсов (URL). В наших примерах мы уже использовали эту схему. Она помогала нам открывать окно-передупреждение при выборе гипертекстовой ссылки (пример 2.10) и избегать перезагрузки страниц (пример 2.11). Мы будем пользоваться этой схемой вызова JavaScript-кода до тех пор, пока не появится в нашем рассмотрении объект (контейнер HTML) с атрибутом обработки события.

После этого небольшого отступления начнем рассматривать приемы программирования на JavaScript в соответствии с иерархией объектов этого языка, начиная с самого старшего объекта и двигаясь вглубь дерева объектов: от объекта "окно" к элементам формы.

Назад | Содержание | Вперед

2.14. Примеры манипулирования окнами

Как это не покажется странным, но в наших простых примерах мы уже начали манипулировать окнами. Открытие окна-пердупреждения - это операция над объектом "окно". Определим свойства объекта "окно", методы изменения этих свойств и события, которые могут быть связаны с объектом типа "окно". При этом мы не ставим перед собой задачи описания всех известных в JavaScript свойств, методов и событий, связанных с объектами этого класса. Определим только те, которые понадобятся в наших примерах.

Методы

Методы позволяют нам создать на экране видимое окно, закрыть окно и проделать с ним другие операции. С методом window.alert мы уже знакомы. Методы window.confirm и window.prompt используются для получения ответов от пользователя:

Пример 2.16. Использование методов Alert, Prompt, Confirm 

	<HTML>
	<HEAD>
	<title>Window simple example</title>
	</HEAD>
	<BODY>
	<center>
	<h1>Simple window methods</h1>
	<hr>
	</center>
	<ul>
	<li><a href="javascript:window.alert('Attention!!! press the button to continue.')">Метод Alert.</a>
	<li><a href="javascript:window.status=window.confirm('Answer yes or no.');void(0);">Метод Confirm.</a>
	<li><a href="javascript:window.status=window.prompt('Type string here:','');void(0);">Метод Prompt.</a>
	</ul>
	</BODY>
	</HTML>

В данном примере при вызове метода confirm появляется окно с просьбой подтверждения некоторого действия, при использовании метода prompt - окно с приглашением ввести информацию в поле ввода. В двух последних случаях если не указать функции void(0), произойдет замещение текста HTML-документа на значение, которое возвращают эти два метода. Если внимательно смотреть за полем окна навигатора, в котором отображается информация о загрузке документов, то там можно будет увидеть возвращаемые значения, т.к. они присваиваются свойству status текущего окна, которое связано именно с этим полем, и которому можно присваивать значения, и, следовательно, эти значения будут отображаться в этом поле.

Однако, следует признать, что рассмотренные выше методы используются крайне редко. А тем более в приведенном здесь контексте, поэтому поспешим рассмотреть методы открытия и закрытия окна.

Открыть окно можно используя метод open:

Пример 2.17. Метод window.open 

	<HTML>
	<HEAD>
	<title>Window simple example</title>
	</HEAD>
	<BODY>
	<center>
	<h1>Open window methods</h1>
	<hr>
	</center>
	Если выбрать гипертекстовую ссылку
	<a href="javascript:window.open('simple8.html','example','scrollbars,
	resizable,width=300,height=200');void(0);">Открыть окно</a>, то 
	будет открыто новое окно. Чаще всего этот прием используют
	при создании контекстно зависимых меню.
	</BODY>
	</HTML>

В данном случае при выборе гипертекстовой ссылки будет открыто окно шириной 300 пикселей и высотой 200 пикселей, в окне не будет никаких стандартных меню навигатора, и в окно будет загружен документ simple8.htmll. Метод open позволяет также определить области прокрутки, наличие или отсутствие стандартных меню навигатора и возможность изменения размеров окна. Последняя возможность зависит от платформы на которой исполняется скрипт.

Документ simple8.html в свою очередь содержит код, который позволяет закрыть окно, открытое в примере 2.17:

Пример 2.18. Закрыть текущее окно 

	<HTML>
	<HEAD>
	<title>Window simple example</title>
	</HEAD>
	<BODY>
	<center>
	<h1>Close window methods</h1>
	<hr>
	</center>
	Если выбрать гипертекстовую ссылку 
	<a href="javascript:window.close();void(0);">
	Закрыть окно</a>, то 
	данное окно будет закрыто.
	</BODY>
	</HTML>

В данном примере в качестве гипертекстовой ссылки используется ссылка на метод widow.close(), который закрывает текущее окно. На применении методов open и close построен принцип построения help. По методу open открывается окно подсказки. В него загружают текст документа-подсказки с заранее заготовленной ссылкой на закрытие окна. При выборе этой ссылки окно подсказки закрывается, и пользователь продолжает работать с основным окном навигатора.

Рассмотрим еще один метод, связанный с окном - метод scroll. Данный метод позволяет организовать прокрутку текста в окне.

Пример 2.19. Прокрутка текста в окне навигатора 

	<HTML>
	<HEAD>
	<title>Scroll text</title>
	</HEAD>
	<BODY>
	<center>
	<h1>Прокрутка текста в окне навигатора</h1>
	<hr>
	[<a href="javascript:for(i=0;i<80;i++)
	{window.scroll(0,i*10)};void(0);">Прокрутить текст</a>]
	<hr>
	</center>
	Вообще говоря, проверить тип программы просмотра можно на сервере
	протокола HTTP и передать программе просмотра уже готовую страницу 
	без условной генерации ее
	...
	 
	<hr>
	<center>[<a href=#top>Вернуться в начало</a>]</center>
	</BODY>
	</HTML>

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

Пример 2.20. Прокрутка текста по таймеру 

	<HTML>
	<HEAD>
	<title>Scroll text</title>
	<script language=JavaScript>
	<!-- 
	i=0;flag=0;start_stop=0;
	function my_scroll()
	         {
	          if(start_stop==1)
	            {
	             window.scroll(0,i*10);
	             if(flag==0) i++;
	             if(flag==1) i--;
	             if(i>80) {i=80;flag=1;}
	             if(i<0) {i=0;flag=0;}
	            }
	          setTimeout("my_scroll()",500);
	         }
	function kuku()
	         {
	          if(start_stop == 0) 
	            {
	             start_stop =1;
	            }
	          else
	            {
	             start_stop =0;
	            }
	         }
	// -->
	</script>
	</HEAD>
	<BODY onLoad=my_scroll()>
	<center>
	<h1>Прокрутка текста в окне навигатора</h1>
	<hr>
	[<a href="javascript:kuku();void(0);">Запустить/Остановить</a>]
	<hr>
	</center>
	Вообще говоря, проверить тип программы просмотра можно на сервере
	протокола HTTP и передать программе просмотра уже готовую страницу 
	без условной генерации ее
	...
	<hr>
	<center>[<a href=#top>Вернуться в начало</a>]</center>
	</BODY>
	</HTML>

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

Следует подробно остановиться на особенностях исполнения метода setTimeout. Особенно в части запуска и останова процедуры прокрутки. Рассматривать алгоритм ее исполнения лучше всего в контексте многопоточных или многозадачных систем. Функция my_scroll - это отдельный процесс (поток), который исполняется программой-навигатором. В момент, когда интерпретатор навигатора встречает метод setTimeout, он создает новый процесс (поток), эквивалентный функции my_scroll, и откладывает его исполнение на 500 миллисекунд. После этого он продолжает выполнять текущий процесс (поток). В нашем случае вызов метода setTimeout - это последняя команда функции my_scroll, поэтому после нее ничего не выполняется, а сам процесс или поток, связанный с текущей функцией my_scroll после обработки setTimeout уничтожается. Однако, новый процесс (поток) уже создан в памяти и ждет начала своего исполнения.

В нашем примере новый процесс поток порождается всякий раз, как интерпретатор достигает метода setTimeout, а уничтожается, когда интерпретатор доходит до последнего оператора этого потока. Такой алгоритм выполнения заставляет расположить вызов setTimeout за пределами блока проверки условий скроллинга. Если мы расположим его внутри, то при останове скроллинга новый процесс не будет порожден, а это значит, что и кода, который будет реагировать на флаг скроллинга после останова, не будет существовать, т.е. запустить скроллинг не будет никакой возможности. Именно по этой причине функция my_scroll начинает исполняться сразу после загрузки документа по событию onLoad, но т.к. флаг скроллинга 0, то прокрутки текста не происходит. Процесс порождается все время, пока страница загружена в текущее окно навигатора.

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

Назад | Содержание | Вперед

2.15. Гипертекстовые ссылки и картинки

Гипертекстовые ссылки и картинки - это свойства объекта "документ", который в свою очередь является частью объекта "окно". И гипертекстовые ссылки, и картинки составляют встроенные массивы, к которым можно обращаться по индексу. Рассмотрим несколько примеров программирования массивов гипертекстовых ссылок и картинок.

Просмотр фотографий образцов через список гипертекстовых ссылок

Вся страница размечается как таблица, состоящая из одной строки в две ячейки. В первой ячейке размещается список выбора альтернатив, во второй ячейке размещаются картинки, выбранные при помощи списка альтернатив. Все элементы списка помечены как гипертекстовые ссылки. У каждой ссылки определено событие onSelect. Для того, чтобы не происходил переход к другой странице, а выполнялась только обработка события, в поле href необходимо определить вызов JavaScript. Ниже приведен пример реализации такой компоновки и пример кода самой страницы.

Пример 2.21. Изменение картинки через гипертекстовую ссылку 

	<HTML>
	<HEAD>
	<TITLE>HTTPD\HTDOCS\JAVASCR\EXAMPLE1</TITLE>
	<SCRIPT>
	<!-- Защитили текст скрипта от старых браузеров
	function l_image(a)
	         {
	          document.images[1].src=a 
	         }
	// -->
	</SCRIPT>
	</HEAD>
	<BODY TEXT="#000000" BGCOLOR="#FFFFCC" LINK="#0000EE" VLINK="#551A8B" ALINK="#FF0000">
	<H1>
	<FONT COLOR="#000099">Просмотр фотографий образцов</FONT>
	</H1>
	<center>
	<TABLE COLS=2 WIDTH="100%" >
	<CAPTION>
	<FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>
	</CAPTION>
	<TR>
	<TD>
	<UL>
	<LI><A HREF="javascript:l_image('freeze.gif')">Холодильник</A> </LI>
	<LI><A HREF="javascript:l_image('dust.gif')">Пылесосы</LI>
	<LI><A HREF="javascript:l_image('toster.gif')">Тостер</LI>
	<LI><A HREF="javascript:l_image('cook.gif')">Варочный стол</LI>
	<LI><A HREF="javascript:l_image('oven.gif')">Духовка</LI>
	<LI><A HREF="javascript:l_image('wash.gif')">Стиральная машина</LI>
	<LI><A HREF="javascript:l_image('dishwash.gif')">Посудомоечная машина</LI>
	</UL>
	</TD>
	<TD ALIGN=CENTER VALIGN=CENTER><IMG SRC="dust.gif" NAME="tool" > </TD>
	</TR>
	</TABLE>
	</center>
	</BODY>
	</HTML>

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

Изменение картинки путем выбора предмета из списка.

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

Пример 2.22. Выбор картинки из списка 

	<!-- элементы заголовка -->
	...
	<SCRIPT>
	<!-- Защитили текст скрипта от старых браузеров
	pictures = new Array()
	for(i=0;i<8;i++)
	   {
	    pictures[i] = new Image()
	    if(i==0) pictures[i].src = "freeze.gif"
	    if(i==1) pictures[i].src = "dust.gif"
	    if(i==2) pictures[i].src = "toster.gif"
	    if(i==3) pictures[i].src = "cook.gif"
	    if(i==4) pictures[i].src = "oven.gif"
	    if(i==5) pictures[i].src = "wash.gif"
	    if(i==6) pictures[i].src = "dishwash.gif"
	   }
	function l_image()
	   {
	    document.images[1].src = pictures[document.form1.item.selectedIndex].src
	   }
	// -->
	</SCRIPT>
	 
	                               [ На начало страницы ] 
	 
	Фрагмент HTML-разметки с вызовом функции изменения картинки: 
	 
	<center>
	<TABLE COLS=2 WIDTH="100%" >
	<CAPTION>
	  <FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>
	</CAPTION>
	  <TR>
	    <th>
	      <form name=form1>
	      <select name=item onChange=l_image()>
	        <option>Холодильник
	        <option selected>Пылесос
	        <option>Тостер
	        <option>Варочный стол
	        <option>Духовка
	        <option>Cтиральная машина
	        <option>Посудомоечная машина
	      </select>
	      </form>
	    </th>
	  </tr>
	  <tr>
	    <th ALIGN=CENTER VALIGN=CENTER><IMG SRC="dust.gif" NAME="tool" > </th>
	  </TR>
	</TABLE>
	[ <a href=#top>На начало страницы</a> ]
	<HR>
	</center>

В данном примере картинка выбирается как элемент списка. При этом происходит событие onChange, и по нему определяют, какой именно элемент был отобран.

Листание картинок и их автоматический просмотр

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

Пример 2.23. Листание и прокрутка картинок 

	<SCRIPT>
	<!-- Защитили текст скрипта от старых браузеров
	pictures = new Array()
	for(i=0;i<8;i++)
	   {
	    pictures[i] = new Image()
	    if(i==0) pictures[i].src = "freeze.gif"
	    if(i==1) pictures[i].src = "dust.gif"
	    if(i==2) pictures[i].src = "toster.gif"
	    if(i==3) pictures[i].src = "cook.gif"
	    if(i==4) pictures[i].src = "oven.gif"
	    if(i==5) pictures[i].src = "wash.gif"
	    if(i==6) pictures[i].src = "dishwash.gif"
	   }
	n=0;
	flag=0;
	function next_image()
	   {
	    if(flag==0)
	      {
	       n++;if(n>6) n=0;
	       document.images[1].src = pictures[n].src
	      }
	   }
	function back_image()
	   {
	    if(flag==0)
	      {
	       n--;if(n<0) n=6;
	       document.images[1].src = pictures[n].src
	      }
	   }
	function scroll_image()
	   {
	    if(flag==1)
	      {
	       n++;if(n>6) n=0;
	       document.images[1].src = pictures[n].src
	      }
	    setTimeout("scroll_image()",1500);
	   }
	function start_stop()
	   {
	    if(flag==0)
	      {
	       flag=1
	      }
	    else
	      {
	       flag=0
	      }
	   }
	// -->
	</SCRIPT>
	 
	                               [ На начало страницы ]
	 
	<TABLE COLS=2 WIDTH="100%" >
	<CAPTION>
	  <FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>
	</CAPTION>
	  <TR>
	    <th>
	      <form name=form1>
	      <input name=f type=button value=Вперед onClick=next_image()>
	      <input name=ss type=button value="Старт/Стоп"
		 onClick=start_stop()>
	      <input name=b type=button value=Назад onClick=back_image()>
	      </form>
	    </th>
	  </tr>
	  <tr>
	  <th ALIGN=CENTER VALIGN=CENTER><IMG SRC="dust.gif" NAME="tool" > </th>
	  </TR>
	</TABLE>

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

Пример использования client-site imagemap

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

Пример 2.24. Динамический imagemap 

	<SCRIPT>
	<!-- Защитили текст скрипта от старых браузеров
	function print_form(a)
	         {
	          document.form1.kuku.value = a
	         }
	function set_image(a)
	         {
	          if(a == "bosh")
	            {
	             document.form1.kuku.value= "Техника фирмы Bosh."
	             document.links[5].href = "javascript:print_form(\'Refregarator: Bosh-10245(-24C;Remote Control)\')"
	             document.links[6].href = "javascript:print_form(\'Aero-Filter: Bosh-1212(Steel Filter)\')"
	             document.links[7].href = "javascript:print_form(\'Oven: Bosh-3432(Варочный стол + духовка)\')"
	             document.links[8].href = "javascript:print_form(\'Wash mashine: Bosh-2343(Dry Mode)\')"
	             document.links[9].href = "javascript:print_form(\'Dish wash machine: Bosh-DW-44\')" 
	             document.links[10].href = "javascript:print_form(\'Water pipe: Bosh(Steel + Ceramic)\')"
	            }
	          if(a == "Indesit")
	            {
	             document.form1.kuku.value= "Техника фирмы Indesit."
	             document.links[5].href = "javascript:print_form(\'Indesit-105(-18C)\')"
	             document.links[6].href = "javascript:print_form(\'Indesit-101(Steel Filter)\')"
	             document.links[7].href = "javascript:print_form(\'Indesit-3432(Варочный стол + духовка)\')"
	             document.links[8].href = "javascript:print_form(\'Indesit-343(Wash only)\')"
	             document.links[9].href = "javascript:print_form(\'Indesit-DWR-Safe\')" 
	             document.links[10].href = "javascript:print_form(\'No in the frame\')"
	            }
	          if(a == "candy")
	            {
	             document.form1.kuku.value= "Техника фирмы Candy."
	             document.links[5].href = "javascript:print_form(\'Candy-122(-24C;Hidden model)\')"
	             document.links[6].href = "javascript:print_form(\'Candy-12(Steel Filter + Carbone Filter)\')"
	             document.links[7].href = "javascript:print_form(\'Candy(Варочный стол + духовка)\')"
	             document.links[8].href = "javascript:print_form(\'Candy-343(Dry Mode)\')"
	             document.links[9].href = "javascript:print_form(\'Candy-DWR Elite\')" 
	             document.links[10].href = "javascript:print_form(\'Candy(Ceramic)\')"
	            }
	          document.images[1].src= a+".gif"
	         }
	// -->
	</SCRIPT>
	 
	                               [ На начало страницы ]
	 
	<MAP name=kitchen_map>
	  <area name=freeze shape=rect coords="14,11,88,171" href="javascript:void(0)">
	  <area name=aero shape=rect coords="179,12,238,58" href="javascript:void(0)"> 
	  <area name=oven shape=rect coords="179,95,237,172" href="javascript:void(0)">
	  <area name=dry shape=rect coords="239,95,297,173" href="javascript:void(0)">
	  <area name=wash shape=rect coords="297,96,370,173" href="javascript:void(0)">
	  <area name=kran shape=rect coords="90,95,138,172" href="javascript:void(0)">
	</map>
	<TABLE border=0>
	<CAPTION>
	  <FONT COLOR="#000099" SIZE=+2>Образцы бытовой техники</FONT>
	</CAPTION>
	  <TR>
	    <TH>
	    <a href="javascript:set_image('bosh')">Bosh</a>
	    </th>
	    <th>
	    <a href="javascript:set_image('idezit')">Indesit</a>
	    </th>
	    <th>
	    <a href="javascript:set_image('candy')">Candy</a>
	    </th>
	  </TR>
	  <TR> 
	    <th colspan=3><IMG SRC="Bosh.gif" NAME="tool" USEMAP=#kitchen_map></th>
	  </TR>
	  <tr><th colspan=3><form name=form1><input name=kuku size=40 value=Выбери набор техники.></form></th></tr>
	</TABLE>

В данном примере меняются не только картинки, но и стеки гипертекстовых ссылок под ними. Для каждой новой картинки определяются свои собственные гипертекстовые ссылки.

Назад | Содержание

Таг <НR>

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

Таг <РRЕ>

Отображение текста без форматирования.

Таг <BLINK>

Таг <BLINK> вызывает мерцание текста заключенного в него.

Гипертекстовые ссылки

Все рассмотренные выше средства управления отображением текста являются безусловно важными, но только дополнительными к основному тагу документа - гипертекстовой ссылке. Для записи гипертекстовой ссылки используется контейнер <А...>......</А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF (НуреrТехt Reference). Простую ссылку можно записать в виде: 

	<А НREF="http://роlyn.net.kiae.su/index.shtmll">Индекс базы данных "Полынь" </А>

где значением атрибута HREF является адрес документа " index.htmll " на машине " роlyn.net.kiae.su ", доступ к которой осуществляется по протоколу НТТР. Форма записи этого адреса называется универсальным локатором ресурсов (Universe Resource Locator) и является составной частью технологии WWW.

Содержание контейнера А, заключенное между тагом начала и тагом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок.

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

Рассмотрим это на примере.

Одним из типичных приемов создания Web-сервера фирмы является представление на первой страницы перечня основных частей, в которые входят: Новости, Товары, Услуги, Контакты, Поиск.

Вставим список этих частей в наш пример вместе с гипертекстовыми ссылками на соответствующие документы. При этом можно указывать не полный адрес URL.

Пример 1.7 

	<HTML>
	<HEAD>
	<TITLE> Главная страница</TITLE>
	</HEAD>
	<BODY>
	<H1 ALIGN=CENTER>Компания.</H1>
	<HR>
	<H3 ALIGN=LEFT><I>Открытое акционерное общество Компания основанная в 
	1996 году, является одним из ведущих поставщиков  бытовой электроники в 
	России.</I></H3>
	<HR>
	<p ALIGN=CENTER><font color="#400040" size="4">[ <a 
	href="news.htmll">Новости</a> |<a href="products.htmll">Товары</a> | 
	<a href="servis.htmll">Услуги</a> | <a href="contact.htmll">
	Контакты</a> | <a href="search.html">Поиск</a> ] </font>
	<HR>
	<H3>Основными направлениями деятельности Компании являются:
	<OL>
	<LI>реализация бытовой электроники ведущих фирм мира через сеть магазинов; 
	<LI>создание сервисных центров по обслуживанию бытовой 	электроники.</H3>
	</OL>
	<HR>
	<H3><U><FONT COLOR=RED> Компания ищет агентов по сбыту  бытовой 
	электроники.</FONT></U></H3>
	<H5 ALIGN=CENTER>Контактная информация</H5>
	<UL>
	<LI>Telephone (123) 12-34-56
	<LI>FAX (123) 12-34-56
	<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106
	<UL TIPE=CIRCLE>Электронная почта

	<LI>Общая информация: abc@abc.su
	<LI>Продажи: abc@abc.abc.su</UL></UL>
	<BR><BLINK>Copyright</BLINK> Ы 1997 Компания
	</BODY>
	</HTML>

На экране это будет выглядеть следующим образом. При нажатии на ссылку "Товары" в окно броузера будет загружен новый документ.

Рис. 1.7. Гипертекстовые ссылки

Рис. 1.8. Новый документ

Другой формой использования тага А является определение точек внутри текста, на которые можно сослаться: Такой метод используется в случае когда документ нельзя поделить на части и необходимо быстро передвигаться из оглавления по тексту. 

	<А NАМЕ= роint">
Для ссылки на такую точку используют следующую форму URL: 
	<А НREF=" http://роlyn.net.kiae.su/index.shtmll #роint">
	Ссылка на точку "роint" в документе "index.htmll"</А>

На описании простых гипертекстовых ссылок можно закончить обзор средств языка НТМL, ориентированных на текстовое представление информации и организацию гипертекстовых баз данных.

Назад | Содержание | Вперед

Графика

Cамыми распространенными графическими форматами в Web являются GIFи JPEG форматы. Для того, чтобы вставить изображение в Web-страницу необходимо либо нарисовать его, либо взять уже готовое. В любой программе рисования несложно нарисовать простое изображение и сохранить его в требуемом формате . Если программа не поддерживает этот формат, то необходимо преобразовать файл. Для этого существует множество программ, предназначенных для преобразования одного графического формата в другой. Позаимствовать же картинки можно из различных программных пакетов, или с других Web-страниц в Internet, содержащих библиотеки художественных изображений свободного доступа. Когда броузер выводит страницу Web с изображением, соответствующий графический файл временно хранится в памяти компьютера. В большинстве броузеров есть команда, позволяющая сохранить файл постоянно на локальном диске. Существует множество других вариантов получения графических файлов.

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

Теперь рассмотрим как вставить изображение в страницу Web. Тагом НТМL, который заставляет броузер выводить изображение, является <IMG> со следующим общим форматом: 

	<IMG SRC="picture.gif">
Пример 1.8 
	<HTML>
	<HEAD>
	<TITLE> Товары</TITLE>
	</HEAD>
	<BODY> 
	<H1 ALIGN=CENTER>Компания.</H1>
	<HR>
	<p ALIGN=CENTER><font color="#400040" size="4">
	[ <a href="news.htmll">Новости</a> |
	<a href="products.htmll">Товары</a> | 
	<a href="servis.htmll">Услуги</a> | 
	<a href="contact.htmll">Контакты</a> | 
	<a href="search.html">Поиск</a> ] </font>
	<HR>
	<H3 ALIGN=CENTER> Телевизор
	<BR>СS-7272РТR/ 6272РТR </H3>
	<br><img src="cs727.jpg" align=left hspace=20 vspace=20 ALT="Телевизор">
	<UL>
	<LI>Суперплоский кинескоп  с диагональю 29/25 дюймов (72/62 см)
	<LI>Биокерамическое покрытие кинескопа
	<LI>Мультисистемный (РАL/SЕСАМ/NTSC)
	<LI>Звуковая мощность 2х30 Вт МРО      
	<LI>Стерео (А2)                        
	<LI>Усилитель слабого сигнала (LNА)
	<LI>Функция "Картинка в картинке"      
	<LI>Возможность настройки на 100 каналов
	<LI>Русский телетекст                  
	<LI>Экранное меню на нескольких языках
	<LI>Таймер включения/выключения        
	<LI>Замок от детей                     
	<LI>Режим демонстрации                 
	</UL>
	<HR>
	<H3 ALIGN=CENTER>Контактная информация</H3>
	<UL>
	<LI>Telephone (123) 12-34-56
	<LI>FAX (123) 12-34-56
	<LI>Почтовый адрес 123456 г. Город, ул Лесная, 106
	<UL TIPE=CIRCLE>Электронная почта
	<BR><LI>Общая информация: abc@abc.su
	<LI>Продажи: abc@abc.abc.su
	</UL>
	</UL>
	<BR>
	<BLINK>Copyright</BLINK> Ы 1997 Компания
	</BODY>
	</HTML>

Рис. 1.9. Вставленное в текст изображение

Замыкающего тага не требуется. Здесь SRC означает источник (SouRCe), а имя файла представляет собой имя выводимого графического файла.

Изображения на странице Web могут быть использованы и в качестве гипертекстовых ссылок, как и обычный текст. Читатель страницы щелкает на изображении и отправляется на другую страницу или изображение. Для обозначения изображения как гипертекстовой метки используется тот же таг <А>, что и для текста, но между <А> и </А> вставляется таг изображения <IMG>: 

	<А НREF="адрес файла или изображения"><IMG SRC="picture.gif"></А>

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

Ограничивающие прямоугольники и атрибуты АLТ=

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

Как задать размеры графики

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

	<IMG SRC="picture.gif" WIDTH=413 НЕIGНТ=356>

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

Атрибут АLТ=

Атрибут АLТ= тага IMG позволяет пользователям, броузеры которых смотрят только текст (или если в броузере отключен режим графики), получить представление о том, что за графика расположена на странице или каковы ее цели. Micrisoft Internet Explorer показывает текст из атрибута АLТ= в ограничивающем прямоугольнике, пока изображение загружается. Netscape Navigator выводит этот текст в том случае, если режим Auto Load Image выключен.

Таг <IMG> с атрибутом АLТ= будет выглядеть следующим образом: 

	<IMG SRC="pic.gif " НЕIGHТ=50 WIDTH=100 АLТ="Picture">

Назад | Содержание | Вперед

Введение

Язык гипертекстовой разметки HTML (HyperText Markup Language) был предложен Тимом Бернерсом-Ли в 1989 году в качестве одного из компонентов технологии разработки распределенной гипертекстовой системы World Wide Web.

Когда Т. Бернерс-Ли предложил свою систему, в мире информационных технологий наблюдался повышенный интерес к новому и модному в то время направлению-гипертекстовым системам. Сама идея, но не термин, была введена В. Бушем в 1945 году в предложениях по созданию электромеханической информационной системы Меmех. Несмотря на то, что Буш был советником по науке президента Рузвельта, идея не была реализована. В 1965 году Т. Нельсон ввел в обращение сам термин "гипертекст", развил и даже реализовал некоторые идеи, связанные с работой с "нелинейными" текстами. В 1968 году изобретатель манипулятора "мышь" Д.Енжильбард продемонстрировал работу с системой, имеющей типичный гипертекстовый интерфейс, и, что интересно, проведена эта демонстрация была с использованием системы телекоммуникаций. Однако внятно описать свою систему он не смог. В 1975 году идея гипертекста нашла воплощение в информационной системе внутреннего распорядка атомного авианосца "Карл Винстон". Работы в этом направлении продолжались, и время от времени появлялись реализации типа НуреrСаrd фирмы Аррlе или НуреrNоdе фирмы Хеrох. В 1987 была проведена первая специализированная конференция Нуреrtехt'87, материалам которой был посвящен специальный выпуск журнала "Соmmunication АСМ".

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

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

Разработчики HTML должны были решить две задачи:

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

К моменту создания HTML существовал стандарт языка разметки печатных документов - Standard Generalised Markup Language, который и был взят в качестве основы HTML. Предполагалось, что такое решение поможет использовать существующее программное обеспечение для интерпретации нового языка. Однако, будучи доступным широкому кругу пользователей Internet, HTML зажил своей собственной жизнью. Вероятно, многие администраторы баз данных WWW и разработчики программного обеспечения для этой системы имеют довольно смутное представление о стандартном языке разметки SGML.

Язык НТМL позволяет определять структуру электронного документа с полиграфическим уровнем оформления; результирующий документ может содержать самые разнообразные таги: иллюстрации, аудио- и видео- фрагменты и так далее. Язык включает в свой состав развитые средства для специфицирования нескольких уровней заголовков, шрифтовых выделений, различных групп объектов, например, словари, каталоги или меню для размещения иллюстраций и других фрагментов, а также множество других возможностей.

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

Таким образом, гипертекстовая база данных в концепции WWW - это набор текстовых файлов, размеченных на языке HTML, который определяет форму представления информации (разметка) и структуру связей этих файлов (гипертекстовые ссылки).

Такой подход предполагает наличие еще одной компоненты технологии - интерпретатора языка. В World Wide Web функции интерпретатора разделены между сервером гипертекстовой базы данных и интерфейсом пользователя.

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

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

По сравнению с версией 2.0, HTML 3.2 позволяет реализовать отображение таблиц (контейнер <TABLE>...</TABLE>), выполнение мобильных кодов (<APPLET...>...</APPLET>), обтекание графики текстом, а также отображение верхних и нижних индексов (<SUP>...</SUP>; <SUB>...</SUB>).

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

Сейчас World Wide Web Consortium (W3C) уже опубликовал рабочие материалы спецификации HTML 4.0.. Кроме возможностей разметки текста, включения мультимедиа и формирования гипертекстовых связей уже существовавших в предыдущих версиях HTML, в версию 4.0 включены дополнительные средства работы с мультимедиа, языки программирования, таблицы стилей, упрощенные средства печати изображений и документов, которые становятся более доступными для всех пользователей HTML 4.0. Эти дополнения служат интернационализации WWW и распространению ее по всему миру. Кроме этого, для управления сценариями просмотра страниц Website (гипертекстовой базы данных, выполненной в технологии World Wide Web) можно использовать языки программирования этих сценариев типа JavaScript, Java и VBScript.

Прежде всего рассмотрим структуру HTML-документов.

Содержание | Вперед

1. Принципы гипертекстовой разметки. Структура документов

За основу модели разметки документов в HTML принята таговая модель. Таговая модель описывает документ как совокупность контейнеров, каждый из которых начинается и заканчивается тагами. Т.е. документ НТМL представляет собой не что иное, как обычный АSСII-файл, с добавленными в него управляющими НТМL-кодами (тагами).

Таги НТМL-документов в большинстве своем просты для понимания и использования, ибо они образованы с помощью общеупотребительных слов английского языка, понятных сокращений и обозначений. НТМL-таг состоит из имени, за которым может следовать необязательный список атрибутов тага. Текст тага заключается в угловые скобки (< и >). Простейший вариант тага - имя, заключенное в угловые скобки, например <HEAD> или <i>. Для более сложных тагов характерно различие атрибутов, которые могут иметь конкретные значения, определенные автором для видоизменения функции тага.

Атрибуты тага следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата к началу строки. Порядок записи атрибутов в таге значения не имеет. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Если значение атрибута - одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в одинарные или двойные кавычки, особенно если они содержат несколько разделенных пробелами слов. Длина значения атрибута ограничена 1024 символами. Регистр символов в именах тагов и атрибутов не учитывается, чего нельзя сказать о значениях атрибутов. Например, особенно важно использовать нужный регистр при вводе URL других документов в качестве значения атрибута HREF.

Чаще всего НТМL-таги состоят из начального и конечного компонентов, между которыми размещаются текст и другие элементы документа. Имя конечного тага идентично имени начального, но перед именем конечного тага ставится косая черта (/) (например, для тага стиля шрифта - курсив <i> закрывающая пара представляет собой </i>, для тага заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные таги никогда не содержат атрибутов. По своему значению таги близки к понятию скобок "begin/end" в универсальных языках программирования, которые задают области действия имен локальных переменных и т. п. Таги определяют область действия правил интерпретации текстовых тагов документа.

При использовании вложенных тагов в документе следует соблюдать особую аккуратность. Вложенные таги нужно закрывать, начиная с самого последнего и двигаясь к первому. Некоторые НТМL-таги не имеют конечного компонента, поскольку они являются автономными элементами. Например, таг изображения <IMG>, который служит для вставки в документ графического изображения, конечного компонента не требует. К автономным тагам также относятся разрыв строки (<BR>), горизонтальная линейка (<HR>) и таги, содержащие такую информацию о документе, которая не влияет на его отображаемое содержимое, например таги <META> и <BASE>.

В некоторых случаях конечные таги в документе можно опускать. Большинство броузеров реализованы так, что при обработке текста документа начальный таг воспринимается как конечный таг предыдущего. Самый распространенный таг такого типа - таг абзаца <Р>. Поскольку он используется в документе очень часто, то его обычно ставят только в начале каждого абзаца. Когда один абзац заканчивается, следуюший таг <Р> сигнализирует броузеру о том, что нужно завершить данный абзац и начать следующий. Большинство авторов тагом конца абзаца вообще не пользуются.

Есть и другие конечные таги, без которых броузеры отлично работают, например конечный таг </HTML>. Тем не менее, рекомендуется включать по возможности больше конечных тагов, чтобы избежать путаницы и ошибок при воспроизведении документа.

Общая схема построения контейнера в формате HTML может быть записана в следующем виде: 

	"контейнер" := <"имя тага" "список атрибутов"> 
			содержание контейнера 
			</"имя тага">

Назад | Содержание | Вперед

1.1. Группы тагов НТМL

Все таги НТМL по их назначению и области действия можно разделить на следующие основные группы

Структура гипертекстовой сети задается гипертекстовыми ссылками. Гипертекстовая ссылка - это адрес другого HTML документа или информационного ресурса Internet, который тематически, логически или каким-либо другим способом связан с документом, в котором ссылка определена.

Для записи гипертекстовых ссылок в системе WWW была разработана специальная форма, которая называется Universe Resource Locator. Типичным примером использования этой записи можно считать следующий пример: 

	Этот текст содержит 
	<A HREF="http://polyn.net.kiae.su/altai/index.shtmll">
	гипертекстовую ссылку</A>

В приведенном выше примере таг "A", который в HTML называют якорем (anchor), использует атрибут "HREF", который обозначает гипертекстовую ссылку (Hypertext Reference), для записи этой ссылки в форме URL. Данная ссылка указывает на документ с именем "index.htmll" в директории "altai" на сервере "polyn.net.kiae.su", доступ к которому осуществляется по протоколу "http".

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

Структура HTML-документа позволяет использовать вложенные друг в друга контейнеры. Собственно, сам документ - это один большой контейнер который начинается с тага <HTML> и заканчивается тагом </HTML>: 

	<HTML> Содержание документа  </HTML>

Контейнер HTML или гипертекстовый документ состоит из двух других вложенных контейнеров: заголовка документа (HEAD) и тела документа (BODY):

Рассмотрим простейший пример классического документа:

Пример 1.1 

	<HTML>
	<HEAD>
	<TITLE>Simple Document</TITLE>
	</HEAD>
	<BODY  text=#0000ff  BACKGROUND=#f0f0f0 >
	<H1>Пример простого документа</H1>
	<HR>
	Формы HTML-документов
	<UL>
	<LI>Классическая
	<LI>Фреймовая
	</UL>
	<HR>
	</BODY>
	</HTML>

Рис. 1.1. Пример простого документа

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

Пример 1.2 

	<HTML>
	<HEAD>
	<TITLE>Frame Sample</TITLE>
	</HEAD>
	<FRAMESET COLS="30%,*">
	<FRAME SRC=HTML-lecture.htmll NAME=LEFT>
	<FRAME SRC=HTML-lec-1.htmll NAME=RIGHT>
	</FRAMESET>
	</HTML>

Рис. 1.2. Пример документа с фреймами

Назад | Содержание | Вперед