Программа css html редактор

5 бесплатных визуальных HTML-редакторов

WYSIWYG (What You See Is What You Get), или визуальные редакторы, позволяют простому смертному создавать различные проекты без необходимости постигать профессиональные инструменты. Такие редакторы есть для текста, графики, приложений и, конечно же, для сайтов. Вот о них и поговорим.

Brackets

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

Вас ждёт современный интерфейс с поддержкой тёмной темы и настройкой рабочей среды. Есть поддержка различных расширений.

HTML-NOTEPAD

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

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

Free Online HTML Editor

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

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

Online HTML Editor

Здесь сразу несколько инструментов: просмотрщик, компрессор, редактор, бьютифаер и форматирование кода. Вам доступно превью в реальном времени всех изменений кода. Можно менять форматирование кода в зависимости от языка.

Этот сервис во многом похож на Free Online HTML Editor.

HTMLed.it

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

Источник

Обзор html, css, js редакторов под Windows

Сравнительно недавно встал вопрос замены громоздкого и дорогого Adobe Dreamweaver на что нибудь более легковесное и не столь дорогое. Возможные варианты под катом.

Для этой цели был создан вопрос в разделе Q&A, на который было получено множество ответов. Спасибо всем откликнувшимся.

Выбранные редакторы были сравнены по нескольким пунктам.

Платные редакторы

• Цена: $45.85;
• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: очень широкие возможности настройки;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: можно настраивать, теги подсвечиваются;
• Открытие/закрытие блоков кода: нет;
• Автозакрытие тегов, кавычек, скобочек: присутствует, настраивается;
• Автокомплитер и его удобство: есть, очень удобный;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
• Поддержка html5 и css3: html5 нет, css3 есть;
• Подхват зависимых файлов (css,js): нет, но если открыть css и html файлы, то автокомплитер увидит название классов и id из файла стилей;
• Организация проектов: присутствует, обычная;
• ftp-клиент: присутствует;
• Вес дистрибутива: 5,7 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: быстро открывается, быстро работает;
• Замеченные минусы: нет.

• Цена: $69.85.
• Редактор такой же как и HTMLPad, но имеет расширенный набор функций для программистов.

• Цена: $69;
• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: очень широкие возможности настройки;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов:теги подсвечиваются;
• Открытие/закрытие блоков кода: да;
• Автозакрытие тегов, кавычек, скобочек: присутствует, настраивается;
• Автокомплитер и его удобство: есть, неплохой;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 есть;
• Подхват зависимых файлов (css,js): нет, но если открыть css и html файлы, то автокомплитер увидит название классов и id из файла стилей;
• Организация проектов: присутствует, расширенная;
• ftp-клиент: присутствует;
• Вес дистрибутива: 63,8 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: в CSS файлах, удобная плюшка с подсветкой использованных цветов. Широкие возможности поиска элементов внутри проекта. Куча других настроек и опций;
• Замеченные минусы: долго открывается, тяжеловато работает.

• Цена: $79.95;
• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: широкие возможности настройки;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: нет;
• Открытие/закрытие блоков кода: частичная в css;
• Автозакрытие тегов, кавычек, скобочек: в html и css есть, в js нет;
• Автокомплитер и его удобство: есть, неудобный по CTRL+пробел;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js нет, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: присутствует, не очень удобная;
• ftp-клиент: присутствует;
• Вес дистрибутива: 5,2 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: подойдет начинающим;
• Замеченные минусы: ориентирован на визуальную разработку, а не на удобство работы с кодом.

• Цена: $59;
• Готовые цветовые схемы (в т.ч. и темные): да;
• Настройка подсветки кода под себя: не нашел;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: нет;
• Открытие/закрытие блоков кода: нет;
• Автозакрытие тегов, кавычек, скобочек: в html нет, в css и js есть;
• Автокомплитер и его удобство: есть, неудобный по CTRL+пробел;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
• Поддержка html5 и css3: html5 нет, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: присутствует, не смог сходу разобраться;
• ftp-клиент: не нашел;
• Вес дистрибутива: 17 мб;
• Наличие portable версии: есть;
• Замеченные плюсы: быстро открывается, быстро работает;
• Замеченные минусы: сходу очень трудно разобраться, требуется прилично времени на освоение.

• Цена: $149.95;
• Даже не пытался пробовать, софт явно для любителей Visual Studio и пр. продуктов MS

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

• Готовые цветовые схемы (в т.ч. и темные): да;
• Настройка подсветки кода под себя: да;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да, очень удобная подсветка;
• Открытие/закрытие блоков кода: есть, для выделенных фрагментов только;
• Автозакрытие тегов, кавычек, скобочек: нет;
• Автокомплитер и его удобство: есть, непривычный;
• Поддержка html, css, js и jquery автокомплитером: html есть, css частично, js частично, jquery нет;
• Поддержка html5 и css3: html5 нет, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: нет;
• ftp-клиент: есть через плагин;
• Вес дистрибутива: 5,2 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: быстро открывается, быстро работает;
• Замеченные минусы: скудный функционал.

• Готовые цветовые схемы (в т.ч. и темные): да;
• Настройка подсветки кода под себя: да;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да, очень удобная подсветка;
• Открытие/закрытие блоков кода: есть, для выделенных фрагментов только;
• Автозакрытие тегов, кавычек, скобочек: нет;
• Автокомплитер и его удобство: есть, почему-то в html сразу выскакивает, а в css по ctrl+пробел;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js частично, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 частично;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: есть;
• ftp-клиент: есть;
• Вес дистрибутива: 130 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: нет;
• Замеченные минусы: нещадно тормозит.

• Готовые цветовые схемы (в т.ч. и темные): да;
• Настройка подсветки кода под себя: да;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да;
• Открытие/закрытие блоков кода: есть;
• Автозакрытие тегов, кавычек, скобочек: да, частично;
• Автокомплитер и его удобство: есть, с подсказками;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js частично, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 есть;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: да;
• ftp-клиент: не нашел;
• Вес дистрибутива: 41,5 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: похож на np++, но функционал заметно шире;
• Замеченные минусы: настройки не очень интуитивны.

• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: да;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да;
• Открытие/закрытие блоков кода: есть;
• Автозакрытие тегов, кавычек, скобочек: да, частично;
• Автокомплитер и его удобство: есть, неудобный ctrl+пробел и плохо работающий;
• Поддержка html, css, js и jquery автокомплитером: html есть, css частично, js нет, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: да;
• ftp-клиент: не нашел;
• Вес дистрибутива: 10 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: нет;
• Замеченные минусы: имхо хромает качество.

• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: частично;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: нет, подсветка парных тегов есть;
• Открытие/закрытие блоков кода: нет;
• Автозакрытие тегов, кавычек, скобочек: да, частично;
• Автокомплитер и его удобство: есть, неудобный ctrl+пробел + модальное окно с настройками;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js нет, jquery нет;
• Поддержка html5 и css3: html5 нет, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: да;
• ftp-клиент: есть;
• Вес дистрибутива: 4,2 мб;
• Наличие portable версии: не нашел;
• Замеченные плюсы: нет;
• Замеченные минусы: неудобный.

• Готовые цветовые схемы (в т.ч. и темные): нет;
• Настройка подсветки кода под себя: не нашел;
• Настройка позиционирования курсора, подсветка открывающих/закрывающих тегов: да, подсветка парных тегов есть;
• Открытие/закрытие блоков кода: да;
• Автозакрытие тегов, кавычек, скобочек: да, частично;
• Автокомплитер и его удобство: есть, неудобный ctrl+пробел;
• Поддержка html, css, js и jquery автокомплитером: html есть, css есть, js есть, jquery нет;
• Поддержка html5 и css3: html5 есть, css3 нет;
• Подхват зависимых файлов (css,js): нет;
• Организация проектов: да;
• ftp-клиент: есть;
• Вес дистрибутива: 108 мб;
• Наличие portable версии: работает без установки;
• Замеченные плюсы: нет;
• Замеченные минусы: громоздкость, требует Java.

Выводы

Как оказалось, выбор очень велик. К сожалению не могу сказать, что какая-то из программ оставила такое впечатление чтобы я сразу выкинул Dreamweaver и перешел на неё. Но тем не менее разочарованным я тоже не остался. Мой выбор — платный HTMLPad. Ни один из бесплатных редакторов не показался мне достаточно удобным (но это дело привычки для каждого, я считаю).

Источник