Таблиця в текстовому документі "Теги HTML"

Про матеріал

Таблиця "Теги HTML" - матеріал до уроків вивчення модуля "Веб-технології" у 10-11 класах. Описано основні теги, теги заголовку та метатеги, атрибути тіла документа, теги фізичного форматування тексту, теги логічного форматування тексту, якірні теги та гіперпосилання,графічні зображення і зображення-карти, таблиці в 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”	– вирівнювання по центру

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

<b></b>

Виділення жирним шрифтом (болд) – приклад

<i></i>

Виділення нахиленим шрифтом (курсивом) – приклад

<u></u>

Виділення підкресленням – приклад

Виділення переккреслюванням – приклад

Оформлення шрифтом з фіксованою шириною літер (моноширинним шрифтом); використовується рідко – приклад

Текст із великим розміром літер (використовується рідко) – приклад

Текст із малим розміром літер (використовується рідко) – приклад

Використовується для підрядкових індексів – приклад _{приклад}

Використовується для надрядкових індексів – приклад ^{приклад}

Відображує текстову чи графічну інформацію в центрі наданого простору

<nobr>

Забороняє переведення на новий рядок

<wbr>

Вказує де розбивати рядок для перенесення на новий

<br>

Вставлює примусове переведення на новий рядок

Теги логічного форматування тексту

Створює найбільший заголовок

Створює заголовки проміжних розмірів

Створює найменший заголовок

Цитата; зазвичай відокремлюється пробілами зверху і знизу, а також відступом ліворуч, і відображається курсивом

Текст, що має особливе значення; зазвичай виділяється крусивом – приклад

Текст, що має особливе значення; “посилене” виділення тексту – приклад

Текст, уведений користувачем – приклад

Лістінг програми

Позначає текст як зразок. Текст, позначений цим тегом, зазвичай виділяється як моноширинний

Ім`я змінної. Зазвичай виділяється курсивом чи як моноширинний текст – приклад

Визначає таку інформацію, як адреса, підпис і авторство. Зазвичай виділяється курсивом і відображається з відступами зверху та знизу

Застосовується для позначення акрономів (абревіатур), наприклад WWW. Не відображується візуально, але необхідний для браузерів з мозним синтезом і в деяких інших випадках

Текст, вміщений між тегами, не відображується браузером

Тег для роботи зі шрифтами тексту

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

Створює нумерований (впорядкований) список

*Атрибути і параметри*	*Значення*
type=A\|a\|I\|i\|1	– задає вид нумерації
start=n	– задає число, з якого починається відлік

Створює ненумерований (невпорядкований) список

*Атрибути і параметри*	*Значення*
type=disk\|circle\|square	– визначає зовнішній вигляд маркера; за замовчуванням (disk), круглий (circle) чи квадратний (square)

Визначає кожен елемент списку для нумерованного і ненумерованного

Створює список визначень; використовується для словника термінів

<dt>

Визначає кожен з термінів списку

<dd>

Описує кожне визначення

Важливий тег, використовується для форматування великих блоків тексту HTML документа, також використовується в таблицях стилів

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

Створює гіперпосилання на іншу веб-сторінку, інтернет ресурс або файл

*Атрибути і параметри*	*Значення*
target=”_Blank”	Відкриття документа в новому вікні
target=”_Top”	Відкриття документа в поточному вікні
target=”_Parent”	Відкриття документа в батьківському фреймі
target=”_Self”	Відкриття документа в поточному фреймі
	При використанні фреймів і вкладених фреймів значенням може виступати ім’я фрейма або вкладеної сітки фреймів, прицьому сторінка відкриється у вказаній частині вікна

Створює гіперпосилання виклику поштової програми для написання листа за вказаною адресою

Створює гіперпосилання на мітку поточної сторінки

Зазначає частину тексту, як позначку для гіперпосилань на сторінці

Створює гіперпосилання на мітку іншої сторінки

Графічні зображення і зображення-карти

Додає зображення в 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

Задає зображення-карту, оремі частини якої є гіперпосиланням (чутливі області); поміщується в розділ 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

Створює таблицю

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

Визначає рядок у таблиці

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

Визначає окрему комірку в таблиці

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

Визначає заголовок таблиці (нормальна комірка з відцентрованим жирним текстом)

Визначає підпис таблиці

Фрейми – структура, коли вікно браузера розділяється на підвікна, у кожному з яких можна відображати довільні документи мовою HTML

Передує тегу <body> в документі, що містить фрейми

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

<frame>

Визначає одиничний кадр чи область в таблиці фреймів

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

Визначає, що буде показано у вікні браузера, якщо він не підтримує фрейми

Форми (формуляри) – це інструменти для створення програм-оброблювачів

Створює форми

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

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

*Тип*	*Опис*
checkbox	Керуючий елемент – перемикач (прапорець перевірки)
hidden	Прихований текст, використовують для обміну даними між формами
password	Рядок вводу пароля
reset	Кнопка “Reset”
submit	Кнопка “Submit”
text	Рядок для введення тексту

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

*Опції*	*Значення*
type	Дозволяє вказувати, який саме тип керуючого елемента описується. Кожен тип має своє унікальне ім`я
name	Вказує ім`я змінної, у якій система зберігатиме отримане значення. Ім`я не має містити пробілів
value	Дозволяє визначити текст, що поміщається в рядок введення при відображенні форми (необов`язкова)
size	Визначає максимальне число символів, які може побачити при введенні користувач. Ця опція працює разом з maxlength, яка визначає кількість символів, що вводяться користувачем

Елемент управління для створення рядка з паролем

Елемент управління для створення перемикача-радіокнопки. Опція checked зказується для однієї з кнопок, щоб зробити її позначеною за замовчуванням

Створює область для введення декількох рядків тексту

<select
name="var-name">
<option>Перший
<option selected>Другий
<option>Третій
</select>

Створює спливаюче меню (випадаючий список)

<nav> </nav> - тег контейнер для реалізації навігації по сайту, містить навігаційні посилання; має обов'язків атрибут href, значенням якого є назва сторінки з розширенням .html

Тег <footer> </footer> задає «підвал» сайту або розділу, в ньому може розташовуватися ім'я автора, дата документа, контактна та правова інформація.

docx

Завантажити

Зберегти на потім

Додав(-ла)

Кулик Ірина Олександрівна

Пов’язані теми

Інформатика, 10 клас, Матеріали до уроків

Додано

17 березня 2023

Переглядів

821

Оцінка розробки

Відгуки відсутні