Як працює вебмережа

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

Перш ніж писати перший рядок коду, корисно побачити загальну картину. Ти коли-небудь замислювався, що насправді відбувається, коли ти вводиш адресу сайту в браузері та натискаєш "Enter"? Це може виглядати як миттєва магія, але насправді це захоплива розмова між комп'ютерами. Давай розберемося разом!

1. Клієнти та сервери: головний зв'язок

Щоразу, коли ти користуєшся інтернетом, між собою спілкуються два головні "персонажі": Клієнти та Сервери.

• Клієнт: це ти! Точніше, твій пристрій (наприклад, смартфон або ноутбук) і браузер (Chrome, Safari, Firefox тощо). Ти "замовник", який запитує перегляд сайту.
• Сервер: це потужний комп'ютер, який знаходиться десь у світі. Уяви його як великий цифровий склад, що працює 24/7. Його завдання - зберігати текст, зображення та код сайту і "видавати" їх тобі на запит.

2. Пошук правильної адреси: URL та DNS

У світі мільйони серверів. Як браузер розуміє, до якого саме підключитися?

• Кожен сервер має унікальну цифрову адресу - IP-адресу. Вона виглядає як довгий ряд чисел (наприклад, 192.0.2.172).
• Оскільки людям важко запам'ятовувати довгі числові адреси, ми використовуємо зрозумілі назви, як-от google.com або developer.mozilla.org. Це URL (Uniform Resource Locators).
• Щоб пов'язати зручний для людини URL з IP-адресою, інтернет використовує DNS (Domain Name System).

Аналогія з життя: DNS - це як велика адресна книга або GPS інтернету. Коли ти вводиш назву в браузері, DNS швидко знаходить точний цифровий "номер" (IP-адресу), потрібний для підключення до правильного сервера.

3. Розміщення запиту: HTTP і пакети

Після того як браузер знаходить правильний сервер, він має ввічливо попросити сторінку. Для цього використовується спеціальна мова - HTTP (Hypertext Transfer Protocol).

• Твій браузер надсилає HTTP-запит. Це цифрове повідомлення на кшталт: "Привіт, можна, будь ласка, головну сторінку?"
• Якщо сервер погоджується, він надсилає HTTP-відповідь. Часто вона містить статус "200 OK", що фактично означає: "Зараз буде!".

Але сервер не відправляє весь сайт одним гігантським шматком. Він ділить дані на тисячі маленьких частин - пакетів.

Аналогія з життя: уяви, що ти замовив величезний замок LEGO поштою. Він не приїде вже зібраним. Він прийде у маленьких пакетиках у коробці. Передача даних маленькими "пакетами" значно швидша. Якщо один пакет загубиться, браузер попросить тільки цей маленький шматочок, а не весь "замок" заново.

4. Збирання частин: DOM

Зрештою всі маленькі пакети приходять на твій комп'ютер. Але поки що це просто сирі дані й код. Браузер має зібрати їх так, щоб ти побачив готову сторінку.

• Спочатку браузер читає HTML (структуру сторінки) і перетворює його на схему під назвою DOM (Document Object Model).
• Також він читає CSS (оформлення і кольори) та будує CSSOM (CSS Object Model).
• Потім браузер поєднує ці схеми, визначає, де має бути кожен блок, зображення і абзац, і "малює" сторінку на екрані.

Аналогія з життя: побудова DOM - це як створення "родинного дерева" для сайту. Воно допомагає браузеру зрозуміти, як заголовок пов'язаний з абзацами, а зображення - з кнопками, щоб правильно зібрати фінальну сторінку.

Ти впорався!

Не так уже й складно, правда? Ти щойно дізнався базову механіку всього інтернету. Ти надіслав запит (Клієнт), знайшов адресу (DNS), "поговорив" потрібною мовою (HTTP), отримав частини пазла (Пакети) і зібрав схему (DOM).

Тепер, коли ти знаєш, як веб доставляє код, ти готовий до найцікавішого: навчитися його писати. Переходимо до HTML!