Самоучитель по HTML

Справочник HTML

Оглавление:

  1. С чего начать?
  2. тег <BODY>
  3. Комментарии
  4. Просмотр результата
  5. Создание абзацев
  6. Создание заголовков
  7. Выравнивание текста
  8. Тег <PRE>
  9. Форматирование текста
  10. Атрибуты шрифта
  11. Специальные символы и таблица UNICODE
  12. Тег <HR>
  13. Гиперссылки
  14. Ссылки на объект в текущем документе
  15. Вставка графических изображений
  16. Бегущая строка
  17. Создание списков
  18. Создание таблиц
  19. Фреймы
  20. Встроенный фрейм
  21. Создание форм

CSS

  1. Каскадные таблицы стилей
  2. Способы определения стилей
  3. Определение стилей через классы
  4. Определение стилей через индентификаторы
  5. Позиционирование элементов Web-страницы
  6. Шрифты
  7. Свойства текста
  8. Свойства блоков текста
  9. Цветовое оформление
  10. Создание полей в документе
  11. Абзацный отступ
  1. Корректное отображение Web-страницы
  2. Атрибуты тега <META>

Атрибуты шрифта

Шрифт тоже имеет атрибуты, с помощью которых можно менять его различные значения, например, размер шрифта. Изначально базовый размер шрифта равен 3. Но он легко меняется с помощью контейнера тегов <FONT>...</FONT> с атрибутом size="...". Значения атрибута size="..." могут быть заданы от "1" до "7". Данные размеры шрифта будут считаться абсолютными, то есть какой размер укажите, такой и будет.

Давайте рассмотрим пример (рис. 10): 


      <HTML>
         <HEAD>
            <TITLE>Размер шрифта</TITLE>
         </HEAD>
         <BODY>
            <FONT size="1">
               Привет!
            <br><FONT size="2">
               Привет!
            <br><FONT size="3">
               Привет!
            <br><FONT size="4">
               Привет!
            <br><FONT size="5">
               Привет!
            <br><FONT size="6">
               Привет!
            <br><FONT size="7">
               Привет!
         </BODY>
      </HTML>

размер шрифта, FONT, size
рис. 10. Абсолютные изменения размеров шрифта.


Также в теге <FONT> можно задать относительный размер шрифта, то есть теперь мы будем менять его значения уже отталкиваясь от базового размера. Для этого в атрибуте size="..." надо вписать значение от - 7 до +7. Например, мы пишем "- 2". Так как базовый размер равен трём, то 3-2=1. Значит размер шрифта станет равен единице. Если же мы пишем "+2", то базовый размер будет уже равен пяти (рис. 11).


      <HTML>
         <HEAD>
            <TITLE>Размер шрифта</TITLE>
         </HEAD>
         <BODY>
            <FONT size="-2">
               Привет!
            <br><FONT size="-1">
               Привет!
            <br><FONT size="+0">
               Привет!
            <br><FONT size="+1">
               Привет!
            <br><FONT size="+2">
               Привет!
            <br><FONT size="+3">
               Привет!
            <br><FONT size="+4">
               Привет!
         </BODY>
      </HTML>

Пример изменения размера шрифта
рис. 11. Относительные изменения размеров шрифта.


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

Если вы хотите устанавливать размер шрифта не относительно базового размера равного трём, а относительно другого базового размера, например, равного пяти, то вам надо сначала в атрибуте size="..." тега <BASEFONT> установить базовый размер 5, а затем с помощью тега<FONT> уже устанавливать относительный размер. Здесь также атрибут size="..." может принимать значения только от "-1" до "+7" (рис. 12).


         <HTML>
            <HEAD>
               <TITLE>Размер шрифта</TITLE>
            </HEAD>
            <BODY>
               Сейчас размер шрифта равен 3.
               <br><BASEFONT size="5">
                  Теперь он равен 5.
               <br><FONT size="-4">
                  Сейчас мы уменьшели его до 1.
               <br><FONT size="-3">
                  Теперь увеличили до 2.
               <br><FONT size="-2">
                  Теперь до 3.
               <br><FONT size="-1">
                  Сейчас размер шрифта равен 4.
               <br><FONT size="+0">
                  Теперь снова 5.
               <br><FONT size="+1">
                  Сейчас он равен 6.
               <br><FONT size="+2">
                  А теперь 7.
            </BODY>
         </HTML>

изменение шрифта, BASEFONT, size
рис. 12. Изменение базового размера.


У тега <BASEFONT> также есть другие атрибуты:

  • face="..." - указывает стиль шрифта, или несколько возможных стилей шрифта через запятую, для отображения данного текста. Следует учитывать, что если данный шрифт на компьютере пользователя будет отсутствовать, то текст получится обыкновенным. Поэтому рекомендуется устанавливать через запятую несколько близких по написанию шрифтов;
  • color="..." - задаёт цвет шрифта.

Атрибуты color="..." и face="..." также применимы к тегу <FONT>.

Выбор цвета осуществляется при помощи задания имени цвета (BLUE, NAVY, WHITE, TEAL, AQVA, GRAY, PURPLE, OLIVE, YELLOW, FUCHSIA, BLACK, RED, MAROON, GREEN, SILVER, LIME) или с помощью его кода по схеме RGB (Red, Green, Blue). То есть в атрибуте color="..." просто указываем имя нужного нам цвета (например color="red"), и он высветится на экране.

Номер цвета из таблицы RGB задаётся при помощи трёх двузначных шестнадцатеричных чисел. Каждое число принадлежит интервалу от 00 до FF. Например, номер чёрного цвета будет #000000, так как здесь полностью отсутствуют цвета. Номер же белого будет #FFFFFF, так как все цвета наоборот полностью насыщенны. Номер красного цвета равен #FF0000, где красный цвет насыщен полностью, остальные же цвета (Green и Blue) равны нулю. Соответственно цвет Green равен #00FF00, а цвет Blue будет #0000FF. То есть, если мы укажем значение color="#FF0000", то на экране тоже, как и в случае color="red", высветится красный цвет.

Таблица цветов, RGB, color
Таблица 1. Основные цвета, их имена и коды.

Итак, если мы хотим изменить цвет текста, то заключаем его в контейнер <FONT>...</FONT> с атрибутом color="..." и указываем в атрибуте нужный нам цвет. Например: <FONT color="green">Здесь пишем текст</FONT>. В данном примере наш текст будет иметь зелёный цвет.


Предыдущая страница         Следующая страница

Вы можете свободно использовать фрагменты сайта, с условием размещения ссылки на наш сайт:
<a href="http://tri222.narod.ru"><b>Самоучитель по созданию Web-страниц.</b></a>

Copyright © 2008 "tri222.narod.ru"
Вопросы и свои предложения вы можете отправлять на tri222@yandex.ru

Хостинг от uCoz