Как создать простой 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-рассылки и т.п.
Организовать динамические элементы на статическом сайте можно несколькими способами:
- Натянуть HTML-макет на CMS-систему (чтобы задействовать её механизмы обработки форм).
- Написать PHP-скрипт, который будет обрабатывать формы сайта (нужен специальный хостинг и навыки программирования).
- Написать JS-скрипт, который будет задействовать серверные библиотеки для отправки почты (тоже нужны навыки программирования и поддержка тех самых библиотек на хостинге).
- Использовать виджеты сторонних сервисов.
Примеры реализаций таких сервисов:
- Как сделать онлайн-калькуляторы и формы для сайта (с помощью uCalc)
- Виджеты онлайн-консультантов
- Всплывающие окна
- Проведение онлайн-опросов
- Сервисы email-рассылок (со встроенными конструкторами форм подписок)
Как скачать HTML-версию сайта, собранную в конструкторе или CMS?
Выше мы упомянули, что любой сайт, даже если он динамический, можно сохранить в виде HTML-страниц.
Делается это очень просто – прямо в браузере. На примере Google Chrome:
- Откройте нужную страницу сайта.
- В меню браузера найдите пункт «Сохранить и поделиться».
- В выпадающем списке нажмите пункт «Сохранить страницу как…» (а можно сразу нажать комбинацию Ctrl+S).
- Выберите папку и при необходимости переименуйте файл (не забудьте проверить тип сохранения – веб-страница полностью).
- Готово. Браузер выгрузит страницу в виде HTML-файла, а рядом создаст одноимённую папку и в ней сохранит все связанные файлы и скрипты (изображения, иконки, CSS-таблицы, JS-скрипты).
Обратите внимание, часть CSS-таблиц и JS-скриптов может по-прежнему оставаться на внешних источниках (они будут прописаны внутри кода и браузер это никак не может исправить).
Единственная сложность – когда нужно сохранить сразу все страницы с выбранного сайта.
Но и эта задача решаема, для этого существуют специальные оффлайн-браузеры (часть из них распространяется платно, некоторые представители могут морально устареть, так как современный web сильно поменялся).
Потенциальные проблемы копирования HTML
Всегда возникает второй вопрос – какова цель таких действий?
Во-первых, можно столкнуться с юридическими ограничениями: воровать дизайн и контент нельзя, даже если они технически ваши (например, вы создали их в онлайн-конструкторе, но отказались платить подписку).
Во-вторых, сайт и его содержимое, включая HTML-код, это интеллектуальная собственность. Правообладатели могут подать на вас в суд.
В-третьих, если вам понравился дизайн конкурентов, и вы хотите использовать его на своём сайте, то как минимум дизайн получится неуникальным и из-за этого могут наложиться санкции от поисковых систем (особенно, если сайт был скопирован вместе с контентом).
Выводы и рекомендации
Динамические сайты придумали не просто так, чем больше на сайте становится страниц, тем актуальнее вопросы обновления ссылок и индексов, поиска, фильтрации, обработки форм ввода, и т.п.
Статические HTML-сайты потребляют минимум ресурсов сервера, но они совершенно нефункциональные. Максимум, это могут быть онлайн-визитки. Добавить интерактивные функции к ним можно за счёт натяжки HTML-шаблонов на CMS-системы (движки) или на фреймворки, а также за счёт написания своих скриптов или интеграции профильных сервисов.
Гораздо проще сразу собирать свой сайт в онлайн-конструкторах, тогда интерактивные функции и виджеты будут в комплекте.
Создание сайтов в блокноте – это что-то из области фантастики, особенно без опыта и профильных знаний. Максимум для чего понадобится блокнот – отредактировать имеющийся HTML-код ну или обучиться основам HTML-вёрстки (разобраться что и как работает).
- Автор: Дмитрий Луценко
Источник: uguide.ru