CSS-властивість border-style: дає можливість для елемента встановити...

CSS-властивість text-transform: дає можливість для тексту задати...

CSS-властивість color: дає можливість для елемента задати...

CSS-властивість font-size: дає можливість для тексту задати...

Укажіть, яке розширення має файл із набором стилів (зовнішня таблиця стилів)

Завдання

Використовуючи базові теги мови HTML, створити web-сторінку за зразком (див. нижче).

Порядок виконання завдання

1. На локальному диску свого ПК створіть папку pr3_html.
2. Розархівуйте в дану папку Додаткові матеріали_ПЗ3, що містить текст і зображення, які необхідно буде розмістити на web-сторінці.
3. Відкрийте редактор коду Visual Studio Code, а в ньому — папку pr3_html.
4. У папці pr3_html створіть новий html-документ. Назвіть його index.html. Створіть у ньому структуру тегів, прописавши Doctype, html, head, meta charset, meta viewport, title, body.
5. Усередині тегу body створіть h1 і розмістіть у ньому текст Сім чудес України: історико-культурні пам’ятки, якими ми пишаємос так, як показано на рисунку (див. нижче).
6. Після h1 створіть h2 і розмістіть у ньому текст Кам’янець-Подільська фортеця, як показано на рисунку (див. нижче).
7. Створіть після заголовка параграф із текстом. Текст курсив. Текст візьміть із шаблону (див. рисунок нижче).
8. Додайте тег img із покликанням на малюнок. Малюнок знаходиться в папці  images. Розмір зображення встановіть через атрибут width= “450px”
9. Після зображення додайте параграф із текстом (див. рисунок нижче).
10. Після параграфа розмістіть маркований список, використовуючи тег ul з елементами. 
11. Для кожного елементу списку своріть гіперпокликання на web-сторінку з Вікіпедії про відповідну пам’ятку. Наприклад, при натиснені на елемент списку парк «Софіївка» у новій вкладці відкривається сторінка з Вікіпедії, де йде мова про парк «Софіївка».

1. Перевірте роботу, відкривши створену web-сторінку в браузері. Запакуйте папку pr3_html в архів з ім’ям pr3_html-Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів, ви можете просто перетягнути їх сюди).

Укажіть, що означає тег <li > мови HTML 

Укажіть, який формат (розширення) має web-сторінка 

Укажіть, що означає тег <ul > мови HTML 

Для виконання практичної частини уважно ознайомтеся з наведеними прикладами в методичних рекомендаціях до практичного заняття.

Використовуючи можливості мови JavaScript виконайте завдання 1–10:

1. Додайте кнопку, яка запускає функцію clickHandler(), що переміщує дану кнопку на 10px вправо, збільшує розміри даної кнопки й змінює її колір. Кнопку застилізуйте на свій смак.
2. У HTML є порожній список ul з id ingredients
   <ul id="ingredients"></ul>. У JS є масив рядків:

const ingredients = [

'Картопля',

'Гриби',

'Часник',

'Помідори',

'Зелень',

Приправи',

];

Напишіть скрипт, який для кожного елементу масиву ingredients створює окремий <li>, після чого вставить усі li за одну операцію в список ul.ingredients. Для створення DOM-вузлів використовуйте document.createElement().

1. Створити html-сторінку зі списком книг. При наведенні на назву книги, колір фону повинен змінюватися на зелений. Врахуйте, що при повторному наведені на іншу книгу, з попередньої виділення прибирається. Список книг застилізуйте на свій смак.

• «Володар кілець» Джон Р. Р. Толкін
• «Гордість і упередження» Джейн Остін
• «Темні початки» Філіп Пулман
• «Автостопом по галактиці» Дуглас Адамс
• «Гаррі Поттер і Кубок вогню» Джоан Роулінг
• «Вбити пересмішника» Харпер Лі.

1. Напишіть функцію lighterFactory(), яка на сторінці створює різнокольорову гірлянду (кружечки різного кольору). Сценарій використання такий: користувач при виклику функції вказує кількість елементів (лампочок), які необхідно створити. Після цього на сторінці з’являється зазначена кількість різнокольорових кружечків.
   
2. Створити на сторінці один елемент radiobutton і кнопку button. Застилізуйте на свій смак. При натисненні на кнопку в блок div виводьте value, прописане для radiobutton, якщо radiobutton активний, або 0 — якщо radiobutton не активний.
3. Напишіть скрипт створення і вилучення колекції елементів. Користувач вводить кількість елементів в input і натискає кнопку Створити, після чого рендириться (створюється) колекція. Коли користувач натисне на кнопку Очистити, колекція елементів зникає зі сторінки.

Алгоритм виконання

• Створіть функцію createBoxes(amount), яка приймає один параметр amount — число. Функція створює стільки div, скільки вказано в amount, і додає їх в div з id boxes.
• Кожен створений div має:

     — випадковий rgb колір фону.

     — розмір самого першого div — 30px на 30px.

• Кожен наступний div після першого має бути ширший і вищий попереднього.
• Створіть функцію destroyBoxes(), яка очищає div з id:

<div id="controls">

     <input type="number" min="0" max="100" step="1" />

     <button type="button" data-action="render">Создать</button>

      <button type="button" data-action="destroy">Очистить</button>

</div>

<div id="boxes"></div>

1. Напишіть скрипт, який реагує на зміну значення input з id font-size-control (подія input) і змінює інлайн-стиль span з id text, оновлюючи властивість font-size. У результаті при переміщенні повзунка (регулятора) буде змінюватися розмір тексту:

<input id="font-size-control" type="range" />

<br />

<span id="text">Абракадабра!</span>

1. Створіть галерею зображень, кожне з яких не активне. При клацанні по зображенню, воно стає активним. При наступному клацанні по ньому воно знову стає неактивним. Для двох станів задайте наступні стилі:

• Активний стан: фільтр — відтінки сірого (0%); непрозорість — 1.
• Неактивний стан: фільтр — відтінки сірого (100%); непрозорість — 0.5.
  

1. Дано чекбокси й кнопку. По натисканню на кнопку вивести в рядок значення вибраних елементів:
   
2. Реалізувати в контейнері можливість переглядати світлини одна за одною при клацанні курсора. Світлини змінюють одна одну з ефектом слайдингу.

Порядок виконання завдань

1. Для кожного із завдань має бути створена папка, iм’я якої містить номер завдання, наприклад: task-1 (task-2, task-10).
2. У кожній папці з номером завдання має бути 3 файли: index.html, style.css та task-1(номер завдання).js. Наприклад:

3. Після виконання всіх завдань запакуйте їх в архів з ім’ям pr-10_JS-5_Прізвище і завантажте в область під умовою завдання (позначену написом «Для додавання файлів, ви можете просто перетягнути їх сюди»).