Визуальный HTML-редактор онлайн

Для корректного отображения нумерованного списка добавьте этот код в тег <style></style> или в файл style.css:


            .ordered-list {
            counter-reset: point;
            list-style: none;
            }
            .ordered-list li {
            padding-left: 0;
            margin-top: .3em;
            margin-bottom: .7em;
            }
            .ordered-list li::before {
            content: counter(point) ". ";
            counter-increment: point 1;
            position: relative;
            opacity: .5;
            margin-right: 5px;
            margin-left: 0;
            }
            .ordered-list .level-1 {
            counter-reset: sublist;
            }
            .ordered-list .level-2::before {
            content: counter(point) "." counter(sublist) ". ";
            counter-increment: sublist;
            }
            .ordered-list .level-2 {
            font-size: .92em;
            counter-reset: sublist2;
            margin-left: 30px;
            }
            .ordered-list .level-3 {
            font-size: .88em;
            counter-reset: sublist3;
            margin-left: 70px;
            }
            .ordered-list .level-3::before {
            content: counter(point) "." counter(sublist) "." counter(sublist2) ". ";
            counter-increment: sublist2;
            }
            .ordered-list .level-4 {
            font-size: .84em;
            counter-reset: sublist4;
            margin-left: 90px;
            }
            .ordered-list .level-4::before {
            content: counter(point) "." counter(sublist) "." counter(sublist2) ". " counter(sublist3) ". ";
            counter-increment: sublist3;
            }
            .ordered-list .level-5 {
            font-size: .8em;
            counter-reset: sublist5;
            margin-left: 105px;
            }
            .ordered-list .level-5::before {
            content: counter(point) "." counter(sublist) "." counter(sublist2) ". " counter(sublist3) ". " counter(sublist4) ". ";
            counter-increment: sublist4;
            }
            .ordered-list .level-6 {
            font-size: .76em;
            counter-reset: sublist6;
            margin-left: 115px;
            }
            .ordered-list .level-6::before {
            content: counter(point) "." counter(sublist) "." counter(sublist2) ". " counter(sublist3) ". " counter(sublist4) ". " counter(sublist5) ". ";
            counter-increment: sublist5;
            }

У вас уже есть аккаунт? Авторизоваться.

Прочитал и принимаю условия Оферты сервиса.

Скачать отчет с демо-данными в XLS-файле

Рейтинг инструмента

(31 оценок)

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

Для чего используют HTML редактор

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

HTML редактор онлайн - фото

Принцип работы онлайн-инструмента

Сервис создан на базе CKEditor — свободного WYSIWYG-редактора для веб-страниц. Его особенности:

1

Программа в режиме онлайн создает чистый HTML-код для вставки на сайт.
2

Редактор совместим с современными браузерами: Opera, Safari, Firefox, Internet Explorer, Google Chrome.
3

Интегрирован с ASP.Net, АSP, ColdFusion, PHP, JavaScript и другими языками программирования.

Вариативность онлайн-проверки

Для удобства можно менять настройки:

Программа позволяет работать в визуальном режиме и в режиме HTML-кода.

Поддерживает режим окна и полноэкранный режим.

Позволяет создавать страницу с нуля или по готовым шаблонам.

Создает файл с обвязкой (дополнительной контекстной навигацией) и без обвязки.

Как пользоваться инструментом

Возможности HTML-редактора:

Вводит и удаляет теги b/strong/em/i (жирный, наклонный шрифт).

Чистит текст от повторяющихся пробелов и пустых абзацев.

Меняет символы по стандартам веб-типографики (например, исправляет кавычки-«лапки» на «елочки»).

Верстает таблицы.

Вставляет ссылки, изображения, анимацию, смайлы.

Меняет шрифт, цвет текста и фона.

Вводит и удаляет ссылки и якоря.

Проверяет орфографию.

Форматирует текст: выделяет заголовки, вставляет нумерованные и маркированные списки.

Позволяет прописать CSS-стили отдельных фрагментов.

Интерфейс онлайн-сервиса интуитивно понятный. На некоторых функциях остановимся подробнее.

Чтобы вставить текст, воспользуйтесь клавишами Ctrl+C Ctrl+V.

Основной режим работы — визуальный.

HTML редактор онлайн - фото 2

Можно выбрать режим HTML-кода (включается кнопкой «Источник»), чтобы прописать теги и стили вручную.

HTML редактор онлайн - фото 3

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

HTML редактор онлайн - фото 4

Чтобы вставить ссылку, кликните на кнопку и выберите один из типов — адрес электронной почты, обычная ссылка или ссылка на якорь.

HTML редактор онлайн - фото 5

Сервис содержит более 200 спецсимволов для HTML-кода.

HTML редактор онлайн - фото 6

Редактор позволяет форматировать отдельные фрагменты текста, помещенные в Div. Кликните на кнопку «Создать Div-контейнер», введите стиль CSS и при необходимости дополнительные параметры: идентификатор, код языка, заголовок.

HTML редактор онлайн - фото 7

Результат скачивается на компьютер, он представляет собой файл в формате .html, это готовая страница для вставки на сайт.

Инструмент бесплатный, лимиты не списываются.

Получение результатов анализа в виде CSV‑файла

Для удобства анализа и работы с выходными данными имеется возможность выгрузить результаты в формате CSV, как перед процессом проверки, так и после неё. Файл с источниками открывается в Excel для дальнейшей работы.

Преимущества сервиса

Наглядность: можно сразу оценить результат и поправить ошибки.

Интуитивно понятный, привычный интерфейс.

Набор функций больше, чем во встроенных редакторах стандартных CMS.

Чистота HTML-кода.

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

Дополнительные инструменты

Другие инструменты Пиксель Тулс, которые могут быть вам полезны:

Анализ XML-карты сайта. Сервис проверяет корректность карты сайта, находит ошибки валидности, страницы с кодом ответа, отличным от 200 OK.

Комплексная оценка текста. Сервис проверяет текст на заспамленность, количество стоп-слов, естественность по закону Ципфа, определяет частотность основных слов, формирует семантическое облако.

Узнайте, как увеличить SEO‑трафик сайта в 3+ раза?

Укажите домен вашего сайта, приоритетные регионы продвижения и получите самый
полный список точек взрывного роста трафика и заявок с вашего сайта

Выберите ваш сайт

укажите сайт, регион и близких вам конкурентов

Немного магии поисковой
оптимизации —

мы подготовим для вас не менее 25 персональных рекомендаций

Отслеживайте прогресс

и получайте регулярные советы, рост трафика и продаж