[Играет музыка] 

Дэвид Дж Малан: Это CS50 и это начало недели 7. Так что добро пожаловать обратно. И вы, наверное, помните, что в задаче установить четыре, было немного охоты мусорщика для некоторых сказочных призов при этих условиях после восстановления фотографий Сотрудники и здесь, и в Нью-Хейвене, Вы были оспорены, чтобы найти, как многие из эти ученые-компьютерщики, как вы могли. И у нас есть целый куча предложений. Думал, что я поделиться некоторыми с вами здесь сегодня. 

И мы разместим все эти онлайн. Но в частности, я хотел Обращаем ваше внимание, целью которых скважины одном, Сэм был в довольно многие из них как правило, создает, как это. Но, похоже, что по состоянию на Сегодня утром, победитель был некий некто Кен с 24 сотрудников захватили на камеру или несколько больше, если принять во счет многократного персонал в картинки. Изображенный здесь Кен рядом Марии в Нью-Хейвене. 

Теперь, Кен, однако, оказывается из вне немного углового случае который еще не случалось. Оказывается, что это не произойдет мне поставить мелкий шрифт в задаче установить четыре, что говорит, что персонал права на призы сказочные потому что Кен, конечно, один из фотографы на наших сотрудников. Теперь, с учетом сказанного, он первоначально написал мне, чтобы сказать Пожалуйста, не оставляйте эти фотографии в Интернете. Я думаю, что в значительной степени потому что большинство из фотографий что это фотограф сделал выглядеть кое-что как это. И тому подобное. 

Но Кен хотел, чтобы я вас успокоить что он очень хороший фотограф, он профессионал, он принимает Фотографии, которые не являются размытыми, что лучше в центре внимания, и он взял совсем немногие из наших сотрудников. Но вместо того, только признать Кен, то, что мы думали, что делать это пойти по списку фактически студенты, представившие. И получается, что копье 15 фотографий в этой утром был наш победитель. 

И здесь на фото Лэнс с Колтон, с Сказ, с самим собой, и с Сэмом. Но потом выясняется, что по состоянию на 11:46 утра, так что просто немного назад, Я вернулся в мой адрес электронной почты и нашли что у нас еще одно представление студент по имени Бонни только это чья электронная почта говорит. Не буду врать, я делать это во время занятий. А потом приступил к приложите просто 14 фото, один застенчивый Ланса 15. 

Но на фотографиях Бонни, получается из стали несколько сотрудников, Сэм среди них, так что мы думали, что мы будет сделать, это признать, и из них. Таким образом, в дополнение к получению Dropbox пространство, что каждый, кто принимал участие получает, эти две секции будет также получить хороший обед обслуживали их и их раздел спаривается на следующей неделе. И так вы услышите от нас, Лэнс и Бонни, о том. Так большие поздравления к ним. Теперь, те из вас, кто бы как правило, обед более знаю, что CS50 обед в Кембридже и Нью-Хейвен это в пятницу. Перейти на сайт слэш RSVP CS50 в. А теперь несколько слов о семинарах. Более curricularly. Так Мы приближаемся к точка семестра где вы должны начать думать о конечных проектов. И в самом деле, немного позже, будет так называемая предварительно предложения быть связано. Так предварительно предложения предназначены для довольно низкое влияние и действительно просто возможность для Вам составить короткую записку ваше учение сотрудник информировать его или ее, что вы думаете вам можете сделать для вашего окончательного проекта. 

Сейчас многие студенты в конечном итоге делает веб-основе окончательных проектов. И, конечно, мы просто Теперь на прошлой неделе в этом и за погрузиться в веб-программировании. Так что не нужно беспокоиться, если вас нет абсолютно никакой идеи, как Вы будет строить идеи, которые Вы могли бы иметь в вашем уме. Это на самом деле просто заставляя функция чтобы вы думать и говорить с TF об этом. Но, чтобы помочь вам с этим, и с конечным проектов в конечном счете, знаю, что CS50 имеет традицию предложить семинары. 

И это необязательно, руки, или лекции на основе возможностей чтобы узнать больше о темах, которые немного вспомогательные для Курса Учебный план, тем не менее, замечательно, но Материал для привода окончательные проекты. И так это список, что это Сотрудники CS50 здесь в Нью-Хейвене придумали для в этом году около прошивкой программирование, Android- программирование, разработка игры, и гроздья больше инструментов и языков и методики. 

Так держать глаза на веб-сайте CS50 в. И в то же время, если вы хотите, чтобы зарегистрировать свой интерес в любом из них, перейти к слэш реестра CS50 в. И мы будем следить за то, как к дни и время полета и места и everything-- большинство все будет будет транслироваться и также доступны по запросу после, если вы не можете сделать это на самом деле. Так что без дальнейших церемоний, мы остановились в прошлый раз с GET. 

И это было, как сообщение, которое было внутри виртуальной оболочки, напомним, что мы перешли от маршрутизатора к маршрутизатору Маршрутизатор между веб-браузером и веб Сервер. И, что сообщение выглядел кое-что как это. Это было тем более тайной, что сообщение был на самом деле внутри конверта написано на листке бумаги которого Первая строка говорит буквально, получить черту. 

И только в качестве проверки вменяемости, Что же черта означают? Что значит, когда черта с просьбой веб-сайт? Вы просите его все время. Большинство в любое время вы посещаете веб-сайт, вы на самом деле не ввести имя файла. Вы, наверное, просто зайдите на Facebook.com, ввести, gmail.com, или тому подобное. И что слэш представляют? Что файл? Или то, что страница, специально? 

Индекс, да. Так страницы по умолчанию. Так что, если вы не укажете файл назвать, как мы начнем видеть, вы на самом деле просто с просьбой дать мне страницу по умолчанию Facebook или дать мне мой почтовый ящик или дать мне страница по умолчанию новостей на веб-сайте CNN или тому подобное. И сервер будет реагировать на что сообщение с чем-то как это, говоря, да, я говорить HTTP версии 1.1. 

200, который является статус код, который мы, люди, редко когда-либо видеть, потому что это хорошо. Потому что это означает, OK запрос было получено и обработано должным образом. И тип контента по-видимому, в ответ Нередко, однако, не всегда, текст. И в частности, HTML. И это на самом деле где мы смотрим на сегодняшний день. 

Таким образом, в самом деле, я собираюсь пойти вперед и открыть браузер. Я собираюсь использовать Chrome, вы можете использовать Наиболее любой браузер в ближайшие недели. Обычно мы рекомендуем Chrome потому что это особенно хорошо для разработчиков программного обеспечения. Он получил много встроенных в инструменты, которые облегчают развивать не только HTML и CSS, вещи, которые мы начинаем говорить о сегодня, но и другие языки, а также. 

И я собираюсь идти вперед и идти, целью которых Я собираюсь управления нажмите или вправо щелкните в любом месте на веб-странице. И я собираюсь идти на проверку элемента. И я собираюсь надрать Экран просто немного здесь. Позвольте мне перейти это на дно. Так что это то, что называется Инспектор Chrome. Так что это, как отладки инструмент, встроенный в Chrome. 

Все из вас уже есть это если вы были с помощью Chrome. И это позволяет вам увидеть, что происходит на под капотом какой-то веб-странице. Итак, давайте на самом деле взять смотреть на это следующим образом. Он имеет больше возможностей способ и мы заботимся о сегодня. Но есть эти вкладки здесь. Элементы, сети, источники, график, и некоторые другие вещи. Я собираюсь нажать на Сеть на мгновение. 

И это немного подавляющим на первый взгляд здесь. Но то, что я собираюсь сделать, это позволить мне упростить это немного. Я собираюсь превратить на запись свет, так что он красный. И я хочу сказать, сохранить журнал. И это только немного что я понял, в течение долгого времени, что происходит, чтобы сохранить все, что происходит в браузере. А теперь я собираюсь пойти чтобы http://facebook.com. 

На самом деле, давайте делать WWW для хорошей мерой, слэш. Войти. Таким образом, URL, что многие из Вы, возможно, посетил. А теперь веб Facebook, страницы появляется в верхней части. А потом целый букет материал пролетели на дне. И в самом деле, оказывается, что когда вы посещаете Facebook.com, Вы не просто сделать один запрос HTTP, получается, что собирается Facebook.com посылает 41 из этих конвертов, каждый со своей собственной просьбе получить, как показано, хотя за экраном Здесь, в нижней части экрана, это означает, что, действительно, мой браузеру сделал 41 запросов. 

А в общей сложности, она передала 861 килобайт и он взял почему-то целых восемь секунд скачать все это. Так что на самом деле немного странно что сайт Facebook, что бы долго, но так оно и будет в этом случае. Теперь, все это я действительно не волнует, о для верхней запросу исключением. Итак, давайте к этому здесь и позвольте мне уменьшить на мгновение. 

И позвольте мне увеличить на это. Так что я сделал в левой, хотя есть много происходит здесь является Я выделил Facebook.com, а затем заметить, что я прокрутки вниз, прокрутки вниз, прокрутка вниз, просить заголовки. И вы увидите, что Chrome показывает мне по существу внутренние содержание запроса я сделал. Это не форматирование совсем то же самое способ, но обратите внимание, там упоминание о получить, заметить там упоминаний о хозяине, Facebook.com, путь, или косая черта, что файл я просил. 

И потом, если я прокручиваю резервное копирование, мы будем на самом деле видеть, что то, что возвращается Facebook для меня это все из этих заголовков. Так внутри этого виртуального конверта действительно много пар ключ-значение. Слово, толстой кишки, а затем значение. Слово, толстой кишки, а значение. Они называются заголовки. И есть намного больше, чем здесь подробно мы на самом деле заботятся о прямо сейчас. 

Но это второй последний там, Отметим, что сервер Facebook.com, в здесь действительно сказал приходит какой-то текст HTML. Таким образом, все это есть что, когда вы запрашиваете веб- страница из браузера на Сервер, что сервер отвечает с конвертом собственной внутри которого находится текст. Другими словами, HTML. Язык гипертекстовой разметки. Какой другой язык что мы вводим сегодня что люди или компьютеры генерировать для того, чтобы реализовать веб-страниц. 

В частности, давайте посмотрим на это. Я собираюсь вернуться в настоящее время на сайт Facebook. И я собираюсь просто Контроль мыши или щелкните правой кнопкой мыши и нажмите на просмотр страницы источника. И даже если вы не используете Chrome, IE может сделать это, Firefox может сделать это, Сафари можете сделать это, хотя меню варианты могут выглядеть немного иначе. И это HTML, что Марк и Компания в Facebook написал. 

И вместе, этот язык здесь реализует синий и белый страницу что мы видели минуту назад. Теперь, это немного подавляющим. Но если мы посмотрим на в левом верхнем углу, мы собирается начать видеть некоторые модели. Похоже, есть много из них открытой угловой скобки а там это ключевое слово HTML. Вот еще один открытый угловой кронштейн и головы. 

Вот, если мы прокрутите вниз и вниз, и вниз, я идти вперед и попробовать искать что-то. Там путь на правый здесь с открытым кузовом кронштейн. И помните из прошлого Время, мы предложили что простейшем веб-страницы которые могли бы написать человек может выглядеть немного что-то вроде этого. Открыть HTML-тег, открытая головка тег, открытый тег заголовка, затем закрыл титул, закрытый голова, открытый Тег тело, часть текста, закрытый корпус, закрытая HTML. 

Но пауза здесь на мгновение. Этот код, даже если вы никогда не написал это раньше но до сих пор не совсем понимаю, то, что происходит, выглядит довольно хорошо. Право, это очень чисто. Это очень стилистически приятно. Много отступа и пробелы. Facebook-х нет. Так почему же так много Facebook хуже, чем я пишу в HTML? По всей видимости. 

Право, это как один из пяти по стилю. Там это веская причина для них, чтобы сократить эти углы. Ладно, так что они не хотят, чтобы сделать его проще для вас, чтобы прочитать его. Таким образом, в некотором смысле, они обфускации его, вроде взбираются его по крайней мере, эстетически так что это тяжелее для Myspace чтобы пойти и сорвать их Домашняя страница и HTML для него. Получается, что с программами хотя, в том числе Chrome, мы можем очистить это супер легко. Так что это не совсем так, как причине. Что еще может быть причиной. Да. Да, данные пробела расходы. Что вы имеете в виду? Да, именно. Если вы нажмете клавишу Tab много или пробел, рассмотрим последствия. Таким образом, каждый ключ на клавиатуре является [Неразборчиво] представлен в виде одного байта. 

Итак, пусть Марк или любой из разработчиков в эти дни парад пробел один раз в этом HTML-страницы, представляет домашнюю Facebook. И Facebook есть много пользователей в эти дни. Итак, пусть домашнюю Facebook, посещают миллиарда людей сегодня. И кто-то на Facebook имеет нажмите пробел один раз. 

Так, один дополнительный байт, миллиарда запросов, сколько еще данные Facebook передачи через Интернет потому что кто-хит пробел на его или ее клавиатуре? Миллиард байтов, или один гигабайт оперативной данные передаются с серверов Facebook для людей во всем Мир без уважительной причины. Теперь, это только один пробел. 

Представьте себе, если мы на самом деле очистить это что и с отступом его и добавил много белого пространства и символы табуляции и пробелы, вы в конечном итоге расходы гигабайт, если не терра байт пространства. И так супер распространены в действительный мир веб-разработки это Минимизировать код. И мы будем в конечном счете видеть как вы могли бы сделать это. 

Но сегодня, мы начнем писать код что на самом деле читается нас, людей. Оказывается, однако, если вы идете назад к этому инструменту в Chrome Осмотрите элемент, ранее, мы были на вкладке Network. Оказывается, что если вы идете к Вкладка элементы, то, что вы на самом деле видите является хром в довольно печатается версия этого же HTML. Таким образом, мы deobfuscated его. Так что это не подходит для компьютера. И теперь вы можете на самом деле нажмите вокруг и начать чтобы увидеть иерархию, которая является веб-страница. Итак, давайте на самом деле это сделать. Я собираюсь идти вперед и открыть на мой Mac программа под названием редактирования текста. И помните, что это всего лишь супер простой текст программы. Окна есть notepad.exe. И я собираюсь для идентичных введите следующее. Док тип HTML, открытый кронштейн HTML, закрыл кронштейн HTML, у нас есть глава странице здесь, конец головки на странице здесь, название будет как, привет мир. 

А потом сюда, мы должны тело на веб-странице. С закрытым кузовом. А потом здесь, привет мир. Все в порядке. Таким образом, мы написали супер быстрый веб-страницы. Я собираюсь сохранить его как hello.html на моем рабочем столе. Мои Mac собирается жаловаться, думая, что, подожди минутку, это текстовый файл, делать Вы хотите назвать это .txt? Но нет, я хочу, чтобы использовать точечную HTML. 

И тогда то, что хорошо, если я просто дважды щелкните этот файл, hello.html, вот мой веб-страницы. К сожалению, я единственный человек в мире кто может посетить эту страницу прямо сейчас. Потому что, когда она, по-видимому жить? Это на мой Mac, верно? Какие бесполезно. Как никто в этой комнате не говоря уже о интернете может на самом деле посетить эту страницу. Таким образом, сегодня мы должны ввести еще один элемент. 

А для этого, я собираюсь идти вперед и открыть облако 9. Так облако 9, конечно, на основе облачных вычислений service-- CS50 IDE-- Это имеет все наши рабочие области работает где-то в Интернете. А это значит, что все наши файлы уже публично доступны. Так что давайте идти вперед и делать это. Я собираюсь идти вперед и создать новый файл NCS50IDE. Я иду, чтобы спасти его, как и раньше а Hello.html и нажмите сохранить. А теперь, чтобы сэкономить время, я иду идти вперед и скопировать вставить этот код чем повторите его. И сохранить его. И вот теперь у меня есть Файл называется Hello.html. Но как я на самом деле открыть его как веб-страницу? Ну, оказывается, что встроенный в CS50 IDE не только компилятор, как лязг и отладчик GDB, как и гроздья других программ, там на самом деле полноправным веб-сервер работает в течение CS50 IDE. 

Все вы, что есть, иметь свой собственный веб-сервер. И веб-сервер просто кусок ПО цель которого в жизни чтобы служить до веб-страниц. Для прослушивания запросов от браузеров и ответить маленьких виртуальных конвертов внутри которого является Содержание, что я написал. Таким образом, это веб-сервер на самом деле бесплатно и с открытым исходным кодом. Где открытым исходным кодом просто означает, программное обеспечение, которое кто-то еще написано, что каждый из нас может реально увидеть и скачать, и даже изменить исходный код. И это называется Apache. 

И мы сделали это немного легче использовать в CS50IDE, называя его Apache 50. Так что он может реально понять следующее. Я хочу сказать, Apache 50 старт. А потом я просто хочу сказать, точка. И мы видим, некоторые несколько аркан сообщение о том, установка веб-сервера Apache документа [? Группа?] к дому, Ubuntu, что бы это, сократить рабочее пространство. Начиная веб-сервер Apache 2 успешно. 

Так Короче говоря, я только нажал на кнопку и повернулся на веб-сервере, который в настоящее время слушать в Интернете на порт TCP 80 по определенному адресу. И это говорит здесь, и это будет меняться в зависимости на имени пользователя и других факторов, но обратите внимание, в настоящее время, если я нажму на это, IDE50 точка jharvard и так, и так, обратите внимание, что все это время В течение последних нескольких недели, вы, возможно, заметил, что ваше собственное имя пользователя встроен в верхней правой руке угол CS50IDE. 

И что на самом деле был все это тайм адрес, по которому вы можете посетить все ваши файлы через Интернет. До сих пор, это не имело значения не, потому что в C, вы, как правило хотят, работающие в Терминал, не в Интернете. Но сегодня, мы начинаем писать веб-основе кода что мы хотим доступны в публичных адресов. Так что я собираюсь сделать, это нажать эту URL. 

И заметьте, что я вижу довольно уродливые индекс, листинг каталога, но то, что файл выскакивает на вас наверное? Hello.html. Это потому, что я спас файл в моем рабочем пространстве. И то, что я сказал Apache веб-сервер это посмотреть в каталоге рабочего пространства Давида. И пусть кто-то в Мир увидеть эти файлы. 

И в самом деле, если я в настоящее время нажмите на Hello.html, Я вижу в этой вкладке точно этого файла. Теперь обратите внимание, Cloud 9 делает что-то немного полезным для нас. В CS50 IDE, обратите внимание, есть вдруг адресной строке. Это потому, что хотя мы с помощью Chrome, чтобы посетить CS50IDE, внутри CS50IDE является его собственным версия веб-браузера прямо сейчас. И поэтому вместо того, усложнять как таковой, Я собираюсь идти вперед и просто скопировать этот URL. Я собираюсь идти вперед и просто открыть свой собственный окно Chrome. Таким образом, нет никакой магии здесь нет CS50IDE. Я просто хочу, чтобы в буквальном смысле вставить мой J Гарвардского URL и нажмите Enter. И вуаля, теперь я и в теории, каждый в Интернете, если я настроил Соответственно, разрешения можете посетить этот файл. И вот теперь, если бы я сказал hello.html, вуаля, есть мой восторг невероятно веб-страницы. Так давайте сделаем быструю проверку вменяемости. Из всего этого является концептуальным настройке. И мы на самом деле не очень научил вас, как писать HTML-как таковой. Таким образом, Есть вопросы далеко на то, что только что произошло? Да. Любая CS50 владеть этими веб-страниц? В каком смысле? Хороший вопрос. Так CS50 владеет CS50.io. Мы действительно купили что доменное имя. И по характеру вы, ребята, войдя в CS50IDE, Вы все получите то, что называется поддомен. 

Так IDE50-Малан, или IDE50-Rob.CS50.io, это ваша уникальный адрес в пределах наш доменное имя. Таким образом, для целей курса, у вас есть свой собственный уникальный адрес. Но мы упростили вещи покупать домен верхнего уровня, CS50 точка I / O, а затем все остальные внутри, что, так сказать. И мы вернемся к тому, что через пару недель, вероятно, особенно в окончательный проект Время, когда некоторые из вас может хотите, чтобы ваши собственные доменные имена. Это на самом деле довольно просто. Все в порядке. Итак, давайте делать это. Я собираюсь вернуться в CS50IDE, где мой файл прямо сейчас, hello.html, не все, что интересно. Я хотел бы сделать что-то немного лучше, чем это. Так что я собираюсь сделать что-то вроде этого. Позвольте мне открытым paragraphs.html. Так что это я написал файл заранее. В верхней части этого, как всегда, у нас есть замечания. Но в HTML, комментарии немного отличаться. На третьей строке и строке 14, вы посмотреть синтаксис начать комментарий и в конечном комментарий. 

Но ни один из материала в между вопросами функционально. Это просто записка к человек, что здесь происходит. И как быстро здравомыслия проверить, если я прокрутите вниз, что очевидным новый тег, который мы ввели? Теги сих пор мы видели открыты Кронштейн HTML, голова, название, и тело. Но то, что, очевидно, новый сейчас? 

Да, так стр. Р тег или тег пункт. А потом я просто заимствовал некоторые умолчанию Латинский текст, чтобы составить свои пункты. Потому что то, что я хотел, чтобы продемонстрировать, как вы могли бы представляют абзацы текста в HTML. И так, что начинает происходить здесь является то, что уже шаблон разработки. И позвольте мне идти вперед и делать это. Позвольте мне сначала выключите Apache. И я собираюсь сказать ему, чтобы начать себя снова в сегодняшней источника семь м каталога. Так что у меня есть доступ ко всему. 

И теперь, если я вернусь в это список каталогов, заметьте, я вижу каждый файл с сегодняшнего дня. И вы увидите, в Следующий набор проблем, мы будем дать вам инструкции для этого именно это. Если я открываю paragraphs.html, это может а выглядеть на языке программирования для вас, если вы не говорите или читать по-латыни. Но это всего три абзаца текста, которые отмечены в HTML. 

И обратите внимание на пункт перерывы между ними. Потому что, оказывается, И даже если вы может быть склонен сделать это, в то время как в реальном мире, если вы хотите, чтобы положить линию перерывы между вещами, Вы могли бы довольно просто это сделать, и ударил Сохранить. И теперь, если я перезагрузить здесь, уведомление что все просто стирает вместе только в одной каплей текста. Поскольку HTML является своего рода немой язык. 

Он предназначен для использования в таких способ, что браузер будет только сделать явно, что вы говорите это сделать. Так что, если вы не говорите его дать мне новый пункт, Вы не увидите новый пункт. И в самом деле, что браузеру собирается сделать даже если вы попали Enter, скажем снова и снова и снова, двигаясь этот текст путь вниз по экрану, а затем сохранить а затем перезагрузить браузер будет свернуть все это белое пространство И лишь в одном, видимый пробел. Все в порядке. Так вот этот тег. И так что картина что здесь развивается? Ну, это, кажется, тот случай, когда HTML все о запуске тег и заканчивая тег. И то, что это тег? Ну, это просто кусок синтаксиса. Открыть кронштейн, ключевое слово, закрытая скобка, это тег. Или начать тег. А потом, когда вы сделано выразить себя, как в вы закончите с пунктом, вы так говорите противоположное. Но обратное не совсем в обратном направлении. 

Вы просто префикс то же тега назвать с косой черты, как это. Все в порядке. Так что не все, что интересно. И в самом деле, мы не делая веб-все, что более интересно. Что делать, если я хочу сделать вещи больше и смелые? Так что получается, что вот пример в headings.html, где в моем теле, Я получил H1 тег, H2, H3, четыре, пять, шесть, все из которых кажется довольно сложных. Но если я иду открывать это Например, давайте взглянем. Headings.html. 

Так браузеры по умолчанию может дать вам текст это большой и жирный разрозненных размеров. H1 большой. Н6 меньше, а затем все остальное между ними. Так вот интересно, но по-прежнему на самом деле не знаю, веб-я. Что делать, если мы хотим, чтобы у меня что-то вроде списка. , Так вот маркированный список три дома Гарварда. 

Как вы идти об этом? Ну, взгляните на list.html. И вот, мы видим, что немного funkiness но давайте рассмотрим, что происходит. Так на основе того, что вы только что видели, UL означает неупорядоченный список. Ненумерованный список просто означает маркированный. Там нет числа. Там также то, что называется Упорядоченный список, который является ПР по метке. Затем Л. И., элемент списка все это значит. 

И так он автоматически номера все для вас. Но, опять же, все мои отступы и пробел просто ради моей. Браузер не на самом деле происходит, чтобы заботиться. Таким образом, даже если вы не смогли сделать это, просто чтобы быть ясно, Вы не должны даже хотя В браузере будет по-прежнему быть в состоянии понять это просто отлично. Я удара перезагрузки в моем браузера, я нажав перезагрузки и никаких изменений не происходит потому что браузер по-прежнему делает именно то, что я говорю это сделать. 

Все в порядке. Так что это всего лишь текст. Теперь давайте сделаем что-то более интересное. Я собираюсь идти вперед и заимствовать некоторые из этих HTML. Я собираюсь идти вперед и создать новый файл здесь. И мы называем это rick.html. У нас есть непропорционально б что-то называется ролл Рик в этом класс в этом году, я не знаю это просто случилось органично. 

А теперь он получил из-под контроля. Так что я просто хочу, чтобы пойти с ним. И если я иду в Google Изображения и Рик Эстли. Если вы не знаете, почему мы делаем это, только что прочитал в Википедии. Каждый раз, когда вы нажали на ссылку, кто-то где-то смеялся. И позвольте мне перейти ahead-- есть мы идем, давайте смотреть на эту фотографию. 

Так вот у нас есть изображение в Google Images. И давайте предположим, что это разумно везде в интернете. Так что я буду считать, что это нормально для меня на самом деле поставить это в моей веб-странице. Я собираюсь идти вперед и скопировать URL изображения. И теперь, если я вернусь в облаке 9, давайте посмотрим, что я могу сделать здесь. Так вот только веб-страницы. Это Рик Эстли, ха-ха, Я собираюсь вернуться в настоящее время в моем браузере, перезагружать, и интересно. 

Где Рик? Итак, позвольте мне видеть то, что случилось. На самом деле, я собираюсь притворяться, что я не сделал этого. [Неразборчиво] положить его здесь. Мы вернемся к тому, что в настоящее время. Так вот rick.html. Так что это не Рик Эстли. Так что получается, что мы можем на самом деле добавить его здесь. Это Рик Эстли. Я хочу сказать, дать мне изображение которого источником является URL я просто скопировал, что по-видимому, является счастливым день рождения что-то или другое. 

А теперь я собираюсь закрыть тег как это. Так что это упаковка супер долго. Но обратите внимание, что все, что я сделано открыт кронштейн изображение, источник с атрибутом этого. И это действительно долго URL. И в самом конце, заметить это. Почему я сделал слэш углом кронштейн а, как и любой другой тег, имеющий открытый кронштейн, IMG, закрыл кронштейн? Просто предположение, даже если вы нет знакомство бы то ни было с HTML прежде. 

Так что, как он закрывает команда, но почему это не реально сделать интуитивно смысл делать что-то немного больше слишком разговорчивым, как тесным образом? Да. Да. Просто семантически, нет никакого смысла начиная изображение и заканчивая изображение, это либо есть, либо его нет. Так что нет смысла оставлять зазор что-нибудь еще внутри изображения. Вы просто не можете это сделать. И поэтому синтаксис как правило, будет просто сделать косую черту внутри открытого тега или начального тэга , а затем ударил Сохранить. 

Так что, если сейчас я перезагрузить этот файл, в настоящее время Я получил хороший веб-страницы Готовить здесь. И, конечно, мы могли бы действительно раздражать людей путем внедрения вместо как ссылку YouTube. И в самом деле, в любое время Вы когда-нибудь, чтобы YouTube, и пусть меня на самом деле случайно Рик катаюсь здесь. Так Рик ролл. Так Рик roll-- я собираюсь ехать сюда. 

[Играет музыка] 

ОК, один человек понравилось. Так заметить все это время, если вы нажмите Поделиться ссылкой, вы, конечно получить URL, что вы можете фактически вставлять в сообщение электронной почты или судебно-изображения или в задаче установки или в слайде. И теперь, если я вместо нажмите на врезать, заметить, что все это время, этот материал был там. Я собираюсь идти вперед и скопировать этот. 

И только так мы можем видеть это лучше, я собирается вставить его в моей текстового редактора. Обратите внимание, что это то, что YouTube уже говорил вам. Каждый раз, когда вы посетите YouTube видео, если вы Чтобы встроить видео на ваш веб-страницы, просто захватить этот. Таким образом, это еще один HTML-теги называют IFRAME. Или в линии кадра. Так это тоже выглядит немного более сложнее, чем всех остальных. Так что получается, что изображение тег и, видимо, IFRAME тегов принять то, что называются атрибутами. 

И это еще один кусок синтаксиса HTML. В дополнение к тега имя, открывающая скобка имя тега, Вы можете контролировать поведение тега имея целый букет атрибута равна стоимости. Атрибут равен стоимости. И так, например, YouTube говорит нам если вы хотите ширину этого видео чтобы быть 420 пикселей, а высота чтобы быть 315 пикселей, что это как вы выражаете его в HTML. 

Источник видео будет чтобы быть, что долго URL YouTube а затем некоторые другие вещи как границы кадра равна нулю, так что, вероятно, означает, что есть нет границы вокруг вещи. Разрешить полный экран, вероятно, означает, что пользователь можно нажать кнопку и на самом деле полный экран видео. Так что, если я действительно хочу быть впечатляет здесь, в Рик точка HTML, а не использовать тег изображения, пусть мне удалить, что вместо вставьте. А теперь перезагрузить. И вот мы идем снова. Ладно, хватит. Все права, поэтому я постараюсь трудно не сделать это снова. Так что некоторые из еды на дом здесь? Так HTML, уродлив, как эти веб-страниц являются, на самом деле довольно просто. Это не язык программирования. Он не имеет функции. Он не имеет петель. Он не имеет условий. Все это имеет в десятки различные метки, каждая из которых имеет ноль или более атрибутов. И в самом деле, то, что интересно о HTML, как вы начнете погружаться в то, что это очень самостоятельной учиться. 

Все это занимает понимание в общих рамках HTML. Что такое тег, что это атрибут, как вы на самом деле настроить веб-страницу следующее. А все остальное действительно результат искать в интернет-ссылки или прибегая к помощи, как сделать некоторые техника или, как мы видели, глядя на источник в Facebook Код, глядя на веб-сайте что вам нравится в нем это исходный код и понимание того, как разработчики там на самом деле положил вещи. 

Таким образом, мы можем сделать изображения, а также. И в самом деле, мы сделали это мгновение назад. Позвольте мне идти вперед и просто показать вам. Вот некоторые примеры кода. Если вы когда-нибудь хотели, чтобы увидеть сварливый кот. Так заметить, что я могу есть тег изображения здесь. И я получил комментарий выше него. Я получил альтернативу Текст для доступности. Так кто-то, кто с помощью экрана Читатель по соображениям зрения может на самом деле, то есть их чтения с экрана говорят сварливый кот. Потому что, если они не могут увидеть изображение, они может по крайней мере, свой компьютер сказать им в устной форме, что это такое. И источник этой файла cat.jpeg. Таким образом, в самом деле, если бы я действительно хотел, чтобы получить умный, то, что я мог бы done-- Я обещаю не ходить Рик Эстли, так Я собираюсь Google для кошки, а не. И если я иду в Google Images здесь, и мы предполагаем, что что это фотография моей кошки. 

Предположим, что у меня есть контроль нажал или правой нажал на это, случайно жутко. И cat.jpeg я собираюсь чтобы сэкономить на моем рабочем столе. Позвольте мне теперь вернуться к Cloud 9. Обратите внимание, что здесь, я могу перейти к загрузить локальные файлы. И если я беру это Файл, cat.jpeg уведомление что я могу перетащить его и поместите его в облаке 9 и это будет орать на меня здесь. 

Потому что мы уже дал вам файл cat.jpeg, но это очень легко захватить фотографию, вы взяты из Facebook или Flickr или как а на самом деле и перетащите его в облаке 9, а затем сделать его часть вашего личного веб-сайт или проблема установить семь или восемь, как мы скоро увидим. А потом, когда тебя наконец, посетить эту кошку, предполагая, я скачал тот же кот, Уведомление that--, что было восхитительно. 

Что бы вы видите что-то вроде этого лица здесь. Таким образом, файлы, которые вы ссылка на веб-странице может быть либо локальный собственный счета или дистанционное включение некоторого другого сервера как и в случае с Rick Эстли фото немного назад. Так где else-- что еще мы можем сделать здесь? Итак, давайте взглянем на следующее. Вы знаете, что круто? 

Мы до сих пор были сделать очень статические веб-страницы. Я хочу, чтобы оживить следующим образом. Я хочу, чтобы мой собственный поисковик. Таким образом, чтобы сделать поисковик, давайте идти вперед и начать делать это. Я собираюсь идти вперед и создавать новый файл называется search.html. И мы prefabed версии онлайн. Упс. Не вставлять в окна терминала. Каркасные версии онлайн. И я собираюсь начать в следующем. Так вот начало файл называется search.html. Я собираюсь сохранить его в сегодня источник каталог. Я собираюсь назвать это поиск. На самом деле, мы сделаем это лучше. CS50 Поиск и фактически бренд это. А теперь, я собираюсь сказать, что-то вроде H1 CS50 Поиск. А потом сюда, Н2 в ближайшее время. И только Напомним, H1 и Н2 в виду то, соответственно? 

Да, так большой и жирный, и не столь большой, но все еще шрифтом. Так что, если я сохранить это и идти сюда, давайте посмотрим файл search.html. Ладно, и это одно это right-- [неразборчиво]. Поддерживать. Дэвид находится в замешательстве. О, это прямо там. Дэвид идиот. ХОРОШО. Так что это такое. Так поиск CS50 в ближайшее время. Так что теперь, давайте синтезировать то, что мы сделали на прошлой неделе. 

Где мы говорили о более низкие механика уровня на HTTP. И эти новые идеи из HTML, который находится всего это язык разметки, где вас рассказать браузер, что делать и осуществлять нашу собственную поисковую систему. Таким образом, вместо того, чтобы просто говоря скоро, я собирается представить то называется тэг формы. И в таком виде, я собираюсь есть что-то вроде поля ввода. 

И имя этого входа поле, я буду называть его В. И тип поля ввода этой Я хочу сказать, это просто "текст". И текстовое поле, как мы будем см, это просто текстовое поле. И так не чувствует здесь, чтобы ничего внутри него в этот момент. И так Я просто собираюсь закрыть тег с, что косая черта прямо в самом теге. А потом я собираюсь есть еще один вход. Тип входа равна представить. А потом я собираюсь закрыть этот тоже. 

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

И заметьте, сейчас, у меня есть этот вид серого текста что исчезает только я начинаю печатать, но это, вероятно, что-то вы видели в других веб-страниц. Я действительно не нравится кнопку Отправить. Так что я на самом деле происходит, чтобы дать Разместить кнопку значение в этой категории. И теперь, если я перезагрузить, заметить, что мой кнопка становится имени Поиск. Вы знаете, я на самом деле не как логотип здесь. Так генератор Google Font. 

Я хочу, чтобы оживить это дальше. Так CS50 Поиск. Позвольте мне создать свой собственный логотип. Это выглядит красиво. Так что теперь позвольте мне сохранить этот as-- давай. Где это происходит? Там. ХОРОШО. Пропустил его. Сохранить как. Глупые браузеры. Держитесь крепче, мы собираемся исправить это раз и навсегда. Там мы идем. Все в порядке. Сожалею. Выходной. Теперь это фанки. Выход из полноэкранного режима. Все в порядке. 

Теперь, как и обычный человек, сохранить изображение как. Logo.gif. Теперь я собираюсь идти в CS50IDE и Я собираюсь просто захватить логотип, Я собираюсь перетащить его в мой источник семь каталог файл уже существует, я в порядке с этим. Так что я собираюсь изменить это потому что я уже его. И теперь, как мне избавиться от этого? 

Давайте идти вперед и делать здесь Источник изображения равна logo.gif. Закрыть это. Сохранить. И теперь, если я вернусь в моем поиске страница, теперь это выглядит довольно хорошо. Ладно, так что не имеет достаточно сделать что-нибудь полезное. На самом деле, позвольте мне попробовать поиск для кошки и посмотреть, что происходит. Кошки. Блин. Это не просто работать, по-видимому. Так в чем же ключевая часть что здесь не хватает? 

Право, даже если вы не знаете, любой HTML, Я начал разметки телефона форму и я сказал ему, как получить входы, дать мне текстовое поле и кнопку отправки, какой кусок, по-видимому не хватает? Предположим, мы хотим на самом деле получить эта вещь работает правильно. Что нам нужно сделать? У нас есть необходимость осуществления задний конец базы данных или сама поисковая система, и что собирается взять Вся много времени, честно говоря. 

Так что помните, что мы сделали в прошлый раз. Так что если вы ищете что-то на Google и вы заранее выключен, Напомним, мгновенного поиска. Итак, позвольте мне обратиться, что с таким образом, что это на самом деле ведет себя как старший школьный браузере если я теперь искать что-то вроде кошек, Напомним, что URL-выглядит. Это довольно загадочным. Но встроенная в есть, Напомним, это поиск слэш. Вопросительный знак Вопрос равна кошек. 

И, казалось бы, дать мне целая куча результатов поиска. Таким образом, вы знаете, что я собираюсь сделать? Я собираюсь брать Google на минутку. Я собираюсь перейти на здесь, и я хочу сказать, что это формирует действия или назначения, так сказать, должны быть в буквальном смысле Google. И метод я хотел использованию будет получить. 

Так что это действие? Действие странно имени, но это просто означает, кто собирается обращаться действие этой формы? Когда я нажимаю поиск, где Если результат идти? И если сейчас я возвращаюсь к форме здесь и перезагрузить моей веб-странице и в настоящее время искать что-то как собаки, обратите внимание, в настоящее время Я вновь реализованы Google. Правильно? 

Если я хочу, чтобы искать что-то иначе, это работает не просто для собак, он также работает на кошек. Он также работает для CS50. И хорошо, что это просто под подавляющем, не так ли? Ладно, но это на самом деле работает. Так что на самом деле происходит? Так что я научил мой браузер, используя HTML, чтобы ввод от пользователя и на самом деле отправить этот вход на удаленный сервер с помощью протокола HTTP. 

И потому, что мой браузер понимает HTTP, это на самом деле построить URL так что то, Я в конечном итоге более в моем браузере, заметить, что происходит когда я искал для собак. Если я нажимаю поиск, заметить, что URL-адрес меняется, как я предназначено чтобы google.com/search~~V запрос равна собаку. И это потому, что в виде знает, потому что метод GET, просто добавить его к этому URL там. 

Теперь, эти веб-страницы по-прежнему уродливым. Так давайте познакомимся один кусок синтаксиса, если мы можем сегодня. И это то, что известно каскадные таблицы стилей. Итак, позвольте мне взглянуть на этот пример здесь и посмотреть, если мы можем сделать вывод, что происходит. Это CSS0.html. И это то, где вещи получить немного некрасиво. Потому что, к сожалению, в мире Интернета, HTML в одиночку не может сделать все. И поэтому, если вы хотите, чтобы стилизовать свою веб-страницу, Вы на самом деле нужно, чтобы сосредоточиться на эстетика по-другому. Так вот, у меня есть тело мое сети страница внутри которого находится большая дел. И DIV просто означает разделение. Так что это, как это, но пункте не имеет ту же семантику абзаца текста. 

Это просто означает, к браузера, вот идет большая прямоугольная область моей сети страница, я хочу, чтобы обрабатывать его специально. Теперь, линия 21, где начинается что дел. И только сделать предположение. Какой эффект линии 21 на Остальные содержимого страницы? Центрирующий его. Вот и все. Таким образом, мы не видели способ фактически центрирования текста. 

На самом деле, мой поисковой системы, в отличие от фактического Google, все было оправдано на левую. И вот теперь в строке 21, я говорю, эй браузеру, создать разделение страницы. Просто дайте мне большой, невидимый прямоугольник. Вот как я хочу, чтобы думать о веб-странице. А потом стилизовать его следующим образом. Внутри этих кавычек, Теперь, является вторым языком что мы ввели сегодня называемые каскадные таблицы стилей. К счастью, это тоже не язык программирования, так что это очень ограничены в синтаксисе, но Также очень ограничены в своей функциональности в то время как HTML это все о разметки данные веб-страницы и структура веб-страницы. CSS, как правило, примерно последней мили, эстетика, Получение размера и цвета и Размещение точно прямо в веб-страницы. И в самом деле, он формируется с пар ключ-значение. 

Свойство, как это, текст выравнивать, за которым следует двоеточие, с последующим значением, что свойство, которое в данном случае является центром. А теперь обратите внимание вам могут гнездиться эти вещи. Если я хотел, чтобы все, что Я выделил, сосредоточены, Вот почему у меня есть строка 21 и соответствующая линия 31. Но теперь предположим, хочу сказать, Иоанна Гарвард, добро пожаловать на мою домашнюю страницу. 

Символ Copyright Джон Гарвард. И предположим, я хочу в первую эти строки, чтобы быть довольно большой. 36 пикселей. Так вот приличного размера. И я хотел его вес должен быть смелым. Но тогда, что ниже, Я хочу мелкий текст. И ниже, что я хочу, еще меньше текст. Сожалею. Сегодня чувствует как выходной день. 

Так что теперь, что я делаю, чтобы выразить это? Здесь, на линии 22 является встроенный DIV DIV или вложенный, если вы будете. Это тоже имеет свой собственный тег стиля. Я указать размер шрифта 36. Я указать вес шрифта смелый. Здесь, внизу, я только указать 24 пикселей. И, наконец, в строке 28, я указываю 12. Так как для быстрой проверки вменяемости и как человек читает это, какие слова на экране, на самом деле происходит, чтобы быть смелым? Какие строки на самом деле смелый? 

Просто Джон Гарвард. Правильно? Потому как линия 22, говорит, эй браузеру, вот раздел страницы. Сделать размер шрифта 36 очко. Сделать вес шрифта смелый. Как только вы достигнете Соответствующий закрывающий тег или закрытое тега в строке 24, Это означает, что эй-браузер, перестать делать то, что вы делаете. И заметьте, что ясно, хотя линия 22 имеет все эти атрибуты как стиль, когда вам закрыть тег в строке 24, Вы только упомянуть имя тега. 

Вы не повторить стиль слово или все, что находится внутри этих кавычек. И поэтому, если я смотрю на это сейчас в моем браузере, давайте Взгляд на конечный результат. Отпусти меня вперед к этому файлу, который CSS 0. И это все еще довольно простой, но становится довольно интересно. Но, оказывается, есть другие вещи, которые я могу сделать здесь, и на риск принятия это полностью отвратительно, заметить здесь, что в моем Тело моей веб-странице, Я могу сделать что-то смешное как БГ или цвет фона. 

И быстро, что ваш любимый цвет? Зеленый я слышал. Все в порядке. Так что теперь, если я ударил перезагрузка сейчас, у нас есть зеленый веб-страницы. Ладно, так что это не плохо. И теперь, если я хочу, чтобы это действительно круто, я могу сделать цвет моего текста даже красный. Итак, давайте посмотрим, как это выглядит. Теперь это выглядит довольно хорошо. И здесь, если вы действительно хотите возиться с кем-то или если вы хотите быть один из тех людей, которые пытается обмануть вас в посещение веб страница, потому что они обманули Google в мышлении есть целая куча ключевых слов like-- давайте посмотрим, перезагрузить. Куда он делся? А там нас. Все в порядке. Поэтому я говорю это, как в сторону, мы будем говорить об этом материале в течение нескольких недель когда мы говорим о безопасности, если вы на самом деле вставлять целые гроздья ключевые слова в веб-страницы, даже если они не видны к человек, кто-то, как Google, конечно, может еще на самом деле найти это. Ладно, так что это довольно отвратительный довольно быстро. 

И в самом деле, это далеко не все что многое в отличие от моего собственного веб страница как студент, который Я начал прибегая к помощи вокруг, чтобы найти предыдущие версии моих старых сайтов. Это было довольно плохо. На самом деле, я нашел одним только перед классом. Но еще хуже, там. Это, видимо, был мой Главная страница назад в 1996 году. Видимо, я думал, что это было уместно спросить людей свое имя прежде чем они могли на самом деле вижу свою веб-страницу. 

И тогда я показал им то глупо, наверное. Я выкопать более в следующий раз. Но сейчас, давайте Рассмотрим немного дизайн. Мы говорили о стиле. И эту страницу сих пор, и большинство все, что я написал довольно чистый стилистически. Но то, что о дизайне? Ну, есть много избыточности в том, что я делаю здесь. 

Я упомянул слово цвет в нескольких местах. Я упомянул размер шрифта в пару места и смелое в нескольких местах. И принципиально, я сотрудничества смешивание двух языков. У меня с моими HTML-теги и мой атрибуты, а затем вдруг, кавычки, я второй язык сегодня называется CSS, который опять-таки, только эти пар ключ-значение или эти свойства разделенных двоеточиями. 

Оказывается, что многое как в C, где мы может начать вынести некоторый код в файлы заголовков, так мы можем сделать то же самое в HTML. И шаг к что происходит следующим образом. Обратите внимание, что эта версия, является CSS1.html Конструктивно тот же веб-страницу. Так что я получил целую кучу из дивы, но на этот раз, у меня избавился от обертки DIV, как вы увидите. 

И я дал эти три дивы верхней, средней, и снизу, уникальные идентификаторы. Это хорошо, потому что давая те подразделения из страниц уникальных идентификаторов, Я могу ссылаться на них в другом месте. Где? Ну, позвольте мне прокрутку вверх. И до сих пор, в любое время мы смотрели на голове веб-страницы, что только тег мы имели в руководитель веб-странице? Чуть громче. Просто название до сих пор. Но, оказывается, есть несколько других вещей, Вы можете положить туда, один из который он называется тегом стиль. Так некоторое время назад, мы смотрели в виде атрибута стиля. Оказывается, есть тег стиль. Он принадлежит внутри руководитель веб-странице. А теперь обратите внимание, что я делаю. У меня внутри этого стиль тега следующее. Я буквально отметить на линии 20 имя тега, что я хочу, чтобы стилизовать. 

Тогда у меня есть открытый фигурную скобку и закрыл фигурную скобку. Так близки по духу C, но опять же, это не функция, это просто синтаксический здесь подробно. И тогда я, конечно, говорю браузер, эй-браузер, сделать все тело страницы есть выравнивание текста по центру. И тогда это говорит следующее. Эй-браузер, если вы видите HTML элемент или тэг на странице, что имеет уникальный идентификатор верхней, поэтому символ хэш здесь просто означает, Уникальная идея вершину, идти вперед и сделать его размер шрифта 36 а его вес шрифта смелый. 

Эй-браузер, элемент которого ID средняя, ​​сделать это 24 пикселей. И эй-браузер, если вы видите Идея дно, сделать это 12 пикселей. Эффект в конце это точно Сэм. Если я иду в CSS 1, страница выглядит так же. Но мы шаг к немного лучше дизайн. Позвольте мне теперь вернуться сюда, чтобы CSS2 и посмотреть, что еще я сделал. 

Теперь страница действительно, действительно чистый. На самом деле, я могу соответствовать всем содержимое на странице здесь. Но то, что новый тег я введена, очевидно? Ссылка. И это не лучшее название для тега, потому что это не ссылка в смысле что мы знаем это, но это означает, ссылку в какой-то другой файл. Это вроде как резкое включают в С. 

Это путь в HTML сказать эй браузер, иди содержимое файл называется css2.css. Отношения, мне, то, что это таблица стилей. И в самом деле, это то, что одним из S годов в каскадные таблицы стилей средствами. Это таблица стилей. Это просто текстовый файл, содержащий целая куча имущества. Это целый букет стилей что вы хотите, чтобы применить к странице. 

И так это, видимо, ссылаясь на втором файле. И если я открываю, что CSS2.css, заметить, что все, что я сделал это скопировать и вставить все это в этот файл. И теперь, даже если вы никогда не кодируется этот материал раньше, просто рассмотреть с пресловутый инженерно шляпа на, почему это лучше дизайн вероятно? Факторинг из этих свойств CSS, положить их в свой файл. Даже если мы решили это Проблема, как пять минут назад в самой первой версии. 

Мы не улучшилось страница стилистически, это просто лучше дизайн в каком-то смысле. Почему вы думаете? Да. Более гибкая, как? Да. Так что, если вы хотите пойти назад и изменить вещи, Теперь, у вас есть одно место, где вы можете изменить положение вещей. И в самом деле, что-то как проблема установить семь, где мы будем реализовать торговля акциями сайт, что происходит, чтобы иметь целая куча страниц. И это было бы действительно раздражает, если вы решите, хм, Я не очень люблю 24 пикселей, я хочу это будет 28 пикселей или немного больше. И тогда придется сделать Глобальный поиск и замена или открыть все файлы вашего сайта просто на самом деле изменить одно значение. По факторинга эти стили в одном месте, Теперь вы можете открыть один текстовый файл в CS50IDE в любой программе, изменить его, сохранить его, и сделано. Вы распространяются те изменения везде. И, что бы быть такой же, в дот ч файла, а также. Так какие-либо вопросы, таким образом, далеко от этого синтаксиса? Все права, поэтому мы сделали все, кажется, кроме фактической реализации гиперссылки. И так давайте идти вперед и делать это. Позвольте мне идти вперед и создать новый файл здесь. Я буду называть его link.html, положить в сегодняшнем коде. 

И я собираюсь сделать открытым Кронштейн тип документа HTML. Как в сторону, это вещь в сверху, этот документ типа декларации, это единственное, что странно с восклицательным знаком. Вы просто должны это делать там, и это означает, что мы используем HTML версии 5. Старые версии язык имел намного дольше струны, что вам нужно, чтобы поставить там. Так вот пример называется ссылку. 

Мне нужно тело моей веб-странице здесь. И здесь, а равно HREF скажем HTTP://www.disney.com и мой любимый сайт, мы будем говорить. Ладно, так что очень безобидно, удобный страница. Если я сейчас углубляться в моем каталоге листинг тут и открыть link.html, у нас есть гипер текста. 

И в самом деле, это где Н в HTTP приходит. Протокол передачи гипертекста о передаче текста что имеет гиперссылки на другие ресурсы. И в самом деле, здесь знакомо, если ретро, ​​синий ссылку, что если нажата, фактически приведет меня к Disney.com. Теперь, о, что выходит в ближайшее время. Ладно, так что теперь, что некоторые о последствиях этого? 

И, честно говоря, мир начинает чтобы получить немного больше знакомы а также немного страшнее но также немного более самостоятельно оправданным как только вы начинаете чтобы понять эти вещи. Потому что шансы, что некоторые из вас, если вы идете через папку со спамом Gmail или даже Ваш почтовый ящик, вы, вероятно, получил какой-то электронной почте что просит вас, чтобы изменить свою пароль может быть или может быть проверить Ваши учетные данные PayPal или этажерка. 

И в самом деле, вы, возможно, получили то, что говорит, как нажмите здесь сбросить пароль PayPal. А теперь обратите внимание, если это не Disney.com но, как и badplace.com перезагрузить, обратите внимание, что текст здесь может сказать что-нибудь вообще. И в самом деле, это всего лишь слова. Почему не я на самом деле супер вредоносный и сказать http://www.paypal.com. 

Нажмите здесь, сбросить PayPal пароль и теперь перезагрузить. Это выглядит довольно законным, верно? Я имею в виду, я не щелкнул бы на по электронной почте, что только говорит, что это. Но обратите внимание дихотомию. Это говорит www.paypal.com, и в самом деле, погоди, мы знаем, что вы хотите Индекс S для обеспечения безопасности. Так что теперь, пойти в www.paypal.com HTTPS, но если вы никогда не делали этого раньше, действительно получают в привычку зависший над маленькими ссылкам здесь. И это трудно понять, На экране есть, и это еще не все, что легче здесь. Но путь здесь, в крошечный маленький уголок делает браузер на самом деле сказать вам, что мы собираемся чтобы badplace.com вместо Paypal.com. Теперь, когда мы собираемся с этим? Все примеры, которые мы сделали сегодня, мы жестко и ввели вручную. Веб невероятно неинтересно, когда вам трудно код веб-страниц, так что содержание статична и никогда не меняется. Конечно, все наши любимые веб-сайты сегодня, будь то Gmail или Twitter или Facebook или любое количество других динамичны. Они меняются в ответ на действия пользователя так же, как в результатах поиска Google. 

И так в среду, что мы делаем, мы оставляем HTML и CSS введение позади нас, и мы берем собой разумеющимся, что мы теперь знаю его и введем новый язык программирования называется PHP, который нравится С, собирается дать нам власть фактически создать программы что сами по себе генерировать вывод. В этом случае, мы будем использовать PHP для создания динамически Интернет страницы, используя этот новый язык. Так об этом в среду. Тогда увидимся. 

[Играет музыка]