Верстка вебсторінок. Структура блоків та елементів сайту

Що ми вже вивчили?

На попередніх заняттях ви вже познайомилися з основами веброзробки.

Сьогодні ми перейдемо від планування до практичного створення вебсторінки.

Ви створите сторінку, яка матиме реальну структуру сучасного сайту.

Теоретична частина. Що таке верстка вебсторінки?

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

Простими словами:

• HTML відповідає за структуру сторінки.

• CSS відповідає за її зовнішній вигляд.

• Браузер відображає результат роботи HTML і CSS.

Уявімо, що ми будуємо будинок:

• HTML — це стіни, кімнати, двері та вікна.

• CSS — це колір стін, меблі, оздоблення та дизайн.

4. Основні блоки сучасного сайту

Будь-який сучасний сайт можна поділити на декілька основних частин.

Приклад типової структури вебсторінки

Розглянемо кожен блок окремо

1. HEADER — шапка сайту

Розташовується у верхній частині сторінки.

Може містити:

• логотип;

• назву сайту;

• короткий опис;

• контактну інформацію.

2. NAV — навігаційне меню

Допомагає користувачеві переходити між сторінками сайту.

Наприклад:

• Головна;

• Про нас;

• Новини;

• Галерея;

• Контакти.

3. MAIN — основна частина

Містить головну інформацію сторінки: текст, зображення, статті, таблиці, відео тощо.

4. SECTION — розділ сторінки

Дозволяє логічно об'єднати інформацію за певною темою.

5. ARTICLE — стаття

Самостійний інформаційний матеріал, наприклад новина, публікація або стаття.

6. ASIDE — додаткова інформація

Може містити посилання, цікаві факти, додаткові матеріали.

7. FOOTER — підвал сайту

Розташовується внизу сторінки. Може містити:

• інформацію про автора;

• рік створення;

• контактні дані;

• посилання на соціальні мережі.

HTML-елементи для створення блоків

Для побудови структури сайту використовують спеціальні HTML-теги.

Важливо! Теги <header>, <nav>, <main>, <section>, <article>, <aside> та <footer> називають семантичними. Вони не просто створюють блоки, а пояснюють браузеру та пошуковим системам призначення відповідної частини сторінки.

Наприклад:

Як браузер розташовує блоки?

За замовчуванням більшість структурних HTML-елементів є блоковими.

Це означає, що кожен такий елемент зазвичай починається з нового рядка та займає доступну ширину батьківського контейнера.

Наприклад:

Блоки будуть розташовані один під одним.

Але ми можемо змінити їх розташування за допомогою CSS.

Для цього використовують властивість display.

Найважливіші значення:

• block — блокове розташування;

• inline — розташування в одному рядку;

• inline-block — в одному рядку з можливістю задавати розміри;

• flex — гнучке розташування елементів;

• grid — розташування у вигляді сітки.

Наприклад:

Цей код дозволяє розмістити дочірні елементи в одному рядку з відстанню 20 пікселів між ними.

Основні CSS-властивості для верстки

Зверніть увагу на різницю між margin і padding.

• margin — відстань від елемента до сусідніх елементів.

• padding — відстань від вмісту елемента до його межі.

Завдання: Створити повноцінну вебсторінку навчального сайту з використанням HTML5 та CSS.

Під час роботи необхідно створити:

1. Шапку сайту з назвою.

2. Навігаційне меню.

3. Основну частину сторінки.

4. Інформаційний розділ.

5. Декілька карток із матеріалами.

6. Підвал сайту.

7. CSS-оформлення всіх блоків.

Результат: У вас повинна вийти сучасна вебсторінка, яку можна використати як основу для власного проєкту сайту.

Етап 1. Створення папки проєкту

Спочатку потрібно створити папку для майбутнього сайту.

Крок 1. На робочому столі створіть нову папку.

Назвіть її:

praktichnarobota2

Крок 2. Відкрийте папку.

Крок 3. Створіть у ній два файли:

• index.html

• style.css

Етап 2. Створення HTML-структури

Відкрийте файл index.html.

Введіть наступний код:

<!DOCTYPE html>

<html lang="uk">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Мій навчальний сайт</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<!-- Шапка сайту -->

<header>

<h1>Мій навчальний сайт</h1>

<p>Світ знань та інформаційних технологій</p>

</header>

<!-- Навігаційне меню -->

<nav>

<a href="#">Головна</a>

<a href="#">Про нас</a>

<a href="#">Навчання</a>

<a href="#">Контакти</a>

</nav>

<!-- Основний вміст -->

<main>

<section class="welcome">

<h2>Ласкаво просимо!</h2>

<p>

Це мій перший навчальний сайт,

створений за допомогою HTML та CSS.

</p>

</section>

<section class="materials">

<h2>Наші навчальні матеріали</h2>

<div class="cards">

<article class="card">

<h3>HTML</h3>

<p>

Створення структури вебсторінок.

</p>

</article>

<article class="card">

<h3>CSS</h3>

<p>

Оформлення та дизайн вебсайтів.

</p>

</article>

<article class="card">

<h3>JavaScript</h3>

<p>

Додавання інтерактивності на сайт.

</p>

</article>

</div>

</section>

</main>

<!-- Підвал сайту -->

<footer>

<p>© 2026 Мій навчальний сайт</p>

<p>Створено учнем 11 класу</p>

</footer>

</body>

</html>

у вас повинен вийти такий результат:

Розбираємо код по частинах

1. Початок HTML-документа

<!DOCTYPE html>
<html lang="uk">

• DOCTYPE повідомляє браузеру, що використовується HTML5.

• html — кореневий елемент документа.

• lang="uk" вказує українську мову сторінки.

2. Службова інформація

<head>
    <meta charset="UTF-8">
    <title>Мій навчальний сайт</title>
    <link rel="stylesheet" href="style.css">
</head>

Тут задаються параметри сторінки.

• UTF-8 забезпечує правильне відображення українських літер.

• title визначає назву вкладки браузера.

• link підключає таблицю стилів CSS.

3. Шапка сайту

<header>
    <h1>Мій навчальний сайт</h1>
    <p>Світ знань та інформаційних технологій</p>
</header>

Містить заголовок та короткий опис сайту.

4. Меню навігації

<nav>
    <a href="#">Головна</a>
    <a href="#">Про нас</a>
    <a href="#">Навчання</a>
    <a href="#">Контакти</a>
</nav>

Тег <a> створює посилання.

Символ # поки що використовується як заглушка, оскільки окремі сторінки ми ще не створювали.

5. Основний вміст

<main>
    <section class="welcome">
        <h2>Ласкаво просимо!</h2>
        <p>Це мій перший навчальний сайт.</p>
    </section>
</main>

Тут розміщується головна інформація.

6. Картки матеріалів

<div class="cards">

    <article class="card">
        <h3>HTML</h3>
        <p>Створення структури вебсторінок.</p>
    </article>

</div>

Зверніть увагу на class.

Клас дозволяє звертатися до конкретного елемента з CSS.

Наприклад, .card означає, що стилі будуть застосовані до всіх елементів із класом card.

7. Підвал

<footer>
    <p>© 2026 Мій навчальний сайт</p>
</footer>

Це завершальна частина сторінки.

Оформлення вебсторінки за допомогою CSS

Тепер переходимо до оформлення.

Відкрийте файл style.css.

Введіть код:

/ Загальні налаштування /

* {

box-sizing: border-box;

}

body {

margin: 0;

font-family: Arial, sans-serif;

background-color: #f0f3f8;

color: #222;

}

/ Шапка сайту /

header {

background-color: #173b67;

color: white;

text-align: center;

padding: 35px 20px;

}

header h1 {

margin: 0;

font-size: 32px;

}

header p {

margin-bottom: 0;

}

/ Меню /

nav {

background-color: #24558b;

display: flex;

justify-content: center;

flex-wrap: wrap;

gap: 10px;

padding: 15px;

}

nav a {

color: white;

text-decoration: none;

padding: 10px 18px;

border-radius: 5px;

}

/ Ефект наведення /

nav a:hover {

background-color: #3c78b5;

}

/ Основна частина /

main {

max-width: 1100px;

margin: 25px auto;

padding: 20px;

}

/ Вітальний блок /

.welcome {

background-color: white;

padding: 30px;

border-radius: 12px;

text-align: center;

margin-bottom: 25px;

}

/ Розділ матеріалів /

.materials {

background-color: white;

padding: 25px;

border-radius: 12px;

}

.materials h2 {

text-align: center;

}

/ Контейнер карток /

.cards {

display: flex;

gap: 20px;

flex-wrap: wrap;

}

/ Окрема картка /

.card {

flex: 1 1 200px;

background-color: #e4efff;

padding: 25px;

border-radius: 10px;

text-align: center;

}

/ Підвал /

footer {

background-color: #173b67;

color: white;

text-align: center;

padding: 20px;

margin-top: 30px;

}

/ Адаптація для телефонів /

@media (max-width: 600px) {

header h1 {

font-size: 24px;

}

nav {

flex-direction: column;

align-items: stretch;

}

nav a {

text-align: center;

}

main {

padding: 12px;

}

}

Після запуску файлу ви отримаєте:

Пояснення найважливіших частин CSS

1. Загальні налаштування

* {
    box-sizing: border-box;
}

Задає зручний спосіб розрахунку розмірів елементів: ширина та висота враховують внутрішні відступи й межі.

2. Шапка

header {
    background-color: #173b67;
    color: white;
    text-align: center;
    padding: 35px 20px;
}

• background-color — колір фону.

• color — колір тексту.

• text-align — вирівнювання тексту.

• padding — внутрішні відступи.

3. Навігаційне меню

nav {
    display: flex;
    justify-content: center;
    gap: 10px;
}

Тут ми використовуємо Flexbox.

justify-content: center розміщує елементи по центру.

gap: 10px створює відстань між елементами.

4. Картки

.cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

Завдяки display: flex картки розташовуються поруч.

flex-wrap: wrap дозволяє їм переноситися на наступний рядок, якщо недостатньо місця.

5. Ефект наведення

nav a:hover {
    background-color: #3c78b5;
}

Коли користувач наводить курсор на пункт меню, його фон змінюється.

6. Адаптивність

@media (max-width: 600px) {
    nav {
        flex-direction: column;
    }
}

Це означає, що для екранів шириною до 600 пікселів меню буде розміщуватися вертикально.

Перевірте:

• Чи відображається назва сайту?

• Чи правильно розташоване меню?

• Чи є три картки навчальних матеріалів?

• Чи відображається підвал?

• Чи змінюється колір пункту меню під час наведення курсора?

Якщо зміни до CSS не відображаються, перевірте, чи збережено файл style.css, а потім оновіть сторінку клавішею F5.

Самостійне вдосконалення сайту

Тепер, коли основна сторінка готова, спробуйте самостійно її змінити.

Виконайте такі завдання:

Завдання 1. Змініть назву сайту.

Замість «Мій навчальний сайт» напишіть власну назву.

Наприклад: «Світ інформаційних технологій».

Завдання 2. Змініть кольорову гаму.

Змініть кольори шапки та меню.

Наприклад:

header {
    background-color: #176b55;
}

Завдання 3. Додайте четверту картку.

Усередині контейнера <div class="cards"> додайте:

<article class="card">
    <h3>WordPress</h3>
    <p>Створення сайтів за допомогою CMS.</p>
</article>

Завдання 4. Додайте зображення.

Усередині вітального блоку додайте:

<img src="image.jpg" alt="Зображення навчального сайту">

Для цього покладіть зображення image.jpg у папку проєкту.

Завдання 5. Змініть оформлення карток.

Наприклад:

.card {
    background-color: #dcecff;
    border: 2px solid #a8c9ee;
    border-radius: 15px;
    padding: 30px;
}

Контрольна перевірка знань

Перевірте, наскільки добре ви засвоїли матеріал.

Тест: Структура вебсторінки

0/8 відповідей

1. Який HTML-тег використовується для шапки сайту?

<footer>

<header>

<main>

2. Який тег створює навігаційне меню?

<nav>

<section>

<article>

3. Для чого використовується CSS?

Для створення бази даних

Для оформлення вебсторінки

Для зберігання зображень

4. Який тег призначений для основного вмісту?

<main>

<head>

<title>

5. Що означає властивість display: flex?

Приховує елемент

Створює гнучке розташування елементів

Змінює колір тексту

6. Для чого використовується margin?

Для зовнішніх відступів

Для кольору фону

Для розміру шрифту

7. Який тег використовується для підвалу сайту?

<header>

<footer>

<nav>

8. Що робить властивість border-radius?

Заокруглює кути

Збільшує шрифт

Змінює ширину

Перевірити відповіді

Додаткове творче завдання

Підвищений рівень складності

Використовуючи отримані знання, створіть головну сторінку власного сайту, який ви розробляєте в межах навчального проєкту.

Використайте структуру, яку розробили під час практичної роботи №1.

Вимоги:

1. Створіть власну шапку сайту.

2. Додайте логотип або назву.

3. Створіть навігаційне меню відповідно до тематики сайту.

4. Додайте не менше трьох інформаційних блоків.

5. Використайте HTML5-семантичні елементи.

6. Оформіть сторінку за допомогою CSS.

7. Забезпечте коректне відображення на комп'ютері та телефоні.

8. Додайте підвал із контактною інформацією або відомостями про автора.

Важливо: Не потрібно створювати весь сайт. На цьому занятті достатньо реалізувати його головну сторінку.

Підбиття підсумків заняття

Дайте відповіді на запитання:

1. Що називають версткою вебсторінки?

2. Яке призначення HTML та CSS?

3. Для чого використовують <header>, <nav> та <footer>?

4. Чим відрізняються <section> та <article>?

5. Що таке клас CSS?

6. Для чого використовують display: flex?

7. Яка різниця між margin та padding?

8. Чому важливо створювати адаптивні вебсторінки?

Висновок

Під час практичної роботи ви навчилися створювати структуровані вебсторінки за допомогою HTML5 та CSS.

Ви ознайомилися з призначенням основних блоків сайту, навчилися використовувати семантичні елементи, створювати навігаційне меню, розташовувати інформаційні картки та оформлювати сторінку.

Отримані знання стануть основою для подальшої розробки власного вебсайту.

Наступний крок у проєкті: навчитися створювати багатоколонкові макети, працювати з Flexbox і CSS Grid та вдосконалювати адаптивність сайту.