[Музыка, якая іграе] DAVID J Малання: Добра, дабро запрашаем назад. Гэта CS50. Гэта канец тыдня сем. І гэта канец гэтага паглынальніка Паляванне з праблемай ўстаноўкі чатырох што вы, магчыма, памятаеце. Акрыяўшы ўсе гэтыя файлы JPEG персаналу, Вы былі аспрэчаныя, калі вы хочаце, сфатаграфаваць сябе з як многія з тых людзей, як вы можаце. Мы атрымалі цэлую кучу матэрыялаў За апошнія некалькі тыдняў, Сапраўды, нямала права да паўдня Сёння, некаторыя з якіх з'яўляюцца тыя тут, злавіў тут in-- выглядае like-- Анненберг Зала на працоўны час, адзін тут ў Лоуэлл Хаўс з Нікам. Вось Рамон быць злоўленым на тэлефоне. Пра гэта на CS50 абед. Гэта быў Джэйсан Skyping з больш творчым аднакласнік, хто патэлефанаваў яму гэты шлях. Мы не ведаем, што гэта было. 

[Смех] 

DAVID J Малання: Але што стаіць за гігабайт. Вось Чанг, які літаральна ўцёк са сцэны каб пазбегнуць яго фатаграфуюць сябар дзень, але ў рэшце рэшт злавілі. Вось Нік. Вось Нік. Вось Нік. А вось Элісан ўніз палямі. І Zamyla нават быў знойдзены на конкурсе бальных. Так што мы будзем праходзіць праз гэтыя фатаграфіі, высветліць які прадставіў найбольш самае ранняе, і ўзнагарода адзін казачны прыз, як паабяцаў у спецыфікацыі. І мы будзем таксама сачыць за аб прастору, што быў уцягнуты. 

Пару announcements-- так абед гэта, зноў жа, у гэтую пятніцу ў 1:15 вечара. Калі вы хочаце далучыцца да нас, RSVP у той URL тут. Джэйсан з'яўляецца зноў тут ад аднаго з раздзелаў пару гадоў назад, які адбыўся падаць на Дзень усіх Святых. І на самай справе, ён апрануты, як гарбуз, што канкрэтны год. Калі вы паглядзіце гэты раздзел яго з 2011 раздзела восем, калі вам цікава, у CS50.tv, я думаю, гэта быў год, у якім яго паветраны помпа працаваў. 

Калі вы потым глядзець падобны падзел у 2012 годзе, Вы ўбачыце гэтую Джэйсана значна спушчаным, не так касцюм больш не функцыянавала, які з'яўляецца толькі сказаць у гэтую пятніцу, калі б ты хацеў выразаць гарбуз з Daven і Гейб і іншыя, RSVP кіраўнікам у cs50.harvard.edu адрасе. Гэта абяцае быць вельмі весела. Daven, мы сказалі, выразаў гарбуз усё сваё жыццё. Габрыэль з Бразіліі ні разу разьбяныя гарбузы на Хэлоўін. Дык там з імі, як ён даведаецца. 

Семінары, meanwhile-- так што вы даведаецеся ў бліжэйшы час пра тое, што нашы чаканні па Канчатковы праект, які па сутнасці будзе зводзіцца да распрацоўцы і рэалізацыі Найбольш любы праект уяўляе цікавасць для Вы, хоць і пры ўмове адабрэння і кіраўніцтва ад вашага навучальнага хлопец. Бліжэй да канца семестр, мы ўводзім шэраг семінараў, якія факультатыўныя заняткі на чале з навучальнымі субратаў і Гарвардзе Супрацоўнікі, сябры ходзе ўсёй Кампус, на розныя тэмы, якія з'яўляюцца датычнай да Асноўнай вучэбнай праграмы курса па але тым не менш гэта дастасавальна, весела, і адрозніваецца для патэнцыйных канчатковых праектаў. 

Напрыклад, па-першае, калі вы хочаце зарэгістраваць, галавой да гэтага URL там. І гэта лінейка для адны семінары ў гэтым годзе. Але разумею, у нас ёсць дзесяткі семінары ад мінулых гадоў, усе з якіх звязаны ў меню Seminars варыянт сайта Курсу. Так што калі вы думаеце пра выхад за межы сваёй зоны камфорту або падымаючы некаторыя новыя навыкі, напрыклад, праграмаванне iPhone прыкладання з Свіфт, новая мова ад Apple, або Objective-C або Праграмы або праграмавання [? кі?] лямпачкі, або любую з тым тут і больш, з-за праверкі з на старонку рэгістрацыі. 

Такім чынам, мы пачалі і заключаны Панядзелак з гледзячы на ​​HTTP. Так хутка refresher-- HTTP, Перадачы гіпертэксту Пратакол. Але што гэта на самай справе азначае? Што гэта азначае? Хіба што рука? Я ведаю, што ты проста чухаць патыліцу. Але вы хочаце прапанаваць што HTTP з'яўляецца? 

Аўдыторыя: Як кампутары мець зносіны з [неразборліва]. DAVID J Малання: я прапусціў апошнюю частку. Як кампутары ўзаемадзейнічаюць with-- 

АЎДЫТОРЫЯ: Інтэрнэт-серверы. DAVID J Малання: Good-- з інтэрнэтам серверы і спецыяльна, вэб-серверы. Таму адклiканнi, ёсць куча паслугі ў Інтэрнэце, некаторыя з якіх Вы карыстаецеся верагодна штодня з чаце і паведамленне, чат і вэб, і адрас электроннай пошты, і да таго падобнае. І HTTP проста пратакол, вэб-браўзэры казаць пры зносінах з вэб-серверы, і наадварот. І аналагавы ў чалавечы свет можа быць, Я працягваю руку, каб паціснуць некаторыя іншы чалавек, і ён або яна прызнае, пашыраючы яго ці яе рукі, а таксама. Так што гэта проста пратакол, набор пагадненняў. 

І тое, што на самой справе з'яўляюцца гэтыя канвенцыі? Ну, гэта проста зводзіцца да адпраўка паведамленні туды і назад, як мы намаляваныя тут. І ёсць некалькі спосабаў, у якія вы можаце адпраўляць гэтыя паведамленні. І, мабыць, самы агульная вядомы як атрымаць. І мы ўбачым, кантраст для гэтага ў бліжэйшы час. 

Але просьба атрымаць ад браўзэра на сэрвэры проста выглядае так. Гэта куча тэксту, які ён ставіць ўнутры віртуальнай абгінаючай. На вонкавым боку гэтага канверта ідзем пару штук дэталяў. Што трэба, каб пайсці на Канверт, так бы мовіць, для таго, каб атрымаць запыт як гэта ад мяне, каб вэб-сервер? Так. 

АЎДЫТОРЫЯ: Ваш IP адрас. 

DAVID J Малання: Мой IP-адрас У полі, так бы мовіць, і, вядома, IP-адрас атрымальніка. Але ў выпадку вэб-пакета, Нам трэба трохі больш дэталяў Гэта не дастаткова проста адправіць канверт з серверам, таму што сервер можа быць праслухоўвання для розных тыпаў інтэрнэт-трафіку. Так што яшчэ трэба акрамя IP атрымальніка? Так? 

АЎДЫТОРЫЯ: Хіба TCP? DAVID J Малання: Добра. TCP-- 

АЎДЫТОРЫЯ: Адрас. 

DAVID J Малання: Адрас, або порт, як гэта называецца. Блізка, але шэраг TCP порт. І ёсць куча з іх. Але, вядома, найбольш знаёмыя павінны ў канчатковым выніку быць 80, які выкарыстоўваецца па змаўчанні адзін выкарыстоўваецца для вэб-трафіку. І яшчэ знаёмыя адзін хутка будзе 443, які выкарыстоўваецца для бяспечнай вэб- трафіку, URL-адрасы, якія пачынаюцца з HTTPS. 

Так што гэта тое, што адбываецца ўнутры гэтага канверта. І атрымаць / проста азначае, даць мне вэб-старонка па змаўчанні. Дайце мне корань цяжка ездзіць на гэтым вэб-серверы. І будзем спадзявацца, вэб- Сервер адкажа, ОК і лік 200, якая з'яўляецца проста Пагадненне, што, так, усё сапраўды ў парадку. Вось старонка. Тып вэб-старонцы будзе Тэкст быць, але больш канкрэтна, HTML, якія мы збіраемся ныраць назад у. І кропка кропка кропка проста сродкі, тут з'яўляецца HTML. І вось, калі мы падабраць гісторыю сёння, на самай справе пісаць HTML, Мова разметкі гіпертэксту, які гэта мова, на якім Вэб-старонкі напісаныя. Гэта не мова праграмавання. Там няма функцыі або сцежкі або ўмовы. Гэта мова разметкі, а зноў бачым сёння, што дазваляе вызначыць як структураваць і стылізаваць эстэтычна вэб-старонкі. 

Так што гэта быў адзін і толькі старонкі мы сапраўды паглядзеў на, калі коратка, у панядзелак. І звярніце ўвагу, некаторыя ярка выяўленыя характарыстыкі. Там вельмі шмат адкрытых вуглом Кранштэйн і блізка кутні кранштэйн. Між тым, кутняй дужкі слова. І мы збіраемся пачаць называючы гэтыя словы тэгі. Так адкрыты кранштэйны галава і закрытым кранштэйны галава з'яўляюцца адкрытыя і закрытыя тэгі, або пачатковыя і канчатковыя тэгі адпаведна, з HTML элемента, як мы яго называем, называецца галавой. І тое ж самае жаргон ставіцца для цела ў HTML і пр. 

І што прыемна, HTML-- і на самай справе, мы будзем правесці жудасна мала часу на гэта, таму што вы будзеце ў асноўным толькі высветліць якія функцыі яна мае, калі вам на самай справе маюць канкрэтную праблему у solve-- вы выявіце, што Браўзэр даволі бязглузда. Гэта проста будзе do-- не ў адрозненне ад computer-- тое, што вы скажаце ёй зрабіць. І таму, калі ў вас ёсць адкрыты Кранштэйны HTML на самым версе там, што істотна проста азначае, эй, браўзэр, вось ідзе вэб-старонка напісана на HTML. 

Калі ён бачыць адкрыты кранштэйн галава, гэта проста азначае ,, эй, браўзэр, вось ідзе галавой, або самы верхні частка маёй вэб-старонцы. Калі ён бачыць закрытую дужку галава, гэта проста азначае, эй, вось менавіта для галавы. Чаканне чагосьці яшчэ. І што-то яшчэ па-відаць, будзе цела. І калі ў вас няма тэга, як ў вас ёсць толькі прывітанне, коска, свет, вось толькі будзе сырой тэкст, у канчатковым рахунку, будзе адлюстроўвацца на экране. 

Зараз, вы заўважыце, занадта водступ тут. Вы, напэўна, можна зрабіць выснову, як мы стылізацыі яго. Кожны раз, калі я адкрываю тэг, так сказаць, я водступ. І кожны раз, калі я заплюшчваю Тэг, я не па-водступ, блізкія па духу фігурныя дужкі. А за што, я збольшага выкарыстання маё меркаваньне. Звярніце ўвагу, што я не папрацаваў ўдару Калі ласка, увядзіце ўнутры гэтага тэга загалоўка. Чаму? Ну, я проста вырашыў, што гэта выглядала трохі чысцей мяне, чалавек, проста не папрацавалі рабіць гэта. Такім чынам, яшчэ раз, ёсць некаторыя Рашэнне называе проста як ёсць на З або любую мову. 

Але звярніце ўвагу, таксама, што гэта паглыбленне паддаецца разумовай мадэлі, не больш чым ўскладняюць яго. Але дрэва, ці не так? Калі вы думаеце пра Сеткі старонка, па-відаць, напісаныя як гэта, як прыгожа водступам, што шлях, Вы можаце падумаць, з адкрывальная дужкі HTML закрытая дужка тэга дэмаркацыі корань вузла, генеалагічнае дрэва вузел стыль у стылі дрэў мы глядзелі на мінулай пятніцы. 

І на самай справе, у нас ёсць на прама тут што мы называем DOM, D-О-М, дакумент аб'ектная мадэль, мудрагелісты спосаб сказаць дрэва, якое ўяўляе, што HTML. І звярніце ўвагу, што HTML мае, мы будзем казаць, як радаводу, двое дзяцей. Злева знаходзіцца галава. Справа знаходзіцца цела. 

І гэтак жа, як бессэнсоўны думкі практыкаванні, галава, вядома, ёсць, як шмат дзяцей у адпаведнасці з гэтай структурай? Так толькі адзін, title-- і вось чаму мы маем стрэлка ідзе ад галавы да назвы. Так што гэта, як быццам гэтага чалавека ў радавод была толькі адна нашчадства. А потым сам загаловак можа можна сказаць, ёсць дзіця таксама. 

Нагадаем, што HTML быў Прывітанне, коска, свет пад ім. І я проста намаляваў у авальнай замест прамавугольніка проста перадаць семантычна, што нават пры тым, гэта вузел у дрэве, так бы мовіць, гэта свайго роду прынцыпова адрозніваецца. Гэта не тэг. Ці больш правільна, гэта не элемент. Гэта проста тэкставы вузел, калі хочаце. Але гэта зусім адвольныя чалавека канвенцыі. Гэта толькі цяпер мой спосаб уяўляючы, што я буду як сукупнасць назваць дакумент. 

І як у бок, рэчы на супер левым верхнім куце, адкрытая дужка клічнік док тып HTML, гэта выглядае як тэг, але гэта глупства памежныя выпадкі, калі што як раз там, капіяваць і ўстаўляць пазначыць браўзэраў гэта HTML версіі 5. Свет пастаянна змяняецца, што ў Першы радок кода ў старонкі павінны быць. Гэта проста азначае, версія 5. Так што не зусім глядзець, як іншыя. 

Добра, так з гэтым сказаў, зараз вы будзеце шанаваць гэта даволі гэта глупства тату хто-то атрымаў. 

[Смех] 

DAVID J Малання: Добра, А цяпер давайце на самай справе апусканне у што-то рабіць з гэтым. Як вы памятаеце, што ў апошні раз Я адкрыў CS50 Appliance і я зрабіў што-то, як проста, як адкрыццё Gedit. І я захаваў файл нават на мой desktop-- нідзе special-- як hello.html. 

Такім чынам, дазвольце мне зрабіць гэта again-- hello.html Enter. І цяпер у гэтым файле, я збіраюся ісці наперад і паўтарыць тое, што мы проста saw-- док тыпу HTML Тады я збіраюся зрабіць адкрытым кранштэйны HTML закрытую дужку. А потым я збіраюся прэвентыўна адкрываць і зачыняць тэг. Чаму? Проста так я не забываю пазней. Гэта проста добрая практыка, як адкрыццё і закрыццё фігурныя дужкі ўсё адразу. 

І тады тое, што было далей? Вы можаце думаць аб татуіроўцы. 

АЎДЫТОРЫЯ: Кіраўнік. 

DAVID J Малання: Кіраўнік. А потым тут, я меў тытул, я думаю. І назва была адвольна, Прывітанне, свет блізкі назву. А потым сюды, цела, з course-- то мы закрываем тэг цела. А потым проста некалькі залішне, У мяне было тое ж самае тут. 

Так я сцвярджаю, што гэта вэб-старонка. Гэта тое, што Цяпер можна было жыць у Інтэрнэце, хоць, вядома, гэта ў літаральным сэнсе жыве на маім працоўным стале прама цяпер. Але на самой справе, калі б я мінімізаваць Gedit, Я буду бачыць на маім працоўным стале яго значок. Нават пры тым, што гэта прылада, Вы можаце зрабіць гэта на Mac OS без TextEdit або Вокны з Notepad нават. 

І калі я іду наперад і двойчы пстрыкніце што нават і Выберыце, добра, давайце Не выбірайце, што з-за Chrome не адкрываючы. Давайце ісці наперад і адкрываць Chrome. А потым зрабіць Command-O для адкрытай І арыентавацца на мой працоўны стол і адкрыць гэты файл. Гэта значыць, як браўзэр інтэрпрэтуе HTML, зверху ўніз, злева направа. Эй, браўзэру вось HTML. Вось галава. Вось назва. Вось арганізм. І на самай справе, гэта, як ён аказвае гэтую вэб-старонку. 

Але зьвярніце ўвагу на URL. Ніхто з вас не можа цягнуць гэтую спецыфіку старонка на наўтбуках зараз, нават унутры вашага Прыбор з дапамогай гэтай URL, таму файла: // паказвае, што гэта на самай справе на маёй файлавай сістэме, мой жорсткі дыск, не твая. Так што гэта не ўсё, што карысна. 

Давайце зараз пяройдзем да выкарыстоўваючы фактычны вэб-сервер. І атрымліваецца, у CS50 Appliance гэта больш, чым проста асяроддзі, дзе Вы можаце напісаць код на Сі і кампіляцыі і запусціць яго, як вы рабілі. Ён таксама быў настроены на Супрацоўнікі прадстаўляць тыповы вэб Сервер гэта ў Інтэрнэце, той, які вы маглі б заплаціць за ці той, які знаходзіцца ў так званым воблаку. 

І ён працуе Стандартная бясплатна з адкрытым зыходным кодам Праграмнае забеспячэнне, напрыклад, тое, называецца Apache, які з'яўляецца, бадай, ранейшаму з'яўляецца самым папулярным вэб- Сервернае праграмнае забеспячэнне ў свеце што тысячы сайтаў выкарыстоўваць сёння. І гэта таксама яшчэ ёсць праграмнае забеспячэнне, як MySQL, які з'яўляецца серверам баз дадзеных што мы ў рэшце рэшт дабрацца да, які з'яўляецца толькі сказаць Я магу пачаць лячэнне мой прыбор як паўнавартасны сервер што я не плачу за іншым месцы. Гэта проста жыве на сваім уласным ноўтбуку для распрацоўка і зручнасць мэтах. 

Так што давайце ісці наперад і скарыстацца гэтым. Я збіраюся ісці наперад і адкрыць акно тэрмінала. І я збіраюся ісці наперад і move-- фактычна, першым я збіраецца арыентавацца на маім працоўным стале. Калі я раблю Ls, ёсць hello.html. І я збіраюся пайсці наперад і пачаць выкарыстоўваць новы каталог мы ў не выкарыстоўваецца да сённяшняга дня. 

hello.html-- я збіраюся рухацца у ../vhosts для віртуальнага hosts-- больш падрабязна пра гэта ў future-- а затым у каталогу пад назвай лакальны, які з'яўляецца мянушкай, дадзеным амаль любы кампутар, будзь то Mac, PC, або Linux кампутар, а затым адмыслова ў каталог, які мы, Супрацоўнікі ўжо стварылі для вас, калі Вы спампавалі прыбор пад назвай грамадскага. І як мяркуе яго назва, нічога Я паклаў у гэтую тэчку, у тэорыі, збіраецца цяпер быць грамадскага, па меншай меры, для людзей у каго ёсць прамая Падключэнне да кампутара. 

Так што цяпер дазвольце мне ісці наперад і зрабіць кампакт-дыск з той жа дырэкторыі так што я магу бачыць тое, што адбываецца і Ls тыпу. І на самай справе, што гэта Адзінае, што там. Я сцвярджаю, зараз, таму што я паставіў гэта падаць hello.html ў дырэкторыі званае грамадскае ўнутры дырэкторыі называецца лакальны ўнутры дырэкторыі званыя віртуальных даменаў, якія Дзякуючы супрацоўнікам CS50 быў папярэдне настроены, каб быць корань вашага вэб-сервера, Цяпер я магу спадзявацца, гэта зрабіць. 

Я збіраюся адкрыць новую ўкладку. І я збіраюся пайсці не падаваць: //. Я збіраюся выкарыстоўваць фактычныя HTTP / лакальны, якія зноў, гэта мянушка для майго ўласнага сервера. А потым я збіраюся пайсці ў тое, што імя файла, проста каб было ясна? Дзе гэтая гісторыя, верагодна, будзе? hello.html. 

Такім чынам, іншымі словамі, я хачу, каб зараз гэта гэта мой уласны кампутар, мой уласны прыбор, як быццам гэта рэальная сервер. Яго мянушка лакальны. Але думаць пра лакальным хасце як як Facebook.com google.com, што заўгодна. Гэта проста мая мясцовая назва. А потым у фінал, я хачу гэта ў корань жорсткага дыска, так бы мовіць, або корань вэб-сервера, Ergo слэш, а затым Імя файла hello.html. 

Дазвольце мне паменшыць маштаб і націсніце Увод. І на самай справе, у цяперашні час мая вэб-старонка. Так што гэта крыху адрозніваецца. І гэта так жа, як у захапленне. Гэта старая версія. Дазвольце мне паменшыць шрыфт назад. Гэта старая. Гэта новы. Але што прынцыпова адбываецца Цяпер тое, што HTTP выкарыстоўваецца. 

Давайце зробім гэта крыху больш ясна ці, калі хочаце, крыху больш складана. Дазвольце мне пайсці ў правым ніжнім куце куце майго прыбора. І заўважце, што ўсё гэта Час, там быў нумар. Гэта унікальны адрас Вашай CS50 Appliance. Гэта прыватны адрас, як вынікае з 172,16, які проста азначае толькі вы фізічна могуць атрымаць доступ да гэтай вэб-сервер. Усе файрволам і добра абаронены ад астатняй свету з-за гэтага рашэння. 

А цяпер звярніце ўвагу, хоць, калі я іду ў гэты адрас, не ў маім прыборы, але ў Mac OS-- я збіраюся вярнуцца сюды. Гэта мой Mac цяпер. А цяпер я збіраюся адкрыць гэтая версія Chrome тут. І я збіраюся пайсці ў HTTP: //172.16.25 / І я забываю rest-- 133. 

Так што я збіраюся наведаць з майго Mac што IP-адрас /hello.html Enter. І зараз я бачу, з майго Mac што мой CS50 Appliance, хто IP-адрас, што лік, сапраўды вядзе сябе як вэб-сервер у Інтэрнэце. Гэта не ёсць добры лёгка памятаю імя, як Facebook.com, але ён выкарыстоўвае HTTP па-відаць, нават пры тым, што Chrome з'яўляецца свайго роду спрашчэнне свет для нас, але не паказвае нам, HTTP. Але гэта сапраўды менавіта гэта. Chrome толькі эканоміць некаторыя уведзеныя з клавіятуры сімвалы ў гэтыя дні. І вось што мы зараз бачым. 

Так што ўсё выдатна і выдатна. Але гэта даволі захапленне старонкі. Дазвольце мне пайсці і зрабіць што-то Зараз трохі адрозніваецца. Такім чынам, дазвольце мне вярнуцца да Gedit. І замест таго, прывітанне, свет, давайце паставім малюнак. І я сцвярджаў з before-- адпусціць мяне у маім каталогу лакальны грамадскасці. І дазвольце мне ісці наперад і скапіяваць цэлая куча файлаў з сённяшняга дня ад маёй тэчцы Dropbox ў тут. 

Цяпер, калі я друкую Ls, глядзець на ўсіх гэтых файлаў што я распаўсюджвацца Сайт Вядома напярэдадні сённяшняга дня, адзін з якіх па-ранейшаму hello.html. Так што ёсць, што адзін. І ўспомніць гэтую дурную адзін з мінулага time-- cat.jpg. Такім чынам, дазвольце мне паспрабаваць ўбудаваць cat.jpg ўнутры маёй вэб-старонцы. 

Я збіраюся ісці наперад і зрабіць cat.jpg, захаваць. Дазвольце мне вярнуцца да Chrome. І дазвольце мне павялічыць Шрыфт і цяпер перазагрузіць. На жаль, калі я паклаў гэта? Standby-- мяне ўсё яшчэ ёсць стары Версія ад майго працоўнага стала адкрытым. Такім чынам, дазвольце мне перайсці ў маю віртуальны хост, мой лакальны, мая грамадская і hello.html. Так што цяпер дазвольце мне ісці наперад і кажуць cat.jpg ўнутры цела дзе я хачу, каб гэта было адлюстроўваецца і перазагрузіце. Вядома, гэта не правільна. 

Таму мне трэба, каб сказаць браўзэру трохі больш свядома, што я хачу, каб гэта зрабіць. Проста увёўшы імя відавочна недастаткова. Так нагадаем, што быў яшчэ адзін тэг, малюнкі, IMG, калі коратка. Гэта толькі таму, што людзі не падабаюцца поўныя словы тыпу. І тады мы можам зрабіць крыніца = "cat.jpg". 

А цяпер я збіраюся зрабіць Адна справа адрозніваецца тут. Нават пры тым, што ўсе нашы пазнакі да гэтага часу ёсць было гэта паняцце пачаць тэг і канчатковы тэг, што на самой справе не робяць сэнс для малюнка, ці не так? Малюнак альбо ёсць, альбо няма. І таму людзі прыйшлі з больш просты канвенцыі. Калі ў вас ёсць тэг, які можа і пачынацца і заканчвацца ў адной і той жа time-- яна можа быць пустым, таму, каб speak-- проста паставіць касую рысу ўнутры тэга ў самым канцы. Цяпер дазвольце мне вярнуцца да маёй браўзэры. Хіт Перазагрузіць Блін, нешта не так. Вы, напэўна, бачылі гэта часам у Інтэрнэце, нават калі ён не быў вінаваты. Гэта віна вэб-сервера. Што оды гэта, здаецца, паказваюць? Гэта працуе. Вось дзе вобраз належыць. Так? 

АЎДЫТОРЫЯ: Але гэта не мець доступ да выявы. 

DAVID J Малання: Гэта не мець доступ да выявы. Гэта, ці яшчэ горш, можа быць, гэта нават не існуе. Давайце паглядзім, калі мы не можам дыягнаставаць, што. Нагадаем, з мінулага разу, што, калі у Chrome, ў прыборы, ці нават на вашым Mac ці PC, Вы зайдзіце ў меню Developer і перайсці да Developer Tools варыянт, які, верагодна, у Вас ёсць не выкарыстоўваецца шмат ці калі-небудзь. І калі я іду ў Сетка і перазагрузіце старонку, давайце рэальна глядзець на HTTP Запыты, якія прымаюцца. 

Падобна на тое hello.html з'яўляецца сапраўды ОК, значыць 200. Але cat.jpg з'яўляецца 403. Так што гэта не 404. Файл, верагодна, існуе. 403 азначае, забаронена. Так што гэта крыху заблытаным. Я збіраюся вярнуцца да майго акне тэрмінала. Дазвольце мне павялічыць тут. І зробім Ls. Там у тыя ж файлы. 

Цяпер дазвольце мне зрабіць LS-л, якія вы, верагодна, выкарыстоўваецца, перш чым паглядзець на файл памеры, можа быць, або часовыя пазнакі. І мы бачым цэлую кучу Пераважная інфармацыя. Але звярніце ўвагу, некалькі дэталяў. Вось hello.html ў гэтым веславаць тут і вось cat.jpg. І гэта ўсяго толькі прыбор быць прыязныя, вылучыўшы ў фармаце JPEG карыстальнік у фіялетавы, як гэта. Але што яшчэ адрозніваецца побач памер файла і імя файла? 

АЎДЫТОРЫЯ: [неразборліва]. DAVID J Малання: Так, ёсць больш за два R, сюды. Звярніце ўвагу, што hello.html ўжо адбываецца. Вось і атрымліваецца, што імя гэты каталог грамадскасці важна. Усё, што ў гэтым каталогу прызначаецца, каб быць адкрытымі. Але гэта не дастаткова проста капіяваць файлы туды. Акрамя таго, неабходна змяніць Рэжым файлы, змяніць правы Файл актыўна не быць па змаўчанні, якая з'яўляецца тое, што толькі я магу чытаць і запісаць яго, я як уласнік. Я хачу, каб увесь свет ўсіх на умець чытаць мой файл, калі можна так выказацца. Чытаць толькі азначае яго прагляду. 

І сапраўды, як вы ўбачыце ў праблеме ўсталяваць сем, вось што азначаюць гэтыя R ст. Сярэдняе гэтых двух R ў хай ўсім яшчэ ў свеце таксама прачытаць яго, асабліва цяпер, гэта ў гэтым каталогу. Так, самы просты спосаб выправіць гэта, каб перайсці да маёй радку і зрабіць CHMOD для змены Рэжым і затым зрабіць A + R, у цэлым, усё, усё, плюс г для чытання, а затым cat.jpg Enter. Нішто, здаецца, здарылася, што Звычайна гэта азначае добрую рэч. Так LS-л again-- зараз давайце паглядзім на cat.jpg. І гэта дазвол здаецца, змяніліся. Як у баку, калі вы робіце памылка, і вы, да прыкладу, толькі што зрабіў your-- я не знаю-- эсэ агульнадаступным выпадкова, Вы можаце зрабіць наадварот, CHMOD на-р. Хоць, шчыра кажучы, гэта не павінна быць у агульным каталогу у любым выпадку, калі гэта неспакой. 

Так што цяпер давайце вернемся да мой браўзэр і перазагрузкі. І я збіраюся націсніце трохі Ghostbusters сімвал, каб ачысціць гэтую частку Экран таму мы можам бачыць новыя запыты. І сапраўды, тут ёсць Grump Кэт раней. Але што яшчэ больш важна, Тэхнічна, існуе лік 200, якая азначае, што мы атрымалі гэта ОК. Добра, так што ўсё цудоўна і выдатна. Але мы не робім лепшы вэб-сайтаў, і мы не будзем спрабаваць занадта моцна, каб зрабіць самае незвычайнае з сайтаў сёння. Але давайце хоць бы нешта зрабіць супер знаёмыя да бразгаючы ад некалькіх іншых тэгаў. Таму выкажам здагадку, я не проста хачу котку тут. Выкажам здагадку, што я на самой справе хачу гэта котка спасылку на нешта. 

Я мог бы, напрыклад, зрабіць што-нешта накшталт гэтага. для анкернага HREF для гіпер спасылка equals-- і давайце проста рабіць нешта як www.google.com закрыцця цытаваць зачыняе дужку. А цяпер шукаць котак. Зачыніць якар тэг. Так што гэта толькі адзін выгляд прынцыпова новая дэталь. Тэг вядома, адрозніваецца. Гэтае імя для якара HREF або гіпер спасылкі. 

Але што яшчэ больш важна, ёсць гэта сінтаксічныя асаблівасці тут. Гэта тое, што мы пачнем называць ня тэг, але атрыбут. І атрыбутам з'яўляецца тое, што змяняе паводзіны тэга. І гэта атрыбут, HREF, сродкі змяніць паводзіны гэтага якара так што, калі ён націснуў, ён ідзе па наступным адрасе тут. І, вядома, што URL з'яўляецца Google. 

Між тым, што гэта тэкст тут будзе? Ну, што гэта будзе што чалавек на самой справе бачыць, як падкрэслены спасылка, так проста. Такім чынам, давайце паспрабуем гэта. Дазвольце мне захаваць яго. Я да гэтага часу ў hello.html. Але ў версіі онлайн, вы ўбачыце фактычныя імёны файлаў мы загадзя падрыхтавалі. Дазвольце мне ісці наперад і перазагрузкі. А цяпер гэта вельмі захапленне старонкі яшчэ. Але калі я навядзіце курсор мышы на there-- і гэта трохі малая, но-- вы можаце бачыць у ніжняй левы кут экрана, гэта сапраўды збіраецца google.com. І калі я націскаю, што гэта будзе ўзбіце мне шлях да фактычнай Google. 

Але звярніце ўвагу, тут магчымасць для эксплуатацыя, як у бок. І мы вернемся да іншай пытанні бяспекі ў бліжэйшы час. Таму што ёсць гэтая дыхатамія між тым, дзе вы ідзяце і што вы кажаце, Вы маглі б зрабіць нешта накшталт this-- http://www.google.com. Добра, а цяпер, калі я перазагрузіць Пасля захавання гэтай старонцы, гэта выглядае як я збіраюся пайсці ў Google. Але няма ніякай прычыны, я павінны пайсці ў Google, ці не так? Я мог фактычна ісці нешта накшталт badguy.com, перазагрузіце старонку тут. І заўважце, гэта ўсё яшчэ выглядае як Google. І толькі калі я рэзкі Дастаткова навесці тут я бачу гэта нават збіраецца пайсці ў іншае месца. 

Так што, калі вы калі-небудзь атрымліваў электронная пошта, асабліва адзін з Paypal або здавалася б, ад Paypal прашу вас увайсці на ваш рахунак, гэта Таму вы ніколі не павінны альбо націсніце спасылкі ў паведамленнях электроннай пошты, шчыра кажучы, любыя спасылкі ў электронных лістах. Калі вы ведаеце, што фактычная грошы ў Paypal або банка Амерыкі ці Fidelity або любы сайт, увесці яго ўручную. Таму што паглядзіце, як лёгка гэта падмануць каго-то ў прадстаўленні, што выглядае як спасылку. Але гэта на самай справе мог пайсці абсалютна ў любым месцы. 

І ёсць нашмат больш, пагроз, чым гэта. На самай справе, гэта крыху датычнай цяпер, але адна з лепшых, якія я калі-небудзь бачыў якія з тых часоў былі зачыненыя, гэта хто-то прывёў людзей to-- так што гэта можа сказаць, Націсніце тут, каб увайсці ў ваша рахунак, банкаўскі рахунак. І гэта было Банк Захадзе. 

Дык хто-то купіў гэта. І гэта крыху лягчэй ўбачыць гэта ў монашырынным шрыфтам павялічана у на 30-Ніхто з праектар з. Але калі ён маленькі шрыфт у што вы атрымліваеце па электроннай пошце, гэта выглядае як bankofthewest.com, ня bankofthevvest.com, якія нехта заплаціў $ 10 купіць. І тады гэта прывяло іх да эквівалент нейкі дрэнны сайт. 

І вы ўбачыце, too-- фактычна мы можам зрабіць this-- калі я іду да фактычнага сайце, bankofthewest.com, зноў жа, адклікае ў апошні раз што калі гэта іх вэб-старонкі і Вы цікава, як гэта працуе, можна, вядома, пайсці ў Інструменты для распрацоўшчыкаў Chrome. І вы можаце убачыць усе HTML прыгожа адфарматыраваная там. 

Але бліжэй да справы, Вы cam-- давайце зачыніць this-- вы можаце пайсці, каб паглядзець Распрацоўшчык View Source. Чаму б мне проста не скапіяваць усё, што А потым я можа перайсці ў маёй маленькай акне GEdit тут і зрабіць свой уласны вэб-старонкі. Захаваць у hello.html. І, верагодна, гэта будзе перапынак, таму што гэта не так лёгка, як правіла. Але цяпер, калі я перазагрузіць свой уласны старонку на мой уласны хіт перазагрузкі і CS50 Appliance, Добра, некаторыя рэчы зламаў. Але я даволі блізкія да таго, мая ўласная банкаўская сайт, ці не так? Усё гэта HTML-- 

[Смех] 

DAVID J Малання: --Я ня actually-- і вы ведаю, што ёсць хто-то там, хто фактычна націсніце гэтыя спасылкі таксама. Такім чынам, ясна, некаторыя рэчы зламаў. Але што адбываецца, каб прывесці нам у дыскусію, залішне прама зараз, як да таго, што CSS, каскадныя табліцы стыляў, з'яўляюцца, і як вы на самой справе спампаваць іншыя файлы HTML і JPEG файлы GIF файлы, Сайт можа выкарыстоўваць. Але ўсё гэта рэальным. Але гэта на самай справе зводзіцца да гэтыя вельмі простыя эўрыстыкі. 

Так што цяпер давайце проста бегла Некалькі іншых прыкладаў HTML проста каб даць вам адчуванне пра тое, што яшчэ можна зрабіць. Напрыклад, гэта list.html. Выкажам здагадку, што я хацеў зрабіць вэб-старонку са спісам дамоў у квадрат. Я мог бы выкарыстаць вул тэг для неўпарадкаваных Спіс, а затым у спісе пункт дзіця а затым ітэрацыі over-- або спіс, rather-- дома ў пытанне. 

І калі я адкрываю гэтую гульню, давайце зробім гэта. Давайце не hello.html, але list.html. Чорт вазьмі. Як гэта выправіць? Гэта тая ж самая праблема, як і раней, ці не так? Такім чынам, дазвольце мне зрабіць chmod-- oops-- CHMOD + р ад list.html. І зараз, калі я вярнуся ў сваім браўзэры і націсніце Reload, там гэта. Так што, калі вы калі-небудзь хацелі зрабіць маркіраваны спіс, вы можаце зрабіць гэта. Калі вы хочаце быць супер ўяўленне і зрабіць спарадкаваны спіс, ня неўпарадкаваных спіс, змяніць тых, оле, перазагрузіце старонку, і Зараз браўзэр будзе налічваць гэта за вас. 

Што яшчэ мы можам зрабіць? Ну, пару others-- калі ў вас ёсць доўгія абзацы text-- Напрыклад, некаторыя Лацінскі тэкст як this-- і вы хочаце яго ў асобных пунктах, адкрыты р, побач р для тэга абзаца. І рабіць гэта зноў і зноў. І калі я зараз адкрыць гэты файл, paragraphs.html, добра, гэта становіцца раздражняльным. Так што цяпер давайце проста вернемся да маіх падкажыце, CHMOD A + R R зорку .html-- міленькі дзікая карта, так бы мовіць. Гэта павінна выправіць усе гэтыя праблемы для мяне. Давайце перазагрузіць. Там у тры абзаца. 

А цяпер давайце ісці наперад і адкрыць адзін іншы. Як наконт стала? Вы заўважыце, табліца выглядае крыху больш складана. Але гэта тое ж самае idea-- адкрыты тэг, адкрыты тэг, адкрыты, адкрыты, адкрыццё, закрыццё тэгаў, адкрыты тэг. І гэта адбываецца стаяць Табліца, чыя мяжа, відаць будзе таўшчыня 1-- ўсе што азначае: радок табліцы, табліцы Дадзеныя, якія азначае клетку. І калі я вярнуся ў сваім браўзэры тут і пайсці ў table.html, Вы можаце ўбачыць што-то як гэта, агідны. Але мы вернемся да кропкі дзе мы можам на самай справе зрабіць рэчы прыгажэй, чым гэта. 

Такім чынам, дазвольце мне прадугледжваюць цяпер. Там у пучкі з некалькіх тэгаў. І HTML выдатна падабраць таму што, шчыра кажучы, усё, што вам трэба зрабіць, будзе глядзець на існуючых вэб-старонак з якой вы знаёмыя. І вы, як, ну, вось як яны зрабілі гэта эстэтычна. 

Ці вы можаце паглядзець любы онлайн рэсурс аб тым, як HTML працуе, і вы ўбачыце, што ёсць Уся лексіка іншых тэгаў. Але з простай ментальнай мадэлі адна, што амаль любы тэг адкрыцці павінен быць зачынены, яго сапраўды робіць дастаткова, каб навучыць сябе HTML пасля зразумець гэтыя асноўныя ідэі тэгаў і атрыбуты і добра сфарміраванасці што мы гаварылі пра, закрыццё усё, што мы маглі б адкрыць так што мы не блытайце браўзэр. Так цяпер давайце гэта больш цікавы ўзровень перайшоўшы ў рэальнае. І пойдзем да майго Mac тут, на google.com. А цяпер notice-- давайце зробім гэта. Я гонг, каб перайсці да Налады, паводле пошуку. Я хачу, каб адключыць гэты прыкры момант Вынікі рэч, дзе ён адразу ж пачынае рэагаваць на вашай друку. Давайце зробім гэты стары школу так мы на самай справе бачым, што адбываецца. 

Так што я іду, каб выратаваць майго Налады тут Google. А цяпер notice-- я збіраюся шукаць нешта накшталт котак. І ён па-ранейшаму робіць аўто поўная тут, але калі на машыне людзі набралі ў мінулым. Але звярніце ўвагу, што гэта адбудзецца. 

У URL на дадзены момант гэта, проста google.com. І тэхнічна, гэта рыса. Google проста выратаванне характар і ня паказвае нам, што. Яны паказваюць нам HTTPS, проста быць супер абнадзейвае, што мы у бяспечным або зашыфраванай старонцы. 

Такім чынам, дазвольце мне ісці наперад і шукаць котак. Зараз гэта стала сапраўды Пераважная хутка. Паглядзіце на даўжыню гэтага URL. Але аказваецца, што вялікая частка гэтага матэрыялу ў URL на самай справе даволі бескарысна. Я збіраюся пачаць выдаленне рэчы, якія я не разумею. Я бачу котак. Я разумею, котак. Я не ведаю, чаму кошкі там зноў. Я сапраўды не ведаю, што гэта за глупства. Так што я проста буду працягваць выяўленне і выдаленне матэрыялу што я не разумею, перагонкі URL у толькі ў гэтым. 

Цяпер дазвольце мне пачаць ўводзіць зноў. Падобна на тое, Google ўсё яшчэ працуе. Дык чаму, яны дадаюць Шмат матэрыялу для іх URL-адрасы па змаўчанні. Але гэта не з'яўляецца абавязковым. Дык што ж такое добрая пра гэта? Ну, дазвольце мне ісці наперад і адкрыць інспектар у Chrome. Там трохі ярлык мыш для яе. 

Перайдзіце на ўкладку Network. А цяпер дазвольце мне перазагрузіць гэтую старонку яшчэ раз. І я трымаю Shift. Як у баку, браўзэраў як правіла, кэшаваць або захаваць Інфармацыя толькі дзеля эфектыўнасці ў. Але звычайна трымае Зрух і перагрузка прымусіць усё каб пачаць усё з пачатку. І вось што я хачу зрабіць тут. 

І заўважце, усё гэта Радкі, якія толькі з'явіліся. Атрымліваецца, што ў любы момант Сеткі старонка, там можа быць толькі адзін файл involved-- hello.html-- ці там 52 можа быць, як у дадзеным выпадку. Калі я наведваю google.com, па-відаць, мой браўзэр стартуе 52 асобных запытаў HTTP. Чаму гэта? 

Ну, паглядзіце на тое, што ўнутры гэтай вэб-старонцы да верхняй. Там не толькі тэкст, але ёсць фактычныя выявы котак больш направа. Там у маляўнічы лагатып тут злева. Там усё з гэтых значкоў для мікрафона і гэтак далей. Там вельмі шмат дэталяў, будаўніцтва блокі, скрэтч штук, калі хочаце, на гэтай вэб-старонцы. А што браўзэр робіць на атрымліваць самую першую файл, які гэта радок тут, гэта, па сутнасці, ітэрацыі па HTML верхняй ўніз, злева направа, шукаю рэчы, як малюнак пазнакі або іншыя тэгі якія згадваючы іншыя файлы і калі ён бачыць іх, ідзе і атрымлівае іх праз HTTP, жыццяздольным цэлым Метафара канверт, а затым адлюстроўвае іх у Падыходнае месца на вэб-старонцы. 

Але звярніце ўвагу, тут, калі я спынюся на першыя кідок, пошуку кошкі, заўважыць, што, на самай справе ён выкарыстоўвае пратакол HTTP 1.1. І, на жаль, Google Chrome цяпер у версіі 39 гэта свайго роду нулявога адказу рэчаў ўніз і не паказваючы нам фактычныя загалоўкі. Але тое, што было на самай справе паслаў гэта запыт для ня слэш, але / пошук? д = кошкі. 

Цяпер, чаму гэта так важна? Ну, я збіраюся вывесці з таго, што калі вы Google падтрымлівае запыты гэтай формы, таму ня я рэалізаваць уласны пошук Рухавік для CS50, але толькі пярэдняя канец, проста графічны інтэрфейс карыстальніка. І мы будзем аўтсорсінг задні канец, прыводзіць фактычны пошук у Google. 

Так як я магу гэта зрабіць? Ну, дазвольце мне перайсці ў Gedit тут. І дазвольце мне ісці наперад і адкрываць да, скажам, новы файл. І я іду, каб выратаваць гэты часова як пошуку 0.html. А потым у рэшце рэшт, мы будзем хутка чакаю таго, што я загадзя падрыхтаваныя. 

І я збіраюся хутка на хуткую руку тыпу DOC HTML адкрыты кранштэйны HTML закрытая дужка HTML. Тады я збіраюся зрабіць галаву блізка галава адкрыта назву CS50 Пошук замест пошуку Google. Тут, унізе, я буду мець цела, тут блізка цела. А цяпер мне трэба CS50 Пошук. І на самай справе, давайце пабудаваць гэты паступова. Я збіраюся ісці наперад і зачыніць гэты і на самай справе паклаў яго ў агульны каталог. Так дайце мне толькі адзін момант. Пошук-0.html-- я збіраюся часова называць яго search.html. Я збіраюся CHMOD яму + R search.html. А цяпер я збіраюся адкрыць яго. Добра, так, каб было хутка. Але мэта проста быў каб атрымаць нас да кропкі таго, гэты тэкст файл з імем search.html. Так што няма на што глядзець яшчэ. На самай справе, калі я іду ў маім браўзэры, і перайсці да search.html, гэта ўсё, што ёсць. Але вы ведаеце, што? Я магу быць трохі незвычайным. Я прачытаў у кнізе, што ёсць Загаловак тэг называецца h1. І я збіраюся ісці наперад і выкарыстоўваць гэтую адкрытую h1 і блізка h1. Абнавіць старонку. І зараз гэта больш і смялей, не ўсё, што цікава, але па меншай меры гэта структурна больш цікавым. Але цяпер дазвольце мне прадставіць яшчэ адзін тэг. Аказваецца ёсць форма тэга. І дазвольце мне закрыць гэтую пазнаку. І атрымліваецца, што ёсць ўваход тэг, мае атрыбут тыпу, які гэта тып дадзеных поля, калі вы будзеце. І будзе тыпу тэксту. І яго значэнне будзе быць CS50 Пошук. Зачыніць тэг. І там адбываецца, няма паняцце адкрыцця і закрыцця з асобнымі тэгамі. 

Дазвольце мне вярнуцца сюды і паглядзець, што адбываецца, перазагрузіце. Атрыманне цікава. Падобна на тое, гэта тэкставае поле. І на самай справе, я не хачу паставіць значэнне там яшчэ. Дазвольце мне вярнуцца сюды і фактычна атрымаць пазбавіцца ад гэтага значэння, каб захаваць яго простым. Замест значэння, што я хацеў даць гэтую рэч было імя. І я не ведаю, што гэта такое, так што я вярнуся да гэтага. 

Але ніжэй, што я хачу зрабіць тып ўваходу = ўявіць. І гэта значэнне будзе CS50 Пошук. І мы ўбачым, чаму я пераехаў значэнне ў гэтым. Калі я перазагрузіць, я, здаецца, зараз ёсць зародкі майго ўласнага пошуку Рухавік, супер агідны, хоць, шчыра кажучы, гэта ня далёка кідок ад таго, што Старонка Google, па змаўчанні выглядае. 

Калі я іду сюды зараз, я магу набраць у коткі і, спадзяюся, націсніце кнопку Пошук. Але я не зусім зроблена яшчэ, таму што я не рэалізаваны, Відавочна, базы дадзеных. Я не лезлі Вэб-за вынікаў пошуку. Таму мне трэба, каб аўтсорсінг, што ў Google. Так як жа гэта зрабіць? 

Ну, перш за ўсё я трэба дадаць і дзеянні прыпісаць маёй тэга формы, што з'яўляецца http://www.google.com/search. І я ведаю, што толькі ад таго, выснову, паглядзеўшы ўважліва на іх URL. А цяпер зрабіць здагадку. Што павінен гэта тэкставае поле, верагодна, назваць, на аснове якой мы прыйшлі ад да? 

АЎДЫТОРЫЯ: в. 

DAVID J Малання: в. І мы на самай справе не трэба пытанне пазначыць гэта атрымліваецца, але в сапраўды гэта, в для запыту, верагодна, па па змаўчанні, проста таму што гэта што Лары і Сяргей прыдумаў гадоў таму. Так што цяпер дазвольце мне перазагрузіць старонку. Гэта не выглядае ўсё, што адрозніваецца. Але цяпер паглядзім, што адбываецца. 

Калі я друкую ў котак і націсніце CS50 Пошук і адпусціць, заўважыць, што я атрымаць ўзбітым ад фактычнай Google. Зараз, Google у цяперашні час трохі раздражняе ў тым, што яны дадаўшы дадатковы параметр, калі хочаце, каб у URL. Вось і ўсё адбываецца аўтаматычна на баку Google. 

Важнай часткай з'яўляецца тое, што я, здаецца, каб спарадзілі гэты запыт тут. І на самай справе, гэта тое, што адбываецца. Калі ў вас ёсць HTML, што Падобна на тое, гэта, гэта з'яўляецца свайго роду абазначэння вэб-распрацоўнікаў за гэтыя словы, ісці наперад і стварыць форму што, калі ён прадставіў, ён збіраецца па наступным адрасе. І калі URL прадаставіў Значэння для такіх рэчаў, як д, не ідуць проста на гэты URL. На самай справе, перайсці да пытання знак, а затым д = кошкі. Дадайце параметр, Параметр HTTP падобнае. 

І толькі, каб быць супер дакладным, што іх вывад here-- але я буду больш explicit-- з'яўляецца што метад, які я хачу выкарыстоўваць гэта атрымаць, а нешта накшталт Паведамленне, якое мы ў канчатковым выніку ўбачыць. Карацей кажучы, проста разумення HTML і выкарыстоўваючы некаторыя даволі простыя тэгі, Цяпер мы можам прыступіць да стварэння наш уласны фронт канчатковы карыстальнік інтэрфейс з магчымасцю пошуку Рухавік ззаду яго. 

Але гэта вядома, даволі агідны. Такім чынам, дазвольце мне на самай справе адкрыць трохі лепш версія. Гэта той, які я падрыхтаваў у наперад, што ёсць некаторыя каментары. Але вы ўбачыце, што я у значнай ступені аднавілі яго. Так што гэта ўжо даступныя ў Інтэрнэце. І я, здараецца, прэвентыўна перайсці да HTTPS проста трымаць яго проста. 

А цяпер давайце адкрыем Наступная ітэрацыя гэтага. З'яўляецца замест версія 1 0. Што выскоквае на вас, як злёгку адрозніваецца ў гэтым прыкладзе? 

АЎДЫТОРЫЯ: [неразборліва]. 

Так, ёсць такі тэкст выраўнаваць цэнтр. Гэта крыху дзіўна, тут. Але гэта сапраўды новая. І, можа быць, думаю, што гэта адбудзецца. Калі я іду ў маім браўзэры зараз і наведаць пошуку-1.html, гэта амаль тое ж самае. Але гэта крок бліжэй да быць трохі больш значнай. Гэта яшчэ непрыгожа, але прыгажэй у тым, што па меншай меры, усё, цяпер па цэнтры. 

Вось і атрымліваецца, што тое, што я выкарыстоўваю з'яўляецца іншую мову наогул называецца CSS, каскадныя табліцы стыляў. І CSS, шчыра кажучы, гэта свайго роду з, па маім асабістым думку, жахліва распрацаваны мову. Гэта вельмі раздражняе памятаць усе розныя дэталі. Але гэта тое, што стылізуются Уся сусветная павуціна сёння. Я пакрыўдзілі каго. Добра. Так што давайце вернемся сюды і паглядзець, як мы на самай справе з дапамогай гэтага. І атрымліваецца, па меншай меры, гэта на самай справе даволі простая мова. Гэта проста пар ключ-значэнне, ўласцівасці і значэнні, ўласцівасці і значэння. На самай справе, тут ёсць адзін такое маёмасць і значэнне. 

Проста з дапамогай стылю атрыбутаў на маім целе тэга і надаўшы яму значэнне Слова тоўстай кішкі і іншае слова, або ўласцівасць і значэнне, Я магу паўплываць на эстэтыку вэб-старонкі, а не абавязкова структура яшчэ, але эстэтыка яго. І толькі па трошкі вакол, я разумею, што лісты CSS, каскадныя табліцы, падтрымлівае ўласцівасць выраўноўвання тэксту, значэнне якога можа быць злева, справа, або цэнтр, напрыклад. 

Так што цяпер, калі я перазагрузіць гэтую старонку, тое, што я сапраўды атрымліваў быў цэнтрам старонка, але ўсё яшчэ даволі пачварны. Давайце ісці наперад і адкрываць да версіі 2 Пошук. А цяпер звярніце ўвагу, што я зрабіў крыху больш. Звярніце ўвагу, што тут ўнутры галавы Тэг, можа быць больш, чым загалоўку. На самай справе, ёсць тэг стыль. І гэта, дзе гэта толькі атрымлівае трохі брудны бачанне CSS часам. 

Звярніце ўвагу, што я, здаецца, ёсць што-то што структурна выглядае зусім інакш. Але тут гэтае імя тэг Хачу стылізаваны. Вось нашы старыя сябры кучаравыя падцяжкі і закрытая фігурная дужка. А потым тут з'яўляецца тое, што ўласцівасць і яго значэнне. 

Калі я загрузіць гэты файл, search2.html, Канчатковым вынікам з'яўляецца ідэнтычным. Але гэта крок у бок павышэння якасці выконваемых работ. Вылучыўшы гэты CSS, у мяне ёсць ня змешваюцца яго з маёй HTML. І на самай справе, як мы ўбачым, я мог выкарыстоўваць гэтыя ўласцівасці і значэння. Калі б я хацеў зрабіць букеты частцы маёй вэб-старонцы па цэнтры, Я не прыйдзецца ўводзіць стыль = выраўноўвання тэксту цэнтр паўсюдна. Я магу паставіць у адным месцы магчыма, хацелі наверсе. 

Але нават гэта не лепшы дызайн. На самай справе, адна з рэчаў, вы даведаецеся, як вы праводзіце больш часу з вэб-праграмаванне з'яўляецца тое, што чым больш вы можаце модуляризуете рэчы і фактар ​​рэчы як .h файлаў давайце фактар ​​рэчы з, падабаецца helpers.c Давайце фактар ​​рэчы некалькі psets таму. Сапраўды гэтак жа, мы маглі б хачу дамагчыся гэтага. 

Так заўважыць у версіі тры з search.html я маю ачышчаны кіраўнік старонка і проста паставіць ў гэтым, спасылка тэг, які насуперак назве, не дае вам гіперспасылкі. Ён звязвае ў іншы файл шляхам HREF значэнне якога ў дадзеным выпадку, з'яўляецца пошук-3.css Так што я разумею, што мы збіраемся хутка. Але ўсё, што я раблю гэта свайго роду перамяшчэння рэчы вакол. Хай мне адкрытую пошуку 3.css. Там ён не з'яўляецца, нічога сапраўды да яго. Я проста скапіяваў і ўставіў яго ў новы падаць, гэтак жа, як мы ўлічылі рэчы з у іншыя файлы перад. І result-- цалкам underwhelming-- будзе дакладна тое ж самае. Але мы рухаемся toward-- не, гэта не так. О, я ведаю, чаму. 

Так што, падобна, што гэта памылка. І гэта ў нейкім сэнсе. Але дазвольце мне адкрыць сваю ўкладку Сетка. Дазвольце мне перазагрузіце старонку. Ах, чаму CSS не ўжываецца? Добра, файл CSS, аналагічна, мае каб быць даступны ўсім, так бы мовіць. І гэта таксама ў цяперашні час забаронена. Такім чынам, дазвольце мне зрабіць CHMOD A + R зоркі кропка CSS-- whoops-- мы кропка CSS гэта проста Пашырэнне файла для файлаў стыляў. Цяпер дазвольце мне вярнуцца да мой браўзэр і перазагрузкі. ОК, трохі лепш. 

Цяпер зробім адну рэч. У пошукавай-4.html. У мяне ёсць версія, што я проста думаў, быў значна строме, хоць і нашмат больш складаны. Давайце паглядзім на вынік у першую чаргу. Зачыніць гэта, каб даць нам больш месца. Зменіце гэта шукаць-4, Enter. 

А цяпер ёсьць шмат рэчаў зламаныя. Я збіраюся вярнуцца у маім каталогу тут. А цяпер я проста хачу зрабіць CHMOD з A + R на file-- таму што я ведаю, што гэта exists-- называецца logo.gif, які ёсьць вобраз. А цяпер перазагрузіць. І wow-- так што зараз я даволі блізка, шчыра кажучы, падабацца версію Google 1999, і шчыра кажучы, версія Google 2014, ці не так? 

Так што гэта зараз адбываецца на іх сайт, у канчатковым рахунку, калі я шукаю для котак. І гэта сапраўды так. Але тое, што я зрабіў па-іншаму ў гэтай версіі 4? Такім чынам, мы не будзем занадта падрабязна спыняцца на гэтым тут. Вы ўбачыце гэта ў праблему ўсталяваць сем рэшце рэшт. Але звярніце ўвагу, я зрабіў некалькі рэчаў. 

Я ўвёў DIV тэг, які з'яўляецца падраздзяленнем, блізкія па духу да пункта тэга. Але падзел, як, вось прастакутная нябачным вобласць экрана. Давайце дамо яму унікальны Ідэнтыфікатар, склеп, толькі так што мы можам казаць пра гэта ў нашым фармаце HTML у іншым месцы. Вось яшчэ адзін DIV старонкі чый ID збіраецца здавольвацца. Гэта змест старонкі. І тут гэта загаловак старонкі. 

Іншымі словамі, у мяне ёсць па сутнасці ў HTML я разумова глядзяць гэтую вэб-старонку ў якасці Тры кампаненты, загаловак тут з гэтай нябачнай прамавугольніка, ўтрыманне ў сярэдзіне, а затым падвал ўнізе, нават хоць мы не бачым гэтыя рэчы. Таму што я хачу, каб у маёй галаве старонка тут, або ў файле .css, Я магу выкарыстоўваць гэты сінтаксіс. 

Загаловак не з'яўляецца тэг. Гэта ID так атрымліваецца што, робячы #header, Цяпер я магу прымяніць адну або некалькі ўласцівасці ў загалоўку. Я магу зрабіць тое ж самае змест, тое ж самае для ўтрымання тут. 

Так, напрыклад, у зносцы, паведамлення усе гэтыя ўласцівасці я дадаю. І я ведаю, што яны існуюць толькі на чытанне на дакументацыі для CSS. Памер шрыфта будзе smaller-- таму некаторыя адносны памер шрыфта. Вага збіраецца быць смелым. Margin-- колькі пікселяў вакол it-- 20 пікселяў. І гэта будзе па цэнтры. 

Але цяпер, старонка выглядае наступным чынам. Калі я не задаволены мая копія тут жа, Я мог бы зрабіць нешта накшталт чырвонага колеру. І тады я магу захаваць гэта, перазагрузіце, і цяпер я стылізаваны склеп. Так што гэта проста намякаючы на ​​ўладу аб тым, што вы можаце зрабіць на вэб-старонцы каб змяніць ход падзей. 

І нават строме, чым гэта, калі вы хочаце капацца з фактычнымі сайтаў, Вы не можаце пастаянна мяняць іх. Але калі я адкрываю Інспектар Chrome зноў і я іду ня да левай баку Тут, які паказвае HTML на Facebook, але паказвае на правай бок усё яго CSS, Вы можаце і змяніць становішча рэчаў на лета. Такім чынам, дазвольце мне ісці наперад і рабіць гэта. 

Дазвольце мне ісці наперад і кіравання націсніце на гэтую выпадковага слова тут, падпісаць і націсніце Агледзіце элемент. Chrome вельмі зручна пераходзіць да h1 тэг, Facebook выкарыстоўвае. І заўважце, тут Facebook мае выгляд ляніва жорстка памер шрыфта ў уласнасці тут. 

Так выдатна, што хоць што калі я на самой справе ісці сюды і кажуць, о, Facebook, я не люблю, што 64 пікселяў, мы можам зараз змяніць Facebook. Вядома, мы толькі змяняючы яго асабіста для мяне на дадзены момант. Але гэта ўсяго толькі яшчэ інструмент у нашым наборы інструментаў што адбываецца, каб дазволіць нам наладзіць і высветліць, а таксама дыягнаставаць пытанні ў нашых уласных вэб-старонак. І мы маглі б гэтак жа перайсці тут, што тое ж самае, што. Калі вы сапраўды жадаеце атрымаць фантазіі, я значыць, зараз вы можаце сапраўды мутаваць старонку і рабіць вар'яты рэчы. 

Так чаму ўсё гэта карысна? Ну, у рэшце рэшт, мы захоча быць магчымасць ствараць вэб-старонкі, што рухае нашымі задніх рэшт, не толькі Google і аўтсорсінг задні канец там. Мы на самай справе хочам значэнне, напрыклад, дзеянні нашай пошукавай сістэмы атрыбутаў ісці не да каго-небудзь яшчэ, але нешта накшталт search.php, дзе search.php на нашай уласнай сэрвэры, няма на каго-то іншага. 

І так, каб патрапіць туды, мы на самай справе трэба ўвесці новы мову. Такім чынам, мы ўжо глядзелі на адзін новы Мова тут, ці два сапраўды, HTML і CSS. Але яны на самай справе проста структурныя і эстэтычныя мовы. Яны не праграмаванне мовы як такія. А вось пра тое, як шмат фармальнага Час, як мы будзем марнаваць на іх. Таму што мы пачнем цяпер да пераходу на PHP. 

Так PHP з'яўляецца актуальнай Мова праграмавання. Гэта мова сцэнарыяў у сэнсе, што гэта значыць быць лёгкі вага чымсьці накшталт C, І гэта інтэрпрэтаваная мова, што азначае, што гэта не складзены. Такім чынам, у двух словах, што гэта значыла калі мы выкарыстоўвалі мову, як з і мы павінны былі сабраць яго? Што гэта значыць для кампіляцыі C зыходны код? АЎДЫТОРЫЯ: [неразборліва]. DAVID J Малання: Скажы гэта яшчэ раз? АЎДЫТОРЫЯ: [неразборліва]. DAVID J Малання: Выдатна. Гэта ператварае яго ў двайковым выглядзе. Гэта ператварае яго ў нулёў і адзінак ад фактычнага англійская-як зыходны код. І тады мы можам на самай справе запусціць гэтыя нулі і адзінкі прапускаючы іх праз CPU, двойчы пстрыкнуўшы значок або выканання каманды. 

PHP і Python і Рубі і Perl і JavaScript і гронкі сябра мовы інтэрпрэтуюцца мовы, якія ёсць Вы не кампіляваць іх. Хутчэй, вы корміце іх у якасці ўкладу ў Праграма называецца перакладчыка. І што перакладчык, якія нехта напісаў, счытвае зыходны код зверху ўніз, злева направа і толькі інтэрпрэтуе гэтыя лініі і робіць тое, што вы кажаце. 

Так што, калі вы сутыкнуліся з лінія, якая кажа друк, гэта не абавязкова канвертаваць друк да адпаведных нулёў і адзінак. Гэта проста ёсць гэты перакладчыка як вялікі, калі ўмова, што кажа, калі інструкцыя праграміста з'яўляецца друк, то зрабіце наступнае. Так ён інтэрпрэтуе яго як раз па выглядзе развагі праз тое, што ты кажаш гэта зрабіць. 

І PHP з'яўляецца адным з гэтых моў. І PHP гадоў таму быў распрацаваны менавіта для вэб-праграмавання. І гэта было першапачаткова вельмі неахайна брудны мову. І на самай справе, ёсць вялікі Колькасць дрэнны код PHP там. Але сам мову паспеў на працягу многіх гадоў, так што цяпер гэта на самай справе выдатны наступны крок педагагічна ад C, таму што гэта так па-чартоўску знаёма ўсім вы толькі што бачылі ў апошнія некалькі тыдняў. 

Той пачатковая рознасць мы ўбачым гэта няма асноўная функцыя больш. Калі вы пачнеце пісаць код, гэта проста адбываецца не атрымаць выканана ні на што, як мы ўбачым крыху пазней. Між тым, вось што Пераменная выглядае ў PHP. Гэта крыху розныя, але толькі ледзь-ледзь. 

У PHP, значыць не строгая тыпізацыя. Там у тыдзень набраўшы, які проста азначае, што тыпы дадзеных, такія як радкі і нумары і іншыя рэчы. Але вы не турбуйцеся паказаўшы што яны больш. PHP лічбы гэта для вас. Знак даляра з'яўляецца толькі рашэнне што PHP людзі зрабілі гадоў назад такім чынам, каб любая пераменная у PHP проста пачынае са знакам даляра. Гэта на самай справе свайго роду карысныя тым, што ён скача на вас трохі больш. 

Але пасля гэтага, гэта гэта стан, пры PHP. Што змянілася ў параўнанні з C? ня Trick question-- нічога, які на самай справе вельмі прыемна. Лагічныя выразы ў PHP-- ж. Лагічныя выразы з і супраць ці, перамыкачы, завесы, завесы, loops-- ОК, гэты адрозніваецца. 

Вось і атрымліваецца, што ёсць Некалькі іншых функцый у PHP. Адзін з іх на самой справе гэта, які цудоўна зручна. Калі $ лікаў з'яўляецца масівам, што вы заявіў раней у праграме, ў вас ёсць гэтая фантазія для кожнай канструкцыі што замест таго, каб рабіць усё, што раздражняе Я роўны 0, я гэта менш, чым гэта, [? Я ++?], для кожнага колькасці як колькасці, дзе кожны гэтых каштоўнасцяў знак даляра толькі зменная, а другі Вы можаце думаць, як І. Вы маглі б назваць гэта ўсё, што вы хочаце. Я назваў яго нумар. Гэта будзе перабраць масіў называецца лік. І на кожнай ітэрацыі, гэта адбываецца аўтаматычнае абнаўленне для вас лік знак даляра Зменная, так што вы ўвесь час мець доступ да зменнай, якую без неабходнасці рабіць якія-небудзь квадратная дужка абазначэння або індэксацыі ў масіве. 

Акрамя таго, у нас нават ёсць такія рэчы, як масівы, якія выглядаюць амаль гэтак жа ,, за выключэннем таго, вельмі часта, як мы будзем см, і ў PHP і JavaScript папярэдне ініцыялізаваць масіў выкарыстоўваючы квадратныя дужкі. З выкарыстоўвае фігурныя дужкі. Так што гэта крыху адрозніваецца, хоць мы сапраўды не выкарыстоўваць гэтую выкрут шмат. 

Але яшчэ больш магутна, PHP мае асацыятыўныя масівы, які з'яўляецца мудрагелістым спосабам сказаць хэш-табліцы. На самай справе, калі вы хочаце аб'явіць хэш Табліца ў PHP, у адрозненне ад C-- колькі радкоў кода сышло на на самай справе рэалізаваць хэш-табліцу ў C? Ці колькі радкоў кода з'яўляецца яго прымаючы да рэалізацыі хэш-табліцу ў C? Так што гэта, верагодна, шмат, ці не так? Гэта некалькі дзясяткаў, можа быць, 100 або 200. Гэта нетрывіяльная. Ці ён збіраецца быць, як Вы хутка ўбачыце, нетрывіяльна для рэалізацыі хэш-табліцу [Неразборліва], а таксама паспрабаваць. Але ў PHP-- і, шчыра кажучы, я верагодна, не павінен сказаць вам гэта да Monday-- ў PHP, калі вы хочаце стол, зрабіць. Гэта хэш table-- так з аднаго радка кода. І 

Шмат моў зрабіць. Удачы з PSET пяць. Так шмат моў гэтага. Яны даюць вам гэтыя абстракцыі што іншыя людзі, іншымі праграмістамі, стварылі для Вас, так што Вы можаце стаяць на сваіх плячах і пачаць выкарыстоўваць ідэі, якія супер пераканаўчым, як хэш-табліцы і дрэвы і спрабуе. Але вы не абавязкова павінны ажыццяўляць гэтыя рэчы самастойна. 

І так, у канчатковым рахунку, тое, што мы збіраемся выкарыстаць PHP для патэнцыйна напісанні праграм з так званай каманднага радка. Мы маглі б узнавіць кожную праграму мы напісалі ў гэтым семестры да гэтага часу, акрамя, можа быць, Breakout, якая выкарыстоўвае SPL, якая спецыфічная для C на дадзены момант. Але кожны Іншая праблема ўсталяваць, вядома Марыё і Цэзар і Vigenere і [? Crack?] І далей, мы можа паўторна рэалізаваць у PHP, і верагодна, крыху лягчэй. 

Але што мы ў канчатковым выніку збіраецца выкарыстоўваць PHP для гэта вэб-праграмаванне. І мы збіраемся ўвесці ў наступным тыдзень ментальная мадэль, парадыгма называецца MVC, выгляд мадэлі кантролера, якія, калі вы зрабілі праграмавання да гэтага ў Python або Рубі або ў іншым месцы, вы можа ведаеце гэтай каманды з Рэйкі і Django і да таго падобнае. Але калі вы пачатковец у гэта занадта, вы ўбачыце што гэта на самай справе вельмі натуральна пашырэнне факторизации і накшталт дызайну кода, які мы рабіў у С. Мы збіраемся зараз ўжываць некаторыя з гэтых урокаў у PHP так, каб, у канчатковым рахунку, мы рэалізацыі нашых уласных вэб-сайтаў. І калі вы роду загіпнатызаваныя або здзіўлены што мы збіраемся зрабіць, ўсё так хутка, разумею, што амаль кожны семестр, амаль 90% студэнтаў CS50, у тым ліку якія ніколі не праграмавалі, у канчатковым выніку зрабіць канчатковыя праекты, заснаваныя на вэб-праграмавання. І такім чынам, вы ўбачыце, што вяртаецца высокія ў бліжэйшыя тыдні. Такім чынам, мы будзем бачыць вас тады ў панядзелак. 

СПІКЕР 1: А зараз, Deep Думкі па Daven Фарнэме. Хэш-табліцы. 

[Смех]