Швидко освоїти Html

213
  • Коди і таблиця базових кольорів RGB
  • Яндекс Кольору — підбір палітри RGB відтінків
  • Використання кодів і назв квітів на сайті
  • Програми для захоплення кольору з екрану
  • Здрастуйте, шановні читачі блогу . Я продовжую публікувати статті в рубриці «HTML для чайників». Сьогодні хочу поговорити про кольори в HTML і CSS код, пояснити для тих, хто ще не в курсі, як можна їх визначити, яким чином вони формуються, як для пошуку або захоплення потрібного кольору використовувати спеціально призначені для цього програми та багато іншого.

    Швидко освоїти Html

    Питання завдання потрібного відтінку може бути особливо актуальним для початківців вебмайстрів, коли не зовсім зрозумілі приводяться в web документі їх коди (наприклад, #f3af6c) і не зрозуміло яким чином і звідки можна буде взяти цю інформацію (де знайти таблиці Html і CSS кольорів), і як їх використовувати для оформлення текстового або будь-якого іншого блоку web документа.

    Дозволю собі вам нагадати, що ми вже встигли познайомитися з основоположними принципами, використовуваними в мові гіпертекстової розмітки. Так само ми вже розглянули теги img і гіперпосилання, дізналися, як створюється таблиця, дізналися багато варіантів створення Html-форм і те, як здійснювати верстку сайту.

    Коди і таблиця базових кольорів RGB

    Цілком логічно, що в мові гіпертекстової розмітки і таблиці каскадних стилів є можливість кольорового оформлення документів, бо в іншому разі сайти були б дуже нудними і одноманітними. Для цього зазвичай використовують модель під назвою RGB (абревіатура, утворена від трьох англійських слів, що позначають червоний, зелений і синій).

    Швидко освоїти HtmlШвидко освоїти Html

    В моделі RGB використовуються тільки три кольори (зрозуміло, що це червоний, зелений і синій), кожен з яких може бути представлений з різним рівнем яскравості світіння. Для кожного з каналів (червоний, зелений і синій) можна буде вибрати одну з 256 можливих градацій яскравості. Число 256 взято з тієї причини, що стільки значень відтінків можна закодувати в одному байті інформації.

    Відповідно, для свого web документу ми можемо вибрати будь-який відтінок з величезної кількості можливих (256*256*256). Наприклад, для отримання чорного кольору потрібно, щоб у всіх трьох каналів колірної схеми було нульове значення яскравості, а для отримання білого — червоний, зелений і синій кольори повинні мати максимальну яскравість.

    Давайте тепер спробуємо розібратися, як задати яскравість в кожному каналі і скільки у нас є для цього можливості?

    Насправді, є два основних способи:

  • завдання з допомогою запису яскравості по кожному з каналів (червоного, зеленого і синього) в шістнадцятковій системі числення
  • завдання з допомогою введення назви кольору у коді web документа
  • Давайте почнемо зі складного і спробуємо розібратися з записом квітів у шістнадцятковому коді. Якщо б ми хотіли, наприклад, записати код білого в десятковій системі, то отримали б код 256 256 256, а для чорного — 0 0 0. Тут, напевно, все зрозуміло.

    Але в шістнадцятковій системі числення крім арабських цифр використовуються ще й перші шість літер латинського алфавіту, ну і є своя специфіка формування цифр. Заглиблюватися в це, думаю, не варто, але для прикладу скажу, що білий для Html можна буде задати так: #ffffff, а чорний так: #000000. Тобто 00 відповідає 0 в десятковій системі числення, а ff відповідає 256.

    Тобто на кожний канал RGB кольору в коді CSS відводиться дві шістнадцяткові цифри, тому записи значення кольору складаються з шести цифр або букв, які прирівняні до цифр в шістнадцятковій системі), перед якими ставиться знак решітки «#». Все досить просто.

    Наприклад, у наведеній таблиці для найпростіших відтінків їх шестнадцатиричные записи будуть виглядати так:

    ВідтінокШестнадцатиричная запис
    Жовтий#ffff00
    Зелений#008000
    Білий#ffffff
    Червоний#ff0000
    Сірий#808080
    Синій#0000ff
    Чорний#000000

    Природно, що ви не зобов’язані самі придумувати і зіставляти шестнадцатиричные коди відтінків з тими, що ви хочете побачити на своєму інтернет проекті. Підбирати колор для сайту ви можете в будь-якому графічному редакторі (навіть у безкоштовному онлайн-редакторі Pixlr Editor), де вам обов’язково покажуть запис цього відтінку у форматі RGB, або знайти таблицю Html квітів і скопіювати потрібний вам код звідти.

    Яндекс Кольору — підбір палітри RGB відтінків у видачі Yandex

    Не хочете використовувати для цієї мети графічний редактор або шукати таблицю з кодами? Немає проблем. Перейдіть трохи вниз цю сторінку і ви знайдете масу специфічних і заточених саме для роботи з кольором в Html або CSS коді програм.

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

    Швидко освоїти HtmlШвидко освоїти Html

    В результаті, в самому верху пошукової видачі, ви побачите дуже зручну панель-таблицю Яндекс.Кольори для підбору кольорів для свого сайту. У правому нижньому кутку цієї панелі ви зможете скопіювати шістнадцятковий код потрібного вам відтінку (перед ним стоїть сітка), який потім залишиться тільки вставити у потрібне місце вашого web документа.

    Все це реалізується завдяки так званому «колдунщику» Яндекса, який покликаний допомогти верстальникам і дизайнерам.

    Ви можете задати колір в пошуковому рядку Yandex, як у вигляді його назви, так і у вигляді коду — в результаті ви побачите, як він буде виглядати на екрані і при необхідності зможете отримати його шістнадцяткову запис.

    Власне, цей інструмент може стати в нагоді і звичайним користувачам інтернету, наприклад, для того, щоб зрозуміти, як же все-таки буде виглядати меблі відтінку сер-бур-малин-в-цятку. Можете подивитися так само відео про використання цього колдунщика Яндекса:

    Деякі кольору в мові гіпертекстової розмітки можуть бути задані за допомогою слів, наприклад, «black» означає чорний, «white» — білий і т. д. Але тут є один нюанс. Завдання колору, таким чином, можливо тільки для обмеженого їх числа.

    Ну, по-перше, напевно, зрозуміло, що всі 16 мільйонів можливих RGB схемою відтінків ви з допомогою слів уявити не зможете ні в одній таблиці (втомитеся її прокручувати).

    По-друге, в валидаторе W3C для специфікації мови гіпертекстової розмітки 4.01 (її повною мірою підтримують всі можливі браузери на поточний момент) визначено лише 16 колоров, які в Html або CSS коді можна задавати словами:

    Швидко освоїти HtmlШвидко освоїти Html

    Ви можете зустріти і набагато більш розгорнуті таблиці відтінків, які можна буде задати у коді словами, але там існує ймовірність, що в якому-небудь браузері цей колір буде відображатися коректно.

    Тому, крім наведеної трохи вище таблиці 16 базових відтінків, всі інші кольори слід ставити в коді web документів тільки з допомогою шістнадцятковій запису, щоб уникнути нікому не потрібних ексцесів.

    Використання кодів та назв кольорів у вебмастеринге

    На даний момент все зовнішнє оформлення web-сторінок віддано на відкуп CSS (каскадних таблиць стилів) і вказівка коду кольору безпосередньо в Html зустрічається вкрай рідко, але все ж зустрічається. До того ж бувають ситуації, коли не можна з тих або інших причин використовувати зовнішні таблиці стилів CSS (наприклад, у разі створення випуску поштової розсилки subscribe).

    Тому я все-таки наведу приклад завдання кольори в Html, хоча при цьому і будуть використовуватися вже не рекомендовані валідатором W3C теги. Наприклад, раніше колор для фону ставили в тезі «BODY» через атрибуту «bgcolor», а текст розфарбовували відразу на всій веб за допомогою атрибута «text».

    Завдання потрібних відтінків в такому разі могло виглядати, наприклад, так:

    Вміст документа

    В результаті ви отримаєте вебсторінку з бежевим фоном і темно-синім шрифтом. До того, як CSS увійшов в ужиток, для зміни кольору шрифту якогось окремого ділянки тексту повсюдно використовували зараз вже не рекомендований валідатором W3C тег «FONT», в який для завдання кольору включали однойменний атрибут «color»:

    ділянку тексту, який потрібно було пофарбувати в синій колор

    Для того, щоб побачити результат роботи написаного коду на екрані, вам потрібно зберегти цей файл з розширенням html, а потім відкрити його в будь-якому зручному для вас браузері.

    Зараз для того, щоб верстка вашого сайту вважалася валидной, рекомендують ставити кольору елементів таблиці каскадних стилів через відповідні правила і властивості. Правила такої вставки в CSS нічим не відрізняються від описаних вище.

    Швидко освоїти HtmlШвидко освоїти Html

    Як ви можете бачити, іноді для скорочення запису відтінку використовують не шість знаків, а тільки три, в тому випадку, якщо вони збігаються для кожного каналу — «#6с0» замість «#66сс00».

    Вибір кольору з палітри спеціальної програми або захоплення його з екрану

    Як я вже писав трохи вище, повсюдно використовується RGB (червоний, зелений, синій) колірна схема. Для кожного з трьох основних колоров передбачено 256 градацій – від 0 до 255 (якщо перевести ці значення в шістнадцяткову систему числення, то отримаємо – від 00 до FF).

    Т. к. у нас три основних кольорів, з комбінації яких формуються всі інші відтінки, то шестнадцатиричная запис буде мати приблизно такий вигляд: 99FF66 (відтінок зеленого). Додавши перед ним # отримаємо код #99FF66, який можна використовувати як у Html, так і в стильових файлах. Само собою зрозуміло, що ви самі не повинні обчислювати і пам’ятати всю цю абрукадабру.

    Для цього можна скористатися спеціальною програмою, що дозволяє вибрати потрібний відтінок на палітрі (або захопити його з екрану інструментом типу піпетки) і тут же отримати його код. Можна і не мати програми, а зайти на Яндекс і набрати в рядку запиту назва будь-якого кольору (про це я писав трохи вище).

    Ось список програм, які дозволяють все це реалізувати в повній мірі:

    Удачі вам! До зустрічей на сторінках блогу