<<

стр. 9
(всего 11)

СОДЕРЖАНИЕ

>>


ИЛРОИНИ, III




Здесь все слова подчеркнуты %в
Здсоь вое олово овчорш IVTUI

Здесь все слова надчеркнуты


Рис. 15.16. Положение горизонтальной
линии — подчеркивание, зачеркивание
или надчеркивание — определяется
атрибутом text-decoration

Наконец, атрибут letter-spacing позволяет регулировать расстояние между бу-
квами (рис. 15.17).




I;
fj : '



Посмотрите: вот т е к с т с
разрядкой



Рис. 15.17. Разрядка текста задается с
помощью параметра letter-spacing

245
Основные принципы каскадных таблиц стилей
Обратите внимание на одну особенность, проиллюстрированную на
рис. 15.17: в качестве "нейтрального" дескриптора использован <FONT>.
Действительно, этот дескриптор идеально подходит для присваивания
стиля фрагменту текста, не выделенному в самостоятельный абзац.


Атрибуты абзаца
Как и в предыдущих случаях, свойства абзаца, описываемые атрибутами CSS, по-
вторяют и во многом дополняют свойства, описываемые средствами HTML. Так, ат-
рибут text-align определяет выравнивание текста и принимает значения... правильно,
left, right, center и justify. Зачем дублировать параметр align из "джентльменского
набора" HTML? Действительно, польза от них в "чистом виде" минимальна. Но если
на странице часто используется определенный комбинированный вид форматирова-
ния, то лучше создать стиль, в котором, наряду с другими параметрами, присутствует
нужный тип выравнивания, чем каждый раз применять параметр align.
Однако атрибуты CSS позволяют описать и другие параметры абзаца. К таким па-
раметрам относится, в первую очередь, междустрочный интервал. Дескрипторы и па-
раметры HTML никак не влияют на это значение. Зато атрибут line-height позволяет
задать его как в абсолютных значениях (пунктах), так и в относительных (процентах).
Теперь, имея в руках такой тонкий инструмент, нам придется быть вни-
мательнее при подборе шрифта: слишком крупный шрифт при слишком
маленьком междустрочном интервале приведет к тому, что строчки станут
наползать друг на друга (рис. 15.18). Учитывая возможность регулирования
размера шрифта в броузере, рекомендуется одновременно с определением
междустрочного интервала строго указывать и размер шрифта.

•STESTHTML-fino


<STVLE> |
.txt=Cline-height: 0.3)
</STVLE> Й
<P elass=txt>T»KCT текст текст текст текст текст У/
Э D:\My docs\DIALECT\HlmlTutortTESTHTMU \'\ ;
' файп Пг-1 >•« '-'-•• | 1 '.-•:-••-<!Щ.' Сервис

| . I | а" "а:
Щ van Общ-ьг.т
! ••••".•




Рис. 15.18. Если междустрочный интервал
слишком мал, строчки наползают друг на друга



Глава 15
246
Следующим свойством абзаца, о котором в стандартном HTML "забыли", яв-
ляется "красная строка". До сих пор мы довольствовались тем, чего можно до-
биться с помощью неразрывных пробелов и прозрачного GIF, "растянутого" на
нужную длину. Однако вместо всех этих хитростей можно один раз создать нуж-
ный стиль CSS и затем использовать его по мере необходимости.
Атрибут, "отвечающий" за "красную строку", называется text-indent. Его зна-
чением служит величина отступа в сантиметрах или процентах. Кстати, она может
быть и отрицательной. В этом случае вместо отступа получается выступ (рис. 15.19).


fC STYLE >
indent=(text-indent: -1.2си)
</STVLE>
1
<BODV left«argin=7e>
<P class:indent>Этот абзац начинается не с
красной строки, а с выступа
В 3 O:\My docs\DIALECT\HtmlTutor\TESTHTML.h!..
! ЦЦ с.-ялка
'"'
"'"

с.
V*
:V:;-,lr±. .

Этот абзац начинается не
с красной строки, а с
выступа


Рис. 15.19. С помощью атрибута text-indent
можно создавать абзацы не только с отсту-
пом, но и с выступом


Гиперссылки
CSS позволяет переопределить не только стили гиперссылок, свойства кото-
рых описываются параметрами дескриптора <BODY>, но и создать новый стиль для
ссылки, на которую в данный момент наведен указатель мыши. Эти стили имеют
предопределенные имена и могут иметь в своем составе те же атрибуты, что и для
обычного текста. Стиль a:link описывает вид непосещенной, стиль a:visited —
посещенной, a:active — активной гиперссылки и a:hover — гиперссылки, на ко-
торую наведен указатель мыши. Например, если мы хотим, чтобы по умолчанию
все ссылки на странице были темно-зелеными без подчеркивания, посещен-
ные — серыми и тоже без подчеркивания, а при наведении на ссылку указателя
мыши ее цвет менялся на коричневый, нужно создать такие стили:
a:link {coloridarkgreen; text-decoration:none}
a:visited {colorsgray; text-decoration:none}
a:hover {color:maroon; text-decoration underline}




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




Внешний отступ

Рамка


Внутренний отступ

Внутренняя зона


Рис. 15.20. Область, занимаемую элементом Web-страницы,
можно разделить на пять зон
Во внешней зоне располагаются соседние элементы страницы. Например, это
может быть текст, окружающий изображение, или ячейки таблицы, окружающие
данную ячейку. Для этой зоны можно задать режим обтекания с помощью атри-
бута float, который принимает одно из трех значений: left (обтекание слева),
right (обтекание справа) и попе (отсутствие обтекания).
Между внешней зоной и рамкой элемента находится зона внешнего отступа.
Ее ширина определяется атрибутом margin. Значением параметра margin в общем
случае является последовательность из четырех чисел, разделенных пробелами.
Эти числа соответствуют величине верхнего, правого, нижнего и левого отступов.
По умолчанию отступы измеряются в пикселях (рх), однако возможно задание и
других единиц — сантиметров (cm) и процентов (%). Например, стиль
.indent {margin: 1 2 3 4 }
обеспечивает отступ сверху на 1 пиксель, справа на 2 пикселя, снизу на 3 пикселя
и слева на 4 пикселя.
Если вертикальные или горизонтальные отступы равны, можно указать только
один из них. Например, запись
.indent {margin: 1 2 }
означает, что верхний и нижний отступы составляют 1 пиксель, а правый и ле-
вый — 2 пикселя.

248 Глава 15
Наконец, если значением атрибута margin служит единственное число, это оз-
начает, что все отступы одинаковые.
Для того чтобы задать определенный внешний отступ, используются атрибуты
margin-top, margin-right, margin-bottom и margin-left — для верхнего, правого,
нижнего и левого отступов соответственно. Их значением служит число, опреде-
ляющее величину отступа аналогично правилам для атрибута margin.
Подобным образом определяется величина внутреннего отступа, отделяющего
рамку от самого элемента страницы. Только соответствующий атрибут называется
padding, а атрибуты, определяющие величину отступов сверху, справа, снизу и
слева, — padding-top, padding-right, padding-bottom и padding-left.
Для рамки элемента определены три свойства: толщина, цвет и стиль линии.
Толщина и цвет задаются так же, как аналогичные значения других атрибутов.
Что же касается стиля, то здесь возможны следующие варианты:
» попе — рамка отсутствует;
* dotted — рамка состоит из точек;
* dashed — пунктирная рамка;
* solid — сплошная рамка;
* double — двойная рамка;
* groove, ridge, inset, outset — различные варианты "трехмерных" рамок.
Свойства рамки могут быть одинаковыми для всех четырех сторон, а могут
эыть и различными. В случае если они одинаковы, их можно присвоить общему
атрибуту border. Например, двойная красная рамка толщиной 10 пикселей опи-
сывается таким стилем (рис. 15.21):
.red2 {border: 20cm red double}
Для описания свойств одной из сторон рамки используются атрибуты, где по-
сле слова border указывается соответствующая сторона — left, right, top или bot-
tom. Например, для того чтобы описать те же свойства, но только для верхней
границы элемента (рис. 15.22), используется стиль
.red2 {border-top: 20cm red double}
Если требуется описать только одно из свойств рамки, можно воспользоваться
гем же атрибутом border, а можно использовать одну из его "производных": bor-
ier-width для описания ширины, border-color для описания цвета или border-
style для описания стиля. Наконец, если нужно описать свойство только одной
из сторон рамки, используется "третья производная", где между словом border и
наименованием свойства указывается нужная сторона — left, right, top или bot-
tom. Так, например, для описания цвета верхней границы рамки используется ат-
рибут border-top-color.
Наконец, внутренняя зона имеет всего два свойства — ширину и высоту, опи-
сываемые соответственно атрибутами width и height.




Основные принципы каскадных таблиц стилей 249
CSTVLE>
.red2 (border: 2Q red double)
</STVLE>

<DIU clase=red2> текст текст текст текст текст
текст текст текст текст текст текст текст текст
текст текст </DIU>
<Р align=center><IMG crc=oend.gif class=red2>

Si* П
fl
Дч.1 Ийм»кет Стык Sips»».




текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст текст
текст текст текст текст текст




Рис. 15.21. Атрибут border позволяет описать свой-
ства рамки различных элементов Web-страницы
If, TESTHTML - Бпою



<STVLE>
: 20 red double)
.red2
</STVLE>

<DIU Class=red2>
текст текст текст
текст текст </DIU>
<P align=center><IHG src=send.gif class=red2>

РЦУ л;И^к>д йио р.=и,);'м;;,-> iii t'^av^u
lii


D:\Mydocs\DLALECT\HtmlTut




текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст текст текст текст текст текст
текст текст




Рис. 15.22. Для того чтобы описать свойства только одной из
сторон рамки, к имени border добавляется название этой стороны

250 Глава 15
Резюме
Каскадные таблицы стилей — мощное средство, значительно расширяющее
возможности стандартного HTML. Стили, создаваемые посредством CSS, позво-
ляют создать единый дизайн страниц, экономят труд и размер кода.
С помощью каскадных таблиц стилей можно как уточнять форматирование,
определяемое дескриптором в данном месте документа, так и создавать новые
стили, которые можно использовать многократно. В первом случае стиль описы-
вается внутри дескриптора с помощью параметра style, во втором — стилю при-
сваивается имя и он размещается внутри дескриптора <STYLE>. При этом стиль
может создаваться как подкласс определенного дескриптора (и тогда впереди
имени стиля ставится имя этого дескриптора), так как самостоятельный стиль.
Описание стиля состоит из перечня аргументов и их значений, разделенных
точками с запятой и заключенных в фигурные скобки. Между аргументом и его
значением ставится двоеточие.
Благодаря каскадным таблицам стилей можно описывать такие отсутствующие
в стандартном HTML элементы форматирования, как фон отдельных символов,
гочный размер шрифта, разрядка букв, "красная строка", подсвечивание указате-
ля мыши при наведении на гиперссылку и многое другое.


Гесты
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <I class="font-size: 18; color: white; background-color: black">
Это текст, к которому применен стиль.</!>
б) <I style="font-size: 18; color: white; background-color: black">
Это текст, к которому применен стиль.</!>
в) <I.style="font-size: 18; color: white; background-color: black">
Это текст, к которому применен стиль.</!>
г) <I class=inverse>
Это текст, к которому применен стиль.</!>
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <STYLE>
I.inverse="font-size: 18; color: white; background-color: black"
</STYLE>
б) <STYLE>
I.inverse:"font-size: 18; color: white; background-color: black"
</STYLE>
в) <STYLE>
inverse="font-size: 18; color: white; background-color: black"
</STYLE>


251
Основные принципы каскадных таблиц стилей
г) <STYLE>
I.inverse={font-size: 18; color: white; background-color: black"}
</STYLE>
д) <STYLE>
inverse "font-size: 18; color: white; background-color: black"
</STYLE>
е) <STYLE>
.inverse {font-size: 18; color: white; background-color: black"}
</STYLE>
Ж) <STYLE>
I.inverse {font-size: 18; color: white; background-color: black"}
</STYLE>
3. Требуется, чтобы весь полужирный курсив в тексте выводился красным цве-
том. Каким из предлагаемых ниже стилей это можно сделать?
а) U I {color=red}
б) U {font-style=italic; color=red}
в) I {font-style=bold; color=red}
г) I {font-weight=bold; color=red}
д) I.bold {color=red}
е) U.italic {color=red}
ж) I.bold {font-weight=bold; color=red}
з) DIV {font-style=italic; font-weight=bold; color=red}




252 Глава 1i
Глава 16

Понятие событий
В этой главе...

4 Понятие динамического HTML
4 Виртуальные события
4 События мыши
4 События клавиатуры
4 События форм
4 События страницы


Понятие динамического HTML
Как вы могли убедиться, ознакомившись с предыдущими главами этой книги,
'классический" HTML — это средство форматирования электронных документов.
1зык разметки гипертекста изначально не рассчитан на выполнение каких-либо
исгивных действий. Этим HTML радикально отличается от языков программиро-
1ания, выполняющих последовательность команд.
Но жизнь требует от Web-страниц более широких возможностей. В первую
>чередь они заключаются в реакции на определенные действия пользователя —
юреход к тому или иному элементу окна, манипуляции мышью и т.д. Так поя-
1ился динамический HTML (DHTML), представляющий собой сочетание обыч-
юго HTML и языка сценариев JavaScript.
Более сложные вещи, такие как обработка и хранение информации, полу-
чаемой от посетителя страницы, осуществляются с помощью других язы-
ков программирования, таких как РНР и Perl. См. также Зандстра М. Ос-
вой самостоятельно РНР4 за 24 часа. К.: Вильяме, 2001; Пирс К. Освой са-
мостоятельно Perl за 24 часа. К.: Вильяме, 2000.


Виртуальные события
Событием называют некое действие, произошедшее на странице, в ответ на
:оторое требуется выполнить какие-то операции — изменить форматирование
траницы, передать данные на сервер и т.п. Обычно причиной этого действия яв-
яется посетитель, который что-то ввел, выбрал или на чем-то щелкнул.
Любое событие имеет "хозяина" - элемент Web-страницы, с которым это со-
бытие происходит. Таким "хозяином" может быть, например гиперссылка, а со-
бытиями — наведение на нее указателя мыши или щелчок на ней. Кроме того,
каждое событие имеет зарезервированное имя, одновременно являющееся пара-
метром дескриптора. Этот параметр определяет, какое именно событие нужно
обрабатывать — движение мыши, ввод текста, загрузку страницы и т.п. Значени-
ем параметра является действие, которое нужно выполнить:
<ДЕСКРИПТОР при_событии_Н="описание действия"> содержимое дескриптора </ДЕСКРИПТОР>
Например, на рис. 16.1 показан код, реализующий "виртуальный светофор":
при наведении указателя мыши ячейки таблицы "загораются" красным, желтым
и зеленым цветом.
4RTESTHTMI Блокнот


<НЗ аНдп="свп1ег">Виртуальный свето*ор</НЗ>

<TABLE border=1 align="center" cellspacing="10" cellpadding="10">
<TRXTH onMouseouer= "bgColor=' red'"
onMoueeOut = "bgColor=' «hi te' " >Тормози K/THX/TR>
<TRXTH onMouseouer="bgColor= ' y e l l o w ' "
onMouseOut="bgColor= 'white' ">Приготовипись. . .</THX/TR>
<TRXTH onMouseouer= "bgColor='green' "
onMouseOut="bgColor* ' w h i t e ' ">Поехапи!</ТНХ/ТР>
</TBBLE>|




Виртуальный светофор




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

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



Глава П
254
События мыши
Эта группа событий, пожалуй, самая многочисленная. Вот парадокс: простейшее
устройство из шарика и двух кнопок приводит к появлению такого множества собы-
тий: наведение указателя мыши на объект страницы, нажатие кнопки, одинарный и
двойной щелчок, отпускание кнопки, движение указателя по объекту и смещение
указателя за пределы объекта. Рассмотрим эти события более подробно на примерах.
Самое первое событие, связанное с мышью, которое приходит в голову, — это
простой щелчок. Такое событие в HTML носит имя onclick (от английского on
click — "при щелчке"). Например, при щелчке на гиперссылке происходит переход
на другую HTML-страницу. Однако для обработки такого события, как мы уже
знаем, достаточно обычного HTML. Другое дело, если мы захотим, чтобы одновре-
менно с переходом по ссылке изменялся вид самой ссылки, скажем одна картинка
заменялась другой. Для этого можно использовать код, показанный на рис. 16.2.

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


тобы отправить письмо, щелкните на пиктограмме:
<Р aliqn=center><fl href = "nailto:adr-8don.com'




Чтобы отправить
Чтобы отправить
письмо, щелкните
письмо, щелкните на
на пиктограмме:
пиктограмме:




Рис. 16.2. При щелчке на ссылке происходят две вещи:
открывается бланк письма и меняется картинка

В примере на рис. 16.2 для замены картинки использован код JavaScript. В
JavaScript все однородные объекты на странице — картинки, таблицы,
формы, гиперссылки — объединены в группы, именуемые массивами.

255
Понятие событий
Массив изображений называется images. Каждому элементу массива при-
своен собственный порядковый номер, начиная от нуля: первая по поряд-
ку картинка на странице имеет номер 0, вторая — 1 и т.д. Для обращения
к определенному изображению на странице используется запись im-
' ages [N], где N — порядковый номер этого изображения. Для обращения к
определенному свойству данного объекта используется имя этого свойст-
ва. Между именем свойства и объекта ставится разделитель — точка. На-
пример, для того чтобы изменить источник первого изображения на стра-
нице, используется запись наподобие images[0].src="source.gif". Наконец,
объекты страницы могут "вкладываться" друг в друга, как матрешки. На-
пример, кнопка является элементом формы, а форма — элементом всего
электронного документа. Для обращения к таким "подобъектам" исполь-
зуется та же запись имен через точку. Поэтому полный код, позволяющий
изменить источник первого изображения на странице, выглядит так: docu-
ment, images[0].src='sent.gif'. В JavaScript много стандартных объектов,
описывающих основные элементы HTML-страницы.

Событие, которое должно происходить после двойного щелчка, описывается с
помощью параметра onDblClick (от английского on double click — "по двойному
щелчку"). На рис. 16.3 предыдущий пример дополнен еще одним действием: по-
сле двойного щелчка содержимое окна исчезает, и появляется забавная надпись.



= centerXB t
src=letter.gif border=B
ick="document.inaoesf01.erc='sent.aif"




Чтобы отправить
а.?У|
письмо, щелкните |
На ПИКТОГрамме: || Не щелкай много -




Рис. 16.3. После двойного щелчка содержи-
мое окна меняется

В примере, представленном на рис. 16.3, использован код JavaScript с
функцией write. Эта функция позволяет выводить на экран произволь-
ный текст, в том числе и с дескрипторами HTML.

Глава 16
256
Обратите внимание: события можно использовать не только в дескрип-
торе гиперссылки <А>, но и в других дескрипторах HTML.

В Internet часто встречаются страницы, на которых кнопки в виде пиктограмм
меняют вид в момент щелчка, а после него возвращаются в исходное состояние.
Цля этого используются события onMouseDown и onMouseUp. Первое из них описыва-
гт состояние, когда кнопка мыши нажата, но еще не отпущена, так что щелчок
гще не состоялся (ее название происходит от английского on mouse down — "при
нажатии кнопки мыши"). Второе событие описывает состояние, когда кнопка
мыши уже отпущена (ее название происходит от английского on mouse up — "при
этпускании кнопки мыши"). Пример использования этих событий приведен на
рис. 16.4: при нажатии кнопки мыши изображение закрытого замка заменяется
на изображение открытого; при отпускании кнопки замок снова "закрывается".


и на замок, он и откроется
Р align=center>
<IMG src=clos»d.Qif border=0




Нажми на замок, Нажми на замок,
он и откроется: он и откроется:




Рис. 16.4. События onMouseDown и onMouseUp позволяют "откры-
вать" и "запирать" замок путем нажатия и отпускания кнопки мыши

Наконец, для того чтобы страница "сработала", не обязательно щелкать кноп-
кой мыши. Можно написать код так, чтобы было достаточно простого движения
указателя. Для этого используются события onMouseOver, onMouseMove и onMouseOut.
Событие onMouseOver описывает ситуацию, когда указатель мыши "наползает" на
объект, onMouseMove — когда движется по объекту и onMouseOut — когда "сползает"
с объекта. Пример использования этих событий показан на рис. 16.1.

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




257
Понятие событий
События клавиатуры
События, связанные с клавиатурой и распознаваемые динамическим HTML,
аналогичны событиям мыши. Однако их меньше: только нажатие клавиши
onKeyPress, движение клавиши вниз onKeyDown и вверх onKeyUp. На рис. 16.5 пред-
ставлен пример страницы, позволяющей определить код нажатой клавиши.

Код нажатой клавиши сохраняется в объекте JavaScript window.event.keyCode.
Функция window.alert используется для вывода стандартного окна преду-
преждения. Значением этой функции является текстовая строка. В JavaScript
можно составлять строки из фрагментов с помощью выражений вида
строка!+строка2+строкаЗ.




Рис. 16.5. Полезная страничка: позволяет уз-
нать код нажатой клавиши


События форм
Если вы сами попробовали, как "работает" предыдущий пример, то должны бы-
ли заметить, что он "срабатывает" не всегда, а только тогда, когда кнопка выделе-
на. Такое выделение еще называют фокусом ввода. Для того чтобы элемент формы
стал активен (получил фокус), щелкните на нем кнопкой мыши. Если форма со-
стоит из нескольких элементов, то для перехода между ними (передачи фокуса)
можно использовать клавишу <ТаЬ>. Разумеется, вводить что-то в элемент формы
можно только тогда, когда он активен, т.е. когда он имеет фокус ввода.
Событие получения фокуса элементом формы называется onFocus, потери фо-
куса — onBlur. На рис. 16.6 показан улучшенный вариант рассмотренного выше
примера: когда кнопка не активна, надпись приглашает щелкнуть на ней мышью;
когда же кнопка получает фокус, надпись меняется.

258 Глава 16
<FORH nan»=key for»
:
<INPUT naM keycode type=button
ualue="Щелкните на этой кнопке"
onKeyPreee="«indOH.alert /
('Кос нажатой клавиши:'•HiindOH.event.keuCod»!




doc«\DIAl?Cr\HtmlTu»l\TESTHTMLh«nl




Рис. 16.6. Улучшенный вариант предыдущего примера с
учетом активности и неактивности кнопки

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

Событие onSelect "срабатывает" тогда, когда пользователь выделяет в поле
ввода некий текст. При этом переходить к другому элементу формы вовсе не обя-
зательно. На рис. 16.8 показана страница, где, в зависимости от того, что пользо-
ватель намерен делать с текстом (вводить или редактировать выделенный фраг-
мент), меняется пиктограмма.




259
Понятие событий
INPUT typ*=subMit ualue= Вход >
/FORH>




Рис. 16.7. Пример использования события onChange



<FORH>
<P align=center>
<IMG ercspencil.gif> Введите текст:<ВР>

<TEXTfiREft cole=38 гомэ=5

</TEXTAREAXBR>

<INPUT type=sub»it ualu»:"OK">
</FORH>




Рис. 16.8. Событие onSelect позволяет определить, выде-
лен ли фрагмент вводимого текста

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


FORM onSub»it='l
Р align=c*nter>
IMG src=pancil.gif>Вв«дите текст:
TEXTflREft cols=30 rous=5>
/TEXTflREflXBR)
INPUT type=sub«it ualue="OK">
/FORM>




Рис. 16.9. По окончании ввода данных
появляется информационное окно


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

В коде на рис. 16.10 использованы последовательно две команды JavaS-
cript. Разделителем между ними служит точка с запятой.


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


Понятие событий 261
НЕМ»
<Т1Т1_Е>Стрвница загружается.. .</TITLE>
</НЕйО>
(ROOV




Рис. 16.10. До окончания загрузки страницы большое
изображение можно временно заменить маленьким


<НЕАО>
<Т1Т1.Е>Страница загружается. . .</TITLE>
</НЕЯО>
<BODV onLoad="docu«ent . title= 'Страница загрузилась' ;
docuient.iiagesrei.src:' big. gif ••

<IHG erc=e»all.gif>
/BODV)




Рис. 16.11. Событие onUnload "срабатывает" при выгрузке страницы


Глава 16
262
Аналогично "работают" событие ошибки загрузки onError и прерывания за-
грузки onAbort. Оба они означают несостоявшуюся загрузку, только в первом слу-
чае загрузка прерывается программно, во втором — посетителем страницы.

Эта последняя глава книги — только краткое введение в другую инте-
реснейшую область — JavaScript и динамический HTML. Если же вы за-
хотите глубже изучить этот язык, рекомендую книгу Монкур М. "Освой
самостоятельно JavaScript за 24 часа" М.: Вильяме, 2001.


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


Тесты
1. В каком случае вывод сообщения произойдет по щелчку мыши?
а) <Р onMouseDown="window.alert('Щелк!')"> Щелкните здесь
б) <Р onMouseClick="window.alert('Щелк!')"> Щелкните здесь
в) <Р onMouseUp="window.alert('DlenK!' )"> Щелкните здесь
г) <Р onMouseOver="window.alert('Щелк!')"> Щелкните здесь
2. В каком случае вывод сообщения произойдет при наведении указателя мы-
ши на изображение?
а) <IMG src=big.gif onMouseDown="window.alert('Щелк!')">
б) <IMG src=big.gif onMouseOut="window.alert('HenK! ')">
в) <IMG src=big.gif onMouseUp="window.alert(^enK!' )">
r) <IMG src=big.gif onMouseOver="window.alert('Щелк!')">
3. В каком случае вывод сообщения произойдет при удалении указателя мыши
с изображения?
а) <IMG src=big.gif onMouseDown="window.alert('Щелк!')">
б) <IMG src=big.gif onMouseOut="window.alert('Щелк!')">
в) <IMG src=big.gif onMouseUp="window.alert('Щелк!')">
г) <IMG src=big.gif onMouseOver="window.alert('Щелк!')">


Понятие событий 263
4. В состав страницы входит следующий код:
<BODY onUpload="window.alert('CTpaHH4a выгружена')">.
В каком или в каких случаях будет появляться предупреждение?
а) Когда посетитель щелкнет на кнопке Назад (Back).
б) Когда посетитель щелкнет на кнопке Вперед (Forward).
в) Когда посетитель щелкнет на кнопке Обновить (Refresh).
г) Когда посетитель щелкнет на кнопке Остановить (Stop).
5. В состав страницы входит следующий код:
<BODY onLoad="window.alert('Страница выгружена')">.
В каком или в каких случаях будет появляться предупреждение?
а) Когда посетитель щелкнет на кнопке Назад (Back).
б) Когда посетитель щелкнет на кнопке Вперед (Forward).
в) Когда посетитель щелкнет на кнопке Обновить (Refresh).
г) Когда посетитель щелкнет на кнопке Остановить (Stop).




Глава 16
264
Приложение А

Ответы на вопросы тестов
Введение
1. Что из нижеперечисленного является броузером?
а) Microsoft Word — неправильно. Это текстовый процессор. Хотя он и по-
зволяет просматривать Web-страницы, но это только одна из функций
данного приложения.
б) Microsoft Internet Explorer — правильно.
в) Microsoft FrontPage Express — правильно.
г) HomeSite — неправильно. Это редактор HTML-страниц.
д) Netscape Navigator — правильно.
е) Opera — правильно.
ж) Mozilla — правильно.
з) Notepad — неправильно. Это простейший текстовый редактор, с помо-
щью которого можно написать код HTML-страницы.
и) PhotoShop — неправильно. Это графический процессор, с помощью
которого можно обрабатывать изображения для HTML-страниц.
к) Google.com — неправильно. Это поисковый сервер Internet.
2. Что из нижеперечисленного используется для просмотра HTML-страницы?
а) Microsoft Word — правильно (см. тест 1 этой главы).
б) Microsoft Internet Explorer — правильно.
в) Microsoft FrontPage Express — правильно. Это визуальный редактор
HTML-страниц, позволяющий в том числе увидеть, как будет выглядеть
страница в броузере.
г) HomeSite — правильно. Это редактор HTML-страниц, позволяющий в
том числе увидеть, как будет выглядеть страница в броузере.
д) Netscape Navigator — правильно.
е) Opera — правильно.
ж) Mozilla — правильно.
з) Notepad — неправильно. В этом редакторе можно просмотреть только код
HTML-страницы, но не то, как она должна выглядеть для посетителя.
и) Windows - неправильно. Windows — это семейство операционных
систем, под управлением которых работают различные приложения, в
том числе и средства для просмотра HTML-страниц.
к) Linux — неправильно (см. ответ (и) этого теста).
л) PhotoShop — неправильно (см. тест 1 этой главы).
м) Google.com — неправильно. С помощью этого поискового сервера можно
найти нужные страницы в Internet, но отображаются эти страницы, как
впрочем и страницы Google.com, в броузере.
3. Что из нижеперечисленного используется для просмотра кода HTML-страницы?
а) Microsoft Word — правильно.
б) Microsoft Internet Explorer — неправильно. По команде Вид => В виде
HTML из Internet Explorer открывается Notepad или другой HTML-
редактор, который используется по умолчанию.
в) Microsoft FrontPage Express — правильно.
г) HomeSite — правильно.
д) Netscape Navigator — неправильно (см. пункт (б) этого теста).
е) Opera — неправильно (см. пункт (б) этого теста).
ж) Mozilla — неправильно (см. пункт (б) этого теста).
з) Notepad — правильно.
и) Windows — неправильно (см. тест 2 этой главы).
к) Linux — неправильно (см. тест 2 этой главы).
л) PhotoShop — неправильно.
м) Google.com — неправильно.

Глава 1
1. Какие из следующих фрагментов HTML-кода содержат ошибку?
а) Зачем КРИЧАТЬ, когда можно мягко <1>расставить акценты</1>? — ошибок нет.
Этот код будет выглядеть так: Зачем КРИЧАТЬ, когда можно мягко расста-
вить акценть!?
б) Текст курсивом: <!></!> — формально ошибок нет. Но конструкция
<!></!> бессмысленна, так как внутри нее ничего нет.
в) Многие дескрипторы принадлежат к <\1>контейнерному типу<1> — ошибка. Для
того чтобы слова контейнерному типу выводились курсивом, нужно вначале
поставить открывающий тег <1>, а в конце — закрывающий <\1>. Иначе де-
скриптор <\1> будет проигнорирован, а весь текст, начиная от <1> и до кон-
ца документа (или до ближайшего <\1>), будет выводиться курсивом.
2. Какие из следующих фрагментов HTML-кода не содержат ошибки?
а) Увлекаться дескриптором <U> не рекомендуется — ошибка. Дескриптор <U> —
контейнерный и должен иметь закрывающую пару </и>. Иначе весь текст,
начиная от <и> и до конца (или до ближайшего дескриптора </U>), будет
выводиться с подчеркиванием.
б) С помощью вложенных дескрипторов «I» и «В» достигается эффект полужирного
курсива — ошибки нет. Впрочем, форматирования тоже нет. Для того

Приложение А
266
чтобы оно было, дескрипторы должны заключаться не в угловые кавыч-
ки, а между знаками < и >.
в) Контейнерные дескрипторы бывают вложенными, например: <!><U></U></I> —
формально ошибки нет. Однако ставить в код контейнерные дескрипто-
ры, внутри которых отсутствует текст, бессмысленно.
г) Разметка гипертекста средствами HTML производится путем вставки в текст
<1><и>дескрипторов</1></и> — ошибки нет. Текст в окне броузера будет
выглядеть так: Разметка гипертекста средствами HTML производится путем
вставки в текст дескрипторов.
3. Как будет выглядеть в окне броузера следующий фрагмент HTML-страницы:
Для того чтобы броузер воспринимал содержимое файла как HTML-код, этот файл
должен иметь расширение <U><I>.htm</I> или <B>.htmK/B></U>
а) Для того чтобы броузер воспринимал содержимое файла как HTML-код,
этот файл должен иметь расширение .htm или .html — неправильно.
б) Для того чтобы броузер воспринимал содержимое файла как HTML-код,
этот файл должен иметь расширение .htm или .html — правильно.
в) Для того чтобы броузер воспринимал содержимое файла как HTML-код,
этот файл должен иметь расширение .htm или .html — неправильно.

Глава 2
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Р> Для того чтобы перейти на новую строку, используется тег <Р> — фор-
мально ошибок нет. Второй дескриптор <Р> приведет к тому, что сле-
дующий текст будет выводиться с новой строки.
б) <Р> Для того чтобы перейти на новую строку, используется тег <Р></Р> -
формально ошибок нет. Второй дескриптор <Р> приведет к переходу на
новую строку. Закрывающий дескриптор </Р> не обязателен.
в) <Р> Для того чтобы перейти на новую строку, используется тег «Р»</Р> -
ошибок нет.
г) <R> Для того чтобы перейти на новую строку, используется тег «P»</R> —
ошибка: дескриптора <R> не существует.
д) «Р» Для того чтобы перейти на новую строку, используется тег Р — фор-
мально ошибки нет. Но если под «Р» подразумевался дескриптор абзаца,
его нужно заключать не в кавычки, а в угловые скобки: <Р>
2. В каком случае абзац будет выровнен по левому краю:
а) <Р align = center> Этот абзац выровнен по левому краю? — нет, этот абзац
выровнен по центру.
б) <Р align = left> Этот абзац выровнен по левому краю? — да, этот абзац
выровнен по левому краю. *
в) <Р align = right> Этот абзац выровнен по левому краю? — нет, этот абзац
выровнен по правому краю.

Ответы на вопросы тестов 267
г) <Р align = justify> Этот абзац выровнен по левому краю? — нет, этот аб-
зац выровнен по ширине.
д) <Р> Этот абзац выровнен по левому краю? — да. Когда параметр align не
указан, то по умолчанию абзац выравнивается по левому краю.
е) <Р align> Этот абзац выровнен по левому краю? — да. Поскольку значение
параметра align не указано, броузер его игнорирует и по умолчанию ус-
танавливает выравнивание по левому краю.
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Р align=center> Этот текст выровнен по центру — ошибок нет.
б) <Р ALIGN=CENTER> Этот текст выровнен по центру — и здесь ошибок нет:
броузеру безразлично, в каком регистре набраны дескрипторы и их па-
раметры.
в) <P_align=center> Этот текст выровнен по центру — ошибка: между деск-
риптором и параметром должен стоять пробел, а не знак подчеркивания.
г) <Р
align = center> Этот текст выровнен по центру ошибок нет. Между
дескриптором и параметрами может стоять как пробел, так и знак пере-
хода на новую строку.
д) <Р aLiGn=cEnTeR> Этот текст выровнен по центру — ошибок нет. Дескрип-
торы и параметры могут быть набраны в любом регистре.
е) <Р center = align> Этот текст выровнен по центру — ошибка: параметр
должен стоять слева от знака равенства, значение — справа, а не наобо-
рот. Броузер проигнорирует эту ошибку, абзац будет выровнен по левому
краю — так, как предусмотрено по умолчанию.
4. Как будет выглядеть в окне броузера следующий фрагмент HTML-страницы?
<р align = right> Где переход на новую строку:
здесь? <BR> Или здесь?
<Р> А может быть, и здесь тоже?
Правильный вариант — (б).
Варианту (а) соответствует код
<р align = right> Где переход на новую строку:
здесь? <Р> Или здесь?
<Р> А может быть, и здесь тоже?
Варианту (в) соответствует код
<р align = right> Где переход на новую строку:
здесь? <Р align = right> Или здесь?
<Р align = right> А может быть, и здесь тоже?

Глава 3
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) Есть три типа кавычек: «елочки», "верхние лапки" и „нижние лапки". -
Ошибка. Символы, не входящие в стандартный набор ASCII, не всегда

Приложение А
268
правильно интерпретируются броузером. Для того чтобы они отобража-
лись правильно, необходимо использовать esc-последовательности или
мнемонические имена.
б) Есть три типа кавычек: «елочки», "верхние лапки" и ,нижние лапки'. —
Ошибка. Эти символы, за исключением нижней одиночной кавычки,
вообще не являются кавычками. Это знаки "больше" и "меньше", сим-
волы дюйма и минут. Их использование в данном случае противоречит
правилам орфографии и полиграфическим канонам.
в) Есть три типа кавычек: &1адио;ешчки&гадио;, sldquo;верхние namui&rdquo; и
sbdquo;нижние namcH&rdquo;. — Правильно. Для отображения кавычек в ко-
де использованы их мнемонические имена.
г) Есть три типа кавычек: &171;елочки&187;, &8220;верхние лапки&8221; и
&8222;нижние лапки&8221;. — Правильно. Для отображения кавычек в ко-
де использованы соответствующие esc-последовательности.
д) Есть три типа кавычек: &1адио;елочки&|187;, &|8220;верхние лапки&#8221; и
&|8222;нижние лапки&|8221;. -- Правильно. Для отображения кавычек в
коде использованы соответствующие esc-последовательности и мнемо-
ническое имя. Их можно комбинировать.
е) Есть три типа кавычек: &raquo;eno4KH&H87;, &|8220;верхние лапки&|8221; и
&|8222;нижние лапки&#8221;. -- Неправильно. Sraquo; — Мнемоническое
имя правой кавычки, а на этом месте должна стоять левая кавычка. Ее
мнемоническое имя — slaquo;.
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) HTML-страница не должна содержать ошибок - в том числе орфографических. И
ее объем не должен превышать 5-10 Кбайт. — С точки зрения кода — пра-
вильно, с точки зрения орфографии — нет. Кроме того, следует позабо-
титься о правильной расстановке переносов.
б) HTML-страница не должна содержать ошибок Sdash; в том числе орфографиче-
ских. И ее объем не должен превышать 5&dash;10 Кбайт. -- Неправильно.
Не существует символа с мнемоническим именем sdash;.
в) HTML-страница не должна содержать ошибок Sndash; в том числе орфографиче-
ских. И ее объем не должен превышать 5&mdash;10 Кбайт. — С точки зрения
кода — правильно, с точки зрения орфографии — все должно быть на-
оборот: между цифрами нужно использовать короткое тире, а между
словами — длинное.
г) HTML-страница не должна содержать ошибок Smdash; в том числе орфографиче-
ских. И ее объем не должен превышать 5&ndash;10 Кбайт. В принципе все
правильно. Но, кроме тире, следует также позаботиться о неразрывных
пробелах в тех местах, где, по правилам орфографии, переход на сле-
дующую строку запрещен.
д) HTML-страница не должна содержать omH6oK&rodash;B том числе орфографиче-
ских. И ее объем не должен превышать 5 Sndash; 10 Кбайт. — С точки зре-

Ответы на вопросы тестов 269
ния кода — правильно, с точки зрения орфографии — нет: между длин-
ным тире и словами должны стоять пробелы, а между коротким тире и
цифрами их не должно быть.
е) HTML-страница не должна содержать oiH6oK&nbsp;&mdash; в&пЬзр;том числе
орфографических. H&nbspjee объем не должен превышать 5&ndash;10&nbsp;
Кбайт. — Все тире и неразрывные пробелы расставлены правильно.
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Р align=center> По-моему, весь этот текст должен выводиться в одной
строке</Р> — код правильный, но утверждение неверно: если окно бро-
узера окажется .уже, чем эта строка, она будет разорвана.
б) <NOBR align=center> По-моему, весь этот текст должен выводиться в одной
строке</МОВК> — неправильно: у дескриптора NOBR нет параметров. Код
align=center будет проигнорирован.
в) По-моему,&nbsp;весь&пЬзр;этот&пЬзр;текст&пЬзр;должен&пЬзр;выводиться&пЬвр
;в&пЬзр;одной&пЬзр;строке. — Код правильный, но утверждение неверно:
конечно, неразрывные пробелы сделают свое дело, но строка может
быть разорвана после дефиса.
г) <NBSP> По-моему, весь этот текст должен выводиться в одной cTpOKe</NBSP> -
правильно: действительно, весь этот текст будет выводиться в одной строке.
4. В каких точках (А, В, С, D, Е) следующего фрагмента возможен переход на
новую строку?
<NOBR> Где nepe<WBR>(a)xofl на <WBR><6) новую стро-^ку: 3flecb?<WBR>wHnn здесь?
<P>W>A может быть, и здесь тоже?</ЖЖ>
Переход возможен во всех точках, кроме а: в середине слова дескриптор
<WBR> не "срабатывает".

Глава 4
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FONT> Этот текст набран другим шрифтом</РСДОТ> — формально ошибок нет.
Но дескриптор <FONT> без параметров, сам по себе, не меняет вида текста.
б) <FONT face=Arial Cyr> Этот текст набран другим шрифтом</ГОИТ> — ошибка:
название шрифта, состоящее из двух слов, нужно заключать в кавычки.
Иначе броузер воспримет как значение параметра face только первое
слово — в данном случае Arial.
в) <FONT face="Arial Cyr"> Этот текст набран другим шрифтом</КСШТ> — оши-
бок нет.
г) <FONT face="ARIAL CYR"> Этот текст набран другим шрифтом</РОИТ> — и
здесь ошибок нет. HTML нечувствителен к регистру, поэтому название
шрифта можно набирать как прописными, так и строчными буквами.
д) <FONT face="Arial Bold"> Этот текст набран другим шрифтом</РОКТ> —
ошибка: такого шрифта нет. Для того чтобы текст выводился полужир-

Приложение А
270
ным Arial, нужно, кроме дескриптора <FONT>, где задается шрифт Anal,
использовать дескриптор <В>.
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FONT size=3> Этот текст набран другим размером </FONT> — ошибок нет.
Но эффект от применения такой конструкции будет только в том случае,
если размер окружающего текста не равен 3.
б) <FONT size=8 pt> Этот текст набран другим размером </FONT> — ошибка:
дескриптор <FONT> позволяет задать только 7 размеров шрифта, и не в
пунктах, а в собственных единицах.
в) <FONT size=-3> Этот текст набран другим размером </FONT> — ошибок нет.
Но эффект от применения такой конструкции будет только в том случае,
если размер окружающего текста не меньше 4.
г) <FONT size=+7> Этот текст набран другим размером </FONT> — ошибка: ка-
ким бы ни был окружающий текст, его размер нельзя увеличить больше,
чем на 6 единиц.
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FONT color=H23456> Этот текст набран другим цветом</ГОКТ> — ошибок
нет. Но эффект от применения такой конструкции будет только в том
случае, если цвет окружающего текста отличается от 1123456.
б) <FONT color=ts.l23456> Этот текст набран другим цветом</РОНТ> — ошибка:
цвет в HTML задается по шаблону tRRGGBB, и символ & здесь не нужен.
в) <FONT color=fABCDEF> Этот текст набран другим цветом</ГОПТ> — ошибок нет.
г) <FONT color=fGHIKLM> Этот текст набран другим цветом</ГОИТ> — ошибка:
цвет в HTML задается в шестнадцатеричном формате, а в нем использу-
ются только цифры от 0 до 9 и буквы от А до F.
д) <FONT color=lred> Этот текст набран другим цветом</ГОИТ> — неправильно.
Мнемонические имена цветов не нуждаются в предваряющих их символах.
е) <FONT color=#&red> Этот текст набран другим цветом</ГО№Г> — ошибка: мне-
монические имена цветов не нуждаются в предваряющих их символах.
ж) <FONT color=red> Этот текст набран другим цветом</ГОНТ> — ошибок нет.
з) <FONT color-red> Этот текст набран другим цветом</ГОЯТ> — ошибка: меж-
ду параметром и его значением должен стоять знак "=".
4. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <font size=l color=red> Этот текст набран мелким шрифтом и красным цве-
TOM</font> — ошибок нет.
б) <font color=red size=l> Этот текст набран красным цветом и мелким шриф-
TOM</font> — и здесь ошибок нет: параметры дескриптора можно зада-
вать в любом порядке.

Ответы на вопросы тестов 271
в) <color=red font size=l> Этот текст набран красным цветом и мепкт
шрифтом</?огЛ> - ошибка: вначале определяется дескриптор, затем — пара-
метры.
г) <font="red, 1"> Этот текст набран красным цветом и мелким шриф-
TOM</font> — ошибка: параметры дескриптора задаются по отдельности.
д) <font color=red> Этот текст набран красным цветом и <font з!ге=1>мепким
ip^TOM</font> — ошибка: каждый из вложенных дескрипторов нуждает-
ся в собственном закрывающем дескрипторе, даже если они одинаковые.
е) <font color=red> Этот текст набран красным цветом и <font з!ге=1>мелким
ipH(J)TOM</font></font> — ошибок нет.
ж) <font color=red> Этот текст набран красным цветом и <font з12е=1>мелким
шpифтoм</font sizex/font color> — ошибка: в закрывающем дескрипторе
не нужно перечислять параметры.
5. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <BASEFONT color=blue> Синий текст <FONT color=yellow> Зеленый текст </FONT> -
в коде ошибок нет. Но предположение, что цвета смешаются, как при нало-
жении цветных стекол, и синий с желтым даст зеленый, — ошибка.
б) <BASEFONT color=blue> Синий текст <FONT color=yellow> Желтый текст
</FONT> — ошибок нет.
в) <BASEFONT color=blue> Синий текст </BASEFONT> — ошибка: дескриптор
<BASEFONT> — непарный и в закрывающем дескрипторе не нуждается.

Глава 5
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Н1> Это заголовок первого уровня — ошибка: дескрипторы заголовка
нужно закрывать.
б) <Н1> Это заголовок первого уровня </Н1> — ошибок нет.
в) <Н1> Это заголовок первого уровня </Н2> — ошибка: дескриптор заголовка
первого уровня <Н1> нужно закрыть дескриптором заголовка этого же
уровня <Н1>.
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Н1> Это заголовок <BR> из двух строк </Н1> — ошибок нет.
б) <Н1> Это заголовок <Р> из двух строк </Н1> — и здесь ошибок нет. Только
расстояние между строками будет больше, чем в случае (а).
в) <Н1> Это заголовок <Н2> из двух строк </Н2></Н1> — формально ошибок
нет. Но на самом деле этот составной заголовок состоит из заголовков
двух уровней: первого и второго.
г) <Н1> Это заголовок </Н1><Н2> из двух строк </Н2> - формально ошибок
нет. Эффект от этого кода такой же, как в случае (в).


Приложение А
272
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Н1>Это заголовок, выровненный по левому краю</Н1> — ошибок нет. По
умолчанию заголовки выравниваются по левому краю.
б) <Н1 align=lef t>3ro заголовок, выровненный по левому краю</Н1> — ошибок нет.
в) <Н1 align=right>3ro заголовок, выровненный по правому краю</Н1> — ошибок нет.
г) <Н1 align=center>3TO заголовок, выровненный по центру</Н1> — ошибок нет.
д) <Н1 align=justify>3To заголовок, выровненный по ширине</Н1> — ошибка: в
заголовках параметр align не может принимать значение justify.

Глава 6
1. Дескриптор <S> является аналогом:
а) дескриптора <STRONG> — неправильно. Дескриптором <STRONG> выделяют
фрагменты, на которые посетителю страницы следует обратить особое
внимание, а дескриптор <S> означает зачеркивание текста.
б) дескриптора <ЕМ> — неправильно. Дескриптором <ЕМ> выделяют фраг-
менты, на которые посетителю страницы следует обратить внимание, а
дескриптор <S> означает зачеркивание текста.
в) дескриптора <STRIKE> — правильно.
г) дескриптора <DEL> — неправильно. Такой текст на экране выглядит за-
черкнутым, так же как и размеченный дескриптором <S>, но код с деск-
риптором <DEL> несет также дополнительную информацию — выделен-
ные им данные, как правило, являются устаревшими.
2. Какой или какие из следующих фрагментов кода содержат ошибки?
а) <BLOCK QUOTEXTHie eflenib&nbsp;&mdash; дальше будешь</ВЬОСК QUOTE>. На-
родная мудрость — ошибка: название дескриптора <BLOCKQUOTE> не со-
держит пробелов.
б) <ВЬОСВДЮТЕ>Тише efleib&nbsp;Smdash; дальше будешь</ВЬОСК01ЮТЕ>. Народ-
ная мудрость — ошибок нет.
в) <BLOCK quote="THme едешьЬпЬзр;ш1азЬ; дальше будешь">. Народная муд-
рость —. ошибка: этот дескриптор называется <BLOCKQUOTE> и не имеет
параметров.
г) <ACKRONYM Ш1е="язык разметки гипертекста">НТМ1</АС1ЖСШМ> — ошибок нет.
д) <ACKRONYM>HTML</ACKRONYM>&nbsp;&mdash; язык разметки гипертекста— фор-
мально ошибок нет. Но дескриптор <ACKRONYM> обычно используют для
того, чтобы указать в нем расшифровку сокращения.
е) Формула этилового cnnpTa&nbsp;Smdash; C<SUB>2</SUB>H<SUB>5</SUB>OH —
ошибок нет.
ж) Формула этилового cnHpia&nbspj&mdash; C<SUP>2</SUP>H<SUP>5</SUP>OH -
ошибка: здесь нужно использовать дескриптор нижнего индекса <SUB>, a
не верхнего <SUP>.

Ответы на вопросы тестов 273
3. Какой из следующих фрагментов состоит из двух абзацев?
а) &1адио;<С1ТЕХГише eneinb&nbsp;&mdash; дальше будешь</С1ТЕ>&гадио;
&nbsp;&mdash; народная мудрость — один абзац.
б) <С1ТЕ>Тише efleib&nbspi&mdash; дальше будешь</С1ТЕ>. <МШЕ83>Народная
MyflpocTb</ADDRESS> — два абзаца: содержимое дескриптора <ADDRESS> вы-
водится с новой строки.
в) <BLOCKQUOTE>Tiffle enenib&nbsp;&mdash; дальше будешь</ВЬОСКдиОТЕ>. <ADDRESS>
Народная мудрость</АВОКЕ83> - два абзаца: содержимое дескриптора
<ADDRESS> выводится с новой строки.
г) <BLOCKQUOTE>Tmne eflenib&nbsp;&mdash; дальше будешь</ВЬОСКОиОТЕ>. Народная
мудрость — два абзаца: содержимое дескриптора <BLOCKQUOTE> выводится
в отдельном абзаце.
д) <РКЕ>Тише eflein>&nbsp;&mdash; дальше будешь</РКЕ>. Народная мудрость — два
абзаца: содержимое дескриптора <PRE> выводится в отдельном абзаце.
4. Какие из следующих пар фрагментов отображаются в броузере одинаково?
a)<DFN>HTML</DFN>&nbsp;&mdash; <DEL>HTML</DEL>Snbsp;&mdash; язык разметки
язык разметки гипертекста гипертекста
Фрагменты отображаются по-разному: содержимое дескриптора <DFN> выво-
дится полужирным шрифтом, содержимое дескриптора <DEL> — зачеркнутым.
6)<DFN>HTML</DFN>&nbsp;&mdash; <ACKRONYM title="H3biK разметки
язык разметки гипертекста гипертекста">НТМ1Х/АС1Ж(ШМ>
Фрагменты отображаются по-разному: содержимое дескриптора <DFN> выво-
дится полужирным шрифтом, содержимое дескриптора <ACKRONYM> — обыч-
ным, а расшифровка сокращения — при наведении на него указателя мыши.
в) <DFN>HTML</DFN>Snbsp;&mdash; <B>HTML</B>&nbsp;Smdash; язык разметки
язык разметки гипертекста гипертекста
Фрагменты отображаются одинаково: в обоих случаях слово HTML выво-
дится полужирным шрифтом.
г) <DFN>HTML</DFN>&nbsp;&mdash; <I>HTML</I>&nbsp;&mdash; язык разметки
язык разметки гипертекста гипертекста
5. Какие из следующих пар фрагментов отображаются в броузере одинаково?
а) Саша + <DEL>Mama</DEL><INS>Cama + <В>Маша</В><1>Наташа</1> = Дружба
Наташа</1Ы8> = Дружба
Фрагменты отображаются по-разному: содержимое дескриптора <DEL> выво-
дится зачеркнутым, дескриптора <INS> — подчеркнутым, дескриптора <В> -
полужирным, а дескриптора <1> — курсивом.
б) Саша + <DEL>Mama</DEL><INS>Cama + <8>Маша</8><и>Наташа</и> = Дружба
Наташа</1Н8> = Дружба
Фрагменты отображаются одинаково: содержимое дескрипторов <DEL> и <S>
выводится зачеркнутым, а дескрипторов <INS> и <U> — подчеркнутым.


Приложение А
274
в) Саша + <DEL>Maia</DEL> Саша + <STRIKE>Mama</STRIKE>
<INS>HaTama</INS> = Дружба <STRONG>HaTaia</STRONG> = Дружба
Фрагменты отображаются по-разному: содержимое дескрипторов <DEL> и
<STRIKE> выводится зачеркнутым, дескриптора <INS> — подчеркнутым, а де-
скриптора <STRONG> — полужирным.
6. Какие из следующих пар фрагментов отображаются в броузере одинаково?
а) Вот фрагмент HTML-кода: <PRE> Вот фрагмент HTML-кода: <PRE>
<1>курсив<1> курсив
<и>подчеркнутый<и> подчеркнутый
</PRE> </PRE>
Фрагменты отображаются по-разному: содержимое дескриптора <PRE> выво-
дится с сохранением разделителей, но не форматирования.
б) Вот фрагмент HTML-кода: <PRE> Вот фрагмент HTML-кода: <CODE>
<1>курсив</1> <1>курсив</1>
<и>подчеркнутый</и> <и>подчеркнутый</и>
</PRE> </CODE>
Фрагменты отображаются по-разному: содержимое дескриптора <PRE> выво-
дится с сохранением разделителей, а содержимое дескриптора <CODE> — без
их сохранения.
в) Вот фрагмент HTML-кода: <PRE> Вот фрагмент HTML-кода: <CODE>
<1>курсив</1> &lt;I&gt;KypcHB&lt;/I&gt;
<и>подчеркнутый</и> Sit;USgt;подчеркнутый&]±;/U&gt;
</PRE> </CODE>
Фрагменты отображаются по-разному: дескрипторы, вложенные в дескрип-
тор <PRE>, обрабатываются броузером как обычно.
г) Вот фрагмент HTML-кода: <PRE> Вот фрагмент HTML-кода: <CODE>
<1>курсив</I> <BR>&nbsp;Snbsp;Snbsp;<1>курсив</I>
<и>подчеркнутый</11> <BR>&nbsp; Snbsp; Snbsp; <U>no дчеркнутый</и>
</PRE> </CODE>
Фрагменты отображаются примерно одинаково (если считать, что три не-
разрывных пробела примерно равны одной табуляции).
д) Вот фрагмент HTML-кода: <PRE> Вот фрагмент HTML-кода: <FONT
<1>курсив</1> face="Courier New">
<1)>подчеркнутый</и> <BR>&nbsp; snbsp; snbsp; <1>курсив</1>
</PRE> <BR>&nbsp;&nbsp;&nbsp;<U>nofl4epKHyTbisi</U>
</FONT>
Фрагменты отображаются примерно одинаково (если считать, что три не-
разрывных пробела примерно равны одной табуляции).
7. Какие из следующих пар фрагментов отображаются в броузере одинаково?
а) Дескриптор Дескриптор <!>&lt;SUP&gt;</I> предназначен
<VAR>slt;SUPSgt;</VAR> для отображения верхнего индекса
предназначен для отображения
верхнего индекса


Ответы на вопросы тестов 275
Фрагменты отображаются одинаково.
б) Дескриптор Дескриптор <FONT face="Courier
<VAR>Slt;SUP&gt;</VAR> New">Slt;SUP&gt;</FONT> предназначен для
предназначен для отображения отображения верхнего индекса
верхнего индекса
Фрагменты отображаются по-разному: содержимое дескриптора <VAR> -
курсивом, содержимое дескриптора <FONT face="Courier New"> — шрифтом
Courier New.
в) Дескриптор <KBD>&lt;SUP&gt; Дескриптор <FONT face="Courier
</KBD> предназначен для New">&lt;SUP&gt;</FONT> предназначен для
отображения верхнего индекса отоб р а жения верхнего индекса
Фрагменты отображаются одинаково.
г) Дескриптор <SAMP>&lt;SUP& Дескриптор <FONT face="Courier New">
gt;</SAMP> предназначен для &lt;SUP&gt;</FONT> предназначен для
отображения верхнего индекса отображения верхнего индекса
Фрагменты отображаются одинаково.

Глава 7
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <UL start=l>
<LI> Первый элемент списка
<Ы> Второй элемент списка
</UL> — ошибка: у дескриптора <UL> нет параметра start.
б) <UL start=circle>
<LI> Первый элемент списка
<Ы> Второй элемент списка
</UL> — ошибка: во-первых, у дескриптора <UL> нет параметра start, a
во-вторых, этот параметр не принимает значения circle.
в) <UL type=l>
<LI> Первый элемент списка
<Ы> Второй элемент списка
</UL> — ошибка: параметр type не принимает значения 1.
г) <UL type=circle>
<LI> Первый элемент списка
<Ы> Второй элемент списка
</UL> — правильно.
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <OL start=l>
<LI> Первый элемент списка
<Ы> Второй элемент списка
</OL> — правильно.
б) <OL start=circle>
<LI> Первый элемент списка
<Ы> Второй элемент списка
</OL> — ошибка: параметр start не принимает значения circle.

Приложение А
276
в) <OL type=l>
<LI> Первый элемент списка
<LI> Второй элемент списка
</OL> — правильно.
г) <OL type=circle>
<LI> Первый элемент списка
<Ы> Второй элемент списка
</OL> — ошибка: параметр type дескриптора <OL> не принимает значения
circle.
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <DL>
<DT> Термин 1</DT>
<DD> Определение 1</DD>
<DT> Термин 2</DT>
<DD> Определение 2</DD>
</DL> — правильно.
б) <DT> Термин 1</DT>
<DD> Определение 1</DD>
<DT> Термин 2</DT>
<DD> Определение 2</DD> — и это правильно: можно создать список опре-
делений и без дескриптора <DL>.
в) <DL type=circle>
<DT> Термин 1</DL>
<DD> Определение 1</DD>
<DT> Термин 2</DL>
<DD> Определение 2</DD>
</DL> — ошибка: у дескриптора <DL> нет параметра type.
г) <DL start=l>
<DT> Термин 1</DL>
<DD> Определение 1</DD>
<DT> Термин 2</DL>
<DD> Определение 2</DD>
</DL> — ошибка: у дескриптора <DL> нет параметра start

Глава 8
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <IMG згс="Мои документы\уазуа.д!?"> — ошибка: в именах файлов и путях
к ним не допускается использование кириллицы и пробелов; в качестве
разделителей используются не обратные, а прямые косые.
б) <IMG src="Mydoc\vasya.gif"> — ошибка: в качестве разделителей исполь-
зуются не обратные, а прямые косые.
в) <IMG src="Mydoc/vasya.gif"> — правильно.
г) <IMG src=Mydoc/vasya.gif> — правильно.
д) <IMG src="Mydoc/vasya.tif"> — ошибка: формат TIFF не относится к
форматам графики для Internet, изображения в этом формате не откры-
ваются броузером.

Ответы на вопросы тестов 277
e) <IMG src="Mydoc/vasya.GIF"> — формально ошибки нет. Но поскольку в
пути файла различаются строчные и прописные буквы, рекомендуется
всегда использовать строчные, чтобы не запутаться.
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <IMG src=vasya.gif border=l bordercolor=red> — ошибка: в дескрипторе
<IMG> отсутствует параметр border color.
б) <IMG src=vasya.gif border=l> — правильно.
в) <IMG src=vasya.gif border=l,5> — ошибка: параметр border может прини-
мать только целочисленные значения, так как определяет ширину рамки
в пикселях.
г) <IMG src=vasya.gif border=1.5> — ошибка: параметр border может прини-

<<

стр. 9
(всего 11)

СОДЕРЖАНИЕ

>>