<<

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

СОДЕРЖАНИЕ

>>





Служебные и "непечатные" символы 35
81аяио;Почитаю-ка я Sldquo;Самоучитель
HTMLSr dquo; Sraquo;, 8mdash: подумал я.




D:\My docs\DlALECT\HtmlTutortTESTHTML.ht



«Почитаю-ка я "Самоучитель HTML"», |
— подумал я.


Рис. 3.2. Правильное использование кавычек: в
HTML-коде указываются мнемонические имена
символов « » и " "
I« TFSTIITWL - Бпокнот


НТИЬ-стрвница что-то слишком долго открывается.
)на должна загружаться за 25ndash;4 минуты.
3peHflSnbsp;8ndash: деньги...




я
I i:P::/K',



В
fc. OSHtlEmb 1.4. 1РИ Н.1ИС-.

D \My docs\DIALECT\Htm!TuloATESTHTMLhtml



HTML-страница что-то слишком долго
открывается. Она должна загружаться за
2-4 минуты. Время — деньги...


Рис. 3.3. Примеры правильного использования дефиса,
длинного и короткого тире


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

Глава 3
36
В этих случаях, как вы могли догадаться, в HTML-коде обычно используется
неразрывный пробел (рис. 3.4).


<Р>На Ueb-стракице все должно
npeKpacHoSnbop;Smdaoh; и5пЬвр;текст, . . j
иЗпЬзр•графика, nSnbsp;дизайн.
<Р align=right>no4TH Я.П.Snbsp;Чехов

11 Щ
Вт 1
^ Клеенное
^
О-'5!ЛС СЕРВИС СпНОВР"!
?Е=ЙЛ


....... ИИ I ' 1 '

На Web-странице все должно быть
прекрасно — и текст, и графика,
и дизайн.
почти А. П. Чехов 1
ш

Рис. 3.4. Некоторые языковые конструкции тре-
буют использования неразрывного пробела

В качестве примера конструкций с неразрывным дефисом можно привести
диапазоны значений, сокращения и составные слова. Как быть с ними? Ведь
символа "неразрывный дефис" в HTML не существует.
Зато в HTML есть дескриптор <NOBR> (от англ, по break — "без разрыва"). Все,
что находится внутри него, должно поместиться в одной строке броузера. Други-
ми словами, броузеру попросту запрещается переход на новую строку, пока он не
встретит закрывающий дескриптор </NOBR>.
Что делает броузер, если содержимое конструкции <NOBR>... <NOBR> не поме-
щается в одной строке? Перейти на новую строку нельзя. Остается только вывес-
ти горизонтальную полосу прокрутки (рис. 3.5).
Используя дескриптор <NOBR>, следует учитывать особенности того, как мы
привыкли читать. Чем длиннее строчка, тем труднее переходить на следующую:
ведь ее еще нужно найти. Именно поэтому текст на широких газетных листах
разбивается на колонки. Именно поэтому аналогично поступают дизайнеры
многих сайтов, особенно новостийных.
И именно поэтому рекомендуется приложить все усилия, чтобы на вашей
странице никогда не появилась горизонтальная полоса прокрутки. Из-за нее не
только намного труднее читается текст, но и нарушается целостный образ стра-
ницы, складывающийся в представлении ее посетителя.
Бывает так, что на вашем компьютере страница выглядела нормально, но по-
сле того, как она появилась в Internet, посетители начали жаловаться: появляется
горизонтальная прокрутка, неудобно читать! В чем дело? А дело в том, что на
разных компьютерах установлено разное разрешение экрана, и у разных пользо-
вателей установлен разный размер шрифта в броузере. Если вы, например, про-
сматривали страницу при среднем размере шрифта, а кто-то предпочитает круп-

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


<NOBR>1-28nbsp;недели, и г-н Читвтвпь опопнв
освоит HTML...</N08R> Если не будет злоупотреблять
ескрипторон aitiNOBRSat;




1-2 недели, и г-н Читатель вполне ос
Если не будет злоупотреблять
дескриптором <NOBR>



Рис. 3.5. Если конструкция <NOBR>... <NOBR> не
помещается в одной строке, появляется гори-
зонтальная полоса прокрутки


SJTESTHTMI



:«е <NOBR>1-24пЬзр ; нед»ли, и г-н Читатель НВЕвполне
РСВОИТ HTML...</NOBR> Если не будет злоупотреблять
[ескрипторон 81t;NOBRSgt;


5>f*ft



3 ocs\DlALECT\HtmlTutoATESTI-rn4lLWml|



Еще 1-2 недели, и г-н Читатель
вполне освоит HTML... Если не
будет злоупотреблять
дескриптором <NOBR>



Рис. 3.6. Дескриптор <WBR> позволяет разметить мес-
та возможного перехода на новую строку внутри кон-
струкции <NOBR>... <NOBR>

Конечно, лучший способ избежать горизонтальной прокрутки — делать конст-
рукции <NOBR>... <NOBR> как можно короче. Но как быть, если это не получается?
Например, если в тексте встретилось очень длинное слово?


38 Глава 3
В Microsoft Word и других текстовых процессорах есть специальное средство -
"мягкий" перенос. Это некий символ, который вставляется в том месте слова, где
его при необходимости можно разорвать. Обычно этот символ не виден. Но как
только слово попадает на конец строки, в этом месте ставится дефис, и происхо-
дит перенос части слова на следующую строку.
Аналогичное средство есть и в HTML. Правда, это не символ, а дескриптор. На-
зывается он <WBR>, от английского word break — "разрыв слова". Только это не со-
всем точно: если поставить <WBR> в середине длинного слова, перехода на новую
строку в этом месте не будет. Другое дело, если поставить этот дескриптор внутри
конструкции <NOBR>... <NOBR>. Собственно, там ему самое место (рис. 3.6).


Резюме
Символы, не входящие в стандартный набор ASCII, обозначаются в HTML-коде
с помощью Esc-последовательностей или мнемонических имен. Esc-последователь-
ность представляет собой ASCII-код символа, перед которым стоят знаки &#, а по-
сле — точка с запятой. Мнемоническое имя символа — это некое сокращение, об-
разованное от его английского названия, перед которым стоит амперсанд, а по-
сле — точка с запятой. Так, левую и правую угловые кавычки (« и ») в HTML-коде
можно обозначить как Ш71; и Ш87; или же как &laquo; и sraquo;. Таким же спо-
собом в HTML-код вносят служебные символы HTML. Например, если на страни-
цу потребуется вывести угловые скобки, обычно используемые как признак деск-
рипторов HTML, то можно воспользоваться Esc-последовательностями &I60; и
&I62; или же мнемоническими именами &lt; и &gt;.
В Web-дизайне, как и в "бумажной" полиграфии, существуют определенные
традиции и правила по использованию разных видов кавычек, а также дефисов,
длинных и коротких тире. Эти правила следует знать и следовать им.
Кроме того, существуют правила орфографии относительно того, в каком мес-
те допустим переход на новую строку, а где он недопустим. Для того чтобы эти
правила выполнялись на Web-странице, необходимо пользоваться символом не-
разрывного пробела (Ш60; или snbsp;), а также дескриптором <NOBR>.
Все, что находится внутри конструкции <NOBR>... </NOBR>, выводится броузером
в одной строке. Если оно там не помещается, появляется горизонтальная полоса
прокрутки. Последнее крайне нежелательно. Для того чтобы разметить места воз-
можных переходов на новую строку, внутри конструкции <NOBR>... </NOBR> исполь-
зуются дескрипторы <WBR>.


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



Служебные и "непечатные" символы 39
в) Есть три типа кавычек: &laquo;eno4KH&raquo;, Sldquo;верхние natiKH&rdquo;
и Sbdquo;рукописные namcH&rdquo;.
г) Есть три типа кавычек: &171;елочки&187;, &8220;верхние лапки&8221; и
58222;рукописные лапки&8221;.
д) Есть три типа кавычек: &laquo;eno4KH&|187;, Ш2 20; верхние лапки&Ш21; и
&Ш22;рукописные лапки&Ш21;.
е) Есть три типа кавычек: &raquo;eno4KH&|187;, &I8220;верхние лапки&#8221; и
&Ш22;рукописные лапкий8221;.
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) HTML-страница не должна содержать ошибок - в том числе орфографических. И
ее объем не должен превышать 5-10 Кбайт.
б) HTML-страница не должна содержать ошибок Sdash; в том числе орфографиче-
ских. И ее объем не должен превышать 5&dash;10 Кбайт.
в) HTML-страница не должна содержать ошибок Sndash; в том числе орфографиче-
ских. И ее объем не должен превышать 5&mdash;10 Кбайт.
г) HTML-страница не должна содержать ошибок smdash; в том числе орфографиче-
ских. И ее объем не должен превышать 5&ndash;10 Кбайт.
д) HTML-страница не должна содержать 01ибок&пк1азп;в том числе орфографиче-
ских. И ее объем не должен превышать 5 sndash; 10 Кбайт.
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Р align=center> По-моему, весь этот текст должен выводиться в одной
строке</Р>
б) <NOBR align=center> По-моему, весь этот текст должен выводиться в одной
строке</ШВК>
в) По-моему,Snbsp;весь&пЬзр;этот&пЬзр;текст&пЬзр;долженЬпЬзр;
выводиться&пЬзр; в&пЬзр; одной&пЬзр; строке.
г) <NBSP> По-моему, весь этот текст должен выводиться в одной строке</ИВ8Р>
4. В каких точках (а, б, в, г, д) следующего фрагмента возможен переход на
новую строку:
<NOBR> Где nepe<WBR>(a)xofl на <WBR><6) новую стро-(в)ку: 3flecb?<WBR>wHnn здесь?

<Р> А может быть, и здесь тоже?</ЖШ>




Глава 3
40
Глава 4

Шрифты
В этой главе...

f Дескриптор <FONT>
Ф Гарнитура
ф Размер
* Цвет
4 Шрифт с несколькими параметрами
t Параметры шрифта по умолчанию



Дескриптор <FONT>
Как броузер определяет, каким шрифтом нужно выводить текст? Обычно он
использует тот шрифт, который задан в его настройках по умолчанию. Но эти
значения можно изменить. Больше того, страница, набранная только одним
шрифтом, одного размера и одного цвета, мало кому понравится. Такую и читать
неприятно, и делать неинтересно.
В текстовых процессорах эту проблему решают просто: заходят в диалоговое
окно настройки шрифта и выставляют там нужные параметры — гарнитуру, раз-
мер, цвет и др. В программах с английским интерфейсом это окно обычно так и
называется — Font, т.е. "Шрифт".
Дескриптор, отвечающий за параметры шрифта в HTML, тоже называется
<FONT>. Разумеется, он парный и влияет на вид текста, заключенного внутрь кон-
струкции <FONT>... </FONT>.
В отличие от текстовых процессоров, где в диалоговом окне Font можно ме-
нять многие характеристики шрифта, у дескриптора <FONT> только три параметра:
гарнитура, размер и цвет.


Гарнитура
За эту характеристику — пожалуй, главную при описании шрифта — в HTML
"отвечает" параметр face. Попробуем им воспользоваться (рис. 4.1).
Вообще-то, в моем броузере по умолчанию установлен Arial, <FONT face=Curier> но этот
текст должен выводиться моноширинным шрифтом</РО№Г>... если только я ничего не путаю
Что-то здесь не так... Ах, да! Ну конечно же: шрифт называется не Curler, a
Courier! Всего одна буква — а какая разница (рис. 4.2)...
A TESTHTML - Блокнот


Вообще-то, в моем броузере по умолчанию установленЩ
(trial, <FONT face=CJrier>Ho этот текст допжен
[(выводиться моноширинный шрифтом.. ,</FONT>
(если только я ничего не путаю.
В\'Я ОЛМу docs\DIALECT\HtmlTulot\TESTHTMLhlml - Мк
••] н'.р -.f,-, sut




or\TESTHTMLhtml


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


Рис. 4.1. Дескриптор <FONT> игнорирует ошибки в имени шрифта

в TESTHTML - блокнот


Вообще-то, в моем бг >ере по умолчанию установлен
Arial, <FONT face = ^EBBS^HO этот текст допжен
выводиться ноноширинным «рифтом...</FONT>
если только я ничего не путаю.
5 ОЛМу docs\DIALECT\HlmlTulor\TESTHTML hi


i ;
т
&
j
По»-.-
Останов...
iАдресj^3 D\My docs\DIALECT\HtmlTutoATESTHTMLhtrnl ИНН
ЯН


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


Рис. 4.2. Вот теперь все правильно

Есть существенное различие между тем, как мы воспринимаем печатный
и электронный текст. Замечено, что на бумаге удобнее читать текст, на-
бранный шрифтом с засечками, таким как Times или Baltica. С экрана
же комфортнее читается шрифт без засечек, такой как Arial или Verdana.
Замечательно! Ну-ка, попробуем подставить что-нибудь еще:
Вообще-то, в моем броузере по умолчанию установлен Arial, <FONT face=Arial Black>
но этот текст должен выводиться шрифтом Arial Black</FONT>
Кажется, мы опять что-то напутали (рис. 4.3). Сверим название шрифта... Нет,
здесь вроде все в порядке. Тогда где "собака зарыта"? В чем дело?


42 Глава 4
Зообще-то, в ноон броузере по умолчанию установлен _
flrial, <FONT face=Arial|Black>HO этот текст должен Й«!
выводиться шрифтом flrial Black</FONT>

шшнД
a DAMy docs\DIALECT\HtmlTutor\TESTHTML blml Mic




Поискi Извоэнн,
I D:\My docs\DUkLECT\HtmlTuttiATESTHT


Вообще-то, в моем броузере по умолчанию
установлен Arial, но этот текст должен
выводиться шрифтом Arial Black


Рис. 4.3. Этот код должен работать... но почему-то не
работает

В кавычках.
Пробелы, абзацы, табуляции внутри дескриптора броузер воспринимает как разде-
лители между названием дескриптора и параметрами. Поэтому если значение пара-
метра содержит пробелы, оно заключается в кавычки. Именно так следует поступить
в нашем случае, так как название шрифта — Arial Black — состоит из двух слов:
Вообще-то, в моем броузере по умолчанию установлен Arial, <FONT face="Arial
Black"> но этот текст должен выводиться шрифтом Arial Black</FONT>
ff. TESTHTML - Бпокнот


молчанию установлен
Вообще-то, в ноем бр
Ьно этот текст
ftrial. <FONT face=l
должен выводиться «рифтом flrial Black</FONT>
soft Intmnnl Exp i I" |
Ч Г) \Му docs\UIALECr\HtmlTutnr\TE!
Ззайп Црввкв й"0'
I
fV-ftmfTutoi\TESTHTML_html


Вообще-то, в моем броузере по умолчанию
установлен Arial, но этот текст должен
выводиться шрифтом Arial Black



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

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

43
Шрифты
страницу с ошибками, а если поставить их лишний раз — ничего не
произойдет. При автоматической и полуавтоматической разметке Web-
страниц в HTML-редакторах все значения параметров заключаются в
кавычки. В общем, экономить на кавычках не стоит.
При задании атрибута face следует помнить, что шрифт не сохраняется в
HTML-файле и не передается по сети вместе с текстом страницы. И нет никакой
гарантии, что на компьютере посетителя будут все необходимые шрифты. Как
тогда поступает броузер? Просто использует шрифт, установленный по умолча-
нию. Поэтому если вы использовали подобным образом какой-нибудь экзотиче-
ский шрифт, желая добиться определенного визуального эффекта, то пользова-
тель, скорее всего, ваших стараний не оценит.
Как выйти из положения?
Прежде всего, параметру face можно присвоить в качестве значения не один
шрифт, а целый список из нескольких похожих шрифтов. Авось у пользователя
найдется хоть один из них. Поскольку броузер просматривает список слева на-
право, то в начале списка обычно указывают наиболее подходящий шрифт, а в
конце — такой, который наверняка должен быть в наличии:
<FONT face="Cotton, Impact, Arial"> Какой-нибудь из этих шрифтов наверняка должен
быть на компьютере посетителя моей странички </FONT>
Вообще-то, многие Web-дизайнеры не жалуют параметр face именно за
то, что результат его применения сильно зависит от наличия у пользовате-
ля нужного шрифта. Если вид надписи сильно зависит от гарнитуры, а
она ну очень экзотическая, то надпись делают в графическом редакторе и
помещают на Web-страницу в виде картинки (см. главу 8). Если же гарни-
тура не очень существенна, то вместо конструкции <FONT face=...> многие
предпочитают использовать дескрипторы логического форматирования
(см. главу 6).
Многие шрифты в Windows представлены целыми семействами: отдель-
ный файл для полужирного шрифта, отдельный — для курсива и т.д.
Можно ли, например, написать так:
<FONT face="Arial Italic"> Это курсив? </FONT>
Нет, нельзя. В качестве значения параметра face следует использовать
не имена файлов со шрифтами и не те имена, под которыми эти шриф-
ты указаны в окне шрифтов Windows, а те, под которыми они фигури-
руют в броузере. (См. также раздел "Другие параметры".)


Размер
Не знаю, как у кого, но со мной при первом знакомстве с правилами задания
шрифтов в HTML случился легкий шок... Почему? Сейчас поймете.
Как задается размер шрифта в текстовом процессоре? Очень просто, в пунк-
тах. Неважно, что в лучшем случае один из сотни пользователей знает, что такое

Глава 4
44
пункт. Главное, что даже новичок уже через десять минут ориентируется в этих
размерах и может выбрать нужный.
В дескрипторе <FONT> также можно задать размер шрифта с помощью парамет-
ра size. Но как! Не в пунктах и не в миллиметрах, а в неких безымянных едини-
цах от 1 до 7. Это напоминает размеры одежды: все знают, что L больше, чем М,
и меньше, чем XL — и только. Так и в HTML, size =1 — самый мелкий шрифт,
size=7 — самый крупный. Ничего более определенного сказать нельзя.
Наконец, для того чтобы завершить картину хаоса, напомним, что размер
шрифта зависит еще и от желания пользователя. Обычно в броузерах предусмот-
рено несколько вариантов отображения текста. Конечно, это удобно: для того
чтобы сэкономить бумагу при печати странички, выставляем самый мелкий
шрифт, а для того чтобы читать с экрана длинный текст, — шрифт покрупнее.
Но какой после этого смысл в параметре size (рис. 4.5)?


<FONT size=1>3TO шрифт размера !</FONT>
<PXFONT size=2>3T» «риФТ размера 2</FONT>
<PXFONT size=3>3TO шрифт размера 3</FONT>
<PXFONT size=4>3To шрифт размера 4</FONT>
<PXFONT size = 5>3TO шрифт размера 5</FONT>
<PXFONT size=6>3ro шрифт размера 6</FONT>
<PXFONT size=7>3To шрифт размера 7|</FONT>
•-•/.•-
D:\My docs\DIALECT\HtmlTutor\TESTHTML html - Mi...
a D \My doc5\DIALECT\HtmlTutot\TESTHTML.ht



D \My docs\plALECT\H
] D\My docs\pl«-ECT\HtmlTutor\TESTHTMLhlml
Это ирчфт pn«*pj 1
Это шрифт размера 1
Эта шрифт размера 2

Это шрифт размера 2
Это шрифт размера 3


Это шрифт размера 3
Это шрифт размера 4


Это шрифт размера 5
Это шрифт размера 4
Это шрифт разм
Это шрифт размера 5
Это шрифт
Это шрифт размера 6
Это шрифт
Рис. 4.5. Код одинаковый, а размер шрифта разный. Так получается по-
тому, что параметр size определяет размер шрифта относительно того,
который установлен в броузере



Шрифты 45
Что ж, наведем некоторый порядок. Очевидно, указывать абсолютный размер
шрифта, например <FONT size=2>, имеет смысл далеко не всегда. Гораздо перспек-
тивнее выглядит возможность указать относительный размер — относительно то-
го, что установлен по умолчанию. Для этого нужно перед цифрой поставить знак.
Так, например, <FONT size=-2> соответствует шрифту, который меньше текущего
на две единицы, a <FONT size=+3> — большему текущего на три единицы
(рис. 4.6). Кстати, с помощью такого кода можно без труда убедиться, что по
умолчанию шрифт броузера соответствует size=3.


<FONT size=-2>3TOT шрифт мены» стандартного на 2</FONT>
<PXFONT eize=-1>3TOT шрифт меньше стандартного на 1</FONT>
<Р>Этот шри«т стандартного размера
<PXFONT size=+1>3TOT шрифт больше стандартного на K/FONT) щ
<PXFONT size = +2> Этот шрифт больше стандартного на 2</FONT> :
(PXFONT eize=+3> Этот шрифт больше стандартного на 3</FONT>
<PXFONT eize=+1> Этот шрифт больше стандартного на t|</FONT> ;'




Этот шрифт меньше стандартного на 2


Этот шрифт меньше стандартного на 1

Этот шрифт стандартного размера

Этот шрифт больше стандартного на 1

Этот шрифт больше стандартного на 2

Этот шрифт больше
стандартного на 3

Этот шрифт больше
стандартного на 4
Рис. 4.6. Такой код позволяет убедиться, что по умол-
чанию шрифт броузера соответствует size=3

А что будет, если приращение слишком большое? Например, <FONT size=T5>
или <FONT size=-4> относительно стандартного размера? Попробуем и посмотрим.
Ничего особенного: просто броузер "округляет" значение до ближайшего прием-
лемого, т.е. до +4 и -3, соответственно (рис. 4.7).




46 Глава 4
FONT size=+t>3TOT шрифт больше стандартного на 4</FONT>
PXFONT size=+5>3TOT шрифт больше стандартного на 5?</FONT>
PXFONT size=-2>3roT шрифт меньше стандартного на 2</FONT>
PXFONT siz»5-3>3TOT шрифт меньше стандартного на 37</FONT>|




т
3 D:\My docs\DIALECT\HtmlTutoiYrj



Этот шрифт больше
стандартного на 4
Этот шрифт больше
стандартного на 5?



Рис. 4.7. Если значение параметра size превышает до-
пустимый диапазон, то оно "округляется" до ближайшего
приемлемого значения


Цвет
По умолчанию текст Web-страницы выводится черным по белому. Так проще,
так привычнее, так легче читать. Но ведь очень часто хочется сделать иначе: что-
то сделать более ярким, где-то изменить цвет "под настроение".
Для того чтобы изменить цвет текста, в дескрипторе <FONT> предусмотрен па-
раметр color:
<FONT color=... >

Стоп.
Как задать цвет в текстовом HTML-коде?
Представьте себе ситуацию: вы беседуете по телефону с марсианином и хотите
описать ему восход солнца над морем. А тот понятия не имеет, как выглядит солнце
над нашей планетой, какого цвета утренняя морская вода и небо над ней. И вообще,
у него глаза устроены иначе. Поэтому вместо красивых слов "нежно-голубой",
"изумрудный", "золотистый" придется диктовать длины электромагнитных волн...
С броузером — примерно такая же история. Каждый цвет в HTML-коде обо-
значается шестнадцатеричным числом, перед которым стоит знак #, например:
<FONT color=|66CDAA> Текст цвета морской волны </FONT>
Чем не "марсианский" язык?
Впрочем, разобраться в этом "языке" не так сложно, как кажется на первый
взгляд. Цвет пикселя на экране монитора составляется так же, как и в телевизоре —

47
Шрифты
из красной, зеленой и синей точек разной яркости. Именно яркость этих трех точек
задается кодом. Первые два знака соответствуют яркости красной точки, вторые -
зеленой, третьи — синей. Поэтому формат цвета в HTML часто обозначают как
IRRGGBB (от английских слов Red — красный, Green — зеленый и Blue — синий). Яр-
кость каждой составляющей измеряется целым числом, которое в десятичной системе
исчисления находится в пределах от 0 до 255, а в шестнадцатеричной — от 00 до FF.
Даже если вы когда-нибудь занимались программированием, вряд ли вам понра-
вится подбирать цвета "на ощупь", меняя цифры и просматривая результат в броузе-
ре. Тем более вам не захочется заучивать на память все 16 миллионов цветов, которые
можно закодировать таким образом. А точнее, даже больше: 166 = 16777216.
Но это и не нужно. Многие цвета, кроме кода, имеют собственные названия.
Это шестнадцать основных цветов и еще 124 дополнительных, которыми тоже
вполне можно пользоваться. Например, наш "цвет морской волны" называется
mediumaquamarine. Пожалуй, этого достаточно, чтобы удовлетворить далеко не са-
мые скромные запросы.
Если же понадобится что-то совсем необычное, можно воспользоваться од-
ним простым приемом. Заключается он в следующем. В любом графиче-
ском редакторе, будь то Corel DRAW, Photoshop или обычный Windows
Paint, есть "палитра" для смешивания цветов. Из нее можно узнать интен-
сивность трех составляющих любого цвета. Правда, в десятичной форме.
Для того чтобы получить их шестнадцатеричные значения, можно восполь-
зоваться калькулятором Windows, переведя его в "инженерный" режим.
Проведем небольшой эксперимент. Проверим, действительно ли цвету
mediumaquamarine соответствует код 66CDM. Для этого выполним следую-
щие действия.

1. Создадим HTML-страничку с таким кодом:
<FONT color=mediumaquamarine size=5><B> Проверка цвета: mediumaquamarine
</B></FONT>
2. Запустим Windows Paint и откроем нашу страничку в броузере.
3. Скопируем окно броузера в буфер обмена с помощью комбинации клавиш
<Alt + Print Screen> и поместим его в Paint с помощью комбинации клавиш
<Ctrl+Ins> или <Ctrl+V>.
4. Выберем инструмент "пипетка" и щелкнем на интересующем нас цвете.
5. Выберем команду Палитра о Изменить палитру и в появившемся диалоговом
окне щелкнем на кнопке Определить цвет. А вот и то, что нам нужно, интен-
сивности составляющих: красный — 102, зеленый — 205, синий — 170.
6. Запускаем калькулятор и с помощью команды Вид <=> Инженерный перево-
дим его в расширенный режим.
7. Вводим интенсивность, например красного цвета (она у нас равна 102), и
переходим на шестнадцатеричное исчисление (режим Hex). Что написано в
"окошечке"? Правильно, 66.


Глава 4
48
8. Возвращаемся в десятеричный режим (Dec) и повторяем то же для зеленой
и синей составляющих. Получаем CD и АА соответственно. Сошлось?
Или не сошлось?
Вспомним: код цвета определяется из расчета, что всего у нас больше 16
миллионов цветов. Это соответствует режиму монитора True Color. Если ре-
жим другой, то цвет, указанный в HTML-коде, отсутствует в палитре мони-
тора, и броузер автоматически заменяет его другим, ближайшим. Отсюда и
возможное несоответствие "измеренного" и закодированного цветов.
Естественно, чем меньше цветов отображает монитор, тем заметнее подоб-
ные несоответствия. Как же теперь быть: ведь у разных посетителей сайта
разные мониторы?
Как правило, различия не настолько существенны, чтобы серьезно влиять
на качество дизайна и тем более на интерес к странице. А для тех случаев,
когда это все-таки важно, существует специальная таблица из 216
"рекомендованных" цветов, разработанная компанией Netscape, — так на-
зываемая "палитра Netscape". Эти цвета одинаково отображаются во всех
режимах монитора — от 256-цветного до True Color.


Шрифт с несколькими параметрами
А как описать в HTML-коде шрифт, который отличается от стандартного и
цветом, и размером, и гарнитурой? Если речь идет об одном фрагменте, то, разу-
меется, используется дескриптор <FONT> с несколькими параметрами:
<FONT face=Courier size=+2> Текст крупным шрифтом Courier</FONT>
Порядок перечисления параметров значения не имеет. С тем же успехом мы
могли бы написать:
<FONT size=+2 face=Courier> Текст крупным шрифтом Courier</FONT>
Помните, что разделителями между параметрами дескриптора HTML слу-
жат пробел, табуляция или символ перехода на новую строку. Разделение
параметров запятыми или точками с запятой (как это делают по привычке
программисты) приведет к неверному отображению страницы в броузере.
Если же разные элементы форматирования распространяются на различные
фрагменты текста, то можно воспользоваться вложенными дескрипторами <FONT>.
Предположим, нам нужно разметить текст следующим образом: выделить фразу
моноширинным шрифтом, в нем несколько слов увеличить на две единицы, и
еще некоторые буквы, например, те, на которые падает ударение, вывести дру-
гим, более ярким цветом. Тогда код будет выглядеть так:
<FONT color=red>3</FONT>TO o6<FONT со1ог=гес1>ы</ГОНТ>чный текст. <FONT
face=Courier>A <FONT color=red>3</FONT>TOT текст напеч<РО№Г color=red>a</FONT>TaH
mp<FONT color=red>H</FONT^TOM <FONT size=+2>Couri<FONT
color=red>e</FONT>r</FONT></FONT>

Шрифты 49
Помните, что каждый вложенный дескриптор нуждается в собственном за-
крывающем дескрипторе, даже если эти дескрипторы одинаковые. Нельзя
"закрыть" несколько дескрипторов <FONT> одним </FONT>. Код наподобие
Это обычный текст. <FONT face=Courier>A этот текст напечатан шрифтом
<FONT size=+2>Courier</FONT>
приведет к тому, что внутренний дескриптор <FONT size=+2> будет за-
крыт, а внешний <FONT face=Courier> — нет, и весь остальной текст на
странице будет выводиться шрифтом Courier.

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


Другие параметры
Как вы уже могли заметить, дескриптор <FONT> невыгодно отличается от соот-
ветствующей функции текстовых редакторов своими спартанскими, чтобы не ска-
зать попросту бедными, возможностями.
Некоторые из таких возможностей восполняются с помощью специальных деск-
рипторов. С тремя такими дескрипторами — <В>, <1> и <U> — вы уже знакомы.
Для зачеркнутого текста используются дескрипторы <STRIKE> и <S>. Их название
произошло от английского слова strikethmugh, что в переводе означает... правильно,
зачеркивание (ну никакой фантазии, правда?). Оба дескриптора реализуют одно дей-
ствие: вывод текста, перечеркнутого одинарной горизонтальной чертой (рис. 4.8).


In я изображения удаленного текста использовать:
<$ТН1КЕ>дескриптор SI t; STRIKESgt; </STRIKEXBR>
дескриптор Sit;SSgt;:<BR>
<P align=cent»r>ait;S<S>TRIKE<S>|&9t;




Для изображения удаленного текста
Ж
использовать: дескриптор «STRIKE»
дескриптор <S>:

<5ТП1КЕ>



Рис. 4.8. Для отображения перечеркнутого тек-
ста используются дескрипторы <STRIKE> и <S>



Глава 4
50
Зачем нужны два одинаковых дескриптора с разными названиями?
Здесь все до смешного просто. Стандарт HTML, как любой живой
язык, — неважно, компьютерный или разговорный — развивается. То,
что в процессе использования оказалось неудобным, изменяется, разные
части "притираются" друг к другу. Вспомните: то, что раньше называли
"кинематографом", сейчас зовут просто "кино", вместо длинного
"таксомотор" говорят просто "такси". Если вы сегодня скажете прияте-
лю, что посетили кинематограф и на обратном пути взяли таксомотор,
он, возможно, удивится, но вас поймет. То же и в HTML: вначале был
придуман длинный дескриптор <STRIKE>. Потом его название показалось
чересчур длинным, и его сократили до <S>. Но если вы напишете в коде
<STRIKE>, броузер вас поймет... И даже не удивится.

А как реализовать на Web-странице другие спецэффекты —объемные буквы,
мигающий текст, "малые прописные"? К сожалению, многое из того, что в тек-
стовых редакторах обычно сосредоточено в одном диалоговом окне, в HTML от-
носится к разным элементам языка. В частности, многое вы найдете в каскадных
таблицах стилей (см. главу 15). А если чего-то не окажется и там, придется вос-
полнять пробелы одного языка — HTML — возможностями другого — JavaScript
(см. главу 16). Наконец, если все эти средства не обеспечат нужного эффекта, ос-
тается одно: нарисовать желаемое в графическом редакторе и вставить надпись на
Web-страницу в виде картинки.


Параметры шрифта по умолчанию
Бывают случаи, когда нужно изменить шрифт больших массивов текста, на-
пример одного или нескольких абзацев. В таких случаях вместо дескриптора
<FONT> можно использовать дескриптор <BASEFONT>.
Дескриптор <BASEFONT> определяет параметры шрифта по умолчанию. В отличие
от <FONT>, дескриптор <BASEFONT> не является контейнерным и не имеет закрываю-
щего дескриптора: его действие распространяется до конца Web-страницы или до
следующего дескриптора <BASEFONT> (рис. 4.9). Поэтому, если <BASEFONT> определяет
параметры шрифта для всей страницы, его часто выносят в заголовок (см. главу 14).




Шрифты 51
<BflSEFONT face=Courier)
По умолчанию весь текст выводится «рифтом Courier,
<FONT eize=+2> топько этот Фрагмент чуть крупнее,</FONT>
<BASEFONT face=flrial> а отсюда и до конца текст будет
юдиться шрифтом Йг1а1
[ 5 ЩМу dncs\niAI HCT\HtmlTulnrVrESTHTML hlrr

1UBI
Я| -I
т ''-,':$ т
Оста»
locs\DlALECT\HtmlTutO[yr *


По умолчанию весь текст
выводится шрифтом Courier,
ТОЛЬКО ЭТОТ
фрагмент чуть
крупнее, а отсюда и до
конца текст будет выводиться
шрифтом Arial
:
;!:»м
Or^Vl"' I

Рис. 4.9. Использование дескрипторов <FONT> и
<BASEFONT>



Резюме
Параметры шрифта — гарнитура, размер, цвет — в HTML задаются с помо-
щью дескриптора <FONT>. Это контейнерный дескриптор, определяющий свойства
заключенного в него текста.
Гарнитура задается с помощью параметра face. Кроме собственно имени
шрифта, значением face может служить список имен шрифтов. В этом случае
броузер выбирает первый из списка шрифт, который есть на компьютере пользо-
вателя. Если же такого шрифта нет, параметр face игнорируется. Поэтому реко-
мендуется все надписи с нестандартной гарнитурой делать в графическом редак-
торе и вставлять в HTML-страницу в виде изображений (см. главу 8).
Размер шрифта определяется параметром size и выбирается из ряда от 1 до 7.
По умолчанию используется шрифт размера 3. Реальный размер текста в окне
броузера зависит от размера шрифта, установленного пользователем для просмот-
ра страниц. Поэтому чаще в дескрипторе <FONT> задается относительный размер
шрифта. Так, например, запись <FONT size=+2> означает, что дальше будет исполь-
зоваться шрифт на 2 единицы крупнее предыдущего.
Цвет шрифта определяется параметром color и задается по формуле jfRRGGBB,
где RR, GG и ВВ — двузначные шестнадцатеричные числа, обозначающие интен-
сивность красной, зеленой и синей составляющих, соответственно. Кроме того,
для стандартных 140 цветов существуют мнемонические имена, которые также
можно использовать при определении параметра color.


Глава 4
52
Если необходимо указать несколько параметров дескриптора <FONT>, то они
перечисляются в произвольном порядке через пробел, например: <FONT color=red
size=+3>. Кроме того, дескрипторы <FONT> могут быть вложенными.
Для того чтобы описать форматирование больших массивов текста, удобно ис-
пользовать дескриптор <BASEFONT>. Это одиночный дескриптор, имеющий те же
параметры, что и <FONT> и определяющий вид текста до конца страницы или до
следующего дескриптора <BASEFONT>.


Тесты
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FONT> Этот текст набран другим шрифтом</РОИТ>
б) <FONT face=Arial Cyr> Этот текст набран другим шрифтом</ГОМТ>
в) <FONT face="Arial Cyr"> Этот текст набран другим шрифтом</ГО№Г>
г) <FONT face="ARIAL CYR"> Этот текст набран другим шрифтом</ГОМТ>
д) <FONT face="Arial Bold"> Этот текст набран другим шрифтом-с/РОШ^
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FONT size=3> Этот текст набран другим размером </FONT>
б) <FONT size=8 pt> Этот текст набран другим размером </FONT>
г) <FONT size=-3> Этот текст набран другим размером </FONT>
д) <FONT size=+7> Этот текст набран другим размером </FONT>
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <FONT color=#123456> Этот текст набран другим цветом</РОМТ>
б) <FONT color=H123456> Этот текст набран другим цветом</РОИТ>
в) <FONT color=#ABCDEF> Этот текст набран другим цветом</ГОМТ>
г) <FONT color=|GHIKLM> Этот текст набран другим цветом</РОНТ>
д) <FONT color=#red> Этот текст набран другим цветом</РО№Г>
е) <FONT color=#&red> Этот текст набран другим цветом</ГОМТ>
ж) <FONT color=red> Этот текст набран другим цветом</ГОИТ>
з) <FONT color-red> Этот текст набран другим цветом</РОМТ>
4. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <font si'ze=l color=red> Этот текст набран мелким шрифтом и красным
цветом</?оп!>
б) <font color=red size=l> Этот текст набран красным цветом и мелким
шрифтом</?оп1>


Шрифты 53
в) <color=red font size=l> Этот текст набран красным цветом и мелким
IpHl}lTOM</fOnt>

г) <font="red, 1"> Этот текст набран красным цветом и мелким шрифтом</!огЛ>
д) <font color=red> Этот текст набран красным цветом и <font з!ге=1>мелким
шрифтом</?оп1>
е) <font color=red> Этот текст набран красным цветом и <font з1ге=1>мелким
шрифтом</1!оп1></!огЛ>
ж) <font color=red> Этот текст набран красным цветом и <font з!ге=1>мелким
size></font color>
5. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <BASEFONT color=blue> Синий текст <FONT color=yellow> Зеленый текст
</FONT>
б) <BASEFONT color=blue> Синий текст <FONT color=yellow> Желтый текст
</FONT>
в) <BASEFONT color=blue> Синий текст </BASEFONT>




54 Глава 4
Глава 5

Заголовки
В этой главе...

f Уровни заголовков
* Параметры заголовка



Уровни заголовков
Во многих текстовых процессорах есть такая функция: если некоторый текст
служит заголовком, его можно выделить соответствующим образом, использовав
цля этого один из специально предусмотренных стилей. Вместо того чтобы каж-
цый раз выполнять одни и те же действия — выделять текст более крупным и
жирным шрифтом, выравнивать его по центру страницы и т.п., — достаточно
присвоить этому фрагменту стиль соответствующего заголовка.
В HTML такая возможность тоже есть. Здесь предусмотрено 6 уровней заго-
товков. Первый уровень соответствует самому крупному заголовку, шестой — са-
мому мелкому. Для разметки заголовков используются дескрипторы вида <Нл>, где
1 — первая буква английского слова header (заголовок), а л — номер заголовка,
эт 1 до 6. Каждый заголовок выводится шрифтом своего размера и начинается с
-ювой строки. Дескрипторы заголовков являются парными: текст заголовка по-
мещается внутри конструкции <Нл>... </Нл> (рис. 5.1).
Как и большинство парных дескрипторов HTML, дескрипторы заголов-
ков нужно закрывать. Если этого не сделать, возможны самые неожи-
данные и, как правило, нежелательные эффекты.
Зато ставить дескриптор абзаца для перехода на новую строку не нужно:
броузер сам понимает, что заголовки — такая вещь, которая всегда на-
чинается с новой строки и после которой опять нужно перейти на но-
вую строку. Вот вам преимущества логической разметки!
Поиск
<Н1>Загоповок уровня 1</Н1>
<Н2>Загоповок уровня 2</Н2>
<НЗ>Заголовок уровня 3</НЗ>
<ЧЧ>Заголовок уровня Ч</НЧ>
<Н5>Заголовок уровня 5</Н5>
<Н6>Загоповок уровня 6</Н6>
<Н7>Загоповок уровня 7? Такого н»тК/Н7>
D:\My docs\DIAIECT\HlmlTutot\TESTHTML html | <'•'"(."" :
Правка $иа

а
.:,';",' ' . ":. ••:•.-• Олгангт . Обновить
О \Mydocs\DIALECT\l Itnil I utorj
щ

Заголовок уровня 1
:
Заголовок уровня 2
I
Заголовок уровня 3

.
Заголовок уровня 4

Заголовок уровня 5

:
Заголовок уровня 6


Заголовок уровня 7? Такого нет



Рис. 5.1. В HTML предусмотрено 6
уровней заголовков

Вообще-то, заголовки — вещь важная и нужная. В первую очередь для
того, чтобы текст проще читался. Сравните сами, что приятнее глазу:
страница или экран со сплошным "слепым" текстом, без единого цвет-
ного пятна или крупной буквы, где буквально не за что "зацепиться"?
Или текст, разбитый на небольшие, логически законченные части с по-
мощью заголовков разного уровня? Вопрос, по-моему, риторический.
Поэтому, если страница содержит большие массивы текста, рекоменду-
ется разбивать их с помощью заголовков так, чтобы при любом положе-
нии на экране находились 1—3 заголовка.
Но не кажется ли вам, что уровней заголовков многовато? В книгах и
электронных публикациях такой глубокой вложенности не встретишь.
Действительно: когда многочисленные заголовки вложены друг в друга,
как матрешки, в них трудно разобраться. Вместо того чтобы вносить яс-
ность, многочисленные мелкие заголовки только запутывают читателя.
Обычно на Web-страницах используют 1-2 уровня заголовков, хотя в от-
дельных случаях, — например, если речь идет о большой книге, — вло-
женность может доходить до четырех уровней.
Но в HTML таких уровней шесть! Для чего они?



56 Глава i
Запас никогда не помешает. Например,- для того, чтобы использовать
заголовки не подряд, а через один. Скажем, если нам нужна двухуровне-
вая вложенность, то мы вовсе не обязаны использовать обязательно за-
головки <Н1> и <Н2>. Вместо этого можно воспользоваться, например,
<Н2> и <Н4> или любыми другими, и таким образом подобрать нужное
соотношение размеров.


<Н1>Заголооок уровня 1</Н1>
Здесь что-то написано обычным «рифтон|
<Н2>Загоповок уровня 2
<Р>Вот что бывает, если не закрыть дескриптор Н2
<НЗ>Загоповок уровня 3</НЗ>
и здесь что-то написано... как заголовок Н2
3 D \My do ItmlTutorVTESTHTMLhlfi
ис
1,1 Орав*' Еиа Цз%>»"нов


и Журим
Ч *

^Jj г1 Переход (Ссылки
у docs\D W.ECT\HtmrTuffliYTESTHTMLMml


Заголовок уровня 1
Здесь что-то написано обычным шрифтом

Заголовок уровня 2
Вот что бывает, если не закрыть
дескриптор Н2
Заголовок уровня 3

И здесь что-то написано... как заголовок Н2

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


Параметры заголовка
Итак, у нас есть средство для разметки заголовков и подзаголовков страницы.
Яо не слишком ли оно однообразно? В конце концов, это всего лишь вариации
ia тему размера шрифта в пределах одного абзаца.
Есть ли у дескрипторов <Нл> параметры?
Разумеется. И это те же параметры, что и у дескриптора <Р>. Точнее, один па-
тметр абзаца — выравнивание (align). Как и обычные абзацы, заголовки по
'молчанию выравниваются по левому краю. Но с помощью параметра align их
южно выровнять по правому краю или по центру (рис. 5.3).
А как же с другими параметрами? Ведь заголовки часто отличаются не только раз-
•tepoM шрифта и выравниванием, но и цветом, и гарнитурой, да мало ли еще чем?

Заголовки 57
|<НЧ align=right>3aronoBOK уровня Ч</НЧ>
amdash; выровнен по правому краю
<Н5 align=center>3aronoBOK уровня 5 </Н5>
«выровнен по центру
<Н6 align:left>3aronoBOK уровня 6</Н6>
jfl параметр
|<FONT face = Courier><B>align= left</B|></FONT>
было и не указывать
Э DAMy docs\DIALECT\Htmn utui\TESTHTML html - Ми




. т \ и.
oes\DIALECT\HtmlTutor\TEST


Заголовок уровня 4

— выровнен по правому краю
Заголовок уровня 5
выровнен по центру
Заголовок уровня 6

А параметр aiign=ief t можно
было и не указывать


Рис. 5.3. К дескрипторам заголовков при-
меним тот же параметр align, что и к
обычным абзацам
Что ж, ответ на этот вопрос такой же, что и на вопрос об аналогичном форма-
тировании обычного абзаца: используйте другие средства. Благо в HTML их хва-
тает. Например, средства уже известного вам дескриптора <FONT>. Или же средст-
ва пока неизвестных вам каскадных таблиц стилей (см. главу 15). Наконец, если
заголовки представляют собой нечто уж вовсе экзотическое, можно заменить
текст рисунком (см. главу 8).
Однако есть еще один аргумент в пользу применения дескрипторов <Нл>,
а не, например, графики или обычного текста. Текст, заключенный
внутри заголовочной конструкции, пользуется особым вниманием поис-
ковых серверов. Именно по нему они определяют тему страницы и при-
нимают решение о помещении ее в тот или иной раздел электронных
каталогов. Подробнее об этом вы узнаете из главы 14.


Резюме
Для выделения заголбвков более крупным и жирным шрифтом в HTML ис-
пользуются дескрипторы <Нл>, где л — цифра от 1 до 6. Заголовок 1 уровня выво-
дится самым крупным шрифтом, заголовок 6 уровня —- самым мелким.

58 Глава 5
Несмотря на наличие шести уровней заголовков, для хорошей структуризации
страницы обычно достаточно двух-трех. Более глубокая вложенность часто лишь
мешает читателю составить четкое представление о структуре документа.
Заголовки почти во всем похожи на абзацы, размечаемые с помощью дескрип-
тора <Р>: сами они и следующий за ними текст всегда начинается с новой строки,
а для более точного форматирования используется тот же параметр, что и у деск-
риптора <Р> — align. Однако, в отличие от дескриптора <Р>, в заголовках преду-
смотрены только три значения этого параметра — left, right и center. Остальные
параметры текста, как и в обычном абзаце, определяются другими средствами, в
частности с помощью дескриптора <FONT>.
Кроме того, дескрипторы заголовков, в отличие от дескрипторов абзаца <Р>,
обязательно нужно закрывать. Иначе весь текст до конца страницы по умолча-
нию будет считаться заголовком соответствующего уровня.


Тесты
1. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Н1> Это заголовок первого уровня
б) <Н1> Это заголовок первого уровня </Н1>
в) <Н1> Это заголовок первого уровня </Н2>
2. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Н1> Это заголовок <BR> из двух строк </Н1>
б) <Н1> Это заголовок <Р> из двух строк </Н1>
в) <Н1> Это заголовок <Н2> из двух строк </Н2х/Н1>
г) <Н1> Это заголовок </Н1><Н2> из двух строк </Н2>
3. Какой или какие из следующих фрагментов HTML-кода содержат ошибки?
а) <Н1>Это заголовок, выровненный по левому краю</Н1>
б) <Hl align=left>3TO заголовок, выровненный по левому краю</Н1>
в) <Hl align=right>3To заголовок, выровненный по правому краю</Н1>
г) <Н1 align=center>3TO заголовок, выровненный по центру</Н1>
д) <Н1 align=justify>3TO заголовок, выровненный по ширине</Н1>




Заголовки 59
Глава 6

Логическая разметка
гипертекста
В этой главе...

4 "Логические" дескрипторы
4 Расстановка акцентов
4 Цитаты
4 Верхние и нижние индексы
4 Имитация бурной деятельности
4 Сокращения
4 Обратный адрес
4 Зачем все это?
4 HTML придумал программист...



"Логические" дескрипторы
Откровенно говоря, понятия "логической" и "физической" разметки Web-стра-
ницы довольно условны. Говоря так, противопоставляют жесткую привязку к "физи-
кским" особенностям страницы выделению на ней логически цельных элементов.
Точный вид этих элементов, соответствующим образом размеченных в коде
Web-страницы, на экране зависит от броузера, установленного у посетителя стра-
ницы. Но от него, похоже, и так зависит слишком много... Так не лучше ли
экончательно положиться на то, что броузер так или иначе выделит нужные нам
элементы текста, и не пытаться навязать ему свое видение?
Собственно, с дескрипторами обоих типов вы уже знакомы. Попробуйте, не
штая следующую фразу, отнести уже известные вам дескрипторы к той или иной
сатегории. Можете даже составить два списка — "физический" и "логический".
Готово? Тогда давайте сравним.
Действительно, дескрипторы, "отвечающие" только за внешний вид текста, —
:U>, <B>, <I>, <FONT>, <P>, <BR>, <WBR>, <NOBR>, — относятся к средствам "физичес-
сой" разметки. Однако дескрипторы заголовков однозначно попадают в разряд
'логических": ведь они не столько описывают видимые свойства текста, сколько
збозначают его роль на странице.
Действительно, до сих пор мы в основном имели дело с дескрипторами
"физического" типа. Восполним этот пробел и рассмотрим другие логические де-
скрипторы языка HTML.


Расстановка акцентов
Что мы делаем, когда хотим обратить внимание читателя на что-то важное?
Правильно, выделяем важное курсивом. Или полужирным. Или подчеркиваем.
Или еще как-нибудь.
Но страница, где встречается сразу несколько вариантов выделения, — и под-
черкивание, и курсив, и еще что-нибудь — выглядит, мягко говоря, любительски,
чтобы не сказать, — неопрятно. Избежать беспорядка будет гораздо проще, если
вместо разнообразных вариантов выделения использовать логическую разметку.
Для этого в HTML предусмотрено несколько средств (рис. 6.1).
* TESTHTML - Блоини I
,


С помощью дескриптора SltjEMSgt; выделяются <ЕМ>важные моненты</ЕМ>. |р
<Р>Я С помощью дескриптора &lt:STRONG&gt; выделяются
<$ТПОМ6>очень важные ноненты</STRONG>.
<Р>Наконец, дескриптор &lt;DFN&gt; применяется для определений:<BR> ^
<DFN>HTML (Hypertext Markup Language).</DFN> Язык разметки
электронных гипертекстовых документов




| j D\My docs\DIALECT\H1mlTutor\T6STHTML.html
f


С помощью дескриптора <ЕМ> выделяются важные
моменты.
А С помощью дескриптора <STRONG> выделяются очень
важные моменты.
Наконец, дескриптор <DFN> применяется для определений: ;
HTML (Hypertext Markup Language). Язык разметки
электронных гипертекстовых документов.


Рис. 6.1. Варианты выделения важных фрагментов текста с помощью
логических дескрипторов HTML

Как поступают в книгах, когда хотят сакцентировать внимание читателя на
нескольких важных словах? Правильно, выделяют эти слова курсивом. Для этого
в HTML есть "физический" дескриптор <1>. Но, кроме него, специально для вы-
деления важных моментов имеется дескриптор <ЕМ>. Его название происходит от
английского слова EMphasis — постановка ударения, выделение, подчеркивание.
Дескриптор <ЕМ> является парным. Все, что заключено внутри конструкции
<ЕМ>... </ЕМ>, обычно выводится курсивом.


62 Глава 6
Действительно, из всего прочитанного текста в первую очередь запоминается
то, что было напечатано курсивом (разумеется, при условии, что остальной текст
был обычным). А как сделать, чтобы какое-то слово или несколько слов букваль-
но бросались в глаза еще прежде, чем читатель примется за чтение? Обычно для
этого используют более крупный или, по крайней мере, жирный шрифт. Как это
делается на "физическом" уровне, вы уже знаете — с помощью дескриптора <В>.
Если же вам не хочется вникать в подробности того, как именно будет выделен
данный текст — лишь бы заметно выделялся, — можно воспользоваться дескрип-
тором <STRONG>. Этот дескриптор, как и <ЕМ>, парный: все, что заключено между
<STRONG> и </STRONG>, обычно выводится на экран жирным шрифтом.
Наконец, бывает не просто важная информация, а нечто такое, чему в последую-
щих фразах дается определение. Например, как в словарях. Для логической разметки
таких терминов используется дескриптор <DFN> (от английского DeFiNition — "опреде-
ление"). Обычно содержимое конструкции <DFN>... <DFN> отображается курсивом.


Цитаты
Согласно правилам русского языка, цитаты заключаются в кавычки. Это в
электронных публикациях нам придется делать самостоятельно так же, как если
бы мы писали ручкой на бумаге в линеечку.
Но, кроме кавычек, цитаты обычно выделяются форматированием. Для корот-
ких — не больше одного предложения — цитат, как правило, достаточно курсива.
Более длинные — на несколько предложений — цитаты часто выделяют в отдель-
ный абзац, чтобы текст лучше воспринимался.
Для разметки коротких цитат применяется дескриптор <С1ТЕ>. Все, что находится
внутри конструкции <С1ТЕ>... </С1ТЕ>, обычно выделяется курсивом. Для больших
цитат используется дескриптор <BLOCKQUOTE>. Все, что находится между <BLOCKQUOTE> и
</BLOCKQUOTE>, выносится в отдельный абзац с отступом (рис. 6.2).




Логическая разметка гипертекста 63
Пне очень нравятся строки Пушкина:
<BLOCKQUOTE>
Я помню чудное мгновенье,<BR>
Передо мной явилась ты,<Вк>
Как мимолетное виденье,<BR>
как гений чистой красоты.
</BLOCKQUOTE>
После бессонной ночи, проведенной у монитора, меня тоже
стали посещать <CITE>aiaquo;мимолетные виденья8гаяио;</С1ТЕ>




D:\My docs\DIALECT\HtmlTubrtTESTHTMLhtml


Мне очень нравятся строки Пушкина:

Я помню чудное мгновенье,
Передо мной явилась ты,
Как мимолетное виденье,
как гений чистой красоты.

После бессонной ночи, проведенной у монитора, меня тоже
стали посещать «мимолетные виденья»...


Рис. 6.2. Короткие цитаты обычно выделяются курсивом с помощью де-
скриптора <С1ТЕ>, длинные — выносятся в отдельный абзац с помощью
дескриптора <BLOCKQUOTE>


Верхние и нижние индексы
Как известно, текст верхних и нижних индексов выводится более мелким
шрифтом и располагается соответственно выше или ниже уровня строки. Конеч-
но, можно изобразить нечто отдаленно похожее на нижний индекс, используя
просто мелкий шрифт (рис. 6.3), а если приложить еще больше усилий, — то да-
же верхний индекс. Но так будет еще менее аккуратно.
Для того чтобы упростить Web-дизайнеру жизнь, в HTML предусмотрены деск-
рипторы <SUB> и <SUP>. Их названия происходят от английских слов subscript и su-
perscript, что означает "нижний индекс" и "верхний индекс", соответственно. Оба
эти дескриптора парные. Все, что попадает внутрь конструкции <SUB>... <SUB>, вы-
водится более мелким шрифтом и на полстроки ниже основного текста, а все, что
попадает внутрь конструкции <SUP>... <SUP>, — на полстроки выше основного тек-
ста и также более мелким шрифтом. Сравните код, где используются дескрипторы
<SUB> и <SUP> (рис. 6.4), с кодом, представленным на рис. 6.3.




Глава 6
64
упа серной KMcnoibi&nbsp;?ndash;
<FONT eizQ=1>2</FONT>SO<FONT siz»=1>4</FONT>




Формула серной кислоты — H2SCU


Рис. 6.3. Нечто похожее на нижний индекс можно
изобразить с помощью более мелкого шрифта



SUB>2</SUB>SO<SUB>t</SUB>.
Р>й уравнение Эйнштейна?пЬзр;fiidash;
Snbsp;=8nbsp ; »c<SUP>2</SUP>




D:\My do«\DIALECT\Htmrrutoi\TESTHTML


Формула серной кислоты

А уравнение Эйнштейна



Рис. 6.4. Но с помощью дескрипторов <SUB> и
<SUP> можно добиться большего эффекта

Некоторые символы,' часто играющие роль верхнего и нижнего индек-
садакие как 2, 3, °, ™, встречаются в распространенных шрифтах. Что
предпочесть: их или специальные дескрипторы индексов — решать вам.
Главное, чтобы соответствующий шрифт нашелся и на компьютере по-
сетителя вашей странички (см. также главу 4).


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

Логическая разметка гипертекста 65
Что обычно является первым признаком того, что над бумажным документом как
следует поработали? Поздно сдан? В какой-то степени, да, но нам это не подходит.
Измятая бумага? Хорошая идея: имитировать потертости, вмятины и жирные пятна за
счет соответствующей графики... Но об этом позже. Ага, вот оно: многочисленные
исправления! Их-то можно без особого труда внести и в электронный документ.
Да, но ведь на то он и электронный, чтобы даже после основательной пере-
делки не содержать помарок! Их остается только имитировать.
Как вы уже знаете, в HTML-коде зачеркнутый текст размечается дескрипто-
рами <STRIKE> и <S>. На этом можно было бы и остановиться. Но идея логической
разметки заключается в том, чтобы не столько описать вид текста на экране,
сколько обозначить его роль в документе. Броузер, как хороший актер, сам ра-
зыграет эту роль для посетителя страницы так, чтобы тот все понял правильно.
Для разметки удаленного текста используется дескриптор <DEL>. Его название
происходит от английского слова delete (удалить). Внешне удаленный текст выгля-
дит так же, как текст, заключенный внутри конструкции <S>... <S> (рис. 6.5).


Это <ОЕЬ>удал»нный текст</ОЕ1_>
измененный дескриптором SltiDELSgt,.
<Р>Я 3ToSnbsp;Smdash; <$>эачеркнутый текст</$>,
>аонеченный дескриптором



<<

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

СОДЕРЖАНИЕ

>>