Веб-технології by Тетяна Шудря https://padlet.com/sudratetana/vebtehnologii10 Зроблено з радістю en-us 2022-02-09 14:19:54 UTC 2026-05-14 00:00:26 UTC hello@padlet.com Основна структура sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2037996490 <!DOCTYPE html>
<html>
<head>
        <title>My first page</title>
</head>
<body>

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

</body>
</html>]]> 2022-02-09 14:23:42 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2037996490 Атрибути sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2038685244 Атрибути - додаткові властивості, зазвичай представлені парами ім’я/значення, наприклад: name="value"

Наприклад:

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

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


]]> 2022-02-09 19:06:08 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2038685244 Заголовки HTML sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2038692696 <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> - горизонтальна лінія

]]> 2022-02-09 19:09:39 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2038692696 Атрибут стилю HTML sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2038712538 Атрибут 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")


]]> 2022-02-09 19:19:39 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2038712538 Елементи форматування HTML sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2038718239

  • <b>- Жирний текст

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

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

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

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

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

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


    • ]]>     2022-02-09 19:22:13 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2038718239     Гіперпосилання sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2038731175 <a href="адеса сторінки">link text</a>


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


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

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

    ]]>     2022-02-09 19:28:41 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2038731175     sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2038748055 <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"

    ]]>     2022-02-09 19:37:03 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2038748055     Списки HTML sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2038768886 <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>

    Списки можуть бути вкладені!]]>     2022-02-09 19:48:03 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2038768886     Приклад sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2038770808 https://www.w3schools.com/html/tryit.asp?filename=tryhtml_lists_ordered]]> 2022-02-09 19:49:06 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2038770808 Межі таблиці sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2047000536 https://www.w3schools.com/html/html_table_borders.asp

    HTML Table Borders
    ]]>     2022-02-14 18:59:42 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2047000536     Об'єднання рядків або стовпців sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2047014192 Щоб розширити клітинку на кілька стовпців, використовуйте атрибут colspan:

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


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

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


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

    <table style="width:100%">

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

    ]]>     2022-02-14 19:06:17 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2047014192     Колір клітинок і таблиці sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2047082531 Атрибут bgcolor може задавати колір як тла усієї таблиці, так і окремих рядків та клітинок:
    <td bgcolor="lightblue"> 4</td>]]>     2022-02-14 19:35:56 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2047082531     Вирівнювання sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2047086171 Вміст клітинок та таблицю загалом можна вирівнювати через атрибут align (center, left, right, justify) та по вертикалі valign (top, bottom, middle).]]> 2022-02-14 19:37:46 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2047086171 sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2060955502 Каскадні таблиці стилів (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="...">
    ]]>     2022-02-22 16:44:28 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2060955502     Команди CSS sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2060970530 •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; - розмір тексту
    ]]>     2022-02-22 16:52:04 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2060970530     Селектор елементів CSS sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2060978485 Тег
    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;
    }]]>     2022-02-22 16:56:19 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2060978485     Властивості стилів, їхні значення та призначення sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2060988475
    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 -- вигляд вказівника

    ]]>     2022-02-22 17:01:12 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2060988475     Позиціювання елементів на сторінці sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121846722 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 
    ]]>     2022-03-30 16:20:01 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121846722     Робота з flexbox sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121857262 flexbox, це режим створений для упорядкування елементів на сторінці  коли розмітка адаптована під різні розміри екрану і різні девайси.
    Щоб почати використовувати модель Flexbox, потрібно спочатку визначити flex-контейнер:
    .container { display: flex; }

    Властивості контейнера flex:]]>     2022-03-30 16:25:21 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121857262     sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121861973 2022-03-30 16:27:56 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121861973 sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121864536 2022-03-30 16:29:18 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121864536 Властивість дисплея sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121876593 Властивість display визначає, чи відображається елемент. Значенням за замовчуванням для більшості елементів є block або inline.
    Інші display -- block, inline-block, inline, list-item, none, table, table-row, table-cell -- відображення елемента в документі;
    Приховати елемент можна, встановивши display: none.]]>     2022-03-30 16:35:45 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121876593     Властивість z-index sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121889260
    Коли елементи розташовані, вони можуть перекривати інші елементи.
    Властивість z-index визначає порядок стека елемента (який елемент слід розташувати перед іншими або позаду інших).
    Елемент може мати позитивний або негативний порядок стека.
    Якщо два розміщені елементи накладаються один на одного без z-index, елемент, визначений останнім у HTML-коді , буде показаний зверху]]>     2022-03-30 16:42:35 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121889260     Медіа-запити sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121924512 Правило @media, введене в CSS2, дозволило визначити різні правила стилю для різних типів медіа.
    Приклад 
    @media screen and (max-width: 992px) {
      body {
        background-color: blue;]]>     2022-03-30 17:01:10 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121924512     Зображення sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121959966 <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;
    ]]>     2022-03-30 17:20:04 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121959966     sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121960965 2022-03-30 17:20:35 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121960965 Відступи sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121974894
    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;
    ]]>     2022-03-30 17:28:11 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121974894     sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2121975762 2022-03-30 17:28:42 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2121975762 Обтікання текстом sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2122226789 Для взаємного розміщення тексту і зображень призначений атрибут ALIGN у тегу , який може набувати, зокрема, таких значень:

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

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

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

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

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

    ]]>     2022-03-30 20:00:36 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2122226789     sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2130174199 https://www.w3schools.com/css/css3_animations.asp]]> 2022-04-05 07:28:37 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2130174199 Карти посилань https://padlet.com/sudratetana/vebtehnologii10/wish/2522449665 За допомогою карт зображень 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>]]>     2023-03-19 19:29:41 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2522449665     https://padlet.com/sudratetana/vebtehnologii10/wish/2522450773 https://www.w3schools.com/html/html_images_imagemap.asp]]> 2023-03-19 19:31:28 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2522450773 2D Анімація sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2541114990 https://www.w3schools.com/css/css3_2dtransforms.asp]]> 2023-04-02 13:35:04 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2541114990 3D Анімація sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2541115610 https://www.w3schools.com/css/css3_3dtransforms.asp]]> 2023-04-02 13:36:19 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2541115610 Переходи sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2541116123 https://www.w3schools.com/css/css3_transitions.asp]]> 2023-04-02 13:37:30 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2541116123 Анімація об'єктів sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2655287263 https://animate.style/]]> 2023-08-03 06:48:19 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2655287263 Анімація слайдерів sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2655287637 https://swiperjs.com/]]> 2023-08-03 06:48:59 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2655287637 Таблиця кольорів HTML / CSS https://padlet.com/sudratetana/vebtehnologii10/wish/2869622647 2024-02-01 09:32:27 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2869622647 Зображення sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2874854770 <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">

    ]]>     2024-02-06 10:15:56 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2874854770     Тег для виділення частини тексту sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2882091123 Елемент <span>, використовується для фарбування частини тексту:

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

    ]]>     2024-02-13 11:15:43 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2882091123     sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2950771411 Мультимедіа в Інтернеті – це звук, музика, відео, фільми та анімація.

    ]]>     2024-04-11 07:51:32 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2950771411     Елемент video sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2950776582 <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>

    ]]>     2024-04-11 07:55:08 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2950776582     Елемент audio sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2950777186 <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>

    ]]>     2024-04-11 07:55:40 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2950777186     Відео з YouTube у HTML sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2950844914

  • Відкийте відео YouTube

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

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

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

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

    • ]]>     2024-04-11 09:07:14 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2950844914     Детальніше sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/2950846016 2024-04-11 09:08:26 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/2950846016 Що таке анімація CSS? sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3400177257 Анімація дозволяє елементу поступово змінювати стиль з одного стилю на інший.

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

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

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

    ]]>     2025-04-08 06:03:08 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3400177257     sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3400178659 2025-04-08 06:04:01 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3400178659 Приклади sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3400190300 2025-04-08 06:12:07 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3400190300 Довідник стилів sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3813017579 2026-03-05 08:50:25 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3813017579 Зразок sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3864994793 2026-04-13 16:30:53 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3864994793 sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3908679116 Форма це елемент HTML-документа, що забезпечує взаємозв'язок з Web-вузлом. Форми використовуються для опитування відвідувачів, замовлення різних послуг та інших дій

    <form>...</form>

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

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

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

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

    ]]>     2026-05-12 09:58:09 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3908679116     Елементи поле для введення sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3908691216 Більшість з основних елементів фом створюється за допомогою непарного тегу <input>. В залежності від його атрибут type=" " поле для введення може бути:

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

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

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

    • url веб-адреса

    • number - число

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

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

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

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

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

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


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

    ]]>     2026-05-12 10:09:40 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3908691216     Елемент Кнопка sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3908695246 Дію стосовно відправлення заповненої форми можна записати в кнопці <button>...</button>  і її атрибут type=" " може бути:

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

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

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

    ]]>     2026-05-12 10:14:11 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3908695246     Атрибути поля для введення sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3908704008

  • placeholder - підказка користувачу

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

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

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

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

    • ]]>     2026-05-12 10:22:15 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3908704008     Елемент radio sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3908733677 Радіокнопки дозволяють користувачеві вибрати лише один варіант з обмеженої кількості:

    <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 визначає унікальне значення, пов’язане з кожною радіокнопкою. Значення не відображається користувачеві, але є значенням, яке надсилається на сервер під час «надсилання», щоб визначити, яка радіокнопка була вибрана

    ]]>     2026-05-12 10:49:31 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3908733677     Елемент checkbox (прапорець) sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3908735124 Прапорці використовуються, щоб користувач міг вибрати один або декілька варіантів з обмеженої кількості доступних

    <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>

    ]]>     2026-05-12 10:50:59 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3908735124     Випадаючий список sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3908753815 <select name="cars">
      <option value="volvo">    Volvo</option>
      <option value="fiat">    Fiat</option>
      <option value="audi">    Audi</option>
    </select>

    ]]>     2026-05-12 11:10:01 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3908753815     Форми в HTML sudratetana https://padlet.com/sudratetana/vebtehnologii10/wish/3908755377 2026-05-12 11:11:39 UTC https://padlet.com/sudratetana/vebtehnologii10/wish/3908755377