Цвета

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

Цвета фрагментов страниц (символов, фона текста, фона ячеек таблиц, ссылок, границ ячеек таблиц, …) задаются с помощью специальных тегов:

Для задания цвета символов используется тег <span style=»color: #ff0000;»>
Для задания цвета фона абзаца используется тег <p style=»background-color: #ffdab9;»>
Для задания цвета фона ячейки таблицы — тег <td style=»background-color: #00ff00;»>
Для задания цвета ссылок — тег <a style=»color: #0000ff;»>

После двоеточий во всех 4-рёх тегах стоят цветовые коды HTML, которые состоят из 7-ми символов. Для получения различных цветов используются три цвета: красный, зелёный и синий, сокращённо обозначаемых RGB (RedGreenBlue).

Формат кодов HTML таков: 

Код HTML состоит из символа «#» и 6-ти цифр или букв, причём используется шестнадцатеричная система счисления. Например, «FF» в шестнадцатеричной системе соответствует 255 в десятеричной.

Значения символов в коде цвета HTML таковы
Первые два символа в коде цвета HTML задают насыщенность красного цвета, 3-й и 4-й символы — насыщенность зелёного цвета, 5-й и 6-й символы — насыщенность синего цвета. При этом 00 (два нуля) задают наименьшую насыщенность цвета, а FF (или ff) — наибольшую насыщенность цвета.

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

Например, 
#FF0000 - код цвета HTML, который задаёт максимально насыщенный красный цвет без малейших примесей зелёного и синего цветов.

#00FF00 - код цвета HTML, который задаёт максимально насыщенный зелёный цвет без малейших примесей красного и синего цветов.

#0000FF - код цвета HTML, который задаёт максимально насыщенный синий цвет без малейших примесей красного и зелёного цветов.

#FFFF00 - код жёлтого цвета, получаемого из смеси красного и зеленого цветов, имеющих максимальную насыщенность.

#FFDAB9 - код цвета, называемого PeachPuff, он иногда подойдёт для задания фона.

#8B008B — код цвета, называемого DarkMagenta. Пример оказался неудачным, так как браузеры  Firefox и Opera не смогли отобразить этот цвет, а выдали чёрный. Зато этот пример показал, что нужно быть очень аккуратным при подборе цветов и проверять их в нескольких браузерах.

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

Пример №1. span style=»color: #0000ff;» — обратите внимание на пробел после двоеточия (его вставляет WordPress) и на точку с запятой — её тоже вставляет WordPress! Кроме того, WordPress в коде цвета в теге заменяет прописные символы на строчные, то есть ABCDEF на abcdef.

Пример №2. p style=»background-color: yellow;» — задан жёлтый цвет фона абзаца.

Пример №3. Фон ячейки таблицы. Этот пример взят со страницы Девизы.

td style=»background-color: yellow; font-weight: bold; color: red;»

WordPress SEO хочет image — их есть у меня!

Пример №4. Задание цвета ссылок — тег <a style=»color: red;» … Девизы
В этом примере WordPress удачно подправил теги: надо использовать
<b style=»color: red;»> <a style=»color: red;» … > — без первого тега получается лишь красное подчёркивание.

Примеры №1, №2, №3 и №4 успешно прошли и проверку Валидатором. Считаю, что лучше использовать для задания цветов фрагментов страниц именно стили и названия цветов на английском языке. Заглянул на страницу HTML, с неё перешёл на сайт онлайновых учебников, сделал поиск по запросу цвета, получил множество ссылок на CSS, почитал о том, как задаются цвета фрагментов страниц.

После этого дополнил страницу Девизы и изложил второй способ создания девизов: без использования графики для экономии трафика.

Хорошая таблица цветов, содержащая названия цветов, сами цвета, RGB-коды и HTML-коды, находится на украинском сайте http://www.stm.dp.ua/web-design/color-html.php

Не уверен, что этот сайт всегда будет доступен, поэтому привожу ссылку ещё на один сайт: http://www.puzzleweb.ru/html/colors_html.php

Ещё раз поразмыслив, пришёл к выводу, что цвета удобнее всего задавать английскими названиями цветов, так как это обеспечивает читабельность HTML-кодов страниц. Сознаю, что при этом на браузеры и компьютеры посетителей ложится дополнительная нагрузка по расшифровке названий цветов.

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

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

И не забывайте, пожалуйста, нажимать на кнопки социальных сетей, которые расположены под текстом каждой страницы сайта.
ЦветаПродолжение тут…

Deviz_2

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.