Лучшие бесплатные HTML-редакторы для ОС Linux. HTML-редакторы Визуальный html редактор для ubuntu

09.07.2020

Кто имеет свой собственный сайт, блог, форум или другой интернет-ресурс, как правило рано или поздно начинает осваивать языки HTML и PHP . Кто недавно перешел на Ubuntu хотел бы знать, какие программы и редакторы может предложить эта ОС для работы с сайтом.

Начну с легковесного редактора Gedit .
Gedit — это дефолтный текстовый редактор для Убунту. Хотя Gedit не такой мощный, как многие редакторы, он имеет отличные возможности, которые можно расширить за счет плагинов: http://live.gnome.org/Gedit/Plugins. Редактор написан Gnome Software Foundation, поэтому полностью поддерживает gio/gvfs и работает с любыми файлами, с которыми работает Nautilus. Это файлы, которые доступны по FTP, SMB, SSH/SFTP, а также DAV. Это очень полезно при работе с удалённым сервером.

Особенности Gedit:

  • Поддержка печати
  • Настраиваемая подсветка синтаксиса (C, C++, Java, HTML, XML, Python, Perl и т.д.)
  • Множество плагинов
  • Файловый браузер
  • Проверка орфографии
  • Возможность создания резервных копий документов
  • и т.д.

Gedit прост, но весьма симпатичен и полезен. С недавнего времени я использую его для работы с сайтами.

Установим Gedit:

sudo apt-get install gedit

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

Установим Geany:

sudo aptitude install geany

— это текстовый редактор с подсветкой синтаксиса.

  • Вставка кода для конфигурационных файлов Apache, C, CSS, Javascript, PHP, HTML (и других)
  • Создание таблиц
  • Гибкая подсветка синтаксиса
  • Автодополнение HTML-тегов
  • Обозреватель файлов
  • Работа с удаленными файлами по ftp
  • и многое другое

Установим Bluefish:

sudo aptitude install bluefish

Kompozer — это WYSIWYG (визуальный) HTML-редактор, который базируется на Nvu. Весной 2007 года Download.com объявила KompoZer лучшей бесплатной альтернативой Adobe CS3.

Основные возможности редактора:

  • Работа в режиме WYSIWYG, возможность редактирования исходного кода напрямую
  • Встроенный FTP клиент
  • Возможность проверки исходного кода страницы при помощи HTML валидатора от W3C
  • Работа с несколькими документами при помощи вкладок
  • Возможность публикации в Интернете созданных страниц

Как установить Kompozer в Убунту 14.04 читаем .

Компоновщик SeaMonkey входит в пакет программ от SeaMonkey Council. В данном наборе присутствуют: веб-браузер, почтовый клиент, адресная книга, IRC-клиент ChatZilla, компоновщик, а также инструменты для веб-разработчиков. Внешне очень схож с Kompozer, но в отличии от него очень часто обновляется. Чтобы использовать Компоновщик, вы не обязаны знать HTML; использовать его так же легко, как и текстовый редактор.
Вы можете добавлять списки, таблицы, изображения, ссылки на другие страницы или ресурсы, менять цвет и стиль шрифта. При создании документа вы сможете увидеть как выглядит ваш документ при его публикации в Интернете и предоставлять доступ к нему другим пользователям независимо от того, какой браузер или почтовую программу они используют. Также как и Kompozer имеет режим WYSIWYG, что очень полезно новичкам в HTML.

Как установить SeaMonkey в Убунту читаем .

Существуют и другие редакторы, которые можно установить через репозитории Убунту, либо через сторонние источники, но перечисленных выше программ, должно хватить с головой. А если вы не хотите вникать в языки PHP, HTML, погружаться в изучение таблиц стилей CSS, то тогда вам на помощь может прийти Веб студия Харькова , или другого города, либо страны. Профессионалы своего дела создадут для вас сайт, форум, интернет-магазин по вашим желаниям.

Верстать веб-сайты сегодня стало гораздо легче, благодаря мощным HTML-редакторам. Подбор редактора в соответствии с вашими личными предпочтениями - ваша забота. Тем же, кто пользуется ОС Linux и занимается веб-разработкой, стоит попробовать в деле предлагаемые нами сервисы. Некоторые из этих HTML-редакторов для ОС Linux бесплатны и находятся в открытом доступе. Есть ряд восхитительных по своим возможностям инструментов, но доступ к ним платный. Большинство HTML-редакторов поддерживают платформы различных ОС, например, Windows и MAC.

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

Конструируйте веб-приложения быстро и легко с помощью флагмана отрасли веб-сервиса IDE. Aptana Studio обеспечила ему функциональную гибкость за счёт среды Eclipse, превратив её в мощный двигатель веб-разработки. Функции Aptana Studio 3 расширены в сравнении с базовым вариантом Aptana Studio 2, они позволяют вам выполнять вёрстку, редактирование, предварительный просмотр и отладку HTML-, CSS- и javascript-сайтов средствами веб-разработки PHP и Ruby on Rails.


Komodo Edit - бесплатный мультиязычный редактор исходного кода. Со множеством отличных функций для HTML- и CSS-разработки.


SCREEM - HTML/XML-редактор с открытым исходным кодом для систем на базе Unix, а также для среды рабочего стола GNOME.


Bluefish - мощный редактор, предназначенный для программистов и веб-разработчиков (HTML, PHP, CSS и т. д.), многофункциональный, позволяющий вам верстать веб-сайты, писать отдельные программы и комплектовать кодовую основу целых ресурсов. Bluefish поддерживает многие языки программирования и разметки.


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


Автономный надплатформенный веб-управляемый javascript/HTML-редактор, отображающий набираемый текст в виде типографской страницы, выпущенный Moxiecode Systems AB по LGPL-лицензии в качестве ПО с открытым исходным кодом. TinyMCE может преобразовывать текстовые области HTML TEXTAREA и прочие HTML-элементы в объекты редактирования. TinyMCE запросто встраивается в другие системы управления контентом.


Приложение является совместной разработкой консорциума W3C и института INRIA в рамках проекта WAM (Web, Adaptation and Multimedia - "Веб, адаптация и мультимедиа"). Поддерживает HTML 4.01, XHTML 1.0, XHTML Basic, XHTML 1.1, HTTP 1.1, MathML 2.0, многие функции CSS 2 и SVG.

Для того, чтобы выяснить насколько хорошо они справляются со своими обязанностями.

Эти приложения во многом схожи. Все три прежде всего редакторы кода с выделением синтаксиса, с умным форматированием и другими функциями, упрощающими набор и редактирование кода. Screem тесно связан с GNOME, в то время как Bluefish прекрасно себя чувствует как на KDE, так и на GNOME. Quanta Plus - KDE-приложение, которое распространяется вместе с KDE. Все они поддерживают визуальное редактирование, называемое WYSIWYG (what you see is what you get - что видишь, то и получаешь), в купе с расширенными возможностями редактирования кода. Эти редакторы могут работать с HTML , JavaScript , Cascading Style Sheets (CSS) и другими языками разметки и скриптов. Также имеется возможность для управления веб-сайтами и веб-проектами, включая поддержку CVS .

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

Я протестировал каждую программу вместе с Adobe"s Spry Framework (выпущен под лицензией BSD), который позволяет добавить AJAX (Asynchronous JavaScript and XML) на веб-сайт. Spry Framework включает набор скриптов JavaScript и таблицы стилей. Использование и модифицирование Spry-виджетов требует простого редактирования HTML и CSS. Это и сделало Spry подходящим компаньоном для моих тестов. В этой тройке редакторов я уделял особое внимание тем функциям, которые я ценю в коммерческих приложениях для веб-дизайна, например, автоматическое закрывание тэгов, выбор параметров тэгов (вы набираете тэг, а редактор предлагает вам список возможных параметров и значений), поддержка прикрепленных CSS- и JavaScript-файлов.

Screem справляется с большей частью работы, связанной с созданием и редактированием веб-страницы. Когда вы создаёте новую страницу, Screem попросит вас ввести основную информацию, а затем поможет настроить главные элементы в тэгах head и body .

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

Интерфейс Screem содержит 2 панели инструментов: главная панель для основных операций (открывание, печать и редактирование файлов) и панель помощников, на которой располагается 9 кнопок для девяти помощников. С ними вы можете легко добавить и настроить различные элементы: цвета, формы, ссылки, изображения и таблицы.

Слева также имеется боковая панель, которая может отображать 5 окошек:

  • Файлы;
  • Дерево документов, удобно для навигации по страницам на редактируемом сайте;
  • Список параметров, которые динамически меняются в зависимости от набираемого тэга;
  • Символы для работы с си-тэгами , если таковые имеются на вашем веб-сайте.
  • Screem поддерживает 4 вида отображения веб-страницы:

  • в виде кода - не что иное, как обычное окно редактирования;
  • в виде дерева - копия дерева документа, которое отображается на боковой панели;
  • превью - показывает, как будет выглядеть страница в браузере. Один недостаток - основанные на JavaScript элементы Spry не отображаются;
  • в виде ссылок - диаграмма, на которой показано как остальные страницы сайта связаны с текущей и их статус.
  • Под простым интерфейсом Screem спрятан мощный HTML-редактор. Только хотелось бы, чтобы он легче устанавливался под KDE. Я тестировал Screem на Ubuntu LiveCD, чтобы избежать компиляции и загрузки GNOME-библиотек, необходимых для работы этого редактора на KDE. И всё равно, Screem - яркий пример приложения, которое отлично справляется с выбранной задачей, используя при этом минимум дополнительных функций. Если вы используете GNOME, то Screem может вам подойти. Если же вы используете KDE или другое окружение, то придётся загружать дополнительные библиотеки для того, чтобы работать с этим редактором.

    Bluefish

    Редактор Bluefish во многом сложней, чем Screem, но зато более универсален. Помимо HTML и CSS, он позволяет редактировать C, Java, Perl, Python, XML и несколько других языков. Для работы с HTML и CSS у этого редактора схожие с Screem возможности. Однако, в отличие от последнего, Bluefish не предлагает списка параметров тэга на выбор, а также не изменяет закрывающего тэга при изменении открывающего.

    И тем не менее, Bluefish хорошо организован и прост в использовании. Через меню тэгов можно выбрать тэг и применить его к выделенному тексту или же просто вставить тэги, если текст не выделен. Тэги в меню разделены на 9 категорий: Заголовки, Особые, Форматирование, Контекстное Форматирование, Общее форматирование, Таблица, Список, Форма и Разное. Меню "Диалоги" предоставляет несколько диалогов (аналог помощников в Screem) для выполнения различных задач: добавление ссылки, таблицы, формы или CSS-стиля. В диалогах вы вводите или же выбираете из списка значения параметров для различных тэгов, которые Bluefish вставит в документ. Через диалоги также производится начальная настройка документа путём добавления мета-тэгов, ссылок на таблицы стилей и т.п. Меню не зависят от контекста, то есть если вы редактируете Python-файл, они всё равно будут предоставлять функции для работы с HTML.

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

    Bluefish - очень способный HTML-редактор, особенно если вам приходится много писать на PHP, JavaScript, Java и других поддерживаемых языках. Всё редактирование в Bluefish по сути происходит через меню, что делает его не таким интерактивным как Screem, который делает всё то же самое, но динамически, в то время как я печатаю. Однако, возможности Bluefish уходят далеко за рамки простого HTML- и CSS-редактирования. Плюс ко всему, он без проблем устанавливается и запускается как под KDE, так и под GNOME.

    Quanta Plus

    По сути своей Quanta Plus - это редактор кода. У него есть некоторые WYSIWYG-возможности, но они не так полезны, как может показаться на первый взгляд. Стоило добавить таблицу на небольшую веб-страницу, как у меня перестало работать превью. Это меня несколько удивило, так в это же время была загружена более сложная страница, и её превью отображалось нормально. Но даже когда превью работает нормально, то присутствует достаточно странная поддержка WYSIWYG-редактирования. Например, при нажатии на клавишу "Enter" вставляется тэг разрыва строки, вместо тэга нового параграфа. То же самое происходит при редактировании списка, когда нажатие на клавишу "Enter" по идее должно создавать новый элемент списка. В общем, превью лучше использовать для просмотра результата, а не для прямого редактирования.

    Если не учитывать всё выше сказанное, то Quanta Plus - поистине могучий редактор кода. Его интерфейс гораздо сложнее, чем у Bluefish, но главная задача Quanta Plus всё-таки веб-редактирование. Этот редактор поддерживает выделение синтаксиса, скрипты и языки разметки. Как и в Bluefish, если меню предназначено для работы с одним языком, то работа с этим меню не оказывает влияния на код, написанный на другом языке. Quanta Plus позволяет пользователям создавать собственные панели инструментов для работы с конкретным языком.

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

    Ещё одна удобная функция, когда вы вставляет тэг, который обычно содержит в себе связанные тэги, то Quanta Plus автоматически добавляет последние. Например, когда вы вставили тэг упорядоченного списка, редактор автоматически добавляет открывающий и закрывающий тэги для одного элемента списка и закрывающий тэг упорядоченного списка.

    Управление CSS в Quanta Plus немного запутанно, так как осуществляется посредством двух диалоговых окон. Но если разобраться, то редактирование CSS станет очень простым. Для того чтобы создать CSS-стиль, для начала надо открыть диалог "CSS Selector", чтобы определить элемент, к которому будет применён стиль. Затем двойным щелчком по "CSS Selector" переходим в следующий диалог "CSS Editor", в котором уже можно указать все параметры стиля. В итоге получаем идеально отформатированный CSS-код.

    Quanta Plus - самый сложный редактор из трёх рассматриваемых, но в то же время самый способный. Не может не радовать, возможность настроить интерфейс Quanta Plus под свои нужды. Этот редактор предлагает всё необходимое и даже больше, чтобы удовлетворить потребности пользователей, которые занимаются написанием и редактированием HTML- и CSS-кода. Для тех кто использует GNOME, для установки Quanta Plus потребуется скачать дополнительные библиотеки, но это того стоит. У пользователей KDE таких трудностей не возникнет, потому что этот редактор встроен в KDE.

    Мой простой совет - используйте Quanta Plus для редактирования HTML- и CSS-файлов. Для тех кто не ищет лёгких путей, предлагаю следующие варианты:

  • Если вы пользователь GNOME, то ставьте Screem. Это простой, быстрый и достаточно мощный редактор для веб-редактирования. Однако, он, в отличие от Bluefish и Quanta Plus, не предлагает таких больших возможностей для работы с языками, которые не имеют прямого отношения к веб-редактированию;
  • Если вы пользователь GNOME и нуждаетесь в больших возможностях, то установите Quanta Plus, загрузив дополнительные библиотеки;
  • Если вы пользователь KDE и нуждаетесь в редакторе кода, то Quanta Plus - ваш выбор. Не обращайте внимания на WYSIWYG-функции и воспользуйтесь всей мощью редактирования, особенно для CSS;
  • Для пользователей Xfce, Quanta Plus будет работать нормально. Screem потребует дополнительных библиотек;
  • И наконец, если вы пользователь GNOME и нуждаетесь в широких возможностях, но не желаете устанавливать дополнительные библиотеки для работы с Quanta Plus, то Bluefish создан специально для вас.
  • Приятно, что существует по крайней мере три достойных приложения для веб-разработок под Линукс. Screem, Bluefish и Quanta Plus не настолько всеобъемлющие как лидер в этой области Adobe Dreamweaver , но подобрались достаточно близко к нему. Quanta Plus практически аналог Dreamweaver. С учётом того, что цена последнего достаточно высока, и он не поддерживает Линукс по умолчанию, вышеописанная тройка является отличным выбором. Помимо того что они бесплатны, эти редакторы к тому же награждают своих пользователей отличным результатом.

    Если вам понравилась статья, поделитесь ею с друзьями:

    Обновление (20170929): В течение прошлого года я использовал потрясающую среду IDE Pinegrow (https://pinegrow.com), и я искренне рекомендую ее. BlueGriffon, о котором я упоминал ниже в своем ответе несколько лет назад, устарел и сильно отстает от Pinegrow в разработке.

    Я рекомендую BlueGriffon . Он БЕСПЛАТНЫЙ, многофункциональный, работает на всех основных платформах и имеет много хороших дополнений, некоторые из которых коммерческие. У меня есть (коммерческий) плагин CSS, и я очень доволен им. Я использовал KompoZer до того, как нашел BlueGriffon. Я смиренно верю, что Amaya не может конкурировать с этими двумя.

    Хорошей альтернативой является Eclipse с некоторым плагином WYSIWYG, как, например, «Проект инструментов JavaServer Faces (JSF)», который является частью «Eclipse Webtools».

    Сиань

    К сожалению, BlueGriffon не стабилен: как только я щелкаю мышью по некоторым частям панели управления, он возникает с ошибкой сегментации.

    user1908895

    К сожалению, Blue Griffon не является открытым исходным кодом и не является бесплатным. О, можно скачать исполняемый файл и источник доступен. Но это было связано с любой полезной функциональностью. Нужно купить плагины с закрытым исходным кодом, чтобы сделать программу работоспособной. Кроме того, похоже, что он отказался от 32-битных пользователей Ubuntu. У меня есть деловые причины, чтобы держать свою компанию на 12.04LTS как можно дольше, чтобы мы были в дураках. Наконец, отказ Mozilla от XUL API означает, что эта программа вместе со всеми другими, использующими XUL API, умрет. Не продукт, чтобы тратить свое время. Джон

    Фахим Митха

    Мне нужно было сделать быстрое и грязное редактирование html-страницы, и бинарный файл, который я скачал с сайта BlueGriffon, сработал для меня (Debian jessie). Тем не менее, он недоступен в Debian / Ubuntu, хотя в