Заголовок

Метки:

текст

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

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

По умолчанию, текст в контейнере <H1> отображается тем же шрифтом, что и основной текст, жирного начертания и размером 24 пункта. Разумеется, с помощью стилей можно изменить любые эти параметры, как показано в примере 1.

Пример 1. Стиль заголовка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Заголовок</title>
  <style type="text/css">
   BODY {
    font-family: Arial, sans-serif; /* Рубленый шрифт основного текста */
    font-size: 12pt; /* Размер основного текста */
   }
   H1 {
    margin-top: 0; /* Обнуляем отступ сверху */
    font-family: Georgia, "Times New Roman", serif; /* Шрифт с засечками */
    font-weight: normal; /* Обычное начертание */
    font-size: 26pt; /* Размер заголовка в пунктах */
   }
  </style>
 </head>
 <body>
  <h1>Письма мастера дзэн мастеру фехтования</h1>
  <p>Слово неведение подразумевает отсутствие просветления, 
  другими словами, заблуждение. Слово пребывать означает место, в
  котором ум привязывается.</p>
  <p>Практика буддизма включает пятьдесят две стадии, и в пределах 
  каждой из них место фиксации ума называется местом пребывания.
  Пребывание означает привязывание ума, а привязывание ума подразумевает, 
  что сознание задерживается на каком-либо объекте.</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1

Рис. 1. Вид заголовка при использовании шрифта с засечками

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

Пример 2. Стиль заголовка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Заголовок</title>
  <style type="text/css">
   BODY {
    font-family: "Times New Roman", serif; /* Шрифт с засечками */
    font-size: 12pt; /* Размер основного  текста */
   }
   H1 {
    margin-top: 0; /*  Обнуляем отступ сверху */
    font-family: Arial, sans-serif; /* Рубленый шрифт */
    font-size: 22pt; /* Размер заголовка в  пунктах */
   }
  </style>
 </head>
 <body>
  <h1>Письма мастера дзэн мастеру фехтования</h1>
  <p>Принимая во внимание, что у бодхисатвы по имени Каннон 
  тысяча рук и только одно тело, если ум этого существа остановится 
  на одной из рук, например, той, которая держит лук, остальные 
  девятьсот девяносто девять окажутся бесполезными. Каждая из рук 
  выполняет свою функцию лишь потому, что ум не задерживается ни 
  в одном месте.</p>
 </body>
</html>

Результат примера показан на рис. 2.

Рис. 2

Рис. 2. Вид заголовка с рубленым шрифтом

В данном примере основной текст набран шрифтом с засечками (Times New Roman), а в качестве гарнитуры заголовка выбран рубленый шрифт (Arial), к которому также по умолчанию добавляется жирное начертание.

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

Термины

Заголовок

Отправить комментарий