Модуль 1 · Урок 1
Як працює веб і з чого складається сторінка
Вебсторінка — не один файл і не картинка. Browser отримує document, знаходить залежні ресурси, інтерпретує HTML/CSS/JavaScript і створює live representation, з якою взаємодіє користувач.
BrowserClient/serverURL + HTTPHTML/CSS/JS
Від адреси до ресурсів
1 · URL
Scheme, host, port, path, query і fragment задають адресу.
Scheme, host, port, path, query і fragment задають адресу.
2 · DNS
Допомагає знайти мережеву адресу host.
Допомагає знайти мережеву адресу host.
3 · Request/response
Client надсилає HTTP request, server повертає status, headers і body.
Client надсилає HTTP request, server повертає status, headers і body.
4 · Parse/render
Browser обробляє document і запитує CSS, JS, images та fonts.
Browser обробляє document і запитує CSS, JS, images та fonts.
Три ролі, одна сторінка
| Технологія | Головна роль | Приклад |
|---|---|---|
| HTML | Зміст і семантична структура | Heading, navigation, form control |
| CSS | Presentation і layout | Color, spacing, grid, responsive rule |
| JavaScript | Behavior і state | Validation, interaction, data update |
Роль не є абсолютною забороною, але separation of concerns робить зміни зрозумілішими й доступнішими.
Source, DOM і pixels
View SourceПочатковий HTML response або локальний document.
Live DOMПоточне дерево після parsing і JavaScript changes.
Rendered UIPixels після styles, layout, fonts і viewport constraints.
Не плутайте evidence
Зміна text у DevTools Elements змінює live DOM поточної вкладки, але не переписує source file на диску чи server response.
Практика
- Відкрийте starter workspace через local server.
- У Network знайдіть document, CSS і JS та запишіть status/type/initiator.
- Порівняйте View Source, Elements і видимий результат.
- Поясніть, який file відповідає за structure, presentation і behavior.
Офіційні джерела
Практична перевірка · урок 1 з 60
Закріпіть матеріал уроку
Три сценарні питання. Для зарахування уроку потрібно дати щонайменше дві правильні відповіді.