Как создать простой HTML сайт в блокноте

Если так разобраться, то все сайты в сети – это набор HTML-страниц. Даже если сайт полностью написан на JavaScript и поддерживает режим PWA-приложения. В конечном счёте любой динамический код из любого языка web-программирования выполняется и преобразуется в HTML-код, который в свою очередь отрисовывается в браузере.

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

Способ создания Особенности Лучшие инструменты Онлайн-конструкторы

• Всё в одном: хостинг, поддержка, редактор контента
• Оплата по мере использования
• Не нужны профильные знания и навыки

Рейтинг онлайн-конструкторов CMS-системы

• Идеальный вариант для многостраничных сайтов
• Контроль данных, можно менять и апгрейдить хостинг
• Нужны базовые знания HTML, CSS, JavaScript

Рейтинг CMS-систем Офлайн-конструкторы и программы

• Разработка в точном соответствии с ТЗ и требованиями
• Полный контроль данных
• Максимальное погружение в код

Список программ для создания сайтов

Способов создания современных сайтов огромное множество. Это и готовые движки, и CMS-системы, и фреймворки, и CMF-системы, и конструкторы web-приложений, и даже полное написание кода с нуля (обратите внимание, не только на HTML, но и с использованием разных языков программирования: PHP, Python, Ruby и пр.).

Чем сложнее сайт, тем он технологичнее. Даже в простейших лендингах подтягивается несколько библиотек и скриптов, которые отвечают за разные задачи: аналитика, обработка форм, онлайн-чаты, отрисовка иконок, обеспечение адаптивной вёрстки (как Bootstrap) и т.п.

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

Что такое HTML-сайт

HTML-сайт – это сайт, который использует HTML-разметку. Условно под это описание попадают буквально все сайты в сети Интернет, так как любые языки веб-программирования в конечном счёте формируют HTML-код и выводят в нём разные данные.

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

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

HTML-код легко прочитать и отредактировать, для этого достаточно открыть HTML-файл в любом текстовом редакторе.

Чтобы увидеть HTML-код этой страницы, нажмите на ней правой кнопкой мыши выберите пункт «Просмотр кода страницы». Вместо этого можно нажать Ctrl+U (это актуально в первую очередь для браузера Google Chrome).

Что удивительно, даже в статичных HTML-сайтах может быть подгружаемый код. Например, это могут быть скрипты и библиотеки, хранящиеся на удалённых серверах. При отработке в браузере такой код может исполняться, если устройство имеет выход в сеть (а сайт, на котором хранится скрипт/библиотека, будет в свою очередь доступен).

Чем отличаются статические и динамические сайты?

• Статические HTML-страницы работают на любом хостинге. Их достаточно расположить в определённом каталоге web-сервера и обратиться к ним напрямую. Браузер обязательно их обработает и покажет в удобочитаемом виде.
• Динамические сайты работают с использованием баз данных и языков программирования. Они сначала обрабатываются сервером, в разным местах шаблона подтягиваются разные текстовки и информация (из таблиц), и только потом результирующий HTML-код отдаётся браузеру.
• Если миновать шаг обработки скриптов, написанных на языке программирования, то вместо страницы вы увидите кашу из функций, тегов и текста. Ну или просто ошибку о недоступной странице.

Исключение – сайты, написанные на JavaScript (о них расскажем ниже).

Почему современные HTML-сайты не работают без CSS и JavaScript?

Ранее мы уже описывали основные HTML-теги – таблица HTML-тегов с примерами. Простейший пример заголовка:

<H2>Здесь текст заголовка</H2>

Тег h2 говорит браузеру, что текст между открывающим и закрывающим элементом нужно показать как заголовок второго уровня. Теги не всегда могут закрываться и открываться. Например, тег <BR>, который отвечает за перекат строки, всегда одиночный.

Теперь предположим, что нам нужно раскрасить заголовок и определить для него шрифт.

С этими задачами лучше всего справляются CSS-стили.

Вот так будет выглядеть декорирование заголовка (красный цвет, высота 20 пикселей и шрифт Verdana):

<H2 style="color: red; font-size: 20px; font-family: Verdana;”>Здесь текст заголовка</H2>

Мы прописали стили прямо внутри тега.

Но что, если нам нужно декорировать все заголовки страницы? Достаточно прописать стили прямо в HTML-файле (после открывающего тега <HEAD> или перед закрывающим </HEAD>):

  <style>  H2 {  color: red;  font-size: 20px;  font-family: Verdana;  }  </style> 

Все теги H2 на странице будут оформлены однообразно.

А если нам нужен единый стиль на всех страницах? Логично вынести все стили в один файл и подключать его на всех страницах.

  <link rel="stylesheet" href="css/style.css"> 

(внутри файла нужно поместить стили, показанные выше)

А если нам одни заголовки нужны красным, а другие синим? Без проблем, описываете правила декорирования на уровне CSS-классов. Стили классов выносите в файл, а на уровне HTML-тега просто даёте ссылку на класс.

<H2 class="red-header”>Здесь текст красного заголовка</H2>

В CSS-файле:

  .red-header {  color: red;  } 

Вроде просто. Но как такое же сделать без CSS-стилей? Если честно, то никак, у HTML-языка синтаксис достаточно скудный.

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

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

За это уже отвечает код, исполняемый непосредственно в браузере. Такой код пишется на языке JavaScript.

Пример JS-кода, который меняет цвет фона контейнера:

  <div id="block-color">Какой-то блок</div>  <button onclick="changeYourColor()">Сделать блок красным</button>  <script>  function changeYourColor() {  document.getElementById('block-color').style.backgroundColor = 'red';  }  </script> 

Сейчас на JavaScript создаются целые сайты. Так как код выносится в статичные файлы и исполняется уже по факту в браузере, то их можно выгрузить на CDN-серверы и существенно снизить нагрузку на свою инфраструктуру (чтобы сократить число запросов к базам данных). Круто же? Если вдруг ваш сайт обрастёт многомиллионной аудиторией, вы сюда вернётесь и всё перечитаете.

Но даже на небольших сайтах JavaScript выполняет массу полезных функций: проверяет ввод в формах, отправляет данные (например, для сбора заявок) или ротирует слайдеры.

Способы создания HTML-сайтов

Ниже опишем наиболее адекватные варианты создания современных сайтов.

Использование движков (CMS-систем)

CMS-системы нужны для того, чтобы в HTML-макетах можно было выводить куски динамического контента.

Простой пример – запись блога:

• Шапка, футер и сайдбар могут оставаться статичными.
• Менять можно только текст записи.
• Текст записи хранится в базе данных.
• Движок определяет по URL-адресу индекс материала, который нужно показать пользователю.
• Он берёт HTML-шаблон, вставляет в него содержимое записи из БД и отдаёт браузеру.
• Готово.

На основе всего одного шаблона можно показать любое количество материалов блога (лишь бы их содержимое было в базе данных).

Как выглядит создание сайта на базе CMS:

• Дизайнер отрисовывает макет всех основных (типовых) страниц, которые умеет выводить CMS-система. Например, запись блога, страница товара, страница поиска и т.п.
• На основе дизайна создаются HTML-макеты.
• Затем HTML-макеты подключаются к шаблонизатору CMS-системы (иногда страницы могут нарезаться на отдельные блоки или элементы, чтобы локализовать вывод динамического контента).
• CMS устанавливается на сервер.
• Администратор наполняет базу данных (структура меню, посты, товары и прочий контент).
• CMS отдаёт страницы пользователям.

Если интересуют технические детали…

Многие популярные CMS-системы, представляют собой так называемый «монолит». Это значит, что вся обработка страниц происходит внутри сервера и по результатам браузеру отдаётся HTML-код. Отдельные участки кода могут работать с Ajax (JavaScript) это когда виджеты или блоки перерисовываются в браузере на основе триггеров или действий пользователя без перезагрузки всей страницы. Получается, что классические CMS – это конструкторы, собирающие результирующий HTML-код.

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

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

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

Использование онлайн-конструкторов

Онлайн-конструкторы – это революция в отрасли сайтостроения. Если для запуска сайта на базе CMS вам потребуется хостинг, домен, а также глубокие технические знания (для установки и настройки движка), то в случае с SaaS-решениями вы получаете всё в готовом виде (под ключ). В подписку уже будет входить всё необходимое, вплоть до техподдержки и визуального редактора, в котором можно создавать и наполнять страницы.

Механизм создания сайтов здесь максимально простой:

• Регистрируется учётная запись.
• Оплачивается подписка/тариф.
• Выбирается стартовая тема (некоторые платформы все шаблоны предоставляют бесплатно, а некоторые предлагают покупку премиум-тем).
• Подключается домен (хотя можно воспользоваться и бесплатным техническим).
• Сайт наполняется контентом.

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

Из минусов только то, что мало какие облачные конструкторы разрешают забирать сайт на свой хостинг. Исключения:

• uCoz (здесь есть система бэкапа, на основе которой легко организовать миграцию в CMS-систему),
• 1C-UMI и некоторые аналогичные платформы (здесь есть возможность покупки лицензии коробочной CMS с переносом данных на ваш сервер).

Обратите внимание, многие облачные конструкторы рассчитаны на обслуживание малостраничных проектов. Приятное исключение – uCoz (и его полная копия uWeb), здесь можно создавать блоги, форумы, доски объявлений, масштабные интернет-магазины.

Использование IDE (сред разработки) и профессиональных программ

Если попытаться собрать современный сайт с нуля, то можно быстро разочароваться. Даже элементарные посадочные страницы содержат около 1-2 тыс. строк кода (в символах это несколько десятков тысяч).

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

К числу профессиональных инструментов можно отнести:

• IDE-системы.
• Библиотеки и сниппеты (коллекции готовых блоков кода для типовых задач).
• Системы отладки и тестирования.
• Парсеры (а к ним ещё и прокси-серверы).
• Сервисы прототипирования интерфейсов.
• Таск-трекеры.
• Редакторы кода (с подсветкой синтаксиса, с автоподстановкой, отладкой и пр.).
• Хранилища кода.
• Конструкторы интерфейсов (как Quarkly).
• Фреймворки или CMF-системы.

Реже могут использоваться No-Code-конструкторы сайтов и оффлайн-конструкторы. Дело в том, что в таких программах ограничена свобода действий.

Оффлайн-конструкторы, как Mobirise или WebsiteX5, рассчитаны либо на работу в поток (для быстрой вёрстки типовых малостраничных сайтов клиентам), либо на личное использование (чтобы сделать лендинг или визитку для себя, но цены при этом получаются неоправданно высокими).

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

Обратите внимание, с помощью профессионального ПО как раз и разрабатываются шаблоны для CMS-систем, чтобы потом конечным пользователям, далёким от дизайна, было проще наполнять сайты.

Создание простых сайтов в блокноте

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

Реже можно найти качественные бесплатные макеты (наш список HTML-шаблонов).

Самый неправильный путь – скопировать/скачать HTML-код конкурентов. Это чревато юридическими исками и другими неприятными последствиями.

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

HTML-сайты пользовались широкой популярностью в 90-х и 2000-х годах. Просто потому, что особых альтернатив-то и не было.

Вёрстка в HTML бывает табличной (table – устаревший стандарт) и блочной (div – именно её сейчас используют в адаптивных шаблонах).

Небольшой ликбез.

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

Мы не ставим своей целью обучить вас синтаксису языков – если нужно, то без труда сможете найти сотни уроков и справочников по ним в Сети. Покажем основу – как сделать простой HTML-сайт в блокноте. Что называется, для примера и понимания масштабов бедствия. Заодно сможете понять – нужно оно вам или нет

Шаг 1 – создание страницы формата HTML

Откройте стандартный блокнот для Windows (или любой другой текстовый редактор – Notepad++, Sublime Text – неважно), измените кодировку с ANSI на UTF-8 (для правильного отображения русских букв в браузере), откройте меню «Файл», выберите «Сохранить как», укажите название файла (желательно латиницей) и измените расширение с txt на html (оно идёт после точки), после чего сохраните изменения.

Шаг 2 – добавляем разметку веб-страницы

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

  <!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">  <title>Топовый сайт новичка</title>  </head>  <body>  <h1>Это тег заголовка первого уровня для содержимого страницы</h1>  <p>Первый абзац</p>  <p>Второй абзац</p>  <p>Третий абзац и т. д.</p>  </body>  </html> 

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

Шаг 3 – работаем со стилями CSS

Допустим, вы добавили какой-то текст в параграфы, теперь нужно придать им стилистику – выбрать шрифты, фон, отступы, ширину области страницы и т. д. Это может выглядеть вот так:

  body {  background: #F2F2F2;  max-width: 900px;  margin: 10px auto;  padding: 30px;  }    h1{  color: #4C4C4C;  padding-bottom: 20px;  margin-bottom: 20px;  border-bottom: 2px solid #BEBEBE;  }  p{  font:italic;  } 

В примере вы видите цвет фона (background) и значение этого атрибута (#F2F2F2), ширину страницы (900 пикселей), отступы, цвет заголовка, отступы от основного текста и границ страницы (padding и margin), а также цветную границу нижней части сайта в 2 пикселя (border-bottom). Вся страница в сборе с разметкой, контентом и стилями будет выглядеть так:

  <!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">  <title>Топовый сайт новичка</title>  <style>  body {  background: #F2F2F2;  max-width: 900px;  margin: 10px auto;  padding: 30px;  }  h1{  color: #4C4C4C;  padding-bottom: 20px;  margin-bottom: 20px;  border-bottom: 2px solid #BEBEBE;  }  p{  font:italic;  }  </style>  </head>  <body>  <h1>Это тег заголовка первого уровня для содержимого страницы</h1>  <p>Первый абзац</p>  <p>Второй абзац</p>  <p>Третий абзац и т. д.</p>  </body>  </html> 

Как видите, свойства CSS мы добавили между тегами <style></style>. После завершения всех операций сохраните результат. Теперь, если вы попытаетесь открыть полученную страницу в браузере, то она будет выглядеть, как на скрине ниже. Поздравляем, вы создали свой первый простенький сайт в блокноте.

Шаг 4 – загрузка сайта на хостинг

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

Лучший способ создания HTML сайта

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

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

Максимум подробностей в материале Сколько стоит сайт.

А ещё всё будет зависеть от типа сайта и стоящих перед ним задач.

Наши рекомендации:

• Если нужен небольшой сайт для бизнеса (лендинг, визитка, мини-магазин, портфолио, каталог услуг и т.п.) – выбирайте облачные конструкторы. Здесь есть масса готовых тем, не нужно думать о техническом сопровождении или о настройке хостинга. Достаточно его наполнить и время от времени актуализировать – всё это можно делать своими силами. Экономия будет ощутимой, так как не нужно задействовать труд программистов.
• Если вы впервые делаете интернет-магазин (без опыта и предметных знаний) – тоже начинайте с облачных платформ. Получается модель MVP (минимальный работоспособный продукт). Можно быстро и беспроблемно запуститься, протестировать спрос/нишу, откупиться малыми расходами. Если бизнес пойдёт, то расходы на инфраструктуру быстро окупятся.
• Если опыт набран и магазин сильно разросся – логично переехать на свой хостинг. Но нужно детально посчитать силы на внедрение и обслуживание движка. В определённый момент может оказаться, что проще нанять собственный отдел разработки.
• Если нужно сделать блог или информационный сайт, то тут может быть два пути. Первый – сразу в облаке, но можно упереться в лимиты платформы (нужно считать). Второй – сразу на базе CMS-системы (но тут всё равно будут крупные разовые вложения, даже если движок будет бесплатным).
• Если у вас серьёзный бизнес-проект, то нужно вкладываться в полноценную разработку. Архитектура должна соответствовать масштабам и бюджетам. Самый адекватный вариант – задействовать фреймворки.
• Статические HTML-сайты подходят только для создания простых визиток и лендингов.

Что делать с динамическими элементами?

Предположим, что вы создали статичный HTML-сайт. Но остаётся одна очень важная проблема – как собирать обратную связь от клиентов? Сюда можно отнести приём заявок, переписку в чате с консультантом, оформление подписок на email-рассылки и т.п.

Организовать динамические элементы на статическом сайте можно несколькими способами:

1. Натянуть HTML-макет на CMS-систему (чтобы задействовать её механизмы обработки форм).
2. Написать PHP-скрипт, который будет обрабатывать формы сайта (нужен специальный хостинг и навыки программирования).
3. Написать JS-скрипт, который будет задействовать серверные библиотеки для отправки почты (тоже нужны навыки программирования и поддержка тех самых библиотек на хостинге).
4. Использовать виджеты сторонних сервисов.

Примеры реализаций таких сервисов:

• Как сделать онлайн-калькуляторы и формы для сайта (с помощью uCalc)
• Виджеты онлайн-консультантов
• Всплывающие окна
• Проведение онлайн-опросов
• Сервисы email-рассылок (со встроенными конструкторами форм подписок)

Как скачать HTML-версию сайта, собранную в конструкторе или CMS?

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

Делается это очень просто – прямо в браузере. На примере Google Chrome:

• Откройте нужную страницу сайта.
• В меню браузера найдите пункт «Сохранить и поделиться».
• В выпадающем списке нажмите пункт «Сохранить страницу как…» (а можно сразу нажать комбинацию Ctrl+S).
• Выберите папку и при необходимости переименуйте файл (не забудьте проверить тип сохранения – веб-страница полностью).
• Готово. Браузер выгрузит страницу в виде HTML-файла, а рядом создаст одноимённую папку и в ней сохранит все связанные файлы и скрипты (изображения, иконки, CSS-таблицы, JS-скрипты).

Обратите внимание, часть CSS-таблиц и JS-скриптов может по-прежнему оставаться на внешних источниках (они будут прописаны внутри кода и браузер это никак не может исправить).

Единственная сложность – когда нужно сохранить сразу все страницы с выбранного сайта.

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

Потенциальные проблемы копирования HTML

Всегда возникает второй вопрос – какова цель таких действий?

Во-первых, можно столкнуться с юридическими ограничениями: воровать дизайн и контент нельзя, даже если они технически ваши (например, вы создали их в онлайн-конструкторе, но отказались платить подписку).

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

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

Выводы и рекомендации

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

Статические HTML-сайты потребляют минимум ресурсов сервера, но они совершенно нефункциональные. Максимум, это могут быть онлайн-визитки. Добавить интерактивные функции к ним можно за счёт натяжки HTML-шаблонов на CMS-системы (движки) или на фреймворки, а также за счёт написания своих скриптов или интеграции профильных сервисов.

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

Создание сайтов в блокноте – это что-то из области фантастики, особенно без опыта и профильных знаний. Максимум для чего понадобится блокнот – отредактировать имеющийся HTML-код ну или обучиться основам HTML-вёрстки (разобраться что и как работает).

• Автор: Дмитрий Луценко

Источник: uguide.ru