HTML шрифты - Мои тараканы

Здравствуйте друзья!
В этом посте речь пойдёт о тэгах, предназначенных для шрифтов.

Начнем, пожалуй, с цвета.

Font color

Как известно любой цвет — это смешанные в определенной пропорции три основных цвета — красный, зелёный и синий. В HTML цвет задаётся шестнадцатеричным кодом. В шестнадцатеричной системе исчислений используется не десять, а 16 цифр. Первые 10 это цифры от 0 до 9, остальные 6 — обозначаются символами A, B, C, D, E и F. Цвет состоит из трёх пар цифр. Первая пара — обозначает красный цвет, вторая — зелёный, третья — синий. Чем выше значение конкретной пары, тем заметней будет цвет в конкретном оттенке.

#FF0000 — red — красный.
#00FF00 — green — зелёный.
#0000FF — blue — синий.
#000000 — black — чёрный.
#ffffff — white — белый.

Можно также использовать имена цветов на английском red, green, black, yellov, indigo, orange и так далее.
Но на самом деле цвета не всегда соответствуют своим именам. Например, darkgrey (тёмно-серый) светлее, чем grey (тёмно-серый). Поэтому лучше использовать шестнадцатеричный код.

Для изменения цвета фона используется атрибут bgcolor (цвет фона) тэга <body></body>.
Например:

<body bgcolor="#00FF00">В этом примере цвет фона страницы будет зелёный</body>

Для придания нужного цвета тексту используется тэг  (шрифт) и его атрибут color (цвет). Пример:
Текст, заключённый в этот тег будет зелёный или жёлтый.
Можно использовать тэг  (интервал) с атрибутом стиля style:
Текст, заключённый в этот тег тоже будет зелёный

Тэг  кроме color имеет ещё два атрибута — size (размер) и face (гарнитура, начертание).

Для отображения текста используется семь предопределённых размеров. Чаще всего обычный текст отображается третьим размером:
Текст, заключённый в этот тег будет на один порядок крупнее обычного..

Font face

Атрибут fece — указывает браузеру, каким шрифтом отображать текст. В HTML используются шрифты трёх видов: serif — с засечечками на кончиках букв, sans-serif — без засечек и monospaced — моноширинные — все буквы имеют фиксированную ширину.
Шрифты с засечками, такие как «Times Nev Roman» и «Gorgia» хорошо подойдут для чтения больших фрагментов текста. Для заголовков чаше используются шрифты без засечек, например «Arial». А моноширинные, к примеру, «Courier Nev», пригодятся например, для отображения кода.
То, что Вы укажете на страничке шрифт «Times Nev Roman», это не значит, что у посетителя вашего сайта текст отобразится указанным шрифтом. Дело в том на компьютере посетителя такого шрифта может не оказаться, и браузер использует шрифт, который стоит по умолчанию. Чтобы содержимое отображалось у всех посетителей одинаково, в значении атрибута face записывается список предпочтительных шрифтов:

или так:
.
Сначала браузер попытается найти первый шрифт, если его нет на компьютере — второй, если нету второго, используется стандартный шрифт указанной категории, который есть у пользователя.
Самые распостранённые шрифты для Windows: без засечек — Arial, Verdana, Tahoma, с засечками — Times New Roman, Georgia,

Давайте, используя полученные знания, создадим ещё одну страничку для нашего сайта. Создайте новый html-файл и вставьте в него следующий код:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Мой первый сайт. Страничка №2</title>
</head>
<body bgcolor="#330099" >
    <font color="#ffffff" >
        <h1 align="center">Привет мир</h1>
        <p>
            <pre.>                                                   Это вторая страничка моего первого сайта
                          Текст на странице отображается белым,
                                              а сама страница цвета индиго.
                <font size="4">А в этой строке текст, на размер крупнее остального.</font>
        </pre>
            </p>
        <hr/>
    </font>
</body>
</html>

Вы, наверное, обратили внимание на то, как выровнен текст.
Браузеры не воспринимают несколько пробелов подряд (сколько пробелов не ставь, браузер отобразит в тексте всего один).
Вот для того чтобы «двигать» слова как Вам захочется можно использовать тег <pre></pre>.

Пожалуй на сегодня хватит.

В следующих уроках продолжим изучать HTML тэги.

Font color

Font size

Font face