27.11.2020
Текстовый html редактор notepad++ Html теги для текста в один клик

Текстовый html редактор notepad++ Html теги для текста в один клик

 

Приветствую вас на Планете Успеха! Тема сегодняшней публикации — текстовый html редактор notepad++, его установка, настройка и использование.

Чем этот редактор интересен и для чего нужен вебмастерам ведущим свои блоги?

Самое главное предназначение notepad++ — это открытие, редактирование готовых и создание новых html файлов, которые необходимы для создания чистого кода сайтов.

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

Как скачать бесплатно notepad++

Заходим на официальный сайт notepad++, в левой колонке сайта нажимаем Downloads.

Жмем на последнюю версию редактора.

Последняя версия редактора

На открывшейся странице сайта выбираем Download 32-bit x86 и нажимаем левой кнопкой мыши.

Важно: какой бы разрядности не был ваш компьютер или ноутбук, выбираем только 32-bit x86!

Download 32-bit x86

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

Открываем папку загрузки

Как установить notepad++

Левой кнопкой мышки кликаем дважды на установочный файл программы.

Установочный файл программы

В открывшемся окошке смотрим, чтобы язык был русский и жмем Ок.

Выбираем язык

В следующем окне приветствии нажимаем Далее.

Окно приветствия

Затем необходимо согласиться с условиями лицензионного соглашения и нажать Принимаю.

Условия лицензионного соглашения

Далее необходимо выбрать папку для установки, по умолчанию это C:\Program Files (x86)\Notepad++, если вы хотите произвести установку в другое место на своём компьютере, то нажав на обзор, выбираете нужную вам папку.

Рекомендую по умолчанию. Нажимаем Далее.

Выбор папки установки

В окошке выбора компонентов устанавливаемой программы, жмем Далее.

Выбор компонентов программы

Далее ставим метку напротив Create Shortcut on Desktop (отображение иконки редактора notepad++ на рабочем столе компьютера), и нажимаем Установить.

Установка программы

После процесса установки, откроется окошко, в котором стоит метка напротив Запустить Notepad++, нажимаем Готово и наш уже установленный редактор откроется. Теперь приступим к его настройке.

Запуск программы

Настройка notepad++

В открывшейся программе, нажав на крестик, закрываем стандартную вкладку редактора с описанием установленной версии.

Стандартная вкладка редактора

В верхнем меню редактора нажимаем Вид и выбираем Перенос строк.

Настройка переноса строк

Далее нажимаем Синтаксисы, выбираем H и жмем на HTML.

Синтаксисы

Теперь нажимаем Опции и выбираем Настройки.

Опции редактора

В открывшемся меню настроек выбираем Новый документ:

  • в разделе ”Формат конца строк” ставим метку напротив windows (CR LF)
  • в ”Кодировке” напротив UTF-8
  • синтаксис по умолчанию выбираем HTML и нажимаем Закрыть.

Настройка нового документа

Наш html редактор notepad++ настроен и готов к использованию. Теперь поговорим об html тегах, которые необходимы нам для форматирования наших текстов для блога.

Основные Html теги для текста

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

Теги заголовков: h1; h2; h3; h4; h5; h6

<h2>…….</h2>

В редакторе это будет выглядеть так:

Вид заголовков в редакторе

А на блоге, после публикации вот так:

Вид заголовков на блоге

Теги параграф (абзац): p

<p>…….</p>

В редакторе будет отображаться так:

Вид абзацев в редакторе

На блоге вот так:

Вид абзацев на блоге

Теги списков: ul и ol

Маркированный список

<ul>

<li>…….</li>

<li>…….</li>

<li>…….</li>

</ul>

Нумерованный список

<ol>

<li>…….</li>

<li>…….</li>

<li>…….</li>

</ol>

Смотрим, как в редакторе:

Вид списков в редакторе

 

А теперь посмотрим на блоге:

Вид списков на блоге

Теги цитат (высказываний): blockquote

<blockquote>…….</blockquote>

В редакторе:

Вид цитат в редакторе

На блоге:

Вид цитат на блоге

Теги жирного шрифта: strong

<strong>…….</strong>

Вид в редакторе:

Вид жирного шрифта в редакторе

Вид на блоге:

Вид жирного шрифта на блоге

Медиа файлы и ссылки вставить в текст статьи можно в визуальном редакторе административной панели сайта.

Html теги для текста в один клик

Мы рассмотрели ручную вставку тегов html в текст (ручная верстка статьи), но в редакторе notepad++ можно проставлять теги в один клик.

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

Плагин Webedit

На официальном сайте выбираем последнюю версию плагина.

Последняя версия плагина webedit

В следующем окошке нажимаем на архив для загрузки на компьютер.

Загрузка архива webedit

Начнется процесс загрузки, ждем завершения. Далее открываем папку загрузок.

Процесс загрузки архива webedit

Чтобы распаковать файлы из архива, нажимаем правой кнопкой мышки на сам архив и выбираем извлечь в папку Webedit.v.2.1

Извлечение в папку Webedit.v.2.1

Архив плагина, распакован в папку Webedit.v.2.1

Распакованный архив плагина

Переименовываем ее в Webedit, нажав правой кнопкой мышки и выбрав переименовать.

Переименование папки в webedit

Далее копируем переименованную папку, нажимаем правой кнопкой мыши и выбираем копировать.

Копирование переименованной папки

Теперь заходим в папку, в которую установлен сам редактор, по умолчанию она находится по такому пути: C:\Program Files (x86) и открываем папку Notepad++.

Открываем папку Notepad++

В открывшейся папке выбираем plugins.

Открываем папку plugins

В этой папке, правой кнопкой мыши нажимаем на пустое место и выбираем вставить.

Вставляем скопированную папку webedit

В появившемся окошке нажимаем продолжить.

Нажать продолжить

В папку plugins скопируется созданная и скопированная нами папка извлеченного архива Webedit

Папка webedit скопировалась

Для дальнейшей настройки плагина Webedit, необходимо войти в специальную папку AppData, в которой хранится разная информация о программах.

Создается эта папка для каждого пользователя профиля Windows отдельно. Изначально эта папка скрыта и ее можно увидеть только после проведения определенных действий.

Как открыть видимость папки AppData

Открываем папку Мой компьютер (проводник), в левом верхнем меню проводника нажимаем Вид.

Открываем в проводнике вид

Далее жмем на Параметры, откроется отдельное окошко, в котором нажимаем на Вид, в Дополнительных параметрах находим графу Скрытые файлы и папки, ставим метку напротив Показывать скрытые файлы, папки и диски, нажимаем Применить и ОК.

Настройка показа скрытых папок и файлов

Заходим на диск C, пользователи, имя своего профиля (у меня путь: C:\Users\iron1) и видим отобразившуюся папку AppData, которая нам и нужна для дальнейшей настройки плагина Webedit.

Папка AppData

Как настроить плагин Webedit для Notepad++

Открываем папку с установленным редактором Notepad++, открываем папку plugins, затем папку WebEdit (у меня путь: C:\Program Files (x86)\Notepad++\plugins\WebEdit), и правой кнопкой мыши нажимаем на папку Config, и нажимаем копировать.

Копируем Config

Далее переходим в папку AppData, открываем папку Roaming, затем выбираем Notepad++, plugins (у меня путь: C:\Users\iron1\AppData\Roaming\Notepad++\plugins), и на пустое место внутри папки нажимаем правой кнопкой мыши и выбираем вставить.

Вставляем в плагины Config

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

Панель с html тегами

Наш html редактор notepad++ полностью настроен и готов к работе по оформлению текста для публикации статей на наших блогах. А вот теперь давайте посмотрим, как расставлять html теги в тексте одним кликом мышки.

Html теги в один клик

Итак, вы написали статью в любом удобном для вас текстовом редакторе и вам необходимо расставить html теги. Конечно, вы их можете вручную расставить сразу там, где и печатали статью, а можете напечатать ее сразу в редакторе Notepad++ и там вручную расставлять теги.

Кто-то сразу пишет статьи в визуальном редакторе административной панели сайта, соответственно используя его варианты оформления текста (только визуальный редактор может лишних тегов наставить, которые и не нужны вовсе).

В общем, каждый делает так, как ему удобнее и проще. Я пишу статьи в Google документах и сохраняю тексты без тегов на Google диске. Далее я копирую текст и вставляю в редактор Notepad++.

Вставляем текст в редактор Notepad++

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

Html теги в один клик

По завершении форматирования всей статьи таким образом, копирую ее и вставляю в редактор административной панели сайта, там вставляю медиа файлы и ссылки, если необходимо, и публикую.

Итак, в этой статье вы узнали о текстовом html редакторе Notepad++, как его скачать, установить и настроить.

Узнали об основных html тегах и как с помощью установленного и настроенного плагина Webedit для Notepad++, расставить теги в тексте в один клик.

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

Успехов вам и до новых встреч!

Text.ru - 100.00%

Поделиться ссылкой:

16 комментариев к «Текстовый html редактор notepad++ Html теги для текста в один клик»

  1. Юрий, спасибо за полезную вещь. Плагин webtdit сильно ускоряет верстку в блокноте.

    1. Галина, рад, что информация о быстрой верстке текста, оказалась полезной! Спасибо, за комментарий!

  2. Вообще полезная статья ваша, Юрий. Все подробно описали о редакторе notepad++, настолько подробно, что все понятно. Обязательно воспользуюсь вашей инструкцией. Спасибо.

    1. Маргарита, спасибо за комментарий! Применяйте инструкцию по работе с редактором Notepad++ для красивого оформления текста в своих статьях на блоге, расставляя html теги в один клик.

  3. Юрий, я тоже пользуюсь этим редактором, но проставляю теги вручную — сначала пишу в гугл-документе, а затем переношу в ноотпад и проставляю, и уже привыкла работать на нем. Статья очень подробная и понятная.

    1. Алла, спасибо за комментарий! Вёрстка статьи вручную, самый надёжный и верный способ оформления текста html тегами, а с помощью плагина Webedit для редактора Notepad++, ещё и быстрый.

  4. Юрий, я пользуюсь и Notepad++ и Webedit, но теги прописываю клавишами, один раз прописала, например тег набираю сочетанием клавиш ctrl+q. Также выделяю абзац и сочетанием определенных клавиш проставляю, тоже удобно. Но, конечно, хотя многие и пишут, что привыкли вручную, но таким образом намного быстрее. Я сочетания клавиш уже запомнила и верстаю статью очень быстро. Но ваш метод тоже очень удобен и многим стоит попробовать. Я очень советую тем, кто еще не пользуется, статья очень подробная и полезная.

    1. Надежда, спасибо за отзыв! Каждый из нас выбирает так, как удобно ему😉 Благодарю за ваш вариант верстки статей html тегами. Я всегда вручную проставлял, а потом решил ускорить процесс о чём и описал в статье😊

  5. Юрий, очень скрупулезно все написано и понятно. Проставляю теги всегда вручную, но хочу попробовать по вашей методике, раз это быстрее. Спасибо большое за обучение!

    1. Татьяна, спасибо за отзыв! Попробуйте методику html теги для текста в один клик в редакторе Notepad++, возможно вам понравится такая верстка статей, и вам будет удобнее оформлять свои публикации на блоге😉

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

    1. Ольга спасибо за отзыв! Notepad++ полезен для всех и новичков и опытных, в нём не только статьи верстают, но и шаблоны сайтов, и сами сайты😉

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

    1. Галина, попробуйте по моей инструкции установить всё — от программы notepad++ до плагина Webedit для быстрой вёрстки.

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

    1. Сергей, спасибо за комментарий! Да, все теги не возможно помнить и шпаргалка необходима, а html редактор Notepad++ в помощь

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *