Урок 111. Работаем с текстовым редактором Notepad ++

Урок 111. Работаем с текстовым редактором Notepad ++

Всем-всем привет!

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

Если Вы не шибко знакомы с HTML и CSS, то обязательно прочитайте:

Эти уроки сегодня очень пригодятся.

Чем хорош Notepad++?

Это, наверное, банально уже совсем, но, чтобы Вы знали с каким инструментом будете иметь дело, перечислю часть его функций:

  1. Подсветка синтаксиса (написания тегов и правил). Этим и отличается профессиональный текстовый редактор от обычного «Блокнота». Если тег написан правильно, то он подсветится определенным цветом:Подсветка синтаксиса в текстовом редакторе Notepad++ Если же допущена ошибка, то символы станут черными:Текстовый редактор Notepad++
  2. Возможность работы сразу с несколькими файлами в одном окне. Вы можете одновременно работать с html-файлами (index.html) и таблицей стилей CSS (style.css):Редактирование нескольких файлов в текстовом редакторе Notepad++Можно разделить рабочую область на две части (в одной index.html, в другой style.css):Две рабочие области в Notepad++
  3. Возможность отмены действий (сочетание клавиш CTRL+Z). Это особенно актуально для новичков;
  4. Возможность создания макросов, что позволяет избавиться от рутинных действий;
  5. Возможность подключения к папке сайта на хостинге через FTP, но реализовать это можно только через плагин, это просто.

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

Откуда брать файлы сайта?

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

Либо через FTP-клиент, но для этого Вам нужно будет создать FTP-аккаунт. Проделать это можно также через хостинг, я буду демонстрировать на примере хостинга Beget:

  1. Перейдите в раздел FTP:Раздел FTP на Beget
  2. Дальше указываем логин и пароль (запишите куда-нибудь), а также путь к директории, то есть к папке сайта:Создание аккаунта FTP BegetНажмите на кнопку «Добавить».

Вот и все, FTP-аккаунт создан. Теперь необходимо указать данные аккаунта и сервера в FTP-клиенте. В качестве FTP-клиента я использую программу FileZilla, скачать ее можно тут.

Скачали? Установили? Запустили? Да? Тогда проделываем следующее:

  1. В верхнем меню FileZilla переходим по следующему пути: Файл > Менеджер сайтов:Менеджер сайтов FileZilla
  2. Нажимаем на кнопку «Новый сайт»:Кнопка "Новый сайт" в FileZilla
  3. Далее Вам необходимо узнать имя хоста. В Beget увидеть это можно в том же разделе «FTP»:Название FTP-сервераУказываем имя сервера в поле «Хост» в FileZilla:Имя сервера в FileZilla
  4. Вводим данные FTP-аккаунта (логин и пароль). Но прежде необходимо выбрать тип входа «Нормальный»:Данные входа в аккаунт FileZillaНажмите на кнопку «Соединиться».
  5. Теперь, если все введено верно, FileZilla подключиться к серверу и Вы сможете спокойно скачивать файлы себе на компьютер:Файлы сайта FileZillaЧтобы скачать нужный Вам файл, нужно сделать двойной клик по нему.

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

Практика HTML

С установкой текстового редактора, думаю, Вы с легкостью разберетесь, поэтому этот момент опущу.

Подобные редакторы больше всего используются именно для работы с HTML и CSS, а значит в Notepad ++ созданы прекрасные условия для взаимодействия с этими языками. Для демонстрации я открою один небольшой HTML-файл.

Текстовый редактор Notepad++

Далее перед Вами появляется такая картина: HTML-код сайта в Notepad++Давайте немного разберемся с рабочей областью:

Рабочая область в Notepad++

  1. Номера строк. Помогают ориентироваться в большом коде;
  2. Кодировка файла;
  3. Пределы тегов <div></div>. Здесь же Вы можете свернуть не нужный блок кода, нажав на знак «-«.

Допустим, мне нужно написать какой-нибудь текст с заголовком, для этого я напишу следующий код:

<div>
     <h1>Текст для урока</h1>
     <p>Работа с кодом HTML и CSS требует от человека повышенной внимательности, ведь нужно 
следить за тем, чтобы каждый тег, каждое правило были написаны правильно, без ошибок. 
В этом могут помочь специальные редакторы, в разы облегчающие работу, что программиста, 
что сайтостроителя, что обычного чувака, который решил поправить код своего сайта. 
Одним из таких редакторов является программа Notepad ++, о которой речь пойдет 
в сегодняшнем уроке.</p>
</div>

Пример кода в Notepad++

Код кодом, а вот как выглядит это в браузере? Посмотреть, как будет выглядеть то, что Вы написали в Notepad++ можно перейдя в меню «Запуск» и выбрать нужный браузер:Просмотр сайта в браузере FirefoxЗатем нас перебросит в браузер, где мы можем видеть результат:Результат в браузере Notepad++

Дальше займемся работой с CSS.

Практика CSS

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

<div class="text">
     <h1>Текст для урока</h1>
     <p>Работа с кодом HTML и CSS требует от человека повышенной внимательности, ведь нужно 
следить за тем, чтобы каждый тег, каждое правило были написаны правильно, без ошибок. 
В этом могут помочь специальные редакторы, в разы облегчающие работу, что программиста, 
что сайтостроителя, что обычного чувака, который решил поправить код своего сайта. 
Одним из таких редакторов является программа Notepad ++, о которой речь пойдет 
в сегодняшнем уроке.</p>
</div>

Почему блоку div? Потому что я хочу применить стилевое оформление не только для текста (<p></p>), но и для заголовка (h1). Заголовок и текст будут наследовать стилевой класс блока div, но в файле style.css нужно будет использовать двойной селектор, содержащий класс и тег:

.text h1{
font-family: Impact;
font-size:25px;
}
.text p{
font-family: Open Sans;
font-size:15px;
}

Для создания стилевых правил существует файл под названием «style.css», в нем и указывается правила.Так выглядят правила CSS в Notepad++:Стили в Notepad++А вот так теперь выглядит мой текст в браузере:Текст в FirefoxКак видите, работать в текстовом редакторе Notepad++ также просто, как с обычным блокнотом или Word, только гораздо удобнее. Главное обладать хотя бы базовыми знаниями, тогда оптимизация сайта станет для Вас проще.

Убираем кракозябры из коды

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

Убрать кракозябры в Notepad++ можно через меню «Кодировки»:Меню "Кодировки" в Notepad++Чтобы русские буквы снова стали русскими, нужно выбрать пункт «Преобразовать в UTF-8 без BOM».

Ну а на этом все, дорогие друзья!

Пойду смотреть Лигу Чемпионов.

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

До завтра!


2 отзыва к статье “Урок 111. Работаем с текстовым редактором Notepad ++”

  • 1
    Валя в 28/07/2017

    Тоже пользуюсь этой программой!

  • 2
    Ринас ContextUP в 28/07/2017

    Раньше я тоже пользовался в основном Notepad++, но потом переехал на Sublime Text

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

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