Код для создания сайта: где писать, что в шаблоне и зачем charset utf-8

Сайты для создания кода делятся на четыре типа: онлайн-редакторы с мгновенным просмотром, компиляторы для запуска кода на разных языках, генераторы и нейросети, которые пишут код по описанию, и учебные страницы с готовыми примерами. Но прежде чем выбирать сервис, полезно понять, из чего состоит код любого сайта: базовый шаблон — это двенадцать строк, и каждая что-то значит. Ниже — разбор этого шаблона, редактор с живым просмотром прямо в статье, демонстрация того, что ломается без charset=utf-8, и ответы на соседние вопросы: код фона, картинки, QR-код по ссылке и штрих-коды.

Тридцать страниц поиска: редакторы, нейросети и ни одного разбора

Я разобрал тридцать страниц, которые поиск показывает по запросу «сайты для создания кода».

Одиннадцать страниц — сами онлайн-редакторы и компиляторы: пишете HTML, CSS и JavaScript слева, видите результат справа. Шесть — нейросети для кода и их рейтинги на Хабре, vc.ru и в Skillbox. Шесть — подборки редакторов и песочниц. Три — генераторы HTML, три — учебные страницы с примерами кода. Одна не открылась.

Инструментов много, а объяснения, что именно писать, почти нет. Учебные страницы показывают «готовый код», но не говорят, какие строки обязательны, а какие можно убрать. Нейросеть код напишет, но если вы не понимаете, что в нём, вы не заметите ошибку.

Сайты для создания кода: четыре типа

• Онлайн-редакторы и песочницы — CodePen, JSFiddle и десятки похожих. Три окна: HTML, CSS, JavaScript, и окно просмотра. Для экспериментов, учёбы и примеров, которыми делятся по ссылке.
• Онлайн-компиляторы — запускают код на Python, Java, C++, PHP и других языках прямо в браузере. Для задач и проверки фрагментов, а не для сайтов.
• Генераторы и нейросети — пишут код по описанию. Быстро дают черновик, но код нужно читать и проверять.
• Учебные страницы с примерами — готовый код для копирования. Полезны, если понимаете, что копируете.

Отдельно ищут сайт для создания красивого кода. Тут два разных смысла: сервисы-форматтеры, которые расставляют отступы и приводят код к единому стилю, и сервисы, которые делают из кода красивую картинку для презентации или соцсетей. Первое полезно для работы, второе — для показа.

А создание сайтов «ноукод» — без кода вообще — это конструкторы: Tilda и аналоги. Код там тоже есть, но его пишет платформа, а вы двигаете блоки.

Базовый код для создания сайта: разбор по строкам

Основа кода для создания сайта у всех одна — это скелет HTML-документа. Его можно набрать в Блокноте, сохранить как index.html и открыть в браузере. Вот что в нём и зачем.

1. Doctype говорит браузеру, что это современный HTML. Без него страница открывается в режиме совместимости со старыми браузерами, и вёрстка может поехать.
2. lang="ru" — язык страницы. Нужен для правильных переносов, программ экранного доступа и поисковиков.
3. meta charset="utf-8" — кодировка. Без неё русский текст может превратиться в набор странных символов. Ниже есть демонстрация.
4. meta viewport — без этой строки телефон покажет страницу как уменьшенную версию для компьютера.
5. title — текст во вкладке и заголовок в результатах поиска.
6. body — всё содержимое страницы: заголовки, текст, картинки, ссылки.

Это и есть шаблон кода создания сайта, который стоит выучить наизусть. Всё остальное — стили, скрипты, блоки — добавляется к нему.

Кроме HTML, у любого сайта есть ещё два слоя. CSS отвечает за внешний вид: цвета, шрифты, отступы, расположение блоков, поведение на телефоне. Его пишут в теге style или, что правильнее, в отдельном файле, который подключается в head. JavaScript отвечает за поведение: меню, которое раскрывается, калькулятор, отправка формы без перезагрузки. Скрипты подключают в конце страницы или с атрибутом defer. Три слоя — содержание, вид и поведение — удобно держать раздельно: тогда можно поменять дизайн, не трогая текст, и наоборот.

Попробуйте: редактор с живым просмотром

Отредактируйте код слева — справа (на телефоне ниже) сразу появится результат. Кнопки добавляют готовые фрагменты: фон, картинку, ссылку, кнопку. Так работают онлайн-редакторы из выдачи, только здесь всё в одном окне.

Попробуйте убрать строку с viewport и посмотреть на телефоне — страница станет мелкой. Уберите </p> — браузер всё равно покажет текст: HTML прощает ошибки, поэтому их так легко не заметить.

Charset utf-8: создание сайта начинается с кодировки

Для создания сайтов кодировка — первое, что задаётся в коде, и последнее, о чём вспоминают, когда видят на странице «РџСЂРёРІРµС‚» вместо «Привет». Это происходит, когда файл сохранён в одной кодировке, а браузер читает его в другой. Строка <meta charset="utf-8"> при создании сайта говорит браузеру, как читать, а редактор должен сохранять файл тоже в UTF-8. Посмотрите, как это выглядит, — поменяйте кодировки в списках и сравните результат на экране.

Сегодня почти все редакторы сохраняют файлы в UTF-8 по умолчанию, но «кракозябры» по-прежнему встречаются: при переносе старого сайта, при подключении базы данных в другой кодировке, при вставке текста из письма. Если видите такое на своём сайте — проверьте кодировку в трёх местах: в файле, в теге meta и в настройках базы данных.

Коды и скрипты для создания сайта: фон, картинка, ссылка

Самые частые запросы после базового шаблона — конкретные фрагменты. Вот короткие ответы.

• Код для создания фона на сайте. Цвет: body{background:#f3f8f6}. Картинка: body{background:url(bg.jpg) center/cover}. Градиент: background:linear-gradient(135deg,#e0f2fe,#d1fae5). Фон задают в CSS, а не в HTML.
• Код создания сайта с картинкой. <img src="photo.jpg" alt="Описание">. Обязательно alt и сжатый файл: картинка в 5 мегабайт замедлит страницу сильнее, чем весь остальной код.
• Создание сайта: код на ссылку. <a href="https://адрес">Текст ссылки</a>. Для внешних ссылок, которые открываются в новой вкладке, добавляют target="_blank" rel="noopener".
• Скрипты. Подключаются тегом <script src="app.js" defer></script> — с defer, чтобы не тормозить показ страницы.

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

Код для создания своего сайта: HTML, PHP или Python

HTML и CSS описывают, как страница выглядит. Чтобы сайт принимал заявки, хранил товары или статьи, нужен серверный язык. Чаще всего это PHP: его поддерживает почти любой хостинг. Коды Python для создания сайта тоже существуют — на фреймворках Django и Flask, — но для Python нужен хостинг с его поддержкой, и обычно это VPS, а не самый дешёвый тариф.

Создание новостного сайта кодом с нуля — плохая идея для начинающего: нужны админка, база статей, рубрики, поиск, комментарии. Это то, что давно сделано в CMS вроде WordPress. Писать такое самому стоит только ради обучения.

Пять ошибок в первом коде сайта

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

• Нет viewport. На компьютере всё нормально, на телефоне — мелкий текст и горизонтальная прокрутка.
• Картинки по 3–5 мегабайт. Фото с камеры вставлено как есть. Страница открывается секундами, особенно в мобильной сети. Сжимайте до нескольких сотен килобайт и используйте WebP или AVIF.
• Один title на всех страницах. Скопированный шаблон — и у десяти страниц одинаковый заголовок во вкладке и в поиске.
• Текст картинкой. Заголовок или цены сделаны изображением: их не прочитает поисковик и не увеличит человек со слабым зрением.
• Пути к файлам с ошибками. На компьютере работало, на хостинге — нет: C:\Users\... вместо относительного пути или большие буквы в имени файла, которые сервер различает.

Нейросеть написала код: как его проверить

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

1. Какие внешние файлы подключаются. Найдите все src= и href= с чужими адресами. Каждый внешний скрипт — это код, который может измениться без вашего ведома.
2. Есть ли базовые строки. Doctype, charset, viewport, lang. Нейросети их иногда пропускают во фрагментах.
3. Работает ли на телефоне. Откройте страницу на мобильном или сузьте окно браузера.
4. Куда уходят данные формы. Если в коде есть форма, проверьте адрес в action и в скриптах отправки.
5. Нет ли лишнего. Сгенерированный код часто в разы длиннее нужного: дублирующиеся стили, неиспользуемые функции. Чем меньше кода, тем быстрее сайт и проще его поддерживать.

Создание сайтов: написание кодов с помощью нейросети — нормальная практика и для опытных разработчиков. Разница в том, что опытный разработчик видит ошибку за секунду, а новичок узнаёт о ней от посетителей.

QR-код и штрих-код: другой «код для сайта»

Часть запросов вообще не про программирование: сайт для создания QR-кода по ссылке, создание QR-кода на сайт, сайты для создания штрих-кодов. Это разные коды для разных задач.

Сайт для создания QR-кода по ссылке — самый простой случай: вставляете адрес, скачиваете картинку. Проверьте одно: генератор не должен подменять вашу ссылку своей «короткой». Если QR ведёт через чужой сервис, после окончания бесплатного периода код может перестать работать — а он уже напечатан на визитках. Подробно о QR для сайта — в статьях, ссылки на которые ниже.

Сайт по созданию штрих-кода нарисует картинку по любому номеру, но для продажи в магазинах номер должен быть зарегистрирован в ГС1 РУС — иначе касса и склад сети его не примут. Для товаров с обязательной маркировкой коды DataMatrix выдаёт система «Честный знак», сгенерировать их на стороннем сайте нельзя.

Как ищут код для сайта: короткие ответы

• «Код для создания веб сайта», «создание сайт основы кода». Базовый шаблон из разбора выше — с него начинается любая страница.
• «Создание сайта готовый код». Готовые примеры полезны для учёбы, но проверяйте источник и лицензию, особенно у бесплатных шаблонов.
• «Коды создания сайта блокноте». Наберите шаблон в Блокноте, сохраните как index.html в кодировке UTF-8 и откройте в браузере.
• «Код создания фона сайта». Свойство background в CSS: цвет, картинка или градиент.
• «Коды питона для создания сайта». Django или Flask и хостинг с поддержкой Python.
• «Сайт для создания кьюар кода по ссылке», «сайт для создания кр кода», «создание куар кода на сайт». Любой генератор QR, который кодирует ссылку напрямую. Картинку QR на сайте ставят обычным тегом img.

Я до сих пор каждый новый сайт начинаю с тех же двенадцати строк, что в начале статьи. Нейросети и генераторы ускоряют работу, но то, что они пишут, я читаю построчно: однажды сгенерированный код подключал скрипт со стороннего сервера, который никто не просил. Понимать базовый код нужно не для того, чтобы писать всё руками, а чтобы замечать такое.
— Александр Рожков

Итог

Сайты для создания кода — это онлайн-редакторы, компиляторы, генераторы с нейросетями и учебные примеры. Но основа кода для создания сайта одна: doctype, язык, кодировка utf-8, viewport, title и body. Кодировка задаётся и в коде, и при сохранении файла, иначе посетитель увидит «кракозябры». Фон, картинки и ссылки — несколько строк HTML и CSS, а для заявок и статей нужен серверный язык или CMS. QR-код по ссылке можно сделать самому, штрих-код для торговли — только с зарегистрированным номером.

Если нужен готовый сайт с чистым кодом — условия на странице создания сайтов.

Александр Рожков

Вебмастер · SEO-специалист · 15+ лет · 200+ проектов

Частный вебмастер в Москве. 200+ сайтов под ключ, 15+ лет опыта. Создаю сайты, настраиваю SEO и рекламу лично — без субподрядчиков.

О себе