# data[].attributes.headline
Довідник стилів

# data[].attributes.subject
Довідник стилів

# data[].attributes.attachment_link.title
Український веб-довідник

# data[].attributes.attachment_link.description
Веб-довідник створено, щоб допомогти Вам здобути нові знання, а також ефективніше використовувати вже здобуті.

# data[].attributes.body
<ul>...</ul> - неупорядкований (маркований) список
<ol>...</ol> - упорядкований (нумерований) список
<li>...</li> - елемент списку

Неупорядкований список
<ul type="disc"> або <ul style="list-style-type:disc;">
list-style-type - тип маркера: disc, circle, square, none

Упорядкований список
<ol type="1">
type - тип номера: type="1", type="A", type="a", type="I", type="i"
start="5" - початок нумерації

Приклад:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Списки можуть бути вкладені!

# data[].attributes.headline
Що таке анімація CSS?

# data[].attributes.subject
Що таке анімація CSS?

# data[].attributes.body
Анімація дозволяє елементу поступово змінювати стиль з одного стилю на інший.

Ви можете змінювати скільки завгодно властивостей CSS скільки завгодно разів.

Щоб використовувати CSS-анімацію, ви повинні спочатку вказати кілька ключових кадрів для анімації @keyframes.

Ключові кадри містять стилі, які матиме елемент у певний час.

# data[].attributes.headline
Гіперпосилання

# data[].attributes.subject
Гіперпосилання

# data[].attributes.body
<a href="адеса сторінки">link text</a>

Атрибут target="_blank" - Відкриває документ у новому вікні або вкладці

Посилання на сторінку, розташовану в тій же папці, що й поточна сторінка:

<a href="default.html">link text</a>

# data[].attributes.body
<img src="url" alt="alternatetext">
Приклад: <img src="img_chania.jpg" alt="Flowers in Chania">

Атрибути:

width, height (у пікселях, або відсотках),

border (border-width; border-color; border-style; тип dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden)

title - підказка, яка з'явиться коли навести на зображення

Приклад: <img src="html5.gif" alt="HTML5 Icon" width="128" height="128"> або <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
border: 4px groove orange;

# data[].attributes.headline
Основна структура

# data[].attributes.subject
Основна структура

# data[].attributes.body
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

# data[].attributes.headline
Заголовки HTML

# data[].attributes.subject
Заголовки HTML

# data[].attributes.body
<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Абзаци
<p>-</p> - визначає абзац

<br> - визначає розрив рядка

<hr> - горизонтальна лінія

# data[].attributes.headline
Елементи форматування HTML

# data[].attributes.subject
Елементи форматування HTML

# data[].attributes.body
<b>- Жирний текст

<i>- Текст курсивом

<u>-підкреслений

<strong>- Важливий текст

<em>- Підкреслений (важливий)текст

<sub>- Підрядковий текст

<sup>- Надрядковий текст

# data[].attributes.body
Атрибути - додаткові властивості, зазвичай представлені парами ім’я/значення, наприклад: name="value"

Наприклад:

<h1 align="center">Hello!</h1> - вирівнювання тексту на сорінці (left, right,center, justify)

<body style="background-color:powderblue;"> - заливка фону сторінки

# data[].attributes.headline
Атрибут стилю HTML

# data[].attributes.subject
Атрибут стилю HTML

# data[].attributes.body
Атрибут HTML style має такий синтаксис:

<тег style="властивість: значення;">

<h1 style="color:blue;">...</h1> - колір тексту

<h1 style="background-color:powderblue;">...</h1> - заливка рядка тексту кольором

<h1 style="font-family:verdana;">...</h1> - сімейство шрифтів тексту (приклади тут)

<h1 style="font-size:30px;">...</h1> - розмір тексту

<h1 style="text-align:center;">...</h1> - вирівнювання тексту (може набувати значень "center", "left", "right", "justify")

# data[].attributes.body
<table>...</table> - таблиця

<tr>...</tr> - рядок таблиці

<td>...</td> - клітинка таблиці

<th>...</th> - заголовок стовпця або рядка

Приклад:

<table border="1">

<tr>

<td>Emil</td>

<td>Tobias</td>

<td>Linus</td>

</tr>

<tr>

<td>16</td>

<td>14</td>

<td>10</td>

</tr>

</table>

Межі талиці задаються атрибутом border="1"

# data[].attributes.body
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered

# data[].attributes.attachment_link.description
The W3Schools online code editor allows you to edit code and view the result in your browser

# data[].attributes.headline
Колір клітинок і таблиці

# data[].attributes.subject
Колір клітинок і таблиці

# data[].attributes.body
Атрибут bgcolor може задавати колір як тла усієї таблиці, так і окремих рядків та клітинок:
<td bgcolor="lightblue"> 4</td>

# data[].attributes.headline
Об'єднання рядків або стовпців

# data[].attributes.subject
Об'єднання рядків або стовпців

# data[].attributes.body
Щоб розширити клітинку на кілька стовпців, використовуйте атрибут colspan:

<td colspan="2">Name</td>

Щоб охопити клітинкою кілька рядків, використовуйте атрибут rowspan:

<th rowspan="2">Phone</th>

Щоб додати підпис до таблиці, використовуйте <caption>тег:

<table style="width:100%">

<caption>Заголовок</caption>

# data[].attributes.headline
Вирівнювання

# data[].attributes.subject
Вирівнювання

# data[].attributes.body
Вміст клітинок та таблицю загалом можна вирівнювати через атрибут align (center, left, right, justify) та по вертикалі valign (top, bottom, middle).

# data[].attributes.headline
Межі таблиці

# data[].attributes.subject
Межі таблиці

# data[].attributes.body
https://www.w3schools.com/html/html_table_borders.asp

HTML Table Borders

# data[].attributes.attachment_link.readable_text
HTML tables can have borders of different styles and shapes.

How To Add a Border

When you add a border to a table, you also add borders around each table cell:

To add a border, use the CSS border property on table, th, and td elements:

Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

Example

Try it Yourself "

Style Table Borders

If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Example

Try it Yourself "

Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

Try it Yourself "

Skip the border around the table by leaving out table from the css selector:

Dotted Table Borders

With the border-style property, you can set the appearance of the border.

The following values are allowed:

Border Color

With the border-color property, you can set the color of the border.

# data[].attributes.attachment_link.description
HTML tables can have borders of different styles and shapes. When you add a border to a table, you also add borders around each table cell: To add a border, use the CSS border property on table, th, and td elements: To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

# data[].attributes.headline
Каскадні таб

# data[].attributes.body
Каскадні таблиці стилів (CSS) використовуються для форматування макета веб-сторінки.
CSS можна додати до документів HTML трьома способами:

Inline - за допомогою style атрибута всередині елементів HTML

<h1 style="color:blue;">A Blue Heading</h1>

Внутрішній - за допомогою <style>елемента в <head>розділі

<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>

Зовнішній - за допомогою <link> елемента для посилання на зовнішній файл CSS

<link rel="stylesheet" type="text/css" href="...">

# data[].attributes.body
•text-align: center; - вирівнювання

•color: #ff0000; - колір тексту

•background-color: #c5ffa0 – колір фону

•background-image: url(fon.jpg) - фон

•background-attachment: fixed; - фіксація

•border-style: solid;- обводка елемента

•border-width: 1px; - товщина обводки

•border-radius: 25px; - округлення кутів

•text-shadow: 2px 2px 2px; - тінь тексту
•font-family:verdana; - шрифт
•font-size:30px; - розмір тексту

# data[].attributes.headline
Властивості стилів, їхні значення та призначення

# data[].attributes.subject
Властивості стилів, їхні значення та призначення

# data[].attributes.body
background-attachment -- fixed, scroll -- тло стале чи прокручуєтся;
background-color -- red, green, #343434 -- колір тла;
background-image -- url-адреса графічного файлу для тла;
background-position -- 0% 0% --— початкове розташування тла;
background-repeat -- repeat, repeat-x, repeat-y, no-repeat -- повторювання зображення тла;
border-top, border-right, border-bottom, border-left, border -- 4mm -- товщина лінії рамки;
border-color -- red, green, #343434 -- колір рамки;
border-style -- none, dotted, dashed, solid, double, groove, ridge, inset, outset -- стиль рамки
font-family -- arial, sans-serif -- гарнітура;
font-size -- 24px -- розмір шрифту;
font-style -- normal, italic, oblique -- стиль шрифту;
font-variant -- normal, small-caps --  варіант шрифту;
font-weight -- normal (400), bold (700), bolder, lighter, 100-900 -- жирність шрифту;
word-spacing -- 1mm, 2mm -- відстань між словами;
letter-spacing -- 1mm -- відстань між символами;
line-height -- 2mm, 4mm -- відстань між рядками;
text-align -- left, right, center, justify -- вирівнювання тексту;
text-decoration -- none, underline, blink, overline, line-through -- оформлення тексту;
text-indent -- 2cm --  абзацний відступ;
text-transform -- none, uppercase, lowercase, capitalize -- трансформація тексту;
vertical-align -- baseline, sub, super, top, text-top, middle, bottom, text-bottom -- вертикальне вирівнювання;
white-space -- normal, pre, nowrap, pre-wrap, pre-line --  пробіли та перенесення між словами;
margin-top, margin-right, margin-bottom, margin-left, margin -- 4mm -- зовнішній відступ;
padding-top, padding-right, padding-bottom, padding-left, padding -- 4mm --  внутрішній відступ;
height -- 4cm --  висота елемента;
width -- 14cm -- ширина елемента;
float -- none, left, right -- обтікання об'єкта текстом;
clear -- none, left, right, both --  заборона обтікання;
color -- red, green, #343434 --  колір елемента;
list-style-image -- url(aдреса графічного файлу маркера списку) --  зображення для маркера;
list-style-position -- inside, outside --  позиція маркера;
list-style-type -- disc, circle, square, decimal, lower-alpha, lower-roman, upper-alpha, upper-roman --  вигляд маркера;
position --  static, relative, absolute, fixed --  спосіб позиціонування елемента;
top, right, bottom, left -- px, in, pt, %, auto тощо -- позиціонування елемента;
z-index -- ціле число, auto -- положення елемента за віссю z;
display -- block, inline-block, inline, list-item, none, table, table-row, table-cell -- відображення елемента в документі;
visibility -- visible, hidden, collapse -- відобразити чи сховати елемент;
overflow -- visible, hidden, scroll, auto -- спосіб відображення вмісту елемента, якщо він повністю не вміщується в задану область;
clip -- shape(rect), auto -- визначає прямокутну область, де буде показано частину елемента
outline-color, outline-style, outline-width, outline -- 4mm -- зовнішня рамка
cursor -- default, pointer, help, wait, progress, text, move, crosshair, auto -- вигляд вказівника

# data[].attributes.headline
Селектор елементів CSS

# data[].attributes.subject
Селектор елементів CSS

# data[].attributes.body
Тег
p {
text-align: center;
color: red;
}
Ідентифікатор
#para1 {
text-align: center;
color: red;
}
Клас
.center {
text-align: center;
color: red;
}
Універсальний селектор
* {
text-align: center;
color: blue;
}
Селектори можна групувати!!!
h1, h2, p {
text-align: center;
color: red;
}

# data[].attributes.headline
Позиціювання елементів на сторінці

# data[].attributes.subject
Позиціювання елементів на сторінці

# data[].attributes.body
1. position: static

За замовчуванням всі елементи на сторінці мають статичне позиціонування
2. position: relative

Положення елемента встановлюється щодо його вихідного місця. Додавання властивостей left, top, right і bottom змінює позицію елемента, на тому місці, де б мав бути блок, утвориться порожній простір.
3. position: absolute

Абсолютне позиціонування використовується тоді, коли потрібно помістити елемент саме в тому місці екрана, де ми хочемо його бачити. Місце, яке вони займали, стає як би порожнім і його займають сусідні елементи.
4. position: fixed

Завжди знаходиться у видимій області екрана, і не рухається під час прокрутки сторінки.
5.position: sticky

Липкий елемент перемикається між relative та fixed, залежно від положення прокручування.
http://lesson-css.blogspot.com/p/position.html

# data[].attributes.attachment_link.readable_text
1. position: static

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

2. position: relative

Положення елемента встановлюється щодо його вихідного місця. Додавання властивостей left, top, right і bottom змінює позицію елемента і зрушує його в ту чи іншу сторону від початкового розташування.
Наприклад, потрібно перемістити блок#content на 20 пікселів вниз, і на 40 пікселів вліво:

на тому місці, де б мав бути блок #content, утвориться порожній простір. Наступний за блоком #content, блок #footer НЕ переміститься нижче, тому що, #content як і раніше займає своє місце в документі, не дивлячись на те, що його пересунули. Всі інші елементи НЕ ЗНАЮТЬ, що елемент перемістився.

3. position: absolute

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

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

Ширина за замовчуванням залежить від вмісту (а не розтягується на всю доступну ширину).

Залишаються на тому ж місці, де були, якщо не задані значення властивостей top, left, right, bottom.

Якщо рядковий елемент позиційований абсолютно, то він поводиться точно так само, як і абсолютно позиційовані блоки (можна задавати розміри).

Властивості left, top, right і bottom для "відносних" елементів задають зміщення відносно початкової позиції, а для "абсолютних" елементів вони задають розташування щодо якоїсь системи координат (вікно браузера за замовчуванням, або одного з батьків).

Якщо батьківський елемент має position: relative а дочірній блок position: absolute, то елемент буде позиціонуватися відносно батьківського елемента

ВИСНОВОК: абсолютно позиційовані елементи видаляються з потоку, а відносні займають чужі позиції.

4. position: fixed

Фіксоване позиціювання ( position: fixed), є підрозділом абсолютного позиціонування. Єдина його відмінність в тому, що він завжди знаходиться у видимій області екрана, і не рухається під час прокрутки сторінки. В цьому відношенні, він трохи схожий на фіксований фонове зображення.

Фіксований елемент випадає з потоку документа.

Елемент прив'язується до певної точки у вікні браузера і залишається на ній завжди, навіть при прокручуванні сторінки.

Фіксований елемент можна позиціонувати за допомогою властивостей top, left, right, bottom, але точка відліку завжди прив'язана до вікна браузера.

5. position:relative + position:absolute

Зазвичай відносне позиціонування саме по собі застосовується не часто, оскільки для зміщення елемента від його початкового положення є ряд інших властивостей, наприклад, margin або transform. Але комбінація різних типів позиціонування для вкладених елементів є одним із зручних і практичних прийомів верстки. Якщо для батьківського елемента задати relative, а для дочірнього absolute, то відбудеться зміна системи координат і положення дочірнього елемента при цьому вказується відносно батьківського елемента

Відлік координат ведеться від внутрішнього краю кордону, значення padding не враховуються.

Для батьківcького елемента допустимо вказувати значення relative, absolute, fixed або sticky. Якщо у дочірнього елемента властивість position:absolute, то відлік координат ведеться від батьківського.

Поєднання відносного і абсолютного позиціонування можна застосовувати і до псевдоелементів:: before і :: after. Це скорочує розмір коду HTML, оскільки нам вже не потрібні зайві елементи, і дозволяє робити всякі цікаві декоративні ефекти.

ЗАВДАННЯ ДЛЯ САМОСТІЙНОЇ РОБОТИ

Завдання 1
1. Зкопіювати у свою папку наступний код:

для style.css

body { background: #F7EEBC; }

.photo {
border: 5px solid white;
height: 225px; width: 300px;
margin: 50px auto;

/*тіні для картини згенерувати на сайті cssmatic.com/box-shadow*/
-webkit-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
box-shadow: 0px 10px 7px rgba(0,0,0,0.4), 0px 20px 10px rgba(0,0,0,0.2);
}
.photo:before {
content: "scotch"; /*смужка скотчу */
height: 20px;
width: 100px;
background: rgba(255,0,0,0.5);

-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
box-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

2. Розмістити смужку скотчу посередині картини так як показано на малюнку:

Використовуючи абсолютне позиціювання створити таку веб-сторінку (квадрати розміром 50*50рх, висота body: 150px;

Завдання 3

Використовуючи абсолютне позиціювання створити таку веб-сторінку (квадрати розміром 50*50рх, висота body: 150px;

Використовуючи абсолютне позиціювання створити таку веб-сторінку (квадрати розміром 50*50рх, висота body: 150px;

Використовуючи абсолютне позиціювання створити таку веб-сторінку (квадрати розміром 50*50рх, висота body: 150px;

Використовуючи позиціюваня z-index створити таку веб-сторінку (квадрати розміром 50*50рх,` висота body: 150px;

Використовуючи позиціюваня z-index створити таку веб-сторінку (квадрати розміром 50*50рх,` висота body: 150px;

Використовуючи відносне позиціювання створити веб-сторінку де основний блок стоїть по центру за допомогою margin: auto, а решта позиціонуються відносно нього за допомогою властивості position

Використовуючи відносне та абсолютне позиціювання створити веб-сторінку де основний блок стоїть по центру за допомогою margin: auto, а решта позиціонуються відносно нього за допомогою властивості position (квадрати 100*100рх, зелений блок 500*400рх)

Завдання 10

# data[].attributes.attachment_link.title
Позиціювання елементів на сторінці

# data[].attributes.attachment_link.description
За замовчуванням всі елементи на сторінці мають статичне позиціонування ( position: static), це означає, що елемент не позиціонується, і з'являється в документі на своєму звичайному місці, тобто в тому ж порядку, як і в html-розмітці. Немає необхідності спеціально призначати це властивість будь-якого елементу, якщо тільки вам не потрібно змінити раніше встановлений позиціонування на дефолтний.

# data[].attributes.headline
Властивість дисплея

# data[].attributes.subject
Властивість дисплея

# data[].attributes.body
Властивість display визначає, чи відображається елемент. Значенням за замовчуванням для більшості елементів є block або inline.
Інші display -- block, inline-block, inline, list-item, none, table, table-row, table-cell -- відображення елемента в документі;
Приховати елемент можна, встановивши display: none.

# data[].attributes.headline
Властивість z-index

# data[].attributes.subject
Властивість z-index

# data[].attributes.body
Коли елементи розташовані, вони можуть перекривати інші елементи.
Властивість z-index визначає порядок стека елемента (який елемент слід розташувати перед іншими або позаду інших).
Елемент може мати позитивний або негативний порядок стека.
Якщо два розміщені елементи накладаються один на одного без z-index, елемент, визначений останнім у HTML-коді , буде показаний зверху

# data[].attributes.body
flexbox, це режим створений для упорядкування елементів на сторінці  коли розмітка адаптована під різні розміри екрану і різні девайси.
Щоб почати використовувати модель Flexbox, потрібно спочатку визначити flex-контейнер:
.container { display: flex; }

Властивості контейнера flex:

flex-direction (row, row-reverse, column, column-reverse)

flex-wrap (nowrap, wrap, wrap-reverse)

flex-flow

justify-content (flex-start, flex-end, center, space-between, space-around)

align-items (stretch, flex-start, flex-end, center, baseline)

align-content (stretch, flex-start, flex-end, center, space-between, space-around)

# data[].attributes.attachment_link.title
A Complete Guide to Flexbox | CSS-Tricks

# data[].attributes.attachment_link.description
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser suppor…

# data[].attributes.attachment_link.description
This process is automatic. Your browser will redirect to your requested content shortly.

# data[].attributes.headline
Медіа-запити

# data[].attributes.subject
Медіа-запити

# data[].attributes.body
Правило @media, введене в CSS2, дозволило визначити різні правила стилю для різних типів медіа.
Приклад
@media screen and (max-width: 992px) {
body {
background-color: blue;

# data[].attributes.body
padding — внутрішні відступи  між зображенням та рамкою;

padding-top, padding-right, padding-bottom, padding-left

Приклад: padding: 25px 50px 75px 100px;

margin — задає відступи від зображення від усіх чотирьох країв;

margin-top, margin-right, margin-bottom, margin-left

Приклад: margin: 25px 50px 75px 100px;

# data[].attributes.attachment_link.title
Рисунок1ппвап

# data[].attributes.headline
Обтікання текстом

# data[].attributes.subject
Обтікання текстом

# data[].attributes.body
Для взаємного розміщення тексту і зображень призначений атрибут ALIGN у тегу , який може набувати, зокрема, таких значень:

• left — зображення розміщене в лівій частині сторінки, текст обтікає його з правого боку;

• right — зображення розміщене у правій частині сторінки, текст обтікає його з лівого боку;

• top — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно за верхньою межею малюнка;

• bottom — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно за нижньою межею малюнка;

• middle — обтікання немає, зображення розміщене в тексті, відповідний рядок якого вирівняно по середній лінії малюнка.

# data[].attributes.headline
Карти посилань

# data[].attributes.subject
Карти посилань

# data[].attributes.body
За допомогою карт зображень HTML ви можете створювати на зображенні зони, які можна натискати
Тег  <map> визначає карту зображення
Області визначаються одним або кількома <area>тегами

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

# data[].attributes.body
https://www.w3schools.com/css/css3_animations.asp

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.body
https://www.w3schools.com/html/html_images_imagemap.asp

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.body
https://www.w3schools.com/css/css3_2dtransforms.asp

# data[].attributes.body
https://www.w3schools.com/css/css3_3dtransforms.asp

# data[].attributes.attachment_link.readable_text
CSS 3D Transforms

CSS also supports 3D transformations.

Mouse over the elements below to see the difference between a 2D and a 3D transformation:

In this chapter you will learn about the following CSS property:

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS 3D Transforms Methods

With the CSS transform property you can use the following 3D transformation methods:

The rotateX() Method

The rotateX() method rotates an element around its X-axis at a given degree:

The rotateY() Method

The rotateY() method rotates an element around its Y-axis at a given degree:

The rotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree:

CSS Transform Properties

The following table lists all the 3D transform properties:

CSS 3D Transform Methods

matrix3d
( n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)

Defines a 3D transformation, using a 4x4 matrix of 16 values

# data[].attributes.attachment_link.description
CSS also supports 3D transformations. Mouse over the elements below to see the difference between a 2D and a 3D transformation: In this chapter you will learn about the following CSS property: The numbers in the table specify the first browser version that fully supports the property.

# data[].attributes.body
https://www.w3schools.com/css/css3_transitions.asp

# data[].attributes.attachment_link.description
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

# data[].attributes.body
<img src="адеса" alt="альтернативний текст ">
Приклад: <img src="img_chania.jpg" alt="Flowers in Chania">

Атрибути:

width, height (у пікселях, або відсотках),

border (border-width; border-color; border-style; тип dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden)

title - підказка, яка з'явиться коли навести на зображення

Приклади:

1) Зображення розташоване на ПК:

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

2) <img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
border: 4px groove orange;

3) Зображення розташоване в Інтернеті:

<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">

# data[].attributes.headline
Анімація об'єктів

# data[].attributes.subject
Анімація об'єктів

# data[].attributes.body
https://animate.style/

# data[].attributes.attachment_link.readable_text
Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under.

Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Edit this on GitHub

Installation and Usage

Installing

Install with npm:

$ npm install animate.css --save

Or install with Yarn (this will only work with appropriate tooling like Webpack, Parcel, etc. If you are not using any tool for packing or bundling your code, you can simply use the CDN method below):

$ yarn add animate.css

Import it into your file:

import 'animate.css';

Or add it directly to your webpage using a CDN:

<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> </head>

Basic usage

After installing Animate.css, add the class animate__animated to an element, along with any of the animation names (don't forget the animate__ prefix!):

<h1 class="animate__animated animate__bounce">An animated element</h1>

That's it! You've got a CSS animated element. Super!

Animations can improve the UX of an interface, but keep in mind that they can also get in the way of your users! Please read the best practices and gotchas sections to bring your web-things to life in the best way possible.

Using @keyframes

Even though the library provides you a few helper classes like the animated class to get you up running quickly, you can directly use the provided animations keyframes. This provides a flexible way to use Animate.css with your current projects without having to refactor your HTML code.

Example:

.my-element { display: inline-block; margin: 0 0.5rem; animation: bounce; /* referring directly to the animation's @keyframe declaration */ animation-duration: 2s; /* don't forget to set a duration! */ }

Be aware that some animations are dependent on the animation-timing property set on the animation's class. Changing or not declaring it might lead to unexpected results.

CSS Custom Properties (CSS Variables)

Since version 4, Animate.css uses custom properties (also known as CSS variables) to define the animation's duration, delay, and iterations. This makes Animate.css very flexible and customizable. Need to change an animation duration? Just set a new value globally or locally.

Example:

/* This only changes this particular animation duration */ .animate__animated.animate__bounce { --animate-duration: 2s; } /* This changes all the animations globally */ :root { --animate-duration: 800ms; --animate-delay: 0.9s; }

Custom properties also make it easy to change all your animation's time-constrained properties on the fly. It means that you can have a slow-motion or time-lapse effect with a javascript one-liner:

// All animations will take twice the time to accomplish document.documentElement.style.setProperty('--animate-duration', '2s'); // All animations will take half the time to accomplish document.documentElement.style.setProperty('--animate-duration', '.5s');

Even though some aging browsers do not support custom properties, Animate.css provides a proper fallback, widening its support for any browser that supports CSS animations.
Edit this on GitHub

Utility Classes

Animate.css comes packed with a few utility classes to simplify its use.

Delay classes

You can add delays directly on the element's class attribute, just like this:

Animate.css provides the following delays:

The provided delays are from 1 to 5 seconds. You can customize them setting the --animate-delay property to a longer or a shorter duration:

/* All delay classes will take 2x longer to start */ :root { --animate-delay: 2s; } /* All delay classes will take half the time to start */ :root { --animate-delay: 0.5s; }

Slow, slower, fast, and Faster classes

You can control the speed of the animation by adding these classes, as below:

The animate__animated class has a default speed of 1s. You can also customize the animations duration through the --animate-duration property, globally or locally. This will affect both the animations and the utility classes. Example:

/* All animations will take twice as long to finish */ :root { --animate-duration: 2s; } /* Only this element will take half the time to finish */ .my-element { --animate-duration: 0.5s; }

Notice that some animations have a duration of less than 1 second. As we used the CSS calc() function, setting the duration through the --animation-duration property will respect these ratios. So, when you change the global duration, all the animations will respond to that change!

Repeating classes

You can control the iteration count of the animation by adding these classes, like below:

As with the delay and speed classes, the animate__repeat class is based on the --animate-repeat property and has a default iteration count of 1. You can customize them by setting the --animate-repeat property to a longer or a shorter value:

/* The element will repeat the animation 2x It's better to set this property locally and not globally or you might end up with a messy situation */ .my-element { --animate-repeat: 2; }

Notice that animate__infinite doesn't use any custom property, and changes to --animate-repeat will have no effect. Don't forget to read the best practices section to make the best use of repeating animations.
Edit this on GitHub

Best Practices

Animations can greatly improve an interface's UX, but it's important to follow some guidelines to not overdo it and deteriorate the user experience on your web-things. Following the following rules should provide a good start.

Meaningful animations

You should avoid animating an element just for the sake of it. Keep in mind that animations should make an intention clear. Animations like attention seekers (bounce, flash, pulse, etc) should be used to bring the user's attention to something special in your interface and not only as a way to bring "flashiness" to it.

Entrances and exit animations should be used to orientate what is happening in the interface, clearly signaling that it's transitioning into a new state.

It doesn't mean that you should avoid adding playfulness to the interface, just be sure that the animations are not getting in the way of your user and that the page's performance is not affected by an exaggerated use of animations.

Don't animate large elements

Avoid it as it won't bring much value to the user and will probably only cause confusion. Besides that, there is a good chance that the animations will be junky, culminating in bad UX.

Don't animate root elements

Animating the <html/> or <body/> tags is possible, but you should avoid it. There were some reports pointing out that this could trigger some weird browser bugs. Besides, making the whole page bounce would hardly provide good value to your UX. If you indeed need this sort of effect, wrap your page in an element and animate it, like this:

Infinite animations should be avoided

Even though Animate.css provides utility classes for repeating animations, including an infinite one, you should avoid endless animations. It will just distract your users and might annoy a good slice of them. So, use it wisely!

Mind the initial and final state of your elements

All the Animate.css animations include a CSS property called animation-fill-mode, which controls the states of an element before and after animation. You can read more about it here. Animate.css defaults to animation-fill-mode: both, but you can change it to suit your needs.

Don't disable the prefers-reduced-motion media query

Since version 3.7.0 Animate.css supports the prefers-reduced-motion media query which disables animations based on the OS system's preference on supporting browsers (most current browsers support it). This is a critical accessibility feature and should never be disabled! This is built into browsers to help people with vestibular and seizure disorders. You can read more about it here. If your web-thing needs the animations to function, warn users, but don't disable the feature. You can do it easily with CSS only. Here's a simple example:

See the Pen Prefers-reduce-motion media query by Elton Mesquita (@eltonmesquita) on CodePen.

Gotchas

You can't animate inline elements

Even though some browsers can animate inline elements, this goes against the CSS animation specs and will break on some browsers or eventually cease to work. Always animate block or inline-block level elements (grid and flex containers and children are block-level elements too). You can set an element to display: inline-block when animating an inline-level element.

Overflow

Most of the Animate.css animations will move elements across the screen and might create scrollbars on your web-thing. This is manageable using the overflow: hidden property. There's no recipe to when and where to use it, but the basic idea is to use it in the parent holding the animated element. It's up to you to figure out when and how to use it, this guide can help you understand it.

Intervals between repeats

Unfortunately, this isn't possible with pure CSS right now. You have to use Javascript to achieve this result.
Edit this on GitHub

Usage with Javascript

You can do a whole bunch of other stuff with animate.css when you combine it with Javascript. A simple example:

const element = document.querySelector('.my-element'); element.classList.add('animate__animated', 'animate__bounceOutLeft');

You can detect when an animation ends:

const element = document.querySelector('.my-element'); element.classList.add('animate__animated', 'animate__bounceOutLeft'); element.addEventListener('animationend', () => { // do something });

or change its duration:

const element = document.querySelector('.my-element'); element.style.setProperty('--animate-duration', '0.5s');

You can also use a simple function to add the animations classes and remove them automatically:

const animateCSS = (element, animation, prefix = 'animate__') => // We create a Promise and return it new Promise((resolve, reject) => { const animationName = `${prefix}${animation}`; const node = document.querySelector(element); node.classList.add(`${prefix}animated`, animationName); // When the animation ends, we clean the classes and resolve the Promise function handleAnimationEnd(event) { event.stopPropagation(); node.classList.remove(`${prefix}animated`, animationName); resolve('Animation ended'); } node.addEventListener('animationend', handleAnimationEnd, {once: true}); });

And use it like this:

animateCSS('.my-element', 'bounce'); // or animateCSS('.my-element', 'bounce').then((message) => { // Do something after the animation });

If you had a hard time understanding the previous function, have a look at const, classList, arrow functions, and Promises.
Edit this on GitHub

Migration from v3.x and Under

Animate.css v4 brought some improvements, improved animations, and new animations, which makes it worth upgrading. However, it also comes with a breaking change: we have added a prefix for all of the Animate.css classes - defaulting to animate__ - so a direct migration is impossible.

But fear not! Although the default build, animate.min.css, brings the animate__ prefix we also provide the animate.compat.css file which brings no prefix at all, like the previous versions (3.x and under).

If you're using a bundler, update your import:

from:

import 'animate.min.css';

to

import 'animate.compat.css';

Notice that depending on your project's configuration, this might change a bit.

In case of using a CDN, update the link in your HTML:

from:

<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" /> </head>

to

<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" /> </head>

In the case of a new project, it's highly recommended to use the default prefixed version as it'll make sure that you'll hardly have classes conflicting with your project. Besides, in later versions, we might decide to discontinue the animate.compat.css file.
Edit this on GitHub

Custom Builds

Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.

Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks.

First of all, you'll need Node and all other dependencies:

$ git clone https://github.com/animate-css/animate.css.git $ cd animate.css $ npm install

Next, run npm start to compile your custom build. Three files will be generated:

animate.css: raw build, easy to read and without any optimization

animate.min.css: minified build ready for production

animate.compat.css: minified build ready for production without class prefix. This should only be used as an easy path for migrations.

For example, if you'll only use some of the "attention seekers" animations, simply edit the ./source/animate.css file, delete every @import and the ones you want to use.

@import 'attention_seekers/bounce.css'; @import 'attention_seekers/flash.css'; @import 'attention_seekers/pulse.css'; @import 'attention_seekers/rubberBand.css'; @import 'attention_seekers/shake.css'; @import 'attention_seekers/headShake.css'; @import 'attention_seekers/swing.css'; @import 'attention_seekers/tada.css'; @import 'attention_seekers/wobble.css'; @import 'attention_seekers/jello.css'; @import 'attention_seekers/heartBeat.css';

Now, just run npm start and your highly optimized build will be generated at the root of the project.

Changing the default prefix

It's pretty straight forward to change animate's prefix on your custom build. Change the animateConfig's prefix property in the package.json file and rebuild the library with npm start:

/* on Animate.css package.json */ "animateConfig": { "prefix": "myCustomPrefix__" },

then:

Easy peasy!
Edit this on GitHub

Accessibility

Animate.css supports the prefers-reduced-motion media query so that users with motion sensitivity can opt out of animations. On supported platforms (currently all the major browsers and OS, including mobile), users can select "reduce motion" on their operating system preferences, and it will turn off CSS transitions for them without any further work required.
Edit this on GitHub

License and Contributing

Animate.css is licensed under the Hippocratic License.

Contributing

Pull requests are the way to go here. We only have two rules for submitting a pull request: match the naming convention (camelCase, categorized [fades, bounces, etc.]) and let us see a demo of submitted animations in a pen. That last one is important.

Code of Conduct

This project and everyone participating in it is governed by the Contributor Covenant Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to animate@eltonmesquita.com.
Edit this on GitHub

# data[].attributes.attachment_link.title
Animate.css | A cross-browser library of CSS animations.

# data[].attributes.attachment_link.description
Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

# data[].attributes.attachment_link.readable_text
Privacy Policy
Effective date: 26 December 2019
Animista collects some Personal Data from its Users.

TL;DR Version

Analytics

Google Analytics
Personal Data: Cookies; Usage Data

Advertising

BuySellAds
Personal Data collected: Cookies and Usage Data.

Managing contacts and sending messages

Mailchimp
Personal Data: email address

COMPLETE PRIVACY POLICY

Animista ("us", "we", or "our") operates the animista.net website (hereinafter referred to as the "Service").

This page informs you of our policies regarding the collection, use, and disclosure of personal data when you use our Service and the choices you have associated with that data.

We use your data to provide and improve the Service. By using the Service, you agree to the collection and use of information in accordance with this policy.

Definitions

Service

Service is the animista.net website/application.

Personal Data

Personal Data means data about a living individual who can be identified from those data (or from those and other information either in our possession or likely to come into our possession).

Usage Data

Usage Data is data collected automatically either generated by the use of the Service or from the Service infrastructure itself (for example, the duration of a page visit).

Cookies

Cookies are small files stored on your device (computer or mobile device).

Information Collection and Use

We collect several different types of information for various purposes to provide and improve our Service to you:

Personal Data

While using our Service, we may ask you to provide us with certain personally identifiable information that can be used to contact or identify you ("Personal Data"). Personally identifiable information may include, but is not limited to:

Usage Data

We may also collect information how the Service is accessed and used ("Usage Data"). This Usage Data may include information such as your computer's Internet Protocol address (e.g. IP address), browser type, browser version, the pages of our Service that you visit, the time and date of your visit, the time spent on those pages, unique device identifiers and other diagnostic data.

Tracking and Cookies Data

We use cookies and similar tracking technologies to track the activity on our Service and we hold certain information.

Cookies are files with a small amount of data which may include an anonymous unique identifier. Cookies are sent to your browser from a website and stored on your device. Other tracking technologies are also used such as beacons, tags and scripts to collect and track information and to improve and analyse our Service.

You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you do not accept cookies, you may not be able to use some portions of our Service.

Use of Data

Animista uses the collected data for various purposes:

To provide and maintain the Service

To notify you about changes to our Service

To allow you to participate in interactive features of our Service when you choose to do so

To provide customer care and support

To provide analysis or valuable information so that we can improve the Service

To monitor the usage of the Service

To detect, prevent and address technical issues

Transfer Of Data

Your information, including Personal Data, may be transferred to and maintained on computers located outside of your state, province, country or other governmental jurisdiction where the data protection laws may differ than those from your jurisdiction.

Your consent to this Privacy Policy followed by your submission of such information represents your agreement to that transfer.

Animista will take all steps reasonably necessary to ensure that your data is treated securely and in accordance with this Privacy Policy and no transfer of your Personal Data will take place to an organization or a country unless there are adequate controls in place including the security of your data and other personal information.

Disclosure Of Data

Animista may disclose your Personal Data in the good faith belief that such action is necessary to:

To comply with a legal obligation

To protect and defend the rights or property of Animista

To prevent or investigate possible wrongdoing in connection with the Service

To protect the personal safety of users of the Service or the public

To protect against legal liability

As an European citizen, under GDPR, you have certain individual rights. You can learn more about these guides in the GDPR Guide.

Security of Data

The security of your data is important to us but remember that no method of transmission over the Internet or method of electronic storage is 100% secure. While we strive to use commercially acceptable means to protect your Personal Data, we cannot guarantee its absolute security.

Service Providers

We may employ third party companies and individuals to facilitate our Service ("Service Providers"), to provide the Service on our behalf, to perform Service-related services or to assist us in analyzing how our Service is used.

These third parties have access to your Personal Data only to perform these tasks on our behalf and are obligated not to disclose or use it for any other purpose.

Analytics

We may use third-party Service Providers to monitor and analyze the use of our Service.
Google Analytics (Google LLC)
Google Analytics is a web analysis service provided by Google LLC ("Google"). Google utilizes the Data collected to track and examine the use of Animista, to prepare reports on its activities and share them with other Google services.

Google may use the Data collected to contextualize and personalize the ads of its own advertising network.

Personal Data collected: Cookies; Usage Data.

Place of processing: United States - Privacy Policy - Opt Out. Privacy Shield participant.

Advertising

This type of service allows User Data to be utilized for advertising communication purposes displayed in the form of banners and other advertisements on this Website, possibly based on User interests.

This does not mean that all Personal Data are used for this purpose. Information and conditions of use are shown below. Some of the services listed below may use Cookies to identify Users or they may use the behavioral retargeting technique, i.e. displaying ads tailored to the User's interests and behavior, including those detected outside this Website. For more information, please check the privacy policies of the relevant services.

In addition to any opt-out offered by any of the services below, the User may opt out of a third-party service's use of cookies by visiting the Network Advertising Initiative opt-out page.
BuySellAds (BuySellAds.com Inc.)
BuySellAds is an advertising service provided by BuySellAds.com Inc.

Personal Data collected: Cookies and Usage Data.

Place of processing: United States - Privacy Policy.

Managing contacts and sending messages

This type of service makes it possible to manage a database of email contacts, phone contacts or any other contact information to communicate with the User.

These services may also collect data concerning the date and time when the message was viewed by the User, as well as when the User interacted with it, such as by clicking on links included in the message.
Mailchimp (The Rocket Science Group LLC)
Mailchimp is an email address management and message sending service provided by The Rocket Science Group LLC.

Personal Data collected: email address.

Place of processing: United States - Privacy Policy. Privacy Shield participant.

Links to Other Sites

Our Service may contain links to other sites that are not operated by us. If you click a third party link, you will be directed to that third party's site. We strongly advise you to review the Privacy Policy of every site you visit.

We have no control over and assume no responsibility for the content, privacy policies or practices of any third party sites or services.

Children's Privacy

Our Service does not address anyone under the age of 18 ("Children").

We do not knowingly collect personally identifiable information from anyone under the age of 18. If you are a parent or guardian and you are aware that your Child has provided us with Personal Data, please contact us. If we become aware that we have collected Personal Data from children without verification of parental consent, we take steps to remove that information from our servers.

Changes to This Privacy Policy

We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.

You are advised to review this Privacy Policy periodically for any changes. Changes to this Privacy Policy are effective when they are posted on this page.

Contact Us

If you have any questions about this Privacy Policy, please contact us by email: cssanimista@gmail.com

# data[].attributes.attachment_link.description
Effective date: 26 December 2019 Animista collects some Personal Data from its Users. Analytics Google Analytics Personal Data: Cookies; Usage Data Advertising BuySellAds Personal Data collected: Cookies and Usage Data. Managing contacts and sending messages Mailchimp Personal Data: email address Animista ("us", "we", or "our") operates the animista.net website (hereinafter referred to as the "Service").

# data[].attributes.headline
Анімація слайдерів 

# data[].attributes.subject
Анімація слайдерів 

# data[].attributes.body
https://swiperjs.com/

# data[].attributes.attachment_link.readable_text
Swiper is the most modern free and open source mobile touch slider with hardware accelerated transitions and amazing native behavior. Use it on websites, web apps, and mobile native/hybrid apps.

Swiper, along with other great components, is a part of Framework7 and Ionic Framework - a fully-featured frameworks for building iOS & Android apps.

# data[].attributes.attachment_link.title
Swiper - The Most Modern Mobile Touch Slider

# data[].attributes.attachment_link.description
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

# data[].attributes.headline
Таблиця кольорів HTML / CSS

# data[].attributes.subject
Таблиця кольорів HTML / CSS

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.headline
Тег для виділення частини тексту

# data[].attributes.subject
Тег для виділення частини тексту

# data[].attributes.body
Елемент <span>, використовується для фарбування частини тексту:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

# data[].attributes.headline
Мультимедіа в Інтернет

# data[].attributes.body
Мультимедіа в Інтернеті – це звук, музика, відео, фільми та анімація.

# data[].attributes.headline
Елемент video

# data[].attributes.subject
Елемент video

# data[].attributes.body
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

# data[].attributes.headline
Елемент audio

# data[].attributes.subject
Елемент audio

# data[].attributes.body
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

# data[].attributes.body
1. Відкийте відео YouTube

2. Натисніть поділитися ⤻

3. Оберіть кнопку вставити <>

4. Скопіюйте код зручним способом

5. Додайте до вебсторінки

# data[].attributes.attachment_link.description
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

# data[].attributes.attachment_link.title
UI Animation and Microinteractions - Awwwards

# data[].attributes.attachment_link.description
These prime examples use Canvas, SVG, CSS3, WebGL and more to enhance visual content.

# data[].attributes.headline
Форма це елемент HTML-

# data[].attributes.body
Форма це елемент HTML-документа, що забезпечує взаємозв'язок з Web-вузлом. Форми використовуються для опитування відвідувачів, замовлення різних послуг та інших дій

<form>...</form>

Атрибути форм:

action, значенням якого є URL для передачі на вузол інформації з форми;

metod, що приймає значення get або post (визначення способу  передачі даних форми до  вузла

<form action=“test.php" method=“get">

# data[].attributes.headline
Елементи поле для введення

# data[].attributes.subject
Елементи поле для введення

# data[].attributes.body
Більшість з основних елементів фом створюється за допомогою непарного тегу <input>. В залежності від його атрибут type=" " поле для введення може бути:

text - текстове поле

password - поле з паролем

email - електронна скринька

url веб-адреса

number - число

search - поле пошуку

date - введення дати

file - поле для відправлення файлу

textarea - визначає багаторядкове поле введення

radio - тип перемикачі

checkbox - прапорець.

Підпис для поля: <label>First name </label> <br>

# data[].attributes.headline
Елемент Кнопка

# data[].attributes.subject
Елемент Кнопка

# data[].attributes.body
Дію стосовно відправлення заповненої форми можна записати в кнопці <button>...</button>  і її атрибут type=" " може бути:

submit - кнопка для відправлення форми.

reset - кнопка для очищення форми.

image - кнопка із зображенням

# data[].attributes.headline
Атрибути поля для введення

# data[].attributes.subject
Атрибути поля для введення

# data[].attributes.body
placeholder - підказка користувачу

required - оов'язкове поле

value - початкове значення для поля disabled - поле неактивне

maxlength - визначає максимальну кількість символів, дозволених у полі введення

min та max - визначають мінімальне та максимальне значення (числа)

# data[].attributes.headline
Елемент radio

# data[].attributes.subject
Елемент radio

# data[].attributes.body
Радіокнопки дозволяють користувачеві вибрати лише один варіант з обмеженої кількості:

<p>Please select your favorite Web language:</p>

<input type="radio" id="html" name="fav_language" value="HTML">

<label for="html">HTML</label><br>

<input type="radio" id="css" name="fav_language" value="CSS">

<label for="css">CSS</label><br>

<input type="radio" id="javascript" name="fav_language" value="JavaScript">

<label for="javascript">JavaScript </label>

Примітка: Щоб група вважалася групою , група перемикачів повинна мати однакову назву (значення атрибута name)

Атрибут value визначає унікальне значення, пов’язане з кожною радіокнопкою. Значення не відображається користувачеві, але є значенням, яке надсилається на сервер під час «надсилання», щоб визначити, яка радіокнопка була вибрана

# data[].attributes.headline
Елемент checkbox (прапорець)

# data[].attributes.subject
Елемент checkbox (прапорець)

# data[].attributes.body
Прапорці використовуються, щоб користувач міг вибрати один або декілька варіантів з обмеженої кількості доступних

<p>Please select your favorite Web languages:</p>

<input type="checkbox" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>

<input type="checkbox" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>

<input type="checkbox" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>

# data[].attributes.headline
Випадаючий список

# data[].attributes.subject
Випадаючий список

# data[].attributes.body
<select name="cars">
<option value="volvo">Volvo</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

# data[].attributes.attachment_link.title
Уроки від W3Schools українською онлайн

# data[].attributes.attachment_link.description
W3Schools українською пропонує безкоштовні онлайн-уроки, навчальні та довідкові матеріали, завдання та вправи на більшості мовах програмування та створення веб-сайтів. Охоплює найбільш популярні технології, такі як HTML, CSS, JavaScript, PHP, Python, SQL, Java, C++, C#, Kotlin, Go, фреймворки Bootstrap, W3.CSS та багато інших