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

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

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

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

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

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

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

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

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

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