Як працює веб
Як працює веб — глобус на столі з'єднаний оптоволокном з ноутбуком та смартфоном
Ти відкриваєш браузер, вводиш адресу — і через мить бачиш сторінку. Магія? Ні, просто десятки технологій працюють разом за долі секунди. Давай розберемося, що саме відбувається "під капотом".
Коротка історія: від військової мережі до TikTok
Все почалося з ARPANET — військової мережі, яку створили у США в 1969 році. 29 жовтня того року відправили перше повідомлення між двома комп'ютерами — мали передати слово "LOGIN", але система впала після двох літер. Так що перше повідомлення в інтернеті було просто "LO".
Але інтернет і веб — це не одне й те саме:
| Інтернет | Веб (World Wide Web) | |
|---|---|---|
| Що це | Мережа з'єднаних комп'ютерів | Система сайтів і сторінок |
| Аналогія | Дороги і траси | Магазини та будівлі вздовж доріг |
| Коли з'явився | 1969 (ARPANET) | 1991 |
| Хто створив | Міноборони США (DARPA) | Тім Бернерс-Лі (CERN) |
У 1989 році британський вчений Тім Бернерс-Лі, працюючи в ЦЕРНі (лабораторія фізики частинок у Швейцарії), придумав систему для обміну документами між вченими. Він створив три ключові речі: HTML (мова для сторінок), URL (адреси) та HTTP (протокол для передачі). 6 серпня 1991 року перший сайт став доступний для всіх — і він досі працює.
Перше фото у вебі — знімок жіночої комедійної групи "Les Horribles Cernettes" (колеги Тіма по ЦЕРНу), завантажений у 1992 році. А в 1993 році ЦЕРН оголосив, що веб буде безкоштовним для всіх — без ліцензій і обмежень. Саме це рішення дозволило вебу вирости від одного сайту до 1.4 мільярда.
Клієнт і сервер: модель ресторану
Весь веб побудований на простій ідеї — запит і відповідь.
Уяви ресторан:
- Ти (клієнт) — сидиш за столиком і робиш замовлення
- Кухня (сервер) — готує страву за твоїм замовленням
- Офіціант (HTTP) — передає замовлення на кухню і приносить готову страву
У вебі так само:
- Браузер (Chrome, Firefox, Safari) — це клієнт. Він надсилає запити
- Сервер — це комп'ютер десь у світі, де зберігається сайт. Він обробляє запити і надсилає відповіді
- HTTP — це правила, за якими вони спілкуються (як мова, яку розуміють обидві сторони)
Клієнт-серверна модель: браузер надсилає HTTP-запит, сервер повертає відповідь
Щоразу коли ти відкриваєш сайт, твій браузер надсилає HTTP-запит серверу, а сервер повертає HTTP-відповідь з вмістом сторінки.
URL: адреса у вебі
Кожна сторінка має свою адресу — URL (Uniform Resource Locator). Як поштова адреса для будинку:
Анатомія URL-адреси: протокол, домен, шлях та параметри
Літера S у HTTPS означає Secure (захищений). Дані шифруються, і ніхто не може їх перехопити по дорозі. Сучасні браузери позначають HTTP-сайти як "Не безпечні" — тому майже всі сайти зараз використовують HTTPS.
DNS: телефонна книга інтернету
Комп'ютери не розуміють слова "google.com" — вони працюють з числовими адресами, як-от 142.250.185.46. Це IP-адреса — унікальний номер кожного сервера в інтернеті.
Але запам'ятовувати числа незручно. Тому існує DNS (Domain Name System) — система, яка перетворює зрозумілі імена на IP-адреси. Як телефонна книга: ти шукаєш "Піцерія" — а книга дає тобі номер телефону.
Ти вводиш: youtube.com
↓
DNS відповідає: 142.250.185.46
↓
Браузер з'єднується з цією IP-адресою
Цей процес відбувається за 20-120 мілісекунд — швидше, ніж ти встигнеш моргнути. І відбувається він щоразу, коли ти відкриваєш будь-який сайт.
HTTP: мова спілкування
HTTP (HyperText Transfer Protocol) — це набір правил, за якими браузер і сервер спілкуються. Кожне спілкування складається з запиту і відповіді.
Запит (від браузера до сервера)
Коли ти вводиш адресу, браузер надсилає щось на кшталт:
GET /index.html HTTP/1.1
Host: example.com
Це означає: "Я хочу отримати (GET) сторінку index.html з сайту example.com".
Відповідь (від сервера до браузера)
Сервер відповідає:
HTTP/1.1 200 OK
Content-Type: text/html
<html>...</html>
200 OK — це статус-код, який означає "все добре, тримай сторінку".
Відомі статус-коди
| Код | Значення | Коли побачиш |
|---|---|---|
| 200 | OK — все добре | Сторінка завантажилася успішно |
| 301 | Moved — переїхало | Сайт переїхав на нову адресу |
| 404 | Not Found — не знайдено | Сторінка не існує (хто не бачив?) |
| 500 | Server Error — помилка сервера | Щось зламалося на сервері |
Є ще код 418 "I'm a teapot" (Я — чайник) — жарт з 1998 року. Сервер відмовляється варити каву, бо він чайник. Google навіть зробив пасхалку. А у 2017 році 15-річний розробник створив кампанію save418.com, щоб цей код не видалили зі стандарту — і вона спрацювала!
Три кити вебу: HTML, CSS, JavaScript
Коли сервер відправляє сторінку браузеру, він відправляє три типи файлів. Кожен відповідає за своє:
Три кити вебу: HTML (структура), CSS (вигляд), JavaScript (поведінка)
Саме ці три технології ти будеш вивчати в цьому курсі. Спочатку HTML (структуру), потім CSS (красу), потім JavaScript (магію).
Що відбувається, коли ти вводиш адресу?
Тепер ти знаєш достатньо, щоб зібрати всю картину. Ось що відбувається за долі секунди, коли ти набираєш youtube.com:
Повний шлях HTTP-запиту: від введення адреси до готової сторінки
- Браузер розбирає URL і витягує доменне ім'я
- DNS перетворює
youtube.com→142.250.185.46 - Браузер встановлює з'єднання з сервером за цією IP-адресою
- Браузер надсилає HTTP-запит: "Дай мені головну сторінку"
- Сервер знаходить потрібні файли і відправляє відповідь
- Браузер отримує HTML, CSS, JS і рендерить (малює) сторінку
- Ти бачиш YouTube і починаєш дивитися відео
Весь цей процес займає 1-3 секунди. А за лаштунками — мережа серверів по всьому світу, десятки DNS-запитів і сотні файлів.
Підсумок
- Інтернет — це мережа комп'ютерів, а веб — це сайти і сторінки, які працюють поверх інтернету
- Веб працює за моделлю клієнт-сервер: браузер запитує → сервер відповідає
- URL — адреса сторінки, DNS — перетворює домен на IP-адресу
- HTTP(S) — протокол спілкування між браузером і сервером
- Кожна сторінка складається з HTML (структура), CSS (вигляд) і JavaScript (поведінка)
Що далі?
Тепер ти розумієш як працює веб "зсередини". У наступному уроці ми почнемо освоювати інструменти розробника — познайомимося з командним рядком, через який програмісти керують комп'ютером.
Веб у числах (2026): у світі існує понад 1.4 мільярда вебсайтів, з яких лише ~200 мільйонів активні. Щодня створюється 1.25 мільйона нових сайтів. При цьому 68% вебтрафіку йде з мобільних пристроїв.
Корисні ресурси:
- Як працює веб — MDN Web Docs — коротке пояснення від Mozilla українською
- Перший у світі вебсайт — той самий, створений Тімом Бернерсом-Лі у 1991 році
- Підводні кабелі інтернету — інтерактивна карта кабелів, які з'єднують континенти
- How DNS Works — комікс-пояснення роботи DNS англійською