HTML Редакторы кода и IDE

Если долго выбирать редактор кода, с помощью которого начать писать код,
то настанет время, когда этот код уже никому не будет нужен!..
Админ сайта "W3Schools на русском"

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

Писать HTML, используя стандартные программы Блокнот или TextEdit

Писать HTML код можно, используя стандартные программы Блокнот (на Windows) и TextEdit (на MacOS). Но сейчас существует довольно большое количество разных профессиональных редакторов кода, с помощью которых можно писать HTML-код. Хотя для изучения языка HTML рекомендуется сначала писать код как-раз с помощью простых текстовых редакторов - стандартных Блокнота или TextEdit. А научившись писать простий HTML код, потом перейти к более профессиональных редакторов или IDE.

Выполните четыре шага ниже, чтобы создать свою первую веб-страницу с помощью Блокнота или TextEdit.

Шаг 1: Открыть Блокнот (на Windows)

Windows 8 или более поздние версии:

Откройте начальное меню (символ окна слева внизу на экране). Выберите программу Блокнот.

Windows 7 или более ранние версии:

Нажмите меню Пуск > Программы > Стандартные > Блокнот

Шаг 1. Откройте TextEdit (Mac)

Откройте Finder > Программы > TextEdit.

Также измените некоторые настройки, чтобы программа могла правильно сохранять файлы. В меню Параметры > Формат выберите "Обычный текст".

Потом в разделе "Открыть и сохранить" установите флажок "Отображать HTML-файлы как HTML-код вместо форматированного текста".

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

Шаг 2. Напишите HTML код

Перепишите или скопируйте данный HTML-код в Блокнот:

Шаг 3: Сохраните HTML страницу

Сохраните файл на вашем компьютере. Выберите Файл > Сохранить как в меню Блокнота.

Дайте имя файлу "index.html" и установите кодировку UTF-8 (которая является наилучшим вариантом кодирования для HTML файлов).

Шаг 4. Откройте и просмотрите созданную HTML-страницу в браузере

Откройте сохранённый HTML файл в браузере (дважды кликните файл или нажмите правой кнопкой мыши - и выберите "Открыть с помощью").

Результат отображения получится примерно такой:

W3Schools Онлайн-редактор

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

Нажмите на кнопку "Попробуйте сами", чтобы увидеть, как она работает.

Также, если хотите, вы можете изменить тему онлайн-редактора - со светлой на темную (и наоборот), кликнув в панели меню соответствующий значок.

Бесплатные онлайн-редакторы кода

С помощью каких программ-редакторов пишут код профессиональные веб-программисты и веб-верстальщики?

Какие редакторы кода используют профессиональные разработчики?

• Редактор Notepad ++
• Редактор Brackets
• Редактор Sublime Text
• IDE Atom
• IDE Visual Studio Code
• IDE WebStorm / PHPStorm
• IDE Dreamweaver
• IDE Eclipse
• IDE NetBeans
• IDE Komodo
• IDE Emacs
• IDE Ultraedit
• IDE Xcode (для Apple)
• IDE Arduino

Сейчас существует достаточно много разных редакторов HTML-кода. Еще каких-то 12-16 лет назад многих нынешних самых популярных HTML-редакторов даже не существовало. Многие из бывших начинающих веб-разработчиков и веб-верстальщиков начинали писать свои первые веб-страницы с помощью стандартной программы на Windows - Блокнота. Но сейчас, конечно же, никто с помощью Блокнота HTML-код уже не пишет (почти никто!). Для этого существуют другие более удобные редакторы кода с подсветкой синтаксиса и разными дополнительными функциями, облегчающими написание кода.

Редактор Notepad++ (бесплатный)

Первым HTML-редактором, ранее используемым после стандартного Блокнота Windows часто становился Notepad++. Это свободный текстовый редактор с открытым исходным кодом для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Поддерживает открытие более 100 форматов. Базовая функциональность приложения может быть расширена как за счет плагинов, так и посторонних модулей, таких как компиляторы и препроцессоры. Именно с помощью Notepad++ можно начинать писать свои первые веб-страницы любым новичкам. Именно Notepad++ рекомендовали использовать в украинских общеобразовательных школах при изучении основ веб-разработки, в частности, при написании HTML-кода и создании простых статических веб-страниц. Программа небольшая, достаточно удобная, имеет также и русскоязычный интерфейс, её можно скачать бесплатно с официального сайта. Есть портативный вариант (portable) программы, не требующий установки. Её достаточно загрузить и распаковать в любую директорию на жестком диске вашего компьютера и пользоваться.

Редактор Brackets (бесплатный, разработка прекращена)

Второй редактор HTML-кода - Brackets от компании Adobe - также бесплатный редактор с открытым кодом для веб-разработчиков. Brackets ориентирован на работу с HTML, CSS и JavaScript. Эти же технологии лежат в основе самого редактора, обеспечивающего его кроссплатформенность, то есть совместимость с операционными системами Mac, Windows и Linux. Большую функциональность этому редактору дают множество приложений (плагинов), что добавляет необходимые инструменты для работы с кодом. Имеется встроенная поддержка препроцессоров LESS и SCSS. Скачать Brackets можно с официального сайта.

В настоящее время разработка данного редактора ПРЕКРАЩЕНА! Существует альтернатива редактору Brackets: Редактор кода Phoenix.

Редактор SublimeText (условно-бесплатный)

Ещё один замечательный редактор HTML - это SublimeText. Программа условно-бесплатная. Её можно скачать с официального сайта и пользоваться абсолютно бесплатно. Единственное неудобство в этом случае – это периодическое появление сообщения о необходимости приобрести программу. Также на официальном сайте SublimeText есть только англоязычная версия программы. Но в Интернете легко можно найти и скачать пакеты с переводом на украинский/русский язык и, следуя рекомендациям, самостоятельно их установить в SublimeText. В целом это HTML редактор достаточно быстр, прост и удобен в использовании, но всё-таки рекомендуется для более опытных пользователей и верстальщиков сайтов, так как для увеличения функциональности в SublimeText необходимо дополнительно до-установить некоторые приложения - плагины, которых существует достаточно большое количество. Но именно плагины и дают все те удобства и возможности для этого редактора HTML-кода.

Редактор Atom (бесплатный, разработка прекращена)

Следующий редактор HTML-кода, и он же интегрированная среда разработки – это Atom. Редактор Атом от команды GitHub предоставляет средства для кросс-платформенного редактирования кода, имеет интеллектуальную систему автодобавления ввода и многое другое. Есть большое количество дополнений и у этого редактора. На платформе Atom построена среда разработки Visual Studio Code от компании Microsoft и Nuclide от Facebook.

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

На декабрь 2022 года командой GitHub приостановлена разработка редактора Atom. Проект заархивирован. Можно использовать архивную версию редактора: скачать архив из GitHub. Аналог редактора Atom - редактор Pulsar, современный редактор кода, развитие которого продолжается.

Редактор/IDE Pulsar (бесплатный)

Pulsar — это открытый редактор кода, возникший как форк прекращенного разрабатываться редактора Atom. Он сохраняет идею «hyper-hackable» – то есть глубокую настраиваемость пользователем – и продолжает развивать экосистему пакетов/тематик от Atom.

Инициатива появилась после объявления о закрытии редактора Atom в 2022 году; проект стартовал в конце 2022 года и с тех пор поддерживается многими контрибьюторами.

Pulsar работает на Windows, macOS и Linux. Используется как текстовый редактор и как IDE-подобная среда: имеет интеграцию с language servers (автодополнение, навигация), встроенную систему пакетов, Git-интеграцию, многопанельный интерфейс и т.д.

Подробнее с редактором кода/IDE Pulsar вы можете ознакомиться на официальном сайте по ссылке https://pulsar-edit.dev/.

Редактор/IDE Komodo (бесплатный)

Бесплатный редактор HTML-кода, и он же интегрированная среда разработки (IDE) - это Komodo.

Komodo Edit — отличный редактор, если вы ищете что-то мощное, но простое. Komodo IDE обеспечивает более надежные функции, такие как отладка, модульное тестирование, рефакторинг кода и профилирование кода.

Подробнее с редактором кода / IDE Komodo вы можете ознакомиться на официальном сайте по ссылке https://www.activestate.com/products/komodo-edit/.

Редактор/IDE Geany (бесплатный)

Geany — это мощный, стабильный и легкий текстовый редактор для программиста, предоставляющий массу полезных функций, не мешая рабочему процессу. Он работает на Linux, Windows и macOS, переведен более чем на 40 языков и имеет встроенную поддержку более 50 языков программирования.

Одна из главных причин разработки Geany заключается в том, что существует потребность в достойном графическом пользовательском интерфейсе, легком, кроссплатформенном, гибком и мощном IDE/редакторе.

Подробнее о IDE Geany вы можете ознакомиться на официальном сайте https://www.geany.org/.

Редактор/IDE Light Table (бесплатный)

Light Table - редактор кода/IDE следующего поколения. Это бесплатная IDE с открытым кодом, поддерживающая многие языки программирования. Имеет многофункциональный редактор кода, систему отладки, интеграцию с Git и многие другие функции. Работает на Windows, MacOS и Linux.

Подробнее о IDE Light Table вы можете ознакомиться на официальном сайте https://lighttable.com/.

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

IDE - Интегрированная среда разработки

Помимо текстовых редакторов, используемых для написания HTML/CSS-кода, профессиональные веб-разработчики используют также IDE (сокращенно от англ. Integrated development environment) – интегрированная среда разработки. Интегрированные среды разработки созданы для того, чтобы максимизировать производительность программиста, предоставляя ему связанные инструменты разработки с подобными интерфейсами как одну программу, в которой происходит весь процесс разработки и предоставляет необходимые функции. IDE помогает увеличить производительность разработчика и ускорить процесс разработки и написания кода.

Самые популярные IDE среди веб-разработчиков по состоянию на 2025 год:

• VS Code - бесплатный
• Atom - бесплатный (прекращен выпуск)
• Dreamweaver - платный
• Eclipse - бесплатный
• NetBeans - бесплатный
• Komodo - бесплатный
• Geany - бесплатный
• Light Table - бесплатный
• Monodevelop - бесплатный
• Ultraedit - платный
• Slickedit - платный
• Xcode - бесплатный (для Apple)
• Arduino - бесплатный

Также существует целая ветвь разных IDE от компании Jetbrains, каждая из которых предназначена для разработки на отдельных языках программирования.

Для веб-разработки обычно используются:

• WebStorm - HTML+CSS+JavaScript (платный)
• PHPStorm - HTML+CSS+JavaScript+PHP - (платный)
• PyCharm Professional - Python - (платный); PyCharm Community Edition - (бесплатная версия);
• IntelliJ IDEA Ultimate - Java, Kotlin - (платный); IntelliJ IDEA Community Edition - (бесплатная версия);

Все эти и другие IDE от компании Jetbrains можно скачать с официального сайта.

Все IDE от компании Jetbrains являются платными: WebStorm, PHPStorm, Pycharm и др., но имеют достаточно большой период бесплатной работы (trial) – 30 дней, а для студентов и преподавателей можно получить эти IDE на 2 года бесплатно в целях обучения. Также вы можете свободно скачать и пользоваться бесплатными версиями IDE Community Edition с несколько урезанным, но достаточным для обучения функционалом. Подробности см. на официальном сайте JetBrains.

Как бесплатно получить вечный период работы WebStorm, PHPStorm и т.д. от компании Jetbrains?

Если раньше на просторах Интернета можно было легко найти кряк или ключ активации для программ от компании Jetbrains, то сейчас это сделать проблематично. Но в этом нет особой необходимости, если у вас есть свободный доступ к Интернету и возможность скачать нужную IDE от Jetbrains. Есть один простой лайфхак (о котором не все знают!).

Сейчас для того, чтобы пользоваться IDE от компании JetBrains, даже при использовании триал-периода в 30 дней, нужно зарегистрироваться на самом сайте JetBrains, используя email и пароль. Но после 30-дневного пользования IDE необходимо либо приобрести платную лицензию, либо снова зарегистрироваться на сайте JetBrains с новым email, чтобы получить возможность пользоваться IDE еще один триал-период в 30 дней. Поэтому, чтобы не придумывать и не создавать себе каждый раз новый email где-то на Google (gmail), потому что это долго, можно воспользоваться сервисами одноразового (временного) email, например, https://temp-mail.org/, https://temp-mail.io/uk, https://tempmailo.com/, https://etempmail.net/ или другим (таких сервисов в сети много, можете погуглить!). Зарегистрировавшись на сайте JetBrains с помощью временных email, вы получите электронное письмо на этот email со ссылкой, на которую нужно будет нажать для подтверждения регистрации на сайте JetBrains. Получив такое подтверждение о регистрации, вы запускаете свою IDE (например, WebStorm или PHPStorm), и уже в самой программе вводите свои данные - логин (email) и пароль (как правило, это делается автоматически самой программой), с которыми вы зарегистрировались на сайте JetBrains, затем выбираете триал-период (30 дней) и спокойно пользуетесь программой в течение одного месяца. При этом можно также получать обновления программы онлайн. После окончания триал-периода, проводите такую же процедуру с регистрацией на сайте JetBrains с новым временным email и снова получаете возможность пользоваться программой следующие 30 дней. И так можете постоянно повторять (каждые 30 дней).

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

Каждая из этих официальных версий PHPStorm имеет свой 30-дневный триал-ключ. После установки любой из этих версий вы можете обновить её онлайн до последней действительной версии с официального сайта JetBrains.

Примечание. Если вам не удаётся зайти на сайт www.jetbrains.com и скачать нужную версию программы, то попробуйте сделать это с помощью любого VPN-сервиса (VPN-плагина в браузере). Возможно, в вашей стране этот сайт заблокирован!

Какой редактор кода или IDE выбрать?

Если вы начинающий веб-разработчик и только обучаетесь основам создания вебсайтов и написанию кода, то рекомендуется использовать сначала простейшие редакторы кода, такие как Notepad++ (для школьников), SublimeText, Brackets (для студентов), и только потом, освоив основы написания кода, можете переходить к использованию более профессиональных и сложных в настройках, но более эффективных в применении, интегрированных сред разработки – IDE. Обычно наиболее универсальной и простой для освоения IDE (после редакторов) для начинающих веб-разработчиков становится VS Code. А затем выбор IDE уже зависит от направления программирования и применяемых технологий.

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

HTML Редакторы кода (устаревшее видео)

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