Как настроить нотепад для html css

Бесплатный текстовый редактор Notepad++ — редактор html, css, javascript, php и другого кода с подсветкой синтаксиса. Обзор возможностей

Здравствуйте, уважаемые читатели блога webcodius.ru. Сегодня мы рассмотрим один из лучших текстовых редакторов Notepad++, который обладает множеством полезных функций и является одной из самых используемых мною программ для редактирования html, css и php кода. Да и вообще этот редактор популярен среди многих программистов и разработчиков.

В статье как создать веб страницу я упомянул, что web-страницы можно создавать даже с помощью встроенного в Windows «Блокнота». Но создавать html и css файлы в блокноте это практически тоже самое, что копать яму палкой-копалкой. В блокноте, кроме возможности создавать и просматривать текстовые файлы, нет ничего.

Начав пользоваться Нотепадом для корректировки файлов с html, css, php и другими кодами, вы сэкономите себе массу времени и нервов. Поначалу, конечно же, использование этого редактора вам может показаться немного сложным. Но если вы научитесь пользоваться хотя бы основными возможностями Notepad++, то вам уже будет сложно обходиться без него .

У Нотепада есть значительные преимущества не только перед стандартным виндоувским блокнотом, но и по сравнению с другими более сложными программами для написания и редактирования различных кодов. Например, если сравнивать Notepad++ с популярной программой для верстки сайтов Dreamweaver, то у него найдется немало преимуществ. Во-первых, Notepad++ абсолютно бесплатный. А во-вторых, намного более легкий и быстрый. И вообще его можно запускать без установки в операционную систему Windows, если использовать portable версию Notepad++, что позволит вам поместить программу на флешку и всегда носить его с собой.

Давайте теперь обо всем подробнее.

Установка редактора Notepad++, его возможности и настройка

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

Установка программы в операционной системе Windows происходит совершенно стандартным способом:

• щелкаете два раза левой клавишей мышки по скаченному файлу, запустится установка;
• в открывшемся окне выбираете нужный вам язык;
• затем нажать несколько раз далее, приняв лицензионное соглашение, выбрав папку установки и устанавливаемые компоненты;
• затем нажимаете установить, ждете несколько секунд и Notepad ++ установлен.

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

Теперь давайте пройдемся по возможностям данного текстового редактора:

1. Первое, что бросается в глаза то, что Notepad++ — это текстовый редактор с возможностью подсветки синтаксиса нескольких десятков самых популярных языков программирования включая HTML, CSS, JavaScript и PHP. Посмотреть полный список языков для которых нотепад умеет подсвечивать синтаксис и выбрать нужный язык можно в верхнем меню программы во вкладке «Синтаксис»:

Например, если установить подсветку html кода, будет примерно такая картина:

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

В случае, если нужного языка нет, то можно настроить подсветку своего в том же меню «Синтаксис» есть пункт «Задать свой язык»:

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

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

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

2.Часто бывает, что набивая какой-либо код, мы можем забыть как пишется тот или иной HTML тег или оператор PHP. Для решения этой проблемы в текстовом редакторе Notepad++ реализована функция всплывающих подсказок и автоматического завершения набираемого слова. Вызывается подсказка сочетанием клавиш «Ctrl+Пробел» и остается только выбрать нужный вариант из предложенного списка:

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

В этом же окне можно включить автоматическую вставку закрывающих html тегов, скобок и кавычек.

3. Нотепад ++ очень легко позволяет сменить кодировку файла. Например, если необходимо установить популярную сейчас кодировку UTF-8 без BOM, то для этого достаточно в главном меню идем во вкладку «Кодировки» и щелкаем по пункту «Преобразовать в UTF-8 без BOM» и сохраняем файл:

4. Notepad++ позволяет открывать и редактировать сразу несколько файлов одновременно в отличие от стандартного блокнота. Для этого он использует закладки, подобно современным интернет браузерам. Так каждому открытому файлу соответствует своя закладка, в которой указывается имя файла и помещается изображение дискетки:

Дискетка может быть синего или красного цвета. Цвет дискеты указывает были ли сохранены изменения в файле или нет:

• синяя дискеты — файл сохранен;
• красная — изменения не сохранены.

Вкладки с открытыми файлами можно закрывать, перетаскивать и располагать в любом порядке. С помощью настроек можно сделать вертикальное отображение вкладок, либо вообще их скрыть, запретить перетаскивание и настроить закрытие вкладки двойным щелчком мыши. Все эти настройки можно найти во вкладке «Опции», кнопка «Настройки»:

Откроется окно настройки, где в разделе «Общие», в группе настроек «Панель вкладок» можно поставить или убрать нужные галочки:

Кроме того в этом редакторе есть возможность открывать сразу две копии одного и того же документа. Для этого достаточно щелкнуть правой клавишей по вкладке с нужным файлом и выбрать пункт «Дублировать в другой области»:

После этого откроется вторая закладка с этим документом:

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

Теперь нажимая клавишу «F2» курсор будет перемещаться между заметками — синими маркерами.

5. Считаю нужным отметить, что в редакторе Notepad++ очень удобный текстовый поиск как в открытом файле, так и в нескольких файлах находящихся в определенной папке. Есть возможность использовать при поиске регулярные выражения, которые могут быть мощным инструментом в умелых руках. Также можно осуществлять поиск с заменой. Вместе поиск с заменой и регулярные выражения могут значительно ускорить внесение правок в текстовые документы.

Функцию поиска текста можно вызвать с помощью верхнего меню «Поиск», в котором выбирается тип поиска, либо сочетанием горячих клавиш «Ctrl+F», которое открывает соответствующее окно с настройками поиска:

В открывшемся окне выбираете закладку с нужным действием («Найти», «Заменить», «Поиск в файлах» или «Пометки») и задаете параметры.

6. Часто при работе с html файлом, возникает необходимость посмотреть как он будет выглядеть в браузере. Для этого в Notepad++ есть возможность просмотра html страницы в браузерах Internet Explorer, Firefox, Chrome и Safari. Чтобы выполнить это действие достаточно нажать кнопку «Запуск» в верхнем меню и выбрать запуск кода в нужном браузере:

Также в рассматриваемом редакторе можно выделить любой фрагмент php кода и нажать «Запуск» — «Get php help», после чего Notepad++ переадресует вас на страницу сайта http://php.net с описанием данного кода.

В этой же вкладке меню «Запуск» есть возможность осуществлять поиск выделенных фрагментов текста в поисковой системе «google» и в сетевой энциклопедии «wikipedia». Для этого выделяете фрагмент текста и нажимаете кнопочку «Google Search», либо «Wikipedia Search» и вас автоматически перекинет на страницу сайта Google или Wikipedia с результатами поиска. Правда для всех этих действий необходимо подключение к интернету.

7. При редактировании файлов Notepad ++ запоминает все сделанные вами изменения. Поэтому в любой момент вы отменить выполненное действие (сделать шаг назад). Причем откатываться можно на сколько угодно шагов назад или вперед, поэтому можно вносить любые изменения в код без риска необратимых последствий.

Делать откаты назад и вперед можно с помощью пунктов «Отмена» и «Повтор» во вкладке «Правка» в верхнем меню, либо с помощью кнопочек в виде загнутых стрелочек на панели инструментов (если были изменения стрелки окрашиваются в зеленый цвет):

Отмену действий можно также выполнять с помощью горячих клавиш:

• CTRL + Z — шаг назад, аналог пункта «Отмена»;
• CTRL + Y — шаг вперед, аналог пункта «Повтор»;

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

8. Расширить возможности тестового редактора Notepad++ можно с помощью различных плагинов. Некоторые устанавливаются по умолчанию, а остальные можно инсталлировать с помощью встроенного в плагин-менеджера, который вызывается из из верхнего меню вкладка «Плагины» — «Plugin Manager» — «Show Plugin Manager»:

Откроется окно «Plugin Manager» в котором в первой закладке будет список доступных плагинов. Для установки нужного плагина ставите галочку напротив него и нажать кнопку «Install».

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

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

Источник

HTML редактор Notepad++, установка и настройка

Для работы с документами HTML и CSS достаточно удобно применить HTML редактор Notepad++.

Можно вообще-то применить любой редактор, который поддерживает кодировку UTF-8 и таких редакторов в настоящее время довольно много, но Notepad++ обладает рядом преимуществ.

Содержание:

HTML редактор Notepad++ является бесплатной программой и его часто сравнивают с продвинутым аналогом обычного блокнота, который есть в Windows.

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

Устанавливаем HTML редактор Notepad++

Адрес официального сайта – notepad-plus-plus.org. Здесь слева имеется вкладка download, при нажатии на нее откроется страница закачки редактора, на которой также присутствует одноименная кнопка.

Устанавливается HTML редактор Notepad++ как любая обычная программа. Никаких особых навыков не требует и сложностей при этом не возникнет.

Единственное, в окне Компоненты устанавливаемой программы нужно указать локализацию – Тип установки – Russian.

В следующем окне кликаем Далее и затем Установить.

Установка редактора Notepad++ проходит достаточно быстро, оставляем флажок Запустить и нажимаем Готово.

Настройки редактора Notepad++

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

Кроме этого в программе надо сделать необходимые настройки:

• Заходим в Опции — Настройки открываем вкладку Новый документ и в поле Кодировка нужно поставить UTF-8 без метки BOM, а также снять флажок Применить при откр. ANSI файла.

Потому что если существующие файлы на компьютере открывать с помощью редактора Notepad++, то он соответственно будет преобразовывать их в UTF-8, что, конечно же, не нужно. Если нужно будет, то всегда можно сделать это вручную.

• Затем в этом же поле Синтаксис. При создании нового файла, если редактор в основном используется для работы с HTML, то в выпадающем меню следует выбрать HTML, чтобы происходило подсвечивание тегов.
• Переходим во вкладку Автозавершение. Функция автозавершение позволяет получить такой эффект, что при нажатии, например, на скобочку, она автоматически закрывается.

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

• Далее можно изменить размер шрифта, Ctrl+NumLock+ увеличивают размер, соответственно, Ctrl+NumLock — – уменьшают. Рекомендуется сделать такой, чтобы глаза не уставали.
• Затем переходим во вкладку Вид и устанавливаем Перенос строк. Строки при написании кода могут быть очень длинными.

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

• Далее переходим в Опции – Определение стилей. Здесь можно выбрать тему, то есть стиль, который будет определять внешний вид редактора и чтобы различные части кода подсвечивались разными цветами.

Стилей здесь достаточно много и можно выбрать тот, который больше по душе именно вам, нажимаем Ok.

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

Доступные функции редактора

• В поле программы кодировка указывается в правом нижнем углу – ANSI as UTF-8. Это другое название кодировки UTF-8, без специальной метки BOM.

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

Во вкладке Кодировки также можно увидеть после настроек, что черный кружок стоит напротив Кодировать в UTF-8 (без BOM). Это показывает текущую кодировку документа.

Чтобы документ преобразовать в другую кодировку, нужно ее выбрать из нижней части выпадающего меню и тогда произойдет преобразование документа.

• В редакторе Notepad++ есть функция, которая отсутствует во многих других редакторах, это возможность свернуть код. Это позволяет более визуально наблюдать структуру какого-то кода.
• Если имеется две вкладки, то можно их окна расположить рядом. Для этого достаточно перетянуть одну вкладку в центр. Появляется контекстное меню, в котором можно выбрать пункт Переместить в другую область.

Получились два открытых документа, которые можно одновременно просматривать и редактировать. Для возврата перетаскиваем вторую вкладку на первое поле или первую вкладку на второе поле.

Создание макросов в Notepad++

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

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

Сначала макрос надо включить – Макрос – Начало записи, либо при помощи кнопки на панели инструментов, затем вводим нужную запись, останавливаем ее. Сейчас запись можно удалить.

Чтобы вставить, можно нажать горячие клавиши – Shift+Ctrl+P либо Макрос – Прокрутить запись. Все, наша запись вставится в нужное место.

Сейчас макрос можно сохранить – Макрос – Сохранить запись в макросе, появляется окно, в котором можно задать ему имя, назначить сочетание клавиш.

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

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

Источник