Notepad++ — как пользоваться редактором кода при создании сайтов
Когда я начинаю рассказывать своим ученикам о создании сайтов, я говорю, что для их разработки существует много различных программ, но достаточно самого простого текстового редактора. И, действительно, первые учебные сайты пишутся в программе Блокнот. Но, постепенно, по мере изучения языка HTML и знакомства с технологией CSS возникает необходимость в использовании более удобных и более продвинутых средств для написания и обработки кода. Одно из них — программа Notepad++. Как пользоваться ей — в этой статье.
Существует много прекрасных web-редакторов, программ для создания и редактирования web-страниц. Платные и бесплатные, обладающие разными функциями и возможностями, каждая из таких программ имеет свои достоинства и недостатки. В этой и последующей статьях я хочу описать те программы, с которыми я работаю и которые считаю наиболее удобными.
Все web-редакторы можно разделить на две группы:
Текстовые редакторы. В них редактируется непосредственно код, написанный на каком-либо языке. При создании сайтов это языки HTML, CSS, PHP и некоторые другие. Для работы в таких программах необходимо знание соответствующего языка и умение представить результат работы кода. С другой стороны, использование этих редакторов новичками позволит им глубоко разобраться во всех тонкостях сайтостроения. Поэтому я рекомендую при изучении сайтостроения начинать с использования простых текстовых редакторов, таких как Блокнот, Notepad++, а только потом, после изучения языков HTML, CSS осваивать сложные многофункциональные программы как, например, Adobe Dreamweaver.
WYSIWYG редакторы. (What You See Is What You Get — что видишь, то и получаешь). Эти программы представляют на экране результат работы кода в графическом виде. То есть, если вы разрабатываете сайт, вы видите его в окне редактора так, как он будет отображаться в браузере. Для работы в таких редакторах не обязательно знать языки HTML, CSS и т. д. Вы работаете с визуальными объектами, а программа сама создает код. Конечно, такие редакторы удобнее для пользователя, но и у них есть определенные недостатки.
Notepad++
Notepad++ – первая программа, которую следует освоить начинающему создателю сайтов после Блокнота. Ее часто рассматривают как замену стандартному Блокноту. На самом деле, это текстовый редактор с очень большим количеством полезных функций. Обратим внимание только на те, которые полезны для верстки web-страниц.
Первое, на что обращаешь внимание, это нумерация строк, которой нет в Блокноте. При работе с большими, многострочными документами это облегчает перемещение по ним и поиск нужного участка кода.
Важнейшей функцией редактора является подсветка синтаксиса. Отдельные элементы кода, такие как тэги, их атрибуты, значения атрибутов и т. д. выделяются различным цветом. Это помогает быстро обнаруживать ошибки. Кстати, подсветку можно настроить по усмотрению пользователя.
Данная программа создана для программистов и поэтому поддерживает множество языков. Кстати, при открытии файла язык определяется автоматически.
Важным для веб-разработчиков можно считать поддержку различных систем кодирования и возможность конвертации из одной кодировки в другую.
Кодировки в Notepad++
В отличие от Блокнота, Notepad++ имеет возможность работы с несколькими документами, которые открываются в отдельных вкладках. Например, при разработке сайта приходится работать одновременно с HTML-файлами и файлами CSS-стилей.
С помощью знаков + и – можно сворачивать и разворачивать отдельные блоки кода, что позволяет оставить на экране только те участки, с которыми идет работа.
В редакторе можно настроить автоматическое завершение набираемого слова. Это ускоряет работу и уменьшает вероятность появления ошибок.
Автозавершение
При работе с большим количеством файлов весьма удобна функция поиска и замены в группе файлов.
С помощью Notepad++ можно сравнить два варианта файлов.
При нажатой клавише «Ctrl» вращением колесика мыши изменяется масштаб открытых документов.
Программа позволяет записывать и выполнять макросы.
Кроме этих и многих других функций, Notepad++ имеет и систему плагинов, которые увеличивают возможности редактора. Таким образом, Notepad++ не просто замена Блокнота, а программа гораздо более высокого уровня. Поэтому веб-разработчики широко используют ее в качестве веб-редактора. Конечно, есть у нее и недостатки, например, отсутствие визуального отображения создаваемой веб-страницы, но Notepad++ редактор кода, и для этой цели он подходит очень хорошо. В следующей статье мы рассмотрим еще один веб-редактор, удобный для создания сайтов – phpDesigner. а пока посмотрите еще несколько зимних фотографий.
Если вас заинтересовала статья, или вам есть, что добавить, оставьте комментарий.
Проголосуйте за статью, нажмите кнопку социальной сети.
Источник статьи: http://kviter.ru/web-redaktoryi-notepad
Быстро создаём страницу html — пошаговое руководство с разъяснением
Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.
В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше.
Как создать страничку
Первую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.
Вставьте в него вот этот код.
Создать страницу проще, чем вы думаете
Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате.
Простой код позволяет сделать текст красным
Написать жирным не намного сложнее
Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино.
К примеру, вот ссылка на мой блог — Start-Luck — рассказывает просто о «сложном».
Источник статьи: http://start-luck.ru/sozdanie-sayta/html-stranicy.html
Как создать простой HTML сайт в блокноте
HTML-сайты не обязательно имеют примитивный дизайн. Существует множество бесплатных HTML шаблонов, ничем не уступающих по привлекательности тем, что используются в конструкторах сайтов или CMS. Но большие проекты на них неудобно делать. Много страниц – много мороки, поскольку редактирование каждой требует копания в коде. У них нет панели управления, также все страницы будут статическими – никаких блогов, форумов и т. д.
HTML-сайты чаще всего имеют формат лендингов и сайтов-визиток. В этих сценариях они себя более-менее оправдывают – работают быстро, не грузят сервер, не требуют подключения базы данных. Весь контент содержится в самих страницах. HTML отвечает за вёрстку, структуру блоков, а при помощи каскадных таблиц стилей (CSS) этим элементам можно придать необходимый внешний вид и формат (шрифт, цвет, фон, форма, отступы и т д.).
Вёрстка в HTML бывает табличной (table – устаревший стандарт) и блочной (div – именно её сейчас используют). Язык использует обширный набор тегов, почти все из которых используются парой – открывающий и закрывающий теги (например,
— тег абзаца), внутри которых содержится контент. В CSS используются атрибуты, свойства и их значения, подключаемые к отдельным элементам HTML-каркаса страницы. То есть можно выборочно придавать желаемый вид каждому элементу на сайте по отдельности.
Мы не ставим своей целью обучить вас синтаксису языков – если нужно, то без труда сможете найти сотни уроков и справочников по ним в Сети. Покажем основу – как сделать простой сайт на HTML в блокноте, создать своими руками веб-страницу по тем же стандартам, что используют все посещаемые вами сайты. На примере вы сможете уловить суть процесса, оценить для себя, интересна ли вообще эта тема.
Шаг 1 – создание страницы формата HTML
Откройте стандартный блокнот для Windows (или любой другой текстовый редактор – Notepad++, Sublime Text — неважно), откройте меню «Файл», выберите «Сохранить как», измените кодировку с ANSI на UTF-8 (для правильного отображения русских букв в браузере), впишите заголовок веб-страницы и измените расширение на html (оно идёт после точки), после чего сохраните изменения.
Шаг 2 – добавляем разметку веб-страницы
Теперь приступаем к редактированию файла. Первым делом необходимо добавить -веб-разметку – стандартный кусок кода, позволяющий браузерам распознавать контент, находящийся во внутренних тегах. Просто скопируйте и вставьте его:
Это тег заголовка первого уровня для содержимого страницы
Источник статьи: http://uguide.ru/kak-sozdat-prostoj-html-sajt-v-bloknote
Создание сайта html в блокноте с нуля
Если сайт состоит из одной или нескольких страниц и в ближайшей перспективе не будет наполнятся большим количеством контента или обрастать сложным функционалом (интернет магазин, каталог товаров, форум и прочее). То создать такой сайт лучше на html в блокноте.
- Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html.
- Блокнот, а именно NotePad++. Его можно скачать с официально сайта.
- Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html
- Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже.
- Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта.
- Купить хостинг и домен если нужно сайт выложить в интернете
Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.
Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.
Так как у нас простая html страничка нам не потребуется установка сервера на нашем компьютере, так как язык разметки понимает любой браузер. Однако если потребуется использование php, то просто браузером уже не обойтись.
Теперь нужно открыть файл index и style в NotePad++
Структура html документа
Скопируй код в файл index.html
Теперь открой его в браузере, должно получится так:
В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.
Указываем браузеру по какому стандарту нужно отображать страницу:
Тег html говорит о том где начинается и заканчивается html документ
Тег head необходим для размещения служебной информации, тут подключаются стили, скрипты и размещена meta информация страницы. Посетители сайта не видят содержимого этого тега.
Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.
Верстка или создание сайта на html
В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.
Фон и основной каркас сайта
Замени содержимое своего файла index.html на следующее:
И добавь в style.css такой код:
Обнови страницу с сайтом в браузере (F5), должно получится так:
Шапка сайта
Добавьте в тег div с идентификатором basic следующий код:
Что бы получилось следующее:
И добавляем в файл css строки:
Верхнее меню сайта
Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index.html после:
Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:
Левое меню и контент
Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:
Файл index.html будет выглядеть вот так:
И в конец файла css копируем:
Если все сделано правильно получится сайт как на картинке ниже:
Подвал сайта
Теперь весь файл index.html выглядит вот так:
В файл css добавляем код в самый низ:
Теперь весь файл style.css выглядит следующим образом:
Другие страницы сайта и ссылки меню
Получился сайт, но при клике на ссылки меню ничего не происходит. Поэтому нам нужно придумать название страниц, прописать их в URL меню и создать страницы с этими названиями.
Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.
- o-nas.html — О нас
- assortiment.html — Ассортимент
- otzivi.html — Отзывы
- zabronirovat-stolik.html — Забронировать столик
- nashi-klienty.html — Наши клиенты
- kontakty.html — Контакты
То же самое нужно сделать и с левым меню.
- kofe-ayrish.html — Кофе Айриш
- kofe-amerikano.html — Кофе Американо
- kofe-glyase.html — Кофе Глясе
- kofe-dippio.html — Кофе Диппио
- kofe-kapuchino.html — Кофе Капучино
- kofe-kon-panna.html — Кофе Кон Панна
- kofe-koretto.html — Кофе Коретто
- kofe-latte.html — Кофе Латте
- kofe-lungo.html — Кофе Лунго
Теперь открываем index.html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:
Теперь жми «Сохранить» потом «Файл > Сохранить как» и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:
Все сайт готов. Осталось только поменять в каждой странице контент.
У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).
Источник статьи: http://www.opengs.ru/site/sozdanie-sajta-html.html