HTML-код. Коди кольорів HTML

HTML-код. Коди кольорів HTML

Напевно ви стикалися з таким поняттям як HTML-код. Чули від знайомих, бачили в меню свого браузера і т. п. Але що ж це таке? Давайте спробуємо з 'ясувати, що це за код і з яких елементів він складається.

Загальні відомості

Почнемо з визначення. HTML-код - розмітка будь-якої веб-сторінки, яка виконана за допомогою мови HTML.


Цей код складається з тегів, завдяки яким переглядач визначає, як виглядає та чи інша сторінка. Структура його ділиться на дві частини: head - заголовок документа, в якому прописується назва сторінки, а також інформація про сам документ, і body - тіло документа, в якому задаються параметри сторінки.

Щоб створити більш-менш пристойну веб-сторінку, написану з нуля, слід вивчити теги, які використовуються цією мовою, їх параметри, а також знати коди кольорів HTML.

Теги

Тег - елемент мови HTML. Ви можете використовувати шрифт, колір, розмір тексту, вставляти таблиці та зображення, форматувати, створювати заголовки, посилання та розфарбовувати сторінку.

Теги завжди укладені в кутові дужки - < >, і саме це відрізняє їх від основного тексту, який і виводиться на сторінку при перегляді. Бувають вони двох видів - парні та одиночні.

Парні складаються з тега, що відкриває, і закриває, при цьому в останньому після лівої кутової дужки стоїть прямий сленш. Наприклад: & lt; b & gt; текст & lt ;/b & gt;.

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


Поодинокі ж складаються з одного тегу і не містять в собі прямого слішу. Наприклад: &lt;hr&gt;.

Теги можуть мати параметри, які можна встановити, використовуючи спеціальні коди для HTML.

Також зазначимо, що для більшості символів: собачки, дужок, товарного знака, знаків більше або одно, менше або одно і багатьох інших - існує спеціальна таблиця, в якій прописані коди даних знаків. Цей код починається з амперсанта, після якого може йти або буквене мнемонічне його позначення, або ж знак решітки з тризначним кодом символу. Наприкінці обов 'язково ставиться крапка з комою.

Основні теги

Що таке HTML-код, ми розібралися, тепер спробуємо перерахувати основні теги, які можуть бути корисні якщо не при створенні власних веб-сторінок, то хоча б при оформленні текстів.

Парні:

  • &lt; body & gt; - це основні параметри документа, такі як тло, колір посилань, поля та інші;
  • &lt; p & gt; - означає абзац;
  • &lt; b & gt; - виділяє текст жирним;
  • &lt; i & gt; - курсив;
  • &lt; u & gt; - підкреслює текст;
  • &lt; s & gt; - перекреслює текст;
  • &lt; sup & gt; - визначає текст як верхній індекс;
  • &lt; sub & gt; - нижній індекс;
  • &lt; font & gt; - визначає парамерти шрифту: розмір, шрифт, колір;
  • &lt; div & gt; - за його допомогою ви можете вирівняти ваш текст;
  • &lt; h & gt; - тег заголовків;
  • &lt; a & gt; - за його допомогою задаються посилання;
  • &lt; table & gt; - допомагає вставити в документ таблиці, з ним пов 'язані теги & lt; tr&gt; (рядок) і & lt; td&gt; (комірка).

Поодинокі:

  • & lt; br & gt; - одиночний, переносить текст, наступний після нього, на нову сторінку;
  • & lt; hr & gt; - за його допомогою можна вставити в текст горизонтальну риску.

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


Параметри тегів

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

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

Не будемо також і розписувати, для якого тегу даний параметр підходить, так як багато з них використовуються в більшості команд веб-розмітки:

  • face - визначає вигляд шрифту;
  • size - визначає розмір;
  • color - визначає колір;
  • align - вирівнювання;
  • name - назва;
  • href - вказує адресу посилання за допомогою цього параметра;
  • alt - альтернативний текст;
  • width - ширина;
  • height - висота;
  • background - фоновий малюнок;
  • bgcolor - тло.

Це далеко не всі параметри, ми перерахували лише найбільш вживані і відомі.

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


Таблиця кольорів

Отже, з основними тегами та їх параметрами ми розібралися, тепер давайте розглянемо коди кольорів HTML. Саме з їх допомогою можна задавати забарвлення тексту, сторінки або ж окремих його елементів.

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

Також є таблиця безпечних кольорів, яка налічує 216 усіляких відтіків.

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

Цей код достатньо скопіювати і підставити в параметри потрібного вам тегу.


Як переглянути код сторінки

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

Але як це зробити? Є два способи, досить простих і зрозумілих. Перший - відкрити потрібну вам сторінку і натиснути поєднання клавіш Ctrl + U. У новому вікні з 'явиться початковий код сторінки, який ви зможете подивитися і вивчити.

Другий спосіб - натиснути ліву кнопку мишки і вибрати у списку "Вихідний код". Але все ж рекомендуємо вам скористатися першим способом, оскільки застосування гарячих клавіш набагато простіше і зручніше.

Зазначимо, що, читаючи код, ви також зможете переглядати коментарі до нього, прописувані в тезі "Коментар", який виглядає так: & lt;! & gt;. При цьому сам коментар пишеться після знаку оклику. У переглядачі він не відображається. А пишеться, в основному, для того, щоб інші програмісти і веб-дизайнери змогли зрозуміти, що за блок інформації знаходиться нижче, навіщо був вказаний той чи інший шматочок коду.

Висновки

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


Зазначимо, що якщо ви вирішили вивчати цю мову розмітки, то будьте уважні. Більшість проблем виникає саме через неуважність: незакриті парні теги, неправильно прописані параметри, опікунки - все це загрожує обернутися помилкою, яку ви можете досить довго шукати. Але в цілому вивчати HTML-розмітку сторінок досить цікаво.