<<

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

СОДЕРЖАНИЕ

>>


D:\My docsSDlALECnHtmlTutoATESTHTM Ц]



Это удало! и 1ЫЙ токот, размеченный
дескриптором <DEL>.
А это — оачсркиутый тсжот,
размеченный дескриптором <S>.


Рис. 6.5. Текст, размеченный как удаленный, выглядит на экране
так же, как текст, заключенный внутрь конструкции <S>... <S>

Хорошо, с зачеркнутым текстом мы разобрались. А как имитировать вставки? В
"бумажных" документах такие места обычно выглядят мало привлекательными: в
лучшем случае над строкой появляется широкая "птичка", а над ней — то, что нужно
вставить. О том, как выглядят менее аккуратные вставки, лучше не вспоминать...
В электронных документах даже помарки выглядят аккуратнее. Например, в
Microsoft Word исправления, вставленные в текст, выделяются подчеркиванием.
Как разметить подчеркнутый текст, мы уже знаем: с помощью дескриптора <U>.
Но это — простое подчеркивание. Для того чтобы указать, что это не просто так от-
форматированный фрагмент, а текст, вставленный после долгих раздумий, использу-
ется логический дескриптор <INS> (от английского insert — "вставка"). <INS> — пар-
ный дескриптор; текст, помещенный внутри конструкции <INS>... </INS>, считается
вставленным и отображается на экране как подчеркнутый (рис. 6.6).

Глава 6
66
Последнее обновление было
<Р align=center>
<DEL>B4epa</DEL>
<INS>ceroflHfl</INS>




Последнее обновление было
вчера сегодня


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

Сокращения
Вам, вероятно, знакома ситуация: вы читаете текст, изобилующий сокраще-
ниями, их значение разъясняется где-то далеко вначале, искать все это лень, а
иначе непонятно, о чем речь...
В Web-документах такая проблема решается с помощью дескриптора <ACRONYM>.
Сам по себе он не дает визуальных эффектов и используется главным образом ради
параметра title. Значение этого параметра выводится на экран рядом с указателем
мыши, если "навести" последний на интересующее вас слово (рис. 6.7).


Зля разметки УеЬ-страниц используется язык
(ACRONVM title*"HyperText Markup Language")
HTML</HCRONVM>




используется язык НТМСГ


Рис. 6.7. Вывод контекстной подсказки с по-
мощью дескриптора <ACRONYM>

Обратный адрес
Одним из дежурных элементов, кочующих из статьи в письмо, из письма — в
новостное сообщение, является подпись. Иногда с указанием званий, должностей
и прочих регалий. Часто с адресом, когда — электронным, а когда и обычным, по
которому данный субъект получает зарплату или проедает оную.

67
Логическая разметка гипертекста
Для разметки подобных элементов используется дескриптор <ADDRESS>. Это
парный дескриптор. То, что заключено между <ADDRESS> и </ADDRESS>, как прави-
ло, выводится курсивом и отдельным абзацем (рис. 6.8).


ели у вас возникнут вопросы,
пииите мне по адресу:
<ADDRESS>*_polonsaukr.n«t</t№DRESS>




D Wy docs\D!ALECT\HtmlTutoi\


Если у вас возникнут вопросы,
пишите мне по адресу:
ejpolons@ukr.net


Рис. 6.8. Для разметки подписи, в которую часто
входит и адрес, используется дескриптор <ADDRESS>


HTML придумал программист...
Именно такая мысль приходит в голову, когда встречаешь в HTML целый
"букет" средств для описания различных программных кодов и результатов их
работы. Впрочем, использовать эти средства по назначению вовсе не обязательно.
В своей Web-дизайнерской практике (а я надеюсь, со временем она станет весьма
богатой!) вы наверняка найдете им самое разнообразное применение.
Небольшой фрагмент программного кода, встречающийся в тексте, можно разме-
тить с помощью дескриптора <CODE>. Текст, заключенный между <CODE> и </CODE>,
обычно выводится на экран моноширинным шрифтом, таким как Courier.
А как быть, если речь идет о большом фрагменте в несколько строк?
Первое, что приходит в голову, — код наподобие этого:
<CODE>
<Р> первая строка программы
<Р> вторая строка программы
<Р> . .
.
</CODE>
Ради экономии места можно заменить дескрипторы <Р> на <BR>. Наконец,
комбинируя абзацы с разрывами строк, можно разделять логически обособленные
фрагмента кода (рис. 6.9).
Но в программных кодах, кроме пустых строк, часто встречаются табуляции и
другие отступы, "разбавляющие" тарабарский текст и позволяющие хотя бы по-
священным понять, что там написано. Заменять эти табуляции и пробелы на ко-
ды соответствующих символов — занятие слишком неблагодарное, чтобы ушлые
Web-дизайнеры не попытались от него избавиться.


Глава 6
68
И успешно избавились, введя дескриптор <PRE> (от английского preformatted — "с
сохранением форматирования"). Этот дескриптор замечателен тем, что внутри кон-
струкции <PRE>... </PRE> все пробелы, табуляции и переходы на новую строку со-
храняются в том виде, в котором они были введены в HTML-редакторе.


Представьте себе, что это&повр;&ndash;
фрагмент программы:
<СООЕ>
<Р>начало первого блока
<BRXI>. . .содержимое блока... </!>
<Вк>конец первого блока

<Р>начало второго блока
<BRXI>.. .содержимое блока.. . / >
<!
<ВР>конец второго блока

</CODE>




D:\My docs\DIALEC-p,HtmlT



Представьте себе, что это
фрагмент программы:
начало первого блока
...содержимое блока. . .
конец первого блока

начало второго блока
. . . содержимое блока.. . .
конец второго блока




Рис. 6.9. Один из вариантов отображения больших фраг-
ментов кода — с помощью дескрипторов <CODE>, <P> и <BR>

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

Содержимое конструкции <PRE>... </PRE> всегда выводится на экран с
новой строки. Поэтому предварять такой текст дескриптором <Р> не
обязательно.
Кстати, есть такое правило: если в тексте — например, по физике или матема-
тике — встречается переменная, то она выводится курсивом. Мы могли бы при-
вести в соответствие с этим правилом код, представленный на рис. 6.8, с помо-
щью дескрипторов <1>. Но ведь х и у — не просто какие-то "курсивные места".

69
Логическая разметка гипертекста
Это переменные. А в HTML для разметки переменных есть специальный деск-
риптор <VAR> (от английского variable — "переменная"). Воспользуемся им
(рис. 6.11). Что получилось в результате? Внешне — тот же курсив. Но, кроме
того, такая разметка сообщает броузеру о назначении данного фрагмента.

Л-ОИ1

Вот система иэ двух квадратных уравнений:
<PRE>
y=fl<SUB>1</SUB>x<SUP>2</SUP>+B<SUB>1</SUB>x+C<SUB>1</SUB>
y=fl<SUB>2</SUB>x<SUP>2</SUP>+B<SUB>2</SUB>x+C<SUB>2</SUB>
</PRE>




Вот система из двух
квадратных уравнений:
2
у=А 1 х +В 1 х+С 1




Рис. 6.10. Внутри дескриптора <PRE> сохраняются отступы и абзацы,
но для специальных символов по-прежнему используются их коды, а
для элементов форматирования — соответствующие дескрипторы


JOT система иэ двух квадратных уравнений для переменных
<UflR>x</UftR> и <UflR>y</UflR>:
<PRE>
<UflR>y</UftR>=fl<SUB>K/SUB><UflR>x</UflRXSUP>2</SUP>+B<SUl':i
<UflR>y</UflR> = H<SUB>2</SUBXOftR>x</UftRXSUP>2</SUP>+B<SUI:,
C/PRE>




D:\My docs\DIALECTiHtmlTutor\TE


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




Рис. 6.11. Благодаря дескриптору <VAR> имена пере-
менных выделяются. В данном случае, курсивом
Какие еще есть элементы в описаниях программ, кроме фрагментов кодов и
переменных? Правильно, текст, вводимый пользователем и примеры текста, вы-
водимого программой на экран. Первый размечается с помощью дескриптора


70 Глава 6
<KBD> (от английского keyboard — "клавиатура"), второй — с помощью дескрип-
тора <SAMP> (от английского sample — "образец", "пример"). В окне броузера оба
вида текста отображаются моноширинным шрифтом.

Зачем все это?
Зачем же столько дескрипторов, если результат зачастую одинаковый?
Уточним: пока одинаковый.
Кто знает, как будут обходиться с логическими дескрипторами будущие бро-
узеры и что они вообще станут с ними делать? Например, они могут
"проговаривать" некоторые элементы текста, используя систему синтеза речи... И
вообще, кто знает, что нам готовит будущее! Вероятно, именно поэтому многие
средства HTML сделаны как бы "на вырост", и в справочниках рядом с ними то
и дело встречаешь пометки: "пока не используется ни в одном броузере"...
"Физические" и "логические"... Часто, когда нам встречаются подобные
диаметрально противоположные пары свойств или вещей, хочется спро-
сить: "А какие лучше?".
И не менее часто ответом на этот вопрос служит фраза: "Смотря что вам
нужно".
В действительности сейчас существует тенденция постепенной замены
физической разметки гипертекста на логическую. Главной причиной
этого является желание унифицировать вид электронных документов в
соответствии с устоявшимися традициями и правилами, а также — что
более.важно— упростить анализ таких документов поисковыми систе-
мами. Задача таких систем — понять, о чем говорится в тексте и помес-
тить его в соответствующий раздел электронного каталога. Если в тексте
уже на стадии верстки будут выделены главные элементы, эта задача
значительно упростится. Подробнее об этом читайте в главе 14.

Резюме
Все дескрипторы HTML можно условно разделить на две большие категории -
"физические" и "логические", т.е. такие, которые определяют только внешний вид
документа, и такие, которые несут информацию о его логической структуре.
К "физическим" дескрипторам относятся такие, как уже знакомые нам <и>,
<I>, <S>, <FONT>, а к "логическим" - дескрипторы выделения главного <ЕМ> и
<STRONG>, определений <DFN>, цитат <С1ТЕ> и <BLOCKQUOTE>, нижнего и верхнего ин-
декса <SUB> и <SUP>, удаленного и вставленного текста <DEL> и <INS>, сокращений
<ACRONYM>, адресов <ADDRESS>, программных фрагментов <CODE>, переменных <VAR>,
ввода с клавиатуры и вывода на экран <KBD> и <SAMP>.
Несмотря на то, что многие "логические" дескрипторы дублируют друг друга в
смысле внешних эффектов, они полезны: благодаря им, во-первых, упрощается
анализ страницы поисковыми системами Internet (см. главу 14), а во-вторых, дос-
тигается единообразие оформления страниц и их соответствие полиграфическим
правилам и традициям.

Логическая разметка гипертекста 71
Тесты
1. Дескриптор <S> является аналогом:
а) дескриптора <STRONG>;
б) дескриптора <ЕМ>;
в) дескриптора <STRIKE>;
г) дескриптора <DEL>.
2. Какой или какие из следующих фрагментов кода содержат ошибки?
а) <BLOCK QUOTE>THie eflenib&nbspj&mdash; дальше будешь</ВЬОСК QUOTE>. Народ-
ная мудрость
б) <BLOCKQUOTE>Tme едешь&пЬзр;&пк1азп; дальше будешь</ВЬОСКОШТЕ>. Народная
мудрость
в) <BLOCK quote="THie efleib&nbsp;&mdash; дальше будешь">. Народная мудрость
г) <ACKRONYM Ш1е="язык разметки гипертекста">HTML</ACKRONYM>
д) <ACKRONYM>HTML</ACKRONYM>&nbsp;&mdash; язык разметки гипертекста
е) Формула этилового cnHpTa&nbsp;&indash; C<SUB>2</SUB>H<SUB>5</SUB>OH
ж) Формула этилового cnnpTa&nbspj&mdash; C<SUP>2</SUP>H<SUP>5</SUP>OH
3. Какой из следующих фрагментов состоит из двух абзацев?
а) &laquo;<CITE>THie едешь&пЬзр;&пк!азп; дальше бу-
дешь</С1ТЕ>&гадио;&nbsp;Smdash; народная мудрость
б) <С1ТЕ>Тише efleib&nbsp;&mdash; дальше будешь</С1ТЕ>. <ADDRESS>HapoflHaa
MyflpocTb</ADDRESS>
в) <BLOCKQUOTE>THine eflenm&nbspj&mdash; дальше 6yfleib</BLOCKQUOTE>.
<ADDRESS>HapOflHafl MyflpOCTb</ADDRESS>
г) <BLOCKQUOTE>THme eflemb&nbsp;&mdash; дальше 6yflemb</BLOCKQUOTE>. Народная
мудрость
д) <PRE>THine eflemb&nbspj&mdash; дальше 6yflenm</PRE>. Народная мудрость
4. Какие из следующих пар фрагментов отображаются в броузере одинаково?
а) <DFN>HTML</DFN>&nbsp;&mdash; <DEL>HTML</DEL>&nbsp;&mdash; язык
язык разметки гипертекста разметки гипертекста
б) <DFN>HTML</DFN>&nbsp;&mdash; <ACKRONYM 1111е="язык разметки
язык разметки гипертекста гипертекста">HTML</ACKRONYM>
в) <DFN>HTML</DFN>&nbsp;&mdash; <B>HTML</B>&nbsp;&mdash; язык разметки
язык разметки гипертекста гипертекста
г) <DFN>HTML</DFN>&nbsp;&mdash; <I>HTML</I>snbsp;&mdash; язык фазметки
язык разметки гипертекста гипертекста
5. Какие из следующих пар фрагментов отображаются в броузере одинаково?
а) Сама + <DEL>Mania</DEL> Саша + <В>Маша</В>
<INS>HaTama</INS> = Дружба <1>Наташа</1> = Дружба

Глава 6
72
б) Саша + <DEL>Maia</DEL> Caia + <S>Maua</S>
<INS>HaTama</INS> = Дружба <и>Наташа</и> = Дружба
в) Саша + <DEL>Mama</DEL> Саша + <STRIKE>Mama</STRIKE>
<Ш>Наташа</Ш> = Дружба <STRONG>HaTaia</STRONG> = Дружба
6. Какие из следующих пар фрагментов отображаются в броузере одинаково?
а) Вот фрагмент HTML-кода: <PRE> Вот фрагмент HTML-кода: <PRE>
<1>курсив<1> курсив
<и>подчеркнутый<и> подчеркнутый
</PRE> </PRE>
б) Вот фрагмент HTML-кода: <PRE> Вот фрагмент HTML-кода: <CODE>
<1>курсив</1>
<1>курсив</1>
<и>подчеркнутый</U> <и>подчеркнутый</и>
</CODE>
</PRE>
Вот фрагмент HTML-кода: <CODE>
в) Вот фрагмент HTML-кода: <PRE>
Sit;I&gt;Kypoffl&lt;/I&gt;
<1>курсив</1>
Sit; U&gt; подчеркнутый&]±; /U&gt;
<и>подчеркнутый</и>
</CODE>
</PRE>
г) Вот фрагмент HTML-кода: <PRE> Вот фрагмент HTML-кода: <CODE>
<BR>&nbsp;&nbsp;&nbsp;<I>KypCHB</I>
<1>курсив</1>
<BR>&nbsp;&nbsp;&nbsp;<U>nofl4epKHyTbHi</
<и>подчеркнутый</и>
</PRE> U>
</CODE>
д) Вот фрагмент HTML-кода: <PRE> Вот фрагмент HTML-кода: <FONT
<1>курсив</1> face="Courier New">
<и>подчеркнутый</и> <BR>&nbsp;&nbsp;&nbsp;<I>KypCHB</I>
</PRE> <BR>&nbsp; inbsp; Snbsp; <и>подчеркнутый</Ц>
</FONT>
7. Какие из следующих пар фрагментов отображаются в броузере одинаково?
а) Дескриптор Дескриптор <!>&lt;SUP&gt;</I>
<VAR>&lt;SUP&gt;</VAR> предназначен для отображения верхнего
предназначен для отображения индекса
верхнего индекса
б) Дескриптор <VAR>&lt;SUP&gt;- Дескриптор <FONT face="Courier
</VAR> предназначен для New">&lt;SUP&gt;</FONT> предназначен
отображения верхнего индекса для отображения верхнего индекса
в) Дескриптор <KBD>&lt;SUP&gt; Дескриптор <FONT face="Courier
</KBD> предназначен для New">&lt;SUP&gt;</FONT> предназначен
отображения верхнего индекса для отображения верхнего индекса
г) Дескриптор Дескриптор <FONT face="Courier
<SAMP>&lt;SUP&gt;</SAMP> New">&lt;SUP&gt;</FONT> предназначен
предназначен для отображения для отображения верхнего индекса
верхнего индекса



Логическая разметка гипертекста 73
Глава 7

Списки
В этой главе...

Ф Концепция списков в HTML
4 Нумерованные списки
4 Маркированные списки
4 Параметры элемента списка
Ф Многоуровневые списки
* Списки определений
f Другие виды списков



Концепция списков в HTML
Автоматическое создание списков — очень удобная функция текстовых про-
цессоров и причина первых восторгов у многих новичков. Это понятно: вместо
того чтобы следить за нумерацией и отступами, можно уделить больше внимания
логическому построению перечня и другим более важным вещам. Программа са-
ма расставит нужные цифры, проследит за их форматированием. Кроме того,
вместо плюсов и черточек, которые используют в ненумерованных списках ма-
шинистки, можно подобрать приличествующие случаю кружки, "птички" и т.п.
Как создать список в HTML?
Конечно, можно поступить просто, "по-машинистски", т.е. как секретарь-
машинистка: самому ввести цифры и маркеры, лично проследить за отступами
(рис. 7.1). Получится почти как на пишущей машинке. Даже лучше.
Есть ли другой, более простой и изящный способ? Разумеется, есть.
Все списки в HTML — как нумерованные, так и ненумерованные (маркиро-
ванные) — размечаются по единому принципу, с помощью двух видов парных де-
скрипторов. Внутри первого заключается весь список. Этот дескриптор определя-
ет тип списка и его параметры в целом. Каждый элемент списка заключается
внутри дескриптора второго типа, который определяет параметры данного эле-
мента. Если обозначить эти дескрипторы как <Д1> и <Д2>, то общая структура
списка будет выглядеть так:
<Д1 параметры всего списка>
<Д2 параметры элемента .^Элемент 1</Д2>
<Д2 параметра элемента 2>Элемент 2</Д2>
<Д2 параметра элемента 3>Элемент 3</Д2>



1<Р>Для того чтобы создать список вручную, нужно:
<BR>1.SnbspjТерпение.
<BR>2.Snbsp;Внимание.
<BR>3.anbsp;H еце:
<BR>Snbsp ; 8nbsp;<FONT face=Wingdin9S>S«D2S2;
</FONT>Snbsp;терпение;
<BR>Snbsp; Snbsp; <FONT face=Hingdinge>S*e2S2;
</FONT>8nbsp;внимание.
<P>Bce это достойно лучшего применения.




ть Помоп Щ
J D:\My docs\DIAl?CT\HtmlTuto^TESTHTMLhtml

Для того чтобы создать список вручную, нужно:
1. Терпение.
2. Внимание.
3. И еще:
*/ терпение;
•/ внимание.

Все это достойно лучшего применения.


Рис. 7.1. Даже вручную можно создать достаточно слож-
ный список


Нумерованные списки
Для создания нумерованных списков используется пара дескрипторов <OL> и
<ГЛ>. Название первого происходит от английского ordered list — "упорядоченный
список", а название второго — от английского /и? item ("элемент списка").
Попробуем разметить список по уже знакомой нам схеме: поместить весь спи-
сок внутрь конструкции <OL>... </OL>, а каждый элемент — в отдельную конст-
рукцию <LI>... </LI> (рис. 7.2). Похоже, мы, действуя по привычке, ввели в код
много лишнего...
Убрав нумерацию — она теперь выполняется автоматически, — а также став-
шие ненужными пробелы и разрывы строк, получаем очень простой и изящный
код (рис. 7.3).
Хотя дескриптор <Ы> и парный, закрывать его не обязательно: его
"закроет" следующий дескриптор <Ы> или закрывающий дескриптор
</OL> (а вот последний обязателен!). Дескриптор <Р> в начале следую-
щего за списком абзаца также можно опустить: текст после закрываю-
щего дескриптора списка всегда начинается с новой строки.


76 Глава 7
1ля того чтобы создать список
с помощью дескрипторов HTML, нужно:
<OL>
<LI>1.Snbsp;Поместить весь список внутрь
конструкции aitiOLagt;.</LI>
<LI>2.&nbsp;Заключить каждый элемент списка
конструкиан ;Liagt;.<
</OL> ,




D:\My dora\DIALECT\HtmrTutor\TES-n-ITML.html



Для того чтобы создать список с помощью
дескрипторов HTML, нужно:

\. \. Поместить весь список внутрь
конструкции <О1_>.
2. 2. Заключить каждый элемент списка
внутрь конструки<1_1>.



Рис. 7.2. Разметив список с помощью дескрипторов HTML,
обнаруживаем, что многие вещи стали лишними



Пля того чтобы создать список
помощью дескрипторов HTML, нужно:
<OL>
<1Л>Поместить весь список внутрь
конструкции 81t;OL?gt;.</LI>
<11>3акпючить каждый элемент списка внутрь
KOHCTpyKHait;Liagt;.</LI>
</OL>




DMvty docs\DlALECT\HtmrTutoi\TESTHTMLbtml



Для того чтобы создать список с помощью
дескрипторов HTML, нужно:

1. Поместить весь список внутрь
конструкции <OL>.
2. Заключить каждый элемент списка
Внутрь KOHCTpyKH<LI>.




Рис. 7.3. При такой разметке нумерация выполняется ав-
томатически


77
Списки
Отлично. Но как теперь изменить нумерацию, например, чтобы она начиналась
не с единицы, а с нуля? Или например, заменить арабские цифры латинскими?
В текстовых процессорах для этого используются специальные функции, оп-
ределяющие свойства всего списка. В HTML для этого есть параметры дескрип-
тора <OL> — start и type.
По умолчанию нумерация списка всегда начинается с единицы (start=l). Для
того чтобы она начиналась, например с нуля (как любят программисты), нужно
указать в дескрипторе <OL> параметр start=0 (рис. 7.4).
1 TESTHTML - Б


<Р>Програмнисты любят начинать отсчет с нуля:
<OL start=6>
<LI>pao;</LI>
<1Л>два;</1Л>
<LI>TpM.</LI>

ЦЩ [1,,1,'tr, Ци.". ЙЧИЛ ..... I («AM.


(J я
; .

i] D^ docsNDIAl^C'nHlmlTmoATESTHTML.hl Д


Программисты любят начинать отсчет


0. раз;
1. два;
2. три.


Рис. 7.4. Начальный номер списка определяется
параметром start

Попробуем теперь заменить нумерацию с арабской на латинскую. Для этого
нам понадобится параметр type. Он может принимать одно из пяти значений: А,
a, I, i или 1, которые соответствуют типам нумерации: большими латинскими
буквами (А, В, С, ...), малыми латинскими буквами (а, Ь, с, ...), большими рим-
скими цифрами (I, II, III, IV, ...), малыми римскими цифрами (i, ii, Hi, iv, ...) и
арабскими цифрами (1, 2, 3, ...). Таким образом, нам нужно присвоить параметру
type значение I (рис. 7.5).
К сожалению, в HTML нет способа автоматической разметки списка,
пронумерованного кириллицей: а, б, в, и т.д. Как нет и способа изме-
нить символ, стоящий после буквы или цифры: это всегда точка. По-
этому для того чтобы создать список, подобный списку ответов в этой
книге, придется использовать ручную разметку.




78 Глава 7
Р>Вот нумерация латинскими цифрами:
OL type=I>
LI>OflHH;</LI>
LI>aea;</LI>
LI>rpn.</LI>




Вот нумерация латинскими цифрами:




Рис. 7.5. Для того чтобы изменить тип нуме-
рации, используется параметр type


Маркированные списки
Как известно, кроме нумерованных списков, т.е. таких, где важен порядок
следования элементов, есть такие, где важен только их перечень. Вместо цифр
или букв в них используют маркеры — точки, черточки, кружки. Такие списки
называют маркированными.
Для разметки маркированных списков в HTML применяется тот же принцип,
что и для нумерованных списков, только вместо дескриптора <OL> используется
дескриптор <UL>. Как нетрудно догадаться (если, конечно, знать английский), его
название происходит от английского unordered list — "неупорядоченный список".
Что получится, если в рассмотренном выше примере заменить дескриптор <OL>
на <UL>? Нумерация исчезнет, а вместо цифр в начале каждой строки появятся
характерные жирные точки (рис. 7.6).
А как заменить эти точки на что-то другое, например на "птички"?
Ответ на этот простой, казалось бы, вопрос, будет несколько длиннее, чем ему
полагается быть.
Часть первая, короткая: у дескриптора <UL>, как и у <OL>, есть параметр type.
Он-то и определяет вид маркера.
Часть вторая, из-за которой ответ становится длинным: параметр type прини-
мает только три значения: circle, disc и square. По умолчанию он равен disc, что
и соответствует жирным точкам. Значение circle означает маркеры в виде ма-
леньких окружностей, a square — в виде квадратиков (рис. 7.7).




79
Списки
Для того чтобы
с помощью дескрипторов HTML, нужно:
<UL>
<11>Понестить весь список внутрь
конструкции SltiULSgt;.</LI>
<11>3акпючить каждый элемент списка внутрь
конструкив!t;LlSgt;.</LI>
</UL>




Для того чтобы создать маркированный ;
список с помощью дескрипторов HTML,
нужно:

• Поместить весь список внутрь
конструкции <UL>.
• Заключить каждый элемент списка
внутрь конструки<1_1>.


Рис. 7.6. Вот что получается, если заменить дескриптор
<OL> на <UL>




В HTML есть только три типа маркеров:
<UL type=disc>
<1Л>КруЖОЧКИ;</1.1>
</UL>
<UL type=circl»>
<LI>окружности;<
</UL>
<UL type=square>
<1.1>квадратики. <
</UL>




D:\Mydocs\DlALECT\HimlTutot\TESTHTMLhlml



В HTML есть только три типа маркеров:

• кружочки;

о окружности;

квадратики.


Рис. 7.7. В HTML предусмотрено только три вида
маркеров: жирные точки, окружности и квадратики



80 Глава 7
Наконец, часть третья, длинная: что делать, если хочется использовать нестан-
дартные маркеры?
Отказаться от разметки списка и сделать все самому. Лично проследить за
маркерами и отступами. А, возможно, и собственноручно нарисовать эти самые
маркеры в Photoshop (см. главу 8).
Возможно, однажды в новую версию стандарта HTML будут внесены необ-
ходимые изменения — то ли увеличится количество маркеров, то ли будет
предусмотрена возможность вставки в качестве маркеров любых символов.
А пока остается использовать то, что есть или верстать списки вручную.
Только в последнем случае нужно помнить, что далеко не любой выбран-
ный вами символ есть на компьютере пользователя. Возможно, именно по-
этому дизайнеры или используют стандартные маркеры, или рисуют собст-
венные и помещают их на Web-страницу в виде графических файлов.
Некоторые Web-дизайнеры используют такой прием: формируют список,
пользуясь только дескрипторами <LI>. Попробуем так сделать и мы (рис. 7.8). Что
получается? Маркированный список без горизонтальных отступов. И с полным
пренебрежением к абзацам. Похоже, если навести порядок с последними, то та-
кая конструкция вполне имеет право на существование.


Бывает и такая разметка:
<1_1>+орнируем список из одних только дескрипторов Slt;LIfigt;,
<LI>a о дескрипторах SltiULSgt; забываем,
<1Л>и получаем. ..
:писок без отступов.




]DWydocs\lMLt˜C7AHtmlTuto,\lbbTHTMUJ >!


Бывает и такая разметка:
. формируем список из одних только
дескрипторов <!_!>,
• а о дескрипторах <UL> забываем,
• и получаем... список без отступов.


Рис. 7.8. Если убрать дескрипторы <UL>, получится мар-
кированный список без отступов


Параметры элемента списка
А как быть, если параметры некоторых элементов одного списка отличаются
от остальных? Неужели только из-за этого нужно дробить список на мелкие час-
ти, как это сделано на рис. 7.7?
К счастью, у нас есть возможность оптимизировать HTML-код. Для этого нужно
воспользоваться параметрами дескриптора <Ы>, а именно параметром type (рис. 7.9).


81
Списки
3 HTML есть только три типа маркеров:
<UL>
(LI 1уре>кружочки;</1_1>
(LI type=circle>OKpy>KHOCTH;</LI>
(LI type=square >квадратики.</Ч-1>
(/UL>




В HTML есть только три типа маркеров: ;
• кружочки;
о окружности;
• квадратики.


Рис. 7.9. Благодаря использованию параметра type в де-
скрипторе <Ы> можно менять тип маркера внутри списка

А теперь вопрос на сообразительность: что определяет и какие значения при-
нимает параметр type дескриптора <LI> в нумерованных списках? Предупреждаю,
что вся информация, необходимая для того, чтобы дать правильный ответ, вам
уже известна. На всякий случай — вдруг вы что-то подзабыли — перечитайте на-
чало этой главы еще раз... Ну как, ответ готов? Тогда читайте дальше.
Действительно, в нумерованных списках параметр type дескрипторов <Ы>
принимает такие же значения, что и одноименный параметр всего списка в деск-
рипторе <OL>. И изменяет его значение. Например, весь список может нумеро-
ваться арабскими цифрами, а один из элементов — римскими (рис. 7.10).


Зот список со смешанной нумерацией
<OL>
HIBHBl>na3:</LIi
<LI>flBa;</LI>
<И>три.</И>
</OL>




D:\Mydocs\DIALECTM-llmrTutor\TESTHTMLMml j



Вот список со смешанной нумерацией:
I. раз;
2. два;
3. три.


Рис. 7.10. Список со смешанной нумерацией

Глава 7
82
Правда, такая смешанная нумерация не является типичной. Гораздо чаще
используют вложенные списки, которые рассматриваются ниже в этой
главе.
Таким образом, параметр type в дескрипторе <ы> дополняет и расширяет воз-
можности одноименного параметра дескрипторов <OL> и <UL>. Возможно, у вас
уже вертится на языке вопрос: а есть ли у дескриптора <Ы> параметр, дополняю-
щий параметр start и позволяющий "нарушить" последовательность нумерации,
не изменяя ее типа? Например так: 1, 2, 3, 5, 6?
Если такой вопрос у вас возник, то вы мыслите в правильном направлении.
Действительно, у дескриптора <Ы> есть такой параметр, и называется он value (от
английского value — "значение"). Этот параметр определяет не только номер
данного элемента списка, но и номера последующих элементов (рис. 7.11).


Вот список с Slaquo;HapyuieHHOu&raquo;
нумерацией:
<OL>
<LI>pao;</LI>
<LI>flBa;</LI>
иа1ие=6>три?</1Л>




ц
*•"", • ' ' а»

Вот список с «нарушенной» нумерацией

1. раз;
2. два;
6. три?
7. четыре??


Рис. 7.11. Параметр value позволяет "нарушить"
последовательность нумерации


Многоуровневые списки
И еще один вопрос, который у многих уже, наверное, давно вертится на язы-
ке: как быть с многоуровневыми списками? В Microsoft Word, например, для
этого есть целая вкладка диалогового окна со множеством вариантов этих самых
списков. А как в HTML?
А в HTML многоуровневых списков нет.
То есть, для них нет отдельной конструкции. Но она и не нужна. Для размет-
ки многоуровневых списков достаточно того, что нам уже известно. В тех местах,
где нужно вставить подпункты списка, используются вложенные списки, анало-
гично любым вложенным дескрипторам (рис. 7.12).

83
Списки
<1Л>нунерованные:
<OL>
, \"
<1Л>арабскини ци*рани;</1-1>
<1Л>болыими римскими ци*рани;</11> I! -
<1-1>малыни римскими цифрами ;</!_!>
] D:\My docs\DlALECT\Htmrrutor\TESTHTWL html
<1_1>болы1ини латинскими буквами;</LI>
<1_1>налыни латинскими буквами;</LI>
Списки бывают:
<OL>
<LI>a также вложенные;
</OL> • нумерованные:
</OU>
1. арабскими цифрами;
<11>маркированные:</LI>
<UL>
2. большими римскими цифрами;
<11>кружкани;<А1>
3. малыми римскими цифрами;
<11>окружностями;
<LI>квадратикани;
4. большими латинскими буквами;
<UL>
<LI>a также вложенные. 5. малыми латинскими буквами;
</UL>
1. а также вложенные;
</UL>
</UL>
• маркированные:
о кружками;
о окружностями;
о квадратиками;
• а также вложенные.


Рис. 7.12. Многоуровневые списки создаются из обычных списков, вложенных друг в друга



Списки определений
Об этом виде списков вспоминают достаточно редко. В большинстве случаев,
когда хочется сделать красиво, воображение "зацикливается" на выборе того или
иного маркера. Как будто единственное, от чего зависит красивый и аккуратный
дизайн, — это пресловутые "птички" или кружочки!
На самом деле достаточно часто — гораздо чаще, чем кажется на первый взгляд —
можно использовать еще один вид списков. Это так называемые списки определений.
Возможно, одной из причин такого консерватизма мышления является
само название этого вида списков. Действительно, определения в чистом
виде и в таком количестве, чтобы образовать список, встречаются нечас-
то, разве что вы решили сделать электронную версию толкового словаря.
Но очень часто списки строятся по принципу: сначала короткая фраза
или слово (как правило, выделенное полужирным шрифтом или как-
нибудь иначе), потом более подробное разъяснение. Такие фрагменты
можно организовать по-разному, в зависимости от общего вида страни-
цы: можно как обычные абзацы, а можно — как списки определений.
Из чего состоит такой список? Очевидно, из термина, который нужно описать, и
самого описания. Следовательно, сколько дескрипторов для этого нужно? По первой
прикидке — два: для термина и для описания. Да, пожалуй, понадобится еще один -
для разметки самого списка, как <OL> для нумерованного и <Ш> для маркированного.

84 Глава 7
Так и есть: весь список определений заключается внутрь парного дескриптора <DL>
(от английского definition list — "список определений"), каждый термин — внутрь де-
скриптора <DT> (от английского definition term — "определяемый термин") и каждое
описание — внутрь дескриптора <DD> (от английского definition description — "описание
определения"). Общий вид списка определений показан на рис. 7.13.
[JgTESTHTML-
Фйчп Правка
Зот список определений:
<DL>
<DTXDFN>HTML</DFN>
<DD>Hypertext Markup Language, язык разметки гипертекста.
<ОТХОГМ>Дескриптор</ОРЫ>
<00>Эленент языка HTML.
</DL>




Вот список определении:

HTML |
Hypertext Markup Language, язык т
разметки гипертекста.
Дескриптор
Элемент языка HTML.


Рис. 7.13. Список определений: дескрипторы <DL>,
<DT> и <DD> "отвечают" только за отступы. За осталь-
ным форматированием приходится следить самому
Как видим, конструкция, образованная дескрипторами <DL>, <DT> и <DD>, обес-
печивает использование следующих элементов форматирования:
* отступ между предыдущим абзацем, списком и следующим абзацем;
* каждый термин находится в отдельной строке;
* каждое описание термина также находится в отдельном абзаце, причем
сдвинуто вправо относительно термина.
И все. Если мы хотим выделить определения еще как-нибудь, например цве-
том или полужирным шрифтом, придется делать это вручную.
Здесь уместно вспомнить о различиях между физической и логической
разметкой. Можно выделить определения с помощью, например деск-
риптора <В> или <1>, а можно воспользоваться уже известным нам деск-
риптором для разметки определений — <DFN>.

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

Списки 85
Вначале уберем дескрипторы <DL> и </DL>. Что получилось? Пропали отступы
между списком и окружающими его абзацами. Кроме того, исчез отступ между
термином и определением. Сохранилась только "красная строка", а остальные
строки абзаца начинаются вровень с другими абзацами (рис. 7.14).


JOT список определении
CDTXDFN>HTHU/DFN>
:DD>Hypertext Markup Language, язык разметки гипертекста
:ОТХОРМ>Дескриптор</ОП4>
:00>Эпенент языка HTML.



docs\DIALECT\H1mlTutoi\TESTHTML.html



Вот список определений:
HTML
Hypertext Markup Language, язык Щ
разметки гипертекста.
Дескриптор
Элемент языка HTML.



Рис. 7.14. Если убрать дескриптор <DL>, исчезают
вертикальные отступы между списком и другими
абзацами, а также горизонтальные отступы между
терминами и их определениями

Что ж, такой эффект вполне имеет право на существование. Иногда отступы
выглядят красиво, а иногда лучше без них.
Попробуем теперь убрать дескрипторы <DD>. По идее, они должны "отвечать" за
остальное, а именно, за то, что описания начинаются с новой строки. Так и есть:
убрали <DD> — и определения объединились с терминами в один абзац (рис.7.15).
Что ж, такой вариант разметки тоже вполне имеет право на существование. Пожа-
луй, для нас он даже привычнее, чем "классический" список определений. Только
следует помнить о том, что по правилам русского языка в таких случаях после терми-
на перед его описанием обязательно ставится какой-нибудь знак препинания — точ-
ка, если дальше следует отдельное предложение, а если нет, то двоеточие или тире.


Другие виды списков
Стандартом HTML предусмотрены еще два вида списков: каталоги и меню.
Первый описывается дескриптором <DIR> (directory list), а второй — дескриптором
<MENU>. Их способ применения и параметры ничем не отличаются от способа
применения и параметров дескриптора <UL>.

86 Глава 7
Не отличаются и сами списки: текст, размеченный с помощью этих дескрип-
торов и открытый в окне броузера, неотличим от текста, размеченного с помо-
щью дескриптора <Ш>. Это еще два дескриптора, сделанных "на вырост": пока
что они не востребованы, но, возможно, в будущем ситуация изменится.


Вот список определений:
CDL>
<DTXDFN>HTML</DFN>
Hypertext Markup Language, язык разметки гипертекста.
СОТХОРМ>Дескриптор</прН>
Элемент языка HTML.
</DL>



кшригашнюян
Э OUV doC!\DIALECTMHtttllTutol\TES


Вот список определений:
HTML Hypertext Markup Language,
язык разметки гипертекста.
Дескриптор Элемент языка
HTML.


Рис. 7.15. Если в коде списка определений
убрать дескрипторы <DD>, то каждый тер-
мин с его описанием образует один абзац


Резюме
Нумерованные и маркированные списки размечаются в HTML с помощью де-
скрипторов двух типов: первый определяет параметры всего списка, второй — па-
раметры каждого из его элементов.
Маркированные списки описываются дескриптором <UL>. Его параметр type
определяет вид маркера — квадратики (square), кружки (disc) и "пустые" окруж-
ности (circle). По умолчанию параметру type присваивается значение disc.
Нумерованные списки описываются дескриптором <OL>. Этот дескриптор име-
ет два параметра: type, определяющий способ нумерации, и start, определяю-
щий, с какой буквы или цифры она будет начинаться. Параметр type дескриптора
<OL> принимает значения 1, I, i, А или а, что соответствует нумерации арабскими,
большими и малыми римскими цифрами, а также большими или малыми латин-
скими буквами. Других вариантов нумерации, в частности буквами кириллицы, к
сожалению, не предусмотрено.
Элементы нумерованных и маркированных списков размечаются с помощью
дескрипторов <LI>. Этот дескриптор имеет те же параметры* что и дескриптор
всего списка: если список нумерованный, то это type и start, а если маркирован-

Списки 87
ный, то только type. Параметры дескриптора <Ы> имеют более высокий приори-
тет, чем параметры всего списка и, таким образом, позволяют изменить порядок
нумерации или вид маркера.
Для организации многоуровневых списков со смешанной нумерацией исполь-
зуются вложенные дескрипторы <UL> и <OL>: вместо очередного блока <ы>...
</Ы> ставится соответствующий вложенный список.
Кроме маркированных и нумерованных списков, в HTML предусмотрена кон-
струкция, образующая список определений. Каждый элемент такого списка состоит
из некоего термина и его определения. Термины и определения находятся в от-
дельных абзацах, причем последние выводятся с увеличенным горизонтальным
отступом относительно остального текста. Разметка списка определений осущест-
вляется с помощью трех дескрипторов — <DL>, <DT> и <DD>. Дескриптор <DL> опи-
сывает весь список в целом, <DT> — определяемый термин, a <DD> — определение.
Кроме того, в стандарте HTML предусмотрены еще два вида списков — ката-
логи (дескриптор <DIR>) и меню (дескриптор <MENU>). Однако эти дескрипторы не
получили распространения, и размеченные ими списки в большинстве броузеров
отображаются как обычные маркированные.


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

88 Глава 7
б) <OL start=circle>
<LI> Первый элемент списка
<LI> Второй элемент списка
</OL>
в) <OL type=l>
<Ы> Первый элемент списка
<Ы> Второй элемент списка
</OL>
г) <OL type=circle>
<LI> Первый элемент списка
<Ы> Второй элемент списка
</OL>
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 type=circle>
<DT> Термин 1</DL>
<DD> Определение 1</DD>
<DT> Термин 2</DL>
<DD> Определение 2</DD>
</DL>
r) <DL start=l>
<DT> Термин 1</DL>
<DD> Определение 1</DD>
<DT> Термин 2</DL>
<DD> Определение 2</DD>
</DL>




Списки 89
Глава 8

Графика на Web-странице
В этой главе...

t Вставка графики в текст
* С:\Мои документы на языке WWW
4 Размеры изображения
Ф Вместо картинок
4 Обтекание графики текстом
4 Выравнивание по вертикали
4 Картина в раме
4 Отступы
4 Форматы графических файлов



Вставка графики в текст
Есть несколько вопросов, по поводу которых среди Web-дизайнеров идут по-
стоянные дискуссии. Некоторые из них нам еще встретятся. А вот первый: что
есть картинки для Web-страницы — польза или вред?
"Конечно, польза! — кричат одни, — делать Web-страницы без графики — все
равно что назло кондуктору купить билет и пойти пешком!"
"Вред! — надрываются другие, — попробуйте-ка скачать эту графику нашими
слабосильными модемами! Заставляя посетителей это делать, мы только набиваем
кошельки провайдерам! А если построить на графике весь дизайн страницы, то
многие его просто не увидят, потому что благоразумно отключили в своем бро-
узере загрузку картинок!"
Казалось бы, этот спор вот-вот должен кончиться: ведь на смену телефонным
линиям активно внедряются более скоростные средства передачи данных. Но уй-
мет ли это спорщиков? Мне думается, вряд ли. Просто по мере повышения про-
пускной способности линий счет станет вестись не на килобайты, как сейчас, а,
скажем, на сотни мегабайт, как это произошло, например, с программным обес-
печением, когда вместо 360-килобайтных дискет мы стали пользоваться гигабайт-
ными винчестерами. Которых все равно не хватает...
Впрочем, время покажет. Но есть вещи не менее вечные, чем спор между
профессионалами. Одной из них является здоровое желание новичка увидеть на
экране монитора свою фотографию с гордой надписью вроде: "Домашняя стра-
ничка Меня, Любимого".
Итак, мы сфотографировались. В парадной шляпе. Но как поместить фото-
графию на страницу?
Какие есть идеи? "Выделить и вставить" — не пройдет. "Перетащить и опус-
тить" — тоже. Это нам не Word. Это голый текст, и никакие картинки в него не
вставляются.
Но нам и не нужно вставлять в код картинку. Достаточно указать ссылку на
нее, чтобы броузер в нужный момент знал, куда за ней обратиться. А уж как вы-
вести картинку на экран, он разберется сам.
Итак, нам нужно указать в HTML-коде две вещи: во-первых, что мы вставля-
ем графический элемент, а во-вторых, откуда мы его вставляем. Это делается с
помощью дескриптора <IMG> (от английского image — "изображение") с парамет-
ром src (от английского source — "источник"). Попробуем (рис. 8.1)...


<H1>3Toanbsp ; a«idash;
<IHG src=uasya.gif>




Это —Я!




Рис. 8.1. Всего один дескриптор — и дело в шляпе!

Обратите внимание, что дескриптор <IMG> — одиночный. Действительно, зачем
ему пара? Он только определяет ту точку, куда вставляется содержимое другого
файла, и закрывающий дескриптор ему не нужен.


С: \Мои документы на языке WWW
Как броузер находит файл с изображением? Очевидно, если файл с картинкой
находится в том же каталоге, что и файл с кодом Web-страницы, то — по имени.
А если он расположен в другом каталоге? Ведь такое вполне возможно. Более

92 Глава 8
того, если на странице много разных объектов, именно так обычно и поступают:
помещают код в один каталог, а графику, чтобы не путалась под руками, в дру-
гой, или даже в несколько.
Казалось бы, все очень просто: нужно только указать полный путь. Попробуем
(рис. 8.2)... Ну как, нравится? Лично мне — не очень. Проще было сразу делать
страничку без картинок.


<Hl>3Toan6ep;S»dash; Я?</Н1> ]jj
<IMG вгс="С:\Мои докумвмты\НТМ1.\иа8уе\иа8уа.91Г'> ''




т
Это — Я? ЙЙ




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

Такова расплата за многолетнюю привычку к операционным системам Microsoft.
Ведь это только там путь к файлу обозначается через обратные косые. Internet — не
Windows, и нам придется отказаться от многих стереотипов. Любой броузер, даже
Internet Explorer, все равно работает по законам Internet. А там действуют правила
обозначения пути к файлу, унаследованные из UNIX. Вкратце они таковы.
* Вложенные каталоги перечисляются через прямую, а не через обратную
косую, как мы привыкли: MyHTML/MyGraphics/vasya.gif.

* Как и в DOS, указывать полный путь не обязательно. Например, если
код страницы находится в каталоге MyHTML, а графика — во вложенном в
него каталоге MyGraphics, то на картинку можно сослаться так:
<IMG src=MyGraphics/vasya.gif>.

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


93
Графика на Web-странице
* Если страница находится на одном компьютере, а картинка — на другом,
можно указать полный адрес, например: <IMG src="http://www.vasya.com/
MyHTML/MyGraphic/vasya.gif">
* В отличие от дескрипторов HTML, в именах файлов и папок имеет зна-
чение регистр букв. Так, для многих броузеров и других программ, рабо-
тающих в Internet, vasya.gif и vasya.GIF — разные файлы.
Для того чтобы не пугаться и не запоминать каждый раз, в каком реги-
стре набрано то или иное имя, Web-дизайнеры пользуются неписаным
соглашением: все имена папок и файлов состоят только из строчных
(маленьких) букв.
За этим нужно следить, не только создавая новые папки, но и редакти-
руя графические файлы. В частности, графический процессор Photoshop
по умолчанию присваивает файлам расширения, набранные прописны-
ми (большими) буквами.
* И последнее. Если вам не нужны лишние проблемы — никакой кирилли-
цы в именах папок и файлов! В частности, если вы пользуетесь русской
версией Windows и храните коды страниц в папке Мои документы, рекомен-
дуется разместить папку с изображениями там же, и не польститься на ав-
томатически создаваемую приложениями Office папку Мои рисунки.


Точка единого отсчета
Если картинок много, то их удобнее поместить в отдельный каталог, чтобы
они не путались с другими файлами. Но тогда каждый дескриптор,
"отвечающий" за вставку изображения, станет длиннее ровно на путь к этому ка-
талогу. Пожертвовать ли краткостью кода в пользу аккуратности или, наоборот,
предпочесть краткость?
Как всегда, кроме двух "крайних" решений, есть компромиссное. Оно заклю-
чается в указании некоей точки отсчета, или базы, от которой будут
"откладываться" все адреса. По умолчанию такой "базой" считается папка, в ко-
торой находится текущий HTML-файл. Для того чтобы указать другую базу, ис-
пользуется дескриптор <BASE>. В нем указывается "общая часть" пути всех объек-
тов, на которые в дальнейшем мы будем ссылаться. Например, если все картинки
находятся в каталоге MyGraphic, можно воспользоваться таким дескриптором:
<BASE href="http: //www.vasya. com. ua/MyHTML/MyGraphic">
Как это ни удивительно, дескриптор <BASE> — непарный. Область его дейст-
вия — от той точки, где он помещен, до конца файла или до следующего деск-
риптора <BASE>, где может быть указан другой исходный путь.

Поэтому дескрипторы <BASE> часто помещают в заголовок HTML-файла.
Подробнее об этом читайте в главе 13.


94 Глава 8
Недостатком дескриптора <BASE> является то, что в качестве "отправной точ-
ки", определяемой параметром href, приходится указывать полный URL. В слу-
чае переноса Web-страницы, например на другой сервер, этот дескриптор придет-
ся редактировать.


Размеры изображения
Можно ли увеличить или уменьшить картинку в окне броузера? Когда кар-
тинка вставляется в текстовый документ, например MS Word, ее размеры изме-
няются с помощью специальных кнопок-манипуляторов, которые появляются,
если выделить картинку.
Но ни в броузере, ни, тем более, в Notepad таких средств нет. Как быть?
Общее правило таково: за то, за что в других приложениях "отвечают" средст-
ва графического интерфейса, в HTML "отвечают"... Кто?
Правильно, дескрипторы и их параметры. В дескрипторе <IMG> есть два пара-
метра, определяющих ширину и высоту изображения, width и height, соответст-
венно. Задаются эти величины в пикселях. Проведем эксперимент. Не знаю, как
у вас, а у меня размер картинки — 300x211 пикселей. Интересно, что получится,
если задать параметр width равным, например 100? Каким будет размер картинки?
100x211? Как бы не так: картинка уменьшилась пропорционально так, что ее ши-
рина стала равной 100 пикселям (рис. 8.3). Очевидно, аналогичным образом
можно использовать параметр height. He верите — попробуйте сами.


<H1>3Toanbsp;Sndash; уменьшенный ЯК/Н1> f
<IMG src=uasya.gif width=108>




to D:\My docs\DWLECnHtmlTutor\TESTH




Это—
уменьшенный Я!



Рис. 8.3. Если задать параметр width или height,
то размер картинки изменится пропорционально

Однако нужно отметить, что это, пожалуй, не лучшее применение параметров
width и height. Почему? Ведь они, кажется, для того и созданы?

95
Графика на Web-странице
Дело в том, что при этом действительные размеры графического файла, кото-
рый приходится загружать в сети, не изменяются: меняется только размер того,
что выводится на экран, но не количество перекачиваемых килобайтов. Если же
вы хотите, чтобы скорость загрузки соответствовала качеству получаемой картин-
ки, нужно уменьшить картинку в графическом редакторе, например в Photoshop.
Но ведь зато, скажете вы, с помощью этих параметров можно сделать малень-
кую картинку, а на экране увеличить ее?
Можно, конечно. Но результат далеко не всегда оказывается удовлетворитель-
ным. Если в этом растровом изображении окажется хоть одна негоризонтальная и
невертикальная линия, то при увеличении вам не избежать зубчатых краев, кото-
рые подчас выглядят весьма неопрятно (рис. 8.4).


<m>3TOSnbep;&«dash; увеличенный Я!</Н1>
(IMG src=uasya.gif uidth=1000>




.. ; 'й*
-u --J лт; ••-# Н И
Щ
1
D:\My docs\DIALECT\HtmlTutoiVTESTHTMLhtml 1Й ^ПврвямВ



Это — увеличенный Я!


<<

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

СОДЕРЖАНИЕ

>>