Средства редактирования 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). Примером редактора этого класса может служить . А можно выделить такие редакторы в отдельный тип, аргументируя это тем, что в html-редакторах обычно встроены средства просмотра получающегося результата (типа встроенного браузера), а в редакторах для программистов ничего подобного нет (но зато часто можно просто подключить вызов браузера).
Некоторое время я пытался из под Windows пользоваться редактором Notepad++, но потом обнаружил , который мне понравился гораздо больше. Одно из существенных преимуществ 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
Один из самых лучших HTML редакторов, к тому же Freeware! Правда, при установке
предупреждает, что некоторые элементы будут недоступны. Возможностей уйма,
подстройка интерфейса (для начинающего, продвинутого, крутого вебмастера),
очень много документации по HTML и всему, что с этим связано! Пишет по-русски
(для этого заходите Options-> Editing preferences и для "Default text
charset" выбираете Russian вместо ANSI). Окно редактора разбито на два поля
(см. рис. ниже), причем все изменения, вносимые в верхнем поле (где собственно
осуществляется редактирование, сразу же отображаются в нижнем поле - окне
предпросмотра. К сожалению, выложенная на сайте версия датирована 2006-м годом.
Ну и, на мой взгляд, немного медленно работает. Тем не менее продукт вполне
работоспособный.
Рис. Редактор 1st Page
Это HTML-редактор, созданный Полом Лутусом (Paul Lutus). На домашней страничке
автора выложена ,
датированная 2010 годом. Эта версия была полностью переписана Полом на языке Java. Она, к сожалению, не
русифицирована. Русифицированную версию 4.0 можно найти на странице http://www.v258.narod.ru/win/html/arach.html.
Она вполне подходит для выполнения большинства задач по созданию WEB-страниц,
обеспечивает проверку синтаксиса, тегов HTML, CGI, JAVA. Этот редактор хорошо
иметь под рукой как вторичный инструмент, подправить что-то быстренько и т.д.
Абсолютно бесплатен, т.е. Freware
Рус
Фирменный веб-браузер и 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>. Видимо
программе этот тег, изобретенный Яндексом, неизвестен и она пытается
его править, но делает это не корректно.
Бесплатный текстовый редактор со множеством наворотов для Windows 7,
Vista, XP, 2003, 2000, NT 4, ME, 98 and 95. Создается впечатление, что
он может редактировать все: HTML, CSS, JavaScript, Python, Perl, C/C++,
PHP, VBSCript, ASP и многое (!) другое. Очень много разнообразнейших
плагинов, расширяющих функциональность этого редактора.
Но не русифицирован, что может несколько снизить его привлекательность
для начинающего вебмастера.
Рус
Программа HtmlReader - бесплатный, русскоязычный редактор,
предназначенный для просмотра, корректировки и создания новых html -
страниц.
Редактор позволяет работать с html- текстом в стиле 1st Page 2000,
HomeSite, AceHtml Pro и других подобных программ. Редактор имеет
быстрый просмотр во встроенном броузере (MSIE4+) или в любом другом
подключенным пользователем, настраиваемую подсветку синтаксиса html
файлов. Во встроенном броузере имеется широкий выбор инструментов
просмотра страницы с различными эффектами. Текущая версия - HtmlReader
v2.5 от 18.12.2007.
Рус
Бесплатный редактор HTML и CSS с визуальными инструментами.
Поддерживает XHTML. Позволяет редактировать быстро и комфортно:
подсветка синтаксиса, визуальное создание тегов в диалогах. Большинство
инструментов имеют предпросмотр. Есть встроенный браузер с имитацией
разного разрешения и масштаба. Инструмент поисковой (SEO) оптимизации и
проверки рейтинга сайта. Очень хорошая работа с цветами - специально
созданная палитра как в графических редакторах, список недавних цветов,
список цветов страницы, быстрое редактирование цвета одним кликом,
мгновенное создание параметров стиля с выбором цвета, докер цвета,
копирование и перенос цветов между диалогами. Инструменты
взаимодействуют друг с другом, этим достигается быстрое привыкание к
интерфейсу, удобство и высокая скорость работы. Не содержит множества
бесполезных меню. Вы всегда можете отредактировать интерфейс, убрать
ненужные кнопки и создать собственные панели с необходимыми Вам
функциями, каждой из которых можно назначить сочетание клавиш.
Рис. Редактор NeonHTML
Рус
Визуальный (WYSIWYG) HTML-редактор. Основой для создания NVU послужил
код Mozilla Composer. Удобные мастера позволяют вставить ссылку или
картинку, разместить таблицу или форму с помощью нескольких кликов и
тут же посмотреть изменения. При незначительной правке существующего
шаблона знание html вообще не требуется - работать с кодом можно на
уровне визуального редактора.
Такие инструменты как редактор css, мастер оптимизации кода, консоль
javascript значительно упрощают разработку. Функциональность редактора
может быть расширена за счет плагинов, которые можно скачать с
официального сайта.
В редактор встроен html валидатор, кроме этого можно запустить мастер
проверки орфографии и, таким образом, полностью подготовить страницу к
публикации в сети. Готовый проект выгружается на сервер с помощью ftp
клиента, который также интегрирован в программу.
Существуют версии программы под ОС Windows, Linux и Mac.
К недостаткам программы можно отнести то, что в сохраненном файле оказалось
очень много лишних пробелов. И вообще код был отформатирован по каким-то непонятным
мне принципам. Не понравилось Кроме того, программа датирована 2005-м годом, что тоже
не увеличивает ее привлекательности.
Рус
Средство для разработки веб-сайтов (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. Это (поскольку она написана на Java и будет также работать в Linux, если в системе установлена JRE), и . Не думаю, что под Linux они работают лучше, чем под Windows, поэтому посмотрим на альтернативы.
Мощная среда программирования веб-приложений на основе HTML, CSS и JavaScript.
Мощный редактор, предназначенный для веб-разработчиков, предоставляющий множество опций
при написании html-страниц и скриптов. Ориентирован на создание динамических и интерактивных веб-сайтов.
Версия 2.0.2 требует gtk 2.12 или более позднюю и опционально библиотеки
libenchant для проверки правописания и libgucharmap для вывода таблицы символов.
Программа производит очень хорошее впечатление. Её мощь, гибкость и
настраиваемость способны удовлетворить требования самых привередливых веб-кодеров
независимо от их уровня подготовки.
Кроме режима ручного редактирования и визуального режима имеет так называемый «комбинированный» режим работы, когда пространство окна разбивается на две части, верхнюю, где можно увидеть, как будет выглядеть страница, и нижнюю, с исходным кодом. Редактировать страницу можно как в нижней части, так и в верхней, все изменения автоматически синхронизируются. Вставив код, вы сразу же увидите, что из этого получится, а поставив перенос строки сможете посмотреть, каким тегом это делается.
Очень удобный HTML-редактор для среды GNOME. Не относится к WYSIWYG, то есть предназначен только для редактирования html-кода. Имеет средства визуализации и управления сайтом, включая автоматическое обновление ссылок и средства загрузки проекта на сервер.
OpenBEXI - это средство разработки вебсайтов в режиме WYSIWYG. Включает инструменты для создания страниц, редактирования и выкладывания на сервере провайдера.
KompoZer - редактор класса WYSIWYG для создания веб-страниц. Создан с целью максимального облегчения процесса для неподготовленных пользователей, которые хотят тем не менее создавать профессионально выглядящие сайты.
Интегрированный набор веб-приложений, включающий браузер, почтовый клиент, HTML-редактор, feed-ридер, IRC-чат.
Сравнительный анализ этих средств веб-редактирования я пока не проводил. Кое-какие сведения и сравнения (не очень свежие) вы найдете в статьях С.Супрунова
Полезные ресурсы
Другие средства обработки текста
Кроме удобного редактора текста вебмастеру бывают нужны и полезны и другие средства работы с текстами. Иногда (а может быть даже часто) нужно бывает произвести замену какого-то фрагмента текста сразу во всех файлах сайта. К примеру, если вы переместили страничку из одного подкаталога в другой, нарушились все ссылки на эту страницу. Нужен какой-то инструмент для того, чтобы поменять такие ссылки во всех файлах. В таких случаях вам может помочь 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 можно использовать
.
Полезные ресурсы
Дополнение. Платные продукты.
Этот редактор считается наилучшим средством создания веб-страниц,
он часто упоминается как эталон при описании других
продуктов аналогичного назначения. Разработан и
поддерживался компанией Macromedia в версиях до 8-й (2005 год). Следующие версии (начиная
с Dreamweaver CS3 (2007)) выпускает Adobe. Богатый инструментарий, открытость приложения
для всевозможных настроек, удобный интерфейс и другие особенности сделали Dreamweaver одним
из наиболее популярных HTML-редакторов в мире. Недостатком считается добавление "лишнего"
кода. К сожалению, Dreamweaver платный и очень не дешевый. Для знакомства с ним можно
скачать полноценную 30-ти дневную пробную версию.
Рус
Metaproducts Web Studio представляет собой пакет программ,
предназначенный для создания сайтов, включая разработку, верстку,
кодирование и загрузку по FTP. С помощью Web Studio вы можете быстро и
с максимальным удобством создавать и поддерживать собственные
web-сайты. Имеет также прекрасную справочную систему не только по
работе с самой программой, но и по языкам HTML и JavaScript. Программа
условно-бесплатная, то есть фирма SNK Software дает Вам программу в
бесплатное пользование на 30 дней. Предполагается, что за этот срок Вы
опробуете программу и решите: нужна она Вам для дальнейшего
использования или нет. По истечении испытательного срока программу
необходимо зарегистрировать (русскую версию можно зарегистрировать по
специальной цене - 1300 руб.).
Рус
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 евро.
– от MPSOFTWARE.
phpDesigner 7 представляет собой универсальное решение для
веб-разработчиков. Включает полнофункциональную среду программирования
(IDE) на PHP и PHP-редактор с поддержкой редактирования HTML, CSS и
JavaScript. Пригоден как для начинающих, так и для опытных
профессиональных разработчиков!
Мощнейшая программа, работает с HTML, CSS,
ASP, PHP. Включает TIDY
и т.п., однако интерфейс и прочее на английском языке.