Обучение CSS
Начинаем работу с HTML + CSS
Это краткое руководство предназначено для людей, начинающих свое изучение CSS в первый раз.
Оно не дает глубоких знаний о CSS. Руководство просто объясняет как создать HTML файл, CSS файл и как заставить их работать вместе. После прочтения данной статьи, Вы можете продолжить дальнейшее изучение других обучающих руководств для получения информации о более значительных особенностях HTML и CSS. Или же перейти к изучению материала в интерактивных HTML или CSS редакторах, которые помогут Вам при создании сайтов.
В конце данной статьи Вы создадите HTML файл который будет выглядеть как этот:
Полученная HTML страница с цветами и разметкой сделанной при помощи CSS.
Заметьте, что я не претендую на то, что это очень красиво ☺
Разделы помеченные даным знаком необязательны. Они содержат дополнительные объяснения HTML и CSS кода в приведенных примерах. Знак “внимание!” в начале абзаца обозначает более расширенную информацию чем остальной текст.
ШАГ 1: написание HTML кода
Для этой статьи я предлагаю использовать простейшие утилиты, например Блокнот от Windows, TextEdit на Mac или KEdit под KDE вполне подойдут под задачу. Как только Вы поймете основные принципы, вы можете переключиться на использование более продвинутых инструментов разработки, например на такие коммерческие программы как Style Master или DreamWeaver. Но для создания первого CSS файла не стоит отвлекаться на множество расширенных возможностей.
Не используйте текстовый редактор наподобие Microsoft Word или OpenOffice. Эти программы обычно создают файлы, которые не могут быть прочитаны браузерами. Для HTML и CSS файлов нам нужны обычные текстовые файлы без какого-либо формата.
Первый шаг заключается в открытии пустого окна текстового редактора (Notepad, TextEdit, KEdit или любого Вашего любимого) и наборе в нем следующего текста:
Вам не обязательно это перенабирать — вы можете просто скопировать и вставить текст с этой страницы в редактор.
(Если вы используете TextEdit на Макинтоше, не забудьте указать TextEdit’у, что это действительно простой текстовый файл, открыв меню Format и выбрав опцию “Make plain text”.)
Первая строчка нашего HTML файла говорит браузеру о типе документа (DOCTYPE обозначает DOCument TYPE). В нашем случае — это HTML версии 4.01.
Слова между < и > называются тэгами и как вы можете видеть, документ содержится между <html> и </html> тэгами. Между <head> and </head> находится различная информация, которая не отображается в самом документе. Например там содержится заголовок документа. Позже мы добавим туда и связь с CSS файлом.
Тэг <body> это место содержимого документа. В принципе, все что находится внутри этого тэга за исключением текста между <!— и —>, являющегося комментариями, будлет выведено на экран. Комментарий браузером игнорируется.
Тэг <ul> в нашем примере задает отображение “неупорядоченного списка” (Unordered List), т.е. списка, элементы которого непронумерованы. Тэги <li> начинают “элементы списка” (List Item). Тэг <p> является “параграфом”. А тэг <a> — “якорь” (Anchor), с помощью которого создаются гиперссылки.
Код HTML в редактор KEdit.
- Тэг “ul” — список состоящий из одной ссылки на каждый элемент списка. Эта структура послужит нам “навигацией” по нашему сайту связывая с нами другие страницы нашего гипотетического сайта . Предполагается, что все страницы нашего сайта будут иметь схожее или идентичное меню.
- Элементы “h1” и “p” задают содержимое уникальное каждой страницы, в то время как подпись (“address”) снизу снова будет повторяться на всех страницах.
Отметьте, что я не закрыл “li” и “p” элементы. В HTML (но не в XHTML), можно опускать закрывающие тэги </li> и </p>, что я и сделал в данном случае, для того чтобы было проще текст. Но вы можете добавить их, если считаете необходимым.
Давайте предположим, что данная страница будет одной из страниц Веб сайта, состоящего из нескольких похожих страниц. Как мы и договорились, эта страница будет содержать ссылки на другие страницы нашего гипотетического сайта, уникальное содержимое и подпись.
Выберите “Сохранить как…” или “Save As…” из выпадающего меню Файл или File, укажите каталог для сохранения файла (например Рабочий Стол) и сохраните данный файл как “mypage.html”. Не закрывайте редактор, он нам еще потребуется.
(Если вы используете TextEdit для Mac OS X версии меньше чем 10.4, вы увидите опцию «Don’t append the .txt extension» в диалоговом окне «Save as». Выберите эту опцию, потому что имя файла “mypage.html” уже включает в себя расширение. Более новые версии TextEdit заметят .html расширение автоматически.)
Далее, откройте файл в браузере. Вы можете сделать это следующим образом: найдите файл вашим файловым менеджером (Проводник, Windows Explorer, Finder or Konqueror) и щелкните (единожды или дважды) на нем. Если вы делали все как описано то имя файла будет “mypage.html”. У вас должен открыться файл в браузере, установленном по умолчанию. (Если нет, то откройте браузер и перетащите файл в его окно.)
Как Вы видите, страница выглядит достаточно скучно…
ШАГ 2: изменяем цвета
Возможно, вы видите некоторый черный текст на белом фоне, но это зависит от конфигурации браузера. Для того чтобы страница выглядела более стильно, мы можем сделать очень легко одну простую вещь — добавить цвета. (Оставьте окно браузера открытым — мы к нему еще вернемся)
Мы начнем со стилей, встроенных в HTML файл. Позже, мы положим CSS стили и HTML разметку в разные файлы. Раздельное хранение хорошо тем, что легче использовать те же самые стили для множества HTML файлов: Вам нужно написать CSS стили только один раз. Но на этом шаге мы оставим все в одном файле.
Нам нужно добавить элемент <style> к HTML файлу. Определения стилей будут внутри этого тэга. Возвращаемся к редактору и добавляем следующие пять строчек в заголовок HTML кода между тэгами <head> и </head>. Строки, которые надо добавить выделены красным (с 5-й по 9-ю) .
Первая строка говорит браузеру о том, что это таблица стилей и что она написана на CSS (“text/css”). Вторая строка говорит, что мы применяем стиль к элементу “body”. Третья устанавливает цвет текста в пурпурный, а следующая устанавливает цвет фона в желто-зеленый оттенок.
- селектор (в нашем примере: “body”), которые говорит о том, к какой части документа применить правило;
- свойство (в нашем примере свойствами являются ‘color’ и ‘background-color’), которое указывает что именно мы устанавливаем у данного элемента, выбранного селектором;
- и значение (‘purple’ и ‘#d8da3d’), которое устанавливает значение атрибута.
Наш пример показывает что правила могут быть скомбинированы. Мы установили два свойства, так же мы могли задать их раздельно:
но поскольку оба правила относятся к body мы записали “body” один раз и поместили свойства и значения вместе. Для получения большей информации о селекторах смотрите главу 2 из Lie & Bos .
Фон элемента body так же является фоном целого документа. Мы явно не назначили другим элементам (p, li, address…) фона, так что по умолчанию у них его нет (или он прозрачный). Свойство ‘color’ устанавливает цвет текста элемента body, но все остальные элементы внутри body наследуют этот цвет, пока для них не задан другой в виде другого правила. (Мы добавим другие цвета позже.)
Теперь сохраните этот файл (используйте команду “Сохранить” или “Save” из файлового меню) и переключитесь обратно в браузер. Если вы нажмете кнопку “обновить” , то изображение сменится со “скучной” страницы на разукрашенную (но все еще однообразную) страницу. Кроме ссылок сверху, весь текст должен быть пурпурный на желто-зеленом фоне.
Теперь браузер показывает страницу к которой мы добавили цвет.
В CSS можно задавать цвета несколькими способами. Наш пример показывает два из них: по имени (“purple”) и по шестнадцатиричному коду (“#d8da3d”). Существует порядка 140 имен цветов и 16 шестнадцатиричных значений. Добавляя прикосновение стиля объясняет детали относительно этих кодов.
ШАГ 3: изменяем шрифты
Еще одна вещь которую можно сделать — шрифтовое разнообразие разных элементов на странице. Давайте напишем шрифтом “Georgia” весь текст, исключая заголовки, которые мы напишем “Helvetica.”
Поскольку в Web никогда нельзя быть целиком уверенным в том, какие шрифты установлены на компьютерах посетителей, мы добавим альтернативные способы отображения: если Georgia не найдена, то мы будем использовать Times New Roman или Times, а если и он не найден, то браузер может взять любой шрифт с засечками. Если отсутствует Helvetica, то мы можем попробовать использовать Geneva, Arial или SunSans-Regular поскольку они очень похожи по начертанию, ну а если у пользователя нет таких шрифтов, то браузер может выбрать любой другой шрифт без засечек.
В текстовом редакторе добавьте следующие строки (строки 7-8 и 11-13) :
Если вы сохраните файл снова и нажмете “обновить” в браузере, то у вас должны быть разные шрифты в заголовках и в тексте.
Сейчас шрифт заголовков и основного текста различается.
ШАГ 4: добавляем навигацию
Список наверху HTML страницы представляет из себя навигацию по сайту. Множество сайтов имеют навигационное меню вверху страницы или по сторонам от содержимого. Наша страница тоже не будет исключением. Мы поместим меню слева, потому что это несколько привлекательнее, чем наверху.
Навигация уже на странице. Это список <ul> вверху. Ссылки в нем не работают, потому что наш “сайт” пока что состоит только из одной страницы, но это неважно в данный момент. Конечно же, на настоящем сайте не должно быть неработающих ссылок.
Нам нужно переместить список налево и сдвинуть остальное содержимое немного вправо, чтобы создать пространство для него. Свойства CSS которые мы будем использовать для этого — ‘padding-left’ (для сдвига текста) и ‘position’, ‘left’ и ‘top’ (для сдвига меню).
Есть и другие пути. Если вы поищете термины “столбец” или “верстка” на странице изучая CSS , вы найдете несколько готовых к использованию шаблонов. Но для наших целей сгодится и такой.
В окне редактора добавьте следующие строки к HTML файлу (строки 7 и 12-16) :
Если вы снова сохраните файл и обновите его в браузере то список ссылок получится у вас слева от основного текста. Это уже смотрится интереснее, не так ли?
В отличии от предыдущего файла, в этом главный текст переместился направо а навигация налево
Свойство ‘position: absolute’ говорит что элемент ul расположен независимо от любого текста который предшествовал или будет следующим за этим элементом, а свойства ‘left’ и ‘top’ обозначают это расположение. В нашем случае это 2em сверху и 1em от левого края окна.
‘2em’ обозначает 2 раза по растоянию, равному размеру текущего шрифта. Т.е., если меню отображается шрифтом в 12 пунктов, то 2em будет равняться 24 пунктам. `em` очень полезная единица измерения в CSS, поскольку может адаптироваться автоматически к шрифту, используемому браузером. Большинство браузеров имеют возможность изменять размеры шрифта: вы можете попробовать увеличить или уменьшить размер и увидеть, что меню будет изменяться в зависимости от размера шрифта, чего бы не случилось, если бы мы указали отступ в пикселях
ШАГ 5: украшаем ссылки
Навигационое меню все еще по-прежнему выглядит как список, вместо меню. Давайте стилизуем его. Мы уберем маркеры списков и переместим элементы налево, где были маркеры. Так же мы нарисуем каждый элемент списка на белом фоне в своем черном квадрате (зачем? просто так, потому что можем).
Мы так же не сказали какими должны быть цвета ссылок, так что давайте добавим и это свойство: синими будут ссылки которые пользователь еще не смотрел, пурпурными — те которые он уже посещал. (строки 13-15 и 23-33) :
Обычно браузеры выделяют гиперссылки цветом и подчеркиванием. Обычно, цвета похожи на те, что мы указали: синие для ссылок которые пользователь еще не открывал (или открывал долгое время назад), пурпурные дял страниц, которые он уже видел.
В HTML гиперссылки создаются тэгами <a> поэтому для указания цвета нам надо создать правило в CSS для “a”. Для того, чтобы различать посещенные и непосещенные ссылки, CSS предоставляет два “псевдо-класса” (:link и :visited). Они называются “псевдо-классами” для отличия от HTML атрибутов, которые указываются в HTML напрямую, т.е. в нашем случае class=»navbar» .
ШАГ 6: добавляем горизонтальные линии
Последним добавлением к нашей таблице стилей станет горизонтальная полоса для разделения текста и подписи снизу. Мы используем свойство ‘border-top’ для того чтобы добавить прерывистую линию над элементом <address> (строки 34-37) :
Теперь наше оформление закончено. Давайте вынесем таблицу стилей в отдельный файл, чтобы остальные файлы могли использовать ту же самую таблицу стилей, что и первый файл.
ШАГ 7: внешний CSS
Сейчас у нас есть HTML файл со встроенной таблицей стилей. Но если наш сайт будет разрастаться, возможно, нам потребуется множество страниц, использующих один и тот же стиль оформления. Есть метод получше, чем вставка таблицы в каждую страницу — мы можем вынести стили в отдельный файл, на который будут указывать все страницы.
Для создания отдельного файла таблицы стилей нам нужен другой пустой текстовый документ. Вы можете выбрать пункт “Новый” из меню «Файл» в редакторе , для создания пустого файла. (Если вы используете TextEdit, не забудьте сделать его текстовым снова, используя меню Format.)
Затем вырежьте и вставьте все содержимое внутри <style> из HTML в это новое окно. Не копируйте элементы разметки <style> и </style>. Они принадлежат HTML коду, а не CSS. В новом окне у вас теперь должен быть полная таблица стилей:
Выберите “Сохранить как…” из меню «Файл», убедитесь что вы в той же директории/папке что и файл mypage.html, и сохраните таблицу стилей под именем “mystyle.css”.
Теперь вернитесь к HTML коду. Уберите все содержимое от <style> до </style> включительно и замените убранное элементом <link> как показано (строка 5) :
Такая конструкция скажет браузеру о том, что таблица стиле располагается в файле под названием “mystyle.css”, и поскольку директория не упомянута, браузер будет искать этот файл там же, где лижит HTML файл.
Если вы сохраните файл и обновите его в браузере, то не должно произойти никаких изменений: страница по прежнему использует то же оформление что и в прошлый раз, но на этот раз оформление хранится во внешнем файле.
Следующий шаг — положить оба файла mypage.html и mystyle.css на ваш сайт. (Конечно, вы можете захотеть слегка изменить их сперва…) Как положить файлы на сайт зависит от вашего интернет провайдера.
Дальнейшее изучение
Для введения в CSS, смотрите главу 2 Lie & Bos или введение в CSS Дейва Рэггета .
Другая информация, включая большее количество уроков может быть найдена в разделе изучения CSS.
How to add CSS to my HTML code on Notepad++
So I’m trying to add my CSS code to my HTML code on notepad++ but every time I run it, the only thing I see is my code and not all the content I want about website. How do I fix this?
Here is a snip of my html code:
2 Answers 2
Please find your updated code here, This is how you should add/write CSS to HTML :
I would suggest you to move your <style> tag to <head> area.
To apply css you have to put css under tag or you can use external stylesheet..Read more here
Please check this example
You have used css for div and p tag and i have showed you how to use them according to your css. You can also give css in inline way but it just depends on need(mostly avoid it.)
Hope this will help or let me know if there is any confusion or issue..ty
Notepad++ — бесплатный редактор HTML, CSS и PHP кода с подсветкой синтаксиса и полезные плагины для Нотепада++
Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. Думаю, всем известно о таком текстовом редакторе как простой блокнот (Notepad), который поставляется в комплекте ПО операционной системы Windows. Так вот, несмотря на общность названий, разница между ним и нашим сегодняшним героем Нотепад плюс плюс такая, как между первым черно-белым телевизором и современным HD устройством с кучей функционала.
Данный софт обладает просто огромными функциональными возможностями, кои еще можно расширить с помощью многочисленных плагинов, каждый из которых выполняет свою задачу (наиболее популярные и нужные из них мы разберем в статье отдельно).
На основании всего выше сказанного, а также учитывая огромную популярность этого редактора, можно сделать очевидный вывод, что он может стать настоящим профессиональным инструментом для программистов и вебмастеров. Все подробности о нем ниже.
Скачивание, установка Нотепад ++ и его базовые опции
Итак, скачать Notepad rus (на русском) вы можете с официального сайта этого софта, где всегда найдете актуальную на текущий момент версию (кликните по ссылке «Download» свежего релиза, расположенного в самом верху странички):
При этом, в комплектацию программы включены десятки языков, в том числе и русский. Очень важный момент: если у вас вариант 64-битной Виндовс, то менеджер плагинов (Plugin Manager) будет недоступен и его придется устанавливать отдельно (это очень нужный модуль, который экономит массу времени в процессе расширения функционала). Имейте это ввиду.
Кроме всего прочего, отсюда вы можете скачать и портативную версию Notepad plus plus, которая не требует инсталляции. Просто распаковываете архив и пользуетесь.
Но и установка стандартной вариации редактора интуитивно понятна и происходит в обычном режиме, не представляя никаких сложностей. Запускаете скачанный установочный файл, после чего следуете указаниям Менеджера, который подскажет все действия на каждом шаге установки.
А теперь отметим для себя преимущества Нотпада с двумя плюсами, которые делают его самым востребованным и популярным:
- основным плюсом продвинутого блокнота является то, что он абсолютно бесплатен;
- существует сразу несколько видов комплектации Нотепад, что дает пользователям выбор;
- вероятно, редактор немного уступает по своим возможностям программам вроде WISIWIG, Dreamweaver или HomeSite что касается выполнения супер сложных задач. Но, тем не менее, его функционал достаточно широк, чтобы удовлетворить потребности вебмастеров и программистов в их каждодневной работе;
- по скорости и по количеству потребляемых ресурсов Notepad ++ безусловно превосходит многие платные аналоги.
Далее выделим наиболее полезные и часто используемые функции этого редактора. При этом будем исходить из того, что данный софт предназначен в первую очередь для составления и изменения содержания документов, написанных на самых различных языках программирования, а также HTML, CSS и PHP файлов, которые применяются при создании сайта, в том числе на каком-то из современных движков (здесь сведения о лучших CMS).
Самые полезные возможности продвинутого блокнота
1. Поиск (горячие клавиши Ctrl+F) выражений, слов или совокупности определенных символов и знаков можно производить как в открытых документах, так и во всех текстовых файлах, находящихся в конкретной папке:
Есть возможность настроить поисковой режим (обычный, расширенный либо с применением регулярных выражений) с заменой найденных по запросу элементов, которые по умолчанию будут выделены зеленым цветом, на нужные, а также подсчитать их общее количество.
2. Настройка горячих клавиш. Это делается из верхнего меню «Опции» — «Горячие клавиши», где в списке присутствует огромное количество функций, часть из которых уже имеет готовые сочетания по умолчанию. Дважды кликнув левой кнопкой мышки по выбранной строчке, которая олицетворяет нужную вам опцию, вы можете установить для нее свой вариант:
Причем, есть очень полезный инструмент подсказки, который выводит сообщение «CONFLICT FOUND!» при попытке создать сочетание клавиш, которое уже имеется в списке. Это очень удобно, поскольку нет необходимости каждый раз вручную перелопачивать весь перечень по этому поводу. В этом случае просто указываете другой вариант горячих клавиш.
3. Подсветка синтаксиса для нескольких десятков языков программирования (Assembly, Batch, C++, CSS, Diff, Erlang, Forth, HTML, Intel HEX, Java, Javascript, Pascal, PHP, Ruby, Shell, SQL, XML и других). Установить подсветку для документа на нужном языке можно из раздела «Синтаксисы» того же верхнего меню:
Настроить оформление подсветки в редакторе возможно во вкладке «Опции» — «Определение стилей», где сначала выбираете общую тему из выпадающего списка, а затем для каждого элемента соответствующего языка (подразделы «Язык» и «Стиль») можно установить свою цветовую гамму и шрифты:
4. Нотепад дает возможность совершить шаг назад или вперед в процессе редактирования (то есть, либо возвращаться к прежней редакции документа, либо отменять этот возврат) с помощью соответствующих стрелочек на панели управления:
Эти действия позволительно реализовать также посредством горячих клавиш Ctrl+Z (назад) и Ctrl+Y (вперед). Поскольку число таких шагов ничем не лимитировано, вы получаете отличную возможность спокойно тестировать различные варианты документов при редактировании, не опасаясь сотворить какую-нибудь критическую ошибку, способную привести к фатальным последствиям. К слову, отмена или повтор действий производится и из раздела «Правка»:
5. С помощью вкладок в Notepad плюс плюс можно открывать сразу несколько файлов для их редактирования аналогично вкладкам в любом современном браузере:
Причем, цвет значка дискетки в соответствующей вкладке подскажет вам, какие из открытых документов вы уже сохранили после редактирования (синий цвет), а какие остались пока не сохраненными (красный цвет на активной вкладке и пурпурный — на неактивной). Исправить ситуацию и сохранить новую редакцию файлов (одного или всех сразу) можно нажатием того же символа с дискеткой на панели инструментов.
Кроме того, вкладки можно перетаскивать, зажав мышкой, в любом направлении, сворачивать, а также закрывать их нажатием на крестик:
Если перейдете из верхнего меню в раздел «Опции» — «Настройки», то во вкладке «Общие» можете настроить действия со вкладками по своему усмотрению, заполнив чекбоксы напротив соответствующих опций (например, установить их вертикальное расположение с левой стороны или запретить перетаскивание мышкой):
Необходимо заметить, что обычно настройки по умолчанию являются оптимальными и подходят большинству пользователей. Это касается практически любого софта, и Notepad plus plus здесь не исключение. Не зря разработчики уделяют этому аспекту особое внимание, тем самым экономя драгоценное время, которое можно потратить на другие важные вещи.
Наверное, поэтому лично меня в этом смысле все устраивает и я ничего в настройках не менял. Хотя у вас могут быть другие соображения на этот счет и вы сможете в любое время нужные вам функции в разделе «Опции» настроить по своему разумению.
Функционал для работы с документами в редакторе
Редактирование любых файлов занимает определенное время и требует при этом внимательности и прилежания, поэтому Нотепад++ предоставляет набор средств, позволяющих упростить и облегчить процесс. Ниже мы их и рассмотрим.
1. Notepad plus plus позволяет проконтролировать, все ли HTML теги закрыты. Если кликнуть по какому нибудь открывающему тегу в документе, то при наличии закрывающего (или наоборот) оба они будут подсвечены. Более того, пунктирная линия, соединяющая их, даст представление о содержании, расположенном внутри блока, который находится между этими тегами:
Удобства при работе с файлами такого формата добавляет также возможность раскрывать и скрывать отдельные независимые блоки с помощью значков «плюс» и «минус». Ну и нумерация строк в этом смысле не является лишней.
2. С помощью той же подсветки кода мы определяем, не отсутствует ли какой-нибудь важный элемент в коде. После приобретения некоторых навыков вы уже сможете находить такой участок не напрягаясь по изменившемуся цвету определенного фрагмента, который логически с ним связан. Вот пример двух вариантов одного и того же кусочка PHP кода, где в первом случае не достает одного элемента (на скриншоте он сверху), а во втором — ошибка исправлена:
Обратите внимание на код, находящийся в верхней части. Цвет угловой скобки, расположенной после отсутствующего символа, отличается от расцветки открывающей скобки. В результате исправления ошибки путем вставки недостающего знака их цвет стал одинаковым. Кроме того, посмотрите на участки кода до и после редактирования (куски, обведенные красной и зеленой рамкой соответственно). Заметили разницу?
3. Посредством той же подсветки синтаксиса можно выделять кодовые фрагменты, которые заключены в фигурные <>, квадратные [] или стандартные () скобки. При щелчке по одной из них (неважно, закрывающей или открывающей) подсвечиваются обе, что тоже очень удобно:
4. Автозавершение является еще одной фишкой, призванной облегчить работу с текстовыми файлами. Эта опция, установленная по умолчанию, дает возможность автоматически завершать набираемое вами слово. С этой целью достаточно выбрать из таблички с подсказкой нужное (например, свойство CSS) и нажать «ENTER »на клавиатуре:
5. Перемещение документа, ярлык которого находится на рабочем столе, прямо в окно Нотепада plus plus — еще одна возможность оптимизации работы с файлами. Ну, это совсем несложно, тем более, что такая операция наверняка вам известна, поскольку предусмотрена во многих программах. Просто хватаете c поверхности рабочего стола ярлык нужного документа мышкой и осуществляете знакомое действие «drag-and-drop» (бери-и-брось).
6. Перетаскивание выделенного фрагмента кода внутри самого документа. И здесь все проще простого: выделяете курсором нужный кусок, зажимаете его мышкой и помещаете в нужное вам место.
7. Есть возможность ставить маркеры в важных местах содержания открытого в окне блокнота документа. Это еще один шажок разработчиков по направлению к пользователям. Выбираете нужную строку и ведете курсор влево, пока он не примет вид стрелки, направленной вверх-вправо. После этого щелкаете левой кнопкой мышки, в результате чего появляется отметка, напоминающая объемное изображение шара синего цвета:
Проставлять маркеры вы можете посредством сочетания клавиш Ctrl+F2 (а также удалять их при необходимости), устанавливая необходимые места с помощью стрелок «вверх» и «вниз» на клавиатуре. Прокручивать содержание файла между маркерами сверху вниз возможно, если последовательно нажимать на F2, а в обратную сторону — используя горячие клавиши Shift+F2.
8. В случае использования в работе HTML файла существует возможность просмотреть вид кода в соответствующем браузере. Для этого используйте «Запуск» из верхнего меню:
Выбираете из списка обозреватель (Firefox, IE, Chrome или Safari) и жмете на него левой кнопкой мышки. Ежели вы планируете лицезреть код в другом браузере, то кликаете по первой строке «Запуск», а затем вводите местоположение нужного файла .exe:
Далее запускаете обозреватель (в моем примере это Opera), щелкнув по соответствующей кнопке.
9. Сохранение файла в нужной кодировке очень важный момент. При создании сайтов различной направленности мне очень часто удавалось избегать появления кракозябров, которые возникают из-за сохранения документа с русским текстом в Windows-1251. Вот пример:
Чтобы избежать этой неприятности, надо перед вставкой текста на русском языке на вебсайт применять для содержащего его файла кодировку UTF-8 (без BOM). Либо преобразовать в эту кодировку уже имеющийся документ, после чего кракозябры будут успешно заменены вполне читабельным текстом. В Notepad плюс плюс для этого есть все возможности:
Нужно обязательно использовать UTF-8 (без BOM), так как при кодировке в UTF-8 может происходить добавление невидимых символов, в результате чего отображение текстового содержания может быть некорректным либо нарушена работоспособность всего файла, отвечающего за отображение тех или иных элементов.
По этой причине в Нотепаде ++ по умолчанию уже установлена опция преобразования всех новых документов в UTF-8 (без BOM) (в самих настройках она указана как UTF-8):
Советую во избежания неприятностей в таком виде так все и оставить.
10. Вам может понадобиться после окончания работы с текстовым файлом вывести на печать его содержимое. Согласно настройкам по умолчанию документ будет отпечатан практически в первозданном виде. Но вы можете изменить его оформление из того же раздела «Опции» — «Настройки» во вкладке «Печать», установив собственную цветовую схему и/или добавив отступы, а также настроив колонтитулы.
Для чего нужен Менеджер плагинов и как его использовать
Возможности Нотепада plus plus зиждутся не только на базовых функциях, использовать которые вы сможете сразу после его установки, но и на дополнительных, вносимых плагинами, которые добавляются по мере необходимости в соответствии с вашими потребностями.
И вот здесь Plugin Manager (Менеджер плагинов) играет не последнюю роль. Именно с помощью этого модуля можно быстро найти нужные плагины (которых, кстати говоря, целая уйма) и затем добавить их безо всяких проблем в редактор. Перейти к Менеджеру можно из верхнего меню:
После нажатия на соответствующий пункт выпадающего списка перед вами откроется окно со списком всех возможных плагинов. Чтобы установить нужные, просто отметьте их галочками и нажмите кнопку «Install»:
По окончании инсталляции любого расширения в появившемся диалоговом окне, в котором будет сообщение о необходимости перезагрузки редактора, нажимаете «Да» (после этого действия произойдет активация установленного плагина):
Как я отмечал в начале статьи, Менеджер должен находиться в комплекте с самим Нотепадом, если вы устанавливаете программу на 32-битную ОС Виндовс. Для 64-битной вариации этой операционной системы Plugin Manager в составе редактора отсутствует.
Но не всегда такой расклад имеет место. Лично я однажды столкнулся с ситуацией, когда после скачивания программы и установки ее на 32-разрядную Windows Менеджера плагинов не оказалось. Точно не могу сказать, по какой причине произошел этот конфуз, но то, что такое может быть, непреложный факт.
Поэтому я решил втолкнуть в эту и так объемную статью еще и информацию о том, как добавить Plugin Manager отдельно, если он отсутствует. Думаю, это кому-нибудь да поможет.
Как установить Plugin Manager при его отсутствии в комплекте
Итак, если вы столкнулись с выше описанной ситуацией и после установки Notepad++ модуля у вас не оказалось, бить тревогу и рвать на себе волосы не стоит. Проблема решается довольно просто. С этой целью перебираетесь на официальный сайт разработчика Plugin Manager, чтобы скачать последнюю версию:
Скачиваете архив ZIP на компьютер и распаковываете его. После распаковки перед вами будут две папки, вам понадобится только «Plugins». Открываете ее и перемещаете находящийся там файл PluginManager.dll в директорию установленной программы Notepad++ — plugins. Затем перезагружаете программу, если она у вас была открыта, после чего Менеджер обязательно должен появиться на своем законном месте.
Как расширить возможности Notepad++ за счет плагинов
Надеюсь, вы осознали, как с помощью Менеджера можно устанавливать любой из плагинов, а теперь осталось рассмотреть те, которые действительно могут оказаться полезными.
Прежде, чем перейти к описанию некоторых нужных расширений, следует сделать небольшое отступление, поскольку есть одна тонкость в плане возможного конфликта горячих клавиш, о назначении которых было сказано выше.
Дело в том, что каждый загружает плагины в разной последовательности и комплект необходимых расширений тоже может быть различным. А для активации тех или иных опций автоматически может присваиваться набор быстрых клавиш в качестве альтернативы. Так вот, вполне может оказаться, что такое сочетание уже имеется в функционале Нотепада, поэтому необходимо назначить новое:
На основании выше сказанного рекомендую после установки нужных вам расширений обязательно просмотреть вкладку «Plugin commands» на предмет конфликтов сочетаний клавиш. Ежели таковые имеются, вы их сразу распознаете по красному фону строки. В этом случае нужно просто найти другой вариант быстрых клавиш, который бы был уникальным. Ну а теперь обещанный перечень полезных модулей.
1. Compare — дает возможность сравнить два документа. Но сначала его необходимо установить через Plugin Manager:
Чтобы активировать работу плагина, нужно из верхнего меню перейти в «Плагины» — «Compare» — «Compare» либо использовать клавиши Ctrl+Alt+C (не забывайте о возможном конфликте). В итоге в окне программы наряду с документом в активной вкладке откроется содержание соседнего файла:
Для удобства анализа двух CSS, HTML, PHP или простых текстовых документов Нотепад осуществит подсветку различий в каждом из них. Причем, для сравнения можно располагать их содержание как в вертикальном, так и в горизонтальном положении.
Чтобы поменять вид отображения, подведите курсор к разделительной полосе, кликните правой кнопкой мышки и из появившегося контекстного меню выберите «Rotate to left» или «Rotate to right» (повернуть направо или налево).
Возврат в стандартный режим работы можно осуществить двумя путями. Для закрытия активного сеанса сравнения файлов надо из того же раздела «Плагины» — «Compare» нажать на строчку «Clear active compare» либо использовать сочетание клавиш Ctrl+Alt+X.
А с целью очистки всех результатов сравнительных анализов примените пункт «Clear all compares» или Ctrl+Alt+Shift+Z (кстати эти горячие клавиши уже в моей редакции, поскольку произошел-таки конфликт, о возможности которого я говорил в начале этого раздела статьи).
2. TextFX — имеет массу полезных опций для редактирования PHP, CSS и HTML файлов, поэтому настоятельно рекомендую его установить. После его инсталляции и перезагрузки редактора в меню последнего появится новый пункт «TextFX». Все фишки этого плагина просто нереально описать даже вкратце, поэтому сами попробуйте выбрать для себя подходящие:
В качестве примера я опишу действие одной из них (выделена на выше находящемся скриншоте красной рамкой), которая инициирует автоматическое закрытие HTML/XML тегов. Если вы активируете эту опцию простым нажатием на нее, то ко всем парным открывающим HTML тегам, которые вы будете вводить, автоматически добавится закрывающий.
3. WebEdit — плагин, помогающий заключать нужный фрагмент в тот или иной HTML тег (это могут быть списки, таблицы, заголовки разного формата, контейнеры div и т.п.):
Для того, чтобы выполнить эту задачу, выделяете необходимый вам кусок в содержании документа и выбираете нужный тег из списка.
4. Light Explorer — открывает Менеджер файлов в левой части окна редактора. После инсталляции посредством Менеджера и стандартной перезагрузки блокнота с 2 плюсами для активации достаточно кликнуть по его названию из списка «Плагины»:
Кстати, и здесь ввиду имевшего место конфликта быстрых клавиш мне пришлось установить новое сочетание (Alt+E) вместо автоматически сформированного Alt+A.
Применение Notepad++ для ФТП-соединения с удаленным сервером посредством плагина NppFTP
Это, пожалуй, один из самых востребованных плагинов для тех, кто занимается вебмастерингом, поскольку позволяет соединяться по ФТП с хостингом, где «живет» сайт, и редактировать файлы ресурса на удаленном сервере. Конечно, для решения такой задачи есть еще и менеджер FileZilla, но в определенных ситуациях работать с текстовыми файлами мне, например, удобнее в продвинутом Нотепаде. После установки расширение должно появиться в списке «Плагины»:
Если нажмете на пункт «Show NppFTP Window», то справа появится специальное окно, в котором после соединения будут отображаться все файлы на удаленном сервере. Если вы далее планируете использовать Нотепад в качестве FTP клиента для редактирования файлов сайта, щелкните по значку шестеренки и выберите из выпадающего меню «Profile Settings»:
Прежде всего, нажатием кнопочки «Add new» вызваете диалоговое окно, в котором прописываете название профиля, вписываете домен сайта (Hostname) и определяете тип протокола (FTP).
Имя пользователя (Username) и пароль (Password) для соединения по ФТП обычно высылаются на электронную почту при регистрации места для сайта либо эту информацию можно найти в панели управления, где вам будет предоставлен аккаунт в процессе покупки хостинга (здесь все подробности этой операции).
Нужно иметь ввиду, что при снятой галочке напротив опции «Ask for password» у вас будет возможность внести в соответствующее поле пароль доступа к файлам вебсайта. Но гораздо более безопасно заполнить все-таки чекбокс и каждый раз при соединении с сервером вводить пассворд, который будет запрашивать Notepad. При этом для хранения и автоматического ввода паролей лучше всего применять какой-нибудь надежный сторонний софт (рекомендую KeePass).
После всех настроек схему FTP соединения с удаленным сервером и получения любого файла сайта для его редактирования можно представить в следующем виде:
Проверка орфографии текста с помощью DSpellCheck
Задачей этого популярного дополнения является осуществление тестирования правописания текстов с точки зрения грамматики. В принципе, данный плагин уже должен присутствовать в базовой комплектации программы и активироваться из верхнего меню (ежели все-таки он отсутствует, то установите его через Plugin Manager, благо операция уже знакома):
По умолчанию есть возможность проконтролировать на правильность написания исключительно англоязычные документы (чтобы проверка осуществлялась на автомате, нажмите «Spell Check Document Automatically»). Для того, чтобы установить, скажем, русский язык, потребуется еще загрузить и соответствующий словарь.
Прежде, чем идти дальше, отмечу следующий важный момент. Возможно, в обычном варианте инсталлировать словарик вам не удастся, поэтому лучше открыть Notepad с администраторскими правами (для Windows 7, например, требуется кликнуть по ярлыку редактора правой кнопкой мышки и выбрать из контекстного меню пункт «Запуск от имени администратора»).
Продолжим. Для установки словаря надо перейти в настройки, щелкнув по пункту «Settings. »:
Тут лучше использовать дефолтную библиотеку Hunspell, поскольку в этом случае не придется предпринимать никаких дополнительных телодвижений кроме, собственно, установки словаря для нужного языка. Жмете на кнопку «Donload Dictionaries», после чего выбирайте подходящий язык (в данном примере — русский) из перечня поддерживаемых:
Через некоторое время появится сообщение, что словарик для русского языка инсталлирован. Жмете «ОК», после чего из выпадающего списка напротив опции «Language» находите «Russian»:
Щелкаете последовательно по кнопочкам «Apply» и «OK», этими действиями вы подтверждаете сохранение настроек. В итоге в списке DSpellCheck появится русский наряду с английским и впоследствии вы сможете переключаться между ними для проверки документов на этих языках:
Конечно, для выполнения задачи можно подключить специализированные онлайн сервисы, но во многих случаях плагин Notepad DSpellCheck оказывается удобнее.
Тем более, что при проверке орфографии текста в HTML формате можно установить подсветку тегов, в то время как сам текст будет черным. Слова с грамматическими и стилистическими ошибками будут подчеркнуты красной волнистой линией.
How to Create a Simple CSS Stylesheet Using Notepad
This article was co-authored by wikiHow staff writer, Jack Lloyd. Jack Lloyd is a Technology Writer and Editor for wikiHow. He has over two years of experience writing and editing technology-related articles. He is technology enthusiast and an English teacher.
The wikiHow Tech Team also followed the article’s instructions and verified that they work.
This article has been viewed 209,902 times.
This wikiHow teaches you how to use Windows’ Notepad app to store information for a webpage written in HTML and CSS. HTML is the programming language used to create your webpage, while CSS is the language that determines the style—color, font, and so on—of the HTML elements on the webpage.