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 тэги.


Похожие записи:

Понравилась статья? Расскажи друзьям, автор очень старался:
5 комментариев на:
“Теги HTML для работы со шрифтами: font color, font face, font size”
  • Виталий говорит:

    Все эти теги давным давно не используют, и слава богу скажу я вам, давно пора было так скажем: «отделить мух от котлет».

  • Татьяна говорит:

    Интересная информация, но пока обхожусь без этого.


  • Хочу сказать, что нужно быть вообще очень осторожным в выделениями цветом. Я увлекалась и цветом, и жирностью, что стало одной из причин наложения фильтра АГС. Слава Богу, подсказали люди, «отмыла» свой сайт от красок, теперь все гуд 🙂

  • Дмирий говорит:

    Пробовал в скайпе — не работают почемуто эти тэги

    • Пётр говорит:

      Скайп не принимает никаких тегов. для него это просто текст.

Добавить комментарий

Перед комментированием ознакомтесь с правилами комментирования
  • Все комментарии проходят ручнуюю модерацию, поэтому большая прозьба - НЕ СПАМИТЬ!!!
  • Подписывайтесь нормальными именами, а не "регистрация в Москве" или "Кондиционеры не дорого".
  • Ссылки на коммерческие сайты будут удалятся.
  • Оставляйте ссылку на главную страницу.
  • Оставляйте комментарии длинной не менее 100 символов. Исключения - диалоги и ответы на заданные вопросы.
Внимание! Один раз в неделю блог прходит проверку на наличие битых ссылок. Если ваш сайт в это время не был доступен, ссылка на него будет удалена!
За собой оставляю право редактировать и удалять комментарии, даже если они удовлетворяют вышепреведённый свод правил.