Цветовое оформление HTML-документа.
Использование атрибутов "color" и "bgcolor" в тегах.
Содержание
Одной из важных стадий создания Веб-проекта является цветовое решение
HTML-документов.
Язык HTML позволяет определить цвет следующих элементов: фона документа, текста
и его фрагментов, гиперссылок и их разновидностей, ячеек и обрамления таблиц.
Стандартные названия цветов
Этот термин подразумевает "стандартные" названия, которые поддерживаются
браузерами. Netscape Communicator распознает более 100 стандартных
наименований, Internet Explorer намного больше. Следующий список содержит
большинство цветов, поддерживаемых обоими браузерами:
| AQUA |
(бирюзовый) |
| BLACK
|
(черный) |
| BLUE |
(синий) |
| GRAY |
(серый) |
| GREEN |
(зеленый) |
| LIME |
(ярко-зеленый) |
| MAROON |
(темно-красный) |
| WHITE |
(белый) |
| NAVY |
(темно-синий) |
| OLIVE |
(коричнево-зеленый) |
| PURPLE |
(фиолетовый) |
| RED |
(красный) |
| SILVER |
(светло-серый) |
| TEAL |
(сине-зеленый) |
| YELLOW |
(желтый) |
Стандартное название цвета пишется как строчными, так и ПРОПИСНЫМИ буквами и
обязательно в кавычках.
Шестнадцатиричный код цвета
Кроме стандартного названия, цвет можно (и предпочтительнее) задать
шестнадцатиричным числом, с помощью которого определяется
соотношение красной, зеленой и синей составляющих цвета (RGB) и интенсивность
каждой из них.
Чтобы отобразить, к примеру, малиновый цвет (Fuchsia), используется код
#FFOOFF, где первые две цифры - это красная составляющая (полностью включена), вторая пара - зеленая
(исключена) и последняя - синяя, так же, как и красная, используется на максимуме.
Будем надеяться, это не требует дополнительных пояснений. Для упрощения выбора цвета
во многие HTML-редакторы встроены инструменты визуального подбора кода по цветовому спектру.
Таблица часто используемых цветов
и их шестнадцатиричные
значения:
| ИМЯ |
КОД |
| Black |
#000000 |
| Silver |
#C0C0C0 |
| Gray |
#808080 |
| White |
#FFFFFF |
| Maroon |
#800000 |
| Red |
#FF0000 |
| Purple |
#800080 |
| Fuchsia |
#FF00FF |
| Green |
#008000 |
| Lime |
#00FF00 |
| Olive |
#808000 |
| Yellow |
#FFFF00 |
| Navy |
#000080 |
| Blue |
#0000FF |
| Teal |
#008080 |
| Aqua |
#00FFFF |
Теперь, когда мы разобрались в способах отображения цвета в HTML, займемся их
практическим применением.
COLOR
Окраска всего текста или его фрагментов.
Для работы с параметрами шрифта, как говорилось в предыдущем уроке, в HTML используется тег <FONT>.
Для управления цветом шрифта этому тегу присваивается атрибут "color".
Например, сделаем:
1. Текст "Здесь будут мои личные страницы!" красным.
2. Текст "- рассказ обо мне и о моих увлечениях; - мои фотографии." синим.
3. Текст "С одной из моих страниц можно будет отправить мне электронное письмо." зеленым.
4. Текст "На них Вы сможете найти:" вообще оставим без тега <FONT> и его атрибутов.
Команда управления красным цветом: <font color="Red"> (Как видите, используем стандартное название цвета).
Синим - <font color="Blue"> (То же стандартное название, но можно использовать и шестандцатиричный код #0000ff).
И команда для зеленого цвета - <font color="Green">
В первом случае (красный текст) HTML-код будет такой:
<font color="Red">Здесь будут мои личные страницы!</font>
Часть второго текста (синего) мы раскрасим, используя стандартное название цвета:
<font color="Blue">- рассказ обо мне и о моих увлечениях;</font>
А для окраса второй части "- мои фотографии." применим шестанадцатиричный код:
<font color=#0000ff>- мои фотографии.</font>
Результат будет одинаков в обоих случаях.
И, наконец, чтобы третий текст отображался зеленым, создадим код:
<font color="Green">С одной из моих страниц можно будет отправить мне электронное письмо.</font>
Вот мы и добрались до последней фразы "На них Вы сможете найти:", для окраски которой мы не использовали теги и атрибуты.
В этом случае название шрифта, его размер и окраска будут такими, какие выставлены "по умолчанию" в настройках браузера у вас
или любого другого посетителя вашей страницы.
Все остальные атрибуты шрифта (название, размер и начертание) также могут быть включены в тег <FONT>.
Пример:
<FONT color=red face=arial size=7>Здесь будут мои личные страницы!</FONT>
BGCOLOR
Окраска фона
Фон документа - неотъемлемый элемент оформления. Ошибка в его подборе сведет к нулю
все ваши труды по общему дизайну Веб-сайта.
Цвет фона в HTML определяется в дескрипторе <body>.
Даже, если вы используете фоновую графику, то BGCOLOR обязательно должен быть задан,
чтобы, до окончания загрузки графики,
посетитель смог оценить основное цветовое решение вашего Веб-сайта.
Синтаксис команды выглядит достаточно просто:
<body bgcolor=цвет>
Вместо слова "цвет", как и в атрибуте "color" надо подставить или
стандартное название цвета, или его шестнадцатиричное значение.
Пример.
Наша задача - сделать фон документа светло-желтым.
Для этого используем код:
<body bgсolor="lightyellow"> или <body bgcolor=#FFFFE0>
Теперь, используя информацию предыдущих уроках можно отформатировать нашу страницу.
Результат урока
Используя, кроме атрибутов "color" и "bgcolor", разные варианты выключки, начертания, размера и названия
шрифта мы получим следующий HTML-код нашей первой страницы:
<HTML>
<HEAD>
<TITLE>Моя первая
страница</TITLE>
<BODY bgсolor=lightyellow>
<P align=center>
<FONT color=red face=arial size=7>Здесь будут
мои личные страницы!</FONT>
<P align=left><U>На них Вы
сможете найти:</U>
<P><I><FONT color=blue>- рассказ
обо мне и о моих увлечениях;</FONT> <BR>
<FONT
color=#0000ff>- мои фотографии.</FONT></I>
<P
align=right><FONT color=green face=courier size="+1">С одной из моих
страниц
можно будет отправить мне <B>электронное
письмо.</B></FONT>
</P>
</BODY>
</HTML>
Который в браузере будет отображаться следующим образом.
В дополнение к сказанному - таблица основных тегов и атрибутов, позволяющих выбирать цвет.
Таблица тегов и атрибутов для выбора цвета
| Элемент |
Соответствующий тег
и атрибут |
| Фон документа |
<body bgсоlог=цвет> |
| Весь текст документа |
<body tехt=цвет> |
| Активные гиперссылки |
<body alink=цвет> |
| Посещенные гиперссылки |
<body vlink=цвет> |
| Обычные гиперссылки |
<body link=цвет> |
| Фрагмент текста |
<font соlог=цвет> |
| Ячейки таблицы |
<table bgсоlог=цвет>
<tr bgсоlог=цвет>
<td bgсоlог=цвет>
<th bgсоlог=цвет>
|
| Обрамление таблицы |
<table bordercolor=цвет> |
| (только в IE) |
<table bordercolorlight=цвет>
<table bordercolordark=цвет>
(то же самое для <tr>, <td> и <th>) |
Этой информации, надеемся, будет вполне достаточно для разработки вашего первого Веб-проекта.
Спасибо за время, проведенное с нами.
© 2000 В. Филиппов
|
|
