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

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

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

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

Шрифты

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

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

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

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


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

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

Serif
Sans-Serif
Моноширинные
Рукописные
Декоративные

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


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

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


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


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

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

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

Times Roman: Simplistic & Unadorned.
Times New Roman Bold
BauhausLightCTT

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

BauhausCTT Bold

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


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

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

Pragmatica
PragmaticaCondC

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

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

Arial Italic


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


Пропорции

При работе со шрифтами следует также принимать во внимание их размер пропорции по отношению друг к другу и к другим элементам страницы. Для измерения шрифтов можно применять разные единицы, включая пункты (points) и пиксели (pixels). Пункты используются в полиграфии, а пиксели позволяют интерпретировать размер в пунктах при работе на компьютере. Если вы - Web-дизайнер, используйте пиксели. Большинство Web-броузеров отображают стандартные текстовые фрагменты шрифтом Times New Roman, 12 пунктов. Шрифт меньшего размера используется для сносок и вспомогательной информации, а шрифт большего размера - в заголовках. Размер помогает обозначить роль, которую шрифт играет на странице, - большой шрифт используется для заголовков, средний - для основного текста, а маленький - для примечаний и не очень важной информации.

Следует помнить, что в подавляющем большинстве случаев, независимо от компьютерной платформы в 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 BLACK
  NAVY #000089 NAVY
  SILVER #C0C0C0 SILVER
Синий BLUE #0000FF blue
  MAROON #800000 MAROON
Пурпурный PURPLE #800080 PURPLE
Красный RED #FF0000 RED
  FUCHSIA #FF00FF FUCHSIA
Зеленый GREEN #008000 GREEN
  TEAL #008080 TEAL
  LIME #00FF00 LIME
  AQUA #00FFFF AQUA
  OLIVE #808000 OLIVE
Серый GRAY #808080 GRAY
Желтый YELLOW #FFFF00 YELLOW
Белый WHITE #FFFFFF WHITE

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


Совет

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


 
Возврат в начало страницы    Возврат на главную страницу сайта

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

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

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

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


Это полоса толщиной 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>. Характеристики "бегущей" строки задаются следующими атрибутами:


Совет

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

Не следует увлекаться использованием "бегущей" строки. Это утомляет!

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

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

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

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

 
Возврат в начало страницы    Возврат на главную страницу сайта

Списки

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

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" .

Нумерация арабским цифрами назначается по умолчанию. TYPE=1

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

<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>
  1. Первый элемент списка
  2. Второй элемент списка
  3. Третий элемент списка

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

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

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

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

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

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

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

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

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

Словарные списки, или списки определений, позволяют включить определения для каждого из элементов списка. Такие списки создаются с помощью тега <dl>, но форматирование списка производится двумя другими тегами. Это тег термина - <dt>, и тег определения - <dd>. Закрывающие теги </dt> и </dd> не являются строго обязательными, но тег </dl> должен присутствовать в конце конструкции словарного списка.
<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. Третий элемент списка

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

Возврат в начало страницы

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

Специальные зарезервированные символы HTML-программы символы, которые воспринимаются броузером как служебные. Например, символы <,>,"& используются в языке HTML для служебных целях. То есть нельзя использовать символы < и > для обозначения знаков "меньше" и "больше". Кроме того, все символы, которые можно набрать при нажатых клавишах управления (за исключением клавиши <Shift>), могут не воспроизводиться броузером при просмотре документа, поскольку эти символы зарезервированы.
Где же выход? Как вставить в текст зарезервированные символы?
Выход есть - вместо зарезервированных символов вставлять в документ их буквенные символы или коды ASCII. В качестве буквенного эквивалента используются соответствующие сокращения.
Формат буквенного эквивалента:
   &буквенный_эквивалент  
Формат цифрового эквивалента:
   &#код_ASCII 
Например, символ < можно вставить в документ как символ & и код#60.
Итак, эквиваленты должны быть заключены между символом амперсанд и точкой с запятой.
При этом перед цифровым эквивалентом надо ставить символ #.
Понятно?
Ниже приводится таблица наиболее популярных зарезервированнных символов.

Симв.Код Эквивалент

"    34 quote
&    38 amp
<    60 lt
>    62 gt
    160 nbsp
¢   162 cent
£   163 pound
§   167 sect
©   169 copy
®   174 reg
±   177 plusmn
µ   181 micro
¶   182 para
¼   188 frac14
½   188 frac12
¾   190 frac34
Æ   198 AElig
Ø   216 Oslash
æ   230 aelig
÷   247 divide
™  8482 Trademark
—  8212 em dash

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


Cовет

Броузер Netscape Navigator 4.0 "не понимает" формат буквенного эквивалента. Поэтому, рекомендуется использовать формат цифрового эквивалента.
Но запоминать и набирать все эти коды "ASCII"...
 
Возврат в начало страницы    Возврат на главную страницу сайта  
 
Хостинг от uCoz