Цвета в HTML
Цвета выводятся с помощью смешения источников RED (красного), GREEN (зеленого), и BLUE (синего) цвета.
Цвет можно задать двумя способами:
- по значению — цифрами, что будет более точно по оттенкам.
- по имени — английским словом.
face="Comic Sans MS" size="1" color="#FF0000">текст
1. Значения цветов
color=»#FF0000″
Цвета определяют с помощью шестнадцатеричной записи комбинации значений красного, зеленого и синего цветов (RGB — Red Green Blue). Наименьшее значение, которое можно задать одному из источников равно 0 (hex #00). Максимальное значение равно 255 (hex #FF).
первые две цифры – это насыщенность красным
вторые две цифры – это насыщенность зеленым
третьи две цифры – это насыщенность синим цветом.
Цифры задаются по 16-ричной системе, т.е. не от 0 до 10, а от 0 до FF (255 – в десятичной системе).
0,1,2,3,4,5,6,7,8,9,0А,0B,0C,0D,0E,0F – это и есть 16-ричный счет. И именно в пределах этого и можно задавать каждому сегменту свой цвет. То есть минимально это может быть 00 00 00, что соответствует черному, максимально – это будет FF FF FF, что соответствует белому. все промежуточные комбинации – это уже оттенки. Например, красный цвет – это FF 00 00, зеленый – это 00 FF 00, синий – 00 00 FF.
2. Имена цветов
Для упрощения набора основных цветов в стандарте HTML было позволено замещать цифровой ряд обычным словом, обозначающим тот или иной цвет в английском языке. Например, параметр color=black окрасит выделенное тегом в черный цвет, green – в зеленый, white – в белый и т.п.
Некоторая совокупность названий цветов поддерживается большинством браузеров.
Только 16 названий цветов поддерживается стандартом W3C для HTML 4.0 (aqua (голубой), black (черный), blue (синий), fuchsia (фуксия), gray (серый), green (зеленый), lime (лайм), maroon (темно-бордовый), navy (темно-синий), olive (оливковый), purple (сиреневый), red (красный), silver (светло-серый), teal (сине-зеленый), white (белый), и yellow (желтый)).
Компоновка документа в HTML
Выше были рассмотрены основные теги HTML. Используя их, уже можно создавать свои страницы. Но создание страницы это не только верстка материалов, но и компоновка всех элементов (меню, заголовок страницы, основное информационное наполнение, баннеры и др.) на странице HTML документа.
Одним из наиболее распространенных способом компоновки страницы является использование таблиц. Этот способ многими специалистами считается устаревшим и, более того, идеологически неверным.
Более современный способ – верстка с помощью слоев.
При нем таблицы используются, но исключительно для табличных данных. При верстке слоями широко используются возможности css.
http://www.htmlbook.ru/content/?pid=17
http://www.htmlbook.ru/content/?id=83
Задание цвета шрифта текста
style="color:blue">Заголовок style="color:red">Параграф
Задание для текста шрифта, его размера и цвета
style="font-family:verdana;font-size:80%;color:green"> Это параграф, содержащий некоторый текст. Это текст, содержащийся в параграфе. Это все тот-же параграф с текстом.
HTML фон страницы, цвет фона и картинка
Существуют параметры, которые нам позволяют определить HTML фон для сайта.
- Цвет фона HTML страницы определяется CSS атрибутом background-color , который, в свою очередь, размещается внутри тега .
- HTML цвет фона для отдельных элементов: блока, параграфа или ячейки таблицы определяется тем же атрибутом, расположенном внутри соответствующих тегов.
- Фон HTML страницы может быть определен во внешнем .css файле → подробнее CSS уроках.
- HTML картинка — фон определяется с помощью атрибута background-image и картинки.
Цвет фона HTML страницы и отдельных элементов
Определяем цвет фона для сайта, страниц и параграфов
Сделаем фон HTML страницы светло-зеленым:
Заголовок 1-го уровняПервый параграф Второй параграф Третий параграф |
Строка style=»color:Yellow; background-color:#66cc66″ в теге делает цвет фона HTML страницы зеленым, текст – желтым.
Посмотреть в новом окне: цвет фона в HTML
Атрибуты style=»» со значениями – линейные CSS включения.
Определим цвет фона для параграфов:
|
Первый параграф Второй параграф |
HTML картинка — фон или изображение в качестве фона
HTML фон — картинка определяется с помощью изображения
Например, у нас есть вот такая картинка:
Напишим следующий код для отдельной страницы:
| Какой-то произвольный текст. |
Посмотреть результат в новом окне: HTML фон — картинка
Атрибуты background, background-image , их параметры и значения рассматриваются в уроках CSS. Путь вывода картинки на страницу, то есть → ../images/primer-img.jpg разбирается в одном из следующих уроков.
Исходный код HTML страницы
Исходный код H2O выглядит так:
| H2O |
Обратите внимание на порядок открытия и закрытия тегов: одна пара вкладывается в другую, то есть тег открытый первым – закрывается последним, второй – предпоследним.
Исходный код любой web-страницы открывается следующим образом: в меню браузера заходим в View ⇒ Source или Page Source .
Исходный код доступен только для просмотра, но не для редактирования.
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
HTML линии 
Цвет HTML фона, исходный код 
HTML картинка
© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML фон, исходный код? – Не вопрос!
Цвет
В HTML цвет задается одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.
Шестнадцатеричные цвета
Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.
| Десятичные | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Шестнадцатеричные | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.
| Десятичные | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Шестнадцатеричные | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C |
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.
Типичный цвет, используемый в HTML, выглядит следующим образом.
Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.
| FA | + | 8E | + | 47 | = | FA8E47 |
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.
Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.
- Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
- Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
- Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.
Рис. 6.1. Цветовой круг
Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.
Рис. 6.2. Окно для выбора цвета в программе Photoshop
Веб-цвета
Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей которых — красной, зеленой и синей — устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 — 216 цветов. Пример веб-цвета — #33FF66.
Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
Цвета по названию
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.
| Имя цвета | Цвет | Описание | Шестнадцатеричное значение |
|---|---|---|---|
| black | Черный | #000000 | |
| blue | Синий | #0000FF | |
| fuchsia | Светло-фиолетовый | #FF00FF | |
| gray | Темно-серый | #808080 | |
| green | Зеленый | #008000 | |
| lime | Светло-зеленый | #00FF00 | |
| maroon | Темно-красный | #800000 | |
| navy | Темно-синий | #000080 | |
| olive | Оливковый | #808000 | |
| purple | Темно-фиолетовый | #800080 | |
| red | Красный | #FF0000 | |
| silver | Светло-серый | #C0C0C0 | |
| teal | Сине-зеленый | #008080 | |
| white | Белый | #FFFFFF | |
| yellow | Желтый | #FFFF00 |
Не имеет значения, каким способом вы задаете цвет — по его имени или с помощью шестнадцатеричных чисел. По своему действию эти способы равны. В примере 6.1 показано, как установить цвет фона и текста веб-страницы.
Пример 6.1. Цвет фона и текста
Цвета Пример текста
В данном примере цвет фона задается с помощью атрибута bgcolor тега , а цвет текста через атрибут text . Для разнообразия значение у атрибута text установлено в виде шестнадцатеричного числа, а у bgcolor с помощью зарезервированного ключевого слова teal .
Какие теги определяют цвета элементов страницы
Основные теги документа
Указывает программе просмотра страниц, что это HTML документ
Определяет место, где помещается различная информация, не отображаемая в теле документа. Здесь располагаются тег названия документа , теги стилевых таблиц link> и и теги для поисковых машин
Определяет видимую часть – «тело» документа
Помещает название документа в оглавление программы просмотра страниц
Устанавливает цвет фона документа. ? – значение цвета в виде RRGGBB или текстовом виде. Например: FF0000 – красный (Red) цвет
Устанавливает цвет текста документа. ? – значение цвета в виде RRGGBB или текстовом виде. Например: 000000 – черный цвет (Black)
Устанавливает цвет гиперссылок. ? – значение цвета в виде RRGGBB или текстовом виде. Например: 00FF00 – зеленый цвет (Green)
Устанавливает цвет гиперссылок, на которых вы уже побывали. ? – значение цвета в виде RRGGBB или текстовом виде. Например: 333333 (Gray) – серый цвет
Устанавливает цвет гиперссылок при нажатии
Теги форматирования текста
Обрамляет предварительно отформатированный текст
Создает САМЫЙ БОЛЬШОЙ заголовок
Создает самый маленький заголовок
Создает жирный текст
Создает наклонный текст
Создает текст, имитирующий стиль печатной машинки
Используется для цитат, обычно наклонный текст
Используется для выделения из текста слова (наклонный или жирный текст)
Используется для выделения наиболее важных частей текста (наклонный или жирный текст)
Устанавливает размер текста в пределах от 1 до 7
Устанавливает цвет текста, используя значение цвета в виде RRGGBB
Режим бегущей строки. Текст становится бегущей строкой. height, width – атрибуты текста, loop задает количество пробегов текста, bgcolor задает цвет фона
Создает новый параграф
Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center
Вставляет перевод строки
Создает отступы с обеих сторон текста
Создает список определений
Определяет каждый из терминов списка
Описывает каждое определение
Создает нумерованный список
Определяет каждый элемент списка и присваивает номер
Создает ненумерованный список
Предваряет каждый элемент списка и добавляет кружок или квадратик
Тег, используемый для форматирования больших блоков текста HTML документа, также используется в таблицах стилей
Графические элементы
Добавляет изображение в HTML-документ
Выравнивает изображение к одной из сторон документа, ? принимает значения: left, right, center; bottom, top, middle
Устанавливает толщину рамки вокруг изображения
Добавляет в HTML-документ горизонтальную линию
Устанавливает высоту (толщину) линии
Устанавливает ширину линии, можно указать ширину в пикселях или процентах
Создает линию без тени
Задает линии определенный цвет. Значение RRGGBB
Таблицы
Определяет строку в таблице
Определяет отдельную ячейку в таблице
Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Задает толщину рамки таблицы
Задает расстояние между ячейками таблицы
Задает расстояние между содержимым ячейки и ее рамкой
Устанавливает ширину таблицы в пикселях или процентах от ширины документа
Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right
Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения: top, middle, или bottom
Указывает количество столбцов, которые объединены в одной ячейке (по умолчанию=1)
Указывает количество строк, которые объединены в одной ячейке (по умолчанию=1)
Не позволяет программе просмотра делать перевод строки в ячейке таблицы
Гиперссылки
Создает гиперссылку на другие документы или часть текущего документа
Создает гиперссылку вызова почтовой программы для написания письма автору документа
Отмечает часть текста как цель для гиперссылок в документе
Создает гиперссылку на часть текущего документа
Фреймы
Заменяет тег в документе, определяющем структуру фреймов на веб-странице
Определяет строки в таблице кадров, высота которых определена количеством пикселей или в процентном соотношении к высоте таблицы кадров
Определяет столбцы в таблице кадров, ширина которых определена количеством пикселей или в процентном соотношении к ширине таблицы кадров
Определяет единичный кадр или область в таблице кадров
Определяет, что будет показано в окне браузера, если он не поддерживает кадры
Определяет, какой из HTML-документов будет показан в кадре
Указывает имя кадра или области, что позволяет перенаправлять информацию в этот кадр или область из других кадров
Определяет величину отступов по левому и правому краям кадра; должно быть равно или больше 1
Определяет величину отступов по верхнему и нижнему краям кадра; должно быть равно или больше 1
Указывает, будет ли выводиться линейка прокрутки в кадре; значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов – auto
Препятствует изменению размеров кадра