Теги HTML

Теги (дескриптори) у HTML – це спеціальні елементи розмітки, що визначають, як даний документ HTML має інтерпретуватися програмою перегляду інформації – браузером. Кожний тег описує посилання на якийсь об`єкт з
об`єктної моделі браузера.

Теги HTML бувають одно- і двокомандні.

Однокомандні теги зазвичай використовуються для зміни вигляду виведеної на екран інформації. Вони задаються в такому вигляді:

<команда [атрибут=значення [атрибут=значення ]…]>текст ,

де команда – команда HTML;

атрибут=значення – задання конкретних значень параметрам (атрибутам) команди (не є обов`язковими);

текст – текст, що виводиться на екран тільки для читання у вигляді, обумовленому командою та її атрибутами

Двокомандні теги мають такий синтаксис:

<команда [атрибут=значення [атрибут=значення ]…]>
[текст][тег][[текст][тег]…]
</команда [атрибут=значення [атрибут=значення ]…]>

де / – використовується у випадку, коли тег є останнім (закриваючим) у блоці тегів.

Основні теги
Теги заголовку
Атрибути тіла документа
Теги фізичного форматування тексту
Теги логічного форматування тексту
Якірні теги та гіперпосилання
Графичі забраження і зображення-карти
Таблиці в HTML
Фрейми
Форми (формуляри)
Основні теги – теги для відкриття/закриття документів і їхніх частин (структурні теги)
<html></html> Початок і кінець документа; вказує програмі перегляду сторінок що це HTML документ
<head></head> Заголовок; визначає місце, де поміщується різна інформація, яка не відображається в тілі документа. Тут розташовується тег назви документа та теги для пошукових машин
<body></body> Тіло документа; визначає видиму частину документа
Теги заголовку та метатеги.
<title></title> Поміщує назву документа, що відображається у заголовку вікна
<meta name="ім`я об`єкта, яким хочемо управляти" content=”значення”> або
<meta http-equiv="ім`я http-заголовка content=”значення”> 		Метатеги призначені для управління документа і не опрацьовують корисний текст документа
<meta http-equiv=”expires” content=”Mon, 13 Nov 2015 00:00:01 GMT”> При завантаженні документа браузер буде брати останню версію, а не версію кеша
<meta http-equiv=”content-Type” content=”text/html; charset=Windows-1251″> Для визначення браузером кодування веб-сторінки
<meta http-equiv=”refresh” content=”t”; url=адреса> Для примусового перезавантаження або автоматичного завантаження будь-якого документа
<meta http-equiv=”cashe-control” content=”public/private/no-cashe/no-store”> Для управління кешуванням
<meta http-equiv=”window-target” content=”top/bottom”> Для визначення вікна поточної сторінки
<meta http-equiv=”autor” content=”Ваші ПІБ, e-mail…”> Для зазначення імені автора і додаткової інформації про нього
<meta http-equiv=”copyright” content=”Ваша_фірма”> Для зазначення відомостей щодо авторських прав
<meta http-equiv=”keywords” content=”Ключові слова”> Для зазначення ключових слів і термінів. Призначений для пошукових систем (індексування) (максимум – 1000 символів)
<meta http-equiv=”description” content=”Опис сторінки”> Для короткого опису сторінки. Призначений для пошукових систем (індексування) (максимум – 200 символів)
Атрибути тіла документа
<body bgcolor=”?”> Встановлює колір фону документа, використовуючи значення кольору у вигляді RRGGBB, наприклад: FF0000 – червоний колір
<body text=”?”> Встановлює колір тексту документа, використовуючи значення кольору у вигляді RRGGBB, наприклад: 000000 – чорний колір
<body link=”?”> Встановлює колір гіперпосилань, використовуючи значення кольору у вигляді RRGGBB, наприклад: 00FF00 – зелений колір
<body vlink=”?”> Встановлює колір гіперпосилань, на яких ви вже побували, використовуючи значення кольору у вигляді RRGGBB, наприклад: 333333 – сірий колір
<body alink=”?”> Встановлює колір гіперпосилань при натисканні
Теги фізичного форматування тексту
<p></p> Створює новий абзац

Атрибут і параметри Значення
align=”left” – вирівнювання по лівому краю
align=”right” – вирівнювання по правому краю
align=”center” – вирівнювання по центру
<pre></pre> Тег авторського форматування. Виділяє попередньо відформатований і розмічений текст, тобто – рядки відображаються точно так само, як надруковані, і при цьому зберігаються множинні пробіли і переведення рядків
<b></b> Виділення жирним шрифтом (болд) – приклад
<i></i> Виділення нахиленим шрифтом (курсивом) – приклад
<u></u> Виділення підкресленням – приклад
<strike></strike> Виділення переккреслюванням – приклад
<tt></tt> Оформлення шрифтом з фіксованою шириною літер (моноширинним шрифтом); використовується рідко – приклад
<big></big> Текст із великим розміром літер (використовується рідко) – приклад
<small></small> Текст із малим розміром літер (використовується рідко) – приклад
<sub></sub> Використовується для підрядкових індексів – приклад приклад
<sup></sup> Використовується для надрядкових індексів – приклад приклад
<center></center> Відображує текстову чи графічну інформацію в центрі наданого простору
<nobr> Забороняє переведення на новий рядок
<wbr> Вказує де розбивати рядок для перенесення на новий
<br> Вставлює примусове переведення на новий рядок
Теги логічного форматування тексту
<h1></h1> Створює найбільший заголовок
<h2></h2>, <h3> </h3>, <h4></h4>, <h5> </h5> Створює заголовки проміжних розмірів
<h6></h6> Створює найменший заголовок
<blockquote></blockquote> Цитата; зазвичай відокремлюється пробілами зверху і знизу, а також відступом ліворуч, і відображається курсивом
<em></em> Текст, що має особливе значення; зазвичай виділяється крусивом – приклад
<strong></strong> Текст, що має особливе значення; “посилене” виділення тексту – приклад
<kbd></kbd> Текст, уведений користувачем – приклад
<code></code> Лістінг програми
<samp></samp> Позначає текст як зразок. Текст, позначений цим тегом, зазвичай виділяється як моноширинний
<var></var> Ім`я змінної. Зазвичай виділяється курсивом чи як моноширинний текст – приклад
<address></address> Визначає таку інформацію, як адреса, підпис і авторство. Зазвичай виділяється курсивом і відображається з відступами зверху та знизу
<acronym></acronym> Застосовується для позначення акрономів (абревіатур), наприклад WWW. Не відображується візуально, але необхідний для браузерів з мозним синтезом і в деяких інших випадках
<comment></comment> Текст, вміщений між тегами, не відображується браузером
<font></font> Тег для роботи зі шрифтами тексту

Атрибути і параметри Значення
face=”…” – задає ім`я шрифту
size=”…” – задає розмір шрифту в межах від 1 до 7 (за замовчуванням розмір дорівнює 3)
color=”…” – задає колір шрифту
<ol></ol> Створює нумерований (впорядкований) список

Атрибути і параметри Значення
type=A|a|I|i|1 – задає вид нумерації
start=n – задає число, з якого починається відлік
<ul></ul> Створює ненумерований (невпорядкований) список

Атрибути і параметри Значення
type=disk|circle|square – визначає зовнішній вигляд маркера; за замовчуванням (disk), круглий (circle) чи квадратний (square)
<li> Визначає кожен елемент списку для нумерованного і ненумерованного
<dl></dl> Створює список визначень; використовується для словника термінів
<dt> Визначає кожен з термінів списку
<dd> Описує кожне визначення
<div align=”?”></div> Важливий тег, використовується для форматування великих блоків тексту HTML документа, також використовується в таблицях стилів
Якірні теги та гіперпосилання
<a href=”url”></a> Створює гіперпосилання на іншу веб-сторінку, інтернет ресурс або файл

Атрибути і параметри Значення
target=”_Blank” Відкриття документа в новому вікні
target=”_Top” Відкриття документа в поточному вікні
target=”_Parent” Відкриття документа в батьківському фреймі
target=”_Self” Відкриття документа в поточному фреймі
  При використанні фреймів і вкладених фреймів значенням може виступати ім’я фрейма або вкладеної сітки фреймів, прицьому сторінка відкриється у вказаній частині вікна
<a href=”mailto:email”></a> Створює гіперпосилання виклику поштової програми для написання листа за вказаною адресою
<a href=”#мітка”></a> Створює гіперпосилання на мітку поточної сторінки
<a name=”мітка”></a> Зазначає частину тексту, як позначку для гіперпосилань на сторінці
<a href=”url#мітка”></a> Створює гіперпосилання на мітку іншої сторінки
Графичі забраження і зображення-карти
<img src=”url”> Додає зображення в HTML документ

Атрибути і параметри Значення
alt=”текст” Містить текстовий опис, що за замовчуванням відображаеться під картункою
align=”bottom” Вертикальне вирівнювання картинки – притиснути картинку донизу
align=”top” Вертикальне вирівнювання картинки – притиснути картинку догори
align=”middle” Вертикальне вирівнювання картинки – розташувати картинку посередені
align=”left” Горизонтальне вирівнювання картинки – притиснути картинку вліво
align=”right” Горизонтальне вирівнювання картинки – притиснути картинку вправо
align=”center” Горизонтальне вирівнювання картинки – розташувати картинку посередені
border=”…” Встановлює товщину рамки навколо зображення в пікселях (за замовчуванням 1)
width=”…” Задає ширину картинки в пікселах
height=”…” Задає висоту картинки в пікселах
vspase=”…” Встановлює поля зверху і знизу від картинки
hspase=”…” Встановлює поля з боків від картинки
<hr> Додає в HTML документ горизонтальну лінію

Атрибути і параметри Значення
size=”…” Встановлює висоту (товщину) лінії в пікселях
width=”…” Встановлює ширину лінії в пікселях або відсотках
noshade Створює лінію без тіні
color=”…” Задає лінії певний колір в значенні RRGGBB
<map name=”myname”></map> Задає зображення-карту, оремі частини якої є гіперпосиланням (чутливі області); поміщується в розділ head
<area> Задає чутливі області

Атрибути і параметри Значення
shape=”…” Форма області: rect-прямокутник; circle-коло; poly-багатокутник
href=”url” Посилання при клацанні на області мишею
nohref Задання неактивної області (при клацанні на ній мишею переходу за посиланням не відбувається)
coords=”…” Задає координати області: “x1, y1, x2, y2” – для прямокутника; “x, y, r” – для кола; “x1, y1, x2, y2,…, xn, yn, x1, y1” – для багатокутника
Таблиці в HTML
<table></table> Створює таблицю

Атрибути і параметри Значення
width=”…” Задає ширину таблиці в пікселах або відсотках
height=”…” Задає висоту рядків в таблиці в пікселах або відсотках
valign=”top” Вертикальне вирівнювання тексту – притиснути вміст догори
valign=”bottom” Вертикальне вирівнювання тексту – притиснути вниз
valign=”middle” Вертикальне вирівнювання тексту – розмістити по центру
align=”left” Горизонтальне вирівнювання тексту – притиснути вліво
align=”right” Горизонтальне вирівнювання тексту – притиснути праворуч
align=”center” Горизонтальне вирівнювання тексту – розмістити по центру
cellpadding=”…” Визначає відстань між границею комірки та її вмістом у пікселах
cellspacing=”…” Визначає відстань між комірками у пікселах
bgcolor=”…” Встановлює колір фону (у форматі RGB)
background=”url” Встановлює фонове граічне зображення (адреса)
bordercolor=”…” Встановлює колір рамки (у форматі RGB)
  Вищенаведені атрибути і параметри застосовуються також і для тегів <tr> і <td>
<tr></tr> Визначає рядок у таблиці

Атрибути і параметри Значення
colspan=”…” Встановлює число комірок, які повинні бути об’єднані по горизонталі
rowspan=”…” Встановлює число комірок, які повинні бути об’єднані по вертикалі
<td></td> Визначає окрему комірку в таблиці

Атрибути і параметри Значення
colspan=”…” Встановлює число комірок, які повинні бути об’єднані по горизонталі
rowspan=”…” Встановлює число комірок, які повинні бути об’єднані по вертикалі
<th></th> Визначає заголовок таблиці (нормальна комірка з відцентрованим жирним текстом)
<caption></caption> Визначає підпис таблиці
Фрейми – структура, коли вікно браузера розділяється на підвікна, у кожному з яких можна відображати довільні документи мовою HTML
<frameset></frameset> Передує тегу <body> в документі, що містить фрейми

Атрибути і параметри Значення
rows=[рядки] При горизонтальному розташуванні фреймів
cols=[стовпці] При вертикальному розташуванні фреймів
border= Товщина лілій границі
frameborder= Товщина розмежувальної лінії
<frame> Визначає одиничний кадр чи область в таблиці фреймів

Атрибути і параметри Значення (усі параметри необов`язкові)
scrolling= Наявність смуг прокручування: yes – смуги прокручування присутні, no
– смуги відсутні, auto – смуги присутні тільки в тому випадку, якщо домумент не міститься у фреймі
noresize= Користувач не може змінювати розмір фрейму
name= Задає ім`я фрейму, використовується для того, щоб можна було оновлювати інформацію в одному фреймі, активізуючи гіпертекстове посилання в іншому
marginwidth= Ширина бічних розділювальних смуг між фреймами
marginheight= Ширина верхніх і нижніх розділювальних смуг
target=”…” Задає способи виведення фрейму: _blank, _self, _parent, _top (див. розділ Якірні теги та гіперпосилання)
<noframes></noframes> Визначає, що буде показано у вікні браузера, якщо він не підтримує фрейми
Форми (формуляри) – це інструменти для створення програм-оброблювачів
<form></form> Створює форми

Атрибути і параметри Значення
action=”…” Визначає, де знаходиться оброблювач форми
method=”…” Визначає, яким чином (за допомогою якого методу протоколу передачі гіпертексту) дані з форми будуть передані до оброблювача. Допустимі значення: method=post і method=get, за замовчуванням передбачається останнє
enctype=”…” Визначає, яким чином дані з форми будуть закодовані для передачі до оброблювача, за замовчуванням –
enctype=application/x-www-form-urlencoded

Елементи управління формою

Тип Опис
checkbox Керуючий елемент – перемикач (прапорець перевірки)
hidden Прихований текст, використовують для обміну даними між формами
password Рядок вводу пароля
reset Кнопка “Reset”
submit Кнопка “Submit”
text Рядок для введення тексту
<input type="text" name="var-name"
value="рядок за замовчуванням"
size="розмір"
maxlength="макс_довжина"> 		Елемент управління у формі

Опції Значення
type Дозволяє вказувати, який саме тип керуючого елемента описується. Кожен тип має своє унікальне ім`я
name Вказує ім`я змінної, у якій система зберігатиме отримане значення. Ім`я не має містити пробілів
value Дозволяє визначити текст, що поміщається в рядок введення при відображенні форми (необов`язкова)
size Визначає максимальне число символів, які може побачити при введенні користувач. Ця опція працює разом з
maxlength, яка визначає кількість символів, що вводяться користувачем
<input type="password" name="var-name" value="рядок" size="25"
maxlength="15">		 Елемент управління для створення рядка з паролем
<input type="radio" name="var-name" value="рядок" checked> Елемент управління для створення перемикача-радіокнопки. Опція checked зказується для однієї з кнопок, щоб зробити її позначеною за замовчуванням
<textarea name="var-name"
rows="4"
cols="80"
Текст, за замовчуванням">
</textarea>		 Створює область для введення декількох рядків тексту
<select
name="var-name">
<option>Перший
<option selected>Другий
<option>Третій
</select>		 Створює спливаюче меню (випадаючий список)

ЗмістЗміст

➤