Практична № 3. Стильове оформлення сторінок із CSS | Модуль Вебтехнології | 10(11) клас | Речич

Інформатика : вебтехнології (вибірковий модуль для учнів 10–11 класів, рівень стандарту) / Н. В. Речич.

Практична робота № 3. Стильове оформлення сторінок із використанням CSS.

На початку роботи відкрийте вашу головну сторінку браузером, зробіть її скріншот
1. У теці site створіть теку CSS.
2. Відкрийте редактор коду. Створіть файл з іменем style.css і збережіть у теці CSS.
3. Відкрийте браузер. Виберіть будь-який генератор кольорових палітр, наприклад https://coolors.co . Згенеруйте палітру (рис. 1).
Примітка. У наданому вам коді замість «з обраної палітри!» додавайте код кольору. Не забувайте про знак «#» на початку шестицифрового коду. Для кольору тла й тексту варто вибирати контрастні відтінки.
4. Сформуйте стилі для кожного елемента сторінок сайта.
5. Почніть виконувати дії з головних елементів:
а) пропишіть стилі для body (рис. 2);
б) зробіть список-меню горизонтальним і зніміть значок маркера (рис. 3);
в) виберіть стилі для всіх елементів хедера (рис. 4);
г) виберіть стилі для блоку навігації (рис. 5);
д) виберіть стилі для абзаців (рис. 6);
Примітка. Якщо потрібно, щоб між абзацами були відступи, зі стилів слід вилучити рядки з використанням margin.
е) виберіть стилі для футера (рис. 7).
6. Збережіть файл style.css.
7. Відкрийте всі файли HTML, створені в практичній роботі № 2.
8. У кожному файлі в head додайте наведений далі рядок, прописуючи посилання на створений файл зі стилями:
link rel="stylesheet" type="text/css" href="css/style.css"
9. Збережіть і закрийте файли, оновіть у браузері головну сторінку вашого сайта.
10. Надішліть архів із роботою вчителю.
Зробіть висновок: як змінився сайт після додавання таблиць стилів; порівняйте отримані результати зі скріншотом; сформулюйте і запишіть зміни, які ви помітили.

Підтримати мою роботу: https://donatello.to/TaskInformatics

Підтримати мою роботу на Patreon:   / taskinformatics  

Завантажити текст практичного завдання: https://drive.google.com/file/d/1OyYi...

Посилання на посібник (Видавництво "Ранок"): https://www.ranok.com.ua/info-informa...