Html-код. Коди квітів html

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

Основні відомості

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

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

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

Теги

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

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

Відео: HTML Tutorial 08 Changing the Background Color, Text Color and Font Color

Парні складаються з відкриває тега і закриває, при цьому в останньому після лівої кутової дужки варто прямий сленш. наприклад: <-b>-текст<- / b>-.

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

Відео: How to Change Color, Font, and Size of a Text in HTML

Поодинокі ж складаються з одного тега і не містять в собі прямого слеша. наприклад: <-hr>-.

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

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

Основні теги

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

парні:

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

поодинокі:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Як подивитися код сторінки

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

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

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

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

висновки

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

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