Информатика 11. Веб-сайт, веб-страница и интернет-приложения

Главная мысль

Веб-сайт — это организованная совокупность связанных веб-страниц и других ресурсов. Браузер получает эти ресурсы от веб-сервера по сети, обрабатывает их и показывает пользователю. Современный сайт может быть не только набором документов, но и интернет-приложением, которое реагирует на действия пользователя и обменивается данными с сервером.

Веб-сайт и веб-страница

Веб-страница — документ, доступный через Интернет или локальную сеть и отображаемый браузером. Основу страницы обычно составляет HTML-разметка. Внешний вид задаётся таблицами стилей CSS, а интерактивное поведение — программами, часто написанными на JavaScript.

Веб-сайт — совокупность веб-страниц, файлов и программных компонентов, объединённых общей темой, адресом, навигацией и структурой. На сайте могут находиться изображения, видео, документы, формы, базы данных и другие ресурсы.

Один сайт может содержать:

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

Адрес ресурса называют URL — унифицированным указателем ресурса. Например, в адресе https://example.org/course/page.html:

• https — протокол обмена данными;
• example.org — доменное имя узла;
• /course/page.html — путь к ресурсу.

Как браузер взаимодействует с веб-сервером

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

Упрощённая последовательность выглядит так:

1. Пользователь вводит адрес или выбирает ссылку.
2. Браузер определяет имя узла и устанавливает сетевое соединение.
3. Браузер отправляет серверу HTTP-запрос.
4. Сервер обрабатывает запрос и формирует HTTP-ответ.
5. Браузер получает HTML и связанные ресурсы: CSS, JavaScript, изображения.
6. Браузер строит представление страницы и выполняет разрешённые сценарии.

Ответ сервера содержит код состояния. Код 200 обычно означает успешную выдачу ресурса, 404 — отсутствие ресурса, а 500 — внутреннюю ошибку сервера. Эти коды помогают понять результат запроса, но сами по себе не объясняют все причины проблемы.

Статические и динамические страницы

Статическая веб-страница заранее хранится на сервере как готовый файл. При запросе сервер обычно отправляет его содержимое почти без изменений. Такой подход прост, быстр и удобен для документов, которые редко меняются.

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

Динамика может выполняться:

• на сервере — серверная программа готовит HTML или данные;
• в браузере — JavaScript изменяет страницу после загрузки;
• одновременно на сервере и в браузере.

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

Из чего состоит веб-приложение

Веб-приложение — программа, доступная через браузер. Обычно в нём выделяют несколько частей:

• клиентская часть работает в браузере и отвечает за интерфейс;
• серверная часть принимает запросы, проверяет их и выполняет операции;
• хранилище данных сохраняет пользователей, документы, сообщения, настройки и другие сведения.

Например, при отправке сообщения браузер передаёт текст серверу. Сервер проверяет права пользователя, сохраняет сообщение в базе данных и возвращает результат. Браузер показывает новое сообщение без необходимости вручную редактировать HTML-файл.

Сетевое хранение данных

Сетевое хранение данных — размещение файлов или записей на удалённых устройствах, доступных через сеть. Пользователь может работать с данными с разных устройств, если у него есть соединение и соответствующие права.

Преимущества:

• доступ из разных мест и с разных устройств;
• совместная работа;
• централизованное обновление;
• возможность резервного копирования на стороне сервиса.

Риски и ограничения:

• зависимость от сети и доступности сервиса;
• необходимость защищать учётную запись;
• риск раскрытия данных при неверных настройках доступа;
• зависимость от правил и сроков хранения конкретного сервиса.

Нельзя считать сетевое хранилище единственной копией важных файлов. Существенные данные следует резервировать и периодически проверять возможность восстановления.

Пример: учебный сайт

Пусть школьный сайт содержит расписание и материалы уроков. Главная страница с меню может быть статической. Страница личного расписания — динамической: сервер выбирает записи для конкретного пользователя и даты. Статьи хранятся в файлах или базе данных, а изображения и документы выдаются как отдельные ресурсы.

Если пользователь открывает страницу курса, браузер отправляет запрос. Сервер возвращает HTML, таблицы стилей и скрипты. Скрипт может запросить список уроков и вывести его на странице. При изменении расписания серверное хранилище обновляется, а пользователи получают новые данные при следующем запросе.

Главное

• Веб-страница — отдельный документ или представление, отображаемое браузером.
• Веб-сайт объединяет связанные страницы, ресурсы и программные компоненты.
• Браузер является клиентом, а веб-сервер принимает запросы и возвращает ответы.
• Статическая страница хранится как готовый ресурс; динамическая формируется с учётом условий и данных.
• Веб-приложение включает клиентскую часть, серверную часть и часто хранилище данных.
• Сетевое хранение удобно для доступа и совместной работы, но требует контроля прав и резервного копирования.

Задания для самопроверки

1. Чем веб-страница отличается от веб-сайта?
2. Какие действия выполняют браузер и веб-сервер при открытии страницы?
3. Чем статическая страница отличается от динамической?
4. Приведите пример действия, при котором веб-приложение обращается к серверу.
5. Назовите два преимущества и два риска сетевого хранения данных.
6. Определите, какая часть системы отвечает за интерфейс, а какая — за хранение данных: браузер, серверная программа, сетевое хранилище.