Форматирование текста

1. Управление шрифтом
2. Цвет и фон
3. Разделительные полосы
4. Бегущая строка
5. Списки
• Маркированные списки
• Нумерованные списки
• Словарные списки
• Вложенные списки
6. Специальные зарезервированные символы

Управление шрифтом

Перед тем как заняться управлением шрифтом познакомимся с самим понятием "шрифт" и его атрибутами. Если эта теоретическая часть вам неинтересна - переходите сразу к управлению.

Шрифты

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

Шрифты, семейства и гарнитуры

Слово шрифт (font) сохранилось со времен типографской печати. Сейчас оно часто не очень правильно используется как синоним слова гарнитура (typeface). Для Web-дизайна шрифты группируются по семействам и гарнитурам. Семейство гарнитур (type family) означает специфический набор шрифтов. Как и в других семействах, у каждой группы есть свои отличительные признаки. Семейства гарнитур объединяют гарнитуры со специфическими свойствами. Наиболее распространены следующие семейства гарнитур:

• Serif. Гарнитуры обыкновенные (с засечками).
• Sans-Serif. Рубленые гарнитуры (без засечек).
• Monospaced (Моноширинный). Все символы имеют одинаковую ширину.
• Script (Рукописный). Гарнитуры, напоминающие рукописный текст.
• Decorative (Декоративный). Гарнитуры со специальными декоративными свойствами типа точек, штрихов и других украшений.

Гарнитура (typeface) указывает на шрифт внутри семейства. Для указанных ранее семейств можно назвать такие гарнитуры:

• Serif: Times, Century Schoolbook, Garamond.
• Sans-Serif: Helvetica, Arial, Verdana.
• Моноширинные: Courier.
• Рукописные: Signature, Nuptial.
• Декоративные: Whimsy, Party, Bergell.

Не надоело заниматься теорией? Можно сразу перейти к практике.

Посмотрите, как выглядит текст в HTML-документе, созданный при помощи этих гарнитур

Увы! Фокус не удался! В качестве рукописного шрифта не подошел ни один из имеющихся в моем распоряжении. Та же неудача при попытке использовать декоративные шрифты. Надо разбираться!

Начертания шрифта

Шрифты могут иметь разные начертания (forms). Начертание определяет насыщенность, ширину и наклон шрифта.
Например:
Times New Roman
Helvetica is a Sans-Serif Font
Courier is a Monospaced Font
Westminster is a decorative font

Впрочем, я не уверена, что Westminster относится к семейству декоративных гарнитур. А шрифтов, относящихся к рукописным, и являющих себя таковыми в тексте HTML-документе, я пока не нашла.
Надо разбираться!

Насыщенность шрифта

Некоторые шрифты выглядят темными и толстыми, а другие - легкими и тонкими. Кроме того, есть некое "среднее" сложение, соответствующее средней насыщенности (weight) и виду шрифта. Насыщенность указывается в названии шрифта, а именно:

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

А вот как выглядят шрифты разной насыщенности в HTML-документе:

Для сравнения:

Увы! Почуствовать разницу в изображениях, созданных с помощью шрифтов BauhausLightCTT и BauhausCTT Bold, я сама смогла при помощи броузера MS Internet Explorer 5.0 (Windows 98).
Использование броузера MS Internet Explorer 3.0 (Windows NT 4.0) привело к изображению всех примеров шрифтов одним и тем же шрифтом.

Ширина шрифта

• Condensed (Сжатый). По-английски иногда называется compressed. Сжатое начертание соответствует шрифту, ширина которого меньше, чем у нормального аналога. Ниже показан шрифт Pragmatica в нормальном и сжатом очертаниях. Pragmatica Pragmatica Condensed.
• Expanded (Растянутый). Иногда называется extended. Этот вариант начертания противоположен сжатому. Горизонтальная ширина растянутого шрифта больше нормальной.

Pragmatica
PragmaticaCondC

Наклон шрифта

Наклоны шрифта бывают следующие:

• Italic (Курсив). Одно из наиболее знакомых начертаний, курсив, как и полужирное начертание, служит для выделения текста на странице. Исторически курсив происходит от рукописных текстов.

Arial Italic

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

Увы! Опять неудача с примерами!
Надо разбираться!

Пропорции

Следует помнить, что в подавляющем большинстве случаев, независимо от компьютерной платформы в Web-броузерах по умолчанию установлен шрифт Times New Roman размером 12 пунктов.

Cовет

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

Не надоело заниматься теорией? Можно сразу перейти к практике.

Интерлиньяж, кернинг и трекинг

Интерлиньяжем (leading) называется расстоянии между строками. Интерлиньяж влияет на удобочитаемость текста. Для каждой гарнитуры существует свое оптимальное соотношение между размером интерлиньяжа и размером шрифта.

Cовет

По соображениям удобочитаемости в строке текста должно располагаться не более 8-12 слов.

Кернинг (kerning) - это расстояние между отдельными символами. В отличие от моноширинных шрифтов, где все символы занимают одинаковое место, шрифты с пропорциональной шириной литер требуют подбора оптимального интервала между определенными парами символов. Символы, из которых состоят слова этого предложения, были тщательно разработаны так, чтобы все они хорошо подходили друг к другу.
В хорошем шрифте будет задано точное расстояние для как можно большего количества пар символов. Вся эта информация содержится в так называемой таблице кернинга (kerning table). О качестве шрифта часто судят по числу пар, содержащихся в таблице кернинга.
Трекинг (tracking) позволяет изменять межсимвольные и межсловные интервалы. Как и кернинг, трекинг влияет на удобочитаемость текстового фрагмента.

Cовет

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

Цвет шрифта

Cовет

Как и при выборе размера и гарнитур, при работе с цветом следует проявлять чувство меры - не стоит подавлять посетителей вашего Web-узла страницами с 10 различными цветами. На практике достаточно всего двух цветов - одного для заголовков и примечаний и еще одного для основного текста, - чтобы ненавязчиво раскрасить ваш дизайн.

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

Теги и атрибуты управлением шрифтов

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

Цвет и фон

По умолчанию броузеры заполняют фон сплошным цветом, определеннным настройкой броузера: серым, белым или черным. Имеет смысл принудительно зафиксировать цвет фона или создать фоновое изображение. В противном случае возможен вариант, когда пользователю придется разбирать темно- синий текст на черном фоне.
Фоновый цвет задается в теге <body>.
Цвет фона определяется атрибутом bgcolor тега <body>. Например, тег задающий светло желтый цвет фона, имеет вид:

<body bgcolor="#ffffcc">

Иначе желтый цвет фона можно задать так:

<body bgcolor="yellow">

Можно задать и цвет текста. Для этого используется атрибут тега <body>. Например, зададим желтый цвет фона и синий цвет для текста.

<body bgcolor="yellow" text="blue">

Посмотрим, что получится!

Совет

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

Для указания цвета можно использовать его наименование (разумеется "in a good english way", неважно прописными или строчными буквами), либо его шестнадцатиричный код. В вышеприведенных примерах использовались оба варианта.

Таблица соответствий наименований цветов и их шестнадцатиричных представлений

Цвет	Имя цвета	Шестнадцатиричное представление
Черный	BLACK	#000000
	NAVY	#000089
	SILVER	#C0C0C0
Синий	BLUE	#0000FF
	MAROON	#800000
Пурпурный	PURPLE	#800080
Красный	RED	#FF0000
	FUCHSIA	#FF00FF
Зеленый	GREEN	#008000
	TEAL	#008080
	LIME	#00FF00
	AQUA	#00FFFF
	OLIVE	#808000
Серый	GRAY	#808080
Желтый	YELLOW	#FFFF00
Белый	WHITE	#FFFFFF

Формат шестнадцатиричного кода цвета прост.
Как известно, любой цвет состоит из трех основных составляющих - красной, зеленой и синей (R - red, G - green, B - blue). Каждая составляющая цвета характеризуется яркостью - целым числом (от 0 до 255) в шестнадцатиричной системе счисления.
Самая низкая яркость - 0, а самая высокая - 255.
В шестнадцатиричной системе счисления самой низкой яркости соответствует 00, а самой высокой - FF.
Поэтому, для того, чтобы задать "чистый" красный цвет наивысшей яркости, следует записать код цвета #FF0000.
Черный цвет в шестнадцатиричном коде следует записать как #000000 (все составляющие минимальной яркости.
Светло-серый код можно задать, определив все составляющие одинаковой яркости - #e0e0e0. Если нужен оттенок потемнее, то можно задать код #808080

Совет

Не следует использовать одинаковый или близкий цвет для фона и текста.
Не забывайте, что цвет, задаваемый в тегах <body> и <font>, а также в атрибуте background табличных тегов выглядит по разному на различных платформах и в различных броузерах. Поэтому, вам не стоит полагаться на то, что любой пользователь увидет ваш сайт в той же цветовой гамме, каким видете его вы на экране своего компьютера.

Разделительные полосы

При оформлении текста, чтобы отделить один раздел от другого, нередко используются разделительные полосы. Можно задать ширину, толщину и способ выравнивания разделительной полосы.
Разделительная полоса задается тегом <HR>. Этот тег имеет следующие атрибуты:

• SIZE - толщина в пикселах.
• WIDTH - щирина в пикселах.
• ALIGN - способ выравнивания (по умолчанию принимает значение CENTER). Кроме этого возможны значения LEFT или RIGHT.
• NOSHADE. Этот атрибут для создания сплошной черной полосы без тени.

Рассмотрим пример!

Это обычная полоса, заданная без указания атрибутов.

Это полоса толщиной 5 пиксель зеленого цвета. Способ выравнивания - по умолчанию CENTER.

Это полоса толщиной 1 пиксель темно-синего цвета. Способ выравнивания - LEFT.

Это полоса толщиной 10 пиксель красного цвета. Способ выравнивания - RIGHT.

Вам не кажется, что с выравниванием разделительной полосы пока не получается? Она упорно располагается посередине страницы, игнорируя значения атрибутов выравнивания LEFT и RIGHT.

Это - полоса толщиной 10 и шириной 200 пиксель.

А это - полоса толщиной 5 пиксель, заданная с атрибутом NOSHADE

В HTML-коде вышеприведнный пример записан так:

<p>Это обычная полоса, заданная без указания атрибутов.</p>
<hr>
<p>Это полоса толщиной 5 пиксель зеленого цвета. Способ выравнивания - 
по умолчанию CENTER.</p>
<hr size=5 color="Green">
<p>Это полоса толщиной 1 пиксель темно-синего цвета. Способ выравнивания - 
LEFT.
</p>
<hr color="Navy" size=1 align="left">
<p>Это полоса толщиной 10 пиксель красного цвета. Способ выравнивания - 
RIGHT.
</p>
<hr color="Red" size=10 align="right">
<p>Это - полоса толщиной 10 и шириной  200 пиксель.</p>
<hr size=10 width=200>
<p>А это - полоса толщиной 5 пиксель, заданная с атрибутом NOSHADE</p>
<hr size=5 NOSHADE>

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

Еще один вариант использования разделительной полосы:
Задав равные небольшие значения для высоты и ширины в теге <hr>, получаем квадратик, который можно использовать для разделения частей страницы как маркер при создании списков и даже как элемент гипертекста, по которому надо щелкать мышью. Однако, в этом случае требуются специальные средства позиционирования элементов. Для этого следует воспользоваться таблицами стилей .

Бегущая строка

Эффект прокручивания текста в заданном поле называется "бегущей" строкой.
Для создания "бегущей" строки используется тег <marquee>. Характеристики "бегущей" строки задаются следующими атрибутами:

• width - ширина поля "бегущей" строки в пикселах или процентах от ширины окна.
• height - высота поля "бегущей" строки в пикселах.
• hspace - интервал по горизонтали между текстом строки и краями ее поля в пикселах.
• vspace - интервал по вертикали между текстом строки и краями ее поля в пикселах.
• align - определяет положение текста бегущей строки в поле.
• top - вверху
• bottom - внизу
• middle - посередине
• direction - определяет направление движения. Возможны следующие значения:
• left - движение справа налево
• right - движение слева направо
• behavior - характер движения строки. Возможны следующие значения:
• scroll - текст появляется от одного края и скрывается за другим
• slide - строка вытягивается из одного края поля и останавливается у другого края
• alternate - задает переменное направление движения, от одного края к другому, а затем обратно
• loop - количество повторений текста в "бегущей" строке.
  Возможны следующие значения: количество повторений, либо ключевое слово infinity. Атрибут loop не влияет на поведение "бегущей" строки, если для атрибута behavior заданы значения slide или alternate.
• scrollamount - устанавливает длину в пикселях "прыжка" текста за один такт. При большом значении этого параметра текст дижется рывками, а при малом - замедленно.
• scrolldelay - определяет велечину паузы между тактами перемещения текста в миллисекундах.
• bgcolor - устанавливает цвет поля "бегущей" строки, задаваемый шестнадцатиричным числом или именем.

Совет

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

HTML-код этого сообщения, прокручиваемого на экране бесконечно справо налево имеет следующий вид:

<marquee behavior="scroll" align="top" direction="left" 
bgcolor="Lime" width="100%" height="50" hspace="5" vspace="5" 
scrollamount="5" scrolldelay="100">Не следует увлекаться использованием 
"бегущей" строки.  Это утомляет!</marquee>

Рекомендуется задавать в "бегущей" строке полезную информацию. Например, напомнить вашему читателю, какое нынче столетье на дворе.

Для того, чтобы определить текущие дату и время пришлось создать скрипт.

Списки

HTML поддерживает три вида списков, а именно:

• маркированные списки, иначе - ненумированные списки unordered list.
• нумированные списки - ordered list
• словарные списки, иначе - списки определений - definition list.

the first term

its definition

the second term

its definition

the third term

its definition

Рассмотрим их подробнее.

Маркированные списки

Для этого вида списков используются теги <ul> и <li> . Внимание! Тег <ul> обязательно требует применения парного закрывающего тега </ul> , а тег </li> может быть опущен. В литературе указывается, что с помощью атрибута TYPE можно менять вид маркера. Ниже приводятся примеры использования маркированных списков.

Стандартный тип маркеров, атрибут не указывается (TYPE=DISC)

<ul>
  <li>Первый элемент маркированного списка</li>

  <li>Второй элемент маркированного списка</li>

  <li>Третий элемент маркированного списка</li>
</ul>

• Первый элемент маркированного списка
• Второй элемент маркированного списка
• Третий элемент маркированного списка

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

Тип маркеров - квадратики - атрибут (TYPE="SQUARE")

<ul TYPE=""square">
  <li>Первый элемент маркированного списка</li>

  <li>Второй элемент маркированного списка</li>

  <li>Третий элемент маркированного списка</li>
</ul>

• Первый элемент маркированного списка
• Второй элемент маркированного списка
• Третий элемент маркированного списка

Тип маркеров пустые кружочки - атрибут (TYPE="circle")

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

• Первый элемент маркированного списка
• Второй элемент маркированного списка
• Третий элемент маркированного списка

Нумерованные списки

Для создания нумерованных списков используются теги <ol> и <li>. Как и в случае с маркированными спиисками тег <ol> является обязательным, а тег <li>. часто может быть опущен. Атрибут тега нумерованного списка TYPE позволяет указать вид нумерации, а именно - арабскими цифрами TYPE="1" , римскими цифрами большими TYPE="I" и маленькими TYPE="i" и латинскими прописными TYPE="A" и строчными буквами TYPE="a" .

Ниже приведены примеры использования нумерованных списков.

<ol>
  <li>Первый элемент списка</li>

  <li>Второй элемент списка</li>

  <li>Третий элемент списка</li>
</ol>

1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка

Нумерованные списки - строчными буквами TYPE=a

<ol TYPE="a">
  <li>Первый элемент списка</li>

  <li>Второй элемент списка</li>

  <li>Третий элемент списка</li>
</ol>

1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка

Нумерованные списки -прописными буквами TYPE=A

В данном случае начнем нумерацию с третьей буквы латинского алфавита C, для чего используем атрибут START="3"

<ol TYPE="a" START="3">
  <li>Первый элемент списка</li>

  <li>Второй элемент списка</li>

  <li>Третий элемент списка</li>
</ol>

3. Первый элемент списка
4. Второй элемент списка
5. Третий элемент списка

Нумерованные списки - римскими цифрами (маленькими) TYPE=i

<ol TYPE="i" >
  <li>Первый элемент списка</li>

  <li>Второй элемент списка</li>

  <li>Третий элемент списка</li>
</ol>

1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка

Нумерованные списки - римскими цифрами (большими) TYPE=I

1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка

Нумерованные списки - римскими цифрами (большими), начиная с 7. TYPE=I

7. Первый элемент списка
8. Второй элемент списка
9. Третий элемент списка

Словарные списки

<dl>
  <dt>Тег UL</dt>
  <dd>Создает нумерованный, или маркированный список</dd>

  <dt>Тег OL</dt>
  <dd>Создает нумерованный список</dd>

<dt>Тег LI</dt>
  <dd>Используется как в нумерованном, так и в маркированном списке для назначения элементов списка</dd>

<dt>Тег DL</dt>
  <dd>Создает список словарного типа, или список определений</dd>

<dt>Тег DT</dt>
  <dd>Задает термин списка</dd>
</dl>

Тег UL

Создает нумерованный, или маркированный список

Тег OL

Создает нумерованный список

Тег LI

Используется как в нумерованном, так и в маркированном списке для назначения элементов списка

Тег DL

Создает список словарного типа, или список определений

Тег DT

Задает термин списка

Тег DD

Задает определение термина списка

Вложенные списки

Списки можно вкладывать один в другой. Например,

<ol>
  <li>Первый элемент списка</li>

  <li>
    Второй элемент списка
    <ul>
      <li>Первый вложенный элемент списка</li>
      <li>Второй  вложенный элемент списка</li>
    </ul>
  </li>

  <li>Третий  элемент списка</li>
</ol>

1. Первый элемент списка
2. Второй элемент списка
• Первый вложенный элемент списка
• Второй вложенный элемент списка
3. Третий элемент списка

В списках также можно использовать теги заголовков и абзацев.

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

   &буквенный_эквивалент  

   &#код_ASCII 

Полный список символов, поддержка которых включена в HTML, можно найти на Web-узле Консорциума W3C, обратившись по адресу http://www.w3.org/TR/REC-html40/sgml/entities.html

Cовет