Пошук уроків, статей та іншого контенту
Розберете шлях запиту від браузера до сервера та дізнаєтеся, як браузер отримує й відображає веб-сторінки.
Веб-сторінка не зберігається в браузері повністю заздалегідь. Коли ви вводите адресу в адресний рядок, браузер виконує послідовність дій:
знаходить потрібний сервер;
надсилає йому HTTP-запит;
отримує відповідь;
розбирає HTML і CSS;
будує та відображає сторінку на екрані.
Спрощено цей процес можна подати так:
Браузер → запит → сервер
Браузер ← відповідь ← серверСервер — це комп’ютер або програма, яка зберігає файли сайту та відповідає на запити.
Адреса сторінки називається URL. Наприклад:
https://example.com/articles/index.htmlВона складається з кількох частин:
https — протокол обміну даними;
example.com — доменне ім’я;
/articles/index.html — шлях до ресурсу на сервері.
Комп’ютери в мережі знаходять один одного за IP-адресами, наприклад:
203.0.113.10Людям зручніше використовувати доменні імена:
example.comКоли браузер отримує доменне ім’я, він звертається до DNS — системи, яка знаходить відповідну IP-адресу. Після цього браузер може встановити з’єднання із сервером.
Зазвичай користувачу не потрібно знати IP-адресу сайту. Достатньо ввести його доменне ім’я.
Після знаходження сервера браузер надсилає HTTP-запит. У ньому вказується, який ресурс потрібно отримати та яку дію слід виконати.
Спрощений запит може виглядати так:
GET /index.html HTTP/1.1
Host: example.comТут:
GET означає «отримати ресурс»;
/index.html — шлях до ресурсу;
HTTP/1.1 — версія протоколу;
Host — домен, до якого звертається браузер.
Для завантаження веб-сторінки браузер зазвичай використовує метод GET.
Сервер обробляє запит і надсилає відповідь. Вона містить:
статус виконання запиту;
заголовки;
тіло відповіді.
Наприклад:
HTTP/1.1 200 OK
Content-Type: text/html
<!doctype html>
<html>
<body>
<h1>Привіт!</h1>
</body>
</html>Статус 200 OK означає, що ресурс знайдено та успішно повернуто.
200 OK — запит виконано успішно;
301 Moved Permanently — ресурс переміщено на іншу адресу;
404 Not Found — ресурс не знайдено;
500 Internal Server Error — на сервері сталася помилка.
Заголовок Content-Type повідомляє браузеру, як обробити тіло відповіді:
text/html — HTML-документ;
text/css — CSS-файл;
image/png — зображення у форматі PNG;
application/javascript — JavaScript-файл.
Під час відкриття HTML-документа браузер отримує не лише HTML. У ньому можуть бути посилання на інші ресурси:
CSS-файли;
зображення;
шрифти;
JavaScript-файли.
Наприклад:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<title>Моя сторінка</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Вітаю!</h1>
<p>Це приклад веб-сторінки.</p>
<img src="logo.png" alt="Логотип">
</body>
</html>Спочатку браузер отримує HTML. Потім, аналізуючи його, він бачить:
файл styles.css;
зображення logo.png.
Для кожного з цих ресурсів браузер може виконати окремий HTTP-запит.
Запит HTML
↓
Відповідь із HTML
↓
Знайдено styles.css і logo.png
↓
Окремі запити CSS та зображення
↓
Відображення сторінкиБраузер читає HTML-код і перетворює його на DOM — об’єктне представлення документа.
DOM описує структуру сторінки у вигляді дерева. Для цього документа:
<body>
<h1>Вітаю!</h1>
<p>Це приклад.</p>
</body>дерево приблизно матиме такий вигляд:
body
├── h1
│ └── "Вітаю!"
└── p
└── "Це приклад."Кожен HTML-елемент стає вузлом цього дерева. Батьківські та дочірні зв’язки між елементами відповідають вкладеності HTML.
CSS описує зовнішній вигляд елементів: кольори, розміри, відступи, шрифти та розташування.
Наприклад:
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: darkblue;
}
p {
font-size: 18px;
}Браузер визначає, які CSS-правила стосуються кожного елемента. Потім він обчислює остаточні значення властивостей:
який колір має заголовок;
який розмір шрифту використовує абзац;
яку ширину та висоту має елемент;
де саме його розмістити.
HTML відповідає переважно за структуру та зміст, а CSS — за зовнішній вигляд.
Спрощено браузер проходить такі етапи:
Браузер отримує HTML, CSS та інші потрібні файли від сервера.
HTML перетворюється на дерево елементів.
Браузер читає CSS і визначає стилі для елементів.
Браузер обчислює розміри та позиції елементів на сторінці. Цей етап називають компонуванням або layout.
Браузер малює текст, кольори, межі, зображення та інші частини сторінки.
Готове зображення сторінки з’являється у вікні браузера.
Цей процес може повторюватися, якщо сторінка змінюється, наприклад після зміни розміру вікна або завантаження додаткових ресурсів.
Створіть два файли в одній папці.
index.html:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Як працює веб</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="card">
<h1>Моя веб-сторінка</h1>
<p>Браузер отримав HTML і CSS та відобразив їх.</p>
</main>
</body>
</html>styles.css:
body {
margin: 0;
padding: 40px;
font-family: Arial, sans-serif;
background-color: #eef2ff;
}
.card {
max-width: 500px;
margin: 0 auto;
padding: 24px;
background-color: white;
border: 1px solid #c7d2fe;
border-radius: 12px;
}
h1 {
margin-top: 0;
color: #3730a3;
}
p {
color: #374151;
}Відкрийте файл index.html у браузері. Відбудеться така послідовність:
браузер прочитає HTML;
побачить посилання на styles.css;
завантажить CSS-файл;
застосує стилі до елементів;
розташує та намалює сторінку.
Якщо перейменувати styles.css або помилитися в атрибуті href, HTML все одно може відкритися, але стилі не завантажаться. Сторінка матиме стандартний вигляд браузера.
У сучасному вебі часто використовується протокол HTTPS:
https://example.comHTTPS захищає дані під час передавання між браузером і сервером. Для користувача адреса сторінки виглядає майже так само, як HTTP-адреса, але передавання даних відбувається із шифруванням.
Під час розробки важливо розуміти різницю:
http:// — незахищений протокол;
https:// — захищений варіант HTTP.
Помилка може виникнути на різних етапах:
DNS не знайшов домен;
сервер недоступний;
сервер повернув помилку;
ресурс має неправильний шлях;
браузер не зміг завантажити CSS або зображення;
у HTML неправильно вказано адресу ресурсу.
Наприклад, якщо файл підключено так:
<link rel="stylesheet" href="style.css">але фактична назва файлу — styles.css, сервер не знайде потрібний ресурс. Важлива кожна частина шляху, зокрема закінчення назви та регістр літер.
HTML задає структуру документа. Для кольорів, відступів, шрифтів і розташування використовують CSS.
HTML часто посилається на CSS, зображення та інші ресурси. Для них браузер виконує додаткові запити.
example.com — це домен, а /index.html — шлях до ресурсу на цьому домені. Один сервер може обробляти багато різних шляхів.
Якщо ресурс не відображається, варто перевірити, чи сервер повернув 200, чи, наприклад, 404.
Перевіряйте назви файлів і папок у href та src. Шлях у HTML має відповідати фактичному розташуванню ресурсу.
Браузер надсилає запит до сервера, щоб отримати веб-сторінку.
DNS допомагає знайти сервер за доменним ім’ям.
HTTP-відповідь містить статус, заголовки та дані.
HTML описує структуру документа.
CSS описує зовнішній вигляд документа.
Браузер перетворює HTML на DOM, застосовує CSS, обчислює розташування елементів і малює сторінку.
CSS, зображення та інші ресурси зазвичай завантажуються окремими запитами.
Код відповіді 200 означає успіх, а 404 — що ресурс не знайдено.