Як працює інтернет і що відбувається, коли ми відкриваємо сайт?

Вступ

Ми щодня користуємося сайтами: читаємо новини, дивимося відео, спілкуємося, купуємо товари, працюємо з документами. Зазвичай усе відбувається дуже просто: відкриваємо браузер, вводимо адресу й за кілька секунд бачимо потрібну сторінку.

Але за цією звичною дією приховано цілу систему взаємодії комп'ютерів, мереж, серверів і програмних технологій.

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

1. Інтернет і World Wide Web — це не одне й те саме

Слова «інтернет» і «веб» часто використовують як синоніми. У повсякденному спілкуванні це не створює великих проблем, але з технічного погляду між ними є різниця.

Що таке інтернет?

Інтернет — це глобальна система взаємопов'язаних комп'ютерних мереж, які обмінюються даними за допомогою узгоджених правил передавання інформації.

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

Коли ти підключаєшся до Wi-Fi вдома, твій пристрій отримує можливість обмінюватися даними з іншими пристроями через домашню мережу, провайдера та інші мережі інтернету.

Що таке World Wide Web?

World Wide Web (WWW), або Всесвітня павутина, — це система взаємопов'язаних вебсторінок і ресурсів, до яких можна отримувати доступ через інтернет.

Саме з WWW ми взаємодіємо, коли відкриваємо сайти в браузері.

Наприклад:

• читаємо статті на інформаційних сайтах;

• переглядаємо сторінки інтернет-магазинів;

• користуємося вебверсіями соціальних мереж;

• працюємо з онлайн-сервісами;

• відкриваємо документацію та навчальні матеріали.

Через інтернет також функціонують:

• електронна пошта;

• месенджери;

• онлайн-ігри;

• передавання файлів;

• потокове аудіо та відео;

• різноманітні мережеві служби.

Отже, інтернет — це інфраструктура зв'язку, а World Wide Web — одна із систем, що використовує цю інфраструктуру.

Простий приклад

Уявімо автомобільну систему.

Інтернет можна порівняти з мережею доріг, якими можуть пересуватися транспортні засоби.

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

2. Браузер, користувач і вебсервер

Щоб відкрити сайт, потрібні щонайменше дві основні сторони взаємодії: клієнт і сервер.

Що таке клієнт?

Клієнт — це пристрій або програма, яка звертається до іншої системи із запитом на отримання інформації чи виконання певної дії.

У випадку вебсайтів клієнтом зазвичай виступає браузер.

Наприклад:

• Google Chrome;

• Mozilla Firefox;

• Microsoft Edge;

• Safari;

• Opera.

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

Що таке сервер?

Сервер — це комп'ютер або програмна система, яка надає ресурси чи послуги іншим пристроям.

Наприклад, сервер може:

• передавати HTML-документи;

• надавати зображення та інші файли;

• отримувати дані з форм;

• взаємодіяти з базами даних;

• виконувати серверну програмну логіку;

• повертати результати запитів.

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

Як клієнт і сервер взаємодіють?

Загальний принцип такий:

1. Користувач виконує дію в браузері.

2. Браузер формує запит до потрібного сервера.

3. Запит передається через інтернет.

4. Сервер отримує та обробляє його.

5. Сервер надсилає відповідь.

6. Браузер обробляє отримані дані та відображає результат.

Наприклад, коли ти відкриваєш сторінку інтернет-магазину, браузер надсилає запит на отримання сторінки.

Сервер повертає потрібні ресурси, а браузер формує з них відображення, яке ти бачиш на екрані.

3. IP-адреса, домен і DNS

Комп'ютери в мережі повинні мати можливість знаходити один одного. Для цього використовуються мережеві адреси.

Що таке IP-адреса?

IP-адреса — це адреса, яка використовується для ідентифікації мережевого інтерфейсу в IP-мережі та передавання даних до потрібного пункту призначення.

Існують дві основні версії IP:

• IPv4;

• IPv6.

Приклад IPv4-адреси: 192.0.2.10

Приклад IPv6-адреси: 2001:db8::10

IPv4 використовує 32-бітні адреси, а IPv6 — 128-бітні. IPv6 був створений, зокрема, для розширення доступного простору адрес.

Що таке доменне ім'я?

IP-адреси зручні для мережевого обладнання, але людям складно запам'ятовувати числові послідовності.

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

Наприклад: google.com або: developer.mozilla.org

Доменне ім'я — це зрозуміла для людини адреса, яка допомагає знаходити потрібні мережеві ресурси.

Що таке DNS?

DNS (Domain Name System) — це система доменних імен.

Її головне завдання — допомагати знаходити мережеві адреси, пов'язані з доменними іменами.

Наприклад, користувач вводить: example.com

Для цього використовується DNS.

У спрощеному вигляді процес виглядає так:

1. Браузер отримує доменне ім'я.

2. Пристрій перевіряє, чи має він уже потрібну DNS-інформацію в кеші.

3. Якщо відповіді немає, запит передається DNS-резолверу.

4. DNS-система знаходить відповідні записи.

5. Браузер отримує потрібну IP-адресу та може продовжити встановлення з'єднання.

На практиці DNS має складнішу ієрархічну структуру, а пошук може проходити через кілька рівнів DNS-серверів.

Чи може один домен мати кілька IP-адрес?

Так.

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

4. Як працює передавання даних: клієнт, сервер і HTTP

Ми вже знаємо, що браузер звертається до сервера. Але за якими правилами вони спілкуються?

Для взаємодії у вебі використовується протокол HTTP.

Що таке протокол?

Протокол — це набір правил, які визначають, як пристрої або програми повинні обмінюватися інформацією.

У комп'ютерних мережах протоколи виконують схожу роль: визначають формат повідомлень, порядок взаємодії та правила обробки даних.

Що таке HTTP?

HTTP (HyperText Transfer Protocol) — це протокол прикладного рівня, який використовується для передавання ресурсів у вебі.

Загальна модель складається з двох частин:

• HTTP-запит — повідомлення, яке клієнт надсилає серверу;

• HTTP-відповідь — повідомлення, яке сервер повертає клієнту.

Як виглядає HTTP-запит?

Наприклад, браузер може надіслати запит на отримання головної сторінки сайту:

• GET / HTTP/1.1

• Host: example.com

Тут:

• GET — метод запиту;

• / — шлях до ресурсу;

• HTTP/1.1 — версія протоколу;

• Host — заголовок із назвою сервера.

Основні HTTP-методи

HTTP використовує методи, які описують призначення запиту.

Найпоширеніші:

• GET — отримати ресурс;

• POST — передати дані для обробки або створення ресурсу;

• PUT — створити або повністю замінити ресурс за визначеною адресою;

• PATCH — частково змінити ресурс;

• DELETE — видалити ресурс.

Як виглядає HTTP-відповідь?

Приклад спрощеної відповіді:

HTTP/1.1 200 OK

Content-Type: text/html; charset=UTF-8



<!DOCTYPE html>

<html lang="uk">

  <head>

    <title>Мій сайт</title>

  </head>

  <body>

    <h1>Вітаємо!</h1>

  </body>

</html>

Розберімо основні частини:

• HTTP/1.1 — версія протоколу;

• 200 OK — статус відповіді;

• Content-Type — тип вмісту;

• після порожнього рядка розміщене тіло відповіді, у цьому прикладі HTML-документ.

Що означають HTTP-статуси?

Сервер повертає статус, який повідомляє про результат обробки запиту.

Найвідоміші групи:

1xx — інформаційні відповіді;

2xx — успішне виконання;

3xx — перенаправлення;

4xx — помилки, пов'язані із запитом клієнта;

5xx — помилки на стороні сервера.

Група 3xx справді називається групою відповідей перенаправлення, але не кожен її статус означає звичайне перенаправлення на іншу адресу. Це надмірне спрощення класифікації.

Наприклад, 304 Not Modified використовується під час умовних запитів і дозволяє браузеру скористатися кешованим ресурсом.

Приклади:

Наприклад, коли ти відкриваєш сторінку, якої не існує, сервер може повернути статус 404 Not Found.

5. HTML, CSS і JavaScript: три основи вебсторінки

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

Три фундаментальні технології клієнтської частини вебу — HTML, CSS і JavaScript.

HTML — структура

HTML (HyperText Markup Language) визначає структуру та зміст сторінки.

Наприклад:

<h1>Мій сайт</h1>

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

<button>Натисни мене</button>

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

HTML не визначає повноцінний дизайн або складну поведінку кнопки.

CSS — оформлення

CSS (Cascading Style Sheets) використовується для оформлення HTML-елементів.

За допомогою CSS можна задавати:

• кольори;

• розміри;

• шрифти;

• відступи;

• межі;

• розташування елементів;

• адаптацію сторінки до різних екранів;

• анімацію та візуальні ефекти.

Наприклад:

h1 {
    color: blue;
    font-size: 32px;
}

p {
    color: gray;
}

Цей код змінює колір і розмір заголовка, а також колір абзацу.

JavaScript — поведінка

JavaScript — мова програмування, яка дозволяє додавати вебсторінкам інтерактивність і логіку.

<button onclick="alert('Привіт!')">
  Натисни мене
</button>

У цьому прикладі JavaScript викликає вікно з повідомленням.

У реальних проєктах JavaScript використовують для складніших завдань:

• перевірки форм;

• динамічного оновлення сторінок;

• взаємодії із сервером;

• створення меню;

• обробки подій;

• побудови вебзастосунків.

Як вони працюють разом?

Уявімо сторінку з кнопкою.

HTML створює кнопку:

<button id="myButton">Натисни мене</button>

CSS оформлює її:

button {

  background-color: blue;

  color: white;

  padding: 12px 20px;

  border: none;

}

JavaScript додає реакцію на натискання:

document

  .getElementById("myButton")

  .addEventListener("click", function () {

    alert("Кнопку натиснуто!");

  });

У результаті:

• HTML визначає, що кнопка існує;

• CSS визначає, як вона виглядає;

• JavaScript визначає, що відбувається після натискання.

6. HTTPS і TLS: як захищається передавання даних

Коли ми користуємося сайтами, то часто передаємо особисту інформацію:

• паролі;

• електронні адреси;

• платіжні дані;

• повідомлення;

• інші конфіденційні відомості.

Якби інформація передавалася мережею у відкритому вигляді, її могли б перехопити та прочитати сторонні особи.

Для захисту вебз'єднань використовується HTTPS.

Що таке HTTPS?

HTTPS (HyperText Transfer Protocol Secure) — це захищений варіант HTTP.

Він використовує TLS для захисту передавання даних між клієнтом і сервером.

Що таке TLS?

TLS (Transport Layer Security) — це криптографічний протокол, який забезпечує захист мережевого з'єднання.

Його основні завдання:

1. Конфіденційність

2. Цілісність

3. Автентифікація сервера

Що таке цифровий сертифікат?

Цифровий сертифікат — це електронний документ, який пов'язує доменне ім'я з відкритим криптографічним ключем і містить інформацію, необхідну для перевірки його автентичності.

Сертифікат зазвичай видається центром сертифікації (Certificate Authority, CA).

Якщо сертифікат недійсний, прострочений або не відповідає домену, браузер може показати попередження.

Як працює HTTPS у спрощеному вигляді?

1. Браузер звертається до сервера.

2. Сторони узгоджують параметри захищеного з'єднання.

3. Сервер надає свій цифровий сертифікат.

4. Браузер перевіряє сертифікат.

5. За допомогою криптографічного обміну сторони встановлюють спільні параметри шифрування.

6. Подальші HTTP-повідомлення передаються через захищене TLS-з'єднання.

Сучасний TLS використовує складніші механізми, ніж просте шифрування одним ключем. Зокрема, для узгодження секретних параметрів і подальшого захисту даних застосовуються різні криптографічні алгоритми.

Чи означає HTTPS, що сайт повністю безпечний?

Ні.

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

Тому HTTPS означає, що з'єднання захищене криптографічними механізмами, а не те, що власник сайту заслуговує на довіру.

7. Що відбувається, коли ми відкриваємо сайт?

Тепер об'єднаємо всі попередні поняття в одну послідовність.

Уявімо, що ти відкриваєш браузер і вводиш адресу:

https://example.com

Що відбувається далі?

Крок 1. Браузер аналізує адресу

Браузер визначає, який ресурс потрібно відкрити.

У нашому прикладі URL складається з:

• https — схема або протокол доступу;

• example.com — доменне ім'я.

Крок 2. Визначається IP-адреса

Браузеру потрібно знайти сервер, до якого слід звернутися.

Для цього використовується DNS.

У результаті браузер отримує потрібну мережеву адресу.

Крок 3. Встановлюється мережеве з'єднання

Браузер встановлює з'єднання із сервером.

У традиційному випадку HTTPS поверх HTTP/1.1 або HTTP/2 використовується TCP-з'єднання, після якого встановлюється TLS.

HTTP/3 працює інакше: він використовує QUIC, який працює поверх UDP і включає механізми захисту на основі TLS 1.3.

Крок 4. Перевіряється захищене з'єднання

Оскільки адреса починається з HTTPS, браузер і сервер виконують процедуру встановлення TLS-з'єднання.

Браузер перевіряє сертифікат сервера та узгоджує параметри захисту.

Крок 5. Браузер надсилає HTTP-запит

Браузер звертається до сервера із запитом на отримання потрібного ресурсу.

Наприклад:

• GET / HTTP/1

• Host: example.com

Крок 6. Сервер обробляє запит

Сервер отримує запит і визначає, що потрібно повернути.

Це може бути готовий HTML-файл або результат роботи серверної програми.

Крок 7. Сервер надсилає відповідь

Сервер повертає HTTP-відповідь.

Наприклад, це може бути успішна відповідь зі статусом 200 OK і HTML-документом.

Крок 8. Браузер обробляє HTML

Отримавши HTML-документ, браузер починає його аналізувати.

Він формує DOM — внутрішню структуру документа.

Під час обробки браузер може знаходити посилання на додаткові ресурси:

• CSS-файли;

• JavaScript-файли;

• зображення;

• шрифти;

• відео та інші матеріали.

Крок 9. Браузер формує сторінку

Браузер обробляє HTML, CSS і JavaScript, визначає розташування елементів, застосовує стилі та виконує потрібні сценарії.

У результаті користувач бачить готову вебсторінку.

Загальна схема

Це спрощена схема. Реальний процес може містити кешування, перенаправлення, кілька серверів, CDN, додаткові запити та інші механізми.

8. Основні поняття: короткий довідник

Висновок

Відкриття сайту — це результат взаємодії багатьох компонентів.

Для початку важливо запам'ятати не всі технічні деталі, а загальну логіку:

• інтернет забезпечує мережевий зв'язок;

• DNS допомагає знаходити сервери за доменними іменами;

• HTTP визначає правила обміну вебповідомленнями;

• HTTPS захищає передавання даних;

• HTML створює структуру сторінки;

• CSS відповідає за її оформлення;

• JavaScript додає інтерактивність і програмну логіку.

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

Джерела та документація

1. MDN Web Docs — How the web works
   https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works

2. MDN Web Docs — How does the Internet work?
   https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work

3. MDN Web Docs — Browsing the web
   https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web

4. MDN Web Docs — Overview of HTTP
   https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Overview

5. MDN Web Docs — HTTP
   https://developer.mozilla.org/en-US/docs/Web/HTTP

6. Cloudflare Learning Center — What is DNS?
   https://www.cloudflare.com/learning/dns/what-is-dns/

7. Cloudflare Learning Center — What is HTTPS?
   https://www.cloudflare.com/learning/ssl/what-is-https/

8. Internet Engineering Task Force (IETF) — RFC 9846: The Transport Layer Security (TLS) Protocol Version 1.3
   https://www.rfc-editor.org/info/rfc9846/?utm_source=chatgpt.com

9. Internet Engineering Task Force (IETF) — RFC 9110: HTTP Semantics
   https://www.rfc-editor.org/rfc/rfc9110