29 декабря 2010 г.

Урок №1. Текстовый редактор – Notepad++.


Чем больше пишешь, тем больше вопросов появляется. Так, прошлый раз говорили о HTML-тегах и как сними работать. Теперь вопрос “А где с ними лучше всего работать?”  Лучшим  текстовым редактором ( редактор кода) является бесплатный и удобный текстовый редактор с подсветкой кода – Notepad++. Он очень напоминает обычный Блокнот Windows (есть в программах вашего компьютера), однако обладает более широким функционалом, полезным и веб-разработчику и программисту. Для удобства все сообщения я пронумерую в виде последовательных уроков (работа учителем в прошлом накладывает отпечаток).

Преимущества текстового редактора Notepad++:

  • Этот текстовой редактор предоставляется абсолютно бесплатно;
  • Есть возможность отмены действия. Допустим: Вы исправили код, а он выдает ошибку.  Вы не помните, что  было до этого. Чтобы вернуть в обратное положение, Вам достаточно нажать «Правка»—"Отмена" или CTRL+Z до тех пор, пока Вас не устроит состояние заданного ;
  • Можете одновременно работать с другими файлами, что очень удобно;
  • Присутствует подсветка синтаксиса (каждый вид элемента окрашен в свой цвет, так же можно кликнуть по открывающему тегу, в результате программа предоставит Вам закрывающий тег);
  • Поддержка плагинов;
  • Это основные достоинства.Прочие возможности и удобства узнаете в процессе работы.

Скачать Notepad++. можно здесь.

Для установки Notepad++ запускаем скаченный файл и, выбрав «Русский» язык, нажимаем кнопку «ОК».


Уроки по HTML для чайников



Для продолжения кликаем по кнопке «Далее» и в следующем окошке принимаем лицензионное соглашение.

Уроки по HTML для чайников

По умолчанию Notepad++ будет установлен в папку C:\Program Files\Notepad++ на вашем компьютере. Я не думаю, что надо что-то менять, поэтому нажимаем «Далее».

Уроки по HTML для чайников

Теперь Вам предлагается выбрать компоненты для установки. Отметьте последнюю опцию, если хотите, чтобы при просмотре кода сайта в вашем браузере он открывался в Notepad++. Для установки программы нажмите кнопку «Установить».


Уроки по HTML для чайников

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

Уроки по HTML для чайников

Все открытые документы представлены в окне Notepad++ в виде вкладок. Для перехода к нужному документу просто щелкните по его вкладке. Создание нового документа имеет такую же последовательность, как и в Word. Нажимаете “Файл” - “Новый” и т.д. Одна из особенностей Notepad++ состоит в том, что все строки в документе нумеруются. Это очень удобно для разработчиков, т.к. переход на новую строку, поставленный не там, может свести на нет работоспособность всего нового документа. Имейте в виду, что в Notepad++ перенос слов и команд по ходу документа происходит автоматически, а вот новая строка только там, где слева стоит следующая по порядку цифра. Также в программе очень удобно помечать важные строки: достаточно щелкнуть по серому полю правее номера строки левой кнопкой мышки и появится желтый значок, который поможет быстро перейти к нужной строке.
Уроки по HTML для чайников
Немного “поковырявшись” в Notepad++ и освоивши остальные функции, укажите программе, что собираетесь работать именно с HTML кодом. Для этого в меню «Синтаксис» (в некоторых версиях “Стиль”) найдите и отметьте пункт «HTML».
Уроки по HTML для чайников
Теперь Notepad++ будет подсвечивать наш HTML код другим цветом, выделяя его на фоне обычного текста.
Уроки по HTML для чайников
Вот так быстро и просто можно работать с HTML-кодами в этом редакторе.

P.S. Когда Вам понадобится адрес картинки, то в Notepad++ их много. А какой брать? Следующая сноска Вам поможет определиться:


1) Если вам нужно маленькое кликабельное изображение, выбираете ссылку под № 3, копируете её всю, вставляете в свой пост или на сайт. При клике на неё мышкой, пользователь перейдёт на сайт radikal.ru , где автоматически ему покажут исходное изображение
2) Если вам нужна картинка в реальном размере, то воспользуйтесь ссылкой под № 6. И сделайте тоже самое. Если вы скопируете всю ссылку, то хотя она и будет в реальном размере, но она будет тоже кликабельная и вести на радикал. Чтобы этого не было, оставьте только ту часть, которая обведена  зелёным.

Следующий урок №2 - “Как сделать рекламный ролик”

0 коммент.:

Отправить комментарий