Завдання

Виконайте верстку web-сторінки на базі макета, так як показано на рисунку 5.6. Спозиціонуйте зображення, використовуючи властивість position.

Рис. 5.6. Вигляд web-сторінки в браузері

Рис. 5.7. Структура коду web-сторінки 

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

1. На локальному диску свого ПК створіть папку.
2. Розархівуйте в дану папку Додаткові матеріали_ПЗ5, що містить зображення, які необхідно буде розмістити на web-сторінці.
3. Відкрийте редактор коду Visual Studio Code, а в ньому — папку pr5_position.
4. У папці pr5_position створіть новий html-документ з ім’ям index.html і файл style.css, де будемо прописувати css-правила.
5. У файлі index.html cтворіть структуру коду, указану на рисунку 5.7., і підключіть відразу зовнішню таблицю стилів, файл style.css.
6. Виконайте верстку на базі макета, так як показано на рисунку 5.6.
7. Застосуйте властивості, для блоку .canvas: ширина — 800 пікселів, висота — 1000 пікселів. Колір фону — білий , а малюнок фону png (властивість background-image: url(../images/bg.png).
8. Для зображень .img-1, .img-2, .img-3 задайте властивість position, що рівна absolute. Відступ зверху — 250 пікселів. Вирівняйте зображення, щоб вони були  рівномірно розміщені по ширині так, як показано на рисунку. Для цього розрахуйте left для кожного зображення.
9. Заголовок slogan розмістіть із лівим відступом 50px, і  зверху — 150px. Позиціювання — абсолютне.
10. Заголовок second-slogan розмістіть із правим відступом 38px, і зверху — 722px. Позиціювання — абсолютне.
11. Перевірте роботу, відкривши створену web-сторінку в браузері. Запакуйте папку pr5_position в архів з ім’ям pr5_position -Прізвище й завантажте в область під умовою завдання (позначену написом Для додавання файлів ви можете просто перетягнути їх сюди).

Поясніть значення властивості padding: 10px 5px  20px

Укажіть позиціювання за замовчуванням

Укажіть, що потрібно прописати елементу, щоб позиціювати його відносно екрана браузера

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

Укажіть, яку клавішу потрібно утримувати, для того щоб, виділивши будь-який об’єкт, можна було побачити точну відстань у пікселях від нього до іншого об’єкта

Укажіть, для чого потрібні сітки

Cпеціальний вид об’єктів, які створюються на основі фреймів для побудови елементів інтерфейсу, що часто використовуються

Укажіть, яке із тверджень є прикладом гарного дизайну web-сайту

Укажіть, яким поєднанням клавіш можна створити Autolayout