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

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

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

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

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

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

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

В данном пункте подготавливаются материалы для демонстрации: схема компонентов, карта страниц и итоговый макет. Кратко поясняется назначение ключевых элементов и показываются примеры переходов между разделами. Отдельно отмечается, какие решения были приняты при проектировании и какие проверки помогли убедиться, что макет соответствует поставленным задачам.

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

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