Создание сайта HTML в Блокноте — практическая работа с примером

Краткое пошаговое руководство по созданию простого сайта в Блокноте ✅ шаблон, проверка, SEO-чек‑лист и критерии оценки практической работы.

Короткий ответ: Создать сайт HTML в Блокноте можно: открываете Блокнот, пишете HTML-шаблон (doctype, head, body), сохраняете файл с расширением .html и открываете в браузере. Для практической работы добавьте CSS-файл, изображения и простую форму — ниже подробный пошаговый план, пример кода и чек-лист для оценки.

Зачем делать сайт в Блокноте — смысл практики

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

Что нужно подготовить для работы

Компьютер с установленной ОС (Windows / macOS / Linux).
Текстовый редактор: Блокнот (Notepad) или любой простой текстовый редактор. Можно использовать Notepad++ для удобства, но в задании — именно Блокнот.
Браузер для проверки (Chrome/Firefox/Edge).
Папка проекта: создайте папку, например my-site.
Минимум графики: несколько оптимизированных изображений (PNG/JPG/WebP).

Пошаговая практическая работа: создание простого сайта

Ниже — пошаговый план с примером кода. Копируйте в Блокнот и сохраняйте как index.html (в кодировке UTF-8 без BOM для корректного отображения русских символов).

1. Базовый шаблон страницы




  
  
  Пример сайта — Практическая работа
  
  


  
Название проекта


Главная
О проекте

/* styles.css */ *{box-sizing:border-box} body{font-family:Arial, sans-serif;line-height:1.5;margin:0;padding:0;color:#222} header,footer{background:#f5f5f5;padding:16px} main{padding:16px} nav ul{list-style:none;padding:0;display:flex;gap:8px} img{max-width:100%;height:auto} form label{display:block;margin-bottom:8px} @media (max-width:600px){nav ul{flex-direction:column}}

Подключение CSS и адаптивность

Для практической работы ограничьтесь внешним CSS-файлом. Для адаптивности добавьте мета-тег viewport (в примере выше) и основные медиа-запросы. Обратите внимание на удобство чтения на мобильных устройствах — это влияет на пользовательский опыт и косвенно на позиции в поиске.

Добавление изображений, ссылок и форм

Ключевые моменты:

alt-атрибут для изображений — обязательно (SEO и доступность).

Семантические теги (

Простые формы для сбора заявок — можно отправлять на тестовый сервер или использовать метод mailto: в учебных задачах (не для продакшена).

Проверка, отладка и публикация

Локальная проверка

Откройте index.html в браузере и используйте инструменты разработчика (F12): проверьте консоль на ошибки, адаптивность и сетевые запросы.

Валидатор

Проверьте HTML на соответствие стандартам (валидатор W3C) — это часть учебной оценки и полезно для SEO.

Публикация

Для демонстрации работы можно загрузить файлы на любой хостинг (FTP / git / static hosting). Если нужен бесплатный демонстрационный вариант — подойдёт GitHub Pages или другой статический хостинг. Но в учебном задании достаточно скриншота и файла.

SEO для учебного проекта: чек-лист

Даже для простой практической работы важно соблюдать базовые SEO-принципы — это формирует правильные навыки:

Уникальный и информативный (до 60 символов).</li> <li>Мета-описание <meta name="description"> (120–160 символов) — для сниппета в поиске.</li> <li>Корректная структура заголовков: один <h1>, далее <h2>–<h3> по логике разделов.</li> <li>alt для изображений, человеко-понятные URL (в практике — имя файла).</li> <li>Мобильная адаптивность и быстрый первый входной размер (оптимизируйте изображения).</li> <li>Файл robots.txt и простая карта сайта sitemap.xml для публикации (если выкладываете на хостинг).</li> <li>Проверка индексации: после публикации проверьте, что страница доступна для роботов.</li> </ul> <h3 id="пример-robotstxt-и-sitemapxml">Пример robots.txt и sitemap.xml</h3> <pre><code># robots.txt User-agent: * Allow: / <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://example.ru/</loc> <priority>1.00</priority> </url> </urlset></code></pre> <h2 id="kriterii">Критерии оценки практической работы</h2> <p>Примерная шкала (можно адаптировать под вашу методичку):</p> <table> <thead> <tr><th>Критерий</th><th>Макс. баллов</th><th>Комментарий</th></tr> </thead> <tbody> <tr><td>Структура HTML</td><td>20</td><td>Правильное использование семантических тегов</td></tr> <tr><td>Вёрстка и CSS</td><td>20</td><td>Читабельность, адаптивность</td></tr> <tr><td>SEO-базовые настройки</td><td>15</td><td>title, meta description, alt</td></tr> <tr><td>Функциональность форм</td><td>15</td><td>Работают ли элементы управления</td></tr> <tr><td>Оптимизация изображений</td><td>10</td><td>Размеры и форматы</td></tr> <tr><td>Чистота кода и комментарии</td><td>10</td><td>Комментарии и читаемость</td></tr> <tr><td>Доп. улучшения</td><td>10</td><td>JS-элементы, анимация, микроразметка</td></tr> </tbody> </table> <h2 id="errors">Частые ошибки и как их избежать</h2> <ul> <li>Сохранение в неправильной кодировке — используйте UTF-8 без BOM.</li> <li>Отсутствие meta viewport — страница будет неадаптивной на мобильных.</li> <li>Неоптимизированные изображения — долго грузится, ухудшает UX и повлияет на SEO.</li> <li>Множественные <h1> — допускает путаницу, оставьте ровно один <h1>.</li> <li>Использование inline-стилей повсеместно — усложняет поддержку; лучше внешний CSS-файл.</li> </ul> <h2 id="faq">FAQ</h2> <h3 id="1-нужно-ли-сохранять-файл-в-utf-8">1. Нужно ли сохранять файл в UTF-8?</h3> <p>Да. Для корректного отображения кириллицы сохраните документ в кодировке UTF-8 (в Блокноте: "Сохранить как" → кодировка UTF-8).</p> <h3 id="2-как-проверить-валидность-html">2. Как проверить валидность HTML?</h3> <p>Вручную: просмотрите исходный код и проверьте консоль браузера. Для формальной проверки используйте валидатор W3C. Для учебной работы достаточно исправить основные ошибки, выявленные валидатором.</p> <h3 id="3-можно-ли-использовать-таблицы-для-вёрстки">3. Можно ли использовать таблицы для вёрстки?</h3> <p>Нет. Таблицы предназначены для табличных данных. Для оформления используйте CSS-раскладки (flexbox/grid).</p> <h3 id="4-нужно-ли-добавлять-микроразметку-structured-data">4. Нужно ли добавлять микроразметку (structured data)?</h3> <p>Для учебного задания это опционально, но знание микроразметки (JSON-LD) полезно для SEO и повышения кликабельности сниппетов. Пример простого JSON-LD можно добавить в <head>.</p> <h3 id="5-насколько-важен-seo-для-учебного-проекта">5. Насколько важен SEO для учебного проекта?</h3> <p>Даже учебный проект — хорошая площадка, чтобы практиковаться в базовой SEO: это даст понимание, как поисковики читают страницы. Помните: SEO — стабильный долгосрочный канал; платная реклама лишь ускоряет результат при продвижении реального проекта.</p> </main> <section aria-label="CTA"> <h2 id="дальше-как-превратить-практику-в-реальный-проект">Дальше: как превратить практику в реальный проект</h2> <p>Если вы хотите, чтобы учебная работа превратилась в рабочий сайт с регистрацией домена, хостингом, SEO-продвижением и аналитикой — Rose Digital поможет на всех этапах: от верстки до устойчивого привлечения трафика. Ознакомьтесь с нашими услугами по созданию и продвижению сайтов (<a href="/sozdanie-i-prodvizhenie-saitov">услуги по созданию и продвижению сайтов</a>) и реальными примерами работ в разделе <a href="/cases">наши кейсы</a>. Мы ставим SEO в основу стратегии и используем контекстную рекламу как ускоритель — чтобы результаты стали стабильными и прогнозируемыми.</p> </section> </div><section class="not-prose mt-16 rounded-2xl border border-zinc-200/80 bg-zinc-50 p-6 sm:p-8 text-zinc-900 shadow-sm" aria-label="Квиз подбор решения"><p class="border-l-2 border-rose pl-4 text-sm leading-relaxed text-zinc-600">Скидка <span class="font-semibold text-rose tabular-nums">5 000 ₽</span> на работы после прохождения квиза</p><div class="mt-6 mb-6 flex items-start justify-between gap-4 border-b border-zinc-200 pb-6"><h3 class="text-lg font-semibold text-zinc-900 tracking-tight">Пройдите короткий опрос и получите скидку!</h3><span class="shrink-0 text-xs tabular-nums text-zinc-500">1 / 5</span></div><div class="mb-8 h-1 w-full overflow-hidden rounded-full bg-zinc-200" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"><div class="h-full bg-rose transition-all duration-300 ease-out" style="width:20%"></div></div><form class="space-y-3"><label class="block text-sm font-medium text-zinc-700" for="quiz-niche">Ваша ниша</label><select id="quiz-niche" class="w-full rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm text-zinc-900 focus:outline-none focus:border-rose/60 focus:ring-1 focus:ring-rose/20 transition-colors cursor-pointer appearance-none" required=""><option value="" disabled="" selected="">Выберите нишу</option><option value="ecommerce">Интернет-магазин / e-commerce</option><option value="b2b">Услуги B2B</option><option value="production">Производство</option><option value="medical">Медицина / клиника</option><option value="food">HoReCa / доставка еды</option><option value="realestate">Недвижимость</option><option value="education">Образование / курсы</option><option value="other">Другое — укажу ниже</option></select></form></section><nav class="mt-14 pt-10 border-t border-white/5 grid grid-cols-1 sm:grid-cols-2 gap-4" aria-label="Соседние статьи"><div class="min-w-0"><a class="block rounded-2xl border border-white/10 bg-gray-900/50 p-5 hover:border-rose/30 transition-colors" href="/blog/sovremennye-lendingi"><span class="text-xs text-gray-500 uppercase tracking-wide">Предыдущая</span><p class="mt-2 font-semibold text-white line-clamp-2">Современные лендинги: дизайн, структура и что действительно повышает конверсию</p></a></div><div class="min-w-0 sm:text-right"><a class="block rounded-2xl border border-white/10 bg-gray-900/50 p-5 hover:border-rose/30 transition-colors sm:ml-auto" href="/blog/tsel-sozdaniya-sayta"><span class="text-xs text-gray-500 uppercase tracking-wide">Следующая</span><p class="mt-2 font-semibold text-white line-clamp-2">Цель создания сайта: как правильно поставить задачу и получить бизнес-результат</p></a></div></nav></div></article></main><footer class="bg-gray-900 border-t border-white/5"><div class="max-w-7xl mx-auto px-6 py-16"><div class="grid grid-cols-1 md:grid-cols-4 gap-12"><div class="md:col-span-2"><a class="inline-flex mb-4 text-lg font-bold" href="/">Rose <span class="text-rose">Digital</span></a><p class="text-gray-500 text-sm max-w-sm leading-relaxed">Масштабное SEO-продвижение сайтов. Калининград и вся Россия. Системный захват поискового спроса для вашего бизнеса.</p></div><div><p class="text-sm font-semibold text-white mb-4 uppercase tracking-wider">Навигация</p><ul class="space-y-3"><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/#pricing">Тарифы</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/tarify-kalkulyator">Калькулятор стоимости</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/sozdanie-i-prodvizhenie-saitov">Создание сайтов</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/blog">Блог</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/cases">Кейсы</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/#cta">Связаться</a></li></ul></div><div><p class="text-sm font-semibold text-white mb-4 uppercase tracking-wider">Блог</p><ul class="space-y-3"><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/blog?category=seo">SEO</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/blog?category=yandex-direct">Яндекс Директ</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/blog?category=website-creation">Создание сайтов</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/blog?category=regions">Продвижение в регионах</a></li><li><a class="text-sm text-gray-500 hover:text-rose transition-colors" href="/blog?category=kaliningrad">Калининград</a></li></ul></div><div><p class="text-sm font-semibold text-white mb-4 uppercase tracking-wider">Контакты</p><ul class="space-y-3"><li><a href="https://t.me/arinarosenberg" target="_blank" rel="noopener noreferrer" class="text-sm text-gray-500 hover:text-rose transition-colors inline-flex items-center gap-2"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21.5 4.5a1 1 0 00-1.08-.17L3.64 11.13a1 1 0 00.06 1.86l3.9 1.3 1.3 3.91a1 1 0 001.67.43l2.18-2.17 3.96 2.64a1 1 0 001.53-.62l3-13a1 1 0 00-.74-1.18zM9.4 13.93l-.74 2.22-.74-2.22-2.22-.74 11.67-4.86-8.71 5.6a1 1 0 00-.39.53l1.13-.53z"></path></svg>@arinarosenberg</a></li><li><a href="mailto:rozenberg.arin@yandex.ru" class="text-sm text-gray-500 hover:text-rose transition-colors inline-flex items-center gap-2"><svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M4 7l8 6 8-6"></path></svg>rozenberg.arin@yandex.ru</a></li></ul></div></div><div class="mt-12 pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4"><div class="text-center md:text-left"><p class="text-xs text-gray-600">© <span>2026</span> Rose Digital. Все права защищены.</p><p class="text-xs text-gray-600 mt-1">ИП Розенберг Арина Владимировна · ИНН 744513659376 · ОГРНИП 323745600131028</p></div><div class="flex flex-col md:items-end gap-1"><p class="text-xs text-gray-600">Калининград · Россия</p><a class="text-xs text-gray-500 hover:text-rose transition-colors" href="/sitemap.xml">Карта сайта</a><a class="text-xs text-gray-500 hover:text-rose transition-colors" href="/privacy-policy">Политика конфиденциальности</a><a class="text-xs text-gray-500 hover:text-rose transition-colors" href="/personal-data-consent">Согласие на обработку персональных данных</a></div></div></div></footer></div></div><script src="/_next/static/chunks/0wam~s8s.fo9f.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[86437,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"YandexMetrika\"]\n3:I[2971,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"Header\"]\n4:I[39756,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\n5:I[37457,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\"]\nf:I[68027,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"default\",1]\n11:I[22016,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0x~u~yfch9lxo.js\"],\"\"]\n14:I[58104,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"TelegramChannelPopup\"]\n16:I[97367,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"OutletBoundary\"]\n17:\"$Sreact.suspense\"\n1a:I[97367,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"ViewportBoundary\"]\n1c:I[97367,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/0l3-2vfqzryua.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.09zddjkbdep5a.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.09~u27dqhyhd6.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"blog\",\"sozdanie-sayta-html-v-bloknote-prakticheskaya-rabota\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"sozdanie-sayta-html-v-bloknote-prakticheskaya-rabota\",\"d\",null],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0l3-2vfqzryua.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/112v3._k5ojgh.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"ru\",\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full antialiased\",\"children\":[\"$\",\"body\",null,{\"suppressHydrationWarning\":true,\"className\":\"min-h-screen flex flex-col bg-background text-foreground relative overflow-x-hidden\",\"children\":[[\"$\",\"$L2\",null,{}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Rose Digital\\\",\\\"description\\\":\\\"SEO-агентство. Масштабное продвижение сайтов в Яндексе и Google.\\\",\\\"url\\\":\\\"https://rosedigital.ru\\\",\\\"founder\\\":{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Арина Розенберг\\\"},\\\"address\\\":{\\\"@type\\\":\\\"PostalAddress\\\",\\\"addressLocality\\\":\\\"Калининград\\\",\\\"addressCountry\\\":\\\"RU\\\"},\\\"areaServed\\\":{\\\"@type\\\":\\\"Country\\\",\\\"name\\\":\\\"Россия\\\"},\\\"knowsAbout\\\":[\\\"SEO\\\",\\\"Поисковая оптимизация\\\",\\\"Продвижение сайтов\\\",\\\"Контент-маркетинг\\\"]}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"ProfessionalService\\\",\\\"name\\\":\\\"Rose Digital\\\",\\\"description\\\":\\\"Масштабное SEO-продвижение сайтов. Выводим в ТОП Яндекса и Google через системное создание контента.\\\",\\\"url\\\":\\\"https://rosedigital.ru\\\",\\\"priceRange\\\":\\\"₽₽₽\\\",\\\"address\\\":{\\\"@type\\\":\\\"PostalAddress\\\",\\\"addressLocality\\\":\\\"Калининград\\\",\\\"addressRegion\\\":\\\"Калининградская область\\\",\\\"addressCountry\\\":\\\"RU\\\"},\\\"geo\\\":{\\\"@type\\\":\\\"GeoCoordinates\\\",\\\"latitude\\\":\\\"54.7104\\\",\\\"longitude\\\":\\\"20.4522\\\"},\\\"areaServed\\\":[{\\\"@type\\\":\\\"City\\\",\\\"name\\\":\\\"Калининград\\\"},{\\\"@type\\\":\\\"Country\\\",\\\"name\\\":\\\"Россия\\\"}]}\"}}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebSite\\\",\\\"name\\\":\\\"Rose Digital\\\",\\\"url\\\":\\\"https://rosedigital.ru\\\",\\\"description\\\":\\\"SEO-агентство Rose Digital — масштабное продвижение сайтов в Яндексе и Google.\\\",\\\"inLanguage\\\":\\\"ru\\\"}\"}}],[\"$\",\"div\",null,{\"className\":\"relative flex min-h-screen flex-col\",\"children\":[[\"$\",\"div\",null,{\"aria-hidden\":\"true\",\"className\":\"absolute inset-0 pointer-events-none overflow-hidden z-0\",\"children\":[[\"$\",\"div\",null,{\"className\":\"absolute -top-32 -right-28 w-[34rem] h-[34rem] rounded-full bg-rose/10 blur-3xl\"}],[\"$\",\"div\",null,{\"className\":\"absolute top-[26%] -left-28 w-[28rem] h-[28rem] rounded-full bg-rose-dark/10 blur-3xl\"}],[\"$\",\"div\",null,{\"className\":\"absolute -bottom-28 right-[18%] w-[24rem] h-[24rem] rounded-full bg-rose/10 blur-3xl\"}],[\"$\",\"div\",null,{\"className\":\"absolute inset-0 bg-[radial-gradient(circle_at_20%_15%,rgba(194,24,91,0.07),transparent_35%),radial-gradient(circle_at_85%_65%,rgba(194,24,91,0.06),transparent_40%)]\"}]]}],[\"$\",\"div\",null,{\"className\":\"relative z-10 flex min-h-screen flex-col\",\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1\",\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"section\",null,{\"className\":\"min-h-[70vh] flex items-center justify-center px-6 py-24\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-xl mx-auto text-center\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-rose text-sm font-medium uppercase tracking-wider mb-3\",\"children\":\"Ошибка 404\"}],[\"$\",\"h1\",null,{\"className\":\"text-4xl sm:text-5xl font-bold tracking-tight mb-4\",\"children\":\"Страница не найдена\"}],\"$L6\",\"$L7\"]}]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],\"$L8\",\"$L9\"]}]]}]]}]}]]}],{\"children\":[\"$La\",{\"children\":[\"$Lb\",{\"children\":[\"$Lc\",{},null,false,null]},null,false,\"$@d\"]},null,false,\"$@d\"]},null,false,null],\"$Le\",false]],\"m\":\"$undefined\",\"G\":[\"$f\",[\"$L10\"]],\"S\":false,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"8Ts64pj5j02JWxJB6vz4e\"}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"p\",null,{\"className\":\"text-gray-400 text-base sm:text-lg leading-relaxed mb-8\",\"children\":\"Возможно, ссылка устарела или страница была удалена. Вернитесь на главную и продолжите навигацию по сайту.\"}]\n7:[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"inline-flex items-center justify-center px-7 py-3.5 rounded-full bg-rose hover:bg-rose-light text-white font-semibold transition-colors\",\"children\":\"На главную\"}]\n"])</script><script>self.__next_f.push([1,"8:[\"$\",\"footer\",null,{\"className\":\"bg-gray-900 border-t border-white/5\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-7xl mx-auto px-6 py-16\",\"children\":[[\"$\",\"div\",null,{\"className\":\"grid grid-cols-1 md:grid-cols-4 gap-12\",\"children\":[[\"$\",\"div\",null,{\"className\":\"md:col-span-2\",\"children\":[[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"inline-flex mb-4 text-lg font-bold\",\"children\":[\"Rose \",[\"$\",\"span\",null,{\"className\":\"text-rose\",\"children\":\"Digital\"}]]}],[\"$\",\"p\",null,{\"className\":\"text-gray-500 text-sm max-w-sm leading-relaxed\",\"children\":\"Масштабное SEO-продвижение сайтов. Калининград и вся Россия. Системный захват поискового спроса для вашего бизнеса.\"}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-semibold text-white mb-4 uppercase tracking-wider\",\"children\":\"Навигация\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/#pricing\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Тарифы\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/tarify-kalkulyator\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Калькулятор стоимости\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/sozdanie-i-prodvizhenie-saitov\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Создание сайтов\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Блог\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/cases\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Кейсы\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/#cta\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Связаться\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-semibold text-white mb-4 uppercase tracking-wider\",\"children\":\"Блог\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog?category=seo\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"SEO\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog?category=yandex-direct\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Яндекс Директ\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog?category=website-creation\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Создание сайтов\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog?category=regions\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Продвижение в регионах\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog?category=kaliningrad\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors\",\"children\":\"Калининград\"}]}]]}]]}],[\"$\",\"div\",null,{\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-semibold text-white mb-4 uppercase tracking-wider\",\"children\":\"Контакты\"}],[\"$\",\"ul\",null,{\"className\":\"space-y-3\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"https://t.me/arinarosenberg\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors inline-flex items-center gap-2\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"w-4 h-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"currentColor\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"d\":\"M21.5 4.5a1 1 0 00-1.08-.17L3.64 11.13a1 1 0 00.06 1.86l3.9 1.3 1.3 3.91a1 1 0 001.67.43l2.18-2.17 3.96 2.64a1 1 0 001.53-.62l3-13a1 1 0 00-.74-1.18zM9.4 13.93l-.74 2.22-.74-2.22-2.22-.74 11.67-4.86-8.71 5.6a1 1 0 00-.39.53l1.13-.53z\"}]}],\"@arinarosenberg\"]}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"mailto:rozenberg.arin@yandex.ru\",\"className\":\"text-sm text-gray-500 hover:text-rose transition-colors inline-flex items-center gap-2\",\"children\":[[\"$\",\"svg\",null,{\"className\":\"w-4 h-4\",\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":\"1.8\",\"aria-hidden\":\"true\",\"children\":[[\"$\",\"rect\",null,{\"x\":\"3\",\"y\":\"5\",\"width\":\"18\",\"height\":\"14\",\"rx\":\"2\"}],[\"$\",\"path\",null,{\"d\":\"M4 7l8 6 8-6\"}]]}],\"rozenberg.arin@yandex.ru\"]}]}]]}]]}]]}],[\"$\",\"div\",null,{\"className\":\"mt-12 pt-8 border-t border-white/5 flex flex-col md:flex-row items-center justify-between gap-4\",\"children\":[\"$L12\",\"$L13\"]}]]}]}]\n"])</script><script>self.__next_f.push([1,"9:[\"$\",\"$L14\",null,{}]\na:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nb:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\nc:[\"$\",\"$1\",\"c\",{\"children\":[\"$L15\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0x~u~yfch9lxo.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L16\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@18\"}]}]]}]\n19:[]\nd:\"$W19\"\ne:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L1a\",null,{\"children\":\"$L1b\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L1c\",null,{\"children\":[\"$\",\"$17\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L1d\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n10:[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0l3-2vfqzryua.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]\n12:[\"$\",\"div\",null,{\"className\":\"text-center md:text-left\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs text-gray-600\",\"children\":[\"©\",\" \",[\"$\",\"span\",null,{\"suppressHydrationWarning\":true,\"children\":2026}],\" \",\"Rose Digital. Все права защищены.\"]}],[\"$\",\"p\",null,{\"className\":\"text-xs text-gray-600 mt-1\",\"children\":\"ИП Розенберг Арина Владимировна · ИНН 744513659376 · ОГРНИП 323745600131028\"}]]}]\n13:[\"$\",\"div\",null,{\"className\":\"flex flex-col md:items-end gap-1\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-xs text-gray-600\",\"children\":\"Калининград · Россия\"}],[\"$\",\"$L11\",null,{\"href\":\"/sitemap.xml\",\"className\":\"text-xs text-gray-500 hover:text-rose transition-colors\",\"children\":\"Карта сайта\"}],[\"$\",\"$L11\",null,{\"href\":\"/privacy-policy\",\"className\":\"text-xs text-gray-500 hover:text-rose transition-colors\",\"children\":\"Политика конфиденциальности\"}],[\"$\",\"$L11\",null,{\"href\":\"/personal-data-consent\",\"className\":\"text-xs text-gray-500 hover:text-rose transition-colors\",\"children\":\"Согласие на обработку персональных данных\"}]]}]\n1b:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"1e:I[27201,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\"],\"IconMark\"]\n18:null\n"])</script><script>self.__next_f.push([1,"1d:[[\"$\",\"title\",\"0\",{\"children\":\"Создание сайта HTML в Блокноте — практическая работа с примером | Rose Digital\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Краткое пошаговое руководство по созданию простого сайта в Блокноте ✅ шаблон, проверка, SEO-чек‑лист и критерии оценки практической работы.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"author\",\"content\":\"Арина Розенберг\"}],[\"$\",\"meta\",\"3\",{\"name\":\"keywords\",\"content\":\"SEO продвижение,SEO агентство,продвижение сайтов,SEO Калининград,масштабное SEO,поисковое продвижение,оптимизация сайта,вывод в ТОП,Rose Digital\"}],[\"$\",\"link\",\"4\",{\"rel\":\"canonical\",\"href\":\"https://rosedigital.ru/blog/sozdanie-sayta-html-v-bloknote-prakticheskaya-rabota\"}],[\"$\",\"meta\",\"5\",{\"name\":\"yandex-verification\",\"content\":\"a49e0e2269530453\"}],[\"$\",\"meta\",\"6\",{\"property\":\"og:title\",\"content\":\"Создание сайта HTML в Блокноте — практическая работа с примером\"}],[\"$\",\"meta\",\"7\",{\"property\":\"og:description\",\"content\":\"Краткое пошаговое руководство по созданию простого сайта в Блокноте ✅ шаблон, проверка, SEO-чек‑лист и критерии оценки практической работы.\"}],[\"$\",\"meta\",\"8\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"9\",{\"property\":\"article:published_time\",\"content\":\"2026-03-21\"}],[\"$\",\"meta\",\"10\",{\"name\":\"twitter:card\",\"content\":\"summary\"}],[\"$\",\"meta\",\"11\",{\"name\":\"twitter:title\",\"content\":\"Создание сайта HTML в Блокноте — практическая работа с примером\"}],[\"$\",\"meta\",\"12\",{\"name\":\"twitter:description\",\"content\":\"Краткое пошаговое руководство по созданию простого сайта в Блокноте ✅ шаблон, проверка, SEO-чек‑лист и критерии оценки практической работы.\"}],[\"$\",\"link\",\"13\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.15_4acp82rthk.ico\",\"sizes\":\"64x64\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"14\",{\"rel\":\"icon\",\"href\":\"/icon.png?icon.0.tto9.okrz1y.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"link\",\"15\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png?apple-icon.0.tto9.okrz1y.png\",\"sizes\":\"512x512\",\"type\":\"image/png\"}],[\"$\",\"$L1e\",\"16\",{}]]\n"])</script><script>self.__next_f.push([1,"1f:T1167,"])</script><script>self.__next_f.push([1,"\u003cdiv id=\"short-answer\" class=\"short-answer\"\u003e\u003cp\u003e\u003cstrong\u003eКороткий ответ:\u003c/strong\u003e Создать сайт HTML в Блокноте можно: открываете Блокнот, пишете HTML-шаблон (doctype, head, body), сохраняете файл с расширением \u003ccode\u003e.html\u003c/code\u003e и открываете в браузере. Для практической работы добавьте CSS-файл, изображения и простую форму — ниже подробный пошаговый план, пример кода и чек-лист для оценки.\u003c/p\u003e\u003c/div\u003e\n\u003cnav aria-label=\"Краткое содержание\"\u003e\n \u003ch2 id=\"краткое-содержание\"\u003eКраткое содержание\u003c/h2\u003e\n \u003cul\u003e\n\u003cli\u003e\u003ca href=\"#zachem\"\u003eЗачем делать сайт в Блокноте — смысл практики\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#podgotovka\"\u003eЧто нужно подготовить для работы\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#shag-po-shagu\"\u003eПошаговая практическая работа: создание простого сайта\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#css-adapt\"\u003eПодключение CSS и адаптивность\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#media-form\"\u003eДобавление изображений, ссылок и форм\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#proverka-publikaciya\"\u003eПроверка, отладка и публикация\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#seo-checklist\"\u003eSEO для учебного проекта: чек-лист\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#kriterii\"\u003eКритерии оценки практической работы\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#errors\"\u003eЧастые ошибки и как их избежать\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#faq\"\u003eFAQ\u003c/a\u003e\u003c/li\u003e\n \u003c/ul\u003e\n\u003c/nav\u003e\n\u003cmain\u003e\n \u003ch2 id=\"zachem\"\u003eЗачем делать сайт в Блокноте — смысл практики\u003c/h2\u003e\n \u003cp\u003eРабота в Блокноте исключает автогенерацию кода и заставляет понять базовую структуру HTML. Это полезно для студентов и начинающих: вы вручную видите, как работают теги, атрибуты, подключение CSS и структура документа. Такой опыт — фундамент для дальнейшего создания более сложных сайтов и понимания, как поисковые системы читают страницы.\u003c/p\u003e\n \u003ch2 id=\"podgotovka\"\u003eЧто нужно подготовить для работы\u003c/h2\u003e\n \u003cul\u003e\n\u003cli\u003eКомпьютер с установленной ОС (Windows / macOS / Linux).\u003c/li\u003e\n\u003cli\u003eТекстовый редактор: Блокнот (Notepad) или любой простой текстовый редактор. Можно использовать Notepad++ для удобства, но в задании — именно Блокнот.\u003c/li\u003e\n\u003cli\u003eБраузер для проверки (Chrome/Firefox/Edge).\u003c/li\u003e\n\u003cli\u003eПапка проекта: создайте папку, например \u003ccode\u003emy-site\u003c/code\u003e.\u003c/li\u003e\n\u003cli\u003eМинимум графики: несколько оптимизированных изображений (PNG/JPG/WebP).\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch2 id=\"shag-po-shagu\"\u003eПошаговая практическая работа: создание простого сайта\u003c/h2\u003e\n \u003cp\u003eНиже — пошаговый план с примером кода. Копируйте в Блокнот и сохраняйте как \u003ccode\u003eindex.html\u003c/code\u003e (в кодировке UTF-8 без BOM для корректного отображения русских символов).\u003c/p\u003e\n \u003ch3 id=\"1-базовый-шаблон-страницы\"\u003e1. Базовый шаблон страницы\u003c/h3\u003e\n \u003cpre\u003e\u003ccode\u003e\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"ru\"\u003e\n\u003chead\u003e\n \u003cmeta charset=\"utf-8\"\u003e\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n \u003ctitle\u003eПример сайта — Практическая работа\u003c/title\u003e\n \u003cmeta name=\"description\" content=\"Короткое описание страницы для SEO и практической работы\"\u003e\n \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n \u003cheader\u003e\n\u003ch1\u003eНазвание проекта\u003c/h1\u003e\n\u003cnav\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"#\"\u003eГлавная\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#about\"\u003eО проекте\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/nav\u003e\n \u003c/header\u003e\n \u003cmain\u003e\n\u003csection id=\"about\"\u003e\n\u003c/div\u003e"])</script><script>self.__next_f.push([1,"15:[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"Article\\\",\\\"headline\\\":\\\"Создание сайта HTML в Блокноте — практическая работа с примером\\\",\\\"description\\\":\\\"Краткое пошаговое руководство по созданию простого сайта в Блокноте ✅ шаблон, проверка, SEO-чек‑лист и критерии оценки практической работы.\\\",\\\"datePublished\\\":\\\"2026-03-21\\\",\\\"author\\\":{\\\"@type\\\":\\\"Person\\\",\\\"name\\\":\\\"Арина Розенберг\\\"},\\\"publisher\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Rose Digital\\\"}}\"}}],[\"$\",\"article\",null,{\"className\":\"pt-28 pb-24\",\"children\":[\"$\",\"div\",null,{\"className\":\"max-w-3xl mx-auto px-6\",\"children\":[[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Главная\\\",\\\"item\\\":\\\"https://rosedigital.ru/\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"Блог\\\",\\\"item\\\":\\\"https://rosedigital.ru/blog\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":3,\\\"name\\\":\\\"Создание сайтов\\\",\\\"item\\\":\\\"https://rosedigital.ru/blog?category=website-creation\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":4,\\\"name\\\":\\\"Создание сайта HTML в Блокноте — практическая работа с примером\\\",\\\"item\\\":\\\"https://rosedigital.ru/blog/sozdanie-sayta-html-v-bloknote-prakticheskaya-rabota\\\"}]}\"}}],[\"$\",\"nav\",null,{\"aria-label\":\"Хлебные крошки\",\"className\":\"mb-8\",\"children\":[\"$\",\"ol\",null,{\"className\":\"flex flex-wrap items-center gap-x-1.5 gap-y-1 text-sm text-gray-500\",\"children\":[[\"$\",\"li\",\"Главная-0\",{\"className\":\"inline-flex items-center gap-1.5 min-w-0 max-w-full\",\"children\":[null,[\"$\",\"$L11\",null,{\"href\":\"/\",\"className\":\"hover:text-rose transition-colors truncate max-w-[10rem] sm:max-w-xs\",\"children\":\"Главная\"}]]}],[\"$\",\"li\",\"Блог-1\",{\"className\":\"inline-flex items-center gap-1.5 min-w-0 max-w-full\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"text-gray-600 select-none\",\"children\":\"/\"}],[\"$\",\"$L11\",null,{\"href\":\"/blog\",\"className\":\"hover:text-rose transition-colors truncate max-w-[10rem] sm:max-w-xs\",\"children\":\"Блог\"}]]}],[\"$\",\"li\",\"Создание сайтов-2\",{\"className\":\"inline-flex items-center gap-1.5 min-w-0 max-w-full\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"text-gray-600 select-none\",\"children\":\"/\"}],[\"$\",\"$L11\",null,{\"href\":\"/blog?category=website-creation\",\"className\":\"hover:text-rose transition-colors truncate max-w-[10rem] sm:max-w-xs\",\"children\":\"Создание сайтов\"}]]}],[\"$\",\"li\",\"Создание сайта HTML в Блокноте — практическая работа с примером-3\",{\"className\":\"inline-flex items-center gap-1.5 min-w-0 max-w-full\",\"children\":[[\"$\",\"span\",null,{\"aria-hidden\":\"true\",\"className\":\"text-gray-600 select-none\",\"children\":\"/\"}],[\"$\",\"span\",null,{\"aria-current\":\"page\",\"className\":\"truncate max-w-[14rem] sm:max-w-md md:max-w-lg text-gray-400\",\"children\":\"Создание сайта HTML в Блокноте — практическая работа с примером\"}]]}]]}]}]],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3 mb-6\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs text-rose font-medium px-2 py-1 bg-rose/10 rounded-full\",\"children\":\"Создание сайтов\"}],[\"$\",\"span\",null,{\"className\":\"text-xs text-gray-600\",\"children\":\"2026-03-21\"}]]}],[\"$\",\"h1\",null,{\"className\":\"text-3xl sm:text-4xl font-bold mb-6 tracking-tight\",\"children\":\"Создание сайта HTML в Блокноте — практическая работа с примером\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-400 mb-12 leading-relaxed\",\"children\":\"Краткое пошаговое руководство по созданию простого сайта в Блокноте ✅ шаблон, проверка, SEO-чек‑лист и критерии оценки практической работы.\"}],[[\"$\",\"div\",null,{\"className\":\"prose max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1f\"},\"suppressHydrationWarning\":true}],\"$L20\",\"$L21\"],\"$L22\",\"$L23\"]}]}]]\n"])</script><script>self.__next_f.push([1,"24:I[2240,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0x~u~yfch9lxo.js\"],\"BlogInlineLeadForm\"]\n26:I[40969,[\"/_next/static/chunks/112v3._k5ojgh.js\",\"/_next/static/chunks/0d3shmwh5_nmn.js\",\"/_next/static/chunks/0x~u~yfch9lxo.js\"],\"BlogLeadQuiz\"]\n20:[\"$\",\"$L24\",null,{\"variant\":\"website-creation\",\"articleSlug\":\"sozdanie-sayta-html-v-bloknote-prakticheskaya-rabota\",\"articleTitle\":\"Создание сайта HTML в Блокноте — практическая работа с примером\"}]\n25:T2d0c,"])</script><script>self.__next_f.push([1,"\u003cdiv\u003e\u003ch2 id=\"о-проекте\"\u003eО проекте\u003c/h2\u003e\n\u003cp\u003eКороткое описание задания и целей.\u003c/p\u003e\n\u003c/section\u003e\n\u003csection\u003e\n\u003ch2 id=\"контакты\"\u003eКонтакты\u003c/h2\u003e\n \u003cform action=\"/\" method=\"get\"\u003e\n \u003clabel\u003eИмя: \u003cinput type=\"text\" name=\"name\" required\u003e\u003c/label\u003e\n \u003clabel\u003eE-mail: \u003cinput type=\"email\" name=\"email\" required\u003e\u003c/label\u003e\n \u003cbutton type=\"submit\"\u003eОтправить\u003c/button\u003e\n \u003c/form\u003e\n\u003c/section\u003e\n \u003c/main\u003e\n \u003cfooter\u003e\n\u003cp\u003e© 2026 Практическая работа\u003c/p\u003e\n \u003c/footer\u003e\n\u003c/body\u003e\n\u003c/html\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003cp\u003eСохраните файл как \u003ccode\u003eindex.html\u003c/code\u003e и откройте его двойным кликом в браузере.\u003c/p\u003e\n \u003ch3 id=\"2-создание-файла-css\"\u003e2. Создание файла CSS\u003c/h3\u003e\n \u003cp\u003eСоздайте рядом файл \u003ccode\u003estyles.css\u003c/code\u003e и добавьте базовые стили:\u003c/p\u003e\n \u003cpre\u003e\u003ccode\u003e/* styles.css */\n*{box-sizing:border-box}\nbody{font-family:Arial, sans-serif;line-height:1.5;margin:0;padding:0;color:#222}\nheader,footer{background:#f5f5f5;padding:16px}\nmain{padding:16px}\nnav ul{list-style:none;padding:0;display:flex;gap:8px}\nimg{max-width:100%;height:auto}\nform label{display:block;margin-bottom:8px}\n@media (max-width:600px){nav ul{flex-direction:column}}\u003c/code\u003e\u003c/pre\u003e\n \u003ch3 id=\"3-добавьте-изображение-и-проверьте-относительные-пути\"\u003e3. Добавьте изображение и проверьте относительные пути\u003c/h3\u003e\n \u003cp\u003eПоместите файл изображения в папку \u003ccode\u003eimages\u003c/code\u003e и добавьте тег:\u003c/p\u003e\n \u003cpre\u003e\u003ccode\u003e\u003cimg src=\"images/photo.jpg\" alt=\"Описание изображения\"\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003ch2 id=\"css-adapt\"\u003eПодключение CSS и адаптивность\u003c/h2\u003e\n \u003cp\u003eДля практической работы ограничьтесь внешним CSS-файлом. Для адаптивности добавьте мета-тег viewport (в примере выше) и основные медиа-запросы. Обратите внимание на удобство чтения на мобильных устройствах — это влияет на пользовательский опыт и косвенно на позиции в поиске.\u003c/p\u003e\n \u003ch2 id=\"media-form\"\u003eДобавление изображений, ссылок и форм\u003c/h2\u003e\n \u003cp\u003eКлючевые моменты:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003ealt-атрибут для изображений — обязательно (SEO и доступность).\u003c/li\u003e\n\u003cli\u003eСемантические теги (\u003cheader\u003e, \u003cmain\u003e, \u003cfooter\u003e, \u003carticle\u003e, \u003csection\u003e) — ищущие роботы лучше понимают структуру.\u003c/li\u003e\n\u003cli\u003eПростые формы для сбора заявок — можно отправлять на тестовый сервер или использовать метод \u003ccode\u003emailto:\u003c/code\u003e в учебных задачах (не для продакшена).\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch2 id=\"proverka-publikaciya\"\u003eПроверка, отладка и публикация\u003c/h2\u003e\n \u003ch3 id=\"локальная-проверка\"\u003eЛокальная проверка\u003c/h3\u003e\n \u003cp\u003eОткройте \u003ccode\u003eindex.html\u003c/code\u003e в браузере и используйте инструменты разработчика (F12): проверьте консоль на ошибки, адаптивность и сетевые запросы.\u003c/p\u003e\n \u003ch3 id=\"валидатор\"\u003eВалидатор\u003c/h3\u003e\n \u003cp\u003eПроверьте HTML на соответствие стандартам (валидатор W3C) — это часть учебной оценки и полезно для SEO.\u003c/p\u003e\n \u003ch3 id=\"публикация\"\u003eПубликация\u003c/h3\u003e\n \u003cp\u003eДля демонстрации работы можно загрузить файлы на любой хостинг (FTP / git / static hosting). Если нужен бесплатный демонстрационный вариант — подойдёт GitHub Pages или другой статический хостинг. Но в учебном задании достаточно скриншота и файла.\u003c/p\u003e\n \u003ch2 id=\"seo-checklist\"\u003eSEO для учебного проекта: чек-лист\u003c/h2\u003e\n \u003cp\u003eДаже для простой практической работы важно соблюдать базовые SEO-принципы — это формирует правильные навыки:\u003c/p\u003e\n \u003cul\u003e\n\u003cli\u003eУникальный и информативный \u003ctitle\u003e (до 60 символов).\u003c/li\u003e\n\u003cli\u003eМета-описание \u003cmeta name=\"description\"\u003e (120–160 символов) — для сниппета в поиске.\u003c/li\u003e\n\u003cli\u003eКорректная структура заголовков: один \u003ch1\u003e, далее \u003ch2\u003e–\u003ch3\u003e по логике разделов.\u003c/li\u003e\n\u003cli\u003ealt для изображений, человеко-понятные URL (в практике — имя файла).\u003c/li\u003e\n\u003cli\u003eМобильная адаптивность и быстрый первый входной размер (оптимизируйте изображения).\u003c/li\u003e\n\u003cli\u003eФайл robots.txt и простая карта сайта sitemap.xml для публикации (если выкладываете на хостинг).\u003c/li\u003e\n\u003cli\u003eПроверка индексации: после публикации проверьте, что страница доступна для роботов.\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch3 id=\"пример-robotstxt-и-sitemapxml\"\u003eПример robots.txt и sitemap.xml\u003c/h3\u003e\n \u003cpre\u003e\u003ccode\u003e# robots.txt\nUser-agent: *\nAllow: /\n\u003c?xml version=\"1.0\" encoding=\"UTF-8\"?\u003e\n\u003curlset xmlns=\"http://www.sitemaps.org/schemas/sitemap/0.9\"\u003e\n \u003curl\u003e\n \u003cloc\u003ehttps://example.ru/\u003c/loc\u003e\n \u003cpriority\u003e1.00\u003c/priority\u003e\n \u003c/url\u003e\n\u003c/urlset\u003e\u003c/code\u003e\u003c/pre\u003e\n \u003ch2 id=\"kriterii\"\u003eКритерии оценки практической работы\u003c/h2\u003e\n \u003cp\u003eПримерная шкала (можно адаптировать под вашу методичку):\u003c/p\u003e\n \u003ctable\u003e\n\u003cthead\u003e\n\u003ctr\u003e\u003cth\u003eКритерий\u003c/th\u003e\u003cth\u003eМакс. баллов\u003c/th\u003e\u003cth\u003eКомментарий\u003c/th\u003e\u003c/tr\u003e\n\u003c/thead\u003e\n\u003ctbody\u003e\n\u003ctr\u003e\u003ctd\u003eСтруктура HTML\u003c/td\u003e\u003ctd\u003e20\u003c/td\u003e\u003ctd\u003eПравильное использование семантических тегов\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eВёрстка и CSS\u003c/td\u003e\u003ctd\u003e20\u003c/td\u003e\u003ctd\u003eЧитабельность, адаптивность\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eSEO-базовые настройки\u003c/td\u003e\u003ctd\u003e15\u003c/td\u003e\u003ctd\u003etitle, meta description, alt\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eФункциональность форм\u003c/td\u003e\u003ctd\u003e15\u003c/td\u003e\u003ctd\u003eРаботают ли элементы управления\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eОптимизация изображений\u003c/td\u003e\u003ctd\u003e10\u003c/td\u003e\u003ctd\u003eРазмеры и форматы\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eЧистота кода и комментарии\u003c/td\u003e\u003ctd\u003e10\u003c/td\u003e\u003ctd\u003eКомментарии и читаемость\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003ctd\u003eДоп. улучшения\u003c/td\u003e\u003ctd\u003e10\u003c/td\u003e\u003ctd\u003eJS-элементы, анимация, микроразметка\u003c/td\u003e\u003c/tr\u003e\n\u003c/tbody\u003e\n \u003c/table\u003e\n \u003ch2 id=\"errors\"\u003eЧастые ошибки и как их избежать\u003c/h2\u003e\n \u003cul\u003e\n\u003cli\u003eСохранение в неправильной кодировке — используйте UTF-8 без BOM.\u003c/li\u003e\n\u003cli\u003eОтсутствие meta viewport — страница будет неадаптивной на мобильных.\u003c/li\u003e\n\u003cli\u003eНеоптимизированные изображения — долго грузится, ухудшает UX и повлияет на SEO.\u003c/li\u003e\n\u003cli\u003eМножественные \u003ch1\u003e — допускает путаницу, оставьте ровно один \u003ch1\u003e.\u003c/li\u003e\n\u003cli\u003eИспользование inline-стилей повсеместно — усложняет поддержку; лучше внешний CSS-файл.\u003c/li\u003e\n \u003c/ul\u003e\n \u003ch2 id=\"faq\"\u003eFAQ\u003c/h2\u003e\n \u003ch3 id=\"1-нужно-ли-сохранять-файл-в-utf-8\"\u003e1. Нужно ли сохранять файл в UTF-8?\u003c/h3\u003e\n \u003cp\u003eДа. Для корректного отображения кириллицы сохраните документ в кодировке UTF-8 (в Блокноте: \"Сохранить как\" → кодировка UTF-8).\u003c/p\u003e\n \u003ch3 id=\"2-как-проверить-валидность-html\"\u003e2. Как проверить валидность HTML?\u003c/h3\u003e\n \u003cp\u003eВручную: просмотрите исходный код и проверьте консоль браузера. Для формальной проверки используйте валидатор W3C. Для учебной работы достаточно исправить основные ошибки, выявленные валидатором.\u003c/p\u003e\n \u003ch3 id=\"3-можно-ли-использовать-таблицы-для-вёрстки\"\u003e3. Можно ли использовать таблицы для вёрстки?\u003c/h3\u003e\n \u003cp\u003eНет. Таблицы предназначены для табличных данных. Для оформления используйте CSS-раскладки (flexbox/grid).\u003c/p\u003e\n \u003ch3 id=\"4-нужно-ли-добавлять-микроразметку-structured-data\"\u003e4. Нужно ли добавлять микроразметку (structured data)?\u003c/h3\u003e\n \u003cp\u003eДля учебного задания это опционально, но знание микроразметки (JSON-LD) полезно для SEO и повышения кликабельности сниппетов. Пример простого JSON-LD можно добавить в \u003chead\u003e.\u003c/p\u003e\n \u003ch3 id=\"5-насколько-важен-seo-для-учебного-проекта\"\u003e5. Насколько важен SEO для учебного проекта?\u003c/h3\u003e\n \u003cp\u003eДаже учебный проект — хорошая площадка, чтобы практиковаться в базовой SEO: это даст понимание, как поисковики читают страницы. Помните: SEO — стабильный долгосрочный канал; платная реклама лишь ускоряет результат при продвижении реального проекта.\u003c/p\u003e\n\u003c/main\u003e\n\u003csection aria-label=\"CTA\"\u003e\n \u003ch2 id=\"дальше-как-превратить-практику-в-реальный-проект\"\u003eДальше: как превратить практику в реальный проект\u003c/h2\u003e\n \u003cp\u003eЕсли вы хотите, чтобы учебная работа превратилась в рабочий сайт с регистрацией домена, хостингом, SEO-продвижением и аналитикой — Rose Digital поможет на всех этапах: от верстки до устойчивого привлечения трафика. Ознакомьтесь с нашими услугами по созданию и продвижению сайтов (\u003ca href=\"/sozdanie-i-prodvizhenie-saitov\"\u003eуслуги по созданию и продвижению сайтов\u003c/a\u003e) и реальными примерами работ в разделе \u003ca href=\"/cases\"\u003eнаши кейсы\u003c/a\u003e. Мы ставим SEO в основу стратегии и используем контекстную рекламу как ускоритель — чтобы результаты стали стабильными и прогнозируемыми.\u003c/p\u003e\n\u003c/section\u003e\n"])</script><script>self.__next_f.push([1,"21:[\"$\",\"div\",null,{\"className\":\"prose max-w-none\",\"dangerouslySetInnerHTML\":{\"__html\":\"$25\"},\"suppressHydrationWarning\":true}]\n22:[\"$\",\"$L26\",null,{\"variant\":\"website-creation\",\"articleSlug\":\"sozdanie-sayta-html-v-bloknote-prakticheskaya-rabota\",\"articleTitle\":\"Создание сайта HTML в Блокноте — практическая работа с примером\"}]\n23:[\"$\",\"nav\",null,{\"className\":\"mt-14 pt-10 border-t border-white/5 grid grid-cols-1 sm:grid-cols-2 gap-4\",\"aria-label\":\"Соседние статьи\",\"children\":[[\"$\",\"div\",null,{\"className\":\"min-w-0\",\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog/sovremennye-lendingi\",\"className\":\"block rounded-2xl border border-white/10 bg-gray-900/50 p-5 hover:border-rose/30 transition-colors\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs text-gray-500 uppercase tracking-wide\",\"children\":\"Предыдущая\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 font-semibold text-white line-clamp-2\",\"children\":\"Современные лендинги: дизайн, структура и что действительно повышает конверсию\"}]]}]}],[\"$\",\"div\",null,{\"className\":\"min-w-0 sm:text-right\",\"children\":[\"$\",\"$L11\",null,{\"href\":\"/blog/tsel-sozdaniya-sayta\",\"className\":\"block rounded-2xl border border-white/10 bg-gray-900/50 p-5 hover:border-rose/30 transition-colors sm:ml-auto\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-xs text-gray-500 uppercase tracking-wide\",\"children\":\"Следующая\"}],[\"$\",\"p\",null,{\"className\":\"mt-2 font-semibold text-white line-clamp-2\",\"children\":\"Цель создания сайта: как правильно поставить задачу и получить бизнес-результат\"}]]}]}]]}]\n"])</script></body></html>