Форматирование элементов текста | Основы создания web сайтов

Статья

Структура, стиль и внешний вид текстового документа

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

Структуру текста лучше всего продумать заранее. Можно рекомендовать следующий способ оформления:

Запишите заголовок для всего документа. Он должен быть самым крупным (тег <H1>) и выровнен по центру в строке.
Разделите документ на главные части (главы). Заголовки глав выравниваются по левому краю и делаются немного меньше заголовка документа (тег <H2>).
При необходимости главы разделите на параграфы (заголовки <H3>), параграфы на пункты (заголовки <H4>). Все заголовки документа, кроме его названия, выравниваются по левому краю.
Текстовый фрагмент, обозначенный заголовком, разбейте на абзацы (тег <P>). Абзацы должны быть небольшими и содержать законченную мысль.
В каждом абзаце используйте одни и те же приемы оформления:
- нормальный размер шрифта;
- полужирный шрифт для выделений слов или коротких фраз;
- курсив для выделения текстовых (обычных) ссылок или цитирования (название книги, газеты, статьи...)
- смещение большой цитаты вправо от левой границы текста.
Решите вопрос о цветовой гамме своего документа. Выберите цвет фона и цвет основного текста. Подберите цвета для некоторых специальных выделений и используйте их одинаково на протяжении всего документа. Самые комфортные цвета: белый — для фона, черный — для текста и красный для специальных выделений.

Программирование вывода текста

Перейдем от общих рекомендаций к вопросу о том, как их можно выполнить средствами HTML.

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

Порядок следования атрибутов в теге не важен.

Атрибут действует от открывающего тега, в котором он задан, до закрывающего или только внутри тега, если тег не имеет парного.

Например, тег, рисующий горизонтальную линию, может содержать атрибут size, изменяющий толщину линии. Если этот атрибут не задан, горизонтальные линии имеют в браузере толщину в два (или три, зависит от браузера) пиксела.

Задавая разные параметры атрибуту size, можно получить целую коллекцию линий, разных по толщине:

команда	вид линии на экране
`<HR size=1>`
`<HR>`
`<HR size=5>`
`<HR size=10>`

Замечание

По умолчанию браузер рисует линии “объемными”. Можно вывести линии “плоскими”, если использовать атрибут noshade:

команда	вид линии на экране
`<HR size=1 noshade>`
`<HR noshade>`
`<HR size=5 noshade>`
`<HR size=10 noshade>`

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

<HTML>
 <HEAD>
  <META http-equiv="Content-Type"
        content="text/html; charset=windows-1251">
  <TITLE>Вид 2</TITLE>
 </HEAD>

 <BODY bgcolor=silver text=black>
  <H1 align=center>Пример оформления текста</H1>
  <HR>
  <H2>Сборник газетных вырезок</H2>
  <P>
Коллекцию открывает заметка из газеты
<CITE>&#147;Станок&#148;</CITE>.
  <BLOCKQUOTE>
    <P>
Действительно, в отделе <CITE>&#147;Что случилось
за день&#148;</CITE> нонпарелью было напечатано:
    <FONT color=maroon>
      <BLOCKQUOTE>
        <H3 align=center>Попал под лошадь</H3>
        <SMALL>
          <P>
Вчера на площади Свердлова попал под лошадь
извозчика &#8470;&nbsp;8974 гр.&nbsp;О.&nbsp;Бендер.
Пострадавший отделался легким испугом.
        </SMALL>
      </BLOCKQUOTE>
    </FONT>
    <P>
&#151; Это извозчик отделался легким испугом,
а не я,&nbsp;&#151; ворчливо заметил О.&nbsp;Бендер.
    <P align=right>
<CITE>&#147;Двенадцать стульев&#148;</CITE><BR>
Илья Ильф, Евгений Петров
  </BLOCKQUOTE>
 </BODY>
</HTML>

Начало программы.
Начало заголовка.



Конец заголовка.

Начало тела.





Выделено название.
Начало большой цитаты.

Выделено название
  отдела.
Изменен цвет шрифта.
Начало подцитаты.

Уменьшен размер шрифта
  (для имитации
   нонпарели).

Восстановлен
  размер шрифта.
Конец подцитаты.
Восстановлен
  цвет шрифта.





Конец большой цитаты.
Конец тела программы.
Конец программы.

Цвет фона и цвет шрифта

В опытах урока 1 мы никак не задавали, ни цвет фона документа, ни цвет шрифта, которым отображался текст. Тем не менее, и фон, и шрифт не были бесцветными при просмотре документа в браузере. Вероятно, вы видели чёрный шрифт на белом фоне. Но это совсем не обязательно. Все зависит от настроек вашего браузера.

Когда в программе на HTML цвета явно не заданы, браузер использует свои установки по умолчанию. В моем Internet Explorer в разделе “Цвета” включена опция “Использовать стандартные цвета Windows”, и я вижу чёрные буквы на белом фоне. Можно выключить эту опцию и установить свои цвета для работы “по умолчанию”.

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

Цвета для фона и шрифта на всем протяжении документа можно задать при помощи атрибутов bgcolor и text в теге <BODY>. В рассмотренном выше примере записано:

<HTML>
 <HEAD>
 ...
 </HEAD>

 <BODY bgcolor=silver text=black>
 ...
 </BODY>
</HTML>

Это означает, что в документе заданы чёрные символы (black) на серебристом фоне (silver). Ключевые слова для других цветов приводится в таблице.

Как отмечалось выше, атрибуты цветов, заданные в теге <BODY> действуют до парного тега </BODY>, то есть, до конца документа. С цветом фона ничего уже не поделаешь — он может задаваться только один раз, а цвет шрифта можно менять внутри документа многократно при помощи команды <FONT>...</FONT>. Установка цвета в этой команде выполняется при помощи атрибута color так, как это сделано в примере:

<HTML>
 <HEAD>
  ...
 </HEAD>

 <BODY bgcolor=silver text=black>
  ...
    <FONT color=maroon>
     ...
    </FONT>
  ...
 </BODY>
</HTML>




Заданы цвета для всего документа

Задан новый цвет шрифта (коричневый)

Восстановлен цвет шрифта (чёрный)

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

Используя команду <FONT>...</FONT>, можно не только переопределить цвет шрифта, но также его размер и внешний вид. Однако, использование соответствующих атрибутов не рекомендуется. Установку шрифтового типа поддерживают не все браузеры. Кроме того, указанный шрифт может не оказаться на компьютере у пользователя. Для изменения размеров шрифта есть другие команды, более подходящие для сохранения единого стиля оформления документа (<BIG>...</BIG> для укрупнения и <SMALL>...</SMALL> для уменьшения).

Оформление отдельных элементов текста

Текстовые ссылки и цитаты

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

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

Посмотрите, как выглядят ссылки и цитаты в нашем примере.

Усиление текста

Часто, кроме заголовков, которые выделяются командой <Hn>...</Hn> (n — уровень заголовка, цифра от 1 до 6) и располагаются на отдельных строках, требуется выделить в тексте отдельные слова, чтобы подчеркнуть их значение, сконцентрировать на них внимание пользователя. Например, всюду в этом тексте выделены полужирным шрифтом имена тегов. Для такого выделения элементов текста предназначена команда <STRONG>...</STRONG>.

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

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

Изменение размера шрифта

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

Команда <BIG>...</BIG> увеличивает размер шрифта по отношению к текущему, а команда <SMALL>...</SMALL> — уменьшает его. Команды могут быть вложенными, что позволяет увеличивать (или уменьшать) размер в несколько раз. Посмотрите этот документ. Текст программы можно увидеть здесь.

Замечание

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

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

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

Выравнивание абзацев и фрагментов

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

`<P>`	— выравнивает абзац по левому краю
`<P align=left>`	— выравнивает абзац по левому краю
`<P align=right>`	— выравнивает абзац по правому краю
`<P align=center>`	— выравнивает абзац по центру

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

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

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

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

&имя;

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

&#код;

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

меньше	<	<	<
больше	>	>	>
амперсант	&	&	&
неразрывный пробел
копирайт	©	©	©
тире	—
левая елочка	«	«	«
правая елочка	»	»	»
левая лапка	“
правая лапка	”
номер	№		№

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

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

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

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

Это тире— ! Дефис гораздо короче: посмотри-ка!

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

>Назад<