Опубликован: 25.10.2006 | Уровень: для всех | Доступ: платный
Лекция 8:

Фон страницы в HTML

< Лекция 7 || Лекция 8: 1234 || Лекция 9 >

Цвета в HTML

Цвета выводятся с помощью смешения источников RED (красного), GREEN (зеленого), и BLUE (синего) цвета.

Значения цветов

Цвета определяют с помощью шестнадцатеричной записи комбинации значений красного, зеленого и синего цветов (RGB). Наименьшее значение, которое можно задать одному из источников равно 0 (hex #00). Максимальное значение равно 255 (hex #FF).

Следующий пример показывает результат объединения красного (R), зеленого (G) и синего (B) источников цвета.

<html>
<body>
<table>
<tr><th>Цвет</th><th>Цвет (HEX)</th><th>Цвет (RGB)</th></tr>
<tr><td bgcolor="#000000">&nbsp;</td><td>#000000</td><td>rgb(0,0,0)</td></tr>
<tr><td bgcolor="#FF0000">&nbsp;</td><td>#FF0000</td><td>rgb(255,0,0)</td></tr>
<tr><td bgcolor="#00FF00">&nbsp;</td><td>#00FF00</td><td>rgb(0,255,0)</td></tr>
<tr><td bgcolor="#0000FF">&nbsp;</td><td>#0000FF</td><td>rgb(0,0,255)</td></tr>
<tr><td bgcolor="#FFFF00">&nbsp;</td><td>#FFFF00</td><td>rgb(255,255,0)</td></tr>
<tr><td bgcolor="#00FFFF">&nbsp;</td><td>#00FFFF</td><td>rgb(0,255,255)</td></tr>
<tr><td bgcolor="#FF00FF">&nbsp;</td><td>#FF00FF</td><td>rgb(255,0,255)</td></tr>
<tr><td bgcolor="#C0C0C0">&nbsp;</td><td>#C0C0C0</td><td>rgb(192,192,192)</td></tr>
<tr><td bgcolor="#FFFFFF">&nbsp;</td><td>#FFFFFF</td><td>rgb(255,255,255)</td></tr>
<table>
<body>
<html>

Пример выполнения данного HTML-кода

Имена цветов

Некоторая совокупность названий цветов поддерживается большинством браузеров.

Примечание: Только 16 названий цветов поддерживается стандартом W3C для HTML 4.0 (aqua (голубой), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (сиреневый), red (красный), silver (светло-серый), teal (сине-зеленый), white (белый), и yellow (желтый)). Для всех других цветов необходимо использовать значение HEX цвета.

Безопасные цвета Web

Было время, когда большинство компьютеров поддерживали только 256 различных цветов, был предложен в качестве стандарта Web список из 216 безопасных цветов Web. Причина этого состояла в том, что операционные системы Microsoft и Mac использовали 40 различных "резервных" фиксированных системных цветов (около 20 каждая).

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

216 межплатформенных цветов

Эта палитра из 216 межплатформенных безопасных для Web цветов была первоначально создана для обеспечения правильного вывода всеми компьютерами всех цветов при использовании палитры из 256 цветов.

<html>
<body>
<table border>
  <tr>
    <td width=20 bgcolor="#000000"></td><td>000000</td>
    <td width=20 bgcolor="#000033"></td><td>000033</td>
    <td width=20 bgcolor="#000066"></td><td>000066</td>
    <td width=20 bgcolor="#000099"></td><td>000099</td>
    <td width=20 bgcolor="#0000CC"></td><td>0000CC</td>
    <td width=20 bgcolor="#0000FF"></td><td>0000FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#003300"></td><td>003300</td>
    <td width=20 bgcolor="#003333"></td><td>003333</td>
    <td width=20 bgcolor="#003366"></td><td>003366</td>
    <td width=20 bgcolor="#003399"></td><td>003399</td>
    <td width=20 bgcolor="#0033CC"></td><td>0033CC</td>
    <td width=20 bgcolor="#0033FF"></td><td>0033FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#006600"></td><td>006600</td>
    <td width=20 bgcolor="#006633"></td><td>006633</td>
    <td width=20 bgcolor="#006666"></td><td>006666</td>
    <td width=20 bgcolor="#006699"></td><td>006699</td>
    <td width=20 bgcolor="#0066CC"></td><td>0066CC</td>
    <td width=20 bgcolor="#0066FF"></td><td>0066FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#009900"></td><td>009900</td>
    <td width=20 bgcolor="#009933"></td><td>009933</td>
    <td width=20 bgcolor="#009966"></td><td>009966</td>
    <td width=20 bgcolor="#009999"></td><td>009999</td>
    <td width=20 bgcolor="#0099CC"></td><td>0099CC</td>
    <td width=20 bgcolor="#0099FF"></td><td>0099FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#00CC00"></td><td>00CC00</td>
    <td width=20 bgcolor="#00CC33"></td><td>00CC33</td>
    <td width=20 bgcolor="#00CC66"></td><td>00CC66</td>
    <td width=20 bgcolor="#00CC99"></td><td>00CC99</td>
    <td width=20 bgcolor="#00CCCC"></td><td>00CCCC</td>
    <td width=20 bgcolor="#00CCFF"></td><td>00CCFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#00FF00"></td><td>00FF00</td>
    <td width=20 bgcolor="#00FF33"></td><td>00FF33</td>
    <td width=20 bgcolor="#00FF66"></td><td>00FF66</td>
    <td width=20 bgcolor="#00FF99"></td><td>00FF99</td>
    <td width=20 bgcolor="#00FFCC"></td><td>00FFCC</td>
    <td width=20 bgcolor="#00FFFF"></td><td>00FFFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#330000"></td><td>330000</td>
    <td width=20 bgcolor="#330033"></td><td>330033</td>
    <td width=20 bgcolor="#330066"></td><td>330066</td>
    <td width=20 bgcolor="#330099"></td><td>330099</td>
    <td width=20 bgcolor="#3300CC"></td><td>3300CC</td>
    <td width=20 bgcolor="#3300FF"></td><td>3300FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#333300"></td><td>333300</td>
    <td width=20 bgcolor="#333333"></td><td>333333</td>
    <td width=20 bgcolor="#333366"></td><td>333366</td>
    <td width=20 bgcolor="#333399"></td><td>333399</td>
    <td width=20 bgcolor="#3333CC"></td><td>3333CC</td>
    <td width=20 bgcolor="#3333FF"></td><td>3333FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#336600"></td><td>336600</td>
    <td width=20 bgcolor="#336633"></td><td>336633</td>
    <td width=20 bgcolor="#336666"></td><td>336666</td>
    <td width=20 bgcolor="#336699"></td><td>336699</td>
    <td width=20 bgcolor="#3366CC"></td><td>3366CC</td>
    <td width=20 bgcolor="#3366FF"></td><td>3366FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#339900"></td><td>339900</td>
    <td width=20 bgcolor="#339933"></td><td>339933</td>
    <td width=20 bgcolor="#339966"></td><td>339966</td>
    <td width=20 bgcolor="#339999"></td><td>339999</td>
    <td width=20 bgcolor="#3399CC"></td><td>3399CC</td>
    <td width=20 bgcolor="#3399FF"></td><td>3399FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#33CC00"></td><td>33CC00</td>
    <td width=20 bgcolor="#33CC33"></td><td>33CC33</td>
    <td width=20 bgcolor="#33CC66"></td><td>33CC66</td>
    <td width=20 bgcolor="#33CC99"></td><td>33CC99</td>
    <td width=20 bgcolor="#33CCCC"></td><td>33CCCC</td>
    <td width=20 bgcolor="#33CCFF"></td><td>33CCFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#33FF00"></td><td>33FF00</td>
    <td width=20 bgcolor="#33FF33"></td><td>33FF33</td>
    <td width=20 bgcolor="#33FF66"></td><td>33FF66</td>
    <td width=20 bgcolor="#33FF99"></td><td>33FF99</td>
    <td width=20 bgcolor="#33FFCC"></td><td>33FFCC</td>
    <td width=20 bgcolor="#33FFFF"></td><td>33FFFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#660000"></td><td>660000</td>
    <td width=20 bgcolor="#660033"></td><td>660033</td>
    <td width=20 bgcolor="#660066"></td><td>660066</td>
    <td width=20 bgcolor="#660099"></td><td>660099</td>
    <td width=20 bgcolor="#6600CC"></td><td>6600CC</td>
    <td width=20 bgcolor="#6600FF"></td><td>6600FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#663300"></td><td>663300</td>
    <td width=20 bgcolor="#663333"></td><td>663333</td>
    <td width=20 bgcolor="#663366"></td><td>663366</td>
    <td width=20 bgcolor="#663399"></td><td>663399</td>
    <td width=20 bgcolor="#6633CC"></td><td>6633CC</td>
    <td width=20 bgcolor="#6633FF"></td><td>6633FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#666600"></td><td>666600</td>
    <td width=20 bgcolor="#666633"></td><td>666633</td>
    <td width=20 bgcolor="#666666"></td><td>666666</td>
    <td width=20 bgcolor="#666699"></td><td>666699</td>
    <td width=20 bgcolor="#6666CC"></td><td>6666CC</td>
    <td width=20 bgcolor="#6666FF"></td><td>6666FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#669900"></td><td>669900</td>
    <td width=20 bgcolor="#669933"></td><td>669933</td>
    <td width=20 bgcolor="#669966"></td><td>669966</td>
    <td width=20 bgcolor="#669999"></td><td>669999</td>
    <td width=20 bgcolor="#6699CC"></td><td>6699CC</td>
    <td width=20 bgcolor="#6699FF"></td><td>6699FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#66CC00"></td><td>66CC00</td>
    <td width=20 bgcolor="#66CC33"></td><td>66CC33</td>
    <td width=20 bgcolor="#66CC66"></td><td>66CC66</td>
    <td width=20 bgcolor="#66CC99"></td><td>66CC99</td>
    <td width=20 bgcolor="#66CCCC"></td><td>66CCCC</td>
    <td width=20 bgcolor="#66CCFF"></td><td>66CCFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#66FF00"></td><td>66FF00</td>
    <td width=20 bgcolor="#66FF33"></td><td>66FF33</td>
    <td width=20 bgcolor="#66FF66"></td><td>66FF66</td>
    <td width=20 bgcolor="#66FF99"></td><td>66FF99</td>
    <td width=20 bgcolor="#66FFCC"></td><td>66FFCC</td>
    <td width=20 bgcolor="#66FFFF"></td><td>66FFFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#990000"></td><td>990000</td>
    <td width=20 bgcolor="#990033"></td><td>990033</td>
    <td width=20 bgcolor="#990066"></td><td>990066</td>
    <td width=20 bgcolor="#990099"></td><td>990099</td>
    <td width=20 bgcolor="#9900CC"></td><td>9900CC</td>
    <td width=20 bgcolor="#9900FF"></td><td>9900FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#993300"></td><td>993300</td>
    <td width=20 bgcolor="#993333"></td><td>993333</td>
    <td width=20 bgcolor="#993366"></td><td>993366</td>
    <td width=20 bgcolor="#993399"></td><td>993399</td>
    <td width=20 bgcolor="#9933CC"></td><td>9933CC</td>
    <td width=20 bgcolor="#9933FF"></td><td>9933FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#996600"></td><td>996600</td>
    <td width=20 bgcolor="#996633"></td><td>996633</td>
    <td width=20 bgcolor="#996666"></td><td>996666</td>
    <td width=20 bgcolor="#996699"></td><td>996699</td>
    <td width=20 bgcolor="#9966CC"></td><td>9966CC</td>
    <td width=20 bgcolor="#9966FF"></td><td>9966FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#999900"></td><td>999900</td>
    <td width=20 bgcolor="#999933"></td><td>999933</td>
    <td width=20 bgcolor="#999966"></td><td>999966</td>
    <td width=20 bgcolor="#999999"></td><td>999999</td>
    <td width=20 bgcolor="#9999CC"></td><td>9999CC</td>
    <td width=20 bgcolor="#9999FF"></td><td>9999FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#99CC00"></td><td>99CC00</td>
    <td width=20 bgcolor="#99CC33"></td><td>99CC33</td>
    <td width=20 bgcolor="#99CC66"></td><td>99CC66</td>
    <td width=20 bgcolor="#99CC99"></td><td>99CC99</td>
    <td width=20 bgcolor="#99CCCC"></td><td>99CCCC</td>
    <td width=20 bgcolor="#99CCFF"></td><td>99CCFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#99FF00"></td><td>99FF00</td>
    <td width=20 bgcolor="#99FF33"></td><td>99FF33</td>
    <td width=20 bgcolor="#99FF66"></td><td>99FF66</td>
    <td width=20 bgcolor="#99FF99"></td><td>99FF99</td>
    <td width=20 bgcolor="#99FFCC"></td><td>99FFCC</td>
    <td width=20 bgcolor="#99FFFF"></td><td>99FFFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#CC0000"></td><td>CC0000</td>
    <td width=20 bgcolor="#CC0033"></td><td>CC0033</td>
    <td width=20 bgcolor="#CC0066"></td><td>CC0066</td>
    <td width=20 bgcolor="#CC0099"></td><td>CC0099</td>
    <td width=20 bgcolor="#CC00CC"></td><td>CC00CC</td>
    <td width=20 bgcolor="#CC00FF"></td><td>CC00FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#CC3300"></td><td>CC3300</td>
    <td width=20 bgcolor="#CC3333"></td><td>CC3333</td>
    <td width=20 bgcolor="#CC3366"></td><td>CC3366</td>
    <td width=20 bgcolor="#CC3399"></td><td>CC3399</td>
    <td width=20 bgcolor="#CC33CC"></td><td>CC33CC</td>
    <td width=20 bgcolor="#CC33FF"></td><td>CC33FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#CC6600"></td><td>CC6600</td>
    <td width=20 bgcolor="#CC6633"></td><td>CC6633</td>
    <td width=20 bgcolor="#CC6666"></td><td>CC6666</td>
    <td width=20 bgcolor="#CC6699"></td><td>CC6699</td>
    <td width=20 bgcolor="#CC66CC"></td><td>CC66CC</td>
    <td width=20 bgcolor="#CC66FF"></td><td>CC66FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#CC9900"></td><td>CC9900</td>
    <td width=20 bgcolor="#CC9933"></td><td>CC9933</td>
    <td width=20 bgcolor="#CC9966"></td><td>CC9966</td>
    <td width=20 bgcolor="#CC9999"></td><td>CC9999</td>
    <td width=20 bgcolor="#CC99CC"></td><td>CC99CC</td>
    <td width=20 bgcolor="#CC99FF"></td><td>CC99FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#CCCC00"></td><td>CCCC00</td>
    <td width=20 bgcolor="#CCCC33"></td><td>CCCC33</td>
    <td width=20 bgcolor="#CCCC66"></td><td>CCCC66</td>
    <td width=20 bgcolor="#CCCC99"></td><td>CCCC99</td>
    <td width=20 bgcolor="#CCCCCC"></td><td>CCCCCC</td>
    <td width=20 bgcolor="#CCCCFF"></td><td>CCCCFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#CCFF00"></td><td>CCFF00</td>
    <td width=20 bgcolor="#CCFF33"></td><td>CCFF33</td>
    <td width=20 bgcolor="#CCFF66"></td><td>CCFF66</td>
    <td width=20 bgcolor="#CCFF99"></td><td>CCFF99</td>
    <td width=20 bgcolor="#CCFFCC"></td><td>CCFFCC</td>
    <td width=20 bgcolor="#CCFFFF"></td><td>CCFFFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#FF0000"></td><td>FF0000</td>
    <td width=20 bgcolor="#FF0033"></td><td>FF0033</td>
    <td width=20 bgcolor="#FF0066"></td><td>FF0066</td>
    <td width=20 bgcolor="#FF0099"></td><td>FF0099</td>
    <td width=20 bgcolor="#FF00CC"></td><td>FF00CC</td>
    <td width=20 bgcolor="#FF00FF"></td><td>FF00FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#FF3300"></td><td>FF3300</td>
    <td width=20 bgcolor="#FF3333"></td><td>FF3333</td>
    <td width=20 bgcolor="#FF3366"></td><td>FF3366</td>
    <td width=20 bgcolor="#FF3399"></td><td>FF3399</td>
    <td width=20 bgcolor="#FF33CC"></td><td>FF33CC</td>
    <td width=20 bgcolor="#FF33FF"></td><td>FF33FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#FF6600"></td><td>FF6600</td>
    <td width=20 bgcolor="#FF6633"></td><td>FF6633</td>
    <td width=20 bgcolor="#FF6666"></td><td>FF6666</td>
    <td width=20 bgcolor="#FF6699"></td><td>FF6699</td>
    <td width=20 bgcolor="#FF66CC"></td><td>FF66CC</td>
    <td width=20 bgcolor="#FF66FF"></td><td>FF66FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#FF9900"></td><td>FF9900</td>
    <td width=20 bgcolor="#FF9933"></td><td>FF9933</td>
    <td width=20 bgcolor="#FF9966"></td><td>FF9966</td>
    <td width=20 bgcolor="#FF9999"></td><td>FF9999</td>
    <td width=20 bgcolor="#FF99CC"></td><td>FF99CC</td>
    <td width=20 bgcolor="#FF99FF"></td><td>FF99FF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#FFCC00"></td><td>FFCC00</td>
    <td width=20 bgcolor="#FFCC33"></td><td>FFCC33</td>
    <td width=20 bgcolor="#FFCC66"></td><td>FFCC66</td>
    <td width=20 bgcolor="#FFCC99"></td><td>FFCC99</td>
    <td width=20 bgcolor="#FFCCCC"></td><td>FFCCCC</td>
    <td width=20 bgcolor="#FFCCFF"></td><td>FFCCFF</td>
  </tr>
  <tr>
    <td width=20 bgcolor="#FFFF00"></td><td>FFFF00</td>
    <td width=20 bgcolor="#FFFF33"></td><td>FFFF33</td>
    <td width=20 bgcolor="#FFFF66"></td><td>FFFF66</td>
    <td width=20 bgcolor="#FFFF99"></td><td>FFFF99</td>
    <td width=20 bgcolor="#FFFFCC"></td><td>FFFFCC</td>
    <td width=20 bgcolor="#FFFFFF"></td><td>FFFFFF</td>
  </tr>
</table>
</body>
</html>

Пример выполнения данного HTML-кода

< Лекция 7 || Лекция 8: 1234 || Лекция 9 >
Анна Королёва
Анна Королёва

Пожалуйста, уточните, кто автор курса Основы работы с HTML ?

Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Зарина Каримова
Зарина Каримова
Казахстан, Алматы, Гимназия им. Ахмета Байтурсынова №139, 2008
Akiyev Begench
Akiyev Begench
Беларусь, Полоцк, полоцкий государственный университет