<<

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

СОДЕРЖАНИЕ

>>



Рис. 8.4. Если увеличить картинку, изменив параметр width или height, станут
видны зубчатые края. Красиво ли это?

Зато есть другие, весьма полезные способы применения параметров height и width.
Первое, что приходит в голову, — то, что с помощью этих параметров можно
менять пропорции изображения, растягивать его в длину и ширину. Этим можно
добиться довольно любопытных эффектов (рис. 8.5). Обратите внимание: в коде,
показанном на рисунке, дважды использовано одно и то же изображение.



96 Глава 8
Я довольный



Я на диете

(Н2>Я довольный</Н2>
(IHG src=vasya.gif uidth=300 height=80>
СН2>Я на диете</Н2>
(IMG src=uasya.gif nidth=8S




Рис. 8.5. Непропорциональное изменение параметров height и width по-
зволяет добиться любопытных эффектов с одним и тем же изображением

Но главное — с помощью этих параметров можно задать точные габариты
изображения. Зачем, ведь они и так соблюдаются? А вот посмотрим.
Сделаем так, чтобы броузер не нашел картинку. Для этого изменим имя файла
в коде, например на no.gif. Что мы увидим вместо картинки? Маленький пустой
квадратик, как на рис. 8.2. А теперь укажем в дескрипторе <IMG> точные парамет-
ры предполагаемого изображения. Что мы видим теперь? Прямоугольник, разме-
ры которого точно соответствуют нашей картинке (рис. 8.6).
Теперь представьте себе, что происходит со страницей и картинкой, которые
вы закачиваете из Internet на свой компьютер по медленному модему. Что загру-
жается и появляется на экране первым? Очевидно, то, что важнее, что несет
больше информации. Обычно это текст. Заодно он и загружается быстрее. Пока
загрузится все остальное, посетитель страницы, вместо того чтобы сидеть без де-
ла, сможет его почитать.
А как картинки? Пока броузер их не получил, он будет выводить вместо них
те самые прямоугольники, которые мы видели в нашем эксперименте. Когда бро-
узер получит картинки, он поставит их вместо этих прямоугольников.
Теперь представим себя на месте дизайнера такой страницы: мы разметили
текст и графику в нужных местах так, чтобы они гармонично и пропорционально
дополняли друг друга. И тут вместо картинок разного размера появляются одина-
ковые квадратики, а текст съезжает туда, куда заблагорассудилось броузеру...


97
Графика на Web-странице
Приятного мало. Если же указать габариты изображения в дескрипторе <IMG>, то
броузер заранее "зарезервирует" под него место, и дизайн страницы не пострадает.
И еще один интересный момент. Что происходит, если окно броузера слиш-
ком мало, и текст в нем не помещается? Ответ на этот вопрос мы уже знаем: если
текст не помещается по ширине, то он обычно переносится на другую строку, а
если это не получается или если текст не помещается по высоте, — появляются
полосы прокрутки.


<H1>3To?nbsp;&ndash;
<IHG src=no.gif uidth=30Q heigth=211>




Это — Я?




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

То же самое происходит и в случае, если в окне не помещается картинка. Но
есть способ, позволяющий регулировать размеры картинки в зависимости от раз-
меров окна броузера. Это — задание ширины и высоты изображения в процентах.
Если, например, задать width=100%, то при изменении ширины окна размер изо-
бражения также будет меняться, и оно всегда будет "вписываться" в окно незави-
симо от его размеров (рис. 8.7).

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



98 Глава 8
<Н2>Я довольный</Н2>
<IMG src=uaeya.gif width=ieeX>|




J4D D:\My docs\DlALECT\HtmrTutoATESTHTMLhtml




Рис. 8.7. Если задать ширину изображения в процентах, то размер изобра-
жения будет изменяться в зависимости от ширины окна

Вместо картинок
То есть как это вместо? Мы же вроде решили графикой заняться?
Вы можете считать это безобразием, но факт остается фактом: немало посети-
телей нахально отключают загрузку картинок, жалея потратить несколько жалких
копеек на нашу замечательную графику. Они не ценят прекрасного... Но ведь
нужно же как-то и до них донести то, что изображено на странице! Пускай они
хотя бы пожалеют, что не видят такой красоты.
Как это сделать?
Конечно, можно снабдить все рисунки подписями на манер тех, что сопровож-
дают иллюстрации в нашей книге. Но такое возможно далеко не всегда. Как быть?
На этот случай у дескриптора <IMG> есть атрибут, позволяющий вывести вме-
сто картинки надпись — в качестве альтернативы. Он так и называется — alt.
Если же пользователь не отключил отображение графики, эта надпись выводится
в виде контекстной подсказки (рис. 8.8).
Но бывает так, что посетитель не отключал вывод картинок, а просто у него
медленный модем или у нас слишком большая картинка. Если мы не хотим, чтобы
этот посетитель все-таки отключил вывод графики, можно немного скрасить ему
ожидание, предложив временно, пока загрузится большая и красивая картинка, по-
любоваться другой, маленькой и не такой красивой. Для этого используется пара-
метр lowsrc (от английского low source — здесь: "источник более низкого качества"):
<img src=vasya.gif а!1="Это мой автопортрет" lowsrc=smallvasya.gif>

Графика на Web-странице 99
<Hl>3Toanbsp;a»da8h; Я!
<IM6 src=uasya.gif elt = "3ro мой автопортрет")




Это —Я! Это —Я!




Рис. 8.8. Текст, указанный в качестве значения параметра alt,
выводится вместо картинки или в качестве контекстной подсказки


Обтекание графики текстом
Справа от автопортрета самое место автобиографии. Попробуем ее туда вста-
вить (рис. 8.9). Как видим, вышло не совсем то, что нам нужно. Это похоже на
вставку картинки в MS Word: если в той же строке есть текст, то получается не
совсем красиво.
Помнится, для выравнивания текста использовался атрибут align. Правда, там
он применялся просто для выравнивания строчки по горизонтали относительно
страницы. С графикой дело обстоит несколько иначе. Тем не менее, попробуем.
Мы хотим, чтобы рисунок располагался слева. Так и напишем: align=left. Что
получилось? Как раз то, что нужно (рис. 8.10).
Действительно, это удобно. Если текста мало — он размещается справа от кар-
тинки. А если его становится много, то он обтекает ее, и "не поместившиеся"
строчки выводятся как обычно, начиная с левого края окна.

Не следует путать параметр align в дескрипторе <IMG> с одноименным
параметром в дескрипторах <Р> и <Нл>. В последних он управляет вырав-
ниванием текста по горизонтали, а в дескрипторе <IMG> — выравнива-
нием изображения, причем как по горизонтали, так и по вертикали.




100 Глава 8
<H1>3Toanbsp;S»dash; ЯК/Н1>
<IHG src=uasya.gif alt="3To мой автопортрет")
и вот моя биография: родился... учился...
шляпу надел8nbsp;a«dash; всего-то и дел.




А вот моя биография:
родился... учился... шляпу надел — всего-то и
дел.


Рис. 8.9. Попытка разместить текст справа от картинки
"в лоб" не вполне удалась


ali9n=c«nUr>3To4nbsp ; 4iidaeh; ЯК/Ш>
<IMG src=uasya.gif alt="3ro мой автопортрет" align=left>
Я вот ноя биография: родился... учился...
•ляпу Haaen?nbsp-,&mdash; всего-то и дел.




\Му docs\DlALECT\HtmrTutortTESTHTML html




А вот моя
биография:
родился...
учился... шляпу
надел — всего-то
и дел.



Рис. 8.10. Для обтекания картинки текстом используется атрибут
align дескриптора <IMG> — тот же, что и для выравнивания текста

А как быть, если справа от картинки еще достаточно места, но текст нужно
вывести не там, а под ней?



101
Графика на Web-странице
Идея номер один: поместить текст в отдельный абзац. В MS Word подобный
прием работает. А в HTML? К сожалению, нет (рис. 8.11). Дескриптор <Р> отме-
няет выравнивание текста относительно окна, заданное параметром align в пре-
дыдущем дескрипторе <Р>, но не отменяет выравнивание изображения относи-
тельно текста, заданное в дескрипторе <IMG>.


<Н1 align=center>3To8nbep;a»dash; ЯК/HI>
(IMG src=uasya.gif alt="3ro ной автопортрет" align=left>
<р>Я вот ноя биография: родился... учился...
•ляпу надеп5пЬврifimdash: всего-то и ДСП.




D:\My docs\DIAi_ECT\HtmlTutoATl|j




А вот
МОЯ ™
биографи"
родился..!
учился... -/*</'
шляпу
надел —
всего-то и дел.
I


Рис. 8.11. Для того чтобы изменить тип
обтекания изображения текстом, деск-
риптор <Р> не подходит

Для того чтобы изменить способ обтекания изображения текстом, используют
уже знакомый нам дескриптор <BR>. Только одного этого дескриптора теперь не-
достаточно. Нам потребуется его параметр clear. Этот параметр позволяет отме-
нить предыдущий режим выравнивания. Так, если присвоить параметру clear
значение all, следующая строка начнется под картинкой, даже если сбоку от по-
следней еще остается место (рис. 8.12). На случай если рисунков много, причем
одни прижаты к правому краю окна, а другие — к левому, предусмотрены еще
два значения этого параметра: если clear=right, следующая строка начнется в том
месте, где правый край окна броузера свободен от рисунков, а если clear=left -
то там, где от рисунков свободен левый край окна.




102 Глава 8
<H1 ali9n=center>3Toanbsp;audash; ЯК/HI >
<IMG src isya.gif alt="3ro мой автопортрет" align=left>
вот ноя
<BR SHSZEDQ^ биография: родипся... у ч и л с я . . .
ляпу наделSnb6p;S»dash; всего-то и дел.




D:\My docs*iDIALECT\HtmlTutoiYTE




А вот моя биография: родился...
учился... шляпу надел — всего-
то и дел.


Рис. 8.12. Для того чтобы текст начинался
с новой строки, нужно воспользоваться
дескриптором <BR> с параметром clear


Выравнивание по вертикали
Есть еще одно любопытное применение картинок — внутри текста, где они
иногда заменяют отсутствующие в распространенных шрифтах символы. Так,
благодаря распространению Internet стали популярными значки, изображающие
эмоции, — так называемые "смайлики". Первоначально смайлики рисовали с
помощью уже стандартных символов, которые есть на любой клавиатуре: :-). Пе-
реверните страницу на 90° — и увидите улыбающуюся рожицу.
Со временем улыбающиеся человечки стали появляться в разных шрифтах, а на
Web-сайтах, особенно на Internet-форумах, стали широко применяться не только
улыбающиеся и грустные рожицы, но и раскрашенные во всевозможные цвета. Эти
рожицы, а также другие мелкие графические элементы, иногда бывает полезно вы-
ровнять по вертикали относительно строки. Для выравнивания изображений по
вертикали используется уже знакомый нам атрибут align, которому присваиваются
значения absbottom, absmiddle, baseline, bottom, middle, texttop и top.
He многовато ли?
Действительно, много. И не потому, что строка узкая. А потому, что эти семь
параметров описывают пять положений изображения относительно строки
(рис. 8.13). Значение absbottom соответствует выравниванию по нижним высту-

103
Графика на Web-странице
пающим элементам букв в строке, baseline и bottom — по нижнему краю строки,
absmiddle и middle — по середине, texttop — по верхнему краю и top — по верх-
ним выступающим элементам.


(Н1 Жак депа?</Н1>
<Р align=right><IXSMflLL>HTpeHHflfl пьеса
япя одного лица</5МШ.Х/1>
<Р>Проспап <IMG src="s3.gif" ali9n="absbotton">,
умылся <IMG erc="s2.gif" align="absmiddle">,
поеп <IMG src="sl.gif" align="baseline">.
выпил <IMG src="s1.gif" align="botton"> кофе,
cen а автобус <IHG src="s2.gif" align="«iiddle">.
приехап <IMG src="s2.gif" align="texttop">,
успел вовремя <IMG src="s1.gif' align="top">!




Как дела?
Утренняя пьеса для одного лица J'

Проспал ф, умылся ®, поел Ф,
выпил • кофе, сел в автобус @,
приехал ®, успел вовремя @\
i
Рис. 8.13. С помощью параметра align мож-
но выравнивать изображение по вертикали
относительно строки текста


Картина в раме
Как отделить картинку от текста? Правильно — заключить в рамку.
Для этого вовсе не обязательно рисовать рамку в графическом редакторе. Если
речь идет о простой черной рамке (только, надеемся, не очень толстой!), то го-
раздо проще и быстрее воспользоваться параметром border дескриптора <IMG>.
Значение этого параметра определяет толщину рамки в пикселях (рис. 8.14).
Если фон изображения отличается от фона всей страницы, тонкий раз-
делитель между ними смотрится особенно уместно.




104 Глава 8
align=c»nter>3Toanbsp;ai«dash; ЯК/Н1>
<IMC src=uasya.gif align=left
вот моя биография: родился... учипся..
шпяпу над*л?пЬвр;Smdash; всего-то и дел




Это —Я!
А вот моя
биография:
родился... учился...
шляпу надел —
всего-то и дел




Рис. 8.14. Параметр border определяет толщину рам-
ки в пикселях

Изображения, которые "по совместительству" являются гиперссылками,
по умолчанию заключаются в рамку толщиной 2 пикселя. Это часто
выглядит неаккуратно и не к месту. Поэтому в таких случаях параметру
border в дескрипторе <IMG> специально присваивают значение 0:
<img src=button.gif border=0 alt="KHomca без рамки">
Подробнее о гиперссылках читайте в главе 9.


Отступы
Вы наверняка обратили внимание на то, что текст на рис. 8.14 разместился че-
ресчур близко от края изображения. Это, пожалуй, не совсем красиво. Было бы
лучше отступить на пару миллиметров.
Как это сделать?
Конечно, можно, поплевав на руки, открыть Photoshop и внести соответствую-
щие изменения в графический файл: собственноручно нарисовать рамку, добавить
отступы... Не знаю, как вам, а мне из-за таких мелочей редактировать графику
лень. А при мысли, что это придется делать каждый раз, как захочется увеличить
или уменьшить отступы, просто мурашки бегут по затекшей спине. И наконец,
главное: всегда, когда что-то переносится из HTML-кода в графический файл, уве-
личивается размер последнего, а значит, и время загрузки всей страницы.



105
Графика на Web-странице
Гораздо проще задать отступы в HTML-коде. Для этого в дескрипторе <IMG> пре-
дусмотрены параметры vspace и hspace, определяющие в пикселях расстояние между
изображением и текстом по вертикали и горизонтали, соответственно (рис. 8.15).
ЙТЕЗТНТМи-Бл


<Н1 align:c*nt»r>3To8nbsp;?«dash; ЯК/HI >
<IHG src=uasya.gif align=l«ft border=l
hspace=40 uspace=2G»
Я вот ноя биография: родился... учился...
шляпу наделSnbsp;Sndaeh; всего-то и дел.
fl отступы от меня до биограФии&пЬзр;Sndash;
40Snbop,-пикселей по горизонтали и
204nbsp; по вертикали



0. T . t ' J t X Ода'.юич. fiCMUl-i ПОИСК

D:\My docs\DlALECT\HtmlTutoATESTHTMLhtml




Это —Я!
А вот моя
биография:
родился...
учился... шляпу
надел — всего-то
и дел. А отступы
от меня до
биографии —
40 пикселей по
горизонтали и 20 по вертикали


Рис. 8.15. Параметры vspace и hspace задают отступы до
текста по вертикали и горизонтали, соответственно


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




106 Глава 8
Есть и другой способ сохранения изображений — векторный. При этом
изображение рассматривается как набор геометрических фигур, обла-
дающих определенными свойствами, — координатами, формой контура,
цветом контура и внутренней области и т.п.
У каждого из этих способов хранения изображения — векторного и рас-
трового — есть свои преимущества и недостатки. Так, растровые форматы
обеспечивают более естественное, — а значит, и более компактное — со-
хранение таких изображений, где сложно выделить определенные геомет-
рические объекты, где все решает переход цвета. Это относится, например
к фотографиям. Векторные форматы, наоборот, более эффективны при
сохранении рисунков и чертежей, т.е. таких изображений, которые сфор-
мированы набором линий, цветовых областей с четко очерченными края-
ми и других объектов, которые можно легко описать математически.
Так сложилось, что в электронной полиграфии прижились главным об-
разом растровые форматы. Все попытки создать универсальный, обще-
принятый векторный формат для Web пока привели к весьма ограни-
ченным результатам, таким как Flash.
См. также Лит Г., Финкельштейн Э. Macromedia Flash MX для "чайни-
ков". К.: Диалектика, 2002.
В Internet главным образом используются два растровых графических форма-
та — GIF (Graphic Interchange Format), первоначально разработанный компанией
CompuServe, и JPEG, созданный Объединенной группой экспертов по фотогра-
фии (Joint Photographic Experts Group). Им соответствуют файлы с расширениями
*.gif и *. jpg. У каждого из этих форматов есть своя область применения, в соот-
ветствии с его особенностями. Рассмотрим эти особенности подробнее.
Сжатие. В обоих форматах — и в GIF, и в JPEG — используется внутреннее
сжатие изображений. Для того чтобы в этом убедиться, достаточно сжать файл
любого из этих форматов с помощью программы-архиватора. Размеры архива и
исходного файла практически не отличаются. Нетрудно догадаться, что именно
поэтому данные форматы были выбраны для представления графики в Internet:
зачем нагружать линии связи лишними байтами?
Но алгоритмы сжатия в форматах GIF и JPEG отличаются. Изображения в
файлах GIF сжимаются без потерь информации, в то время как в JPEG реализо-
вано сжатие с потерями. В результате файл JPEG может оказаться втрое меньше
файла GIF с тем же изображением.
Количество цветов. В формате GIF количество цветов не может превышать 256.
При этом, если в рисунке используется меньшее количество цветов, например 2 —
черный и белый, — то информация об остальных 254 цветах не сохраняется. В
JPEG допускаются полноцветные изображения с 16,7 млн цветов. Но если в рисун-
ке цветов меньше, то он все равно преобразуется в полноцветное изображение, и
для каждого пикселя сохраняется информация о наличии/отсутствии каждого цве-
та. Поэтому, как правило, изображения, состоящие из небольшого количества цве-
тов, — рисунки, чертежи — сохраняются в формате GIF, а изображения, где важно
сохранить всю палитру цветов, например фотографии, в формате JPEG.

Графика на Web-странице 107
Кроме того, в отличие от палитры JPEG, одному из 256 цветов палитры GIF
присвоено значение "прозрачного". Это очень полезное свойство широко ис-
пользуется Web-дизайнерами.
Первое, очевидное его применение — когда нужно разместить на странице не-
прямоугольное изображение, фон которого отличается от фона страницы. Такое
изображение помещается в файл GIF с прозрачным фоном — и задача решена.
Кроме того, прозрачный "цвет" нашел в Web-дизайне еще одно применение: в
виде GIF-файла, в котором хранится 1 "прозрачный" пиксель.
Какая польза от такой, с позволения сказать, картинки?
Внешность, — а в данном случае, отсутствие всякой внешности — обманчива.
Однопиксельные прозрачные GIF-изображения применяются в Web-дизайне
сплошь и рядом — везде, где дизайнер не хочет полагаться на порой ненадежные
средства стандарта HTML. Мы еще не раз с ними встретимся, а пока приведем
только два примера такого применения.
1. Точный отступ между строчками. Как известно, в HTML существует два ва-
рианта отступа: большой (между абзацами) и поменьше (между строчками).
Если мы хотим сами регулировать это расстояние, можно воспользоваться
прозрачным GIF, "растянув" его в высоту, насколько нужно (рис. 8.16).


Расстояние между этой ci >чкой
<BRXIMG src=l.gif 1пэтпявдд1хвн>
и следующей регулируется прозрачным GIF
soft Internet Expl.
:s\DIALECT\HtmlTutor\TESTHTML.html - Mic



I
И )*Псреиоо • Сгмлки:
D:\My docs\DIALECT\HtmlTutoi\TESTHTMLhtml


Расстояние между этой строчкой

и следующей регулируется прозрачным GIF


Рис. 8.16. С помощью прозрачного GIF можно регулировать расстоя-
ние между строками
2. Красная строка. Как известно, дескриптор <Р> не предусматривает принятой
в отечественной полиграфии "красной строки" в начале абзаца (см. гла-
ву 2). Однако реализовать соответствующий отступ можно с помощью про-
зрачного GIF, "растянув" его в ширину на соответствующее количество
пикселей (рис. 8.17).




108 Глава 8
<PXIMG src=l.GIF
Этот абзац начинается с Slaquo;красной
crpoKH&raquo;, размер OTCTynaSnbsp:&ndash
SQSnbsp;пикселей




D:\Mydocs\DIALECT\HtnilTutoiYrESTHTMLhtml



Этот абзац начинается с «красной
строки», размер отступа — 30 пикселей


Рис. 8.17. Абзац с "красной строкой", выполнен-
ный с помощью прозрачного GIF

Анимация. В отличие от JPEG, формат GIF позволяет сохранить в одном фай-
ле несколько изображений, снабженных управляющими блоками. Это широко
используется для создания небольших анимированных картинок.
Анимированные GIF-изображения широко используются в баннерах и
прочей Internet-рекламе. Кроме того, на Web-страницах, посвященных
развлечениям, много анимированных кнопок, маркеров и других худо-
жественных элементов. В Internet есть целые хранилища таких готовых
аксессуаров. Однако пользоваться анимацией следует осмотрительно:
мелкие мельтешащие объекты отвлекают внимание посетителя от того
основного дела, ради которого он пришел на вашу страницу, и довольно
часто вызывают раздражение. Лучше пользоваться таким правилом:
анимацию, как и любой другой броский элемент, следует использовать
только тогда, когда на то есть серьезные причины.
Тем, кто решит серьезно заняться графикой для Internet, рекомендую
изучить книгу Мак-Клелланд Д., Обермайер Б. Photoshop 7для "чайников".
К.: Диалектика, 2002.


Резюме
Для размещения графических элементов на Web-странице используется сле-
дующая технология: изображение сохраняется в отдельном файле, а в HTML-код
вставляется ссылающийся на него дескриптор <IMG>. Свойства изображения, раз-
мещаемого на странице, определяются параметрами дескриптора <IMG>.
Имя файла, в котором находится изображение, и путь к нему определяются пара-
метром src. Задавая путь, нужно руководствоваться правилами, принятыми для запи-
си URL. Эти правила отличаются от правил записи пути к файлу в ОС Windows. В
частности, имена папок и файлов разделяются не обратными, а прямыми косыми, а
строчные и прописные буквы различаются. Кроме того, в именах файлов, передавае-
мых по Internet, не рекомендуется использовать пробелы и кириллицу.

109
Графика на Web-странице
Ширина и высота изображения определяются параметрами width и height, со-
ответственно, и задаются в пикселях. Эти параметры можно использовать как для
изменения параметров изображения, так и для того, чтобы определить их заранее.
Первый способ применения параметров width и height используется достаточно
редко, так как при увеличении маленьких изображений ухудшается их качество, а
уменьшение приводит к нерациональной загрузке линий связи. Второй способ
применяется достаточно широко, так как позволяет сразу, не дожидаясь оконча-
тельной загрузки изображений, разместить элементы Web-страницы в соответст-
вии с замыслом дизайнера.
Часто изображения снабжаются комментирующими надписями, указанными в
качестве значения параметра alt. Эти надписи появляются рядом с указателем
мыши, наведенным на изображение.
Для определения способа обтекания графики текстом используется параметр
align. Этот параметр описывает выравнивание не только по горизонтали — по
левому краю (значение left) или по правому краю (значение right), — но и по
вертикали относительно той строки, в которой размещено изображение. Значение
absbottom соответствует выравниванию по нижним выступающим элементам букв
в строке, baseline и bottom — по нижнему краю строки, absmiddle и middle — по
середине, texttop — по верхнему краю и top — по верхним выступающим эле-
ментам. Для отмены обтекания изображения текстом используется дескриптор
<BR> с параметром clear, который принимает значения right (отмена обтекания
справа), left (отмена обтекания слева) и all (отмена всех типов обтекания)
Для отделения изображения от текста используются два средства — рамки и
отступы. Параметр border определяет толщину рамки в пикселях. Цвет такой
рамки всегда черный. Для создания более сложных рамок следует использовать
графический редактор. Горизонтальный и вертикальный отступы между изобра-
жением и текстом задаются в пикселях с помощью параметров hspace и vspace.
Изображения для Internet обычно хранятся в файлах форматов GIF и JPEG. Вы-
бор этих форматов для Internet определяется компактностью хранения информа-
ции: она хранится там в сжатом виде и, следовательно, при ее передаче нагрузка на
линии связи меньше, чем при передаче несжатых изображений. В формате JPEG
сохраняются полноцветные изображения, в частности качественные фотографии. В
формате GIF хранятся изображения с ограниченным количеством цветов, а также
анимированные изображения и изображения с прозрачным фоном. Кроме того, в
Web-дизайне широко применяется GIF-изображение, представляющее собой 1 пиксель
прозрачного "цвета". С его помощью можно, в частности, регулировать расстояние
между строками, а также создавать отступы заданной величины.


Тесты
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <IMG згс="Мои flOKyneHTbt\vasya.gif">
б) <IMG src="Mydoc\vasya.gif">


110 Глава 8
в) <IMG src="Mydoc/vasya.gif">
г) <IMG src=Mydoc/vasya.gif>
д) <IMG src="Mydoc/vasya.tif">
е) <IMG src="Mydoc/vasya.GIF">
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <IMG src=vasya.gif border=l bordercolor=red>
б) <IMG src=vasya.gif border=l>
в) <IMG src=vasya.gif border=l,5>
r) <IMG src=vasya.gif border=1.5>
д) <IMG src=vasya.gif border=red>
е) <IMG src=vasya.gif border=0>
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <IMG src=vasya.gif alt=vasya.jpg>
б) <IMG src=vasya.gif alt=vasya>
в) <IMG src=vasya.gif alt="3To Вася">
г) <IMG src=vasya.gif alt=3TO Вася>
д) <IMG src=vasya.gif alt=Eto Vasya>
4. Для того чтобы текст обтекал изображение справа, используется следующий код.
а) <IMG src=pict.gif align=right> текст
б) <IMG src=pict.gif align=left> текст
в) <IMG src=pict.gif> текст
г) <IMG src=pict.gif align=left><BR clear=right> текст
д) <IMG src=pict.gif align=left><BR clear=left> текст
5. Для того чтобы текст обтекал изображение слева, используется следующий код.
а) <IMG src=pict.gif align=right> текст
б) <IMG src=pict.gif align=left> текст
в) <IMG src=pict.gif> текст
г) <IMG src=pict.gif align=left><BR clear=right> текст
д) <IMG src=pict.gif align=left><BR clear=left> текст
6. Для того чтобы изображение разместилось по середине строки, нужно на-
писать следующий код.
а) <IMG src=pict.gif align=center>
б) <BR clear=center><IMG src=pict.gif>
в) <IMG src=pict.gif><BR clear=center>
r) <P align=center><IMG src=pict.gif>

Графика на Web-странице 11
1
Глава 9

Гипертекстовые ссылки
В этой главе...

4 Точки входа в гипертекст
4 "Якоря" в море Internet
4 Закладки
4 Ссылки, которые не являются ссылками
4 Ссылки-картинки
4 Виртуальная навигация


Точки входа в гипертекст
Кто не знает, что такое гиперссылка? На страницах Internet ее видели все. И
не только видели, но и не раз "щупали" мышью. Так не дадите ли определение
сего явления? Непросто, правда?
Действительно, понятное и исчерпывающее "энциклопедическое" определе-
ние гиперссылки встречается нечасто. Вот, например, одно такое определение.
Гиперссылка (hyperlink). Указатель внутри гипертекстового документа, указы-
вающий на другой документ (связывает с другим документом), который также мо-
жет быть гипертекстовым.
А теперь давайте разбирать, что все это значит. Что такое указатель? Любой
программист поймет... А не программист? Возможно, поймет интуитивно: раз
указатель — значит, на что-то указывает. Но это все равно что сказать: раз ссыл-
ка — значит, на что-то ссылается. Раз "гипер" — значит, на гипертекстовый до-
кумент. Вот и все.
Но как раскрыть в сухом определении всю прелесть этого маленького элемен-
та Web-страниц? Мгновенный (в идеале) переход из некторой точки одного элек-
тронного документа в соответствующую ему точку другого такого же документа
чем-то напоминает гиперпространственные порталы, по которым герои фанта-
стических романов переходят из одной главы в другую...
Как выглядит гиперссылка? Это знает любой, кто провел в Internet хотя бы
пятнадцать минут: указатель мыши, поменявший форму, — была стрелка, стала
рука с вытянутым указательным пальцем. Если щелкнуть на том месте, на кото-
рое показывает палец, то обязательно что-нибудь произойдет: откроется новая
страница, появится окно, в котором можно написать электронное письмо, начнет
закачиваться файл...
Естественно предположить, что код, "отвечающий" за гиперссылку, должен
состоять из двух частей: одна определяет "точку входа" (место, откуда происхо-
дит переход), а вторая — "точку выхода", или то, что происходит, если щелкнуть
в "точке входа".
Так и есть. "Точкой входа" является фрагмент исходной страницы — текст,
графика или то и другое вместе, размеченное дескриптором <А>, а "точку выхода"
определяет параметр дескриптора <А>, внутри которого заключен этот фрагмент.


"Якоря" в море Internet
Да-да, настоящие якоря. Дело в том, что название дескриптора <А>, с помо-
щью которого создаются гиперссылки, происходит от английского слова anchor —
"якорь". В самом деле, если присмотреться повнимательнее, что-то в этом есть:
этот дескриптор как бы цепляется за объект, на который указывает ссылка. И вот
уже страница надежно связана с этим объектом, даже если последний находится
от нас за сотни серверов и тысячи километров кабелей...
Дескриптор <А> — парный. Все, что находится между <А> и </А>, является
"якорем", гиперссылкой. За что же цепляется якорь? Что служит надежным при-
знаком "точки выхода"?
В первую очередь, конечно, это имя файла. Его указывают в параметре href
дескриптора <А>. Вообще, дескриптор <А> без параметров, очевидно, вещь бес-
смысленная — как якорь без лап...


. а
1>тл,:;е <>;,4(.i.i- . - . .
\DIALECTtHtmlTutor\TESTHTML html


Хотите увидеть, как работает
гиперссылка? Щелкните




Вот так и работает!

Рис. 9.1. Гиперссылка всегда состоит из двух
частей — "точки входа" и "точки выхода"
Итак, для того чтобы одна Web-страница ссылалась на другую, в коде первой
должен содержаться примерно такой фрагмент:
Хотите увидеть, как работает гиперссылка?
Щелкните <А href="раде2.html"> здесь!<А>

Глава 9
114
И тогда мы увидим то же, что и на рис. 8.1, разумеется, при наличии файла
page2.htm.
Если файл, на который указывает гиперссылка, находится в другом ка-
талоге или на другом компьютере, нужно указывать путь к нему по пра-
вилам, описанным в главе 8.


Закладки
Действительно, гиперссылка — могучее средство. В сущности, это готовый ин-
струмент, решающий одну из самых важных задач в любой книге, будь она бумаж-
ная или электронная, — задачу перехода в нужную точку из оглавления или пред-
метного указателя. В бумажной литературе, кстати, последняя задача так и не ре-
шена удовлетворительно: найти по ссылке в предметном указателе страницу, где
объясняется нужное понятие, еще можно, но отыскать на странице сам термин бы-
вает непросто. И, в любом случае, это довольно скучная и долгая операция.
То ли дело гипертекстовая ссылка! Переход по ней происходит мгновенно и
сразу в нужную точку.
Стоп.
В нужную точку? До сих пор мы выяснили только, как перейти на нужную
страницу. Конечно, можно разбить электронную книгу так, чтобы каждая глава
размещалась в отдельном файле. (Кстати, именно так очень часто и поступают,
чтобы уменьшить размер загружаемого файла.) Но как поступить, если мы ищем
некий термин, описываемый в середине главы? Понадеяться на встроенную в
броузер функцию контекстного поиска?
Конечно, можно поступить и так. Но это значит — заставить посетителя стра-
ницы каждый раз вручную вводить искомый термин в окно поиска. Верьте мне
на слово: ему это надоест, и очень быстро. И тогда он помянет вас словом — не
обязательно тихим и вряд ли незлым...
Как организовать переход не только на нужную страницу, но в нужную точку
страницы? В текстовых редакторах для этого предусмотрен специальный инстру-
мент — закладки. То есть некие именованные метки, по которым можно отыскать
соответствующую им точку документа.
В HTML такие закладки тоже есть. По реализации они очень похожи на мет-
ки, используемые программистами для переходов внутри программы. Для перехо-
да по такой закладке в HTML-коде требуется создать два объекта.
В "точке выхода" создается закладка, которой присваивается какое-нибудь
имя. Это имя может содержать любые латинские буквы, а также цифры. Напри-
мер, метку для перехода в начало страницы можно назвать begin, а для перехода в
конец — end. В соответствующих точках кода страницы ставятся дескрипторы <А>
с параметром name, которому присвоены эти значения:
<!-- начало страницы>
<А name=begin>
<А name=end>
<!-- конец страницы>
Гипертекстовые ссыпки 115
Лучше выбирать меткам осмысленные имена. Броузеру все равно, но
вам потом будет проще читать и редактировать код.

Теперь, если мы хотим сослаться не просто на файл, а на конкретное место
этого файла, нужно, кроме имени файла, указать имя закладки. По правилам
HTML разделителем между этими именами служит знак #:
<А href="page2.html#begin">nepeUTH в начало страницы page2.html</A>
<А href="page2.htmltend">nepeiJTH в конец страницы page2.html</A>
Обратим внимание: в наших руках теперь средство, позволяющее
"перепрыгивать" не только с одной страницы на другую, но между разными точка-
ми одной и той же страницы. В последнем случае указание имени файла в ссылке
становится излишним, и его можно опустить. Если переход по ссылке происходит в
пределах одного файла, достаточно ограничиться указанием только имени метки:
<А href="#begin">nepeuTH в начало текущей страницы</А>
Проведя достаточно времени в Internet, вы заметите, что ссылки ведут
себя по-разному: в одних случаях открываются в том же окне, в дру-
гих — в новом. Такое поведение гиперссылок определяется параметром
target. Подробнее мы поговорим о нем, когда займемся фреймами (см.
главу И). А пока что обратим внимание на два его предопределенных
значения - _blank и _self (обязательно со знаками подчеркивания впе-
реди!). Если в дескрипторе <А> указан параметр target=_blank, то объект,
на который указывает эта гиперссылка, всегда открывается в новом ок-
не. Если же target=_self, то объект открывается в том же окне, что и
документ, содержащий гиперссылку. Последний режим используется по
умолчанию, так что указывать его специально не обязательно.
У значения _blank параметра target есть свои преимущества и недостат-
ки. Как показывает практика, в большинстве случаев посетители стра-
ниц предпочитают сами решать, в каком окне открывать новую страни-
цу, — в новом или в уже существующем. И это несмотря на то, что, как
правило, они все же предпочитают новое окно! Такой вот парадокс... Но
иногда использование значения _blank удобно и оправдано, например,
когда на странице много ссылок. Такие ситуации возникают, в частно-
сти, на страницах поисковых серверов.


Ссылки, которые не являются ссылками
Да, такой вот парадокс: гипертекстовая ссылка далеко не всегда ссылается на
гипертекстовый документ. На самом деле в качестве значения параметра href
можно указать ссылку на любой объект. Если броузер распознает в нем документ,
который он может открыть для просмотра, то он так и поступит. В противном
случае он просто предложит вам загрузить этот файл. Броузеры последних версий
позволяют просматривать (разумеется, если на компьютере установлено соответ-
ствующее приложение) документы MS Word, MS Excel, Adobe Acrobat и др.

Глава 9
116
Мы рассмотрим несколько наиболее интересных и широко распространенных
способов применения гиперссылок не совсем по прямому назначению.
Загрузка файлов. Если значением параметра href является имя файла, который
броузер не может открыть (например, zip-архив), то броузер предлагает загрузить
этот файл из Internet и сохранить на диске, чтобы пользователь потом сам решил,
что с ним делать. Если на компьютере установлена специальная программа для
загрузки файлов, такая как Golzilla или GetRight, броузер передает управление ей.
В противном случае он загружает файл самостоятельно. Выглядят подобные
ссылки примерно так:
<А href=price.zip> Скачать прайс-лист </А>
Этим свойством гиперссылок широко пользуются для передачи через Internet
самой разной информации. Обычно в целях ускорения загрузки она выкладыва-
ется на сайты в виде архивов. Хотите попробовать сами? Тогда загляните на лю-
бой сайт бесплатного ПО. Кстати, можете поискать там подходящую программу
для загрузки файлов.

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

Ускоренная отправка писем. Редкий сайт обходится без ссылки вроде "Напи-
сать Web-мастеру". По ней Web-мастер желает получать письма от благодарных
посетителей и будущих заказчиков, а получает вирусы и горы спама. И тем не
менее упрямо ставит в углу главной страницы ссылку на свой почтовый ящик:
как ни крути, а без обратной связи не обойтись. Чтобы ее организовать, исполь-
зуется гиперссылка, где значением параметра href является адрес электронной
почты, перед которым стоит ключевое слово mailto: (рис. 9.2).
Если щелкнуть на такой ссылке, запускается почтовая программа (надо пола-
гать, на компьютере посетителя она есть!) и открывается бланк письма, где в
строке адреса уже стоит e_polons@ukr.net. Дальнейшее управление передается
почтовой программе.
Но это еще не все. Можно составить письмо полностью, с темой и содержи-
мым! Для этого параметру href присваивается длинное значение, составленное по
следующим правилам.




Гипертекстовые ссылки 117
Для того чтобы написать мне
письмо, щелкните (здесь!
__Ф


t, -'• 1 if -; HJ t'4 ^ 1 -




Рис. 9.2. С помощью дескриптора <А> можно создать ссылку, по
которой будет открываться заготовка для электронного письма

1. После адреса вводится код ?subject=, а после него — текст темы письма.
2. Если нужно написать что-то в теле письма, то этот текст вводится после
текста темы. Разделителем служит код ;body=.
3. Все пробелы, точки и прочие знаки, которые броузер может посчитать слу-
жебными символами, в теме и теле письма заменяются их ASCII-кодом, пе-
ред которым стоит символ %.
Посмотрим, как это выглядит на примере (рис. 9.3). Диковато... Зато потом
получается красиво.
Как-то раз меня спросили: можно ли с помощью такой ссылки отправить
письмо сразу нескольким адресатам? Ох, уж эти любители спама... Впрочем, лад-
но, отвечу: можно. Формируя письмо для отправки, броузер не берет на себя
функций почтовой программы, а только заполняет соответствующие поля письма.
Что вы в них напишете, то он туда и поместит, не заботясь о дальнейшем. Что
пишут в строке адреса, если письмо направляется в несколько адресов? Разумеет-
ся, список этих адресов через точку с запятой. Именно такой список нужно на-
писать после mailto:, и письмо будет разослано.




118 Глава 9
Для того чтобы написать мне письмо, щелкните
<fl href*"mailto:e_polone@ukr.n»t?subjeet=nMcbHO,X28
отправленно»Х28поХ2егип»рссыпке«а«р;Ьо<1у=Приоет112в
А7.20вам7.20случалось7.20когда-нибуАь7.20получатьХ20письна7.2б
от7.2Вброузера?" >эдесь</н>




Для того чтобы написать мне
письмо, щелкните десь

^^


ИЗк°м>' polnnsiaukr net


Письмо, отпрввленное по гиперссылке




Привет! А вам случалось когда-нибудь
получать письма от броузера?
:


*1



Рис. 9.3. Код для отправки писем стандартного содер-
жания выглядит жутковато. Но результат того стоит

Запуск программ. Наконец, следует обратить пристальное внимание еще на один
способ использования гипертекстовых ссылок — ссылки на выполняемые файлы.
Такие ссылки встречаются в Internet достаточно часто. Большинство выпол-
няемых файлов, которые загружаются таким образом, — самораспаковывающиеся
архивы. Но встречаются и другие программы.
Итак, напишем код, с помощью которого с Web-страницы, по идее, должна
запускаться произвольная программа. В сущности, ничего сложного или незна-
комого здесь нет — обычная ссылка на файл. Единственная особенность заклю-
чается в том, что при обращении по ссылке броузер предлагает на выбор два дей-
ствия: запустить программу немедленно или сохранить ее на диске (рис. 9.4).
Такое предупреждение выводится не зря. Трудно придумать более
"питательную" среду для компьютерных вирусов, чем Internet. Поэтому,
если вы загружаете файл из Сети, лучше сохранить его на диске, прове-
рить антивирусной программой и только потом запускать на выполнение.




Гипертекстовые ссылки 119
и!™*,-, naat» импн
хочу запустить отсюда свой любимый




Я хочу запустить отсюда свои
любимый тетрис
^5




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


Ссылки-картинки
Едва ли не чаще текста в качестве гиперссылок используются изображения —
всевозможные пиктограммы, логотипы, миниатюрные фотографии и даже целые
графические "поля" ссылок, когда разные фрагменты одной картинки служат
ссылками на различные объекты.
Используя в качестве гиперссылки картинку, следует помнить об одной
особенности, уже упоминавшейся в главе 8: если у обычных изображений
по умолчанию рамка отсутствует, то изображения, "по совместительству"
служащие гиперссылками, по умолчанию заключаются в черную рамку
толщиной 2 пикселя. Это далеко не всегда выглядит так эстетично, как,
возможно, замышляли разработчики стандарта. Поэтому дескрипторы
<IMG> таких изображений обычно снабжаются параметром border=0.

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


120 Глава 9
складывалось целостное представление о странице. Такие объекты — одно изо-
бражение на несколько ссылок — описываются картами изображений (image map).
Что такое карта изображения? Представим себе, что у нас есть картинка
(рис. 9.5), разные объекты которой должны служить ссылками на разные Web-
страницы. (На самом деле это изображение взято из мультимедийной версии
Британники, но мы же можем помечтать, вообразив себя разработчиками элек-
тронной энциклопедии на базе HTML, верно?) Что нам нужно, чтобы сделать за-
думанное, не разрезая изображение на части?




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

Очевидно, необходима некая конструкция, позволяющая разметить картинку,
разделить ее на "зоны влияния" разных гиперссылок. Причем, в идеале у нас
должна быть возможность создавать зоны разной формы: например, не только
прямоугольные, но и круглые.
Именно для этого — для разделения изображения на зоны, каждой из которых
может быть поставлена в соответствие гиперссылка, — и применяются карты
изображений. Формируются они так.
Представим, что нам нужно разбить на зоны прямоугольное поле, размеры ко-
горого соответствуют размерам нашего изображения. Нам понадобится как-то
отмечать координаты этих зон. Примем за точку отсчета горизонтальных и верти-
сальных координат верхний левый угол изображения.
Для создания карты изображения используется конструкция, состоящая из де-
жриптора <МАР> и "вложенных" в него дескрипторов <AREA>. Дескриптор <МАР> (от
шглийского тар — "карта") определяет собственно карту изображения целиком,
i дескрипторы <AREA> (от английского area — "область", "зона") описывают от-
(ельные области этой карты. Следовательно, дескриптор <МАР> является парным,
i <AREA> — непарным. Вся же конструкция выглядит примерно так:


121
'ипертекстовые ссылки
<МАР параметры карты>
<AREA параметры области>
<AREA параметры другой областй>

</МАР>
Какие параметры есть у всей области? Размеры? Положение? Но все эти свой-
ства определяется самой картинкой, так что описывать их заново нет смысла.
Достаточно связать карту изображения с самим изображением. Именно за это
"отвечает" единственный параметр дескриптора <МАР> — name. Благодаря ему кар-
те присваивается уникальное имя, которое потом указывается в дескрипторе
<IMG> с помощью специального параметра usemap. Таким образом карта изображе-
ния как бы "накладывается" на само изображение:
<МАР name="mymap">

</МАР>


<IMG src=bigimage.jpg usemap=|mymap border=0>
Имя изображения составляется по тем же правилам, что и другие имена
в HTML. Но обратите внимание: при ссылке на него в значении пара-
метра usemap перед именем карты ставится символ I.
Какие параметры у зон, на которые разбивается изображение? О, здесь наши
возможности гораздо шире. Прежде всего, с помощью параметра shape мы можем
описать форму области: прямоугольник, круг или произвольный многоугольник.
Этим формам соответствуют значения rectangle (или сокращенно rect, использу-
ется по умолчанию), circle (сокращенно circ) и polygon (сокращенно poly). Ма-
ловато? Хочется разнообразия? Не стоит беспокоиться: даже если мы определим
зоны действия гиперссылок приблизительно, посетитель страницы, используя та-
кой неточный манипулятор, как мышь, этого не заметит.
Но знать одну лишь форму областей явно мало. Нужно еще описать их размеры и
положение. Это делается с помощью параметра coords. Значением этого параметра
является заключенный в кавычки список целых чисел. Эти цифры — координаты и
размеры области, измеряемые в пикселях. То, как броузер их трактует, зависит от ее
формы. Как вы думаете, сколько чисел нужно, чтобы однозначно описать круглую
область? Правильно, три: координаты по горизонтали и вертикали (отсчитываются от
верхнего левого угла изображения, помните?) и радиус. Именно в таком порядке они
перечисляются в списке coords. Например, если нужно описать круг радиусом
40 пикселей, отстоящий от верхнего левого угла изображения на 10 пикселей по гори-
зонтали и 20 пикселей по вертикали, нужно написать такой код:
<AREA shape=circ coords="10, 20, 40" другие параметры >
Вероятно, теперь вы догадываетесь, как описать прямоугольник: просто двумя
парами чисел, определяющими координаты его границ. Перечисляются они по ча-
совой стрелке: левая, верхняя, правая и нижняя. Например, прямоугольная область

122 Глава S
размером 40x50, отстоящая от верхнего левого угла изображения на 10 пикселей по
горизонтали и 20 пикселей по вертикали, описывается таким кодом:
<AREA shape=rect coords="10, 20, 50, 70" другие параметры >
Как задать координаты произвольного многоугольника? Вероятно, вы уже до-
гадываетесь: нужно просто перечислить по очереди координаты всех его вершин.
При этом нужно придерживаться только двух правил. Первое: горизонтальная
координата задается раньше вертикальной. Второе: для того чтобы фигура полу-
чилась замкнутой, последняя пара координат должна дублировать первую. На-
пример, прямоугольный треугольник с вершиной, отстоящей от верхнего левого
угла изображения на 10 пикселей по горизонтали и 20 пикселей по вертикали и
катетами, равными 40 и 50 пикселей, соответственно, описывается таким кодом:
<AREA shape=poly coords="10, 20, 60, 60, 10, 60, 10, 20" другие параметры >
И еще одно полезное значение параметра shape: default. Что оно означает, ес-
ли, как мы уже знаем, по умолчанию все области считаются прямоугольными?
Область с параметром shape=default соответствует области, "покрывающей"
все изображение. Это очень удобно: сначала задаем ссылку, которая должна рабо-
тать в тех местах изображения, для которых не созданы ссылки.
Вроде, все. Мы знаем, как задать границы области. Не забыли ли мы чего-то
важного?
Ну, конечно: если это область гиперссылки, то где же сама ссылка? Куда пе-
реходить после щелчка на этой области? За это в дескрипторе <AREA> "отвечает"
тот же параметр, что и в дескрипторе <А> — href. Кроме того, для описания
"неактивных" областей, не имеющих своих ссылок, используется параметр
nohref. У этого параметра нет значений. Для того чтобы сообщить броузеру, что
цанная область не имеет гиперссылки, достаточно написать:
<AREA nohref координаты области >
Как и в других дескрипторах HTML, порядок перечисления парамет-
ров дескриптора <AREA> не имеет значения. Но порядок описания зон
имеет значение: в случае, если эти зоны перекрываются, приоритет
имеет та из них, которая была описана первой. В частности, это следу-
ет учитывать при описании неактивных зон (с параметром nohref): та-
кие зоны описывают первыми.
Теперь, разобравшись в теории, давайте вернемся к нашей картинке из Британни-
си. Разбить ее на зоны можно по-разному. Один из вариантов предлагается на
)ис. 9.6. Как видим, некоторые зоны перекрываются. И хорошо, что у нас есть пра-
1ило перекрытия зон, гласящее, что гиперссылка будет работать для зоны, описанной
гервой. Иначе некоторые зоны пришлось бы описывать более сложными фигурами.
J частности, вместо простого круга, внутри которого находится лупа, мы вынуждены
1ыли бы использовать многоугольник с большим количеством вершин.




'ипертекстовые ссылки -| 23
Рис. 9.6. Изображение, разбитое на зоны гиперссылок.
Разумеется, в окне броузера эти линии не видны

Описывается такая карта изображения следующим кодом:
<МАР name=britan>
<AREA shape=poly coords="26, 125, 247, 125, 244, 445, 129, 493, 75, 450, 26, 125"
href="home.html">
<AREA shape=rect coords="248, 200, 386, 445" href="timeline.html">
<AREA shape=rect coords="411, 200, 543, 442" href="topics.html">
<AREA shape=circ coords="653, 321, 106" href="atlas.html">
<AREA shape=poly coords="745, 218, 911, 218, 845, 457, 745, 457, 745, 218"
href="quiz.html">
<AREA shape=rect coords="18, 452, 325, 672" href="browse.html">
<AREA shape=circ coords="370, 521, 63" href="search.html">
<AREA shape=rect coords="452, 442, 619, 637" href="index.html">
<AREA shape=rect coords="619, 458, 898, 674" href="display.html">
<AREA shape=rect coords="345, 650, 596, 680" href="audio.html">
</MAP>
Осталось "привязать" эту карту к изображению britan.jpg. Для этого помес-
тим в соответствующее место HTML-кода следующий дескриптор:
<IMG src="britan.jpg" usemap=lbritan border=0>
Как рассчитать координаты и размеры областей? Для этого достаточно
воспользоваться любым графическим редактором. В таких приложениях
обычно имеется горизонтальная и вертикальная шкалы или хотя бы раз-
дел строки состояния, где указываются координаты текущей точки.
А как быть тем посетителям страницы, которые скорости ради отключили
отображение картинок в броузере? Смогут ли они пользоваться картами ссылок?



124 Глава ?
Конечно, не видя картинки, это сделать сложно. Но у нас есть возможность об-
легчить им жизнь. Для этого нужно воспользоваться тем же средством, что и при ото-
бражении обычных картинок — параметром alt. Но указывается он не в дескрипторе
<IMG> (точнее, по крайней мере, не только в нем), а в дескрипторах <AREA> (рис. 9.7).
<МАР name=britan>
<AREA shape=poly coords="20,70,170,70,170,305,110,335,55,305,20,70" href="home.html"
а]±="3аставка">
<AREA shape=rect coords="175,170,255,305" href="timeline.html" alt="iKana времени">
<AREA shape=rect coords="290,170,365,305" hre?="topics.html" alt="Разделы">
<AREA shape=circ coords="445,217,80" href="atlas.html" alt="Географический атлас">
<AREA shape=poly coords="510,160,620,160,575,320,505,320,510,160" href="quiz.html"
alt="BHKTOpHHa">
<AREA shape=rect coords="10,325,220,470" href="browse.html" alt="063op">
<AREA shape=circ coords="255,365,63" href="search.html" alt="ItoHCK">
<AREA shape=rect coords="315,305,425,435" href="index.html" alt="Алфавитный указатель">
<AREA shape=rect coords="425,320,625,470" href="display.html" а^="Показать">
<AREA shape=rect coords="240,450,410,470" href="audio.html" alt="3ByKOBoe сопровождение'^
</MAP>
<IMG src="britan.jpg" usemap=#britan alt="3acTaBKa Британники" border=0>


;
ян • и••
D.\Mydocs\DLAJ-ECT\HtmlTutoATESTHTMLhtm




"*:•'. :'.



Рис. 9.7. Отдельные области карты изображения можно
снабжать комментариями




125
г
ипертекстовые ссылки
В дескрипторе <AREA>, как и в обычной гиперссылке, описанной деск-
риптором <А>, действует параметр target. Подробнее о нем читайте в
главе 11.
Другой распространенный способ разбить изображение на несколько
областей, каждая из которых ссылается на отдельный объект, заключа-
ется в физическом разделении этого изображения на несколько графи-
ческих файлов, в каждом из которых содержится своя часть изображе-
ния: Затем эти части помещаются в таблицу (см. главу 10). Как легко
догадаться, главный недостаток такого способа — то, что полученные
области могут быть только прямоугольными. Однако изображение, раз-
битое на более мелкие файлы, быстрее загружается.


Виртуальная навигация
... с помощью якорей! Воистину, у программистов мозги набекрень. По каким
еще морям, кроме виртуальных, плавают не на парусах, не на веслах, а на яко-
рях-гиперссылках?
Так или иначе, но почему-то перемещение по Web-страницам назвали именно
навигацией. И одна из главных задач Web-дизайнера — сделать так, чтобы эта
навигация была как можно удобнее для посетителей его страниц.
Какие особенности дизайна больше всего раздражают посетителей вашего сай-
та? Не знаете? Ладно, меняем вопрос: что больше всего раздражает вас в чужих
сайтах? Лично меня — необходимость пробираться через целый лес ссылок, что-
бы докопаться до нужной информации. И каждый раз, когда загружается очеред-
ная страница, ждать, ждать, ждать...
Представьте себе такую ситуацию: вам нужен прайс-лист некоторой фирмы.
Вы заходите на ее сайт и видите... великолепную заставку с логотипом. Щелкаете
на этой заставке, попадаете на главную страницу, а там — пространная история
компании. Вот черт! Ладно, в углу имеется ссылочка: "Наша продукция". Смот-
рим, что там... Большие фотографии и рекламные проспекты этой самой продук-
ции. Но где же цены?! Ну наконец-то, вот оно: "Загрузить прайс-лист". Уф-ф...
Щелкнем на последней кнопке и ждем загрузки.
Это только на первый взгляд кажется, что понятие "удобство" нельзя описать
математической формулой. На самом деле оно — правда, очень приблизитель-
но — обратно пропорционально количеству переходов по ссылкам, необходимых,
чтобы добраться до нужной информации. Поэтому дизайнеры, планируя структу-
ру сайта, стараются следовать таким правилам.
* Чем выше спрос на информацию, тем ближе к главной странице сайта
она должна находиться. Как определить спрос на информацию? Ну, хотя
бы по посещаемости страницы, на которой она расположена.
* Ссылки-стрелки с надписями наподобие "вернуться в начало" и
"перейти в конец" на длинных, требующих многократной прокрутки
страницах обычно не вызывают у посетителей ничего, кроме глубокой


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


Резюме
Гиперссылки — мощнейшее средство языка HTML, благодаря которому воз-
можны переходы между различными документами и объектами, размещенными в
Internet. Реализуются гиперссылки с помощью дескриптора <А>. Это парный де-
скриптор, внутри которого заключен объект, служащий гиперссылкой, — текст,
графика или то и другое вместе. Основным параметром дескриптора <А> является
href, определяющий ссылку на объект, — другую HTML-страницу, электронное
письмо или файл. Если файл, на который указывает ссылка, может быть открыт в
броузере или в поддерживаемом броузером приложении, он открывается. В про-
тивном случае выполняется загрузка этого файла с сохранением его на диске.
Отдельного внимания заслуживает применение гиперссылок для отправки пи-
сем по электронной почте. Дескриптор <А> позволяет составить шаблон элек-
тронного письма, которое затем посетитель страницы может отправить по адресу,
указанному в параметре href.
Для того чтобы сослаться не просто на страницу, а на ее определенное место,
используются закладки. Закладки — это дескрипторы <А> с параметром name, ко-
торому присвоено уникальное имя. Для того чтобы сослаться на такую закладку,
в значении параметра href, кроме URL файла, указывают имя закладки. Раздели-
телем между URL и именем закладки служит символ #.
Кроме описанных свойств, дескриптор <А> имеет еще одно: с помощью пара-
метра target он позволяет выбрать окно, в котором будет открыт новый объект.
Подробнее этот параметр будет описан в главе И, а пока что мы можем пользо-

1˜ипертекстовые ссылки 127
ваться двумя его предопределенными значениями — _self и _blank. Первое из
них предполагает открытие объекта, на который указывает ссылка, в том же ок-
не, что,и документ, где эта ссылка находится, а второе — в новом окне.
Гиперссылкой может служить не только целое изображение, но и его фраг-
менты. Для этого создаются так называемые карты изображений. Карта изобра-
жения — это конструкция языка HTML, образованная с помощью дескрипторов
<МАР> и <AREA>. Дескриптор <МАР> определяет имя карты, по которому она впо-
следствии связывается с самим изображением. В параметре usemap дескриптора
<IMG> указывается имя, присвоенное карте с помощью параметра name дескрипто-
ра <МАР>, предваряемое символом I.
Внутри конструкции <МАР>... </МАР> помещаются дескрипторы <AREA>. Каждый
такой дескриптор описывает параметры определенной области внутри изображе-
ния, которой поставлена в соответствие та или иная гиперссылка. Этими пара-
метрами являются форма, координаты, адрес объекта, на который указывает
ссылка. Кроме того, здесь, как в дескрипторе <А>, действует параметр target и,
как в дескрипторе <IMG>, — параметр alt (см. главу 8).
Форма области определяется параметром shape, который принимает одно из че-
тырех значений: rect (по умолчанию), circ, poly и default. Эти значения соответст-
вуют прямоугольнику, кругу, многоугольнику и всей области изображения. Для ка-
ждой из первых трех форм предусмотрена своя система задания координат. Коор-
динаты области определяются параметром coords. Значением этого параметра
служит текстовая строка, где через запятую перечислены значения координат (в
пикселях), однозначно определяющие размер и положение данной области. Для
круга это координаты центра и радиус, для прямоугольника — координаты левой,
верхней, правой и нижней сторон, а для многоугольника — координаты вершин.
Система гиперссылок, связывающих отдельные страницы Web-сайта, должна
быть тщательно продумана. От удобства этой системы зависит то, насколько
комфортно посетителям будет пользоваться сайтом и, в конечном счете, то, на-
сколько этот сайт будет полезен и им, и вам.


Тесты
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <А> Гиперссылка </А>
б) <HREF> page2.htm </HREF>
в) <А href=page2.htm> Гиперссылка </А>
г) <А href="page2.htm"> Гиперссылка </А>
д) <А target=page2.htm> Гиперссылка </А>
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <А href=page2.htm target=blank> Гиперссылка </А>
б) <А href=page2.htm target=_blank> Гиперссылка </А>
в) <A href=page2.htm target=blank_> Гиперссылка </А>

128 Глава 9
3. Какой или какие из следующих фрагментов HTML-кода, содержащие ссылку
на метку label, которая находится на странице page2.htm, содержат ошибки?
а) <А href=page2.htm name=label> Гиперссылка </А>
б) <А href="page2.htm\label"> Гиперссыпка </А>
в) <А href="page2.htm/label"> Гиперссыпка </А>
г) <А href="page2.htrallabel"> Гиперссылка </А>
д) <А href="page2.htm, label"> Гиперссылка </А>
4. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <А href="mailto:tome8mail.dom"> Написать мне письмо </А>
б) <А href="mailto:tome§mail.dom; subject=IIpHBeT;body=KaK дела?"> Написать
мне письмо </А>
в) <А href="mailto:tome§mail.dom? subject=IIpHBeT;body=KaK дела?"> Написать
мне письмо </А>
г) <А href="mailto:tome?mail.dom? subject=npHBeT;body=KaK%20flena?"> Написать
мне письмо </А>
д) <А href="raailto:tome8mail.dom?subject=npHBeT"> Как дела? </А>
е) <А href="mailto:tome@mail.dom?subject=lipHBeT;"> Как дела? </А>
5. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <МАР name=image>
<AREA shape=triangle coords="10,20,30,40" href=pag2.htm>
</MAP>
б) <MAP name=image>
<AREA shape=rect coords="l0,20,30,40" href=pag2.htm>
</MAP>
в) <MAP name=image>
<AREA shape=poly coords="10,20,30,40" href=pag2.htm>
</MAP>
6. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <МАР name=image>

</МАР>

<<

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

СОДЕРЖАНИЕ

>>