Завдання

Cтворити й оформити web-сторінку за зразком рис. 4.4, використовуючи можливості HTML і CSS.

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

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

1. На локальному диску свого ПК створіть папку pr4_css.

2. Розархівуйте в дану папку Додаткові матеріали_ПЗ4, яка містить текст і зображення, що необхідно буде розмістити на web-сторінці.

3. Відкрийте редактор коду Visual Studio Code, а в ньому —  папку pr4_css.

4. У папці pr4_css створіть новий html-документ з ім’ям index.html і файл style.css, де будемо прописувати css-правила.

5. У файлі index.html cтворіть структуру коду, вказану на зображенні, і підключіть відразу зовнішню таблицю стилів, файл style.css.

6. Додайте мета-теги charset і viewport. Заповніть title (назва статті).

7. Заповніть текстом і зображеннями на основі рис. 4.4. Текст візьміть із файлу text.txt. Вивчіть, як виглядає сторінка сайту без застосування css.

8. Додайте в CSS файл наступні стилі:

• Для всіх елементів(*{}) margin установіть — рівний нулю.
• Для класу .container задайте максимальну ширину 1000px, і відступи( margin) зверху і знизу — 20px, по боках — автоматично.
• Для всіх заголовків задайте розмір шрифту 24px, жирний, сімейство — Impact, вирівнювання по центру, margin зверху і знизу — по 30px.
• Для заголовка h1 задайте розмір шрифту 32px.
• Для параграфів задайте Arial, sans-serif. Розмір шрифту — 18px, висота рядка —150 %.
• Для зображень задайте максимальну ширину 80 %. Відображення(display) — block, margin зверху і знизу — 20px, справа і зліва — auto.
• Параграф із класом img-description вирівнювання тексту — по центру, курсив, відступ зверху — 20px, знизу — 40px.
• Для ul списку шрифти Arial, sans-serif, 18px, висота рядка —  150 %.

9. Стилі для .text-green і .text-bold додати самостійно.

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