Теги HTML для работы со шрифтами: font color, font face, font size

Font color, font face, font size

Доброго времени суток, уважаемые читатели блога Moi-tarakany.ru !

В прошлых статьях, мы с вами начали изучать 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>

Для придания нужного цвета тексту используется тэг <font></font> (шрифт) и его атрибут color (цвет). Пример:
<font color="#00ff00">Текст, заключённый в этот тег будет зелёный</font> или <font color="#ffff00">жёлтый</font>.
Можно использовать тэг <span></span> (интервал) с атрибутом стиля style:
<span style="color: #00ff00;">Текст, заключённый в этот тег тоже будет зелёный</span>

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

Font size

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

Font face

Атрибут fece — указывает браузеру, каким шрифтом отображать текст. В HTML используются шрифты трёх видов: serif — с засечечками на кончиках букв, sans-serif — без засечек и monospaced — моноширинные — все буквы имеют фиксированную ширину.

Шрифты с засечками, такие как «Times Nev Roman» и «Gorgia» хорошо подойдут для чтения больших фрагментов текста.

Для заголовков чаше используются шрифты без засечек, например «Arial».

А моноширинные, к примеру, «Courier Nev», пригодятся например, для отображения кода.

То, что вы укажете на страничке шрифт «Times Nev Roman», это не значит, что у посетителя вашего сайта текст обязательно отобразится указанным шрифтом. Дело в том на компьютере посетителя такого шрифта может не оказаться, и браузер использует шрифт, который стоит по умолчанию.

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

<font face="Times Nev Roman,Times,serif">

или так:

<font face="Verdana,Geneva,sans-serif">.

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

Самые распостранённые шрифты для 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>

Сохраним файл как 2.html

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

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

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