Цвет фона и текста
Эти элементы задаются в команде BODY. Кроме того,
можно временно изменить цвет текста, заданный в BODY при
помощи команды FONT (атрибут color).
Известно, что наиболее благоприятны для восприятия —
абсолютно чёрный текст на абсолютно белом фоне:
<BODY bgcolor=white text=black>
|
|
Прогулка
Папа пошел в лес за грибами.
|
|
Именно такие значения устанавливает для этих атрибутов
браузер IE по умолчанию. То есть если написать просто тег <BODY>
без всяких атрибутов, IE будет выводить чёрный текст на белый
фон.
У браузера NN умалчиваемые значения другие: чёрные символы на
сером фоне.
Пользователь может изменить эти “умалчиваемые” значения и
сделать их какими угодно для своего браузера. Правда, обычные
пользователи редко это делают, но такая возможность есть.
Поэтому, ориентируясь на академический стиль, нужно всегда
писать явно:
<BODY bgcolor=white text=black>
|
Приходится в этом месте сделать огорчительное замечание.
Настройки браузеров настолько гибки, что в них можно задать
режим, при котором браузер не будет обращать внимания на
атрибуты bgcolor и text в BODY, а будет использовать
цветовую гамму, установленную пользователем.
Цвет ссылок
Ссылки — это особый элемент гипертекстового жанра. Ссылок как
активных элементов нет ни в книге, ни в газете. В академическом
стиле ссылки выделяются цветом и подчеркиванием. В силу этого:
- Не подчеркивайте другие элементы на экране. Пользователь
будет пытаться выполнить “клик” на подчёркнутом и будет
огорчаться, что ничего не происходит.
- Старайтесь, по той же причине, не выделять текстовые
элементы тем же цветом, что и ссылки. Вообще, избегайте
выделения цветом. На странице и так есть цветные пятна —
ссылки. Дополнительные цветные вкрапления приведут к
пестроте. Выделять можно, используя жирность или курсив (но
не одновременно). Заголовки выделяются специальными
командами Hx (жирность и размер).
Так как ссылка — это уже выделение текста, то:
- Не записывайте как ссылку слишком большой текст. Ведь
известно, что выделить много, значит, не выделить ничего.
Например, не надо делать ссылкой фразу “посмотрите,
как выглядит этот рисунок”. Лучше ссылкой сделать только
одно слово: “посмотрите, как выглядит этот
рисунок”.
- Не выделяйте текст под ссылкой дополнительно (курсивом,
размером, жирностью). Одного выделения уже достаточно, а
ссылка имеет их целых два — цвет и подчёркивание.
- Не располагайте несколько ссылок слишком близко друг к
другу. Пользователь может подумать, что видит одну большую
ссылку.
С ссылками связан не один цвет, а целых три:
- цвет неотработанной ссылки (пользователь еще не “кликал”
на ней);
- цвет ссылки после щелчка (пользователь “кликнул” на
ссылке, документ, на который указывает ссылка, грузится по
сети);
- цвет отработанной ссылки (пользователь “ходил” по этой
ссылке);
Цвет неотработанной ссылки должен быть заметным, контрастным
по отношению к остальным цветам страницы. Ведь мы хотим привлечь
к ссылке внимание пользователя. Хотим сделать так, что бы его
рука сама потянулась к мышке, и он сделал то физическое усилие,
на которое рассчитывал проектировщик страницы.
Посещенные (отработанные) ссылки должны иметь существенно
меньшую напряженность окраски. Они должны говорить об окончании
своей рабочей смены и отдыхать. Не надо на них по-прежнему
фиксировать взгляд пользователя.
Цвет ссылки, сразу после щелчка, должен быть еще более
активным, чем цвет неотработанной ссылки. Внимание! Я (ссылка)
приступила к работе. Документ загружается и скоро появится на
вашем экране. Потерпите немного!
В браузерах цвета ссылок по умолчанию такие:
синий — цвет неотработанной ссылки
красный — цвет активной ссылки
пурпурный — цвет отработанной ссылки
Эти цвета выбраны, конечно, не случайно.
Однако, как и в случае умолчания для цвета фона и текста,
пользователь может покопаться в настройках браузера и
переустановить, по крайней мере, два из этих трёх параметров по
своему желанию.
Поэтому, всегда записывайте в теге BODY атрибуты, явно
задающие цвета ссылок.
BODY в чёрном костюме, белой рубашке и строгом
галстуке выглядит так:
<BODY bgcolor=white text=black
link=blue alink=red vlink=purple>
|
Эта запись совершенно эквивалентна следующей:
<BODY bgcolor=#FFFFFF text=#000000
link=#0000FF alink=#FF0000 vlink=#800080>
|
Смысл атрибутов:
- link — задает цвет неотработанных ссылок;
- alink — задает цвет активных ссылок (во время загрузки
документа);
- vlink — задает цвет отработанных ссылок.
Кегль шрифта
Кегль — это размер шрифта. В Word этот параметр задаётся в
специальном окошке числами, как правило, от 8 до 72. Можно не
выбирать готовое значение, а вписать число “руками”, например,
“1” или “500”. Word будет работать!
Что означают эти числа? Это величина кегля в пунктах. Один
типографский пункт равен 0,375 мм. Причем, это размер не самих
символов шрифта, а размер так называемого “очка”. То есть,
размер по вертикали матрицы, на которой гравируется в типографии
символ (литера). Этот размер больше, чем размер самой литеры.
Так, в шрифте кегля 10 заглавные буквы имеют размер около 7
пунктов.
При печати книг, как правило, для основного текста выбирается
кегль в 10 или 12 пунктов. Для заголовков — более крупные кегли,
а для ссылок и примечаний более мелкие (обычно 8 пунктов).
Какие средства дает HTML для управления кеглем?
Реальный размер символов на HTML-странице зависит от двух (на
самом деле от трех, но об этом чуть ниже) вещей:
- От базового размера шрифта, установленного в браузере.
- От относительного размера, который выставляется
атрибутом size в теге FONT или задается тегами
SMALL и BIG.
Задание размера в команде FONT
Атрибут size может принимать значения (условные) от 1 до 7.
Причем, значение size=3 соответствует базовому размеру шрифта,
который выставлен в настройках браузера. Другие значения
атрибута size позволяют отклоняться от базового размера в
сторону уменьшения или увеличения. Существуют и другой способ
задания размера шрифта в виде size=+n или size=-n. В этой
системе отсчёта за 0 берется размер базового шрифта.
Итак, размер шрифта в теге FONT можно задавать
следующим образом:
size=1 size=-2
size=2 size=-1
size=3 size=+0 Базовый размер, выставляется в браузере.
size=4 size=+1
size=5 size=+2
size=6 size=+3
size=7 size=+4
Базовый размер шрифта браузера
Один из первых читателей гипертекстовой книги
“HTML-конструирование” стал жаловаться, что читать её совершенно
невозможно, ибо она написана слишком мелким шрифтом. “Такая
нонпарель может подорвать здоровье детей и сделать их калеками
прежде, чем они научатся писать гипертексты.” — заявил он мне.
Зная, что “HTML-конструирование” написана шрифтом по
умолчанию, который пользователь может регулировать
самостоятельно, я пошел посмотреть на настройки браузера своего
оппонента.
Причина нонпарели оказалась не в настройках браузера. Там
было установлено обычное значение “размер шрифта = средний”,
дело оказалось в разрешении экрана.
Я увидел, что для экрана в 14" (с плохим зерном) установлено
разрешение 1024x768! Предложение изменить разрешение вызвало
протест, тогда мы поставили в браузере “размер шрифта = самый
крупный“ и ситуация выправилась.
Казалось бы простой вопрос, “Чему равняется кегль базового
шрифта браузера?” — совсем не прост и не однозначен. Ответ
зависит как от разрешения экрана (то есть, его размера в
пикселах), так и от его реального размера в сантиметрах или
дюймах. Вот вам и третий компонент размера символа на экране:
диагональный размер самого экрана и установленное разрешение!
Задание размера в командах BIG и SMALL
Эти команды подробно описаны в уроке 2 книги. Их
использование тоже ориентировано на изменение кегля шрифта по
отношению к базовому размеру.
Гарнитура шрифта
Гарнитура — это набор начертаний символов одного шрифта.
Этот набор может включать в себя прямое и курсивное
начертание, различаться по степени жирности (толщине штрихов),
ширине литер (сжатые, нормальные, растянутые) и кеглю.
Сами шрифты подразделяются на серифные (с засечками) и
рубленые (без засечек). Пример шрифта с засечками — гарнитура
Times, без засечек — Helvetica.
Серифные шрифты посредством засечек (серифов) в нижней части
литер улучшают читаемость документа. Нижние серифы создают
впечатление слитности написания слова, объединяя соседние буквы.
Рубленые шрифты, в отличие от серифных, имеют гладкие края
букв и не имеют завитков. Чаще всего они используются для
заголовков и для создания на HTML-страницах надписей,
“замурованных” в графику (надпись внутри логотипа, заголовок
сайта, заголовки страниц).
Можно предложить еще одно деление шрифтов на два класса:
пропорциональные шрифты и моноширинные.
Моноширинные шрифты имитируют литеры пишущих машинок и
матричных принтеров. В этих шрифтах ширина всех литер одинакова.
Именно таким шрифтом браузер выводит текст на экран по командам
PRE, CODE, TT, SAMP, KBD.
Обычные же тексты браузер выводит пропорциональным шрифтом. В
пропорциональных шрифтах каждая буква занимает столько места,
сколько ей действительно нужно.
Гарнитуры Times и Helvetica — пропорциональные. К
моноширинным шрифтам относится гарнитура Courier.
Любая графическая операционная система имеет три набора
стандартных гарнитур, для Windows это:
Times New Roman (серифный шрифт)
Arial (рубленый шрифт)
Courier (моноширинный шрифт)
Браузер по умолчанию использует шрифт Times New Roman для
вывода обычного текста и шрифт Courier для моноширинного.
Однако и здесь пользователь имеет возможность установить свои
собственные значения шрифтов для режима умолчания.
Академический стиль HTML активно не поощряет приемы
управления гарнитурой шрифта, хотя для этой цели существует
специальный атрибут face в команде FONT. Можно запросто
написать:
<FONT face=SchoolBook>
Этот текст будет показан
шрифтом SchoolBook?
</FONT>
|
| Этот текст будет
показан шрифтом SchoolBook? |
|
И тот же Word, переводя свой текст в HTML, расставляет эти
атрибуты в соответствии с используемыми в этом тексте шрифтами.
Так как в Word нельзя писать шрифтом “по умолчанию”, все без
исключения тексты из-под Word обрамляются тегами FONT с
атрибутом facе.
На своём компьютере вы видите красивые HTML-документы из-под
Word и недоумеваете — почему же не отойти от скучного Times New
Roman?
Как браузер интерпретирует атрибут face
Сначала браузер пытается найти заказанный шрифт на компьютере
пользователя. Если такой шрифт есть, он использует его для
показа текстового фрагмента.
Неприятность. Шрифт с одним и тем же названием может
содержать или не содержать в своем наборе русские буквы. Иными
словами, ваш текст у пользователя может быть похож на
“древненорвежский” и никакие переустановки кодировок в браузере
не помогут. Изображений (глифов) русских букв в шрифте просто не
существует!
Уж лучше бы браузер не нашел заказанного шрифта! В этом
случае он станет пользоваться шрифтом по умолчанию, то есть
шрифтом Times New Roman или тем, который установил пользователь
вместо Times Roman для своего браузера.
Значением атрибута face может быть не один, а целый список
шрифтов (разделитель — запятая). Если хочется вывести надпись
рубленым шрифтом, можно написать:
<FONT face="Arial,Geneva,Helvetica>
Текст будет показан
рубленым шрифтом?
</FONT>
|
| Текст
будет показан рубленым шрифтом? |
|
Сначала браузер пытается найти первый из указанных шрифтов,
потом, в случае неудачи, второй, и так далее, по списку.
Если ни один шрифт не найден, берется шрифт по умолчанию. И
эта неудача может оказаться для пользователя сущим благом.
>Назад< |
