У наш час створити власний сайт може кожен — достатньо знати основи HTML, CSS і трохи бажання експериментувати. Один із найпростіших способів почати — створити статичний сайт. Це сайт, сторінки якого не змінюються динамічно, тобто не використовують баз даних чи бекенд на кшталт Python або PHP. Такі сайти завантажуються швидко, легко розміщуються на будь-якому хостингу й ідеально підходять для портфоліо, блогів або презентацій.
🧩 Що таке статичний сайт?
Статичний сайт — це набір готових HTML-сторінок, які відображаються користувачеві без додаткової обробки сервером.
Кожна сторінка зберігається у вигляді окремого файлу:
index.html
about.html
contact.html
Коли користувач відкриває сайт, браузер просто завантажує цей файл із сервера й показує його в такому вигляді, у якому він записаний.
🛠️ Основні технології
- HTML (HyperText Markup Language) — структура сторінки.
Саме за допомогою HTML ми описуємо, де розташовані заголовки, текст, зображення, посилання та інші елементи. - CSS (Cascading Style Sheets) — оформлення сторінки.
CSS дозволяє змінювати кольори, шрифти, відступи, вирівнювання і робити сайт красивим і зручним. - JavaScript (опціонально) — додає інтерактивність.
Наприклад, можна зробити, щоб при натисканні кнопки з’являлося повідомлення або мінявся колір елемента.
📄 Приклад простої статичної сторінки
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Мій перший сайт</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f4f8;
text-align: center;
margin: 40px;
}
h1 {
color: #0078d4;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #0078d4;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #005fa3;
}
</style>
</head>
<body>
<h1>Вітаю на моєму першому статичному сайті!</h1>
<p>Цей сайт створено лише з HTML та CSS.</p>
<button onclick="alert('Ви натиснули кнопку!')">Натисни мене</button>
</body>
</html>
🚀 Як опублікувати сайт
Коли сторінка готова, її можна:
- зберегти як
index.html; - відкрити у браузері подвійним кліком — і ви вже побачите свій сайт;
- або розмістити онлайн безкоштовно, наприклад, через:
- GitHub Pages (https://pages.github.com)
- Netlify (https://www.netlify.com)
- Vercel (https://vercel.com)
✅ Переваги статичних сайтів
- 🔹 Висока швидкість завантаження
- 🔹 Безпека (немає серверного коду)
- 🔹 Простота створення й розміщення
- 🔹 Підходять для невеликих проєктів, портфоліо та навчання
Підведемо підсумки
- тег <h1></h1> використовується для надання тексту великих розмірів як у заголовка
- тег <p></p> не міняє текст він просто говорить компютеру, що цей текст буде виведено на екран
- тег <button></button> створює кнопку якій потім можна надати стилі
- Між тегами <style></style> можна записувати css код
- а також дізналися про деякі стилі css
Статичний сайт — це чудовий перший крок у світ веброзробки. Він навчає працювати з основними технологіями інтернету та допомагає зрозуміти, як браузер показує вебсторінки. Коли ви опануєте HTML і CSS, зможете переходити до складніших тем — JavaScript, Python або баз даних — і створювати вже динамічні вебзастосунки.
