[Гуляе музыка] 

Дэвід Дж малая: Гэта 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 для добрай мерай, слэш. Enter. Такім чынам, 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 для стварэння дынамічна Інтэрнэт старонкі, выкарыстоўваючы гэты новы мову. Так пра гэта ў сераду. Ўбачымся. 

[Гуляе музыка]