3.3 Воркшоп 3 — Как устроен сайт внутри

tg @dgurachevskii

Как устроен сайт внутри Фронтенд и веб-взаимодействия — на пальцах

Две части. Сначала заглянем внутрь страницы, потом разберём, как сайты обмениваются данными.

01 Фронтенд 02 Веб-взаимодействия Из чего собрана любая веб-страница Как сайты общаются и обмениваются данными

Что такое HTML Формы на лендинге H ✉ каркас и содержимое страницы как сайт собирает заявки

C Что такое CSS оформление: цвета, шрифты, вид ⇄ HTTP на пальцах запрос и ответ, коды 200 / 404

JavaScript в браузере Парсинг сайтов JS ⤓ поведение и реакции на клики достаём данные автоматически

▢ Статические сайты лендинги и портфолио, без сервера + Сервер, URL, API, https слова, что перестанут пугать

01

Всё, что вы видите и трогаете в браузере. Разберём, из чего собрана любая страница.

Всё начинается с адреса. Браузер сам сходит за файлами на сервер и соберёт из них страницу — за доли секунды.

01 Вводите адрес 02 Браузер просит 03 Сервер отдаёт 04 Браузер рисует Набрали или кликнули ссылку. → Шлёт запрос на сервер сайта. → Присылает файлы сайта. → Собирает страницу из файлов. zerno.ru GET / → ← 200 OK готово ✓

HTML каркас и текст CSS оформление, вид JS поведение, клики 🖼 картинки, шрифты

Эта пара «запрос →ответ» повторяется для каждой страницы и для каждой картинки. Дальше разберём, из чего собраны эти файлы — а во второй части, как браузер «просит» их у сервера.

Они работают вместе. Удобно думать про дом: сначала каркас, потом отделка, потом электрика и выключатели.

HTML CSS JavaScript Каркас и Оформление Поведение содержимое и вид и реакции Что вообще есть на странице: Как это выглядит: цвета, шрифты, Что страница делает в ответ: реагирует заголовки, текст, картинки, кнопки. отступы, расположение блоков. на клики, проверяет, считает.

было Забронировать <h1>Заголовок</h1> <button>Кнопка</button> + в корзину → в корзине: 3 стало Забронировать Клик — и число меняется сразу Набор тегов — и всё Текст тот же — вид разный

🏗 Как стены и перекрытия дома 🎨 Как краска, обои, мебель ⚡ Как электрика и выключатели

Это обычный текст, размеченный тегами: «вот заголовок», «вот абзац», «вот картинка». Слева — разметка, справа — что видит человек.

<h1>Кофейня «Зерно»</h1><p>Свежая обжарка каждый день.</p><img src="coffee.jpg"> <button>Забронировать</button>

ВАЖНО Видно: без оформления это просто список — заголовок, текст, картинка. Голый каркас. Красоту наводит CSS.

Тег говорит браузеру, чем является кусок текста: «это заголовок», «это ссылка». У большинства тегов есть открытие и закрытие.

h1…h3 заголовки

<h1>Заголовок</h1> p абзац текста ↑ ↑ содержимое ↑ закрыть открыть img картинка

a ссылка Браузер читает теги сверху вниз и строит из них страницу. Писать этот код вручную не нужно — его генерирует Claude. Достаточно button кнопка понимать, что внутри. ul · li список и пункты Парные Одиночные <p>…</p> <img> · <input> div блок-контейнер

Их сотни — но 90% страниц собираются из пары десятков.

Две части: head — служебная, её не видно, и body — всё, что видит человек. Теги вкладываются друг в друга, как матрёшки.

<html> head <head> Невидимая часть заголовок вкладки, Название вкладки, кодировка, подключение CSS. Посетитель этого не видит. кодировка, стили </head> <body> body всё видимое: текст, Видимая часть картинки, кнопки Всё содержимое страницы: заголовки, текст, картинки, формы, </body></html> кнопки.

Это «паспорт» страницы — на экране не видно, но браузер и поисковики читают его первым.

title Название вкладки и строка в поиске

meta charset Кодировка — чтобы буквы не «поплыли» <head> <title>Кофейня «Зерно»</title> meta viewport «Подстройся под телефон» <meta charset="utf-8"> <meta name="viewport" …> meta description Описание под ссылкой в Google <meta name="description" …> <link rel="stylesheet" …> <script src="script.js"></head> link Подключает стили и иконку вкладки

script Подключает JavaScript

Атрибут пишется внутри открывающего тега и уточняет деталь: какую картинку показать, куда ведёт ссылка.

<img src="coffee.jpg"> src — какой файл картинки показать

<a href="/menu">Меню</a> href — куда ведёт ссылка при клике

<input placeholder="Телефон"> placeholder — подсказка серым в поле

<a target="_blank">…</a> target — открыть ссылку в новой вкладке

СУТЬ Тег — что это, атрибуты — какое именно. Один тег ведёт себя по-разному в зависимости от настроек.

Каждый тег относится к семье по своей роли. Учить не надо — достаточно узнавать, за что отвечает каждая.

📝 Текст 🖼️ Медиа 🧱 Структура Заголовки и абзацы — содержимое страницы. Картинки, видео и звук на странице. Невидимые блоки, что делят страницу на части.

h1 p strong span img video audio svg header main footer div

🔗 Ссылки и кнопки ✏️ Формы 📋 Списки и таблицы То, что ведёт на другие страницы и Поля, куда посетитель вводит данные. Перечни пунктов и данные строками. нажимается.

a button form input select ul · li table tr · td

Содержимое, которое читают. Заголовки задают иерархию, абзацы — основной текст, акценты выделяют важное.

h1…h6 Заголовки: от главного к мелким

p Абзац обычного текста

strong Жирный акцент — важное

em Курсив — смысловое ударение

span Кусочек строки — напр. покрасить слово

Всё, что не текст: фотографии, ролики, музыка и векторные иконки. Оживляют страницу.

img Картинка: фото, логотип

video Видео с кнопками плеера

▶ video · 0:38 audio Звук и аудиозаписи

svg Иконки и графика без потери чёткости

Сами ничего не показывают — делят страницу на смысловые части. Из них собирается каркас.

header nav

main

header Шапка: логотип и меню

section nav Навигация — набор ссылок-разделов

main Основное содержимое страницы

footer Подвал: контакты, ссылки

section div Универсальная «коробка» без смысла

footer

Их легко спутать, но смысл разный: ссылка переводит на адрес, кнопка делает что-то прямо на странице.

a button Ссылка Кнопка Ведёт на другую страницу или сайт. Атрибут href говорит, куда Запускает действие здесь и сейчас: отправить форму, открыть именно. окно, добавить в корзину.

Перейти в меню → Отправить заявку

ПРОСТО Нужно «перейти куда-то» — ссылка. Нужно «что-то сделать на странице» — кнопка.

Через них посетитель что-то сообщает сайту. Из этих кирпичиков собирается любая форма заявки.

form Обёртка всей формы

label Подпись над полем

input Однострочное поле: имя, телефон

textarea Многострочное — сообщение

select Выпадающий список вариантов

Списки — для перечислений вроде преимуществ. Таблицы — для данных: прайс, расписание, сравнение.

ul ol li table tr td · th

Списки Таблица

ul · маркированный Сорт Цена • Свежая обжарка • Доставка за час Эфиопия 920 ₽

ol · нумерованный Колумбия 780 ₽ 1. Выберите сорт 2. Оставьте заявку Бразилия 690 ₽

tr — строка · td — ячейка · th — шапка столбца

Каждый пункт — это li внутри ul или ol.

Имена структурных тегов прямо говорят, что внутри. Из них собирается каркас лендинга — сверху вниз.

header nav · меню

main section · герой header Шапка: логотип и меню сайта

section · преимущества main Главное содержимое страницы section · форма

section Смысловой блок: герой, отзывы…

footer Подвал: контакты и ссылки

footer · контакты

ЗАЧЕМ Понятные имена помогают людям, поисковикам и агенту понять страницу. Claude раскладывает лендинг ровно по такому скелету.

Один и тот же HTML. Содержимое не меняется — меняется только вид. Сравните «до» и «после».

→

СУТЬ Текст и кнопка те же. CSS добавил цвета, шрифты, фон и форму — и страница ожила.

Каждое правило CSS — это «свойство: значение». Указываем, что настраиваем и каким хотим это видеть.

Цвет Шрифт текста и элементов размер и начертание

Aa

color: тёмно-серый; font-size: крупный; background: кремовый; Фон и форма Расположение border-radius: скруглить; скругления, рамки отступы и сетка padding: добавить воздуха;

CSS перестраивает страницу под ширину экрана. На десктопе блоки в ряд, на телефоне — в столбик. Контент тот же.

→

💻 Десктоп — блоки в ряд 📱 Телефон — в столбик ↕️ Блоки встают в столбик 🔤 Шрифт и кнопки крупнее 👆 Удобно нажимать пальцем ПОЧЕМУ ВАЖНО Больше половины посетителей лендинга приходят с телефона — сайт обязан быть удобным на маленьком экране.

Сетка — невидимый каркас из колонок, по которому выстраиваются блоки. Меняем число колонок — меняется раскладка.

колонки: 1 · 1 · 1 отступ: 24px 3 колонки · десктоп «1 · 1 · 1» — три колонки равной ширины. В CSS это grid.

2 колонки · планшет 📐 Ровные колонки Блоки одинаковой ширины и высоты

1 колонка · телефон ↔️ Равные отступы Одинаковый «воздух» между блоками

Видите «grid» или «колонки» — речь про сетку раскладки. Достаточно сказать Claude: «карточки в три колонки, на телефоне в одну».

Свойств сотни, но они делятся на понятные группы. Достаточно знать, к какой относится то, что вы просите изменить.

🎨 Цвет и фон 🔤 Шрифт и текст 📐 Размеры и отступы Цвет текста, заливка, прозрачность. Размер, жирность, выравнивание. Ширина, высота, поля, «воздух».

color · background Аа Аа font-size margin · padding

🔲 Рамки и форма 🧩 Раскладка ✨ Эффекты

Границы, скругления, тени. Как блоки стоят: ряд, столбик, сетка. Плавные переходы и анимация при наведении.

border-radius flex · grid transition · animation

НА ПРАКТИКЕ «Сделай кнопку крупнее и со скруглением» — это шрифт плюс форма. Вы называете группу — Claude подбирает свойства.

HTML и CSS — это неподвижная картинка. JavaScript добавляет реакцию на действия — прямо в браузере, без перезагрузки.

+ JS

ПРОСТО JS слушает действия пользователя и меняет страницу в ответ — это и есть «интерактив».

Даже не зная названия. Вот привычные вещи, за которые отвечает именно JavaScript.

Проверка формы Меню и вкладки Корзина и счётчики Ошибку видно ещё до отправки Раскрылись по клику, без перехода Сумма пересчитывается на лету

Каталог ▾ +7 905 12 Кофе в зёрнах

⚠ Телефон введён неверно Молотый − 3 + 2 760 ₽

Лента и подгрузка Подсказки поиска Новое появляется при прокрутке Варианты прямо при наборе

⚡ Как распознать JavaScript

🔍 кофе Что-то меняется без перезагрузки страницы — почти наверняка это кофе в зёрнах JavaScript.

загружаем ещё… кофе молотый

Сайт — это набор файлов на сервере. Браузер запрашивает их и показывает. Всем посетителям одно и то же.

→

▢ index.html главная

▢ about.html о нас

▢ style.css оформление

▢ script.js поведение

▢ photo.jpg картинка

▢ logo.svg логотип

✓ Быстро и дёшево ✓ Надёжно, нечему ломаться ★ Лендинги, портфолио, документация, блоги

Речь не про «есть ли JS». Интерактив (меню, корзина, анимации) работает и там, и там. Вопрос в одном: откуда берётся содержимое страницы.

Меню на стене кафе Личный счёт под заказ Напечатано один раз — одно для всех, кто бы ни зашёл. Собирается на лету под каждого — у всех свой. Нужен сервер с логикой.

Меню Меню Меню дня дня дня Анна Олег Гость · 2 чашки · торт · пусто

👩 🧑 👵 👩 🧑 👵

✓ Лендинг, портфолио, блог ✓ Лента соцсети, личный кабинет ✓ Документация, промо ✓ Корзина магазина, поиск

Статика тоже бывает «живой» за счёт JS в браузере. Динамика — когда сервер собирает страницу под пользователя: лента, кабинет, корзина с историей.

02

взаимодействия Страница редко живёт одна. Разберём, как сайты отправляют, получают и собирают данные.

Никакой магии. Чужой компьютер в дата-центре, который круглосуточно готов отдать файлы вашего сайта по запросу.

🖥️ Всегда доступен Работает круглосуточно — сайт открывается в любой момент.

Отвечает на запросы Браузер просит — сервер отдаёт нужный файл или данные. Хранит файлы сайта и всегда онлайн «Выложить сайт» zerno.ru → этот компьютер Значит положить файлы на такой компьютер — например, на GitHub Pages.

Ссылка — не случайный набор символов. У неё есть понятные части, каждая со своей ролью.

https://zerno.ru/menu/coffee?sort=цена

https:// zerno.ru /menu/coffee ?sort=цена Способ связи Домен — имя сайта Путь — страница Параметры запроса Защищённое соединение. Как название магазина. Его Конкретный раздел сайта, как Уточнения после ?: что искать, как Замочек в браузере — про него. покупают и регистрируют. полка в магазине. сортировать, какой фильтр. Пар много — через &.

ГДЕ ВИДНО Параметры — это «?город=Москва&сорт=арабика» в адресе. Так сайт понимает, что вы искали и какой фильтр включили.

Нажатие на кнопку запускает короткую цепочку: данные собираются, уходят на сервер и возвращаются ответом.

01 02 03 Браузер собирает Сервер принимает Ответ посетителю Имя и телефон упаковываются в Проверяет данные и сохраняет заявку: Браузер показывает «Спасибо, заявка запрос. Сначала проверяет, что поля база, CRM, почта или Telegram — куда принята». Поля очищаются — без заполнены верно. настроили. перезагрузки страницы.

→ →

имя + телефон сохранено ✓ Спасибо! 🎉

МОСТИК Этот «разговор» браузера и сервера идёт по правилам протокола HTTP — про него дальше.

Форма на сайте умеет отправлять заявку туда, где вам удобно её видеть. Самые частые варианты — и как заявка в них выглядит:

✉️ ✈️ 📊 🗂️ На почту В Telegram В таблицу В CRM Письмо на ваш e-mail Сообщение в бот или чат Новая строка в Google Sheets Карточка сделки в воронке

📨 Новая заявка с сайта 🔔 Заявка Имя Телефон Анна · Дегустация Анна · +7 900 12-34 Анна, +7 900 12-34 Анна +7 900… Хочу записаться 11:42 Новая Олег +7 905…

НА ПРАКТИКЕ Claude настроит отправку — достаточно сказать, куда вы хотите получать заявки.

HTTP — язык, на котором браузер общается с сервером. Всегда пара: кто-то спрашивает, кто-то отвечает.

🙋 Браузер посетитель кафе → 👨‍🍳 Сервер кухня кафе

«Дайте, пожалуйста, страницу меню» ← «Вот страница меню, держите»

КАЖДЫЙ КЛИК Открыли сайт, отправили форму, поставили лайк — каждый раз это пара «запрос → ответ» по HTTP.

Разных видов запроса несколько, но в быту хватает двух. Разница простая.

«Дай посмотреть» «Прими и сохрани» Получить страницу или данные. Ничего не меняет на Отправить данные, которые сервер запишет. Меняет сервере. состояние.

· Открыть страницу сайта · Отправить форму-заявку · Получить список товаров · Оформить заказ · Загрузить картинку · Зарегистрироваться

Метод — это глагол запроса. По нему сразу видно, что делают с данными: посмотреть, добавить, изменить, удалить.

Посмотреть Добавить Изменить Удалить Получить страницу или данные. Создать что-то новое на Обновить то, что уже есть. (ещё Убрать запись с сервера. Ничего не меняет. сервере. PATCH)

Открыть сайт, список товаров Заявка, заказ, регистрация Обновить профиль, адрес Убрать товар, удалить пост

Эти слова писать не нужно — браузер и Claude сами выберут метод. Вам важно понимать смысл: по методу видно, что происходит с данными.

И запрос, и ответ устроены как письмо: первая строка — что делаем, заголовки — служебные пометки, тело — само содержимое.

→ З А П Р О С что я хочу ← ОТ В Е Т что вернул сервер

POST /zayavka 200 OK Host: zerno.ru Content-Type: страница Content-Type: форма Set-Cookie: …

имя = Анна <html> … </html> телефон = +7 900…

Код — три цифры. Первая цифра — это семейство, она сразу говорит, что в целом случилось. Остальные две уточняют.

2xx 3xx 4xx 5xx Успех Перенаправление Ошибка у вас Ошибка сервера всё получилось адрес переехал адрес, доступ, запрос вы ни при чём

200 404 500 Всё хорошо Не найдено Сломался сервер Страница нашлась и отдана. Заявка Такой страницы нет — опечатка в адресе Ошибка на стороне сайта. Вы ни при чём принята. Самый частый ответ. или её удалили. — чинят разработчики.

Рядом: 201 создано · 204 пусто, но ок Рядом: 403 нет доступа · 301 адрес переехал Рядом: 503 сервис недоступен

Тот самый замочек Замочек у адреса означает https — защищённое соединение. Данные шифруются, и по дороге их не прочитать.

🔒 https://zerno.ru ⚠ http://zerno.ru

Защищённо Незащищённо Пароли, телефоны и оплаты передаются зашифрованно. Данные идут открытым текстом. Браузер пометит сайт как Браузер показывает замочек. «небезопасный».

✓ Подходит для форм, входа и оплат ✕ Пароль можно перехватить по дороге ✓ Повышает доверие и позиции в поиске ✕ Посетители видят предупреждение и уходят

ХОРОШАЯ НОВОСТЬ На GitHub Pages и большинстве хостингов https включается автоматически и бесплатно.

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

👤 → 🍪 → 👋 Зашли первый раз Сайт даёт куку Вернулись позже Ввели логин и пароль на сайте Браузер хранит пометку «это вы» Сразу свой аккаунт, без пароля

🔑 Вход в аккаунт без повторного пароля 🛒 Корзина помнит товары 🍪 Те самые баннеры про cookies

Заявки, товары, аккаунты где-то лежат. Вариантов несколько — от простого к серьёзному.

🍪 📊 🗄️ 🗂️ В браузере Готовые таблицы База данных Файлы и облако Куки и localStorage — у самого Google Sheets, Airtable, Notion — На сервере: пользователи, Картинки, видео, документы — в посетителя. без кода. заказы, каталог. хранилище.

Вход, корзина, настройки Идеально для простого проекта Это уже динамика Тяжёлое — отдельно

Чем проще проект — тем проще хранилище. Лендингу с заявками хватит таблицы или CRM; своя база нужна, когда у каждого свой личный контент.

API — это «окошко», через которое программы обмениваются данными напрямую. Не страница для глаз, а аккуратные данные для программы.

🌤️ Погода и прогноз на сайте

«Какая сейчас погода в Москве?» 🗺️ Карта и маршрут проезда

💳 «Оплата прошла?» — у банка { город: "Москва", t: +18 }

🤖 Ответ от модели Claude

Коннекторы (MCP), о которых говорили на прошлом занятии, — это и есть готовые API: так агент «звонит» во внешние сервисы.

Парсинг — это когда программа сама заходит на страницы и забирает нужное, вместо ручного копирования.

Цены конкурентов Контакты и лиды Следить за рынком ежедневно Собирать базы из каталогов

Открыл сайт → скопировал → вставил в таблицу → повторил 500 раз Вакансии и резюме Наполнение каталога Аналитика рынка труда Товары, описания, фото

Всё, что мы разобрали, сходится здесь. Парсер запрашивает страницу, получает HTML и достаёт из него нужные куски.

01 02 03 04 Запросить страницу Получить HTML Найти нужное Сложить в таблицу Программа открывает адрес В ответ приходит та самая По тегам и структуре Готовые строки — в таблицу — по HTTP, как браузер. разметка с тегами. выбираются цена, название, или базу. ссылка.

→ → →

GET /catalog <div>…</div> цена · название .csv / таблица

ВОТ ЗАЧЕМ HTML Парсер опирается прямо на теги из первой части — поэтому мы и начали разговор с HTML.

Многие сайты дорисовывают контент через JavaScript уже после открытия. Простой парсер видит пустую страницу.

Данные уже в HTML Дорисовывает JavaScript Статические сайты и большинство лендингов. Получил Цены и карточки появляются не сразу. В первом HTML их ещё страницу — данные на месте. нет.

✓ Подходит обычный парсер ! Нужен «безголовый браузер» или агент ✓ Быстро, дёшево, надёжно ! Он дождётся, пока JS прогрузит данные

<div>Цена: 450 ₽</div> ✓ <div></div> — пусто ✗

ВЫВОД Чем «живее» сайт, тем нужнее умный инструмент, который дожидается загрузки. Это одна из причин выбрать агента.

Здесь снова помогает вайбкодинг: вместо хрупких правил — агент, которому можно объяснить задачу словами.

Хрупкие правила Понимает страницу ✗ Настроен на конкретные теги и места ✓ Читает смысл, как человек глазами ✗ Сайт поменял вёрстку — парсер сломался ✓ Устойчив к изменениям вёрстки ✗ Каждый раз нужен программист ✓ Задача ставится словами: «собери цены и названия»

«Зайди в каталог и выпиши товар, цену и ссылку в таблицу»

ГЛАВНОЕ Агент устойчивее к мелочам вёрстки и не требует программиста на каждую правку — задачу ставите словами.

Кода вы не пишете. Объясняете, что нужно достать и куда сложить — остальное берёт на себя агент.

Зайди в каталог на этом сайте и собери все товары: название, цену и ссылку

Сложи в таблицу и дай скачать

Готово — собрал 48 товаров. Вот таблица, можно скачать. 👇

Соберите свой лендинг с Claude Всё, что разобрали сегодня — в одной задаче. Не пишете код, а ставите задачу словами.

Опишите бизнес — получите лендинг ГОТО В О , Е С Л И 1 заголовок, пара секций, картинка

Добавьте форму заявки 2 имя и телефон + кнопка

Сделайте удобным на телефоне ✓ Лендинг открывается по ссылке 3 «адаптивно, блоки в столбик» ✓ Есть форма с именем и телефоном ✓ Нормально смотрится на телефоне Опубликуйте как статику 4 GitHub Pages — как в прошлый раз

⭐ Со звёздочкой Попросите собрать цены с открытого каталога в таблицу — это парсинг

💬 Подсказка Не получилось с первого раза — переформулируйте просьбу. Диалог и есть вайбкодинг.

Готовый адрес киньте в чат группы 👋

внимание Теперь вы знаете, из чего собран сайт и как сайты общаются между собой.

Данила Гурачевский tg @dgurachevskii