1.

Муниципальное общеобразовательное учреждение
Быковская средняя общеобразовательная школа №15
Индивидуальный проект по информатике
на тему
Процесс создания шаблона вебсайта
Выполнил: ученик 10 класса
Толкач Максим Денисович
Руководитель: Салеева Лариса Юрьевна
Консультант: Мельник Оксана
Эдуардовна
2026

2.

Содержание
Введение
Глава 1. Анатомия вебсайта: что, как и кто?
1.1 Структура вебсайта
1.2 Технологии и этапы создания вебсайта
1.3 Инструментарий для создания вебсайтов
Глава 2. От идеи к работающему сайту
2.1. Этапы создания
Этап 1: Начало
Этап 2: Создание структуры
Этап 3: Стилизация
Этап 4: Добавление функциональности
Этап 5: Публикация
Заключение

3.

Введение
Гипотеза: доступное объяснение процесса вебразработки улучшит
понимание об устройстве интернета
Цель: наглядно и поэтапно показать процесс создания вебсайта
Задачи:
1. разобрать процесс вебразработки
2. на практике продемонстрировать ключевые шаги создания простого
сайта
3. создать свой вебсайт

4.

Глава 1
Структура вебсайта
И так, из чего состоит рядовой вебсайт :
1. Интерфейс (Frontend) - что видят пользователи
Контент - текст, изображения, видео.
Структура - шапка (оглавление), тело страницы, подвал (самый низ с
различной информацией).
Элементы - кнопки, формы, меню, ссылки.
2. Движок (Backend) - что работает “под капотом”.
База данных - хранилище всего контента и данных.
Серверный код - обрабатывает логику (отправка форм, поиск).
3. Инфраструктура - основа существования.
Хостинг - сервер, где физически лежат файлы сайта.
Домен - адрес сайта в интернете.
SSL - шифрование для безопасного соединения (https).
Аналогия:
Интерфейс - витрина и зал магазина.
Движок - склад, касса и персонал.
Инфраструктура - здание, адрес и охрана.
В конструкторе вы работаете в основном с интерфейсом, а движок и
инфраструктура предоставляются автоматически

5.

Технологии и этапы создания вебсайта
Рассмотрим этапы создания с помощью интернет-конструктора :
1. Визуальный редактор, готовые шаблоны и блоки, добавление всех
необходимых
частей
для
сайта.
2. Хостинг и домен (инфраструктура)
Хостинг: Сервер, где физически лежат файлы
Предоставляется конструктором автоматически.
вашего
Домен: Адрес сайта в интернете (например, "мойсайт.tilda.ru")
сайта.

6.

Инструментарий для создания вебсайтов
Так вот, обозначим же необходимые нам инструменты :
1. Компьютер или ноутбук
2. Стабильное интернет подключение и возможность выхода в интернет
3. Бесплатный сайт-конструктор (мы будем рассматривать популярный
российский “Tilda”)
4. (Обязательно!) Купленное доменное имя (адрес сайта в сети) . Его можно
купить отдельно или получить бесплатно через сам конструктор

7.

Глава 2
Этап 1: начало
Находим сайт в интернете
и заходим.
Проходим
короткую регистрацию и
приступаем созданию.
Выходим на главную страницу и находим данную
кнопку:

8.

Этап 2: создание структуры
Добавим нашему сайту страниц, которые в дальнейшем
мы будем настраивать:
и
Можно выбрать из уже готовых шаблонов,
но мы рассмотрим вариант полного
самостоятельного создания
Блоки с информацией на странице
добавляются в этом меню:
Для примера я создам сайт-визитку вымышленной компании :

9.

Каждый информационный блок можно настраивать с
помощью отдельного меню, открывающегося в левом
краю:
Также можно создать свои собственные, не
шаблонные блоки, воспользовавшись редактором
“НулевойБлок”, встроенным в сайт тильды.
Делается это следующим образом:
Находим данную кнопку в меню слева:
Открывается такое окно, нажимаем на кнопку редактирования :

10.

Чистый лист для ваших идей!
Здесь можно реализовать все что угодно и вставить в ваш сайт

11.

Поигравшись с различными блоками и редактором, добавляем еще
немного информации на наш сайт:

12.

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

13.

Этап 4: добавление
функциональности
Если вам нужно добавить для кнопки на сайте функциональности,
чтобы она пересылала на что либо, то нажмите на будущий
интерактивный элемент правой кнопкой мыши и добавьте туда
необходимую ссылку:

14.

Этап 5: публикация
Когда вы сделали свой сайт, чтобы пользователи могли найти
его в сети, сайт необходимо опубликовать:
и
Готово!
Теперь вы сами можете посетить сайт, который я сделал ,
вот ссылка на него: https://project20465956.tilda.ws

15.

Заключение
Цель моего проекта, которая заключалась в детальном
разборе процесса создания вебсайта, полностью
выполнена.
Теперь вы лучше осведомлены о работе и создании
сайтов

16.

Информационные источники
https://tilda.ru
https://ru.wikipedia.org/wiki/Tilda_Publishing
Активная QR ссылка на мой сайт