1. Веб-технології: Глобальна картина

Багато хто плутає Інтернет та WWW (World Wide Web).
  • Інтернет — це «залізо»: мільйони кабелів, серверів та маршрутизаторів.
  • Веб (WWW) — це лише один із сервісів, що працює поверх цього заліза (разом із поштою, іграми чи торрентами).
Веб тримається на трьох стандартах: URL (адреса), HTTP (мова спілкування) та HTML (структура документа).

2. Клієнт-серверна модель

Будь-яка дія у вебі — це діалог.
  1. Клієнт (Браузер): Каже «Дай мені сторінку профілю».
  2. Сервер: Отримує запит, йде в базу даних, готує відповідь і каже «Ось вона, тримай».
Це називається Request-Response cycle (Цикл Запит-Відповідь). Браузер ніколи не мовчить — він постійно щось просить, а сервер — постійно відповідає.

3. Frontend: Тріада вебу

Коли сервер надсилає «сайт», він насправді надсилає текстові файли. Браузер читає їх і перетворює на візуальний інтерфейс.
  • HTML (Каркас): Визначає, де заголовки, де кнопки, а де списки.
  • CSS (Стиль): Робить каркас красивим (кольори, відступи, анімації).
  • JavaScript (Інтелект): Робить сторінку живою. Натиснули кнопку — з'явилося вікно. Це робота JS.
Приклад коду (проста кнопка):
<!-- HTML: Структура -->
<button id="myBtn" class="primary-button">Натисни мене</button>

<style>
/* CSS: Зовнішній вигляд */
.primary-button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}
</style>

<script>
// JS: Поведінка
document.getElementById('myBtn').onclick = function() {
    alert('Кнопка натиснута!');
};
</script>

4. HTTP-протокол: Правила етикету

Коли клієнт звертається до сервера, він використовує методи. Найголовніші:
  • GET: «Просто дай мені дані» (наприклад, відкрити статтю).
  • POST: «Я приніс дані, збережи їх» (наприклад, реєстрація або пост у соцмережі).
Сервер завжди повертає Статус-код:
  • 200 OK: Все добре.
  • 404 Not Found: Ти помилився адресою.
  • 500 Internal Server Error: Сервер зламався, розробник плаче.

5. Backend: За лаштунками

Якщо Frontend — це офіціант і меню, то Backend — це кухня.
На бекенді працює мова програмування (наприклад, Java зі Spring Boot). Вона отримує ваш запит, перевіряє, чи ви маєте доступ до сторінки, дістає дані з бази і формує відповідь.
Сьогодні популярна концепція REST API. Сервер не надсилає готову сторінку, а надсилає чисті дані у форматі JSON.
Приклад JSON (дані про користувача):
{
  "id": 1,
  "name": "Ivan",
  "role": "Admin",
  "active": true
}
Браузер отримує цей текст і за допомогою JavaScript «малює» його на екрані.

6. Як працює DNS (Коротка історія)

Комп'ютери не розуміють слів google.com. Вони розуміють цифри 142.250.181.142.
Коли ви вводите назву сайту:
  1. Браузер запитує DNS-сервер: «Яка адреса у google.com?»
  2. DNS відповідає: «Ось цей IP».
  3. Браузер стукає за цим IP.
Це як запитати у консьєржа номер квартири за прізвищем мешканця.
⚓ Висновок:
Сучасний веб — це поєднання швидких інтерфейсів (Frontend) та потужних обчислень на серверах (Backend), які спілкуються між собою за чіткими правилами (HTTP/API).


Остання зміна: середа 20 травня 2026 12:12 PM