Продолжаем наш цикл занятий, переходим от теории к практике.
Здорово, мужики! Ставим на стол кофе, чай, пиво, квас. И начинаем уже работать за компьютером. До этого мы просто учили теорию, но без практики материалы плохо запоминаются. Будем работать с инструментом - компьютером.
Так, с чего начать?
Думаю, все мы знаем, что обычно у всех на компьютере есть Ворд и Эксель. Короче, программы, чтобы писать тексты и делать таблицы. Но эти программы подходят только для написания обычного текста, код в них писать нельзя. Вернее, писать то можно что душе угодно.... Но толку от этого не будет. Мы будем писать код, а получится просто текст.
Это еще почему?
Код - это просто набор букв и цифр, плюс всяких скобочек и других значков. А вот в таких программах, как Ворд, если мы что-то пишем, программа Ворд превращает символы в текст для чтения. Скажем так, у Ворда есть свои блоки, типа как теги, и они невидимые... В общем, когда мы пишем в Ворде, наш текст форматируется(то есть, программа его кладет в свои невидимые блоки). В итоге мы вроде писали код html, css, java script или еще какой-то, но из-за невидимых блоков программы у нас наш код компьютер прочитать не может.
Ведь компьютеру Ворд сказал, что это текст....
Поэтому давайте скачаем и установим специальный редактор кода для программистов. Тогда все, что мы напишем, компьютер будет считать программой, а не текстом.
Запоминаем! Код - это не просто текст! Хоть пишем мы его просто на клавиатуре, как текст. Но его нужно писать в специальной программе - редакторе кода.
Какой редактор кода нужен?
Редакторов кода... Много! Без паники! Давайте начнем по порядку. Есть и редактор доя текста, в котором помимо текста можно писать код. Это программа Блокнот. Она в Windows есть на любом компьютере. Прикол этой программы в том, что она не добавляет к коду невидимые блоки. Поэтому хоть пишешь код, хоть просто текст... Что пишешь, - то компьютер и читает. Короче, блокнот - универсальная программа.
Но! Вы не забывайте, что при создании кода очень легко запутаться и написать неправильно скобочку или запятую забыть. А если Вы напишете 200 строк кода? И там где-то ошибаетесь, и Вам придётся искать ошибку. Это как построить 20-этажный дом и потом по кирпичику его перебирать, проверять, где ошибся...
Поэтому такие простые программы, как Блокнот, не используются для серьезных проектов. Тем не менее, любой программист должен начать обучение с этой программы. Это как начать кататься на трехколесном велосипеде... Потом уже и на двухколесном можно учиться. А затем для написания кода мы скачаем нормальный редактор - Визуал Студио (Visual Studio).
Текстовый редактор Блокнот
Плюс этого редактора в том, что его не нужно устанавливать, он не зависает и настолько простой, что с ним не придется учиться работать. И еще, программа Блокнот есть в любом компьютере с Виндоус любой версии.
Сначала мы включаем компьютер и внизу экрана нажимаем на лупу. В строке поиска пишем "Блокнот".
Сверху отобразится приложение "Блокнот". Нажимаем "Открыть". Открываем Блокнот.
Кстати. В строке поиска можно писать названия любых программ и файлов, хранящихся на компьютере. И компьютер будет искать файл или программу, название которой мы написали.
Все, мы открыли наш редактор. Он выглядит, как просто белый лист бумаги, на котором можно писать. Хотим - пишем код, хотим - стихи... Ну это шутки конечно.
Внешний вид - интерфейс Блокнота
Пишем код в Блокноте
Давайте напишем самый простой код HTML в нашей программе "Блокнот". Вы можете просто скопировать и вставить это:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<title>Hello, World!</title>
</head>
<body>
<h1>
Добро пожаловать на сайт!
</h1> <! - - это боольшой заголовок-->
<a href="https://bestgif.su/photo/nadpisi/kommentik_kartinka_s_kodom/41-0-9511" >
<img src="https://bestgif.su/_ph/41/2/314977.gif" alt="Комментик картинка с кодом" border="0"> </a> <--Это картинка-->
<p>Лучшие программисты мира предлагают вам услуги по созданию сайта.</p>
<p>Мы ответственно относимся к нашей работе.</p>
<p>К нам обращаются известные бизнесмены, блогеры и политики. Еще у нас недорого.</p>
<! - - это абзацы-->
</body>
</html>
Написали код в Блокноте.
Ну и?..
Хотя мы писали код HTML, компьютер пока не знает этого. Чтобы компьютер узнал, что мы создали текст, код или еще что-то, надо сохранить наш файл. И при сохранении мы укажем название название.html - после точки указываем тип файла. Назовем .css - это уже будет файл CSS. Это вот название типа файла после точки называется расширение.
Как сохранить файл
Смотрите, когда мы пишем код программы, это отнимает время и силы. Представьте, что резко отключилось электричество, или вы случайно закрыли программу. Весь код, который вы в мучениях писали три часа, пропадет.
И что, заново писать?
Нет, надо просто сразу после открытия программы сохранить наш файл. Но вот если мы будем писать код дальше, изменения не будут сохраняться. Чтобы код не пропадал, еще необходимо регулярно нажимать на кнопку Сохранить. Тогда после каждого нажатия на кнопку файл будет пересохраняться. Например, написали пару строчек, сразу сохранили. Короче, тогда наш код не пропадает.
В Программе Блокнот давайте изучим меню. В меню выбираем Файл и нажимаем Сохранить как. Откроется папка, в которую можно сохранить файл. Мы потом будем в отдельной папке файлы с программами сохранять. А пока в эту первую попавшуюся папку сохраним.
Как видим, программа автоматом хочет сохранить файл с расширением .txt. Но нам так не пойдет. Все это стираем, пишем английскими буквами название любое точка html.
Пример:
privet.html
Написали название. В графе Тип файла выбираем - Все файлы. Это обязательно, а то компьютер опять не поймет.
Нажимаем Сохранить. Все, на нашем компьютере сохранился наш файл.
Как сохранять изменения
Представим, мы написали что-то, потом приписали еще чего-то. А в компьютере хранится файл в том виде, как он выглядел, когда мы его сохраняли. В общем, компьютер, как старая бабуля - помнит внуков, да не помнит, что они уже выросли. Все думает, что они в детский сад ходят, а они уже институт закончили...
Чтобы такого не было, и наш код не пропадал, надо регулярно нажимать на Сохранение. Да, просто сохранить 1 раз недостаточно.
В общем, опять смотрим на меню программы Блокнот. Нажимаем на кнопку Файл, но вместо Сохранить как, нажимаем на просто Сохранить. И каждый раз, когда внесли изменения и хотим их сохранить, нажимаем на Файл, Сохранить. Это все равно, что наша бабуля бы каждый год делала фото внуков и сохраняла фотки в фотоальбоме. И потом она бы по фото помнила, что внуки выросли.
На этом все. С редактором Блокнот мы познакомились, в более профессиональных редакторах, как Визуал Студио, в которых нам предстоит работать, все устроено по тому же принципу. Пишем код - и сохраняем. Там только удобнее - программа сама подсказывает, когда какая-то ошибка, если пишешь тег, сама скобочки рисует. Если тег парный, завершающий тег сама добавляет.
Ну, редактор Визуал Студио изучим потом, а в следующем уроке будем учиться сохранять файлы в папках и искать их там. Это нам будет нужно, чтобы мы могли создать папку с сайтом, сохранить все нужные нам файлы и открывать наш сайт в браузере. До скорой встречи, оставайтесь на связи.