Notepad plus plus (Notepad++) — бесплатный HTML редактор, его установка и настройка

Здравствуйте, уважаемые читатели! Сегодня представляю вам статью о важнейшем инструменте вебмастера - HTML редакторе notepad ++(notepad plus plus), а также о том, где можно скачать эту программу, предложу описания настроек и особенности использования notepad++ именно для нужд вебмастера.

Думаю, всем известно о таком текстовом редакторе как простой блокнот (notepad), который поставляется в комплекте оборудования Windows. Так вот разница между вышеупомянутым блокнотом и notepad++ такая, как между первым черно-белым телевизором и плазменным современным HD, несмотря на общность названий.

Я тоже не сразу стал пользоваться этим великолепным редактором, но теперь, когда он уже стал моим неотъемлемым инструментом в каждодневной работе с блогом, я не могу понять, как раньше обходился без него. Так что рекомендую всем вебмастерам, в том числе, и, особенно, начинающим, немедленно взять notepad plus plus на вооружение.

Теперь немного рассмотрим возможности Notepad++ как инструмента вебмастера. Notepad plus plus - текстовый HTML редактор с подсветкой синтаксиса. На самом деле он поддерживает большое количество языков программирования и разметки, в том числе php, С++, css и др., поэтому даже в большей степени является отличным инструментом для программиста, хотя очень сильно помогает и нам, вебмастерам. А теперь по пунктам о преимуществах данного редактора, ознакомление с которыми, возможно, позволит сделать вам правильный выбор:

  1. Во-первых, notepad++ абсолютно бесплатная программа в отличие от многих платных аналогичных программ, например, WYSIWYG, Dreamweaver или HomeSite. Возможно, они и обладают несколько большим функционалом, но мы же ориентируемся на нужды вебмастера, для удовлетворения которых опций notepad plus plus вполне хватает.
  2. HTML редактор notepad++ очень простая для понимания и очень легкая в обращении программа.
  3. Наличие встроенного FTP клиента.
  4. Подсветка синтаксиса большого числа языков программирования
  5. Выделение текста блоками
  6. Возможность использования портативной версии notepad++, которая будет у вас всегда под рукой, и вы можете использовать ее в любое время в любом месте, храня на съемном носителе.

Ну вот, надеюсь я вас убедил и вы воспользуетесь моей рекомендацией и в скором времени скачаете и установите этот замечательный HTML редактор. Кстати, скачать notepad plus plus можно с официального сайта, кликнув по ссылке свежего релиза, расположенного в самом верху. Список с релизами расположен во второй колонке слева под названием “News”. Также можно скачать портативную версию notepad plus plus, которая не требует установки.

Настройки и особенности HTML редактора notepad plus plus

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

Но вы можете поменять их на свой вкус, повторюсь, это сделать очень легко. Однако одну из настроек для удобства работы с документами html и php в дальнейшем можно сразу настроить. Это выбор кодировки, в которую будет преобразовываться загружаемый документ автоматически. Для этого выбираем из верхнего меню «Опции»→«Настройки»→«Новый документ»:

Здесь необходимо выбрать «UTF-8 без метки ВОМ», это поможет предотвратить проблему “крокозябров”, которые неизбежно возникают, если исходный файл сохраняется в кодировке Windows-1251. Такая неприятность возникает, если вы добавляете какую-то запись на сайте на кириллице, а сайты и блоги обычно работают в кодировке UTF-8. Если HTML файл через редактор notepad++ сохранить в кодировке UTF-8 (без ВОМ).

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

Теперь все детально рассмотрим на конкретном примере из моей практики, попутно затронув такую великолепную функцию редактора notepad++ как возможность соединения по протоколу ФТП , загрузки необходимых файлов на компьютер и их редактирования. Итак, мой пример связан с редактированием надписи, которая располагалась под формой комментариев. Она выглядела так:

Я захотел ее заменить на другую. Чтобы наглядно вам продемонстрировать возможности редактора notepad++, я изменил файл comment-template.php прямо на хостинге через админ панель, введя в соответствующем месте другой текст на кириллице. Но такой метод не предполагает сохранение файла в нужной кодировке, поэтому получилась следующая картина:


Чтобы исправить эту ситуацию, перейдем в редактор notepad++ и соединимся с сервером хостинга по  FTP. Как правильно настроить соединение с помощью замечательного FTP клиента FileZilla, я описал тут. Итак, входим в программу notepad plus plus и во вкладке «NppFTP» кликаем по синему значку «(Dis)Connect»:

Из выпадающего меню выбираете название хоста и кликаете по нему. Если соединение с сервером уже настроено, то вы получите полный список файлов вашего проекта:

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

Но вернемся к моему примеру, ради которого я открыл файл comment-template.php в редакторе. На скриншоте в зеленую рамку выделен текст, который я вставил, изменив файл через админ панель хостинга. Теперь необходимо перекодировать файл  comment-template.php. Для этого нажимаем в верхнем меню кнопку «Кодировки».

Последовательность действий для правильной кодировки файла (в данном случае comment-template.php)  расписана на скриншоте, так что не буду повторяться. Отмечу только, что действием номер 3 вы сохраняете файл в нужной кодировке UTF-8 (без ВОМ). Таким образом, после загрузки на хостинг файла уже в необходимой кодировке и перезагрузив страницу, мы получаем изменения, которые радуют глаз (напомню, цель моего примера была преобразовать надпись под формой комментариев в человеческий вид):

Надеюсь, я понятно объяснил. Теперь перейдем к другим особенностям редактора notepad plus plus. Одной из таких особенностей является возможность открывать сразу несколько документов по примеру открытия вкладок в браузере, что очень удобно для работы с ними. Причем можно перетаскивать вкладки, меняя их местами.

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

Для реализации этой функции необходимо кликнуть правой кнопкой мыши по соответствующей вкладке и выбрать из контекстного меню «Дублировать в Другое Окно». Если хотите открыть копию этого же документа в новом окне, то выберите из этого же меню «Открыть в Новом Экземпляре». После окончания редактирования в том же выпадающем меню редактора notepad plus plus нажмите «Закрыть».

Очень важной функцией в html и php редакторе notepad++ является возможность поиска по html или php документам. Выбрав из верхнего меню html и php редактора «Поиск»→«Найти», вам откроется диалоговое окно с четырьмя вкладками, опции в котором позволят осуществить простой поиск в открытой вкладке с html или php документом, поиск с заменой или же поиск файла, расположенного в одной из папок на компьютере.

Очень удобная функция, которая экономит кучу времени, а оно у нас, вебмастеров, на вес золота. Еще одна опция html редактора notepad plus plus - возможность настроить “горячие клавиши” для всех основных функций редактора. Для ее реализации из верхнего меню выбираете «Опции»→«Горячие клавиши».

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

Ну вот, на сегодня, пожалуй, буду закругляться, потому как описал все те функции, которые мне так или иначе известны и которые я применяю. Желаю вам использовать такой замечательный инструмент вебмастера как HTML и PHP редактор notepad++ на полную катушку на благо вашего проекта. Вас ждет еще нмало полезного на блоге, поэтому милости прошу, подписывайтесь на обновления блога для получения актуальных публикаций на почту.

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Инструменты вебмастера

22 отзыва

  1. Людмила

    Спасибо за урок, полезная программа и хорошее обьяснение с картинками.

  2. Игорь

    Пожалуйста, Людмила. Рад, что Вы получили необходимую информацию. 🙂

  3. Сергей

    Блокнотиком с двумя плюсами пользуюсь давно и активно, поистине бесценная программа для работы с кодом.

    Автору же выражаю искреннюю благодарность за статьи (и блог в целом) для людей, а не для Y и G. Помимо доступности, обстоятельности и последовательности изложенной информации, его просто приятно читать. Может быть, в самом деле времена ГС-нета уходят в прошлое?

  4. Игорь

    Спасибо огромное, Сергей! Сразу ощущается, что комментарий написан от души, после такого силы удесятеряются. Однако, и для конструктивной критики я открыт. Поэтому прошу читателей не стесняться и открыто высказывать свое мнение, пусть даже оно будет отрицательным, главное, чтобы было по делу. Обещаю, что все адекватные комментарии будут опубликованы. А что касается ГС, тут все зависит от конкретного человека, но соглашусь, что увеличивается число проектов, созданных для людей. Это, несомненно, радует.

  5. Сергей

    Прошу прощения за, так сказать, оффтоп.

    Но вопрос "ГС против СДЛ" вообще заслуживает отдельного обсуждения. Здесь, к сожалению, не всё так однозначно. Во многих случаях человек, который хотел бы делать ресурсы для людей, просто не имеет такой возможности, будучи вынужден заниматься ГС - по самым разным причинам. Начиная с того, что у него недостаточно ресурсов и опыта для создания СДЛ, приносящего доход (ведь хороший сайт на голом энтузиазме не делается), и заканчивая невозможностью продвинуть СДЛ в силу высокой конкуренции.

    Возможно, Игорь, Вы выскажете свои мысли на этот счет в отдельной статье? Было бы интересно обсудить.

  6. Игорь

    Да, Сергей, я с Вами согласен, эта тема заслуживает внимания, у меня давно уже крутятся мысли на эту тему, но все никак не соберусь. Сейчас пищу очень важный материал в рубрику «Основы HTML», это для начинающих первостепенный материал для ведения сайта, но как только закончу, обязательно подумаю о публикации насчет ГС и СДЛ.

  7. Serg

    Доброго времени суток.Спасибо за редактор,очень нужная вещь!Вот только у меня почему то не соединяется с FileZilla.Может я чего то не до понял

  8. Игорь

    Serg, попробуйте почитать статью о Filezilla, там более подробно описана настройка ftp-соединения.

  9. Антонина

    Доходчиво! Побольше бы такого материала.

  10. Наталья

    Добрый день, Игорь. У меня вопрос по Filezilla, но в той статье нельзя оставить комментарий, поэтому пишу сюда. Я пытаюсь зайти на сайт через FTP, поэтому воспользовалась вашим советом и скачала notepad++ и Filezilla. По notepad++ вопросов нет все сразу скачалось нормально, а вот с Filezilla не все просто. Нажала на ссылку у вас в статье, перешла на сайт http://filezilla.ru/get/, нажала красную кнопку вверху "скачать Filezilla", затем "загрузить" и пошла загрузка. Сначала оставила "полная загрузка" и мене скачалось все что можно браузер яндекс, поменялись все закладки в браузере, вышли на рабочем столе размытые ярлыки явно не лицензионных программ "гейм тотоал доминейшен", "май пони". Это при всем при том что когда была загрузка, я прекрасно видела что предлагается все это установить, я это все игнорировала и нажимала только кнопку "некст" что касалось самой файлзилы. Но вот самой файлзилы так и не нашла где она и куда скачалась. Удалила все и на время забросила. Теперь опять вернулась к этому вопросу. Теперь в установке выбрала не "полную установку" а выборочную, выбрала только изменение в закладках, но песня все та же опять скачались игры и сомнительные пони, явно вирусного содержания. Помогите, пожалуйста, разобраться может что-то делаю не так? Как все таки скачать нормальную файлзилу без прикрепленных к ней навязчивых программ? Спасибо.

  11. Наталья

    Программы, которые скачались вместо Filezilla - Mobogenie, Mi Pony 2.02, Mega Browse, Game - Total Domination

  12. Игорь

    Наталья, честно говоря, первый раз от Вас слышу, я тоже скачивал FileZilla с этой страницы. Попробуйте нажать на FileZilla 3.8.0 (рекомендуется). Я посмотрел ссылку на скачивание, именно здесь загрузочный файл.

  13. Наталья

    Спасибо. Попробую 🙂

  14. Наталья

    Да действительно, скачала FileZilla 3.8.0 (рекомендуется)без проблем, спасибо!

  15. Ivan

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

  16. Игорь

    Ivan, я понял что Вы имеете ввиду, однако подобный функционал в этой программе пока не реализован. Единственное, для предварительного просмотра уже существующих элементов страницы сайта перед редактированием есть средства разработчика, которые присутствуют во всех популярных браузерах. Например, если вы пользуетесь Google Chrome, просто подведите курсор мышки к нужному элементу (ссылке, выделенному фрагменту текста, изображению и т.д.), нажимаете правую кнопку и из контекстного меню выбираете «Просмотр кода элемента».

    Внизу откроется окно редактирования, где вы сможете редактировать онлайн стили CSS и HTML код нужного элемента, одновременно визуально наблюдая за изменениями. Естественно, после перезагрузки страницы все встанет на свои места, но вы получите представление, как отредактировать тот или иной элемент, внеся соответствующие коррективы в реальные файлы. Подобные средства есть в последних версиях Opera, IE, Mozilla. Но, похоже, это не совсем то, что Вы хотите...

  17. Ivan

    Я бы хотел вот как здесь http://xhtml.ru/instr/html_editor/ в одной части окна вводишь код а во второй видишь что получается, что разве в нотепад этого нет что ли тогда в чем его польза

  18. Игорь

    Ivan, как это в чем польза? Посмотрите на его богатый функционал, часть из которого описана в статье! Если Вам нужен редактор в таком виде, то Вы ведь сами предоставили пример.

  19. Vikulki

    Дмитрий, здравствуйте. Я скачал notepad++ 5.9, но там нету textfx, раньше у меня этот редактор был встроен в windows вместо блокнота и он сам закрывал все скобки без настроек, но я по своей глупости вернул стандартный блокнот теперь мучаюсь и не могу найти, что посоветуйте?

  20. Andryes

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

  21. Олег

    Я привык работать в HomeSite, к сожалению он уже не обновляется.
    В Notepad++ много хорошего, но нет подсказок типа
    - вставил "<", открылась подсказка, что ввести - a, a href, a name и т.д.
    - записал, к примеру, "<div", нажал "пробел", сразу подсказка: align, class, dir, id и т.д.
    Выбрал и вставил.
    Также на другие теги.
    Можно это реализовать в Notepad++?
    Было бы замечательно!

  22. Игорь Горнов

    Олег, вопрос в тему и по существу. На самом деле, в Notepad++ огромное количество плагинов, поэтому использовать, а, тем более, описать их все не представляется возможным. Для установки любого из них достаточно пройти в раздел «Плагины» - «Plugin Manager» - «Show Plugin Manager» и найти в списке расширение WebEdit. По-моему, это то, о чем вы говорите. Мне нравится, что Нотпад не обвешан функционалом изначально, все дополнительные опции реализованы с помощью расширений. Что вам нужно, то вы и добавляете.

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

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

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.