Урок создания сайта должен заканчиваться страницей, которая открывается в браузере и нормально выглядит на телефоне. Многие уроки в интернете и в школьных методичках до сих пор учат вёрстке таблицами, тегу <font> и бегущей строке — приёмам, которые устарели ещё до того, как нынешние школьники пошли в первый класс. Ниже — проверка урока на устаревшие приёмы: вставьте код из любого урока и посмотрите, что в нём пора заменить. Есть и план уроков под ваш формат — от одного урока до восьми — с темами проектов для школьников и взрослых, а в конце — разбор методички учителя информатики, которую мы обновили за два вечера.
Я вебмастер с пятнадцатилетним стажем: делаю сайты для бизнеса и вижу, какие навыки из уроков пригождаются в работе, а какие нет. Если вам нужен не урок, а готовый сайт, — создание сайтов под ключ: лендинг — от 15 000 ₽ за 3–7 дней, сайт-визитка — от 25 000 ₽ за 7–14 дней, корпоративный сайт — от 40 000 ₽ за 2–4 недели. Договор, чек самозанятого, гарантия 12 месяцев.
Тридцать страниц поиска: уроки делать — да, уроки создания сайта — почти нет
Я разобрал тридцать страниц, которые поиск показывает по запросу «сайт создание урок». Семнадцать — сервисы, в которых учителя собирают интерактивные уроки: викторины, тесты, рабочие листы, онлайн-доски. Ещё семь — подборки таких сервисов. Одна — о сайте для онлайн-школы. И только пять страниц отвечают на вопрос, как научиться делать сайт: два курса для детей на Хабре, курс Tilda Education, обзор бесплатных курсов и пошаговая инструкция.
Поиск путает два смысла: «создать урок на сайте» и «урок по созданию сайта». Если вы пришли за сервисом для интерактивных заданий — первая страница выдачи ваша. Эта статья — о втором смысле: как устроен урок, после которого у человека остаётся работающий сайт, и как не учить тому, что в профессии не применяют уже десять лет. Общий путь от идеи до публикации на одном проекте я разбирал в статье «Обучение созданию сайтов: восемь этапов на одном проекте», а сроки курсов — в статье «Курсы по созданию сайтов: от 1,5 часа до 16 месяцев». Здесь — про отдельный урок.
Короткий ответ: из чего состоит урок создания сайта
Любой урок, хоть сорокапятиминутный школьный, хоть вечер самостоятельной работы, держится на трёх вещах.
- Одна цель — один видимый результат. Не «изучаем CSS», а «к концу урока у страницы есть шапка и меню». Результат должен быть виден в браузере.
- Три слоя сайта по очереди. Структура — HTML, оформление — CSS, публикация — хостинг или бесплатный адрес. На уроке берут один слой, остальные — следующим уроком.
- Проверка на телефоне. По отчёту Cloudflare за 2025 год, больше чем в ста странах большинство запросов к сайтам приходит с мобильных устройств. Страница, которая на телефоне разъезжается, — незаконченная страница.
Если урок не проходит хотя бы одну из трёх проверок, человек уходит с ощущением «что-то делали», а не «я сделал». Особенно это заметно у школьников: результат, который можно показать родителям с телефона, мотивирует сильнее любой оценки.
Почему уроки по созданию сайтов устаревают
HTML и CSS кажутся вечными, но способы вёрстки за двадцать лет сменились несколько раз. Урок, написанный в 2008 году, был правильным для своего времени — и многие из таких уроков до сих пор лежат в интернете и в методичках без даты.
Коварство старых уроков в том, что браузеры прощают почти всё. Страница с <center> и <font> откроется, и ученик решит, что всё сделал правильно. Стандарт HTML относит эти теги к устаревшим, и авторам их использовать нельзя, а на телефоне вёрстка таблицей шириной 800 пикселей превращается в мелкий текст, который приходится растягивать пальцами. Ученик потратил урок, а навык придётся переучивать.
Проверка урока на свежесть: вставьте код из урока
Скопируйте HTML из урока, методички или своей учебной страницы и нажмите «Проверить». Проверка найдёт устаревшие теги и приёмы, объяснит, что с ними не так, и подскажет современную замену. Код никуда не отправляется — всё считается прямо в браузере. В поле уже вставлен фрагмент из типичного урока начала 2010-х.
Проверка урока на устаревшие приёмы
Проверка ищет типичные устаревшие приёмы по шаблонам и не заменяет валидатор. Если что-то найдено зря — значит, в коде есть похожая конструкция, посмотрите на неё сами.
В примере проверка находит двенадцать проблем, и свежесть урока — 0%. Семнадцать строк кода — и почти в каждой приём, который в работе давно не используют. При этом в браузере страница откроется, и ученик не увидит ни одной ошибки. Попробуйте вставить код из своего урока: если свежесть ниже половины, урок стоит переписать, а не дополнять.
Тот же урок в 2012 и в 2026 году
❌ Урок по старой методичке
- Страница в кодировке windows-1251, без DOCTYPE.
- Цвет текста — <font color>, фон — bgcolor.
- Меню и текст — в таблице шириной 800 пикселей.
- Новости — в бегущей строке.
- Результат проверяют на компьютере в классе.
✅ Урок по современным правилам
- <!DOCTYPE html>, UTF-8 и meta viewport — с первой минуты.
- Всё оформление — в CSS, отдельно от текста.
- Шапка и колонки — блоками и flexbox.
- Новости — обычным списком со ссылками.
- Результат проверяют на своём телефоне.
Сложность почти одинаковая: строк кода в современном варианте не больше. Разница в том, что второй урок учит тому, что пригодится и в следующем году, и через пять лет. Первый — тому, что придётся забыть.
Темы уроков по созданию сайта: план под ваш формат
Выберите, для кого уроки, сколько их будет и на чём делаете сайт. План покажет тему и результат каждого урока и предложит темы проектов. Урок здесь — 45 минут: школьный урок или один вечер самостоятельной работы.
План уроков создания сайта
По умолчанию — четыре урока HTML и CSS для старших школьников: каркас и текст, картинки и стиль, сетка на flexbox и адаптивность, вторая страница и публикация. Это три часа работы, и в конце у ученика сайт из двух страниц, который он может открыть со своего телефона и показать. Восемь уроков дают тот же сайт, но спокойнее и с запасом на ошибки. Один урок — только страница-визитка: этого хватает, чтобы понять принцип, но не чтобы научиться.
Темы для создания сайта на уроке: что выбрать школьнику
Удачная тема — та, о которой ученику есть что сказать без поиска в интернете. Тогда урок уходит на сайт, а не на переписывание текстов из энциклопедии. Хорошая тема для проекта отвечает трём условиям:
- Материал уже есть у ученика: его хобби, его район, его исследование, его фотографии.
- У сайта есть читатель: пятиклассники, которые впервые пришли в школу, гости города, участники мероприятия.
- Тема делится на две-три страницы: главная, подробности, контакты или источники.
Темы вроде «сайт о себе» звучат просто, но создают проблему: ученик выкладывает в открытый доступ фамилию, школу, фото и телефон. Для учебного проекта личные данные не нужны. Если сайт всё-таки публикуется в интернете, данные и фото детей — только с письменного согласия родителей, а проще обойтись без них.
Совет вебмастера: дайте проекту настоящую задачу. «Сайт о нашем кружке робототехники, чтобы пятиклассники узнали, как записаться» работает сильнее, чем «сайт на свободную тему». Школьник сразу понимает, что важно: где кружок, когда занятия, к кому идти. Это ровно те вопросы, с которых я начинаю каждый коммерческий сайт.
Если учитесь сами: как выбрать урок в интернете
Бесплатных уроков по созданию сайтов тысячи, и дата публикации у многих не указана. Прежде чем тратить на урок вечер, посмотрите на него две минуты.
- Первый пример кода. Если в нём нет <!DOCTYPE html> и meta viewport, урок написан до массового перехода на смартфоны. Вставьте код в проверку выше.
- Результат в конце. Хороший урок заранее говорит, что получится: «страница с меню и двумя колонками». Плохой — «познакомимся с тегами».
- Задание для самостоятельной работы. Повторить за автором — это ещё не навык. Навык — сделать то же самое на своей теме.
- Проверка на телефоне. Если автор ни разу не открывает страницу на телефоне, адаптивности вы у него не научитесь.
- Кто автор. Человек, который делает сайты за деньги, обычно сразу показывает актуальные приёмы — ему незачем учить тому, чем он сам не пользуется.
Если урок прошёл три проверки из пяти, по нему можно учиться. Если меньше — ищите другой, даже если он понятно объясняет: понятно объяснённый устаревший приём придётся переучивать дважды.
Ошибки урока, которые не видны в коде
Код можно проверить автоматически, а методику — нет. Вот что чаще всего ломает урок создания сайта, даже когда код в нём современный.
- Все делают один и тот же сайт. Тридцать одинаковых страниц «о нашем городе» — ученик копирует, а не решает. Своя тема заставляет думать.
- Работа пропадает между уроками. Файл остался на школьном компьютере, который почистили. Сохранение в облако или на флешку — последняя минута каждого урока.
- Ошибки прячут. Учитель исправляет за ученика. Полезнее показать на экране типичную ошибку и разобрать её со всеми — так учатся читать код.
- Нет инструментов разработчика. Клавиша F12 в браузере показывает, какой стиль применился и почему блок съехал. Пять минут на знакомство с ней экономят часы.
- Оценивают красоту, а не устройство. Яркая страница с таблицами получает пятёрку, аккуратная на flexbox — четвёрку. Критерии стоит назвать заранее: структура, стиль в CSS, мобильная версия, описание картинок.
Технологии создания сайта на уроке: HTML, конструктор или Figma
Выбор инструмента зависит от цели урока, а не от моды.
- HTML и CSS в редакторе кода — если цель понять, как устроена страница. Это основа, на которой стоят все остальные инструменты. Бесплатный редактор кода и браузер — больше ничего не нужно.
- Конструктор сайтов — если цель получить опубликованный сайт и научиться думать структурой и текстом. Подходит для младших классов и взрослых, которым нужен результат, а не профессия.
- Figma — если цель научиться проектировать: сначала макет, потом вёрстка. У сервиса есть бесплатный тариф Starter, но с марта 2022 года Figma не продаёт подписки в России, а платные аккаунты российских компаний заморожены. Для школы это значит: работать можно на бесплатном тарифе, а запасной план урока стоит иметь на случай, если сервис окажется недоступен.
Самая частая ошибка — начинать с Figma без понимания HTML. Ученик рисует красивый макет, а потом выясняется, что сверстать его он не может. Для первых уроков разумная очередь такая: HTML и CSS, затем макет, затем вёрстка по макету.
Учитель и хотите, чтобы практик посмотрел ваш урок? Пришлите в Telegram код или конспект — подскажу, что устарело и чем заменить. А если нужен готовый сайт для школы, кружка или своего дела — расскажу, как я работаю, на странице «Процесс работы».
Случай: методичка 2012 года и три урока в девятом классе
Весной 2025 года учитель информатики из Подмосковья попросила меня посмотреть материалы к трём урокам по созданию сайта в девятом классе. Конспекты и пример страницы были написаны в 2012 году и с тех пор переходили из года в год. Ученики жаловались, что «на телефоне всё мелкое», а половина класса не успевала закончить страницу за три урока.
Проверка нашла в примере одиннадцать устаревших приёмов из тех, что ищет проверка выше:
- Кодировка windows-1251 и старое объявление HTML 4 — у части учеников кириллица превращалась в нечитаемые символы при переносе файла на домашний компьютер.
- Вёрстка таблицей шириной 900 пикселей, цвета через bgcolor и <font>, заголовок в <center>.
- Бегущая строка с новостями, отступы цепочками <br>, картинки без описаний.
- Не было ни meta viewport, ни одного урока, где страницу открывают на телефоне.
Мы переписали пример и конспекты за два вечера — около шести часов работы. Новый пример — та же страница, но в UTF-8, с CSS в отдельном файле, шапкой и колонками на flexbox и проверкой на телефоне в конце каждого урока. Строк кода стало даже меньше. По словам учителя, в следующей четверти страницу за три урока закончили 23 ученика из 27 — раньше успевали около половины. Самым популярным моментом урока стала проверка на телефоне: каждый видел, что его страница «как настоящий сайт».
«Урок не обязан учить всему. Он обязан не учить тому, что потом придётся забыть. Ученик, который на первом уроке написал meta viewport и открыл страницу на телефоне, уже думает как вебмастер: не "работает ли у меня", а "как это увидят другие"».
— Александр Рожков
Как это ищут: короткие ответы
«Сайт создание урок», «создание сайтов на урок». Под этими запросами поиск показывает и сервисы для создания интерактивных уроков, и уроки по созданию сайтов. Если нужно второе — проверка урока и план выше.
«Создание сайта пошагово уроки», «создание сайта пошаговые уроки». Хороший пошаговый урок даёт видимый результат на каждом шаге и проверку на телефоне в конце. Последовательность из восьми шагов — в плане уроков выше.
«Создания сайтов уроки онлайн», «все о создании сайтов уроки», «все для создания сайта уроки». Бесплатных уроков в интернете много — проверяйте их год: вставьте код из урока в проверку выше. Если свежесть ниже половины, ищите другой урок.
«Технологии создания сайта урок», «лекция информатика создание сайта». На уроке информатики разумная последовательность — HTML, затем CSS, затем публикация. Лекцию о технологиях стоит заканчивать практикой: даже десять минут работы с кодом дают больше, чем час слайдов.
«Figma уроки создания сайта», «создание сайта в фигме уроки». Figma учит проектировать макет, но сайт по макету всё равно нужно сверстать. Начинайте с HTML и CSS, а Figma добавляйте, когда ученик понимает, как макет превратится в код.
«Сайт проектов для школьников создания». Темы проектов для разных возрастов есть в плане уроков выше — кнопка «Другие темы проектов» показывает новые варианты.
«Уроки создания сайта под ключ». Уроков под ключ не бывает: научиться можно только на своём проекте. Под ключ делают сайт — если нужен результат, а не навык, это работа вебмастера.
Итог
Урок создания сайта удался, если в конце есть страница, которая открывается в браузере и нормально выглядит на телефоне. Старые уроки с таблицами, <font> и бегущей строкой до сих пор работают в браузере, но учат тому, от чего в профессии отказались десять лет назад. Проверьте свой урок на свежесть, постройте план под свой формат — от одного урока до восьми, дайте ученикам тему с настоящим читателем и не публикуйте их личные данные. Сорок пять минут разумно делить так: короткая цель, короткий показ, длинная практика и проверка на телефоне.
Опрос
С чего вы начали бы первый урок создания сайта?
Проголосуйте, чтобы увидеть, как думают другие читатели
Часто задаваемые вопросы
С чего начать урок создания сайта?
С цели, которая видна в браузере: «к концу урока у страницы есть заголовок, абзац и картинка». Первые строки кода — <!DOCTYPE html>, meta charset utf-8 и meta viewport. Так ученик с первого урока пишет современную страницу, которая нормально выглядит на телефоне.
Сколько уроков нужно, чтобы сделать первый сайт?
Одна страница-визитка получается за один урок. Сайт из двух страниц с меню, оформлением и мобильной версией — за четыре урока по 45 минут. Восемь уроков дают тот же результат спокойнее и с запасом на ошибки.
Как понять, что урок по созданию сайта устарел?
Признаки: вёрстка таблицами, теги <font>, <center>, <marquee>, атрибут bgcolor, кодировка windows-1251, отсутствие meta viewport, упоминание Flash. Вставьте код урока в проверку в статье — она найдёт такие приёмы и подскажет замену.
С чего начинать школьникам: с HTML или с конструктора?
У них разные цели. HTML и CSS учат понимать, как устроена страница. Конструктор даёт быстрый опубликованный результат и учит думать структурой. Для 5–8 классов часто разумно начать с конструктора или готового каркаса, для старших — с HTML.
Какие темы выбрать для сайта на уроке?
Те, о которых ученику есть что сказать без поиска: хобби, свой район, школьный кружок, своё исследование. У сайта должен быть читатель — например, пятиклассники или гости города. Личные данные, фото и контакты детей для учебного проекта не нужны.
Можно ли учить создание сайта в Figma?
Можно, но после основ HTML и CSS. Figma учит проектировать макет, а сайт по макету всё равно нужно сверстать. У Figma есть бесплатный тариф, но с 2022 года сервис не продаёт подписки в России, поэтому план урока стоит держать и на случай его недоступности.
Нужно ли публиковать учебный сайт в интернете?
Не обязательно: страница работает и как файл на компьютере. Публикация мотивирует — сайт можно открыть с телефона и показать. Если публикуете, проверьте, что на сайте нет фамилий, фото и контактов учеников без согласия родителей.
