Как создать сайт самому в 2026: 4 способа + пошаговая инструкция

Как создать сайт самостоятельно и полностью бесплатно с полного нуля не имея технических знаний? Что такое «домен» и «хостинг» и зачем они нужны? Что такое «HTML-сайт», «CMS-система» и «конструктор сайтов» и в чем их ключевые отличия друг от друга?

Если интересуетесь, как делать сайты, отвечающие современным требованиям, то эта подробная инструкция для вас. Сайт может стать личным интернет-представительством, витриной бизнеса и источником дохода – и сегодня для запуска первого проекта уже не нужны ни диплом программиста, ни бюджет на подрядчика.

Обновлено: 2026-08-11 11:57:33 Алексей Дружаевавтор материала

Технические аспекты создания сайта

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

1. Генерация сайта нейросетью (ИИ-конструкторы);
2. Сборка в классическом конструкторе сайтов;
3. Установка и настройка CMS-системы;
4. Веб-разработка с помощью редактора кода.

Дальше разберем все четыре по порядку. Начнем с самого быстрого.

Создание сайта с помощью нейросети

Пару лет назад этого пункта в статье просто не было. Сейчас это первое, что мы советуем попробовать новичку.

Работает так. Вы в свободной форме пишете, чем занимаетесь и что должно быть на сайте. Нейросеть придумывает структуру разделов, пишет тексты, подбирает картинки и собирает страницы. Через несколько минут у вас на руках рабочий черновик, который дальше правится руками в обычном визуальном редакторе.

По сути ИИ-конструктор – это тот же конструктор сайтов, только с нейросетью внутри. Она забирает на себя самую муторную часть – чистый лист. Дальше вы все равно правите результат сами.

Российские сервисы с ИИ-генерацией:

• Craftum AI – собирает сайт по текстовому запросу за пару минут. Пишет тексты, подбирает изображения, рисует логотип. Хорошо справляется с лендингами, сайтами услуг и небольшими магазинами. Данные хранятся в России, есть интеграции с CRM и маркетплейсами.
• UMI.CMS «Нейросайт» – надстройка над российской CMS. Формирует готовый сайт по описанию бизнеса. Вариант на вырост. Когда понадобится полноценная система управления, а не только визуальный редактор, переезжать никуда не придется.

Из зарубежных чаще всего вспоминают:

• Wix ADI – один из первых массовых ИИ-генераторов. Задает вопросы о проекте и собирает страницы под ваши ответы.
• Lovable – выдает не шаблон, а настоящий код по итогам диалога с нейросетью. Это уже ближе к разработке веб-приложений, чем к сборке визитки.

С зарубежными сервисами есть две проблемы. Первая – оплата из России. Вторая серьезнее. Хранить персональные данные россиян на серверах за рубежом нельзя по 152-ФЗ. Если на сайте будет форма заявки, берите российскую площадку.

Этот способ подойдет, если нужно быстро проверить идею, нет готовых текстов и картинок, а сам проект несложный – визитка, лендинг, портфолио.

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

Конструкторы сайтов

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

Конструкторы веб-сайтов – это онлайн-сервисы, на которых создаются сайты. Онлайн-сервисы предлагают множество готовых шаблонов и инструменты веб разработки. С помощью которых можно легко и быстро запустить веб-сайт. Одновременно, нет необходимости вникать в сложные технические детали.

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

Преимущества использования конструкторов сайтов:

• Простота использования. Конструкторы не требуют специальных навыков – даже начинающий пользователь соберет свой первый сайт самостоятельно.
• Широкий выбор шаблонов. Библиотеки макетов закрывают большинство типовых задач, поэтому подобрать подходящую основу под свою тематику обычно несложно.
• Интуитивный интерфейс. Освоить редактор можно за вечер, не читая документацию.
• Все включено. Хостинг, SSL-сертификат, резервные копии и мобильная версия идут в составе подписки – отдельно настраивать их не нужно.

Популярные конструкторы веб-сайтов:

• Tilda – самый гибкий по дизайну российский конструктор. Большая библиотека блоков, тонкая настройка типографики, нормальные SEO-возможности. Берите, если для вас важно, как проект выглядит, – лендинги, медиапроекты, портфолио, длинные страницы о продукте. Но готовьтесь работать руками, тут сайт собирается блок за блоком.
• uKit – конструктор для малого и офлайн-бизнеса. Отраслевые заготовки экономят кучу времени на старте. Есть виджеты заявок, обратный звонок, рассылки, интеграции с CRM и мессенджерами. По части дизайна свободы меньше, чем в Tilda: вы работаете внутри шаблона. Полностью на русском, серверы в России. Подробности – в нашем обзоре uKit и руководстве по работе.
• Craftum – тот самый конструктор с ИИ-генерацией, о котором мы говорили выше. Понятный интерфейс, подходит и для личных проектов, и для коммерческих: блоги, портфолио, интернет-магазины. Удобен, когда нужно быстро получить черновик и потом довести его руками.
• Nethouse – конструктор под бизнес-задачи: портфолио, лендинги, визитки, интернет-магазины. Легкий в изучении. Смотрите подробный обзор и пошаговое руководство.

Выбирая конструктор, учтите следующие моменты:

• Цели создания и тип будущего сайта;
• Бюджет – причем не только на старте, но и через год;
• Степень владения навыками веб-дизайна;
• Сможете ли вы съехать на другую площадку, когда проект перерастет конструктор;
• Где физически лежат данные ваших посетителей. Для коммерческого сайта с формами это уже требование закона.

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

Простой пример создания сайта

Учиться проще на практике, поэтому разберем этапы запуска на примере конструктора uKit. Сервис рассчитан на новичков и представителей малого бизнеса – всех, кто не хочет вникать в технические сложности.

Конструктор избавляет от необходимости верстать первый сайт вручную на HTML или разбираться с настройкой CMS. Для удобства весь процесс разбит на четыре шага.

Шаг первый – регистрация и вход в аккаунт.

Зарегистрируйтесь, указав свои данные, или войдите через аккаунт Яндекса либо Google. После этого определитесь с нужным функционалом и выберите подписку.

Платные тарифы начинаются от 159 ₽ в месяц. Тариф «Минимальный» с подключением своего домена, бесплатным SSL-сертификатом, резервными копиями и круглосуточной поддержкой обойдется от 495 ₽ в месяц при оплате за два года; максимальный тариф «Про» – от 825 ₽ в месяц. Помесячная оплата дороже, чем длительная подписка. Перед покупкой доступен бесплатный тестовый период – 10 дней.

Чтобы воспользоваться выгодной подпиской uKit прямо сейчас, используйте наш промокод: IT-15.

Тарифы и условия сервисов меняются. Перед оплатой сверяйте актуальные цены на сайте конструктора – в статье они приведены для ориентира.

Шаг второй – выбираем шаблон дизайна.

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

Шаблоны uKit содержат осмысленные тексты и описания, соответствующие выбранной тематике. Для лендингов и визиток, которым не нужен уникальный контент, иногда достаточно поменять контактную информацию.

Это заметно ускоряет запуск: остается подобрать подходящий по функционалу и оформлению шаблон и приступить к его настройке и наполнению.

Шаг третий – оформление и персонализация сайта.

Каждому сайту требуется имя. Здесь также как и в известном выражении о названии корабля. От имени зависит узнаваемость ресурса. Имя должно легко запоминаться и ассоциироваться с вашим брендом. Вначале можете использовать домен третьего уровня.

Но, в дальнейшем лучше приобрести домен второго уровня, он будет более узнаваемым. Для доменов в зонах.ru и.рф не требуется дополнительная настройка. Все необходимые ресурсные записи будут автоматически внесены в реестр.

Регистрация домена осуществляется через админ-панель сервиса. Что также очень удобно. Так как не придется думать, где и как зарегистрировать сайт. Это одно из преимуществ использования конструкторов.

Визуальный редактор uKit дает полный контроль над каждой деталью сайта. Можете добавлять, удалять, изменять блоки и виджеты. А также настраивать их внешний вид, включая фон, шрифты и анимации.

Конструктор uKit позволяет:

• Добавить контент на страницу. Создать главную, контакты, страницы услуг и т.д. Добавить текст и изображения, видео и прочие элементы.
• Создать слайдеры, фотогалереи и видеоролики.
• Добавить функциональные элементы. Создать формы заявок, для сбора заявок, обратной связи и т.д. А также расположить кнопки и меню навигации, чтобы пользователи могли легко взаимодействовать с сайтом.
• Добавить кнопки и виджеты соцсетей. Кнопки, чтобы пользователи могли легко поделиться информацией с друзьями. Виджеты, чтобы отображать информацию о компании в соцсетях.
• Создать блог или новостной раздел. Добавить страницы с новостями и статьями. А также возможность комментирования статей.
• Создать интернет-магазин. Добавить товары и категории, возможность оплаты и доставки.
• Получить все необходимые SEO-возможности. Добавить мета-теги и элементы микроразметки. Сжать изображения для ускорения загрузки сайта. Подключить аналитику для отслеживания эффективности SEO-продвижения.
• Добавить favicon, чтобы ресурс был легко узнаваемым в адресной строке браузера.
• Интегрировать счетчики и метрики для web-аналитики. Это позволит отслеживать посещаемость сайта, источники трафика и другие важные параметры.
• Использовать другие модули для разных задач. Например, калькуляторы, кнопки заказа обратного звонка, онлайн-чаты, прайс-листы и т.д.

Шаг четвертый – финальные штрихи и запуск.

• Проверьте мобильную версию. Должна работать без нареканий.
• Проверьте контактную информацию.
• Протестируйте формы и кнопки.
• Осуществите «Предпросмотр».
• Определитесь с блоками для разнотипных устройств. Решите, что должно отображаться в мобильной (отдельно планшеты, смартфоны), а что в десктопной версии.
• Нажмите «Опубликовать» для запуска сайта.

Создание сайта – это творческий процесс. Но с uKit сможете сосредоточиться на важном и наслаждаться редактированием. Совершенствовать сайт можно бесконечно, улучшая функционал, добавляя новые возможности или оптимизируя производительность.

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

С uKit сможете создать высококачественный сайт с удобной мобильной версией, даже если не владеете навыками программирования. Если возникнут вопросы по конструктору, наша подробная пошаговая инструкция поможет найти ответы.

CMS-системы

CMS – это сокращение от английского выражения Content Management System. В переводе на русский означает «система управления контентом», то есть сайтом. CMS – это программное обеспечение, которое имеет возможность создавать и управлять веб-сайтами.

CMS-системы часто называют «движками» сайтов. Они обеспечивают наглядный и простой интерфейс, который позволяет пользователям быстро создавать и редактировать контент сайта без специальных знаний в области веб-разработки.

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

При необходимости можно установить дополнительные плагины для улучшения безопасности, интеграции аналитики, оптимизации загрузки страниц и других аспектов. Уже разработано тысяча плагинов для различных направлений расширения функциональности CMS систем.

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

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

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

Топ бесплатных CMS-систем

• WordPress – самая популярная CMS-система в мире. Подходит для создания широкого спектра сайтов, от простых блогов до сложных корпоративных сайтов. Этот ресурс тоже работает на Вордпресс. CMS проста в использовании и имеет обширную библиотеку плагинов и тем, которые можно использовать для расширения функциональности сайта. Ранее мы публиковали подробное руководство по созданию сайта на Вордпресс.
• Drupal – это мощная CMS-система, подходящая для сайтов-портфолио и сайтов-визиток, корпоративных блогов и соцсетей, интернет-магазинов и т.п. Обладает гибкой архитектурой, которая позволяет пользователям создавать собственные модули, темы и расширения.
• Joomla – еще одна популярная CMS-система, которая предлагает широкий набор функций и возможностей. Joomla подходит для создания сложных сайтов, требующих высокой степени кастомизации. Часто применяется для создания веб-ресурсов, корпоративных сайтов, магазинов или сайтов-визиток. Прочтите наше руководство о том, как работать с Joomla.
• OpenCart – используется для разработки интернет-магазинов. Система проста в использовании, одновременно сложна при разработке больших проектов. При создании полноценного интернет-магазина, без квалифицированного PHP-программиста в штате не обойтись.
• InstantCms – CMS-система, предназначенная для создания социальных сетей, городских порталов, или сервисы знакомств и онлайн-клубов. InstantCms имеет широкий набор функций, которые позволяют пользователям создавать сложные многопользовательские веб-сайты.
• phpBB – на этой системе строятся онлайн-форумы и разнонаправленные сообщества. Движок популярен благодаря своей простоте использования и легкой установке движка. А также широкому сообществу пользователей и разработчиков, поддерживающих его расширениями и плагинами.

Топ платных CMS-систем

• «1C-Битрикс» – самая популярная платная CMS в России. Используется для интернет-магазинов, корпоративных сайтов и порталов. Отличается многофункциональностью, высокой производительностью и мобильным администрированием. Ключевое преимущество для российских магазинов – интеграция с 1С.
• UMI.CMS – полностью российский продукт с акцентом на удобство использования. Содержит готовые шаблоны для быстрого запуска сайта любой сложности, а сотрудничающие с платформой разработчики помогут с кастомизацией. Есть режим «Нейросайт» – генерация структуры и наполнения по описанию бизнеса.
• osCommerce – одна из старейших систем для интернет-магазинов с богатым набором функций. Правда, платформа очень старая, и сообщество вокруг нее заметно меньше, чем у современных решений.

Наглядное сравнение подходов к созданию сайта смотрите в видеоразборе:

Самостоятельное создание сайта

Следующая инструкция – для тех, кто хочет создавать сайты вручную, используя язык разметки HTML. Она подойдет читателям с любым уровнем подготовки, поскольку подробно описывает первые шаги в веб-разработке.

Внимание! Если не уверены в своих навыках, предпочитаете избегать возни с кодом и техническими аспектами, можете сразу перейти к пункту «Создать сайт с нуля или на конструкторе сайтов?»

Создание HTML-сайта

Для примера напишем простой HTML-сайт, содержащий всего одну страницу. Для новичков проясним аббревиатуру HTML, которая расшифровывается как HyperText Markup Language. Это гипертекстовый язык разметки веб-страниц.

Применяется для указания браузеру, где и как открыть содержимое веб-страницы при загрузке. Язык использует теги для описания различных элементов страницы. При этом теги определяет часть контента, который веб-браузер должен отобразить.

Создавать сайт на HTML будем в текстовом редакторе. Подойдет любой, но удобнее работать в специализированном, он подсвечивает синтаксис и подсказывает теги. Хороший бесплатный выбор – Visual Studio Code, Notepad++ или Sublime Text.

В качестве учебного примера соберем одностраничный сайт вымышленного туристического агентства «ТурБюро». Задача условная, но структура – шапка с логотипом и меню, контентная часть, подвал – универсальна. Точно так же устроено большинство реальных сайтов-визиток.

Ознакомьтесь с исходным кодом:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<base href="https://www.internet-technologies.ru/wp-content/uploads/pages/createMySite/" />
<title>Туристическое агентство ТурБюро</title>
<meta name="description" content="Описание страницы" />
<meta name="keywords" content="Ключевые слова" />
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="page">
<header>
<a href="/" title="" class="logo"><img src="images/logo.png" alt="Туристическое агентство" /></a>
<div class="phone">+7 (123) 45-67-89</div>
<nav>
<ul id="top_menu">
<li><a href="index.html">О компании</a></li>
<li><a href="services.html">Наши услуги</a></li>
<li><a href="contacts.html">Контакты</a></li>
</ul>
</nav>
<div class="header_img">
<img src="images/header_img.jpg" alt="Туристическое агентство" />
</div>
</header>
<section id="content">
<h1>Приветствуем Вас на сайте ТурБюро!</h1>
<img src="images/content_img.jpg" alt="Картинка" class="float-right" />
<p>Здравствуйте! Мы рады приветствовать вас на сайте туристического агентства «ТурБюро»! Мы предлагаем нашим клиентам только самые интересные и захватывающие приключенческие туры по всему миру!</p>
<p>Только у нас вы сможете полететь в Индию на слоне и окунуться в глубокое синее море, держась за плавник акулы. Но не волнуйтесь - каждый клиент нашего агентства застрахован по полной программе и жаждет приключений снова и снова!</p>
<p>Если вам нечего заняться, вы поистине решили заняться приключениями на свою голову, то приглашаем вас в офисы нашей компании по всей стране для выбора самых вкусных предложений.</p>
</section>
<footer>
<a href="https://www.internet-technologies.ru/" title="Сайтостроение от А до Я">Сайтостроение от А до Я</a><br />Все права защищены
</footer>
</div>
</body>
</html>

Откройте текстовый редактор и создайте новый файл с именем index.html. Это будет основной файл вашего сайта. Скопируйте из окна код и вставьте в текстовый файл. Сохраните его на своем компьютере. Затем откройте в любом веб-браузере сохраненный файл, чтобы увидеть результат:

Все веб-сервера, по умолчанию, выдают браузеру стартовую страницу index.html. Считается хорошей практикой сохранять код главной страницы сайта именно под этим именем. Это правило работает в 99% случаев.

Если заинтересовал пример простенького HTML-сайта, а также желаете получить полный исходник, то можете загрузить его в виде архива, размером 10,8 Мб. Распакуйте в любую папку на своем компьютере и запустите html/index.html.

В этом примере макет сайта и картинки берутся из интернета. Далее вы научитесь создавать макет сайта самостоятельно.

Ключевые этапы создания сайта

Выделим три главных этапа создание сайта с нуля:

• Разработка макета. Сначала формируется визуальное представление будущего сайта. Сегодня макеты рисуют в специализированных интерфейсных редакторах – отраслевой стандарт здесь Figma.
• Верстка сайта. Содержимое макета переносят в код, адаптируют под мобильные устройства и проверяют отображение в разных браузерах.
• Интеграция PHP. Этот шаг превращает статичную страницу в динамическую. Появляются интерактивные элементы и возможность управлять содержимым.

Рассмотрим каждый этап подробнее. Ничего непреодолимого здесь нет, даже если вы никогда не работали в графическом редакторе и не программировали.

Создание макета сайта

Макет – это то, как сайт будет выглядеть. Его рисуют до того, как написана хоть одна строчка кода.

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

А как же Photoshop? Для макетов сайтов его сейчас берут редко, ведь писали программу для обработки фотографий, а не для проектирования интерфейсов. Но логика сборки макета везде одинаковая, поэтому разбор ниже своей ценности не теряет. Освоите принцип – перенесете его в Figma без проблем.

Разберем последовательность действий на примере Photoshop. Нам понадобятся сетка и направляющие, шапка, меню, контентная часть, подвал и подготовка картинок для верстки.

Алгоритм действий:

• Откройте Photoshop и создайте новый документ. Задайте ему имя, например, MySite и размеры. Рекомендуемые размеры: 1000 на 1000 пикселей. Этот размер гарантированно корректно отображается на устройстве пользователя. Вертикальный размер можно изменить позже.
• Выберите разрешение 72 ppi (пикселя на дюйм) и цветовой моделью RGB. Эти параметры гарантируют корректное отображение веб-страницы.
• Установите цвет фона. Для этого выберите инструмент «Пипетка» и выберите нужный цвет из палитры. Либо выберем цвет фона в шестнадцатеричном формате, например: F7F7C5.
• Включите отображение направляющих и линеек. Для этого выберите пункт меню «Просмотр» – «Направляющие».
• Проверьте, что включена привязка к направляющим и границам документа в пункте меню «Просмотр» – «Привязка к»
• 
• Добавьте на макет текст и изображения, используя инструменты «Текст» и «Формы». Введите название сайта, ниже слоган и вверху справа контактный номер телефона.
• 
• Создайте направляющие, определяющие ширину сайта, справа от контактного номера и слева от логотипа.
• Создайте прямоугольник с закругленными краями инструментом «Формы», обозначающий место для изображения в шапке сайта. Радиус закругления – 8 точек.
• 
• Добавьте изображение в шапку сайта.
• 
• Создайте навигационное меню и заголовок главной страницы. Используйте инструмент «Текст» с соответствующими шрифтами. Рекомендуем шрифт Georgia, входящий в набор стандартных шрифтов Windows. Используйте белый цвет для текста в навигации.
• Опять используйте инструмент «Текст» и добавьте основной текст, применив шрифт Arial и черный цвет. Используйте блочный текст, с которым после будете работать.
• 
• Вставьте изображение в текст страницы, перемещая правую границу текстового блока. Позиция – справа от текста.
• Создайте заключительную линию под текстом страницы инструментом «Формы» – «Прямая».
• Затем, наполните сайт дополнительным контентом, таким как текстовые и графические элементы.
• Добавьте копирайт в подвале страницы инструментом «Текст». Используйте шрифт Arial, черный.
• Нарежьте изображения на фрагменты, которые будут использоваться в верстке. Для этого используйте инструмент «Раскройка». В примере выделили картинки в тексте и шапке.
• 
• Сохраните результаты работы в виде изображений для последующей верстки сайта через меню «Файл» – «Сохранить для Веб». Этот макет в формате PSD также находится в архиве.

Сохранение в этом режиме позволит получить папку images, где находятся все изображения подготовленные для верстки. Остается только выбрать необходимые и переименовать.

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

Важно помнить, что основные элементы макета должны быть расположены удобно для пользователя, чтобы они легко воспринимались на разных устройствах.

Верстка сайта

Создайте новый файл в текстовом редакторе с именем index.html. Это главный файл вашего сайта. К слову, в Notepad++ сразу подсвечивается синтаксис HTML, что облегчает процесс работы и чтения кода.

Начальная строчка содержит всего один тег и выглядит так:

<!DOCTYPE html>

Тег <!DOCTYPE html> указывает на начало HTML-документа и сообщает браузеру, что содержимое файла является HTML-кодом. Вторая строка больше и содержит теги <html> и </html> обозначают начало и конец HTML-документа.

Структурно это выглядит так:

<html>
<head>«Голова» документа</head>
<body>«Тело» документа</body>
</html>

Теги <head> и </head> содержат информацию о документе, такую как заголовок, метаданные и ссылки на стили и скрипты. Они не видны пользователю, так как не отображаются на сайте. Обычно начинаются с конструкции <meta …>.

Теги <title> и </title> определяет заголовок документа. Отображается в заголовке окна браузера и отображаются в результатах поиска. Тег анализируется поисковиками, поэтому необходимо грамотно его составить, чтобы сайт был конкурентоспособным в поисковой выдаче.

Теги <body> и </body> содержат основное содержимое документа. Это содержимое будет отображаться в окне браузера. Чтобы добавить текст на страницу, используйте теги <p> и </p>. Однако, возможности HTML на этом не заканчиваются, так как существуют и другие теги.

Часто использующиеся теги для разметки:

• Вставка изображений – <img>;
• Создание ссылок – <a>;
• Создание блоков – <div>;
• Формирование списков – <ul>, <ol> и <li>.
• Отображение таблиц – <table>, <tr>, <td> и <th>.

Формат отображения элементов на HTML-странице задается двумя способами:

• Непосредственно с использованием тегов;
• С помощью таблиц стилей CSS.

Второй способ является более предпочтительным. Так как позволяет повторно применять стили компонентов. Таблицу стилей (CSS) размещают внутри тега <head> или в отдельном файле (часто это style.css). Вызывается CSS ссылкой из блока <head>.

В данном случае структура содержания сайта выглядит следующим образом:

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

Создание сайта с помощью PHP

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

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

Например, изменяются от запросов пользователей или из базы данных. Для создания динамических страниц используются языки программирования. На стороне сервера используют для Unix-систем PHP, Python или Ruby on Rails и средства.NET для Windows.

Клиентская сторона чаще программируется на JavaScript – занимающим первое место в рейтинге востребованных языков. Установить приложение на сервере, чтобы использовать динамическую страницу, можно также через PHP.

Программирование на PHP позволяет добавить интерактивные элементы и функции на сайт. В архиве найдете папку php, содержащую главный файл сайта index.php. Он позволит запустить тестовый сайт с использованием языка PHP.

PHP – главный язык веб-разработки динамических сайтов и страниц. Фундаментальная разница в том, что динамическая страница формируется на сервере, а затем передается в браузер пользователя. Статическая создается один раз и не меняется при запросах.

Не станем углубляться в теорию программирования на PHP. Рассмотрим на фрагментах кода наглядные примеры использования языка в создании сайтов. Начнем с верхнего и нижнего колонтитула, которые принято называть «шапкой» и «подвалом» сайта.

Для каждого колонтитула создается файл:

• header.php – шапка;
• footer.php – подвал.

Для добавления файлов в код используется оператор include. Обратите внимание на следующий синтаксис:

<?php include('templates/header.php'); // Вставка шапки сайта?>
...
<?php include('templates/footer.php'); // Вставка подвала сайта?>

Теперь откройте сайт из папки php, запустив в браузере файл index.php. Сразу скажем, что ничего не выйдет. Так как браузер не понимает PHP-скрипт, который представляет index.php.

Чтобы использовать PHP-код, необходимо иметь интерпретатор этого языка на веб-сервере. На хостингах обязательно предустановлен интерпретатор. Поэтому не возникает проблем с запуском сайтов с хостинга. Но, что делать нам с сайтом без хостинга?

Ответ очевиден – поднять локальный сервер у себя на компьютере. Пугаться не нужно, с нуля его собирать не придется. Есть готовые бесплатные сборки, которые ставятся в пару кликов и уже содержат веб-сервер, интерпретатор PHP и базу данных MySQL.

Чем пользоваться сегодня:

• Open Server Panel – самая популярная сборка под Windows. Регулярно обновляется, версии PHP и MySQL свежие, переключаются в один клик. Новичкам советуем начинать именно с нее.
• Laragon – более легкая и шустрая альтернатива, тоже под Windows. Сама создает домены для новых проектов, удобна при работе с фреймворками.
• Docker – то, чем пользуются профессионалы. Окружение описывается в конфигурационном файле и одинаково работает в Windows, macOS и Linux. Разбираться дольше, зато в реальной работе вы столкнетесь именно с ним.

Во многих старых инструкциях для этой задачи советуют Denwer. Не тратьте на него время. Сборка давно не обновлялась, версии PHP там древние, и современный код на ней может просто не запуститься.

Итак, сервер установлен. Скопируйте содержимое папки php из нашего архива в рабочий каталог. В Open Server это папка domains: создайте внутри нее директорию с именем сайта, например test1.ru, и положите файлы туда.

Запустите сервер и наберите в браузере test1.ru. Должен открыться уже знакомый макет. Пройдитесь по ссылкам в шапке. Если переходы работают, а шапка с подвалом подставляются на каждой странице, значит, динамический сайт на PHP у вас заработал.

Что лучше, создать сайт с нуля или на конструкторе сайтов?

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

Конструктор устроен иначе. Готовые шаблоны и блоки собираются в готовый сайт без единой строки кода. Запустить проект таким способом можно за пару часов, но вы остаетесь в рамках возможностей платформы.

Конструкторы предоставляют готовые шаблоны и готовые блоки, которые можно использовать для сборки сайта без знания кода и знания языков программирования. Любой из конструкторов позволит создать свой сайт за пару часов. Однако выбор конструктора требует внимательного подхода. Решение за вами!

В таблице ниже собрали главные плюсы и минусы создания вебсайта «с нуля» и с помощью конструкторов:

Какой способ выбрать?

Нет однозначного ответа. Это зависит от ваших целей. Желаете больше свободы и уверены в навыках веб-разработки, то выбирайте создание с нуля. Нет времени или навыков, тогда обратите внимание на конструкторы.

Если ваша цель – создать качественный и современный сайт в кратчайшие сроки, то рекомендуем к использованию конструкторы сайтов!

На что важно обратить внимание при создании сайта

Неважно, какой из путей создания сайта выберите, присутствуют общие нюансы, с которым следует разобраться. Лучше это сделать заранее, чтобы иметь четкое представление о будущем проекте. А также не тратить время на переделку.

Главные моменты в создании веб-сайта:

1. Цели ресурса. Определяя цели сайта, сможете определиться с его содержанием, структурой и дизайном.
2. Целевая аудитория (ЦА). Понимая ЦА, сможете создать сайт, который будет соответствовать их ожиданиям и потребностям.
3. Удобство использования (Usability). Фронтенд должен быть удобным для людей. А панель управления – для владельцев ресурса. Сайт должен быть понятным для поисковых систем, чтобы его можно было продвигать в сети. Навигация, загрузка web-страниц, доступность информации – все это играет свою роль. Недостаточно сделать красивую картинку.
4. Мобильная адаптивность. Больше половины посетителей придут со смартфонов. Поисковики это знают и оценивают сайт в первую очередь по мобильной версии, такой принцип называется mobile-first индексацией. Возьмите за правило смотреть каждую страницу на телефоне до публикации, а не после.
5. Контент. Полезные тексты, которые отвечают на реальные вопросы людей. За ними приходят посетители, по ним же вас оценивают поисковые системы.
6. SEO-оптимизация. Подберите ключевые слова, продумайте заголовки и метатеги, настройте понятные адреса страниц. Без этого сайт останется невидимым для поиска.
7. Безопасность и SSL. Без SSL-сертификата браузер честно напишет посетителю, что ваш сайт небезопасен. После такого заявку вам вряд ли оставят. Базовый сертификат Let's Encrypt бесплатный, его дают почти все хостинги и конструкторы. И не забывайте обновлять CMS с плагинами, ведь устаревшие версии – причина взломов номер один.
8. Скорость загрузки. Поисковики считают ее по метрикам Core Web Vitals. Смотрят, как быстро появляется основной контент, когда страница начинает откликаться на клики и не «скачет» ли верстка при загрузке. Проверить все это бесплатно можно в PageSpeed Insights. У новичков сайт обычно тормозит по двум причинам – тяжелые несжатые картинки и десяток чужих скриптов на странице.
9. Доступность. Нормальный контраст текста, описания к картинкам, возможность ходить по сайту с клавиатуры. Это удобнее для людей с ограничениями и понятнее для поисковых роботов.
10. Аналитика. Ставьте Яндекс Метрику и панели вебмастера сразу, а не через полгода. Пока не накопится статистика, вы не поймете, какие страницы работают, а какие пора переделывать.

Полезные программы для начинающих вебмастеров

Создание сайта с нуля – сложный и трудоемкий процесс, требующий технических навыков и знаний. Облегчат задачу начинающим вебмастерам полезные программы, которые помогут в создании и редактировании исходного кода сайта.

VS Code – бесплатный и самый популярный на сегодня редактор кода. Понимает HTML, CSS, JavaScript, PHP, Python и еще пару десятков языков. Тысячи расширений закрывают почти любую задачу: подсветка синтаксиса, автодополнение, работа с Git, заливка файлов на сервер по FTP. Наш выбор.

Notepad++ – легкий бесплатный текстовый редактор для Windows. Открывает и правит файлы почти любых форматов: HTML, CSS, JavaScript, PHP. Незаменим, когда нужно быстро поправить одну строчку и не хочется запускать тяжелый редактор.

Figma – редактор макетов прямо в браузере, для личных проектов бесплатный. Здесь рисуют дизайн будущего сайта до начала верстки.

FileZilla – бесплатный FTP-клиент, через него готовые файлы заливают на хостинг. Как с ним работать, подробно разберем ниже.

Adobe Dreamweaver – платный визуальный редактор сайтов с предпросмотром результата. Программа старая, поддержка у нее еще есть, но в новых проектах ее почти не встретишь. Бесплатный VS Code вместе с Figma делают то же самое, только гибче и без подписки. Упоминаем Dreamweaver лишь потому, что он до сих пор кочует по старым руководствам.

Новичку хватит двух программ: Figma для макета и VS Code для кода. Обе бесплатные, и оба навыка потом пригодятся в реальной работе за деньги.

Публикация созданного сайта в сети Интернет

Чтобы веб-сайт стал доступным для всех пользователей Интернета, требуется опубликовать сайт на веб-сервере и присвоить ему уникальное “имя”, т.е. зарегистрировать доменное имя. После этого сайт будет доступен через указанный домен(имя).

А пользователи смогут посещать его, вводя это имя в браузере. Также важно, чтобы веб-сервер был настроен на работу с публичным доступом. Иначе пользователи не получат доступ к нему через Интернет.

Что такое «домен» и зачем он нужен

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

Рассмотрим на примере нашего сайта:

• Название веб-сайта – слово, фраза идентифицирующая сайт. К примеру, название ресурса, на котором вы сейчас находитесь «internet-technologies»;
• Доменная зона – часть доменного имени, указывающая на страну или регион, в котором расположен сайт. Снова пример, доменная зона сайта «internet-technologies» – «.ru», означает, что веб-адрес расположен в российском сегменте Интернета.

Домен нужен для того, чтобы пользователи сети могли без труда находить веб-ресурс в интернете. В момент введения пользователем веб-адреса в строку браузера, сервер DNS преобразует его в IP-адрес – уникальный идентификатор сервера, где размещен сайт.

Домены бывают разных уровней. Домен второго уровня – это веб-адрес без поддоменов. Домен третьего уровня (поддомен) – находится под доменом второго уровня.

Рассмотрим пример:

• Домен второго уровня – internet-technologies.ru;
• Домен третьего уровня – forum.internet-technologies.ru.

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

Например, «.ru» популярна в русскоязычном сегменте интернета, «.biz» часто используется для бизнес-сайтов, а «.com» – для коммерческих проектов. Приведем примеры распространенных зон:

• .ru – зона популярна в Рунете;
• .рф – официальная доменная зона РФ;
• .com – универсальная зона, использоваться для любых сайтов, но чаще для коммерческих проектов;
• .net – часто используется для сайтов, тематически связанных с Интернетом;
• .org – доменная зона, которая часто используется для некоммерческих организаций;
• .info – обычно используется для информационных сайтов;
• .biz – бизнес-тематика.

Внимание! Не рекомендуем использовать домены в зоне.рф. Так как домены обладают рядом недостатков, которые затрудняют их поисковое продвижение в Интернете.

Если целевая аудитория находится в России или планируете продвигать ресурс в Рунете, то выбирайте домен в зоне «.ru».

Как выбрать домен

При выборе домена для сайта учитывайте факторы:

• Оригинальность и легкость запоминания. Доменное имя должно быть легко запоминающимся и произносимым, чтобы пользователи могли легко найти сайт.
• Длина имени. Оптимальная длина доменного имени – 12 символов или меньше. Более длинные имена сложнее запомнить и набрать.
• Набор на латинице. Большинство пользователей Интернета используют латиницу. Поэтому лучше выбрать доменное имя, которое можно легко набрать на латинице.
• Отсутствие знака «тире». Знак «тире» в доменном имени может затруднять его запоминание и произношение. Требование не обязательное.
• Чистота истории домена. Перед регистрацией домена рекомендуется проверить его историю на предмет каких-либо санкций со стороны поисковых систем. Это можно сделать с помощью сервиса «whois history».

Где можно купить домен?

Чтобы не прогадать, мы рекомендуем обратиться к надежному и давно зарекомендовавшему себя регистратору доменных имен – WebNames. Мы сами пользуемся их услугами.

Сайт этого регистратора домена предоставляет возможность онлайн-подбора имени (домена). Это довольно просто: введите желаемое название в соответствующее поле и нажмите кнопку «Искать домен».

Что такое «хостинг»

Хостинг – услуга по размещению веб-сайта на сервере. Сервер – мощный компьютер, который постоянно подключен к мировой сети. Сервер обеспечивает хранение файловой системы ресурса и обработку файлов запросами пользователей. Без хостинга веб-ресурс не будет доступен в Интернете.

При вводе пользователем адреса сайта в строку браузера, запрос через службу DNS направляется на сервер хостинга. Затем сервер находит нужный файл и передает его обратно пользователю. Компании предоставляющие услуги хостинга называют «Хостерами».

Также встречается название «хостинг-провайдер». Хоть сайты и являются нематериальными объектами, состоящими из двоичного кода, все файлы физически хранятся на жестких или SSD дисках серверов. Сами сервера принадлежат хостерам.

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

Стоимость хостинга зависит от следующих факторов:

• Объем места на сервере, который требуется для хранения файлов сайта;
• Количество трафика, которое сайт будет генерировать;
• Дополнительные услуги, которые предоставляет хостинг-провайдер.

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

Как выбрать хостинг

Выбор хостинга – важный этап создания сайта. От него зависит стабильность работы сайта, его скорость, удобство управления и доступность технической поддержки.

Воспользуйтесь следующими рекомендациями:

• Стабильность работы. Хостинг должен работать без перебоев 24/7, чтобы сайт был доступен посетителям в любое время. Оцените показатели uptime и времени отклика сайта. Uptime – показывает, сколько времени в течение месяца сайт был доступен. Хороший показатель uptime – 99,9% и выше. Время отклика – это время, за которое сайт отвечает на запрос пользователя. Чем меньше, тем лучше.
• Простота и удобство использования. Личный кабинет и панель управления должны быть понятными и легкодоступными. Важно видеть текущий баланс и иметь быстрый доступ ко всем основным функциям хостинга.
• Качественная техподдержка. В случае возникновения проблем с сайтом важно иметь возможность обратиться за помощью к квалифицированной техподдержке. Техподдержка должна быть доступна круглосуточно. Обращайте внимание на наличие русскоязычной службы поддержки у хостинг-провайдера.
• Цена услуги. Стоимость хостинга зависит от объема предоставляемых ресурсов и дополнительных функций. Важно учесть, что цена имеет значение как для новичков с ограниченным бюджетом, так и для владельцев крупных проектов, где требуется дорогостоящий хостинг.

Мы рекомендуем обратить внимание на следующие хостинг-провайдеров:

• Beget – надежный и проверенный временем хостинг-провайдер, предлагающий широкий выбор тарифов для начинающих и продвинутых вебмастеров;
• FastVPS – высокопроизводительный хостинг для требовательных проектов.

Размещение готового сайта на сервере

Размещение готового сайта на сервере – последний этап создания сайта. От того, насколько правильно это сделаете, зависит, будет ли сайт доступен пользователям в Интернете.

Приступим к размещению после того как создали сайт, приобрели домен и приобрели хостинг. Рассмотрим два способа размещения сайта на сервере. Выбор метода зависит от предпочтений.

Загрузка файлов на хостинг посредством:

• Панели управления хостинга;
• FTP-клиента.

Первый способ прост в использовании, но медленный, особенно если сайт большой. Для размещения сайта через панель управления вам понадобится знать IP-адрес сервера, логин и пароль для входа. Это выдается хостинг-провайдером.

Второй способ более быстрый и гибкий. Но требует определенных навыков работы с FTP. Для размещения сайта через FTP-клиент понадобится скачать и установить FTP-клиент, например, FileZilla.

Алгоритм размещения сайта через FTP-клиент:

1. Загрузите и установите FileZilla;
2. Запустите FTP-клиент и введите данные для подключения к серверу хостера: IP-адрес, логин и пароль;
3. В левой панели FileZilla увидите список каталогов на сервере;
4. Перейдите в каталог, в котором хотите разместить сайт;
5. В правой панели клиента увидите список файлов на вашем компьютере;
6. Выделите все файлы сайта и нажмите кнопку «Загрузить»;
7. Дождитесь завершения процесса загрузки.

После того как сайт будет размещен на сервере, сможете открыть его в браузере по его доменному имени. Теперь ваш сайт стал доступен всем пользователям Интернета. Если имеется база данных, сначала выполните импорт базы данных.

Ответы на вопросы

Какой способ выбрать: коротко

Мы разобрали четыре пути. Осталось понять, какой из них ваш.

• Сайт нужен вчера, текстов и картинок нет. Берите ИИ-конструктор. Черновик получите за несколько минут, а дальше вычитаете тексты и поправите блоки руками.
• Важно, как проект выглядит, и есть пара свободных вечеров. Собирайте в конструкторе. Tilda даст больше всего свободы в дизайне, uKit и Nethouse – быстрые отраслевые заготовки для малого бизнеса.
• Планируете расти: каталог, блог, сотни страниц. Ставьте CMS. WordPress закроет большинство задач, а для интернет-магазина в России логичнее взять «1С-Битрикс» с интеграцией с 1С.
• Хотите профессию, а не просто сайт. Тогда только код: Figma для макета, VS Code для верстки, локальный сервер для PHP. Дороже по времени, зато за эти навыки платят.

Что бы вы ни выбрали, минимум перед запуском один и тот же: свой домен, SSL-сертификат, проверенная на телефоне мобильная версия и подключенная аналитика. Остальное спокойно допиливается уже на живом сайте.

Совет от нашей редакции: начинайте с самого простого варианта, который решает вашу задачу сегодня. Переехать с конструктора на CMS вы всегда успеете. А вот полгода полировать проект и так и не запустить его – самая частая ошибка новичков.

Следующий шаг после запуска – продвижение. Каким бы хорошим ни был сайт, без посетителей он не работает. Мы подробно разобрали это в руководстве по самостоятельному продвижению сайта. А о том, как отбить вложения, читайте в статье про заработок на собственном сайте.

Может быть, у вас есть какие-то вопросы по созданию сайтов? Задайте их в комментариях, и мы постараемся вам помочь!

Алексей Дружаевэксперт-основатель