Неупорядоченные списки

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

Неупорядоченный список начинается с тега <ul>. Каждый элемент списка начинается с тега <li>.

<h4>Неупорядоченный список:</h4> <ul> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ul>

</body> </html>

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

Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

Различные типы неупорядоченных списков

<h4>Список со значком кругом:</h4> <ul type="disc"> <li>intuit.ru</li> <li>osp.ru</li> <li>file.ru</li> </ul>

<h4>Список со значком окружностью:</h4> <ul type="circle"> <li>intuit.ru</li> <li>osp.ru</li> <li>file.ru</li> </ul>

<h4>Список со значком квадратом:</h4> <ul type="square"> <li>intuit.ru</li> <li>osp.ru</li> <li>file.ru</li> </ul>

</body> </html>

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

Различные типы упорядоченных списков

<h4>Список проектов с цифрами:</h4> <ol> <li>intuit.ru</li> <li>osp.ru</li> <li>file.ru</li> </ol>

<h4>Список с буквами:</h4> <ol type="A"> <li>intuit.ru</li> <li>osp.ru</li> <li>file.ru</li> </ol>

<h4>Список с буквами нижнего регистра:</h4> <ol type="a"> <li>intuit.ru</li> <li>osp.ru</li> <li>file.ru</li> </ol>

<h4>Список с римскими цифрами:</h4> <ol type="I"> <li>intuit.ru</li> <li>osp.ru</li> <li>file.ru</li> </ol>

<h4>Список с римскими цифрами в нижнем регистре:</h4> <ol type="i"> <li>intuit.ru</li> <li>osp.ru</li> <li>file.ru</li> </ol>

</body> </html>

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

Списки определений

Список определений не является списком элементов. Это список терминов и определений терминов.

Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>.

<dl> <dt>элемент 1</dt> <dd>описание элемента 1</dd> <dt>элемент 2</dt> <dd>описание элемента 2</dd> </dl>

</body> </html>

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

Внутри определения списка определений (тег <dd>) можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

Список определений

<h4>Список определений:</h4> <dl> <dt>элемент 1</dt> <dd>описание элемента 1</dd> <dt>элемент 2</dt> <dd>описание элемента 2</dd> </dl>

</body> </html>

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

элемент 1

описание элемента 1

элемент 2

описание элемента 2

Теги списков

ТегОписание

<ol>	Определяет упорядоченный список
<ul>	Определяет неупорядоченный список
<li>	Определяет элемент списка
<dl>	Определяет список определений
<dt>	Определяет термин определения
<dd>	Определяет описание определения
<dir>	Не рекомендуется. Используйте вместо этого <ul>
<menu>	Не рекомендуется. Используйте вместо этого <ul>

Упорядоченные списки

Упорядоченный список также является списком элементов. Элементы списка маркируются с помощью чисел или букв.

Упорядоченный список начинается с тега<ol>. Каждый элемент списка начинается с тега <li>. У тега <ol> может быть два атрибута start (определяет первое число, с которого начинается нумерация пунктов) и type (определяет стиль нумерации пунктов). Может иметь значения:

"A" - заглавные буквы A, B, C ..."a" - строчные буквы a, b, c ..."I" - большие римские числа I, II, III ..."i" - маленькие римские числа i, ii, iii ..."1" - арабские числа 1, 2, 3 ...

<h4>Упорядоченный список:</h4> <ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>

</body> </html>

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

Внутри элемента списка можно помещать параграфы, переносы строк, изображения, ссылки, другие списки, и т.д.

Вложенный список

<h4>Вложенный список:</h4> <ul> <li>элемент 1</li> <li>элемент 2 <ul> <li>элемент 2.1</li> <li>элемент 2.2</li> </ul> </li> <li>элемент 3</li> </ul>

</body> </html>

<h4>Вложенный список:</h4> <ul> <li>элемент 1</li> <li>элемент 2</li> <ul> <li>элемент 2.1</li> <li> элемент 2.2</li> <ul> <li>элемент 2.2.1</li> <li>элемент 2.2.2</li> </ul> </li> </ul> </li> <li>элемент 3</li> </ul>

</body> </html>

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

элемент 1

элемент 2

элемент 2.1

элемент 2.2

элемент 2.2.1

элемент 2.2.2

элемент 3

Флажки

Флажки (type=checkbox) используются, когда необходимо, чтобы пользователь выбрал один или несколько вариантов из ограниченного числа вариантов выбора. Флажки в форме не зависят друг от друга, их можно установить или сбросить в любой комбинации. Для каждого флажка необходимо задать свое уникальное имя при помощи атрибута name. Создание двух флажков с одним именем не вызовет ошибки при отображении формы, но не позволит сценарию обработки на сервере корректно обработать передаваемые с формы данные.

<form> В этом году я собираюсь приобрести: <br> <input type="checkbox" name="computer"> Компьютер <br> <input type="checkbox" name="notebook"> Ноутбук <br> <input type="checkbox" name="printer"> Принтер <br> <input type="checkbox" name="scanner"> Сканер </form>

</body> </html>

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

При помощи атрибута checked можно установить, какие из флажков будут выбраны по умолчанию при загрузке страницы. Отличие от переключателей заключается только в том, что для флажков можно отметить сразу несколько вариантов.

<form> В этом году я собираюсь приобрести: <br> <input type="checkbox" name="computer" checked="checked"> Компьютер <br> <input type="checkbox" name="notebook"> Ноутбук <br> <input type="checkbox" name="printer"> Принтер <br> <input type="checkbox" name="scanner" checked="checked"> Сканер </form>

</body> </html>

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

В данном примере по умолчанию выбраны флажки "Компьютер" и "Сканер":

При отправке данных формы с флажками на сервер выбранным флажкам присваивается значение по умолчанию "on". Как правило, этого достаточно для корректной обработки данных, но в некоторых случаях удобнее задать каждому флажку свое значение при помощи атрибута value.

Форма поиска

Одна из наиболее распространенных форм. Пользователь получает возможность ввести искомый запрос, определить область поиска и отправить запрос на сервер для обработки.

<form name="input" action="html_form_action.asp" method="get"> <table border=1 bgcolor="#ddffdd"> <tr> <td align="center"> <input type="text" name="search" size="50" value="Строка для поиска"> <input type="submit" value="Поиск"> <br> <input type="checkbox" name="news">Искать в новостях <input type="checkbox" name="arhive">Искать в архивах </td> </tr> </table> </form>

</body> </html>

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

Формы

Форма является областью, которая может содержать элементы, позволяющие. пользователю вводить информацию (такие как текстовые поля, поля многострочного текста, раскрывающиеся меню, переключатели, флажки, и т.д.).

Форма определяется с помощью тегов <form></form>, между которыми располагаются поля ввода, кнопки, а также все необходимые элементы оформления формы.

Тег <form> имеет ряд атрибутов, из которых необходимо выделить атрибуты action и method. Без этих атрибутов форма не сможет передать информацию от пользователя на сервер.

Атрибут Action указывает URL-адрес объекта, который должен получить данные формы.

Атрибут method может иметь два значения: get и post.

Значение атрибута method=get заставляет Web-браузер передать все данные формуляра по URL-адресу, заданному в action. При этом введенные при заполнении формы данные просто добавляются в адресную строку с использованием разделителя – знака вопроса. Этот метод удобен для небольших форм.

Значение атрибута method=post заставляет Web-браузер, прежде всего, связаться с сервером, обрабатывающим форму, и только после установки связи приступить к передаче данных, для обработки которых будут использоваться специальные сценарии.

Группировка полей формы

Теги <fieldset> </fieldset> объединяют поля формы в группы, выделяют их визуально, упрощают навигацию в форме с помощью клавиши [Tab] (в первую очередь обходятся поля в пределах группы). Для того чтобы объединить несколько элементов ввода или управления в группу достаточно поместить их внутри тегов <fieldset> </fieldset>. Закрывающий тег </fieldset> обязателен.

В следующем примере создается форма, содержащая поля для ввода имени и фамилии, объединенные в группу, а также кнопку отправки

<form name="input" action="html_form_action.asp" method="get"> <fieldset> Имя: <input type="text" name="firstname" value="Билл"> <br> Фамилия: <input type="text" name="lastname" value="Гейтс"> </fieldset> <input type="submit" value="отправить"> </form>

</body> </html>

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

При помощи пары тегов <legend> </legend> образованной группе полей можно присвоить имя. В следующем примере форма ввода дополнена полями для ввода информации о месте работы и занимаемой должности, объединенными во вторую группу. Каждой группе полей присвоен свой заголовок.

<form name="input" action="html_form_action.asp" method="get"> <fieldset> <legend>Личные данные</legend> Имя: <input type="text" name="firstname" value="Билл"> <br> Фамилия: <input type="text" name="lastname" value="Гейтс"> <br> Пол: <input type="radio" name="Sex" value="Male" checked="checked"> Мужской <input type="radio" name="Sex" value="Female"> Женский </fieldset> <fieldset> <legend>Данные о работе</legend> Место работы: <input type="text" name="work" value="Microsoft"> <br> Должность: <input type="text" name="status" value="Президент"> </fieldset>

</body> </html>

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

Командные кнопки

Командная кнопка отправки (type=submit) используются для выполнения пересылки данных формы на сервер. Метод отправки и адрес файла, обрабатывающего полученную информацию задаются в теге <form> при помощи атрибутов method и action. Командная кнопка сброса (type=reset) возвращает форму к исходному состоянию (очищает форму). При этом данные не передаются.

В следующем примере показана форма поиска с двумя кнопками отправки и сброса.

<form name="input" action="html_form_action.asp" method="get"> Найти: <input type="text" name="search" size=25> <br> <input type="submit"> <input type="reset">

</form>

</body> </html>

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

Если ввести в текстовое поле какие-то символы и нажать кнопку "Подача запроса", то введенная информация будет послана на страницу с именем "html_form_action.asp". При нажатии на кнопку "Сброс" текстовое поле очистится.

Надписи на кнопках "Подача запроса" и "Сброс" установлены по умолчанию. Для их изменения необходимо использовать атрибут value.

Кроме кнопок отправки и сброса существует также возможность добавлять пользовательские кнопки (type=button), которые могут использоваться для выполнения процедур (скриптов) непосредственно на Web-странице.

Оформление форм стандартными средствами HTML

Несмотря на простоту использования тегов группировки <fieldset>, их возможности по оформлению форм весьма ограничены. Чаще всего для оформления внешнего вида форм используются стандартные средства HTML. В следующем примере показано, как с помощью таблицы поля формы выровнены друг под другом, а заголовок формы и кнопка отправки размещены по центру формы. Сама форма визуально выделена желтым цветом.

<form name="input" action="html_form_action.asp" method="get"> <table bgcolor="#FFFF99"> <tr> <th colspan="2" align="center">Личные данные:</td> </tr> <tr> <td align="right">Имя:</td> <td align="left"><input type="text" name="firstname" value="Билл"></td> </tr> <tr> <td align="right">Фамилия:</td> <td align="left"><input type="text" name="lastname" value="Гейтс"></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="отправить"></td> </tr> </table> </form>

</body> </html>

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

Отправка e-mail из формы

Вторая форма представляет собой форму заказа электронной рассылки ИНТУИТА, заполненная форма, отправляется по электронной почте для последующей обработки.

<form action="MAILTO:info@intuit.ru" method="post" enctype="text/plain"> <h3>Подписка на новостную рассылку ИНТУИТ</h3> Имя:<br> <input type="text" name="name" value="ваше имя" size="20"> <br> Mail:<br> <input type="text" name="mail" value="ваш е-mail" size="20"> <br> Я хочу получать: <br> <input type="checkbox" name="news"> Новости о жизни ИНТУИТА <br> <input type="checkbox" name="courses"> Информацию о новых курсах <br> <input type="checkbox" name="books"> Информацию о новых изданиях <br> Комментарий:<br> <textarea rows="5" cols="30"> </textarea> <hr> <input type="submit" value="Послать"> <input type="reset" value="Сброс"> </form>

</body> </html>

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

Переключатели

Переключатели или радиокнопки (type=radio) определяют поля выбора одного значения из нескольких доступных. Поля этого типа часто используются в диалоговых окнах. Для каждой позиции переключателя создается свой тег <input type=radio>. Группируются переключатели при помощи одинакового имени, задаваемого атрибутом name.

<html> <body

<form> Укажите Ваш пол: <br> <input type="radio" name="sex" value="male"> мужчина <br> <input type="radio" name="sex" value="female"> женщина </form>

</body> </html>

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

Необходимо отметить, что в отличие от текстового поля и поля пароля атрибут value задает значение, которое будет передано серверу для дальнейшей обработки в случае выбора данного переключателя. Для выбора по умолчанию одного из возможных значений группы переключателей используется атрибут checked.

<form> Укажите Ваш пол: <br> <input type="radio" name="sex" value="male" checked="checked"> мужчина <br> <input type="radio" name="sex" value="female"> женщина </form>

</body> </html>

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

В данном примере по умолчанию выбран мужской пол:

Подписка на новостную рассылку ИНТУИТ

Имя:

Mail:

Я хочу получать:

Новости о жизни ИНТУИТА

Информацию о новых курсах

Информацию о новых изданиях

Комментарий:

Поле пароля

Поле пароля (type=password) создает защищенное поле ввода, которое дает возможность пользователю, заполняющему форму ввести текст, но в отличие от обычного текстового поля, вводимые данные при отображении на мониторе заменяются звездочками или точками.

Следующий пример демонстрирует простейшую форму для ввода имени пользователя и пароля.

<form> Имя пользователя: <input type="text" name="user" value="Елена"> <br> Пароль: <input type="password" name="password" value="tktyf"> </form>

</body> </html>

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

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

Поле выбора файла

Поле выбора файла (type=file) создает поле для выбора файла, который будет загружен на сервер вместе с информацией формы. Рядом с полем ввода отображается командная кнопка "Обзор…", открывающая стандартное диалоговое окно выбора файла.

<form> Прикрепить файл: <br> <input type="file" size="50"> </form>

</body> </html>

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

Для поля выбора файла по аналогии с текстовым полем можно использовать атрибуты size, maxlength, value.

Поля ввода

Большинство элементов ввода и управления в форме можно описать при помощи тега <input>, обязательными для которого являются атрибуты name (приписывает данному элементу ввода уникальное имя, использующееся для дальнейшей обработки формы) и type (определяет тип элемента управления или ввода).

Раскрывающийся список выбора

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

В следующем примере создан простой раскрывающийся список выбора ноутбука по производителю.

<form> Выбор ноутбука по производителю: <select name="notebook"> <option value="acer">Acer <option value="asus">Asus <option value="compaq">Compaq <option value="hp">HP <option value="sony">Sony <option value="toshiba">Toshiba </select> </form>

</body> </html>

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

Необходимо заметить, что по умолчанию выбирается первое значение из списка. При помощи атрибута selected тега <option> это значение можно изменить. Следующий пример показывает раскрывающийся список выбора размера экрана ноутбука с предварительно установленным значением "15.4".

<form> Выбор размера экрана ноутбука <select name="tft"> <option value="tft-12">12" <option value="tft-13">13" <option value="tft-14">14" <option value="tft-15">15" <option value="tft-15-4" selected="selected">15.4" <option value="tft-17">17" </select> </form>

</body> </html>

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

Развернутый список выбора

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

<form> Выбор ноутбука по производителю: <select name="notebook" multiple> <option value="aser">Aser <option value="asus">Asus <option value="compaq">Compaq <option value="hp">HP <option value="sony">Sony <option value="toshiba">Toshiba </select> </form>

</body> </html>

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

Необходимо отметить, что для списков с множественным выбором значение атрибута size по умолчанию устанавливается равным 4, кроме того, ни одно из значений не является выбранным по умолчанию. В следующем примере показана форма с развернутым списком высотой в 6 пунктов с предварительно заданными значениями "Compaq" и "Sony".

<form> Выбор ноутбука по производителю: <select name="notebook" multiple size=6> <option value="aser">Aser <option value="asus">Asus <option value="compaq" selected="selected">Compaq <option value="hp">HP <option value="sony" selected="selected">Sony <option value="toshiba">Toshiba </select> </form>

</body> </html>

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

Регистрация нового пользователя

</body> </html>

<form name="input" action="html_form_action.asp" method="post"> <table bgcolor="#dddddd"> <tr> <th colspan="2" align="center">Регистрация нового пользователя</th> </tr> <tr> <td colspan="2" align="center">Обязательные поля выделены красным цветом<br><br></td> </tr> <tr> <td align="right"><font color="red">Ник (псевдоним):</td> <td align="left"><input type="text" name="nik" size="27"></td> </tr> <tr> <td align="right"><font color="red">E-mail</td> <td align="left"><input type="text" name="e_mail" size="27"></td> </tr> <tr> <td align="right"><font color="red">Пароль (не менее 6 сим.):</td> <td align="left"><input type="password" name="password" size="27"></td> </tr> <tr> <td align="right"><font color="red">Подтвердите пароль:</td> <td align="left"><input type="password" name="f_password" size="27"></td> </tr> <tr> <td colspan="2"><hr></td> </tr> <tr> <td align="right">Фамилия</td> <td align="left"><input type="text" name="name_f" size="27"></td> </tr> <tr> <td align="right">Имя</td> <td align="left"><input type="text" name="name_i" size="27"></td> </tr> <tr> <td align="right">Отчество</td> <td align="left"><input type="text" name="name_o" size="27"></td> </tr> <tr> <td align="right">Дата рождения:</td> <td align="left"> <select name="day"> <option>1 <option>2 <option>3 <option>4 <option>5 <option>6 <option>7 <option>8 <option>9 <option>10 <option>11 <option>12 <option>13 <option>14 <option>15 <option>16 <option>17 <option>18 <option>19 <option>20 <option>21 <option>22 <option>23 <option>24 <option>25 <option>26 <option>27 <option>28 <option>29 <option>30 <option>31 </select> <select name="month"> <option>января <option>февраля <option>марта <option>апреля <option>мая <option>июня <option>июля <option>августа <option>сентября <option>октября <option>ноября <option>декабря </select> <select name="year"> <option>1980 <option>1981 <option>1982 <option>1983 <option>1984 <option>1985 <option>1986 <option>1987 <option>1988 <option>1989 <option>1990 </select> </td> </tr> <tr> <td align="right">Пол:</td> <td align="left"> <input type="radio" name="sex" value="male">Мужской <input type="radio" name="sex" value="female">Женский </td> </tr> <tr> <td align="right">Город проживания:</td> <td align="left"><input type="text" name="state" size="27"></td> </tr> <tr> <td align="right" valign="top">Образование:</td> <td align="left"> <input type="radio" name="edu" value="h">Высшее<br> <input type="radio" name="edu" value="hh">Незаконченное высшее<br> <input type="radio" name="edu" value="ss">Среднее специальное<br> <input type="radio" name="edu" value="s">Среднее </td> </tr> <tr> <td colspan="2"><hr></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Зарегистрироваться"> <input type="reset" value="Очистить форму"> </td> </tr> </table> </form>

</body> </html>

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

В данном примере представлена форма регистрации нового пользователя. Отличительной особенностью данной формы является организация ввода даты рождения, построенная с использованием трех выпадающих списков. Хотя реализация такого ввода дат на первый взгляд более трудоемка в процессе создания Web-страницы (для сравнения, в предыдущем примере для организации поля ввода даты потребовалась всего одна строка), но она оправдывает себя за счет сведения к минимуму ошибок при вводе информации. Такая схема организации ввода широко используется при вводе и других данных, таких как, например, страна и город проживания (в данном примере не реализовано).

Следует обратить внимание и на присутствие в форме двух групп переключателей, которые отвечают за ввод пола и образования пользователя.

Теги формТегОписание

<form>	Определяет форму для ввода пользователя
<input>	Определяет поле ввода
<textarea>	Определяет текстовую область (элемент управления для ввода многострочного текста)
<label>	Определяет метку для элемента управления
<fieldset>	Определяет набор полей
<legend>	Определяет заглавие для набора полей
<select>	Определяет список выбора (раскрывающееся поле)
<optgroup>	Определяет группу вариантов выбора
<option>	Определяет вариант в раскрывающемся поле
<button>	Определяет кнопку
<isindex>	Не рекомендуется. Используйте вместо этого <input>

Регистрация в системе

<form name="input" action="html_form_action.asp" method="post"> <table bgcolor="#9999FF"> <tr> <th colspan="2" align="center">Регистрация в системе</td> </tr> <tr> <td align="right">Имя:</td> <td align="left"><input type="text" name="name"></td> </tr> <tr> <td align="right">Пароль:</td> <td align="left"><input type="password" name="password"></td> </tr> <tr> <td colspan="2" align="center"><input type="checkbox">Запомнить пароль</td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Вход"></td> </tr> </table> </form>

</body> </html>

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

В этом примере представлена типовая форма входа в систему авторизированного пользователя. Форма состоит из поля ввода имени, поля ввода пароля, флажка сохранения пароля и кнопки входа.

Необходимо отметить, что при работе с паролями следует использовать только метод post. При использовании метода get пароль будет передаваться для обработки в открытом виде. Для проверки этого достаточно в данном примере заменить метод post на get, запустить пример, заполнить поля (например, имя пользователя: Bill, пароль superstar) и нажать кнопку "Вход". В этом случае в адресной строке браузера появиться адрес: {ваш рабочий каталог}/html_form_action.asp?name=Bill&password=superstar.

Примечание: необходимо, чтобы в Вашем рабочем каталоге находился файл с именем "html_form_action.asp" (это может быть даже пустой файл).

Списки выбора

Списки выбора бывают двух типов: раскрывающиеся списки (выпадающие меню) и списки с множественным выбором. Независимо от типов списков описываются они одинаково с помощью пары тегов <select> </select>. Отдельные элементы списка задаются с использованием тега <option>. Тип списка определяется при помощи атрибутов тега <select>.

Атрибут name задает имя поля для отправки выбранных пунктов списка на сервер. Атрибут multiple разрешает множественный выбор. Атрибут size определяет, какое количество пунктов списка будет одновременно отображено на экране. При этом, если атрибут multiple не задан и size=1, то на экране отображается раскрывающийся список, если же задан атрибут Multiple или значение size больше 1, то список отображается развернутым.

Текстовая область

В отличие от текстового поля <input type=text> текстовая область позволяет вводить многострочный текст большого объема. Такие области часто используются при вводе сообщений, комментариев.

Текстовое поле описывается при помощи тегов <textarea> </textarea>, между которыми можно разместить предварительно отформатированный стандартный текст. Атрибуты cols и rows задают размер видимой области текстового поля.

В следующем примере создано текстовое поле с предварительно введенным текстом.

<textarea rows="7" cols="30"> В данном примере мы создали текстовую область с шириной в 30 символов и высотой в 7 строк. Заданное значение высоты не ограничивает общий объем вводимого текста, а влияет только на размер отображаемой на экране текстовой области. Для просмотра всего текста необходимо воспользоваться полосой прокрутки. </textarea>

</body> </html>

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

Текстовые поля

Текстовое поле (type=text) определяет однострочное поле ввода и используется, когда необходимо, чтобы пользователь ввел в форму данные в произвольной форме но ограниченные по объему (слова, словосочетания, числа и т.д.).Следующий пример демонстрирует простейшую форму для ввода имени и фамилии.

<form> Имя: <input type="text" name="firstname"> <br> Фамилия: <input type="text" name="lastname"> </form>

</body> </html>

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

В большинстве браузеров по умолчанию ширина текстового поля равна 20 символам. Для изменения этого значения используется атрибут size. В следующем примере поле для ввода имени ограничено 10 символами.

<form> Имя: <input type="text" name="firstname" size="10"> <br> Фамилия: <input type="text" name="lastname"> </form>

</body> </html>

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

Здесь необходимо отметить, что атрибут size ограничивает только видимую область ввода данных, а не длину вводимой строки. Для этой цели используется атрибут maxlength. В следующем примере максимальное количество символов для ввода имени ограничено тремя.

<form> Имя: <input type="text" name="firstname" maxlength="3"> <br> Фамилия: <input type="text" name="lastname"> </form>

</body> </html>

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

При вводе в поле имени слова "Елена" форма воспримет только первые три символа имени:

Кроме того, при использовании текстовых полей возможно задать значения по умолчанию. Для этого используется атрибут value. Применение этого атрибута показано на следующем примере:

<form> Имя: <input type="text" name="firstname" value="Билл"> <br> Фамилия: <input type="text" name="lastname" value="Гейтс"> </form>

</body> </html>

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

Необходимо отметить, что применение атрибутов для различных типов полей вывода и управления может отличаться. Так, например, атрибут size для текстовых полей ввода (type="text" или type="password") указывает максимальное количество символов, отображаемых в поле, а для прочих элементов – занимаемый по горизонтали размер в пикселях.

Внешний вид форм

Существует различные способы оформления внешнего вида форм. Один из них основан на использовании пары тегов <fieldset> </fieldset>, которые позволяют объединить тематически близкие и рядом расположенные поля формы в группу и выделить ее визуально. Другой способ основан на применении стандартных средств форматирования HTML, включая цветовое и шрифтовое оформление, графику, таблицы и т.п.

Запрос документа

<form name="input" action="html_form_action.asp" method="get"> <table bgcolor="#dddddd"> <tr> <th colspan="2" align="center">Запрос документа</td> </tr> <tr> <td align="right">Тип документа:</td> <td align="left"> <select name="do_type"> <option value="mail">Письмо <option value="order">Приказ <option value="message">Служебная записка </select> </td> </tr> <tr> <td align="right">Дата регистрации с</td> <td align="left"><input type="text" name="date_begin" size="21" value="дд.мм.гггг"></td> </tr> <tr> <td align="right">по</td> <td align="left"><input type="text" name="date_end" size="21" value="дд.мм.гггг"></td> </tr> <tr> <td align="right">Регистрационный номер:</td> <td align="left"><input type="text" name="number" size="21"></td> </tr> <tr> <td colspan="2"><hr></td> </tr> <tr> <td align="right" valign="top">Ключевые слова:</td> <td align="left"> <textarea cols="17" rows="5"> </textarea> </td> </tr> <tr> <td colspan="2"><hr></td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="Отправить"> <input type="reset"> </td> </tr> </table> </form>

</body> </html>

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

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

Атрибут Alt

В ряде случаев графическое изображение на Web-странице не может быть отражено. Это может происходить при просмотре страниц с использованием текстовых браузеров, при запрете на отображение графики в целях увеличения скорости загрузки и снижения расходов на Интернет, а также в ряде других случаев. При этом смысл страницы может быть существенно искажен, а при использовании графических меню и кнопок навигация по сайту будет значительна затруднена. Во избежание этого в HTML используется атрибут alt, который задает цепочку символов (максимальная длина 1024 символа), отображаемую в браузере вместо изображения и в произвольной форме описывающую его (заменяющий текст).

Следующий пример демонстрирует синтаксис применения атрибута alt.

<img src="logo.gif" width="285" height="52" alt="Логотип Интуита"> <br> Для демонстрации работы атрибута alt необходимо в свойствах обозревателя запретить использование графики на странице. <br> Обратите внимание, что даже при отображенной графике замещающий текст появляется на экране при наведении указателя мыши на изображение. Благодаря этому атрибут alt можно использовать и в качестве своеобразной подписи к рисунку.

</body> </html>

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

Использование атрибута alt считается признаком хорошего HTML-тона, так как это позволяет улучшить вывод и полезность документа для людей, который используют браузеры только для вывода текста. Кроме того, использование атрибута ALT можно считать обязательным для графических ссылок. В следующем примере приведен фрагмент графического меню. В примере специально даются ссылки на несуществующие графические файлы (отпадает необходимость запрета на отображение рисунков браузером для понимания работы примера).

В первом варианте атрибут alt не используется, пользователь видит перед собой три прямоугольника, о назначении которых он может только догадываться. <hr> <img src="home.gif" width="80" height="30"> <img src="mail.gif" width="80" height="30"> <img src="map.gif" width="80" height="30"> <hr> <br> Использование атрибута alt во втором варианте позволяет эффективно использовать ссылки меню и в отсутствие изображений. <hr> <img src="home.gif" width="80" height="30" alt="На главную страницу"> <img src="mail.gif" width="80" height="30" alt="Отправить письмо"> <img src="map.gif" width="80" height="30" alt="Карта сайта"><br> <hr>

</body> </html>

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

Основы работы с HTML

Формат GIF был разработан коммерческой Online-службой CompuServe для передачи графики по сети между различными платформами. GIF поддерживает до 256 цветов, что является существенным ограничением формата. GIF практически непригоден для передачи фотографических изображений.

В то же время формат GIF обладает рядом свойств, определивших его широкое применение при разработке Web-страниц:

Прозрачность. Изображения в формате GIF могут иметь прозрачные области, что позволяет отойти от стандартных прямоугольных форм и создавать элементы страницы произвольной формы.Чередование строк. Графический файл может быть записан таким образом, что при отображении сначала будет загружаться каждая четвертая строка, растянутая на три соседних. Естественно, качество отображения будет достаточно низкое. Затем, по мере загрузки последующих строк, изображение примет окончательный вид. Такая схема позволяет пользователю еще до окончательной загрузки графического файла понять, что именно представлено на изображении.Анимация. Форматом GIF предусмотрена возможность создания анимированных изображений. Фактически это несколько изображений, записанных в один файл и чередующихся с заданным интервалом времени.

Область применения GIF-файлов ограничивается и применяемым алгоритмом сжатия изображений, чья эффективность зависит от разнообразия цветов в изображении, наличия одноцветных областей. Наибольшую экономию объема файла дают изображения с небольшим количеством цветов и большими одноцветными областями. Поэтому формат GIF широко используется для отображения графических меню и кнопок, а также для создания технических иллюстраций (графики, схемы, диаграммы и т.п.). В то же время использование формата GIF для отображения полноцветных фотографий практически не находит применения по причине малого количества передаваемых цветов и низкой эффективности алгоритма сжатия для таких изображений.

Графические форматы

Изначально HTML поддерживал работу с двумя графическими форматами: GIF и JPEG, в последнее время все большее распространения находит формат PNG. Каждый из форматов имеет свои достоинства и недостатки, которые определяют область его применения.

Изменение размера изображения

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

При помощи атрибутов height и width (высота и ширина, соответственно) можно задать размеры отображения графического файла на Web-странице.

В первом случае изображение выводится с сохранением своих исходных размеров (253*190 пикселей). <br> <img src="photo.png"> <br> Во втором варианте высота изображения уменьшена до 100 пикселей. Обратите внимание, хотя явно задан только атрибут height, браузер автоматически отмасштабировал изображение и по ширине с сохранением исходных пропорций. <br> <img src="photo.png" height="100"> <br> В третьем варианте принудительно заданы оба атрибута, при этом высота уменьшена до 100 пикселей, а ширина оставлена на прежнем уровне. В этом случае автоматического масштабирования не производится, и изображение сжимается по вертикали. <br> <img src="photo.png" height="100" width="253">

</body> </html>

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

Автоматическое масштабирование с заданием только одного из атрибутов довольно часто используется при необходимости вывода изображений различного формата в столбец (при этом для всех изображений задается одинаковым атрибут width) или в строку друг за другом (height).

Значение атрибутов height и width задается не только в пикселях, но и в процентах. Но в этом случае речь идет о выделенной под размещение изображения области. Это может быть все окно браузера или ячейка таблицы.

Ширина изображения в данном примере задана равной 100%. Изменяя размер окна браузера можно заметить, как изображение автоматически масштабируется, занимая всю ширину окна. <br> <img src="photo.png" width="100%"> <br>

</body> </html>

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

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

При размещении изображений на Web-странице желательно придерживаться следующих рекомендации:

При размещении изображения на Web-странице независимо от исходного размера изображения желательно в явном виде задавать размеры области для отображения при помощи атрибутов height и width. В этом случае браузер еще до полной загрузки изображения получает информацию о его размерах и заранее резервирует место, благодаря чему весь текст на странице может быть размещен и отформатирован еще до загрузки изображений. Желательно избегать предлагаемых браузерами возможностей масштабирования изображения (за исключением изображений заднего плана) и отображать полноразмерную графику. Для этого изображения должны быть соответствующим образом обработаны при помощи специальных графических пакетов (например, Adobe Photoshop). Это позволяет избегать искажений изображения вследствие масштабирования, уменьшает объем загружаемой информации при использовании изображения большего размера. При необходимости размещения на Web-странице изображений большого размера (фотографии, сложные схемы, репродукции картин и т.п.) на первой странице желательно размещать уменьшенные копии изображений, при нажатии на которые будет показываться полноразмерное изображение. В этом случае необходимо использовать два различных варианта этого изображения: полноразмерное и изображение-иконку.

Можно пояснить эти рекомендации на следующем примере.

<html> <body>

В первом варианте в качестве изображения-иконки используется большое изображение, размер которого изменен при помощи атрибутов width и height. При нажатии на него исходная фотография будет отображена в полный размер. <br> <a href="photo_big.png"><img src="photo_big.png" width="80" height="60" border="0"></a> <br> Во втором варианте в качестве изображения-иконки используется специально подготовленное малое изображение, значения атрибутов width и height заданы для обеспечения правильного форматирования Web-страницы на этапе частичной загрузки. <br> <a href="photo_big.png"><img src="photo_small.png" width="80" height="60" border="0"></a> <br> Несмотря на то, что оба этих варианта с внешней точки зрения практически идентичны, во втором варианте объем загружаемой информации значительно ниже. Так объем большого изображения "photo_big.png" составляет более 1 Мб, в то время как "photo_small.png" - только 14 Кб. <br> Очевидно, что при малой скорости подключения в Интернет пользователь может просто не дождаться конца загрузки страницы.

</body> </html>

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

JPEG – Joint Photographic Experts Group

Формат JPEG был разработан для передачи фотографий между различными платформами. Благодаря поддержке 24-битовой цветовой палитры (миллионы цветов) формат JPEG получил широкое распространение для отображения иллюстраций высокого качества. При этом применяемый в JPEG алгоритм сжатия позволяет варьировать размер загружаемого файла в зависимости от требуемого качества отображения иллюстрации.

Кроме того, формат JPEG поддерживает опцию прогрессивный JPEG, которая во многом похожа со свойством чередования строк формата GIF, но реализована на совершенно других принципах. В файл JPEG записывается несколько иллюстраций полного размера, но различного уровня качества. Сначала отображается рисунок низкого качества (и, соответственно, малого объема), затем догружаются все более качественные изображения. При этом общий объем загружаемого файла возрастает несущественно по сравнению с оригинальным JPEG.

Карты изображений

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

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

В HTML предусмотрены два варианта обработки карт изображений: обработка карты изображения непосредственно браузером и передача на сервер координат указателя мыши для дальнейшей обработки.

Карты изображений, обрабатываемые браузером

Автономные (обрабатываемые браузером) карты изображений описываются с помощью атрибута usemap тега <img>:

Где "figure_1.png" - имя файла, содержащего изображение, "#coordinates" - ссылка на часть HTML-документа, описывающего координатные области.

Координатные области карты изображений определяются при помощи тегов <map> и <area>.

Тег <area> описывает координаты отдельной области изображения, параметры которой и адрес гиперссылки задаются при помощи атрибутов shape, coords и href.

Атрибут shape определяет форму области-ссылки. По умолчанию ему присваивается значение shape="rect" - прямоугольник. Также область может быть описана в форме окружности (shape="circle") или многоугольника (shape="poly").

Атрибут coords определяет размеры области. В зависимости от типа размечаемой области может меняться значение этого атрибута. Так для shape="rect" указываются две пары координат (левого верхнего и правого нижнего угла прямоугольника) в пикселях. Для shape="circle" указываются координаты центра окружности и ее радиус, а для shape="poly" последовательно указываются координаты вершин многоугольника.

Атрибут href задает URL-адрес ссылки для перехода в случае щелчка мышью на выбранной области.

Заданные при помощи тегов <area> координатные области изображения ограничиваются при помощи тегов <map>-</map>.

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

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

Для корректной работы следующего примера необходимо создать в рабочей папке файлы rect.html, circle.html, polygon.html. Например, файл rect.html:

<html> <body> Вы выбрали прямоугольник </body> </html>

Обратите внимание, что атрибут alt (заменяющий текст) может использоваться как для всего изображения, так и для каждой его области.

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

<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> </map> </body> </html>

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

В следующем примере порядок описания координатных областей приведен в соответствие с изображением на экране.

<html> <body> <img src="figure_2.png" width="297" height="210" border="0" usemap="#coordinates"> <map name="coordinates"> <area shape="circle" coords="130,110,40" href="circle.html" alt="Круг"> <area shape="poly" coords="105,138,217,138,161,42" href="polygon.html" alt="Полигон (треугольник)"> <area coords="84,173,224,109" href="rect.html" alt="Прямоугольник"> </map> </body> </html>

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

Карты изображений, обрабатываемые на сервере

Карты изображений, обрабатываемые на сервере описываются с помощью атрибута ismap тега <img>, располагающегося между тегами <a> - </a>, например:

Где "tryhtml_ismap.htm" – файл на сервере, описывающий координатные области изображения.

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

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

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

Обрамление изображения

Изображение в HTML может быть обрамлено прямоугольной рамкой. Для этого используется атрибут border, который задает ширину рамки вокруг изображения в пикселях.

<p><img src="logo.gif" align="left"> Изображение без рамки (по умолчанию для простых графических изображений).</p>

<p><img src="logo.gif" align="left" border="5"> В данном варианте толщина рамки установлена в 5 пикселей. </p>

</body> </html>

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

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

<p><a href="http://www.intuit.ru"><img src="logo.gif" align="left"></a> Несмотря на то, что значение border не задано, изображение-гиперссылка выводится обрамленным рамкой шириной 2 пикселя (значение по умолчанию)</p>

<p><a href="http://www.intuit.ru"><img src="logo.gif" align="left" border="0"></a> В данном варианте рамка вокруг гиперссылки убрана благодаря принудительному присвоению параметру border нулевой толщины. </p>

</body> </html>

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

В последнее время атрибут border при разработке Web-сайтов в подавляющем большинстве случаев используется именно для отмены рамки вокруг изображения-гиперссылки.

PNG – Portable Network Graphics

В последнее время все большее распространение получает формат PNG, который был разработан для сетевых иллюстраций с целью заменить форматы JPEG и GIF и объединивший в себе все их преимущества.

Формат PNG поддерживает 24-, 32- и 48-битовую цветовую палитру, 8- и 16- битовую палитру серого, 8-битовую пользовательскую палитру. Реализованный в PNG алгоритм сжатия позволяет сжимать изображения лучше чем GIF (от 5 до 25%). Для него реализован механизм чересстрочного вывода первого изображения с использованием двумерной чересстрочности, что позволяет обеспечить минимальные затраты времени на вывод первого изображения.

Кроме того, в PNG реализован эффективный механизм контроля целостности файла, позволяющего обнаружить ошибки при передаче по сети. Хотя PNG и поддерживает прозрачность, такие изображения некорректно отображаются MS Internet Explorer, он не поддерживает прозрачность PNG, поэтому если вы хотите, чтобы во всех браузерах рисунок с прозрачным фоном отображался корректно, лучше использовать формат GIF.

Обратите внимание, что синтаксис вставки

Изображение:

Динамическое изображение:

Обратите внимание, что синтаксис вставки динамического изображения не отличается от синтаксиса для обычного изображения.

Размещение изображений

Для размещения изображений в HTML используется тег <img> с использованием обязательного атрибута src (от source – источник), который указывает URL-адрес загружаемого файла с изображением.

Синтаксис определения изображения:

URL указывает на то место, где хранится изображение. В следующем примере на Web-странице выводится изображение логотипа интернет университета информационных технологий, расположенное в каталоге "img" на сервере "www.intuit.ru" (URL: http://www.intuit.ru/img/logo.gif).

</body> </html>

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

Браузер размещает изображение там, где в документе появляется тег <img>. Если разместить тег <img> между двумя параграфами, то браузер покажет первый параграф, затем изображение, а затем второй параграф.

<p>Первый параграф</p> <img src="http://www.intuit.ru/img/logo.gif"> <P>Второй параграф</p>

</body> </html>

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

Если же разместить тег <img> внутри параграфа, то изображение будет отображено в одной строке с текстом.

<p>В этом примере изображение <img src="http://www.intuit.ru/img/logo.gif"> размещено прямо внутри параграфа</p>

</body> </html>

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

Формат изображения, его расположение и ряд других параметров задается при помощи атрибутов тега <img>.

Создание графических меню

Другим способом создания графических меню кроме карт изображений является использование предварительно нарезанных изображений отформатированных при помощи таблиц. В этом случае первоначально готовится общий дизайн элемента web-страницы (или страницы целиком), затем на ней размечаются прямоугольные области, соответствующие отдельным подэлементам страницы (кнопка меню, меню целиком и т.п.), в соответствии с которыми производится нарезка изображения. Следующий пример демонстрирует способ создания графического меню.

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

Чтобы понять, как нарезано изображение, достаточно при отображении таблицы установить параметр border:

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

Стандартное меню "Пуск" Windows

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

На примере меню Пуск" Windows XP представлен способ организации сложных несимметричных графических меню с использованием вложенных таблиц. В данном случае используется внешняя таблица для разделения изображения на верхнюю, нижнюю, левую и правую области, и три вложенных таблицы для реализации левого, правого и нижнего графического меню.

Теги изображенийТегОписание

<img>	Определяет изображение
<map>	Определяет карту ссылок
<area>	Определяет активную область внутри карты ссылок

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

На примере меню Пуск" Windows XP представлен способ организации сложных несимметричных графических меню с использованием вложенных таблиц. В данном случае используется внешняя таблица для разделения изображения на верхнюю, нижнюю, левую и правую области, и три вложенных таблицы для реализации левого, правого и нижнего графического меню.

Теги изображенийТегОписание

<img>	Определяет изображение
<map>	Определяет карту ссылок
<area>	Определяет активную область внутри карты ссылок

Вставка изображений

<p> Изображение: <img src="logo.gif" width="285" height="52"> </p>

<p> Динамическое изображение: <img src="100x100_4.gif" width="100" height="100"> </p>

<p> Обратите внимание, что синтаксис вставки динамического изображения не отличается от синтаксиса для обычного изображения. </p>

</body> </html>

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

Этот пример показывает, как вывести изображения на Web-странице.

Вставка изображений из различных мест

<p> Изображение из другой папки: <img src="../../../../img/dvd.jpg" width="160" height="237"> </p>

<p> Изображение с сайта ИНТУИТ: <img src="http://www.intuit.ru/img/logo.gif" width="285" height="52"> </p>

</body> </html>

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

Этот пример показывает, как вывести на своей Web-странице изображение из другой папки или с другого сервера.

Выравнивание изображений

Для выравнивания изображений используется атрибут align.

align=top – изображение выравнивается по верхнему краю текущей текстовой строки, не меняя позиции по горизонтали. При этом речь идет как о тексте, так и о графике;align=middle – изображение центрируется по вертикали на базовой линии текущей текстовой строки, не меняя позицию по горизонтали;align=bottom – нижний край изображения выравнивается по горизонтали на базовой линии текущей текстовой строки;align=left – изображение смещается к левому краю рабочей зоны, последующий текст сразу же начинает "обтекать" графику; – то же что и для left, только изображение смещается к правой части рабочей зоны.

Следующий пример показывает различные варианты выравнивания изображений в тексте.

<p>Изображение выравнено по верху <img src="http://www.intuit.ru/img/logo.gif" align="top"> при помощи align="top"</p>

<p>Значение "middle" атрибута align <img src="http://www.intuit.ru/img/logo.gif" align="middle"> центрирует изображение по вертикали</p>

<p>Выравнивание изображения по нижнему краю <img src="http://www.intuit.ru/img/logo.gif" align="bottom"> (align="bottom") используется по умолчанию (можно сравнить с предыдущим примером).</p>

<p>В этом примере изображение <img src="http://www.intuit.ru/img/logo.gif" align="left"> смещено влево и начиная со следующей строчки текст как бы обтекает вставленный рисунок. При таком способе выравнивания желательно помещать изображение в начале параграфа.</p>

<p><img src="http://www.intuit.ru/img/logo.gif" align="right"> Изображение прижато к правому краю рабочей области (align="right"). Текст занимает все свободное пространство слева от изображения обтекая его.</p>

</body> </html>

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

Кроме того, для форматирования изображений внутри текста используются атрибуты hspace и vspace, которые определяют интервал между графическим изображением и обтекающим текстом по горизонтали и вертикали соответственно. Размер отступов задается в пикселях.

<p><img src="logo.gif" align="left"> В данном варианте используются установленные по умолчанию значения hspace и vspase. Изображение выравнено по левому краю при помощи align="left".</p>

<p><img src="logo.gif" align="left" hspace="20" vspace="20"> В данном варианте значения hspace и vspace установлены равными 20. Обратите внимание, что эти параметры влияют не столько на отступ от текста до изображения, сколько на величину свободной зоны вокруг изображения вообще. В данном случае изображение сместилось вправо вниз. </p>

<p>Примечание: Для лучшего понимания работы атрибутов hspace и vspase в данном примере уменьшите размер окна Вашего браузера. </p>

</body> </html>

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

Миллионов различных цветов

Сочетание значений красного, зеленого и синего цветов от 0 до 255 дает в целом более 16 миллионов различных цветов (256 x 256 x 256).

Более современные мониторы могут выводить не менее 16384 различных цветов.

Если посмотреть на таблицу цветов приведенную в примере, то можно увидеть результат изменения интенсивности красного цвета от 0 до 255, при значениях зеленого и синего цветов равных нулю.

</body> </html>

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

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

Эта палитра из 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-кода

Background

Атрибут background определяет изображение для фона страницы HTML. Значением этого атрибута является адрес URL изображения, которое желательно использовать. Если изображение меньше окна браузера, то изображение будет циклически повторяться, пока не заполнит все окно браузера.

Адрес URL может быть относительным (как в первой строке выше) или абсолютным (как во второй строке выше).

Примечание: Если вы хотите использовать фоновое изображение, необходимо помнить о следующем:

Не будет ли фоновое изображение слишком увеличивать время загрузки?Будет ли фоновое изображение хорошо сочетаться с другими изображениями на странице?Будет ли фоновое изображение хорошо сочетаться с цветами текста на странице?Будет ли фоновое изображение хорошо выглядеть, когда оно циклически повторяется на странице?Не будет ли фоновое изображение отвлекать внимание от текста?

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

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

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

Bgcolor

Атрибут bgcolor определяет цвет фона для страницы HTML. Значение этого атрибута может быть шестнадцатеричным числом, значением RGB, или названием цвета:

Все приведенные выше строки задают цвет фона как черный. Наиболее часто используется первый способ задания цвета.

Цвета в HTML

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

Дополнительные примеры

Хорошее фоновое изображение

<html> <body background="background.jpg"> <h3>Фоновое изображение</h3> <p>В качестве фона HTML можно использовать как файлы gif, png, так и файлы jpg.</p> <p>Если изображение меньше страницы, то изображение будет циклически повторяться.</p> </body> </html>

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

Пример фонового изображения и цвета текста, которые позволяют легко читать текст на странице.

Хорошее фоновое изображение

<html> <body background="good.jpg"> <h3>Фоновое изображение</h3> <p>В качестве фона HTML можно использовать как файлы gif, png, так и файлы jpg.</p> <p>Если изображение меньше страницы, то изображение будет циклически повторяться.</p> </body> </html>

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

Пример фонового изображения и цвета текста, которые позволяют легко читать текст на странице.

Плохое фоновое изображение

<html> <body background="bad.jpg"> <h3>Фоновое изображение</h3> <p>В качестве фона HTML можно использовать как файлы gif, png, так и файлы jpg.</p> <p>Если изображение меньше страницы, то изображение будет циклически повторяться.</p> </body> </html>

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

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

Фон

Тег <body> имеет два атрибута, которые позволяют определить фон. Фон можно задавать с помощью цвета или изображения.

Фоновое изображение

В качестве фона HTML можно использовать как файлы gif, png, так и файлы jpg.

Если изображение меньше страницы, то изображение будет циклически повторяться.

Хороший цвет фона и текста

Пример комбинации цвета фона и цвета текста, которая позволяет без проблем читать текст на странице.

Имена цветов

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

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

Названия цветов в HTML

Здесь представлена таблица имен цветов, которые поддерживаются большинством браузеров.

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

<html> <body> <table> <tr><th>Название цвета</th><th>HEX цвета</th><th>Цвет</th></tr> <tr><td>AliceBlue (бледно-голубой)</td><td>#F0F8FF</td><td bgcolor="#F0F8FF"> </td></tr> <tr><td>AntiqueWhite (античный белый)</td><td>#FAEBD7</td><td bgcolor="#FAEBD7"> </td></tr> <tr><td>Aqua (голубой)</td><td>#00FFFF</td><td bgcolor="#00FFFF"> </td></tr> <tr><td>Aquamarine (аквамарин)</td><td>#7FFFD4</td><td bgcolor="#7FFFD4"> </td></tr> <tr><td>Azure (лазурный)</td><td>#F0FFFF</td><td bgcolor="#F0FFFF"> </td></tr> <tr><td>Beige (беж)</td><td>#F5F5DC</td><td bgcolor="#F5F5DC"> </td></tr> <tr><td>Bisque (бисквитный)</td><td>#FFE4C4</td><td bgcolor="#FFE4C4"> </td></tr> <tr><td>Black (черный)</td><td>#000000</td><td bgcolor="#000000"> </td></tr> <tr><td>BlanchedAlmond (светло-кремовый)</td><td>#FFEBCD</td><td bgcolor="#FFEBCD"> </td></tr> <tr><td>Blue (синий)</td><td>#0000FF</td><td bgcolor="#0000FF"> </td></tr> <tr><td>BlueViolet (сине-фиолетовый)</td><td>#8A2BE2</td><td bgcolor="#8A2BE2"> </td></tr> <tr><td>Brown (коричневый)</td><td>#A52A2A</td><td bgcolor="#A52A2A"> </td></tr> <tr><td>BurlyWood (старое дерево)</td><td>#DEB887</td><td bgcolor="#DEB887"> </td></tr> <tr><td>CadetBlue (серо-голубой)</td><td>#5F9EA0</td><td bgcolor="#5F9EA0"> </td></tr> <tr><td>Chartreuse (зеленовато-желтый)</td><td>#7FFF00</td><td bgcolor="#7FFF00"> </td></tr> <tr><td>Chocolate (шоколадный)</td><td>#D2691E</td><td bgcolor="#D2691E"> </td></tr> <tr><td>Coral (коралловый)</td><td>#FF7F50</td><td bgcolor="#FF7F50"> </td></tr> <tr><td>CornflowerBlue (васильковый)</td><td>#6495ED</td><td bgcolor="#6495ED"> </td></tr> <tr><td>Cornsilk (кукурузные рыльца)</td><td>#FFF8DC</td><td bgcolor="#FFF8DC"> </td></tr> <tr><td>Crimson (малиновый)</td><td>#DC143C</td><td bgcolor="#DC143C"> </td></tr> <tr><td>Cyan (светло-голубой)</td><td>#00FFFF</td><td bgcolor="#00FFFF"> </td></tr> <tr><td>DarkBlue (темно-синий)</td><td>#00008B</td><td bgcolor="#00008B"> </td></tr> <tr><td>DarkCyan (темно-голубой)</td><td>#008B8B</td><td bgcolor="#008B8B"> </td></tr> <tr><td>DarkGoldenRod (темно-золотисто-коричневый)</td><td>#B8860B</td><td bgcolor="#B8860B"> </td></tr> <tr><td>DarkGray (темно-серый)</td><td>#A9A9A9</td><td bgcolor="#A9A9A9"> </td></tr> <tr><td>DarkGreen (темно-зеленый)</td><td>#006400</td><td bgcolor="#006400"> </td></tr> <tr><td>DarkKhaki (темный хаки)</td><td>#BDB76B</td><td bgcolor="#BDB76B"> </td></tr> <tr><td>DarkMagenta (темно-пурпурный)</td><td>#8B008B</td><td bgcolor="#8B008B"> </td></tr> <tr><td>DarkOliveGreen (темно-оливково-зеленый)</td><td>#556B2F</td><td bgcolor="#556B2F"> </td></tr> <tr><td>Darkorange (темно-оранжевый)</td><td>#FF8C00</td><td bgcolor="#FF8C00"> </td></tr> <tr><td>DarkOrchid (темно-лиловый)</td><td>#9932CC</td><td bgcolor="#9932CC"> </td></tr> <tr><td>DarkRed (темно-красный)</td><td>#8B0000</td><td bgcolor="#8B0000"> </td></tr> <tr><td>DarkSalmon (темно-оранжево-розовый)</td><td>#E9967A</td><td bgcolor="#E9967A"> </td></tr> <tr><td>DarkSeaGreen (темно-зеленое море)</td><td>#8FBC8F</td><td bgcolor="#8FBC8F"> </td></tr> <tr><td>DarkSlateBlue (темный серовато-синий)</td><td>#483D8B</td><td bgcolor="#483D8B"> </td></tr> <tr><td>DarkSlateGray (темный синевато-серый)</td><td>#2F4F4F</td><td bgcolor="#2F4F4F"> </td></tr> <tr><td>DarkTurquoise (темно-бирюзовый)</td><td>#00CED1</td><td bgcolor="#00CED1"> </td></tr> <tr><td>DarkViolet (темно-фиолетовый)</td><td>#9400D3</td><td bgcolor="#9400D3"> </td></tr> <tr><td>DeepPink (темно-розовый)</td><td>#FF1493</td><td bgcolor="#FF1493"> </td></tr> <tr><td>DeepSkyBlue (темно-небесно-голубой)</td><td>#00BFFF</td><td bgcolor="#00BFFF"> </td></tr> <tr><td>DimGray (тускло-серый)</td><td>#696969</td><td bgcolor="#696969"> </td></tr> <tr><td>DodgerBlue (тускло-васильковый)</td><td>#1E90FF</td><td bgcolor="#1E90FF"> </td></tr> <tr><td>Feldspar (полевой шпат)</td><td>#D19275</td><td bgcolor="#D19275"> </td></tr> <tr><td>FireBrick (огнеупорный кирпич)</td><td>#B22222</td><td bgcolor="#B22222"> </td></tr> <tr><td>FloralWhite (цветочно-белый)</td><td>#FFFAF0</td><td bgcolor="#FFFAF0"> </td></tr> <tr><td>ForestGreen (лесная зелень)</td><td>#228B22</td><td bgcolor="#228B22"> </td></tr> <tr><td>Fuchsia (фуксия)</td><td>#FF00FF</td><td bgcolor="#FF00FF"> </td></tr> <tr><td>Gainsboro (светло-серый)</td><td>#DCDCDC</td><td bgcolor="#DCDCDC"> </td></tr> <tr><td>GhostWhite (туманно-белый)</td><td>#F8F8FF</td><td bgcolor="#F8F8FF"> </td></tr> <tr><td>Gold (золотой)</td><td>#FFD700</td><td bgcolor="#FFD700"> </td></tr> <tr><td>GoldenRod (золотисто-коричневый)</td><td>#DAA520</td><td bgcolor="#DAA520"> </td></tr> <tr><td>Gray (серый)</td><td>#808080</td><td bgcolor="#808080"> </td></tr> <tr><td>Green (зеленый)</td><td>#008000</td><td bgcolor="#008000"> </td></tr> <tr><td>GreenYellow (зелено-желтый)</td><td>#ADFF2F</td><td bgcolor="#ADFF2F"> </td></tr> <tr><td>HoneyDew (медовая роса)</td><td>#F0FFF0</td><td bgcolor="#F0FFF0"> </td></tr> <tr><td>HotPink (ярко-розовый)</td><td>#FF69B4</td><td bgcolor="#FF69B4"> </td></tr> <tr><td>IndianRed (индийский-красный)</td><td>#CD5C5C</td><td bgcolor="#CD5C5C"> </td></tr> <tr><td>Indigo (индиго)</td><td>#4B0082</td><td bgcolor="#4B0082"> </td></tr> <tr><td>Ivory (слоновая кость)</td><td>#FFFFF0</td><td bgcolor="#FFFFF0"> </td></tr> <tr><td>Khaki</td><td>(хаки)</td><td bgcolor="(хаки)"> </td></tr> <tr><td>Lavender (бледно-лиловый)</td><td>#E6E6FA</td><td bgcolor="#E6E6FA"> </td></tr> <tr><td>LavenderBlush (бледный розово-лиловый)</td><td>#FFF0F5</td><td bgcolor="#FFF0F5"> </td></tr> <tr><td>LawnGreen (зеленая трава)</td><td>#7CFC00</td><td bgcolor="#7CFC00"> </td></tr> <tr><td>LemonChiffon (лимонный)</td><td>#FFFACD</td><td bgcolor="#FFFACD"> </td></tr> <tr><td>LightBlue (светло-синий)</td><td>#ADD8E6</td><td bgcolor="#ADD8E6"> </td></tr> <tr><td>LightCoral (светло-коралловый)</td><td>#F08080</td><td bgcolor="#F08080"> </td></tr> <tr><td>LightCyan (светло-светло-голубой)</td><td>#E0FFFF</td><td bgcolor="#E0FFFF"> </td></tr> <tr><td>LightGoldenRodYellow (светлый коричнево-желтый)</td><td>#FAFAD2</td><td bgcolor="#FAFAD2"> </td></tr> <tr><td>LightGrey (светло-серый)</td><td>#D3D3D3</td><td bgcolor="#D3D3D3"> </td></tr> <tr><td>LightGreen (светло-зеленый)</td><td>#90EE90</td><td bgcolor="#90EE90"> </td></tr> <tr><td>LightPink (светло-розовый)</td><td>#FFB6C1</td><td bgcolor="#FFB6C1"> </td></tr> <tr><td>LightSalmon (светлый оранжево-розовый)</td><td>#FFA07A</td><td bgcolor="#FFA07A"> </td></tr> <tr><td>LightSeaGreen (светло-зеленое море)</td><td>#20B2AA</td><td bgcolor="#20B2AA"> </td></tr> <tr><td>LightSkyBlue (светло-небесно-голубой)</td><td>#87CEFA</td><td bgcolor="#87CEFA"> </td></tr> <tr><td>LightSlateBlue (светлый серовато-синий)</td><td>#8470FF</td><td bgcolor="#8470FF"> </td></tr> <tr><td>LightSlateGray (светлый синевато-серый)</td><td>#778899</td><td bgcolor="#778899"> </td></tr> <tr><td>LightSteelBlue (светлый голубовато стальной)</td><td>#B0C4DE</td><td bgcolor="#B0C4DE"> </td></tr> <tr><td>LightYellow (светло-желтый)</td><td>#FFFFE0</td><td bgcolor="#FFFFE0"> </td></tr> <tr><td>Lime (лайм)</td><td>#00FF00</td><td bgcolor="#00FF00"> </td></tr> <tr><td>LimeGreen (зеленый лайм)</td><td>#32CD32</td><td bgcolor="#32CD32"> </td></tr> <tr><td>Linen (льняной)</td><td>#FAF0E6</td><td bgcolor="#FAF0E6"> </td></tr> <tr><td>Magenta (пурпурный)</td><td>#FF00FF</td><td bgcolor="#FF00FF"> </td></tr> <tr><td>Maroon (каштановый)</td><td>#800000</td><td bgcolor="#800000"> </td></tr> <tr><td>MediumAquaMarine (умеренно аквамариновый)</td><td>#66CDAA</td><td bgcolor="#66CDAA"> </td></tr> <tr><td>MediumBlue (умеренно синий)</td><td>#0000CD</td><td bgcolor="#0000CD"> </td></tr> <tr><td>MediumOrchid (умеренно лиловый)</td><td>#BA55D3</td><td bgcolor="#BA55D3"> </td></tr> <tr><td>MediumPurple (умеренно пурпурный)</td><td>#9370D8</td><td bgcolor="#9370D8"> </td></tr> <tr><td>MediumSeaGreen (умеренно-зеленое море)</td><td>#3CB371</td><td bgcolor="#3CB371"> </td></tr> <tr><td>MediumSlateBlue (умеренно серовато-синий)</td><td>#7B68EE</td><td bgcolor="#7B68EE"> </td></tr> <tr><td>MediumSpringGreen (умеренная весенняя зелень)</td><td>#00FA9A</td><td bgcolor="#00FA9A"> </td></tr> <tr><td>MediumTurquoise (умеренно-бирюзовый)</td><td>#48D1CC</td><td bgcolor="#48D1CC"> </td></tr> <tr><td>MediumVioletRed (умеренно фиолетово красный)</td><td>#C71585</td><td bgcolor="#C71585"> </td></tr> <tr><td>MidnightBlue (ночной синий)</td><td>#191970</td><td bgcolor="#191970"> </td></tr> <tr><td>MintCream (мятно-кремовый)</td><td>#F5FFFA</td><td bgcolor="#F5FFFA"> </td></tr> <tr><td>MistyRose (туманно-розовый)</td><td>#FFE4E1</td><td bgcolor="#FFE4E1"> </td></tr> <tr><td>Moccasin (песочный)</td><td></td><td bgcolor=""> </td></tr> <tr><td>NavajoWhite (темно-песочный)</td><td>#FFDEAD</td><td bgcolor="#FFDEAD"> </td></tr> <tr><td>Navy (темно-синий)</td><td>#000080</td><td bgcolor="#000080"> </td></tr> <tr><td>OldLace (старые кружева)</td><td>#FDF5E6</td><td bgcolor="#FDF5E6"> </td></tr> <tr><td>Olive (оливковый)</td><td>#808000</td><td bgcolor="#808000"> </td></tr> <tr><td>OliveDrab (тускло-оливковый)</td><td>#6B8E23</td><td bgcolor="#6B8E23"> </td></tr> <tr><td>Orange (оранжевый)</td><td>#FFA500</td><td bgcolor="#FFA500"> </td></tr> <tr><td>OrangeRed (оранжево-красный)</td><td>#FF4500</td><td bgcolor="#FF4500"> </td></tr> <tr><td>Orchid (лиловый)</td><td>#DA70D6</td><td bgcolor="#DA70D6"> </td></tr> <tr><td>PaleGoldenRod (бледно-золотисто-коричневый)</td><td>#EEE8AA</td><td bgcolor="#EEE8AA"> </td></tr> <tr><td>PaleGreen (бледно-зеленый)</td><td>#98FB98</td><td bgcolor="#98FB98"> </td></tr> <tr><td>PaleTurquoise (бледно-голубой)</td><td></td><td bgcolor=""> </td></tr> <tr><td>PaleVioletRed (бледно-фиолетово-красный)</td><td>#D87093</td><td bgcolor="#D87093"> </td></tr> <tr><td>PapayaWhip (дыни)</td><td>#FFEFD5</td><td bgcolor="#FFEFD5"> </td></tr> <tr><td>PeachPuff (персиковый)</td><td>#FFDAB9</td><td bgcolor="#FFDAB9"> </td></tr> <tr><td>Peru (коричневый)</td><td>#CD853F</td><td bgcolor="#CD853F"> </td></tr> <tr><td>Pink (розовый)</td><td>#FFC0CB</td><td bgcolor="#FFC0CB"> </td></tr> <tr><td>Plum (сливовый)</td><td>#DDA0DD</td><td bgcolor="#DDA0DD"> </td></tr> <tr><td>PowderBlue (туманно-голубой)</td><td>#B0E0E6</td><td bgcolor="#B0E0E6"> </td></tr> <tr><td>Purple</td><td>(пурпурный)</td><td bgcolor="(пурпурный)"> </td></tr> <tr><td>Red (красный)</td><td>#FF0000</td><td bgcolor="#FF0000"> </td></tr> <tr><td>RosyBrown (розово-коричневый)</td><td>#BC8F8F</td><td bgcolor="#BC8F8F"> </td></tr> <tr><td>RoyalBlue (ярко-синий)</td><td>#4169E1</td><td bgcolor="#4169E1"> </td></tr> <tr><td>SaddleBrown (старая кожа)</td><td>#8B4513</td><td bgcolor="#8B4513"> </td></tr> <tr><td>Salmon (оранжево-розовый)</td><td>#FA8072</td><td bgcolor="#FA8072"> </td></tr> <tr><td>SandyBrown (песочно-коричневый)</td><td>#F4A460</td><td bgcolor="#F4A460"> </td></tr> <tr><td>SeaGreen (зеленое море)</td><td>#2E8B57</td><td bgcolor="#2E8B57"> </td></tr> <tr><td>SeaShell (морская ракушка)</td><td>#FFF5EE</td><td bgcolor="#FFF5EE"> </td></tr> <tr><td>Sienna</td><td>(охра)</td><td bgcolor="(охра)"> </td></tr> <tr><td>Silver (свето-серый)</td><td>#C0C0C0</td><td bgcolor="#C0C0C0"> </td></tr> <tr><td>SkyBlue (небесно-голубой)</td><td>#87CEEB</td><td bgcolor="#87CEEB"> </td></tr> <tr><td>SlateBlue (серовато-синий)</td><td>#6A5ACD</td><td bgcolor="#6A5ACD"> </td></tr> <tr><td>SlateGray (синевато-серый)</td><td>#708090</td><td bgcolor="#708090"> </td></tr> <tr><td>Snow (снежный)</td><td>#FFFAFA</td><td bgcolor="#FFFAFA"> </td></tr> <tr><td>SpringGreen (весенняя зелень)</td><td>#00FF7F</td><td bgcolor="#00FF7F"> </td></tr> <tr><td>SteelBlue (сине-стальной)</td><td>#4682B4</td><td bgcolor="#4682B4"> </td></tr> <tr><td>Tan (бронзы)</td><td>#D2B48C</td><td bgcolor="#D2B48C"> </td></tr> <tr><td>Teal (сине-зеленый)</td><td>#008080</td><td bgcolor="#008080"> </td></tr> <tr><td>Thistle (чертополох)</td><td>#D8BFD8</td><td bgcolor="#D8BFD8"> </td></tr> <tr><td>Tomato (томат)</td><td>#FF6347</td><td bgcolor="#FF6347"> </td></tr> <tr><td>Turquoise (бирюзовый)</td><td>#40E0D0</td><td bgcolor="#40E0D0"> </td></tr> <tr><td>Violet</td><td>(фиолетовый)</td><td bgcolor="(фиолетовый)"> </td></tr> <tr><td>VioletRed (фиолетово-красный)</td><td>#D02090</td><td bgcolor="#D02090"> </td></tr> <tr><td>Wheat</td><td>(пшеничный)</td><td bgcolor="(пшеничный)"> </td></tr> <tr><td>White (белый)</td><td>#FFFFFF</td><td bgcolor="#FFFFFF"> </td></tr> <tr><td>WhiteSmoke (белый дым)</td><td>#F5F5F5</td><td bgcolor="#F5F5F5"> </td></tr> <tr><td>Yellow (желтый)</td><td>#FFFF00</td><td bgcolor="#FFFF00"> </td></tr> <tr><td>YellowGreen (желто-зеленый)</td><td>#9ACD32</td><td bgcolor="#9ACD32"> </td></tr> </table> </body> </html>

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

Отключение красного цвета

Если полностью отключить красный цвет, то существует 65536 различных комбинаций зеленого и синего (256 x 256) цветов для экспериментов.

Оттенки серого цвета

Серые цвета получаются при равном значении интенсивности всех трех цветов. Чтобы облегчить выбор правильного серого цвета, ниже, в примере, представлена таблица оттенков серого:

<html> <body> <table> <tr><td bgcolor="#000000"> </td><td>RGB(0,0,0)</td><td>#000000</td></tr> <tr><td bgcolor="#080808"> </td><td>RGB(8,8,8)</td><td>#080808</td></tr> <tr><td bgcolor="#101010"> </td><td>RGB(16,16,16)</td><td>#101010</td></tr> <tr><td bgcolor="#181818"> </td><td>RGB(24,24,24)</td><td>#181818</td></tr> <tr><td bgcolor="#202020"> </td><td>RGB(32,32,32)</td><td>#202020</td></tr> <tr><td bgcolor="#282828"> </td><td>RGB(40,40,40)</td><td>#282828</td></tr> <tr><td bgcolor="#303030"> </td><td>RGB(48,48,48)</td><td>#303030</td></tr> <tr><td bgcolor="#383838"> </td><td>RGB(56,56,56)</td><td>#383838</td></tr> <tr><td bgcolor="#404040"> </td><td>RGB(64,64,64)</td><td>#404040</td></tr> <tr><td bgcolor="#484848"> </td><td>RGB(72,72,72)</td><td>#484848</td></tr> <tr><td bgcolor="#505050"> </td><td>RGB(80,80,80)</td><td>#505050</td></tr> <tr><td bgcolor="#585858"> </td><td>RGB(88,88,88)</td><td>#585858</td></tr> <tr><td bgcolor="#606060"> </td><td>RGB(96,96,96)</td><td>#606060</td></tr> <tr><td bgcolor="#686868"> </td><td>RGB(104,104,104)</td><td>#686868</td></tr> <tr><td bgcolor="#707070"> </td><td>RGB(112,112,112)</td><td>#707070</td></tr> <tr><td bgcolor="#787878"> </td><td>RGB(120,120,120)</td><td>#787878</td></tr> <tr><td bgcolor="#808080"> </td><td>RGB(128,128,128)</td><td>#808080</td></tr> <tr><td bgcolor="#888888"> </td><td>RGB(136,136,136)</td><td>#888888</td></tr> <tr><td bgcolor="#909090"> </td><td>RGB(144,144,144)</td><td>#909090</td></tr> <tr><td bgcolor="#989898"> </td><td>RGB(152,152,152)</td><td>#989898</td></tr> <tr><td bgcolor="#A0A0A0"> </td><td>RGB(160,160,160)</td><td>#A0A0A0</td></tr> <tr><td bgcolor="#A8A8A8"> </td><td>RGB(168,168,168)</td><td>#A8A8A8</td></tr> <tr><td bgcolor="#B0B0B0"> </td><td>RGB(176,176,176)</td><td>#B0B0B0</td></tr> <tr><td bgcolor="#B8B8B8"> </td><td>RGB(184,184,184)</td><td>#B8B8B8</td></tr> <tr><td bgcolor="#C0C0C0"> </td><td>RGB(192,192,192)</td><td>#C0C0C0</td></tr> <tr><td bgcolor="#C8C8C8"> </td><td>RGB(200,200,200)</td><td>#C8C8C8</td></tr> <tr><td bgcolor="#D0D0D0"> </td><td>RGB(208,208,208)</td><td>#D0D0D0</td></tr> <tr><td bgcolor="#D8D8D8"> </td><td>RGB(216,216,216)</td><td>#D8D8D8</td></tr> <tr><td bgcolor="#E0E0E0"> </td><td>RGB(224,224,224)</td><td>#E0E0E0</td></tr> <tr><td bgcolor="#E8E8E8"> </td><td>RGB(232,232,232)</td><td>#E8E8E8</td></tr> <tr><td bgcolor="#F0F0F0"> </td><td>RGB(240,240,240)</td><td>#F0F0F0</td></tr> <tr><td bgcolor="#F8F8F8"> </td><td>RGB(248,248,248)</td><td>#F8F8F8</td></tr> <tr><td bgcolor="#FFFFFF"> </td><td>RGB(255,255,255)</td><td>#FFFFFF</td></tr> </table> </body> </html>

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

Плохой цвет фона и текста

Пример комбинации цвета фона и цвета текста, которая создает трудности при чтении текста на странице.

Полезные рекомендации

Атрибуты bgcolor, background, и text в теге <body> не рекомендуется использовать в последних версиях HTML (HTML 4 и XHTML). Консорциум World Wide Web (W3C) исключил эти атрибуты из своих рекомендаций.

Вместо этого должны использоваться таблицы стилей (CSS) (для определения свойств компоновки и вывода элементов HTML). Используя таблицы стилей можно более гибко управлять настройками фона.

Пример bgcolor="#000000"

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

Включение красного цвета

Задавая для параметра красного цвета (R) максимальное значение, мы также получим 65536 различных комбинаций зеленого и синего (256 x 256) цветов для экспериментов.

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

Цвета определяют с помощью шестнадцатеричной записи комбинации значений красного, зеленого и синего цветов (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"> </td><td>#000000</td><td>rgb(0,0,0)</td></tr> <tr><td bgcolor="#FF0000"> </td><td>#FF0000</td><td>rgb(255,0,0)</td></tr> <tr><td bgcolor="#00FF00"> </td><td>#00FF00</td><td>rgb(0,255,0)</td></tr> <tr><td bgcolor="#0000FF"> </td><td>#0000FF</td><td>rgb(0,0,255)</td></tr> <tr><td bgcolor="#FFFF00"> </td><td>#FFFF00</td><td>rgb(255,255,0)</td></tr> <tr><td bgcolor="#00FFFF"> </td><td>#00FFFF</td><td>rgb(0,255,255)</td></tr> <tr><td bgcolor="#FF00FF"> </td><td>#FF00FF</td><td>rgb(255,0,255)</td></tr> <tr><td bgcolor="#C0C0C0"> </td><td>#C0C0C0</td><td>rgb(192,192,192)</td></tr> <tr><td bgcolor="#FFFFFF"> </td><td>#FFFFFF</td><td>rgb(255,255,255)</td></tr> <table> <body> <html>

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

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

Цвета выводятся при смешении красного (R), зеленого (G), и синего (B) источников.