Теги 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>
Створює спливаюче меню (випадаючий список)


ЗмістЗміст


скачать софт