Урок 2. Веб-сайт. Веб-страница. Взаимодействие браузера с веб-сервером

На прошлом уроке мы разобрались, как компьютеры находят друг друга в глобальной сети. Но ведь сеть — это просто «дороги». А что ездит по этим дорогам? Правильно, информация. И сегодня мы поговорим о том, как эта информация упаковывается, доставляется и хранится, когда вы открываете любимый сайт.

Тема урока: «От веб-страницы до облака: как устроен современный Интернет».

Содержание

1. Сайт и Веб-страница: в чем разница?
2. Как браузер «общается» с сервером?
3. Статические и Динамические страницы
4. Разработка интернет-приложений (Веб-разработка)
5. Сетевое хранение данных: где живут ваши фото?
🛠 Практические задания
Задание 1. «Распредели роли»
Задание 2. «Статика или Динамика?»
Задание 3. «Собери цепочку» (Восстанови логику)
Задание 4. Аналитическое (Архитектура приложения)

1. Сайт и Веб-страница: в чем разница?

Эти понятия часто путают, но разница между ними простая:

Веб-страница (Web-page) — это один отдельный документ в сети. У нее есть свой уникальный адрес (URL). Например, главная страница нашего школьного сайта или страница с расписанием на завтра.
Веб-сайт (Web-site) — это совокупность множества веб-страниц, которые объединены общей тематикой, дизайном и находятся под одним доменным именем (например, school12.ru).

Аналогия: Если сайт — это книга, то веб-страница — это один конкретный лист (страница) в этой книге.

2. Как браузер «общается» с сервером?

Когда вы вводите адрес сайта и нажимаете Enter, происходит магия клиент-серверного взаимодействия. Давайте разберем его по шагам:

Запрос (Request): Ваш браузер (это клиент) формирует запрос по протоколу HTTP. Он как бы говорит: «Эй, сервер, дай мне главную страницу сайта school12.ru!».
Обработка: Веб-сервер (это специальная программа на мощном компьютере, которая работает 24/7) принимает запрос. Он ищет нужные файлы на своем жестком диске или запрашивает их у базы данных.
Ответ (Response): Сервер находит файлы (код страницы, картинки) и отправляет их обратно в браузер в виде HTTP-ответа.
Отрисовка (Рендеринг): Браузер получает код и «собирает» из него красивую картинку на вашем экране.

Аналогия: Вы (браузер) даете заказ официанту (протокол HTTP), который относит его на кухню (сервер). Повара готовят блюдо (обрабатывают запрос) и отдают его вам через официанта.

3. Статические и Динамические страницы

Не все страницы в Интернете одинаковы. Они делятся на два типа:

Статические страницы: Это просто готовые HTML-файлы. Сервер просто отдает их вам, как есть. Они выглядят одинаково для всех пользователей и не меняются, пока разработчик вручную не исправит код. Пример: страница «Контакты» или простое портфолио.
Динамические страницы: Сервер генерирует такую страницу на лету, в момент вашего запроса. Ее содержимое зависит от того, кто вы, какое у вас время, или что вы искали. Пример: ваша лента в соцсети, корзина в интернет-магазине, результаты поиска. Для их создания серверу нужна «помощь» — база данных и серверные скрипты.

4. Разработка интернет-приложений (Веб-разработка)

Создание современных сайтов — это целая индустрия. Условно веб-разработку делят на две части:

Frontend (Клиентская часть): Всё, что вы видите и с чем взаимодействуете в браузере.
- Языки: HTML (скелет страницы, структура), CSS (одежда, дизайн, цвета), JavaScript (мышцы, интерактивность, анимации, реакция на клики).
Backend (Серверная часть): «Мозги» сайта. То, что скрыто от глаз пользователя. Backend обрабатывает данные, проверяет пароли, общается с базами данных.
- Языки: Python, PHP, Java, C#, Go.

Лайфхак: Сегодня не обязательно писать сайт с нуля. Существуют CMS (системы управления контентом, например, WordPress) и конструкторы (Tilda), которые позволяют создавать сложные сайты без глубокого знания кода.

5. Сетевое хранение данных: где живут ваши фото?

Когда вы загружаете мем в чат или фото в облако, оно не остается на вашем телефоне. Оно отправляется по сети в ЦОД (Центр Обработки Данных) — гигантское здание, забитое тысячами серверов.

Файловые хранилища: Просто хранят ваши картинки и документы (Яндекс.Диск, Google Drive).
Базы данных (БД): Это специальные системы для хранения структурированной информации. Например, в ВКонтакте не просто лежат миллионы картинок. В базе данных хранится текст: «ID пользователя 123 загрузил файл photo_456.jpg в альбом 789».

Современные сайты — это, по сути, красивые «витрины» (фронтенд), которые показывают нам данные, лежащие в огромных сетевых хранилищах (бэкенд).

🛠 Практические задания

Проверим, как вы поняли архитектуру веба!

Задание 1. «Распредели роли»

Какие технологии из списка отвечают за Frontend (клиентскую часть), а какие за Backend (серверную часть)? Технологии: HTML, Python, CSS, PHP, JavaScript (в браузере), SQL (язык запросов к базам данных).

Задание 2. «Статика или Динамика?»

Определите, какие из следующих страниц скорее всего являются динамическими, а какие статическими. Объясните свой выбор.

Страница с юридическим адресом компании.
Главная страница интернет-магазина, где показаны «Рекомендации именно для вас».
Страница погоды, которая показывает температуру в вашем городе.
Страница «Пользовательское соглашение» (текст, который никто не меняет годами).

Задание 3. «Собери цепочку» (Восстанови логику)

Расположите шаги загрузки веб-страницы в правильном хронологическом порядке: А) Браузер получает HTTP-ответ от сервера. Б) Пользователь вводит URL в адресную строку и нажимает Enter. В) Браузер отрисовывает (рендерит) страницу на экране. Г) Браузер формирует и отправляет HTTP-запрос. Д) Веб-сервер находит нужные файлы и формирует ответ.

Задание 4. Аналитическое (Архитектура приложения)

Вы решили создать простое веб-приложение «Список покупок». Пользователь заходит на сайт, вводит название продукта (например, «Молоко») и нажимает «Добавить». Ответьте на вопросы:

На чьей стороне (Frontend или Backend) будет происходить проверка того, что поле не пустое?
Где физически будет храниться слово «Молоко» после нажатия кнопки?
Что произойдет, если отключится интернет на телефоне пользователя до нажатия кнопки? А после?

Ответы для самопроверки:

Задание 1: Frontend: HTML, CSS, JavaScript. Backend: Python, PHP, SQL.

Задание 2: 1-Статическая (одинакова для всех), 2-Динамическая (зависит от пользователя), 3-Динамическая (зависит от геолокации и времени), 4-Статическая.

Задание 3: Правильный порядок: Б -> Г -> Д -> А -> В.

Задание 4: 1) Базовая проверка на пустоту может быть на Frontend (JS) для скорости, но надежная проверка и сохранение — на Backend. 2) В базе данных на сервере (Backend). 3) До нажатия: приложение работает, можно вводить текст. После нажатия: данные не уйдут на сервер, кнопка выдаст ошибку или будет «висеть», так как нет связи с Backend.

Ребята, современный мир живет в вебе. Понимание того, как он устроен, полезно не только для сдачи экзамена, но и для того, чтобы перестать быть просто «пользователем» и начать понимать, как создаются технологии. До встречи на следующем уроке!