Html редактор онлайн: топ-5 лучших бесплатных визуальных онлайн редакторов «хтмл»

Художник рисует мазками

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

Можно сказать, что программисты тоже пишут код своеобразными «мазками»: идентификатор за идентификатором, оператор за оператором, expression, statement, строчка за строчкой получаются творения в 10, в 100, в 1000 строк кода.

Но, в отличие от художника, программисты не могут «отойти на шаг назад». Художник использует машинерию зрительной коры, у которой есть механизм зума. А когда пишется код, используются механизмы кратковременной и долговременной памяти, у которых механизм зума, к сожалению, архитектурно не предусмотрен.

Поэтому одна из главных проблем, существующих в разработке софта — это то, что мы называем Software complexity problem, что можно перевести на русский как «проблема сложности программ».

Но ведь есть огромное количество других областей, где точно также накапливается сложность. Например, ракетостроение. У людей, которые делают космические корабли, немало сложностей, правда?

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

Редактор исходного кода

Редактор HTML кода с подчеркнутым синтаксисом обладает множеством полезных функций, таких как:

• Счетчик номера строки
• Выделение активной строки
• Выделение открывающих и соответствующих закрывающих тегов
• Автоматическое закрытие тегов
• подробнее см. ниже …

Варианты очистки:

• Встроенные стили
  – Удалить каждый style атрибут тега. Рекомендуется использовать отдельный файл CSS для стилизации.
• class & id
  – Удаляет все атрибуты class и id . Функция полезна если вы переносите статью с одного сайта на другой и хотите избавиться от чужеродных классов.
• Пустые теги
  – Удаляет теги, которые не содержат ничего или содержат только пробел.
• Теги с одним пробелом
  – Удаляет теги, которые содержат один пробел, такие как
  <p>&nbsp;</p>
• Повторяющиеся пробелы
  – Удаляет повторяющиеся пробелы, вызванные плохой практикой смещения текста вправо и настройки пропусков в тексте:
  <p>&nbsp;&nbsp;&nbsp;</p>
• Удалить комментарии
  – Избавиться от HTML-комментариев:
  <!— … —>
• Атрибуты тега
  – Стирает все атрибуты тега, включая стили, классы и т. д. Этот параметр не влияет на src изображений и атрибут hrefссылок, поскольку что в противном случае эти теги станут бесполезными.
• В простой текст
  – Удаляет все теги, форматирование и оставляет простой текст.

Параметры редактора HTML

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

• Отменить
  – Восстановить документ в предыдущее состояние. Вернитесь на предыдущий этап, если вариант очистки не принес желаемого результата.
• Новая страница
  – Стереть весь документ, чтобы начать с чистого листа.
• Сжать
  – Табуляция и новые строки используются для того, чтобы сделать файл HTML более читабельным для человека, но не влияют на отображение в веб-браузере. Удалите эти ненужные знаки для минимизации размера файла и более быстрой загрузки страницы.
• Tree view
  – Задать отступ текста для выделения иерархии тегов. С этой опцией вы можете сделать сжатые документы вновь доступными для чтения.
• Кодировка символов
  – Решите, хотите ли вы кодировать специальные символы или нет. Например
  &nbsp;
• Демо-контент
  – Заполните приборную панель демо-контентом, который поможет вам экспериментировать с этим инструментом. Демо содержит заголовок, таблицу, изображения, пункты и другие элементы.
• Прокручивать редакторы вместе
  – По умолчанию два редактора прокручиваются вместе, если документ большой. Вы можете отключить эту функцию.
• Добавить тарабарский текст
  – Добавляет пункт»Lorem ipsum» в конец файла. Нажмите еще раз, чтобы добавить другой.

O

object-fit	Указывает, как содержимое заменяемого элемента должно быть установлено в поле, установленное его используемой высотой и шириной
object-position	Задает выравнивание заменяемого элемента внутри его поля
opacity	Задает уровень непрозрачности для элемента
order	Задает порядок гибкого элемента по отношению к остальным
orphans	Задает минимальное число строк, которые должны быть оставлены в нижней части страницы при возникновении разрыва страницы внутри элемента
outline	Задает все свойства структуры в одном объявлении
outline-color	Задает цвет контура
outline-offset	Смещение контура и его выводит за пределы края границы
outline-style	Задает стиль контура
outline-width	Задает ширину контура
overflow	Указывает, что происходит, если содержимое переполнено полем элемента
overflow-wrap	Указывает, может ли обозреватель разрывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы вместить ее содержащее поле)
overflow-x	Указывает, следует ли обрезать левый/правый край содержимого, если оно переполнено областью содержимого элемента
overflow-y	Указывает, следует ли обрезать верхний/нижний край содержимого, если оно переполнено областью содержимого элемента

Профессиональные инструменты для веб разработки

Cloud9IDE

Данный редактор позволяет работать не только с HTML кодом, поддерживается огромный список языков программирования, включая JavaScript, PHP, Perl, Pyton и др.

Но главная фишка не в этом. Cloud9ide позволяет работать с кодом одновременно нескольким программистам – в личном кабинете открывается доступ для определенного круга специалистов. В связи с этим обязательна регистрация.

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

ShiftEdit

Данный онлайн редактор по функционалу напоминает описанный выше Cloud9ide, он также поддерживает массу языков, вы можете программировать для своего сайта и обычный HTML код и JS и PHP. С его помощью можно напрямую подключиться к своему хостингу по FTP и редактировать файлы прямо с него. Интерфейс разделен на 3 части: основная с кодом, слева идет список файлов, справа предварительный просмотр результата.

Поддерживается работа с Dropbox и Google Drive.

Все теги в коде подсвечиваются для наглядности. Присутствует автоподставка закрывающих тегов, автозаполнение данных и подсветка незакрытых элементов.

Форматирование позволяет автоматически «причесать» неприглядный участки кода, добавив отступы и переносы строк.

По этому HTML редактору есть краткая видео инструкция, думаю не лишним будет ее привести:

HTML & CSS Reference

HTML Tags

Full list of all HTML elements.

This is an alphabetical list of HTML elements, linking to a full page of details for each element.

CSS properties, functions, @-rules, data types, color values, and more — all on one page. Filter by keyword.

Extensive list of copy/paste code examples. Copy and paste straight into your website, blog, or newsletter.

CSS Color

Loads of CSS color resources. Color pickers, color charts, converters, generators. Full reference for color properties and color values.

HTML Tutorial

Walks through the basics, such as creating your first web page. Then covers topics including tables, adding color, images, forms, image maps, and more.

CSS Tutorial

CSS is the standard way to style web pages. It allows you to set colors, fonts, widths, heights, margins, padding, and much more.

Templates & Website Builder

• HTML Templates

  Free downloadable templates that you can use to start your website from.

  Responsive templates that automatically adjust their layout according to the screen size.

  Includes corporate, gallery, and portal style templates.

  Also fully customizable. Once you’ve downloaded a template, you’re free to do whatever you want with it.

  Go to HTML Templates

• While online editors can provide a quick and convenient way to generate HTML code, they do have their limitations.

  If you need to do some serious web development work, you’ll probably need an offline editor — one that you can download and use on your own desktop or laptop.

  For a desktop HTML editor, try any of the following:

  • Brackets
  • SeaMonkey
  • CoffeeCup
  • HTML-Kit

About the HTML Editor on this Page

The above online HTML editor is known as «CKEditor», which can be downloaded from the CKEditor website. It is distributed under the GPL, LGPL, and MPL open source licences.

• Online Editors
• Full Editor

Phabricator

Это целый набор open-source инструментов от Phacility, облегчающих работу по оценке кода. Можно использовать облачную версию, а можно загрузить всё на свой сервер. Если использовать второй вариант — ограничений нет. В случае же облачной версии нужно будет платить от $20 за пользователя в месяц. Верхняя планка  — $1000 в месяц. Все платные предложения включают техническую поддержку, плюс 30-дневный пробный режим.

Основные функции:

• Поддержка Git, Mercurial и SVN
• Встроенные чаты, канбан-доски и другие инструменты
• API для создания скриптов, взаимодействующих с Phabricator через HTTP JSON API

Rhodecode

Онлайн-инструмент, который поддерживает три версии систем контроля: Mercurial, Git и Subversion. Сервис не бесплатен. Цены начинаются с $8 в месяц за пользователя. Есть возможность заплатить сразу $75 за пользователя в год, что позволяет сэкономить пару десятков долларов. Если не хочется платить, можно загрузить community-edition, установив на своём сервере.

Основные функции:

• Визуальный лог изменений.
• Онлайн-редактор кода.
• Интеграция с существующими проектами.
• Возможность совместной работы как нескольких разработчиков, так и больших команд.

Завершая подборку, повторим: описанные инструменты для ревью кода не призваны полностью заменить человека. Но они позволяют ускорить проверку во много раз, что даёт возможность значительно экономить время и ресурсы.

А какими инструментами пользуетесь вы? Ждём комментариев, поделитесь с коллегами 🙂

Способ 2: JsFiddle

У онлайн-сервиса JsFiddle есть свои особенности: например, пользователю доступно подключение популярных фреймворков, а также быстрое переключение между языками, которые используются для написания кода.

1. Оказавшись на главной странице JsFiddle, можно выбрать одну из заготовок для дальнейшего программирования или начать писать код с нуля.

Редактор JS находится снизу и по необходимости можно изменить его размер, передвигая рамки области. Тут осуществляется основной процесс написания кода.

Задействуйте выпадающее меню, если хотите переключиться на старую версию языка или выбрать другой ЯП.

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

Для проверки кода используйте кнопку «Run». К сожалению, компилирование в режиме реального времени JsFiddle не поддерживает.

В небольшом окне консоли справа появятся сведения об успешном компилировании или отобразится информация о возникших ошибках во время этого процесса.

Сам результат будет выведен в отдельной области над консолью.

Используйте выпадающее меню «Settings», если хотите изменить внешний вид редактора, настроить консоль, параметры строк и поведение онлайн-сервиса.

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

Если вы хотите сохранить проект или получить дополнительные функции редактора, потребуется зарегистрироваться в JsFiddle. Далее ознакомьтесь с тарифными планами и выберите один из них в том случае, когда планируется задействовать возможности онлайн-сервиса на постоянной основе без каких-либо ограничений.

1.CSSDesk

Мы начали с CSSDesk потому, что он один из старейших в нашем списке. Это очень простой в понимании онлайн-инструмент для написания HTML и CSS.

Плюсы:

Несомненно, у этого инструмента большое количество плюсов. Он очень удобен в пользовании. Есть три основных раздела: HTML, CSS и предварительный просмотр, размеры которых могут быть легко оптимизированы одним щелчком. Сразу виден результат вашего кода. Всё очень просто: откройте сайт и начните создавать.

Среди плюсов также подсветка синтаксиса. А так же такая простая особенность (которую нечасто встретишь в подобного рода инструментах ) как нумерация строк здесь также присутствует.

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

Минусы

Честно говоря, их очень мало. Самым большим недостатком для хардкор-кодеров является отсутствие поддержки JavaScript. Если это вас смущает, попробуйте один из других вариантов.

Редактор кода и ничего лишнего

Mail.ru Group запустила бесплатный онлайн-редактор кода с поддержкой совместной работы на платформе для проведения ИТ-чемпионатов All Cups. Об этом CNews сообщил представитель компании.

Новый инструмент отличается минималистичным дизайном и скромной функциональностью. Он позволяет программистам писать код в одиночку или командой, запускать его, чтобы проверить работоспособность, а также демонстрировать решение задач по программированию в реальном времени.

Сервис поддерживает такие популярные языки программирования как Python 3.8, Java 11, C++ 17, PHP 7.4, Node JS 14, Go 1.15, Erlang OTP 23, Rust 1.51, Swift 5.3.3, обеспечивая подсветку синтаксиса. По словам представителя сервиса, в будущем перечень поддерживаемых языков будет расширяться.

«Hello, world!» на C++ в редакторе кода на All Cups

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

По мнению представителей All Cups, инструмент будет полезен программистам, распределенным командам разработчиков, рекрутерам и руководителям, которые дают кандидатам тестовые задания, которые предполагают написание программного кода.

Типы редакторов

Есть два основных типа:

1. Текстовый. Классический вариант для тех, кто знаком с HTML-разметкой, знает теги, CSS-классы, умеет работать с контентом внутри страницы и понимает, как его оформлять. Эти навыки необходимы, так как в редакторе разработчик должен работать вручную, прописывая свойства с помощью текстовых параметров.
2. Визуальный. Решение для тех, кто не понимает, что представляет собой HTML и как оформлять страницы с помощью текста. Обычно содержит в себе блоки, напоминающие конструктор. Перемещая их, пользователь может «собрать» полноценный сайт, не написав и строчки кода.

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

Div Table Styling

Make sure you apply the CSS code below when you publish tables converted to div elements. Try the interactive online table styler which can generate grids from both div and table elements. These are both supported by this editor.

Please note that the class names used by us are slightly different than the ones used by DivTable.com.

.rTable { display: table; width: 100%;}
				.rTableRow { display: table-row; }
				.rTableHeading { background-color: #ddd; display: table-header-group; }
				.rTableCell, .rTableHead { display: table-cell; padding: 3px 10px; border: 1px solid #999999; }
				.rTableHeading { display: table-header-group; background-color: #ddd; font-weight: bold; }
				.rTableFoot { display: table-footer-group; font-weight: bold; background-color: #ddd; }
				.rTableBody { display: table-row-group; }
				

Click and copy the code from the field below:
.rTable { display: table; width: 100%;}
.rTableRow { display: table-row; }
.rTableHeading { background-color: #ddd; display: table-header-group; }
.rTableCell, .rTableHead { display: table-cell; padding: 3px 10px; border: 1px solid #999999; }
.rTableHeading { display: table-header-group; background-color: #ddd; font-weight: bold; }
.rTableFoot { display: table-footer-group; font-weight: bold; background-color: #ddd; }
.rTableBody { display: table-row-group; }

You can use this website absolutely free but by using this tool you accept to link to this website or our partner sites. If you don’t want this, please subscribe for a pro HTMLG license and you get even more HTML editing features.

Сервис для «причесывания» кода Dirty Markup

Данный сервис нельзя отнести к онлайн редакторам, хотя он позволяет работать с HTML, JS и CSS кодом довольно эффективно, но визуальный режим в нем не предусмотрен. Задача инструмента в очистке кода – из любого корявого набора тегов, внесенного в документ как попало, Dirty Markup делает удобный для восприятия структурированный код, где каждый логический элемент и блок легко читается и понимается.

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

На скриншотах ниже приведены два одинаковых на 100% кода, один оптимизирован и его невозможно понять, второй легко читаем человеком.

Вот такой полезный инструмент – может очень пригодиться при желании внести правки в ранее оптимизированный сайт.

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

Advanced options & third-party software

For most users, the flow described above will be sufficient. However, you can further customise it, which is particularly useful for those using third-party software that is installed from software channels outside the standard Ubuntu archives. For instance, if you’ve installed the Google Chrome, Skype or VirtualBox software manually, the updates for these applications are provided through separate repositories.

By default, non-Ubuntu software channels will be disabled during the upgrade. You will need to manually enable them after the upgrade is completely. Alternatively, you can instruct the upgrade tool to allow these additional packages.

This can be done by running do-release-upgrade with the –allow-third-party flag, as mentioned earlier.

B

backface-visibility	Определяет, должна ли быть видна задняя грань элемента при обращении к пользователю
background	Сокращенное свойство для задания всех свойств фона в одном объявлении
background-attachment	Определяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано
background-blend-mode	Задает режим наложения для каждого слоя фона (цвет/изображение)
background-clip	Определяет, насколько фон (цвет или изображение) должен расширяться в элементе
background-color	Задает цвет фона элемента
background-image	Задание одного или нескольких фоновых изображений для элемента
background-origin	Задает исходную позицию фонового изображения
background-position	Определяет положение фонового изображения
background-repeat	Устанавливает, если/как фоновое изображение будет повторяться
background-size	Определяет размер фоновых изображений
border	Сокращенное свойство для ширины границы, стиля границы и цвета границы
border-bottom	Сокращенное свойство для задания всех свойств нижней границы в одном объявлении
border-bottom-color	Задает цвет нижней границы
border-bottom-left-radius	Определяет радиус границы нижнего левого угла
border-bottom-right-radius	Определяет радиус границы нижнего правого угла
border-bottom-style	Задает стиль нижней границы
border-bottom-width	Задает ширину нижней границы
border-collapse	Устанавливает, должны ли границы таблицы сворачиваться в одну границу или быть разделены
border-color	Задает цвет четырех границ
border-image	Сокращенное свойство для установки всех свойств Border-Image-*
border-image-outset	Определяет величину, на которую область изображения границы выходит за границы рамки
border-image-repeat	Указывает, должно ли изображение границы повторяться, округляться или растягиваться
border-image-slice	Определяет способ среза изображения границы
border-image-source	Указывает путь к изображению, которое будет использоваться в качестве границы
border-image-width	Задает ширину изображения границы
border-left	Сокращенное свойство для задания всех свойств левой границы в одном объявлении
border-left-color	Задает цвет левой границы
border-left-style	Задает стиль левой границы
border-left-width	Задает ширину левой границы
border-radius	Сокращенное свойство для установки всех четырех границ-*-свойства RADIUS
border-right	Сокращенное свойство для задания всех свойств правой границы в одном объявлении
border-right-color	Задает цвет правой границы
border-right-style	Задает стиль правой границы
border-right-width	Задает ширину правой границы
border-spacing	Устанавливает расстояние между границами соседних ячеек
border-style	Задает стиль четырех границ
border-top	Сокращенное свойство для задания всех свойств верхнего края в одном объявлении
border-top-color	Задает цвет верхней границы
border-top-left-radius	Определяет радиус границы верхнего левого угла
border-top-right-radius	Определяет радиус границы верхнего правого угла
border-top-style	Задает стиль верхней границы
border-top-width	Задает ширину верхней границы
border-width	Задает ширину четырех границ
bottom	Устанавливает положение элементов в нижней части родительского элемента
box-decoration-break	Задает поведение фона и границы элемента при разрыве страницы или, для линейных элементов, при разрыве строки.
box-shadow	Прикрепление одной или нескольких теней к элементу
box-sizing	Определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет
break-after	Задает поведение разрыва страницы, столбца или региона после созданного поля
break-before	Задает поведение разрыва страницы, столбца или региона перед созданным полем
break-inside	Определяет поведение разрыва страницы, столбца или региона в созданном поле

GitHub

Наверное, нет разработчика, который бы не слышал о GitHub, но как автоматический ревьюер кода он известен гораздо меньше. Здесь у него есть две версии — бесплатная, с ограничением по количеству пользователей, и платная, от $7 в месяц.

В дополнение к обычным инструментам запроса на изменения, есть возможность проверят историю изменений, комментировать участки кода, разрешать простые конфликты при помощи веб-интерфейса. Кроме того, GitHub даёт возможность использовать и сторонние инструменты ревью кода.

Основные функции:

• Сравнение фрагментов кода лоб в лоб.
• Просмотр истории отдельных фрагментов кода без просмотра всего документа — так называемый blame view.
• Создание white-листов по отдельным веткам. 

Final Words about Web based Code Editors

Web based code editors are able to find use in multiple scenarios. Whether you require to jot together a quick-prototype of your projects, or you want to share a demo with your client, or even when you want to collaborate with others in your team, these online tools would make a good choice to keep in your bookmark.

The web-based code editors are also great for educational purposes, as they require no setup and can be easily accessed from devices such as chromebooks too.

In this article, we have limited ourselves to the code editors available for front-end web development. However, there are many other code editors which can help you write code online in many other programming languages such as Go or C#, VB.NET & F#. In fact there are even complete development environments available in the cloud which can be accessed from your browser such as Koding and Could9.

If you do front-end web development, then do leave us a comment about your favorite online code editor and in case we missed mentioning yours, we would certainly like to know.

Простые HTML онлайн редакторы

Cut Editor

Данный визуальный HTML редактор многие считают эталоном, так как его панель настройки содержит практически всё, что только может придумать вебмастер – смайлики, youtube видео, даже возможность вставки кода с подсветкой тегов для улучшения восприятия.

В Cut Editor реализовано переключение трех режимов:

• Визуальный;
• Режим работы с кодом;
• Предварительный просмотр результата.

Переключение идет вкладками в нижней части окна редактора.

Данный WYSIWYG HTML редактор может быть интегрирован в любой сайт, инструкцию найдете там же у разработчиков. Панель управления можно изменить, для этого над формой есть окно с выпадающим списком, предлагающим 5 наборов управляющих кнопок.

CKEditor

Данная разработка не просто онлайн HTML-редактор, а встраиваемый модуль, который можно установить на любой сайт, поэтому встречается он на многих ресурсах. При желании, вы можете разместить его и на своем проекте – для этого возьмите исходники тут – ckeditor.com.

Действующий модуль редактора работает тут.

Это WYSIWYG редактор с большим количеством функций. Здесь есть и форматирование текста и вставка гиперссылок и даже онлайн проверка орфографии.

Оформляете страницу нужными кнопками, а в конце переключаете с визуального отображения на готовый HTML код кнопкой «Источник».

Rendera

Двухоконный онлайн HTML 5 редактор – удобен тем, что на одном экране вы можете работать одновременно с кодом и видеть результат вносимых правок. Данный редактор не подойдет для людей совсем не владеющих HTML, так как нацелен на работу непосредственно с кодом. В стандартном наборе,  есть только 5 элементов для быстрой вставки – это маркированный список, таблица, картинка, форма и выбор. Все остальное придется прописывать самостоятельно с помощью тегов.

Изменения в коде воспроизводятся в визуальной части не в реальном времени, а после нажатия кнопки «Render».

Редактор умеет работать с CSS и JavaScript.

Vulk

Крайне простой встраиваемый HTML редактор WYSIWYG типа. Минимум настроек, легкий вес и простота позволяют добавить его куда угодно, исходники скачиваются прямо с сайта разработчика – всё на русском языке.

В наборе панели управления есть все наиболее востребованные функции – простенько, но со вкусом.

Внизу есть вкладки для переключения онлайн редактора с визуального в HTML режим.

JSBin

Простой двухоконный онлайн редактор с поддержкой HTML, CSS и JS кода. В левой части мы пишем теги и вставляем нужный контент, а в правой смотрим, что из этого получается в режиме реального времени. Подсветка тегов позволяет следить за правильностью синтаксиса. Удобен для отладки Java скриптов, работа которых не поддерживается во многих визуальных редакторах.

Переключение на нужный тип кода расположено над рабочей областью.