Створення меню

Ось так виглядає просте меню.

Кожен пункт — це окремий <li>

HTML лише створює структуру, а CSS робить її красивою. Зазвичай список перетворюють у горизонтальне меню:

Модуль Flexbox

CSS Flexbox (Flexible Box Layout Module) — модуль макета гнучкого контейнера, що являє собою спосіб компонування елементів. Технологія flexbox ставить на меті зробити шари�гнучкими, а роботу з ними інтуїтивно зрозумілою.�Flexbox складається з гнучкого контейнера (flex container)�і гнучких елементів (flex items). Останні можуть вибудовуватися в рядок або стовпець, а вільний простір розподіляється між ними розподіляється між ними.

Тег <div> — це спеціальний блоковий елемент в HTML, який використовується для групування інших елементів у документі. Він не має власного візуального відображення (як, наприклад, текст або зображення), але дозволяє структурно організувати контент, щоб застосовувати стилі, оформлення або додавати скрипти до цілих груп елементів.

�Зазвичай <div> використовують для:�

• Розбиття сторінки на секції.
• Створення контейнерів для застосування CSS стилів або JavaScript.
• Організації складних макетів без зміни їх візуального вигляду.

​

Практична робота:

🧾 Завдання 1:

​

Потрібно створити меню на HTML за допомогою списків та оформлювати його за допомогою CSS. У вас є приклад меню, а також блок коду, який треба змінювати ЗАВАНТАЖИТИ.

​

💡 Ви вже знаєте, як працює тег <ul> і як оформляти його за допомогою класів у CSS. Тепер час попрактикуватись.

​

🧩 Ви можете експериментувати з кольорами, формою, шрифтами та розташуванням. Важливо — дотримуйтесь інструкцій і проявіть креативність!

​

Семантика сайту — це використання HTML-елементів та тегів для чіткої структуризації контенту на сторінці, так щоб він був зрозумілий не лише для людей, а й для пошукових систем та інших інструментів, таких як екранні читалки для людей з обмеженими можливостями.

Приклад семантичних тегів:

​

<header>: визначає верхню частину сторінки або секції, зазвичай містить логотип, меню та іншу заголовну інформацію.

<footer>: визначає нижню частину сторінки, де зазвичай розміщується інформація про авторські права, контакти та інші важливі посилання.

<main>: містить основний контент сторінки, що є центральним для цієї сторінки (не включає меню або футер).

<article>: використовують для визначення незалежних елементів контенту, таких як статті, пости в блозі або новини.

<section>: використовується для логічного поділу контенту на секції. Це може бути абзац, підрозділ статті або будь-яка інша частина, що має власну тему.

<nav>: визначає навігаційні елементи на сторінці, такі як меню або посилання для переміщення по сайту.

<aside>: використовується для контенту, що має певну додаткову або побічну інформацію, наприклад, бічні панелі або рекламні блоки.

​

Тег <nav> використовується для позначення навігаційних елементів на сторінці. Він допомагає організувати та структуризувати меню та інші навігаційні елементи, щоб користувачі могли легко переміщатися по різних частинах сайту.

Тег <nav> використовується для обгортання всього меню. Це дає змогу браузеру і пошуковим системам розпізнати, що саме є основним навігаційним елементом на сторінці.

<nav class="menu">

<ul>

<li>Головна</li>

<li>Новини<li>

<li>Контакти</li>

</ul>

</nav>

​

.

​

🧾 Завдання 2:

​

​

Створення меню для фан-клубу музичної групи з пунктами меню

(Учасники гурту, Альбоми, Галерея, Турне, Контакти фан-клубу)

​

Крок 1: Створення HTML-структури меню

1. Створіть файл index.html у папці Меню.
• Створіть елемент <nav> для меню.
• В середині <nav> додайте список <ul>.
• Кожен пункт меню додається як <li> з елементом <a>.
• У кожному <a> має бути посилання на відповідну частину сторінки

(наприклад, #members для Учасників гурту).

​

<li><a href="#members">🎤 Учасники гурту</a></li>

Крок 2: Створення CSS стилів для меню із назвою menu

​

​

• Встановіть основні стилі для меню.
• Стилізуйте фон, шрифт, колір, відступи та ефекти для пунктів меню.

• ​

Крок 3: Покращення дизайну

​

Налаштуйте додаткові стилі за бажанням:

1. Додайте нові шрифти для більш естетичного вигляду.

2. Використовуйте медіа-запити для адаптивного дизайну, щоб меню правильно виглядало на мобільних пристроях.

@media (max-width: 600px) — це медіа-запит в CSS, який дозволяє застосовувати стилі лише при певних умовах, зокрема, на певних розмірах екрану (тут 600 px).

Далі познайомимося з тегом <section> для визначення окремих частин контенту на веб-сторінці. Кожна секція може містити заголовок і текст, що описує якусь конкретну тему або розділ. У нашому випадку це інформація про гурт по пунктах меню.�

- Використовуй тег <section>, щоб створити окремі блоки для кожного пункту меню на своїй сторінці. �- Додай відступи всередині секцій, щоб текст не прилипав до країв сторінки (padding: 100px 20px; margin-top: 20px;.�- Встанови розмір шрифта для заголовків секцій  section h2 і для тексту section p, щоб вони були чіткими та зручними для читання (на власний смак).�

- Кожен блок повинен мати свій власний ID, який буде відповідати посиланню в меню.���

����

��

🧾 Завдання 3:

​

Вітаємо, ви завершили роботу над створенням сайту для фан-клубу улюбленої музичної групи! Тепер давайте перевіримо, чи все зроблено правильно.

​

Ось що потрібно було зробити:

1. Меню:
• Вертикальне фіксоване меню, яке знаходиться праворуч на екрані.
• Меню містить п’ять пунктів: "Учасники гурту", "Альбоми", "Галерея", "Турне", "Контакти фан-клубу".
• Кожен пункт меню має ефект при наведенні: змінюється фон і зсувається ліворуч.
2. Секції для кожного пункту меню:
• Додано секції для кожного пункту меню, кожна з яких містить текст, відповідний до теми (наприклад, "Учасники гурту", "Альбоми" тощо).
• Кожній секції присвоєно унікальний ID, щоб можна було перейти до неї при натисканні на пункт меню (наприклад, id="members" для "Учасників гурту").
• Кожна секція має свій заголовок (наприклад, <h2>🎤 Учасники гурту</h2>) і описовий текст (наприклад, <p>Тут можна дізнатися більше про кожного з учасників гурту...</p>).
3. Стилізація:
• Застосовано стилі для секцій, щоб текст виглядав чітко і був зручним для читання.
• Відступи в секціях забезпечують, щоб текст не прилипав до країв сторінки.
• Застосовано плавні ефекти при наведенні на пункти меню, а також додано тіні та заокруглення кутів.
4. Перевірка переходів:
• При натисканні на пункти меню сторінка плавно прокручується до відповідної секції.

​

Додай щось своє!

Додай дані стилі до елементів секції

Практична робота