Первое занятие курса «Современная web-разработка»

Автор Andrei Golubev
Первое занятие курса «Современная web-разработка»

Привет.

Меня зовут. Андрей вместе со мной ты познакомишься с основами в разработке на сегодняшний день — это одна продвинутых из самых интересных областей программирования. Наш курс состоит из двух частей каждой части 11 занятий в конце первой части курса вместе создадим проект который представляет из себя логическую игру пятнашки конце второй части курса вместе сделаем нашу меню версию сайта.

Инстаграм наверняка тебе знаком обращаю твоё внимание, что в конце каждого занятия есть обязательная домашнее задание.

Будь готов к тому, что пока ты не сдашь домашнее задание по предыдущим тебе не дадут доступ к следующему, но сегодня я расскажу тебе, что такое язык задумывался ли. Ты, что происходит когда ты открываешь браузер будешь там какой-нибудь сайт например club.ru и конечно. Ты видишь, что открывается сайт. Ну, что же происходит внутри браузера в этот момент на самом деле браузер отправляет запрос на специальный компьютер который называется сервер сервер в ответ присылает файл с расширением.. А, что мы в этом файле содержится описание внешнего вида страницы которую браузер должен — это тебе как пользователю в этом файле на специальном языке который называется HTML описаны все элементы которые есть на веб-страницу кнопки картинки текста прямоугольники и так далее так далее. Всё, что ты мог видеть на веб-странице всё — это содержится файлики с расширением. с тем чтобы нам начать создавать свои собственные веб-страницы нам. Достаточно воспользоваться простым текстовым редактором например блокнотом. Однако более современная текстовые редакторы такие как brackets позволяют сильно упростить и ускорить процесс разработки. Ну, что ж давай начнем с того, что скачаем текстовый редактор brackets для этого перейдём на сайт brackets.io и нажмем на большую синюю кнопку download brackets подождём пока выполняется загрузка после этого запустим скачанный файл. И начнём установку текстовый редактор brackets в процессе установки ничего не нужно менять просто нажимаю Next ещё раз Next. Жди пока пока выполняться. И после этого нажимай финиш и так мы установили текстовый редактор brackets теперь я предлагаю открыть рабочий создать на нём папку с названием в эту папку мы будем называть папкой проектор. Теперь нужно открыть её в нашем редакторе brackets давай запустим его файл открыть директорию найдём нашу папку на рабочем столе. А после этого создадим новый файл нажми File New File types и назовем этот файл index. HTML. Обрати внимание, что он сразу же сохраниться в нашей папке проектор то есть в папке Web на рабочем столе — это очень все файлы которые мы будем создавать будут храниться в одной папке программисты любят порядок после всех этих действий против должен выглядеть вот так теперь. Давай напишем 1 код на языке HTML предлагаю тебе поставить видео на паузу не торопясь переписать его. Обрати внимание, что некоторые строчки как бы сдвинуты вправо такие отступы brackets делает сам, но если вдруг — это причина. У тебя такие вот так и не появились ты всегда можешь сделать их сам с помощью клавиши Tab на клавиатуре наверно тебя уже не терпится открыть эту страничку браузере посмотреть как же она выглядит — это можно сделать с помощью проводника Windows Windows Explorer для этого нужно открыть папку проекта кликнуть на файлу index.htm правой кнопкой выбрать открыть с помощью и выбрать любой из браузеров которая установлена у тебя на компьютере Google Chrome браузер Mozilla любой другой когда ты сделаешь откроется веб страница на которой ты видишь надпись Hello world privetmir есть более удобный способ запуска наших web-страниц можно запускать их прямо из brackets для этого в правой части текстовый редактор brackets есть значок. Давай Нажми на него. У нас откроется окошко браузера и мы увидим. Ту же самую страничку теперь давай вернёмся в brackets — это пишем ещё одну строчку после этого. Нау Открой браузер и увидим, что эта строчка появилась здесь при этом не понадобилось не перезагружать страницу не заново открывать её — это свойство brackets называется Live preview если ты откроешь снова видишь, что молния на которую ты раньше нажимал сейчас подсвечена оранжевым цветом. Это значит, что режим Live preview включен и обновления которые ты добавляешь вход будут автоматически погружаться в браузере до сих пор пока ты не. Выключишь режим Live preview нажав на молнию ещё раз теперь давай разберёмся. Как устроен этот кот который мы написали он по строчке doctype HTML — это срочно нужно указывать всякий раз когда ты создаешь свою веб страницу на языке HTML оно подсказывает браузеру, что ты используешь самую свежую самую новую версию язык HTML после этой строки написано несколько тегов которые описывают то. Какие элементы есть веб-страницы. Так — это некоторое слово треугольных скобочках всего теги образуют пару 1 так называется открывающим, а второй так называется закрывающим. Наверняка ты видишь разницу между ними закрывающего тега после первой треугольной скобочки стоит значок Flash наклонная черточка обращаю твоё внимание, что в языке HTML теги не должны пересекаться это, что если ты написал открывающий тег div. А после него открывающий тег span то после него нельзя написать. Сразу закрывающий тег div нужно сначала написать ещё так. Спан и только потом закрывающий тег div на этом слайде в левой части ты видишь правильное написание кода на языке HTML здесь деньги не пересекаются части так div ID экспонат пересеклись tagdiv закрылся раньше.

0 комментариев
0

Читайте также