Материал: 1896
Рис. 17. Вид Web-страницы в окне браузера
Этот фрагмент кода сообщает браузеру, что отмеченный тегом текст должен быть отображен шрифтом соответственно: Arial, Coronet, WingDings.
Тег<FONT> работает следующим образом: сначала браузер выясняет, какой шрифт задан. Затем он проверяет, установлен ли данный шрифт на персональном компьютере посетителя Web-страницы. Если да, браузер отображает текст, используя этот шрифт. Если по какой - либо причине не удается найти шрифт, браузер просто выводит текст стандартным шрифтом, как если бы тега вообще не было. При желании можно задать список шрифтов, которые браузер будет искать перед тем, как прибегнет к шрифту, заданному по умолчанию.
Например:
<FONT FACE="Arial,Coronet,WingDings">Интернет</FONT>
Приведенный выше тег сначала попытается найти шрифт Arial и отобразить текст этим шрифтом. Если попытка не увенчается успехом, он станет искать шрифт Coronet, затем WingDings. Если ни с одним из них ничего не выйдет, Internet Explorer вернется к используемому по умолчанию шрифту Times New Roman. Можно задать любое количество альтернативных шрифтов.
Используя этот тег для выделения фрагмента текста, помните, что такое выделение увидят только те посетители Web-страницы, на чьих компьютерах установлен соответствующий шрифт.
Управление цветом текста
Цвет текста можно задать двумя способами. 1 способ: с помощью кода.
То есть определенные цвета задаются шестнадцатеричной комбинацией из шести знаков, показывающей компьютеру, как следует смешать красный, синий и зеленый для получения нужного цвета.
Шестнадцатеричные цифры – это цифры от 0 до 9 и буквы от А до F. Перед кодом необходимо установить знак #.
Зададим, например, текст красного цвета:
<FONT COLOR="#FF0000">Текст красного цвета</FONT>
где #FF0000 – код красного цвета.
2 способ: с помощью названия соответствующего цвета.
Тогда, чтобы задать, например желтый цвет, необходимо запись представить следующим образом:
<FONT COLOR="Yellow"> Текст желтого цвета </FONT>
Здесь Yellow – название цвета.
Замечание: если не определять цвет текста, то текст по умолчанию отобразится черным цветом.
Приведем пример:
Текст программы в блокноте будет выглядеть следующим образом:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251">
<TITLE>Internet</TITLE>
</HEAD>
<BODY><HR NOSHADE SIZE="12"><FONT Color="#FF0000"> <BR> Красный текст, заданный тегом FONT</FONT>
<BR> Основной текст (по умолчанию черный) <FONT Color="#008000" Face="Times Roman">
<BR>Темно-зеленый текст, заданный тегом FONT</FONT> <HR COLOR="GREEN" WIDTH="325">
</BODY>
</HTML>
На рис. 18 показано, как будет выглядеть файл в окне браузера.
Рис. 18. Вид Web-страницы в окне браузера
Приведем таблицу цветов (табл. 6).
|
|
|
Таблица 6. Список цветов |
|
№ |
Цвет |
Название |
Код |
|
1 |
Белоснежный |
Snow |
FFFAFA |
|
2 |
Слоновая кость |
Ivory |
FFFFF0 |
|
3 |
Лимонный |
Lemon Chiffon |
FFFACD |
|
4 |
Белый |
White |
FFFFFF |
|
5 |
Черный |
Black |
000000 |
|
6 |
Серый |
Gray |
BEBEBE |
|
7 |
Темно-серый |
Dark Gray |
808080 |
|
8 |
Светло-серый |
Light Gray |
C0C0C0 |
|
9 |
Темно-синий |
Dark Blue |
191970 |
|
10 |
Васильковый |
Cormflower |
6495ED |
|
11 |
Синий |
Blue |
0000FF |
|
12 |
Cветло-синий |
Light Blue |
A6CAF0 |
|
13 |
Бирюзовый |
Turquoise |
AFEEEE |
|
14 |
Аквамарин |
Aquamarine |
7FFFD4 |
|
15 |
Весенний зеленый |
Spring Green |
00FF7F |
|
16 |
Зеленый |
Green |
7CFC00 |
|
17 |
Темно-зеленый |
Dark Green |
008000 |
|
18 |
Лимонно-зеленый |
Lime Green |
32CD32 |
|
19 |
Cветло-желтый |
Light Yellow |
FFFFE0 |
|
|
|
|
|
|
20 |
Желтый |
Yellow |
FFFF00 |
|
21 |
Темно-желтый |
Dark Yellow |
808000 |
|
22 |
Золотой |
Gold |
FFD700 |
|
23 |
Охра |
Sienna |
A0522D |
|
24 |
Бежевый |
Beige |
F5F5DC |
|
25 |
Шоколадный |
Chocolate |
D2691E |
|
26 |
Коричневый |
Brown |
A52A2A |
|
27 |
Оранжевый |
Orange |
FFA500 |
|
28 |
Коралловый |
Coral |
FF7F50 |
|
29 |
Красный |
Red |
FF0000 |
|
30 |
Темно-красный |
Dark Red |
800000 |
|
31 |
Розовый |
Pink |
FFC0CB |
|
32 |
Светло-розовый |
Light Pink |
FFB6C1 |
|
33 |
Фиолетовый |
Violet |
EE82EE |
|
34 |
Фиолетово-синий |
Blue Violet |
8A2BE2 |
|
35 |
Пурпурный |
Purple |
A020F0 |
|
1.2.2. Стилевое оформление текста
Иногда при вводе текста в Web-страницу необходимо слегка выделить определенные его фрагменты, чтобы читатель обратил на них особое внимание, или требуется использование специальных символов при оформлении текста. HTML предлагает ряд возможностей (табл. 7 и 8).
|
|
Таблица 7. Теги дополнительного форматирования |
|||
Тег |
|
|
Комментарий |
|
|
<BIG>…</BIG> |
|
Если принять размер шрифта без тегов за 100 процентов, |
|
||
|
|
то данный тег увеличивает его на 10 процентов |
|
||
<SMALL>…</SMALL> |
Если принять размер шрифта без тегов за 100 процентов, |
|
|||
|
|
то данный тег уменьшает этот размер на 10 процентов |
|
||
<SUB>…</SUB> |
|
Выводит текст в виде нижнего индекса |
|
||
<SUP>…</SUP> |
|
Выводит текст в виде верхнего индекса |
|
||
<S>…</S> |
|
Зачеркнутый текст |
|
|
|
|
|
|
Таблица 8. Специальные символы |
||
Символ |
|
Название |
|
Запись в HTML |
|
< |
Знак "меньше" |
|
< |
|
|
> |
Знак "больше" |
|
> |
|
|
& |
Амперсанд |
|
& |
|
|
" |
Прямая кавычка |
|
" |
|
|
© |
Знак копирайта |
|
© |
|
|
® |
Знак "зарегистрировано" |
|
® |
|
|
§ |
Знак параграфа |
|
§ |
|
|
° |
Знак градуса |
|
° |
|
|
|
Неразделяемый пробел |
|
|
|
|
Замечание: запись в HTML необходимо осуществлять малыми буквами. Если знак параграфа будет записан &DEG вместо °, то на экране браузера вместо символа § отобразится &DEG.
Приведем пример использования верхнего и нижнего индексов:
…
<B>Перевод чисел из двоичной системы счисления в десятичную:</B> 101101<SUB>2</SUB> = 45<SUB>10</SUB>
<BR><B>Единицы измерения информации</B>
<BR>1 килобайт = 1 Кб = 2<SUP>10</SUP> байт = 1024 байта
…
На рис. 19 показано, как будет выглядеть файл в окне браузера.
Рис. 19. Вид Web-страницы в окне браузера
Приведем еще пример использования тегов стилевого оформления, а также тега <FONT>:
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=windows1251"><TITLE>Font</TITLE></HEAD><BODY>
<P ALIGN="CENTER"><B><FONT COLOR="#0066FF" SIZE="4"> <BIG> § 1. Поисковые системы</BIG></FONT></B>
<P ALIGN="JUSTIFY">
<FONT SIZE="4"> http://russia.agama.com/Aport/ </FONT><FONT SIZE="3"> - < Поисковая система Апорт. Хорошие подсказки по поиску. Возможность перевода запросов на английский и наоборот. >
</FONT><BR>
<FONT SIZE="4">http://www/rambler.ru/ </FONT><FONT SIZE="3"> - < Прекрасный и наиболее полный индекс российского Интернета с возможностью поиска во всех кодировках русского языка. > </FONT>
<BR> <FONT SIZE="4">http://yandex.ru/ </FONT>
<FONT SIZE="3"> - < Русскоязычная поисковая система Яndex. > </FONT><BR><FONT SIZE="4">http://www.altavista.telia.com/ </FONT><FONT SIZE="3">- < Поисковая система Alta Vista с
возможностью поиска на русском языке. ></FONT></B> </BODY></HTML>
На рис. 20 показано, как будет выглядеть файл в окне браузера.
Рис. 20. Вид Web-страницы в окне браузера