В этой лекции подробно рассматриваются принципы применения таблиц в HTML-разметке. Это и табличная организация текста, и табличная координатная сетка, и организованная в таблицы графика.

Средства описания таблиц в HTML

По мере развития WWW стало ясно, что средств, которые заложены в НТМL, недостаточно для качественного отображения различного типа документов. Недостатком НТМL было отсутствие в его составе средств отображения таблиц. Для этой цели обычно использовался предформатированный текст (тег

), в котором таблица обрисовывалась символами АSСII. Но такая форма представления таблиц была недостаточно высокого качества и выбивалась из общего стиля документа. После введения таблиц в HTML у Web-мастеров появился не просто инструмент для размещения текстовых и числовых данных, а мощное средство дизайна для размещения в нужном месте экрана графических образов и текста.

Создание таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ>. Тег <ТАВLЕ>, как и многие другие, автоматически переводит строку до и после таблицы.
Создание строки таблицы - тег <ТR>
Тег <ТR> (Таble Row, строка таблицы) создает строку таблицы. Весь текст, другие теги и атрибуты, которые требуется поместить в одну строку, должны размещаться между тегами lt;ТR>.
Определение ячеек таблицы - тег <ТD>
Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD>. Число тегов <ТD> в строке определяет число ячеек

 

 
Таблица
 
 

 

 
Если в таблице два
 тега TR, то в ней две строки.
 
 

 
Если в строке три тега TD,
 
то в ней
 
три столбца.
 
 
 


 
Заголовки столбцов таблицы - тег <ТН>
Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН> (Таblе Неаder, заголовок таблицы). Эти теги подобны <ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки. Центрирование можно отменить и выровнять текст по левому или правому краю. Если воспользоваться <ТD> с тегом <В> и атрибутом <АLIGN=center>, текст тоже будет выглядеть как заголовок. Однако следует иметь в виду, что не все браузеры поддерживают в таблицах жирный шрифт, поэтому лучше задавать заголовки таблиц с помощью <ТН>.

 

 

 

 
Заголовок центрирован по умолчанию
 
 
Заголовок может объединять
 столбцы
 
 

 
Заголовок может быть расположен
 перед столбцами
 
Текст или данные
 
Текст или данные
 
 

 
Заголовок может объединять
 строки
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
 


Использование заголовков таблицы - тег <САРТIОN>
Тег  позволяет создавать заголовки таблицы. По умолчанию заголовки центрируются и размещаются либо над (<САРТION АLIGN=top>), либо под таблицей (<САРТION ALIGN=bottom>). Заголовок может состоять из любого текста и изображений. Текст будет разбит на строки, соответствующие ширине таблицы. Иногда тег <САРТION> используется для подписи под рисунком. Для этого достаточно описать таблицу без границ.

 

 

 
Заголовок над таблицей
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 
Заголовок под таблицей
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


Атрибут NOWRAP
Обычно любой текст, не помещающийся в одну строку ячейки таблицы, переходит на следующую строку. Однако при использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку.
Атрибут СОLSPAN
Теги <ТD> и <ТН> модифицируются с помощью атрибута СОLSPAN (Column Span, соединение столбцов). Если вы хотите сделать какую-нибудь ячейку шире, чем верхняя или нижняя, можно воспользоваться атрибутом СОLSPAN, чтобы растянуть ее над любым количеством обычных ячеек.

 

 

 

 

 
Если вы хотите сделать какую-нибудь
 ячейку шире, чем верхняя или нижняя,
 
 
можно воспользоваться атрибутом
 СОLSPAN=2, 
 
 

 
чтобы
 растянуть ее над любым количеством
 обычных ячеек.
 
 
 


Атрибут ROWSPAN
Атрибут ROWSPAN, используемый в тегах <ТD> и <ТН>, подобен атрибуту СОLSPAN=, только он задает число строк, на которые растягивается ячейка. Если вы указали в атрибуте ROWSPAN=s число, большее единицы, то соответствующее количество строк должно находиться под растягиваемой ячейкой. Внизу таблицы ее поместить нельзя.
Атрибут WIDТН
Атрибут WIDТН применяется в двух случаях. Можно поместить его в тег <ТАВLЕ>, чтобы дать ширину всей таблицы, а можно использовать в тегах <ТD> или <ТН>, чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. Например, если вы задали в теге <ТАВLЕ> WIDTH=250, вы получите таблицу шириной 250 пикселов независимо от размера страницы на мониторе. При задании WIDТН=50% в теге <ТАВLЕ> таблица будет занимать половину ширины страницы при любом размере изображения на экране. Так что, указывая ширину таблицы в процентах, имейте в виду, что если у пользователя узкая область просмотра, ваша страница может выглядеть несколько странно. Если вы пользуетесь пикселами, и таблица оказывается шире области просмотра, внизу появится полоса прокрутки для перемещения вправо и влево по странице. В зависимости от поставленных задач и тот, и другой способ задания ширины таблицы может оказаться полезным.

 

 

 

 
Текст или данные -
 ширина 100%
 
 
или

 

 

 
Текст или данные -
 ширина 50%
 
 
или

 

 

 
Текст или данные -
 ширина 200 пикселов
 
 
или

 

 

 
Текст или данные -
 ширина 100 пикселов
 
 


Применение пустых ячеек
Если ячейка не содержит данных, она не будет иметь границ. Если требуется, чтобы у ячейки были границы, но не было содержимого, необходимо поместить в нее что-то, что не будет видно при просмотре. Можно воспользоваться пустой строкой <ВR>. Можно даже задать пустые столбцы, определив их ширину в пикселах или относительных единицах и не введя в полученные ячейки никаких данных. Это средство может оказаться полезным при размещении на странице текста и графики.
Атрибут СЕLLРАDDING
Данный атрибут определяет ширину пустого пространства между содержимым ячейки и ее границами, то есть задает поля внутри ячейки.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 


Атрибуты АLIGN и VALIGN
Теги <ТR>, <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали, то есть по левому или правому краю, либо по центру. Горизонтальное выравнивание может быть задано несколькими способами:
ALIGN=blееdleft
 прижимает содержимое ячейки вплотную к левому краю.
ALIGN=left
 выравнивает содержимое ячейки по левому краю с учетом отступа, заданного атрибутом СЕLLPADDING.
АLIGN=сеnter
 располагает содержимое ячейки по центру.
АLIGN=right
 выравнивает содержимое ячейки по правому краю с учетом отступа, заданного атрибутом СЕLLPADDING.

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 


Атрибут VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. Вертикальное выравнивание может быть задано несколькими способами:
VALIGN=top
 выравнивает содержимое ячейки по ее верхней границе.
VALIGN=middle
 центрирует содержимое ячейки по вертикали.
VALIGN=bottom
 выравнивает содержимое ячейки по ее нижней границе.

 

 

 

 

 
Атрибут VALIGN осуществляет
 выравнивание текста и графики внутри
 ячейки по вертикали.
 
верх,
 
середина,
 
низ.
 
 

 
 VALIGN=top Выравнивает содержимое
 ячейки по ее верхней границе.
 
верх,
 
верх,
 
верх.
 
 

 
VALIGN=middle Центрирует содержимое
 ячейки по вертикали.
 
середина,
 
середина,
 
середина.
 
 

 
VALIGN=bottom Выравнивает содержимое
 ячейки по ее нижней границе.
 
низ,
 
низ,
 
низ.
 
 
 


Атрибут BORDER
В теге <ТАВLЕ> часто определяют, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу. Если вы не зададите рамку, то получите таблицу без линий, но пространство под них будет отведено. Того же результата можно добиться, задав <ТАВLЕ ВОRDER=0>. Иногда хочется сделать границу потолще, чтобы она лучше выделялась. Можно для привлечения внимания к рисунку или тексту задать исключительно жирные границы. При создании вложенных таблиц приходится делать для разных таблиц границы различной толщины, чтобы их легче было различать.
Атрибут CELLSPACING
Атрибут СЕLLSPACING определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам. С помощью атрибута СЕLLSPACING= можно размещать текст и графику там, где вам нужно. Если вы хотите оставить пустое место, можно вписать в ячейку пробел.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 

 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 

 
Текст или данные
 

 
Текст или данные
 
 
 


Атрибут BGCOLOR
Данный атрибут позволяет установить цвет фона. В зависимости от того, с каким тегом (TABLE, TR, TD) он применяется, цвет фона может быть установлен для всей таблицы, для строки или для отдельной ячейки. Значением данного атрибута является RGB-код или стандартное название цвета.

 

 

 

 

 
Текст или данные
 
Текст или данные
 
 
Текст или данные
 
 

 
Текст или данные
 
Текст или данные
 
Текст или данные
 
 
 
 


Атрибут BACKGROUND
Данный атрибут задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением. Применение этого атрибута рассматривается ниже.
Использование таблиц в дизайне страницы
Таблицы хороши тем, что при желании можно сделать их границы невидимыми. Это позволяет с помощью тега <ТАВLЕ> красиво размещать на странице текст и графику. Пока тег <ТАВLЕ> остается единственным мощным средством форматирования в HTML. Дизайнеры Web-страниц сейчас обладают практически той же свободой в отношении использования "пустого пространства", что и создатели печатных страниц. Таблицы лучше всего помогают отойти от иерархического размещения текста на Web-страницах.
Если браузер поддерживает таблицы, он обычно правильно отображает наиболее интересные эффекты, полученные с их помощью

 

 

 

 

 

 
Уральский государственный
 педагогический университет
 
Добро пожаловать!
 

 

 
Учебный курс
 "Основы WEB-мастеринга"
 
 
 
 
 
 


 
Создание разноцветных таблиц
Некоторые браузеры позволяют отображать цвета. Есть несколько способов раскрасить таблицу, в основном они зависят от используемого браузера.
Цветные границы в Netscape Navigator. Вы не только можете окружить таблицу красивой рамкой, но еще и задать для нее цвет, отличный от цветов текста и фона. Создайте простой серый GIF (или любой GIF, который вы хотели бы иметь в качестве фона) и определите его в теге <ВODY> как фон страницы. Затем задайте цвет фона страницы. В результате ваш тег <ВОDY> будет выглядеть примерно так:

 
Вы создали двойной фон - GIF и заданный цвет. В результате фоновый цвет будет виден на всех границах таблиц и горизонтальных линиях (<НR>). Вне зависимости от того, является ваш фоновый GIF серым или нет, цветные линии и границы таблиц будут заметно выделяться. Если фоновый GIF устроен не слишком сложно, время загрузки страницы возрастет лишь немного.
В HTML цвет можно задавать тремя способами:
Задание цвета в HTML по его названию
Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:

 
Цвет текста – красный
Наиболее популярные цвета стандарта Консорциума Всемирной паутины (англ. World Wide Web Consortium, W3C):
Цвет
Название
Цвет
Название
 
Цвет
Название
 
Цвет
Название


Black
 

Gray
 

Silver
 

White


Yellow
 

Lime
 

Aqua
 

Fuchsia


Red
 

Green
 

Blue
 

Purple


Maroon
 

Olive
 

Navy
 

Teal

Пример использования различных цветовых названий:
Пример: задание цвета по его названию
Попробуй сам »
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне
 
Заголовок на красном фоне
Заголовок на оранжевом фоне
Заголовок на фоне лайм
Белый текст на синем фоне

Задание цвета с помощью RGB
При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red)
, G — зеленый (green)
, В — синий (blue)
. Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255.
Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:
Пример: Задание цвета с помощью RGB
Попробуй сам »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
 
 rgb(127, 255, 127)

 rgb(50%, 100%, 50%)

Задание цвета по шестнадцатеричному значению
Значения R

G

B

 также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки #
, например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки #
 можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.
Пример: Цвет HEX
Попробуй сам »
красный: #FF0000
зеленый: #00FF00
синий: #0000FF



 
 красный: #FF0000
 зеленый: #00FF00
 синий: #0000FF
 красный+зеленый=желтый: #FFFF00
 красный+синий=фиолетовый: #FF00FF
 зеленый+синий=голубой: #00FFFF

Список широко распространённых цветов (название, HEX и RGB):
Английское название

Русское название

Образец

HEX

RGB

Amaranth

Амарантовый



#E52B50

229

43

80

Amber

Янтарный



#FFBF00

255

191

0

Aqua

Сине-зеленый



#00FFFF

0

255

255

Azure

Лазурный



#007FFF

0

127

255

Black

Черный



#000000

0

0

0

Blue

Синий



#0000FF

0

0

255

Bondi Blue

Вода пляжа Бонди



#0095B6

0

149

182

Brass

Латунный



#B5A642

181

166

66

Brown

Коричневый



#964B00

150

75

0

Cerulean

Лазурный



#007BA7

0

123

167

Dark spring green

Тёмный весенне-зелёный



#177245

23

114

69

Emerald

Изумрудный



#50C878

80

200

120

Eggplant

Баклажановый



#990066

153

0

102

Fuchsia

Фуксия



#FF00FF

255

0

255

Gold

Золотой



#FFD700

250

215

0

Gray

Серый



#808080

128

128

128

Green

Зелёный



#00FF00

0

255

0

Indigo

Индиго



#4B0082

75

0

130

Jade

Нефритовый



#00A86B

0

168

107

Lime

Лайм



#CCFF00

204

255

0

Malachite

Малахитовый



#0BDA51

11

218

81

Navy

Тёмно-синий



#000080

0

0

128

Ochre

Охра



#CC7722

204

119

34

Olive

Оливковый



#808000

128

128

0

Orange

Оранжевый



#FFA500

255

165

0

Peach

Персиковый



#FFE5B4

255

229

180

Pumpkin

Тыква



#FF7518

255

117

24

Purple

Фиолетовый



#800080

128

0

128

Red

Красный



#FF0000

255

0

0

Saffron

Шафрановый



#F4C430

244

196

48

Sea Green

Зелёное море



#2E8B57

46

139

87

Swamp green

Болотный



#ACB78E

172

183

142

Teal

Сине-зелёный



#008080

0

128

128

Ultramarine

Ультрамариновый



#120A8F

18

10

143

Violet

Фиолетовый



#8B00FF

139

0

255

Yellow

Жёлтый



#FFFF00

255

255

0


Коды цветов (фон) по насыщенности и оттенку.
Влад Мержевич
В HTML цвет задается одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.
 
Шестнадцатеричные цвета
 
Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.
 
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.
 
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.
 
Типичный цвет, используемый в HTML, выглядит следующим образом.

 
 
Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.
 
FA

 
+

 
8E

 
+

 
47

 
=

 
FA8E47

Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB
 (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.
 
Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.
 
Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
 
Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
 
Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.
Рис. 6.1. Цветовой круг
 
Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.
 

 
Рис. 6.2. Окно для выбора цвета в программе Photoshop
 
Веб-цвета
 
Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами
 называются такие цвета, для каждой составляющей которых - красной, зеленой и синей - устанавливается одно из шести значений - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 - 216 цветов. Пример веб-цвета - #33FF66.
 
Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
 
Цвета по названию
 
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.
 
 Табл. 6.3. Названия некоторых цветов
 
Имя цвета

 
Цвет

 
Описание

 
Шестнадцатеричное значение

black

 


 
Черный

 
#000000

blue

 


 
Синий

 
#0000FF

fuchsia

 


 
Светло-фиолетовый

 
#FF00FF

gray

 


 
Темно-серый

 
#808080

green

 


 
Зеленый

 
#008000

lime

 


 
Светло-зеленый

 
#00FF00

maroon

 


 
Темно-красный

 
#800000

navy

 


 
Темно-синий

 
#000080

olive

 


 
Оливковый

 
#808000

purple

 


 
Темно-фиолетовый

 
#800080

red

 


 
Красный

 
#FF0000

silver

 


 
Светло-серый

 
#C0C0C0

teal

 


 
Сине-зеленый

 
#008080

white

 


 
Белый

 
#FFFFFF

yellow

 


 
Желтый

 
#FFFF00

Не имеет значения, каким способом вы задаете цвет - по его имени или с помощью шестнадцатеричных чисел. По своему действию эти способы равны. В примере 6.1 показано, как установить цвет фона и текста веб-страницы.
 
Пример 6.1. Цвет фона и текста

 

 
 
 
 
 
 
Пример текста
 

 
В данном примере цвет фона задается с помощью атрибута bgcolor
 тега 
, а цвет текста через атрибут text
. Для разнообразия значение у атрибута text
 установлено в виде шестнадцатеричного числа, а у bgcolor
 с помощью зарезервированного ключевого слова teal
.
26.02.15

 8.9K

 
Как известно, цвет может влиять на состояние человека: как психическое, так и физическое. Каждый день, просматривая сайты в интернете, глаза оценивают миллионы цветов и оттенков. Веб-дизайнер, который ознакомлен с психологией цвета, может управлять настроением посетителя для достижения каких-либо целей.
Это обусловлено тем, что некоторые оттенки успокаивают, а некоторые наоборот – возбуждают. Далее речь пойдет о том, как синтезируется и отображается цвет с помощью компьютерной техники.
RGB
 – это цветовая модель, представляющая метод получения всех цветов и их оттенков путем смешивания в различных пропорциях трех главных компонентов, которыми являются:
красный цвет (Red

);
зеленый цвет (Green

);
синий цвет (Blue

).
Отсюда и происходит сокращенное название RGB
. Данные цвета неспроста выбраны основными: причиной является физиология сетчатки человеческого глаза, и то, как она воспринимает их:

RGB
-модель на сегодняшний день остается самой популярной и применяется для воспроизведения цветов на экранах телевизоров и компьютерных мониторах. Так как производители наделяют свои изделия различными характеристиками, в 1996 была создана единая система синтеза цветов на основе RGB
 под названием sRGB
, над которой совместно потрудились компании Microsoft
 и HP
.
 
Числовое представление цвета
Как уже было сказано ранее, RGB
 цвета формируются путем смешивания основных. Для описания интенсивности каждого из них приняли схему, в которой цвет представляется диапазоном 0-255
 (8 бит
), что в шестнадцатеричной системе исчисления соответствует 00-FF
.
То есть, основные цвета будут иметь следующий вид:
Красный – RGB
(255,0,0
);
Зеленый – RGB
(0,255,0
);
Синий – RGB
(0,0,255
);
Если же интенсивность цвета принимает значения меньше 255, то получаются различные оттенки красного, зеленого и синего. Далее приведена таблица их градации, а также представлены шестнадцатеричные значения каждого из оттенков:

Таблицы цветов RGB
Естественно, что кроме градаций основных цветов, существуют смешанные, и их количество довольно велико. Поэтому была создана таблица RGB
-цветов, в которой представлены все существующие оттенки, а также приведены их названия и числовые представления (в десятичной и шестнадцатеричной форме
).
Ознакомиться с ней можно здесь
. Данная таблица здорово облегчает жизнь веб-дизайнерам, так как за несколько секунд можно найти необходимый оттенок и узнать его числовое представление.
Безопасная палитра RGB цветов
Однако в какой-то момент существовала проблема отображения цветов в различных браузерах, и для ее решения была скомпонована так называемая «безопасная
» палитра RGB
 цветов, которые были выведены математическими вычислениями.
Когда браузер не может корректно отобразить цвет, он делает попытки получить близкий к необходимому путем смешивания соседних цветов, и скорее всего результат будет совершенно неприемлем:

Используя коды цветов RGB
 из данной палитры, веб-разработчик может не бояться за отображение цветов на страницах своего сайта при просмотре с помощью различных браузеров, на различных платформах и мониторах. Хотя на данный момент таблица безопасных цветов теряет свою актуальность (технический прогресс все же не стоит на месте
), при ее использовании можно, что называется, спать спокойно.
Золотой цвет в RGB модели
Впервые слово «золотой», было использовано в начале XIV века для описания цвета химического элемента под названием Aurum
 – золото. В модели RGB
 золотой цвет представлен следующими числовыми значениями:
RGB
 (255, 215, 0
) – десятеричная система;
HEX #FFD700
 – шестнадцатеричная система.

Бежевый цвет в RGB модели
Бежевый цвет занимает довольно значимое место в истории, пусть он и не самый выразительный. Многие памятники культуры, особенно античные скульптуры, были изготовлены из стеатита и мыльного камня, обладающих бежевым оттенком. В модели RGB
 бежевый цвет имеет следующие числовые представления.
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
 
По названию
 
Internet Explorer


 
Chrome


 
Opera


 
Safari


 
Firefox


 
Android


 
iOS


4.0+


 
1.0+


 
3.5+


 
1.3+


 
1.0+


 
1.0+


 
1.0+


Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.

 Табл. 1. Названия цветов
 
Имя

 
Цвет

 
Код

 
RGB

 
HSL

 
Описание

white

 


 
#ffffff или #fff

 
rgb(255,255,255)

 
hsl(0,0%,100%)

 
Белый

silver

 


 
#c0c0c0

 
rgb(192,192,192)

 
hsl(0,0%,75%)

 
Серый

gray

 


 
#808080

 
rgb(128,128,128)

 
hsl(0,0%,50%)

 
Темно-серый

black

 


 
#000000 или #000

 
rgb(0,0,0)

 
hsl(0,0%,0%)

 
Черный

maroon

 


 
#800000

 
rgb(128,0,0)

 
hsl(0,100%,25%)

 
Темно-красный

red

 


 
#ff0000 или #f00

 
rgb(255,0,0)

 
hsl(0,100%,50%)

 
Красный

orange

 


 
#ffa500

 
rgb(255,165,0)

 
hsl(38.8,100%,50%)

 
Оранжевый

yellow

 


 
#ffff00 или #ff0

 
rgb(255,255,0)

 
hsl(60,100%,50%)

 
Желтый

olive

 


 
#808000

 
rgb(128,128,0)

 
hsl(60,100%,25%)

 
Оливковый

lime

 


 
#00ff00 или #0f0

 
rgb(0,255,0)

 
hsl(120,100%,50%)

 
Светло-зеленый

green

 


 
#008000

 
rgb(0,128,0)

 
hsl(120,100%,25%)

 
Зеленый

aqua

 


 
#00ffff или #0ff

 
rgb(0,255,255)

 
hsl(180,100%,50%)

 
Голубой

blue

 


 
#0000ff или #00f

 
rgb(0,0,255)

 
hsl(240,100%,50%)

 
Синий

navy

 


 
#000080

 
rgb(0,0,128)

 
hsl(240,100%,25%)

 
Темно-синий

teal

 


 
#008080

 
rgb(0,128,128)

 
hsl(180,100%,25%)

 
Сине-зеленый

fuchsia

 


 
#ff00ff или #f0f

 
rgb(255,0,255)

 
hsl(300,100%,50%)

 
Розовый

purple

 


 
#800080

 
rgb(128,0,128)

 
hsl(300,100%,25%)

 
Фиолетовый

С помощью RGB
Internet Explorer


 
Chrome


 
Opera


 
Safari


 
Firefox


 
Android


 
iOS


5.0+


 
1.0+


 
3.5+


 
1.3+


 
1.0+


 
1.0+


 
1.0+


Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255.
 Вначале указывается ключевое слово rgb
, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
RGBA
Internet Explorer


 
Chrome


 
Opera


 
Safari


 
Firefox


 
Android


 
iOS


9.0+


 
1.0+


 
10.0+


 
3.1+


 
3.0+


 
2.1+


 
2.0+


Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color
 проходит валидацию, а добавленный к свойству background
 уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
HSL
Internet Explorer


 
Chrome


 
Opera


 
Safari


 
Firefox


 
Android


 
iOS


9.0+


 
1.0+


 
9.6+


 
3.1+


 
3.0+


 
2.1+


 
2.0+


Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° - зелёному, а 240° - синему. Значение оттенка может изменяться от 0 до 359.
Рис. 1. Цветовой круг
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
HSLA
Internet Explorer


 
Chrome


 
Opera


 
Safari


 
Firefox


 
Android


 
iOS


9.0+


 
1.0+


 
10.0+


 
3.1+


 
3.0+


 
2.1+


 
2.0+


Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.
HTML5
CSS2.1
CSS3
IE
Cr
Op
Sa
Fx

 

 
 
 
 
 
 
 
Предупреждение
 
Все перечисленные на сайте методы ловли льва являются теоретическими
 и базируются на вычислительных методах. Авторы не гарантируют вашей
 безопасности при их использовании и снимают с себя всякую
 ответственность за результат. Помните, лев это хищник и
 опасное животное!
 
Арррргх!
 

Результат данного примера показан на рис. 2.

Рис. 2. Цвета на веб-странице