08. Оформление текста

Рассмотрим приёмы выделения текста и способы его выравнивания на странице, а также выясним причины, по которым некоторые символы в HTML-коде должны записываться при помощи специальной системы кодирования.

На этой странице:

• Текстовые ссылки и цитаты (CITE, BLOCKQUOTE)
• Выделения
  • Основные выделения (EM, STRONG)
  • Выделение терминов (DFN)
  • Выделение компьютерного кода (CODE)
  • Основные рекомендации
• Изменение размера шрифта (BIG, SMALL, size)
• Авторское форматирование (PRE)
• Выравнивание
• Специальные символы
  • Кодирование символов
  • Тире и кавычки
  • Неразрывный пробел

Текстовые ссылки и цитаты (CITE, BLOCKQUOTE)

Название книги, газетной статьи, фильма или песни можно выделить при помощи элемента CITE. Большинство браузеров изображает текстовую ссылку курсивом (наклонным шрифтом). Этот же элемент можно использовать для оформления небольших внутристрочных цитат.

Большие цитаты лучше выделять из основного текста при помощи элемента BLOCKQUOTE. Браузер отображает цитату с большим, чем у обычного текста, левым и правым отступами от края страницы.

Выделения

Основные выделения (EM, STRONG)

Часто кроме заголовков, выделяемых с помощью элемента Hn (n — уровень заголовка, цифра от 1 до 6) и располагающихся на отдельных строках, требуется выделить в тексте отдельные слова, чтобы подчеркнуть их значение, сконцентрировать на них внимание пользователя.

Для простого выделения в HTML зафиксирован элемент <EM> (курсив). Для более сильного — элемент <STRONG> (полужирное начертание).

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

В этом тексте выделены все слова, кроме слова липучка. Но именно это слово и привлекает внимание!

Среди всех способов выделений самое употребительное — курсив:

В этом тексте курсивом выделено слово мягкость. Курсивное выделение, действительно, не нагружает чрезмерно глаза пользователя.

Выделение жирностью используют для установки сильных акцентов. “Жирное” слово пользователь прочитает сразу, перед чтением всего текста, так оно бросается в глаза:

В этом тексте жирностью выделено слово магнит. Это слово притягивает внимание пользователя.

Ко всем остальным способам выделения нужно относиться с большой осторожностью: легко пустить петуха. Особенно, когда один фрагмент выделяется несколькими способами сразу.

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

Размер заголовка играет важную роль — он задает иерархическую структуру текста и кодируется при помощи элемента Hn:

Заголовок H1

Заголовок H2

Заголовок H3

Заголовок H4

Заголовок H5

Заголовок H6

Выделения с использованием элементов EM и STRONG — самые распространённые. Чаще используют EM, реже — STRONG.

Ниже приводятся элементы, которые можно использовать для специфических выделений.

Выделение терминов (DFN)

Для выделения терминов предусмотрен специальный элемент DFN.

Браузер, как правило, показывает этот элемент на экране курсивом. Но стиль экранного образа всегда можно переопределить.

Важно, чтобы в коде HTML-программы элементы использовались по их логическому и структурному назначению. Используя стилевые указания CSS, разработчик может задать собственное визуальное представление для любого тега. Основы CSS излагаются в уроке 10.

Выделение компьютерного кода (CODE)

Для выделений фрагментов компьютерного кода внутри обычного текста используется элемент CODE. Браузер выводит элемент на экран моноширинным шрифтом.

Основные рекомендации

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

Старайтесь делать в тексте как можно меньше выделений — текст будет лучше читаться.

Многочисленные выделения

Для выделения используют:

• шрифт;
• размер шрифта;
• цвет (не рекомендуется);
• курсив;
• жирность.

Но не всё сразу! Очень важно не “пережать” выделение, иначе оно будет “бить” по глазам читателя.

Это пример ужасного выделения.

НЕ СЛЕДУЕТ ВЫДЕЛЯТЬ ТЕКСТ ПРОПИСНЫМИ БУКВАМИ. ЧТЕНИЕ ТАКОГО ФРАГМЕНТА ВЕСЬМА ЗАТРУДНИТЕЛЬНО.

Выделять цветом и (или) подчёркиванием не рекомендуется. Ведь так традиционно выделяются ссылки.

Это выделение очень похоже на ссылку.

А это практически неотличимо от ссылки.

Не надо дополнительно выделять гиперссылки.

В них уже два выделения (цвет, подчёркивание). Накладывать третье (размер), четвёртое (жирность), пятое (курсив) совсем ни к чему.

Никогда не используйте для выделений обычного текста элементы Hn — они предназначены только для выделения заголовков.

Ещё несколько примеров плохих выделений:

Программа, которая позволяет смотреть гипертекстовые документы, называется БРАУЗЕРОМ.	Курсив, жирность, заглавные буквы.
Программа, которая позволяет смотреть гипертекстовые документы, называется браузером.	Шрифт, размер, цвет.
Программа, которая позволяет смотреть гипертекстовые документы, называется б р а у з е р о м.	Разрядка, подчёркивание и цвет (похожие на гиперссылку).

Как выделять правильно

Самое лучшее выделение — курсив. Оно мягкое, не утомляет глаза:

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

Если курсивное начертание кажется слишком слабым, используют повышенную жирность:

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

При выделении текстовых фрагментов пользуйтесь следующими правилами:

• кавычки должны быть того же начертания и цвета, что и заключённый в них текст;
• скобки, заключающие выделенный фрагмент, должны иметь начертание и цвет основного текста;
• знаки препинания, следующие за выделенным фрагментом, должны иметь начертание и цвет основного текста.

Решите, что именно вы будете выделять в вашем гипертекстовом приложении (на сайте).

Если вы решили выделять новые термины курсивом, так и делайте до конца приложения. Не переходите время от времени на жирность или цвет.

И главное: используйте для выделений элементы в соответствие с их логическим назначением:

Элемент	Назначение	Вид
CITE	Цитата	Курсив
BLOCKQUOTE	Большая цитата	Блок с отступами
DFN	Термин	Курсив
CODE	Фрагмент кода	Моноширинный шрифт
EM	Выделение	Курсив
STRONG	Сильное выделение	Жирность

Изменение размера шрифта (BIG, SMALL, size)

Выделять фрагменты текста можно изменением размера шрифта. Например, текст объявления “Попал под лошадь” выводится на экран мелким шрифтом, имитирующим нонпарель.

Элемент BIG увеличивает размер шрифта по отношению к текущему, а элемент SMALL — уменьшает его. Элементы могут вкладываться друг в друга, что позволяет увеличивать (или уменьшать) размер в несколько раз.

Возникает вопрос: в каком диапазоне можно изменять размер шрифта? Согласно стандарту, браузер должен поддерживать семь размерных ступеней: –2, –1, 0, +1, +2, +3, +4. (0 обозначает “нормальный” размер, т. е. размер, используемый браузером по умолчанию.)

Размер шрифта можно менять и при помощи атрибута size в теге FONT. Возможные значения атрибута показаны ниже (строки содержат равнозначные варианты):

Авторское форматирование (PRE)

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

Из этого правила, однако, есть исключение. Элемент PRE заставляет браузер выводить текст на экран так, как он записан в HTML-коде, — со всеми пробелами и концами строк. Это удобно использовать при отображении сложных страниц.

Начинающим дизайнерам так нравится “стабильное” поведение текста внутри элемента PRE, что они начинают везде использовать его вместо элемента P. Есть серьёзные причины не поступать так:

• браузер выводит на экран текст из элемента PRE моноширинным шрифтом, т. е. шрифтом с одинаковой шириной знакоместа (каждого символа); такие шрифты читаются хуже пропорциональных, у которых каждый символ занимает столько места, сколько ему на самом деле нужно;
  
  
• текст, записанный внутри элемента PRE, браузер не форматирует по текущей ширине окна, значит, в узких окнах текст не будет виден целиком (для его просмотра браузер отобразит горизонтальную полосу прокрутки), а в широких окнах справа от текста будет пустое пространство.

Хорошее применение для элемента PRE — вывод на экран программных кодов. Структурная лесенка при этом не будет поломана автоматическими переносами браузера и пропорциональным шрифтом.

Выравнивание

Теги <P> и <Hn>, записанные без атрибутов, выравнивают текст по левому краю страницы (режим умолчания). Можно запрограммировать вывод текста с ровным правым краем, выровнять строчки по центру, или выровнять их по ширине.

Код	Комментарий	Пример
<P>	Выравнивает по левому краю
<P align=left>	Выравнивает по левому краю
<P align=right>	Выравнивает по правому краю
<P align=center>	Выравнивает по центру
<P align=justify>	Выравнивает по ширине

Выровнять по центру можно не только отдельный абзац или заголовок, но и целую группу экранных элементов, если поместить их описания внутри блока <CENTER>...</CENTER>.

Приведённые далее две разные программы приводят к одному и тому же результату.

Кроме того, можно использовать конструкцию <DIV>...</DIV>, которая служит для объединения элементов в один элемент-блок. В открывающем теге элемента DIV можно использовать атрибут align с теми же значениями, что и для элемента P или элемента Hn.

Выравнивание — один из китов качественного дизайна!

Абстрактная прямая лежит в основе многих визуальных построений. Если прямую, соединяющую разные элементы на странице, провести не удаётся, то, за редкими исключениями, такой дизайн воспринимается как явная ошибка.

Выравнивание текста по левому краю является стандартным. Несмотря на рваный правый край, читать комфортнее, по сравнению с чтением текста выровненным справа и даже по ширине (в нешироких окнах).

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

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

К сожалению, приятное значение justify (выравнивание по ширине) тоже имеет недостатки на текстах с длинными словами (русский, немецкий язык). Браузер “не умеет” пока переносить слова по слогам, поэтому на экране при выравнивании по ширине часто образуются большие “дыры”:

Специальные символы

Поскольку символы “<” и “>” (угловые скобки) воспринимаются браузером как начало и конец тега, возникает вопрос: а как показать эти символы на экране? Ещё вопрос: можно ли вставить в текст абзаца принудительную группу пробелов (ведь браузер игнорирует лишние пропуски)?

Кодирование символов

Для этих символов, а также для некоторых других предусмотрено специальное кодирование. Код строится из символа “&” (амперсанд), фиксированного (мнемонического) имени и завершающего символа “;” (точка с запятой):

&имя;

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

&#код;

Коды некоторых символов приведены в таблице:

Все буквы, составляющие имя специального символа, должны быть строчными (т. е. маленькими). Использование таких обозначений, как &NBSP и &AMP, не допускается!

Тире и кавычки

При создании гипертекста правильно записывайте тире и кавычки. Нередко можно увидеть, как вместо тире на страницах записывают дефис, а вместо кавычек — знак дюйма.

Дефис используется как знак переноса и для соединения частей сложного слова. Тире же, наоборот, вставляет в текст как бы небольшую паузу. Это разные знаки! Тире должно быть длиннее дефиса раза в три!

Ниже показана разница между кавычками и знаком дюйма:

Слева от тире в середине предложения ставится неразрывный пробел, а справа — обычный.

Код предыдущего абзаца записывается так:

Слева от тире в середине предложения ставится неразрывный 
пробел, а справа — обычный.
      

Неразрывный пробел

Пробел &nbsp; потому и называется неразрывным, что браузеру запрещается использовать его место для разрыва строки при автоматическом форматировании текста.

Вот характерные случаи использования этого символа (рекомендации Дмитрия Кирсанова):

Между инициалом и фамилией:

В многословных сокращениях:

Между знаком номера или параграфа и числом, относящимся к нему:

Между маркером пункта и текстом, следующим за ним:

Между числом и единицей измерения, относящейся к нему:

Перед тире в середине предложения (после тире идет обычный пробел):

Между классами многозначных чисел, начиная с пятизначных:

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