Средства редактирования HTML-кода (включая текст)

Простые текстовые редакторы и текстовые процессоры

Для создания веб-страничек можно использовать самые разные средства, от текстовых процессоров типа Microsoft Word до простых редакторов текста типа Блокнота в Windows.

Хотя текстовые процессоры типа MS Word и позволяют сохранять набранный текст в формате html, но полученный код, мягко говоря, оставляет желать лучшего. Отмечу, что текстовый процессор Write из пакета OpenOffice.org, существующий в вариантах как для Windows, так и для Linux, создает значительно более приемлемый код, однако и он довольно избыточен. Так что использовать такие продукты при разработке сайтов не рекомендуется.

Другой крайностью является прямое редактирование html-кода в простом текстовом редакторе типа Блокнота в Windows. Большинство опытных вебмастеров утверждают, что им для создания сайта ничего кроме Блокнота не требуется. Вероятно, это действительно так. Говорят, что хорошему плотнику тоже ничего не требуется, кроме топора. Я тоже практически все страницы сайта http://rus-linux.net создавал во встроенном текстовом редакторе файлового менеджера FAR для Windows. В ОС GNI/Linux имеются аналогичные средства: Kwrite или Kate в KDE, gedit в GNOME.

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

Текстовые редакторы с подсветкой тегов

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

К этому классу редакторам можно отнести и редакторы для программистов, обеспечивающие подсветку синтаксиса (в том числе и синтаксиса html). Примером редактора этого класса может служить Notepad++. А можно выделить такие редакторы в отдельный тип, аргументируя это тем, что в html-редакторах обычно встроены средства просмотра получающегося результата (типа встроенного браузера), а в редакторах для программистов ничего подобного нет (но зато часто можно просто подключить вызов браузера).

Некоторое время я пытался из под Windows пользоваться редактором Notepad++, но потом обнаружил PSPad, который мне понравился гораздо больше. Одно из существенных преимуществ PSPad состоит в удобной работе с файлами в разных кодировках, в том числе с UTF-8. Поскольку в PSPad встроено средство просмотра html-файлов (своего рода мини-браузер), то этот редактор ближе к специализированным html-редакторам, хотя и позиционируется разработчиками как редактор для программистов.

Специализированные редакторы HTML-кода

Специализированные HTML-редакторы отличаются тем, что поддерживают следующие возможности:

  • подсветка синтаксиса — выделение тегов, текста, ключевых слов и параметров разными цветами. Это облегчает поиск нужного элемента, ускоряет работу разработчика и снижает возникновение ошибок;
  • работа с вкладками. Сайт представляет собой набор файлов, которые приходится править по отдельности, для чего нужен редактор, умеющий одновременно работать сразу с несколькими документами. При этом файлы удобно открывать в отдельных вкладках, чтобы быстро переходить к нужному документу;
  • подсказки по использованию элементов html и css (встроенные справочники);
  • проверка текущего документа на ошибки;
  • встроенный браузер, что позволяет не выходя из редактора посмотреть, как будет в итоге выглядеть создаваемая страничка.

Существует широкий спектр HTML-редакторов: от простых редакторов исходного html-кода (подобных рассмотренным выше редакторам с подсветкой тегов) до WYSIWYG-редакторов. WYSIWYG-редакторы (What You See Is What You Get - что видишь, то и получаешь) - это программы, с помощью которых можно создавать страницы, не имея никакого понятия о языке HTML. Самым распространенным из них является, вероятно, Microsoft FrontPage. Недостатком WYSIWYG-редакторов является громоздкость созданных с их помощью HTML-документов. Это получается оттого, что WYSIWYG-редакторы вставляют HTML-коды, как говорится, "на все случаи жизни". В результате объем документа, а значит и время загрузки страницы, увеличивается. В отличие от WISIWIG-редакторов в обычных редакторах HTML-кода результирующий HTML-документ, как правило, получается более компактным и изящным. Здесь речь идет именно о HTML-документе, а не о странице, которая будет видна в окне браузера. Красота и изящность страницы очень слабо связаны со способом ее создания.

Ниже перечислены некоторые из специализированных html-редакторов. Поскольку я, естественно, не имею достаточного опыта работы с каждым из этих продуктов, приведенные характеристики этих редакторов частично заимствованы из Сети. Отдельно перечислю редакторы для Windows и Linux, учитывая, что некоторых читателей может интересовать только одна из этих категорий. Рассматриваются в основном свободные, то есть бесплатные продукты. Те, у которых имеется русскоязычный интерфейс, помечены знаком Рус

HTML-редакторы для Windows

1st Page
Один из самых лучших HTML редакторов, к тому же Freeware! Правда, при установке предупреждает, что некоторые элементы будут недоступны. Возможностей уйма, подстройка интерфейса (для начинающего, продвинутого, крутого вебмастера), очень много документации по HTML и всему, что с этим связано! Пишет по-русски (для этого заходите Options-> Editing preferences и для "Default text charset" выбираете Russian вместо ANSI). Окно редактора разбито на два поля (см. рис. ниже), причем все изменения, вносимые в верхнем поле (где собственно осуществляется редактирование, сразу же отображаются в нижнем поле - окне предпросмотра. К сожалению, выложенная на сайте версия датирована 2006-м годом. Ну и, на мой взгляд, немного медленно работает. Тем не менее продукт вполне работоспособный.

Рис. Редактор 1st Page

Arachnophilia
Это HTML-редактор, созданный Полом Лутусом (Paul Lutus). На домашней страничке автора выложена версия 5.4, датированная 2010 годом. Эта версия была полностью переписана Полом на языке Java. Она, к сожалению, не русифицирована. Русифицированную версию 4.0 можно найти на странице http://www.v258.narod.ru/win/html/arach.html. Она вполне подходит для выполнения большинства задач по созданию WEB-страниц, обеспечивает проверку синтаксиса, тегов HTML, CGI, JAVA. Этот редактор хорошо иметь под рукой как вторичный инструмент, подправить что-то быстренько и т.д. Абсолютно бесплатен, т.е. Freware

Amaya Рус
Фирменный веб-браузер и HTML-редактор производства W3C - организации, занимающейся разработкой принципов функционирования WWW.
Amaya является веб-редактором, то есть, инструментарием, предназначенным для создания и обновления документов непосредственно в сети. В одном пакете объединены все средства браузера и редактора для просмотра, редактирования и удаленного управления файлами. Это соответствует оригинальной версии сети Интернет, понимаемой как площадка для сотрудничества, а не только среда для публикации. Первые шаги Amaya были в качестве редактора HTML + CSS. С течением времени программа была расширена с целью поддержки XML и таких приложений XML, как XHTML, MathML, а также SVG. Она позволяет одновременно редактировать все эти приложения в сложных документах. Актуальная версия - Amaya 11.3.1 (30 января 2009г.) доступна для Linux, Windows и MacOS X. Русифицирована версия 11.2.
У меня при попытке редактирования настоящей странички с помощью Amaya были порушены все вхождения тега <noindex>. Видимо программе этот тег, изобретенный Яндексом, неизвестен и она пытается его править, но делает это не корректно.

HTML-Kit 292
Бесплатный текстовый редактор со множеством наворотов для Windows 7, Vista, XP, 2003, 2000, NT 4, ME, 98 and 95. Создается впечатление, что он может редактировать все: HTML, CSS, JavaScript, Python, Perl, C/C++, PHP, VBSCript, ASP и многое (!) другое. Очень много разнообразнейших плагинов, расширяющих функциональность этого редактора.
Но не русифицирован, что может несколько снизить его привлекательность для начинающего вебмастера.

HtmlReader 2.5 Рус
Программа HtmlReader - бесплатный, русскоязычный редактор, предназначенный для просмотра, корректировки и создания новых html - страниц. Редактор позволяет работать с html- текстом в стиле 1st Page 2000, HomeSite, AceHtml Pro и других подобных программ. Редактор имеет быстрый просмотр во встроенном броузере (MSIE4+) или в любом другом подключенным пользователем, настраиваемую подсветку синтаксиса html файлов. Во встроенном броузере имеется широкий выбор инструментов просмотра страницы с различными эффектами. Текущая версия - HtmlReader v2.5 от 18.12.2007.

NeonHTML 4.5 Рус
Бесплатный редактор HTML и CSS с визуальными инструментами. Поддерживает XHTML. Позволяет редактировать быстро и комфортно: подсветка синтаксиса, визуальное создание тегов в диалогах. Большинство инструментов имеют предпросмотр. Есть встроенный браузер с имитацией разного разрешения и масштаба. Инструмент поисковой (SEO) оптимизации и проверки рейтинга сайта. Очень хорошая работа с цветами - специально созданная палитра как в графических редакторах, список недавних цветов, список цветов страницы, быстрое редактирование цвета одним кликом, мгновенное создание параметров стиля с выбором цвета, докер цвета, копирование и перенос цветов между диалогами. Инструменты взаимодействуют друг с другом, этим достигается быстрое привыкание к интерфейсу, удобство и высокая скорость работы. Не содержит множества бесполезных меню. Вы всегда можете отредактировать интерфейс, убрать ненужные кнопки и создать собственные панели с необходимыми Вам функциями, каждой из которых можно назначить сочетание клавиш.

NeonHTML

Рис. Редактор NeonHTML

NVU 1.0 Рус
Визуальный (WYSIWYG) HTML-редактор. Основой для создания NVU послужил код Mozilla Composer. Удобные мастера позволяют вставить ссылку или картинку, разместить таблицу или форму с помощью нескольких кликов и тут же посмотреть изменения. При незначительной правке существующего шаблона знание html вообще не требуется - работать с кодом можно на уровне визуального редактора.
Такие инструменты как редактор css, мастер оптимизации кода, консоль javascript значительно упрощают разработку. Функциональность редактора может быть расширена за счет плагинов, которые можно скачать с официального сайта.
В редактор встроен html валидатор, кроме этого можно запустить мастер проверки орфографии и, таким образом, полностью подготовить страницу к публикации в сети. Готовый проект выгружается на сервер с помощью ftp клиента, который также интегрирован в программу.
Существуют версии программы под ОС Windows, Linux и Mac.
К недостаткам программы можно отнести то, что в сохраненном файле оказалось очень много лишних пробелов. И вообще код был отформатирован по каким-то непонятным мне принципам. Не понравилось Кроме того, программа датирована 2005-м годом, что тоже не увеличивает ее привлекательности.

Web Development Studio 2.0 Рус
Средство для разработки веб-сайтов (HTML, PHP, Perl, CSS, JS, VBS, ASP, SSI, Curl, VRML) Несмотря на небольшой размер редактор имеет широкую функциональность и гибкие настройки. Большим плюсом программы является встроенная справочная система по 11 языкам программирования и разметки. Справочник содержит достаточно подробную информацию о функциях, тегах, их свойствах и вариантах применения. Версия файла: 2.0.16.1232 от 20.04.2006.

Все перечисленные в этом списке редакторы я устанавливал на свой компьютер и немного в каждом из них работал. Правда, явно недостаточно для того, чтобы делать окончательные выводы. Однако предварительно могу сказать, что больше всех мне понравились редакторы 1stPage и NeonHTML 4.5. Но первая работает с какими-то задержками, так что пока я остановился на второй, а далее посмотрим.

HTML-редакторы для Linux

Из приведенного выше списка html-редакторов для Windows по крайней мере 3 имеют версии и для Linux. Это Arachnophilia (поскольку она написана на Java и будет также работать в Linux, если в системе установлена JRE), Amaya и NVU . Не думаю, что под Linux они работают лучше, чем под Windows, поэтому посмотрим на альтернативы.

Aptana Studio
Мощная среда программирования веб-приложений на основе HTML, CSS и JavaScript.

Bluefish
Мощный редактор, предназначенный для веб-разработчиков, предоставляющий множество опций при написании html-страниц и скриптов. Ориентирован на создание динамических и интерактивных веб-сайтов. Версия 2.0.2 требует gtk 2.12 или более позднюю и опционально библиотеки libenchant для проверки правописания и libgucharmap для вывода таблицы символов.

Quanta Plus
Программа производит очень хорошее впечатление. Её мощь, гибкость и настраиваемость способны удовлетворить требования самых привередливых веб-кодеров независимо от их уровня подготовки.
Кроме режима ручного редактирования и визуального режима имеет так называемый «комбинированный» режим работы, когда пространство окна разбивается на две части, верхнюю, где можно увидеть, как будет выглядеть страница, и нижнюю, с исходным кодом. Редактировать страницу можно как в нижней части, так и в верхней, все изменения автоматически синхронизируются. Вставив код, вы сразу же увидите, что из этого получится, а поставив перенос строки сможете посмотреть, каким тегом это делается.

SCREEM
Очень удобный HTML-редактор для среды GNOME. Не относится к WYSIWYG, то есть предназначен только для редактирования html-кода. Имеет средства визуализации и управления сайтом, включая автоматическое обновление ссылок и средства загрузки проекта на сервер.

OpenBEXI
OpenBEXI - это средство разработки вебсайтов в режиме WYSIWYG. Включает инструменты для создания страниц, редактирования и выкладывания на сервере провайдера.

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

SeaMonkey
Интегрированный набор веб-приложений, включающий браузер, почтовый клиент, HTML-редактор, feed-ридер, IRC-чат.

Сравнительный анализ этих средств веб-редактирования я пока не проводил. Кое-какие сведения и сравнения (не очень свежие) вы найдете в статьях С.Супрунова "HTML-редакторы" и А. Федорчука "Пингвин в паутине. Web-редакторы для Linux", "Сага о Web-редакторах"

Полезные ресурсы

Другие средства обработки текста

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

Ни один, даже самый грамотный вебмастер, не застрахован от опечаток и ошибок при наборе текста. Поэтому желательно после завершения редактирования какой-то странички проверить себя с помощью средств проверки правописания. В некоторых редакторах такие средства встроены, однако не всегда работают достаточно хорошо. На этот случай можно предложить такой прием: загружаем полученный html-файл в текстовый процессор типа MS Word или OpenOffice.org Writer и смотрим, какие есть ошибки. Только не нужно править эти ошибки непосредственно в текстовом процессоре. Откройте параллельно ваш любимый редактор html-кода и делайте исправления там. По завершении работы выйдите из текстового процессора без сохранения файла (иначе html-код будет безвозвратно испорчен) и сохраните тот результат, что получен в html-редакторе.

Существует и онлайн-сервис для проверки орфографии - "Орфограф" студии А.Лебедева. Вставленный в форму на сайте текст он проверяет непллохо, а вот когда я задал проверку этой веб-страницы целиком, он не справился с кодировкой.

С помощью текстового процессора мы выявим грамматические (точнее, орфографические) ошибки. Но возможны и ошибки в HTML-коде, например, неправильно закрытые или не закрытые теги, а также ошибки в CSS-таблицах. На этот случай имеются две интересные программы: HTML Tidy - программа и библиотека для выявления ошибок и оптимизации html-кода, и CSS Tidy - библиотека для оптимизации CSS-кода. Огромное количество сайтов предлагают минимизаторы, основанные именно на CSS Tidy: CleanCSS, CSS Formatter and Optimizer, CSS Compressot и многие другие.
Для оптимизации JavaScript можно использовать YUI Compressor.

Полезные ресурсы

Дополнение. Платные продукты.

Adobe (Macromedia) Dreamweaver
Этот редактор считается наилучшим средством создания веб-страниц, он часто упоминается как эталон при описании других продуктов аналогичного назначения. Разработан и поддерживался компанией Macromedia в версиях до 8-й (2005 год). Следующие версии (начиная с Dreamweaver CS3 (2007)) выпускает Adobe. Богатый инструментарий, открытость приложения для всевозможных настроек, удобный интерфейс и другие особенности сделали Dreamweaver одним из наиболее популярных HTML-редакторов в мире. Недостатком считается добавление "лишнего" кода. К сожалению, Dreamweaver платный и очень не дешевый. Для знакомства с ним можно скачать полноценную 30-ти дневную пробную версию.

SNK Metaproducts Web Studio Рус
Metaproducts Web Studio представляет собой пакет программ, предназначенный для создания сайтов, включая разработку, верстку, кодирование и загрузку по FTP. С помощью Web Studio вы можете быстро и с максимальным удобством создавать и поддерживать собственные web-сайты. Имеет также прекрасную справочную систему не только по работе с самой программой, но и по языкам HTML и JavaScript. Программа условно-бесплатная, то есть фирма SNK Software дает Вам программу в бесплатное пользование на 30 дней. Предполагается, что за этот срок Вы опробуете программу и решите: нужна она Вам для дальнейшего использования или нет. По истечении испытательного срока программу необходимо зарегистрировать (русскую версию можно зарегистрировать по специальной цене - 1300 руб.).

PHP Expert Editor 4.3 Рус
PHP Expert Editor - удобный редактор для PHP, Perl, Python, HTML, Java Script и других файлов с поддержкой UTF-8. Программа разработана специально для PHP мастеров и имеет встроенный отладчик PHP. PHP Expert Editor имеет встроенный HTTP сервер и позволяет запускать PHP, Perl, Python, скрипты. Вы также можете использовать любой внешний HTTP сервер. Проверка синтаксиса PHP, встроенный браузер, FTP клиент с поддержкой SFTP, Кодовый и файл эксплорер, поддержка проектов, настраиваемые шаблоны кода, настраиваемая подсветка кода, и многие другие функции значительно облегчают работу разработчика. Распространяется на принципах Shareware, стоимость - 35 евро.

phpDesigner 7 – от MPSOFTWARE.
phpDesigner 7 представляет собой универсальное решение для веб-разработчиков. Включает полнофункциональную среду программирования (IDE) на PHP и PHP-редактор с поддержкой редактирования HTML, CSS и JavaScript. Пригоден как для начинающих, так и для опытных профессиональных разработчиков! Мощнейшая программа, работает с HTML, CSS, ASP, PHP. Включает TIDY и т.п., однако интерфейс и прочее на английском языке.

Загляните на досуге

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100