ПР№16

Практична роботи №16 на тему "Форматування Web-сторінок"

Мета роботи:

Метою цієї практичної роботи є засвоєння основних принципів форматування веб-сторінок за допомогою HTML та CSS. Ви навчитеся створювати структуру сторінки, додавати стилі, працювати з макетами (Flexbox та Grid), а також додавати інтерактивні елементи за допомогою CSS.

Завдання:

Створення структури HTML:
- Використовуючи основні теги HTML (<header>, <main>, <section>, <footer>), створіть базову структуру веб-сторінки.
- Додайте навігаційне меню з посиланнями на розділи сторінки.
Додавання стилів CSS:
- Використовуйте CSS для стилізації тексту, кольорів фону, відступів та рамок.
- Додайте градієнтний фон для заголовка сторінки.
- Застосуйте CSS для створення ефектів при наведенні на посилання та кнопки.
Робота з макетами:
- Використовуйте Flexbox та Grid для створення адаптивних макетів.
- Забезпечте коректне відображення сторінки на різних пристроях (десктоп, планшет, мобільний телефон).
Інтерактивні елементи:
- Додайте ефекти при наведенні на посилання та кнопки.
- Використовуйте CSS-переходи для плавних анімацій.

Хід роботи:

Створення базової структури HTML:
- Відкрийте текстовий редактор (наприклад, Visual Studio Code) та створіть новий файл з розширенням .html.
- Додайте базову структуру HTML-документа, включаючи теги <html>, <head>, <body>.
- У розділі <body> створіть структуру сторінки, використовуючи теги <header>, <main>, <section>, <footer>.
Додавання CSS:
- Створіть файл styles.css та підключіть його до HTML-документа за допомогою тегу <link>.
- Додайте стилі для тексту, кольорів фону, відступів та рамок.
- Використовуйте CSS для створення градієнтного фону для заголовка сторінки.
Робота з макетами:
- Використовуйте Flexbox для створення гнучкого макету навігаційного меню.
- Застосуйте CSS Grid для створення сітки карток у розділі "Завдання".
Додавання інтерактивних елементів:
- Додайте ефекти при наведенні на посилання та кнопки за допомогою CSS.
- Використовуйте CSS-переходи для плавних анімацій.

index.html

styles.css

Google Sites

Report abuse