Вивчай

Як працює веб

Як працює веб — глобус на столі з'єднаний оптоволокном з ноутбуком та смартфономЯк працює веб — глобус на столі з'єднаний оптоволокном з ноутбуком та смартфоном

Ти відкриваєш браузер, вводиш адресу — і через мить бачиш сторінку. Магія? Ні, просто десятки технологій працюють разом за долі секунди. Давай розберемося, що саме відбувається "під капотом".


Коротка історія: від військової мережі до 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 мільярда.


Клієнт і сервер: модель ресторану

Весь веб побудований на простій ідеї — запит і відповідь.

Уяви ресторан:

  1. Ти (клієнт) — сидиш за столиком і робиш замовлення
  2. Кухня (сервер) — готує страву за твоїм замовленням
  3. Офіціант (HTTP) — передає замовлення на кухню і приносить готову страву

У вебі так само:

  • Браузер (Chrome, Firefox, Safari) — це клієнт. Він надсилає запити
  • Сервер — це комп'ютер десь у світі, де зберігається сайт. Він обробляє запити і надсилає відповіді
  • HTTP — це правила, за якими вони спілкуються (як мова, яку розуміють обидві сторони)

Клієнт-серверна модель: браузер надсилає HTTP-запит, сервер повертає відповідьКлієнт-серверна модель: браузер надсилає HTTP-запит, сервер повертає відповідь

Щоразу коли ти відкриваєш сайт, твій браузер надсилає HTTP-запит серверу, а сервер повертає HTTP-відповідь з вмістом сторінки.


URL: адреса у вебі

Кожна сторінка має свою адресу — URL (Uniform Resource Locator). Як поштова адреса для будинку:

Анатомія URL-адреси: протокол, домен, шлях та параметриАнатомія 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 — це статус-код, який означає "все добре, тримай сторінку".

Відомі статус-коди

КодЗначенняКоли побачиш
200OK — все добреСторінка завантажилася успішно
301Moved — переїхалоСайт переїхав на нову адресу
404Not Found — не знайденоСторінка не існує (хто не бачив?)
500Server Error — помилка сервераЩось зламалося на сервері
Інфо

Є ще код 418 "I'm a teapot" (Я — чайник) — жарт з 1998 року. Сервер відмовляється варити каву, бо він чайник. Google навіть зробив пасхалку. А у 2017 році 15-річний розробник створив кампанію save418.com, щоб цей код не видалили зі стандарту — і вона спрацювала!


Три кити вебу: HTML, CSS, JavaScript

Коли сервер відправляє сторінку браузеру, він відправляє три типи файлів. Кожен відповідає за своє:

Три кити вебу: HTML (структура), CSS (вигляд), JavaScript (поведінка)Три кити вебу: HTML (структура), CSS (вигляд), JavaScript (поведінка)

Саме ці три технології ти будеш вивчати в цьому курсі. Спочатку HTML (структуру), потім CSS (красу), потім JavaScript (магію).


Що відбувається, коли ти вводиш адресу?

Тепер ти знаєш достатньо, щоб зібрати всю картину. Ось що відбувається за долі секунди, коли ти набираєш youtube.com:

Повний шлях HTTP-запиту: від введення адреси до готової сторінкиПовний шлях HTTP-запиту: від введення адреси до готової сторінки

  1. Браузер розбирає URL і витягує доменне ім'я
  2. DNS перетворює youtube.com142.250.185.46
  3. Браузер встановлює з'єднання з сервером за цією IP-адресою
  4. Браузер надсилає HTTP-запит: "Дай мені головну сторінку"
  5. Сервер знаходить потрібні файли і відправляє відповідь
  6. Браузер отримує HTML, CSS, JS і рендерить (малює) сторінку
  7. Ти бачиш YouTube і починаєш дивитися відео

Весь цей процес займає 1-3 секунди. А за лаштунками — мережа серверів по всьому світу, десятки DNS-запитів і сотні файлів.


Підсумок

  • Інтернет — це мережа комп'ютерів, а веб — це сайти і сторінки, які працюють поверх інтернету
  • Веб працює за моделлю клієнт-сервер: браузер запитує → сервер відповідає
  • URL — адреса сторінки, DNS — перетворює домен на IP-адресу
  • HTTP(S) — протокол спілкування між браузером і сервером
  • Кожна сторінка складається з HTML (структура), CSS (вигляд) і JavaScript (поведінка)

Що далі?

Тепер ти розумієш як працює веб "зсередини". У наступному уроці ми почнемо освоювати інструменти розробника — познайомимося з командним рядком, через який програмісти керують комп'ютером.

Інфо

Веб у числах (2026): у світі існує понад 1.4 мільярда вебсайтів, з яких лише ~200 мільйонів активні. Щодня створюється 1.25 мільйона нових сайтів. При цьому 68% вебтрафіку йде з мобільних пристроїв.

Корисні ресурси: