Привет, сегодня мы наконец-то
начнём написать код, и я буду направлять вас, показывая вам,
как вы можете использовать редактор. Одной из самых больших ошибок, которые я видела
у многих из моих студентов, что они слушают внимательно, что я говорю,
а не на самом деле пытается взять и начать писать код самим. Таким образом, в то время как я призываю вас, не сидеть сложа руки
и смотреть, что я собираюсь сделать прямо сейчас, я надеюсь, что вы будете следить,
и вы будете писать код со мной. Первый шаг заключается в том, что вам необходимо
создать и редактировать файлы. Одна из самых больших ошибок,
которые вы можете допустить, это если вы будете экономить ваши файлы,
вы будете не в состоянии найти их позже. Так что решите, как вы
организуете ваши файлы. Как вы собираетесь назвать папку? Где вы её собираетесь разместить? Во-вторых, вам нужно принять решение об именовании. Это просто определённый способ,
которым вы собираетесь называть свои файлы. Таким образом, хотя многие люди используют Mac,
и вы можете использовать пробелы в именах файлов, это не то, что вам следует сделать,
когда вы пишете код. Если вы решили, что если у вас есть два слова,
которые вы хотите поставить вместе, вам следует использовать подчеркивание, чтобы соединить их,
или использовать то, что мы называем CamelCase, когда вы пишете с заглавной
первую букву каждого слова. Просто помните, никогда не используйте пробелы и будьте крайне последовательны о вашей капитализации,
если вы собираетесь использовать её. И, наконец, вам нужно принять решение о редакторе. При использовании Windows машины,
Notepad уже встроен. Вы можете также рассмотреть вопрос об использовании
Notepad++ или Sublime. Если вы используете Mac,
TextEdit является редактором по умолчанию, хотя многие люди также используют TextWrangler. Я буду использовать Sublime во всей
остальной части курса, но сегодня я так же буду показывать вам примеры того,
как редактировать в Notepad и TextEdit, а также. Так что для того, чтобы приступить к работе, давайте
быстро проанализируем пять шагов, которые мы собираемся сделать, некоторые из них неоднократно. Вы начнёте с открытия вашего редактора,
а затем вы сохраните файл, добавите некоторое содержимое,
сохраните файл и откроете его в браузере. Я хочу показать вам небольшой пример, и я собираюсь использовать Sublime, чтобы сделать это. Но не волнуйтесь, по мере продвижения вперед я так же покажу вам некоторые
другие способы сделать это. Так, я запустила мой Sublime редактор,
хороший черный файл. Я собираюсь начать,
перейдя в пункт меню "файл". И сохранить. И я назову его firstpage.html. Теперь одна из вещей,
которые нужно решить сразу же - где вы собираетесь сохранить его. Надеюсь, вы решили это,
прежде чем вы даже начали работать. Я собираюсь положить его в папку с именем webpages,
которую я положила на моем рабочем столе. Но вы можете выбрать что-нибудь здесь,
или даже если вы хотите, вы нажмете здесь,
и вы можете создать новую папку. Но чего вы не хотите -
это хранить весь свой код на рабочем столе. Давайте нажмём "сохранить". Я буду много раз заставлять вас сидеть и смотреть как я типа ужасно набираю на экране,
но в этот раз просто чтобы сэкономить время, я буду идти вперед и обману, и вставлю в код,
который я уже написала. Как вы можете видеть, у меня есть
doctype, раздел head и body. В head, я указала мою кодировку и мой заголовок title. В body мы просто поздороваемся. Я сделала это,
и я сохраню его с помощью Ctrl + S. Вы всегда можете нажать в меню "Файл" > "Сохранить",
но я нахожу Ctrl + S гораздо быстрее. И для каждого редактора вы можете
использовать эти маленькие полезные кнопки, чтобы помочь вам узнать,
действительно ли у вас что-либо изменилось. Так что если вы смотрите прямо сейчас на firstpage.html,
это может быть трудно для вас, увидеть, если бы я пошла и изменила что-либо. Вы на самом деле увидите небольшой круг,
чтобы вы знали, что вы не сохранялись некоторое время. А я иду дальше, я создала содержание, и теперь
пришло время, открыть мою страницу. Один из способов сделать это,
перейти сюда в мою папку. И, оп, вот firstpage.html. У меня есть маленькая иконка Chrome сбоку. У вас это может быть другой браузер. Я собираюсь идти дальше и нажать на нее и открыть
мою первую страницу, и, успех. Я не могу не подчеркнуть, что большую часть времени,
когда вы печатаете что-то в первый раз, на самом деле это не будет работать. На моё счастье,
у меня есть навык редактирования. Вы понятия не имеете, но на самом деле мне потребовалось
несколько попыток, чтобы получить этот файл рабочим, потому что я возилась с некоторыми вещами. На протяжении всего курса, я буду стараться, показать вам области,
где вы могли бы иметь проблемы. Надеюсь, у вас их не будет, но если вы их сделаете,
все они очень просто исправляются. Одной из наиболее распространенных проблем является то,
что при нажатии правой кнопкой мыши на файле, вместо открытия красиво в браузере,
он открывается редактором вместо этого. Если вы хотите, исправить это, все, что вам нужно сделать,
это щелкнуть правой кнопкой мыши по файлу и выберите "Открыть с помощью". Другая проблема, которая иногда возникает,
когда вы открываете файл, и вместо того, чтобы увидеть хорошо отформатированную веб-страницу,
вы на самом деле видете все теги. Когда это происходит, вам нужно
проверить расширение файла и убедитесь, что он имеет, .html,
а не что-то вроде .text или .rtf. Другая редко встречающуся проблема,
когда вы изменили свой код, но ваша страница выглядит точно так же. Есть две причины,
по которым это обычно бывает. Одним из них является, то что вы должны сделать действие
под названием обновления вашего браузера. Это просто означает, что вы перезагрузите контент. Вторая вещь, которая случается довольно часто,
это что вы забыли проверить имя вашего файла. Позвольте мне показать вам пример этого. Давайте вернемся к нашему исходному файлу. Как вы можете видеть, у меня
здесь написано "Hello World". Это сказано очень по-компьютерщецки, так что я пытаюсь казаться более нормальной,
я собираюсь изменить это на "Hello Everybody". Я собираюсь сохранить мой файл. Готово Когда я возвращаюсь к моей веб-странице,
она по-прежнему говорит "Hello World". Она не изменилась, и я
отчасти расстроена по этому поводу. Итак, теперь я запомню, что
часто необходимо обновить страницу. Вот способы которыми вы можете сделать это: как правило, можно перейти к небольшой круглой области здесь
и нажамть "Обновить". Вы можете щелкнуть правой кнопкой мыши и нажать "Обновить",
или вы также можете перейти на вкладку "Просмотр". Вы также можете сделать это с помощью
панели инструментов в верхней части. Я буду идти вперед и обновлю прямо здесь. И вы теперь можете видеть у меня "Hello Everybody". Другая проблема, о которой я уже говорила,
что иногда люди меняют имя файла. Может быть, вы не работаете
с вашей первой страницей больше. Поэтому вы решили, что собираетесь сохранить её
"Файл"> "Сохранить как" second page. Сохраняем. Я собираюсь вернуться и обновить файл. Здравствуйте. Ну, ничего не произошло. Вы пытаетесь найти изменения
снова и снова, и снова. Когда вы имеете дело с большим
количеством файлов одновременно, вы должны убедиться, что тот,
который вы смотрите в браузере совпадает с тем, что вы редактируете. Поскольку я изменила название моего файла, мне нужно помнить, что надо изменить
URL здесь адресной строке. Бум. Другая проблема, которая приходит довольно часто,
это когда вы получаете, то что мы будем называть, "странные символы". Одна из основных причина для этой проблемы, мой старый фаворит - копирование и вставка. Всякий раз, когда я даю вам код,
и вы смотрите на него в PowerPoint, проблема в том, что когда вы копируете и вставляете его,
многие символы не переводятся так, как вы рассчитывали, и вы получите то,
что мы называем "странные символы". Основной виновник - цитирование. Всякий раз, когда вы печатаете, и у вас появляются
какие-то странные вещи, которых вы не ожидали, вернитесь и попробуйте ввести код вручную. Таким образом, я показала вам, как создавать
и редактировать файл в Sublime. Но я хочу убедиться,
что у каждого есть шанс увидеть, как я могу создать файлы с помощью редакторов,
которые вы имеете на своем собственном компьютере. Так что я также собираюсь показать вам пример
в TextEdit, а также в Блокноте. Я действительно надеюсь, что когда вы смотрите эти примеры,
вы будете за своим компьютером вводить их вместе со мной. Запускайте и ставьте на паузу,
не забегайте вперед видео, пока вы не уверены, что вы находитесь в точке, которой я достигла. Привет всем! Теперь мы собираемся идти дальше
и создать файл в TextEdit. И если бы я хотела быть злой, я бы взяла и показала бы вам очень быстрый,
простой пример создания файла в TextEdit. Но вместо этого, я буду очень честной с вами
и признаюсь, что только у меня ушло около 15 или 20 минут, чтобы выяснить,
как сделать очень простой файл в TextEdit. Так что для начала, позвольте мне показать вам,
что я сделала неправильно. тета первого, так?Краткое
отступление: видите это обозначение производной, Я собираюсь идти дальше и вставить
мой код в мою очень простую страницу. Хорошо, давайте сделаем это. Идём дальше.
Мы только что получили header и контент нашего сайта. Таким образом, вы можете напечатать это, чтобы мы шли вместе,
или вы можете подождать. Итак, пришло время мне сохранить файл. И то, что мне нужно сделать, это убедиться,
что я сохраняю в соответствующую папку с именем файла. Так что я собираюсь идти дальше
и назвать её FirstPage, и я собираюсь спуститься сюда, и я хочу убедиться,
что я сохранила её как веб-страницу. Так один из вариантов - .html,
поэтому я собираюсь выбрать его. Я знаю, что есть myfirstpage.html, в той папке, где я хочу, и я действительно чувствую,
что мы должны хорошо идти. Так что я собираюсь идти дальше и сохранить его. Теперь, я собираюсь перейти сюда к
моей папке веб-страницы и откройте ее. И собираюсь открыть её в Chrome. Давайте посмотрим, как это выглядит. Это не то, что я надеялся, когда мы впервые
делали запись этого отрывка, и у меня заняло очень много времени,
чтобы выяснить, что происходит. Первое, что я проверила,
позвольте мне закрыть это, я убедилась, что мое расширение файла
действительно было .html. И это было так,
После него не было .txt или .rtf. Следующее, что я проверила, что все мои кавычки
шли в правильном направлении. Так что давайте пойдём дальше и
сохраним это, потому что, если вы помните, я всегда говорю вам, что копирование и вставка
могут иногда дать вам плохие кавычки. Таким образом, мы можем вернуться назад. Всё еще не везёт. Если вы собираетесь использовать TextEdit,
вам на самом деле нужно пойти и внести некоторые изменения в TextEdit. Это не имеет ничего общего с тем,
что вы печатаете. Это имеет отношение к программе TextEdit. Так что я собираюсь идти дальше, скопировать этот код на всякий случай,
если я потеряяю его, и удалить его. И я захожу в TextEdit,
выбираю Настройки, и вы можете увидеть,
что у нас есть два варианта. "Новые документы", и "Открытие и сохранение". Таким образом, одна из первых вещей,
которые я собираюсь сказать, "эй, когда у меня есть новый документ, я хотел бы
чтобы он был в виде обычного текста". Не "rtf" или "rich text", а "plain text". Второе, что вам следовало бы сделать,
это перейти здесь к "открытию". Смотрите для HTML файлов режимом отображения
является HTML? Мы будем идти дальше и нажмём на него. И наконец, самое главное,
когда вы сохраняете ваши файлы, мы хотим сохранять их как UTF-8. Я остановлюсь здесь на секунду, только на одну секунду, в то время как вы
смотрите на собственное меню TextEdit. Вы должны убедиться,
что у вас есть эти поля проверены и вы изменили Unicode на UTF-8. это с неверной реализацией алгоритма, в которой параметры обновляются
не одновременно.Здесь, в Если вы испортили что-то, идти вниз, чтобы восстановить
все настройки по умолчанию и повторить попытку. Я собираюсь закрыть это. Я собираюсь идти вперед и нажать "Создать",
и вставить свой код туда. Ох, это слишком мало для вас,
но тут всё в порядке. Нажимаем "Файл" > "Сохранить". И давайте назовём его FirstPage2.html. Вы можете увидеть, он сразу же говорит:
"вы хотите использовать расширение HTML или .txt?" И я собираюсь сказать, "используй HTML". Перед тем, как нажать на это,
я собираюсь отметить, что здесь, показано, что он собирается
сохранить как unicode UTF-8. Я могу избавиться от этого предупреждения,
если я хочу, нажав здесь, если далее не собираюсь использовать .txt. Мы собираемся использовать HTML. Давайтесделаем это, давайте скрестим пальцы,
давайте надеяться на лучшее. И теперь у меня есть правильная страница. Так что если вы собираетесь использовать TextEdit,
там не очень много, что нужно сделать, за исключением первичной настройки. Убедитесь, что вы заделали настройки. Теперь я могу идти,
внести изменения, которые мы сделали. Сохранить и обновиться. Так что, надеюсь, теперь вы можете успешно
сохранять и редактировать файл. Итак, давайте предположим, что вы
используете PC для создания файлов. Что вы хотите сделать, так это вы,
вероятно, хотите использовать Блокнот сначала, так как это бесплатная версия редактора,
который уже есть на вашей машине. Первое, что я сделала - я сделала нужную папку на рабочем столе,
где я могу держать мои файлы. Я знаю, что она слишком мала, так что вы, вероятно,
не можете видеть её, но она называется "web pages". Если вы не знаете, как создать папку, просто знайте, вы можете щелкнуть правой кнопкой мыши на рабочем столе,
выберете "Создать" и "Создать папку". После того как вы создали папку,
в которой вы хотите сохранить ваши файлы, я сразу же пойду вперед и
нажму "Файл" > "Сохранить", и я собираюсь назвать его "firstpage.html". Это очень, очень важно,
чтобы вы добавили .html. Если вы не добавите это, компьютер будет думать, что вы просто работаете
с любЫм другим старым типом файла. Так что я собираюсь нажать внизу здесь
и изменить его с "текстовый документ" на "все файлы". Идём дальше и сохраняем. Упс, он уже существует,
но я собираюсь сказать "да". Теперь пришло время мне
положить внутрь какой-нибудь контент. Я собираюсь обмануть вас немного здесь
и просто скопировать и вставить мой контент, даже если вам придется
вводить его символ за символом. Итак, еще раз, у меня есть doctype,
мой HTML язык равен английскому, мета кодировка равна UTF-8,
мой заголовок и мой контент. На всякий случай, я буду идти дальше здесь
и введу мои кавычки повторно. Потому что кавычки всегда заставляют меня нервничать,
когда я копирую и вставляю, т.к. возможно, я поместила какой-то символ, который мой редактор
не сможет распознать. Теперь, когда я очень довольна и уверена,
что у меня есть код, который я хочу в моем файле, я собираюсь идти дальше - сохранить его снова, зайти в мою папку,
и нажать на "FirstPage.html". Готово. Теперь, каждый раз, когда вы собираетесь изменить
свой файл, вы можете просто держать оба окна открытыми. Внести ваши изменения. "Good job. I have  file!!" Сохранить. И перезагрузиться Отличная работа. Вы создали файл, используя блокнот.