Мудрый ГикПолезные сервисы и статьи → Визуальный HTML онлайн редактор (WYSIWYG)

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

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

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

Таблица основных возможностей сервиса. В левой колонке показан иконка, в средней дано название функции, а в правой её описание.

Главные функции
Вставить из WordПозволяет вставляет фрагмент текста из редактора Word с сохранением его форматирования. Фактически превращает сервис в word to html конвертер.
ИсточникПозволяет просматривать, копировать и редактировать Ваш текст в формате HTML. Финальная стадия Вашей работы, здесь получаем готовый результат.

Форматирование текста
Формат...Выделение заголовка текста (тег h1), подзаголовков (тег h2), подзаголовков 3 уровня (тег h3) и обычного текста (используется по умолчанию) (тег P). Указанное форматирование оказывает сильное влияние на продвижение страницы в поисковых системах. Поэтому другие виды форматирования, имеющиеся в этой функции, использовать не рекомендуется.
ПолужирныйВыделение фрагмента текста полужирным шрифтом (тег strong). Выделять полужирным шрифтом следует наиболее важные фразы, предложения или целые абзацы. Тег strong пользуется поисковыми системами при ранжировании сайта, однако его влияние не так велико как у заголовков.
Нумерованный списокСоздание нумерованных списков (теги ol, li). Создавать такие списки следует в первую очередь для удобства читателя, что положительным образом скажется на поведенческих факторах.
Маркированный списокСоздание маркированных списков (теги ul, li). В отличие от нумерованных списков здесь последовательность пунктов значения не имеет.
ЦитатаПомечаем фрагмент текста как цитату (тег blockquote). В тег blockquote следует заключать текст, заимствованный их других источников.
СсылкаВставка гиперссылки на другой сайт или страницу сайта (тег a). Помогает читателям получить больше информации при переходе по ссылке. А поисковым системам повысить рейтинг страницы, на которую ведёт ссылка.
ИзображениеВставка изображения. Картинка предварительно должна быть загружена в интернет и иметь Адрес. В диалоговом окне необходимо указать "Альтернативный текст".
ТаблицаВставка таблицы. Если в тексте имеются структурированные данные, то их лучше представить именно в виде таблицы.
Специальный символВставка символов, которые отсутствуют на стандартной клавиатуре.
Например: ®, ©, ™, ¥, ½.

Вспомогательные функции
ВырезатьВырезать выделенный текст.
КопироватьКопирует выделенный текст.
ВставитьВставка фрагмента текста с разбивкой на абзацы. Всё остальное форматирование удаляется.
ОтменитьОтменяет последнее произведённое действие.
ПовторитьПовторяет последнее отменённое действие.
РазвернутьРазворачивает HTML редактор на весь экран. Удобно при работе с большим текстом.

И это всё? Почему так мало функций?

Код HTML весьма богат на функционал, и в него можно добавить практически всё. Вот только встаёт вопрос, действительно ли это нужно?

Например такие вещи как формы (тег form), текстовое поле, чекбокс, радиокнопка (тег input) и прочее могут быть на сайте если только они адекватно взаимодействуют с "движком" сайта. То есть выполнять предназначенную для них функцию: оставить комментарий, голосовать и пр. А для этого необходимы навыки программирования. В противном случае данный функционал будет только вводить пользователей в заблуждение, и вызывать раздражение при пользовании Вашим сайтом.

Если, помимо вышеописанного, Вы хотите украсить свой текст такими элементами оформления как:

То такой текст превратит Вас сайт в новогоднюю ёлку которая вызовет восторг только у Ваших родных и близких. Многие популярные сайты не используют всё богатые возможности HTML в области форматирования материала.

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

WYSIWYG html онлайн редактор

Наш html редактор обладает свойством WYSIWYG, слово является аббревиатурой от англ. What You See Is What You Get, дословно переводится "что видишь, то и получишь". Это свойство позволяет в процессе редактирования отображать содержание материала максимально приближенное к тому, что Вы получите на своём сайте при вставке полученного из "источника" (кнопка ) фрагмента html кода.

Однако следует помнить, что на Вашем сайте имеются стили оформления различных элементов текста (заголовки, списки, абзацы, изображения). Как правило эти стили хранятся в файле style.css. Без подключения этого файла, т.е без размещения полученного html кода на своём сайте нельзя быть на 100% уверенным в достоверности видимого результата. Это утверждение справедливо ко всем визуальным редакторам кода.

Word to html конвертация

Наш сервис можно использовать для конвертации текста из файла word в формат html. Для этого нужно скопировать необходимый фрагмент из word, и, нажав на нашем сервисе кнопку "Вставить из Word", вставить скопированный фрагмент в появившееся диалоговое окно.

В отличи от других аналогичных конвертеров наш сервис очищает форматирование word, оставляя только самое необходимое:

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

Автор статьи: