Цвета в HTML

Цвета в документах HTML могут задаваться двумя способами - указанием кода цвета или указанием названия цвета на английском языке. При первом способе код цвета записывается в виде шестнадцатеричного числа, содержащего шесть цифр: первые две цифры задают интенсивность красного цвета, вторые - зеленого, третьи - синего. При втором способе используются следующие названия цветов: black (черный), maroon (темно-красный), green (зеленый), olive (оливковый), navy (синий), purple (фиолетовый), teal (зеленовато-синий), gray (серый), silver (серебристый), red (красный), lime (известковый), yellow (желтый), blue (голубой), fuchsia (ярко-малиновый), aqua (морской волны) и white (белый).
Создадим документ, содержащий таблицу, ячейки которой окрашены в разные цвета. Фон документа установим черным. Документ наберем (или отредактируем) Блокнотом и запишем в рабочую папку в файл colortab1.htm.

<HTML>

<HEAD>

<TITLE> COLOR REFERENCE TABLE</TITLE>

</HEAD>

<BODY BGCOLOR=#000000>

<TABLE>

<TH COLSPAN=8>"SAMPLE COLOR REFERENCE"</TH>

<TR>

<TD BGCOLOR=#FF3300>...</TD><TD BGCOLOR=#CC3300>...</TD>

<TD BGCOLOR=#993300>...</TD><TD BGCOLOR=#663300>...</TD>

<TD BGCOLOR=#333300>...</TD><TD BGCOLOR=#003300>...</TD>

<TD BGCOLOR=#FF0000>...</TD><TD BGCOLOR=#00FFFF>...</TD>

</TR>

<TR>

<TD BGCOLOR=#FF3333>...</TD><TD BGCOLOR=#CC3333>...</TD>

<TD BGCOLOR=#993333>...</TD><TD BGCOLOR=#663333>...</TD>

<TD BGCOLOR=#333333>...</TD><TD BGCOLOR=#003333>...</TD>

<TD BGCOLOR=#FF9900>...</TD><TD BGCOLOR=#00CCFF>...</TD>

</TR>

<TR>

<TD BGCOLOR=#FF3366>...</TD><TD BGCOLOR=#CC3366>...</TD>

<TD BGCOLOR=#993366>...</TD><TD BGCOLOR=#663366>...</TD>

<TD BGCOLOR=#333366>...</TD><TD BGCOLOR=#003366>...</TD>

<TD BGCOLOR=#FFCC00>...</TD><TD BGCOLOR=#0099FF>...</TD>

</TR>

<TR>

<TD BGCOLOR=#FF3399>...</TD><TD BGCOLOR=#CC3399>...</TD>

<TD BGCOLOR=#993399>...</TD><TD BGCOLOR=#663399>...</TD>

<TD BGCOLOR=#333399>...</TD><TD BGCOLOR=#003399>...</TD>

<TD BGCOLOR=#FFFF00>...</TD><TD BGCOLOR=#0066FF>...</TD>

</TR>

<TR>

<TD BGCOLOR=#FF33CC>...</TD><TD BGCOLOR=#CC33CC>...</TD>

<TD BGCOLOR=#9933CC>...</TD><TD BGCOLOR=#6633CC>...</TD>

<TD BGCOLOR=#3333CC>...</TD><TD BGCOLOR=#0033CC>...</TD>

<TD BGCOLOR=#FF0066>...</TD><TD BGCOLOR=#0033FF>...</TD>

</TR>

<TR>

<TD BGCOLOR=#FF33FF>...</TD><TD BGCOLOR=#CC33FF>...</TD>

<TD BGCOLOR=#9933FF>...</TD><TD BGCOLOR=#6633FF>...</TD>

<TD BGCOLOR=#3333FF>...</TD><TD BGCOLOR=#0033FF>...</TD>

<TD BGCOLOR=#FF0099>...</TD><TD BGCOLOR=#0066FF>...</TD>

</TR>

<TR>

<TD BGCOLOR=#FF6600>...</TD><TD BGCOLOR=#CC6600>...</TD>

<TD BGCOLOR=#996600>...</TD><TD BGCOLOR=#666600>...</TD>

<TD BGCOLOR=#336600>...</TD><TD BGCOLOR=#006600>...</TD>

<TD BGCOLOR=#FF00CC>...</TD><TD BGCOLOR=#009999>...</TD>

</TR>

<TR>

<TD BGCOLOR=#FF6633>...</TD><TD BGCOLOR=#CC6633>...</TD>

<TD BGCOLOR=#996633>...</TD><TD BGCOLOR=#666633>...</TD>

<TD BGCOLOR=#336633>...</TD><TD BGCOLOR=#006633>...</TD>

<TD BGCOLOR=#FF00FF>...</TD><TD BGCOLOR=#00CC66>...</TD>

</TR>

</TABLE>

</BODY>

</HTML>

"SAMPLE COLOR REFERENCE"
...	...	...	...	...	...	...	...
...	...	...	...	...	...	...	...
...	...	...	...	...	...	...	...
...	...	...	...	...	...	...	...
...	...	...	...	...	...	...	...
...	...	...	...	...	...	...	...
...	...	...	...	...	...	...	...
...	...	...	...	...	...	...	...

Посмотрите с помощью MS Internet Explorer на результат. Этот результат достигнут применением новых атрибутов и тегов. Атрибут BGCOLOR задает цвет фона в тегах<BODY> и <TD>. Он может использоваться также в тегах<TR> и <TH> для определения цвета фона строки в целом. Тег означает абзац (paragraph). В данном случае ко всему абзацу применено выравнивание по центру окна (атрибут ALIGN со значением CENTER). Атрибут ALIGN может также принимать значения LEFT и RIGHT. Абзац заканчивается тегом и после конца абзаца прекращается действие его атрибутов.

<TH> - это так называемый тег заголовка таблицы. Фактически он объявляет строку, в которой должен быть записан заголовок таблицы. В данном случае он имеет атрибут COLSPAN, определяющий, сколько ячеек из следующей строки должен перекрыть этот заголовок. Тег определяет установки свойств шрифта. В данном случае устанавливается цвет текста в строке заголовка. Вообще говоря, в тегах можно использовать несколько атрибутов, но тег является исключением - для каждого изменения свойств текста используется отдельный тег , например:

Цветной текст 

Задание 1.5.1. Создайте в рабочей папке документ font1.htm, в тело которого включите текст приведенного выше примера и просмотрите результат. Ускорить выполнение задания можно путем копирования этого примера в текст, создаваемый Блокнотом. Для этого следует выделить пример в методичке, протащив указатель мыши (при нажатой ее левой клавише) по полосе выделения слева от трех строк примера. Затем скопировать примера в буфер обмена, щелкнув в инструментальном меню "Стандартное" по кнопке или посредством команды операционного меню {Правка, Копировать}. Далее нужно вставить этот пример из буфера обмена в текст, создаваемый Блокнотом, используя команду {Правка, Копировать} операционного меню Блокнота.

Задание 1.5.2. Используя как образец документ colortab1.htm, создайте в рабочей папке документ table3.htm, содержащий таблицу с заголовком "Координаты ячеек" и с 16-ю клетками (4 строки по 4 ячейки), в которых записаны координаты этих клеток по принципу С1К1 (где С - строка, К - колонка с соответствую-щими номерами). Фон документа должен быть сине-зеленым, фон строки заголовка - белым, текст строки заголовка - желтым. Текст в ячейках таблицы должен быть черным на сером фоне. Ячейки таблицы должны иметь границы.

Задание 1.5.3. Модифицируйте документ table3.htm так, чтобы в одной из центральных ячеек оказался оранжевый текст размера +3 "Центральная клетка". Получившийся документ назовите table3a.htm. Обратите внимание на изменение ширины и высоты ячеек таблицы

Задание 1.5.4. Используя документ font1.htm как исходный, записать в рабочую папку файл font1a.htm, в котором поэкспериментировать с атрибутом COLOR=, задав коды цвета.

Задание 1.5.5. Используя документ font1.htm как исходный, записать в рабочую папку файл font1b.htm, в котором поэкспериментировать с атрибутом COLOR=, задав названия цвета.

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:

4 5 6 7 8 9 10

Элементы поперечного профиля дороги

II этап сестринского процесса: сестринская диагностика

ПРИМЕРЫ ИСПОЛЬЗОВАНИЯ СЕСТРИНСКОГО ПРОЦЕССА В ДЕЯТЕЛЬНОСТИ МЕДСЕСТРЫ

Техника наложения бинтовых повязок

Модели отношения врач – пациент

Столыпинская аграрная реформа

Самый сильный аргумент, почему эволюция человека не могла быть